修改看板

src/views/board/index.vue

@@ -6,13 +6,18 @@
     </div>
     <div class="title">青岛胶东机场行李输送线</div>
     <div class="item1">
-      <!--      <div class="alm">-->
+      <div class="alm">
-      <!--        <div v-for="i in Object.keys(almData.E0013)">-->
+        <div v-for="i in Object.keys(almData.E0013)">
-      <!--          <div v-for="ii in  almData.E0013[i]">-->
+          <div v-for="ii in  almData.E0013[i]" class="almSpan">
-      <!--            {{ ii }}-->
+            {{ ii }}
-      <!--          </div>-->
+          </div>
-      <!--        </div>-->
+        </div>
-      <!--      </div>-->
+        <div v-for="i in Object.keys(almData.E0014)">
+          <div v-for="ii in  almData.E0014[i]" class="almSpan">
+            {{ ii }}
+          </div>
+        </div>
+      </div>
       <div class="line"></div>
       <div class="table1">
         <div class="th1">设备名称</div>
@@ -58,6 +63,23 @@
       </div>
     </div>
     <div class="item2">
+      <div class="alm">
+        <div v-for="i in Object.keys(almData.E0002)">
+          <div v-for="ii in  almData.E0002[i]" class="almSpan">
+            {{ ii }}
+          </div>
+        </div>
+        <div v-for="i in Object.keys(almData.E0003)">
+          <div v-for="ii in  almData.E0003[i]" class="almSpan">
+            {{ ii }}
+          </div>
+        </div>
+        <div v-for="i in Object.keys(almData.E0004)">
+          <div v-for="ii in  almData.E0004[i]" class="almSpan">
+            {{ ii }}
+          </div>
+        </div>
+      </div>
       <div class="line"></div>
       <div class="table1">
         <div class="th1">设备名称</div>
@@ -121,6 +143,13 @@
       </div>
     </div>
     <div class="item3">
+      <div class="alm">
+        <div v-for="i in Object.keys(almData.E0001)">
+          <div v-for="ii in  almData.E0001[i]" class="almSpan">
+            {{ ii }}
+          </div>
+        </div>
+      </div>
       <div class="line"></div>
       <div class="table1">
         <div class="th1">设备名称</div>
@@ -148,6 +177,18 @@
       </div>
     </div>
     <div class="item4">
+      <div class="alm">
+        <div v-for="i in Object.keys(almData.E0005)">
+          <div v-for="ii in  almData.E0005[i]" class="almSpan">
+            {{ ii }}
+          </div>
+        </div>
+        <div v-for="i in Object.keys(almData.E0006)">
+          <div v-for="ii in  almData.E0006[i]" class="almSpan">
+            {{ ii }}
+          </div>
+        </div>
+      </div>
       <div class="line"></div>
       <div class="table1">
         <div class="th1">设备名称</div>
@@ -253,7 +294,7 @@ export default {
           // this.$set(this.almData[deviceID], e.deviceParam.monitorId, e.alarmRules.map(v => {
           //   return v.ruleName
           // }))
-          this.$set(this.almData[deviceID], e.deviceParam.monitorId, ['报警1', '报警2'])
+          this.$set(this.almData[deviceID], e.deviceParam.monitorId, ['报警信息'])
         }
         console.log(this.deviceData.E0014)
       }
@@ -279,6 +320,12 @@ export default {
   right: 0%;
   bottom: 27%;
 
+  .alm {
+    position: absolute;
+    top: 100%;
+    right: 0%;
+  }
+
   .line {
     position: absolute;
     top: 100%;
@@ -295,6 +342,12 @@ export default {
   right: 24%;
   bottom: 25%;
 
+  .alm {
+    position: absolute;
+    top: 100%;
+    right: 0%;
+  }
+
   .line {
     position: absolute;
     top: 100%;
@@ -311,6 +364,12 @@ export default {
   left: 40%;
   bottom: 25%;
 
+  .alm {
+    position: absolute;
+    top: 100%;
+    left: 0%;
+  }
+
   .line {
     position: absolute;
     top: 100%;
@@ -328,6 +387,13 @@ export default {
   bottom: 66%;
 
 
+  .alm {
+    position: absolute;
+    top: 100%;
+    left: 60%;
+    transform: translateX(-50%);
+  }
+
   .line {
     position: absolute;
     top: 100%;
@@ -347,16 +413,10 @@ export default {
   transform: translateX(-50%);
   color: #fff;
 
-  .alm {
-    position: absolute;
-    bottom: 0;
-    left: 50%;
-    transform: translateX(-50%);
-  }
 
   .table1 {
     width: 100%;
-    height: 55px;
+    height: 50px;
     background-image: url(~@/assets/images/table1.jpg);
     background-repeat: no-repeat;
     background-size: 100% 100%;
@@ -364,8 +424,8 @@ export default {
     .th1, .th2 {
       white-space: nowrap;
       display: inline-block;
-      line-height: 55px;
+      line-height: 50px;
-      min-height: 55px;
+      min-height: 50px;
       font-size: 18px;
       font-weight: 700;
       text-align: center;
@@ -433,4 +493,20 @@ export default {
   .data {
   }
 }
+
+.alm {
+  animation: colourSwitching 0.5s infinite;
+}
+
+@keyframes colourSwitching {
+  0% {
+    color: #ffff00;
+  }
+  50% {
+    color: #ff0000;
+  }
+  100% {
+    color: #ffff00;
+  }
+}
 </style>