新增信号灯配时图组件

src/components/SignalTimingChart.vue

@@ -0,0 +1,296 @@
+<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);
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.handleResize);
+    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%;
+  background-color: #1e2638; 
+  padding: 15px 20px;
+  border-radius: 4px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+  font-family: 'Microsoft YaHei', sans-serif;
+  box-sizing: border-box;
+  position: relative;
+}
+
+.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%; height: 180px; }
+
+.loading-overlay {
+  height: 180px; display: flex; align-items: center; justify-content: center;
+  color: #758599; font-size: 14px;
+}
+</style>

src/mock/data.js

@@ -184,6 +184,56 @@ export function makeTrafficTimeSpaceData(opts = {}) {
   };
 }
 
+
+/**
+ * 模拟获取交通配时方案数据的 API 请求
+ */
+export function fetchSignalTimingData() {
+  return new Promise((resolve) => {
+    // 模拟 500ms 的网络请求延迟
+    setTimeout(() => {
+      resolve({
+        code: 200,
+        message: 'success',
+        data: {
+          cycleLength: 140,
+          currentTime: 67,
+          // [轨道(1上,0下), 开始时间, 结束时间, 相位名称, 时长, 颜色类型, 图标类型]
+          phaseData: [
+            // 上轨道 (Track 1)
+            [1, 0, 30, 'P1', 30, 'green', 'UP'],
+            [1, 30, 35, '', null, 'stripe', null],
+            [1, 35, 38, '', null, 'yellow', null],
+            [1, 38, 41, '', null, 'red', null],
+            [1, 41, 71, 'P2', 30, 'green', 'TURN_LEFT'],
+            [1, 71, 76, '', null, 'stripe', null],
+            [1, 76, 79, '', null, 'yellow', null],
+            [1, 79, 82, '', null, 'red', null],
+            [1, 82, 122, 'P4', 40, 'green', 'UTURN'], 
+            [1, 122, 127, '', null, 'stripe', null],
+            [1, 127, 130, '', null, 'yellow', null],
+            [1, 130, 140, 'P3', 10, 'green', 'UP'],
+            
+            // 下轨道 (Track 0)
+            [0, 0, 30, 'P5', 30, 'green', 'DOWN'],
+            [0, 30, 35, '', null, 'stripe', null],
+            [0, 35, 38, '', null, 'yellow', null],
+            [0, 38, 41, '', null, 'red', null],
+            [0, 41, 71, 'P6', 30, 'green', 'TURN_RIGHT'],
+            [0, 71, 76, '', null, 'stripe', null],
+            [0, 76, 79, '', null, 'yellow', null],
+            [0, 79, 82, '', null, 'red', null],
+            [0, 82, 122, 'P7', 40, 'green', 'UTURN'],
+            [0, 122, 127, '', null, 'stripe', null],
+            [0, 127, 130, '', null, 'yellow', null],
+            [0, 130, 140, 'P8', 10, 'green', 'DOWN'], 
+          ]
+        }
+      });
+    }, 500);
+  });
+}
+
 // ====== 首页 mock 数据 ======
 
 export function makeHomeData() {

src/views/MainWatch.vue

@@ -122,17 +122,24 @@
         :defaultHeight="dialog.height || 250"
         @close="removeDialog(dialog.id)"
       >
-        <component v-if="dialog.componentName == 'TrafficTimeSpace'"
-          :is="dialog.componentName" 
+        <component v-if="dialog.componentName === 'TrafficTimeSpace'"
+          :is="dialog.componentName"
           :intersections="dialog.nodeData.intersections"
           :distances="dialog.nodeData.distances"
           :wave-data="dialog.nodeData.waveData"
           :green-data="dialog.nodeData.greenData"
           :auto-scroll="false"
         />
+        <component v-else-if="dialog.componentName === 'SignalTimingChart'"
+          :is="dialog.componentName"
+          :loading="isFetchingData"
+          :cycle-length="dialog.nodeData.cycleLength"
+          :current-time="dialog.nodeData.currentTime"
+          :phase-data="dialog.nodeData.phaseData"
+        />
         <component v-else
-          :is="dialog.componentName" 
-          :node-data="dialog.nodeData" 
+          :is="dialog.componentName"
+          :node-data="dialog.nodeData"
         />
       </SmartDialog>
   </div>
@@ -142,14 +149,16 @@
 import MenuItem from '@/components/MenuItem.vue';
 import SmartDialog from '@/components/SmartDialog.vue';
 import TrafficTimeSpace from '@/components/TrafficTimeSpace.vue';
-import { menuData, makeTrafficTimeSpaceData } from '@/mock/data';
+import SignalTimingChart from '@/components/SignalTimingChart.vue';
+import { menuData, makeTrafficTimeSpaceData, fetchSignalTimingData } from '@/mock/data';
 
 export default {
   name: "MainWatch",
   components: { 
     MenuItem,
     SmartDialog,
-    TrafficTimeSpace
+    TrafficTimeSpace,
+    SignalTimingChart
   },
   data() {
     return {
@@ -214,7 +223,21 @@ export default {
   methods: {
     handleMenuClick(payload) {
       console.log('父组件接收到了参数：', payload.id, payload.label);
-      this.openDialog(null, payload.id, payload.label, makeTrafficTimeSpaceData());
+      if (this.currentTab === 'crossing') {
+        this.isFetchingData = true;
+        fetchSignalTimingData(payload.id).then(res => {
+          this.openDialog(null, payload.id, payload.label, {
+            ...payload,
+            ...res.data
+          });
+          this.isFetchingData = false;
+        }).catch(() => {
+          this.isFetchingData = false;
+          alert('获取信号配时数据失败');
+        });
+      } else if (this.currentTab === 'arterial') {
+        this.openDialog(null, payload.id, payload.label, makeTrafficTimeSpaceData());
+      }
     },
     // 弹窗相关
     openDialog(e, id, title, nodeData) {
@@ -242,6 +265,15 @@ export default {
         return; 
       }
 
+      let currentComponentName = '';
+      if (this.currentTab === 'arterial') {
+        currentComponentName = 'TrafficTimeSpace';
+      } else if (this.currentTab === 'crossing') {
+        currentComponentName = 'SignalTimingChart';
+      } else {
+        currentComponentName = 'TrafficTimeSpace'; // 默认组件
+      }
+
       this.activeDialogs.push({
         id: id,
         title: title,
@@ -251,7 +283,7 @@ export default {
         visible: true,
         width: 1000,
         height: 600,
-        componentName: 'TrafficTimeSpace', // 子组件名称，需在 components 中注册
+        componentName: currentComponentName, // 子组件名称，需在 components 中注册
         // 把业务数据也存进来，方便传给子组件
         nodeData: nodeData
       });