<template>


    <div class="flex-row" style="height: 49%">
      <div id="top-left">
        <div class="flex">
          <div class="flex" >
            <div class="flex-row" style="height: 40%;margin-top: 2%;">
              <div  class="auto col-sm-12" style="width: 60%;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">{{checkData.wrhsum > 1000000 ? (checkData.wrhsum/10000).toFixed(2) + '万' : checkData.wrhsum}}</span>
                </div>
                <div  class="flex-inline col-sm-6 auto" >
                  <span id="anjian">{{checkData.jhsum > 1000000 ? (checkData.jhsum/10000).toFixed(2) + '万' : checkData.jhsum}}</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-wh></ring-safecheck-wh>-->
              <!--</div>-->
            </div>
            <div  style="height: 58%">
              <safe-check-wh :datamanage="datamanage"></safe-check-wh>
            </div>
          </div>

        </div>
<!--        <div class="flex background-left-bottom">-->

      </div>
      <div id="top-mid" >
        <div class="flex">
          <wu-hai-map  mode="1" idname="wuhaimap"></wu-hai-map>
        </div>
<!--          <gmap  :point="point"> </gmap>-->
      </div>
      <div id="top-right" >

        <div class="flex">
          <net-work-ping></net-work-ping>
        </div>
        </div>

    </div>
    <div class="flex-row " style="height: 48%;margin-top: 1%;">

      <div class="flex background-left-bottom" style="height: 100%;width: 49%;margin-right: 1%">

        <div class="flex-row" style="width: 100%;height:49%;margin-top: 2%;">

          <div style="width:35%;height:100%;">
            <sell-echarts class=""></sell-echarts>
          </div>
          <div   style="width:65%;height:100%;">
            <bar-chart1></bar-chart1>
          </div>
        </div>
        <div class="flex-row" style="width: 100%;height:49%">
          <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="height: 100%;width: 49%;margin-left:1%">
        <qh-call-center :datamanage="datamanage"></qh-call-center>
      </div>
    </div>



</template>

<script>
import {HttpResetClass} from 'vue-client'
export default {
  title: '数据展示',
  data() {
    return{
      sumnum:0,
      showChart1 : true,
      showChart2 : false,
      moveDistance:'15',
      viewHeight:'400px',
      point:{
        url:'getDapingStationMap',
        data:{}
      },
      checkData:{},
      dane1:[],
      dane2:[],
      dane3:[],
      datass:[],
      datas1:[],
      datas2:[],
      datas3:[],
      //焕表
      changeMeter :{},
      changeMeterByType :{},
    }
  },
  methods: {
    async resize() {
      console.log('穿过来的值')
      this.changeshow = !this.changeshow
      console.log(this.changeshow)
      if(!this.datamange.checkData){
        let http = new HttpResetClass()
        await http.load('post', '/api/af-revenue/sql/getCheckSum', {data:{}}, {rejectMsg: null, resolveMsg: null}).then((res)=>{
          this.checkData = res.data[0]
        })
      } else {
        this.checkData = this.datamange.checkData

      }

      // await http.load('post', '/api/af-revenue/sql/getHeatStationTable', {data:{}}, {rejectMsg: null, resolveMsg: null}).then((res)=>{
      //   console.log('热源厂---------------')
      //   console.log(res)
      //   for (let i = 0; i < res.data.length; i++) {
      //     console.log(res.data[i])
      //     let info = {
      //       f_name : res.data[i].f_name,
      //       f_cumulative_flow : res.data[i].f_cumulative_flow,
      //       f_input_pressure : res.data[i].f_input_pressure,
      //       f_instantaneous_flow : res.data[i].f_instantaneous_flow,
      //       f_output_pressure : res.data[i].f_output_pressure
      //     }
      //     this.datas3.push(info)
      //   }
      // })
      // await http.load('post', '/api/af-revenue/sql/getCityStationTable', {data:{}}, {rejectMsg: null, resolveMsg: null}).then((res)=>{
      //   console.log('城市门站---------------')
      //   console.log(res)
      //   for (let i = 0; i < res.data.length; i++) {
      //     console.log(res.data[i])
      //     let info = {
      //         f_name : res.data[i].f_name,
      //         f_cumulative_flow : res.data[i].f_cumulative_flow,
      //         f_input_pressure : res.data[i].f_input_pressure,
      //         f_instantaneous_flow : res.data[i].f_instantaneous_flow,
      //         f_output_pressure : res.data[i].f_output_pressure
      //       }
      //     this.datas1.push(info)
      //   }
      // console.log('this.datas1===================')
      // console.log(this.datas1)
      // })
      // //换表
      // await http.load('post', '/api/af-revenue/sql/getChangeMeter', {data:{}}, {rejectMsg: null, resolveMsg: null}).then((res)=>{
      //   console.log('换表~~~~~~~~~~~~~~~~')
      //   let info ={
      //     wlwnum : res.data[0].wlwnum,
      //     spnum : res.data[0].spnum,
      //     totalnum : res.data[0].totalnum
      //   }
      //
      //   this.changeMeter =info
      //   console.log(this.changeMeter)
      // })
      // //分户换表
      // await http.load('post', '/api/af-revenue/sql/getChangeMeterByType', {data:{}}, {rejectMsg: null, resolveMsg: null}).then((res)=>{
      //   console.log('分户换表~~~~~~~~~~~~~~~~')
      //   console.log( res.data[0])
      //   let info ={
      //     monthToatl : res.data[0].monthtoatl,
      //     tenType : res.data[0].tentype,
      //     dnh : res.data[0].dnh,
      //     unfinished : res.data[0].unfinished,
      //     gstotal : res.data[0].gstotal,
      //   }
      //   this.changeMeterByType =info
      //   console.log(this.changeMeterByType)
      // })
      var self=this
      var index=-1


      // setInterval(()=>{
      //   self.dane1.splice(0,self.dane1.length)
      //   index=(index+1)%self.datas1.length
      //   var maxid=0
      //   if(index>self.datas1.length-9){
      //     maxid=self.datas1.length-1
      //   }else {
      //     maxid=index+8
      //   }
      //   var i=0
      //   self.datas1.forEach(function (s) {
      //     if(i>=index&&i<=maxid){
      //       self.dane1.push(s)
      //     }
      //     i++
      //   })
      //   var s=this.dane1.length
      //   if(this.dane1.length<9){
      //     for(var i =0;i<9-s;i++){
      //       this.dane1.push(  {f_name:'',f_cumulative_flow:'',f_input_pressure:'',f_instantaneous_flow:'', f_output_pressure:''},)
      //     }
      //   }
      // }, 3000)

      // setInterval(()=>{
      //   self.dane2.splice(0,self.dane2.length)
      //   index=(index+1)%self.datas2.length
      //   var maxid=0
      //   if(index>self.datas2.length-9){
      //     maxid=self.datas2.length-1
      //   }else {
      //     maxid=index
      //   }
      //   var i=0
      //   self.datas2.forEach(function (s) {
      //     if(i>=index&&i<=maxid){
      //       self.dane2.push(s)
      //     }
      //     i++
      //   })
      //   var s=this.dane2.length
      //   if(this.dane2.length<9){
      //     for(var i =0;i<9-s;i++){
      //
      //       this.dane2.push(  {f_name:'',f_cumulative_flow:'',f_input_pressure:'',f_instantaneous_flow:'', f_output_pressure:''},)
      //     }
      //   }
      // }, 2000)
      // setInterval(()=>{
      //   self.dane3.splice(0,self.dane3.length)
      //   index=(index+1)%self.datas3.length
      //   var maxid=0
      //   if(index>self.datas3.length-9){
      //     maxid=self.datas3.length-1
      //   }else {
      //     maxid=index
      //   }
      //   var i=0
      //   self.datas3.forEach(function (s) {
      //     if(i>=index&&i<=maxid){
      //       self.dane3.push(s)
      //     }
      //     i++
      //   })
      //   var s=this.dane3.length
      //   if(this.dane3.length<9){
      //     for(var i =0;i<9-s;i++){
      //       this.dane3.push(  {fen:'',name:'',money:'',state:''},)
      //     }
      //   }
      // }, 2000)

    },



    showCharts(title) {
      this.$emit("showCharts", title)
    }
    },
  ready () {
    this.resize()

  },

  props: ['changeshow','datamanage'],
  computed: {
    top() {
      console.log('ssss')
      return -this.activeIndex * this.moveDistance + "px"; //定义移动的单元高度
    },
  },
}
</script>
<style scoped>
@media screen and (max-width: 1920px) {
  .main {
    height: 100%;
    padding: 1em;
    flex: 1 1 auto;
    flex-direction: column;
    display: flex;
  }
  .top-left-title{
      color: #ffc21f;
    font-size: 13px;
  }

  table {
    /*设置相邻单元格的边框间的距离*/
    border-spacing: 0;
    /*表格设置合并边框模型*/
    border-collapse: collapse;
    text-align: center;
    /*background-color: red;*/
  }
  /*关键设置 tbody出现滚动条*/
  table tbody {
    display: block;
    height: 70px;

  }




  table thead,
  tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
    border: 1px;
    background-color: #012C45;
    margin-top: 2px;
  }
  tbody tr td {
    text-align: left;
    color: #00F6FF;
  }






  /*关键设置 tbody出现滚动条*/
  #tableLast tbody {
    display: block;
    height: 45px;

  }

  #tableLast thead,
  #tbodyLast tr {
    display: table;
    width: 100%;
    table-layout: fixed;
    border: 1px;
    background-color: #012C45;
    margin-top: 4px;
  }
  #tbodyLast tr td {
    text-align: left;
    color: #00F6FF;
  }



  .font-14-medium1{
    color: #ffffff;
    line-height: 24px;
    font-size: 16px;
    font-family: font-pingfang-medium;
  }
  .scada-font-title {
    margin-right: 1em;
    font-family: tRends;
    font-size: 25px;
    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: 38%;
    height: 100%;
    margin-right: 2%;
  }

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

  #top-right {
    width: 38%;
    height: 100%;
    margin-left: 2%;
  }

  .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: 35%;
    width: 28%;
    height: 57%;
  }
  .scroll-content {
    position: relative;
    transition: top 0.825s;
  }

}
@media screen and (max-width: 1440px) {
  .main {
    height: 100%;
    padding: 1em;
    flex: 1 1 auto;
    flex-direction: column;
    display: flex;
  }

  #top-left {
    /*padding: 1em;*/
    width: 32%;
    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: 35%;
    width: 28%;
    height: 57%;
  }
  .font-14-medium{
    color: #ffffff !important;
    line-height: 18px;
    font-size: 12px;
    font-family: font-pingfang-medium;
  }
  .scroll-content {
    position: relative;
    transition: top 0.825s;
  }
}
</style>

