123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267 |
- <!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>
|