sgxt_web/src/views/backOfficeSystem/HumanIntelligence/RlStatisticalAnalysis/index.vue

<template>
  <div class="statistical-analysis">
    <!-- 左侧树形菜单 -->
    <div class="left-menu">
      <!-- 这个部分用的是组件-后期替换 -->
      <MOSTY.DepartmentTree width="310px" placeholder="管理部门" clearable filterable :isBmId="true" v-model="obj.listQuery.deptId" />
    </div>

    <!-- 右侧内容区 -->
    <div class="right-content">
      <!-- 顶部筛选 -->
      <div class="filter-section">
        <el-radio-group v-model="radio">
          <el-radio :label="it.value" v-for="it in timeList" :key="it.value">{{
            it.label
          }}</el-radio>
        </el-radio-group>
        <el-date-picker
          v-model="dateRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
          @change="handleDateChange"
        />
        <el-button type="primary" @click="handleExport">查询</el-button>
        <el-button type="primary" @click="handleExport">重置</el-button>
      </div>

      <!-- 统计图表区域 -->
      <div class="charts-container">
        <div class="chart-item">
          <div class="chart-title">
            <span>报送情况</span>
            <el-button type="primary">导出统计表</el-button>
          </div>
          <div class="chart">
            <PieEcharts
              echartsId="bsqkEpieChart"
              color="#333"
              :data="obj.bsqkList"
            ></PieEcharts>
          </div>
        </div>
        <div class="chart-item">
          <div class="chart-title">
            <span>采纳情况</span>
            <el-button type="primary">导出统计表</el-button>
          </div>
          <div class="chart">
            <DbarEcharts
              echartsId="bar3DChart"
              :data="obj.cnList"
            ></DbarEcharts>
          </div>
        </div>
        <div class="chart-item">
          <div class="chart-title">
            <span>战果情况</span>
            <el-button type="primary">导出统计表</el-button>
          </div>
          <ul class="chart mt8">
            <li v-for="(it, idx) in obj.zgList" :key="idx" class="mb6">
              <div style="color: #333">{{ it.label }}</div>
              <el-progress
                :text-inside="true"
                :stroke-width="20"
                :percentage="50"
                status="exception"
              >
                <span
                  ><span style="color: #e37233">{{ it.value }}</span> 个</span
                >
              </el-progress>
            </li>
          </ul>
        </div>
        <div class="chart-item">
          <div class="chart-title">
            <span>奖惩情况</span>
            <el-button type="primary">导出统计表</el-button>
          </div>
          <lineEcharts
            color="#333"
            echartsId="areaChart"
            :data="obj.jcList"
          ></lineEcharts>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import * as MOSTY from "@/components/MyComponents/index";
import lineEcharts from "@/views/home/echarts/lineEcharts.vue";
import PieEcharts from "@/views/home/echarts/pieEcharts.vue";
import DbarEcharts from "@/views/home/echarts/3DbarEcharts.vue";
import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
const radio = ref("日");
const timeList = ref([
  { label: "日", value: "0" },
  { label: "月", value: "1" },
  { label: "季", value: "2" },
  { label: "年", value: "3" }
]);
const obj = reactive({
  listQuery: {},
  bsqkList: [
    { label: "待上报", value: 18 },
    { label: "已上报", value: 20 },
    { label: "已流转指令", value: 50 },
    { label: "已办结", value: 40 },
    { label: "已归档", value: 30 }
  ],
  jcList: [
    { label: "表彰奖励", value: 10 },
    { label: "物质奖励", value: 20 },
    { label: "其他奖励", value: 50 },
    { label: "责任追究", value: 40 },
    { label: "通报批评", value: 40 },
    { label: "其他惩罚", value: 30 }
  ],
  zgList: [
    { label: "已处置", value: 10 },
    { label: "转指令", value: 20 },
    { label: "转协同", value: 50 },
    { label: "转督办", value: 40 },
    { label: "转移交", value: 40 },
    { label: "警种变更", value: 40 }
  ],
  cnList: {
    list: [
      { label: "已采纳", val: 50 },
      { label: "未采纳", val: 40 },
      { label: "已合并", val: 10 },
      { label: "已流转", val: 30 },
      { label: "退回", val: 40 },
    ],
    topColor:'#1bd6c2',
    colors: ["#28EEBF","#0DBAC5"],
  }
});


const defaultProps = {
  children: "children",
  label: "label"
};

// 日期范围
const dateRange = ref([]);

// 事件处理函数
const handleNodeClick = (data) => {
  console.log(data);
};

const handleDateChange = () => {
  // 处理日期变化
};

const handleExport = () => {
  // 处理导出
};

onMounted(() => {});
</script>

<style lang="scss" scoped>
.statistical-analysis {
  display: flex;
  height: 100%;

  .left-menu {
    width: 350px;
    padding: 20px;
    margin-top: 20px;
    border-radius: 4px;
    background-color: #fff;
    border-right: 1px solid #e8e8e8;
  }

  .right-content {
    flex: 1;
    padding: 20px;
    .filter-section {
      display: flex;
      align-items: center;
      gap: 16px;
      margin-bottom: 20px;
      background: #fff;
      padding: 10px;
      box-sizing: border-box;
      border-radius: 4px;
    }

    .charts-container {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      height: calc(100% - 50px);
      .chart-item {
        width: 49.5%;
        height: calc(50% - 5px);
        background-color: #fff;
        border-radius: 8px;
        padding: 20px;
        box-sizing: border-box;
        overflow: hidden;
        overflow-y: auto;
        .chart-title {
          font-size: 16px;
          font-weight: bold;
          color: #333;
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
        .chart {
          height: calc(100% - 40px);
          overflow: hidden;
          overflow-y: auto;
        }
      }
    }
  }
  
  ::v-deep .el-radio {
    color: #333;
  }
  ::v-deep .el-radio__inner {
    border-radius: 4px;
  }
  ::v-deep .el-progress-bar__innerText {
    color: #333;
    margin: 0 -40px;
  }
  ::v-deep .el-progress.is-exception .el-progress-bar__inner {
    background: linear-gradient(90deg, #fe5d00 0%, #face35 100%);
  }
}
</style>