优化首页展示

src/views/home/Home.vue

@@ -23,7 +23,23 @@
         <el-col :span="6">
           <el-card class="stat-card">
             <div class="stat-item">
-              <div class="stat-value">24</div>
+              <div class="stat-value">{{ activeBatchCount }}</div>
+              <div class="stat-label">活跃批次</div>
+            </div>
+          </el-card>
+        </el-col>
+        <el-col :span="6">
+          <el-card class="stat-card">
+            <div class="stat-item">
+              <div class="stat-value">{{ totalPigCount }}</div>
+              <div class="stat-label">猪只总数</div>
+            </div>
+          </el-card>
+        </el-col>
+        <el-col :span="6">
+          <el-card class="stat-card">
+            <div class="stat-item">
+              <div class="stat-value">{{ totalDeviceCount }}</div>
               <div class="stat-label">设备总数</div>
             </div>
           </el-card>
@@ -31,24 +47,8 @@
         <el-col :span="6">
           <el-card class="stat-card">
             <div class="stat-item">
-              <div class="stat-value">2</div>
+              <div class="stat-value">{{ totalPlanCount }}</div>
-              <div class="stat-label">异常设备</div>
+              <div class="stat-label">计划总数</div>
-            </div>
-          </el-card>
-        </el-col>
-        <el-col :span="6">
-          <el-card class="stat-card">
-            <div class="stat-item">
-              <div class="stat-value">16</div>
-              <div class="stat-label">在线设备</div>
-            </div>
-          </el-card>
-        </el-col>
-        <el-col :span="6">
-          <el-card class="stat-card">
-            <div class="stat-item">
-              <div class="stat-value">8</div>
-              <div class="stat-label">离线设备</div>
             </div>
           </el-card>
         </el-col>
@@ -58,8 +58,87 @@
 </template>
 
 <script>
+import { onMounted, ref } from 'vue';
+import { PigBatchApi } from '../../api/pigBatch'; // 修正路径
+import { DeviceApi, AreaControllerApi } from '../../api/device'; // 修正路径
+import { PlanApi } from '../../api/plan'; // 修正路径
+import { ElMessage } from 'element-plus'; // 导入 ElMessage 用于错误提示
+
 export default {
-  name: 'Home'
+  name: 'Home',
+  setup() {
+    // 定义响应式数据
+    const activeBatchCount = ref(0);
+    const totalPigCount = ref(0);
+    const totalDeviceCount = ref(0);
+    const totalPlanCount = ref(0);
+
+    // 获取活跃批次和猪只总数
+    const fetchPigBatchStats = async () => {
+      try {
+        const response = await PigBatchApi.getPigBatches({ is_active: true });
+        if (response && response.data) {
+          activeBatchCount.value = response.data.length;
+          totalPigCount.value = response.data.reduce((sum, batch) => sum + batch.current_total_quantity, 0);
+        }
+      } catch (error) {
+        console.error('获取活跃批次和猪只总数失败:', error);
+        ElMessage.error('获取活跃批次和猪只总数失败');
+      }
+    };
+
+    // 获取设备总数
+    const fetchDeviceStats = async () => {
+      try {
+        const [devicesResponse, areaControllersResponse] = await Promise.all([
+          DeviceApi.list(),
+          AreaControllerApi.list()
+        ]);
+
+        let devicesCount = 0;
+        if (devicesResponse && devicesResponse.data) {
+          devicesCount = devicesResponse.data.length;
+        }
+
+        let areaControllersCount = 0;
+        if (areaControllersResponse && areaControllersResponse.data) {
+          areaControllersCount = areaControllersResponse.data.length;
+        }
+        totalDeviceCount.value = devicesCount + areaControllersCount;
+      } catch (error) {
+        console.error('获取设备总数失败:', error);
+        ElMessage.error('获取设备总数失败');
+      }
+    };
+
+    // 获取计划总数
+    const fetchPlanStats = async () => {
+      try {
+        // 修正：为 page 和 page_size 提供默认值，因为后端强制要求
+        const response = await PlanApi.getPlans({ plan_type: '自定义任务', page: 1, page_size: 10 });
+        if (response && response.data) {
+          totalPlanCount.value = response.data.total;
+        }
+      } catch (error) {
+        console.error('获取计划总数失败:', error);
+        ElMessage.error('获取计划总数失败');
+      }
+    };
+
+    // 组件挂载时调用数据获取函数
+    onMounted(() => {
+      fetchPigBatchStats();
+      fetchDeviceStats();
+      fetchPlanStats();
+    });
+
+    return {
+      activeBatchCount,
+      totalPigCount,
+      totalDeviceCount,
+      totalPlanCount
+    };
+  }
 };
 </script>