From 0b5cc8e15d8b9d88953e371589d2e86de2b3d539 Mon Sep 17 00:00:00 2001 From: fan <18706759286@163.com> Date: Tue, 13 Apr 2021 18:09:37 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=A1=E5=8F=B7=E6=8C=89=E9=92=AE=E8=B0=83?= =?UTF-8?q?=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/jmapNew/shape/SignalButton/index.js | 121 ++++++++++++++++ src/jmapNew/shape/factory.js | 2 + src/jmapNew/shape/signalButton/index.js | 127 ---------------- src/jmapNew/utils/parser.js | 23 +-- src/store/modules/map.js | 7 + .../newMap/newMapdraft/mapoperate/index.vue | 7 +- .../newMapdraft/mapoperate/signalButton.vue | 135 ++++++++++++------ 7 files changed, 241 insertions(+), 181 deletions(-) create mode 100644 src/jmapNew/shape/SignalButton/index.js delete mode 100644 src/jmapNew/shape/signalButton/index.js diff --git a/src/jmapNew/shape/SignalButton/index.js b/src/jmapNew/shape/SignalButton/index.js new file mode 100644 index 000000000..52d3afb48 --- /dev/null +++ b/src/jmapNew/shape/SignalButton/index.js @@ -0,0 +1,121 @@ +import Group from 'zrender/src/container/Group'; +import Rect from 'zrender/src/graphic/shape/Rect'; +import Line from 'zrender/src/graphic/shape/Line'; +import Text from 'zrender/src/graphic/Text'; + +export default class SignalButton extends Group { + constructor(model, {style}) { + super(); + this._code = model.code; + this._type = model._type; + this.zlevel = model.zlevel; + this.z = 0; + this.model = model; + this.style = style.Line; + this.isShowShape = true; + this.create(); + this.setState(model); + this.setShowMode(); + } + + create() { + const model = this.model; + let fillColor = '#008000'; + if (model.type === 'GUIDE') { + fillColor = '#5050E1'; + } else if (model.type === 'FLEXIBLE' || model.type === 'SHUNT_TERMINAL') { + fillColor = '#808080'; + } + this.rectButton = new Rect({ + zlevel: this.zlevel, + z: this.z, + silent: true, + shape: { + x: model.position.x, + y: model.position.y, + width: 14, + height: 14 + }, + style: { + lineDash: null, + stroke: '#808080', + fill: fillColor + } + }); + this.leftLine = new Line({ + zlevel: this.zlevel, + z: this.z + 1, + shape: { + x1: model.position.x, + y1: model.position.y, + x2: model.position.x + 14, + y2: model.position.y + 14 + }, + style: { + lineWidth: 2, + stroke: '#ff0000' + } + }); + this.add(this.leftLine); + this.leftLine.hide(); + this.rightLine = new Line({ + zlevel: this.zlevel, + z: this.z + 1, + shape: { + x1: model.position.x + 14, + y1: model.position.y, + x2: model.position.x, + y2: model.position.y + 14 + }, + style: { + lineWidth: 2, + stroke: '#ff0000' + } + }); + this.add(this.rightLine); + this.rightLine.hide(); + this.buttonText = new Text({ + zlevel: this.zlevel, + z: this.z, + style: { + x: model.position.x + 7, + y: model.position.y - 20, + fontWeight: '400', + fontSize: 12, + fontFamily: '', + text: model.name, + textFill: '#C0C0C0', + textAlign: 'middle', + textVerticalAlign: 'top' + } + }); + this.add(this.rectButton); + this.add(this.buttonText); + } + startAnimate() { + let color = '#008000'; + if (this.model.type === 'TRAIN_TERMINAL') { + color = '#008000'; + } else if (this.model.type === 'FLEXIBLE' || this.model.type === 'SHUNT_TERMINAL') { + color = '#808080'; + } + this.rectButton && this.rectButton.animateStyle(true) + .when(0, { fill: '#000' }) + .when(1000, { fill: color }) + .when(2000, { fill: '#000' }) + .start(); + } + stopAnimation() { + this.rectButton && this.rectButton.stopAnimation(true); + } + setState(model) { + if (!this.isShowShape) return; + } + // 设置显示模式 + setShowMode() { + } + setShowStation(stationCode) { + } + getAnchorPoint() { + } +} diff --git a/src/jmapNew/shape/factory.js b/src/jmapNew/shape/factory.js index 0b9b8c075..f3aba1679 100644 --- a/src/jmapNew/shape/factory.js +++ b/src/jmapNew/shape/factory.js @@ -30,6 +30,7 @@ import OverAp from './OverAp/index.js'; import FloodGate from './FloodGate/index'; import DirectionRod from './DirectionRod/index'; import Responder from './Responder/index'; +import SignalButton from './SignalButton/index'; /** 图库*/ const mapShape = {}; @@ -81,6 +82,7 @@ mapShape[deviceType.OverAp] = OverAp; mapShape[deviceType.FloodGate] = FloodGate; mapShape[deviceType.DirectionRod] = DirectionRod; mapShape[deviceType.Responder] = Responder; +mapShape[deviceType.SignalButton] = SignalButton; function shapefactory(device, jmap) { const type = device._type; diff --git a/src/jmapNew/shape/signalButton/index.js b/src/jmapNew/shape/signalButton/index.js deleted file mode 100644 index 559d72e92..000000000 --- a/src/jmapNew/shape/signalButton/index.js +++ /dev/null @@ -1,127 +0,0 @@ -import Group from 'zrender/src/container/Group'; -import Polyline from 'zrender/src/graphic/shape/Polyline'; - -export default class Line2 extends Group { - constructor(model, {style}) { - super(); - this._code = model.code; - this._type = model._type; - this.zlevel = model.zlevel; - this.z = 0; - this.model = model; - this.style = style.Line; - this.isShowShape = true; - this.create(); - this.setState(model); - this.setShowMode(); - } - - create() { - const model = this.model; - if (model && model.points.length > 1) { - const points = []; - const vicePoints = []; - const modelPoints = model.points; - const length = modelPoints.length; - const path = window.location.href; - if (model.type === '03' && !path.includes('/map/draw')) { - for (let i = 0; i < length; i++) { - points.push([modelPoints[i].x + 10, modelPoints[i].y]); - } - this.segment = new Polyline({ - zlevel: this.zlevel, - z:this.z, - shape: { - points:points - }, - style: { - lineWidth: model.width, - stroke: model.lineColor || this.style.lineColor - } - }); - this.add(this.segment); - for (let i = 0; i < length; i++) { - vicePoints.push([modelPoints[i].x - model.offsetX, modelPoints[i].y + model.offsetY]); - } - this.viceSegment = new Polyline({ - zlevel: this.zlevel, - z:this.z, - shape: { - points:vicePoints - }, - style: { - lineWidth: model.width, - stroke: model.lineColor || this.style.lineColor - } - }); - this.add(this.viceSegment); - } else { - for (let i = 0; i < length; i++) { - points.push([modelPoints[i].x, modelPoints[i].y]); - } - this.segment = new Polyline({ - zlevel: this.zlevel, - z:this.z, - shape: { - points:points - }, - style: { - lineWidth: model.width, - stroke: model.lineColor || this.style.lineColor - } - }); - this.add(this.segment); - } - } - } - - setLineType(type) { - switch (type) { - case '01': break; - case '02': - this.segment && this.segment.setStyle('lineDash', this.style.lineDash || [4]); - break; - case '03': - this.segment && this.segment.setStyle('lineDash', this.style.lineDash || [4]); - this.viceSegment && this.viceSegment.setStyle('lineDash', this.style.lineDash || [4]); - break; - } - } - - setState(model) { - if (!this.isShowShape) return; - this.setLineType(model.type); - } - // 设置显示模式 - setShowMode() { - const showMode = this.model.showMode; - const showConditions = this.model.showConditions; - if (!showConditions || showConditions === '01' || showMode === showConditions) { - this.segment && this.segment.show(); - this.viceSegment && this.viceSegment.show(); - } else { - this.segment && this.segment.hide(); - this.viceSegment && this.viceSegment.hide(); - } - } - setShowStation(stationCode) { - if (!stationCode || this.model.stationCode === stationCode) { - this.segment && this.segment.show(); - this.viceSegment && this.viceSegment.show(); - this.isShowShape = true; - this.setState(this.model); - } else { - this.segment && this.segment.hide(); - this.viceSegment && this.viceSegment.hide(); - this.isShowShape = false; - } - } - getAnchorPoint() { - if (this.segment) { - const rect = this.segment.getBoundingRect(); - return {x:rect.x, y:rect.y}; - } else { - return {x:0, y:0}; - } - } -} diff --git a/src/jmapNew/utils/parser.js b/src/jmapNew/utils/parser.js index 890692fc3..da473db1b 100644 --- a/src/jmapNew/utils/parser.js +++ b/src/jmapNew/utils/parser.js @@ -32,7 +32,7 @@ export function createBoundingRect(view) { } export function calculateDCenter(viewRect, offsetX) { - var dx = offsetX - viewRect.width/2 - viewRect.x; + var dx = offsetX - viewRect.width / 2 - viewRect.x; var dy = 0; return { dx: dx, dy: dy }; } @@ -264,6 +264,10 @@ export function parser(data, skinCode, showConfig) { mapDevice[elem.code] = createDevice(deviceType.DirectionRod, elem, propConvert, showConfig); }, this); + zrUtil.each(data.signalButtonList || [], elem=> { + mapDevice[elem.code] = createDevice(deviceType.SignalButton, elem, propConvert, showConfig); + }); + zrUtil.each(data.responderList || [], elem => { mapDevice[elem.code] = createDevice(deviceType.Responder, elem, propConvert, showConfig); }, this); @@ -283,14 +287,14 @@ export function parser(data, skinCode, showConfig) { mapDevice[elem.code] = createDevice(deviceType.OverAp, elem, propConvert, showConfig); }); - // 二次处理 - zrUtil.each(data.signalList || [], elem => { - const actual = mapDevice[elem.linkSignalCode]; - if (actual && elem.type == 'TRANSMISSION') { - // 信号机别名列表 - if (!actual.aliasCodes) { actual.aliasCodes = []; } - actual.aliasCodes.push(elem.code); - } + // 二次处理 + zrUtil.each(data.signalList || [], elem => { + const actual = mapDevice[elem.linkSignalCode]; + if (actual && elem.type == 'TRANSMISSION') { + // 信号机别名列表 + if (!actual.aliasCodes) { actual.aliasCodes = []; } + actual.aliasCodes.push(elem.code); + } }, this); } @@ -373,6 +377,7 @@ export function updateMapData(state, model) { case deviceType.FloodGate: updateForList(model, state, 'floodGateList'); break; case deviceType.DirectionRod: updateForList(model, state, 'directionRodList'); break; case deviceType.Responder: updateForList(model, state, 'responderList'); break; + case deviceType.SignalButton: updateForList(model, state, 'signalButtonList'); break; } } } diff --git a/src/store/modules/map.js b/src/store/modules/map.js index 5236e1ba3..25b4e6334 100644 --- a/src/store/modules/map.js +++ b/src/store/modules/map.js @@ -538,6 +538,13 @@ const map = { return []; } }, + signalButtonList: (state) => { + if (state.map) { + return state.map.signalButtonList || []; + } else { + return []; + } + }, responderList: (state) => { if (state.map) { return state.map.responderList || []; diff --git a/src/views/newMap/newMapdraft/mapoperate/index.vue b/src/views/newMap/newMapdraft/mapoperate/index.vue index 0f7beb327..caf36b77c 100644 --- a/src/views/newMap/newMapdraft/mapoperate/index.vue +++ b/src/views/newMap/newMapdraft/mapoperate/index.vue @@ -67,6 +67,7 @@ import Arrow from './arrow'; import SplitScreen from './splitScreen'; import FloodGate from './floodGate'; import DirectionRod from './directionRod'; +import SignalButton from './signalButton'; import { EventBus } from '@/scripts/event-bus'; export default { @@ -97,7 +98,8 @@ export default { Arrow, SplitScreen, FloodGate, - DirectionRod + DirectionRod, + SignalButton }, props: { selected: { @@ -138,7 +140,8 @@ export default { {label: '站间分隔', name:'SplitStation', menus:SplitStation}, {label: '箭头', name:'Arrow', menus:Arrow}, {label: '防淹门', name: 'FloodGate', menus: FloodGate}, - {label: '方向杆', name: 'DirectionRod', menus: DirectionRod} + {label: '方向杆', name: 'DirectionRod', menus: DirectionRod}, + {label: '信号按钮', name: 'SignalButton', menus: SignalButton } ], selectDevice:'', enabledTab: 'Section', diff --git a/src/views/newMap/newMapdraft/mapoperate/signalButton.vue b/src/views/newMap/newMapdraft/mapoperate/signalButton.vue index dcb0b381b..018a8c8ae 100644 --- a/src/views/newMap/newMapdraft/mapoperate/signalButton.vue +++ b/src/views/newMap/newMapdraft/mapoperate/signalButton.vue @@ -24,8 +24,6 @@