diff --git a/src/jmap/config/deviceStyle.js b/src/jmap/config/deviceStyle.js index 87bc2ca88..b96962ed2 100644 --- a/src/jmap/config/deviceStyle.js +++ b/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] = { /** 默认字体 大小*/ diff --git a/src/jmap/shape/ZcControl.js b/src/jmap/shape/ZcControl.js new file mode 100644 index 000000000..3ef9de8e1 --- /dev/null +++ b/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(); + } + } +} diff --git a/src/jmap/shape/factory.js b/src/jmap/shape/factory.js index 2ed0acba0..59893aa07 100644 --- a/src/jmap/shape/factory.js +++ b/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; diff --git a/src/jmap/utils/parser.js b/src/jmap/utils/parser.js index 81d079348..9698d81dc 100644 --- a/src/jmap/utils/parser.js +++ b/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); });