wip在产大屏初版

src/views/screens/wip/index.vue

@@ -102,24 +102,26 @@
         <main class="screen-body">
           <div class="body-left">
             <dv-border-box-8 :reverse="true" class="chart-panel">
-              <div class="chart-inner">
+              <div class="chart-inner-wrap">
-                <div class="section-title">
+                <div class="chart-inner">
-                  <span class="section-title-dot"></span>
+                  <div class="section-title">
-                  <span>今日完成</span>
+                    <span class="section-title-dot"></span>
-                </div>
+                    <span>今日完成</span>
-                <div class="summary-cards">
-                  <div class="summary-card">
-                    <span class="summary-number">{{ todayCompletedCount }}</span>
-                    <span class="summary-label">完成卷数</span>
                   </div>
-                  <div class="summary-divider"></div>
+                  <div class="summary-cards">
-                  <div class="summary-card">
+                    <div class="summary-card">
-                    <span class="summary-number weight">{{ todayCompletedWeight }}</span>
+                      <span class="summary-number">{{ todayCompletedCount }}</span>
-                    <span class="summary-label">总重量 (kg)</span>
+                      <span class="summary-label">完成卷数</span>
+                    </div>
+                    <div class="summary-divider"></div>
+                    <div class="summary-card">
+                      <span class="summary-number weight">{{ todayCompletedWeight }}</span>
+                      <span class="summary-label">总重量 (kg)</span>
+                    </div>
+                  </div>
+                  <div class="mini-chart-wrap">
+                    <div ref="leftChartRef" class="mini-chart"></div>
                   </div>
-                </div>
-                <div class="mini-chart-wrap">
-                  <div ref="leftChartRef" class="mini-chart"></div>
                 </div>
               </div>
             </dv-border-box-8>
@@ -228,16 +230,18 @@
           </div>
           <div class="body-right">
             <dv-border-box-8 :reverse="true" class="chart-panel">
-              <div class="chart-inner">
+              <div class="chart-inner-wrap">
-                <div class="section-title">
+                <div class="chart-inner">
-                  <span class="section-title-dot"></span>
+                  <div class="section-title">
-                  <span>工序分布</span>
+                    <span class="section-title-dot"></span>
-                </div>
+                    <span>工序分布</span>
-                <div class="mini-chart-wrap half">
+                  </div>
-                  <div ref="rightDonutRef" class="mini-chart"></div>
+                  <div class="mini-chart-wrap half">
-                </div>
+                    <div ref="rightDonutRef" class="mini-chart"></div>
-                <div class="mini-chart-wrap half">
+                  </div>
-                  <div ref="rightBarRef" class="mini-chart"></div>
+                  <div class="mini-chart-wrap half">
+                    <div ref="rightBarRef" class="mini-chart"></div>
+                  </div>
                 </div>
               </div>
             </dv-border-box-8>
@@ -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;
 }