修改代码
This commit is contained in:
ival
parent
f428bd71f1
commit
923ded894b
@ -1,133 +1,129 @@
|
||||
<template>
|
||||
<div>
|
||||
<div :id="ibpId" :style="{ width: '100%', height: '100%' }" class="ibp-canvas"></div>
|
||||
<el-button v-if="showBackButton" class="ibp-button" type="primary" @click="back">返回</el-button>
|
||||
</div>
|
||||
<div>
|
||||
<div :id="ibpId" :style="{ width: '100%', height: '100%' }" class="ibp-canvas" />
|
||||
<el-button v-if="showBackButton" class="ibp-button" type="primary" @click="back">返回</el-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Vue from 'vue';
|
||||
import localStore from 'storejs';
|
||||
import IbpPan from '@/ibp/ibpPan';
|
||||
import { parser } from '@/ibp/utils/parser';
|
||||
import ibpData from '@/ibp/constant/ibpData'
|
||||
import ibpData from '@/ibp/constant/ibpData';
|
||||
import { mapGetters } from 'vuex';
|
||||
|
||||
export default {
|
||||
name: 'Ibp',
|
||||
components: {
|
||||
name: 'Ibp',
|
||||
data() {
|
||||
return {
|
||||
width: this.$store.state.config.width,
|
||||
height: this.$store.state.config.height,
|
||||
dataZoom: {
|
||||
offsetX: '0',
|
||||
offsetY: '0',
|
||||
scaleRate: '1'
|
||||
},
|
||||
config: {
|
||||
scaleRate: '1',
|
||||
origin: {
|
||||
x: 0,
|
||||
y: 0
|
||||
}
|
||||
},
|
||||
showBackButton: true
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'canvasWidth',
|
||||
'canvasHeight'
|
||||
]),
|
||||
ibpId() {
|
||||
const ibpId = ['ibp', (Math.random().toFixed(5)) * 100000].join('_');
|
||||
// this.$store.dispatch('config/setCurrentIbpId', { id: ibpId });
|
||||
return ibpId;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'$store.state.config.canvasSizeCount': function (val) {
|
||||
this.resetSize();
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (this.$ibp) {
|
||||
this.$ibp.dispose();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
resizeHandler() {
|
||||
this._clientWidth = this._clientWidth || document.documentElement.clientWidth;
|
||||
this._clientHeight = this._clientHeight || document.documentElement.clientHeight;
|
||||
const width = this._clientWidth - 521;
|
||||
const height = this._clientHeight - 60;
|
||||
this.$store.dispatch('config/resize', { width: width, height: height });
|
||||
},
|
||||
show: function () {
|
||||
document.getElementById(this.ibpId).oncontextmenu = function (e) {
|
||||
return false;
|
||||
};
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
width: this.$store.state.config.width,
|
||||
height: this.$store.state.config.height,
|
||||
dataZoom: {
|
||||
offsetX: '0',
|
||||
offsetY: '0',
|
||||
scaleRate: '1'
|
||||
},
|
||||
config: {
|
||||
scaleRate: '1',
|
||||
origin: {
|
||||
x: 0,
|
||||
y: 0
|
||||
}
|
||||
},
|
||||
showBackButton: true
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'canvasWidth',
|
||||
'canvasHeight'
|
||||
]),
|
||||
ibpId() {
|
||||
const ibpId = ['ibp', (Math.random().toFixed(5)) * 100000].join('_');
|
||||
// this.$store.dispatch('config/setCurrentIbpId', { id: ibpId });
|
||||
return ibpId;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'$store.state.config.canvasSizeCount': function (val) {
|
||||
this.resetSize();
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (this.$ibp) {
|
||||
this.$ibp.dispose();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
resizeHandler() {
|
||||
this._clientWidth = this._clientWidth || document.documentElement.clientWidth;
|
||||
this._clientHeight = this._clientHeight || document.documentElement.clientHeight;
|
||||
const width = this._clientWidth - 521;
|
||||
const height = this._clientHeight - 60;
|
||||
this.$store.dispatch('config/resize', { width: width, height: height });
|
||||
},
|
||||
show: function () {
|
||||
document.getElementById(this.ibpId).oncontextmenu = function (e) {
|
||||
return false;
|
||||
};
|
||||
const data = parser(ibpData, {width: this.canvasWidth, height: this.canvasHeight});
|
||||
this.$ibp = new IbpPan({
|
||||
dom: document.getElementById(this.ibpId),
|
||||
config: {
|
||||
renderer: 'canvas',
|
||||
width: this.canvasWidth,
|
||||
height: this.canvasHeight
|
||||
},
|
||||
options: {
|
||||
scaleRate: 1,
|
||||
offsetX: 0,
|
||||
offsetY: 0
|
||||
},
|
||||
methods: {
|
||||
dataLoaded: this.handleDataLoaded,
|
||||
viewLoaded: this.handleViewLoaded,
|
||||
stateLoaded: this.handleStateLoaded
|
||||
}
|
||||
});
|
||||
Vue.prototype.$ibp = this.$ibp;
|
||||
this.setMap(data);
|
||||
this.$store.dispatch('ibp/setIbpData', ibpData);
|
||||
window.document.oncontextmenu = function () {
|
||||
return false;
|
||||
};
|
||||
},
|
||||
setMap(data) {
|
||||
this.$ibp.setMap(data, data);
|
||||
},
|
||||
resetSize() {
|
||||
this.$nextTick(() => {
|
||||
this.width = this.$store.state.config.width;
|
||||
this.height = this.$store.state.config.height;
|
||||
|
||||
const data = parser(ibpData,{width: this.canvasWidth, height: this.canvasHeight});
|
||||
this.$ibp = new IbpPan({
|
||||
dom: document.getElementById(this.ibpId),
|
||||
config: {
|
||||
renderer: 'canvas',
|
||||
width: this.canvasWidth,
|
||||
height: this.canvasHeight
|
||||
},
|
||||
options: {
|
||||
scaleRate: 1,
|
||||
offsetX: 0,
|
||||
offsetY: 0
|
||||
},
|
||||
methods: {
|
||||
dataLoaded: this.handleDataLoaded,
|
||||
viewLoaded: this.handleViewLoaded,
|
||||
stateLoaded: this.handleStateLoaded
|
||||
}
|
||||
});
|
||||
Vue.prototype.$ibp = this.$ibp;
|
||||
this.setMap(data);
|
||||
this.$store.dispatch('ibp/setIbpData', ibpData);
|
||||
window.document.oncontextmenu = function () {
|
||||
return false;
|
||||
};
|
||||
},
|
||||
setMap(data) {
|
||||
this.$ibp.setMap(data, data);
|
||||
},
|
||||
resetSize() {
|
||||
this.$nextTick(() => {
|
||||
this.width = this.$store.state.config.width;
|
||||
this.height = this.$store.state.config.height;
|
||||
this.$ibp && this.$ibp.resize({ width: this.width, height: this.height });
|
||||
});
|
||||
},
|
||||
back() {
|
||||
this.$emit('hideIbp');
|
||||
},
|
||||
|
||||
this.$ibp && this.$ibp.resize({ width: this.width, height: this.height });
|
||||
});
|
||||
},
|
||||
back() {
|
||||
this.$emit('hideIbp');
|
||||
},
|
||||
|
||||
// 点击选择事件
|
||||
onSelected(em) {
|
||||
this.$emit('onSelect', em);
|
||||
},
|
||||
// 右键点击事件
|
||||
onContextMenu(em) {
|
||||
this.$emit('onMenu', em);
|
||||
},
|
||||
// 绘图时调用，元素可拖拽
|
||||
drawIbpInit() {
|
||||
this.$ibp.drawIbpInit();
|
||||
this.showBackButton = false;
|
||||
}
|
||||
}
|
||||
// 点击选择事件
|
||||
onSelected(em) {
|
||||
this.$emit('onSelect', em);
|
||||
},
|
||||
// 右键点击事件
|
||||
onContextMenu(em) {
|
||||
this.$emit('onMenu', em);
|
||||
},
|
||||
// 绘图时调用，元素可拖拽
|
||||
drawIbpInit() {
|
||||
this.$ibp.drawIbpInit();
|
||||
this.showBackButton = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user