修改大屏模块

2025-11-26 17:31:42 +08:00
parent 3bfc51c184
commit b0b0a4061c
6 changed files with 650 additions and 516 deletions
--- a/README.md
+++ b/README.md
@@ -1,207 +1,106 @@
-# 宁夏智慧畜牧大数据平台 - 官网展示系统
+# 全国牛产业数据中心（website 子项目）
+
+本仓库为“官网展示系统（website）”子项目，作为整个项目的入口页面与数据大屏，遵循中文文档与目录规范。其余文档请放置于 `docs/` 目录。
+
+## 项目简介
+
+全国牛产业大数据中心面向全国牛产业上下游（养殖、交易、监管、保险等）数据，提供统一的采集、治理与可视化能力。官网子项目承担门户与数据大屏展示，支持价格行情、预警监测、3D 地图态势与多维指标对比，面向领导查看与公众科普两类场景。
+
+核心目标：
+- 打通多源数据（国统局、行业报送、地方平台）并统一口径展示；
+- 以可视化与可交互分析为主，强调直观、准确与性能；
+- 保持 Windows 开发友好与 CentOS 生产部署稳定。

 ## 项目概述

-宁夏智慧畜牧大数据平台官网是一个现代化的数据可视化展示系统，基于Vue 3和Three.js技术栈构建。该系统提供3D地图展示、实时数据监控、养殖场管理和数据大屏可视化等功能，为宁夏地区的智慧畜牧业发展提供数字化支撑。
-
-## 核心功能
-
-### 🗺️ 3D地图可视化
- 基于Three.js的3D地球和地图展示
- 宁夏回族自治区地理边界可视化
- 养殖场地理位置标注和信息展示
- 交互式地图操作（缩放、旋转、点击）
-
-### 📊 数据大屏展示
- 实时数据监控大屏
- 多维度数据图表展示
- 养殖业态势感知
- 预警信息集中展示
-
-### 🏭 养殖场管理
- 养殖场基本信息展示
- 养殖规模和类型统计
- 联系方式和建立时间管理
- 点击弹窗详情查看
-
-### 🎨 现代化UI设计
- 科技感十足的深色主题
- 流畅的动画效果
- 响应式布局设计
- 多页面导航系统
+- 基于 Vue 3 + Vite 构建的可视化大屏，整合 3D 地图、图表与业务面板。
+- 使用 Three.js 渲染 3D 地球与地图，ECharts 绘制数据图表。
+- 面向 Windows 开发环境与 CentOS 10（64位）部署环境。

 ## 技术栈

-### 前端框架
- **Vue 3** - 渐进式JavaScript框架
- **Vite** - 现代化构建工具
- **Vue Router** - 官方路由管理器
- **Pinia** - 状态管理库
+前端与可视化：
+- `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`。

-### 3D可视化
- **Three.js** - 3D图形库
- **CSS2DRenderer** - 2D标签渲染器
- **WebGL** - 硬件加速图形渲染
+工程工具：
+- `eslint` + `eslint-plugin-vue` 代码规范校验；`oxlint` 性能更优的静态检查。
+- `vite-plugin-vue-devtools` 调试与组件检查。
+- `npm-run-all2` 脚本编排；`axios` 数据请求。

-### 数据可视化
- **ECharts** - 数据图表库
- **Vue-ECharts** - Vue集成组件
- **@jiaminghi/data-view** - 数据大屏组件
+地图与空间：
+- 项目包含 `three` 地球/地图渲染能力；同时预置 `cesium` 与 `mapbox-gl` 以便后续扩展（当前未强依赖，可选接入）。

-### 地图服务
- **Mapbox GL** - 地图渲染引擎
- **Cesium** - 3D地球可视化
- **GeoJSON** - 地理数据格式
+后续扩展：
+- 管理后台（`admin-system`）、小程序（`mini-program`）、后端服务（`backend`）、官网（`website`）与脚本（`scripts`）模块协同，详见 `docs/` 架构与需求文档。

-### 开发工具
- **ESLint** - 代码质量检查
- **Oxlint** - 高性能代码检查
- **TypeScript** - 类型定义支持
-
-## 项目结构
+## 目录结构（关键）

 ```
-website/
-├── public/                 # 静态资源
-│   ├── data/              # 地图数据文件
-│   └── texture/           # 纹理贴图
+├── README.md                # 项目入口文档（当前文件）
+├── DASHBOARD_COLOR_UPDATE.md# 大屏调色与配色记录
+├── docs/                    # 项目文档目录（见下方文档索引）
+├── public/                  # 静态资源（地图数据、纹理等）
 ├── src/
-│   ├── components/        # Vue组件
-│   │   ├── Map3D.vue     # 3D地图主组件
-│   │   ├── Home.vue      # 首页组件
-│   │   ├── Alert.vue     # 预警监测组件
-│   │   └── FarmPopup.vue # 养殖场弹窗组件
-│   ├── hooks/            # 组合式API钩子
-│   │   ├── useCoord.js   # 坐标转换
-│   │   ├── useFileLoader.js # 文件加载
-│   │   └── useCSS2DRender.js # 2D渲染
-│   ├── utils/            # 工具函数
-│   ├── assets/           # 静态资源
-│   ├── App.vue          # 根组件
-│   └── main.js          # 应用入口
-├── index.html           # HTML模板
-├── package.json         # 项目配置
-├── vite.config.js       # Vite配置
-└── README.md           # 项目文档
+│   ├── 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 包管理器
+- Node.js ≥ 20.19.0（或 ≥ 22.12.0）
+- npm（或 yarn / pnpm）
+
+## 本地开发（Windows）

-### 安装依赖
 ```bash
 npm install
-```
-
-### 开发环境运行
-```bash
 npm run dev
 ```
-访问 http://localhost:5173 查看应用

-### 生产环境构建
+- 终端会显示本地预览地址，例如：`http://localhost:5174/`（端口以实际输出为准）。
+- 若端口占用，Vite 会自动切换到可用端口。
+
+## 构建与预览
+
 ```bash
-npm run build
+npm run build   # 生产构建，输出到 dist/
+npm run preview # 本地预览 dist/
 ```

-### 预览构建结果
-```bash
-npm run preview
-```
+## 部署（CentOS 10 64位）

-### 代码质量检查
-```bash
-# 运行所有代码检查
-npm run lint
+1. 上传 `dist/` 到服务器目录（例如：`/var/www/cattle-datav`）。
+2. Nginx 配置示例：

-# 仅运行ESLint检查
-npm run lint:eslint
-
-# 仅运行Oxlint检查
-npm run lint:oxlint
-```
-
-## 主要特性
-
-### 3D地图交互
- 鼠标拖拽旋转地球
- 滚轮缩放地图视角
- 点击养殖场标记查看详情
- 平滑的相机动画过渡
-
-### 数据展示
- 实时养殖场数据更新
- 多种图表类型支持
- 响应式数据大屏
- 自定义主题配置
-
-### 用户体验
- 流畅的页面切换动画
- 现代化的UI设计
- 移动端适配支持
- 无障碍访问优化
-
-## 开发指南
-
-### 添加新的养殖场数据
-在 `src/components/Map3D.vue` 文件中的 `farmData` 数组中添加新的养殖场信息：
-
-```javascript
-const farmData = [
-  {
-    id: 6,
-    name: '新养殖场',
-    position: [106.2081, 38.4681], // [经度, 纬度]
-    livestock: 15000,
-    area: '800亩',
-    type: '肉羊养殖',
-    established: '2023年',
-    contact: '张经理 138****1234'
-  }
-];
-```
-
-### 自定义地图样式
-修改 `src/components/Map3D.vue` 中的材质和颜色配置：
-
-```javascript
-// 修改地图边界线颜色
-const lineMaterial = new THREE.LineBasicMaterial({ 
-  color: 0x00ffff, // 青色
-  linewidth: 2 
-});
-
-// 修改养殖场标记颜色
-const markerMaterial = new THREE.MeshBasicMaterial({ 
-  color: 0xff6b35 // 橙色
-});
-```
-
-### 添加新的页面
-1. 在 `src/components/` 目录下创建新的Vue组件
-2. 在 `src/App.vue` 中注册组件和导航
-3. 更新页面组件映射和导航菜单
-
-## 部署说明
-
-### 静态部署
-构建完成后，将 `dist` 目录部署到任何静态文件服务器即可。
-
-### Nginx配置示例
 ```nginx
 server {
    listen 80;
-    server_name your-domain.com;
-    root /path/to/dist;
+    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";
@@ -209,30 +108,59 @@ server {
 }
 ```

-## 贡献指南
+3. 重新加载 Nginx：`sudo nginx -s reload`。

-1. Fork 项目仓库
-2. 创建功能分支 (`git checkout -b feature/AmazingFeature`)
-3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)
-4. 推送到分支 (`git push origin feature/AmazingFeature`)
-5. 创建 Pull Request
+## 文档索引（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 许可证 - 查看 [LICENSE](LICENSE) 文件了解详情。
+本项目采用 MIT 许可证。

-## 联系方式
+## 变更记录

- 项目维护者：开发团队
- 邮箱：dev@example.com
- 项目地址：https://github.com/your-org/nx-smart-livestock
-
-## 更新日志
-
-### v1.0.0 (2025-01-18)
- ✨ 初始版本发布
- 🗺️ 3D地图可视化功能
- 📊 数据大屏展示
- 🏭 养殖场管理系统
- 🎨 现代化UI设计
- 📱 响应式布局支持
+- 2025-01-18：初始化版本与大屏展示。
+- 2025-01-XX：图表与配色优化、首页标题对齐与功能调整。