优化列表

src/views/monitor/DeviceCommandLogView.vue

@@ -1,15 +1,16 @@
 <template>
   <div class="device-command-log-view">
     <GenericMonitorList
-      :fetchData="fetchDeviceCommandLogs"
-      :columnsConfig="deviceCommandLogColumns"
+        :fetchData="fetchDeviceCommandLogs"
+        :columnsConfig="deviceCommandLogColumns"
     />
   </div>
 </template>
 
 <script setup>
 import GenericMonitorList from '../../components/GenericMonitorList.vue';
-import { getDeviceCommandLogs } from '../../api/monitor.js';
+import {getDeviceCommandLogs} from '../../api/monitor.js';
+import {formatRFC3339} from '../../utils/format.js'; // 导入全局格式化函数
 
 // 适配通用组件的 fetchData prop
 const fetchDeviceCommandLogs = async (params) => {
@@ -26,12 +27,15 @@ const deviceCommandLogColumns = [
     key: 'device_id',
     sorter: true,
     filterType: 'number', // 设置筛选类型为数字
+    minWidth: 100, // 设置最小宽度
   },
   {
     title: '消息ID',
     dataIndex: 'message_id',
     key: 'message_id',
-    filterType: 'text', // 设置筛选类型为文本
+    // 后端不支持此字段筛选，暂时移除
+    // filterType: 'text', 
+    minWidth: 300, // UUID较长，设置较宽的最小宽度
   },
   {
     title: '发送时间',
@@ -39,6 +43,8 @@ const deviceCommandLogColumns = [
     key: 'sent_at',
     sorter: true,
     filterType: 'dateRange', // 设置筛选类型为日期范围
+    formatter: (row, column, cellValue) => formatRFC3339(cellValue), // 使用全局格式化函数
+    minWidth: 180, // 设置最小宽度
   },
   {
     title: '接收成功',
@@ -46,12 +52,15 @@ const deviceCommandLogColumns = [
     key: 'received_success',
     filterType: 'boolean', // 设置筛选类型为布尔值
     formatter: (row, column, cellValue) => (cellValue ? '是' : '否'),
+    minWidth: 100, // 设置最小宽度
   },
   {
     title: '确认时间',
     dataIndex: 'acknowledged_at',
     key: 'acknowledged_at',
     sorter: true,
+    formatter: (row, column, cellValue) => formatRFC3339(cellValue), // 使用全局格式化函数
+    minWidth: 180, // 设置最小宽度
   },
 ];
 </script>