feat(经理看板): 实现团队战报数据动态展示功能
- 移除manager.js中重复的API函数 - 在TeamReport组件中实现数据绑定和格式化功能 - 在manager.vue中添加数据获取逻辑和参数处理 - 添加数据监听和调试日志
This commit is contained in:
@@ -21,9 +21,6 @@ export const getWeekAddFeeTotal = (params) => {
|
||||
return https.post('/api/v1/manager/week_add_fee_total', params)
|
||||
}
|
||||
// 定金转化率 /api/v1/manager/week_add_fee_total
|
||||
export const getWeekAddFeeTotal = (params) => {
|
||||
return https.post('/api/v1/manager/week_add_fee_total', params)
|
||||
}
|
||||
|
||||
// 团队漏斗 /api/v1/group_funnel/get_group_funnel
|
||||
export const getGroupFunnel = (params) => {
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -11,8 +11,8 @@
|
||||
"
|
||||
>
|
||||
<!-- 经理个人看板 -->
|
||||
<sale style="width: 100%;">
|
||||
</sale>
|
||||
<!-- <sale style="width: 100%;">
|
||||
</sale> -->
|
||||
<!-- 经理团队看板 -->
|
||||
<h1>经理团队看板</h1>
|
||||
<main class="dashboard-main">
|
||||
@@ -21,7 +21,8 @@
|
||||
<!-- Team Alerts -->
|
||||
<TeamAlerts />
|
||||
<!-- Today's Team Report -->
|
||||
<TeamReport />
|
||||
<TeamReport :weekTotalData="weekTotalData" />
|
||||
|
||||
</div>
|
||||
<!-- Sales Funnel Section -->
|
||||
<SalesFunnel />
|
||||
@@ -48,7 +49,7 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
import { ref, onMounted } from "vue";
|
||||
import TeamAlerts from "./components/TeamAlerts.vue";
|
||||
import TeamReport from "./components/TeamReport.vue";
|
||||
import SalesFunnel from "./components/SalesFunnel.vue";
|
||||
@@ -59,6 +60,10 @@ import SalesTimelineWithTaskList from "../person/components/SalesTimelineWithTas
|
||||
import RawDataCards from "../person/components/RawDataCards.vue";
|
||||
import CustomerDetail from "../person/components/CustomerDetail.vue";
|
||||
import { useUserStore } from "@/stores/user";
|
||||
import { useRouter } from "vue-router";
|
||||
import { getWeekTotalCall, getWeekAddCustomerTotal, getWeekAddDealTotal, getWeekAddFeeTotal, getGroupFunnel } from "@/api/manager.js";
|
||||
|
||||
|
||||
|
||||
// 团队成员数据
|
||||
const teamMembers = [
|
||||
@@ -184,6 +189,78 @@ const teamMembers = [
|
||||
},
|
||||
];
|
||||
|
||||
// 路由实例
|
||||
const router = useRouter();
|
||||
|
||||
// 获取通用请求参数的函数
|
||||
const getRequestParams = () => {
|
||||
const params = {}
|
||||
// 只从路由参数获取
|
||||
const routeUserLevel = router.currentRoute.value.query.user_level || router.currentRoute.value.params.user_level
|
||||
const routeUserName = router.currentRoute.value.query.user_name || router.currentRoute.value.params.user_name
|
||||
// 如果路由有参数,使用路由参数
|
||||
if (routeUserLevel) {
|
||||
params.user_level = routeUserLevel.toString()
|
||||
}
|
||||
if (routeUserName) {
|
||||
params.user_name = routeUserName
|
||||
}
|
||||
|
||||
return params
|
||||
}
|
||||
// 团队战报总览
|
||||
const weekTotalData = ref({
|
||||
week_total_call: {},
|
||||
week_add_customer_total: {},
|
||||
week_add_deal_total: {},
|
||||
week_add_fee_total: {},
|
||||
});
|
||||
|
||||
// 团队总通话
|
||||
async function TeamGetWeekTotalCall() {
|
||||
const params = getRequestParams()
|
||||
const hasParams = params.user_name
|
||||
const res = await getWeekTotalCall(hasParams ? params : undefined)
|
||||
console.log(res)
|
||||
if (res.code === 200) {
|
||||
weekTotalData.value.week_total_call = res.data
|
||||
}
|
||||
}
|
||||
// 新增客户
|
||||
async function TeamGetWeekAddCustomerTotal() {
|
||||
const params = getRequestParams()
|
||||
const hasParams = params.user_name
|
||||
const res = await getWeekAddCustomerTotal(hasParams ? params : undefined)
|
||||
console.log(res)
|
||||
if (res.code === 200) {
|
||||
weekTotalData.value.week_add_customer_total = res.data
|
||||
}
|
||||
}
|
||||
// 新增成交
|
||||
async function TeamGetWeekAddDealTotal() {
|
||||
const params = getRequestParams()
|
||||
const hasParams = params.user_name
|
||||
const res = await getWeekAddDealTotal(hasParams ? params : undefined)
|
||||
console.log(res)
|
||||
if (res.code === 200) {
|
||||
weekTotalData.value.week_add_deal_total = res.data
|
||||
}
|
||||
}
|
||||
// 总业绩
|
||||
|
||||
|
||||
// 销售漏斗
|
||||
async function TeamGetGroupFunnel() {
|
||||
const params = getRequestParams()
|
||||
const hasParams = params.user_name
|
||||
const res = await getGroupFunnel(hasParams ? params : undefined)
|
||||
console.log(res)
|
||||
if (res.code === 200) {
|
||||
weekTotalData.value.week_add_fee_total = res.data
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 当前选中的成员,默认为第一名
|
||||
const selectedMember = ref(teamMembers[0]);
|
||||
|
||||
@@ -191,6 +268,15 @@ const selectedMember = ref(teamMembers[0]);
|
||||
const selectMember = (member) => {
|
||||
selectedMember.value = member;
|
||||
};
|
||||
onMounted(async () => {
|
||||
await TeamGetWeekTotalCall()
|
||||
await TeamGetWeekAddCustomerTotal()
|
||||
await TeamGetWeekAddDealTotal()
|
||||
// await TeamGetWeekAddFeeTotal()
|
||||
await TeamGetGroupFunnel()
|
||||
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
Reference in New Issue
Block a user