<template>
  <div>

    <!--用户-->
    <user-module class="border user" v-bind:listenheight="listenheight"></user-module>
    <!--供售气量-->
    <gasvalue class="border gasvalue" v-bind:listenheight="listenheight"></gasvalue>
    <!--客服-->
    <call-center class="border callcenter" v-bind:listenheight="listenheight"></call-center>
    <!--维修-->
    <call-fix class="border callfix" v-bind:listenheight="listenheight"></call-fix>
    <!--安检-->
    <safe-check class="border safe" v-bind:listenheight="listenheight"></safe-check>
    <!--管网-->
    <net-work class="border network" v-bind:listenheight="listenheight"></net-work>
    <!--呼叫-->
    <call-statistics class="border callstatic" v-bind:listenheight="listenheight"></call-statistics>
    <!--监控-->
    <monitor class="border monitor" v-bind:listenheight="listenheight"></monitor>h
    <check-family>aaa</check-family>
  </div>
</template>

<script>
  export default {
    name: "home",
    props: {
      listenheight: String,
    },
    data() {
      return {
        loaddata: 0,
      }
    },
    watch: {
      'loaddata': {
        deep: true,
        handler() {
	console.log(this.loaddata,'加载次数')
          if (this.loaddata > 5) {
            this.$parent.initdatashow = false
          }
        },
        immediate: true
      }
    },
  }
</script>

<style scoped>
  /*小模块边框*/
  .border {
    padding-top: 0.4%;
    background: linear-gradient(#6fd9d0, #6fd9d0) left top,
    linear-gradient(#6fd9d0, #6fd9d0) left top,
    linear-gradient(#6fd9d0, #6fd9d0) right top,
    linear-gradient(#6fd9d0, #6fd9d0) right top,
    linear-gradient(#6fd9d0, #6fd9d0) left bottom,
    linear-gradient(#6fd9d0, #6fd9d0) left bottom,
    linear-gradient(#6fd9d0, #6fd9d0) right bottom,
    linear-gradient(#6fd9d0, #6fd9d0) right bottom;
    background-repeat: no-repeat;
    background-size: 1.5px 11px, 11px 1.5px;
    background-color: rgba(1, 207, 242, 0.05);
  }

  /*用户模块样式*/
  .user {
    position: absolute;
    top: 5%;
    left: 2%;
    width: 21.2%;
    height: 41.5%;
  }

  /*供销气量模块样式*/
  .gasvalue {
    top: 5%;
    left: 23.8%;
    position: absolute;
    width: 21.15%;
    height: 41.5%;
  }

  /*客服模块样式*/
  .callcenter {
    top: 5%;
    left: 45.6%;
    position: absolute;
    width: 25%;
    height: 41.5%;
  }

  /*维修模块样式*/
  .callfix {
    top: 5%;
    left: 71.3%;
    position: absolute;
    width: 26.65%;
    height: 41.5%;
  }

  /*安检模块样式*/
  .safe {
    position: absolute;
    top: 48%;
    left: 2%;
    width: 21.2%;
    height: 41.5%;
  }

  /*管网模块样式*/
  .network {
    position: absolute;
    top: 48%;
    left: 23.8%;
    width: 21.15%;
    height: 41.5%;
  }

  /*呼叫模块样式*/
  .callstatic {
    position: absolute;
    top: 48%;
    left: 45.5%;
    width: 25%;
    height: 41.5%;
  }

  /*监控模块样式*/
  .monitor {
    position: absolute;
    top: 48%;
    left: 71.2%;
    width: 26.65%;
    height: 41.5%;
  }
</style>
