xybpkmweb/src/components/SolutionPkLine.vue

<template>
  <div class="container">
    <div class="bgimg"></div>
    <div class="content">
      <div class="title">预防治疗方案的PK曲线</div>
      <div class="PKLineForm">
        <v-chart :option="pklineOption" style="height: 250px"></v-chart>
      </div>
      <div class="PKLineForm baseInfo">
        <mt-cell title="活性大于5%的时间:9.3" value="峰活性:12.05%"></mt-cell>
        <mt-cell title="活性大于3%的时间:14.4" value="谷活性(IU/kg):1.16"></mt-cell>
        <mt-cell title="活性大于1%的时间:14.4"></mt-cell>
        <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 style="font-size:12px;text-align:left;padding-left:10px;">方案时间时间:{{caseInfo.ctime}}</div>
      </div>
      <div class="footer">
        <div class="jbbtn" @click="goPage(-1)">上一页</div>
        <div class="jbbtn" @click="goPage('/')">返回</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: {},
        pklineOption: {
          title: {},
          calculable: true,
          xAxis: [{
            type: 'category',
            boundaryGap: false,
            data: ['0', '6', '12', '18', '24', '24.01', '30', '36', '42', '48', '48.01', '54', '60', '66', '72',
              '72.01', '78', '84', '90', '96', '96.01', '102', '108', '114', '120', '120.01', '126', '132', '138',
              '144', '144.01', '150', '156', '162', '168', '168.01', '174', '180', '186', '192', '192.01'
            ]
          }],
          yAxis: [{
            type: 'value',
            axisLabel: {
              formatter: '{value}.00'
            }
          }],
          series: [{
            name: '最低气温',
            type: 'line',
            data: [11, 11, 15, 13, 12, 13, 10, 3, 11, 11, 15, 13, 12, 13, 10, 3, 11, 11, 15, 13, 12, 13, 10, 3, 11,
              11, 15, 13, 12, 13, 10, 3, 11, 11, 15, 13, 12, 13, 10, 3, 11, 11, 15, 13, 12, 13, 10, 3, 4
            ],
            markLine: {
              data: [{
                type: 'average',
                name: '平均值'
              }]
            }
          }]
        }
      }
    },
    methods: {
      goPage(path) {
        if (path === -1) {
          this.$router.go(-1)
        }
        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
          }
        })
      }
    },
    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;

    .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>