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>
  <template v-if="isRefreshUnit">
    <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">
            <div class="monitor-title">{{ gasUnit.title }}:</div>
            <div class="monitor-val">
              <span class="val">
                {{
                  gasUnitDataSource[groupNum - 1] && gasUnitDataSource[groupNum - 1][gasUnit.code]
                    ? gasUnitDataSource[groupNum - 1][gasUnit.code]
                    : '-'
                }} </span
              ><span>{{ gasUnit.unit }}</span>
            </div>
          </div>
        </FourBorderBg>
      </div>
    </div>
  </template>

  <template v-if="activeKey == 'gasAssessment'">
    <WorkFace class="point-event" v-if="pageType == 'workFace'" :data-source="dataSource" />
    <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, setPlanes, clearCss3D } 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';
  type DeviceType = { deviceType: string; deviceName: string; datalist: any[] };

  const activeKey = ref('gasAssessment');
  const loading = ref(false);
  const dataSource = ref<DeviceType[]>([]);
  const pageType = ref('workFace');
  const activeUnitId = ref('');
  const gasUnitDataSource = ref([]);
  const isRefreshUnit = ref(false);
  function changeActive(activeValue) {
    activeKey.value = activeValue;
  }

  // 获取模型类型
  const changeModalType = (currentData) => {
    // 根据抽采单元
    isRefreshUnit.value = false;
    clearCss3D();
    timer = undefined;
    clearTimeout(timer);
    nextTick(async () => {
      setModelType(modalType);
      isRefreshUnit.value = true;
      timer = null;
      await getMonitor(true);
      setPlanes(gasUnitDataSource.value);
      setCss3D(gasUnitDataSource.value);
    });
  };

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

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

  // // 监测数据
  const selectData = ref([]);
  const monitorDataGroupNum = ref(0);
  // // https获取监测数据
  let timer: null | NodeJS.Timeout = null;
  function getMonitor(flag?) {
    if (Object.prototype.toString.call(timer) === '[object Null]') {
      return new Promise((resolve) => {
        timer = setTimeout(
          async () => {
            dataSource.value = await getDeviceList();
            const gasUnitData = dataSource.value.find((item) => item.deviceType.startsWith('unit'));
            if (gasUnitData) {
              gasUnitDataSource.value = gasUnitData['datalist'];
              monitorDataGroupNum.value = gasUnitData['datalist'].length;
            }

            if (timer) {
              timer = null;
            }
            resolve(1);
            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 = 4;
      loading.value = false;
      await getSysDataSource();
      nextTick(async () => {
        await getMonitor(true);
      });
    });
  });
  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;
  }
  :deep(.four-border-bg) {
    backdrop-filter: blur(10px);
    .title {
      text-align: center;
      color: var(--vent-modal-title);
    }
    .monitor-item {
      display: flex;
      justify-content: space-between;
      .monitor-title {
        width: 90px;
      }
      .monitor-val {
        color: var(--vent-modal-title);
        .val {
          padding-right: 3px;
        }
      }
    }
  }
</style>