diff --git a/src/views/screens/wip/index.vue b/src/views/screens/wip/index.vue index 559ffd8..af68af5 100644 --- a/src/views/screens/wip/index.vue +++ b/src/views/screens/wip/index.vue @@ -102,24 +102,26 @@
-
-
- - 今日完成 -
-
-
- {{ todayCompletedCount }} - 完成卷数 +
+
+
+ + 今日完成
-
-
- {{ todayCompletedWeight }} - 总重量 (kg) +
+
+ {{ todayCompletedCount }} + 完成卷数 +
+
+
+ {{ todayCompletedWeight }} + 总重量 (kg) +
+
+
+
-
-
-
@@ -228,16 +230,18 @@
-
-
- - 工序分布 -
-
-
-
-
-
+
+
+
+ + 工序分布 +
+
+
+
+
+
+
@@ -538,16 +542,55 @@ const initLeftChart = () => { const updateLeftChart = () => { if (!leftChartInstance) return const data = todayCompletedByProcess.value + const values = data.map(d => d.count) + const avg = values.length ? (values.reduce((a, b) => a + b, 0) / values.length).toFixed(1) : 0 leftChartInstance.setOption({ tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } }, grid: { left: 10, right: 30, top: 8, bottom: 8, containLabel: true }, xAxis: { type: 'value', splitLine: { lineStyle: { color: 'rgba(0,212,255,0.08)' } }, axisLabel: { color: 'rgba(255,255,255,0.5)', fontSize: 10 } }, yAxis: { type: 'category', data: data.map(d => d.name), axisLine: { show: false }, axisTick: { show: false }, axisLabel: { color: 'rgba(255,255,255,0.7)', fontSize: 11 } }, + graphic: [{ + type: 'text', + right: 4, + top: 2, + style: { + text: `均值 ${avg}`, + fill: '#00d4ff', + font: 'bold 11px Courier New, monospace', + textShadowBlur: 8, + textShadowColor: 'rgba(0, 212, 255, 0.5)' + }, + z: 100 + }], series: [{ type: 'bar', data: data.map((d, i) => ({ value: d.count, itemStyle: { color: chartColors[i % chartColors.length] } })), barWidth: 14, - label: { show: true, position: 'right', color: 'rgba(255,255,255,0.6)', fontSize: 11, formatter: (p) => p.value > 0 ? p.value : '' } + label: { show: true, position: 'right', color: 'rgba(255,255,255,0.6)', fontSize: 11, formatter: (p) => p.value > 0 ? p.value : '' }, + z: 10 + }, { + type: 'line', + data: values, + smooth: true, + symbol: 'none', + animationDuration: 1000, + animationDelay: 400, + lineStyle: { + color: '#00d4ff', + width: 2, + shadowBlur: 12, + shadowColor: 'rgba(0, 212, 255, 0.6)' + }, + areaStyle: { + color: { + type: 'linear', x: 0, y: 0, x2: 0, y2: 1, + colorStops: [ + { offset: 0, color: 'rgba(0, 212, 255, 0.2)' }, + { offset: 1, color: 'rgba(0, 212, 255, 0)' } + ] + } + }, + z: 5 }] }) } @@ -1277,13 +1320,19 @@ onBeforeUnmount(() => { min-height: 0; } +.chart-inner-wrap { + position: relative; + width: 100%; + height: 100%; +} + .chart-inner { + position: absolute; + inset: 0; display: flex; flex-direction: column; padding: 16px 12px 12px; box-sizing: border-box; - height: 100%; - min-height: 0; overflow: hidden; }