LiuRui/DJKB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

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

49
my-vue-app/src/views/secondTop/components/CenterOverview.vue
View File

@@ -5,55 +5,55 @@
<div class="overview-card primary">
<div class="card-header">
<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 class="card-value">552,000 元</div>
<div class="card-subtitle">月目标完成率: 56%</div>
<div class="card-value">{{ props.overallData.CenterPerformance.center_monthly_deal_count || '552,000' }} 元</div>
<div class="card-subtitle">月目标完成率: {{ props.overallData.CenterPerformance?.center_monthly_target_completion_rate || '56%' }}</div>
</div>
<div class="overview-card">
<div class="card-header">
<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 class="card-value">5 组</div>
<div class="card-subtitle">总人数: 40人</div>
<div class="card-value">{{ props.overallData.TotalGroupCount?.center_total_team_count || '5' }} 组</div>
<div class="card-subtitle">总人数: {{ props.overallData.TotalGroupCount?.center_total_user_count || '40' }}人</div>
</div>
<div class="overview-card">
<div class="card-header">
<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 class="card-value">5.2%</div>
<div class="card-subtitle">行业平均: 4.8%</div>
<div class="card-value">{{ props.overallData.CenterConversionRate?.center_conversion_rate || '5.2' }}</div>
<div class="card-subtitle">行业平均: {{ props.overallData.CenterConversionRate?.current_user_center_conversion_rate || '4.8' }}</div>
</div>
<div class="overview-card">
<div class="card-header">
<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 class="card-value">1,247 次</div>
<div class="card-subtitle">有效通话: 892次</div>
<div class="card-value">{{ props.overallData.TotalCallCount?.total_call_count || '1,247' }} 次</div>
<div class="card-subtitle">有效通话: {{ props.overallData.TotalCallCount?.center_effective_call_count || '892' }}次</div>
</div>
<div class="overview-card">
<div class="card-header">
<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 class="card-value">117 人</div>
<div class="card-subtitle">意向客户: 89人</div>
<div class="card-value">{{ props.overallData.NewCustomer?.center_new_leads_count || '117' }} 人</div>
<div class="card-subtitle">意向客户: {{ props.overallData.NewCustomer?.center_new_v_customer_count || '89' }}人</div>
</div>
<div class="overview-card">
<div class="card-header">
<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 class="card-value">40 单</div>
<div class="card-subtitle">平均定金转化率: 13,800元</div>
<div class="card-value">{{ props.overallData.DepositConversionRate?.center_current_deposit_conversion_rate || '0' }} </div>
<div class="card-subtitle">平均定金转化率: {{ props.overallData.DepositConversionRate?.center_monthly_deposit_conversion_rate || '0' }}</div>
</div>
</div>
@@ -62,6 +62,19 @@
<script setup>
// 中心整体概览组件
const props = defineProps({
overallData: {
type: Object,
default: () => ({
CenterPerformance: {},
TotalGroupCount: {},
CenterConversionRate: {},
TotalCallCount: {},
NewCustomer: {},
DepositConversionRate: {}
})
}
})
</script>
<style lang="scss" scoped>