From a6f187125ef2f6a55963ca515b7fc39845a83676 Mon Sep 17 00:00:00 2001
From: "zangch@mesnac.com" <zangch@mesnac.com>
Date: Mon, 15 Sep 2025 16:42:27 +0800
Subject: [PATCH] =?UTF-8?q?feat(qms):=20=E6=B7=BB=E5=8A=A0=E8=B4=A8?=
 =?UTF-8?q?=E9=87=8F=E6=8A=A5=E5=91=8A=E6=A8=A1=E5=9D=97=EF=BC=9A=E6=AF=8F?=
 =?UTF-8?q?=E5=91=A8=E7=94=9F=E4=BA=A7=E6=B5=8B=E8=AF=95=E4=B8=8D=E8=89=AF?=
 =?UTF-8?q?=E6=95=B0=E6=8D=AE=E5=88=86=E6=9E=90=E5=9B=BE=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增报告 API 接口和相关类型定义
- 实现每周生产测试不良数据分析图表功能
- 添加日期选择、数据查询、表格展示和 ECharts 图表绘制功能
---
 src/api/qms/report/index.ts    |  19 +++
 src/views/qms/report/index.vue | 234 +++++++++++++++++++++++++++++++++
 2 files changed, 253 insertions(+)
 create mode 100644 src/api/qms/report/index.ts
 create mode 100644 src/views/qms/report/index.vue

diff --git a/src/api/qms/report/index.ts b/src/api/qms/report/index.ts
new file mode 100644
index 0000000..19dbe0f
--- /dev/null
+++ b/src/api/qms/report/index.ts
@@ -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
+  });
+};
diff --git a/src/views/qms/report/index.vue b/src/views/qms/report/index.vue
new file mode 100644
index 0000000..0f95309
--- /dev/null
+++ b/src/views/qms/report/index.vue
@@ -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>