CPICXIM/desktop_task_schedule
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

保存进度！

Browse Source
This commit is contained in:
Kane Wang
2023-06-09 16:37:50 +08:00
parent 80e4b24e4f
commit aa39cc4601
3 changed files with 131 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
code/web/task_schedule/src/components/RankingListComponent.vue
View File

@@ -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>
@@ -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>

18
code/web/task_schedule/src/utils/ranking.ts
View File

@@ -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 ) =>
{

69
code/web/task_schedule/src/views/DesktopArchievement.vue
View File

@@ -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>
@@ -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 );
};
@@ -214,7 +239,7 @@ export default {
onBeforeMount(() =>
{
// 设置每10分钟刷新一次
timerHandler = setInterval( refresh, 5000 );
timerHandler = setInterval( refresh, 600 * 1000 );
refresh();
});
@@ -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>