gas-injection/src/views/vent/home/configurable/gasInjection.vue

<template>
  <div class="company-home">
    <div v-if="menuName !== 'syq'" :class="menuName == 'zjm' ?  'vent-modal' : 'vent-modal-1'">
      <!-- <VentModal /> -->
    </div>
    <div v-if="menuName === 'syq'" class="syq-modal">
      <!-- <VentModal /> -->
    </div>
    <div class="top-bg">
      <div class="main-title">{{ mainTitle }}</div>
    </div>
    <div class="main-container">
      <div class="nav-cards">
        <navMenu @toggleMenu="toggleMenu"></navMenu>
      </div>
      <template v-if="menuName == 'zjm'">
        <div class="main-status">
          运行中
        </div>
        <ModuleGasInject v-for="cfg in configs" :key="cfg.deviceType" :show-style="cfg.showStyle"
          :module-data="cfg.moduleData" :module-name="cfg.moduleName" :device-type="cfg.deviceType" :data="data"
          :visible="true" :visible-detail="cfg.showDetail" />
      </template>
      <template v-else>
        <ModuleGasInject v-for="cfg in configs" :key="cfg.deviceType" :show-style="cfg.showStyle"
          :module-data="cfg.moduleData" :module-name="cfg.moduleName" :device-type="cfg.deviceType" :data="data"
          :visible="true" :visible-detail="cfg.showDetail" />
      </template>

    </div>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, onUnmounted, ref, computed } from 'vue';
import { useInitConfigs, useInitPage } from './hooks/useInit';
import ModuleGasInject from './components/ModuleGasInject.vue';
import navMenu from './components/gasInject/navMenu.vue'
// import { useRoute } from 'vue-router';
import VentModal from '/@/components/vent/micro/ventModal.vue';
import { getHomeData } from './configurable.api';
// import { useRoute } from 'vue-router';
import { testConfigGasInject, testConfigGasInjectZq, testConfigGasInjectCc, testConfigGasInjectSy } from './configurable.data';
const { configs, fetchConfigs } = useInitConfigs();
const { mainTitle, data, updateData } = useInitPage('注气驱替智能管控系统');
// const route = useRoute();
let interval: number | undefined;
let menuName = ref('zjm')

//选项切换
function toggleMenu(param) {
  menuName.value = param
  switch (menuName.value) {
    case 'zjm':
      configs.value = testConfigGasInject;
      break;
    case 'syq':
      configs.value = testConfigGasInjectSy;
      break;
    case 'zqxt':
      configs.value = testConfigGasInjectZq;
      break;
    case 'ccxt':
      configs.value = testConfigGasInjectCc
      break;
  }
}
onMounted(() => {
  // fetchConfigs('vent_new').then(() => {
  configs.value = testConfigGasInject;
  // updateEnhancedConfigs(configs.value);

  getHomeData({}).then(updateData);
  // });
  setInterval(() => {
    getHomeData({}).then(updateData);
  }, 60000);
});

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

@{theme-deepblue} {
  .company-home {
    --image-modal-top: url('@/assets/images/gasInjection/1-1.png');
    --image-modal-status: url('@/assets/images/gasInjection/3-1.png');
    --image-modal-center: url('@/assets/images/gasInjection/1-2.png');
  }
}

.company-home {
  --image-modal-top: url('@/assets/images/gasInjection/1-1.png');
  --image-modal-status: url('@/assets/images/gasInjection/3-1.png');
  --image-modal-center: url('@/assets/images/gasInjection/1-2.png');
  width: 100%;
  height: 100%;
  color: @white;
  position: relative;
  background: url('@/assets/images/vent/homeNew/bg.png') no-repeat center;

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

    .main-title {
      height: 66px;
      font-family: 'douyuFont';
      font-size: 20px;
      letter-spacing: 2px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .top-nav {
      position: absolute;
      top: 0;
      width: 880px;
      height: 100%;
      display: flex;
      justify-content: flex-start;
    }
  }

  .main-container {
    position: absolute;
    top: 66px;
    width: 100%;
    height: calc(100% - 66px);
    padding: 0px 10px;
    box-sizing: border-box;
  }

  .main-status {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 440px;
    height: 80px;
    font-size: 18px;
    font-family: 'douyuFont';
    margin: 10px 0px;
    background: var(--image-modal-status);
    background-size: 100% 100%;
  }


  .module-dropdown {
    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-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;
  }

  .nav-cards {
    position: absolute;
    left: 50%;
    top: 0px;
    transform: translate(-50%, 0);
    width: 691px;
    height: 58px;
    background: var(--image-modal-center) no-repeat;
    background-size: 100% 100%;
  }
}

:deep(.loading-box) {
  position: unset;
}

// 试验区模型区域样式
.syq-modal {
  position: absolute;
  top: 135px;
  right: 20px;
  width: calc(100% - 510px);
  height: 515px;
  background: url('@/assets/images/gasInjection/syq/modal-bg.png') no-repeat;
  background-size: 100% 100%;
}

.vent-modal {
  position: absolute;
  top: 134px;
  left: 50%;
  transform: translate(-50%, 0px);
  width: calc(100% - 920px);
  height: 505px;
  background: url(/src/assets/images/gasInjection/syq/modal-bg.png) no-repeat;
  background-size: 100% 100%;
}
.vent-modal-1 {
  position: absolute;
  top: 134px;
  left: 460px;
  width: calc(100% - 470px);
  height: 505px;
  background: url(/src/assets/images/gasInjection/syq/modal-bg.png) no-repeat;
  background-size: 100% 100%;
}
</style>