故障报警初提交备用，待优化

src/views/newMap/display/errrorMessageBox.vue

@@ -0,0 +1,326 @@
+<template>
+  <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>
+      <audio ref="audio" />
+    </div>
+    <!--     <el-dialog
+      v-dialogDrag
+      :modal="false"
+      :visible.sync="showAlarmMessageList"
+      width="900px"
+      title="设备故障！！！"
+    >
+      <el-table
+        :data="tableData"
+        border
+        :cell-style="{'text-align':'center'}"
+        :header-cell-style="{'text-align':'center'}"
+        style="width: 100%"
+        @selection-change="handleSelectionChange"
+        @select-all="handleSelectionAll"
+      >
+        <el-table-column
+          type="selection"
+          width="40"
+        />
+        <el-table-column
+          prop="date"
+          label="时间"
+          width="110"
+        />
+        <el-table-column
+          prop="name"
+          label="故障设备"
+          width="110"
+        />
+        <el-table-column
+          prop="id"
+          label="故障编号"
+          width="90"
+        />
+        <el-table-column
+          prop="message"
+          label="故障信息"
+        />
+        <el-table-column label="操作">
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              @click="goToDetail(scope.$index,scope.row)"
+            >详情</el-button>
+            <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-column
+          prop="tag"
+          label="标签"
+          width="100"
+          :filters="[{ text: '一般故障', value: '一般故障' }, { text: '中等故障', value: '中等故障' }, { text: '重大故障', value: '重大故障' }]"
+          :filter-method="filterTag"
+          filter-placement="bottom-end"
+        >
+          <template slot-scope="scope">
+            <el-tag
+              :type="scope.row.tag === '一般故障' ? 'warning' : 'danger'"
+              disable-transitions
+            >{{ scope.row.tag }}</el-tag>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-dialog>
+    <el-dialog
+      v-dialogDrag
+      title="提示"
+      :visible.sync="dialogVisible"
+      width="30%"
+    >
+      <span>进行全选操作</span>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
+      </span>
+    </el-dialog> -->
+    <el-dialog
+      v-dialogDrag
+      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>
+</template>
+
+<script>
+export default {
+    name: 'ErrrorMessageBox',
+    data() {
+        return {
+            dialogVisible: false,
+            dealAlarmMessage:[true, false],
+            showAlarmMessage:false,
+            showAlarmMessageList:false,
+            tableData: [{
+                date: '2023-04-17',
+                name: '车厢编号10',
+                id: '001',
+                message:'电路信号故障,车辆二次设备无法运行',
+                tag: '一般故障'
+            }, {
+                date: '2023-04-21',
+                name: '车厢编号8',
+                id: '005',
+                message:'新的故障信息',
+                tag: '重大故障'
+            }],
+            showAlarmInfo:{
+                time:'',
+                level:'',
+                deviceCode:'',
+                type:'',
+                description:''
+            },
+            decisionMessage:[{
+                personGroup:'主要领导、应急管理部负责人、应急管理室负责人报送，并发党群信息群；故障群/应急群发布。',
+                telephoneNotified:'如故障属于I类信息，分公司值班领导、主要领导、党群工作部、线网管控中心负责人、分管领导、应急管理部负责人、应急管理室负责人。'
+            }, {
+                personGroup:'故障群/应急群、党群信息群',
+                telephoneNotified:'分公司值班领导、主要领导、党群工作部、线网管控中心负责人、分管领导、应急管理部负责人、应急管理室负责人。视情况经领导同意报集团公司。'
+            }],
+            showDecisionMessage:{}
+
+        };
+    },
+    computed: {
+        alarmDetailMessage() {
+            return this.$store.state.socket.simulationAlarmInfo;
+        },
+        finishDealAlarmMessage() {
+            return this.dealAlarmMessage.reduce((prev, curr)=> curr === false ? prev + 1 : prev, 0);
+        }
+    },
+    watch: {
+        alarmDetailMessage() {
+            if (this.alarmDetailMessage.length == 1) { this.showAlarm(); } else { console.log(555555); }
+        }
+    },
+    beforeDestroy() {
+        this.$store.dispatch('socket/setSimulationAlarmInfo', []);
+        document.getElementsByTagName('body')[0].style.setProperty('--bg-color', 'yellow');
+    },
+
+    methods: {
+        playAlarmMusic() {
+            let alarmMusic = new Audio();
+            alarmMusic = require('@/assets/buzzer.mp3');
+            this.$refs.audio.src = alarmMusic;
+            this.$refs.audio.play();
+        },
+        showAlarm() {
+            this.playAlarmMusic();
+            this.showDecisionMessage = this.decisionMessage[0];
+            if (this.alarmDetailMessage.length > 0) {
+                this.showAlarmInfo = this.alarmDetailMessage[0];
+                const description = this.showAlarmInfo.description.substring(this.showAlarmInfo.description.indexOf('晚点') + 2);
+                const index = description.indexOf('分');
+                const minuteData = description.substring(0, index);
+                console.log(minuteData, 222);
+                if (minuteData >= 10 && minuteData < 30) {
+                    document.getElementsByTagName('body')[0].style.setProperty('--bg-color', 'orange');
+                    this.showDecisionMessage = this.decisionMessage[1];
+                } else if (minuteData >= 30) {
+                    document.getElementsByTagName('body')[0].style.setProperty('--bg-color', 'red');
+                    this.showDecisionMessage = this.decisionMessage[1];
+                }
+            }
+
+            this.showAlarmMessage = !this.showAlarmMessage;
+        },
+        handleSelectionChange(val) {
+            if (val.length === this.tableData.length) {
+                this.dialogVisible = true;
+            }
+        },
+        handleSelectionAll(val) {
+            if (val.length > 0) {
+                this.dialogVisible = true;
+            }
+        },
+        handleAlarmMessage(index, row) {
+            console.log(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: '已取消处理'
+                });
+            });
+        },
+        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');
+            }
+            //
+
+        },
+        filterTag(value, row) {
+            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;
+	bottom: 62%;
+	width: 20px;
+	height: 20px;
+	border-radius: 50%;
+	background-color: red;
+	text-align: center;
+	color: #fff;
+	font-size: 14px;
+    }
+}
+
+.alarm-message-detail {
+	display: flex;
+	justify-content: space-between;
+	.box-card {
+    width: 48%;
+	padding: 0 5px;
+	.clearfix:before,
+	.clearfix:after {
+		display: table;
+		content: "";
+	}
+	.clearfix:after {
+		clear: both
+	}
+	.text {
+		font-size: 14px;
+	}
+	.item {
+		margin-bottom: 14px;
+	}
+  }
+}
+.dialog-alarm-message-detail{
+	/deep/ .el-dialog__body{
+	padding: 0 10px 10px;
+	background-color:$themeBgColor;
+	}
+	/deep/ .el-dialog__header{
+		background-color: $themeBgColor;
+	}
+}
+
+</style>

src/views/newMap/display/index.vue

@@ -13,6 +13,7 @@
     <training-left-slider ref="trainingLeftSlider" @overallTranslation="overallTranslation" />
     <lineBoard ref="lineBoard" />
     <bottomTable ref="bottomTable" />
+    <errrorMessageBoxVue />
   </div>
 </template>
 <script>
@@ -33,6 +34,7 @@ import ChatBox from './newChat/index.vue';
 import TrainingLeftSlider from './trainingList/trainingLeftSlider';
 import LineBoard from './lineBoard';
 import BottomTable from './bottomTable';
+import errrorMessageBoxVue from './errrorMessageBox.vue';
 export default {
     name: 'DisplayDraft',
     components: {
@@ -46,7 +48,8 @@ export default {
         ChatBox,
         TrainingLeftSlider,
         LineBoard,
-        BottomTable
+        BottomTable,
+        errrorMessageBoxVue
     },
     data() {
         return {