XuqmGroup-Web/tenant-platform/src/views/im/WebhookAlertView.vue
XuqmGroup 6cd938cfbc feat(android-sdk): 添加完整的IM客户端SDK实现
- 实现了Android SDK的完整IM功能接口,包括消息、群组、好友、会话等核心功能
- 添加了消息收发、历史记录、撤回编辑等完整的消息操作能力
- 实现了群组管理功能,包括创建、成员管理、权限设置等操作
- 添加了好友关系链管理,支持添加、删除、分组等操作
- 实现了会话管理功能,包括置顶、免打扰、已读状态等
- 添加了黑名单、资料管理、搜索等辅助功能
- 补齐了批量操作接口,提升客户端操作效率
- 实现了WebSocket连接管理和事件监听机制
- 添加了离线消息同步和状态管理功能
2026-05-02 22:57:55 +08:00

134 行
4.6 KiB
Vue

<template>
<div v-if="app">
<el-page-header @back="$router.back()" content="Webhook 告警" style="margin-bottom:24px" />
<el-card style="margin-bottom:16px">
<el-descriptions :column="2" border>
<el-descriptions-item label="应用名称">{{ app.name }}</el-descriptions-item>
<el-descriptions-item label="未确认告警">
<el-tag v-if="unacknowledgedCount > 0" type="danger">{{ unacknowledgedCount }}</el-tag>
<span v-else>0</span>
</el-descriptions-item>
</el-descriptions>
</el-card>
<el-card>
<template #header>告警列表</template>
<div class="toolbar toolbar-space-between" style="margin-bottom:16px">
<div style="display:flex;gap:12px;align-items:center">
<el-select v-model="filterAcknowledged" placeholder="确认状态" clearable style="width:140px">
<el-option label="未确认" :value="false" />
<el-option label="已确认" :value="true" />
</el-select>
<el-button @click="loadAlerts" :loading="loading">查询</el-button>
</div>
</div>
<el-table :data="alerts" v-loading="loading" border stripe>
<el-table-column prop="webhookUrl" label="回调地址" min-width="260" show-overflow-tooltip />
<el-table-column prop="alertType" label="类型" width="120">
<template #default="{ row }">
<el-tag v-if="row.alertType === 'AUTO_DISABLED'" type="danger" size="small">自动禁用</el-tag>
<el-tag v-else type="warning" size="small">{{ row.alertType }}</el-tag>
</template>
</el-table-column>
<el-table-column prop="description" label="说明" min-width="240" show-overflow-tooltip />
<el-table-column label="状态" width="90">
<template #default="{ row }">
<el-tag :type="row.acknowledged ? 'info' : 'danger'" size="small">
{{ row.acknowledged ? '已确认' : '未确认' }}
</el-tag>
</template>
</el-table-column>
<el-table-column prop="createdAt" label="告警时间" width="170">
<template #default="{ row }">{{ formatTime(row.createdAt) }}</template>
</el-table-column>
<el-table-column label="操作" width="120" fixed="right">
<template #default="{ row }">
<el-button
v-if="!row.acknowledged"
link
type="primary"
size="small"
@click="acknowledge(row)"
>确认</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
v-model:current-page="page"
v-model:page-size="size"
:total="total"
:page-sizes="[10, 20, 50]"
layout="total, sizes, prev, pager, next"
style="margin-top:16px"
@change="loadAlerts"
/>
</el-card>
</div>
</template>
<script setup lang="ts">
import { computed, onMounted, ref, watch } from 'vue'
import { useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import { appApi, type App } from '@/api/app'
import { imAdminApi, type WebhookAlert } from '@/api/im'
const route = useRoute()
const app = ref<App | null>(null)
const appId = computed(() => route.params.appId as string)
const alerts = ref<WebhookAlert[]>([])
const loading = ref(false)
const page = ref(1)
const size = ref(20)
const total = ref(0)
const filterAcknowledged = ref<boolean | ''>('')
const unacknowledgedCount = ref(0)
async function loadApp() {
const res = await appApi.get(appId.value)
app.value = res.data.data
}
async function loadAlerts() {
loading.value = true
try {
const params: Record<string, unknown> = { page: page.value - 1, size: size.value }
if (filterAcknowledged.value !== '') params.acknowledged = filterAcknowledged.value
const res = await imAdminApi.listWebhookAlerts(appId.value, params)
alerts.value = res.data.data.content
total.value = res.data.data.totalElements
} finally {
loading.value = false
}
}
async function loadUnacknowledgedCount() {
const res = await imAdminApi.listWebhookAlerts(appId.value, { acknowledged: false, size: 1 })
unacknowledgedCount.value = Number(res.data.data.totalElements)
}
async function acknowledge(row: WebhookAlert) {
await imAdminApi.acknowledgeWebhookAlert(appId.value, row.id)
ElMessage.success('已确认')
await loadAlerts()
await loadUnacknowledgedCount()
}
function formatTime(value: number) {
return new Date(value).toLocaleString()
}
watch([filterAcknowledged], () => {
page.value = 1
loadAlerts()
})
onMounted(async () => {
await Promise.all([loadApp(), loadAlerts(), loadUnacknowledgedCount()])
})
</script>