raolu
/
PC-application


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291
							<!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: 20px;
        position: relative;
        height: 100%;
      }
      .box {
        display: flex;
        flex-wrap: wrap;
        padding: 12px;
      }
      .item {
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      .item .img-box {
        width: 200px;
        height: 200px;
        background-color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .item img {
        width: 100px;
      }
      .device-info {
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 18px;
      }
      .device-info img {
        width: 180px;
        margin: 10px 0;
      }
      .form-item {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
      }
      .form-item .form-label {
        width: 70px;
      }
      .title {
        font-size: 18px;
        position: relative;
        margin-left: 6px;
        margin-bottom: 10px;
      }
      .title::before {
        content: '';
        width: 3px;
        height: 14px;
        position: absolute;
        left: -8px;
        top: 50%;
        transform: translateY(-50%);
        background-color: #17b3ec;
      }
      .ml6 {
        margin-left: 6px;
      }
      .add-device-btn {
        position: absolute;
        bottom: 28px;
        left: 50%;
        transform: translateX(-50%);
        width: 400px;
      }
      .back-btn{
        position: absolute;
        bottom: 80px;
        left: 50%;
        transform: translateX(-47.5%);
        width: 400px;
      }
    </style>
  </head>
  <body>
    <div id="app" v-cloak>
      <template v-if="step==1">
        <el-tabs v-model="active" type="card" @tab-click="tabChange">
          <el-tab-pane label="血压计" name="xueya" class="box">
            <div v-for="item in xueyaList" :id="item.id" class="item" @click="selectItem(item)">
              <div class="img-box">
                <img :src="item.photo" alt="" v-if="item.photo!=''" />
                <img src="../../../images/img.png" alt="" v-else />
              </div>
              <span>{{item.name}}</span>
            </div>
          </el-tab-pane>
          <el-tab-pane label="智能手表" name="watch" class="box">
            <div v-for="item in watchList" :id="item.id" class="item" @click="selectItem(item)">
              <div class="img-box">
                <img :src="item.photo" alt="" v-if="item.photo!=''" />
                <img src="../../../images/img.png" alt="" v-else />
              </div>
              <span>{{item.name}}</span>
            </div>
          </el-tab-pane>
          <el-tab-pane label="血糖仪" name="xuetang" class="box">
            <div v-for="item in xuetangList" :id="item.id" class="item" @click="selectItem(item)">
              <div class="img-box">
                <img :src="item.photo" alt="" v-if="item.photo!=''" />
                <img src="../../../images/img.png" alt="" v-else />
              </div>
              <span>{{item.name}}</span>
            </div>
          </el-tab-pane>
        </el-tabs>
      </template>
      <template v-else>
        <div class="device-info">
          <span>{{deviceObj.name}}</span>
          <img :src="deviceObj.photo" alt="" />
        </div>
        <div v-if="deviceObj.categoryCode == 2">
          <div class="form-item">
            <div class="form-label">SN码</div>
            <el-input v-model="query.deviceSn" :disabled="dataId" placeholder="请输入设备唯一码"></el-input>
          </div>
          <div class="form-item" v-if="deviceObj.deviceId == 6">
            <div class="form-label">SIM码</div>
            <el-input v-model="query.sim" :disabled="dataId" placeholder="请输入SIM码"></el-input>
          </div>
          <div v-if="deviceObj.isMultiUser == 1">
            <div class="title">绑定快捷键</div>
            <div v-for="(value, key) in deviceObj.multiUser">
              <el-radio v-model="query.userType" :disabled="dataId" :label="key" class="ml6">{{value}}</el-radio>
            </div>
          </div>
          绑定后，从该快捷键上传的数据将导入您的健康记录中！
        </div>
        <div v-else-if="deviceObj.categoryCode == 4">
          <div class="form-item">
            <div class="form-label">IMEI码</div>
            <el-input v-model="query.deviceSn" :disabled="dataId" placeholder="请输入设备唯一码"></el-input>
          </div>
          绑定后，智能手表监测的心率数据将自动同步导入您的健康记录中！
        </div>
        <div v-else>
          <div class="form-item">
            <div class="form-label">SN码</div>
            <el-input v-model="query.deviceSn" :disabled="dataId" placeholder="请输入设备唯一码"></el-input>
          </div>
          绑定后，血氧仪测量的数据将自动同步导入您的健康记录中！
        </div>
        <el-button class="back-btn" v-if="!dataId" @click="backFn">返回</el-button>
        <el-button class="add-device-btn" v-if="!dataId" type="primary"  @click="bindDeviceFn">立即绑定</el-button>
      </template>
    </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: 'xueya',
            patient: '',
            step: 1,
            query: {},
            xueyaList: [],
            watchList: [],
            xuetangList: [],
            deviceObj: {},
            deviceId: null,
            dataId: null
          }
        },
        methods: {
          initData() {
            const vm = this
            httpRequest.get('common/device/DeviceInfo', { data: { id: this.deviceId } }).then(function (res) {
              vm.deviceObj = res.data
              if(vm.deviceObj.isMultiUser == 1){
                vm.deviceObj.multiUser = JSON.parse(res.data.multiUser)
              }
            })
            httpRequest.get('doctor/device/PatientDeviceInfo',{data:{id: this.dataId}}).then(function(res){
              vm.query = {
                deviceSn: res.data.deviceSn,
                sim: res.data.sim,
                userType: res.data.userType
              }
              console.log(vm.query);
              
            })
          },
          tabChange(val) {
            switch (val.name) {
              case 'xueya':
                this.getXueyaList()
                break
              case 'watch':
                this.getWatchList()
                break
              case 'xuetang':
                this.getXuetangList()
                break
            }
          },
          getXueyaList() {
            const vm = this

            httpRequest.get('common/device/DeviceList', { data: { category_code: 2 } }).then(function (res) {
              vm.xueyaList = res.data
            })
          },
          getWatchList() {
            const vm = this
            httpRequest.get('common/device/DeviceList', { data: { category_code: 4 } }).then(function (res) {
              vm.watchList = res.data
            })
          },
          getXuetangList() {
            const vm = this
            httpRequest.get('common/device/DeviceList', { data: { category_code: 1 } }).then(function (res) {
              vm.xuetangList = res.data
            })
          },
          selectItem(item) {
            const vm = this
            httpRequest.get('common/device/DeviceInfo', { data: { id: item.id } }).then(function (res) {
              vm.step++
              vm.deviceObj = res.data
              if(vm.deviceObj.isMultiUser == 1){
                vm.deviceObj.multiUser = JSON.parse(res.data.multiUser)
              }
              vm.query = {}
            })
          },
          bindDeviceFn() {
            return
            const vm = this
            var b = /^[0-9a-zA-Z]*$/g
            if (!b.test(this.device_sn)) {
              this.$message.warning('对不起,您输入的SN有误,请重新输入')
            }
            let params = {
              device_sn: this.query.deviceSn,
              patient: this.patient,
              type: this.deviceObj.categoryCode
            }
            httpRequest.get('doctor/device/PatientDeviceIdcard', { data: params }).then(function (res) {
              
            })
          },
          backFn(){
            this.step = 1
          }
        },

        mounted() {
          this.getXueyaList()
          this.patient = GetRequest().patient
          this.deviceId = GetRequest().deviceId
          this.dataId = GetRequest().id
          if (this.dataId) {
            this.step = 2
            this.initData()
          }
        }
      })
    </script>
  </body>
</html>