<template>
|
<div class="border-r-small">
|
<div class="font-large">问题整改跟踪</div>
|
<div>
|
<el-row justify="end">
|
<OptionTime v-model="time" type="date"></OptionTime>
|
</el-row>
|
<ProblemSummary :data="subtaskList"></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>
|
</div>
|
</template>
|
|
<script>
|
import { useAreaStore } from '@/stores/area.js'
|
import { mapStores } from 'pinia'
|
|
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'
|
|
export default {
|
components: { ProblemSummary, ProblemTable, ProblemChangeChart, ProblemType },
|
data() {
|
return {
|
subtaskList: [],
|
activeNames: ['1', '2'],
|
time: ''
|
}
|
},
|
watch: {
|
time(nV, oV) {
|
if (nV != oV) {
|
this.areaStore.setTimeOneDay(nV)
|
this.fetchSubtask()
|
}
|
}
|
},
|
computed: {
|
...mapStores(useAreaStore)
|
},
|
methods: {
|
fetchSubtask() {
|
taskApi.fetchSubtaskSummaryByArea(this.areaStore.area).then((res) => {
|
this.subtaskList = res.data
|
})
|
},
|
handleChange(val) {
|
if (val.indexOf('1') != -1) {
|
this.$refs.pChangeRef.refresh()
|
}
|
if (val.indexOf('2') != -1) {
|
this.$refs.pTypeRef.refresh()
|
}
|
}
|
},
|
mounted() {
|
// this.fetchSubtask()
|
}
|
}
|
</script>
|
|
<style scoped>
|
.text {
|
background-color: aliceblue;
|
}
|
</style>
|
