mky-vent-base/src/views/vent/home/configurable/fireTS.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="left-info-content">
        <div class="left-block block1">
          <div class="info-value">无</div>
          <div class="info-label">突变预警</div>
        </div>
        <div class="left-block block2">
          <div class="info-value">无自燃隐患</div>
          <div class="info-label">煤自燃氧化阶段</div>
        </div>
        <div class="left-block block3">
          <div class="info-value">-</div>
          <div class="info-label">最高温度</div>
        </div>
      </div>
      <div class="center-info-content">
        <div class="info-value">正常</div>
        <div class="info-label">火灾安全等级</div>
      </div>
      <div class="right-info-content">
        <div class="right-block block1">
          <div class="info-value">0</div>
          <div class="info-label">指标预警</div>
        </div>
        <div class="right-block block2">
          <div class="info-value">无</div>
          <div class="info-label">预警等级</div>
        </div>
        <div class="right-block block3">
          <div class="info-value">无</div>
          <div class="info-label">升温预警</div>
        </div>
      </div>
    </div>
    <!-- 渲染所有模块 -->
    <ModuleCommon 
      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" />
    <ModuleCommonDual
      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"
      :common-title="commonTitle"
    />
  </div>
</template>
<script lang="ts" setup>
import { computed, onMounted, onUnmounted } from 'vue';
import { useInitConfigs, useInitPage } from './hooks/useInit';
import ModuleBDDual from './components/ModuleBDDual.vue';
import { getDisHome } from './configurable.api';
import { testConfigTSFire } from './configurable.data.tashan';
import ModuleCommon from './components/ModuleCommon.vue';
import ModuleCommonDual from './components/ModuleCommonDual.vue';

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;
const commonTitle = "实时监测与预警"
onMounted(() => {
  fetchConfigs('ts_fire').then(() => {
    configs.value = testConfigTSFire;
    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-fire-title: url(/@/assets/images/vent/vent-header1.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: #09172c;

  .top-bg {
    width: 100%;
    height: 73px;
    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: relative;
    top: 75px;
    left: 50%;
    transform: translateX(-50%);
    width: 900px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: url('@/assets/images/home-container/configurable/tashanhome/center-bar-bg.png') no-repeat center;

    .center-info-content {
      position: relative;
      top: 15px;
      background: url('@/assets/images/home-container/configurable/tashanhome/center-bar-circle.png') no-repeat center;
      width: 160px;
      height: 160px;
      text-align: center;
      .info-value {
        position: absolute;
        top: 34%;
        left: 50%;
        transform: translateX(-50%);
        font-family: 'douyuFont';
        font-size: 25px;
        color: #2cffdd;
      }
      .info-label {
        width: 100%;
        position: absolute;
        bottom: 25px;
        font-size: 17px;
        left: 50%;
        transform: translateX(-50%);
      }
    }
    .left-info-content {
      position: relative;
      text-align: right;
      .left-block {
        position: absolute;
        width: 190px;
        height: 55px;
        background: url('@/assets/images/home-container/configurable/tashanhome/leftbar-bg1.png') no-repeat right;
        padding-right: 52px;
        .info-value {
          height: 28px;
          line-height: 28px;
          font-family: 'douyuFont';
          font-size: 12px;
          color: var(--vent-gas-primary-text);
        }
        .info-label {
          height: 28px;
          line-height: 28px;
        }
      }
      .block1 {
        top: -70px;
        right: -5px;
      }
      .block2 {
        top: -15px;
        left: -280px;
        background: url('@/assets/images/home-container/configurable/tashanhome/leftbar-bg2.png') no-repeat right;
        .info-value {
          color: #2cffdd;
        }
      }
      .block3 {
        top: 40px;
        right: -5px;
      }
    }
    .right-info-content {
      position: relative;
      .right-block {
        position: absolute;
        width: 190px;
        height: 55px;
        background: url('@/assets/images/home-container/configurable/tashanhome/rightbar-bg1.png') no-repeat left;
        padding-left: 52px;
        .info-value {
          height: 28px;
          line-height: 28px;
          font-family: 'douyuFont';
          font-size: 12px;
          color: var(--vent-gas-primary-text);
        }
        .info-label {
          height: 28px;
          line-height: 28px;
        }
      }
      .block1 {
        top: -70px;
        left: -5px;
      }
      .block2 {
        top: -15px;
        right: -280px;
        background: url('@/assets/images/home-container/configurable/tashanhome/rightbar-bg2.png') no-repeat left;
        .info-value {
          color: #2cffdd;
        }
      }
      .block3 {
        top: 40px;
        left: -5px;
      }
    }
  }

  ::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: 10px 35px;
    }

  }
  ::v-deep .table__content .table__content_list {
    width: 95%;  
  }
  ::v-deep .table__content .table__content_label {
    width: 95%;
  }
}
</style>