openatc-components 0.5.38 → 0.5.40

package/src/kisscomps/components/OverLap/OverLap.vue

@@ -39,8 +39,47 @@
                 </div>
             </el-tooltip>
             </div>
-            <div class="first-1" :style="{'width':item.greenWidth,'height':'34px','background':'#7ccc66'}"></div>
-            <div class="first-1" :style="{'width':item.redWidth,'height':'17px',marginTop: '9px','background':'#f27979'}"></div>
+            <!-- 晚启动（lategreen）产生的头部红灯 -->
+        <div
+          v-if="item.headRedWidth && item.headRedWidth !== '0%'"
+          class="first-1"
+          :style="{
+            width: item.headRedWidth,
+            marginTop: '9px',
+            height: '17px',
+            background: '#f27979',
+          }"
+        ></div>
+        <!-- 主体绿灯（可能已被 leadinggreen / lategreen 削减） -->
+        <div
+          class="first-1"
+          :style="{
+            width: item.greenWidth,
+            height: '34px',
+            background: '#7ccc66',
+          }"
+        ></div>
+        <!-- 早结束（leadinggreen）产生的尾部红灯 -->
+        <div
+          v-if="item.tailRedWidth && item.tailRedWidth !== '0%'"
+          class="first-1"
+          :style="{
+            width: item.tailRedWidth,
+            marginTop: '9px',
+            height: '17px',
+            background: '#f27979',
+          }"
+        ></div>
+        <!-- 非重叠阶段或剩余红灯时间 -->
+        <div
+          class="first-1"
+          :style="{
+            width: item.redWidth,
+            height: '17px',
+            marginTop: '9px',
+            background: '#f27979',
+          }"
+        ></div>
         </div>
     </div>
 </div>
@@ -73,6 +112,9 @@ export default {
     stageList: {
       type: Array
     },
+    patternoverlaplist: {
+      type: Array
+    },
     checked: {
       type: Boolean
     },
@@ -112,6 +154,13 @@ export default {
       },
       // 深度观察监听
       deep: true
+    },
+    patternoverlaplist: {
+      handler: function (val, oldVal) {
+        this.doAdd(this.stageList, this.overlap)
+      },
+      // 深度观察监听
+      deep: true
     }
   },
   created () {
@@ -160,15 +209,28 @@ export default {
     },
     doAdd (stageList, overlap) { // 阶段显示颜色
       let overlapData = overlap.map(item => {
+        // 若 patternoverlaplist 中有对应项且带 includedPhases，则用其参与计算的相位；否则用 overlap 的 includedphases
+        const overlapPattern =
+          Array.isArray(this.patternoverlaplist) &&
+          this.patternoverlaplist.find(p => p.id === item.id)
+        const includedPhases = overlapPattern &&
+          Array.isArray(overlapPattern.includedPhases) &&
+          (overlapPattern.includedPhases).length > 0
+          ? (overlapPattern.includedPhases)
+          : (item.includedphases || [])
+        const modifyPhases = overlapPattern &&
+          Array.isArray(overlapPattern.modifyphase)
+          ? overlapPattern.modifyphase
+          : (item.modifyphase !== undefined ? item.modifyphase : [])
         let findIndexs = []
-        item.includedphases.forEach(i => {
-          const findItems = stageList.filter(j => (j.phases ? j.phases : j.stages).includes(i))
+        includedPhases.forEach(i => {
+          const findItems = stageList.filter(j => j.phases.includes(i))
           if (findItems.length) findIndexs.push(...findItems.map(m => m.key))
         })
         // 收集所有包含 modifyphase 中相位的阶段 key
         let modifyIndexs = []
-        if (item.modifyphase !== undefined) {
-          item.modifyphase.forEach(i => {
+        if (modifyPhases.length > 0) {
+          modifyPhases.forEach(i => {
             const findItems = stageList.filter(j => j.phases.includes(i))
             if (findItems.length) modifyIndexs.push(...findItems.map(m => m.key))
           })
@@ -184,18 +246,75 @@ export default {
         } else {
           this.max = ''
         }
+
+        // 读取当前 overlap 对应的晚启动 / 早结束时间（单位与 split 一致，overlapPattern 已在上方根据 item.id 取过）
+        let lategreen = overlapPattern && typeof overlapPattern.lategreen === 'number'
+          ? overlapPattern.lategreen
+          : 0
+        let leadinggreen = overlapPattern && typeof overlapPattern.leadinggreen === 'number'
+          ? overlapPattern.leadinggreen
+          : 0
+
+        // 按阶段初始化绿灯 / 红灯时长（单位：split）
+        const stageTimeMap = {}
+        stageList.forEach(sta => {
+          const inOverlap = findIndexs.includes(sta.key) && !modifyIndexs.includes(sta.key)
+          stageTimeMap[sta.key] = {
+            green: inOverlap ? sta.split : 0, // 重叠阶段默认全绿
+            red: inOverlap ? 0 : sta.split, // 非重叠阶段全红（底部红条）
+            headRed: 0, // 晚启动（lategreen）拆出来的头部红
+            tailRed: 0 // 早结束（leadinggreen）拆出来的尾部红
+          }
+        })
+
+        // 处理晚启动：从头到尾，优先削减最前面的绿灯，生成 headRed
+        let remainLate = lategreen
+        if (remainLate > 0) {
+          stageList.forEach(sta => {
+            if (remainLate <= 0) return
+            const cur = stageTimeMap[sta.key]
+            if (!cur || cur.green <= 0) return
+            const cut = Math.min(cur.green, remainLate)
+            cur.green -= cut
+            cur.headRed += cut
+            remainLate -= cut
+          })
+        }
+
+        // 处理早结束：从尾到头，优先削减最后面的绿灯，生成 tailRed
+        let remainLead = leadinggreen
+        if (remainLead > 0) {
+          ;[...stageList].reverse().forEach(sta => {
+            if (remainLead <= 0) return
+            const cur = stageTimeMap[sta.key]
+            if (!cur || cur.green <= 0) return
+            const cut = Math.min(cur.green, remainLead)
+            cur.green -= cut
+            cur.tailRed += cut
+            remainLead -= cut
+          })
+        }
+
+        const totalCycle = (this.max ? this.max : this.cycle)
+
         return {
           ...item,
           peddirection: this.getPedPhasePos(item.peddirection),
           sidewalkPhaseData: this.getPedPhasePos(item.peddirection),
           stageLists: stageList.map(sta => {
-            const find = findIndexs.includes(sta.key) && !modifyIndexs.includes(sta.key)
+            const t = stageTimeMap[sta.key] || { green: 0, red: sta.split, headRed: 0, tailRed: 0 }
+            const scale = totalCycle || 1
+            const greenWidth = (t.green / scale * 100).toFixed(3) + '%'
+            const redWidth = (t.red / scale * 100).toFixed(3) + '%'
+            const headRedWidth = (t.headRed / scale * 100).toFixed(3) + '%'
+            const tailRedWidth = (t.tailRed / scale * 100).toFixed(3) + '%'
             return {
               ...sta,
               direction: this.getRoad(item),
-              // peddirection: this.getPedPhasePos(item.peddirection),
-              greenWidth: find ? (sta.split / (this.max ? this.max : this.cycle) * 100).toFixed(3) + '%' : '0%',
-              redWidth: !find ? (sta.split / (this.max ? this.max : this.cycle) * 100).toFixed(3) + '%' : '0%'
+              headRedWidth,
+              greenWidth,
+              tailRedWidth,
+              redWidth
             }
           })
         }
@@ -210,7 +329,7 @@ export default {
 .ring-first {
   // margin-top: 1px;
   width: 100%;
-  height: 34px;
+  height: 40px;
   .first-1 {
    float: left;
    margin-top: 1px;