Ver código fonte

TrafficTimeSpace 组件后续调整:扫描线改为蓝色加粗、沿 x 轴方向扫描;yAxis 增加底部padding(yAxisMin=-80),避免首路口柱子被 clip 裁掉;xAxis/yAxis 加 onZero=false 保证轴线画在 grid 边缘;y轴路口名称按 "-" 拆成两行显示,grid.left 加宽至 140避免左侧被挤压;三个调用页(TrunkCoordination/StatusMonitoring/SpecialSituationMonitoring)弹窗尺寸由 1000×500 改为600×900 匹配竖向布局;apiGetTrafficTimeSpace 增加 label 参数,按菜单节点 label 生成路口名前缀(${label}-路口A/B/C/D)

画安 1 semana atrás
pai
commit
e11bbc348d

+ 26 - 12
src/components/ui/TrafficTimeSpace.vue

@@ -67,7 +67,11 @@ export default {
     },
     maxX() {
       const last = this.intersections[this.intersections.length - 1];
-      return last.x + 50;
+      return last.x + 80;
+    },
+    yAxisMin() {
+      // 留出底部 padding,避免首个路口(distance=0)向下延伸的柱子被 clip 裁掉
+      return -80;
     },
     maxDataTime() {
       return this.viewWindow * 3;
@@ -175,20 +179,20 @@ export default {
         backgroundColor: 'transparent',
         animation: false,
         tooltip: { show: false },
-        grid: { left: 110, right: 50, top: 40, bottom: 50 },
+        grid: { left: 140, right: 40, top: 40, bottom: 50 },
         xAxis: {
           type: 'value', min: this.currentViewMinX, max: this.currentViewMinX + this.viewWindow,
           interval: 20, name: '时间 (秒)',
           nameLocation: 'end',
           nameTextStyle: { color: '#a0aabf', padding: [0, 0, 0, 0] },
-          axisLine: { show: true, lineStyle: { color: 'rgba(255,255,255,0.15)' } },
+          axisLine: { show: true, onZero: false, lineStyle: { color: 'rgba(255,255,255,0.15)' } },
           axisTick: { show: false },
           axisLabel: { color: '#a0aabf', fontSize: 10 },
           splitLine: { show: this.showYSplitLine, lineStyle: { type: 'dashed', color: 'rgba(255, 255, 255, 0.08)' } }
         },
         yAxis: {
-          type: 'value', min: 0, max: this.maxX,
-          axisLine: { show: true, lineStyle: { color: 'rgba(255,255,255,0.15)' } },
+          type: 'value', min: this.yAxisMin, max: this.maxX,
+          axisLine: { show: true, onZero: false, lineStyle: { color: 'rgba(255,255,255,0.15)' } },
           axisTick: { show: false },
           axisLabel: { show: false },
           splitLine: { show: false }
@@ -318,11 +322,21 @@ export default {
               const centerYPx = point[1] + this.barWidth + this.gap / 2;
               const labelX = point[0] - 12;
 
-              const children = [
-                { type: 'text', x: labelX, y: centerYPx - 7, style: { text: intersection.name, fill: '#fff', textAlign: 'right', fontSize: 12 } }
-              ];
+              // 名称较长时按 "-" 拆成两行显示
+              const dashIdx = intersection.name.indexOf('-');
+              const nameLine1 = dashIdx >= 0 ? intersection.name.slice(0, dashIdx) : intersection.name;
+              const nameLine2 = dashIdx >= 0 ? intersection.name.slice(dashIdx + 1) : '';
+
+              const children = [];
+              if (nameLine2) {
+                children.push({ type: 'text', x: labelX, y: centerYPx - 15, style: { text: nameLine1, fill: '#fff', textAlign: 'right', fontSize: 12 } });
+                children.push({ type: 'text', x: labelX, y: centerYPx - 1, style: { text: nameLine2, fill: '#fff', textAlign: 'right', fontSize: 12 } });
+              } else {
+                children.push({ type: 'text', x: labelX, y: centerYPx - 7, style: { text: nameLine1, fill: '#fff', textAlign: 'right', fontSize: 12 } });
+              }
               if (this.showPhaseOffset) {
-                children.push({ type: 'text', x: labelX, y: centerYPx + 5, style: { text: `相位差: ${intersection.offsetText}`, fill: '#a0aabf', textAlign: 'right', fontSize: 11 } });
+                const offYPx = nameLine2 ? centerYPx + 14 : centerYPx + 5;
+                children.push({ type: 'text', x: labelX, y: offYPx, style: { text: `相位差: ${intersection.offsetText}`, fill: '#a0aabf', textAlign: 'right', fontSize: 11 } });
               }
 
               if (intersection.distanceNext) {
@@ -331,8 +345,8 @@ export default {
                 const midYPx = (centerYPx + nextCenterYPx) / 2;
 
                 // 非反转 yAxis:距离越大像素 y 越小,nextCenterYPx < centerYPx
-                const lineX = labelX - 60;
-                children.push({ type: 'line', shape: { x1: lineX, y1: centerYPx - 22, x2: lineX, y2: nextCenterYPx + 22 }, style: { stroke: 'rgba(255,255,255,0.1)', lineDash: [2, 2] } });
+                const lineX = labelX - 85;
+                children.push({ type: 'line', shape: { x1: lineX, y1: centerYPx - 36, x2: lineX, y2: nextCenterYPx + 22 }, style: { stroke: 'rgba(255,255,255,0.1)', lineDash: [2, 2] } });
                 children.push({ type: 'text', x: lineX, y: midYPx, style: { text: `${intersection.distanceNext}m`, fill: '#a0aabf', textAlign: 'center', fontSize: 11 } });
               }
               return { type: 'group', children };
@@ -345,7 +359,7 @@ export default {
             data: [[this.currentScanX]],
             renderItem: (params, api) => {
               const xTime = api.value(0);
-              const top = api.coord([xTime, 0]);
+              const top = api.coord([xTime, this.yAxisMin]);
               const bottom = api.coord([xTime, this.maxX]);
               return {
                 type: 'line',

+ 10 - 6
src/mock/api.js

@@ -645,13 +645,17 @@ export async function apiGetKeyIntersections() {
 
 export async function apiGetTrafficTimeSpace(opts = {}) {
   await delay(300)
+  const { label } = opts
+  const labels = ['A', 'B', 'C', 'D']
+  const dists = [450, 669, 1050, 0]
+  const offsets = [0, 50, 0, 0]
+  const prefix = label || '交叉口'
   return ok({
-    roadSegments: [
-      { name: '交叉口A', distanceNext: 450, offset: 0 },
-      { name: '交叉口B', distanceNext: 669, offset: 50 },
-      { name: '交叉口C', distanceNext: 1050, offset: 0 },
-      { name: '交叉口D', distanceNext: 0, offset: 0 }
-    ],
+    roadSegments: labels.map((l, i) => ({
+      name: label ? `${prefix}-路口${l}` : `${prefix}${l}`,
+      distanceNext: dists[i],
+      offset: offsets[i]
+    })),
     speedKmh: 38.9,
     cycle: 100,
     greenDuration: 40,

+ 2 - 1
src/views/SpecialSituationMonitoring.vue

@@ -549,11 +549,12 @@ export default {
             let tsData;
             if (nodeData.intersections && nodeData.distances) {
                 tsData = await apiGetTrafficTimeSpace({
+                    label: nodeData.label,
                     intersections: nodeData.intersections,
                     distances: nodeData.distances,
                 });
             } else {
-                tsData = await apiGetTrafficTimeSpace();
+                tsData = await apiGetTrafficTimeSpace({ label: nodeData.label });
             }
             this.$refs.layout.openDialog({
                 id: nodeData.id,

+ 2 - 1
src/views/StatusMonitoring.vue

@@ -620,11 +620,12 @@ export default {
             let tsData;
             if (nodeData.intersections && nodeData.distances) {
                 tsData = await apiGetTrafficTimeSpace({
+                    label: nodeData.label,
                     intersections: nodeData.intersections,
                     distances: nodeData.distances,
                 });
             } else {
-                tsData = await apiGetTrafficTimeSpace();
+                tsData = await apiGetTrafficTimeSpace({ label: nodeData.label });
             }
             this.$refs.layout.openDialog({
                 id: nodeData.id,

+ 2 - 1
src/views/TrunkCoordination.vue

@@ -557,11 +557,12 @@ export default {
             let tsData;
             if (nodeData.intersections && nodeData.distances) {
                 tsData = await apiGetTrafficTimeSpace({
+                    label: nodeData.label,
                     intersections: nodeData.intersections,
                     distances: nodeData.distances,
                 });
             } else {
-                tsData = await apiGetTrafficTimeSpace();
+                tsData = await apiGetTrafficTimeSpace({ label: nodeData.label });
             }
             this.$refs.layout.openDialog({
                 id: nodeData.id,