elizebeth/src/xt_pages/qcd/basicInformationAnalysis.vue

<template>
  <div class="main-contain">
    <div class="position">
      <bread-crumb :crumbs="crumbs"></bread-crumb>
    </div>
    <div class="app-container">
      <div class="cell clearfix">
        <label class="title">
          <span class="name">转归状态</span> :
        </label>
        <div class="time">
          <ul class>
            <li
              :class="item.state == stateType ? 'active' : ''"
              @click="selectLapseTo(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"
          style="width: 196px;"
          type="date"
          placeholder="选择日期时间"
          align="right"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
        ></el-date-picker>
        <span class>-</span>
        <el-date-picker
          v-model="listQuery.end_time"
          prefix-icon="el-icon-date"
          @change="changeEndTime"
          :editable="false"
          style="width: 196px;"
          type="date"
          placeholder="选择日期时间"
          align="right"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
        ></el-date-picker>
      </div>
      <div class="cell clearfix" style="align-items:normal">
        <div style="float:left">
          <div class="infoBox">
            <div class="infoOne">
              <div class="titleBox">
                <span class="point"></span>
                <p class="infoTitle">透析总量({{total}}次)</p>
              </div>
            
              <div class="borderBox">
               <div v-for="(item,index) in modetype" :key="index">
                <p>{{item.mode_id}}:{{item.count}}次({{(item.count/total*100).toFixed(1)}}%)</p>
                <el-progress :percentage="(item.count/total*100).toFixed(1)"></el-progress>
               </div>
                <p>HD:64次(64%)</p>
                <el-progress :percentage="70"></el-progress>
              </div>
            </div>
            <div class="infoOne">
              <div class="titleBox">
                <span class="point2"></span>
                <p class="infoTitle">传染病统计</p>
              </div>
              <div class="borderBox2">
               <div v-for="(item,i) in this.InfectiousList" :key="i">
                 <span v-if="item.disease_id == 2">
                    <p>乙肝:{{item.count}}人({{(item.count/InfectiousTotal*100).toFixed(1)}}%)</p>
                    <el-progress :percentage="(item.count/InfectiousTotal*100).toFixed(1)"></el-progress>
                  </span>
                  <span v-if="item.disease_id == 3">
                    <p>丙肝:{{item.count}}人({{(item.count/InfectiousTotal*100).toFixed(1)}}%)</p>
                    <el-progress :percentage="(item.count/InfectiousTotal*100).toFixed(1)"></el-progress>
                  </span>
                   <span v-if="item.disease_id == 4">
                    <p>艾滋病:{{item.count}}人({{(item.count/InfectiousTotal*100).toFixed(1)}}%)</p>
                    <el-progress :percentage="(item.count/InfectiousTotal*100).toFixed(1)"></el-progress>
                  </span>
                  <span v-if="item.disease_id == 5">
                    <p>肺结核:{{item.count}}人({{(item.count/InfectiousTotal*100).toFixed(1)}}%)</p>
                    <el-progress :percentage="(item.count/InfectiousTotal*100).toFixed(1)"></el-progress>
                  </span>
                   <span v-if="item.disease_id == 6">
                      <p>梅毒:{{item.count}}人({{(item.count/InfectiousTotal*100).toFixed(1)}}%)</p>
                      <el-progress :percentage="(item.count/InfectiousTotal*100).toFixed(1)"></el-progress>
                  </span>
                    <span v-if="item.disease_id == 1">
                      <p>其他:{{item.count + otherTotal}}人({{((item.count+otherTotal)/InfectiousTotal*100).toFixed(1)}}%)</p>
                      <el-progress :percentage="((item.count+otherTotal)/InfectiousTotal*100).toFixed(1)"></el-progress>
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div style="float:left">
          <div class="infoBox">
            <div class="infoOne">
              <div class="titleBox">
                <span class="point1"></span>
                <p class="infoTitle">转归统计(总人数{{patientCount}}人)</p>
              </div>
              <div class="borderBox1">
                <p>留治:{{RetentionCount}}人({{(RetentionCount/patientCount*100).toFixed(1)}}%)</p>
                <el-progress :percentage="(RetentionCount/patientCount*100).toFixed(1)"></el-progress>
                <p>转出:{{rollOut}}人({{(rollOut/patientCount*100).toFixed(1)}}%)</p>
                <el-progress :percentage="(rollOut/patientCount*100).toFixed(1)"></el-progress>
              </div>
            </div>
            <div class="infoOne">
              <div class="titleBox">
                <span class="point2"></span>
                <p class="infoTitle">男女比例</p>
              </div>
              <div class="borderBox2">
                <p>男:{{totalMan}}人({{(totalMan/totalGender*100).toFixed(1)}}%)</p>
                <el-progress :percentage="(totalMan/totalGender*100).toFixed(1)"></el-progress>
                <p>女:{{totalWoman}}人({{(totalWoman/totalGender*100).toFixed(1)}}%)</p>
                <el-progress :percentage="(totalWoman/totalGender*100).toFixed(1)"></el-progress>
              </div>
            </div>
            <div class="infoOne">
              <div class="titleBox">
                <span class="point"></span>
                <p class="infoTitle">年龄统计</p>
              </div>
              <div class="borderBox">
                <div v-for="(item,j) in ageCount" :key="j">
                    <span v-if="item.age == 20">
                     <p>年龄≤20:{{item.count}}人({{(item.count/ageTotal*100).toFixed(1)}}%)</p>
                     <el-progress :percentage="(item.count/ageTotal*100).toFixed(1)"></el-progress>
                    </span>
                   <span v-if="item.age == 40">
                      <p>20<年龄≤40:{{item.count}}人({{(item.count/ageTotal*100).toFixed(1)}}%)</p>
                      <el-progress :percentage="(item.count/ageTotal*100).toFixed(1)"></el-progress>
                    </span>
                    <span v-if="item.age == 60">
                      <p>40<年龄≤60:{{item.count}}人({{(item.count/ageTotal*100).toFixed(1)}}%)</p>
                      <el-progress :percentage="(item.count/ageTotal*100).toFixed(1)"></el-progress>
                    </span>
                    <span v-if="item.age == 80">
                     <p>60<年龄≤80:{{item.count}}人({{(item.count/ageTotal*100).toFixed(1)}}%)</p>
                     <el-progress :percentage="(item.count/ageTotal*100).toFixed(1)"></el-progress>
                    </span>
                    <span v-if="item.age ==150">
                      <p>大于80:{{item.count}}人({{(item.count/ageTotal*100).toFixed(1)}}%)</p>
                      <el-progress :percentage="(item.count/ageTotal*100).toFixed(1)"></el-progress>
                    </span>
                </div>
              </div>
            </div>
            <div class="infoOne">
              <div class="titleBox">
                <span class="point1"></span>
                <p class="infoTitle">透龄统计</p>
              </div>
              <div class="borderBox1">
                <p>透析龄≤12:64人(64%)</p>
                <el-progress :percentage="70"></el-progress>
                <p>12<透析龄≤36:64人(64%)</p>
                <el-progress :percentage="70"></el-progress>
                <p>36≤透析龄≤60:64人(64%)</p>
                <el-progress :percentage="70"></el-progress>
                <p>透析龄 ≥60:64人(64%)</p>
                <el-progress :percentage="70"></el-progress>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>



<script>
const moment = require('moment')
import { GetOICData } from "@/api/qcd";
import PieChart from "../qcd/components/BarChart";
import { uParseTime } from "@/utils/tools";
import BreadCrumb from "@/xt_pages/components/bread-crumb";
import {getDialysisModeType,getTotalLapseCount,getTotalSexCount,getTotalInfectiousCount,getTotalAgeCount,getTotalDialysisCount} from "@/api/common/common"
export default {
  name: "dialysisTotal",
  components: {
    PieChart,
    BreadCrumb
  },
  data() {
    return {
      crumbs: [
        { path: false, name: "科室质控" },
        { path: false, name: "基本信息统计" }
      ],
      listQuery: {
        start_time: "",
        end_time: "",
        page: 1,
        limit: 10
      },
      stateType: 0,
      month: [
        { value: 0, label: "本月", state: 0 },
        { value: 1, label: "近三个月", state: 1 },
        { value: 2, label: "近半年", state: 2 },
        { value: 3, label: "近一年", state: 3 }
      ],
      modetype:[],
      total:0,
      patientCount:0,
      rollOut:0,
      RetentionCount:0,
      totalMan:0,
      totalWoman:0,
      totalGender:0,
      InfectiousList:[],
      InfectiousTotal:0,
      ageCount:[],
      ageTotal:0,
      otherTotal:0,
    };
  },
  methods: {
    getTimestamp(time) {
      // 把时间日期转成时间戳
      return new Date(time).getTime() / 1000;
    },
    changeTime() {},
    changeEndTime(val) {
      var time =
        this.getTimestamp(val) - this.getTimestamp(this.listQuery.start_time);
      if (time < 0) {
        this.$message.error("结束时间不能小于开始时间");
        this.listQuery.end_time = "";
      } else {
      }
    },
    selectLapseTo(state) {
      this.stateType = state;
      this.listQuery.state = state;
    },
    getDialysisModeType(startDate,endDate){
      getDialysisModeType(startDate,endDate).then(response=>{
         if(response.data.state == 1){
          var modetype =  response.data.data.modetype
          console.log("mode---",modetype)
            var total =  response.data.data.total
            console.log("total",total)
            this.total = total
           for(let i=0;i<modetype.length;i++){
             if(modetype[i].mode_id == 1){
               modetype[i].mode_id = "HD"
             }
             if(modetype[i].mode_id == 2){
               modetype[i].mode_id = "HDF"
             }
             if(modetype[i].mode_id == 3){
               modetype[i].mode_id = "HD+HP"
             }
              if(modetype[i].mode_id == 4){
               modetype[i].mode_id = "HP"
             }
              if(modetype[i].mode_id == 5){
               modetype[i].mode_id = "HF"
             }
             if(modetype[i].mode_id == 6){
               modetype[i].mode_id = "SCUF"
             }
             if(modetype[i].mode_id == 7){
               modetype[i].mode_id = "IUF"
             }
              if(modetype[i].mode_id == 8){
               modetype[i].mode_id = "HFHD"
             }
             if(modetype[i].mode_id == 9){
               modetype[i].mode_id = "HFHD+HP"
             }
             if(modetype[i].mode_id == 10){
               modetype[i].mode_id = "PHF"
             }
             if(modetype[i].mode_id == 11){
               modetype[i].mode_id = "HFR"
             }
            if(modetype[i].mode_id == 12){
               modetype[i].mode_id = "HDF+HP"
             }
              if(modetype[i].mode_id == 13){
               modetype[i].mode_id = "HFHD+HP"
             }
              if(modetype[i].mode_id == 14){
               modetype[i].mode_id = "腹水回输"
             }
            if(modetype[i].mode_id == 19){
               modetype[i].mode_id = "IUF+HD"
             }
           }
           this.modetype = modetype
           console.log("modetype",modetype)
         
         }
      })
    },
    //统计转归
    getTotalLapseCount(startDate,endDate){
      getTotalLapseCount(startDate,endDate).then(response=>{
         if(response.data.state == 1){
          var patients =  response.data.data.patients
          var total = response.data.data.total
          this.rollOut = total
          var count = response.data.data.count
          this.patientCount = count
          this.RetentionCount = count-total
         }
      })
    },
    //统计男女比例
    getTotalSexCount(timeStar,timeEnd){
      getTotalSexCount(timeStar,timeEnd).then(response=>{
        if(response.data.state === 1){
          var total = response.data.data.total
        //  console.log("总人数",total)
          this.totalGender = total
          var totalMan = response.data.data.totalSex
       //  console.log("男人",totalMan)
          this.totalMan = totalMan
          var totalWoman = total - totalMan
          this.totalWoman = totalWoman
        }
      })
    },
    //统计传染病
    getTotalInfectiousCount(timeStar,timeEnd){
       getTotalInfectiousCount(timeStar,timeEnd).then(response=>{
           if(response.data.state === 1){
             this.InfectiousTotal = response.data.data.total
             var infectious = response.data.data.count
             this.InfectiousList = infectious
           // for(let i=0;i<infectious.length;i++){
           //   if(infectious[i].disease_id == 1){
           //      infectious[i].disease_id = "其他"
            //   }
            //   if(infectious[i].disease_id == 2){
            //     infectious[i].disease_id = "乙肝"
            //   }
           //    if(infectious[i].disease_id == 3){
            //     infectious[i].disease_id = "丙肝"
           //    }
            //   if(infectious[i].disease_id == 4){
            //     infectious[i].disease_id = "艾滋病"
            //   }
            //   if(infectious[i].disease_id == 5){
            //     infectious[i].disease_id = "肺结核"
            //   }
            //   if(infectious[i].disease_id == 6){
            //     infectious[i].disease_id = "梅毒"
            //   }
               
            // }
             var otherTotal = response.data.data.otherTotal
             this.otherTotal = otherTotal
             // console.log("infectious-----------",otherTotal)
           }
       })
    },
    getTotalAgeCount(timeStar,timeEnd){
      getTotalAgeCount(timeStar,timeEnd).then(response=>{
         if(response.data.state == 1){
          var ageCount =  response.data.data.ageCount
          this.ageCount = ageCount
        //  console.log("ageCount",ageCount)
          this.ageTotal =  response.data.data.total
         // var two = response.data.data.two
        //  console.log("two",two)
       
         }
      })
    },
    //统计透析年龄
    getTotalDialysisCount(timeStar,timeEnd){
      getTotalDialysisCount(timeStar,timeEnd).then(response=>{
         if(response.data.state == 1){
           var patients = response.data.data.patients
           var now = new Date()
           var nowMonth = now.getMonth(); //当前月 
           var nowYear = now.getFullYear(); //当前年 
           var notime =  moment(new Date()).format('YYYY-MM-DD')
           var nowdataunix =  Date.parse(notime)/1000
           console.log("档期是---------------",nowdataunix)
           for(let i=0;i<patients.length;i++){
             if(patients[i].first_dialysis_date){
             }
           }
           console.log("patients",patients)
            var date =  new Date(1212508800)
          console.log("date",date)
          
         }
      })
    }
  },
  created() {
     //获取本月当前机构的透析模式
      const startDate = moment().subtract('month', 0).format('YYYY-MM') + '-01'
      console.log("开始时间",startDate)
      const endDate = moment(new Date()).format('YYYY-MM-DD')
     // console.log("结束时间",endDate) 
      var now = new Date()
      var nowMonth = now.getMonth(); //当前月 
      var nowYear = now.getFullYear(); //当前年 
      //本月的开始时间
      var monthStartDate = new Date(nowYear, nowMonth, 1); 
      var timeStar=Date.parse(monthStartDate)/1000;//s
     // console.log("本月第一天",timeStar)
      //本月的结束时间
      var monthEndDate = new Date(nowYear, nowMonth+1, 0);
      var timeEnd=Date.parse(monthEndDate)/1000-1;//s
     // console.log("本月最后一天",timeEnd)
      //统计透析总量
      this.getDialysisModeType(startDate,endDate)
      //统计转归状态
      this.getTotalLapseCount(timeStar,timeEnd)
      //统计男女比例
      this.getTotalSexCount(timeStar,timeEnd)
      //统计传染病
      this.getTotalInfectiousCount(timeStar,timeEnd)
      //统计年龄
      this.getTotalAgeCount(timeStar,timeEnd)
      //统计透析年龄
      this.getTotalDialysisCount(timeStar,timeEnd)
  },
};
</script>

 <style rel="stylesheet/scss" lang="scss" scoped>
.infoBox {
  display: flex;
  flex-wrap: wrap;
  .infoOne {
    margin-right: 30px;
    margin-top: 30px;
    .titleBox {
      display: flex;
      align-items: center;
    }
    .point {
      display: inline-block;
      width: 7px;
      height: 7px;
      background: linear-gradient(
        90deg,
        rgba(169, 224, 243, 1),
        rgba(159, 189, 252, 1)
      );
      border-radius: 50%;
    }
    .point1 {
      width: 7px;
      height: 7px;
      background: linear-gradient(
        90deg,
        rgba(255, 215, 192, 1),
        rgba(255, 153, 148, 1)
      );
      border-radius: 50%;
    }
    .point2 {
      width: 7px;
      height: 7px;
      background: linear-gradient(
        90deg,
        rgba(215, 195, 253, 1),
        rgba(179, 168, 247, 1)
      );
      border-radius: 50%;
    }
    .infoTitle {
      font-size: 16px;
      font-weight: bold;
      margin-left: 5px;
      color: #000;
    }
    .borderBox {
      width: 340px;
      min-height: 140px;
      background: rgba(255, 255, 255, 1);
      border: 1px solid rgba(229, 229, 229, 1);
      border-radius: 10px;
      padding: 0 14px 20px;
      margin-top: 10px;
      p {
        font-size: 14px;
        color: #000;
        margin: 10px 0 3px;
      }
    }
    .borderBox1 {
      width: 340px;
      min-height: 140px;
      background: rgba(255, 255, 255, 1);
      border: 1px solid rgba(229, 229, 229, 1);
      border-radius: 10px;
      padding: 0 14px 20px;
      margin-top: 10px;
      p {
        font-size: 14px;
        color: #000;
        margin: 10px 0 3px;
      }
    }
    .borderBox2 {
      width: 340px;
      min-height: 140px;
      background: rgba(255, 255, 255, 1);
      border: 1px solid rgba(229, 229, 229, 1);
      border-radius: 10px;
      padding: 0 14px 20px;
      margin-top: 10px;
      p {
        font-size: 14px;
        color: #000;
        margin: 10px 0 3px;
      }
    }
  }
}
</style>

<style lang="scss">
.infoBox {
  .infoOne {
    .borderBox {
      .el-progress-bar__inner {
        background: linear-gradient(
          90deg,
          rgba(169, 224, 243, 1),
          rgba(159, 189, 252, 1)
        );
      }
    }
    .borderBox1 {
      .el-progress-bar__inner {
        background: linear-gradient(
          90deg,
          rgba(255, 215, 192, 1),
          rgba(255, 153, 148, 1)
        );
      }
    }
    .borderBox2 {
      .el-progress-bar__inner {
        background: linear-gradient(
          90deg,
          rgba(215, 195, 253, 1),
          rgba(179, 168, 247, 1)
        );
      }
    }
  }
}
</style>