472 lines
17 KiB
Vue
472 lines
17 KiB
Vue
<template>
|
|
<div 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="!isScreen" :scale-rate="dataZoom.scaleRate" @setShrink="setShrink" @setMagnify="setMagnify" />
|
|
<show-mode v-if="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" 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;
|
|
},
|
|
isScreen() {
|
|
return this.$route.params.mode == 'dp' || this.$store.state.training.roles == 'BigScreen';
|
|
},
|
|
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 (val, old) {
|
|
this.setCenter(this.$store.state.training.offsetStationCode);
|
|
},
|
|
'$store.state.exam.deviceCode': function (val) {
|
|
val && this.setCenter(val);
|
|
},
|
|
'$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) {
|
|
this.changePrdType(val);
|
|
},
|
|
'$store.state.map.showCentralizedStationNum': function (val) {
|
|
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);
|
|
} 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.setCenter(code);
|
|
}
|
|
}
|
|
},
|
|
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);
|
|
}
|
|
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);
|
|
});
|
|
},
|
|
// 设置显示图层
|
|
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;
|
|
}
|
|
},
|
|
// 视图缩放事件
|
|
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') {
|
|
list = [...list, ...this.$store.state.map.map[item]];
|
|
}
|
|
});
|
|
this.$jlmap.updatePrdType(val, nameList);
|
|
},
|
|
// 切换现地行调显示界面（绘图和预览页面下）
|
|
setShowMode(showMode) {
|
|
if (this.showMode !== showMode) {
|
|
this.setShowStation('');
|
|
this.$refs.switchStation.inintShowStation();
|
|
}
|
|
this.showMode = showMode;
|
|
const nameList = Object.keys(this.$store.state.map.map || {});
|
|
let list = [];
|
|
nameList.forEach(item => {
|
|
if (item !== 'skinVO') {
|
|
list = [...list, ...this.$store.state.map.map[item]];
|
|
}
|
|
});
|
|
this.$jlmap.updateShowMode(list, showMode);
|
|
},
|
|
setShowStation(stationCode, isTraining) {
|
|
const nameList = Object.keys(this.$store.state.map.map);
|
|
let list = [];
|
|
nameList.forEach(item => {
|
|
if (item !== 'skinVO') {
|
|
list = [...list, ...this.$store.state.map.map[item]];
|
|
}
|
|
});
|
|
this.$jlmap.updateShowStation(list, stationCode);
|
|
!isTraining && this.setCenter(stationCode);
|
|
}
|
|
}
|
|
};
|
|
</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;
|
|
}
|
|
.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>
|