2025.6.23

Riku

2025-06-23 ff82e86becbd200adabd2ce56fba1f6b3c6c37e1

 src/views/main/MonitorView.vue

@@ -1,41 +1,61 @@
<template>
  <el-row>
  <BaseMap></BaseMap>
  <el-row class="overlay-container" v-if="true">
    <el-col :span="7" class="page-right">
      <el-scrollbar height="var(--fy-body-height)">
      <el-scrollbar height="var(--fy-body-height)" class="p-events-auto" style="width: 450px">
        <TaskStats></TaskStats>
        <TaskSummary></TaskSummary>
      </el-scrollbar>
    </el-col>
    <el-col :span="10">
      <el-row justify="end">
        <SubtaskVisual class="subtask-visual"></SubtaskVisual>
      </el-row>
      <!-- <el-scrollbar class="page-left-top"> -->
      <!-- <VisualizationView></VisualizationView> -->
      <!-- </el-scrollbar> -->
      <!-- <el-scrollbar class="page-left-bottom p-events-auto">
        <InspectionView></InspectionView>
      </el-scrollbar> -->
    </el-col>
    <el-col :span="7" class="page-right">
      <el-scrollbar height="var(--fy-body-height)" class="p-events-auto">
        <ManagementView></ManagementView>
      </el-scrollbar>
    </el-col>
    <el-col :span="17">
      <el-scrollbar class="page-left-top">
        <VisualizationView></VisualizationView>
      </el-scrollbar>
      <el-scrollbar class="page-left-bottom">
        <InspectionView></InspectionView>
      </el-scrollbar>
    </el-col>
    <!-- <el-col :span="7" class="page-right">
      <el-scrollbar height="var(--fy-body-height)">
        <StatisticView></StatisticView>
      </el-scrollbar>
    </el-col> -->
  </el-row>
  <SupervisionVisual class="supervision-view"></SupervisionVisual>

  <WorkStream class="work-stream"></WorkStream>
  <!-- <ProblemTrack class="problem-track"></ProblemTrack> -->
</template>

<script setup>
import { provide, ref, unref } from 'vue'
import InspectionView from '@/views/inspection/InspectionView.vue'
import ManagementView from '@/views/management/ManagementView.vue'
import StatisticView from '@/views/management/StatisticView.vue'
import VisualizationView from '@/views/visualization/VisualizationView.vue'

import { useAreaStore } from '@/stores/area.js'
import { useSubtaskStore } from '@/stores/subtask.js'
import { useMapStore } from '@/stores/map.js'

import taskApi from '@/api/fysp/taskApi.js'
import marks from '@/utils/map/marks.js'
import mapUtil from '@/utils/map/util.js'
import scene_1 from '@/assets/icon/scene_1.png'

provide('mapHeight', 'calc(var(--fy-body-height) / 4 * 3)')
import InspectionView from '@/views/inspection/InspectionView.vue'
import ManagementView from '@/views/management/ManagementView.vue'
import StatisticView from '@/views/management/StatisticView.vue'
import VisualizationView from '@/views/visualization/VisualizationView.vue'

import ProblemTrack from '@/views/inspection/problem/ProblemTrack.vue'
import SupervisionVisual from '@/views/visualization/SupervisionVisual.vue'
import WorkStream from '@/views/inspection/WorkStream.vue'
import TaskStats from '@/views/management/TaskStats.vue'
import TaskSummary from '@/views/management/TaskSummary.vue'
import SubtaskVisual from '@/views/visualization/SubtaskVisual.vue'

// provide('mapHeight', 'calc(var(--fy-body-height) / 4 * 3)')
provide('mapHeight', 'calc(var(--fy-body-height))')
provide('excludeMapHeight', 'calc(var(--fy-body-height) / 4 * 1)')
const windowHeight = ref(window.innerHeight)

@@ -50,23 +70,26 @@
  pName: '上海市',
  cCode: '3100',
  cName: '上海市',
  dCode: '310106',
  dName: '静安区'
  dCode: '310104',
  dName: '徐汇区'
})
areaStore.setSceneType('1')
areaStore.setSceneType({ label: '全部场景', value: null })

// 获取本月的所有巡查统计信息
subtaskStore.subtaskLoading = true
taskApi.fetchSubtaskSummaryByArea(areaStore.area).then((res) => {
  // 存储为全局数据
  subtaskStore.setSummary(res.data)
  subtaskStore.subtaskLoading = false
  // 绘制地图标记
  marks.createLabelMarks(scene_1, unref(res.data), (v) => {
    mapStore.focusMarker = v
  })
  mapUtil.setFitView()
})
subtaskStore.fetchTopTaskProgress(areaStore.area)
// subtaskStore.subtaskLoading = true
// taskApi.fetchTopTaskProgress(areaStore.area).then((res) => {
//   if (res.data.length == 0) return
//   const data = res.data[0]
//   // 存储为全局数据
//   subtaskStore.setSummary(data)
//   subtaskStore.subtaskLoading = false
//   // 绘制地图标记
//   marks.createLabelMarks(scene_1, unref(data.subTaskSummary), (v) => {
//     mapStore.focusMarker = v
//   })
//   mapUtil.setFitView()
// })
</script>

<style scoped>
@@ -82,4 +105,42 @@
.page-right {
  /* background-color: aliceblue; */
}

.overlay-container {
  /* background: aliceblue; */
  position: absolute;
  width: 100%;
  /* height: 100vh; */
  top: 0;
  left: 0;
  /* padding: 4px; */
  pointer-events: none;
}

.work-stream {
  position: absolute;
  bottom: 0;
  left: 0;
}

.task-stats {
  position: absolute;
  top: 0;
  left: 0;
}

.supervision-view {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
.problem-track {
}

.subtask-visual {
  margin-top: 50px;
  /* min-width: 450px;
  max-width: 600px; */
}
</style>