raolu
/
PC-application


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486
							<!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;
        cursor: pointer;
      }
      .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;
        cursor: pointer;
      }
      .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;
        cursor: pointer;
      }
      .protect-label {
      }
      .device-title {
        font-weight: bold;
        font-size: 16px;
      }
    </style>
  </head>
  <body>
    <div id="app" v-cloak>
      <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,bodyData.xy.recordDate)" v-if="bodyData.xy">
              <div class="record-label">
                <div>血压</div>
                <div>{{formatDate(bodyData.xy.recordDate)}} {{getRecordType(bodyData.xy.deviceSn)}}</div>
              </div>
              <div class="record-value flex">
                <div>
                  <div style="text-align: right">{{bodyData.xy.value1}}/{{bodyData.xy.value2}}</div>
                  <div>脉搏：{{bodyData.xy.value3}}次/分</div>
                </div>
                <i class="el-icon-arrow-right ml10"></i>
              </div>
            </div>
            <div class="body-record-item" @click="openBodyRecordDetail(1,bodyData.xt.recordDate)" v-if="bodyData.xt">
              <div class="record-label">
                <div>血糖</div>
                <div>{{formatDate(bodyData.xt.recordDate)}} {{bodyData.xt.during}} {{getRecordType(bodyData.xt.deviceSn)}}</div>
              </div>
              <div class="record-value flex">
                <el-tag :type="bodyData.xt.tagType" v-if="bodyData.xt.tagName" style="margin-right: 10px">{{bodyData.xt.tagName}}</el-tag>
                <span>{{ bodyData.xt.value1}}</span>
                <i class="el-icon-arrow-right ml10"></i>
              </div>
            </div>
            <div class="title">一般检查</div>
            <div class="body-record-item" @click="openBodyRecordDetail(2, bodyData.tz.recordDate)" v-if="bodyData.tz">
              <div class="record-label">
                <div>身高体重</div>
                <div>{{formatDate(bodyData.tz.recordDate)}} {{getRecordType(bodyData.tz.deviceSn)}}</div>
              </div>
              <div class="record-value flex">
                <el-tag :type="getTixingType(bodyData.tz.value4)" effect="dark">{{getTixingName(bodyData.tz.value4)}}</el-tag>
                <i class="el-icon-arrow-right ml10"></i>
              </div>
            </div>
            <div class="body-record-item" @click="openBodyRecordDetail(3, bodyData.sg.recordDate)" v-if="bodyData.sg">
              <div class="record-label">
                <div>腰围</div>
                <div>{{formatDate(bodyData.sg.recordDate)}} {{getRecordType(bodyData.sg.deviceSn)}}</div>
              </div>
              <div class="record-value flex">
                <span>{{bodyData.sg.value1}}cm</span>
                <i class="el-icon-arrow-right ml10"></i>
              </div>
            </div>
            <div class="body-record-item" @click="openBodyRecordDetail(4, bodyData.xl.recordDate)" v-if="bodyData.xl">
              <div class="record-label">
                <div>心率</div>
                <div>{{bodyData.xl.recordDate}} {{getRecordType(bodyData.xl.deviceSn)}}</div>
              </div>
              <div class="record-value flex">
                <span>{{bodyData.xl.value1}}次/分</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" @click="openDeviceDetail(item)">
              <div class="flex">
                <img :src="item.devicePhoto" alt="" style="width: 100px" />
                <div style="margin-left: 16px">
                  <div class="device-info device-title">{{item.deviceName}}</div>
                  <div class="device-info">绑定时间：{{formatDate(item.czrq)}}</div>
                  <div class="device-info" v-if="item.categoryCode != 10 && item.categoryCode != 11">绑定人：{{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" @click="addDevice">添加设备</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" @click="openHealthProtectDetail(i,item.time)">
              <div class="protect-label">
                <div>{{item.name}}</div>
                <div>{{item.time}} {{item.recordMethod}}</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: [],
            healthProtectList: [
              {
                name: '运动',
                time: ' ',
                recordMethod: ' ',
                lastData: ' '
              },
              {
                name: '用药',
                time: '',
                recordMethod: '',
                lastData: ''
              },
              {
                name: '饮食',
                time: '',
                recordMethod: '',
                lastData: ''
              }
            ],
            patient: '',
            bodyData: {},
            healthProtect: {}
          }
        },
        mounted() {
          this.patient = GetRequest().patient
          this.getBodyData()
          this.getDeviceList()
          this.getHealthProtect()
        },
        methods: {
          getBodyData() {
            const vm = this
            httpRequest.get('doctor/health_index/last', { data: { patient: this.patient } }).then(function (res) {
              vm.bodyData = res.data
              vm.getXtType(vm.bodyData.xt)
            })
          },
          getDeviceList() {
            const vm = this
            httpRequest.get('doctor/device/PatientDeviceList', { data: { page: 1, pagesize: 100, patient: this.patient } }).then(function (res) {
              vm.deviceList = res.data.map(function (item) {
                var bindUser = '患者绑定'
                if (!!item.doctor) {
                  bindUser = item.doctorName
                }
                item.people = bindUser
                return {
                  ...item,
                  people: bindUser
                }
              })
            })
          },
          getHealthProtect() {
            const vm = this

            httpRequest.get('doctor/health_record/recent', { data: { patient: this.patient } }).then(function (res) {
              const healthProtect = res.data

              for (let i in healthProtect) {
                switch (i) {
                  case 'sprot':
                    vm.healthProtectList[0].lastData = healthProtect.sprot.sports
                    vm.healthProtectList[0].time = healthProtect.sprot.recordDate
                    vm.healthProtectList[0].recordMethod = vm.getBJRecordType(healthProtect.sprot.source)
                    break
                  case 'medication':
                    vm.healthProtectList[1].lastData = healthProtect.medication.medication
                    vm.healthProtectList[1].time = healthProtect.medication.recordDate
                    vm.healthProtectList[1].recordMethod = vm.getBJRecordType(healthProtect.medication.source)
                    break
                  case 'diet':
                    vm.healthProtectList[2].lastData = healthProtect.diet.diet
                    vm.healthProtectList[2].time = healthProtect.diet.recordDate.substring(0,10)
                    vm.healthProtectList[2].recordMethod = vm.getBJRecordType(healthProtect.diet.source)
                    break
                }
              }

              vm.$forceUpdate()
            })
          },
          getBJRecordType(isDevice) {
            return isDevice === 0 ? '手动记录' : isDevice == 1 ? '设备上传' : ''
          },
          openBodyRecordDetail(key, time) {
            var title = ''
            switch (key) {
              case 0:
                title = '血压记录'
                break
              case 1:
                title = '血糖记录'
                break
              case 2:
                title = '身高体重'
                break
              case 3:
                title = '腰围'
                break
              case 4:
                title = '心率'
                break
            }

            top.layer.open({
              type: 2,
              area: ['700px', '700px'],
              shade: 0.5,
              title: title,
              fixed: true, //不固定
              maxmin: true,
              closeBtn: 1,
              // shift: 5,
              shadeClose: false, //点击遮罩关闭层
              content: `../../rehabilitation/html/healthBodyRecord.html?key=${key}&patient=${this.patient}&time=${time.substring(0, 10)}`
            })
          },
          openHealthProtectDetail(key, time) {
            var title = ''
            switch (key) {
              case 0:
                title = '运动记录'
                break
              case 1:
                title = '用药记录'
                break
              case 2:
                title = '饮食记录'
                break
            }
            top.layer.open({
              type: 2,
              area: ['700px', '700px'],
              shade: 0.5,
              title: title,
              fixed: true, //不固定
              maxmin: true,
              closeBtn: 1,
              // shift: 5,
              shadeClose: false, //点击遮罩关闭层
              content: `../../rehabilitation/html/healthProtect.html?key=${key}&patient=${this.patient}&time=${time}`
            })
          },
          addDevice() {
            var vm = this
            top.layer.open({
              type: 2,
              area: ['700px', '700px'],
              shade: 0.5,
              title: '新增设备',
              fixed: true, //不固定
              maxmin: true,
              closeBtn: 1,
              // shift: 5,
              shadeClose: false, //点击遮罩关闭层
              content: '../../rehabilitation/html/device.html?patient=' + this.patient,
              end: function () {
                vm.getDeviceList()
              }
            })
          },
          openDeviceDetail(item) {
            if (item.categoryCode == '11') {
              return
            }
            var title = ''
            switch (item.categoryCode) {
              case '2':
                title = '血压计'
                break
              case '4':
                title = '智能手表'
                break
              case '1':
                title = '血糖仪'
                break
            }
            top.layer.open({
              type: 2,
              area: ['700px', '700px'],
              shade: 0.5,
              title: title,
              fixed: true, //不固定
              maxmin: true,
              closeBtn: 1,
              // shift: 5,
              shadeClose: false, //点击遮罩关闭层
              content: `../../rehabilitation/html/device.html?patient=${this.patient}&deviceId=${item.deviceId}&id=${item.id}`
            })
          },
          getRecordType(isDevice) {
            return isDevice === null ? '手动记录' : isDevice != null ? '设备上传' : ''
          },
          getTixingName(value) {
            switch (value) {
              case '-1':
                return '偏胖'
              case '1':
                return '偏瘦'
              default:
                return '正常'
            }
          },
          getTixingType(value) {
            switch (value) {
              case '-1':
                return 'danger'
              case '1':
                return 'success'
              default:
                return ''
            }
          },
          getXtType(o) {
            var xuetangDuring = ['', '早餐前', '早餐后', '午餐前', '午餐后', '晚餐前', '晚餐后', '睡前']
            var duringIndex = o.value2 ? o.value2 : 0
            if (o.flag == 2) {
              if (duringIndex == 1) {
                o.during = '餐前血糖'
              } else if (duringIndex == 2) {
                o.during = '餐后血糖'
              } else if (duringIndex == 3) {
                o.during = '随机血糖'
              }
            } else {
              o.during = duringIndex ? xuetangDuring[duringIndex] : ''
            }

            o.value = o.value1
            var levels = [[], [7.0, 3.9], [11.1, 4.0], [7.0, 3.9], [11.1, 4.0], [7.0, 3.9], [11.1, 4.0], [7.0, 3.9]][duringIndex]

            o.tagType = this.getLevelClazzType(o.value, levels[0], levels[1])
            o.tagName = this.getLevelClazzName(o.value, levels[0], levels[1])
          },
          getLevelClazzType(value, max, min) {
            if (!value || (!max && !min)) {
              return ''
            }

            var value = parseFloat(value)
            if (value < min) {
              return 'success'
            } else if (value > max) {
              return 'danger'
            } else {
              return ''
            }
          },
          getLevelClazzName(value, max, min) {

            if (!value || (!max && !min)) {
              return ''
            }

            var value = parseFloat(value)
            if (value < min) {
              return '偏低'
            } else if (value > max) {
              return '偏高'
            } else {
              return '正常'
            }
          },
          getBindUser() {
            this.deviceList.forEach(function (item) {
              var bindUser = '患者绑定'
              if (!!rowData.doctor) {
                bindUser = item.doctorName
              }
              item.people = bindUser
            })
          },
          formatDate(date){
            return date.substring(0,16)
          }
        }
      })
    </script>
  </body>
</html>