修改页面弹窗全屏

This commit is contained in:
2026-02-08 21:50:38 +08:00
parent d6e312de2b
commit 9a4b5a0732
2 changed files with 7 additions and 11 deletions

View File

@@ -1,7 +1,6 @@
<template> <template>
<Card title="预警信息" v-bind="$attrs"> <Card title="预警信息" v-bind="$attrs">
<template #extra> <template #extra>
<!-- 状态筛选标签 + 更多按钮 整合到extra插槽 -->
<div class="status-filter-container"> <div class="status-filter-container">
<div class="status-filter"> <div class="status-filter">
<span <span
@@ -17,36 +16,27 @@
</div> </div>
</template> </template>
<!-- 预警列表容器移除边框 + 紧凑布局 + 滚动条 -->
<div class="alert-list-container"> <div class="alert-list-container">
<!-- 加载状态提示 -->
<div v-if="loading" class="empty-tip"> <div v-if="loading" class="empty-tip">
加载中... 加载中...
</div> </div>
<!-- 空数据提示 -->
<div v-else-if="!alertList.length" class="empty-tip"> <div v-else-if="!alertList.length" class="empty-tip">
暂无{{ statusOptions.find(item => item.value === currentStatus)?.label }}的预警信息 暂无{{ statusOptions.find(item => item.value === currentStatus)?.label }}的预警信息
</div> </div>
<!-- 预警项列表 -->
<div v-else class="alert-list"> <div v-else class="alert-list">
<div <div
v-for="item in alertList" v-for="item in alertList"
:key="item.id" :key="item.id"
class="alert-item" class="alert-item"
> >
<!-- 预警级别固定宽度 -->
<span <span
class="level-tag" class="level-tag"
:class="`level-${item.alertLevel}`" :class="`level-${item.alertLevel}`"
> >
{{ getLevelText(item.alertLevel) }} {{ getLevelText(item.alertLevel) }}
</span> </span>
<!-- 预警触发时间固定宽度 -->
<span class="trigger-time">{{ item.triggerTime }}</span> <span class="trigger-time">{{ item.triggerTime }}</span>
<!-- 预警类型固定宽度 -->
<span class="alert-type">{{ item.alertType }}</span> <span class="alert-type">{{ item.alertType }}</span>
<!-- 预警标题 - 仅优化这部分 -->
<span <span
class="alert-title" class="alert-title"
@mouseenter="showFullContent(item.alertTitle || '', $event)" @mouseenter="showFullContent(item.alertTitle || '', $event)"
@@ -56,6 +46,12 @@
<span class="title-text">{{ item.alertTitle || '--' }}</span> <span class="title-text">{{ item.alertTitle || '--' }}</span>
</a-button> </a-button>
</span> </span>
<span class="alert-title"
@mouseenter="showFullContent(item.alertContent || '', $event)"
@mouseleave="hideFullContent"
>
{{ item.alertContent || '--' }}
</span>
</div> </div>
</div> </div>
</div> </div>

View File

@@ -5,7 +5,7 @@
title="预警详情" title="预警详情"
@ok="handleSubmit" @ok="handleSubmit"
:showFooter="true" :showFooter="true"
width="45%" width="65%"
@cancel="handleCancel" @cancel="handleCancel"
class="warning-detail-modal" class="warning-detail-modal"
> >