# 展示数据大屏

**Repository Path**: dylweb/display-data-big-screen

## Basic Information

- **Project Name**: 展示数据大屏
- **Description**: 展示数据大屏
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-05-20
- **Last Updated**: 2026-05-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 御免驾到 可视化数据大屏 (Vue3 版本)

基于 Vue3 + Element Plus + Vite 重构的可视化数据大屏项目。

## 技术栈

- **Vue 3** - 渐进式 JavaScript 框架
- **Element Plus** - Vue 3 组件库
- **Vite** - 下一代前端构建工具
- **ECharts** - 数据可视化图表库
- **腾讯地图** - 地图服务

## 项目结构

```
mapv2/
├── public/                 # 静态资源
│   ├── assets/           # 图片资源
│   └── favicon.ico
├── src/
│   ├── components/       # 组件
│   │   ├── Header.vue    # 顶部栏
│   │   ├── LeftPanel.vue # 左侧数据面板
│   │   ├── Footer.vue    # 底部栏
│   │   └── TencentMap.vue # 腾讯地图组件
│   ├── App.vue           # 根组件
│   ├── main.js           # 入口文件
│   └── style.css         # 全局样式
├── index.html            # HTML 模板
├── package.json          # 项目配置
└── vite.config.js        # Vite 配置
```

## 功能模块

### Header (顶部栏)
- 左侧：当前年月和星期
- 中间：Logo、系统标题、区域定位
- 右侧：年月数据展示
- 实时更新时间

### LeftPanel (左侧数据面板)
- **平台统计数据**：用户量、订单量、技师数
- **在线用户列表**：Tab 切换在线用户/技师列表
- **报警信息**：实时报警数据表格
- **可预约标识**：可预约状态展示

### Footer (底部栏)
- 公网安备信息
- ICP 备案信息
- 版权信息

### TencentMap (腾讯地图)
- 全屏地图展示
- 地图/卫星视图切换
- 复位功能
- 30 公里范围内随机标记点（绿/红/黄三色）

## 快速开始

### 安装依赖

```bash
npm install
```

### 开发环境运行

```bash
npm run dev
```

### 生产环境构建

```bash
npm run build
```

### 预览构建结果

```bash
npm run preview
```

## 数据接口说明

当前项目使用模拟数据，实际使用时需要替换为真实接口调用。

### 数据位置

- 平台统计数据：`LeftPanel.vue` 中的 `platformStats`
- 用户列表数据：`LeftPanel.vue` 中的 `onlineUsers` 和 `technicians`
- 报警信息数据：`LeftPanel.vue` 中的 `alarmList`

### 替换示例

```javascript
// 在组件中使用 axios 或 fetch 替换模拟数据
import { onMounted, ref } from 'vue'
import axios from 'axios'

const alarmList = ref([])

onMounted(async () => {
  const res = await axios.get('/api/alarms')
  alarmList.value = res.data
})
```

## 自定义配置

### 修改地图中心点

编辑 `TencentMap.vue` 中的 `defaultCenter`：

```javascript
const defaultCenter = ref({
  lat: 34.2523608,  // 纬度
  lng: 108.9472361  // 经度
})
```

### 修改 API Key

编辑 `TencentMap.vue` 中的腾讯地图 API URL：

```javascript
script.src = 'https://map.qq.com/api/js?v=2.exp&key=YOUR_KEY_HERE&callback=initMap'
```

## 浏览器支持

- Chrome (推荐)
- Edge
- Firefox
- Safari

## 版本信息

- 版本：2.0.0
- 框架：Vue 3
- 构建工具：Vite
- UI 库：Element Plus