牛只运输管理系统 (PC Cattle Transportation)
项目简介
牛只运输管理系统是一个基于 Vue 3 + TypeScript 开发的现代化前端项目，旨在提供完整的牛只运输管理解决方案。系统集成了运输管理、检疫隔离、设备监控、预警系统等多个功能模块，为牛只运输过程提供全方位的管理和监控支持。
文档索引
技术栈
- 核心框架： 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
项目结构
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/ # 用户管理
主要功能模块
1. 用户管理
- 用户登录/注册
- 权限管理
- 用户信息管理
- 系统用户管理
- 司机管理
2. 运输管理
- 运输计划制定
- 运输路线规划
- 运输状态监控
- 运输数据统计
- 装车管理
- 运单管理
3. 检疫和隔离管理
- 检疫记录管理
- 隔离状态监控
- 检疫证书管理
- 入境检疫管理
4. 硬件设备管理
- 设备状态监控
- 设备数据采集
- 设备维护管理
- 项圈设备管理
- 耳标设备管理
- 主机设备管理
5. 预警系统
- 实时监控预警
- 异常情况报警
- 预警规则配置
- 预警处理跟踪
6. 系统管理
- 系统配置
- 日志管理
- 数据备份
- 岗位管理
- 员工管理
- 租户管理
安装和运行
环境要求
- Node.js >= 16.0.0
- Yarn >= 1.22.0 或 pnpm >= 7.0.0
安装依赖
# 使用 yarn
yarn install
# 或使用 pnpm
pnpm install
开发环境运行
# 使用 yarn
yarn dev
# 或使用 pnpm
pnpm dev
生产环境构建
# 使用 yarn
yarn build
# 或使用 pnpm
pnpm build
代码检查
# 使用 ESLint 检查代码
yarn eslint
# 使用 Prettier 格式化代码
yarn prettier
环境配置
项目包含三个环境配置文件：
.env- 基础配置.env.development- 开发环境配置.env.production- 生产环境配置
请根据实际需求修改相应的环境变量。
开发指南
1. 代码规范
- 使用 ESLint 进行代码检查
- 使用 Prettier 进行代码格式化
- 遵循 TypeScript 类型规范
- 行宽: 150字符
- 缩进: 4个空格
- 使用单引号
- 语句末尾使用分号
2. 组件开发
- 遵循 Vue 3 组合式 API 规范
- 使用 TypeScript 编写组件
- 保持组件的单一职责
- 组件文件使用 .vue 扩展名
3. API 调用
- 统一使用 src/api 目录下的接口函数
- 使用 TypeScript 类型注解
- 处理请求错误和异常情况
4. 状态管理
- 使用 Pinia 进行状态管理
- 按模块组织 store
- 遵循状态管理最佳实践
5. 路由配置
- 使用 Vue Router 进行路由管理
- 路由采用懒加载方式
- 路由配置在 src/router 目录下
部署说明
- 构建生产环境代码：
yarn build
-
将
dist目录下的文件部署到 Web 服务器 -
配置服务器环境变量和反向代理
注意事项
- 确保开发环境和生产环境的配置正确
- 注意 API 接口的跨域配置
- 遵循代码提交规范
- 及时更新依赖包版本
- 做好代码备份和版本控制
贡献指南
- Fork 本仓库
- 创建特性分支
- 提交代码
- 创建 Pull Request