feat(aiot): 告警列表-持续时长格式化 + 创建时间改为结束时间
API类型定义: - Alert接口新增durationMs、lastFrameTime字段 列表展示优化: - 持续时长列改为读取durationMs,自适应格式化(秒/分/时) - "创建时间"列替换为"结束时间"列,显示lastFrameTime或handledAt - 详情弹窗持续时长同步使用formatDuration格式化
This commit is contained in:
@@ -18,6 +18,7 @@ export namespace AiotAlarmApi {
|
||||
algorithm?: string;
|
||||
confidence?: number;
|
||||
durationMinutes?: number;
|
||||
durationMs?: number;
|
||||
triggerTime?: string;
|
||||
message?: string;
|
||||
bbox?: string;
|
||||
@@ -29,6 +30,7 @@ export namespace AiotAlarmApi {
|
||||
handleRemark?: string;
|
||||
handledBy?: string;
|
||||
handledAt?: string;
|
||||
lastFrameTime?: string;
|
||||
workOrderId?: number;
|
||||
aiAnalysis?: Record<string, any>;
|
||||
createdAt?: string;
|
||||
|
||||
@@ -96,7 +96,7 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
|
||||
slots: { default: 'confidence' },
|
||||
},
|
||||
{
|
||||
field: 'durationMinutes',
|
||||
field: 'durationMs',
|
||||
title: '持续时长',
|
||||
width: 125,
|
||||
slots: { default: 'duration' },
|
||||
@@ -127,10 +127,10 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
|
||||
slots: { default: 'snapshot' },
|
||||
},
|
||||
{
|
||||
field: 'createdAt',
|
||||
title: '创建时间',
|
||||
field: 'lastFrameTime',
|
||||
title: '结束时间',
|
||||
minWidth: 170,
|
||||
formatter: 'formatDateTime',
|
||||
slots: { default: 'endTime' },
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
|
||||
@@ -21,6 +21,22 @@ import {
|
||||
|
||||
defineOptions({ name: 'AiotAlarmList' });
|
||||
|
||||
/** 格式化持续时长(毫秒 → 可读文本) */
|
||||
function formatDuration(ms: number): string {
|
||||
if (!ms || ms <= 0) return '--';
|
||||
if (ms < 60000) {
|
||||
return `${Math.round(ms / 1000)} 秒`;
|
||||
}
|
||||
if (ms < 3600000) {
|
||||
const minutes = Math.floor(ms / 60000);
|
||||
const seconds = Math.round((ms % 60000) / 1000);
|
||||
return seconds > 0 ? `${minutes} 分 ${seconds} 秒` : `${minutes} 分`;
|
||||
}
|
||||
const hours = Math.floor(ms / 3600000);
|
||||
const minutes = Math.round((ms % 3600000) / 60000);
|
||||
return minutes > 0 ? `${hours} 小时 ${minutes} 分` : `${hours} 小时`;
|
||||
}
|
||||
|
||||
const currentAlert = ref<AiotAlarmApi.Alert | null>(null);
|
||||
const detailVisible = ref(false);
|
||||
|
||||
@@ -202,10 +218,17 @@ const [Grid, gridApi] = useVbenVxeGrid({
|
||||
|
||||
<!-- 持续时长列 -->
|
||||
<template #duration="{ row }">
|
||||
<span v-if="row.durationMinutes != null"
|
||||
>{{ row.durationMinutes }} 分钟</span
|
||||
>
|
||||
<span v-else class="text-gray-400">-</span>
|
||||
<span v-if="row.durationMs != null && row.durationMs > 0">{{
|
||||
formatDuration(row.durationMs)
|
||||
}}</span>
|
||||
<span v-else class="text-gray-400">--</span>
|
||||
</template>
|
||||
|
||||
<!-- 结束时间列 -->
|
||||
<template #endTime="{ row }">
|
||||
<span v-if="row.lastFrameTime">{{ row.lastFrameTime }}</span>
|
||||
<span v-else-if="row.handledAt">{{ row.handledAt }}</span>
|
||||
<span v-else class="text-gray-400">--</span>
|
||||
</template>
|
||||
|
||||
<!-- 状态列 -->
|
||||
@@ -311,8 +334,8 @@ const [Grid, gridApi] = useVbenVxeGrid({
|
||||
<div>
|
||||
<span class="text-gray-500">持续时长:</span>
|
||||
<span>{{
|
||||
currentAlert.durationMinutes != null
|
||||
? `${currentAlert.durationMinutes} 分钟`
|
||||
currentAlert.durationMs != null && currentAlert.durationMs > 0
|
||||
? formatDuration(currentAlert.durationMs)
|
||||
: '-'
|
||||
}}</span>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user