feat:市局考核数据过滤

ZhangXianQiang

2024-04-24 22200f9cc59230b103d7a9a695453304eda98044

feat:市局考核数据过滤

 src/views/system/result/index.vue

@@ -1,7 +1,8 @@
<template>
  <div id="warp">
    <div>
      <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" style="margin-bottom: 10px">
      <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"
        style="margin-bottom: 10px">
        <el-menu-item index="1">省厅考核</el-menu-item>
        <el-menu-item index="2">市局考核</el-menu-item>
      </el-menu>
@@ -46,11 +47,7 @@
                </div>
              </div>
              <div class="bottom-publish">
                <el-button
                  size="medium"
                  :type="isAnyUnpublished(city) ? 'success' : 'danger'"
                  @click="publish(city)"
                >
                <el-button size="medium" :type="isAnyUnpublished(city) ? 'success' : 'danger'" @click="publish(city)">
                  {{ isAnyUnpublished(city) ? '发布' : '取消' }}
                </el-button>
                <el-button size="medium" @click="jumpDetail(index)" type="info">详情</el-button>
@@ -168,6 +165,88 @@
      }
      chart.setOption(option, true);
    },

    // 设置chart
    setChartOption(data) {
      if (!data) return;
      const mapData = Object.keys(data).map(key => {
        return {
          name: this.translateDeptId(parseInt(key)),
          data: data[key]
        }
      });
      const nameArray = mapData.map(item => item.name);
      const data1 = this.filterData(mapData, 0);
      const data2 = this.filterData(mapData, 1);
      const data3 = this.filterData(mapData, 2);
      const option = {
        grid: {
          left: 0,
          right: 0,
          bottom: 0,
          top: '20%',
          containLabel: true
        },
        legend: {
          right: 'right',
          top: 'top',
          icon: 'rect',
          orient: "vertical",
        },
        tooltip: {},
        xAxis: {
          type: 'category',
          axisLabel: {
          },
          data: nameArray
        },
        yAxis: {
          min: 90,
        },
        series: [
          {
            type: 'bar',
            name: '视频考核',
            data: data1,
            itemStyle: {
              color: 'rgba(255, 165, 0, 1)'
            }
          },
          {
            type: 'bar',
            name: '人脸考核',
            data: data2,
            itemStyle: {
              color: 'rgba(85, 192, 191, 1)'
            }
          },
          {
            type: 'bar',
            name: '车辆考核',
            data: data3,
            itemStyle: {
              color: 'rgba(62, 144, 247, 1)'
            }
          },
        ]
      }
      chart.setOption(option, true);
    },
    filterData(data, tag) {
      if (!data) return;
      if(Array.isArray(data) && !data.length) return;
      const tempArray = [];
      data.forEach((item) => {
        if(item.data.length) {
          item.data.forEach((examine) => {
            if(examine.examineCategory === tag) {
              tempArray.push(examine.score);
            }
          })
        }
      })
      return tempArray;
    },
    // 区域下拉数据
    areaSelect() {
      areaSelect().then(res => {
@@ -223,6 +302,7 @@
        this.checkScoreList = response.data;
        console.log(this.checkScoreList);
        this.loading = false;
        this.setChartOption(this.checkScoreList);
      });
    },
    publish(city){
@@ -254,19 +334,23 @@
  align-items: center;
  color: #797777
}

.score-item {
  display: flex;
  flex-direction: row;

}

.score {
  width: 60px;
  text-align: right;
  padding: 3px 0;
}

#warp {
  padding: 0 10px;
}

.city-warp {
  display: flex;
  flex-direction: column;
@@ -275,6 +359,7 @@
  height: 210px;
  margin-bottom: 25px;
}

.city {
  width: 240px;
  height: 100%;
@@ -284,15 +369,18 @@
  text-align: center;
  padding: 10px 0px;
}

.bottom-publish {
  width: 100%;
  position: absolute;
  bottom: 10px;
}

.title {
  font-size: larger;
  margin-bottom: 5px;
}

.data-chart-container {
  height: 400px;
  margin-bottom: 20px;
@@ -307,6 +395,7 @@
    }
  }
}

.title-container {
  position: absolute;
  display: flex;
@@ -331,6 +420,7 @@
    height: 100%;
  }
}

.select-container {
  margin: 0 20px;
  width: 180px;