修改看板

package.json

@@ -63,6 +63,7 @@
     "vue-cropper": "0.5.5",
     "vue-meta": "2.4.0",
     "vue-router": "3.4.9",
+    "vue-seamless-scroll": "^1.1.23",
     "vuedraggable": "2.24.3",
     "vuex": "3.6.0",
     "xlsx": "^0.17.0"

src/views/board/index.vue

@@ -2,7 +2,6 @@
   <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%;`">
-      <!--      <img :src="model" alt="">-->
     </div>
     <div class="title">青岛胶东机场行李输送线</div>
     <div class="item1">
@@ -233,13 +232,40 @@
         </div>
       </div>
     </div>
+
+    <div class="scTable1">
+      <div style="background-color: #094170">
+        <div class="scrollTable" style="font-weight: bold;">
+          报警信息
+        </div>
+      </div>
+      <vue-seamless-scroll
+        :class-option="chart1TableOption"
+        :data="almTableData"
+        style="height: calc(100% - 33px);overflow:hidden; "
+      >
+        <div
+          v-for="(item, index) in almTableData"
+          :key="index"
+        >
+          <div :style='"background-color:" + ((index % 2 === 0)? "#053460":"#032d57") '>
+            <div
+              class="scrollTable">
+              {{ item.ruleName }}
+            </div>
+          </div>
+        </div>
+      </vue-seamless-scroll>
+    </div>
   </div>
 </template>
 
 <script>
 import bg from '@/assets/images/bg.jpg'
+import vueSeamlessScroll from 'vue-seamless-scroll'
 
 export default {
+  components: {vueSeamlessScroll},
   data() {
     return {
       bg,
@@ -263,6 +289,18 @@ export default {
         'E0013': {},
         'E0014': {},
       },
+      almTableData: [],
+      chart1TableOption: {
+        step: 0.5, // 数值越大速度滚动越快
+        limitMoveNum: 12, // 开始无缝滚动的数据量 this.dataList.length
+        hoverStop: true, // 是否开启鼠标悬停stop
+        direction: 1, // 0向下 1向上 2向左 3向右
+        openWatch: true, // 开启数据实时监控刷新dom
+        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
+        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
+        waitTime: 0,
+        autoPlay: true,
+      },
       deviceMap: {
         temperature: '温度',
         humidity: '湿度',
@@ -291,12 +329,42 @@ export default {
             vibrationAcceleration: e.deviceParam.vibrationAcceleration || 0,
             vibrationTemp: e.deviceParam.vibrationTemp || 0,
           })
-          // this.$set(this.almData[deviceID], e.deviceParam.monitorId, e.alarmRules.map(v => {
+          this.$set(this.almData[deviceID], e.deviceParam.monitorId, e.alarmRules)
-          //   return v.ruleName
+          // this.$set(this.almData[deviceID], e.deviceParam.monitorId, [
-          // }))
+          //   {
-          this.$set(this.almData[deviceID], e.deviceParam.monitorId, ['报警信息'])
+          //     "objid": 30020,
+          //     "monitorId": "T0002_0101 ",
+          //     "ruleId": null,
+          //     "ruleName": "T0002_0101 表的温度大于阈值 20",
+          //     "triggerRule": 0,
+          //     "monitorField": 0,
+          //     "triggerValue": 20,
+          //     "cause": "温度过高-备注"
+          //   },
+          //   {
+          //     "objid": 30021,
+          //     "monitorId": "T0002_0101 ",
+          //     "ruleId": null,
+          //     "ruleName": "T0002_0101表的温度小于阈值 30",
+          //     "triggerRule": 1,
+          //     "monitorField": 0,
+          //     "triggerValue": 30,
+          //     "cause": "温度过低-备注"
+          //   }
+          // ])
+          let list = []
+
+          Object.values(this.almData).forEach((item) => {
+            Object.values(item).forEach((item1) => {
+              item1.forEach((item2) => {
+                list.push(item2)
+              })
+            })
+          })
+
+          this.almTableData = list
+          // this.$set(this.almData[deviceID], e.deviceParam.monitorId, ['报警信息'])
         }
-        console.log(this.deviceData.E0014)
       }
     )
   },
@@ -305,6 +373,18 @@ export default {
 }
 </script>
 <style lang="less" scoped>
+.scrollTable {
+  color: rgb(185, 186, 192);
+  margin: auto 0px;
+  padding: 4px 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-align: center;
+  display: inline-block;
+  width: 100%;
+}
+
 .title {
   position: absolute;
   top: 2%;
@@ -316,6 +396,29 @@ export default {
   color: white;
 }
 
+
+.scTable1 {
+  position: absolute;
+  top: 48%;
+  left: 2.5%;
+  width: 20%;
+  height: 45%;
+  overflow: hidden;
+}
+
+.line:before {
+  content: "";
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background-color: #B8DFFA;
+  border: 2px solid #3E649F;
+}
+
 .item1 {
   right: 0%;
   bottom: 27%;
@@ -328,13 +431,13 @@ export default {
 
   .line {
     position: absolute;
-    top: 100%;
+    top: calc(100% - 8px);
-    left: 100%;
+    left: calc(100% - 8px);
-    transform-origin: left top;
+    transform-origin: center top;
     transform: translateX(-50%) rotate(-45deg);
     width: 1px;
     height: 3vh;
-    background-color: #fff;
+    background-color: #3E649F;
   }
 }
 
@@ -350,13 +453,13 @@ export default {
 
   .line {
     position: absolute;
-    top: 100%;
+    top: calc(100% - 8px);
-    left: 100%;
+    left: calc(100% - 8px);
-    transform-origin: left top;
+    transform-origin: center top;
     transform: translateX(-50%) rotate(-45deg);
     width: 1px;
     height: 3vh;
-    background-color: #fff;
+    background-color: #3E649F;
   }
 }
 
@@ -372,13 +475,13 @@ export default {
 
   .line {
     position: absolute;
-    top: 100%;
+    top: calc(100% - 8px);
-    left: 0%;
+    left: 8px;
-    transform-origin: right top;
+    transform-origin: center top;
     transform: translateX(-50%) rotate(45deg);
     width: 1px;
     height: 3vh;
-    background-color: #fff;
+    background-color: #3E649F;
   }
 }
 
@@ -396,13 +499,13 @@ export default {
 
   .line {
     position: absolute;
-    top: 100%;
+    top: calc(100% - 8px);
-    left: 60%;
+    left: calc(60% - 8px);
-    transform-origin: left top;
+    transform-origin: center top;
     transform: translateX(-50%) rotate(-45deg);
     width: 1px;
     height: 3vh;
-    background-color: #fff;
+    background-color: #3E649F;
   }
 }
 
@@ -495,6 +598,7 @@ export default {
 }
 
 .alm {
+  display: none;
   animation: colourSwitching 0.5s infinite;
 }