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 class="formTitle">体内FVIII活性水平实时预报</div>
          <div class="lrcontainer">
            <div class="lritem left">
              <!-- <div class="personRatio">

              </div> -->

              <img class="ratioBg3" src="../assets/images/personbg.png" width="80" height="216"></img>
              <div class="ratioBg" :style="'height:'+ratioHeight+'px;'" >
                <!-- <img src="../assets/images/ratiotop.png" width="100%" style="position:absolute;top:-16px;left:0;right:0;margin:auto;" ></img> -->
              </div>
              <img class="ratioBg2" src="../assets/images/personbg1.png" width="80" height="216"></img>

            </div>
            <div class="lritem right">
              <!-- <p style="margin:5px 0px;color:red;font-weight:bold;font-size:1.5rem">FVIII浓度：{{latestCase.FVIII}}</p> -->
              <div class="rowfont" style="margin:5px 0px;color:red;font-weight:bold;font-size:1.4rem">
                FVIII浓度：{{latestCase.FVIII}}%</div>
              <div class="rowfont">参考方案</div>
              <div class="rowfont">1.产品:{{latestCase.mpro}}</div>
              <div class="rowfont">2.剂量:{{latestCase.zsjl}}</div>
              <div class="rowfont">3.频次:{{latestCase.mfreq}}</div>
              <div class="rowfont">本结果仅供参考,</div>
              <div class="rowfont">具体治疗方案请遵医嘱执行</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>
            <button class="jbbtn" @click="logout">退出登录</button>
          </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"><button class="jbbtn" @click="logout">退出登录</button></div>

      </div>
    </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.getPatientLatestCase().then(res => {
            if (!res.data.code) {
              this.latestCase = res.data.data
              this.ratioHeight = 216/100*this.latestCase.FVIII
            }
          }),
          this.$api.getAccountInfo().then(res => {
            if (!res.data.code) {
              this.patinfo = res.data.data
            }
          })
      }
    },
    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: 90%;
      margin: auto;
      margin-top: 10px;
      height: 246px;

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

      .left {
        width: 30%;
        margin-top: 10px;
        position: relative;
        overflow: hidden;

      }

      .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:0;
          right:0;
          bottom:20px;
          margin:auto;
          z-index:1;
          /* background:#64B3F6; */
          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: 60px;
      margin-bottom: 20px;
    }
  }

</style>