130 lines
4.2 KiB
Markdown
130 lines
4.2 KiB
Markdown
|
# 牛只运输管理系统架构文档
|
|||
|
|
|
|||
|
|
## 1. 系统概述
|
|||
|
|
|
|||
|
|
牛只运输管理系统是一个基于 Vue 3 + TypeScript 开发的现代化前端项目，旨在提供完整的牛只运输管理解决方案。系统集成了运输管理、检疫隔离、设备监控、预警系统等多个功能模块，为牛只运输过程提供全方位的管理和监控支持。
|
|||
|
|
|
|||
|
|
## 2. 技术架构
|
|||
|
|
|
|||
|
|
### 2.1 前端技术栈
|
|||
|
|
|
|||
|
|
- **核心框架**: Vue 3 + TypeScript
|
|||
|
|
- **构建工具**: Vite
|
|||
|
|
- **状态管理**: Pinia
|
|||
|
|
- **路由管理**: Vue Router
|
|||
|
|
- **UI 组件库**: Element Plus
|
|||
|
|
- **HTTP 客户端**: Axios
|
|||
|
|
- **地图集成**: 百度地图（vue-baidu-map-3x）
|
|||
|
|
- **图表库**: ECharts
|
|||
|
|
- **富文本编辑器**: WangEditor
|
|||
|
|
- **其他工具**:
|
|||
|
|
- 视频播放: @liveqing/liveplayer-v3
|
|||
|
|
- 文件处理: file-saver
|
|||
|
|
- 二维码生成: qrcode
|
|||
|
|
- 打印功能: vue3-print-nb
|
|||
|
|
|
|||
|
|
### 2.2 架构模式
|
|||
|
|
|
|||
|
|
- 前后端分离架构
|
|||
|
|
- 单页应用（SPA）
|
|||
|
|
- 模块化开发
|
|||
|
|
- 组件化设计
|
|||
|
|
|
|||
|
|
### 2.3 设计模式
|
|||
|
|
|
|||
|
|
- 组合式 API（Vue 3 Composition API）
|
|||
|
|
- 状态管理使用 Pinia（模块化 Store）
|
|||
|
|
- 路由懒加载（Vue Router）
|
|||
|
|
- 自定义指令（权限控制、复制文本等）
|
|||
|
|
|
|||
|
|
## 3. 项目结构
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
src/
|
|||
|
|
├── api/ # API 接口定义
|
|||
|
|
│ ├── common/ # 通用 API
|
|||
|
|
│ ├── abroad.js # 出境管理
|
|||
|
|
│ ├── device.js # 设备管理
|
|||
|
|
│ ├── hardware.js # 硬件相关
|
|||
|
|
│ ├── isolationQuarantine.js # 隔离检疫
|
|||
|
|
│ ├── killRecord.js # 屠宰记录
|
|||
|
|
│ ├── quarantine.js # 检疫管理
|
|||
|
|
│ ├── shipping.js # 运输管理
|
|||
|
|
│ ├── sys.js # 系统管理
|
|||
|
|
│ └── userManage.js # 用户管理
|
|||
|
|
├── assets/ # 静态资源
|
|||
|
|
├── components/ # 公共组件
|
|||
|
|
├── directive/ # 自定义指令
|
|||
|
|
├── plugins/ # 插件配置
|
|||
|
|
├── router/ # 路由配置
|
|||
|
|
├── store/ # Pinia 状态管理
|
|||
|
|
├── styles/ # 全局样式
|
|||
|
|
├── utils/ # 工具函数
|
|||
|
|
└── views/ # 页面组件
|
|||
|
|
├── earlywarning/ # 预警系统
|
|||
|
|
├── entry/ # 数据录入
|
|||
|
|
├── hardware/ # 硬件管理
|
|||
|
|
├── shipping/ # 运输管理
|
|||
|
|
├── system/ # 系统设置
|
|||
|
|
└── userManage/ # 用户管理
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 4. 核心组件交互
|
|||
|
|
|
|||
|
|
### 4.1 页面组件（views）
|
|||
|
|
|
|||
|
|
页面组件通过路由加载，每个功能模块都有对应的页面组件，负责展示该模块的用户界面和处理用户交互。
|
|||
|
|
|
|||
|
|
### 4.2 公共组件（components）
|
|||
|
|
|
|||
|
|
公共组件被多个页面共享使用，包括布局组件、表单组件、表格组件等。
|
|||
|
|
|
|||
|
|
### 4.3 状态管理（store）
|
|||
|
|
|
|||
|
|
使用 Pinia 进行全局状态管理，包括用户信息、权限信息、路由信息等。
|
|||
|
|
|
|||
|
|
### 4.4 API 接口调用
|
|||
|
|
|
|||
|
|
统一通过 [src/api](src/api) 目录下的接口函数调用后端服务，使用 Axios 进行 HTTP 请求。
|
|||
|
|
|
|||
|
|
### 4.5 自定义指令
|
|||
|
|
|
|||
|
|
通过自定义指令处理 DOM 操作和权限控制等功能。
|
|||
|
|
|
|||
|
|
## 5. 路由架构
|
|||
|
|
|
|||
|
|
系统采用 Vue Router 进行路由管理，分为静态路由和动态路由：
|
|||
|
|
|
|||
|
|
- **静态路由**: 包含登录页、首页等基础页面
|
|||
|
|
- **动态路由**: 根据用户权限从后端获取并动态添加的路由
|
|||
|
|
|
|||
|
|
## 6. 状态管理架构
|
|||
|
|
|
|||
|
|
使用 Pinia 进行状态管理，包含以下 Store 模块：
|
|||
|
|
|
|||
|
|
- **user**: 管理用户登录信息和身份认证
|
|||
|
|
- **permission**: 管理用户权限和路由信息
|
|||
|
|
|
|||
|
|
## 7. 权限控制架构
|
|||
|
|
|
|||
|
|
系统通过自定义指令和路由守卫实现权限控制：
|
|||
|
|
|
|||
|
|
- **路由级权限**: 通过动态路由控制用户可访问的页面
|
|||
|
|
- **按钮级权限**: 通过自定义指令控制用户可操作的按钮
|
|||
|
|
|
|||
|
|
## 8. 数据流架构
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
View(UI) -> Store(State) -> API(Service) -> Backend
|
|||
|
|
^ |
|
|||
|
|
| v
|
|||
|
|
| Database
|
|||
|
|
| |
|
|||
|
|
--------------------------------------------
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 9. 构建和部署架构
|
|||
|
|
|
|||
|
|
- 使用 Vite 进行项目构建
|
|||
|
|
- 支持开发环境和生产环境构建
|
|||
|
|
- 构建产物可部署到任意 Web 服务器
|