perf: 管理控制台数据统计

packages/ui/certd-client/src/views/sys/console/api.ts

@@ -0,0 +1,8 @@
+import { request } from "/@/api/service";
+
+export async function GetStatisticCount() {
+  return await request({
+    url: "/sys/statistic/count",
+    method: "POST"
+  });
+}

packages/ui/certd-client/src/views/sys/console/index.vue

@@ -0,0 +1,77 @@
+<template>
+  <fs-page class="page-sys-console">
+    <template #header>
+      <div class="title">控制台</div>
+    </template>
+    <div>
+      <div class="statistic-data m-20">
+        <a-row :gutter="20">
+          <a-col :span="6">
+            <statistic-card title="用户总数" :count="count.userCount">
+              <template #footer>
+                <router-link to="/sys/authority/user" class="flex"><fs-icon icon="ion:settings-outline" class="mr-5 fs-16" /> 管理用户</router-link>
+              </template>
+            </statistic-card>
+          </a-col>
+          <a-col :span="6">
+            <statistic-card title="用户增长趋势">
+              <day-count v-if="count.userRegisterCountPerDay" :data="count.userRegisterCountPerDay" title="新增用户"></day-count>
+            </statistic-card>
+          </a-col>
+          <a-col :span="6">
+            <statistic-card title="全站流水线总数" :count="count.pipelineCount">
+              <template #footer>
+                <router-link to="/certd/pipeline" class="flex"><fs-icon icon="ion:settings-outline" class="mr-5 fs-16" /> 管理流水线</router-link>
+              </template>
+            </statistic-card>
+          </a-col>
+          <a-col :span="6">
+            <statistic-card title="流水线增长趋势">
+              <day-count v-if="count.pipelineCreateCountPerDay" :data="count.pipelineCreateCountPerDay" title="新增流水线"></day-count>
+            </statistic-card>
+          </a-col>
+          <a-col :span="6">
+            <statistic-card title="最近运行统计" :footer="false">
+              <day-count v-if="count.historyCountPerDay" :data="count.historyCountPerDay" title="运行次数"></day-count>
+            </statistic-card>
+          </a-col>
+        </a-row>
+      </div>
+    </div>
+  </fs-page>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, ref } from "vue";
+import { FsIcon } from "@fast-crud/fast-crud";
+import StatisticCard from "/@/views/framework/home/dashboard/statistic-card.vue";
+import DayCount from "/@/views/framework/home/dashboard/charts/day-count.vue";
+import { GetStatisticCount } from "./api";
+
+const count = ref({});
+function transformCountPerDayToChartData(key) {
+  count.value[key] = count.value[key].map((item) => {
+    return {
+      name: item.date,
+      value: item.count
+    };
+  });
+}
+async function loadCount() {
+  count.value = await GetStatisticCount();
+  transformCountPerDayToChartData("userRegisterCountPerDay");
+  transformCountPerDayToChartData("pipelineCreateCountPerDay");
+  transformCountPerDayToChartData("historyCountPerDay");
+}
+
+onMounted(async () => {
+  await loadCount();
+});
+</script>
+<style lang="less">
+.page-sys-console {
+  .fs-page-content {
+    background-color: #eee;
+  }
+}
+</style>