perf: 优化首页统计数据，饼图替换成证书数量统计

packages/ui/certd-client/src/locales/langs/en-US/certd.ts

@@ -88,6 +88,14 @@ export default {
     helpDoc: "Help Docs",
     pipelineCount: "Number of Certificate Pipelines",
     noPipeline: "You have no certificate pipelines yet",
+    enabledCount: "Enabled",
+    disabledCount: "Disabled",
+    certCount: "Number of Certificates",
+    noCert: "You have no certificates yet",
+    manageCert: "View Certificates",
+    certExpiringCount: "Soon-to-Expire",
+    certExpiredCount: "Expired",
+    certNoExpireCount: "Not Expired",
     createNow: "Create Now",
     managePipeline: "Manage Pipelines",
     pipelineStatus: "Pipeline Status",

packages/ui/certd-client/src/locales/langs/zh-CN/certd.ts

@@ -93,7 +93,16 @@ export default {
     alertMessage: "证书和授权为敏感信息，不要使用来历不明的在线Certd服务和镜像，以免泄露；请务必私有化部署使用，认准官方版本发布渠道：",
     helpDoc: "帮助文档",
     pipelineCount: "证书流水线数量",
+    enabledCount: "已启用",
+    disabledCount: "已禁用",
     noPipeline: "您还没有证书流水线",
+    certCount: "证书数量",
+    certExpiringCount: "即将过期",
+    certExpiredCount: "已过期",
+    certNoExpireCount: "未过期",
+    noCert: "还没有证书",
+    manageCert: "查看证书",
+
     createNow: "立即创建",
     managePipeline: "管理流水线",
     pipelineStatus: "流水线状态",

packages/ui/certd-client/src/views/framework/home/dashboard/index.vue

@@ -67,7 +67,7 @@
     <div class="statistic-data m-20">
       <a-row :gutter="20" class="flex-wrap">
         <a-col :md="6" :xs="24">
-          <statistic-card :title="t('certd.dashboard.pipelineCount')" :count="count.pipelineCount">
+          <statistic-card :title="t('certd.dashboard.pipelineCount')" :count="count.pipelineCount" :sub-counts="count.pipelineEnableCount">
             <template v-if="count.pipelineCount === 0" #default>
               <div class="flex-center flex-1 flex-col">
                 <div style="font-size: 18px; font-weight: 700">{{ t("certd.dashboard.noPipeline") }}</div>
@@ -79,10 +79,22 @@
             </template>
           </statistic-card>
         </a-col>
-        <a-col :md="6" :xs="24">
+        <!-- <a-col :md="6" :xs="24">
           <statistic-card :title="t('certd.dashboard.pipelineStatus')" :footer="false">
             <pie-count v-if="count.pipelineStatusCount" :data="count.pipelineStatusCount"></pie-count>
           </statistic-card>
+        </a-col> -->
+        <a-col :md="6" :xs="24">
+          <statistic-card :title="t('certd.dashboard.certCount')" :count="count.certCount" :sub-counts="count.certStatusCount">
+            <template v-if="count.certCount === 0" #default>
+              <div class="flex-center flex-1 flex-col">
+                <div style="font-size: 18px; font-weight: 700">{{ t("certd.dashboard.noCert") }}</div>
+              </div>
+            </template>
+            <template #footer>
+              <router-link to="/certd/monitor/cert" class="flex"> <fs-icon icon="ion:settings-outline" class="mr-5 fs-16" /> {{ t("certd.dashboard.manageCert") }} </router-link>
+            </template>
+          </statistic-card>
         </a-col>
         <a-col :md="6" :xs="24">
           <statistic-card :title="t('certd.dashboard.recentRun')" :footer="false">
@@ -242,6 +254,19 @@ function transformStatusCount() {
     }
   }
   count.value.pipelineStatusCount = result;
+
+  const pipelineEnableCount = count.value.pipelineEnableCount;
+  count.value.pipelineEnableCount = [
+    { name: t("certd.dashboard.enabledCount"), value: pipelineEnableCount.enabled, color: "green" },
+    { name: t("certd.dashboard.disabledCount"), value: pipelineEnableCount.disabled, color: "gray" },
+  ];
+  const certCount = count.value.certCount;
+  count.value.certStatusCount = [
+    { name: t("certd.dashboard.certExpiredCount"), value: certCount.expired, color: "red", checkIcon: "mingcute:warning-fill:#f44336" },
+    { name: t("certd.dashboard.certExpiringCount"), value: certCount.expiring, color: "yellow", checkIcon: "mingcute:alert-fill:#ff9800" },
+    { name: t("certd.dashboard.certNoExpireCount"), value: certCount.notExpired, color: "green" },
+  ];
+  count.value.certCount = certCount.total;
 }
 async function loadCount() {
   count.value = await GetStatisticCount();

packages/ui/certd-client/src/views/framework/home/dashboard/statistic-card.vue

@@ -8,7 +8,27 @@
         </div>
         <div class="content">
           <div v-if="!slots.default" class="statistic">
-            <div v-if="count !== 0" class="value">{{ count }}</div>
+            <div v-if="count !== 0" class="value flex items-center w-full">
+              <div class="total flex-center flex-1 flex-col">
+                <span>{{ count }}</span>
+                <span class="title">{{ title }}</span>
+              </div>
+              <a-divider type="vertical h-10"></a-divider>
+              <div class="sub flex-1 flex-col h-[80%] flex-between pl-4">
+                <div v-for="item in subCounts" :key="item.name" class="sub-item flex justify-center w-full">
+                  <div class="flex items-center w-[60%] ellipsis overflow-hidden">
+                    <div class="status-indicator" :class="`bg-${item.color}`"></div>
+                    {{ item.name }}：
+                  </div>
+                  <div class="w-[40%] flex items-center justify-center relative">
+                    <span class="icon-text">{{ item.value }}</span>
+                    <div v-if="item.value !== 0 && item.checkIcon" class="ml-2 flex items-center absolute right-0">
+                      <fs-icon :icon="item.checkIcon" class="fs-icon"></fs-icon>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
             <a-empty v-else></a-empty>
           </div>
           <slot></slot>
@@ -25,51 +45,103 @@ import { FsIcon } from "@fast-crud/fast-crud";
 const props = defineProps<{
   title: string;
   count?: number;
+  subCounts?: {
+    name: string;
+    value: number;
+    color: string;
+    checkIcon?: string;
+  }[];
 }>();
 const slots = defineSlots();
 </script>
 <style lang="less">
 .statistic-card {
   margin-bottom: 10px;
+
   .icon-text {
     display: inline-flex;
     justify-content: left;
     align-items: center;
+
     .fs-icon {
       margin-right: 5px;
       font-size: 14px;
     }
   }
+
   .data-item {
     display: flex;
     flex-direction: column;
     height: 188px;
+
     .header {
       display: flex;
       justify-content: space-between;
       //padding-bottom: 10px;
       color: #8077a4;
     }
+
     .content {
       display: flex;
       flex-direction: column;
       flex: 1;
+
       .statistic {
         height: 100%;
         display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: center;
+
         .value {
           font-size: 50px;
           font-weight: 700;
-          color: #2c254e;
+          color: #323232;
+
+          .total {
+            .title {
+              font-size: 14px;
+              font-weight: 400;
+              color: #8077a4;
+            }
+          }
+
+          .sub-item {
+            font-size: 14px;
+
+            .status-indicator {
+              width: 10px;
+              height: 10px;
+              border-radius: 50%;
+              margin-right: 12px;
+              flex-shrink: 0;
+            }
+
+            .bg-green {
+              background: linear-gradient(90deg, #4caf50, #8bc34a);
+            }
+
+            .bg-red {
+              background: linear-gradient(90deg, #f44336, #e57373);
+            }
+
+            .bg-yellow {
+              background: linear-gradient(90deg, #ff9800, #ffc107);
+            }
+            .bg-blue {
+              background: linear-gradient(90deg, #2196f3, #64b5f6);
+            }
+            .bg-gray {
+              background: linear-gradient(90deg, #9e9e9e, #bdbdbd);
+            }
+          }
         }
       }
 
       x-vue-echarts {
       }
     }
+
     .footer {
       color: #8077a4;
       font-size: 12px;
@@ -81,9 +153,11 @@ const slots = defineSlots();
       border-style: dashed;
       border-width: 1px 0 0;
       padding-top: 15px;
+
       > * {
         cursor: pointer;
       }
+
       margin-bottom: -10px;
     }
   }

packages/ui/certd-server/src/controller/user/dashboard/statistic-controller.ts

@@ -4,6 +4,7 @@ import { UserService } from '../../../modules/sys/authority/service/user-service
 import { RoleService } from '../../../modules/sys/authority/service/role-service.js';
 import { PipelineService } from '../../../modules/pipeline/service/pipeline-service.js';
 import { HistoryService } from '../../../modules/pipeline/service/history-service.js';
+import { CertInfoService } from '../../../modules/monitor/index.js';
 
 export type ChartItem = {
   name: string;
@@ -12,7 +13,17 @@ export type ChartItem = {
 export type UserStatisticCount = {
   pipelineCount?: number;
   pipelineStatusCount?: ChartItem[];
+  pipelineEnableCount?: {
+    enabled: number;
+    disabled: number;
+  };
   historyCountPerDay: ChartItem[];
+  certCount?: {
+    total: number;
+    expired: number;
+    expiring: number;
+    notExpired: number;
+  };
   expiringList: any[];
 };
 /**
@@ -30,15 +41,25 @@ export class StatisticController extends BaseController {
   @Inject()
   historyService: HistoryService;
 
+  @Inject()
+  certInfoService: CertInfoService;
+
   @Post('/count', { summary: Constants.per.authOnly })
   public async count() {
     const pipelineCount = await this.pipelineService.count({ userId: this.getUserId() });
     const pipelineStatusCount = await this.pipelineService.statusCount({ userId: this.getUserId() });
+    const pipelineEnableCount = await this.pipelineService.enableCount({ userId: this.getUserId() });
+
     const historyCount = await this.historyService.countPerDay({ userId: this.getUserId(), days: 7 });
     const expiringList = await this.pipelineService.latestExpiringList({ userId: this.getUserId(), count: 5 });
+
+    const certCount = await this.certInfoService.count({ userId: this.getUserId() });
+
     const count: UserStatisticCount = {
       pipelineCount,
       pipelineStatusCount,
+      pipelineEnableCount,
+      certCount,
       historyCountPerDay: historyCount,
       expiringList,
     };

packages/ui/certd-server/src/modules/monitor/service/cert-info-service.ts

@@ -1,7 +1,7 @@
 import { Provide, Scope, ScopeEnum } from "@midwayjs/core";
 import { BaseService, CodeException, Constants, PageReq } from "@certd/lib-server";
 import { InjectEntityModel } from "@midwayjs/typeorm";
-import { Repository } from "typeorm";
+import { Between, IsNull, LessThan, Not, Repository } from "typeorm";
 import { CertInfoEntity } from "../entity/cert-info.js";
 import { utils } from "@certd/basic";
 import { CertInfo, CertReader } from "@certd/plugin-cert";
@@ -181,6 +181,36 @@ export class CertInfoService extends BaseService<CertInfoEntity> {
         pipelineId,
       },
     });
+  }
 
+  async count({ userId }: { userId: number }) {
+    const total = await this.repository.count({
+      where: {
+        userId,
+        expiresTime: Not(IsNull()),
+      },
+    });
+
+    const expired = await this.repository.count({
+      where: {
+        userId,
+        expiresTime: LessThan(new Date().getTime()),
+      },
+    });
+
+    const expiring = await this.repository.count({
+      where: {
+        userId,
+        expiresTime: Between(new Date().getTime(), new Date().getTime() + 15 * 24 * 60 * 60 * 1000),
+      },
+    });
+
+    const notExpired = total - expired - expiring;
+    return {
+      total,
+      expired,
+      expiring,
+      notExpired,
+    };
   }
 }

packages/ui/certd-server/src/modules/pipeline/service/pipeline-service.ts

@@ -771,6 +771,26 @@ export class PipelineService extends BaseService<PipelineEntity> {
     return statusCount;
   }
 
+  async enableCount(param: { userId?: any } = {}) {
+    const statusCount = await this.repository
+      .createQueryBuilder()
+      .select("disabled")
+      .addSelect("count(1)", "count")
+      .where({
+        userId: param.userId
+      })
+      .groupBy("disabled")
+      .getRawMany();
+    const result = {
+      enabled: 0,
+      disabled: 0,
+    };
+    for (const item of statusCount) {
+      result[item.disabled ? "disabled" : "enabled"] = parseInt(item.count);
+    }
+    return result;
+  }
+
   async latestExpiringList({ userId }: any) {
     let list = await this.repository.find({
       select: {