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 | 292 ++++++++++++++++++++++++++++++++++++----------------------
1 files changed, 181 insertions(+), 111 deletions(-)
diff --git a/src/components/menu/Device.vue b/src/components/menu/Device.vue
index 3b69b4d..a055fb9 100644
--- a/src/components/menu/Device.vue
+++ b/src/components/menu/Device.vue
@@ -9,7 +9,7 @@
<el-select
@change="handleChange1"
v-model="selectValue1"
- placeholder="Select"
+ placeholder="璇烽�夋嫨琛屾斂鍖�"
size="mini"
style="width: 240px"
>
@@ -26,7 +26,7 @@
<el-select
@change="handleChange"
v-model="selectValue"
- placeholder="Select"
+ placeholder="璇烽�夋嫨閲嶇偣娌�"
size="mini"
style="width: 240px"
>
@@ -50,6 +50,7 @@
<el-tree
v-show="!isLoading"
:data="deviceTree"
+ default-expand-all
node-key="deviceId"
:props="treeProps"
@node-click="handleTreeNodeClick"
@@ -57,13 +58,46 @@
>
<template #default="{ node, data }">
<span v-if="!data.children" class="device-tree-item">
- <span class="device-item-text">{{ node.label }}</span>
+ <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>
@@ -72,12 +106,12 @@
<script setup>
import { ref, computed, onMounted, watch, onBeforeUnmount } from "vue";
import { useRoute, onBeforeRouteUpdate } from "vue-router";
-import { createPoint, removeEntities } from "@/utils/map";
+import { createPoint, clearAllPoints } from "@/utils/map";
import { deviceDictList, getDictName } from "@/constant/dict.js";
-import { getDeviceInfoShg, getDeviceInfo } from "@/api/hpApi";
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();
@@ -85,123 +119,37 @@
onMounted(async () => {
try {
- await getData();
- await loadDeviceList(selectValue.value);
+ if (simStore.devices && simStore.devices.length > 0) {
+ await loadDeviceList(selectValue.value);
+ }
// initeWaterPrimitiveView();
} finally {
isLoading.value = false;
}
});
-onBeforeRouteUpdate((to, from, next) => {
- if (to.path !== "/zhjc") {
- handleCleanup();
- }
- next();
-});
const route = useRoute();
onBeforeUnmount(() => {
if (route.path !== "/zhjc") {
- handleCleanup();
+ clearAllPoints();
}
});
-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 = (val) => {
- const list = [];
- val.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 allDevices = ref([]);
-const getData = async () => {
- const res = await getDeviceInfoShg();
- allDevices.value = res.data.pageData;
-};
-// 鏍规嵁鍖哄煙鍚嶇О鍔犺浇璁惧鍒楄〃
-const loadDeviceList = async (areaName) => {
- try {
- isLoading.value = true;
- handleCleanup();
- // const res = await getDeviceInfoShg();
- // const allDevices = res.data.pageData;
- const devicesInArea = allDevices.value.filter((item) =>
- item.deviceName?.includes(areaName)
- );
- // deviceListAll.value = devicesInArea;
- getDeviceInfo().then((res) => {
- const list = res.data.pageData;
- deviceListAll.value = [];
+const selectValue1 = ref("");
- let index = 0;
- const batchSize = 50; // 姣忔澶勭悊鐨勬暟閲�
- const delay = 100; // 姣忛殧澶氬皯姣澶勭悊涓�娆�
-
- const intervalId = setInterval(() => {
- // 鍙栧嚭褰撳墠鎵规鐨勬暟鎹�
- const batch = list.slice(index, index + batchSize);
-
- if (batch.length === 0) {
- clearInterval(intervalId); // 鏁版嵁澶勭悊瀹屼簡锛屽仠姝㈠畾鏃跺櫒
- return;
- }
-
- // 鎶婂綋鍓嶆壒娆＄殑鏁版嵁 push 鍒� deviceListAll
- deviceListAll.value = [...deviceListAll.value, ...batch];
-
- // 瀵瑰綋鍓嶆壒娆℃墽琛屽垵濮嬪寲鏂规硶
- initializeDevicePoints(batch);
-
- index += batchSize;
- }, delay);
- });
- } catch (error) {
- console.error("鍔犺浇璁惧淇℃伅澶辫触", error);
- } finally {
- isLoading.value = false;
- }
-};
-
-// 澶勭悊鍖哄煙鍙樺寲浜嬩欢
-const handleChange = (item) => {
- if (!item) {
- ElMessage("璇烽�夋嫨涓�涓尯鍩�");
- return;
- }
- // 鏍规嵁鏂板尯鍩熷悕閲嶆柊鍔犺浇璁惧鍒楄〃
- loadDeviceList(item);
- // console.log(deviceListAll.value);
-};
-
-const selectValue1 = ref("鍖椾含甯�");
-
-const BJoptions = 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("瀛欒儭娌�");
@@ -212,6 +160,117 @@
{ value: "鍖楁渤娌�", label: "鍖楁渤娌�" },
{ value: "榫欐硥宄潙", label: "榫欐硥宄潙" },
]);
+
+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",
@@ -246,7 +305,17 @@
}));
});
-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);
@@ -290,8 +359,8 @@
.tree-container {
position: relative;
- height: calc(100% - 80px);
- margin-top: 10px;
+ height: calc(100% - 22px);
+ // margin-top: 10px;
overflow-y: auto;
}
@@ -372,6 +441,7 @@
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
+ display: inline-block;
}
:deep(.el-select__placeholder) {
--
Gitblit v1.9.3