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

<template>
  <div class="alarm-monitor">
    <div class="alarm-top">
      <div class="card-item" v-for="(item, index) in option" :key="index">
        <div class="item-value">{{ cardData[item.value] }}</div>
        <div class="item-label">{{ item.label }}</div>
      </div>
    </div>
    <div class="alarm-bot">
      <CommonTable :columns="alarmColumns" :table-data="tableData"></CommonTable>
    </div>
  </div>
</template>

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

let props = defineProps({
  /**
   * 顶部卡片配置项
   * 每项包含 label（显示名称）和 value（对应 cardData 中的 key）
   */
  option: {
    type: Array as any
  },
  /**
   * 卡片数据对象
   * key 对应 option 中每项的 value，value 为实际展示数值
   */
  cardData: {
    type: Object as any,
    default: () => {
      return {}
    }
  }
})

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

/**
 * 获取报警日志列表数据
 *
 * 调用 autoLogList API，默认查询第1页、每页10条记录，
 * 将返回的报警日志数据填充到表格中用于展示
 *
 * @returns {Promise<void>}
 */
async function getAlarmData() {
  let res = await autoLogList({ pageNum: 1, pageSize: 100, sysId: '2074416476136718337',  });
  tableData.value = res.records.map(el=>{
    return {
      ...el,
      // 将数字类型的报警等级映射为中文描述
      // 101:低风险  102:一般风险  103:较大风险  104:重大风险  201:报警
      alarmLevelC: el.alarmLevel == 101 ? '低风险' : el.alarmLevel == 102 ? '一般风险' : el.alarmLevel == 103 ? '较大风险' : el.alarmLevel == 104 ? '重大风险' : el.alarmLevel == 201 ? '报警' : '低风险'  
    }
  });
}

// 组件挂载后立即获取报警日志数据
onMounted(() => {
  getAlarmData();
})
</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: space-around;
    align-items: center;
    width: calc(100% - 20px);
    height: 25%;
    background: var(--image-card-bg) no-repeat bottom;
    background-size: 100% auto;
    margin: 0px 10px;
  }

  .alarm-bot {
    width: 100%;
    height: 75%;
  }

  .card-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 89px;
    height: 49px;
    background: var(--image-card-bg1) no-repeat;
    background-size: 100% 100%;

    &:nth-child(1) {
      .item-value {
        font-family: 'douyuFont';
        color: #ff3d3d;
      }
    }

    &:nth-child(2) {
      .item-value {
        font-family: 'douyuFont';
        color: #ff983d;
      }
    }

    &:nth-child(3) {
      .item-value {
        font-family: 'douyuFont';
        color: #3dff69;
      }
    }
  }
}
</style>