From f5688d9765782bbb97b3abb8ee99fe7b9834a149 Mon Sep 17 00:00:00 2001
From: wangjuncheng <1>
Date: 星期一, 19 五月 2025 14:39:46 +0800
Subject: [PATCH] change

---
 src/components/menu/Location.vue |   84 ++++++++++++++++++++++++++++--------------
 1 files changed, 56 insertions(+), 28 deletions(-)

diff --git a/src/components/menu/Location.vue b/src/components/menu/Location.vue
index c239e71..7749e80 100644
--- a/src/components/menu/Location.vue
+++ b/src/components/menu/Location.vue
@@ -7,19 +7,8 @@
     <div class="left-content district-content">
       <div style="margin-left: 5px">
         <span style="color: white">閲嶇偣娌燂細</span>
-        <el-select
-          @change="handleChange"
-          v-model="selectValue"
-          placeholder="Select"
-          size="large"
-          style="width: 240px"
-        >
-          <el-option
-            v-for="item in options"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
-          />
+        <el-select @change="handleChange" v-model="selectValue" placeholder="Select" size="large" style="width: 240px">
+          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
         </el-select>
       </div>
 
@@ -29,13 +18,7 @@
         <div v-if="loading" class="loading-overlay">
           <div class="spinner"></div>
         </div>
-        <div
-          v-else
-          v-for="(item, key) in districtList"
-          :key="key"
-          class="district-item"
-          @click="handleClick(item)"
-        >
+        <div v-else v-for="(item, key) in districtList" :key="key" class="district-item" @click="handleClick(item)">
           <div class="district-item-icon"></div>
           <div class="district-item-text">{{ item.hdName }}</div>
         </div>
@@ -45,12 +28,25 @@
 </template>
 
 <script setup>
-import { ref, onMounted, watch } from "vue";
-import { createPoint } from "@/utils/map";
+import { ref, onMounted, watch, onBeforeUnmount } from "vue";
+import { createPoint, removeEntities } from "@/utils/map";
 import { useSimStore } from "@/store/simulation";
-
+import { initeWaterPrimitiveView } from "@/utils/water"; //鐩告満flyTo鍑芥暟锛屽悗缁璷ptions鍒楄〃涓湁瀵瑰簲缁忕含搴﹀悗寮冪敤
+import { useRoute, onBeforeRouteUpdate } from 'vue-router';
 const simStore = useSimStore();
+onBeforeRouteUpdate((to, from, next) => {
+  if (to.path !== '/yhgl') {
+    handleCleanup();
+  }
+  next();
+});
+const route = useRoute();
 
+onBeforeUnmount(() => {
+  if (route.path !== '/yhgl') {
+    handleCleanup();
+  }
+});
 const selectValue = ref("瀛欒儭娌�");
 
 const options = ref([
@@ -91,9 +87,27 @@
     });
   }
 }
-
+const handleCleanup = async () => {
+  await Promise.all(districtList.value.map(item => removeEntities(item.hdId)));
+}
+const initializeDevicePoints = async () => {
+  await Promise.all(districtList.value.map(async (item, index) => {
+    // 鏍规嵁闇�姹傚彲澧炲垹
+    item.id = item.hdId;
+    item.name = item.hdName;
+    item.latitude = item.lat;
+    item.longitude = item.lon;
+    item.showBillboard = true;
+    item.type = item.disasterType;
+    item.className = "district";
+    await createPoint(item);
+    // 鎵撳嵃姣忎釜璁惧鐨勫悕绉板拰璁惧绫诲瀷
+    // console.log(`璁惧鍚嶇О: ${item.id}, 璁惧绫诲瀷: ${item.name}`);
+  }));
+};
 // 鏍规嵁鍖哄煙鍚嶇О杩囨护鏁版嵁
-const filterDataByArea = (areaName) => {
+const filterDataByArea = async (areaName) => {
+  handleCleanup();
   if (!areaName || !simStore.DangerPoint || simStore.DangerPoint.length === 0) {
     districtList.value = [];
     return;
@@ -102,6 +116,7 @@
   districtList.value = simStore.DangerPoint.filter((item) =>
     item.position?.includes(areaName)
   );
+  await initializeDevicePoints();
 };
 
 // 澶勭悊鍖哄煙鍙樺寲浜嬩欢
@@ -111,10 +126,15 @@
     ElMessage.warning("璇烽�夋嫨涓�涓尯鍩�");
     return;
   }
-
   filterDataByArea(areaName);
 };
-
+watch(() => simStore.DangerShowSwitch, (newValue, oldValue) => {
+  if (newValue) {
+    initializeDevicePoints();
+  } else {
+    handleCleanup()
+  }
+});
 // 鐩戝惉 simStore.DangerPoint 鍙樺寲
 watch(
   () => simStore.DangerPoint,
@@ -123,6 +143,7 @@
       filterDataByArea(selectValue.value);
       loading.value = false; // 鏁版嵁鍔犺浇瀹屾垚
     } else {
+      handleCleanup();
       districtList.value = [];
       loading.value = true; // 鏁版嵁鏈噯澶囧氨缁�
     }
@@ -131,6 +152,8 @@
 );
 
 onMounted(() => {
+  handleCleanup()
+  initeWaterPrimitiveView()
   // 榛樿鍏堟鏌ヤ竴閬嶆暟鎹�
   if (simStore.DangerPoint && simStore.DangerPoint.length > 0) {
     filterDataByArea("瀛欒儭娌�");
@@ -148,7 +171,8 @@
   left: 0px;
   right: 0px;
   bottom: 10px;
-  background-color: rgba(236, 233, 233, 0.5); /* 鍗婇�忔槑閬僵 */
+  background-color: rgba(236, 233, 233, 0.5);
+  /* 鍗婇�忔槑閬僵 */
   display: flex;
   align-items: center;
   justify-content: center;
@@ -169,6 +193,7 @@
     transform: rotate(360deg);
   }
 }
+
 .district {
   position: absolute;
   width: 345px;
@@ -183,10 +208,12 @@
   cursor: pointer;
   margin-top: 10px;
 }
+
 .district-content {
   padding: 10px;
   box-sizing: border-box;
 }
+
 .district-item-icon {
   background: url("@/assets/img/menu/locationicon.png") no-repeat;
   background-position: 5px 5px;
@@ -213,6 +240,7 @@
 /deep/ .el-select__placeholder {
   color: white;
 }
+
 /deep/ .el-select-dropdown__item.hover,
 .el-select-dropdown__item:hover {
   color: white !important;

--
Gitblit v1.9.3