feat(团队管理): 实现团队概览和统计指标数据绑定
- 增加团队概览组件数据绑定逻辑 - 实现统计指标组件数据获取与展示 - 更新API接口调用和数据处理逻辑 - 调整超时时间为30秒以适应网络环境 - 添加调试日志用于问题排查
This commit is contained in:
@@ -4,56 +4,56 @@
|
||||
<div class="overview-grid">
|
||||
<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-title">团队总业绩</span>
|
||||
<span class="card-trend positive">{{ totalPerformance.team_current_vs_previous_deals }} vs 上期</span>
|
||||
</div>
|
||||
<div class="card-value">552,000 元</div>
|
||||
<div class="card-subtitle">月目标完成率: 56%</div>
|
||||
<div class="card-value">{{ totalPerformance.current_team_odd_numbers||0 }}</div>
|
||||
<div class="card-subtitle">月目标完成率: {{ totalPerformance.team_monthly_performance }}</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">{{ activeGroups.total_group_count }}/{{ activeGroups.total_group_count }} 组</span>
|
||||
</div>
|
||||
<div class="card-value">5 组</div>
|
||||
<div class="card-subtitle">总人数: 40人</div>
|
||||
<div class="card-value">{{ activeGroups.total_group_count }} 组</div>
|
||||
<div class="card-subtitle">总人数: {{ activeGroups.total_user_count }}人</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-title">团队转化率</span>
|
||||
<span class="card-trend positive">{{ conversionRate.team_current_vs_previous_deals }} vs 上期</span>
|
||||
</div>
|
||||
<div class="card-value">5.2%</div>
|
||||
<div class="card-subtitle">行业平均: 4.8%</div>
|
||||
<div class="card-value">{{ conversionRate.center_conversion_rate }}</div>
|
||||
<div class="card-subtitle">团队平均转化率: {{ conversionRate.average_conversion_rate }}</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">{{ totalCalls.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">{{ totalCalls.total_call_count }}</div>
|
||||
<div class="card-subtitle">有效通话: {{ totalCalls.effective_call_count }}次</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">{{ newCustomers.new_customer_vs_yesterday }} vs 上期</span>
|
||||
</div>
|
||||
<div class="card-value">117 人</div>
|
||||
<div class="card-subtitle">意向客户: 89人</div>
|
||||
<div class="card-value">{{ newCustomers.new_customer }} 人</div>
|
||||
<div class="card-subtitle">意向客户: {{ newCustomers.new_v_customer }}人</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">{{ depositConversions.deposit_conversion_vs_previous }} vs 上期</span>
|
||||
</div>
|
||||
<div class="card-value">40 单</div>
|
||||
<div class="card-subtitle">本月定金转化率: 10%</div>
|
||||
<div class="card-value">{{ depositConversions.current_deposit_conversion_rate }}</div>
|
||||
<div class="card-subtitle">本月定金转化率: {{ depositConversions.monthly_deposit_conversion_rate }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -61,7 +61,48 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
|
||||
// 中心整体概览组件
|
||||
const props = defineProps({
|
||||
overallTeamPerformance: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
totalPerformance: {},
|
||||
activeGroups: {},
|
||||
conversionRate: {},
|
||||
totalCalls: {},
|
||||
newCustomers: {},
|
||||
depositConversions: {}
|
||||
})
|
||||
}
|
||||
})
|
||||
console.log(99999,props.overallTeamPerformance)
|
||||
// 计算属性
|
||||
const totalPerformance = computed(() => {
|
||||
return props.overallTeamPerformance.totalPerformance
|
||||
})
|
||||
|
||||
const activeGroups = computed(() => {
|
||||
return props.overallTeamPerformance.activeGroups
|
||||
})
|
||||
|
||||
const conversionRate = computed(() => {
|
||||
return props.overallTeamPerformance.conversionRate
|
||||
})
|
||||
|
||||
const totalCalls = computed(() => {
|
||||
return props.overallTeamPerformance.totalCalls
|
||||
})
|
||||
|
||||
const newCustomers = computed(() => {
|
||||
return props.overallTeamPerformance.newCustomers
|
||||
})
|
||||
|
||||
const depositConversions = computed(() => {
|
||||
console.log(999991111,props.overallTeamPerformance.depositConversions)
|
||||
return props.overallTeamPerformance.depositConversions
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
Reference in New Issue
Block a user