From 86b35a411efa9baf4c25fd27d449784e6a1bd41d Mon Sep 17 00:00:00 2001 From: ival <610568032@qq.com> Date: Mon, 15 Jul 2019 15:33:18 +0800 Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E4=BB=A3=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/jmap/config/deviceStyle.js | 13 ++++ src/jmap/shape/StationCounter.js | 88 ++++++++++++++++++++++ src/jmap/shape/StationDelayUnlock.js | 106 +++++++++++++++++++++++++++ src/jmap/shape/factory.js | 4 + 4 files changed, 211 insertions(+) create mode 100644 src/jmap/shape/StationCounter.js create mode 100644 src/jmap/shape/StationDelayUnlock.js diff --git a/src/jmap/config/deviceStyle.js b/src/jmap/config/deviceStyle.js index 7d1c334e2..0b58ea44e 100644 --- a/src/jmap/config/deviceStyle.js +++ b/src/jmap/config/deviceStyle.js @@ -226,6 +226,19 @@ fuzhouSkin[deviceType.Switch] = { switchBlockLockColor: '#E20F0A' }; +fuzhouSkin[deviceType.StationCounter] = { + /** 默认字体 大小*/ + textFontSize: 9, + + /** 默认字体 族类*/ + textFontFormat: 'consolas', + + /** 计数器字体颜色*/ + stationCounterTextColor: '#FFFFFF', + + /** 计数器边框颜色*/ + stationCounterBorderColor: '#E4EF50' +}; /** 皮肤配置*/ const deviceSkin = { '03': fuzhouSkin, diff --git a/src/jmap/shape/StationCounter.js b/src/jmap/shape/StationCounter.js new file mode 100644 index 000000000..8b3905d6a --- /dev/null +++ b/src/jmap/shape/StationCounter.js @@ -0,0 +1,88 @@ +/* +* 计数器 +*/ +import Polyline from 'zrender/src/graphic/shape/Polyline'; +import Group from 'zrender/src/container/Group'; +import Text from 'zrender/src/graphic/Text'; + +export default class StationCounter extends Group { + constructor({ _code, _type, zlevel, model, state }, style) { + super(); + this._code = _code; + this._type = _type; + this.model = model; + this.state = state; + this.style = style; + this.zlevel = zlevel; + this.z = 30; + this._create(); + } + + _create() { + const model = this.model; + const style = this.style; + const state = this.state; + this.counter = new Text({ + zlevel: this.zlevel, + z: this.z, + position: [0, 0], + style: { + x: model.position.x, + y: model.position.y, + text: model.val, + textFill: style.stationCounterTextColor, + textAlign: 'middle', + textStrokeWidth: 1, + textFont: style.textFontSize + 'px ' + style.textFontFormat + } + }); + + this.rect = this.counter.getBoundingRect(); + + this.vPadding = 0; + this.lPadding = 2; + this.table = new Polyline({ + zlevel: this.zlevel, + z: this.z, + shape: { + points: [ + [this.rect.x - this.lPadding, this.rect.y - this.vPadding], + [this.rect.x + this.lPadding + this.rect.width, this.rect.y - this.vPadding], + [this.rect.x + this.lPadding + this.rect.width, this.rect.y + this.vPadding + this.rect.height], + [this.rect.x - this.lPadding, this.rect.y + this.vPadding + this.rect.height], + [this.rect.x - this.lPadding, this.rect.y - this.vPadding]] + }, + style: { + stroke: style.stationCounterBorderColor + } + }); + + this.counterName = new Text({ + zlevel: this.zlevel, + z: this.z, + position: [0, 0], + style: { + x: model.position.x, + y: model.position.y + this.rect.width + this.vPadding + style.textFontSize + style.nameDistance, + text: model.name, + textFill: style.stationCounterTextColor, + textAlign: 'middle', + textVerticalAlign: 'top', + textStrokeWidth: 1, + textFont: style.textFontSize + 'px ' + style.textFontFormat + } + }); + this.add(this.counterName); + this.add(this.table); + this.add(this.counter); + this.setStatus(state); + } + + setStatus(state) { + } + + getShapeTipPoint() { + return null; + } +} + diff --git a/src/jmap/shape/StationDelayUnlock.js b/src/jmap/shape/StationDelayUnlock.js new file mode 100644 index 000000000..08c60f5bc --- /dev/null +++ b/src/jmap/shape/StationDelayUnlock.js @@ -0,0 +1,106 @@ +/* +* 延迟解锁 +*/ +import Rect from 'zrender/src/graphic/shape/Rect'; +import Text from 'zrender/src/graphic/Text'; +import Group from 'zrender/src/container/Group'; + +export default class StationDelayUnlock extends Group { + constructor({ _code, _type, zlevel, model, state }, style) { + super(); + this._code = _code; + this._type = _type; + this.model = model; + this.state = state; + this.style = style; + this.zlevel = zlevel; + this.z = 1; + this._create(); + } + + _create() { + const model = this.model; + const style = this.style; + const state = this.state; + this.text = new Text({ + zlevel: this.zlevel, + z: this.z + 1, + position: [0, 0], + style: { + x: model.position.x, + y: model.position.y, + text: model.deviceName + ' ', + textFill: style.stationDelayUnlockTextColor, + textStrokeWidth: 1, + textFont: model.textFont + 'px ' + style.textFontFormat, + textAlign: 'left' + } + }); + + const fontSize = parseInt(model.textFont.split(' ')[0]) || 30; + this.time = new Text({ + zlevel: this.zlevel, + z: this.z + 1, + position: [0, 0], + style: { + x: model.position.x, + y: model.position.y + fontSize + style.stationDelayUnlockDistance, + text: model.remainTime || '', + textFill: style.stationDelayUnlockTextColor, + textStrokeWidth: 1, + textFont: model.textFont + 'px ' + style.textFontFormat, + textAlign: 'left' + } + }); + this.add(this.text); + this.add(this.time); + + this.lPadding = 3; + this.vPadding = 3; + this.rect = this.getBoundingRect(); + if (this.rect.width < 35) this.rect.width = 35; + if (this.rect.height < 20) this.rect.height = 20; + + this.table = new Rect({ + zlevel: this.zlevel - 1, + z: this.z, + shape: { + x: model.position.x - this.lPadding, + y: model.position.y - this.vPadding, + width: this.rect.width + this.lPadding * 2, + height: this.rect.height + this.vPadding * 2 + }, + style: { + stroke: style.stationDelayUnlockBorderColor, + fill: style.backgroundColor + } + }); + this.add(this.table); + + this.setStatus(state); + } + + /** 延时解锁关闭*/ + delayClose() { + this.time.setStyle('text', ''); + this.text.setStyle('text', ''); + this.table.setStyle('stroke', this.style.backgroundColor); + } + + /** 延时解锁计数*/ + delayUnlock() { + this.table.setStyle('stroke', this.style.sidelineColor); + this.time.setStyle('text', '' + this.model.remainTime); + } + + setStatus(state) { + switch (state.status) { + case '01': this.delayClose(); break; // 关闭 + case '02': this.delayUnlock(); break; // 延迟解锁 + } + } + + getShapeTipPoint() { + return null; + } +} diff --git a/src/jmap/shape/factory.js b/src/jmap/shape/factory.js index 0cd10d144..a5d7af64b 100644 --- a/src/jmap/shape/factory.js +++ b/src/jmap/shape/factory.js @@ -3,6 +3,8 @@ import Link from './Link'; import Section from './Section'; import Signal from './Signal'; import Switch from './Switch'; +import StationCounter from './StationCounter'; +import StationDelayUnlock from './StationDelayUnlock'; /** 图库*/ const mapShape = {}; @@ -10,6 +12,8 @@ mapShape[deviceType.Link] = Link; mapShape[deviceType.Section] = Section; mapShape[deviceType.Signal] = Signal; mapShape[deviceType.Switch] = Switch; +mapShape[deviceType.StationCounter] = StationCounter; +mapShape[deviceType.StationDelayUnlock] = StationDelayUnlock; function shapefactory(type, device, jmap) { const style = jmap.getStyleDict();