mky-vent-base/src/views/vent/home/configurable/green/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 fusionWarnGreen from './fusion-warn-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;
    case '多灾融合预警':
      currentComponent.value = fusionWarnGreen;
      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: calc(100% - 52px);
  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;
  }
}

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