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

调整代码

Browse Source
This commit is contained in:
zyy 2019-07-25 10:55:31 +08:00
parent 8b46424116
commit cf0cabadaf
1 changed files with 265 additions and 265 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,282 +1,282 @@
<template> <template>
<div class="jlmap-canvas" :style="{ width: width+'px', height: height+28+'px' }"> <div class="jlmap-canvas" :style="{ width: width+'px', height: height+28+'px' }">
<div :id="canvasId" style="background: #000;"></div> <div :id="canvasId" style="background: #000;" />
<progress-bar ref="progressBar" ></progress-bar> <progress-bar ref="progressBar" />
<zoom-box @setShrink="setShrink" @setMagnify="setMagnify" :scaleRate="dataZoom.scaleRate" v-if="!isScreen"></zoom-box> <zoom-box :scale-rate="dataZoom.scaleRate" v-if="!isScreen" @setShrink="setShrink" @setMagnify="setMagnify" />
<div v-if="show" class="zoom-view" :style="{ width: width +'px'}"> <div v-if="show" class="zoom-view" :style="{ width: width +'px'}">
<el-form :model="dataZoom" label-width="60px" size="mini" inline> <el-form :model="dataZoom" label-width="60px" size="mini" inline>
<el-form-item label="偏移:"> <el-form-item label="偏移:">
<el-input v-model="dataZoom.offsetX" :disabled="true"></el-input> <el-input v-model="dataZoom.offsetX" :disabled="true" />
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-input v-model="dataZoom.offsetY" :disabled="true"></el-input> <el-input v-model="dataZoom.offsetY" :disabled="true" />
</el-form-item> </el-form-item>
<el-form-item label="缩放:" style="float: right"> <el-form-item label="缩放:" style="float: right">
<el-input v-model="dataZoom.scaleRate" :disabled="true"></el-input> <el-input v-model="dataZoom.scaleRate" :disabled="true" />
</el-form-item> </el-form-item>
</el-form> </el-form>
</div>
</div> </div>
</div>
</template> </template>
<script> <script>
import Vue from 'vue'; import Vue from 'vue';
import localStore from 'storejs'; import localStore from 'storejs';
import Jlmap from '@/jmap/map'; import Jlmap from '@/jmap/map';
import ZoomBox from './zoom/zoom'; import ZoomBox from './zoom/zoom';
import ProgressBar from '@/views/components/progressBar/index'; import ProgressBar from '@/views/components/progressBar/index';
import { mapGetters } from 'vuex'; // import { mapGetters } from 'vuex';
import { Loading } from 'element-ui'; // import { Loading } from 'element-ui';
export default { export default {
name: 'JlmapVisual', name: 'JlmapVisual',
components: { components: {
ZoomBox, ZoomBox,
ProgressBar ProgressBar
}, },
data() { data() {
return { return {
width: this.$store.state.config.width, width: this.$store.state.config.width,
height: this.$store.state.config.height, height: this.$store.state.config.height,
loading: true, loading: true,
dataZoom: { dataZoom: {
offsetX: '0', offsetX: '0',
offsetY: '0', offsetY: '0',
scaleRate: '1' scaleRate: '1'
}, },
sectionActive: false, sectionActive: false,
operate: null, operate: null
} };
}, },
computed: { computed: {
// ...mapGetters('training', [ // ...mapGetters('training', [
// 'mode', // 'mode',
// 'offsetStationCode' // 'offsetStationCode'
// ]), // ]),
canvasId() { canvasId() {
const canvasId = ['map', (Math.random().toFixed(5)) * 100000].join('_'); const canvasId = ['map', (Math.random().toFixed(5)) * 100000].join('_');
this.$store.dispatch('config/setCurrentCancasId', { id: canvasId }); this.$store.dispatch('config/setCurrentCancasId', { id: canvasId });
return canvasId; return canvasId;
}, },
show() { show() {
// if (this.mode === TrainingMode.EDIT || this.mode === TrainingMode.MAP_EDIT) { // if (this.mode === TrainingMode.EDIT || this.mode === TrainingMode.MAP_EDIT) {
// return true; // return true;
// } // }
// return false; // return false;
return true; return true;
}, },
isScreen() { isScreen() {
return this.$route.params.mode === 'dp' return this.$route.params.mode === 'dp';
} }
}, },
watch: { watch: {
'$store.state.map.map': function (val, old) { '$store.state.map.map': function (val, old) {
if (val && val.skinStyle) { if (val && val.skinStyle) {
try { try {
this.setMap(val); this.setMap(val);
} catch (error) { } catch (error) {
console.log(error); console.log(error);
} }
} }
}, },
'$store.state.training.rezoomCount': function (val, old) { '$store.state.training.rezoomCount': function (val, old) {
this.setShowCenter(this.$store.state.training.offsetStationCode); this.setShowCenter(this.$store.state.training.offsetStationCode);
}, },
'$store.state.config.canvasSizeCount': function (val) { '$store.state.config.canvasSizeCount': function (val) {
this.resetSize(); this.resetSize();
}, },
'$store.state.menuOperation.magnifyCount': function () { '$store.state.menuOperation.magnifyCount': function () {
this.setMagnify(); this.setMagnify();
}, },
'$store.state.menuOperation.shrinkCount': function () { '$store.state.menuOperation.shrinkCount': function () {
this.setShrink(); this.setShrink();
}, },
$route() { $route() {
this.mapViewLoaded(true); this.mapViewLoaded(true);
} }
}, },
created() { created() {
// eventBus.$on('viewLoading', (loading) => { // eventBus.$on('viewLoading', (loading) => {
// this.mapViewLoaded(loading) // this.mapViewLoaded(loading)
// }); // });
// eventBus.$on('viewProgressAt', (percentage) => { // eventBus.$on('viewProgressAt', (percentage) => {
// this.mapViewProgressAt(percentage); // this.mapViewProgressAt(percentage);
// }); // });
// eventBus.$on('refresh', () => { // eventBus.$on('refresh', () => {
// this.refresh(this.$store.state.map.map); // this.refresh(this.$store.state.map.map);
// }) // })
}, },
mounted() { mounted() {
this.initLoadPage(); this.initLoadPage();
}, },
beforeDestroy() { beforeDestroy() {
// eventBus.$off('refresh'); // eventBus.$off('refresh');
// eventBus.$off('viewLoading'); // eventBus.$off('viewLoading');
// eventBus.$off('viewProgressAt'); // eventBus.$off('viewProgressAt');
if (this.$jlmap) { if (this.$jlmap) {
this.$jlmap.dispose(); this.$jlmap.dispose();
} }
}, },
methods: { methods: {
// 初始化jlmap // 初始化jlmap
initLoadPage() { initLoadPage() {
const dom = document.getElementById(this.canvasId).oncontextmenu = function (e) { document.getElementById(this.canvasId).oncontextmenu = function (e) {
return false; return false;
}; };
Vue.prototype.$jlmap = new Jlmap({ Vue.prototype.$jlmap = new Jlmap({
dom: document.getElementById(this.canvasId), dom: document.getElementById(this.canvasId),
config: { config: {
renderer: 'canvas', renderer: 'canvas',
width: this.width, width: this.width,
height: this.height height: this.height
}, },
options: { options: {
scaleRate: 1, scaleRate: 1,
offsetX: 0, offsetX: 0,
offsetY: 0 offsetY: 0
}, },
methods: { methods: {
dataLoaded() { dataLoaded() {
console.log('dataLoaded'); console.log('dataLoaded');
}, },
viewLoaded() { viewLoaded() {
console.log('viewLoaded'); console.log('viewLoaded');
this.mapViewLoaded(true); this.mapViewLoaded(true);
}, },
stateLoaded() { stateLoaded() {
}, },
viewUpdate() { viewUpdate() {
console.log('viewUpdate'); console.log('viewUpdate');
}, },
stateUpdate() { stateUpdate() {
console.log('stateUpdate'); console.log('stateUpdate');
}, },
optionsUpdate() { console.log('optionsUpdate'); } optionsUpdate() { console.log('optionsUpdate'); }
} }
}); });
this.$jlmap.on('datazoom', this.onDataZoom, this); this.$jlmap.on('datazoom', this.onDataZoom, this);
this.$jlmap.on('selected', this.onSelected, this); this.$jlmap.on('selected', this.onSelected, this);
this.$jlmap.on('contextmenu', this.onContextMenu, this); this.$jlmap.on('contextmenu', this.onContextMenu, this);
window.document.oncontextmenu = function () {
return false;
}
},
// 重置jlmap宽高
resetSize() {
this.$nextTick(() => {
this.width = this.$store.state.config.width;
this.height = this.$store.state.config.height;
if (this.$jlmap) { window.document.oncontextmenu = function () {
this.$jlmap.resizeZr({ width: this.width, height: this.height }); return false;
} };
},
// 重置jlmap宽高
resetSize() {
this.$nextTick(() => {
this.width = this.$store.state.config.width;
this.height = this.$store.state.config.height;
this.$store.dispatch('training/updateOffsetStationCode', { offsetStationCode: this.offsetStationCode }); if (this.$jlmap) {
this.$jlmap.resize({ width: this.width, height: this.height });
}
setTimeout(() => { // this.$store.dispatch('training/updateOffsetStationCode', { offsetStationCode: this.offsetStationCode });
this.$store.dispatch('config/resetCanvasOffset');
this.$store.dispatch('training/emitTipFresh');
}, 100);
});
},
// 设置显示图层
setShowLevel(level) {
if (this.$jlmap) {
console.log('设置显示图层');
// this.$jlmap.setShowLevel(level);
}
},
// 设置逻辑视图Level
setShowLogicalLevel(levels) {
if (this.$jlmap) {
console.log('设置逻辑视图Level');
// this.$jlmap.setShowLogicalLevel(levels);
}
},
// 设置物理视图Level
setShowPhysicalLevel(levels) {
if (this.$jlmap) {
onsole.log('设置物理视图Level');
// this.$jlmap.setShowPhysicalLevel(levels);
}
},
// 设置显示中心
setShowCenter(deviceCode) {
if (this.$jlmap) {
this.$jlmap.setCenter(deviceCode);
}
},
// 监听缩放事件
onDataZoom(dataZoom) {
this.dataZoom.offsetX = dataZoom._offsetX.toFixed(1) + '';
this.dataZoom.offsetY = dataZoom._offsetY.toFixed(1) + '';
this.dataZoom.scaleRate = dataZoom._scaleRate + '';
let skinStyle = this.$store.state.map.map.skinStyle; // setTimeout(() => {
if (skinStyle) { // this.$store.dispatch('config/resetCanvasOffset');
let param = { // this.$store.dispatch('training/emitTipFresh');
scaleRate: this.dataZoom.scaleRate, // }, 100);
skinCode: skinStyle, });
offsetY: this.dataZoom.offsetY, },
} // 设置显示图层
setShowLevel(level) {
if (this.$jlmap) {
console.log('设置显示图层');
// this.$jlmap.setShowLevel(level);
}
},
// 设置逻辑视图Level
setShowLogicalLevel(levels) {
if (this.$jlmap) {
console.log('设置逻辑视图Level');
// this.$jlmap.setShowLogicalLevel(levels);
}
},
// 设置物理视图Level
setShowPhysicalLevel(levels) {
if (this.$jlmap) {
console.log('设置物理视图Level');
// this.$jlmap.setShowPhysicalLevel(levels);
}
},
// 设置显示中心
setShowCenter(deviceCode) {
if (this.$jlmap) {
this.$jlmap.setCenter(deviceCode);
}
},
// 监听缩放事件
onDataZoom(dataZoom) {
this.dataZoom.offsetX = dataZoom._offsetX.toFixed(1) + '';
this.dataZoom.offsetY = dataZoom._offsetY.toFixed(1) + '';
this.dataZoom.scaleRate = dataZoom._scaleRate + '';
localStore.set(`scaleRate_${skinStyle}`, JSON.stringify(param)); // 保存缩放倍数 const skinStyle = this.$store.state.map.map.skinStyle;
} if (skinStyle) {
const param = {
scaleRate: this.dataZoom.scaleRate,
skinCode: skinStyle,
offsetY: this.dataZoom.offsetY
};
this.$store.dispatch('map/updateZoom', this.dataZoom); localStore.set(`scaleRate_${skinStyle}`, JSON.stringify(param)); // 保存缩放倍数
this.$store.dispatch('training/emitTipFresh'); }
},
// 点击选择事件 this.$store.dispatch('map/updateZoom', this.dataZoom);
onSelected(em) { this.$store.dispatch('training/emitTipFresh');
this.$emit('onSelect', em); },
}, // 点击选择事件
// 右键点击事件 onSelected(em) {
onContextMenu(em) { this.$emit('onSelect', em);
this.$emit('onMenu', em); },
}, // 右键点击事件
// 设置地图加载状态 onContextMenu(em) {
mapViewLoaded(loading) { this.$emit('onMenu', em);
this.loading = loading; },
if (loading) { // 设置地图加载状态
this.$refs.progressBar.start(); mapViewLoaded(loading) {
} else { this.loading = loading;
this.$refs.progressBar.end(true); if (loading) {
} this.$refs.progressBar.start();
}, } else {
// 设置地图加载进度 this.$refs.progressBar.end(true);
mapViewProgressAt(percentage) { }
this.$nextTick(() => { },
this.$refs.progressBar.progressAt(percentage); // 设置地图加载进度
}); mapViewProgressAt(percentage) {
}, this.$nextTick(() => {
// 设置新的地图数据 this.$refs.progressBar.progressAt(percentage);
setMap(map) { });
this.$jlmap.setMap(map); },
}, // 设置新的地图数据
// 刷新地图数据 setMap(map) {
refresh(map) { this.$jlmap.setMap(map);
}, },
// 新增设备 // 刷新地图数据
addOrUpdateDevices(devices) { refresh(map) {
this.$jlmap.render(devices); },
}, // 新增设备
// 删除设备 addOrUpdateDevices(devices) {
deleteDevices(devices) { this.$jlmap.render(devices);
this.$jlmap.render(devices); },
}, // 删除设备
// 缩小 deleteDevices(devices) {
setShrink() { this.$jlmap.render(devices);
this.$jlmap.setOptions({scale: -1}); },
}, // 缩小
// 放大 setShrink() {
setMagnify() { this.$jlmap.setOptions({scale: -1});
this.$jlmap.setOptions({scale: 1}); },
} // 放大
} setMagnify() {
} this.$jlmap.setOptions({scale: 1});
}
}
};
</script> </script>
<style rel="stylesheet/scss" lang="scss" scoped> <style rel="stylesheet/scss" lang="scss" scoped>
.jlmap-canvas { .jlmap-canvas {