保存进度！
This commit is contained in:
parent
80e4b24e4f
commit
aa39cc4601
|
|
@ -9,7 +9,40 @@
|
|||
-->
|
||||
<template>
|
||||
<div class="rankinglist-wrapper">
|
||||
排行榜组件
|
||||
<el-table
|
||||
:data="topFive"
|
||||
stripe
|
||||
style="width:100%;"
|
||||
:header-cell-style="{background:'#fecb96'}"
|
||||
>
|
||||
<el-table-column
|
||||
label="名次"
|
||||
width="60"
|
||||
align="center"
|
||||
>
|
||||
<template #default="ranking">
|
||||
<span class="rankinglist-index">{{ ranking.row.index }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="名次"
|
||||
width="160"
|
||||
align="center"
|
||||
>
|
||||
<template #default="ranking">
|
||||
<span class="rankinglist-index">{{ ranking.row.callerName }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="指标"
|
||||
width="80"
|
||||
align="center"
|
||||
>
|
||||
<template #default="ranking">
|
||||
<span class="rankinglist-index">{{ ranking.row.appraiseValue }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -42,7 +75,7 @@ export default {
|
|||
* setup函数
|
||||
* @param props 组件的props属性。
|
||||
*/
|
||||
setup( props )
|
||||
setup(props)
|
||||
{
|
||||
/**
|
||||
* 计算对象，用于获取top5.
|
||||
|
|
@ -51,13 +84,13 @@ export default {
|
|||
{
|
||||
const rankingList = props.rankingList; // eslint-disable-line
|
||||
|
||||
rankingList.sort(( a, b ) =>
|
||||
rankingList.sort((a, b) =>
|
||||
{
|
||||
// @ts-ignore
|
||||
return a.index - b.index;
|
||||
});
|
||||
|
||||
return rankingList.slice(0,5);
|
||||
return rankingList.slice(0, 5);
|
||||
});
|
||||
|
||||
return { props, topFive, };
|
||||
|
|
@ -66,13 +99,34 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.rankinglist-wrapper
|
||||
{
|
||||
border: 1px solid red;
|
||||
|
||||
.rankinglist-wrapper {
|
||||
// border: 1px solid red;
|
||||
border-radius: 5px;
|
||||
width: 300px;
|
||||
height: 250px;
|
||||
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.rankinglist-index {
|
||||
display: block;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
:deep(.el-table)
|
||||
{
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
:deep(.el-table__header-wrapper) {
|
||||
thead {
|
||||
th{
|
||||
div{
|
||||
// font-family: "FZ-ZHUOHEI";
|
||||
font-weight: 500;
|
||||
font-size: 15px;
|
||||
color: #da3703;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -28,8 +28,8 @@ interface RankingListResponse
|
|||
departmentCode: string;
|
||||
year: string;
|
||||
month: string;
|
||||
attachingRankingList: RankingListItem[];
|
||||
renewalRankintList: RankingListItem[];
|
||||
attachingRateRankingList: RankingListItem[];
|
||||
renewalRateRankingList: RankingListItem[];
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
@ -49,8 +49,8 @@ function requestRankingList( reqParam: RankingListRequest, rander: any ): void /
|
|||
departmentCode: reqParam.departmentCode,
|
||||
year: reqParam.year,
|
||||
month: reqParam.month,
|
||||
attachingRankingList: [],
|
||||
renewalRankintList: [],
|
||||
attachingRateRankingList: [],
|
||||
renewalRateRankingList: [],
|
||||
};
|
||||
|
||||
instance.request(
|
||||
|
|
@ -70,7 +70,7 @@ function requestRankingList( reqParam: RankingListRequest, rander: any ): void /
|
|||
rankingListResponse.month = data.month ?? "";
|
||||
|
||||
// 遍历排行榜元素
|
||||
for ( const item of ( data.attachingRankingList ?? [] )) // eslint-disable-line
|
||||
for ( const item of ( data.attachingRateRankingList ?? [] )) // eslint-disable-line
|
||||
{
|
||||
const index: number = item.index ?? -1;
|
||||
|
||||
|
|
@ -79,10 +79,10 @@ function requestRankingList( reqParam: RankingListRequest, rander: any ): void /
|
|||
continue;
|
||||
}
|
||||
|
||||
rankingListResponse.attachingRankingList.push( item );
|
||||
rankingListResponse.attachingRateRankingList.push( item );
|
||||
}
|
||||
|
||||
for ( const item of ( data.renewalRankintList ?? [] )) // eslint-disable-line
|
||||
for ( const item of ( data.renewalRateRankingList ?? [] )) // eslint-disable-line
|
||||
{
|
||||
const index: number = item.index ?? -1;
|
||||
|
||||
|
|
@ -91,13 +91,11 @@ function requestRankingList( reqParam: RankingListRequest, rander: any ): void /
|
|||
continue;
|
||||
}
|
||||
|
||||
rankingListResponse.renewalRankintList.push( item );
|
||||
rankingListResponse.renewalRateRankingList.push( item );
|
||||
}
|
||||
|
||||
// 调用回调函数保存数据
|
||||
rander( rankingListResponse );
|
||||
|
||||
console.log( data );
|
||||
})
|
||||
.catch(( error ) =>
|
||||
{
|
||||
|
|
|
|||
|
|
@ -31,12 +31,8 @@
|
|||
:percentage="ui.attaching_rate"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="total-archievement-charts-wrapper"
|
||||
>
|
||||
<ArchievementChart
|
||||
:chart-data="ui.chartData"
|
||||
/>
|
||||
<div class="total-archievement-charts-wrapper">
|
||||
<ArchievementChart :chart-data="ui.chartData" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="reward-wrapper">
|
||||
|
|
@ -52,8 +48,35 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="right-wrapper">
|
||||
<RankingListComponent />
|
||||
<RankingListComponent />
|
||||
<h1>本大爷</h1>
|
||||
<div class="carousel-item">
|
||||
<el-carousel
|
||||
arrow="never"
|
||||
indicator-position="none"
|
||||
>
|
||||
<el-carousel-item
|
||||
:key="1"
|
||||
>
|
||||
<RankingListComponent :ranking-list="ui.attachingRankingList" />
|
||||
</el-carousel-item>
|
||||
<el-carousel-item :key="2">
|
||||
<RankingListComponent :ranking-list="ui.renewalRankingList" />
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<el-carousel
|
||||
arrow="never"
|
||||
indicator-position="none"
|
||||
>
|
||||
<el-carousel-item :key="1">
|
||||
<RankingListComponent :ranking-list="ui.attachingRankingList" />
|
||||
</el-carousel-item>
|
||||
<el-carousel-item :key="2">
|
||||
<RankingListComponent :ranking-list="ui.renewalRankingList" />
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -134,7 +157,7 @@ export default {
|
|||
});
|
||||
|
||||
// 保存业绩数据
|
||||
const applyArchievementData = ( data:Archievement ) =>
|
||||
const applyArchievementData = ( data: Archievement ) =>
|
||||
{
|
||||
console.log( "部门业绩数据", data );
|
||||
|
||||
|
|
@ -155,13 +178,15 @@ export default {
|
|||
|
||||
const applyRankingListData = ( data: RankingListResponse ): void =>
|
||||
{
|
||||
ui.attachingRankingList = data.attachingRankingList;
|
||||
ui.renewalRankingList = data.renewalRankintList;
|
||||
ui.attachingRankingList = data.attachingRateRankingList;
|
||||
ui.renewalRankingList = data.renewalRateRankingList;
|
||||
|
||||
// 更新UI
|
||||
// 先不显示界面，往队列中加入显示队列的回调，让vue刷新组件。
|
||||
ui.showUI = false;
|
||||
|
||||
console.log( "获取排行榜后的ui:", data );
|
||||
|
||||
setTimeout(() => { ui.showUI = true; }, 0 );
|
||||
};
|
||||
|
||||
|
|
@ -191,7 +216,7 @@ export default {
|
|||
*/
|
||||
const refresh = () =>
|
||||
{
|
||||
const deparmentInfo:Department =
|
||||
const deparmentInfo: Department =
|
||||
{
|
||||
departmentCode: callerInfo.departmentCode,
|
||||
departmentName: callerInfo.departmentName,
|
||||
|
|
@ -214,7 +239,7 @@ export default {
|
|||
onBeforeMount(() =>
|
||||
{
|
||||
// 设置每10分钟刷新一次
|
||||
timerHandler = setInterval( refresh, 5000 );
|
||||
timerHandler = setInterval( refresh, 600 * 1000 );
|
||||
|
||||
refresh();
|
||||
});
|
||||
|
|
@ -222,7 +247,7 @@ export default {
|
|||
/**
|
||||
* 页面卸载前
|
||||
*/
|
||||
onUnmounted(():void =>
|
||||
onUnmounted((): void =>
|
||||
{
|
||||
// 退出页面前关掉定时器
|
||||
clearInterval( timerHandler );
|
||||
|
|
@ -358,8 +383,26 @@ export default {
|
|||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
|
||||
>*+* {
|
||||
margin-top: 15px;
|
||||
// >*+* {
|
||||
// margin-top: 15px;
|
||||
// }
|
||||
> h1 {
|
||||
font: {
|
||||
family: "FZ-ZHUOHEI";
|
||||
weight: 100;
|
||||
size: 30px;
|
||||
}
|
||||
color: $color-bg-04;
|
||||
|
||||
text-align: center;
|
||||
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
> div {
|
||||
display: block;
|
||||
height: 260px;
|
||||
width: 300px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue