fix: 更新API基础路径并优化销售进度展示

修复API基础路径配置错误,将IP地址从192.168.15.53更新为192.168.15.54
重构销售进度组件,移除提示信息改为展示实时团队数据
优化KPI指标显示文本和数据处理逻辑
This commit is contained in:
2025-08-18 11:01:09 +08:00
parent 147238244e
commit 525b238c62
4 changed files with 184 additions and 52 deletions

View File

@@ -51,7 +51,7 @@
<!-- 3. 总通话次数 -->
<div class="kpi-card">
<div class="card-header">
<span class="card-label">总通话次数</span>
<span class="card-label">总通话</span>
<span class="card-trend" :class="getTrendClass(kpiData.totalCalls.trend)">
{{ formatTrend(kpiData.totalCalls.trend) }} vs 上期
</span>
@@ -85,7 +85,7 @@
<!-- 5. 中心转化率 -->
<div class="kpi-card">
<div class="card-header">
<span class="card-label">中心转化率</span>
<span class="card-label">转化率</span>
<span class="card-trend" :class="getTrendClass(kpiData.conversionRate.trend)">
{{ formatTrend(kpiData.conversionRate.trend, true) }} vs 上期
</span>
@@ -133,14 +133,14 @@ const kpiData = computed(() => {
return {
totalSales: {
value: data.totalDeals?.company_monthly_deal_count || 0,
value: data.totalDeal?.company_monthly_deal_count || 0,
trend: parseFloat(data.totalDeals?.company_monthly_vs_previous_month_deals_comparison) || 0,
targetCompletion: parseFloat(data.totalDeals?.company_monthly_target_completion_rate) || 0
},
activeTeams: {
value: parseFloat(data.conversionRate?.company_current_deposit_conversion_rate) || 0,
trend: parseFloat(data.conversionRate?.company_monthly_vs_last_month_rate_comparison) || 0,
totalMembers: data.conversionRate?.company_last_month_deposit_conversion_rate || '0.00%'
value: parseFloat(data.DingconversionRate?.company_current_deposit_conversion_rate) || 0,
trend: parseFloat(data.DingconversionRate?.company_monthly_vs_last_month_rate_comparison) || 0,
totalMembers: data.DingconversionRate?.company_last_month_deposit_conversion_rate || '0.00%'
},
conversionRate: {
value: parseFloat(data.conversionRate?.company_conversion_rate) || 0,

View File

@@ -2,19 +2,21 @@
<div class="dashboard-card">
<div class="card-header">
<h3>销售实时进度</h3>
<div class="user-info" v-if="salesData.user_name">
<span class="user-name">{{ salesData.user_name }}</span>
<span class="user-level">等级: {{ salesData.user_level }}</span>
</div>
</div>
<div class="sales-progress-tips">
<div class="tip-item success">
<i class="icon-check-circle"></i>
<span>{{ salesData.successTip }}</span>
<div class="progress-content">
<div class="center-progress" v-if="salesData.company_real_time_progress && salesData.company_real_time_progress.length > 0">
<div class="center-item" v-for="center in salesData.company_real_time_progress" :key="center.center_leader">
<div class="progress-text">
<p>{{ center.center_leader }}团队加微{{ center.plus_v_count }}今日通话{{ center.total_call_count }}成交{{ center.total_turnover_count }}</p>
</div>
</div>
</div>
<div class="tip-item warning">
<i class="icon-alert-circle"></i>
<span>{{ salesData.warningTip }}</span>
</div>
<div class="tip-item info">
<i class="icon-info-circle"></i>
<span>{{ salesData.infoTip }}</span>
<div class="no-data" v-else>
<p>暂无实时进度数据</p>
</div>
</div>
</div>
@@ -57,36 +59,57 @@ defineProps({
color: #666;
}
.sales-progress-tips {
.user-info {
display: flex;
flex-direction: column;
gap: 10px;
align-items: flex-end;
gap: 4px;
}
.tip-item {
.user-name {
font-size: 14px;
font-weight: 600;
color: #333;
}
.user-level {
font-size: 12px;
color: #666;
}
.progress-content {
flex: 1;
overflow-y: auto;
}
.center-progress {
list-style: none;
padding: 0;
margin: 0;
}
.center-item {
padding: 8px 0;
border-bottom: 1px solid #eee;
}
.center-item:last-child {
border-bottom: none;
}
.progress-text p {
margin: 0;
font-size: 14px;
color: #333;
line-height: 1.4;
}
.no-data {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
color: #999;
font-size: 14px;
}
.tip-item i {
margin-right: 8px;
font-size: 18px;
}
.tip-item.success {
color: #4CAF50;
}
.tip-item.warning {
color: #FF9800;
}
.tip-item.info {
color: #2196F3;
}
.icon-check-circle::before { content: '✔'; }
.icon-alert-circle::before { content: '⚠'; }
.icon-info-circle::before { content: ''; }
</style>

View File

@@ -16,10 +16,8 @@
<div class="dashboard-row row-1">
<!-- 核心业绩指标 -->
<kpi-metrics :kpi-data="totalDeals" :format-number="formatNumber" />
<!-- 销售实时进度 -->
<sales-progress :sales-data="salesData" />
<sales-progress :sales-data="realTimeProgress" />
<!-- 下发任务 -->
<task-list
:tasks="tasks"
@@ -592,19 +590,127 @@ async function getTotalDeals() {
const res4=await getCompanyNewCustomer()
const res5=await getCompanyConversionRate()
totalDeals.value={
totalDeals:res1.data,
totalAmount:res1.data,
conversionRate:res2.data,
totalCallCount:res3.data,
newCustomer:res4.data,
conversionRate:res5.data,
totalDeal:res1.data, //总成交单数
DingconversionRate:res2.data, //定金转化率
totalCallCount:res3.data, // 总通话
newCustomer:res4.data, //新客户
conversionRate:res5.data,//转化率
}
} catch (error) {
console.error("获取总成交金额失败:", error);
}
}
// 实时进度
const realTimeProgress = ref({});
async function getRealTimeProgress() {
try {
const res = await getCompanyRealTimeProgress()
// console.log(111111,res)
realTimeProgress.value = res.data
} catch (error) {
console.error("获取实时进度失败:", error);
}
}
// 转化对比
const conversionComparison = ref({});
async function getConversionComparison(data) {
const params={
check_type:data,
}
try {
const res = await getCompanyConversionRateVsLast(params)
console.log(111111,res)
conversionComparison.value = res.data
} catch (error) {
console.error("获取转化对比失败:", error);
}
}
// 获取全公司销售月度业绩红黑榜 params:{"rank_type": "red" // "rank_type": "black"}
const companySalesRank = ref({});
async function getCompanySalesRank(Rank) {
const params={
rank_type:Rank,
}
try {
const res = await getSalesMonthlyPerformance(params)
console.log(1222222,res)
companySalesRank.value = res.data
} catch (error) {
console.error("获取销售月度业绩红黑榜失败:", error);
}
}
// 获取全中心业绩排行榜
const centerSalesRank = ref({});
async function getCenterSalesRank(data) {
const params={
check_type:data //periods、month、year
}
try {
const res = await getCenterPerformanceRank(params)
console.log(1222222,res)
centerSalesRank.value = res.data
} catch (error) {
console.error("获取全中心业绩排行榜失败:", error);
}
}
// 客户类型占比
const customerTypeRatio = ref({});
async function getCustomerTypeRatio(data) {
const params={
distribution_type:data // child_education territory occupation
}
try {
const res = await getCustomerTypeDistribution(params)
console.log(1222222,res)
customerTypeRatio.value = res.data
} catch (error) {
console.error("获取客户类型占比失败:", error);
}
}
// 客户迫切解决的问题排行榜
const customerUrgency = ref({});
async function getCustomerUrgency() {
try {
const res = await getUrgentNeedToAddress()
console.log(1222222,res)
customerUrgency.value = res.data
} catch (error) {
console.error("获取客户迫切解决的问题排行榜失败:", error);
}
}
// 获取级别树
const levelTree = ref({});
async function CusotomGetLevelTree() {
try {
const res = await getLevelTree()
console.log(1222222,res)
levelTree.value = res.data
} catch (error) {
console.error("获取级别树失败:", error);
}
}
// 获取详细数据表格
const detailData = ref({});
async function getDetailData(level) {
const params={
level,
}
try {
const res = await getDetailedDataTable(params)
console.log(1222222,res)
detailData.value = res.data
} catch (error) {
console.error("获取详细数据表格失败:", error);
}
}
@@ -612,7 +718,10 @@ async function getTotalDeals() {
onMounted(async() => {
// 页面初始化逻辑
await getRealTimeProgress()
await getTotalDeals()
await getConversionComparison()
await getCompanySalesRank('red')
});
</script>