dtScreen/src/components/SignalTimingChart.vue

<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>