<template>
|
<div class="chartCon" @dblclick="dblclick">
|
<div class="chartItem" @click="clickItem('熔丝告警')">
|
<ac-input id="AcInput0" ref="AcInput0"></ac-input>
|
</div>
|
<div class="chartItem" @click="clickItem('跳闸')">
|
<ac-input id="AcInput1" ref="AcInput1"></ac-input>
|
</div>
|
<div class="chartItem" @click="clickItem('频率异常')">
|
<ac-input id="AcInput2" ref="AcInput2"></ac-input>
|
</div>
|
<div class="chartItem" @click="clickItem('三相不平衡')">
|
<ac-input id="AcInput3" ref="AcInput3"></ac-input>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import AcInput from './AcInput.vue'
|
import { WebSocketClass } from '@/assets/js/socket'
|
import { checkboxs } from '@/assets/js/powerInfoData'
|
export default {
|
components: {
|
AcInput
|
},
|
data() {
|
return {
|
websock: null
|
}
|
},
|
mounted() {
|
|
},
|
methods: {
|
findParents(node, select) {
|
var parent = node.parentNode;
|
if (parent === null || parent.className.indexOf(select) != -1) {
|
return parent;
|
} else {
|
return this.findParents(parent, select);
|
}
|
},
|
dblclick(e) {
|
this.isAllScreen = !this.isAllScreen
|
let parents = this.findParents(e.currentTarget, 'vdr')
|
if (this.isAllScreen) {
|
this.parentsStyle = JSON.parse(JSON.stringify(parents.style));
|
parents.style.transform = 'none';
|
parents.style.width = '100%';
|
parents.style.height = '100%';
|
parents.style.position = 'fixed';
|
parents.style.left = 0;
|
parents.style.right = 0;
|
parents.style.bottom = 0;
|
parents.style.top = 0;
|
parents.style.zIndex = 99999;
|
} else {
|
parents.style.transform = this.parentsStyle.transform;
|
parents.style.width = this.parentsStyle.width;
|
parents.style.height = this.parentsStyle.height;
|
parents.style.position = this.parentsStyle.position;
|
parents.style.left = 'initial';
|
parents.style.right = 'initial';
|
parents.style.bottom = 'initial';
|
parents.style.top = 'initial';
|
parents.style.zIndex = 'auto';
|
}
|
this.$refs.AcInput0.resize();
|
this.$refs.AcInput1.resize();
|
this.$refs.AcInput2.resize();
|
this.$refs.AcInput3.resize();
|
},
|
toParentPage(value) {
|
if (typeof (value) == 'string') {
|
window.parent.parent.postMessage({
|
cmd: "syncPage",
|
params: {
|
pageInfo: {
|
label: "电源实时告警",
|
name: "powerRealtimeInfo",
|
src: '#/powerRealtimeInfo/?alarmType=' + value,
|
closable: true
|
},
|
}
|
}, "*");
|
}
|
},
|
clickItem(name) {
|
checkboxs.jlsr.map(item => {
|
if (item.label == name) {
|
this.toParentPage(item.value)
|
}
|
})
|
},
|
setData(data) {
|
this.$nextTick(() => {
|
if (data) {
|
data.map((item, i) => {
|
let chart = this.$refs[`AcInput${i}`];
|
chart.setData(item);
|
chart.resize();
|
})
|
} else {
|
this.postData()
|
}
|
})
|
},
|
postData() {
|
let userId = localStorage.getItem('userId');
|
this.websock = new WebSocketClass(`/screen/powerAlarm/acInput/${userId}`, this.wsMessage)
|
},
|
wsMessage(res) {
|
if (res.code == 1) {
|
let optionData = [{
|
title: '熔丝告警',
|
data: 56,
|
acColor: '#813a74',
|
resColor: '#ff649d',
|
}, {
|
title: '跳闸',
|
data: 12,
|
acColor: '#287878',
|
resColor: '#5adfaa',
|
}, {
|
title: '频率异常',
|
data: 21,
|
acColor: '#2388a6',
|
resColor: '#43f9fd',
|
}, {
|
title: '三相不平衡',
|
data: 8,
|
acColor: '#7f3a29',
|
resColor: '#fc5f02',
|
}]
|
let resData = res.data;
|
for (let key in resData) {
|
optionData.map(item => {
|
if (item.title == key) {
|
item.data = resData[key]
|
}
|
})
|
}
|
optionData.map((item, i) => {
|
let chart = this.$refs[`AcInput${i}`];
|
chart.setData(item);
|
chart.resize();
|
})
|
}
|
},
|
outClear() {
|
this.websock.closeMyself()
|
this.websock = null
|
window.removeEventListener('resize', this.resize);
|
},
|
resize() {
|
this.$refs.AcInput0.resize();
|
this.$refs.AcInput1.resize();
|
this.$refs.AcInput2.resize();
|
this.$refs.AcInput3.resize();
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.chartCon {
|
width: 100%;
|
height: 100%;
|
box-sizing: border-box;
|
}
|
|
.chartCon .chartItem {
|
width: 50%;
|
height: 50%;
|
float: left;
|
position: relative;
|
}
|
</style>
|
