<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',
              formatter: '{b}: {d}%,{c}个',
              position: 'inside'
            },
            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,
                formatter: '{b}: {d}%',
                position: 'inside'
              },
              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',
              formatter: '{b}: {d}%,{c}个',
              position: 'inside'
            },
            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
              },
              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',
              formatter: '{b}: {d}%,{c}个',
              position: 'inside'
            },
            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,
                formatter: '{b}: {d}%',
                position: 'inside'
              },
              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]
            }
            if (item.reasonIncident === '11') {
              item.name = list[10]
            }
            if (item.reasonIncident === '12') {
              item.name = list[11]
            }
          })
          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>
