109 lines
3.0 KiB
Vue
109 lines
3.0 KiB
Vue
<template>
|
|
<div class="map-view">
|
|
<jlmap-visual ref="jlmapVisual" />
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import JlmapVisual from '@/views/jlmap/index';
|
|
import { loadMapDataById } from '@/utils/loaddata';
|
|
import { EventBus } from '@/scripts/event-bus';
|
|
|
|
export default {
|
|
name: 'MapPreview',
|
|
components: {
|
|
JlmapVisual
|
|
},
|
|
props: {
|
|
widthLeft: {
|
|
type: Number,
|
|
required: true
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
size: {
|
|
width: document.documentElement.clientWidth - 400,
|
|
height: document.documentElement.clientHeight - 80
|
|
}
|
|
};
|
|
},
|
|
computed: {
|
|
mapId() {
|
|
return this.$route.params.mapId;
|
|
},
|
|
height() {
|
|
return this.$store.state.app.height - 50 - 30;
|
|
}
|
|
},
|
|
watch: {
|
|
widthLeft(val) {
|
|
this.setWindowSize();
|
|
},
|
|
$route() {
|
|
this.$nextTick(() => {
|
|
this.initLoadData();
|
|
});
|
|
},
|
|
'$store.state.app.windowSizeCount': function() {
|
|
this.setWindowSize();
|
|
},
|
|
'$store.state.map.mapViewLoadedCount':function() {
|
|
this.$store.dispatch('map/setTrainWindowShow', false);
|
|
}
|
|
},
|
|
async beforeDestroy() {
|
|
await this.$store.dispatch('map/mapClear');
|
|
},
|
|
async mounted() {
|
|
await this.setWindowSize();
|
|
await this.initLoadData();
|
|
},
|
|
methods: {
|
|
async initLoadData() { // 加载地图数据
|
|
if (parseInt(this.mapId)) {
|
|
await this.loadMapDataById(this.mapId);
|
|
} else {
|
|
this.endViewLoading();
|
|
}
|
|
},
|
|
// 通过id加载地图数据
|
|
async loadMapDataById(mapId) {
|
|
try {
|
|
await this.$store.dispatch('training/changeMode', { mode: null });
|
|
loadMapDataById(mapId).then(()=>{
|
|
this.$store.dispatch('training/over');
|
|
this.$store.dispatch('training/setMapDefaultState');
|
|
this.$store.dispatch('map/clearJlmapTrainView');
|
|
});
|
|
} catch (error) {
|
|
this.$messageBox(`获取地图数据失败: ${error.message}`);
|
|
this.endViewLoading();
|
|
}
|
|
},
|
|
// 结束加载状态
|
|
endViewLoading(isSuccess) {
|
|
if (!isSuccess) {
|
|
this.$store.dispatch('map/mapClear');
|
|
}
|
|
|
|
this.$nextTick(() => {
|
|
EventBus.$emit('viewLoading', false);
|
|
});
|
|
},
|
|
setWindowSize() {
|
|
this.$nextTick(() => {
|
|
const width = this.$store.state.app.width - (this.widthLeft || 450) - 2;
|
|
const height = this.height;
|
|
this.$store.dispatch('config/resize', { width, height });
|
|
});
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.map-view {
|
|
float: left;
|
|
width: auto;
|
|
}
|
|
</style>
|