故障报警初提交

src/views/newMap/display/errrorMessageBox.vue

@@ -4,16 +4,15 @@
       <audio ref="audio" />
     </div>
     <div v-if="showAlarmMessageList">
-      <div v-for="(item, index) in alarmDetailMessageList" :key="index">
       <el-dialog
         v-dialogDrag
         title="设备故障"
         :modal="false"
         :close-on-click-modal="false"
-          :visible.sync="item.show"
+        :visible.sync="showAlarmImportantMessage.show"
         width="40%"
         class="yellow"
-          :class="[{'orange':item.color == 'O','red':item.color == 'R'},itemsstyle[index]]"
+        :class="{'orange':showAlarmImportantMessage.color == 'O','red':showAlarmImportantMessage.color == 'R'}"
       >
         <div class="alarm-message-detail">
           <el-card class="box-card">
@@ -22,19 +21,22 @@
               <el-button style="float: right; padding: 3px 0" type="text" @click="goToAlarmDetail">详情</el-button>
             </div>
             <div class="text item">
-                时间：{{ item.time }}
+              时间：{{ showAlarmImportantMessage.time }}
             </div>
             <div class="text item">
-                级别：{{ item.levelNew }}
+              级别：{{ showAlarmImportantMessage.levelNew }}
             </div>
             <div class="text item">
-                设备：{{ item.deviceCodeNew }}
+              设备：{{ showAlarmImportantMessage.deviceCodeNew }}
             </div>
             <div class="text item">
-                类型：{{ item.typeNew }}
+              类型：{{ showAlarmImportantMessage.typeNew }}
             </div>
             <div class="text item">
-                信息：{{ item.descriptionNew }}
+              信息：{{ showAlarmImportantMessage.descriptionNew }}
+            </div>
+            <div class="text item">
+              原因：{{ showAlarmImportantMessage.reason }}
             </div>
           </el-card>
           <el-card class="box-card">
@@ -42,15 +44,72 @@
               <span>辅助决策信息</span>
             </div>
             <div class="text item">
-                （1）信息报送人员/群组：{{ item.showDecisionMessage.personGroup }}
+              （1）信息报送人员/群组：{{ showAlarmImportantMessage.showDecisionMessage.personGroup }}
             </div>
             <div class="text item">
-                （2）电话通报：{{ item.showDecisionMessage.telephoneNotified }}
+              （2）电话通报：{{ showAlarmImportantMessage.showDecisionMessage.telephoneNotified }}
-              </div></el-card>
+            </div>
+            <div v-if="showAlarmImportantMessage.color == 'O'" class="text item">
+              （3）PIS信息模版：{{ showAlarmImportantMessage.pisTemplate }}
+            </div>
+          </el-card>
+        </div>
+        <div class="alarm-message-All">
+          <el-card class="box-card">
+            <el-collapse v-model="activeName" accordion>
+              <div v-for="(item, index) in alarmDetailMessageGroup" :key="index">
+                <el-collapse-item>
+                  <template slot="title">
+                    故障汇总：{{ item[0].levelNew }}
+                  </template>
+                  <el-table
+                    :data="item"
+                    border
+                    :cell-style="{'text-align':'center'}"
+                    :header-cell-style="{'text-align':'center'}"
+                    style="width: 100%"
+                    max-height="250"
+                  >
+                    <el-table-column
+                      prop="time"
+                      label="时间"
+                      width="100"
+                    />
+                    <el-table-column
+                      prop="levelNew"
+                      label="级别"
+                      width="70"
+                    />
+                    <el-table-column
+                      prop="deviceCodeNew"
+                      label="设备"
+                      width="105"
+                    />
+                    <el-table-column
+                      prop="typeNew"
+                      label="类型"
+                      width="80"
+                    />
+                    <el-table-column
+                      prop="descriptionNew"
+                      label="信息"
+                    />
+                    <!--  <el-table-column label="操作" width="90">
+                      <template slot-scope="scope">
+                        <el-button
+                          size="mini"
+                          :type="dealAlarmMessage[scope.$index] ? 'success' : 'danger'"
+                          @click="handleAlarmMessage(scope.$index,scope.row)"
+                        >{{ dealAlarmMessage[scope.$index] ? '已处理' : '未处理' }}</el-button>
+                      </template>
+                    </el-table-column> -->
+                  </el-table>
+                </el-collapse-item>
+              </div>
+            </el-collapse></el-card>
         </div>
       </el-dialog>
     </div>
-    </div>
 
   </div>
 </template>
@@ -61,22 +120,8 @@ export default {
     name: 'ErrrorMessageBox',
     data() {
         return {
-            dialogVisible: false,
+            activeName: '0',
-            dealAlarmMessage:[true, false],
             showAlarmMessageList:false,
-            tableData: [{
-                date: '2023-04-17',
-                name: '车厢编号10',
-                id: '001',
-                message:'电路信号故障,车辆二次设备无法运行',
-                tag: '一般故障'
-            }, {
-                date: '2023-04-21',
-                name: '车厢编号8',
-                id: '005',
-                message:'新的故障信息',
-                tag: '重大故障'
-            }],
             decisionMessage:[{
                 personGroup:'主要领导、应急管理部负责人、应急管理室负责人报送，并发党群信息群；故障群/应急群发布。',
                 telephoneNotified:'如故障属于I类信息，分公司值班领导、主要领导、党群工作部、线网管控中心负责人、分管领导、应急管理部负责人、应急管理室负责人。'
@@ -93,7 +138,11 @@ export default {
             ]),
             showDecisionMessage:{},
             alarmDetailMessageList:[],
-            itemsstyle: ['item0', 'item1', 'item2', 'item3', 'item4', 'item5', 'item6', 'item7', 'item8', 'item9']
+            alarmDetailMessageGroup:[],
+            showAlarmImportantMessage:{},
+            dealAlarmMessage:[true, false],
+            alarmReasonMap:[],
+            oldShowAlarmMessage:{}
         };
     },
     computed: {
@@ -102,9 +151,6 @@ export default {
         ]),
         alarmDetailMessage() {
             return this.$store.state.socket.simulationAlarmInfo;
-        },
-        finishDealAlarmMessage() {
-            return this.dealAlarmMessage.reduce((prev, curr)=> curr === false ? prev + 1 : prev, 0);
         }
     },
     watch: {
@@ -112,16 +158,9 @@ export default {
             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);
-                }
                 if (newValue[0].handleMethod === 'NCC' && this.$store.getters['map/getDeviceByCode'](this.alarmDetailMessageList[0].deviceCode) !== undefined) {
                     this.showAlarmPlayAlarmMusic();
                 }
@@ -133,18 +172,18 @@ export default {
     },
 
     methods: {
-        playAlarmMusic() {
-            let alarmMusic = new Audio();
-            alarmMusic = require('@/assets/buzzer.mp3');
-            this.$refs.audio.src = alarmMusic;
-            this.$refs.audio.play();
-        },
         showAlarmPlayAlarmMusic() {
             if (this.$refs.audio.paused) {
                 this.playAlarmMusic();
             }
             this.showAlarm();
         },
+        playAlarmMusic() {
+            let alarmMusic = new Audio();
+            alarmMusic = require('@/assets/buzzer.mp3');
+            this.$refs.audio.src = alarmMusic;
+            this.$refs.audio.play();
+        },
         showAlarm() {
             this.alarmDetailMessageList.forEach((showAlarmMessage)=>{
                 showAlarmMessage.show = true;
@@ -162,10 +201,48 @@ export default {
                     showAlarmMessage.showDecisionMessage = this.decisionMessage[1];
                 }
             });
+            const newAlarmMessage = this.alarmDetailMessageList.at(-1);
+            if (this.oldShowAlarmMessage.level == undefined) {
+                this.oldShowAlarmMessage = newAlarmMessage;
+                this.showAlarmImportantMessage = newAlarmMessage;
+            } else if (newAlarmMessage.color == 'O') {
+                this.oldShowAlarmMessage = newAlarmMessage;
+                this.showAlarmImportantMessage = newAlarmMessage;
+            } else {
+                this.showAlarmImportantMessage = this.oldShowAlarmMessage;
+            }
+            if (this.alarmDetailMessageGroup.length == 0) {
+                this.alarmDetailMessageGroup.push([newAlarmMessage]);
+                this.alarmReasonMap.push(newAlarmMessage.reason);
+            } else if (this.alarmReasonMap.includes(newAlarmMessage.reason)) {
+                const index = this.alarmReasonMap.indexOf(newAlarmMessage.reason);
+                this.alarmDetailMessageGroup[index].push(newAlarmMessage);
+            } else {
+                this.alarmReasonMap.push(newAlarmMessage.reason);
+                this.alarmDetailMessageGroup.push([newAlarmMessage]);
+            }
             this.showAlarmMessageList = true;
         },
         goToAlarmDetail() {
         }
+        /* handleAlarmMessage(index, row) {
+            this.$confirm('此操作将处理故障信息, 是否继续?', '提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning'
+            }).then(() => {
+                this.dealAlarmMessage.splice(index, 1, !this.dealAlarmMessage[index]);
+                this.$message({
+                    type: 'success',
+                    message: '处理成功!'
+                });
+            }).catch(() => {
+                this.$message({
+                    type: 'info',
+                    message: '已取消处理'
+                });
+            });
+        } */
     }
 };
 </script>
@@ -203,6 +280,12 @@ export default {
 	}
   }
 }
+.alarm-message-All{
+	margin-top:10px;
+	.box-card{
+		padding: 0 10px;
+	}
+}
 .yellow{
 	/deep/ .el-dialog__body{
 	padding: 0 10px 10px;
@@ -230,45 +313,4 @@ export default {
 		background-color: red;
 	}
 }
-.item0 {
-   top: 0px;
-   z-index: 1501 !important;
-}
-.item1 {
-   top:50px;
-   z-index: 1502 !important;
-}
-.item2 {
-   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:400px;
-   z-index: 1509 !important;
-}
-.item9 {
-   top:450px;
-   z-index: 1510 !important;
-}
-
 </style>