# 智慧活畜交易大数据中心

基于Vue 3 + ECharts的科技风数据大屏项目

## 特性

- 🖥️ **固定尺寸设计**: 默认5120×1440像素，支持滚动条
- ⚙️ **动态配置**: JSON配置文件管理屏幕尺寸
- 📊 **丰富图表**: 多种ECharts图表类型
- 🎨 **科技风格**: 深色主题，炫酷动效
- 📱 **响应式布局**: 适配不同屏幕尺寸
- 🔄 **实时数据**: 模拟数据自动更新

## 快速开始

### 安装依赖
```bash
npm install
```

### 开发模式
```bash
npm run dev
```

### 构建生产版本
```bash
npm run build
```

## 配置管理

### 修改屏幕尺寸

编辑 `public/config.json` 文件：

```json
{
  "screen": {
    "width": 5120,     // 屏幕宽度
    "height": 1440,    // 屏幕高度
    "title": "智慧活畜交易大数据中心"
  },
  "dashboard": {
    "refreshInterval": 5000,
    "animationDuration": 300
  }
}
```

### 常用尺寸参考

| 分辨率 | 宽度 | 高度 | 用途 |
|--------|------|------|------|
| 5K超宽屏 | 5120px | 1440px | 专业显示器 |
| 4K | 3840px | 2160px | 4K显示器 |
| 2K | 2560px | 1440px | 2K显示器 |
| 1080p | 1920px | 1080px | 标准显示器 |

## 项目结构

```
├── public/
│   └── config.json          # 配置文件
├── src/
│   ├── components/          # 组件目录
│   │   ├── RealTimeStats.vue       # 实时交易统计
│   │   ├── CountySalesStats.vue    # 本县销售统计
│   │   ├── TradingTrendChart.vue   # 交易趋势图表
│   │   ├── BeijingTrendChart.vue   # 转牛京津冀趋势
│   │   ├── ChinaMap.vue            # 中国地图
│   │   ├── ExchangeMonitor.vue     # 交易所实时监控
│   │   ├── SalesChannelStats.vue   # 转牛销售渠道统计
│   │   ├── PurchaserAnalysis.vue   # 采购商来源分析
│   │   ├── SupplyDemandData.vue    # 供需实数据
│   │   └── TransactionDetails.vue  # 交易明细统计
│   ├── styles/              # 样式文件
│   ├── utils/
│   │   └── config.js        # 配置管理工具
│   └── App.vue              # 主组件
└── package.json
```

## 部署说明

1. 构建项目：`npm run build`
2. 将 `dist` 目录部署到Web服务器
3. 根据实际屏幕修改 `config.json` 配置
4. 访问部署的URL

## 技术栈

- Vue 3.3.4
- ECharts 5.4.3
- Vite 4.4.9
- SCSS 1.66.1

## 开发说明

- 所有图表组件支持响应式
- 数据更新通过定时器模拟
- 支持深色科技风主题
- 使用CSS Grid进行布局