|
@@ -79,58 +79,67 @@
|
|
<el-dialog width="50%" style="top:15%" :visible.sync="outerVisible" :close-on-click-modal="false">
|
|
<el-dialog width="50%" style="top:15%" :visible.sync="outerVisible" :close-on-click-modal="false">
|
|
<div slot="title" class="dialog-title flex justify-between">
|
|
<div slot="title" class="dialog-title flex justify-between">
|
|
<div>
|
|
<div>
|
|
- <el-button>全部确认</el-button>
|
|
|
|
- <el-button @click="filterInfo(null)">全部告警</el-button>
|
|
|
|
- <el-button @click="filterInfo('tunnel')">通道告警</el-button>
|
|
|
|
- <el-button @click="filterInfo('report')">上报告警</el-button>
|
|
|
|
|
|
+ <el-button @click="acknowledgeAll()">全部确认</el-button>
|
|
|
|
+ <el-button @click="getAbnormalAlarms('')">全部告警</el-button>
|
|
|
|
+ <el-button @click="getAbnormalAlarms('E1')">通道告警</el-button>
|
|
|
|
+ <el-button @click="getAbnormalAlarms('E2')">上报告警</el-button>
|
|
|
|
+ <el-button @click="getAbnormalAlarms('E3')">站端硬件告警</el-button>
|
|
|
|
+ <el-button @click="getAbnormalAlarms('E4')">中心解析告警</el-button>
|
|
|
|
+ <el-button @click="getAbnormalAlarms('E5')">通用告警</el-button>
|
|
<el-button @click="innerVisible = true">报警配置</el-button>
|
|
<el-button @click="innerVisible = true">报警配置</el-button>
|
|
</div>
|
|
</div>
|
|
<div class="dialog-title-badge flex justify-between">
|
|
<div class="dialog-title-badge flex justify-between">
|
|
- <el-badge :value="badgeValue.alarm">
|
|
|
|
|
|
+ <el-badge :value="this.badgeValue.alarm">
|
|
<img src="../../assets/images/svg/remind.svg" width="20px"/>
|
|
<img src="../../assets/images/svg/remind.svg" width="20px"/>
|
|
</el-badge>
|
|
</el-badge>
|
|
- <el-badge :value="badgeValue.confirm">
|
|
|
|
- <img src="../../assets/images/svg/right.svg" width="20px"/>
|
|
|
|
- </el-badge>
|
|
|
|
|
|
+<!-- <el-badge :value="badgeValue.confirm">-->
|
|
|
|
+<!-- <img src="../../assets/images/svg/right.svg" width="20px"/>-->
|
|
|
|
+<!-- </el-badge>-->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div>
|
|
<el-table
|
|
<el-table
|
|
- :data="tableData.slice((this.page.currentPage - 1)*this.page.pageSize,this.page.currentPage * this.page.pageSize)"
|
|
|
|
|
|
+ :data="tableDataAlarm"
|
|
border max-height="300px"
|
|
border max-height="300px"
|
|
|
|
+ v-loading="loadingAlarm"
|
|
style="width: 100%">
|
|
style="width: 100%">
|
|
<el-table-column
|
|
<el-table-column
|
|
- prop="name" align="center"
|
|
|
|
|
|
+ prop="stationCode" align="center" :formatter="formatStation"
|
|
label="场站名称"
|
|
label="场站名称"
|
|
>
|
|
>
|
|
</el-table-column>
|
|
</el-table-column>
|
|
<el-table-column
|
|
<el-table-column
|
|
- prop="date" align="center"
|
|
|
|
- label="报警时间" :formatter="formatDate"
|
|
|
|
|
|
+ prop="startTime" align="center"
|
|
|
|
+ label="报警开始时间" :formatter="formatStartDate"
|
|
|
|
+ >
|
|
|
|
+ </el-table-column>
|
|
|
|
+ <el-table-column
|
|
|
|
+ prop="endTime" align="center"
|
|
|
|
+ label="报警结束时间" :formatter="formatEndDate"
|
|
>
|
|
>
|
|
</el-table-column>
|
|
</el-table-column>
|
|
<el-table-column
|
|
<el-table-column
|
|
- prop="describe" align="center"
|
|
|
|
|
|
+ prop="msg" align="center"
|
|
label="报警描述">
|
|
label="报警描述">
|
|
</el-table-column>
|
|
</el-table-column>
|
|
<el-table-column
|
|
<el-table-column
|
|
prop="operate" align="center"
|
|
prop="operate" align="center"
|
|
label="操作">
|
|
label="操作">
|
|
- <template slot-scope="scope">
|
|
|
|
- <img src="../../assets/images/svg/remind.svg" width="20px" v-if="scope.row.operate === 1"/>
|
|
|
|
- <img src="../../assets/images/svg/right.svg" width="20px" v-if="scope.row.operate === 0"/>
|
|
|
|
|
|
+ <template v-slot="{ row }">
|
|
|
|
+ <img src="../../assets/images/svg/remind.svg" @click="acknowledge(row)" width="20px"/>
|
|
|
|
+<!-- <img src="../../assets/images/svg/right.svg" width="20px"/>-->
|
|
</template>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table-column>
|
|
</el-table>
|
|
</el-table>
|
|
<div class="block">
|
|
<div class="block">
|
|
<el-pagination
|
|
<el-pagination
|
|
- @size-change="handleSizeChange"
|
|
|
|
- @current-change="handleCurrentChange"
|
|
|
|
- :current-page=this.page.currentPage
|
|
|
|
|
|
+ @size-change="handleSizeChangeAlarm"
|
|
|
|
+ @current-change="handleCurrentChangeAlarm"
|
|
|
|
+ :current-page=this.alarmPage.currentPage
|
|
:page-sizes="[10, 15, 30, 50]"
|
|
:page-sizes="[10, 15, 30, 50]"
|
|
- :page-size=this.page.pageSize
|
|
|
|
|
|
+ :page-size=this.alarmPage.pageSize
|
|
layout="total, sizes, prev, pager, next, jumper"
|
|
layout="total, sizes, prev, pager, next, jumper"
|
|
- :total=this.page.total>
|
|
|
|
|
|
+ :total=this.alarmPage.total>
|
|
</el-pagination>
|
|
</el-pagination>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@@ -139,7 +148,7 @@
|
|
title="通道告警"
|
|
title="通道告警"
|
|
:visible.sync="innerVisible"
|
|
:visible.sync="innerVisible"
|
|
append-to-body>
|
|
append-to-body>
|
|
-<!-- TODO 移植v3 -->
|
|
|
|
|
|
+ <!-- TODO 移植v3 -->
|
|
|
|
|
|
</el-dialog>
|
|
</el-dialog>
|
|
</el-dialog>
|
|
</el-dialog>
|
|
@@ -161,8 +170,9 @@ export default {
|
|
sysInterval: null,
|
|
sysInterval: null,
|
|
outerVisible: false,
|
|
outerVisible: false,
|
|
innerVisible: false,
|
|
innerVisible: false,
|
|
- tableData:[],
|
|
|
|
- tableDataBak:[],
|
|
|
|
|
|
+ tableDataAlarm: [],
|
|
|
|
+ loadingAlarm:false,
|
|
|
|
+ tableDataAlarmBak: [],
|
|
digitalDisk: [{
|
|
digitalDisk: [{
|
|
name: '实际功率',
|
|
name: '实际功率',
|
|
num: '13591'
|
|
num: '13591'
|
|
@@ -189,15 +199,23 @@ export default {
|
|
rate: 999
|
|
rate: 999
|
|
},
|
|
},
|
|
// 告警统计值
|
|
// 告警统计值
|
|
- badgeValue:{
|
|
|
|
- alarm:0,
|
|
|
|
- confirm:0
|
|
|
|
|
|
+ badgeValue: {
|
|
|
|
+ alarm: 0,
|
|
|
|
+ confirm: 0
|
|
},
|
|
},
|
|
page: {
|
|
page: {
|
|
total: 0, // 总页数
|
|
total: 0, // 总页数
|
|
currentPage: 1, // 当前页数
|
|
currentPage: 1, // 当前页数
|
|
pageSize: 10 // 每页显示多少条
|
|
pageSize: 10 // 每页显示多少条
|
|
},
|
|
},
|
|
|
|
+ alarmPage: {
|
|
|
|
+ total: 0, // 总页数
|
|
|
|
+ currentPage: 1, // 当前页数
|
|
|
|
+ pageSize: 10 // 每页显示多少条
|
|
|
|
+ },
|
|
|
|
+ stationList:[],
|
|
|
|
+ alarmType: ''
|
|
|
|
+
|
|
}
|
|
}
|
|
},
|
|
},
|
|
mounted() {
|
|
mounted() {
|
|
@@ -215,43 +233,88 @@ export default {
|
|
this.$router.push({path: "/configManager/electricField"})
|
|
this.$router.push({path: "/configManager/electricField"})
|
|
},
|
|
},
|
|
openAlarm() {
|
|
openAlarm() {
|
|
|
|
+ this.alarmPage = {
|
|
|
|
+ total: 0, // 总页数
|
|
|
|
+ currentPage: 1, // 当前页数
|
|
|
|
+ pageSize: 10 // 每页显示多少条
|
|
|
|
+ }
|
|
|
|
+ this.getAbnormalAlarms("")
|
|
this.outerVisible = true
|
|
this.outerVisible = true
|
|
},
|
|
},
|
|
init() {
|
|
init() {
|
|
- this.drawTable()
|
|
|
|
|
|
+ this.getStationCode()
|
|
|
|
+ this.drawTable()
|
|
this.drawChart()
|
|
this.drawChart()
|
|
},
|
|
},
|
|
- drawTable(){
|
|
|
|
- let data = [
|
|
|
|
- {name:'xxx',date:1728700191000,describe:'xxxx',operate:1,type:'report'},
|
|
|
|
- {name:'xxx',date:1728613791000,describe:'xxxx',operate:1,type:'tunnel'},
|
|
|
|
- {name:'xxx',date:1728440991000,describe:'xxxx',operate:1,type:'report'},
|
|
|
|
- {name:'xxx',date:1728527391000,describe:'xxxx',operate:1,type:''},
|
|
|
|
- {name:'xxx',date:1728354591000,describe:'xxxx',operate:0,type:''}
|
|
|
|
- ]
|
|
|
|
- this.tableDataBak = data
|
|
|
|
- this.tableData = data
|
|
|
|
- this.page.total = this.tableData.length
|
|
|
|
- this.badgeValue.confirm = this.tableData.filter(w=>w.operate === 0).length
|
|
|
|
- this.badgeValue.alarm = this.tableData.filter(w=>w.operate === 1).length
|
|
|
|
|
|
+ async getStationCode() {
|
|
|
|
+ await this.$axios({url: '/electricfield/all', method: 'get'}).then(response => {
|
|
|
|
+ this.stationList = response.data
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ drawTable() {
|
|
|
|
+ // let data = [
|
|
|
|
+ // {name: 'xxx', date: 1728700191000, describe: 'xxxx', operate: 1, type: 'report'},
|
|
|
|
+ // {name: 'xxx', date: 1728613791000, describe: 'xxxx', operate: 1, type: 'tunnel'},
|
|
|
|
+ // {name: 'xxx', date: 1728440991000, describe: 'xxxx', operate: 1, type: 'report'},
|
|
|
|
+ // {name: 'xxx', date: 1728527391000, describe: 'xxxx', operate: 1, type: ''},
|
|
|
|
+ // {name: 'xxx', date: 1728354591000, describe: 'xxxx', operate: 0, type: ''}
|
|
|
|
+ // ]
|
|
|
|
+ // this.tableDataAlarmBak = data
|
|
|
|
+ // this.tableDataAlarm = data
|
|
|
|
+ // this.page.total = this.tableDataAlarm.length
|
|
|
|
+ this.getAlarmSize()
|
|
|
|
+
|
|
|
|
+ // this.badgeValue.confirm = this.tableDataAlarm.filter(w => w.operate === 0).length
|
|
|
|
+ // this.badgeValue.alarm = this.tableDataAlarm.filter(w => w.operate === 1).length
|
|
|
|
+ },
|
|
|
|
+ getAlarmSize(){
|
|
|
|
+ this.$axios.get('/abnormalAlarm/alarmCountStatus1').then(response => {
|
|
|
|
+ this.badgeValue.alarm = response.data
|
|
|
|
+ }).catch(() => {
|
|
|
|
+
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ getAbnormalAlarms(prop){
|
|
|
|
+ this.alarmPage = {
|
|
|
|
+ total: 0, // 总页数
|
|
|
|
+ currentPage: 1, // 当前页数
|
|
|
|
+ pageSize: 10 // 每页显示多少条
|
|
|
|
+ }
|
|
|
|
+ this.alarmType = prop
|
|
|
|
+ this.filterInfo()
|
|
},
|
|
},
|
|
- filterInfo(prop){
|
|
|
|
- if(prop !== null){
|
|
|
|
- this.tableData = this.tableDataBak.filter(w=>w.type === prop)
|
|
|
|
- }else{
|
|
|
|
- this.tableData = JSON.parse(JSON.stringify(this.tableDataBak))
|
|
|
|
|
|
+ filterInfo() {
|
|
|
|
+ this.getAlarmSize()
|
|
|
|
+ this.loadingAlarm = true
|
|
|
|
+ let queryParams = {
|
|
|
|
+ currentPage: this.alarmPage.currentPage,
|
|
|
|
+ pageSize: this.alarmPage.pageSize,
|
|
|
|
+ alarmType: this.alarmType
|
|
}
|
|
}
|
|
|
|
+ this.$axios.get('/abnormalAlarm/dashboard', {params: queryParams}).then(response => {
|
|
|
|
+ this.tableDataAlarm = response.data.records
|
|
|
|
+ this.alarmPage.total = response.data.total
|
|
|
|
+ this.loadingAlarm = false
|
|
|
|
+ }).catch(() => {
|
|
|
|
+ this.loadingAlarm = false
|
|
|
|
+ })
|
|
|
|
+
|
|
|
|
+ // if (prop !== null) {
|
|
|
|
+ // this.tableDataAlarm = this.tableDataAlarmBak.filter(w => w.type === prop)
|
|
|
|
+ // } else {
|
|
|
|
+ // this.tableDataAlarm = JSON.parse(JSON.stringify(this.tableDataAlarmBak))
|
|
|
|
+ // }
|
|
|
|
|
|
},
|
|
},
|
|
/*模拟数据*/
|
|
/*模拟数据*/
|
|
- mockData(num){
|
|
|
|
|
|
+ mockData(num) {
|
|
let data = []
|
|
let data = []
|
|
- for(let i=0;i<=96;i++){
|
|
|
|
- data.push(Math.floor(Math.round(Math.random() *10) * num,2))
|
|
|
|
|
|
+ for (let i = 0; i <= 96; i++) {
|
|
|
|
+ data.push(Math.floor(Math.round(Math.random() * 10) * num, 2))
|
|
}
|
|
}
|
|
return data
|
|
return data
|
|
},
|
|
},
|
|
- drawChart(){
|
|
|
|
|
|
+ drawChart() {
|
|
gaugeOption.series[0].data[0].value = 10
|
|
gaugeOption.series[0].data[0].value = 10
|
|
gaugeOption.series[1].data[0].value = 10
|
|
gaugeOption.series[1].data[0].value = 10
|
|
gaugeOption.series[0].max = 39
|
|
gaugeOption.series[0].max = 39
|
|
@@ -270,18 +333,64 @@ export default {
|
|
myChart1.zhChart.resize();
|
|
myChart1.zhChart.resize();
|
|
});
|
|
});
|
|
},
|
|
},
|
|
- formatDate(row){
|
|
|
|
- return formatToDateTime(new Date(row.date))
|
|
|
|
|
|
+ formatStartDate(row) {
|
|
|
|
+ return formatToDateTime(row.startTime)
|
|
|
|
+ },
|
|
|
|
+ formatEndDate(row){
|
|
|
|
+ if(row.endTime){
|
|
|
|
+ return formatToDateTime(row.startTime)
|
|
|
|
+ }else {
|
|
|
|
+ return "未结束"
|
|
|
|
+ }
|
|
},
|
|
},
|
|
- handleSizeChange(val) {
|
|
|
|
- this.page.pageSize = val
|
|
|
|
- this.page.currentPage = 1
|
|
|
|
- // this.getTableList()
|
|
|
|
|
|
+ formatStation(row) {
|
|
|
|
+ let name= '未知场站名称'
|
|
|
|
+ this.stationList.forEach(s=>{
|
|
|
|
+ if(row.stationCode == s.value){
|
|
|
|
+ name = s.label
|
|
|
|
+ return
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ return name
|
|
|
|
+ },
|
|
|
|
+ handleSizeChangeAlarm(val) {
|
|
|
|
+ this.alarmPage.pageSize = val
|
|
|
|
+ this.alarmPage.currentPage = 1
|
|
|
|
+ this.filterInfo()
|
|
|
|
|
|
},
|
|
},
|
|
- handleCurrentChange(val) {
|
|
|
|
- this.page.currentPage = val
|
|
|
|
- // this.getTableList()
|
|
|
|
|
|
+ handleCurrentChangeAlarm(val) {
|
|
|
|
+ this.alarmPage.currentPage = val
|
|
|
|
+ this.filterInfo()
|
|
|
|
+ },
|
|
|
|
+ acknowledgeAll(){
|
|
|
|
+ this.$confirm('是否确认执行"所有场站告警全部确认"操作?', '提示', {
|
|
|
|
+ confirmButtonText: '确定',
|
|
|
|
+ cancelButtonText: '取消',
|
|
|
|
+ type: 'warning'
|
|
|
|
+ }).then(() => {
|
|
|
|
+ this.$axios.get('/abnormalAlarm/acknowledgeAll').then(response => {
|
|
|
|
+ this.filterInfo()
|
|
|
|
+ this.$message.info("确认成功!")
|
|
|
|
+ }).catch(() => {
|
|
|
|
+ this.loading = false
|
|
|
|
+ })
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ acknowledge(row) {
|
|
|
|
+ this.$confirm('是否对 【' + this.formatStation(row) + ':' +row.msg + '】进行"确认"操作?', '提示', {
|
|
|
|
+ confirmButtonText: '确定',
|
|
|
|
+ cancelButtonText: '取消',
|
|
|
|
+ type: 'warning'
|
|
|
|
+ }).then(() => {
|
|
|
|
+ row.status = 1
|
|
|
|
+ this.$axios.post('/abnormalAlarm/updateStatus1', row).then(response => {
|
|
|
|
+ this.$message.info("【" + row.msg + "】 已确认!")
|
|
|
|
+ this.filterInfo()
|
|
|
|
+ }).catch(() => {
|
|
|
|
+ this.loading = false
|
|
|
|
+ })
|
|
|
|
+ })
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
@@ -442,15 +551,19 @@ $top-container-height: 8rem;
|
|
background-position: center;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-repeat: no-repeat;
|
|
}
|
|
}
|
|
-.dialog-title{
|
|
|
|
|
|
+
|
|
|
|
+.dialog-title {
|
|
width: 90%;
|
|
width: 90%;
|
|
}
|
|
}
|
|
-.dialog-title-badge{
|
|
|
|
|
|
+
|
|
|
|
+.dialog-title-badge {
|
|
width: 10%;
|
|
width: 10%;
|
|
|
|
+
|
|
::v-deep .el-badge__content.is-fixed {
|
|
::v-deep .el-badge__content.is-fixed {
|
|
top: 10px;
|
|
top: 10px;
|
|
right: 5px;
|
|
right: 5px;
|
|
}
|
|
}
|
|
|
|
+
|
|
::v-deep .el-badge__content {
|
|
::v-deep .el-badge__content {
|
|
background-color: transparent;
|
|
background-color: transparent;
|
|
font-size: 14px;
|
|
font-size: 14px;
|