保存进度！
This commit is contained in:
@@ -9,18 +9,16 @@
|
||||
-->
|
||||
<template>
|
||||
<div class="caller-archievment-wrapper">
|
||||
<h1>{{ CallerName }}</h1>
|
||||
<table>
|
||||
<tr>
|
||||
<td>坐席名称</td><td>{{ CallerName }}</td>
|
||||
<th>当月保费</th><td>{{ PresentMonthPremium }} 万元</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>车险保费</td><td>{{ PresentMonthPremium }} 万元</td>
|
||||
<th>车非渗透率</th><td>{{ props.attachingRate }}%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>车非渗透率</td><td>{{ ui.attachingRate }}%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>续保率</td><td>{{ ui.renewalRate }}%</td>
|
||||
<th>续保率</th><td>{{ props.renewalRate }}%</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
@@ -48,6 +46,16 @@ export default {
|
||||
require: true,
|
||||
default: (): number => 0,
|
||||
},
|
||||
attachingRate: {
|
||||
type: String,
|
||||
require: true,
|
||||
default: (): string => "0.0",
|
||||
},
|
||||
renewalRate: {
|
||||
type: String,
|
||||
require: true,
|
||||
default: (): string => "0.0",
|
||||
},
|
||||
},
|
||||
setup( props )
|
||||
{
|
||||
@@ -72,6 +80,7 @@ export default {
|
||||
CallerName,
|
||||
PresentMonthPremium,
|
||||
ui,
|
||||
props,
|
||||
};
|
||||
},
|
||||
};
|
||||
@@ -79,6 +88,79 @@ export default {
|
||||
<style scoped lang="scss">
|
||||
.caller-archievment-wrapper
|
||||
{
|
||||
width: 100%;
|
||||
width: 300px;
|
||||
height: 120px;
|
||||
|
||||
border-radius: 5px;
|
||||
|
||||
margin-bottom: 30px;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
|
||||
background-color: #fff;
|
||||
color: #4f4f4f;
|
||||
font-size: 15px;
|
||||
|
||||
h1 {
|
||||
background-color: #fecb96;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
border-radius: 5px 5px 0px 0px;
|
||||
margin: 0px;
|
||||
padding: 5px 0px;
|
||||
|
||||
color: #da3703;
|
||||
|
||||
font: {
|
||||
size: 1.2rem;
|
||||
weight: 100;
|
||||
family: "FZ-ZHUOHEI";
|
||||
}
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-radius: 0px 0px 5px 5px;
|
||||
width: 100%;
|
||||
|
||||
margin-top: 5px;
|
||||
|
||||
background-color: #ffffff;
|
||||
|
||||
font: {
|
||||
size: 14px;
|
||||
}
|
||||
|
||||
th,td {
|
||||
padding: 9px;
|
||||
border-bottom: 1.5px solid #ebeef5;
|
||||
}
|
||||
|
||||
th {
|
||||
width: 5.2rem;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
th.caller-name {
|
||||
text-align: center;
|
||||
background-color: yellow;
|
||||
}
|
||||
|
||||
td {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
tr:nth-child(even) {
|
||||
background-color: #f5f6f7;
|
||||
}
|
||||
|
||||
tr:last-child td,th {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@@ -103,7 +103,7 @@ export default {
|
||||
// border: 1px solid red;
|
||||
border-radius: 5px;
|
||||
width: 300px;
|
||||
height: 250px;
|
||||
height: 260px;
|
||||
}
|
||||
|
||||
.rankinglist-index {
|
||||
|
||||
@@ -48,7 +48,12 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-wrapper">
|
||||
<CallerArchievementComponent :this-month-premium="ui.totalArchievement" />
|
||||
<CallerArchievementComponent
|
||||
:caller-name="callerInfo.telSalerName"
|
||||
:this-month-premium="ui.callerPersentMonthPremium"
|
||||
:attaching-rate="ui.callerAttachingRate"
|
||||
:renewal-rate="ui.callerRenewalRate"
|
||||
/>
|
||||
<div class="carousel-item">
|
||||
<el-carousel
|
||||
arrow="never"
|
||||
@@ -123,6 +128,9 @@ interface ui
|
||||
showUI: boolean; // 用来刷新页面的开关
|
||||
attachingRankingList: RankingListItem[]; // 坐席车非渗透率榜单
|
||||
renewalRankingList: RankingListItem[];
|
||||
callerAttachingRate: string;
|
||||
callerRenewalRate: string;
|
||||
callerPersentMonthPremium: number;
|
||||
}
|
||||
|
||||
export default {
|
||||
@@ -138,7 +146,7 @@ export default {
|
||||
setup()
|
||||
{
|
||||
const monthIndex = new Date();
|
||||
const thisMonth: number = monthIndex.getMonth() + 1; // getMonth返回值从0开始。
|
||||
const thisMonth: number = monthIndex.getMonth(); // getMonth返回值从0开始。
|
||||
const thisMonthString = thisMonth > 10 ? String( thisMonth ) : "0" + String( thisMonth );
|
||||
const thisYear: number = monthIndex.getFullYear();
|
||||
const thisYearString: string = String( thisYear );
|
||||
@@ -170,6 +178,9 @@ export default {
|
||||
showUI: true, // 用来刷新页面的开关
|
||||
attachingRankingList: [], // 坐席车非渗透率榜单
|
||||
renewalRankingList: [], // 坐席续保率榜单
|
||||
callerAttachingRate: "0.0",
|
||||
callerRenewalRate: "0.0",
|
||||
callerPersentMonthPremium: 0,
|
||||
});
|
||||
let timerHandler = 0;
|
||||
|
||||
@@ -223,6 +234,10 @@ export default {
|
||||
}, 0 );
|
||||
};
|
||||
|
||||
/**
|
||||
* 将请求的坐席业绩数据渲染到页面
|
||||
* @param data
|
||||
*/
|
||||
const applyCallerArchievementData = ( data: CallerArchievement ): void =>
|
||||
{
|
||||
// 检查请求是否成功
|
||||
@@ -239,9 +254,12 @@ export default {
|
||||
|
||||
ui.chartData = data.mensual_archievement_list.slice( 0, thisMonth );
|
||||
ui.totalArchievement = data.total_archievement;
|
||||
ui.callerAttachingRate = data.attaching_rate;
|
||||
ui.callerRenewalRate = data.insurance_renewal_rate;
|
||||
ui.callerPersentMonthPremium = data.mensual_archievement_list[thisMonth];
|
||||
|
||||
console.log( "业绩清单", ui.chartData );
|
||||
console.log( "当月", data.mensual_archievement_list );
|
||||
// console.log( "业绩清单", ui.chartData );
|
||||
// console.log( "当月", data.mensual_archievement_list );
|
||||
|
||||
ui.showUI = false;
|
||||
setTimeout(() =>
|
||||
@@ -486,11 +504,19 @@ export default {
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
>div {
|
||||
.carousel-item {
|
||||
// 为了限制走马灯组件的高度
|
||||
display: block;
|
||||
height: 260px;
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
// >div {
|
||||
// // 为了限制走马灯组件的高度
|
||||
// display: block;
|
||||
// height: 260px;
|
||||
// width: 300px;
|
||||
// }
|
||||
}
|
||||
</style>
|
||||
<style lang="scss">
|
||||
|
||||
Reference in New Issue
Block a user