From bc64876aafdfdca8ac5e11bda602d5edd0041e5b Mon Sep 17 00:00:00 2001
From: wangjuncheng <1>
Date: 星期一, 19 五月 2025 12:13:07 +0800
Subject: [PATCH] backTo 0516 15:06:27
---
src/components/menu/Location.vue | 159 ++++++++++++++++++++++++++++++++---------------------
1 files changed, 96 insertions(+), 63 deletions(-)
diff --git a/src/components/menu/Location.vue b/src/components/menu/Location.vue
index 61144ae..c239e71 100644
--- a/src/components/menu/Location.vue
+++ b/src/components/menu/Location.vue
@@ -7,8 +7,19 @@
<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>
@@ -18,7 +29,13 @@
<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>
@@ -28,78 +45,99 @@
</template>
<script setup>
-import { ref, computed, onMounted } from "vue";
-import { deviceDictList, getDictName } from "@/constant/dict.js";
+import { ref, onMounted, watch } from "vue";
+import { createPoint } from "@/utils/map";
+import { useSimStore } from "@/store/simulation";
-// 瀹氫箟涓�涓搷搴斿紡寮曠敤瀛樺偍璁惧鍒楄〃
-const deviceListAll = ref([]);
+const simStore = useSimStore();
-// 褰撳墠閫変腑鐨勫尯鍩�
const selectValue = ref("瀛欒儭娌�");
-// 鍖哄煙閫夐」
const options = ref([
- { value: "瀛欒儭娌�", label: "瀛欒儭娌�" },
- { value: "楸兼按娲炲悗娌�", label: "楸兼按娲炲悗娌�" },
- // 鍏朵粬閫夐」...
+ {
+ value: "瀛欒儭娌�",
+ label: "瀛欒儭娌�",
+ },
+ {
+ value: "楸兼按娲炲悗娌�",
+ label: "楸兼按娲炲悗娌�",
+ },
+ {
+ value: "浜庡瑗挎矡",
+ label: "浜庡瑗挎矡",
+ },
+ {
+ value: "鍖楁渤娌�",
+ label: "鍖楁渤娌�",
+ },
+ {
+ value: "榫欐硥宄潙",
+ label: "榫欐硥宄潙",
+ },
]);
-// 鏍戝舰缁撴瀯灞炴�ч厤缃�
-const treeProps = {
- label: "deviceName",
- children: "children",
+const districtList = ref([]);
+const loading = ref(true); // 鎺у埗鍔犺浇鐘舵��
+
+function handleClick(district) {
+ const entity = viewer.entities.getById(district.hdId);
+ if (entity) {
+ viewer.flyTo(entity, {
+ offset: {
+ heading: Cesium.Math.toRadians(0),
+ pitch: Cesium.Math.toRadians(-45),
+ range: 4000,
+ },
+ });
+ }
+}
+
+// 鏍规嵁鍖哄煙鍚嶇О杩囨护鏁版嵁
+const filterDataByArea = (areaName) => {
+ if (!areaName || !simStore.DangerPoint || simStore.DangerPoint.length === 0) {
+ districtList.value = [];
+ return;
+ }
+
+ districtList.value = simStore.DangerPoint.filter((item) =>
+ item.position?.includes(areaName)
+ );
};
// 澶勭悊鍖哄煙鍙樺寲浜嬩欢
-const handleChange = (areaName) => {
+const handleChange = (item) => {
+ const areaName = item;
if (!areaName) {
- console.error("璇烽�夋嫨涓�涓尯鍩�");
+ ElMessage.warning("璇烽�夋嫨涓�涓尯鍩�");
return;
}
- selectValue.value = areaName; // 鏇存柊閫変腑鐨勫尯鍩熷��
- console.log(deviceListAll.value); // 杩欓噷宸插寘鍚墍鏈夊尯鍩熺殑鏁版嵁
+
+ filterDataByArea(areaName);
};
-// 璁＄畻灞炴�э細灏嗚澶囧垪琛ㄨ浆鎹负鏍戝舰缁撴瀯锛屼緷鎹綋鍓嶉�変腑鐨勫尯鍩�
-const deviceTree = computed(() => {
- const typeMap = {};
-
- // 杩囨护鍑哄睘浜庡綋鍓嶉�変腑鍖哄煙鐨勮澶�
- const filteredDevices = deviceListAll.value.filter(device =>
- device.deviceName.includes(selectValue.value)
- );
-
- // 鎸夎澶囩被鍨嬪垎缁�
- filteredDevices.forEach((device) => {
- const typeName = getDictName(deviceDictList, device.dictDeviceType);
-
- if (!typeName) {
- console.warn("鏈壘鍒拌澶囩被鍨�:", device);
- return;
+// 鐩戝惉 simStore.DangerPoint 鍙樺寲
+watch(
+ () => simStore.DangerPoint,
+ (newVal) => {
+ if (newVal && newVal.length > 0) {
+ filterDataByArea(selectValue.value);
+ loading.value = false; // 鏁版嵁鍔犺浇瀹屾垚
+ } else {
+ districtList.value = [];
+ loading.value = true; // 鏁版嵁鏈噯澶囧氨缁�
}
+ },
+ { immediate: true }
+);
- if (!typeMap[typeName]) {
- typeMap[typeName] = [];
- }
- // 鐩存帴浣跨敤鍘熷鐨勮澶囧悕绉帮紝涓嶈繘琛屼换浣曟浛鎹㈡搷浣�
- typeMap[typeName].push({
- ...device,
- deviceName: device.deviceName.trim(), // 鍙幓闄ら灏剧┖鏍�
- });
- });
-
- // 杞崲涓烘爲褰㈢粨鏋�
- return Object.keys(typeMap).map((typeName) => ({
- deviceName: typeName,
- children: typeMap[typeName],
- }));
-});
-
-// 鍋囪鍦ㄧ粍浠跺垵濮嬪寲涔嬪墠锛宒eviceListAll 宸茶濉厖浜嗘墍鏈夊尯鍩熺殑鏁版嵁
-// 濡傛灉涓嶆槸杩欐牱锛屽垯闇�瑕佷繚鐣欏 loadDeviceList 鐨勮皟鐢紝鎴栬�呮壘鍒颁竴绉嶆柟娉曟潵棰勫～鍏� deviceListAll
onMounted(() => {
- // 濡傛灉闇�瑕佸湪姝ゅ鍔犺浇鍏ㄩ儴鏁版嵁锛岃鍙栨秷娉ㄩ噴浠ヤ笅琛屽苟纭繚 getDeviceInfo 杩斿洖鎵�鏈夊尯鍩熺殑鏁版嵁
- // loadDeviceList("");
+ // 榛樿鍏堟鏌ヤ竴閬嶆暟鎹�
+ if (simStore.DangerPoint && simStore.DangerPoint.length > 0) {
+ filterDataByArea("瀛欒儭娌�");
+ loading.value = false;
+ } else {
+ loading.value = true;
+ }
});
</script>
@@ -110,8 +148,7 @@
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;
@@ -132,7 +169,6 @@
transform: rotate(360deg);
}
}
-
.district {
position: absolute;
width: 345px;
@@ -147,12 +183,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;
@@ -179,7 +213,6 @@
/deep/ .el-select__placeholder {
color: white;
}
-
/deep/ .el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
color: white !important;
--
Gitblit v1.9.3