|
@ -0,0 +1,267 @@
|
|
|
<!DOCTYPE html>
|
|
|
<html lang="en">
|
|
|
<head>
|
|
|
<meta charset="UTF-8" />
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
|
<title>健康监测</title>
|
|
|
<link rel="stylesheet" type="text/css" href="../../../css/bootstrap.min.css" />
|
|
|
<link rel="stylesheet" type="text/css" href="../../../css/style.min.css" />
|
|
|
<link rel="stylesheet" type="text/css" href="../../../css/cross.css" />
|
|
|
<link rel="stylesheet" href="../../../plugins/toastr/toastr.min.css" />
|
|
|
<link rel="stylesheet" href="../../../plugins/element-ui/element-ui.css" />
|
|
|
<link rel="stylesheet" type="text/css" href="../css/date.css" />
|
|
|
<link rel="stylesheet" href="../css/common.css" />
|
|
|
<style>
|
|
|
#app {
|
|
|
padding: 10px;
|
|
|
font-size: 14px;
|
|
|
}
|
|
|
.body-record-box {
|
|
|
padding: 0 16px;
|
|
|
}
|
|
|
.title {
|
|
|
font-size: 18px;
|
|
|
position: relative;
|
|
|
margin-top: 8px;
|
|
|
}
|
|
|
.title::before {
|
|
|
height: 18px;
|
|
|
position: absolute;
|
|
|
left: -8px;
|
|
|
top: 50%;
|
|
|
transform: translateY(-50%);
|
|
|
content: '';
|
|
|
width: 3px;
|
|
|
background: #17b3ec;
|
|
|
}
|
|
|
.flex {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
}
|
|
|
.body-record-item {
|
|
|
justify-content: space-between;
|
|
|
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
padding: 8px 0;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
}
|
|
|
.ml10 {
|
|
|
margin-left: 10px;
|
|
|
}
|
|
|
.device-box {
|
|
|
padding: 0 16px;
|
|
|
}
|
|
|
.device-item {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
padding: 8px 0;
|
|
|
}
|
|
|
.device-item .device-info {
|
|
|
line-height: 28px;
|
|
|
}
|
|
|
.add-btn {
|
|
|
margin: 20px auto;
|
|
|
}
|
|
|
.health-protect-box {
|
|
|
padding: 0 16px;
|
|
|
}
|
|
|
.health-protect-item {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
padding: 8px 0;
|
|
|
}
|
|
|
.protect-label {
|
|
|
}
|
|
|
</style>
|
|
|
</head>
|
|
|
<body>
|
|
|
<div id="app" v-clock>
|
|
|
<el-tabs v-model="active" type="card">
|
|
|
<el-tab-pane label="体征记录" name="body">
|
|
|
<div class="body-record-box">
|
|
|
<div class="title">慢病体征</div>
|
|
|
<div class="body-record-item" @click="openBodyRecordDetail(0)">
|
|
|
<div class="record-label">
|
|
|
<div>血压</div>
|
|
|
<div>2024-10-14 10:21 设备上传</div>
|
|
|
</div>
|
|
|
<div class="record-value flex">
|
|
|
<div>
|
|
|
<div style="text-align: right">122/71</div>
|
|
|
<div>脉搏:56次/分</div>
|
|
|
</div>
|
|
|
<i class="el-icon-arrow-right ml10"></i>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="body-record-item" @click="openBodyRecordDetail(1)">
|
|
|
<div class="record-label">
|
|
|
<div>血糖</div>
|
|
|
<div>2024-10-14 10:21 设备上传</div>
|
|
|
</div>
|
|
|
<div class="record-value flex">
|
|
|
<el-tag type="danger">偏高</el-tag>
|
|
|
<span>18.5</span>
|
|
|
<i class="el-icon-arrow-right ml10"></i>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="title">一般检查</div>
|
|
|
<div class="body-record-item" @click="openBodyRecordDetail(2)">
|
|
|
<div class="record-label">
|
|
|
<div>身高体重</div>
|
|
|
<div>2024-10-14 10:21 手动记录</div>
|
|
|
</div>
|
|
|
<div class="record-value flex">
|
|
|
<el-tag>正常</el-tag>
|
|
|
<i class="el-icon-arrow-right ml10"></i>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="body-record-item" @click="openBodyRecordDetail(3)">
|
|
|
<div class="record-label">
|
|
|
<div>腰围</div>
|
|
|
<div>2024-10-14 10:21 手动记录</div>
|
|
|
</div>
|
|
|
<div class="record-value flex">
|
|
|
<span>56cm</span>
|
|
|
<i class="el-icon-arrow-right ml10"></i>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="body-record-item" @click="openRecordDetail(4)">
|
|
|
<div class="record-label">
|
|
|
<div>心率</div>
|
|
|
<div>2024-10-14 10:21 设备上传</div>
|
|
|
</div>
|
|
|
<div class="record-value flex">
|
|
|
<span>88次/分</span>
|
|
|
<i class="el-icon-arrow-right ml10"></i>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-tab-pane>
|
|
|
<el-tab-pane label="智能设备" name="device">
|
|
|
<div class="device-box">
|
|
|
<div class="device-item" v-for="(item,i) in deviceList" :key="i">
|
|
|
<div class="flex">
|
|
|
<img src="" alt="" />
|
|
|
<div>
|
|
|
<div class="device-info">{{item.name}}</div>
|
|
|
<div class="device-info">{{item.time}}</div>
|
|
|
<div class="device-info">{{item.people}}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<i class="el-icon-arrow-right ml10"></i>
|
|
|
</div>
|
|
|
<div class="flex" style="justify-content: center">
|
|
|
<el-button class="add-btn" type="primary">添加设备</el-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-tab-pane>
|
|
|
<el-tab-pane label="保健记录" name="healthProtect">
|
|
|
<div class="health-protect-box">
|
|
|
<div class="title">保健记录</div>
|
|
|
<div class="health-protect-item" v-for="(item,i) in healthProtectList" :key="i">
|
|
|
<div class="protect-label">
|
|
|
<div>{{item.name}}</div>
|
|
|
<div>{{item.time}} {{item.recordMehtd}}</div>
|
|
|
</div>
|
|
|
<div class="flex">
|
|
|
<span>{{item.lastData}}</span>
|
|
|
<i class="el-icon-arrow-right ml10"></i>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-tab-pane>
|
|
|
</el-tabs>
|
|
|
</div>
|
|
|
<script type="text/javascript" src="../../../js/vue.js"></script>
|
|
|
<script type="text/javascript" src="../../../js/jquery-2.2.4.js"></script>
|
|
|
<script type="text/javascript" src="../../../js/es6-promise.js" charset="utf-8"></script>
|
|
|
<script type="text/javascript" src="../../../plugins/toastr/toastr.min.js"></script>
|
|
|
<script type="text/javascript" src="../../../plugins/element-ui/element-ui.js"></script>
|
|
|
<script type="text/javascript" src="../../../api/http-request.js"></script>
|
|
|
<script type="text/javascript" src="../../../plugins/layer/layer.min.js"></script>
|
|
|
<script type="text/javascript" src="../../../api/rehabilitation-api.js"></script>
|
|
|
<script type="text/javascript" src="../../../api/recover_api.js"></script>
|
|
|
<script type="text/javascript" src="../../../js/underscore-1.9.1.js"></script>
|
|
|
<script type="text/javascript" src="../../../js/util.js" charset="utf-8"></script>
|
|
|
<script>
|
|
|
new Vue({
|
|
|
el: '#app',
|
|
|
data() {
|
|
|
return {
|
|
|
active: 'body',
|
|
|
deviceList: [
|
|
|
{
|
|
|
name: '脉搏仪',
|
|
|
time: '2023-11-13 10:50:14',
|
|
|
people: '患者绑定'
|
|
|
},
|
|
|
{
|
|
|
name: '华米手表',
|
|
|
time: '2023-11-13 10:50:14',
|
|
|
people: '患者绑定'
|
|
|
}
|
|
|
],
|
|
|
healthProtectList: [
|
|
|
{
|
|
|
name: '运动',
|
|
|
time: '2024-10-14 10:21',
|
|
|
recordMehtd: '手动记录',
|
|
|
lastData: '跑步'
|
|
|
},
|
|
|
{
|
|
|
name: '用药',
|
|
|
time: '2024-10-14 10:21',
|
|
|
recordMehtd: '手动记录',
|
|
|
lastData: '阿司匹林'
|
|
|
},
|
|
|
{
|
|
|
name: '饮食',
|
|
|
time: '2024-10-14 10:21',
|
|
|
recordMehtd: '设备上传',
|
|
|
lastData: '黄瓜'
|
|
|
}
|
|
|
]
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
openBodyRecordDetail(key) {
|
|
|
var title = ""
|
|
|
switch (key){
|
|
|
case 0:
|
|
|
title = "血压记录"
|
|
|
break;
|
|
|
case 1:
|
|
|
title = "血糖记录"
|
|
|
break;
|
|
|
case 2:
|
|
|
title = "身高体重"
|
|
|
break;
|
|
|
case 3:
|
|
|
title = "腰围"
|
|
|
break;
|
|
|
case 4:
|
|
|
title = "心率"
|
|
|
break;
|
|
|
}
|
|
|
layer.open({
|
|
|
type: 2,
|
|
|
area: ['700px', '700px'],
|
|
|
shade: 0.5,
|
|
|
title: title,
|
|
|
fixed: true, //不固定
|
|
|
maxmin: true,
|
|
|
closeBtn: 1,
|
|
|
// shift: 5,
|
|
|
shadeClose: false, //点击遮罩关闭层
|
|
|
content: './healthBodyRecord.html?key='+key
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
</script>
|
|
|
</body>
|
|
|
</html>
|