From 986e15a067c2f11563f2f3db8b96dc334dc28842 Mon Sep 17 00:00:00 2001
From: guonan <guonan201020@163.com>
Date: 星期五, 23 五月 2025 09:53:31 +0800
Subject: [PATCH] 提交
---
src/components/menu/Location.vue | 82 +++++++++++++++++++++++++++++++++++-----
1 files changed, 71 insertions(+), 11 deletions(-)
diff --git a/src/components/menu/Location.vue b/src/components/menu/Location.vue
index 23a3bd3..a783d04 100644
--- a/src/components/menu/Location.vue
+++ b/src/components/menu/Location.vue
@@ -45,13 +45,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([
@@ -92,17 +104,43 @@
});
}
}
-
+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;
}
-
- districtList.value = simStore.DangerPoint.filter((item) =>
+ const filteredData = simStore.DangerPoint.filter((item) =>
item.position?.includes(areaName)
);
+
+ if (JSON.stringify(districtList.value) !== JSON.stringify(filteredData)) {
+ districtList.value = filteredData;
+ await initializeDevicePoints();
+ }
};
// 澶勭悊鍖哄煙鍙樺寲浜嬩欢
@@ -112,10 +150,26 @@
ElMessage.warning("璇烽�夋嫨涓�涓尯鍩�");
return;
}
-
filterDataByArea(areaName);
};
+let isInitialized = false;
+watch(
+ () => simStore.DangerShowSwitch,
+ async (newValue, oldValue) => {
+ console.log("褰撳墠鐘舵�侊細", newValue);
+
+ if (newValue) {
+ if (!isInitialized) {
+ await initializeDevicePoints();
+ isInitialized = true;
+ }
+ } else {
+ handleCleanup();
+ isInitialized = false;
+ }
+ }
+);
// 鐩戝惉 simStore.DangerPoint 鍙樺寲
watch(
() => simStore.DangerPoint,
@@ -124,14 +178,15 @@
filterDataByArea(selectValue.value);
loading.value = false; // 鏁版嵁鍔犺浇瀹屾垚
} else {
+ handleCleanup();
districtList.value = [];
loading.value = true; // 鏁版嵁鏈噯澶囧氨缁�
}
- },
- { immediate: true }
+ }
);
onMounted(() => {
+ handleCleanup();
initeWaterPrimitiveView();
// 榛樿鍏堟鏌ヤ竴閬嶆暟鎹�
if (simStore.DangerPoint && simStore.DangerPoint.length > 0) {
@@ -150,7 +205,8 @@
left: 0px;
right: 0px;
bottom: 10px;
- background-color: rgba(43, 43, 43, 0.5);
+ background-color: rgba(236, 233, 233, 0.5);
+ /* 鍗婇�忔槑閬僵 */
display: flex;
align-items: center;
justify-content: center;
@@ -171,6 +227,7 @@
transform: rotate(360deg);
}
}
+
.district {
position: absolute;
width: 345px;
@@ -185,10 +242,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;
@@ -215,6 +274,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