Merge branch 'master' of https://git.qcloud.com/joylink/jl-nclient

# Conflicts:
#	src/jmap/shape/StationControl.js
#	src/jmap/shape/station.js

src/jmap/config/deviceStyle.js

@@ -284,6 +284,17 @@ fuzhouSkin[deviceType.LimitControl] = {
 	borderContextBackgroundColor: '#00FFFF',
 	limitControlColor: 4
 };
+fuzhouSkin[deviceType.ZcControl] = {
+	nameDistance: 2,
+	zcControlmodeR: 4,
+	stationControlTextSize: 10,
+	textFontFormat: 'consolas',
+	textShadowColor: '#FFFF00',
+	borderColor: '#fff',
+	transparentColor: 'rgba(0,0,0,0)',
+	borderContextBackgroundColor: '#00FFFF',
+	zcControlGrayColor: '#00FF00'
+};
 
 fuzhouSkin[deviceType.StationCounter] = {
 	/** 默认字体 大小*/

src/jmap/shape/ZcControl.js

@@ -0,0 +1,167 @@
+/*
+*	ZC区域控制模式
+*/
+import Arc from 'zrender/src/graphic/shape/Arc';
+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 ZcControl extends Group {
+	constructor({ _code, _type, zlevel, model, state }, style) {
+		super({name: _code});
+		this.z = 20;
+		this._code = _code;
+		this._type = _type;
+		this.zlevel = zlevel;
+		this.model = model;
+		this.state = state;
+		this.style = style;
+		this._create(model);
+		console.log('zc');
+		this.on('mouseout', this.mouseleave);
+		this.on('mouseover', this.mouseenter);
+	}
+
+	_create(model) {
+		this.control = new Arc({
+			_subType: 'Control',
+			zlevel: this.zlevel,
+			z: this.z,
+			shape: {
+				cx: model.position.x,
+				cy: model.position.y,
+				r: this.style.zcControlmodeR
+			},
+			style: {
+				lineWidth: 0,
+				fill: this.style.zcControlGrayColor
+			}
+		});
+
+		this.text = new Text({
+			_subType: 'Text',
+			zlevel: this.zlevel,
+			z: this.z,
+			position: [0, 0],
+			style: {
+				x: model.position.x,
+				y: model.position.y + this.style.zcControlmodeR + this.style.nameDistance,
+				text: model.name,
+				textFill: '#fff',
+				textAlign: 'middle',
+				textVerticalAlign: 'top',
+				textFont: this.style.stationControlTextSize + 'px ' + this.style.textFontFormat
+			}
+		});
+
+		if (this.model.visible) {
+			this.add(this.control);
+			this.add(this.text);
+		}
+
+		this.textShadow = new Text({
+			zlevel: this.zlevel,
+			z: this.z + 1,
+			position: [4, -4],
+			silent: true,
+			style: {
+				x: model.position.x,
+				y: model.position.y + this.style.zcControlmodeR + this.style.nameDistance,
+				text: model.name,
+				textFill: this.style.textShadowColor, // 黄色
+				textAlign: 'middle',
+				textVerticalAlign: 'top',
+				textFont: 'bold ' + (this.style.stationControlTextSize + 1) + 'px ' + this.style.textFontFormat
+			}
+		});
+		this.controlBorder = new Rect({
+			zlevel: model.zlevel,
+			z: this.z - 1,
+			silent: true,
+			shape: this.control.getBoundingRect(),
+			style: {
+				lineDash: [3, 3],
+				stroke: this.style.borderColor,
+				fill: this.style.transparentColor
+			}
+		});
+
+		this.textBorder = new Rect({
+			zlevel: model.zlevel,
+			z: this.z - 1,
+			silent: true,
+			shape: this.text.getBoundingRect(),
+			style: {
+				lineDash: [3, 3],
+				stroke: this.style.borderColor,
+				fill: this.style.borderContextBackgroundColor
+			}
+		});
+
+		this.add(this.control);
+		this.add(this.text);
+		this.add(this.textShadow);
+		this.add(this.textBorder);
+		this.add(this.controlBorder);
+		this.setState(this.state);
+		this.mouseStatusRecover();
+	}
+
+	setControlColor(color) {
+		if (color) {
+			this.control.setStyle('fill', color);
+		}
+	}
+
+	// 设置状态
+	setState(state) {
+
+	}
+
+	getShapeTipPoint() {
+		if (this.control) {
+			var distance = 2;
+			var rect = this.control.getBoundingRect();
+			return {
+				x: rect.x + rect.width / 2,
+				y: rect.y - distance
+			};
+		}
+		return null;
+	}
+
+	mouseStatusVisible(subType) {
+		if (subType == 'Text') {
+			this.textShadow.show();
+		}
+
+		if (subType == 'Control') {
+			this.textBorder.show();
+			this.controlBorder.show();
+			this.text.setStyle({ textFill: '#000' });
+			this.control.setStyle({ fill: this.style.borderContextBackgroundColor });
+		}
+	}
+
+	mouseStatusRecover() {
+		this.textShadow.hide();
+		this.textBorder.hide();
+		this.controlBorder.hide();
+		this.text.setStyle({ textFill: '#fff' });
+		this.control.setStyle({ fill: this.style.zcControlGrayColor });
+		this.setState(this.state);
+	}
+
+	mouseenter(e) {
+		if (e.target._subType) {
+			this.mouseStatusRecover();
+			this.mouseStatusVisible(e.target._subType);
+		}
+	}
+
+	mouseleave(e) {
+		if (e.target._subType) {
+			this.mouseStatusRecover();
+		}
+	}
+}

src/jmap/shape/factory.js

@@ -1,6 +1,6 @@
 import deviceType from '../config/deviceType';
 import Link from './Link';
-import Section from './Section';
+import Section from './section';
 import Signal from './Signal';
 import Station from './station';
 import StationControl from './StationControl';
@@ -8,6 +8,7 @@ import ImageControl from './ImageControl';
 import LcControl from './lcControl';
 import LimitControl from './limitControl';
 import Switch from './Switch';
+import ZcControl from './ZcControl';
 import StationCounter from './StationCounter';
 import StationDelayUnlock from './StationDelayUnlock';
 
@@ -22,6 +23,7 @@ mapShape[deviceType.ImageControl] = ImageControl;
 mapShape[deviceType.LcControl] = LcControl;
 mapShape[deviceType.LimitControl] = LimitControl;
 mapShape[deviceType.Switch] = Switch;
+mapShape[deviceType.ZcControl] = ZcControl;
 mapShape[deviceType.StationCounter] = StationCounter;
 mapShape[deviceType.StationDelayUnlock] = StationDelayUnlock;
 

src/jmap/utils/parser.js

@@ -58,6 +58,7 @@ export function parser(data, jmap) {
 		});
 
 		zrUtil.each(data.zcList || [], elem => {
+			console.log(elem);
 			mapDevice[elem.code] = deviceFactory(deviceType.ZcControl, defaultStateDict, elem);
 		});