面板api请求封装到组件

components/ContentDashboard.vue

@@ -1,6 +1,11 @@
 <template>
   <scroll-view class="dashboard-scroll" scroll-y>
-    <view class="dashboard-content">
+    <!-- 加载状态 -->
+    <view v-if="loading" class="loading-container">
+      <view class="loading-text">加载中...</view>
+    </view>
+    
+    <view class="dashboard-content" v-else>
       <!-- 任务概览 -->
       <view class="task-overview">
       <view 
@@ -145,15 +150,17 @@
 </template>
 
 <script setup>
-import { ref } from 'vue';
+import { ref, onMounted } from 'vue';
 import { getTaskStatusType, getTaskStatusStyle, getStatusText } from '@/utils/taskConfig.js';
+import { getDashboardBrief } from '@/common/api';
+import { useUserStore } from '@/store/user';
 
 // 任务统计
 const taskStats = ref([
-  { label: '完成任务', count: 78 },
+  { label: '完成任务', count: 0 },
-  { label: '待完成任务', count: 28 },
+  { label: '待完成任务', count: 0 },
-  { label: '即将预期', count: 8 },
+  { label: '即将预期', count: 0 },
-  { label: '逾期任务', count: 1 }
+  { label: '逾期任务', count: 0 }
 ]);
 
 // 逾期任务
@@ -180,20 +187,108 @@ const announcements = ref([
 
 // 项目状态
 const projectStatus = ref([
-  { label: '运行中', count: 1 },
+  { label: '运行中', count: 0 },
-  { label: '运维中', count: 1 },
+  { label: '运维中', count: 0 },
-  { label: '即将到期', count: 1 },
+  { label: '即将到期', count: 0 },
-  { label: '开发超期', count: 1 }
+  { label: '开发超期', count: 0 }
 ]);
 
 // 客户状态
 const customerStatus = ref([
-  { label: '今日新增', count: 1 },
+  { label: '今日新增', count: 0 },
-  { label: '今日已跟进', count: 1 },
+  { label: '今日已跟进', count: 0 },
-  { label: '今日待跟进', count: 1 },
+  { label: '今日待跟进', count: 0 },
-  { label: '即将跟进', count: 1 }
+  { label: '即将跟进', count: 0 }
 ]);
 
+// 加载状态
+const loading = ref(false);
+
+// 从 API 数据映射到组件数据
+const mapApiDataToComponent = (apiData) => {
+  if (!apiData) return;
+  
+  // 映射任务统计
+  const task = apiData.task || {};
+  taskStats.value = [
+    { label: '完成任务', count: task.completed || 0 },
+    { label: '待完成任务', count: task.inProgress || 0 },
+    { label: '即将预期', count: task.soonExpire || 0 },
+    { label: '逾期任务', count: task.overdueUncompleted || 0 }
+  ];
+  
+  // 映射项目状态
+  const project = apiData.project || {};
+  projectStatus.value = [
+    { label: '运行中', count: project.inProgress || 0 },
+    { label: '运维中', count: project.maintenance || 0 },
+    { label: '即将到期', count: project.devSoonExpire || 0 },
+    { label: '开发超期', count: project.developmentOverdue || 0 }
+  ];
+  
+  // 映射客户状态
+  const customer = apiData.customer || {};
+  customerStatus.value = [
+    { label: '今日新增', count: customer.today || 0 },
+    { label: '今日已跟进', count: customer.todayFollowed || 0 },
+    { label: '今日待跟进', count: customer.todayWaitFollow || 0 },
+    { label: '即将跟进', count: customer.soonFollow || 0 }
+  ];
+  
+  // 逾期任务列表（如果有详细数据，可以在这里处理）
+  // 目前 API 只返回了统计数字，如果有详细列表接口，可以在这里调用
+  // overdueTasks.value = [];
+};
+
+// 加载看板数据
+const loadDashboardData = async () => {
+  try {
+    loading.value = true;
+    
+    const keys = [
+      'taskStatus',
+      'taskTodayCompleted',
+      'taskSoonExpire',
+      'taskOverdueUncompleted',
+      'projectStatus',
+      'projectDevSoonExpire',
+      'projectDevOverdue',
+      'customerTodayCreate',
+      'customerTodayFollowed',
+      'customerTodayWaitFollow',
+      'customerSoonFollow',
+      'customerMonthFollow',
+      'customerMonthFollowCount'
+    ];
+    
+    // 从 store 获取用户ID，如果没有则使用默认值
+    const userStore = useUserStore();
+    // 尝试从 userInfo 中获取用户ID，如果没有则使用默认值
+    const joinUserId = userStore.userInfo?.id || userStore.userInfo?.userId || '23';
+
+    const res = await getDashboardBrief({
+      joinUserId,
+      keys
+    });
+    
+    console.log('看板数据加载成功:', res);
+    mapApiDataToComponent(res);
+  } catch (err) {
+    console.error('加载看板数据失败:', err);
+    uni.showToast({
+      title: '加载数据失败',
+      icon: 'none'
+    });
+  } finally {
+    loading.value = false;
+  }
+};
+
+// 组件挂载时加载数据
+onMounted(() => {
+  loadDashboardData();
+});
+
 // 跳转到任务列表页
 const goToTaskList = (label) => {
   // 将中文标签映射为状态参数
@@ -640,5 +735,17 @@ const getTagCustomStyle = (status) => {
   color: #666;
   text-align: center;
 }
+
+.loading-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 40px 0;
+}
+
+.loading-text {
+  font-size: 14px;
+  color: #999;
+}
 </style>
 

pages/index/index.vue

@@ -45,7 +45,7 @@
 import { ref, computed, watch, onMounted } from 'vue';
 import { onShow } from '@dcloudio/uni-app';
 import { useUserStore } from '@/store/user';
-import { getUserInfo, getDashboardBrief } from '@/common/api';
+import { getUserInfo } from '@/common/api';
 
 import FabPlus from '@/components/FabPlus.vue';
 import AddEventModal from '@/components/AddEventModal.vue';
@@ -136,32 +136,8 @@ onMounted(() => {
   }).catch(err => {
     console.error('getInfo 接口请求失败:', err);
   });
-
-  // 请求仪表板简要信息接口
-  const keys = [
-    'taskStatus',
-    'taskTodayCompleted',
-    'taskSoonExpire',
-    'taskOverdueUncompleted',
-    'projectStatus',
-    'projectDevSoonExpire',
-    'projectDevOverdue',
-    'customerTodayCreate',
-    'customerTodayFollowed',
-    'customerTodayWaitFollow',
-    'customerSoonFollow',
-    'customerMonthFollow',
-    'customerMonthFollowCount'
-  ];
   
-  getDashboardBrief({
+  // 看板数据已由 ContentDashboard 组件自己加载，这里不再请求
-    joinUserId: '23',
-    keys
-  }).then(res => {
-    console.log('dashboard/brief 接口返回:', res);
-  }).catch(err => {
-    console.error('dashboard/brief 接口请求失败:', err);
-  });
 });
 
 // 页面显示时处理从新建日程页面返回的数据