You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
|
|
# 智慧活畜交易大数据中心
|
|
|
|
|
|
基于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进行布局 |
