openatc-components 0.2.80 → 0.2.81

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

@@ -240,10 +240,12 @@ export default {
       default: ''
     },
     choosedDirection: {
-      type: Array
+      type: Array,
+      default: () => []
     },
     choosedPedDirection: {
-      type: Array
+      type: Array,
+      default: () => []
     },
     isVipRoute: { // 区分普通路口和VIP路口，如果是vip路口（特勤路线和分组管控），才需要获取通道和处理通道冲突，并显示已选方向
       type: Boolean,
@@ -256,6 +258,10 @@ export default {
     isThirdSignal: {
       type: Boolean,
       default: false
+    },
+    channelType: {
+      type: Boolean,
+      default: false
     }
   },
   // computed: {
@@ -273,10 +279,21 @@ export default {
       handler: function (val, oldVal) {
         // 路口状态数据
         this.statusData = JSON.parse(JSON.stringify(val))
-        this.phaseStatusList = val.phase
-        this.overlapStatusList = val.overlap
         // 默认显示相位数据（包括黄闪、全红、关灯状态下，或者匝道，均不做比对跟随相位的处理）
         this.drawDefaultPhaseIcon()
+
+        if (this.channelType) {
+          // 通道路口图状态数据
+          this.channelStatusList = val.channellamp
+          this.createChannelStatusMap()
+          this.getChannelPhaseStatus()
+          this.getChannelPedStatus()
+          return
+        }
+
+        // 模版路口图状态数据
+        this.phaseStatusList = val.phase
+        this.overlapStatusList = val.overlap
         if (val.control === 1 || val.control === 2 || val.control === 3) {
           // 黄闪、全红、关灯属于特殊控制，优先级最高，直接改变灯色，不用判断phase里的type，也不需要考虑跟随相位的灯色优先级
           if (val.control === 1) {
@@ -375,7 +392,9 @@ export default {
       comdirePhaseData: [], // 对比相同方向车道相位数据后，被删减的唯一direction的数组
       comdireOverlapPhaseData: [], // 对比相同方向车道跟随相位数据后，被删减的唯一direction的数组
       busPhaseData: [], // 公交相位数据
-      comdireBusPhaseData: [] //  对比相同方向公交车道数据后，被删减的唯一direction的数组
+      comdireBusPhaseData: [], //  对比相同方向公交车道数据后，被删减的唯一direction的数组
+      channelStatusMap: new Map(), // 通道实时状态映射
+      channelStatusList: [] // 通道实时状态列表
     }
   },
   methods: {
@@ -669,6 +688,10 @@ export default {
           this.getChannelInfo()
           return
         }
+        if (this.channelType) {
+          this.getChannelInfo()
+          return
+        }
         this.crossInfo = res.data.data.param
         if (this.mainType === '100' || this.mainType === '101' || this.mainType === '104') {
           // 城市道路加载车道相位坐标和人行道坐标
@@ -966,19 +989,33 @@ export default {
     },
     handleRepeatRealdir (channelList) {
       // 按realdir去掉重复方向的数据
+      let dirChannelList = channelList.filter(ele => ele.type === 0 || ele.type === 1 || ele.type === 3)
+      let pedDirChannelList = channelList.filter(ele => ele.type === 2)
       let map = new Map()
-      channelList.forEach(ele => {
+      let map2 = new Map()
+      dirChannelList.forEach(ele => {
         ele.realdir.forEach(dir => {
           if (map.get(dir) === undefined) {
             map.set(dir, ele)
           }
         })
       })
+      pedDirChannelList.forEach(ele => {
+        ele.realdir.forEach(dir => {
+          if (map2.get(dir) === undefined) {
+            map2.set(dir, ele)
+          }
+        })
+      })
       let arr = Array.from(map)
+      let pedarr = Array.from(map2)
       let newarr = []
       arr.forEach(ele => {
         newarr.push(ele[1])
       })
+      pedarr.forEach(ele => {
+        newarr.push(ele[1])
+      })
       // console.log(newarr)
       return newarr
     },
@@ -1010,12 +1047,17 @@ export default {
             ele.realdir.forEach((dir, index) => {
               // 行人相位
               if (this.sidewalkDir.indexOf(dir) === -1 && this.PhaseDataModel.getSidePos(dir)) {
-                this.sidewalkPhaseData.push({
+                let obj = {
                   key: this.CrossDiagramMgr.getUniqueKey('pedphase') + `-${this.agentId}`,
                   channelid: ele.id, // 通道id
                   id: dir,
                   name: this.PhaseDataModel.getSidePos(dir).name
-                })
+                }
+                if (this.channelType) {
+                  obj.left = this.PhaseDataModel.getSidePos(dir).x
+                  obj.top = this.PhaseDataModel.getSidePos(dir).y
+                }
+                this.sidewalkPhaseData.push(obj)
               }
             })
             realpeddirarr = Array.from(new Set(realpeddirarr.concat(ele.realdir)))
@@ -1030,7 +1072,7 @@ export default {
     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) {
+      if (!this.isThirdSignal && this.isVipRoute) {
         await this.getConflictList()
         this.handleClickedPhase()
         this.compLanePhaseData = JSON.parse(JSON.stringify(this.LanePhaseData))
@@ -1140,6 +1182,60 @@ export default {
           // console.log(this.LanePhaseData)
         }
       })
+    },
+    createChannelStatusMap () {
+      // 生成相位id和相位状态对应数据结构
+      this.channelStatusList.map(channel => {
+        let channelId = channel.id
+        let channelInfo = {
+          light: channel.light
+        }
+        this.channelStatusMap.set(channelId, channelInfo)
+      })
+    },
+    getChannelPhaseStatus () {
+      // 通道相位机动车状态
+      this.comdirePhaseData = []
+      let curLanePhaseData = []
+      for (let i = 0; i < this.LanePhaseData.length; i++) {
+        let curPhaseStatus = this.channelStatusMap.get(this.LanePhaseData[i].channelid)
+        if (!curPhaseStatus) continue
+        const data = {
+          ...this.LanePhaseData[i],
+          type: curPhaseStatus.light,
+          color: this.ColorMap.get(curPhaseStatus.light),
+          flag: 'phasechannel' // 车道相位数据标识
+        }
+        curLanePhaseData.push(data)
+      }
+      this.LanePhaseData = JSON.parse(JSON.stringify(curLanePhaseData))
+      this.compLanePhaseData = JSON.parse(JSON.stringify(this.LanePhaseData))
+    },
+    getChannelPedStatus () {
+      // 通道行人相位状态
+      let curPedStatus = []
+      for (let i = 0; i < this.sidewalkPhaseData.length; i++) {
+        console.log(this.sidewalkPhaseData[i])
+        if (this.sidewalkPhaseData[i].channelid) {
+          let curPhaseStatus = this.channelStatusMap.get(this.sidewalkPhaseData[i].channelid)
+          if (!curPhaseStatus) continue
+          const data = {
+            ...this.sidewalkPhaseData[i],
+            pedtype: curPhaseStatus.light,
+            color: this.ColorMap.get(curPhaseStatus.light),
+            flag: 'pedchannel' // 行人相位数据标识
+          }
+          curPedStatus.push(data)
+        } else {
+          // 无状态的行人道
+          const data = {
+            ...this.sidewalkPhaseData[i],
+            pedtype: undefined
+          }
+          curPedStatus.push(data)
+        }
+      }
+      this.compSidewalkPhaseData = JSON.parse(JSON.stringify(curPedStatus))
     }
   },
   mounted () {

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

@@ -12,11 +12,11 @@
 <template>
   <div :id="Data.key" :style="{position: 'absolute', left: Data.left, top: Data.top}">
     <div :class="Data.id < 9 ? '' : 'hide'">
-      <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">
+      <!-- <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="M4.876,3.054H8.5V0.039L16.07,4.276,8.411,8.513V5.5H4.792C3.53,5.5,2.436,6.883,2.436,8.513s1.094,3.015,2.357,3.015H18.006v2.444H4.876A5.2,5.2,0,0,1-.005,8.513,5.2,5.2,0,0,1,4.876,3.054Z" transform="translate(0 -0.031)" :fill="this.FlashColor ? this.FlashColor : (Data.color ? Data.color : defaultColor)"/>
         <path id="西掉头" :class="Data.name === '西掉头' ? '' : 'invisible'" d="M13.124,10.964H9.5v3.028L1.93,9.736,9.589,5.48V8.508h3.619c1.262,0,2.357-1.391,2.357-3.028S14.47,2.452,13.208,2.452H-0.006V0H13.124c2.693,0,4.881,2.455,4.881,5.483S15.817,10.964,13.124,10.964Z" :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"
+      </svg> -->
+      <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"
         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
@@ -24,24 +24,22 @@
           <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="M1.1,14.5c0,3.7,2.6,6.7,5.8,6.7H35v-3H6.8c-1.5,0-2.8-1.7-2.8-3.7s1.3-3.7,2.8-3.7h4.3v3.7l9.1-5.2l-9-5.2v3.7H6.9C3.7,7.8,1.1,10.8,1.1,14.5z" :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="M34.9,10.8c0-3.7-2.6-6.7-5.8-6.7H0.9v3h28.3c1.5,0,2.8,1.7,2.8,3.7s-1.3,3.7-2.8,3.7h-4.3v-3.7L15.8,16l9,5.2v-3.7h4.3C32.3,17.5,34.9,14.5,34.9,10.8z" :fill="this.FlashColor ? this.FlashColor : (Data.color ? Data.color : defaultColor)"/>
         </svg>
       </div>
       <div :class="Data.id >= 9 ? '' : 'hide'">
-        <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">
+        <!-- <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="M10.946,4.876V8.5h3.015L9.724,16.07,5.487,8.411H8.5V4.792c0-1.262-1.385-2.357-3.015-2.357S2.472,3.53,2.472,4.792V18.006H0.028V4.876A5.2,5.2,0,0,1,5.487-.005,5.2,5.2,0,0,1,10.946,4.876Z" transform="translate(-0.031)" :fill="this.FlashColor ? this.FlashColor : (Data.color ? Data.color : defaultColor)"/>
           <path id="北掉头" :class="Data.name === '北掉头' ? '' : 'invisible'" d="M3.036,13.124V9.5H0.008L4.264,1.93,8.52,9.589H5.492v3.619c0,1.262,1.391,2.357,3.028,2.357s3.028-1.094,3.028-2.357V-0.006H14V13.124c0,2.693-2.455,4.881-5.483,4.881S3.036,15.817,3.036,13.124Z" :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"
+        </svg> -->
+        <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"
           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
@@ -49,16 +47,14 @@ 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="M11.5,1.1c-3.7,0-6.7,2.6-6.7,5.8V35h3V6.8C7.8,5.3,9.5,4,11.5,4s3.7,1.3,3.7,2.8v4.3h-3.7l5.2,9.1l5.2-9h-3.7V6.9C18.2,3.7,15.2,1.1,11.5,1.1z" :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="M14.5,34.9c3.7,0,6.7-2.6,6.7-5.8V0.9h-3v28.3c0,1.5-1.7,2.8-3.7,2.8s-3.7-1.3-3.7-2.8v-4.3h3.7l-5.2-9.1l-5.2,9h3.7v4.3C7.8,32.3,10.8,34.9,14.5,34.9z" :fill="this.FlashColor ? this.FlashColor : (Data.color ? Data.color : defaultColor)"/>
         </svg>
       </div>
   </div>
@@ -140,8 +136,9 @@ export default {
   },
   methods: {
     handleClick (e) {
-      let clickedPath = e.target
-      // console.log(clickedPath)
+      let clickedSvg = e.currentTarget
+      // console.log(clickedSvg)
+      let clickedPath = clickedSvg.querySelector(`#${this.Data.name}`)
       if (clickedPath) {
         // 在这里对找到的元素进行操作
         if (clickedPath.getAttribute('disabled') === 'true') {
@@ -173,9 +170,12 @@ export default {
     },
     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)
+      // let DirDom = IconDom.querySelector(`#${this.Data.name}`)
+      // if (this.clickMode && DirDom.getAttribute('class') !== 'invisible') {
+      //   DirDom.addEventListener('click', this.handleClick)
+      // }
+      if (this.clickMode) {
+        IconDom.addEventListener('click', this.handleClick)
       }
     }
   },

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

@@ -12,35 +12,33 @@
 <template>
   <div :id="Data.key" :style="{position: 'absolute', left: Data.left, top: Data.top}">
     <div :class="Data.id < 9 ? '' : 'hide'">
-      <svg v-if="Data.id === 4 || Data.id === 8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 14" :width="IconLenghDiaoTou" :height="IconWdithDiaoTou">
+      <!-- <svg v-if="Data.id === 4 || Data.id === 8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 14" :width="IconLenghDiaoTou" :height="IconWdithDiaoTou">
         <path id="东掉头" :class="Data.name === '东掉头' ? '' : 'invisible'" d="M4.876,10.981H8.5v3.042L16.07,9.748,8.411,5.474V8.515H4.792c-1.262,0-2.357-1.4-2.357-3.042S3.53,2.432,4.792,2.432H18.006V-0.034H4.876c-2.693,0-4.881,2.466-4.881,5.508S2.183,10.981,4.876,10.981Z" :fill="this.FlashColor ? this.FlashColor : (Data.color ? Data.color : defaultColor)"/>
         <path id="西掉头" :class="Data.name === '西掉头' ? '' : 'invisible'" d="M13.124,3.036H9.5V0.008L1.93,4.264,9.589,8.52V5.492h3.619c1.262,0,2.357,1.391,2.357,3.028s-1.094,3.028-2.357,3.028H-0.006V14H13.124c2.693,0,4.881-2.455,4.881-5.483S15.817,3.036,13.124,3.036Z" :fill="this.FlashColor ? this.FlashColor : (Data.color ? Data.color : defaultColor)"/>
-      </svg>
-      <svg v-else xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 36 26" :width="IconLengh" :height="IconWdith">
+      </svg> -->
+      <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 36 26" :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
             C8.2,8.4,9.4,7.1,11,7.1L11,7.1z" :fill="this.FlashColor ? this.FlashColor : (Data.color ? Data.color : defaultColor)"/>
           <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="M19.4,17.5h4.3v3.7l9.1-5.2l-9.1-5.2v3.7h-4.3c-1.5,0-2.8-1.7-2.8-3.7s1.3-3.7,2.8-3.7H35v-3H19.4
-            c-3.2,0-5.8,3-5.8,6.7C13.6,14.5,16.2,17.5,19.4,17.5z" :fill="this.FlashColor ? this.FlashColor : (Data.color ? Data.color : defaultColor)"/> -->
+          <path id="东掉头" :class="Data.name === '东掉头' ? '' : 'invisible'" d="M6.9,17.5h4.3v3.7l9-5.2l-9.1-5.2v3.7H6.8c-1.5,0-2.8-1.7-2.8-3.7s1.3-3.7,2.8-3.7H35v-3H6.9c-3.2,0-5.8,3-5.8,6.7C1.1,14.5,3.7,17.5,6.9,17.5z" :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="M16.6,8.5h-4.3V4.7L3.3,10l9.1,5.2v-3.7h4.3c1.5,0,2.8,1.7,2.8,3.7s-1.3,3.7-2.8,3.7H1v3h15.6
-            c3.2,0,5.8-3,5.8-6.7C22.4,11.5,19.8,8.5,16.6,8.5z" :fill="this.FlashColor ? this.FlashColor : (Data.color ? Data.color : defaultColor)"/> -->
+          <path id="西掉头" :class="Data.name === '西掉头' ? '' : 'invisible'" d="M29.1,8.5h-4.3V4.8l-9,5.2l9.1,5.2v-3.7h4.3c1.5,0,2.8,1.7,2.8,3.7s-1.3,3.7-2.8,3.7H0.9v3h28.2c3.2,0,5.8-3,5.8-6.7C34.9,11.5,32.3,8.5,29.1,8.5z" :fill="this.FlashColor ? this.FlashColor : (Data.color ? Data.color : defaultColor)"/>
         </svg>
       </div>
       <div :class="Data.id >= 9 ? '' : 'hide'">
-        <svg v-if="Data.id === 12 || Data.id === 16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 18" :width="IconWdithDiaoTou" :height="IconLenghDiaoTou">
+        <!-- <svg v-if="Data.id === 12 || Data.id === 16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 18" :width="IconWdithDiaoTou" :height="IconLenghDiaoTou">
           <path id="南掉头" :class="Data.name === '南掉头' ? '' : 'invisible'" d="M3.036,4.876V8.5H0.008L4.264,16.07,8.52,8.411H5.492V4.792c0-1.262,1.391-2.357,3.028-2.357s3.028,1.094,3.028,2.357V18.006H14V4.876C14,2.183,11.548-.005,8.52-0.005S3.036,2.183,3.036,4.876Z" :fill="this.FlashColor ? this.FlashColor : (Data.color ? Data.color : defaultColor)" />
           <path id="北掉头" :class="Data.name === '北掉头' ? '' : 'invisible'" d="M10.981,13.124V9.5h3.042L9.748,1.93,5.474,9.589H8.515v3.619c0,1.262-1.4,2.357-3.042,2.357S2.432,14.47,2.432,13.208V-0.006H-0.034V13.124c0,2.693,2.466,4.881,5.508,4.881S10.981,15.817,10.981,13.124Z" :fill="this.FlashColor ? this.FlashColor : (Data.color ? Data.color : defaultColor)" />
-        </svg>
-        <svg v-else xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
+        </svg> -->
+        <svg xmlns="http://www.w3.org/2000/svg" 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
@@ -48,16 +46,14 @@
           <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="M8.5,19.4v4.3H4.7l5.2,9.1l5.2-9.1h-3.7v-4.3c0-1.5,1.7-2.8,3.7-2.8s3.7,1.3,3.7,2.8V35h3V19.4
-            c0-3.2-3-5.8-6.7-5.8C11.5,13.6,8.5,16.2,8.5,19.4z" :fill="this.FlashColor ? this.FlashColor : (Data.color ? Data.color : defaultColor)"/> -->
+          <path id="南掉头" :class="Data.name === '南掉头' ? '' : 'invisible'" d="M8.5,6.9v4.3H4.8l5.2,9l5.2-9.1h-3.7V6.8c0-1.5,1.7-2.8,3.7-2.8s3.7,1.3,3.7,2.8V35h3V6.9c0-3.2-3-5.8-6.7-5.8C11.5,1.1,8.5,3.7,8.5,6.9z" :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="M17.5,16.6v-4.3h3.7L16,3.3l-5.2,9.1h3.7v4.3c0,1.5-1.7,2.8-3.7,2.8s-3.7-1.3-3.7-2.8V1h-3v15.6
-              c0,3.2,3,5.8,6.7,5.8C14.5,22.4,17.5,19.8,17.5,16.6z" :fill="this.FlashColor ? this.FlashColor : (Data.color ? Data.color : defaultColor)"/> -->
+            <path id="北掉头" :class="Data.name === '北掉头' ? '' : 'invisible'" d="M17.5,29.1v-4.3h3.7l-5.2-9l-5.2,9.1h3.7v4.3c0,1.5-1.7,2.8-3.7,2.8s-3.7-1.3-3.7-2.8V0.9h-3v28.2c0,3.2,3,5.8,6.7,5.8C14.5,34.9,17.5,32.3,17.5,29.1z" :fill="this.FlashColor ? this.FlashColor : (Data.color ? Data.color : defaultColor)"/>
         </svg>
       </div>
   </div>
@@ -139,8 +135,9 @@ export default {
   },
   methods: {
     handleClick (e) {
-      let clickedPath = e.target
-      // console.log(clickedPath)
+      let clickedSvg = e.currentTarget
+      // console.log(clickedSvg)
+      let clickedPath = clickedSvg.querySelector(`#${this.Data.name}`)
       if (clickedPath) {
         // 在这里对找到的元素进行操作
         if (clickedPath.getAttribute('disabled') === 'true') {
@@ -172,9 +169,12 @@ export default {
     },
     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)
+      // let DirDom = IconDom.querySelector(`#${this.Data.name}`)
+      // if (this.clickMode && DirDom.getAttribute('class') !== 'invisible') {
+      //   DirDom.addEventListener('click', this.handleClick)
+      // }
+      if (this.clickMode) {
+        IconDom.addEventListener('click', this.handleClick)
       }
     }
   },

package/src/kisscomps/components/IntersectionMap/crossDirection/posJson/phasePos.json

@@ -24,8 +24,8 @@
       "id": 4,
       "name": "东掉头",
       "ename": "East-Back",
-      "x": "602px",
-      "y": "300px"
+      "x": "588px",
+      "y": "325px"
     },
     {
       "id": 5,
@@ -52,8 +52,8 @@
       "id": 8,
       "name": "西掉头",
       "ename": "West-Back",
-      "x": "247px",
-      "y": "333px"
+      "x": "244px",
+      "y": "300px"
     },
     {
       "id": 9,
@@ -80,8 +80,8 @@
       "id": 12,
       "name": "北掉头",
       "ename": "North-Back",
-      "x": "412px",
-      "y": "137px"
+      "x": "436px",
+      "y": "134px"
     },
     {
       "id": 13,
@@ -108,8 +108,8 @@
       "id": 16,
       "name": "南掉头",
       "ename": "South-Back",
-      "x": "444px",
-      "y": "489px"
+      "x": "412px",
+      "y": "476px"
     }
   ]
 }

package/src/kisscomps/components/IntersectionMap/crossDirection/posJson/phasePos.left.json

@@ -24,8 +24,8 @@
       "id": 4,
       "name": "东掉头",
       "ename": "East-Back",
-      "x": "604px",
-      "y": "334px"
+      "x": "591px",
+      "y": "301px"
     },
     {
       "id": 5,
@@ -52,8 +52,8 @@
       "id": 8,
       "name": "西掉头",
       "ename": "West-Back",
-      "x": "248px",
-      "y": "301px"
+      "x": "246px",
+      "y": "325px"
     },
     {
       "id": 9,
@@ -80,8 +80,8 @@
       "id": 12,
       "name": "北掉头",
       "ename": "North-Back",
-      "x": "446px",
-      "y": "138px"
+      "x": "412px",
+      "y": "135px"
     },
     {
       "id": 13,
@@ -108,8 +108,8 @@
       "id": 16,
       "name": "南掉头",
       "ename": "South-Back",
-      "x": "412px",
-      "y": "495px"
+      "x": "436px",
+      "y": "481px"
     }
   ]
 }

package/src/kisscomps/components/IntersectionMap/intersectionmap.vue

@@ -40,6 +40,7 @@
       :isVipRoute="isVipRoute"
       :clickMode="clickMode"
       :isThirdSignal="isThirdSignal"
+      :channelType="channelType"
       @handleClickCrossIcon="handleClickCrossIcon" />
   </div>
 </div>
@@ -125,6 +126,10 @@ export default {
     isThirdSignal: {
       type: Boolean,
       default: false
+    },
+    channelType: {
+      type: Boolean,
+      default: false
     }
   },
   watch: {
@@ -143,6 +148,13 @@ export default {
           this.reset = true
         }
       }
+    },
+    channelType: {
+      handler: function (val, oldVal) {
+        if (val) {
+          this.reset = true
+        }
+      }
     }
   },
   created () {
@@ -152,7 +164,7 @@ export default {
   },
   mounted () {
     this.getParentSize()
-    if (this.isVipRoute) {
+    if (this.isVipRoute || this.channelType) {
       this.reset = true
     }
   },