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

2021-01-12 13:20:12 +08:00 · 2021-01-12 13:20:12 +08:00 · de395f9bb4
commit de395f9bb4
parent dbc02056fb 64df012fc3
6 changed files with 89 additions and 29 deletions
--- a/src/jmapNew/config/skinCode/nanjing_02.js
+++ b/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'
            }
        };

--- 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) {
@ -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 blockHeight = this.style.Responder.block.height || 12;
-        const blockStroke = this.style.Responder.block.stroke || '#000';
-        const blockFill = this.style.Responder.block.fill || '#fff';
-        const textX = model.position.x + model.offset.x;
-        const textY = model.position.y + model.offset.y;
+        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.textOffset.x;
+        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();
+        });
    }

    // 整体图片
--- 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);
--- 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 [];
            }
--- a/src/views/newMap/newMapdraft/mapoperate/responder/responderModel.vue
+++ b/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: 'offset.x', firstLevel: 'offset', 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', label: '文字偏移', type: 'coordinate', width: '120px', children: [
+                                { prop: 'textOffset.x', firstLevel: 'textOffset', secondLevel: 'x', label: 'x:', 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 },
--- a/src/views/newMap/newMapdraft/mapoperate/responder/utils.js
+++ b/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
            },