| | |
| | | </el-col> |
| | | </el-row> |
| | | </div> |
| | | <div class=charts-container> |
| | | <el-row :gutter=20> |
| | | <el-col :span=24> |
| | | <el-card class=chart-card shadow=hover> |
| | | <template #header> |
| | | <div class=card-header> |
| | | <div class=chart-title-line></div> |
| | | <span>按人员/班组统计质量数据</span> |
| | | </div> |
| | | </template> |
| | | <el-row :gutter=20> |
| | | <el-col :span=12> |
| | | <div class=quality-rate-block> |
| | | <div class=quality-rate-block-title>按人员统计</div> |
| | | <el-table :data=personGroupRateData.personList size=small border class=quality-rate-table> |
| | | <el-table-column prop=dimensionName label=人员 min-width=120 /> |
| | | <el-table-column prop=totalCount label=总数 min-width=80 /> |
| | | <el-table-column prop=qualifiedCount label=合格数 min-width=90 /> |
| | | <el-table-column prop=unqualifiedCount label=不合格数 min-width=100 /> |
| | | <el-table-column prop=reworkCount label=返工数 min-width=90 /> |
| | | <el-table-column prop=scrapCount label=报废数 min-width=90 /> |
| | | <el-table-column label=合格率 min-width=90><template #default="scope">{{ formatRateValue(scope.row.passRate) }}</template></el-table-column> |
| | | <el-table-column label=返工率 min-width=90><template #default="scope">{{ formatRateValue(scope.row.reworkRate) }}</template></el-table-column> |
| | | <el-table-column label=报废率 min-width=90><template #default="scope">{{ formatRateValue(scope.row.scrapRate) }}</template></el-table-column> |
| | | </el-table> |
| | | </div> |
| | | </el-col> |
| | | <el-col :span=12> |
| | | <div class=quality-rate-block> |
| | | <div class=quality-rate-block-title>按班组统计</div> |
| | | <el-table :data=personGroupRateData.groupList size=small border class=quality-rate-table> |
| | | <el-table-column prop=dimensionName label=班组 min-width=120 /> |
| | | <el-table-column prop=totalCount label=总数 min-width=80 /> |
| | | <el-table-column prop=qualifiedCount label=合格数 min-width=90 /> |
| | | <el-table-column prop=unqualifiedCount label=不合格数 min-width=100 /> |
| | | <el-table-column prop=reworkCount label=返工数 min-width=90 /> |
| | | <el-table-column prop=scrapCount label=报废数 min-width=90 /> |
| | | <el-table-column label=合格率 min-width=90><template #default="scope">{{ formatRateValue(scope.row.passRate) }}</template></el-table-column> |
| | | <el-table-column label=返工率 min-width=90><template #default="scope">{{ formatRateValue(scope.row.reworkRate) }}</template></el-table-column> |
| | | <el-table-column label=报废率 min-width=90><template #default="scope">{{ formatRateValue(scope.row.scrapRate) }}</template></el-table-column> |
| | | </el-table> |
| | | </div> |
| | | </el-col> |
| | | </el-row> |
| | | </el-card> |
| | | </el-col> |
| | | </el-row> |
| | | </div> |
| | | </div> |
| | | </template> |
| | | |
| | |
| | | import { ref, reactive, onMounted, nextTick } from "vue"; |
| | | import { ElMessage } from "element-plus"; |
| | | import * as echarts from "echarts"; |
| | | import { getInspectStatistics, getPassRateStatistics, getMonthlyPassRateStatistics, getYearlyPassRateStatistics, getMonthlyCompletionDetails, getTopParameters } from "@/api/reportAnalysis/qualityReport"; |
| | | import { getInspectStatistics, getPassRateStatistics, getMonthlyPassRateStatistics, getYearlyPassRateStatistics, getMonthlyCompletionDetails, getTopParameters, getPersonGroupRateStatistics } from "@/api/reportAnalysis/qualityReport"; |
| | | |
| | | // 响应式数据 |
| | | const filterForm = reactive({ |
| | |
| | | const yearlyPassRateData = ref([]); |
| | | const monthlyCompletionDetailsData = ref([]); |
| | | const topParametersData = ref({ totalCount: 0, list: [] }); |
| | | const personGroupRateData = ref({ personList: [], groupList: [] }); |
| | | const activeTab = ref("raw"); |
| | | |
| | | const getParameterColor = (index) => { |
| | |
| | | } |
| | | return field === 'completionRate' || field === 'passRate' ? '0%' : 0; |
| | | }; |
| | | const formatRateValue = value => { |
| | | return value || value === 0 ? Number(value).toFixed(2) + '%' : '0.00%'; |
| | | }; |
| | | |
| | | const fetchPersonGroupRateStatisticsData = async () => { |
| | | try { |
| | | const res = await getPersonGroupRateStatistics(); |
| | | if (res.code === 200 && res.data) { |
| | | personGroupRateData.value = { |
| | | personList: res.data.personList || [], |
| | | groupList: res.data.groupList || [] |
| | | }; |
| | | } |
| | | } catch (error) { |
| | | console.error("Failed to fetch person/group rate statistics:", error); |
| | | } |
| | | }; |
| | | |
| | | |
| | | const fetchInspectStatisticsData = async () => { |
| | | try { |
| | |
| | | |
| | | watch(activeTab, () => { |
| | | fetchTopParametersData(); |
| | | fetchPersonGroupRateStatisticsData(); |
| | | }); |
| | | |
| | | |
| | |
| | | fetchYearlyPassRateData(); |
| | | fetchMonthlyCompletionDetailsData(); |
| | | fetchTopParametersData(); |
| | | fetchPersonGroupRateStatisticsData(); |
| | | nextTick(() => { |
| | | initSampleChart(); |
| | | initEquipmentChart(); |
| | |
| | | border-radius: 3px; |
| | | } |
| | | |
| | | .quality-rate-block { |
| | | min-height: 320px; |
| | | } |
| | | |
| | | .quality-rate-block-title { |
| | | font-size: 15px; |
| | | font-weight: 600; |
| | | color: #303133; |
| | | margin-bottom: 12px; |
| | | } |
| | | |
| | | .quality-rate-table { |
| | | width: 100%; |
| | | } |
| | | |
| | | .chart-container { |
| | | height: 250px; |
| | | width: 100%; |