调整代码
This commit is contained in:
zyy
parent
8b46424116
commit
cf0cabadaf
@ -1,282 +1,282 @@
|
||||
<template>
|
||||
<div class="jlmap-canvas" :style="{ width: width+'px', height: height+28+'px' }">
|
||||
<div :id="canvasId" style="background: #000;"></div>
|
||||
<progress-bar ref="progressBar" ></progress-bar>
|
||||
<zoom-box @setShrink="setShrink" @setMagnify="setMagnify" :scaleRate="dataZoom.scaleRate" v-if="!isScreen"></zoom-box>
|
||||
<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>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-input v-model="dataZoom.offsetY" :disabled="true"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="缩放:" style="float: right">
|
||||
<el-input v-model="dataZoom.scaleRate" :disabled="true"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="jlmap-canvas" :style="{ width: width+'px', height: height+28+'px' }">
|
||||
<div :id="canvasId" style="background: #000;" />
|
||||
<progress-bar ref="progressBar" />
|
||||
<zoom-box :scale-rate="dataZoom.scaleRate" v-if="!isScreen" @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-form-item>
|
||||
<el-form-item>
|
||||
<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-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 { Loading } from 'element-ui';
|
||||
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 { Loading } from 'element-ui';
|
||||
|
||||
export default {
|
||||
name: 'JlmapVisual',
|
||||
components: {
|
||||
ZoomBox,
|
||||
ProgressBar
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
width: this.$store.state.config.width,
|
||||
height: this.$store.state.config.height,
|
||||
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;
|
||||
},
|
||||
show() {
|
||||
// if (this.mode === TrainingMode.EDIT || this.mode === TrainingMode.MAP_EDIT) {
|
||||
// return true;
|
||||
// }
|
||||
// return false;
|
||||
return true;
|
||||
},
|
||||
isScreen() {
|
||||
return this.$route.params.mode === 'dp'
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'$store.state.map.map': function (val, old) {
|
||||
if (val && val.skinStyle) {
|
||||
try {
|
||||
this.setMap(val);
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
},
|
||||
'$store.state.training.rezoomCount': function (val, old) {
|
||||
this.setShowCenter(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');
|
||||
if (this.$jlmap) {
|
||||
this.$jlmap.dispose();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 初始化jlmap
|
||||
initLoadPage() {
|
||||
const dom = document.getElementById(this.canvasId).oncontextmenu = function (e) {
|
||||
return false;
|
||||
};
|
||||
export default {
|
||||
name: 'JlmapVisual',
|
||||
components: {
|
||||
ZoomBox,
|
||||
ProgressBar
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
width: this.$store.state.config.width,
|
||||
height: this.$store.state.config.height,
|
||||
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;
|
||||
},
|
||||
show() {
|
||||
// if (this.mode === TrainingMode.EDIT || this.mode === TrainingMode.MAP_EDIT) {
|
||||
// return true;
|
||||
// }
|
||||
// return false;
|
||||
return true;
|
||||
},
|
||||
isScreen() {
|
||||
return this.$route.params.mode === 'dp';
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'$store.state.map.map': function (val, old) {
|
||||
if (val && val.skinStyle) {
|
||||
try {
|
||||
this.setMap(val);
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
},
|
||||
'$store.state.training.rezoomCount': function (val, old) {
|
||||
this.setShowCenter(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');
|
||||
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() {
|
||||
console.log('dataLoaded');
|
||||
},
|
||||
viewLoaded() {
|
||||
console.log('viewLoaded');
|
||||
this.mapViewLoaded(true);
|
||||
},
|
||||
stateLoaded() {
|
||||
},
|
||||
viewUpdate() {
|
||||
console.log('viewUpdate');
|
||||
},
|
||||
stateUpdate() {
|
||||
console.log('stateUpdate');
|
||||
},
|
||||
optionsUpdate() { console.log('optionsUpdate'); }
|
||||
}
|
||||
});
|
||||
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() {
|
||||
console.log('dataLoaded');
|
||||
},
|
||||
viewLoaded() {
|
||||
console.log('viewLoaded');
|
||||
this.mapViewLoaded(true);
|
||||
},
|
||||
stateLoaded() {
|
||||
},
|
||||
viewUpdate() {
|
||||
console.log('viewUpdate');
|
||||
},
|
||||
stateUpdate() {
|
||||
console.log('stateUpdate');
|
||||
},
|
||||
optionsUpdate() { console.log('optionsUpdate'); }
|
||||
}
|
||||
});
|
||||
|
||||
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.width = this.$store.state.config.width;
|
||||
this.height = this.$store.state.config.height;
|
||||
this.$jlmap.on('datazoom', this.onDataZoom, this);
|
||||
this.$jlmap.on('selected', this.onSelected, this);
|
||||
this.$jlmap.on('contextmenu', this.onContextMenu, this);
|
||||
|
||||
if (this.$jlmap) {
|
||||
this.$jlmap.resizeZr({ width: this.width, height: this.height });
|
||||
}
|
||||
window.document.oncontextmenu = function () {
|
||||
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('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 + '';
|
||||
// this.$store.dispatch('training/updateOffsetStationCode', { offsetStationCode: this.offsetStationCode });
|
||||
|
||||
let skinStyle = this.$store.state.map.map.skinStyle;
|
||||
if (skinStyle) {
|
||||
let param = {
|
||||
scaleRate: this.dataZoom.scaleRate,
|
||||
skinCode: skinStyle,
|
||||
offsetY: this.dataZoom.offsetY,
|
||||
}
|
||||
// setTimeout(() => {
|
||||
// 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) {
|
||||
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);
|
||||
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.start();
|
||||
} else {
|
||||
this.$refs.progressBar.end(true);
|
||||
}
|
||||
},
|
||||
// 设置地图加载进度
|
||||
mapViewProgressAt(percentage) {
|
||||
this.$nextTick(() => {
|
||||
this.$refs.progressBar.progressAt(percentage);
|
||||
});
|
||||
},
|
||||
// 设置新的地图数据
|
||||
setMap(map) {
|
||||
this.$jlmap.setMap(map);
|
||||
},
|
||||
// 刷新地图数据
|
||||
refresh(map) {
|
||||
},
|
||||
// 新增设备
|
||||
addOrUpdateDevices(devices) {
|
||||
this.$jlmap.render(devices);
|
||||
},
|
||||
// 删除设备
|
||||
deleteDevices(devices) {
|
||||
this.$jlmap.render(devices);
|
||||
},
|
||||
// 缩小
|
||||
setShrink() {
|
||||
this.$jlmap.setOptions({scale: -1});
|
||||
},
|
||||
// 放大
|
||||
setMagnify() {
|
||||
this.$jlmap.setOptions({scale: 1});
|
||||
}
|
||||
}
|
||||
}
|
||||
localStore.set(`scaleRate_${skinStyle}`, JSON.stringify(param)); // 保存缩放倍数
|
||||
}
|
||||
|
||||
this.$store.dispatch('map/updateZoom', this.dataZoom);
|
||||
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.start();
|
||||
} else {
|
||||
this.$refs.progressBar.end(true);
|
||||
}
|
||||
},
|
||||
// 设置地图加载进度
|
||||
mapViewProgressAt(percentage) {
|
||||
this.$nextTick(() => {
|
||||
this.$refs.progressBar.progressAt(percentage);
|
||||
});
|
||||
},
|
||||
// 设置新的地图数据
|
||||
setMap(map) {
|
||||
this.$jlmap.setMap(map);
|
||||
},
|
||||
// 刷新地图数据
|
||||
refresh(map) {
|
||||
},
|
||||
// 新增设备
|
||||
addOrUpdateDevices(devices) {
|
||||
this.$jlmap.render(devices);
|
||||
},
|
||||
// 删除设备
|
||||
deleteDevices(devices) {
|
||||
this.$jlmap.render(devices);
|
||||
},
|
||||
// 缩小
|
||||
setShrink() {
|
||||
this.$jlmap.setOptions({scale: -1});
|
||||
},
|
||||
// 放大
|
||||
setMagnify() {
|
||||
this.$jlmap.setOptions({scale: 1});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
.jlmap-canvas {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user