feat:折线图动态切换

ZhangXianQiang

2024-04-25 0a870a218897b2bd65936127fa680ec102a866ff

feat:折线图动态切换

 src/views/system/result/detail/index1.vue

@@ -1,7 +1,8 @@
<template>
  <div style="padding: 0px 10px">
    <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>
@@ -12,6 +13,11 @@
        <div class="card-content">
          <div class="title-container">
            <h1>考核成绩</h1>
            <div class="select-container">
              <el-date-picker v-model="date" format="yyyy-MM" value-format="yyyy-MM" type="month" placeholder="选择日期"
                @change="dateChange">
              </el-date-picker>
            </div>
          </div>
          <div class="chart-container">
            <div id="chartContent" ref="chartContent"></div>
@@ -21,74 +27,44 @@
    </div>

    <div style="margin-top: 35px">
      <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
          label="考核时间"
          prop="createTime"
          align="center">
      <el-table :data="tableData" style="width: 100%" v-loading="loading">
        <el-table-column label="考核时间" prop="createTime" align="center">
        </el-table-column>
        <el-table-column
          label="考核对象"
          prop="deptId"
          align="center">
        <el-table-column label="考核对象" prop="deptId" align="center">
          <template slot-scope="scope">
            {{ translateDeptId(scope.row.deptId) }}
          </template>
        </el-table-column>
        <el-table-column
          label="标签"
          prop="examineTag"
          align="center">
        <el-table-column label="标签" prop="examineTag" align="center">
          <template slot-scope="scope">
            {{ scope.row.examineTag == 0 ? '省厅考核' : '市局考核' }}
          </template>
        </el-table-column>
        <el-table-column
          label="考核类型"
          prop="examineCategory"
          align="center">
        <el-table-column label="考核类型" prop="examineCategory" align="center">
          <template slot-scope="scope">
          <dict-tag :options="dict.type.platform_examine_category" :value="scope.row.examineCategory"/>
          </template>
        </el-table-column>


        <el-table-column
          label="分数"
          prop="score"
          align="center">
        <el-table-column label="分数" prop="score" align="center">
        </el-table-column>
        <el-table-column
          label="状态"
          prop="publish"
          align="center">
        <el-table-column label="状态" prop="publish" align="center">
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button size="small" type="text"  v-show="scope.row.publish != 1">确认发布</el-button>
            <el-button size="small" type="text"  v-show="scope.row.publish == 1">取消发布</el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-view"
              @click="handleDetail(scope.row,scope.index)"
            >详细</el-button>
            <el-button size="mini" type="text" icon="el-icon-view"
              @click="handleDetail(scope.row, scope.index)">详细</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div style="text-align: right; margin-top: 10px">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[5, 10, 20]"
        :page-size="5"
        layout="total, sizes, prev, pager, next, jumper"
        :total="4">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4"
        :page-sizes="[5, 10, 20]" :page-size="5" layout="total, sizes, prev, pager, next, jumper" :total="4">
      </el-pagination>
    </div>

@@ -97,7 +73,8 @@

<script>
import { listScore, getScore, delScore, addScore, updateScore,publishScore} from "@/api/platform/check-score";
import { areaSelect } from '@/api/system/dept'
import { areaSelect } from '@/api/system/dept';
import { mapState } from 'vuex';
import * as echarts from 'echarts';
let lineChart = null;
let observer = null;
@@ -109,6 +86,7 @@
      activeIndex: '1',
      activeIndex2: '2',
      areaList:[],
      date: '',
      dateRange: '',
      company: '',
      queryParams: {
@@ -119,16 +97,21 @@
      dataList: [
        {
          name: '全部',
          complete: { '4.5': 95.5, '4.6': 95.3, '4.7': 96.0, '4.8': 97.2, '4.9': 96.5 ,
          complete: {
            '4.5': 95.5, '4.6': 95.3, '4.7': 96.0, '4.8': 97.2, '4.9': 96.5,
            '4.10': 95.5, '4.11': 95.3, '4.12': 96.0, '4.13': 97.2, '4.14': 96.5 ,
            '4.15': 95.5, '4.16': 95.3, '4.17': 96.0, '4.18': 97.2, '4.19': 96.5 ,
            '4.20': 95.5, '4.21': 95.3, '4.22': 96.0, '4.23': 97.2, '4.24': 96.5,
            '4.25': 95.5, '4.26': 95.3, '4.27': 96.0, '4.28': 97.2, '4.29': 96.5
          },
          waiting: { '4.5': 94.8, '4.6': 91.3, '4.7': 95.3, '4.8': 92.3, '4.9': 93.3,
            '4.10': 94.8, '4.11': 91.3, '4.12': 95.3, '4.13': 92.3, '4.14': 93.3 },
          pending: { '4.5': 91.6, '4.6': 92.6, '4.7': 93.7, '4.8': 94.0, '4.9': 95.9
            ,'4.10': 91.6, '4.11': 92.6, '4.12': 93.7, '4.13': 94.0, '4.14': 95.9 }
          waiting: {
            '4.5': 94.8, '4.6': 91.3, '4.7': 95.3, '4.8': 92.3, '4.9': 93.3,
            '4.10': 94.8, '4.11': 91.3, '4.12': 95.3, '4.13': 92.3, '4.14': 93.3
          },
          pending: {
            '4.5': 91.6, '4.6': 92.6, '4.7': 93.7, '4.8': 94.0, '4.9': 95.9
            , '4.10': 91.6, '4.11': 92.6, '4.12': 93.7, '4.13': 94.0, '4.14': 95.9
          }
        }
      ],
      tableData: [],
@@ -143,8 +126,17 @@
    if(this.$route.query.index){
      this.queryParams.deptId = this.$route.query.index
    }
    const date = new Date();
    const year = date.getFullYear();
    const month = (date.getMonth() + 1) >= 10 ? date.getMonth() + 1 : '0' + (date.getMonth() + 1);
    this.date = year + '-' + month;
    console.log(this.date);
    this.queryParams.date = this.date;
    this.getList(this.$route.query.index);
    this.areaSelect();
  },
  computed: {
    ...mapState('dict', ['dict'])
  },
  methods: {
    // 区域下拉数据
@@ -168,6 +160,8 @@
      listScore(this.queryParams).then(response => {
        this.tableData = response.data[deptId];
        this.loading = false;
        
        this.initChart(response.data[deptId]);
      });
    },
    handleSizeChange(val) {
@@ -183,33 +177,14 @@
    handleDelete(index, row) {
      console.log(index, row);
    },
    initChart() {
    initChart(data) {
      const dataList = this.groupByData(data);
      const option = {
        legend: {
          right: 'right',
          top: 'top',
          icon: 'rect',
          orient: "vertical",
          data: [
            {
              name: '车辆考核',
              itemStyle: {
                color: 'rgba(62, 144, 247, 1)'
              }
            },
            {
              name: '人脸考核',
              itemStyle: {
                color: 'rgba(85, 192, 191, 1)'
              }
            },
            {
              name: '视频考核',
              itemStyle: {
                color: 'rgba(255, 165, 0, 1)'
              }
            },
          ],
        },
        grid: {
          left: 0,
@@ -221,7 +196,7 @@
        tooltip: {},
        xAxis: {
          type: 'category',
          data: Object.keys(this.acitveData.complete),
          data: dataList.map((item) => item[0]),
        },
        yAxis: {
          min: 90,
@@ -229,7 +204,7 @@
        series: [
          {
            name: '车辆考核',
            data: Object.entries(this.acitveData.complete).map(([key, value]) => value),
            data: this.filterData(dataList,0),
            type: 'line',
            itemStyle: {
              color: 'rgba(62, 144, 247, 1)'
@@ -237,7 +212,7 @@
          },
          {
            name: '人脸考核',
            data: Object.entries(this.acitveData.waiting).map(([key, value]) => value),
            data: this.filterData(dataList,1),
            type: 'line',
            itemStyle: {
              color: 'rgba(85, 192, 191, 1)'
@@ -245,7 +220,7 @@
          },
          {
            name: '视频考核',
            data: Object.entries(this.acitveData.pending).map(([key, value]) => value),
            data: this.filterData(dataList,2),
            type: 'line',
            itemStyle: {
              color: 'rgba(255, 165, 0, 1)'
@@ -254,6 +229,30 @@
        ]
      };
      lineChart.setOption(option, true);
    },

    groupByData(data) {
      if(!data) return [];
      const tempGroup = {};
      data.forEach((item) => {
        const { createTime } = item;
        if (!tempGroup[createTime]) {
          tempGroup[createTime] = [];
        }
        tempGroup[createTime].push(item);
      })
      const tempArray = Object.entries(tempGroup).sort(([keyA], [keyB]) => new Date([keyA]) - new Date([keyB]));

      return tempArray;
    },
    filterData(data,tag) {
      if(!data) return [0];
      const scoreList = data.map((item) => {
        let temp = item[1].find((exam) => exam.examineCategory === tag);
        return temp.score;
      });
      console.log(scoreList);
      return scoreList;
    },

    // 监听变化
@@ -270,6 +269,12 @@
      if (lineChart) {
        lineChart.resize();
      }
    },

    dateChange() {
      this.queryParams.date = this.date;
      console.log(this.queryParams);
      this.getList(this.queryParams.deptId);
    }

  },
@@ -289,6 +294,7 @@
  handleSelect(key, keyPath) {
    console.log(key, keyPath);
  },

}
</script>

@@ -324,7 +330,6 @@
}

.chart-container {

  width: 100%;
  height: 100%;

@@ -338,5 +343,4 @@
  margin: 0 20px;
  width: 180px;
}

</style>

 src/views/system/result/index.vue

@@ -234,7 +234,7 @@
    },
    filterData(data, tag) {
      if (!data) return;
      if(Array.isArray(data) && !data.length) return;
      if(!Array.isArray(data)) return;
      const tempArray = [];
      data.forEach((item) => {
        if(item.data.length) {