382 lines
11 KiB
Vue
382 lines
11 KiB
Vue
<!--
|
||
* @Author: Kane
|
||
* @Date: 2023-03-03 14:38:07
|
||
* @LastEditors: Kane
|
||
* @FilePath: /task_schedule/src/views/DesktopArchievement.vue
|
||
* @Description: 桌面霸屏的主组件。
|
||
*
|
||
* Copyright (c) ${2022} by Kane, All Rights Reserved.
|
||
-->
|
||
<template>
|
||
<div
|
||
v-if="ui.showUI"
|
||
class="view-wrapper"
|
||
tabindex="0"
|
||
@keyup.esc="logoutDesktopArchievement()"
|
||
>
|
||
<div class="center-wrapper">
|
||
<span class="slogan">对标先进 比学赶超</span>
|
||
<div class="total-archievement-wrapper">
|
||
<span>总业绩</span>
|
||
<span>{{ getTotalArchievement }}</span>
|
||
</div>
|
||
<div class="archievement-wrapper">
|
||
<div class="total-archievement-rate-wrapper">
|
||
<ArchievementCompleteRateComponent
|
||
indicator="续保完成率"
|
||
:percentage="ui.insurance_renewal_rate"
|
||
/>
|
||
<ArchievementCompleteRateComponent
|
||
indicator="车非渗透率"
|
||
:percentage="ui.attaching_rate"
|
||
/>
|
||
</div>
|
||
<div
|
||
class="total-archievement-charts-wrapper"
|
||
>
|
||
<ArchievementChart
|
||
:chart-data="ui.chartData"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div class="reward-wrapper">
|
||
<HonorListComponent
|
||
:month="ui.currentMonth"
|
||
:leading-reward="ui.leading_reward_gainers"
|
||
:advance-reward="ui.advance_reward_gainers"
|
||
/>
|
||
<DishonorListComponent
|
||
:month="ui.currentMonth"
|
||
:dishonor-persons="ui.dishonorPersons"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div class="right-wrapper">
|
||
<RankingListComponent />
|
||
<RankingListComponent />
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts">
|
||
import { computed, reactive, onBeforeMount, onUnmounted } from "vue";
|
||
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";
|
||
import HonorListComponent from "@/components/HonorListComponent.vue";
|
||
import DishonorListComponent from "@/components/DishonorListComponent.vue";
|
||
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: {
|
||
ArchievementChart,
|
||
ArchievementCompleteRateComponent,
|
||
HonorListComponent,
|
||
DishonorListComponent,
|
||
RankingListComponent,
|
||
},
|
||
setup()
|
||
{
|
||
const monthIndex = new Date();
|
||
const numInChinese = ["一", "二", "三", "四", "五", "六", "七", "八", "九", "十", "十一", "十二",];
|
||
const router = useRouter();
|
||
const callerInfo: TelSaler = getCallerInfo();
|
||
const ui: ui = reactive({
|
||
currentMonth: numInChinese[monthIndex.getMonth() - 1],
|
||
chartData: [0,], // 业绩表
|
||
totalArchievement: 0, // 总业绩
|
||
attaching_rate: "", // 车非渗透率
|
||
insurance_renewal_rate: "", // 续保率
|
||
leading_reward_gainers: ["",], // 领跑奖
|
||
advance_reward_gainers: ["",], // 飞跃奖
|
||
dishonorPersons: ["",],
|
||
showUI: true, // 用来刷新页面的开关
|
||
attachingRankingList: [], // 坐席车非渗透率榜单
|
||
renewalRankingList: [], // 坐席续保率榜单
|
||
});
|
||
let timerHandler = 0;
|
||
|
||
const getTotalArchievement = computed(() =>
|
||
{
|
||
const cnyFormat = new Intl.NumberFormat( "zh-cn",
|
||
{
|
||
style: "currency",
|
||
currency: "CNY",
|
||
minimumFractionDigits: 0,
|
||
});
|
||
const archievement = cnyFormat.format( ui.totalArchievement );
|
||
|
||
return archievement;
|
||
});
|
||
|
||
// 保存业绩数据
|
||
const applyArchievementData = ( data:Archievement ) =>
|
||
{
|
||
console.log( "部门业绩数据", data );
|
||
|
||
ui.chartData = data.mensual_archievement_list;
|
||
ui.totalArchievement = data.total_archievement;
|
||
ui.attaching_rate = data.attaching_rate;
|
||
ui.insurance_renewal_rate = data.insurance_renewal_rate;
|
||
ui.leading_reward_gainers = data.leading_reward_gainers;
|
||
ui.advance_reward_gainers = data.advance_reward_gainers;
|
||
ui.dishonorPersons = data.backward_list;
|
||
|
||
// 更新UI
|
||
// 先不显示界面，往队列中加入显示队列的回调，让vue刷新组件。
|
||
ui.showUI = false;
|
||
|
||
setTimeout(() => { ui.showUI = true; }, 0 );
|
||
};
|
||
|
||
const applyRankingListData = ( data: RankingListResponse ): void =>
|
||
{
|
||
ui.attachingRankingList = data.attachingRankingList;
|
||
ui.renewalRankingList = data.renewalRankintList;
|
||
|
||
// 更新UI
|
||
// 先不显示界面，往队列中加入显示队列的回调，让vue刷新组件。
|
||
ui.showUI = false;
|
||
|
||
setTimeout(() => { ui.showUI = true; }, 0 );
|
||
};
|
||
|
||
// 退出桌面霸屏
|
||
const logoutDesktopArchievement = () =>
|
||
{
|
||
console.log( "111" );
|
||
logout();
|
||
|
||
// router.push("/login");
|
||
};
|
||
|
||
// 检查存储的登录信息，不存在则返回登录页面
|
||
if ( callerInfo.telSalerCode === "" )
|
||
{
|
||
ElMessage({
|
||
message: "登录信息失效，请重新登录！",
|
||
type: "success",
|
||
center: true,
|
||
});
|
||
|
||
router.push( "/login" );
|
||
}
|
||
|
||
/**
|
||
* 刷新页面
|
||
*/
|
||
const refresh = () =>
|
||
{
|
||
const deparmentInfo:Department =
|
||
{
|
||
departmentCode: callerInfo.departmentCode,
|
||
departmentName: callerInfo.departmentName,
|
||
};
|
||
|
||
const rankinglistRequest: RankingListRequest =
|
||
{
|
||
departmentCode: callerInfo.departmentCode,
|
||
year: "2023",
|
||
month: "06",
|
||
};
|
||
|
||
queryDepartmentArchievement( deparmentInfo, applyArchievementData );
|
||
requestRankingList( rankinglistRequest, applyRankingListData );
|
||
};
|
||
|
||
/**
|
||
* 加载前
|
||
*/
|
||
onBeforeMount(() =>
|
||
{
|
||
// 设置每10分钟刷新一次
|
||
timerHandler = setInterval( refresh, 5000 );
|
||
|
||
refresh();
|
||
});
|
||
|
||
/**
|
||
* 页面卸载前
|
||
*/
|
||
onUnmounted(():void =>
|
||
{
|
||
// 退出页面前关掉定时器
|
||
clearInterval( timerHandler );
|
||
});
|
||
|
||
return { ui, callerInfo, timerHandler, getTotalArchievement, renderData: applyArchievementData, refresh, logoutDesktopArchievement, };
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.view-wrapper {
|
||
box-sizing: border-box;
|
||
min-height: 800px;
|
||
height: calc(100vh - 10mm);
|
||
min-width: 1280px;
|
||
width: 100vw;
|
||
padding: 5mm;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
align-items: stretch;
|
||
}
|
||
|
||
.left-wrapper {
|
||
width: 10%;
|
||
}
|
||
|
||
.center-wrapper {
|
||
//中间部分
|
||
width: 50%;
|
||
min-width: 780px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: stretch;
|
||
justify-content: start;
|
||
|
||
.slogan {
|
||
//标语
|
||
margin: 0px;
|
||
padding: 15px 0px;
|
||
display: block;
|
||
text-align: center;
|
||
flex-grow: 0;
|
||
|
||
font: {
|
||
family: "FZ-ZHUOHEI";
|
||
weight: 100;
|
||
size: 90px;
|
||
}
|
||
|
||
color: $color-bg-04;
|
||
text-shadow: #feebb1 0px 0px,
|
||
#feebb1 5px 0px,
|
||
#feebb1 -5px -0px,
|
||
#feebb1 -0px -5px,
|
||
#feebb1 -4px -4px,
|
||
#feebb1 4px 4px,
|
||
#feebb1 4px -4px,
|
||
#feebb1 -4px 4px;
|
||
}
|
||
|
||
.total-archievement-wrapper {
|
||
height: 80px;
|
||
|
||
span {
|
||
display: block;
|
||
width: 100%;
|
||
color: #25e6e6;
|
||
text-align: center;
|
||
|
||
font: {
|
||
size: 35px;
|
||
family: "FZ-ZHUOHEI";
|
||
}
|
||
|
||
flex-grow: 0;
|
||
}
|
||
}
|
||
|
||
.archievement-wrapper {
|
||
//业绩部分
|
||
height: 280px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: stretch;
|
||
|
||
>*+* {
|
||
margin-left: 15px;
|
||
}
|
||
|
||
.total-archievement-rate-wrapper {
|
||
//业绩比例
|
||
// width: 20%;
|
||
width: 140px;
|
||
min-width: 140px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.total-archievement-charts-wrapper {
|
||
//业绩图表
|
||
width: 70%;
|
||
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
}
|
||
|
||
.reward-wrapper {
|
||
//奖励部分
|
||
// height: 280px;
|
||
padding: 15px;
|
||
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
>*+* {
|
||
margin-left: 15px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.right-wrapper {
|
||
min-width: 300px;
|
||
width: 25%;
|
||
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: flex-start;
|
||
|
||
>*+* {
|
||
margin-top: 15px;
|
||
}
|
||
}
|
||
</style>
|
||
<style lang="scss">
|
||
body {
|
||
background-image: radial-gradient(farthest-corner at 100% 0%,
|
||
$color-bg-01,
|
||
$color-bg-02,
|
||
$color-bg-03,
|
||
$color-bg-04,
|
||
$color-bg-05,
|
||
$color-bg-05);
|
||
}
|
||
|
||
div {
|
||
// border: 1px solid red;
|
||
box-sizing: border-box;
|
||
}
|
||
</style>
|