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

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

    <!-- 右侧内容区 -->
    <div class="right-content">
      <!-- 顶部筛选 -->
      <div class="filter-section">
        <el-radio-group v-model="radio" @change="changeRadio">
          <el-radio v-for="(it,idx) in timeList" :key="idx" :label="it.num" >{{ 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="init">查询</el-button>
        <el-button type="primary" @click="handleRest">重置</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.xslxList"></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.czztList" :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.jcqkList"></lineEcharts>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { timeValidate, timeSlotChange } from "@/utils/tools.js";
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 { qcckPost } from "@/api/qcckApi.js";
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
const radio = ref(0);
const timeList = ref([
  { label: "日", num: 0 },
  { label: "月", num: 1 },
  { label: "季", num: 2 },
  { label: "年", num: 3 }
]);
const dateRange = ref([timeValidate(),timeValidate()]);// 日期范围
const listQuery = ref({})
const obj = reactive({
  xslxList: [],
  jcqkList: [],
  czztList: [],
  cnList: {
    list: [],
    topColor:'#1bd6c2',
    colors: ["#28EEBF","#0DBAC5"],
  }
});


onMounted(() => {
  init() //初始化数据
});

const init = () => {
  let data = {
    ssbmdm: listQuery.value.ssbmdm,
    kssj: dateRange.value[0] + ' 00:00:00',
    jssj: dateRange.value[1] + ' 23:59:59',
    cjLx: 1 // 1-临安吗
  };
  
  // 获取线索类型统计
  qcckPost(data, '/mosty-gsxt/qbcj/getXscjTjByXslx').then(res => {
    let arr = res || [];
    obj.xslxList = arr.map(v=>{
      return { label:v.zdmc,value:v.count }
    })
  });

  // 获取奖惩情况统计
  qcckPost(data, '/mosty-gsxt/tbJlqk/getShygkhtj').then(res => {
    let arr = res || [];
    obj.jcqkList = arr.map(v=>{
      return { label:v.zdmc,value:v.count }
    })
  });

  // 获取处置状态统计 
  qcckPost(data, '/mosty-gsxt/qbcj/getXscjTjByCzzt').then(res => {
    let arr = res || [];
    obj.czztList = arr.map(v=>{
      return { label:v.zdmc,value:v.count }
    })
  });

  // 获取采纳情况统计
  qcckPost(data, '/mosty-gsxt/qbcj/getXscjTjByShzt').then(res => {
    let arr = res || [];
    obj.cnList.list = arr.map(v=>{
      return { label:v.zdmc,value:v.count }
    })
  });
}

const changeRadio = (val) =>{
  switch(val){
    case 0: //日
      dateRange.value = [timeValidate(),timeValidate()]
      break;
    case 1: //月
      dateRange.value = timeSlotChange('本月')
      break;
    case 2: //季度
      dateRange.value = timeSlotChange('本季度')
      break;
    case 3: //年
      dateRange.value = timeSlotChange('本年')
      break;
  }
}

const handleDateChange = (val) => {
  radio.value = '';
  if(val[0] == timeSlotChange('天')[0] && val[1] == timeSlotChange('天')[1]) radio.value = 0;
  if(val[0] == timeSlotChange('本月')[0] && val[1] == timeSlotChange('本月')[1]) radio.value = 1;
  if(val[0] == timeSlotChange('本季度')[0] && val[1] == timeSlotChange('本季度')[1]) radio.value = 2;
  if(val[0] == timeSlotChange('本年')[0] && val[1] == timeSlotChange('本年')[1]) radio.value = 3;
};

// 重置
const handleRest = () => {
  radio.value = 0;
  dateRange.value = [timeValidate(),timeValidate()];
  init();
};
;
</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>