Vue_New/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>
    </div>

     <div class="cell clearfix">
        <label class="title">
          <span class="name">查看范围</span> :
        </label>
        <div class="time">
          <ul class>
            <li
              :class="item.state == way ? 'active' : ''"
              @click="selectWay(item.state)"
              v-for="item in wayArr"
              :key="item.value"
            >{{ item.label }}</li>
          </ul>
        </div>
      </div>

      <div class="cell clearfix">
        <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"
          :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"
          style="width: 196px;"
          type="date"
          placeholder="选择日期时间"
          align="right"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          :picker-options="pickerOptions"
        ></el-date-picker>
      </div>

     <div class="cell clearfix">
        <label class="title"><span class="name">转归情况</span> : </label>
        <div class="time ">
          <ul class="">
            <li
              :class="item.lapseto == lapsetoType ? 'active' : ''"
              @click="selectLapseOne(item.lapseto)"
              v-for="item in lapsetoArr"
              :key="item.value"
            >
              {{ item.label }}
            </li>
          </ul>
        </div>
      </div>

      <div class="cell clearfix">
        <label class="title"><span class="name">病人来源</span> : </label>
        <div class="time ">
          <ul class="">
            <li
              :class="item.source == sourceType ? 'active' : ''"
              @click="selectSource(item.source)"
              v-for="item in sourceArr"
              :key="item.value"
            >
              {{ item.label }}
            </li>
          </ul>
        </div>
      </div>

       <div class="cell clearfix" v-show="treatShow">
        <label class="title">
          <span class="name">透析模式</span> :
        </label>
        <div class="time">
          <ul class>
            <li
             :class="item.state == stateMode ? 'active' : ''"
              @click="selectTreatMode(item.state)"
              v-for="item in treatmentMode"
              :key="item.mode_id"
            >{{ item.name }}</li>
          </ul>
        </div>
       </div>
      <div v-if="way == 0" class="cell clearfix" style="align-items:normal">
        <div style="float:left">
          <div class="infoBox" style="width:370px;">
            <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">
                 <span v-if="item.mode_id == 'HD'">
                    <p>HD:{{item.count}}次({{(item.count/total*100).toFixed(1)}}%)</p>
                    <el-progress :percentage="(item.count/total*100).toFixed(1)"></el-progress>
                  </span>
                  <span v-if="item.mode_id == 'HDF'">
                    <p>HDF:{{item.count}}次({{(item.count/total*100).toFixed(1)}}%)</p>
                    <el-progress :percentage="(item.count/total*100).toFixed(1)"></el-progress>
                  </span>
                  <span v-if="item.mode_id == 'HD+HP'">
                    <p>HD+HP:{{item.count}}次({{(item.count/total*100).toFixed(1)}}%)</p>
                    <el-progress :percentage="(item.count/total*100).toFixed(1)"></el-progress>
                  </span>
                  <span v-if="item.mode_id == 'HP'">
                    <p>HP:{{item.count}}次({{(item.count/total*100).toFixed(1)}}%)</p>
                    <el-progress :percentage="(item.count/total*100).toFixed(1)"></el-progress>
                  </span>
                  <span v-if="item.mode_id == 'HF'">
                    <p>HF:{{item.count}}次({{(item.count/total*100).toFixed(1)}}%)</p>
                    <el-progress :percentage="(item.count/total*100).toFixed(1)"></el-progress>
                  </span>
                  <span v-if="item.mode_id == 'SCUF'">
                    <p>SCUF:{{item.count}}次({{(item.count/total*100).toFixed(1)}}%)</p>
                    <el-progress :percentage="(item.count/total*100).toFixed(1)"></el-progress>
                  </span>
                  <span v-if="item.mode_id == 'IUF'">
                    <p>IUF:{{item.count}}次({{(item.count/total*100).toFixed(1)}}%)</p>
                    <el-progress :percentage="(item.count/total*100).toFixed(1)"></el-progress>
                  </span>
                  <span v-if="item.mode_id == 'HFHD'">
                    <p>HFHD:{{item.count}}次({{(item.count/total*100).toFixed(1)}}%)</p>
                    <el-progress :percentage="(item.count/total*100).toFixed(1)"></el-progress>
                  </span>
                  <span v-if="item.mode_id == 'HFHD+HP'">
                    <p>HFHD+HP:{{item.count}}次({{(item.count/total*100).toFixed(1)}}%)</p>
                    <el-progress :percentage="(item.count/total*100).toFixed(1)"></el-progress>
                  </span>
                  <span v-if="item.mode_id == 'PHF'">
                    <p>PHF:{{item.count}}次({{(item.count/total*100).toFixed(1)}}%)</p>
                    <el-progress :percentage="(item.count/total*100).toFixed(1)"></el-progress>
                  </span>
                   <span v-if="item.mode_id == 'HFR'">
                    <p>HFR:{{item.count}}次({{(item.count/total*100).toFixed(1)}}%)</p>
                    <el-progress :percentage="(item.count/total*100).toFixed(1)"></el-progress>
                  </span>
                  <span v-if="item.mode_id == 'HDF+HP'">
                    <p>HDF+HP:{{item.count}}次({{(item.count/total*100).toFixed(1)}}%)</p>
                    <el-progress :percentage="(item.count/total*100).toFixed(1)"></el-progress>
                  </span>
                  <span v-if="item.mode_id == 'HFHD+HP'">
                      <p>HFHD+HP:{{item.count}}次({{(item.count/total*100).toFixed(1)}}%)</p>
                      <el-progress :percentage="(item.count/total*100).toFixed(1)"></el-progress>
                  </span>
                   <span v-if="item.mode_id == '腹水回输'">
                      <p>腹水回输:{{item.count}}次({{(item.count/total*100).toFixed(1)}}%)</p>
                      <el-progress :percentage="(item.count/total*100).toFixed(1)"></el-progress>
                  </span>
                   <span v-if="item.mode_id == 'HD前置换'">
                      <p>HD前置换:{{item.count}}次({{(item.count/total*100).toFixed(1)}}%)</p>
                      <el-progress :percentage="(item.count/total*100).toFixed(1)"></el-progress>
                   </span>
                    <span v-if="item.mode_id == 'HD后置换'">
                      <p>HD后置换:{{item.count}}次({{(item.count/total*100).toFixed(1)}}%)</p>
                      <el-progress :percentage="(item.count/total*100).toFixed(1)"></el-progress>
                   </span>
                    <span v-if="item.mode_id == 'HDF前置换'">
                      <p>HDF前置换:{{item.count}}次({{(item.count/total*100).toFixed(1)}}%)</p>
                      <el-progress :percentage="(item.count/total*100).toFixed(1)"></el-progress>
                   </span>
                    <span v-if="item.mode_id == 'HDF后置换'">
                      <p>HDF后置换:{{item.count}}次({{(item.count/total*100).toFixed(1)}}%)</p>
                      <el-progress :percentage="(item.count/total*100).toFixed(1)"></el-progress>
                   </span>
                   <span v-if="item.mode_id == 'IUF+HD'">
                      <p>IUF+HD:{{item.count}}次({{(item.count/total*100).toFixed(1)}}%)</p>
                      <el-progress :percentage="(item.count/total*100).toFixed(1)"></el-progress>
                  </span>
               </div>
              </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}}人({{((item.count)/InfectiousTotal*100).toFixed(1)}}%)</p>
                      <el-progress :percentage="((item.count)/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">
                 <span v-if="lapsetoType == 0 || lapsetoType == 1"><p>留治:{{rollOutTotal}}人({{(rollOutTotal/patientCount*100).toFixed(1)}}%)</p>
                  <el-progress :percentage="(rollOutTotal/patientCount*100).toFixed(1)"></el-progress>
                </span>
                <span v-if="lapsetoType == 0 || lapsetoType == 2"><p>转出:{{outTotal}}人({{(outTotal/patientCount*100).toFixed(1)}}%)</p>
                 <el-progress :percentage="(outTotal/patientCount*100).toFixed(1)"></el-progress>
                </span> 
              </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&lt;年龄≤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&lt;年龄≤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&lt;年龄≤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">
                <div v-for="(item,index) in dialysisAge" :key="index">
                 <span v-if="item.age== 1">
                  <p>透析龄≤12:{{item.count}}人({{(item.count/patientCount*100).toFixed(1)}}%)</p>
                  <el-progress :percentage="(item.count/patientCount*100).toFixed(1)"></el-progress>
                </span>
                <span v-if="item.age == 2">
                  <p>12&lt;透析龄≤36:{{item.count}}人({{(item.count/patientCount*100).toFixed(1)}}%)</p>
                 <el-progress :percentage="(item.count/patientCount*100).toFixed(1)"></el-progress>
                </span>
                <span v-if="item.age == 3">
                   <p>36≤透析龄≤60:{{item.count}}/人({{(item.count/patientCount*100).toFixed(1)}}%)</p>
                   <el-progress :percentage="(item.count/patientCount*100).toFixed(1)"></el-progress>
                </span>
                <span v-if="item.age == 4">
                   透析龄 ≥60:{{item.count}}人({{((item.count)/patientCount*100).toFixed(1)}}%)
                   <el-progress :percentage="((item.count)/patientCount*100).toFixed(1)"></el-progress>
                </span>
               </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-else>
        <div style="margin-bottom:20px;">
          <p style="font-size: 16px;font-weight: bold;color: #000;">透析总量</p>
          <line-chart :options="chart"></line-chart>
        </div>
        <div>

        <div class="cell clearfix" v-show="treatShow">
        <label class="title">
          <span class="name">转归状态</span> :
        </label>
        <div class="time">
          <ul class>
            <li
             :class="item.state == lapseMode ? 'active' : ''"
              @click="selectLapsetoMode(item.state)"
              v-for="item in lapsetoMode"
              :key="item.value"
            >{{ item.label }}</li>
          </ul>
        </div>
       </div>

          <p style="font-size: 16px;font-weight: bold;color: #000;">转归统计</p>
          <line-chart :options="bar"></line-chart>
        </div>
      </div>
    </div>
  </div>
</template>



<script>
const moment = require('moment')
import echarts from "echarts";
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 LineChart from "../qcd/components/LineChart";
import {getDialysisModeType,getTotalLapseCount,getTotalSexCount,getTotalInfectiousCount,getTotalAgeCount,getTotalDialysisCount,getTreatModeList,getCountModeId,getRolloutCount} from "@/api/common/common"
export default {
  name: "dialysisTotal",
  components: {
    PieChart,
    BreadCrumb,
    LineChart
  },
  data() {
    return {
       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;;
        }
      },
      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 }
        // { value:4,label:"自定义",state:4}
      ],
      modetype:[],
      total:0,
      patientCount:0,
      rollOut:0,
      RetentionCount:0,
      totalMan:0,
      totalWoman:0,
      totalGender:0,
      InfectiousList:[],
      InfectiousTotal:0,
      ageCount:[],
      ageTotal:0,
      otherTotal:0,
      totalone:0,
      totaltwo:0,
      totalthree:0,
      rollOutTotal:0,
      outTotal:0,
      dialysisAge:[],
      start:0,
      end:0,
      lapsetoType: 0,
      lapsetoArr: [
        { value: 0, label: '全部', source: 0, lapseto: 0 },
        { value: 1, label: '转出', source: 0, lapseto: 2 },
        { value: 2, label: '留治', source: 0, lapseto: 1 },
        // { value: 3, label: '死亡', source:0,  lapseto: 3 },
      ],
      sourceType: 0,
      sourceArr: [
       { value: 0, label: '全部', source: 0, lapseto: 0 },
       { value: 3, label: '门诊', source: 1, lapseto: 1 },
       { value: 4, label: '住院', source: 2, lapseto: 1 }
      ],
      way: 0,
      wayArr: [
        { value: 0, label: "统计图", state: 0 },
        { value: 1, label: "趋势图", state: 1 }
      ],
      modesData: {
       xAxis: [],
       series: []
      },
      modesDataTwo:{
        xAxis:[],
        series:[]
      },
      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"],

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

                  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] }
                  ]);
                },
                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 // 锁定区域禁止缩放
          }
        ],
      },

      bar: {
        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"],

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

                  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] }
                  ]);
                },
                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 // 锁定区域禁止缩放
          }
        ],
      },
      treatmentMode:[],
      stateMode:1,
      lapseMode:0,
      treatShow:false,
      mode_id:0,
      lapsetoMode:[
        { value: 0, label: "留治", state: 0 },
        { value: 1, label: "转出", state: 1}
      ],
      lapseid:0,
      startDate:"",
      endDate:"",
    };


  },
  methods: {
    getTimestamp(time) {
      // 把时间日期转成时间戳
      return new Date(time).getTime() / 1000;
    },
    changeTime(val) {
       this.stateType = 4
       var timeStar=Date.parse(val)/1000
       var timeEnd =Date.parse(this.listQuery.end_time)/1000
      var time = this.getTimestamp(val) - this.getTimestamp(this.end_time);
      if (time > 0) {
        this.$message.error("结束时间不能小于开始时间");
        this.start_time = "";
      } else {
         //统计透析总量
        this.getDialysisModeType(val,this.listQuery.end_time,this.lapsetoType,this.sourceType)
        //统计转归状态
        this.getTotalLapseCount(this.listQuery.start_time,this.listQuery.end_time,this.lapsetoType,this.sourceType)
        //统计男女比例
        this.getTotalSexCount(timeStar,timeEnd,this.lapsetoType,this.sourceType)
        //统计传染病
        this.getTotalInfectiousCount(this.listQuery.start_time,this.listQuery.end_time,this.lapsetoType,this.sourceType)
        //统计年龄
        this.getTotalAgeCount(timeStar,timeEnd,this.lapsetoType,this.sourceType)
        //统计透析年龄
        this.getTotalDialysisCount(timeStar,timeEnd,this.lapsetoType,this.sourceType)
        this.start = timeStar
        this.end =timeEnd
        this.getCountModeId()
        this.getRolloutCount(timeStar,timeEnd,this.lapsetoType,this.sourceType)
      }
    },
    changeEndTime(val) {
       this.stateType = 4
       var timeEnd=Date.parse(val)/1000
       var timeStar =Date.parse(this.listQuery.start_time)/1000
      var time =
        this.getTimestamp(val) - this.getTimestamp(this.listQuery.start_time);
      if (time < 0) {
        this.$message.error("结束时间不能小于开始时间");
        this.listQuery.end_time = "";
      } else {
          //统计透析总量
        this.getDialysisModeType(this.listQuery.start_time,val,this.lapsetoType,this.sourceType)
        //统计转归状态
        this.getTotalLapseCount(this.listQuery.start_time,this.listQuery.end_time,this.lapsetoType,this.sourceType)
        //统计男女比例
        this.getTotalSexCount(timeStar,timeEnd,this.lapsetoType,this.sourceType)
        //统计传染病
        this.getTotalInfectiousCount(this.listQuery.start_time,this.listQuery.end_time,this.lapsetoType,this.sourceType)
        //统计年龄
        this.getTotalAgeCount(timeStar,timeEnd,this.lapsetoType,this.sourceType)
        //统计透析年龄
        this.getTotalDialysisCount(timeStar,timeEnd,this.lapsetoType,this.sourceType)
        this.start = timeStar
        this.end =timeEnd
        this.getCountModeId()
        this.getRolloutCount(timeStar,timeEnd,this.lapsetoType,this.sourceType)
      }
    },
    selectLapseTo(state) {
      this.stateType = state;
      this.listQuery.state = state;
      //获取本月当前机构的透析模式
      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);
      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)
      //本月
      if(state == 0){
       //统计透析总量
        this.getDialysisModeType(startDate,endDate,this.lapsetoType,this.sourceType)
        //统计转归状态
        this.getTotalLapseCount(startDate,endDate,this.lapsetoType,this.sourceType)
        //统计男女比例
        this.getTotalSexCount(timeStar,timeEnd,this.lapsetoType,this.sourceType)
        //统计传染病
        this.getTotalInfectiousCount(startDate,endDate,this.lapsetoType,this.sourceType)
        //统计年龄
        this.getTotalAgeCount(timeStar,timeEnd,this.lapsetoType,this.sourceType)
        //统计透析年龄
        this.getTotalDialysisCount(timeStar,timeEnd,this.lapsetoType,this.sourceType)
        this.start = timeStar
        this.end = timeEnd
        this.getCountModeId()
        this.getRolloutCount(timeStar,timeEnd,this.lapsetoType,this.sourceType)
      }
      //近三月
      if(state == 1){
        this.listQuery.start_time = ""
        this.listQuery.end_time = ""
        const startDate = moment().subtract('month', 3).format('YYYY-MM-DD')
       
        var startunitx = Date.parse(startDate)/1000
        // console.log("开始时间搓",startunitx)
        const endDate = moment(new Date()).format('YYYY-MM-DD')
        // console.log("结束时间",endDate)
         var endunitx = Date.parse(endDate)/1000
        // console.log("日期时间搓",endunitx)
         //统计透析总量
        this.getDialysisModeType(startDate,endDate,this.lapsetoType,this.sourceType)
         //统计转归状态
        this.getTotalLapseCount(startDate,endDate,this.lapsetoType,this.sourceType)
        //统计男女比例
        this.getTotalSexCount(startunitx,endunitx,this.lapsetoType,this.sourceType)
        //统计传染病
        this.getTotalInfectiousCount(startDate,endDate,this.lapsetoType,this.sourceType)
        //统计年龄
        this.getTotalAgeCount(startunitx,endunitx,this.lapsetoType,this.sourceType)
        //统计透析年龄
        this.getTotalDialysisCount(startunitx,endunitx,this.lapsetoType,this.sourceType)
        this.start = startunitx
        this.end = endunitx
        this.getCountModeId()
        this.getRolloutCount(startunitx,endunitx,this.lapsetoType,this.sourceType)
      }

     //近半年
     if(state == 2){
        this.listQuery.start_time = ""
        this.listQuery.end_time = ""
        const startDate = moment().subtract('month', 6).format('YYYY-MM-DD')
        // console.log("6月前",startDate)
        var startunitx = Date.parse(startDate)/1000
        // console.log("开始时间搓",startunitx)
        const endDate = moment(new Date()).format('YYYY-MM-DD')
        // console.log("结束时间",endDate)
         var endunitx = Date.parse(endDate)/1000
        // console.log("日期时间搓",endunitx)
         //统计透析总量
        this.getDialysisModeType(startDate,endDate,this.lapsetoType,this.sourceType)
         //统计转归状态
        this.getTotalLapseCount(startDate,endDate,this.lapsetoType,this.sourceType)
        //统计男女比例
        this.getTotalSexCount(startunitx,endunitx,this.lapsetoType,this.sourceType)
        //统计传染病
        this.getTotalInfectiousCount(startDate,endDate,this.lapsetoType,this.sourceType)
        //统计年龄
        this.getTotalAgeCount(startunitx,endunitx,this.lapsetoType,this.sourceType)
        //统计透析年龄
        this.getTotalDialysisCount(startunitx,endunitx,this.lapsetoType,this.sourceType)

        this.start = startunitx
        this.end = endunitx
        this.getCountModeId()
        this.getRolloutCount(startunitx,endunitx,this.lapsetoType,this.sourceType)
     }

     //近一年
     if(state == 3){
        this.listQuery.start_time = ""
        this.listQuery.end_time = ""
        const startDate = moment().subtract('month', 12).format('YYYY-MM-DD')
        // console.log("6月前",startDate)
        var startunitx = Date.parse(startDate)/1000
        // console.log("开始时间搓",startunitx)
        const endDate = moment(new Date()).format('YYYY-MM-DD')
        // console.log("结束时间",endDate)
         var endunitx = Date.parse(endDate)/1000
        // console.log("日期时间搓",endunitx)
         //统计透析总量
        this.getDialysisModeType(startDate,endDate,this.lapsetoType,this.sourceType)
         //统计转归状态
        this.getTotalLapseCount(startDate,endDate,this.lapsetoType,this.sourceType)
        //统计男女比例
        this.getTotalSexCount(startunitx,endunitx,this.lapsetoType,this.sourceType)
        //统计传染病
        this.getTotalInfectiousCount(startDate,endDate,this.lapsetoType,this.sourceType)
        //统计年龄
        this.getTotalAgeCount(startunitx,endunitx,this.lapsetoType,this.sourceType)
        //统计透析年龄
        this.getTotalDialysisCount(startunitx,endunitx,this.lapsetoType,this.sourceType)
        this.start = startunitx
        this.end = endunitx
        this.getCountModeId()
        this.getRolloutCount(startunitx,endunitx,this.lapsetoType,this.sourceType)
     }



    },
    selectTreatMode(state){
      this.mode_id = state
      this.stateMode = state;
      this.getCountModeId()
    },
    selectLapsetoMode(state){
      this.lapseid  = state
      this.lapseMode = state
      this.getRolloutCount(this.start,this.end)
    },
    getDialysisModeType(startDate,endDate,lapsetoType,sourceType){
       this.modesData.series = []
       this.modesData.xAxis = []
      getDialysisModeType(startDate,endDate,lapsetoType,sourceType).then(response=>{
         if(response.data.state == 1){

          var modetype =  response.data.data.modetype
          console.log("modetype",modetype)
          this.modetype = modetype
          var total =  response.data.data.total
          console.log("total",total)
          this.total = total.count
          // this.total = total
          // console.log("数据",this.modetype)
          var modedate = response.data.data.modetype
          for(let i=0;i<modedate.length;i++){
            if(modedate[i].mode_id == 1){
               modedate[i].mode_id = "HD"
            }
            if(modedate[i].mode_id == 2){
               modedate[i].mode_id = "HDF"
            }
            if(modedate[i].mode_id == 3){
               modedate[i].mode_id = "HD+HP"
            }
            if(modedate[i].mode_id == 4){
               modedate[i].mode_id = "HP"
            }
           if(modedate[i].mode_id == 5){
               modedate[i].mode_id = "HF"
            }
           if(modedate[i].mode_id == 6){
               modedate[i].mode_id = "SCUF"
            }
            if(modedate[i].mode_id == 7){
               modedate[i].mode_id = "IUF"
            }
           if(modedate[i].mode_id == 8){
               modedate[i].mode_id = "HFHD"
            }
           if(modedate[i].mode_id == 9){
               modedate[i].mode_id = "HFHD+HP"
            }
           if(modedate[i].mode_id == 10){
               modedate[i].mode_id = "PHF"
            }
            if(modedate[i].mode_id == 11){
               modedate[i].mode_id = "HFR"
            }
            if(modedate[i].mode_id == 12){
               modedate[i].mode_id = "HDF+HP"
            }
           if(modedate[i].mode_id == 13){
               modedate[i].mode_id = "CRRT"
            }
           if(modedate[i].mode_id == 14){
               modedate[i].mode_id = "腹水回输"
            }
           if(modedate[i].mode_id == 15){
               modedate[i].mode_id = "HD前置换"
            }
           if(modedate[i].mode_id == 16){
               modedate[i].mode_id = "HD后置换"
            }
           if(modedate[i].mode_id == 17){
               modedate[i].mode_id = "HDF前置换"
            }
           if(modedate[i].mode_id == 18){
               modedate[i].mode_id = "HDF后置换"
            }
           if(modedate[i].mode_id == 19){
               modedate[i].mode_id = "IUF+HD"
            }
            // this.modesData.xAxis.push(modedate[i].mode_id)
            // this.modesData.series.push(((modedate[i].count/total)*100).toFixed(1))
          }
          // this.chart.series[0].data = this.modesData.series
          // this.chart.xAxis.data = this.modesData.xAxis
          // this.getArrLength1(this.chart.xAxis.data)

         }
      })
    },
    //统计转归
    getTotalLapseCount(startDate,endDate,lapsetoType,sourceType ){
   
       this.modesDataTwo.series = []
       this.modesDataTwo.xAxis = []
      getTotalLapseCount(startDate,endDate,lapsetoType,sourceType).then(response=>{
         if(response.data.state == 1){
           var arr = [
             {name:"留治",count:0},
             {name:"转出",count:0}
           ]
          var patients =  response.data.data.patients
      
          this.rollOutTotal = patients.length

          var patienttwo = response.data.data.patienttwo
          this.outTotal = patienttwo.length
          var count = response.data.data.count
          this.patientCount = count

          var rollout = response.data.data.rollout
        

          for(let i=0;i<arr.length;i++){
            arr[0].count = this.rollOutTotal
            arr[1].count = this.outTotal
          }
         }
      })
    },
    //统计男女比例
    getTotalSexCount(timeStar,timeEnd,lapsetoType,sourceType){
      getTotalSexCount(timeStar,timeEnd,lapsetoType,sourceType).then(response=>{
        if(response.data.state === 1){
          console.log("resp2222",response.data.data.totalWoman)
          var total = response.data.data.total
          this.totalGender = total
          var totalMan = response.data.data.totalSex
          this.totalMan = totalMan
          var totalWoman = response.data.data.totalWoman
          this.totalWoman = totalWoman
        }
      })
    },
    //统计传染病
    getTotalInfectiousCount(timeStar,timeEnd,lapsetoType,sourceType){
       getTotalInfectiousCount(timeStar,timeEnd,lapsetoType,sourceType).then(response=>{
           if(response.data.state === 1){
             this.InfectiousTotal = response.data.data.total
             var infectious = response.data.data.count
             var otherTotal = response.data.data.otherTotal
             this.otherTotal = otherTotal
              var arr = [
                {count:0,disease_id:2},
                {count:0,disease_id:3},
                {count:0,disease_id:4},
                {count:0,disease_id:5},
                {count:0,disease_id:6},
              ]
             if(infectious.length == 0){
                this.InfectiousList = arr
                return false

             }
             this.InfectiousList = infectious

           }
       })
    },
    getTotalAgeCount(timeStar,timeEnd,lapsetoType,sourceType){
      getTotalAgeCount(timeStar,timeEnd,lapsetoType,sourceType).then(response=>{
         if(response.data.state == 1){
          var ageCount =  response.data.data.ageCount
        
          var arr = []
          arr =  ageCount.sort(this.compare('age'))
          this.ageCount = arr
          this.ageTotal =  response.data.data.total

         }
      })
    },
     compare:function (k) {
          return function (a, b) {
              var M = a[k];
              var N = b[k];
              return M - N;      // 从低向高排
              // return N - M;   // 从高向低排
          }
      },
    //统计透析年龄
    getTotalDialysisCount(timeStar,timeEnd,lapsetoType,sourceType){
      getTotalDialysisCount(timeStar,timeEnd,lapsetoType,sourceType).then(response=>{
         if(response.data.state == 1){
           var dataage =  response.data.data.dataage
          
           this.dialysisAge = dataage

         }
      })
    },
    getTreatModeList(timeStar,timeEnd){
         const params = {
           start_time:timeStar,
           end_time:timeEnd
         }
      getTreatModeList(params).then(response=>{
         if(response.data.state == 1){
           var list =  response.data.data.list
           this.mode_id = list[0].mode_id
           for(let i=0;i<list.length;i++){
             if(list[i].mode_id == 1){
               list[i].name = "HD"
               list[i].state = 1
             }
             if(list[i].mode_id == 2){
               list[i].name = "HDF"
               list[i].state = 2
             }
             if(list[i].mode_id == 3){
               list[i].name = "HD+HP"
               list[i].state = 3
             }
             if(list[i].mode_id == 4){
               list[i].name = "HP"
               list[i].state = 4
             }
             if(list[i].mode_id == 5){
               list[i].name = "HF"
               list[i].state = 5
             }
             if(list[i].mode_id == 6){
               list[i].name = "SCUF"
               list[i].state = 6
             }
             if(list[i].mode_id == 7){
               list[i].name = "IUF"
               list[i].state = 7
             }
             if(list[i].mode_id == 8){
               list[i].name="HFHD"
               list[i].state = 8
             }
             if(list[i].mode_id == 9){
               list[i].name ="HFHD+HP"
               list[i].state = 9
             }
             if(list[i].mode_id == 10){
               list[i].name = "PHF"
               list[i].state = 10
             }
             if(list[i].mode_id == 11){
               list[i].name = "HFR"
               list[i].state = 11
             }
             if(list[i].mode_id == 12){
               list[i].name = "HDF+HP"
               list[i].state = 12
             }
             if(list[i].mode_id == 13){
               list[i].name = "CRRT"
               list[i].state = 13
             }
             if(list[i].mode_id == 14){
               list[i].name = "腹水回输"
               list[i].state = 14
             }
             if(list[i].mode_id == 15){
               list[i].name = "HD前置换"
               list[i].state = 15
             }
             if(list[i].mode_id == 16){
               list[i].name = "HD后置换"
               list[i].state = 16
             }
             if(list[i].mode_id == 17){
               list[i].name = "HDF前置换"
               list[i].state = 17
             }
             if(list[i].mode_id == 18){
               list[i].name = "HDF后置换"
               list[i].state = 18
             }
             if(list[i].mode_id == 19) {
               list[i].name = "IUF+HD"
               list[i].state = 19
             }
           }
           this.treatmentMode = list
         }
      })
    },
    selectWay(index){
      this.way = index
      if(index == 0){
        this.treatShow = false
      }
      if(index == 1){
        this.treatShow = true
        this.getCountModeId()
      }

    },
    getArrLength(result){
      if(result.length > 10){
        var dataZoom_end = (10/result.length)*100;
        this.bar.dataZoom[0].end = dataZoom_end
      }else{
        var dataZoom_end = 100;
        this.bar.dataZoom[0].end = dataZoom_end
      }
    },
    getArrLength1(result){
      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
      }
    },
    getCountModeId(){
        const params = {
          start_time:this.start,
          end_time:this.end,
          mode_id:this.mode_id,
          
        }
        this.modesData.series = []
        this.modesData.xAxis = []
      getCountModeId(params).then(response=>{
         if(response.data.state == 1){
           var modeCount = response.data.data.modeCount
           for(let i=0;i<modeCount.length;i++){

             this.modesData.xAxis.push(moment(new Date(modeCount[i].dialysis_date*1000)).format('YYYY-MM-DD'))
             this.modesData.series.push(modeCount[i].Count)

             this.chart.series[0].data = this.modesData.series
             this.chart.xAxis.data = this.modesData.xAxis
             this.getArrLength1(this.chart.xAxis.data)
           }
         }
      })
    },
    getRolloutCount(){
       this.modesDataTwo.series = []
       this.modesDataTwo.xAxis = []
        const params = {
          start_time:this.start,
          end_time:this.end,
          lapsetotype:this.lapsetoType,
          sourcetype:this.sourceType,
        }
      getRolloutCount(params).then(response=>{
         if(response.data.state == 1){
           var rollout =  response.data.data.rollout
          var arr = []
          var arrOne = []
           for(let i=0;i<rollout.length;i++){
              if(rollout[i].lapseto_type == 1){
                arr.push(rollout[i])
              }
              if(rollout[i].lapseto_type == 2){
                 arrOne.push(rollout[i])
              }
            }
          if(this.lapseid == 0){
            this.modesDataTwo.xAxis = []
            this.modesDataTwo.series = []
             for(let i=0;i<arr.length;i++){
              this.modesDataTwo.xAxis.push(moment(new Date(arr[i]. lapseto_time*1000)).format('YYYY-MM-DD'))
              this.modesDataTwo.series.push(arr[i].Count)
             }
            this.bar.series[0].data = this.modesDataTwo.series
            this.bar.xAxis.data = this.modesDataTwo.xAxis
            this.getArrLength(this.bar.xAxis.data)
           }
           if(this.lapseid == 1){
             this.modesDataTwo.xAxis = []
             this.modesDataTwo.series = []
             for(let i=0;i<arrOne.length;i++){
              this.modesDataTwo.xAxis.push(moment(new Date(arrOne[i].lapseto_time*1000)).format('YYYY-MM-DD'))
              this.modesDataTwo.series.push(arrOne[i].Count)
             }
            this.bar.series[0].data = this.modesDataTwo.series
            this.bar.xAxis.data = this.modesDataTwo.xAxis
            this.getArrLength(this.bar.xAxis.data)
           }

         }
      })
    },
    selectSource(source) {
      this.sourceType = source
      this.getDialysisModeType(this.startDate,this.endDate,this.lapsetoType,this.sourceType)
      this.getTotalLapseCount(this.startDate,this.endDate,this.lapsetoType,this.sourceType)
      this.getTotalSexCount(this.startDate,this.endDate,this.lapsetoType,this.sourceType)
      this.getTotalInfectiousCount(this.startDate,this.endDate,this.lapsetoType,this.sourceType)
      this.getTotalAgeCount(this.startDate,this.endDate,this.lapsetoType,this.sourceType)
      this.getTotalDialysisCount(this.startDate,this.endDate,this.lapsetoType,this.sourceType)
      this.getRolloutCount(this.lapsetoType,this.sourceType)
    },
    selectLapseOne(lapseto) {
      console.log("lapseto22222",lapseto)
      this.lapsetoType = lapseto
      this.getDialysisModeType(this.startDate,this.endDate,this.lapsetoType,this.sourceType)
      this.getTotalLapseCount(this.startDate,this.endDate,this.lapsetoType,this.sourceType)
      this.getTotalSexCount(this.startDate,this.endDate,this.lapsetoType,this.sourceType)
      this.getTotalInfectiousCount(this.startDate,this.endDate,this.lapsetoType,this.sourceType)
      this.getTotalAgeCount(this.startDate,this.endDate,this.lapsetoType,this.sourceType)
      this.getTotalDialysisCount(this.startDate,this.endDate,this.lapsetoType,this.sourceType)
      this.getRolloutCount(this.lapsetoType,this.sourceType)
    },
  },
  created() {
        //获取本月当前机构的透析模式
      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);
      var timeStar=Date.parse(monthStartDate)/1000;//s
      //本月的结束时间
      var monthEndDate = new Date(nowYear, nowMonth+1, 0);
      var timeEnd=Date.parse(monthEndDate)/1000-1;//s

      this.startDate = startDate
      this.endDate = endDate
      //统计透析总量
      this.getDialysisModeType(startDate,endDate,this.lapsetoType,this.sourceType)
      //统计转归状态
      this.getTotalLapseCount(startDate,endDate,this.lapsetoType,this.sourceType)
      //统计男女比例
      this.getTotalSexCount(timeStar,timeEnd,this.lapsetoType,this.sourceType)
      //统计传染病
      this.getTotalInfectiousCount(startDate,endDate,this.lapsetoType,this.sourceType)
      //统计年龄
      this.getTotalAgeCount(timeStar,timeEnd,this.lapsetoType,this.sourceType)
      //统计透析年龄
      this.getTotalDialysisCount(timeStar,timeEnd,this.lapsetoType,this.sourceType)

      //获取当前选中时间所有的透析模式
      this.getTreatModeList(timeStar,timeEnd)
      this.start = timeStar
      this.end = timeEnd

     this.getRolloutCount(timeStar,timeEnd,this.lapsetoType,this.sourceType)


  },
};
</script>

 <style rel="stylesheet/scss" lang="scss" scoped>
.infoBox {
  display: flex;
  flex-wrap: wrap;
  .infoOne {
    margin-right: 30px;
    margin-top: 20px;
    .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 {
    .el-progress-bar__outer{
      height:10px !important;
    }
    .borderBox {
      .el-progress-bar__inner {
        background: linear-gradient(
          90deg,
          rgba(169, 224, 243, 1),
          rgba(159, 189, 252, 1)
        );
      }
      .el-progress-bar{
        margin-right: -59px;
        padding-right: 60px;
      }
    }
    .borderBox1 {
      .el-progress-bar__inner {
        background: linear-gradient(
          90deg,
          rgba(255, 215, 192, 1),
          rgba(255, 153, 148, 1)
        );
      }
      .el-progress-bar{
        margin-right: -59px;
        padding-right: 60px;
      }
    }
    .borderBox2 {
      .el-progress-bar__inner {
        background: linear-gradient(
          90deg,
          rgba(215, 195, 253, 1),
          rgba(179, 168, 247, 1)
        );
      }
      .el-progress-bar{
        margin-right: -59px;
        padding-right: 60px;
      }
    }
  }
}
</style>