<template>
  <div>
    <!--管网建设-->
    <net-work-one class="border construction"></net-work-one>
    <!--管网运行-->
    <supply-gas class="border gasvalue"></supply-gas>
    <!--巡线-->
    <line-inspection class="border lineinspection"></line-inspection>
    <!--管网隐患-->
    <net-danger class="border netdanger"></net-danger>
    <net-work-map  class="border-1 networkmap"></net-work-map>
  </div>
</template>

<script>
  import NetWorkMap from "./NetWorkMap";
  export default {
    name: "NetHome",
    components: {NetWorkMap},
    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>
