fix: 设备拓扑

src/pages/Iot/device/topology.vue

@@ -52,27 +52,28 @@
               class="rich-media-node"
             >
               <a-col :span="24"  >
-                <a-space>
-                  📦
-                    <div>
-                    {{node.value}}
-                    {{node.modelLabel}}
-                    {{node.deviceLabel}}
-                  </div>
-                </a-space>
+                <!--    📦 -->
+                <div class="label" >
+                  <div style="width: 100%; text-align: center;" >{{node.value}}</div>
+                  <div style="width: 100%; text-align: center;" v-if="node.modelLabel" > 模型名： {{node.modelLabel}}</div>
+                  <div style="width: 100%; text-align: center;" v-if="node.deviceLabel" >设备名:  {{node.deviceLabel}}</div>
+                </div>
               </a-col>
-              <a-col>
-                <div>
-                  {{node.transportType}}
-                  {{node.payloadType}}
+              <a-col :span="24" >
+                <div >
+                  <div v-if="node.transportType" >协议：{{node.transportType}}</div>
+                  <div v-if="node.payloadType" >格式：{{node.payloadType}}</div>
                 </div>
                 <div v-if="node.deviceStatus" class="deviceStatus" >
+                  状态：
                   <a-tag :color="DeviceContriller.deviceStatusMap.get(node.deviceStatus)?.color" >
                     {{ DeviceContriller.deviceStatusMap.get(node.deviceStatus)?.name}}
                   </a-tag>
                 </div>
-                <div v-if="node.deviceStatus && node.lastConnectTs">
-                  {{ dayjs(node.lastConnectTs).format('YYYY-MM-DD HH:mm:ss') }} ~ {{ dayjs(node.lastActivityTs).format('YYYY-MM-DD HH:mm:ss')}}
+                <div v-if="node.deviceStatus && node.lastConnectTs"  class="ts">
+                  <div>时间：{{ dayjs(node.lastConnectTs).format('YYYY-MM-DD HH:mm:ss') }}</div>
+                  <div style="width: 100%;text-align: center;" >~</div>
+                  <div style="width: 100%;text-align: right;" >{{ dayjs(node.lastActivityTs).format('YYYY-MM-DD HH:mm:ss')}}</div>
                 </div>
               </a-col>
               <!-- {{node.deviceLabel}} -->
@@ -123,12 +124,12 @@ const treeData = reactive({
     name: '产品模型',
     value: '产品模型'
   },
-  treeConfig: { nodeWidth: 120, nodeHeight: 80, levelHeight: 200 }
+  treeConfig: { nodeWidth: 190, nodeHeight: 80, levelHeight: 200 }
 }
 )
 
 const zoomIn = () => {
-  zoomCount.value += 10
+  zoomCount.value += 5
 
   try {
     vueTreeRef.value.zoomIn()
@@ -138,7 +139,7 @@ const zoomIn = () => {
 }
 
 const zoomOut = () => {
-  zoomCount.value -= 10
+  zoomCount.value -= 5
   try {
     vueTreeRef.value.zoomOut()
   } catch (error) {
@@ -231,6 +232,7 @@ onMounted(() => {
 }
 
 .rich-media-node {
+  width: 300px;
   padding: 8px;
   color: white;
   background-color: #1890ff;
@@ -239,11 +241,18 @@ onMounted(() => {
     display: flex;
     justify-content: center;
     align-items: center;
+    .label {
+    }
     .deviceStatus {
       display: flex;
       justify-content: center;
       align-items: center;
     }
+    .ts {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
   }
 }