diff --git a/src/iscs_new/map.js b/src/iscs_new/map.js
index 925588ec8..e183d5ca6 100644
--- a/src/iscs_new/map.js
+++ b/src/iscs_new/map.js
@@ -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); }); // 缩放
diff --git a/src/iscs_new/plugins/shapeBuilder/index.js b/src/iscs_new/plugins/shapeBuilder/index.js
new file mode 100644
index 000000000..4a56fcf40
--- /dev/null
+++ b/src/iscs_new/plugins/shapeBuilder/index.js
@@ -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());
+}
diff --git a/src/iscs_new/plugins/shapeBuilder/shapeTypeSelect.vue b/src/iscs_new/plugins/shapeBuilder/shapeTypeSelect.vue
new file mode 100644
index 000000000..b41142909
--- /dev/null
+++ b/src/iscs_new/plugins/shapeBuilder/shapeTypeSelect.vue
@@ -0,0 +1,25 @@
+
+
+
+
+
+
+
diff --git a/src/iscs_new/utils/orders.js b/src/iscs_new/utils/orders.js
index 560498317..e0dee4569 100644
--- a/src/iscs_new/utils/orders.js
+++ b/src/iscs_new/utils/orders.js
@@ -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',
}
diff --git a/src/views/iscs_new/iscsDraw/index.vue b/src/views/iscs_new/iscsDraw/index.vue
index 80f89211b..674e41902 100644
--- a/src/views/iscs_new/iscsDraw/index.vue
+++ b/src/views/iscs_new/iscsDraw/index.vue
@@ -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}}]);
}
});
},
diff --git a/src/views/iscs_new/iscsDraw/iscsCanvas.vue b/src/views/iscs_new/iscsDraw/iscsCanvas.vue
index 376cce795..737f831e3 100644
--- a/src/views/iscs_new/iscsDraw/iscsCanvas.vue
+++ b/src/views/iscs_new/iscsDraw/iscsCanvas.vue
@@ -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([