xybpkmweb/src/components/DiagCalcShow.vue

<template>
  <div class="container">
    <div class="bgimg"></div>
    <div class="content">
      <div class="diagShowForm">
        <div class="formTitle">FVIII药代动力学检测</div>
        <div style="display:flex;">
          <div class="rowfont" style="width:50%;">姓名</div>
          <div class="rowfont" style="width:50%;color:#888;">{{caseInfo.name}}</div>
        </div>
        <div style="display:flex;">
          <div class="rowfont" style="width:50%;">年龄</div>
          <div class="rowfont" style="width:50%;color:#888;">{{caseInfo.age}}</div>
        </div>
        <div style="display:flex;">
          <div class="rowfont" style="width:50%;">体重(kg)</div>
          <div class="rowfont" style="width:50%;color:#888;">{{caseInfo.bltz}}</div>
        </div>
        <div style="display:flex;">
          <div class="rowfont" style="width:50%;">注射产品</div>
          <div class="rowfont" style="width:50%;color:#888;">{{caseInfo.mpro}}</div>
        </div>
        <div style="display:flex;">
          <div class="rowfont" style="width:50%;">注射剂量(IU/kg)</div>
          <div class="rowfont" style="width:50%;color:#888;">{{caseInfo.zsjl}}</div>
        </div>
        <div style="display:flex;">
          <div class="rowfont" style="width:50%;">注射时间t<sub>0</sub></div>
          <div class="rowfont" style="width:50%;color:#888;">{{caseInfo.zssjt0}}</div>
        </div>
        <div style="display:flex;">
          <div class="rowfont" style="width:50%;">基础活性</div>
          <div class="rowfont" style="width:50%;color:#888;">{{caseInfo.jchx}}</div>
        </div>
        <!-- <div style="display:flex;">
          <div class="rowfont" style="width:50%;">注射后半小时内活性</div>
          <div class="rowfont" style="width:50%;color:#888;">{{caseInfo.zs30hx}}</div>
        </div> -->
        <div style="display:flex;">
          <div class="rowfont" style="width:50%;">采血时间t<sub>1</sub></div>
          <div class="rowfont" style="width:50%;color:#888;">{{caseInfo.cxsjt1}}</div>
        </div>
        <div style="display:flex;">
          <div class="rowfont" style="width:50%;">t<sub>1</sub>点活性%</div>
          <div class="rowfont" style="width:50%;color:#888;">{{caseInfo.t1hx}}</div>
        </div>
        <div style="display:flex;">
          <div class="rowfont" style="width:50%;">采血时间t<sub>2</sub></div>
          <div class="rowfont" style="width:50%;color:#888;">{{caseInfo.cxsjt2}}</div>
        </div>
        <div style="display:flex;">
          <div class="rowfont" style="width:50%;">t<sub>2</sub>点活性%</div>
          <div class="rowfont" style="width:50%;color:#888;">{{caseInfo.t2hx}}</div>
        </div>
        <div style="display:flex;">
          <div class="rowfont" style="width:50%;">采血时间t<sub>3</sub></div>
          <div class="rowfont" style="width:50%;color:#888;">{{caseInfo.cxsjt3}}</div>
        </div>
        <div style="display:flex;">
          <div class="rowfont" style="width:50%;">t<sub>3</sub>点活性%</div>
          <div class="rowfont" style="width:50%;color:#888;">{{caseInfo.t3hx}}</div>
        </div>
      </div>
      <div class="diagShowForm">
        <div class="formTitle">FVI药代动力学参数</div>
        <div style="display:flex;">
          <div class="rowfont" style="width:50%;">半衰期</div>
          <div class="rowfont" style="width:50%;color:#888;">{{caseInfo.bsq}}</div>
        </div>
        <div style="display:flex;">
          <div class="rowfont" style="width:50%;">利用率%</div>
          <div class="rowfont" style="width:50%;color:#888;">{{caseInfo.lyl*100}}</div>
        </div>
        <div style="display:flex;">
          <div class="rowfont" style="width:50%;">预期峰值活性%</div>
          <div class="rowfont" style="width:50%;color:#888;">{{caseInfo.yqfzhx}}</div>
        </div>
      </div>
      <div class="diagShowForm">
        <div class="formTitle">血友病预防治疗方案计算</div>
        <div style="display:flex;">
          <div class="rowfont" style="width:50%;">目标谷活性%</div>
          <div class="rowfont" style="width:50%;color:#888;">{{caseInfo.yfghx}}</div>
        </div>
        <div style="display:flex;">
          <div class="rowfont" style="width:50%;">注射频次</div>
          <div class="rowfont" style="width:50%;color:#888;">{{caseInfo.zspc}}</div>
        </div>
        <div style="display:flex;">
          <div class="rowfont" style="width:50%;">每次注射剂量(IU)</div>
          <div class="rowfont" style="width:50%;color:#888;">{{caseInfo.mczsjl}}</div>
        </div>
      </div>
      <div class="footer">
          <div class="jbbtn" @click="goback">返回</div>
        <div class="jbbtn" @click="goPage">下一页</div>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    Field,
    Cell
  } from 'mint-ui'
  export default {
    name: 'Index',
    components: {
      Field,
      Cell
    },
    data() {
      return {
        msg: 'Welcome to Your Vue.js App',
        caseInfo:{}
      }
    },
    methods: {
      goback(){
        this.$router.go(-1);
      },
      goPage() {
        let id = this.$route.query.id
        let role = this.$route.query.role
        let show = this.$route.query.show
        this.$router.push({'path':'/solutionpkline',query:{id:id,show:1,role:role}})
        // if(role==2){
        //   this.$router.push({'path':'/pretraitcase',query:{id:id,show:show,role:role}})
        // }else{
        //   // this.$router.push({'path':'/solutionpkline',query:{id:id}})
        //   this.$router.push({'path':'/pretraitcase',query:{id:id,show:show,role:role}})
        // }
      },
      getData(){
        let id = this.$route.query.id
        this.$api.getPatientCaseInfo({id:id}).then(res=>{
          if(!res.data.code){
            this.caseInfo = res.data.data
          }
        })
      }
    },
    created(){
      this.getData()
    }
  }

</script>

<style scoped lang="scss">
  .diagShowForm {
    width: 84%;
    margin: auto;
    margin-top: 1rem;
    background: #fff;
    padding: 1rem;
    border-radius: 5px;

    .formTitle {
      height: 1rem;
      line-height: 1rem;
      text-align: left;
      color: #2882F4;
      padding-bottom: 0.5rem;
      border-bottom: 1px solid #2882F4;
      font-weight: bold;
    }

    .mint-cell {
      min-height: 2rem;
    }

    /deep/ .mint-cell .mint-cell-title {
      width: 70%;
      text-align: left;
    }

    /deep/ .mint-cell .mint-cell-value {
      width: 50%;
      text-align: right;
    }
  }
  .container{
    height: 100%;
  }

  .footer{
    display: flex;
    .jbbtn {
      width: 42%;
      margin-top: 1rem;
      margin-bottom: 1rem;
    }
  }

</style>