<template>
|
<HomePanel title="质量统计" :loading="loading">
|
<template #extra>
|
<el-radio-group v-model="range" size="small" @change="refresh">
|
<el-radio-button :value="1">周</el-radio-button>
|
<el-radio-button :value="2">月</el-radio-button>
|
<el-radio-button :value="3">季度</el-radio-button>
|
</el-radio-group>
|
</template>
|
|
<div class="quality__cards">
|
<div class="quality__mini">
|
<span class="quality__mini-label">原材料已检测</span>
|
<span class="quality__mini-value app-num">{{ total.supplierNum }}<i>件</i></span>
|
</div>
|
<div class="quality__mini">
|
<span class="quality__mini-label">过程检验</span>
|
<span class="quality__mini-value app-num">{{ total.processNum }}<i>件</i></span>
|
</div>
|
<div class="quality__mini">
|
<span class="quality__mini-label">出厂已检</span>
|
<span class="quality__mini-value app-num">{{ total.factoryNum }}<i>件</i></span>
|
</div>
|
</div>
|
|
<Echarts
|
:chartStyle="{ width: '100%', height: '230px' }"
|
:grid="grid"
|
:legend="legend"
|
:series="series"
|
:tooltip="tooltip"
|
:xAxis="xAxis"
|
:yAxis="yAxis"
|
style="height: 230px"
|
/>
|
</HomePanel>
|
</template>
|
|
<script setup>
|
import { ref, reactive, onMounted } from 'vue'
|
import Echarts from '@/components/Echarts/echarts.vue'
|
import HomePanel from '../HomePanel.vue'
|
import { qualityInspectionStatistics } from '@/api/viewIndex'
|
|
const loading = ref(true)
|
const range = ref(1)
|
const total = reactive({ supplierNum: 0, processNum: 0, factoryNum: 0 })
|
|
const legend = { show: true, top: 0, right: 0, itemWidth: 10, itemHeight: 10, data: ['原材料不合格数', '过程不合格数', '出厂不合格数'] }
|
const grid = { left: '3%', right: '4%', bottom: '3%', top: 34, containLabel: true }
|
const tooltip = { trigger: 'axis', axisPointer: { type: 'shadow' } }
|
const xAxis = ref([{ type: 'category', axisTick: { show: false }, data: [] }])
|
const yAxis = [{ type: 'value' }]
|
|
const series = ref([
|
{ name: '原材料不合格数', type: 'bar', barGap: 0, barWidth: 10, itemStyle: { color: '#2C51D9', borderRadius: [3, 3, 0, 0] }, emphasis: { focus: 'series' }, data: [] },
|
{ name: '过程不合格数', type: 'bar', barWidth: 10, itemStyle: { color: '#D97706', borderRadius: [3, 3, 0, 0] }, emphasis: { focus: 'series' }, data: [] },
|
{ name: '出厂不合格数', type: 'bar', barWidth: 10, itemStyle: { color: '#0F9960', borderRadius: [3, 3, 0, 0] }, emphasis: { focus: 'series' }, data: [] }
|
])
|
|
const refresh = () => {
|
return qualityInspectionStatistics({ type: range.value }).then((res) => {
|
const d = res.data || {}
|
xAxis.value[0].data = []
|
series.value.forEach((s) => { s.data = [] })
|
;(d.item || []).forEach((item) => {
|
xAxis.value[0].data.push(item.date)
|
series.value[0].data.push(item.supplierNum)
|
series.value[1].data.push(item.processNum)
|
series.value[2].data.push(item.factoryNum)
|
})
|
total.supplierNum = d.supplierNum || 0
|
total.processNum = d.processNum || 0
|
total.factoryNum = d.factoryNum || 0
|
})
|
}
|
|
onMounted(() => {
|
Promise.all([refresh()]).finally(() => { loading.value = false })
|
})
|
</script>
|
|
<style scoped>
|
.quality__cards {
|
display: flex;
|
gap: 10px;
|
margin-bottom: 12px;
|
}
|
|
.quality__mini {
|
flex: 1;
|
min-width: 0;
|
display: flex;
|
flex-direction: column;
|
gap: 4px;
|
padding: 10px 12px;
|
border-radius: var(--app-radius-sm);
|
background: var(--app-surface-hover);
|
}
|
|
.quality__mini-label {
|
font-size: 12px;
|
color: var(--app-text-tertiary);
|
white-space: nowrap;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
}
|
|
.quality__mini-value {
|
font-size: 16px;
|
font-weight: 600;
|
color: var(--app-text);
|
}
|
|
.quality__mini-value i {
|
font-style: normal;
|
font-size: 12px;
|
font-weight: 400;
|
color: var(--app-text-tertiary);
|
margin-left: 3px;
|
}
|
</style>
|
