rt-sim-training-client/src/views/newMap/jlmapNew/index.vue

<template>
  <div ref="jlmapCanvas" class="jlmap-canvas" :style="{ width: width+'px', height: height+'px' }" @mousemove="mousemove">
    <div v-show="maskOpen" class="mask" />
    <div :id="canvasId" style="background: #000;" class="display_canvas" />
    <progress-bar ref="progressBar" />
    <zoom-box v-if="!showZoom && !isScreen" :scale-rate="dataZoom.scaleRate" @setShrink="setShrink" @setMagnify="setMagnify" />
    <show-mode v-show="isDesign" :local-station-show="localStationShow" @setShowMode="setShowMode" />
    <switch-station v-show="isDesign && (showMode === '03') && localStationShow" ref="switchStation" :concentration-station-list="concentrationStationList" @setShowStation="setShowStation" />
    <div v-if="show && !isScreen" class="zoom-view" :style="{ width: width +'px'}">
      <el-form :model="dataZoom" label-width="80px" size="mini" inline>
        <el-form-item :label="$t(`global.offset`)">
          <el-input v-model="dataZoom.offsetX" :disabled="true" style="width: 95px" />
        </el-form-item>
        <el-form-item>
          <el-input v-model="dataZoom.offsetY" :disabled="true" style="width: 95px" />
        </el-form-item>
        <div style="display: inline-block">
          <span class="title" style="">鼠标偏移:</span>
          <el-form-item label="x" label-width="12px">
            <el-input ref="offsetX" v-model="offset.x" :disabled="true" style="width: 95px" />
          </el-form-item>
          <el-form-item label="y" label-width="12px">
            <el-input v-model="offset.y" :disabled="true" style="width: 95px" />
          </el-form-item>
        </div>
        <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 '@/jmapNew/map';
import ZoomBox from './pendant/zoom';
import ShowMode from './pendant/showMode';
import SwitchStation from './pendant/switchStation';
import ProgressBar from '@/views/components/progressBar/index';
import { mapGetters } from 'vuex';
import { TrainingMode } from '@/scripts/ConstDic';
import { EventBus } from '@/scripts/event-bus';
import Theme from '@/jmapNew/theme/factory';

export default {
    name: 'JlmapVisual',
    components: {
        ZoomBox,
        ProgressBar,
        ShowMode,
        SwitchStation
    },
    data() {
        return {
            loading: true,
            dataZoom: {
                offsetX: '0',
                offsetY: '0',
                scaleRate: '1'
            },
            offset: {
                x: 0,
                y: 0
            },
            sectionActive: false,
            operate: null,
            concentrationStationList: [],
            showMode: '03',
            localStationShow: false,
            previewOrMapDraw: false,
            trainingSetStation: false // 现地实训是否根据设备仅显示设备集中站设备
        };
    },
    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;
        },
        show() {
            if (this.mode == TrainingMode.EDIT || this.mode == TrainingMode.MAP_EDIT) {
                return true;
            }
            return false;
        },
        showZoom() {
            return this.$route.path.includes('bigSplitScreen');
        },
        isScreen() {
            return this.$route.path.includes('displayBigScreen') || this.$route.path.includes('bigScreen') || this.$store.state.training.prdType === '07';
        },
        maskOpen() {
            return this.$store.state.config.maskOpen;
        },
        isDesign() {
            return this.$route.path.indexOf('mapPreviewNew') !== -1 || this.$route.path.indexOf('map/draw') !== -1;
        }
    },
    watch: {
        '$store.state.map.map': function (val, old) {
            try {
                if (val) {
                    this.setMap(val);
                }
            } catch (error) {
                console.log('[ERROR] ', error);
                this.mapViewLoaded(false);
            }
        },
        '$store.state.training.rezoomCount': function () {
            let code = this.$store.state.training.offsetStationCode; // 偏移集中站坐标
            if (code && code.includes('TurnedAround')) { // 单独处理 自动折返
                const cycleButtonList = this.$store.state.map.map.cycleButtonList;
                if (cycleButtonList && cycleButtonList.length > 0) {
                    cycleButtonList.forEach(element => {
                        if (code == element.cycleCode) {
                            code = element.code;
                        }
                    });
                }
            }
            this.setCenter(code);
        },
        '$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);
        },
        '$store.state.training.prdType': function (val) {
            if (val) {
                this.changePrdType(val);
            }
        },
        '$store.state.map.showCentralizedStationNum': function (val) {
            if (this.$store.state.map.showCentralizedStationCode) {
                this.setShowStation(this.$store.state.map.showCentralizedStationCode);
            }
        },
        '$store.state.training.offsetStationCode': function(code) {
            if (code && this.localStationShow && this.$store.state.training.prdType === '01') {
                const deviceModel = this.$store.getters['map/getDeviceByCode'](code);
                if (deviceModel._type == 'Section' || deviceModel._type == 'Switch' || deviceModel._type == 'Signal' || deviceModel._type == 'Switch') {
                    const stationModel = this.$store.getters['map/getDeviceByCode'](deviceModel.stationCode);
                    this.setShowStation(stationModel.code, true);
                    this.$store.dispatch('training/setCenterStationCode', stationModel.code);
                } else if (deviceModel._type === 'StationStand') {
                    const stationModel = this.$store.getters['map/getDeviceByCode'](deviceModel.deviceStationCode);
                    this.setShowStation(stationModel.code, true);
                    this.$store.dispatch('training/setCenterStationCode', stationModel.code);
                } else if (deviceModel._type === 'Station') {
                    let stationModel = '';
                    if (deviceModel.centralized) {
                        stationModel = deviceModel;
                    } else {
                        this.$store.state.map.map.stationList || [].forEach(item => {
                            item.chargeStationCodeList || [].forEach(it => {
                                if (it === deviceModel.code) {
                                    stationModel = item;
                                }
                            });
                        });
                    }
                    this.setShowStation(stationModel.code, true);
                    this.$store.dispatch('training/setCenterStationCode', stationModel.code);
                }
                this.setCenter(code);
            }
        },
        '$store.state.socket.simulationReset': function (val) { // 仿真结束标识
            if (val) {
                this.simulationReset(val);
            }
        }
    },
    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;
            };
            // 默认个人地图绘制可以滚轮放大缩小 其他地图显示不允许此操作
            const path = window.location.href;
            const mouseWheelFlag = true;
            this.previewOrMapDraw = false;
            if (path.indexOf('map/draw') !== -1 || path.indexOf('mapPreviewNew') !== -1) {
                this.previewOrMapDraw = true;
            }
            const prdType = this.$store.state.training.prdType;
            Vue.prototype.$theme = new Theme();
            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,
                    zoomOnMouseWheel: mouseWheelFlag
                },
                showConfig: {
                    prdType: prdType,
                    previewOrMapDraw: this.previewOrMapDraw,
                    showMode: '03'
                },
                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);
            if (this.$route.path.startsWith('/design/usermap/map/draw')) {
                this.$jlmap.on('keyboard', this.onKeyboard, this);
            } else {
                this.$jlmap.on('keyboard', this.onSimulationKeyboard, this);
            }
            window.document.oncontextmenu = function () {
                return false;
            };
        },
        // 重置jlmap宽高
        resetSize() {
            this.$nextTick(() => {
                this.$jlmap && this.$jlmap.resize({ width: this.width, height: this.height });
                setTimeout(() => {
                    this.$store.dispatch('config/resetCanvasOffset');
                    this.$store.dispatch('training/emitTipFresh');
                }, 100);
            });
        },
        // 设置显示图层
        setLevelVisible(levels) {
            this.$jlmap && this.$jlmap.setLevelVisible(levels);
        },
        // 设置显示中心
        setCenter(deviceCode) {
            this.$jlmap && this.$jlmap.setCenter(deviceCode);
        },
        // 地图数据加载完成
        handleDataLoaded() {
            this.$store.dispatch('map/mapDataLoaded');
            const concentrationStationList = [];
            this.$store.state.map.map.stationList.forEach(item => {
                if (item.centralized) {
                    concentrationStationList.push({value: item.code, name: item.name});
                }
            });
            this.concentrationStationList = concentrationStationList;
            const lineCode = this.$store.state.map.map.skinVO.code;
            if (Vue.prototype.$theme) {
                this.localStationShow = Vue.prototype.$theme._localShowMode[lineCode] === 'ecStation';
            }
            this.$store.dispatch('map/setTrainWindowShow', this.previewOrMapDraw);
        },
        // 地图视图加载完成
        handleViewLoaded() {
            this.$store.dispatch('map/mapViewLoaded');
            if (!this.$store.state.training.prdType) {
                this.mapViewLoaded(false);
            }
        },
        // 地图状态加载完成
        handleStateLoaded() {
            this.mapViewLoaded(false);
        },
        // 地图视图更新
        handleViewUpdate() {
        },
        // 地图状态更新
        handleStateUpdate() {
        },
        // 视图参数改变
        handleOptionsUpdate(options) {
        },
        // 键盘快捷键事件
        onKeyboard(hook) {
            switch (hook) {
            case 'Ctrl_Z': this.$store.dispatch('map/setRevocation');
                break;
            case 'Ctrl_Y': this.$store.dispatch('map/setRecover');
                break;
            case 'Delete': this.$store.dispatch('map/setDeleteCount');
                break;
            case 'Update':
                this.$refs.offsetX.focus();
                this.$store.dispatch('map/setUpdateCount');
                break;
            }
        },
        onSimulationKeyboard(hook) {
            switch (hook) {
            case 'Update': this.$store.dispatch('map/setKeyboardEnter');
                break;
            }
        },
        async simulationReset() {
            await this.$store.dispatch('map/clearJlmapTrainView');
            await this.$store.dispatch('map/setTrainWindowShow', false);
            await this.$store.dispatch('training/over');
            await this.$store.dispatch('socket/setSimulationReset'); // 清空
            await this.$store.dispatch('socket/setSimulationStart');
            await this.$store.dispatch('training/setMapDefaultState');
        },
        // 视图缩放事件
        onDataZoom(dataZoom) {
            this.dataZoom.offsetX = dataZoom.offsetX.toFixed(1) + '';
            this.dataZoom.offsetY = dataZoom.offsetY.toFixed(1) + '';
            this.dataZoom.scaleRate = dataZoom.scaleRate + '';
            this.offset.x = this.dataZoom.offsetX;
            this.offset.y = this.dataZoom.offsetY;

            const lineCode = this.$store.getters['map/lineCode'];
            if (lineCode) {
                const param = {
                    scaleRate: this.dataZoom.scaleRate,
                    offsetY: this.dataZoom.offsetY,
                    offsetX: this.dataZoom.offsetX,
                    lineCode: lineCode
                };
                this.$store.dispatch('map/updateZoom', this.dataZoom);
                localStore.set(`scaleRate_${lineCode}`, 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, {routeData:this.$store.state.map.routeData, autoReentryData: this.$store.state.map.autoReentryData});
        },
        // 刷新地图数据
        refresh(map) {
        },
        // 缩小
        setShrink() {
            this.$jlmap.setOptions({type: 'zoom', scale: -1});
        },
        // 放大
        setMagnify() {
            this.$jlmap.setOptions({type: 'zoom', scale: 1});
        },
        mousemove(e) {
            this.offset = {
                x: e.offsetX + Number(this.dataZoom.offsetX),
                y: e.offsetY + Number(this.dataZoom.offsetY)
            };
            this.$store.dispatch('map/setMousemove');
        },
        // 综合演练切换现地行调模式
        changePrdType(val) {
            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.updatePrdType(val, nameList);
        },
        // 切换现地行调显示界面（绘图和预览页面下）
        setShowMode(showMode) {
            if (this.showMode !== showMode) {
                this.setShowStation('');
                this.localStationShow && this.$refs.switchStation.inintShowStation();
            }
            this.showMode = showMode;
            const nameList = Object.keys(this.$store.state.map.map || {});
            let list = [];
            nameList.forEach(item => {
                if (this.$store.state.map.map[item] && this.$store.state.map.map[item].constructor === Array) {
                    list = [...list, ...this.$store.state.map.map[item]];
                }
            });
            this.$jlmap.updateShowMode(list, showMode);
            EventBus.$emit('select_DrawType', showMode);
        },
        setShowStation(stationCode, setCenter) {
            const nameList = Object.keys(this.$store.state.map.map);
            let list = [];
            nameList.forEach(item => {
                if (this.$store.state.map.map[item] && this.$store.state.map.map[item].constructor === Array) {
                    if (item === 'trainList') {
                        this.$store.state.map.map[item].forEach(elem => {
                            elem && list.push(elem);
                        });
                    } else {
                        list = [...list, ...this.$store.state.map.map[item]];
                    }
                }
            });
            this.$jlmap.updateShowStation(list, stationCode);
            !setCenter && this.setCenter(stationCode);
        },
        setOffset(data, num, sum) {
            this.$jlmap.switchScreen(data, num, sum);
        }
    }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    .mask{
        opacity: 0;
        background: #000;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 9;
    }
    .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;
		background: #000;
    }
    .title{
        text-align: right;
        font-size: 14px;
        color: #606266;
        line-height: 32px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        font-weight: 700;
    }

    .zoom-view {
		position: absolute;
		bottom: 0;
		background: #fff;
		padding-top: 5px;
		height: 42px;
		border-bottom: 1px #f3f3f3 solid;
		border-right: 1px #f3f3f3 solid;
    }

    /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>