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

<template>
  <div class="company-home">
    <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 :class="{ 'vent-modal': menuName == 'zjm', 'vent-modal-1': menuName == 'syq' || menuName == 'zqxt' || menuName == 'ccxt' }">
        <div class="modal-box">
          <Three3D ref="three3D" :modalName="'zhuqi'" class="modal-3d" @success="initModalAnimate" />
        </div>
      </div>
      <!-- <div v-if="menuName === 'syq'" class="syq-modal">
        </div> -->
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { onMounted, onUnmounted, ref, computed, nextTick } from 'vue';
  import { useInitConfigs, useInitPage } from './hooks/useInit';
  import ModuleGasInject from './components/ModuleGasInject.vue';
  import navMenu from './components/gasInject/navMenu.vue';
  import Three3D from './components/three3D.vue';
  import { getHomeData } from './configurable.api';
  // import { useRoute } from 'vue-router';
  import { testConfigGasInject, testConfigGasInjectZq, testConfigGasInjectCc, testConfigGasInjectSy } from './configurable.data';
  import { animateCamera } from '/@/utils/threejs/util';
  import { modalAnimate } from './threejs/gasInjection';
  // import * as dat from 'dat.gui';
  // const gui = new dat.GUI();
  // gui.domElement.style = 'position:absolute;top:100px;left:10px;z-index:99999999999999';

  const { configs, fetchConfigs } = useInitConfigs();
  const { mainTitle, data, updateData } = useInitPage('注气驱替智能管控系统');
  const three3D = ref(null);
  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;
    }

    // 刷新/
    nextTick(async () => {
      three3D.value?.resizeRenderer();
      const modal = three3D.value.getModal();
      if (modal) {
        const oldCamera = modal.camera;
        const oldCameraPosition = { x: oldCamera.position.x, y: oldCamera.position.y, z: oldCamera.position.z };
        if (param == 'zqxt') {
          const newP = { x: -26.587483577770445, y: -1.885170491810538, z: 39.104309663143255 };
          const newT = { x: 10.919881491980828, y: -4.7228274957026946, z: 38.87645926712004 };
          await animateCamera(oldCameraPosition, { x: 0, y: 0, z: 0 }, newP, newT, modal);
        } else if (param == 'zjm') {
          const newP = { x: -45.69228602978097, y: 49.59721939545517, z: 2.6454258202266985 };
          const newT = { x: 9.289291846942458, y: -21.608842010051386, z: 2.7675348357947906 };
          await animateCamera(oldCameraPosition, { x: 0, y: 0, z: 0 }, newP, newT, modal);
        } else {
          const newP = { x: -43.18945276107877, y: 40.44347648044, z: 0.059975838354020664 };
          const newT = { x: 6.431421158296241, y: -23.819993211059913, z: 0.17017939135402457 };
          await animateCamera(oldCameraPosition, { x: 0, y: 0, z: 0 }, newP, newT, modal);
        }
      }
    });
  }

  function initModalAnimate(modal) {
    console.log('初始化模型', modal);
    modal.isRender = true;

    modalAnimate(modal);
  }

  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;
    }

    .modal-box {
      width: calc(100% - 20px);
      height: calc(100% - 20px);
      position: relative;
      pointer-events: auto;
      margin: 10px;
    }

    .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;
  }

  .modal-box {
    width: 100%;
    height: 100%;
    position: relative;
    pointer-events: auto;
  }

  // 试验区模型区域样式
  .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: 70px;
    left: 50%;
    transform: translate(-50%, 0px);
    width: calc(100% - 920px);
    height: 500px;
    background: url(/src/assets/images/gasInjection/syq/modal-bg.png) no-repeat;
    background-size: 100% 100%;
    pointer-events: auto;
    // padding: 15px;
    box-sizing: border-box;
    overflow: hidden;
  }

  .vent-modal-1 {
    position: absolute;
    top: 70px;
    left: 460px;
    width: calc(100% - 470px);
    height: 500px;
    background: url(/src/assets/images/gasInjection/syq/modal-bg.png) no-repeat;
    background-size: 100% 100%;
    pointer-events: auto;
    padding: 10px 15px;
    box-sizing: border-box;
    overflow: hidden;
  }

  .modal-3d {
    width: 100%;
  }
</style>