iscs 代码调整
This commit is contained in:
joylink_cuiweidong
parent
d7ac074608
commit
62eb86e5ec
414
src/views/iscs_new/iscsDraw/iscsCanvas.vue
Normal file
414
src/views/iscs_new/iscsDraw/iscsCanvas.vue
Normal file
@ -0,0 +1,414 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- <div>
|
||||
<el-row>
|
||||
<el-input v-model="json" type="textarea" :rows="4" />
|
||||
<el-button @click="doRemove"> 删除 </el-button>
|
||||
<el-button @click="doUnbinding">解绑</el-button>
|
||||
<el-button @click="doSource"> 源数据 </el-button>
|
||||
</el-row>
|
||||
</div> -->
|
||||
<div :id="iscsId" v-loading="loading" :style="{ width: width +'px', height: height +'px',background:'#425a74' }" class="iscs-canvas" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Vue from 'vue';
|
||||
import Iscs from '@/iscs_new/map';
|
||||
// import orders from '@/iscs_new/utils/orders';
|
||||
// import shapeType from '@/iscs_new/constant/shapeType';
|
||||
import { mapGetters } from 'vuex';
|
||||
// import { exitFullscreen } from '@/utils/screen';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
json: '{}',
|
||||
dataZoom: {
|
||||
offsetX: '0',
|
||||
offsetY: '0',
|
||||
scaleRate: '1'
|
||||
},
|
||||
config: {
|
||||
scaleRate: '1',
|
||||
origin: {
|
||||
x: 0,
|
||||
y: 0
|
||||
}
|
||||
},
|
||||
selected: null, // 选择复制元素
|
||||
loading: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('iscs', [
|
||||
'iscs'
|
||||
]),
|
||||
iscsId() {
|
||||
return ['iscs', (Math.random().toFixed(5)) * 100000].join('_');
|
||||
},
|
||||
width() {
|
||||
return document.documentElement.clientWidth;
|
||||
},
|
||||
height() {
|
||||
return document.documentElement.clientHeight;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'$store.state.config.canvasSizeCount': function (val) {
|
||||
this.resize();
|
||||
},
|
||||
'$store.state.socket.equipmentStatus': function (val) {
|
||||
if (val.length) {
|
||||
this.stateMessage(val);
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
this.$iscs.modelBuilder.addEventListener();
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.$iscs.modelBuilder.removeEventListener();
|
||||
this.destroy();
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
document.getElementById(this.iscsId).oncontextmenu = function (e) {
|
||||
return false;
|
||||
};
|
||||
|
||||
this.$iscs = new Iscs({
|
||||
dom: document.getElementById(this.iscsId),
|
||||
draw: true,
|
||||
config: {
|
||||
renderer: 'canvas',
|
||||
width: this.width,
|
||||
height: this.height
|
||||
},
|
||||
options: {
|
||||
scaleRate: 1,
|
||||
offsetX: 0,
|
||||
offsetY: 0
|
||||
}
|
||||
});
|
||||
|
||||
Vue.prototype.$iscs = this.$iscs;
|
||||
this.$iscs.on('viewLoaded', this.onUpdate, this);
|
||||
this.$iscs.on('contextmenu', this.onContextMenu, this);
|
||||
this.$iscs.on('selected', this.onSelected, this);
|
||||
this.$iscs.on('keyboard', this.onKeyboard, this);
|
||||
|
||||
// this.$iscs.setMap([
|
||||
// {
|
||||
// type: 'Device',
|
||||
// name: 'test',
|
||||
// isActive: false,
|
||||
// isFocus: false,
|
||||
// shapeList: [
|
||||
// { name: 'a',
|
||||
// type: 'Rect',
|
||||
// shape: {},
|
||||
// style: {
|
||||
// fill: 'red',
|
||||
// stroke: 'black'
|
||||
// },
|
||||
// stateList: [
|
||||
// { status: 'st1', sightless: false, shape: {}, style:{ fill: 'yellow', stroke: 'black'} },
|
||||
// { status: 'st2', sightless: false, shape: {}, style:{ fill: 'blue', stroke: 'black'} }
|
||||
// ]
|
||||
// },
|
||||
// { name: 'b',
|
||||
// type: 'Circle',
|
||||
// shape: {},
|
||||
// style: {
|
||||
// fill: 'red',
|
||||
// stroke: 'black'
|
||||
// },
|
||||
// stateList: [
|
||||
// { status: 'st1', sightless: false, shape: {}, style:{ fill: 'yellow', stroke: 'black'} },
|
||||
// { status: 'st2', sightless: false, shape: {}, style:{ fill: 'blue', stroke: 'black'} }
|
||||
// ]
|
||||
// }
|
||||
// ],
|
||||
// stateList: [
|
||||
// { status: 's1', frameList: [[{name: 'a', status: 'st1'}, {name: 'b', status: 'st1'}], [{name: 'a', status: 'st2'}]], weight: 2, loop: true, delay: 2000, time: 200, needDefault: true },
|
||||
// { status: 's2', frameList: [[{name: 'a', status: 'st2'}, {name: 'b', status: 'st1'}], [{name: 'a', status: 'st1'}, {name: 'b', status: 'st2'}]], weight: 1, loop: true, delay: 5000, time: 500, needDefault: false }
|
||||
// ]
|
||||
// }
|
||||
// ], {
|
||||
// elementList: [
|
||||
// {
|
||||
// code: '1',
|
||||
// name: 'a',
|
||||
// type: 'Rect',
|
||||
// scale: [1, 1],
|
||||
// position: [0, 0],
|
||||
// rotation: 0,
|
||||
// shape: {
|
||||
// x: 100,
|
||||
// y: 100,
|
||||
// width: 30,
|
||||
// height: 30
|
||||
// },
|
||||
// style: {
|
||||
// fill: 'red',
|
||||
// stroke: 'black'
|
||||
// },
|
||||
// sightless: false,
|
||||
// composeCode: '100'
|
||||
// },
|
||||
// {
|
||||
// code: '2',
|
||||
// name: 'b',
|
||||
// type: 'Circle',
|
||||
// scale: [1, 1],
|
||||
// position: [0, 0],
|
||||
// rotation: 0,
|
||||
// shape: {
|
||||
// cx: 100,
|
||||
// cy: 100,
|
||||
// r: 10
|
||||
// },
|
||||
// style: {
|
||||
// fill: 'red',
|
||||
// stroke: 'black'
|
||||
// },
|
||||
// sightless: false,
|
||||
// composeCode: '100'
|
||||
// },
|
||||
// {
|
||||
// code: '3',
|
||||
// name: 'a',
|
||||
// type: 'Rect',
|
||||
// scale: [1, 1],
|
||||
// position: [0, 0],
|
||||
// rotation: Math.PI / 4,
|
||||
// shape: {
|
||||
// x: 200,
|
||||
// y: 100,
|
||||
// width: 30,
|
||||
// height: 30
|
||||
// },
|
||||
// style: {
|
||||
// fill: 'red',
|
||||
// stroke: 'black'
|
||||
// },
|
||||
// sightless: false,
|
||||
// composeCode: '101'
|
||||
// },
|
||||
// {
|
||||
// code: '4',
|
||||
// name: 'b',
|
||||
// type: 'Circle',
|
||||
// scale: [1, 1],
|
||||
// position: [0, 0],
|
||||
// rotation: 0,
|
||||
// scale: [0.5, 0.5],
|
||||
// shape: {
|
||||
// cx: 200,
|
||||
// cy: 100,
|
||||
// r: 10
|
||||
// },
|
||||
// style: {
|
||||
// fill: 'red',
|
||||
// stroke: 'black'
|
||||
// },
|
||||
// sightless: false,
|
||||
// composeCode: '101'
|
||||
// },
|
||||
// {
|
||||
// code: '5',
|
||||
// name: 'c',
|
||||
// type: 'Droplet',
|
||||
// scale: [0.5, 0.5],
|
||||
// position: [0, 0],
|
||||
// rotation: 0,
|
||||
// shape: {
|
||||
// cx: 300,
|
||||
// cy: 200,
|
||||
// width: 30,
|
||||
// height: 30
|
||||
// },
|
||||
// style: {
|
||||
// fill: 'red',
|
||||
// stroke: 'black'
|
||||
// },
|
||||
// sightless: false,
|
||||
// composeCode: ''
|
||||
// },
|
||||
// {
|
||||
// code: '6',
|
||||
// name: 'd',
|
||||
// type: 'Droplet',
|
||||
// scale: [1, 1],
|
||||
// position: [0, 0],
|
||||
// rotation: Math.PI / 2,
|
||||
// shape: {
|
||||
// cx: 400,
|
||||
// cy: 200,
|
||||
// width: 20,
|
||||
// height: 20
|
||||
// },
|
||||
// style: {
|
||||
// fill: 'red',
|
||||
// stroke: 'black'
|
||||
// },
|
||||
// sightless: false,
|
||||
// composeCode: ''
|
||||
// },
|
||||
// {
|
||||
// code: '7',
|
||||
// name: 'a',
|
||||
// type: 'Rect',
|
||||
// scale: [1, 1],
|
||||
// position: [100, 0],
|
||||
// rotation: Math.PI / 2,
|
||||
// shape: {
|
||||
// x: 100,
|
||||
// y: 100,
|
||||
// width: 30,
|
||||
// height: 60
|
||||
// },
|
||||
// style: {
|
||||
// fill: 'red',
|
||||
// stroke: 'black'
|
||||
// },
|
||||
// sightless: false,
|
||||
// composeCode: ''
|
||||
// }
|
||||
// ],
|
||||
// composeList: [
|
||||
// {
|
||||
// code: '100',
|
||||
// type: 'Device',
|
||||
// elementCodes: ['1', '2'],
|
||||
// scale: [0.5, 0.5],
|
||||
// position: [100, 100],
|
||||
// rotation: Math.PI / 2,
|
||||
// sightless: false,
|
||||
// composeCode: '1000'
|
||||
// },
|
||||
// {
|
||||
// code: '101',
|
||||
// type: 'Device',
|
||||
// elementCodes: ['3', '4'],
|
||||
// scale: [1, 1],
|
||||
// position: [200, 0],
|
||||
// rotation: 0,
|
||||
// sightless: false,
|
||||
// composeCode: '1000'
|
||||
// },
|
||||
// {
|
||||
// code: '1000',
|
||||
// type: 'Device',
|
||||
// scale: [1, 1],
|
||||
// position: [0, 0],
|
||||
// rotation: 0,
|
||||
// elementCodes: ['100', '101'],
|
||||
// sightless: false,
|
||||
// composeCode: ''
|
||||
// }
|
||||
// ]
|
||||
// }, {
|
||||
// panEnable: true,
|
||||
// zoomEnable: true,
|
||||
// keyEnable: true,
|
||||
// draggle: true,
|
||||
// selecting: true,
|
||||
// selectable: true,
|
||||
// reflect: true
|
||||
// });
|
||||
|
||||
window.document.oncontextmenu = function () {
|
||||
return false;
|
||||
};
|
||||
},
|
||||
onUpdate(e) {
|
||||
// this.$iscs.update([
|
||||
// { status: 's1', code: '100', type: 'Device' },
|
||||
// { status: 's2', code: '101', type: 'Device' }
|
||||
// ]);
|
||||
setTimeout(e => {
|
||||
// this.$iscs.update([
|
||||
// { status: 's0', code: '100', type: 'Device' },
|
||||
// { status: 's0', code: '101', type: 'Device' },
|
||||
// ])
|
||||
}, 15000);
|
||||
},
|
||||
// 键盘快捷键事件
|
||||
onKeyboard(hook) {
|
||||
console.log(hook);
|
||||
},
|
||||
// 点击选择事件
|
||||
onSelected(em) {
|
||||
this.selected = em;
|
||||
console.log(em, 'selected');
|
||||
},
|
||||
// 右键点击事件
|
||||
onContextMenu(em) {
|
||||
this.selected = em;
|
||||
console.log(em, 'contextMenu');
|
||||
},
|
||||
resize() {
|
||||
this.$nextTick(() => {
|
||||
this.$iscs && this.$iscs.resize({ width: this.width, height: this.height });
|
||||
});
|
||||
},
|
||||
// back() {
|
||||
// this.group = this.$route.query.group;
|
||||
// this.$store.dispatch('training/over').then(() => {
|
||||
// putJointTrainingSimulationUserNew(this.group).then(() => {
|
||||
// this.$router.replace({ path: `/trainroom`, query: { group: this.group, lineCode:this.$route.query.lineCode } });
|
||||
// exitFullscreen();
|
||||
// });
|
||||
|
||||
// });
|
||||
// },
|
||||
destroy() {
|
||||
if (this.$iscs) {
|
||||
this.$iscs.destroy();
|
||||
this.$iscs = null;
|
||||
Vue.prototype.$iscs = null;
|
||||
}
|
||||
},
|
||||
stateMessage(val) {
|
||||
this.$iscs && this.$iscs.setDeviceStatus(val);
|
||||
}
|
||||
// doRemove() {
|
||||
// if (this.selected) {
|
||||
// this.$iscs.render([
|
||||
// {
|
||||
// model: this.selected.model,
|
||||
// action: { order: orders.DELETE, shapeType: shapeType.Compose }
|
||||
// }
|
||||
// ]);
|
||||
// }
|
||||
// },
|
||||
// doUnbinding() {
|
||||
// if (this.selected) {
|
||||
// this.$iscs.render([
|
||||
// {
|
||||
// model: this.selected.model,
|
||||
// action: { order: orders.UNBINDING, shapeType: shapeType.Compose }
|
||||
// }
|
||||
// ]);
|
||||
// }
|
||||
// },
|
||||
// doSource() {
|
||||
// console.log(this.$iscs.getSource());
|
||||
// this.json = JSON.stringify(this.$iscs.getSource());
|
||||
// }
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
.iscs-button{
|
||||
position: absolute;
|
||||
float: right;
|
||||
right: 20px;
|
||||
bottom: 15px;
|
||||
}
|
||||
.iscs-canvas{
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user