Vue2 + ECharts 实现医疗健康管理系统：患者信息管理与健康分析页面开发 医疗健康后台管理系统：用 Vue2 实现健康报告与医生排班可视化 构建 Vue2 医疗健康平台：患者管理与健康状况分
发布时间
阅读量：
阅读量
效果图
🌟【定制化开发服务，让您的项目领先一步】🌟
如有需求，直接私信留下您的联系方式。谢谢。
我的邮箱：2351598671@qq.com
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>医疗健康管理系统 - 患者信息管理与健康报告分析</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
margin: 0;
background-color: #f0f0f0;
}
#app {
width: 100%;
display: flex;
}
/* 侧边栏样式 */
.sidebar {
width: 240px;
background-color: #00796b;
color: #fff;
padding: 20px;
height: 100vh;
}
.sidebar h2 {
font-size: 18px;
text-align: center;
margin-bottom: 20px;
}
.menu-item {
padding: 10px;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}
.menu-item.active {
background-color: #004d40;
font-weight: bold;
}
/* 主体样式 */
.main {
flex: 1;
padding: 20px;
}
.dashboard-cards {
display: flex;
gap: 15px;
margin-bottom: 20px;
}
.card {
flex: 1;
padding: 15px;
border-radius: 8px;
background-color: #ffffff;
text-align: center;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.card h3 {
margin: 0;
font-size: 18px;
color: #333;
}
.card p {
font-size: 24px;
color: #00796b;
}
.charts-container {
display: flex;
gap: 20px;
margin-bottom: 20px;
}
.chart {
flex: 1;
background-color: #fff;
border-radius: 8px;
height: 300px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.filters {
display: flex;
gap: 15px;
margin-bottom: 20px;
}
.filters select {
padding: 8px;
border-radius: 5px;
}
.table-container {
background-color: #fff;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 12px;
border-bottom: 1px solid #ddd;
text-align: center;
}
th {
background-color: #f3f6fb;
color: #333;
}
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
}
.modal {
background-color: #fff;
padding: 20px;
border-radius: 5px;
width: 300px;
}
.modal input, .modal select {
width: 100%;
margin-bottom: 10px;
padding: 8px;
border-radius: 4px;
}
</style>
</head>
<body>
<div id="app">
<!-- 侧边栏菜单 -->
<div class="sidebar">
<h2>医疗健康管理系统</h2>
<div v-for="item in menu" :key="item" class="menu-item" :class="{active: activeMenu === item}" @click="selectMenu(item)">
{{ item }}
</div>
</div>
<!-- 主体内容 -->
<div class="main">
<!-- 患者总览统计卡片 -->
<div class="dashboard-cards">
<div v-for="card in dashboardCards" :key="card.title" class="card">
<h3>{{ card.title }}</h3>
<p>{{ card.value }}</p>
</div>
</div>
<!-- 健康状况分析图表与医生排班情况图表 -->
<div class="charts-container">
<div id="health-status-chart" class="chart"></div>
<div id="doctor-schedule-chart" class="chart"></div>
</div>
<!-- 过滤器 -->
<div class="filters">
<select v-model="patientStatusFilter">
<option value="">患者状态筛选</option>
<option value="住院">住院</option>
<option value="待诊">待诊</option>
<option value="康复">康复</option>
</select>
<select v-model="healthConditionFilter">
<option value="">健康状况筛选</option>
<option value="健康">健康</option>
<option value="轻度疾病">轻度疾病</option>
<option value="重度疾病">重度疾病</option>
</select>
<select v-model="departmentFilter">
<option value="">科室筛选</option>
<option value="内科">内科</option>
<option value="外科">外科</option>
<option value="妇科">妇科</option>
</select>
</div>
<!-- 患者信息表格 -->
<div class="table-container">
<table>
<thead>
<tr>
<th>序号</th>
<th>患者编号</th>
<th>姓名</th>
<th>科室</th>
<th>健康状况</th>
<th>状态</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(patient, index) in filteredPatients" :key="patient.id">
<td>{{ index + 1 }}</td>
<td>{{ patient.patientId }}</td>
<td>{{ patient.name }}</td>
<td>{{ patient.department }}</td>
<td>{{ patient.healthCondition }}</td>
<td>{{ patient.status }}</td>
<td>
<button @click="editPatient(patient)">编辑</button>
<button @click="deletePatient(patient.id)">删除</button>
</td>
</tr>
</tbody>
</table>
</div>
<!-- 编辑弹框 -->
<div v-if="showModal" class="modal-overlay" @click="closeModal">
<div class="modal" @click.stop>
<h3>编辑患者信息</h3>
<input v-model="modalData.patientId" placeholder="患者编号">
<input v-model="modalData.name" placeholder="患者姓名">
<select v-model="modalData.department">
<option value="内科">内科</option>
<option value="外科">外科</option>
<option value="妇科">妇科</option>
</select>
<select v-model="modalData.healthCondition">
<option value="健康">健康</option>
<option value="轻度疾病">轻度疾病</option>
<option value="重度疾病">重度疾病</option>
</select>
<select v-model="modalData.status">
<option value="住院">住院</option>
<option value="待诊">待诊</option>
<option value="康复">康复</option>
</select>
<button @click="savePatient">保存</button>
<button @click="closeModal">取消</button>
</div>
</div>
</div>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
menu: ['患者管理', '健康报告分析', '医生排班', '系统设置'],
activeMenu: '患者管理',
dashboardCards: [
{ title: '总患者数', value: '1500 人' },
{ title: '住院患者', value: '300 人' },
{ title: '待诊患者', value: '450 人' },
{ title: '康复患者', value: '750 人' }
],
patientStatusFilter: '',
healthConditionFilter: '',
departmentFilter: '',
patients: [
{ id: 1, patientId: 'P001', name: '张三', department: '内科', healthCondition: '健康', status: '住院' },
{ id: 2, patientId: 'P002', name: '李四', department: '外科', healthCondition: '轻度疾病', status: '待诊' },
{ id: 3, patientId: 'P003', name: '王五', department: '妇科', healthCondition: '重度疾病', status: '康复' }
],
showModal: false,
modalData: {}
};
},
computed: {
filteredPatients() {
return this.patients.filter(patient => {
return (
(this.patientStatusFilter === '' || patient.status === this.patientStatusFilter) &&
(this.healthConditionFilter === '' || patient.healthCondition === this.healthConditionFilter) &&
(this.departmentFilter === '' || patient.department === this.departmentFilter)
);
});
}
},
methods: {
selectMenu(item) {
this.activeMenu = item;
},
editPatient(patient) {
this.modalData = Object.assign({}, patient);
this.showModal = true;
},
deletePatient(id) {
this.patients = this.patients.filter(patient => patient.id !== id);
},
closeModal() {
this.showModal = false;
},
savePatient() {
const index = this.patients.findIndex(patient => patient.id === this.modalData.id);
if (index !== -1) {
this.patients.splice(index, 1, this.modalData);
}
this.closeModal();
},
renderHealthStatusChart() {
const chart = echarts.init(document.getElementById('health-status-chart'));
const option = {
title: { text: '健康状况分析' },
tooltip: { trigger: 'item' },
series: [
{
name: '健康状况',
type: 'pie',
radius: '50%',
data: [
{ value: 800, name: '健康' },
{ value: 400, name: '轻度疾病' },
{ value: 300, name: '重度疾病' }
]
}
]
};
chart.setOption(option);
},
renderDoctorScheduleChart() {
const chart = echarts.init(document.getElementById('doctor-schedule-chart'));
const option = {
title: { text: '医生排班情况' },
tooltip: { trigger: 'axis' },
xAxis: { type: 'category', data: ['周一', '周二', '周三', '周四', '周五'] },
yAxis: { type: 'value' },
series: [
{ name: '就诊人数', type: 'bar', data: [50, 60, 70, 65, 80], color: '#00796b' }
]
};
chart.setOption(option);
}
},
mounted() {
this.renderHealthStatusChart();
this.renderDoctorScheduleChart();
}
});
</script>
</body>
</html>全部评论 (0)
还没有任何评论哟~