257 lines
9.0 KiB
Vue
257 lines
9.0 KiB
Vue
<template>
|
|
<div class="map-view" :style="{width: canvasWidth+'px',height:'100%',position:'absolute',overflow:'hidden'}">
|
|
<div v-show="maskOpen" class="mask" :style="{'width': maskWidth}" />
|
|
<jlmap-visual ref="jlmapVisual" />
|
|
<div class="display-draft">
|
|
<el-button-group>
|
|
<el-button type="small" @click="back">{{ $t('scriptRecord.scriptBack') }}</el-button>
|
|
</el-button-group>
|
|
</div>
|
|
<menu-system-time ref="menuSystemTime" :offset="15" :group="group" />
|
|
<div class="trainExample">
|
|
<div class="trainExampleL">
|
|
<div class="trainExampleName">车站 颜色图例</div>
|
|
<div class="eachTrainExample">
|
|
<span class="smallExample" />
|
|
<span class="eachTrainExampleName">0 ~ 40</span>
|
|
</div>
|
|
<div class="eachTrainExample">
|
|
<span class="mediumExample" />
|
|
<span class="eachTrainExampleName">40 ~ 80</span>
|
|
</div>
|
|
<div class="eachTrainExample">
|
|
<span class="bigExample" />
|
|
<span class="eachTrainExampleName">80及以上</span>
|
|
</div>
|
|
</div>
|
|
<div class="trainExampleR">
|
|
<div class="trainExampleName">列车 颜色图例</div>
|
|
<div class="eachTrainExample">
|
|
<span class="smallExample" />
|
|
<span class="eachTrainExampleName">0 ~ 100</span>
|
|
</div>
|
|
<div class="eachTrainExample">
|
|
<span class="mediumExample" />
|
|
<span class="eachTrainExampleName">100 ~ 200</span>
|
|
</div>
|
|
<div class="eachTrainExample">
|
|
<span class="bigExample" />
|
|
<span class="eachTrainExampleName">200及以上</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import JlmapVisual from '@/views/newMap/jlmapNew/index';
|
|
// import { Notification } from 'element-ui';
|
|
import { loadNewMapDataByGroup } from '@/utils/loaddata';
|
|
import { clearSimulation, getSimulationInfoNew } from '@/api/simulation';
|
|
import { creatSubscribe, clearSubscribe, displayTopic, jl3dTopic} from '@/utils/stomp';
|
|
import MenuSystemTime from '@/views/newMap/displayNew/menuSystemTime';
|
|
import { getToken } from '@/utils/auth';
|
|
import { mapGetters } from 'vuex';
|
|
import { timeFormat } from '@/utils/date';
|
|
export default {
|
|
name:'PracticeDisplay',
|
|
components: {
|
|
JlmapVisual,
|
|
MenuSystemTime
|
|
},
|
|
data() {
|
|
return {
|
|
maskOpen: false,
|
|
maskWidth: '100%',
|
|
group:''
|
|
};
|
|
},
|
|
computed:{
|
|
...mapGetters([
|
|
'canvasWidth'
|
|
]),
|
|
// group() {
|
|
// return this.$route.query.group;
|
|
// },
|
|
width() {
|
|
return this.$store.state.app.width;
|
|
},
|
|
height() {
|
|
return this.$store.state.app.height;
|
|
}
|
|
},
|
|
watch:{
|
|
'$store.state.map.mapViewLoadedCount':function() {
|
|
this.$store.dispatch('map/setTrainWindowShow', false);
|
|
// this.$jlmap.off('zoom');
|
|
if (this.group) {
|
|
this.subscribe();
|
|
}
|
|
},
|
|
'$store.state.app.windowSizeCount': function() { // 窗口缩放
|
|
this.setWindowSize();
|
|
},
|
|
'$store.state.socket.equipmentStatus': function (val) {
|
|
if (val.length && this.$route.query.group) {
|
|
this.statusMessage(val);
|
|
}
|
|
},
|
|
'$store.state.socket.simulationStart': function(val) {
|
|
this.$store.dispatch('training/simulationStart').then(() => {
|
|
this.$store.dispatch('map/setShowCentralizedStationNum');
|
|
});
|
|
},
|
|
'$store.state.socket.standPfiNum':function(val) {
|
|
const stationNumList = val;
|
|
stationNumList.forEach(stationNum=>{
|
|
stationNum.deviceType = 'STAND';
|
|
stationNum.code = stationNum.standCode;
|
|
});
|
|
this.$store.dispatch('training/updateMapState', stationNumList);
|
|
},
|
|
'$store.state.socket.trainPfiNum':function(val) {
|
|
const trainNumList = this.$store.state.socket.trainPfiNum;
|
|
trainNumList.forEach(stationNum=>{
|
|
stationNum.deviceType = 'TRAIN';
|
|
console.log(stationNum.num, 'inital');
|
|
});
|
|
this.$store.dispatch('training/updateMapState', trainNumList);
|
|
},
|
|
'$store.state.socket.trainPfiBL':function(val) {
|
|
const trainNum = this.$store.state.socket.trainPfiBL;
|
|
const device = this.$store.getters['map/getDeviceByCode'](trainNum.code);
|
|
trainNum.deviceType = 'TRAIN';
|
|
// console.log(trainNum, device, device.num, trainNum.in, trainNum.out, 'changed');
|
|
trainNum.num = device.num + trainNum.in - trainNum.out;
|
|
// console.log(trainNum.num, 'changeder');
|
|
this.$store.dispatch('training/updateMapState', [trainNum]);
|
|
},
|
|
'$store.state.socket.isFirst':function(val) {
|
|
if (val) {
|
|
const header = { group: this.group || '', 'X-Token': getToken() };
|
|
creatSubscribe(`${jl3dTopic}\/${this.$route.query.group}`, header);
|
|
}
|
|
}
|
|
},
|
|
beforeDestroy() {
|
|
this.$store.dispatch('map/mapClear');
|
|
if (this.group) {
|
|
clearSimulation(this.group);
|
|
this.clearSubscribe();
|
|
this.$store.dispatch('socket/resetTrainPassagerNum');
|
|
this.$store.dispatch('socket/setIsFirst', false);
|
|
}
|
|
},
|
|
mounted() {
|
|
this.group = this.$route.query.group;
|
|
this.setWindowSize();
|
|
this.initLoadData();
|
|
},
|
|
methods:{
|
|
async initLoadData() { // 加载地图数据
|
|
if (this.group) {
|
|
this.loadSimulationInfo();
|
|
await loadNewMapDataByGroup(this.group);
|
|
}
|
|
},
|
|
// 缩放设置
|
|
setWindowSize() {
|
|
const width = this.width;
|
|
const height = this.height;
|
|
this.$store.dispatch('config/resize', { width, height });
|
|
},
|
|
async back() {
|
|
// if (this.group) {
|
|
// await clearSimulation(this.group);
|
|
// this.clearSubscribe();
|
|
// }
|
|
// this.$store.dispatch('map/setShowCentralizedStationCode', '');
|
|
// history.go(-1);
|
|
// await this.$store.dispatch('map/mapClear');
|
|
// if (this.group) {
|
|
// await clearSimulation(this.group);
|
|
// this.clearSubscribe();
|
|
// }
|
|
window.close();
|
|
// Notification.closeAll();
|
|
},
|
|
async statusMessage(list) {
|
|
await this.$store.dispatch('training/updateMapState', list);
|
|
await this.$store.dispatch('socket/setEquipmentStatus');
|
|
},
|
|
async subscribe() {
|
|
this.clearSubscribe();
|
|
const header = { group: this.group || '', 'X-Token': getToken() };
|
|
// creatSubscribe(`${jl3dTopic}\/${this.$route.query.group}`, header);
|
|
creatSubscribe(`${displayTopic}\/${this.$route.query.group}`, header);
|
|
// setTimeout(()=>{
|
|
|
|
// }, 500);
|
|
// });
|
|
await this.$store.dispatch('training/setHasSubscribed');
|
|
},
|
|
clearSubscribe() {
|
|
clearSubscribe(`${jl3dTopic}\/${this.group}`);
|
|
clearSubscribe(`${displayTopic}\/${this.group}`);
|
|
},
|
|
async loadSimulationInfo() {
|
|
const resp = await getSimulationInfoNew(this.group);
|
|
if (resp && resp.code == 200 && resp.data) {
|
|
if (!resp.data.dataError) {
|
|
this.$store.dispatch('scriptRecord/updateSimulationPause', resp.data.pause); // 是否暂停判断
|
|
this.$store.dispatch('training/setInitTime', +new Date(`${new Date().toLocaleDateString()} ${timeFormat(resp.data.systemTime)}`));
|
|
this.$store.dispatch('training/countTime');
|
|
this.planRunning = resp.data.planRunning;
|
|
if (resp.data.planRunning) {
|
|
this.$store.commit('training/start');
|
|
}
|
|
} else {
|
|
this.$messageBox('此地图数据正在维护中,无法运行！');
|
|
}
|
|
this.dataError = resp.data.dataError;
|
|
}
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.display-draft {
|
|
position: absolute;
|
|
float: right;
|
|
right: 15px;
|
|
bottom: 15px;
|
|
}
|
|
.trainExample{
|
|
position: absolute;
|
|
width: 360px;
|
|
padding: 10px;
|
|
left: 20px;
|
|
top: 20px;
|
|
color: #fff;
|
|
border: 1px #fff solid;
|
|
border-radius: 3px;
|
|
background: #000;
|
|
}
|
|
.trainExampleName{margin-bottom: 10px;}
|
|
.eachTrainExample{margin-top: 5px;}
|
|
.smallExample,.mediumExample,.bigExample{
|
|
width: 50px;
|
|
height: 20px;
|
|
display: inline-block;
|
|
}
|
|
.eachTrainExampleName{
|
|
vertical-align: top;
|
|
line-height: 23px;
|
|
margin-left: 8px;
|
|
}
|
|
.smallExample{background: #29a909;}
|
|
.mediumExample{background: #ffa500;}
|
|
.bigExample{background: #F00;}
|
|
.trainExampleL{
|
|
float: left;
|
|
display: inline-block;
|
|
margin-right: 35px;
|
|
margin-left: 10px;
|
|
}
|
|
.trainExampleR{display: inline-block;}
|
|
</style>
|