perf: 管理控制台数据统计

packages/ui/certd-client/src/views/certd/mine/user-profile.vue

@@ -6,6 +6,12 @@
     <div class="p-10">
       <a-descriptions title="" bordered>
         <a-descriptions-item label="用户名">{{ userInfo.username }}</a-descriptions-item>
+        <a-descriptions-item label="头像">
+          <a-avatar v-if="userInfo.avatar" size="large" :src="'/api/basic/file/download?&key=' + userInfo.avatar" style="background-color: #eee"> </a-avatar>
+          <a-avatar v-else size="large" style="background-color: #00b4f5">
+            {{ userInfo.username }}
+          </a-avatar>
+        </a-descriptions-item>
         <a-descriptions-item label="昵称">{{ userInfo.nickName }}</a-descriptions-item>
         <a-descriptions-item label="邮箱">{{ userInfo.email }}</a-descriptions-item>
         <a-descriptions-item label="手机号">{{ userInfo.phoneCode }}{{ userInfo.mobile }}</a-descriptions-item>

packages/ui/certd-client/src/views/framework/home/dashboard/charts/day-count.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-chart class="chart" :option="option" autoresize />
+  <v-chart v-if="props.data" class="chart" :option="option" autoresize />
 </template>
 
 <script setup lang="ts">
@@ -8,45 +8,48 @@ import { CanvasRenderer } from "echarts/renderers";
 import { PieChart, LineChart } from "echarts/charts";
 import { TitleComponent, TooltipComponent, LegendComponent, GridComponent } from "echarts/components";
 import VChart, { THEME_KEY } from "vue-echarts";
-import { ref, provide, defineProps } from "vue";
+import { ref, provide, defineProps, computed } from "vue";
 import { ChartItem } from "/@/views/framework/home/dashboard/charts/d";
 
 use([CanvasRenderer, PieChart, LineChart, TitleComponent, TooltipComponent, GridComponent, LegendComponent]);
 
 provide(THEME_KEY, "");
 
-const props = defineProps<{
-  data: ChartItem[];
-}>();
-
-const dates = props.data.map((item) => {
-  return item.name;
-});
-const counts = props.data.map((item) => {
-  return item.value;
-});
-
-var noDataOption = {
-  // 使用系统提供的 noData 图形
-  graphic: {
-    type: "text",
-    left: "center",
-    top: "center",
-    style: {
-      text: "无数据",
-      textAlign: "center",
-      fill: "#ccc"
+const props = withDefaults(
+  defineProps<{
+    data: ChartItem[];
+    title: string;
+  }>(),
+  {
+    data: () => {
+      return [];
     }
   }
-};
+);
 
+const dates = computed(() => {
+  return props.data.map((item) => {
+    return item.name;
+  });
+});
+const counts = computed(() => {
+  return props.data.map((item) => {
+    return item.value;
+  });
+});
 const option = ref({
-  noDataSchema: noDataOption,
   color: ["#91cc75", "#73c0de", "#ee6666", "#fac858", "#3ba272", "#fc8452", "#9a60b4", "#ea7ccc", "#5470c6"],
-  // title: {
-  //   text: "",
-  //   left: "center"
-  // },
+  title: {
+    show: props.data.length === 0, // 没数据才显示
+    extStyle: {
+      color: "grey",
+      fontSize: 20
+    },
+    text: "暂无数据",
+    left: "center",
+    top: "center"
+  },
+
   tooltip: {
     trigger: "item"
   },
@@ -83,7 +86,7 @@ const option = ref({
   ],
   series: [
     {
-      name: "运行次数",
+      name: props.title,
       type: "line",
       stack: "Total",
       label: {

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

@@ -62,7 +62,7 @@
         </a-col>
         <a-col :span="6">
           <statistic-card title="最近运行统计" :footer="false">
-            <day-count v-if="count.runningCount" :data="count.runningCount"></day-count>
+            <day-count v-if="count.historyCountPerDay" :data="count.historyCountPerDay" title="运行次数"></day-count>
           </statistic-card>
         </a-col>
         <a-col :span="6">
@@ -153,9 +153,9 @@ function transformStatusCount() {
   ];
   const result = [];
   for (const item of sorted) {
-    const find = data.find((v: any) => v.name === item.name);
+    const find = data.find((v: any) => v.status === item.name);
     if (find) {
-      result.push({ name: item.label, value: find.value });
+      result.push({ name: item.label, value: find.count });
     } else {
       result.push({ name: item.label, value: 0 });
     }
@@ -165,6 +165,12 @@ function transformStatusCount() {
 async function loadCount() {
   count.value = await GetStatisticCount();
   transformStatusCount();
+  count.value.historyCountPerDay = count.value.historyCountPerDay.map((item) => {
+    return {
+      name: item.date,
+      value: item.count
+    };
+  });
 }
 
 async function loadPluginGroups() {

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

@@ -8,7 +8,8 @@
         </div>
         <div class="content">
           <div v-if="!slots.default" class="statistic">
-            <div class="value">{{ count }}</div>
+            <div v-if="count !== 0" class="value">{{ count }}</div>
+            <a-empty v-else></a-empty>
           </div>
           <slot></slot>
         </div>

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>