拓扑图-未连接接口

Signed-off-by: hsshuxian <3049816743@qq.com>

ems-ui-cloud/src/views/basecfg/boundaryRel/index.vue

@@ -2,14 +2,14 @@
   <div class="app-container">
     <el-row :gutter="20">
       <el-col :span="4" :xs="24">
-        <div v-if="activeTab === 'area'">
+        <div v-if="activeTab === 'area'" >
           <div class="head-container">
             <el-input  v-model="areaName" placeholder="请输入区块名称" clearable size="small" prefix-icon="el-icon-search"
                       style="margin-bottom: 20px" />
           </div>
           <div class="head-container">
             <el-tree :data="areaList" :props="defaultProps" :expand-on-click-node="false" :filter-node-method="filterNode" ref="tree"
-                     node-key="id" default-expand-all highlight-current   @node-click="handleNodeClick">
+                     node-key="id" default-expand-all highlight-current   @node-click="handleNodeClick" style="height: calc(100vh - 50px); overflow-y: auto;">
               <template slot-scope="scope">
                 <div class="custom-tree-node">
                   <span>{{ scope.node.label }}</span>
@@ -32,7 +32,20 @@
           </div>
           <div class="head-container">
             <el-tree  :key="treeKey" :data="deptList" :props="defaultDeptProps" :expand-on-click-node="false" :filter-node-method="filterNode" ref="tree"
-                     node-key="deptId" default-expand-all highlight-current   @node-click="handleDeptNodeClick"/>
+                      node-key="deptId" default-expand-all highlight-current   @node-click="handleDeptNodeClick" style="height: calc(100vh - 50px); overflow-y: auto;">
+              <template slot-scope="scope">
+                <div class="custom-tree-node">
+                  <span>{{ scope.node.label }}</span>
+                  <el-button
+                    v-if="scope.node.data.deptId !== 'all' && scope.node.data.children && scope.node.data.children.length > 0"
+                    size="mini"
+                    type="text"
+                    icon="el-icon-map-location"
+                    @click="showDeptTopology(scope.node.data)"
+                  >拓扑图</el-button>
+                </div>
+              </template>
+            </el-tree>
           </div>
         </div>
         <div v-if="activeTab === 'facs'">
@@ -45,10 +58,23 @@
             <el-tree :key="tableKey" :data="facsOptions" :props="defaultFacsProps" :expand-on-click-node="false"
                      :filter-node-method="filterNode" ref="tree"
                      node-key="id" default-expand-all highlight-current @node-click="handleFacsNodeClick"
-            />
+                     style="height: calc(100vh - 50px); overflow-y: auto;">
+              <template slot-scope="scope">
+                <div class="custom-tree-node">
+                  <span>{{ scope.node.label }}</span>
+                  <el-button
+                    v-if="scope.node.data.deptId !== 'all' && scope.node.data.children && scope.node.data.children.length > 0"
+                    size="mini"
+                    type="text"
+                    icon="el-icon-map-location"
+                    @click="showFacsTopology(scope.node.data)"
+                  >拓扑图</el-button>
+                </div>
+              </template>
+            </el-tree>
           </div>
         </div>
-        <div v-if="activeTab === 'device'">
+        <div v-if="activeTab === 'device'" class="device-tree-container">
           <div class="head-container">
             <el-input v-model="areaName" placeholder="请输入区块名称" clearable size="small" prefix-icon="el-icon-search"
                       style="margin-bottom: 20px"
@@ -58,7 +84,20 @@
             <el-tree :key="tableKey" :data="deviceOptions" :props="defaultFacsProps" :expand-on-click-node="false"
                      :filter-node-method="filterNode" ref="tree"
                      node-key="id" default-expand-all highlight-current @node-click="handleDeviceNodeClick"
-            />
+                     class="device-tree">
+              <template slot-scope="scope">
+                <div class="custom-tree-node">
+                  <span>{{ scope.node.label }}</span>
+                  <el-button
+                    v-if="scope.node.data.deptId !== 'all' && scope.node.data.children && scope.node.data.children.length > 0"
+                    size="mini"
+                    type="text"
+                    icon="el-icon-map-location"
+                    @click="showDeviceTopology(scope.node.data)"
+                  >拓扑图</el-button>
+                </div>
+              </template>
+            </el-tree>
           </div>
         </div>
 
@@ -627,14 +666,32 @@ export default {
 
     /**组织机构*/
     handleDeptNodeClick(data) {
-      if (data.deptId === '-1') {
-        this.queryParams.areaCode = null;
-        this.MeterQueryParams.areaCode = null;
+      console.log("组织机构的data", data);
+      if (data.deptId === 'all') {
+        return;
+      }
+      // 递归查找第一个叶子节点
+      const firstLeafNode = this.findFirstLeafDeptNode(data);
+      if (firstLeafNode) {
+        this.queryParams.areaCode = firstLeafNode.deptId;
       } else {
         this.queryParams.areaCode = data.deptId;
       }
       this.getMeterData();
     },
+    findFirstLeafDeptNode(node) {
+      if (!node.children || node.children.length === 0) {
+        return node;
+      }
+      for (let child of node.children) {
+        const leafNode = this.findFirstLeafDeptNode(child);
+        if (leafNode) {
+          return leafNode;
+        }
+      }
+
+      return null;
+    },
     /** 设施节点点击事件 */
     handleFacsNodeClick(data) {
       if (data.id === '-1') {
@@ -656,7 +713,7 @@ export default {
       }
       this.getMeterData();
     },
-    /** 查询区域对象列表 */
+    /** 查询区域对象树列表 */
     getList() {
       this.loading = true;
       listDetailArea(this.queryParams).then(response => {
@@ -665,7 +722,6 @@ export default {
         this.tableKey += 1; // 改变 key 值以强制重新渲染
         // 将“全部”节点添加到区域列表的顶部
         this.areaList.unshift(this.allAreaNode);
-        console.log(" this.areaList", this.areaList)
         this.handleNodeClick(this.areaList[1]);//常泰北区
        this.loading = false;
       });
@@ -686,7 +742,7 @@ export default {
       });
     },
 
-    /** 查询 组织机构（部门)列表 */
+    /** 查询 组织机构（部门)树列表 */
     getDeptList() {
       this.loading = true;
       listDept(this.DeptQueryParams).then(response => {
@@ -695,18 +751,11 @@ export default {
         this.treeKey += 1;
         this.loading = false;
         this.deptList.unshift(this.allDeptNode);
-        this.deptNode();
+        this.handleDeptNodeClick(this.deptList[1]);
       });
     },
-    deptNode() {
-      if (this.deptList.length > 0) {
-        this.handleDeptNodeClick(this.deptList[0]);}
-      if (this.deptList[0].children && this.deptList[0].children.length > 1) {
-        this.handleDeptNodeClick(this.deptList[0].children[1]);
-      }
-    },
 
-    /** 查询能源设施列表 */
+    /** 查询能源设施树列表 */
     getFacsList() {
       this.loading = true;
       getFacsCategoryTree().then(response => {
@@ -724,13 +773,12 @@ export default {
       })
     },
 
-    /** 查询能源设备列表 */
+    /** 查询能源设备树列表 */
     getDeviceList() {
       this.loading = true;
       getTreeByFacs().then(response => {
         this.deviceOptions = response.data;
         this.loading = false;
-        // 首次进入界面时，找到第一个叶子节点并加载数据
         if (this.deviceOptions && this.deviceOptions.length > 0 && this.deviceOptions[0].children) {
           const firstLeafNode = this.findFirstLeafNode(this.deviceOptions[0].children);
           if (firstLeafNode) {
@@ -747,7 +795,7 @@ export default {
         if (!node.children || node.children.length === 0) {
           return node;
         } else {
-          const leafNode = this.findFirstLeafNode(node.children); // 递归查找
+          const leafNode = this.findFirstLeafNode(node.children);
           if (leafNode) return leafNode;
         }
       }
@@ -1114,8 +1162,12 @@ export default {
 .custom-tree-node {
   flex: 1;
   display: flex;
-  justify-content: space-between;
   align-items: center;
+  justify-content: flex-start; /* 调整为 flex-start */
+}
+
+.custom-tree-node .el-button {
+  margin-left: 8px; /* 添加一些左边距 */
 }
 .topology-chart-container {
   overflow-x: auto;
@@ -1126,4 +1178,13 @@ export default {
   width: 8000px;
   height: 600px;
 }
+.device-tree-container {
+  height: calc(100vh - 50px);
+  overflow: auto;
+}
+
+.device-tree {
+  font-size: 12px;
+  width: 100%;
+}
 </style>