<template>

    <div class="flex-row" style="height: 44%">
      <div id="top-left" >
        <div class="background-left-top flex" >
          <div class="flex-row" style="height: 10%">
            <div class="col-sm-1" style="height: auto;padding-left: 2%;margin:2%">
              <span class="pf-title"><nobr>销气量</nobr></span>
            </div>

          </div>
          <div class="flex-row" style="height: 100%">
            <div class="col-sm-6" style="height: 100%;padding-left: 1%;margin:1%">
              <qh-sell-bar-echarts></qh-sell-bar-echarts>
            </div>
            <div class="col-sm-6" style="height: 100%;padding-left: 1%;margin:1%">
              <qh-data-statistics></qh-data-statistics>
            </div>
          </div>
        </div>

      </div>
      <div id="top-right" >
        <qinhua-map  class="qinhuamap" mode="1" idname="shanximap"></qinhua-map>
      </div>
    </div>
    <div class="flex-row " style="height: 47%;margin-top: 1em;">
      <div class="flex background-left-bottom" style="height: 100%;width: 50%">
        <div class="flex-row" style="width: 100%;height:10%">
          <div class="col-sm-2" style="height: 10%;padding-left: 2%;margin:2%">
            <span class="pf-title"><nobr>十年到期表</nobr></span>
          </div>
        </div>
        <div class="flex-row" style="width: 100%;height:100%">
          <qh-expire-meter></qh-expire-meter>
        </div>
      </div>
      <div class="flex background-left-bottom" style="height: 100%;width: 48%;margin-left:1%">
        <div class="flex-row" style="width: 100%;height:10%">
          <div class="col-sm-2" style="height: 10%;padding-left: 2%;margin:2%">
            <span class="pf-title"><nobr>居民安检</nobr></span>
          </div>

        </div>
        <div class="flex" style="width: 100%;height:20%;margin-top: 2%">
          <div class="flex-row scada-title">
            <div class="row">
              <span class="font-14-medium">年度计划数</span>
              <p style="color:#8969ff"><span class="scada-font-title">{{ sbsjfl }}</span></p>

            </div>
            <div class="row">
              <span class="font-14-medium">累计到访户数</span>
              <p style="color:#f27c79"><span class="scada-font-title">{{aj.amount}}</span></p>

            </div>
            <div class="row">
              <span class="font-14-medium">实际入户数</span>
              <p style="color:#d5a329"><span class="scada-font-title">{{aj.ruhu}}</span></p>

            </div>
            <div class="row">
              <span class="font-14-medium">入户率</span>
              <p style="color:#d5a329"><span class="scada-font-title">{{(aj.ruhu/aj.amount*100).toFixed(2)}}%</span></p>

            </div>

          </div>

        </div>
        <div class="flex-row" style="width: 100%;height:70%">
          <safecheck-barchart></safecheck-barchart>
        </div>

      </div>
    </div>


</template>

<script>
import {HttpResetClass} from 'vue-client'
export default {
  title: '收费1',
  data() {
    return{
      thisYear: undefined,
      lastYear: undefined,
      nextYear: undefined,
      thisMonth: undefined,
      today: undefined,
      sbsjfl : 0,
      aj:{
        amount: 0,
        ruhu: 0,

      },
    }
  },
  methods: {
    init() {
      let dt = new Date()
      this.thisYear = dt.getFullYear()
      this.lastYear = dt.getFullYear() - 1
      this.nextYear = dt.getFullYear() + 1
      this.today = dt.getDay()
      this.thisMonth = this.today>10?dt.getMonth()+1:dt.getMonth()

    },
  },
  async ready () {
    await this.init();
    let http = new HttpResetClass()
    await http.load('post', '/api/af-revenue/sql/getDapingSafeCheck', {data:{

      }}, {rejectMsg: null, resolveMsg: null}).then((res)=>{
      this.aj = res.data[0]
    })
    await http.load('post', '/api/af-revenue/sql/getSafeCheckPlanNum', {data:{sql:`getSafeCheckPlanNum`}}, {rejectMsg: null, resolveMsg: null}).then((res)=>{
      console.log('年度安检计划数量~~~~~~~~')
      console.log(res.data[0].sbsjfl)
      this.sbsjfl = res.data[0].sbsjfl
    })
  },
  props: {}
}
</script>
<style scoped>
@media screen and (max-width: 1920px) {
  .main {
    height: 100%;
    padding: 1em;
    flex: 1 1 auto;
    flex-direction: column;
    display: flex;
  }
  .scada-title {
    justify-content: space-around;
    flex-direction: row;
    height: auto;
    padding-left: 10%;
    padding-right: 10%;
  }
  .scada-font-title {
    margin-right: 0.2em;
    font-family: tRends;
    font-size: 30px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 30px;
    letter-spacing: 0px;
  }
  .font-14 {
    font-size: 14px;
    font-family: tRends;
  }

  .font-14-medium {
    color: #ffffff;
    line-height: 7px;
    font-size: 16px;
    font-family: font-pingfang-medium;
  }
  #top-left {
    /*padding: 1em;*/
    width: 70%;
    height: 100%;
  }

  #top-mid {
    /*padding: 1em;*/
    width: 30%;
    height: 100%;
  }

  #top-right {
    width: 37%;
    height: 100%;
  }

  .title-font {
    font-family: HYk2gj;
    font-size: 40px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 26px;
    letter-spacing: 2px;
    color: #ffffff;
  }

  .title-main {
    margin: 0 auto;
  }

  .flex-inline {
    display: inline-flex;
    justify-content: space-around;
  }

  #pie-one {
    height: 100%;
    width: 35%;
  }

  #weiruhu {
    font-family: tRends;
    font-size: 24px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 35px;
    letter-spacing: 0px;
    color: #00f6ff;
  }

  #anjian {
    font-family: tRENDS;
    font-size: 24px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 35px;
    letter-spacing: 0px;
    color: #ffc21f;
  }

  .qinhuamap {
    position: absolute;
    top: 2%;
    left: 71%;
    width: 28%;
    height: 57%;
  }
}
@media screen and (max-width: 1440px) {
  .main {
    height: 100%;
    padding: 1em;
    flex: 1 1 auto;
    flex-direction: column;
    display: flex;
  }
  .scada-title {
    justify-content: space-around;
    flex-direction: row;
    height: auto;
    padding-left: 10%;
    padding-right: 10%;
  }
  .font-14-medium {
    color: #ffffff;
    line-height: 7px;
    font-size: 14px;
    font-family: font-pingfang-medium;
  }
  .scada-font-title {
    margin-right: 0.2em;
    font-family: tRends;
    font-size: 28px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 30px;
    letter-spacing: 0px;
  }
  .font-14 {
    font-size: 14px;
    font-family: tRends;
  }

  #top-left {
    /*padding: 1em;*/
    width: 70%;
    height: 100%;
  }

  #top-mid {
    /*padding: 1em;*/
    width: 30%;
    height: 100%;
  }

  #top-right {
    width: 37%;
    height: 100%;
  }

  .title-font {
    font-family: HYk2gj;
    font-size: 30px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 22px;
    letter-spacing: 2px;
    color: #ffffff;
  }

  .title-main {
    margin: 0 auto;
  }

  .flex-inline {
    display: inline-flex;
    justify-content: space-around;
  }

  #pie-one {
    height: 100%;
    width: 35%;
  }

  #weiruhu {
    font-family: tRends;
    font-size: 18px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 22px;
    letter-spacing: 0px;
    color: #00f6ff;
  }

  #anjian {
    font-family: tRENDS;
    font-size: 18px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 22px;
    letter-spacing: 0px;
    color: #ffc21f;
  }

  .qinhuamap {
    position: absolute;
    top: 2%;
    left: 71%;
    width: 28%;
    height: 57%;
  }
  .font-14-medium{
    color: #ffffff;
    line-height: 18px;
    font-size: 12px;
    font-family: font-pingfang-medium;
  }

}
</style>

