feat(alarm): 添加预警状态筛选功能

- 在API接口中添加warning字段用于筛选预警状态
- 实现预警状态的下拉选择框,支持全部、是、否三种选项
- 添加清空按钮重置所有筛选条件
- 更新告警管理页面的数据请求逻辑以包含预警筛选参数
- 修复视频组件样式问题,移除不必要的悬停动画效果
```
This commit is contained in:
2026-07-01 16:45:43 +08:00
parent accd62a2f3
commit f2c23cf6a5
4 changed files with 30 additions and 4 deletions

View File

@@ -4,6 +4,7 @@ export interface RosInspectionRecordLineImageQueryDTO {
recognizeType?: number | string;
startTime?: string;
endTime?: string;
warning?: boolean;
keyword?: string;
}

View File

@@ -931,7 +931,6 @@
}
.video-grid-cell:hover {
transform: translateY(-1px);
border-color: rgba(141, 237, 255, 0.42);
}
@@ -942,7 +941,7 @@
height: 100%;
object-fit: contain;
display: block;
opacity: 0.76;
// opacity: 0.76;
}
.stream-message {

View File

@@ -21,6 +21,7 @@ interface AlarmRecord {
}
type RecognitionStatusText = "待执行" | "执行中" | "执行成功" | "执行失败" | "未知状态";
type WarningFilterValue = "" | "true" | "false";
interface AlarmPageResult {
total?: number;
@@ -48,6 +49,7 @@ const recognitionStatusMap: Record<number, RecognitionStatusText> = {
const alarmNo = ref("");
const recognizeType = ref("");
const warningFilter = ref<WarningFilterValue>("true");
const startTime = ref("");
const endTime = ref("");
const alarms = ref<AlarmRecord[]>([]);
@@ -97,6 +99,15 @@ function handleSearch() {
fetchAlarmList();
}
function handleClear() {
alarmNo.value = "";
recognizeType.value = "";
warningFilter.value = "";
startTime.value = "";
endTime.value = "";
handleSearch();
}
// 请求告警分页列表并更新表格数据
async function fetchAlarmList() {
listLoading.value = true;
@@ -108,6 +119,7 @@ async function fetchAlarmList() {
limit: pageSize,
query: {
recognizeType: normalizeRecognizeType(recognizeType.value),
warning: normalizeWarningFilter(warningFilter.value),
startTime: normalizeDateTime(startTime.value),
endTime: normalizeDateTime(endTime.value),
id: alarmNo.value.trim() || undefined,
@@ -183,6 +195,14 @@ function normalizeRecognizeType(value: string) {
return value ? Number(value) : undefined;
}
function normalizeWarningFilter(value: WarningFilterValue) {
if (!value) {
return undefined;
}
return value === "true";
}
function formatPosition(record: RosInspectionRecordLineImage) {
if (typeof record.poseX !== "number" || typeof record.poseY !== "number") {
return "--";
@@ -210,6 +230,11 @@ onMounted(() => {
<option value="3">隧道积水</option>
<option value="4">墙体裂缝</option>
</select>
<select v-model="warningFilter" class="toolbar-select">
<option value="">全部预警状态</option>
<option value="true">是否预警</option>
<option value="false">是否预警</option>
</select>
<input
v-model="startTime"
class="toolbar-input alarm-time-input"
@@ -228,6 +253,7 @@ onMounted(() => {
@keyup.enter="handleSearch"
/>
<button class="page-action-btn primary" type="button" @click="handleSearch">搜索</button>
<button class="page-action-btn ghost" type="button" @click="handleClear">清空</button>
<button class="page-action-btn ghost" type="button" @click="fetchAlarmList">刷新</button>
</div>
<div class="toolbar-right"> {{ totalAlarms }} 条告警记录</div>

View File

@@ -1640,10 +1640,10 @@ function getStatusClass(status: DeviceItem["status"]) {
:class="['monitor-video', { infrared: activeCameraMode === 'infrared' }]" autoplay muted
playsinline></video>
<div class="scan-line"></div>
<div class="video-overlay top-left">实时视频流</div>
<!-- <div class="video-overlay top-left">实时视频流</div>
<div class="video-overlay top-right">
{{ activeCameraMode === "white" ? "白光镜头" : "红外镜头" }}
</div>
</div> -->
<div class="video-overlay bottom-left">{{ currentRobot.id }}</div>
<div v-if="streamLoading" class="video-empty">视频流连接中...</div>
<div v-else-if="streamError" class="video-empty">{{ streamError }}</div>