Skip to content

Commit

Permalink
Perf: Optimize the DataSummary style
Browse files Browse the repository at this point in the history
  • Loading branch information
@ZhaoJiSen
ZhaoJiSen committed Jan 8, 2025
1 parent 4a8c84e commit 5b7245d
Show file tree
Hide file tree
Showing 3 changed files with 170 additions and 78 deletions.
15 changes: 9 additions & 6 deletions src/views/dashboard/Pam/DataSummary.vue
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<div>
<el-row :gutter="16">
<el-col :lg="24" :sm="12">
<el-col :lg="24">
<SummaryChart :config="accountConfig" />
</el-col>
</el-row>
Expand All @@ -25,7 +25,9 @@ export default {
data: [],
route: { name: 'PamAccounts' },
total: 0,
weekAdd: 0
weekAdd: 0,
connectivityOk: 0,
secretReset: 0
}
}
},
Expand All @@ -39,17 +41,18 @@ export default {
{
params: {
total_accounts: 1,
total_week_add_accounts: 1
total_week_add_accounts: 1,
total_secret_reset_accounts: 1,
total_connectivity_ok_accounts: 1
}
}
)
this.accountConfig.total = data.total_accounts
this.accountConfig.weekAdd = data.total_week_add_accounts
this.accountConfig.secretReset = data.total_secret_reset_accounts
this.accountConfig.connectivityOk = data.total_connectivity_ok_accounts
}
}
}
</script>

<style scoped>
</style>
218 changes: 148 additions & 70 deletions src/views/dashboard/Pam/SummaryChart.vue
View file
Original file line number Diff line number Diff line change
@@ -1,35 +1,33 @@
<template>
<div class="card">
<div class="card-content">
<div class="title">
<Title :config="config" />
</div>
<div class="sub">{{ config.subTitle }}</div>
<slot class="custom">
<div>
<div class="summary-card">
<div class="title-section">
<Title :config="config" />
</div>

<div class="content">
<div class="info-box">
<div class="total-number">
<template v-if="config.route">
<router-link :to="config.route">
<div class="num"> {{ config.total }} </div>
</router-link>
</template>
<template v-else>
<div class="num">{{ config.total }}</div>
<router-link :to="config.route">{{ config.total }}</router-link>
</template>
<template v-else>{{ config.total }}</template>
</div>
<div class="add">
<span class="add-num">
{{ $tc('WeekAdd') }}：
<span :class="{'increase': config.weekAdd > 0}" style="font-size: 14px;">
{{ config.weekAdd }}
</span>
</span>
<span class="add-icon">
<svg-icon v-if="config.icon" :icon-class="config.icon" class="font" />
<div class="sub-title">{{ config.subTitle }}</div>
</div>

<div class="metrics-section">
<div
v-for="item in summaryItems"
:key="item.key"
class="metric-item"
>
<span class="metric-value" :class="{'increase': config[item.key] > 0}">
{{ config[item.key] }}
</span>
<span class="metric-label">{{ $tc(item.label) }}</span>
</div>
</slot>
</div>
</div>
<div class="ring" />
</div>
</template>

Expand All @@ -47,78 +45,158 @@ export default {
}
},
data() {
return {}
return {
summaryItems: [
{
key: 'weekAdd',
label: 'WeekAdd',
className: 'add'
},
{
key: 'connectivityOk',
label: 'ConnectivityOk',
className: 'connection'
},
{
key: 'secretReset',
label: 'SecretReset',
className: 'connection'
}
]
}
}
}
</script>

<style lang="scss" scoped>
.card {
.summary-card {
display: flex;
flex-direction: column;
gap: 1.5rem;
width: 100%;
padding: 20px;
background-color: #FFF;
.card-content {
padding-bottom: 16px;
border-bottom: 1px solid #EFF0F1;
.title,
.num {
.title-section {
.title {
font-size: 1.125rem;
font-weight: 600;
color: var(--color-text-primary);
letter-spacing: -0.01em;
}
}
.title {
margin-bottom: 12px;
}
.content {
display: flex;
flex-direction: column;
flex-wrap: wrap;
gap: 2rem;
.num {
font-weight: 500;
font-size: 32px;
line-height: 40px;
margin-bottom: 4px;
}
.info-box {
display: flex;
flex-direction: column;
gap: 0.5rem;
flex: 1;
min-width: 160px;
padding: 1rem 0;
.sub,
.add {
color: var(--color-icon-primary);
}
.total-number {
font-size: 2.25rem;
font-weight: 700;
color: var(--color-text-primary);
line-height: 1;
letter-spacing: -0.02em;
.sub {
font-weight: 400;
font-size: 12px;
line-height: 20px;
margin-bottom: 4px;
a {
color: inherit;
text-decoration: none;
transition: color 0.2s ease;
&:hover { color: var(--color-primary); }
}
}
.sub-title {
font-size: 0.875rem;
color: var(--color-icon-primary);
font-weight: 500;
}
}
.add {
.metrics-section {
display: flex;
justify-content: space-between;
flex-wrap: nowrap;
gap: 0.75rem;
.metric-item {
min-width: 120px;
padding: 0.75rem 0;
border-radius: 8px;
display: flex;
flex-direction: column;
gap: 0.375rem;
transition: all 0.2s ease;
&:hover {
transform: translateY(-2px);
}
.metric-value {
font-size: 1.25rem;
font-weight: 600;
color: var(--color-text-primary);
letter-spacing: -0.01em;
&.increase {
color: var(--color-primary);
}
}
.metric-label {
font-size: 0.75rem;
font-weight: 500;
color: var(--color-icon-primary);
text-transform: uppercase;
letter-spacing: 0.02em;
}
}
}
}
.custom {
display: flex;
justify-content: space-between;
font-weight: 500;
font-size: 32px;
padding-bottom: 18px;
}
@media (max-width: 768px) {
padding: 1.25rem;
gap: 1.25rem;
.content {
gap: 1rem;
.info-box {
width: 100%;
padding: 0.875rem 0;
.ring {
padding: 26px 0 10px;
.total-number {
font-size: 2rem;
}
}
& ::v-deep .echarts {
width: 100% !important;
height: 278px !important;
.metrics-section {
width: 100%;
justify-content: space-between;
.metric-item {
flex: 1;
min-width: calc(33.333% - 0.5rem);
max-width: calc(50% - 0.5rem);
}
}
}
}
.font {
font-size: 18px;
}
@media (max-width: 480px) {
padding: 1rem;
.increase {
color: var(--color-primary);
.metrics-section .metric-item {
min-width: calc(50% - 0.375rem);
}
}
}
</style>
15 changes: 13 additions & 2 deletions src/views/dashboard/Pam/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,15 @@

<div class="dashboard-container">
<el-row :gutter="20" class="top-summary">
<el-col :span="18" :lg="18" :xs="24" class="left-column">
<el-col :lg="16" :xs="24" class="left-column">
<div class="account-wrapper">
<AccountSummary class="summary-card" />
</div>
<div class="risk-wrapper">
<RiskSummary class="summary-card" />
</div>
</el-col>
<el-col :span="6" :lg="6" :xs="24">
<el-col :lg="8" :xs="24" class="right-column">
<DataSummary class="summary-card" />
</el-col>
</el-row>
Expand Down Expand Up @@ -81,6 +81,11 @@ export default {
flex-direction: column;
gap: 1.25rem;
}
.right-column {
max-height: 286px;
height: 286px;
}
}
.bottom-section {
Expand Down Expand Up @@ -119,6 +124,12 @@ export default {
box-shadow: 0 1px 4px rgba(0,21,41,.08);
}
@media screen and (max-width: 1200px) {
.right-column {
margin-top: 1.25rem;
}
}
@media screen and (max-width: 768px) {
padding: 0.625rem;
Expand Down

0 comments on commit 5b7245d

Please sign in to comment.