mky-vent-base/src/views/vent/home/configurable/dustNew.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 />
      <a-button
        type="primary"
        shape="circle"
        style="width: 34px; height: 34px; position: absolute; right: 5px; bottom: 5px; z-index: 5"
        @click="redirectTo('/micro-vent-3dModal/dashboard/analysis?type=model3D&deviceType=model3D')"
      >
        <EyeFilled />
      </a-button>
    </div>
    <div class="top-bg">
      <!-- <img style="width: 300px; height: 40px; position: fixed; left: 5px; top: 5px" src="./meeee.png" /> -->
      <!-- <div class="main-title">{{ mainTitle }}</div> -->
      <NewNav :Title="mainTitle" />
    </div>
    <div class="left-t"> </div>
    <div class="right-t"> </div>
    <ModuleDustNew
      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"
    />
  </div>
</template>
<script lang="ts" setup>
  import { onMounted, onUnmounted } from 'vue';
  // import { CaretDownOutlined } from '@ant-design/icons-vue';
  import NewNav from './components/originalNew/NewNav.vue';
  import { useInitConfigs, useInitPage } from './hooks/useInit';
  import ModuleDustNew from './components/ModuleDustNew.vue';
  import VentModal from '/@/components/vent/micro/ventModal.vue';
  import { getDisHome } from './configurable.api';
  import { EyeFilled } from '@ant-design/icons-vue';
  import { testConfigNewDust } from './configurable.data.New';
  // const cfgs = computed(() =>
  //   configs.value.filter((_, index) => {
  //     return index !== 4 && index !== 3;
  //   })
  // );
  // const cfgA = computed<any>(() =>
  //   configs.value.find((_, index) => {
  //     return index === 3;
  //   })
  // );
  // const cfgB = computed<any>(() =>
  //   configs.value.find((_, index) => {
  //     return index === 4;
  //   })
  // );
  const { configs, devicesTypes, fetchConfigs } = useInitConfigs();
  const { mainTitle, data, updateData } = useInitPage('粉尘预警系统');
  let interval: number | undefined;
  onMounted(() => {
    fetchConfigs('New_dust').then(() => {
      configs.value = testConfigNewDust;
      getDisHome({
        dataList: devicesTypes.value.concat('dustAllMineWarn').join(','),
      }).then(updateData);
    });
    setInterval(() => {
      getDisHome({
        dataList: devicesTypes.value.concat('dustAllMineWarn').join(','),
      }).then(updateData);
    }, 2000);
  });

  onUnmounted(() => {
    clearInterval(interval);
  });

  function redirectTo(url) {
    window.open(url);
  }
</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/vent/homeNew/modaltop.png');
    }
  }

  .company-home {
    --image-modal-top: url('@/assets/images/vent/homeNew/modaltop.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: 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;
      }
      .top-nav {
        position: absolute;
        top: 0;
        width: 880px;
        height: 100%;
        display: flex;
        justify-content: flex-start;
      }
    }
    .left-t {
      position: absolute;
      width: 28%;
      height: 100%;
      background: url('@/assets/images/vent/homeNew/leftContent.png') no-repeat center;
      z-index: 0;
    }
    .right-t {
      position: absolute;
      width: 172%;
      height: 100%;
      background: url('@/assets/images/vent/homeNew/rightContent.png') no-repeat center;
      z-index: 0;
    }
    // .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: 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;
    }
  }
  :deep(.loading-box) {
    position: unset;
  }
</style>