优化列表

src/api/monitor.js

@@ -1,154 +1,182 @@
 import http from '../utils/http';
 
+// 这个辅助函数现在接收后端返回的JSON数据本身，而不是整个axios响应
+const processResponse = (responseData) => {
+  // 后端数据在responseData.data中
+  const data = responseData.data;
+  return {
+    list: data.list || [],
+    total: data.pagination.total || 0,
+  };
+};
+
 /**
  * 获取设备命令日志列表
  * @param {object} params - 查询参数
- * @returns {Promise<*>}
+ * @returns {Promise<{list: Array, total: number}>}
  */
-export const getDeviceCommandLogs = (params) => {
-  return http.get('/api/v1/monitor/device-command-logs', { params });
+export const getDeviceCommandLogs = async (params) => {
+  // http.get 通常被封装为返回 response.data
+  const responseData = await http.get('/api/v1/monitor/device-command-logs', { params });
+  return processResponse(responseData);
 };
 
 /**
  * 获取饲料使用记录列表
  * @param {object} params - 查询参数
- * @returns {Promise<*>}
+ * @returns {Promise<{list: Array, total: number}>}
  */
-export const getFeedUsageRecords = (params) => {
-  return http.get('/api/v1/monitor/feed-usage-records', { params });
+export const getFeedUsageRecords = async (params) => {
+  const responseData = await http.get('/api/v1/monitor/feed-usage-records', { params });
+  return processResponse(responseData);
 };
 
 /**
  * 获取用药记录列表
  * @param {object} params - 查询参数
- * @returns {Promise<*>}
+ * @returns {Promise<{list: Array, total: number}>}
  */
-export const getMedicationLogs = (params) => {
-  return http.get('/api/v1/monitor/medication-logs', { params });
+export const getMedicationLogs = async (params) => {
+  const responseData = await http.get('/api/v1/monitor/medication-logs', { params });
+  return processResponse(responseData);
 };
 
 /**
  * 获取待采集请求列表
  * @param {object} params - 查询参数
- * @returns {Promise<*>}
+ * @returns {Promise<{list: Array, total: number}>}
  */
-export const getPendingCollections = (params) => {
-  return http.get('/api/v1/monitor/pending-collections', { params });
+export const getPendingCollections = async (params) => {
+  const responseData = await http.get('/api/v1/monitor/pending-collections', { params });
+  return processResponse(responseData);
 };
 
 /**
  * 获取猪批次日志列表
  * @param {object} params - 查询参数
- * @returns {Promise<*>}
+ * @returns {Promise<{list: Array, total: number}>}
  */
-export const getPigBatchLogs = (params) => {
-  return http.get('/api/v1/monitor/pig-batch-logs', { params });
+export const getPigBatchLogs = async (params) => {
+  const responseData = await http.get('/api/v1/monitor/pig-batch-logs', { params });
+  return processResponse(responseData);
 };
 
 /**
  * 获取猪只采购记录列表
  * @param {object} params - 查询参数
- * @returns {Promise<*>}
+ * @returns {Promise<{list: Array, total: number}>}
  */
-export const getPigPurchases = (params) => {
-  return http.get('/api/v1/monitor/pig-purchases', { params });
+export const getPigPurchases = async (params) => {
+  const responseData = await http.get('/api/v1/monitor/pig-purchases', { params });
+  return processResponse(responseData);
 };
 
 /**
  * 获取猪只售卖记录列表
  * @param {object} params - 查询参数
- * @returns {Promise<*>}
+ * @returns {Promise<{list: Array, total: number}>}
  */
-export const getPigSales = (params) => {
-  return http.get('/api/v1/monitor/pig-sales', { params });
+export const getPigSales = async (params) => {
+  const responseData = await http.get('/api/v1/monitor/pig-sales', { params });
+  return processResponse(responseData);
 };
 
 /**
  * 获取病猪日志列表
  * @param {object} params - 查询参数
- * @returns {Promise<*>}
+ * @returns {Promise<{list: Array, total: number}>}
  */
-export const getPigSickLogs = (params) => {
-  return http.get('/api/v1/monitor/pig-sick-logs', { params });
+export const getPigSickLogs = async (params) => {
+  const responseData = await http.get('/api/v1/monitor/pig-sick-logs', { params });
+  return processResponse(responseData);
 };
 
 /**
  * 获取猪只迁移日志列表
  * @param {object} params - 查询参数
- * @returns {Promise<*>}
+ * @returns {Promise<{list: Array, total: number}>}
  */
-export const getPigTransferLogs = (params) => {
-  return http.get('/api/v1/monitor/pig-transfer-logs', { params });
+export const getPigTransferLogs = async (params) => {
+  const responseData = await http.get('/api/v1/monitor/pig-transfer-logs', { params });
+  return processResponse(responseData);
 };
 
 /**
  * 获取计划执行日志列表
  * @param {object} params - 查询参数
- * @returns {Promise<*>}
+ * @returns {Promise<{list: Array, total: number}>}
  */
-export const getPlanExecutionLogs = (params) => {
-  return http.get('/api/v1/monitor/plan-execution-logs', { params });
+export const getPlanExecutionLogs = async (params) => {
+  const responseData = await http.get('/api/v1/monitor/plan-execution-logs', { params });
+  return processResponse(responseData);
 };
 
 /**
  * 获取原料采购记录列表
  * @param {object} params - 查询参数
- * @returns {Promise<*>}
+ * @returns {Promise<{list: Array, total: number}>}
  */
-export const getRawMaterialPurchases = (params) => {
-  return http.get('/api/v1/monitor/raw-material-purchases', { params });
+export const getRawMaterialPurchases = async (params) => {
+  const responseData = await http.get('/api/v1/monitor/raw-material-purchases', { params });
+  return processResponse(responseData);
 };
 
 /**
  * 获取原料库存日志列表
  * @param {object} params - 查询参数
- * @returns {Promise<*>}
+ * @returns {Promise<{list: Array, total: number}>}
  */
-export const getRawMaterialStockLogs = (params) => {
-  return http.get('/api/v1/monitor/raw-material-stock-logs', { params });
+export const getRawMaterialStockLogs = async (params) => {
+  const responseData = await http.get('/api/v1/monitor/raw-material-stock-logs', { params });
+  return processResponse(responseData);
 };
 
 /**
  * 获取传感器数据列表
  * @param {object} params - 查询参数
- * @returns {Promise<*>}
+ * @returns {Promise<{list: Array, total: number}>}
  */
-export const getSensorData = (params) => {
-  return http.get('/api/v1/monitor/sensor-data', { params });
+export const getSensorData = async (params) => {
+  const responseData = await http.get('/api/v1/monitor/sensor-data', { params });
+  return processResponse(responseData);
 };
 
 /**
  * 获取任务执行日志列表
  * @param {object} params - 查询参数
- * @returns {Promise<*>}
+ * @returns {Promise<{list: Array, total: number}>}
  */
-export const getTaskExecutionLogs = (params) => {
-  return http.get('/api/v1/monitor/task-execution-logs', { params });
+export const getTaskExecutionLogs = async (params) => {
+  const responseData = await http.get('/api/v1/monitor/task-execution-logs', { params });
+  return processResponse(responseData);
 };
 
 /**
  * 获取用户操作日志列表
  * @param {object} params - 查询参数
- * @returns {Promise<*>}
+ * @returns {Promise<{list: Array, total: number}>}
  */
-export const getUserActionLogs = (params) => {
-  return http.get('/api/v1/monitor/user-action-logs', { params });
+export const getUserActionLogs = async (params) => {
+  const responseData = await http.get('/api/v1/monitor/user-action-logs', { params });
+  return processResponse(responseData);
 };
 
 /**
  * 获取批次称重记录列表
  * @param {object} params - 查询参数
- * @returns {Promise<*>}
+ * @returns {Promise<{list: Array, total: number}>}
  */
-export const getWeighingBatches = (params) => {
-  return http.get('/api/v1/monitor/weighing-batches', { params });
+export const getWeighingBatches = async (params) => {
+  const responseData = await http.get('/api/v1/monitor/weighing-batches', { params });
+  return processResponse(responseData);
 };
 
 /**
  * 获取单次称重记录列表
  * @param {object} params - 查询参数
- * @returns {Promise<*>}
+ * @returns {Promise<{list: Array, total: number}>}
  */
-export const getWeighingRecords = (params) => {
-  return http.get('/api/v1/monitor/weighing-records', { params });
+export const getWeighingRecords = async (params) => {
+  const responseData = await http.get('/api/v1/monitor/weighing-records', { params });
+  return processResponse(responseData);
 };

src/components/GenericMonitorList.vue

@@ -0,0 +1,226 @@
+<template>
+  <div class="generic-monitor-list">
+    <el-card shadow="never">
+      <el-form :inline="true" :model="filters" class="filter-form">
+        <el-form-item v-for="col in filterableColumns" :key="col.dataIndex" :label="col.title">
+          <template v-if="col.filterType === 'text'">
+            <el-input
+                v-model="filters[col.dataIndex]"
+                :placeholder="`搜索 ${col.title}`"
+                clearable
+                @change="handleFilterChange(col.dataIndex, filters[col.dataIndex])"
+            ></el-input>
+          </template>
+          <template v-else-if="col.filterType === 'number'">
+            <el-input-number
+                v-model="filters[col.dataIndex]"
+                :placeholder="`搜索 ${col.title}`"
+                :controls="false"
+                clearable
+                @change="handleFilterChange(col.dataIndex, filters[col.dataIndex])"
+            ></el-input-number>
+          </template>
+          <template v-else-if="col.filterType === 'dateRange'">
+            <el-date-picker
+                v-model="filters[col.dataIndex]"
+                type="datetimerange"
+                range-separator="至"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期"
+                value-format="YYYY-MM-DD HH:mm:ss"
+                @change="handleFilterChange(col.dataIndex, filters[col.dataIndex])"
+            ></el-date-picker>
+          </template>
+          <template v-else-if="col.filterType === 'select'">
+            <el-select
+                v-model="filters[col.dataIndex]"
+                :placeholder="`选择 ${col.title}`"
+                clearable
+                @change="handleFilterChange(col.dataIndex, filters[col.dataIndex])"
+            >
+              <el-option
+                  v-for="option in col.filterOptions"
+                  :key="option.value"
+                  :label="option.text"
+                  :value="option.value"
+              ></el-option>
+            </el-select>
+          </template>
+          <template v-else-if="col.filterType === 'boolean'">
+            <el-select
+                v-model="filters[col.dataIndex]"
+                :placeholder="`选择 ${col.title}`"
+                clearable
+                @change="handleFilterChange(col.dataIndex, filters[col.dataIndex])"
+            >
+              <el-option label="是" :value="true"></el-option>
+              <el-option label="否" :value="false"></el-option>
+            </el-select>
+          </template>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="loadData">查询</el-button>
+          <el-button @click="resetFilters">重置</el-button>
+        </el-form-item>
+      </el-form>
+
+      <el-table
+          :data="data"
+          v-loading="loading"
+          border
+          stripe
+          style="width: 100%"
+          @sort-change="handleSortChange"
+      >
+        <el-table-column
+            v-for="col in tableColumns"
+            :key="col.key"
+            :prop="col.prop"
+            :label="col.title"
+            :sortable="col.sorter ? 'custom' : false"
+            :formatter="col.formatter"
+            :min-width="col.minWidth"
+        >
+          <template v-if="col.render" #default="{ row }">
+            <component :is="col.render(row)"/>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <el-pagination
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          :current-page="pagination.currentPage"
+          :page-sizes="[10, 20, 50, 100]"
+          :page-size="pagination.pageSize"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="pagination.total"
+          background
+          style="margin-top: 20px; text-align: right;"
+      ></el-pagination>
+    </el-card>
+  </div>
+</template>
+
+<script setup>
+import {ref, reactive, onMounted, watch, computed} from 'vue';
+import {ElMessage} from 'element-plus';
+
+const props = defineProps({
+  fetchData: {
+    type: Function,
+    required: true,
+  },
+  columnsConfig: {
+    type: Array,
+    required: true,
+  },
+});
+
+const data = ref([]);
+const loading = ref(false);
+const pagination = reactive({
+  currentPage: 1,
+  pageSize: 10,
+  total: 0,
+});
+const filters = reactive({});
+const sortOrder = reactive({
+  prop: undefined,
+  order: undefined,
+});
+
+const filterableColumns = computed(() => {
+  return props.columnsConfig.filter(col => col.filterType);
+});
+
+const tableColumns = computed(() => {
+  return props.columnsConfig.map(col => {
+    const newCol = {...col};
+    newCol.prop = Array.isArray(col.dataIndex) ? col.dataIndex.join('.') : col.dataIndex;
+    return newCol;
+  });
+});
+
+const loadData = async () => {
+  loading.value = true;
+  try {
+    const params = {
+      page: pagination.currentPage,
+      pageSize: pagination.pageSize,
+      ...filters,
+      orderBy: sortOrder.prop,
+      order: sortOrder.order === 'ascending' ? 'asc' : (sortOrder.order === 'descending' ? 'desc' : undefined),
+    };
+
+    // 将日期范围筛选转换为 start_time 和 end_time
+    filterableColumns.value.forEach(col => {
+      if (col.filterType === 'dateRange' && filters[col.dataIndex] && filters[col.dataIndex].length === 2) {
+        params[`start_time`] = filters[col.dataIndex][0];
+        params[`end_time`] = filters[col.dataIndex][1];
+        delete params[col.dataIndex];
+      }
+    });
+
+    const result = await props.fetchData(params);
+    data.value = result.list;
+    pagination.total = result.total;
+  } catch (error) {
+    console.error('Failed to fetch data:', error);
+    ElMessage.error('获取数据失败，请稍后再试。');
+  } finally {
+    loading.value = false;
+  }
+};
+
+const handleSizeChange = (val) => {
+  pagination.pageSize = val;
+  pagination.currentPage = 1;
+  loadData();
+};
+
+const handleCurrentChange = (val) => {
+  pagination.currentPage = val;
+  loadData();
+};
+
+const handleSortChange = ({prop, order}) => {
+  sortOrder.prop = prop;
+  sortOrder.order = order;
+  loadData();
+};
+
+const handleFilterChange = (key, value) => {
+  filters[key] = value;
+  pagination.currentPage = 1;
+};
+
+const resetFilters = () => {
+  for (const key in filters) {
+    delete filters[key];
+  }
+  sortOrder.prop = undefined;
+  sortOrder.order = undefined;
+  pagination.currentPage = 1;
+  loadData();
+};
+
+onMounted(() => {
+  loadData();
+});
+
+</script>
+
+<style scoped>
+.generic-monitor-list {
+  padding: 20px;
+}
+
+.filter-form {
+  margin-bottom: 20px;
+}
+
+.el-card {
+  border: none;
+}
+</style>

src/layouts/MainLayout.vue

@@ -15,7 +15,7 @@
         :collapse="isCollapse"
         :collapse-transition="false"
         router
-        :default-openeds="['/device-management']"
+        :default-openeds="['/device-management', '/monitor']"
       >
         <el-menu-item index="/">
           <el-icon><House /></el-icon>
@@ -42,6 +42,19 @@
           <el-icon><Calendar /></el-icon>
           <template #title>计划管理</template>
         </el-menu-item>
+
+        <!-- 系统监控二级菜单 -->
+        <el-sub-menu index="/monitor">
+          <template #title>
+            <el-icon><DataAnalysis /></el-icon>
+            <span>系统监控</span>
+          </template>
+          <el-menu-item index="/monitor/device-command-logs">
+            <el-icon><Document /></el-icon>
+            <template #title>设备命令日志</template>
+          </el-menu-item>
+        </el-sub-menu>
+
       </el-menu>
     </el-aside>
 
@@ -88,7 +101,7 @@
 <script>
 import { ref, computed, onMounted, onUnmounted } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
-import { House, Monitor, Calendar, ArrowDown, Menu, Fold, Expand, Setting, Tickets } from '@element-plus/icons-vue';
+import { House, Monitor, Calendar, ArrowDown, Menu, Fold, Expand, Setting, Tickets, DataAnalysis, Document } from '@element-plus/icons-vue';
 
 export default {
   name: 'MainLayout',
@@ -101,7 +114,9 @@ export default {
     Fold,
     Expand,
     Setting,
-    Tickets
+    Tickets,
+    DataAnalysis,
+    Document
   },
   setup() {
     const route = useRoute();
@@ -127,6 +142,9 @@ export default {
     };
     
     const activeMenu = computed(() => {
+      if (route.path.startsWith('/monitor')) {
+        return route.path;
+      }
       if (route.path === '/devices' || route.path === '/device-templates') {
         return route.path;
       }
@@ -138,7 +156,8 @@ export default {
         '/': '系统首页',
         '/devices': '设备管理',
         '/device-templates': '设备模板管理',
-        '/plans': '计划管理'
+        '/plans': '计划管理',
+        '/monitor/device-command-logs': '设备命令日志'
       };
       return routeMap[route.path] || '猪场管理系统';
     });

src/main.js

@@ -2,6 +2,7 @@ import { createApp } from 'vue';
 import { createRouter, createWebHistory } from 'vue-router';
 import ElementPlus from 'element-plus';
 import 'element-plus/dist/index.css';
+import zhCn from 'element-plus/dist/locale/zh-cn.mjs'; // 导入 Element Plus 中文语言包
 
 import App from './App.vue';
 import Home from './components/Home.vue';
@@ -9,6 +10,7 @@ import DeviceList from './components/DeviceList.vue';
 import PlanList from './components/PlanList.vue';
 import LoginForm from './components/LoginForm.vue';
 import DeviceTemplateList from './components/DeviceTemplateList.vue'; // 导入设备模板列表组件
+import DeviceCommandLogView from './views/monitor/DeviceCommandLogView.vue'; // 导入设备命令日志视图
 
 // 导入全局样式
 import './assets/styles/main.css';
@@ -19,6 +21,7 @@ const routes = [
   { path: '/devices', component: DeviceList, meta: { requiresAuth: true } },
   { path: '/device-templates', component: DeviceTemplateList, meta: { requiresAuth: true } }, // 添加设备模板路由
   { path: '/plans', component: PlanList, meta: { requiresAuth: true } },
+  { path: '/monitor/device-command-logs', component: DeviceCommandLogView, meta: { requiresAuth: true } }, // 添加设备命令日志路由
   { path: '/login', component: LoginForm }
 ];
 
@@ -45,8 +48,8 @@ router.beforeEach((to, from, next) => {
 // 创建Vue应用实例
 const app = createApp(App);
 
-// 使用Element Plus组件库
-app.use(ElementPlus);
+// 全局配置 Element Plus 为中文
+app.use(ElementPlus, { locale: zhCn });
 
 // 使用路由
 app.use(router);

src/utils/format.js

@@ -0,0 +1,22 @@
+/**
+ * 将 RFC3339 格式的日期时间字符串格式化为 'YYYY-MM-DD HH:mm:ss'
+ * @param {string | null | undefined} rfc3339String - 后端返回的日期时间字符串
+ * @returns {string} - 格式化后的字符串，如果输入无效则返回空字符串或提示
+ */
+export function formatRFC3339(rfc3339String) {
+  if (!rfc3339String) {
+    return '--'; // 或者返回空字符串 ''
+  }
+
+  try {
+    // 例如: "2025-10-17T14:57:01.570169+08:00"
+    // 替换 'T' 为空格，并截取前 19 个字符即可得到 'YYYY-MM-DD HH:mm:ss'
+    return rfc3339String.replace('T', ' ').substring(0, 19);
+  } catch (error) {
+    console.error('Error formatting date:', rfc3339String, error);
+    return rfc3339String; // 格式化失败时返回原始值
+  }
+}
+
+// 你未来还可以添加其他全局格式化函数
+// export function formatCurrency(number) { ... }

src/views/monitor/DeviceCommandLogView.vue

@@ -0,0 +1,72 @@
+<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>