openatc-components 0.5.12 → 0.5.14

package/package/kisscomps/components/IntersectionMap/crossDirection/baseImg/SidewalkClickSvg.vue

@@ -18,6 +18,27 @@
       :height="Height"
       :style="{position: 'absolute', left: '310px', top: '198px', zIndex: '10'}"
     >
+      <defs>
+        <filter id="shadow-effect-side"
+          x="-10%"
+          y="-10%"
+          width="200%"
+          height="200%">
+          <feFlood flood-color="#10B800" flood-opacity="1" result="glowColor" />
+          <feComposite in="glowColor"
+                in2="SourceGraphic"
+                operator="in"
+                result="glowMask" />
+          <feGaussianBlur in="glowMask" stdDeviation="2" result="blurredGlow" />
+          <feComponentTransfer in="blurredGlow" result="brightGlow">
+            <feFuncA type="linear" slope="2" />
+          </feComponentTransfer>
+          <feMerge>
+            <feMergeNode in="brightGlow" />
+            <feMergeNode in="SourceGraphic" />
+          </feMerge>
+        </filter>
+        </defs>
       <g
         id="西行人"
         direction="2"
@@ -1151,7 +1172,7 @@ export default {
       GreenColor: '#77fb65',
       YellowColor: '#f7b500',
       lastType: '',
-      clickedColor: '#299bcc',
+      clickedColor: '#18ff00',
       disabledColor: '#828282',
       sidewalkData: [],
       sidewalkDir: []
@@ -1203,6 +1224,7 @@ export default {
             }
           }
           clickedPath.setAttribute('fill', '#fff')
+          clickedPath.removeAttribute('filter')
         } else {
           // 点击
           for (let i = 0; i < this.sidewalkData.length; i++) {
@@ -1212,6 +1234,7 @@ export default {
             }
           }
           clickedPath.setAttribute('fill', this.clickedColor)
+          clickedPath.setAttribute('filter', 'url(#shadow-effect-side)')
         }
         this.$emit('handleClickSidewalkIcon', this.sidewalkData, curChoosePed)
       }
@@ -1226,14 +1249,17 @@ export default {
             let data = this.sidewalkData.filter(ele => ele.id === side.id)[0]
             if (data && data.clicked === true) {
               dom.setAttribute('fill', this.clickedColor)
+              dom.setAttribute('filter', 'url(#shadow-effect-side)')
             }
             if (this.clickMode && data && data.disabled === true) {
               dom.setAttribute('fill', this.disabledColor)
               dom.setAttribute('disabled', 'true')
+              dom.removeAttribute('filter')
             }
             if (data && data.disabled === undefined && data.clicked === undefined) {
               dom.setAttribute('fill', this.defaultColor)
               dom.removeAttribute('disabled')
+              dom.removeAttribute('filter')
             }
           }
         }

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

@@ -96,7 +96,7 @@
         </div>
         <!-- 车道相位 -->
         <div v-if="resetflag" class="phaseIcon">
-          <PhaseIconSvg v-for="(item, index) in compLanePhaseData" :key="item.key + '-' + index" :Data="item" :isVipRoute="isVipRoute" :clickMode="clickMode" @handleClickPhaseIcon="handleClickPhaseIcon" />
+          <PhaseIconSvg v-for="(item, index) in compLanePhaseData" :key="item.key + '-' + index" :Data="item" :isVipRoute="isVipRoute" :clickMode="clickMode" :beforeSelect="beforeClickPhaseIcon" @handleClickPhaseIcon="handleClickPhaseIcon" />
         </div>
          <!-- 公交相位 -->
         <div v-if="resetflag && !isVipRoute" class="busIcon">
@@ -167,7 +167,7 @@
         </div>
         <!-- 车道相位 -->
         <div v-if="resetflag" class="phaseIcon">
-          <LPhaseIconSvg v-for="item in compLanePhaseData" :key="item.key" :Data="item" :isVipRoute="isVipRoute" :clickMode="clickMode" @handleClickPhaseIcon="handleClickPhaseIcon"/>
+          <LPhaseIconSvg v-for="item in compLanePhaseData" :key="item.key" :Data="item" :isVipRoute="isVipRoute" :clickMode="clickMode" :beforeSelect="beforeClickPhaseIcon" @handleClickPhaseIcon="handleClickPhaseIcon"/>
         </div>
          <!-- 公交相位 -->
         <div v-if="resetflag" class="busIcon">
@@ -1400,6 +1400,65 @@ export default {
       }
     },
 
+    async handleClickDirection (direction) {
+      const id = direction.id
+      // console.log(id)
+      // console.log(this.inneChoosedDirection)
+      const isSelected = this.inneChoosedDirection.includes(id)
+      let nextSelected
+      if (!isSelected) {
+        nextSelected = [...this.inneChoosedDirection, id]
+      } else {
+        nextSelected = this.inneChoosedDirection.filter(d => d !== id)
+      }
+      // 检查是否冲突，冲突提示是否确定
+      if (this.checkConflict(nextSelected)) {
+        try {
+          await this.$confirm(this.$t('openatccomponents.overview.conflictdirectionstips'), this.$t('openatccomponents.common.tipsmodaltitle'), {
+            confirmButtonText: this.$t('openatccomponents.button.OK'),
+            cancelButtonText: this.$t('openatccomponents.button.Cancel'),
+            type: 'warning'
+          })
+          // 用户点击确定
+          return {
+            ok: true,
+            nextSelected
+          }
+        } catch (e) {
+          // 用户点击取消
+          return {
+            ok: false
+          }
+        }
+      }
+      // 无冲突，正常选中
+      return {
+        ok: true,
+        nextSelected
+      }
+    },
+
+    checkConflict (list) {
+      // 默认冲突规则： 东直 东左 西直 西左 其中 任意一个 ，与 南直 南左 北直 北左 其中任意一个，同时选中，则提示冲突
+      const groupA = [1, 2, 5, 6]
+      const groupB = [9, 10, 13, 14]
+
+      const hasA = list.some(id => groupA.includes(id))
+      const hasB = list.some(id => groupB.includes(id))
+
+      return hasA && hasB
+    },
+    beforeClickPhaseIcon (key) {
+      // 进入冲突判断
+      return new Promise(async (resolve) => {
+        for (let element of this.LanePhaseData) {
+          if (element.key === key) {
+            const result = await this.handleClickDirection(element)
+            resolve(result.ok) // ok: true / false
+          }
+        }
+      })
+    },
     handleClickPhaseIcon (key, action) {
       let curClickedPhase = {}
       if (action === 'clicked') {

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

@@ -17,6 +17,27 @@
         <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 xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 36 26" :width="IconLengh" :height="IconWdith">
+        <defs>
+          <filter id="shadow-effect"
+                x="-10%"
+                y="-10%"
+                width="200%"
+                height="200%">
+            <feFlood flood-color="#10B800" flood-opacity="1" result="glowColor" />
+            <feComposite in="glowColor"
+                  in2="SourceGraphic"
+                  operator="in"
+                  result="glowMask" />
+            <feGaussianBlur in="glowMask" stdDeviation="2" result="blurredGlow" />
+            <feComponentTransfer in="blurredGlow" result="brightGlow">
+              <feFuncA type="linear" slope="2" />
+            </feComponentTransfer>
+            <feMerge>
+              <feMergeNode in="brightGlow" />
+              <feMergeNode in="SourceGraphic" />
+            </feMerge>
+          </filter>
+        </defs>
           <!-- 东相位 -->
           <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)"/>
@@ -68,7 +89,7 @@ export default {
       GreenColor: '#77fb65',
       YellowColor: '#f7b500',
       lastStatus: '',
-      clickedColor: '#299bcc',
+      clickedColor: '#18ff00',
       disabledColor: '#828282'
     }
   },
@@ -135,10 +156,13 @@ export default {
     customClick: { // 自定义点击事件，跳过特勤限制
       type: Boolean,
       default: false
+    },
+    beforeSelect: {
+      type: Function
     }
   },
   methods: {
-    handleClick (e) {
+    async handleClick (e) {
       let clickedSvg = e.currentTarget
       // console.log(clickedSvg)
       let clickedPath = clickedSvg.querySelector(`#${this.Data.name}`)
@@ -149,9 +173,18 @@ export default {
         }
         if (clickedPath.getAttribute('fill') === this.clickedColor) {
           clickedPath.setAttribute('fill', '#fff')
+          clickedPath.removeAttribute('filter')
           this.$emit('handleClickPhaseIcon', this.Data.key, 'cancle')
         } else {
+          // 选中前：向父组件请求是否允许
+          const ok = await this.beforeSelect(this.Data.key)
+          if (!ok) {
+            // 父组件不允许选中 → 什么都不做
+            return
+          }
+          // 父组件允许 → 原选中逻辑高亮
           clickedPath.setAttribute('fill', this.clickedColor)
+          clickedPath.setAttribute('filter', 'url(#shadow-effect)')
           this.$emit('handleClickPhaseIcon', this.Data.key, 'clicked')
         }
       }
@@ -161,14 +194,17 @@ export default {
       let DirDom = IconDom.querySelector(`#${this.Data.name}`)
       if (this.Data.clicked === true) {
         DirDom.setAttribute('fill', this.clickedColor)
+        DirDom.setAttribute('filter', 'url(#shadow-effect)')
       }
       if (this.clickMode && this.Data.disabled === true) {
         DirDom.setAttribute('fill', this.disabledColor)
         DirDom.setAttribute('disabled', 'true')
+        DirDom.removeAttribute('filter')
       }
       if (this.Data.disabled === undefined && this.Data.clicked === undefined) {
         DirDom.setAttribute('fill', this.defaultColor)
         DirDom.removeAttribute('disabled')
+        DirDom.removeAttribute('filter')
       }
     },
     IconAddEvent () {