DigitalMgnt
/
wd-smebiz-manage-web
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

编写dashborad

This commit is contained in:
wcq 2023-09-18 16:40:44 +08:00
parent 0f782ad8c1
commit d568699465
1 changed files with 58 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
src/views/dashboard/dashboard.vue
View File

@ -1,40 +1,39 @@
<template>
<div class="h-full">
<div class="p-4 md:p-12">
<div class="w-full p-4 text-center board-border">评级作业看板</div>
<div class="board-border p-4 my-4">
<div class="mb-2">待处理作业:</div>
<div
class="grid grid-cols-2 sm:grid-cols-3 min-[850px]:grid-cols-4 items-center gap-4"
>
<el-card
v-for="(item, key) in dashboardData.num_data"
v-for="key in ['examining', 'rating', 'publish']"
class="num-data-item item-border"
:style="{ color: itemColorConfig[key] }"
>
<div>
<div class="num-data-item__num">{{ item }}</div>
<div class="num-data-item__title">{{ key }}</div>
<div class="num-data-item__num">{{ resData[key] }}</div>
<div class="num-data-item__title">{{ nameDic[key] }}</div>
</div>
</el-card>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 my-4">
<div
style="height: 16rem"
class="item-border flex flex-col pb-2 bg-white dark:bg-opacity-0"
>
<div class="opacity-80 text-center my-4">七日评级申请趋势</div>
<apply-bar
class="flex-1"
:data="dashboardData.七日评级申请趋势数据"
></apply-bar>
</div>
<div class="board-border p-4 my-4">
<div class="mb-2">作业质量管理:</div>
<div
style="height: 16rem"
class="item-border flex flex-col pb-2 bg-white dark:bg-opacity-0"
class="grid grid-cols-2 sm:grid-cols-3 min-[850px]:grid-cols-4 items-center gap-4"
>
<div class="opacity-80 text-center my-4">已披露企业评级等级分布</div>
<rate-level-pie
class="flex-1"
:data="dashboardData.已披露企业评级等级扇形数据"
></rate-level-pie>
<el-card
v-for="key in ['published', 'average_work_day']"
class="num-data-item item-border"
:style="{ color: itemColorConfig[key] }"
>
<div>
<div class="num-data-item__num">{{ resData[key] }}</div>
<div class="num-data-item__title">{{ nameDic[key] }}</div>
</div>
</el-card>
</div>
</div>
</div>
@ -78,6 +77,11 @@ const itemColorConfig = {
总申请数: "rgb(107,255,201)",
待披露企业: "rgb(246,203,255)",
披露企业数: "rgb(130,170,255)",
examining: "rgb(218,30,255)",
rating: "rgb(96 119 255)",
publish: "rgb(255 143 21)",
published: "rgb(168,86,255)",
average_work_day: "rgb(130,170,255)",
};
const dashboardData = ref<DashboardData>({
num_data: {
@ -101,6 +105,13 @@ const resData = ref<st["DashboardDataGetRes"]>({
published: 0,
average_work_day: 0,
});
const nameDic = {
examining: "材料审核",
rating: "评级作业",
publish: "信息披露",
published: "已披露公司",
average_work_day: "平均作业天数",
};
const getData = () => {
spost("/wd-smebiz/rate/rate_serve/dashboard_data/get").then((res) => {
const { error, data } = res;
@ -128,10 +139,27 @@ const getData = () => {
onMounted(() => getData());
</script>
<style scoped lang="scss">
.item-border {
html[class*="dark"] .item-border {
background: var(--el-bg-color);
border: 2px solid rgba(162, 160, 160, 0.3);
border-radius: 0.5rem;
}
html[class*="dark"] .board-border {
background: none;
border: 2px solid rgba(162, 160, 160, 0.3);
border-radius: 0.5rem;
}
.item-border {
background: rgb(141 122 232 / 17%);
border: 1px solid rgb(141 122 232 / 17%);
border-radius: 0.5rem;
}
.board-border {
background: white;
border: 2px solid rgba(255, 255, 255, 0.87);
border-radius: 0.5rem;
}
.num-data-item {
display: flex;