欢迎访问项目网址:智慧医疗系统
获取源码请关注微信公众号:一束蓬蒿
一、项目概述
在数字化医疗快速发展的今天，医院信息管理系统已成为现代医疗机构不可或缺的核心工具。本项目是一个基于Vue.js开发的智慧医疗数据管理平台，集成了病人管理、药品管理、数据分析、AI智能助手等多个核心功能模块，为医疗机构提供了一站式的信息化解决方案。
1.1项目特点
- 现代化UI设计：采用深色主题配色，科技感十足的界面设计
- 动态粒子背景：炫酷的登录页面和交互效果
- 数据可视化：丰富的图表展示，包括饼图、柱状图、雷达图等
- AI智能助手：集成ChatAI功能，提供智能问答服务
- 响应式设计：完美适配各种设备屏幕
- 模块化架构：清晰的代码结构，易于维护和扩展
1.2技术架构
1.2.1 技术栈
- Vue.js 2.x - 渐进式JavaScript框架
- Element UI - 企业级UI组件库
- ECharts - 强大的数据可视化库
- Vue Router - 官方路由管理器
- Vuex - 状态管理模式
- Tailwind CSS - 实用优先的CSS框架
1.2.2核心依赖
{
"vue": "^2.6.14",
"element-ui": "^2.15.9",
"echarts": "^5.4.0",
"vue-router": "^3.5.1",
"vuex": "^3.6.2",
"vue-particles": "^1.0.9"
}二、核心功能模块
2.1用户认证系统
2.1.1登录页面设计
项目登录界面设计：
<template>
<div class="login-container" v-cloak>
<!-- 粒子背景效果 -->
<ParticleBackground />
<!-- 品牌信息展示 -->
<div class="info-section">
<div class="brand-logo">
<div class="logo-icon">
<i class="el-icon-first-aid-kit"></i>
</div>
</div>
<h1 class="brand-title">智慧医疗系统</h1>
<p class="brand-subtitle">Smart Healthcare Management Platform</p>
</div>
<!-- 登录表单 -->
<div class="login-section">
<!-- 表单内容 -->
</div>
</div>
</template>功能：
- 动态粒子背景效果
- 响应式设计适配
- 表单验证和错误提示
2.2 病人管理系统
病人管理是医院信息系统的核心模块，提供了全面的患者信息管理功能。
主要功能
- 患者档案管理：完整的患者基本信息录入和管理
- 检查记录：详细的就诊历史和诊断信息
- 手术记录：手术详情、术后护理等信息管理
- 缴费记录：费用明细和支付状态跟踪
① 患者档案管理： ② 检查记录：
③ 手术记录: ④ 缴费记录
病人管理系统关键code:
2.2.1.数据结构定义:
data() {
return {
// 当前选中的患者
selectedPatient: null,
// 活动标签页
activeTab: 'basic',
// 手术记录数据
surgeryRecords: [
{
id: 'S001',
surgeryType: '腹腔镜胆囊切除术',
date: '2024-01-20',
doctor: '胡主任',
department: '肝胆外科',
duration: '2小时30分钟',
status: '成功',
anesthesia: '全身麻醉',
assistant: '李医生、王医生',
notes: '手术顺利，患者恢复良好',
complications: '无',
postOpCare: '术后禁食24小时，抗感染治疗'
}
// ...更多手术记录
],
// 缴费记录数据
paymentRecords: [
{
id: 'P001',
date: '2024-01-20',
type: '挂号费',
amount: 15,
status: '已缴费',
paymentMethod: '微信支付',
operator: '收费员A'
}
// ...更多缴费记录
]
}
}2.2.2.核心计算属性
computed: {
// 计算总费用
totalAmount() {
if (!this.paymentRecords || !Array.isArray(this.paymentRecords)) {
return 0;
}
return this.paymentRecords.reduce((sum, record) => sum + record.amount, 0);
},
// 计算已缴费金额
paidAmount() {
if (!this.paymentRecords || !Array.isArray(this.paymentRecords)) {
return 0;
}
return this.paymentRecords
.filter(record => record.status === '已缴费')
.reduce((sum, record) => sum + record.amount, 0);
},
// 计算待缴费金额
unpaidAmount() {
if (!this.paymentRecords || !Array.isArray(this.paymentRecords)) {
return 0;
}
return this.paymentRecords
.filter(record => record.status === '待缴费')
.reduce((sum, record) => sum + record.amount, 0);
}
}2.2.3. 手术记录相关方法
methods: {
// 获取手术状态样式类
getSurgeryStatusClass(status) {
const classMap = {
'成功': 'success',
'进行中': 'warning',
'已取消': 'danger',
'待安排': 'info'
};
return classMap[status] || 'info';
},
// 获取手术标签类型
getSurgeryTagType(status) {
const typeMap = {
'成功': 'success',
'进行中': 'warning',
'已取消': 'danger',
'待安排': 'info'
};
return typeMap[status] || 'info';
},
// 查看手术详情
viewSurgeryDetails(surgery) {
this.$alert(`
<div style="text-align: left; line-height: 1.6;">
<h3 style="color: #4f46e5; margin-bottom: 15px;">${surgery.surgeryType}</h3>
<p><strong>手术日期：</strong>${surgery.date}</p>
<p><strong>主刀医生：</strong>${surgery.doctor}</p>
<p><strong>手术科室：</strong>${surgery.department}</p>
<p><strong>手术时长：</strong>${surgery.duration}</p>
<p><strong>麻醉方式：</strong>${surgery.anesthesia}</p>
<p><strong>助手医生：</strong>${surgery.assistant}</p>
<p><strong>手术状态：</strong><span style="color: ${surgery.status === '成功' ? '#10b981' : '#f59e0b'}">${surgery.status}</span></p>
<p><strong>并发症：</strong>${surgery.complications}</p>
<div style="margin-top: 15px;">
<strong>手术记录：</strong>
<div style="background: #f8fafc; padding: 10px; border-radius: 6px; margin-top: 5px;">
${surgery.notes}
</div>
</div>
<div style="margin-top: 15px;">
<strong>术后护理：</strong>
<div style="background: #f0f9ff; padding: 10px; border-radius: 6px; margin-top: 5px;">
${surgery.postOpCare}
</div>
</div>
</div>
`, '手术详情', {
dangerouslyUseHTMLString: true,
confirmButtonText: '确定',
customClass: 'surgery-detail-dialog'
});
},
// 下载手术报告
downloadSurgeryReport(surgery) {
this.$message.success(`正在下载 ${surgery.surgeryType} 手术报告...`);
setTimeout(() => {
this.$message.success('手术报告下载完成');
}, 2000);
}
}2.2.4. 模板结构关键部分
<template>
<div class="patient-management-container" v-cloak>
<!-- 患者信息卡片 -->
<div class="patient-card">
<div class="patient-header">
<div class="patient-avatar">
<i class="fas fa-user-injured"></i>
</div>
<div class="patient-info">
<h2 class="patient-name">张三</h2>
<p class="patient-id">患者编号: P001</p>
</div>
</div>
</div>
<!-- 标签页导航 -->
<el-tabs v-model="activeTab" class="patient-tabs">
<!-- 基本信息 -->
<el-tab-pane label="基本信息" name="basic">
<!-- 基本信息内容 -->
</el-tab-pane>
<!-- 就诊记录 -->
<el-tab-pane label="就诊记录" name="medical">
<!-- 就诊记录内容 -->
</el-tab-pane>
<!-- 手术记录 -->
<el-tab-pane label="手术记录" name="surgery">
<div class="surgery-timeline">
<div v-for="surgery in surgeryRecords" :key="surgery.id" class="timeline-item">
<div class="timeline-marker" :class="getSurgeryStatusClass(surgery.status)"></div>
<div class="surgery-card">
<div class="surgery-header">
<div class="surgery-title">
<h5>{{ surgery.surgeryType }}</h5>
<el-tag :type="getSurgeryTagType(surgery.status)" size="small">
{{ surgery.status }}
</el-tag>
</div>
<span class="surgery-date">{{ surgery.date }}</span>
</div>
<div class="surgery-details">
<!-- 手术详情网格 -->
<div class="detail-grid">
<div class="detail-row">
<i class="fas fa-user-md"></i>
<span class="label">主刀医生：</span>
<span class="value">{{ surgery.doctor }}</span>
</div>
<!-- 更多详情行 -->
</div>
<!-- 操作按钮 -->
<div class="surgery-actions">
<el-button size="mini" type="info" @click="viewSurgeryDetails(surgery)">
<i class="fas fa-eye"></i>
查看详情
</el-button>
<el-button size="mini" type="primary" @click="downloadSurgeryReport(surgery)">
<i class="fas fa-download"></i>
下载报告
</el-button>
</div>
</div>
</div>
</div>
</div>
</el-tab-pane>
<!-- 缴费记录 -->
<el-tab-pane label="缴费记录" name="payment">
<!-- 费用统计卡片 -->
<div class="payment-summary">
<div class="summary-card total">
<div class="summary-label">总费用</div>
<div class="summary-value">¥{{ totalAmount.toFixed(2) }}</div>
</div>
<div class="summary-card paid">
<div class="summary-label">已缴费</div>
<div class="summary-value">¥{{ paidAmount.toFixed(2) }}</div>
</div>
<div class="summary-card unpaid">
<div class="summary-label">待缴费</div>
<div class="summary-value">¥{{ unpaidAmount.toFixed(2) }}</div>
</div>
</div>
<!-- 缴费记录表格 -->
<el-table :data="paymentRecords" class="payment-table">
<el-table-column prop="date" label="日期" width="120"></el-table-column>
<el-table-column prop="type" label="费用类型" width="120"></el-table-column>
<el-table-column prop="amount" label="金额" width="100">
<template slot-scope="scope">
¥{{ scope.row.amount.toFixed(2) }}
</template>
</el-table-column>
<el-table-column prop="status" label="状态" width="100">
<template slot-scope="scope">
<el-tag :type="scope.row.status === '已缴费' ? 'success' : 'warning'" size="small">
{{ scope.row.status }}
</el-tag>
</template>
</el-table-column>
</el-table>
</el-tab-pane>
</el-tabs>
</div>
</template>界面设计特色
- 时间线展示：手术记录采用时间线形式展示，直观清晰
- 状态标识：不同颜色标识手术状态（成功/进行中/已取消）
- 详情弹窗：点击查看详细的手术信息
- 操作按钮：支持下载手术报告等功能
2.3 药品管理系统
-
药品信息管理:
药品信息管理模块是一个综合性的药品档案管理系统，集成了药品基本信息管理、库存状态监控、智能搜索筛选、统计分析等核心功能，为医疗机构提供专业的药品管理解决方案。
① 患者用药档案 ② 药品智能分析
③ 处方合规审查
药品信息管理关键code:
2.3.1. 数据结构定义
data() {
return {
// 搜索关键词
searchKeyword: '',
// 选中的药品分类
selectedCategory: '',
// 药品数据
medicines: [
{
id: 'M001',
name: '阿莫西林胶囊',
category: '抗生素',
specification: '0.25g*24粒',
manufacturer: '华北制药',
price: 15.80,
stock: 500,
unit: '盒',
expiryDate: '2025-12-31',
batchNumber: 'AM20240315',
storageCondition: '密封，在干燥处保存',
indication: '用于敏感菌所致的各种感染',
dosage: '成人一次0.5g，一日3次',
contraindication: '对青霉素类药物过敏者禁用',
status: '正常',
supplier: '华北制药集团',
purchaseDate: '2024-03-15',
location: 'A区-01-001'
}
// ...更多药品数据
],
// 药品分类列表
categories: ['全部', '抗生素', '心血管药物', '消化系统药物', '呼吸系统药物', '神经系统药物', '内分泌药物', '维生素类', '中成药'],
// 对话框控制
dialogVisible: false,
editDialogVisible: false,
// 当前编辑的药品
currentMedicine: {},
// 新药品表单
newMedicine: {
name: '',
category: '',
specification: '',
manufacturer: '',
price: 0,
stock: 0,
unit: '盒',
expiryDate: '',
batchNumber: '',
storageCondition: '',
indication: '',
dosage: '',
contraindication: '',
supplier: '',
purchaseDate: '',
location: ''
},
// 表单验证规则
medicineRules: {
name: [
{ required: true, message: '请输入药品名称', trigger: 'blur' }
],
category: [
{ required: true, message: '请选择药品分类', trigger: 'change' }
],
price: [
{ required: true, message: '请输入药品价格', trigger: 'blur' },
{ type: 'number', min: 0, message: '价格必须大于0', trigger: 'blur' }
],
stock: [
{ required: true, message: '请输入库存数量', trigger: 'blur' },
{ type: 'number', min: 0, message: '库存必须大于等于0', trigger: 'blur' }
]
}
}
}2.3.2 核心计算属性
computed: {
// 过滤后的药品列表
filteredMedicines() {
let filtered = this.medicines;
// 按分类过滤
if (this.selectedCategory && this.selectedCategory !== '全部') {
filtered = filtered.filter(medicine => medicine.category === this.selectedCategory);
}
// 按搜索关键词过滤
if (this.searchKeyword) {
const keyword = this.searchKeyword.toLowerCase();
filtered = filtered.filter(medicine =>
medicine.name.toLowerCase().includes(keyword) ||
medicine.manufacturer.toLowerCase().includes(keyword) ||
medicine.indication.toLowerCase().includes(keyword)
);
}
return filtered;
},
// 库存统计
stockStatistics() {
const total = this.medicines.length;
const lowStock = this.medicines.filter(m => m.stock < 50).length;
const outOfStock = this.medicines.filter(m => m.stock === 0).length;
const normal = total - lowStock - outOfStock;
return {
total,
normal,
lowStock,
outOfStock
};
},
// 即将过期的药品
expiringMedicines() {
const today = new Date();
const threeMonthsLater = new Date(today.getTime() + 90 * 24 * 60 * 60 * 1000);
return this.medicines.filter(medicine => {
const expiryDate = new Date(medicine.expiryDate);
return expiryDate <= threeMonthsLater && expiryDate > today;
});
}
}2.3.3 3. 核心方法
methods: {
// 搜索药品
searchMedicines() {
// 搜索逻辑已在计算属性中实现
this.$message.success(`找到 ${this.filteredMedicines.length} 条相关药品`);
},
// 重置搜索
resetSearch() {
this.searchKeyword = '';
this.selectedCategory = '';
this.$message.info('已重置搜索条件');
},
// 查看药品详情
viewMedicineDetail(medicine) {
this.currentMedicine = { ...medicine };
this.dialogVisible = true;
},
// 编辑药品
editMedicine(medicine) {
this.currentMedicine = { ...medicine };
this.editDialogVisible = true;
},
// 保存编辑
saveMedicine() {
this.$refs.editForm.validate((valid) => {
if (valid) {
const index = this.medicines.findIndex(m => m.id === this.currentMedicine.id);
if (index !== -1) {
this.$set(this.medicines, index, { ...this.currentMedicine });
this.editDialogVisible = false;
this.$message.success('药品信息更新成功');
}
}
});
},
// 删除药品
deleteMedicine(medicine) {
this.$confirm(`确定要删除药品 "${medicine.name}" 吗？`, '确认删除', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
const index = this.medicines.findIndex(m => m.id === medicine.id);
if (index !== -1) {
this.medicines.splice(index, 1);
this.$message.success('删除成功');
}
}).catch(() => {
this.$message.info('已取消删除');
});
},
// 添加新药品
addNewMedicine() {
this.newMedicine = {
name: '',
category: '',
specification: '',
manufacturer: '',
price: 0,
stock: 0,
unit: '盒',
expiryDate: '',
batchNumber: '',
storageCondition: '',
indication: '',
dosage: '',
contraindication: '',
supplier: '',
purchaseDate: '',
location: ''
};
this.dialogVisible = true;
},
// 保存新药品
saveNewMedicine() {
this.$refs.medicineForm.validate((valid) => {
if (valid) {
const newId = 'M' + String(this.medicines.length + 1).padStart(3, '0');
const medicine = {
...this.newMedicine,
id: newId,
status: '正常'
};
this.medicines.push(medicine);
this.dialogVisible = false;
this.$message.success('药品添加成功');
}
});
},
// 获取库存状态样式
getStockStatus(stock) {
if (stock === 0) return 'danger';
if (stock < 50) return 'warning';
return 'success';
},
// 获取库存状态文本
getStockStatusText(stock) {
if (stock === 0) return '缺货';
if (stock < 50) return '库存不足';
return '库存充足';
},
// 导出药品数据
exportMedicines() {
// 模拟导出功能
this.$message.success('药品数据导出成功');
},
// 导入药品数据
importMedicines() {
// 模拟导入功能
this.$message.success('药品数据导入成功');
}
}药品借阅管理：
- 借阅记录：完整的药品借出和归还记录
- 状态跟踪：实时跟踪借阅状态
- 到期提醒：自动提醒即将到期的借阅
2.3.4 数据结构定义
computed: {
// 过滤后的借阅记录
filteredRecords() {
let filtered = this.borrowRecords;
// 按状态过滤
if (this.selectedStatus && this.selectedStatus !== '全部') {
filtered = filtered.filter(record => record.status === this.selectedStatus);
}
// 按搜索关键词过滤
if (this.searchKeyword) {
const keyword = this.searchKeyword.toLowerCase();
filtered = filtered.filter(record =>
record.medicineName.toLowerCase().includes(keyword) ||
record.borrower.toLowerCase().includes(keyword) ||
record.department.toLowerCase().includes(keyword)
);
}
return filtered;
},
// 借阅统计
borrowStatistics() {
const total = this.borrowRecords.length;
const borrowed = this.borrowRecords.filter(r => r.status === '已借出').length;
const returned = this.borrowRecords.filter(r => r.status === '已归还').length;
const overdue = this.borrowRecords.filter(r => r.status === '已逾期').length;
const cancelled = this.borrowRecords.filter(r => r.status === '已取消').length;
return {
total,
borrowed,
returned,
overdue,
cancelled
};
},
// 即将到期的借阅记录
upcomingDueRecords() {
const today = new Date();
const threeDaysLater = new Date(today.getTime() + 3 * 24 * 60 * 60 * 1000);
return this.borrowRecords.filter(record => {
if (record.status !== '已借出') return false;
const dueDate = new Date(record.expectedReturnDate);
return dueDate <= threeDaysLater && dueDate >= today;
});
},
// 逾期记录
overdueRecords() {
return this.borrowRecords.filter(record => record.status === '已逾期');
}
}2.3.5 核心计算属性
computed: {
// 过滤后的借阅记录
filteredRecords() {
let filtered = this.borrowRecords;
// 按状态过滤
if (this.selectedStatus && this.selectedStatus !== '全部') {
filtered = filtered.filter(record => record.status === this.selectedStatus);
}
// 按搜索关键词过滤
if (this.searchKeyword) {
const keyword = this.searchKeyword.toLowerCase();
filtered = filtered.filter(record =>
record.medicineName.toLowerCase().includes(keyword) ||
record.borrower.toLowerCase().includes(keyword) ||
record.department.toLowerCase().includes(keyword)
);
}
return filtered;
},
// 借阅统计
borrowStatistics() {
const total = this.borrowRecords.length;
const borrowed = this.borrowRecords.filter(r => r.status === '已借出').length;
const returned = this.borrowRecords.filter(r => r.status === '已归还').length;
const overdue = this.borrowRecords.filter(r => r.status === '已逾期').length;
const cancelled = this.borrowRecords.filter(r => r.status === '已取消').length;
return {
total,
borrowed,
returned,
overdue,
cancelled
};
},
// 即将到期的借阅记录
upcomingDueRecords() {
const today = new Date();
const threeDaysLater = new Date(today.getTime() + 3 * 24 * 60 * 60 * 1000);
return this.borrowRecords.filter(record => {
if (record.status !== '已借出') return false;
const dueDate = new Date(record.expectedReturnDate);
return dueDate <= threeDaysLater && dueDate >= today;
});
},
// 逾期记录
overdueRecords() {
return this.borrowRecords.filter(record => record.status === '已逾期');
}
}2.3.6 核心方法
methods: {
// 搜索借阅记录
searchRecords() {
this.$message.success(`找到 ${this.filteredRecords.length} 条相关记录`);
},
// 重置搜索
resetSearch() {
this.searchKeyword = '';
this.selectedStatus = '';
this.$message.info('已重置搜索条件');
},
// 查看借阅详情
viewBorrowDetail(record) {
this.currentRecord = { ...record };
this.dialogVisible = true;
},
// 归还药品
returnMedicine(record) {
this.$confirm(`确定要归还 "${record.medicineName}" 吗？`, '确认归还', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'info'
}).then(() => {
const index = this.borrowRecords.findIndex(r => r.id === record.id);
if (index !== -1) {
this.borrowRecords[index].status = '已归还';
this.borrowRecords[index].actualReturnDate = this.formatDate(new Date());
this.$message.success('归还成功');
}
}).catch(() => {
this.$message.info('已取消归还');
});
},
// 催还药品
remindReturn(record) {
this.$confirm(`确定要发送催还通知给 "${record.borrower}" 吗？`, '催还提醒', {
confirmButtonText: '发送',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
// 模拟发送催还通知
this.$message.success(`已向 ${record.borrower}(${record.contactPhone}) 发送催还通知`);
}).catch(() => {
this.$message.info('已取消发送');
});
},
// 取消借阅
cancelBorrow(record) {
this.$confirm(`确定要取消 "${record.medicineName}" 的借阅吗？`, '确认取消', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
const index = this.borrowRecords.findIndex(r => r.id === record.id);
if (index !== -1) {
this.borrowRecords[index].status = '已取消';
this.$message.success('借阅已取消');
}
}).catch(() => {
this.$message.info('已取消操作');
});
},
// 添加新借阅记录
addNewBorrow() {
this.newBorrowRecord = {
medicineName: '',
specification: '',
borrower: '',
department: '',
borrowDate: '',
expectedReturnDate: '',
quantity: 1,
unit: '盒',
purpose: '',
approver: '',
notes: '',
contactPhone: ''
};
this.addDialogVisible = true;
},
// 保存新借阅记录
saveNewBorrow() {
this.$refs.borrowForm.validate((valid) => {
if (valid) {
const newId = 'B' + String(this.borrowRecords.length + 1).padStart(3, '0');
const record = {
...this.newBorrowRecord,
id: newId,
status: '已借出',
actualReturnDate: ''
};
this.borrowRecords.push(record);
this.addDialogVisible = false;
this.$message.success('借阅记录添加成功');
}
});
},
// 获取状态样式
getStatusType(status) {
const typeMap = {
'已借出': 'warning',
'已归还': 'success',
'已逾期': 'danger',
'已取消': 'info'
};
return typeMap[status] || 'info';
},
// 检查是否逾期
isOverdue(record) {
if (record.status !== '已借出') return false;
const today = new Date();
const dueDate = new Date(record.expectedReturnDate);
return dueDate < today;
},
// 检查是否即将到期
isDueSoon(record) {
if (record.status !== '已借出') return false;
const today = new Date();
const dueDate = new Date(record.expectedReturnDate);
const threeDaysLater = new Date(today.getTime() + 3 * 24 * 60 * 60 * 1000);
return dueDate <= threeDaysLater && dueDate >= today;
},
// 计算逾期天数
getOverdueDays(record) {
if (record.status !== '已逾期') return 0;
const today = new Date();
const dueDate = new Date(record.expectedReturnDate);
const diffTime = today - dueDate;
return Math.ceil(diffTime / (1000 * 60 * 60 * 24));
},
// 格式化日期
formatDate(date) {
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0');
const day = String(date.getDate()).padStart(2, '0');
return `${year}-${month}-${day}`;
},
// 导出借阅记录
exportRecords() {
this.$message.success('借阅记录导出成功');
},
// 批量操作
handleBatchOperation(operation) {
this.$message.info(`批量${operation}功能开发中...`);
}
}2.4. 数据可视化分析
首页数据大屏
项目首页采用了数据大屏的设计理念，提供了丰富的数据可视化展示
可视化组件包括：
- 病区人数统计：实时显示各病区人数分布
- 年龄结构图：柱状图展示患者年龄分布
- 疾病分析饼图：交互式饼图显示疾病类型占比
- 云词图：点击饼图显示对应年龄段的主要疾病
-
混合图：每日出院与入院人数统计动态柱状图与折线图
2.5. AI应用与医疗数据分析
- AI应用型的体检报告可视化分析功能：
体检报告分析模块是一个基于AI技术的智能医疗数据分析系统，通过可视化图表和人体器官模型，为医护人员提供直观、智能的体检数据分析工具。该模块集成了热力图、器官定位显示、智能筛选等功能，实现了从数据录入到可视化分析的完整流程。
2.5.1. 核心计算属性
computed: {
// 过滤后的数据
filteredData() {
let filtered = this.healthData;
// 按器官筛选
if (this.filters.organ) {
filtered = filtered.filter(item => item.organ === this.filters.organ);
}
// 按年龄段筛选
if (this.filters.ageRange) {
const [minAge, maxAge] = this.filters.ageRange.split('-').map(Number);
filtered = filtered.filter(item =>
item.age >= minAge && item.age <= maxAge
);
}
// 按性别筛选
if (this.filters.gender) {
filtered = filtered.filter(item => item.gender === this.filters.gender);
}
// 按风险等级筛选
if (this.filters.riskLevel) {
filtered = filtered.filter(item => item.riskLevel === this.filters.riskLevel);
}
return filtered;
},
// 统计数据
statisticsData() {
const total = this.filteredData.length;
const normal = this.filteredData.filter(item => item.result === '正常').length;
const abnormal = this.filteredData.filter(item => item.result === '异常').length;
const highRisk = this.filteredData.filter(item => item.riskLevel === '高风险').length;
return {
total,
normal,
abnormal,
highRisk,
normalRate: total > 0 ? ((normal / total) * 100).toFixed(1) : 0,
abnormalRate: total > 0 ? ((abnormal / total) * 100).toFixed(1) : 0
};
},
// 图表数据
chartData() {
const organCounts = {};
this.filteredData.forEach(item => {
organCounts[item.organ] = (organCounts[item.organ] || 0) + 1;
});
return {
labels: Object.keys(organCounts),
values: Object.values(organCounts)
};
}
}2.5.2器官图片更新方法
methods: {
// 更新器官图片显示
updateOrganImage() {
if (!this.filteredData || !this.filteredData.器官名称) {
this.organImagePath = "";
return;
}
const organName = this.filteredData.器官名称;
// 使用更可靠的图片路径引用方式
const organImageMap = {
"心": this.getImagePath("heart.png"),
"肺": this.getImagePath("lung.png"),
"肝胆": this.getImagePath("liver.png"),
"肾": this.getImagePath("kidney.png"),
"胃": this.getImagePath("stomach.png"),
"脑": this.getImagePath("brain.png"),
"血管": this.getImagePath("blood_vessel.png"),
};
this.organImagePath = organImageMap[organName] || this.getImagePath("default.png");
},
// 获取图片路径的辅助方法
getImagePath(imageName) {
// 在生产环境中，使用相对于public的路径
if (process.env.NODE_ENV === 'production') {
// 确保路径以 ./ 开头，这样在部署时更可靠
return `./images/${imageName}`;
} else {
// 开发环境使用绝对路径
return `/images/${imageName}`;
}
},
// 更新高亮器官部位的方法
updateHighlightedPart() {
if (this.filteredData && this.filteredData.器官名称) {
// 根据器官名称获取对应的身体部位
this.highlightedPart = this.organToBodyPartMap[this.filteredData.器官名称];
// 更新图表
this.updateChart();
}
}
}-
医疗数据分析:
医疗数据分析模块是一个基于机器学习的护士照料患者数据分析系统。该模块集成了多种数据可视化图表、机器学习算法应用、以及智能数据分析功能，为医疗管理人员提供护理质量评估、患者照料效果分析等核心功能。
2. 5.3 核心计算属性
computed: {
// 过滤后的护士数据
filteredNurseData() {
let filtered = this.nurseData;
// 按科室筛选
if (this.filters.department) {
filtered = filtered.filter(nurse => nurse.department === this.filters.department);
}
// 按护士等级筛选
if (this.filters.nurseLevel) {
filtered = filtered.filter(nurse => nurse.level === this.filters.nurseLevel);
}
// 按班次类型筛选
if (this.filters.shiftType) {
filtered = filtered.filter(nurse => nurse.shiftType === this.filters.shiftType);
}
// 按日期范围筛选
if (this.filters.dateRange && this.filters.dateRange.length === 2) {
const [startDate, endDate] = this.filters.dateRange;
filtered = filtered.filter(nurse => {
const workDate = new Date(nurse.workDate);
return workDate >= startDate && workDate <= endDate;
});
}
return filtered;
},
// 统计数据
statisticsData() {
const data = this.filteredNurseData;
const totalNurses = data.length;
const avgSatisfaction = data.reduce((sum, nurse) => sum + nurse.satisfactionScore, 0) / totalNurses;
const avgQualityScore = data.reduce((sum, nurse) => sum + nurse.careQualityScore, 0) / totalNurses;
const totalPatients = data.reduce((sum, nurse) => sum + nurse.patientCount, 0);
const totalErrors = data.reduce((sum, nurse) => sum + nurse.errorCount, 0);
const totalCompliments = data.reduce((sum, nurse) => sum + nurse.complimentCount, 0);
return {
totalNurses,
avgSatisfaction: avgSatisfaction.toFixed(2),
avgQualityScore: avgQualityScore.toFixed(1),
totalPatients,
totalErrors,
totalCompliments,
errorRate: totalPatients > 0 ? ((totalErrors / totalPatients) * 100).toFixed(2) : 0,
complimentRate: totalNurses > 0 ? ((totalCompliments / totalNurses) * 100).toFixed(1) : 0
};
},
// 科室统计数据
departmentStats() {
const stats = {};
this.filteredNurseData.forEach(nurse => {
if (!stats[nurse.department]) {
stats[nurse.department] = {
nurseCount: 0,
totalSatisfaction: 0,
totalQuality: 0,
totalPatients: 0,
totalErrors: 0
};
}
stats[nurse.department].nurseCount++;
stats[nurse.department].totalSatisfaction += nurse.satisfactionScore;
stats[nurse.department].totalQuality += nurse.careQualityScore;
stats[nurse.department].totalPatients += nurse.patientCount;
stats[nurse.department].totalErrors += nurse.errorCount;
});
// 计算平均值
Object.keys(stats).forEach(dept => {
const count = stats[dept].nurseCount;
stats[dept].avgSatisfaction = (stats[dept].totalSatisfaction / count).toFixed(2);
stats[dept].avgQuality = (stats[dept].totalQuality / count).toFixed(1);
stats[dept].errorRate = stats[dept].totalPatients > 0 ?
((stats[dept].totalErrors / stats[dept].totalPatients) * 100).toFixed(2) : 0;
});
return stats;
},
// 机器学习分析结果
mlAnalysisResults() {
return {
qualityPrediction: this.predictCareQuality(),
workloadClusters: this.analyzeWorkloadClusters(),
anomalies: this.detectAnomalies(),
trends: this.analyzeTrends()
};
}
}2.6. AI智能助手
- AI智能助手:医疗管理系统中的核心AI对话组件，集成了三种不同类型的AI助手("通用AI"、“模拟医生AI”、“医疗数据分析AI”功能，为医护人员提供智能问答服务)，为医护人员提供智能化的医疗咨询、数据分析和诊断辅助服务。该模块基于讯飞星火AI API
① 通用AI
② 模拟医生AI
③ 医疗数据分析AI
2.6.1 LLM模型API和prompt配置
data() {
return {
// 基础配置
question: "",
sparkResult: "",
domain: "generalv3",
version: "v3.1/chat",
// API配置
requestObj: {
APPID: "your_ APPID",
APISecret: "your_APISecret",
APIKey: "your_APIKey",
Uid: "润"
},
// AI助手配置文件
aiProfiles: {
generalv3: {
name: "通用问答AI",
title: "全能知识顾问",
avatar: "https://docs.dknowc.cn/20220424/1531/41fbc4a5-2ebc-488f-8427-e205c7d19960/%E5%BD%A9%E6%99%BA%E6%9C%BA%E5%99%A8%E4%BA%BA.png",
background: "拥有海量知识库，经过大规模预训练，能够理解和回答各类问题。",
skills: [
"科学、历史、文化等知识解答",
"数理化等学科问题指导",
"生活、工作等实用建议",
"文本理解与分析"
],
placeholder: "您可以问我任何问题...",
intro: "您好！我是全能AI助手，可以为您解答各类问题，提供准确信息和建议。让我们开始对话吧！"
},
lite: {
name: "模拟医生AI",
title: "主任医师",
avatar: "https://imgpp.ztupic.com/dealupload/dealyisheng202401200110.png",
background: "具有丰富的临床经验，专注于疾病诊断和健康咨询，熟悉各类疾病的诊断和治疗方案。",
skills: [
"症状分析与初步诊断",
"疾病预防与保健建议",
"用药指导与注意事项",
"急救知识与健康教育"
],
placeholder: "请描述您的症状或健康问题...",
intro: "您好！我是主任医师AI，有着丰富的临床经验。请详细描述您的症状，我会认真为您解答。注意：我的建议仅供参考，重要医疗决策请务必咨询真实医生。"
},
"generalv3.5": {
name: "医疗数据分析AI",
title: "医学数据专家",
avatar: "https://ts1.cn.mm.bing.net/th/id/R-C.95d19ae267f25d16d5fbb206440e590a",
background: "专门从事医疗数据分析和健康报告解读，具有专业的医学知识和数据分析能力。",
skills: [
"体检报告解读与分析",
"健康指标评估",
"疾病风险预测",
"健康趋势分析"
],
placeholder: "请输入您想分析的医疗数据或报告...",
intro: "您好！我是医疗数据分析专家，专注于医疗报告解读和健康数据分析。我可以帮您理解检验结果，评估健康状况。"
}
},
// 消息管理
currentAI: null,
messages: [],
messageIdCounter: 1
}
}2.6.2核心WebSocket通信方法
async sendMsg() {
if (!this.question.trim()) return;
// 添加用户消息到消息数组
const userMessage = {
id: this.messageIdCounter++,
text: this.question.trim(),
sender: 'user',
timestamp: new Date()
};
this.messages.push(userMessage);
// 创建AI消息占位符
const aiMessage = {
id: this.messageIdCounter++,
text: '',
sender: 'ai',
timestamp: new Date()
};
this.messages.push(aiMessage);
const inputVal = this.question;
this.question = ''; // 清空输入框
this.sparkResult = ''; // 重置结果
const myUrl = await this.getWebsocketUrl();
const socket = new WebSocket(myUrl);
socket.addEventListener("open", (event) => {
console.log("开启连接！！", event);
const params = {
header: {
app_id: this.requestObj.APPID,
uid: this.requestObj.Uid,
},
parameter: {
chat: {
domain: this.domain,
temperature: 0.5,
max_tokens: 2024,
},
},
payload: {
message: {
text: [{ role: "user", content: inputVal }],
},
},
};
console.log("发送消息");
socket.send(JSON.stringify(params));
});
socket.addEventListener("message", (event) => {
try {
const data = JSON.parse(event.data);
// 安全检查数据结构
if (data && data.payload && data.payload.choices && data.payload.choices.text) {
if (data.payload.choices.text.length > 0) {
const response = data.payload.choices.text[0].content;
this.sparkResult += response;
// 更新最后一条AI消息
if (this.messages.length > 0) {
const lastMessage = this.messages[this.messages.length - 1];
if (lastMessage.sender === 'ai') {
lastMessage.text = this.sparkResult;
lastMessage.timestamp = new Date();
}
}
// 自动滚动到底部
this.$nextTick(() => {
this.scrollToBottom();
});
// 触发事件通知父组件
this.$emit("ai-response", this.sparkResult);
this.$emit("ai-other-response", this.sparkResult);
}
}
// 错误处理
if (data.header && data.header.code !== 0) {
console.log("出错了", data.header.code, ":", data.header.message);
this.sparkResult += "\n\n抱歉，AI服务暂时不可用，请稍后再试。";
socket.close();
}
// 连接完成处理
if (
data.header &&
data.header.code === 0 &&
data.payload &&
data.payload.choices &&
data.payload.choices.text &&
data.header.status === 2
) {
this.sparkResult += data.payload.choices.text[0].content;
setTimeout(() => {
socket.close();
}, 1000);
}
} catch (error) {
console.error("解析WebSocket消息时出错:", error);
this.sparkResult += "\n\n抱歉，处理响应时出现错误，请重试。";
socket.close();
}
});
socket.addEventListener("close", (event) => {
console.log("连接关闭！！", event);
this.sparkResult += "\n";
this.question = ""; // 清空输入框
});
socket.addEventListener("error", (event) => {
console.log("连接发送错误！！", event);
});
}2.6.3WebSocket URL生成和认证
getWebsocketUrl() {
return new Promise((resolve, reject) => {
const url = "wss://spark-api.xf-yun.com/" + this.version;
const host = "spark-api.xf-yun.com";
const apiKeyName = "api_key";
const date = new Date().toGMTString();
const algorithm = "hmac-sha256";
const headers = "host date request-line";
const signatureOrigin = `host: ${host}\ndate: ${date}\nGET /${this.version} HTTP/1.1`;
const signatureSha = CryptoJs.HmacSHA256(
signatureOrigin,
this.requestObj.APISecret
);
const signature = CryptoJs.enc.Base64.stringify(signatureSha);
const authorizationOrigin = `${apiKeyName}="${this.requestObj.APIKey}", algorithm="${algorithm}", headers="${headers}", signature="${signature}"`;
const authorization = base64.encode(authorizationOrigin);
const finalUrl = `${url}?authorization=${authorization}&date=${encodeURI(
date
)}&host=${host}`;
resolve(finalUrl);
});
}三、学习价值
对开发者的价值
- Vue.js最佳实践：学习现代前端开发模式
- UI/UX设计：掌握医疗行业界面设计规范
- 数据可视化：ECharts图表开发技巧
- 项目架构：大型前端项目的组织和管理
对企业的价值
- 快速原型：快速搭建医疗管理系统原型
- 技术选型参考：为技术决策提供参考
- 团队培训：作为内部培训的实战项目
- 二次开发基础：在此基础上开发定制功能
🎉 结语
这个智慧医疗数据管理平台不仅仅是一个技术项目，更是医疗信息化发展的一个缩影。它展示了现代前端技术在医疗行业的应用潜力，为医疗机构的数字化转型提供了有力支持。
无论您是想要学习Vue.js开发技术的开发者或是寻求毕业项目的在校学生，还是需要医疗管理系统的医疗机构，或者是寻找商业机会的创业者，这个项目都能为您提供巨大的价值。
立即获取这个项目，开启您的医疗信息化之旅！
扫一扫
1034
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
