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

<template>
  <div class="company-home">
    <!-- 如果是有 deviceType、type 等 query，认为是详情页，不需要展示普通模块，只需要模型 -->
    <template v-if="!route.query.deviceType">
      <div v-if="!route.query.embed" class="top-bg">
        <greenNav :Title="mainTitle" :activeIndex="activeIndex" @menuToggle="menuToggle" />
      </div>

      <div class="main-container">
        <component :is="currentComponent" />
      </div>
    </template>
  </div>
</template>
<script lang="ts" setup>
  import { onMounted, onUnmounted, ref } from 'vue';
  import { useInitPage } from './hooks/useInit';
  import fireGreen from './fire-green.vue';
  import dustGreen from './dust-green.vue';
  import commonGreen from './common-green.vue';
  import greenNav from './components/green-nav.vue';
  import { useRoute } from 'vue-router';
  import { useGlobSetting } from '/@/hooks/setting';

  //当前激活menu索引
  let activeIndex = ref(0);
  //当前加载menu组件
  let currentComponent = ref<any>(commonGreen);
  const { title = '智能通风管控系统' } = useGlobSetting();
  const route = useRoute();

  const { mainTitle } = useInitPage(title);

  //menu切换，界面跳转
  function menuToggle(item, index) {
    activeIndex.value = index;
    switch (item.name) {
      case '灾害预警':
        currentComponent.value = commonGreen;
        break;
      case '火灾监控':
        currentComponent.value = fireGreen;
        break;
      case '粉尘监控':
        currentComponent.value = dustGreen;
        break;
    }
  }

  onMounted(() => {});

  onUnmounted(() => {});
</script>
<style lang="less" scoped>
  @import '/@/design/theme.less';

  @font-face {
    font-family: 'douyuFont';
    src: url('/@/assets/font/douyuFont.otf');
  }

  @{theme-deepblue} {
    .company-home {
      --image-modal-top: url('/@/assets/images/themify/deepblue/vent/home/modal-top.png');
    }
  }

  .company-home {
    --image-modal-top: url('/@/assets/images/vent/home/modal-top.png');
    --image-monitor-realtime: url('/@/assets/images/company/monitor-realtime.png');
    --image-monitor-doc: url('/@/assets/images/company/monitor-doc.png');
    --image-monitor-goto: url('/@/assets/images/company/monitor-goto.png');

    width: 100%;
    height: 100%;
    color: @white;
    position: relative;
    background: #181b24;

    .top-bg {
      width: 100%;
      height: 96px;
      // background: var(--image-modal-top) no-repeat center;
      position: absolute;
      z-index: 1;
    }

    .main-container {
      position: absolute;
      top: 96px;
      width: calc(100% - 30px);
      height: calc(100% - 96px);
      margin: 0px 15px;
      box-sizing: border-box;
    }

    .module-dropdown {
      padding: 5px;
      background-image: @vent-configurable-dropdown;
      border-bottom: 2px solid @vent-configurable-home-light-border;
      color: @vent-font-color;
      position: absolute;
      top: 60px;
      right: 480px;
    }

    .module-dropdown-original {
      padding: 10px;
      background-image: @vent-configurable-dropdown;
      border-bottom: 2px solid @vent-configurable-home-light-border;
      color: @vent-font-color;
      position: absolute;
      top: 70px;
      right: 460px;
    }

    .module-trigger-button {
      color: @vent-font-color;
      background-image: @vent-configurable-dropdown;
      border: none;
      border-bottom: 2px solid @vent-configurable-home-light-border;
    }

    .realtime-mode {
      background-image: var(--image-monitor-realtime);
    }

    .module-monitor-bar {
      position: absolute;
      top: 100px;
      width: 1000px;
      height: 200px;
      left: calc(50% - 500px);
    }
  }

  :deep(.loading-box) {
    position: unset;
  }
</style>