Monitoring-Platform 项目文档

📋 项目概述

项目名称: 可视化智能巡检系统 (Monitoring Platform)
项目类型: Web前端应用
开发框架: React 17 + Arco Design
构建工具: React App Rewired
版本: v1.0.0
平台标识: zn

项目简介

可视化智能巡检系统是一个基于React和Arco Design Pro构建的现代化监控平台。系统集成了实时视频监控、地图可视化、数据分析、设备管理等功能，为智能巡检提供全方位的解决方案。项目采用Arco Design Pro作为基础框架，结合Cesium 3D地球、ECharts数据可视化、WebRTC实时通信等技术，打造了一个功能强大、界面美观的监控管理平台。

🎯 核心功能

1. 实时视频监控

WebRTC实时流 - 低延迟视频传输
多路视频播放 - 同时监控多个设备
视频录制 - 本地和云端录制
视频回放 - 历史视频查看
LiveKit集成 - 专业级实时通信

2. 地图可视化

3D地球展示 - 基于Cesium和Globe.gl
2D地图 - 高德地图集成
设备定位 - 实时设备位置显示
轨迹回放 - 历史轨迹查看
地理围栏 - 区域监控和告警
天地图支持 - 多种地图底图切换

3. 数据可视化

ECharts图表 - 丰富的图表类型
实时数据展示 - 动态数据更新
数据统计分析 - 多维度数据分析
自定义仪表盘 - 可配置的数据面板
DataView组件 - 大屏数据展示

4. 设备管理

设备列表 - 设备信息管理
设备状态监控 - 实时状态显示
设备控制 - 远程设备操作
设备分组 - 设备分类管理

5. MQTT通信

实时消息 - MQTT协议通信
设备指令 - 远程指令下发
状态同步 - 设备状态实时同步
消息队列 - 可靠消息传输

6. 音频处理

AMR录音 - 音频录制和播放
音频编解码 - 多种音频格式支持
实时对讲 - 双向音频通信

7. 数据导出

Excel导出 - 数据表格导出
报表生成 - 自动化报表
数据备份 - 数据导出备份

🏗️ 技术架构

核心技术栈

前端框架

React 17.0.2 - 用户界面库
TypeScript 4.5.2 - 类型安全的JavaScript
React Redux 7.2.6 - 状态管理
React Router 5.2.0 - 路由管理

UI组件库

Arco Design 2.32.2 - 字节跳动企业级UI组件库
@arco-themes/react-arco-pro - Arco Pro主题
@arco-design/color - 颜色系统
Arwes React - 科幻风格UI组件

地图和3D可视化

Cesium 1.107.0 - 3D地球和地图引擎
Resium 1.16.1 - Cesium的React封装
Globe.gl 2.26.2 - 3D地球可视化
React Globe.gl 2.22.1 - Globe.gl的React版本
React AMap 1.2.8 - 高德地图React组件
Turf.js 6.5.0 - 地理空间分析
Gcoord 1.0.5 - 坐标转换

数据可视化

ECharts 5.4.3 - 数据图表库
BizCharts 4.1.11 - 阿里数据可视化
@jiaminghi/data-view-react - 大屏数据展示

实时通信

LiveKit Client 1.3.2 - WebRTC客户端
@livekit/react-components - LiveKit React组件
@besovideo/webrtc-player - WebRTC播放器
MQTT 5.9.1 - MQTT协议客户端

工具库

Axios 0.24.0 - HTTP客户端
Lodash 4.17.21 - JavaScript工具库
Day.js - 日期处理
Classnames 2.3.1 - CSS类名管理
Copy-to-clipboard 3.3.1 - 剪贴板操作
NProgress 0.2.0 - 进度条
Query-string 6.13.8 - URL查询字符串解析

数据处理

ExcelJS 4.4.0 - Excel文件处理
XLSX 0.18.5 - Excel读写
MockJS 1.1.0 - Mock数据生成

其他功能库

Fabric 5.3.0 - Canvas图形库
React Color 2.18.1 - 颜色选择器
Benz AMR Recorder 1.1.5 - AMR音频录制
Sonner 1.5.0 - Toast通知
Motion 10.16.2 - 动画库
JSONP 0.2.1 - JSONP请求

📁 项目结构

monitoring-platform/
├── build/                       # 构建输出目录
├── public/                      # 静态资源
│   ├── cesium/                 # Cesium资源文件
│   └── index.html              # HTML模板
├── src/                         # 源代码
│   ├── api/                    # API接口
│   ├── assets/                 # 资源文件
│   ├── components/             # 公共组件
│   ├── locale/                 # 国际化文件
│   ├── mock/                   # Mock数据
│   ├── model/                  # 数据模型
│   ├── pages/                  # 页面组件
│   ├── redux/                  # Redux状态管理
│   ├── style/                  # 样式文件
│   ├── utils/                  # 工具函数
│   ├── context.tsx             # React Context
│   ├── index.tsx               # 入口文件
│   ├── layout.tsx              # 布局组件
│   ├── routes.ts               # 路由配置
│   ├── settings.json           # 配置文件
│   └── setupProxy.js           # 代理配置
├── .env.development            # 开发环境变量
├── .env.production             # 生产环境变量
├── .eslintrc                   # ESLint配置
├── .prettierrc                 # Prettier配置
├── .stylelintrc                # Stylelint配置
├── config-overrides.js         # Webpack配置覆盖
├── nginx.conf                  # Nginx配置
├── package.json                # 项目依赖
├── tsconfig.json               # TypeScript配置
├── web_server.Dockerfile       # Docker配置
└── README.md                   # 项目说明

🔧 开发环境配置

必需工具

Node.js: 建议使用v14或v16
包管理器: npm (推荐使用--legacy-peer-deps)

环境变量配置

开发环境 (.env.development)

# 应用标题
REACT_APP_TITLE = 可视化智能巡检系统

# 平台标识
REACT_APP_PLATFORM = zn

# 高德地图Token
REACT_APP_AMAP_TOKEN = fe91955804fdc14a802b240e025c8e2c

# WebRTC服务地址
REACT_APP_WEBRTC_URL = wss://webrtc.znhaas.net

# 地图初始中心点 (深圳)
REACT_APP_INIT_MAP_CENTER = {"latitude": "22.609875", "longitude": "114.0295" }

# Google地图瓦片URL
REACT_APP_MAP_TILE_URL = https://mt{0,1,2,3}.google.com/vt/lyrs=m@207000000&hl=en-US&gl=US&src=app&x=[x]&y=[y]&z=[z]&s=Galile

# 天地图影像WMTS服务
REACT_APP_MAP_TIANDI_IMG_WMTS_URL = http://t0.tianditu.gov.cn/vec_w/wmts

# 天地图注记WMTS服务
REACT_APP_MAP_TIANDI_CVA_WMTS_URL = http://t0.tianditu.gov.cn/cva_w/wmts

# 天地图密钥
REACT_APP_MAP_TIANDI_WMTS_KEY = 7d631d4eac7ac8a9056d47782cb96100

生产环境 (.env.production)

# 不生成Source Map
GENERATE_SOURCEMAP = false

# 其他配置与开发环境相同
REACT_APP_TITLE = 可视化智能巡检系统
REACT_APP_PLATFORM = zn
# ... (其他配置同上)

🚀 快速开始

1. 安装依赖

# 使用npm安装 (推荐使用legacy-peer-deps)
npm install --legacy-peer-deps

2. 启动开发服务器

# 开发模式
npm run dev

# 或使用start命令
npm start

开发服务器将在 http://localhost:3000 启动

3. 构建生产版本

# 生产环境构建
npm run build

# 带分析器的构建
npm run build:analyzer

4. 代码检查和格式化

# ESLint检查
npm run eslint

# Stylelint检查
npm run stylelint

# 提交前检查
npm run pre-commit

🎨 主题配置

系统设置 (settings.json)

{
  "colorWeek": false,      // 色弱模式
  "navbar": true,          // 显示导航栏
  "menu": true,            // 显示菜单
  "footer": false,         // 显示页脚
  "themeColor": "#165DFF", // 主题颜色 (Arco Blue)
  "menuWidth": "14rem"     // 菜单宽度
}

Arco Design主题

项目使用Arco Design Pro主题，支持自定义主题颜色：

// config-overrides.js
new ArcoWebpackPlugin({
  theme: '@arco-themes/react-arco-pro',
  modifyVars: {
    'arcoblue-6': setting.themeColor,
  },
})

🗺️ 地图配置

Cesium配置

项目集成了Cesium 3D地球引擎：

// Webpack配置
new webpack.DefinePlugin({
  CESIUM_BASE_URL: JSON.stringify("./cesium")
})

// 复制Cesium资源
new CopyPlugin({
  patterns: [
    { from: "node_modules/cesium/Build/Cesium/Workers", to: "cesium/Workers" },
    { from: "node_modules/cesium/Build/Cesium/ThirdParty", to: "cesium/ThirdParty" },
    { from: "node_modules/cesium/Build/Cesium/Assets", to: "cesium/Assets" },
    { from: "node_modules/cesium/Build/Cesium/Widgets", to: "cesium/Widgets" },
  ],
})

地图服务配置

支持多种地图服务：

Google Maps - 全球地图服务
天地图 - 国家地理信息公共服务平台
高德地图 - 国内地图服务

📡 WebRTC配置

LiveKit集成

// WebRTC服务地址
const WEBRTC_URL = process.env.REACT_APP_WEBRTC_URL

// LiveKit客户端配置
import { Room } from 'livekit-client'

const room = new Room({
  adaptiveStream: true,
  dynacast: true,
})

WebRTC播放器

import { WebRTCPlayer } from '@besovideo/webrtc-player'

// 播放器配置
const player = new WebRTCPlayer({
  container: element,
  url: streamUrl,
  autoplay: true,
})

🔌 MQTT配置

MQTT客户端

import mqtt from 'mqtt'

// MQTT连接配置
const client = mqtt.connect('wss://mqtt.example.com', {
  clientId: 'monitoring-platform',
  username: 'user',
  password: 'pass',
  clean: true,
  reconnectPeriod: 1000,
})

// 订阅主题
client.subscribe('device/+/status')

// 发布消息
client.publish('device/control', JSON.stringify(command))

🏗️ Webpack配置

自定义配置 (config-overrides.js)

项目使用react-app-rewired和customize-cra进行Webpack配置覆盖：

module.exports = {
  webpack: override(
    // Less加载器
    addLessLoader({
      lessLoaderOptions: {
        lessOptions: {},
      },
    }),
    
    // 装饰器支持
    addDecoratorsLegacy(),
    
    // PostCSS配置 (px转rem)
    rewirePostcss(config, {
      plugins: () => [
        require("postcss-pxtorem")({
          rootValue: 16,
          unitPrecision: 5,
          propList: ["*"],
          minPixelValue: 0,
          exclude: /node_modules/i
        }),
      ],
    }),
    
    // SVG加载器
    addWebpackModuleRule({
      test: /\.svg$/,
      loader: '@svgr/webpack'
    }),
    
    // Cesium配置
    addWebpackPlugin(
      new webpack.DefinePlugin({
        CESIUM_BASE_URL: JSON.stringify("./cesium")
      })
    ),
    
    // Arco Design插件
    addWebpackPlugin(
      new ArcoWebpackPlugin({
        theme: '@arco-themes/react-arco-pro',
        modifyVars: {
          'arcoblue-6': setting.themeColor,
        },
      })
    ),
    
    // 生产环境代码压缩
    process.env.NODE_ENV === 'production' && addWebpackPlugin(
      new UglifyJsPlugin({
        cache: true,
        parallel: true,
        uglifyOptions: {
          warnings: false,
          compress: {
            drop_console: true,
            drop_debugger: true
          }
        }
      })
    ),
    
    // 打包分析
    process.env.ANALYZER && addWebpackPlugin(new BundleAnalyzerPlugin())
  ),
}

🐳 Docker部署

Dockerfile配置

# web_server.Dockerfile
FROM nginx:alpine

# 复制构建产物
COPY build/ /usr/share/nginx/html/

# 复制Nginx配置
COPY nginx.conf /etc/nginx/nginx.conf

EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]

构建和运行

# 构建Docker镜像
docker build -f web_server.Dockerfile -t monitoring-platform:latest .

# 运行容器
docker run -d -p 80:80 monitoring-platform:latest

构建脚本

# 生产环境构建镜像
./build-image-prod.sh

# M1芯片构建镜像
./build-image-m1.sh

# 保存镜像
./save-image.sh

🔐 安全配置

环境变量安全

敏感信息使用环境变量
不要将密钥提交到版本控制
生产环境使用独立配置

代码安全

生产环境移除console
启用代码混淆和压缩
关闭Source Map生成

网络安全

使用HTTPS协议
配置CORS策略
实施CSP策略

📊 性能优化

构建优化

代码分割 - 路由级别代码分割
Tree Shaking - 移除未使用代码
压缩 - UglifyJS代码压缩
缓存 - 构建缓存加速
并行构建 - 多线程构建

运行时优化

懒加载 - 组件和路由懒加载
虚拟列表 - 大列表优化
防抖节流 - 高频事件优化
Memo优化 - React.memo和useMemo
图片优化 - 图片懒加载和压缩

Cesium优化

LOD控制 - 细节层次管理
瓦片缓存 - 地图瓦片缓存
实体聚合 - 大量实体聚合显示
视锥剔除 - 视野外对象剔除

🧪 测试

测试命令

# 运行测试
npm test

# 测试覆盖率
npm run test:coverage

测试框架

Jest - 测试框架
React Testing Library - React组件测试

📚 相关文档

官方文档

技术博客

Arco Design Pro最佳实践
Cesium 3D可视化开发指南
WebRTC实时通信实践

🛠️ 常见问题

1. 依赖安装失败

# 使用legacy-peer-deps
npm install --legacy-peer-deps

# 清理缓存
npm cache clean --force
rm -rf node_modules package-lock.json
npm install --legacy-peer-deps

2. Cesium资源加载失败

检查Cesium资源是否正确复制到build目录
确认CESIUM_BASE_URL配置正确
检查网络请求是否被拦截

3. WebRTC连接失败

检查WebRTC服务地址配置
确认网络连接正常
查看浏览器控制台错误信息
检查HTTPS证书配置

4. 地图不显示

检查地图Token配置
确认地图服务可访问
查看网络请求状态
检查坐标系统配置

5. 构建失败

# 清理构建缓存
rm -rf build node_modules/.cache

# 重新构建
npm run build

📝 更新日志

v1.0.0

初始版本发布
集成Arco Design Pro
实现WebRTC视频监控
集成Cesium 3D地球
实现MQTT通信
完成基础功能开发

👥 开发团队

项目: 可视化智能巡检系统
平台: zn
技术栈: React + Arco Design + Cesium

📄 许可证

项目许可证信息请查看LICENSE文件

📞 联系方式

如有问题或建议，请联系开发团队。

文档版本: v1.0
最后更新: 2025-01-27
文档状态: 正式版

📋 项目概述​

项目简介​

🎯 核心功能​

1. 实时视频监控​

2. 地图可视化​

3. 数据可视化​

4. 设备管理​

5. MQTT通信​

6. 音频处理​

7. 数据导出​

🏗️ 技术架构​

核心技术栈​

前端框架​

UI组件库​

地图和3D可视化​

数据可视化​

实时通信​

工具库​

数据处理​

其他功能库​

📁 项目结构​

🔧 开发环境配置​

必需工具​

环境变量配置​

开发环境 (.env.development)​

生产环境 (.env.production)​

🚀 快速开始​

1. 安装依赖​

2. 启动开发服务器​

3. 构建生产版本​

4. 代码检查和格式化​

🎨 主题配置​

系统设置 (settings.json)​

Arco Design主题​

🗺️ 地图配置​

Cesium配置​

地图服务配置​

📡 WebRTC配置​

LiveKit集成​

WebRTC播放器​

🔌 MQTT配置​

MQTT客户端​

🏗️ Webpack配置​

自定义配置 (config-overrides.js)​

🐳 Docker部署​

Dockerfile配置​

构建和运行​

构建脚本​

🔐 安全配置​

环境变量安全​

代码安全​

网络安全​

📊 性能优化​

构建优化​

运行时优化​

Cesium优化​

🧪 测试​

测试命令​

测试框架​

📚 相关文档​

官方文档​

技术博客​

🛠️ 常见问题​

1. 依赖安装失败​

2. Cesium资源加载失败​

3. WebRTC连接失败​

4. 地图不显示​

5. 构建失败​

📝 更新日志​

v1.0.0​

👥 开发团队​

📄 许可证​

📞 联系方式​