<script>
|
import HomeList from "@/views/dataTest/movingRingSystem/HomeList.vue";
|
import { getBattGroupInfo } from "@/views/dataMager/js/battGroupMager";
|
import ContentBox from "@/components/ContentBox.vue";
|
import HdwLight from "@/components/HdwLight.vue";
|
import getIntelDevState from "@/views/dataTest/js/getIntelDevState";
|
import IntelDevStateTools from "@/views/dataTest/components/IntelDevStateTools.vue";
|
import IntelCircuit from "@/views/dataTest/components/diagrams/intelCircuit/index.vue";
|
import createWs from "@/assets/js/websocket";
|
import ezVideo from "@/components/ezVideo";
|
import { getBit } from "@/assets/js/const/const_storage";
|
|
const WSMixin = createWs("Intelligent");
|
|
export default {
|
name: "movingRingSysteRrealTime",
|
mixins: [WSMixin],
|
components: {
|
IntelCircuit,
|
IntelDevStateTools,
|
HdwLight,
|
ContentBox,
|
HomeList,
|
ezVideo,
|
},
|
data() {
|
return {
|
esVideoDialog: false,
|
esVideoSn: "",
|
homeListShow: true,
|
batt: {},
|
acTabs: "eleLine",
|
stateList: getIntelDevState(),
|
devData: {
|
dcdc1Errcode: 0,
|
dcdc1Inputcurr: 0,
|
dcdc1Inputvol: 0,
|
dcdc1Outputcurr: 0,
|
dcdc1Outputvol: 0,
|
dcdc1Temp: 0,
|
dcdc2Errcode: 0,
|
dcdc2Inputcurr: 0,
|
dcdc2Inputvol: 0,
|
dcdc2Outputcurr: 0,
|
dcdc2Outputvol: 0,
|
dcdc2Temp: 0,
|
devId: 0,
|
num: 0,
|
recordTime: "1980-01-01 00:00:00",
|
},
|
diagram: {
|
isConnect: false,
|
update: 0,
|
},
|
};
|
},
|
watch: {
|
"$route.params.BattGroupId"(battGroupId) {
|
this.$nextTick(() => {
|
this.getBattGroupInfo(battGroupId);
|
});
|
},
|
},
|
methods: {
|
showEsVideoDialog() {
|
this.esVideoDialog = true;
|
this.$nextTick(()=>{
|
this.$modal.show("videoModal");
|
});
|
},
|
closeEsVideoDialog() {
|
this.$modal.hide("videoModal");
|
this.$nextTick(()=>{
|
this.esVideoDialog = false;
|
});
|
},
|
getBattGroupInfo(battGroupId) {
|
this.homeListShow = false;
|
getBattGroupInfo(battGroupId)
|
.then((res) => {
|
res = res.data;
|
if (res.code) {
|
this.leafClick(res.data[0]);
|
} else {
|
this.$layer.msg("未获取到电池组的信息");
|
}
|
})
|
.catch((error) => {
|
console.log(error);
|
});
|
},
|
toggleChange() {
|
this.resize();
|
},
|
leafClick(data) {
|
this.batt = data;
|
this.esVideoSn = data.videoUrl;
|
this.$nextTick(() => {
|
// 开启循环请求
|
this.sendMessage();
|
});
|
},
|
resize() {},
|
tabClick() {},
|
onWSOpen() {
|
this.$nextTick(() => {
|
this.sendMessage();
|
});
|
},
|
sendMessage() {
|
let batt = this.batt;
|
if (!batt.battGroupId || !this.isWSOpen) {
|
return false;
|
}
|
// console.log("=====9=", params, JSON.stringify(params));
|
this.SOCKET.send(batt.fbsdeviceId);
|
},
|
onWSMessage(res) {
|
let rs = JSON.parse(res.data);
|
if (rs.code === 1 && rs.data) {
|
this.devData = rs.data2;
|
}
|
let data = this.devData;
|
// 判断是否超时
|
let outTime = 2 * 60; //设备超时时间(2分钟)
|
let nowTime = new Date(rs.data3).getTime(); //当前时间
|
let record = new Date(data.recordTime).getTime();
|
|
// 超过2分钟
|
// if (false) {
|
if (Math.abs(nowTime - record) / 1000 > outTime) {
|
this.diagram.isConnect = false;
|
this.stateList.map((item) => {
|
item.value1 = -1;
|
item.value2 = -1;
|
});
|
} else {
|
this.diagram.isConnect = true;
|
this.stateList.map((item) => {
|
item.value1 = getBit(data.dcdc1Errcode, item.bit);
|
item.value2 = getBit(data.dcdc2Errcode, item.bit);
|
});
|
}
|
// 更新数据
|
this.diagram.update = Math.random();
|
},
|
},
|
computed: {
|
battFullName() {
|
let batt = this.batt;
|
if (batt.stationName && batt.battGroupName) {
|
return batt.stationName;
|
}
|
return "电池组全称";
|
},
|
},
|
mounted() {
|
let battGroupId = this.$route.params.battGroupId;
|
// console.log("mounted======", battGroupId);
|
if (battGroupId) {
|
this.getBattGroupInfo(battGroupId);
|
}
|
},
|
};
|
</script>
|
|
<template>
|
<flex-layout direction="row" class="page-real-time" :no-bg="true">
|
<home-list
|
v-if="homeListShow"
|
slot="header"
|
@toggleChange="toggleChange"
|
@leaf-click="leafClick"
|
></home-list>
|
<content-box
|
style="margin-left: 4px; margin-right: 4px"
|
:title="battFullName"
|
>
|
<div class="page-content">
|
<div class="state-tools-wrapper">
|
<intel-dev-state-tools :list="stateList"></intel-dev-state-tools>
|
</div>
|
<intel-circuit
|
:option="devData"
|
:update="diagram.update"
|
:is-connect="diagram.isConnect"
|
:state="stateList"
|
></intel-circuit>
|
</div>
|
<div
|
slot="box-tools"
|
class="box-tools"
|
style="right: 8px"
|
v-if="esVideoSn"
|
>
|
<el-tooltip
|
class="item"
|
effect="dark"
|
content="视频监控"
|
placement="bottom"
|
>
|
<i
|
class="el-iconfont el-icon-video-camera-solid"
|
@click="showEsVideoDialog"
|
></i>
|
</el-tooltip>
|
</div>
|
</content-box>
|
<modal name="videoModal" :draggable="true" height="auto" :clickToClose="false" :overlayTransition="null">
|
<div class="modal-title-wrapper">
|
<div class="modal-title-content">视频监控</div>
|
<div class="modal-title-tools">
|
<i class="el-icon-close" @click="closeEsVideoDialog"></i>
|
</div>
|
</div>
|
<ez-video v-if="esVideoDialog" :sn="esVideoSn"></ez-video>
|
</modal>
|
</flex-layout>
|
</template>
|
|
<style scoped lang="less">
|
.page-real-time {
|
color: #ffffff;
|
}
|
.content-header {
|
padding: 0 0 0 8px;
|
font-size: 14px;
|
}
|
.page-content {
|
position: relative;
|
padding: 4px;
|
box-sizing: border-box;
|
height: 100%;
|
.state-tools-wrapper {
|
position: absolute;
|
}
|
}
|
.state-list {
|
display: table;
|
width: 100%;
|
.state-tr {
|
display: table-row;
|
.state-item {
|
display: table-cell;
|
margin-right: 64px;
|
color: #00fefe;
|
line-height: 30px;
|
.state-label {
|
display: inline-block;
|
}
|
.state-value {
|
display: inline-block;
|
&.light {
|
vertical-align: middle;
|
}
|
}
|
}
|
}
|
}
|
|
.modal-title-wrapper {
|
background-color: #00fefe;
|
color: #003d64;
|
font-weight: bold;
|
display: flex;
|
padding: 8px 0;
|
.modal-title-content {
|
flex: 1;
|
padding: 0 8px;
|
cursor: move;
|
}
|
.modal-title-tools {
|
padding: 0 8px;
|
cursor: pointer;
|
}
|
}
|
</style>
|
