From 01fb9f541198cbf33d8f9bbca9e1ed6b9be6ca3d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9Chuailei000=E2=80=9D?= <2280131253@qq.com> Date: Wed, 30 Nov 2022 11:09:02 +0800 Subject: [PATCH 1/5] =?UTF-8?q?perf:=20=E4=BB=AA=E8=A1=A8=E7=9B=98?= =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E7=BF=BB=E8=AF=91=EF=BC=9B=E6=B7=B7=E5=90=88?= =?UTF-8?q?=E7=94=9F=E6=88=90=E4=BB=AA=E8=A1=A8=E7=9B=98=E9=A2=9C=E8=89=B2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/i18n/langs/en.json | 17 +++++++++++ src/i18n/langs/ja.json | 17 +++++++++++ src/i18n/langs/zh.json | 17 +++++++++++ .../dashboard/AssetProportionSummary.vue | 4 +-- src/views/dashboard/DataSummary.vue | 22 +++++++------- src/views/dashboard/RankSummary.vue | 16 +++++----- src/views/dashboard/components/DataCard.vue | 2 +- src/views/dashboard/components/LineChart.vue | 29 ++++++++++++------- .../dashboard/components/ProgressChart.vue | 6 +++- src/views/dashboard/components/RankTable.vue | 9 +++--- .../dashboard/components/RealTimeSummary.vue | 4 +-- src/views/dashboard/components/RingChart.vue | 2 +- 12 files changed, 105 insertions(+), 40 deletions(-) diff --git a/src/i18n/langs/en.json b/src/i18n/langs/en.json index 0ca00fa23..5c1b9855b 100644 --- a/src/i18n/langs/en.json +++ b/src/i18n/langs/en.json @@ -595,6 +595,23 @@ "CurrentConnections": "Current connections", "TodayFailedConnections": "Connections failed today", "OnlineSessions": "Online sessions", + "RealTimeData": "Real-time data", + "UserAssetActivity": "User/Asset activity", + "UserData": "User data", + "LoginUserToday": "Login user today", + "AssetData": "Asset data", + "LoginAssetToday": "Active assets today", + "WeekAdd": "New this week", + "ProportionOfAssetTypes": "Proportion of asset types", + "Proportion": "Proportion", + "LoginUserRanking": "Login user ranking", + "ActiveAssetRanking": "Active asset ranking", + "AssetName": "Asset name", + "NumberOfVisits": "Number of visits", + "ranking": "Ranking", + "Today": "Today", + "Last7Days": "Last 7 days", + "Last30Days": "Last30 days", "OnlineUsers": "Online users", "ConnectUsers": "Connect users", "TimesWeekUnit": "times/week", diff --git a/src/i18n/langs/ja.json b/src/i18n/langs/ja.json index fc307973e..0090c0592 100644 --- a/src/i18n/langs/ja.json +++ b/src/i18n/langs/ja.json @@ -606,6 +606,23 @@ "CurrentConnections": "現在の接続数", "TodayFailedConnections": "今日の接続に失敗しました", "OnlineSessions": "オンラインセッション", + "RealTimeData": "リアルタイムデータ", + "UserAssetActivity": "ユーザー/資産のアクティブ化", + "UserData": "ユーザデータ", + "LoginUserToday": "今日のログインユーザー数", + "AssetData": "資産データ", + "LoginAssetToday": "今日のアクティブ資産数", + "WeekAdd": "今週の追加", + "ProportionOfAssetTypes": "資産タイプの割合", + "Proportion": "占有率", + "LoginUserRanking": "ログインユーザーランキング", + "ActiveAssetRanking": "アクティブ資産ランキング", + "AssetName": "資産名", + "NumberOfVisits": "アクセス回数", + "ranking": "ランキング", + "Today": "今日", + "Last7Days": "7日", + "Last30Days": "30日", "OnlineUsers": "オンラインユーザー", "ConnectUsers": "ユーザーの接続", "TimesWeekUnit": "回/週", diff --git a/src/i18n/langs/zh.json b/src/i18n/langs/zh.json index 94f6c6464..0383703f1 100644 --- a/src/i18n/langs/zh.json +++ b/src/i18n/langs/zh.json @@ -627,6 +627,23 @@ "CurrentConnections": "当前连接数", "TodayFailedConnections": "今日连接失败数", "OnlineSessions": "在线会话数", + "RealTimeData": "实时数据", + "UserAssetActivity": "用户/资产活跃情况", + "UserData": "用户数据", + "LoginUserToday": "今日登录用户数", + "AssetData": "资产数据", + "LoginAssetToday": "今日活跃资产数", + "WeekAdd": "本周新增", + "ProportionOfAssetTypes": "资产类型占比", + "Proportion": "占比", + "LoginUserRanking": "登录用户排名", + "ActiveAssetRanking": "活跃资产排名", + "AssetName": "资产名称", + "NumberOfVisits": "访问次数", + "ranking": "排名", + "Today": "今天", + "Last7Days": "近7天", + "Last30Days": "近30天", "OnlineUsers": "在线用户", "ConnectUsers": "连接用户", "TimesWeekUnit": "次/周", diff --git a/src/views/dashboard/AssetProportionSummary.vue b/src/views/dashboard/AssetProportionSummary.vue index 0fb84bf52..965fa4a67 100644 --- a/src/views/dashboard/AssetProportionSummary.vue +++ b/src/views/dashboard/AssetProportionSummary.vue @@ -18,8 +18,8 @@ export default { data() { return { titleConfig: { - title: '资产类型占比', - tip: '资产类型占比' + title: this.$t('dashboard.ProportionOfAssetTypes'), + tip: this.$t('dashboard.ProportionOfAssetTypes') }, config: { data: [] diff --git a/src/views/dashboard/DataSummary.vue b/src/views/dashboard/DataSummary.vue index c40dd0843..eb3a4fda6 100644 --- a/src/views/dashboard/DataSummary.vue +++ b/src/views/dashboard/DataSummary.vue @@ -26,19 +26,19 @@ export default { return { userConfig: { - title: '用户数据', - tip: '用户数据', - subTitle: '用户总数', + title: this.$t('dashboard.UserData'), + tip: this.$t('dashboard.UserData'), + subTitle: this.$t('dashboard.UsersTotal'), color: '#FFD260', - chartTitle: '今日登录用户数', + chartTitle: this.$t('dashboard.LoginUserToday'), data: [] }, assetConfig: { - title: '资产数据', - tip: '资产数据', - subTitle: '资产总数', + title: this.$t('dashboard.AssetData'), + tip: this.$t('dashboard.AssetData'), + subTitle: this.$t('dashboard.AssetsTotal'), color: themeColor, - chartTitle: '今日活跃资产数', + chartTitle: this.$t('dashboard.LoginAssetToday'), data: [] } } @@ -57,15 +57,15 @@ export default { `) const users = [ { name: this.$t('dashboard.ActiveUser'), value: data.total_count_users }, - { name: this.$t('dashboard.DisabledUser'), value: data.total_count_today_login_users } + { name: this.$t('dashboard.InActiveUser'), value: data.total_count_today_login_users } ] this.$set(this.userConfig, 'data', users) this.$set(this.userConfig, 'total', data.total_count_users) this.$set(this.userConfig, 'active', data.total_count_today_login_users) this.$set(this.userConfig, 'weekAdd', data.total_count_users_this_week) const assets = [ - { name: this.$t('dashboard.ActiveUser'), value: data.total_count_assets }, - { name: this.$t('dashboard.DisabledUser'), value: data.total_count_today_active_assets } + { name: this.$t('dashboard.ActiveAsset'), value: data.total_count_assets }, + { name: this.$t('dashboard.InActiveAsset'), value: data.total_count_today_active_assets } ] this.$set(this.assetConfig, 'data', assets) this.$set(this.assetConfig, 'total', data.total_count_assets) diff --git a/src/views/dashboard/RankSummary.vue b/src/views/dashboard/RankSummary.vue index e580846dd..984ca7297 100644 --- a/src/views/dashboard/RankSummary.vue +++ b/src/views/dashboard/RankSummary.vue @@ -20,34 +20,34 @@ export default { data() { return { userConfig: { - title: '登录用户排名', + title: this.$t('dashboard.LoginUserRanking'), url: '/api/v1/index/?dates_login_times_top10_users=1', - tip: '登录用户排名', + tip: this.$t('dashboard.LoginUserRanking'), data: 'dates_login_times_top10_users', columns: [ { prop: 'user', - label: '用户名' + label: this.$t('users.Username') }, { prop: 'total', - label: '登录次数' + label: this.$t('dashboard.LoginCount') } ] }, assetConfig: { - title: '活跃资产排名', + title: this.$t('dashboard.ActiveAssetRanking'), url: '/api/v1/index/?dates_login_times_top10_assets=1', - tip: '活跃资产排名', + tip: this.$t('dashboard.ActiveAssetRanking'), data: 'dates_login_times_top10_assets', columns: [ { prop: 'asset', - label: '资产名称' + label: this.$t('dashboard.AssetName') }, { prop: 'total', - label: '访问次数' + label: this.$t('dashboard.NumberOfVisits') } ] } diff --git a/src/views/dashboard/components/DataCard.vue b/src/views/dashboard/components/DataCard.vue index f02351422..ae37ae99d 100644 --- a/src/views/dashboard/components/DataCard.vue +++ b/src/views/dashboard/components/DataCard.vue @@ -8,7 +8,7 @@
{{ config.total }}
- 本周新增：{{ config.weekAdd }} + {{ $tc('dashboard.WeekAdd') }}：{{ config.weekAdd }} diff --git a/src/views/dashboard/components/LineChart.vue b/src/views/dashboard/components/LineChart.vue index 88b8b256a..1e2d40507 100644 --- a/src/views/dashboard/components/LineChart.vue +++ b/src/views/dashboard/components/LineChart.vue @@ -19,6 +19,7 @@ // eslint-disable-next-line no-unused-vars import * as echarts from 'echarts' import Title from './Title.vue' +import { mix } from '@/utils/theme/color' export default { name: 'LoginMetric', @@ -32,8 +33,8 @@ export default { data: function() { return { config: { - title: '用户/资产活跃情况 ', - tip: '用户/资产活跃情况 ' + title: this.$t('dashboard.UserAssetActivity'), + tip: this.$t('dashboard.UserAssetActivity') }, dataUrl: '', metricsData: { @@ -44,14 +45,22 @@ export default { } }, computed: { - themeColor() { + mixColors() { const documentStyle = document.documentElement.style + const primary = documentStyle.getPropertyValue('--color-primary') + const colorValue = primary.replace(/#/g, '') + const TwoLevelColor = mix(colorValue, 'ffffff', 38) + const ThreeLevelColor = mix(colorValue, 'ffffff', 20) + const shadowColor = mix(colorValue, 'ffffff', 1) return { - primary: documentStyle.getPropertyValue('--color-primary') + primary, + TwoLevelColor, + ThreeLevelColor, + shadowColor } }, options() { - const { primary } = this.themeColor + const { primary, TwoLevelColor, ThreeLevelColor, shadowColor } = this.mixColors return { title: { show: false @@ -149,20 +158,20 @@ export default { 1, [{ offset: 0, - color: 'rgba(50, 220, 182, 0.6)' + color: primary }, { offset: 0.6, - color: 'rgba(50, 220, 182, 0.2)' + color: TwoLevelColor }, { offset: 0.8, - color: 'rgba(50, 220, 182, 0.1)' + color: ThreeLevelColor } ], false ), - shadowColor: 'rgba(50, 220, 182, 0.1)', - shadowBlur: 6 + shadowColor: shadowColor, + shadowBlur: 5 } }, data: this.metricsData.dates_metrics_total_count_active_users diff --git a/src/views/dashboard/components/ProgressChart.vue b/src/views/dashboard/components/ProgressChart.vue index 8c2da2a6c..fa232fcf7 100644 --- a/src/views/dashboard/components/ProgressChart.vue +++ b/src/views/dashboard/components/ProgressChart.vue @@ -12,6 +12,8 @@