<template>
|
<div class="panel-root">
|
<PanelHeader title="质量指标合格分析" />
|
<div class="main-panel panel-item-customers">
|
<div v-for="section in sections" :key="section.key" class="inspect-block">
|
<div class="filters-row">
|
<div class="filters-row-left">
|
<span></span>
|
<p>{{ section.title }}</p>
|
</div>
|
<DateTypeSwitch v-model="section.dateType" @change="(v) => handleDateTypeChange(section.key, v)" />
|
</div>
|
|
<div class="inspect-body">
|
<div class="ring">
|
<Echarts :chartStyle="ringChartStyle" :series="buildRingSeries(section)" :tooltip="ringTooltip"
|
:legend="{ show: false }" :options="ringOptions" />
|
</div>
|
|
<div class="stats">
|
<div class="stat-row">
|
<div class="stat-left">
|
<span class="dot dot-qualified"></span>
|
<span class="stat-label">合格数</span>
|
</div>
|
<div class="stat-right">
|
<span class="stat-value">{{ section.qualifiedCount }}</span>
|
<span class="stat-percent">{{ formatPercent(section.qualifiedRate) }}</span>
|
</div>
|
</div>
|
<div class="stat-row">
|
<div class="stat-left">
|
<span class="dot dot-unqualified"></span>
|
<span class="stat-label">不合格数</span>
|
</div>
|
<div class="stat-right">
|
<span class="stat-value">{{ section.unqualifiedCount }}</span>
|
<span class="stat-percent">{{ formatPercent(section.unqualifiedRate) }}</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup>
|
import { reactive, onMounted } from 'vue'
|
import Echarts from '@/components/Echarts/echarts.vue'
|
import PanelHeader from './PanelHeader.vue'
|
import DateTypeSwitch from './DateTypeSwitch.vue'
|
import { rawMaterialDetection, processDetection, factoryDetection } from '@/api/viewIndex.js'
|
import { BI, baseChartOptions } from '../theme.js'
|
|
const QUALIFIED_COLOR = BI.accentBright
|
const UNQUALIFIED_COLOR = BI.series[2]
|
const TRACK_COLOR = 'rgba(74, 108, 240, 0.12)'
|
|
const apiMap = {
|
raw: rawMaterialDetection,
|
process: processDetection,
|
final: factoryDetection,
|
}
|
|
|
const fetchSectionData = async (section) => {
|
const api = apiMap[section.key]
|
if (!api) return
|
|
try {
|
const res = await api({
|
type: section.dateType,
|
})
|
|
if (res?.code === 200 && res?.data) {
|
const data = res.data
|
section.qualifiedCount = Number(data.qualifiedCount || 0)
|
section.unqualifiedCount = Number(data.unqualifiedCount || 0)
|
section.qualifiedRate = Number(data.qualifiedRate || 0)
|
section.unqualifiedRate = Number(data.unqualifiedRate || 0)
|
}
|
} catch (err) {
|
console.error(`${section.key} 接口请求失败`, err)
|
}
|
}
|
|
|
const sections = reactive([
|
{
|
key: 'raw',
|
title: '原材料检测',
|
dateType: 3,
|
qualifiedCount: 0,
|
unqualifiedCount: 0,
|
qualifiedRate: 0,
|
unqualifiedRate: 0,
|
},
|
{
|
key: 'process',
|
title: '过程检测',
|
dateType: 3,
|
qualifiedCount: 0,
|
unqualifiedCount: 0,
|
qualifiedRate: 0,
|
unqualifiedRate: 0,
|
},
|
{
|
key: 'final',
|
title: '成品出厂检测',
|
dateType: 3,
|
qualifiedCount: 0,
|
unqualifiedCount: 0,
|
qualifiedRate: 0,
|
unqualifiedRate: 0,
|
},
|
])
|
|
const ringChartStyle = {
|
width: '110px',
|
height: '110px',
|
}
|
|
const ringOptions = baseChartOptions
|
|
const ringTooltip = {
|
show: false,
|
}
|
|
const calcRates = (qualifiedCount, unqualifiedCount) => {
|
const total = Number(qualifiedCount || 0) + Number(unqualifiedCount || 0)
|
if (total <= 0) return { qualifiedRate: 0, unqualifiedRate: 0 }
|
const qualifiedRate = Math.round((Number(qualifiedCount || 0) / total) * 100)
|
const unqualifiedRate = Math.max(0, 100 - qualifiedRate)
|
return { qualifiedRate, unqualifiedRate }
|
}
|
|
const formatPercent = (v) => `${Number(v || 0)}%`
|
|
const buildRingSeries = (section) => {
|
const qualified = Number(section.qualifiedCount || 0)
|
const unqualified = Number(section.unqualifiedCount || 0)
|
const total = qualified + unqualified
|
|
const series = [
|
{
|
type: 'pie',
|
radius: ['68%', '82%'],
|
center: ['50%', '50%'],
|
silent: true,
|
label: { show: false },
|
labelLine: { show: false },
|
itemStyle: { color: TRACK_COLOR },
|
data: [1],
|
},
|
]
|
|
// 数据为空时不渲染主环，避免 ECharts 空饼图渲染出灰色圆环
|
if (total > 0) series.push({
|
name: section.title,
|
type: 'pie',
|
radius: ['68%', '82%'],
|
center: ['50%', '50%'],
|
silent: true,
|
label: { show: false },
|
labelLine: { show: false },
|
startAngle: 90,
|
clockwise: true,
|
minAngle: total > 0 ? 8 : 0,
|
itemStyle: {
|
borderColor: BI.sliceBorder,
|
borderWidth: 2,
|
borderRadius: 4,
|
},
|
data: [
|
{
|
value: qualified,
|
name: '合格数',
|
itemStyle: { color: QUALIFIED_COLOR },
|
},
|
{
|
value: unqualified,
|
name: '不合格数',
|
itemStyle: { color: UNQUALIFIED_COLOR },
|
},
|
],
|
})
|
|
series.push({
|
type: 'pie',
|
radius: ['52%', '56%'],
|
center: ['50%', '50%'],
|
silent: true,
|
label: { show: false },
|
labelLine: { show: false },
|
itemStyle: { color: 'rgba(74, 108, 240, 0.22)' },
|
data: [1],
|
})
|
|
return series
|
}
|
|
const handleDateTypeChange = (key, dateType) => {
|
const section = sections.find((s) => s.key === key)
|
if (!section) return
|
section.dateType = dateType
|
// 切换日期类型时重新获取数据
|
fetchSectionData(section)
|
}
|
|
// 组件挂载时获取所有section的数据
|
onMounted(() => {
|
sections.forEach((section) => {
|
fetchSectionData(section)
|
})
|
})
|
</script>
|
|
<style scoped lang="scss">
|
.panel-root {
|
flex: 1;
|
height: 100%;
|
min-height: 0;
|
display: flex;
|
flex-direction: column;
|
}
|
|
.main-panel {
|
display: flex;
|
flex-direction: column;
|
flex: 1;
|
min-height: 0;
|
gap: 0;
|
}
|
|
.filters-row {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
gap: 12px;
|
margin-bottom: 10px;
|
|
.filters-row-left {
|
width: 50%;
|
color: var(--bi-text-strong);
|
display: flex;
|
align-items: center;
|
gap: 8px;
|
|
/* 品牌蓝细竖条，与 PanelHeader 呼应 */
|
span {
|
flex-shrink: 0;
|
width: 3px;
|
height: 14px;
|
border-radius: 2px;
|
background: linear-gradient(180deg, var(--bi-accent-bright) 0%, var(--bi-accent) 100%);
|
}
|
|
p {
|
font-size: 14px;
|
font-weight: 500;
|
letter-spacing: 1px;
|
color: var(--bi-text-strong);
|
}
|
}
|
}
|
|
.panel-item-customers {
|
border: 1px solid var(--bi-panel-border);
|
background: var(--bi-panel-bg);
|
border-radius: 8px;
|
padding: 14px 18px;
|
width: 100%;
|
box-sizing: border-box;
|
}
|
|
.inspect-block {
|
flex: 1 1 0;
|
min-height: 0;
|
display: flex;
|
flex-direction: column;
|
padding: 8px 0;
|
gap: 6px;
|
position: relative;
|
}
|
|
.inspect-block:not(:last-child)::after {
|
content: '';
|
position: absolute;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
height: 1px;
|
background: linear-gradient(90deg, rgba(74, 108, 240, 0) 0%, rgba(74, 108, 240, 0.55) 50%, rgba(74, 108, 240, 0) 100%);
|
pointer-events: none;
|
}
|
|
.inspect-body {
|
flex: 1 1 auto;
|
min-height: 0;
|
display: flex;
|
justify-content: space-around;
|
align-items: center;
|
gap: 18px;
|
}
|
|
.ring {
|
width: 120px;
|
height: 120px;
|
flex: 0 0 120px;
|
position: relative;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
|
.stats {
|
width: 240px;
|
flex: 0 0 240px;
|
display: grid;
|
grid-template-rows: 1fr 1fr;
|
gap: 10px;
|
}
|
|
.stat-row {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
height: 100%;
|
padding: 10px 14px;
|
border-radius: 6px;
|
border: 1px solid var(--bi-panel-border);
|
background: rgba(13, 24, 52, 0.6);
|
}
|
|
.stat-left {
|
display: inline-flex;
|
align-items: center;
|
gap: 10px;
|
color: var(--bi-text);
|
font-size: 12px;
|
}
|
|
.dot {
|
width: 10px;
|
height: 10px;
|
border-radius: 2px;
|
display: inline-block;
|
}
|
|
.dot-qualified {
|
background: var(--bi-accent-bright);
|
}
|
|
.dot-unqualified {
|
background: #8E7CE6;
|
}
|
|
.stat-right {
|
display: inline-flex;
|
align-items: baseline;
|
gap: 14px;
|
}
|
|
.stat-value {
|
color: var(--bi-text-strong);
|
font-size: 14px;
|
font-weight: 600;
|
min-width: 40px;
|
text-align: right;
|
font-variant-numeric: tabular-nums;
|
}
|
|
.stat-percent {
|
color: var(--bi-text);
|
font-size: 12px;
|
min-width: 40px;
|
text-align: right;
|
font-variant-numeric: tabular-nums;
|
}
|
|
/* 让切换按钮更贴近截图（更紧凑） */
|
:deep(.date-type-switch .el-radio-button__inner) {
|
padding: 4px 16px;
|
font-size: 12px;
|
}
|
</style>
|
