前后端文件名统一调整

龚焕茏

2024-04-30 605de7523806e4b60ea5b678968df1e9ddb2fcc9

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

@@ -1,185 +1,420 @@
<template>
  <div style="padding: 15px">
    <div style="display: flex;flex-direction: row;">
      <div class="now-item">
        <div class="box now">
          <div class="title">
            视频
          </div>
          <div>
            98
          </div>
        </div>
      </div>
      <div class="now-item">
        <div class="box now">
          <div class="title">
            人脸
          </div>
          <div>
            98
          </div>
        </div>
      </div>
      <div class="now-item">
        <div class="box now">
          <div class="title">
            监控
          </div>
          <div>
            98
          </div>
        </div>
      </div>
      <div style="justify-content: center;align-items: center;display: flex;width: 80px">
        <i class="el-icon-caret-left">本月</i>
      </div>
  <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-item index="0">省厅考核</el-menu-item>
        <el-menu-item index="1">区域考核</el-menu-item>
      </el-menu>
    </div>

    <div style="margin-top: 35px">
      <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
          label="月份"
          prop="month">
    <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 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>
          </div>
        </div>
      </el-card>
    </div>

    <div style="margin-top: 35px;margin-bottom: 35px">
      <el-table :data="tableData" style="width: 100%" v-loading="tableLoading">
        <el-table-column label="考核时间" prop="createTime" align="center">
        </el-table-column>
        <el-table-column
          label="人脸"
          prop="renlian">
        </el-table-column>
        <el-table-column
          label="视频"
          prop="shipin">
        </el-table-column>
        <el-table-column
          label="车辆"
          prop="cheliang">
        </el-table-column>
        <el-table-column
          align="right">
          <template slot="header" slot-scope="scope">
            <el-date-picker
              size="mini"
              style="width: 100%"
              v-model="searchForm.time"
              type="monthrange"
              range-separator="~"
              start-placeholder="开始月"
              end-placeholder="结束月">
            </el-date-picker>
          </template>
        <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">
          <template slot-scope="scope">
            {{ scope.row.examineTag == 0 ? '省厅考核' : '市局考核' }}
          </template>
        </el-table-column>
        <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>
        <el-table-column label="状态" prop="publish" align="center">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.platform_is_publish" :value="scope.row.publish" />
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <div style="display: flex;justify-content: center;">
            <el-button size="small" type="text" @click="handlePublish(scope.row)" v-if="scope.row.publish === 'UNPUBLISHED'" >确认发布</el-button>
            <el-button size="small" type="text" @click="handlePublish(scope.row)" v-if="scope.row.publish === 'PUBLISHED'">取消发布</el-button>
            <el-button
              size="mini"
              @click="handleDetail(scope.$index, scope.row)">详情</el-button>
              type="text"
              icon="el-icon-view"
              @click="handleDetail(scope.row.id)"
            >详细</el-button>
            </div>
          </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="5">
      </el-pagination>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParamsList.pageNum"
      :limit.sync="queryParamsList.pageSize"
      @pagination="getList"
    />

    </div>

  </div>
</template>

<script>
import { listScore, getScore, delScore, addScore, updateScore, publishScore, detailScore } from "@/api/platform/check-score";
import { areaSelect } from '@/api/system/dept';
import * as echarts from 'echarts';
let lineChart = null;
let observer = null;
export default {
  name: 'index',
  dicts: ['platform_examine_category','platform_is_publish'],
  data() {
    return {
      tableData: [
        {
          renlian: 94,
          shipin: 89.5,
          cheliang: 92,
          month: "2024年3月"
        },
        {
          renlian: 94,
          shipin: 89.5,
          cheliang: 92,
          month: "2024年2月"
        },
        {
          renlian: 94,
          shipin: 89.5,
          cheliang: 92,
          month: "2024年1月"
        },
        {
          renlian: 94,
          shipin: 89.5,
          cheliang: 92,
          month: "2023年12月"
        },
        ,
        {
          renlian: 94,
          shipin: 89.5,
          cheliang: 92,
          month: "2023年11月"
        },
      ],
      activeIndex: '0',
      areaList: [],
      province: {
        id: [],
        publish: null,
      },
      date: '',
      dateRange: '',
      // 总条数
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        deptId: null,
        examineTag: 0
      },
      queryParamsList: {
        pageNum: 1,
        pageSize: 10,
        deptId: null,
        examineTag:0
      },
      tableData: [],
      tableLoading: false,
      loading: false,
      searchForm: {
        time: null,
      }
    }
  },
  created() {
    //考核成绩详情跳转参数接收
    console.log(this.$route.query.index)
    if (this.$route.query.index) {
      this.queryParams.deptId = this.$route.query.index
      this.queryParamsList.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;
    this.queryParams.date = this.date;
    this.queryParams.examineTag =this.$route.query.examineTag;
    this.queryParamsList.examineTag =this.$route.query.examineTag;
    this.activeIndex = this.$route.query.examineTag;
    this.areaSelect();
    this.getList(this.$route.query.index);
  },
  computed: {

  },
  methods: {
    //发布
    handlePublish(row) {
      const getExamineCategoryText = category => {
        switch (category) {
          case 1: return '视频考核';
          case 2: return '车辆考核';
          case 3: return '人脸考核';
          default: return '未知';
        }
      };

      const year = row.createTime.substr(0, 4);
      const month = (parseInt(row.createTime.substr(5, 2), 10)).toString();
      const day = (parseInt(row.createTime.substr(8, 2), 10)).toString();
      const formattedCreateTime = year + '年' + month + '月' + day + '日';

      let text = row.publish === 'UNPUBLISHED' ? '发布' : '取消发布';
      this.province.id = [row.id]
      this.province.publish = text === "发布" ? "PUBLISHED" : "UNPUBLISHED";
      this.$modal.confirm('确认要' + text + "" + getExamineCategoryText(row.examineCategory) + "" + formattedCreateTime + '的考核成绩吗？')
        .then(() => {
          return publishScore(this.province);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess(text + "成功");
        })
        .catch(() => {
          // 错误处理逻辑
        });
    },
    // 区域下拉数据
    areaSelect() {
      areaSelect().then(res => {
        this.areaList = res.data;
      })
    },
    translateDeptId(deptId) {
      const department = this.areaList.find(dept => dept.id == deptId);
      return department ? department.value : '未知';
    },
    /** 导航切换 */
    handleSelect(key) {
      this.activeIndex = key;
      this.queryParams.examineTag = key;
      this.queryParamsList.examineTag = key;
      this.getChart(this.queryParams.deptId);
      this.getList(this.queryParamsList.deptId);
    },
    /** 查询考核模板列表 */
    getChart(deptId) {
      this.loading = true;
      lineChart.showLoading();
      listScore(this.queryParams).then(response => {
        this.initChart(response.data[deptId]);
        this.loading = false;
      });
    },
    /** 查询考核模板列表 */
    getList() {
      this.tableLoading = true;
      detailScore(this.queryParamsList).then(response => {
        this.tableData = response.rows;
        this.total = response.total;
        this.tableLoading = false;
      });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    handleDetail(index, row) {
      console.log(index, row);
      this.$router.push("/examine/detail/detail")
    handleDetail(id) {
      this.$router.push({
        path: '/examine/detail/detail',
        query: {
          id: id,
          examineTag: this.activeIndex,
          deptId: this.queryParamsList.deptId
        }
      })
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    initChart(data) {
      const dataList = this.groupByData(data);
      const option = {
        legend: {
          right: 'right',
          top: 'top',
          icon: 'rect',
          orient: "vertical",
        },
        grid: {
          left: 0,
          right: 0,
          bottom: 0,
          top: '20%',
          containLabel: true
        },
        tooltip: {},
        xAxis: {
          type: 'category',
          data: dataList.map((item) => item[0]),
        },
        yAxis: {
          min: 'dataMin'
        },
        series: [
          {
            name: '车辆考核',
            data: this.filterData(dataList, 2),
            type: 'line',
            itemStyle: {
              color: 'rgba(62, 144, 247, 1)'
            }
          },
          {
            name: '人脸考核',
            data: this.filterData(dataList, 3),
            type: 'line',
            itemStyle: {
              color: 'rgba(85, 192, 191, 1)'
            }
          },
          {
            name: '视频考核',
            data: this.filterData(dataList, 1),
            type: 'line',
            itemStyle: {
              color: 'rgba(255, 165, 0, 1)'
            }
          }
        ]
      };
      lineChart.setOption(option, true);
      lineChart.hideLoading();
    },

    groupByData(data) {
      if (!data) return this.getAllDay().map((item) => [item, []]);
      const tempGroup = {};
      data.forEach((item) => {
        let { createTime } = item;
        let tempTime = createTime.split('-');
        createTime = tempTime[1] + '-' + tempTime[2];
        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) {
      const scoreList = data.map((item) => {
        let temp = item[1].find((exam) => exam.examineCategory === tag);
        if (temp) {
          return temp.score;
        } else {
          return;
        }
      });
      return scoreList;
    },

    getAllDay() {
      // 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;
      const currentDate = this.date.split('-');
      const currentYear = currentDate[0];
      const currentMonth = currentDate[1];
      const daysInMonth = new Date(currentYear, currentMonth, 0).getDate();
      const datesOfMonth = [];
      for (var day = 1; day <= daysInMonth; day++) {
        const formattedDate = currentMonth + '-' + (day.toString().padStart(2, '0'));
        datesOfMonth.push(formattedDate);
      }
      return datesOfMonth;
    },

    // 监听变化
    observe() {
      if (!observer) {
        observer = new ResizeObserver(entries => {
          this.handleResize();
        })
      }
      observer.observe(this.$refs.chartContent);
    },
    // 窗口变换
    handleResize() {
      if (lineChart) {
        lineChart.resize();
      }
    },

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

  },
  mounted() {
    lineChart = echarts.init(this.$refs.chartContent);
    this.getChart(this.$route.query.index);
    this.observe();
  },
  beforeDestroy() {
    if (lineChart) {
      lineChart.dispose();
      observer.unobserve(this.$refs.chartContent);
    }
  },
  handleSelect(key, keyPath) {
    console.log(key, keyPath);
  },

}
</script>

<style scoped>
.now-item {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.now {
  /*background-color: #42b983;*/
  height: 80px !important;
}
.box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px hsla(0, 0%, 7%, .1);
  border-radius: 10px;
  width: 240px;
  height: 50px;
}
.box:hover{
  cursor: pointer;
<style lang="scss" scoped>
.data-chart-container {
  height: 400px;
  margin-bottom: 20px;

  .data-card {
    height: 100%;

    .card-content {
      width: 100%;
      height: 100%;
      position: relative;
    }
  }
}

.title {
  font-size: larger;
.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;
  }
}

.chart-container {
  width: 100%;
  height: 100%;

  #chartContent {
    width: 100%;
    height: 100%;
  }
}

.select-container {
  margin: 0 20px;
  width: 180px;
}
</style>