<template>
    <div class="container">
        <div class="statistics-head">
          <div class="statistics-head-item">
            <div class="img-icon">
              <img src="../../assets/images/all-home-page/icon7.png" class="imgw"/>
            </div>
            <div class="statistics-desc">
              <div class="s-title">命案数量</div>
              <div class="s-num">{{homicideCaseCount}}<span class="s-unit">件</span></div>
            </div>
          </div>
          <div class="statistics-head-item">
            <div class="img-icon">
              <img src="../../assets/images/all-home-page/icon8.png" class="imgw"/>
            </div>
            <div class="statistics-desc">
              <div class="s-title">死亡人数</div>
              <div class="s-num">{{deathCount}}<span class="s-unit">人</span></div>
            </div>
          </div>
<!--          <div class="statistics-head-item-box">-->
<!--            <div class="statistics-desc-box">-->
<!--              <div class="s-title" style="display:flex;justify-content:center;padding-bottom: 20px">社会治安相关(案件数)</div>-->
<!--              <div>-->
<!--                <span class="s-num"><span>刑事:</span>9999<span class="s-unit">人</span></span>-->
<!--                <span class="s-num"><span>治安:</span>9999<span class="s-unit">人</span></span>-->
<!--                <span class="s-num"><span>其他:</span>9999<span class="s-unit">人</span></span>-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
          <div class="statistics-head-item-ii">
            <div class="statistics-head-item-ii-left">
               <div class="i-top">{{oneKillAccount}}<span class="i-top-unit">%</span></div>
               <div class="i-center">一杀一人案件数</div>
               <div class="i-bottom">{{oneKillCount}}<span class="i-bottom-unit">件</span></div>
            </div>
            <div class="statistics-head-item-ii-center">
              <div class="i-top-ii">{{twoKillAccount}}<span class="i-top-unit-ii">%</span></div>
              <div class="i-center">一杀二人案件数</div>
              <div class="i-bottom-ii">{{twoKillCount}}<span class="i-bottom-unit-ii">件</span></div>
            </div>
            <div class="statistics-head-item-ii-center-right">
              <div class="i-top-iii">{{moreKillAccount}}<span class="i-top-unit-iii">%</span></div>
              <div class="i-center">一杀三人及以上案件数</div>
              <div class="i-bottom-iii">{{ moreKillCount }}<span class="i-bottom-unit-iii">件</span></div>
            </div>
            <div class="statistics-head-item-ii-right" v-if="user_level < 4">
              <div class="statistics-head-item-top-box">
                <div style="writing-mode: vertical-rl;font-weight: 500;">社会治安相关</div>
                <div class="statistics-head-item-top-small-box">
                  <div style="margin: 3px 0"><span class="statistics-head-item-top-title" >刑事案件数:</span><span class="statistics-head-item-top-num">{{socialSecurityCount1}}</span><span class="statistics-head-item-top-unit"> 件</span></div>
                  <div style="margin: 3px 0"><span class="statistics-head-item-top-title">治安案件数:</span><span class="statistics-head-item-top-num">{{socialSecurityCount2}}</span><span class="statistics-head-item-top-unit"> 件</span></div>
                  <div style="margin: 3px 0"><span class="statistics-head-item-top-title">其他案件数:</span><span class="statistics-head-item-top-num">{{socialSecurityCount3}} </span><span class="statistics-head-item-top-unit"> 件</span></div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="statistics-pie">
            <div class="pie1" ref="main" >
                <div class="flexc" style="padding-left: 16px">
                  <div class="dot-css"></div>
                  <div class="dot-title">犯罪嫌疑人年龄</div>
                </div>
                <div style="width: 100%;height: 100%;" id="pie1"></div>
            </div>
            <div class="pie1" ref="main" >
                <div class="flexc" style="padding-left: 16px">
                  <div class="dot-css"></div>
                  <div class="dot-title">犯罪嫌疑人文化程度</div>
                </div>
                <div style="width: 100%;height: 100%;" id="pie2"></div>
            </div>
            <div class="pie1" ref="main" >
                <div class="flexc" style="padding-left: 16px">
                  <div class="dot-css"></div>
                  <div class="dot-title">犯罪嫌疑人职业情况</div>
                </div>
                <div style="width: 100%;height: 100%;" id="pie3"></div>
            </div>
        </div>
        <div class="bar">
          <div class="bar-w1">
            <div class="flexc">
              <div class="dot-css"></div>
              <div class="dot-title">命案地区分布</div>
            </div>
            <div class="bar1" ref="main" >
              <div style="width: 100%;height: 100%;" id="bar1"></div>
            </div>
          </div>
          <div class="bar-w2">
            <div style="width: 100%;height: 233px" ref="main" >
              <div class="flexc" style="padding-left: 16px">
                <div class="dot-css"></div>
                <div class="dot-title">案发原因统计</div>
              </div>
              <div style="width: 100%;height: 100%;" id="bar2"></div>
            </div>
          </div>
        </div>
    </div>
</template>
<script>
import {
  homicideCaseStatisticsCount,
  homicideCaseStatisticsCountDeadNumber,
  homicideCaseStatisticsCountOneKillOnePerson,
  homicideCaseStatisticsCountOneKillTwoPerson,
  homicideCaseStatisticsCountOneKillMorePerson,
  homicideSuspectStatisticsForAge,
  homicideSuspectStatisticsForEduLevel,
  homicideSuspectStatisticsForCareerSituation,
  homicideSuspectStatisticsForChunk,
  homicideSuspectStatisticsForReasonIncident,
  socialSecurityStatistics
} from '@/api/home-page.js'
export default {

  name: 'murder-case-management',

  data () {
    return {
      width: '',
      cityList: [
        {
          value: '全部人员',
          label: '全部人员'
        },
        {
          value: '刑满释放人员',
          label: '刑满释放人员'
        },
        {
          value: '严重精神障碍患者',
          label: '严重精神障碍患者'
        },
        {
          value: '涉重点信访事项人员',
          label: '涉重点信访事项人员'
        },
        {
          value: '涉重点涉法涉诉类矛盾人员',
          label: '涉重点涉法涉诉类矛盾人员'
        },
        {
          value: '“三失一偏”人员',
          label: '“三失一偏”人员'
        }
      ],
      model1: '全部人员',
      user_level: '',
      socialSecurityCount1: 0, // 社会治安-刑事
      socialSecurityCount2: 0, // 社会治安-治安
      socialSecurityCount3: 0, // 社会治安-其他
      homicideCaseCount: 0, // 命案数量
      deathCount: 0, // 死亡人数
      oneKillCount: 0, // 一杀数量
      oneKillAccount: 0.0, // 一杀占比
      twoKillCount: 0, // 二杀数量
      twoKillAccount: 0.0, // 二杀占比
      moreKillCount: 0, // 三杀数量
      moreKillAccount: 0.0, // 三杀占比
      killingTotal: 0, // 总案件数
      statusChartPie: null,
      statusChartPie2: null,
      statusChartPie3: null,
      statusChartBar2: null,
      statusChartBar: null
    }
  },

  props: {

  },

  components: {

  },

  computed: {
  },
  mounted () {
    this.user_level = this.$store.state.user.severUserInfo.company_grade
    this.checkoutPadding()
    window.onresize = () => {
      setTimeout(() => {
        this.statusChartPie.resize()
        this.statusChartPie2.resize()
        this.statusChartPie3.resize()
        this.statusChartBar2.resize()
        this.statusChartBar.resize()
        this.getPie1()
        this.getPie2()
        this.getPie3()
        this.getBar2()
        this.getBar1()
      }, 500)
    }
    setTimeout(() => {
      this.getPie1()
      this.getPie2()
      this.getPie3()
      this.getBar2()
      this.getBar1()
    }, 500)
  },
  methods: {
    checkoutPadding () {
      this.homicideCaseStatisticsCount() // 命案数量
      this.homicideCaseStatisticsCountDeadNumber() // 死亡人数
      this.homicideCaseStatisticsCountOneKillOnePerson() // 一杀一人数量
      this.homicideCaseStatisticsCountOneKillTwoPerson() // 一杀二人数量
      this.homicideCaseStatisticsCountOneKillMorePerson() // 一杀三人数量
      this.getSocialSecurityStatistics() // 社会治安相关
      this.getKillingTotal()// 总案件数
      // odiv.children[1].style.padding = p
      // odiv.children[1].style.background = '#f6f6f6'
    },
    // 社会治安相关
    getSocialSecurityStatistics () {
      socialSecurityStatistics().then(ret => {
        if (ret.data.errcode === 0) {
          console.log(ret.data.data, 'ret.data.data')
          this.socialSecurityCount1 = ret.data.data.sum1
          this.socialSecurityCount2 = ret.data.data.sum2
          this.socialSecurityCount3 = ret.data.data.sum3
        } else {
          this.$Message.error(ret.data.errmsg)
        }
      })
    },
    // 命案数量
    homicideCaseStatisticsCount () {
      homicideCaseStatisticsCount().then(ret => {
        if (ret.data.errcode === 0) {
          this.homicideCaseCount = ret.data.data.count
        } else {
          this.$Message.error(ret.data.errmsg)
        }
      })
    },
    // 死亡人数
    homicideCaseStatisticsCountDeadNumber () {
      homicideCaseStatisticsCountDeadNumber().then(ret => {
        if (ret.data.errcode === 0) {
          this.deathCount = ret.data.data.count
        } else {
          this.$Message.error(ret.data.errmsg)
        }
      })
    },
    // 一杀一人数量
    homicideCaseStatisticsCountOneKillOnePerson () {
      homicideCaseStatisticsCountOneKillOnePerson().then(ret => {
        if (ret.data.errcode === 0) {
          this.oneKillCount = ret.data.data.count
        } else {
          this.$Message.error(ret.data.errmsg)
        }
      })
    },
    // 一杀二人数量
    homicideCaseStatisticsCountOneKillTwoPerson () {
      homicideCaseStatisticsCountOneKillTwoPerson().then(ret => {
        if (ret.data.errcode === 0) {
          this.twoKillCount = ret.data.data.count
        } else {
          this.$Message.error(ret.data.errmsg)
        }
      })
    },
    // 一杀三人
    homicideCaseStatisticsCountOneKillMorePerson () {
      homicideCaseStatisticsCountOneKillMorePerson().then(ret => {
        if (ret.data.errcode === 0) {
          this.moreKillCount = ret.data.data.count
        } else {
          this.$Message.error(ret.data.errmsg)
        }
      })
    },
    // 总案件数
    getKillingTotal () {
      this.$nextTick(() => {
        this.killingTotal = Number(this.oneKillCount) + Number(this.twoKillCount) + Number(this.moreKillCount)
        let result = (Number(this.oneKillCount) / this.killingTotal) * 100 || 0
        result = result.toFixed(0)
        this.oneKillAccount = result
        let result2 = (Number(this.twoKillCount) / this.killingTotal) * 100 || 0
        result2 = result2.toFixed(0)
        this.twoKillAccount = result2
        let result3 = (Number(this.moreKillCount) / this.killingTotal) * 100 || 0
        result3 = result3.toFixed(0)
        this.moreKillAccount = result3
      })
    },
    // 犯罪嫌疑人年龄
    getPie1 () {
      // 基于准备好的dom，初始化echarts实例
      this.width = this.$refs.main.offsetWidth
      this.statusChartPie = this.$echarts.init(document.getElementById('pie1'))
      homicideSuspectStatisticsForAge().then(ret => {
        if (ret.data.errcode === 0) {
          // 指定图表的配置项和数据
          var option = {
            tooltip: {
              trigger: 'item'
            },
            legend: {
              // top: '25%',
              top: '5%',
              orient: 'vertical', // 图例的排列方向，'horizontal' 水平排列，'vertical' 垂直排列
              right: 'right'
              // textStyle: {
              //   color: '#ff0000' // 将图例文字颜色设置为红色
              // }
            },
            color: ['#B70000', '#FF0000', '#FFA592', '#FFD500'],
            series: [
              {
                name: '人数',
                type: 'pie',
                radius: ['40%', '55%'],
                avoidLabelOverlap: false,
                itemStyle: {
                  borderRadius: 10,
                  borderColor: '#fff',
                  borderWidth: 6
                },
                label: {
                  show: false,
                  position: 'center'
                },
                emphasis: {
                  label: {
                    show: false,
                    fontSize: 40,
                    fontWeight: 'bold'
                  }
                },
                labelLine: {
                  show: false
                },
                data: [
                  { value: ret.data.data['0-18'], name: '18岁以下' },
                  { value: ret.data.data['19-40'], name: '18~40岁' },
                  { value: ret.data.data['41-60'], name: '40~60岁' },
                  { value: ret.data.data['60+'], name: '60岁以上' }
                ]
              }
            ]
          }
          // 使用刚指定的配置项和数据显示图表。
          this.statusChartPie.setOption(option)
        } else {
          this.$Message.error(ret.data.errmsg)
        }
      })
    },
    // 犯罪嫌疑人文化程度
    getPie2 () {
      // 基于准备好的dom，初始化echarts实例
      this.width = this.$refs.main.offsetWidth
      this.statusChartPie2 = this.$echarts.init(document.getElementById('pie2'))
      homicideSuspectStatisticsForEduLevel().then(ret => {
        if (ret.data.errcode === 0) {
          let list = ['文盲', '小学学历', '初中学历', '高中学历', '专科学历', '本科学历', '硕士学历', '博士学历', '其他']
          let arr = []
          ret.data.data.forEach(item => {
            if (item.eduLevel) {
              arr.push({
                value: item.suspectCardno,
                eduLevel: item.eduLevel
              })
            }
          })
          arr.forEach(item => {
            if (item.eduLevel === '1') {
              item.name = list[0]
            }
            if (item.eduLevel === '2') {
              item.name = list[1]
            }
            if (item.eduLevel === '3') {
              item.name = list[2]
            }
            if (item.eduLevel === '4') {
              item.name = list[3]
            }
            if (item.eduLevel === '5') {
              item.name = list[4]
            }
            if (item.eduLevel === '6') {
              item.name = list[5]
            }
            if (item.eduLevel === '7') {
              item.name = list[6]
            }
            if (item.eduLevel === '8') {
              item.name = list[7]
            }
            if (item.eduLevel === '9') {
              item.name = list[8]
            }
          })
          // console.log(arr,'arr')
          // 指定图表的配置项和数据
          var option = {
            tooltip: {
              trigger: 'item'
            },
            legend: {
              top: '5%',
              orient: 'vertical', // 图例的排列方向，'horizontal' 水平排列，'vertical' 垂直排列
              right: 'right' // 图例的位置，这里是设置到左侧
              // textStyle: {
              //   color: '#ff0000' // 将图例文字颜色设置为红色
              // }
            },
            color: ['#FFD500', '#FF1A76', '#FF9100', '#6DBBFF', '#12CE69', '#116ED8', '#8F4AA8', '#4B5AA8'],
            series: [
              {
                name: '人数',
                type: 'pie',
                radius: ['40%', '55%'],
                avoidLabelOverlap: false,
                itemStyle: {
                  borderRadius: 10,
                  borderColor: '#fff',
                  borderWidth: 6
                },
                label: {
                  show: false,
                  position: 'center'
                },
                emphasis: {
                  label: {
                    show: false,
                    fontSize: 40,
                    fontWeight: 'bold'
                  }
                },
                labelLine: {
                  show: false
                },
                data: arr
              }
            ]
          }
          // 使用刚指定的配置项和数据显示图表。
          this.statusChartPie2.setOption(option)
        } else {
          this.$Message.error(ret.data.errmsg)
        }
      })
    },
    // 犯罪嫌疑人职业情况
    getPie3 () {
      // 基于准备好的dom，初始化echarts实例
      this.width = this.$refs.main.offsetWidth
      this.statusChartPie3 = this.$echarts.init(document.getElementById('pie3'))
      homicideSuspectStatisticsForCareerSituation().then(ret => {
        if (ret.data.errcode === 0) {
          let list = ['党政机关人员', '企事业人员', '退休人员', '无业人员', '农民', '个体户', '务工人员', '其他']
          let arr = []
          ret.data.data.forEach(item => {
            if (item.careerSituation) {
              arr.push({
                value: item.suspectCardno,
                careerSituation: item.careerSituation
              })
            }
          })
          arr.forEach(item => {
            if (item.careerSituation === '1') {
              item.name = list[0]
            }
            if (item.careerSituation === '2') {
              item.name = list[1]
            }
            if (item.careerSituation === '3') {
              item.name = list[2]
            }
            if (item.careerSituation === '4') {
              item.name = list[3]
            }
            if (item.careerSituation === '5') {
              item.name = list[4]
            }
            if (item.careerSituation === '6') {
              item.name = list[5]
            }
            if (item.careerSituation === '7') {
              item.name = list[6]
            }
            if (item.careerSituation === '8') {
              item.name = list[7]
            }
          })
          // 指定图表的配置项和数据
          var option = {
            tooltip: {
              trigger: 'item'
            },
            legend: {
              top: '5%',
              orient: 'vertical', // 图例的排列方向，'horizontal' 水平排列，'vertical' 垂直排列
              right: 'right' // 图例的位置，这里是设置到左侧
              // textStyle: {
              //   color: '#ff0000' // 将图例文字颜色设置为红色
              // }
            },
            color: ['#FFD500', '#FF1A76', '#FF9100', '#6DBBFF', '#12CE69', '#116ED8', '#8F4AA8', '#4B5AA8'],
            series: [
              {
                name: '人数',
                type: 'pie',
                radius: ['40%', '55%'],
                avoidLabelOverlap: false,
                itemStyle: {
                  borderRadius: 10,
                  borderColor: '#fff',
                  borderWidth: 6
                },
                label: {
                  show: false,
                  position: 'center'
                },
                emphasis: {
                  label: {
                    show: false,
                    fontSize: 40,
                    fontWeight: 'bold'
                  }
                },
                labelLine: {
                  show: false
                },
                data: arr
              }
            ]
          }
          // 使用刚指定的配置项和数据显示图表。
          this.statusChartPie3.setOption(option)
        } else {
          this.$Message.error(ret.data.errmsg)
        }
      })
    },
    // 案发原因统计
    getBar2 () {
      // 基于准备好的dom，初始化echarts实例
      this.width = this.$refs.main.offsetWidth
      this.statusChartBar2 = this.$echarts.init(document.getElementById('bar2'))
      homicideSuspectStatisticsForReasonIncident().then(ret => {
        if (ret.data.errcode === 0) {
          let list = ['婚恋家庭', '邻里纠纷', '土地及资源权属纠纷', '侵权相关纠纷', '城乡建设发展纠纷', '物权相关纠纷', '合同及相关纠纷', '劳动人事争议', '涉法涉诉纠纷', '其他']
          let arr = []
          ret.data.data.forEach(item => {
            if (item.reasonIncident) {
              arr.push({
                value: item.caseNumber,
                reasonIncident: item.reasonIncident
              })
            }
          })
          arr.forEach(item => {
            if (item.reasonIncident === '1') {
              item.name = list[0]
            }
            if (item.reasonIncident === '2') {
              item.name = list[1]
            }
            if (item.reasonIncident === '3') {
              item.name = list[2]
            }
            if (item.reasonIncident === '4') {
              item.name = list[3]
            }
            if (item.reasonIncident === '5') {
              item.name = list[4]
            }
            if (item.reasonIncident === '6') {
              item.name = list[5]
            }
            if (item.reasonIncident === '7') {
              item.name = list[6]
            }
            if (item.reasonIncident === '8') {
              item.name = list[7]
            }
            if (item.reasonIncident === '9') {
              item.name = list[8]
            }
            if (item.reasonIncident === '10') {
              item.name = list[9]
            }
          })
          let xDataArr = arr.map(item => {
            return item.name
          })
          let yDataArr = arr.map(item => {
            return item.value
          })
          console.log('+++++arr+++++')
          console.log(arr)
          console.log(xDataArr)
          console.log(yDataArr)
          console.log('+++++arr+++++')
          // 提取柱状图用到的数据
          var option = {
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              }
            },
            legend: {
              show: false
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            xAxis: [
              {
                type: 'category',
                data: xDataArr,
                axisLabel: {
                  rotate: 30
                }
              }
            ],
            yAxis: [
              {
                type: 'value',
                axisLine: {
                  show: false // 隐藏Y轴的轴线
                },
                splitLine: {
                  show: true,
                  lineStyle: {
                    color: '#E6E6E6',
                    type: 'dashed' // 设置网格线为虚线
                  }
                }
              }
            ],
            series: [
              {
                name: '数量',
                type: 'bar',
                color: '#209EFF',
                barWidth: 30, // 柱图宽度
                emphasis: {
                  focus: 'series'
                },
                itemStyle: {
                  normal: {
                    barBorderRadius: [5, 5, 0, 0] // [左上角, 右上角, 右下角, 左下角]
                  }
                },
                data: yDataArr
              }
            ]
          }
          // 指定图表的配置项和数据
          // var option = {
          //   tooltip: {
          //     trigger: 'item'
          //   },
          //   legend: {
          //     top: '5%',
          //     orient: 'vertical', // 图例的排列方向，'horizontal' 水平排列，'vertical' 垂直排列
          //     right: 'right' // 图例的位置，这里是设置到左侧
          //   },
          //   color: ['#FFD500', '#FF1A76', '#FF9100', '#6DBBFF', '#12CE69', '#116ED8', '#8F4AA8', '#4B5AA8'],
          //   series: [
          //     {
          //       name: '人数',
          //       type: 'pie',
          //       radius: ['50%', '70%'],
          //       avoidLabelOverlap: false,
          //       itemStyle: {
          //         borderRadius: 10,
          //         borderColor: '#fff',
          //         borderWidth: 6
          //       },
          //       label: {
          //         show: false,
          //         position: 'center'
          //       },
          //       emphasis: {
          //         label: {
          //           show: false,
          //           fontSize: 40,
          //           fontWeight: 'bold'
          //         }
          //       },
          //       labelLine: {
          //         show: false
          //       },
          //       data: arr
          //     }
          //   ]
          // }
          // 使用刚指定的配置项和数据显示图表。
          this.statusChartBar2.setOption(option)
        } else {
          this.$Message.error(ret.data.errmsg)
        }
      })
    },
    getBar1 () {
      // 基于准备好的dom，初始化echarts实例
      this.width = this.$refs.main.offsetWidth
      this.statusChartBar = this.$echarts.init(document.getElementById('bar1'))
      homicideSuspectStatisticsForChunk().then(ret => {
        if (ret.data.errcode === 0) {
          let xData = []
          let yData = []
          ret.data.data.forEach(item => {
            xData.push(item.cityName)
            yData.push(item.count || 0)
          })
          // 指定图表的配置项和数据
          var option = {
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              }
            },
            legend: {
              show: false
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            xAxis: [
              {
                type: 'category',
                data: xData,
                axisLabel: {
                  rotate: 30
                }
              }
            ],
            yAxis: [
              {
                type: 'value',
                axisLine: {
                  show: false // 隐藏Y轴的轴线
                },
                splitLine: {
                  show: true,
                  lineStyle: {
                    color: '#E6E6E6',
                    type: 'dashed' // 设置网格线为虚线
                  }
                }
              }
            ],
            series: [
              {
                name: '数量',
                type: 'bar',
                color: '#209EFF',
                barWidth: 30, // 柱图宽度
                emphasis: {
                  focus: 'series'
                },
                itemStyle: {
                  normal: {
                    barBorderRadius: [5, 5, 0, 0] // [左上角, 右上角, 右下角, 左下角]
                  }
                },
                data: yData
              }
            ]
          }
          console.log('=====1======')
          console.log(xData)
          console.log(yData)
          console.log('=====1======')
          // 使用刚指定的配置项和数据显示图表。
          this.statusChartBar.setOption(option)
        } else {
          this.$Message.error(ret.data.errmsg)
        }
      })
    },
    togo (url) {
      this.$router.push({
        path: url
      })
    }

  },

  watch: {
    oneKillCount (val) {
      if (val) {
        this.getKillingTotal()
      }
    },
    twoKillCount (val) {
      if (val) {
        this.getKillingTotal()
      }
    },
    moreKillCount (val) {
      if (val) {
        this.getKillingTotal()
      }
    }
  }
}
</script>

<style scoped>
    .container{
        height: 100%;
        display: flex;
        flex-direction: column;
        /*padding: 16px;*/
    }
    .statistics-head{
      width: 100%;
      display: flex;
    }
    .statistics-head-item{
      width: calc(17% - 20px);
      margin-right: 20px;
      display: flex;
      align-items: center;
      align-self: center;
      align-content: center;
      padding: 50px 0px 50px 30px;
      border-radius: 16px;
      background: linear-gradient(180.00deg, #9fd5ff 0%, #209eff 100%);
      border: 1px solid #fff;
    }
    .statistics-head-item-box{
      width: calc(24% - 20px);
      margin-right: 20px;
      display: flex;
      align-items: center;
      align-self: center;
      align-content: center;
      padding: 40px 0px 40px 10px;
      border-radius: 16px;
      background: linear-gradient(180.00deg, #9fd5ff 0%, #209eff 100%);
      border: 1px solid #fff;
    }
    .statistics-desc-box{
      display: flex;
      flex-direction: column;
    }
    .statistics-head-item-ii{
      width: 70%;
      border-radius: 16px;
      background: #fff;
      display: flex;
      padding: 16px;
    }
    .statistics-head-item-ii-left{
      border-radius: 8px;
      background: linear-gradient(207.31deg, #9fd5ff 0%, #f9fdff 100%);
      border: 1px solid #fff;
      /* width: calc(46% - 8px); */
      width: 33%;
      height: 120px;
      margin-right: 8px;
      padding: 10px;
      border-radius: 8px;
    }
    .statistics-head-item-ii-center{
      border-radius: 8px;
      /* width: calc(30% - 8px); */
      width: 33%;
      margin-right: 8px;
      background: linear-gradient(236.56deg, #ffe923 0%, #fffdf8 100%);
      border: 1px solid #fff;
      height: 120px;
      padding: 10px;
    }
    .statistics-head-item-ii-center-right{
      border-radius: 8px;
      /* width: calc(30% - 8px); */
      width: 33%;
      margin-right: 8px;
      background: linear-gradient(246.01deg, #ff8181 0%, #fff 100%);

      border: 1px solid #fff;
      height: 120px;
      padding: 10px;
    }
    .statistics-head-item-top-box{
      display: flex;
      justify-content: space-around;
      padding: 5px;
    }
    .statistics-head-item-top-small-box{
      margin-right: 10px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .statistics-head-item-top-title{
      font-weight: 500;
      font-size: 15px;
      margin-left: 10px;
    }
    .statistics-head-item-ii-right{
      border-radius: 8px;
      /* width: calc(24%); */
      width: 33%;
      background: linear-gradient(236.56deg, #3FDD86 0%, #fffdf8 100%);
      border: 1px solid #fff;
      height: 120px;
      /*margin-right: 8px;*/
      padding: 10px;
    }
    .img-icon{
        width: 50px;
        height: 50px;
        background: #f2f8ff;
    }
    .imgw{
        width: 100%;
        height: 100%;
    }
    .statistics-desc{
        display: flex;
        flex-direction: column;
        margin-left: 16px;
    }
    .s-title{
        font-family: "PingFang SC";
        font-weight: 400;
        font-size: 18px;
        text-align: left;
        color: #2e3038;
    }
    .s-num{
        font-family: "Montserrat";
        font-weight: 400;
        font-size: 18px;
        text-align: left;
        color: #2c3564;
    }
    .s-unit{
      font-family: "PingFang SC";
      font-weight: 400;
      font-size: 10px;
      text-align: left;
      color: #fff;
      margin-left: 5px;
    }
    .i-top{
        color: #9fd5ff;
        font-size: 36px;
        font-face: Montserrat;
        font-weight: 400;
        letter-spacing: 0;
        position: relative;
    }
    .i-top-ii{
        color: #c6bb7f;
        font-size: 36px;
        font-face: Montserrat;
        font-weight: 400;
        letter-spacing: 0;
        position: relative;
    }
    .i-top-iii{
        color: #ff9e9e;
        font-size: 36px;
        font-face: Montserrat;
        font-weight: 400;
        letter-spacing: 0;
        position: relative;
    }
    .i-center{
        margin-top: 14px;
        font-family: "PingFang SC";
        font-weight: 400;
        font-size: 14px;
        text-align: left;
        color: #2e3038;
    }
    .i-bottom{
        font-family: "Montserrat";
        font-weight: 400;
        font-size: 18px;
        /*text-align: right;*/
        color: #209eff;
    }
    .i-bottom-ii{
        font-family: "Montserrat";
        font-weight: 400;
        font-size: 18px;
        /*text-align: right;*/
        color: #ee9f45;
    }
    .statistics-head-item-top-num{
      font-family: "Montserrat";
      font-weight: 400;
      font-size: 15px;
      color: green;
    }
    .statistics-head-item-top-unit{
      font-family: "Montserrat";
      font-weight: 400;
      font-size: 12px;
      color: green;
    }
    .i-bottom-iii{
        font-family: "Montserrat";
        font-weight: 400;
        font-size: 18px;
        /*text-align: right;*/
        color: #c53535;
    }
    .i-top-unit{
        color: #9fd5ff;
        font-size: 20px;
        margin-bottom: 10px;
        font-face: Montserrat;
        font-weight: 400;
        letter-spacing: 0;
        position: absolute;
        margin-top: 4px;
    }
    .i-top-unit-ii{
        color: #c6bb7f;
        font-size: 20px;
        margin-bottom: 10px;
        font-face: Montserrat;
        font-weight: 400;
        letter-spacing: 0;
        position: absolute;
        margin-top: 4px;
    }
    .i-top-unit-iii{
        color: #ff9e9e;
        font-size: 20px;
        margin-bottom: 10px;
        font-face: Montserrat;
        font-weight: 400;
        letter-spacing: 0;
        position: absolute;
        margin-top: 4px;
    }
    .i-bottom-unit{
      font-family: "PingFang SC";
      font-weight: 400;
      font-size: 10px;
      text-align: left;
      color: #9fd5ff;
      margin-left: 5px;
    }
    .i-bottom-unit-ii{
      font-family: "PingFang SC";
      font-weight: 400;
      font-size: 10px;
      text-align: left;
      color: #c6bb7f;
      margin-left: 5px;
    }
    .i-bottom-unit-iii{
      font-family: "PingFang SC";
      font-weight: 400;
      font-size: 10px;
      text-align: left;
      color: #ff9e9e;
      margin-left: 5px;
    }
    .statistics-pie{
        padding-top: 26px;
        padding-bottom: 26px;
        border-radius: 16px;
        background: #fff;
        margin-top: 20px;
        display: flex;
    }
    .pie1{
        width: 33%;
        height: 400px;
    }
    .bar{
        width: 100%;
        border-radius: 16px;
        background: #fff;
        padding: 16px;
        margin-top: 20px;
        display: flex;
    }
    .bar-w1{
      width: 50%;
    }
    .bar-w2{
      width: 50%;
    }
    .bar1{
        width: 100%;
        height: 233px;
    }
    .statistics-bar-bottom{
      margin-top: 16px;
      display: flex;
      align-items: center;
      align-self: center;
      align-content: center;
    }
    .statistics-bar-bottom-title{
      font-family: "PingFang SC";
      font-weight: 400;
      font-size: 14px;
      text-align: left;
      color: #2e3038;
    }
    .statistics-bar-bottom-num{
      font-family: "Montserrat";
      font-weight: 400;
      font-size: 18px;
      /*text-align: right;*/
      color: #209eff;
      margin-left: 24px;
    }
    .statistics-bar-bottom-unit{
      font-family: "PingFang SC";
      font-weight: 400;
      font-size: 10px;
      text-align: left;
      color: #c3cddb;
    }
    .bar-title{
      display: flex;
      align-content: center;
      align-self: center;
      align-items: center;
      justify-content: space-between;
    }
    .flexc{
      display: flex;
      align-content: center;
      align-self: center;
      align-items: center;
    }
    .dot-css{
      width: 8px;
      height: 8px;
      border-radius: 8px;
      background: #209eff;
    }
    .dot-title{
      font-family: "PingFang SC";
      font-weight: 400;
      font-size: 16px;
      text-align: left;
      color: #000;
      margin-left: 8px;
    }
    /deep/ .ivu-select-selection{
      height: 100%;
      border-color: #FFFFFF;
    }
    /deep/ .ivu-select-selected-value{
      font-family: "PingFang SC";
      font-weight: 400;
      font-size: 14px;
      /*text-align: center;*/
      color: #209eff;
    }
    /deep/ .ivu-select-arrow {
      width: 18px;
      height: 18px;
      border-radius: 5px;
      /*background: #e8f3ff;*/
      color: #209eff;
      padding-top: 2px;
    }
</style>
