# 可视化大屏项目

**Repository Path**: www_22223/visual-large-screen-project

## Basic Information

- **Project Name**: 可视化大屏项目
- **Description**: 基于 React + Vite 构建的工业设备巡检可视化大屏系统，支持离线地图、实时监控、数据可视化等功能。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2026-04-22
- **Last Updated**: 2026-05-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 设备巡检可视化大屏系统

基于 React + Vite 构建的工业设备巡检可视化大屏系统，支持离线地图、实时监控、数据可视化等功能。

## 项目预览

![可视化大屏](./preview.png)

## 功能特性

### 总览驾驶舱
- 设备总数、状态统计、巡检到位率等关键指标展示
- 设备分布地图（支持离线地图）
- 设备状态颜色标识
- 地图全屏显示功能
- 鼠标悬停显示设备详情

### 设备健康中心
- 设备列表展示（支持类型/状态筛选）
- 健康度分布饼图
- 实时告警列表
- 校准周期预警
- 设备详情查看

### 绩效分析中心
- 人员绩效排行榜
- 设备故障率分析（按类型）
- 到位率趋势图
- 报表导出功能
- 导出历史记录

## 技术栈

| 技术 | 说明 |
|-----|------|
| React 19 | 前端框架 |
| Vite 6 | 构建工具 |
| Zustand | 状态管理 |
| ECharts 5 | 图表库 |
| Leaflet | 地图组件 |
| SCSS | 样式预处理 |
| sql.js | 离线地图数据读取 |

## 目录结构

```
keshihuateat-react/
├── public/
│   ├── map-tiles/           # 离线地图瓦片目录
│   ├── cangzhouzhongtie.mbtiles  # 离线地图数据文件
│   └── ...
├── src/
│   ├── assets/              # 静态资源
│   ├── components/          # 公共组件
│   ├── data/
│   │   └── mockData.js      # 模拟数据 & 设备配置
│   ├── stores/
│   │   └── useDashboardStore.js  # Zustand 状态管理
│   ├── styles/
│   │   ├── variables.scss   # SCSS 变量
│   │   └── global.scss      # 全局样式
│   ├── views/
│   │   ├── OverviewPage.jsx     # 总览驾驶舱
│   │   ├── HealthPage.jsx       # 设备健康中心
│   │   └── PerformancePage.jsx  # 绩效分析中心
│   ├── App.jsx
│   └── main.jsx
├── 数据对接方案.md            # API 接口设计文档
├── package.json
├── vite.config.js
└── README.md
```

## 快速开始

### 环境要求

- Node.js >= 18.0.0
- npm >= 9.0.0

### 安装依赖

```bash
npm install
```

### 启动开发服务器

```bash
npm run dev
```

启动后会自动打开浏览器，显示 IP 地址和本地访问地址：
- Local: http://localhost:5174/
- Network: http://192.168.x.x:5174/

### 构建生产版本

```bash
npm run build
```

### 预览生产版本

```bash
npm run preview
```

## 配置说明

### 设备配置

在 `src/data/mockData.js` 中配置设备信息：

```javascript
export const equipmentConfig = [
  // 汽车衡
  { type: 'truckScale', name: '1号门-1#汽车衡', lat: 38.290841, lng: 117.791513 },
  { type: 'truckScale', name: '1号门-2#汽车衡', lat: 38.290836, lng: 117.791606 },
  // 添加更多设备...
]
```

**设备类型说明：**
| 类型 | 名称 |
|-----|------|
| truckScale | 汽车衡 |
| beltScale | 皮带秤 |
| railScale | 轨道衡 |
| offlineScale | 下线秤 |
| reweightScale | 复磅秤 |
| slabScale | 板坯秤 |

### 离线地图配置

1. 使用 MOBAC 下载 MBTiles 格式的离线地图
2. 将 `.mbtiles` 文件放入 `public/` 目录
3. 修改 `src/views/OverviewPage.jsx` 中的配置：

```javascript
// 修改地图边界（根据下载的区域）
const bounds = L.latLngBounds(
  [38.280, 117.745],  // 西南角 [纬度, 经度]
  [38.325, 117.872]   // 东北角 [纬度, 经度]
)

// 修改文件名
const response = await fetch('/你的文件名.mbtiles')
```

## 数据对接

项目当前使用模拟数据，对接真实数据请参考 [数据对接方案.md](./数据对接方案.md)

文档包含：
- REST API 接口设计（15个接口）
- WebSocket 实时推送事件
- 数据库表设计
- 枚举值定义

### 数据对接步骤

1. 创建 API 服务层 `src/services/api.js`
2. 修改 `src/stores/useDashboardStore.js` 中的数据获取逻辑
3. 配置 API 基础地址

```javascript
// 示例：获取设备列表
const fetchEquipmentList = async () => {
  const response = await fetch('/api/equipment/list')
  const data = await response.json()
  return data.list
}
```

## 主要功能说明

### 地图功能

- **离线支持**：使用 MBTiles 格式，无需网络即可显示地图
- **边界限制**：限制地图显示范围，防止出现空白区域
- **设备标记**：在地图上显示设备位置
- **悬停弹窗**：鼠标悬停显示设备详情
- **全屏模式**：支持全屏查看地图

### 图表功能

- **饼图**：设备健康度分布
- **柱状图**：故障率分析
- **折线图**：到位率趋势
- **仪表盘**：设备健康度展示

### 状态管理

使用 Zustand 进行状态管理，主要状态包括：

```javascript
// 核心数据状态
equipmentList: [],       // 设备列表
inspectionRecords: [],   // 巡检记录
faultRecords: [],        // 故障记录
alerts: [],              // 告警列表

// UI 状态
currentPage: 'overview', // 当前页面
selectedEquipment: null, // 选中的设备
loading: false           // 加载状态
```

## 浏览器支持

| 浏览器 | 支持版本 |
|-------|---------|
| Chrome | 最新版 |
| Firefox | 最新版 |
| Safari | 最新版 |
| Edge | 最新版 |

## 更新日志

### v1.0.0 (2024-03-12)
- 完成总览驾驶舱、设备健康中心、绩效分析中心三大页面
- 集成离线地图功能
- 完成数据对接方案设计

## 许可证

MIT License

## 联系方式

如有问题，请联系项目维护人员。