设备命令日志界面

src/views/monitor/DeviceCommandLogView.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="device-command-log-view">
+    <GenericMonitorList
+      :fetchData="fetchDeviceCommandLogs"
+      :columnsConfig="deviceCommandLogColumns"
+    />
+  </div>
+</template>
+
+<script setup>
+import GenericMonitorList from '../../components/GenericMonitorList.vue';
+import { getDeviceCommandLogs } from '../../api/monitor.js';
+
+// 适配通用组件的 fetchData prop
+const fetchDeviceCommandLogs = async (params) => {
+  // 调用真实的 API 函数
+  // getDeviceCommandLogs 需要返回一个 { list: [], total: 0 } 格式的对象
+  return await getDeviceCommandLogs(params);
+};
+
+// 定义表格的列
+const deviceCommandLogColumns = [
+  {
+    title: '设备ID',
+    dataIndex: 'device_id',
+    key: 'device_id',
+    sorter: true,
+    filterType: 'number', // 设置筛选类型为数字
+  },
+  {
+    title: '消息ID',
+    dataIndex: 'message_id',
+    key: 'message_id',
+    filterType: 'text', // 设置筛选类型为文本
+  },
+  {
+    title: '发送时间',
+    dataIndex: 'sent_at',
+    key: 'sent_at',
+    sorter: true,
+    filterType: 'dateRange', // 设置筛选类型为日期范围
+  },
+  {
+    title: '接收成功',
+    dataIndex: 'received_success',
+    key: 'received_success',
+    filterType: 'boolean', // 设置筛选类型为布尔值
+    formatter: (row, column, cellValue) => (cellValue ? '是' : '否'),
+  },
+  {
+    title: '确认时间',
+    dataIndex: 'acknowledged_at',
+    key: 'acknowledged_at',
+    sorter: true,
+  },
+];
+</script>
+
+<style scoped>
+.device-command-log-view {
+  /* 视图容器样式 */
+}
+</style>