实现所有监控展示

src/layouts/MainLayout.vue

@@ -53,6 +53,70 @@
             <el-icon><Document /></el-icon>
             <template #title>设备命令日志</template>
           </el-menu-item>
+          <el-menu-item index="/monitor/feed-usage-records">
+            <el-icon><Food /></el-icon>
+            <template #title>饲料使用记录</template>
+          </el-menu-item>
+          <el-menu-item index="/monitor/medication-logs">
+            <el-icon><FirstAidKit /></el-icon>
+            <template #title>用药记录</template>
+          </el-menu-item>
+          <el-menu-item index="/monitor/pending-collections">
+            <el-icon><Clock /></el-icon>
+            <template #title>待采集请求</template>
+          </el-menu-item>
+          <el-menu-item index="/monitor/pig-batch-logs">
+            <el-icon><Files /></el-icon>
+            <template #title>猪批次日志</template>
+          </el-menu-item>
+          <el-menu-item index="/monitor/pig-purchases">
+            <el-icon><ShoppingCart /></el-icon>
+            <template #title>猪只采购记录</template>
+          </el-menu-item>
+          <el-menu-item index="/monitor/pig-sales">
+            <el-icon><SoldOut /></el-icon>
+            <template #title>猪只售卖记录</template>
+          </el-menu-item>
+          <el-menu-item index="/monitor/pig-sick-logs">
+            <el-icon><Warning /></el-icon>
+            <template #title>病猪日志</template>
+          </el-menu-item>
+          <el-menu-item index="/monitor/pig-transfer-logs">
+            <el-icon><Switch /></el-icon>
+            <template #title>猪只迁移日志</template>
+          </el-menu-item>
+          <el-menu-item index="/monitor/plan-execution-logs">
+            <el-icon><List /></el-icon>
+            <template #title>计划执行日志</template>
+          </el-menu-item>
+          <el-menu-item index="/monitor/raw-material-purchases">
+            <el-icon><Shop /></el-icon>
+            <template #title>原料采购记录</template>
+          </el-menu-item>
+          <el-menu-item index="/monitor/raw-material-stock-logs">
+            <el-icon><Coin /></el-icon>
+            <template #title>原料库存日志</template>
+          </el-menu-item>
+          <el-menu-item index="/monitor/sensor-data">
+            <el-icon><DataLine /></el-icon>
+            <template #title>传感器数据</template>
+          </el-menu-item>
+          <el-menu-item index="/monitor/task-execution-logs">
+            <el-icon><Finished /></el-icon>
+            <template #title>任务执行日志</template>
+          </el-menu-item>
+          <el-menu-item index="/monitor/user-action-logs">
+            <el-icon><User /></el-icon>
+            <template #title>用户操作日志</template>
+          </el-menu-item>
+          <el-menu-item index="/monitor/weighing-batches">
+            <el-icon><ScaleToOriginal /></el-icon>
+            <template #title>批次称重记录</template>
+          </el-menu-item>
+          <el-menu-item index="/monitor/weighing-records">
+            <el-icon><ScaleToOriginal /></el-icon>
+            <template #title>单次称重记录</template>
+          </el-menu-item>
         </el-sub-menu>
 
       </el-menu>
@@ -101,22 +165,16 @@
 <script>
 import { ref, computed, onMounted, onUnmounted } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
-import { House, Monitor, Calendar, ArrowDown, Menu, Fold, Expand, Setting, Tickets, DataAnalysis, Document } from '@element-plus/icons-vue';
+import { 
+  House, Monitor, Calendar, ArrowDown, Menu, Fold, Expand, Setting, Tickets, DataAnalysis, Document, Food,
+  FirstAidKit, Clock, Files, ShoppingCart, SoldOut, Warning, Switch, List, Shop, Coin, DataLine, Finished, User, ScaleToOriginal
+} from '@element-plus/icons-vue';
 
 export default {
   name: 'MainLayout',
   components: {
-    House,
+    House, Monitor, Calendar, ArrowDown, Menu, Fold, Expand, Setting, Tickets, DataAnalysis, Document, Food,
-    Monitor,
+    FirstAidKit, Clock, Files, ShoppingCart, SoldOut, Warning, Switch, List, Shop, Coin, DataLine, Finished, User, ScaleToOriginal
-    Calendar,
-    ArrowDown,
-    Menu,
-    Fold,
-    Expand,
-    Setting,
-    Tickets,
-    DataAnalysis,
-    Document
   },
   setup() {
     const route = useRoute();
@@ -124,7 +182,6 @@ export default {
     const isCollapse = ref(false);
     const username = ref(localStorage.getItem('username') || '管理员');
 
-    // 监听localStorage变化，实时更新用户名
     const handleStorageChange = () => {
       username.value = localStorage.getItem('username') || '管理员';
     };
@@ -157,15 +214,31 @@ export default {
         '/devices': '设备管理',
         '/device-templates': '设备模板管理',
         '/plans': '计划管理',
-        '/monitor/device-command-logs': '设备命令日志'
+        '/monitor/device-command-logs': '设备命令日志',
+        '/monitor/feed-usage-records': '饲料使用记录',
+        '/monitor/medication-logs': '用药记录',
+        '/monitor/pending-collections': '待采集请求',
+        '/monitor/pig-batch-logs': '猪批次日志',
+        '/monitor/pig-purchases': '猪只采购记录',
+        '/monitor/pig-sales': '猪只售卖记录',
+        '/monitor/pig-sick-logs': '病猪日志',
+        '/monitor/pig-transfer-logs': '猪只迁移日志',
+        '/monitor/plan-execution-logs': '计划执行日志',
+        '/monitor/raw-material-purchases': '原料采购记录',
+        '/monitor/raw-material-stock-logs': '原料库存日志',
+        '/monitor/sensor-data': '传感器数据',
+        '/monitor/task-execution-logs': '任务执行日志',
+        '/monitor/user-action-logs': '用户操作日志',
+        '/monitor/weighing-batches': '批次称重记录',
+        '/monitor/weighing-records': '单次称重记录',
       };
       return routeMap[route.path] || '猪场管理系统';
     });
 
     const logout = () => {
       localStorage.removeItem('jwt_token');
-      localStorage.removeItem('username'); // 清除用户名
+      localStorage.removeItem('username');
-      username.value = '管理员'; // 重置显示
+      username.value = '管理员';
       router.push('/login');
     };
 

src/main.js

@@ -9,8 +9,27 @@ import Home from './components/Home.vue';
 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 DeviceTemplateList from './components/DeviceTemplateList.vue';
-import DeviceCommandLogView from './views/monitor/DeviceCommandLogView.vue'; // 导入设备命令日志视图
+
+// --- 统一导入所有监控视图 ---
+import DeviceCommandLogView from './views/monitor/DeviceCommandLogView.vue';
+import FeedUsageRecordsView from './views/monitor/FeedUsageRecordsView.vue';
+import MedicationLogsView from './views/monitor/MedicationLogsView.vue';
+import PendingCollectionsView from './views/monitor/PendingCollectionsView.vue';
+import PigBatchLogsView from './views/monitor/PigBatchLogsView.vue';
+import PigPurchasesView from './views/monitor/PigPurchasesView.vue';
+import PigSalesView from './views/monitor/PigSalesView.vue';
+import PigSickLogsView from './views/monitor/PigSickLogsView.vue';
+import PigTransferLogsView from './views/monitor/PigTransferLogsView.vue';
+import PlanExecutionLogsView from './views/monitor/PlanExecutionLogsView.vue';
+import RawMaterialPurchasesView from './views/monitor/RawMaterialPurchasesView.vue';
+import RawMaterialStockLogsView from './views/monitor/RawMaterialStockLogsView.vue';
+import SensorDataView from './views/monitor/SensorDataView.vue';
+import TaskExecutionLogsView from './views/monitor/TaskExecutionLogsView.vue';
+import UserActionLogsView from './views/monitor/UserActionLogsView.vue';
+import WeighingBatchesView from './views/monitor/WeighingBatchesView.vue';
+import WeighingRecordsView from './views/monitor/WeighingRecordsView.vue';
+// ---------------------------
 
 // 导入全局样式
 import './assets/styles/main.css';
@@ -19,10 +38,29 @@ import './assets/styles/main.css';
 const routes = [
   { path: '/', component: Home, meta: { requiresAuth: true } },
   { path: '/devices', component: DeviceList, meta: { requiresAuth: true } },
-  { path: '/device-templates', component: DeviceTemplateList, 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 },
-  { path: '/login', component: LoginForm }
+
+  // --- 统一注册所有监控路由 ---
+  { path: '/monitor/device-command-logs', component: DeviceCommandLogView, meta: { requiresAuth: true } },
+  { path: '/monitor/feed-usage-records', component: FeedUsageRecordsView, meta: { requiresAuth: true } },
+  { path: '/monitor/medication-logs', component: MedicationLogsView, meta: { requiresAuth: true } },
+  { path: '/monitor/pending-collections', component: PendingCollectionsView, meta: { requiresAuth: true } },
+  { path: '/monitor/pig-batch-logs', component: PigBatchLogsView, meta: { requiresAuth: true } },
+  { path: '/monitor/pig-purchases', component: PigPurchasesView, meta: { requiresAuth: true } },
+  { path: '/monitor/pig-sales', component: PigSalesView, meta: { requiresAuth: true } },
+  { path: '/monitor/pig-sick-logs', component: PigSickLogsView, meta: { requiresAuth: true } },
+  { path: '/monitor/pig-transfer-logs', component: PigTransferLogsView, meta: { requiresAuth: true } },
+  { path: '/monitor/plan-execution-logs', component: PlanExecutionLogsView, meta: { requiresAuth: true } },
+  { path: '/monitor/raw-material-purchases', component: RawMaterialPurchasesView, meta: { requiresAuth: true } },
+  { path: '/monitor/raw-material-stock-logs', component: RawMaterialStockLogsView, meta: { requiresAuth: true } },
+  { path: '/monitor/sensor-data', component: SensorDataView, meta: { requiresAuth: true } },
+  { path: '/monitor/task-execution-logs', component: TaskExecutionLogsView, meta: { requiresAuth: true } },
+  { path: '/monitor/user-action-logs', component: UserActionLogsView, meta: { requiresAuth: true } },
+  { path: '/monitor/weighing-batches', component: WeighingBatchesView, meta: { requiresAuth: true } },
+  { path: '/monitor/weighing-records', component: WeighingRecordsView, meta: { requiresAuth: true } },
+  // ---------------------------
 ];
 
 const router = createRouter({

src/views/monitor/FeedUsageRecordsView.vue

@@ -0,0 +1,92 @@
+<template>
+  <div class="feed-usage-record-view">
+    <GenericMonitorList
+      :fetchData="fetchFeedUsageRecords"
+      :columnsConfig="feedUsageRecordColumns"
+    />
+  </div>
+</template>
+
+<script setup>
+import GenericMonitorList from '../../components/GenericMonitorList.vue';
+import { getFeedUsageRecords } from '../../api/monitor.js';
+import { formatRFC3339 } from '../../utils/format.js';
+
+// 适配通用组件的 fetchData prop
+const fetchFeedUsageRecords = async (params) => {
+  return await getFeedUsageRecords(params);
+};
+
+// 定义表格的列配置
+// 根据 swagger, 支持的筛选参数有: feed_formula_id, operator_id, pen_id, start_time, end_time
+const feedUsageRecordColumns = [
+  {
+    title: '记录ID',
+    dataIndex: 'id',
+    key: 'id',
+    sorter: true,
+    minWidth: 100,
+  },
+  {
+    title: '用量(kg)',
+    dataIndex: 'amount',
+    key: 'amount',
+    sorter: true,
+    minWidth: 120,
+  },
+  {
+    title: '饲料配方',
+    dataIndex: ['feed_formula', 'name'], // 访问嵌套属性
+    key: 'feed_formula_name',
+    minWidth: 150,
+  },
+  {
+    title: '配方ID (筛选)',
+    dataIndex: 'feed_formula_id',
+    key: 'feed_formula_id',
+    filterType: 'number',
+    minWidth: 150,
+  },
+  {
+    title: '猪栏',
+    dataIndex: ['pen', 'name'], // 访问嵌套属性
+    key: 'pen_name',
+    minWidth: 120,
+  },
+  {
+    title: '猪栏ID (筛选)',
+    dataIndex: 'pen_id',
+    key: 'pen_id',
+    filterType: 'number',
+    minWidth: 150,
+  },
+  {
+    title: '操作员ID',
+    dataIndex: 'operator_id',
+    key: 'operator_id',
+    filterType: 'number',
+    minWidth: 120,
+  },
+  {
+    title: '记录时间',
+    dataIndex: 'recorded_at',
+    key: 'recorded_at',
+    sorter: true,
+    filterType: 'dateRange',
+    formatter: (row, column, cellValue) => formatRFC3339(cellValue),
+    minWidth: 180,
+  },
+  {
+    title: '备注',
+    dataIndex: 'remarks',
+    key: 'remarks',
+    minWidth: 200,
+  },
+];
+</script>
+
+<style scoped>
+.feed-usage-record-view {
+  /* 视图容器样式 */
+}
+</style>

src/views/monitor/MedicationLogsView.vue

@@ -0,0 +1,94 @@
+<template>
+  <div class="medication-logs-view">
+    <GenericMonitorList
+      :fetchData="fetchMedicationLogs"
+      :columnsConfig="medicationLogColumns"
+    />
+  </div>
+</template>
+
+<script setup>
+import GenericMonitorList from '../../components/GenericMonitorList.vue';
+import { getMedicationLogs } from '../../api/monitor.js';
+import { formatRFC3339 } from '../../utils/format.js';
+
+// 适配通用组件的 fetchData prop
+const fetchMedicationLogs = async (params) => {
+  return await getMedicationLogs(params);
+};
+
+// 定义表格的列，依据 swagger.json
+const medicationLogColumns = [
+  {
+    title: '记录ID',
+    dataIndex: 'id',
+    key: 'id',
+    sorter: true,
+    minWidth: 100,
+  },
+  {
+    title: '药品名称',
+    dataIndex: ['medication', 'name'], // 嵌套属性
+    key: 'medication_name',
+    minWidth: 150,
+  },
+  {
+    title: '用量',
+    dataIndex: 'dosage_used',
+    key: 'dosage_used',
+    sorter: true,
+    minWidth: 100,
+  },
+  {
+    title: '目标数量',
+    dataIndex: 'target_count',
+    key: 'target_count',
+    minWidth: 100,
+  },
+  {
+    title: '原因',
+    dataIndex: 'reason',
+    key: 'reason',
+    filterType: 'select',
+    filterOptions: [
+      { text: '预防', value: '预防' },
+      { text: '治疗', value: '治疗' },
+      { text: '保健', value: '保健' },
+    ],
+    minWidth: 120,
+  },
+  {
+    title: '发生时间',
+    dataIndex: 'happened_at',
+    key: 'happened_at',
+    sorter: true,
+    filterType: 'dateRange',
+    formatter: (row, column, cellValue) => formatRFC3339(cellValue),
+    minWidth: 180,
+  },
+  {
+    title: '猪批次ID',
+    dataIndex: 'pig_batch_id',
+    key: 'pig_batch_id',
+    filterType: 'number',
+    minWidth: 120,
+  },
+  {
+    title: '操作员ID',
+    dataIndex: 'operator_id',
+    key: 'operator_id',
+    filterType: 'number',
+    minWidth: 120,
+  },
+  {
+    title: '描述',
+    dataIndex: 'description',
+    key: 'description',
+    minWidth: 200,
+  },
+];
+</script>
+
+<style scoped>
+/* 视图容器样式 */
+</style>

src/views/monitor/PendingCollectionsView.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="pending-collections-view">
+    <GenericMonitorList
+      :fetchData="fetchPendingCollections"
+      :columnsConfig="pendingCollectionColumns"
+    />
+  </div>
+</template>
+
+<script setup>
+import GenericMonitorList from '../../components/GenericMonitorList.vue';
+import { getPendingCollections } from '../../api/monitor.js';
+import { formatRFC3339 } from '../../utils/format.js';
+
+// 适配通用组件的 fetchData prop
+const fetchPendingCollections = async (params) => {
+  return await getPendingCollections(params);
+};
+
+// 定义表格的列，依据 swagger.json
+const pendingCollectionColumns = [
+  {
+    title: '关联ID',
+    dataIndex: 'correlation_id',
+    key: 'correlation_id',
+    minWidth: 300,
+  },
+  {
+    title: '设备ID',
+    dataIndex: 'device_id',
+    key: 'device_id',
+    sorter: true,
+    filterType: 'number',
+    minWidth: 120,
+  },
+  {
+    title: '状态',
+    dataIndex: 'status',
+    key: 'status',
+    filterType: 'select',
+    filterOptions: [
+      { text: '等待中', value: '等待中' },
+      { text: '已完成', value: '已完成' },
+      { text: '已超时', value: '已超时' },
+    ],
+    minWidth: 120,
+  },
+  {
+    title: '创建时间',
+    dataIndex: 'created_at',
+    key: 'created_at',
+    sorter: true,
+    filterType: 'dateRange',
+    formatter: (row, column, cellValue) => formatRFC3339(cellValue),
+    minWidth: 180,
+  },
+  {
+    title: '完成时间',
+    dataIndex: 'fulfilled_at',
+    key: 'fulfilled_at',
+    sorter: true,
+    formatter: (row, column, cellValue) => formatRFC3339(cellValue),
+    minWidth: 180,
+  },
+];
+</script>
+
+<style scoped>
+/* 视图容器样式 */
+</style>

src/views/monitor/PigBatchLogsView.vue

@@ -0,0 +1,99 @@
+<template>
+  <div class="pig-batch-logs-view">
+    <GenericMonitorList
+      :fetchData="fetchPigBatchLogs"
+      :columnsConfig="pigBatchLogColumns"
+    />
+  </div>
+</template>
+
+<script setup>
+import GenericMonitorList from '../../components/GenericMonitorList.vue';
+import { getPigBatchLogs } from '../../api/monitor.js';
+import { formatRFC3339 } from '../../utils/format.js';
+
+// 适配通用组件的 fetchData prop
+const fetchPigBatchLogs = async (params) => {
+  return await getPigBatchLogs(params);
+};
+
+// 定义表格的列，依据 swagger.json
+const pigBatchLogColumns = [
+  {
+    title: '记录ID',
+    dataIndex: 'id',
+    key: 'id',
+    sorter: true,
+    minWidth: 100,
+  },
+  {
+    title: '猪批次ID',
+    dataIndex: 'pig_batch_id',
+    key: 'pig_batch_id',
+    filterType: 'number',
+    sorter: true,
+    minWidth: 120,
+  },
+  {
+    title: '变更类型',
+    dataIndex: 'change_type',
+    key: 'change_type',
+    filterType: 'select',
+    filterOptions: [
+      { text: '死亡', value: '死亡' },
+      { text: '淘汰', value: '淘汰' },
+      { text: '销售', value: '销售' },
+      { text: '购买', value: '购买' },
+      { text: '转入', value: '转入' },
+      { text: '转出', value: '转出' },
+      { text: '盘点校正', value: '盘点校正' },
+    ],
+    minWidth: 120,
+  },
+  {
+    title: '变更数量',
+    dataIndex: 'change_count',
+    key: 'change_count',
+    sorter: true,
+    minWidth: 120,
+  },
+  {
+    title: '变更前数量',
+    dataIndex: 'before_count',
+    key: 'before_count',
+    minWidth: 120,
+  },
+  {
+    title: '变更后数量',
+    dataIndex: 'after_count',
+    key: 'after_count',
+    minWidth: 120,
+  },
+  {
+    title: '发生时间',
+    dataIndex: 'happened_at',
+    key: 'happened_at',
+    sorter: true,
+    filterType: 'dateRange',
+    formatter: (row, column, cellValue) => formatRFC3339(cellValue),
+    minWidth: 180,
+  },
+  {
+    title: '操作员ID',
+    dataIndex: 'operator_id',
+    key: 'operator_id',
+    filterType: 'number',
+    minWidth: 120,
+  },
+  {
+    title: '原因',
+    dataIndex: 'reason',
+    key: 'reason',
+    minWidth: 200,
+  },
+];
+</script>
+
+<style scoped>
+/* 视图容器样式 */
+</style>

src/views/monitor/PigPurchasesView.vue

@@ -0,0 +1,92 @@
+<template>
+  <div class="pig-purchases-view">
+    <GenericMonitorList
+      :fetchData="fetchPigPurchases"
+      :columnsConfig="pigPurchaseColumns"
+    />
+  </div>
+</template>
+
+<script setup>
+import GenericMonitorList from '../../components/GenericMonitorList.vue';
+import { getPigPurchases } from '../../api/monitor.js';
+import { formatRFC3339 } from '../../utils/format.js';
+
+// 适配通用组件的 fetchData prop
+const fetchPigPurchases = async (params) => {
+  return await getPigPurchases(params);
+};
+
+// 定义表格的列，依据 swagger.json
+const pigPurchaseColumns = [
+  {
+    title: '采购ID',
+    dataIndex: 'id',
+    key: 'id',
+    sorter: true,
+    minWidth: 100,
+  },
+  {
+    title: '猪批次ID',
+    dataIndex: 'pig_batch_id',
+    key: 'pig_batch_id',
+    filterType: 'number',
+    sorter: true,
+    minWidth: 120,
+  },
+  {
+    title: '供应商',
+    dataIndex: 'supplier',
+    key: 'supplier',
+    filterType: 'text',
+    minWidth: 150,
+  },
+  {
+    title: '采购数量',
+    dataIndex: 'quantity',
+    key: 'quantity',
+    sorter: true,
+    minWidth: 120,
+  },
+  {
+    title: '单价',
+    dataIndex: 'unit_price',
+    key: 'unit_price',
+    sorter: true,
+    minWidth: 120,
+  },
+  {
+    title: '总价',
+    dataIndex: 'total_price',
+    key: 'total_price',
+    sorter: true,
+    minWidth: 120,
+  },
+  {
+    title: '采购日期',
+    dataIndex: 'purchase_date',
+    key: 'purchase_date',
+    sorter: true,
+    filterType: 'dateRange',
+    formatter: (row, column, cellValue) => formatRFC3339(cellValue),
+    minWidth: 180,
+  },
+  {
+    title: '操作员ID',
+    dataIndex: 'operator_id',
+    key: 'operator_id',
+    filterType: 'number',
+    minWidth: 120,
+  },
+  {
+    title: '备注',
+    dataIndex: 'remarks',
+    key: 'remarks',
+    minWidth: 200,
+  },
+];
+</script>
+
+<style scoped>
+/* 视图容器样式 */
+</style>

src/views/monitor/PigSalesView.vue

@@ -0,0 +1,92 @@
+<template>
+  <div class="pig-sales-view">
+    <GenericMonitorList
+      :fetchData="fetchPigSales"
+      :columnsConfig="pigSaleColumns"
+    />
+  </div>
+</template>
+
+<script setup>
+import GenericMonitorList from '../../components/GenericMonitorList.vue';
+import { getPigSales } from '../../api/monitor.js';
+import { formatRFC3339 } from '../../utils/format.js';
+
+// 适配通用组件的 fetchData prop
+const fetchPigSales = async (params) => {
+  return await getPigSales(params);
+};
+
+// 定义表格的列，依据 swagger.json
+const pigSaleColumns = [
+  {
+    title: '售卖ID',
+    dataIndex: 'id',
+    key: 'id',
+    sorter: true,
+    minWidth: 100,
+  },
+  {
+    title: '猪批次ID',
+    dataIndex: 'pig_batch_id',
+    key: 'pig_batch_id',
+    filterType: 'number',
+    sorter: true,
+    minWidth: 120,
+  },
+  {
+    title: '买方',
+    dataIndex: 'buyer',
+    key: 'buyer',
+    filterType: 'text',
+    minWidth: 150,
+  },
+  {
+    title: '售卖数量',
+    dataIndex: 'quantity',
+    key: 'quantity',
+    sorter: true,
+    minWidth: 120,
+  },
+  {
+    title: '单价',
+    dataIndex: 'unit_price',
+    key: 'unit_price',
+    sorter: true,
+    minWidth: 120,
+  },
+  {
+    title: '总价',
+    dataIndex: 'total_price',
+    key: 'total_price',
+    sorter: true,
+    minWidth: 120,
+  },
+  {
+    title: '售卖日期',
+    dataIndex: 'sale_date',
+    key: 'sale_date',
+    sorter: true,
+    filterType: 'dateRange',
+    formatter: (row, column, cellValue) => formatRFC3339(cellValue),
+    minWidth: 180,
+  },
+  {
+    title: '操作员ID',
+    dataIndex: 'operator_id',
+    key: 'operator_id',
+    filterType: 'number',
+    minWidth: 120,
+  },
+  {
+    title: '备注',
+    dataIndex: 'remarks',
+    key: 'remarks',
+    minWidth: 200,
+  },
+];
+</script>
+
+<style scoped>
+/* 视图容器样式 */
+</style>

src/views/monitor/PigSickLogsView.vue

@@ -0,0 +1,106 @@
+<template>
+  <div class="pig-sick-logs-view">
+    <GenericMonitorList
+      :fetchData="fetchPigSickLogs"
+      :columnsConfig="pigSickLogColumns"
+    />
+  </div>
+</template>
+
+<script setup>
+import GenericMonitorList from '../../components/GenericMonitorList.vue';
+import { getPigSickLogs } from '../../api/monitor.js';
+import { formatRFC3339 } from '../../utils/format.js';
+
+// 适配通用组件的 fetchData prop
+const fetchPigSickLogs = async (params) => {
+  return await getPigSickLogs(params);
+};
+
+// 定义表格的列，依据 swagger.json
+const pigSickLogColumns = [
+  {
+    title: '记录ID',
+    dataIndex: 'id',
+    key: 'id',
+    sorter: true,
+    minWidth: 100,
+  },
+  {
+    title: '猪批次ID',
+    dataIndex: 'pig_batch_id',
+    key: 'pig_batch_id',
+    filterType: 'number',
+    sorter: true,
+    minWidth: 120,
+  },
+  {
+    title: '猪栏ID',
+    dataIndex: 'pen_id',
+    key: 'pen_id',
+    filterType: 'number',
+    sorter: true,
+    minWidth: 120,
+  },
+  {
+    title: '原因',
+    dataIndex: 'reason',
+    key: 'reason',
+    filterType: 'select',
+    filterOptions: [
+      { text: '患病', value: '患病' },
+      { text: '康复', value: '康复' },
+      { text: '死亡', value: '死亡' },
+      { text: '淘汰', value: '淘汰' },
+      { text: '转入', value: '转入' },
+      { text: '转出', value: '转出' },
+      { text: '其他', value: '其他' },
+    ],
+    minWidth: 120,
+  },
+  {
+    title: '治疗地点',
+    dataIndex: 'treatment_location',
+    key: 'treatment_location',
+    filterType: 'select',
+    filterOptions: [
+        { text: '原地治疗', value: '原地治疗' },
+        { text: '病猪栏治疗', value: '病猪栏治疗' },
+    ],
+    minWidth: 130,
+  },
+  {
+    title: '变更数量',
+    dataIndex: 'change_count',
+    key: 'change_count',
+    sorter: true,
+    minWidth: 120,
+  },
+  {
+    title: '发生时间',
+    dataIndex: 'happened_at',
+    key: 'happened_at',
+    sorter: true,
+    filterType: 'dateRange',
+    formatter: (row, column, cellValue) => formatRFC3339(cellValue),
+    minWidth: 180,
+  },
+  {
+    title: '操作员ID',
+    dataIndex: 'operator_id',
+    key: 'operator_id',
+    filterType: 'number',
+    minWidth: 120,
+  },
+  {
+    title: '备注',
+    dataIndex: 'remarks',
+    key: 'remarks',
+    minWidth: 200,
+  },
+];
+</script>
+
+<style scoped>
+/* 视图容器样式 */
+</style>

src/views/monitor/PigTransferLogsView.vue

@@ -0,0 +1,102 @@
+<template>
+  <div class="pig-transfer-logs-view">
+    <GenericMonitorList
+      :fetchData="fetchPigTransferLogs"
+      :columnsConfig="pigTransferLogColumns"
+    />
+  </div>
+</template>
+
+<script setup>
+import GenericMonitorList from '../../components/GenericMonitorList.vue';
+import { getPigTransferLogs } from '../../api/monitor.js';
+import { formatRFC3339 } from '../../utils/format.js';
+
+// 适配通用组件的 fetchData prop
+const fetchPigTransferLogs = async (params) => {
+  return await getPigTransferLogs(params);
+};
+
+// 定义表格的列，依据 swagger.json
+const pigTransferLogColumns = [
+  {
+    title: '记录ID',
+    dataIndex: 'id',
+    key: 'id',
+    sorter: true,
+    minWidth: 100,
+  },
+  {
+    title: '猪批次ID',
+    dataIndex: 'pig_batch_id',
+    key: 'pig_batch_id',
+    filterType: 'number',
+    sorter: true,
+    minWidth: 120,
+  },
+  {
+    title: '猪栏ID',
+    dataIndex: 'pen_id',
+    key: 'pen_id',
+    filterType: 'number',
+    sorter: true,
+    minWidth: 120,
+  },
+  {
+    title: '迁移类型',
+    dataIndex: 'type',
+    key: 'type',
+    filterType: 'select',
+    filterOptions: [
+      { text: '群内调栏', value: '群内调栏' },
+      { text: '跨群调栏', value: '跨群调栏' },
+      { text: '销售', value: '销售' },
+      { text: '死亡', value: '死亡' },
+      { text: '淘汰', value: '淘汰' },
+      { text: '新购入', value: '新购入' },
+      { text: '产房转入', value: '产房转入' },
+    ],
+    minWidth: 130,
+  },
+  {
+    title: '数量',
+    dataIndex: 'quantity',
+    key: 'quantity',
+    sorter: true,
+    minWidth: 100,
+  },
+  {
+    title: '迁移时间',
+    dataIndex: 'transfer_time',
+    key: 'transfer_time',
+    sorter: true,
+    filterType: 'dateRange',
+    formatter: (row, column, cellValue) => formatRFC3339(cellValue),
+    minWidth: 180,
+  },
+  {
+    title: '操作员ID',
+    dataIndex: 'operator_id',
+    key: 'operator_id',
+    filterType: 'number',
+    minWidth: 120,
+  },
+  {
+    title: '关联ID',
+    dataIndex: 'correlation_id',
+    key: 'correlation_id',
+    filterType: 'text',
+    minWidth: 280,
+  },
+  {
+    title: '备注',
+    dataIndex: 'remarks',
+    key: 'remarks',
+    minWidth: 200,
+  },
+];
+</script>
+
+<style scoped>
+/* 视图容器样式 */
+</style>

src/views/monitor/PlanExecutionLogsView.vue

@@ -0,0 +1,79 @@
+<template>
+  <div class="plan-execution-logs-view">
+    <GenericMonitorList
+      :fetchData="fetchPlanExecutionLogs"
+      :columnsConfig="planExecutionLogColumns"
+    />
+  </div>
+</template>
+
+<script setup>
+import GenericMonitorList from '../../components/GenericMonitorList.vue';
+import { getPlanExecutionLogs } from '../../api/monitor.js';
+import { formatRFC3339 } from '../../utils/format.js';
+
+// 适配通用组件的 fetchData prop
+const fetchPlanExecutionLogs = async (params) => {
+  return await getPlanExecutionLogs(params);
+};
+
+// 定义表格的列，依据 swagger.json
+const planExecutionLogColumns = [
+  {
+    title: '记录ID',
+    dataIndex: 'id',
+    key: 'id',
+    sorter: true,
+    minWidth: 100,
+  },
+  {
+    title: '计划ID',
+    dataIndex: 'plan_id',
+    key: 'plan_id',
+    filterType: 'number',
+    sorter: true,
+    minWidth: 120,
+  },
+  {
+    title: '状态',
+    dataIndex: 'status',
+    key: 'status',
+    filterType: 'select',
+    filterOptions: [
+      { text: '已开始', value: '已开始' },
+      { text: '已完成', value: '已完成' },
+      { text: '失败', value: '失败' },
+      { text: '已取消', value: '已取消' },
+      { text: '等待中', value: '等待中' },
+    ],
+    minWidth: 120,
+  },
+  {
+    title: '开始时间',
+    dataIndex: 'started_at',
+    key: 'started_at',
+    sorter: true,
+    filterType: 'dateRange',
+    formatter: (row, column, cellValue) => formatRFC3339(cellValue),
+    minWidth: 180,
+  },
+  {
+    title: '结束时间',
+    dataIndex: 'ended_at',
+    key: 'ended_at',
+    sorter: true,
+    formatter: (row, column, cellValue) => formatRFC3339(cellValue),
+    minWidth: 180,
+  },
+  {
+    title: '错误信息',
+    dataIndex: 'error',
+    key: 'error',
+    minWidth: 250,
+  },
+];
+</script>
+
+<style scoped>
+/* 视图容器样式 */
+</style>

src/views/monitor/RawMaterialPurchasesView.vue

@@ -0,0 +1,85 @@
+<template>
+  <div class="raw-material-purchases-view">
+    <GenericMonitorList
+      :fetchData="fetchRawMaterialPurchases"
+      :columnsConfig="rawMaterialPurchaseColumns"
+    />
+  </div>
+</template>
+
+<script setup>
+import GenericMonitorList from '../../components/GenericMonitorList.vue';
+import { getRawMaterialPurchases } from '../../api/monitor.js';
+import { formatRFC3339 } from '../../utils/format.js';
+
+// 适配通用组件的 fetchData prop
+const fetchRawMaterialPurchases = async (params) => {
+  return await getRawMaterialPurchases(params);
+};
+
+// 定义表格的列，依据 swagger.json
+const rawMaterialPurchaseColumns = [
+  {
+    title: '采购ID',
+    dataIndex: 'id',
+    key: 'id',
+    sorter: true,
+    minWidth: 100,
+  },
+  {
+    title: '原料名称',
+    dataIndex: ['raw_material', 'name'], // 嵌套属性
+    key: 'raw_material_name',
+    minWidth: 150,
+  },
+  {
+    title: '原料ID',
+    dataIndex: 'raw_material_id',
+    key: 'raw_material_id',
+    filterType: 'number',
+    sorter: true,
+    minWidth: 120,
+  },
+  {
+    title: '供应商',
+    dataIndex: 'supplier',
+    key: 'supplier',
+    filterType: 'text',
+    minWidth: 150,
+  },
+  {
+    title: '数量',
+    dataIndex: 'amount',
+    key: 'amount',
+    sorter: true,
+    minWidth: 120,
+  },
+  {
+    title: '单价',
+    dataIndex: 'unit_price',
+    key: 'unit_price',
+    sorter: true,
+    minWidth: 120,
+  },
+  {
+    title: '总价',
+    dataIndex: 'total_price',
+    key: 'total_price',
+    sorter: true,
+    minWidth: 120,
+  },
+  {
+    title: '采购日期',
+    dataIndex: 'purchase_date',
+    key: 'purchase_date',
+    sorter: true,
+    filterType: 'dateRange',
+    formatter: (row, column, cellValue) => formatRFC3339(cellValue),
+    minWidth: 180,
+  },
+];
+</script>
+
+<style scoped>
+/* 视图容器样式 */
+</style>

src/views/monitor/RawMaterialStockLogsView.vue

@@ -0,0 +1,87 @@
+<template>
+  <div class="raw-material-stock-logs-view">
+    <GenericMonitorList
+      :fetchData="fetchRawMaterialStockLogs"
+      :columnsConfig="rawMaterialStockLogColumns"
+    />
+  </div>
+</template>
+
+<script setup>
+import GenericMonitorList from '../../components/GenericMonitorList.vue';
+import { getRawMaterialStockLogs } from '../../api/monitor.js';
+import { formatRFC3339 } from '../../utils/format.js';
+
+// 适配通用组件的 fetchData prop
+const fetchRawMaterialStockLogs = async (params) => {
+  return await getRawMaterialStockLogs(params);
+};
+
+// 定义表格的列，依据 swagger.json
+const rawMaterialStockLogColumns = [
+  {
+    title: '记录ID',
+    dataIndex: 'id',
+    key: 'id',
+    sorter: true,
+    minWidth: 100,
+  },
+  {
+    title: '原料ID',
+    dataIndex: 'raw_material_id',
+    key: 'raw_material_id',
+    filterType: 'number',
+    sorter: true,
+    minWidth: 120,
+  },
+  {
+    title: '来源类型',
+    dataIndex: 'source_type',
+    key: 'source_type',
+    filterType: 'select',
+    filterOptions: [
+      { text: '采购入库', value: '采购入库' },
+      { text: '饲喂出库', value: '饲喂出库' },
+      { text: '变质出库', value: '变质出库' },
+      { text: '售卖出库', value: '售卖出库' },
+      { text: '杂用领取', value: '杂用领取' },
+      { text: '手动盘点', value: '手动盘点' },
+    ],
+    minWidth: 130,
+  },
+  {
+    title: '来源ID',
+    dataIndex: 'source_id',
+    key: 'source_id',
+    filterType: 'number',
+    sorter: true,
+    minWidth: 120,
+  },
+  {
+    title: '变更数量',
+    dataIndex: 'change_amount',
+    key: 'change_amount',
+    sorter: true,
+    minWidth: 120,
+  },
+  {
+    title: '发生时间',
+    dataIndex: 'happened_at',
+    key: 'happened_at',
+    sorter: true,
+    filterType: 'dateRange',
+    formatter: (row, column, cellValue) => formatRFC3339(cellValue),
+    minWidth: 180,
+  },
+  {
+    title: '备注',
+    dataIndex: 'remarks',
+    key: 'remarks',
+    minWidth: 200,
+  },
+];
+</script>
+
+<style scoped>
+/* 视图容器样式 */
+</style>

src/views/monitor/SensorDataView.vue

@@ -0,0 +1,72 @@
+<template>
+  <div class="sensor-data-view">
+    <GenericMonitorList
+      :fetchData="fetchSensorData"
+      :columnsConfig="sensorDataColumns"
+    />
+  </div>
+</template>
+
+<script setup>
+import GenericMonitorList from '../../components/GenericMonitorList.vue';
+import { getSensorData } from '../../api/monitor.js';
+import { formatRFC3339 } from '../../utils/format.js';
+
+// 适配通用组件的 fetchData prop
+const fetchSensorData = async (params) => {
+  return await getSensorData(params);
+};
+
+// 定义表格的列，依据 swagger.json
+const sensorDataColumns = [
+  {
+    title: '设备ID',
+    dataIndex: 'device_id',
+    key: 'device_id',
+    filterType: 'number',
+    sorter: true,
+    minWidth: 120,
+  },
+  {
+    title: '传感器类型',
+    dataIndex: 'sensor_type',
+    key: 'sensor_type',
+    filterType: 'select',
+    filterOptions: [
+      { text: '信号强度', value: '信号强度' },
+      { text: '电池电量', value: '电池电量' },
+      { text: '温度', value: '温度' },
+      { text: '湿度', value: '湿度' },
+      { text: '重量', value: '重量' },
+    ],
+    minWidth: 150,
+  },
+  {
+    title: '数据',
+    dataIndex: 'data',
+    key: 'data',
+    // 将数组格式化为逗号分隔的字符串
+    formatter: (row, column, cellValue) => Array.isArray(cellValue) ? cellValue.join(', ') : cellValue,
+    minWidth: 150,
+  },
+  {
+    title: '采集时间',
+    dataIndex: 'time',
+    key: 'time',
+    sorter: true,
+    filterType: 'dateRange',
+    formatter: (row, column, cellValue) => formatRFC3339(cellValue),
+    minWidth: 180,
+  },
+  {
+    title: '区域主控ID',
+    dataIndex: 'regional_controller_id',
+    key: 'regional_controller_id',
+    minWidth: 120,
+  },
+];
+</script>
+
+<style scoped>
+/* 视图容器样式 */
+</style>

src/views/monitor/TaskExecutionLogsView.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="task-execution-logs-view">
+    <GenericMonitorList
+      :fetchData="fetchTaskExecutionLogs"
+      :columnsConfig="taskExecutionLogColumns"
+    />
+  </div>
+</template>
+
+<script setup>
+import GenericMonitorList from '../../components/GenericMonitorList.vue';
+import { getTaskExecutionLogs } from '../../api/monitor.js';
+import { formatRFC3339 } from '../../utils/format.js';
+
+// 适配通用组件的 fetchData prop
+const fetchTaskExecutionLogs = async (params) => {
+  return await getTaskExecutionLogs(params);
+};
+
+// 定义表格的列，依据 swagger.json
+const taskExecutionLogColumns = [
+  {
+    title: '记录ID',
+    dataIndex: 'id',
+    key: 'id',
+    sorter: true,
+    minWidth: 100,
+  },
+  {
+    title: '任务ID',
+    dataIndex: 'task_id',
+    key: 'task_id',
+    filterType: 'number',
+    sorter: true,
+    minWidth: 120,
+  },
+  {
+    title: '任务名称',
+    dataIndex: ['task', 'name'], // 嵌套属性
+    key: 'task_name',
+    minWidth: 150,
+  },
+  {
+    title: '计划执行ID',
+    dataIndex: 'plan_execution_log_id',
+    key: 'plan_execution_log_id',
+    filterType: 'number',
+    sorter: true,
+    minWidth: 120,
+  },
+  {
+    title: '状态',
+    dataIndex: 'status',
+    key: 'status',
+    filterType: 'select',
+    filterOptions: [
+      { text: '已开始', value: '已开始' },
+      { text: '已完成', value: '已完成' },
+      { text: '失败', value: '失败' },
+      { text: '已取消', value: '已取消' },
+      { text: '等待中', value: '等待中' },
+    ],
+    minWidth: 120,
+  },
+  {
+    title: '开始时间',
+    dataIndex: 'started_at',
+    key: 'started_at',
+    sorter: true,
+    filterType: 'dateRange',
+    formatter: (row, column, cellValue) => formatRFC3339(cellValue),
+    minWidth: 180,
+  },
+  {
+    title: '结束时间',
+    dataIndex: 'ended_at',
+    key: 'ended_at',
+    sorter: true,
+    formatter: (row, column, cellValue) => formatRFC3339(cellValue),
+    minWidth: 180,
+  },
+  {
+    title: '输出',
+    dataIndex: 'output',
+    key: 'output',
+    minWidth: 250,
+  },
+];
+</script>
+
+<style scoped>
+/* 视图容器样式 */
+</style>

src/views/monitor/UserActionLogsView.vue

@@ -0,0 +1,100 @@
+<template>
+  <div class="user-action-logs-view">
+    <GenericMonitorList
+      :fetchData="fetchUserActionLogs"
+      :columnsConfig="userActionLogColumns"
+    />
+  </div>
+</template>
+
+<script setup>
+import GenericMonitorList from '../../components/GenericMonitorList.vue';
+import { getUserActionLogs } from '../../api/monitor.js';
+import { formatRFC3339 } from '../../utils/format.js';
+
+// 适配通用组件的 fetchData prop
+const fetchUserActionLogs = async (params) => {
+  return await getUserActionLogs(params);
+};
+
+// 定义表格的列，依据 swagger.json
+const userActionLogColumns = [
+  {
+    title: '记录ID',
+    dataIndex: 'id',
+    key: 'id',
+    sorter: true,
+    minWidth: 100,
+  },
+  {
+    title: '用户名',
+    dataIndex: 'username',
+    key: 'username',
+    filterType: 'text',
+    minWidth: 130,
+  },
+  {
+    title: '用户ID',
+    dataIndex: 'user_id',
+    key: 'user_id',
+    filterType: 'number',
+    sorter: true,
+    minWidth: 100,
+  },
+  {
+    title: '操作类型',
+    dataIndex: 'action_type',
+    key: 'action_type',
+    filterType: 'text',
+    minWidth: 130,
+  },
+  {
+    title: '状态',
+    dataIndex: 'status',
+    key: 'status',
+    filterType: 'select',
+    filterOptions: [
+      { text: '成功', value: '成功' },
+      { text: '失败', value: '失败' },
+    ],
+    minWidth: 100,
+  },
+  {
+    title: 'HTTP方法',
+    dataIndex: 'http_method',
+    key: 'http_method',
+    minWidth: 110,
+  },
+  {
+    title: 'HTTP路径',
+    dataIndex: 'http_path',
+    key: 'http_path',
+    minWidth: 250,
+  },
+  {
+    title: '来源IP',
+    dataIndex: 'source_ip',
+    key: 'source_ip',
+    minWidth: 150,
+  },
+  {
+    title: '操作时间',
+    dataIndex: 'time',
+    key: 'time',
+    sorter: true,
+    filterType: 'dateRange',
+    formatter: (row, column, cellValue) => formatRFC3339(cellValue),
+    minWidth: 180,
+  },
+  {
+    title: '描述',
+    dataIndex: 'description',
+    key: 'description',
+    minWidth: 250,
+  },
+];
+</script>
+
+<style scoped>
+/* 视图容器样式 */
+</style>

src/views/monitor/WeighingBatchesView.vue

@@ -0,0 +1,65 @@
+<template>
+  <div class="weighing-batches-view">
+    <GenericMonitorList
+      :fetchData="fetchWeighingBatches"
+      :columnsConfig="weighingBatchColumns"
+    />
+  </div>
+</template>
+
+<script setup>
+import GenericMonitorList from '../../components/GenericMonitorList.vue';
+import { getWeighingBatches } from '../../api/monitor.js';
+import { formatRFC3339 } from '../../utils/format.js';
+
+// 适配通用组件的 fetchData prop
+const fetchWeighingBatches = async (params) => {
+  return await getWeighingBatches(params);
+};
+
+// 定义表格的列，依据 swagger.json
+const weighingBatchColumns = [
+  {
+    title: '记录ID',
+    dataIndex: 'id',
+    key: 'id',
+    sorter: true,
+    minWidth: 100,
+  },
+  {
+    title: '猪批次ID',
+    dataIndex: 'pig_batch_id',
+    key: 'pig_batch_id',
+    filterType: 'number',
+    sorter: true,
+    minWidth: 120,
+  },
+  {
+    title: '称重时间',
+    dataIndex: 'weighing_time',
+    key: 'weighing_time',
+    sorter: true,
+    filterType: 'dateRange',
+    formatter: (row, column, cellValue) => formatRFC3339(cellValue),
+    minWidth: 180,
+  },
+  {
+    title: '描述',
+    dataIndex: 'description',
+    key: 'description',
+    minWidth: 250,
+  },
+  {
+    title: '创建时间',
+    dataIndex: 'created_at',
+    key: 'created_at',
+    sorter: true,
+    formatter: (row, column, cellValue) => formatRFC3339(cellValue),
+    minWidth: 180,
+  },
+];
+</script>
+
+<style scoped>
+/* 视图容器样式 */
+</style>

src/views/monitor/WeighingRecordsView.vue

@@ -0,0 +1,79 @@
+<template>
+  <div class="weighing-records-view">
+    <GenericMonitorList
+      :fetchData="fetchWeighingRecords"
+      :columnsConfig="weighingRecordColumns"
+    />
+  </div>
+</template>
+
+<script setup>
+import GenericMonitorList from '../../components/GenericMonitorList.vue';
+import { getWeighingRecords } from '../../api/monitor.js';
+import { formatRFC3339 } from '../../utils/format.js';
+
+// 适配通用组件的 fetchData prop
+const fetchWeighingRecords = async (params) => {
+  return await getWeighingRecords(params);
+};
+
+// 定义表格的列，依据 swagger.json
+const weighingRecordColumns = [
+  {
+    title: '记录ID',
+    dataIndex: 'id',
+    key: 'id',
+    sorter: true,
+    minWidth: 100,
+  },
+  {
+    title: '批次称重ID',
+    dataIndex: 'weighing_batch_id',
+    key: 'weighing_batch_id',
+    filterType: 'number',
+    sorter: true,
+    minWidth: 120,
+  },
+  {
+    title: '猪栏ID',
+    dataIndex: 'pen_id',
+    key: 'pen_id',
+    filterType: 'number',
+    sorter: true,
+    minWidth: 120,
+  },
+  {
+    title: '重量',
+    dataIndex: 'weight',
+    key: 'weight',
+    sorter: true,
+    minWidth: 100,
+  },
+  {
+    title: '称重时间',
+    dataIndex: 'weighing_time',
+    key: 'weighing_time',
+    sorter: true,
+    filterType: 'dateRange',
+    formatter: (row, column, cellValue) => formatRFC3339(cellValue),
+    minWidth: 180,
+  },
+  {
+    title: '操作员ID',
+    dataIndex: 'operator_id',
+    key: 'operator_id',
+    filterType: 'number',
+    minWidth: 120,
+  },
+  {
+    title: '备注',
+    dataIndex: 'remark',
+    key: 'remark',
+    minWidth: 200,
+  },
+];
+</script>
+
+<style scoped>
+/* 视图容器样式 */
+</style>