构建高效的Web版SPC控制图系统：从设计到实现的全流程指南

最新推荐文章于 2024-10-28 12:22:10 发布

趣享先生

最新推荐文章于 2024-10-28 12:22:10 发布

阅读量1k

点赞数 34

分类专栏：前端案例分享专栏文章标签：前端

本文链接：https://blog.csdn.net/hh867308122/article/details/143183394

版权

前端案例分享专栏专栏收录该内容

27 篇文章

订阅专栏

在这里插入图片描述

✅作者简介：2022年博客新星第八。热爱国学的Java后端开发者，修心和技术同步精进。
🍎个人主页：Java Fans的博客
🍊个人信条：不迁怒，不贰过。小知识，大智慧。
💞当前专栏：Java案例分享专栏
✨特色专栏：国学周更-心性养成之路
🥭本文内容：构建高效的Web版SPC控制图系统：从设计到实现的全流程指南

前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到网站。

文章目录

在这里插入图片描述

前言

在现代制造业和服务业中，统计过程控制（SPC）作为一种有效的质量管理工具，越来越受到重视。通过实时监控和分析生产过程中的数据，SPC能够帮助企业及时识别潜在问题，降低缺陷率，提高产品质量。然而，传统的SPC方法往往依赖于手动数据记录和分析，效率低下且容易出错。

随着信息技术的迅猛发展，Web应用程序为SPC的实施提供了新的可能性。本文将探讨如何构建一个高效的Web版SPC控制图系统，涵盖从系统设计、数据库管理到实时数据处理的各个方面。我们将重点介绍如何利用Java和WebSocket技术，实现自动化的数据监控与报警机制，确保企业在生产过程中始终保持高水平的质量控制。

无论你是质量管理领域的专业人士，还是对SPC感兴趣的开发者，本文都将为你提供实用的指导和深入的见解，助你在构建现代化的SPC系统中迈出坚实的一步。让我们一起探索如何将传统的质量管理方法与现代技术相结合，推动企业的持续改进与创新。

好的，让我们详细阐述这个项目的架构和实现步骤。

项目架构

技术栈

前端: 使用 HTML、CSS 和 JavaScript，推荐使用现代框架如 React 或 Vue，以提高开发效率和用户体验。
后端: 采用 Java 语言，使用 Spring Boot 框架来构建 RESTful API。
数据库: 选择 Microsoft SQL Server 作为数据存储解决方案，支持复杂查询和事务处理。
WebSocket: 用于实现实时数据传输，确保前端能够即时接收到后端的数据更新。

好的，让我们详细阐述项目的功能模块，包括每个模块的目的、主要功能和实现细节。

功能模块

1. 用户界面

目的: 提供用户友好的界面，方便用户查看和操作数据。
主要功能:
- 数据展示：以表格或图表形式展示数据记录、产品特性和报警信息。
- 用户交互：提供表单和按钮，允许用户输入数据、设置报警条件等。
实现细节:
- 使用前端框架（如React或Vue）构建组件化的用户界面。
- 通过API调用获取后端数据，并动态更新界面。

2. 数据记录表

目的: 存储用户输入的实时数据记录。
主要功能:
- 数据录入：允许用户手动输入或通过接口自动录入数据。
- 数据查询：支持按时间、产品ID等条件查询数据。
实现细节:
- 在数据库中创建数据记录表，设计合适的字段（如ID、时间戳、产品ID、特性值等）。
- 提供API接口，支持前端进行数据的增、删、改、查操作。

3. 产品特性表

目的: 描述产品的特性和参数，便于后续的数据分析。
主要功能:
- 特性管理：允许用户添加、修改和删除产品特性。
- 特性查询：支持按产品ID查询特性信息。
实现细节:
- 在数据库中创建产品特性表，设计字段（如产品ID、特性名称、特性值等）。
- 提供相关API接口，支持前端进行特性管理。

4. 报警设置表

目的: 允许用户配置报警条件，以便及时响应异常情况。
主要功能:
- 报警条件设置：用户可以定义报警条件（如阈值、优先级等）。
- 报警记录：记录历史报警信息，便于后续分析。
实现细节:
- 在数据库中创建报警设置表，设计字段（如报警ID、条件、优先级等）。
- 提供API接口，允许用户设置和查询报警条件。

5. SPC常数表

目的: 存储与统计过程控制（SPC）相关的常数和参数。
主要功能:
- 常数管理：允许用户添加、修改和删除SPC常数。
- 常数查询：支持按名称或类别查询常数信息。
实现细节:
- 在数据库中创建SPC常数表，设计字段（如常数名称、值等）。
- 提供API接口，支持前端进行常数管理。

6. 数据处理

目的: 对收集到的数据进行分析和处理，以支持决策。
主要功能:
- 控制图识别：自动识别八大控制图类型。
- 指标计算：计算CpK、PPK和PPM等质量指标。
- 报警点标记：标记数据中的报警点，识别报警模式。
实现细节:
- 实现算法来识别控制图类型，使用状态机或规则引擎。
- 编写函数计算CpK、PPK和PPM，确保算法的准确性。
- 使用数据库存储报警点信息，提供API接口供前端查询。

7. 定时任务

目的: 定期计算并更新数据库中的相关值，确保数据的实时性和准确性。
主要功能:
- 定时计算：定期执行计算任务，更新产品相关值。
- 数据清理：定期清理过期或无效的数据记录。
实现细节:
- 使用Spring的定时任务功能（@Scheduled注解）实现定时任务。
- 编写定时任务逻辑，确保任务的准确执行。

8. WebSocket

目的: 实现前端与后端之间的实时数据传输。
主要功能:
- 实时更新：前端能够即时接收到后端的数据更新。
- 事件推送：后端可以主动推送报警信息或数据变化给前端。
实现细节:
- 配置Spring WebSocket，创建WebSocket端点。
- 在前端使用WebSocket客户端，连接后端的WebSocket服务，处理消息。

具体实现步骤

1. 环境搭建

创建后端项目: 使用 Spring Initializr 创建一个新的 Spring Boot 项目，选择所需的依赖（如 Spring Web、Spring Data JPA、SQL Server Driver）。
配置数据库连接: 在 application.properties 文件中配置 Microsoft SQL Server 的连接信息，包括 URL、用户名和密码。
实现 WebSocket: 使用 Spring WebSocket 模块，配置 WebSocket 端点，处理客户端的连接和消息。

好的，让我们详细阐述项目的数据库设计，包括每个表的结构、字段定义、数据类型以及表之间的关系。

2. 数据库设计

2.1. 数据库概述

本项目将使用 Microsoft SQL Server 作为数据库管理系统，设计多个表来存储不同类型的数据。以下是主要的数据表及其结构。

2.2. 数据表设计

2.2.1 数据记录表 (DataRecord)

目的: 存储用户输入的实时数据记录。

表结构:

CREATE TABLE DataRecord (
    RecordID INT PRIMARY KEY IDENTITY(1,1),  -- 记录ID，主键，自增
    Timestamp DATETIME NOT NULL,              -- 时间戳，记录数据的时间
    ProductID INT NOT NULL,                   -- 产品ID，外键，关联产品特性表
    FeatureValue DECIMAL(10, 2) NOT NULL,    -- 特性值，记录产品特性的数值
    AlarmTriggered BIT DEFAULT 0              -- 报警标记，0表示未触发，1表示已触发
);

2.2.2 产品特性表 (ProductFeature)

目的: 描述产品的特性和参数。

表结构:

CREATE TABLE ProductFeature (
    ProductID INT PRIMARY KEY,                 -- 产品ID，主键
    FeatureName VARCHAR(100) NOT NULL,        -- 特性名称
    FeatureDescription VARCHAR(255),           -- 特性描述
    SPCConstant DECIMAL(10, 2)                 -- SPC常数，关联SPC常数表
);

2.2.3 报警设置表 (AlarmSetting)

目的: 允许用户配置报警条件。

表结构:

CREATE TABLE AlarmSetting (
    AlarmID INT PRIMARY KEY IDENTITY(1,1),    -- 报警ID，主键，自增
    ProductID INT NOT NULL,                    -- 产品ID，外键，关联产品特性表
    ConditionType VARCHAR(50) NOT NULL,       -- 条件类型（如阈值、范围等）
    ThresholdValue DECIMAL(10, 2) NOT NULL,   -- 阈值
    Priority INT NOT NULL                       -- 报警优先级
);

2.2.4 SPC常数表 (SPCConstant)

目的: 存储与统计过程控制（SPC）相关的常数和参数。

表结构:

CREATE TABLE SPCConstant (
    ConstantID INT PRIMARY KEY IDENTITY(1,1),  -- 常数ID，主键，自增
    ConstantName VARCHAR(100) NOT NULL,         -- 常数名称
    ConstantValue DECIMAL(10, 2) NOT NULL       -- 常数值
);

2.3. 表之间的关系

数据记录表与产品特性表: DataRecord.ProductID 是 ProductFeature.ProductID 的外键，表示每条数据记录对应的产品特性。
报警设置表与产品特性表: AlarmSetting.ProductID 是 ProductFeature.ProductID 的外键，表示每个报警设置对应的产品特性。
产品特性表与SPC常数表: ProductFeature.SPCConstant 可以是 SPCConstant.ConstantID 的外键，表示产品特性可能关联的SPC常数。

2.4. 数据库索引

为了提高查询性能，可以在以下字段上创建索引：

在 DataRecord 表的 Timestamp 字段上创建索引，以加速时间范围查询。
在 ProductFeature 表的 ProductID 字段上创建索引，以加速与 DataRecord 和 AlarmSetting 的连接查询。

2.5. 数据完整性与约束

主键约束: 确保每个表的主键唯一。
外键约束: 确保数据之间的引用完整性，防止孤立记录。
非空约束: 确保关键字段（如时间戳、特性值等）不能为空。

3. 控制图识别与计算

3.1. 控制图概述

控制图是统计过程控制（SPC）中的一种工具，用于监控和分析过程的稳定性和变异性。通过控制图，用户可以识别出过程中的异常情况，从而采取相应的措施。

3.2. 控制图类型

常见的控制图类型包括：

均值图 (X-bar Chart): 用于监控样本均值的变化。
范围图 (R Chart): 用于监控样本范围的变化。
标准差图 (S Chart): 用于监控样本标准差的变化。
个体值图 (I Chart): 用于监控单个测量值。
计数图 (P Chart): 用于监控不合格品的比例。
缺陷图 (C Chart): 用于监控单位产品中的缺陷数量。
不合格图 (NP Chart): 用于监控不合格品的数量。
多变量图 (Multivariate Chart): 用于监控多个相关变量。

3.3. 控制图识别算法

控制图的识别可以通过以下步骤实现：

数据预处理: 对输入数据进行清洗和标准化，去除异常值。
样本分组: 根据设定的样本大小，将数据分组。
计算统计量:
- 对每个样本计算均值、范围、标准差等统计量。
选择控制图类型:
- 根据数据的特性（如样本大小、数据类型）选择合适的控制图类型。
- 例如，如果数据是连续型且样本量较大，则选择均值图和范围图。

3.4. 指标计算

在控制图中，常用的质量指标包括 CpK、PPK 和 PPM。

3.4.1 CpK (过程能力指数)

定义: CpK 衡量过程的能力，表示过程输出的变异性与规格限的关系。
计算公式:
$\min\left(\frac{USL - \mu}{3\sigma}, \frac{\mu - LSL}{3\sigma}\right)$
其中， $U S L$ 是上规格限， $L S L$ 是下规格限， $\mu$ 是过程均值， $\sigma$ 是过程标准差。

3.4.2 PPK (过程性能指数)

定义: PPK 衡量过程的实际性能，考虑了过程的偏移。
计算公式:
$\min\left(\frac{USL - \bar{X}}{3s}, \frac{\bar{X} - LSL}{3s}\right)$
其中， $\bar{X}$ 是样本均值， $s$ 是样本标准差。

3.4.3 PPM (百万分率)

定义: PPM 衡量不合格品的比例，通常用于质量控制。
计算公式:
$\frac{\text{不合格品数量}}{\text{总样本数量}} \times 10^6$

3.5. 实现细节

算法实现:
- 使用 Java 编写控制图识别和指标计算的算法。
- 将算法封装为服务，提供 API 接口供前端调用。
数据存储:
- 将计算结果（如 CpK、PPK、PPM）存储在数据库中，便于后续查询和分析。
用户界面:
- 在前端提供界面，允许用户选择控制图类型，输入数据并查看计算结果。
- 使用图表库（如 Chart.js 或 D3.js）展示控制图。

3.6. 报警系统集成

报警条件: 根据 CpK 和 PPK 的计算结果，设置报警条件。
报警触发: 当 CpK 或 PPK 低于设定阈值时，触发报警，并在用户界面上标记相关数据点。

4. 报警系统

4.1. 报警系统概述

报警系统的主要目的是实时监控数据，并在检测到异常情况时及时通知用户。通过设置报警条件，系统能够自动识别潜在的问题，帮助用户采取必要的措施以确保产品质量和过程稳定性。

4.2. 主要功能

报警条件设置: 允许用户定义报警条件，包括阈值、优先级等。
实时监控: 持续监控数据记录，自动检测是否满足报警条件。
报警触发: 当数据满足报警条件时，系统自动触发报警。
报警记录: 记录历史报警信息，便于后续分析和审计。
用户通知: 通过界面、邮件或其他方式通知用户。

4.3. 报警条件设置

条件类型: 用户可以设置不同类型的报警条件，例如：
- 阈值报警: 当某个特性值超过或低于设定的阈值时触发报警。
- 范围报警: 当特性值超出设定的范围时触发报警。
- 趋势报警: 当连续多次测量显示出异常趋势时触发报警。
优先级设置: 用户可以为每个报警条件设置优先级（如高、中、低），以便在多个报警同时触发时进行合理处理。

4.4. 实现细节

4.4.1 数据监控

实时数据流: 使用 WebSocket 实现实时数据传输，确保系统能够即时接收到最新的数据记录。
数据处理: 在后端实现数据监控逻辑，定期检查新数据是否满足报警条件。

4.4.2 报警逻辑

报警触发算法:
- 在接收到新数据时，检查每个报警条件。
- 如果数据满足某个报警条件，则标记该记录为“已触发报警”。
- 记录报警信息，包括报警时间、触发条件、相关数据等。

示例代码:

public void checkAlarms(DataRecord newRecord) {
    List<AlarmSetting> alarmSettings = alarmSettingRepository.findByProductId(newRecord.getProductID());
    for (AlarmSetting setting : alarmSettings) {
        if (isAlarmTriggered(newRecord, setting)) {
            triggerAlarm(newRecord, setting);
        }
    }
}

private boolean isAlarmTriggered(DataRecord record, AlarmSetting setting) {
    switch (setting.getConditionType()) {
        case "THRESHOLD":
            return record.getFeatureValue() > setting.getThresholdValue();
        case "RANGE":
            return record.getFeatureValue() < setting.getLowerLimit() || record.getFeatureValue() > setting.getUpperLimit();
        // 其他条件...
    }
    return false;
}

private void triggerAlarm(DataRecord record, AlarmSetting setting) {
    // 记录报警信息
    AlarmLog alarmLog = new AlarmLog(record.getRecordID(), setting.getAlarmID(), LocalDateTime.now());
    alarmLogRepository.save(alarmLog);
    // 通知用户
    notifyUser(alarmLog);
}

4.4.3 报警记录

报警日志表: 创建一个报警日志表，用于存储触发的报警信息。

CREATE TABLE AlarmLog (
    LogID INT PRIMARY KEY IDENTITY(1,1),      -- 日志ID，主键，自增
    RecordID INT NOT NULL,                     -- 关联的数据记录ID
    AlarmID INT NOT NULL,                      -- 关联的报警设置ID
    TriggeredTime DATETIME NOT NULL            -- 报警触发时间
);

4.4.4 用户通知

通知方式:
- 界面通知: 在用户界面上显示报警信息，使用弹窗或通知栏提示用户。
- 邮件通知: 通过邮件发送报警信息，确保用户能够及时收到通知。
- 移动应用通知: 如果有移动应用，可以通过推送通知的方式提醒用户。

4.5. 报警系统与其他模块的集成

与数据记录模块集成: 报警系统需要实时监控数据记录表中的新数据，确保及时检测异常。
与控制图模块集成: 控制图的计算结果（如CpK、PPK）可以作为报警条件的一部分，进一步增强报警的准确性。
与用户界面集成: 在用户界面中提供报警设置和报警记录的查看功能，方便用户管理和响应报警。

5. 定时任务

5.1. 定时任务概述

定时任务是指在预定的时间间隔内自动执行的任务。在本项目中，定时任务用于定期计算和更新数据库中的相关值，确保数据的实时性和准确性。这些任务可以包括数据汇总、报警条件检查、统计指标计算等。

5.2. 主要功能

定期计算: 定期执行计算任务，更新产品相关值（如CpK、PPK、PPM等）。
数据清理: 定期清理过期或无效的数据记录，保持数据库的整洁。
报警检查: 定期检查报警条件，确保系统能够及时响应异常情况。
报告生成: 定期生成统计报告，提供给用户进行分析。

5.3. 实现细节

5.3.1 使用Spring的定时任务功能

Spring提供了强大的定时任务功能，可以通过@Scheduled注解轻松实现定时任务。以下是实现步骤：

启用定时任务: 在Spring Boot的主类上添加@EnableScheduling注解，以启用定时任务功能。

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.scheduling.annotation.EnableScheduling;

@SpringBootApplication
@EnableScheduling
public class Application {
    public static void main(String[] args) {
        SpringApplication.run(Application.class, args);
    }
}

定义定时任务: 创建一个服务类，使用@Scheduled注解定义定时任务。

import org.springframework.scheduling.annotation.Scheduled;
import org.springframework.stereotype.Service;

@Service
public class ScheduledTasks {

    @Scheduled(fixedRate = 60000) // 每60秒执行一次
    public void calculateMetrics() {
        // 计算CpK、PPK、PPM等指标
        // 更新数据库中的相关值
    }

    @Scheduled(cron = "0 0 0 * * ?") // 每天午夜执行
    public void cleanUpOldRecords() {
        // 清理过期或无效的数据记录
    }
}

5.3.2 计算指标

计算逻辑: 在calculateMetrics方法中实现计算逻辑，获取最新的数据记录，计算相关指标，并更新数据库。

示例代码:

public void calculateMetrics() {
    List<DataRecord> records = dataRecordRepository.findRecentRecords();
    for (DataRecord record : records) {
        // 计算CpK、PPK等
        double cpK = calculateCpK(record);
        double ppK = calculatePPK(record);
        // 更新数据库
        updateMetricsInDatabase(record.getProductID(), cpK, ppK);
    }
}

5.3.3 数据清理

清理逻辑: 在cleanUpOldRecords方法中实现数据清理逻辑，删除过期或无效的数据记录。

示例代码:

public void cleanUpOldRecords() {
    LocalDateTime cutoffDate = LocalDateTime.now().minusMonths(6); // 6个月前的日期
    dataRecordRepository.deleteByTimestampBefore(cutoffDate);
}

5.4. 定时任务与其他模块的集成

与数据记录模块集成: 定时任务需要访问数据记录表，以获取最新的数据进行计算和清理。
与报警系统集成: 定时任务可以定期检查报警条件，确保系统能够及时响应异常情况。
与报告生成模块集成: 定时任务可以生成统计报告，并将其存储在数据库或发送给用户。

5.5. 监控与管理

任务监控: 可以使用Spring Boot Actuator监控定时任务的执行情况，确保任务按预期运行。
异常处理: 在定时任务中添加异常处理逻辑，确保任务失败时能够记录错误并进行适当的处理。

6. 前端开发

6.1. 前端架构

前端将使用现代JavaScript框架（如React或Vue）来构建用户界面。以下是前端架构的主要组成部分：

组件化: 将用户界面分解为多个可重用的组件。
状态管理: 使用状态管理库（如Redux或Vuex）来管理应用的状态。
路由管理: 使用路由库（如React Router或Vue Router）来实现页面导航。
API交互: 使用Axios或Fetch API与后端进行数据交互。

6.2. 主要功能模块

数据记录展示: 显示实时数据记录和报警信息。
报警设置: 允许用户配置报警条件。
控制图展示: 显示控制图和相关指标（CpK、PPK等）。
用户界面: 提供友好的用户交互体验。

6.3. 技术实现

6.3.1 创建项目

使用Create React App或Vue CLI创建项目。

React示例:

npx create-react-app quality-monitoring
cd quality-monitoring
npm install axios react-router-dom

Vue示例:

vue create quality-monitoring
cd quality-monitoring
npm install axios vue-router

6.3.2 组件设计

以下是一些主要组件的设计：

DataRecordList: 显示数据记录的列表。
AlarmSettings: 用户配置报警条件的界面。
ControlChart: 显示控制图和相关指标。

6.3.3 示例代码

3.3.1 DataRecordList 组件

// src/components/DataRecordList.js
import React, { useEffect, useState } from 'react';
import axios from 'axios';

const DataRecordList = () => {
    const [records, setRecords] = useState([]);

    useEffect(() => {
        const fetchData = async () => {
            const response = await axios.get('/api/data-records');
            setRecords(response.data);
        };
        fetchData();
    }, []);

    return (
        <div>
            <h2>数据记录</h2>
            <table>
                <thead>
                    <tr>
                        <th>时间戳</th>
                        <th>产品ID</th>
                        <th>特性值</th>
                        <th>报警状态</th>
                    </tr>
                </thead>
                <tbody>
                    {records.map(record => (
                        <tr key={record.recordID}>
                            <td>{new Date(record.timestamp).toLocaleString()}</td>
                            <td>{record.productID}</td>
                            <td>{record.featureValue}</td>
                            <td>{record.alarmTriggered ? '触发' : '未触发'}</td>
                        </tr>
                    ))}
                </tbody>
            </table>
        </div>
    );
};

export default DataRecordList;

3.3.2 AlarmSettings 组件

// src/components/AlarmSettings.js
import React, { useState, useEffect } from 'react';
import axios from 'axios';

const AlarmSettings = () => {
    const [settings, setSettings] = useState([]);
    const [newSetting, setNewSetting] = useState({ productID: '', conditionType: '', thresholdValue: '' });

    useEffect(() => {
        const fetchSettings = async () => {
            const response = await axios.get('/api/alarm-settings');
            setSettings(response.data);
        };
        fetchSettings();
    }, []);

    const handleSubmit = async (e) => {
        e.preventDefault();
        await axios.post('/api/alarm-settings', newSetting);
        setNewSetting({ productID: '', conditionType: '', thresholdValue: '' });
        // Refresh settings
        const response = await axios.get('/api/alarm-settings');
        setSettings(response.data);
    };

    return (
        <div>
            <h2>报警设置</h2>
            <form onSubmit={handleSubmit}>
                <input type="text" placeholder="产品ID" value={newSetting.productID} onChange={e => setNewSetting({ ...newSetting, productID: e.target.value })} required />
                <input type="text" placeholder="条件类型" value={newSetting.conditionType} onChange={e => setNewSetting({ ...newSetting, conditionType: e.target.value })} required />
                <input type="number" placeholder="阈值" value={newSetting.thresholdValue} onChange={e => setNewSetting({ ...newSetting, thresholdValue: e.target.value })} required />
                <button type="submit">添加报警条件</button>
            </form>
            <ul>
                {settings.map(setting => (
                    <li key={setting.alarmID}>{setting.productID} - {setting.conditionType} - {setting.thresholdValue}</li>
                ))}
            </ul>
        </div>
    );
};

export default AlarmSettings;

3.3.3 ControlChart 组件

// src/components/ControlChart.js
import React from 'react';
import { Line } from 'react-chartjs-2';

const ControlChart = ({ data }) => {
    const chartData = {
        labels: data.map(record => new Date(record.timestamp).toLocaleString()),
        datasets: [
            {
                label: '特性值',
                data: data.map(record => record.featureValue),
                borderColor: 'rgba(75,192,192,1)',
                fill: false,
            },
        ],
    };

    return (
        <div>
            <h2>控制图</h2>
            <Line data={chartData} />
        </div>
    );
};

export default ControlChart;

6.4. 路由管理

使用React Router或Vue Router实现页面导航。

React Router 示例:

// src/App.js
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import DataRecordList from './components/DataRecordList';
import AlarmSettings from './components/AlarmSettings';
import ControlChart from './components/ControlChart';

const App = () => {
    return (
        <Router>
            <Switch>
                <Route path="/" exact component={DataRecordList} />
                <Route path="/alarm-settings" component={AlarmSettings} />
                <Route path="/control-chart" component={ControlChart} />
            </Switch>
        </Router>
    );
};

export default App;

6.5. API交互

使用Axios与后端进行数据交互，确保能够获取和提交数据。

7. 参数传递

7.1. 参数传递概述

参数传递是指在不同组件、函数或模块之间传递数据的过程。在前端开发中，参数传递可以通过URL、状态管理、组件属性等多种方式实现。有效的参数传递可以提高应用的灵活性和可维护性。

7.2. 参数传递的方式

7.2.1 URL 参数传递

URL参数传递是通过在URL中附加查询字符串来传递参数。这种方式常用于在页面之间传递信息。

示例:
- URL: http://example.com/product?id=123&type=widget
- 在这个例子中，id和type是传递的参数。

实现:
在React中，可以使用react-router-dom库来获取URL参数。

示例代码:

import React from 'react';
import { useParams } from 'react-router-dom';

const ProductDetail = () => {
    const { id, type } = useParams();
    return (
        <div>
            <h2>产品ID: {id}</h2>
            <h3>产品类型: {type}</h3>
        </div>
    );
};

7.2.2 状态管理

状态管理库（如Redux或Vuex）可以在应用的不同部分之间共享状态。通过状态管理，可以在组件之间传递参数而无需通过URL。

实现:
在Redux中，可以通过dispatch和useSelector来管理和获取状态。

示例代码:

// actions.js
export const setProduct = (product) => ({
    type: 'SET_PRODUCT',
    payload: product,
});

// reducer.js
const initialState = { product: null };
const productReducer = (state = initialState, action) => {
    switch (action.type) {
        case 'SET_PRODUCT':
            return { ...state, product: action.payload };
        default:
            return state;
    }
};

// Component
import { useDispatch, useSelector } from 'react-redux';

const ProductComponent = () => {
    const dispatch = useDispatch();
    const product = useSelector(state => state.product);

    const handleSetProduct = () => {
        dispatch(setProduct({ id: 123, type: 'widget' }));
    };

    return (
        <div>
            <button onClick={handleSetProduct}>设置产品</button>
            {product && <h2>产品ID: {product.id}</h2>}
        </div>
    );
};

7.2.3 组件属性传递

在React或Vue中，可以通过组件的props（属性）来传递参数。这种方式适用于父子组件之间的数据传递。

实现:
在父组件中将数据作为属性传递给子组件。

示例代码:

// ParentComponent.js
import React from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
    const product = { id: 123, type: 'widget' };
    return <ChildComponent product={product} />;
};

// ChildComponent.js
const ChildComponent = ({ product }) => {
    return (
        <div>
            <h2>产品ID: {product.id}</h2>
            <h3>产品类型: {product.type}</h3>
        </div>
    );
};

7.3. 参数传递在项目中的应用

7.3.1 数据记录展示

在数据记录展示模块中，可以通过URL参数传递产品ID，以便在展示特定产品的记录时使用。

7.3.2 报警设置

在报警设置模块中，可以通过状态管理传递当前选择的产品信息，以便用户能够方便地设置报警条件。

7.3.3 控制图展示

在控制图展示模块中，可以通过组件属性传递数据记录，以便在图表中显示相关数据。

8. 测试与验收

8.1. 测试的目的

测试的主要目的是确保软件系统的质量，验证系统是否符合需求，发现并修复潜在的缺陷。通过全面的测试，可以提高用户满意度，降低后期维护成本。

8.2. 测试的类型

测试可以分为多个类型，每种类型关注不同的方面：

单元测试: 测试单个组件或模块的功能，确保其按预期工作。
集成测试: 测试不同模块之间的交互，确保它们能够协同工作。
系统测试: 在完整的系统环境中测试整个应用，验证其功能和性能。
验收测试: 确保系统满足用户需求，通常由最终用户进行。
回归测试: 在修改代码后，确保新代码没有引入新的缺陷。

8.3. 测试方法

手动测试: 测试人员手动执行测试用例，检查系统的功能和性能。
自动化测试: 使用测试框架（如JUnit、Selenium、Cypress等）编写自动化测试脚本，快速执行测试。

8.3.1 单元测试示例

使用JUnit进行Java后端的单元测试：

import static org.junit.jupiter.api.Assertions.*;
import org.junit.jupiter.api.Test;

public class ProductServiceTest {

    @Test
    public void testCalculateCpK() {
        double result = ProductService.calculateCpK(10, 5, 1.5);
        assertEquals(1.67, result, 0.01);
    }
}

8.3.2 集成测试示例

使用Spring Boot的集成测试：

import static org.springframework.test.web.servlet.request.MockMvcRequestBuilders.*;
import static org.springframework.test.web.servlet.result.MockMvcResultMatchers.*;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.test.autoconfigure.web.servlet.AutoConfigureMockMvc;
import org.springframework.boot.test.context.SpringBootTest;
import org.junit.jupiter.api.Test;

@SpringBootTest
@AutoConfigureMockMvc
public class DataRecordControllerTest {

    @Autowired
    private MockMvc mockMvc;

    @Test
    public void testGetDataRecords() throws Exception {
        mockMvc.perform(get("/api/data-records"))
               .andExpect(status().isOk())
               .andExpect(jsonPath("$[0].productID").value(123));
    }
}

8.3.3 前端测试示例

使用Jest和React Testing Library进行前端组件测试：

import { render, screen } from '@testing-library/react';
import DataRecordList from './DataRecordList';

test('renders data records', () => {
    render(<DataRecordList />);
    const linkElement = screen.getByText(/数据记录/i);
    expect(linkElement).toBeInTheDocument();
});