Vue_New/src/xt_pages/Dialysisanalysis/new_otherIndicators/index.vue

<!-- 其他指标 -->
<template>
  <div class="main-contain">
    <div class="position">
<!--        <bread-crumb :crumbs="crumbs"></bread-crumb>-->
    </div>
    <div class="app-container">
      <div class="page_patientControlAnalysis">
        <div class="photos">
          <div v-for="(item,index) in indicators" :key="index"  @click="echart_click(item)"
            style="width: 280px;height: 235px;border:1px solid gainsboro;border-radius: 8px;margin: 0 0 30px 28px"
          >
            <!-- <div v-if="" class="background date_type1" style="background-repeat: no-repeat;"></div>
            <div v-if="item.check_type == 1" class="background date_type2" style="background-repeat: no-repeat;"></div>
            <div v-if="item.check_type == 2" class="background date_type3" style="background-repeat: no-repeat;"></div>
            <p class="title">{{item.item_name}}</p> -->
            <div :class="[item.sub_check_type ==1 ? 'date_type1 background' : item.sub_check_type ==2 ?'date_type2 background':item.sub_check_type ==3 ?'date_type3 background':'']" style="background-repeat: no-repeat;"></div>
            <!-- <div v-if="item.check_type == 1" class="background date_type2" style="background-repeat: no-repeat;"></div>
            <div v-if="item.check_type == 2" class="background date_type3" style="background-repeat: no-repeat;"></div> -->
            <!-- <div v-if="item.check_type == 1" class="background date_type1" style="background-repeat: no-repeat;"></div> -->

            <p class="title" style="text-align: center;">{{item.item_name}}</p>

          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import BreadCrumb from '@/xt_pages/components/bread-crumb'
import { getStatisticsList } from '../../../api/statistics'
export default {
  name:'index',
  components: {
      BreadCrumb,
  },
  data() {
      return {
        indicators:[],
          activeName: 'first'
      }
  },
  methods:{
    getStatisticsList(){
      let params = {
      }
      this.indicators = []
      getStatisticsList(params).then(response => {
        if (response.data.state == 1) {
          // this.indicators  =  this.indicators.concat(response.data.data.configurationlist)
          console.log('444444444',this.indicators);
          for(let i = 0; i < this.indicators.length; i++){
            this.indicators[i]["check_type"] = 1
            this.indicators[i]["sub_check_type"] = 1
          }
          let obj = {
            "check_type":1,
            "item_name":"透析总量分析",
            "sub_check_type":1
          }
          this.indicators.push(obj)
          let obj2 = {
            "check_type":2,
            "item_name":"透析总量详情",
            "sub_check_type":3
          }
          this.indicators.push(obj2)
          let obj3 = {
            "check_type":3,
            "item_name":"抗凝剂类型统计",
            "sub_check_type":1
          }
          this.indicators.push(obj3)

          let obj4 = {
            "check_type":4,
            "item_name":"透析器使用统计",
            "sub_check_type":1

          }
          this.indicators.push(obj4)
          let obj5 = {
            "check_type":5,
            "item_name":"透析治疗完成率",
            "sub_check_type":2

          }
          this.indicators.push(obj5)


          console.log( this.indicators)
          // this.indicators.push("")
        } else {
          this.$message.error(response.data.msg)
        }
      })
    },
    echart_click(item){
      if(item.check_type == 1){
        this.$router.push('/Dialysisanalysis/qualitycontrol/new_otherIndicators/Total_analysis')
      }else if(item.check_type == 2){
        this.$router.push('/Dialysisanalysis/qualitycontrol/new_otherIndicators/Total_table')
      }else if (item.check_type == 3){
        this.$router.push('/Dialysisanalysis/qualitycontrol/new_otherIndicators/anticoagulant')
      }else if (item.check_type == 4){
        this.$router.push('/Dialysisanalysis/qualitycontrol/new_otherIndicators/dialyzer')
      }
      else if(item.check_type == 5){
        this.$router.push('/Dialysisanalysis/qualitycontrol/new_otherIndicators/complete')
      }
      console.log('item',item);
    }
    // jump(project_id, item_id,project_type){
    //   this.$router.push('/Dialysisanalysis/qualitycontrol/Indicatorsdetail?project_id='+project_id+"&item_id="+item_id+"&project_type="+parseInt(project_type))
    // },
    // handleClick(tab, event) {
    //   console.log(tab, event);
    // },
    // echart_click(item){
    //   // if(item.check_type == 1){
    //   //   if(item.sub_check_type == 1){
    //   //     this.$router.push('/Dialysisanalysis/qualitycontrol/Indicatorsdetail?project_id='+item.inspection_major+"&item_id="+item.inspection_minor+"&project_type="+parseInt(item.id))

    //   //     // this.$router.push('/Dialysisanalysis/qualitycontrol/otherIndicators/components/columnarTotal')

    //   //   }else if(item.sub_check_type == 2){
    //   //     this.$router.push('/Dialysisanalysis/qualitycontrol/platelets')
    //   //   }
    //   // }else if(item.check_type == 2){
    //   //   this.$router.push('/Dialysisanalysis/qualitycontrol/summary')
    //   // }


    // }
  },
  created(){
  this.getStatisticsList()

}
}
</script>

<style lang="scss" scoped>

.page_patientControlAnalysis{
.background{
  height: 180px;
  width: 100%;
  background-repeat:no-repeat;
}
.date_type1{
  background: url('../../../assets/img/zhuzhuantu.png');
}
.date_type2{
  background: url('../../../assets/img/bingzhuantua.png');
}
.date_type3{
  background: url('../../../assets/img/biaoge.png');
}

.title{
  font-size: 18px;
  margin: 15px 10px;
  color: #333333;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.tag {
  margin-left: 10px;
  height: 82px;
  overflow: auto;
}
.use {
  font-size: 14px;
  color: #999;
  margin-left: 10px;
}
// .shoucang{
//   width: 20px;
//   height: 20px;
//   margin-right: 15px;
//   float: right;
//   background:url('../../../assets/img/xingixnghuise.png')
// }
.tags{
  font-size: 14px;
  font-family: Microsoft YaHei;
  color: #477ac5;
  background: #edf4ff;
  margin-right: 3px;
  margin-top: 3px;
  padding: 1px 6px;
  border-radius: 5px;
}
.photos{
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}

}
// .page_patientControlAnalysis {

// .pointTitle {
//   font-size: 13px;
// }

// .chartTitle {
//   font-size: 16px;
//   font-weight: bold;
//   color: #000000;
// }

// .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;
// }

// }

</style>

<style lang="scss">
// .page_patientControlAnalysis {

// .el-form-item {
//   margin-bottom: 0;
// }

// .cell {
//   text-align: center;
// }

// ::-webkit-scrollbar {
//   height: 15px !important;
// }

// }
</style>