73 lines
2.1 KiB
Vue
73 lines
2.1 KiB
Vue
<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';
|
||
import {formatRFC3339} from '../../utils/format.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', // 设置筛选类型为数字
|
||
minWidth: 100, // 设置最小宽度
|
||
},
|
||
{
|
||
title: '消息ID',
|
||
dataIndex: 'message_id',
|
||
key: 'message_id',
|
||
// 后端不支持此字段筛选，暂时移除
|
||
// filterType: 'text',
|
||
minWidth: 300, // UUID较长，设置较宽的最小宽度
|
||
},
|
||
{
|
||
title: '发送时间',
|
||
dataIndex: 'sent_at',
|
||
key: 'sent_at',
|
||
sorter: true,
|
||
filterType: 'dateRange', // 设置筛选类型为日期范围
|
||
formatter: (row, column, cellValue) => formatRFC3339(cellValue), // 使用全局格式化函数
|
||
minWidth: 180, // 设置最小宽度
|
||
},
|
||
{
|
||
title: '接收成功',
|
||
dataIndex: 'received_success',
|
||
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>
|
||
|
||
<style scoped>
|
||
.device-command-log-view {
|
||
/* 视图容器样式 */
|
||
}
|
||
</style>
|