fix: 饼图展示调整 (#1727)

TencentBlueKing · Nov 14, 2024 · 89f3c36 · 89f3c36
1 parent f5a711d
commit 89f3c36
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 19 deletions.
diff --git a/webfe/package_vue/src/language/lang/en.js b/webfe/package_vue/src/language/lang/en.js
@@ -1773,7 +1773,7 @@ export default {
   '】，我们将单独处理您的迁移请求。': '】, we will handle your migration request separately.',
   应用预发布环境未下架: 'APP stag env not archived',
   '回滚失败，请联系': 'Rollback failed, please contact',
-  '应用[{name}] 正在进行{type}...': 'App [{name}] is in progress for {type}...',
+  '应用[{name}] 正在进行{type}...': 'APP [{name}] is in progress for {type}...',
   API资源管理: 'API Resource Management',
   widget配置: 'Widget configuration',
   'Bamboo 支持基本的流程启动、暂停、继续、重试和撤销，以及流程串行、并行、分支、循环、打回控制等进阶特性。': 'Bamboo supports basic process start, pause, resume, retry and undo, as well as advanced features such as process serial, parallel, branching, looping, and hit-and-run control.',
@@ -2337,7 +2337,7 @@ export default {
   源代码: 'Source Code',
   可观测性: 'Observability',
   访问统计: 'Statistics',
-  应用配置: 'App Settings',
+  应用配置: 'APP Settings',
   模块配置: 'Module Settings',
   事件查询: 'Events',
   '请输入不包含标签(tag)的镜像仓库地址': 'Please enter the mirror warehouse address without tags',
@@ -2827,20 +2827,22 @@ export default {
   灰度报告: 'Gray report',
   '配置 Metric 采集后，您可以在 {s} 功能中进行配置并查看您的仪表盘。': 'After configuring Metric collection, you can configure and view your dashboard in the {s} feature.',
   '查看 Metric 指引': 'View Metric guide',
-  '新建 Metric 参数': 'Create new Metric parameter',
+  '新建 Metric 参数': 'New Metric parameter',
   蓝鲸监控仪表盘: 'BlueKing Monitoring Dashboard',
   采集: 'Collection',
   参数: 'Parameter',
   使用指引: 'Usage guide',
-  应用总览: 'App Overview',
+  应用总览: 'APP Overview',
   告警情况: 'Alert Status',
-  应用情况: 'App Status',
+  应用情况: 'APP Status',
   总告警数: 'Total Alerts',
   慢查询告警数: 'Slow Query Alerts',
-  总应用数: 'Total Apps',
-  闲置应用数: 'Idle Apps',
-  配置不当应用数: 'Misconfigured Apps',
-  应用详情: 'App Details',
+  总应用数: 'Total APPs',
+  闲置应用数: 'Idle APPs',
+  其他告警数: 'Other Alerts',
+  活跃应用数: 'Active APPs',
+  配置不当应用数: 'Misconfigured APPs',
+  应用详情: 'APP Details',
   最近操作时间: 'Recent Operation Time',
   健康: 'Healthy',
   无主: 'Orphaned',

diff --git a/webfe/package_vue/src/language/lang/zh.js b/webfe/package_vue/src/language/lang/zh.js
@@ -2976,6 +2976,8 @@ export default {
   慢查询告警数: '慢查询告警数',
   总应用数: '总应用数',
   闲置应用数: '闲置应用数',
+  其他告警数: '其他告警数',
+  活跃应用数: '活跃应用数',
   配置不当应用数: '配置不当应用数',
   应用详情: '应用详情',
   最近操作时间: '最近操作时间',

diff --git a/webfe/package_vue/src/views/dev-center/home/app-overview/index.vue b/webfe/package_vue/src/views/dev-center/home/app-overview/index.vue
@@ -136,17 +136,19 @@ export default {
       return this.$store.state.baseInfo.alarmChartData;
     },
     homeAlarmData() {
+      const totalCount = this.alarmChartData.count;
+      const slowQueryCount = this.alarmChartData.slowQueryCount;
       const data = [
         {
-          value: this.alarmChartData.slowQueryCount,
+          value: slowQueryCount,
           name: this.$t('慢查询告警数'),
           type: 'alarm',
           colorType: 'high',
           color: '#F5876C',
         },
         {
-          value: this.alarmChartData.count,
-          name: this.$t('总告警数'),
+          value: totalCount - slowQueryCount,
+          name: totalCount === 0 || slowQueryCount === 0 ? this.$t('总告警数') : this.$t('其他告警数'),
           type: 'alarm',
           colorType: 'low',
           color: '#FFC685',
@@ -159,24 +161,26 @@ export default {
     },
     // 告警情况图表配置
     homeAlertChartOption() {
-      const colors = this.homeAlarmData.map(v => v.color);
+      const colors = this.homeAlarmData.map((v) => v.color);
       return alertChartOption(this.homeAlarmData, colors);
     },
     appChartData() {
+      const totalAppCount = this.chartAppInfo.total;
+      const idleAppCount = this.appChartInfo.idleAppCount;
       const data = [
         {
-          value: this.appChartInfo.idleAppCount,
+          value: idleAppCount,
           name: this.$t('闲置应用数'),
           type: 'app',
           colorType: 'high',
-          color: '#FFA66B'
+          color: '#FFA66B',
         },
         {
-          value: this.chartAppInfo.total,
-          name: this.$t('总应用数'),
+          value: totalAppCount - idleAppCount,
+          name: totalAppCount === 0 || idleAppCount === 0 ? this.$t('总应用数') : this.$t('活跃应用数'),
           type: 'app',
           colorType: 'low',
-          color: '#3E96C2'
+          color: '#3E96C2',
         },
       ];
       if (data.find((v) => v.colorType === 'high' && v.value === 0)) {
@@ -186,7 +190,7 @@ export default {
     },
     // 应用情况图表配置
     appChartOption() {
-      const colors = this.appChartData.map(v => v.color);
+      const colors = this.appChartData.map((v) => v.color);
       return alertChartOption(this.appChartData, colors);
     },
     platformFeature() {