docs: 更新项目文档和数据库设计,添加官网相关功能

This commit is contained in:
ylweng
2025-08-20 03:01:14 +08:00
parent 47c67ff704
commit fdc58aa3a2
58 changed files with 37635 additions and 28437 deletions

View File

@@ -2,7 +2,7 @@
## 概述
本文档目录包含了锡林郭勒盟安格斯牛数字化管理平台的所有相关文档。
本文档目录包含了锡林郭勒盟智慧养殖数字化管理平台的所有相关文档。
## 文档列表
@@ -19,6 +19,7 @@
- [商城管理系统需求文档](./requirements/MALL_MANAGEMENT_REQUIREMENTS.md) - 商城管理系统的功能性需求
- [数据中台系统需求文档](./requirements/DATA_PLATFORM_REQUIREMENTS.md) - 数据中台系统的功能性需求
- [AI能力系统需求文档](./requirements/AI_CAPABILITIES_REQUIREMENTS.md) - AI能力系统的功能性需求
- [官网需求文档](./requirements/WEBSITE_REQUIREMENTS.md) - 官网的功能性需求
- [大屏可视化系统需求文档](./requirements/dashboard_requirements.md) - 大屏可视化系统的功能性需求
- [系统集成需求文档](./requirements/SYSTEM_INTEGRATION_REQUIREMENTS.md) - 系统集成需求
- 微信小程序需求文档:
@@ -37,6 +38,8 @@
- [市场交易API](./design/api/trade.md) - 市场交易相关接口
- [数据中台API](./design/api/data-platform.md) - 数据中台相关接口
- [用户中心API](./design/api/user-center.md) - 用户中心相关接口
- [官网API](./design/api/website.md) - 官网相关接口
- [大屏可视化API](./design/api/dashboard.md) - 大屏可视化相关接口
- 微信小程序API:
- [养殖户小程序API](./design/api/miniprograms/farming-app.md) - 养殖户小程序相关接口
- [政务人员小程序API](./design/api/miniprograms/gov-app.md) - 政务人员小程序相关接口
@@ -55,6 +58,7 @@
- [政府监管平台开发计划](./development_plans/government_platform_development_plan.md) - 政府监管平台的详细开发计划
- [活牛交易系统开发计划](./development_plans/cattle_trading_development_plan.md) - 活牛交易系统的详细开发计划
- [商城管理系统开发计划](./development_plans/mall_management_development_plan.md) - 商城管理系统的详细开发计划
- [官网开发计划](./development_plans/website_development_plan.md) - 官网的详细开发计划
- [后端API服务开发计划](./development_plans/backend_api_development_plan.md) - 后端API服务的详细开发计划
- [大屏可视化系统开发计划](./development_plans/dashboard_development_plan.md) - 大屏可视化系统的详细开发计划

View File

@@ -54,41 +54,20 @@
## 3. 系统架构图
```
┌─────────────────────────────────────────────────────────────────────────────────────────────┐
│ 用户端接入层 │
├─────────────────┬─────────────────────────────────────────────────────────────────────────┤
│ 官网首页 │ 专业管理系统 │
│ (HTML5展示) ├─────────────────────────────────────────────────────────────────────────┤
│ │ - 养殖管理系统 (Vue.js 3 + Ant) │
│ │ - 银行监管系统 (Vue.js 3 + Ant) │
│ │ - 保险监管系统 (Vue.js 3 + Ant) │
│ │ - 政府监管平台 (Vue.js 3 + Ant) │
│ │ - 活牛交易系统 (Vue.js 3 + Ant) │
│ │ - 商城管理系统 (Vue.js 3 + Ant) │
│ │ - 大屏可视化系统 (Vue.js 3 + ECharts) │
├─────────────────┼─────────────────────────────────────────────────────────────────────────┤
│ 微信小程序矩阵 │
│ - 牛肉商城小程序 │
│ - 养殖管理小程序 │
│ - 银行监管小程序 │
│ - 保险监管小程序 │
│ - 活牛交易小程序 │
│ - 政府监管小程序 │
│ - 数据中台小程序 │
│ - AI能力小程序 │
├─────────────────┴─────────────────────────────────────────────────────────────────────────┤
│ API服务层 (Node.js) │
├─────────────────────────────────────────────────────────────────────────────────────────────┤
│ 数据处理与存储层 │
├─────────────────────────────────────────────────────────────────────────────────────────────┤
│ 关系数据库(MySQL) │ 缓存系统(Redis) │ 消息队列(RabbitMQ) │ 文件存储(腾讯云) │
├─────────────────────────────────────────────────────────────────────────────────────────────┤
│ 数据分析与展示层 │
├─────────────────────────────────────────────────────────────────────────────────────────────┤
│ 大数据分析引擎 │ 智能预警系统 │ 可视化平台 │ 实时数据推送 │
└─────────────────────────────────────────────────────────────────────────────────────────────┘
```
为了更直观地展示系统架构,我们提供了一个可视化的系统架构图:
![系统架构图](./system_architecture.svg)
图中展示了以下主要层次和组件:
1. **用户接入层**:包括官网首页、专业管理系统和微信小程序矩阵
2. **API服务层**基于Node.js的各个业务模块API服务
3. **数据处理与存储层**:包括关系数据库、缓存系统、消息队列、文件存储和日志存储
4. **数据分析与展示层**:包含大数据分析引擎、智能预警系统、可视化平台和实时数据推送
5. **监控与日志层**:应用性能监控、服务器资源监控、日志收集与分析以及异常告警
6. **部署架构层**:容器化部署、负载均衡、自动化部署和容灾备份
此外,图中还展示了各组件之间的连接关系和数据流向。
## 4. 前端系统架构
@@ -97,6 +76,8 @@
- 响应式设计,适配多种设备
- 突出锡林郭勒盟地域元素和蒙古族文化特色
- 绿色草原主题风格
- 集成Chart.js实现数据可视化展示
- 通过官网API获取新闻资讯和统计数据
### 4.2 专业管理系统
@@ -265,6 +246,64 @@
- JWT身份认证机制
- 微服务架构设计(按业务模块划分)
#### 5.1.1 养殖管理API (`/api/v1/farming`)
- 牛只档案管理
- 饲喂记录
- 防疫管理
- 繁殖管理
#### 5.1.2 金融服务API (`/api/v1/finance`)
- 贷款申请
- 保险购买
- 理赔处理
- 贷款审批
#### 5.1.3 政府监管API (`/api/v1/gov`)
- 防疫任务下发
- 补贴发放
- 检疫监管
- 任务状态跟踪
#### 5.1.4 交易管理API (`/api/v1/trades`)
- 商品发布/下架
- 订单创建/支付
- 物流跟踪
- 订单状态查询
#### 5.1.5 商城管理API (`/api/v1/mall`)
- 商品管理
- 订单处理
- 库存管理
- 用户评价
#### 5.1.6 数据中台API (`/api/v1/data`)
- 数据血缘追踪
- 接口调用分析
- 数据质量监控
#### 5.1.7 AI能力API (`/api/v1/ai`)
- 牛只体况评估
- 饲料配方推荐
- 智能诊断辅助
#### 5.1.8 用户中心API (`/api/v1/users`)
- 用户注册/登录/注销
- 个人信息管理
- 权限控制
#### 5.1.9 官网API (`/api/v1/website`)
- 新闻资讯管理
- 平台数据展示
- 用户留言处理
- 平台信息配置
#### 5.1.10 大屏可视化API (`/api/v1/dashboard`)
- 实时数据展示(支持 WebSocket
- 历史数据查询(支持分页和排序)
- 数据可视化配置(增删改查)
- 告警信息推送(订阅/取消订阅)
- 数据导出CSV/JSON 格式)
### 5.2 数据存储层
- 主数据库MySQL关系型数据库
- 缓存系统Redis用于会话缓存、数据缓存
@@ -317,6 +356,7 @@
│ │ ├── mall/ # 商城管理API
│ │ ├── data-platform/ # 数据中台API
│ │ ├── ai/ # AI能力API
│ │ ├── website/ # 官网API
│ │ └── user-center/ # 用户中心API
│ ├── database/ # 数据库脚本
│ ├── utils/ # 工具函数
@@ -331,6 +371,7 @@
- 所有用户信息统一在政府监管平台进行管理
- 各子系统仅负责登录验证和部分权限校验
- 实现统一的RBAC权限模型
- 通过用户中心API进行统一认证和授权
### 7.2 权限体系
- 基于角色的访问控制RBAC
@@ -353,7 +394,7 @@
## 8. 大屏可视化系统架构
### 8.1 系统概述
大屏可视化系统是本项目的重要组成部分,主要用于展示锡林郭勒盟安格斯牛养殖产业的整体数据、实时监控信息和分析结果。通过直观的图表和数据可视化方式,为管理者提供全面的产业洞察。
大屏可视化系统是本项目的重要组成部分,主要用于展示锡林郭勒盟智慧养殖产业的整体数据、实时监控信息和分析结果。通过直观的图表和数据可视化方式,为管理者提供全面的产业洞察。
### 8.2 技术实现
- **前端框架**: Vue.js 3 + ECharts + 自定义可视化组件
@@ -375,8 +416,8 @@
### 8.4 设计特色
- 融入锡林郭勒盟草原绿色主题
- 采用蒙古族文化元素的UI设计
- 突出安格斯牛品牌形象
- 支持多维度数据钻取和交互
- 通过大屏可视化API获取实时和历史数据
## 9. 系统集成架构
@@ -401,6 +442,9 @@
- CDN加速静态资源
- 浏览器缓存策略
- 虚拟滚动处理大数据量展示
- CDN加速静态资源
- 浏览器缓存策略
- 虚拟滚动处理大数据量展示
### 10.2 后端优化
- 数据库索引优化
@@ -409,17 +453,47 @@
- 负载均衡部署
- 异步任务处理RabbitMQ
## 11. 部署架构
## 11. 系统监控与日志
### 11.1 开发环境
### 11.1 监控系统
- 应用性能监控APM
- 服务器资源监控CPU、内存、磁盘等
- 数据库性能监控
- 网络监控
- 业务指标监控
### 11.2 日志系统
- 统一日志格式
- 日志分级管理DEBUG、INFO、WARN、ERROR
- 日志收集与分析ELK Stack
- 日志存储策略
- 异常日志告警
## 12. 部署架构
### 12.1 开发环境
- 本地开发服务器
- 热重载功能
- 代理配置解决跨域问题
### 11.2 生产环境
### 12.2 生产环境
- Nginx反向代理服务器
- 负载均衡配置
- SSL证书配置
- 日志收集和监控系统
- 容器化部署Docker
- 自动化部署CI/CD
- 自动化部署CI/CD
## 13. 容灾与备份策略
### 13.1 数据备份
- 定时全量备份
- 增量备份机制
- 备份数据异地存储
- 备份恢复演练
### 13.2 系统容灾
- 多节点部署
- 故障自动切换
- 数据同步机制
- 灾难恢复预案

View File

@@ -0,0 +1,234 @@
# 大屏可视化系统 API 文档
## 1. 概述
大屏可视化系统是锡林郭勒盟智慧养殖产业平台的重要组成部分,主要用于展示产业整体数据、实时监控信息和分析结果。该系统通过直观的图表和数据可视化方式,为管理者提供全面的产业洞察。
## 2. 技术架构
- **前端框架**: Vue.js 3 + ECharts + 自定义可视化组件
- **可视化库**: Apache ECharts
- **响应式设计**: 支持多种大屏比例(16:9, 4:3等)
- **实时数据**: WebSocket实时数据推送
- **状态管理**: Pinia
## 3. 功能模块
### 3.1 产业概览
展示整体产业规模、产值、增长率等关键指标
### 3.2 养殖监控
实时展示各牧场的养殖情况、环境数据
### 3.3 金融服务
展示贷款、保险等金融服务数据
### 3.4 交易统计
牛只交易量、价格趋势、区域分布等数据
### 3.5 运输跟踪
牛只运输实时状态和路径展示
### 3.6 风险预警
风险事件展示和预警信息推送
### 3.7 生态指标
环保数据、可持续发展指标展示
### 3.8 政府监管
展示政府监管相关数据和政策执行效果
## 4. API 接口
### 4.1 实时数据接口
#### 获取实时数据
```
GET /api/v1/dashboard/realtime
```
**请求参数**:
-
**响应示例**:
```json
{
"timestamp": "2023-08-19T10:30:00Z",
"total_cattle": 128456,
"total_farms": 1245,
"annual_output_value": 2860000000,
"total_transaction": 1520000000
}
```
#### WebSocket 实时推送
```
WebSocket /api/v1/dashboard/ws
```
**推送数据格式**:
```json
{
"type": "realtime_update",
"data": {
"timestamp": "2023-08-19T10:30:00Z",
"total_cattle": 128456,
"total_farms": 1245,
"annual_output_value": 2860000000,
"total_transaction": 1520000000
}
}
```
### 4.2 历史数据接口
#### 获取历史数据
```
GET /api/v1/dashboard/history
```
**请求参数**:
- `start_date` (string, optional): 开始日期,格式 YYYY-MM-DD
- `end_date` (string, optional): 结束日期,格式 YYYY-MM-DD
- `type` (string, required): 数据类型 (breeding, transaction, transport, etc.)
**响应示例**:
```json
{
"data": [
{
"date": "2023-01",
"value": 8200
},
{
"date": "2023-02",
"value": 9100
}
]
}
```
### 4.3 配置接口
#### 获取可视化配置
```
GET /api/v1/dashboard/config
```
**请求参数**:
-
**响应示例**:
```json
{
"theme": "dark",
"refresh_interval": 30,
"charts": [
{
"id": "breeding_trend",
"type": "line",
"title": "养殖趋势"
}
]
}
```
#### 更新可视化配置
```
PUT /api/v1/dashboard/config
```
**请求体**:
```json
{
"theme": "dark",
"refresh_interval": 30
}
```
**响应示例**:
```json
{
"message": "配置更新成功"
}
```
## 5. 数据格式
### 5.1 产业概览数据
```json
{
"total_cattle": 128456,
"total_farms": 1245,
"annual_output_value": 2860000000,
"total_transaction": 1520000000,
"growth_rate": 5.2
}
```
### 5.2 养殖监控数据
```json
{
"farm_id": "FARM001",
"temperature": 22.5,
"humidity": 65,
"cattle_count": 245,
"feed_consumption": 1200
}
```
### 5.3 金融服务数据
```json
{
"loan_amount": 8600000,
"insurance_policies": 12450,
"claim_amount": 245000,
"approval_rate": 92.5
}
```
### 5.4 交易统计数据
```json
{
"daily_transactions": 125,
"average_price": 18500,
"regional_distribution": [
{
"region": "东乌旗",
"count": 1200
}
]
}
```
## 6. 错误处理
### 6.1 错误响应格式
```json
{
"error": {
"code": "DASHBOARD_001",
"message": "获取数据失败",
"details": "数据库连接异常"
}
}
```
### 6.2 常见错误码
- `DASHBOARD_001`: 数据获取失败
- `DASHBOARD_002`: 参数错误
- `DASHBOARD_003`: 权限不足
- `DASHBOARD_004`: 系统内部错误
## 7. 权限说明
大屏可视化系统接口需要以下权限:
- `dashboard:view`: 查看大屏数据权限
- `dashboard:config`: 配置大屏权限
## 8. 注意事项
1. 大屏可视化系统主要面向内部管理使用,需要相应权限才能访问
2. 实时数据推送通过WebSocket实现需要保持长连接
3. 历史数据支持分页查询,避免一次性加载大量数据
4. 所有接口均采用HTTPS加密传输

176
docs/design/api/website.md Normal file
View File

@@ -0,0 +1,176 @@
# 官网 API 文档 (v1.1.0)
## 1. 接口概述
### 1.1 功能范围
- 新闻资讯管理
- 平台数据展示
- 用户留言处理
- 平台信息配置
### 1.2 基础路径
`/api/v1/website`
### 1.3 权限控制
- 公开接口(无需认证):新闻列表、数据展示等
- 管理接口(需要认证):新闻管理、留言处理等
### 1.4 全局错误码
| 状态码 | 说明 |
|--------|--------------------|
| 400 | 请求参数无效 |
| 401 | 未授权 |
| 403 | 权限不足 |
| 404 | 资源不存在 |
| 500 | 服务器内部错误 |
## 2. 接口明细
### 2.1 获取新闻列表
```
GET /news
```
| 参数 | 类型 | 必填 | 说明 |
|-------------|--------|------|--------------------|
| page | number | 否 | 页码(默认1) |
| limit | number | 否 | 每页数量(默认10) |
| category | string | 否 | 分类筛选 |
#### 响应示例
```json
{
"status": "success",
"data": {
"items": [
{
"id": 1,
"title": "锡林郭勒盟出台畜牧业数字化发展三年规划",
"summary": "规划提出到2027年实现全盟畜牧业数字化覆盖率90%以上",
"category": "政策解读",
"publish_time": "2025-08-15T10:00:00Z",
"image_url": "/images/news-1.jpg"
}
],
"total": 100,
"page": 1,
"limit": 10
}
}
```
### 2.2 获取新闻详情
```
GET /news/{id}
```
| 参数 | 类型 | 必填 | 说明 |
|-------------|--------|------|--------------------|
| id | number | 是 | 新闻ID |
#### 响应示例
```json
{
"status": "success",
"data": {
"id": 1,
"title": "锡林郭勒盟出台畜牧业数字化发展三年规划",
"content": "详细新闻内容...",
"category": "政策解读",
"publish_time": "2025-08-15T10:00:00Z",
"author": "管理员",
"views": 1250
}
}
```
### 2.3 获取统计数据
```
GET /statistics
```
#### 响应示例
```json
{
"status": "success",
"data": {
"livestock_count": {
"cattle": 1200000,
"sheep": 850000,
"horse": 320000,
"camel": 80000
},
"forage_data": {
"production": [12, 19, 15, 22, 28, 35],
"price": [1800, 1750, 1850, 1900, 1950, 2000]
}
}
}
```
### 2.4 提交留言
```
POST /messages
```
| 字段 | 类型 | 必填 | 说明 |
|-------------|--------|------|--------------------|
| name | string | 是 | 姓名 |
| email | string | 是 | 邮箱 |
| phone | string | 否 | 电话 |
| content | string | 是 | 留言内容 |
#### 响应示例
```json
{
"status": "success",
"data": {
"message": "留言提交成功,我们会尽快回复您"
}
}
```
### 2.5 管理员登录
```
POST /auth/login
```
| 字段 | 类型 | 必填 | 说明 |
|-------------|--------|------|--------------------|
| username | string | 是 | 用户名 |
| password | string | 是 | 密码 |
#### 响应示例
```json
{
"status": "success",
"data": {
"token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...",
"expires_in": 3600
}
}
```
### 2.6 创建新闻(管理员)
```
POST /news
```
| 字段 | 类型 | 必填 | 说明 |
|-------------|--------|------|--------------------|
| title | string | 是 | 标题 |
| content | string | 是 | 内容 |
| summary | string | 否 | 摘要 |
| category | string | 是 | 分类 |
#### 响应示例
```json
{
"status": "success",
"data": {
"id": 101,
"title": "新发布的新闻",
"created_at": "2025-08-19T10:00:00Z"
}
}
```

View File

@@ -0,0 +1,188 @@
<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="900" viewBox="0 0 1200 900">
<style>
.layer { fill: #e3f2fd; stroke: #1976d2; stroke-width: 1; }
.subsystem { fill: #f3e5f5; stroke: #7b1fa2; stroke-width: 1; }
.service { fill: #e8f5e9; stroke: #388e3c; stroke-width: 1; }
.component { fill: #fff3e0; stroke: #f57c00; stroke-width: 1; }
.database { fill: #ffebee; stroke: #d32f2f; stroke-width: 1; }
.title { font: bold 16px sans-serif; }
.label { font: 12px sans-serif; }
.arrow { stroke: #666; stroke-width: 2; marker-end: url(#arrowhead); }
</style>
<!-- 定义箭头 -->
<defs>
<marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
<polygon points="0 0, 10 3.5, 0 7" fill="#666" />
</marker>
</defs>
<!-- 用户接入层 -->
<rect x="50" y="20" width="1100" height="120" class="layer" />
<text x="600" y="40" text-anchor="middle" class="title">用户接入层</text>
<!-- 官网首页 -->
<rect x="100" y="60" width="150" height="60" class="subsystem" />
<text x="175" y="90" text-anchor="middle" class="label">官网首页</text>
<!-- 专业管理系统 -->
<rect x="300" y="60" width="500" height="60" class="subsystem" />
<text x="550" y="90" text-anchor="middle" class="label">专业管理系统</text>
<!-- 微信小程序矩阵 -->
<rect x="850" y="60" width="200" height="60" class="subsystem" />
<text x="950" y="90" text-anchor="middle" class="label">微信小程序矩阵</text>
<!-- API服务层 -->
<rect x="50" y="180" width="1100" height="120" class="layer" />
<text x="600" y="200" text-anchor="middle" class="title">API服务层 (Node.js)</text>
<!-- 各个API服务 -->
<rect x="100" y="220" width="100" height="60" class="service" />
<text x="150" y="245" text-anchor="middle" class="label">养殖管理</text>
<text x="150" y="260" text-anchor="middle" class="label">API</text>
<rect x="220" y="220" width="100" height="60" class="service" />
<text x="270" y="245" text-anchor="middle" class="label">金融服务</text>
<text x="270" y="260" text-anchor="middle" class="label">API</text>
<rect x="340" y="220" width="100" height="60" class="service" />
<text x="390" y="245" text-anchor="middle" class="label">政府监管</text>
<text x="390" y="260" text-anchor="middle" class="label">API</text>
<rect x="460" y="220" width="100" height="60" class="service" />
<text x="510" y="245" text-anchor="middle" class="label">交易管理</text>
<text x="510" y="260" text-anchor="middle" class="label">API</text>
<rect x="580" y="220" width="100" height="60" class="service" />
<text x="630" y="245" text-anchor="middle" class="label">商城管理</text>
<text x="630" y="260" text-anchor="middle" class="label">API</text>
<rect x="700" y="220" width="100" height="60" class="service" />
<text x="750" y="245" text-anchor="middle" class="label">数据中台</text>
<text x="750" y="260" text-anchor="middle" class="label">API</text>
<rect x="820" y="220" width="100" height="60" class="service" />
<text x="870" y="245" text-anchor="middle" class="label">AI能力</text>
<text x="870" y="260" text-anchor="middle" class="label">API</text>
<rect x="940" y="220" width="100" height="60" class="service" />
<text x="990" y="245" text-anchor="middle" class="label">用户中心</text>
<text x="990" y="260" text-anchor="middle" class="label">API</text>
<!-- 数据处理与存储层 -->
<rect x="50" y="340" width="1100" height="120" class="layer" />
<text x="600" y="360" text-anchor="middle" class="title">数据处理与存储层</text>
<!-- 数据库 -->
<rect x="100" y="380" width="150" height="60" class="database" />
<text x="175" y="410" text-anchor="middle" class="label">关系数据库 (MySQL)</text>
<!-- 缓存系统 -->
<rect x="300" y="380" width="150" height="60" class="component" />
<text x="375" y="410" text-anchor="middle" class="label">缓存系统 (Redis)</text>
<!-- 消息队列 -->
<rect x="500" y="380" width="150" height="60" class="component" />
<text x="575" y="410" text-anchor="middle" class="label">消息队列 (RabbitMQ)</text>
<!-- 文件存储 -->
<rect x="700" y="380" width="150" height="60" class="component" />
<text x="775" y="410" text-anchor="middle" class="label">文件存储 (腾讯云)</text>
<!-- 日志存储 -->
<rect x="900" y="380" width="150" height="60" class="component" />
<text x="975" y="410" text-anchor="middle" class="label">日志存储 (ES)</text>
<!-- 数据分析与展示层 -->
<rect x="50" y="500" width="1100" height="120" class="layer" />
<text x="600" y="520" text-anchor="middle" class="title">数据分析与展示层</text>
<!-- 大数据分析引擎 -->
<rect x="100" y="540" width="150" height="60" class="component" />
<text x="175" y="570" text-anchor="middle" class="label">大数据分析引擎</text>
<!-- 智能预警系统 -->
<rect x="300" y="540" width="150" height="60" class="component" />
<text x="375" y="570" text-anchor="middle" class="label">智能预警系统</text>
<!-- 可视化平台 -->
<rect x="500" y="540" width="150" height="60" class="component" />
<text x="575" y="570" text-anchor="middle" class="label">可视化平台</text>
<!-- 实时数据推送 -->
<rect x="700" y="540" width="150" height="60" class="component" />
<text x="775" y="570" text-anchor="middle" class="label">实时数据推送</text>
<!-- 大屏可视化系统 -->
<rect x="900" y="540" width="150" height="60" class="subsystem" />
<text x="975" y="570" text-anchor="middle" class="label">大屏可视化系统</text>
<!-- 监控与日志层 -->
<rect x="50" y="660" width="1100" height="120" class="layer" />
<text x="600" y="680" text-anchor="middle" class="title">监控与日志层</text>
<!-- 应用性能监控 -->
<rect x="100" y="700" width="150" height="60" class="component" />
<text x="175" y="730" text-anchor="middle" class="label">应用性能监控</text>
<!-- 服务器资源监控 -->
<rect x="300" y="700" width="150" height="60" class="component" />
<text x="375" y="730" text-anchor="middle" class="label">服务器资源监控</text>
<!-- 日志收集与分析 -->
<rect x="500" y="700" width="150" height="60" class="component" />
<text x="575" y="730" text-anchor="middle" class="label">日志收集与分析</text>
<!-- 异常告警 -->
<rect x="700" y="700" width="150" height="60" class="component" />
<text x="775" y="730" text-anchor="middle" class="label">异常告警</text>
<!-- 部署架构层 -->
<rect x="50" y="780" width="1100" height="100" class="layer" />
<text x="600" y="800" text-anchor="middle" class="title">部署架构层</text>
<!-- 容器化部署 -->
<rect x="100" y="820" width="150" height="60" class="component" />
<text x="175" y="850" text-anchor="middle" class="label">容器化部署</text>
<!-- 负载均衡 -->
<rect x="300" y="820" width="150" height="60" class="component" />
<text x="375" y="850" text-anchor="middle" class="label">负载均衡</text>
<!-- CI/CD -->
<rect x="500" y="820" width="150" height="60" class="component" />
<text x="575" y="850" text-anchor="middle" class="label">自动化部署 (CI/CD)</text>
<!-- 容灾备份 -->
<rect x="700" y="820" width="150" height="60" class="component" />
<text x="775" y="850" text-anchor="middle" class="label">容灾备份</text>
<!-- 连接线 -->
<!-- 用户接入层到API服务层 -->
<line x1="600" y1="140" x2="600" y2="180" class="arrow" />
<!-- API服务层到数据处理与存储层 -->
<line x1="600" y1="300" x2="600" y2="340" class="arrow" />
<!-- 数据处理与存储层到数据分析与展示层 -->
<line x1="600" y1="460" x2="600" y2="500" class="arrow" />
<!-- 数据分析与展示层到监控与日志层 -->
<line x1="600" y1="620" x2="600" y2="660" class="arrow" />
<!-- 监控与日志层到部署架构层 -->
<line x1="600" y1="780" x2="600" y2="820" class="arrow" />
<!-- 数据库到缓存系统 -->
<line x1="250" y1="410" x2="300" y2="410" class="arrow" />
<!-- 缓存系统到消息队列 -->
<line x1="450" y1="410" x2="500" y2="410" class="arrow" />
<!-- 消息队列到文件存储 -->
<line x1="650" y1="410" x2="700" y2="410" class="arrow" />
<!-- 文件存储到日志存储 -->
<line x1="850" y1="410" x2="900" y2="410" class="arrow" />
</svg>

After

Width:  |  Height:  |  Size: 8.4 KiB

View File

@@ -7,11 +7,11 @@
## 2. 技术架构
- **前端框架**: Vue.js 3
- **可视化库**: ECharts + 自定义Vue 3兼容组件替代DataV
- **可视化库**: DataV替代 ECharts
- **构建工具**: Vite
- **状态管理**: Pinia
- **响应式设计**: 支持多种大屏比例(16:9, 4:3等)
- **实时数据**: WebSocket实时数据推送
- **实时数据**: WebSocket 实时数据推送
- **代码规范**: ESLint + Prettier
- **单元测试**: Vitest
@@ -22,15 +22,15 @@
- 整体产业规模展示(牛只总数、牧场数量等关键指标)
- 产值和增长率关键指标(年度产值、增长率趋势图)
- 第2天
- 数据可视化图表实现(饼图展示品种分布、柱状图展示区域分布)
- 实时数据更新机制WebSocket连接建立
- 数据可视化图表实现(使用 DataV 组件展示品种分布、区域分布)
- 实时数据更新机制WebSocket 连接建立)
- 第3天
- 数据钻取功能实现(点击图表可查看详细数据)
- 多维度数据展示(按时间、区域、品种等维度筛选)
### 3.2 养殖监控模块 (3天)
- 第1天
- 各牧场养殖情况展示(地图展示各牧场位置和规模)
- 各牧场养殖情况展示(使用 DataV 地图组件展示各牧场位置和规模)
- 环境数据实时监控(温湿度、氨气浓度等传感器数据)
- 第2天
- 异常情况告警展示(环境异常、健康异常等告警信息)
@@ -89,221 +89,21 @@
## 4. 技术实现要点
- 使用自定义全屏容器组件实现自适应全屏显示
- 使用 DataV 组件实现自适应全屏显示
- 开发装饰组件(如边框、装饰线等)增强视觉效果
- 采用合理的布局结构(如三栏布局)分布数据展示区域
- 开发排名轮播组件展示动态数据
- 采用深色科技风格背景,搭配主题色系(如绿色渐变)体现业务特色
- 添加实时时间显示等实用功能
- 结合ECharts图表实现丰富的数据可视化
- 结合 DataV 图表实现丰富的数据可视化
- 使用自适应容器确保不同分辨率下的正常显示
- 添加窗口大小改变时的重绘功能
- 实现WebSocket实时数据推送机制
- 针对大数据量渲染进行性能优化
## 5. 数据接口对接
## 5. 里程碑
### 5.1 API接口对接计划
- 对接养殖管理相关接口:
- 牛只档案数据接口(获取牛只总数、品种分布等
- 环境监测数据接口(获取实时环境数据
- 饲养记录数据接口(获取饲料消耗、投喂量等数据
- 对接金融服务相关接口:
- 贷款申请数据接口(获取贷款申请数、放款总额等)
- 保险保单数据接口(获取投保数量、保费总额等)
- 理赔数据接口(获取理赔情况)
- 对接交易相关接口:
- 活牛交易数据接口(获取交易量、价格等数据)
- 商城订单数据接口(获取销售数据、热门商品等)
- 对接政府监管相关接口:
- 防疫数据接口(获取防疫完成率等数据)
- 补贴发放数据接口(获取补贴发放情况)
- 对接数据分析相关接口:
- 预警信息接口(获取各类风险预警信息)
- 分析报告接口(获取各类分析报告数据)
### 5.2 数据更新机制
- 实时数据通过WebSocket推送机制实现实时更新
- 定时数据通过定时轮询机制定期更新如每5分钟
- 手动刷新:提供手动刷新按钮供用户主动刷新数据
## 6. 开发阶段规划
### 6.1 阶段一:基础框架搭建 (4天)
- 第1天
- 项目初始化和环境配置
- 移除DataV依赖搭建Vue 3兼容的基础组件库
- 第2天
- 开发基础可视化组件(边框、装饰线等)
- 实现全屏适配方案
- 第3天
- 开发排名轮播组件
- 实现WebSocket连接机制
- 第4天
- 基础数据获取服务封装
- 开发基础布局组件
### 6.2 阶段二:核心功能开发 (18天)
- 第1-3天
- 产业概览模块开发
- 第4-6天
- 养殖监控模块开发
- 第7-8天
- 金融服务模块开发
- 第9-10天
- 交易统计模块开发
- 第11-12天
- 运输跟踪模块开发
- 第13-14天
- 风险预警模块开发
- 第15-16天
- 生态指标模块开发
- 第17-18天
- 政府监管模块开发
### 6.3 阶段三:集成测试与优化 (4天)
- 第1天
- 功能测试和Bug修复
- 第2天
- 性能优化(大数据量渲染优化)
- 第3天
- 视觉效果优化
- 第4天
- 响应式适配测试和部署准备
## 7. 质量保障措施
- 单元测试覆盖率达到80%以上
- 代码审查机制确保代码质量
- 自动化测试保障功能稳定性
- 性能测试确保系统响应速度(<2秒)
- 多种分辨率适配测试
- 实时数据推送功能专项测试
- 大屏设备兼容性测试
## 8. 部署与运维
- 支持Docker容器化部署
- 支持云平台部署
- 日志收集和分析
- 系统监控和告警机制
- 大屏设备适配和部署指导
- 实时数据推送服务监控
- 性能监控和优化建议
## 9. 风险与应对措施
### 9.1 技术风险
- **Vue 3与DataV兼容性问题**
- 风险DataV是为Vue 2设计的在Vue 3中存在兼容性问题
- 应对完全移除DataV依赖使用原生Vue 3组件和ECharts实现可视化功能
### 9.2 性能风险
- **大数据量渲染性能问题**
- 风险大屏系统需要展示大量数据可能导致页面卡顿
- 应对采用虚拟滚动数据分页懒加载等技术优化性能
### 9.3 数据风险
- **实时数据推送稳定性问题**
- 风险WebSocket连接可能中断导致数据更新不及时
- 应对实现断线重连机制提供数据手动刷新功能
## 10. 验收标准
- 所有功能模块按计划完成并正常运行
- 系统能够在不同分辨率的大屏设备上正常显示
- 实时数据推送功能稳定可靠
- 系统响应时间小于2秒
- 通过所有测试用例包括功能测试性能测试和兼容性测试
- 用户界面美观符合设计要求
## 11. 自定义组件开发计划
### 11.1 核心可视化组件 (3天)
- 第1天
- 开发全屏容器组件
- 实现基础边框组件
- 第2天
- 开发装饰线组件
- 实现动态数字组件
- 第3天
- 开发排名轮播组件
- 实现水球图组件
### 11.2 布局组件 (2天)
- 第1天
- 开发栅格布局组件
- 实现响应式容器组件
- 第2天
- 开发卡片组件
- 实现折叠面板组件
### 11.3 工具组件 (1天)
- 第1天
- 开发时间显示组件
- 实现加载状态组件
- 开发提示信息组件
## 12. 性能优化策略
### 12.1 前端性能优化
- 使用虚拟滚动技术处理大量数据展示
- 实施组件懒加载减少初始加载时间
- 采用图片懒加载和压缩优化视觉效果
- 利用localStorage缓存部分非敏感数据减少请求
### 12.2 数据处理优化
- 对大量数据进行分页处理
- 实现数据缓存机制减少重复请求
- 使用防抖和节流技术优化高频操作
- 对复杂计算采用Web Worker处理
### 12.3 网络优化
- 实施WebSocket心跳机制保持连接稳定
- 使用gzip压缩减少数据传输量
- 实现请求合并减少网络请求次数
- 设置合理的缓存策略提高响应速度
## 13. 可视化设计规范
### 13.1 色彩规范
- 主色调草原绿色系#4CAF50, #8BC34A
- 辅助色科技蓝#2196F3)、警示红#F44336
- 背景色深灰#1e1e1e营造科技感
- 文字色白色#FFFFFF和浅灰#E0E0E0
### 13.2 字体规范
- 主要字体Microsoft YaHei, sans-serif
- 数字字体DIN Pro用于关键数据展示
- 字号规范
- 标题24-32px
- 正文14-18px
- 辅助文字12-14px
- 数据展示16-24px
### 13.3 图表规范
- 使用ECharts作为主要图表库
- 统一图表配色方案
- 保持图表风格一致性
- 提供图表交互功能tooltiplegend等
## 14. 安全性考虑
### 14.1 数据安全
- 对敏感数据进行加密传输
- 实施访问权限控制
- 对用户操作进行日志记录
### 14.2 网络安全
- 使用HTTPS协议保障数据传输安全
- 实施CSRF防护措施
- 对输入数据进行验证和过滤
### 14.3 系统安全
- 定期更新依赖库修复安全漏洞
- 实施CORS策略防止跨站攻击
- 对WebSocket连接进行身份验证
- **里程碑1**完成产业概览模块和养殖监控模块6天
- **里程碑2**完成金融服务模块和交易统计模块4天
- **里程碑3**完成运输跟踪模块和风险预警模块4天
- **里程碑4**完成生态指标模块和政府监管模块4天
- **里程碑5**系统联调和测试3天
- **里程碑6**上线部署1天

View File

@@ -0,0 +1,127 @@
# 官网开发计划
## 1. 系统概述
官网是锡林郭勒盟地区智慧养殖产业平台的对外展示窗口主要用于宣传平台功能、展示产业动态、发布新闻资讯以及提供用户访问入口。官网采用纯HTML5 + CSS3 + JavaScript技术栈确保快速加载和良好的兼容性。
## 2. 技术架构
- **前端技术**: HTML5 + CSS3 + JavaScript
- **CSS框架**: Bootstrap 5
- **图标库**: Bootstrap Icons
- **图表库**: Chart.js
- **响应式设计**: 移动优先的响应式布局
- **代码规范**: ESLint + Prettier
- **部署方式**: 静态文件部署
## 3. 页面详细计划
### 3.1 首页 (1周)
- 第1天
- 页面结构搭建和基础样式设计
- 导航栏和页脚实现
- 第2-3天
- 英雄区域开发(包含背景图片、标题、按钮等)
- 核心功能模块展示区域开发
- 第4-5天
- 数据可视化展示区域开发集成Chart.js图表
- 行业动态展示区域开发
- 第6-7天
- 响应式优化和浏览器兼容性测试
- 动画效果和交互优化
### 3.2 导航功能 (2天)
- 第1天
- 顶部导航栏开发(包含响应式折叠菜单)
- 页面内锚点导航功能实现
- 第2天
- 平滑滚动功能开发
- 导航栏滚动效果优化
### 3.3 数据可视化 (2天)
- 第1天
- 牲畜存栏量统计图表开发
- 牧草产量与价格趋势图表开发
- 第2天
- 图表响应式优化
- 图表交互功能完善
### 3.4 新闻资讯 (2天)
- 第1天
- 新闻列表页面开发
- 新闻分类标签实现
- 第2天
- 新闻轮播功能开发
- 查看更多功能实现
### 3.5 用户交互 (2天)
- 第1天
- 悬停效果和动画开发
- 功能卡片交互效果实现
- 第2天
- 响应式设计优化
- 移动端适配测试
### 3.6 页脚信息 (1天)
- 第1天
- 页脚结构开发
- 快速链接和联系方式展示
- 社交媒体链接集成
## 4. 设计要求
### 4.1 视觉设计
- 采用草原绿色主题色调
- 融入蒙古族文化元素
- 简洁现代的设计风格
- 清晰的信息层级结构
### 4.2 交互体验
- 页面加载动画
- 按钮和链接的悬停效果
- 表单输入的实时验证反馈
- 移动端友好的触控交互
## 5. 测试计划
### 5.1 功能测试
- 所有页面链接有效性测试
- 导航功能测试
- 图表显示功能测试
- 新闻轮播功能测试
### 5.2 兼容性测试
- 主流浏览器兼容性测试 (Chrome、Firefox、Safari、Edge)
- 移动端浏览器测试 (iOS Safari、Android Chrome)
- 不同分辨率屏幕适配测试
### 5.3 性能测试
- 页面加载速度测试
- 图片和静态资源优化验证
- 图表渲染性能测试
## 6. 部署计划
### 6.1 部署环境
- Nginx服务器部署
- SSL证书配置
- CDN加速配置
### 6.2 部署流程
1. 代码构建和压缩
2. 静态文件上传至服务器
3. Nginx配置更新
4. 域名解析配置
5. 上线验证测试
## 7. 维护计划
### 7.1 内容维护
- 定期更新新闻资讯
- 更新数据可视化内容
- 优化页面内容和结构
### 7.2 技术维护
- 定期更新依赖库版本
- 安全漏洞修复
- 性能优化

View File

@@ -12,7 +12,7 @@ xlxumu - 锡林郭勒盟地区养殖产业平台
- 构建完整的畜牧业数字化管理生态系统
- 实现养殖过程可视化、监管实时化、交易透明化
- 提升产业链协同效率
- 促进锡林郭勒盟安格斯牛品牌建设
- 促进锡林郭勒盟智慧养殖品牌建设
## 2. 非功能需求

View File

@@ -0,0 +1,78 @@
# 官网需求文档
## 1. 系统概述
官网是锡林郭勒盟地区智慧养殖产业平台的对外展示窗口,主要用于宣传平台功能、展示产业动态、发布新闻资讯以及提供用户访问入口。通过官网,用户可以了解平台的核心价值和服务内容。
## 2. 功能需求
### 2.1 首页展示
- **平台介绍展示**:在英雄区域展示平台的核心功能和价值主张
- **核心功能模块展示**:以卡片形式展示六大核心功能模块(数字化养殖管理、活体抵押贷款、养殖保险监管、政府监管平台、线上活牛交易、优质牛肉商城)
- **数据可视化展示**:以图表形式展示部分公开的产业数据(牲畜存栏量统计、牧草产量与价格趋势)
- **行业动态展示**:展示最新的产业新闻和市场动态
- **联系信息展示**:提供平台联系方式和地址信息
### 2.2 导航功能
- **顶部导航栏**:提供首页、平台功能、数据看板、行业动态、关于我们等页面导航
- **锚点导航**:支持页面内锚点跳转
- **响应式导航**:移动端自适应折叠导航菜单
### 2.3 数据可视化
- **牲畜存栏量统计图表**:以柱状图展示不同牲畜的存栏量数据
- **牧草产量与价格趋势图表**:以折线图展示牧草产量与价格的变化趋势
- **图表交互功能**:支持图表的响应式显示和交互操作
### 2.4 新闻资讯
- **新闻列表展示**:按时间顺序展示平台相关新闻和行业资讯
- **新闻分类标签**:通过标签区分不同类型的新闻(政策解读、市场动态、技术前沿)
- **新闻详情查看**:用户可以点击查看新闻详细内容
- **查看更多功能**:提供查看更多新闻的入口
### 2.5 用户交互
- **平滑滚动**:页面内导航支持平滑滚动效果
- **悬停效果**:功能卡片等元素支持悬停动画效果
- **响应式设计**:适配不同屏幕尺寸的设备
### 2.6 页脚信息
- **平台介绍**:简要介绍平台定位和目标
- **快速链接**:提供主要页面的快速访问链接
- **联系方式**:展示联系地址、电话和邮箱等信息
- **社交媒体链接**提供微信、微博、YouTube等社交媒体链接
- **法律信息**:提供隐私政策和使用条款链接
## 3. 非功能需求
### 3.1 性能需求
- 页面加载时间不超过3秒
- 支持1000+并发用户访问
- 图片和静态资源需要优化加载
### 3.2 兼容性需求
- 兼容所有主流浏览器Chrome、Firefox、Safari、Edge
- 支持移动端浏览和响应式显示
- 适配不同分辨率屏幕
### 3.3 安全需求
- 防止XSS攻击和SQL注入
- 敏感信息传输加密
- 定期安全漏洞扫描
### 3.4 可用性需求
- 界面简洁美观,符合草原文化特色
- 导航清晰,用户可以快速找到所需信息
- 提供友好的错误提示信息
## 4. 用户角色
### 4.1 普通访客
- 可以浏览官网所有公开内容
- 可以查看新闻资讯
- 可以了解平台功能介绍
- 可以查看公开的统计数据
### 4.2 管理员
- 可以发布和管理新闻资讯
- 可以更新平台介绍内容
- 可以管理合作伙伴信息
- 可以更新数据可视化内容

View File

@@ -2,157 +2,92 @@
## 1. 系统概述
大屏可视化系统是锡林郭勒盟安格斯牛养殖产业平台的重要组成部分,主要用于展示锡林郭勒盟地区安格斯牛养殖产业的整体数据、实时监控信息和分析结果。通过直观的图表和数据可视化方式,为管理者提供全面的产业洞察,支持决策制定。
大屏可视化系统是锡林郭勒盟智慧养殖产业平台的重要组成部分,主要用于展示锡林郭勒盟地区智慧养殖产业的整体数据、实时监控信息和分析结果。通过直观的图表和数据可视化方式,为管理者提供全面的产业洞察,支持决策制定。
## 2. 功能需求
### 2.1 产业概览模块
- **整体产业规模展示**:展示牛只总数、牧场数量等关键指标
- **产值和增长率关键指标**:展示年度产值、增长率趋势图
- **数据可视化图表**:通过饼图展示品种分布、柱状图展示区域分布
- **实时数据更新机制**通过WebSocket实现数据实时更新
- **数据钻取功能**:支持点击图表查看详细数据
- **多维度数据展示**:支持按时间、区域、品种等维度筛选
- **整体产业规模展示**:展示牛只总数、牧场数量等关键指标(数据来源:`/api/v1/dashboard/overview`,数据库表:`industry_overview`
- **产值和增长率关键指标**:展示年度产值、增长率趋势图数据刷新频率每5秒一次数据来源`/api/v1/dashboard/growth`
- **数据可视化图表**:通过 DataV 组件展示品种分布、区域分布等(支持动态缩放和拖拽)
- **实时数据更新机制**:通过 WebSocket 实现数据实时更新`ws://<host>/api/v1/dashboard/realtime`
- **数据钻取功能**:支持点击图表查看详细数据(弹窗展示,含数据导出按钮)
- **多维度数据筛选**:支持按时间、区域、品种等维度筛选(交互:下拉选择器 + 确认按钮)
### 2.2 养殖监控模块
- **各牧场养殖情况展示**:通过地图展示各牧场位置和规模
- **环境数据实时监控**:展示温湿度、氨气浓度等传感器数据
- **异常情况告警展示**:展示环境异常、健康异常等告警信息
- **历史数据趋势分析**:展示环境数据历史趋势图
- **牛只健康状态监控**:展示健康、亚健康、患病牛只数量统计
- **饲养记录统计**:展示饲料消耗、投喂量趋势
- **各牧场养殖情况展示**:通过 DataV 地图组件展示各牧场位置和规模(数据来源:`/api/v1/dashboard/farms`,数据库表:`farm_locations`
- **环境数据实时监控**:展示温湿度、氨气浓度等传感器数据刷新频率每3秒一次数据来源`/api/v1/dashboard/environment`
- **异常情况告警**:展示环境异常、健康异常等告警信息(交互:点击告警跳转到详情页)
- **历史数据趋势分析**:展示环境数据历史趋势图支持时间范围选择1天/7天/30天
- **牛只健康状态监控**:展示健康、亚健康、患病牛只数量统计(数据来源:`/api/v1/dashboard/health`
- **饲养记录统计**:展示饲料消耗、投喂量趋势(交互:悬停显示具体数值)
### 2.3 金融服务模块
- **贷款统计展示**:展示贷款申请数、放款总额、还款情况
- **保险统计展示**:展示投保数量、保费总额、理赔情况
- **风险数据展示**:展示高风险贷款、理赔率高的牧场等
- **金融服务趋势分析**:展示贷款和保险业务增长趋势
- **贷款统计展示**:展示贷款申请数、放款总额、还款情况(数据来源:`/api/v1/dashboard/loans`,数据库表:`loan_records`
- **保险统计展示**:展示投保数量、保费总额、理赔情况(数据来源:`/api/v1/dashboard/insurance`
- **风险数据展示**:展示高风险贷款、理赔率高的牧场等(交互:点击跳转到风险管理页)
- **金融服务趋势分析**:展示贷款和保险业务增长趋势(支持按季度/年度切换)
### 2.4 交易统计模块
- **牛只交易量统计**:展示日交易量、月交易量、年度交易量
- **价格趋势和区域分布展示**:展示价格热力图、区域价格对比
- **交易类型分析**:分析活牛交易、牛肉制品销售等
- **交易排行榜**:展示热门牧场、活跃交易员等
- **牛只交易量统计**:展示日交易量、月交易量、年度交易量(数据来源:`/api/v1/dashboard/transactions`,数据库表:`transaction_logs`
- **价格趋势和区域分布**:展示价格热力图、区域价格对比(交互:点击区域高亮显示)
- **交易类型分析**:分析活牛交易、牛肉制品销售等(数据来源:`/api/v1/dashboard/transaction-types`
- **交易排行榜**:展示热门牧场、活跃交易员等(交互:点击名称查看详情)
### 2.5 运输跟踪模块
- **牛只运输实时状态展示**:展示运输路线、当前位置、预计到达时间
- **运输车辆监控**:展示车辆状态、司机信息等
- **运输异常告警**:展示延误、偏离路线等异常情况
- **运输效率分析**:展示运输时间、成本等统计
- **牛只运输实时状态**:展示运输路线、当前位置、预计到达时间(数据来源:`/api/v1/dashboard/transport`,数据库表:`transport_logs`
- **运输车辆监控**:展示车辆状态、司机信息等(交互:点击车辆查看实时视频)
- **运输异常告警**:展示延误、偏离路线等异常情况(数据来源:`/api/v1/dashboard/transport-alerts`
- **运输效率分析**:展示运输时间、成本等统计支持导出为Excel
### 2.6 风险预警模块
- **风险事件展示**:展示疫病风险、市场风险、自然灾害风险等
- **预警信息推送和展示**:分类展示不同级别预警
- **风险趋势分析**:展示各类风险的历史趋势和预测
- **风险地图**:按区域展示风险分布
- **风险事件展示**:展示疫病风险、市场风险、自然灾害风险等(数据来源:`/api/v1/dashboard/risks`
- **预警信息推送**:分类展示不同级别预警(交互:点击预警订阅通知)
- **风险趋势分析**:展示各类风险的历史趋势和预测(支持自定义时间范围)
- **风险地图**:按区域展示风险分布(交互:点击区域查看详情)
### 2.7 生态指标模块
- **环保数据展示**:展示碳排放、水资源使用、饲料消耗等
- **可持续发展指标展示**:展示草畜平衡、生态效益等
- **环保趋势分析**:展示环保指标的历史变化趋势
- **生态效益评估**:展示经济效益与生态效益的平衡分析
- **环保数据展示**:展示碳排放、水资源使用、饲料消耗等(数据来源:`/api/v1/dashboard/eco`
- **可持续发展指标**:展示草畜平衡、生态效益等(交互:悬停显示计算方式)
- **环保趋势分析**:展示环保指标的历史变化趋势(支持同比/环比对比)
- **生态效益评估**:展示经济效益与生态效益的平衡分析(数据来源:`/api/v1/dashboard/eco-balance`
### 2.8 政府监管模块
- **监管数据总览**:展示防疫完成率、补贴发放情况等
- **合规性检查结果展示**:展示合规牧场比例、违规事件统计等
- **政策执行效果分析**:展示政策实施后的数据变化
- **监管报告生成和展示**:展示自动生成的监管报告可视化
- **监管数据总览**:展示防疫完成率、补贴发放情况等(数据来源:`/api/v1/dashboard/gov`
- **合规性检查结果**:展示合规牧场比例、违规事件统计等(交互:点击违规事件查看整改记录)
- **政策执行效果分析**:展示政策实施后的数据变化(支持多政策对比)
- **监管报告生成**:展示自动生成的监管报告可视化支持PDF导出
## 3. 用户角色与权限
## 3. 非功能需求
### 3.1 政府监管人员
- 可以查看所有模块的数据和图表
- 可以导出数据报告
- 可以配置部分展示参数
### 3.1 性能需求
- **响应时间**:页面加载 ≤1秒数据查询 ≤2秒
- **数据更新延迟**:实时数据 ≤3秒WebSocket推送
- **并发支持**同时展示10个图表DataV优化渲染
- **大数据量**支持10万条数据流畅渲染虚拟滚动
### 3.2 系统管理员
- 拥有所有功能权限
- 可以配置系统参数
- 可以管理用户权限
### 3.2 兼容性需求
- **屏幕比例**适配16:9、4:3等常见比例
- **分辨率**支持1080p至8K
- **浏览器**Chrome、Firefox、Safari、Edge最新版
## 4. 非功能需求
### 3.3 安全需求
- **传输加密**HTTPS + WSSWebSocket Secure
- **日志审计**操作日志保留6个月
- **防护措施**防SQL注入、XSS攻击
### 4.1 性能需求
- 系统响应时间小于2秒
- 数据更新延迟不超过5秒
- 支持同时展示多个数据图表
- 大数据量渲染优化,确保流畅显示
### 3.4 可用性需求
- **可用性**99.9% SLA
- **错误提示**:中英文双语错误信息
- **异常处理**自动重试3次 + 降级展示
- **全屏模式**:一键切换全屏/窗口模式
### 4.2 兼容性需求
- 支持多种大屏比例(16:9, 4:3等)
- 适配不同分辨率的大屏设备
- 支持主流浏览器Chrome、Firefox、Safari、Edge
### 3.5 可维护性需求
- **架构**:微服务设计(模块解耦)
- **监控**集成Prometheus + Grafana
- **日志**结构化日志ELK收集
### 4.3 安全需求
- 用户身份认证和权限控制
- 数据传输加密HTTPS
- 操作日志记录和审计
- 防止SQL注入和XSS攻击
### 4.4 可用性需求
- 系统全年可用性达到99.9%
- 提供友好的错误提示信息
- 实现异常处理和恢复机制
- 支持全屏显示模式
### 4.5 可维护性需求
- 微服务架构设计,降低模块间耦合
- 完善的日志记录和监控
- 支持配置文件与代码分离
- 提供完善的API文档
## 5. 技术要求
### 5.1 前端技术栈
- **框架**Vue.js 3
- **可视化库**ECharts
- **构建工具**Vite
- **状态管理**Pinia
- **响应式设计**:支持多种大屏比例
### 5.2 实时数据
- **数据推送**WebSocket实时数据推送
- **数据更新**:支持实时、定时和手动刷新
### 5.3 设计规范
- **主题风格**:深色科技风格背景
- **色彩搭配**:草原绿色系为主,科技蓝为辅
- **字体规范**:清晰易读的字体设计
- **布局结构**:合理的数据展示区域分布
## 6. 数据接口需求
### 6.1 养殖管理相关接口
- 牛只档案数据接口(获取牛只总数、品种分布等)
- 环境监测数据接口(获取实时环境数据)
- 饲养记录数据接口(获取饲料消耗、投喂量等数据)
### 6.2 金融服务相关接口
- 贷款申请数据接口(获取贷款申请数、放款总额等)
- 保险保单数据接口(获取投保数量、保费总额等)
- 理赔数据接口(获取理赔情况)
### 6.3 交易相关接口
- 活牛交易数据接口(获取交易量、价格等数据)
- 商城订单数据接口(获取销售数据、热门商品等)
### 6.4 政府监管相关接口
- 防疫数据接口(获取防疫完成率等数据)
- 补贴发放数据接口(获取补贴发放情况)
### 6.5 数据分析相关接口
- 预警信息接口(获取各类风险预警信息)
- 分析报告接口(获取各类分析报告数据)
## 7. 部署要求
### 7.1 部署环境
- 支持Docker容器化部署
- 支持云平台部署
- 支持本地服务器部署
### 7.2 监控需求
- 实现系统运行状态监控
- 提供性能监控指标
- 支持异常告警功能
- 日志收集和分析
## 4. 术语表
- **数据钻取**:通过点击图表查看详细数据的交互方式
- **虚拟滚动**:动态加载大数据量的优化技术
- **SLA**:服务等级协议(可用性指标)