面板api请求封装到组件
This commit is contained in:
WindowBird
parent
10950db757
commit
badefc18f1
|
|
@ -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: 28 },
|
||||
{ label: '即将预期', count: 8 },
|
||||
{ label: '逾期任务', count: 1 }
|
||||
{ label: '完成任务', count: 0 },
|
||||
{ label: '待完成任务', count: 0 },
|
||||
{ label: '即将预期', count: 0 },
|
||||
{ label: '逾期任务', count: 0 }
|
||||
]);
|
||||
|
||||
// 逾期任务
|
||||
|
|
@ -180,20 +187,108 @@ const announcements = ref([
|
|||
|
||||
// 项目状态
|
||||
const projectStatus = ref([
|
||||
{ label: '运行中', count: 1 },
|
||||
{ label: '运维中', count: 1 },
|
||||
{ label: '即将到期', count: 1 },
|
||||
{ label: '开发超期', count: 1 }
|
||||
{ label: '运行中', count: 0 },
|
||||
{ label: '运维中', count: 0 },
|
||||
{ label: '即将到期', count: 0 },
|
||||
{ label: '开发超期', count: 0 }
|
||||
]);
|
||||
|
||||
// 客户状态
|
||||
const customerStatus = ref([
|
||||
{ label: '今日新增', count: 1 },
|
||||
{ label: '今日已跟进', count: 1 },
|
||||
{ label: '今日待跟进', count: 1 },
|
||||
{ label: '即将跟进', count: 1 }
|
||||
{ label: '今日新增', count: 0 },
|
||||
{ label: '今日已跟进', count: 0 },
|
||||
{ label: '今日待跟进', count: 0 },
|
||||
{ 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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
|
@ -137,31 +137,7 @@ onMounted(() => {
|
|||
console.error('getInfo 接口请求失败:', err);
|
||||
});
|
||||
|
||||
// 请求仪表板简要信息接口
|
||||
const keys = [
|
||||
'taskStatus',
|
||||
'taskTodayCompleted',
|
||||
'taskSoonExpire',
|
||||
'taskOverdueUncompleted',
|
||||
'projectStatus',
|
||||
'projectDevSoonExpire',
|
||||
'projectDevOverdue',
|
||||
'customerTodayCreate',
|
||||
'customerTodayFollowed',
|
||||
'customerTodayWaitFollow',
|
||||
'customerSoonFollow',
|
||||
'customerMonthFollow',
|
||||
'customerMonthFollowCount'
|
||||
];
|
||||
|
||||
getDashboardBrief({
|
||||
joinUserId: '23',
|
||||
keys
|
||||
}).then(res => {
|
||||
console.log('dashboard/brief 接口返回:', res);
|
||||
}).catch(err => {
|
||||
console.error('dashboard/brief 接口请求失败:', err);
|
||||
});
|
||||
// 看板数据已由 ContentDashboard 组件自己加载，这里不再请求
|
||||
});
|
||||
|
||||
// 页面显示时处理从新建日程页面返回的数据
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user