398 lines
8.6 KiB
Vue
398 lines
8.6 KiB
Vue
<template>
|
|
|
|
<div class="jalmap3ddiv">
|
|
|
|
<div class="trainstatus">
|
|
{{$t('jlmap3d.trainGroupNumber')}}{{ trainnum }}</br>
|
|
{{ stoptimes }}
|
|
</div>
|
|
<div class="display-draft">
|
|
<el-button-group>
|
|
<!-- <el-button type="primary" @click="raystand">站台选择</el-button> -->
|
|
<el-button type="primary" @click="cctvplane">{{ cctvbuttonmsg }}</el-button>
|
|
<el-button type="primary" @click="showplane">{{ showbuttonmsg }}</el-button>
|
|
<el-button type="primary" @click="back">{{$t('global.back')}}</el-button>
|
|
</el-button-group>
|
|
</div>
|
|
|
|
<!-- <Jlmap3d-Msg v-bind:msgdata="msgdata" >
|
|
</Jlmap3d-Msg > -->
|
|
|
|
<div id="jlsimulation" class="jlmap3ddraw">
|
|
<canvas id="canvastexture" />
|
|
</div>
|
|
<div id="jlcctv" v-show="cctvshow" class="jlmap3cctv">
|
|
</div>
|
|
|
|
<div class="msg" v-show ="msgshow">
|
|
<div class="msgtext">
|
|
{{controlmsg}}
|
|
</div>
|
|
</div>
|
|
|
|
<Drive-Mmi v-if="mmishow" ref="mmiui" />
|
|
|
|
<Drive-Tms v-if="mmishow" />
|
|
<Drive-Control v-if="dcontrolshow" ref="dcontrol" @warningmsg="warningmsg" @warningmsgoff="warningmsgoff" />
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
import Vue from 'vue';
|
|
import localStore from 'storejs';
|
|
import axios from 'axios';
|
|
|
|
import { mapGetters } from 'vuex';
|
|
|
|
// import ShowProperty from '@/views/jlmap3d/show/property';
|
|
|
|
import { simulationNotify, setTrainingCbtcInitTime } from '@/api/simulation';
|
|
|
|
import { getPublishMapDetail, getPublish3dMapDetail } from '@/api/jlmap3d/load3ddata';
|
|
|
|
import { UrlConfig } from '@/scripts/ConstDic';
|
|
|
|
import { JLmapDriving } from '@/jlmap3d/jl3ddrive/jl3ddrive';
|
|
|
|
import DriveMmi from '@/views/jlmap3d/drive/sceneview/mmiview';
|
|
import DriveTms from '@/views/jlmap3d/drive/sceneview/tmsview';
|
|
import DriveControl from '@/views/jlmap3d/drive/drivecontrol/drivecontrol';
|
|
var train;
|
|
export default {
|
|
name: 'Jl3dDrive',
|
|
components: {
|
|
DriveMmi,
|
|
DriveTms,
|
|
DriveControl
|
|
},
|
|
data() {
|
|
return {
|
|
trainlist: null,
|
|
stationlist: null,
|
|
msgdata: null,
|
|
training: {
|
|
id: '',
|
|
name: '',
|
|
remarks: ''
|
|
},
|
|
mapdata: null,
|
|
jlmap3d: null,
|
|
selectmodel: null,
|
|
cctvshow:true,
|
|
cctvbuttonmsg: this.$t('jlmap3d.surveillanceHidden'),
|
|
mmishow: false,
|
|
showbuttonmsg: this.$t('jlmap3d.trainInstrumentationDisplay'),
|
|
trainnum: '',
|
|
stoptimes: '',
|
|
dcontrolshow: false,
|
|
msgshow:false,
|
|
controlmsg:"不能选择其它列车",
|
|
};
|
|
},
|
|
watch: {
|
|
'jlmap3d.nowspeed': {
|
|
handler: function (newVal, oldVal) {
|
|
if (newVal != oldVal) {
|
|
if (this.mmishow == true) {
|
|
this.$refs.mmiui.updatespeed(newVal);
|
|
}
|
|
}
|
|
}
|
|
},
|
|
'jlmap3d.nowmxlen': {
|
|
handler: function (newVal, oldVal) {
|
|
if (newVal != oldVal) {
|
|
if (this.mmishow == true) {
|
|
this.$refs.mmiui.updatelen(newVal);
|
|
}
|
|
}
|
|
}
|
|
},
|
|
'jlmap3d.atpspeed': {
|
|
handler: function (newVal, oldVal) {
|
|
if (newVal != oldVal) {
|
|
if (this.mmishow == true) {
|
|
this.$refs.mmiui.updateatpspeed(newVal);
|
|
}
|
|
}
|
|
}
|
|
},
|
|
'jlmap3d.atospeed': {
|
|
handler: function (newVal, oldVal) {
|
|
if (newVal != oldVal) {
|
|
if (this.mmishow == true) {
|
|
this.$refs.mmiui.updateatospeed(newVal);
|
|
}
|
|
}
|
|
}
|
|
},
|
|
'jlmap3d.trainnum': {
|
|
handler: function (newVal, oldVal) {
|
|
if (newVal != oldVal) {
|
|
this.trainnum = newVal;
|
|
}
|
|
}
|
|
},
|
|
'jlmap3d.stime': {
|
|
handler: function (newVal, oldVal) {
|
|
if (newVal != oldVal) {
|
|
this.stoptimes = newVal;
|
|
}
|
|
}
|
|
},
|
|
'jlmap3d.drivecount': {
|
|
handler: function (newVal, oldVal) {
|
|
if (newVal != oldVal) {
|
|
this.$refs.mmiui.updatedrivedata(this.jlmap3d.drivedata);
|
|
}
|
|
}
|
|
},
|
|
|
|
},
|
|
beforeDestroy() {
|
|
if (this.jlmap3d) {
|
|
this.jlmap3d.webwork.postMessage('off');
|
|
this.jlmap3d.webwork.terminate();
|
|
this.jlmap3d.endsocket();
|
|
this.jlmap3d.dispose();
|
|
this.jlmap3d = null;
|
|
|
|
// this.$destroy();
|
|
}
|
|
},
|
|
|
|
mounted() {
|
|
this.mmishow = true;
|
|
window.datanew = this.datanew;
|
|
window.updatestatus = this.updatestatus;
|
|
// this.$refs.mmiui.init();
|
|
},
|
|
methods: {
|
|
show: function (skinCode,group) {
|
|
// console.log("show");
|
|
// console.log(skinCode);
|
|
// console.log(this.jlmap3d);
|
|
|
|
if (this.jlmap3d == null) {
|
|
this.init(skinCode,group);
|
|
} else {
|
|
// this.jlmap3d.restart();
|
|
this.jlmap3d.eventon();
|
|
this.jlmap3d.animateon();
|
|
|
|
}
|
|
},
|
|
init: function (skinCode,group) {
|
|
const mapdata = this.$store.getters['map/map'];
|
|
const dom = document.getElementById('app');
|
|
let translation = {
|
|
trainAtoOn: this.$t('jlmap3d.trainAtoOn'),
|
|
trainAtoOff: this.$t('jlmap3d.trainAtoOff'),
|
|
stopTime: this.$t('jlmap3d.stopTime')
|
|
};
|
|
|
|
let project = this.$route.query.project;
|
|
// console.log(project);
|
|
if(project){
|
|
this.jlmap3d = new JLmapDriving(dom, mapdata, skinCode,this.$store,translation,group,project);
|
|
}else{
|
|
this.jlmap3d = new JLmapDriving(dom, mapdata, skinCode,this.$store,translation,group,project);
|
|
}
|
|
|
|
// console.log(translation);
|
|
// this.jlmap3d = new JLmapDriving(dom, mapdata, skinCode,this.$store,translation,group);
|
|
this.jlmap3d.eventon();
|
|
this.cctvshow = false;
|
|
|
|
},
|
|
raystand() {
|
|
this.jlmap3d.rayswitch('stand');
|
|
},
|
|
raytrain() {
|
|
this.jlmap3d.rayswitch('train');
|
|
},
|
|
raysection() {
|
|
this.jlmap3d.rayswitch('section');
|
|
},
|
|
raysignal() {
|
|
this.jlmap3d.rayswitch('signal');
|
|
},
|
|
rayswitch() {
|
|
this.jlmap3d.rayswitch('switch');
|
|
},
|
|
sstation(changedata) {
|
|
this.jlmap3d.updatecamera(changedata.mesh, 'station');
|
|
},
|
|
strain(changedata) {
|
|
if (changedata.dispose == false) {
|
|
this.jlmap3d.updatecamera(changedata, 'train');
|
|
}
|
|
|
|
},
|
|
|
|
back() {
|
|
this.$emit('showdriving');
|
|
this.jlmap3d.eventoff();
|
|
this.jlmap3d.animateoff();
|
|
// this.jlmap3d = null;
|
|
},
|
|
showplane() {
|
|
if (this.mmishow == true) {
|
|
this.showbuttonmsg = this.$t('jlmap3d.trainInstrumentationHidden');
|
|
this.mmishow = false;
|
|
} else {
|
|
this.showbuttonmsg = this.$t('jlmap3d.trainInstrumentationDisplay');
|
|
this.mmishow = true;
|
|
}
|
|
|
|
},
|
|
datanew(){
|
|
this.dcontrolshow = true;
|
|
},
|
|
cctvplane() {
|
|
if (this.cctvshow == true) {
|
|
this.cctvbuttonmsg = this.$t('jlmap3d.surveillanceHidden');
|
|
this.cctvshow = false;
|
|
this.jlmap3d.cctvoff();
|
|
} else {
|
|
this.cctvbuttonmsg = this.$t('jlmap3d.surveillanceDisplay');
|
|
this.cctvshow = true;
|
|
this.jlmap3d.cctvon();
|
|
}
|
|
|
|
},
|
|
updatestatus(newdata){
|
|
this.trainnum = newdata.groupNumber;
|
|
this.$refs.mmiui.updatetrainstatus(newdata);
|
|
updatabuttonlight(newdata);
|
|
},
|
|
warningmsg(nowmsg){
|
|
this.controlmsg = nowmsg;
|
|
this.msgshow = true;
|
|
setTimeout(this.warningmsgoff,3000);
|
|
},
|
|
warningmsgoff(){
|
|
this.msgshow = false;
|
|
|
|
},
|
|
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style rel="stylesheet/scss" lang="scss" scoped>
|
|
@import "src/styles/mixin.scss";
|
|
|
|
.display-card {
|
|
z-index: 9;
|
|
display: inline;
|
|
position: absolute;
|
|
top: 17px;
|
|
float: left;
|
|
left: 160px;
|
|
height: 32px;
|
|
}
|
|
|
|
.display-card .el-row {
|
|
line-height: 32px !important;
|
|
}
|
|
|
|
.display-score {
|
|
background-color: black;
|
|
display: -moz-inline-box;
|
|
display: inline-block;
|
|
text-align: left;
|
|
/* border: 1px solid lightskyblue; */
|
|
/* width: 100px; */
|
|
height: 32px;
|
|
line-height: 24px;
|
|
border-radius: 4px;
|
|
padding-left: 2px;
|
|
margin-left: 10px;
|
|
font-family: "Microsoft" !important;
|
|
font-size: 18px !important;
|
|
color: #fff;
|
|
}
|
|
|
|
.display-draft {
|
|
/* z-index: 1000; */
|
|
position: absolute;
|
|
float: right;
|
|
right: 40px;
|
|
top: 28px;
|
|
}
|
|
|
|
#jlsimulation {
|
|
width: 937px;
|
|
height: 937px;
|
|
}
|
|
|
|
.trainstatus{
|
|
left:0;
|
|
top:0;
|
|
width:fit-content;
|
|
width:-webkit-fit-content;
|
|
width:-moz-fit-content;
|
|
height:60px;
|
|
background: #000000;
|
|
position:absolute;
|
|
text-align: left;
|
|
color:white;
|
|
font-size:25px;
|
|
}
|
|
|
|
.jalmap3ddiv {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
top:0;
|
|
z-index: 1500;
|
|
}
|
|
|
|
.jlmap3ddraw {
|
|
float: left;
|
|
left: 0;
|
|
//left:20%;
|
|
width: 100%;
|
|
height: 100%;
|
|
position:absolute;
|
|
z-index: -1;
|
|
}
|
|
|
|
.jlmap3cctv{
|
|
float: left;
|
|
left: 0;
|
|
top:0;
|
|
//left:20%;
|
|
width: 20%;
|
|
height: 20%;
|
|
position:absolute;
|
|
z-index: -1;
|
|
}
|
|
|
|
#canvastexture {
|
|
position: absolute;
|
|
float: left;
|
|
left: 0;
|
|
z-index: -12;
|
|
}
|
|
|
|
.msg{
|
|
width:40%;
|
|
height:50px;
|
|
left:30%;
|
|
top:0;
|
|
text-align: center;
|
|
position:absolute;
|
|
}
|
|
.msgtext{
|
|
width:100%;
|
|
height:50px;
|
|
border-radius:5px;
|
|
background:#C0C0C0;
|
|
color:#FFFFFF;
|
|
font-size: 40px;
|
|
}
|
|
</style>
|