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

feat(经理看板): 实现团队战报数据动态展示功能

Browse Source 
- 移除manager.js中重复的API函数
- 在TeamReport组件中实现数据绑定和格式化功能
- 在manager.vue中添加数据获取逻辑和参数处理
- 添加数据监听和调试日志
This commit is contained in:
lbw_9527443
2025-08-13 22:09:51 +08:00
parent 10fdf11026
commit 366d7b6120
3 changed files with 132 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
my-vue-app/src/views/maneger/components/TeamReport.vue
View File

@@ -5,51 +5,82 @@
<div class="report-card">
<div class="card-header">
<span class="card-title">团队总通话</span>
<span class="card-trend positive">+10% vs 上期</span>
<span class="card-trend positive">{{ weekTotalData.week_total_call?.team_data?.current_rate_last_current || '0%' }} vs 上期</span>
</div>
<div class="card-value">873 次</div>
<div class="card-value">{{ weekTotalData.week_total_call?.team_data?.total_current_week_call || 0 }} 次</div>
</div>
<div class="report-card">
<div class="card-header">
<span class="card-title">有效通话时长</span>
<span class="card-trend negative">-5% vs 上期</span>
<span class="card-trend negative">{{ weekTotalData.week_total_call?.team_data?.current_rate_last_current || '0%' }} vs 上期</span>
</div>
<div class="card-value">25.4 小时</div>
<div class="card-value">{{ formatDuration(weekTotalData.week_total_call?.team_data?.total_call_duration)||0 }} 小时</div>
</div>
<div class="report-card">
<div class="card-header">
<span class="card-title">新增意向客户</span>
<span class="card-trend positive">+15% vs 上期</span>
<span class="card-trend positive">{{ weekTotalData.week_add_customer_total?.team_data?.week_rate_last_week || '0%' }} vs 上期</span>
</div>
<div class="card-value">43 人</div>
<div class="card-value">{{ weekTotalData.week_add_customer_total?.team_data?.total_week_add_customer || 0 }} 人</div>
</div>
<div class="report-card">
<div class="card-header">
<span class="card-title">新增成交</span>
<span class="card-trend positive">+20% vs 上期</span>
<span class="card-trend positive">{{ weekTotalData.week_add_deal_total?.team_data?.week_rate_last_week || '0%' }} vs 上期</span>
</div>
<div class="card-value">12 单</div>
<div class="card-value">{{ weekTotalData.week_add_deal_total?.team_data?.total_week_add_deal || 0 }} 单</div>
</div>
<div class="report-card">
<div class="card-header">
<span class="card-title">总业绩</span>
<span class="card-trend positive">+8% vs 上期</span>
</div>
<div class="card-value">65,000 元</div>
<div class="card-value">{{ formatCurrency(weekTotalData.week_add_fee_total?.total_add_fee || 0) }} 元</div>
</div>
<div class="report-card">
<div class="card-header">
<span class="card-title">定金转化率</span>
<span class="card-trend positive">+9% vs 上期</span>
</div>
<div class="card-value">13,000 元</div>
<div class="card-value">{{ formatCurrency(weekTotalData.week_add_deal_total?.total_add_deal_fee || 0) }} 元</div>
</div>
</div>
</div>
</template>
<script setup>
// 今日团队实时战报组件
import { watch } from 'vue'
// 定义props
const props = defineProps({
weekTotalData: {
type: Object,
default: () => ({
week_total_call: {},
week_add_customer_total: {},
week_add_deal_total: {},
week_add_fee_total: {},
})
}
})
// 监听数据变化，用于调试
watch(() => props.weekTotalData, (newData) => {
console.log('TeamReport 收到的数据:', newData)
}, { deep: true, immediate: true })
// 格式化时长（分钟转小时）
const formatDuration = (minutes) => {
if (!minutes) return '0'
const hours = (minutes / 60).toFixed(1)
return hours
}
// 格式化货币
const formatCurrency = (amount) => {
if (!amount) return '0'
return amount.toLocaleString()
}
</script>
<style lang="scss" scoped>