进路延续保护区段选中红色

src/jmapNew/config/defaultStyle.js

@@ -122,3 +122,7 @@ export default class defaultStyle {
         };
     }
 }
+export const drawSectionStyle = {
+    routePhysicalSection: 'rgba(255,255,0,0.5)',
+    continueProtectSection: 'rgba(255,0,255,0.5)'
+};

src/jmapNew/shape/Section/index.js

@@ -10,6 +10,7 @@ import { EBackArrow, EBackArrowTriangle } from './EBackArrow'; // 折返进路
 import ELimitName from './ELimitName'; // 成都三号线 限速名称
 import JTriangle from '../../utils/JTriangle';
 import router from '@/router';
+import {drawSectionStyle} from '../../config/defaultStyle';
 
 /** 区段*/
 export default class Section extends Group {
@@ -22,7 +23,7 @@ export default class Section extends Group {
         this.model = model;
         this.style = style;
         this.selected = false; // 绘图选中状态
-        this.batchSelected = false; // 绘图批量选中状态
+        this.selectedType = ''; // 绘图批量选中状态
         this.create();
         this.createMouseEvent();
         this.setState(model);
@@ -854,25 +855,28 @@ export default class Section extends Group {
     drawSelected(selected) {
         this.selected = selected;
         if (selected) {
-            !this.batchSelected && this.section && this.section.setStyle({stroke: 'rgba(0,255,255,0.6)'});
+            !this.selectedType && this.section && this.section.setStyle({stroke: 'rgba(0,255,255,0.6)'});
         } else {
-            !this.batchSelected && this.section && this.section.setStyle({stroke: this.style.Section.line.spareColor });
+            !this.selectedType && this.section && this.section.setStyle({stroke: this.style.Section.line.spareColor });
         }
     }
-    drawBatchSelected(selected) {
+    drawBatchSelected(selected, type) {
-        this.batchSelected = selected;
+        if (this.selectedType === type) {
-        if (selected) {
+            return;
-            this.section && this.section.setStyle({stroke: 'rgba(255,255,0,0.6)'});
+        }
+        if (selected && !this.selectedType) {
+            this.section && this.section.setStyle({stroke: drawSectionStyle[type]});
         } else {
             this.section && this.section.setStyle({stroke: this.style.Section.line.spareColor });
         }
+        this.selectedType = type;
     }
 
     checkIsDrawMap() {
         const path = window.location.href;
         if (path.includes('/map/draw')) {
-            this.on('mouseout', () => { !this.batchSelected && !this.selected && this.section && this.section.setStyle({stroke: this.style.Section.line.spareColor }); });
+            this.on('mouseout', () => { !this.selectedType && !this.selected && this.section && this.section.setStyle({stroke: this.style.Section.line.spareColor }); });
-            this.on('mouseover', () => { !this.batchSelected && this.section && this.section.setStyle({stroke: 'rgba(0,255,255,0.6)'}); });
+            this.on('mouseover', () => { !this.selectedType && this.section && this.section.setStyle({stroke: 'rgba(0,255,255,0.6)'}); });
         }
     }
 

src/views/newMap/newMapdraft/dataRelation/routeoperate/protect.vue

@@ -212,6 +212,26 @@ export default {
                 });
                 this.editShow = true;
             }
+        },
+        'addOverlapModel.routeOverlapSectionList': function (val, old) {
+            if (old && old.length) {
+                old.forEach((item) => {
+                    const section = this.$store.getters['map/getDeviceByCode'](item);
+                    section.instance.drawBatchSelected(false, '');
+                });
+            }
+            if (val && val.length) {
+                val.forEach((item) => {
+                    const section = this.$store.getters['map/getDeviceByCode'](item);
+                    if (section.logicSectionCodeList && section.logicSectionCodeList.length) {
+                        section.logicSectionCodeList.forEach( (logicSectionCode) => {
+                            this.$store.getters['map/getDeviceByCode'](logicSectionCode).instance.drawBatchSelected(true, 'continueProtectSection');
+                        });
+                    }
+                    section.instance.drawBatchSelected(true, 'continueProtectSection');
+                });
+            }
+
         }
     },
     mounted() {

src/views/newMap/newMapdraft/dataRelation/routeoperate/route.vue

@@ -349,7 +349,7 @@ export default {
             if (old && old.length) {
                 old.forEach((item) => {
                     const section = this.$store.getters['map/getDeviceByCode'](item);
-                    section.instance.drawBatchSelected(false);
+                    section.instance.drawBatchSelected(false, '');
                 });
             }
             if (val && val.length) {
@@ -360,10 +360,10 @@ export default {
                     const section = this.$store.getters['map/getDeviceByCode'](item);
                     if (section.logicSectionCodeList && section.logicSectionCodeList.length) {
                         section.logicSectionCodeList.forEach( (logicSectionCode) => {
-                            this.$store.getters['map/getDeviceByCode'](logicSectionCode).instance.drawBatchSelected(true);
+                            this.$store.getters['map/getDeviceByCode'](logicSectionCode).instance.drawBatchSelected(true, 'routePhysicalSection');
                         });
                     }
-                    section.instance.drawBatchSelected(true);
+                    section.instance.drawBatchSelected(true, 'routePhysicalSection');
                 });
             }
         }