网页/监控后台总览
本目录包含中诺智联前端项目的技术文档，涵盖物联网管理平台和可视化监控系统。
📁 项目列表
1. IOT-Platform-Web - 物联网平台管理系统
项目类型: Web前端应用
技术栈: Vue 3 + Vite + Ant Design Vue + TypeScript
核心功能:
- 设备管理
- 数据可视化
- 用户权限管理
- 系统配置
- Mock数据支持
技术特点:
- 基于Vue Vben Admin精简版
- 使用Vite构建工具
- TypeScript类型安全
- Pinia状态管理
- 国际化支持
文档: 查看详情
2. Monitoring-Platform - 可视化智能巡检系统
项目类型: Web前端应用
技术栈: React 17 + Arco Design + Cesium + TypeScript
核心功能:
- 实时视频监控 (WebRTC/LiveKit)
- 3D地图可视化 (Cesium)
- 数据可视化 (ECharts)
- 设备管理
- MQTT通信
- 音频处理
技术特点:
- 基于Arco Design Pro
- Cesium 3D地球引擎
- WebRTC实时通信
- 多地图服务支持
- Docker容器化部署
文档: 查看详情
🗂️ 项目对比
| 项目 | 框架 | UI库 | 构建工具 | 主要用途 |
|---|---|---|---|---|
| IOT-Platform-Web | Vue 3 | Ant Design Vue | Vite | 物联网设备管理 |
| Monitoring-Platform | React 17 | Arco Design | React App Rewired | 可视化监控巡检 |
🎯 技术栈对比
前端框架
-
Vue 3: IOT-Platform-Web
- 渐进式框架
- 组合式API
- 响应式系统
-
React 17: Monitoring-Platform
- 声明式UI
- 组件化开发
- 虚拟DOM
UI组件库
-
Ant Design Vue: IOT-Platform-Web
- 企业级组件库
- 丰富的组件
- 完善的文档
-
Arco Design: Monitoring-Platform
- 字节跳动出品
- 现代化设计
- 高性能组件
构建工具
-
Vite: IOT-Platform-Web
- 极速冷启动
- 即时热更新
- 优化的构建
-
React App Rewired: Monitoring-Platform
- 自定义Webpack配置
- 灵活的扩展性
- 兼容CRA
状态管理
-
Pinia: IOT-Platform-Web
- Vue 3官方推荐
- 类型安全
- 模块化设计
-
Redux: Monitoring-Platform
- 可预测的状态
- 时间旅行调试
- 中间件支持
📊 功能特性对比
IOT-Platform-Web 特色功能
- ✅ 完整的后台管理功能
- ✅ 动态路由权限
- ✅ 多种代码编辑器集成
- ✅ 丰富的表单组件
- ✅ Excel导入导出
- ✅ 主题定制
Monitoring-Platform 特色功能
- ✅ 3D地球可视化 (Cesium)
- ✅ 实时视频监控 (WebRTC)
- ✅ 多地图服务支持
- ✅ MQTT实时通信
- ✅ 音频录制和播放
- ✅ 大屏数据展示
🔧 开发环境要求
IOT-Platform-Web
- Node.js: ^12 或 >=14
- 包管理器: pnpm (推荐) / npm / yarn
- 浏览器: 现代浏览器 (Chrome, Firefox, Safari, Edge)
Monitoring-Platform
- Node.js: v14 或 v16 (推荐)
- 包管理器: npm (使用--legacy-peer-deps)
- 浏览器: 支持WebRTC的现代浏览器
🚀 快速开始
IOT-Platform-Web
# 安装依赖
pnpm install
# 启动开发服务器
pnpm dev
# 构建生产版本
pnpm build
Monitoring-Platform
# 安装依赖
npm install --legacy-peer-deps
# 启动开发服务器
npm run dev
# 构建生产版本
npm run build
📦 部署方式
IOT-Platform-Web
- 静态文件部署
- Nginx服务器
- Docker容器化
- CDN加速
Monitoring-Platform
- Docker部署 (推荐)
- Nginx服务器
- 静态文件托管
- 支持HTTPS
🎨 设计系统
IOT-Platform-Web
- 主题色: Arco Blue (#165DFF)
- 设计语言: Ant Design
- 响应式: 支持多种屏幕尺寸
- 暗色模式: 支持
Monitoring-Platform
- 主题色: Arco Blue (#165DFF)
- 设计语言: Arco Design
- 响应式: 支持多种屏幕尺寸
- 科幻风格: Arwes组件支持
🔌 集成服务
共同集成
- HTTP客户端: Axios
- 日期处理: Day.js
- 工具库: Lodash
IOT-Platform-Web 特有
- 代码编辑器: CodeMirror, TinyMCE, Vditor
- 图表库: ECharts
- 图片处理: Cropperjs
- 拖拽: Sortablejs
Monitoring-Platform 特有
- 3D引擎: Cesium
- 实时通信: LiveKit, WebRTC
- MQTT: MQTT.js
- 地图: 高德地图, 天地图, Google Maps
- 音频: Benz AMR Recorder
📱 浏览器兼容性
IOT-Platform-Web
- Chrome (最新版)
- Firefox (最新版)
- Safari (最新版)
- Edge (最新版)
- 不支持IE
Monitoring-Platform
- Chrome (推荐，WebRTC支持最佳)
- Firefox (最新版)
- Safari (最新版)
- Edge (最新版)
- 需要WebRTC支持
🔐 安全特性
共同特性
- HTTPS加密传输
- JWT身份认证
- XSS防护
- CSRF防护
- 环境变量管理
额外安全措施
- 生产环境移除console
- 代码混淆和压缩
- Source Map控制
- 敏感信息加密
📊 性能优化
IOT-Platform-Web
- 路由懒加载
- 组件按需加载
- Tree Shaking
- 代码分割
- 图片压缩
- Gzip/Brotli压缩
Monitoring-Platform
- 路由懒加载
- 虚拟列表
- Cesium LOD优化
- WebRTC流优化
- 地图瓦片缓存
- 实体聚合显示
📚 学习资源
Vue生态
React生态
可视化
🎯 应用场景
IOT-Platform-Web
- 物联网设备管理
- 数据监控平台
- 企业管理系统
- 后台管理系统
Monitoring-Platform
- 智能巡检系统
- 视频监控平台
- 地理信息系统
- 实时监控大屏
- 设备追踪系统
💡 技术选型建议
选择 IOT-Platform-Web 如果你需要:
- 完整的后台管理功能
- 快速开发和部署
- Vue生态系统
- 丰富的表单和表格功能
- 代码编辑器集成
选择 Monitoring-Platform 如果你需要:
- 3D地图可视化
- 实时视频监控
- WebRTC实时通信
- 地理信息展示
- 大屏数据展示
- React生态系统
🔄 项目迁移
从Vue到React
如果需要将IOT-Platform-Web的功能迁移到React：
- 组件逻辑转换 (Composition API → Hooks)
- 状态管理迁移 (Pinia → Redux)
- 路由配置调整 (Vue Router → React Router)
- UI组件替换 (Ant Design Vue → Arco Design)
从React到Vue
如果需要将Monitoring-Platform的功能迁移到Vue：
- 组件逻辑转换 (Hooks → Composition API)
- 状态管理迁移 (Redux → Pinia)
- 路由配置调整 (React Router → Vue Router)
- UI组件替换 (Arco Design → Ant Design Vue)
📞 技术支持
如有技术问题或需要支持，请联系开发团队。
更新日期: 2025-01-27
文档版本: v1.0
Node.js版本: 14+ (推荐)