|
|
@@ -1,5 +1,5 @@
|
|
|
<template>
|
|
|
- <div class="safeCom">
|
|
|
+ <div class="safeCom" @click="clickAlarmItem">
|
|
|
<div class="safeCom_head">
|
|
|
<i
|
|
|
:class="['iconfont', iconfonts()]"
|
|
|
@@ -10,7 +10,7 @@
|
|
|
<div
|
|
|
style="font-size: 14px; position: relative; right: 35px; top: 15px"
|
|
|
>
|
|
|
- 共{{ alarmList.length }}条
|
|
|
+ 共{{ alarmList.length }}/{{ fullTableData.length }}条
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -38,6 +38,62 @@
|
|
|
show-overflow-tooltip
|
|
|
/>
|
|
|
</el-table>
|
|
|
+ <el-dialog
|
|
|
+ v-model="showDialog"
|
|
|
+ :title="title"
|
|
|
+ top="50px"
|
|
|
+ width="75%"
|
|
|
+ modal-class="alarmDialog"
|
|
|
+ :show-close="false"
|
|
|
+ draggable
|
|
|
+ @closed="
|
|
|
+ () => {
|
|
|
+ stopUpdate = false;
|
|
|
+ }
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <el-card>
|
|
|
+ <el-table
|
|
|
+ :data="dialogTableData"
|
|
|
+ style="width: 100%"
|
|
|
+ height="420px"
|
|
|
+ border
|
|
|
+ >
|
|
|
+ <el-table-column
|
|
|
+ prop="tsName"
|
|
|
+ label="报警时间"
|
|
|
+ width="150"
|
|
|
+ show-overflow-tooltip
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="lv"
|
|
|
+ label="级别"
|
|
|
+ width="50"
|
|
|
+ show-overflow-tooltip
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="alarmName"
|
|
|
+ label="报警类型"
|
|
|
+ show-overflow-tooltip
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="description"
|
|
|
+ label="报警信息"
|
|
|
+ show-overflow-tooltip
|
|
|
+ />
|
|
|
+ <el-table-column label="操作">
|
|
|
+ <template #default="scope">
|
|
|
+ <el-button type="text" size="small" @click="confirm(scope.row)"
|
|
|
+ >确认本条</el-button
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </el-card>
|
|
|
+ <el-button class="confirmAllBtn" type="info" plain @click="confirmAll"
|
|
|
+ >确认所有报警</el-button
|
|
|
+ >
|
|
|
+ </el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -73,6 +129,10 @@ export default {
|
|
|
custom: "iconzidingyi",
|
|
|
inverter: "iconzidingyi",
|
|
|
},
|
|
|
+ showDialog: false,
|
|
|
+ dialogTableData: [],
|
|
|
+ fullTableData: [],
|
|
|
+ stopUpdate: false,
|
|
|
};
|
|
|
},
|
|
|
|
|
|
@@ -87,39 +147,87 @@ export default {
|
|
|
|
|
|
initWarningList() {
|
|
|
let alarmList = [];
|
|
|
+ let fullTableData = [];
|
|
|
+ let dialogTableData = [];
|
|
|
this.$store.state.warningList.forEach((ele) => {
|
|
|
if (
|
|
|
this.deviceType === ele.deviceType &&
|
|
|
this.alarmType === ele.alarmType
|
|
|
) {
|
|
|
- const someRes = alarmList.some((someEle) => {
|
|
|
- return `${someEle.id}${someEle.ts}` === `${ele.id}${ele.ts}`;
|
|
|
- });
|
|
|
- !someRes && alarmList.push(ele);
|
|
|
+ alarmList?.length < this.$store.state.warningListLimitLength &&
|
|
|
+ alarmList.push(ele);
|
|
|
+ dialogTableData?.length < 50 && dialogTableData.push(ele);
|
|
|
+ fullTableData.push(ele);
|
|
|
}
|
|
|
});
|
|
|
alarmList.sort((a, b) => {
|
|
|
return b.ts - a.ts;
|
|
|
});
|
|
|
- this.trimAlarmList(alarmList);
|
|
|
+ dialogTableData.sort((a, b) => {
|
|
|
+ return b.ts - a.ts;
|
|
|
+ });
|
|
|
+ fullTableData.sort((a, b) => {
|
|
|
+ return b.ts - a.ts;
|
|
|
+ });
|
|
|
this.alarmList = alarmList;
|
|
|
+ if (!this.stopUpdate) {
|
|
|
+ this.dialogTableData = dialogTableData;
|
|
|
+ }
|
|
|
+ this.fullTableData = fullTableData;
|
|
|
},
|
|
|
|
|
|
- trimAlarmList(arr) {
|
|
|
- if (arr?.length > this.$store.state.warningListLimitLength) {
|
|
|
- let subNum = arr.length - this.$store.state.warningListLimitLength;
|
|
|
- for (let i = arr.length - 1; i >= 0; i--) {
|
|
|
- if (subNum) {
|
|
|
- arr.splice(i, 1);
|
|
|
- subNum--;
|
|
|
- i--;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ clickAlarmItem() {
|
|
|
+ this.showDialog = true;
|
|
|
},
|
|
|
|
|
|
- reverseArray(arr) {
|
|
|
- return arr.reverse();
|
|
|
+ confirm(alarmItem) {
|
|
|
+ this.stopUpdate = true;
|
|
|
+ this.$confirm("您确定要执行此操作吗？", "提示", {
|
|
|
+ confirmButtonText: "确定",
|
|
|
+ cancelButtonText: "取消",
|
|
|
+ type: "warning",
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ confirmAlart([alarmItem]).then((res) => {
|
|
|
+ if (res.code === 200) {
|
|
|
+ this.BASE.showMsg({
|
|
|
+ type: "success",
|
|
|
+ msg: `${this.title}确认成功`,
|
|
|
+ });
|
|
|
+ this.$store.commit("removeWarning", alarmItem);
|
|
|
+ this.playAudioEffect();
|
|
|
+ }
|
|
|
+ this.stopUpdate = false;
|
|
|
+ });
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ this.stopUpdate = false;
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ confirmAll() {
|
|
|
+ this.stopUpdate = true;
|
|
|
+ this.$confirm("您确定要执行此操作吗？", "提示", {
|
|
|
+ confirmButtonText: "确定",
|
|
|
+ cancelButtonText: "取消",
|
|
|
+ type: "warning",
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ confirmAlart(this.dialogTableData).then((res) => {
|
|
|
+ if (res.code === 200) {
|
|
|
+ this.BASE.showMsg({
|
|
|
+ type: "success",
|
|
|
+ msg: `全部${this.title}确认成功`,
|
|
|
+ });
|
|
|
+ this.$store.commit("removeWarning", this.dialogTableData);
|
|
|
+ this.playAudioEffect();
|
|
|
+ }
|
|
|
+ this.stopUpdate = false;
|
|
|
+ });
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ this.stopUpdate = false;
|
|
|
+ });
|
|
|
},
|
|
|
},
|
|
|
|
|
|
@@ -135,6 +243,7 @@ export default {
|
|
|
.safeCom {
|
|
|
width: 100%;
|
|
|
height: calc(100% - 20px);
|
|
|
+ cursor: pointer;
|
|
|
.safeCom_head {
|
|
|
height: 50px;
|
|
|
display: flex;
|
|
|
@@ -149,4 +258,36 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+.currentAlartDialogHeader {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
</style>
|
|
|
+<style lang="scss">
|
|
|
+.alarmDialog {
|
|
|
+ .el-dialog__body {
|
|
|
+ height: 500px;
|
|
|
+ max-height: 500px;
|
|
|
+ padding: 0;
|
|
|
+ overflow: hidden;
|
|
|
+ .el-card {
|
|
|
+ width: calc(100% - 40px);
|
|
|
+ height: calc(100% - 40px);
|
|
|
+ margin: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .confirmAllBtn {
|
|
|
+ position: absolute;
|
|
|
+ right: 20px;
|
|
|
+ top: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
|
|
+<style lang="scss" >
|
|
|
+.alarmDialog {
|
|
|
+ z-index: 5100 !important;
|
|
|
+}
|
|
|
+</style>
|
