<template>
|
<div class="flex-box" @click="toParentPage" @dblclick="dblclick">
|
<div class="flex-box-body">
|
<circle-chart id="circleChart" ref="circleChart"></circle-chart>
|
</div>
|
<div class="flex-box-footer">
|
<ul class="list-view">
|
<li v-for="item in chart.circle" :key="item.name" class="list-view-item">
|
<span class="item-name">{{item.name}}</span>
|
:
|
<span class="item-value" :style="{'color':item.color}">{{item.value}}</span>
|
</li>
|
</ul>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import CircleChart from "@/components/charts/CircleChart";
|
import { WebSocketClass } from '@/assets/js/socket'
|
export default {
|
name: "MonCap",
|
components: {
|
CircleChart
|
},
|
data() {
|
return {
|
chart: {
|
circle: [{
|
name: '低告警数量',
|
value: 0,
|
color: '#00DFFC',
|
},
|
{
|
name: '告警总数比例',
|
value: 0,
|
color: '#FF8B34',
|
},
|
{
|
name: '告警总数',
|
value: 0,
|
color: '#ED4882',
|
},
|
{
|
name: '告警机房总数',
|
value: 0,
|
color: '#2EEA9D',
|
},
|
{
|
name: '告警机房数比例',
|
value: 0,
|
color: '#F3E501',
|
}
|
]
|
},
|
websock: null
|
}
|
},
|
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.circleChart.resize();
|
},
|
toParentPage() {
|
if (sessionStorage.getItem('newPlatform') == 1) {
|
window.parent.parent.postMessage({
|
cmd: "syncPage",
|
params: {
|
pageInfo: {
|
label: "电池告警实时查询",
|
name: "batteryrTimequery",
|
src: "/alarmMager/batteryrTimequery",
|
closable: true
|
},
|
}
|
}, "*");
|
} else {
|
window.parent.parent.postMessage({
|
cmd: "syncPage",
|
params: {
|
pageInfo: {
|
label: "电池实时告警",
|
name: "batteryrTimequery",
|
src: "#/batteryrTimequery",
|
closable: true
|
},
|
}
|
}, "*");
|
}
|
},
|
setData(data) {
|
this.$nextTick(() => {
|
if (data) {
|
this.chart = data;
|
let chart = this.$refs.circleChart;
|
chart.setData(data.circle);
|
chart.resize();
|
} else {
|
this.postData()
|
}
|
})
|
},
|
postData() {
|
let userId = localStorage.getItem('userId');
|
this.websock = new WebSocketClass(`/screen/batteryAlarm/monCapacity/${userId}`, this.wsMessage)
|
},
|
wsMessage(res) {
|
if (res.code == 1) {
|
let optionData = {
|
circle: [{
|
name: '单体容量高告警',
|
value: 0,
|
color: '#00DFFC',
|
},
|
{
|
name: '单体容量低告警',
|
value: 0,
|
color: '#ED4882',
|
},
|
]
|
}
|
let resData = res.data;
|
for (let key in resData) {
|
optionData.circle.map(item => {
|
if (item.name == key) {
|
if (typeof resData[key] == 'string') {
|
item.value = Number(resData[key].split('%')[0])
|
} else {
|
item.value = resData[key]
|
}
|
}
|
})
|
}
|
this.chart = optionData;
|
let chart = this.$refs.circleChart;
|
chart.setData(optionData.circle);
|
chart.resize();
|
}
|
},
|
outClear() {
|
this.websock.closeMyself()
|
this.websock = null
|
window.removeEventListener('resize', this.resize);
|
},
|
resize() {
|
this.$refs.circleChart.resize();
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.flex-box {
|
display: flex;
|
height: 100%;
|
align-items: center;
|
}
|
|
.flex-box-body {
|
flex: 1;
|
height: 100%;
|
}
|
|
.flex-box-footer {
|
padding: 0 8px;
|
}
|
|
.list-view li {
|
list-style: none;
|
}
|
|
.list-view-item {
|
white-space: nowrap;
|
padding: 8px 0;
|
}
|
</style>
|
