<template>
  <div class="main-contain">
    <div class="position">
      <bread-crumb :crumbs="crumbs"></bread-crumb>
    </div>
    <div class="app-container">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="按时间分组" name="first"></el-tab-pane>
        <el-tab-pane label="按项目分组" name="second"></el-tab-pane>
      </el-tabs>
      <div class="cell clearfix">
        <!-- <el-select v-model="lapseto" placeholder="请选择" style="width:120px;margin-right:10px" @change="changeOptions">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select> -->
        <el-select v-model="type" placeholder="请选择" @change="chooseType" style="margin-right:10px">
          <el-option
            v-for="item in options1"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <el-select v-model="mode_type" placeholder="请选择" style="width:120px;margin-right:0px" @change="handleModeType">
          <el-option
            v-for="item in normdata"
            :key="item.inspection_minor"
            :label="item.item_name"
            :value="item.inspection_minor"
          ></el-option>
        </el-select>
      </div>

      <div class="cell clearfix">
        <p class="chartTitle">统计图</p>
      </div>
      <div class="cell clearfix">
        <p class="point"></p>
        <p class="pointTitle">达标率</p>
      </div>
      <div>
        <line-chart :options="chart"></line-chart>
      </div>
      <div class="cell clearfix">
        <p class="point"></p>
        <p class="pointTitle">指标正常范围值</p>
      </div>
      <div class="cell clearfix newDisplay">
        <span v-for="(item,index) in normdata" :key="index" class="index">
           <span v-if="item.is_status == 1">{{item.item_name}}</span>
           <span v-if="item.is_status == 0 && item.inspection_major == 0  && item.inspection_minor == -1">收缩压</span>
            <span v-if="item.is_status == 0 && item.inspection_major == 0  && item.inspection_minor == -2">舒张压</span>
           <span v-if="item.range_type == 1 && item.is_status == 1">({{item.min_range}}-{{item.large_range}})</span>
           <span v-if="item.range_type == 2 && item.is_status == 1">({{item.range_value}})</span>
          <span v-if="item.range_type == 0 && item.is_status == 0">({{item.min_range}}-{{item.large_range}})</span>
        </span>
      </div>
    </div>
  </div>
</template>

<script>
const moment = require('moment')
import echarts from "echarts";
import { GetOICData } from "@/api/qcd";
import LineChart from "../../qcd/components/LineChart";
import { uParseTime } from "@/utils/tools";
import BreadCrumb from "@/xt_pages/components/bread-crumb";
import {getNormData,getProjectList,getMonthProjectList,getBloodPressureList,getMonthBloodList } from "@/api/common/common"
export default {
  components: {
    LineChart,
    BreadCrumb
  },
  data() {
    return {
      isMode:0,
      activeName: "second",
      normdata:[],
      modesData: {
        xAxis: [],
        series: []
      },
      crumbs: [
        { path: false, name: "科室质控" },
        { path: false, name: "科室质控达标统计" },
        { path: false, name: "按项目分组" }
      ],
      options: [
        {
          value:0,
          label:"全部",
        },
        {
          value: 1,
          label: "留治",
        },
        {
          value:2,
          label: "转归"
        },
      ],
      options1: [
        {
          value: 1,
          label: "按季度统计对比"
        },
        {
          value: 2,
          label: "按月份统计对比"
        },
      ],
      value: "请选项",
      lapseto:0,
      type:1,
      mode_type:"",
      range_type:"",
      bloodType:-1,
      chart: {
        // title: {
        //   text: "ECharts 入门示例"
        // },
        tooltip: {},
        // legend: {
        //   data: ["次数"],
        //   left: 0
        // },
        xAxis: {
          data: []
        },
        yAxis: {
          axisLabel: {
            formatter: "{value} %"
          },
          show: false
        },
        series: [
          {
            name: "达标率",
            type: "bar",
            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] }
                  ]);
                },
                barBorderRadius: [5, 5, 0, 0] //柱状角成椭圆形
              },

              //鼠标悬停时：
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.2)"
              }
            }
          }
        ]
      },
      syslarge:0,
      sysmin:0,
      dialarge:0,
      diamin:0,
    };
  },
  methods: {
    handleClick() {
      if (this.activeName == "first") {
        this.$router.push({ path: "/qcd/officesControlAnalysis/time" });
      }
    },
    chooseType(val) {
      this.type = val;
      //按季度
      if(val == 1){
        if(this.mode_type ==-1 || this.mode_type == -2){
           this.getBloodList()
           return false
        }else{
          this.getlist()
        }


      }
      //按月份
      if(val == 2){
        if(this.mode_type == -1 || this.mode_type == -2){
          this.getMonthBloodList()
          return false
        }else{
          this.getMonthList()
        }

      }

    },
    changeOptions(val){


     if(this.type == 1){
        this.lapseto = val
        this.getlist()
        return false
     }

     if(this.type == 2){
        this.lapseto = val
        this.getMonthList()
        return false
      }



    },
    getNormData(){
        getNormData().then(response=>{
            var newArr = []
            var normdata = response.data.data.normdata
             newArr  = normdata
            var bloodpressure = response.data.data.bloodPressure
            // console.log("血压",bloodpressure)
           for(let i=0;i<bloodpressure.length;i++){
              if(bloodpressure[i].inspection_major == 0 && bloodpressure[i].inspection_minor == -1 && bloodpressure[i].is_status == 0){
                 bloodpressure[i].item_name = "收缩压"
                 this.syslarge = parseInt(bloodpressure[i].large_range)
                 this.sysmin = parseInt(bloodpressure[i].min_range)

              }
               if(bloodpressure[i].inspection_major == 0 && bloodpressure[i].inspection_minor == -2 && bloodpressure[i].is_status == 0){
                 bloodpressure[i].item_name = "舒张压"
                 this.dialarge = parseInt(bloodpressure[i].large_range)
                 this.diamin = parseInt(bloodpressure[i].min_range)
              }
           }
           bloodpressure.map(item=>{
             newArr.push(item)
           })
           var newarr  =  newArr.sort((a,b)=>{ return a.sort-b.sort})
          //  console.log("newarr",newarr)
            for(let i=0;i<newarr.length;i++){
             this.mode_type = normdata[0].inspection_minor
            }
           this.normdata = newarr

           this.getBloodList()
        })
    },
    handleModeType(val){
      // console.log("modetype",this.mode_type)
      if(this.type == 2){
         this.bloodType = val
        if(this.mode_type == -1 || this.mode_type == -2){
          this.getMonthBloodList()
          return false
        }else{
            // console.log("chuff")
            this.getMonthList()
            return false
        }

      }
      if(val == -1){
        // 统计收缩压
        this.bloodType = val
        this.getBloodList()
        return false
      }
      if(val == -2){
        this.bloodType = val
        //统计舒张压
        this.getBloodList()
        return false
      }
      if(val !=-1 || val !=-2){
        this.isMode = 2
        this.mode_type = val
        this.getlist()
      }


    },

    //季度
    getlist(){
         this.modesData.series = []
         this.modesData.xAxis = []
        const firstQuarterStart =  moment().startOf('year').format('YYYY-MM-DD')
        const firstQuarterEnd = moment().month(11).endOf('month').format("YYYY-MM-DD")


        //第一季度
        const first_quarter_start =  moment().startOf('year').format('YYYY-MM-DD')
        const first_qurter_end = moment().month(2).endOf('month').format("YYYY-MM-DD")

        //第二季度
        const second_qurter_start = moment().month(3).startOf('month').format("YYYY-MM-DD")
        const second_qurter_end = moment().month(5).endOf('month').format("YYYY-MM-DD")

        //第三季度
        const three_qurter_start = moment().month(6).startOf('month').format("YYYY-MM-DD")
        const three_qurter_end = moment().month(8).endOf('month').format("YYYY-MM-DD")

        //第四季度
         const four_qurter_start = moment().month(9).startOf('month').format("YYYY-MM-DD")
         const four_qurter_end = moment().month(11).endOf('month').format("YYYY-MM-DD")
        //  console.log("this.modetype",this.mode_type)
         for(let i=0;i<this.normdata.length;i++){
            if(this.normdata[i].inspection_minor == this.mode_type){
               this.range_type = this.normdata[i].range_type
            }
         }
         const params = {
           lapseto:this.lapseto,
           itemtype:this.type,
           modetype:this.mode_type,
           startime:firstQuarterStart,
           endtime:firstQuarterEnd,
           first_quarter_start:first_quarter_start,
           first_qurter_end:first_qurter_end,
           second_qurter_start:second_qurter_start,
           second_qurter_end:second_qurter_end,
           three_qurter_start:three_qurter_start,
           three_qurter_end:three_qurter_end,
           four_qurter_start:four_qurter_start,
           four_qurter_end:four_qurter_end,
           range_type:this.range_type
         }
      getProjectList(params).then(response=>{
        if(response.data.state === 1){
          var list = response.data.data.list
          var standList =  response.data.data.standList
          var newArr = [
            {Total:"第一季度",Count:1,NoCount: 0},
            {Total:"第二季度",Count:1,NoCount: 0},
            {Total:"第三季度",Count:1,NoCount: 0},
            {Total:"第四季度",Count:1,NoCount: 0},
          ]


        //获取2个数组不同的部分
        var arrTwo = this.arrayDate(list,newArr)
        arrTwo.map(item => {
              list.push(item)
           })


         for(let i=0;i<list.length;i++){
            if(list[i].Total == "第一季度"){
               list[i].Total = 1
            }
          if(list[i].Total == "第二季度"){
               list[i].Total = 2
           }
         if(list[i].Total == "第三季度"){
               list[i].Total = 3
           }
          if(list[i].Total == "第四季度"){
               list[i].Total = 4
           }
         }
          //排序
          list.sort(this.compare('Total'))
          for(let i=0;i<list.length;i++){
            if(list[i].Total == 1){
               list[i].Total = "第一季度"
            }
            if(list[i].Total == 2){
               list[i].Total = "第二季度"
            }
            if(list[i].Total == 3){
               list[i].Total = "第三季度"
            }
            if(list[i].Total == 4){
               list[i].Total = "第四季度"
            }
          }

           var newArrThree = [
            {Total:"第一季度",Count:0},
            {Total:"第二季度",Count:0},
            {Total:"第三季度",Count:0},
            {Total:"第四季度",Count:0},
          ]

           //获取2个数组不同的部分
          var standArr = this.arrayDateTwo(standList,newArrThree)
          standArr.map(item=>{
            standList.push(item)
          })
         var arrFive = []
          for(let i=0;i<list.length;i++){
             for(let j=0;j<standList.length;j++){
                if(list[i].Total == standList[j].Total){
                    list[i].NoCount = standList[j].Count
                    arrFive.push(list[i])
                }
             }
          }



        for(const key in arrFive){
            this.modesData.xAxis.push(arrFive[key].Total);
            this.modesData.series.push(((arrFive[key].NoCount/arrFive[key].Count)*100).toFixed(1));
          }


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


        }
      })
    },
     arrayDate(array1,array2){
        var array1 = array1;
        var array2 = array2;
        var result = [];
        for(var i = 0; i < array2.length; i++){
            var obj = array2[i];
            var num = obj.Total;   //staff_id   就是要对比的key
            var isExist = false;
            for(var j = 0; j < array1.length; j++){
                var aj = array1[j];
                var n = aj.Total;
                if(n == num){
                    isExist = true;
                    break;
             }
            }
            if(!isExist){
                result.push(obj);
            }
        }
        return result;
    },
    arrayDateTwo(array1,array2){
        var array1 = array1;
        var array2 = array2;
        var result = [];
        for(var i = 0; i < array2.length; i++){
            var obj = array2[i];
            var num = obj.Total;   //staff_id   就是要对比的key
            var isExist = false;
            for(var j = 0; j < array1.length; j++){
                var aj = array1[j];
                var n = aj.Total;
                if(n == num){
                    isExist = true;
                    break;
             }
            }
            if(!isExist){
                result.push(obj);
            }
        }
        return result;
    },
     arrayDateThree(array1,array2){
        var array1 = array1;
        var array2 = array2;
        var result = [];
        for(var i = 0; i < array2.length; i++){
            var obj = array2[i];
            var num = obj.Total;   //staff_id   就是要对比的key
            var isExist = false;
            for(var j = 0; j < array1.length; j++){
                var aj = array1[j];
                var n = aj.Total;
                if(n == num){
                    isExist = true;
                    break;
             }
            }
            if(!isExist){
                result.push(obj);
            }
        }
        return result;
    },
    arrayDateFour(array1,array2){
        var array1 = array1;
        var array2 = array2;
        var result = [];
        for(var i = 0; i < array2.length; i++){
            var obj = array2[i];
            var num = obj.Total;   //staff_id   就是要对比的key
            var isExist = false;
            for(var j = 0; j < array1.length; j++){
                var aj = array1[j];
                var n = aj.Total;
                if(n == num){
                    isExist = true;
                    break;
             }
            }
            if(!isExist){
                result.push(obj);
            }
        }
        return result;
    },
     compare(property){
       return function(a,b){
          var value1 = a[property];
          var value2 = b[property];
          return value1 - value2;
        }
    },

    //按月份统计
    getMonthList(){
         this.modesData.series = []
         this.modesData.xAxis = []
         const januaryStart = moment().month(0).startOf('month').format("YYYY-MM-DD")
         const januaryEnd = moment().month(0).endOf('month').format("YYYY-MM-DD")


        const  febStart = moment().month(1).startOf('month').format("YYYY-MM-DD")
        const febEnd = moment().month(1).endOf('month').format("YYYY-MM-DD")


        const  marchStart = moment().month(2).startOf('month').format("YYYY-MM-DD")
        const marchEnd = moment().month(2).endOf('month').format("YYYY-MM-DD")


        const  aprStart = moment().month(3).startOf('month').format("YYYY-MM-DD")
        const aprEnd = moment().month(3).endOf('month').format("YYYY-MM-DD")


        const  mayStart = moment().month(4).startOf('month').format("YYYY-MM-DD")
        const mayEnd = moment().month(4).endOf('month').format("YYYY-MM-DD")


        const  junStart = moment().month(5).startOf('month').format("YYYY-MM-DD")
        const junEnd = moment().month(5).endOf('month').format("YYYY-MM-DD")


        const  julStart = moment().month(6).startOf('month').format("YYYY-MM-DD")
        const julEnd = moment().month(6).endOf('month').format("YYYY-MM-DD")


        const  augStart = moment().month(7).startOf('month').format("YYYY-MM-DD")
        const augEnd = moment().month(7).endOf('month').format("YYYY-MM-DD")


        const  sepStart = moment().month(8).startOf('month').format("YYYY-MM-DD")
        const sepEnd = moment().month(8).endOf('month').format("YYYY-MM-DD")


        const  octStart = moment().month(9).startOf('month').format("YYYY-MM-DD")
        const octEnd = moment().month(9).endOf('month').format("YYYY-MM-DD")


        const  novStart = moment().month(10).startOf('month').format("YYYY-MM-DD")
        const novEnd = moment().month(10).endOf('month').format("YYYY-MM-DD")


        const  decStart = moment().month(11).startOf('month').format("YYYY-MM-DD")
        const decEnd = moment().month(11).endOf('month').format("YYYY-MM-DD")


        const params = {
          lapseto:this.lapseto,
          itemtype:this.type,
          modetype:this.mode_type,
          januaryStart:januaryStart,
          januaryEnd:januaryEnd,
          febStart:febStart,
          febEnd:febEnd,
          marchStart:marchStart,
          marchEnd:marchEnd,
          aprStart:aprStart,
          aprEnd:aprEnd,
          mayStart:mayStart,
          mayEnd:mayEnd,
          junStart:junStart,
          junEnd:junEnd,
          julStart:julStart,
          julEnd:julEnd,
          augStart:augStart,
          augEnd:augEnd,
          sepStart:sepStart,
          sepEnd:sepEnd,
          octStart:octStart,
          octEnd:octEnd,
          novStart:novStart,
          novEnd:novEnd,
          decStart:decStart,
          decEnd:decEnd,
          range_type:this.range_type,
        }

       getMonthProjectList(params).then(response=>{
        if(response.data.state === 1){
            var monthlist = response.data.data.monthlist
            var newArr = [
              {Total:"一月",Count:1,NoCount: 0},
              {Total:"二月",Count:1,NoCount: 0},
              {Total:"三月",Count:1,NoCount: 0},
              {Total:"四月",Count:1,NoCount: 0},
              {Total:"五月",Count:1,NoCount: 0},
              {Total:"六月",Count:1,NoCount: 0},
              {Total:"七月",Count:1,NoCount: 0},
              {Total:"八月",Count:1,NoCount: 0},
              {Total:"九月",Count:1,NoCount: 0},
              {Total:"十月",Count:1,NoCount: 0},
              {Total:"十一月",Count:1,NoCount: 0},
              {Total:"十二月",Count:1,NoCount: 0},
            ]

            var newArrTwo = [
              {Total:"一月",Count:0},
              {Total:"二月",Count:0},
              {Total:"三月",Count:0},
              {Total:"四月",Count:0},
              {Total:"五月",Count:0},
              {Total:"六月",Count:0},
              {Total:"七月",Count:0},
              {Total:"八月",Count:0},
              {Total:"九月",Count:0},
              {Total:"十月",Count:0},
              {Total:"十一月",Count:0},
              {Total:"十二月",Count:0},
            ]

             //获取2个数组不同的部分
            var standArr = this.arrayDateThree(monthlist,newArr)

            standArr.map(item=>{
                monthlist.push(item)
              })


             //排序
             for(let i=0;i<monthlist.length;i++){
                if(monthlist[i].Total == "一月"){
                   monthlist[i].Total = 1
                }
                if(monthlist[i].Total == "二月"){
                   monthlist[i].Total = 2
                }
                if(monthlist[i].Total == "三月"){
                   monthlist[i].Total = 3
                }
                if(monthlist[i].Total == "四月"){
                   monthlist[i].Total = 4
                }
                if(monthlist[i].Total == "五月"){
                   monthlist[i].Total = 5
                }
                if(monthlist[i].Total == "六月"){
                   monthlist[i].Total = 6
                }
                if(monthlist[i].Total == "七月"){
                   monthlist[i].Total = 7
                }
                if(monthlist[i].Total == "八月"){
                   monthlist[i].Total = 8
                }
                if(monthlist[i].Total == "九月"){
                   monthlist[i].Total = 9
                }
                if(monthlist[i].Total == "十月"){
                   monthlist[i].Total = 10
                }
                if(monthlist[i].Total == "十一月"){
                   monthlist[i].Total = 11
                }
                 if(monthlist[i].Total == "十二月"){
                   monthlist[i].Total = 12
                }
             }

              //排序
             monthlist.sort(this.compare('Total'))
             for(let i=0;i<monthlist.length;i++){
                if(monthlist[i].Total == 1){
                  monthlist[i].Total = "一月"
                }
                if(monthlist[i].Total == 2){
                  monthlist[i].Total = "二月"
                }
                 if(monthlist[i].Total == 3){
                  monthlist[i].Total = "三月"
                }
                 if(monthlist[i].Total == 4){
                  monthlist[i].Total = "四月"
                }
                 if(monthlist[i].Total == 5){
                  monthlist[i].Total = "五月"
                }
                 if(monthlist[i].Total == 6){
                  monthlist[i].Total = "六月"
                }
                 if(monthlist[i].Total == 7){
                  monthlist[i].Total = "七月"
                }
                 if(monthlist[i].Total == 8){
                  monthlist[i].Total = "八月"
                }
                 if(monthlist[i].Total == 9){
                  monthlist[i].Total = "九月"
                }
                 if(monthlist[i].Total == 10){
                  monthlist[i].Total = "十月"
                }
                 if(monthlist[i].Total == 11){
                  monthlist[i].Total = "十一月"
                }
                 if(monthlist[i].Total == 12){
                  monthlist[i].Total = "十二月"
                }
             }

             var monthNolist = response.data.data.monthNolist


             var standArrTwo = this.arrayDateThree(monthNolist,newArrTwo)

             standArrTwo.map(item=>{
                monthNolist.push(item)
              })



             var arrOne = []
             for(let i=0;i<monthlist.length;i++){
               for(let j=0;j<monthNolist.length;j++){
                 if(monthlist[i].Total == monthNolist[j].Total){
                     monthlist[i].NoCount = monthNolist[j].Count
                     arrOne.push(monthlist[i])
                 }
               }
             }


            for(const key in arrOne){
              this.modesData.xAxis.push(arrOne[key].Total);
              this.modesData.series.push(((arrOne[key].NoCount/arrOne[key].Count)*100).toFixed(1));
            }


            this.chart.series[0].data = this.modesData.series
            this.chart.xAxis.data = this.modesData.xAxis
           }
       })
    },
    getBloodList(){
         this.modesData.series = []
         this.modesData.xAxis = []
        const firstQuarterStart =  moment().startOf('year').format('YYYY-MM-DD')
        const firstQuarterEnd = moment().month(11).endOf('month').format("YYYY-MM-DD")


        //第一季度
        const first_quarter_start =  moment().startOf('year').format('YYYY-MM-DD')
        const first_qurter_end = moment().month(2).endOf('month').format("YYYY-MM-DD")

        //第二季度
        const second_qurter_start = moment().month(3).startOf('month').format("YYYY-MM-DD")
        const second_qurter_end = moment().month(5).endOf('month').format("YYYY-MM-DD")

        //第三季度
        const three_qurter_start = moment().month(6).startOf('month').format("YYYY-MM-DD")
        const three_qurter_end = moment().month(8).endOf('month').format("YYYY-MM-DD")

        //第四季度
         const four_qurter_start = moment().month(9).startOf('month').format("YYYY-MM-DD")
         const four_qurter_end = moment().month(11).endOf('month').format("YYYY-MM-DD")
         const params = {
           first_quarter_start:first_quarter_start,
           first_qurter_end:first_qurter_end,
           second_qurter_start:second_qurter_start,
           second_qurter_end:second_qurter_end,
           three_qurter_start:three_qurter_start,
           three_qurter_end:three_qurter_end,
           four_qurter_start:four_qurter_start,
           four_qurter_end:four_qurter_end,
           bloodType:this.bloodType
         }
        //  console.log("params",params)
       getBloodPressureList(params).then(response=>{
          if(response.data.state == 1){

            if(this.bloodType == -1){
                var firstTotal =  response.data.data.firstTotal
            if(firstTotal == 0){
              firstTotal = 1
            }

            var firstStandTotal = 0
            var firstlist = response.data.data.firstList

            var fistArr = []
            for(let i=0;i<firstlist.length;i++){
               if(firstlist[i].systolic_blood_pressure>=this.sysmin && firstlist[i].systolic_blood_pressure<=this.syslarge){
                   fistArr.push(firstlist[i])
               }
            }

            firstStandTotal = fistArr.length
            var secondetotal = response.data.data.secondeTotal
            if(secondetotal == 0){
               secondetotal = 1
            }

            var secondeStandTotal =  0
            var secondelist = response.data.data.secondelist

            var  secondeArr = []
             for(let i=0;i<secondelist.length;i++){
               if(secondelist[i].systolic_blood_pressure>=this.sysmin && secondelist[i].systolic_blood_pressure<=this.syslarge){
                   secondeArr.push(secondelist[i])
               }
            }

            secondeStandTotal = secondeArr.length

            var threetotal = response.data.data.threeTotal

            if(threetotal == 0){
              threetotal = 1
            }
            var threeStandtotal =  0
            var threelist =   response.data.data.threelist
            var threeArr = []
             for(let i=0;i<threelist.length;i++){
               if(threelist[i].systolic_blood_pressure>=this.sysmin && threelist[i].systolic_blood_pressure<=this.syslarge){
                   threeArr.push(threelist[i])
               }
            }
            threeStandtotal = threeArr.length

            var fourtotal = response.data.data.fourTotal
            if(fourtotal == 0){
              fourtotal = 1
            }

            var fourStandTotal = 0
            var fourlist = response.data.data.fourlist
            var fourArr = []
             for(let i=0;i<fourlist.length;i++){
               if(fourlist[i].systolic_blood_pressure>=this.sysmin && fourlist[i].systolic_blood_pressure<=this.syslarge){
                   fourArr.push(fourlist[i])
               }
            }

            fourStandTotal = fourArr.length


           var newArr = [
              {name:"第一季度",Total:0,StandCount: 0},
              {name:"第二季度",Total:0,StandCount: 0},
              {name:"第三季度",Total:0,StandCount: 0},
              {name:"第四季度",Total:0,StandCount: 0},
           ]
           for(let i=0;i<newArr.length;i++){
              newArr[0].Total = firstTotal
              newArr[0].StandCount = firstStandTotal
              newArr[1].Total = secondetotal
              newArr[1].StandCount =secondeStandTotal
              newArr[2].Total = threetotal
              newArr[2].StandCount = threeStandtotal
              newArr[3].Total = fourtotal
              newArr[3].StandCount = fourStandTotal
           }
          //  console.log("newArr",newArr)
           for(let j=0;j<newArr.length;j++){
              this.modesData.xAxis.push(newArr[j].name);
              this.modesData.series.push(((newArr[j].StandCount/newArr[j].Total)*100).toFixed(1));
           }
            this.chart.series[0].data = this.modesData.series
            this.chart.xAxis.data = this.modesData.xAxis
            }

           if(this.bloodType == -2){
              var firstTotal =  response.data.data.firstTotal
              if(firstTotal == 0){
                firstTotal = 1
              }

              var firstStandTotal = 0
              var firstlist = response.data.data.firstList

              var fistArr = []
              for(let i=0;i<firstlist.length;i++){
                if(firstlist[i].diastolic_blood_pressure>=this.diamin && firstlist[i].diastolic_blood_pressure<=this.dialarge){
                    fistArr.push(firstlist[i])
                }
              }

              firstStandTotal = fistArr.length
              var secondetotal = response.data.data.secondeTotal
              if(secondetotal == 0){
                secondetotal = 1
              }

              var secondeStandTotal =  0
              var secondelist = response.data.data.secondelist

              var  secondeArr = []
              for(let i=0;i<secondelist.length;i++){
                if(secondelist[i].diastolic_blood_pressure>=this.diamin && secondelist[i].diastolic_blood_pressure<=this.dialarge){
                    secondeArr.push(secondelist[i])
                }
              }

              secondeStandTotal = secondeArr.length

             var threetotal = response.data.data.threeTotal

              if(threetotal == 0){
                threetotal = 1
              }
              var threeStandtotal =  0
              var threelist =   response.data.data.threelist
              var threeArr = []
              for(let i=0;i<threelist.length;i++){
                if(threelist[i].diastolic_blood_pressure>=this.diamin && threelist[i].diastolic_blood_pressure<=this.dialarge){
                    threeArr.push(threelist[i])
                }
              }
              // console.log("threeArr",threeArr)
             threeStandtotal = threeArr.length

              var fourtotal = response.data.data.fourTotal
              if(fourtotal == 0){
                fourtotal = 1
              }

              var fourStandTotal = 0
              var fourlist = response.data.data.fourlist
              var fourArr = []
              for(let i=0;i<fourlist.length;i++){
                if(fourlist[i].diastolic_blood_pressure>=this.diamin && fourlist[i].diastolic_blood_pressure<=this.dialarge){
                    fourArr.push(fourlist[i])
                }
              }

             fourStandTotal = fourArr.length


              var newArr = [
                  {name:"第一季度",Total:0,StandCount: 0},
                  {name:"第二季度",Total:0,StandCount: 0},
                  {name:"第三季度",Total:0,StandCount: 0},
                  {name:"第四季度",Total:0,StandCount: 0},
              ]
              for(let i=0;i<newArr.length;i++){
                  newArr[0].Total = firstTotal
                  newArr[0].StandCount = firstStandTotal
                  newArr[1].Total = secondetotal
                  newArr[1].StandCount =secondeStandTotal
                  newArr[2].Total = threetotal
                  newArr[2].StandCount = threeStandtotal
                  newArr[3].Total = fourtotal
                  newArr[3].StandCount = fourStandTotal
              }
              //  console.log("newArr",newArr)
              for(let j=0;j<newArr.length;j++){
                  this.modesData.xAxis.push(newArr[j].name);
                  this.modesData.series.push(((newArr[j].StandCount/newArr[j].Total)*100).toFixed(1));
              }
                this.chart.series[0].data = this.modesData.series
                this.chart.xAxis.data = this.modesData.xAxis
              }
          }
      })
    },
    getMonthBloodList(){
         this.modesData.series = []
         this.modesData.xAxis = []
         const januaryStart = moment().month(0).startOf('month').format("YYYY-MM-DD")
         const januaryEnd = moment().month(0).endOf('month').format("YYYY-MM-DD")


        const  febStart = moment().month(1).startOf('month').format("YYYY-MM-DD")
        const febEnd = moment().month(1).endOf('month').format("YYYY-MM-DD")


        const  marchStart = moment().month(2).startOf('month').format("YYYY-MM-DD")
        const marchEnd = moment().month(2).endOf('month').format("YYYY-MM-DD")


        const  aprStart = moment().month(3).startOf('month').format("YYYY-MM-DD")
        const aprEnd = moment().month(3).endOf('month').format("YYYY-MM-DD")


        const  mayStart = moment().month(4).startOf('month').format("YYYY-MM-DD")
        const mayEnd = moment().month(4).endOf('month').format("YYYY-MM-DD")


        const  junStart = moment().month(5).startOf('month').format("YYYY-MM-DD")
        const junEnd = moment().month(5).endOf('month').format("YYYY-MM-DD")


        const  julStart = moment().month(6).startOf('month').format("YYYY-MM-DD")
        const julEnd = moment().month(6).endOf('month').format("YYYY-MM-DD")


        const  augStart = moment().month(7).startOf('month').format("YYYY-MM-DD")
        const augEnd = moment().month(7).endOf('month').format("YYYY-MM-DD")


        const  sepStart = moment().month(8).startOf('month').format("YYYY-MM-DD")
        const sepEnd = moment().month(8).endOf('month').format("YYYY-MM-DD")


        const  octStart = moment().month(9).startOf('month').format("YYYY-MM-DD")
        const octEnd = moment().month(9).endOf('month').format("YYYY-MM-DD")


        const  novStart = moment().month(10).startOf('month').format("YYYY-MM-DD")
        const novEnd = moment().month(10).endOf('month').format("YYYY-MM-DD")


        const  decStart = moment().month(11).startOf('month').format("YYYY-MM-DD")
        const decEnd = moment().month(11).endOf('month').format("YYYY-MM-DD")

         const params = {
            januaryStart:januaryStart,
            januaryEnd:januaryEnd,
            febStart:febStart,
            febEnd:febEnd,
            marchStart:marchStart,
            marchEnd:marchEnd,
            aprStart:aprStart,
            aprEnd:aprEnd,
            mayStart:mayStart,
            mayEnd:mayEnd,
            junStart:junStart,
            junEnd:junEnd,
            julStart:julStart,
            julEnd:julEnd,
            augStart:augStart,
            augEnd:augEnd,
            sepStart:sepStart,
            sepEnd:sepEnd,
            octStart:octStart,
            octEnd:octEnd,
            novStart:novStart,
            novEnd:novEnd,
            decStart:decStart,
            decEnd:decEnd,
            bloodType:this.bloodType
         }
        //  console.log("params",params)
      getMonthBloodList(params).then(response=>{
        if(response.data.state == 1){
          if(this.bloodType == -1){
            var januarytotal =  response.data.data.januaryTotal
            if(januarytotal == 0){
              januarytotal = 1
            }
            var januarystandtotal = 0
            var januarylist =  response.data.data.januarylist
            var januaryArr=[]
            for(let i=0;i<januarylist.length;i++){
               if(januarylist[i].systolic_blood_pressure>=this.sysmin && januarylist[i].systolic_blood_pressure<=this.syslarge){
                   januaryArr.push(januarylist[i])
               }
            }
            console.log("一月",januarylist)
            console.log("一月",januaryArr)
            januarystandtotal = januaryArr.length
            var febtotal = response.data.data.febTotal
            if(febtotal == 0){
                febtotal = 1
            }
            var febstandtotal =  0
            var feblist = response.data.data.feblist
            var febArr=[]
            for(let i=0;i<feblist.length;i++){
               if(feblist[i].systolic_blood_pressure>=this.sysmin && feblist[i].systolic_blood_pressure<=this.syslarge){
                   febArr.push(feblist[i])
               }
            }
            console.log("二月",feblist)
            console.log("二月",febArr)
            febstandtotal = febArr.length
            var marchtotal =  response.data.data.marchTotal
            if(marchtotal == 0){
                marchtotal = 1
            }
            var marchstandtotal =  0
            var marchlist = response.data.data.marchlist
            var marArr = []
             for(let i=0;i<marchlist.length;i++){
               if(marchlist[i].systolic_blood_pressure>=this.sysmin && marchlist[i].systolic_blood_pressure<=this.syslarge){
                   marArr.push(marchlist[i])
               }
            }
            console.log("三月",marchlist)
            console.log("三月",marArr)
            marchstandtotal = marArr.length

            var aprtotal = response.data.data.aprTotal
            if(aprtotal == 0){
              aprtotal =1
            }
            var aprstandtotal =  0
            var aprlist = response.data.data.aprlist
            var aprArr = []
            for(let i=0;i<aprlist.length;i++){
               if(aprlist[i].systolic_blood_pressure>=this.sysmin && aprlist[i].systolic_blood_pressure<=this.syslarge){
                   aprArr.push(aprlist[i])
               }
            }
            console.log("四月",aprlist)
            console.log("四月",aprArr)
            var maytotal =  response.data.data.mayTotal
            if(maytotal == 0){
              maytotal = 1
            }
            var maystandtotal = 0
            var maylist = response.data.data.maylist
            var mayArr = []
            for(let i=0;i<maylist.length;i++){
               if(maylist[i].systolic_blood_pressure>=this.sysmin && maylist[i].systolic_blood_pressure<=this.syslarge){
                   mayArr.push(maylist[i])
               }
            }
            console.log("五月",maylist)
            console.log("五月",mayArr)
            maystandtotal = mayArr.length

            var juntotal = response.data.data.junTotal
            if(juntotal ==0){
              juntotal = 1
            }
            var junstandtotal = 0
            var junlist = response.data.data.junlist
            var junArr = []
            for(let i=0;i<junlist.length;i++){
               if(junlist[i].systolic_blood_pressure>=this.sysmin && junlist[i].systolic_blood_pressure<=this.syslarge){
                   junArr.push(junlist[i])
               }
            }
           console.log("六月",junlist)
            console.log("六月",junArr)
            junstandtotal = junArr.length
            var jultotal = response.data.data.julTotal
            if(jultotal == 0){
              jultotal = 1
            }
            var julstandtotal = 0
            var jullist =  response.data.data.jullist
            var julArr = []
            for(let i=0;i<jullist.length;i++){
               if(jullist[i].systolic_blood_pressure>=this.sysmin && jullist[i].systolic_blood_pressure<=this.syslarge){
                   julArr.push(jullist[i])
               }
            }

            julstandtotal = julArr.length
            var augtotal = response.data.data.augTotal
            if(augtotal ==0){
              augtotal =1
            }
            var augstandtotal = 0
            var auglist = response.data.data.auglist
            var augArr=[]
            for(let i=0;i<auglist.length;i++){
               if(auglist[i].systolic_blood_pressure>=this.sysmin && auglist[i].systolic_blood_pressure<=this.syslarge){
                   augArr.push(auglist[i])
               }
            }
            augstandtotal = augArr.length

            var septotal = response.data.data.sepTotal
            if(septotal == 0){
              septotal = 1
            }
            var sepstandtotal = 0
            var seplist = response.data.data.seplist
            var sepArr =[]
            for(let i=0;i<seplist.length;i++){
               if(seplist[i].systolic_blood_pressure>=this.sysmin && seplist[i].systolic_blood_pressure<=this.syslarge){
                   sepArr.push(seplist[i])
               }
            }
            sepstandtotal = sepArr.length
            var octtotal = response.data.data.octTotal
            if(octtotal == 0){
              octtotal = 1
            }
            var octstandtotal = 0
            var octlist = response.data.data.octlist
            var octArr = []
             for(let i=0;i<octlist.length;i++){
               if(octlist[i].systolic_blood_pressure>=this.sysmin && octlist[i].systolic_blood_pressure<=this.syslarge){
                   octArr.push(octlist[i])
               }
            }
            octstandtotal = octArr.length
            var novtotal = response.data.data.novTotal
            if(novtotal == 0){
              novtotal = 1
            }
            var novstandtotal = 0
            var novlist = response.data.data.novlist
            var novArr =[]
            for(let i=0;i<novlist.length;i++){
               if(novlist[i].systolic_blood_pressure>=this.sysmin && novlist[i].systolic_blood_pressure<=this.syslarge){
                   novArr.push(novlist[i])
               }
            }
            var dectotal =  response.data.data.decTotal
            if(dectotal == 0){
              dectotal = 1
            }
            var decstandtotal = 0
            var declist =  response.data.data.declist
            var decArr = []
            for(let i=0;i<declist.length;i++){
                if(declist[i].systolic_blood_pressure>=this.sysmin && declist[i].systolic_blood_pressure<=this.syslarge){
                    decArr.push(declist[i])
                }
              }
            decstandtotal = decArr.length
            var newArr = [
                {name:"一月",Total:0,Count:0},
                {name:"二月",Total:0,Count:0},
                {name:"三月",Total:0,Count:0},
                {name:"四月",Total:0,Count:0},
                {name:"五月",Total:0,Count:0},
                {name:"六月",Total:0,Count:0},
                {name:"七月",Total:0,Count:0},
                {name:"八月",Total:0,Count:0},
                {name:"九月",Total:0,Count:0},
                {name:"十月",Total:0,Count:0},
                {name:"十一月",Total:0,Count:0},
                {name:"十二月",Total:0,Count:0},
            ]
            for(let i=0;i<newArr.length;i++){
                newArr[0].Total = januarytotal
                newArr[0].Count = januarystandtotal
                newArr[1].Total = febtotal
                newArr[1].Count = febstandtotal
                newArr[2].Total = marchtotal
                newArr[2].Count  = marchstandtotal
                newArr[3].Total = aprtotal
                newArr[3].Count = aprstandtotal
                newArr[4].Total = maytotal
                newArr[4].Count = maystandtotal
                newArr[5].Total = juntotal
                newArr[5].Count = junstandtotal
                newArr[6].Total = jultotal
                newArr[6].Count = julstandtotal
                newArr[7].Total = augtotal
                newArr[7].Count = augstandtotal
                newArr[8].Total = septotal
                newArr[8].Count = sepstandtotal
                newArr[9].Total = octtotal
                newArr[9].Count = octstandtotal
                newArr[10].Total = novtotal
                newArr[10].Count = novstandtotal
                newArr[11].Total = dectotal
                newArr[11].Count = decstandtotal
            }
            //  console.log("newarr",newArr)
              for(let j=0;j<newArr.length;j++){
                this.modesData.xAxis.push(newArr[j].name);
                this.modesData.series.push(((newArr[j].Count/newArr[j].Total)*100).toFixed(1));
            }
              this.chart.series[0].data = this.modesData.series
              this.chart.xAxis.data = this.modesData.xAxis
          }

          if(this.bloodType == -2){

             var januarytotal =  response.data.data.januaryTotal
            if(januarytotal == 0){
              januarytotal = 1
            }
            var januarystandtotal = 0
            var januarylist =  response.data.data.januarylist
            var januaryArr=[]
            for(let i=0;i<januarylist.length;i++){
               if(januarylist[i].diastolic_blood_pressure>=this.diamin && januarylist[i].diastolic_blood_pressure<=this.dialarge){
                   januaryArr.push(januarylist[i])
               }
            }
            console.log("一月==",januarylist)
            console.log("一月==",januaryArr)
            januarystandtotal = januaryArr.length
            var febtotal = response.data.data.febTotal
            if(febtotal == 0){
                febtotal = 1
            }
            var febstandtotal =  0
            var feblist = response.data.data.feblist
            var febArr=[]
            for(let i=0;i<feblist.length;i++){
               if(feblist[i].diastolic_blood_pressure>=this.diamin && feblist[i].diastolic_blood_pressure<=this.dialarge){
                   febArr.push(feblist[i])
               }
            }
            console.log("二月",feblist)
            console.log("二月",febArr)
            febstandtotal = febArr.length
            var marchtotal =  response.data.data.marchTotal
            if(marchtotal == 0){
                marchtotal = 1
            }
            var marchstandtotal =  0
            var marchlist = response.data.data.marchlist
            var marArr = []
             for(let i=0;i<marchlist.length;i++){
               if(marchlist[i].diastolic_blood_pressure>=this.diamin && marchlist[i].diastolic_blood_pressure<=this.dialarge){
                   marArr.push(marchlist[i])
               }
            }
            console.log("三月",marchlist)
            console.log("三月",marArr)
            marchstandtotal = marArr.length

            var aprtotal = response.data.data.aprTotal
            if(aprtotal == 0){
              aprtotal =1
            }
            var aprstandtotal =  0
            var aprlist = response.data.data.aprlist
            var aprArr = []
            for(let i=0;i<aprlist.length;i++){
               if(aprlist[i].diastolic_blood_pressure>=this.diamin && aprlist[i].diastolic_blood_pressure<=this.dialarge){
                   aprArr.push(aprlist[i])
               }
            }
            console.log("四月",aprlist)
            console.log("四月",aprArr)
            var maytotal =  response.data.data.mayTotal
            if(maytotal == 0){
              maytotal = 1
            }
            var maystandtotal = 0
            var maylist = response.data.data.maylist
            var mayArr = []
            for(let i=0;i<maylist.length;i++){
               if(maylist[i].diastolic_blood_pressure>=this.diamin && maylist[i].diastolic_blood_pressure<=this.dialarge){
                   mayArr.push(maylist[i])
               }
            }
            console.log("五月",maylist)
            console.log("五月",mayArr)
            maystandtotal = mayArr.length

            var juntotal = response.data.data.junTotal
            if(juntotal ==0){
              juntotal = 1
            }
            var junstandtotal = 0
            var junlist = response.data.data.junlist
            var junArr = []
            for(let i=0;i<junlist.length;i++){
               if(junlist[i].diastolic_blood_pressure>=this.diamin && junlist[i].diastolic_blood_pressure<=this.dialarge){
                   junArr.push(junlist[i])
               }
            }
            console.log("六月",junlist)
            console.log("六月",junArr)
            junstandtotal = junArr.length
            var jultotal = response.data.data.julTotal
            if(jultotal == 0){
              jultotal = 1
            }
            var julstandtotal = 0
            var jullist =  response.data.data.jullist
            var julArr = []
            for(let i=0;i<jullist.length;i++){
               if(jullist[i].diastolic_blood_pressure>=this.diamin && jullist[i].diastolic_blood_pressure<=this.dialarge){
                   julArr.push(jullist[i])
               }
            }
            console.log("七月",jullist)
            console.log("七月",julArr)
            julstandtotal = julArr.length
            var augtotal = response.data.data.augTotal
            if(augtotal ==0){
              augtotal =1
            }
            var augstandtotal = 0
            var auglist = response.data.data.auglist
            var augArr=[]
            for(let i=0;i<auglist.length;i++){
               if(auglist[i].diastolic_blood_pressure>=this.diamin && auglist[i].diastolic_blood_pressure<=this.dialarge){
                   augArr.push(auglist[i])
               }
            }
            augstandtotal = augArr.length

            var septotal = response.data.data.sepTotal
            if(septotal == 0){
              septotal = 1
            }
            var sepstandtotal = 0
            var seplist = response.data.data.seplist
            var sepArr =[]
            for(let i=0;i<seplist.length;i++){
               if(seplist[i].diastolic_blood_pressure>=this.diamin && seplist[i].diastolic_blood_pressure<=this.dialarge){
                   sepArr.push(seplist[i])
               }
            }
            sepstandtotal = sepArr.length
            var octtotal = response.data.data.octTotal
            if(octtotal == 0){
              octtotal = 1
            }
            var octstandtotal = 0
            var octlist = response.data.data.octlist
            var octArr = []
             for(let i=0;i<octlist.length;i++){
               if(octlist[i].diastolic_blood_pressure>=this.sysmin && octlist[i].diastolic_blood_pressure<=this.syslarge){
                   octArr.push(octlist[i])
               }
            }
            octstandtotal = octArr.length
            var novtotal = response.data.data.novTotal
            if(novtotal == 0){
              novtotal = 1
            }
            var novstandtotal = 0
            var novlist = response.data.data.novlist
            var novArr =[]
            for(let i=0;i<novlist.length;i++){
               if(novlist[i].diastolic_blood_pressure>=this.diamin && novlist[i].diastolic_blood_pressure<=this.dialarge){
                   novArr.push(novlist[i])
               }
            }
            var dectotal =  response.data.data.decTotal
            if(dectotal == 0){
              dectotal = 1
            }
            var decstandtotal = 0
            var declist =  response.data.data.declist
            var decArr = []
            for(let i=0;i<declist.length;i++){
                if(declist[i].diastolic_blood_pressure>=this.diamin && declist[i].diastolic_blood_pressure<=this.dialarge){
                    decArr.push(declist[i])
                }
              }
            decstandtotal = decArr.length
            var newArr = [
                {name:"一月",Total:0,Count:0},
                {name:"二月",Total:0,Count:0},
                {name:"三月",Total:0,Count:0},
                {name:"四月",Total:0,Count:0},
                {name:"五月",Total:0,Count:0},
                {name:"六月",Total:0,Count:0},
                {name:"七月",Total:0,Count:0},
                {name:"八月",Total:0,Count:0},
                {name:"九月",Total:0,Count:0},
                {name:"十月",Total:0,Count:0},
                {name:"十一月",Total:0,Count:0},
                {name:"十二月",Total:0,Count:0},
            ]
            for(let i=0;i<newArr.length;i++){
                newArr[0].Total = januarytotal
                newArr[0].Count = januarystandtotal
                newArr[1].Total = febtotal
                newArr[1].Count = febstandtotal
                newArr[2].Total = marchtotal
                newArr[2].Count  = marchstandtotal
                newArr[3].Total = aprtotal
                newArr[3].Count = aprstandtotal
                newArr[4].Total = maytotal
                newArr[4].Count = maystandtotal
                newArr[5].Total = juntotal
                newArr[5].Count = junstandtotal
                newArr[6].Total = jultotal
                newArr[6].Count = julstandtotal
                newArr[7].Total = augtotal
                newArr[7].Count = augstandtotal
                newArr[8].Total = septotal
                newArr[8].Count = sepstandtotal
                newArr[9].Total = octtotal
                newArr[9].Count = octstandtotal
                newArr[10].Total = novtotal
                newArr[10].Count = novstandtotal
                newArr[11].Total = dectotal
                newArr[11].Count = decstandtotal
            }
            //  console.log("newarr",newArr)
              for(let j=0;j<newArr.length;j++){
                this.modesData.xAxis.push(newArr[j].name);
                this.modesData.series.push(((newArr[j].Count/newArr[j].Total)*100).toFixed(1));
            }
              this.chart.series[0].data = this.modesData.series
              this.chart.xAxis.data = this.modesData.xAxis
          }
        }
      })
    }
  },
  created(){
       //获取指标正常范围值
     this.getNormData()
  },
};
</script>

<style lang="scss" scoped>
.newLi {
  li {
    background: #f5f5f6;
  }
}
.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;
}
.index {
  color: #a09ba3;
  font-size: 13px;
  margin-right: 36px;
  margin-bottom: 20px;
}
.newDisplay {
  flex-wrap: wrap;
  padding-left: 20px;
}
</style>
