xins
/
hwmom-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(qms): 添加质量报告模块：每周生产测试不良数据分析图表

Browse Source 
- 新增报告 API 接口和相关类型定义
- 实现每周生产测试不良数据分析图表功能
- 添加日期选择、数据查询、表格展示和 ECharts 图表绘制功能
master
zangch@mesnac.com 3 months ago
parent 0a54320ada
commit a6f187125e
2 changed files with 253 additions and 0 deletions
Show Stats Download Patch File Download Diff File

19
src/api/qms/report/index.ts
Unescape Escape View File

@ -0,0 +1,19 @@
import request from '@/utils/request';
import { AxiosPromise } from 'axios';
import { QcUnqualifiedReviewVO, QcUnqualifiedReviewForm, QcUnqualifiedReviewQuery, CompleteTaskRequest } from '@/api/qms/qcUnqualifiedReview/types';
export const getWeeklyTestReport = (params: { startTime: string, endTime: string }) => {
return request({
url: '/qms/report/weeklyTestReport',
method: 'get',
params
});
};
export const getDefectAnalysisReport = (params: { startTime: string, endTime: string }) => {
return request({
url: '/qms/report/defectAnalysisReport',
method: 'get',
params
});
};

234
src/views/qms/report/index.vue
Unescape Escape View File

@ -0,0 +1,234 @@
<template>
<div class="p-4">
<el-card shadow="hover">
<el-form :model="queryParams" :inline="true">
<el-form-item label="选择周">
<el-date-picker
v-model="selectedWeek"
type="week"
format="YYYY 第 ww 周"
placeholder="选择周"
@change="handleDateChange"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
</el-form-item>
</el-form>
</el-card>
<el-card class="mt-4" shadow="never" v-loading="loading">
<template #header>
<div class="text-center text-xl font-bold">每周生产测试不良数据分析图表</div>
</template>
<!-- 动态数据表格 -->
<el-table :data="tableData" border style="width: 100%" :row-style="{ height: '50px' }">
<el-table-column prop="metric" label="数据" min-width="180" />
<el-table-column
v-for="col in dateColumns"
:key="col.prop"
:prop="col.prop"
align="center"
min-width="100"
>
<template #header>
<div>{{ col.date }}</div>
<div>{{ col.dayOfWeek }}</div>
</template>
<template #default="scope">
<span v-if="scope.row.metric.includes('不良率')">{{ formatValue(scope.row[col.prop]) }}%</span>
<span v-else>{{ formatValue(scope.row[col.prop]) }}</span>
</template>
</el-table-column>
<el-table-column prop="total" label="汇总" align="center" min-width="100">
<template #default="scope">
<span v-if="scope.row.metric.includes('不良率')">{{ formatValue(scope.row.total) }}%</span>
<span v-else>{{ formatValue(scope.row.total) }}</span>
</template>
</el-table-column>
</el-table>
<!-- ECharts 图表容器 -->
<div ref="chartRef" style="width: 100%; height: 400px;" class="mt-4"></div>
</el-card>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
import weekOfYear from 'dayjs/plugin/weekOfYear';
import { getDefectAnalysisReport } from '@/api/qms/report';
// --- 初始化 dayjs 配置 ---
dayjs.extend(weekOfYear);
dayjs.locale('zh-cn');
// --- ECharts 实例 ---
const chartRef = ref<HTMLElement | null>(null);
let chartInstance: echarts.ECharts | null = null;
// --- Vue 响应式状态定义 ---
const loading = ref(false); // 控制加载状态
const selectedWeek = ref(new Date()); // 默认选择当前周
const queryParams = ref({ // API 查询参数
startTime: '',
endTime: ''
});
const reportData = ref<any>(null); // 存储从API获取的原始报告数据
const tableData = ref<any[]>([]); // 存储为表格转换后的数据
const dateColumns = ref<any[]>([]); // 存储动态生成的表格列
// --- ECharts 初始化 ---
const initChart = () => {
if (chartRef.value) {
chartInstance = echarts.init(chartRef.value);
}
};
// --- 数据获取与处理 ---
const handleQuery = async () => {
// 确保有合法的日期范围
if (!queryParams.value.startTime || !queryParams.value.endTime) {
handleDateChange(new Date()); // 如果没有，则使用当前日期初始化
}
loading.value = true;
try {
// 调用后端接口获取报告数据
const res = await getDefectAnalysisReport(queryParams.value);
if (res.code === 200) {
reportData.value = res.data;
// 将API数据转换为表格和图表需要的格式
transformDataForTable();
updateChart();
}
} catch (error) {
console.error("获取报告数据失败:", error);
} finally {
loading.value = false;
}
};
// --- 核心逻辑：数据转换为表格格式 ---
const transformDataForTable = () => {
if (!reportData.value) {
tableData.value = [];
dateColumns.value = [];
return;
}
const { tableData: apiTableData, dateColumns: apiDateColumns } = reportData.value;
tableData.value = apiTableData || [];
dateColumns.value = apiDateColumns || [];
};
// --- 更新 ECharts 图表 ---
const updateChart = () => {
if (!chartInstance || !reportData.value || !reportData.value.chartData) return;
const { chartData } = reportData.value;
// 配置 ECharts 的 option
const option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: { color: '#999' }
}
},
legend: {
data: ['检验数量', '不良数量', '不良率']
},
xAxis: [
{
type: 'category',
data: chartData.dates,
axisPointer: { type: 'shadow' }
}
],
yAxis: [
{
type: 'value',
name: '数量 (个)',
min: 0,
axisLabel: { formatter: '{value}' }
},
{
type: 'value',
name: '不良率 (%)',
min: 0,
axisLabel: { formatter: '{value} %' }
}
],
series: [
{
name: '检验数量',
type: 'bar',
tooltip: { valueFormatter: (value: number) => value + ' 个' },
data: chartData.inspectionData
},
{
name: '不良数量',
type: 'bar',
tooltip: { valueFormatter: (value: number) => value + ' 个' },
data: chartData.defectData
},
{
name: '不良率',
type: 'line',
yAxisIndex: 1, // 关联到第二个 y 轴
tooltip: { valueFormatter: (value: number) => value + ' %' },
data: chartData.defectRateData
}
]
};
chartInstance.setOption(option);
};
// --- 格式化数值显示 ---
const formatValue = (value: any) => {
if (value === null || value === undefined) return '0';
if (typeof value === 'number') {
return value.toLocaleString();
}
return value;
};
// --- 事件处理 ---
const handleDateChange = (date: Date) => {
// 根据选择的日期计算该周的开始和结束日期
const startOfWeek = dayjs(date).startOf('week');
const endOfWeek = dayjs(date).endOf('week');
queryParams.value.startTime = startOfWeek.format('YYYY-MM-DD');
queryParams.value.endTime = endOfWeek.format('YYYY-MM-DD');
};
// --- Vue 生命周期钩子 ---
onMounted(() => {
// 1. 初始化图表实例
initChart();
// 2. 首次加载时，获取当前周的数据
handleDateChange(selectedWeek.value);
handleQuery();
// 3. 监听窗口大小变化，自适应重绘图表
window.addEventListener('resize', () => {
if (chartInstance) {
chartInstance.resize();
}
});
});
</script>
<style scoped>
/* 您可以在此添加自定义样式 */
.el-form-item {
margin-bottom: 0;
}
</style>
Write Preview
Loading…
Cancel
Save