zgyw-ui.git - Gitblit

<template>
  <div id="warp">
    <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="2">省厅季度</el-menu-item>
        <el-menu-item index="3">市局季度</el-menu-item>
      </el-menu>
    </div>
 
    <div class="data-chart-container">
      <el-card class="data-card" :body-style="{ height: '100%' }">
        <div class="card-content">
          <div class="title-container">
            <h1>考核成绩</h1>
          </div>
          <div class="echart-container">
            <div id="barChart" ref="barChart"></div>
          </div>
        </div>
      </el-card>
    </div>
 
    <div>
      <el-row :gutter="100">
        <el-col :span="6" v-for="(city, index) in checkScoreList" :key="index">
          <div class="city-warp">
            <div class="city">
              <div class="title">
                {{ translateDeptId(parseInt(index)) }}
              </div>
              <div class="score-warp">
                <div class="score-item">
                  <div style="font-size: 15px; margin-bottom: 15px">{{ formatCreateDate(city[0]) }}</div>
                </div>
                <div v-for="(score, scoreIndex) in city" :key="scoreIndex">
                  <div class="score-item">
                    <div v-if="score.examineCategory == 2">车辆：</div>
                    <div v-else-if="score.examineCategory == 3">人脸：</div>
                    <div v-else-if="score.examineCategory == 1">视频：</div>
                    <div class="score">{{ score.score }}</div>
                  </div>
                </div>
              </div>
              <div class="bottom-publish">
                <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="primary">详情</el-button>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
 
</template>
 
<script>
import { areaSelect } from '@/api/system/dept';
import { listScore, getScore, delScore, addScore, updateScore, publishScore } from "@/api/platform/check-score";
import * as echarts from 'echarts';
let observer = null;
let chart = null;
export default {
  name: 'index',
  data() {
    return {
      province: {
        id: [],
        publish: null,
      },
      checkScoreList: [],
      areaList: [],
      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,
        createTime: null
      },
    }
  },
  created() {
    this.queryParams.examineTag = this.activeIndex
    this.getList();
    this.areaSelect();
  },
  mounted() {
    chart = echarts.init(this.$refs.barChart);
    this.initEchart();
  },
  methods: {
    jumpDetail(index) {
      this.$router.push({
        path: '/check/detail',
        query: {
          index: index,
          examineTag: this.activeIndex
        }
      })
    },
    initEchart() {
      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: this.dataList.name
        },
        yAxis: {
          min: 90,
        },
        series: [
          {
            type: 'bar',
            name: '视频考核',
            data: this.dataList.data1,
            barWidth: '40',
            itemStyle: {
              color: 'rgba(255, 165, 0, 1)'
            }
          },
          {
            type: 'bar',
            name: '人脸考核',
            data: this.dataList.data2,
            barWidth: '40',
            itemStyle: {
              color: 'rgba(85, 192, 191, 1)'
            }
          },
          {
            type: 'bar',
            name: '车辆考核',
            data: this.dataList.data3,
            barWidth: '40',
            itemStyle: {
              color: 'rgba(62, 144, 247, 1)'
            }
          },
        ]
      }
      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, 1);
      const data2 = this.filterData(mapData, 2);
      const data3 = this.filterData(mapData, 3);
      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: 60
        },
        series: [
          {
            type: 'bar',
            name: '视频考核',
            data: data1,
            barWidth: '40',
            itemStyle: {
              color: 'rgba(255, 165, 0, 1)',
            }
          },
          {
            type: 'bar',
            name: '人脸考核',
            data: data2,
            barWidth: '40',
            itemStyle: {
              color: 'rgba(85, 192, 191, 1)',
            }
          },
          {
            type: 'bar',
            name: '车辆考核',
            data: data3,
            barWidth: '40',
            itemStyle: {
              color: 'rgba(62, 144, 247, 1)',
            }
          },
        ]
      }
      chart.setOption(option, true);
    },
    filterData(data, tag) {
      if (!data) return;
      if(!Array.isArray(data)) 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 => {
        this.areaList = res.data;
      })
    },
    translateDeptId(deptId) {
      const department = this.areaList.find(dept => dept.id === deptId);
      return department ? department.value : '未知';
    },
 
    isAnyUnpublished(city) {
      // 检查 city 的 score 数组中是否有任何一个的 publish 属性为 'UNPUBLISHED'
      return city.some(score => score.publish === 'UNPUBLISHED');
    },
    formatCreateDate(item) {
      let date = new Date(item.startDate);
      let year = date.getFullYear();
      let startMonth = date.getMonth() + 1;
      date = new Date(item.endDate);
      let endMonth = date.getMonth() + 1;
      let str = `${year}年${startMonth}月`;
      if (startMonth !== endMonth) str += `-${endMonth}月`;
      return str;
    },
    /** 导航切换 */
    handleSelect(key) {
      this.activeIndex = key; // 更新当前激活的菜单项
      this.queryParams.examineTag = key;
      this.getList();
    },
    /** 查询考核成绩列表 */
    getList() {
      this.loading = true;
      // 获取当前日期
      const today = new Date();
 
      // 计算昨天的日期
      const yesterday = new Date(today);
      yesterday.setDate(today.getDate() - 1);
 
      // 将昨天的日期格式化为字符串，这里假设后端期望的是ISO 8601格式
      this.queryParams.createTime = yesterday.toISOString().split('T')[0];
 
      console.log(this.queryParams);
      listScore(this.queryParams).then(response => {
        this.checkScoreList = response.data;
        console.log(this.checkScoreList);
        this.loading = false;
        this.setChartOption(this.checkScoreList);
      });
    },
    publish(city) {
      let text = this.isAnyUnpublished(city) ? "发布" : "取消发布";
      const cityName = this.translateDeptId(parseInt(city[0].deptId));
      this.province.publish = text === "发布" ? "PUBLISHED" : "UNPUBLISHED";
      this.province.id = city.map(city => city.id);
      this.$modal.confirm('是否确认' + text + '考核名为"' + cityName + '"的成绩？')
        .then(() => {
          return publishScore(this.province);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess(text + "成功");
        })
        .catch(() => {
          // 错误处理逻辑
        });
    },
  },
}
</script>
 
<style lang="scss" scoped>
.score-warp {
  display: flex;
  flex-direction: column;
  justify-content: center;
  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;
  align-items: center;
  justify-content: center;
  height: 210px;
  margin-bottom: 25px;
}
 
.city {
  width: 240px;
  height: 100%;
  box-shadow: 0 2px 6px hsla(0, 0%, 7%, .1);
  border-radius: 10px;
  position: relative;
  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;
 
  .data-card {
    height: 100%;
 
    .card-content {
      width: 100%;
      height: 100%;
      position: relative;
    }
  }
}
 
.title-container {
  position: absolute;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 2;
 
 
  .more-button {
    cursor: pointer;
    font-size: 16px;
    padding: 0 10px;
  }
}
 
.echart-container {
  width: 100%;
  height: 100%;
 
  #barChart {
    width: 100%;
    height: 100%;
  }
}
 
.select-container {
  margin: 0 20px;
  width: 180px;
}
</style>