<!--
 * @Description: 珠海三溪小镇驾驶舱首页
 * @Author: 王晓颖
 * @Date: 2021-07-13 15:18:56
 -->
<template>
  <common-layout1 class="layout" :loading="loading">
    <top-header slot="title" title="珠海市香洲区指挥小镇指挥中心"/>
    <!--左-->
    <dv-border-box-13 slot="left">
      <div class="left-container">
        <div class="left">
          <statistic-count/>
        </div>
        <div class="left">
          <biz-statistics/>
        </div>
        <div class="left">
          <lamp-alarm-history/>
        </div>
      </div>
    </dv-border-box-13>
    <!--中-->
    <dv-border-box-13 slot="middle">
      <amap/>
    </dv-border-box-13>
    <!--右-->
    <dv-border-box-13 slot="right">
      <div class="right-container">
        <div class="right">
          <pipe-safety/>
        </div>
        <div class="right">
          <device-alarm-rank/>
        </div>
        <div class="right">
          <device-alarm-history/>
        </div>
      </div>
    </dv-border-box-13>
  </common-layout1>
</template>

<script>
  import CommonLayout1 from "../layout/commonLayout1"
  import TopHeader from "./mainComponents/topHeader"
  import StatisticCount from "./mainComponents/statisticCount";
  import BizStatistics from "./mainComponents/bizStatistic";
  import Amap from "../../components/amap/amap";
  import DeviceAlarmRank from "./mainComponents/deviceAlarmRank";
  import DeviceAlarmHistory from "./mainComponents/deviceAlarmHistory";
  import PipeSafety from "./mainComponents/pipeSafety";
  import LampAlarmHistory from "./mainComponents/lampAlarmHistory";
  export default {
    name: "mainDashboard",
    components: {
      LampAlarmHistory,
      PipeSafety,
      DeviceAlarmHistory,
      DeviceAlarmRank, Amap, BizStatistics, StatisticCount, TopHeader, CommonLayout1},
    data(){
      return {
        loading: false
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.layout{
  background-image: url("../../assets/img/global/pageBg.png");
  background-size: cover;
  background-position: center center;
  .left-container{
    width: 100%;
    height:100%;
    display: flex;
    padding: 0.1rem;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    .left{
      height:33%;
      width:100%;
    }
  }
  .right-container{
    width: 100%;
    height:100%;
    display: flex;
    padding: 0.1rem;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    .right{
      height:33%;
      width:100%;
    }
  }
}
</style>