joylink/rt-sim-training-client
6
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'master' of https://git.qcloud.com/joylink/jl-nclient

Browse Source 
# Conflicts:
#	src/views/jlmap/index.vue
This commit is contained in:
zyy 2019-07-25 13:35:58 +08:00
commit 61564dfdbf
6 changed files with 200 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/jmap/map.js
View File

@ -17,7 +17,7 @@ class Jlmap {
this.methods = opts.methods;
// 鼠标事件
this.events = { Pan: 'pan', Zoom: 'zoom', Selected: 'selected', Contextmenu: 'contextmenu', Datazoom: 'datazoom' };
this.events = { Pan: 'pan', Zoom: 'zoom', Selected: 'selected', Contextmenu: 'contextmenu'};
// 原始数据
this.data = {};
@ -44,12 +44,12 @@ class Jlmap {
this.$zr = zrender.init(opts.dom, Object.assign({ renderer, devicePixelRatio, width, height }, opts.config));
this.$options = new Options(Object.assign({ scaleRate: 1, offsetX: 0, offsetY: 0 }, opts.options || {}), this.events); // 缩放
this.$options = new Options(Object.assign({ scaleRate: 1, offsetX: 0, offsetY: 0 }, opts.options || {})); // 缩放
this.$painter = new Painter(this);
this.$painter.updateZrSize({width: this.$zr.getWidth(), height: this.$zr.getHeight()});
this.$painter.updateTransform(this.$options);
this.optionsHandler = this.setOptions.bind(this);
this.optionsHandler = this.setDataZoom.bind(this);
this.$mouseController = new MouseController(this);
this.$mouseController.enable();
@ -130,7 +130,7 @@ class Jlmap {
return payload || {};
}
setOptions(opts) {
setDataZoom(opts) {
const options = this.pullBack(opts);
this.$options.update(options);
this.$painter.updateTransform(this.$options);
@ -141,7 +141,7 @@ class Jlmap {
this.$mouseController.enable(opts);
}
if (this.methods.optionsUpdate instanceof Function) { this.methods.optionsUpdate(); }
if (this.methods.optionsUpdate instanceof Function) { this.methods.optionsUpdate(this.$options); }
}
setCenter(deviceCode) {
@ -264,7 +264,6 @@ class Jlmap {
resize(opt) {
this.$zr.resize(opt);
// this.$painter.updateZrSize({width: this.$zr.getWidth(), height: this.$zr.getHeight()});
this.$painter.updateZrSize(opt);
}
@ -299,9 +298,9 @@ class Jlmap {
case this.events.Contextmenu:
this.$mouseController.on(this.events.Contextmenu, cb, context);
break;
case this.events.Datazoom:
this.$mouseController.on(this.events.Datazoom, cb, context);
break;
// case this.events.Datazoom:
// this.$mouseController.on(this.events.Datazoom, cb, context);
// break;
}
}
}
@ -316,8 +315,8 @@ class Jlmap {
case this.events.Contextmenu:
this.$mouseController.off(this.events.Contextmenu, cb);
break;
case this.events.Datazoom:
this.$mouseController.off(this.events.Datazoom, cb);
// case this.events.Datazoom:
// this.$mouseController.off(this.events.Datazoom, cb);
}
}
}

4
src/jmap/mouseController.js
View File

@ -154,6 +154,10 @@ class MouseController extends Eventful {
checkEvent(e) {
return new EventModel(e);
}
updateDatazoom(zoom) {
this.trigger(this.events.Datazoom, zoom);
}
}
export default MouseController;

6
src/jmap/options.js
View File

@ -1,5 +1,5 @@
class Options {
constructor(opts, events) {
constructor(opts) {
this.scaleIndex = 0;
this.scaleList = [
0.5, 0.6, 0.7, 0.8, 0.9,
@ -35,8 +35,6 @@ class Options {
this.zoomOnMouseWheel = false;
this.preventDefaultMouseMove = true;
this.events = events;
}
update(payload) {
@ -83,8 +81,6 @@ class Options {
if (payload.zoomOnMouseWheel === true || payload.zoomOnMouseWheel === false) {
this.zoomOnMouseWheel = payload.zoomOnMouseWheel;
}
this.trigger(this.events.Datazoom, this);
}
getScaleRate(scale) {

4
src/store/index.js
View File

@ -7,6 +7,7 @@ import config from './modules/config';
import permission from './modules/permission';
import map from './modules/map';
import training from './modules/training';
import menuOperation from './modules/menuoperation';
import getters from './getters';
Vue.use(Vuex);
@ -19,7 +20,8 @@ const store = new Vuex.Store({
permission,
config,
map,
training
training,
menuOperation
},
getters
});

168
src/store/modules/menuoperation.js Normal file
View File

@ -0,0 +1,168 @@
import { TrainingMode } from '@/scripts/ConstDic';
/**
* 菜单操作状态数据
*/
const menuOperation = {
namespaced: true,
state: {
break: false, // 对话框菜单是否弹出（用于中断控制）
mbmpCount: 0, // 地图按钮菜单位置变更标识
buttonOperation: null, // 按钮菜单是否被按下
selected: {}, // 选中的地图对象
selectedCount: 0, // 选中对象变更标识
menu: null, // 弹出菜单设备
menuPosition: {}, // 弹出菜单位置
menuCount: 0, // 弹出菜单变更标识
menuParam: '', // 弹出菜单参数
magnifyCount: 0, // 地图放大比例标识
shrinkCount: 0 // 地图缩小比例标识
},
getters: {
selected: (state) => {
return state.selected;
},
mbmpCount: (state) => {
return state.mbmpCount;
},
menuParam: (state) => {
return state.menuParam;
},
buttonOperation: (state) => {
return state.buttonOperation;
},
checkDialogIsOpen: (state) => (menu) => {
return state.menu == menu;
}
},
mutations: {
reset: (state) => {
state.menu = null;
state.selected = null;
state.menuPosition = {};
state.buttonOperation = null;
},
doBreak: (state, editStatus) => {
if (!state.break) {
state.break = true;
if (editStatus != TrainingMode.EDIT) {
state.menuCount += 1;
}
}
},
doAccess: (state) => {
if (state.break) {
state.break = false;
state.menuCount += 1;
}
},
setButtonOperation: (state, operation) => {
state.buttonOperation = operation;
},
setSelected: (state, selected) => {
state.selected = selected;
state.selectedCount += 1;
},
mbmpCountIncrement: (state) => {
state.mbmpCount += 1;
},
setMenu: (state, menu) => {
state.menu = menu;
state.menuCount += 1;
},
setMenuParam: (state, param) => {
state.menuParam = param;
},
setMenuPosition: (state, position) => {
state.menuPosition = position;
},
setMenuPositionOffset: (state, offset) => {
if (state.menuPosition) {
state.menuPosition = {
x: state.menuPosition.x + offset.x,
y: state.menuPosition.y + offset.y
};
}
},
setMagnifyCount: (state) => {
state.magnifyCount += 1;
},
setShrinkCount: (state) => {
state.shrinkCount += 1;
}
},
actions: {
/**
* 放大地图
*/
handleMagnifyCount: ({ commit }) => {
commit('setMagnifyCount');
},
/**
* 缩小地图
*/
handleShrinkCount: ({ commit }) => {
commit('setShrinkCount');
},
/** 清除菜单操作*/
reset: ({ commit }) => {
commit('reset');
},
/**
* 处理操作是否中断
*/
handleBreakFlag: ({ commit, rootState }, payLoad) => {
if (rootState.training.mode === TrainingMode.EDIT && rootState.training.started && payLoad && payLoad.break) {
commit('doBreak', rootState.training.mode);
} else {
commit('doAccess');
}
},
/**
* 地图按钮菜单位置改变事件
*/
mbmPositionChange: ({ commit }) => {
commit('mbmpCountIncrement');
},
/**
* 设置按钮菜单按钮
*/
setButtonOperation: ({ commit }, operation) => {
commit('setButtonOperation', operation);
},
/**
* 设置选中model
*/
setSelected: ({ commit }, selected) => {
commit('setSelected', selected);
},
/**
* 设置菜单
*/
setPopMenu: ({ commit }, payLoad) => {
commit('setMenu', payLoad.menu);
commit('setMenuParam', payLoad.param);
commit('setMenuPosition', payLoad.position);
},
/**
* 更新坐标
*/
setMenuPositionOffset: ({ commit }, offset) => {
commit('setMenuPositionOffset', offset);
}
}
};
export default menuOperation;

31
src/views/jlmap/index.vue
View File

@ -1,18 +1,18 @@
<template>
<div class="jlmap-canvas" :style="{ width: width+'px', height: height+28+'px' }">
<div :id="canvasId" style="background: #000;"/>
<progress-bar ref="progressBar"/>
<zoom-box @setShrink="setShrink" :scaleRate="dataZoom.scaleRate" @setMagnify="setMagnify" v-if="!isScreen"/>
<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="偏移:">
<el-input v-model="dataZoom.offsetX" :disabled="true"/>
<el-input v-model="dataZoom.offsetX" :disabled="true" />
</el-form-item>
<el-form-item>
<el-input v-model="dataZoom.offsetY" :disabled="true"/>
<el-input v-model="dataZoom.offsetY" :disabled="true" />
</el-form-item>
<el-form-item label="缩放:" style="float: right">
<el-input v-model="dataZoom.scaleRate" :disabled="true"/>
<el-input v-model="dataZoom.scaleRate" :disabled="true" />
</el-form-item>
</el-form>
</div>
@ -27,7 +27,7 @@ import ZoomBox from './zoom/zoom';
import ProgressBar from '@/views/components/progressBar/index';
import { mapGetters } from 'vuex';
import { TrainingMode } from '@/scripts/ConstDic';
import { Loading } from 'element-ui';
// import { Loading } from 'element-ui';
export default {
name: 'JlmapVisual',
@ -64,7 +64,6 @@ export default {
return true;
}
return false;
return true;
},
isScreen() {
return this.$route.params.mode === 'dp';
@ -124,7 +123,7 @@ export default {
methods: {
// 初始化jlmap
initLoadPage() {
const dom = document.getElementById(this.canvasId).oncontextmenu = function (e) {
document.getElementById(this.canvasId).oncontextmenu = function (e) {
return false;
};
@ -156,11 +155,10 @@ export default {
stateUpdate() {
console.log('stateUpdate');
},
optionsUpdate() { console.log('optionsUpdate'); }
optionsUpdate: this.onDataZoom
}
});
this.$jlmap.on('datazoom', this.onDataZoom, this);
this.$jlmap.on('selected', this.onSelected, this);
this.$jlmap.on('contextmenu', this.onContextMenu, this);
@ -213,9 +211,9 @@ export default {
},
// 监听缩放事件
onDataZoom(dataZoom) {
this.dataZoom.offsetX = dataZoom._offsetX.toFixed(1) + '';
this.dataZoom.offsetY = dataZoom._offsetY.toFixed(1) + '';
this.dataZoom.scaleRate = dataZoom._scaleRate + '';
this.dataZoom.offsetX = dataZoom.offsetX.toFixed(1) + '';
this.dataZoom.offsetY = dataZoom.offsetY.toFixed(1) + '';
this.dataZoom.scaleRate = dataZoom.scaleRate + '';
const skinStyle = this.$store.state.map.map.skinStyle;
if (skinStyle) {
@ -228,7 +226,6 @@ export default {
localStore.set(`scaleRate_${skinStyle}`, JSON.stringify(param)); // 保存缩放倍数
}
this.$store.dispatch('map/updateZoom', this.dataZoom);
this.$store.dispatch('training/emitTipFresh');
},
// 点击选择事件
@ -271,11 +268,11 @@ export default {
},
// 缩小
setShrink() {
this.$jlmap.setOptions({scale: -1});
this.$jlmap.setDataZoom({scale: -1});
},
// 放大
setMagnify() {
this.$jlmap.setOptions({scale: 1});
this.$jlmap.setDataZoom({scale: 1});
}
}
};