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
    };
  },
  mounted() {
    this.initChart();
    window.addEventListener('resize', this.handleResize);
    // 监听容器尺寸变化，自适应 resize（用 rAF 防抖避免循环）
    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(() => {
          if (!this.chartInstance) {
            this.initChart();
          } else {
            this.chartInstance.resize();
          }
          this.updateChart();
        });
      }
    }
  },
  methods: {
    handleResize() {
      if (this.chartInstance) {
        this.chartInstance.resize();
      }
    },
    
    initChart() {
      const chartDom = this.$refs.chartDom;
      if (!chartDom) return;
      this.chartInstance = echarts.init(chartDom);
      // 如果初始化时就已经有数据了，直接渲染
      if (this.phaseData.length > 0) {
        this.updateChart();
      }
    },
    
    updateChart() {
      if (!this.chartInstance) return;
      this.chartInstance.setOption(this.getChartOption(), true);
    },
    
    getChartOption() {
      return {
        backgroundColor: 'transparent', 
        grid: { left: 10, right: 10, top: 50, bottom: 10, 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: [4, 8], 
                borderRadius: 2, 
                fontSize: 12, 
                fontWeight: 'bold', 
                offset: [0, -2] 
              }, 
              lineStyle: { color: COLORS.MARK_BLUE, type: 'solid', width: 2 }, 
              data: [ { xAxis: this.currentTime } ] 
            } 
          } 
        ]
      };
    },

    renderCustomItem(params, api) {
      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 - 20; 
        [0, 35, 70, 105, 140].forEach(val => {
          const x = api.coord([val, 0])[0];
          children.push({ type: 'line', shape: { x1: x, y1: axisBaseY - 5, x2: x, y2: axisBaseY + 5 }, style: { stroke: COLORS.AXIS_LINE, lineWidth: 1.5 } });
        });
        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;
          children.push({ type: 'line', shape: { x1: x1, y1: axisBaseY, x2: midX - 14, y2: axisBaseY }, style: { stroke: COLORS.AXIS_LINE, lineWidth: 1.5 } });
          children.push({ type: 'line', shape: { x1: midX + 14, y1: axisBaseY, x2: x2, y2: axisBaseY }, style: { stroke: COLORS.AXIS_LINE, lineWidth: 1.5 } });
          children.push({ type: 'text', style: { text: st.n, x: midX, y: axisBaseY, fill: COLORS.TEXT_LIGHT, fontSize: 13, align: 'center', verticalAlign: 'middle', fontWeight: 'bold' } });
        });
      }

      // B. 绘制色块底色
      children.push({ type: 'rect', shape: rectShape, style: { fill: fillStyle, stroke: 'none' } });

      // C. 绘制内部元素
      if (type === 'green' && blockWidth > 25) { 
        const darkWidth = 32; 
        const midY = yPos + blockHeight / 2; 

        children.push({ type: 'rect', shape: { x: start[0], y: yPos, width: darkWidth, height: blockHeight }, style: { fill: COLORS.GREEN_DARK } });
        children.push({ type: 'polygon', shape: { points: [ [start[0] + darkWidth, midY - 5], [start[0] + darkWidth, midY + 5], [start[0] + darkWidth + 5, midY] ] }, style: { fill: COLORS.GREEN_DARK } });

        if (iconKey && ICON_PATHS[iconKey]) {
          const iconSize = 20; 
          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' }
          });
        }

        children.push({ type: 'text', style: { text: `${phaseName}\n${duration}`, x: start[0] + darkWidth + 12, y: midY, fill: COLORS.TEXT_DARK, fontSize: 12, 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: 1.5 } });
      }

      return { type: 'group', children: children };
    }
  }
};
</script>

<style scoped>
.signal-timing-widget {
  width: 100%;
  height: 100%;
  background-color: transparent;
  box-sizing: border-box;
  position: relative;
  display: flex;
  flex-direction: column;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
  color: #e0e6f1;
}

.title-area { font-size: 16px; }
.main-title { font-size: 20px; font-weight: bold; margin-right: 10px; }
.sub-info { font-size: 14px; opacity: 0.8; }

.checkbox-area {
  font-size: 14px; display: flex; align-items: center;
  cursor: pointer; opacity: 0.7; user-select: none;
}
.checkbox-area:hover { opacity: 1; }

.checkbox-mock {
  width: 14px; height: 14px; border: 1px solid rgba(255, 255, 255, 0.5);
  margin-right: 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%; flex: 1; min-height: 120px; }

.loading-overlay {
  flex: 1; min-height: 120px; display: flex; align-items: center; justify-content: center;
  color: #758599; font-size: 14px;
}
</style>