<template>
  <div>
    <!--安检-->
    <plan-statistics class="border planstatistics"></plan-statistics>
    <!--安检状态统计-->
    <state-statistics class="border statestatistics"></state-statistics>
    <!--安检用户类型-->
    <customer-type class="border customertype"></customer-type>
    <!--安检员统计-->
    <task-statistics class="border taskstatistics"></task-statistics>
    <!--安检隐患分布图-->
    <latent-danger class="border latentdanger"></latent-danger>
  </div>
</template>

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

  .planstatistics {
    position: absolute;
    top:1%;
    left: 2%;
    width: 31%;
    height: 51%;
  }

  .statestatistics {
    position: absolute;
    top:54%;
    left: 2%;
    width: 31%;
    height: 40%;
  }

  .customertype {
    position: absolute;
    top: 54%;
    left: 67%;
    width: 31%;
    height: 40%;
  }

  .taskstatistics {
    position: absolute;
    top: 1%;
    left: 34%;
    width: 32%;
    height: 93%;
  }

  .latentdanger {
    position: absolute;
    top: 1%;
    left: 67%;
    width: 31%;
    height: 51%;
  }
</style>
