From 809dc883f530bb30c361960574072e9441ec21c1 Mon Sep 17 00:00:00 2001
From: zxr <271055687@qq.com>
Date: Mon, 3 Aug 2026 21:52:48 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=BB=BA=E7=AB=8B=E5=8E=86=E5=8F=B2?=
 =?UTF-8?q?=E6=8A=A5=E5=91=8A=E6=A1=A3=E6=A1=88=E4=B8=AD=E5=BF=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/ops/report.ts                        |   2 +
 src/views/ops/pages/report/history/index.vue | 328 +++++++++++++++++--
 2 files changed, 309 insertions(+), 21 deletions(-)

diff --git a/src/api/ops/report.ts b/src/api/ops/report.ts
index 8c7847d..b1def2c 100644
--- a/src/api/ops/report.ts
+++ b/src/api/ops/report.ts
@@ -43,6 +43,8 @@ export interface ReportRecord {
   file_path?: string
   file_size?: number
   file_mime?: string
+  started_at?: string
+  finished_at?: string
   created_at: string
   updated_at: string
 }
diff --git a/src/views/ops/pages/report/history/index.vue b/src/views/ops/pages/report/history/index.vue
index 19b7552..79cb6b8 100644
--- a/src/views/ops/pages/report/history/index.vue
+++ b/src/views/ops/pages/report/history/index.vue
@@ -1,38 +1,324 @@
 <template>
-  <div class="wrap">
-    <a-result
-      status="info"
-      title="历史报表入口已下线"
-      sub-title="多指标、多目标时序请使用「统计报告」：output_mode=timeseries，并按接口文档配置 interval 与 bucket_aggregation。旧类型记录仍可在各报表列表中按 report_type 筛选查看（若库中有数据）。"
+  <div class="container">
+    <search-table
+      :form-model="formModel"
+      :form-items="formItems"
+      :data="tableData"
+      :columns="tableColumns"
+      :loading="loading"
+      :pagination="pagination"
+      :title="pageTitle"
+      @update:form-model="handleFormModelUpdate"
+      @search="handleSearch"
+      @reset="handleReset"
+      @refresh="handleRefresh"
+      @page-change="handlePageChange"
+      @page-size-change="handlePageSizeChange"
     >
-      <template #extra>
-        <a-space>
-          <a-button type="primary" @click="goStatistics">前往统计报告</a-button>
-          <a-button @click="goTopn">前往 TopN</a-button>
-        </a-space>
+      <template #form-items>
+        <a-col :span="8">
+          <a-form-item label="创建时间" :label-col-props="{ span: 6 }" :wrapper-col-props="{ span: 18 }">
+            <a-range-picker
+              v-model="formModel.timeRange"
+              show-time
+              format="YYYY-MM-DD HH:mm:ss"
+              value-format="YYYY-MM-DD HH:mm:ss"
+              style="width: 100%"
+            />
+          </a-form-item>
+        </a-col>
       </template>
-    </a-result>
+
+      <template #reportType="{ record }">
+        {{ reportTypeLabel[record.report_type] || record.report_type || '—' }}
+      </template>
+
+      <template #status="{ record }">
+        <a-tag :color="reportStatusColor(record.status)">
+          {{ reportStatusLabel[record.status] || record.status || '—' }}
+        </a-tag>
+      </template>
+
+      <template #failureReason="{ record }">
+        {{ record.error_message || '—' }}
+      </template>
+
+      <template #operations="{ record }">
+        <a-button
+          v-if="canDownloadPDF(record)"
+          type="text"
+          size="small"
+          :loading="downloadingId === record.id"
+          @click="handleDownloadPDF(record)"
+        >
+          下载 PDF
+        </a-button>
+        <span v-else-if="record.status === 'failed'" class="operation-note">生成失败</span>
+        <span v-else-if="record.status === 'pending' || record.status === 'running'" class="operation-note">生成中</span>
+        <span v-else class="operation-note">无 PDF</span>
+      </template>
+    </search-table>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { useRouter } from 'vue-router'
+import { computed, reactive, ref } from 'vue'
+import { Message } from '@arco-design/web-vue'
+import SearchTable from '@/components/search-table/index.vue'
+import type { FormItem } from '@/components/search-form/types'
+import {
+  fetchReportList,
+  ReportStatus,
+  ReportType,
+  type ReportListParams,
+  type ReportRecord,
+} from '@/api/ops/report'
+import { downloadReportFile } from '../useReportExport'
+import { normalizeReportRows, reportStatusColor, reportStatusLabel } from '../useReportListRow'
 
-const router = useRouter()
+const pageTitle = '历史报告'
 
-const goStatistics = () => {
-  router.push('/report/statistics')
+const reportTypeLabel: Record<string, string> = {
+  topn: 'TopN报表',
+  statistics: '统计报告',
+  traffic: '流量统计报告',
+  fault: '故障报告',
+  server: '服务器报告',
+  network_device: '网络设备报告',
+  evidence: '证据导出',
 }
 
-const goTopn = () => {
-  router.push('/report/topn')
+const pdfReportTypes = new Set([
+  ReportType.TOPN,
+  ReportType.STATISTICS,
+  ReportType.TRAFFIC,
+  ReportType.FAULT,
+  ReportType.SERVER,
+  ReportType.NETWORK_DEVICE,
+])
+
+const formModel = ref<{
+  report_type: ReportType | ''
+  status: ReportStatus | ''
+  keyword: string
+  timeRange: string[]
+}>({
+  report_type: '',
+  status: '',
+  keyword: '',
+  timeRange: [],
+})
+
+const formItems = computed<FormItem[]>(() => [
+  {
+    field: 'report_type',
+    label: '报表类型',
+    type: 'select',
+    span: 8,
+    placeholder: '请选择',
+    options: [
+      { value: '', label: '全部' },
+      { value: ReportType.TOPN, label: reportTypeLabel.topn },
+      { value: ReportType.STATISTICS, label: reportTypeLabel.statistics },
+      { value: ReportType.TRAFFIC, label: reportTypeLabel.traffic },
+      { value: ReportType.FAULT, label: reportTypeLabel.fault },
+      { value: ReportType.SERVER, label: reportTypeLabel.server },
+      { value: ReportType.NETWORK_DEVICE, label: reportTypeLabel.network_device },
+    ],
+  },
+  {
+    field: 'status',
+    label: '状态',
+    type: 'select',
+    span: 8,
+    placeholder: '请选择',
+    options: [
+      { value: '', label: '全部' },
+      { value: ReportStatus.PENDING, label: reportStatusLabel.pending },
+      { value: ReportStatus.RUNNING, label: reportStatusLabel.running },
+      { value: ReportStatus.SUCCESS, label: reportStatusLabel.success },
+      { value: ReportStatus.FAILED, label: reportStatusLabel.failed },
+    ],
+  },
+  {
+    field: 'keyword',
+    label: '标题',
+    type: 'input',
+    span: 8,
+    placeholder: '请输入标题关键字',
+  },
+])
+
+const loading = ref(false)
+const downloadingId = ref<number | null>(null)
+const tableData = ref<ReportRecord[]>([])
+
+const pagination = reactive({
+  current: 1,
+  pageSize: 20,
+  total: 0,
+  showTotal: true,
+  showJumper: true,
+  showPageSize: true,
+})
+
+const tableColumns = computed(() => [
+  {
+    title: '报告编号',
+    dataIndex: 'id',
+    width: 100,
+  },
+  {
+    title: '标题',
+    dataIndex: 'title',
+    width: 220,
+  },
+  {
+    title: '报表类型',
+    dataIndex: 'report_type',
+    width: 150,
+    slotName: 'reportType',
+  },
+  {
+    title: '状态',
+    dataIndex: 'status',
+    width: 100,
+    slotName: 'status',
+  },
+  {
+    title: '创建时间',
+    dataIndex: 'created_at',
+    width: 180,
+  },
+  {
+    title: '完成时间',
+    dataIndex: 'finished_at',
+    width: 180,
+  },
+  {
+    title: '失败原因',
+    dataIndex: 'error_message',
+    width: 220,
+    slotName: 'failureReason',
+  },
+  {
+    title: '操作',
+    dataIndex: 'operations',
+    width: 120,
+    slotName: 'operations',
+    fixed: 'right' as const,
+  },
+])
+
+const canDownloadPDF = (record: ReportRecord) =>
+  record.status === ReportStatus.SUCCESS && pdfReportTypes.has(record.report_type as ReportType)
+
+const fetchList = async () => {
+  loading.value = true
+
+  try {
+    const params: ReportListParams = {
+      page: pagination.current,
+      size: pagination.pageSize,
+    }
+
+    if (formModel.value.report_type) {
+      params.report_type = formModel.value.report_type
+    }
+    if (formModel.value.status) {
+      params.status = formModel.value.status
+    }
+    const keyword = formModel.value.keyword.trim()
+    if (keyword) {
+      params.keyword = keyword
+    }
+    if (formModel.value.timeRange.length === 2) {
+      params.created_from = formModel.value.timeRange[0]
+      params.created_to = formModel.value.timeRange[1]
+    }
+
+    const res = await fetchReportList(params)
+    if (res.code === 0 && res.details) {
+      tableData.value = normalizeReportRows(res.details.data || [])
+      pagination.total = res.details.total || 0
+    } else {
+      Message.error(res.message || '获取报表列表失败')
+    }
+  } catch (error: any) {
+    console.error('获取报表列表失败:', error)
+    Message.error(error.message || '获取报表列表失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+const handleFormModelUpdate = (value: Record<string, any>) => {
+  formModel.value = {
+    ...formModel.value,
+    ...value,
+  }
+}
+
+const handleSearch = () => {
+  pagination.current = 1
+  fetchList()
+}
+
+const handleReset = () => {
+  formModel.value = {
+    report_type: '',
+    status: '',
+    keyword: '',
+    timeRange: [],
+  }
+  pagination.current = 1
+  fetchList()
+}
+
+const handleRefresh = () => {
+  fetchList()
+  Message.success('数据已刷新')
+}
+
+const handlePageChange = (current: number) => {
+  pagination.current = current
+  fetchList()
+}
+
+const handlePageSizeChange = (pageSize: number) => {
+  pagination.pageSize = pageSize
+  pagination.current = 1
+  fetchList()
+}
+
+const handleDownloadPDF = async (record: ReportRecord) => {
+  downloadingId.value = record.id
+  try {
+    await downloadReportFile(record, 'pdf')
+    Message.success('PDF 下载成功')
+  } catch (error: any) {
+    console.error('PDF 下载失败:', error)
+    Message.error(error.message || 'PDF 下载失败')
+  } finally {
+    downloadingId.value = null
+  }
+}
+
+fetchList()
+</script>
+
+<script lang="ts">
+export default {
+  name: 'ReportHistory',
 }
 </script>
 
 <style scoped lang="less">
-.wrap {
-  padding: 48px 24px;
-  max-width: 720px;
-  margin: 0 auto;
+.container {
+  padding: 20px;
+
+  .operation-note {
+    color: var(--color-text-3);
+  }
 }
 </style>