修改供电系统表格格式

src/components/power_supply/configImg/Table.vue

@@ -1,6 +1,5 @@
 <template>
   <div id="table">
-
     <div class="header">
       <img
         src="@/assets/img/供电系统组态图.svg"
@@ -217,21 +216,32 @@
         :offset="6"
         :span="7"
       >
-      <!-- 底部左边 -->
+        <!-- 底部左边 -->
         <div class="grid-content bg-purple">
           <table class="table2">
             <tr align="left">
-              
-              <td><span>Ua(KV):</span><span>{{bottom.Ua1}}KV</span></td>
-              <td><span>Uab(KV):</span><span>{{bottom.Uab1}}KV</span></td>
+              <td>
+                <span>Ua(KV):</span><span>{{ bottom.Ua1 }}KV</span>
+              </td>
+              <td>
+                <span>Uab(KV):</span><span>{{ bottom.Uab1 }}KV</span>
+              </td>
             </tr>
             <tr align="left">
-              <td><span>Ub(KV):</span><span>{{bottom.Ub1}}KV</span></td>
-              <td><span>Ubc(KV):</span><span>{{bottom.Ubc1}}KV</span></td>
+              <td>
+                <span>Ub(KV):</span><span>{{ bottom.Ub1 }}KV</span>
+              </td>
+              <td>
+                <span>Ubc(KV):</span><span>{{ bottom.Ubc1 }}KV</span>
+              </td>
             </tr>
             <tr align="left">
-              <td><span>Uc(KV):</span><span>{{bottom.Uc1}}KV</span></td>
-              <td><span>Uca(KV):</span><span>{{bottom.Uca1}}KV</span></td>
+              <td>
+                <span>Uc(KV):</span><span>{{ bottom.Uc1 }}KV</span>
+              </td>
+              <td>
+                <span>Uca(KV):</span><span>{{ bottom.Uca1 }}KV</span>
+              </td>
             </tr>
           </table>
         </div>
@@ -241,17 +251,28 @@
         <div class="grid-content bg-purple">
           <table class="table2">
             <tr align="left">
-              
-              <td><span>Ua(KV):</span><span>{{bottom.Ua2}}KV</span></td>
-              <td><span>Uab(KV):</span><span>{{bottom.Uab2}}KV</span></td>
+              <td>
+                <span>Ua(KV):</span><span>{{ bottom.Ua2 }}KV</span>
+              </td>
+              <td>
+                <span>Uab(KV):</span><span>{{ bottom.Uab2 }}KV</span>
+              </td>
             </tr>
             <tr align="left">
-              <td><span>Ub(KV):</span><span>{{bottom.Ub2}}KV</span></td>
-              <td><span>Ubc(KV):</span><span>{{bottom.Ubc2}}KV</span></td>
+              <td>
+                <span>Ub(KV):</span><span>{{ bottom.Ub2 }}KV</span>
+              </td>
+              <td>
+                <span>Ubc(KV):</span><span>{{ bottom.Ubc2 }}KV</span>
+              </td>
             </tr>
             <tr align="left">
-              <td><span>Uc(KV):</span><span>{{bottom.Uc2}}KV</span></td>
-              <td><span>Uca(KV):</span><span>{{bottom.Uca2}}KV</span></td>
+              <td>
+                <span>Uc(KV):</span><span>{{ bottom.Uc2 }}KV</span>
+              </td>
+              <td>
+                <span>Uca(KV):</span><span>{{ bottom.Uca2 }}KV</span>
+              </td>
             </tr>
           </table>
         </div>
@@ -308,28 +329,28 @@ export default {
     },
     getData(data, type) {
       console.log(data[0]);
-      this.load.splice(0, 1, data[0]["fuhe_after"]);
-      this.cos.splice(0, 1, data[0]["gonglvyinshu_after"]);
-      this.current.splice(0, 1, data[0]["dianliu_after"]);
-      this.voltage.splice(0, 1, data[0]["dianya_after"]);
+      // this.load.splice(0, 1, data[0]["fuhe_after"]);
+      // this.cos.splice(0, 1, data[0]["gonglvyinshu_after"]);
+      // this.current.splice(0, 1, data[0]["dianliu_after"]);
+      // this.voltage.splice(0, 1, data[0]["dianya_after"]);
       let data1 = [];
       let data2 = [];
       let data3 = [];
       let data4 = [];
-      for (let i = 0; i < 13; i++) {
+      for (let i = 0; i < 14; i++) {
         data1.push(this.getRandomNum(5000, 5200));
         data2.push(this.getRandomNum(10, 15));
         data3.push(this.getRandomNum(300, 400));
         data4.push(Math.random().toFixed(1));
       }
       // 伪造数据
-      this.load.splice(1, 13, ...data1);
+      this.load.splice(0, 13, ...data1);
 
-      this.voltage.splice(1, 13, ...data2);
+      this.voltage.splice(0, 13, ...data2);
 
-      this.current.splice(1, 13, ...data3);
+      this.current.splice(0, 13, ...data3);
 
-      this.cos.splice(1, 13, ...data4);
+      this.cos.splice(0, 13, ...data4);
     },
     initWebSocket(websocket, type) {
       // 连接错误
@@ -391,7 +412,7 @@ export default {
   /* position: absolute; */
 }
 
-.table2 span:nth-of-type(even){
+.table2 span:nth-of-type(even) {
   display: inline-block;
   color: #4adefe;
   width: 100px;
@@ -417,7 +438,7 @@ export default {
   width: 100%;
   height: 400px;
   transform: translateY(-70%);
-  margin-left: 20px;
+  margin-left: 30px;
 }
 #imgSwitch {
   width: 95%;