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:
ival 2019-08-30 19:36:36 +08:00
parent f428bd71f1
commit 923ded894b
1 changed files with 113 additions and 117 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

230
src/views/ibp/index.vue
View File

@ -1,133 +1,129 @@
<template> <template>
<div> <div>
<div :id="ibpId" :style="{ width: '100%', height: '100%' }" class="ibp-canvas"></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> <el-button v-if="showBackButton" class="ibp-button" type="primary" @click="back">返回</el-button>
</div> </div>
</template> </template>
<script> <script>
import Vue from 'vue'; import Vue from 'vue';
import localStore from 'storejs';
import IbpPan from '@/ibp/ibpPan'; import IbpPan from '@/ibp/ibpPan';
import { parser } from '@/ibp/utils/parser'; import { parser } from '@/ibp/utils/parser';
import ibpData from '@/ibp/constant/ibpData' import ibpData from '@/ibp/constant/ibpData';
import { mapGetters } from 'vuex'; import { mapGetters } from 'vuex';
export default { export default {
name: 'Ibp', name: 'Ibp',
components: { 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});
data() { this.$ibp = new IbpPan({
return { dom: document.getElementById(this.ibpId),
width: this.$store.state.config.width, config: {
height: this.$store.state.config.height, renderer: 'canvas',
dataZoom: { width: this.canvasWidth,
offsetX: '0', height: this.canvasHeight
offsetY: '0', },
scaleRate: '1' options: {
}, scaleRate: 1,
config: { offsetX: 0,
scaleRate: '1', offsetY: 0
origin: { },
x: 0, methods: {
y: 0 dataLoaded: this.handleDataLoaded,
} viewLoaded: this.handleViewLoaded,
}, stateLoaded: this.handleStateLoaded
showBackButton: true }
}; });
}, Vue.prototype.$ibp = this.$ibp;
computed: { this.setMap(data);
...mapGetters([ this.$store.dispatch('ibp/setIbpData', ibpData);
'canvasWidth', window.document.oncontextmenu = function () {
'canvasHeight' return false;
]), };
ibpId() { },
const ibpId = ['ibp', (Math.random().toFixed(5)) * 100000].join('_'); setMap(data) {
// this.$store.dispatch('config/setCurrentIbpId', { id: ibpId }); this.$ibp.setMap(data, data);
return ibpId; },
} resetSize() {
}, this.$nextTick(() => {
watch: { this.width = this.$store.state.config.width;
'$store.state.config.canvasSizeCount': function (val) { this.height = this.$store.state.config.height;
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 && this.$ibp.resize({ width: this.width, height: this.height });
this.$ibp = new IbpPan({ });
dom: document.getElementById(this.ibpId), },
config: { back() {
renderer: 'canvas', this.$emit('hideIbp');
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 }); // 点击选择事件
}); onSelected(em) {
}, this.$emit('onSelect', em);
back() { },
this.$emit('hideIbp'); // 右键点击事件
}, onContextMenu(em) {
this.$emit('onMenu', em);
// 点击选择事件 },
onSelected(em) { // 绘图时调用，元素可拖拽
this.$emit('onSelect', em); drawIbpInit() {
}, this.$ibp.drawIbpInit();
// 右键点击事件 this.showBackButton = false;
onContextMenu(em) { }
this.$emit('onMenu', em); }
},
// 绘图时调用，元素可拖拽
drawIbpInit() {
this.$ibp.drawIbpInit();
this.showBackButton = false;
}
}
}; };
</script> </script>
<style rel="stylesheet/scss" lang="scss" scoped> <style rel="stylesheet/scss" lang="scss" scoped>