mky-vent-base/src/views/vent/home/configurable/fireBD.vue

<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="company-home">
    <div class="top-bg">
      <div class="main-title">{{ mainTitle }}</div>
    </div>
    <!-- <a-dropdown class="module-dropdown" :class="{ 'module-dropdown-original': isOriginal }" :trigger="['click']" placement="bottomRight">
      <a class="ant-dropdown-link" @click.prevent>
        全矿井通风检测
        <CaretDownOutlined />
      </a>
      <template #overlay>
        <MonitorCenter />
      </template>
    </a-dropdown> -->
    <!-- 采用定位方式以避免出现各个模块隐藏时其他模块下移的问题 -->

    <div class="left-t">
      <div class="tcontent-area">
        <div class="tcontent-l">
          <div>监测</div>
          <div>区域</div>
        </div>
        <div class="tcontent-c">
          <div style="margin-bottom: 15px; color: #009bff; font-size: 24px; font-weight: bolder; letter-spacing: 10px">
            {{ data.fireAllMineWarn }}
          </div>
          <div style="color: #fff; font-size: 12px">自燃倾向性等级 : 自燃</div>
        </div>
        <div class="tcontent-r">
          <div>火灾</div>
          <div>风险</div>
        </div>
      </div>
    </div>
    <div class="right-t">
      <div class="tcontent-l" @click="redirectTo('/grout-home')">
        <div>智能注浆系统</div>
      </div>
      <div class="tcontent-r" @click="redirectTo('/nitrogen-home')">
        <div>智能注氮系统</div>
      </div>
    </div>
    <ModuleBD
      v-for="cfg in cfgs"
      :key="cfg.deviceType"
      :show-style="cfg.showStyle"
      :module-data="cfg.moduleData"
      :module-name="cfg.moduleName"
      :device-type="cfg.deviceType"
      :data="data"
      :visible="true"
    />
    <ModuleBDDual
      v-if="cfgA && cfgB"
      :show-style="cfgA.showStyle"
      :module-data-a="cfgA.moduleData"
      :module-name-a="cfgA.moduleName"
      :device-type-a="cfgA.deviceType"
      :module-data-b="cfgB.moduleData"
      :module-name-b="cfgB.moduleName"
      :device-type-b="cfgB.deviceType"
      :data="data"
      :visible="true"
    />
    <div style="width: 1000px; height: 550px; position: absolute; left: calc(50% - 500px); top: 60px">
      <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>
</template>
<script lang="ts" setup>
  import { computed, onMounted, onUnmounted } from 'vue';
  // import { CaretDownOutlined } from '@ant-design/icons-vue';
  // import MonitorCenter from './components/MonitorCenter.vue';
  import { useInitConfigs, useInitPage } from './hooks/useInit';
  import ModuleBD from './components/ModuleBD.vue';
  import ModuleBDDual from './components/ModuleBDDual.vue';
  import VentModal from '/@/components/vent/micro/ventModal.vue';
  import { getDisHome } from './configurable.api';
  import { EyeFilled } from '@ant-design/icons-vue';
  // import { testConfigBDFire } from './configurable.data.bd';
  // import { getToken } from '/@/utils/auth';

  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;
  // function hideLoading() {
  //   loading.value = false;
  // }
  onMounted(() => {
    fetchConfigs('BD_fire').then(() => {
      // configs.value = testConfigBDFire;

      getDisHome({
        dataList: devicesTypes.value.concat('fireAllMineWarn').join(','),
      }).then(updateData);
    });
    setInterval(() => {
      getDisHome({
        dataList: devicesTypes.value.concat('fireAllMineWarn').join(','),
      }).then(updateData);
    }, 60000);
  });

  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-bg: url('@/assets/images/themify/deepblue/home-container/configurable/firehome/bg.png');
      --image-fire-title: url(/@/assets/images/themify/deepblue/home-container/configurable/firehome/fire-title.png);
      --image-qkjaq: url('/@/assets/images/themify/deepblue/home-container/configurable/firehome/qkjaq.png');
      --image-common-border2: url('/@/assets/images/themify/deepblue/home-container/configurable/firehome/common-border2.png');
      --image-znzjxt: url(/@/assets/images/themify/deepblue/home-container/configurable/firehome/znzjxt.png);
      --image-znzdxt: url(/@/assets/images/themify/deepblue/home-container/configurable/firehome/znzdxt.png);
    }
  }

  .company-home {
    --image-bg: url('@/assets/images/home-container/configurable/firehome/bg.png');
    --image-fire-title: url(/@/assets/images/home-container/configurable/firehome/fire-title.png);
    --image-qkjaq: url('/@/assets/images/home-container/configurable/firehome/qkjaq.png');
    --image-common-border2: url('/@/assets/images/home-container/configurable/firehome/common-border2.png');
    --image-znzjxt: url(/@/assets/images/home-container/configurable/firehome/znzjxt.png);
    --image-znzdxt: url(/@/assets/images/home-container/configurable/firehome/znzdxt.png);
    width: 100%;
    height: 100%;
    color: @white;
    position: relative;
    background: var(--image-bg) no-repeat center;

    .top-bg {
      width: 100%;
      height: 86px;
      background: var(--image-fire-title) no-repeat top;
      position: absolute;
      z-index: 1;
      .main-title {
        height: 86px;
        font-family: 'douyuFont';
        font-size: 26px;
        letter-spacing: 2px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }

    // .module-left {
    //   position: absolute;
    //   width: 440px;
    //   height: 280px;
    //   left: 0;
    // }
    // .module-right {
    //   position: absolute;
    //   width: 440px;
    //   height: 280px;
    //   right: 0;
    // }
    // .module-bottom {
    //   position: absolute;
    //   width: 1000px;
    //   height: 280px;
    // }
    .module-dropdown {
      padding: 10px;
      background-image: linear-gradient(to bottom, #036886, #072a40);
      border-bottom: 2px solid #3df6ff;
      color: @vent-font-color;
      position: absolute;
      top: 70px;
      right: 460px;
    }
    .module-dropdown-original {
      padding: 10px;
      background-image: linear-gradient(to bottom, #036886, #072a40);
      border-bottom: 2px solid #3df6ff;
      color: @vent-font-color;
      position: absolute;
      top: 70px;
      right: 460px;
    }
    .module-trigger-button {
      color: @vent-font-color;
      background-image: linear-gradient(to bottom, #036886, #072a40);
      border: none;
      border-bottom: 2px solid #3df6ff;
    }
  }

  .left-t {
    position: absolute;
    height: 115px;
    top: 50px;
    left: 10px;
    width: 440px;
    background-image: var(--image-qkjaq);
    // background-color: #000723;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;

    .tcontent-area {
      display: flex;
      position: absolute;
      top: 50%;
      left: 0;
      box-sizing: border-box;
      align-items: center;
      justify-content: space-around;
      width: 100%;
      height: 70px;
      padding: 0 15px;
      transform: translate(0, -40%);

      .tcontent-l {
        display: flex;
        flex: 1;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
        color: #9da5aa;
        font-size: 14px;
        font-weight: bold;
        letter-spacing: 2px;
      }

      .tcontent-c {
        display: flex;
        flex: 3;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
      }

      .tcontent-r {
        display: flex;
        flex: 1;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
        color: #9da5aa;
        font-size: 14px;
        font-weight: bold;
        letter-spacing: 2px;
      }
    }
  }
  .right-t {
    position: absolute;
    // height: 160px;
    height: 115px;
    right: 10px;
    top: 50px;
    width: 440px;
    background-image: var(--image-common-border2);
    background-color: #000723;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;

    .tcontent-l {
      flex: 1;
      height: 100%;
      font-size: 16px;
      font-weight: bold;
      background-image: var(--image-znzjxt);
      background-size: auto 100%;
      background-repeat: no-repeat;
      background-position: center;
      text-align: center;
      padding-top: 85px;
    }
    .tcontent-r {
      flex: 1;
      height: 100%;
      font-size: 16px;
      font-weight: bold;
      background-image: var(--image-znzdxt);
      background-size: auto 100%;
      background-repeat: no-repeat;
      background-position: center;
      text-align: center;
      padding-top: 85px;
    }
  }

  :deep(.loading-box) {
    position: unset;
  }
</style>