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-03-08 20:14:41 +08:00
parent e4260780bc
commit bab8d6bf6f
6 changed files with 158 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
code/web/task_schedule/src/assets/img/ranking/copper_medal.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 113 KiB

After

Width:  |  Height:  |  Size: 78 KiB

BIN
code/web/task_schedule/src/assets/img/ranking/medal.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 184 KiB

After

Width:  |  Height:  |  Size: 169 KiB

BIN
code/web/task_schedule/src/assets/img/ranking/stop.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 63 KiB

After

Width:  |  Height:  |  Size: 45 KiB

75
code/web/task_schedule/src/components/DishonorListComponent.vue Normal file
View File

@ -0,0 +1,75 @@
<!--
* @Author: Kane
* @Date: 2023-03-08 18:32:13
* @LastEditors: Kane
* @FilePath: /task_schedule/src/components/DishonorListComponent.vue
* @Description:
*
* Copyright (c) ${2022} by Kane, All Rights Reserved.
-->
<template>
<div class="dishonorlist-wrapper">
<div class="banner-wrapper">
<img src="@/assets/img/ranking/stop.png" alt="">
<div class="title-wrapper">
<span>"消7灭6"突围战</span>
<span>二月入营坐席</span>
</div>
</div>
</div>
</template>
<script lang="ts">
export default {
name: "DishonorListComponent",
props: {
month: {
type: String,
require: true,
},
dishonorPersons: {
type: Array,
require: true,
},
},
setup() { },
};
</script>
<style scoped lang="scss">
.dishonorlist-wrapper {
height: 240px;
width: 360px;
border-radius: 5px;
background-color: $color-honorlist-bg;
backdrop-filter: blur(10px);
padding: 10px;
.banner-wrapper {
display: flex;
justify-content: center;
align-items: stretch;
img {
// width: 70px;
height: 60px;
}
span {
display: block;
width: 100%;
text-align: center;
font: {
family: "fz-zhuohei";
size: 1.7rem;
weight: 100;
}
color: #fff;
}
}
}
</style>

65
code/web/task_schedule/src/components/HonorListComponent.vue
View File

@ -10,6 +10,20 @@
<template>
<div class="honorlist-wrapper">
<span class="title">“90俱乐部”{{ $props.month }}月入围坐席</span>
<div class="reward-wrapper">
<div class="leading-reward-wrapper">
<div class="banner-wrapper">
<img src="@/assets/img/ranking/medal.png" alt="领跑奖">
<span>领跑奖</span>
</div>
</div>
<div class="advance-reward-wrapper">
<div class="banner-wrapper">
<img src="@/assets/img/ranking/copper_medal.png" alt="飞跃奖">
<span>飞跃奖</span>
</div>
</div>
</div>
</div>
</template>
@ -46,10 +60,10 @@ export default {
background-color: $color-honorlist-bg;
backdrop-filter: blur(10px);
padding: 15px;
padding: 10px;
>*+* {
margin-top: 15px;
margin-top: 10px;
}
.title {
@ -63,5 +77,52 @@ export default {
color: goldenrod;
}
.reward-wrapper {
width: 100%;
display: flex;
justify-content: center;
align-items: stretch;
>*+* {
margin-left: 10px;
}
.leading-reward-wrapper {
width: 165px;
height: 100%;
}
.advance-reward-wrapper {
width: 165px;
height: 100%;
}
.banner-wrapper {
display: flex;
justify-content: center;
align-items: center;
img {
width: 30px;
height: 30px;
}
span {
display: inline-block;
text-align: center;
color: #fff;
font: {
size: 1.5rem;
family: "FZ-ZHUOHEI";
weight: 100;
}
}
}
}
}
</style>

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

@ -17,8 +17,8 @@
</div>
<div class="archievement-wrapper">
<div class="total-archievement-rate-wrapper">
<ArchievementCompleteRateComponent indicator="续保完成率" percentage=65 />
<ArchievementCompleteRateComponent indicator="车非完成率" percentage=66 />
<ArchievementCompleteRateComponent indicator="续保完成率" percentage=95 />
<ArchievementCompleteRateComponent indicator="车非完成率" percentage=95 />
</div>
<div class="total-archievement-charts-wrapper">
<ArchievementChart total_archievement="435220" :chart_data="ui.chartData" />
@ -26,6 +26,7 @@
</div>
<div class="reward-wrapper">
<HonorListComponent month="二" leading-reward="王炜" advance-reward="王炜" />
<DishonorListComponent month="二" :dishonorPersons="ui.dishonorPersons" />
</div>
</div>
<div class="right-wrapper">
@ -42,6 +43,7 @@ import { ElMessage } from "element-plus";
import ArchievementChart from "@/components/ArchievementChartComponent.vue";
import ArchievementCompleteRateComponent from "@/components/ArchievementCompleteRateComponent.vue";
import HonorListComponent from "@/components/HonorListComponent.vue";
import DishonorListComponent from "@/components/DishonorListComponent.vue";
export default {
name: "DesktopArchievement",
@ -49,6 +51,7 @@ export default {
ArchievementChart,
ArchievementCompleteRateComponent,
HonorListComponent,
DishonorListComponent,
},
setup()
{
@ -56,7 +59,8 @@ export default {
const staffInfo = loadStaffInfo();
const ui = reactive({
chartData: [200, 230, 224, 218, 135, 147, 260, 800,],
totalArchievement: 456778,
totalArchievement: 120000000,
dishonorPersons: ["张三", "李四",],
});
const getTotalArchievement = computed(() =>
@ -100,11 +104,6 @@ export default {
display: flex;
justify-content: end;
align-items: stretch;
div {
// border: 1px solid red;
box-sizing: border-box;
}
}
.left-wrapper {
@ -198,6 +197,14 @@ export default {
//奖励部分
// height: 280px;
padding: 15px;
display: flex;
justify-content: center;
align-items: center;
>*+* {
margin-left: 15px;
}
}
}
@ -216,4 +223,9 @@ body {
$color-bg-05,
$color-bg-05);
}
div {
// border: 1px solid red;
box-sizing: border-box;
}
</style>