gas-injection/src/views/vent/home/configurable/fireMine.vue

<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="company-home">
    <!-- 顶部标题样式块 -->
    <div class="top-bg">
      <div class="main-title">{{ mainTitle }}</div>
    </div>
    <!-- 中间样式块 -->
    <div class="center-info-bar">
      <div class="center-info-btn" @click="redirectTo('/grout-home')">
        <div>
          <img src="@/assets/images/home-container/configurable/minehome/znzjxt-icon.png" alt="智能注浆系统" />
        </div>
        <div>
          智能注浆系统
        </div>
      </div>
      <div class="center-info-content ">
        <div class="center-info-block left">
          <img src="@/assets/images/home-container/configurable/minehome/jcqy-icon.png" alt="监测区域" />
          <span>监测区域</span>
        </div>
        <div class="center-info-risk">
          <div class="risk-notice">自然倾向性等级：容易自燃</div>
          <div class="risk-level">{{ data.fireAllMineWarn || '低风险' }}</div>
        </div>
        <div class="center-info-block right">
          <span>火灾风险</span>
          <img src="@/assets/images/home-container/configurable/minehome/hzfx-icon.png" alt="火灾风险" />
        </div>
      </div>
      <div class="center-info-btn" @click="redirectTo('/nitrogen-home')">
        <div>
          <img src="@/assets/images/home-container/configurable/minehome/znzdxt-icon.png" alt="智能注氮系统" />
        </div>
        <div>
          智能注氮系统
        </div>
      </div>
    </div>
    <!-- 渲染所有模块 -->
    <ModuleMine
      v-for="cfg in cfgs"
       :key="cfg.deviceType + cfg.moduleName"
      :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>
</template>
<script lang="ts" setup>
import { computed, onMounted, onUnmounted } from 'vue';
import { useInitConfigs, useInitPage } from './hooks/useInit';
import ModuleMine from './components/ModuleMine.vue';
import ModuleBDDual from './components/ModuleBDDual.vue';
import { getDisHome } from './configurable.api';
import { testConfigMineFire } from './configurable.data.mine';

const cfgs = computed(() =>
  configs.value.filter((_, index) => index !== 6 && index !== 7)
);
const cfgA = computed<any>(() =>
  configs.value[6]
);
const cfgB = computed<any>(() =>
  configs.value[7]
);
const { configs, devicesTypes, fetchConfigs } = useInitConfigs();
const { mainTitle, data, updateData } = useInitPage('矿井火灾预警系统');
let interval: ReturnType<typeof setInterval> | undefined;

onMounted(() => {
  fetchConfigs('mine_fire').then(() => {
    configs.value = testConfigMineFire;
    getDisHome({
      dataList: devicesTypes.value.concat('fireAllMineWarn').join(','),
    }).then(updateData);
  });
  interval = setInterval(() => {
    getDisHome({
      dataList: devicesTypes.value.concat('fireAllMineWarn').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');
}

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

  .top-bg {
    width: 100%;
    height: 80px;
    background: var(--image-fire-title) no-repeat top;
    position: absolute;
    z-index: 1;
    .main-title {
      height: 80px;
      font-family: 'douyuFont';
      font-size: 26px;
      letter-spacing: 2px;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0 0 10px 0;
    }
  }
  // 顶部中间样式块
  .center-info-bar {
    position: absolute;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    width: 900px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    background: url('@/assets/images/home-container/configurable/minehome/center-info-bg.png') no-repeat center;
    box-shadow: 0 2px 12px #000a;
    padding: 0 20px;
    gap: 15px;

    .center-info-btn {
      display: flex;
      flex-direction: column;
      align-items: center;
      color: #fff;
      font-size: 10px;
      font-family: 'douyuFont';
      font-weight: bold;
      cursor: pointer;
      user-select: none;
      width: 110px;
      margin: 0 0 10px 0;
      img {
        width: 60px;
      }
    }

    .center-info-content {
      display: flex;
      align-items: center;
      justify-content: center;

      .center-info-block {
        color: #ffffff;
        font-size: 18px;
        img{
          margin: 0 5px;
        }
      }
      .center-info-risk {
        color: #fff;
        font-weight: bolder;
        text-align: center;
        .risk-level {
          color: #4EABD9;
          font-size: 24px;
          font-weight: bold;
          letter-spacing: 8px;
          margin: 10px 0;
        }
      }

      .left {
        margin-right: 45px;

      }
      .right {
        margin-left: 45px;
      }
    }
  }

  ::v-deep .dane-bd {
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    &.dane-w {
      background-image: var(--image-common-border3);
    }
    .dane-title {
      justify-content: space-around;
      padding: 0 50px 0 0;

      .common-navL {
        font-size: 14px;
        font-weight: bold;
        font-family: 'douyuFont';
      }
    }
    .dane-content {
      border: none;
      background: none;
      padding: 5px 35px 10px 10px;
    }
  }
}
</style>