修改看板

src/views/board/index.vue

@@ -1,69 +1,194 @@
 <template>
   <div style="height: 100vh;width: 100vw;overflow: hidden;position: relative;">
     <div
-        :style="`width:100%;height:100%;background-image:url(${bg});background-repeat: no-repeat;background-size: 100% 100%;`">
+      :style="`width:100%;height:100%;background-image:url(${bg});background-repeat: no-repeat;background-size: 100% 100%;`">
       <!--      <img :src="model" alt="">-->
     </div>
-    <div style="position:absolute;top: 10%;left: 1%;width: 98%;height: 88%"
-         :style="`background-image:url(${bg1});background-repeat: no-repeat;background-size: 100% 100%;`">
-    </div>
-    <div style="position:absolute;top: 65%;left: 50%;width: 100%;height: 100%;transform: translate(-50%, -50%);"
-         :style="`background-image:url(${model});background-repeat: no-repeat;background-size: 100% 100%;`">
-    </div>
     <div class="title">青岛胶东机场行李输送线</div>
     <div class="item1">
+      <!--      <div class="alm">-->
+      <!--        <div v-for="i in Object.keys(almData.E0013)">-->
+      <!--          <div v-for="ii in  almData.E0013[i]">-->
+      <!--            {{ ii }}-->
+      <!--          </div>-->
+      <!--        </div>-->
+      <!--      </div>-->
       <div class="line"></div>
-      <div style="display: inline-block">
-        <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 class="data">{{ i }} {{ deviceMap[ii] }} : {{ deviceData.E0013[i][ii] }}</div>
+      <div class="table1">
+        <div class="th1">设备名称</div>
+        <div class="th2">设备参数</div>
+      </div>
+      <div class="table2">
+        <div style="border-bottom: 1px solid #244b9f;" v-for="i in Object.keys(deviceData.E0013)">
+          <div class="td1">{{ i }}</div>
+          <div class="td2">
+            <div v-for="ii in Object.keys(deviceData.E0013[i])" v-if="deviceData.E0013[i][ii]>0">
+              <div>
+                <div class="info1">
+                  {{ deviceMap[ii] }}
+                </div>
+                <div class="span">
+                  :
+                </div>
+                <div class="info2">
+                  {{ deviceData.E0013[i][ii] }}
+                </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">
-            <div class="data">{{ i }} {{ deviceMap[ii] }} : {{ deviceData.E0014[i][ii] }}</div>
+        <div style="border-bottom: 1px solid #244b9f;" v-for="i in Object.keys(deviceData.E0014)">
+          <div class="td1">{{ i }}</div>
+          <div class="td2">
+            <div v-for="ii in Object.keys(deviceData.E0014[i])" v-if="deviceData.E0014[i][ii]>0">
+              <div>
+                <div class="info1">
+                  {{ deviceMap[ii] }}
+                </div>
+                <div class="span">
+                  :
+                </div>
+                <div class="info2">
+                  {{ deviceData.E0014[i][ii] }}
+                </div>
+              </div>
+            </div>
           </div>
         </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 class="table1">
+        <div class="th1">设备名称</div>
+        <div class="th2">设备参数</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 class="table2">
+        <div style="border-bottom: 1px solid #244b9f;" v-for="i in Object.keys(deviceData.E0002)">
+          <div class="td1">{{ i }}</div>
+          <div class="td2">
+            <div v-for="ii in Object.keys(deviceData.E0002[i])" v-if="deviceData.E0002[i][ii]>0">
+              <div>
+                <div class="info1">
+                  {{ deviceMap[ii] }}
+                </div>
+                <div class="span">
+                  :
+                </div>
+                <div class="info2">
+                  {{ deviceData.E0002[i][ii] }}
+                </div>
+              </div>
+            </div>
+          </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 style="border-bottom: 1px solid #244b9f;" v-for="i in Object.keys(deviceData.E0003)">
+          <div class="td1">{{ i }}</div>
+          <div class="td2">
+            <div v-for="ii in Object.keys(deviceData.E0003[i])" v-if="deviceData.E0003[i][ii]>0">
+              <div>
+                <div class="info1">
+                  {{ deviceMap[ii] }}
+                </div>
+                <div class="span">
+                  :
+                </div>
+                <div class="info2">
+                  {{ deviceData.E0003[i][ii] }}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div style="border-bottom: 1px solid #244b9f;" v-for="i in Object.keys(deviceData.E0004)">
+          <div class="td1">{{ i }}</div>
+          <div class="td2">
+            <div v-for="ii in Object.keys(deviceData.E0004[i])" v-if="deviceData.E0004[i][ii]>0">
+              <div>
+                <div class="info1">
+                  {{ deviceMap[ii] }}
+                </div>
+                <div class="span">
+                  :
+                </div>
+                <div class="info2">
+                  {{ deviceData.E0004[i][ii] }}
+                </div>
+              </div>
+            </div>
+          </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 class="table1">
+        <div class="th1">设备名称</div>
+        <div class="th2">设备参数</div>
+      </div>
+      <div class="table2">
+        <div style="border-bottom: 1px solid #244b9f;" v-for="i in Object.keys(deviceData.E0001)">
+          <div class="td1">{{ i }}</div>
+          <div class="td2">
+            <div v-for="ii in Object.keys(deviceData.E0001[i])" v-if="deviceData.E0001[i][ii]>0">
+              <div>
+                <div class="info1">
+                  {{ deviceMap[ii] }}
+                </div>
+                <div class="span">
+                  :
+                </div>
+                <div class="info2">
+                  {{ deviceData.E0001[i][ii] }}
+                </div>
+              </div>
+            </div>
+          </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 class="table1">
+        <div class="th1">设备名称</div>
+        <div class="th2">设备参数</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 class="table2">
+        <div style="border-bottom: 1px solid #244b9f;" v-for="i in Object.keys(deviceData.E0005)">
+          <div class="td1">{{ i }}</div>
+          <div class="td2">
+            <div v-for="ii in Object.keys(deviceData.E0005[i])" v-if="deviceData.E0005[i][ii]>0">
+              <div>
+                <div class="info1">
+                  {{ deviceMap[ii] }}
+                </div>
+                <div class="span">
+                  :
+                </div>
+                <div class="info2">
+                  {{ deviceData.E0005[i][ii] }}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div style="border-bottom: 1px solid #244b9f;" v-for="i in Object.keys(deviceData.E0006)">
+          <div class="td1">{{ i }}</div>
+          <div class="td2">
+            <div v-for="ii in Object.keys(deviceData.E0006[i])" v-if="deviceData.E0006[i][ii]>0">
+              <div>
+                <div class="info1">
+                  {{ deviceMap[ii] }}
+                </div>
+                <div class="span">
+                  :
+                </div>
+                <div class="info2">
+                  {{ deviceData.E0006[i][ii] }}
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </div>
@@ -71,15 +196,11 @@
 </template>
 
 <script>
-import model from '@/assets/images/model.jpg'
 import bg from '@/assets/images/bg.jpg'
-import bg1 from '@/assets/images/modelbg1.jpg'
 
 export default {
   data() {
     return {
-      model,
-      bg1,
       bg,
       deviceData: {
         'E0001': {},
@@ -91,6 +212,16 @@ export default {
         'E0013': {},
         'E0014': {},
       },
+      almData: {
+        'E0001': {},
+        'E0002': {},
+        'E0003': {},
+        'E0004': {},
+        'E0005': {},
+        'E0006': {},
+        'E0013': {},
+        'E0014': {},
+      },
       deviceMap: {
         temperature: '温度',
         humidity: '湿度',
@@ -106,77 +237,198 @@ export default {
   },
   mounted() {
     this.$bus.$on('websocket-device-data', (e) => {
-          let deviceID = e?.deviceParam?.monitorId?.split('_')?.[0]
-          if (Object.keys(this.deviceData).includes(deviceID)) {
-            this.$set(this.deviceData[deviceID], e.deviceParam.monitorId, {
-              temperature: e.deviceParam.temperature || 0,
-              humidity: e.deviceParam.humidity || 0,
-              illuminance: e.deviceParam.illuminance || 0,
-              noise: e.deviceParam.noise || 0,
-              concentration: e.deviceParam.concentration || 0,
-              vibrationSpeed: e.deviceParam.vibrationSpeed || 0,
-              vibrationDisplacement: e.deviceParam.vibrationDisplacement || 0,
-              vibrationAcceleration: e.deviceParam.vibrationAcceleration || 0,
-              vibrationTemp: e.deviceParam.vibrationTemp || 0,
-            })
-          }
-          console.log(this.deviceData.E0014)
+        let deviceID = e?.deviceParam?.monitorId?.split('_')?.[0]
+        if (Object.keys(this.deviceData).includes(deviceID)) {
+          this.$set(this.deviceData[deviceID], e.deviceParam.monitorId, {
+            temperature: e.deviceParam.temperature || 0,
+            humidity: e.deviceParam.humidity || 0,
+            illuminance: e.deviceParam.illuminance || 0,
+            noise: e.deviceParam.noise || 0,
+            concentration: e.deviceParam.concentration || 0,
+            vibrationSpeed: e.deviceParam.vibrationSpeed || 0,
+            vibrationDisplacement: e.deviceParam.vibrationDisplacement || 0,
+            vibrationAcceleration: e.deviceParam.vibrationAcceleration || 0,
+            vibrationTemp: e.deviceParam.vibrationTemp || 0,
+          })
+          // 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'])
         }
+        console.log(this.deviceData.E0014)
+      }
     )
   },
   methods:
-      {}
+    {}
 }
 </script>
 <style lang="less" scoped>
 .title {
   position: absolute;
-  top: 1%;
+  top: 2%;
   left: 50%;
   transform: translateX(-50%);
-  letter-spacing: 0.2vw;
-  font-size: 1.8vw;
+  letter-spacing: 0.3vw;
+  font-size: 2vw;
   font-weight: 800;
   color: white;
 }
 
 .item1 {
   right: 0%;
-  bottom: 25%;
-}
-
-.item2 {
-  right: 18%;
-  bottom: 25%;
-}
-
-.item3 {
-  right: 60%;
-  bottom: 25%;
-}
-
-.item4 {
-  right: 75%;
-  bottom: 65%;
-}
-
-.item1, .item2, .item3, .item4 {
-  padding: 8px;
-  //width: 14vw;
-  position: absolute;
-  border: 1px solid white;
-  transform: translateX(-50%);
-  color: #fff;
+  bottom: 27%;
 
   .line {
     position: absolute;
     top: 100%;
-    left: 50%;
-    transform: translateX(-50%);
+    left: 100%;
+    transform-origin: left top;
+    transform: translateX(-50%) rotate(-45deg);
     width: 1px;
     height: 3vh;
     background-color: #fff;
   }
+}
+
+.item2 {
+  right: 24%;
+  bottom: 25%;
+
+  .line {
+    position: absolute;
+    top: 100%;
+    left: 100%;
+    transform-origin: left top;
+    transform: translateX(-50%) rotate(-45deg);
+    width: 1px;
+    height: 3vh;
+    background-color: #fff;
+  }
+}
+
+.item3 {
+  left: 40%;
+  bottom: 25%;
+
+  .line {
+    position: absolute;
+    top: 100%;
+    left: 0%;
+    transform-origin: right top;
+    transform: translateX(-50%) rotate(45deg);
+    width: 1px;
+    height: 3vh;
+    background-color: #fff;
+  }
+}
+
+.item4 {
+  left: 18%;
+  bottom: 66%;
+
+
+  .line {
+    position: absolute;
+    top: 100%;
+    left: 60%;
+    transform-origin: left top;
+    transform: translateX(-50%) rotate(-45deg);
+    width: 1px;
+    height: 3vh;
+    background-color: #fff;
+  }
+}
+
+.item1, .item2, .item3, .item4 {
+  padding: 8px;
+  width: 345.6px;
+  position: absolute;
+  transform: translateX(-50%);
+  color: #fff;
+
+  .alm {
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  .table1 {
+    width: 100%;
+    height: 55px;
+    background-image: url(~@/assets/images/table1.jpg);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+
+    .th1, .th2 {
+      white-space: nowrap;
+      display: inline-block;
+      line-height: 55px;
+      min-height: 55px;
+      font-size: 18px;
+      font-weight: 700;
+      text-align: center;
+    }
+
+    .th1 {
+      width: 40%;
+    }
+
+    .th2 {
+      width: 60%;
+    }
+  }
+
+  .table2 {
+    width: 100%;
+    background-image: url(~@/assets/images/table2.jpg);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    padding: 0 12px;
+
+    .td1, .td2 {
+      white-space: nowrap;
+      display: inline-block;
+      font-size: 15.36px;
+      line-height: 26.88px;
+      min-height: 26.88px;
+      text-align: center;
+    }
+
+    .td1 {
+      vertical-align: top;
+      width: 40%;
+      color: #E4E6ED;
+    }
+
+    .td2 {
+      width: 60%;
+    }
+
+    .td2 {
+      .info1 {
+        width: 50%;
+        display: inline-block;
+        text-align: right;
+        color: #fff6
+      }
+
+      .span {
+        width: 14px;
+        display: inline-block;
+        text-align: center;
+      }
+
+      .info2 {
+        width: calc(50% - 14px);
+        display: inline-block;
+        text-align: left;
+        color: #E4E6ED;
+      }
+    }
+  }
+
 
   .data {
   }