gasInjection-project/src/views/vent/home/configurable/ventSDG.vue

<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="company-home">
    <!-- <div style="width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 0">
      <VentModal />
    </div> -->
    <div class="bg" style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden; z-index: 0">
      <a-spin :spinning="loading" />
      <div id="balancePress3D" v-show="!loading" style="width: 100%; height: 100%; position: absolute; overflow: hidden"> </div>
      <!-- <div id="damper3DCSS" v-show="!loading" style="width: 100%; height: 100%; top:0; left: 0; position: absolute; overflow: hidden;">
      <div>
        <div ref="elementContent" class="elementContent">
          <p><span class="data-title">压力(Pa)：</span>{{selectData.frontRearDP}}</p>
          <p><span class="data-title">动力源压力(MPa)：</span>{{selectData.sourcePressure}}</p>
          <p><span class="data-title">故障诊断：</span>
            <i
              :class="{'state-icon': true, 'open': selectData.messageBoxStatus, 'close': !selectData.messageBoxStatus}"
            ></i>{{selectData.fault}}</p>
        </div>
      </div>
    </div> -->
    </div>
    <!-- 如果是有 deviceType、type 等 query，认为是详情页，不需要展示普通模块，只需要模型 -->
    <CustomHeader v-if="!route.query.embed">{{ mainTitle }}</CustomHeader>
    <!-- <a class="ant-dropdown-link module-dropdown" @click.prevent="showBar = !showBar">
        全矿井通风检测
        <CaretDownOutlined />
      </a> -->
    <!-- <MonitorBar v-if="showBar" class="module-monitor-bar" :is-data-real-time="isDataRealTime" :data="data" /> -->
    <!-- <a-dropdown class="module-dropdown" :class="{ 'module-dropdown-original': isOriginal }" :trigger="['click']" placement="bottomRight">
        <template #overlay>
        </template>
      </a-dropdown> -->

    <!-- 采用定位方式以避免出现各个模块隐藏时其他模块下移的问题 -->
    <template v-if="isOriginal">
      <ModuleOriginal
        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="showModules"
      />

      <div v-if="showModules" class="switch-button icon-goto right-475px bottom-300px" @click="showModules = false"></div>
      <div v-else class="switch-button icon-goto right-20px bottom-20px" @click="showModules = true"></div>
    </template>
    <template v-else-if="isCommon">
      <ModuleCommon
        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"
      />
    </template>
    <template v-else>
      <!-- 下面是正常展示的各新版模块 -->
      <ModuleEnhanced
        v-for="cfg in enhancedConfigs"
        :key="cfg.deviceType"
        :visible="cfg.visible"
        :show-style="cfg.showStyle"
        :module-data="cfg.moduleData"
        :module-name="cfg.moduleName"
        :device-type="cfg.deviceType"
        :data="data"
        @close="cfg.visible = false"
      />
      <!-- 下面是用于呼出已隐藏的模块的按钮 -->
      <div class="flex pos-absolute bottom-10px left-60px z-3">
        <div v-for="(item, i) in hiddenList" :key="`vvhchg${i}`">
          <AButton class="module-trigger-button" @click="item.visible = true">{{ item.moduleName }}</AButton>
        </div>
      </div>
    </template>
    <!-- <div
        v-if="sysDataType === 'all'"
        :class="{ 'realtime-mode': isDataRealTime }"
        alt="切换数据模式"
        class="switch-button report-mode right-525px"
        @click="switchDataMode"
      ></div> -->
  </div>
</template>
<script lang="ts" setup>
  import CustomHeader from '/@/components/vent/customHeader.vue';
  import { onMounted, onUnmounted, ref, watch } from 'vue';
  // import { CaretDownOutlined } from '@ant-design/icons-vue';
  // import MonitorBar from './components/MonitorBar.vue';
  import { useInitConfigs, useInitPage } from './hooks/useInit';
  import ModuleEnhanced from './components/ModuleEnhanced.vue';
  import ModuleOriginal from './components/ModuleOriginal.vue';
  import ModuleCommon from './components/ModuleCommon.vue';
  // import { useRoute } from 'vue-router';
  // import VentModal from '/@/components/vent/micro/ventModal.vue';
  import { mountedThree, destroy, setModelType, play } from '/@/views/vent/monitorManager/balancePressMonitor/balancePress.threejs';
  import { list } from './configurable.api';
  import { useRoute } from 'vue-router';
  import { useGlobSetting } from '/@/hooks/setting';
  // import { testConfigSDG } from './configurable.data.wz';

  const { /* sysDataType = 'monitor', */ title = '三道沟煤矿均压综采面智能监测与动态调控', sysOrgCode } = useGlobSetting();
  const { configs, isOriginal, isCommon, fetchConfigs } = useInitConfigs();
  const { enhancedConfigs, hiddenList, data, updateData, updateEnhancedConfigs, mainTitle } = useInitPage(title);
  const route = useRoute();
  // const router = useRouter();
  // const isDataRealTime = ref(sysDataType === 'monitor');
  // const showBar = ref(true);
  const loading = ref(false);
  const showModules = ref(true);
  let interval: number | undefined;

  // function switchDataMode() {
  //   isDataRealTime.value = !isDataRealTime.value;
  //   refresh();
  // }

  function refresh() {
    // fetchConfigs(isDataRealTime.value ? 'vent_realtime' : 'vent').then(() => {
    fetchConfigs('vent').then(() => {
      // configs.value = testConfigSDG;
      updateEnhancedConfigs(configs.value);

      // 测风装置	windrect
      // 自动风窗	window
      // 自动风门	gate
      // 传感器	modelsensor
      // 局部通风机	fanlocal
      // 主通风机	fanmain
      // 密闭	obfurage
      // 安全监控	safetymonitor
      // 光纤测温	fiber
      // 束管监测	bundletube
      // 制氮	nitrogen
      // 制浆	pulping
      // 喷淋	spray
      // 喷粉	dustdev
      // 喷雾设备	atomizing
      // 除尘风机	dedustefan
      // 粉尘传感器	dustsensor
      // 转载点	transferpoint
      // 瓦斯抽采泵	pump
      // 粉尘	dusting
      // 瓦斯监测	gasmonitor
      // 球阀	ballvalve
      // 压风机	forcFan
      // 瓦斯巡检	gaspatrol
      // 防火门	firedoor
      // 隔爆设施	explosionProof
      // 瓦斯管道阀门	gasvalve
      list({
        types: configs.value
          .filter((e) => e.deviceType)
          .map((e) => e.deviceType)
          .join(','),
      }).then(updateData);
    });
  }

  function initInterval() {
    setInterval(() => {
      list({
        types: configs.value
          .filter((e) => e.deviceType)
          .map((e) => e.deviceType)
          .join(','),
      }).then(updateData);
    }, 60000);
  }

  // function goMicroApp() {
  //   router.push({
  //     path: route.path,
  //     query: {
  //       ...route.query,
  //       type: 'model3D',
  //       deviceType: 'model3D',
  //     },
  //   });
  // }

  watch(
    () => route.query,
    () => {
      if (route.query.deviceType) {
        // 仅需要展示子应用，模拟 unmounted
        clearInterval(interval);
      } else {
        // 模拟 mounted
        refresh();
        initInterval();
      }
    }
  );

  onMounted(() => {
    refresh();
    initInterval();

    mountedThree().then(async () => {
      if (sysOrgCode === 'jsnyspmy') {
        await setModelType('balancePressSp'); //balancePressBase
      } else {
        await setModelType('balancePressTun'); //balancePressBase
      }
      loading.value = false;
      play('startSmoke', 'top', 30, 'open', 0);
    });
  });

  onUnmounted(() => {
    destroy();
    clearInterval(interval);
  });
</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: url('@/assets/images/home-container/configurable/firehome/bg.png') no-repeat center;

    .top-bg {
      width: 100%;
      height: 56px;
      background: var(--image-modal-top) 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 {
    //   position: absolute;
    //   width: 450px;
    //   height: 280px;
    //   left: 0;
    // }
    // .module-right {
    //   position: absolute;
    //   width: 450px;
    //   height: 280px;
    //   right: 0;
    // }
    // .module-bottom {
    //   position: absolute;
    //   width: 1000px;
    //   height: 280px;
    // }
    .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;
    }

    .switch-button {
      width: 34px;
      height: 34px;
      position: absolute;
      // right: 5px;
      // bottom: 300px;
      z-index: 5;
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
    .report-mode {
      background-image: var(--image-monitor-doc);
    }
    .realtime-mode {
      background-image: var(--image-monitor-realtime);
    }
    .icon-goto {
      background-image: var(--image-monitor-goto);
    }

    .module-monitor-bar {
      position: absolute;
      top: 100px;
      width: 1000px;
      height: 200px;
      left: calc(50% - 500px);
    }
  }
  :deep(.loading-box) {
    position: unset;
  }
</style>