Merge branch 'test' of https://git.code.tencent.com/lian-cbtc/jl-client into test

src/jmapNew/config/skinCode/nanjing_02.js

@@ -831,8 +831,17 @@ class SkinCode extends defaultStyle {
 
         this[deviceType.Responder] = {
             block: {
+                mapStyle: {
+                    FB: { fill: '#fff' },
+                    VB: { fill: '#666' },
+                    IB: { fill: '#666' }
+                }
+            },
+            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) {
@@ -16,21 +16,27 @@ export default class Responder extends Group {
         this.style = style;
         this.isShowShape = true;
         this.z = model.zIndex || 1;
+        if (model.previewOrMapDraw) {
 			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 blockWidth = responderStyle.block.width || 5;
-        const blockHeight = this.style.Responder.block.height || 12;
+        const blockHeight = responderStyle.block.height || 12;
-        const blockStroke = this.style.Responder.block.stroke || '#000';
+        const blockStroke = responderStyle.block.stroke || '#000';
-        const blockFill = this.style.Responder.block.fill || '#fff';
+        const blockStyle = responderStyle.block.mapStyle[model.type] || { fill: '#000'};
-        const textX = model.position.x + model.offset.x;
+        const textX = model.position.x + model.textOffset.x;
-        const textY = model.position.y + model.offset.y;
+        const textY = model.position.y + model.textOffset.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 +49,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 +62,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 [];
             }

src/views/newMap/newMapdraft/mapoperate/responder/responderModel.vue

@@ -48,7 +48,7 @@ export default {
                 name: '',
                 rotate: 0,
                 textRotate: 0,
-                offset: {
+                textOffset: {
                     x: 0,
                     y: 0
                 },
@@ -56,6 +56,7 @@ export default {
                     x: 0,
                     y: 0
                 },
+                offset: 0,
                 sectionCode: '',
                 stationCode: ''
             },
@@ -72,6 +73,9 @@ export default {
                 rotate: [
                     { required: true, message: '请输入应答器旋转角度', trigger: 'blur' }
                 ],
+                offset: [
+                    { type: 'number', required: true, message: '请输入应答器文字旋转角度', trigger: 'blur', min: 0 }
+                ],
                 textRotate: [
                     { required: true, message: '请输入应答器文字旋转角度', trigger: 'blur' }
                 ],
@@ -87,10 +91,10 @@ export default {
                 'position.y': [
                     { required: true, message: '请输入应答器坐标y', trigger: 'blur' }
                 ],
-                'offset.x': [
+                'textOffset.x': [
                     { required: true, message: '请输入应答器偏移x', trigger: 'blur' }
                 ],
-                'offset.y': [
+                'textOffset.y': [
                     { required: true, message: '请输入应答器偏移y', trigger: 'blur' }
                 ]
             }
@@ -115,14 +119,15 @@ export default {
                             { prop: 'code', label: '应答器编码', type: 'select', optionLabel: 'code', optionValue: 'code', options: this.responderList, deviceChange: this.deviceChange },
                             { prop: 'name', label: '应答器名称', type: 'input' },
                             { prop: 'type', label: `应答器类型`, type: 'select', optionLabel: 'name', optionValue: 'value', options: this.responderTypeList },
+                            { prop: 'offset', label: '区段偏移值', type: 'number' },
                             { prop: 'position', label: '坐标', type: 'coordinate', width: '120px', children: [
                                 { prop: 'position.x', firstLevel: 'position', secondLevel: 'x', label: 'x:', type: 'number', labelWidth: '25px', disabled: false },
                                 { prop: 'position.y', firstLevel: 'position', secondLevel: 'y', label: 'y:', type: 'number', labelWidth: '25px', disabled: false }
                             ] },
                             { prop: 'rotate', label: '应答器旋转', type: 'number' },
-                            { prop: 'offset', label: '文字偏移', type: 'coordinate', width: '120px', children: [
+                            { prop: 'textOffset', label: '文字偏移', type: 'coordinate', width: '120px', children: [
-                                { prop: 'offset.x', firstLevel: 'offset', secondLevel: 'x', label: 'x:', type: 'number', labelWidth: '25px', disabled: false },
+                                { prop: 'textOffset.x', firstLevel: 'textOffset', secondLevel: 'x', label: 'x:', type: 'number', labelWidth: '25px', disabled: false },
-                                { prop: 'offset.y', firstLevel: 'offset', secondLevel: 'y', label: 'y:', type: 'number', labelWidth: '25px', disabled: false }
+                                { prop: 'textOffset.y', firstLevel: 'textOffset', secondLevel: 'y', label: 'y:', type: 'number', labelWidth: '25px', disabled: false }
                             ] },
                             { prop:'textRotate', label: '文字旋转', type: 'number' },
                             { prop: 'sectionCode', label: '关联区段', type: 'select', optionLabel: 'code', optionValue: 'code', options: this.sectionList },

src/views/newMap/newMapdraft/mapoperate/responder/utils.js

@@ -21,7 +21,7 @@ export function buildModelBySection(section, model, list) {
                 x: vx,
                 y: vy
             },
-            offset: {
+            textOffset: {
                 x: 0,
                 y: 0
             },