<template>
    <div class="page_project">
        <div class="optionsBox">
            <div class="optionsOne" @click="typeShow = true">
                <div style="display: flex;align-items: center;">
                    {{ type }}
                    <van-icon name="arrow-down" />
                </div>
            </div>
            <div class="optionsOne" @click="projectShow = true">
              <div style="display: flex;align-items: center;">
                  {{ project }}
                <van-icon name="arrow-down" />
              </div>
            </div>
        </div>

        <div class="chart2">统计图</div>
        <bar-chart :options="options"></bar-chart>
        <div class="rangeBox">
            <p class="range"></p>
            <span>指标正常范围值</span>
        </div>
        <div class="rangeMain">
           <p v-for="(item,index) in this.normData" :key="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>
           </p>
        </div>

        <div>
            <van-popup v-model="stateShow" position="bottom" :style="{ height: '40%' }">
                <van-picker
                show-toolbar
                :columns="columns"
                @confirm="chooseState"
                @cancel="stateShow = false"
                />
            </van-popup>
            <van-popup v-model="typeShow" position="bottom" :style="{ height: '40%' }">
                <van-picker
                show-toolbar
                :columns="columns1"
                @confirm="chooseType"
                @cancel="typeShow = false"
                />
            </van-popup>
            <van-popup v-model="projectShow" position="bottom" :style="{ height: '40%' }">
              <van-picker
                show-toolbar
                :columns="columns2"
                @confirm="chooseProject"
                @cancel="projectShow = false"
              />
             </van-popup>
        </div>
    </div>
</template>

<script>
import echarts from 'echarts'
import BarChart from '../../dqc/components/BarChart'
import { getMobileNormData, getMobileProjectList, getMobileBloodList, getBloodMonthList, getMobileMonthProjectList } from '@/api/common/common'
const moment = require('moment')
export default {
  components: {
    BarChart
  },
  data () {
    return {
      project: '',
      projectShow: false,
      state: '留治',
      type: '按季度统计对比',
      stateShow: false,
      typeShow: false,
      columns: ['留治', '转归'],
      columns1: ['按季度统计对比', '按月份统计对比'],
      options: {
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        // legend: {
        //   data: ['达标率%'],
        //   left: 0
        // },
        xAxis: {
          data: [],
          axisLabel: {
            interval: 0,
            formatter: function (value) {
              var ret = '' // 拼接加\n返回的类目项
              var maxLength = 4 // 每项显示文字个数
              var valLength = value.length // X轴类目项的文字个数
              var rowN = Math.ceil(valLength / maxLength) // 类目项需要换行的行数
              if (rowN > 1) {
                // 如果类目项的文字大于3,
                for (var i = 0; i < rowN; i++) {
                  var temp = '' // 每次截取的字符串
                  var start = i * maxLength // 开始截取的位置
                  var end = start + maxLength // 结束截取的位置
                  // 这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                  temp = value.substring(start, end) + '\n'
                  ret += temp // 凭借最终的字符串
                }
                return ret
              } else {
                return value
              }
            }
          }
        },
        yAxis: {
          axisLabel: {
            formatter: '{value} %'
          },
          show: false
        },
        series: [
          {
            name: '达标率%',
            type: 'bar',
            data: [],
            barWidth: 20,
            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: 90, // 设置X轴刻度之间的间隔(根据数据量来调整)
            zoomLock: true // 锁定区域禁止缩放(鼠标滚动会缩放,所以禁止)
          },
          {
            type: 'inside',
            xAxisIndex: [0],
            start: 1,
            end: 20,
            zoomLock: true // 锁定区域禁止缩放
          }
        ]
      },
      Num: 1,
      month: 0,
      monthArr: [
        '一月',
        '二月',
        '三月',
        '四月',
        '五月',
        '六月',
        '七月',
        '八月',
        '九月',
        '十月',
        '十一月',
        '十二月'
      ],
      normData: [],
      modesData: {
        xAxis: [],
        series: []
      },
      columns2: [],
      bloodType: -1,
      sysmin: 0,
      syslarge: 0,
      diamin: 0,
      dialarge: 0
    }
  },
  methods: {
    chooseState (val) {
      this.state = val
      this.projectShow = false
    },
    chooseType (val) {
      this.type = val
      this.typeShow = false
      if (this.project == '收缩压' || this.project == '舒张压') {
        if (val == '按月份统计对比') {
          this.getBloodMonthList()
          this.options.dataZoom = [
            {
            // Y轴固定,让内容滚动
              type: 'slider',
              show: false,
              xAxisIndex: [0],
              start: 1,
              end: 50, // 设置X轴刻度之间的间隔(根据数据量来调整)
              zoomLock: true // 锁定区域禁止缩放(鼠标滚动会缩放,所以禁止)
            },
            {
              type: 'inside',
              xAxisIndex: [0],
              start: 1,
              end: 40,
              zoomLock: true // 锁定区域禁止缩放
            }
          ]
        }
        if (val == '按季度统计对比') {
          this.getMobileBloodList()
        }
      } else {
        if (val == '按月份统计对比') {
          this.getMonthList()
          this.options.dataZoom = [
            {
            // Y轴固定,让内容滚动
              type: 'slider',
              show: false,
              xAxisIndex: [0],
              start: 1,
              end: 50, // 设置X轴刻度之间的间隔(根据数据量来调整)
              zoomLock: true // 锁定区域禁止缩放(鼠标滚动会缩放,所以禁止)
            },
            {
              type: 'inside',
              xAxisIndex: [0],
              start: 1,
              end: 40,
              zoomLock: true // 锁定区域禁止缩放
            }
          ]
        }
        if (val == '按季度统计对比') {
          this.getlist()
        }
      }
    },
    onClick (id) {
      if (id == 1) {
        this.Num = 1
        if (this.project == '收缩压' || this.project == '舒张压') {
          this.getMobileBloodList()
        } else {
          this.getlist()
        }
      } else if (id == 2) {
        this.Num = 2
        if (this.project == '收缩压' || this.project == '舒张压') {
          this.getMobileBloodList()
        } else {
          this.getlist()
        }
      } else if (id == 3) {
        this.Num = 3
        if (this.project == '收缩压' || this.project == '舒张压') {
          this.getMobileBloodList()
        } else {
          this.getlist()
        }
      } else if (id == 4) {
        this.Num = 4
        if (this.project == '收缩压' || this.project == '舒张压') {
          this.getMobileBloodList()
        } else {
          this.getlist()
        }
      }
    },
    clickMonth (index) {
      this.month = index
    },
    chooseProject (val) {
      this.project = val
      this.projectShow = false

      if (val == '收缩压' || val == '舒张压') {
        if (this.type == '按月份统计对比') {
          this.getBloodMonthList()
        }
        if (this.type == '按季度统计对比') {
          this.getMobileBloodList()
        }
      } else {
        var rangetype = 0
        for (let i = 0; i < this.normData.length; i++) {
          if (val == this.normData[i].item_name) {
            rangetype = this.normData[i].range_type
          }
        }
        this.range_type = rangetype
        if (this.type == '按月份统计对比') {
          this.getMonthList()
        }
        if (this.type == '按季度统计对比') {
          this.getlist()
        }
      }
    },

    getMobileNormData () {
      getMobileNormData().then(response => {
        if (response.data.state == 1) {
          var newArr = []
          var normdata = response.data.data.normdata
          newArr = normdata
          var bloodPressure = response.data.data.bloodPressure
          for (let i = 0; i < bloodPressure.length; i++) {
            if (bloodPressure[i].is_status == 0 && bloodPressure[i].inspection_major == 0 && bloodPressure[i].inspection_minor == -1) {
              bloodPressure[i].item_name = '收缩压'
              this.sysmin = bloodPressure[i].min_range
              this.syslarge = bloodPressure[i].large_range
            }
            if (bloodPressure[i].is_status == 0 && bloodPressure[i].inspection_major == 0 && bloodPressure[i].inspection_minor == -2) {
              bloodPressure[i].item_name = '舒张压'
              this.diamin = bloodPressure[i].min_range
              this.dialarge = bloodPressure[i].large_range
            }
          }
          bloodPressure.map(item => {
            newArr.push(item)
          })
          var newarr = newArr.sort((a, b) => { return a.sort - b.sort })
          this.normData = newarr
          var arr = []
          for (let i = 0; i < newarr.length; i++) {
            this.project = newarr[0].item_name
            arr.push(newarr[i].item_name)
          }
          this.columns2 = arr
          if (this.project == '收缩压' || this.project == '舒张压') {
            this.getMobileBloodList()
          } else {
            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')

      if (this.type == '按季度统计对比') {
        this.modeltype = 1
      }

      if (this.type == '按月份统计对比') {
        this.modeltype = 2
      }
      for (let i = 0; i < this.normData.length; i++) {
        if (this.normData[i].item_name == this.project) {
          this.Num = this.normData[i].inspection_minor
        }
      }
      const params = {
        itemtype: this.modeltype,
        modeltype: this.Num,
        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
      }
      getMobileProjectList(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.options.series[0].data = this.modesData.series
          this.options.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
      }
    },
    getMobileBloodList () {
      this.modesData.series = []
      this.modesData.xAxis = []
      if (this.project == '收缩压') {
        this.bloodType = -1
      }
      if (this.project == '舒张压') {
        this.bloodType = -2
      }
      // 第一季度
      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 = {
        bloodType: this.bloodType,
        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
      }
      getMobileBloodList(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 firstArr = []
            for (let i = 0; i < firstlist.length; i++) {
              if (this.sysmin <= firstlist[i].systolic_blood_pressure && this.syslarge >= firstlist[i].systolic_blood_pressure) {
                firstArr.push(firstlist[i])
              }
            }
            firstStandTotal = firstArr.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 (this.sysmin <= secondelist[i].systolic_blood_pressure && this.syslarge >= secondelist[i].systolic_blood_pressure) {
                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 (this.sysmin <= threelist[i].systolic_blood_pressure && this.syslarge >= threelist[i].systolic_blood_pressure) {
                threeArr.push(threelist[i])
              }
            }
            threeStandtotal = threeArr.length
            var fourtotal = response.data.data.fourTotal
            if (fourtotal == 0) {
              fourtotal = 1
            }
            var fourStandTotal = 0
            var fourArr = []
            var fourlist = response.data.data.fourlist
            for (let i = 0; i < fourlist.length; i++) {
              if (this.sysmin <= fourlist[i].systolic_blood_pressure && this.syslarge >= fourlist[i].systolic_blood_pressure) {
                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
            }

            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.options.series[0].data = this.modesData.series
            this.options.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 firstArr = []
            for (let i = 0; i < firstlist.length; i++) {
              if (this.diamin <= firstlist[i].diastolic_blood_pressure && this.dialarge >= firstlist[i].diastolic_blood_pressure) {
                firstArr.push(firstlist[i])
              }
            }

            firstStandTotal = firstArr.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 (this.diamin <= secondelist[i].diastolic_blood_pressure && this.dialarge >= secondelist[i].diastolic_blood_pressure) {
                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 (this.diamin <= threelist[i].diastolic_blood_pressure && this.dialarge >= threelist[i].diastolic_blood_pressure) {
                threeArr.push(threelist[i])
              }
            }

            threeStandtotal = threeArr.length
            var fourtotal = response.data.data.fourTotal
            if (fourtotal == 0) {
              fourtotal = 1
            }
            var fourStandTotal = 0
            var fourArr = []
            var fourlist = response.data.data.fourlist
            for (let i = 0; i < fourlist.length; i++) {
              if (this.diamin <= fourlist[i].diastolic_blood_pressure && this.dialarge >= fourlist[i].diastolic_blood_pressure) {
                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
            }

            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.options.series[0].data = this.modesData.series
            this.options.xAxis.data = this.modesData.xAxis
          }
        }
      })
    },
    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')

      if (this.state == '全部') {
        this.lapseto = 0
      }

      if (this.state == '留治') {
        this.lapseto = 1
      }

      if (this.state == '转归') {
        this.lapseto = 2
      }

      if (this.type == '按季度统计对比') {
        this.modeltype = 1
      }

      if (this.type == '按月份统计对比') {
        this.modeltype = 2
      }

      for (let i = 0; i < this.normData.length; i++) {
        if (this.normData[i].item_name == this.project) {
          this.Num = this.normData[i].inspection_minor
        }
      }

      const params = {
        lapseto: this.lapseto,
        itemtype: this.modeltype,
        modeltype: this.Num,
        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
      }
      getMobileMonthProjectList(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.options.series[0].data = this.modesData.series
          this.options.xAxis.data = this.modesData.xAxis
        }
      })
    },
    getBloodMonthList () {
      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')

      if (this.project == '收缩压') {
        this.bloodType = -1
      }
      if (this.project == '舒张压') {
        this.bloodType = -2
      }
      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
      }
      getBloodMonthList(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 (this.sysmin <= januarylist[i].systolic_blood_pressure && this.syslarge >= januarylist[i].systolic_blood_pressure) {
                januaryArr.push(januarylist[i])
              }
            }
            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 (this.sysmin <= feblist[i].systolic_blood_pressure && this.syslarge >= feblist[i].systolic_blood_pressure) {
                febArr.push(feblist[i])
              }
            }
            febstandtotal = febArr.length

            var marchtotal = response.data.data.marchTotal
            if (marchtotal == 0) {
              marchtotal = 1
            }
            var marchstandtotal = 0
            var marlist = response.data.data.marlist
            var marArr = []
            for (let i = 0; i < marlist.length; i++) {
              if (this.sysmin <= marlist[i].systolic_blood_pressure && this.syslarge >= marlist[i].systolic_blood_pressure) {
                marArr.push(marlist[i])
              }
            }
            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 (this.sysmin <= aprlist[i].systolic_blood_pressure && this.syslarge >= aprlist[i].systolic_blood_pressure) {
                aprArr.push(aprlist[i])
              }
            }
            aprstandtotal = aprArr.length
            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 (this.sysmin <= maylist[i].systolic_blood_pressure && this.syslarge >= maylist[i].systolic_blood_pressure) {
                mayArr.push(maylist[i])
              }
            }
            maystandtotal = mayArr.length
            var juntotal = response.data.data.junTotal
            if (juntotal == 0) {
              juntotal = 1
            }
            var junstandtotal = 0
            var junArr = []
            var junlist = response.data.data.junlist
            for (let i = 0; i < junlist.length; i++) {
              if (this.sysmin <= junlist[i].systolic_blood_pressure && this.syslarge >= junlist[i].systolic_blood_pressure) {
                junArr.push(junlist[i])
              }
            }
            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 (this.sysmin <= jullist[i].systolic_blood_pressure && this.syslarge >= jullist[i].systolic_blood_pressure) {
                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 (this.sysmin <= auglist[i].systolic_blood_pressure && this.syslarge >= auglist[i].systolic_blood_pressure) {
                augArr.push(auglist[i])
              }
            }
            augArr = augstandtotal.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 (this.sysmin <= seplist[i].systolic_blood_pressure && this.syslarge >= seplist[i].systolic_blood_pressure) {
                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 (this.sysmin <= octlist[i].systolic_blood_pressure && this.syslarge >= octlist[i].systolic_blood_pressure) {
                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 (this.sysmin <= novlist[i].systolic_blood_pressure && this.syslarge >= novlist[i].systolic_blood_pressure) {
                novArr.push(novlist[i])
              }
            }
            novstandtotal = novArr.length
            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 (this.sysmin <= declist[i].systolic_blood_pressure && this.syslarge >= declist[i].systolic_blood_pressure) {
                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
            }

            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.options.series[0].data = this.modesData.series
            this.options.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 (this.diamin <= januarylist[i].diastolic_blood_pressure && this.dialarge >= januarylist[i].diastolic_blood_pressure) {
                januaryArr.push(januarylist[i])
              }
            }
            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 (this.diamin <= feblist[i].diastolic_blood_pressure && this.dialarge >= feblist[i].diastolic_blood_pressure) {
                febArr.push(feblist[i])
              }
            }
            febstandtotal = febArr.length

            var marchtotal = response.data.data.marchTotal
            if (marchtotal == 0) {
              marchtotal = 1
            }
            var marchstandtotal = 0
            var marlist = response.data.data.marlist
            var marArr = []
            for (let i = 0; i < marlist.length; i++) {
              if (this.diamin <= marlist[i].diastolic_blood_pressure && this.dialarge >= marlist[i].diastolic_blood_pressure) {
                marArr.push(marlist[i])
              }
            }
            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 (this.diamin <= aprlist[i].diastolic_blood_pressure && this.dialarge >= aprlist[i].diastolic_blood_pressure) {
                aprArr.push(aprlist[i])
              }
            }
            aprstandtotal = aprArr.length
            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 (this.diamin <= maylist[i].diastolic_blood_pressure && this.dialarge >= maylist[i].diastolic_blood_pressure) {
                mayArr.push(maylist[i])
              }
            }
            maystandtotal = mayArr.length
            var juntotal = response.data.data.junTotal
            if (juntotal == 0) {
              juntotal = 1
            }
            var junstandtotal = 0
            var junArr = []
            var junlist = response.data.data.junlist
            for (let i = 0; i < junlist.length; i++) {
              if (this.diamin <= junlist[i].diastolic_blood_pressure && this.dialarge >= junlist[i].diastolic_blood_pressure) {
                junArr.push(junlist[i])
              }
            }
            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 (this.diamin <= jullist[i].diastolic_blood_pressure && this.dialarge >= jullist[i].diastolic_blood_pressure) {
                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 (this.diamin <= auglist[i].diastolic_blood_pressure && this.dialarge >= auglist[i].diastolic_blood_pressure) {
                augArr.push(auglist[i])
              }
            }
            augArr = augstandtotal.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 (this.diamin <= seplist[i].diastolic_blood_pressure && this.dialarge >= seplist[i].diastolic_blood_pressure) {
                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 (this.diamin <= octlist[i].diastolic_blood_pressure && this.dialarge >= octlist[i].diastolic_blood_pressure) {
                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 (this.diamin <= novlist[i].diastolic_blood_pressure && this.dialarge >= novlist[i].diastolic_blood_pressure) {
                novArr.push(novlist[i])
              }
            }
            novstandtotal = novArr.length
            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 (this.diamin <= declist[i].diastolic_blood_pressure && this.dialarge >= declist[i].diastolic_blood_pressure) {
                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
            }
            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.options.series[0].data = this.modesData.series
            this.options.xAxis.data = this.modesData.xAxis
          }
        }
      })
    },
    getArrLength (result) {
      if (result.length > 6) {
        var dataZoom_end = (6 / result.length) * 100
        this.options.dataZoom[0].end = dataZoom_end
      } else {
        var dataZoom_end = 100
        this.options.dataZoom[0].end = dataZoom_end
      }
    }

  },
  created () {
    this.getMobileNormData()
  }
}
</script>


<style lang="scss" scoped>
.page_project{
    .optionsBox {
    display: flex;
    height: 3.125rem;
    align-items: center;
    .optionsOne {
      //   max-width: 8.75rem;
      //   min-width: 6.25rem;
      padding: 0 0.75rem;
      height: 1.875rem;
      background: rgba(246, 246, 246, 1);
      border-radius: 5px;
      text-align: center;
      font-size: 0.8125rem;
      color: #8d8d8d;
      display: flex;
      align-items: center;
      justify-content: space-around;
      margin-left: 0.8125rem;
    }
  }
  .quarterBox {
    display: flex;
    justify-content: space-around;
    p {
      width: 4.6875rem;
      height: 1.875rem;
      line-height: 1.875rem;
      background: rgba(246, 246, 246, 1);
      opacity: 0.8;
      border-radius: 0.3125rem;
      color: #8d8d8d;
      cursor: pointer;
      text-align: center;
      font-size: 0.8125rem;
    }
    .active {
      background: rgba(51, 138, 251, 1);
      color: #fff;
      border: 1px solid #338afb;
    }
  }
  .month {
    overflow-x: auto;
  }
  .monthBox {
    width: 50rem;
    overflow-x: auto;
    display: flex;
    flex-wrap: nowrap;
    p {
      //   width: 2.5rem;
      padding: 0 0.875rem;
      height: 1.875rem;
      line-height: 1.875rem;
      background: rgba(246, 246, 246, 1);
      opacity: 0.8;
      border-radius: 0.3125rem;
      color: #8d8d8d;
      cursor: pointer;
      text-align: center;
      font-size: 0.8125rem;
      margin-left: 0.625rem;
    }
    .active {
      background: rgba(51, 138, 251, 1);
      color: #fff;
      border: 1px solid #338afb;
    }
  }
  .toolBox {
    display: flex;
    height: 2.5rem;
    align-items: center;
    .toolOne {
      width: 6.25rem;
      height: 1.875rem;
      background: rgba(246, 246, 246, 1);
      border-radius: 5px;
      text-align: center;
      font-size: 0.8125rem;
      color: #8d8d8d;
      display: flex;
      align-items: center;
      justify-content: space-around;
      margin-left: 0.8125rem;
    }
  }
  .chart2 {
    font-size: 1rem;
    font-weight: bold;
    color: #000;
    margin: 0 0 0 0.8125rem;
  }
  .chart {
    font-size: 1rem;
    font-weight: bold;
    margin-left: 0.8125rem;
    color: #000;
  }
  .rangeBox {
    margin-left: 0.8125rem;
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
    .range {
      width: 0.8125rem;
      height: 0.8125rem;
      background: linear-gradient(
        0deg,
        rgba(169, 224, 243, 1),
        rgba(159, 189, 252, 1)
      );
      border-radius: 0.25rem;
      margin-right: 0.5rem;
    }
    span {
      color: #5d5a5f;
      font-size: 0.75rem;
    }
  }
  .rangeMain {
    display: flex;
    flex-wrap: wrap;
    padding-left: 2.125rem;
    margin-top: 0.5rem;
    p {
      margin-right: 1.625rem;
      font-size: 0.75rem;
      color: #a09ba3;
      margin-bottom: 0.5rem;
    }
  }
}
::-webkit-scrollbar {
  height: 0 !important;
  width: 0;
}
</style>
