Riku
2025-06-09 2547159bbd781c8e1a41ecc939385396c85f9766
src/views/inspection/problem/ProblemTrack.vue
@@ -1,13 +1,37 @@
<template>
  <div class="border-r-small">
    <div class="font-large">问题整改跟踪</div>
  <!-- <div class="border-r-small"> -->
  <BaseCard title="整改跟踪">
    <el-row justify="space-evenly" align="middle">
      <!-- <div class="font-large">问题整改跟踪</div> -->
      <el-button size="small" type="primary" icon="CaretLeft" @click="previousDay"
        >前一天</el-button
      >
      <OptionTime v-model="time" type="date"></OptionTime>
      <el-button size="small" type="primary" icon="CaretRight" @click="nextDay">后一天</el-button>
    </el-row>
    <div>
      <el-row justify="end">
        <OptionTime v-model="time" type="date"></OptionTime>
      </el-row>
      <ProblemSummary :data="subtaskList"></ProblemSummary>
      <ProblemSummary :data="subtaskList" :proStatistic="proStatistic"></ProblemSummary>
      <ProblemTable :data="subtaskList"></ProblemTable>
    </div>
  </BaseCard>
  <BaseCard title="问题分布">
    <!-- <el-row justify="space-between" align="middle">
      <div class="font-large">问题分布</div>
    </el-row> -->
    <div>
      <ProblemType ref="pTypeRef"></ProblemType>
    </div>
  </BaseCard>
  <BaseCard title="分期趋势">
    <el-row justify="end" align="middle">
      <!-- <div class="font-large">分期趋势</div> -->
      <!-- <OptionTime v-model="time"></OptionTime> -->
    </el-row>
    <div>
      <ProblemChangeChart ref="pChangeRef"></ProblemChangeChart>
    </div>
  </BaseCard>
  <!-- <BaseCard>
    <el-collapse v-model="activeNames" @change="handleChange">
      <el-collapse-item title="分期趋势" name="1">
        <ProblemChangeChart ref="pChangeRef"></ProblemChangeChart>
@@ -16,12 +40,15 @@
        <ProblemType ref="pTypeRef"></ProblemType>
      </el-collapse-item>
    </el-collapse>
  </div>
  </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'
@@ -29,31 +56,61 @@
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: ''
      // 当前时间
      time: '',
      // 筛选区域条件
      area: {}
    }
  },
  watch: {
    time(nV, oV) {
      if (nV != oV) {
        this.areaStore.setTimeOneDay(nV)
        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(useAreaStore),
    ...mapStores(useSubtaskStore)
  },
  methods: {
    nextDay() {
      this.time = dayjs(this.time).add(1, 'day').toDate()
    },
    previousDay() {
      this.time = dayjs(this.time).add(-1, 'day').toDate()
    },
    fetchSubtask() {
      taskApi.fetchSubtaskSummaryByArea(this.areaStore.area).then((res) => {
        this.subtaskList = res.data
      // 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) {
@@ -67,6 +124,7 @@
  },
  mounted() {
    // this.fetchSubtask()
    this.area = this.areaStore.area
  }
}
</script>