实现通知记录界面

src/layouts/MainLayout.vue

@@ -77,6 +77,10 @@
             <el-icon><FirstAidKit /></el-icon>
             <template #title>用药记录</template>
           </el-menu-item>
+          <el-menu-item index="/monitor/notifications">
+            <el-icon><Bell /></el-icon>
+            <template #title>通知记录</template>
+          </el-menu-item>
           <el-menu-item index="/monitor/pending-collections">
             <el-icon><Clock /></el-icon>
             <template #title>待采集请求</template>
@@ -183,14 +187,14 @@ import { ref, computed, onMounted, onUnmounted } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { 
   House, Monitor, Calendar, ArrowDown, Menu, Fold, Expand, Setting, Tickets, DataAnalysis, Document, Food,
-  FirstAidKit, Clock, Files, ShoppingCart, SoldOut, Warning, Switch, List, Shop, Coin, DataLine, Finished, User, ScaleToOriginal, OfficeBuilding, Management
+  FirstAidKit, Clock, Files, ShoppingCart, SoldOut, Warning, Switch, List, Shop, Coin, DataLine, Finished, User, ScaleToOriginal, OfficeBuilding, Management, Bell
 } from '@element-plus/icons-vue';
 
 export default {
   name: 'MainLayout',
   components: {
     House, Monitor, Calendar, ArrowDown, Menu, Fold, Expand, Setting, Tickets, DataAnalysis, Document, Food,
-    FirstAidKit, Clock, Files, ShoppingCart, SoldOut, Warning, Switch, List, Shop, Coin, DataLine, Finished, User, ScaleToOriginal, OfficeBuilding, Management
+    FirstAidKit, Clock, Files, ShoppingCart, SoldOut, Warning, Switch, List, Shop, Coin, DataLine, Finished, User, ScaleToOriginal, OfficeBuilding, Management, Bell
   },
   setup() {
     const route = useRoute();
@@ -233,6 +237,7 @@ export default {
         '/monitor/device-command-logs': '设备命令日志',
         '/monitor/feed-usage-records': '饲料使用记录',
         '/monitor/medication-logs': '用药记录',
+        '/monitor/notifications': '通知记录',
         '/monitor/pending-collections': '待采集请求',
         '/monitor/pig-batch-logs': '猪批次日志',
         '/monitor/pig-purchases': '猪只采购记录',

src/main.js

@@ -17,6 +17,7 @@ import PigBatchManagementView from './views/pms/PigBatchManagementView.vue'; //
 import DeviceCommandLogView from './views/monitor/DeviceCommandLogView.vue';
 import FeedUsageRecordsView from './views/monitor/FeedUsageRecordsView.vue';
 import MedicationLogsView from './views/monitor/MedicationLogsView.vue';
+import NotificationLogView from './views/monitor/NotificationLogView.vue';
 import PendingCollectionsView from './views/monitor/PendingCollectionsView.vue';
 import PigBatchLogsView from './views/monitor/PigBatchLogsView.vue';
 import PigPurchasesView from './views/monitor/PigPurchasesView.vue';
@@ -50,6 +51,7 @@ const routes = [
     {path: '/monitor/device-command-logs', component: DeviceCommandLogView, meta: {requiresAuth: true}},
     {path: '/monitor/feed-usage-records', component: FeedUsageRecordsView, meta: {requiresAuth: true}},
     {path: '/monitor/medication-logs', component: MedicationLogsView, meta: {requiresAuth: true}},
+    {path: '/monitor/notifications', component: NotificationLogView, meta: {requiresAuth: true}},
     {path: '/monitor/pending-collections', component: PendingCollectionsView, meta: {requiresAuth: true}},
     {path: '/monitor/pig-batch-logs', component: PigBatchLogsView, meta: {requiresAuth: true}},
     {path: '/monitor/pig-purchases', component: PigPurchasesView, meta: {requiresAuth: true}},

src/views/monitor/NotificationLogView.vue

@@ -0,0 +1,111 @@
+<template>
+  <div class="notification-log-view">
+    <GenericMonitorList
+      :fetchData="fetchNotifications"
+      :columnsConfig="notificationLogColumns"
+    />
+  </div>
+</template>
+
+<script setup>
+import GenericMonitorList from '../../components/GenericMonitorList.vue';
+import { getNotifications, ZapcoreLevel } from '../../api/monitor.js';
+import { formatRFC3339 } from '../../utils/format.js';
+
+// 适配通用组件的 fetchData prop
+const fetchNotifications = async (params) => {
+  return await getNotifications(params);
+};
+
+// 定义表格的列
+const notificationLogColumns = [
+  {
+    title: '用户ID',
+    dataIndex: 'user_id',
+    key: 'user_id',
+    sorter: true,
+    filterType: 'number',
+    minWidth: 100,
+  },
+  {
+    title: '通知渠道',
+    dataIndex: 'notifier_type',
+    key: 'notifier_type',
+    filterType: 'select',
+    filterOptions: [
+      { value: '邮件', text: '邮件' },
+      { value: '企业微信', text: '企业微信' },
+      { value: '飞书', text: '飞书' },
+      { value: '日志', text: '日志' },
+    ],
+    minWidth: 120,
+  },
+  {
+    title: '目标地址',
+    dataIndex: 'to_address',
+    key: 'to_address',
+    minWidth: 200,
+  },
+  {
+    title: '标题',
+    dataIndex: 'title',
+    key: 'title',
+    minWidth: 200,
+  },
+  {
+    title: '消息',
+    dataIndex: 'message',
+    key: 'message',
+    minWidth: 300,
+  },
+  {
+    title: '日志级别',
+    dataIndex: 'level',
+    key: 'level',
+    sorter: true,
+    filterType: 'select',
+    filterOptions: Object.entries(ZapcoreLevel).map(([text, value]) => ({ value, text })),
+    minWidth: 110,
+  },
+  {
+    title: '告警时间',
+    dataIndex: 'alarm_timestamp',
+    key: 'alarm_timestamp',
+    sorter: true,
+    formatter: (row, column, cellValue) => formatRFC3339(cellValue),
+    minWidth: 180,
+  },
+  {
+    title: '状态',
+    dataIndex: 'status',
+    key: 'status',
+    filterType: 'select',
+    filterOptions: [
+      { value: '发送成功', text: '发送成功' },
+      { value: '发送失败', text: '发送失败' },
+      { value: '已跳过', text: '已跳过' },
+    ],
+    minWidth: 120,
+  },
+  {
+    title: '错误信息',
+    dataIndex: 'error_message',
+    key: 'error_message',
+    minWidth: 200,
+  },
+  {
+    title: '创建时间',
+    dataIndex: 'created_at',
+    key: 'created_at',
+    sorter: true,
+    formatter: (row, column, cellValue) => formatRFC3339(cellValue),
+    minWidth: 180,
+  },
+];
+</script>
+
+<style scoped>
+.notification-log-view {
+  /* 视图容器样式 */
+}
+</style>