初始提交：全国牛产业大数据中心大屏项目
This commit is contained in:
238
README.md
Normal file
238
README.md
Normal file
@@ -0,0 +1,238 @@
|
||||
# 宁夏智慧畜牧大数据平台 - 官网展示系统
|
||||
|
||||
## 项目概述
|
||||
|
||||
宁夏智慧畜牧大数据平台官网是一个现代化的数据可视化展示系统，基于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设计
|
||||
- 📱 响应式布局支持
|
||||
Reference in New Issue
Block a user