refactor(topOne): 清理未使用的响应式数据和简化组件

移除多个未使用的响应式数据变量和模板代码
简化销售进度和个人销售排名组件的显示
重构转化对比数据处理逻辑,确保数据格式正确
This commit is contained in:
2025-08-18 16:32:18 +08:00
parent 68ba83ca81
commit 8eff57cf05
3 changed files with 93 additions and 245 deletions

View File

@@ -34,7 +34,7 @@
</div>
<div class="performance-section">
<div class="performance-value">
{{ item.performance }}
成交 {{ item.performance }}
</div>
</div>
</div>

View File

@@ -2,10 +2,6 @@
<div class="dashboard-card">
<div class="card-header">
<h3>销售实时进度</h3>
<div class="user-info" v-if="salesData.user_name">
<span class="user-name">{{ salesData.user_name }}</span>
<span class="user-level">等级: {{ salesData.user_level }}</span>
</div>
</div>
<div class="progress-content">
<div class="center-progress" v-if="salesData.company_real_time_progress && salesData.company_real_time_progress.length > 0">

View File

@@ -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);
}