|
|
@@ -0,0 +1,243 @@
|
|
|
+<template>
|
|
|
+ <div class="signal-timing-chart">
|
|
|
+ <div ref="chartRef" class="chart-container"></div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import * as echarts from 'echarts';
|
|
|
+// 引入你的全局自适应 Mixin
|
|
|
+import echartsResize from '@/mixins/echartsResize.js';
|
|
|
+
|
|
|
+// 静态资源与颜色常量保持不变
|
|
|
+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',
|
|
|
+ mixins: [echartsResize], // 注册自适应 mixin
|
|
|
+ props: {
|
|
|
+ cycleLength: { type: Number, default: 0 },
|
|
|
+ currentTime: { type: Number, default: 0 },
|
|
|
+ phaseData: { type: Array, default: () => [] }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ scaleFactor: 1
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.initChart();
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ currentTime() {
|
|
|
+ // 使用 mixin 中的 $_chart 实例
|
|
|
+ if (this.$_chart) {
|
|
|
+ this.updateChart();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ phaseData: {
|
|
|
+ deep: true,
|
|
|
+ handler(newVal) {
|
|
|
+ if (this.$_chart && newVal.length > 0) {
|
|
|
+ this.updateChart();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 动态计算缩放比例
|
|
|
+ updateScale() {
|
|
|
+ const el = this.$el;
|
|
|
+ if (!el) return;
|
|
|
+ const baseWidth = 600;
|
|
|
+ // 限制最小缩放为 0.5，防止极端小弹窗下彻底糊掉
|
|
|
+ this.scaleFactor = Math.max(0.5, el.clientWidth / baseWidth);
|
|
|
+ },
|
|
|
+
|
|
|
+ initChart() {
|
|
|
+ const chartDom = this.$refs.chartRef;
|
|
|
+ if (!chartDom) return;
|
|
|
+
|
|
|
+ this.updateScale();
|
|
|
+ // 初始化 mixin 中的 $_chart
|
|
|
+ this.$_chart = echarts.init(chartDom);
|
|
|
+
|
|
|
+ if (this.phaseData.length > 0) {
|
|
|
+ this.updateChart();
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 该方法会自动被 echartsResize mixin 触发
|
|
|
+ updateChart() {
|
|
|
+ if (!this.$_chart) return;
|
|
|
+
|
|
|
+ // 重绘前更新当前最新的尺寸比例
|
|
|
+ this.updateScale();
|
|
|
+ this.$_chart.setOption(this.getChartOption(), true);
|
|
|
+ },
|
|
|
+
|
|
|
+ getChartOption() {
|
|
|
+ const s = this.scaleFactor;
|
|
|
+ return {
|
|
|
+ backgroundColor: 'transparent',
|
|
|
+ // 因为去掉了头部，稍微减小了 top 的留白，让图表更紧凑
|
|
|
+ grid: {
|
|
|
+ left: Math.round(10 * s),
|
|
|
+ right: Math.round(10 * s),
|
|
|
+ top: Math.round(30 * 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',
|
|
|
+ // 箭头函数确保 this 指向 Vue 实例，以拿到 scaleFactor
|
|
|
+ renderItem: (params, api) => this.renderCustomItem(params, api),
|
|
|
+ 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.max(10, Math.round(10 * s)),
|
|
|
+ fontWeight: 'bold',
|
|
|
+ offset: [0, -2]
|
|
|
+ },
|
|
|
+ lineStyle: { color: COLORS.MARK_BLUE, type: 'solid', width: Math.max(1, Math.round(2 * s)) },
|
|
|
+ data: [ { xAxis: this.currentTime } ]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ },
|
|
|
+
|
|
|
+ // 核心绘图逻辑保持不变，确保全链路使用 this.scaleFactor
|
|
|
+ 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.max(1, 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.max(1, 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.max(1, Math.round(1.5 * s)) } });
|
|
|
+ children.push({ type: 'text', style: { text: st.n, x: midX, y: axisBaseY, fill: COLORS.TEXT_LIGHT, fontSize: Math.max(10, 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' }
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ 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.max(10, 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.max(1, Math.round(1.5 * s)) } });
|
|
|
+ }
|
|
|
+
|
|
|
+ return { type: 'group', children: children };
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.signal-timing-chart {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+.chart-container {
|
|
|
+ width: 100%;
|
|
|
+ flex: 1;
|
|
|
+ min-height: 80px;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+</style>
|
