# 扫地机生产数据可视化监控看板

**Repository Path**: gf0729/Workshop-Intelligence-Data-Center-

## Basic Information

- **Project Name**: 扫地机生产数据可视化监控看板
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-12-31
- **Last Updated**: 2025-12-31

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 扫地机生产数据可视化监控看板
![alt text](image.png)

## 技术栈

本人主要使用Vue框架进行开发，大屏项目通常界面相对固定且交互逻辑不复杂，Vue清晰的模板和单文件组件结构让代码更易编写和维护，能加速开发。

- Vue3 + TypeScript
- ECharts 5 (图表)


## 可视化模块设计

### 1. 核心生产指标 (KPIDashboard)

**设计思路**：采用 2x2 卡片网格 + 趋势折线图的组合布局。

- 顶部四个指标卡片：今日计划、已完成、达成率、平均作业时间
- 底部折线图：展示近 7 日达成率趋势，支持多日对比分析
- 达成率使用渐变面积图增强视觉效果

**数据刷新**：每 3 秒更新，今日数据实时变化，历史数据保持稳定。

### 2. 生产线运行状态 (ProductionLineStatus)

**设计思路**：安灯系统可视化，2 列网格展示多条产线状态。

- 每条产线卡片包含：线号、当前型号、运行状态、目标/完成数量、良率
- 状态指示：运行(绿色脉冲)、空闲(黄色)、故障(红色)
- 进度条展示当前完成进度

**交互**：悬停高亮，状态变化时平滑过渡动画。

### 3. 质量缺陷分析 (QualityAnalysis)

**设计思路**：环形饼图展示缺陷类型分布。

- 采用 ECharts 环形图，中心镂空增强层次感
- 图例右侧垂直排列，便于大屏阅读
- 显示今日检测总数作为上下文信息

**自适应**：图表自动响应容器尺寸变化。

### 4. 实时生产事件 (EventStream)

**设计思路**：时间线式事件流，固定高度内滚动。

- 事件类型标签：警报(红)、缺料(黄)、系统(蓝)
- 新事件从顶部插入，带淡入动画
- 顶部/底部渐变遮罩提示可滚动

**容量控制**：最多保留 50 条事件，防止内存溢出。

## 后端 API

### 接口概览

| 接口 | 方法 | 说明 |
|------|------|------|
| `/api/prodtion/dashboard` | GET | 获取 KPI 指标数据 |
| `/api/prodtion/history` | GET | 获取历史达成率 |
| `/api/production/line-status` | GET | 获取产线状态列表 |
| `/api/production/defects` | GET | 获取质量分析数据 |
| `/api/production/realtime` | WebSocket | 实时事件推送 |

### 数据结构示例

```typescript
// GET /api/prodtion/dashboard
{
  "todayTarget": 1200,
  "completed": 856,
  "rate": 71.3,
  "avgCycleTime": "128s",
  "avgCycleTimeTrend": "down"
}

// GET /api/prodtion/history?days=7
{
  "dailyRates": [
    { "date": "12/24", "rate": 82.5 },
    { "date": "12/25", "rate": 78.2 },
    // ...
  ]
}

// GET /api/production/line-status
{
  "lines": [
    {
      "lineId": "LINE-A",
      "state": "运行",
      "currentModel": "RoboClean X1",
      "targetQty": 400,
      "completedQty": 325,
      "firstYieldRate": 98.5
    }
  ]
}

// GET /api/production/defects
{
  "totalChecked": 950,
  "defects": [
    { "name": "激光雷达异常", "count": 15 },
    { "name": "边刷异响", "count": 8 },
    { "name":"基站漏水", "count":3 }
  ]
}

// WebSocket /api/production/realtime
{
  "id": "evt_abc123",
  "time": "14:32:05",
  "type": "ALARM",
  "lineId": "LINE-B",
  "content": "紧急停机：急停按钮被触发"
}
```