# 宁夏智慧畜牧大数据平台 - 官网展示系统

## 项目概述

宁夏智慧畜牧大数据平台官网是一个现代化的数据可视化展示系统，基于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设计
- 📱 响应式布局支持