From b040d81c856a77f280b38037e78a8b6a8bdb31ab Mon Sep 17 00:00:00 2001
From: guonan <guonan201020@163.com>
Date: 星期二, 08 七月 2025 15:51:15 +0800
Subject: [PATCH] 泥位计
---
src/components/menu/Device.vue | 541 +++++++++++++++++++++++++++++++----------------------
1 files changed, 317 insertions(+), 224 deletions(-)
diff --git a/src/components/menu/Device.vue b/src/components/menu/Device.vue
index 11d5ac4..a055fb9 100644
--- a/src/components/menu/Device.vue
+++ b/src/components/menu/Device.vue
@@ -4,12 +4,30 @@
<span>鐩戞祴璁惧</span>
</div>
<div class="left-content device-content">
+ <div style="margin-left: 5px; margin-bottom: 5px">
+ <span style="color: white">鍖椾含甯傦細</span>
+ <el-select
+ @change="handleChange1"
+ v-model="selectValue1"
+ placeholder="璇烽�夋嫨琛屾斂鍖�"
+ size="mini"
+ style="width: 240px"
+ >
+ <el-option
+ v-for="item in BJoptions"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ />
+ </el-select>
+ </div>
<div style="margin-left: 5px">
<span style="color: white">閲嶇偣娌燂細</span>
<el-select
+ @change="handleChange"
v-model="selectValue"
- placeholder="Select"
- size="large"
+ placeholder="璇烽�夋嫨閲嶇偣娌�"
+ size="mini"
style="width: 240px"
>
<el-option
@@ -20,220 +38,239 @@
/>
</el-select>
</div>
- <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> -->
- <span class="device-item-text">{{ node.label }}</span>
- </span>
- <span v-else class="device-tree-category">
- {{ node.label }} ({{ data.children.length }})
- </span>
- </template>
- </el-tree>
+ <!-- 鍔犺浇閬僵灞傚拰鍐呭瀹瑰櫒 -->
+ <div class="tree-container">
+ <div v-if="isLoading" class="loading-overlay">
+ <div class="loading-content">
+ <el-icon class="loading-icon"><Loading /></el-icon>
+ <span class="loading-text">鏁版嵁鍔犺浇涓�...</span>
+ </div>
+ </div>
+
+ <el-tree
+ v-show="!isLoading"
+ :data="deviceTree"
+ default-expand-all
+ node-key="deviceId"
+ :props="treeProps"
+ @node-click="handleTreeNodeClick"
+ class="device-tree"
+ >
+ <template #default="{ node, data }">
+ <span v-if="!data.children" class="device-tree-item">
+ <span class="device-item-text" :title="node.label">{{
+ node.label
+ }}</span>
+ </span>
+ <span v-else class="device-tree-category">
+ {{ node.label }} ({{ data.children.length }})
+ </span>
+ </template>
+ </el-tree>
+
+ <!-- <el-tree
+ v-show="!isLoading"
+ :data="deviceTree"
+ default-expand-all
+ node-key="deviceId"
+ :props="treeProps"
+ @node-click="handleTreeNodeClick"
+ class="device-tree"
+ >
+ <template #default="{ node, data }">
+ <span v-if="!data.children" class="device-tree-item">
+ <el-tooltip :content="node.label" placement="top" effect="dark">
+ <span class="device-item-text" :title="node.label">{{
+ node.label
+ }}</span>
+ </el-tooltip>
+ </span>
+ <span v-else class="device-tree-category">
+ <el-tooltip
+ :content="`${node.label} (${data.children.length})`"
+ placement="top"
+ effect="dark"
+ >
+ <span :title="`${node.label} (${data.children.length})`"
+ >{{ node.label }} ({{ data.children.length }})</span
+ >
+ </el-tooltip>
+ </span>
+ </template>
+ </el-tree> -->
+ </div>
</div>
</div>
</template>
<script setup>
-import { ref, computed, onMounted } from "vue";
-import { createPoint, removeEntities } from "@/utils/map";
+import { ref, computed, onMounted, watch, onBeforeUnmount } from "vue";
+import { useRoute, onBeforeRouteUpdate } from "vue-router";
+import { createPoint, clearAllPoints } from "@/utils/map";
import { deviceDictList, getDictName } from "@/constant/dict.js";
-import { getDeviceData } from "@/api/index";
+import { initeWaterPrimitiveView } from "@/utils/water"; //鐩告満flyTo鍑芥暟锛屽悗缁璷ptions鍒楄〃涓湁瀵瑰簲缁忕含搴﹀悗寮冪敤
+import { useSimStore } from "@/store/simulation";
+import { Loading } from "@element-plus/icons-vue";
+import { getDeviceInfoByPage } from "@/api/hpApi";
+
+const simStore = useSimStore();
+
+const isLoading = ref(true); // 鍒濆璁剧疆涓哄姞杞界姸鎬�
+
+onMounted(async () => {
+ try {
+ if (simStore.devices && simStore.devices.length > 0) {
+ await loadDeviceList(selectValue.value);
+ }
+ // initeWaterPrimitiveView();
+ } finally {
+ isLoading.value = false;
+ }
+});
+
+const route = useRoute();
+
+onBeforeUnmount(() => {
+ if (route.path !== "/zhjc") {
+ clearAllPoints();
+ }
+});
+
+const selectValue1 = ref("");
+
+const BJoptions = ref([
+ { label: "瀵嗕簯鍖�", value: "110118000000" },
+ { label: "鎴垮北鍖�", value: "110111000000" },
+ { label: "闂ㄥご娌熷尯", value: "110109000000" },
+ { label: "寤跺簡鍖�", value: "110119000000" },
+ { label: "鎬�鏌斿尯", value: "110116000000" },
+ { label: "鏄屽钩鍖�", value: "110114000000" },
+ { label: "骞宠胺鍖�", value: "110117000000" },
+ { label: "娴锋穩鍖�", value: "110108000000" },
+ { label: "鐭虫櫙灞卞尯", value: "110107000000" },
+ { label: "涓板彴鍖�", value: "110106000000" },
+]);
const selectValue = ref("瀛欒儭娌�");
const options = ref([
- {
- value: "瀛欒儭娌�",
- label: "瀛欒儭娌�",
- },
- {
- value: "楸兼按娲炲悗娌�",
- label: "楸兼按娲炲悗娌�",
- },
- {
- value: "浜庡瑗挎矡",
- label: "浜庡瑗挎矡",
- },
- {
- value: "鍖楁渤娌�",
- label: "鍖楁渤娌�",
- },
- {
- value: "榫欐硥宄潙",
- label: "榫欐硥宄潙",
- },
+ { value: "瀛欒儭娌�", label: "瀛欒儭娌�" },
+ { value: "楸兼按娲炲悗娌�", label: "楸兼按娲炲悗娌�" },
+ { value: "浜庡瑗挎矡", label: "浜庡瑗挎矡" },
+ { value: "鍖楁渤娌�", label: "鍖楁渤娌�" },
+ { value: "榫欐硥宄潙", label: "榫欐硥宄潙" },
]);
-const devicetList = ref([
- {
- deviceCode: "01303A9016",
- deviceId: "1821067850122498049",
- deviceName: "瀛欒儭娌�(澧掓儏)",
- dictDeviceType: "14372958380",
- latitude: 40.56476666,
- longitude: 116.5955361,
- },
- {
- deviceCode: "303A9016",
- deviceId: "1821067878870257666",
- deviceName: "瀛欒儭娌�(澧掓儏)",
- dictDeviceType: "1437295822",
- latitude: 40.56476666,
- longitude: 116.5955361,
- },
- {
- deviceCode: "1101161102180100010063",
- deviceId: "1554360510040182786",
- deviceName: "鎬�鏌斿尯鐞夌拑搴欓晣瀛欒儭娌熷肮瀹惰タ娌熼洦閲忚0063",
- dictDeviceType: "1437295810",
- latitude: 40.556589,
- longitude: 116.579459,
- },
- {
- deviceCode: "1101161102180100194030",
- deviceId: "1554361328692826114",
- deviceName: "鎬�鏌斿尯鐞夌拑搴欓晣瀛欒儭娌熸潙涓婂彴瀛愭渤涓滃崡娌熺紪鐮佸櫒4030",
- dictDeviceType: "1437295815",
- latitude: 40.554272,
- longitude: 116.592583,
- },
- {
- deviceCode: "1101161102180100031041",
- deviceId: "1554360448702681089",
- deviceName: "鎬�鏌斿尯鐞夌拑搴欓晣瀛欒儭娌熸潙涓婂彴瀛愭渤涓滃崡娌熸澹颁华1041",
- dictDeviceType: "1437295832",
- latitude: 40.553236,
- longitude: 116.592304,
- },
- {
- deviceCode: "1101161102180100022007",
- deviceId: "1554360273959587842",
- deviceName: "鎬�鏌斿尯鐞夌拑搴欓晣瀛欒儭娌熸潙涓婂彴瀛愭渤涓滃崡娌熷惈姘寸巼2007",
- dictDeviceType: "1437295822",
- latitude: 40.545821,
- longitude: 116.586354,
- },
- {
- deviceCode: "1101161102180100225406",
- deviceId: "1554360478494822402",
- deviceName: "鎬�鏌斿尯鐞夌拑搴欓晣瀛欒儭娌熸潙涓婂彴瀛愭渤涓滃崡娌熸祦閫熶华5406",
- dictDeviceType: "1437295821",
- latitude: 40.554368,
- longitude: 116.592989,
- },
- {
- deviceCode: "1101161102180100055006",
- deviceId: "1554360276627165185",
- deviceName: "鎬�鏌斿尯鐞夌拑搴欓晣瀛欒儭娌熸潙涓婂彴瀛愭渤涓滃崡娌熸偿浣嶈5006",
- dictDeviceType: "1437295811",
- latitude: 40.554398,
- longitude: 116.592929,
- },
- {
- deviceCode: "1101161102180100010064",
- deviceId: "1554360452670492674",
- deviceName: "鎬�鏌斿尯鐞夌拑搴欓晣瀛欒儭娌熸潙涓婂彴瀛愭渤涓滃崡娌熼洦閲忚0064",
- dictDeviceType: "1437295810",
- latitude: 40.545741,
- longitude: 116.586304,
- },
- {
- deviceCode: "1101161102180100183030",
- deviceId: "1554360533087883265",
- deviceName: "鎬�鏌斿尯鐞夌拑搴欓晣瀛欒儭娌熸潙涓婂彴瀛愭渤涓滃崡娌熸憚鍍忓ご3030",
- dictDeviceType: "1437295825",
- latitude: 40.554272,
- longitude: 116.592583,
- },
- {
- deviceCode: "1101161102180100194031",
- deviceId: "1554361328877375489",
- deviceName: "鎬�鏌斿尯鐞夌拑搴欓晣瀛欒儭娌熸ご鏍戝簳涓嬩笢娌熺紪鐮佸櫒4031",
- dictDeviceType: "1437295815",
- latitude: 40.554035,
- longitude: 116.59786,
- },
- {
- deviceCode: "1101161102180100055007",
- deviceId: "1554360509775941634",
- deviceName: "鎬�鏌斿尯鐞夌拑搴欓晣瀛欒儭娌熸ご鏍戝簳涓嬩笢娌熸偿浣嶈5007",
- dictDeviceType: "1437295811",
- latitude: 40.554729,
- longitude: 116.598165,
- },
- {
- deviceCode: "1101161102180100031042",
- deviceId: "1554360448916590593",
- deviceName: "鎬�鏌斿尯鐞夌拑搴欓晣瀛欒儭娌熸ご鏍戝簳涓嬩笢娌熸澹颁华1042",
- dictDeviceType: "1437295832",
- latitude: 40.549398,
- longitude: 116.600387,
- },
- {
- deviceCode: "1101161102180100225407",
- deviceId: "1554360478658400257",
- deviceName: "鎬�鏌斿尯鐞夌拑搴欓晣瀛欒儭娌熸ご鏍戝簳涓嬩笢娌熸祦閫熶华5407",
- dictDeviceType: "1437295821",
- latitude: 40.55481,
- longitude: 116.598025,
- },
- {
- deviceCode: "1101161102180100022008",
- deviceId: "1554360274165108737",
- deviceName: "鎬�鏌斿尯鐞夌拑搴欓晣瀛欒儭娌熸ご鏍戝簳涓嬩笢娌熷惈姘寸巼2008",
- dictDeviceType: "1437295822",
- latitude: 40.544645,
- longitude: 116.596511,
- },
- {
- deviceCode: "1101161102180100183031",
- deviceId: "1554360533255655426",
- deviceName: "鎬�鏌斿尯鐞夌拑搴欓晣瀛欒儭娌熸ご鏍戝簳涓嬩笢娌熸憚鍍忓ご3031",
- dictDeviceType: "1437295825",
- latitude: 40.554035,
- longitude: 116.59786,
- },
- {
- deviceCode: "1101161102180100010065",
- deviceId: "1554360452888596482",
- deviceName: "鎬�鏌斿尯鐞夌拑搴欓晣瀛欒儭娌熸ご鏍戝簳涓嬩笢娌熼洦閲忚0065",
- dictDeviceType: "1437295810",
- latitude: 40.543104,
- longitude: 116.59585,
- },
- {
- deviceCode: "1101161102180100031040",
- deviceId: "1554360448383913986",
- deviceName: "鎬�鏌斿尯鐞夌拑搴欓晣瀛欒儭娌熸潙浜庡瑗挎矡娆″０浠�1040",
- dictDeviceType: "1437295832",
- latitude: 40.563822,
- longitude: 116.592648,
- },
- {
- deviceCode: "1101161102180100010062",
- deviceId: "1554360452519497730",
- deviceName: "鎬�鏌斿尯鐞夌拑搴欓晣瀛欒儭娌熸潙浜庡瑗挎矡闆ㄩ噺璁�0062",
- dictDeviceType: "1437295810",
- latitude: 40.558778,
- longitude: 116.586892,
- },
- {
- deviceCode: "1101160042160100010005",
- deviceId: "1554360582698110977",
- deviceName: "鎬�鏌斿尯闆佹爾闀囧寳婀炬潙鍖楁灄澶х煶闂ㄦ矡闆ㄩ噺璁�0005",
- dictDeviceType: "1437295810",
- latitude: 40.533623,
- longitude: 116.602406,
- },
-]);
+const deviceListAll = ref([]);
+
+const initializeDevicePoints = () => {
+ 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);
+ });
+};
+
+// 鍗曚釜鐐规覆鏌�
+const DevicePoints = async (item) => {
+ // 鏍规嵁闇�姹傚彲澧炲垹
+ item.type = getDictName(deviceDictList, item.dictDeviceType);
+ item.name = item.deviceName;
+ // 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);
+};
+
+// 鏍规嵁鍖哄煙鍚嶇О鍔犺浇璁惧鍒楄〃
+const loadDeviceList = async (areaName) => {
+ try {
+ clearAllPoints();
+ isLoading.value = true;
+
+ deviceListAll.value = simStore.devices.filter((item) =>
+ item.deviceName?.includes(areaName)
+ );
+
+ await initializeDevicePoints();
+ } catch (error) {
+ console.error("鍔犺浇璁惧淇℃伅澶辫触", error);
+ } finally {
+ isLoading.value = false;
+ }
+};
+
+// 鐩戝惉 simStore.devices 鍙樺寲
+watch(
+ () => simStore.devices,
+ (newVal) => {
+ if (newVal && newVal.length > 0) {
+ loadDeviceList(selectValue.value);
+ } else {
+ clearAllPoints();
+ deviceListAll.value = [];
+ }
+ }
+);
+
+// 澶勭悊鍖哄煙鍙樺寲浜嬩欢
+const handleChange = (item) => {
+ if (!item) {
+ ElMessage("璇烽�夋嫨涓�涓尯鍩�");
+ return;
+ }
+ selectValue1.value = "";
+ selectValue.value = item;
+ // 鏍规嵁鏂板尯鍩熷悕閲嶆柊鍔犺浇璁惧鍒楄〃
+ loadDeviceList(item);
+ initializeDevicePoints();
+};
+
+// 澶勭悊鍖哄煙鍙樺寲浜嬩欢
+const handleChange1 = async (item) => {
+ if (!item) {
+ ElMessage("璇烽�夋嫨涓�涓尯鍩�");
+ return;
+ }
+ selectValue1.value = item;
+ selectValue.value = "";
+ deviceListAll.value = [];
+ let pageNum = 1;
+ let hasMore = true;
+
+ try {
+ while (hasMore) {
+ const res = await getDeviceInfoByPage(item, pageNum);
+
+ // 灏嗘柊鏁版嵁杩藉姞鍒板垪琛ㄤ腑
+ deviceListAll.value = [...deviceListAll.value, ...res.data.pageData];
+
+ // 鍒ゆ柇鏄惁杩樻湁涓嬩竴椤�
+ if (pageNum < res.data.pageCount) {
+ pageNum++;
+ await new Promise((resolve) => setTimeout(resolve, 300));
+ } else {
+ hasMore = false;
+ }
+ }
+ } catch (err) {
+ console.error("鑾峰彇鐩戞祴璁惧澶辫触", err);
+ deviceListAll.value = []; // 鍙�夛細娓呯┖鎴栦繚鐣欏凡鍔犺浇閮ㄥ垎
+ } finally {
+ // 鏆傛椂鍏堝叧闂姞杞界姸鎬侊紝鍥犱负姝ゅ涓哄垎椤佃姹傛暟鎹紝鐒跺悗涓�鐐逛竴鐐圭殑娓叉煋锛屾渶缁堜細鍔犺浇瀹屾垚
+ // 濡傛灉寮�鍚姞杞界姸鎬侊紝鏈�鍚庤繕鏄細绛夋墍鏈夋暟鎹兘璇锋眰鍥炴潵鎵嶄細娓叉煋
+ // loading.value = false; // 鍏抽棴鍔犺浇鐘舵��
+ }
+};
const treeProps = {
label: "deviceName",
@@ -241,19 +278,16 @@
};
// 璁＄畻灞炴�э細灏嗚澶囧垪琛ㄨ浆鎹负鏍戝舰缁撴瀯
-// 璁＄畻灞炴�э細灏嗚澶囧垪琛ㄨ浆鎹负鏍戝舰缁撴瀯
const deviceTree = computed(() => {
const typeMap = {};
// 鍏堟寜璁惧绫诲瀷鍒嗙粍
- devicetList.value.forEach((device) => {
+ deviceListAll.value.forEach((device) => {
const typeName = getDictName(deviceDictList, device.dictDeviceType);
-
if (!typeName) {
console.warn("鏈壘鍒拌澶囩被鍨�:", device);
return;
}
-
if (!typeMap[typeName]) {
typeMap[typeName] = [];
}
@@ -270,7 +304,18 @@
children: typeMap[typeName],
}));
});
-function handleTreeNodeClick(data) {
+
+function handleTreeNodeClick(data, node) {
+ if (data.children) {
+ return; // 涓�绾ц妭鐐癸紝涓嶆墽琛岀偣鍑婚�昏緫
+ }
+ if (selectValue.value) {
+ // 姝ゅ璋冪敤鏄洜涓篏isView椤甸潰浼氬湪鐐瑰嚮涓嬩竴涔￠晣涔嬪墠鎶婁笂涓�涓�夋嫨鐨勫尯鍩熺殑闅愭偅鐐规竻闄ゆ帀锛堝鏋滃垰濂介�夋嫨浜嗗瓩鑳℃矡锛岄偅涔堜笅涓�涓偣鍑诲皢浼氭竻绌哄瓩鑳℃矡鐨勯殣鎮ｇ偣锛�
+ initializeDevicePoints();
+ } else {
+ // 琛屾斂鍖哄垝鐨勭偣浣嶅お澶氫簡锛屽彧鑳介�変腑鍝釜娓叉煋鍝釜
+ DevicePoints(data);
+ }
// 鍙湁璁惧鑺傜偣鎵嶅鐞嗙偣鍑讳簨浠�
if (!data.children) {
const entity = viewer.entities.getById(data.deviceId);
@@ -285,10 +330,7 @@
}
}
}
-
-// 鍏朵粬鍘熸湁鏂规硶淇濇寔涓嶅彉...
</script>
-
<style lang="less" scoped>
.device {
position: absolute;
@@ -299,10 +341,67 @@
z-index: 99;
}
+.left-top {
+ height: 40px;
+ line-height: 40px;
+ color: white;
+ font-size: 16px;
+ font-weight: bold;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
.device-content {
padding: 10px;
- overflow-y: auto;
+ box-sizing: border-box;
height: calc(100% - 70px);
+ position: relative;
+}
+
+.tree-container {
+ position: relative;
+ height: calc(100% - 22px);
+ // margin-top: 10px;
+ overflow-y: auto;
+}
+
+.loading-overlay {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ // background-color: rgba(0, 0, 0, 0.7);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ z-index: 100;
+ // border-radius: 4px;
+}
+
+.loading-content {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ color: #fff;
+}
+
+.loading-icon {
+ font-size: 24px;
+ margin-bottom: 8px;
+ animation: rotating 2s linear infinite;
+}
+
+.loading-text {
+ font-size: 14px;
+}
+
+@keyframes rotating {
+ 0% {
+ transform: rotate(0deg);
+ }
+ 100% {
+ transform: rotate(360deg);
+ }
}
.device-tree {
@@ -338,30 +437,24 @@
color: #fff;
}
-.device-item-icon {
- background: url("@/assets/img/menu/locationicon.png") no-repeat;
- background-position: 5px 5px;
- width: 30px;
- height: 30px;
- margin-right: 5px;
-}
-
.device-item-text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
+ display: inline-block;
}
-// 淇濇寔鍘熸湁鐨勯�夋嫨鍣ㄦ牱寮�
: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);
+ background-color: rgba(38, 124, 124, 0.5);
}
+
:deep(.el-tree-node__content) {
- padding-left: 0px !important ;
+ padding-left: 0px !important;
}
</style>
--
Gitblit v1.9.3