xybpkmweb/src/components/PatIndex.vue

<template>
  <div class="container">
    <div v-if="latestCase.id" style="position:absolute;width:100%;">
      <div class="bgcolor">
        <div class="docinfo">
          <img class="docavatar" src="../assets/images/doch1.jpg" width="60rem" height="60rem" />
          <p class="docname">{{patinfo.name}} 您好!</p>
        </div>
      </div>
      <!-- <div class="bgimg"></div> -->
      <div class="content">
        <div class="injectRecord">
          <div v-if="latestCase.hasrecords">
            <div class="formTitle">体内FVIII活性水平实时预报</div>
            <div class="lrcontainer">
              <!-- <div class="lritem left">
                <img class="ratioBg3" src="../assets/images/personbg.png" width="80" height="216"></img>
                <div class="ratioBg" :style="'height:'+ratioHeight+'px;'">
                </div>
                <img class="ratioBg2" src="../assets/images/personbg1.png" width="80" height="216"></img>
              </div> -->
              <div class="lritem left">
                <img height="100%" v-if="latestCase.FVIII<1" class="ratioBg3" src="../assets/images/_1.png" 
                  ></img>
                <img v-if="latestCase.FVIII>=1 && latestCase.FVIII<=3" class="ratioBg3" src="../assets/images/1-3.png"
                  width="100%"></img>
                <img v-if="latestCase.FVIII>3 && latestCase.FVIII<=5" class="ratioBg3" src="../assets/images/3-5.png"
                  width="100%"></img>
                <img v-if="latestCase.FVIII>5 && latestCase.FVIII<=15" class="ratioBg3" src="../assets/images/5-15.png"
                  width="100%"></img>
                <img v-if="latestCase.FVIII>15" class="ratioBg3" src="../assets/images/_15.png"
                  width="100%"></img>
              </div>

              <div class="lritem right">
                <!-- <div class="rowfont" style="margin:5px 0px;color:red;font-weight:bold;font-size:1.4rem">
                  FVIII浓度：{{latestCase.FVIII}}%</div> -->
                <div class="rowfont" style="
                    margin:5px 0px;color:red;
                    font-weight:bold;font-size:4.2rem;
                    text-align: center;height: 75px;line-height: 75px;">
                  {{latestCase.FVIII}}%</div>
                <!-- <div class="rowfont">参考方案</div>
                <div class="rowfont">1.产品:{{latestCase.ckmpro}}</div>
                <div class="rowfont">2.剂量:{{latestCase.ckzsjl}}</div>
                <div class="rowfont">3.频次:{{latestCase.ckmfreq}}</div>
                <div class="rowfont">本结果仅供参考,</div>
                <div class="rowfont">具体治疗方案请遵医嘱执行</div> -->
                <div v-if="latestCase.FVIII < 1">
                  <div class="rowfont" style="font-weight:bold;font-size:1.4rem;color:#3B4070;margin-bottom:5px;">
                    < 1% 
                  </div>
                  <div class="rowfont" style="font-weight:bold;font-size:1.4rem;color:#3B4070;">建议咨询医生</div>
                </div>
                <div v-if="latestCase.FVIII >= 1 && latestCase.FVIII <= 3">
                  <div class="rowfont" style="font-weight:bold;font-size:1.4rem;color:#3B4070;margin-bottom:5px;">
                    1% ~ 3%
                  </div>
                  <div class="rowfont" style="font-weight:bold;font-size:1.2rem;color:#3B4070;">适宜无风险活动</div>
                  <div class="rowfont" style="font-weight:bold;font-size:1.0rem;color:#3B4070;">(如看书、看电视、家务等)</div>
                </div>
                <div v-if="latestCase.FVIII > 3 && latestCase.FVIII <= 5">
                  <div class="rowfont" style="font-weight:bold;font-size:1.4rem;color:#3B4070;margin-bottom:5px;">
                    3% ~ 5%
                  </div>
                  <div class="rowfont" style="font-weight:bold;font-size:1.2rem;color:#3B4070;">适宜低风险活动</div>
                  <div class="rowfont" style="font-weight:bold;font-size:0.8rem;color:#3B4070;">(如散步、慢跑、无对抗运动等)</div>
                </div>
                <div v-if="latestCase.FVIII > 5 && latestCase.FVIII <= 15">
                  <div class="rowfont" style="font-weight:bold;font-size:1.4rem;color:#3B4070;margin-bottom:5px;">
                    5% ~ 15%
                  </div>
                  <div class="rowfont" style="font-weight:bold;font-size:1.2rem;color:#3B4070;">适宜中风险活动</div>
                  <div class="rowfont" style="font-weight:bold;font-size:0.8rem;color:#3B4070;">(如爬山、骑行、球类运动等)</div>
                </div>
                <div v-if="latestCase.FVIII > 15">
                  <div class="rowfont" style="font-weight:bold;font-size:1.4rem;color:#3B4070;margin-bottom:5px;">
                    >15%
                  </div>
                  <div class="rowfont" style="font-weight:bold;font-size:1.2rem;color:#3B4070;">适高风险活动</div>
                  <div class="rowfont" style="font-weight:bold;font-size:0.8rem;color:#3B4070;">(如滑雪、滑冰、滑板等)</div>
                </div>
              </div>
            </div>
          </div>
          <div class="footer">
            <div class="jbbtn" @click="goPage('/patclockin')">注射打卡</div>
            <div class="jbbtn" @click="goPage('/patinjectionlist')">注射记录</div>
            <div class="jbbtn" @click="goPage('/procaselist')">PK及方案</div>
            <div class="jbbtn" @click="logout">退出登录</div>
            <div class="usageInfo" @click="goPage('agreedoc?type=2')">使用说明</div>
          </div>
          <div class="desc">
              <img src="../assets/images/desc.png" alt="" width="100%">
          </div>
        </div>
      </div>
    </div>
    <!-- 未查询到病例信息 -->
    <div v-else>
      <div class="content">
        <!-- <div class="bgimg">
            <div class="docinfo">
              <img class="docavatar" src="../assets/images/doch1.jpg" width="60rem" height="60rem" />
              <p class="docname">{{patinfo.name}} 您好!</p>
            </div>
            <div style="margin:16.8rem auto;width:50%;font-size:1.4rem;margin-top:16.8rem">
                未查询到您的信息请等待主治医生进行信息录入
              </div>
          </div> -->

        <div style="position:relative;">
          <img src="../assets/images/infobg.png" alt="" width="100%" style="">
          <div class="docinfo">
            <img class="docavatar" src="../assets/images/doch1.jpg" width="60rem" height="60rem" />
            <p class="docname">{{patinfo.name}} 您好!</p>
          </div>
          <div style="margin:40px auto;width:80%;font-size:1.4rem;">
            未查询到您的信息请等待主治医生进行信息录入
          </div>
        </div>
        <div class="footer">
          <div class="jbbtn" @click="logout">退出登录</div>
        </div>
        <div class="desc">
            <img src="../assets/images/desc.png" alt="" width="100%">
        </div>
      </div>
      
    </div>
    <!-- <div class="desc">
        <span>1、本结果仅供参考，具体治疗方案请遵医嘱执行</span><br>
        <span>2、Target plasma factor levels for personalized treatment in haemophilia: a Delphi consensus statement，
          Alorio,et al.Haemophilia,2017</span><br>
        <span>3、Optimising prophylaxis in haemophilia A: The ups and downs of treatment，Erik Berntorp,et al. Blood
          Rev, 2021 Nov</span>
    </div> -->
    
  </div>
</template>

<script>
  import {
    Cell
  } from 'mint-ui'
  export default {
    name: 'Index',
    components: {
      Cell
    },
    data() {
      return {
        msg: 'Welcome to Your Vue.js App',
        inflag: 0,
        patinfo: {},
        latestCase: {},
        ratioHeight: 0
      }
    },
    methods: {
      goPage(path) {
        this.$router.push(path)
      },
      logout() {
        window.localStorage.removeItem('token')
        window.localStorage.removeItem('authinfo')
        window.location.reload()
      },
      getData() {
        this.$api.getAccountInfo().then(res => {
          if (!res.data.code) {
            this.patinfo = res.data.data

            this.$api.getPatientLatestCase().then(res => {
              if (!res.data.code) {
                this.latestCase = res.data.data
                this.ratioHeight = 216 / 100 * this.latestCase.FVIII
                // this.latestCase.FVIII = 7
              }
            })
          }
        })
      }
    },
    created() {
      this.getData()
    }
  }

</script>

<style scoped lang="scss">
  .container {
    .content {
      height: 100%;
      margin-top: 0px;
    }

    height: 100%;
    background: #fff;

    .bgcolor {
      width: 100%;
      height: 11rem;
      position: absolute;
      background: #016AFA;
    }

    .bgimg {
      width: 100%;
      height: 24.8rem;
      // border:1px solid red;
      /* top: 10rem; */
      position: absolute;
      /* z-index:-1; */
      background-image: url("../assets/images/infobg.png");
      background-size: 100% 100%;
    }

    .docinfo {
      position: absolute;
      top: 30%;
      left: 0;
      right: 0;

      .docavatar {
        border-radius: 60rem;
      }

      .docname {
        color: #fff;
        margin: 0.2rem;
        font-size: 1.2rem;
      }

      z-index:3;
    }

    .injectRecord {
      margin-top: 12.5rem;
    }

    .formTitle {
      height: 1rem;
      line-height: 1rem;
      color: #2882F4;
      padding-bottom: 0.5rem;
      font-weight: bold;
      font-size: 1.2rem;
      margin-top: 9rem;
    }

    .lrcontainer {
      display: flex;
      width: 80%;
      margin: auto;
      margin-top: 2rem;
      /* margin-bottom: 2rem; */
      /* height: 246px; */

      .right {
        left: 30%;
        width: 70%;
      }

      .left {
        width: 35%;
        margin-top: 10px;
        position: relative;
        /* overflow: hidden; */
        margin-left:5%;

      }

      .lritem {
        justify-content: space-between;
        /* height: 196px; */
        /* margin-left:1.6rem; */

        .ratioBg {
          width: 78px;
          position: absolute;
          left: 0;
          right: 0;
          bottom: 20px;
          margin: auto;
          z-index: 0;
          /* background:#2D9AF4; */
          background-image: url("../assets/images/test.png");
          background-size: 100% 100%;
          height: 100px;
        }

        .ratioBg1 {
          width: 80px;
          position: absolute;
          left: 0;
          right: 0;
          bottom: 20px;
          margin: auto;
          z-index: -1;
          /* background:#64B3F6; */

          height: 216px;
          ;
        }

        .ratioBg2 {
          width: 80px;
          position: absolute;
          left: 0;
          right: 0;
          bottom: 20px;
          margin: auto;
          z-index: -1;
          /* background:#64B3F6; */
          /* height: 150px; */
        }

        .ratioBg3 {
          /* width: 80px; */
          position: absolute;
          left: -1rem;
          top:0;
          right: 0;
          bottom: 0;
          margin: auto;
          z-index: 1;
          /* height: 216px; */
        }

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

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

    /deep/ .right .mint-cell-wrapper {
      padding: 0px 20px;
      font-size: 1rem;
      background-size: 0px 0px;
    }

    .footer {
      margin-top: 20px;
      margin-bottom: 4rem;
      .jbbtn{
        margin-top: 10px;
      }

      .usageInfo {
        width: 6rem;
        height: 2.4rem;
        line-height: 2.4rem;
        border-radius: 1rem;
        background: #595758;
        color: #fff;
        margin: 2rem 1rem;
      }
    }
  }

  .rowfont {
    text-align: center;
  }

  .desc{
    text-align: left;
    font-size:12px;
    color:#ccc;
    padding:1rem;
  }

</style>