Vue3 大屏可视化平台核心功能详解
一、Composables 架构
Vue3 Composables 是该项目的核心架构模式，实现了逻辑复用和关注点分离。
1. usePersonnel - 人员管理
import { usePersonnel } from '@/composables/usePersonnel'const { personnelMarkers, // 人员标注isLoading, // 加载状态error, // 错误信息initPersonnelData // 初始化方法
} = usePersonnel()
功能说明：
- 自动更新人员位置
- 批量优化处理
- 错误处理机制
- 内存缓存优化
2. useWeather - 天气管理
import { useWeather } from '@/composables/useWeather'const {weatherData, // 天气数据updateWeather // 更新方法
} = useWeather()
功能说明：
- 智能缓存（10分钟）
- 失败重试机制（3次）
- 位置联动更新
3. useRealtimeData - 实时数据管理
import { useRealtimeData } from '@/composables/useRealtimeData'const {realtimeStats, // 实时统计updateRealtimeData // 更新方法
} = useRealtimeData()
功能说明：
- 实时数据刷新
- 数据格式化处理
4. usePerformanceMonitor - 性能监控
import { usePerformanceMonitor } from '@/composables/usePerformanceMonitor'const { fps, // 实时 FPSmemoryUsage, // 内存使用百分比performanceWarnings, // 性能警告getPerformanceReport // 获取性能报告
} = usePerformanceMonitor()
功能说明：
- FPS 低于 30 时自动警告
- 内存使用超过 80% 时警告
- 自动生成性能报告
5. 使用示例
<script setup>
import { onMounted } from 'vue'
import { usePersonnel } from '@/composables/usePersonnel'
import { useWeather } from '@/composables/useWeather'// 人员管理
const {personnelMarkers,isLoading,error,initPersonnelData
} = usePersonnel()// 天气管理
const {weatherData,updateWeather
} = useWeather()// 初始化
onMounted(async () => {// 并行加载数据await Promise.all([initPersonnelData(),updateWeather(116.4074, 39.9042)])
})
</script>
二、工具函数系统
1. 日志管理（utils/logger.js）
import { logDebug, // Debug 日志logInfo, // Info 日志logWarn, // Warning 日志logError, // Error 日志PerformanceTimer // 性能计时器
} from '@/utils/logger'// 基本使用
logInfo('开始加载数据')
logError('加载失败', error)// 性能计时
const timer = new PerformanceTimer('数据加载')
// ... 执行操作
timer.end() // 自动输出：数据加载 took 123ms
2. 缓存管理（utils/cache.js）
import { setCache, // 设置缓存getCache, // 获取缓存hasCache, // 检查缓存是否存在deleteCache, // 删除缓存clearCache, // 清空所有缓存getCacheStats // 获取缓存统计
} from '@/utils/cache'// 设置缓存（10分钟过期）
setCache('weather_data', data, 600000)// 获取缓存
const cached = getCache('weather_data')// 检查缓存
if (hasCache('weather_data')) {// 使用缓存数据
}// 获取缓存统计
const stats = getCacheStats()
3. 日期处理（utils/date.js）
import { formatDate, // 格式化日期getCurrentTime, // 获取当前时间getWeekDay // 获取星期
} from '@/utils/date'const now = getCurrentTime() // "2024-01-15 14:30:25"
const weekday = getWeekDay() // "星期一"
const formatted = formatDate(date, 'YYYY-MM-DD')
4. 通用工具（utils/index.js）
import { getCommonChartOption, // ECharts 通用配置debounce, // 防抖函数throttle, // 节流函数formatNumber // 数字格式化
} from '@/utils'// 防抖使用
const search = debounce((keyword) => {// 搜索逻辑
}, 500)// 节流使用
const handleScroll = throttle(() => {// 滚动处理
}, 200)// 数字格式化
formatNumber(1234567) // "1,234,567"
5. 搜索功能（utils/search.js）
import { loadData, // 加载数据（支持 Excel/JSON）fuzzySearch, // 模糊搜索（支持拼音）highlightText // 高亮文本
} from '@/utils/search'// 模糊搜索（支持中文、拼音、首字母）
const results = fuzzySearch(data, 'zhangsan')// 高亮匹配文本
const highlighted = highlightText(text, keyword)
6. 天气 API（utils/weather.js）
import { getWeatherByLocation, // 根据经纬度获取天气getCityNameByLocation, // 获取城市名称formatTemperature // 格式化温度显示
} from '@/utils/weather'// 获取天气
const weather = await getWeatherByLocation(116.4074, 39.9042)// 获取城市名
const city = await getCityNameByLocation(116.4074, 39.9042)
7. 人员管理（utils/personnel.js）
import {loadPersonnelDataFromExcel, // 从 Excel 加载数据updatePersonnelSpeedsAndPositions, // 更新速度和位置convertPersonnelToMarkers, // 转换为地图标注generateActivityArea, // 生成活动区域isPointInPolygon, // 判断点是否在多边形内calculateDistance // 计算两点距离
} from '@/utils/personnel'
三、组件系统
1. 图表卡片（ChartCard）
用于包装 ECharts 图表的容器组件。
<ChartCard title="数据统计"><div ref="chartRef" style="height: 300px;"></div>
</ChartCard>
2. 统计卡片（StatCard）
展示统计数据的卡片组件。
<StatCard title="检验报告" :value="1234" icon="document"
/>
3. 搜索框（SearchBox）
智能搜索组件，支持拼音搜索。
<SearchBox v-model="keyword"placeholder="请输入关键词"@search="handleSearch"
/>
4. 地图组件（Map）
天地图集成组件。
<Map :markers="personnelMarkers"@click="handleMapClick"
/>
5. 弹窗组件
- AnswerDialog - 问答对话框
- PatentDialog - 专利展示弹窗
- PersonnelDialog - 人员信息弹窗
四、性能优化详解
性能提升数据
| 优化项目 | 优化前 | 优化后 | 提升幅度 |
|---|---|---|---|
| 人员位置更新 | ~15ms | ~10ms | ⬆️ 33% |
| 多边形计算 | ~8ms | ~5ms | ⬆️ 37% |
| 页面初始化 | ~800ms | ~550ms | ⬆️ 31% |
| 代码行数 | 200行 | 120行 | ⬇️ 40% |
| 内存占用 | 较高 | 中等 | ⬇️ 20% |
优化技术
1. 缓存优化
- WeakMap 缓存 - 多边形边界和中心点计算缓存
- 天气数据缓存 - 10分钟缓存，减少 API 调用
- 智能过期策略 - 自动清理过期缓存
2. 算法优化
- 合并遍历 - 将双重遍历优化为单次遍历
- 预分配数组 - 减少内存重分配
- for 循环替代 map - 性能提升 20%
3. 并发优化
- Promise.all - 并行加载数据
- 异步处理 - 非阻塞操作
- 批量更新 - 减少重绘次数
4. 代码分割
// vite.config.js
manualChunks: {'vue-vendor': ['vue'],'echarts-vendor': ['echarts'],'element-plus-vendor': ['element-plus']
}
优势：
- 减少首屏加载时间
- 提高缓存利用率
- 按需加载优化