修改看板

src/views/board/index.vue

@@ -13,13 +13,13 @@
     <div class="title">青岛胶东机场行李输送线</div>
     <div class="item1">
       <div class="line"></div>
-      <!--      <div style="display: inline-block">-->
+      <div style="display: inline-block">
-      <!--        <div v-for="i in Object.keys(deviceData.E0013)">-->
+        <div v-for="i in Object.keys(deviceData.E0013)">
-      <!--          <div v-for="ii in Object.keys(deviceData.E0013[i])" v-if="deviceData.E0013[i][ii]>0">-->
+          <div v-for="ii in Object.keys(deviceData.E0013[i])" v-if="deviceData.E0013[i][ii]>0">
-      <!--            <div class="data">{{ i }}{{ deviceMap[ii] }}:{{ deviceData.E0013[i][ii] }}</div>-->
+            <div class="data">{{ i }}{{ deviceMap[ii] }}:{{ deviceData.E0013[i][ii] }}</div>
-      <!--          </div>-->
+          </div>
-      <!--        </div>-->
+        </div>
-      <!--      </div>-->
+      </div>
       <div style="display: inline-block">
         <div v-for="i in Object.keys(deviceData.E0014)">
           <div v-for="ii in Object.keys(deviceData.E0014[i])" v-if="deviceData.E0014[i][ii]>0">
@@ -28,6 +28,45 @@
         </div>
       </div>
     </div>
+    <div class="item2">
+      <div class="line"></div>
+      <div v-for="i in Object.keys(deviceData.E0002)">
+        <div v-for="ii in Object.keys(deviceData.E0002[i])" v-if="deviceData.E0002[i][ii]>0">
+          <div class="data">{{ i }}{{ deviceMap[ii] }}:{{ deviceData.E0002[i][ii] }}</div>
+        </div>
+      </div>
+      <div v-for="i in Object.keys(deviceData.E0003)">
+        <div v-for="ii in Object.keys(deviceData.E0003[i])" v-if="deviceData.E0003[i][ii]>0">
+          <div class="data">{{ i }}{{ deviceMap[ii] }}:{{ deviceData.E0003[i][ii] }}</div>
+        </div>
+      </div>
+      <div v-for="i in Object.keys(deviceData.E0004)">
+        <div v-for="ii in Object.keys(deviceData.E0004[i])" v-if="deviceData.E0004[i][ii]>0">
+          <div class="data">{{ i }}{{ deviceMap[ii] }}:{{ deviceData.E0004[i][ii] }}</div>
+        </div>
+      </div>
+    </div>
+    <div class="item3">
+      <div class="line"></div>
+      <div v-for="i in Object.keys(deviceData.E0001)">
+        <div v-for="ii in Object.keys(deviceData.E0001[i])" v-if="deviceData.E0001[i][ii]>0">
+          <div class="data">{{ i }}{{ deviceMap[ii] }}:{{ deviceData.E0001[i][ii] }}</div>
+        </div>
+      </div>
+    </div>
+    <div class="item4">
+      <div class="line"></div>
+      <div v-for="i in Object.keys(deviceData.E0005)">
+        <div v-for="ii in Object.keys(deviceData.E0005[i])" v-if="deviceData.E0005[i][ii]>0">
+          <div class="data">{{ i }}{{ deviceMap[ii] }}:{{ deviceData.E0005[i][ii] }}</div>
+        </div>
+      </div>
+      <div v-for="i in Object.keys(deviceData.E0006)">
+        <div v-for="ii in Object.keys(deviceData.E0006[i])" v-if="deviceData.E0006[i][ii]>0">
+          <div class="data">{{ i }}{{ deviceMap[ii] }}:{{ deviceData.E0006[i][ii] }}</div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -102,11 +141,34 @@ export default {
 }
 
 .item1 {
-  position: absolute;
+  right: -3%;
-  right: 4%;
+  width: 14vw;
-  width: 20vw;
   bottom: 25%;
+}
+
+.item2 {
+  right: 18%;
+  width: 14vw;
+  bottom: 25%;
+}
+
+.item3 {
+  right: 60%;
+  width: 14vw;
+  bottom: 25%;
+}
+
+.item4 {
+  right: 75%;
+  width: 14vw;
+  bottom: 65%;
+}
+
+.item1, .item2, .item3, .item4 {
+  position: absolute;
   border: 1px solid white;
+  transform: translateX(-50%);
+  color: #fff;
 
   .line {
     position: absolute;