# webspc-frontend

**Repository Path**: iittxgt/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**: 0
- **Forks**: 2
- **Created**: 2025-12-10
- **Last Updated**: 2025-12-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# WebSPC/webspc-frontend

# 项目介绍

## SPC广泛应用于生产质量管理，监控及管理生产过程的波动，提前对异常情况产生预警。

## WebSPC是SPC(统计过程控制)的web实现，采用前后端分离的方式，免费开源。

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

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

   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

备注：技术支持包括但不限于
    定制业务开发
    项目部署
    程序使用讲解，代码讲解，SPC理论培训。