Explorar o código

修改SignalTimingChart组件添加简版模式;

画安 hai 2 días
pai
achega
6f1f65a8d3
Modificáronse 1 ficheiros con 24 adicións e 22 borrados
  1. 24 22
      src/components/ui/SignalTimingChart.vue

+ 24 - 22
src/components/ui/SignalTimingChart.vue

@@ -36,7 +36,8 @@ export default {
   props: {
     cycleLength: { type: Number, default: 0 },
     currentTime: { type: Number, default: 0 },
-    phaseData: { type: Array, default: () => [] }
+    phaseData: { type: Array, default: () => [] },
+    isMiniMode: { type: Boolean, default: false } // 是否为表格内极简模式
   },
   data() {
     return {
@@ -115,7 +116,7 @@ export default {
             renderItem: (params, api) => this.renderCustomItem(params, api),
             encode: { x: [1, 2], y: 0 },
             data: this.phaseData,
-            markLine: {
+            markLine: this.isMiniMode ? false : {
               symbol: ['none', 'none'],
               silent: true,
               label: {
@@ -169,7 +170,7 @@ export default {
       const children = [];
 
       // A. 绘制刻度
-      if (params.dataIndex === 0) {
+      if (params.dataIndex === 0 && !this.isMiniMode) {
         const axisBaseY = params.coordSys.y - Math.round(20 * s);
         [0, 35, 70, 105, 140].forEach(val => {
           const x = api.coord([val, 0])[0];
@@ -196,27 +197,28 @@ export default {
 
         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' }
-          });
+        if (!this.isMiniMode) {
+          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' } });
         }
-
-        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)) } });
       }
+        
+        // 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 };
     }