xiangan_pc/src/components/360View/key-indicators.vue

<template>
  <div class="component-container indicators">
    <el-tabs v-model="activeTab" class="tabs-key-wrapper">
      <el-tab-pane v-for="(item,index) in kpilist" :key="index" :label="item.desc" :name="item.id" style="height: 100%">
        <div class="scroll-father-head">
          <el-scrollbar style="height:100%">
            <el-checkbox-group v-model="checkList">
              <el-checkbox
                v-for="(item2,index2) in item.children"
                :key="index2"
                :label="item2.id"
                @change="checkboxChange(item,item2,$event)"
              >{{ item2.desc }}</el-checkbox>
            </el-checkbox-group>
          </el-scrollbar>
        </div>
      </el-tab-pane>
    </el-tabs>
<!--    <div :style="{height:` calc(100% - 5px - ${patientInfoHeadHeight}px)`}" class="scroll-father-echeats">-->
    <div :style="{height:` calc(100% - 240px)`}" class="scroll-father-echeats">
      <el-scrollbar class="scrollbar-wrapper" style="height:100%">
        <echarts-yanya
          :id-name="'key-indicators-shili'"
          :chart-data="shiliAndYanya.shili"
          desc="视力"
          class="scroll-echearts"
        />
        <echarts-yanya
          :id-name="'key-indicators-yanzhou'"
          :chart-data="shiliAndYanya.yanZhouList"
          desc="眼轴"
          class="scroll-echearts"
        />
        <!-- 加type三层过滤 -->
        <!-- <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane v-for="(item,index) in shiliAndYanya.shiLiList" :key="index" :label="item.type" :name="index">
            <template v-if="activeName==index">
              <echarts-shili
                :id-name="'key-indicators-shili'"
                :chart-data="item.echartsVo"
                desc="视力"
                class="scroll-echearts"
              />
            </template>

          </el-tab-pane>
        </el-tabs> -->
        <echarts-yanya
          :id-name="'key-indicators-shili'"
          :chart-data="shiliAndYanya.yanya"
          desc="眼压"
          class="scroll-echearts"
        />
        <echarts-line
          v-for="(item,index) in kpiValEchartsList"
          :key="index"
          class="scroll-echearts"
          :id-name="'key-indicators-' + item.tableName + item.columnName"
          :chart-data="item.data"
          :desc="item.desc"
        />
      </el-scrollbar>
    </div>

  </div>
</template>

<script>
import echartsShili from '@/components/echarts/shili'
import echartsLine from '@/components/echarts/line'
import echartsYanya from '@/components/echarts/eyeCharts'

export default {
  components: { echartsShili, echartsYanya, echartsLine },
  props: {
    patientId: {
      type: String,
      default: ''
    },
    patientIdNumber: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      activeName: 0,
      flagAdmin: '',
      checkList: [],
      kpilist: [],
      shiliAndYanya: {},
      activeTab: '',
      kpiValEchartsList: [], // 根据指标获取过来的echarts数据
      patientInfoHeadHeight: ''
    }
  },
  watch: {
    kpilist(val) {
      if (val && val.length > 0) {
        // this.patientInfoHeadHeight = document.querySelector('.tabs-key-wrapper') ? document.querySelector('.tabs-key-wrapper').offsetHeight : ''
        this.activeTab = val[0].id
      }
    }
  },
  mounted() {
    // 获取视力和眼压图标的值
    this.init()
    // 获取关键指标--右侧获取筛选的具体值
    // const sysUserDTO = JSON.parse(window.localStorage.getItem('yzk-sysUserDTO'))
    // this.flagAdmin = sysUserDTO ? sysUserDTO.flagAdmin : ''
    // this.$nextTick(() => {
    //   window.onresize = () => {
    //     return (() => {
    //       this.patientInfoHeadHeight = document.querySelector('.tabs-key-wrapper') ? document.querySelector('.tabs-key-wrapper').offsetHeight : ''
    //     })()
    //   }
    // })
  },
  methods: {
    init() {
      this.checkList = []
      this.kpiValEchartsList = []
      this.getShiLiAndYanYaData()
      this.getKPI()
      // this.patientInfoHeadHeight = document.querySelector('.tabs-key-wrapper').offsetHeight
      // const parent = document.getElementById('drawerKey')
      // parent.style.width = '380px'
    },
    synchronData() {
      this.$http.post('/table/dict/updateTableDict').then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        } else {
          return this.$message.success('数据同步成功!')
        }
      }).catch(() => {})
    },
    // 复选框改变时
    checkboxChange(item, item2, e) {
      if (e === true) {
        this.getKPIValue(item2)
      } else {
        this.kpiValEchartsList = this.kpiValEchartsList.filter(kpiItem => kpiItem.columnId !== item2.id)
      }
    },
    async getShiLiAndYanYaData() {
      const { data: res } = await this.$http.get('/patient/view/getYanZouAndYanYaData', {
        params: {
          patientId: '200203836'
          // patientId: this.patientId
        }
      })
      if (res.code === 0) {
        this.shiliAndYanya = res.data
      } else {
        this.shiliAndYanya = []
        this.$message.error(res.msg)
      }
    },
    // 获取关键指标--右侧获取筛选的具体值
    async getKPI() {
      const { data: res } = await this.$http.get(`/patient/view/getKPI?patientId=${this.patientId}`)
      if (res.code === 0) {
        this.kpilist = res.data
        if (res.data.length) {
          this.activeTab = this.kpilist[0].id
        }
      } else {
        this.$message.error(res.msg)
      }
    },
    // 获取关键指标的值--右侧根据关键指标中的具体值获取echarts图
    async getKPIValue(obj) {
      const { data: res } = await this.$http.get('/patient/view/getKPIValue', {
        params: {
          id: obj.id,
          patientId: this.patientId,
          patientIdNumber: this.patientIdNumber
        }
      })
      if (res.code === 0) {
        this.kpiValEchartsList.push({
          tableName: this.activeTab,
          tableid: this.activeTab,
          columnName: obj.name,
          columnId: obj.id,
          desc: obj.desc,
          data: res.data
        })
      } else {
        this.$message.error(res.msg)
      }
    },
    // echarts切换
    handleClick(tab, event) {
      console.log(tab, event)
    }
  }
}
</script>

<style lang="scss" scoped>
.indicators {
  width: 650px;
  padding: 12px 8px;
  height: 100%;
  background-color: white;
  position: relative;
  .tabs-key-wrapper {
    .scroll-father-head {
      //height: 100%;
      max-height: 240px;
      overflow-y: auto;
    }
    .el-checkbox {
      margin-bottom: 5px;
    }
  }
  .scroll-father-echeats {
    width: 100%;
  }
  // 折线图滚动容器
  .scrollbar-wrapper {
    padding-right: 0;
    .echarts-shili,
    .echarts-yanya {
      background-color: #fff;
      border-radius: 5px;
      margin-bottom: 10px;
    }
  }
  .scroll-echearts {
    padding: 5px 0;
    margin-bottom: 16px;
    //background: #171515;
    border-radius: 4px;
  }
}
</style>
<style lang="scss">
.indicators {
  .el-button--mini, .el-button--mini.is-round{
    padding: 7px;
  }
  .el-icon-refresh:before{
    font-size: 16px;
  }
  .el-checkbox-group {
    padding: 10px;
  }
  .el-tabs__nav,.el-tabs__content{
    background: white;
  }
  .el-tabs__item{
    //color: rgba(255,255,255,0.45);
  }
  .el-tabs__item.is-active{
    //color: #FFFFFF;
  }
  .el-tabs__nav-wrap::after{
    background: transparent;
  }
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }
  .el-tabs__header {
    margin: 0 0 5px;
    padding-left: 16px;
    //background: #2A2D32 !important;
  }
  .el-scrollbar__view {
    // background-color: #fff;
  }
  .el-scrollbar__bar.is-vertical {
    background: #eee;
  }
  .el-tabs__nav-scroll {
    margin-right: 32px;
  }
  .tabs-key-wrapper {
    //max-height: 200px;
    overflow: hidden;
     border-radius: 4px;
    background-color: white;
    padding: 13px 2px 8px 0;
    margin-bottom: 16px ;
    .el-tabs__nav-next,
    .el-tabs__nav-prev {
      line-height: 30px;
    }
    .el-tabs__item {
      height: 30px;
      line-height: 30px;
      padding: 0 10px;
    }
  }

  // .tabs-key-wrapper  .el-tabs__content {
  //   padding: 0 5px;
  //   height: 160px;
  //   overflow-y: auto;
  // }

  .myGroup-enter,
  .myGroup-leave-to {
    opacity: 0;
    transform: translateY(80px);
  }
  .myGroup-enter-active,
  .myGroup-leave-active {
    transition: all 0.2s ease;
  }

  /* v-move和v-leave-active实现删除一行，后面元素移位的动画效果 */
  .myGroup-move {
    transition: all 0.5s ease;
  }
  .myGroup-leave-active {
    position: absolute;
  }
}
</style>