hsq-pro/src/views/vent/monitorManager/hsqHome/warnMonitor.vue

<template>
  <!-- 告警监控主容器 -->
  <div class="warn-monitor">
    <!-- 顶部区域：三个面板横向排列 -->
    <div class="warn-top-box">
      <!-- 左侧面板：告警列表 -->
      <div class="baisc-box">
        <WarnLeftTop :tableData="tableData" @detail="handlerDetail"></WarnLeftTop>
      </div>
      <!-- 中间面板：告警详情展示 -->
      <div class="baisc-box">
        <WarnCenTop :warnData="warnData"></WarnCenTop>
      </div>
      <!-- 右侧面板：告警统计 -->
      <div class="baisc-box">
        <WarnRightTop></WarnRightTop>
      </div>
    </div>
    <!-- 底部区域：告警趋势/历史记录 -->
    <div class="warn-bot-box">
      <WarnBottom></WarnBottom>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, onUnmounted, ref, computed, nextTick, onBeforeMount, watch } from 'vue';
import WarnLeftTop from './components/WarnLeftTop.vue';
import WarnCenTop from './components/WarnCenTop.vue'
import WarnRightTop from './components/WarnRightTop.vue'
import WarnBottom from './components/WarnBottom.vue'
import { autoLogList, managesysList } from './hsqHome.api'

// 告警列表数据
let tableData = ref<any[]>([])
// 当前选中的告警详情数据
let warnData = ref({})
// 系统ID，用于筛选数据
let systemId = ref('')

// 定时器引用，用于页面卸载时清理
let timer: null | NodeJS.Timeout = null;
/**
 * 定时获取监测数据
 * 
 * @param flag 是否立即执行（默认false，延迟30秒执行）
 */
function getMonitor(flag?: boolean) {
  timer = setTimeout(async () => {
    // 获取告警列表数据
    await getWarnList();
    if (timer) {
      timer = null;
    }
    // 递归调用实现持续轮询
    getMonitor();
  }, flag ? 0 : 30000);
}

/**
 * 获取告警列表数据
 * 根据systemId筛选告警记录，最多返回100条
 */
async function getWarnList() {
  let res = await autoLogList({ pageNum: 1, pageSize: 100, sysId: systemId.value });
  tableData.value = res.records || []
}

/**
 * 处理告警详情点击事件
 * 将选中的告警项数据传递给中间面板显示
 * 
 * @param item 选中的告警记录
 */
function handlerDetail(item: any) {
  warnData.value = item
}

/**
 * 获取系统列表并设置默认系统ID
 * 用于初始化时获取systemId，供后续接口调用使用
 */
async function getManagesysList() {
  const res = await managesysList({ strtype: 'sys_openair_fire', pagetype: 'normal' });
  if (res && res.records) {
    systemId.value = res.records[0].id
  }
}

// 页面加载时初始化数据并启动定时轮询
onMounted(async() => {
   await getManagesysList();
   getMonitor(true);
});

// 页面卸载时清理定时器，防止内存泄漏
onUnmounted(() => {
  timer = null
  clearTimeout(timer);
});
</script>

<style lang="less" scoped>
@import '/@/design/theme.less';

@{theme-deepblue} {
  .warn-monitor {}
}

.warn-monitor {
  --image-box1-bg: url('@/assets/images/home-container/configurable/hsq/2-4.png');
  --image-box1-bg1: url('@/assets/images/home-container/configurable/hsq/2-10.png');
  --image-box1-bg2: url('@/assets/images/home-container/configurable/hsq/3-3.png');
  width: 100%;
  height: calc(100% - 10px);
  color: @white;
  position: relative;
  background-color: #09172c;
  margin-bottom: 10px;
}

.warn-top-box {
  position: relative;
  display: flex;
  justify-content: space-between;
  height: calc(100% - 200px);
  margin-bottom: 10px;
}

.warn-bot-box {
  width: 100%;
  height: 190px;
  background: var(--image-box1-bg2) no-repeat;
  background-size: 100% 100%;
}

.baisc-box {
  &:nth-child(1) {
    width: 430px;
    height: 100%;
    background: var(--image-box1-bg) no-repeat;
    background-size: 100% 100%;
    margin-right: 10px;
  }

  &:nth-child(2) {
    position: absolute;
    top: 63px;
    left: 50%;
    transform: translate(-50%, 0);
    width: calc(100% - 880px);
    height: calc(100% - 63px);
    background: var(--image-box1-bg1) no-repeat;
    background-size: 100% 100%;
  }

  &:nth-child(3) {
    width: 430px;
    height: 100%;
    background: var(--image-box1-bg) no-repeat;
    background-size: 100% 100%;
    margin-left: 10px;
  }
}

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