优化应答器 状态处理功能

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

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();
+        });
     }
 
     // 整体图片

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

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 [];
             }