167 lines
6.3 KiB
Markdown
167 lines
6.3 KiB
Markdown
# 全国牛产业数据中心（website 子项目）
|
||
|
||
本仓库为“官网展示系统（website）”子项目，作为整个项目的入口页面与数据大屏，遵循中文文档与目录规范。其余文档请放置于 `docs/` 目录。
|
||
|
||
## 项目简介
|
||
|
||
全国牛产业大数据中心面向全国牛产业上下游（养殖、交易、监管、保险等）数据，提供统一的采集、治理与可视化能力。官网子项目承担门户与数据大屏展示，支持价格行情、预警监测、3D 地图态势与多维指标对比，面向领导查看与公众科普两类场景。
|
||
|
||
核心目标：
|
||
- 打通多源数据（国统局、行业报送、地方平台）并统一口径展示；
|
||
- 以可视化与可交互分析为主，强调直观、准确与性能；
|
||
- 保持 Windows 开发友好与 CentOS 生产部署稳定。
|
||
|
||
## 项目概述
|
||
|
||
- 基于 Vue 3 + Vite 构建的可视化大屏，整合 3D 地图、图表与业务面板。
|
||
- 使用 Three.js 渲染 3D 地球与地图，ECharts 绘制数据图表。
|
||
- 面向 Windows 开发环境与 CentOS 10（64位）部署环境。
|
||
|
||
## 技术栈
|
||
|
||
前端与可视化：
|
||
- `vue@3` 组合式 API + 单文件组件。
|
||
- `vite@7` 开发与构建，快速热更新。
|
||
- `vue-router@4` 页面路由与导航。
|
||
- `pinia@3` 轻量状态管理（如需全局状态时使用）。
|
||
- `echarts@5` + `vue-echarts@7` 图表组件封装（柱状、折线、饼图、环形进度等）。
|
||
- `three@0.179` 3D 场景渲染（地球、地图、光效）。
|
||
- `@jiaminghi/data-view` 大屏装饰与框架组件。
|
||
- 静态资源与纹理：`public/texture` 与 `public/data/map`。
|
||
|
||
工程工具：
|
||
- `eslint` + `eslint-plugin-vue` 代码规范校验；`oxlint` 性能更优的静态检查。
|
||
- `vite-plugin-vue-devtools` 调试与组件检查。
|
||
- `npm-run-all2` 脚本编排；`axios` 数据请求。
|
||
|
||
地图与空间：
|
||
- 项目包含 `three` 地球/地图渲染能力；同时预置 `cesium` 与 `mapbox-gl` 以便后续扩展（当前未强依赖，可选接入）。
|
||
|
||
后续扩展：
|
||
- 管理后台（`admin-system`）、小程序（`mini-program`）、后端服务（`backend`）、官网（`website`）与脚本（`scripts`）模块协同，详见 `docs/` 架构与需求文档。
|
||
|
||
## 目录结构（关键）
|
||
|
||
```
|
||
├── README.md # 项目入口文档（当前文件）
|
||
├── DASHBOARD_COLOR_UPDATE.md# 大屏调色与配色记录
|
||
├── docs/ # 项目文档目录（见下方文档索引）
|
||
├── public/ # 静态资源（地图数据、纹理等）
|
||
├── src/
|
||
│ ├── App.vue # 顶部导航与页面切换
|
||
│ ├── components/
|
||
│ │ ├── Home.vue # 首页数据大屏
|
||
│ │ ├── Map3D.vue # 3D 地图
|
||
│ │ ├── Price.vue # 价格行情页
|
||
│ │ └── Alert.vue # 预警监测页
|
||
│ ├── hooks/ # 组合式 API 工具
|
||
│ ├── assets/ # 静态资源
|
||
│ ├── utils/ # 工具函数
|
||
│ └── main.js # 应用入口
|
||
├── index.html
|
||
├── package.json
|
||
└── vite.config.js
|
||
```
|
||
|
||
## 环境要求
|
||
|
||
- Node.js ≥ 20.19.0（或 ≥ 22.12.0）
|
||
- npm（或 yarn / pnpm）
|
||
|
||
## 本地开发（Windows）
|
||
|
||
```bash
|
||
npm install
|
||
npm run dev
|
||
```
|
||
|
||
- 终端会显示本地预览地址，例如：`http://localhost:5174/`（端口以实际输出为准）。
|
||
- 若端口占用，Vite 会自动切换到可用端口。
|
||
|
||
## 构建与预览
|
||
|
||
```bash
|
||
npm run build # 生产构建，输出到 dist/
|
||
npm run preview # 本地预览 dist/
|
||
```
|
||
|
||
## 部署（CentOS 10 64位）
|
||
|
||
1. 上传 `dist/` 到服务器目录（例如：`/var/www/cattle-datav`）。
|
||
2. Nginx 配置示例：
|
||
|
||
```nginx
|
||
server {
|
||
listen 80;
|
||
server_name your-domain.com; # 修改为你的域名或IP
|
||
root /var/www/cattle-datav; # 指向 dist 目录
|
||
index index.html;
|
||
|
||
location / {
|
||
try_files $uri $uri/ /index.html;
|
||
}
|
||
|
||
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
|
||
expires 1y;
|
||
add_header Cache-Control "public, immutable";
|
||
}
|
||
}
|
||
```
|
||
|
||
3. 重新加载 Nginx：`sudo nginx -s reload`。
|
||
|
||
## 文档索引（docs/）
|
||
|
||
文档均使用 Markdown 编写，并统一放置在 `docs/` 目录。建议按以下文件名组织：
|
||
|
||
- 需求文档：
|
||
- `整个项目需求文档.md`
|
||
- `官网需求文档.md`
|
||
- `后端管理需求文档.md`
|
||
- `管理后台需求文档.md`
|
||
- `小程序app需求文档.md`
|
||
- 架构文档：
|
||
- `整个项目的架构文档.md`
|
||
- `后端架构文档.md`
|
||
- `小程序架构文档.md`
|
||
- `管理后台架构文档.md`
|
||
- 详细设计文档：
|
||
- `数据库设计文档.md`
|
||
- `管理后台接口设计文档.md`
|
||
- `小程序app接口设计文档.md`
|
||
- 开发文档（细分到每个子任务的开发计划）：
|
||
- `后端开发文档.md`
|
||
- `小程序app开发文档.md`
|
||
- `管理后台开发文档.md`
|
||
- `后端管理开发文档.md`
|
||
- 其他：`测试文档.md`、`部署文档.md`、`运维文档.md`、`安全文档.md`、`用户手册文档.md`
|
||
|
||
> 说明：本 README 作为项目入口文档；如需新增或更新详细说明，请在 `docs/` 中对应文件维护。
|
||
|
||
## 项目总结（阶段性）
|
||
|
||
本阶段完成内容：
|
||
- 首页大屏改版：新增“全国牛存栏量”与“全国牛出栏率”年度图表（含折线样式与统一主题配色）。
|
||
- 价格行情入口默认跳转至内蒙古数据页；地图 Top5 来源省份更新为“内蒙古/四川/河北”。
|
||
- 浏览器标签图标（favicon）替换为牛产业主题图标，统一品牌风格。
|
||
|
||
后续计划：
|
||
- 完成官网子项目与管理后台、后端、小程序的数据接口联调；
|
||
- 按 `docs/` 需求与架构文档迭代细分功能与测试用例；
|
||
- 强化安全与运维文档，完善监控与日志采集方案。
|
||
|
||
## 常见问题（FAQ）
|
||
|
||
- 预览地址端口与 README 不一致？以终端输出为准，Vite 会根据占用情况动态选择端口。
|
||
- 图表配色如何统一？参考 `DASHBOARD_COLOR_UPDATE.md`，并在 `Home.vue` 中的各图表 `option` 与数据源颜色字段进行维护。
|
||
- 地图数据加载失败？检查 `public/data/map` 路径与资源权限，确保部署路径与 Nginx `root` 对应。
|
||
|
||
## 许可证
|
||
|
||
本项目采用 MIT 许可证。
|
||
|
||
## 变更记录
|
||
|
||
- 2025-01-18：初始化版本与大屏展示。
|
||
- 2025-01-XX：图表与配色优化、首页标题对齐与功能调整。
|