From b39ecb74e55ce39a0faf5716d67612f76a9ea275 Mon Sep 17 00:00:00 2001 From: Swanky <413564165@qq.com> Date: Tue, 17 Jun 2025 23:42:34 +0800 Subject: [PATCH] init --- .gitignore | 1 + DATA_CONFIG_GUIDE.md | 42 + README.md | 103 +- index.html | 26 + package-lock.json | 2466 +++++++++++++++++++ package.json | 22 + public/china.json | 1 + public/config.json | 11 + public/data-config.json | 160 ++ public/datas/513233.json | 1 + public/datas/supply-demand.json | 471 ++++ public/test-data.html | 1 + public/yak-trading-data.json | 242 ++ src/App.vue | 438 ++++ src/components/BaseCard.vue | 70 + src/components/BeijingTrendChart.vue | 137 ++ src/components/ChinaMap.vue | 1096 +++++++++ src/components/ComprehensiveSalesStats.vue | 271 ++ src/components/ExchangeMonitor.vue | 283 +++ src/components/MarketEnvironmentMonitor.vue | 373 +++ src/components/MarketRealtimeMonitor.vue | 593 +++++ src/components/PurchaserAnalysis.vue | 223 ++ src/components/RealTimeStats.vue | 312 +++ src/components/SalesChannelStats.vue | 207 ++ src/components/ScrollingAnnouncement.vue | 205 ++ src/components/SupplyDemandData.vue | 1088 ++++++++ src/components/TradingTrendChart.vue | 159 ++ src/components/TransactionDetails.vue | 337 +++ src/components/YakPriceTrend.vue | 172 ++ src/components/YakSalesTypeStats.vue | 296 +++ src/components/YakTradingData.vue | 313 +++ src/images/大标题背景.png | Bin 0 -> 81898 bytes src/images/数据底座.png | Bin 0 -> 38810 bytes src/main.js | 5 + src/styles/index.scss | 166 ++ src/styles/variables.scss | 26 + src/utils/config.js | 59 + src/utils/dataManager.js | 164 ++ src/utils/dataStore.js | 1 + src/utils/dataUpdater.js | 93 + vite.config.js | 23 + 41 files changed, 10656 insertions(+), 1 deletion(-) create mode 100644 DATA_CONFIG_GUIDE.md create mode 100644 index.html create mode 100644 package-lock.json create mode 100644 package.json create mode 100644 public/china.json create mode 100644 public/config.json create mode 100644 public/data-config.json create mode 100644 public/datas/513233.json create mode 100644 public/datas/supply-demand.json create mode 100644 public/test-data.html create mode 100644 public/yak-trading-data.json create mode 100644 src/App.vue create mode 100644 src/components/BaseCard.vue create mode 100644 src/components/BeijingTrendChart.vue create mode 100644 src/components/ChinaMap.vue create mode 100644 src/components/ComprehensiveSalesStats.vue create mode 100644 src/components/ExchangeMonitor.vue create mode 100644 src/components/MarketEnvironmentMonitor.vue create mode 100644 src/components/MarketRealtimeMonitor.vue create mode 100644 src/components/PurchaserAnalysis.vue create mode 100644 src/components/RealTimeStats.vue create mode 100644 src/components/SalesChannelStats.vue create mode 100644 src/components/ScrollingAnnouncement.vue create mode 100644 src/components/SupplyDemandData.vue create mode 100644 src/components/TradingTrendChart.vue create mode 100644 src/components/TransactionDetails.vue create mode 100644 src/components/YakPriceTrend.vue create mode 100644 src/components/YakSalesTypeStats.vue create mode 100644 src/components/YakTradingData.vue create mode 100644 src/images/大标题背景.png create mode 100644 src/images/数据底座.png create mode 100644 src/main.js create mode 100644 src/styles/index.scss create mode 100644 src/styles/variables.scss create mode 100644 src/utils/config.js create mode 100644 src/utils/dataManager.js create mode 100644 src/utils/dataStore.js create mode 100644 src/utils/dataUpdater.js create mode 100644 vite.config.js diff --git a/.gitignore b/.gitignore index a19f004..ebb636b 100644 --- a/.gitignore +++ b/.gitignore @@ -8,4 +8,5 @@ docs/_book # TODO: where does this rule come from? test/ +node_modules diff --git a/DATA_CONFIG_GUIDE.md b/DATA_CONFIG_GUIDE.md new file mode 100644 index 0000000..3588831 --- /dev/null +++ b/DATA_CONFIG_GUIDE.md @@ -0,0 +1,42 @@ +# 数据配置使用指南 + +## 概述 +本系统支持通过JSON配置文件来管理所有模块的数据,方便在部署时进行数据修改而无需重新编译代码。 + +## 配置文件位置 +- **开发环境**: `public/data-config.json` +- **生产环境**: 部署后的 `/data-config.json` 文件 + +## 主要数据模块 + +### 1. 实时交易统计 (realTimeStats) +- todayTransactions: 今日交易笔数 +- totalAmount: 交易总额(万元) +- activeUsers: 活跃用户数 +- systemStatus: 系统状态 + +### 2. 牦牛交易数据 (yakTradingData) +- totalCount: 总交易数量 +- avgPrice: 平均价格 +- monthlyGrowth: 月增长率(%) +- topRegion: 主要地区 + +## 部署时修改数据 + +### 方法一:直接修改JSON文件 +1. 找到部署目录下的 `data-config.json` 文件 +2. 使用文本编辑器打开文件 +3. 修改对应的数据值 +4. 保存文件 +5. 刷新浏览器页面即可看到更新 + +### 方法二:替换整个配置文件 +1. 准备新的 `data-config.json` 文件 +2. 替换部署目录下的原文件 +3. 刷新浏览器页面 + +## 注意事项 +1. **JSON格式**: 确保修改后的文件符合JSON格式规范 +2. **数据类型**: 注意保持数据类型一致(数字、字符串、数组等) +3. **编码格式**: 文件应保存为UTF-8编码 +4. **备份**: 修改前建议备份原文件 \ No newline at end of file diff --git a/README.md b/README.md index 1273bff..55d4d87 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,103 @@ -# livestock-trading +# 智慧活畜交易大数据中心 +基于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进行布局 \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..0d91118 --- /dev/null +++ b/index.html @@ -0,0 +1,26 @@ + + +
+ + + +| 区域名称 | +交易数量 | +采购商户 | +收货地 | +交易时间 | +
|---|---|---|---|---|
| {{ item.areaName }} | +{{ item.quantity }}头 | +{{ item.buyer }} | +{{ item.destination }} | +{{ item.tradeTime }} | +
jGjViU*mVd>L@Bs^;@9E>k?90CXLt Kof#vKn8Wvnd+SP-1;4x^X$TPbpIjQ+z9vaxTD_JyW6au&ses+L7vPbbWj1d8
zTuZDE5I`e)6`ZhoEef>1HZFTtWDT(~AMaL+?AFMnnZpBQj&EjS;Ch;|znu4izw88e
zh#xw|SPSoX)BQe|@!SbU*#@>3G)a4ZZR!tL|F{w?9uZPETf$3H-@(#+p*=Hkfh;8;
zDDY=U3RqV^*B18-ltRR(o%lOa5Wqdf=fMxieu8@zT5g5*m6VGP`kRo4?e#jAZb`|a
zrNxPFk!k0zTC&F$008^_|MWf$axhJ1>O;7w0`B3uSlN*IJ3*adwUvT>dl{S2t!+h2
zP7Q&WbKHUQU;9-svDu6p57g*