From a0967df707a547428df9fc80256877c26e061c4a Mon Sep 17 00:00:00 2001
From: guonan <guonan201020@163.com>
Date: 星期二, 20 五月 2025 15:41:54 +0800
Subject: [PATCH] 还原目录树功能
---
src/components/tools/LayerTree.vue | 74 ++++--------
src/components/menu/Device.vue | 97 +++++----------
src/components/menu/Location.vue | 141 ++++++++--------------
3 files changed, 110 insertions(+), 202 deletions(-)
diff --git a/src/components/menu/Device.vue b/src/components/menu/Device.vue
index bd23511..1ea39aa 100644
--- a/src/components/menu/Device.vue
+++ b/src/components/menu/Device.vue
@@ -6,12 +6,28 @@
<div class="left-content device-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>
- <el-tree :data="deviceTree" node-key="deviceId" :props="treeProps" @node-click="handleTreeNodeClick"
- class="device-tree">
+ <el-tree
+ :data="deviceTree"
+ node-key="deviceId"
+ :props="treeProps"
+ @node-click="handleTreeNodeClick"
+ class="device-tree"
+ >
<template #default="{ node, data }">
<span v-if="!data.children" class="device-tree-item">
<!-- <div class="device-item-icon"></div> -->
@@ -27,77 +43,30 @@
</template>
<script setup>
-import { ref, computed, onMounted, watch, onBeforeUnmount, } from "vue";
-import { useRoute, onBeforeRouteUpdate } from 'vue-router';
-import { createPoint, removeEntities } from "@/utils/map";
+import { ref, computed, onMounted } from "vue";
import { deviceDictList, getDictName } from "@/constant/dict.js";
import { getDeviceInfo } from "@/api/hpApi";
-import { initeWaterPrimitiveView } from "@/utils/water"; //鐩告満flyTo鍑芥暟锛屽悗缁璷ptions鍒楄〃涓湁瀵瑰簲缁忕含搴﹀悗寮冪敤
-import { useSimStore } from "@/store/simulation";
-const simStore = useSimStore();
+
+// 瀹氫箟涓�涓搷搴斿紡寮曠敤瀛樺偍璁惧鍒楄〃
+const deviceListAll = ref([]);
+
+// 缁勪欢鎸傝浇鏃惰幏鍙栬澶囦俊鎭紝榛樿杩囨护鈥滃瓩鑳℃矡鈥�
onMounted(() => {
loadDeviceList("瀛欒儭娌�");
- initeWaterPrimitiveView()
});
-onBeforeRouteUpdate((to, from, next) => {
- if (to.path !== '/zhjc') {
- handleCleanup();
- }
- next();
-});
-const route = useRoute();
-
-onBeforeUnmount(() => {
- if (route.path !== '/zhjc') {
- handleCleanup();
- }
-});
-watch(() => simStore.DeviceShowSwitch, (newValue, oldValue) => {
- if (newValue) {
- initializeDevicePoints();
- } else {
- handleCleanup()
- }
-});
-const deviceListAll = ref([]);
-const deviceEntities = ref([]);
-const handleCleanup = () => {
- deviceListAll.value.forEach(item => {
- removeEntities(item.deviceId);
- });
-}
-const initializeDevicePoints = () => {
- const list = [];
- deviceListAll.value.forEach((item, index) => {
- // 鏍规嵁闇�姹傚彲澧炲垹
- item.type = getDictName(deviceDictList, item.dictDeviceType);
- item.name = item.deviceName.split(selectValue.value)[1] || item.deviceName;
- item.id = item.deviceId;
- item.className = "device";
- item.showLabel = true;
- // 鎵撳嵃姣忎釜璁惧鐨勫悕绉板拰璁惧绫诲瀷
- // console.log(`璁惧鍚嶇О: ${item.id}, 璁惧绫诲瀷: ${item.name}`);
- createPoint(item);
- });
- deviceEntities.value = list;
-};
// 鏍规嵁鍖哄煙鍚嶇О鍔犺浇璁惧鍒楄〃
const loadDeviceList = async (areaName) => {
try {
- handleCleanup()
- const res = await getDeviceInfo();
- const allDevices = res.data.pageData;
- const devicesInArea = allDevices.filter((item) =>
+ const res = await getDeviceInfo(); // 璋冩暣getDeviceInfo浠ユ帴鍙楀姩鎬佸弬鏁帮紝濡傛灉闇�瑕佺殑璇�
+ deviceListAll.value = res.data.pageData.filter((item) =>
item.deviceName?.includes(areaName)
);
- deviceListAll.value = devicesInArea;
- deviceListAll.length = 0;
- initializeDevicePoints();
} catch (error) {
console.error("鍔犺浇璁惧淇℃伅澶辫触", error);
}
};
+
// 澶勭悊鍖哄煙鍙樺寲浜嬩欢
const handleChange = (item) => {
if (!item) {
@@ -106,7 +75,7 @@
}
// 鏍规嵁鏂板尯鍩熷悕閲嶆柊鍔犺浇璁惧鍒楄〃
loadDeviceList(item);
- // console.log(deviceListAll.value);
+ console.log(deviceListAll.value);
};
const selectValue = ref("瀛欒儭娌�");
@@ -146,10 +115,12 @@
// 鍏堟寜璁惧绫诲瀷鍒嗙粍
deviceListAll.value.forEach((device) => {
const typeName = getDictName(deviceDictList, device.dictDeviceType);
+
if (!typeName) {
console.warn("鏈壘鍒拌澶囩被鍨�:", device);
return;
}
+
if (!typeMap[typeName]) {
typeMap[typeName] = [];
}
@@ -251,14 +222,12 @@
:deep(.el-select__placeholder) {
color: white;
}
-
:deep(.el-select-dropdown__item.hover),
:deep(.el-select-dropdown__item:hover) {
color: white !important;
background-color: rgb(38, 124, 124, 0.5);
}
-
:deep(.el-tree-node__content) {
- padding-left: 0px !important;
+ padding-left: 0px !important ;
}
</style>
diff --git a/src/components/menu/Location.vue b/src/components/menu/Location.vue
index 312a474..23a3bd3 100644
--- a/src/components/menu/Location.vue
+++ b/src/components/menu/Location.vue
@@ -1,53 +1,57 @@
- <template>
- <div class="district">
- <div class="left-top">
- <span>鐩戞祴浣嶇疆</span>
+<template>
+ <div class="district">
+ <div class="left-top">
+ <span>鐩戞祴浣嶇疆</span>
+ </div>
+
+ <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>
</div>
- <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>
+ <!-- 婊氬姩鍖哄煙 -->
+ <div style="overflow-y: auto; height: 95%">
+ <!-- 鍔犺浇閬僵灞� -->
+ <div v-if="loading" class="loading-overlay">
+ <div class="spinner"></div>
</div>
-
- <!-- 婊氬姩鍖哄煙 -->
- <div style="overflow-y: auto; height: 95%">
- <!-- 鍔犺浇閬僵灞� -->
- <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 class="district-item-icon"></div>
- <div class="district-item-text">{{ item.hdName }}</div>
- </div>
+ <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>
</div>
</div>
- </template>
+ </div>
+</template>
<script setup>
-import { ref, onMounted, watch, onBeforeUnmount } from "vue";
-import { createPoint, removeEntities } from "@/utils/map";
+import { ref, onMounted, watch } from "vue";
+import { createPoint } 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 simStore = useSimStore();
+
const selectValue = ref("瀛欒儭娌�");
const options = ref([
@@ -88,39 +92,17 @@
});
}
}
-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 = async (areaName) => {
- handleCleanup();
+const filterDataByArea = (areaName) => {
if (!areaName || !simStore.DangerPoint || simStore.DangerPoint.length === 0) {
districtList.value = [];
return;
}
- const filteredData = simStore.DangerPoint.filter((item) =>
+
+ districtList.value = simStore.DangerPoint.filter((item) =>
item.position?.includes(areaName)
);
-
- if (JSON.stringify(districtList.value) !== JSON.stringify(filteredData)) {
- districtList.value = filteredData;
- await initializeDevicePoints();
- }
};
// 澶勭悊鍖哄煙鍙樺寲浜嬩欢
@@ -130,23 +112,10 @@
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,
@@ -155,16 +124,15 @@
filterDataByArea(selectValue.value);
loading.value = false; // 鏁版嵁鍔犺浇瀹屾垚
} else {
- handleCleanup();
districtList.value = [];
loading.value = true; // 鏁版嵁鏈噯澶囧氨缁�
}
- }
+ },
+ { immediate: true }
);
onMounted(() => {
- handleCleanup()
- initeWaterPrimitiveView()
+ initeWaterPrimitiveView();
// 榛樿鍏堟鏌ヤ竴閬嶆暟鎹�
if (simStore.DangerPoint && simStore.DangerPoint.length > 0) {
filterDataByArea("瀛欒儭娌�");
@@ -182,8 +150,7 @@
left: 0px;
right: 0px;
bottom: 10px;
- background-color: rgba(236, 233, 233, 0.5);
- /* 鍗婇�忔槑閬僵 */
+ background-color: rgba(43, 43, 43, 0.5);
display: flex;
align-items: center;
justify-content: center;
@@ -204,7 +171,6 @@
transform: rotate(360deg);
}
}
-
.district {
position: absolute;
width: 345px;
@@ -219,12 +185,10 @@
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;
@@ -251,7 +215,6 @@
/deep/ .el-select__placeholder {
color: white;
}
-
/deep/ .el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
color: white !important;
diff --git a/src/components/tools/LayerTree.vue b/src/components/tools/LayerTree.vue
index 87a046b..7a44b05 100644
--- a/src/components/tools/LayerTree.vue
+++ b/src/components/tools/LayerTree.vue
@@ -184,30 +184,6 @@
}
return;
}
- if (label === "缁煎悎鐩戞祴璁惧淇℃伅") {
- simStore.DeviceShowSwitch = checked;
- if (checked) {
- if (!treeMap.get("缁煎悎鐩戞祴璁惧淇℃伅")) {
- } else {
- toggleLayerVisible("缁煎悎鐩戞祴璁惧淇℃伅", true);
- }
- } else {
- toggleLayerVisible("缁煎悎鐩戞祴璁惧淇℃伅", false);
- }
- return;
-}
-if (label === "瀛欒儭娌熼殣鎮ｇ偣") {
- simStore.DangerShowSwitch = checked;
- if (checked) {
- if (!treeMap.get("瀛欒儭娌熼殣鎮ｇ偣")) {
- } else {
- toggleLayerVisible("瀛欒儭娌熼殣鎮ｇ偣", true);
- }
- } else {
- toggleLayerVisible("瀛欒儭娌熼殣鎮ｇ偣", false);
- }
- return;
-}
// 鍏朵粬鍥惧眰鐨勫鐞嗛�昏緫
const list = treeMap.get(label);
@@ -243,7 +219,7 @@
} else if (entityList && typeof entityList.show !== "undefined") {
entityList.show = checked;
} else {
- // console.error(`鏃犳硶璁剧疆鍥惧眰 ${name} 鐨勫彲瑙佹�);
+ console.error(`鏃犳硶璁剧疆鍥惧眰 ${name} 鐨勫彲瑙佹�);
}
}
@@ -257,7 +233,7 @@
item.deviceName?.includes("瀛欒儭娌�")
);
};
-// 榛樿鍔犺浇閮ㄥ垎宸叉浛鎹㈣嚦Device.vue涓紝閫昏緫淇敼涓烘牴鎹綋鍓嶉�夋嫨鍦板舰鍒囨崲璁惧鐐规樉绀�
+
async function initDevicePoint() {
let list = [];
await getDevicetList();
@@ -276,31 +252,31 @@
}
// 闅愭偅鐐瑰垪琛�
-// watchEffect(() => {
-// const dangerPoints = simStore.DangerPoint.filter((item) =>
-// item.position?.includes("瀛欒儭娌�")
-// );
+watchEffect(() => {
+ const dangerPoints = simStore.DangerPoint.filter((item) =>
+ item.position?.includes("瀛欒儭娌�")
+ );
-// if (dangerPoints && dangerPoints.length > 0) {
-// const list = [];
+ if (dangerPoints && dangerPoints.length > 0) {
+ const list = [];
-// dangerPoints.forEach((item) => {
-// // console.log(item, "item");
-// 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";
-// const entity = createPoint(item);
-// entity.show = false;
-// list.push(entity);
-// });
+ dangerPoints.forEach((item) => {
+ // console.log(item, "item");
+ 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";
+ const entity = createPoint(item);
+ entity.show = false;
+ list.push(entity);
+ });
-// treeMap.set("瀛欒儭娌熼殣鎮ｇ偣", list);
-// }
-// });
+ treeMap.set("瀛欒儭娌熼殣鎮ｇ偣", list);
+ }
+});
let divPointList = [];
/**
@@ -349,7 +325,7 @@
* 鍒濆鍖栨墍鏈夋暟鎹�
*/
function getData() {
- // initDevicePoint();
+ initDevicePoint();
// initDistrictPoint();
initDuanmianPoint();
addTetrahedron();
--
Gitblit v1.9.3