修改看板

IOT
夜笙歌 2 months ago
parent 7f13a635aa
commit f485b0889f

@ -10,10 +10,10 @@
<div class="span1" style="top: 23.5%;left: 24%;">运行速度</div> <div class="span1" style="top: 23.5%;left: 24%;">运行速度</div>
<div class="span1" style="top: 29.8%;left: 24%;">升降状态</div> <div class="span1" style="top: 29.8%;left: 24%;">升降状态</div>
<div class="span1" style="top: 36.2%;left: 24%;">实时位置</div> <div class="span1" style="top: 36.2%;left: 24%;">实时位置</div>
<div class="info1" style="top: 17.3%;right: 64.5%;color:#a80d1b">{{ AlarmInfo.deviceStatus }}</div> <div class="info1" style="top: 17.3%;right: 64.5%;color:#a80d1b">{{ setDeviceStatus(DeviceInfo.deviceStatus) }}</div>
<div class="info1" style="top: 23.5%;right: 64.5%;">{{ AlarmInfo.runSpeed }}m/s</div> <div class="info1" style="top: 23.5%;right: 64.5%;">{{ DeviceInfo.runSpeed }}m/s</div>
<div class="info1" style="top: 29.8%;right: 64.5%;">{{ AlarmInfo.liftStatus }}</div> <div class="info1" style="top: 29.8%;right: 64.5%;">{{ setLiftStatus(DeviceInfo.liftStatus) }}</div>
<div class="info1" style="top: 36.2%;right: 64.5%;">位置{{ AlarmInfo.realAddr }}#</div> <div class="info1" style="top: 36.2%;right: 64.5%;">位置{{ DeviceInfo.realAddr }}</div>
<div class="span2" style="top: 49.6%;left: 6%;">平均温度</div> <div class="span2" style="top: 49.6%;left: 6%;">平均温度</div>
@ -43,66 +43,68 @@
<el-button type="primary" class="analyse" size="mini">告警分析</el-button> <el-button type="primary" class="analyse" size="mini">告警分析</el-button>
<div class="table"> <div class="table">
<div style="background-color: #1077bc19"> <div style="background-color: #1077bc19">
<div class="scrollTableItem" style="width:20%;color:#65c2f3;font-weight: bold;"> <div class="scrollTableItem" style="width:40%;color:#65c2f3;font-weight: bold;">
报警开始时间 报警时间
</div> </div>
<div class="scrollTableItem" style="width:8%;color:#65c2f3;font-weight: bold;"> <div class="scrollTableItem" style="width:10%;color:#65c2f3;font-weight: bold;">
报警类型 报警类型
</div> </div>
<div class="scrollTableItem" style="width:8%;color:#65c2f3;font-weight: bold;"> <div class="scrollTableItem" style="width:10%;color:#65c2f3;font-weight: bold;">
报警来源 报警来源
</div> </div>
<div class="scrollTableItem" style="width:8%;color:#65c2f3;font-weight: bold;"> <div class="scrollTableItem" style="width:15%;color:#65c2f3;font-weight: bold;">
告警等级 报警位置
</div>
<div class="scrollTableItem" style="width:13%;color:#65c2f3;font-weight: bold;">
报警对象
</div> </div>
<div class="scrollTableItem" style="width:18%;color:#65c2f3;font-weight: bold;"> <div class="scrollTableItem" style="width:15%;color:#65c2f3;font-weight: bold;">
报警内容 报警内容
</div> </div>
<div class="scrollTableItem" style="width:8%;color:#65c2f3;font-weight: bold;"> <div class="scrollTableItem" style="width:10%;color:#65c2f3;font-weight: bold;">
采集资源 是否处理
</div>
<div class="scrollTableItem" style="width:15%;color:#65c2f3;font-weight: bold;">
操作
</div> </div>
<!-- <div class="scrollTableItem" style="width:8%;color:#65c2f3;font-weight: bold;">-->
<!-- 采集资源-->
<!-- </div>-->
<!-- <div class="scrollTableItem" style="width:15%;color:#65c2f3;font-weight: bold;">-->
<!-- 操作-->
<!-- </div>-->
</div> </div>
<vue-seamless-scroll <vue-seamless-scroll
:class-option="scrollTableOption" :class-option="scrollTableOption"
:data="scrollTableData" :data="AlarmInfo"
class="case-item" class="case-item"
style="height: calc(100% - 30px);overflow: hidden;" style="height: calc(100% - 30px);overflow: hidden;"
> >
<div <div
v-for="(item, index) in scrollTableData" v-for="(item, index) in AlarmInfo"
:key="index" :key="index"
> >
<div :style='"background-color:" + ((index % 2 === 0)? "#1077bc19":"#1077bc05") '> <div :style='"background-color:" + ((index % 2 === 0)? "#1077bc19":"#1077bc05") '>
<div class="scrollTableItem" style="width:20%;color:#65c2f3;"> <div class="scrollTableItem" style="width:40%;color:#65c2f3;">
{{ item.value1 }} {{ item.alarmTime }}
</div> </div>
<div class="scrollTableItem" style="width:8%;color:#65c2f3;"> <div class="scrollTableItem" style="width:10%;color:#65c2f3;">
{{ item.value2 }} {{ item.alarmType }}
</div> </div>
<div class="scrollTableItem" style="width:8%;color:#65c2f3;"> <div class="scrollTableItem" style="width:10%;color:#65c2f3;">
{{ item.value3 }} <span v-if="item.alarmSource ==1"></span>
<span v-if="item.alarmSource ==2"></span>
</div> </div>
<div class="scrollTableItem" style="width:8%;color:#65c2f3;"> <div class="scrollTableItem" style="width:15%;color:#65c2f3;">
{{ item.value4 }} {{ item.alarmAddr }}
</div>
<div class="scrollTableItem" style="width:13%;color:#65c2f3;">
{{ item.value5 }}
</div>
<div class="scrollTableItem" style="width:18%;color:#65c2f3;">
{{ item.value6 }}
</div>
<div class="scrollTableItem" style="width:8%;color:#65c2f3;">
{{ item.value7 }}
</div> </div>
<div class="scrollTableItem" style="width:15%;color:#65c2f3;"> <div class="scrollTableItem" style="width:15%;color:#65c2f3;">
操作 {{ item.alarmContent }}
</div>
<div class="scrollTableItem" style="width:10%;color:#65c2f3;">
<span v-if="item.isFlag ==1"></span>
<span v-if="item.isFlag ==2"></span>
</div> </div>
<!-- <div class="scrollTableItem" style="width:8%;color:#65c2f3;">-->
<!-- {{ item.value7 }}-->
<!-- </div>-->
<!-- <div class="scrollTableItem" style="width:15%;color:#65c2f3;">-->
<!-- 操作-->
<!-- </div>-->
</div> </div>
</div> </div>
</vue-seamless-scroll> </vue-seamless-scroll>
@ -591,11 +593,29 @@ export default {
}) })
}, },
methods: { methods: {
setDeviceStatus(e){
if(e == 1){
return '自动'
}
if(e == 2){
return '本地'
}
if(e == 3){
return '报警'
}
},
setLiftStatus(e){
if(e == 1){
return '正常'
}else{
return '报警'
}
},
getData() { getData() {
let _this = this let _this = this
const socket = new WebSocket('ws://192.168.2.165:7181/ws'); const socket = new WebSocket('ws://192.168.202.241:7181/ws');
socket.onopen = function (event) { socket.onopen = function (event) {
console.log('WebSocket 连接已打开'); console.log('WebSocket 连接已打开');

@ -51,7 +51,7 @@
报警来源 报警来源
</div> </div>
<div class="scrollTableItem" style="width:16%;color:#65c2f3;font-weight: bold;"> <div class="scrollTableItem" style="width:16%;color:#65c2f3;font-weight: bold;">
告警等级 报警类型
</div> </div>
<div class="scrollTableItem" style="width:16%;color:#65c2f3;font-weight: bold;"> <div class="scrollTableItem" style="width:16%;color:#65c2f3;font-weight: bold;">
报警内容 报警内容
@ -75,13 +75,14 @@
{{ item.recordTime }} {{ item.recordTime }}
</div> </div>
<div class="scrollTableItem" style="width:16%;color:#65c2f3;"> <div class="scrollTableItem" style="width:16%;color:#65c2f3;">
{{ item.value2 }} {{ item.busbarAlias }}
<!-- 智能巡检-->
</div> </div>
<div class="scrollTableItem" style="width:16%;color:#65c2f3;"> <div class="scrollTableItem" style="width:16%;color:#65c2f3;">
{{ item.value3 }} {{ item.alarmType}}
</div> </div>
<div class="scrollTableItem" style="width:16%;color:#65c2f3;"> <div class="scrollTableItem" style="width:16%;color:#65c2f3;">
{{ item.value4 }} {{ item.alarmContent }}
</div> </div>
<div class="scrollTableItem" style="width:30%;color:#65c2f3;"> <div class="scrollTableItem" style="width:30%;color:#65c2f3;">
<el-button type="primary" size="mini">查看</el-button> <el-button type="primary" size="mini">查看</el-button>
@ -106,6 +107,7 @@ import {
} from "@/api/board/index2"; } from "@/api/board/index2";
export default { export default {
dicts:['alarm_type'],
data() { data() {
return { return {
scrollTableOption: { scrollTableOption: {
@ -165,8 +167,12 @@ export default {
}, },
mounted() { mounted() {
this.getData() this.getData()
this.setAlarmType()
}, },
methods: { methods: {
setAlarmType(e){
console.log(this.dict.type.alarm_type)
},
getData(){ getData(){
baseMonitorInfoList().then(e=>{ baseMonitorInfoList().then(e=>{

Loading…
Cancel
Save