项目概述

Vue3 大屏可视化平台项目概述

项目简介

Vue3 大屏可视化平台是一个基于 Vue3 + Composition API + Element Plus + ECharts + 天地图的企业级数据可视化大屏项目。该项目提供了高性能、易维护、高可配置的数据可视化大屏解决方案。

项目地址： https://github.com/znlgis/vue3-map-dashboard

核心特性

性能优化

• 高性能 - 优化后性能提升 30-40%
• 智能缓存 - WeakMap 缓存、天气数据缓存，减少重复计算
• 批量更新优化 - 合并遍历，预分配数组
• 并行加载 - Promise.all 并行请求，初始化速度提升 31%
• 代码分割 - 自动分包，按需加载

架构特性

• Vue3 Composition API - 采用 Composables 模式，逻辑复用更方便
• 易维护 - Composables 架构，代码复用性强
• 可配置 - 统一配置管理，支持开发/生产环境

工具系统

• 日志系统 - 四级日志（debug/info/warn/error），环境自动切换
• 缓存系统 - 灵活的内存缓存，支持过期策略
• 性能监控 - 实时 FPS 和内存监控
• 错误处理 - 统一的错误边界和友好提示

技术栈

技术	版本	说明
Vue	3.4+	渐进式JavaScript框架，使用 Composition API
Element Plus	2.5+	基于Vue 3的组件库
ECharts	5.5+	强大的数据可视化图表库
天地图 API	-	中国自主研发的地图服务
和风天气 API	-	实时天气数据服务
Vite	5.0+	下一代前端构建工具
Sass	-	CSS预处理器
Day.js	-	轻量级日期处理库
Pinyin Pro	-	中文拼音转换，支持智能搜索
XLSX	-	Excel 文件处理

主要功能

1. 地图与人员追踪

• 天地图集成，深色主题
• 200+ 人员动态位置更新
• 实时位置追踪与批量优化
• 地图交互，点击人员查看详情
• 自动天气更新

2. 数据可视化图表

• 统计卡片，实时监控数据
• 多种图表支持（ECharts）
• 动态数据自动刷新
• 响应式图表自适应

3. 智能搜索系统

• 中文关键词搜索
• 拼音全拼/首字母搜索
• 模糊匹配
• 结果高亮

4. 天气信息系统

• 智能缓存（10分钟）
• 失败重试机制
• 位置联动
• 实时展示

项目结构

vue3-dashboard/
├── public/                          # 静态资源
│   └── data/                       # 数据文件（Excel等）
├── src/
│   ├── assets/                     # 资源文件
│   ├── components/                 # 公共组件
│   │   ├── AnswerDialog/          # 问答对话框
│   │   ├── ChartCard/             # 图表卡片容器
│   │   ├── Header/                # 头部组件
│   │   ├── Map/                   # 天地图组件
│   │   ├── PatentDialog/          # 专利展示弹窗
│   │   ├── PersonnelDialog/       # 人员信息弹窗
│   │   ├── SearchBox/             # 智能搜索框
│   │   └── StatCard/              # 统计卡片
│   ├── composables/               # 组合式函数（可复用逻辑）
│   │   ├── usePersonnel.js        # 人员管理
│   │   ├── useWeather.js          # 天气管理
│   │   ├── useRealtimeData.js     # 实时数据管理
│   │   └── usePerformanceMonitor.js # 性能监控
│   ├── config/                    # 配置文件
│   │   ├── index.js               # 通用配置
│   │   ├── dashboard.config.js    # 性能和功能配置
│   │   ├── map.config.js          # 地图和天气配置
│   │   └── theme.config.js        # 主题配置
│   ├── utils/                     # 工具函数
│   │   ├── cache.js               # 缓存管理
│   │   ├── logger.js              # 日志管理
│   │   ├── date.js                # 日期处理
│   │   ├── index.js               # 通用工具
│   │   ├── mock.js                # 模拟数据生成
│   │   ├── patent.js              # 专利文件处理
│   │   ├── personnel.js           # 人员管理
│   │   ├── search.js              # 搜索功能
│   │   └── weather.js             # 天气 API
│   ├── views/                     # 页面组件
│   │   └── Dashboard.vue          # 主仪表盘
│   ├── App.vue                    # 根组件
│   └── main.js                    # 入口文件
├── index.html                     # HTML 模板
├── vite.config.js                 # Vite 配置
└── package.json                   # 项目依赖

浏览器支持

浏览器	版本
Chrome	>= 90
Firefox	>= 88
Safari	>= 14
Edge	>= 90

开源协议

本项目采用 MIT 协议开源。