elizebeth/src/xt_pages/qcd/patientComplianceDetails.vue

<template>
  <div class="main-contain">
    <div class="position">
      <bread-crumb :crumbs="crumbs"></bread-crumb>
      <el-button type="primary" @click="$router.back(-1)">返回</el-button>
    </div>
    <div class="app-container">
      <div class="page_patientComplianceDetails">
        <div class="cell clearfix" style="margin:0">
          <el-form :inline="true" :model="listQuery">
          </el-form>
        </div>
        <el-container>
          <div style="width:160px">
            <el-form :inline="true" :model="listQuery">
              <el-form-item label>
                <el-autocomplete
                  class="checkSearch"
                  popper-class="my-autocomplete"
                  v-model.trim="listQuery.search"
                  :fetch-suggestions="querySearchAsync"
                  :trigger-on-focus="false"
                  placeholder="病人透析号/姓名"
                  @select="handleSelect"
                >
                  <i class="el-icon-search el-input__icon" slot="suffix"></i>
                  <template slot-scope="{ item }">
                    <div class="name">{{ item.name }}</div>
                  </template>
                </el-autocomplete>

              </el-form-item>
            </el-form>
            <div class="tableTitle">患者列表</div>
            <el-table ref="singleTable" :data="patientsData" border style="width: 100%;" height="500"  highlight-current-row @current-change="handleChange" :row-style="{ color: '#303133' }" :header-cell-style="{backgroundColor: 'rgb(245, 247, 250)',color: '#606266'}">
              <el-table-column prop="name" label="透析号" width="70">
                 <template slot-scope="scope">
                    {{scope.row.dialysis_no}}
                 </template>
              </el-table-column>
              <el-table-column prop="date" label="姓名" width="90">
                 <template slot-scope="scope">
                    {{scope.row.name }}
                 </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="containerRight" style="flex:1;overflow: hidden">
            <div class="cell clearfix">
              <label class="title" style="text-align:left">
                <span class="name">统计方式</span> :
              </label>
              <div class="time">
                <ul class>
                  <li
                    :class="item.state == monthType ? 'active' : ''"
                    @click="chooseMonth(item.state)"
                    v-for="item in month"
                    :key="item.value"
                  >{{ item.label }}</li>
                </ul>
              </div>
              <label class="title">
                <span class="name">日期查询</span> :
              </label>
              <el-date-picker
                v-model="listQuery.start_time"
                prefix-icon="el-icon-date"
                @change="changeTime"
                :editable="false"
                type="date"
                style="max-width:160px"
                placeholder="选择日期时间"
                align="right"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                :picker-options="pickerOptions"
              ></el-date-picker>
              <span class>-</span>
              <el-date-picker
                v-model="listQuery.end_time"
                prefix-icon="el-icon-date"
                @change="changeEndTime"
                :editable="false"
                type="date"
                style="max-width:160px"
                placeholder="选择日期时间"
                align="right"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                :picker-options="pickerOptions"
              ></el-date-picker>
            </div>
            <div class="tableTitle">指标监控</div>
            <div style="width:100%;overflow-x:auto">
              <div class="qualityBox">
                <div
                  class="qualityOne"
                  v-for="(item,index) in normData"
                  :key="index"
                  :class="quality == index ? 'active' : ''"
                  @click="clickQuality(index,item.inspection_minor)"
                >
                  <p>{{ item.item_name }}</p>
                   <span v-if="isTrue == 1"><i class="iconfont icon-gou gou"></i></span>
                   <span v-if="isTrue == 0"><i class="iconfont icon-gantanhao gth"></i></span>
                </div>
              </div>
            </div>
            <div class="tableTitle">指标趋势
              <span style="font-weight:normal">&nbsp;&nbsp;（当前患者: {{patient_name}}）</span>
            </div>
            <div class="cell clearfix">
              <p class="point"></p>
              <p class="pointTitle">{{itemName}}</p>
            </div>
            <div>
              <line-chart :options="chart" v-if="rangetype == 1"></line-chart>
               <line-chart1 :options="char2" v-if="rangetype == 2"></line-chart1>
            </div>
          </div>
        </el-container>
      </div>
    </div>
  </div>
</template>

<script>
const moment = require('moment')
import echarts from "echarts";
import BreadCrumb from "@/xt_pages/components/bread-crumb";
import LineChart from "../qcd/components/LineChart";
import LineChart1 from '../qcd/components/LineChart1'
import { uParseTime } from "@/utils/tools";
 import { PostSearch} from '@/api/patient'
import { getCurrentOrgPatients,GetQualityControl,getNormData,getPatientComplianceDetail } from "@/api/common/common"
export default {
  components: {
    LineChart,
    BreadCrumb,
    LineChart1
  },
  data() {
    return {
     patient_name:"",
     rangetype:1,
     itemName:"",
     isTrue:0,
      crumbs: [
        { path: false, name: "质控管理" },
        { path: false, name: "患者达标详情" }
      ],
      patientsData:[],
      normData:[],
      startime:0,
      endtime:0,
      listQuery: {
        start_time: "",
        end_time: "",
        page: 1,
        limit: 10
      },
      item_id:0,
      month: [
        { value: 0, label: "本月", state: 0 },
        { value: 1, label: "近三月", state: 1 },
        { value: 2, label: "近半年", state: 2 },
        { value: 3, label: "近一年", state: 3 }
      ],
     modesData: {
        xAxis: [],
        series: []
      },
      pickerOptions: {
        disabledDate(time) {
          let threeMonths = new Date(new Date().setFullYear(new Date().getFullYear()-1)).getTime() - 24 * 3600 * 1000;
          return time.getTime() > Date.now() || time.getTime() < threeMonths;;
        }
      },
      patientid:0,
      monthType: 0,
      arr: [],
      quality: 0,
      char2: {
          title: {
            text: 'ECharts 入门示例'
          },
          tooltip: {},
          legend: {
            data: ['次数'],
            left: 0
          },
          xAxis: {
            data: [],
            axisLine: {
              lineStyle: {
                color: '#FF0000',
                width: 8 //这里是为了突出显示加上的
              }
            },
            axisLabel: {
              interval: 0,
              formatter: function(value) {
                var ret = '' //拼接加\n返回的类目项
                var maxLength = 8 //每项显示文字个数
                var valLength = value.length //X轴类目项的文字个数
                var rowN = Math.ceil(valLength / maxLength) //类目项需要换行的行数
                if (rowN > 1) {
                  //如果类目项的文字大于3,
                  for (var i = 0; i < rowN; i++) {
                    var temp = '' //每次截取的字符串
                    var start = i * maxLength //开始截取的位置
                    var end = start + maxLength //结束截取的位置
                    //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                    temp = value.substring(start, end) + '\n'
                    ret += temp //凭借最终的字符串
                  }
                  return ret
                } else {
                  return value
                }
              }
            }
          },
          yAxis: {
            axisLabel: {
              formatter: '{value} %'
            },
            show: false,
            axisLine: {
              lineStyle: {
                color: '#00FF00',
                width: 8 //这里是为了突出显示加上的
              }
            }
          },
          series: [
            {
              name: '',
              type: 'line',
              data: [],
              symbol: 'circle',//折线点设置为实心点
              symbolSize: 15,   //折线点的大小
              barWidth: 30,
              label: {
                normal: {
                  show: true,
                  position: "top",
                  formatter: (params) => {
                      let str = ''
                      str = this.otherData[params.dataIndex]
                      return str

                  }
                }
              },
              //配置样式
              itemStyle: {
                //通常情况下：

                //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                normal: {
                  color: (params) => {
                    //我这边就两个柱子，大体就两个柱子颜色渐变，所以数组只有两个值，多个颜色就多个值
                    var colorList = [
                ['#409EFF','#409EFF'],
                ['#f56c6c','#f56c6c']
                ];
              if(params.seriesName == this.otherData[params.dataIndex]){
                var index = 0 
                  }else {
                  var index = 1
                 }
                   

                    // var index = params.dataIndex;
                    // if (params.dataIndex >= colorList.length) {
                    //   index = params.dataIndex % colorList.length;
                    // }

                    return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      {offset: 0, color: colorList[index][0]},
                      // { offset: 0.5, color: colorList[index][1] },
                      {offset: 1, color: colorList[index][1]}
                    ]);
                  },
                  lineStyle: {
                    width:2,
                    color: "#cccccc"//折线的颜色
                  },
                  barBorderRadius: [5, 5, 0, 0] //柱状角成椭圆形
                },

                //鼠标悬停时：
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.2)'
                }
              }
            }
          ],
           dataZoom: [
            {
              //Y轴固定,让内容滚动
              type: "slider",
              show: false,
              xAxisIndex: [0],
              start: 1,
              end: 20, //设置X轴刻度之间的间隔(根据数据量来调整)
              zoomLock: true //锁定区域禁止缩放(鼠标滚动会缩放,所以禁止)
            },
            {
              type: "inside",
              xAxisIndex: [0],
              start: 1,
              end: 20,
              zoomLock: true //锁定区域禁止缩放
            }
          ],
        },
      chart: {
        title: {
          text: "ECharts 入门示例"
        },
        tooltip: {},
        // legend: {
        //   data: ["次数"],
        //   left: 0
        // },
        xAxis: {
          data: []
        },
        yAxis: {
          axisLabel: {
            formatter: "{value} %"
          },
          show: false
        },
        series: [
          {
            name: "次数",
            type: "line",
            data: [],
            barWidth: 30,
            label: {
              normal: {
                show: true,
                position: "top",
                formatter: "{c}"
              }
            },
            //配置样式
            itemStyle: {
              //通常情况下：

              //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
              normal: {
                color: function(params) {
                  //我这边就两个柱子，大体就两个柱子颜色渐变，所以数组只有两个值，多个颜色就多个值
                  var colorList = [
                    ["#A9E0F3", "#9FBDFC"],
                    ["#A9E0F3", "#9FBDFC"],
                    ["#A9E0F3", "#9FBDFC"],

                    ["#FFD7C0", "#FF9994"],
                    ["#FFD7C0", "#FF9994"],
                    ["#FFD7C0", "#FF9994"],
                    ["#D7C3FD", "#B3A8F7"],
                    ["#D7C3FD", "#B3A8F7"],
                    ["#D7C3FD", "#B3A8F7"]
                  ];

                  var index = params.dataIndex;
                  if (params.dataIndex >= colorList.length) {
                    index = params.dataIndex % colorList.length;
                  }

                  return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: colorList[index][0] },
                    // { offset: 0.5, color: colorList[index][1] },
                    { offset: 1, color: colorList[index][1] }
                  ]);
                },
                lineStyle:{ 
                  color:'#409eff' //改变折线颜色
                }, 
                barBorderRadius: [5, 5, 0, 0] //柱状角成椭圆形
              },

              //鼠标悬停时：
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ],
         dataZoom: [
            {
              //Y轴固定,让内容滚动
              type: "slider",
              show: false,
              xAxisIndex: [0],
              start: 1,
              end: 20, //设置X轴刻度之间的间隔(根据数据量来调整)
              zoomLock: true //锁定区域禁止缩放(鼠标滚动会缩放,所以禁止)
            },
            {
              type: "inside",
              xAxisIndex: [0],
              start: 1,
              end: 20,
              zoomLock: true //锁定区域禁止缩放
            }
          ],
      },
      inspect_date:0,
      monthActive:0,
      otherData:[]
    };
  },
  methods: {
    chooseMonth(month) {
      //一月
      if(month == 0){
        this.listQuery.start_time = ""
        this.listQuery.end_time =""
        this.monthActive = 0
        const startDate = moment().subtract('month', 0).format('YYYY-MM') + '-01'
        const endDate = moment(new Date()).format('YYYY-MM-DD')
        var now = new Date()
        var nowMonth = now.getMonth(); //当前月
        var nowYear = now.getFullYear(); //当前年
        //本月的开始时间
        var monthStartDate = new Date(nowYear, nowMonth, 1);
        this.startime=Date.parse(monthStartDate)/1000;//s

        //本月的结束时间
        var monthEndDate = moment().endOf('month').format('YYYY-MM-DD HH:mm:ss');
        this.endtime =Date.parse(monthEndDate)/1000-1;//s
         this.getlistDetail()
      }

      //近三月
      if(month == 1){
         this.listQuery.start_time = ""
         this.listQuery.end_time =""
         this.monthActive = 1
        const startDate = moment().subtract('month', 3).format('YYYY-MM-DD')
    
        this.startime = Date.parse(startDate)/1000
       
        const endDate = moment(new Date()).format('YYYY-MM-DD')
      
        this.endtime = Date.parse(endDate)/1000
    
        this.getlistDetail()
      }
    

       //近半年
      if(month == 2){
        this.listQuery.start_time = ""
        this.listQuery.end_time =""
        this.monthActive = 2
        const startDate = moment().subtract('month', 6).format('YYYY-MM-DD')
        
        this.startime = Date.parse(startDate)/1000
        const endDate = moment(new Date()).format('YYYY-MM-DD')
        this.endtime = Date.parse(endDate)/1000
        this.getlistDetail()
      }

      //近一年
      if(month == 3){
        this.listQuery.start_time = ""
        this.listQuery.end_time =""
        this.monthActive = 3
        const startDate = moment().subtract('month', 12).format('YYYY-MM-DD')
        this.startime = Date.parse(startDate)/1000
        const endDate = moment(new Date()).format('YYYY-MM-DD')
        this.endtime = Date.parse(endDate)/1000
        this.getlistDetail()
      }


      this.monthType = month;
    },
    clickQuality(index,itemid) {
      var itemName = ''
      for(let i=0;i<this.normData.length;i++){
         if(itemid == this.normData[i].inspection_minor){
           if(this.normData[i].range_type == 1){
              itemName = this.normData[i].item_name + "("+this.normData[i].min_range + "-"+this.normData[i].large_range+")"+this.normData[i].unit
           }
           if(this.normData[i].range_type == 2){
             itemName = this.normData[i].item_name
           } 
         }
      }
      this.itemName = itemName
      this.quality = index;
      this.item_id = itemid
      this.getlistDetail()
    },
    handleSizeChange(limit) {
      //this.limit = limit;
      //this.getConfigurationList();
    },
    handleCurrentChange(page) {
      //this.page = page;
      //this.getConfigurationList();
    },
    getTime(time) {
      return uParseTime(time, "{y}-{m}-{d}");
    },
    onSearch(){
    },
    changeTime(val){
       var time = this.getTimestamp(val) - this.getTimestamp(this.listQuery.end_time);
      if (time > 0) {
        this.$message.error("结束时间不能小于开始时间");
        this.listQuery.start_time = "";
      } else {
         this.startime = Date.parse(val)/1000;//s
        this.getlistDetail()
      }

    },
    changeEndTime(val){
      var time =
          this.getTimestamp(val) - this.getTimestamp(this.listQuery.start_time);
        if (time < 0) {
          this.$message.error("结束时间不能小于开始时间");
          this.listQuery.end_time = "";
        } else {
          this.endtime = Date.parse(val)/1000;//s
          this.getlistDetail()
        }

    },
     getTimestamp(time) {
      // 把时间日期转成时间戳
      return new Date(time).getTime() / 1000;
    },
    handleChange(val){
     this.patientid = val.id
     this.patient_name = val.name
      this.getlistDetail()
    },
   getCurrentOrgPatients(){
      getCurrentOrgPatients().then(response=>{
          if(response.data.state == 1){
            var patients = response.data.data.patients
            for(let i=0;i<patients.length;i++){
               if(this.patientid == patients[i].id){
                  this.$refs.singleTable.setCurrentRow(patients[i])
                  this.patient_name = patients[i].name
               }
            }
            this.patientsData = patients
          }
      })
    },
    getNormData(){
      getNormData().then(response=>{
         var normdata = response.data.data.normdata
         console.log("normdata",normdata)
          for(let i=0;i<normdata.length;i++){
            this.item_id = normdata[0].inspection_minor
            this.itemName = normdata[0].item_name + "("+normdata[0].min_range + "-"+normdata[0].large_range +")"+normdata[0].unit
          }
          this.normData = normdata
          this.getlist()
      })
    },
    getlist(){
        this.modesData.series = []
        this.modesData.xAxis = []
        this.char2.xAxis.data = []
        this.char2.series[0].data = []
        const startDate = moment().subtract('month', 0).format('YYYY-MM') + '-01'
        const endDate = moment(new Date()).format('YYYY-MM-DD')
        var now = new Date()
        var nowMonth = now.getMonth(); //当前月
        var nowYear = now.getFullYear(); //当前年
        //本月的开始时间
        var monthStartDate = new Date(nowYear, nowMonth, 1);
        this.startime=Date.parse(monthStartDate)/1000;//s
        //本月的结束时间
         var monthEndDate = moment().endOf('month').format('YYYY-MM-DD HH:mm:ss');
         this.endtime =Date.parse(monthEndDate)/1000-1;//s

          const params = {
            patientid:this.patientid,
            startime:this.startime,
            endtime:this.endtime,
            itemid:this.item_id,
            inspectdate:this.inspect_date,
          }
       GetQualityControl(params).then(response=>{
          if(response.data.state == 1){
            var list = response.data.data.list
            console.log("list是什么",list)
            for(let i=0;i<list.length;i++){
              if(parseInt(list[i].inspect_value)>= parseInt(list[i].range_min) && parseInt(list[i].inspect_value)<= parseInt(list[i].range_max)){
                    this.isTrue = 1  
               }
               if(parseInt(list[i].inspect_value)< parseInt(list[i].range_min) || parseInt(list[i].inspect_value) > parseInt(list[i].range_max)){
                    this.isTrue =0
               }
               
              if(list[i].range_type == 1){
                    this.rangetype = 1
                    this.modesData.xAxis.push(this.getTime(list[i].inspect_date));
                    this.modesData.series.push(list[i].inspect_value)
                }

                if(list[i].range_type == 2){
                   this.rangetype = 2
                   this.otherData.push(list[i].inspect_value)
                   this.char2.series[0].data.push("1")
                  this.char2.xAxis.data.push(this.getTime(list[i].inspect_date))
                  this.char2.series[0].name = list[i].range_value
                }
            }
            this.chart.series[0].data = this.modesData.series
            this.chart.xAxis.data = this.modesData.xAxis
            if(this.rangetype == 1){
                this.getArrLength(this.chart.xAxis.data,1)
              }else{
                this.getArrLength(this.char2.xAxis.data,2)
              }
       
          }

       })
    },

    getlistDetail(){
       this.modesData.series = []
        this.modesData.xAxis = []
        this.char2.xAxis.data = []
        this.char2.series[0].data = []
        const startDate = moment().subtract('month', 0).format('YYYY-MM') + '-01'
        const endDate = moment(new Date()).format('YYYY-MM-DD')

       if(this.monthActive == 0){
          var now = new Date()
          var nowMonth = now.getMonth(); //当前月
          var nowYear = now.getFullYear(); //当前年
          //本月的开始时间
          var monthStartDate = new Date(nowYear, nowMonth, 1);
          this.startime=Date.parse(monthStartDate)/1000;//s
          //本月的结束时间
          var monthEndDate = moment().endOf('month').format('YYYY-MM-DD HH:mm:ss');
          this.endtime =Date.parse(monthEndDate)/1000-1;//s
        }
     
          const params = {
            patientid:this.patientid,
            startime:this.startime,
            endtime:this.endtime,
            itemid:this.item_id,
          }
        console.log("params",params)
       getPatientComplianceDetail(params).then(response=>{
            if(response.data.state == 1){
              var list =  response.data.data.list
              for(let i=0;i<list.length;i++){
                if(parseInt(list[i].inspect_value)>= parseInt(list[i].range_min) && parseInt(list[i].inspect_value)<= parseInt(list[i].range_max)){
                      this.isTrue = 1  
                }
                if(parseInt(list[i].inspect_value)< parseInt(list[i].range_min) || parseInt(list[i].inspect_value) > parseInt(list[i].range_max)){
                      this.isTrue =0
                }

                if(list[i].range_type == 1){
                    this.rangetype = 1
                    this.modesData.xAxis.push(this.getTime(list[i].inspect_date));
                    this.modesData.series.push(list[i].inspect_value)
                }

                if(list[i].range_type == 2){
                   this.rangetype = 2
                   this.otherData.push(list[i].inspect_value)
                   this.char2.series[0].data.push("1")
                  this.char2.xAxis.data.push(this.getTime(list[i].inspect_date))
                  this.char2.series[0].name = list[i].range_value
                }
                

            
            }
              this.chart.series[0].data = this.modesData.series
              this.chart.xAxis.data = this.modesData.xAxis

              if(this.rangetype == 1){
                this.getArrLength(this.chart.xAxis.data,1)
              }else{
                this.getArrLength(this.char2.xAxis.data,2)
              }
            }
       })
    },
     querySearchAsync(keyword, cb) {
        let key = ''
        if (keyword != undefined) {
          key = keyword
        }
        let searchArray = []
        PostSearch(key).then(response => {
          if (response.data.state == 1) {
             searchArray = response.data.data.patient
            //  console.log("searchArray",searchArray)
            cb(searchArray)
          } else {
            cb([])
          }
        })
      },
     handleSelect(val) {
        console.log("val",val)
        this.listQuery.search = val.name
        this.patientid = val.id
        for(let i=0;i<this.patientsData.length;i++){
          if(val.id == this.patientsData[i].id){
            this.$refs.singleTable.setCurrentRow(this.patientsData[i])
          }
         }
        this.getlistDetail()
      },
      getArrLength(result,type){
        if(type == 1){
          if(result.length > 10){
            var dataZoom_end = (10/result.length)*100;
            this.chart.dataZoom[0].end = dataZoom_end
          }else{
            var dataZoom_end = 100;
            this.chart.dataZoom[0].end = dataZoom_end
          }
        }else{
          if(result.length > 10){
            var dataZoom_end = (10/result.length)*100;
            this.char2.dataZoom[0].end = dataZoom_end
          }else{
            var dataZoom_end = 100;
            this.char2.dataZoom[0].end = dataZoom_end
          }
        }

      }
  },

   created(){
     this.patientid =  this.$route.query.patientid
    
     this.inspect_date = this.$route.query.date
     //获取指标项
      this.getNormData()
     //获取该机构下的所有患者
      this.getCurrentOrgPatients()


  }
};
</script>

<style lang="scss" scoped>
.point {
  width: 13px;
  height: 13px;
  background: linear-gradient(
    0deg,
    rgba(169, 224, 243, 1),
    rgba(159, 189, 252, 1)
  );
  border-radius: 7px;
  margin-right: 8px;
}
.pointTitle {
  font-size: 13px;
}
.containerRight {
  padding-left: 10px;
}
.tableTitle {
  font-size: 16px;
  color: #000;
  font-weight: bold;
  margin-bottom: 10px;
  margin-top: 8px;
}
.qualityBox {
  display: flex;
  flex-wrap: nowrap;
  min-width: 1800px;
  padding-bottom: 10px;
  .qualityOne {
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 0.3125rem;
    border: 1px solid rgba(229, 229, 229, 1);
    display: flex;
    align-items: center;
    flex-direction: column;
    margin-right: 0.875rem;
    cursor: pointer;
    //   justify-content: space-around;
    .gth {
      color: #ff974a;
      font-size: 1.25rem;
    }
    .gou {
      color: #5cd924;
      font-size: 1.25rem;
    }
    p {
      width: 100%;
      margin-top: 1.25rem;
      margin-bottom: 0.625rem;
      font-weight: bold;
      color: #666666;
      font-size: 0.875rem;
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  .active {
    background: #5b98ff;
    p {
      color: #fff;
    }
    .gth {
      color: #fff;
      font-size: 1.25rem;
    }
    .gou {
      color: #fff;
      font-size: 1.25rem;
    }
  }
}
</style>


<style lang="scss">
.page_patientComplianceDetails {
  .cell {
    text-align: center;
  }
  .el-form-item {
    margin-bottom: 0;
  }
  ::-webkit-scrollbar{
    height: 15px !important;
  }
  .el-form--inline .el-form-item{
    margin-right:0;
  }
}
</style>