|
|
@@ -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 };
|
|
|
}
|