基于Vue 3的医疗器械检测系统开发：从设备台账到报告生成-北京尧图网络

简介基于 Vue 的医疗器械检测项目设计源码面向 Vue 开发者及医疗器械信息化项目设计人员提供可复用的组件化前端工程参考。资源共 118 个文件压缩包约 440KB包含 44 个 Vue 组件、39 个 JavaScript 脚本、11 个 SVG 图形、6 个 SCSS 样式表以及 YML 配置、JSON 数据、PNG 图片、Markdown 文档等类型。Vue 组件划分页面模块JavaScript 实现交互逻辑SCSS 统一视觉风格YML 与 JSON 支撑环境配置和数据交换目录结构清晰从用户界面到配置管理均遵循现代 Web 开发实践适合系统学习组件化开发、状态处理与多环境配置。项目已附带说明文档可快速了解安装、配置与运行方式。目前已有 90 人学习下载对医疗器械检测系统开发具有实践参考价值。1. 基于 Vue 的医疗器械检测项目源码先从设备台账写起检测机构的系统列表里设备台账往往比订单管理更容易让页面失控。一台灭菌器要记录制造商、型号、出厂编号、计量校准日期、下次检定日期还要把检测任务关联到这台设备上报告才能写清楚“用哪台设备、按哪个标准做的检测”。这类项目如果继续用多页 jQuery 维护页面之间传参靠 localStorage三个月后新同事很难接手。基于 Vue 的医疗器械检测项目设计源码常见的起点就是先用组件把事情拆开设备、任务、报告各占一个模块再通过 Vue Router 的路由参数和接口层把它们串成一条可追溯的单据流。这里要讲的是 Vue 在这个领域的工程分层、核心页面实现、检测视频回放以及打包阶段的坑适合要交付或接手这类源码的前后端工程师。2. 医疗器械检测 Vue 源码的工程与数据层先把路由和接口约定死设备、任务、报告三个实体一旦拆开第一个要决定的就是工程用什么架子。建议按团队最熟的组合走常见做法是 Vue 3 Vite Element Plus Pinia检测项目页面以表格、表单、详情页为主不需要太重的前端基础设施。选择 Vue 3 的理由主要是组合式 API 能让“设备到期提醒”这种逻辑集中在一个函数里比 Vue 2 的 options API 更便于复制到下一个项目后端语言不强求Spring Boot、Go、Node 都能对接前端只认接口返回的 JSON。下面从选型、路由、状态三件事把数据层定死后面加页面才不会各写各的。2.1 先评估 Vue 2 还是 Vue 3检测项目更看重组合复用有的检测机构现有系统还在用 Vue 2 Element UI如果只是加一个设备台账模块继续用 Vue 2 是合理的。如果是重新设计源码建议直接上 Vue 3。选型时比较常讨论的点列成表格看一下对比项Vue 3 ViteVue 2 Webpack组合式 API支持检测逻辑可以直接抽成 hooks需要 vue/composition-api维护成本偏高TypeScript一等公民报告模板和检测项目字段有类型提示需要额外配置老项目接入成本高构建速度冷启动快中大型检测报告页面也能接受依赖越多越慢HMR 在大的 report 表单页会卡生态Element Plus、ant-design-vue 都是新版本Element UI 已进入维护模式问题只修不新增特性这个表格想要说明的结论是不是 Vue 3 一定好。如果团队长期维护 Vue 2 的业务基座而且这次只是给医疗器械检测项目补一个报告预览页保持同一个框架比换新框架更能降低回归风险。反过来只要是从零搭设计源码选 Vue 3 能让“设备到期状态、任务流转、报告模板”这类纯前端逻辑更容易被后面的人接手也更好在面试里讲清楚为什么这么定。2.2 安装依赖与 Vue Router 路由参数设计用 URL 把单据串起来工程创建之后先装路由、状态管理和 UI 库。安装前先确认 Node 版本能跑到 Vite 的要求通常需要 Node 18 以上否则依赖下载完会出现奇怪的 EINVALIDTAGNAME 错误。命令如下npm create vuelatest med-device-web cd med-device-web npm install npm install axios pinia element-plus vue-router4这段命令先通过 create-vue 脚手架生成基础工程再安装运行和构建需要的最小依赖。vue-router 的版本要和 Vue 3 匹配这里写 vue-router4element-plus 直接引正式包不要用 alpha 版本否则表格组件的列宽设置在不同小版本之间容易变换行会出现参差不齐的布局。路由参数怎么设计直接影响报告和任务之间的跳转是否好追溯。常见做法是把业务主键放在 URL 参数里页面刷新后还能根据参数恢复现场const routes [ { path: /, component: Layout, children: [ { path: devices, name: DeviceList, component: () import(/views/device/DeviceList.vue) }, { path: devices/:id, name: DeviceDetail, component: () import(/views/device/DeviceDetail.vue), props: true }, { path: tasks/:taskId, name: TaskDetail, component: () import(/views/task/TaskDetail.vue), props: true }, { path: report/:taskId, name: Report, component: () import(/views/report/ReportPage.vue), props: true }, ], }, ]这段配置说明了两个点第一任务详情页从列表跳过来页面组件里用route.params.taskId或者props.taskId拿到任务号再去请求检测项目、样品信息、设备信息第二报告地址直接挂任务号方便后续把 PDF 链接复制给质量负责人对方不用从头找。如果某个检测任务下面包含多个样品建议再加:sampleId但不要把一个任务的全部数据都放到 query 里URL 会很长而且审计时容易把敏感字段暴露在浏览器历史记录中。路由配置完后页面里的跳转一般写成router.push({ name: TaskDetail, params: { taskId: row.id } })这里用 name 而不是 path是为了后续接口改造如果不改名字只改路由的 path页面跳转代码就不必跟着改。检测项目经常要调整菜单层级这种写法能少改一批router.push。2.3 接口层与 Pinia 状态让检测数据在组件外先成型医疗器械检测项目的核心页面基本是“列表查出来点进去看详情提交以后变状态”。直接在每个页面里写 axios 请求会导致同一个设备接口被三四个人复制后端字段一变就要全文替换。这里给一个接口工厂的常见写法import axios from axios const service axios.create({ baseURL: import.meta.env.VITE_API_BASE, timeout: 15000, }) service.interceptors.request.use((config) { const token localStorage.getItem(med_token) if (token) { config.headers.Authorization Bearer ${token} } return config }) service.interceptors.response.use( (response) response.data, (error) { if (error.response?.status 401) { window.location.href /login } return Promise.reject(error) } ) export default service这里的baseURL从环境变量读是因为检测机构的内网部署环境和云端环境往往不是一个域名测试环境的报告接口可能直接挂在办公室内网 IP 上。拦截器在这里统一处理 token报告导出和视频回放也需要带上同一个身份信息后面做鉴权时就不用每个业务模块单独判断。需要维护设备、任务、报告多份状态时用 Pinia 比较轻。下面用一个检测任务的 store 表示状态流转import { defineStore } from pinia export const useTaskStore defineStore(task, { state: () ({ currentTask: null, status: PENDING, }), actions: { async loadTask(taskId) { const data await api.get(/tasks/${taskId}) this.currentTask data this.status data.status return data }, async submit(taskId, payload) { await api.post(/tasks/${taskId}/submit, payload) this.status SUBMITTED }, }, })store 的意义在于检测任务的“提交中”“已退回”“已审核”等状态会被设备页、报告页、任务列表页同时读取如果各自维护一份本地变量一个动作更新后其他页面还要刷新才能看到最新结果。通过 Pinia 把当前任务放到 store 里报告页的computed能直接根据status控制按钮是否可点击。把路由参数、接口层、状态管理这三件事定死等于给项目划好了边界后面加“导出记录”“批量送检”都只是往这层里塞方法不会让页面互相拉着状态跑。3. 医疗器械检测核心页面源码设备台账、任务流转、报告生成在工程骨架之上接下来写三个最能体现检测业务特点的页面设备台账、检测任务、检测报告。这三个页面不是简单 CRUD关键在于状态计算、流转控制、打印样式三件事。下面每个小节都给出可以直接放进src/views目录的代码片段并说明改哪些字段能适配不同的检测项目。3.1 设备台账页面把校准到期做成 Vue 计算样式设备台账的核心字段通常包括设备编号、名称、型号、计量检定有效期以及最近一次检定日期。一个常见需求是“距离校准过期不足 30 天的设备要在列表里标红”。这个逻辑放在前端computed里最直观因为后端返回的nextCalDate字段一旦有值前端可以根据当天日期实时刷新不必每天跑定时任务改数据库。template el-table :datadueSoonDevices row-keyid border el-table-column propdeviceNo label设备编号 width120 / el-table-column propname label设备名称 min-width180 / el-table-column propnextCalDate label下次检定日期 width140 template #default{ row } span :class{ cal-warning: isCalDue(row.nextCalDate) } {{ row.nextCalDate }} /span /template /el-table-column el-table-column label操作 width160 template #default{ row } el-button sizesmall clickgoDetail(row.id)查看/el-button /template /el-table-column /el-table /template script setup import { computed } from vue import { useRouter } from vue-router import { useDeviceStore } from /stores/device const router useRouter() const deviceStore useDeviceStore() const dueSoonDevices computed(() deviceStore.devices.filter((d) d.nextCalDate) ) function isCalDue(dateStr) { const days (new Date(dateStr).getTime() - Date.now()) / 86400000 return days 0 days 30 } function goDetail(id) { router.push({ name: DeviceDetail, params: { id } }) } /script style scoped .cal-warning { color: #d63200; font-weight: 600; } /style这段代码里dueSoonDevices对设备列表做了第一层过滤只保留有下次检定日期的设备isCalDue计算当前日期和检定日期相差天数落在 0 到 30 天范围内就加红色警示样式。scoped样式是 Vue 单文件组件里最常见的样式隔离方式让.cal-warning只作用于当前设备的表格单元格不会影响到报告页里同名的样式。实际使用的时候如果检测项目里还包括“设备当前是否在维修中”的字段在过滤条件里加上d.status ACTIVE就行。不要在template里写超过三行的复杂表达式把判断逻辑放到 script 里的函数后面加“逾期 90 天转成灰色”之类的规则会更快。3.2 检测任务状态机用状态管理避免“已完成还能提交”的按钮检测任务的典型流程是待接收、已分配、检测中、已完成、已退回。这个状态流转用页面里的v-if控制容易出现漏洞设备列表页跳过来的用户如果手动改 URL 路径结果页可能看到和状态不一致的按钮。把状态机放进 store 是更稳的写法。任务状态对应的操作可以用下面这张表做校验状态允许执行的操作按钮权重PENDING转 ASSIGNEDprimaryASSIGNED转 IN_PROGRESS、RETURNEDprimary / warningIN_PROGRESS转 COMPLETED、RETURNEDsuccess / warningRETURNED转 ASSIGNEDprimaryCOMPLETED无disabledexport const TASK_FLOW { PENDING: { next: [ASSIGNED] }, ASSIGNED: { next: [IN_PROGRESS, RETURNED] }, IN_PROGRESS: { next: [COMPLETED, RETURNED] }, RETURNED: { next: [ASSIGNED] }, COMPLETED: { next: [] }, }再配合一个触发操作的 actionasync function changeStatus(target) { await api.post(/tasks/${taskId}/status, { target }) taskStore.status target }这里TASK_FLOW用对象字面量描述每个状态允许流转到哪些状态。前端只做提示真正的状态变更以后端接口返回为准页面拿到 200 后才修改本地status所以不会出现接口失败但按钮已经置灰的情况。任务列表页的每一行操作区建议用v-for把availableActions渲染成按钮而不是手写固定两个按钮。这样新增“待复核”状态时只需要改TASK_FLOW和接口返回逻辑列表页不用动这也是源码交付后最常被扩展的一个点。3.3 报告生成页A4 打印样式和检测结果字段绑定检测报告是这个项目的最终交付物前端的价值体现在预览和打印。报告页直接从路由参数拿到任务号再请求任务关联的检测项目、设备、样品和结果。template div classreport-sheet h2{{ report.taskName }}/h2 table trtd检测设备/tdtd{{ report.device.name }}/td/tr trtd依据标准/tdtd{{ report.standard }}/td/tr tr v-foritem in report.items :keyitem.code td{{ item.name }}/td td{{ item.result }} {{ item.unit }}/td /tr /table /div /template script setup import { computed } from vue const props defineProps({ taskId: { type: String, required: true }, }) const report computed(() reportStore.getByTaskId(props.taskId)) /script style scoped .report-sheet { width: 210mm; min-height: 297mm; margin: 0 auto; padding: 12mm; font-size: 14px; background: #fff; } .report-sheet table { width: 100%; border-collapse: collapse; } .report-sheet td { border: 1px solid #333; padding: 6px 8px; } /style这段报告样式用210mm和297mm直接按 A4 纸的物理尺寸来设置浏览器打印时不会因为屏幕分辨率而改变列宽。v-for渲染检测项目行保证报告包含的项目顺序和后端返回一致。如果检测报告需要盖电子签章可以在页面底部放一个img组件但要跟后端约定签章图片的接口要带防伪参数不能直接写一个公开的 PNG 地址。报告页的打印建议用window.print()然后在全局样式里加上media print把侧边导航和顶栏隐藏掉。这里有一个常见做法是把报告做成独立路由比如/print/:taskId专门给浏览器打印和 PDF 导出用避免主布局里的菜单干扰分页。4. 检测录像回放Vue 播放 m3u8 视频流的组件封装医疗器械检测项目里经常需要把内窥镜、显微镜或者操作台录像作为检测过程的留痕。这类录像如果直接传 mp4 文件文件大、加载慢遇到网络差的时候回放卡顿。常见的解决方案是把视频切成 ts 切片用 m3u8 索引文件让前端根据带宽选择码率。在 Vue 项目里播放 m3u8需要在前端引入一个能解析 HLS 协议的库最常用的是 hls.js下面是一个可以直接用的 Vue 组件。4.1 先区分点播和直播再决定播放地址怎么传m3u8 既能做直播也能做点播。检测机构的录像回放绝大多数是点播也就是说文件已经在设备端或服务端存好拿到文件索引就能播。这里要把两种来源和对应处理方式分清楚视频来源地址特征前端处理要点设备点播回放返回record/m3u8/xxx.m3u8一次性播放地址可用 hls.js 解码内网摄像头直播返回live/stream.m3u8一般需要带鉴权参数按需加载历史转码文件返回video/xxx/index.m3u8路径由后端拼接前端不拼盘如果是在内网摄像头直播页地址往往需要带?token参数这里要先把完整地址传给播放器不能只传不带参数的stream.m3u8。直播流断流后 hls.js 会触发bufferStalledError前端要做自动重试而不是让用户自己刷新页面点播流则不需要频繁重试因为任务回放文件不会中途消失。4.2 封装 InspectionVideo 组件处理 m3u8 播放新建src/components/InspectionVideo.vue把播放器的创建和销毁都收在这个文件里。这样任务详情页、报告页、设备录像页共用同一个组件不用每个页面都写一遍 hls.js 的初始化代码。template video refvideoEl controls playsinline classinspection-video/video /template script setup import Hls from hls.js import { ref, onMounted, onBeforeUnmount, watch } from vue const props defineProps({ src: { type: String, required: true }, }) const videoEl ref(null) let hls null function setupPlayer(url) { if (hls) hls.destroy() if (!url) return if (Hls.isSupported()) { hls new Hls({ maxBufferLength: 30, manifestLoadingTimeOut: 5000, }) hls.on(Hls.Events.ERROR, (_event, data) { if (data.fatal data.type Hls.ErrorTypes.NETWORK_ERROR) { hls?.startLoad() } }) hls.loadSource(url) hls.attachMedia(videoEl.value) } else if (videoEl.value.canPlayType(application/vnd.apple.mpegurl)) { // Safari 原生支持 m3u8不走 hls.js videoEl.value.src url } } watch(() props.src, (url) setupPlayer(url)) onMounted(() setupPlayer(props.src)) onBeforeUnmount(() hls?.destroy()) /script组件里几个参数的含义要解释清楚maxBufferLength控制缓存长度单位是秒回放场景设置为 30 秒可以避免频繁请求切片manifestLoadingTimeOut是 m3u8 索引文件请求的超时时间单位是毫秒检测机构内网如果视频服务器响应慢超过 5 秒会触发网络错误事件事件里调用hls.startLoad()做一次重试。Hls.isSupported()判断当前浏览器是否支持 MSESafari 的特殊分支交给原生播放器处理避免在 Safari 上出现黑屏。使用组件时页面只需要传视频地址InspectionVideo :srcvideoUrl /如果因为 token 过期导致 m3u8 请求返回 401hls.js 的 error 回调会反复报networkError。这时候不要在前端硬拼 token正确做法是在初始化的请求阶段把鉴权参数加在 URL 的 query 上例如stream.m3u8?tokenxxx。另外如果视频服务器没响应跨域限制hls.js 加载切片时控制台会报跨域错误这时需要后端在Access-Control-Allow-Origin头里放行前端域名单纯换一个播放器解决不了问题。4.3 把回放组件挂到报告页延迟加载视频报告页里如果想展示“检测过程视频”可以在这个位置放一个折叠面板默认收起点击“查看检测录像”时才加载视频地址。这样做可以避免报告页面一次性拉多条视频索引导致列表滚动卡顿。el-collapse el-collapse-item title查看检测录像 InspectionVideo v-ifvideoLoaded :srcvideoUrl / el-button clickloadVideo加载录像/el-button /el-collapse-item /el-collapse这里在点击后再设置videoLoaded组件内部的watch才会触发setupPlayer如果提前把空的videoUrl传给组件需要在setupPlayer里增加空字符串的 return避免组件在mounted阶段报loadSource错误。这个延迟加载的思路也适用于检测报告页其他多媒体资源比如“现场照片”和“原始数据截图”统一放在折叠面板里可以明显降低首屏渲染时间。5. 源码打包验证解决 Vue 打包后布局异常与 history 路由 404源码写完之后进入打包验证。这个阶段最常见的问题有两个一个是npm run build之后打开页面白屏或者样式错乱另一个是路由直接访问二级地址变成 404。前者多半是publicPath配置和静态资源路径不对后者是 vue-router 的 history 模式只配了前端没有让 Nginx 把不存在的路径回退到index.html。5.1 打包后布局异常先查这三项现象检查项处理方式页面白屏控制台资源 404vite.config.js里的base配置部署在子路径时设置base: /med/不能留默认/样式有图片和字体丢失CSS 里的 url 是否用了绝对路径样式里的资源路径尽量用/assets引入不要手写/images路由跳转正常刷新后 404Nginx location 是否配置 try_files配置try_files $uri $uri/ /index.html;如果部署到服务器根目录base可以不用改但如果系统是挂在一个 Nginx 站点下的med子路径base不设置CSS 和 JS 的加载路径就会指向域名根目录布局必然乱。5.2 history 路由模式下的 Nginx 配置使用以下配置处理 SPA 路由回退和静态资源缓存注意把/med/换成实际部署路径。location /med/ { alias /opt/med-web/; try_files $uri $uri/ /med/index.html; } location ~* \.(js|css|png|jpg|woff2?)$ { expires 7d; add_header Cache-Control public, immutable; }第一段try_files会先找真实文件找不到就回退到入口 HTML这样/med/report/T20240601这类带参数的页面在刷新后不会变成 404。第二段对静态资源做缓存医疗器械检测项目的报告页打开频率很高js 包有缓存能明显减少重复加载时间。5.3 交付源码前的三个验证动作第一步在本地执行npm run build后用vite preview启动生产预览把任务列表、报告详情、视频回放三个页面逐个点开。重点看报告页打印时是否多了菜单栏如果多了要检查打印媒体查询是否在全局样式里生效。第二步把构建产物放到 Nginx 或者 Tomcat 的静态目录用两个不同角色的账号登录确认检测结果报告只能根据当前任务的权限显示不能直接输入路由地址访问别人的报告。第三步检查 m3u8 视频地址是否带有效期。如果视频服务需要签名 URL前端要在请求视频地址的接口拿到一次性的播放地址再传给InspectionVideo不要在源代码里写死视频服务器地址。最后一个建议是把vue-tsc或者eslint的校验命令加进npm run build之前否则多人协同时很容易把未使用的import和类型错误带上生产环境。器械检测项目因为字段多接口字段名错误在运行时很难暴露提前做类型检查比等到客户反馈要省事得多。本文还有配套的精品资源点击获取

基于Vue 3的医疗器械检测系统开发：从设备台账到报告生成

相关推荐

从艺术收藏到公益力量：广州帅兵科技如何用定制U盘诠释品牌温度

多智能体系统失控边界：LangGraph、AutoGen与CrewAI行为指纹图谱

2026湖南函授站哪家好？成人学历提升机构选择指南（附推荐参考）

更多资讯

Vivix-W1与Codex Voice：流式多模态交互如何重构AI协作范式

梦幻西游辅助背后的视觉识别与状态机自动化工程解析

Telegraf nvidia_smi 输入插件深度解析：基于 NVIDIA SMI 的 GPU 指标采集配置与实现原理

Telegraf hddtemp 输入插件实战：从 hddtemp 守护进程采集硬盘温度监控指标

如何用 Milkdown 在 10 分钟内搭出所见即所得的 Markdown 编辑器

DSSS调制工程包：BPSK/QPSK/16QAM的码相位对齐与同步

今日更新

51单片机开环控制磁阻传感器的硬件匹配与代码实现

AI Agent安全操作数据库：SQL注入防御与参数化查询实战

Android逆向实战：还原激励类App签到接口的签名算法

本周精选

AI驱动的自动化专利分析平台技术解析

LeetCode-Go 题解：1252. Cells with Odd Values in a Matrix（奇数值单元格计数）双解法剖析

在线答疑系统Java毕设实战：Spring Boot前后端分离与状态流转

本月热门

基于YOLO的焊缝缺陷检测：从数据标注到工业部署全流程实践

分布式服务的决策记录

创业产品的首版范围

读完文章，想聊聊您的网站？