znlgis 博客

GIS开发与技术分享

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()

功能说明：

3. useRealtimeData - 实时数据管理

import { useRealtimeData } from '@/composables/useRealtimeData'

const {
  realtimeStats,        // 实时统计
  updateRealtimeData    // 更新方法
} = useRealtimeData()

功能说明：

4. usePerformanceMonitor - 性能监控

import { usePerformanceMonitor } from '@/composables/usePerformanceMonitor'

const { 
  fps,                    // 实时 FPS
  memoryUsage,            // 内存使用百分比
  performanceWarnings,    // 性能警告
  getPerformanceReport    // 获取性能报告
} = usePerformanceMonitor()

功能说明：

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. 弹窗组件

四、性能优化详解

性能提升数据

优化项目 优化前 优化后 提升幅度
人员位置更新 ~15ms ~10ms ⬆️ 33%
多边形计算 ~8ms ~5ms ⬆️ 37%
页面初始化 ~800ms ~550ms ⬆️ 31%
代码行数 200行 120行 ⬇️ 40%
内存占用 较高 中等 ⬇️ 20%

优化技术

1. 缓存优化

2. 算法优化

3. 并发优化

4. 代码分割

// vite.config.js
manualChunks: {
  'vue-vendor': ['vue'],
  'echarts-vendor': ['echarts'],
  'element-plus-vendor': ['element-plus']
}

优势：