From 1b45e61daff6f3db474165ae451cdbf376b28ac0 Mon Sep 17 00:00:00 2001
From: huang <1724659546@qq.com>
Date: Mon, 20 Oct 2025 15:48:08 +0800
Subject: [PATCH] =?UTF-8?q?=E8=AE=BE=E5=A4=87=E5=91=BD=E4=BB=A4=E6=97=A5?=
 =?UTF-8?q?=E5=BF=97=E7=95=8C=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/monitor.js                         | 130 +++++++-----
 src/components/GenericMonitorList.vue      | 222 +++++++++++++++++++++
 src/layouts/MainLayout.vue                 |  27 ++-
 src/main.js                                |   2 +
 src/views/monitor/DeviceCommandLogView.vue |  63 ++++++
 5 files changed, 389 insertions(+), 55 deletions(-)
 create mode 100644 src/components/GenericMonitorList.vue
 create mode 100644 src/views/monitor/DeviceCommandLogView.vue

diff --git a/src/api/monitor.js b/src/api/monitor.js
index c1f29918..bd83c578 100644
--- a/src/api/monitor.js
+++ b/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);
 };
diff --git a/src/components/GenericMonitorList.vue b/src/components/GenericMonitorList.vue
new file mode 100644
index 00000000..c44b90a6
--- /dev/null
+++ b/src/components/GenericMonitorList.vue
@@ -0,0 +1,222 @@
+<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
+        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"
+        >
+          <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>
diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index 960d05fc..fa1430cc 100644
--- a/src/layouts/MainLayout.vue
+++ b/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] || '猪场管理系统';
     });
diff --git a/src/main.js b/src/main.js
index 2becd479..f7cc8931 100644
--- a/src/main.js
+++ b/src/main.js
@@ -9,6 +9,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 +20,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 }
 ];
 
diff --git a/src/views/monitor/DeviceCommandLogView.vue b/src/views/monitor/DeviceCommandLogView.vue
new file mode 100644
index 00000000..6ae33993
--- /dev/null
+++ b/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>