# 数据大屏

**Repository Path**: Ip_Man/data-dashboard

## Basic Information

- **Project Name**: 数据大屏
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-10-23
- **Last Updated**: 2025-11-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 可视化大屏项目

基于 Vue CLI + Vue 2 + DataV 的可视化大屏项目

## 项目特性

- 🚀 基于 Vue CLI 构建工具
- ⚡ Vue 2.7 Options API + Composition API
- 🗂️ 集成 Vue Router 路由管理
- 🗃️ 集成 Vuex 状态管理
- 📊 集成 DataV 可视化组件库
- 🎨 现代化大屏设计风格
- 📱 响应式布局适配

## 技术栈

- **前端框架**: Vue 2.7.16
- **构建工具**: Vue CLI 4.5
- **路由管理**: Vue Router 3.6.5
- **状态管理**: Vuex 3.6.2
- **可视化库**: @jiaminghi/data-view 2.10
- **地图库**: @antv/l7 2.22.0 + @antv/l7-maps 2.22.0
- **开发语言**: JavaScript (ES Modules)

## 项目结构

```
datav/
├── public/
│   └── index.html       # HTML模板
├── src/
│   ├── assets/
│   │   └── style.css    # 全局样式
│   ├── components/      # 组件目录
│   ├── router/          # 路由配置 (待添加)
│   ├── store/           # Vuex状态管理 (待添加)
│   ├── views/           # 页面视图 (待添加)
│   ├── App.vue          # 主应用组件
│   └── main.js          # 应用入口
├── vue.config.js        # Vue CLI配置
├── .gitignore           # Git忽略文件
├── package.json         # 项目配置
└── README.md           # 项目说明
```

## 安装依赖

```bash
npm install
```

## 开发模式

```bash
npm run serve
```

服务器将在 `http://localhost:8080` 启动

## 构建生产版本

```bash
npm run build
```

## 代码检查

```bash
npm run lint
```

## 功能特性

### 🗂️ 路由管理
- Vue Router 3.6.5 集成
- 支持嵌套路由和动态路由
- 路由守卫和导航控制
- 历史模式支持

### 🗃️ 状态管理
- Vuex 3.6.2 集成
- 集中式状态管理
- 支持模块化
- 状态持久化支持

### 🎯 大屏组件展示
- 装饰边框组件
- 数字翻牌器
- 滚动排名榜
- 数据图表
- 进度条
- 水球图
- 百分比环
- **安徽省地图可视化**
- **动态飞线图效果**

### 🎨 视觉效果
- 渐变背景
- 霓虹发光效果
- 毛玻璃效果
- 响应式布局
- 实时数据更新

### 📊 数据可视化
- 实时数据模拟
- 动态图表更新
- 多种数据展示形式
- 流畅的动画效果

### 🗺️ 地图可视化
- AntV L7 地图引擎
- 安徽省边界可视化
- 动态飞线图效果
- 交互式地图控制
- 实时数据叠加

## 自定义配置

### Vue CLI 配置 (vue.config.js)

项目使用了自定义的 Vue CLI 配置，包括：

- **开发服务器**: 端口 8080，自动打开浏览器
- **代码分割**: 优化第三方库打包
- **别名配置**: `@` 指向 `src` 目录
- **生产优化**: 禁用 source map，优化构建

## 🚀 快速开始

### 访问可视化大屏

启动开发服务器后，访问以下页面：

- **首页大屏**: http://localhost:8080/
  - 安徽省地图可视化
  - 实时数据监控面板
  - 动态飞线图效果
  - 性能指标展示

- **数据大屏**: http://localhost:8080/dashboard
  - 完整的 DataV 组件展示

- **关于页面**: http://localhost:8080/about
  - 项目信息和技术栈

### 交互功能

- **地图控制**: 使用飞线显示/隐藏按钮控制飞线图层
- **数据更新**: 每3秒自动更新所有数据指标
- **响应式设计**: 支持桌面端和移动端适配

## 自定义配置

### DataV 可视化组件

项目使用了以下 DataV 组件：

- `dv-decoration-*`: 装饰组件
- `dv-border-box-*`: 边框容器
- `dv-digital-flop`: 数字翻牌器
- `dv-scroll-ranking-board`: 滚动排名榜
- `dv-charts`: 图表组件
- `dv-progress`: 进度条
- `dv-water-level-pond`: 水球图
- `dv-percent-pond`: 百分比环

### AntV L7 地图组件

项目集成了 AntV L7 地图可视化：

- `Scene`: 地图场景容器
- `PolygonLayer`: 多边形图层（省份边界）
- `LineLayer`: 线条图层（飞线效果）
- `Mapbox`: Mapbox 地图服务

### 路由和状态管理

项目已集成 Vue Router 和 Vuex，但路由配置和状态管理模块暂未创建。如需使用，请参考以下结构：

```
src/router/
├── index.js          # 路由配置
└── guards.js         # 路由守卫

src/store/
├── index.js          # 根 store
├── modules/          # store 模块
└── getters.js        # 全局 getters
```

## 浏览器支持

- Chrome 80+
- Firefox 75+
- Safari 13+
- Edge 80+

## 新增组件

### DetentionCountChart (在押人数统计组件)

**功能特性：**
- 折线图显示在押人数年度趋势变化
- 条形图显示各监区的在押人数分布
- 条形图支持点击交互，可选中特定监区
- 实时显示总在押人数统计
- 响应式设计，支持移动端适配
- 使用mock数据模拟真实数据变化

**使用方法：**
```vue
<template>
  <detention-count-chart @area-selected="handleAreaSelected"></detention-count-chart>
</template>

<script>
import DetentionCountChart from '@/components/DetentionCountChart.vue'

export default {
  components: {
    DetentionCountChart
  },
  methods: {
    handleAreaSelected(areaData) {
      console.log('选中监区:', areaData)
      // 处理监区选择逻辑
    }
  }
}
</script>
```

**事件：**
- `area-selected`: 当用户点击条形图中的监区时触发，返回选中监区的数据

**数据结构：**
```javascript
// 趋势数据
trendData: [
  { month: '1月', count: 850, date: '2024-01' },
  // ...
]

// 监区数据
areaData: [
  {
    area: '第1监区',
    count: 75,
    capacity: 100,
    usageRate: 75.0
  },
  // ...
]
```

## 开发计划

- [x] 创建路由配置 (`src/router/index.js`)
- [x] 设置基础页面视图 (`src/views/`)
- [x] 实现 Vuex 状态管理 (`src/store/`)
- [x] 添加路由导航组件
- [x] 实现页面间数据共享
- [x] 配置 Git 版本控制 (`.gitignore`)
- [x] 集成 AntV L7 地图库
- [x] 实现安徽省地图可视化
- [x] 添加动态飞线图效果
- [x] 构建完整大屏布局
- [x] **添加DetentionCountChart在押人数统计组件**
- [ ] 添加用户认证功能
- [ ] 实现数据持久化
- [ ] 添加更多图表类型

## 许可证

MIT License