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