宁夏智慧畜牧大数据平台 - 官网展示系统
项目概述
宁夏智慧畜牧大数据平台官网是一个现代化的数据可视化展示系统，基于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 包管理器
安装依赖
npm install
开发环境运行
npm run dev
访问 http://localhost:5173 查看应用
生产环境构建
npm run build
预览构建结果
npm run preview
代码质量检查
# 运行所有代码检查
npm run lint
# 仅运行ESLint检查
npm run lint:eslint
# 仅运行Oxlint检查
npm run lint:oxlint
主要特性
3D地图交互
- 鼠标拖拽旋转地球
- 滚轮缩放地图视角
- 点击养殖场标记查看详情
- 平滑的相机动画过渡
数据展示
- 实时养殖场数据更新
- 多种图表类型支持
- 响应式数据大屏
- 自定义主题配置
用户体验
- 流畅的页面切换动画
- 现代化的UI设计
- 移动端适配支持
- 无障碍访问优化
开发指南
添加新的养殖场数据
在 src/components/Map3D.vue 文件中的 farmData 数组中添加新的养殖场信息：
const farmData = [
{
id: 6,
name: '新养殖场',
position: [106.2081, 38.4681], // [经度, 纬度]
livestock: 15000,
area: '800亩',
type: '肉羊养殖',
established: '2023年',
contact: '张经理 138****1234'
}
];
自定义地图样式
修改 src/components/Map3D.vue 中的材质和颜色配置：
// 修改地图边界线颜色
const lineMaterial = new THREE.LineBasicMaterial({
color: 0x00ffff, // 青色
linewidth: 2
});
// 修改养殖场标记颜色
const markerMaterial = new THREE.MeshBasicMaterial({
color: 0xff6b35 // 橙色
});
添加新的页面
- 在
src/components/目录下创建新的Vue组件 - 在
src/App.vue中注册组件和导航 - 更新页面组件映射和导航菜单
部署说明
静态部署
构建完成后，将 dist 目录部署到任何静态文件服务器即可。
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";
}
}
贡献指南
- Fork 项目仓库
- 创建功能分支 (
git checkout -b feature/AmazingFeature) - 提交更改 (
git commit -m 'Add some AmazingFeature') - 推送到分支 (
git push origin feature/AmazingFeature) - 创建 Pull Request
许可证
本项目采用 MIT 许可证 - 查看 LICENSE 文件了解详情。
联系方式
- 项目维护者：开发团队
- 邮箱：dev@example.com
- 项目地址：https://github.com/your-org/nx-smart-livestock
更新日志
v1.0.0 (2025-01-18)
- ✨ 初始版本发布
- 🗺️ 3D地图可视化功能
- 📊 数据大屏展示
- 🏭 养殖场管理系统
- 🎨 现代化UI设计
- 📱 响应式布局支持