<template>
  <div class="container scrollbar">
    <MonitoringTop />
    <el-row :gutter="20">
      <el-col class="elcol" :span="16" :xs="24" :sm="24" :md="24" :lg="16" :xl="16">
        <DeviceHistory />
      </el-col>
      <el-col class="elcol" :span="8" :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
        <OnLineStatistics />
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col class="elcol" :span="16" :xs="24" :sm="24" :md="24" :lg="16" :xl="16">
        <EmergencyList />
      </el-col>
      <el-col class="elcol" :span="8" :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
        <StatisticsWarning />
      </el-col>
    </el-row>
  </div>
</template>
<script lang="ts" setup>
import MonitoringTop from "./monitoringTop.vue";
import DeviceHistory from "./deviceHistory.vue";
import OnLineStatistics from "./onLineStatistics.vue";
import StatisticsWarning from "./statisticsWarning.vue";
import EmergencyList from "./emergencyList.vue";
import { MapCustom } from "@/utils/mapCustom";
import { onMounted } from "vue";

onMounted(() => {
  try {
    new MapCustom({ dom: "mapcontainer" });
  } catch (error) {}
});
</script>
<style lang="less" scoped>
.elcol {
  height: 380px;
  margin-bottom: 20px;
}
</style>
