<template>
|
<!-- <div class="border-r-small"> -->
|
<BaseCard>
|
<el-row justify="space-between" align="middle">
|
<div class="font-large">问题整改跟踪</div>
|
<OptionTime v-model="time" type="date"></OptionTime>
|
</el-row>
|
<div>
|
<ProblemSummary :data="subtaskList" :proStatistic="proStatistic"></ProblemSummary>
|
<ProblemTable :data="subtaskList"></ProblemTable>
|
</div>
|
</BaseCard>
|
<BaseCard>
|
<el-row justify="space-between" align="middle">
|
<div class="font-large">分期趋势</div>
|
<OptionTime v-model="time"></OptionTime>
|
</el-row>
|
<div>
|
<ProblemChangeChart ref="pChangeRef"></ProblemChangeChart>
|
</div>
|
</BaseCard>
|
<BaseCard>
|
<el-row justify="space-between" align="middle">
|
<div class="font-large">问题分布</div>
|
</el-row>
|
<div>
|
<ProblemType ref="pTypeRef"></ProblemType>
|
</div>
|
</BaseCard>
|
<!-- <BaseCard>
|
<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 { useSubtaskStore } from '@/stores/subtask.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.fetchSubtask()
|
this.fetchDayProblemsStatistic()
|
}
|
}
|
},
|
computed: {
|
...mapStores(useAreaStore),
|
...mapStores(useSubtaskStore)
|
},
|
methods: {
|
fetchSubtask() {
|
// taskApi.fetchSubtaskSummaryByArea(this.area).then((res) => {
|
// this.subtaskList = res.data
|
// })
|
const tag = dayjs(this.time).format('YYYY-MM-DD')
|
this.subtaskStore.getSummaryList(tag, (v) => {
|
this.subtaskList = v ? v : []
|
})
|
},
|
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>
|
