临时提交

src/api/baseUrl.js

@@ -4,7 +4,7 @@ console.log(process.env.NODE_ENV);
 switch (process.env.NODE_ENV) {
   case "development":
     // baseUrl = "http://192.168.9.234:20080"; // 测试环境url
-    baseUrl = "http://192.168.9.149:20080"; // 测试环境url
+    baseUrl = "http://192.168.9.62:20080"; // 测试环境url
     // baseUrl = "http://192.168.9.82:8080"; // 测试环境url
     // baseUrl = "http://192.168.9.61:8086";
     // baseUrl = 'http://vion-panda.51vip.biz:52510';

src/views/ops/equipment_manage.vue22 → src/views/ops/equipment_manage.vue2

@@ -21,7 +21,113 @@
     <!-- 外层内容 -->
     <div class="content-box" id="eqcontentbox">
       <div class="left-box">
-        <div id="drawing"></div>
+        <div
+          class="master-box"
+          v-if="devData.length > 0"
+          @click="getSubDev(devData[0])"
+        >
+          <div>{{ devData[0].device_name }}</div>
+          <div>{{ devData[0].out_ip }}</div>
+        </div>
+        <div class="submast-box">
+          <div
+            :class="{
+              'submast-item': true,
+              'top-line': true,
+              onceline: subDevData.length == 1
+            }"
+            v-for="(subitem, index) in subDevData"
+            :key="index"
+            ref="subitem"
+            @click.stop="getleval($event, index, subitem)"
+            :style="
+              `background:rgba(${setsubcolor(
+                index
+              )},.2);borderColor:rgb(${setsubcolor(index)})`
+            "
+          >
+            <div
+              :class="{ 'sub-line': index == curindex && slaveData.length > 0 }"
+              :style="`background:${curlevalbordercolor}`"
+            ></div>
+            <div>{{ subitem.device_name }}</div>
+            <div>{{ subitem.out_ip }}</div>
+          </div>
+        </div>
+        <!-- 叶子节点 -->
+        <div
+          v-if="istop && slaveData.length > 0"
+          :style="`top:${topheihgt + 1}px;left:${loopitem * 14 + 11.01}vw`"
+          v-for="(loopitem, loopindex) in Math.ceil(slaveData.length / 6)"
+          :key="loopindex"
+          class="leval-box"
+        >
+          <span
+            class="leval-top-line"
+            :style="`background:${curlevalbordercolor}`"
+          ></span>
+          <div
+            :class="{
+              'leval-submast-item': true,
+              'top-line': istop,
+              'bottom-line': !istop,
+              offline: item.online == 0
+            }"
+            v-for="(item, cindex) in setslaveData(slaveData, loopindex)"
+            :key="cindex"
+            :style="
+              `background:${curlevalcolor};borderColor:${curlevalbordercolor}`
+            "
+          >
+            <span
+              class="left-line"
+              :style="`background:${curlevalbordercolor}`"
+            ></span>
+            <span
+              class="vertical-line"
+              :style="`background:${curlevalbordercolor}`"
+            ></span>
+            <div>{{ item.device_name }}</div>
+            <div>{{ item.in_ip }}</div>
+          </div>
+        </div>
+        <div
+          v-if="!istop && slaveData.length > 0"
+          :style="`bottom:${bottomHeight + 5}px;left:${loopitem * 14 + 11}vw`"
+          v-for="(loopitem, loopindex) in Math.ceil(slaveData.length / 6)"
+          :key="loopitem"
+          class="leval-bottom-box"
+        >
+          <span
+            class="leval-bottom-line"
+            :style="`background:${curlevalbordercolor}`"
+          ></span>
+          <div
+            ref="submast"
+            :class="{
+              'leval-submast-item': true,
+              'top-line': istop,
+              'bottom-line': !istop,
+              offline: item.online == 0
+            }"
+            v-for="(item, xindex) in setslaveData(slaveData, loopindex)"
+            :key="xindex"
+            :style="
+              `background:${curlevalcolor};borderColor:${curlevalbordercolor}`
+            "
+          >
+            <span
+              class="left-line"
+              :style="`background:${curlevalbordercolor}`"
+            ></span>
+            <span
+              class="vertical-line"
+              :style="`background:${curlevalbordercolor}`"
+            ></span>
+            <div>{{ item.device_name }}</div>
+            <div>{{ item.in_ip }}</div>
+          </div>
+        </div>
       </div>
       <div class="right-box">
         <div class="info-box">
@@ -242,7 +348,6 @@ export default {
         this.devData = res.list_data;
         this.curDevType = "master";
         this.curDevData = res.list_data[0];
-        this.createdMaster();
       });
     },
     getSubDev(dev) {
@@ -253,22 +358,6 @@ export default {
         this.subDevData = res.list_data;
       });
     },
-    createdMaster() {
-      var draw = SVG()
-        .addTo("#drawing")
-        .size("100%", "100%");
-      var nested = draw
-        .nested()
-        .size(100, 40)
-        .move(50, 100);
-      var rect = nested.rect(100, 40).attr({ fill: "#f06", radius: 5 });
-      var text = nested.text(function(add) {
-        add.tspan("Lorem ipsum dolor sit amet ").newLine();
-      });
-      nested.click(function() {
-        alert(1);
-      });
-    },
     setslaveData(data, index) {
       return data.slice(index * 6, 6 * (index + 1));
     },