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. 安装依赖

cd vue-app
npm install

2. 复制图片资源

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

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

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

3. 启动开发服务器

npm run dev

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

4. 构建生产版本

npm run build

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

功能特性

✅ 响应式设计

• PC端自动等比例缩放
• 移动端自适应布局
• 支持4K屏幕、普通PC、移动端

✅ 数据展示

• 年度目标和销售额动态加载
• 进度条动画效果
• 季度周数进度显示

✅ 图表功能

• 小组排名柱状图
• 个人排名柱状图（移动端横向布局）
• ECharts响应式图表

✅ 性能优化

• Vue 3 Composition API
• 组件化开发
• 防抖处理窗口resize

对接真实API

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

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返回格式

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

排名数据格式

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

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延迟）