From 85de91411eb9a30bd48128ab14de0171ffe7201d Mon Sep 17 00:00:00 2001 From: joylink_cuiweidong <364937672@qq.com> Date: Thu, 22 Apr 2021 16:28:57 +0800 Subject: [PATCH] =?UTF-8?q?=E7=8A=B6=E6=80=81=E6=98=BE=E7=A4=BA=20?= =?UTF-8?q?=E4=BB=A3=E7=A0=81=E8=B0=83=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/iscs_new/map.js | 670 +++++++++--------- src/iscs_new/utils/orders.js | 14 +- src/views/iscs_new/iscsDraw/statusList.vue | 38 +- src/views/iscs_new/iscsPreview/index.vue | 172 +++-- src/views/iscs_new/iscsPreview/iscsCanvas.vue | 108 +-- 5 files changed, 539 insertions(+), 463 deletions(-) diff --git a/src/iscs_new/map.js b/src/iscs_new/map.js index 57e45977e..e4a9ab3bf 100644 --- a/src/iscs_new/map.js +++ b/src/iscs_new/map.js @@ -6,7 +6,7 @@ import Eventful from 'zrender/src/mixin/Eventful'; import Painter from './painter'; import Option from './option'; import Controller from './controller'; -import StateHandle from './stateHandle'; +import StateHandle from './stateHandle'; import ShapeFactory from './factory'; import orders from './utils/orders'; import shapeType from './constant/shapeType'; @@ -14,393 +14,399 @@ import shapeType from './constant/shapeType'; const renderer = 'canvas'; const devicePixelRatio = 1; class JMap { - constructor(opts) { - // 内部鼠标事件 - this.events = { - __Pan: '__pan__', - __Zoom: '__zoom__', - __DragStart: '__dragStart__', - __Dragging: '__dragging__', - __DragEnd: '__dragEnd__', - __SelectStart: '__selectStart__', - __Selecting: '__selecting__', - __SelectEnd: '__selectEnd__', - __Selected: '__selected__', - __Keyup: '__keyup__', - __Keydown: '__keydown__' - }; + constructor(opts) { + // 内部鼠标事件 + this.events = { + __Pan: '__pan__', + __Zoom: '__zoom__', + __DragStart: '__dragStart__', + __Dragging: '__dragging__', + __DragEnd: '__dragEnd__', + __SelectStart: '__selectStart__', + __Selecting: '__selecting__', + __SelectEnd: '__selectEnd__', + __Selected: '__selected__', + __Keyup: '__keyup__', + __Keydown: '__keydown__' + }; - // 初始化Map实例 - this.initMapInstance(opts); - } + // 初始化Map实例 + this.initMapInstance(opts); + } - // 初始化属性有鼠标事件 缩放等 - initMapInstance(opts) { - const width = opts.dom.clientWidth; - const height = opts.dom.clientHeight; - const optionHandler = this.setOption.bind(this); + // 初始化属性有鼠标事件 缩放等 + initMapInstance(opts) { + const width = opts.dom.clientWidth; + const height = opts.dom.clientHeight; + const optionHandler = this.setOption.bind(this); - this.draw = opts.draw; - // 实例化zr - this.$zr = zrender.init(opts.dom, { renderer, devicePixelRatio, width, height, ...utils.deepClone(opts.config||{})}); - this.$zr.dom.setAttribute('tabIndex', -1); - this.$zr.dom.style.cursor = 'auto'; + this.draw = opts.draw; + // 实例化zr + this.$zr = zrender.init(opts.dom, { renderer, devicePixelRatio, width, height, ...utils.deepClone(opts.config || {})}); + this.$zr.dom.setAttribute('tabIndex', -1); + this.$zr.dom.style.cursor = 'auto'; - // 实例化缩放偏移缩放参数 - this.$option = new Option({ scaleRate: 1, offsetX: 0, offsetY: 0, ...utils.deepClone(opts.option||{})}, (dataZoom) => { this.$controller.trigger(events.DataZoom, dataZoom); }); // 缩放 + // 实例化缩放偏移缩放参数 + this.$option = new Option({ scaleRate: 1, offsetX: 0, offsetY: 0, ...utils.deepClone(opts.option || {})}, (dataZoom) => { this.$controller.trigger(events.DataZoom, dataZoom); }); // 缩放 - // 实例化绘图模块 - this.$painter = new Painter(this); - this.$painter.updateZrSize({width: this.$zr.getWidth(), height: this.$zr.getHeight()}); - this.$painter.updateTransform(this.$option); + // 实例化绘图模块 + this.$painter = new Painter(this); + this.$painter.updateZrSize({width: this.$zr.getWidth(), height: this.$zr.getHeight()}); + this.$painter.updateTransform(this.$option); - // 实例化事件分发模块 - this.$controller = new Controller(this); - this.$controller.enable(); - this.$controller.on(this.events.__Pan, optionHandler); - this.$controller.on(this.events.__Zoom, optionHandler); + // 实例化事件分发模块 + this.$controller = new Controller(this); + this.$controller.enable(); + this.$controller.on(this.events.__Pan, optionHandler); + this.$controller.on(this.events.__Zoom, optionHandler); - // 名声周期发射器 - this.$eventEmitter = new Eventful({}); + // 名声周期发射器 + this.$eventEmitter = new Eventful({}); - // 数据容器工厂 - this.$shapeFactory = new ShapeFactory(this); + // 数据容器工厂 + this.$shapeFactory = new ShapeFactory(this); - // 状态处理器 - this.$stateHandle = new StateHandle(this); + // 状态处理器 + this.$stateHandle = new StateHandle(this); - this.disable = function() { - this.off(this.events.Pan, optionHandler); - this.off(this.events.Zoom, optionHandler); - }; + this.disable = function() { + this.off(this.events.Pan, optionHandler); + this.off(this.events.Zoom, optionHandler); + }; - // 加载插件 - this.plugins = opts.plugins||[]; - this.plugins.forEach(el => { this.use(el); }); - } + // 加载插件 + this.plugins = opts.plugins || []; + this.plugins.forEach(el => { this.use(el); }); + } - setMap(templates=[], source={}, eventOpts={}) { - // 清楚数据 - this.$shapeFactory.clear(); - this.$painter.clear(); + setMap(templates = [], source = {}, eventOpts = {}) { + // 清楚数据 + this.$shapeFactory.clear(); + this.$painter.clear(); - // 绑定事件 - this.$controller.enable(eventOpts); + // 绑定事件 + this.$controller.enable(eventOpts); - // 更新视图位置 - this.$painter.updateTransform(this.$option); + // 更新视图位置 + this.$painter.updateTransform(this.$option); - // 解析模板 - this.$shapeFactory.parseTemplates(templates) + // 解析模板 + this.$shapeFactory.parseTemplates(templates); - // 数据加载完成 回调 - this.$eventEmitter.trigger(events.DataLoaded); + // 数据加载完成 回调 + this.$eventEmitter.trigger(events.DataLoaded); - // 初次渲染视图 - this.repaint(source); + // 初次渲染视图 + this.repaint(source); - // 设置默认状态 - this.setDefaultState(); + // 设置默认状态 + this.setDefaultState(); - // 视图加载完成 回调 - this.$eventEmitter.trigger(events.ViewLoaded); + // 视图加载完成 回调 + this.$eventEmitter.trigger(events.ViewLoaded); - // 返回视图缩放偏移 - this.$option.notice(this.$option); + // 返回视图缩放偏移 + this.$option.notice(this.$option); - return this; - } + return this; + } - setDefaultState() { - this.$eventEmitter.trigger(events.StateLoaded); - return this; - } + setDefaultState() { + this.$eventEmitter.trigger(events.StateLoaded); + return this; + } - setOption(opts={}) { - this.$option.update(opts.type == this.events.__Zoom? pullBack(this.$zr, this.$option, opts):opts); - this.$painter.updateTransform(this.$option); + setOption(opts = {}) { + this.$option.update(opts.type == this.events.__Zoom ? pullBack(this.$zr, this.$option, opts) : opts); + this.$painter.updateTransform(this.$option); - this.$controller.disable(); - this.$controller.enable(); + this.$controller.disable(); + this.$controller.enable(); - this.$eventEmitter.trigger(events.OptionUpdate); - return this; - } + this.$eventEmitter.trigger(events.OptionUpdate); + return this; + } - setCenter(code) { - const shape = this.$shapeFactory.getShapeByCode(code); - if (shape && shape) { - var rect = utils.createBoundingRect(shape); - var center = utils.calculateDCenter(rect, { width: this.$zr.getWidth(), height: this.$zr.getHeight() }); - this.setOption(center); - } - return this; - } + setCenter(code) { + const shape = this.$shapeFactory.getShapeByCode(code); + if (shape && shape) { + var rect = utils.createBoundingRect(shape); + var center = utils.calculateDCenter(rect, { width: this.$zr.getWidth(), height: this.$zr.getHeight() }); + this.setOption(center); + } + return this; + } - setBackgroundColor(color) { - this.$zr.setBackgroundColor(color); - return this; - } + setBackgroundColor(color) { + this.$zr.setBackgroundColor(color); + return this; + } - setCursorStyle(cursorStyle='auto') { - this.$zr.setCursorStyle(cursorStyle); - return this; - } + setCursorStyle(cursorStyle = 'auto') { + this.$zr.setCursorStyle(cursorStyle); + return this; + } - repaint(source={}) { - this.$shapeFactory.parse(source, shape => { - if (shape) { - this.$painter.add(shape) - } - }); - return this; - } + repaint(source = {}) { + this.$shapeFactory.parse(source, shape => { + if (shape) { + this.$painter.add(shape); + } + }); + return this; + } - render(list=[]) { - list.forEach(({model, action}) => { - let updateModel = this.isDrawing() ? this.$shapeFactory.updateSource(model, action): model; - let curShape = this.$shapeFactory.getShapeByCode(updateModel.code); - let deps = null; - let oldShape = null - let newShape = null; + render(list = []) { + list.forEach(({model, action}) => { + let updateModel = this.isDrawing() ? this.$shapeFactory.updateSource(model, action) : model; + let curShape = this.$shapeFactory.getShapeByCode(updateModel.code); + let deps = null; + let oldShape = null; + let newShape = null; - if (updateModel) { - this.$controller.clear(); - switch(action.order) { - case orders.Binding: - case orders.Add: - newShape = this.$shapeFactory.createShape(updateModel, action.shapeType); - this.$shapeFactory.addShape(newShape) - this.$painter.add(newShape); - break; - case orders.Delete: - deps = curShape.getDepShapes(); - deps.forEach(el => { - updateModel = this.isDrawing() ? this.$shapeFactory.updateSource(el, {...action, shapeType: el.shapeType}): el; - if (updateModel) { - curShape = this.$shapeFactory.getShapeByCode(updateModel.code); - oldShape = this.$shapeFactory.removeShape(curShape); - this.$painter.remove(oldShape); - } - }); - break; - case orders.Update: - oldShape = this.$shapeFactory.removeShape(curShape); - this.$painter.remove(oldShape); - newShape = this.$shapeFactory.createShape(updateModel, action.shapeType); - this.$shapeFactory.addShape(newShape) - this.$painter.add(newShape); - break; - case orders.Unbinding: - oldShape = this.$shapeFactory.removeShape(curShape); - this.$painter.remove(oldShape); - this.$shapeFactory.addShape(oldShape); - this.$painter.add(oldShape); - break; - } - } - }); + if (updateModel) { + this.$controller.clear(); + switch (action.order) { + case orders.Binding: + case orders.Add: + newShape = this.$shapeFactory.createShape(updateModel, action.shapeType); + this.$shapeFactory.addShape(newShape); + this.$painter.add(newShape); + break; + case orders.Delete: + deps = curShape.getDepShapes(); + deps.forEach(el => { + updateModel = this.isDrawing() ? this.$shapeFactory.updateSource(el, {...action, shapeType: el.shapeType}) : el; + if (updateModel) { + curShape = this.$shapeFactory.getShapeByCode(updateModel.code); + oldShape = this.$shapeFactory.removeShape(curShape); + this.$painter.remove(oldShape); + } + }); + break; + case orders.Update: + oldShape = this.$shapeFactory.removeShape(curShape); + this.$painter.remove(oldShape); + newShape = this.$shapeFactory.createShape(updateModel, action.shapeType); + this.$shapeFactory.addShape(newShape); + this.$painter.add(newShape); + break; + case orders.Unbinding: + oldShape = this.$shapeFactory.removeShape(curShape); + this.$painter.remove(oldShape); + this.$shapeFactory.addShape(oldShape); + this.$painter.add(oldShape); + break; + case orders.changeStatus: + debugger; + break; + case orders.ResetStatus: + debugger; + break; + } + } + }); - this.$eventEmitter.trigger(events.ViewUpdate, list); - return this; - } + this.$eventEmitter.trigger(events.ViewUpdate, list); + return this; + } - update(list=[]) { - this.$painter.update(this.$stateHandle.update(this.$shapeFactory, list)); - this.$eventEmitter.trigger(events.StateUpdate, list); - return this; - } + update(list = []) { + this.$painter.update(this.$stateHandle.update(this.$shapeFactory, list)); + this.$eventEmitter.trigger(events.StateUpdate, list); + return this; + } - getEvents() { - return this.events; - } + getEvents() { + return this.events; + } - getZr() { - return this.$zr; - } + getZr() { + return this.$zr; + } - getOption() { - return this.$option; - } + getOption() { + return this.$option; + } - getPainter() { - return this.$painter; - } + getPainter() { + return this.$painter; + } - getController() { - return this.$controller; - } + getController() { + return this.$controller; + } - getStorage() { - return this.$controller.getStorage(); - } + getStorage() { + return this.$controller.getStorage(); + } - getShapeFactory() { - return this.$shapeFactory; - } + getShapeFactory() { + return this.$shapeFactory; + } - getShapeByCode(code) { - return this.$shapeFactory.getShapeByCode(code); - } + getShapeByCode(code) { + return this.$shapeFactory.getShapeByCode(code); + } - getSource() { - return this.$shapeFactory.getSource(); - } + getSource() { + return this.$shapeFactory.getSource(); + } - getMapShape() { - return this.$shapeFactory.getMapShape(); - } + getMapShape() { + return this.$shapeFactory.getMapShape(); + } - getMapTemplate() { - return this.$shapeFactory.getMapTemplate(); - } + getMapTemplate() { + return this.$shapeFactory.getMapTemplate(); + } - resize(opt) { - this.$zr.resize(opt); - this.$painter.updateZrSize(opt); - } + resize(opt) { + this.$zr.resize(opt); + this.$painter.updateZrSize(opt); + } - refresh() { - this.$painter.refresh(); - } + refresh() { + this.$painter.refresh(); + } - isDrawing() { - return this.draw; - } + isDrawing() { + return this.draw; + } - clear() { - this.$shapeFactory.clear(); - this.$controller.clear(); - this.$painter.clear(); - this.$zr.refresh() - } + clear() { + this.$shapeFactory.clear(); + this.$controller.clear(); + this.$painter.clear(); + this.$zr.refresh(); + } - use(el) { - this.plugins.includes(el)||this.plugins.push(el) - el.install(this); - } + use(el) { + this.plugins.includes(el) || this.plugins.push(el); + el.install(this); + } - destroy() { - this.disable(); - this.clear(); - this.$shapeFactory.destroy(); - this.$controller.destroy(); - this.$painter.destroy(); - this.$zr && this.$zr.dispose(); - this.plugins.forEach(el => { - el.uninstall(this); - }) - this.plugins = []; - } + destroy() { + this.disable(); + this.clear(); + this.$shapeFactory.destroy(); + this.$controller.destroy(); + this.$painter.destroy(); + this.$zr && this.$zr.dispose(); + this.plugins.forEach(el => { + el.uninstall(this); + }); + this.plugins = []; + } - on(name, cb, context) { - const idx = Object.values(events).indexOf(name); - if (idx >= 0) { - switch (name) { - case events.DataLoaded: - this.$eventEmitter.on(events.DataLoaded, cb, context); - break; - case events.ViewLoaded: - this.$eventEmitter.on(events.ViewLoaded, cb, context); - break; - case events.StateLoaded: - this.$eventEmitter.on(events.StateLoaded, cb, context); - break; - case events.ViewUpdate: - this.$eventEmitter.on(events.ViewUpdate, cb, context); - break; - case events.StateUpdate: - this.$eventEmitter.on(events.StateUpdate, cb, context); - break; - case events.OptionUpdate: - this.$eventEmitter.on(events.OptionUpdate, cb, context); - break; + on(name, cb, context) { + const idx = Object.values(events).indexOf(name); + if (idx >= 0) { + switch (name) { + case events.DataLoaded: + this.$eventEmitter.on(events.DataLoaded, cb, context); + break; + case events.ViewLoaded: + this.$eventEmitter.on(events.ViewLoaded, cb, context); + break; + case events.StateLoaded: + this.$eventEmitter.on(events.StateLoaded, cb, context); + break; + case events.ViewUpdate: + this.$eventEmitter.on(events.ViewUpdate, cb, context); + break; + case events.StateUpdate: + this.$eventEmitter.on(events.StateUpdate, cb, context); + break; + case events.OptionUpdate: + this.$eventEmitter.on(events.OptionUpdate, cb, context); + break; - case events.Click: - this.$controller.on(events.Click, cb, context); - break; - case events.ContextMenu: - this.$controller.on(events.ContextMenu, cb, context); - break; - case events.Reflect: - this.$controller.on(events.Reflect, _.throttle(cb, 200), context); - break; - case events.DataZoom: - this.$controller.on(events.DataZoom, cb, context); - break; - case events.Keydown: - this.$controller.on(events.Keydown, cb, context); - break; - case events.Keypress: - this.$controller.on(events.Keypress, cb, context); - break; - case events.Keyup: - this.$controller.on(events.Keyup, cb, context); - break; - } - } - } + case events.Click: + this.$controller.on(events.Click, cb, context); + break; + case events.ContextMenu: + this.$controller.on(events.ContextMenu, cb, context); + break; + case events.Reflect: + this.$controller.on(events.Reflect, _.throttle(cb, 200), context); + break; + case events.DataZoom: + this.$controller.on(events.DataZoom, cb, context); + break; + case events.Keydown: + this.$controller.on(events.Keydown, cb, context); + break; + case events.Keypress: + this.$controller.on(events.Keypress, cb, context); + break; + case events.Keyup: + this.$controller.on(events.Keyup, cb, context); + break; + } + } + } - off(name, cb) { - const idx = Object.values(events).indexOf(name); - if (idx >= 0) { - switch (name) { - case events.DataLoaded: - this.$eventEmitter.off(events.DataLoaded, cb, context); - break; - case events.ViewLoaded: - this.$eventEmitter.off(events.ViewLoaded, cb, context); - break; - case events.StateLoaded: - this.$eventEmitter.off(events.StateLoaded, cb, context); - break; - case events.ViewUpdate: - this.$eventEmitter.off(events.ViewUpdate, cb, context); - break; - case events.StateUpdate: - this.$eventEmitter.off(events.StateUpdate, cb, context); - break; - case events.OptionUpdate: - this.$eventEmitter.off(events.OptionUpdate, cb, context); - break; + off(name, cb) { + const idx = Object.values(events).indexOf(name); + if (idx >= 0) { + switch (name) { + case events.DataLoaded: + this.$eventEmitter.off(events.DataLoaded, cb, context); + break; + case events.ViewLoaded: + this.$eventEmitter.off(events.ViewLoaded, cb, context); + break; + case events.StateLoaded: + this.$eventEmitter.off(events.StateLoaded, cb, context); + break; + case events.ViewUpdate: + this.$eventEmitter.off(events.ViewUpdate, cb, context); + break; + case events.StateUpdate: + this.$eventEmitter.off(events.StateUpdate, cb, context); + break; + case events.OptionUpdate: + this.$eventEmitter.off(events.OptionUpdate, cb, context); + break; - case events.Click: - this.$controller.off(events.Click, cb); - break; - case events.ContextMenu: - this.$controller.off(events.ContextMenu, cb); - break; - case events.Reflect: - this.$controller.off(events.Reflect, _.throttle(cb, 200)); - break; - case events.DataZoom: - this.$controller.off(events.DataZoom, cb); - break; - case events.Keydown: - this.$controller.off(events.Keydown, cb); - break; - case events.Keypress: - this.$controller.off(events.Keypress, cb); - break; - case events.Keyup: - this.$controller.off(events.Keyup, cb); - break; - } - } - } + case events.Click: + this.$controller.off(events.Click, cb); + break; + case events.ContextMenu: + this.$controller.off(events.ContextMenu, cb); + break; + case events.Reflect: + this.$controller.off(events.Reflect, _.throttle(cb, 200)); + break; + case events.DataZoom: + this.$controller.off(events.DataZoom, cb); + break; + case events.Keydown: + this.$controller.off(events.Keydown, cb); + break; + case events.Keypress: + this.$controller.off(events.Keypress, cb); + break; + case events.Keyup: + this.$controller.off(events.Keyup, cb); + break; + } + } + } } -function pullBack(zr, option={}, payload={}) { - const zrWidth = zr.getWidth(); - const zrHeight = zr.getHeight(); - const originX = payload.originX || zrWidth / 2; - const originY = payload.originY || zrHeight / 2; - const x = (option.offsetX + originX) / option.scaleRate; - const y = (option.offsetY + originY) / option.scaleRate; - const newScaleRate = option.getScaleRate(payload.scale); - const dx = originX - (x * newScaleRate - option.offsetX); - const dy = originY - (y * newScaleRate - option.offsetY); - return {...payload, dx, dy}; +function pullBack(zr, option = {}, payload = {}) { + const zrWidth = zr.getWidth(); + const zrHeight = zr.getHeight(); + const originX = payload.originX || zrWidth / 2; + const originY = payload.originY || zrHeight / 2; + const x = (option.offsetX + originX) / option.scaleRate; + const y = (option.offsetY + originY) / option.scaleRate; + const newScaleRate = option.getScaleRate(payload.scale); + const dx = originX - (x * newScaleRate - option.offsetX); + const dy = originY - (y * newScaleRate - option.offsetY); + return {...payload, dx, dy}; } export default JMap; diff --git a/src/iscs_new/utils/orders.js b/src/iscs_new/utils/orders.js index 8897e4cbb..f6b3e6003 100644 --- a/src/iscs_new/utils/orders.js +++ b/src/iscs_new/utils/orders.js @@ -1,7 +1,9 @@ export default { - Add: '&Add', - Delete: '&DEL', - Update: '&UPT', - Binding: '&Binding', - Unbinding: '&Unbinding', -} + Add: '&Add', + Delete: '&DEL', + Update: '&UPT', + Binding: '&Binding', + Unbinding: '&Unbinding', + ChangeStatus:'&ChangeStatus', + ResetStatus:'&ResetStatus' +}; diff --git a/src/views/iscs_new/iscsDraw/statusList.vue b/src/views/iscs_new/iscsDraw/statusList.vue index d465c2a8f..a2b8478a7 100644 --- a/src/views/iscs_new/iscsDraw/statusList.vue +++ b/src/views/iscs_new/iscsDraw/statusList.vue @@ -66,7 +66,7 @@ @@ -333,25 +333,25 @@ export default { }); } - }, - previewStatus(index, row) { - // const that = this; - // if(needDefault) - const list = Object.values(row.covertStatusList); - list.forEach(each=>{ - if (each.loop) { - - } else { - const frameList = each.frameList; - frameList.forEach(frame=>{ - // frame.name; - // frame.status; - // this.$iscs. - }); - } - }); - // this.show = false; } + // previewStatus(index, row) { + // // const that = this; + // // if(needDefault) + // const list = Object.values(row.covertStatusList); + // list.forEach(each=>{ + // if (each.loop) { + + // } else { + // const frameList = each.frameList; + // frameList.forEach(frame=>{ + // // frame.name; + // // frame.status; + // // this.$iscs. + // }); + // } + // }); + // // this.show = false; + // } } }; diff --git a/src/views/iscs_new/iscsPreview/index.vue b/src/views/iscs_new/iscsPreview/index.vue index 7a42be306..72e7453cb 100644 --- a/src/views/iscs_new/iscsPreview/index.vue +++ b/src/views/iscs_new/iscsPreview/index.vue @@ -2,22 +2,37 @@
- +
- 状态编辑 + 状态预览 + + 重置状态
- - - - - - + +
+
状态属性:{{ state.status }}
+
状态描述:{{ state.description }}
+
状态权重:{{ state.weight }}
+
状态是否可以初始化:{{ state.needDefault?'是':'否' }}
+ 预览 +
+ + + + + + +
@@ -25,8 +40,10 @@ + diff --git a/src/views/iscs_new/iscsPreview/iscsCanvas.vue b/src/views/iscs_new/iscsPreview/iscsCanvas.vue index 107658edc..23b9bb0c0 100644 --- a/src/views/iscs_new/iscsPreview/iscsCanvas.vue +++ b/src/views/iscs_new/iscsPreview/iscsCanvas.vue @@ -63,7 +63,7 @@ export default { this.destroy(); }, methods: { - // 初始化窗口 + // 初始化窗口 init() { document.getElementById(this.iscsId).oncontextmenu = function (e) { return false; @@ -82,55 +82,55 @@ export default { offsetX: 0, offsetY: 0 }, - plugins: [ - // ShapeBuilder, - // ShapeProperty, - // ShapeContextMenu - ] + plugins: [ + // ShapeBuilder, + // ShapeProperty, + // ShapeContextMenu + ] }); - const option = { - panEnable: true, - zoomEnable: true, - keyEnable: true, - draggle: false, - selecting: false, - selectable: false, - reflect: true - } - if (this.$route.query.id) { - setTimeout(_ => { - Idb.select('composeList', this.$route.query.id).then(resp => { - this.$iscs.setMap([], { - elementList: resp.elementList||[], - composeList: resp.composeList||[] - }, option); - EventBus.$emit('getComposeElemList'); - }).catch(error => { - this.$iscs.setMap([], { - elementList: [], - composeList: [] - }, option); - }) - }, 1000) - } else { - this.$iscs.setMap([], { - elementList: [], - composeList: [] - }, option); - } + const option = { + panEnable: true, + zoomEnable: true, + keyEnable: true, + draggle: false, + selecting: false, + selectable: false, + reflect: true + }; + if (this.$route.query.id) { + setTimeout(_ => { + Idb.select('composeTemplateList', this.$route.query.id).then(resp => { + this.$iscs.setMap([], { + elementList: resp.shapeList || [], + composeList: resp.composeList || [] + }, option); + this.$emit('setData', resp); + }).catch(error => { + this.$iscs.setMap([], { + elementList: [], + composeList: [] + }, option); + }); + }, 1000); + } else { + this.$iscs.setMap([], { + elementList: [], + composeList: [] + }, option); + } Vue.prototype.$iscs = this.$iscs; this.$iscs.on('viewLoaded', this.onViewLoaded, this); this.$iscs.on('contextmenu', this.onContextMenu, this); // this.$iscs.on('click', this.onClick, this); - this.$iscs.on('reflect', this.onReflect, this); + this.$iscs.on('reflect', this.onReflect, this); this.$iscs.on('keyboard', this.onKeyboard, this); window.document.oncontextmenu = function () { return false; }; }, - // 视图加载完成 + // 视图加载完成 onViewLoaded(e) { }, // 键盘快捷键事件 @@ -138,38 +138,38 @@ export default { console.log(hook); }, // 点击选择事件 - onClick(em={}) { - this.$emit('selected', em); + onClick(em = {}) { + this.$emit('selected', em); + }, + onReflect(em = {}) { + this.$emit('selected', this.$iscs.getShapeByCode(em.code)); }, - onReflect(em={}) { - this.$emit('selected', this.$iscs.getShapeByCode(em.code)); - }, // 右键点击事件 - onContextMenu(em={}) { - this.$emit('contextMenu', em.model); + onContextMenu(em = {}) { + this.$emit('contextMenu', em.model); }, - // 执行操作 - doAction(list) { - this.$iscs && this.$iscs.render(list); - }, - // 消息处理 - stateMessage(val) { + // 执行操作 + doAction(list) { + this.$iscs && this.$iscs.render(list); + }, + // 消息处理 + stateMessage(val) { this.$iscs && this.$iscs.setDeviceStatus(val); }, - // 充值窗口大小 + // 充值窗口大小 resize() { this.$nextTick(() => { this.$iscs && this.$iscs.resize({ width: this.width, height: this.height }); }); }, - // 销毁 + // 销毁 destroy() { if (this.$iscs) { this.$iscs.destroy(); this.$iscs = null; Vue.prototype.$iscs = null; } - }, + } } };