xybpkmweb/src/components/PatGjBleedCount.vue

<template>
  <div class="container">
    <div class="bgimg"></div>
    <div class="content">
      <div class="title">关节出血次数统计</div>
      <div v-if='id && name' class="title" style="font-size: 1rem;">姓名：{{name}}</div>
      <div class="injectionListForm baseInfo">
        <p>年化出血率：{{year_bleed_rate}}</p>
        <p>年化关节出血率：{{year_gj_bleed_rate}}</p>
        <ul class="tabs">
          <li @click="tabChange(1)" :class="tab==1?'act':''">近1个月</li>
          <li v-if='days>=90' @click="tabChange(3)" :class="tab==3?'act':''">近3个月</li>
          <li v-if='days>=180' @click="tabChange(6)" :class="tab==6?'act':''">近6个月</li>
          <li v-if='days>=360' @click="tabChange(12)" :class="tab==12?'act':''">近12个月</li>
        </ul>
        <v-chart :option="barOption" style="height: 350px">
        </v-chart>
      </div>
      <div class="footer">
        <div class="jbbtn" @click="goPage(-1)">返回</div>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    Field,
    Picker,
    Search,
    Button
  } from 'mint-ui'

  export default {
    name: 'Index',
    components: {
      Field,
      Picker,
      Search,
      Button
    },
    data() {
      return {
        tab:1,
        form: {},
        patinfo:{},
        recordsList: [],
        barOption:{},
        id:'',
        name:'',
        year_bleed_rate:'',
        year_gj_bleed_rate:'',
        days:0
      }
    },
    methods: {
      goPage(path) {
        if(path==-1){
          this.$router.go(-1)
        }else{
          this.$router.push(path)
        }
      },
      tabChange(tab){
        this.tab=tab
        this.barOption={}
        this.getData()
      },
      getData() {
        let query_form={time_range:this.tab}
        let id = this.$route.query.id
        if(id){
          query_form.patient_id=id
          this.id=id
          this.$api.get_patient_info({id:id}).then(res=>{
            this.name=res.data.data.name
          })
        }
        this.$api.get_patient_bleed_statistics(query_form).then(res => {
            if (!res.data.code) {
              let data=res.data.data
              this.days=data.first_bleed_time_interval
              this.year_bleed_rate = data.year_bleed_rate;
              this.year_gj_bleed_rate = data.year_gj_bleed_rate;
              let x_data=[],y_data_zfx=[],y_data_wsx=[]
              data.gj_bleed_list.forEach(item=>{
                x_data.push(item.gj_name)
                y_data_zfx.push(item.gj_bleed_cnt_zfx)
                y_data_wsx.push(item.gj_bleed_cnt_wsx)
              })
              this.barOption={
                    tooltip: {
                      trigger: 'axis',
                      axisPointer: {
                        type: 'shadow'
                      }
                    },
                    legend: {
                       itemWidth:5,
                       itemHeight:5,
                       textStyle:{
                         fontSize:10
                       }
                    },
                    grid:{
                      right:'5%'
                    },
                    xAxis: {
                      type: 'category',
                      data: x_data,
                      axisLabel:{
                        rotate:45,
                        fontSize:8
                      }

                    },
                    yAxis: {
                      type: 'value',
                      name:'(次)'
                    },
                    series: [
                      {
                        name:'自发性出血',
                        data: y_data_zfx,
                        itemStyle:{
                          color:'#DEEBF7'
                        },
                        type: 'bar',
                        stack: '1',
                        label:{
                          show:true,
                          position:'inside'
                        }
                      },
                      {
                        name:'外伤性出血',
                        data: y_data_wsx,
                        itemStyle:{
                          color:'#F8CBAD'
                        },
                        type: 'bar',
                        stack: '1',
                        label:{
                          show:true,
                          position:'inside'
                        }
                      }
                    ]
              }
            }
        })
      }
    },
    created() {
      this.getData()
    }
  }

</script>

<style scoped lang="scss">
  .injectionListForm {
    width: 95%;
    margin: auto;
    margin-top: 1rem;
    background: #fff;
    padding: 1rem 0;
    border-radius: 8px;
    position: relative;
    .tabs{
      display: flex;
      padding: 0;
      li{
        width: 25%;
        text-align:center;
        list-style: none;
        font-size: 13px;
        line-height: 28px;
        &.act{
          background-color: #4472C4;
          color: #fff;
        }
      }
    }
  }

  .footer {
    display: flex;
    flex-wrap: wrap;
    // margin-top:2rem;
    .jbbtn {
      width: 42%;
    }
  }

  .listItemContainer {
    display: flex;
    .listItem {
      width: 33%;
      /* height: 3.2rem; */
      line-height: 3.2rem;
      flex-direction: row;
      justify-content: space-between;
      border-bottom: 1px solid #ccc;
      font-size:1.1rem;
    }

    .listHeader{
      font-size:1.2rem;
    }
  }

</style>