修改代码
This commit is contained in:
ival
parent
50cb5b1ece
commit
27bcdc52a0
@ -46,6 +46,8 @@ class JMap {
|
||||
this.$zr.dom.setAttribute('tabIndex', -1);
|
||||
this.$zr.dom.style.cursor = 'auto';
|
||||
|
||||
console.log(this.$zr, 111);
|
||||
|
||||
// 实例化缩放偏移缩放参数
|
||||
this.$option = new Option({ scaleRate: 1, offsetX: 0, offsetY: 0, ...utils.deepClone(opts.option||{})}, (dataZoom) => { this.$controller.trigger(events.DataZoom, dataZoom); }); // 缩放
|
||||
|
||||
|
||||
80
src/iscs_new/plugins/shapeBuilder/index.js
Normal file
80
src/iscs_new/plugins/shapeBuilder/index.js
Normal file
@ -0,0 +1,80 @@
|
||||
import Vue from 'vue';
|
||||
import shapeTypeSelect from './shapeTypeSelect.vue';
|
||||
|
||||
const GrSelect = Vue.extend(shapeTypeSelect);
|
||||
const toggleVisible = (el, show) => {
|
||||
if (show) {
|
||||
Vue.nextTick(() => {
|
||||
el.instance.visible = true;
|
||||
});
|
||||
} else {
|
||||
el.instance.visible = false;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
class Handle {
|
||||
constructor() {
|
||||
this._shapeType = '';
|
||||
}
|
||||
|
||||
accept({shapeType}) {
|
||||
console.log(111111111111111, 'accept')
|
||||
this._shapeType = shapeType;
|
||||
}
|
||||
|
||||
onSelect(e) {
|
||||
// console.log('onSelect', e)
|
||||
}
|
||||
|
||||
onContextMenu(e) {
|
||||
// console.log('onContextMenu', e)
|
||||
}
|
||||
|
||||
onBuildShape(e) {
|
||||
// console.log('onBuildShape', e)
|
||||
}
|
||||
}
|
||||
|
||||
class ShapeBuilder {
|
||||
constructor(map, handle) {
|
||||
this.map = map;
|
||||
this.handle = handle;
|
||||
this.initUI(map.getZr());
|
||||
}
|
||||
|
||||
initUI(zr) {
|
||||
const el = zr.dom;
|
||||
const grSelect = new GrSelect({
|
||||
el: document.createElement('div'),
|
||||
data () {}
|
||||
});
|
||||
|
||||
el.instance = grSelect;
|
||||
el.dom = grSelect.$el;
|
||||
el.grSelectStyle = {};
|
||||
el.appendChild(el.dom);
|
||||
el.instance.$on('change', e => this.handle.accept(e));
|
||||
this.grSelect = grSelect;
|
||||
}
|
||||
|
||||
addEventListener() {
|
||||
if (this.map) {
|
||||
this.map.on(events.Select, this.handle.onSelect, this.handle);
|
||||
this.map.on(events.ContextMenu, this.handle.onContextMenu, this.handle);
|
||||
this.map.on(events.BuildShape, this.handle.onBuildShape, this.handle);
|
||||
}
|
||||
}
|
||||
|
||||
removeEventListener() {
|
||||
if (this.zr) {
|
||||
this.map.off(events.Select, this.handle.onSelect, this.handle);
|
||||
this.map.off(events.ContextMenu, this.handle.onContextMenu, this.handle);
|
||||
this.map.off(events.BuildShape, this.handle.onBuildShape, this.handle);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default function install(map) {
|
||||
const shapeBuilder = new ShapeBuilder(map, new Handle());
|
||||
}
|
||||
25
src/iscs_new/plugins/shapeBuilder/shapeTypeSelect.vue
Normal file
25
src/iscs_new/plugins/shapeBuilder/shapeTypeSelect.vue
Normal file
@ -0,0 +1,25 @@
|
||||
<template>
|
||||
<div v-show="visible">
|
||||
<div class="loading__container">
|
||||
111111111
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
visible: true,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
console.log('xxxxxxxxxxx');
|
||||
this.$emit('change', {shapeType: 'Rect'});
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@ -1,7 +1,7 @@
|
||||
export default {
|
||||
ADD: '__ADD__',
|
||||
DELETE: '__DEL__',
|
||||
UPDATE: '__UPT__',
|
||||
BINDING: '__BINDING__',
|
||||
UNBINDING: '__UNBINDING__',
|
||||
ADD: '&ADD',
|
||||
DELETE: '&DEL',
|
||||
UPDATE: '&UPT',
|
||||
BINDING: '&BINDING',
|
||||
UNBINDING: '&UNBINDING',
|
||||
}
|
||||
|
||||
@ -39,6 +39,9 @@ import iscsCanvas from './iscsCanvas';
|
||||
// import {allElements} from '@/iscs_new/core/form/allElments';
|
||||
import BuilderFactory from '@/iscs_new/core/form/builderFactory';
|
||||
import DataForm from '../components/dataForm';
|
||||
import orders from '@/iscs_new/utils/orders';
|
||||
import * as utils from '@/iscs_new/utils/utils';
|
||||
import shapeType from '@/iscs_new/constant/shapeType.js';
|
||||
// import { saveIscsElement } from '@/api/iscs';
|
||||
|
||||
export default {
|
||||
@ -116,10 +119,15 @@ export default {
|
||||
let that=this;
|
||||
that.$refs['dataform'+that.enabledTab][0].$refs['form'].validate((valid) => {
|
||||
if (valid) {
|
||||
let formModel=that.$refs['dataform'+that.enabledTab][0].formModel;
|
||||
let newModel=Object.assign({},formModel.base);
|
||||
newModel.style=Object.assign({},formModel.style);
|
||||
newModel.shape=Object.assign({},formModel.shape);
|
||||
let formModel=that.$refs['dataform'+that.enabledTab][0].formModel;
|
||||
let newModel=Object.assign({},formModel.base);
|
||||
newModel.type = that.enabledTab;
|
||||
newModel.code = utils.getUID()
|
||||
newModel.position = [0, 0];
|
||||
newModel.scale = [1, 1];
|
||||
newModel.style=Object.assign({},formModel.style);
|
||||
newModel.shape=Object.assign({},formModel.shape);
|
||||
this.$refs.iscsCanvas.doAction([{model: newModel, action: {shapeType: shapeType.Element, order: orders.ADD}}]);
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
@ -66,10 +66,8 @@ export default {
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
this.$iscs.modelBuilder.addEventListener();
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.$iscs.modelBuilder.removeEventListener();
|
||||
this.destroy();
|
||||
},
|
||||
methods: {
|
||||
@ -93,248 +91,29 @@ export default {
|
||||
}
|
||||
});
|
||||
|
||||
this.$iscs.setMap([], {
|
||||
elementList: [],
|
||||
composeList: []
|
||||
}, {
|
||||
panEnable: true,
|
||||
zoomEnable: true,
|
||||
keyEnable: true,
|
||||
draggle: true,
|
||||
selecting: true,
|
||||
selectable: true,
|
||||
reflect: true
|
||||
});
|
||||
|
||||
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) {
|
||||
@ -355,16 +134,6 @@ export default {
|
||||
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();
|
||||
@ -374,7 +143,11 @@ export default {
|
||||
},
|
||||
stateMessage(val) {
|
||||
this.$iscs && this.$iscs.setDeviceStatus(val);
|
||||
}
|
||||
},
|
||||
doAction(list) {
|
||||
console.log(list, this.$iscs);
|
||||
this.$iscs && this.$iscs.render(list);
|
||||
},
|
||||
// doRemove() {
|
||||
// if (this.selected) {
|
||||
// this.$iscs.render([
|
||||
|
||||
Loading…
Reference in New Issue
Block a user