feat(中心概览): 实现中心概览组件数据动态绑定

将静态数据替换为通过props传入的动态数据,并更新API端点名称
This commit is contained in:
2025-08-14 22:14:03 +08:00
parent 7a7b114b35
commit 814961d84a
3 changed files with 824 additions and 1156 deletions

View File

@@ -7,7 +7,7 @@ export const getOverallCenterPerformance = (params) => {
// 活跃组数 /api/v1/level_four/overview/total_group_count // 活跃组数 /api/v1/level_four/overview/total_group_count
export const getTotalGroupCount = (params) => { export const getTotalGroupCount = (params) => {
return https.post('/api/v1/level_four/overview/total_group_count', params) return https.post('/api/v1/level_four/overview/total_team_count', params)
} }
// 中心转化率 /api/v1/level_four/overview/center_conversion_rate // 中心转化率 /api/v1/level_four/overview/center_conversion_rate

View File

@@ -5,55 +5,55 @@
<div class="overview-card primary"> <div class="overview-card primary">
<div class="card-header"> <div class="card-header">
<span class="card-title">中心总业绩</span> <span class="card-title">中心总业绩</span>
<span class="card-trend positive">+12% vs 上期</span> <span class="card-trend positive">{{ props.overallData.CenterPerformance?.center_monthly_vs_previous_deals }} vs 上期</span>
</div> </div>
<div class="card-value">552,000 </div> <div class="card-value">{{ props.overallData.CenterPerformance.center_monthly_deal_count || '552,000' }} </div>
<div class="card-subtitle">月目标完成率: 56%</div> <div class="card-subtitle">月目标完成率: {{ props.overallData.CenterPerformance?.center_monthly_target_completion_rate || '56%' }}</div>
</div> </div>
<div class="overview-card"> <div class="overview-card">
<div class="card-header"> <div class="card-header">
<span class="card-title">活跃组数</span> <span class="card-title">活跃组数</span>
<span class="card-trend stable">5/5 </span> <span class="card-trend stable">{{ props.overallData.TotalGroupCount?.center_total_team_count}}/{{ props.overallData.TotalGroupCount?.center_total_team_count }} </span>
</div> </div>
<div class="card-value">5 </div> <div class="card-value">{{ props.overallData.TotalGroupCount?.center_total_team_count || '5' }} </div>
<div class="card-subtitle">总人数: 40</div> <div class="card-subtitle">总人数: {{ props.overallData.TotalGroupCount?.center_total_user_count || '40' }}</div>
</div> </div>
<div class="overview-card"> <div class="overview-card">
<div class="card-header"> <div class="card-header">
<span class="card-title">中心转化率</span> <span class="card-title">中心转化率</span>
<span class="card-trend positive">+0.3% vs 上期</span> <span class="card-trend positive">{{ props.overallData.CenterConversionRate?.center_monthly_vs_previous_deals }}vs 上期</span>
</div> </div>
<div class="card-value">5.2%</div> <div class="card-value">{{ props.overallData.CenterConversionRate?.center_conversion_rate || '5.2' }}</div>
<div class="card-subtitle">行业平均: 4.8%</div> <div class="card-subtitle">行业平均: {{ props.overallData.CenterConversionRate?.current_user_center_conversion_rate || '4.8' }}</div>
</div> </div>
<div class="overview-card"> <div class="overview-card">
<div class="card-header"> <div class="card-header">
<span class="card-title">总通话次数</span> <span class="card-title">总通话次数</span>
<span class="card-trend positive">+8% vs 上期</span> <span class="card-trend positive">{{ props.overallData.TotalCallCount?.total_call_count_vs_yesterday}} vs 上期</span>
</div> </div>
<div class="card-value">1,247 </div> <div class="card-value">{{ props.overallData.TotalCallCount?.total_call_count || '1,247' }} </div>
<div class="card-subtitle">有效通话: 892</div> <div class="card-subtitle">有效通话: {{ props.overallData.TotalCallCount?.center_effective_call_count || '892' }}</div>
</div> </div>
<div class="overview-card"> <div class="overview-card">
<div class="card-header"> <div class="card-header">
<span class="card-title">新增客户</span> <span class="card-title">新增客户</span>
<span class="card-trend positive">+15% vs 上期</span> <span class="card-trend positive">{{ props.overallData.NewCustomer?.center_new_leads_vs_previous_period }} vs 上期</span>
</div> </div>
<div class="card-value">117 </div> <div class="card-value">{{ props.overallData.NewCustomer?.center_new_leads_count || '117' }} </div>
<div class="card-subtitle">意向客户: 89</div> <div class="card-subtitle">意向客户: {{ props.overallData.NewCustomer?.center_new_v_customer_count || '89' }}</div>
</div> </div>
<div class="overview-card"> <div class="overview-card">
<div class="card-header"> <div class="card-header">
<span class="card-title">定金转化</span> <span class="card-title">定金转化</span>
<span class="card-trend positive">+18% vs 上期</span> <span class="card-trend positive">{{ props.overallData.DepositConversionRate?.center_deposit_conversion_vs_previous }} vs 上期</span>
</div> </div>
<div class="card-value">40 </div> <div class="card-value">{{ props.overallData.DepositConversionRate?.center_current_deposit_conversion_rate || '0' }} </div>
<div class="card-subtitle">平均定金转化率: 13,800</div> <div class="card-subtitle">平均定金转化率: {{ props.overallData.DepositConversionRate?.center_monthly_deposit_conversion_rate || '0' }}</div>
</div> </div>
</div> </div>
@@ -62,6 +62,19 @@
<script setup> <script setup>
// 中心整体概览组件 // 中心整体概览组件
const props = defineProps({
overallData: {
type: Object,
default: () => ({
CenterPerformance: {},
TotalGroupCount: {},
CenterConversionRate: {},
TotalCallCount: {},
NewCustomer: {},
DepositConversionRate: {}
})
}
})
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

File diff suppressed because it is too large Load Diff