openatc-components 0.1.190 → 0.1.192

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

@@ -10,30 +10,37 @@
  * 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"
-        viewBox="0 0 36 26" style="enable-background:new 0 0 36 26;" xml:space="preserve" :width="IconLengh" :height="IconWdith">
+      <svg v-if="Data.id === 4 || Data.id === 8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18.11 14.47" :width="IconLenghDiaoTou" :height="IconWdithDiaoTou">
+        <path id="东掉头" :class="Data.name === '东掉头' ? '' : 'invisible'" d="M4.91,11.34H8.55v3.13l7.7-4.4-7.7-4.4V8.8H4.91c-1.27,0-2.37-1.44-2.37-3.13s1.1-3.13,2.37-3.13h13.2V0H4.91C2.2,0,0,2.54,0,5.67S2.2,11.34,4.91,11.34Z" :fill="this.FlashColor ? this.FlashColor : (Data.color ? Data.color : defaultColor)"/>
+        <path id="西掉头" :class="Data.name === '西掉头' ? '' : 'invisible'" d="M13.2,3.22H9.56V0L2,4.48l7.7,4.4V5.75h3.63c1.27,0,2.37,1.44,2.37,3.13S14.55,12,13.28,12H0v2.53H13.2c2.71,0,4.91-2.53,4.91-5.67S15.91,3.22,13.2,3.22Z" :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">
           <!-- 东相位 -->
           <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="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="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="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)"/> -->
         </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" viewBox="0 0 14.47 18.11" :width="IconWdithDiaoTou" :height="IconLenghDiaoTou">
+          <path id="南掉头" :class="Data.name === '南掉头' ? '' : 'invisible'" d="M3.22,4.91V8.55H0l4.4,7.7,4.4-7.7H5.67V4.91c0-1.27,1.44-2.37,3.13-2.37s3.13,1.1,3.13,2.37v13.2h2.54V4.91C14.47,2.2,11.93,0,8.8,0S3.22,2.2,3.22,4.91Z" :fill="this.FlashColor ? this.FlashColor : (Data.color ? Data.color : defaultColor)" />
+          <path id="北掉头" :class="Data.name === '北掉头' ? '' : 'invisible'" d="M11.34,13.2V9.56h3.13L10.07,2l-4.4,7.7H8.8v3.63c0,1.27-1.44,2.37-3.13,2.37s-3.13-1.1-3.13-2.37V0H0V13.2c0,2.71,2.54,4.91,5.67,4.91S11.34,15.91,11.34,13.2Z" :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 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 +48,16 @@
           <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,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="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,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)"/> -->
         </svg>
       </div>
   </div>
@@ -64,12 +71,17 @@ export default {
       FlashColor: undefined,
       GreenColor: '#77fb65',
       YellowColor: '#f7b500',
-      lastStatus: ''
+      lastStatus: '',
+      clickedColor: '#299bcc',
+      disabledColor: '#828282'
     }
   },
   watch: {
     Data: {
       handler: function (val) {
+        if (this.isVipRoute) {
+          this.handleStatus()
+        }
         if (this.lastStatus === '') {
           if (val.type === 4 || val.type === '黄闪') {
             // 绿闪：绿-》灰-》绿 循环效果
@@ -105,12 +117,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>

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

@@ -2,98 +2,114 @@
   "phaseList": [{
       "id": 1,
       "name": "东直行",
+      "ename": "East-Straight",
       "x": "588px",
       "y": "267px"
     },
     {
       "id": 2,
       "name": "东左转",
+      "ename": "East-Left",
       "x": "588px",
       "y": "297px"
     },
     {
       "id": 3,
       "name": "东右转",
+      "ename": "East-Right",
       "x": "588px",
       "y": "238px"
     },
     {
       "id": 4,
       "name": "东掉头",
-      "x": "588px",
-      "y": "297px"
+      "ename": "East-Back",
+      "x": "601px",
+      "y": "297.8px"
     },
     {
       "id": 5,
       "name": "西直行",
+      "ename": "West-Straight",
       "x": "244px",
       "y": "359px"
     },
     {
       "id": 6,
       "name": "西左转",
+      "ename": "West-Left",
       "x": "244px",
       "y": "329px"
     },
     {
       "id": 7,
       "name": "西右转",
+      "ename": "West-Right",
       "x": "244px",
       "y": "388px"
     },
     {
       "id": 8,
       "name": "西掉头",
-      "x": "244px",
-      "y": "329px"
+      "ename": "West-Back",
+      "x": "246px",
+      "y": "330.8px"
     },
     {
       "id": 9,
       "name": "北直行",
+      "ename": "North-Straight",
       "x": "379px",
       "y": "134px"
     },
     {
       "id": 10,
       "name": "北左转",
+      "ename": "North-Left",
       "x": "408px",
       "y": "134px"
     },
     {
       "id": 11,
       "name": "北右转",
+      "ename": "North-Right",
       "x": "348px",
       "y": "134px"
     },
     {
       "id": 12,
       "name": "北掉头",
-      "x": "408px",
-      "y": "134px"
+      "ename": "North-Back",
+      "x": "411px",
+      "y": "136px"
     },
     {
       "id": 13,
       "name": "南直行",
+      "ename": "South-Straight",
       "x": "470px",
       "y": "476px"
     },
     {
       "id": 14,
       "name": "南左转",
+      "ename": "South-Left",
       "x": "440px",
       "y": "476px"
     },
     {
       "id": 15,
       "name": "南右转",
+      "ename": "South-Right",
       "x": "500px",
       "y": "476px"
     },
     {
       "id": 16,
       "name": "南掉头",
-      "x": "440px",
-      "y": "476px"
+      "ename": "South-Back",
+      "x": "444px",
+      "y": "490px"
     }
   ]
 }

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

@@ -2,98 +2,114 @@
   "phaseList": [{
       "id": 1,
       "name": "东直行",
+      "ename": "East-Straight",
       "x": "591px",
       "y": "359px"
     },
     {
       "id": 2,
       "name": "东左转",
+      "ename": "East-Left",
       "x": "591px",
       "y": "388px"
     },
     {
       "id": 3,
       "name": "东右转",
+      "ename": "East-Right",
       "x": "591px",
       "y": "330px"
     },
     {
       "id": 4,
       "name": "东掉头",
-      "x": "591px",
-      "y": "330px"
+      "ename": "East-Back",
+      "x": "605px",
+      "y": "331px"
     },
     {
       "id": 5,
       "name": "西直行",
+      "ename": "West-Straight",
       "x": "246px",
       "y": "267px"
     },
     {
       "id": 6,
       "name": "西左转",
+      "ename": "West-Left",
       "x": "246px",
       "y": "238px"
     },
     {
       "id": 7,
       "name": "西右转",
+      "ename": "West-Right",
       "x": "246px",
       "y": "297px"
     },
     {
       "id": 8,
       "name": "西掉头",
-      "x": "246px",
-      "y": "297px"
+      "ename": "West-Back",
+      "x": "248px",
+      "y": "299px"
     },
     {
       "id": 9,
       "name": "北直行",
+      "ename": "North-Straight",
       "x": "471px",
       "y": "135px"
     },
     {
       "id": 10,
       "name": "北左转",
+      "ename": "North-Left",
       "x": "500px",
       "y": "135px"
     },
     {
       "id": 11,
       "name": "北右转",
+      "ename": "North-Right",
       "x": "442px",
       "y": "135px"
     },
     {
       "id": 12,
       "name": "北掉头",
-      "x": "442px",
-      "y": "135px"
+      "ename": "North-Back",
+      "x": "446px",
+      "y": "138px"
     },
     {
       "id": 13,
       "name": "南直行",
+      "ename": "South-Straight",
       "x": "379px",
       "y": "481px"
     },
     {
       "id": 14,
       "name": "南左转",
+      "ename": "South-Left",
       "x": "349px",
       "y": "481px"
     },
     {
       "id": 15,
       "name": "南右转",
+      "ename": "South-Right",
       "x": "408px",
       "y": "481px"
     },
     {
       "id": 16,
       "name": "南掉头",
-      "x": "408px",
-      "y": "481px"
+      "ename": "South-Back",
+      "x": "411px",
+      "y": "495px"
     }
   ]
 }

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

@@ -2,96 +2,144 @@
   "sideList": [{
       "id": 1,
       "name": "东人行横道",
+      "ename": "East-Pedestrian",
+      "desc": "东行人",
+      "svgid": "东行人",
       "x": "310px",
       "y": "198px"
     },
     {
       "id": 2,
       "name": "西人行横道",
+      "ename": "West-Pedestrian",
+      "desc": "西行人",
+      "svgid": "西行人",
       "x": "310px",
       "y": "198px"
     },
     {
       "id": 3,
       "name": "南人行横道",
+      "ename": "South-Pedestrian",
+      "desc": "南行人",
+      "svgid": "南行人",
       "x": "310px",
       "y": "198px"
     },
     {
       "id": 4,
       "name": "北人行横道",
+      "ename": "North-Pedestrian",
+      "desc": "北行人",
+      "svgid": "北行人",
       "x": "310px",
       "y": "198px"
     },
     {
       "id": 5,
       "name": "东人行横道-上",
+      "ename": "East-Top-Pedestrian",
+      "desc": "东行人上",
+      "svgid": "东行人上",
       "x": "310px",
       "y": "198px"
     },
     {
       "id": 6,
       "name": "东人行横道-下",
+      "ename": "East-Bottom-Pedestrian",
+      "desc": "东行人下",
+      "svgid": "东行人下",
       "x": "310px",
       "y": "198px"
     },
     {
       "id": 7,
       "name": "西人行横道-上",
+      "ename": "West-Top-Pedestrian",
+      "desc": "西行人上",
+      "svgid": "西行人上",
       "x": "310px",
       "y": "198px"
     },
     {
       "id": 8,
       "name": "西人行横道-下",
+      "ename": "West-Bottom-Pedestrian",
+      "desc": "西行人下",
+      "svgid": "西行人下",
       "x": "310px",
       "y": "198px"
     },
     {
       "id": 9,
       "name": "南人行横道-左",
+      "ename": "South-Left-Pedestrian",
+      "desc": "南行人左",
+      "svgid": "南行人左",
       "x": "310px",
       "y": "198px"
     },
     {
       "id": 10,
       "name": "南人行横道-右",
+      "ename": "South-Right-Pedestrian",
+      "desc": "南行人右",
+      "svgid": "南行人右",
       "x": "310px",
       "y": "198px"
     },
     {
       "id": 11,
       "name": "北人行横道-左",
+      "ename": "North-Left-Pedestrian",
+      "desc": "北行人左",
+      "svgid": "北行人左",
       "x": "310px",
       "y": "198px"
     },
     {
       "id": 12,
       "name": "北人行横道-右",
+      "ename": "North-Right-Pedestrian",
+      "desc": "北行人右",
+      "svgid": "北行人右",
       "x": "310px",
       "y": "198px"
     },
     {
       "id": 13,
       "name": "X人行横道-/",
+      "ename": "X-/-Pedestrian",
+      "desc": "/行人",
+      "svgid": "斜杠行人",
       "x": "310px",
       "y": "198px"
     },
     {
       "id": 14,
       "name": "X人行横道-\\",
+      "ename": "X-\\-Pedestrian",
+      "desc": "\\行人",
+      "svgid": "反斜杠行人",
       "x": "310px",
       "y": "198px"
     },
     {
       "id": 15,
-      "name": "东西路段人行横道",
+      "name": "南北路段人行横道",
+      "ename": "East-West-Pedestrian",
+      "desc": "南北路段行人",
+      "svgid": "南北路段行人",
       "x": "310px",
       "y": "198px"
     },
     {
       "id": 16,
-      "name": "南北路段人行横道",
+      "name": "东西路段人行横道",
+      "ename": "South-North-Pedestrian",
+      "desc": "东西路段行人",
+      "svgid": "东西路段行人",
       "x": "310px",
       "y": "198px"
     },

package/src/kisscomps/components/IntersectionMap/crossDirection/utils.js

@@ -48,6 +48,12 @@ export default class PhaseDataModel {
         x: phase.x,
         y: phase.y
       }
+      if (phase.ename) {
+        value.ename = phase.ename
+      }
+      if (phase.desc) {
+        value.desc = phase.desc
+      }
       phaseMap.set(phase.id, value)
     })
   }

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

@@ -34,7 +34,13 @@
       :modeName="modeName"
       :controlName="controlName"
       :stateName="stateName"
-      :roadDirection="roadDirection" />
+      :roadDirection="roadDirection"
+      :choosedDirection="choosedDirection"
+      :choosedPedDirection="choosedPedDirection"
+      :isVipRoute="isVipRoute"
+      :clickMode="clickMode"
+      :isThirdSignal="isThirdSignal"
+      @handleClickCrossIcon="handleClickCrossIcon" />
   </div>
 </div>
 </template>
@@ -101,6 +107,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
     }
   },
   watch: {
@@ -112,6 +136,13 @@ export default {
       },
       // 深度观察监听
       deep: true
+    },
+    isVipRoute: {
+      handler: function (val, oldVal) {
+        if (val) {
+          this.reset = true
+        }
+      }
     }
   },
   created () {
@@ -121,6 +152,9 @@ export default {
   },
   mounted () {
     this.getParentSize()
+    if (this.isVipRoute) {
+      this.reset = true
+    }
   },
   updated () {
   },
@@ -154,6 +188,9 @@ export default {
       if (token && token !== '') {
         setToken(token)
       }
+    },
+    handleClickCrossIcon (allChoosedDir, curClickedPhase) {
+      this.$emit('handleClickCrossIcon', allChoosedDir, curClickedPhase)
     }
   },
   destroyed () {

package/src/kisscomps/index.js

@@ -28,6 +28,8 @@ import PhaseDirectionText from './components/PhaseDirectionText/index'
 import PhaseDirectionSelect from './components/PhaseDirectionSelect/index'
 import patternConfig from './components/patternConfig/index.vue'
 import XiaoKanBan from './components/XiaoKanBan/index.vue'
+import DirectionListConfiguration from './components/DirectionListConfiguration/index.js'
+import IntersectionDirectionSelection from './components/IntersectionDirectionSelection/index.js'
 import { setToken, setHost, setIsCheckPermission, setUserRoles, setPermissions } from '../utils/auth.js'
 import componentsGlobalParam from '../store/modules/globalParam'
 
@@ -65,7 +67,9 @@ const components = {
   PhaseDirectionText,
   patternConfig,
   XiaoKanBan,
-  PhaseDirectionSelect
+  PhaseDirectionSelect,
+  DirectionListConfiguration,
+  IntersectionDirectionSelection
 }
 
 const language = {