<template>
  <div>
    <!--管网建设-->
     <net-info class="border lineinspection"></net-info>
    <!--管网运行-->
    <single-bar-line class="border gasvalue"></single-bar-line>
    <!--巡线-->
      <trend class="border construction"></trend>
    <!--管网隐患-->
    <weather class="border netdanger"></weather>
    <guanwang  class="border-1 networkmap"></guanwang>
  </div>
</template>

<script>
  export default {
    name: "NetHome",
    data() {
      return {
        loaddata: 0
      }
    },
    watch: {
      'loaddata': {
        deep: true,
        handler() {
	       console.log(this.loaddata,'加载次数')
          if (this.loaddata > 0) {
            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);
  }
  .border-1 {

    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);
  }
  /*管网建设*/
  .construction {
    position: absolute;
    top:1%;
    left: 2%;
    width: 28%;
    height: 46%;
  }
  /*管网运行*/
  .gasvalue {
    position: absolute;
    top: 1%;
    left: 74%;
    width: 24%;
    height: 46%;
  }
  /*巡线*/
  .lineinspection {
    position: absolute;
    top: 49%;
    left: 2%;
    width: 28%;
    height: 45%;
  }
  /*管网隐患*/
  .netdanger {
    position: absolute;
    top: 49%;
    left: 74%;
    width: 24%;
    height: 45%;
  }
  .networkmap{
    position: absolute;
    top: 1%;
    left: 31%;
    width: 42%;
    height: 93%;
  }
</style>
