riku
2024-07-15 b292a0a81869547e94fd85e783f9597db241a87e
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<template>
  <!-- <div class="border-r-small"> -->
  <BaseCard>
    <div class="font-large">问题整改跟踪</div>
    <div>
      <el-row justify="end">
        <OptionTime v-model="time" type="date"></OptionTime>
      </el-row>
      <ProblemSummary :data="subtaskList" :proStatistic="proStatistic"></ProblemSummary>
      <ProblemTable :data="subtaskList"></ProblemTable>
    </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'
import ProblemChangeChart from './component/ProblemChangeChart.vue'
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: [],
      // 单日问题统计
      proStatistic: [],
      // 折叠框激活名称集合
      activeNames: ['1', '2'],
      // 当前时间
      time: '',
      // 筛选区域条件
      area: {}
    }
  },
  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)
  },
  methods: {
    fetchSubtask() {
      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.area = this.areaStore.area
  }
}
</script>
 
<style scoped>
.text {
  background-color: aliceblue;
}
</style>