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

Merge branch 'feature-rankinglist' of http://222.76.244.118:3000/CPICXIM/desktop_task_schedule into feature-rankinglist

Browse Source
This commit is contained in:
unknown 2023-06-10 00:42:45 +08:00
commit e2ccf553aa
8 changed files with 265 additions and 38 deletions
Show Stats 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>

2
code/web/task_schedule/src/layout/components/Aside.vue
View File

@ -116,7 +116,7 @@ export default {
width: 100%;
}
.el-menu {
:deep(.el-menu) {
border-right: none;
/* border-left: 5px solid #1d74b2; */
overflow: auto;

6
code/web/task_schedule/src/layout/components/Header.vue
View File

@ -11,7 +11,7 @@
<div class="header-wrapper">
<span class="company-name">CPIC</span>
<div class="version-wrapper">
<span>测试版</span>
<span>桌面霸屏后台管理</span>
<span>Build-202303251257</span>
</div>
<div class="buttons-wrapper">
@ -93,6 +93,10 @@ export default {
font: {
size: 0.5rem;
}
> *+* {
margin-top: 1px;
}
}
.company-name {

4
code/web/task_schedule/src/test/test.ts
View File

@ -8,6 +8,6 @@
* Copyright (c) ${2022} by Kane, All Rights Reserved.
*/
import { testNewCitizen } from "./identify.js";
import { testRankingListRequest } from "./testRankingListRequest.js";
testNewCitizen();
testRankingListRequest();

2
code/web/task_schedule/src/utils/api/request.ts
View File

@ -13,7 +13,7 @@ import axios, { type AxiosInstance } from "axios";
const service: AxiosInstance = axios.create(
{
baseURL: "",
timeout: 5000,
timeout: 10000,
}
);

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

@ -28,8 +28,83 @@ interface RankingListResponse
departmentCode: string;
year: string;
month: string;
attachingRankingList: RankingListItem[];
renewalRankintList: RankingListItem[];
attachingRateRankingList: RankingListItem[];
renewalRateRankingList: RankingListItem[];
};
export { type RankingListRequest, type RankingListResponse };
/**
* 请求坐席排行榜。
* @param reqParam 请求参数
* @param rander 保存请求结果的回调函数
* @returns 返回RankingListResponse对象，里面包含请求状态和数据。
*/
function requestRankingList( reqParam: RankingListRequest, rander: any ): void // eslint-disable-line
{
// let attachingRankingList: RankingListItem[];
// let renewalRankintList: RankingListItem[];
const rankingListResponse: RankingListResponse = {
success: false,
message: "",
departmentCode: reqParam.departmentCode,
year: reqParam.year,
month: reqParam.month,
attachingRateRankingList: [],
renewalRateRankingList: [],
};
instance.request(
{
method: "post",
url: API_URL.URL_RANKINGLIST,
data: reqParam,
})
.then(( response ) =>
{
const data: RankingListResponse = response.data as RankingListResponse;
rankingListResponse.success = data.success ?? false;
rankingListResponse.message = data.message ?? "";
rankingListResponse.departmentCode = data.departmentCode ?? "";
rankingListResponse.year = data.year ?? "";
rankingListResponse.month = data.month ?? "";
// 遍历排行榜元素
for ( const item of ( data.attachingRateRankingList ?? [] )) // eslint-disable-line
{
const index: number = item.index ?? -1;
if ( index === -1 )
{
continue;
}
rankingListResponse.attachingRateRankingList.push( item );
}
for ( const item of ( data.renewalRateRankingList ?? [] )) // eslint-disable-line
{
const index: number = item.index ?? -1;
if ( index === -1 )
{
continue;
}
rankingListResponse.renewalRateRankingList.push( item );
}
// 调用回调函数保存数据
rander( rankingListResponse );
})
.catch(( error ) =>
{
console.log( error );
});
}
export {
type RankingListRequest,
type RankingListResponse,
requestRankingList
};

127
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,37 @@
</div>
</div>
<div class="right-wrapper">
<RankingListComponent />
<RankingListComponent />
<h1>本大爷</h1>
<div class="carousel-item">
<el-carousel
arrow="never"
indicator-position="none"
:interval="4000"
>
<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"
:interval="4000"
>
<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>
@ -64,6 +89,8 @@ import { useRouter } from "vue-router";
import { getCallerInfo } from "@/utils/api/localStorage.js";
import { ElMessage } from "element-plus";
import { type Archievement, queryDepartmentArchievement } from "@/utils/archievement.js";
import { RankingListItem } from "@/types/cpicxim/RankingListItem.js";
import { type RankingListRequest, type RankingListResponse, requestRankingList } from "@/utils/ranking.js";
import { type Department } from "@/types/cpicxim/Department";
import ArchievementChart from "@/components/ArchievementChartComponent.vue";
import ArchievementCompleteRateComponent from "@/components/ArchievementCompleteRateComponent.vue";
@ -73,6 +100,21 @@ import RankingListComponent from "@/components/RankingListComponent.vue";
import { logout } from "@/utils/account.js";
import { type TelSaler } from "@/types/cpicxim/TelSaler";
interface ui
{
currentMonth: string;
chartData: number[];
totalArchievement: number;
attaching_rate: string;
insurance_renewal_rate: string; // 续保率
leading_reward_gainers: string[]; // 领跑奖
advance_reward_gainers: string[]; // 飞跃奖
dishonorPersons: string[];
showUI: boolean; // 用来刷新页面的开关
attachingRankingList: RankingListItem[]; // 坐席车非渗透率榜单
renewalRankingList: RankingListItem[];
};
export default {
name: "DesktopArchievement",
components: {
@ -88,7 +130,7 @@ export default {
const numInChinese = ["一", "二", "三", "四", "五", "六", "七", "八", "九", "十", "十一", "十二",];
const router = useRouter();
const callerInfo: TelSaler = getCallerInfo();
const ui = reactive({
const ui: ui = reactive({
currentMonth: numInChinese[monthIndex.getMonth() - 1],
chartData: [0,], // 业绩表
totalArchievement: 0, // 总业绩
@ -98,8 +140,10 @@ export default {
advance_reward_gainers: ["",], // 飞跃奖
dishonorPersons: ["",],
showUI: true, // 用来刷新页面的开关
attachingRankingList: [], // 坐席车非渗透率榜单
renewalRankingList: [], // 坐席续保率榜单
});
const timerHandler = 0;
let timerHandler = 0;
const getTotalArchievement = computed(() =>
{
@ -114,8 +158,8 @@ export default {
return archievement;
});
// 绘制数据
const renderData = ( data:Archievement ) =>
// 保存业绩数据
const applyArchievementData = ( data: Archievement ) =>
{
console.log( "部门业绩数据", data );
@ -134,6 +178,20 @@ export default {
setTimeout(() => { ui.showUI = true; }, 0 );
};
const applyRankingListData = ( data: RankingListResponse ): void =>
{
ui.attachingRankingList = data.attachingRateRankingList;
ui.renewalRankingList = data.renewalRateRankingList;
// 更新UI
// 先不显示界面，往队列中加入显示队列的回调，让vue刷新组件。
ui.showUI = false;
console.log( "获取排行榜后的ui:", data );
setTimeout(() => { ui.showUI = true; }, 0 );
};
// 退出桌面霸屏
const logoutDesktopArchievement = () =>
{
@ -155,6 +213,9 @@ export default {
router.push( "/login" );
}
/**
* 刷新页面
*/
const refresh = () =>
{
const deparmentInfo: Department =
@ -163,24 +224,38 @@ export default {
departmentName: callerInfo.departmentName,
};
queryDepartmentArchievement( deparmentInfo, renderData );
const rankinglistRequest: RankingListRequest =
{
departmentCode: callerInfo.departmentCode,
year: "2023",
month: "06",
};
queryDepartmentArchievement( deparmentInfo, applyArchievementData );
requestRankingList( rankinglistRequest, applyRankingListData );
};
/**
* 加载前
*/
onBeforeMount(() =>
{
// 设置每10分钟刷新一次
// timerHandler = setInterval( refresh, 5000 );
timerHandler = setInterval( refresh, 600 * 1000 );
refresh();
});
/**
* 页面卸载前
*/
onUnmounted((): void =>
{
// 退出页面前关掉定时器
clearInterval( timerHandler );
});
return { ui, callerInfo, timerHandler, getTotalArchievement, renderData, refresh, logoutDesktopArchievement, };
return { ui, callerInfo, timerHandler, getTotalArchievement, renderData: applyArchievementData, refresh, logoutDesktopArchievement, };
},
};
</script>
@ -310,8 +385,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>

3
code/web/task_schedule/vite.config.js
View File

@ -2,7 +2,7 @@
* @Author: Kane
* @Date: 2023-02-15 09:25:52
* @LastEditors: Kane
* @LastEditTime: 2023-03-30 21:09:30
* @LastEditTime: 2023-06-07 15:53:53
* @FilePath: /task_schedule/vite.config.js
* @Description:
*
@ -18,6 +18,7 @@ export default defineConfig(( command, mode ) =>
const env = loadEnv( mode, process.cwd(), "" );
return {
server:{ host: "localhost", port: 3000, },
plugins: [vue(),],
base: "./",
resolve: {