一、项目背景与UI拆解这是一个典型的“智慧医院患者服务大厅”设计风格以医疗绿#0E7A6B为主基调界面清晰、操作直观。核心功能模块包括顶部导航栏首页、预约挂号、在线客服、AI咨询、管理后台。核心Hero区域问候语“您好请问哪里不舒服”提供“立即预约挂号”与“AI智能问诊”两大核心入口并展示门诊时间与24小时急诊信息。侧边查询卡片“查询我的预约”通过输入手机号快速检索预约记录。在线服务卡片区预约挂号、AI智能问诊、在线客服三个功能入口底部附有“出诊科室”等更多信息。要实现这样一个高可用、实时交互的系统我们采用Vue3前端 Flask后端 EMQXMQTT Broker的架构。二、系统架构设计前端Vue3采用 Vite 构建UI 组件可使用 Element Plus 或 TailwindCSS。使用 Pinia 管理全局状态如用户信息、预约记录Vue Router 管理路由。后端Flask提供 RESTful API处理业务逻辑挂号、查询、排班。使用 SQLAlchemy 操作 MySQL 数据库。实时消息EMQX/MQTT负责推送排队叫号、预约状态变更、在线客服聊天消息。前端通过 MQTT.js 使用 WebSocket 连接 EMQX。AI 服务Flask LangChain在 Flask 中集成大模型处理“AI智能问诊”模块的症状描述通过 SSE 或 MQTT 流式返回初步建议。三、前端 Vue3 实现组件化与实时交互3.1 首页核心布局根据截图首页主要由Header.vue、HeroBanner.vue、AppointmentQuery.vue和ServiceCards.vue组成。vue!-- views/Home.vue -- template div classhome-container Header / main classmain-content div classhero-section HeroBanner appointmentgoToAppointment aiConsultgoToAIConsult / AppointmentQuery queryhandleQuery / /div ServiceCards / /main /div /template3.2 预约查询组件侧边栏截图右侧的“查询我的预约”卡片逻辑是输入手机号后调用 Flask API。vue!-- components/AppointmentQuery.vue -- script setup import { ref } from vue import axios from axios const phone ref() const appointment ref(null) const queryAppointment async () { if (!phone.value) return try { const { data } await axios.get(/api/appointment/query?phone${phone.value}) if (data.success) { appointment.value data.data } else { alert(未查询到该手机号的预约记录) } } catch (error) { console.error(查询失败, error) } } /script template div classquery-card h3查询我的预约/h3 input v-modelphone placeholder输入预约时使用的手机号 / button clickqueryAppointment查询/button p classtip仅支持查询本系统内已提交的预约记录/p /div /template3.3 前端接入 MQTT实时排队与客服消息在 Vue3 中我们使用mqtt包通过 WebSocket 连接 EMQX订阅用户的专属通知。ts// src/composables/useMQTT.ts import mqtt from mqtt import { ref } from vue export function useMQTT(userId: string) { const queueNumber ref(null) const chatMessages ref([]) const client mqtt.connect(wss://your-emqx:8084/mqtt, { clientId: web_${userId}_${Date.now()}, username: userId, password: your-token }) client.on(connect, () { // 订阅排队叫号通知 client.subscribe(hospital/queue/${userId}, { qos: 1 }) // 订阅在线客服消息 client.subscribe(hospital/chat/${userId}, { qos: 1 }) }) client.on(message, (topic, payload) { const data JSON.parse(payload.toString()) if (topic.includes(/queue)) { queueNumber.value data.number // 弹出提示您的前面还有 X 人 } else if (topic.includes(/chat)) { chatMessages.value.push(data) } }) return { queueNumber, chatMessages, client } }四、后端 Flask 实现业务逻辑与 API4.1 预约挂号与查询 API在 Flask 中我们需要处理预约的增删改查。表结构设计为Appointment(id, patient_name, phone, department, doctor_id, time_slot, status)。pythonfrom flask import Blueprint, request, jsonify from models import db, Appointment appointment_bp Blueprint(appointment, __name__) appointment_bp.route(/api/appointment/query, methods[GET]) def query_appointment(): phone request.args.get(phone) if not phone: return jsonify({success: False, message: 手机号不能为空}), 400 records Appointment.query.filter_by(phonephone).all() if not records: return jsonify({success: False, message: 未找到记录}) return jsonify({ success: True, data: [record.to_dict() for record in records] }) appointment_bp.route(/api/appointment/book, methods[POST]) def book_appointment(): data request.get_json() new_appointment Appointment( patient_namedata[name], phonedata[phone], departmentdata[department], doctor_iddata[doctorId], time_slotdata[timeSlot], statuspending ) db.session.add(new_appointment) db.session.commit() # 触发 MQTT 通知此处调用 MQTT 发布函数 # publish_mqtt_notification(new_appointment) return jsonify({success: True, data: new_appointment.to_dict()})4.2 AI 智能问诊接口当用户点击“AI智能问诊”后前端发送症状描述Flask 调用 AI 模型返回初步建议。pythonfrom flask import Blueprint, request, Response import json from ai_service import medical_ai_chain ai_bp Blueprint(ai, __name__) ai_bp.route(/api/ai/consult, methods[POST]) def ai_consult(): data request.get_json() symptoms data.get(symptoms) session_id data.get(session_id) def generate(): # 调用医疗知识库 RAG 和 LLM for token in medical_ai_chain.stream({symptoms: symptoms}): yield fdata: {json.dumps({type: delta, text: token})}\n\n yield fdata: {json.dumps({type: done})}\n\n return Response(generate(), mimetypetext/event-stream)五、MQTT 在智慧医院中的核心应用场景结合截图中的“在线客服”、“预约挂号”MQTT 主要发挥以下作用5.1 排队叫号实时推送患者挂号后系统会分配一个排队号。当医生叫号时后端通过 MQTT 向该患者的专属主题发布消息Topic:hospital/queue/{patient_id}Payload:{number: A024, doctor: 张医生, status: calling}前端订阅后实时更新顶部状态或弹出提醒。5.2 在线客服人工介入截图中的“在线客服”模块用户在前端发送消息通过 MQTT 发送到客服端。用户端发布:hospital/chat/user/{user_id}客服端订阅:hospital/chat/agent/#客服订阅所有用户消息客服回复: 客服系统发布到hospital/chat/user/{user_id}前端订阅并展示。5.3 预约状态变更通知用户预约成功后如果医生停诊或时间变更后端立即发布 MQTT 消息Topic:hospital/notice/{user_id}Payload:{type: appointment_change, message: 您的预约时间已变更为...}前端收到后通过 Toast 或弹窗提醒用户。六、AI 客服与人工客服的无缝切换在“智慧医院”中AI 客服承担了初筛和简单咨询的工作。如果 AI 无法解决需要转接人工。AI 处理用户进入“AI咨询”Flask 后端通过 RAG 检索医院知识库如科室介绍、挂号规则生成回复。转人工触发当 AI 检测到用户意图为“投诉”、“复杂病情”或用户点击“转人工”时后端通过 MQTT 向客服工作台发送hospital/chat/escalation消息。人工接管客服工作台接收到消息后接入对话。前端订阅的hospital/chat/{user_id}主题会无缝切换到人工客服的回复。七、部署与总结前端Vue3 打包为静态文件通过 Nginx 部署反向代理 API 和 WebSocket (wss://)。后端Flask 使用 Gunicorn 部署配合 Nginx 处理 HTTP 请求。EMQX配置好认证JWT 或用户名密码开启 WebSocket 端口8084。数据库MySQL 存储业务数据Redis 缓存会话和排队状态。总结通过Vue3 Flask MQTT的组合智慧医院系统实现了极致的用户体验Vue3 响应式前端配合 MQTT 实时推送患者无需刷新即可获知排队进度和客服回复。高效的业务处理Flask 轻量级后端快速响应挂号、查询等请求。智能化的服务AI 客服分流了基础咨询人工客服通过 MQTT 精准接管复杂问题。下载地址https://download.csdn.net/download/suny8/93708187?spm1001.2014.3001.5501
