xybpkmweb/src/components/SolutionPkLine.vue

<template>
  <div class="container">
    <div class="bgimg"></div>
    <div class="content">
      <div class="title">预防治疗参考方案一周活性变化</div>
      <div class="PKLineForm">
        <v-chart :option="pklineOption" style="height: 350px">
        </v-chart>
        <div class="tuli">
            <p style="color:#6594D5;"> —活性</p>
            <p style="color:#AC4C44;">---5%</p>
            <p style="color:#4caf50;">---3%</p>
            <p style="color:#ab6cef;">---1%</p>
        </div>
      </div>
      <div class="PKLineForm baseInfo">
        <div class="rowfont">活性大于5%的时间:{{pklinedata.gt5_time}}</div>
        <div class="rowfont">活性大于3%的时间:{{pklinedata.gt3_time}}</div>
        <div class="rowfont">活性大于1%的时间:{{pklinedata.gt1_time}}</div>
        <div style="display:flex;">
          <div class="rowfont" style="width:48%;">峰活性:{{pklinedata.sjfhx}}%</div>
          <div class="rowfont" style="width:52%;">谷活性(IU/kg):{{pklinedata.sjghx}}%</div>
        </div>
        <hr>
        <mt-cell :title="'姓名:'+caseInfo.name" :value="'ID:'+caseInfo.code"></mt-cell>
        <mt-cell :title="'年龄:'+caseInfo.age" :value="'性别:'+caseInfo.sex"></mt-cell>
        <mt-cell :title="'使用产品:'+caseInfo.mpro" :value="'注射剂量:'+caseInfo.zsjl"></mt-cell>
        <mt-cell :title="'注射频次:'+caseInfo.mfreq"></mt-cell>
        <div class="rowfont">方案时间时间:{{caseInfo.ctime}}</div>
      </div>
      <div class="footer">
        <div class="jbbtn" @click="goPage(-1)">上一页</div>
        <div class="jbbtn" @click="goPage('/docindex')">返回</div>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    Field,
    Cell
  } from 'mint-ui'
  // import ECharts from 'vue-echarts'
  export default {
    name: 'Index',
    components: {
      Field,
      Cell
    },
    data() {
      return {
        msg: 'Welcome to Your Vue.js App',
        caseInfo: {},
        pklinedata:{},
        pklineOption: {
          title: {},
          calculable: true,
          xAxis: [{
            type: 'category',
            boundaryGap: false,
            data: []
          }],
          yAxis: [{
            type: 'value',
            axisLabel: {
              // formatter: (v,i)=>{
              //   if (i <= 10) {
              //     v = i;
              //   }else{
              //     v=v/5
              //   }
                
              //   return v
              // }
            },
            // max:100,
            // min:0,
            // interval:1
          }],
          series: [{
            name: '最低气温',
            type: 'line',
            showSymbol: false,
            data: [],
            markLine: {
              symbol: ['none', 'none'],
              label:{
                  formatter: '{b}'
                },
              data: [{
                  name: '1',
                  yAxis: 1,
                  lineStyle: {
                        color: '#ab6cef'
                  }
                },
                {
                  name: '3',
                  yAxis: 3,
                  lineStyle: {
                        color: '#4caf50'
                  }
                },
                {
                  name: '5',
                  yAxis: 5,
                  lineStyle: {
                        color: '#AC4C44'
                  }
                }
              ]
            }
          }]
        }
      }
    },
    methods: {
      goPage(path) {
        let role = this.$route.query.role
        if (path === -1) {
          this.$router.go(-1)
        }
        if(role==2){
          this.$router.push("/patindex")
        }else{
          this.$router.push(path)
        }
      },
      getData() {
        let id = this.$route.query.id
        this.$api.getPatientCaseInfo({
          id: id
        }).then(res => {
          if (!res.data.code) {
            this.caseInfo = res.data.data
          }
        })
        // pkline
        this.$api.getPKLineData({
          id: id
        }).then(res => {
          this.pklinedata = res.data.data
          this.pklineOption.xAxis[0].data = res.data.data.pk_xdata
          this.pklineOption.series[0].data = res.data.data.pk_ydata
        })
      }
    },
    created() {
      this.getData()
    }
  }

</script>

<style scoped lang="scss">
  .footer {
    display: flex;
  }

  .PKLineForm {
    width: 84%;
    margin: auto;
    margin-top: 1rem;
    background: #fff;
    padding: 1rem;
    border-radius: 5px;
    position: relative;
    .tuli{
      position: absolute;
      right:0px;
      top:40px;
      p{
        margin:5px;
      }
    }
    .rowfont{
      font-size:1rem;
      text-align:left;
      padding-left:10px;
      line-height: 2rem;
      height: 2rem;
    }
    .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: 1.8rem;
    }

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

    /deep/ .mint-cell .mint-cell-value {
      width: 40%;
      text-align: right;
    }

    /deep/ .mint-cell .mint-cell-wrapper {
      font-size: 14px;
      background-image: none;
    }
  }

  .container {
    height: 100%;
  }

  .jbbtn {
    width: 42%;
  }

</style>