# webspc-frontend

**Repository Path**: valleyfo/webspc-frontend

## Basic Information

- **Project Name**: webspc-frontend
- **Description**: webspc项目是SPC(统计过程控制)的web实现，采用前后端分离的方式，此为该项目的前端部分。
- **Primary Language**: TypeScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 3
- **Forks**: 3
- **Created**: 2025-02-10
- **Last Updated**: 2026-01-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# WebSPC/webspc-frontend

# 项目介绍

## WebSPC把传统SPC从“事后看图”升级成“7×24 的 AI 质量副驾驶”——会自己采数、自己判异、自己找根因，还能把结论 @ 你。

## 特色功能：

1. 集成了LLM对话引擎及MCP工具链,不但可以让LLM对SPC数据进行分析，还可以调用MCP工具链执行特定任务。

2. 支持动态添加周期性任务，对第三方数据库进行实时数据采集。

3. LLM实时流式监控，异常一出现，立即执行根因分析，并将处理建议自动推到飞书群，@相关责任人，大大提高异常响应时间。

# 开源地址：
   
1. 前端业务代码地址：https://gitee.com/valleyfo/webspc-frontend

2. 常规后端业务代码地址：https://gitee.com/valleyfo/webspc-backend

3. AI后端业务代码地址:https://gitee.com/valleyfo/webspc-ai
   

# 项目架构

## 前端：

- 框架：Vue3 + Vite + Pinia

- UI: Element-Plus

- 绘图库：Plotly.js

- 语言: TypeScript

# 1.使用方法视频：

- [1.1 WebSPC使用方法介绍](https://www.bilibili.com/video/BV1h1XRYLEUt/?spm_id_from=333.1387.collection.video_card.click&vd_source=690fc386f07d30bd01bc5ca11d98ecf3)

- [1.2 WebSPC使用方法补充-数据自动采集](https://www.bilibili.com/video/BV1ANQbY9EpH?spm_id_from=333.788.recommend_more_video.1&vd_source=690fc386f07d30bd01bc5ca11d98ecf3)

# 2.开发环境配置：

## 2.1 克隆项目
git clone https://gitee.com/valleyfo/webspc-frontend.git

## 2.2 安装依赖
npm install

## 2.3 运行项目
npm run dev

2.4 ctr+click本地链接启动浏览器跳转到登录页面。

# 3.生产环境部署：

- [3.1 WebSPC项目部署_01](https://www.bilibili.com/video/BV11RQAYWE82/?spm_id_from=333.1387.collection.video_card.click&vd_source=690fc386f07d30bd01bc5ca11d98ecf3)

- [3.2 WebSPC项目部署_02](https://www.bilibili.com/video/BV1EmQwYgEJt/?spm_id_from=333.1387.collection.video_card.click&vd_source=690fc386f07d30bd01bc5ca11d98ecf3)

## 备注：

1. 打包前端项目的方法：

1.1 执行命令：set MODE=production

1.2 执行命令：npm run build

## 3.3 预览：

- <img src="src/assets/images/preview_1.png" width="500" alt="项目预览">

- <img src="src/assets/images/preview_2.png" width="500" alt="项目预览">

# 特别鸣谢：

这个小程序的前端部分是在学习完前端大佬Allen,Jason老师的教程之后，才顺利开发出来。

因此此程序中部分代码片段源自该教程。

Allen，Jason老师的前端教程地址是：https://space.bilibili.com/1643315584

特别鸣谢Allen,Jason老师及其团队的无私分享！

# 4.项目演示地址：https://webspc.top

- 用户名：admin

- 登录密码：联系作者获取

- 如果项目对你有所帮助，请作者喝杯咖啡吧！

## 微信扫一扫支付

- <img src="src/assets/images/donate.png" width="200" alt="微信打赏码">

# 5.技术服务：

- 作者：valleyfo

- Email: wynmamtf@163.com

- QQ: 271989251

- Weixin: valleyfo

备注：技术服务包括但不限于
定制业务开发
项目部署
应用讲解等。