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 | 376 ++++++++++++++++++++++++++++++++++++++++------------
1 files changed, 286 insertions(+), 90 deletions(-)
diff --git a/src/components/menu/Device.vue b/src/components/menu/Device.vue
index bd23511..a055fb9 100644
--- a/src/components/menu/Device.vue
+++ b/src/components/menu/Device.vue
@@ -4,71 +4,166 @@
<span>鐩戞祴璁惧</span>
</div>
<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" />
+ <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>
- <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 style="margin-left: 5px">
+ <span style="color: white">閲嶇偣娌燂細</span>
+ <el-select
+ @change="handleChange"
+ v-model="selectValue"
+ placeholder="璇烽�夋嫨閲嶇偣娌�"
+ size="mini"
+ style="width: 240px"
+ >
+ <el-option
+ v-for="item in options"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ />
+ </el-select>
+ </div>
+ <!-- 鍔犺浇閬僵灞傚拰鍐呭瀹瑰櫒 -->
+ <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, watch, onBeforeUnmount, } from "vue";
-import { useRoute, onBeforeRouteUpdate } from 'vue-router';
-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 { 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();
-onMounted(() => {
- loadDeviceList("瀛欒儭娌�");
- initeWaterPrimitiveView()
+
+const isLoading = ref(true); // 鍒濆璁剧疆涓哄姞杞界姸鎬�
+
+onMounted(async () => {
+ try {
+ 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();
+ if (route.path !== "/zhjc") {
+ clearAllPoints();
}
});
-watch(() => simStore.DeviceShowSwitch, (newValue, oldValue) => {
- if (newValue) {
- initializeDevicePoints();
- } else {
- handleCleanup()
- }
-});
+
+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: "榫欐硥宄潙" },
+]);
+
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);
@@ -80,59 +175,102 @@
// console.log(`璁惧鍚嶇О: ${item.id}, 璁惧绫诲瀷: ${item.name}`);
createPoint(item);
});
- deviceEntities.value = list;
};
+
+// 鍗曚釜鐐规覆鏌�
+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 {
- handleCleanup()
- const res = await getDeviceInfo();
- const allDevices = res.data.pageData;
- const devicesInArea = allDevices.filter((item) =>
+ clearAllPoints();
+ isLoading.value = true;
+
+ deviceListAll.value = simStore.devices.filter((item) =>
item.deviceName?.includes(areaName)
);
- deviceListAll.value = devicesInArea;
- deviceListAll.length = 0;
- initializeDevicePoints();
+
+ 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);
- // console.log(deviceListAll.value);
+ initializeDevicePoints();
};
-const selectValue = ref("瀛欒儭娌�");
+// 澶勭悊鍖哄煙鍙樺寲浜嬩欢
+const handleChange1 = async (item) => {
+ if (!item) {
+ ElMessage("璇烽�夋嫨涓�涓尯鍩�");
+ return;
+ }
+ selectValue1.value = item;
+ selectValue.value = "";
+ deviceListAll.value = [];
+ let pageNum = 1;
+ let hasMore = true;
-const options = ref([
- {
- value: "瀛欒儭娌�",
- label: "瀛欒儭娌�",
- },
- {
- value: "楸兼按娲炲悗娌�",
- label: "楸兼按娲炲悗娌�",
- },
- {
- value: "浜庡瑗挎矡",
- label: "浜庡瑗挎矡",
- },
- {
- value: "鍖楁渤娌�",
- label: "鍖楁渤娌�",
- },
- {
- value: "榫欐硥宄潙",
- label: "榫欐硥宄潙",
- },
-]);
+ 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",
@@ -166,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);
@@ -182,7 +331,6 @@
}
}
</script>
-
<style lang="less" scoped>
.device {
position: absolute;
@@ -193,11 +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;
box-sizing: border-box;
- overflow-y: auto;
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 {
@@ -233,21 +437,13 @@
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;
}
@@ -255,7 +451,7 @@
: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) {
--
Gitblit v1.9.3