DeXun/screen
10
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

wip在产大屏初版

Browse Source
This commit is contained in:
jhd
2026-05-29 16:45:12 +08:00
parent a4df18890d
commit da5a5c0d8e
1 changed files with 78 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

107
src/views/screens/wip/index.vue
View File

@@ -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="section-title">
<span class="section-title-dot"></span>
<span>今日完成</span>
</div>
<div class="summary-cards">
<div class="summary-card">
<span class="summary-number">{{ todayCompletedCount }}</span>
<span class="summary-label">完成卷数</span>
<div class="chart-inner-wrap">
<div class="chart-inner">
<div class="section-title">
<span class="section-title-dot"></span>
<span>今日完成</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 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-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="section-title">
<span class="section-title-dot"></span>
<span>工序分布</span>
</div>
<div class="mini-chart-wrap half">
<div ref="rightDonutRef" class="mini-chart"></div>
</div>
<div class="mini-chart-wrap half">
<div ref="rightBarRef" class="mini-chart"></div>
<div class="chart-inner-wrap">
<div class="chart-inner">
<div class="section-title">
<span class="section-title-dot"></span>
<span>工序分布</span>
</div>
<div class="mini-chart-wrap half">
<div ref="rightDonutRef" class="mini-chart"></div>
</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;
}