<template>

  <div class=' main background-qinhua' style="overflow: hidden" v-if="showChart1">
    <div class="title-main" style="height: 7%">
      <span class="title_main" style="vertical-align:left;background: url('../../../static/NewManageHome/矩形1186.png')" @click="showCharts('燃气数据展示')">

        客服</span>
      <img src="../../../static/NewManageHome/title_left.png" alt="" style="vertical-align:middle">
      <img src="../../../static/NewManageHome/title_wuhai.png" alt="" style="vertical-align:middle">
      <img src="../../../static/NewManageHome/title_right.png" alt="" style="vertical-align:middle">
      <span  class="title_main" style="vertical-align:right;background: url('../../../static/NewManageHome/矩形1186拷贝.png')"  @click="showCharts('数据化管理')" b>

        录入</span>
    </div>
    <div style="height: 93%;" v-if="show">
      <qh-data-management :changeshow=showChart2 :datamanage="datamanage"></qh-data-management>
    </div>


  </div>
  <div class=' main background-qinhua' style="overflow: hidden" v-if="showChart2">
    <div class="title-main" style="height: 7%">
      <span class="title_main" style="vertical-align:left;background: url('../../../static/NewManageHome/矩形1186.png')" @click="showCharts('燃气数据展示')">

        客服</span>
      <img src="../../../static/NewManageHome/title_left.png" alt="" style="vertical-align:middle">
      <img src="../../../static/NewManageHome/title_wuhai.png" alt="" style="vertical-align:middle">
      <img src="../../../static/NewManageHome/title_right.png" alt="" style="vertical-align:middle">
      <span  class="title_main" style="vertical-align:right;background: url('../../../static/NewManageHome/矩形1186拷贝.png')"  @click="showCharts('数据化管理')" b>

        录入</span>
    </div>
    <redact-da-ping></redact-da-ping>
<!--    <div class="title-main" style="height: 7%">-->
<!--      <span class="title_main" style="vertical-align:left;background: url('../../../static/NewManageHome/矩形1186.png')" @click="showCharts('燃气数据展示')">-->

<!--        客服</span>-->
<!--      <img src="../../../static/NewManageHome/矩形6拷贝3.png" alt="" style="vertical-align:middle">-->
<!--      <a style="background-image:url('../../../static/NewManageHome/圆角矩形1163.png');font-family: HYk2gj;-->
<!--      font-size: 2.2em;-->
<!--      font-weight: normal;-->
<!--      font-stretch: normal;-->
<!--      line-height: 26px;-->
<!--      letter-spacing: 2px;-->
<!--      color: #ffffff;" href="http://10.10.90.190:8300/">-->
<!--        数据化管理平台-->
<!--      </a>-->

<!--      <img src="../../../static/NewManageHome/矩形6拷贝4.png" alt="" style="vertical-align:middle">-->
<!--      <span class="title_main" style="vertical-align:right;background: url('../../../static/NewManageHome/矩形1186拷贝.png')"  @click="showCharts('数据化管理')" b>-->

<!--        经营</span>-->
<!--    </div>-->
<!--    <qh-data-management1 ></qh-data-management1>-->

  </div>
</template>

<script>
  import {HttpResetClass} from 'vue-client'
  export default {
    title: '收费',
    data() {
      return{
        datamanage:{},
        sumnum:0,
        show: false,
        showChart1 : true,
        showChart2 : false,
      }
    },
    methods: {
      showCharts(title){
        if(title === '燃气数据展示'){
          this.showChart1 = true
          this.showChart2 = false
        }else{
          this.showChart1 = false
          this.showChart2 = true
        }
      }
    },
    ready () {
      let http = new HttpResetClass()
      http.load('get', '/dataManage.json', {data:{}}, {rejectMsg: null, resolveMsg: null}).then((res)=>{
        console.log(res.data)
        this.datamanage = res.data
        this.show = true
      })
    },
    props: {}
  }
</script>
<style scoped>
@font-face {
  font-family: 'hanziti';
  src: url('/Style/汉仪菱心体简.ttf');
}
.title_main {
  margin: 0 auto;
  color:white;
  font-family: 'hanziti';
  padding-right: 38px;
  padding-left: 54px;
  text-align: center;
  font-size: 24px;
}
  @media screen and (max-width: 1920px) {
    .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: 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%;
    }
  }
  @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;
      line-height: 18px;
      font-size: 12px;
      font-family: font-pingfang-medium;
    }

  }
</style>

