mky-vent-base/src/views/vent/home/configurable/index.vue

<template>
  <div class="company-home">
    <div class="top-bg">
      <div class="main-title">{{ mainTitle }}</div>
    </div>
    <a-dropdown class="module-dropdown" :trigger="['click']" placement="bottomRight">
      <a class="ant-dropdown-link" @click.prevent>
        全矿井通风检测
        <CaretDownOutlined />
      </a>
      <template #overlay>
        <MonitorCenter />
      </template>
    </a-dropdown>
    <div class="module-left-wrapper">
      <ModuleLeft class="module-left" title="局部通风机监测">
        <SubVentilate />
      </ModuleLeft>
      <ModuleLeft class="module-left" title="主通风机监测">
        <Ventilate />
      </ModuleLeft>
      <ModuleLeft class="module-left" title="通风设施远程控制">
        <VentilateControl />
      </ModuleLeft>
    </div>
    <div class="module-bottom-wrapper">
      <ModuleBottom class="module-bottom" title="矿井风量实时监测">
        <AirVolumeMonitor />
      </ModuleBottom>
    </div>
    <div class="module-right-wrapper">
      <ModuleRight class="module-right" title="通风系统监测与分析">
        <VentilateAnalysis />
      </ModuleRight>
      <ModuleRight class="module-right" title="采煤工作面智能管控">
        <WorkSurface />
      </ModuleRight>
      <ModuleRight class="module-right" title="设备告警">
        <DeviceWarning />
      </ModuleRight>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { computed, ref } from 'vue';
  import ModuleLeft from './components/moduleLeft.vue';
  import ModuleRight from './components/moduleRight.vue';
  import ModuleBottom from './components/moduleBottom.vue';
  import SubVentilate from './components/SubVentilate.vue';
  import Ventilate from './components/Ventilate.vue';
  import { CaretDownOutlined } from '@ant-design/icons-vue';
  import VentilateControl from './components/VentilateControl.vue';
  import AirVolumeMonitor from './components/AirVolumeMonitor.vue';
  import VentilateAnalysis from './components/VentilateAnalysis.vue';
  import WorkSurface from './components/WorkSurface.vue';
  import DeviceWarning from './components/DeviceWarning.vue';
  import MonitorCenter from './components/MonitorCenter.vue';
  // import mapComponent from './components/3Dmap/index.vue';

  const mainTitle = ref('智能通风管控系统');
</script>
<style lang="less" scoped>
  @font-face {
    font-family: 'douyuFont';
    src: url('../../../../assets/font/douyuFont.otf');
  }

  .company-home {
    width: 100%;
    height: 100%;
    color: @white;
    position: relative;

    .top-bg {
      width: 100%;
      height: 56px;
      background: url('@/assets/images/home-container/configurable/main_title_bg.png') no-repeat center;
      position: absolute;
      z-index: 1;
      .main-title {
        height: 56px;
        font-family: 'douyuFont';
        font-size: 20px;
        letter-spacing: 2px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }

    .module-left-wrapper {
      position: absolute;
      top: 50px;
      left: 0;

      .module-left {
        width: 450px;
        height: 280px;
        margin-top: 10px;
      }
    }
    .module-right-wrapper {
      position: absolute;
      top: 50px;
      right: 0;

      .module-right {
        width: 450px;
        height: 280px;
        margin-top: 10px;
      }
    }

    .module-bottom-wrapper {
      position: absolute;
      bottom: 10px;
      left: 460px;

      .module-bottom {
        width: 1000px;
        height: 280px;
      }
    }
    .module-dropdown {
      padding: 10px;
      background-image: linear-gradient(to bottom, #036886, #072a40);
      border-bottom: 2px solid #3df6ff;
      color: #fff;
      position: absolute;
      top: 70px;
      right: 460px;
    }
  }
</style>