增加代码

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,

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;
+	}
+}
+

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;
+	}
+}

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();