From 34a20d3475dda9b00f6d3f377f534590da09de41 Mon Sep 17 00:00:00 2001 From: joylink_cuiweidong <364937672@qq.com> Date: Thu, 29 Apr 2021 10:06:12 +0800 Subject: [PATCH] =?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/animateHandle.js | 52 ++++----- src/iscs_new/map.js | 16 +-- src/iscs_new/stateHandle.js | 103 ++++++++--------- src/iscs_new/transformHandle.js | 1 + src/jmapNew/shape/Signal/index.js | 16 +-- src/views/iscs_new/iscsPreview/index.vue | 104 +++++++++++------- src/views/iscs_new/iscsPreview/iscsCanvas.vue | 2 +- 7 files changed, 159 insertions(+), 135 deletions(-) diff --git a/src/iscs_new/animateHandle.js b/src/iscs_new/animateHandle.js index ebc41a9c7..02dff9dc9 100644 --- a/src/iscs_new/animateHandle.js +++ b/src/iscs_new/animateHandle.js @@ -7,13 +7,13 @@ function traverse(group, map) { } else { map[el.name] = el; } - }) + }); return map; } class Animate { constructor(state) { - this._state = {...state} + this._state = {...state}; this._sum = 0; this._count = 0; this._first = true; @@ -22,14 +22,14 @@ class Animate { run(interval) { this._sum = this._sum + interval; - const total = this._state.time + (this._first? this._state.delay: 0) + const total = this._state.time + (this._first ? this._state.delay : 0); if (this._sum > total) { - this.animate(this) + this.animate(this); this._count = this._count + 1; this._sum = 0; this._first = false; } -} + } isLoop() { return this._state.loop || this._count < this._state.frameList.length; @@ -47,42 +47,42 @@ class Animate { return this._state.code == code; } - getIndex(index=0) { - return index? index: this._count%this._state.frameList.length; + getIndex(index = 0) { + return index || this._count % this._state.frameList.length; } - getFrame(index=0) { + getFrame(index = 0) { return this._state.frameList[index]; } animate() { const shape = this._state.shape; - const mapShape = this._state.mapShape; + const mapShape = this._state.mapShape; const index = this.getIndex(); const frame = this.getFrame(index); - if(shape && mapShape && frame) { + if (shape && mapShape && frame) { const mapView = traverse(shape, {}); - if (this.isNeedDefault()) { - Object.keys(mapShape).forEach(name => { - const state = mapShape[name] - const view = mapView[name]; - if (view) { - shape.setInvisible(shape.model.base.hide); - view.attr({shape: state.default.shape, style: state.default.style}); - view.dirty(); - } - }) - } + if (this.isNeedDefault()) { + Object.keys(mapShape).forEach(name => { + const state = mapShape[name]; + const view = mapView[name]; + if (view) { + shape.setInvisible(shape.model.base.hide); + view.attr({shape: state.default.shape, style: state.default.style}); + view.dirty(); + } + }); + } Object.keys(frame).forEach(name => { - const view = mapView[name]; + const view = mapView[name]; const model = frame[name]; if (view && model) { - shape.setInvisible(model.hide); + shape.setInvisible(model.hide); view.attr({shape: model.shape, style: model.style}); view.dirty(); } - }) + }); } } @@ -104,7 +104,7 @@ class AnimateHandle { this._animates.push(animate); } } - } + } animate(state) { const animate = this._animates.find(el => el.isEqual(state.code)); @@ -115,4 +115,4 @@ class AnimateHandle { } } -export default AnimateHandle +export default AnimateHandle; diff --git a/src/iscs_new/map.js b/src/iscs_new/map.js index 474928c31..92de08960 100644 --- a/src/iscs_new/map.js +++ b/src/iscs_new/map.js @@ -197,14 +197,14 @@ class JMap { this.$shapeFactory.addShape(oldShape); this.$painter.add(oldShape); break; - case orders.changeStatus: - // model - this.$painter.update(this.$stateHandle.update(this.$shapeFactory, [])); - debugger; - break; - case orders.ResetStatus: - debugger; - break; + // case orders.changeStatus: + // // model + // this.$painter.update(this.$stateHandle.update(this.$shapeFactory, [])); + // debugger; + // break; + // case orders.ResetStatus: + // debugger; + // break; } } }); diff --git a/src/iscs_new/stateHandle.js b/src/iscs_new/stateHandle.js index c22c2b5cd..9fe4398c6 100644 --- a/src/iscs_new/stateHandle.js +++ b/src/iscs_new/stateHandle.js @@ -1,60 +1,63 @@ -import * as utils from './utils/utils'; +import * as utils from './utils/utils'; export default class StateHandle { - constructor(map) { - this.$map = map; - } + constructor(map) { + this.$map = map; + } - parse(shapeFactory, state) { - const mapTemplate = shapeFactory.getMapTemplate(); - const template = mapTemplate[state.type]; - const templateState = template.mapState[state.status]||{}; - const frameList = templateState.frameList||[]; + parse(shapeFactory, state) { + const mapTemplate = shapeFactory.getMapTemplate(); + const template = mapTemplate[state.type]; + const templateState = template.mapState[state.status] || {}; + // const frameList = templateState.frameList||[]; + const frameList = Object.values(templateState.covertStatusList) || []; - // 增加第一帧初始数据 - // if (templateState && - // templateState.needDefault) { - // templateState.frameList.unshift( - // Object.entries(template.mapShape).map(el => { - // return { name: el[0], ...el[1][utils.defStatus]}; - // }) - // ); - // } + // 增加第一帧初始数据 + // if (templateState && + // templateState.needDefault) { + // templateState.frameList.unshift( + // Object.entries(template.mapShape).map(el => { + // return { name: el[0], ...el[1][utils.defStatus]}; + // }) + // ); + // } - return { - ...state, - ...templateState, - mapShape: template.mapShape, - shape: shapeFactory.getShapeByCode(state.code), + return { + ...state, + ...templateState, + mapShape: template.mapShape, + shape: shapeFactory.getShapeByCode(state.code), frameList: frameList.map(frame => { - return Object.fromEntries(frame.map(el => { - const mapState = template.mapShape[el.name]||{}; - const state = mapState[el.status]||{}; - return [el.name, { - ...el, - ...state - }] - })); - }) - } - } + // return Object.fromEntries(frame.map(el => { + return Object.fromEntries(frame.frameList.map((el, index) => { + const mapState = template.mapShape[el.name] || {}; + const state = mapState[el.status] || {}; + return [el.name || index, { + loop:frame.loop, + ...el, + ...state + }]; + })); + }) + }; + } - update(shapeFactory, states=[]) { - return states.reduce((list,state) => { - return [ - ...list, - this.parse(shapeFactory, state), // 测试只有自身 - // this.updateState(this.parse(shapeFactory, state)), // 处理自身 - // this.updateState(this.parse(shapeFactory, state)) // 处理依赖 - ]; - }, []); - } + update(shapeFactory, states = []) { + return states.reduce((list, state) => { + return [ + ...list, + this.parse(shapeFactory, state) // 测试只有自身 + // this.updateState(this.parse(shapeFactory, state)), // 处理自身 + // this.updateState(this.parse(shapeFactory, state)) // 处理依赖 + ]; + }, []); + } - updateState(state={}) { - return {} - } + updateState(state = {}) { + return {}; + } - updateDepState(state={}) { - return {} - } + updateDepState(state = {}) { + return {}; + } } diff --git a/src/iscs_new/transformHandle.js b/src/iscs_new/transformHandle.js index d3c413385..dcfe3fa59 100644 --- a/src/iscs_new/transformHandle.js +++ b/src/iscs_new/transformHandle.js @@ -45,6 +45,7 @@ export default class TransformHandle { // 遍历view执行回调 traverse(cb, context) { + debugger this.traverseLayer(layer => { layer.eachChild(shape => { cb.call(context, shape); diff --git a/src/jmapNew/shape/Signal/index.js b/src/jmapNew/shape/Signal/index.js index 1dd4f0eda..f1c9578b3 100644 --- a/src/jmapNew/shape/Signal/index.js +++ b/src/jmapNew/shape/Signal/index.js @@ -27,7 +27,7 @@ class Signal extends Group { this._code = model.code; this._type = model._type; this.model = model; - this.mapDevice = mapDevice; + this.mapDevice = mapDevice; this.style = style; this.count = parseInt(model.lampPositionType); this.lamps = new Array(this.count); @@ -322,12 +322,12 @@ class Signal extends Group { const drict = this.model.right ? 1 : -1; // 朝向 左:右 const posit = this.model.positionType == '01' ? -1 : 1; // 位置 上:下 // 信号机名称 - const actual = this.mapDevice[model.linkSignalCode]; + const actual = this.mapDevice[model.linkSignalCode]; const sigNameX = model.position.x + model.positionPoint.x + drict * 0.433 * style.Signal.transmission.sideLength + model.namePosition.x; const sigNameY = model.position.y + model.positionPoint.y + posit * (style.Signal.distance + style.Section.line.width + style.Signal.lamp.radiusR * 2 + model.namePosition.y + style.Signal.text.distance); const textAlign = style.Signal.text.isAlignCenter ? 'middle' : this.model.right ? 'left' : 'right'; const textVerticalAlign = posit == 1 ? 'top' : 'bottom'; - const fillColor = actual.virtual? style.Signal.transmission.fillColorVirtual: style.Signal.transmission.fillColor; + const fillColor = actual.virtual ? style.Signal.transmission.fillColorVirtual : style.Signal.transmission.fillColor; this.sigName = new ESigName({ zlevel: this.zlevel, z: this.z, @@ -511,12 +511,12 @@ class Signal extends Group { } if (this.style.Signal.lamp.guidName !== 'singleRY') { - if (this.lamps.length == 1) { + if (this.lamps.length == 1) { this.lamps[0] && this.lamps[0].setColor(this.style.Signal.lamp.redColor); - } else { + } else { this.lamps[0] && this.lamps[0].setColor(this.style.Signal.lamp.redColor); this.lamps[1] && this.lamps[1].setColor(this.style.Signal.lamp.yellowColor); - } + } } } @@ -859,8 +859,8 @@ class Signal extends Group { default: var drict = this.model.right ? 1 : -1; // 朝向 右:左 var offsetY = this.model.positionType == '01' ? this.style.Signal.text.fontSize : 0; // 位置 上:下 - var shape = this.model.type == 'TRANSMISSION'? this.transmission: this.sigPost; - rect = shape.getBoundingRect().clone(); + var shape = this.model.type == 'TRANSMISSION' ? this.transmission : this.sigPost; + rect = shape.getBoundingRect().clone(); rect.x = rect.x + drict * this.style.Signal.post.standardVerticalWidth; rect.y = rect.y - offsetY; break; diff --git a/src/views/iscs_new/iscsPreview/index.vue b/src/views/iscs_new/iscsPreview/index.vue index 574311ea8..faa744aef 100644 --- a/src/views/iscs_new/iscsPreview/index.vue +++ b/src/views/iscs_new/iscsPreview/index.vue @@ -55,7 +55,8 @@ export default { selected: null, statusTab:'', stateList:[], - elementList:[] + elementList:[], + type:'' }; }, mounted() { @@ -64,52 +65,71 @@ export default { onSelectTab() { }, - setData(data ) { + setData(data) { this.stateList = data.stateList; this.elementList = utils.deepClone(data.shapeList); + this.type = data.type; }, previewStatus(data) { // this.resetDefaultStatus(); - const that = this; - const list = Object.values(data.covertStatusList); - list.forEach(each=>{ - if (each.loop) { - // ChangeStatus - } else { - const frameList = each.frameList; - // this.$iscs.update([ - // { status: 's1', code: '100', type: 'Device' }, - // { status: 's2', code: '101', type: 'Device' } - // ]); - frameList.forEach(frame=>{ - const element = that.elementList.find(ele=>{ return ele.name == frame.name; }); - if (element) { - const elementStyle = element.stateList.find(state=>{ return state.status == frame.status; }); - if (elementStyle) { - const model = utils.deepClone(element); - const style = elementStyle.style || {}; - // model.changeStyle = - if (style && JSON.stringify(style) != '{}') { - const keys = Object.keys(style); - keys.forEach(eachKey=>{ - model.style[eachKey] = style[eachKey]; - }); - } - const shape = elementStyle.shape || {}; - if (shape && JSON.stringify(shape) != '{}') { - const keys = Object.keys(shape); - keys.forEach(eachShape=>{ - model.shape[eachShape] = style[eachShape]; - }); - } - // { status: 's1', code: '100', type: 'Device' }, - this.$refs.iscsCanvas.doAction([{model, action: {shapeType: shapeType.Element, order: orders.Update}}]); - // this.$refs.iscsCanvas.doAction([{model, action: {shapeType: shapeType.Element, order: orders.ChangeStatus}}]); - } - } - }); - } - }); + // covertStatusList: Object + // description: "关闭" + // id: 1 + // needDefault: true + // status: "close" + // weight: 1 + this.$iscs.update([ + { status: data.status, code: '100', type: this.type } + ]); + // const that = this; + // const list = Object.values(data.covertStatusList); + // list.forEach(each=>{ + // debugger; + // if (each.loop) { + // // ChangeStatus + // } else { + // const frameList = each.frameList; + // // <模型类型> + // // this.$iscs.update([ + // // { status: 's1', code: '100', type: 'Device' }, + // // { status: 's2', code: '101', type: 'Device' } + // // ]); + // frameList.forEach(frame=>{ + // const element = that.elementList.find(ele=>{ return ele.name == frame.name; }); + // if (element) { + // const elementStyle = element.stateList.find(state=>{ return state.status == frame.status; }); + // if (elementStyle) { + // const model = utils.deepClone(element); + + // // this.$iscs.update([ + // // { status: 's1', code: '100', type: 'Device' }, + // // { status: 's2', code: '101', type: 'Device' } + // // ]); + + // // model.frameList = []; + // // const style = elementStyle.style || {}; + // // // model.changeStyle = + // // if (style && JSON.stringify(style) != '{}') { + // // const keys = Object.keys(style); + // // keys.forEach(eachKey=>{ + // // model.style[eachKey] = style[eachKey]; + // // }); + // // } + // // const shape = elementStyle.shape || {}; + // // if (shape && JSON.stringify(shape) != '{}') { + // // const keys = Object.keys(shape); + // // keys.forEach(eachShape=>{ + // // model.shape[eachShape] = style[eachShape]; + // // }); + // // } + // // { status: 's1', code: '100', type: 'Device' }, + // // this.$refs.iscsCanvas.doAction([{model, action: {shapeType: shapeType.Element, order: orders.Update}}]); + // this.$refs.iscsCanvas.doAction([{model, action: {shapeType: shapeType.Element, order: orders.ChangeStatus}}]); + // } + // } + // }); + // } + // }); }, resetDefaultStatus() { this.elementList.forEach(element=>{ diff --git a/src/views/iscs_new/iscsPreview/iscsCanvas.vue b/src/views/iscs_new/iscsPreview/iscsCanvas.vue index 23b9bb0c0..295eb4434 100644 --- a/src/views/iscs_new/iscsPreview/iscsCanvas.vue +++ b/src/views/iscs_new/iscsPreview/iscsCanvas.vue @@ -101,7 +101,7 @@ export default { if (this.$route.query.id) { setTimeout(_ => { Idb.select('composeTemplateList', this.$route.query.id).then(resp => { - this.$iscs.setMap([], { + this.$iscs.setMap([resp], { elementList: resp.shapeList || [], composeList: resp.composeList || [] }, option);