<template>
  <div class="app-Main">

    <div class="app-header">
        <appHeader class="u-appHeader"></appHeader>
    </div>
    <div class="app-body">
      <el-row :gutter="20" style="height:100%;">
        <!--Left-->
        <el-col :span="6" class="aside-padding">
          <div class="grid-content bg-purple">
            <!--<weather class="u-weather"></weather>-->
            <!--<weatherForecast class="u-weatherForecast u-marginTop"></weatherForecast>-->
            <memberNum class="u-memberNum"></memberNum>
            <tollman class="u-tollman u-marginTop"></tollman>
            <device class="u-device u-marginTop"></device>
          </div>
        </el-col>
        <!--Middle-->
        <el-col :span="12" class="middle-padding">
          <div class="grid-content bg-purple">
            <!--<v-map></v-map>-->
            <chinaMap ref="chinaMap" class="u-chinaMap"></chinaMap>
            <weekAndDay class="u-weekAndDay u-marginTop"></weekAndDay>
          </div>
        </el-col>
        <!--Right-->
        <el-col :span="6" class="aside-padding">
          <div class="grid-content bg-purple">
            <!--<videoMonitor class="u-videoMonitor"></videoMonitor>-->
            <incomeOverview class="u-incomeOverview"></incomeOverview>
            <berth class="u-berth u-marginTop"></berth>
            <orderMessage class="u-orderMessage u-marginTop"></orderMessage>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
  import weatherForecast from '../weatherForecast/index'
  import videoMonitor from '../videoMonitor/index'
  import weather from '../weather/index'
  //import map from '../map/index'
  import appHeader from '../appHeader/index'
  /*收入概况、泊位、订单消息*/
  import incomeOverview from '../incomeOverview/index'
  import berth from '../berth/index'
  import orderMessage from '../orderMessage/index'
  /*会员数、收费员、设备*/
  import memberNum from '../memberNum/index'
  import tollman from '../tollman/index'
  import device from '../device/index'
  /*地图、周出场统计、今日车流量*/
  import chinaMap from '../chinaMap/index'
  import weekAndDay from '../weekAndDay/index'
    export default {
      name: "aheader",
      components: {
        //'v-map':map,
        weather,
        weatherForecast,
        videoMonitor,
        appHeader,
        /*收入概况、泊位、订单消息*/
        incomeOverview,berth,orderMessage,
        /*会员数、收费员、设备*/
        memberNum,tollman,device,
        /*地图、周出场统计、今日车流量*/
        chinaMap,weekAndDay
      },
      mounted() {
        //this.createLine();
        //debugger;
        const _self=this;
        console.log("config:--------"+ appConfig.rootURL);
        //测试调用子组件
//        setTimeout(function(){
//          _self.$refs.chinaMap.setParkTotal();
//        },5000);
      },
      methods: {

      }
    }
</script>

<style  lang="scss" rel="stylesheet/scss" scoped>
  .app-Main {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;

    /*background url('../../assets/bg.jpg');*/
    /*background-size 100% 100%*/

    /*行*/
  .app-header{
    height: 65px;
    border:0px solid red;
    position: relative;
  }
  .app-body{
    height: -webkit-calc(100% - 65px);
    height: -moz-calc(100% - 65px);
    height: calc(100% - 65px);
    border:0px solid green;
  }
    .el-row ,.grid-content{
      height: 100%;
    }
  .el-row{
    padding:5px;
    padding-top: 0px;
  }
    /*列*/
    .el-col {
      border-radius: 4px;
      height: 100%;
    }
    .aside-padding{
      padding-left:0px !important;
      padding-right:0px !important;
      padding: 5px 0 5px 0px;
    }
  .middle-padding{
    padding: 5px;
  }

    .el-row{
      margin-left:0px !important;
      margin-right:0px !important;
    }
    .bg-purple {
      background: transparent;
      border: 0px solid #74c7d9;
    }
    .grid-content {
      border-radius: 4px;
      min-height: 500px;
    }

    .u-marginTop{
      margin-top: 10px;
    }
    /*气象预警*/
    .u-weather{
      height: 30%;
    }
    /*气象预报*/
    .u-weatherForecast{
      height: 30%;
    }
    /*果园监控*/
    .u-videoMonitor{
      height: 30%;
    }
    /*Head头*/
    .u-appHeader{
      width: 100%;
      height:100%;
    }
  /*会员数、收费员、设备*/
  .u-memberNum,.u-tollman,.u-device{
    height: -webkit-calc((100% - 20px)/3);
    height: -moz-calc((100% - 20px)/3);
    height: calc((100% - 20px)/3);
  }
    /*收入概况、泊位、订单消息*/
  .u-incomeOverview,.u-berth,.u-orderMessage{
      height: -webkit-calc((100% - 20px)/3);
      height: -moz-calc((100% - 20px)/3);
      height: calc((100% - 20px)/3);
    }
  /*全国地图、周出场今日车流量*/
  .u-chinaMap{
    height: -webkit-calc(66.66% - 5px);
    height: -moz-calc(66.66% - 5px);
    height: calc(66.66% - 5px);
  }
  .u-weekAndDay{
    height: -webkit-calc(33.33% - 5px);
    height: -moz-calc(33.33% - 5px);
    height: calc(33.33% - 5px);

    position: relative;
    background: url(../../images/com/cardBorder2.svg) no-repeat;
    background-size: 100% 100%;
  }
    /*收入概况*/
    .u-incomeOverview{

    }
    /*泊位*/
    .u-berth{

    }
    /*订单消息*/
    .u-orderMessage{

    }
  }
</style>


