<template>
  <div class="flex w-full h-full driver">
    <!-- <Map></Map> -->
    <!-- <Equipment></Equipment>
    <IndustryDevelopment></IndustryDevelopment>
    <StaticStatistics></StaticStatistics>
    <WayFilter></WayFilter>

    <EquipmentInfo></EquipmentInfo>
    <CameraIcon></CameraIcon> -->
    <LayerContrl></LayerContrl>
  </div>
</template>
<script>
import { ref, onMounted } from 'vue';
import Equipment from "./component/Equipment/equipment.vue";
import StaticStatistics from "./component/staticStatistics/staticStatistic.vue";
import VideoDatas from "./component/videoDatas/videoData.vue";
import IndustryDevelopment from "./component/IndustryDevelopment/industryDevelopment.vue";
import WayFilter from "@/components/wayFilter/index.vue";
import Map from "./component/Map/index.vue";
// import LayerContrl from "./component/LayerContrl/layercontrl.vue";

import EquipmentInfo from "./component/equipmentInfo/index.vue";
import CameraIcon from "./component/cameraIcon/cameraIcon.vue";

import LayerContrl from "./component/NewLayerContrl/index.vue";
import { mapState } from 'vuex';
export default {
  computed: {
    ...mapState(['appName'])
  },
  components: {
    // IndustryDevelopment,
    // VideoDatas,
    // Equipment,
    // StaticStatistics,
    // WayFilter,
    // EquipmentInfo,
    // CameraIcon,
    Map,
    LayerContrl,

  },
  setup() {
    const dataEvents = ref(null)
    onMounted(async () => {
      //  const data =  await getDataEvents()
      //  console.log('data=>', data);
    })

  }
};
</script>
<style lang="postcss" scoped>
.driver {
  position: relative;
  padding-top: 50px;
  /* background: url('../../assets/images/operationOverviewMap.png') no-repeat; */
  background: url(/src/assets/images/app-bg.jpg) no-repeat;
  background-size: 100%,100%;
}
::v-deep(.el-select-dropdown__item) {
  color: #fff;
  &:hover {
    background: #1f659d;
  }
  &.selected {
    color: #409eff;
  }
}
::v-deep(.el-dialog__header) {
  background: #213355;
}
::v-deep(.el-dialog__title) {
  color: #aaeaf1;
}
::v-deep(.el-dialog__body) {
  color: #fff;
  background: #0c1d3c;
}
::v-deep(.el-loading-spinner) {
  width: 40px;
  left: 0;
  right: 0;
  margin: auto;
}
::v-deep(.el-loading-mask) {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}
::v-deep(.el-pager li) {
  background-color: transparent !important;
  color: #07ffed;
}
::v-deep(.el-pager li.active) {
  color: #fff;
  border: 1px solid #07ffed;
}
::v-deep(.el-pagination__jump) {
  color: #07ffed;
}
::v-deep(.el-pagination .btn-prev) {
  background-color: transparent !important;
  color: #07ffed;
}
::v-deep(.el-pagination .btn-next) {
  background-color: transparent !important;
  color: #07ffed;
}
::v-deep(.el-pagination__total) {
  color: #07ffed;
}
</style>
