From 505798927f75c84693cc51becf16aa525503fc92 Mon Sep 17 00:00:00 2001
From: riku <risaku@163.com>
Date: 星期四, 11 七月 2024 17:23:38 +0800
Subject: [PATCH] 2024.7.11

---
 src/views/inspection/problem/component/ProblemSummary.vue     |   36 +
 src/composables/fetchData.js                                  |   50 ++
 src/views/management/EvaluateSummary copy.vue                 |    0 
 src/assets/styles/index.scss                                  |    5 
 src/views/visualization/SubtaskVisual.vue                     |  150 +++++--
 src/views/visualization/SupervisionVisual.vue                 |   28 +
 src/components.d.ts                                           |    6 
 src/components/search/OptionTime.vue                          |    5 
 src/utils/ProCheckProxy.js                                    |  146 +++++++
 src/views/inspection/problem/component/ProblemChangeChart.vue |   56 ++
 src/views/management/evaluate/EvaluateSummary.vue             |   55 ++
 src/api/index.js                                              |    4 
 src/components/map/BaseMap.vue                                |    3 
 src/views/management/evaluate/component/RiskArea.vue          |  102 +++++
 src/views/inspection/problem/ProblemTrack.vue                 |   52 +-
 src/components/inspection/ProblemItem.vue                     |   68 +++
 src/utils/map/index.js                                        |    2 
 src/views/main/MonitorView.vue                                |   22 
 src/views/visualization/VisualizationView.vue                 |    6 
 src/views/management/ManagementView.vue                       |   16 
 src/utils/map/util.js                                         |   26 +
 src/views/management/evaluate/component/RiskCount.vue         |   84 ++++
 src/assets/styles/element/index.scss                          |   17 
 src/views/management/TaskStats.vue                            |    2 
 src/views/inspection/problem/component/ProblemType.vue        |  108 ++++
 src/stores/map.js                                             |    8 
 src/api/fysp/problemApi.js                                    |   42 ++
 src/views/inspection/WorkStream.vue                           |    9 
 src/utils/map/marks.js                                        |   14 
 src/views/inspection/InspectionView.vue                       |    3 
 src/views/inspection/problem/component/ProblemTable.vue       |   42 +
 src/views/management/StatisticView.vue                        |   10 
 src/views/monitor/DustMonitor.vue                             |    4 
 33 files changed, 1,038 insertions(+), 143 deletions(-)

diff --git a/src/api/fysp/problemApi.js b/src/api/fysp/problemApi.js
new file mode 100644
index 0000000..8e5c032
--- /dev/null
+++ b/src/api/fysp/problemApi.js
@@ -0,0 +1,42 @@
+import { $fysp } from '../index'
+
+const id = 'IF3DgsgKxSWvTM3M'
+const name = 'pcheck'
+
+export default {
+  /**
+   * 闂瀹℃牳
+   * @param {Number} action 0锛氶棶棰橀�氳繃锛�1锛氶棶棰樹笉閫氳繃锛�2锛氭暣鏀归�氳繃锛�3鏁存敼涓嶉�氳繃
+   */
+  checkProblem({ pId, action, remark = '', userId = id, userName = name }) {
+    const params = `?pId=${pId}&action=${action}&remark=${remark}&userId=${userId}&userName=${userName}`
+    return $fysp.post(`problemlist/check${params}`).then((res) => res.data)
+  },
+
+  fetchProblemType({ cityCode, districtCode, sceneTypeId }) {
+    const params = `?taskTypeId=1&cityCode=${cityCode}&districtCode=${districtCode}&sceneTypeId=${sceneTypeId}`
+    return $fysp.get(`problemtype/search${params}`).then((res) => res.data)
+  },
+
+  /**
+   * 鑾峰彇宸℃煡浠诲姟鐨勯棶棰樺拰鏁存敼
+   */
+  fetchProblems(subtaskId) {
+    return $fysp
+      .get('problemlist/subtask', {
+        params: {
+          stGuid: subtaskId,
+          // 鍖呭惈鏈鏍镐互鍙婂鏍镐笉閫氳繃鐨勯棶棰�
+          all: true
+        }
+      })
+      .then((res) => res.data)
+  },
+
+  /**
+   * 鑾峰彇鍚勯棶棰樼被鍨嬪彂鐢熺殑鏁伴噺缁熻
+   */
+  fetchProblemsStatistic(area) {
+    return $fysp.post('problemlist/getStatisticalResult', area).then((res) => res.data)
+  }
+}
diff --git a/src/api/index.js b/src/api/index.js
index 9eb3004..69a55fe 100644
--- a/src/api/index.js
+++ b/src/api/index.js
@@ -11,8 +11,8 @@
 let ip2_file = 'https://fyami.com.cn/'
 
 if (debug) {
-  // ip1 = 'http://192.168.0.138:8082/'
-  ip1 = 'http://localhost:8080/'
+  ip1 = 'http://192.168.0.138:8082/'
+  // ip1 = 'http://localhost:8080/'
   // ip1_file = 'http://47.100.191.150:9005/';
   // ip2 = 'http://192.168.0.138:8080/';
   // ip2_file = 'https://fyami.com.cn/';
diff --git a/src/assets/styles/element/index.scss b/src/assets/styles/element/index.scss
index f490cf0..e900c70 100644
--- a/src/assets/styles/element/index.scss
+++ b/src/assets/styles/element/index.scss
@@ -1,15 +1,12 @@
-// @forward 'element-plus/theme-chalk/src/common/var.scss' with (
-//   $colors: (
-//     'primary': (
-//       'base': green
-//     )
-//   )
-// );
-
 @forward 'element-plus/theme-chalk/src/dark/var.scss' with (
   $bg-color: (
     'page': #ffffffa9,
-    '': #122b54a9,
-    'overlay': #122b54a9
+    '': #14428be8,
+    'overlay': #102f63c9
+  ),
+  $colors: (
+    'primary': (
+      'base': #e6a23c
+    )
   )
 );
diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss
index 6d14fb6..f5537b3 100644
--- a/src/assets/styles/index.scss
+++ b/src/assets/styles/index.scss
@@ -14,3 +14,8 @@
   font-weight: normal;
   font-style: normal;
 }
+
+.border-r-small {
+  // padding: 0 8px;
+  // border: 1px white solid;
+}
diff --git a/src/components.d.ts b/src/components.d.ts
index e5f1b96..d60bda3 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -13,9 +13,13 @@
     ElCard: typeof import('element-plus/es')['ElCard']
     ElCascader: typeof import('element-plus/es')['ElCascader']
     ElCol: typeof import('element-plus/es')['ElCol']
+    ElCollapse: typeof import('element-plus/es')['ElCollapse']
+    ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem']
     ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
     ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
+    ElDivider: typeof import('element-plus/es')['ElDivider']
     ElIcon: typeof import('element-plus/es')['ElIcon']
+    ElImage: typeof import('element-plus/es')['ElImage']
     ElLink: typeof import('element-plus/es')['ElLink']
     ElOption: typeof import('element-plus/es')['ElOption']
     ElProgress: typeof import('element-plus/es')['ElProgress']
@@ -23,6 +27,7 @@
     ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
     ElSegmented: typeof import('element-plus/es')['ElSegmented']
     ElSelect: typeof import('element-plus/es')['ElSelect']
+    ElSpace: typeof import('element-plus/es')['ElSpace']
     ElStatistic: typeof import('element-plus/es')['ElStatistic']
     ElTable: typeof import('element-plus/es')['ElTable']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
@@ -33,6 +38,7 @@
     OptionLocation: typeof import('./components/search/OptionLocation.vue')['default']
     OptionSceneType: typeof import('./components/search/OptionSceneType.vue')['default']
     OptionTime: typeof import('./components/search/OptionTime.vue')['default']
+    ProblemItem: typeof import('./components/inspection/ProblemItem.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     SubtaskExamineItem: typeof import('./components/inspection/SubtaskExamineItem.vue')['default']
diff --git a/src/components/inspection/ProblemItem.vue b/src/components/inspection/ProblemItem.vue
new file mode 100644
index 0000000..34c195d
--- /dev/null
+++ b/src/components/inspection/ProblemItem.vue
@@ -0,0 +1,68 @@
+<template>
+  <div>
+    <el-text tag="b" type="warning" size="small">{{ index }}. </el-text>
+    <el-text type="warning" size="small">{{ title }}</el-text>
+  </div>
+  <!-- <div>
+    <el-text>{{ proStatus.name }}</el-text>
+  </div> -->
+  <template v-for="(pic, t) in pics" :key="t">
+    <template v-if="pic.path.length > 0">
+      <div>
+        <el-text size="small" type="info">{{ pic.title }}</el-text>
+      </div>
+      <el-space>
+        <el-image
+          v-for="(p, i) in pic.path"
+          class="image"
+          :key="i"
+          :src="p"
+          :preview-src-list="pic.path"
+          :initial-index="i"
+          fit="cover"
+          lazy
+        />
+      </el-space>
+    </template>
+  </template>
+</template>
+<script setup>
+import { computed } from 'vue'
+
+import ProCheckProxy from '@/utils/ProCheckProxy'
+
+const props = defineProps({
+  problem: {
+    type: Object,
+    default: () => {
+      return {}
+    }
+  },
+  index: {
+    type: Number,
+    default: 1
+  }
+})
+
+// 闂鍚嶇О
+const title = computed(() => {
+  return props.problem.problemname
+})
+
+// 闂鍥剧墖
+const pics = computed(() => {
+  return ProCheckProxy.proPics(props.problem)
+})
+
+// 闂鐘舵��
+const proStatus = computed(() => {
+  return ProCheckProxy.proStatusMap(props.problem.extension3)
+})
+</script>
+<style scoped>
+.image {
+  width: 60px;
+  height: 60px;
+  border-radius: 2px;
+}
+</style>
diff --git a/src/components/map/BaseMap.vue b/src/components/map/BaseMap.vue
index 51deb80..f867298 100644
--- a/src/components/map/BaseMap.vue
+++ b/src/components/map/BaseMap.vue
@@ -3,10 +3,9 @@
 </template>
 
 <script setup>
-import { onMounted } from 'vue'
+import { onMounted, inject } from 'vue'
 import { createMap } from '@/utils/map/index'
 // import { createMap } from '@/utils/map/baseMap'
-import { inject } from 'vue'
 
 const mapHeight = inject('mapHeight')
 
diff --git a/src/components/search/OptionTime.vue b/src/components/search/OptionTime.vue
index f9f7bc5..e3b9014 100644
--- a/src/components/search/OptionTime.vue
+++ b/src/components/search/OptionTime.vue
@@ -5,6 +5,7 @@
     @change="handleChange"
     :type="type"
     placeholder="閫夋嫨鏃堕棿"
+    :disabled-date="disabledDate"
     size="small"
     style="width: 100px"
   />
@@ -13,6 +14,7 @@
 
 <script>
 const MONTH = 'month'
+const DATE = 'date'
 
 export default {
   props: {
@@ -47,6 +49,9 @@
         default:
           return 'YYYY-MM'
       }
+    },
+    disabledDate(time) {
+      return time.getTime() > Date.now()
     }
   },
   mounted() {
diff --git a/src/composables/fetchData.js b/src/composables/fetchData.js
new file mode 100644
index 0000000..fb8cff0
--- /dev/null
+++ b/src/composables/fetchData.js
@@ -0,0 +1,50 @@
+// 鎺ュ彛鏁版嵁鐨勮幏鍙�
+import { ref, watch, computed } from 'vue';
+
+export function useFetchData(page_size) {
+  // 鍒嗛〉淇℃伅
+  const page = ref(1);
+  const pageNum = ref(1);
+  const pageSize = ref(page_size ? page_size : 20);
+  const total = ref(0);
+  watch(page, (nValue, oValue) => {
+    if (nValue != oValue) {
+      fetchData();
+    }
+  });
+  watch(pageSize, (nValue, oValue) => {
+    if (nValue != oValue) {
+      fetchData();
+    }
+  });
+
+  // 鍔犺浇鐘舵��, 0: 鍔犺浇瀹屾垚; 1: 鍔犺浇涓�; 2: 宸插叏閮ㄥ姞杞�; 3: 鍔犺浇澶辫触;
+  const loadStatus = ref(0);
+
+  const loading = computed(() => {
+    return loadStatus.value == 1;
+  });
+
+  // 鏁版嵁鑾峰彇
+  function fetchData(fetch) {
+    loadStatus.value = 1;
+    fetch(page.value, pageSize.value)
+      .then((pageInfo) => {
+        if (pageInfo) {
+          page.value = pageInfo.page ? pageInfo.page : 1;
+          pageNum.value = pageInfo.pageNum ? pageInfo.pageNum : 1;
+          total.value = pageInfo.total ? pageInfo.total : 0;
+        }
+
+        loadStatus.value = 0;
+      })
+      .catch(() => {
+        loadStatus.value = 3;
+      })
+      .finally(() => {
+        loadStatus.value = 2;
+      });
+  }
+
+  return { page, pageNum, pageSize, total, loadStatus, loading, fetchData };
+}
diff --git a/src/stores/map.js b/src/stores/map.js
new file mode 100644
index 0000000..b88a035
--- /dev/null
+++ b/src/stores/map.js
@@ -0,0 +1,8 @@
+import { ref } from 'vue'
+import { defineStore } from 'pinia'
+
+export const useMapStore = defineStore('map', () => {
+  const focusMarker = ref()
+
+  return { focusMarker }
+})
diff --git a/src/utils/ProCheckProxy.js b/src/utils/ProCheckProxy.js
new file mode 100644
index 0000000..6487082
--- /dev/null
+++ b/src/utils/ProCheckProxy.js
@@ -0,0 +1,146 @@
+import { $fysp } from '@/api/index'
+
+//闂鐘舵��
+const proStatus = {
+  unCheck: 'unCheck',
+  pass: 'pass',
+  fail: 'fail',
+  change_unCheck: 'change_unCheck',
+  change_fail: 'change_fail',
+  change_pass: 'change_pass'
+}
+
+export default {
+  //缁熻闂
+  calProStatus(proList) {
+    const status = {
+      //闂鏁伴噺
+      proNum: proList.length,
+      //鏁存敼鏁伴噺
+      changeNum: 0,
+      //寰呭鏍告暟閲�
+      uncheckNum: 0,
+      //宸插鏍搁�氳繃鏁伴噺
+      passNum: 0,
+      //鏈�氳繃鏁伴噺
+      unpassNum: 0,
+      //鏁存敼鐜�
+      changePer: '0%',
+      //閫氳繃鐜�
+      passPer: '0%',
+      //瀹℃牳鐜�
+      checkPer: '0%'
+    }
+
+    proList.forEach((p) => {
+      if (p.ischanged) status.changeNum++
+
+      if (p.extension3 == 'fail' || p.extension3 == 'change_fail') status.unpassNum++
+      else if (
+        p.extension3 == 'unCheck' ||
+        p.extension3 == 'change_unCheck' ||
+        (p.extension3 == 'pass' && p.ischanged)
+      )
+        status.uncheckNum++
+      else status.passNum++
+
+      status.changePer =
+        String(
+          (status.changeNum / status.proNum) * 100
+            ? ((status.changeNum / status.proNum) * 100).toFixed(1)
+            : 0
+        ) + '%'
+      status.passPer =
+        String(
+          (status.passNum / status.proNum) * 100
+            ? ((status.passNum / status.proNum) * 100).toFixed(1)
+            : 0
+        ) + '%'
+      status.checkPer =
+        String(
+          ((status.passNum + status.unpassNum) / status.proNum) * 100
+            ? (((status.passNum + status.unpassNum) / status.proNum) * 100).toFixed(1)
+            : 0
+        ) + '%'
+    })
+
+    return status
+  },
+
+  //缁熻闂锛岃繑鍥炴暟缁勫舰寮�
+  proStatusArray(proList) {
+    const status = this.calProStatus(proList)
+    return [
+      { name: '闂鏁�', value: status.proNum },
+      { name: '鏁存敼鏁�', value: status.changeNum },
+      { name: '寰呭鏍�', value: status.uncheckNum },
+      { name: '宸插鏍�', value: status.passNum },
+      { name: '鏈�氳繃', value: status.unpassNum },
+      { name: '鏁存敼鐜�', value: status.changePer },
+      { name: '閫氳繃鐜�', value: status.passPer },
+      { name: '瀹℃牳鐜�', value: status.checkPer }
+    ]
+  },
+
+  //闂鍥剧墖鍜屾暣鏀瑰浘鐗�
+  proPics(pro) {
+    const pics = [
+      {
+        title: '闂鍥剧墖',
+        path: []
+      },
+      {
+        title: '鏁存敼鍥剧墖',
+        path: []
+      }
+    ]
+    if (pro.mediafileList) {
+      pro.mediafileList.forEach((m) => {
+        pics[m.ischanged ? 1 : 0].path.push(`${$fysp.imgUrl}${m.extension1}${m.guid}.jpg`)
+      })
+    }
+
+    return pics
+  },
+
+  //闂瀹℃牳鐘舵�佽浆鎹腑鏂�
+  proStatusMap(p) {
+    switch (p) {
+      case proStatus.unCheck:
+        return { name: '闂鏈鏍�', type: 'warning', index: 0, checkable: true, deletable: true, changeable: false }
+      case proStatus.pass:
+        return { name: '闂閫氳繃', type: 'success', index: 1, checkable: false, deletable: true, changeable: false }
+      case proStatus.fail:
+        return { name: '闂涓嶉�氳繃', type: 'danger', index: 1, checkable: false, deletable: true, changeable: false }
+      case proStatus.change_unCheck:
+        return { name: '鏁存敼鏈鏍�', type: 'warning', index: 2, checkable: true, deletable: false, changeable: true }
+      case proStatus.change_fail:
+        return { name: '鏁存敼涓嶉�氳繃', type: 'danger', index: 3, checkable: false, deletable: false, changeable: true }
+      case proStatus.change_pass:
+        return { name: '鏁存敼閫氳繃', type: 'success', index: 3, checkable: false, deletable: false, changeable: true }
+      default:
+        return { name: '闂鏈鏍�', type: 'warning', index: 0, checkable: true, deletable: true }
+    }
+  },
+
+  /**
+   * 闂瀹℃牳鍚庣姸鎬佸彉鎹�
+   * @param {String} s 褰撳墠闂鐘舵��
+   * @param {Boolean} isPass 瀹℃牳閫氳繃鎴栭┏鍥�
+   * @returns 涓嬩竴涓棶棰樼姸鎬�
+   */
+  proNextStatus(s, isPass) {
+    let status, action
+    switch (s) {
+      case proStatus.unCheck:
+        status = isPass ? proStatus.pass : proStatus.fail
+        action = isPass ? 0 : 1
+        break
+      case proStatus.change_unCheck:
+        status = isPass ? proStatus.change_pass : proStatus.change_fail
+        action = isPass ? 2 : 3
+        break
+    }
+    return { status: status, action: action }
+  }
+}
diff --git a/src/utils/map/index.js b/src/utils/map/index.js
index 4341f17..26f5c3c 100644
--- a/src/utils/map/index.js
+++ b/src/utils/map/index.js
@@ -64,7 +64,7 @@
     showBuildingBlock: true,
     mapStyle: 'amap://styles/e1e78509de64ddcd2efb4cb34c6fae2a',
     features: ['bg', 'road'],
-    pitch: 45, // 鍦板浘淇话瑙掑害锛屾湁鏁堣寖鍥� 0 搴�- 83 搴�
+    pitch: 0, // 鍦板浘淇话瑙掑害锛屾湁鏁堣寖鍥� 0 搴�- 83 搴�
     viewMode: '3D', // 鍦板浘妯″紡
     resizeEnable: true,
     center: [121.603928, 31.252955],
diff --git a/src/utils/map/marks.js b/src/utils/map/marks.js
index 8882fea..774a700 100644
--- a/src/utils/map/marks.js
+++ b/src/utils/map/marks.js
@@ -127,5 +127,19 @@
     }
 
     return layer
+  },
+
+  drawMarker(title, lnglat, img) {
+    const marker = new AMap.Marker({
+      position: new AMap.LngLat(lnglat[0], lnglat[1]), // 缁忕含搴﹀璞★紝涔熷彲浠ユ槸缁忕含搴︽瀯鎴愮殑涓�缁存暟缁刐116.39, 39.9]
+      title: title,
+      // offset: new AMap.Pixel(-13, -12),
+      // anchor: 'center',
+      icon: new AMap.Icon({
+        image: img,
+        imageSize: [30, 30]
+      })
+    })
+    map.add(marker)
   }
 }
diff --git a/src/utils/map/util.js b/src/utils/map/util.js
new file mode 100644
index 0000000..9eaa6a7
--- /dev/null
+++ b/src/utils/map/util.js
@@ -0,0 +1,26 @@
+import { map, isDragging } from '@/utils/map/index'
+
+export default {
+  setCenter(lnglat) {
+    if (isDragging) {
+      return
+    }
+    var now = new Date()
+    if (this.lasttime == undefined || now.getTime() - this.lasttime.getTime() >= 1000) {
+      map.setCenter(lnglat)
+      this.lasttime = now
+    }
+  },
+  addViews(view) {
+    map.add(view)
+  },
+  removeViews(view) {
+    map.remove(view)
+  },
+  clearViews() {
+    map.clearMap()
+  },
+  setFitView() {
+    map.setFitView()
+  }
+}
diff --git a/src/views/inspection/InspectionView.vue b/src/views/inspection/InspectionView.vue
index bc8752d..2f2a962 100644
--- a/src/views/inspection/InspectionView.vue
+++ b/src/views/inspection/InspectionView.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="wrapper">
-    <div>鐜板満宸℃煡</div>
+    <div>涓氬姟鐘舵�佷腑鎺�</div>
     <WorkStream></WorkStream>
   </div>
 </template>
@@ -11,7 +11,6 @@
  */
 import TaskTrack from '@/views/inspection/TaskTrack.vue'
 import WorkStream from '@/views/inspection/WorkStream.vue'
-
 </script>
 
 <style scoped>
diff --git a/src/views/inspection/WorkStream.vue b/src/views/inspection/WorkStream.vue
index 0fbe9be..769878e 100644
--- a/src/views/inspection/WorkStream.vue
+++ b/src/views/inspection/WorkStream.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="border-r-small m-h-2 p-h-4">
-    <el-scrollbar ref="scrollbarRef" height="calc(var(--fy-body-height) / 3 * 1 - 30px)">
+    <el-scrollbar ref="scrollbarRef" :height="height">
       <div ref="scrollContentRef">
         <div v-for="item in streams" :key="item.index">
           <el-text type="primary">[{{ item.time }}]: </el-text>
@@ -15,9 +15,14 @@
   </div>
 </template>
 <script setup>
-import { reactive, ref, onMounted } from 'vue'
+import { reactive, ref, onMounted, inject } from 'vue'
 import dayjs from 'dayjs'
 
+import { unCalc } from '@/utils/css-util'
+
+const excludeMapHeight = inject('excludeMapHeight')
+const height = `calc(${unCalc(excludeMapHeight)} - 30px)`
+
 const streams = reactive([])
 const scrollContentRef = ref()
 const scrollbarRef = ref()
diff --git a/src/views/inspection/problem/ProblemTrack.vue b/src/views/inspection/problem/ProblemTrack.vue
index f92b5ca..23ea39f 100644
--- a/src/views/inspection/problem/ProblemTrack.vue
+++ b/src/views/inspection/problem/ProblemTrack.vue
@@ -2,15 +2,20 @@
   <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>
-    <div>
-      <ProblemChangeChart></ProblemChangeChart>
-    </div>
-    <div>
-      <ProblemType></ProblemType>
-    </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>
 
@@ -29,34 +34,39 @@
   components: { ProblemSummary, ProblemTable, ProblemChangeChart, ProblemType },
   data() {
     return {
-      subtaskList: []
+      subtaskList: [],
+      activeNames: ['1', '2'],
+      time: ''
     }
   },
-  watch: {},
+  watch: {
+    time(nV, oV) {
+      if (nV != oV) {
+        this.areaStore.setTimeOneDay(nV)
+        this.fetchSubtask()
+      }
+    }
+  },
   computed: {
     ...mapStores(useAreaStore)
-    // area() {
-    //   return {
-    //     provincecode: '31',
-    //     provincename: '涓婃捣甯�',
-    //     citycode: '3100',
-    //     cityname: '涓婃捣甯�',
-    //     districtcode: '310116',
-    //     districtname: '閲戝北鍖�',
-    //     starttime: '',
-    //     endtime: ''
-    //   }
-    // }
   },
   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()
+    // this.fetchSubtask()
   }
 }
 </script>
diff --git a/src/views/inspection/problem/component/ProblemChangeChart.vue b/src/views/inspection/problem/component/ProblemChangeChart.vue
index a033240..3e6314d 100644
--- a/src/views/inspection/problem/component/ProblemChangeChart.vue
+++ b/src/views/inspection/problem/component/ProblemChangeChart.vue
@@ -1,7 +1,20 @@
 <template>
   <el-row justify="space-between">
-    <div>鍒嗘湡瓒嬪娍</div>
-    <OptionTime v-model="time"></OptionTime>
+    <el-col :span="18">
+      <div>
+        鍦烘櫙鏁帮細{{ sceneNum }}锛岄棶棰樻�绘暟锛歿{ proNum }}锛屽崟鍦烘櫙闂鍧囧�硷細{{ proEachSceneNum }}锛�
+      </div>
+      <div>
+        鏁存敼鎬绘暟锛歿{ changeNum }}锛屾湁鏁堟暣鏀规暟锛歿{ changePassNum }}锛岄棶棰樻暣鏀圭巼锛歿{
+          changePer
+        }}锛屾湁鏁堟暣鏀圭巼锛歿{ changePassPer }}
+      </div>
+    </el-col>
+    <el-col :span="6">
+      <el-row justify="end">
+        <OptionTime v-model="time"></OptionTime>
+      </el-row>
+    </el-col>
   </el-row>
   <div ref="echart" class="line-chart"></div>
 </template>
@@ -9,12 +22,39 @@
 import * as echarts from 'echarts'
 
 export default {
+  data() {
+    return {
+      sceneNum: 51,
+      proNum: 161,
+      changeNum: 40,
+      changePassNum: 40
+    }
+  },
+  computed: {
+    proEachSceneNum() {
+      return Math.round((this.proNum / this.sceneNum) * 10) / 10
+    },
+    changePer() {
+      if (this.proNum > 0) {
+        return Math.round((this.changeNum / this.proNum) * 100) + '%'
+      } else {
+        return '/'
+      }
+    },
+    changePassPer() {
+      if (this.proNum > 0) {
+        return Math.round((this.changePassNum / this.proNum) * 100) + '%'
+      } else {
+        return '/'
+      }
+    }
+  },
   methods: {
     refresh() {
       const fontSize = 12
       const option = {
         legend: {
-          data: ['闂', '鏁存敼'],
+          data: ['闂鏁�', '鏁存敼鏁�'],
           textStyle: {
             fontSize: fontSize,
             color: 'white'
@@ -28,7 +68,7 @@
         },
         xAxis: {
           type: 'category',
-          data: ['1鍙�', '2鍙�', '3鍙�', '4鍙�', '5鍙�', '6鍙�'],
+          data: ['1鍙�', '2鍙�', '3鍙�', '4鍙�', '5鍙�', '6鍙�', '7鍙�', '8鍙�', '9鍙�'],
           axisLabel: {
             textStyle: {
               fontSize: fontSize
@@ -48,14 +88,14 @@
         },
         series: [
           {
-            name: '闂',
+            name: '闂鏁�',
             type: 'bar',
-            data: [67, 45, 90, 67, 45, 90]
+            data: [12, 8, 9, 7, 14, 19, 9, 7, 14]
           },
           {
-            name: '鏁存敼',
+            name: '鏁存敼鏁�',
             type: 'bar',
-            data: [67, 45, 90, 67, 40, 81]
+            data: [6, 2, 5, 3, 6, 3, 6, 2, 5]
           }
           //   {
           //     name: '鏁存敼鐜�',
diff --git a/src/views/inspection/problem/component/ProblemSummary.vue b/src/views/inspection/problem/component/ProblemSummary.vue
index 71c3684..5d75bc9 100644
--- a/src/views/inspection/problem/component/ProblemSummary.vue
+++ b/src/views/inspection/problem/component/ProblemSummary.vue
@@ -1,7 +1,9 @@
 <template>
-  <div>
-    闂鏁�: {{ summary.proNum }}锛屾暣鏀规暟: {{ summary.changeNum }}锛屾暣鏀圭巼: {{ summary.changePer }}
+  <div class="font-small">
+    浠婃棩缁熻锛氶棶棰樻暟: {{ summary.proNum }}锛屾暣鏀规暟: {{ summary.changeNum }}锛屾暣鏀圭巼:
+    {{ summary.changePer }}
   </div>
+  <div class="font-small">绐佸嚭闂锛氳矾闈㈢Н灏橈紝闂鏁帮細13锛屽崰姣旓細81%</div>
 </template>
 <script setup>
 import { computed, ref } from 'vue'
@@ -23,9 +25,37 @@
   })
 
   if (proNum > 0) {
-    changePer = Math.round((changeNum / proNum) * 100) / 100 + '%'
+    changePer = Math.round((changeNum / proNum) * 100) + '%'
   }
 
   return { proNum, changeNum, changePer }
 })
+
+const mainPro = computed(() => {
+  let res
+  let total = 0,
+    max = 0
+  props.data.forEach((d) => {
+    total += d.proNum
+  })
+  props.data.forEach((d) => {
+    if (total > 0) {
+      const per = d.proNum / total
+      if (per >= max) {
+        max = per
+        // res.push({
+        //   name: d.name,
+        //   count: d.count,
+        //   per: Math.round(per * 100) + '%'
+        // })
+        res = {
+          name: d.name,
+          count: d.count,
+          per: Math.round(per * 100) + '%'
+        }
+      }
+    }
+  })
+  return res
+})
 </script>
diff --git a/src/views/inspection/problem/component/ProblemTable.vue b/src/views/inspection/problem/component/ProblemTable.vue
index 50c65e2..7c8753c 100644
--- a/src/views/inspection/problem/component/ProblemTable.vue
+++ b/src/views/inspection/problem/component/ProblemTable.vue
@@ -6,6 +6,7 @@
     :row-class-name="tableRowClassName"
     :height="tableHeight"
     size="small"
+    @row-click="handleRowClick"
   >
     <el-table-column type="index" label="" width="30"> </el-table-column>
     <el-table-column prop="scene.name" :show-overflow-tooltip="true" label="鍚嶇О" width="150">
@@ -27,13 +28,22 @@
       </template>
     </el-table-column>
   </el-table>
-  <div class="btn-more font-small">
-    <el-link type="primary" @click="showMore = !showMore">鏌ョ湅鏇村</el-link>
+  <div v-if="showMoreBtn" class="btn-more font-small">
+    <el-link type="primary" @click="showMore = !showMore">
+      {{ showMore ? '鏀惰捣鏇村' : '鏌ョ湅鏇村' }}
+    </el-link>
   </div>
 </template>
 <script setup>
 import { computed, ref } from 'vue'
 import dayjs from 'dayjs'
+import { useMapStore } from '@/stores/map.js'
+
+import marks from '@/utils/map/marks.js'
+import mapUtil from '@/utils/map/util.js'
+import scene_1 from '@/assets/icon/scene_1.png'
+
+const mapStore = useMapStore()
 
 const props = defineProps({
   data: {
@@ -42,7 +52,12 @@
   loading: Boolean
 })
 
+const showCount = 3
+
 const showMore = ref(false)
+const showMoreBtn = computed(() => {
+  return props.data.length > showCount
+})
 
 const tableData = computed(() => {
   const l = props.data.map((value) => {
@@ -54,7 +69,13 @@
   })
 
   return l.sort((a, b) => {
-    return dayjs(b.updateTime) - dayjs(a.updateTime)
+    if (!a.updateTime) {
+      return 1
+    } else if (!b.updateTime) {
+      return -1
+    } else {
+      return dayjs(b.updateTime) - dayjs(a.updateTime)
+    }
   })
   // return l
 })
@@ -63,7 +84,7 @@
   if (showMore.value) {
     return tableData.value
   } else {
-    return tableData.value.slice(0, 3)
+    return tableData.value.slice(0, showCount)
   }
 })
 
@@ -76,9 +97,20 @@
   if (p == 0) {
     return '/'
   } else {
-    return Math.round((c / p) * 100) / 100 + '%'
+    return Math.round((c / p) * 100) + '%'
   }
 }
+
+function handleRowClick(row, col, event) {
+  const title = row.scene.name
+  const lnglat = [row.scene.longitude, row.scene.latitude]
+  const img = scene_1
+  mapUtil.clearViews()
+  marks.drawMarker(title, lnglat, img)
+  mapUtil.setFitView()
+
+  mapStore.focusMarker = row
+}
 </script>
 <style scoped>
 .btn-more {
diff --git a/src/views/inspection/problem/component/ProblemType.vue b/src/views/inspection/problem/component/ProblemType.vue
index fe6d2d9..6967ca7 100644
--- a/src/views/inspection/problem/component/ProblemType.vue
+++ b/src/views/inspection/problem/component/ProblemType.vue
@@ -1,16 +1,95 @@
 <template>
   <el-row justify="space-between">
-    <div>闂鍒嗗竷</div>
-    <OptionTime v-model="time"></OptionTime>
+    <el-col :span="18">
+      <div v-if="mainProType">
+        绐佸嚭闂锛歿{ mainProType.name }}锛岄棶棰樻暟锛歿{ mainProType.count }}锛屽崰姣攞{ mainProType.per }}
+        <!-- <span v-for="item in mainProType" :key="item.name">
+          {{ item.name }}锛岄棶棰樻暟锛歿{ item.count }}锛屽崰姣攞{ item.per }}
+        </span> -->
+      </div>
+    </el-col>
+    <el-col :span="6">
+      <el-row justify="end">
+        <OptionTime v-model="time"></OptionTime>
+      </el-row>
+    </el-col>
   </el-row>
   <div ref="echart" class="line-chart"></div>
 </template>
 <script>
 import * as echarts from 'echarts'
+import { unref } from 'vue'
+import dayjs from 'dayjs'
+
+import problemApi from '@/api/fysp/problemApi.js'
+import { useFetchData } from '@/composables/fetchData'
+import { useAreaStore } from '@/stores/area.js'
+import { mapStores } from 'pinia'
 
 export default {
+  setup() {
+    const { loading, fetchData } = useFetchData()
+    return { loading, fetchData }
+  },
+  data() {
+    return {
+      dataList: []
+    }
+  },
+  computed: {
+    ...mapStores(useAreaStore),
+    mainProType() {
+      let res
+      let total = 0,
+        max = 0
+      this.dataList.forEach((d) => {
+        total += d.count
+      })
+      this.dataList.forEach((d) => {
+        if (total > 0) {
+          const per = d.count / total
+          if (per >= max) {
+            max = per
+            // res.push({
+            //   name: d.name,
+            //   count: d.count,
+            //   per: Math.round(per * 100) + '%'
+            // })
+            res = {
+              name: d.name,
+              count: d.count,
+              per: Math.round(per * 100) + '%'
+            }
+          }
+        }
+      })
+      return res
+    }
+  },
   methods: {
-    refresh() {
+    fetchProblemsStatistic() {
+      const param = unref(this.areaStore.area)
+      param.starttime = dayjs(param.starttime).startOf('month').format('YYYY-MM-DD HH:mm:ss')
+      param.endtime = dayjs(param.endtime).endOf('month').format('YYYY-MM-DD HH:mm:ss')
+      this.fetchData((page, pageSize) => {
+        return problemApi.fetchProblemsStatistic(param).then((res) => {
+          this.dataList = res
+          const chartData = res
+            .map((item) => {
+              return {
+                value: item.count,
+                name: item.name
+              }
+            })
+            .sort(function (a, b) {
+              return a.value - b.value
+            })
+
+          this.refresh(chartData)
+        })
+      })
+    },
+    refresh(chartData) {
       const fontSize = 12
       const option = {
         legend: {
@@ -35,18 +114,19 @@
             type: 'pie',
             radius: '55%',
             center: ['50%', '50%'],
-            data: [
-              { value: 24, name: '鍑哄叆鍙ｏ紙閬撹矾锛夋壃灏�' },
-              { value: 20, name: '宸ョ▼杞﹁締' },
-              { value: 18, name: '閬撹矾鎵皹' },
-              { value: 26, name: '璺潰纭寲' },
-              { value: 30, name: '娓ｅ湡' }
-            ].sort(function (a, b) {
-              return a.value - b.value
-            }),
+            data: chartData,
+            // data: [
+            //   { value: 24, name: '鍑哄叆鍙ｏ紙閬撹矾锛夋壃灏�' },
+            //   { value: 20, name: '宸ョ▼杞﹁締' },
+            //   { value: 18, name: '閬撹矾鎵皹' },
+            //   { value: 26, name: '璺潰纭寲' },
+            //   { value: 30, name: '娓ｅ湡' }
+            // ].sort(function (a, b) {
+            //   return a.value - b.value
+            // }),
             roseType: 'radius',
             label: {
-              color: 'rgba(255, 255, 255, 0.3)'
+              color: 'rgba(255, 255, 255, 0.8)'
             },
             labelLine: {
               lineStyle: {
@@ -74,7 +154,7 @@
   },
   mounted() {
     this.echart = echarts.init(this.$refs.echart)
-    this.refresh()
+    this.fetchProblemsStatistic()
   }
 }
 </script>
diff --git a/src/views/main/MonitorView.vue b/src/views/main/MonitorView.vue
index 9ee3c3f..6591259 100644
--- a/src/views/main/MonitorView.vue
+++ b/src/views/main/MonitorView.vue
@@ -1,9 +1,9 @@
 <template>
   <el-row>
     <el-col :span="7" class="page-right">
-      <!-- <el-scrollbar height="var(--fy-body-height)"> -->
-      <ManagementView></ManagementView>
-      <!-- </el-scrollbar> -->
+      <el-scrollbar height="var(--fy-body-height)">
+        <ManagementView></ManagementView>
+      </el-scrollbar>
     </el-col>
     <el-col :span="10">
       <el-scrollbar class="page-left-top">
@@ -32,6 +32,15 @@
 const windowHeight = ref(window.innerHeight)
 const areaStore = useAreaStore()
 areaStore.setTimeOneDay()
+areaStore.setLocation({
+  pCode: '31',
+  pName: '涓婃捣甯�',
+  cCode: '3100',
+  cName: '涓婃捣甯�',
+  dCode: '310106',
+  dName: '闈欏畨鍖�'
+})
+areaStore.setSceneType('1')
 
 // const headerHeight = computed(()=>{
 //   return
@@ -40,16 +49,17 @@
 //   console.log(res.text())
 // })
 
-provide('mapHeight', 'calc(var(--fy-body-height) / 3 * 2)')
+provide('mapHeight', 'calc(var(--fy-body-height) / 4 * 3)')
+provide('excludeMapHeight', 'calc(var(--fy-body-height) / 4 * 1)')
 </script>
 
 <style scoped>
 .page-left-top {
-  height: calc(var(--fy-body-height) / 3 * 2);
+  height: calc(var(--fy-body-height) / 4 * 3);
   /* background-color: aquamarine; */
 }
 .page-left-bottom {
-  height: calc(var(--fy-body-height) / 3 * 1);
+  height: calc(var(--fy-body-height) / 4 * 1);
   /* background-color: bisque; */
 }
 
diff --git a/src/views/management/EvaluateSummary.vue b/src/views/management/EvaluateSummary copy.vue
similarity index 100%
rename from src/views/management/EvaluateSummary.vue
rename to src/views/management/EvaluateSummary copy.vue
diff --git a/src/views/management/ManagementView.vue b/src/views/management/ManagementView.vue
index 5a74e98..dda60d3 100644
--- a/src/views/management/ManagementView.vue
+++ b/src/views/management/ManagementView.vue
@@ -4,13 +4,13 @@
   <!-- <TaskStats ref="statusRef"></TaskStats> -->
   <EvaluateSummary :height="height"></EvaluateSummary>
   <!-- <TaskSummary ref="summaryRef"></TaskSummary> -->
-  <ReInspectionView ref="summaryRef"></ReInspectionView>
+  <!-- <ReInspectionView ref="summaryRef"></ReInspectionView> -->
 </template>
 
 <script>
 import TaskStats from '@/views/management/TaskStats.vue'
 import TaskSummary from '@/views/management/TaskSummary.vue'
-import EvaluateSummary from '@/views/management/EvaluateSummary.vue'
+import EvaluateSummary from '@/views/management/evaluate/EvaluateSummary.vue'
 import ReInspectionView from '@/views/inspection/ReInspectionView.vue'
 import ProblemTrack from '@/views/inspection/problem/ProblemTrack.vue'
 import { vResize } from '@/utils/resize-observer'
@@ -33,8 +33,8 @@
   methods: {
     calcHeight() {
       const h1 = this.$refs.statusRef.$el.offsetHeight
-      const h2 = this.$refs.summaryRef.$el.offsetHeight
-      const h = h1 + h2
+      // const h2 = this.$refs.summaryRef.$el.offsetHeight
+      const h = h1
       return `calc(var(--fy-body-height) - ${h}px)`
     }
   },
@@ -42,13 +42,13 @@
     vResize.mounted(this.$refs.statusRef.$el, ({ height }) => {
       this.statusHeight = height
     })
-    vResize.mounted(this.$refs.summaryRef.$el, ({ height }) => {
-      this.summaryHeight = height
-    })
+    // vResize.mounted(this.$refs.summaryRef.$el, ({ height }) => {
+    //   this.summaryHeight = height
+    // })
   },
   unmounted() {
     vResize.unmounted(this.$refs.statusRef.$el)
-    vResize.unmounted(this.$refs.summaryRef.$el)
+    // vResize.unmounted(this.$refs.summaryRef.$el)
   }
 }
 </script>
diff --git a/src/views/management/StatisticView.vue b/src/views/management/StatisticView.vue
index 79d9ba8..2899306 100644
--- a/src/views/management/StatisticView.vue
+++ b/src/views/management/StatisticView.vue
@@ -1,18 +1,22 @@
 <template>
   <!-- <el-row> 缁熻绠＄悊 </el-row> -->
-  <SelfInspection></SelfInspection>
-  <JointEnforcement></JointEnforcement>
+  <!-- <SelfInspection></SelfInspection> -->
+  <!-- <JointEnforcement></JointEnforcement> -->
+  <TaskStats></TaskStats>
   <TaskSummary></TaskSummary>
+  <DustMonitor></DustMonitor>
 </template>
 
 <script>
 import SelfInspection from '@/views/inspection/SelfInspection.vue'
 import JointEnforcement from '@/views/inspection/JointEnforcement.vue'
 import TaskSummary from '@/views/management/TaskSummary.vue'
+import TaskStats from '@/views/management/TaskStats.vue'
+import DustMonitor from '@/views/monitor/DustMonitor.vue'
 import { vResize } from '@/utils/resize-observer'
 
 export default {
-  components: { SelfInspection, JointEnforcement, TaskSummary },
+  components: { SelfInspection, JointEnforcement, TaskSummary, TaskStats, DustMonitor },
   data() {
     return {
       // height: '500px',
diff --git a/src/views/management/TaskStats.vue b/src/views/management/TaskStats.vue
index 107ab66..8cf5c36 100644
--- a/src/views/management/TaskStats.vue
+++ b/src/views/management/TaskStats.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="border-r-small">
-    <div class="font-large">宸℃煡閲�</div>
+    <div class="font-large">浠诲姟鐩戞帶</div>
     <el-row justify="space-evenly">
       <el-statistic title="浠婃棩瀹屾垚" :value="10"> </el-statistic>
       <el-statistic title="鏈懆瀹屾垚" :value="10"> </el-statistic>
diff --git a/src/views/management/evaluate/EvaluateSummary.vue b/src/views/management/evaluate/EvaluateSummary.vue
new file mode 100644
index 0000000..40fe487
--- /dev/null
+++ b/src/views/management/evaluate/EvaluateSummary.vue
@@ -0,0 +1,55 @@
+<template>
+  <div class="border-r-small">
+    <el-row justify="space-between">
+      <div ref="titleRef" class="font-large">缁煎悎椋庨櫓璇勪及</div>
+      <!-- <OptionTime v-model="time"></OptionTime> -->
+    </el-row>
+    <RiskCount></RiskCount>
+    <RiskArea></RiskArea>
+  </div>
+</template>
+
+<script>
+import { unCalc } from '@/utils/css-util'
+import RiskCount from './component/RiskCount.vue'
+import RiskArea from './component/RiskArea.vue'
+/**
+ * 瀵瑰畬鎴愮殑浠诲姟杩涜璇勪及椋庨櫓锛屾樉绀洪珮椋庨櫓鍦烘櫙锛屾樉绀哄鏍哥殑鍦烘櫙鐨勬儏鍐�
+ */
+export default {
+  components: { RiskCount, RiskArea },
+  props: {
+    height: {
+      type: String,
+      default: '200'
+    }
+  },
+  data() {
+    return {
+      tableData: [],
+      tableHeight: '200'
+    }
+  },
+  watch: {
+    height(nV, oV) {
+      if (nV != oV) {
+        this.tableHeight = this.calcTableHeight()
+      }
+    }
+  },
+  methods: {
+    calcTableHeight() {
+      const h1 = this.$refs.titleRef.offsetHeight
+      // const h2 = this.$refs.statisticRef.$el.offsetHeight
+      const h = h1
+      const r = `calc(${unCalc(this.height)} - ${h}px)`
+      return r
+    }
+  },
+  mounted() {
+    this.tableHeight = this.calcTableHeight()
+  }
+}
+</script>
+
+<style scoped></style>
diff --git a/src/views/management/evaluate/component/RiskArea.vue b/src/views/management/evaluate/component/RiskArea.vue
new file mode 100644
index 0000000..d98b103
--- /dev/null
+++ b/src/views/management/evaluate/component/RiskArea.vue
@@ -0,0 +1,102 @@
+<template>
+  <el-row justify="space-between">
+    <div class="font-small">鍖哄煙椋庨櫓鍒嗗竷</div>
+    <OptionTime v-model="time"></OptionTime>
+  </el-row>
+  <div ref="echart" class="line-chart"></div>
+</template>
+<script>
+import * as echarts from 'echarts'
+
+export default {
+  methods: {
+    refresh() {
+      const fontSize = 12
+      const option = {
+        color: ['#f56c6c', '#e6a23c', '#67c23a'],
+        legend: {
+          data: ['楂橀闄�', '涓闄�', '浣庨闄�'],
+          textStyle: {
+            fontSize: fontSize,
+            color: 'white'
+          }
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          data: [
+            '姹熷畞璺閬�',
+            '鐭抽棬浜岃矾琛楅亾',
+            '鍗椾含瑗胯矾琛楅亾',
+            '闈欏畨瀵鸿閬�',
+            '鏇瑰娓¤閬�',
+            '澶╃洰瑗胯矾琛楅亾',
+            '鍖楃珯琛楅亾',
+            '瀹濆北璺閬�',
+            '鍏卞拰鏂拌矾琛楅亾',
+            '澶у畞璺閬�',
+            '褰郸鏂版潙琛楅亾',
+            '涓存本璺閬�',
+            '鑺锋睙瑗胯矾琛楅亾',
+            '褰郸闀�'
+          ],
+          axisLabel: {
+            rotate: 45,
+            textStyle: {
+              fontSize: fontSize
+            },
+            color: '#ffffff',
+            textBorderColor: '#fff'
+          }
+        },
+        yAxis: {
+          type: 'value',
+          axisLabel: {
+            textStyle: {
+              fontSize: fontSize,
+              color: 'white'
+            }
+          }
+        },
+        series: [
+          {
+            name: '楂橀闄�',
+            type: 'bar',
+            stack: 'risk',
+            barWidth: 10,
+            data: [2, 0, 4, 3, 1, 0, 2, 0, 4, 3, 1, 0, 2, 1]
+          },
+          {
+            name: '涓闄�',
+            type: 'bar',
+            stack: 'risk',
+            data: [3, 1, 5, 4, 2, 1, 3, 1, 5, 4, 2, 1, 3, 1]
+          },
+          {
+            name: '浣庨闄�',
+            type: 'bar',
+            stack: 'risk',
+            data: [1, 1, 6, 2, 0, 0, 0, 0, 3, 1, 0, 2, 1, 0]
+          }
+        ]
+      }
+      this.echart.setOption(option)
+    }
+  },
+  mounted() {
+    this.echart = echarts.init(this.$refs.echart)
+    this.refresh()
+  }
+}
+</script>
+<style scoped>
+.line-chart {
+  /* width: 200px; */
+  height: 220px;
+}
+</style>
diff --git a/src/views/management/evaluate/component/RiskCount.vue b/src/views/management/evaluate/component/RiskCount.vue
new file mode 100644
index 0000000..dcf27cb
--- /dev/null
+++ b/src/views/management/evaluate/component/RiskCount.vue
@@ -0,0 +1,84 @@
+<template>
+  <el-row style="align-items: end; gap: 8px">
+    <div class="tag">
+      <div>
+        <span class="num-big">10</span>
+        <span class="num-small red">
+          24%
+          <el-icon>
+            <CaretTop />
+          </el-icon>
+        </span>
+      </div>
+      <div class="statistic-footer red">
+        <span>楂橀闄�</span>
+      </div>
+    </div>
+    <div class="tag">
+      <div>
+        <span style="font-size: 20px">12</span>
+        <span class="num-small yellow">
+          24%
+          <el-icon>
+            <CaretTop />
+          </el-icon>
+        </span>
+      </div>
+      <div class="statistic-footer yellow">
+        <span>涓闄�</span>
+      </div>
+    </div>
+    <div class="tag">
+      <div>
+        <span style="font-size: 20px">5</span>
+        <span class="num-small green">
+          48%
+          <el-icon>
+            <CaretTop />
+          </el-icon>
+        </span>
+      </div>
+      <div class="statistic-footer green">
+        <span>浣庨闄�</span>
+      </div>
+    </div>
+  </el-row>
+</template>
+<script></script>
+<style scoped>
+.tag {
+  display: flex;
+  flex-direction: column;
+}
+
+.num-big {
+  font-size: 36px;
+}
+
+.num-small {
+  font-size: 12px;
+}
+
+.statistic-footer {
+  /* background-color: #ffd100; */
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  font-size: 12px;
+  color: var(--el-text-color-regular);
+  /* margin-top: 16px; */
+}
+
+.green {
+  color: #67c23a;
+}
+
+.red {
+  color: #f56c6c;
+}
+
+.yellow {
+  color: #e6a23c;
+}
+</style>
diff --git a/src/views/monitor/DustMonitor.vue b/src/views/monitor/DustMonitor.vue
new file mode 100644
index 0000000..58e9a63
--- /dev/null
+++ b/src/views/monitor/DustMonitor.vue
@@ -0,0 +1,4 @@
+<template>
+  <div class="border-r-small">鍦ㄧ嚎鐩戞祴</div>
+</template>
+<script></script>
diff --git a/src/views/visualization/SubtaskVisual.vue b/src/views/visualization/SubtaskVisual.vue
index 591758d..b1957ba 100644
--- a/src/views/visualization/SubtaskVisual.vue
+++ b/src/views/visualization/SubtaskVisual.vue
@@ -1,8 +1,26 @@
 <template>
-  <el-scrollbar :height="mapHeight">
+  <el-scrollbar v-if="mapStore.focusMarker" :height="mapHeight">
     <el-card class="p-events-auto wrapper">
-      <div>{{ subtask.name }}</div>
-      <el-timeline style="max-width: 600px">
+      <div class="font-small">{{ scene.name }}</div>
+      <el-divider></el-divider>
+      <div class="font-small">鐘舵�侊細{{ subtask.status }}</div>
+      <div class="font-small">璁″垝锛歿{ $fm.formatYMD(subtask.planstarttime) }}</div>
+      <div v-if="subtask.status != '鏈墽琛�'" class="font-small">
+        <span>鎵ц锛歿{ $fm.formatH(subtask.executionstarttime) }}</span>
+        <span> - </span>
+        <span>{{ $fm.formatH(subtask.executionendtime) }}</span>
+      </div>
+      <div class="font-small">闂锛�</div>
+      <problem-item
+        v-for="(item, i) in problemList"
+        :key="item.guid"
+        :index="i + 1"
+        :problem="item"
+      ></problem-item>
+      <!-- <div v-for="item in problemList" :key="item.guid">
+        {{ item.problemname }}
+      </div> -->
+      <!-- <el-timeline style="max-width: 600px">
         <el-timeline-item
           v-for="(activity, index) in activities"
           :key="index"
@@ -14,13 +32,18 @@
         >
           {{ activity.content }}
         </el-timeline-item>
-      </el-timeline>
+      </el-timeline> -->
     </el-card>
   </el-scrollbar>
 </template>
 
 <script>
 import { inject } from 'vue'
+import { useMapStore } from '@/stores/map.js'
+import { mapStores } from 'pinia'
+
+import problemApi from '@/api/fysp/problemApi.js'
+
 /**
  * 鍏蜂綋宸℃煡浠诲姟鍙鍖�
  * 鍖呮嫭鍦板浘瀹氫綅淇℃伅灞曠ず銆佸贰鏌ヤ换鍔″叏娴佺▼骞抽摵灞曠ず
@@ -33,53 +56,80 @@
     return { height, mapHeight }
   },
   props: {
-    subtask: {
-      type: Object,
-      default: () => {
-        return {
-          guid: 'SMuheEkjswioSn7A',
-          name: '涓鐢熸�佹暟瀛楁腐椤圭洰宸℃煡涓鐢熸�佹暟瀛楁腐椤圭洰宸℃煡',
-          district: '閲戝北鍖�',
-          planTime: '2024-06-04',
-          startTime: '2024-06-04 13:31:26',
-          endTime: '2024-06-04 13:33:37',
-          userName: '鏈辨寮�',
-          status: '宸茬粨鏉�',
-          total: 4,
-          checked: 2
-        }
-      }
-    }
+    // subtask: {
+    //   type: Object,
+    //   default: () => {
+    //     return {
+    //       guid: 'SMuheEkjswioSn7A',
+    //       name: '涓鐢熸�佹暟瀛楁腐椤圭洰宸℃煡涓鐢熸�佹暟瀛楁腐椤圭洰宸℃煡',
+    //       district: '閲戝北鍖�',
+    //       planTime: '2024-06-04',
+    //       startTime: '2024-06-04 13:31:26',
+    //       endTime: '2024-06-04 13:33:37',
+    //       userName: '鏈辨寮�',
+    //       status: '宸茬粨鏉�',
+    //       total: 4,
+    //       checked: 2
+    //     }
+    //   }
+    // }
   },
   data() {
     return {
-      activities: [
-        {
-          content: '浠诲姟鍒涘缓',
-          timestamp: '2024-06-04 08:00',
-          running: false
-        },
-        {
-          content: '寮�濮嬪贰鏌�',
-          timestamp: '2024-06-04 09:00',
-          running: false
-        },
-        {
-          content: '缁撴潫宸℃煡',
-          timestamp: '2024-06-04 09:15',
-          running: false
-        },
-        {
-          content: '瀹屾垚闂瀹℃牳',
-          timestamp: '2024-06-04 10:15',
-          running: false
-        },
-        {
-          content: '闂鏁存敼涓�...',
-          timestamp: '2024-06-04 10:15',
-          running: true
-        }
-      ]
+      // activities: [
+      //   {
+      //     content: '浠诲姟鍒涘缓',
+      //     timestamp: '2024-06-04 08:00',
+      //     running: false
+      //   },
+      //   {
+      //     content: '寮�濮嬪贰鏌�',
+      //     timestamp: '2024-06-04 09:00',
+      //     running: false
+      //   },
+      //   {
+      //     content: '缁撴潫宸℃煡',
+      //     timestamp: '2024-06-04 09:15',
+      //     running: false
+      //   },
+      //   {
+      //     content: '瀹屾垚闂瀹℃牳',
+      //     timestamp: '2024-06-04 10:15',
+      //     running: false
+      //   },
+      //   {
+      //     content: '闂鏁存敼涓�...',
+      //     timestamp: '2024-06-04 10:15',
+      //     running: true
+      //   }
+      // ]
+      problemList: []
+    }
+  },
+  computed: {
+    ...mapStores(useMapStore),
+    subtask() {
+      return this.mapStore.focusMarker ? this.mapStore.focusMarker.subtask : {}
+    },
+    scene() {
+      return this.mapStore.focusMarker ? this.mapStore.focusMarker.scene : {}
+    },
+    inspection() {
+      return this.mapStore.focusMarker ? this.mapStore.focusMarker.inspection : {}
+    }
+  },
+  watch: {
+    subtask(nV, oV) {
+      if (nV != oV) {
+        this.fetchProblem(nV.stguid)
+      }
+    }
+  },
+  methods: {
+    fetchProblem(stguid) {
+      problemApi.fetchProblems(stguid).then((res) => {
+        this.problemList = res
+      })
     }
   }
 }
@@ -92,4 +142,8 @@
   right: 0;
   /* background-color: wheat; */
 }
+
+.el-card {
+  --el-card-padding: 8px;
+}
 </style>
diff --git a/src/views/visualization/SupervisionVisual.vue b/src/views/visualization/SupervisionVisual.vue
index c14bbdd..795a7da 100644
--- a/src/views/visualization/SupervisionVisual.vue
+++ b/src/views/visualization/SupervisionVisual.vue
@@ -1,8 +1,18 @@
 <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>
+      <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>
     </div>
   </el-row>
@@ -30,8 +40,18 @@
   props: {},
   data() {
     return {
-      locations: {},
-      sceneType: {},
+      locations: {
+        pCode: '31',
+        pName: '涓婃捣甯�',
+        cCode: '3100',
+        cName: '涓婃捣甯�',
+        dCode: '310106',
+        dName: '闈欏畨鍖�'
+      },
+      sceneType: {
+        label: '宸ュ湴',
+        value: '1'
+      },
       time: ''
     }
   },
diff --git a/src/views/visualization/VisualizationView.vue b/src/views/visualization/VisualizationView.vue
index fdf7440..8559d60 100644
--- a/src/views/visualization/VisualizationView.vue
+++ b/src/views/visualization/VisualizationView.vue
@@ -2,11 +2,11 @@
   <!-- <el-row class="wrapper"> 鍙鍖� </el-row> -->
   <BaseMap></BaseMap>
   <el-row class="overlay-container" :style="height">
-    <el-col :span="18">
+    <el-col :span="14">
       <SupervisionVisual></SupervisionVisual>
     </el-col>
-    <el-col :span="6">
-      <!-- <SubtaskVisual></SubtaskVisual> -->
+    <el-col :span="10">
+      <SubtaskVisual></SubtaskVisual>
     </el-col>
   </el-row>
 </template>

--
Gitblit v1.9.3