拓扑图样式修改

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

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

@@ -14,7 +14,7 @@
                 <div class="custom-tree-node">
                   <span>{{ scope.node.label }}</span>
                   <el-button
-                    v-if="scope.node.data.id !== 'all'"
+                    v-if="scope.node.data.id !== 'all' && scope.node.data.children && scope.node.data.children.length > 0"
                     size="mini"
                     type="text"
                     icon="el-icon-map-location"
@@ -258,7 +258,8 @@
             </el-table-column>
           </el-table>
         </div>
-     <!--设备    -->
+
+     <!--设备 -->
         <div v-if="activeTab === 'device'">
           <el-tabs  v-model="DeviceQueryParams.deviceCategory" @tab-click="deviceCategoryChange">
             <el-tab-pane label="产能设备" name="E"></el-tab-pane>
@@ -330,7 +331,6 @@
           <el-tab-pane label="电表" name="electricMeter"></el-tab-pane>
           <el-tab-pane label="水表" name="waterMeter"></el-tab-pane>
         </el-tabs>
-
         <!-- 水表和电表的已绑定和未绑定表格 -->
         <SubTitle title="已绑定列表" />
         <el-table  v-loading="loading"  :data="Bound" style="width: 100%">
@@ -393,10 +393,11 @@
       </el-dialog>
     </el-row>
     <!-- 拓扑图弹框 -->
-    <el-dialog :visible.sync="topologyDialogVisible" title="拓扑图" width="1200px">
-      <div ref="topologyChart" style="width: 100%; height: 600px;"></div>
+    <el-dialog :visible.sync="topologyDialogVisible" title="拓扑图" width="1500px" @open="scrollToCenter">
+      <div class="topology-chart-container" ref="topologyChartContainer">
+        <div ref="topologyChart" class="topology-chart" style="width: 8000px; height: 600px;"></div>
+      </div>
     </el-dialog>
-
   </div>
 </template>
 
@@ -421,7 +422,7 @@ export default {
   components: { SubTitle, Treeselect },
   data() {
     return {
-      topologyDialogVisible: false, // 控制拓扑图弹框的显示与隐藏
+      topologyDialogVisible: false,
       activeTab: 'area',
       areaOptions: [],
       organOptions: [],
@@ -612,108 +613,6 @@ export default {
 
   },
   methods: {
-    showTopology(data) {
-      this.topologyDialogVisible = true;
-      this.$nextTick(() => {
-        getBoundaryTreeByArea(data.areaCode).then(response => {
-          const topologyData = response.data;
-          console.log("拓扑图接口获取数据",topologyData);
-          this.initTreeECharts(topologyData);
-        });
-      });
-    },
-    initTreeECharts(topologyData) {
-      const chartDom = this.$refs.topologyChart;
-      const myChart = echarts.init(chartDom);
-
-      // 递归处理拓扑图数据，生成echarts需要的数据格式
-      const processTopologyData = (data) => {
-        const hasBoundDevices = data.bindElecMeterDevs && data.bindElecMeterDevs.length > 0;
-        const nodeColor = hasBoundDevices ? '#99e170' : '#D3D3D3';
-        return {
-          name: data.objName, // 节点名称取objName
-          children: data.children ? data.children.map(child => processTopologyData(child)) : [],
-          value: [data.bindElecMeterDevs].flat().join(', '),
-          itemStyle: { // 设置节点样式
-            borderColor: '#D8D3D1',
-            borderWidth: 1,
-            color: nodeColor
-          }
-        };
-      };
-
-      // 处理根节点数据
-      const processedData = processTopologyData(topologyData);
-
-      // 指定图表的配置项和数据
-      const option = {
-
-        tooltip: {
-          trigger: 'item',
-          triggerOn: 'mousemove',
-          formatter: function (params) {
-            let bindElecMeterDevs = params.data.value;
-            if (!Array.isArray(bindElecMeterDevs)) {
-              bindElecMeterDevs = [bindElecMeterDevs];
-            }
-            const bindElecMeterDevsStr = bindElecMeterDevs.length > 0 ? bindElecMeterDevs.join(', ') : '无';
-            return `绑定电表：${bindElecMeterDevsStr}`;
-          }
-        },
-        series: [
-          {
-             name: '拓扑图',
-            type: 'tree',
-            layout: 'compactBox',
-            orient: 'TB', // 从上到下的布局
-            data: [processedData], // 直接使用传入的数据
-            top: '5%',
-            left: '1%',
-            bottom: '5%',
-            right: '5%',
-            symbol: 'rect', // 设置节点形状为长方形
-            symbolSize: [100, 40],
-            label: {
-              position: 'inside',
-              verticalAlign: 'middle',
-              align: 'center',
-              fontSize: 12,
-
-            },
-
-            leaves: {
-              label: {
-                position: 'inside', //  叶子节点标签位置在内部
-                verticalAlign: 'middle',
-                align: 'center'
-              }
-            },
-            expandAndCollapse: true,
-            animationDuration: 550,
-            animationDurationUpdate: 750,
-            itemStyle: {
-              borderColor: '#555',
-              borderWidth: 1,
-              gapWidth: 10, // 增加节点之间的间隔
-            },
-            edgeLabel: {
-              position: 'middle',
-              fontSize: 10
-            },
-            emphasis: {
-              itemStyle: {
-                borderColor: '#333',
-                borderWidth: 2
-              }
-            },
-
-          }
-        ]
-      };
-      myChart.setOption(option);
-    },
-
-
 
     getAreaFacsTree(areaCode, recursion) {
       areaTreeSelect(areaCode, recursion).then(response => {
@@ -1285,6 +1184,106 @@ export default {
         }
       })
     },
+    /**拓扑图*/
+    showTopology(data) {
+      this.topologyDialogVisible = true;
+      this.$nextTick(() => {
+        getBoundaryTreeByArea(data.areaCode).then(response => {
+          const topologyData = response.data;
+          console.log("拓扑图接口获取数据",topologyData);
+          this.initTreeECharts(topologyData);
+        });
+      });
+    },
+    initTreeECharts(topologyData) {
+      const chartDom = this.$refs.topologyChart;
+      const myChart = echarts.init(chartDom);
+
+      // 递归处理拓扑图数据，生成echarts需要的数据格式
+      const processTopologyData = (data) => {
+        const hasBoundDevices = data.bindElecMeterDevs && data.bindElecMeterDevs.length > 0;
+        const nodeColor = hasBoundDevices ? '#99e170' : '#D3D3D3';
+        const bindElecMeterDevsStr = hasBoundDevices
+          ? `绑定电表：${data.bindElecMeterDevs.join('\n ')}`
+          : '绑定电表：无';
+        return {
+          name: `${data.objName}\n${bindElecMeterDevsStr}`,
+          children: data.children ? data.children.map(child => processTopologyData(child)) : [],
+          value: [data.bindElecMeterDevs].flat().join(', '),
+          itemStyle: { // 设置节点样式
+            borderColor: '#D8D3D1',
+            borderWidth: 1,
+            color: nodeColor
+          }
+        };
+      };
+
+      // 处理根节点数据
+      const processedData = processTopologyData(topologyData);
+
+      // 指定图表的配置项和数据
+      const option = {
+
+        tooltip: {
+          trigger: 'item',
+          triggerOn: 'mousemove',
+        },
+        series: [
+          {
+            name: '拓扑图',
+            type: 'tree',
+            layout: 'orthogonal',
+            orient: 'TB', // 从上到下的布局
+            roam: true,
+            data: [processedData], // 直接使用传入的数据
+            symbol: 'rect', // 设置节点形状为长方形
+            symbolSize: [120, 70],
+            label: {
+              position: 'inside',
+              verticalAlign: 'middle',
+              align: 'center',
+              fontSize: 12,
+
+            },
+
+            leaves: {
+              label: {
+                position: 'inside', //  叶子节点标签位置在内部
+                verticalAlign: 'middle',
+                align: 'center'
+              }
+            },
+            expandAndCollapse: true,
+            animationDuration: 550,
+            animationDurationUpdate: 750,
+            itemStyle: {
+              borderColor: '#555',
+              borderWidth: 1,
+            },
+            edgeLabel: {
+              position: 'middle',
+              fontSize: 10
+            },
+            emphasis: {
+              itemStyle: {
+                borderColor: '#333',
+                borderWidth: 2
+              }
+            },
+          }
+        ]
+      };
+      myChart.setOption(option);
+    },
+    scrollToCenter() {
+      this.$nextTick(() => {
+        const container = this.$refs.topologyChartContainer;
+        container.scrollTo(container.scrollWidth / 2 - container.offsetWidth / 2, 0);
+      });
+    },
+
+
+
     getTagStyle(tagName) {
       // 从tagName找到对应的tagCode
       const tagCode = this.emsTagOptions.find(tag => tag.label === tagName)?.value;
@@ -1311,4 +1310,13 @@ export default {
   justify-content: space-between;
   align-items: center;
 }
+.topology-chart-container {
+  overflow-x: auto; // 开启水平滚动条
+  width: 100%; // 容器宽度为100%，即弹框的宽度
+}
+
+.topology-chart {
+  width: 8000px; // 图表容器宽度为8000px
+  height: 600px; // 图表容器高度为600px
+}
 </style>