gzt
/
A8000
1
0
Fork 1
Code Issues Pull Requests Projects Releases Wiki Activity
A8000
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
19 Commits
1 Branch
0 Tags
2.2 MiB
 
 
 
Tree: 0bb7f6b83e
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '0bb7f6b83e'
${ noResults }
A8000/A8000前端项目交接文...

18 KiB
Raw Blame History

A8000前端项目交接文档

一.项目概述

本项目是A8000设备控制系统的前端部分，基于Vue3+Typescript+Vite开发

1.1 技术栈：

  • 框架：Vue3
  • 语言：Typescript
  • 构建工具：Vite
  • 状态管理：Pinia
  • UI组件库：ElementPlus+自定义组件
  • 网络请求：Axios
  • 实时通信：原生Websocket
  • 路由管理：Vue Router History

1.2 项目目录：

A8000-project/
├── public/                 # 公共静态资源
│   └── favicon.ico
│
├── src/
│   ├── assets/            # 静态资源
│   │   ├── Index/        # 按模块划分的图片资源
│   │   │   ├── History/
│   │   │   ├── Regular/
│   │   │   └── left.svg
│   │   └── logo.svg
│   │
│   ├── components/        # 全局公共组件
│   │   ├── ErrorModal.vue    # 错误提示弹窗
│   │   └── Loading.vue       # 加载组件
│   │
│   ├── pages/             # 页面组件
│   │   └── Index/
│   │       ├── components/   # Index模块的组件
│   │       │   ├── MainComponent.vue  #小缓冲液组件
│   │       │   ├── MoveLiquidArea.vue #移液头区
│   │       │   └── SpttingPlates.vue  #反应板区
│   │       │   └── IDCardInfo.vue  #id卡弹窗组件
│   │       │   └── InfoBar.vue  #反应板和小缓冲液底部项目信息组件(可复用)
│   │       │   └── Plate.vue  #反应板组件
│   │       │   └── ProjectSelector.vue  #急诊部分项目选择组件(复用组件)
│   │       │   └── spttingPlate.vue  #反应板渲染(复用组件)
│   │       │   └── TabBar.vue  
│   │       │   └── Time.vue  #首页底部时间组件
│   │       │
│   │       ├── Regular/      # 常规操作页面
│   │       │   ├── Consumables.vue  # 耗材管理
│   │       │   ├── Emergency.vue    # 急诊处理
│   │       │   ├── Regular.vue      # 常规操作主页
│   │       │   └── Running.vue      # 运行页面
│   │       ├── Settings/      		# 设备设置页面
│   │       │   ├── Device.vue  	# 设备信息
│   │       │   ├── LIS.vue    		# LIS(待迭代)
│   │       │   ├── Users.vue      	 # 用户管理
│   │       │   └── Version.vue      # 版本管理
│   │       ├── TestTube/      # 试管页面
│   │       │   ├── ChangeUser.vue  # 编辑患者信息
│   │       ├── utils/      		# 首页封装的一些方法
│   │       │   ├── generateSampleBackground.ts 	# 根据样本项目渲染
│   │       │   ├── getBloodTypeLabel.ts    # 血液类型转换
│   │       │   └── processTubeSettings.ts  # 根据项目id转换项目信息
│   │       │
│   │       └── Index.vue    # Index模块主页
│   │   └── Login/
│   │   └── NotFound/
│   │
│   ├── router/            # 路由配置
│   │   └── index.ts
│   │
│   ├── services/          # API服务
│   │   └── Index/
│   │       └── index.ts   # API接口定义
│   │
│   ├── store/            # Pinia状态管理
│   │   ├── consumablesStore.ts  # 耗材状态
│   │   ├── deviceStore.ts       # 设备状态
│   │   ├── emergencyStore.ts    # 急诊状态
│   │   ├── device.ts    	# 设备状态
│   │   ├── settingTestTube.ts    # 试管设置
│   │   ├── test-tube.ts    # 试管信息
│   │   └── index.ts
│   │
│   ├── types/            # TypeScript类型定义
│   │   └── Index/
│   │       ├── Consumables.ts   # 耗材相关类型
│   │       └── index.ts         # 中转站
│   │       └── ...*.ts         # 通用类型
│   │
│   ├── utils/            # 工具函数
│   │   ├── axios.ts          # Axios配置
│   │   ├── errorHandler.ts   # 错误处理
│   │   └── getServerInfo.ts  # 服务器信息
│   │   └── fuzzyMatchBySequence.ts  # 模糊匹配算法
│   │   └── formDate.ts  # 日期格式化工具
│   │
│   ├── websocket/        # WebSocket相关
│   │   └── socket.ts     # WebSocket配置
│   │
│   ├── App.vue          # 根组件
│   ├── main.ts          # 入口文件
│   ├── eventBus.ts      # 事件总线
│   └── style.css        # 全局样式
│
├── .env.development     # 开发环境配置
├── .env.production      # 生产环境配置
├── .gitignore          # Git忽略文件
├── index.html          # HTML模板
├── package.json        # 项目依赖
├── tsconfig.json       # TypeScript配置
├── vite.config.ts      # Vite配置
└── README.md          # 项目说明

二. 关键功能模块

2.1登录

  • 该部分没什么核心的点，在用户登录后会在本地存储用户信息，包含账户名密码权限等等，会在首页底部状态栏渲染用户名
  • RBAC权限管理：不同权限能进的页面是不一样的，具体到了按钮级别，比如Usr是进不去设置页面的，点击设置会让用户选择重定向到首页。

2.2 首页

  • 这是自定义组件，通过传入不同的参数生成不同大小的耗材盘；定义在src/pages/Index/components/BallGrid.vue 可传入想要的宽度，每一行的个数，列数，小球总数，小球激活时的颜色来动态生成

    • 该组件的逻辑难点在于维护一个激活队列来让小球取消激活时达到预期效果，从左上角向右下角依次取消；确保队列操作的原子性。
    • 在小球取消时做了动画过渡，让它不那么突兀。

2.2.1首页核心逻辑

耗材错误处理
  • 在点击加载耗材按钮后，调用/api/v1/app/consumableScan/scanConsumables接口进行耗材扫描，这个接口是阻塞的，大概30多秒，扫描完成后后端才会返回数据和扫描结果，这里需要先弹窗显示一下扫描的结果，通过后端返回的scanReports进行显示，渲染一个表格，字段有通道序号，项目名称，批次id，扫描结果，是报错还是pass，报错要显示具体错误(这个后端也返回了)
  • 遗留的问题，目前测试接口返回的扫描信息仍然是report(需要返回state，待沟通确认)，渲染是按照的State渲染的，不过由于接口返回值的原因，目前弹窗会显示全是未知错误
耗材渲染
  • 扫描结束后，弹窗显示扫描结果，然后在扫描结果无误并且用户点击确认后，才会进行数据的渲染；前端的loading动画也是在扫描返回数据后自动结束的，无需定时。

2.2.2 试管架部分

  • 点击添加试管架，后端会添加一个默认配置的试管架
  • 点击某个样本，会弹窗出项目配置信息，配置好后点击确定，会发送配置试管信息的请求，携带选择的项目和血液类型；
  • 点击编辑患者信息，会进入页面，通过uuid获取到当前点击的试管架，并渲染信息
  • 在该页面可以配置用户id和样本条形码（后续应该要加入实时通信，通过机器扫描返回的信息来渲染）

2.2.3孵育盘页面

  • 通过Websocket 获取当前孵育盘的状态，进行渲染；
  • 配置了一个计时器函数，可以计算每个反应板的反应时间，在完成时渲染已完成字样
  • 急诊项目会插入孵育盘列表中，并显示急诊图标，进行计时，在计时结束会弹窗显示反应结果

2.3 实时通信

  • websocket
    • 内部维护了一个事件队列，在需要接受消息时，注册一个处理消息的函数，需严格保证类型安全，通过在处理消息的函数内的参数data来接受数据进行渲染
    • 在页面使用时创建一个ws实例，传入想要获取数据的接口地址即可，例如/api/v1/app/ws/state,先通过getServerInfo这个方法获取wsUrl，直接传入createWebSocket函数即可；
    • 为避免内存泄露，在离开页面时要及时的注销处理函数；
    • 断线重连机制

2.4 全局错误处理

  • 二次封装了Axios，在拦截器中，通过监听响应的错误码，通过事件总线的方式，在请求报错时全局弹窗，并显示错误信息和栈错误信息；
  • 事件监听：通过Websocket配置监听event事件，在设备上报事件时在首页底部状态栏显示，配置在Index页面的handleAppEvent方法里
  • 封装一些弹窗组件，通过动态传入图标，标题和内容，并监听确认和取消事件来处理事件。

2.5 历史记录页面

  • 配置了无限滚动逻辑，在用户划到底部时，加载第二页数据。在没有数据时显示提示；
  • 功能按钮方面，在用户没有选择数据的时候，会弹窗提醒，只有用户有选中数据时才会执行后续操作
  • 在点击表格内容时，会弹窗显示该条信息的详情，包含反应结果，设备版本信息等等。
  • 搜索和重置暂时禁用

2.6 设置页面

  • 通过之前封装的formData方法，在用户点击日期栏目的格式化形式时，会传入函数，返回对应格式的时间，渲染在第一行
  • 语言栏切换触发对应接口，暂时没有韩语
  • 注销时间的逻辑有待商榷，接口已经调通

2.7 用户管理

三.开发规范

  • 注释要清晰详细
  • 使用Typescript类型声明保证类型安全
  • 组件使用Composition API
  • 变量名大驼峰命名
  • 组件大驼峰
  • css使用less预处理器
  • 使用async / await 处理异步
  • Props 必须使用类型声明

四.部署相关

4.1开发环境

npm install 或 npm i 安装版本依赖 要求node版本不得低于18

4.2生产环境

npm run build 
npm run preview #vite 自带的生产测试 或者dist拷贝到nginx目录通过nginx代理也可以
scp -r  -P 22 dist/* firefly@192.168.198.240:/app/appresource/static/app   # 部署命令，要求和设备在同一局域网下  结构：scp -r -P 22   要拷贝的文件 用户名@服务器ip:/目标目录
vnc: 47.92.195.73:22069 #vnc连接

4.3 环境变量配置

  • VITE_API_URL=192.168.1.114接口所需的ip地址，端口在getServerInfo配置
  • VITE_USE_MOCK=false是否开启mock

五.待优化问题

5.1首页：

  • 耗材扫描后的结果弹窗里，不论返回什么值都会显示未知错误

  • 在点击反应板修改反应板耗材时，之前后端沟通的是将GROUP 改为 CG ，但后端代码枚举类型依然是GROUP，详情见public enum ConsumableGroup类型

  • {
  "workState": "IDLE",
  "errorFlag": false,//不要关心
  "fatalErrorFlag": false,
  "ecodeList": [],//不要关心
  "pending": false,//如果为true,表明正在切换状态，前端需要显示蒙板
  "$dataType": null
}  //这个pendding的蒙板暂时没实现

5.2 id卡信息

  • 在点击全选删除后，全选的状态不对
  • 未配置虚拟键盘

5.3 急诊页面

  • 在store目录里有一个device module，里面存储了设备的工作状态，在添加急诊的时候，必须要在设备是暂停状态才可以添加。需要对暂停设备和开始设备相关接口调用的地方，添加一些对设备工作状态的变更逻辑；
  • 急诊页面项目选择这部分，再没有数据的时候只会显示0/25，但依然可以选中；

5.4试管架页面

  • 在单击样本时有个弹窗，用于显示该样本所配置的项目，和佟总商量怎么优化一下
  • 目前项目选择配置弹窗的原因是，当试管架数量多的时候，项目选择这个组件会将页面撑破；但用弹窗有个问题就是，用户无法多选样本再进行配置；待商榷。。
  • 编辑患者信息的整体颜色对比度可能需要优化；
  • 也许在激活试管架后或者设备启动后，应该禁止用户再进行配置，
  • 在编辑完患者信息后，再次进入时，没有渲染上

5.5项目选择组件

  • 点击自动，传递后端后会报错，无法识别自动

5.6 孵育盘页面

  • 孵育盘样式待优化，当项目名称和条码过长时，可能会影响布局

5.7 设备控制

  • 点击开始测试后，后续设备的相关逻辑未配置

5.8 mock相关

  • 一些接口的mock还未配置

5.9 构建相关

  • 目前构建到生产环境后，运行中页面会白屏，发现是资源读取的路径不对，正常来说应该是assets/…*js ,但实际加载Running的时候是Index/regular/assets

5.10 迭代相关

  1. LIS和版本管理页面未开发，后续版本迭代（UI没出），故相关接口未配置

六.联系方式

如有问题，请联系：

-开发者：郭周童

-电话：17736139193

-邮箱：gongcon19319@163.com

七.辅助文档

八. 接口联调部分

1.反应记录

  • 打印记录 /api/v1/app/reactionResult/printfRecord：已完成
  • 获取历史记录(带参数) /api/v1/app/reactionResult/getRecords：已完成
  • 获取全部记录 /api/v1/app/reactionResult/getAllRecords：已完成
  • 删除记录 /api/v1/app/reactionResult/deleteRecord：已完成
  • 删除所有记录 /api/v1/app/reactionResult/deleteAllRecords：未配置，多选时会循环调用单删接口

2.os相关操作

  • 关闭蜂鸣器-/api/v1/app/osCtrl/stopBeepWarning：已完成
  • 打开蜂鸣器 /api/v1/app/osCtrl/startBeepWarning：end
  • 关机(阻塞)：/api/v1/app/osCtrl/shutdown：未配置
  • 获取设备IP /api/v1/app/osCtrl/getIp：未配置
  • 获取应用版本 /api/v1/app/osCtrl/getInfo：未配置
  • 获取蜂鸣器状态 /api/v1/app/osCtrl/getBeepWarningStatus ：未配置

3.急诊试管：

  • 提交紧急样本设置 /api/v1/app/emergencyTube/addNew ：已完成

4.设备状态：

  • 获取<试管架>状态 /api/v1/app/deviceState/getTubeHolderState :已完成
  • 获取<传感器>状态 /api/v1/app/deviceState/getSensorState 已完成
  • 获取<光学模组>状态 /api/v1/app/deviceState/getOptScanModuleState ：已完成
  • 获取<孵育盘>的状态 /api/v1/app/deviceState/getIncubationPlate 已完成
  • 获取<急诊位>状态 /api/v1/app/deviceState/getEmergencyTubePosState 已完成
  • 获取主流程工作状态 /api/v1/app/deviceState/getDeviceWorkState 已完成

5.初始化：

  • 获取初始化状态 /api/v1/app/deviceInit/getDeviceInitedTaskState ：已完成
  • 初始化 /api/v1/app/deviceInit/initDevice 已完成
  • 验证初始化 /api/v1/app/deviceInit/check 已完成

6.设备控制

  • 停止工作：/api/v1/app/deviceCtrl/stopWork ：已完成
  • 开始：/api/v1/app/deviceCtrl/startWork ：已完成
  • 暂停：/api/v1/app/deviceCtrl/pauseWork 已完成
  • 继续： /api/v1/app/deviceCtrl/continueWork ;已完成

7.耗材设置：

  • 设置Tip数量 /api/v1/app/consumablesMgr/setTipNum 待测试(参数变更)
  • 设置耗材数量 /api/v1/app/consumablesMgr/setCounsumableNum ：待测试 同上
  • 获取<耗材>状态 /api/v1/app/consumablesMgr/getConsumablesState 已完成

8.耗材扫描：

  • 单组耗材扫描：/api/v1/app/consumableScan/scanOneGroupConsumables 之前和佟总商量说这个接口可以取消掉，直接调用扫描全部的即可 故未配置
  • 扫描耗材(阻塞接口，耗时大概30多秒) /api/v1/app/consumableScan/scanConsumables 已完成

9.配置试管

  • 配置试管/api/v1/app/appTubeSettingMgr/updateTubeSetting 已完成
  • 设置<试管架>激活状态 /api/v1/app/appTubeSettingMgr/updateActiveState 已完成
  • 删除<试管架>配置 /api/v1/app/appTubeSettingMgr/removeTubeHolderSetting 已完成
  • 添加<试管架>配置 /api/v1/app/appTubeSettingMgr/newTubeHolderSetting 已完成
  • 获取试管架配置 /api/v1/app/appTubeSettingMgr/getSettings 已完成

10.a8k相关

  • 读取设备支持的所有项目 /api/v1/app/a8kProjectInfo/getAll 已完成
  • 保存已挂载的A8k项目信息卡 /api/v1/app/a8kProjectCard/saveMountedCardInfo 已完成
  • 读取已挂载的A8k项目信息卡 /api/v1/app/a8kProjectCard/readMountedCardInfo 未调用
  • 获取A8k项目信息(Page) /api/v1/app/a8kProjectCard/get 已完成
  • 删除A8k项目信息 /api/v1/app/a8kProjectCard/delete 已完成
  • 删除所有A8k项目信息 /api/v1/app/a8kProjectCard/deleteAll 未调用，循环调用单删的接口来删除多选

11 用户相关：

  • 用户登出 ：/api/v1/app/Usr/unlogin 未配置
  • 修改用户权限 /api/v1/app/Usr/modifyUsrRole 待迭代
  • 修改用户密码 /api/v1/app/Usr/modifyUsrPwd 已完成
  • 修改用户名称 /api/v1/app/Usr/modifyUsrAccount 未配置
  • 用户登录 /api/v1/app/Usr/login 已完成
  • 获取用户列表 /api/v1/app/Usr/getUsrlist 已完成
  • 获取当前用户 /api/v1/app/Usr/getLoginUsr 未配置(意义？)
  • 删除用户 /api/v1/app/Usr/delUser 已完成
  • 用户添加 /api/v1/app/Usr/addUser 已完成

12 系统设置

  • 设置设备温度 /api/v1/app/AppSetting/setTemperature 未配置**
  • 设置语言 /api/v1/app/AppSetting/setLanguage 已完成
  • 设置LIS类型 /api/v1/app/AppSetting/setLISType
  • 设置LIS串口波特率 /api/v1/app/AppSetting/setLISSerialBaudrate
  • 设置LIS协议 /api/v1/app/AppSetting/setLISProtocol
  • 设置LIS端口 /api/v1/app/AppSetting/setLISNetPort
  • 设置LISIP /api/v1/app/AppSetting/setLISNetIp
  • 设置LIS是否自动上报报告 /api/v1/app/AppSetting/setLISAutoExport
  • 设置LIS接口 /api/v1/app/AppSetting/setLIFIf
  • 设置自动打印报告 /api/v1/app/AppSetting/setAutoPrint 已完成
  • 设置自动登出 /api/v1/app/AppSetting/setAutoLogout
  • 获取系统设置 /api/v1/app/AppSetting/getAppSettings 已完成