sales_data_dashboard/vue-app/README.md

# 数据大屏 Vue3 项目

这是使用 Vue 3 + Vite 重构的数据大屏项目，功能与原HTML版本完全一致。

## 项目结构

```
vue-app/
├── src/
│   ├── components/
│   │   ├── TopData.vue          # 顶部数据区域（年度目标、销售额、进度条、季度进度）
│   │   ├── GroupRanking.vue     # 小组排名组件
│   │   └── PersonRanking.vue    # 个人排名组件
│   ├── App.vue                  # 主应用组件
│   ├── main.js                  # 入口文件
│   └── style.css                # 全局样式
├── public/
│   └── img/                     # 图片资源（需要从原项目复制）
├── index.html                   # HTML模板
├── package.json                 # 项目配置
└── vite.config.js              # Vite配置
```

## 安装步骤

### 1. 安装依赖

```bash
cd vue-app
npm install
```

### 2. 复制图片资源

将原项目的图片文件夹复制到 `vue-app/public/` 目录：

```bash
# Windows
xcopy ..\img public\img\ /E /I

# Linux/Mac
cp -r ../img public/img/
```

### 3. 启动开发服务器

```bash
npm run dev
```

浏览器会自动打开 `http://localhost:3000`

### 4. 构建生产版本

```bash
npm run build
```

构建产物在 `vue-app/dist/` 目录

## 功能特性

✅ **响应式设计**
- PC端自动等比例缩放
- 移动端自适应布局
- 支持4K屏幕、普通PC、移动端

✅ **数据展示**
- 年度目标和销售额动态加载
- 进度条动画效果
- 季度周数进度显示

✅ **图表功能**
- 小组排名柱状图
- 个人排名柱状图（移动端横向布局）
- ECharts响应式图表

✅ **性能优化**
- Vue 3 Composition API
- 组件化开发
- 防抖处理窗口resize

## 对接真实API

在 `src/components/TopData.vue` 的 `fetchYearData` 函数中修改：

```javascript
const fetchYearData = async () => {
  try {
    const response = await fetch('/api/year-data')
    const data = await response.json()
    return data
  } catch (error) {
    console.error('获取数据失败:', error)
    return { target: 0, actual: 0 }
  }
}
```

## 数据格式

### API返回格式

```json
{
  "target": 3500,
  "actual": 2750
}
```

### 排名数据格式

在 `GroupRanking.vue` 和 `PersonRanking.vue` 中修改数据：

```javascript
const groupData = ref([
  { name: '名称', target: 目标值, actual: 实际值 }
])
```

## 技术栈

- Vue 3.4+ (Composition API)
- Vite 5.0+
- ECharts 5.4+
- JavaScript ES6+

## 浏览器支持

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

## 注意事项

1. 确保 `public/img/` 目录包含所有图片资源
2. PC端缩放范围为 0.6-1.0（缩小不放大）
3. 移动端断点为 768px
4. 图表使用防抖处理resize事件（300ms延迟）