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设计
|
|||
|
|
- 📱 响应式布局支持
|