From cd5080b2e3d84c274f90bee762348be3f89e3c29 Mon Sep 17 00:00:00 2001
From: guonan <guonan201020@163.com>
Date: 星期四, 29 五月 2025 18:03:20 +0800
Subject: [PATCH] 修改
---
src/components/menu/Device.vue | 183 ++++++++++++++++++++++++++++++++-------------
1 files changed, 129 insertions(+), 54 deletions(-)
diff --git a/src/components/menu/Device.vue b/src/components/menu/Device.vue
index 01b1b31..a566a28 100644
--- a/src/components/menu/Device.vue
+++ b/src/components/menu/Device.vue
@@ -4,13 +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="Select"
+ 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"
+ size="mini"
style="width: 240px"
>
<el-option
@@ -21,23 +38,33 @@
/>
</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"
+ 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">{{ node.label }}</span>
+ </span>
+ <span v-else class="device-tree-category">
+ {{ node.label }} ({{ data.children.length }})
+ </span>
+ </template>
+ </el-tree>
+ </div>
</div>
</div>
</template>
@@ -50,12 +77,20 @@
import { getDeviceInfo } from "@/api/hpApi";
import { initeWaterPrimitiveView } from "@/utils/water"; //鐩告満flyTo鍑芥暟锛屽悗缁璷ptions鍒楄〃涓湁瀵瑰簲缁忕含搴﹀悗寮冪敤
import { useSimStore } from "@/store/simulation";
+import { Loading } from "@element-plus/icons-vue";
+
const simStore = useSimStore();
+
+const isLoading = ref(true); // 鍒濆璁剧疆涓哄姞杞界姸鎬�
+
onMounted(async () => {
- // 鍔犺浇鎵�鏈夌殑闅愭偅鐐逛俊鎭�
- await getData();
- loadDeviceList("瀛欒儭娌�");
- initeWaterPrimitiveView();
+ try {
+ await getData();
+ await loadDeviceList(selectValue.value);
+ initeWaterPrimitiveView();
+ } finally {
+ isLoading.value = false;
+ }
});
onBeforeRouteUpdate((to, from, next) => {
@@ -81,6 +116,7 @@
}
}
);
+
const deviceListAll = ref([]);
const deviceEntities = ref([]);
const handleCleanup = () => {
@@ -111,6 +147,7 @@
// 鏍规嵁鍖哄煙鍚嶇О鍔犺浇璁惧鍒楄〃
const loadDeviceList = async (areaName) => {
try {
+ isLoading.value = true;
handleCleanup();
// const res = await getDeviceInfo();
// const allDevices = res.data.pageData;
@@ -122,6 +159,8 @@
initializeDevicePoints();
} catch (error) {
console.error("鍔犺浇璁惧淇℃伅澶辫触", error);
+ } finally {
+ isLoading.value = false;
}
};
@@ -136,29 +175,18 @@
// console.log(deviceListAll.value);
};
+const selectValue1 = ref("鍖椾含甯�");
+
+const BJoptions = ref([]);
+
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 treeProps = {
@@ -193,6 +221,7 @@
children: typeMap[typeName],
}));
});
+
function handleTreeNodeClick(data) {
// 鍙湁璁惧鑺傜偣鎵嶅鐞嗙偣鍑讳簨浠�
if (!data.children) {
@@ -209,7 +238,6 @@
}
}
</script>
-
<style lang="less" scoped>
.device {
position: absolute;
@@ -220,11 +248,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% - 80px);
+ 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 {
@@ -260,21 +344,12 @@
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;
}
-// 淇濇寔鍘熸湁鐨勯�夋嫨鍣ㄦ牱寮�
:deep(.el-select__placeholder) {
color: white;
}
@@ -282,7 +357,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