From 8c43ac0b0782f1f1c49d5efd911d49e1fe7b94cb Mon Sep 17 00:00:00 2001 From: fan <18706759286@163.com> Date: Mon, 13 Jan 2020 15:25:10 +0800 Subject: [PATCH 01/20] iscs --- src/iscs/iscs.js | 327 ++++++++++++++++++++++++++++ src/iscs/mouseController.js | 285 ++++++++++++++++++++++++ src/iscs/options.js | 100 +++++++++ src/iscs/painter.js | 191 ++++++++++++++++ src/iscs/shape/manualAlarmButton.js | 19 ++ src/iscs/transformHandle.js | 90 ++++++++ 6 files changed, 1012 insertions(+) create mode 100644 src/iscs/iscs.js create mode 100644 src/iscs/mouseController.js create mode 100644 src/iscs/options.js create mode 100644 src/iscs/painter.js create mode 100644 src/iscs/shape/manualAlarmButton.js create mode 100644 src/iscs/transformHandle.js diff --git a/src/iscs/iscs.js b/src/iscs/iscs.js new file mode 100644 index 000000000..c261a47fa --- /dev/null +++ b/src/iscs/iscs.js @@ -0,0 +1,327 @@ +import zrender from 'zrender'; +// import * as zrUtil from 'zrender/src/core/util'; +import localStore from 'storejs'; +import Options from './options'; +import MouseController from './mouseController'; +import Painter from './painter'; +import deviceType from './constant/deviceType'; +import {calculateDCenter, createBoundingRect, deviceFactory} from './utils/parser'; +import { updateIbpData } from './utils/parser'; + +const renderer = 'canvas'; +const devicePixelRatio = 1; + +class IbpPan { + constructor(opts) { + this.methods = opts.methods; + + // 鼠标事件 + this.events = { __Pan: 'pan', Selected: 'selected', Contextmenu: 'contextmenu'}; + + // 设备数据 + this.ibpDevice = {}; + + // 展示的画布大小 + this.canvasSize = {}; + + this.initIbpPage(opts); + } + initIbpPage(opts) { + const width = opts.config.width; + const height = opts.config.height; + this.isAllowDragging = false; + this.$ibpZr = zrender.init(opts.dom, Object.assign({ renderer, devicePixelRatio, width, height }, opts.config)); + this.$options = new Options(Object.assign({ scaleRate: 1, offsetX: 0, offsetY: 0 }, opts.options || {})); // 缩放 + this.$mouseController = new MouseController(this); + + this.$mouseController.enable(); + + this.$painter = new Painter(this); + this.$painter.updateZrSize({width: this.$ibpZr.getWidth(), height: this.$ibpZr.getHeight()}); + this.$painter.updateTransform(this.$options, this.canvasSize); + + this.optionsHandler = this.setOptions.bind(this); + + this.$mouseController.on(this.events.__Pan, this.optionsHandler); + } + + setIbp(config, ibpDevice) { + // 保存平移缩放数据 + if (config.config) { + this.$options.scaleRate = config.scaling; + this.$options.offsetX = config.origin.x; + this.$options.offsetY = config.origin.y; + } + + // 保存原始数据 + this.data = config; + + // 保存需展现的画布大小 + this.canvasSize = { + x: 0, + y: 0, + width: config.background.width, + height: config.background.height + }; + + // 地图数据 + this.ibpDevice = ibpDevice; + + // 数据加载完成 回调 + if (this.methods.dataLoaded instanceof Function) { this.methods.dataLoaded(this.ibpDevice); } + + // 初次渲染视图 + this.$painter.repaint(this.ibpDevice); + + // 视图加载完成 回调 + if (this.methods.viewLoaded instanceof Function) { this.methods.viewLoaded(this.ibpDevice); } + + this.$painter.updateTransform(this.$options, this.canvasSize); + } + + setDefaultState() { + const list = []; + Object.values(this.mapDevice).forEach(elem => { + const type = elem.model._type; + list.push(deviceFactory(type, Object.assign(elem.model, this.defaultStateDict[type]) )); + }); + + this.update(list); + if (this.methods.stateLoaded instanceof Function) { this.methods.stateLoaded(list); } + } + + setOptions(opts) { + const options = this.pullBack(opts); + this.$options.update(options); + this.$painter.updateTransform(this.$options, this.canvasSize); + + if (this.$options.disabled == true) { + this.$mouseController.disable(); + } else { + this.$mouseController.enable(opts); + } + + if (this.methods.optionsUpdate instanceof Function) { this.methods.optionsUpdate(this.$options); } + } + + setCenter(deviceCode) { + const device = this.ibpDevice[deviceCode]; + if (device && device.instance) { + var rect = createBoundingRect(device.instance); + var dcenter = calculateDCenter(rect, { width: this.$ibpZr.getWidth(), height: this.$ibpZr.getHeight() }); + this.setOptions(dcenter); + } + } + + setLevelVisible(list) { + this.$painter.setLevelVisible(list); + } + + render(list) { + (list || []).forEach(elem => { + const code = elem.code; + const type = elem._type; + if (type === deviceType.Background) { + this.canvasSize = { + x: 0, + y: 0, + width: elem.width, + height: elem.height + }; + } + updateIbpData(elem); + const oDevice = this.ibpDevice[code] || deviceFactory(type, elem); + const nDevice = deviceFactory(type, Object.assign(oDevice.model || {}, elem)); + delete this.ibpDevice[code]; + this.$painter.delete(oDevice); + if (!elem._dispose) { + this.ibpDevice[code] = nDevice; + this.$painter.add(nDevice); + } + }); + if (this.methods.viewUpdate instanceof Function) { this.methods.viewUpdate(list); } + } + + // 中间处理 + hookHandle(model, elem) { + const code = elem.code; + const type = elem._type; + // 如果是延时计时，需要保存计数值到全局 + if (type === deviceType.StationCounter) { + let val = '' + elem.val; + if (val === '0' || !elem.val) { + val = elem.val = localStore.get(code) || '0'; + } + + localStore(code, val); + } + for (var prop in elem) { + if (elem[prop] != model[prop]) { + Object.assign(model, elem); + return true; + } + } + + return false; + } + + update(list) { + (list || []).forEach(elem => { + const code = elem.code; + const oDevice = this.ibpDevice[code]; + if (elem.dispose) { + this.$painter.delete(oDevice); + } else { + if (this.hookHandle(oDevice.model, elem)) { + this.$painter.update(oDevice); + } + } + }); + + if (this.methods.stateUpdate instanceof Function) { this.methods.stateUpdate(list); } + } + setStatus(code, model) { + const oDevcie = this.ibpDevice[code].instance; + oDevcie.setStatus(model); + } + setDeviceStatus(list) { + const deviceList = Object.values(this.ibpDevice); + deviceList.forEach(elem =>{ + (list || []).forEach(it =>{ + if (elem.model.linkDevice === it.code) { + elem.instance.setStatus(it); + } + }); + }); + + } + drawIbpInit() { + this.$mouseController.setAllowDragging(true); + } + + pullBack(payload) { + if (payload.type === 'zoom') { + const zrWidth = this.$ibpZr.getWidth(); + const zrHeight = this.$ibpZr.getHeight(); + const originX = payload.originX || zrWidth / 2; + const originY = payload.originY || zrHeight / 2; + const x = (this.$options.offsetX + originX) / this.$options.scaleRate; + const y = (this.$options.offsetY + originY) / this.$options.scaleRate; + const newScaleRate = this.$options.getScaleRate(payload.scale); + const dx = originX - (x * newScaleRate - this.$options.offsetX); + const dy = originY - (y * newScaleRate - this.$options.offsetY); + payload.dx = dx; + payload.dy = dy; + } + + return payload || {}; + } + + getZr() { + return this.$ibpZr; + } + + getEvents() { + return this.events; + } + + getDeviceByCode(code) { + return this.ibpDevice[code]; + } + + resize(opt) { + this.$ibpZr.resize(opt); + this.$painter.updateZrSize(opt); + } + + refresh() { + this.$painter.refresh(); + } + clear() { + this.skinCode = ''; + this.style = {}; + this.ibpDevice = {}; + this.$painter.clear(); + } + initClockTime(initTime) { + Object.values(this.ibpDevice) + .forEach(elem => { + if (elem.model._type === deviceType.Clock) { + this.$painter.initClockTime(elem, initTime); + } + }); + } + setClockStart(started) { + Object.values(this.ibpDevice) + .forEach(elem => { + if (elem.model._type === deviceType.Clock) { + this.$painter.setClockStart(elem, started); + } + }); + } + dispose() { + this.off(this.events.Pan, this.optionsHandler); + this.off(this.events.Zoom, this.optionsHandler); + + this.clear(); + + this.$mouseController.dispose(); + this.$ibpZr && zrender.dispose(this.$ibpZr); + this.$painter.dispose(); + } + + on(eventname, cb, context) { + const idx = Object.values(this.events).indexOf(eventname); + if (idx >= 0) { + switch (eventname) { + case this.events.Selected: + this.$mouseController.on(this.events.Selected, cb, context); + break; + case this.events.Contextmenu: + this.$mouseController.on(this.events.Contextmenu, cb, context); + break; + case this.events.DataZoom: + this.$mouseController.on(this.events.DataZoom, cb, context); + break; + } + } + } + + off(eventname, cb) { + const idx = Object.values(this.events).indexOf(eventname); + if (idx >= 0) { + switch (eventname) { + case this.events.Selected: + this.$mouseController.off(this.events.Selected, cb); + break; + case this.events.Contextmenu: + this.$mouseController.off(this.events.Contextmenu, cb); + break; + case this.events.DataZoom: + this.$mouseController.off(this.events.DataZoom, cb); + break; + } + } + } + + renderCheckBox(model) { + const type = model._type; + const code = model.code; + const oDevice = this.ibpDevice[code] || deviceFactory(type, model); + const nDevice = deviceFactory(type, Object.assign(oDevice.model || {}, model)); + delete this.ibpDevice[code]; + this.$painter.delete(oDevice); + if (!model._dispose) { + this.ibpDevice[code] = nDevice; + this.$painter.add(nDevice); + } + } + deleteCheckBox(code) { + const oDevice = this.ibpDevice[code]; + if (oDevice) { + delete this.ibpDevice[code]; + this.$painter.delete(oDevice); + } + } +} +export default IbpPan; diff --git a/src/iscs/mouseController.js b/src/iscs/mouseController.js new file mode 100644 index 000000000..24b63cd21 --- /dev/null +++ b/src/iscs/mouseController.js @@ -0,0 +1,285 @@ +import deviceType from './constant/deviceType'; +import Eventful from 'zrender/src/mixin/Eventful'; +import * as eventTool from 'zrender/src/core/event'; +import store from '@/store'; + +class EventModel { + constructor(e) { + this.clientX = e.event.clientX; + this.clientY = e.event.clientY; + + let view = e.target; + while (view) { + if (Object.values(deviceType).includes(view._type)) { + this.deviceCode = view._code; + this.deviceType = view._type; + this.deviceModel = view.model; + this.eventTarget = view; + break; + } + view = view.parent; + } + } +} + +class MouseController extends Eventful { + constructor(ibp) { + super(); + this.$ibp = ibp; + this.$zr = ibp.getZr(); + this.isAllowDragging = ibp.isAllowDragging || false; // 是否在绘图中，仅绘图状态下可拖拽 + this.events = ibp.getEvents(); + this._dragging = false; // 是否在拖拽状态 + this.deviceList = []; + this.rightClickPoint = { + x: 0, + y: 0 + }; // 右键点击坐标 + this.initHandler(this.$zr); + } + + initHandler(zr) { + if (zr) { + zr.on('contextmenu', this.contextmenu, this); + zr.on('mousemove', this.moveEvent, this); + zr.on('click', this.click, this); + + this.enable = function (opts) { + opts = opts || {}; + this._moveOnMouseMove = opts.moveOnMouseMove || true; + this._preventDefaultMouseMove = opts.preventDefaultMouseMove || true; + + this.disable(); + + zr.on('mousedown', this.mousedown, this); + zr.on('mousemove', this.mousemove, this); + zr.on('mouseup', this.mouseup, this); + zr.on('touchstart', this.mousedown, this); + zr.on('touchmove', this.mousemove, this); + zr.on('touchend', this.mouseup, this); + }; + + this.disable = function () { + zr.off('mousedown', this.mousedown); + zr.off('mousemove', this.mousemove); + zr.off('mouseup', this.mouseup); + zr.off('touchstart', this.mousedown); + zr.off('touchmove', this.mousemove); + zr.off('touchend', this.mouseup); + }; + + this.dispose = function () { + zr.off('click', this.click); + zr.off('contextmenu', this.contextmenu); + zr.off('mousemove', this.moveEvent); + this.disable(); + }; + + this.isDragging = function () { return this._dragging; }; + } + } + + setAllowDragging(data) { + this.isAllowDragging = data; + } + + mousedown(e) { + e.event.preventDefault(); + e.event.stopPropagation(); + const em = new EventModel(e); + this.eventTarget = em.eventTarget; + this._offsetX = e.offsetX; + this._offsetY = e.offsetY; + this._x = e.offsetX; + this._y = e.offsetY; + this._dragging = true; + if (e.which === 3) { + this.handleMouseDownRight(e); + } else if (e.which === 1) { + this.handleMouseDownLeft(e); + } else if (e.which === 2) { + this.handleMouseDownWheel(e); + } + } + + mousemove(e) { + const oldX = this._x; + const oldY = this._y; + + const dx = e.offsetX - oldX; + const dy = e.offsetY - oldY; + + this._x = e.offsetX; + this._y = e.offsetY; + if (e.which === 3) { + this.handleMouseMoveRight({x: e.offsetX, y: e.offsetY}); + } else if (e.which === 1) { + this.handleMouseMoveLeft(e, dx, dy, oldX, oldY); + } + } + + mouseup(e) { + if (eventTool.notLeftMouse(e) || !this.eventTarget ) { + return; + } + if (this.deviceList.length) { + this.deviceList.forEach(item => { + item.setModel(e.offsetX - this._offsetX, e.offsetY - this._offsetY); + }); + this.deviceList = []; + this.$ibp.deleteCheckBox('check_box'); + this.eventTarget = ''; + this._dragging = false; + this.deviceList = []; + return; + } + if (this.isAllowDragging) { + this.eventTarget.setModel(e.offsetX - this._offsetX, e.offsetY - this._offsetY); + this.eventTarget.dirty(); + } + if (this.eventTarget._type === deviceType.Background) { + this.eventTarget.setCursor('default'); + } + this.eventTarget = ''; + this._dragging = false; + this.deviceList = []; + } + + contextmenu(e) { + var em = this.checkEvent(e); + this.trigger(this.events.Contextmenu, em); + } + click(e) { + var em = this.checkEvent(e); + this.trigger(this.events.Selected, em); + } + moveEvent(e) { + const newEm = new EventModel(e); + const trainDetails = store.state.map.trainDetails; + if (trainDetails) { + if (newEm.deviceType != deviceType.Train || trainDetails.code != newEm.deviceCode) { + var instance = (this.$ibp.getDeviceByCode(trainDetails.code) || {} ).instance; + instance && instance.removeTrainDetail && instance.removeTrainDetail(); + } + } + } + + checkEvent(e) { + var oldEm = new EventModel(this.$zr.curEvent || { event: {} }); + var newEm = new EventModel(e); + if ([1, 3].includes(e.which)) { + // 查找之前和当前鼠标选中的实例 + var oldDevice = this.$ibp.getDeviceByCode(oldEm.deviceCode) || {}; + var newDevice = this.$ibp.getDeviceByCode(newEm.deviceCode) || {}; + var oldInstance = (this.$ibp.getDeviceByCode(oldEm.deviceCode) || {}).instance || {}; + var newInstance = (this.$ibp.getDeviceByCode(newEm.deviceCode) || {}).instance || {}; + + // 如果之前和当前选中的实例不一致 + if (oldInstance != newInstance) { + // 如果实例有取消选择函数并且被点击，则执行取消选中函数 + if (oldInstance.mouseEvent && oldInstance.mouseEvent.mouseout) { + // 视图数据设置点击标志，同步执行 + oldDevice['down'] = false; + oldInstance.mouseEvent['mouseout'](e); + } + + // 如果实例有选中函数并且被点击，则执行选中函数 + if (e.which == 3 && newInstance.mouseEvent && newInstance.mouseEvent.mouseover) { + newDevice['down'] = true; + newInstance.mouseEvent['mouseover'](e); + } + } + + // 保存当前实例到全局 + this.$zr.curEvent = e; + } + + return newEm; + } + /** 处理鼠标右键按下事件 */ + handleMouseDownRight(e) { + this.rightClickPoint.x = e.offsetX; + this.rightClickPoint.y = e.offsetY; + } + /** 处理鼠标左键按下事件 */ + handleMouseDownLeft(e) { + if (this.eventTarget && this.eventTarget._type === deviceType.Background) { + this.eventTarget.setCursor('pointer'); + this.$ibp.deleteCheckBox('check_box'); + } else if (this.eventTarget && this.eventTarget._type === deviceType.CheckBox) { + this.handleBoundingRect(this.eventTarget); + } else { + this.$ibp.deleteCheckBox('check_box'); + } + } + /** 处理滚轮按下事件 */ + handleMouseDownWheel(e) { + this.deviceList = []; + Object.values(this.$ibp.ibpDevice).forEach(item => { + if (item.instance._type !== deviceType.Background) { + this.deviceList.push(item.instance); + } + }); + } + /** 处理右键拖动事件--- 改变选中区域大小 */ + handleMouseMoveRight(point2) { + const point1 = this.rightClickPoint; + const x = Math.min(point1.x, point2.x) + this.$ibp.$options.offsetX; + const y = Math.min(point1.y, point2.y) + this.$ibp.$options.offsetY; + const width = Math.abs(point1.x - point2.x); + const height = Math.abs(point1.y - point2.y); + this.$ibp.renderCheckBox({code: 'check_box', _type: 'CheckBox', point: {x: x, y: y}, width: width, height: height }); + } + /** 处理左键拖动事件--- 图形移动 */ + handleMouseMoveLeft(e, dx, dy, oldX, oldY) { + if (!this._moveOnMouseMove || !this._dragging || !this.isAllowDragging) { + return; + } + // 选中区域图形移动 + if (this.deviceList.length) { + this.deviceList.forEach(item => { + item.grouper.drift(dx, dy, e); + }); + } else if (this._dragging && this.eventTarget) { // 选中元素图形移动 + if (( this.eventTarget._type === deviceType.Background) || !this.isAllowDragging) { + this._preventDefaultMouseMove && eventTool.stop(e.event); + this.trigger(this.events.__Pan, { dx, dy, oldX, oldY, newX: this._x, newY: this._y }); + } else if (this.isAllowDragging) { + this.eventTarget.grouper.drift(dx, dy, e); + } + } + } + /** 通过包围盒筛选选中区域的元素 */ + handleBoundingRect(eventTarget) { + this.deviceList = []; + let boundingRect = eventTarget.grouper.getBoundingRect(); + boundingRect = this.createFakeBoundingRect(eventTarget, boundingRect); + const deviceList = Object.values(this.$ibp.ibpDevice); + const includeDeviceList = []; + deviceList.forEach( item =>{ + if (item.instance._type !== deviceType.Background) { + let deviceBoundingRect = item.instance.grouper.getBoundingRect(); + deviceBoundingRect = this.createFakeBoundingRect(item.instance, deviceBoundingRect); + if (this.whetherInclude(boundingRect, deviceBoundingRect )) { + includeDeviceList.push(item.instance); + } + } + }); + this.deviceList = includeDeviceList; + } + /** 创建假包围盒对象 */ + createFakeBoundingRect(instance, boundingRect) { + return { + x1: instance.model.point.x + boundingRect.x, + y1: instance.model.point.y + boundingRect.y, + x2: instance.model.point.x + boundingRect.width, + y2: instance.model.point.y + boundingRect.height + }; + } + /** 判断元素包围盒是否在选中区域 */ + whetherInclude(boundingRect1, boundingRect2) { + return boundingRect1.x1 <= boundingRect2.x1 && boundingRect1.y1 <= boundingRect2.y1 && boundingRect1.x2 >= boundingRect2.x2 && boundingRect1.y2 >= boundingRect2.y2; + } +} + +export default MouseController; diff --git a/src/iscs/options.js b/src/iscs/options.js new file mode 100644 index 000000000..77ba4576e --- /dev/null +++ b/src/iscs/options.js @@ -0,0 +1,100 @@ +class Options { + constructor(opts, trigger) { + this.scaleIndex = 0; + this.scaleList = [ + 0.5, 0.6, 0.7, 0.8, 0.9, + 1, 1.2, 1.4, 1.6, 1.8, + 2, 2.2, 2.4, 2.6, 2.8, + 3, 3.2, 3.4, 3.6, 3.8, + 4, 4.2, 4.4, 4.6, 4.8, + 5, 5.2, 5.4, 5.6, 5.8, + 6, 6.2, 6.4, 6.6, 6.8, + 7, 7.2, 7.4, 7.6, 7.8, + 8, 8.2, 8.4, 8.6, 8.8 + ]; + + if (Number.isFinite(opts.scaleRate)) { + const idx = this.scaleList.indexOf(opts.scaleRate); + if (idx >= 0) { + this.scaleIndex = idx; + } + } + + this.scaleRate = opts.scaleRate || this.scaleList[this.scaleIndex]; // 缩放比例 + + this.offsetX = opts.offsetX || 0; // x偏移 + + this.offsetY = opts.offsetY || 0; // y偏移 + + this.throttle = opts.throttle || 100; // 刷新频率 + + this.disabled = false; + + this.moveOnMouseMove = true; + + this.zoomOnMouseWheel = false; + + this.preventDefaultMouseMove = true; + + this.trigger = trigger; + } + + update(payload) { + if (Number.isFinite(payload.dx)) { + this.offsetX -= payload.dx; + } + if (Number.isFinite(payload.dy)) { + this.offsetY -= payload.dy; + } + + if (Number.isFinite(payload.offsetX)) { + this.offsetX = payload.offsetX; + } + if (Number.isFinite(payload.offsetY)) { + this.offsetY = payload.offsetY; + } + + if (Number.isFinite(payload.scale)) { + if (Number.isFinite(payload.scale)) { + if ((this.scaleIndex + payload.scale) >= 0 && (this.scaleIndex + payload.scale) < this.scaleList.length) { + this.scaleIndex = this.scaleIndex + payload.scale; + } + } + this.scaleRate = this.scaleList[this.scaleIndex]; + } + + if (Number.isFinite(payload.scaleRate)) { + const idx = this.scaleList.indexOf(payload.scaleRate); + if (idx < 0) { + return; + } + this.scaleIndex = idx; + this.scaleRate = payload.scaleRate; + } + + if (payload.disabled === true || payload.disabled === false) { + this.disabled = payload.disabled; + } + + if (payload.moveOnMouseMove === true || payload.moveOnMouseMove === false) { + this.moveOnMouseMove = payload.moveOnMouseMove; + } + + if (payload.zoomOnMouseWheel === true || payload.zoomOnMouseWheel === false) { + this.zoomOnMouseWheel = payload.zoomOnMouseWheel; + } + + if (this.trigger instanceof Function) { this.trigger(this); } + } + + getScaleRate(scale) { + if (Number.isFinite(scale)) { + if ((this.scaleIndex + scale) >= 0 && (this.scaleIndex + scale) < this.scaleList.length) { + return this.scaleList[this.scaleIndex + scale]; + } + } + return this.scaleList[this.scaleIndex]; + } +} + +export default Options; diff --git a/src/iscs/painter.js b/src/iscs/painter.js new file mode 100644 index 000000000..fba800833 --- /dev/null +++ b/src/iscs/painter.js @@ -0,0 +1,191 @@ +import * as zrUtil from 'zrender/src/core/util'; +import * as vector from 'zrender/src/core/vector'; +import Group from 'zrender/src/container/Group'; +import deviceType from './constant/deviceType'; +import shapefactory from './shape/factory'; +import TransformHandle from './transformHandle'; + +class Painter { + constructor(ibp) { + // 父级实例 + this.$ibp = ibp; + this.$ibpZr = ibp.getZr(); + + // 图层数据 + this.ibpInstanceLevel = {}; + + // 初始图层 + this.initLevels(); + + // 视图控制器 + this.$transformHandle = new TransformHandle(this); + } + + /** + * 初始绘图实例 + * @param {*} dom + * @param {*} config + */ + initLevels() { + + // 添加父级图层 + this.parentLevel = new Group({ name: '__parent__' }); + this.$ibpZr.add(this.parentLevel); + + // 添加子级图层 + zrUtil.each(Object.values(deviceType), (type) => { + const level = new Group({ name: `__${type}__` }); + this.ibpInstanceLevel[type] = level; + this.parentLevel.add(level); + }); + } + + /** + * 重绘视图 + * @param {*} ibpDevice + */ + repaint(ibpDevice) { + // 清空视图 + this.clear(); + + // 创建视图 + Object.values(ibpDevice).forEach(device => { + this.add(device); + }); + } + + /** + * 添加视图 + * @param {*} device + */ + add(device) { + try { + device = Object.assign(device, { event: this.$ibp.$mouseController }); + const instance = shapefactory(device, this.$ibp); + if (instance) { + device.instance = instance; + this.$transformHandle.transformView(instance); + this.ibpInstanceLevel[device.model._type].add(instance); + } + } catch (error) { + console.error(error); + } + } + + /** + * 删除视图 + * @param {*} device + */ + delete(device) { + const instance = device.instance; + if (instance) { + this.ibpInstanceLevel[device.model._type].remove(instance); + } + } + + /** + * 更新视图 + * @param {*} device + */ + update(device) { + if (device) { + if (device.model._dispose) { + this.delete(device); + } else { + const instance = device.instance; + if (instance) { + instance.setState(device); + } + } + } + } + + /** + * 更新transform变化 + * @param {*} opt + */ + updateTransform(opt, canvasSize) { + this.$transformHandle.updateTransform(opt, canvasSize); + } + + /** + * 更新zrender尺寸 + * @param {*} opt + */ + updateZrSize(opt) { + this.$transformHandle.updateZrSize(opt); + } + + /** + * 初始化电子时钟时间 + */ + initClockTime(device, initTime) { + device.instance.setClockTime(initTime); + } + /** + * 电子时钟开始跑秒或暂停 + */ + setClockStart(device, started) { + device.instance.setClockStart(started); + } + /** + * 设置图层可见 + * @param {*} code + */ + setLevelVisible(list) { + zrUtil.each(Object.values(deviceType), type => { + const level = this.ibpInstanceLevel[type]; + if (list.includes(type)) { + level.show(); + } else { + level.hide(); + } + }, this); + } + + /** + * 刷新图层 + */ + refresh() { + this.$ibpZr.refresh(); + } + + /** + * 清除图层 + */ + clearLevel(type) { + const level = this.ibpInstanceLevel[type]; + if (level) { + level.removeAll(); + } + } + + /** + * 清除canvas + */ + clear() { + zrUtil.each(Object.values(this.ibpInstanceLevel), (level) => { + level && level.removeAll(); + }, this); + + this.refresh(); + } + + /** + * 销毁图层 + */ + dispose() { + this.ibpInstanceLevel = {}; + this.parentLevel = null; + } + + /** + * 父级图层 + */ + getParentLevel() { + return this.parentLevel; + } + +} + +export default Painter; diff --git a/src/iscs/shape/manualAlarmButton.js b/src/iscs/shape/manualAlarmButton.js new file mode 100644 index 000000000..108263407 --- /dev/null +++ b/src/iscs/shape/manualAlarmButton.js @@ -0,0 +1,19 @@ +import Group from 'zrender/src/container/Group'; +import Rect from 'zrender/src/graphic/shape/Rect'; +import Circle from 'zrender/src/graphic/shape/Circle'; +import Text from 'zrender/src/graphic/Text'; + +export default class manualAlarmButton extends Group() { + constructor(device) { + super(); + this.model = device.model; + this._type = device.model._type; + this._code = device.model.code; + this.zlevel = device.model.zlevel; + this.z = device.model.zlevel; + this.create(); + } + cerate() { + + } +} diff --git a/src/iscs/transformHandle.js b/src/iscs/transformHandle.js new file mode 100644 index 000000000..3ff3ab22a --- /dev/null +++ b/src/iscs/transformHandle.js @@ -0,0 +1,90 @@ +import deviceType from './constant/deviceType'; +import {createTransform, createBoundingRect} from './utils/parser'; + +class TransformHandle { + constructor(painter) { + this.$painter = painter; + + this.parentLevel = painter.getParentLevel(); + + this.rect = { x: 0, y: 0, width: 0, height: 0 }; + + this.transform = createTransform({ scaleRate: 1, offsetX: 0, offsetY: 0 }); + } + + checkVisible(view) { + return createBoundingRect(view).intersect(this.rect); + } + + revisibleView(view) { + if (this.checkVisible(view) || view._type === deviceType.Background) { + view.show(); + } else { + view.hide(); + } + + view.dirty(); + } + + // 视图进行缩放/平移 + transformView(view) { + if (view) { + view.transform = this.transform; + view.decomposeTransform(); + this.revisibleView(view); + view.transform = ''; + } + } + + // 处理所有视图缩放/平移 + transformAll() { + this.traverse(this.transformView, this); + } + + // 重新计算显示图形 + revisibleAll() { + this.traverse(this.revisibleView, this); + } + + // 更新偏移量 + updateTransform(opts, canvasSize) { + if (canvasSize) { + const elRect = this.parentLevel.getBoundingRect(); + const zrRect = this.rect; + if (canvasSize.x - opts.offsetX > 0) { + opts.offsetX = -elRect.x; + } + + if (canvasSize.y - opts.offsetY > 0) { + opts.offsetY = -elRect.y; + } + + if (elRect.x + canvasSize.width < zrRect.width) { + opts.offsetX -= zrRect.width - (elRect.x + canvasSize.width); + } + + if (elRect.y + canvasSize.height < zrRect.height) { + opts.offsetY -= zrRect.height - (elRect.y + canvasSize.height); + } + } + this.transform = createTransform(opts); + this.transformAll(); + } + + // 更新画布尺寸 + updateZrSize(opts) { + this.rect = { x: 0, y: 0, width: opts.width, height: opts.height }; + this.revisibleAll(); + } + + // 遍历group执行回调 + traverse(cb, context) { + this.parentLevel.eachChild(level => { + level.eachChild((view) => { + cb.call(context, view); + }, context); + }, context); + } +} + +export default TransformHandle; From 365f36edef70cad93f0425814ed515202283f944 Mon Sep 17 00:00:00 2001 From: fan <18706759286@163.com> Date: Tue, 14 Jan 2020 09:06:03 +0800 Subject: [PATCH 02/20] =?UTF-8?q?iscs=20=E7=BB=98=E5=9B=BE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/i18n/langs/en/router.js | 3 +- src/i18n/langs/zh/router.js | 3 +- src/iscs/constant/deviceRender.js | 5 + src/iscs/constant/deviceType.js | 17 ++ src/iscs/iscs.js | 123 ++++----- src/iscs/mouseController.js | 36 +-- src/iscs/painter.js | 48 ++-- src/iscs/shape/factory.js | 12 + src/iscs/shape/fireHydrantAlarmButton.js | 34 +++ src/iscs/shape/manualAlarmButton.js | 61 ++++- src/iscs/utils/parser.js | 147 +++++++++++ src/router/index.js | 8 + src/store/modules/iscs.js | 79 ++++++ src/views/iscsSystem/index.vue | 247 ++++++++++++++++++ src/views/system/iscsDraw/index.vue | 82 ++++++ .../system/iscsDraw/iscsOperate/index.vue | 96 +++++++ 16 files changed, 880 insertions(+), 121 deletions(-) create mode 100644 src/iscs/constant/deviceRender.js create mode 100644 src/iscs/constant/deviceType.js create mode 100644 src/iscs/shape/factory.js create mode 100644 src/iscs/shape/fireHydrantAlarmButton.js create mode 100644 src/iscs/utils/parser.js create mode 100644 src/store/modules/iscs.js create mode 100644 src/views/iscsSystem/index.vue create mode 100644 src/views/system/iscsDraw/index.vue create mode 100644 src/views/system/iscsDraw/iscsOperate/index.vue diff --git a/src/i18n/langs/en/router.js b/src/i18n/langs/en/router.js index 4d3e0655b..23bf2da67 100644 --- a/src/i18n/langs/en/router.js +++ b/src/i18n/langs/en/router.js @@ -72,5 +72,6 @@ export default { newsBulletin: 'New bulletin', commandDictionary: 'Command dictionary', configLine: 'Line management', - deviceManage: 'Device management' + deviceManage: 'Device management', + iscsDraw: 'Iscs Draw' }; diff --git a/src/i18n/langs/zh/router.js b/src/i18n/langs/zh/router.js index 5438cb8c8..d8601ba75 100644 --- a/src/i18n/langs/zh/router.js +++ b/src/i18n/langs/zh/router.js @@ -73,5 +73,6 @@ export default { newsBulletin: '消息公告', commandDictionary: '指令字典', configLine: '线路管理', - deviceManage: '设备管理' + deviceManage: '设备管理', + iscsDraw: 'Iscs绘制' }; diff --git a/src/iscs/constant/deviceRender.js b/src/iscs/constant/deviceRender.js new file mode 100644 index 000000000..c67ee1de6 --- /dev/null +++ b/src/iscs/constant/deviceRender.js @@ -0,0 +1,5 @@ +import deviceType from './deviceType'; + +const deviceRender = {}; + +export default deviceRender; diff --git a/src/iscs/constant/deviceType.js b/src/iscs/constant/deviceType.js new file mode 100644 index 000000000..0a071ffc7 --- /dev/null +++ b/src/iscs/constant/deviceType.js @@ -0,0 +1,17 @@ +const deviceType = { + SquareButton: 'SquareButton', + Arrow: 'Arrow', + TipBox: 'TipBox', + Background: 'Background', + CircularLamp: 'CircularLamp', + AppendageBox: 'AppendageBox', + Alarm: 'Alarm', + Elevator: 'Elevator', + Key: 'Key', + TeleTerminal: 'TeleTerminal', + Clock: 'Clock', + RotateTip: 'RotateTip', + CheckBox: 'CheckBox' +}; + +export default deviceType; diff --git a/src/iscs/iscs.js b/src/iscs/iscs.js index c261a47fa..0c5f897d3 100644 --- a/src/iscs/iscs.js +++ b/src/iscs/iscs.js @@ -1,17 +1,16 @@ import zrender from 'zrender'; -// import * as zrUtil from 'zrender/src/core/util'; import localStore from 'storejs'; import Options from './options'; import MouseController from './mouseController'; import Painter from './painter'; import deviceType from './constant/deviceType'; import {calculateDCenter, createBoundingRect, deviceFactory} from './utils/parser'; -import { updateIbpData } from './utils/parser'; +import { updateIscsData } from './utils/parser'; const renderer = 'canvas'; const devicePixelRatio = 1; -class IbpPan { +class Iscs { constructor(opts) { this.methods = opts.methods; @@ -19,25 +18,25 @@ class IbpPan { this.events = { __Pan: 'pan', Selected: 'selected', Contextmenu: 'contextmenu'}; // 设备数据 - this.ibpDevice = {}; + this.iscsDevice = {}; // 展示的画布大小 this.canvasSize = {}; - this.initIbpPage(opts); + this.initIscsPage(opts); } - initIbpPage(opts) { + initIscsPage(opts) { const width = opts.config.width; const height = opts.config.height; this.isAllowDragging = false; - this.$ibpZr = zrender.init(opts.dom, Object.assign({ renderer, devicePixelRatio, width, height }, opts.config)); + this.$iscsZr = zrender.init(opts.dom, Object.assign({ renderer, devicePixelRatio, width, height }, opts.config)); this.$options = new Options(Object.assign({ scaleRate: 1, offsetX: 0, offsetY: 0 }, opts.options || {})); // 缩放 this.$mouseController = new MouseController(this); this.$mouseController.enable(); this.$painter = new Painter(this); - this.$painter.updateZrSize({width: this.$ibpZr.getWidth(), height: this.$ibpZr.getHeight()}); + this.$painter.updateZrSize({width: this.$iscsZr.getWidth(), height: this.$iscsZr.getHeight()}); this.$painter.updateTransform(this.$options, this.canvasSize); this.optionsHandler = this.setOptions.bind(this); @@ -45,7 +44,7 @@ class IbpPan { this.$mouseController.on(this.events.__Pan, this.optionsHandler); } - setIbp(config, ibpDevice) { + setIscs(config, iscsDevice) { // 保存平移缩放数据 if (config.config) { this.$options.scaleRate = config.scaling; @@ -65,16 +64,16 @@ class IbpPan { }; // 地图数据 - this.ibpDevice = ibpDevice; + this.iscsDevice = iscsDevice; // 数据加载完成 回调 - if (this.methods.dataLoaded instanceof Function) { this.methods.dataLoaded(this.ibpDevice); } + if (this.methods.dataLoaded instanceof Function) { this.methods.dataLoaded(this.iscsDevice); } // 初次渲染视图 - this.$painter.repaint(this.ibpDevice); + this.$painter.repaint(this.iscsDevice); // 视图加载完成 回调 - if (this.methods.viewLoaded instanceof Function) { this.methods.viewLoaded(this.ibpDevice); } + if (this.methods.viewLoaded instanceof Function) { this.methods.viewLoaded(this.iscsDevice); } this.$painter.updateTransform(this.$options, this.canvasSize); } @@ -105,10 +104,10 @@ class IbpPan { } setCenter(deviceCode) { - const device = this.ibpDevice[deviceCode]; + const device = this.iscsDevice[deviceCode]; if (device && device.instance) { var rect = createBoundingRect(device.instance); - var dcenter = calculateDCenter(rect, { width: this.$ibpZr.getWidth(), height: this.$ibpZr.getHeight() }); + var dcenter = calculateDCenter(rect, { width: this.$iscsZr.getWidth(), height: this.$iscsZr.getHeight() }); this.setOptions(dcenter); } } @@ -129,13 +128,13 @@ class IbpPan { height: elem.height }; } - updateIbpData(elem); - const oDevice = this.ibpDevice[code] || deviceFactory(type, elem); + updateIscsData(elem); + const oDevice = this.iscsDevice[code] || deviceFactory(type, elem); const nDevice = deviceFactory(type, Object.assign(oDevice.model || {}, elem)); - delete this.ibpDevice[code]; + delete this.iscsDevice[code]; this.$painter.delete(oDevice); if (!elem._dispose) { - this.ibpDevice[code] = nDevice; + this.iscsDevice[code] = nDevice; this.$painter.add(nDevice); } }); @@ -168,7 +167,7 @@ class IbpPan { update(list) { (list || []).forEach(elem => { const code = elem.code; - const oDevice = this.ibpDevice[code]; + const oDevice = this.iscsDevice[code]; if (elem.dispose) { this.$painter.delete(oDevice); } else { @@ -181,11 +180,11 @@ class IbpPan { if (this.methods.stateUpdate instanceof Function) { this.methods.stateUpdate(list); } } setStatus(code, model) { - const oDevcie = this.ibpDevice[code].instance; + const oDevcie = this.iscsDevice[code].instance; oDevcie.setStatus(model); } setDeviceStatus(list) { - const deviceList = Object.values(this.ibpDevice); + const deviceList = Object.values(this.iscsDevice); deviceList.forEach(elem =>{ (list || []).forEach(it =>{ if (elem.model.linkDevice === it.code) { @@ -195,14 +194,14 @@ class IbpPan { }); } - drawIbpInit() { + drawIscsInit() { this.$mouseController.setAllowDragging(true); } pullBack(payload) { if (payload.type === 'zoom') { - const zrWidth = this.$ibpZr.getWidth(); - const zrHeight = this.$ibpZr.getHeight(); + const zrWidth = this.$iscsZr.getWidth(); + const zrHeight = this.$iscsZr.getHeight(); const originX = payload.originX || zrWidth / 2; const originY = payload.originY || zrHeight / 2; const x = (this.$options.offsetX + originX) / this.$options.scaleRate; @@ -218,7 +217,7 @@ class IbpPan { } getZr() { - return this.$ibpZr; + return this.$iscsZr; } getEvents() { @@ -226,11 +225,11 @@ class IbpPan { } getDeviceByCode(code) { - return this.ibpDevice[code]; + return this.iscsDevice[code]; } resize(opt) { - this.$ibpZr.resize(opt); + this.$iscsZr.resize(opt); this.$painter.updateZrSize(opt); } @@ -240,25 +239,9 @@ class IbpPan { clear() { this.skinCode = ''; this.style = {}; - this.ibpDevice = {}; + this.iscsDevice = {}; this.$painter.clear(); } - initClockTime(initTime) { - Object.values(this.ibpDevice) - .forEach(elem => { - if (elem.model._type === deviceType.Clock) { - this.$painter.initClockTime(elem, initTime); - } - }); - } - setClockStart(started) { - Object.values(this.ibpDevice) - .forEach(elem => { - if (elem.model._type === deviceType.Clock) { - this.$painter.setClockStart(elem, started); - } - }); - } dispose() { this.off(this.events.Pan, this.optionsHandler); this.off(this.events.Zoom, this.optionsHandler); @@ -266,7 +249,7 @@ class IbpPan { this.clear(); this.$mouseController.dispose(); - this.$ibpZr && zrender.dispose(this.$ibpZr); + this.$iscsZr && zrender.dispose(this.$iscsZr); this.$painter.dispose(); } @@ -274,15 +257,15 @@ class IbpPan { const idx = Object.values(this.events).indexOf(eventname); if (idx >= 0) { switch (eventname) { - case this.events.Selected: - this.$mouseController.on(this.events.Selected, cb, context); - break; - case this.events.Contextmenu: - this.$mouseController.on(this.events.Contextmenu, cb, context); - break; - case this.events.DataZoom: - this.$mouseController.on(this.events.DataZoom, cb, context); - break; + case this.events.Selected: + this.$mouseController.on(this.events.Selected, cb, context); + break; + case this.events.Contextmenu: + this.$mouseController.on(this.events.Contextmenu, cb, context); + break; + case this.events.DataZoom: + this.$mouseController.on(this.events.DataZoom, cb, context); + break; } } } @@ -291,15 +274,15 @@ class IbpPan { const idx = Object.values(this.events).indexOf(eventname); if (idx >= 0) { switch (eventname) { - case this.events.Selected: - this.$mouseController.off(this.events.Selected, cb); - break; - case this.events.Contextmenu: - this.$mouseController.off(this.events.Contextmenu, cb); - break; - case this.events.DataZoom: - this.$mouseController.off(this.events.DataZoom, cb); - break; + case this.events.Selected: + this.$mouseController.off(this.events.Selected, cb); + break; + case this.events.Contextmenu: + this.$mouseController.off(this.events.Contextmenu, cb); + break; + case this.events.DataZoom: + this.$mouseController.off(this.events.DataZoom, cb); + break; } } } @@ -307,21 +290,21 @@ class IbpPan { renderCheckBox(model) { const type = model._type; const code = model.code; - const oDevice = this.ibpDevice[code] || deviceFactory(type, model); + const oDevice = this.iscsDevice[code] || deviceFactory(type, model); const nDevice = deviceFactory(type, Object.assign(oDevice.model || {}, model)); - delete this.ibpDevice[code]; + delete this.iscsDevice[code]; this.$painter.delete(oDevice); if (!model._dispose) { - this.ibpDevice[code] = nDevice; + this.iscsDevice[code] = nDevice; this.$painter.add(nDevice); } } deleteCheckBox(code) { - const oDevice = this.ibpDevice[code]; + const oDevice = this.iscsDevice[code]; if (oDevice) { - delete this.ibpDevice[code]; + delete this.iscsDevice[code]; this.$painter.delete(oDevice); } } } -export default IbpPan; +export default Iscs; diff --git a/src/iscs/mouseController.js b/src/iscs/mouseController.js index 24b63cd21..f433ca155 100644 --- a/src/iscs/mouseController.js +++ b/src/iscs/mouseController.js @@ -23,12 +23,12 @@ class EventModel { } class MouseController extends Eventful { - constructor(ibp) { + constructor(iscs) { super(); - this.$ibp = ibp; - this.$zr = ibp.getZr(); - this.isAllowDragging = ibp.isAllowDragging || false; // 是否在绘图中，仅绘图状态下可拖拽 - this.events = ibp.getEvents(); + this.$iscs = iscs; + this.$zr = iscs.getZr(); + this.isAllowDragging = iscs.isAllowDragging || false; // 是否在绘图中，仅绘图状态下可拖拽 + this.events = iscs.getEvents(); this._dragging = false; // 是否在拖拽状态 this.deviceList = []; this.rightClickPoint = { @@ -127,7 +127,7 @@ class MouseController extends Eventful { item.setModel(e.offsetX - this._offsetX, e.offsetY - this._offsetY); }); this.deviceList = []; - this.$ibp.deleteCheckBox('check_box'); + this.$iscs.deleteCheckBox('check_box'); this.eventTarget = ''; this._dragging = false; this.deviceList = []; @@ -158,7 +158,7 @@ class MouseController extends Eventful { const trainDetails = store.state.map.trainDetails; if (trainDetails) { if (newEm.deviceType != deviceType.Train || trainDetails.code != newEm.deviceCode) { - var instance = (this.$ibp.getDeviceByCode(trainDetails.code) || {} ).instance; + var instance = (this.$iscs.getDeviceByCode(trainDetails.code) || {} ).instance; instance && instance.removeTrainDetail && instance.removeTrainDetail(); } } @@ -169,10 +169,10 @@ class MouseController extends Eventful { var newEm = new EventModel(e); if ([1, 3].includes(e.which)) { // 查找之前和当前鼠标选中的实例 - var oldDevice = this.$ibp.getDeviceByCode(oldEm.deviceCode) || {}; - var newDevice = this.$ibp.getDeviceByCode(newEm.deviceCode) || {}; - var oldInstance = (this.$ibp.getDeviceByCode(oldEm.deviceCode) || {}).instance || {}; - var newInstance = (this.$ibp.getDeviceByCode(newEm.deviceCode) || {}).instance || {}; + var oldDevice = this.$iscs.getDeviceByCode(oldEm.deviceCode) || {}; + var newDevice = this.$iscs.getDeviceByCode(newEm.deviceCode) || {}; + var oldInstance = (this.$iscs.getDeviceByCode(oldEm.deviceCode) || {}).instance || {}; + var newInstance = (this.$iscs.getDeviceByCode(newEm.deviceCode) || {}).instance || {}; // 如果之前和当前选中的实例不一致 if (oldInstance != newInstance) { @@ -205,17 +205,17 @@ class MouseController extends Eventful { handleMouseDownLeft(e) { if (this.eventTarget && this.eventTarget._type === deviceType.Background) { this.eventTarget.setCursor('pointer'); - this.$ibp.deleteCheckBox('check_box'); + this.$iscs.deleteCheckBox('check_box'); } else if (this.eventTarget && this.eventTarget._type === deviceType.CheckBox) { this.handleBoundingRect(this.eventTarget); } else { - this.$ibp.deleteCheckBox('check_box'); + this.$iscs.deleteCheckBox('check_box'); } } /** 处理滚轮按下事件 */ handleMouseDownWheel(e) { this.deviceList = []; - Object.values(this.$ibp.ibpDevice).forEach(item => { + Object.values(this.$iscs.iscsDevice).forEach(item => { if (item.instance._type !== deviceType.Background) { this.deviceList.push(item.instance); } @@ -224,11 +224,11 @@ class MouseController extends Eventful { /** 处理右键拖动事件--- 改变选中区域大小 */ handleMouseMoveRight(point2) { const point1 = this.rightClickPoint; - const x = Math.min(point1.x, point2.x) + this.$ibp.$options.offsetX; - const y = Math.min(point1.y, point2.y) + this.$ibp.$options.offsetY; + const x = Math.min(point1.x, point2.x) + this.$iscs.$options.offsetX; + const y = Math.min(point1.y, point2.y) + this.$iscs.$options.offsetY; const width = Math.abs(point1.x - point2.x); const height = Math.abs(point1.y - point2.y); - this.$ibp.renderCheckBox({code: 'check_box', _type: 'CheckBox', point: {x: x, y: y}, width: width, height: height }); + this.$iscs.renderCheckBox({code: 'check_box', _type: 'CheckBox', point: {x: x, y: y}, width: width, height: height }); } /** 处理左键拖动事件--- 图形移动 */ handleMouseMoveLeft(e, dx, dy, oldX, oldY) { @@ -254,7 +254,7 @@ class MouseController extends Eventful { this.deviceList = []; let boundingRect = eventTarget.grouper.getBoundingRect(); boundingRect = this.createFakeBoundingRect(eventTarget, boundingRect); - const deviceList = Object.values(this.$ibp.ibpDevice); + const deviceList = Object.values(this.$iscs.iscsDevice); const includeDeviceList = []; deviceList.forEach( item =>{ if (item.instance._type !== deviceType.Background) { diff --git a/src/iscs/painter.js b/src/iscs/painter.js index fba800833..cc30dd401 100644 --- a/src/iscs/painter.js +++ b/src/iscs/painter.js @@ -6,13 +6,13 @@ import shapefactory from './shape/factory'; import TransformHandle from './transformHandle'; class Painter { - constructor(ibp) { + constructor(iscs) { // 父级实例 - this.$ibp = ibp; - this.$ibpZr = ibp.getZr(); + this.$iscs = iscs; + this.$iscsZr = iscs.getZr(); // 图层数据 - this.ibpInstanceLevel = {}; + this.iscsInstanceLevel = {}; // 初始图层 this.initLevels(); @@ -30,26 +30,26 @@ class Painter { // 添加父级图层 this.parentLevel = new Group({ name: '__parent__' }); - this.$ibpZr.add(this.parentLevel); + this.$iscsZr.add(this.parentLevel); // 添加子级图层 zrUtil.each(Object.values(deviceType), (type) => { const level = new Group({ name: `__${type}__` }); - this.ibpInstanceLevel[type] = level; + this.iscsInstanceLevel[type] = level; this.parentLevel.add(level); }); } /** * 重绘视图 - * @param {*} ibpDevice + * @param {*} iscsDevice */ - repaint(ibpDevice) { + repaint(iscsDevice) { // 清空视图 this.clear(); // 创建视图 - Object.values(ibpDevice).forEach(device => { + Object.values(iscsDevice).forEach(device => { this.add(device); }); } @@ -60,12 +60,12 @@ class Painter { */ add(device) { try { - device = Object.assign(device, { event: this.$ibp.$mouseController }); - const instance = shapefactory(device, this.$ibp); + device = Object.assign(device, { event: this.$iscs.$mouseController }); + const instance = shapefactory(device, this.$iscs); if (instance) { device.instance = instance; this.$transformHandle.transformView(instance); - this.ibpInstanceLevel[device.model._type].add(instance); + this.iscsInstanceLevel[device.model._type].add(instance); } } catch (error) { console.error(error); @@ -79,7 +79,7 @@ class Painter { delete(device) { const instance = device.instance; if (instance) { - this.ibpInstanceLevel[device.model._type].remove(instance); + this.iscsInstanceLevel[device.model._type].remove(instance); } } @@ -116,25 +116,13 @@ class Painter { this.$transformHandle.updateZrSize(opt); } - /** - * 初始化电子时钟时间 - */ - initClockTime(device, initTime) { - device.instance.setClockTime(initTime); - } - /** - * 电子时钟开始跑秒或暂停 - */ - setClockStart(device, started) { - device.instance.setClockStart(started); - } /** * 设置图层可见 * @param {*} code */ setLevelVisible(list) { zrUtil.each(Object.values(deviceType), type => { - const level = this.ibpInstanceLevel[type]; + const level = this.iscsInstanceLevel[type]; if (list.includes(type)) { level.show(); } else { @@ -147,14 +135,14 @@ class Painter { * 刷新图层 */ refresh() { - this.$ibpZr.refresh(); + this.$iscsZr.refresh(); } /** * 清除图层 */ clearLevel(type) { - const level = this.ibpInstanceLevel[type]; + const level = this.iscsInstanceLevel[type]; if (level) { level.removeAll(); } @@ -164,7 +152,7 @@ class Painter { * 清除canvas */ clear() { - zrUtil.each(Object.values(this.ibpInstanceLevel), (level) => { + zrUtil.each(Object.values(this.iscsInstanceLevel), (level) => { level && level.removeAll(); }, this); @@ -175,7 +163,7 @@ class Painter { * 销毁图层 */ dispose() { - this.ibpInstanceLevel = {}; + this.iscsInstanceLevel = {}; this.parentLevel = null; } diff --git a/src/iscs/shape/factory.js b/src/iscs/shape/factory.js new file mode 100644 index 000000000..34a6f5284 --- /dev/null +++ b/src/iscs/shape/factory.js @@ -0,0 +1,12 @@ +const iscsShape = {}; + +function shapefactory(device, iscs) { + const type = device.model._type; + const shape = iscsShape[type]; + if (shape instanceof Function) { + // eslint-disable-next-line + return new shape(device, iscs.style); + } +} + +export default shapefactory; diff --git a/src/iscs/shape/fireHydrantAlarmButton.js b/src/iscs/shape/fireHydrantAlarmButton.js new file mode 100644 index 000000000..f78bd5e38 --- /dev/null +++ b/src/iscs/shape/fireHydrantAlarmButton.js @@ -0,0 +1,34 @@ +import Group from 'zrender/src/container/Group'; +import Rect from 'zrender/src/graphic/shape/Rect'; +import Polygon from 'zrender/src/graphic/shape/Polygon'; + +export default class FireHydrantAlarmButton extends Group() { + constructor(device) { + super(); + this.model = device.model; + this._type = device.model._type; + this._code = device.model.code; + this.zlevel = device.model.zlevel; + this.z = device.model.zlevel; + this.create(); + } + create() { + this.rect = new Rect({ + zlevel: this.model.zlevel, + z: this.model.z, + shape: { + x: this.model.point.x, + y: this.model.point.y, + width: this.model.width, + height: this.model.height + }, + style: { + fill: '#0f0' + } + }); + this.add(this.rect); + this.polygonTop = new Polygon({ + + }); + } +} diff --git a/src/iscs/shape/manualAlarmButton.js b/src/iscs/shape/manualAlarmButton.js index 108263407..d3dee6ec1 100644 --- a/src/iscs/shape/manualAlarmButton.js +++ b/src/iscs/shape/manualAlarmButton.js @@ -2,6 +2,7 @@ import Group from 'zrender/src/container/Group'; import Rect from 'zrender/src/graphic/shape/Rect'; import Circle from 'zrender/src/graphic/shape/Circle'; import Text from 'zrender/src/graphic/Text'; +import AppendageBox from '../../ibp/shape/appendageBox'; export default class manualAlarmButton extends Group() { constructor(device) { @@ -14,6 +15,64 @@ export default class manualAlarmButton extends Group() { this.create(); } cerate() { - + this.rect = new Rect({ + zlevel: this.model.zlevel, + z: this.model.z - 1, + shape: { + x: this.model.point.x, + y: this.model.point.y, + width: this.model.width, + height: this.model.height + }, + style: { + lineWidth: 1, + stroke: '#0F0' + } + }); + this.add(this.rect); + this.text = new Text({ + zlevel: this.model.zlevel, + z: this.model.z, + style: { + x: this.model.point.x, + y: this.model.point.y, + fontWeight: this.model.fontWeight, + fontSize: this.model.fontSize, + fontFamily: this.model.fontFamily, + text: this.model.context, + textStrokeWidth: this.model.textStrokeWidth, + textFill: this.model.textFill, + textAlign: this.model.textAlign, + textPosition: this.model.textPosition || 'inside', + textVerticalAlign: this.model.textVerticalAlign || null, + textLineHeight: this.model.fontSize + } + }); + this.add(this.text); + this.circleOutside = new Circle({ + zlevel: this.model.zlevel, + z: this.model.z, + shape: { + cx: this.model.point.x, + cy: this.model.point.y, + r: this.model.r1 + }, + style: { + fill: '#0f0' + } + }); + this.add(this.circleOutside); + this.circleInside = new Circle({ + zlevel: this.model.zlevel, + z: this.model.z, + shape: { + cx: this.model.point.x, + cy: this.model.point.y, + r: this.model.r2 + }, + style: { + fill: '#000' + } + }); } } diff --git a/src/iscs/utils/parser.js b/src/iscs/utils/parser.js new file mode 100644 index 000000000..88a9d1218 --- /dev/null +++ b/src/iscs/utils/parser.js @@ -0,0 +1,147 @@ +import * as zrUtil from 'zrender/src/core/util'; +import * as matrix from 'zrender/src/core/matrix'; +import deviceType from '../constant/deviceType'; +import deviceRender from '../constant/deviceRender'; +import store from '@/store'; + +export function createTransform(opts) { + let transform = matrix.create(); + transform = matrix.scale(matrix.create(), transform, [opts.scaleRate, opts.scaleRate]); + transform = matrix.translate(matrix.create(), transform, [-opts.offsetX, -opts.offsetY]); + return transform; +} + +export function createBoundingRect(view) { + const rect = view.getBoundingRect(); + const scale = view.scale[0]; + const offsetX = view.position[0]; + const offsetY = view.position[1]; + rect.x = rect.x * scale + offsetX; + rect.y = rect.y * scale + offsetY; + rect.width = rect.width * scale; + rect.height = rect.height * scale; + return rect; +} + +export function calculateDCenter(viewRect, zrbound) { + var dx = (zrbound.width - viewRect.width) / 2 - viewRect.x; + var dy = 0; + return { dx: dx, dy: dy }; +} + +export function deviceFactory(type, elem) { + return Object.assign({instance: null, event: null, model: Object.assign(elem, deviceRender[type])}); +} + +export function parser(data) { + var iscsDevice = {}; + if (data) { + Object.assign(data.background); + iscsDevice[data.background.code] = deviceFactory(deviceType.Background, data.background); + + zrUtil.each(data.squareButtonList || [], elem => { + iscsDevice[elem.code] = deviceFactory(deviceType.SquareButton, elem); + }, this); + + zrUtil.each(data.circularLampList || [], elem => { + iscsDevice[elem.code] = deviceFactory(deviceType.CircularLamp, elem); + }, this); + + zrUtil.each(data.alarmList || [], elem => { + iscsDevice[elem.code] = deviceFactory(deviceType.Alarm, elem); + }, this); + + zrUtil.each(data.arrowList || [], elem => { + iscsDevice[elem.code] = deviceFactory(deviceType.Arrow, elem); + }, this); + + zrUtil.each(data.tipBoxList || [], elem => { + iscsDevice[elem.code] = deviceFactory(deviceType.TipBox, elem); + }, this); + + zrUtil.each(data.appendageBoxList || [], elem => { + iscsDevice[elem.code] = deviceFactory(deviceType.AppendageBox, elem); + }, this); + + zrUtil.each(data.elevatorList || [], elem => { + iscsDevice[elem.code] = deviceFactory(deviceType.Elevator, elem); + }, this); + + zrUtil.each(data.keyList || [], elem => { + iscsDevice[elem.code] = deviceFactory(deviceType.Key, elem); + }, this); + + zrUtil.each(data.teleTerminalList || [], elem => { + iscsDevice[elem.code] = deviceFactory(deviceType.TeleTerminal, elem); + }, this); + + zrUtil.each(data.clockList || [], elem => { + iscsDevice[elem.code] = deviceFactory(deviceType.Clock, elem); + }); + + zrUtil.each(data.rotateTipList || [], elem => { + iscsDevice[elem.code] = deviceFactory(deviceType.RotateTip, elem); + }); + } + + return iscsDevice; +} + +function updateIscsListByDevice(iscs, name, device) { + var list = iscs[name]; + if (list) { + const index = list.findIndex(elem => { return elem.code == device.code; }); + if (index >= 0) { + device._dispose ? list.splice(index, 1) : list[index] = device; + } else { + list.push(device); + } + } else { + iscs[name] = [device]; + } + + return list; +} + +export function updateIscsData(device) { + const iscsData = store.getters['iscs/iscs']; + switch (device._type) { + case deviceType.Background : + iscsData.background = device; + break; + case deviceType.SquareButton : + updateIscsListByDevice(iscsData, 'squareButtonList', device); + break; + case deviceType.Arrow : + updateIscsListByDevice(iscsData, 'arrowList', device); + break; + case deviceType.TipBox : + updateIscsListByDevice(iscsData, 'tipBoxList', device); + break; + case deviceType.CircularLamp : + updateIscsListByDevice(iscsData, 'circularLampList', device); + break; + case deviceType.AppendageBox : + updateIscsListByDevice(iscsData, 'appendageBoxList', device); + break; + case deviceType.Alarm : + updateIscsListByDevice(iscsData, 'alarmList', device); + break; + case deviceType.Elevator : + updateIscsListByDevice(iscsData, 'elevatorList', device); + break; + case deviceType.Key : + updateIscsListByDevice(iscsData, 'keyList', device); + break; + case deviceType.TeleTerminal : + updateIscsListByDevice(iscsData, 'teleTerminalList', device); + break; + case deviceType.Clock : + updateIscsListByDevice(iscsData, 'clockList', device); + break; + case deviceType.RotateTip: + updateIscsListByDevice(iscsData, 'rotateTipList', device); + break; + } + store.dispatch('iscs/setIscsData', iscsData); +} diff --git a/src/router/index.js b/src/router/index.js index 77f724866..4629ff5e3 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -33,6 +33,7 @@ const ExistingSimulation = () => import('@/views/system/existingSimulation/index const CacheControl = () => import('@/views/system/cacheControl/index'); const SystemGenerate = () => import('@/views/system/systemGenerate/index'); const IbpDraw = () => import('@/views/system/ibpDraw/index'); +const IscsDraw = () => import('@/views/system/iscsDraw/index'); const News = () => import('@/views/system/news/index'); const CommandDictionary = () => import('@/views/system/commandDictionary/index'); const CommandDictionaryDetail = () => import('@/views/system/commandDictionary/edit'); @@ -777,6 +778,13 @@ export const asyncRouter = [ i18n: 'router.ibpDraw' } }, + { + path:'iscs/edit', + component: IscsDraw, + meta: { + i18n: 'router.iscsDraw' + } + }, { path: 'dictionary', component: Dictionary, diff --git a/src/store/modules/iscs.js b/src/store/modules/iscs.js new file mode 100644 index 000000000..804f0ecbc --- /dev/null +++ b/src/store/modules/iscs.js @@ -0,0 +1,79 @@ +import Vue from 'vue'; + +/** + * iscs状态数据 + */ +const iscs = { + namespaced: true, + + state: { + iscs: null, // 数据 + iscsDevice: {}, // 解析后的地图数据 + iscsList: {}, // 数据列表 + iscsIdList: {}, // 数据列表(以id为标识) + updateDeviceData: {}, // 修改的数据 + rightClickCount: 0 // 右键点击设备 + }, + + getters: { + iscsList: (state) => { + return state.iscsList; + }, + iscs: (state) => { + return state.iscs; + }, + version: (state) => { + if (state.iscs) { + return state.iscs.version; + } else { + return null; + } + }, + updateDeviceData: (state) => { + return state.updateDeviceData; + } + }, + + mutations: { + iscsRender: (state, devices) => { + Vue.prototype.$iscs && Vue.prototype.$iscs.render(devices); + }, + setIscsData: (state, iscs) => { + state.iscs = iscs; + }, + setUpdateDeviceData: (state, model) => { + state.rightClickCount++; + state.updateDeviceData = model; + }, + deleteIscsDevices: (state, devices) => { + Vue.prototype.$iscs && Vue.prototype.$iscs.render(devices); + } + }, + + actions: { + setIscsData: ({ commit }, iscs) => { + commit('setIscsData', iscs); + }, + updateIscsDevices: ({ commit }, models) => { + return new Promise((resolve) => { + if (!(models instanceof Array)) { + models = [models]; + } + commit('iscsRender', models); + resolve(models); + }); + }, + setUpdateDeviceData: ({ commit }, models) => { + commit('setUpdateDeviceData', models); + }, + deleteIscsDevices: ({ commit }, models ) => { + models = Object.assign(models, {_dispose: true}); + if (!(models instanceof Array)) { + models = [models]; + } + commit('deleteIscsDevices', models); + } + } +}; + +export default iscs; diff --git a/src/views/iscsSystem/index.vue b/src/views/iscsSystem/index.vue new file mode 100644 index 000000000..c47d4d7eb --- /dev/null +++ b/src/views/iscsSystem/index.vue @@ -0,0 +1,247 @@ + + + + diff --git a/src/views/system/iscsDraw/index.vue b/src/views/system/iscsDraw/index.vue new file mode 100644 index 000000000..58aea4e89 --- /dev/null +++ b/src/views/system/iscsDraw/index.vue @@ -0,0 +1,82 @@ + + + diff --git a/src/views/system/iscsDraw/iscsOperate/index.vue b/src/views/system/iscsDraw/iscsOperate/index.vue new file mode 100644 index 000000000..a7425bf9b --- /dev/null +++ b/src/views/system/iscsDraw/iscsOperate/index.vue @@ -0,0 +1,96 @@ + + + From e4ccfa40d2d7d48c70b65ce361c8ce00b676390b Mon Sep 17 00:00:00 2001 From: fan <18706759286@163.com> Date: Tue, 14 Jan 2020 09:55:57 +0800 Subject: [PATCH 03/20] =?UTF-8?q?iscs=20=E7=BB=98=E5=9B=BE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/iscs/shape/manualAlarmButton.js | 1 - .../iscsOperate/manualAlarmButton.vue | 28 +++++++++++++++++++ 2 files changed, 28 insertions(+), 1 deletion(-) create mode 100644 src/views/system/iscsDraw/iscsOperate/manualAlarmButton.vue diff --git a/src/iscs/shape/manualAlarmButton.js b/src/iscs/shape/manualAlarmButton.js index d3dee6ec1..9050e113f 100644 --- a/src/iscs/shape/manualAlarmButton.js +++ b/src/iscs/shape/manualAlarmButton.js @@ -2,7 +2,6 @@ import Group from 'zrender/src/container/Group'; import Rect from 'zrender/src/graphic/shape/Rect'; import Circle from 'zrender/src/graphic/shape/Circle'; import Text from 'zrender/src/graphic/Text'; -import AppendageBox from '../../ibp/shape/appendageBox'; export default class manualAlarmButton extends Group() { constructor(device) { diff --git a/src/views/system/iscsDraw/iscsOperate/manualAlarmButton.vue b/src/views/system/iscsDraw/iscsOperate/manualAlarmButton.vue new file mode 100644 index 000000000..1904582e1 --- /dev/null +++ b/src/views/system/iscsDraw/iscsOperate/manualAlarmButton.vue @@ -0,0 +1,28 @@ + + + + + From e8039732ab9a99c2d0e7d8dc356996b5e89257b3 Mon Sep 17 00:00:00 2001 From: fan <18706759286@163.com> Date: Tue, 14 Jan 2020 18:17:51 +0800 Subject: [PATCH 04/20] =?UTF-8?q?iscs=E8=B0=83=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../system/iscsDraw/iscsOperate/index.vue | 14 +++++++++- .../iscsOperate/manualAlarmButton.vue | 27 ++++++++++++++++--- 2 files changed, 37 insertions(+), 4 deletions(-) diff --git a/src/views/system/iscsDraw/iscsOperate/index.vue b/src/views/system/iscsDraw/iscsOperate/index.vue index a7425bf9b..1ac61c857 100644 --- a/src/views/system/iscsDraw/iscsOperate/index.vue +++ b/src/views/system/iscsDraw/iscsOperate/index.vue @@ -18,16 +18,28 @@ @click="handleSave" >{{ $t('ibp.save') }} - + + + + + From 9233728346bf1fb4c7885510295e501d786ce40d Mon Sep 17 00:00:00 2001 From: fan <18706759286@163.com> Date: Wed, 15 Jan 2020 10:11:26 +0800 Subject: [PATCH 05/20] =?UTF-8?q?iscs=E8=B0=83=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/iscs/constant/deviceRender.js | 7 + src/iscs/utils/parser.js | 2 - src/router/index.js | 14 +- src/views/iscsSystem/index.vue | 9 +- src/views/system/iscsDesign/demonList.vue | 160 ++++++++++++++++++ src/views/system/iscsDesign/index.vue | 100 +++++++++++ src/views/system/iscsDraw/index.vue | 7 +- .../iscsOperate/manualAlarmButton.vue | 64 ++++++- 8 files changed, 345 insertions(+), 18 deletions(-) create mode 100644 src/views/system/iscsDesign/demonList.vue create mode 100644 src/views/system/iscsDesign/index.vue diff --git a/src/iscs/constant/deviceRender.js b/src/iscs/constant/deviceRender.js index c67ee1de6..d50a10bbc 100644 --- a/src/iscs/constant/deviceRender.js +++ b/src/iscs/constant/deviceRender.js @@ -2,4 +2,11 @@ import deviceType from './deviceType'; const deviceRender = {}; +/** IbpText渲染配置*/ +deviceRender[deviceType.ManualAlarmButton] = { + _type: deviceType.ManualAlarmButton, + zlevel: 1, + z: 4 +}; + export default deviceRender; diff --git a/src/iscs/utils/parser.js b/src/iscs/utils/parser.js index 88a9d1218..38b2c19b9 100644 --- a/src/iscs/utils/parser.js +++ b/src/iscs/utils/parser.js @@ -36,8 +36,6 @@ export function deviceFactory(type, elem) { export function parser(data) { var iscsDevice = {}; if (data) { - Object.assign(data.background); - iscsDevice[data.background.code] = deviceFactory(deviceType.Background, data.background); zrUtil.each(data.squareButtonList || [], elem => { iscsDevice[elem.code] = deviceFactory(deviceType.SquareButton, elem); diff --git a/src/router/index.js b/src/router/index.js index 4629ff5e3..5dce3b97f 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -34,6 +34,7 @@ const CacheControl = () => import('@/views/system/cacheControl/index'); const SystemGenerate = () => import('@/views/system/systemGenerate/index'); const IbpDraw = () => import('@/views/system/ibpDraw/index'); const IscsDraw = () => import('@/views/system/iscsDraw/index'); +const IscsDesign = () => import('@/views/system/iscsDesign/index'); const News = () => import('@/views/system/news/index'); const CommandDictionary = () => import('@/views/system/commandDictionary/index'); const CommandDictionaryDetail = () => import('@/views/system/commandDictionary/edit'); @@ -779,11 +780,18 @@ export const asyncRouter = [ } }, { - path:'iscs/edit', - component: IscsDraw, + path:'iscs/design', + component: IscsDesign, meta: { i18n: 'router.iscsDraw' - } + }, + children: [ + { + path: 'edit/:id/:mode', + component: IscsDraw, + hidden: true + } + ] }, { path: 'dictionary', diff --git a/src/views/iscsSystem/index.vue b/src/views/iscsSystem/index.vue index c47d4d7eb..fc7b467a1 100644 --- a/src/views/iscsSystem/index.vue +++ b/src/views/iscsSystem/index.vue @@ -27,8 +27,6 @@ export default { }, data() { return { - width: this.$store.state.config.width, - height: this.$store.state.config.height, dataZoom: { offsetX: '0', offsetY: '0', @@ -57,6 +55,12 @@ export default { ]), iscsId() { return ['iscs', (Math.random().toFixed(5)) * 100000].join('_'); + }, + width() { + return this.$store.state.config.width; + }, + height() { + return this.$store.state.config.height; } }, watch: { @@ -85,7 +89,6 @@ export default { } }, mounted() { - this.setWindowSize(); }, beforeDestroy() { this.iscsDestroy(); diff --git a/src/views/system/iscsDesign/demonList.vue b/src/views/system/iscsDesign/demonList.vue new file mode 100644 index 000000000..c672cd47c --- /dev/null +++ b/src/views/system/iscsDesign/demonList.vue @@ -0,0 +1,160 @@ + + + diff --git a/src/views/system/iscsDesign/index.vue b/src/views/system/iscsDesign/index.vue new file mode 100644 index 000000000..0675730b9 --- /dev/null +++ b/src/views/system/iscsDesign/index.vue @@ -0,0 +1,100 @@ + + + + diff --git a/src/views/system/iscsDraw/index.vue b/src/views/system/iscsDraw/index.vue index 58aea4e89..42c3c70a8 100644 --- a/src/views/system/iscsDraw/index.vue +++ b/src/views/system/iscsDraw/index.vue @@ -2,7 +2,7 @@
- +
@@ -29,12 +29,9 @@ export default { }; }, watch: { - '$store.state.app.windowSizeCount': function() { - this.$store.dispatch('config/resize', { width: this.$store.state.app.width - 521, height: this.$store.state.app.height - 60 }); - } + }, created() { - this.$store.dispatch('config/resize', { width: this.$store.state.app.width - 521, height: this.$store.state.app.height - 60 }); }, mounted() { this.$refs.iscsPlate.show(); diff --git a/src/views/system/iscsDraw/iscsOperate/manualAlarmButton.vue b/src/views/system/iscsDraw/iscsOperate/manualAlarmButton.vue index f6e6051f4..a02c86c7a 100644 --- a/src/views/system/iscsDraw/iscsOperate/manualAlarmButton.vue +++ b/src/views/system/iscsDraw/iscsOperate/manualAlarmButton.vue @@ -13,6 +13,11 @@ + + {{ buttonText }} + {{ $t('global.delete') }} + {{ $t('global.cancel') }} +
@@ -25,19 +30,68 @@ export default { addModel:{ code: '', width: '', - x: '', - y: '' + x: 10, + y: 10 }, rules: { width:[{ required: true, message:'请输入设备图形宽度', trigger: 'blur' }], x: [{ required: true, message: '请输入设备图形的X轴坐标', trigger: 'blur' }], y: [{ required: true, message: '请输入设备图形的Y轴坐标', trigger: 'blur' }] - } + }, + showDeleteButton: false, + buttonText: '立即创建' }; }, methods: { - doSave() { - + onSubmit(form) { + if (!this.addModel.code) { + this.generateCode(); + } + this.$refs[form].validate((valid) => { + if (valid) { + const maButtonModel = { + point: { + x: this.addModel.x, + y: this.addModel.y + }, + code: this.addModel.code, + _type: 'manualAlarmButton', + width: this.addModel.width + }; + this.$emit('createManualAlarm', maButtonModel); + this.initPage(); + } else { + return false; + } + }); + }, + deleteDevice() { + const maButtonModel = { + point: { + x: this.addModel.x, + y: this.addModel.y + }, + code: this.addModel.code, + _type: 'manualAlarmButton', + width: this.addModel.width + }; + this.$emit('deleteDataModel', maButtonModel); + this.initPage(); + }, + initPage() { + this.isUpdate = false; + this.buttonText = '立即创建'; + this.showDeleteButton = false; + this.addModel = { + code: '', + width: '', + x: 10, + y: 10 + }; + }, + generateCode() { + const mydate = new Date(); + this.addModel.code = 'manualAlarmButton_' + mydate.getDay() + mydate.getHours() + mydate.getMinutes() + mydate.getSeconds() + mydate.getMilliseconds() + Math.round(Math.random() * 10000); } } From a03b002beb2800b337681c3a2b9647f2e356f2b9 Mon Sep 17 00:00:00 2001 From: fan <18706759286@163.com> Date: Wed, 15 Jan 2020 13:27:07 +0800 Subject: [PATCH 06/20] =?UTF-8?q?iscs=E8=B0=83=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/iscs/constant/deviceType.js | 14 +--- src/iscs/iscs.js | 12 +-- src/iscs/shape/factory.js | 4 + src/iscs/shape/manualAlarmButton.js | 4 +- src/iscs/utils/parser.js | 82 +------------------ src/store/index.js | 4 +- src/views/iscsSystem/index.vue | 49 +---------- src/views/system/iscsDesign/demonList.vue | 14 +++- src/views/system/iscsDesign/index.vue | 6 +- src/views/system/iscsDraw/index.vue | 3 +- .../system/iscsDraw/iscsOperate/index.vue | 40 ++------- .../iscsOperate/manualAlarmButton.vue | 2 +- 12 files changed, 44 insertions(+), 190 deletions(-) diff --git a/src/iscs/constant/deviceType.js b/src/iscs/constant/deviceType.js index 0a071ffc7..14198449f 100644 --- a/src/iscs/constant/deviceType.js +++ b/src/iscs/constant/deviceType.js @@ -1,17 +1,5 @@ const deviceType = { - SquareButton: 'SquareButton', - Arrow: 'Arrow', - TipBox: 'TipBox', - Background: 'Background', - CircularLamp: 'CircularLamp', - AppendageBox: 'AppendageBox', - Alarm: 'Alarm', - Elevator: 'Elevator', - Key: 'Key', - TeleTerminal: 'TeleTerminal', - Clock: 'Clock', - RotateTip: 'RotateTip', - CheckBox: 'CheckBox' + ManualAlarmButton: 'manualAlarmButton' }; export default deviceType; diff --git a/src/iscs/iscs.js b/src/iscs/iscs.js index 0c5f897d3..29e6831c9 100644 --- a/src/iscs/iscs.js +++ b/src/iscs/iscs.js @@ -59,8 +59,8 @@ class Iscs { this.canvasSize = { x: 0, y: 0, - width: config.background.width, - height: config.background.height + width: config.width, + height: config.height }; // 地图数据 @@ -120,14 +120,6 @@ class Iscs { (list || []).forEach(elem => { const code = elem.code; const type = elem._type; - if (type === deviceType.Background) { - this.canvasSize = { - x: 0, - y: 0, - width: elem.width, - height: elem.height - }; - } updateIscsData(elem); const oDevice = this.iscsDevice[code] || deviceFactory(type, elem); const nDevice = deviceFactory(type, Object.assign(oDevice.model || {}, elem)); diff --git a/src/iscs/shape/factory.js b/src/iscs/shape/factory.js index 34a6f5284..28072543b 100644 --- a/src/iscs/shape/factory.js +++ b/src/iscs/shape/factory.js @@ -1,4 +1,8 @@ +import ManualAlarmButton from './manualAlarmButton'; +import deviceType from '../constant/deviceType'; + const iscsShape = {}; +iscsShape[deviceType.ManualAlarmButton] = ManualAlarmButton; function shapefactory(device, iscs) { const type = device.model._type; diff --git a/src/iscs/shape/manualAlarmButton.js b/src/iscs/shape/manualAlarmButton.js index 9050e113f..e4e833e37 100644 --- a/src/iscs/shape/manualAlarmButton.js +++ b/src/iscs/shape/manualAlarmButton.js @@ -3,7 +3,7 @@ import Rect from 'zrender/src/graphic/shape/Rect'; import Circle from 'zrender/src/graphic/shape/Circle'; import Text from 'zrender/src/graphic/Text'; -export default class manualAlarmButton extends Group() { +export default class manualAlarmButton extends Group { constructor(device) { super(); this.model = device.model; @@ -13,7 +13,7 @@ export default class manualAlarmButton extends Group() { this.z = device.model.zlevel; this.create(); } - cerate() { + create() { this.rect = new Rect({ zlevel: this.model.zlevel, z: this.model.z - 1, diff --git a/src/iscs/utils/parser.js b/src/iscs/utils/parser.js index 38b2c19b9..7609f5fba 100644 --- a/src/iscs/utils/parser.js +++ b/src/iscs/utils/parser.js @@ -36,50 +36,9 @@ export function deviceFactory(type, elem) { export function parser(data) { var iscsDevice = {}; if (data) { - - zrUtil.each(data.squareButtonList || [], elem => { - iscsDevice[elem.code] = deviceFactory(deviceType.SquareButton, elem); + zrUtil.each(data.manualAlarmButtonList || [], elem => { + iscsDevice[elem.code] = deviceFactory(deviceType.ManualAlarmButton, elem); }, this); - - zrUtil.each(data.circularLampList || [], elem => { - iscsDevice[elem.code] = deviceFactory(deviceType.CircularLamp, elem); - }, this); - - zrUtil.each(data.alarmList || [], elem => { - iscsDevice[elem.code] = deviceFactory(deviceType.Alarm, elem); - }, this); - - zrUtil.each(data.arrowList || [], elem => { - iscsDevice[elem.code] = deviceFactory(deviceType.Arrow, elem); - }, this); - - zrUtil.each(data.tipBoxList || [], elem => { - iscsDevice[elem.code] = deviceFactory(deviceType.TipBox, elem); - }, this); - - zrUtil.each(data.appendageBoxList || [], elem => { - iscsDevice[elem.code] = deviceFactory(deviceType.AppendageBox, elem); - }, this); - - zrUtil.each(data.elevatorList || [], elem => { - iscsDevice[elem.code] = deviceFactory(deviceType.Elevator, elem); - }, this); - - zrUtil.each(data.keyList || [], elem => { - iscsDevice[elem.code] = deviceFactory(deviceType.Key, elem); - }, this); - - zrUtil.each(data.teleTerminalList || [], elem => { - iscsDevice[elem.code] = deviceFactory(deviceType.TeleTerminal, elem); - }, this); - - zrUtil.each(data.clockList || [], elem => { - iscsDevice[elem.code] = deviceFactory(deviceType.Clock, elem); - }); - - zrUtil.each(data.rotateTipList || [], elem => { - iscsDevice[elem.code] = deviceFactory(deviceType.RotateTip, elem); - }); } return iscsDevice; @@ -104,41 +63,8 @@ function updateIscsListByDevice(iscs, name, device) { export function updateIscsData(device) { const iscsData = store.getters['iscs/iscs']; switch (device._type) { - case deviceType.Background : - iscsData.background = device; - break; - case deviceType.SquareButton : - updateIscsListByDevice(iscsData, 'squareButtonList', device); - break; - case deviceType.Arrow : - updateIscsListByDevice(iscsData, 'arrowList', device); - break; - case deviceType.TipBox : - updateIscsListByDevice(iscsData, 'tipBoxList', device); - break; - case deviceType.CircularLamp : - updateIscsListByDevice(iscsData, 'circularLampList', device); - break; - case deviceType.AppendageBox : - updateIscsListByDevice(iscsData, 'appendageBoxList', device); - break; - case deviceType.Alarm : - updateIscsListByDevice(iscsData, 'alarmList', device); - break; - case deviceType.Elevator : - updateIscsListByDevice(iscsData, 'elevatorList', device); - break; - case deviceType.Key : - updateIscsListByDevice(iscsData, 'keyList', device); - break; - case deviceType.TeleTerminal : - updateIscsListByDevice(iscsData, 'teleTerminalList', device); - break; - case deviceType.Clock : - updateIscsListByDevice(iscsData, 'clockList', device); - break; - case deviceType.RotateTip: - updateIscsListByDevice(iscsData, 'rotateTipList', device); + case deviceType.ManualAlarmButton : + updateIscsListByDevice(iscsData, 'manualAlarmButtonList', device); break; } store.dispatch('iscs/setIscsData', iscsData); diff --git a/src/store/index.js b/src/store/index.js index 6feaf3b5f..a994e562f 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -15,6 +15,7 @@ import socket from './modules/socket'; import scriptRecord from './modules/scriptRecord'; import ibp from './modules/ibp'; import order from './modules/order'; +import iscs from './modules/iscs'; import getters from './getters'; @@ -36,7 +37,8 @@ const store = new Vuex.Store({ socket, scriptRecord, ibp, - order + order, + iscs }, getters }); diff --git a/src/views/iscsSystem/index.vue b/src/views/iscsSystem/index.vue index fc7b467a1..258d39306 100644 --- a/src/views/iscsSystem/index.vue +++ b/src/views/iscsSystem/index.vue @@ -70,18 +70,6 @@ export default { '$store.state.app.windowSizeCount': function() { this.setWindowSize(); }, - '$store.state.training.initTime': function (initTime) { - this.initTime = initTime; - if (this.$iscs) { - this.initClockTime(initTime); - } - }, - '$store.state.training.started': function (started) { - this.started = started; - if (this.$iscs) { - this.setClockStart(started); - } - }, '$store.state.socket.equipmentStatus': function (val) { if (val.length) { this.statusMessage(val); @@ -94,20 +82,10 @@ export default { this.iscsDestroy(); }, methods: { - show (deviceCode, iscsPart) { - if (!deviceCode) { - return; - } - this.stationCode = deviceCode; + show () { document.getElementById(this.iscsId).oncontextmenu = function (e) { return false; }; - let offsetX = 0; - if (iscsPart === 'left') { - offsetX = 0; - } else if (iscsPart === 'right') { - offsetX = 1920; - } this.iscsDestroy(); this.loading = true; const data = {}; @@ -115,12 +93,12 @@ export default { dom: document.getElementById(this.iscsId), config: { renderer: 'canvas', - width: this.canvasWidth, - height: this.canvasHeight + width: this.width, + height: this.height }, options: { scaleRate: 1, - offsetX: offsetX, + offsetX: 0, offsetY: 0 }, methods: { @@ -134,8 +112,6 @@ export default { } this.setIscs(data, {}); this.$store.dispatch('iscs/setIscsData', {}); - this.handleBanOpenScreenDoorStatus(); - this.initClockTime(this.initTime); window.document.oncontextmenu = function () { return false; }; @@ -143,15 +119,6 @@ export default { setIscs(data, oldData) { this.$iscs.setIscs(oldData, data); }, - handleBanOpenScreenDoorStatus() { - this.$store.state.iscs.iscs['keyList'].forEach(item => { - if (item.mean === 'Ban_Down_Open_Screen_Door') { - item.status === 'on' ? this.banDownOpenScreenDoor = false : this.banDownOpenScreenDoor = true; - } else if (item.mean === 'Ban_Up_Open_Screen_Door') { - item.status === 'on' ? this.banUpOpenScreenDoor = false : this.banUpOpenScreenDoor = true; - } - }); - }, // 点击选择事件 onSelected(em) { if (em.deviceModel.mean) { @@ -191,14 +158,6 @@ export default { this.$iscs && this.$iscs.drawIscsInit(); this.showBackButton = false; }, - // 初始化电子表时间 - initClockTime(initTime) { - this.$iscs.initClockTime(initTime); - }, - // 设置电子时钟开始或停止 - setClockStart(started) { - this.$iscs.setClockStart(started); - }, reSize() { this.$nextTick(() => { this.width = this.$store.state.config.width; diff --git a/src/views/system/iscsDesign/demonList.vue b/src/views/system/iscsDesign/demonList.vue index c672cd47c..23cfead4c 100644 --- a/src/views/system/iscsDesign/demonList.vue +++ b/src/views/system/iscsDesign/demonList.vue @@ -1,7 +1,7 @@