rt-sim-training-client/src/views/newMap/displayBaSiDi/tro.vue

221 lines
7.4 KiB
Vue
Raw Normal View History

2021-05-24 11:29:59 +08:00
<template>
<el-dialog
:modal="false"
:title="title"
:visible.sync="show"
:fullscreen="true"
:before-close="doClose"
:z-index="2003"
>
<div>
2021-05-25 16:05:45 +08:00
<map-system-draft ref="mapCanvas" :no-menu="type==='tro'" @back="back" />
2021-05-24 11:29:59 +08:00
<div v-if="type === 'troDetail'" style="width: 150px;height: 35px;display: flex;position: absolute; bottom: 60px;left: calc(50% - 75px);z-index: 9999;justify-content: space-between;justify-items: center;">
<div class="arrow-button" :style="{backgroundImage: 'url(' + buttonLeft + ')' }" @click="changeStation(-1)" />
<div class="arrow-button" :style="{backgroundImage: 'url(' + buttonDbup + ')' }" @click="showTroMode" />
<div class="arrow-button" :style="{backgroundImage: 'url(' + buttonRight + ')' }" @click="changeStation(1)" />
</div>
</div>
</el-dialog>
</template>
<script>
import MapSystemDraft from '@/views/newMap/mapsystemNew/common/index';
import { mapGetters } from 'vuex';
import ButtonDbupIcon from '@/assets/baSiDi/dbup.png';
import ButtonRightIcon from '@/assets/baSiDi/right.png';
import ButtonLeftIcon from '@/assets/baSiDi/left.png';
export default {
name: 'TRO',
components: {
MapSystemDraft
},
props: {
stationList: {
type: Array,
required: true
},
trainList: {
type: Array,
required: true
}
},
data() {
return {
dialogShow: false,
mapData: null,
type: 'tro',
deviceCode: '',
2021-05-26 14:04:36 +08:00
enter: false,
2021-05-24 11:29:59 +08:00
buttonDbup: ButtonDbupIcon,
buttonRight: ButtonRightIcon,
buttonLeft: ButtonLeftIcon
};
},
computed: {
show() {
return this.dialogShow && !this.$store.state.menuOperation.break;
},
title() {
return this.type === 'tro' ? '轨道总览' : '轨道详览';
},
width() {
2021-05-25 16:05:45 +08:00
return this.$store.state.app.width - 5;
2021-05-24 11:29:59 +08:00
},
height() {
return this.$store.state.app.height - 50;
},
...mapGetters('map', [
'bigScreenConfig'
])
},
watch: {
'$store.state.map.mapViewLoadedCount': function (val) { // 地图视图加载完成标识 开始加载默认状态
if (this.dialogShow && this.type === 'tro') {
this.showTroMode();
2021-05-25 16:05:45 +08:00
this.$refs.mapCanvas && this.$refs.mapCanvas.mapViewLoaded(false);
2021-05-24 11:29:59 +08:00
} else if (this.dialogShow && this.type === 'troDetail') {
this.showTroDetail();
2021-05-25 16:05:45 +08:00
this.$refs.mapCanvas && this.$refs.mapCanvas.mapViewLoaded(false);
2021-05-24 11:29:59 +08:00
}
},
'$store.state.menuOperation.selectedCount':function(em) {
const device = this.$store.state.menuOperation.selected;
2021-05-26 14:04:36 +08:00
console.log(device);
2021-05-24 11:29:59 +08:00
if (device && device._type === 'Station' && this.$store.state.menuOperation.subType === 'troButton') {
this.deviceCode = device.code;
this.type = 'troDetail';
this.showTroDetail();
}
}
},
2021-05-26 14:04:36 +08:00
mounted() {
},
2021-05-24 11:29:59 +08:00
methods: {
doShow() {
this.dialogShow = true;
2021-05-25 16:05:45 +08:00
this.$store.dispatch('config/resize', { width:this.width, height: this.height });
2021-05-24 11:29:59 +08:00
this.$nextTick(function() {
2021-05-26 14:04:36 +08:00
if (!this.enter) {
this.$refs.mapCanvas.setMap(this.$store.state.map.map);
this.enter = true;
}
2021-05-24 11:29:59 +08:00
});
},
showTroMode() {
this.type = 'tro';
const nameList = Object.keys(this.$store.state.map.map || {});
let list = [];
nameList.forEach(item => {
if (item !== 'skinVO') {
const data = this.$store.state.map.map[item];
if (data && data.constructor === Array) {
list = [...list, ...data];
}
}
});
this.handleUpdateScreen();
this.$jlmap.updateShowMode(list, '05'); // 二次过滤
},
showTroDetail() {
const nameList = Object.keys(this.$store.state.map.map || {});
let list = [];
nameList.forEach(item => {
if (item !== 'skinVO') {
const data = this.$store.state.map.map[item];
if (data && data.constructor === Array) {
list = [...list, ...data];
}
}
});
this.$jlmap.setRecover({ scaleRate: 1, offsetX: 0, offsetY: 0 });
this.$jlmap.updateShowMode(list, '02'); // 二次过滤
const trainList = [];
this.trainList.forEach(item => {
trainList.push({ code: item.groupNumber, deviceType:'TRAIN' });
});
this.$store.dispatch('training/updateMapState', trainList);
2021-05-26 14:04:36 +08:00
console.log(this.deviceCode, '====');
setTimeout(() => {
this.$refs.mapCanvas.setCenter(this.deviceCode);
}, 1000);
2021-05-24 11:29:59 +08:00
},
handleUpdateScreen() {
this.maskOpen = false;
if (this.bigScreenConfig.bigScreenSplitConfig && this.bigScreenConfig.bigScreenSplitConfig.length) {
const offsetList = this.bigScreenConfig.offsetList;
const width = this.bigScreenConfig.width;
const height = this.bigScreenConfig.height;
const size = {
width: (this.$store.state.app.width - 2) * width,
height: this.$store.state.app.height * height,
list: this.bigScreenConfig.bigScreenSplitConfig.map(ele => ele.position),
offsetList: offsetList
};
this.$jlmap.setUpdateScreen(size);
} else {
this.maskOpen = true;
// this.$messageBox('该线路没有大屏切割位置信息, 请前往地图绘制编辑');
}
},
changeStation(value) {
const device = this.$store.getters['map/getDeviceByCode'](this.deviceCode);
const stationSn = device.sn + value;
const station = this.stationList.find((item) => {
return item.sn === stationSn;
});
if (station) {
this.deviceCode = station.code;
2021-05-25 16:05:45 +08:00
this.$refs.mapCanvas.setCenter(this.deviceCode);
2021-05-24 11:29:59 +08:00
}
},
back() {},
doClose() {
2021-05-26 14:04:36 +08:00
this.type = 'tro';
2021-05-24 11:29:59 +08:00
this.loading = false;
this.dialogShow = false;
}
}
};
</script>
<style scoped>
/deep/ .el-dialog {
background: rgba(100, 100, 100, 1);
position: relative;
border: 2px solid rgb(144, 144, 144, 0.8);
border-radius: 6px;
font-size: 14px;
}
/deep/ .el-dialog .el-dialog__body{
background: rgba(100, 100, 100, 1);
border: 0;
padding: 0;
}
/deep/ .el-dialog .el-dialog__header {
padding: 5px;
height: 30px;
}
/deep/ .el-dialog .el-dialog__title {
color: #fff;
}
/deep/ .el-dialog .el-dialog__headerbtn {
background: linear-gradient(#CD98A0, #C27D6E, #B63022, #C68770);
border: 1px solid #fff;
border-radius: 4px;
top: 4px;
right: 5px;
line-height: 16px;
}
/deep/ .el-dialog__headerbtn .el-dialog__close{
color: #fff;
}
.arrow-button{
width: 45px;
height: 30px;
cursor: pointer;
background-size: 45px 30px;
background-repeat: no-repeat;
}
</style>