From 8c261bb3a65da01c8fa4096bedceea8fa820981a Mon Sep 17 00:00:00 2001 From: lVAL Date: Tue, 12 Jan 2021 11:00:16 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=BA=94=E7=AD=94=E5=99=A8?= =?UTF-8?q?=20=E7=8A=B6=E6=80=81=E5=A4=84=E7=90=86=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/jmapNew/config/skinCode/nanjing_02.js | 13 +++- src/jmapNew/shape/Responder/index.js | 75 ++++++++++++++++++----- src/jmapNew/utils/parser.js | 1 + src/store/modules/map.js | 2 +- 4 files changed, 72 insertions(+), 19 deletions(-) diff --git a/src/jmapNew/config/skinCode/nanjing_02.js b/src/jmapNew/config/skinCode/nanjing_02.js index 2eaca0deb..fed2cefc6 100644 --- a/src/jmapNew/config/skinCode/nanjing_02.js +++ b/src/jmapNew/config/skinCode/nanjing_02.js @@ -831,9 +831,18 @@ class SkinCode extends defaultStyle { this[deviceType.Responder] = { block: { + mapStyle: { + FB: { fill: '#fff' }, + VB: { fill: '#666' }, + IB: { fill: '#666' } + } }, - text: { - } + delta: { + fill: '#fff' + }, + text: { + textFill: '#fff' + } }; } diff --git a/src/jmapNew/shape/Responder/index.js b/src/jmapNew/shape/Responder/index.js index 9148b73de..bebccf41e 100644 --- a/src/jmapNew/shape/Responder/index.js +++ b/src/jmapNew/shape/Responder/index.js @@ -4,7 +4,7 @@ import Group from 'zrender/src/container/Group'; import Rect from 'zrender/src/graphic/shape/Rect'; import Text from 'zrender/src/graphic/Text'; - +import Polygon from 'zrender/src/graphic/shape/Polygon'; export default class Responder extends Group { constructor(model, style) { @@ -17,20 +17,24 @@ export default class Responder extends Group { this.isShowShape = true; this.z = model.zIndex || 1; this.create(); + this.setState(model); } create() { const model = this.model; + const responderStyle = this.style.Responder; const blockX = model.position.x; const blockY = model.position.y; - const blockWidth = this.style.Responder.block.width || 5; - const blockHeight = this.style.Responder.block.height || 12; - const blockStroke = this.style.Responder.block.stroke || '#000'; - const blockFill = this.style.Responder.block.fill || '#fff'; + const blockWidth = responderStyle.block.width || 5; + const blockHeight = responderStyle.block.height || 12; + const blockStroke = responderStyle.block.stroke || '#000'; + const blockStyle = responderStyle.block.mapStyle[model.type] || { fill: '#000'}; const textX = model.position.x + model.offset.x; const textY = model.position.y + model.offset.y; const textName = `${model.type}-${model.name}`; - const textColor = this.style.Responder.text.stroke || '#fff'; + const textFill = responderStyle.text.textFill || '#fff'; + const deltaFill = responderStyle.delta.fill || '#fff'; + const padding = 1.2; this.block = new Rect({ zlevel: this.model.zlevel, @@ -43,17 +47,10 @@ export default class Responder extends Group { }, style: { stroke: blockStroke, - fill: blockFill + ...blockStyle } }); - if (model.rotate) { - const origin = [blockX, blockY]; - const rotation = -Math.PI / 180 * Number(model.rotate); - this.transformRotation(this.block, origin, rotation); - } - this.add(this.block); - this.text = new Text({ zlevel: this.zlevel, z: this.z + 1, @@ -63,22 +60,68 @@ export default class Responder extends Group { text: textName, fontFamily: this.style.fontFamily, fontSize: this.style.fontSize, - textFill: textColor, + textFill: textFill, textAlign: 'right' } }); + this.delta1 = new Polygon({ + zlevel: this.zlevel, + z: this.z + 1, + shape: { + points: [ + [blockX + blockWidth / 2, blockY + blockWidth], + [blockX + padding, blockY + padding], + [blockX + blockWidth - padding, blockY + padding] + ] + }, + style: { + fill: deltaFill + } + }); + + this.delta2 = new Polygon({ + zlevel: this.zlevel, + z: this.z + 1, + shape: { + points: [ + [blockX + blockWidth / 2, blockY + blockHeight - blockWidth], + [blockX + padding, blockY + blockHeight - padding], + [blockX + blockWidth - padding, blockY + blockHeight - padding] + ] + }, + style: { + fill: deltaFill + } + }); + + if (model.rotate) { + const origin = [blockX, blockY]; + const rotation = -Math.PI / 180 * Number(model.rotate); + [this.block, this.delta1, this.delta2].forEach(el => { + this.transformRotation(el, origin, rotation); + }); + } + if (model.textRotate) { const origin = [textX, textY]; const rotation = -Math.PI / 180 * Number(model.textRotate); this.transformRotation(this.text, origin, rotation); } - this.add(this.text); + [this.block, this.delta1, this.delta2, this.text].forEach(el => { + this.add(el); + }); } setState(model) { if (!this.isShowShape) return; + const responderStyle = this.style.Responder; + const style = responderStyle.block.mapStyle[model.type] || { fill: '#000'}; + this.block.setStyle(style); + [this.delta1, this.delta2].forEach(el => { + model.type == 'IB' ? el.show() : el.hide(); + }); } // 整体图片 diff --git a/src/jmapNew/utils/parser.js b/src/jmapNew/utils/parser.js index 8dca2b3c9..0845de471 100644 --- a/src/jmapNew/utils/parser.js +++ b/src/jmapNew/utils/parser.js @@ -263,6 +263,7 @@ export function parser(data, skinCode, showConfig) { mapDevice[elem.code] = createDevice(deviceType.DirectionRod, elem, propConvert, showConfig); }, this); + if (!data.responderList) { data.responderList = []; }; zrUtil.each(data.responderList || [], elem => { mapDevice[elem.code] = createDevice(deviceType.Responder, elem, propConvert, showConfig); }, this); diff --git a/src/store/modules/map.js b/src/store/modules/map.js index 92be3d600..1afe335a2 100644 --- a/src/store/modules/map.js +++ b/src/store/modules/map.js @@ -537,7 +537,7 @@ const map = { }, responderList: (state) => { if (state.map) { - return state.map.responderList || []; + return state.map.responderList; } else { return []; }