aiotagro/xlxumu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

156
docs/design/ARCHITECTURE.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 系统容灾
- 多节点部署
- 故障自动切换
- 数据同步机制
- 灾难恢复预案

234
docs/design/api/dashboard.md Normal file
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"
}
}
```

188
docs/design/system_architecture.svg Normal file
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>
Side by Side

After

Width:  |  Height:  |  Size: 8.4 KiB