riku
2025-06-09 38ff09bd2a638bc43a365efe0390cc3510d62e68
src/views/visualization/SupervisionVisual.vue
@@ -1,15 +1,32 @@
<template>
  <el-row>
    <div class="p-events-auto">
      <OptionLocation :level="3" :width="170" v-model="locations"></OptionLocation>
      <OptionSceneType :type="2" :width="120" v-model="sceneType"></OptionSceneType>
  <el-row justify="center" class="wrapper">
    <div class="p-events-auto sv-content">
      <OptionLocation
        :level="3"
        :width="170"
        :initValue="false"
        v-model="locations"
      ></OptionLocation>
      <OptionSceneType
        :type="2"
        :width="120"
        :initValue="false"
        v-model="sceneType"
      ></OptionSceneType>
      <OptionTime v-model="time"></OptionTime>
      <el-button :loading="subtaskStore.subtaskLoading" size="small" @click="fetchTaskProgress"
        >查询</el-button
      >
    </div>
  </el-row>
</template>
<script>
import { inject } from 'vue'
import { inject, unref } from 'vue'
import { useAreaStore } from '@/stores/area.js'
import { useSubtaskStore } from '@/stores/subtask.js'
import { mapStores } from 'pinia'
import taskApi from '@/api/fysp/taskApi.js'
import marks from '@/utils/map/marks.js'
import scene_1 from '@/assets/icon/scene_1.png'
@@ -27,44 +44,62 @@
  props: {},
  data() {
    return {
      locations: {},
      sceneType: {},
      locations: {
        pCode: '31',
        pName: '上海市',
        cCode: '3100',
        cName: '上海市',
        dCode: '310106',
        dName: '静安区'
      },
      sceneType: {
        label: '工地',
        value: '1'
      },
      time: ''
    }
  },
  computed: {
    area() {
      return {
        provincecode: this.locations.pCode,
        provincename: this.locations.pName,
        citycode: this.locations.cCode,
        cityname: this.locations.cName,
        districtcode: this.locations.dCode,
        districtname: this.locations.dName,
        starttime: this.$fm.formatYMDH(this.time),
        scensetypeid: this.sceneType.value
      }
    }
    ...mapStores(useAreaStore),
    ...mapStores(useSubtaskStore)
    // area() {
    //   return {
    //     provincecode: this.locations.pCode,
    //     provincename: this.locations.pName,
    //     citycode: this.locations.cCode,
    //     cityname: this.locations.cName,
    //     districtcode: this.locations.dCode,
    //     districtname: this.locations.dName,
    //     starttime: this.$fm.formatYMDH(this.time),
    //     scensetypeid: this.sceneType.value
    //   }
    // }
  },
  methods: {
    // 查询
    fetchSubtaskSummaryArea() {
      return taskApi.fetchSubtaskSummaryArea(this.area).then((res) => {
        let list = []
        res.data.forEach((e) => {
          list = list.concat(e.subTaskSummary)
        })
        this.newLabelMasks(list)
      })
    },
    newLabelMasks(data) {
      marks.createLabelMarks(scene_1, data)
    fetchTaskProgress() {
      this.areaStore.setLocation(this.locations)
      this.areaStore.setTimeOneMonth(this.time)
      this.areaStore.setSceneType(this.sceneType)
      this.subtaskStore.fetchTopTaskProgress(this.areaStore.area)
    }
  },
  mounted() {
    this.fetchSubtaskSummaryArea()
    // this.fetchTaskProgress()
  }
}
</script>
<style scoped></style>
<style scoped>
.wrapper {
  pointer-events: none;
}
.sv-content {
  background-color: #14428be8;
  border: 2px solid rgb(255, 255, 255);
  border-radius: 8px;
  padding: 4px;
}
</style>