560 lines
12 KiB
Vue
560 lines
12 KiB
Vue
<template>
|
|
<div class="jl3ddevice">
|
|
<div id="jl3d" class="jl3ddraw">
|
|
|
|
</div>
|
|
<Jl3ddevicetrain-Menu :devicelist="devicelist" @sdevice="sdevice" >
|
|
</Jl3ddevicetrain-Menu>
|
|
<div class="menutop">
|
|
<el-button-group>
|
|
|
|
|
|
</el-button-group>
|
|
</div>
|
|
<div class="menudown" v-show = "modelcontrolview">
|
|
<el-button-group>
|
|
<el-button type="primary" @click="back">初始化</el-button>
|
|
<el-button type="primary" @click="alldisper">{{disperreset}}</el-button>
|
|
<!-- <el-button type="primary" @click="beforeclick">上一个</el-button>
|
|
<el-button type="primary" @click="startstop">暂停</el-button>
|
|
<el-button type="primary" @click="nextclick">下一个</el-button> -->
|
|
|
|
<el-button type="primary" @click="dispersed">{{devicestats}}</el-button>
|
|
<el-button type="primary" @click="selectdevice">返回继电器柜</el-button>
|
|
</el-button-group>
|
|
</div>
|
|
|
|
<div id="testjlmap3d" class="jlmap3ddraw">
|
|
<canvas id="canvastexture" />
|
|
</div>
|
|
<div class="showmsg" v-show="msgshow">
|
|
<div class="msgtop">
|
|
{{devicename}}
|
|
</div>
|
|
<div class="msgdown">
|
|
{{devicemsg}}
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="jlmap3dstats" >
|
|
<div class="modeldiv" v-show="showa1700">
|
|
<div class="statusdiv">JWJXC-1700</div>
|
|
<div class="statusdiv">状态:{{statsa1700}}</div>
|
|
<div class="statusdiv" @click="switcha1700">{{texta1700}}</div>
|
|
</div>
|
|
|
|
<div class="modeldiv" v-show="showb1700">
|
|
<div class="statusdiv">JWJXC-1700</div>
|
|
<div class="statusdiv">状态:{{statsb1700}}</div>
|
|
<div class="statusdiv" @click="switchb1700">{{textb1700}}</div>
|
|
</div>
|
|
|
|
<div class="modeldiv" v-show="showc1700">
|
|
<div class="statusdiv">JWJXC-1700</div>
|
|
<div class="statusdiv">状态:{{statsc1700}}</div>
|
|
<div class="statusdiv" @click="switchc1700">{{textc1700}}</div>
|
|
</div >
|
|
|
|
<div class="modeldiv" v-show="showh125">
|
|
<div class="statusdiv">JZJXC-H18</div>
|
|
<div class="statusdiv">状态:{{statsh18}}</div>
|
|
<div class="statusdiv" @click="switchh18">{{texth18}}</div>
|
|
</div>
|
|
|
|
<div class="modeldiv" v-show="showh18">
|
|
<div class="statusdiv">JWJXC-H125</div>
|
|
<div class="statusdiv">状态:{{statsh125}}</div>
|
|
<div class="statusdiv" @click="switch1000">{{texth125}}</div>
|
|
</div>
|
|
|
|
<div class="modeldiv" v-show="show135">
|
|
<div class="statusdiv">JYJXC-135</div>
|
|
<div class="statusdiv">状态:{{stats135}}</div>
|
|
<div class="statusdiv" @click="switch480">{{text135}}</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
<script>
|
|
import Vue from 'vue';
|
|
import { Jl3ddevice } from '@/jlmap3d/jl3ddevicetrain/jl3ddevicetrain.js';
|
|
import Jl3ddevicetrainMenu from '@/views/jlmap3d/devicetrain/component/devicetrainmenu';
|
|
export default {
|
|
name: 'devicetrain',
|
|
components: {
|
|
Jl3ddevicetrainMenu
|
|
},
|
|
data() {
|
|
return {
|
|
device: this.$route.params.deviceid,
|
|
jl3d: null,
|
|
devicelist:[],
|
|
msgshow:false,
|
|
devicename:"",
|
|
devicemsg:"",
|
|
devicestats:"分步拆解",
|
|
disperreset:"整体拆解",
|
|
statsa1700:"off",
|
|
statsb1700:"off",
|
|
statsc1700:"off",
|
|
statsh125:"off",
|
|
statsh18:"off",
|
|
stats135:"off",
|
|
|
|
texta1700:"关",
|
|
textb1700:"关",
|
|
textc1700:"关",
|
|
texth125:"关",
|
|
texth18:"关",
|
|
text135:"关",
|
|
|
|
ona1700:false,
|
|
onb1700:false,
|
|
onc1700:false,
|
|
onh125:false,
|
|
onh18:false,
|
|
on135:false,
|
|
|
|
showa1700:true,
|
|
showb1700:true,
|
|
showc1700:true,
|
|
showh125:true,
|
|
showh18:true,
|
|
show135:true,
|
|
|
|
modelcontrolview:false,
|
|
}
|
|
},
|
|
watch: {
|
|
// '$store.state.socket.device.code': {
|
|
// handler: function (newVal, oldVal) {
|
|
// if (newVal != oldVal) {
|
|
// this.jl3d.selectmodel(this.$store.state.socket.device);
|
|
//
|
|
// }
|
|
// }
|
|
// },
|
|
// '$store.state.socket.device': {
|
|
// deep: true,
|
|
// handler: function (newVal, oldVal) {
|
|
// if (newVal.code == oldVal.code) {
|
|
// this.jl3d.updateaction(newVal);
|
|
// } else {
|
|
//
|
|
// }
|
|
//
|
|
// }
|
|
// },
|
|
'jl3d.animastats': {
|
|
handler: function (newVal, oldVal) {
|
|
if (newVal != oldVal) {
|
|
if(newVal == false){
|
|
this.devicestats = "分步拆解";
|
|
|
|
this.disperreset = "整体拆解";
|
|
}
|
|
if(newVal == true){
|
|
this.devicestats = "分步复位";
|
|
|
|
this.disperreset = "整体复位";
|
|
}
|
|
}
|
|
}
|
|
},
|
|
},
|
|
computed: {
|
|
code() {
|
|
return this.$route.query.code;
|
|
}
|
|
},
|
|
mounted() {
|
|
window.updatemenulist = this.updatemenulist;
|
|
window.updatemsg = this.updatemsg;
|
|
window.upjdqstats = this.upjdqstats;
|
|
this.init();
|
|
},
|
|
beforeDestroy() {
|
|
},
|
|
methods: {
|
|
init: function () {
|
|
// let mapdata = this.$store.state.socket.device;
|
|
let dom = document.getElementById('jl3d');
|
|
this.jl3d = new Jl3ddevice(dom,this.device);
|
|
},
|
|
sdevice(changedata) {
|
|
|
|
this.jl3d.updateselect(changedata);
|
|
|
|
},
|
|
selectdevice(device) {
|
|
this.jl3d.backselect();
|
|
},
|
|
dispersed(device) {
|
|
this.jl3d.disperdevice1();
|
|
},
|
|
updatemenulist(devicelist,modelcode) {
|
|
this.devicelist = devicelist;
|
|
|
|
if(modelcode){
|
|
if(modelcode == "all"){
|
|
this.showa1700 = true;
|
|
this.showb1700 = true;
|
|
this.showc1700 = true;
|
|
this.showh125 = true;
|
|
this.showh18 = true;
|
|
this.show135 = true;
|
|
this.modelcontrolview = false;
|
|
}
|
|
|
|
if(modelcode == "jdq1"){
|
|
this.showa1700 = true;
|
|
this.showb1700 = false;
|
|
this.showc1700 = false;
|
|
this.showh125 = false;
|
|
this.showh18 = false;
|
|
this.show135 = false;
|
|
this.modelcontrolview = true;
|
|
}
|
|
console.log(modelcode);
|
|
if(modelcode == "jdq2"){
|
|
this.showa1700 = false;
|
|
this.showb1700 = true;
|
|
this.showc1700 = false;
|
|
this.showh125 = false;
|
|
this.showh18 = false;
|
|
this.show135 = false;
|
|
this.modelcontrolview = true;
|
|
}
|
|
|
|
if(modelcode == "jdq3"){
|
|
this.showa1700 = false;
|
|
this.showb1700 = false;
|
|
this.showc1700 = true;
|
|
this.showh125 = false;
|
|
this.showh18 = false;
|
|
this.show135 = false;
|
|
this.modelcontrolview = true;
|
|
}
|
|
if(modelcode == "jdq4"){
|
|
this.showa1700 = false;
|
|
this.showb1700 = false;
|
|
this.showc1700 = false;
|
|
this.showh125 = true;
|
|
this.showh18 = false;
|
|
this.show135 = false;
|
|
this.modelcontrolview = true;
|
|
}
|
|
if(modelcode == "jdq5"){
|
|
this.showa1700 = false;
|
|
this.showb1700 = false;
|
|
this.showc1700 = false;
|
|
this.showh125 = false;
|
|
this.showh18 = true;
|
|
this.show135 = false;
|
|
this.modelcontrolview = true;
|
|
}
|
|
if(modelcode == "jdq6"){
|
|
this.showa1700 = false;
|
|
this.showb1700 = false;
|
|
this.showc1700 = false;
|
|
this.showh125 = false;
|
|
this.showh18 = false;
|
|
this.show135 = true;
|
|
this.modelcontrolview = true;
|
|
}
|
|
}
|
|
},
|
|
updatemsg(name,text) {
|
|
// console.log(name);
|
|
// console.log(text);
|
|
if(name){
|
|
this.msgshow = true;
|
|
this.devicename = name;
|
|
this.devicemsg = text;
|
|
}else{
|
|
this.msgshow = false;
|
|
}
|
|
},
|
|
upjdqstats(data){
|
|
// console.log(data[0].on);
|
|
if(data[0].on != this.ona1700){
|
|
if(data[0].on == true){
|
|
this.texta1700 = "开";
|
|
this.statsa1700 = "on";
|
|
this.ona1700 = true;
|
|
this.jl3d.upmodelaction(0,0);
|
|
}
|
|
if(data[0].on == false){
|
|
this.texta1700 = "关";
|
|
this.statsa1700 = "off";
|
|
this.ona1700 = false;
|
|
this.jl3d.upmodelaction(1,0);
|
|
}
|
|
}
|
|
|
|
if(data[1].on != this.onb1700){
|
|
if(data[1].on == true){
|
|
this.textb1700 = "开";
|
|
this.statsb1700 = "on";
|
|
this.onb1700 = true;
|
|
this.jl3d.upmodelaction(0,1);
|
|
}
|
|
if(data[1].on == false){
|
|
this.textb1700 = "关";
|
|
this.statsb1700 = "off";
|
|
this.onb1700 = false;
|
|
this.jl3d.upmodelaction(1,1);
|
|
}
|
|
}
|
|
|
|
if(data[2].on != this.onc1700){
|
|
if(data[2].on == true){
|
|
this.textc1700 = "开";
|
|
this.statsc1700 = "on";
|
|
this.onc1700 = true;
|
|
this.jl3d.upmodelaction(0,2);
|
|
}
|
|
if(data[2].on == false){
|
|
this.textc1700 = "关";
|
|
this.statsc1700 = "off";
|
|
this.onc1700 = false;
|
|
this.jl3d.upmodelaction(1,2);
|
|
}
|
|
}
|
|
if(data[3].on != this.onh18){
|
|
if(data[3].on == true){
|
|
this.texth18 = "开";
|
|
this.statsh18 = "on";
|
|
this.onh18 = true;
|
|
this.jl3d.upmodelaction(0,3);
|
|
}
|
|
if(data[3].on == false){
|
|
this.texth18 = "关";
|
|
this.statsh18 = "off";
|
|
this.onh18 = false;
|
|
this.jl3d.upmodelaction(1,3);
|
|
}
|
|
}
|
|
|
|
if(data[4].on != this.onh125){
|
|
if(data[4].on == true){
|
|
this.texth125 = "开";
|
|
this.statsh125 = "on";
|
|
this.onh125 = true;
|
|
this.jl3d.upmodelaction(0,4);
|
|
}
|
|
if(data[4].on == false){
|
|
this.texth125 = "关";
|
|
this.statsh125 = "off";
|
|
this.onh125 = false;
|
|
this.jl3d.upmodelaction(1,4);
|
|
}
|
|
}
|
|
if(data[5].on != this.on135){
|
|
if(data[5].on == true){
|
|
this.text135 = "开";
|
|
this.stats135 = "on";
|
|
this.on135 = true;
|
|
this.jl3d.upmodelaction(0,5);
|
|
}
|
|
if(data[5].on == false){
|
|
this.text135 = "关";
|
|
this.stats135 = "off";
|
|
this.on135 = false;
|
|
this.jl3d.upmodelaction(1,5);
|
|
}
|
|
}
|
|
},
|
|
switcha1700(){
|
|
if(this.statsa1700 == "off"){
|
|
|
|
this.jl3d.sendmsg(0,0);
|
|
}else if(this.statsa1700 == "on"){
|
|
|
|
this.jl3d.sendmsg(1,0);
|
|
}
|
|
},
|
|
switchb1700(){
|
|
if(this.statsb1700 == "off"){
|
|
|
|
this.jl3d.sendmsg(0,1);
|
|
}else if(this.statsb1700 == "on"){
|
|
|
|
this.jl3d.sendmsg(1,1);
|
|
}
|
|
},
|
|
switchc1700(){
|
|
if(this.statsc1700 == "off"){
|
|
|
|
this.jl3d.sendmsg(0,2);
|
|
}else if(this.statsc1700 == "on"){
|
|
|
|
this.jl3d.sendmsg(1,2);
|
|
}
|
|
},
|
|
switchh18(){
|
|
if(this.statsh18 == "off"){
|
|
|
|
this.jl3d.sendmsg(0,3);
|
|
}else if(this.statsh18 == "on"){
|
|
|
|
this.jl3d.sendmsg(1,3);
|
|
}
|
|
},
|
|
switch1000(){
|
|
if(this.statsh125 == "off"){
|
|
|
|
this.jl3d.sendmsg(0,4);
|
|
}else if(this.statsh125 == "on"){
|
|
|
|
this.jl3d.sendmsg(1,4);
|
|
}
|
|
},
|
|
switch480(){
|
|
if(this.stats135 == "off"){
|
|
|
|
this.jl3d.sendmsg(0,5);
|
|
}else if(this.stats135 == "on"){
|
|
|
|
this.jl3d.sendmsg(1,5);
|
|
}
|
|
},
|
|
alldisper(){
|
|
this.jl3d.disperdevice2();
|
|
},
|
|
// startstop(changedata) {
|
|
// this.jl3d.buttoncontrol("startstop");
|
|
// },
|
|
// nextclick(changedata) {
|
|
// this.jl3d.buttoncontrol("next");
|
|
// },
|
|
// beforeclick(changedata) {
|
|
// this.jl3d.buttoncontrol("before");
|
|
// },
|
|
back() {
|
|
this.jl3d.resetmodel();
|
|
// move3();
|
|
// window.close();
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
<style scoped>
|
|
/* #jl3d {
|
|
width: 937px;
|
|
height: 937px;
|
|
} */
|
|
|
|
.jl3ddraw {
|
|
position: absolute;
|
|
float: left;
|
|
top:0;
|
|
/* left: 0; */
|
|
width: 80%;
|
|
height: 100%;
|
|
/* z-index: 1500; */
|
|
}
|
|
.showmsg{
|
|
position: absolute;
|
|
float:left;
|
|
left:0;
|
|
bottom:0;
|
|
width: 20%;
|
|
height: 40%;
|
|
z-index: 10;
|
|
background-image:url("/static/texture/showmsg.png");
|
|
background-repeat: no-repeat;
|
|
background-size: 100%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.jlmap3dstats{
|
|
position: absolute;
|
|
float:left;
|
|
/* left:10px; */
|
|
/* top:20px; */
|
|
/* width: 60%; */
|
|
height: 10%;
|
|
z-index: 10;
|
|
background-color: #409EFF;
|
|
border-radius: 4px;
|
|
color: #FFFFFF
|
|
/* background-image:url("/static/texture/menu.png"); */
|
|
/* background-repeat: no-repeat; */
|
|
/* background-size: 100%; */
|
|
}
|
|
|
|
.modeldiv{
|
|
float:left;
|
|
/* width:16.66%; */
|
|
height:100%;
|
|
text-align: center;
|
|
}
|
|
|
|
.statusdiv{
|
|
/* float:left; */
|
|
/* top:50%; */
|
|
width:150px;
|
|
height:33%;
|
|
font-size: 20px;
|
|
border: 1px solid white;
|
|
text-align: center;
|
|
cursor:pointer;
|
|
}
|
|
.msgtop{
|
|
text-align: center;
|
|
width: 90%;
|
|
height:10%;
|
|
position: absolute;
|
|
top:10%;
|
|
font-size:30px;
|
|
color:#FFFFFF;
|
|
}
|
|
|
|
.msgdown{
|
|
position: absolute;
|
|
top:20%;
|
|
left:5%;
|
|
width: 90%;
|
|
height:80%;
|
|
font-size:20px;
|
|
color:#FFFFFF;
|
|
word-wrap:break-word;
|
|
letter-spacing:2px;
|
|
}
|
|
|
|
#testjlmap3d {
|
|
}
|
|
|
|
.jlmap3ddraw {
|
|
float: left;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
position:absolute;
|
|
z-index: -1;
|
|
}
|
|
.menutop{
|
|
top:0;
|
|
right:20%;
|
|
position:absolute;
|
|
}
|
|
.menudown{
|
|
bottom:0;
|
|
right:20%;
|
|
position:absolute;
|
|
}
|
|
#canvastexture {
|
|
position: absolute;
|
|
float: left;
|
|
left: 0;
|
|
z-index: -12;
|
|
}
|
|
</style>
|