<template>
|
<vue-draggable-resizable className="no-border">
|
<div class="three-home-container" v-show="show" :style="posStyle">
|
<div class="three-home-header">
|
<div class="three-home-name">{{this.group1.batt.StationName}}</div>
|
<div class="three-home-close" @click="close"><span>X</span></div>
|
</div>
|
<div class="three-home-wrapper">
|
<three-home
|
:bg="group1.area.pictureName"
|
@handleClick="handleClick"
|
@loadSuccess="loadSuccess"
|
:active-area="activeArae">
|
<batt-params-tooltip
|
ref="group1Tooltip" v-show="group1.show"
|
:visible.sync="group1.show" :batt="group1.batt"
|
:top="group1Params.top" :left="group1Params.left"></batt-params-tooltip>
|
<batt-params-tooltip
|
ref="group2Tooltip" v-show="group2.show"
|
:visible.sync="group2.show" :batt="group2.batt"
|
:top="group2Params.top" :left="group2Params.left"></batt-params-tooltip>
|
</three-home>
|
</div>
|
<science-box title="设备参数" :top="8" :left="8" v-show="stateListState">
|
<div class="hdw-state-list table-layout">
|
<div v-for="state in showStateList" :key="state.text" class="table-row" :class="state.type">
|
<div class="table-cell text-right">
|
<i v-if="state.icon" class="iconfont" :class="state.icon"></i>{{ state.text }}
|
</div>
|
<div class="table-cell">
|
{{ state.value }}{{ state.unit }}
|
</div>
|
</div>
|
</div>
|
</science-box>
|
</div>
|
</vue-draggable-resizable>
|
</template>
|
|
<script>
|
import ThreeHome from "@/components/ThreeHome";
|
import ScienceBox from "@/components/ScienceBox";
|
import BattParamsTooltip from "@/pages/dataTest/BattParamsTooltip/index.vue";
|
import {
|
const_61850
|
} from "@/assets/js/const";
|
import {searchBattInfo} from "@/assets/js/api";
|
export default {
|
name: "pagesThreeHome",
|
props: {
|
areas:{
|
type: Array,
|
default() {
|
return []
|
}
|
}
|
},
|
components: {
|
ThreeHome,
|
ScienceBox,
|
BattParamsTooltip,
|
},
|
data() {
|
let stateList = const_61850.stateList;
|
return {
|
show: false,
|
group1Show: false,
|
group2Show: false,
|
height: 0,
|
width: 0,
|
group1: {
|
show: false,
|
batt: {},
|
tooltipInfo: {
|
width: 0,
|
height: 0,
|
},
|
area: {
|
groupId: 'group1',
|
id: 8,
|
deviceId: 910000001,
|
stationName: "天津市-市辖区-南开区-BTS测试机房-BTS设备",
|
battGroupId: 1010013,
|
battGroupName: "电池组2",
|
pictureName: "",
|
pictureUrl: "123",
|
positionX: 0,
|
positionY: 0,
|
length: 0,
|
width: 0,
|
}
|
},
|
group2: {
|
show: false,
|
batt: {},
|
tooltipInfo: {
|
width: 0,
|
height: 0,
|
},
|
area: {
|
groupId: 'group2',
|
id: 8,
|
deviceId: 910000001,
|
stationName: "天津市-市辖区-南开区-BTS测试机房-BTS设备",
|
battGroupId: 1010013,
|
battGroupName: "电池组2",
|
pictureName: "",
|
pictureUrl: "123",
|
positionX: 0,
|
positionY: 0,
|
length: 0,
|
width: 0,
|
}
|
},
|
stateListShow: false,
|
stateList: stateList,
|
}
|
},
|
methods: {
|
init() {
|
// 设置group1的值
|
if(this.areas[0]) {
|
this.group1Show = true;
|
this.group1.area = this.areas[0];
|
this.group1.area.groupId = 'group1';
|
}
|
this.group1.area.groupId = 'group1';
|
|
// 设置group1的值
|
if(this.areas[1]) {
|
this.group2Show = true;
|
this.group2.area = this.areas[1];
|
this.group2.area.groupId = 'group2';
|
}
|
this.group2.area.groupId = 'group2';
|
|
let stationName = this.group1.area.stationName.split("-");
|
let stationInfo = {
|
StationName1: stationName[0],
|
StationName2: stationName[1],
|
StationName5: stationName[2],
|
StationName3: stationName[3]
|
};
|
// 查询电池信息
|
this.searchBattInfo(stationInfo);
|
},
|
handleClick(info) {
|
console.log(info);
|
this.group1.show = false;
|
this.group2.show = false;
|
this[info.groupId].show = true;
|
this.$nextTick(()=>{
|
this.changeTooltipInfo();
|
});
|
},
|
// 查询拓扑图状态的显示
|
searchStatus() {
|
this.$apis.pageSetting.realTime.searchStatus().then(res => {
|
let rs = JSON.parse(res.data.result);
|
if (rs.code == 1) {
|
let data = rs.data;
|
this.stateList.forEach(item => {
|
item.show = this.getStateById(item.id, data);
|
});
|
}
|
}).catch(error => {
|
console.log(error);
|
});
|
},
|
getStateById(id, list) {
|
let result = false;
|
for (let i = 0; i < list.length; i++) {
|
let item = list[i];
|
if (id == item.id) {
|
result = item.status ? true : false;
|
break;
|
}
|
}
|
return result;
|
},
|
changeTooltipInfo() {
|
// 设置宽高
|
let group1Info = this.$refs.group1Tooltip.getInfo();
|
this.group1.tooltipInfo = group1Info;
|
|
// 设置宽高
|
let group2Info = this.$refs.group2Tooltip.getInfo();
|
this.group2.tooltipInfo = group2Info;
|
},
|
// 查询机房的信息
|
searchBattInfo(stationInfo) {
|
searchBattInfo(stationInfo).then((res)=>{
|
let rs = JSON.parse(res.data.result);
|
let data = [];
|
// 查询到结果
|
if(rs.code == 1) {
|
data = rs.data;
|
}
|
// 遍历电池信息并给指定的group赋值
|
data.map(item=>{
|
if(item.BattGroupId == this.group1.area.battGroupId) {
|
this.group1.batt = item;
|
}else if(item.BattGroupId == this.group2.area.battGroupId) {
|
this.group2.batt = item;
|
}
|
});
|
}).catch(error=>{
|
console.log(error);
|
});
|
},
|
loadSuccess(info) {
|
this.show = true;
|
this.width=info.width;
|
this.height=info.height;
|
},
|
close() {
|
this.$store.dispatch('theme/changeClose');
|
}
|
},
|
computed: {
|
activeArae() {
|
return [
|
this.group1.area,
|
this.group2.area
|
]
|
},
|
showStateList() {
|
return this.stateList.filter(item => {
|
if (item.show) {
|
return item;
|
}
|
});
|
},
|
stateListState() {
|
return this.stateListShow && this.showStateList.length;
|
},
|
group1Params() {
|
let group = this.group1;
|
let left = group.area.positionX+group.area.length/2-group.tooltipInfo.width/2;
|
let top = group.area.positionY-group.tooltipInfo.height;
|
return {
|
top: top,
|
left: left
|
}
|
},
|
group2Params() {
|
let group = this.group2;
|
let left = group.area.positionX+group.area.length/2-group.tooltipInfo.width/2;
|
let top = group.area.positionY-group.tooltipInfo.height;
|
return {
|
top: top,
|
left: left
|
}
|
},
|
posStyle() {
|
return {
|
marginLeft: -this.width/2+"px",
|
marginTop: -this.height/2+"px",
|
}
|
}
|
},
|
mounted() {
|
this.init();
|
this.$nextTick(()=>{
|
// 查询拓扑图状态的显示
|
this.searchStatus();
|
this.changeTooltipInfo();
|
});
|
|
// 监测浏览器窗口大小改变
|
window.addEventListener("resize", ()=>{
|
this.changeTooltipInfo();
|
});
|
}
|
}
|
</script>
|
|
<style scoped>
|
.three-home-container {
|
position: absolute;
|
}
|
.three-home-header {
|
position: relative;
|
}
|
.three-home-close {
|
position: absolute;
|
top: 0;
|
right: 0;
|
}
|
.three-home-close span {
|
display: inline-block;
|
width: 32px;
|
height: 32px;
|
line-height: 32px;
|
text-align: center;
|
border-radius: 50%;
|
background-color: #00fefe;
|
color: #fff;
|
cursor: pointer;
|
}
|
.three-home-close span:hover {
|
color: #FF0000;
|
}
|
.three-home-name {
|
text-align: center;
|
color: #FFFD1E;
|
}
|
.hdw-state-list {
|
box-sizing: border-box;
|
font-size: 14px;
|
padding-bottom: 8px;
|
}
|
</style>
|
