<template>
  <div class=' main background-qinhua' style="overflow: hidden" >
    <div class="title-main" style="height: 7%">
      <img src="../../../static/NewManageHome/title_left.png" alt="" style="vertical-align:middle">
      <span class="title-font" style="text-align:justify;">秦华燃气数据展示</span>
      <img src="../../../static/NewManageHome/title_right.png" alt="" style="vertical-align:middle">
    </div>
    <div class="flex-row" style="height: 46%">
      <div id="top-left">
        <scada></scada>
      </div>
      <div id="top-mid" >
        <qinhua-map  class="qinhuamap" mode="1" idname="shanximap"></qinhua-map>
      </div>
      <div id="top-right" >
        <bar-chart-line class="background-left-top">
        </bar-chart-line>
      </div>
    </div>
    <div class="flex-row " style="height: 42%;margin-top: 1em;">
      <div class="flex background-left-bottom" style="width: 100%;width: 50%">
        <div class="flex-row" style="width: 100%;height:60%">
            <div style="width:35%;height:100%;">
              <sell-echarts class=""></sell-echarts>
            </div>
            <div   style="width:65%;height:100%;">
              <bar-chart></bar-chart>
            </div>
        </div>
        <div class="flex-row" style="width: 100%;height:40%">
          <div id="pie-one" >
            <pie-sell></pie-sell>
          </div>
          <div  style="width:65%;height: 100%">
            <ring-sell></ring-sell>
          </div>
          </div>
        </div>
      <div class="flex background-left-bottom" style="width: 100%;width: 50%;">
        <div class="flex" >
          <div class="flex-row" style="height: 40%">

            <div  class="auto col-sm-12" style="width: 40%;height: 100%;padding: 1em" >
              <div class=" col-sm-12 auto" style="padding-left: 1em">
                <span class="font-title">安检</span>
              </div>
              <div  class="flex-inline col-sm-6 auto" >
                <span id="weiruhu">121万</span>
              </div>
              <div  class="flex-inline col-sm-6 auto" >
                <span id="anjian">73万</span>
              </div>
              <div class="flex-inline col-sm-6 auto" >
               <span class="normal-font" >三年未入户总数</span>
              </div>

              <div class="flex-inline col-sm-6 auto" >
                <span class="normal-font" >计划安检量</span>
              </div>
            </div>
            <div style="width: 60%">
            <ring-safecheck></ring-safecheck>
            </div>
          </div>
          <div  style="height: 58%">
            <safecheck-barchart></safecheck-barchart>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
  export default {
    title: '收费',
    data() {
    },
    methods: {},
    ready () {
    },
    props: {}
  }
</script>
<style scoped>
  .main {
    height: 100%;
    padding: 1em;
    flex: 1 1 auto;
    flex-direction: column;
    display: flex;
  }


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

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

  #top-right {
    width: 33%;
    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;
    height: 10%;
    width: 50%
  }
  .flex-inline{
    display: inline-flex;
    justify-content: space-around;
  }
  #pie-one{
    height: 100%;
    width: 35%;
  }
  #weiruhu {
    font-family: PingFang-SC-Bold;
    font-size: 26px;
    font-weight: bold;
    font-stretch: normal;
    line-height: 35px;
    letter-spacing: 0px;
    color: #f27c79;
  }
  #anjian {
    font-family: PingFang-SC-Bold;
    font-size: 26px;
    font-weight: bold;
    font-stretch: normal;
    line-height: 35px;
    letter-spacing: 0px;
    color: #2490d9;
  }
  .qinhuamap{
    position: absolute;
    top: 2%;
    left: 40%;
    width: 28%;
    height: 57%;
  }
</style>

