raolu
/
PC-application


			
				
					
						
						
							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>