239 lines
5.6 KiB
Markdown
239 lines
5.6 KiB
Markdown
# 宁夏智慧畜牧大数据平台 - 官网展示系统
|
||
|
||
## 项目概述
|
||
|
||
宁夏智慧畜牧大数据平台官网是一个现代化的数据可视化展示系统，基于Vue 3和Three.js技术栈构建。该系统提供3D地图展示、实时数据监控、养殖场管理和数据大屏可视化等功能，为宁夏地区的智慧畜牧业发展提供数字化支撑。
|
||
|
||
## 核心功能
|
||
|
||
### 🗺️ 3D地图可视化
|
||
- 基于Three.js的3D地球和地图展示
|
||
- 宁夏回族自治区地理边界可视化
|
||
- 养殖场地理位置标注和信息展示
|
||
- 交互式地图操作（缩放、旋转、点击）
|
||
|
||
### 📊 数据大屏展示
|
||
- 实时数据监控大屏
|
||
- 多维度数据图表展示
|
||
- 养殖业态势感知
|
||
- 预警信息集中展示
|
||
|
||
### 🏭 养殖场管理
|
||
- 养殖场基本信息展示
|
||
- 养殖规模和类型统计
|
||
- 联系方式和建立时间管理
|
||
- 点击弹窗详情查看
|
||
|
||
### 🎨 现代化UI设计
|
||
- 科技感十足的深色主题
|
||
- 流畅的动画效果
|
||
- 响应式布局设计
|
||
- 多页面导航系统
|
||
|
||
## 技术栈
|
||
|
||
### 前端框架
|
||
- **Vue 3** - 渐进式JavaScript框架
|
||
- **Vite** - 现代化构建工具
|
||
- **Vue Router** - 官方路由管理器
|
||
- **Pinia** - 状态管理库
|
||
|
||
### 3D可视化
|
||
- **Three.js** - 3D图形库
|
||
- **CSS2DRenderer** - 2D标签渲染器
|
||
- **WebGL** - 硬件加速图形渲染
|
||
|
||
### 数据可视化
|
||
- **ECharts** - 数据图表库
|
||
- **Vue-ECharts** - Vue集成组件
|
||
- **@jiaminghi/data-view** - 数据大屏组件
|
||
|
||
### 地图服务
|
||
- **Mapbox GL** - 地图渲染引擎
|
||
- **Cesium** - 3D地球可视化
|
||
- **GeoJSON** - 地理数据格式
|
||
|
||
### 开发工具
|
||
- **ESLint** - 代码质量检查
|
||
- **Oxlint** - 高性能代码检查
|
||
- **TypeScript** - 类型定义支持
|
||
|
||
## 项目结构
|
||
|
||
```
|
||
website/
|
||
├── public/ # 静态资源
|
||
│ ├── data/ # 地图数据文件
|
||
│ └── texture/ # 纹理贴图
|
||
├── 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 # 项目文档
|
||
```
|
||
|
||
## 快速开始
|
||
|
||
### 环境要求
|
||
- Node.js >= 20.19.0 或 >= 22.12.0
|
||
- npm 或 yarn 包管理器
|
||
|
||
### 安装依赖
|
||
```bash
|
||
npm install
|
||
```
|
||
|
||
### 开发环境运行
|
||
```bash
|
||
npm run dev
|
||
```
|
||
访问 http://localhost:5173 查看应用
|
||
|
||
### 生产环境构建
|
||
```bash
|
||
npm run build
|
||
```
|
||
|
||
### 预览构建结果
|
||
```bash
|
||
npm run preview
|
||
```
|
||
|
||
### 代码质量检查
|
||
```bash
|
||
# 运行所有代码检查
|
||
npm run lint
|
||
|
||
# 仅运行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;
|
||
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";
|
||
}
|
||
}
|
||
```
|
||
|
||
## 贡献指南
|
||
|
||
1. Fork 项目仓库
|
||
2. 创建功能分支 (`git checkout -b feature/AmazingFeature`)
|
||
3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)
|
||
4. 推送到分支 (`git push origin feature/AmazingFeature`)
|
||
5. 创建 Pull Request
|
||
|
||
## 许可证
|
||
|
||
本项目采用 MIT 许可证 - 查看 [LICENSE](LICENSE) 文件了解详情。
|
||
|
||
## 联系方式
|
||
|
||
- 项目维护者：开发团队
|
||
- 邮箱：dev@example.com
|
||
- 项目地址：https://github.com/your-org/nx-smart-livestock
|
||
|
||
## 更新日志
|
||
|
||
### v1.0.0 (2025-01-18)
|
||
- ✨ 初始版本发布
|
||
- 🗺️ 3D地图可视化功能
|
||
- 📊 数据大屏展示
|
||
- 🏭 养殖场管理系统
|
||
- 🎨 现代化UI设计
|
||
- 📱 响应式布局支持
|