Browse Source

路口详情:所有路口默认走双相位图 + 4 阶段色块字号/图标自适应防过大
- mock/api.js apiGetCrossingDetailData:thisCycle / lastCycle 从"仅 _dualSamples
命中的 JNC900032/16 才返回"改成所有路口都返回;普通 4 阶段路口直接复用
_makePhaseData 生成的 phaseData,示例路口仍走 _makeFlexiblePhaseData 覆盖。
schemeName 示例走"32/16阶段示范方案"、其它统一"默认配时方案"。CrossingDetailPanel
的 isDual computed 自动命中——所有路口的方案状态区域都变成本周期/上周期双图布局。
顶层 phaseData/cycleLength/currentTime/phaseDiff/coordTime 等向后兼容字段保留

- SignalTimingChart.vue renderCustomItem:色块内部 baseFs 加 height-based + 上限
双重夹紧——之前 baseFs = max(0.8, s * 0.9) 只跟 chart 宽度走也无上限,双图整宽
模式下 s≈2.5、4 阶段色块够宽不触发 innerScale,导致 baseFs 飙到 2+,文字 27px、
图标 45px、暗区 100px+;改成 max(0.5, min(1.4, s * 0.9, blockHeight / 40)),
三条约束取最严:横向 s * 0.9、纵向按色块高度(40px=1x 基线)、硬上限 1.4 防超宽
chart 涨太大、硬下限 0.5 兜底极限压缩;32 阶段路径不受影响(innerScale 仍接管,
dynamicFs 0.3-0.5 不变);单图 4 阶段(baseFs ~1.13)行为基本不变

画安 1 month ago
parent
commit
690837c2e9
2 changed files with 31 additions and 30 deletions
  1. 5 2
      src/components/ui/SignalTimingChart.vue
  2. 26 28
      src/mock/api.js

+ 5 - 2
src/components/ui/SignalTimingChart.vue

@@ -388,8 +388,11 @@ export default {
       children.push({ type: 'rect', shape: rectShape, style: { fill: fillStyle, stroke: 'none' } });
 
       // C. 绘制内部图标与文本
-      // 提取基础缩放率
-      const baseFs = Math.max(0.8, s * 0.9); 
+      // 基础缩放率:横向 s 走 0.9 倍,再被色块高度 / 1.4 上限同时夹住
+      // 之前只用 s * 0.9 没上限,宽 chart(如双图整宽 dual 模式)下 baseFs 飙到 2+,
+      // 导致 4 阶段色块文字/图标过大;现在跟 blockHeight 联动,色块越矮越缩
+      const byHeight = Math.max(0.5, blockHeight / 40);
+      const baseFs = Math.max(0.5, Math.min(1.4, s * 0.9, byHeight));
       // 只要宽度大于 5 像素就尝试去渲染(原版限制是 > 15,改小以支持极限压缩)
       if (type === 'green' && blockWidth > 5) {
         

+ 26 - 28
src/mock/api.js

@@ -1116,10 +1116,7 @@ export async function apiGetCrossingDetailData(id, { iconMode = 'default' } = {}
   let cycleLength = _getCycleLength(id)
   let phaseData = _makePhaseData(cycleLength, false, 'simple', id)
 
-  // 双相位图示例路口:N 阶段 + thisCycle/lastCycle 双结构
-  // 走独立的相位生成器;外层 phaseData/cycleLength 同步覆盖,保持向后兼容字段一致
-  let thisCycle = null
-  let lastCycle = null
+  // 双相位图示例路口:N 阶段(≠4)走独立相位生成器,覆盖外层 phaseData/cycleLength
   const _dualSamples = {
     JNC900032: { stageCount: 32, cycleLength: 160, schemeName: '32阶段示范方案' },
     JNC900016: { stageCount: 16, cycleLength: 160, schemeName: '16阶段示范方案' },
@@ -1127,30 +1124,31 @@ export async function apiGetCrossingDetailData(id, { iconMode = 'default' } = {}
   if (_dualSamples[id]) {
     const cfgSample = _dualSamples[id]
     cycleLength = cfgSample.cycleLength
-    const planPhaseData = _makeFlexiblePhaseData(cycleLength, cfgSample.stageCount)
-    phaseData = planPhaseData
-
-    const nowSec = Math.floor(Date.now() / 1000)
-    const currentTimeIn = nowSec % cycleLength
-
-    thisCycle = {
-      schemeId: 'sys_a',
-      schemeName: cfgSample.schemeName,
-      cycleLength,
-      currentTime: currentTimeIn,
-      phaseData: planPhaseData,
-      phaseDiff: (seed * 7) % 25,
-      coordTime: (seed * 13) % 60,
-    }
-    // 上周期用同一份计划相位结构(演示用),actualDuration 模拟真实执行的±2s 拉伸
-    lastCycle = {
-      schemeId: 'sys_a',
-      schemeName: cfgSample.schemeName,
-      cycleLength,
-      actualDuration: cycleLength + 2,
-      endedAt: new Date((nowSec - currentTimeIn) * 1000).toISOString(),
-      phaseData: planPhaseData,
-    }
+    phaseData = _makeFlexiblePhaseData(cycleLength, cfgSample.stageCount)
+  }
+
+  // thisCycle / lastCycle:所有路口统一返回,让 CrossingDetailPanel 的双相位图布局对所有
+  // 路口生效(普通 4 阶段路口直接复用 _makePhaseData 的结果;示例路口已用 flexible 覆盖)
+  const _planSchemeName = (_dualSamples[id] && _dualSamples[id].schemeName) || '默认配时方案'
+  const _nowSec = Math.floor(Date.now() / 1000)
+  const _currentTimeIn = _nowSec % cycleLength
+  const thisCycle = {
+    schemeId: 'sys_a',
+    schemeName: _planSchemeName,
+    cycleLength,
+    currentTime: _currentTimeIn,
+    phaseData,
+    phaseDiff: (seed * 7) % 25,
+    coordTime: (seed * 13) % 60,
+  }
+  // 上周期:演示用复用同一份计划相位(真实后端应给上周期实绩),actualDuration 模拟 ±2s 拉伸
+  const lastCycle = {
+    schemeId: 'sys_a',
+    schemeName: _planSchemeName,
+    cycleLength,
+    actualDuration: cycleLength + 2,
+    endedAt: new Date((_nowSec - _currentTimeIn) * 1000).toISOString(),
+    phaseData,
   }
 
   // 从相位数据中提取阶段列表(优先上轨道绿灯相位,单轨道时取 track 0,最多4个)