Skip to content

Commit 74ea7dd

Browse files
gerry-f2cgerry-f2c
committed
perf: update reports
1 parent e80b85d commit 74ea7dd

15 files changed

Lines changed: 542 additions & 408 deletions

‎src/components/Dashboard/SwitchDate.vue‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,13 @@ export default {
5151
iOptions: this.options.length > 0 ? this.options : defaultOptions
5252
}
5353
},
54+
watch: {
55+
days(val) {
56+
if (val != null && String(val) !== this.select) {
57+
this.select = String(val)
58+
}
59+
}
60+
},
5461
created() {
5562
let days = this.days
5663
if (!days) {

‎src/views/reports/accounts/AccountAutomation.vue‎

Lines changed: 37 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<div>
33
<BaseReport
4-
:title="title"
4+
:title="reportTitle"
55
:nav="nav"
66
:name="name"
77
:charts="charts"
@@ -10,14 +10,16 @@
1010
:display-mode.sync="displayMode"
1111
v-bind="$attrs"
1212
>
13-
<div class="charts-grid">
13+
<template #toolbar>
1414
<ReportToolbar
1515
:filters="currentFilters"
1616
class="chart-container full-width report-toolbar-wrap"
1717
@filter-change="handleToolbarFilterChange"
1818
/>
19-
<template v-if="showChart">
20-
<div class="chart-container full-width">
19+
</template>
20+
<template #default>
21+
<div v-if="showChart" class="charts-grid">
22+
<div class="chart-container full-width" data-report-type="chart" data-report-name="Overview">
2123
<div class="chart-container-title">
2224
<div class="chart-container-title-text">{{ $t('Overview') }}</div>
2325
<SummaryCountCard
@@ -33,7 +35,7 @@
3335
</div>
3436
</div>
3537

36-
<div class="chart-container full-width">
38+
<div class="chart-container full-width" data-report-type="chart" data-report-name="TaskExecutionTrends">
3739
<div class="chart-container-title">
3840
<div class="chart-container-title-text">{{ $t('TaskExecutionTrends') }}</div>
3941
<div class="chart">
@@ -45,7 +47,7 @@
4547
</div>
4648
</div>
4749

48-
<div class="chart-container full-width">
50+
<div class="chart-container full-width" data-report-type="chart" data-report-name="AccountResult">
4951
<div class="chart-container-title">
5052
<div class="chart-container-title-text">{{ $t('AccountResult') }}</div>
5153
<AccountSummary
@@ -57,32 +59,37 @@
5759
/>
5860
</div>
5961
</div>
60-
</template>
62+
</div>
63+
</template>
64+
<template #table>
6165
<div v-if="showTable" class="full-width">
6266
<div v-if="Array.isArray(tableData)" class="report-tables full-width">
63-
<div v-if="tableData.length" class="report-table-wrap full-width">
64-
<el-card class="report-card" shadow="hover">
65-
<div v-if="tableData[0].name" class="chart-container-title">
66-
<div class="chart-container-title-text">{{ tableData[0].name }}</div>
67-
</div>
68-
<div class="report-card-body">
69-
<el-table :data="tableData[0].rows" border>
70-
<el-table-column v-for="column in tableData[0].columns" :key="column.key" :label="column.label" :prop="column.key" min-width="140" />
71-
</el-table>
72-
</div>
73-
</el-card>
67+
<div
68+
v-if="tableData.length"
69+
class="report-table-wrap chart-container full-width"
70+
data-report-type="table"
71+
:data-report-name="tableData[0].name"
72+
>
73+
<div v-if="tableData[0].name" class="chart-container-title">
74+
<div class="chart-container-title-text">{{ tableData[0].name }}</div>
75+
</div>
76+
<el-table :data="tableData[0].rows" border>
77+
<el-table-column v-for="column in tableData[0].columns" :key="column.key" :label="column.label" :prop="column.key" min-width="140" />
78+
</el-table>
7479
</div>
75-
<div v-for="(t, idx) in tableData.slice(1)" :key="t.name || idx" class="report-table-wrap full-width">
76-
<el-card class="report-card" shadow="hover">
77-
<div v-if="t.name" class="chart-container-title">
78-
<div class="chart-container-title-text">{{ t.name }}</div>
79-
</div>
80-
<div class="report-card-body">
81-
<el-table :data="t.rows" border>
82-
<el-table-column v-for="column in t.columns" :key="column.key" :label="column.label" :prop="column.key" min-width="140" />
83-
</el-table>
84-
</div>
85-
</el-card>
80+
<div
81+
v-for="(t, idx) in tableData.slice(1)"
82+
:key="t.name || idx"
83+
class="report-table-wrap chart-container full-width"
84+
data-report-type="table"
85+
:data-report-name="t.name"
86+
>
87+
<div v-if="t.name" class="chart-container-title">
88+
<div class="chart-container-title-text">{{ t.name }}</div>
89+
</div>
90+
<el-table :data="t.rows" border>
91+
<el-table-column v-for="column in t.columns" :key="column.key" :label="column.label" :prop="column.key" min-width="140" />
92+
</el-table>
8693
</div>
8794
</div>
8895
<div v-else>
@@ -91,7 +98,7 @@
9198
</el-table>
9299
</div>
93100
</div>
94-
</div>
101+
</template>
95102
</BaseReport>
96103
</div>
97104
</template>

‎src/views/reports/accounts/AccountStatistics.vue‎

Lines changed: 31 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<div>
33
<BaseReport
4-
:title="title"
4+
:title="reportTitle"
55
:nav="nav"
66
:name="name"
77
:charts="charts"
@@ -10,14 +10,16 @@
1010
:display-mode.sync="displayMode"
1111
v-bind="$attrs"
1212
>
13-
<div class="charts-grid">
13+
<template #toolbar>
1414
<ReportToolbar
1515
:filters="currentFilters"
1616
class="chart-container full-width report-toolbar-wrap"
1717
@filter-change="handleToolbarFilterChange"
1818
/>
19-
<template v-if="showChart">
20-
<div class="chart-container full-width">
19+
</template>
20+
<template #default>
21+
<div v-if="showChart" class="charts-grid">
22+
<div class="chart-container full-width" data-report-type="chart" data-report-name="Overview">
2123
<div class="chart-container-title">
2224
<div class="chart-container-title-text">{{ $t('Overview') }}</div>
2325
<SummaryCountCard
@@ -26,7 +28,7 @@
2628
</div>
2729
</div>
2830

29-
<div class="chart-container">
31+
<div class="chart-container" data-report-type="chart" data-report-name="AccountCreationSourceDistribution">
3032
<div class="chart-container-title">
3133
<div class="chart-container-title-text">{{ $t('AccountCreationSourceDistribution') }}</div>
3234
<div class="chart">
@@ -37,7 +39,7 @@
3739
</div>
3840
</div>
3941
</div>
40-
<div class="chart-container">
42+
<div class="chart-container" data-report-type="chart" data-report-name="AccountConnectivityStatusDistribution">
4143
<div class="chart-container-title">
4244
<div class="chart-container-title-text">{{ $t('AccountConnectivityStatusDistribution') }}</div>
4345
<div class="chart">
@@ -48,7 +50,7 @@
4850
</div>
4951
</div>
5052
</div>
51-
<div class="chart-container full-width">
53+
<div class="chart-container full-width" data-report-type="chart" data-report-name="AccountPasswordChangeTrends">
5254
<div class="chart-container-title">
5355
<div class="chart-container-title-text">{{ $t('AccountPasswordChangeTrends') }}</div>
5456
<div class="chart">
@@ -59,42 +61,31 @@
5961
</div>
6062
</div>
6163
</div>
62-
<div class="chart-container">
64+
<div class="chart-container" data-report-type="chart" data-report-name="RankByNumberOfAssetAccounts">
6365
<div class="chart-container-title">
6466
<div class="chart-container-title-text">{{ $t('RankByNumberOfAssetAccounts') }}</div>
6567
<RankTable :config="config.top10_asset_accounts" />
6668
</div>
6769
</div>
68-
<div class="chart-container">
70+
<div class="chart-container" data-report-type="chart" data-report-name="AccountAndPasswordChangeRank">
6971
<div class="chart-container-title">
7072
<div class="chart-container-title-text">{{ $t('AccountAndPasswordChangeRank') }}</div>
7173
<RankTable :config="config.top10_version_accounts" />
7274
</div>
7375
</div>
74-
</template>
75-
76+
</div>
77+
</template>
78+
<template #table>
7679
<div v-if="showTable" class="full-width">
7780
<div v-if="Array.isArray(tableData)" class="report-tables full-width">
78-
<div v-if="tableData.length" class="report-table-wrap full-width">
79-
<el-card class="report-card" shadow="hover">
80-
<div v-if="tableData[0].name" class="chart-container-title">
81-
<div class="chart-container-title-text">{{ tableData[0].name }}</div>
82-
</div>
83-
<div class="report-card-body">
84-
<el-table :data="tableData[0].rows" border>
85-
<el-table-column
86-
v-for="column in tableData[0].columns"
87-
:key="column.key"
88-
:label="column.label"
89-
:prop="column.key"
90-
min-width="140"
91-
/>
92-
</el-table>
81+
<template v-for="(t, idx) in tableData">
82+
<div v-if="rankingTableConfigs[t.name]" :key="'rank-' + idx" class="report-table-wrap chart-container full-width" data-report-type="table" :data-report-name="t.name">
83+
<div class="chart-container-title">
84+
<div class="chart-container-title-text">{{ t.name }}</div>
9385
</div>
94-
</el-card>
95-
</div>
96-
<div v-for="(t, idx) in tableData.slice(1)" :key="t.name || idx" class="report-table-wrap full-width">
97-
<el-card class="report-card" shadow="hover">
86+
<RankTable :config="rankingTableConfigs[t.name]" />
87+
</div>
88+
<div v-else :key="t.name || idx" class="report-table-wrap chart-container full-width" data-report-type="table" :data-report-name="t.name">
9889
<div v-if="t.name" class="chart-container-title">
9990
<div class="chart-container-title-text">{{ t.name }}</div>
10091
</div>
@@ -109,8 +100,8 @@
109100
/>
110101
</el-table>
111102
</div>
112-
</el-card>
113-
</div>
103+
</div>
104+
</template>
114105
</div>
115106
<div v-else>
116107
<el-table :data="tableData.rows" border>
@@ -124,7 +115,7 @@
124115
</el-table>
125116
</div>
126117
</div>
127-
</div>
118+
</template>
128119
</BaseReport>
129120
</div>
130121
</template>
@@ -174,7 +165,7 @@ export default {
174165
{ name: 'RankByNumberOfAssetAccounts', title: this.$t('RankByNumberOfAssetAccounts') },
175166
{ name: 'AccountAndPasswordChangeRank', title: this.$t('AccountAndPasswordChangeRank') }
176167
],
177-
days: '30',
168+
days: localStorage.getItem(this.name) || '7',
178169
account_stats: {
179170
'total': 0,
180171
'active': 0,
@@ -221,6 +212,12 @@ export default {
221212
}
222213
},
223214
computed: {
215+
rankingTableConfigs() {
216+
return {
217+
[this.$t('RankByNumberOfAssetAccounts')]: this.config.top10_asset_accounts,
218+
[this.$t('AccountAndPasswordChangeRank')]: this.config.top10_version_accounts
219+
}
220+
},
224221
totalData() {
225222
return [
226223
{

‎src/views/reports/accounts/index.vue‎

Lines changed: 19 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,8 @@ export default {
7878
chartItems: [],
7979
catalogLoaded: false,
8080
lastSyncQueryKey: '',
81-
isPageActive: true
81+
isPageActive: true,
82+
syncRetryPending: false
8283
}
8384
},
8485
watch: {
@@ -97,6 +98,10 @@ export default {
9798
},
9899
async created() {
99100
await this.loadCatalog()
101+
this.$eventBus.$on('reportCatalogChanged', this.handleCatalogChanged)
102+
},
103+
beforeDestroy() {
104+
this.$eventBus.$off('reportCatalogChanged', this.handleCatalogChanged)
100105
},
101106
activated() {
102107
this.isPageActive = true
@@ -175,17 +180,24 @@ export default {
175180
if (!this.catalogLoaded) {
176181
return
177182
}
183+
if (!this.syncRetryPending) {
184+
this.syncRetryPending = true
185+
this.loadCatalog()
186+
return
187+
}
188+
this.syncRetryPending = false
178189
const nextQuery = { ...(this.$route.query || {}) }
179190
delete nextQuery.report_id
180191
this.$router.replace({ path: this.$route.path, query: nextQuery })
181192
return
182193
}
194+
this.syncRetryPending = false
183195
}
184196
if (!target) {
185197
const chartKey = this.$route.query.chart_key
186-
target = this.chartItems.find(item => item.key === chartKey)
187-
|| this.chartItems.find(item => item.key === this.selectedChartKey)
188-
|| this.chartItems[0]
198+
target = this.chartItems.find(item => item.key === chartKey) ||
199+
this.chartItems.find(item => item.key === this.selectedChartKey) ||
200+
this.chartItems[0]
189201
}
190202
if (target && (this.selectedChartKey !== target.key || !this.component)) {
191203
this.applyChart(target)
@@ -203,6 +215,9 @@ export default {
203215
days: query.days || ''
204216
})
205217
},
218+
handleCatalogChanged() {
219+
this.loadCatalog()
220+
},
206221
isActive(item) {
207222
return this.selectedChartKey === item.key
208223
},

0 commit comments

Comments
 (0)