|
|
<template>
|
|
|
<div class="card">
|
|
|
<div class="card-header">
|
|
|
<div class="card-title">
|
|
|
<span class="card-title-icon">
|
|
|
<Icon icon="fa-solid:check-double" />
|
|
|
</span>
|
|
|
<span>成品检合格率趋势图</span>
|
|
|
</div>
|
|
|
<span class="tag">按天统计（全产线）</span>
|
|
|
</div>
|
|
|
<div class="card-body">
|
|
|
<div id="chart-quality" class="chart"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
import { onMounted } from 'vue'
|
|
|
import * as echarts from 'echarts'
|
|
|
import { useChart, colors, style } from '../utils'
|
|
|
|
|
|
const { init } = useChart('chart-quality')
|
|
|
|
|
|
const last7Days: string[] = []
|
|
|
for (let i = 6; i >= 0; i--) {
|
|
|
const d = new Date()
|
|
|
d.setDate(d.getDate() - i)
|
|
|
last7Days.push(`${d.getMonth() + 1}-${d.getDate()}`)
|
|
|
}
|
|
|
|
|
|
const passRate = [98.5, 99.2, 97.8, 98.9, 99.0, 98.2, 99.5]
|
|
|
|
|
|
onMounted(() => {
|
|
|
const chart = init()
|
|
|
if (!chart) return
|
|
|
|
|
|
chart.setOption({
|
|
|
backgroundColor: 'transparent',
|
|
|
tooltip: { trigger: 'axis' },
|
|
|
grid: { top: '18%', left: '6%', right: '6%', bottom: '10%', containLabel: true },
|
|
|
xAxis: { type: 'category', data: last7Days, axisLine: style.axisLine, axisLabel: style.axisLabel },
|
|
|
yAxis: { type: 'value', min: 96, max: 100, axisLine: { show: false }, axisLabel: style.axisLabel, splitLine: style.splitLine },
|
|
|
series: [{
|
|
|
name: '合格率',
|
|
|
type: 'bar',
|
|
|
barWidth: '45%',
|
|
|
itemStyle: {
|
|
|
borderRadius: [6, 6, 0, 0],
|
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
{ offset: 0, color: colors.purple },
|
|
|
{ offset: 1, color: 'rgba(139,92,246,0.10)' }
|
|
|
])
|
|
|
},
|
|
|
data: passRate,
|
|
|
markLine: {
|
|
|
symbol: ['none', 'none'],
|
|
|
label: { show: true, color: '#fff', fontSize: 12, formatter: '平均 {c}%' },
|
|
|
lineStyle: { color: colors.cyan, width: 2, type: 'dashed' },
|
|
|
data: [{ type: 'average', name: '平均值' }]
|
|
|
}
|
|
|
}]
|
|
|
})
|
|
|
})
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
.card {
|
|
|
background: linear-gradient(135deg, rgba(15,23,42,0.96), rgba(15,23,42,0.88));
|
|
|
border-radius: 10px;
|
|
|
border: 1px solid rgba(30,64,175,0.85);
|
|
|
box-shadow:
|
|
|
0 18px 45px rgba(15,23,42,0.95),
|
|
|
0 0 0 1px rgba(15,23,42,1),
|
|
|
inset 0 0 0 1px rgba(56,189,248,0.05);
|
|
|
padding: 10px 10px 10px 10px;
|
|
|
position: relative;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
|
|
|
.card::before,
|
|
|
.card::after {
|
|
|
content: "";
|
|
|
position: absolute;
|
|
|
width: 13px;
|
|
|
height: 13px;
|
|
|
border-radius: 2px;
|
|
|
border: 1px solid rgba(56,189,248,0.75);
|
|
|
opacity: 0.6;
|
|
|
pointer-events: none;
|
|
|
}
|
|
|
|
|
|
.card::before {
|
|
|
top: -1px;
|
|
|
left: -1px;
|
|
|
border-right: none;
|
|
|
border-bottom: none;
|
|
|
}
|
|
|
|
|
|
.card::after {
|
|
|
right: -1px;
|
|
|
bottom: -1px;
|
|
|
border-left: none;
|
|
|
border-top: none;
|
|
|
}
|
|
|
|
|
|
.card-header {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
margin-bottom: 8px;
|
|
|
padding-bottom: 4px;
|
|
|
border-bottom: 1px solid rgba(41, 54, 95, 0.9);
|
|
|
}
|
|
|
|
|
|
.card-title {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
gap: 8px;
|
|
|
font-size: 15px;
|
|
|
font-weight: 700;
|
|
|
color: #e5f0ff;
|
|
|
}
|
|
|
|
|
|
.card-title-icon {
|
|
|
color: #22d3ee;
|
|
|
}
|
|
|
|
|
|
.card-body {
|
|
|
flex: 1;
|
|
|
min-height: 0;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
gap: 8px;
|
|
|
}
|
|
|
|
|
|
.tag {
|
|
|
border-radius: 999px;
|
|
|
padding: 2px 6px;
|
|
|
font-size: 10px;
|
|
|
border: 1px solid rgba(148,163,184,0.4);
|
|
|
color: #94a3b8;
|
|
|
}
|
|
|
|
|
|
.chart {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
min-height: 180px;
|
|
|
}
|
|
|
|
|
|
@media (max-width: 1600px) {
|
|
|
.chart { min-height: 160px; }
|
|
|
}
|
|
|
</style>
|