refactor(topOne): 清理未使用的响应式数据和简化组件
移除多个未使用的响应式数据变量和模板代码 简化销售进度和个人销售排名组件的显示 重构转化对比数据处理逻辑，确保数据格式正确
This commit is contained in:
@@ -3,11 +3,6 @@
|
||||
<!-- 页面标题 -->
|
||||
<div class="dashboard-header">
|
||||
<h1>管理者数据看板</h1>
|
||||
<div class="header-actions">
|
||||
<button class="refresh-btn" @click="refreshData">
|
||||
<i class="icon-refresh"></i> 刷新数据
|
||||
</button>
|
||||
</div>
|
||||
<!-- 头像 -->
|
||||
<UserDropdown />
|
||||
</div>
|
||||
@@ -168,30 +163,6 @@ import DataDetailCard from "./components/DataDetailCard.vue";
|
||||
import { getOverallCompanyPerformance,getCompanyDepositConversionRate,getCompanyTotalCallCount,getCompanyNewCustomer,getCompanyConversionRate,getCompanyRealTimeProgress
|
||||
,getCompanyConversionRateVsLast,getSalesMonthlyPerformance,getCenterPerformanceRank,getCustomerTypeDistribution,getUrgentNeedToAddress,getLevelTree,getDetailedDataTable
|
||||
} from "@/api/top";
|
||||
|
||||
// 响应式数据
|
||||
const kpiData = reactive({
|
||||
salesAmount: 2850000,
|
||||
salesTrend: 12.5,
|
||||
dealCustomers: 156,
|
||||
customerTrend: 8.3,
|
||||
conversionRate: 23.8,
|
||||
conversionTrend: 5.2,
|
||||
});
|
||||
|
||||
const salesData = reactive({
|
||||
successTip: "今日已成交23单，超额完成目标120%",
|
||||
warningTip: "有5个重要客户需要紧急跟进",
|
||||
infoTip: "下午3点有重要客户会议，请提前准备",
|
||||
});
|
||||
|
||||
const communicationData = reactive({
|
||||
totalDuration: 128.5,
|
||||
effectiveRate: 78.3,
|
||||
firstResponseTime: 45,
|
||||
connectionRate: 92.1,
|
||||
});
|
||||
|
||||
const rankingPeriod = ref("month");
|
||||
const rankingData = ref([
|
||||
{ id: 1, name: "张三", department: "销售一部", performance: 125000 },
|
||||
@@ -201,192 +172,6 @@ const rankingData = ref([
|
||||
{ id: 5, name: "钱七", department: "销售二部", performance: 89000 },
|
||||
]);
|
||||
|
||||
const funnelData = ref([
|
||||
{ name: "线索", count: 1000, percentage: 100, color: "#4CAF50" },
|
||||
{ name: "沟通", count: 650, percentage: 65, color: "#2196F3" },
|
||||
{ name: "意向", count: 380, percentage: 38, color: "#FF9800" },
|
||||
{ name: "预约", count: 180, percentage: 18, color: "#9C27B0" },
|
||||
{ name: "成交", count: 120, percentage: 12, color: "#F44336" },
|
||||
]);
|
||||
|
||||
// 对比数据（上期/上月数据）
|
||||
const comparisonData = ref({
|
||||
period: [
|
||||
{ name: "线索", count: 850 },
|
||||
{ name: "沟通", count: 580 },
|
||||
{ name: "意向", count: 320 },
|
||||
{ name: "预约", count: 150 },
|
||||
{ name: "成交", count: 95 },
|
||||
],
|
||||
month: [
|
||||
{ name: "线索", count: 920 },
|
||||
{ name: "沟通", count: 610 },
|
||||
{ name: "意向", count: 350 },
|
||||
{ name: "预约", count: 165 },
|
||||
{ name: "成交", count: 108 },
|
||||
],
|
||||
});
|
||||
|
||||
const realtimeActivities = ref([
|
||||
{
|
||||
id: 1,
|
||||
type: "deal",
|
||||
message: "张三成功签约客户李总，金额 ¥50,000",
|
||||
timestamp: new Date(),
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
type: "lost",
|
||||
message: "王五的客户刘总流失，原因：价格因素",
|
||||
timestamp: new Date(Date.now() - 300000),
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
type: "deal",
|
||||
message: "赵六成功签约客户陈总，金额 ¥80,000",
|
||||
timestamp: new Date(Date.now() - 600000),
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
type: "call",
|
||||
message: "李四完成与客户的重要通话，时长45分钟",
|
||||
timestamp: new Date(Date.now() - 900000),
|
||||
},
|
||||
]);
|
||||
|
||||
const qualityCalls = ref([
|
||||
{ id: 1, callerName: "张三 - 李总", duration: 25, score: 9.2 },
|
||||
{ id: 2, callerName: "王五 - 陈总", duration: 18, score: 8.8 },
|
||||
{ id: 3, callerName: "赵六 - 刘总", duration: 32, score: 9.5 },
|
||||
]);
|
||||
|
||||
const parentTypes = ref([
|
||||
{ name: "关注学习成绩", percentage: 45, color: "#4CAF50" },
|
||||
{ name: "重视综合素质", percentage: 30, color: "#2196F3" },
|
||||
{ name: "注重兴趣培养", percentage: 25, color: "#FF9800" },
|
||||
]);
|
||||
|
||||
const hotQuestions = ref([
|
||||
{ id: 1, text: "如何提高孩子的学习成绩？", count: 156 },
|
||||
{ id: 2, text: "课程费用和优惠政策？", count: 142 },
|
||||
{ id: 3, text: "老师的教学经验如何？", count: 128 },
|
||||
{ id: 4, text: "上课时间安排是否灵活？", count: 115 },
|
||||
{ id: 5, text: "孩子不爱学习怎么办？", count: 98 },
|
||||
]);
|
||||
|
||||
// 客户类型数据
|
||||
const customerTypeData = ref([
|
||||
{ name: "18-25岁", value: 120 },
|
||||
{ name: "26-35岁", value: 200 },
|
||||
{ name: "36-45岁", value: 150 },
|
||||
{ name: "46-55岁", value: 80 },
|
||||
{ name: "55岁以上", value: 50 },
|
||||
]);
|
||||
|
||||
// 客户问题排行榜数据 - 计算属性：将API数据转换为组件所需格式
|
||||
const problemRankingData = computed(() => {
|
||||
if (!customerUrgency.value || !customerUrgency.value.company_urgent_issue_ratio) {
|
||||
return []
|
||||
}
|
||||
|
||||
const ratioData = customerUrgency.value.company_urgent_issue_ratio
|
||||
return Object.entries(ratioData).map(([name, value]) => ({
|
||||
name,
|
||||
value
|
||||
}))
|
||||
})
|
||||
|
||||
// 表格数据和筛选
|
||||
const tableData = ref([
|
||||
{
|
||||
id: 1,
|
||||
name: "张三",
|
||||
position: "销售经理",
|
||||
department: "销售一部",
|
||||
dealRate: 85,
|
||||
callDuration: 1200,
|
||||
callCount: 45,
|
||||
dealAmount: 280000,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "李四",
|
||||
position: "销售专员",
|
||||
department: "销售一部",
|
||||
dealRate: 72,
|
||||
callDuration: 980,
|
||||
callCount: 38,
|
||||
dealAmount: 195000,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: "王五",
|
||||
position: "销售经理",
|
||||
department: "销售二部",
|
||||
dealRate: 68,
|
||||
callDuration: 1100,
|
||||
callCount: 42,
|
||||
dealAmount: 220000,
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: "赵六",
|
||||
position: "销售专员",
|
||||
department: "销售二部",
|
||||
dealRate: 65,
|
||||
callDuration: 850,
|
||||
callCount: 35,
|
||||
dealAmount: 165000,
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: "钱七",
|
||||
position: "销售助理",
|
||||
department: "销售三部",
|
||||
dealRate: 58,
|
||||
callDuration: 720,
|
||||
callCount: 28,
|
||||
dealAmount: 125000,
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
name: "孙八",
|
||||
position: "销售经理",
|
||||
department: "销售三部",
|
||||
dealRate: 78,
|
||||
callDuration: 1050,
|
||||
callCount: 40,
|
||||
dealAmount: 245000,
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
name: "周九",
|
||||
position: "销售专员",
|
||||
department: "销售一部",
|
||||
dealRate: 62,
|
||||
callDuration: 890,
|
||||
callCount: 33,
|
||||
dealAmount: 158000,
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
name: "吴十",
|
||||
position: "销售助理",
|
||||
department: "销售二部",
|
||||
dealRate: 55,
|
||||
callDuration: 680,
|
||||
callCount: 25,
|
||||
dealAmount: 112000,
|
||||
},
|
||||
]);
|
||||
|
||||
const filters = ref({
|
||||
department: "",
|
||||
position: "",
|
||||
timeRange: "month",
|
||||
dealStatus: "",
|
||||
});
|
||||
|
||||
const sortField = ref("dealRate");
|
||||
const sortOrder = ref("desc");
|
||||
const selectedPerson = ref(null);
|
||||
@@ -398,29 +183,11 @@ const tasks = ref([
|
||||
assignee: "张三",
|
||||
deadline: "2024-01-15",
|
||||
status: "pending",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "客户满意度调研",
|
||||
assignee: "李四",
|
||||
deadline: "2024-01-20",
|
||||
status: "in-progress",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "新产品培训准备",
|
||||
assignee: "王五",
|
||||
deadline: "2024-01-10",
|
||||
status: "completed",
|
||||
},
|
||||
}
|
||||
]);
|
||||
|
||||
const employees = ref([
|
||||
{ id: 1, name: "张三" },
|
||||
{ id: 2, name: "李四" },
|
||||
{ id: 3, name: "王五" },
|
||||
{ id: 4, name: "赵六" },
|
||||
{ id: 5, name: "钱七" },
|
||||
{ id: 1, name: "张三" }
|
||||
]);
|
||||
|
||||
const showTaskModal = ref(false);
|
||||
@@ -469,8 +236,8 @@ const refreshData = () => {
|
||||
// 处理时间范围变化
|
||||
const handleTimeRangeChange = (timeRange) => {
|
||||
console.log("时间范围变化:", timeRange);
|
||||
// 这里可以根据时间范围重新获取数据
|
||||
// 例如：fetchFunnelData(timeRange)
|
||||
// 根据时间范围重新获取转化对比数据
|
||||
getConversionComparison(timeRange);
|
||||
};
|
||||
|
||||
const sortBy = (field) => {
|
||||
@@ -624,13 +391,15 @@ const conversionComparison = ref({});
|
||||
// 计算属性：转换 conversionComparison 数据为 funnelData 格式
|
||||
const formattedFunnelData = computed(() => {
|
||||
if (!conversionComparison.value || !conversionComparison.value.company_current_rate) {
|
||||
return funnelData.value; // 返回默认数据
|
||||
return []; // 返回空数组，避免数据格式不匹配
|
||||
}
|
||||
|
||||
const currentData = conversionComparison.value.company_current_rate;
|
||||
const stageOrder = ['线索总数', '加微', '到课', '付定金', '成交'];
|
||||
const colors = ['#4CAF50', '#2196F3', '#FF9800', '#9C27B0', '#F44336'];
|
||||
|
||||
|
||||
|
||||
return stageOrder.map((stageName, index) => {
|
||||
const count = currentData[stageName] || 0;
|
||||
const totalCount = currentData['线索总数'] || 1;
|
||||
@@ -655,6 +424,14 @@ const formattedComparisonData = computed(() => {
|
||||
const lastData = conversionComparison.value.company_last_rate;
|
||||
const checkType = conversionComparison.value.check_type;
|
||||
|
||||
|
||||
|
||||
// 确保lastData存在
|
||||
if (!lastData) {
|
||||
|
||||
return {};
|
||||
}
|
||||
|
||||
// 根据 check_type 确定时间范围键
|
||||
const timeRangeKey = checkType === 'month' ? 'month' : 'period';
|
||||
const stageOrder = ['线索总数', '加微', '到课', '付定金', '成交'];
|
||||
@@ -664,9 +441,16 @@ const formattedComparisonData = computed(() => {
|
||||
count: lastData[stageName] || 0
|
||||
}));
|
||||
|
||||
return {
|
||||
[timeRangeKey]: comparisonArray
|
||||
|
||||
|
||||
// 同时返回period和month两个键，确保组件能找到对应数据
|
||||
const result = {
|
||||
period: comparisonArray,
|
||||
month: comparisonArray
|
||||
};
|
||||
|
||||
|
||||
return result;
|
||||
});
|
||||
|
||||
async function getConversionComparison(data) {
|
||||
@@ -677,6 +461,74 @@ async function getConversionComparison(data) {
|
||||
const res = await getCompanyConversionRateVsLast(params)
|
||||
console.log(111111,res)
|
||||
conversionComparison.value = res.data
|
||||
/**
|
||||
* data
|
||||
:
|
||||
{user_name: "赵世敬", user_level: 5, check_type: "month",…}
|
||||
check_type
|
||||
:
|
||||
"month"
|
||||
company_current_rate
|
||||
:
|
||||
{线索总数: 14051, 加微: 3238, 到课: 7614, 付定金: 168, 成交: 136}
|
||||
付定金
|
||||
:
|
||||
168
|
||||
到课
|
||||
:
|
||||
7614
|
||||
加微
|
||||
:
|
||||
3238
|
||||
成交
|
||||
:
|
||||
136
|
||||
线索总数
|
||||
:
|
||||
14051
|
||||
company_current_vs_last_rate
|
||||
:
|
||||
{线索总数: "-20.16%", 加微: "-2.70%", 到课: "+114.90%", 付定金: "+∞%", 成交: "+∞%"}
|
||||
付定金
|
||||
:
|
||||
"+∞%"
|
||||
到课
|
||||
:
|
||||
"+114.90%"
|
||||
加微
|
||||
:
|
||||
"-2.70%"
|
||||
成交
|
||||
:
|
||||
"+∞%"
|
||||
线索总数
|
||||
:
|
||||
"-20.16%"
|
||||
company_last_rate
|
||||
:
|
||||
{线索总数: 17598, 加微: 3328, 到课: 3543, 付定金: 0, 成交: 0}
|
||||
付定金
|
||||
:
|
||||
0
|
||||
到课
|
||||
:
|
||||
3543
|
||||
加微
|
||||
:
|
||||
3328
|
||||
成交
|
||||
:
|
||||
0
|
||||
线索总数
|
||||
:
|
||||
17598
|
||||
user_level
|
||||
:
|
||||
5
|
||||
user_name
|
||||
:
|
||||
"赵世敬"
|
||||
*/
|
||||
} catch (error) {
|
||||
console.error("获取转化对比失败:", error);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user