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

<!-- 报警信息左侧顶部组件：包含报警搜索、报警列表展示及详情查看功能 -->
<template>
  <div class="search-table">
    <!-- 搜索区域：包含搜索输入框和筛选按钮 -->
    <div class="search-area">
      <a-input v-model:value="searchWarn" placeholder="搜索报警" size="small" />
      <div class="search-btn">
        <div class="btn-item">筛选</div>
      </div>
    </div>
    <!-- 内容区域：包含表头和表格数据 -->
    <div class="content-area">
      <!-- 表头：根据 warnTitle 配置动态渲染列标题 -->
      <div class="content-title">
        <div class="title-item" v-for="(item, index) in warnTitle" :key="index">{{ item.label }}</div>
      </div>
      <!-- 表格数据列表：遍历 tableData 渲染每行报警信息 -->
      <div class="table-content">
        <div class="content-item" v-for="(item, index) in tableData" :key="index">
          <div class="item-text" v-for="(ite, ind) in warnTitle" :key="ind">
            <!-- 报警时间列 -->
            <div v-if="ite.value == 'starttime'">{{ item[ite.value] }}</div>
            <!-- 报警名称列 -->
            <div v-if="ite.value == 'alarmName'">{{ item[ite.value] }}</div>
            <!-- 报警等级列：根据不同等级码显示对应颜色和文字 -->
            <!-- 101-低风险(蓝色) 102-一般风险(黄色) 103-较大风险(橙色) 104-重大风险(红色) 201-报警(深红色) -->
            <div v-if="ite.value == 'alarmLevel'"
              :style="{ color: item[ite.value] == 101 ? '#00d8ff' : item[ite.value] == 102 ? '#fcfc22' : item[ite.value] == 103 ? '#ff7010' : item[ite.value] == 104 ? '#df4e43' : item[ite.value] == 201 ? '#ff0000' : '' }">
              {{ item[ite.value] == 101 ? '低风险' : item[ite.value] ==
                102 ? '一般风险' :
                item[ite.value] == 103 ? '较大风险' : item[ite.value] == 104 ? '重大风险' : item[ite.value] == 201 ? '报警' :
                  '低风险' }}</div>
            <!-- 处理状态列：0-未处理(红色) 其他-已处理(绿色) -->
            <div v-if="ite.value == 'isok'" :style="{ color: item[ite.value] === 0 ? '#fd0404' : '#0eca74' }">{{
              item[ite.value] === 0 ? '未处理' : '已处理' }}</div>
            <!-- 操作列：点击"详情"触发详情查看 -->
            <div v-if="ite.value == 'operation'">
              <span :class="activeIndex == index ? 'text-look-active' : 'text-look'"
                @click="handlerDetail(item, index)">详情</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, watch, type PropType } from 'vue'
import { warnTitle } from '../hsqHome.data'

// 接收父组件传入的报警数据列表
let props = defineProps({
  tableData: {
    type: Array as PropType<any[]>,
    default: () => [],
  },
})

let activeIndex = ref(0)
// 报警搜索关键词
let searchWarn = ref('')
// 定义事件：detail - 查看报警详情
let $emit = defineEmits(['detail'])

// 点击"详情"按钮，向父组件派发 detail 事件并传递当前行数据
function handlerDetail(item: any, index: number) {
  activeIndex.value = index
  $emit('detail', item)
}

watch(() => props.tableData, (newVal) => {
  if (newVal.length > 0) {
    handlerDetail(newVal[0], 0)
  }
}, { immediate: true })
</script>
<style lang="less" scoped>
@import '/@/design/theme.less';

@{theme-deepblue} {
  .search-table {}
}

/* 整体容器：定义背景图片变量及基础布局 */
.search-table {
  --image-box-bg1: url('@/assets/images/home-container/configurable/hsq/2-6.png');
  --image-box-bg2: url('@/assets/images/home-container/configurable/hsq/2-24.png');
  position: relative;
  width: 100%;
  height: 100%;
  padding: 15px;
  box-sizing: border-box;
}

/* 搜索区域：输入框与筛选按钮水平排列 */
.search-area {
  height: 42px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
}

/* 筛选按钮外框 */
.search-btn {
  width: 85px;
  height: 30px;
  border: 1px solid #01fefc;
  border-radius: 4px;
  padding: 3px;
  cursor: pointer;
}

/* 筛选按钮内部填充 */
.btn-item {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: rgba(32, 166, 169);
}

/* 内容区域：占据搜索区域以下的所有空间 */
.content-area {
  height: calc(100% - 47px);
}

/* 表头行：使用背景图片装饰 */
.content-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 34px;
  background: var(--image-box-bg2) no-repeat;
  background-size: 100% 100%;
  margin-bottom: 6px;
}

/* 表头列项：统一居中，青色文字，按列分配 flex 比例 */
.title-item {
  display: flex;

  justify-content: center;
  align-items: center;
  color: #01fefc;

  &:nth-child(1) {
    flex: 2;
  }

  &:nth-child(2) {
    flex: 2;
  }

  &:nth-child(3) {
    flex: 1;
  }

  &:nth-child(4) {
    flex: 1;
  }

  &:nth-child(5) {
    flex: 1;
  }
}

/* 表格内容区：可纵向滚动 */
.table-content {
  height: calc(100% - 40px);
  overflow-y: auto;
}

/* 数据行：奇偶行交替背景色 */
.content-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  //height: 36px;
  padding: 4px 0px;
  box-sizing: border-box;

  &:nth-child(odd) {
    background-color: #0e3455;
  }

  &:nth-child(even) {
    background-color: #114268;
  }
}

/* 数据单元格：居中对齐，按列分配 flex 比例（与表头一致） */
.item-text {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;

  &:nth-child(1) {
    flex: 2;
  }

  &:nth-child(2) {
    flex: 2;
  }

  &:nth-child(3) {
    flex: 1;
  }

  &:nth-child(4) {
    flex: 1;
  }

  &:nth-child(5) {
    flex: 1;
  }

}

/* "详情"操作按钮样式 */
.text-look {
  padding: 2px 8px;
  // margin: 0px 2px;
  border-radius: 2px;
  background-color: #2484bc;
  cursor: pointer;
}

.text-look-active {
  padding: 2px 8px;
  // margin: 0px 2px;
  border-radius: 2px;
  background-color: #2484bc;
  border: 1px solid #90cff3;
  cursor: pointer;
}

/* 搜索输入框：自定义背景图片，去除默认边框 */
.zxm-input {
  height: 42px;
  color: #fff;
  background-color: transparent;
  border: none;
  background: var(--image-box-bg1) no-repeat;
  background-size: 100% 100%;
}

/* 小尺寸输入框内边距 */
.zxm-input-sm {
  padding: 0px 20px;
}

/* 隐藏滚动条 */
::-webkit-scrollbar {
  display: none;
}
</style>