openatc-components 0.1.190 → 0.1.191

package/src/kisscomps/components/IntersectionMap/crossDirection/crossDiagram.vue

@@ -57,10 +57,10 @@
         <!-- 其他路口 -->
         <CustomRoadsSvg v-if="crossType === 'Customroads'"/>
         <!-- 匝道 -->
-        <RampEastRoadsSvg v-if="crossType === 'ramp-east'" />
-        <RampWestRoadsSvg v-if="crossType === 'ramp-west'" />
-        <RampNorthRoadsSvg v-if="crossType === 'ramp-north'" />
-        <RampSouthRoadsSvg v-if="crossType === 'ramp-south'" />
+        <RampEastRoadsSvg v-if="crossType === 'ramp-east' && !isVipRoute" />
+        <RampWestRoadsSvg v-if="crossType === 'ramp-west' && !isVipRoute" />
+        <RampNorthRoadsSvg v-if="crossType === 'ramp-north' && !isVipRoute" />
+        <RampSouthRoadsSvg v-if="crossType === 'ramp-south' && !isVipRoute" />
         <!-- 路段行人过街 -->
         <PedSectionSNSvg v-if="crossType === 'ped-section-south-north'" />
         <PedSectionEWSvg v-if="crossType === 'ped-section-east-west'" />
@@ -68,22 +68,23 @@
       <!-- 城市道路状态-->
       <div v-if="mainType === '100' || mainType === '101' || mainType === '104'">
         <!-- 人行道 -->
-        <div class="sidewalk" v-if="resetflag && isLoaded">
-          <SidewalkSvg v-for="(side, index) in compSidewalkPhaseData" :key="side.key + '-' + index" :Data="side" :crossType="crossType" />
+        <div class="sidewalk" id="sidewalk" v-if="resetflag && isLoaded">
+          <SidewalkClickSvg v-if="isVipRoute && compSidewalkPhaseData.length" :Data="compSidewalkPhaseData" :clickMode="clickMode" @handleClickSidewalkIcon="handleClickSidewalkIcon" />
+          <SidewalkSvg v-else v-for="(side, index) in compSidewalkPhaseData" :key="side.key + '-' + index" :Data="side" :crossType="crossType" />
         </div>
         <!-- 车道相位 -->
         <div v-if="resetflag" class="phaseIcon">
-          <PhaseIconSvg v-for="(item, index) in compLanePhaseData" :key="item.key + '-' + index" :Data="item"/>
+          <PhaseIconSvg v-for="(item, index) in compLanePhaseData" :key="item.key + '-' + index" :Data="item" :isVipRoute="isVipRoute" :clickMode="clickMode" @handleClickPhaseIcon="handleClickPhaseIcon" />
         </div>
          <!-- 公交相位 -->
-        <div v-if="resetflag" class="busIcon">
+        <div v-if="resetflag && !isVipRoute" class="busIcon">
           <BusMapSvg v-for="(item, index) in comdireBusPhaseData" :key="'Busmap-' + item.key + '-' + index" :Data="item" />
           <PhaseIconSvg v-for="(item, index) in comdireBusPhaseData" :key="item.key + '-' + index" :Data="item"/>
         </div>
       </div>
       <!-- 匝道状态 -->
         <!-- 车道相位 -->
-      <div v-if="resetflag && mainType === '103'">
+      <div v-if="resetflag && mainType === '103' && !isVipRoute">
         <RampPhaseIconSvg v-for="(item, index) in LanePhaseData" :key="item.key + '-' + index" :Data="item" />
       </div>
     </div>
@@ -122,11 +123,12 @@
       <div v-if="mainType === '100' || mainType === '101'">
         <!-- 人行道 -->
         <div class="sidewalk" v-if="resetflag && isLoaded">
-          <SidewalkSvg v-for="side in compSidewalkPhaseData" :key="side.key" :Data="side" :crossType="crossType" />
+          <SidewalkClickSvg v-if="isVipRoute && compSidewalkPhaseData.length" :Data="compSidewalkPhaseData" :clickMode="clickMode" @handleClickSidewalkIcon="handleClickSidewalkIcon" />
+          <SidewalkSvg v-else v-for="side in compSidewalkPhaseData" :key="side.key" :Data="side" :crossType="crossType" />
         </div>
         <!-- 车道相位 -->
         <div v-if="resetflag" class="phaseIcon">
-          <LPhaseIconSvg v-for="item in compLanePhaseData" :key="item.key" :Data="item"/>
+          <LPhaseIconSvg v-for="item in compLanePhaseData" :key="item.key" :Data="item" :isVipRoute="isVipRoute" :clickMode="clickMode" @handleClickPhaseIcon="handleClickPhaseIcon"/>
         </div>
          <!-- 公交相位 -->
         <div v-if="resetflag" class="busIcon">
@@ -142,6 +144,7 @@
 import PhaseIconSvg from './phaseIcon/phaseIconSvg'
 import PhaseDataModel from './utils.js'
 import { getIntersectionInfo } from '../../../../api/template.js'
+import { uploadSingleTscParam } from '../../../../api/param.js'
 import CrossRoadsSvg from './baseImg/CrossRoadsSvg'
 import TShapeEastRoadsSvg from './baseImg/TShapeEastRoadsSvg'
 import TShapeWestRoadsSvg from './baseImg/TShapeWestRoadsSvg.vue'
@@ -150,6 +153,7 @@ import TShapeSouthRoadsSvg from './baseImg/TShapeSouthRoadsSvg.vue'
 import CustomRoadsSvg from './baseImg/CustomRoadsSvg.vue'
 import RefreshSvg from './baseImg/refreshSvg'
 import SidewalkSvg from './baseImg/SidewalkSvg'
+import SidewalkClickSvg from './baseImg/SidewalkClickSvg'
 import RampEastRoadsSvg from './baseImg/RampEastSvg'
 import RampWestRoadsSvg from './baseImg/RampWestSvg'
 import RampNorthRoadsSvg from './baseImg/RampNorthSvg'
@@ -167,6 +171,9 @@ import LPhaseIconSvg from './phaseIcon/LphaseIconSvg'
 import CrossDiagramMgr from '../../../../EdgeMgr/controller/crossDiagramMgr.js'
 import BusMapSvg from './busIcon/busMapSvg'
 import { getMessageByCode } from '../../../../utils/responseMessage.js'
+
+import CrossDirectionConflictList from '../../../../utils/conflictList.js'
+
 export default {
   name: 'crossDiagram',
   components: {
@@ -192,7 +199,8 @@ export default {
     LTShapeNorthRoadsSvg,
     LTShapeSouthRoadsSvg,
     LPhaseIconSvg,
-    BusMapSvg
+    BusMapSvg,
+    SidewalkClickSvg
   },
   props: {
     crossStatusData: {
@@ -230,6 +238,24 @@ export default {
     stateName: {
       type: String,
       default: ''
+    },
+    choosedDirection: {
+      type: Array
+    },
+    choosedPedDirection: {
+      type: Array
+    },
+    isVipRoute: { // 区分普通路口和VIP路口，如果是vip路口（特勤路线和分组管控），才需要获取通道和处理通道冲突，并显示已选方向
+      type: Boolean,
+      default: false
+    },
+    clickMode: {
+      type: Boolean,
+      default: false
+    },
+    isThirdSignal: {
+      type: Boolean,
+      default: false
     }
   },
   // computed: {
@@ -616,23 +642,40 @@ export default {
           return
         }
         this.isLoaded = true
-        this.crossInfo = res.data.data.param
         this.tempType = res.data.data.type
         // 获取车道相位、行人相位信息（坐标、名称）
         this.mainType = this.tempType.split('-')[0]
         this.mainDirection = this.tempType.split('-')[1]
+        if (this.isVipRoute && !this.isThirdSignal) {
+          // 特勤、分组管控下，非第三方设备，按通道显示相位方向；第三方设备还是按路口相位配置显示相位方向
+          this.getChannelInfo()
+          return
+        }
+        this.crossInfo = res.data.data.param
         if (this.mainType === '100' || this.mainType === '101' || this.mainType === '104') {
           // 城市道路加载车道相位坐标和人行道坐标
           this.getPhasePos()
           this.getOverlapPhasePos()
           this.getPedPhasePos()
           this.getOverlapPedPhasePos()
-          this.getBusPos()
+          if (!this.isVipRoute) {
+            this.getBusPos()
+          }
         }
-        if (this.mainType === '103') {
+        if (!this.isVipRoute && this.mainType === '103') {
           // 获取匝道道路的主路和支路的相位坐标
           this.getRampPhasePos()
         }
+        if (this.isVipRoute && this.isThirdSignal) {
+          this.LanePhaseData = this.CrossDiagramMgr.compare(this.LanePhaseData, this.overlapLanePhaseData, 'type', 'nostatus')
+          // console.log(this.LanePhaseData)
+          this.sidewalkPhaseData = this.CrossDiagramMgr.compare(this.sidewalkPhaseData, this.overlapsidewalkPhaseData, 'pedtype', 'nostatus')
+          let allDir = this.LanePhaseData.map(ele => ele.id)
+          let allPedDir = this.sidewalkPhaseData.map(ele => ele.id)
+          this.inneChoosedDirection = this.choosedDirection.filter(dir => allDir.indexOf(dir) !== -1)
+          this.inneChoosedPedDirection = this.choosedPedDirection.filter(dir => allPedDir.indexOf(dir) !== -1)
+          this.drawPhaseIcon()
+        }
       })
     },
     getBusPos () {
@@ -734,8 +777,12 @@ export default {
           ele.peddirection.forEach((dir, index) => {
           // 行人相位
             if (this.PhaseDataModel.getSidePos(dir)) {
+              let key = this.CrossDiagramMgr.getUniqueKey('pedphase')
+              if (this.isVipRoute && this.isThirdSignal) {
+                key = this.CrossDiagramMgr.getUniqueKey('pedphase') + `-${this.agentId}`
+              }
               this.sidewalkPhaseData.push({
-                key: this.CrossDiagramMgr.getUniqueKey('pedphase'),
+                key,
                 phaseid: ele.id, // 相位id，用于对应相位状态
                 id: dir,
                 name: this.PhaseDataModel.getSidePos(dir).name,
@@ -899,6 +946,182 @@ export default {
     getRoadDirection () {
       // 获取行车方向（从平台或配置工具的配置文件中读取）
       this.roadDir = this.roadDirection
+    },
+    getChannelInfo () {
+      uploadSingleTscParam('channel', this.agentId).then(data => {
+        let res = data.data
+        if (!res.success) {
+          if (res.code === '4003') {
+            this.$message.error(this.$t('openatccomponents.errorTip.devicenotonline'))
+            return
+          }
+          this.$message.error(getMessageByCode(data.data.code, this.$i18n.locale))
+          return
+        }
+        this.channelList = res.data.data.channelList.filter(ele => ele.type !== undefined)
+        // console.log('this.channelList', this.channelList)
+        this.handleChannelDirection()
+      })
+    },
+    handleChannelDirection () {
+      this.LanePhaseData = []
+      this.sidewalkPhaseData = []
+      this.sidewalkDir = []
+      let realphasedirarr = []
+      let realpeddirarr = []
+      this.channelList.forEach((ele, i) => {
+        if (ele.type === 0 || ele.type === 1 || ele.type === 3) {
+          if (ele.realdir) {
+            ele.realdir.forEach((dir, index) => {
+            // 车道相位（通道类型是机动车，非机动车，公交时，对应相位机动车）
+              this.LanePhaseData.push({
+                key: this.CrossDiagramMgr.getUniqueKey('phase'),
+                channelid: ele.id, // 通道id
+                id: dir, // 接口返回的dir字段，对应前端定义的相位方向id，唯一标识
+                name: this.PhaseDataModel.getPhase(dir).name,
+                left: this.PhaseDataModel.getPhase(dir).x,
+                top: this.PhaseDataModel.getPhase(dir).y
+              })
+            })
+            realphasedirarr = Array.from(new Set(realphasedirarr.concat(ele.realdir)))
+          }
+        }
+        if (ele.type === 2) {
+          if (ele.realdir) {
+            ele.realdir.forEach((dir, index) => {
+              // 行人相位
+              if (this.sidewalkDir.indexOf(dir) === -1 && this.PhaseDataModel.getSidePos(dir)) {
+                this.sidewalkPhaseData.push({
+                  key: this.CrossDiagramMgr.getUniqueKey('pedphase') + `-${this.agentId}`,
+                  channelid: ele.id, // 通道id
+                  id: dir,
+                  name: this.PhaseDataModel.getSidePos(dir).name
+                })
+              }
+            })
+            realpeddirarr = Array.from(new Set(realpeddirarr.concat(ele.realdir)))
+            this.sidewalkDir = Array.from(new Set([...this.sidewalkDir.concat(ele.realdir)]))
+          }
+        }
+      })
+      this.inneChoosedDirection = this.choosedDirection.filter(dir => realphasedirarr.indexOf(dir) !== -1)
+      this.inneChoosedPedDirection = this.choosedPedDirection.filter(dir => realpeddirarr.indexOf(dir) !== -1)
+      this.drawPhaseIcon()
+    },
+    async drawPhaseIcon () {
+      const targetIds = [4, 8, 12, 16] // 掉头相位后画
+      this.LanePhaseData = this.LanePhaseData.filter(item => !targetIds.includes(item.id)).concat(this.LanePhaseData.filter(item => targetIds.includes(item.id)))
+      if (!this.isThirdSignal) {
+        await this.getConflictList()
+        this.handleClickedPhase()
+        this.compLanePhaseData = JSON.parse(JSON.stringify(this.LanePhaseData))
+        this.handleClickedPedPhase()
+        this.compSidewalkPhaseData = JSON.parse(JSON.stringify(this.sidewalkPhaseData))
+      } else {
+        // 第三方信号机不需要处理冲突关系
+        this.handleClickedPhase()
+        this.compLanePhaseData = JSON.parse(JSON.stringify(this.LanePhaseData))
+        this.handleClickedPedPhase()
+        this.compSidewalkPhaseData = JSON.parse(JSON.stringify(this.sidewalkPhaseData))
+      }
+    },
+    handleClickedPhase () {
+      if (!this.isThirdSignal) {
+        this.inneChoosedDirection = this.inneChoosedDirection.filter(dir => this.phaseConflictList.indexOf(dir) === -1)
+      }
+      for (let index = 0; index < this.LanePhaseData.length; index++) {
+        const element = this.LanePhaseData[index]
+        if (this.inneChoosedDirection.indexOf(element.id) !== -1) {
+          element.clicked = true
+        }
+      }
+    },
+
+    handleClickPhaseIcon (key, action) {
+      let curClickedPhase = {}
+      if (action === 'clicked') {
+        for (let index = 0; index < this.LanePhaseData.length; index++) {
+          const element = this.LanePhaseData[index]
+          if (element.key === key) {
+            element.clicked = true
+            curClickedPhase = JSON.parse(JSON.stringify(element))
+          }
+        }
+      }
+      if (action === 'cancle') {
+        for (let index = 0; index < this.LanePhaseData.length; index++) {
+          const element = this.LanePhaseData[index]
+          if (element.key === key) {
+            delete element.clicked
+          }
+        }
+      }
+      this.compLanePhaseData = JSON.parse(JSON.stringify(this.LanePhaseData))
+      // console.log(this.compLanePhaseData)
+      let clickedDirection = this.compLanePhaseData.filter(ele => ele.clicked && !ele.disabled)
+      this.inneChoosedDirection = clickedDirection.map(ele => ele.id)
+      this.EmitAllChoosedDirection(curClickedPhase)
+    },
+    handleClickedPedPhase () {
+      if (!this.isThirdSignal) {
+        this.inneChoosedPedDirection = this.inneChoosedPedDirection.filter(dir => this.pedConflictList.indexOf(dir) === -1)
+      }
+      // 排他
+      for (let index = 0; index < this.sidewalkPhaseData.length; index++) {
+        const element = this.sidewalkPhaseData[index]
+        delete element.clicked
+      }
+      for (let index = 0; index < this.sidewalkPhaseData.length; index++) {
+        const element = this.sidewalkPhaseData[index]
+        if (this.inneChoosedPedDirection.indexOf(element.id) !== -1) {
+          element.clicked = true
+        }
+      }
+    },
+    handleClickSidewalkIcon (data, curChoosePed) {
+      this.clickedPedDirection = data.filter(ele => ele.clicked && !ele.disabled)
+      this.inneChoosedPedDirection = this.clickedPedDirection.map(ele => ele.id)
+      this.EmitAllChoosedDirection(curChoosePed)
+    },
+    EmitAllChoosedDirection (curClickedPhase) {
+      let allChoosedDir = {
+        direction: this.inneChoosedDirection,
+        peddirection: this.inneChoosedPedDirection
+      }
+      this.$emit('handleClickCrossIcon', allChoosedDir, curClickedPhase)
+      this.drawPhaseIcon()
+    },
+    async getConflictList () {
+      let ConflictList = new CrossDirectionConflictList(this.agentId)
+      return ConflictList.getConflictListByAgentid().then(res => {
+        if (res) {
+          let conflictList = ConflictList.getListDirConflict(this.inneChoosedDirection, this.inneChoosedPedDirection)
+          this.phaseConflictList = conflictList.allConflictDir
+          this.pedConflictList = conflictList.allPedConflictDir
+          // 排他
+          for (let index = 0; index < this.LanePhaseData.length; index++) {
+            const element = this.LanePhaseData[index]
+            delete element.disabled
+          }
+          for (let index = 0; index < this.sidewalkPhaseData.length; index++) {
+            const element = this.sidewalkPhaseData[index]
+            delete element.disabled
+          }
+          for (let index = 0; index < this.LanePhaseData.length; index++) {
+            const element = this.LanePhaseData[index]
+            if (this.phaseConflictList.indexOf(element.id) !== -1) {
+              element.disabled = true
+            }
+          }
+          for (let index = 0; index < this.sidewalkPhaseData.length; index++) {
+            const element = this.sidewalkPhaseData[index]
+            if (this.pedConflictList.indexOf(element.id) !== -1) {
+              element.disabled = true
+            }
+          }
+          // console.log(this.LanePhaseData)
+        }
+      })
     }
   },
   mounted () {

package/src/kisscomps/components/IntersectionMap/crossDirection/phaseIcon/LphaseIconSvg.vue

@@ -10,9 +10,13 @@
  * See the Mulan PSL v2 for more details.
  **/
 <template>
-  <div :style="{position: 'absolute', left: Data.left, top: Data.top}">
+  <div :id="Data.key" :style="{position: 'absolute', left: Data.left, top: Data.top}">
     <div :class="Data.id < 9 ? '' : 'hide'">
-      <svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+      <svg v-if="Data.id === 4 || Data.id === 8" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 18.1 14.5" :width="IconLenghDiaoTou" :height="IconWdithDiaoTou">
+        <path id="东掉头" :class="Data.name === '东掉头' ? '' : 'invisible'" d="M0,8.8c0,3.1,2.2,5.7,4.9,5.7h13.2v-2.5H4.9c-1.3,0-2.4-1.4-2.4-3.1s1.1-3.1,2.4-3.1h3.6v3.1l7.7-4.4L8.6,0v3.1H4.9C2.2,3.1,0,5.7,0,8.8z" :fill="this.FlashColor ? this.FlashColor : (Data.color ? Data.color : defaultColor)"/>
+        <path id="西掉头" :class="Data.name === '西掉头' ? '' : 'invisible'" d="M18.1,5.7c0-3.1-2.2-5.7-4.9-5.7H0v2.5h13.3c1.3,0,2.4,1.4,2.4,3.1s-1.1,3.1-2.4,3.1H9.7V5.6L2,10l7.6,4.5v-3.2h3.6C15.9,11.3,18.1,8.8,18.1,5.7z" :fill="this.FlashColor ? this.FlashColor : (Data.color ? Data.color : defaultColor)"/>
+      </svg>
+      <svg v-else version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
         viewBox="0 0 36 26" style="enable-background:new 0 0 36 26;" xml:space="preserve" :width="IconLengh" :height="IconWdith">
           <!-- 东相位 -->
           <path id="东左转" :class="Data.name === '东左转' ? '' : 'invisible'" d="M11,7.1h24v-3H10.9c-3.1,0-5.7,2.6-5.8,5.7l-0.4,2.9L1,12.2l3.9,9.7l6.5-8.2l-3.7-0.5l0.5-3.3
@@ -20,20 +24,24 @@
           <path id="东右转" :class="Data.name === '东右转' ? '' : 'invisible'" d="M8.1,15.8l-0.4-3l3.7-0.5L4.9,4.1L1,13.8l3.7-0.5l0.4,2.9c0,3.2,2.6,5.7,5.8,5.7H35v-3H10.9
             c-1.5,0-2.8-1.3-2.8-2.8V15.8z" :fill="this.FlashColor ? this.FlashColor : (Data.color ? Data.color : defaultColor)"/>
           <polygon id="东直行" :class="Data.name === '东直行' ? '' : 'invisible'" points="35,11.5 10.1,11.5 10.1,7.8 0.9,13 10.1,18.2 10.1,14.5 35,14.5 " :fill="this.FlashColor ? this.FlashColor : (Data.color ? Data.color : defaultColor)"/>
-          <path id="东掉头" :class="Data.name === '东掉头' ? '' : 'invisible'" d="M13.6,15.2c0,3.7,2.6,6.7,5.8,6.7H35v-3H19.4c-1.5,0-2.8-1.7-2.8-3.7s1.3-3.7,2.8-3.7h4.3v3.7
-l9.1-5.2l-9.1-5.2v3.7h-4.3C16.2,8.5,13.6,11.5,13.6,15.2z" :fill="this.FlashColor ? this.FlashColor : (Data.color ? Data.color : defaultColor)"/>
+          <!-- <path id="东掉头" :class="Data.name === '东掉头' ? '' : 'invisible'" d="M13.6,15.2c0,3.7,2.6,6.7,5.8,6.7H35v-3H19.4c-1.5,0-2.8-1.7-2.8-3.7s1.3-3.7,2.8-3.7h4.3v3.7
+l9.1-5.2l-9.1-5.2v3.7h-4.3C16.2,8.5,13.6,11.5,13.6,15.2z" :fill="this.FlashColor ? this.FlashColor : (Data.color ? Data.color : defaultColor)"/> -->
           <!-- 西相位 -->
           <path id="西左转" :class="Data.name === '西左转' ? '' : 'invisible'" d="M25,18.9H1v3h24.1c3.1,0,5.7-2.6,5.8-5.7l0.4-2.9l3.7,0.5l-3.9-9.7l-6.5,8.2l3.7,0.5l-0.5,3.3
             C27.8,17.6,26.6,18.9,25,18.9L25,18.9z" :fill="this.FlashColor ? this.FlashColor : (Data.color ? Data.color : defaultColor)"/>
           <path id="西右转" :class="Data.name === '西右转' ? '' : 'invisible'" d="M27.9,10.2l0.4,3l-3.7,0.5l6.5,8.2l3.9-9.7l-3.7,0.5l-0.4-2.9c0-3.2-2.6-5.7-5.8-5.7H1v3h24.1
             c1.5,0,2.8,1.3,2.8,2.8V10.2z" :fill="this.FlashColor ? this.FlashColor : (Data.color ? Data.color : defaultColor)"/>
           <polygon id="西直行" :class="Data.name === '西直行' ? '' : 'invisible'" points="1,14.5 26,14.5 26,18.2 35.1,13 26,7.8 26,11.5 1,11.5 " :fill="this.FlashColor ? this.FlashColor : (Data.color ? Data.color : defaultColor)"/>
-          <path id="西掉头" :class="Data.name === '西掉头' ? '' : 'invisible'" d="M22.4,10.8c0-3.7-2.6-6.7-5.8-6.7H1v3h15.7c1.5,0,2.8,1.7,2.8,3.7s-1.3,3.7-2.8,3.7h-4.3v-3.7
-L3.3,16l9,5.3v-3.8h4.3C19.8,17.5,22.4,14.5,22.4,10.8z" :fill="this.FlashColor ? this.FlashColor : (Data.color ? Data.color : defaultColor)"/>
+          <!-- <path id="西掉头" :class="Data.name === '西掉头' ? '' : 'invisible'" d="M22.4,10.8c0-3.7-2.6-6.7-5.8-6.7H1v3h15.7c1.5,0,2.8,1.7,2.8,3.7s-1.3,3.7-2.8,3.7h-4.3v-3.7
+L3.3,16l9,5.3v-3.8h4.3C19.8,17.5,22.4,14.5,22.4,10.8z" :fill="this.FlashColor ? this.FlashColor : (Data.color ? Data.color : defaultColor)"/> -->
         </svg>
       </div>
       <div :class="Data.id >= 9 ? '' : 'hide'">
-        <svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+        <svg v-if="Data.id === 12 || Data.id === 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 14.5 18.1" :width="IconWdithDiaoTou" :height="IconLenghDiaoTou">
+          <path id="南掉头" :class="Data.name === '南掉头' ? '' : 'invisible'"  d="M5.7,0C2.5,0,0,2.2,0,4.9l0,13.2h2.5V4.9c0-1.3,1.4-2.4,3.1-2.4s3.1,1.1,3.1,2.4v3.6H5.7l4.4,7.7l4.4-7.7h-3.2V4.9C11.3,2.2,8.8,0,5.7,0z" :fill="this.FlashColor ? this.FlashColor : (Data.color ? Data.color : defaultColor)"/>
+          <path id="北掉头" :class="Data.name === '北掉头' ? '' : 'invisible'" d="M8.8,18.1c3.1,0,5.7-2.2,5.7-4.9V0l-2.5,0v13.3c0,1.3-1.4,2.4-3.1,2.4s-3.1-1.1-3.1-2.4V9.7h3.1L4.4,2L0,9.6h3.1v3.6C3.1,15.9,5.7,18.1,8.8,18.1z" :fill="this.FlashColor ? this.FlashColor : (Data.color ? Data.color : defaultColor)"/>
+        </svg>
+        <svg  v-else version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
           viewBox="0 0 26 36" style="enable-background:new 0 0 26 36;" xml:space="preserve" :width="IconWdith" :height="IconLengh">
           <!-- 南相位 -->
           <path id="南左转" :class="Data.name === '南左转' ? '' : 'invisible'" d="M18.9,11v24h3V10.9c0-3.1-2.6-5.7-5.7-5.8l-2.9-0.4L13.8,1L4.1,4.9l8.2,6.5l0.5-3.7l3.3,0.5
@@ -41,16 +49,16 @@ L3.3,16l9,5.3v-3.8h4.3C19.8,17.5,22.4,14.5,22.4,10.8z" :fill="this.FlashColor ?
           <path id="南右转" :class="Data.name === '南右转' ? '' : 'invisible'" d="M10.2,8.1l3-0.4l0.5,3.7l8.2-6.5L12.2,1l0.5,3.7L9.8,5.1c-3.2,0-5.7,2.6-5.7,5.8V35h3V10.9
             c0-1.5,1.3-2.8,2.8-2.8H10.2z" :fill="this.FlashColor ? this.FlashColor : (Data.color ? Data.color : defaultColor)"/>
           <polygon id="南直行" :class="Data.name === '南直行' ? '' : 'invisible'" points="14.5,35 14.5,10.1 18.2,10.1 13,0.9 7.8,10.1 11.5,10.1 11.5,35 " :fill="this.FlashColor ? this.FlashColor : (Data.color ? Data.color : defaultColor)"/>
-          <path id="南掉头" :class="Data.name === '南掉头' ? '' : 'invisible'" d="M10.8,13.6c-3.7,0-6.7,2.6-6.7,5.8V35h3V19.4c0-1.5,1.7-2.8,3.7-2.8s3.7,1.3,3.7,2.8v4.3h-3.7
-l5.2,9.1l5.2-9.1h-3.8v-4.3C17.4,16.2,14.4,13.6,10.8,13.6z" :fill="this.FlashColor ? this.FlashColor : (Data.color ? Data.color : defaultColor)"/>
+          <!-- <path id="南掉头" :class="Data.name === '南掉头' ? '' : 'invisible'" d="M10.8,13.6c-3.7,0-6.7,2.6-6.7,5.8V35h3V19.4c0-1.5,1.7-2.8,3.7-2.8s3.7,1.3,3.7,2.8v4.3h-3.7
+l5.2,9.1l5.2-9.1h-3.8v-4.3C17.4,16.2,14.4,13.6,10.8,13.6z" :fill="this.FlashColor ? this.FlashColor : (Data.color ? Data.color : defaultColor)"/> -->
           <!-- 北相位 -->
             <path id="北左转" :class="Data.name === '北左转' ? '' : 'invisible'" d="M7.1,25V1h-3v24.1c0,3.1,2.6,5.7,5.7,5.8l2.9,0.4L12.2,35l9.7-3.9l-8.2-6.5l-0.5,3.7l-3.3-0.5
               C8.4,27.8,7.1,26.6,7.1,25L7.1,25z" :fill="this.FlashColor ? this.FlashColor : (Data.color ? Data.color : defaultColor)"/>
             <path id="北右转" :class="Data.name === '北右转' ? '' : 'invisible'" d="M15.8,27.9l-3,0.4l-0.5-3.7l-8.2,6.5l9.7,3.9l-0.5-3.7l2.9-0.4c3.2,0,5.7-2.6,5.7-5.8V1h-3v24.1
               c0,1.5-1.3,2.8-2.8,2.8H15.8z" :fill="this.FlashColor ? this.FlashColor : (Data.color ? Data.color : defaultColor)"/>
             <polygon id="北直行" :class="Data.name === '北直行' ? '' : 'invisible'" points="11.5,0.9 11.5,25.9 7.8,25.9 13,35 18.2,25.9 14.5,25.9 14.5,0.9 " :fill="this.FlashColor ? this.FlashColor : (Data.color ? Data.color : defaultColor)"/>
-            <path id="北掉头" :class="Data.name === '北掉头' ? '' : 'invisible'" d="M15.2,22.4c3.7,0,6.7-2.6,6.7-5.8V1h-3v15.7c0,1.5-1.7,2.8-3.7,2.8s-3.7-1.3-3.7-2.8v-4.3h3.7
-L10,3.3l-5.2,9h3.7v4.3C8.5,19.8,11.5,22.4,15.2,22.4z" :fill="this.FlashColor ? this.FlashColor : (Data.color ? Data.color : defaultColor)"/>
+            <!-- <path id="北掉头" :class="Data.name === '北掉头' ? '' : 'invisible'" d="M15.2,22.4c3.7,0,6.7-2.6,6.7-5.8V1h-3v15.7c0,1.5-1.7,2.8-3.7,2.8s-3.7-1.3-3.7-2.8v-4.3h3.7
+L10,3.3l-5.2,9h3.7v4.3C8.5,19.8,11.5,22.4,15.2,22.4z" :fill="this.FlashColor ? this.FlashColor : (Data.color ? Data.color : defaultColor)"/> -->
         </svg>
       </div>
   </div>
@@ -64,12 +72,17 @@ export default {
       FlashColor: undefined,
       GreenColor: '#77fb65',
       YellowColor: '#f7b500',
-      lastType: ''
+      lastType: '',
+      clickedColor: '#299bcc',
+      disabledColor: '#828282'
     }
   },
   watch: {
     Data: {
       handler: function (val) {
+        if (this.isVipRoute) {
+          this.handleStatus()
+        }
         if (this.lastType === '') {
           if (val.type === 4 || val.type === '黄闪') {
           // 绿闪：绿-》灰-》绿 循环效果
@@ -105,12 +118,73 @@ export default {
       type: String,
       default: '22px'
     },
+    IconLenghDiaoTou: {
+      type: String,
+      default: '18.11px'
+    },
+    IconWdithDiaoTou: {
+      type: String,
+      default: '14.47px'
+    },
     Data: {
       type: Object
+    },
+    clickMode: {
+      type: Boolean,
+      default: false
+    },
+    isVipRoute: {
+      type: Boolean,
+      default: false
     }
   },
-  methods: {},
-  mounted () {}
+  methods: {
+    handleClick (e) {
+      let clickedPath = e.target
+      // console.log(clickedPath)
+      if (clickedPath) {
+        // 在这里对找到的元素进行操作
+        if (clickedPath.getAttribute('disabled') === 'true') {
+          return
+        }
+        if (clickedPath.getAttribute('fill') === this.clickedColor) {
+          clickedPath.setAttribute('fill', '#fff')
+          this.$emit('handleClickPhaseIcon', this.Data.key, 'cancle')
+        } else {
+          clickedPath.setAttribute('fill', this.clickedColor)
+          this.$emit('handleClickPhaseIcon', this.Data.key, 'clicked')
+        }
+      }
+    },
+    handleStatus () {
+      let IconDom = document.getElementById(this.Data.key)
+      let DirDom = IconDom.querySelector(`#${this.Data.name}`)
+      if (this.Data.clicked === true) {
+        DirDom.setAttribute('fill', this.clickedColor)
+      }
+      if (this.clickMode && this.Data.disabled === true) {
+        DirDom.setAttribute('fill', this.disabledColor)
+        DirDom.setAttribute('disabled', 'true')
+      }
+      if (this.Data.disabled === undefined && this.Data.clicked === undefined) {
+        DirDom.setAttribute('fill', this.defaultColor)
+        DirDom.removeAttribute('disabled')
+      }
+    },
+    IconAddEvent () {
+      let IconDom = document.getElementById(this.Data.key)
+      let DirDom = IconDom.querySelector(`#${this.Data.name}`)
+      if (this.clickMode && DirDom.getAttribute('class') !== 'invisible') {
+        DirDom.addEventListener('click', this.handleClick)
+      }
+    }
+  },
+  mounted () {
+    if (this.isVipRoute) {
+      this.handleStatus()
+      this.IconAddEvent()
+    }
+  }
 }
 </script>
 <style scoped>