2024.7.15

riku

2024-07-15 b292a0a81869547e94fd85e783f9597db241a87e

 src/views/inspection/problem/ProblemTrack.vue

@@ -1,22 +1,30 @@
<template>
  <div class="border-r-small">
  <!-- <div class="border-r-small"> -->
  <BaseCard>
    <div class="font-large">问题整改跟踪</div>
    <div>
      <ProblemSummary :data="subtaskList"></ProblemSummary>
      <el-row justify="end">
        <OptionTime v-model="time" type="date"></OptionTime>
      </el-row>
      <ProblemSummary :data="subtaskList" :proStatistic="proStatistic"></ProblemSummary>
      <ProblemTable :data="subtaskList"></ProblemTable>
    </div>
    <div>
      <ProblemChangeChart></ProblemChangeChart>
    </div>
    <div>
      <ProblemType></ProblemType>
    </div>
  </div>
    <el-collapse v-model="activeNames" @change="handleChange">
      <el-collapse-item title="分期趋势" name="1">
        <ProblemChangeChart ref="pChangeRef"></ProblemChangeChart>
      </el-collapse-item>
      <el-collapse-item title="问题分布" name="2">
        <ProblemType ref="pTypeRef"></ProblemType>
      </el-collapse-item>
    </el-collapse>
  </BaseCard>
  <!-- </div> -->
</template>

<script>
import { useAreaStore } from '@/stores/area.js'
import { mapStores } from 'pinia'
import dayjs from 'dayjs'

import ProblemTable from './component/ProblemTable.vue'
import ProblemSummary from './component/ProblemSummary.vue'
@@ -24,39 +32,65 @@
import ProblemType from './component/ProblemType.vue'

import taskApi from '@/api/fysp/taskApi.js'
import problemApi from '@/api/fysp/problemApi.js'

export default {
  components: { ProblemSummary, ProblemTable, ProblemChangeChart, ProblemType },
  data() {
    return {
      subtaskList: []
      // 单日任务详情
      subtaskList: [],
      // 单日问题统计
      proStatistic: [],
      // 折叠框激活名称集合
      activeNames: ['1', '2'],
      // 当前时间
      time: '',
      // 筛选区域条件
      area: {}
    }
  },
  watch: {},
  watch: {
    time(nV, oV) {
      if (nV != oV) {
        const d = nV ? dayjs(nV) : dayjs()
        this.area.starttime = d.startOf('day').format('YYYY-MM-DD HH:mm:ss')
        this.area.endtime = d.endOf('day').format('YYYY-MM-DD HH:mm:ss')
        // this.areaStore.setTimeOneDay(nV)
        this.fetchSubtask()
        this.fetchDayProblemsStatistic()
      }
    }
  },
  computed: {
    ...mapStores(useAreaStore)
    // area() {
    //   return {
    //     provincecode: '31',
    //     provincename: '上海市',
    //     citycode: '3100',
    //     cityname: '上海市',
    //     districtcode: '310116',
    //     districtname: '金山区',
    //     starttime: '',
    //     endtime: ''
    //   }
    // }
  },
  methods: {
    fetchSubtask() {
      taskApi.fetchSubtaskSummaryByArea(this.areaStore.area).then((res) => {
      taskApi.fetchSubtaskSummaryByArea(this.area).then((res) => {
        this.subtaskList = res.data
      })
    },
    fetchDayProblemsStatistic() {
      // this.fetchData((page, pageSize) => {
      //   return
      // })
      problemApi.fetchProblemsStatistic(this.area).then((res) => {
        this.proStatistic = res
      })
    },
    handleChange(val) {
      if (val.indexOf('1') != -1) {
        this.$refs.pChangeRef.refresh()
      }
      if (val.indexOf('2') != -1) {
        this.$refs.pTypeRef.refresh()
      }
    }
  },
  mounted() {
    this.fetchSubtask()
    // this.fetchSubtask()
    this.area = this.areaStore.area
  }
}
</script>