diff --git a/frontend/src/views/Production.vue b/frontend/src/views/Production.vue index bcbb211..4c89e4f 100644 --- a/frontend/src/views/Production.vue +++ b/frontend/src/views/Production.vue @@ -339,21 +339,37 @@ export default { const u = it.unit || '其他' ;(groups[u] = groups[u] || []).push({ label: it.label, value: v }) }) - return Object.entries(groups).map(([unit, items], gi) => ({ - unit, - option: { - tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } }, - grid: { left: 44, right: 12, top: 16, bottom: 78 }, - xAxis: { - type: 'category', - data: items.map(i => i.label.replace(/(开卷机|九辊矫直机|切头剪|酸洗槽|漂洗槽|三辊张力|平整机|静电涂油机|卷取机|夹送辊|挤干辊)\s?/g, '')), - axisLabel: { rotate: 40, fontSize: 9, color: '#666' }, - axisLine: { lineStyle: { color: '#ddd' } }, + const KIND = { 'm/min': 'area', 'kN': 'line', '°C': 'bar', 'A': 'bar', 'Hz': 'line', 'kN·m': 'bar', 'g/L': 'area' } + return Object.entries(groups).map(([unit, items], gi) => { + const color = CHART_COLORS[gi % CHART_COLORS.length] + const data = items.map(i => i.value) + const kind = KIND[unit] || (gi % 2 ? 'line' : 'bar') + let series + if (kind === 'bar') { + series = { type: 'bar', data, itemStyle: { color, borderRadius: [3, 3, 0, 0] }, barMaxWidth: 18 } + } else { + series = { + type: 'line', data, smooth: true, symbol: 'circle', symbolSize: 6, + itemStyle: { color }, lineStyle: { color, width: 2 }, + areaStyle: kind === 'area' ? { color, opacity: 0.12 } : undefined, + } + } + return { + unit, + option: { + tooltip: { trigger: 'axis', axisPointer: { type: kind === 'bar' ? 'shadow' : 'line' } }, + grid: { left: 44, right: 12, top: 16, bottom: 78 }, + xAxis: { + type: 'category', boundaryGap: kind === 'bar', + data: items.map(i => i.label.replace(/(开卷机|九辊矫直机|切头剪|酸洗槽|漂洗槽|三辊张力|平整机|静电涂油机|卷取机|夹送辊|挤干辊)\s?/g, '')), + axisLabel: { rotate: 40, fontSize: 9, color: '#666' }, + axisLine: { lineStyle: { color: '#ddd' } }, + }, + yAxis: { type: 'value', name: unit, nameTextStyle: { color: '#999', fontSize: 10 }, axisLabel: { color: '#666', fontSize: 9 }, splitLine: { lineStyle: { color: '#eee' } } }, + series: [series], }, - yAxis: { type: 'value', name: unit, nameTextStyle: { color: '#999', fontSize: 10 }, axisLabel: { color: '#666', fontSize: 9 }, splitLine: { lineStyle: { color: '#eee' } } }, - series: [{ type: 'bar', data: items.map(i => i.value), itemStyle: { color: CHART_COLORS[gi % CHART_COLORS.length] }, barMaxWidth: 18 }], - }, - })) + } + }) }, }, created() { this.fetchData() }, diff --git a/frontend/src/views/Quality.vue b/frontend/src/views/Quality.vue index bdbee22..086c68f 100644 --- a/frontend/src/views/Quality.vue +++ b/frontend/src/views/Quality.vue @@ -1,93 +1,5 @@