修改相位图的方向图标成对显示；修改相位图模拟数据的生成逻辑；

src/components/SignalTimingChart.vue

@@ -1,338 +0,0 @@
-<template>
-  <div class="signal-timing-widget">
-    <div class="header">
-      <div class="title-area">
-        <span class="main-title">方案状态</span>
-        <span class="sub-info" v-if="!loading">(周期: {{ cycleLength }} 相位差: 协调时间: 0)</span>
-      </div>
-      <div class="checkbox-area">
-        <div class="checkbox-mock" :class="{ 'is-checked': followPhase }" @click="followPhase = !followPhase">
-          <span v-if="followPhase" style="color: #fff; font-size: 12px; margin-left: 1px;">✓</span>
-        </div>
-        <span>跟随相位</span>
-      </div>
-    </div>
-    
-    <div v-if="loading" class="loading-overlay">
-      <span>数据加载中...</span>
-    </div>
-
-    <div v-show="!loading" ref="chartDom" class="chart-container"></div>
-  </div>
-</template>
-
-<script>
-import * as echarts from 'echarts';
-
-// 静态资源与常量
-const COLORS = {
-  GREEN_LIGHT: '#8dc453', GREEN_DARK: '#73a542', YELLOW: '#fbd249', RED: '#ff7575', STRIPE_GREEN: '#a3d76e',
-  TEXT_DARK: '#1e2638', AXIS_LINE: '#758599', DIVIDER_LINE: '#111827', MARK_BLUE: '#4da8ff', TEXT_LIGHT: '#d1d5db'
-};
-
-const stripeCanvas = document.createElement('canvas');
-stripeCanvas.width = 6; stripeCanvas.height = 20;
-const ctx = stripeCanvas.getContext('2d');
-ctx.fillStyle = '#ffffff'; ctx.fillRect(0, 0, 6, 20);
-ctx.fillStyle = COLORS.STRIPE_GREEN; ctx.fillRect(0, 0, 3, 20); 
-const stripePattern = { image: stripeCanvas, repeat: 'repeat' };
-
-const ICON_PATHS = {
-  UP: 'M10 2 H14 V14 H20 L12 22 L4 14 H10 Z',
-  DOWN: 'M10 22 H14 V10 H20 L12 2 L4 10 H10 Z',
-  TURN_LEFT: 'M 21 22 H 15 V 14 C 15 11 13 9 10 9 H 8 V 14 L 0 7 L 8 0 V 5 H 10 C 15 5 21 9 21 14 V 22 Z',
-  TURN_RIGHT: 'M 3 22 H 9 V 14 C 9 11 11 9 14 9 H 16 V 14 L 24 7 L 16 0 V 5 H 14 C 9 5 3 9 3 14 V 22 Z',
-  UTURN: 'M 18 22 V 10 C 18 5 15 2 12 2 C 9 2 6 5 6 10 V 14 H 0 L 8 22 L 16 14 H 10 V 10 C 10 7 11 6 12 6 C 13 6 14 7 14 10 V 22 H 18 Z'
-};
-
-export default {
-  name: 'SignalTimingChart',
-  // 核心改变：从外部接收所有数据
-  props: {
-    loading: {
-      type: Boolean,
-      default: false
-    },
-    cycleLength: {
-      type: Number,
-      default: 0
-    },
-    currentTime: {
-      type: Number,
-      default: 0
-    },
-    phaseData: {
-      type: Array,
-      default: () => []
-    }
-  },
-  data() {
-    return {
-      chartInstance: null,
-      followPhase: false,
-      scaleFactor: 1
-    };
-  },
-  mounted() {
-    this.updateScale();
-    this.initChart();
-    window.addEventListener('resize', this.handleResize);
-    this._resizePending = false;
-    this._resizeObserver = new ResizeObserver(() => {
-      if (!this._resizePending) {
-        this._resizePending = true;
-        requestAnimationFrame(() => {
-          this._resizePending = false;
-          this.handleResize();
-        });
-      }
-    });
-    if (this.$refs.chartDom) {
-      this._resizeObserver.observe(this.$refs.chartDom);
-    }
-  },
-  beforeDestroy() {
-    window.removeEventListener('resize', this.handleResize);
-    if (this._resizeObserver) {
-      this._resizeObserver.disconnect();
-    }
-    if (this.chartInstance) {
-      this.chartInstance.dispose();
-      this.chartInstance = null;
-    }
-  },
-  watch: {
-    // 监听 props 变化，一旦父组件传入新数据，立即触发 ECharts 重绘
-    currentTime() {
-      if (!this.loading && this.chartInstance) {
-        this.updateChart();
-      }
-    },
-    phaseData: {
-      deep: true,
-      handler(newVal) {
-        if (!this.loading && this.chartInstance && newVal.length > 0) {
-          this.updateChart();
-        }
-      }
-    },
-    loading(newVal) {
-      // 当 loading 结束时，销毁旧实例并重建，确保使用正确的容器尺寸
-      if (!newVal && this.phaseData.length > 0) {
-        this.$nextTick(() => {
-          setTimeout(() => {
-            if (this.chartInstance) {
-              this.chartInstance.dispose();
-              this.chartInstance = null;
-            }
-            this.initChart();
-          }, 50);
-        });
-      }
-    }
-  },
-  methods: {
-    handleResize() {
-      this.updateScale();
-      if (this.chartInstance) {
-        this.chartInstance.resize();
-        this.updateChart();
-      }
-    },
-    updateScale() {
-      const el = this.$el;
-      if (!el) return;
-      const baseWidth = 600; // 设计基准宽度
-      this.scaleFactor = Math.max(0.5, el.clientWidth / baseWidth);
-      el.style.setProperty('--s', this.scaleFactor);
-    },
-    
-    initChart() {
-      const chartDom = this.$refs.chartDom;
-      if (!chartDom) return;
-      this.chartInstance = echarts.init(chartDom);
-      // 如果初始化时就已经有数据了，直接渲染
-      if (this.phaseData.length > 0) {
-        this.updateChart();
-      }
-      // 延迟一帧 resize，确保 v-show 切换后容器有正确宽度
-      this.$nextTick(() => {
-        requestAnimationFrame(() => {
-          this.handleResize();
-        });
-      });
-    },
-    
-    updateChart() {
-      if (!this.chartInstance) return;
-      this.chartInstance.setOption(this.getChartOption(), true);
-    },
-    
-    getChartOption() {
-      const s = this.scaleFactor;
-      return {
-        backgroundColor: 'transparent',
-        grid: { left: Math.round(10 * s), right: Math.round(10 * s), top: Math.round(50 * s), bottom: Math.round(10 * s), containLabel: false },
-        xAxis: { type: 'value', min: 0, max: this.cycleLength, show: false },
-        yAxis: { type: 'category', data: ['Track 0', 'Track 1'], inverse: true, show: false },
-        series: [
-          {
-            type: 'custom',
-            renderItem: this.renderCustomItem,
-            encode: { x: [1, 2], y: 0 },
-            data: this.phaseData,
-            markLine: {
-              symbol: ['none', 'none'],
-              silent: true,
-              label: {
-                show: true,
-                position: 'start',
-                formatter: `${this.currentTime}/${this.cycleLength}`,
-                color: '#fff',
-                backgroundColor: COLORS.MARK_BLUE,
-                padding: [Math.round(4 * s), Math.round(8 * s)],
-                borderRadius: 2,
-                fontSize: Math.round(10 * s),
-                fontWeight: 'bold',
-                offset: [0, -2]
-              },
-              lineStyle: { color: COLORS.MARK_BLUE, type: 'solid', width: Math.round(2 * s) },
-              data: [ { xAxis: this.currentTime } ]
-            }
-          }
-        ]
-      };
-    },
-
-    renderCustomItem(params, api) {
-      const s = this.scaleFactor;
-      const trackIndex = api.value(0);
-      const start = api.coord([api.value(1), trackIndex]);
-      const end = api.coord([api.value(2), trackIndex]);
-
-      const blockHeight = api.size([0, 1])[1];
-      const yPos = start[1] - blockHeight / 2;
-      const blockWidth = end[0] - start[0];
-      const dividerY = (api.coord([0, 1])[1] + api.coord([0, 0])[1]) / 2;
-
-      const phaseName = api.value(3);
-      const duration = api.value(4);
-      const type = api.value(5);
-      const iconKey = api.value(6);
-
-      let fillStyle = COLORS.GREEN_LIGHT;
-      if (type === 'stripe') fillStyle = stripePattern;
-      else if (type === 'yellow') fillStyle = COLORS.YELLOW;
-      else if (type === 'red') fillStyle = COLORS.RED;
-
-      const rectShape = echarts.graphic.clipRectByRect(
-        { x: start[0], y: yPos, width: blockWidth, height: blockHeight },
-        { x: params.coordSys.x, y: params.coordSys.y, width: params.coordSys.width, height: params.coordSys.height }
-      );
-
-      if (!rectShape) return;
-      const children = [];
-
-      // A. 绘制刻度
-      if (params.dataIndex === 0) {
-        const axisBaseY = params.coordSys.y - Math.round(20 * s);
-        [0, 35, 70, 105, 140].forEach(val => {
-          const x = api.coord([val, 0])[0];
-          children.push({ type: 'line', shape: { x1: x, y1: axisBaseY - Math.round(5 * s), x2: x, y2: axisBaseY + Math.round(5 * s) }, style: { stroke: COLORS.AXIS_LINE, lineWidth: Math.round(1.5 * s) } });
-        });
-        const stages = [ {n:'S1', s:0, e:35}, {n:'S2', s:35, e:70}, {n:'S3', s:70, e:105}, {n:'S4', s:105, e:140} ];
-        stages.forEach(st => {
-          const x1 = api.coord([st.s, 0])[0], x2 = api.coord([st.e, 0])[0], midX = (x1 + x2) / 2;
-          const textHalf = Math.round(14 * s);
-          children.push({ type: 'line', shape: { x1: x1, y1: axisBaseY, x2: midX - textHalf, y2: axisBaseY }, style: { stroke: COLORS.AXIS_LINE, lineWidth: Math.round(1.5 * s) } });
-          children.push({ type: 'line', shape: { x1: midX + textHalf, y1: axisBaseY, x2: x2, y2: axisBaseY }, style: { stroke: COLORS.AXIS_LINE, lineWidth: Math.round(1.5 * s) } });
-          children.push({ type: 'text', style: { text: st.n, x: midX, y: axisBaseY, fill: COLORS.TEXT_LIGHT, fontSize: Math.round(14 * s), align: 'center', verticalAlign: 'middle', fontWeight: 'bold' } });
-        });
-      }
-
-      // B. 绘制色块底色
-      children.push({ type: 'rect', shape: rectShape, style: { fill: fillStyle, stroke: 'none' } });
-
-      // C. 绘制内部元素
-      const fs = Math.max(0.8, s * 0.9); // 文字/图标用更小的缩放
-      if (type === 'green' && blockWidth > 20) {
-        const darkWidth = Math.round(25 * fs);
-        const midY = yPos + blockHeight / 2;
-
-        children.push({ type: 'rect', shape: { x: start[0], y: yPos, width: darkWidth, height: blockHeight }, style: { fill: COLORS.GREEN_DARK } });
-        const arrowH = Math.round(4 * fs);
-        children.push({ type: 'polygon', shape: { points: [ [start[0] + darkWidth, midY - arrowH], [start[0] + darkWidth, midY + arrowH], [start[0] + darkWidth + arrowH, midY] ] }, style: { fill: COLORS.GREEN_DARK } });
-
-        if (iconKey && ICON_PATHS[iconKey]) {
-          const iconSize = Math.round(14 * fs);
-          const iconX = start[0] + (darkWidth - iconSize) / 2;
-          const iconY = midY - iconSize / 2;
-
-          children.push({
-            type: 'path',
-            shape: { pathData: ICON_PATHS[iconKey], x: iconX, y: iconY, width: iconSize, height: iconSize, layout: 'center' },
-            style: { fill: COLORS.TEXT_DARK, stroke: 'none' }
-          });
-        }
-
-        // 文字不受 clipRect 裁剪，独立绘制
-        children.push({ type: 'text', style: { text: `${phaseName}\n${duration}`, x: start[0] + darkWidth + Math.round(4 * fs), y: midY, fill: COLORS.TEXT_DARK, fontSize: Math.round(12 * fs), fontFamily: 'Arial', fontWeight: 'bold', align: 'left', verticalAlign: 'middle' } });
-      }
-
-      // D. 分割线
-      if (trackIndex === 1) {
-        children.push({ type: 'line', shape: { x1: start[0], y1: dividerY, x2: end[0], y2: dividerY }, style: { stroke: COLORS.DIVIDER_LINE, lineWidth: Math.round(1.5 * s) } });
-      }
-
-      return { type: 'group', children: children };
-    }
-  }
-};
-</script>
-
-<style scoped>
-.signal-timing-widget {
-  --s: 1;
-  width: 100%;
-  height: 100%;
-  min-width: 0;
-  background-color: transparent;
-  box-sizing: border-box;
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-}
-
-.header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: calc(var(--s) * 25px);
-  color: #e0e6f1;
-}
-
-.title-area { font-size: calc(var(--s) * 16px); }
-.main-title { font-size: calc(var(--s) * 20px); font-weight: bold; margin-right: calc(var(--s) * 10px); }
-.sub-info { font-size: calc(var(--s) * 14px); opacity: 0.8; }
-
-.checkbox-area {
-  font-size: calc(var(--s) * 14px); display: flex; align-items: center;
-  cursor: pointer; opacity: 0.7; user-select: none;
-}
-.checkbox-area:hover { opacity: 1; }
-
-.checkbox-mock {
-  width: calc(var(--s) * 14px); height: calc(var(--s) * 14px); border: 1px solid rgba(255, 255, 255, 0.5);
-  margin-right: calc(var(--s) * 6px); border-radius: 2px;
-  display: flex; align-items: center; justify-content: center;
-}
-.checkbox-mock.is-checked { background-color: #4da8ff; border-color: #4da8ff; }
-
-.chart-container { width: 100%; min-width: 0; flex: 1; min-height: 120px; overflow: hidden; }
-
-.loading-overlay {
-  flex: 1; min-height: 120px; display: flex; align-items: center; justify-content: center;
-  color: #758599; font-size: 14px;
-}
-</style>

src/components/ui/SignalTimingChart.vue

@@ -204,41 +204,12 @@ export default {
       if (type === 'green' && blockWidth > 15) {
         const darkWidth = Math.round(50 * fs); 
         const midY = yPos + blockHeight / 2;
-        const valStr = String(iconValue || '').toUpperCase();
         
-        // --- 动态尺寸与偏移计算逻辑 ---
-        const posConfig = POS_MAP[valStr] || { pos: 'RB', padX: 0, padY: 0, baseW: 20, baseH: 20 };
-        const pos = typeof posConfig === 'string' ? posConfig : (posConfig.pos || 'RB');
-        
-        // 提取配置的基础宽高，默认给 20，并乘以缩放系数
-        const drawW = Math.round((posConfig.baseW || 20) * fs);
-        const drawH = Math.round((posConfig.baseH || 20) * fs);
-        
-        const padX = Math.round((posConfig.padX || 0) * fs); 
-        const padY = Math.round((posConfig.padY || 0) * fs);
-
-        let iconX, iconY;
-        if (pos === 'LT') {
-          iconX = start[0] + padX;
-          iconY = yPos + padY;
-        } else if (pos === 'RT') {
-          iconX = start[0] + darkWidth - drawW - padX;
-          iconY = yPos + padY;
-        } else if (pos === 'LB') {
-          iconX = start[0] + padX;
-          iconY = yPos + blockHeight - drawH - padY;
-        } else { // RB
-          iconX = start[0] + darkWidth - drawW - padX;
-          iconY = yPos + blockHeight - drawH - padY;
-        }
-
         const innerGroup = {
           type: 'group',
           clipPath: { type: 'rect', shape: { x: start[0], y: yPos, width: blockWidth, height: blockHeight } },
           children: [
-            // 深色背景区域
             { type: 'rect', shape: { x: start[0], y: yPos, width: darkWidth, height: blockHeight }, style: { fill: COLORS.GREEN_DARK } },
-            // 小三角形装饰
             { 
               type: 'polygon', 
               shape: { points: [ [start[0] + darkWidth, midY - 4 * fs], [start[0] + darkWidth, midY + 4 * fs], [start[0] + darkWidth + 4 * fs, midY] ] }, 
@@ -247,21 +218,59 @@ export default {
           ]
         };
 
-        // 绘制图标
-        if (iconValue && IMAGE_MAP[iconValue]) {
-          innerGroup.children.push({
-            type: 'image',
-            style: { 
-              image: IMAGE_MAP[iconValue], 
-              x: iconX, 
-              y: iconY, 
-              width: drawW, 
-              height: drawH,
-              // 使用 'contain' 模式，图片会在保持原比例的同时，缩放以适应指定的 width/height 区域
-              objectFit: 'contain' 
-            }
-          });
+        // --- 核心修改：支持将传入的 iconValue 作为多个图标渲染 ---
+        // 将 iconValue 统一解析为数组，支持数组格式 ['A', 'B'] 或 字符串逗号分隔格式 'A,B'
+        let iconList = [];
+        if (Array.isArray(iconValue)) {
+          iconList = iconValue;
+        } else if (typeof iconValue === 'string' && iconValue.trim() !== '') {
+          iconList = iconValue.split(',');
+        } else if (iconValue) {
+          iconList = [iconValue];
         }
+
+        // 遍历所有图标，按它们各自配置的 pos (LT/RB/RT/LB) 计算坐标并绘制
+        iconList.forEach(icon => {
+          const valStr = String(icon).trim().toUpperCase();
+          const posConfig = POS_MAP[valStr] || { pos: 'RB', padX: 0, padY: 0, baseW: 20, baseH: 20 };
+          const pos = typeof posConfig === 'string' ? posConfig : (posConfig.pos || 'RB');
+          
+          const drawW = Math.round((posConfig.baseW || 20) * fs);
+          const drawH = Math.round((posConfig.baseH || 20) * fs);
+          
+          const padX = Math.round((posConfig.padX || 0) * fs); 
+          const padY = Math.round((posConfig.padY || 0) * fs);
+
+          let iconX, iconY;
+          if (pos === 'LT') {
+            iconX = start[0] + padX;
+            iconY = yPos + padY;
+          } else if (pos === 'RT') {
+            iconX = start[0] + darkWidth - drawW - padX;
+            iconY = yPos + padY;
+          } else if (pos === 'LB') {
+            iconX = start[0] + padX;
+            iconY = yPos + blockHeight - drawH - padY;
+          } else { // RB
+            iconX = start[0] + darkWidth - drawW - padX;
+            iconY = yPos + blockHeight - drawH - padY;
+          }
+
+          // 绘制单个图标并推入容器
+          if (IMAGE_MAP[valStr]) {
+            innerGroup.children.push({
+              type: 'image',
+              style: { 
+                image: IMAGE_MAP[valStr], 
+                x: iconX, 
+                y: iconY, 
+                width: drawW, 
+                height: drawH,
+                objectFit: 'contain' 
+              }
+            });
+          }
+        });
         
         // 渲染文本 (相位号与时长)
         innerGroup.children.push({

src/mock/api.js

@@ -139,16 +139,19 @@ function _makePhaseData(cycleLength = 140, isTwoRows = true) {
   const stageTime = Math.floor(cycleLength / n); 
   const pd = [];
 
-  // 严格匹配 SignalTimingChart.vue 中的 IMAGE_MAP 键名
+  // ==========================================
+  // 修改点：将单个图标改为用逗号分隔的"成对图标"字符串
+  // 前端组件会按逗号切割并分别放到对角位置
+  // ==========================================
   const iconsUD = [
-    'STRAIGHT_UP', 'STRAIGHT_DOWN', 
-    'TURN_UP_LEFT', 'TURN_DOWN_LEFT', 
-    'TURN_UP_LEFT_UTURN', 'TURN_DOWN_LEFT_UTURN'
+    'STRAIGHT_DOWN,STRAIGHT_UP',                 // 南北直行对放
+    'TURN_DOWN_LEFT,TURN_UP_LEFT',               // 南北左转对放
+    'TURN_DOWN_LEFT_UTURN,TURN_UP_LEFT_UTURN'    // 南北左转+掉头对放
   ]; 
   const iconsLR = [
-    'STRAIGHT_LEFT', 'STRAIGHT_RIGHT', 
-    'TURN_LEFT_DOWN', 'TURN_RIGHT_UP', // 修正了原代码中不存在的 TURN_LEFT_UP
-    'TURN_LEFT_DOWN_UTURN', 'TURN_RIGHT_UP_UTURN'
+    'STRAIGHT_LEFT,STRAIGHT_RIGHT',              // 东西直行对放
+    'TURN_LEFT_DOWN,TURN_RIGHT_UP',              // 东西左转对放
+    'TURN_LEFT_DOWN_UTURN,TURN_RIGHT_UP_UTURN'   // 东西左转+掉头对放
   ];
 
   const getRandomIcon = (pool) => pool[Math.floor(Math.random() * pool.length)];
@@ -161,6 +164,7 @@ function _makePhaseData(cycleLength = 140, isTwoRows = true) {
 
     // 辅助函数：生成单条轨道的一个阶段
     const pushTrackData = (trackIdx, phaseNamePrefix) => {
+      // 这里的 icon 现在抽出来的是诸如 "STRAIGHT_DOWN,STRAIGHT_UP" 的字符串
       const icon = getRandomIcon(currentIconPool);
       const phaseName = `${phaseNamePrefix}${i + 1}`;
       const g = Math.floor(Math.random() * 11) + 20; // 绿灯 20-30s
@@ -169,7 +173,7 @@ function _makePhaseData(cycleLength = 140, isTwoRows = true) {
       
       let curT = stageStart;
       
-      // 1. 绿灯
+      // 1. 绿灯 (第6个索引项传入组装好的成对 icon 字符串)
       pd.push([trackIdx, curT, curT + g, phaseName, g, 'green', icon]); 
       curT += g;
       // 2. 绿闪/条纹
@@ -575,7 +579,10 @@ export async function apiGetCrossingList(params = {}) {
   let list = DB.crossingList.map((r, i) => {
     const preset = DB.signalTimings[r.id]
     const cycleLength = preset ? preset.data.cycleLength : r.cycle
-    const phaseData = preset ? preset.data.phaseData : _makePhaseData(cycleLength, false)
+    // const phaseData = preset ? preset.data.phaseData : _makePhaseData(cycleLength, false)
+
+    // 强制全部用 _makePhaseData 动态生成成对箭头
+    const phaseData = _makePhaseData(cycleLength, false)
     return {
       ...r,
       status: statuses[Math.floor(seededRand(Math.floor(Date.now() / 10000) + i) * statuses.length)],