hsq-pro/src/views/vent/monitorManager/hsqHome/components/AlarmMonitor.vue

<template>
  <div class="alarm-monitor">
    <div class="alarm-top">
      <div class="time-range">
        <a-range-picker
          v-model:value="timeRange"
          class="alarm-range-picker"
          show-time
          value-format="YYYY-MM-DD HH:mm:ss"
          format="YYYY-MM-DD HH:mm:ss"
          :placeholder="['开始时间', '结束时间']"
          :allow-clear="false"
          @change="getDscAlarmLogList"
        />
      </div>
    </div>
    <div class="alarm-bot">
      <CommonTable :columns="alarmColumns" :table-data="tableData"></CommonTable>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, ref } from 'vue';
import dayjs from 'dayjs';
import CommonTable from './CommonTable.vue';
import { autoLogList, dscAlarmLogList } from '../hsqHome.api';
import {alarmColumns} from '../hsqHome.data'

const DATE_FORMAT = 'YYYY-MM-DD HH:mm:ss'

let props = defineProps({
  /**
   * 卡片数据对象
   * key 对应 option 中每项的 value，value 为实际展示数值
   */
  cardData: {
    type: Object as any,
    default: () => {
      return {}
    }
  }
})

/** 时间范围：[开始时间, 结束时间]，默认当天 0 点至当前时间 */
const timeRange = ref<[string, string]>([
  dayjs().startOf('day').format(DATE_FORMAT),
  dayjs().format(DATE_FORMAT),
])

// 表格数据源：从后端获取报警日志列表数据
let tableData = ref<any[]>([])

/** 定时获取监测数据定时器 */
let timer: null | NodeJS.Timeout = null;

/**
 * 定时获取监测数据
 * 通过定时器循环调用数据获取方法，更新表格数据
 *
 * @param flag - 是否立即执行（首次调用时传true跳过延时）
 */
function getMonitor(flag?: boolean) {
  timer = setTimeout(async () => {
    await getDscAlarmLogList();
   
    if (timer) {
      timer = null;
    }
    getMonitor();
  }, flag ? 0 : 10000);
}

/**
 * 获取双光谱摄像机报警记录-分页列表查询
 * 调用 dscAlarmLogList 接口获取双光谱摄像机报警记录分页列表，
 * 并将返回数据赋值给 warnList
 */
async function getDscAlarmLogList() {
  const res = await dscAlarmLogList({ pageNo: 1, pageSize: 1000, startTime: timeRange.value?.[0], endTime: timeRange.value?.[1] });
  if (res && res.records) {
    tableData.value = res.records
      .map(el => ({
        ...el,
        // 将数字类型的报警等级映射为中文描述
        eventTypeC: el.eventType == '10001' ? '热源报警' : el.eventType == '10002' ? '闯入报警' : '-',
      }))
      .sort((a, b) => dayjs(b.createTime).valueOf() - dayjs(a.createTime).valueOf())
  }
}

// 组件挂载后立即获取报警日志数据
onMounted(() => {
  getMonitor(true);
})
/**
 * 组件卸载前
 * 清理定时器，停止轮询获取监测数据
 */
onUnmounted(() => {
  timer = null
  clearTimeout(timer);
});
</script>

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

.alarm-monitor {
  --image-card-bg: url('@/assets/images/home-container/configurable/hsq/1-7.png');
  --image-card-bg1: url('@/assets/images/home-container/configurable/hsq/1-8.png');
  position: relative;
  width: 100%;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;

  .alarm-top {
    display: flex;
    justify-content: center;
    align-items: center;
    width: calc(100% - 14px);
    height: 30px;
    // background: var(--image-card-bg) no-repeat bottom;
    // background-size: 100% auto;
    margin: 5px 7px;
    // padding: 0 8px;
    // box-sizing: border-box;
  }

  .time-range {
    width: 100%;
  }

  .alarm-range-picker {
    width: 100%;
  }

  :deep(.zxm-picker) {
    width: 100%;
    height: 28px;
    border: 1px solid #3ae1ff !important;
    background-color: rgba(16, 64, 100, 0.85) !important;
    box-shadow: 0 0 6px rgba(58, 225, 255, 0.25);
  }

  :deep(.zxm-picker-input > input) {
    color: #fff !important;
    font-size: 14px;
    text-align: center;
  }

  :deep(.zxm-picker-input > input::placeholder) {
    color: rgba(200, 236, 255, 0.45) !important;
  }

  :deep(.zxm-picker-separator),
  :deep(.zxm-picker-suffix),
  :deep(.zxm-picker-clear) {
    color: #3ae1ff !important;
  }

  .alarm-bot {
    width: 100%;
    height: calc(100% - 40px);
  }
}
</style>