<template>
|
<div class="contentBox threeRoom">
|
<div id="remap"></div>
|
<transition name="el-zoom-in-top">
|
<diagram-panel :position="text4Pos" title="电源参数" ref="text4Pos" v-show="showtext4">
|
<div class="panel-item"><span class="label">电压:</span>
|
<el-input class="input" readonly="readonly" :value="panel4.rectifierVol"></el-input>
|
<span class="unit">V</span>
|
</div>
|
<div class="panel-item"><span class="label">电流:</span>
|
<el-input class="input" readonly="readonly" :value="panel4.rectifierCurr"></el-input>
|
<span class="unit">A</span>
|
</div>
|
</diagram-panel>
|
</transition>
|
<transition name="el-zoom-in-top">
|
<diagram-panel :position="text5Pos" title="直流主配电板参数" ref="text5Pos" v-show="showtext5">
|
<div class="panel-item">
|
<span class="label">1号进线屏开关:</span>
|
<el-input class="input" readonly="readonly" :value="panel5.switchClose1st2500A==1?'合闸':'分闸'">
|
</el-input>
|
<span class="label" style="margin-left:20px;">2号进线屏开关:</span>
|
<el-input class="input" readonly="readonly" :value="panel5.switchClose2st2500A==1?'合闸':'分闸'">
|
</el-input>
|
</div>
|
<div class="panel-item">
|
<span class="label">母联屏开关:</span>
|
<el-input class="input" readonly="readonly" :value="panel5.switchCloseBusScreen==1?'合闸':'分闸'">
|
</el-input>
|
</div>
|
<div class="panel-item">
|
<span class="label">1号负载屏开关:</span>
|
<el-input class="input" readonly="readonly" :value="panel5.switchClose1st2500ALoad==1?'合闸':'分闸'">
|
</el-input>
|
<span class="label" style="margin-left:20px;">2号负载屏开关:</span>
|
<el-input class="input" readonly="readonly" :value="panel5.switchClose2st2500ALoad==1?'合闸':'分闸'">
|
</el-input>
|
</div>
|
<div class="panel-item">
|
<span class="label">A排电压:</span>
|
<el-input class="input" readonly="readonly" :value="panel5.volA"></el-input>
|
<span class="unit">V</span>
|
<span class="label" style="margin-left:20px;">B排电压:</span>
|
<el-input class="input" readonly="readonly" :value="panel5.volB"></el-input>
|
<span class="unit">V</span>
|
</div>
|
<div class="panel-item">
|
<span class="label">A排电流:</span>
|
<el-input class="input" readonly="readonly" :value="panel5.currA"></el-input>
|
<span class="unit">A</span>
|
<span class="label" style="margin-left:20px;">B排电流:</span>
|
<el-input class="input" readonly="readonly" :value="panel5.currB"></el-input>
|
<span class="unit">A</span>
|
</div>
|
</diagram-panel>
|
</transition>
|
</div>
|
</template>
|
|
<script>
|
import {
|
InitThree
|
} from "@/assets/js/three/InitThree";
|
import {
|
Aobjects,
|
} from "@/assets/js/three/data";
|
import DiagramPanel from '@/components/smallModule/DiagramPanel.vue';
|
let threeBuild;
|
export default {
|
components: {
|
DiagramPanel,
|
},
|
data() {
|
return {
|
initOption: {
|
cameraPosition: [0, 1200, -1800], //初始化相机视角位置
|
showAxisHelper: true,
|
},
|
showtext4: false,
|
text4Pos: [],
|
showtext5: false,
|
text5Pos: [],
|
panel4: {
|
rectifierVol: 0,
|
rectifierCurr: 0,
|
},
|
panel5: {
|
switchClose1st2500A: 0,
|
switchClose2st2500A: 0,
|
switchCloseBusScreen: 0,
|
switchClose1st2500ALoad: 0,
|
switchClose2st2500ALoad: 0,
|
currA: 0,
|
volA: 0,
|
currB: 0,
|
volB: 0,
|
},
|
};
|
},
|
mounted() {
|
this.$nextTick(() => {
|
this.initThreeEvent();
|
threeBuild = new InitThree();
|
threeBuild.initmsj3D("remap", this.initOption, Aobjects);
|
threeBuild.start();
|
});
|
},
|
methods: {
|
//初始化three机房相关点击事件
|
initThreeEvent() {
|
let _this = this;
|
Aobjects.events.dbclick = [{
|
findObject: function (_objname) { //点击整流器
|
if (_objname.indexOf("rectifier") >= 0) {
|
return true;
|
} else {
|
return false;
|
}
|
},
|
obj_uuid: "",
|
obj_event: function (_obj, event) {
|
_this.rectifierInfo(_obj, event);
|
}
|
}, {
|
findObject: function (_objname) { //点击配电器
|
if (_objname.indexOf("distribution") >= 0) {
|
return true;
|
} else {
|
return false;
|
}
|
},
|
obj_uuid: "",
|
obj_event: function (_obj, event) {
|
_this.distributionInfo(_obj, event);
|
}
|
}, ]
|
//隐藏面板
|
Aobjects.events.hidePanel = {
|
obj_event: function (_obj, event) {
|
_this.hidePanel(_obj, event);
|
}
|
}
|
},
|
//点击电池
|
batterInfo(_obj) {
|
alert("您双击了" + _obj.name + "点击！");
|
},
|
rectifierInfo(_obj, event) {
|
if (!this.showtext4) {
|
this.text4Pos = [event.offsetX + 20, event.offsetY - 40];
|
}
|
this.showtext4 = !this.showtext4;
|
},
|
//点击配电器
|
distributionInfo(_obj, event) {
|
if (!this.showtext5) {
|
this.text5Pos = [event.offsetX + 20, event.offsetY - 40];
|
}
|
this.showtext5 = !this.showtext5;
|
},
|
//隐藏面板
|
hidePanel(_obj, event) {
|
if (_obj.name == 'floor') {
|
this.showtext4 = false
|
this.showtext5 = false
|
}
|
}
|
},
|
destroyed() {
|
threeBuild.stop();
|
},
|
};
|
</script>
|
|
<style scoped>
|
.threeRoom {
|
width: 100%;
|
height: 100%;
|
position: relative;
|
padding: 20px;
|
}
|
|
#remap {
|
width: 100%;
|
height: 100%;
|
overflow: hidden;
|
transition: 0.3s;
|
}
|
|
#remap /deep/ canvas {
|
outline: none;
|
}
|
</style>
|
