1.报警信息滚动展示两行

2.事故报警弹窗展开时获取列表

src/views/modules_guAn/visualization/index.vue

@@ -210,6 +210,7 @@ export default {
     // 点击报警按钮触发弹窗
     clickAlarmBtn(){
       this.$refs.alarmList.visible = true
+      this.$refs.alarmList.loadData()
     },
     // websocket
     initWebSocket () { // 初始化weosocket(必须)
@@ -247,6 +248,7 @@ export default {
       this.initData(redata);
     },
     initData(redata) {
+      console.log(66666,redata)
       // 接收数据之后操作
       this.eqRealData = redata['设备实时值']
       this.curveData = redata['设备历史值']

src/views/modules_guAn/visualization/modules/EquipmentInfo.vue

@@ -78,8 +78,20 @@
       </div>
       <div style="height: 22%; margin-top: 2%;">
         <div class="bo">
-          <div style="width: 35%; padding-left: 2%">{{alarmTime}}</div>
-          <div style="width: 65%;">{{ information }}</div>
+          <!-- <div style="width: 35%; padding-left: 2%">{{alarmTime}}</div>
+          <div style="width: 65%;">{{ information }}</div> -->
+          <div style="width: 35%; padding-left: 2%" class="scroll-text">
+            <div>
+              <div class="number">{{ time1 }}</div>
+              <div class="number">{{ time2 }}</div>
+            </div>
+          </div>
+          <div style="width: 65%;" class="scroll-text">
+            <div>
+              <div class="number">{{ inform1 }}</div>
+              <div class="number">{{ inform2 }}</div>
+            </div>
+          </div>
         </div>
       </div>
     </div>
@@ -144,7 +156,14 @@ export default {
       runStatus: '',
       // 报警信息
       alarmTime: '',
-      information: ''
+      information: '',
+      time1: '',
+      time2: '',
+      inform1: '',
+      inform2: '',
+      inform: ['Data 1', 'Data 2', 'Data 3', 'Data 4', 'Data 5', 'Data 6', 'Data 7', 'Data 8', 'Data 9'],
+      time: ['time 1', 'time 2', 'time 3', 'time 4', 'time 5', 'time 6', 'time 7', 'time 8', 'time 9'],
+      counter: 0
     }
   },
   watch: {
@@ -159,7 +178,7 @@ export default {
     },
     alarmData: {
       handler(newValue, oldValue){
-        console.log(newValue, oldValue)
+        console.log(777777,newValue, oldValue)
         var hasAlarm = newValue
         var options = { year: 'numeric', month: 'numeric', day: 'numeric', hour: 'numeric', minute: 'numeric' };
         this.information = hasAlarm ? newValue.tagname : '暂无数据'
@@ -170,6 +189,7 @@ export default {
     }
   },
   created () {
+    this.showData()
   },
   mounted () {
   },
@@ -198,6 +218,36 @@ export default {
           this.runStatus = this.dataList[i].Value
         }
       }
+    },
+    showData() {
+      // 如果还有数据未显示
+      if (this.counter < this.inform.length) {
+        // 显示当前计数器指向的数据
+        // console.log(this.inform[this.counter]);
+        // console.log(this.time[this.counter]);
+        this.time1 =this.time[this.counter]
+        this.inform1 =this.inform[this.counter]
+        // 如果还有一条数据可以显示
+        if (this.counter + 1 < this.inform.length) {
+          // console.log(this.inform[this.counter + 1]);
+          // console.log(this.time[this.counter + 1]);
+          this.time2 =this.time[this.counter + 1]
+          this.inform2 =this.inform[this.counter + 1]
+        }
+        if (this.counter + 1 == this.inform.length) {
+          this.time2 = ''
+          this.inform2 = ''
+          this.counter = -2;
+        }
+        // 更新计数器
+        this.counter += 2;
+    
+        // 设置下一次调用的定时器
+        setTimeout(this.showData, 3000);
+      }
+      if (this.counter == this.inform.length) {
+        this.counter = 0;
+      }
     }
   }
 }
@@ -283,14 +333,34 @@ export default {
     background-repeat: no-repeat;
     background-size: 0.05vw 1vw, 1vw 0.05vw;
     display: flex;
+    align-items: center;
     flex-direction: row;
   }
   .bo>div{
     height: 100%;
     color: #eeeeee;
     font-size: 16px;
+    // padding-top: 0.2%;
     // border: 1px solid rgb(255, 255, 255);
     display: flex;
     align-items: center;
   }
+  .scroll-text {
+    overflow: hidden;
+    white-space: nowrap;
+  }
+  
+  .number {
+    display: block;
+    animation: scrollNumber 3s infinite steps(1);
+  }
+  
+  // @keyframes scrollNumber {
+  //   0% {
+  //     transform: translateX(20%);
+  //   }
+  //   100% {
+  //     transform: translateX(-20%);
+  //   }
+  // }
 </style>