feat: 实现边缘节点资产与离线状态管理 (#76)

2026-08-28 14:25:32 +08:00
parent a9fd8e8a47
commit 2db49fc955
20 changed files with 970 additions and 10 deletions
@@ -0,0 +1,9 @@
+import request from '@/utils/request'
+
+export function listEdgeNodes(query) {
+  return request({ url: '/api/v1/edge-nodes', method: 'get', params: query })
+}
+
+export function getEdgeNode(id) {
+  return request({ url: `/api/v1/edge-nodes/${encodeURIComponent(id)}`, method: 'get' })
+}
@@ -0,0 +1,36 @@
+const stateLabels = {
+  online: '在线',
+  offline: '离线',
+  recovering: '恢复中',
+  ready: '正常',
+  unavailable: '不可用',
+  idle: '无待回填',
+  pending: '等待回填'
+}
+
+const eventLabels = {
+  heartbeat_received: '首次心跳',
+  heartbeat_timeout: '心跳超时',
+  node_recovered: '心跳恢复',
+  recovery_started: '开始恢复'
+}
+
+export function stateLabel(value) { return stateLabels[value] || value || '未知' }
+export function eventLabel(value) { return eventLabels[value] || value || '状态变化' }
+export function stateType(value) { return ({ online: 'success', offline: 'danger', recovering: 'warning', ready: 'success', unavailable: 'danger', idle: 'info', pending: 'warning' })[value] || 'info' }
+export function freshnessText(item) {
+  if (!item?.lastHeartbeatAt) return '从未收到心跳'
+  const seconds = Math.max(0, Number(item.freshnessSeconds) || 0)
+  if (item.stale) return `已陈旧 ${durationText(seconds)}`
+  return `${durationText(seconds)}前`
+}
+export function durationText(seconds) {
+  const value = Math.max(0, Number(seconds) || 0)
+  if (value < 60) return `${Math.floor(value)} 秒`
+  if (value < 3600) return `${Math.floor(value / 60)} 分钟`
+  if (value < 86400) return `${Math.floor(value / 3600)} 小时`
+  return `${Math.floor(value / 86400)} 天`
+}
+export function buildEdgeNodeQuery(query) {
+  return { pageIndex: Number(query.pageIndex) || 1, pageSize: Number(query.pageSize) || 10 }
+}
@@ -0,0 +1,88 @@
+<template>
+  <BasicLayout>
+    <template #wrapper>
+      <el-card class="box-card">
+        <div class="page-header">
+          <div><h3>边缘节点</h3><p>查看各现场节点的运行负载、连接状态和待回填数据。离线时保留最后一次已知状态。</p></div>
+          <el-button :icon="Refresh" :loading="loading" @click="load">刷新状态</el-button>
+        </div>
+
+        <el-alert v-if="summary.offline" type="warning" :closable="false" show-icon class="status-alert">
+          <template #title>{{ summary.offline }} 个节点离线</template>
+          离线阈值为 {{ summary.heartbeatTimeoutSeconds }} 秒。页面中的隧道、视频和回填数据是节点离线前的最后已知状态。
+        </el-alert>
+
+        <el-row :gutter="12" class="summary-row" aria-label="边缘节点概览">
+          <el-col v-for="item in summaryCards" :key="item.label" :xs="12" :sm="6">
+            <div class="summary-item"><span>{{ item.label }}</span><strong :class="item.className">{{ item.value }}</strong></div>
+          </el-col>
+        </el-row>
+
+        <el-table v-loading="loading" :data="nodes" border stripe empty-text="暂无边缘节点">
+          <el-table-column label="节点" min-width="180">
+            <template #default="scope"><strong>{{ scope.row.name }}</strong><div class="muted">{{ scope.row.id }} · {{ scope.row.location || '未填写位置' }}</div></template>
+          </el-table-column>
+          <el-table-column label="状态" width="106" align="center"><template #default="scope"><el-tag :type="stateType(scope.row.status)">{{ stateLabel(scope.row.status) }}</el-tag></template></el-table-column>
+          <el-table-column label="最近心跳" min-width="150"><template #default="scope"><div>{{ freshnessText(scope.row) }}</div><small>{{ formatTime(scope.row.lastHeartbeatAt) }}</small></template></el-table-column>
+          <el-table-column label="负载" min-width="112"><template #default="scope">{{ scope.row.loadUsed }} / {{ scope.row.loadCapacity }} 路</template></el-table-column>
+          <el-table-column label="控制隧道" min-width="142"><template #default="scope"><el-tag size="small" :type="stateType(scope.row.controlTunnelStatus)">{{ stateLabel(scope.row.controlTunnelStatus) }}</el-tag><div class="muted">{{ scope.row.controlLatencyMs ? `${scope.row.controlLatencyMs} ms` : scope.row.controlTunnelDetail }}</div></template></el-table-column>
+          <el-table-column label="视频数据面" min-width="150"><template #default="scope"><el-tag size="small" :type="stateType(scope.row.videoPlaneStatus)">{{ stateLabel(scope.row.videoPlaneStatus) }}</el-tag><div class="muted">{{ scope.row.activeStreamCount }} 路视频 · {{ scope.row.videoPlaneDetail }}</div></template></el-table-column>
+          <el-table-column label="回填队列" min-width="128"><template #default="scope"><el-tag size="small" :type="stateType(scope.row.backfillStatus)">{{ stateLabel(scope.row.backfillStatus) }}</el-tag><div class="muted">{{ scope.row.backfillQueueDepth }} 条待回填</div></template></el-table-column>
+          <el-table-column label="版本" min-width="130"><template #default="scope"><div>{{ scope.row.runtimeVersion || '—' }}</div><small>{{ scope.row.modelVersion || '未部署模型' }}</small></template></el-table-column>
+          <el-table-column label="操作" width="92" fixed="right"><template #default="scope"><el-button v-permisaction="['sense:edge-node: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="load" />
+      </el-card>
+
+      <el-dialog v-model="detailOpen" title="边缘节点详情" width="min(800px, calc(100vw - 24px))" :close-on-click-modal="false">
+        <template v-if="selected">
+          <el-alert v-if="selected.stale" title="当前显示最后已知状态" type="warning" :closable="false" show-icon class="detail-alert">最近心跳距今 {{ durationText(selected.freshnessSeconds) }}；连接恢复前，下列通道数据不会继续更新。</el-alert>
+          <el-descriptions :column="2" border>
+            <el-descriptions-item label="节点">{{ selected.name }}（{{ selected.id }}）</el-descriptions-item><el-descriptions-item label="位置">{{ selected.location || '未填写' }}</el-descriptions-item>
+            <el-descriptions-item label="运行版本">{{ selected.runtimeVersion || '—' }}</el-descriptions-item><el-descriptions-item label="模型版本">{{ selected.modelVersion || '未部署' }}</el-descriptions-item>
+            <el-descriptions-item label="运行时长">{{ durationText(selected.uptimeSeconds) }}</el-descriptions-item><el-descriptions-item label="最近心跳">{{ formatTime(selected.lastHeartbeatAt) }}</el-descriptions-item>
+            <el-descriptions-item label="控制隧道">{{ stateLabel(selected.controlTunnelStatus) }} · {{ selected.controlTunnelDetail }}</el-descriptions-item><el-descriptions-item label="视频数据面">{{ stateLabel(selected.videoPlaneStatus) }} · {{ selected.videoPlaneDetail }}</el-descriptions-item>
+            <el-descriptions-item label="回填队列">{{ stateLabel(selected.backfillStatus) }} · {{ selected.backfillQueueDepth }} 条</el-descriptions-item><el-descriptions-item label="恢复阶段">{{ recoveryText(selected) }}</el-descriptions-item>
+          </el-descriptions>
+          <h4 class="audit-title">状态审计</h4>
+          <el-timeline v-if="selected.events?.length">
+            <el-timeline-item v-for="event in selected.events" :key="event.id" :timestamp="formatTime(event.occurredAt)" placement="top"><strong>{{ eventLabel(event.eventType) }}</strong><div>{{ stateLabel(event.fromStatus) }} → {{ stateLabel(event.toStatus) }}</div><small>{{ event.detail }}</small></el-timeline-item>
+          </el-timeline>
+          <el-empty v-else description="暂无状态变化记录" :image-size="72" />
+        </template>
+        <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 } from '@element-plus/icons-vue'
+import { ElMessage } from 'element-plus'
+import { getEdgeNode, listEdgeNodes } from '@/api/sense/edge-node'
+import { buildEdgeNodeQuery, durationText, eventLabel, freshnessText, stateLabel, stateType } from './edgeNodeState'
+
+defineOptions({ name: 'SenseEdgeNode' })
+const loading = ref(false)
+const nodes = ref([])
+const total = ref(0)
+const detailOpen = ref(false)
+const selected = ref(null)
+const query = reactive({ pageIndex: 1, pageSize: 10 })
+const summary = reactive({ total: 0, online: 0, offline: 0, recovering: 0, loadUsed: 0, loadCapacity: 0, backfillQueueDepth: 0, heartbeatTimeoutSeconds: 90 })
+const summaryCards = computed(() => [
+  { label: '节点总数', value: summary.total }, { label: '在线 / 恢复中', value: `${summary.online} / ${summary.recovering}`, className: 'online-number' },
+  { label: '总负载', value: `${summary.loadUsed} / ${summary.loadCapacity} 路` }, { label: '待回填', value: `${summary.backfillQueueDepth} 条`, className: summary.backfillQueueDepth ? 'warning-number' : '' }
+])
+function unwrap(response) { return response?.data?.data ?? response?.data ?? response }
+function formatTime(value) { return value ? new Date(value).toLocaleString('zh-CN', { hour12: false }) : '—' }
+function recoveryText(item) { return item.status === 'recovering' ? (item.recoveryPhase || '通道收敛中') : '已收敛' }
+async function load() { loading.value = true; try { const payload = unwrap(await listEdgeNodes(buildEdgeNodeQuery(query))) || {}; nodes.value = payload.list || []; total.value = payload.count || 0; Object.assign(summary, payload.summary || {}) } catch (error) { ElMessage.error(error.message || '边缘节点加载失败') } finally { loading.value = false } }
+async function openDetail(id) { try { selected.value = unwrap(await getEdgeNode(id)); detailOpen.value = true } catch (error) { ElMessage.error(error.message || '节点详情加载失败') } }
+onMounted(load)
+</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}.status-alert{margin:16px 0}.summary-row{margin:16px 0 20px}.summary-item{display:flex;align-items:center;justify-content:space-between;min-height:72px;padding:12px 16px;border:1px solid #ebeef5;border-radius:4px}.summary-item span{color:#606266}.summary-item strong{font-size:20px}.online-number{color:#67c23a}.warning-number{color:#e6a23c}.muted,small{color:#909399;font-size:12px}.detail-alert{margin-bottom:16px}.audit-title{margin:20px 0 14px}@media(max-width:768px){.page-header{align-items:stretch;flex-direction:column}.summary-item{margin-bottom:8px;min-height:64px}.page-header .el-button{min-height:44px}}
+</style>
@@ -0,0 +1,14 @@
+import request from '@/utils/request'
+import { getEdgeNode, listEdgeNodes } from '@/api/sense/edge-node'
+
+jest.mock('@/utils/request', () => jest.fn())
+
+describe('Sense edge node API', () => {
+  beforeEach(() => request.mockReset())
+  test('uses read-only endpoints and encodes identifiers', () => {
+    listEdgeNodes({ pageIndex: 1, pageSize: 10 })
+    getEdgeNode('edge/site 01')
+    expect(request).toHaveBeenNthCalledWith(1, { url: '/api/v1/edge-nodes', method: 'get', params: { pageIndex: 1, pageSize: 10 } })
+    expect(request).toHaveBeenNthCalledWith(2, { url: '/api/v1/edge-nodes/edge%2Fsite%2001', method: 'get' })
+  })
+})
@@ -0,0 +1,18 @@
+import { buildEdgeNodeQuery, durationText, eventLabel, freshnessText, stateLabel, stateType } from '@/views/sense/edge-node/edgeNodeState'
+
+describe('Sense edge node presentation state', () => {
+  test('uses operator-facing connection and channel labels', () => {
+    expect(stateLabel('offline')).toBe('离线')
+    expect(stateLabel('recovering')).toBe('恢复中')
+    expect(stateType('offline')).toBe('danger')
+    expect(eventLabel('node_recovered')).toBe('心跳恢复')
+  })
+  test('makes stale last-known data explicit', () => {
+    expect(freshnessText({ stale: true, freshnessSeconds: 245, lastHeartbeatAt: '2026-08-28T00:00:00Z' })).toBe('已陈旧 4 分钟')
+    expect(freshnessText({ stale: false, freshnessSeconds: 18, lastHeartbeatAt: '2026-08-28T00:00:00Z' })).toBe('18 秒前')
+    expect(durationText(172800)).toBe('2 天')
+  })
+  test('sends only allowlisted pagination fields', () => {
+    expect(buildEdgeNodeQuery({ pageIndex: '2', pageSize: 20, ignored: 'not-sent' })).toEqual({ pageIndex: 2, pageSize: 20 })
+  })
+})