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

src/jmapNew/shape/Responder/index.js

@@ -9,9 +9,9 @@ import Polygon from 'zrender/src/graphic/shape/Polygon';
 const defaultStyle = {
     block:{
         stroke: '#fff', mapStyle: {
-            FB: { fill: '#fff' },
+            FB: { fill: '#fff', stroke: '#000' },
-            VB: { fill: '#666' },
+            VB: { fill: '#666', stroke: '#000' },
-            IB: { fill: '#666' }
+            IB: { fill: '#666', stroke: '#000' }
         }
     },
     text:{
@@ -40,16 +40,19 @@ export default class Responder extends Group {
     create() {
         const model = this.model;
         const responderStyle = this.style.Responder || defaultStyle;
-        const blockX = model.position.x;
+        const distance = 12;
-        const blockY = model.position.y;
+        const offsetX = distance * Math.sin(model.rotate);
+        const offsetY = distance * Math.cos(model.rotate);
         const blockWidth = responderStyle.block.width || 5;
         const blockHeight = responderStyle.block.height || 12;
-        const blockStroke = responderStyle.block.stroke;
         const blockStyle = responderStyle.block.mapStyle[model.type] || { fill: '#fff'};
-        const textX = model.position.x + model.textOffset.x;
+        const blockX = model.position.x - blockWidth / 2 - offsetX;
-        const textY = model.position.y + model.textOffset.y;
+        const blockY = model.position.y - blockHeight / 2 - offsetY;
+        const textX = blockX + model.textOffset.x;
+        const textY = blockY + model.textOffset.y;
         const textName = `${model.type}-${model.name}`;
         const textFill = responderStyle.text.textFill;
+        const origin = [model.position.x, model.position.y];
         const deltaFill = responderStyle.delta.fill;
         const padding = 1.2;
 
@@ -63,25 +66,10 @@ export default class Responder extends Group {
                 height: blockHeight
             },
             style: {
-                stroke: blockStroke,
                 ...blockStyle
             }
         });
 
-        this.text = new Text({
-            zlevel: this.zlevel,
-            z: this.z + 1,
-            style: {
-                x: textX,
-                y: textY,
-                text: textName,
-                fontFamily: this.style.fontFamily,
-                fontSize: this.style.fontSize,
-                textFill: textFill,
-                textAlign: 'right'
-            }
-        });
-
         this.delta1 = new Polygon({
             zlevel: this.zlevel,
             z: this.z + 1,
@@ -112,8 +100,22 @@ export default class Responder extends Group {
             }
         });
 
+        this.text = new Text({
+            zlevel: this.zlevel,
+            z: this.z + 1,
+            origin,
+            style: {
+                x: textX,
+                y: textY,
+                text: textName,
+                fontFamily: this.style.fontFamily,
+                fontSize: this.style.fontSize,
+                textFill: textFill,
+                textAlign: 'right'
+            }
+        });
+
         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);
@@ -121,7 +123,6 @@ export default class Responder extends Group {
         }
 
         if (model.textRotate) {
-            const origin = [textX, textY];
             const rotation = -Math.PI / 180 * Number(model.textRotate);
             this.transformRotation(this.text, origin, rotation);
         }

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

@@ -1,13 +1,46 @@
 <template>
   <el-tabs v-model="activeName" class="card">
     <el-tab-pane class="view-control" :label="$t('map.property')" name="first" :lazy="lazy">
-      <responder-model ref="respModel" :field="field" :responder-type-list="responderTypeList" :centralized-station-list="centralizedStationList" v-on="$listeners" @hover="hover" @deviceChange="deviceChange" @deviceSelect="deviceSelect"/>
+      <responder-model
+        ref="respModel"
+        :field="field"
+        :responder-type-list="responderTypeList"
+        :centralized-station-list="centralizedStationList"
+        :responder-list="responderList"
+        :section-list="filterSectionList"
+        v-on="$listeners"
+        @hover="hover"
+        @deviceChange="deviceChange"
+        @deviceSelect="deviceSelect"
+      />
     </el-tab-pane>
     <el-tab-pane class="view-control" :label="$t('map.newConstruction')" name="second" :lazy="lazy">
-      <responder-create ref="respCreate" :field="field" :responder-type-list="responderTypeList" :centralized-station-list="centralizedStationList" v-on="$listeners" @hover="hover" @deviceChange="deviceChange" @deviceSelect="deviceSelect"/>
+      <responder-create
+        ref="respCreate"
+        :field="field"
+        :responder-type-list="responderTypeList"
+        :centralized-station-list="centralizedStationList"
+        :responder-list="responderList"
+        :section-list="filterSectionList"
+        v-on="$listeners"
+        @hover="hover"
+        @deviceChange="deviceChange"
+        @deviceSelect="deviceSelect"
+      />
     </el-tab-pane>
     <el-tab-pane class="view-control" label="批量创建" name="third" :lazy="lazy">
-      <responder-batch ref="respBatch" :field="field" :responder-type-list="responderTypeList" :centralized-station-list="centralizedStationList" v-on="$listeners" @hover="hover" @deviceChange="deviceChange" @deviceSelect="deviceSelect"/>
+      <responder-batch
+        ref="respBatch"
+        :field="field"
+        :responder-type-list="responderTypeList"
+        :centralized-station-list="centralizedStationList"
+        :responder-list="responderList"
+        :section-list="filterSectionList"
+        v-on="$listeners"
+        @hover="hover"
+        @deviceChange="deviceChange"
+        @deviceSelect="deviceSelect"
+      />
     </el-tab-pane>
   </el-tabs>
 </template>
@@ -44,8 +77,13 @@ export default {
     },
     computed: {
         ...mapGetters('map', [
-            'stationList'
+            'stationList',
+            'sectionList',
+            'responderList'
         ]),
+        filterSectionList() {
+            return this.sectionList.filter(el => ['01', '03'].includes(el.type));
+        },
         responderTypeList() {
             return 	ConstConfig.ConstSelect.responderTypeList;
         }
@@ -76,15 +114,23 @@ export default {
                 this.activeName = 'first';
                 this.$refs.respModel.setModel(selected);
             } else if (selected && selected._type.toUpperCase() === 'Section'.toUpperCase() && this.field.toUpperCase() === 'RelSectionCode'.toUpperCase()) {
+                if (['01', '03'].includes(selected.type)) {
                     this.$refs.respCreate.setModel(selected);
                     this.activeName = 'second';
                     this.field = '';
                     this.$emit('deviceSelect', '');
+                } else {
+                    this.$message.error('请选择物理区段');
+                }
             } else if (selected && selected._type.toUpperCase() === 'Section'.toUpperCase() && this.field.toUpperCase() === 'RelBatchSectionCode'.toUpperCase()) {
+                if (['01', '03'].includes(selected.type)) {
                     this.$refs.respBatch.setModel(selected);
                     this.activeName = 'third';
                     this.field = '';
                     this.$emit('deviceSelect', '');
+                } else {
+                    this.$message.error('请选择物理区段');
+                }
             } else if (!selected) {
                 this.$emit('deviceSelect', '');
             }

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

@@ -53,7 +53,6 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex';
 import * as utils from './utils';
 
 export default {
@@ -71,6 +70,14 @@ export default {
         responderTypeList: {
             type: Array,
             required: true
+        },
+        sectionList: {
+            type: Array,
+            required: true
+        },
+        responderList: {
+            type: Array,
+            required: true
         }
     },
     data() {
@@ -83,12 +90,6 @@ export default {
             rowData: null
         };
     },
-    computed: {
-        ...mapGetters('map', [
-            'responderList',
-            'sectionList'
-        ])
-    },
     methods: {
         setModel(selected) {
             if (this.rowData) {

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

@@ -9,7 +9,6 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex';
 import CreateOperate from '../components/createOperate';
 import * as utils from './utils';
 
@@ -31,6 +30,14 @@ export default {
         responderTypeList: {
             type: Array,
             required: true
+        },
+        sectionList: {
+            type: Array,
+            required: true
+        },
+        responderList: {
+            type: Array,
+            required: true
         }
     },
     data() {
@@ -48,16 +55,12 @@ export default {
                     { required: true, message: '请选择应答器类型', trigger: 'blur' }
                 ],
                 sectionCode: [
-                    { required: true, message: '请选择关联区段', trigger: 'blur' }
+                    { required: true, message: '请关联物理区段', trigger: 'blur' }
                 ]
             }
         };
     },
     computed: {
-        ...mapGetters('map', [
-            'responderList',
-            'sectionList'
-        ]),
         isButtonType() {
             return this.field == 'RelSectionCode';
         },

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

@@ -11,7 +11,6 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex';
 import { deepAssign } from '@/utils/index';
 import OperateProperty from '../components/operateProperty';
 
@@ -35,6 +34,14 @@ export default {
             type: Array,
             required: true
         },
+        sectionList: {
+            type: Array,
+            required: true
+        },
+        responderList: {
+            type: Array,
+            required: true
+        },
         centralizedStationList: {
             type: Array,
             required: true
@@ -80,7 +87,7 @@ export default {
                     { required: true, message: '请输入应答器文字旋转角度', trigger: 'blur' }
                 ],
                 sectionCode: [
-                    { required: true, message: '请选择关联区段', trigger: 'blur' }
+                    { required: true, message: '请关联物理区段', trigger: 'blur' }
                 ],
                 stationCode: [
                     { required: true, message: '请选择关联集中站', trigger: 'blur' }
@@ -101,10 +108,6 @@ export default {
         };
     },
     computed: {
-        ...mapGetters('map', [
-            'responderList',
-            'sectionList'
-        ]),
         form() {
             const form = {
                 labelWidth: '130px',

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

@@ -2,21 +2,20 @@ import { getUID } from '@/jmapNew/utils/Uid';
 
 export function buildModelBySection(section, model, list) {
     if (section) {
-        const distance = 10;
         const length = section.points.length;
         const dx = (section.points[length - 1].x - section.points[0].x);
         const dy = (section.points[length - 1].y - section.points[0].y);
         const rotate = Math.atan2(dy, dx) * 180 / Math.PI;
-        const vx = (section.points[length - 1].x + section.points[0].x) / 2 - distance * Math.sin(rotate);
+        const vx = (section.points[length - 1].x + section.points[0].x) / 2;
-        const vy = (section.points[length - 1].y + section.points[0].y) / 2 - distance * Math.cos(rotate);
+        const vy = (section.points[length - 1].y + section.points[0].y) / 2;
 
         return {
             _type: 'Responder',
             code: getUID('Responder', list),
             type: model.type,
             name: model.name,
-            rotate: 90 + rotate,
+            rotate: rotate + 90,
-            textRotate: 90 + rotate,
+            textRotate: rotate + 90,
             position: {
                 x: vx,
                 y: vy