调整线路报警
This commit is contained in:
fan
parent
237b8ef4d8
commit
1e745419a5
@ -36,9 +36,9 @@
|
||||
<el-col :span="10">
|
||||
<div class="nav-border">
|
||||
<el-row>
|
||||
<el-col :span="6"><el-button style="width: 80px;" plain :style="{background: level === 'A'? '#F00': '#FFF' }" @click="clearLevel">A级警报</el-button></el-col>
|
||||
<el-col :span="6"><el-button style="width: 80px;" plain :style="{background: level === 'B'? '#F00': '#FFF' }" @click="clearLevel">B级警报</el-button></el-col>
|
||||
<el-col :span="6"><el-button style="width: 80px;" plain :style="{background: level === 'C'? '#F00': '#FFF' }" @click="clearLevel">C级警报</el-button></el-col>
|
||||
<el-col :span="6"><el-button style="width: 80px;" plain :style="{background: levelList.includes('A')? '#F00': '#FFF' }" @click="showLowAlarm('A')">A级警报</el-button></el-col>
|
||||
<el-col :span="6"><el-button style="width: 80px;" plain :style="{background: levelList.includes('B')? '#F00': '#FFF' }" @click="showLowAlarm('B')">B级警报</el-button></el-col>
|
||||
<el-col :span="6"><el-button style="width: 80px;" plain :style="{background: levelList.includes('C')? '#F00': '#FFF' }" @click="showLowAlarm('C')">C级警报</el-button></el-col>
|
||||
<el-col :span="6"><el-button style="width: 80px;" plain @click="undeveloped">记录</el-button></el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
@ -107,9 +107,9 @@
|
||||
<el-col :span="4">
|
||||
<div style="width: calc(100% - 10px);border: 2px solid #DDD9CA;border-radius: 5px;">
|
||||
<el-row style="height: 68px;display: flex; justify-content: space-between;align-items: center;">
|
||||
<div style="width: 40px;" class="div-simulate-button" :style="{background: level === 'A'? '#F00': '#FFF' }" @click="clearLevel">A</div>
|
||||
<div style="width: 40px;" class="div-simulate-button" :style="{background: level === 'B'? '#F00': '#FFF' }" @click="clearLevel">B</div>
|
||||
<div style="width: 40px;" class="div-simulate-button" :style="{background: level === 'C'? '#F00': '#FFF' }" @click="clearLevel">C</div>
|
||||
<div style="width: 40px;" class="div-simulate-button" :style="{background: levelList.includes('A')? '#F00': '#FFF' }" @click="showHimAlarm('A')">A</div>
|
||||
<div style="width: 40px;" class="div-simulate-button" :style="{background: levelList.includes('B')? '#F00': '#FFF' }" @click="showHimAlarm('B')">B</div>
|
||||
<div style="width: 40px;" class="div-simulate-button" :style="{background: levelList.includes('C')? '#F00': '#FFF' }" @click="showHimAlarm('C')">C</div>
|
||||
<img :src="voiceIcon" style="width: 40px;height: 40px;" @click="controlAudio(false)">
|
||||
</el-row>
|
||||
<el-row class="button-row">
|
||||
@ -136,6 +136,8 @@
|
||||
</el-row>
|
||||
</div>
|
||||
<notice-info ref="noticeInfo" pop-class="haerbin-01__systerm" />
|
||||
<alarm-table-low ref="alarmTableLow" />
|
||||
<alarm-table-hmi ref="alarmTableHmi" />
|
||||
<audio id="buzzer" controls loop="loop" style="width: 0;height: 0">
|
||||
<source :src="buzzerAudio" type="audio/mpeg">
|
||||
</audio>
|
||||
@ -148,11 +150,15 @@ import { EventBus } from '@/scripts/event-bus';
|
||||
import voiceOpen from '@/assets/voiceOpen.png';
|
||||
import voiceClose from '@/assets/voiceClose.png';
|
||||
import BuzzerAudio from '@/assets/buzzer.mp3';
|
||||
import AlarmTableHmi from './menuDialog/alarmTableHmi';
|
||||
import AlarmTableLow from './menuDialog/alarmTableLow';
|
||||
|
||||
export default {
|
||||
name: 'MenuBar',
|
||||
components: {
|
||||
NoticeInfo
|
||||
NoticeInfo,
|
||||
AlarmTableLow,
|
||||
AlarmTableHmi
|
||||
},
|
||||
props: {
|
||||
selected: {
|
||||
@ -181,7 +187,7 @@ export default {
|
||||
version: '',
|
||||
centralizedMap: {},
|
||||
tipContent: [],
|
||||
level: '',
|
||||
levelList: [],
|
||||
sound: false,
|
||||
buzzerAudio: BuzzerAudio
|
||||
};
|
||||
@ -256,7 +262,9 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
handleAlarm(val) {
|
||||
this.level = val.level;
|
||||
if (!this.levelList.includes(val.level)) {
|
||||
this.levelList.push(val.level);
|
||||
}
|
||||
this.controlAudio(true);
|
||||
},
|
||||
initMenu() {
|
||||
@ -342,8 +350,19 @@ export default {
|
||||
}
|
||||
});
|
||||
},
|
||||
clearLevel() {
|
||||
this.level = '';
|
||||
showHimAlarm(level) {
|
||||
const index = this.levelList.indexOf(level);
|
||||
if (index > -1) {
|
||||
this.levelList.splice(index, 1);
|
||||
}
|
||||
this.$refs.alarmTableHmi.doShow(level);
|
||||
},
|
||||
showLowAlarm(level) {
|
||||
const index = this.levelList.indexOf(level);
|
||||
if (index > -1) {
|
||||
this.levelList.splice(index, 1);
|
||||
}
|
||||
this.$refs.alarmTableLow.doShow(level);
|
||||
},
|
||||
controlAudio(val) {
|
||||
const audio = document.getElementById('buzzer');
|
||||
|
||||
@ -58,11 +58,9 @@ import NoticeInfo from '@/jmapNew/theme/components/menus/childDialog/noticeInfo'
|
||||
import CMD from '@/scripts/cmdPlugin/CommandEnum';
|
||||
import { OperationEvent } from '@/scripts/cmdPlugin/OperationHandler';
|
||||
import { TrainingMode } from '@/scripts/ConstDic';
|
||||
import AlarmTable from './menuDialog/alarmTable';
|
||||
export default {
|
||||
components: {
|
||||
NoticeInfo,
|
||||
AlarmTable
|
||||
NoticeInfo
|
||||
},
|
||||
props: {
|
||||
selected: {
|
||||
|
||||
@ -1,61 +0,0 @@
|
||||
<template>
|
||||
<el-dialog v-dialogDrag class="haerbin-01__systerm manage-user" :title="title" :visible.sync="show" width="420px" :z-index="2000" :modal="false" :close-on-click-modal="false">
|
||||
<div>
|
||||
<el-table
|
||||
:data="tableData"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-table-column prop="time" label="日期/时间" />
|
||||
<el-table-column prop="level" label="等级" />
|
||||
<el-table-column prop="address" label="设备类型" />
|
||||
<el-table-column prop="address" label="设备编号" />
|
||||
<el-table-column prop="address" label="故障号" />
|
||||
<el-table-column prop="address" label="故障描述" />
|
||||
<el-table-column prop="address" label="已恢复" />
|
||||
<el-table-column prop="address" label="恢复时间" />
|
||||
<el-table-column prop="address" label="已确认" />
|
||||
<el-table-column prop="address" label="确认人" />
|
||||
<el-table-column prop="address" label="确认时间" />
|
||||
<el-table-column prop="address" label="备注信息" />
|
||||
<el-table-column />
|
||||
</el-table>
|
||||
<el-pagination
|
||||
:current-page="currentPage"
|
||||
:page-sizes="20"
|
||||
layout="total, prev, pager, next, jumper"
|
||||
:total="totalNum"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
/>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Alarm',
|
||||
data() {
|
||||
return {
|
||||
tableData: [],
|
||||
currentPage: 0,
|
||||
totalNum: 0,
|
||||
show: false
|
||||
};
|
||||
},
|
||||
methods:{
|
||||
doShow() {
|
||||
this.show = true;
|
||||
},
|
||||
handleSizeChange() {
|
||||
|
||||
},
|
||||
handleCurrentChange() {
|
||||
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
162
src/jmapNew/theme/haerbin_01/menus/menuDialog/alarmTableHmi.vue
Normal file
162
src/jmapNew/theme/haerbin_01/menus/menuDialog/alarmTableHmi.vue
Normal file
@ -0,0 +1,162 @@
|
||||
<template>
|
||||
<el-dialog v-dialogDrag class="haerbin-01__systerm manage-user" title="报警列表" :before-close="handleClose" :visible.sync="show" width="70%" :z-index="2000" :modal="false" :close-on-click-modal="false">
|
||||
<div style="text-align: center;">
|
||||
<div style="text-align: left;width: 90%;margin-left: 5%;border: 1px solid #808080;border-radius: 5px;padding: 10px;">
|
||||
<el-row>
|
||||
<el-col :span="10" style="text-align: center;">
|
||||
<div style="display: inline-block;margin-right: 5px;">开始时间:</div>
|
||||
<el-date-picker
|
||||
v-model="startTime"
|
||||
size="small"
|
||||
type="datetime"
|
||||
placeholder="选择日期时间"
|
||||
/>
|
||||
</el-col>
|
||||
<el-col :span="10" style="text-align: center;">
|
||||
<div style="display: inline-block;margin-right: 5px;margin-left: 10px;">结束时间:</div>
|
||||
<el-date-picker
|
||||
v-model="endTime"
|
||||
size="small"
|
||||
type="datetime"
|
||||
placeholder="选择日期时间"
|
||||
/>
|
||||
</el-col>
|
||||
<el-col :span="4" style="text-align: center;">
|
||||
<el-button style="margin-left: 10px;" @click="queryData(true)">查询</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="10" style="text-align: center;">
|
||||
<div style="display: inline-block;margin-right: 5px;">设备编号:</div>
|
||||
<el-input v-model="deviceCode" placeholder="请输入内容" style="width:220px;" size="small" />
|
||||
</el-col>
|
||||
<el-col :span="10" style="text-align: center;">
|
||||
<div style="display: inline-block;margin-right: 5px;margin-left: 10px;">元素编号:</div>
|
||||
<el-input v-model="elementCode" placeholder="请输入内容" style="width:220px;" size="small" />
|
||||
</el-col>
|
||||
<el-col :span="4" style="text-align: center;">
|
||||
<el-button style="margin-left: 10px;" @click="queryData(false)">撤销查询</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div style="position: relative;height: 20px;line-height: 20px;top: -120px;text-align: left;right: -80px;background: #F0F0F0;width: 88px;">筛选条件查询</div>
|
||||
<el-row>
|
||||
<el-col :span="8">
|
||||
<el-button>消息确认</el-button>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-button>消息打印</el-button>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-button>删除备注</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-table
|
||||
:data="totalData"
|
||||
style="width: 100%"
|
||||
height="450"
|
||||
>
|
||||
<el-table-column prop="operate" label="操作">
|
||||
<template slot-scope="scope">
|
||||
<el-checkbox v-model="checkList[scope.$index]" @change="operateChange(scope)" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="level" label="报警级别" />
|
||||
<el-table-column prop="time" label="日期/时间" width="150px" />
|
||||
<el-table-column prop="address" label="报警序号" />
|
||||
<el-table-column prop="address" label="设备编号" />
|
||||
<el-table-column prop="address" label="信号编号" />
|
||||
<el-table-column prop="address" label="元素编号" />
|
||||
<el-table-column prop="recover" label="确认">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.confirmed? 'Y':'N' }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="address" label="确认人编号" width="120px" />
|
||||
<el-table-column prop="address" label="确认时间" />
|
||||
<el-table-column prop="recover" label="恢复">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.recover? 'Y':'N' }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="address" label="恢复时间" />
|
||||
<el-table-column prop="address" label="备注信息" width="200px" />
|
||||
</el-table>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'AlarmHmi',
|
||||
data() {
|
||||
return {
|
||||
currentPage: 1,
|
||||
show: false,
|
||||
level: '',
|
||||
startTime: '',
|
||||
endTime: '',
|
||||
deviceCode: '',
|
||||
elementCode: '',
|
||||
totalData: [],
|
||||
checkList: []
|
||||
};
|
||||
},
|
||||
computed:{
|
||||
alarmInfoList() {
|
||||
return this.$store.state.socket.simulationAlarmInfoList;
|
||||
},
|
||||
totalNum() {
|
||||
return this.alarmInfoList.length;
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
doShow(level) {
|
||||
this.show = true;
|
||||
this.level = level;
|
||||
this.queryData(false);
|
||||
},
|
||||
handleClose() {
|
||||
this.level = '';
|
||||
this.startTime = '';
|
||||
this.endTime = '';
|
||||
this.show = false;
|
||||
},
|
||||
operateChange(row) {
|
||||
console.log(row, '----------');
|
||||
},
|
||||
queryData(flag) {
|
||||
const list = [];
|
||||
if (!flag) {
|
||||
this.endTime = '';
|
||||
this.startTime = '';
|
||||
this.deviceCode = '';
|
||||
this.elementCode = '';
|
||||
}
|
||||
this.alarmInfoList.forEach(item => {
|
||||
let flag = true;
|
||||
if (this.level && item.level !== this.level) {
|
||||
flag = false;
|
||||
}
|
||||
if (this.endTime && Date.parse(item.time) > Date.parse(this.endTime)) {
|
||||
flag = false;
|
||||
}
|
||||
if (this.startTime && Date.parse(item.time) < Date.parse(this.startTime)) {
|
||||
flag = false;
|
||||
}
|
||||
if (flag) {
|
||||
list.push(item);
|
||||
}
|
||||
});
|
||||
this.totalData = list;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/deep/ .el-dialog .el-input {
|
||||
border: 0 !important;
|
||||
}
|
||||
|
||||
</style>
|
||||
134
src/jmapNew/theme/haerbin_01/menus/menuDialog/alarmTableLow.vue
Normal file
134
src/jmapNew/theme/haerbin_01/menus/menuDialog/alarmTableLow.vue
Normal file
@ -0,0 +1,134 @@
|
||||
<template>
|
||||
<el-dialog v-dialogDrag class="haerbin-01__systerm manage-user" title="报警列表" :before-close="handleClose" :visible.sync="show" width="70%" :z-index="2000" :modal="false" :close-on-click-modal="false">
|
||||
<div style="text-align: center;">
|
||||
<div style="text-align: left;">
|
||||
<div style="display: inline-block;margin-right: 5px;">开始时间:</div>
|
||||
<el-date-picker
|
||||
v-model="startTime"
|
||||
size="small"
|
||||
type="datetime"
|
||||
placeholder="选择日期时间"
|
||||
/>
|
||||
<div style="display: inline-block;margin-right: 5px;margin-left: 10px;">结束时间:</div>
|
||||
<el-date-picker
|
||||
v-model="endTime"
|
||||
size="small"
|
||||
type="datetime"
|
||||
placeholder="选择日期时间"
|
||||
/>
|
||||
<el-button style="margin-left: 10px;" @click="queryData">查询</el-button>
|
||||
</div>
|
||||
<el-table
|
||||
:data="tableData"
|
||||
style="width: 100%"
|
||||
height="600"
|
||||
>
|
||||
<el-table-column prop="time" label="日期/时间" width="150px" />
|
||||
<el-table-column prop="level" label="等级" />
|
||||
<el-table-column prop="address" label="设备类型" />
|
||||
<el-table-column prop="address" label="设备编号" />
|
||||
<el-table-column prop="address" label="故障号" />
|
||||
<el-table-column prop="address" label="故障描述" />
|
||||
<el-table-column prop="recover" label="已恢复">
|
||||
<template slot-scope="scope">
|
||||
<el-checkbox v-model="scope.row.recover" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="address" label="恢复时间" />
|
||||
<el-table-column prop="confirm" label="已确认">
|
||||
<template slot-scope="scope">
|
||||
<el-checkbox v-model="scope.row.confirmed" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="address" label="确认人" />
|
||||
<el-table-column prop="address" label="确认时间" />
|
||||
<el-table-column prop="address" label="备注信息" width="200px" />
|
||||
</el-table>
|
||||
<el-pagination
|
||||
:current-page="currentPage"
|
||||
:page-size="20"
|
||||
layout="total, prev, pager, next, jumper"
|
||||
:total="totalNum"
|
||||
@current-change="handleCurrentChange"
|
||||
/>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'AlarmLow',
|
||||
data() {
|
||||
return {
|
||||
currentPage: 1,
|
||||
show: false,
|
||||
level: '',
|
||||
startTime: '',
|
||||
endTime: '',
|
||||
totalData: [],
|
||||
tableData: []
|
||||
};
|
||||
},
|
||||
computed:{
|
||||
alarmInfoList() {
|
||||
return this.$store.state.socket.simulationAlarmInfoList;
|
||||
},
|
||||
totalNum() {
|
||||
return this.alarmInfoList.length;
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
doShow(level) {
|
||||
this.show = true;
|
||||
this.level = level;
|
||||
this.queryData();
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
this.currentPage = val;
|
||||
this.pageQuery();
|
||||
},
|
||||
handleClose() {
|
||||
this.level = '';
|
||||
this.startTime = '';
|
||||
this.endTime = '';
|
||||
this.show = false;
|
||||
},
|
||||
queryData() {
|
||||
const list = [];
|
||||
this.alarmInfoList.forEach(item => {
|
||||
let flag = true;
|
||||
if (this.level && item.level !== this.level) {
|
||||
flag = false;
|
||||
}
|
||||
if (this.endTime && Date.parse(item.time) > Date.parse(this.endTime)) {
|
||||
flag = false;
|
||||
}
|
||||
if (this.startTime && Date.parse(item.time) < Date.parse(this.startTime)) {
|
||||
flag = false;
|
||||
}
|
||||
if (flag) {
|
||||
list.push(item);
|
||||
}
|
||||
});
|
||||
this.totalData = list;
|
||||
this.pageQuery();
|
||||
},
|
||||
pageQuery() {
|
||||
const list = [];
|
||||
this.totalData.forEach((item, index) => {
|
||||
if (index >= 20 * (this.currentPage - 1) && index < 20 * this.currentPage) {
|
||||
list.push(item);
|
||||
}
|
||||
});
|
||||
this.tableData = list;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/deep/ .el-dialog .el-input {
|
||||
border: 0 !important;
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -141,6 +141,7 @@ function handle(state, data) {
|
||||
break;
|
||||
case 'Simulation_Alarm':
|
||||
state.simulationAlarmInfo = msg;
|
||||
state.simulationAlarmInfoList.push(msg);
|
||||
break;
|
||||
}
|
||||
|
||||
|
||||
@ -2,8 +2,8 @@ export function getBaseUrl() {
|
||||
let BASE_API;
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
// BASE_API = 'https://joylink.club/jlcloud';
|
||||
BASE_API = 'https://test.joylink.club/jlcloud';
|
||||
// BASE_API = 'http://192.168.8.107:9000'; // 袁琪
|
||||
// BASE_API = 'https://test.joylink.club/jlcloud';
|
||||
BASE_API = 'http://192.168.8.107:9000'; // 袁琪
|
||||
// BASE_API = 'http://192.168.3.5:9000'; // 袁琪
|
||||
// BASE_API = 'http://192.168.8.144:9000'; // 旭强
|
||||
// BASE_API = 'http://192.168.3.175:9000'; // 张赛
|
||||
|
||||
Loading…
Reference in New Issue
Block a user