rt-sim-training-client/src/views/jlmap/index.vue

<template>
  <div class="jlmap-canvas" :style="{ width: width+'px', height: height+'px' }">
    <div :id="canvasId" style="background: #000;" />
    <progress-bar ref="progressBar" />
    <zoom-box v-if="!isScreen" :scale-rate="dataZoom.scaleRate" @setShrink="setShrink" @setMagnify="setMagnify" />
    <div v-if="show" class="zoom-view" :style="{ width: width +'px'}">
      <el-form :model="dataZoom" label-width="60px" size="mini" inline>
        <el-form-item :label="$t(`global.offset`)">
          <el-input v-model="dataZoom.offsetX" :disabled="true" />
        </el-form-item>
        <el-form-item>
          <el-input v-model="dataZoom.offsetY" :disabled="true" />
        </el-form-item>
        <el-form-item :label="$t(`global.zoom`)" style="float: right">
          <el-input v-model="dataZoom.scaleRate" :disabled="true" />
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import Vue from 'vue';
import localStore from 'storejs';
import Jlmap from '@/jmap/map';
import ZoomBox from './zoom/zoom';
import ProgressBar from '@/views/components/progressBar/index';
import { mapGetters } from 'vuex';
import { TrainingMode } from '@/scripts/ConstDic';
import { EventBus } from '@/scripts/event-bus';

export default {
	name: 'JlmapVisual',
	components: {
		ZoomBox,
		ProgressBar
	},
	data() {
		return {
			loading: true,
			dataZoom: {
				offsetX: '0',
				offsetY: '0',
				scaleRate: '1'
			},
			sectionActive: false,
			operate: null
		};
	},
	computed: {
		...mapGetters('training', [
			'mode',
			'offsetStationCode'
		]),
		canvasId() {
			const canvasId = ['map', (Math.random().toFixed(5)) * 100000].join('_');
			this.$store.dispatch('config/setCurrentCancasId', { id: canvasId });
			return canvasId;
		},
		width() {
			return this.$store.state.config.width;
		},
		height() {
			return this.$store.state.config.height - 30;
		},
		show() {
			if (this.mode == TrainingMode.EDIT || this.mode == TrainingMode.MAP_EDIT) {
				return true;
			}
			return false;
		},
		isScreen() {
			return this.$route.params.mode == 'dp' || this.$store.state.training.roles == 'BigScreen';
		}
	},
	watch: {
		'$store.state.map.map': function (val, old) {
			try {
				if (val) {
					this.setMap(val);
				} else {
					this.mapViewLoaded(false);
				}
			} catch (error) {
				console.log('[ERROR] ', error);
				this.mapViewLoaded(false);
			}
		},
		'$store.state.training.rezoomCount': function (val, old) {
			this.setCenter(this.$store.state.training.offsetStationCode);
		},
		'$store.state.config.canvasSizeCount': function (val) {
			this.resetSize();
		},
		'$store.state.menuOperation.magnifyCount': function () {
			this.setMagnify();
		},
		'$store.state.menuOperation.shrinkCount': function () {
			this.setShrink();
		},
		$route() {
			this.mapViewLoaded(true);
		}
	},
	created() {
		EventBus.$on('viewLoading', (loading) => {
			this.mapViewLoaded(loading);
		});
		EventBus.$on('viewProgressAt', (percentage) => {
			this.mapViewProgressAt(percentage);
		});
		EventBus.$on('refresh', () => {
			this.refresh(this.$store.state.map.map);
		});
	},
	mounted() {
		this.initLoadPage();
	},
	beforeDestroy() {
		EventBus.$off('refresh');
		EventBus.$off('viewLoading');
		EventBus.$off('viewProgressAt');
		this.$store.dispatch('map/mapClear');
		if (this.$jlmap) {
			this.$jlmap.dispose();
		}
	},
	methods: {
		// 初始化jlmap
		initLoadPage() {
			document.getElementById(this.canvasId).oncontextmenu = function (e) {
				return false;
			};

			Vue.prototype.$jlmap = new Jlmap({
				dom: document.getElementById(this.canvasId),
				config: {
					renderer: 'canvas',
					width: this.width,
					height: this.height
				},
				options: {
					scaleRate: 1,
					offsetX: 0,
					offsetY: 0
				},
				methods: {
					dataLoaded: this.handleDataLoaded,
					viewLoaded: this.handleViewLoaded,
					stateLoaded: this.handleStateLoaded
				}
			});

			this.$jlmap.on('dataZoom', this.onDataZoom, this);
			this.$jlmap.on('selected', this.onSelected, this);
			this.$jlmap.on('contextmenu', this.onContextMenu, this);

			window.document.oncontextmenu = function () {
				return false;
			};
		},
		// 重置jlmap宽高
		resetSize() {
			this.$nextTick(() => {
				this.$jlmap && this.$jlmap.resize({ width: this.width, height: this.height });

				this.$store.dispatch('training/updateOffsetStationCode', { offsetStationCode: this.offsetStationCode });

				setTimeout(() => {
					this.$store.dispatch('config/resetCanvasOffset');
					this.$store.dispatch('training/emitTipFresh');
				}, 100);
			});
		},
		// 设置显示图级
		setLayerVisible(layer) {
			this.$jlmap && this.$jlmap.setLayerVisible(layer);
		},
		// 设置显示图层
		setLevelVisible(levels) {
			this.$jlmap && this.$jlmap.setLevelVisible(levels);
		},
		// 设置显示中心
		setCenter(deviceCode) {
			this.$jlmap && this.$jlmap.setCenter(deviceCode);
		},
		// 地图数据加载完成
		handleDataLoaded() {
			this.$store.dispatch('map/mapDataLoaded');
		},
		// 地图视图加载完成
		handleViewLoaded() {
			this.$store.dispatch('map/mapViewLoaded');
			if (!this.$store.state.training.prdType) {
				this.mapViewLoaded(false);
			}
		},
		// 地图状态加载完成
		handleStateLoaded() {
			this.mapViewLoaded(false);
		},
		// 地图视图更新
		handleViewUpdate() {
		},
		// 地图状态更新
		handleStateUpdate() {
		},
		// 视图参数改变
		handleOptionsUpdate(options) {
		},
		// 视图缩放事件
		onDataZoom(dataZoom) {
			this.dataZoom.offsetX = dataZoom.offsetX.toFixed(1) + '';
			this.dataZoom.offsetY = dataZoom.offsetY.toFixed(1) + '';
			this.dataZoom.scaleRate = dataZoom.scaleRate + '';

			const skinCode = this.$store.getters['map/skinCode'];
			if (skinCode) {
				const param = {
					scaleRate: this.dataZoom.scaleRate,
					offsetY: this.dataZoom.offsetY,
					offsetX: this.dataZoom.offsetX,
					skinCode: skinCode
				};
				this.$store.dispatch('map/updateZoom', this.dataZoom);
				localStore.set(`scaleRate_${skinCode}`, JSON.stringify(param)); // 保存缩放倍数
			}

			this.$store.dispatch('training/emitTipFresh');
		},
		// 点击选择事件
		onSelected(em) {
			this.$emit('onSelect', em);
		},
		// 右键点击事件
		onContextMenu(em) {
			this.$emit('onMenu', em);
		},
		// 设置地图加载状态
		mapViewLoaded(loading) {
			this.loading = loading;
			if (loading) {
				this.$refs.progressBar&&this.$refs.progressBar.start();
			} else {
				this.$refs.progressBar&&this.$refs.progressBar.end(true);
			}
		},
		// 设置地图加载进度
		mapViewProgressAt(percentage) {
			this.$nextTick(() => {
				this.$refs.progressBar.progressAt(percentage);
			});
		},
		// 设置新的地图数据
		setMap(map) {
			this.$jlmap.setMap(map, this.$store.state.map.mapDevice);
		},
		// 刷新地图数据
		refresh(map) {
		},
		// 缩小
		setShrink() {
			this.$jlmap.setOptions({type: 'zoom', scale: -1});
		},
		// 放大
		setMagnify() {
			this.$jlmap.setOptions({type: 'zoom', scale: 1});
		}
	}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    .jlmap-canvas {
        position: relative;
        -moz-user-select: none;
        -o-user-select: none;
        -khtml-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    .zoom-view {
        // position: fixed;
		position: absolute;
        height: 28px;
    }

    /deep/ {
        .el-form.el-form--inline {
            height: 28px !important;
            line-height: 28px !important
        }

        .el-loading-mask {
            background-color: rgba(0, 0, 0, 0.3);
        }
    }
</style>