feat: 实现 Sense 本地事件只读查看 (#73)

2026-08-28 10:26:13 +08:00
parent 44b60b5b46
commit 028519a710
16 changed files with 891 additions and 0 deletions
@@ -0,0 +1,9 @@
+import request from '@/utils/request'
+
+export function listLocalEvents(query) {
+  return request({ url: '/api/v1/local-events', method: 'get', params: query })
+}
+
+export function getLocalEvent(id) {
+  return request({ url: `/api/v1/local-events/${encodeURIComponent(id)}`, method: 'get' })
+}
@@ -0,0 +1,155 @@
+<template>
+  <BasicLayout>
+    <template #wrapper>
+      <el-card class="box-card">
+        <div class="page-header">
+          <div>
+            <h3>本地事件候选</h3>
+            <p>查看 Sense 在本机形成的匿名事件候选及证据处理状态。</p>
+          </div>
+          <el-button :icon="Refresh" @click="loadEvents">刷新</el-button>
+        </div>
+
+        <el-alert type="info" :closable="false" show-icon class="boundary-alert">
+          <template #title>本页不依赖 Bell</template>
+          这里展示的是 Sense 本地事件候选，不代表已生成或已送达 Bell 预警；Bell 未安装或未启动时仍可正常查看。
+        </el-alert>
+
+        <el-row :gutter="12" class="summary-row" aria-label="当前页事件概览">
+          <el-col :xs="24" :sm="8"><div class="summary-item"><span>当前页候选</span><strong>{{ pageSummary.candidate }}</strong></div></el-col>
+          <el-col :xs="24" :sm="8"><div class="summary-item"><span>当前页已确认</span><strong>{{ pageSummary.confirmed }}</strong></div></el-col>
+          <el-col :xs="24" :sm="8"><div class="summary-item"><span>当前页证据失败</span><strong>{{ pageSummary.failed }}</strong></div></el-col>
+        </el-row>
+
+        <el-form :model="query" label-width="78px" class="filter-form" @submit.prevent="search">
+          <el-form-item label="发生时间" class="time-field">
+            <el-date-picker v-model="occurredRange" type="datetimerange" start-placeholder="开始时间" end-placeholder="结束时间" range-separator="至" :clearable="true" />
+          </el-form-item>
+          <el-form-item label="候选状态">
+            <el-select v-model="query.candidateState" clearable placeholder="全部">
+              <el-option label="候选" value="candidate" /><el-option label="已确认事件" value="confirmed" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="证据状态">
+            <el-select v-model="query.evidenceState" clearable placeholder="全部">
+              <el-option label="处理中" value="pending" /><el-option label="成功" value="success" /><el-option label="失败" value="failed" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="规则来源"><el-input v-model="query.ruleRef" clearable placeholder="规则编号" /></el-form-item>
+          <el-form-item label="关键词"><el-input v-model="query.keyword" clearable placeholder="事件 / 摄像头 / 规则" @keyup.enter="search" /></el-form-item>
+          <el-form-item class="filter-actions">
+            <el-button type="primary" :icon="Search" native-type="submit">查询</el-button>
+            <el-button :icon="RefreshLeft" @click="reset">重置</el-button>
+          </el-form-item>
+        </el-form>
+
+        <el-table v-loading="loading" :data="events" border stripe empty-text="没有符合条件的本地事件候选">
+          <el-table-column prop="occurredAt" label="发生时间" width="176">
+            <template #default="scope">{{ parseTime(scope.row.occurredAt) }}</template>
+          </el-table-column>
+          <el-table-column prop="id" label="事件编号" min-width="205" show-overflow-tooltip />
+          <el-table-column label="摄像头" min-width="145">
+            <template #default="scope"><div>{{ scope.row.sourceRef }}</div><small>{{ scope.row.sourceLabel || '未命名位置' }}</small></template>
+          </el-table-column>
+          <el-table-column label="规则来源" min-width="160">
+            <template #default="scope"><div>{{ scope.row.ruleName }}</div><small>{{ scope.row.ruleRef }} {{ scope.row.ruleVersion }}</small></template>
+          </el-table-column>
+          <el-table-column label="候选状态" width="118" align="center">
+            <template #default="scope"><el-tag :type="candidateType(scope.row.candidateState)">{{ candidateLabel(scope.row.candidateState) }}</el-tag></template>
+          </el-table-column>
+          <el-table-column label="证据状态" width="104" align="center">
+            <template #default="scope"><el-tag :type="evidenceType(scope.row.evidenceState)">{{ evidenceLabel(scope.row.evidenceState) }}</el-tag></template>
+          </el-table-column>
+          <el-table-column label="保留期限" width="142">
+            <template #default="scope"><span :class="{ 'retention-warning': scope.row.retentionState === 'expiring' }">{{ retentionLabel(scope.row) }}</span></template>
+          </el-table-column>
+          <el-table-column label="操作" width="94" fixed="right">
+            <template #default="scope"><el-button v-permisaction="['sense:local-event:detail']" type="primary" link @click="openDetail(scope.row.id)">查看详情</el-button></template>
+          </el-table-column>
+        </el-table>
+        <pagination v-show="total > 0" v-model:current-page="query.pageIndex" v-model:page-size="query.pageSize" :total="total" @pagination="loadEvents" />
+        <p class="retention-help">保留策略由 Sense 服务端配置；列表显示每条记录的实际到期时间，到期清理策略不由本页面修改。列表和详情读取均受权限控制并进入系统操作审计。</p>
+      </el-card>
+
+      <el-dialog v-model="detailOpen" title="本地事件详情" width="min(760px, calc(100vw - 24px))" :close-on-click-modal="false">
+        <el-descriptions v-if="selected" :column="2" border class="detail-descriptions">
+          <el-descriptions-item label="事件编号">{{ selected.id }}</el-descriptions-item>
+          <el-descriptions-item label="发生时间">{{ parseTime(selected.occurredAt) }}</el-descriptions-item>
+          <el-descriptions-item label="摄像头">{{ selected.sourceRef }} / {{ selected.sourceLabel || '未命名位置' }}</el-descriptions-item>
+          <el-descriptions-item label="规则来源">{{ selected.ruleName }} {{ selected.ruleVersion }}</el-descriptions-item>
+          <el-descriptions-item label="区域引用">{{ selected.zoneRef || '-' }}</el-descriptions-item>
+          <el-descriptions-item label="保留期限">{{ retentionLabel(selected) }}</el-descriptions-item>
+          <el-descriptions-item label="候选状态"><el-tag :type="candidateType(selected.candidateState)">{{ candidateLabel(selected.candidateState) }}</el-tag></el-descriptions-item>
+          <el-descriptions-item label="证据状态"><el-tag :type="evidenceType(selected.evidenceState)">{{ evidenceLabel(selected.evidenceState) }}</el-tag></el-descriptions-item>
+          <el-descriptions-item label="Bell 送达状态" :span="2"><strong>不适用</strong> — 本地候选未发送到 Bell，本页不推断 Bell Alert 状态。</el-descriptions-item>
+        </el-descriptions>
+        <el-alert v-if="selected" :title="evidenceTitle" :type="evidenceType(selected.evidenceState)" :closable="false" show-icon class="evidence-alert">
+          {{ selected.evidenceDetail || '暂无更多证据处理说明' }}<template v-if="selected.evidenceRef"><br>本地证据引用：{{ selected.evidenceRef }}</template>
+        </el-alert>
+        <template #footer><el-button @click="detailOpen = false">关闭</el-button></template>
+      </el-dialog>
+    </template>
+  </BasicLayout>
+</template>
+
+<script setup>
+import { computed, onMounted, reactive, ref } from 'vue'
+import { Refresh, RefreshLeft, Search } from '@element-plus/icons-vue'
+import { ElMessage } from 'element-plus'
+import { getLocalEvent, listLocalEvents } from '@/api/sense/local-event'
+import { buildLocalEventQuery, candidateLabel, candidateType, evidenceLabel, evidenceType, retentionLabel } from './localEventState'
+
+defineOptions({ name: 'SenseLocalEvent' })
+
+const loading = ref(false)
+const events = ref([])
+const total = ref(0)
+const detailOpen = ref(false)
+const selected = ref(null)
+const now = Date.now()
+const occurredRange = ref([new Date(now - 24 * 60 * 60 * 1000), new Date(now)])
+const query = reactive({ pageIndex: 1, pageSize: 10, candidateState: '', evidenceState: '', ruleRef: '', keyword: '' })
+const pageSummary = computed(() => events.value.reduce((value, item) => {
+  if (item.candidateState === 'candidate') value.candidate += 1
+  if (item.candidateState === 'confirmed') value.confirmed += 1
+  if (item.evidenceState === 'failed') value.failed += 1
+  return value
+}, { candidate: 0, confirmed: 0, failed: 0 }))
+const evidenceTitle = computed(() => `证据处理：${evidenceLabel(selected.value?.evidenceState)}`)
+
+function unwrap(response) { return response?.data?.data ?? response?.data ?? response }
+
+async function loadEvents() {
+  loading.value = true
+  try {
+    const payload = unwrap(await listLocalEvents(buildLocalEventQuery(query, occurredRange.value)))
+    events.value = payload?.list || payload?.data || []
+    total.value = payload?.count || 0
+  } catch (error) {
+    ElMessage.error(error.message || '本地事件查询失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+function search() { query.pageIndex = 1; loadEvents() }
+function reset() {
+  query.pageIndex = 1; query.candidateState = ''; query.evidenceState = ''; query.ruleRef = ''; query.keyword = ''
+  const current = Date.now(); occurredRange.value = [new Date(current - 24 * 60 * 60 * 1000), new Date(current)]
+  loadEvents()
+}
+async function openDetail(id) {
+  try {
+    selected.value = unwrap(await getLocalEvent(id))
+    detailOpen.value = true
+  } catch (error) {
+    ElMessage.error(error.message || '本地事件详情查询失败')
+  }
+}
+
+onMounted(loadEvents)
+</script>
+
+<style scoped>
+.page-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.page-header h3{margin:0 0 6px}.page-header p{margin:0;color:#909399}.boundary-alert{margin:16px 0}.summary-row{margin-bottom:16px}.summary-item{display:flex;align-items:center;justify-content:space-between;min-height:68px;padding:12px 16px;border:1px solid #ebeef5;border-radius:4px}.summary-item span{color:#606266}.summary-item strong{font-size:24px}.filter-form{display:flex;align-items:flex-end;flex-wrap:wrap;gap:0 12px;margin-bottom:2px}.filter-form .el-form-item{width:210px}.filter-form .time-field{width:420px}.filter-form .filter-actions{width:auto}.filter-form :deep(.el-select),.filter-form :deep(.el-date-editor){width:100%}small{color:#909399}.retention-warning{color:#e6a23c}.retention-help{margin:12px 0 0;color:#909399;font-size:12px}.evidence-alert{margin-top:16px}@media (max-width:768px){.filter-form .el-form-item,.filter-form .time-field{width:100%}.detail-descriptions :deep(.el-descriptions__body .el-descriptions__table){display:block;overflow-x:auto}}
+</style>
@@ -0,0 +1,41 @@
+export const candidateLabels = { candidate: '候选', confirmed: '已确认事件' }
+export const evidenceLabels = { pending: '处理中', success: '成功', failed: '失败' }
+
+export function candidateLabel(value) {
+  return candidateLabels[value] || value || '-'
+}
+
+export function candidateType(value) {
+  return value === 'confirmed' ? 'success' : 'primary'
+}
+
+export function evidenceLabel(value) {
+  return evidenceLabels[value] || value || '-'
+}
+
+export function evidenceType(value) {
+  return ({ pending: 'warning', success: 'success', failed: 'danger' })[value] || 'info'
+}
+
+export function buildLocalEventQuery(query, occurredRange) {
+  const result = {
+    pageIndex: query.pageIndex,
+    pageSize: query.pageSize,
+    candidateState: query.candidateState || undefined,
+    evidenceState: query.evidenceState || undefined,
+    ruleRef: String(query.ruleRef || '').trim() || undefined,
+    keyword: String(query.keyword || '').trim() || undefined
+  }
+  if (occurredRange?.length === 2) {
+    result.occurredAfter = new Date(occurredRange[0]).toISOString()
+    result.occurredBefore = new Date(occurredRange[1]).toISOString()
+  }
+  return result
+}
+
+export function retentionLabel(item) {
+  if (!item?.retainUntil) return '-'
+  if (item.retentionState === 'expired') return '已到期'
+  if (item.retentionState === 'expiring') return `${item.remainingDays} 天内到期`
+  return `保留至 ${String(item.retainUntil).slice(0, 10)}`
+}
@@ -0,0 +1,15 @@
+import request from '@/utils/request'
+import { getLocalEvent, listLocalEvents } from '@/api/sense/local-event'
+
+jest.mock('@/utils/request', () => jest.fn())
+
+describe('Sense local event API', () => {
+  beforeEach(() => request.mockReset())
+
+  test('uses read-only local endpoints', () => {
+    listLocalEvents({ pageIndex: 1, pageSize: 10 })
+    getLocalEvent('event/unsafe')
+    expect(request).toHaveBeenNthCalledWith(1, { url: '/api/v1/local-events', method: 'get', params: { pageIndex: 1, pageSize: 10 }})
+    expect(request).toHaveBeenNthCalledWith(2, { url: '/api/v1/local-events/event%2Funsafe', method: 'get' })
+  })
+})
@@ -0,0 +1,23 @@
+import { buildLocalEventQuery, candidateLabel, evidenceLabel, evidenceType, retentionLabel } from '@/views/sense/local-event/localEventState'
+
+describe('Sense local event presentation state', () => {
+  test('keeps candidate and evidence states distinct', () => {
+    expect(candidateLabel('candidate')).toBe('候选')
+    expect(candidateLabel('confirmed')).toBe('已确认事件')
+    expect(evidenceLabel('pending')).toBe('处理中')
+    expect(evidenceLabel('success')).toBe('成功')
+    expect(evidenceLabel('failed')).toBe('失败')
+    expect(evidenceType('failed')).toBe('danger')
+  })
+
+  test('builds an allowlisted query with RFC3339 time bounds', () => {
+    const result = buildLocalEventQuery({ pageIndex: 2, pageSize: 20, candidateState: 'candidate', evidenceState: 'failed', ruleRef: ' rule-1 ', keyword: ' camera-3 ', ignored: 'not-sent' }, ['2026-08-27T00:00:00Z', '2026-08-28T00:00:00Z'])
+    expect(result).toEqual({ pageIndex: 2, pageSize: 20, candidateState: 'candidate', evidenceState: 'failed', ruleRef: 'rule-1', keyword: 'camera-3', occurredAfter: '2026-08-27T00:00:00.000Z', occurredBefore: '2026-08-28T00:00:00.000Z' })
+  })
+
+  test('describes retention without inventing a global duration', () => {
+    expect(retentionLabel({ retainUntil: '2026-09-09T00:00:00Z', retentionState: 'active', remainingDays: 12 })).toBe('保留至 2026-09-09')
+    expect(retentionLabel({ retainUntil: '2026-08-30T00:00:00Z', retentionState: 'expiring', remainingDays: 2 })).toBe('2 天内到期')
+    expect(retentionLabel({ retainUntil: '2026-08-01T00:00:00Z', retentionState: 'expired', remainingDays: 0 })).toBe('已到期')
+  })
+})