mky-vent-base/src/views/vent/gas/gasAssessment/index.vue

<template>
  <CustomHeader
    :fieldNames="{ label: 'systemname', value: 'id', options: 'children' }"
    :options="options"
    @change="getSelectRow"
    :optionValue="optionValue"
    >瓦斯抽采达标评判</CustomHeader
  >
  <div class="bg" style="">
    <div id="workFace3D" style="width: 100%; height: 100%; position: absolute; overflow: hidden; z-index: 1; top: 0; pointer-events: auto"> </div>
    <div
      id="workFace3DCSS"
      v-show="pageType == 'workFace'"
      class="threejs-Object-CSS"
      style="width: 100%; height: 100%; position: absolute; pointer-events: none; overflow: hidden; z-index: 1; top: 0"
    >
    </div>
  </div>
  <div class="modal-monitor vent-flex-row" style="display: none">
    <div v-for="groupNum in monitorDataGroupNum" :id="'gasUnitBox' + groupNum" :key="groupNum" style="margin: 0 5px">
      <FourBorderBg class="four-border-bg">
        <div class="title">抽采单元{{ groupNum }}</div>
        <div class="monitor-item" v-for="(gasUnit, index) in gasUnitDetail" :key="index">
          <span class="monitor-title">{{ gasUnit.title }}:</span>
          <span class="monitor-val">
            <span class="val">
              {{ selectData[groupNum - 1] && selectData[groupNum - 1][gasUnit.code] ? selectData[groupNum - 1][gasUnit.code] : '-' }}
            </span>
          </span>
        </div>
      </FourBorderBg>
    </div>
  </div>
  <template v-if="activeKey == 'gasAssessment'">
    <WorkFace class="point-event" v-if="pageType == 'workFace'" />
    <gasUnit class="point-event" v-if="pageType == 'gasUnit'" />
  </template>
  <template v-if="activeKey == 'gasEcharts'">
    <GasEcharts class="point-event" />
  </template>
  <template v-if="activeKey == 'gasControl'">
    <GasControl class="point-event" />
  </template>
  <template v-if="activeKey == 'gasPiping'">
    <GasPiping class="point-event" />
  </template>
  <template v-if="activeKey == 'gasVideo'">
    <GasVideo class="point-event" />
  </template>
  <BottomMenu :navList="monitorNav" @change="changeActive" />
</template>

<script setup lang="ts">
  import FourBorderBg from '/@/components/vent/fourBorderBg.vue';
  import { onBeforeMount, ref, onMounted, onUnmounted, nextTick, watch } from 'vue';
  import CustomHeader from '/@/components/vent/customHeader.vue';
  import { gasUnitDetail, monitorNav } from './gasAssessment.data';
  import { mountedThree, destroy, setModelType, setCss3D } from './threejs/gasAssessmen.threejs';
  import { useSystemSelect } from '/@/hooks/vent/useSystemSelect';
  import gasUnit from './components/gasUnit.vue';
  import GasEcharts from './components/gasEcharts.vue';
  import GasControl from './components/gasControl.vue';
  import GasPiping from './components/gasPipingEcharts.vue';
  import WorkFace from './components/workFace.vue';
  import GasVideo from './components/gasVideo.vue';
  import BottomMenu from '/@/views/vent/comment/components/bottomMenu.vue';

  const activeKey = ref('gasAssessment');
  const loading = ref(false);
  const dataSource = ref({});
  const pageType = ref('workFace');
  const activeUnitId = ref('');

  function changeActive(activeValue) {
    activeKey.value = activeValue;
  }

  // 获取模型类型
  const changeModalType = (currentData) => {
    gasUnitNum.value = 4;
    setModelType(modalType, gasUnitNum.value);
  };

  const { options, optionValue, deviceActive, getSelectRow, getSysDataSource, getDeviceList } = useSystemSelect(
    'sys_surface_caimei',
    changeModalType
  );

  const gasUnitNum = ref(5);
  let modalType = 'workFace1';

  // // 监测数据
  const selectData = ref([]);
  const monitorDataGroupNum = ref(5);
  // // https获取监测数据
  let timer: null | NodeJS.Timeout = null;
  function getMonitor(flag?) {
    if (Object.prototype.toString.call(timer) === '[object Null]') {
      timer = setTimeout(
        async () => {
          if (deviceActive.value) {
            await getDeviceList();
          }
          if (timer) {
            timer = null;
          }
          await getMonitor();
          loading.value = false;
        },
        flag ? 0 : 1000
      );
    }
  }

  watch(
    pageType,
    (newVal, oldVal) => {
      console.log('页面类型', newVal);
      if (newVal == 'gasUnit') {
      } else if (newVal == 'workFace') {
      }
    },
    {}
  );

  onBeforeMount(() => {});

  onMounted(async () => {
    loading.value = true;

    timer = null;

    mountedThree(pageType, activeUnitId).then(async () => {
      // gasUnitNum.value = Math.ceil(Math.random() * 10)
      gasUnitNum.value = 4;
      loading.value = false;
      await getSysDataSource();
      nextTick(async () => {
        await getMonitor(true);
        setCss3D();
      });
    });
  });
  onUnmounted(() => {
    if (timer) {
      clearTimeout(timer);
      timer = undefined;
    }
    destroy();
  });
</script>

<style lang="less">
  @import '/@/design/vent/modal.less';

  .@{ventSpace}-select-dropdown {
    background: #ffffff !important;
    border-bottom: 1px solid rgba(236, 236, 236, 0.4);
    backdrop-filter: blur(10px);

    .@{ventSpace}-select-item-option-selected,
    .@{ventSpace}-select-item-option-active {
      background-color: #ffffff33 !important;
    }

    .@{ventSpace}-select-item:hover {
      background-color: #ffffff33 !important;
    }
  }
</style>

<style lang="less" scoped>
  @ventSpace: zxm;
  @import '/@/design/vent/modal.less';
  @import '@/views/vent/monitorManager/comment/less/workFace.less';
  .bg {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: absolute;
    pointer-events: auto;
    z-index: 0;
  }
  .point-event {
    pointer-events: none !important;
  }
</style>