多故障展示初稿

src/views/newMap/display/errrorMessageBox.vue

@@ -2,7 +2,7 @@
   <div>
     <div class="alarm-button">
       <el-button type="warning" icon="el-icon-message-solid" circle @click="showAlarm" />
-      <div v-if="finishDealAlarmMessage>0" class="alarm-counter">{{ finishDealAlarmMessage }}</div>
+      <div v-if="alarmDetailMessageList.length>0" class="alarm-counter">{{ alarmDetailMessageList.length }}</div>
       <audio ref="audio" />
     </div>
     <!--     <el-dialog
@@ -85,60 +85,19 @@
         <el-button @click="dialogVisible = false">取 消</el-button>
         <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
       </span>
+	:class="itemsstyle[index]"
     </el-dialog> -->
-    <el-dialog
+    <div v-if="showAlarmMessageList">
-      v-dialogDrag
+      <div v-for="(item, index) in alarmDetailMessageList" :key="index">
-      title="设备故障"
-      :modal="false"
-      :visible.sync="showAlarmMessage"
-      width="40%"
-      class="dialog-alarm-message-detail"
-    >
-      <div class="alarm-message-detail">
-        <el-card class="box-card">
-          <div slot="header" class="clearfix">
-            <span>故障信息</span>
-            <el-button style="float: right; padding: 3px 0" type="text" @click="goToAlarmDetail">详情</el-button>
-          </div>
-          <div class="text item">
-            时间：{{ showAlarmInfo.time }}
-          </div>
-          <div class="text item">
-            级别：{{ showAlarmInfo.level }}
-          </div>
-          <div class="text item">
-            设备：{{ showAlarmInfo.deviceCode }}
-          </div>
-          <div class="text item">
-            类型：{{ showAlarmInfo.type }}
-          </div>
-          <div class="text item">
-            信息：{{ showAlarmInfo.description }}
-          </div>
-        </el-card>
-        <el-card class="box-card">
-          <div slot="header" class="clearfix">
-            <span>辅助决策信息</span>
-          </div>
-          <div class="text item">
-            （1）信息报送人员/群组：{{ showDecisionMessage.personGroup }}
-          </div>
-          <div class="text item">
-            （2）电话通报：{{ showDecisionMessage.telephoneNotified }}
-          </div></el-card>
-      </div>
-    </el-dialog>
-    <!--     <div v-if="showAlarmMessage">
-      <div v-for="(item, index) in alarmDetailMessage" :key="index">
         <el-dialog
           v-dialogDrag
           title="设备故障"
           :modal="false"
           :close-on-click-modal="false"
           :visible.sync="item.show"
-          width="700px"
+          width="40%"
-          class="dialog-alarm-message-detail"
+          class="yellow"
-          :class="itemsstyle[index]"
+          :class="[{'orange':item.color == 'O','red':item.color == 'R'},itemsstyle[index]]"
         >
           <div class="alarm-message-detail">
             <el-card class="box-card">
@@ -147,19 +106,19 @@
                 <el-button style="float: right; padding: 3px 0" type="text" @click="goToAlarmDetail">详情</el-button>
               </div>
               <div class="text item">
-                时间：{{ showAlarmInfo.time }}
+                时间：{{ item.time }}
               </div>
               <div class="text item">
-                级别：{{ showAlarmInfo.level }}
+                级别：{{ item.levelNew }}
               </div>
               <div class="text item">
-                设备：{{ showAlarmInfo.deviceCode }}
+                设备：{{ item.deviceCodeNew }}
               </div>
               <div class="text item">
-                类型：{{ showAlarmInfo.type }}
+                类型：{{ item.typeNew }}
               </div>
               <div class="text item">
-                信息：{{ showAlarmInfo.description }}
+                信息：{{ item.descriptionNew }}
               </div>
             </el-card>
             <el-card class="box-card">
@@ -167,15 +126,15 @@
                 <span>辅助决策信息</span>
               </div>
               <div class="text item">
-                （1）信息报送人员/群组：{{ showDecisionMessage.personGroup }}
+                （1）信息报送人员/群组：{{ item.showDecisionMessage.personGroup }}
               </div>
               <div class="text item">
-                （2）电话通报：{{ showDecisionMessage.telephoneNotified }}
+                （2）电话通报：{{ item.showDecisionMessage.telephoneNotified }}
               </div></el-card>
           </div>
         </el-dialog>
       </div>
-    </div> -->
+    </div>
 
   </div>
 </template>
@@ -188,7 +147,6 @@ export default {
         return {
             dialogVisible: false,
             dealAlarmMessage:[true, false],
-            showAlarmMessage:false,
             showAlarmMessageList:false,
             tableData: [{
                 date: '2023-04-17',
@@ -203,13 +161,6 @@ export default {
                 message:'新的故障信息',
                 tag: '重大故障'
             }],
-            showAlarmInfo:{
-                time:'',
-                level:'',
-                deviceCode:'',
-                type:'',
-                description:''
-            },
             decisionMessage:[{
                 personGroup:'主要领导、应急管理部负责人、应急管理室负责人报送，并发党群信息群；故障群/应急群发布。',
                 telephoneNotified:'如故障属于I类信息，分公司值班领导、主要领导、党群工作部、线网管控中心负责人、分管领导、应急管理部负责人、应急管理室负责人。'
@@ -225,8 +176,8 @@ export default {
                 ['TRAIN_DELAY', '列车延误']
             ]),
             showDecisionMessage:{},
-            itemsstyle: ['item0', 'item1', 'item2'],
+            alarmDetailMessageList:[],
-            items: [{show:false}, {show:false}, {show:false}]
+            itemsstyle: ['item0', 'item1', 'item2', 'item3', 'item4', 'item5', 'item6', 'item7', 'item8', 'item9']
         };
     },
     computed: {
@@ -241,13 +192,26 @@ export default {
         }
     },
     watch: {
-        alarmDetailMessage() {
+        alarmDetailMessage(newValue, oldValue) {
-            if (this.alarmDetailMessage.length == 1) { this.showAlarmPlayAlarmMusic(); } else { console.log(this.alarmDetailMessage, 555555); }
+            if (newValue.length > 0) {
+                const clone = JSON.parse(JSON.stringify(this.alarmDetailMessage));
+                this.alarmDetailMessageList.push(...clone);
+                let index;
+                this.alarmDetailMessageList.forEach((item, i)=>{
+                    this.$set(item, 'show', true);
+                    if (new Date(newValue[0].time).getTime() - new Date(item.time).getTime() > 90000) {
+                        index = i;
+                    }
+                });
+                if (index !== undefined) {
+                    this.alarmDetailMessageList.splice(0, index + 1);
+                }
+                this.showAlarmPlayAlarmMusic();
+            }
         }
     },
     beforeDestroy() {
         this.$store.dispatch('socket/setSimulationAlarmInfo', []);
-        document.getElementsByTagName('body')[0].style.setProperty('--bg-color', 'yellow');
     },
 
     methods: {
@@ -258,33 +222,29 @@ export default {
             this.$refs.audio.play();
         },
         showAlarmPlayAlarmMusic() {
-            this.playAlarmMusic();
+            if (this.$refs.audio.paused) {
+                this.playAlarmMusic();
+            }
             this.showAlarm();
         },
         showAlarm() {
-            this.items.forEach((item)=>{
+            this.alarmDetailMessageList.forEach((showAlarmMessage)=>{
-                item.show = !item.show;
+                showAlarmMessage.show = true;
-            });
+                const station = this.$store.getters['map/getDeviceByCode'](showAlarmMessage.deviceCode);
-            if (this.alarmDetailMessage.length > 0) {
+                showAlarmMessage.levelNew = this.mapAlarmMessage.get(showAlarmMessage.level);
-                const station = this.$store.getters['map/getDeviceByCode'](this.alarmDetailMessage[0].deviceCode);
+                showAlarmMessage.deviceCodeNew = '列车' + station.serviceNumber + station.tripNumber;
-                this.showAlarmInfo.time = this.alarmDetailMessage[0].time;
+                showAlarmMessage.typeNew = this.mapAlarmMessage.get(showAlarmMessage.type);
-                this.showAlarmInfo.level = this.mapAlarmMessage.get(this.alarmDetailMessage[0].level);
+                const index = showAlarmMessage.description.indexOf('列车');
-                this.showAlarmInfo.deviceCode = '列车' + station.serviceNumber + station.tripNumber;
+                showAlarmMessage.descriptionNew = showAlarmMessage.description.slice(0, index) + showAlarmMessage.deviceCodeNew + showAlarmMessage.description.substring(index + 7);
-                this.showAlarmInfo.type = this.mapAlarmMessage.get(this.alarmDetailMessage[0].type);
+                if (showAlarmMessage.color === 'Y') {
-                const index = this.alarmDetailMessage[0].description.indexOf('列车');
+                    showAlarmMessage.showDecisionMessage = this.decisionMessage[0];
-                this.showAlarmInfo.description = this.alarmDetailMessage[0].description.slice(0, index) + this.showAlarmInfo.deviceCode + this.alarmDetailMessage[0].description.substring(index + 7);
+                } else if (showAlarmMessage.color === 'O') {
-                if (this.alarmDetailMessage[0].color === 'Y') {
+                    showAlarmMessage.showDecisionMessage = this.decisionMessage[1];
-                    document.getElementsByTagName('body')[0].style.setProperty('--bg-color', 'yellow');
-                    this.showDecisionMessage = this.decisionMessage[0];
-                } else if (this.alarmDetailMessage[0].color === 'O') {
-                    document.getElementsByTagName('body')[0].style.setProperty('--bg-color', 'orange');
-                    this.showDecisionMessage = this.decisionMessage[1];
                 } else {
-                    this.showDecisionMessage = this.decisionMessage[1];
+                    showAlarmMessage.showDecisionMessage = this.decisionMessage[1];
-                    document.getElementsByTagName('body')[0].style.setProperty('--bg-color', 'red');
                 }
-            }
+            });
-            this.showAlarmMessage = !this.showAlarmMessage;
+            this.showAlarmMessageList = true;
         },
         handleSelectionChange(val) {
             if (val.length === this.tableData.length) {
@@ -316,17 +276,11 @@ export default {
             });
         },
         goToDetail(index, row) {
-            console.log(row);
             /* const routeUrl = this.$router.resolve({
                 path: '/thirdLogin'
                 // query: { id: 96 }
             });
             window.open(routeUrl.href, '_blank'); */
-            if (index == 0) {
-                window.open('https://www.baidu.com', 'baidu');
-            } else {
-                window.open('http://localhost:9000/tmms/traindispatch/7', 'dispatch');
-            }
             //
 
         },
@@ -334,19 +288,16 @@ export default {
             return row.tag === value;
         },
         goToAlarmDetail() {
-            window.open('https://www.baidu.com', 'baidu');
         }
     }
 };
 </script>
 
 <style lang="scss" scoped>
-$themeBgColor: var(--bg-color, yellow);
 .alarm-button{
 	position: absolute;
 	left: 20px;
 	bottom: 58%;
-	z-index: 2000;
 	.alarm-counter{
 	position: absolute;
 	left: 20px;
@@ -383,25 +334,72 @@ $themeBgColor: var(--bg-color, yellow);
 	}
   }
 }
-.dialog-alarm-message-detail{
+.yellow{
 	/deep/ .el-dialog__body{
 	padding: 0 10px 10px;
-	background-color:$themeBgColor;
+	background-color:yellow;
 	}
 	/deep/ .el-dialog__header{
-		background-color: $themeBgColor;
+		background-color: yellow;
+	}
+}
+.orange{
+	/deep/ .el-dialog__body{
+	padding: 0 10px 10px;
+	background-color:orange;
+	}
+	/deep/ .el-dialog__header{
+		background-color: orange;
+	}
+}
+.red{
+	/deep/ .el-dialog__body{
+	padding: 0 10px 10px;
+	background-color:red;
+	}
+	/deep/ .el-dialog__header{
+		background-color: red;
 	}
 }
 .item0 {
- left: 0px;
+   top: 0px;
+   z-index: 1501 !important;
 }
 .item1 {
-   left: 90px;
    top:50px;
+   z-index: 1502 !important;
 }
 .item2 {
-   left: 180px;
    top:100px;
+   z-index: 1503 !important;
+}
+.item3 {
+ top: 150px;
+ z-index: 1504 !important;
+}
+.item4 {
+   top:200px;
+   z-index: 1505 !important;
+}
+.item5 {
+   top:250px;
+   z-index: 1506 !important;
+}
+.item6 {
+   top:300px;
+   z-index: 1507 !important;
+}
+.item7 {
+   top:350px;
+   z-index: 1508 !important;
+}
+.item8 {
+   top:400;
+   z-index: 1509 !important;
+}
+.item9 {
+   top:450px;
+   z-index: 1510 !important;
 }
 
 </style>