自定义列显隐控制

xiangpei

2024-09-03 16eb67ab6b103663d30cad9ba74360f982e131cb

 src/views/system/check/result/index.vue

@@ -3,8 +3,10 @@
    <div>
      <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"
        style="margin-bottom: 10px">
        <el-menu-item index="0">省厅考核</el-menu-item>
        <el-menu-item index="1">市局考核</el-menu-item>
        <el-menu-item index="0">省厅月度</el-menu-item>
        <el-menu-item index="2">省厅季度</el-menu-item>
        <el-menu-item index="1">市局月度</el-menu-item>
        <el-menu-item index="3">市局季度</el-menu-item>
      </el-menu>
    </div>

@@ -31,9 +33,9 @@
              </div>
              <div class="score-warp">
                <div class="score-item">
                  <div style="font-size: 15px; margin-bottom: 15px">{{ formatCreateDate(city[0].createTime) }}</div>
                  <div style="font-size: 15px; margin-bottom: 15px">{{ formatCreateDate(city[0]) }}</div>
                </div>
                <div v-for="(score, scoreIndex) in city" :key="scoreIndex">
                <div v-for="(score, scoreIndex) in filterRepeat(city)" :key="scoreIndex">
                  <div class="score-item">
                    <div v-if="score.examineCategory == 2">车辆：</div>
                    <div v-else-if="score.examineCategory == 3">人脸：</div>
@@ -43,10 +45,10 @@
                </div>
              </div>
              <div class="bottom-publish">
                <el-button size="medium" :type="isAnyUnpublished(city) ? 'success' : 'danger'" @click="publish(city)">
                <el-button v-hasPermi="['check:score:publish']" 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>
                <el-button size="medium" @click="jumpDetail(index)" type="primary">详情</el-button>
              </div>
            </div>
          </div>
@@ -76,12 +78,6 @@
      activeIndex: '0',
      date: '',
      company: '',
      dataList: {
        name: ['富顺县', '荣县', '高新区', '自流井区', '贡井区', '大安区', '沿滩区'],
        data1: [95, 96, 97, 95, 94.5, 93.6, 94.5],
        data2: [93.7, 93.5, 94.3, 96.5, 95.3, 94.2, 93.3],
        data3: [98.3, 94.3, 93.3, 95.5, 96.8, 96.1, 95.8],
      },
      // 查询参数
      queryParams: {
        examineTag: null,
@@ -90,13 +86,13 @@
    }
  },
  created() {
  },
  mounted() {
    this.queryParams.examineTag = this.activeIndex
    this.getList();
    this.areaSelect();
  },
  mounted() {
    chart = echarts.init(this.$refs.barChart);
    this.initEchart();
    this.setChartOption(this.checkScoreList);
  },
  methods: {
    jumpDetail(index) {
@@ -138,6 +134,7 @@
            type: 'bar',
            name: '视频考核',
            data: this.dataList.data1,
            barWidth: '40',
            itemStyle: {
              color: 'rgba(255, 165, 0, 1)'
            }
@@ -146,6 +143,7 @@
            type: 'bar',
            name: '人脸考核',
            data: this.dataList.data2,
            barWidth: '40',
            itemStyle: {
              color: 'rgba(85, 192, 191, 1)'
            }
@@ -154,6 +152,7 @@
            type: 'bar',
            name: '车辆考核',
            data: this.dataList.data3,
            barWidth: '40',
            itemStyle: {
              color: 'rgba(62, 144, 247, 1)'
            }
@@ -196,50 +195,59 @@
          axisLabel: {
          },
          data: nameArray

        },
        yAxis: {
          min: 90,
          min: 0
        },
        series: [
          {
            type: 'bar',
            name: '视频考核',
            data: data1,
            barWidth: '40',
            itemStyle: {
              color: 'rgba(255, 165, 0, 1)'
              color: 'rgba(255, 165, 0, 1)',
            }
          },
          {
            type: 'bar',
            name: '人脸考核',
            data: data2,
            barWidth: '40',
            itemStyle: {
              color: 'rgba(85, 192, 191, 1)'
              color: 'rgba(85, 192, 191, 1)',
            }
          },
          {
            type: 'bar',
            name: '车辆考核',
            data: data3,
            barWidth: '40',
            itemStyle: {
              color: 'rgba(62, 144, 247, 1)'
              color: 'rgba(62, 144, 247, 1)',
            }
          },
        ]
      }
      chart.setOption(option, true);
    },
    filterData(data, tag) {
      if (!data) return;
      if(!Array.isArray(data)) return;
    filterData(mapData, tag) {
      if (!mapData) return;
      if(!Array.isArray(mapData)) return;
      const tempArray = [];
      data.forEach((item) => {
      mapData.forEach((item) => {
        if(item.data.length) {
          let flag = false;
          item.data.forEach((examine) => {
            if(examine.examineCategory === tag) {
              flag = true
              tempArray.push(examine.score);
            }
          })
          if(!flag){
            tempArray.push(0);
          }
        }
      })
      return tempArray;
@@ -259,8 +267,8 @@
      // 检查 city 的 score 数组中是否有任何一个的 publish 属性为 'UNPUBLISHED'
      return city.some(score => score.publish === 'UNPUBLISHED');
    },
    formatCreateDate(dateString) {
      const date = new Date(dateString);
    formatCreateDate(item) {
      const date = new Date(item.createTime);
      const year = date.getFullYear();
      const month = date.getMonth() + 1; // getMonth() 返回的月份是从 0 开始的，所以要加 1
      const day = date.getDate();
@@ -270,6 +278,17 @@
      const formattedDay = day.toString().padStart(2, '0');

      return `${year}年${formattedMonth}月${formattedDay}号`;
    },
    filterRepeat(city) {
      let list = [];
      let examineCategorys = [];
      city.forEach(item => {
        if (examineCategorys.indexOf(item.examineCategory) === -1) {
          examineCategorys.push(item.examineCategory);
          list.push(item);
        }
      });
      return list;
    },
    /** 导航切换 */
    handleSelect(key) {
@@ -294,8 +313,8 @@
      listScore(this.queryParams).then(response => {
        this.checkScoreList = response.data;
        console.log(this.checkScoreList);
        this.loading = false;
        this.setChartOption(this.checkScoreList);
        this.loading = false;
      });
    },
    publish(city) {