From d72bfc760302c524622e4484ad5175d03ca45ce7 Mon Sep 17 00:00:00 2001
From: wangjuncheng <1>
Date: 星期一, 19 五月 2025 12:08:24 +0800
Subject: [PATCH] change
---
src/components/tools/LayerTree.vue | 18 +++
src/utils/map.js | 2
public/images/poi/雨量计1.png | 0
src/components/menu/Device.vue | 74 ++++++++------
src/store/simulation.js | 2
src/constant/dict.js | 4
src/components/menu/Location.vue | 161 ++++++++++++-------------------
7 files changed, 129 insertions(+), 132 deletions(-)
diff --git "a/public/images/poi/\351\233\250\351\207\217\350\256\2411.png" "b/public/images/poi/\351\233\250\351\207\217\350\256\2411.png"
new file mode 100644
index 0000000..6a6ac23
--- /dev/null
+++ "b/public/images/poi/\351\233\250\351\207\217\350\256\2411.png"
Binary files differ
diff --git a/src/components/menu/Device.vue b/src/components/menu/Device.vue
index 1ea39aa..e3d7932 100644
--- a/src/components/menu/Device.vue
+++ b/src/components/menu/Device.vue
@@ -6,28 +6,12 @@
<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> -->
@@ -43,30 +27,56 @@
</template>
<script setup>
-import { ref, computed, onMounted } from "vue";
+import { createPoint, removeEntities } from "@/utils/map";
+import { ref, computed, onMounted, watch } 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()
});
-
+watch(() => simStore.DeviceShowSwitch, (newValue, oldValue) => {
+ if (newValue) {
+ initializeDevicePoints();
+ } else {
+ removeEntities();
+ }
+});
+const deviceEntities = ref([]);
+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.deviceName}, 璁惧绫诲瀷: ${item.dictDeviceType}`);
+ createPoint(item);
+ });
+ deviceEntities.value = list;
+};
// 鏍规嵁鍖哄煙鍚嶇О鍔犺浇璁惧鍒楄〃
const loadDeviceList = async (areaName) => {
try {
- const res = await getDeviceInfo(); // 璋冩暣getDeviceInfo浠ユ帴鍙楀姩鎬佸弬鏁帮紝濡傛灉闇�瑕佺殑璇�
- deviceListAll.value = res.data.pageData.filter((item) =>
+ const res = await getDeviceInfo();
+ const allDevices = res.data.pageData;
+ const devicesInArea = allDevices.filter((item) =>
item.deviceName?.includes(areaName)
);
+ deviceListAll.value = devicesInArea;
+ removeEntities();
+ initializeDevicePoints();
} catch (error) {
console.error("鍔犺浇璁惧淇℃伅澶辫触", error);
}
};
-
// 澶勭悊鍖哄煙鍙樺寲浜嬩欢
const handleChange = (item) => {
if (!item) {
@@ -75,7 +85,7 @@
}
// 鏍规嵁鏂板尯鍩熷悕閲嶆柊鍔犺浇璁惧鍒楄〃
loadDeviceList(item);
- console.log(deviceListAll.value);
+ // console.log(deviceListAll.value);
};
const selectValue = ref("瀛欒儭娌�");
@@ -222,12 +232,14 @@
: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 c239e71..61144ae 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,99 +28,78 @@
</template>
<script setup>
-import { ref, onMounted, watch } from "vue";
-import { createPoint } from "@/utils/map";
-import { useSimStore } from "@/store/simulation";
+import { ref, computed, onMounted } from "vue";
+import { deviceDictList, getDictName } from "@/constant/dict.js";
-const simStore = useSimStore();
+// 瀹氫箟涓�涓搷搴斿紡寮曠敤瀛樺偍璁惧鍒楄〃
+const deviceListAll = ref([]);
+// 褰撳墠閫変腑鐨勫尯鍩�
const selectValue = ref("瀛欒儭娌�");
+// 鍖哄煙閫夐」
const options = ref([
- {
- value: "瀛欒儭娌�",
- label: "瀛欒儭娌�",
- },
- {
- value: "楸兼按娲炲悗娌�",
- label: "楸兼按娲炲悗娌�",
- },
- {
- value: "浜庡瑗挎矡",
- label: "浜庡瑗挎矡",
- },
- {
- value: "鍖楁渤娌�",
- label: "鍖楁渤娌�",
- },
- {
- value: "榫欐硥宄潙",
- label: "榫欐硥宄潙",
- },
+ { value: "瀛欒儭娌�", label: "瀛欒儭娌�" },
+ { value: "楸兼按娲炲悗娌�", label: "楸兼按娲炲悗娌�" },
+ // 鍏朵粬閫夐」...
]);
-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 treeProps = {
+ label: "deviceName",
+ children: "children",
};
// 澶勭悊鍖哄煙鍙樺寲浜嬩欢
-const handleChange = (item) => {
- const areaName = item;
+const handleChange = (areaName) => {
if (!areaName) {
- ElMessage.warning("璇烽�夋嫨涓�涓尯鍩�");
+ console.error("璇烽�夋嫨涓�涓尯鍩�");
return;
}
-
- filterDataByArea(areaName);
+ selectValue.value = areaName; // 鏇存柊閫変腑鐨勫尯鍩熷��
+ console.log(deviceListAll.value); // 杩欓噷宸插寘鍚墍鏈夊尯鍩熺殑鏁版嵁
};
-// 鐩戝惉 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 }
-);
+// 璁＄畻灞炴�э細灏嗚澶囧垪琛ㄨ浆鎹负鏍戝舰缁撴瀯锛屼緷鎹綋鍓嶉�変腑鐨勫尯鍩�
+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;
+ }
+
+ 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(() => {
- // 榛樿鍏堟鏌ヤ竴閬嶆暟鎹�
- if (simStore.DangerPoint && simStore.DangerPoint.length > 0) {
- filterDataByArea("瀛欒儭娌�");
- loading.value = false;
- } else {
- loading.value = true;
- }
+ // 濡傛灉闇�瑕佸湪姝ゅ鍔犺浇鍏ㄩ儴鏁版嵁锛岃鍙栨秷娉ㄩ噴浠ヤ笅琛屽苟纭繚 getDeviceInfo 杩斿洖鎵�鏈夊尯鍩熺殑鏁版嵁
+ // loadDeviceList("");
});
</script>
@@ -148,7 +110,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 +132,7 @@
transform: rotate(360deg);
}
}
+
.district {
position: absolute;
width: 345px;
@@ -183,10 +147,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 +179,7 @@
/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 7a44b05..1b44d8f 100644
--- a/src/components/tools/LayerTree.vue
+++ b/src/components/tools/LayerTree.vue
@@ -184,6 +184,18 @@
}
return;
}
+ if (label === "缁煎悎鐩戞祴璁惧淇℃伅") {
+ simStore.DeviceShowSwitch = checked;
+ if (checked) {
+ if (!treeMap.get("缁煎悎鐩戞祴璁惧淇℃伅")) {
+ } else {
+ toggleLayerVisible("缁煎悎鐩戞祴璁惧淇℃伅", true);
+ }
+ } else {
+ toggleLayerVisible("缁煎悎鐩戞祴璁惧淇℃伅", false);
+ }
+ return;
+}
// 鍏朵粬鍥惧眰鐨勫鐞嗛�昏緫
const list = treeMap.get(label);
@@ -219,7 +231,7 @@
} else if (entityList && typeof entityList.show !== "undefined") {
entityList.show = checked;
} else {
- console.error(`鏃犳硶璁剧疆鍥惧眰 ${name} 鐨勫彲瑙佹�);
+ // console.error(`鏃犳硶璁剧疆鍥惧眰 ${name} 鐨勫彲瑙佹�);
}
}
@@ -233,7 +245,7 @@
item.deviceName?.includes("瀛欒儭娌�")
);
};
-
+// 榛樿鍔犺浇閮ㄥ垎宸叉浛鎹㈣嚦Device.vue涓紝閫昏緫淇敼涓烘牴鎹綋鍓嶉�夋嫨鍦板舰鍒囨崲璁惧鐐规樉绀�
async function initDevicePoint() {
let list = [];
await getDevicetList();
@@ -325,7 +337,7 @@
* 鍒濆鍖栨墍鏈夋暟鎹�
*/
function getData() {
- initDevicePoint();
+ // initDevicePoint();
// initDistrictPoint();
initDuanmianPoint();
addTetrahedron();
diff --git a/src/constant/dict.js b/src/constant/dict.js
index 4aa2674..ea8837d 100644
--- a/src/constant/dict.js
+++ b/src/constant/dict.js
@@ -8,6 +8,10 @@
value: "1874719366287368194",
},
{
+ label: "闆ㄩ噺璁�1",
+ value: "1437295810",
+ },
+ {
label: "鎽勫儚澶�",
value: "1437295825",
},
diff --git a/src/store/simulation.js b/src/store/simulation.js
index 4139e71..b9b4a5e 100644
--- a/src/store/simulation.js
+++ b/src/store/simulation.js
@@ -5,6 +5,7 @@
export const useSimStore = defineStore('simulation', () => {
// 闅愭偅鐐瑰垪琛�
+ const DeviceShowSwitch = ref(true)
const DangerPoint = ref([])
const navigationShow = ref(true)
const leftShow = ref(false)
@@ -147,6 +148,7 @@
backToHome,
rainFalls,
DangerPoint,
+ DeviceShowSwitch,
// 鏂规鐩稿叧鏂规硶
setSchemCard,
diff --git a/src/utils/map.js b/src/utils/map.js
index 108b0e8..1aadced 100644
--- a/src/utils/map.js
+++ b/src/utils/map.js
@@ -158,7 +158,7 @@
}
export function removeEntities() {
entities.forEach(entity => {
- // viewer.entities.remove(entity)
+ viewer.entities.remove(entity)
entity.show = false;
});
// entities = []
--
Gitblit v1.9.3