perf: 管理控制台数据统计

docker/run/docker-compose.yaml

@@ -23,7 +23,7 @@ services:
 #    extra_hosts:
       #  ↓↓↓↓ ---------------------------------------------------------- 这里可以配置自定义hosts，外网域名可以指向本地局域网ip地址
 #      - "localdomain.comm:192.168.1.3"
-    environment: # 环境变量
+    environment:
       - TZ=Asia/Shanghai
       # 设置环境变量即可自定义certd配置
       # 配置项见： packages/ui/certd-server/src/config/config.default.ts
@@ -35,7 +35,6 @@ services:
       #- certd_https_cert=./data/ssl/cert.crt
       #- certd_https_enabled=true
       #- certd_https_port=7002
-      -
       #                             ↓↓↓↓ ------------------------------- 使用postgresql数据库
 #      - certd_flyway_scriptDir=./db/migration-pg               # 升级脚本目录
 #      - certd_typeorm_dataSource_default_type=postgres         # 数据库类型

packages/ui/certd-client/src/components/vip-button/index.vue

@@ -105,7 +105,7 @@ const vipTypeDefine = {
   comm: {
     title: "商业版",
     type: "comm",
-    privilege: ["拥有专业版所有特权", "允许商用", "修改logo、标题", "多用户无限制", "支持用户支付（敬请期待）"]
+    privilege: ["拥有专业版所有特权", "允许商用，可修改logo、标题", "数据统计", "插件管理", "多用户无限制", "支持用户支付（敬请期待）"]
   }
 };
 
@@ -256,7 +256,7 @@ function openUpgrade() {
     padding: 10px;
     border: 1px solid #eee;
     border-radius: 5px;
-    height: 160px;
+    height: 170px;
     //background-color: rgba(250, 237, 167, 0.79);
     &.current {
       border-color: green;

packages/ui/certd-client/src/router/source/modules/sys.ts

@@ -13,6 +13,20 @@ export const sysResources = [
       permission: "sys:settings:view"
     },
     children: [
+      {
+        title: "控制台",
+        name: "SysConsole",
+        path: "/sys/console",
+        component: "/sys/console/index.vue",
+        meta: {
+          show: () => {
+            const settingStore = useSettingStore();
+            return settingStore.isComm;
+          },
+          icon: "ion:speedometer-outline",
+          permission: "sys:auth:user:view"
+        }
+      },
       {
         title: "用户管理",
         name: "UserManager",

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<{
+const props = withDefaults(
+  defineProps<{
     data: ChartItem[];
-}>();
+    title: string;
+  }>(),
+  {
+    data: () => {
+      return [];
+    }
+  }
+);
 
-const dates = props.data.map((item) => {
+const dates = computed(() => {
+  return props.data.map((item) => {
     return item.name;
   });
-const counts = props.data.map((item) => {
+});
+const counts = computed(() => {
+  return props.data.map((item) => {
     return item.value;
   });
-
+});
-var noDataOption = {
-  // 使用系统提供的 noData 图形
-  graphic: {
-    type: "text",
-    left: "center",
-    top: "center",
-    style: {
-      text: "无数据",
-      textAlign: "center",
-      fill: "#ccc"
-    }
-  }
-};
-
 const option = ref({
-  noDataSchema: noDataOption,
   color: ["#91cc75", "#73c0de", "#ee6666", "#fac858", "#3ba272", "#fc8452", "#9a60b4", "#ea7ccc", "#5470c6"],
-  // title: {
+  title: {
-  //   text: "",
+    show: props.data.length === 0, // 没数据才显示
-  //   left: "center"
+    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>

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

@@ -1,4 +1,4 @@
-import { ALL, Body, Controller, Inject, Post, Provide } from '@midwayjs/core';
+import { Controller, Inject, Post, Provide } from '@midwayjs/core';
 import { BaseController, Constants } from '@certd/lib-server';
 import { UserService } from '../../modules/sys/authority/service/user-service.js';
 import { RoleService } from '../../modules/sys/authority/service/role-service.js';
@@ -12,7 +12,7 @@ export type ChartItem = {
 export type UserStatisticCount = {
   pipelineCount?: number;
   pipelineStatusCount?: ChartItem[];
-  runningCount: ChartItem[];
+  historyCountPerDay: ChartItem[];
   expiringList: any[];
 };
 /**
@@ -33,36 +33,15 @@ export class StatisticController extends BaseController {
   @Post('/count', { summary: Constants.per.authOnly })
   public async count() {
     const pipelineCount = await this.pipelineService.count({ userId: this.getUserId() });
-    let pipelineStatusCount = await this.pipelineService.statusCount({ userId: this.getUserId() });
+    const pipelineStatusCount = await this.pipelineService.statusCount({ userId: this.getUserId() });
-    pipelineStatusCount = pipelineStatusCount.map(item => {
+    const historyCount = await this.historyService.countPerDay({ userId: this.getUserId(), days: 7 });
-      return {
-        name: item.status,
-        value: item.count,
-      };
-    });
-
-    const historyCount = await this.historyService.dayCount({ userId: this.getUserId(), days: 7 });
-    const runningCount = historyCount.map(item => {
-      return {
-        name: item.date,
-        value: item.count,
-      };
-    });
-
     const expiringList = await this.pipelineService.latestExpiringList({ userId: this.getUserId(), count: 5 });
     const count: UserStatisticCount = {
       pipelineCount,
       pipelineStatusCount,
-      runningCount,
+      historyCountPerDay: historyCount,
       expiringList,
     };
     return this.ok(count);
   }
-
-  @Post('/changePassword', { summary: Constants.per.authOnly })
-  public async changePassword(@Body(ALL) body: any) {
-    const userId = this.getUserId();
-    await this.userService.changePassword(userId, body);
-    return this.ok({});
-  }
 }

packages/ui/certd-server/src/controller/sys/console/statistic-controller.ts

@@ -0,0 +1,51 @@
+import { Controller, Inject, Post, Provide } from '@midwayjs/core';
+import { BaseController } from '@certd/lib-server';
+import { UserService } from '../../../modules/sys/authority/service/user-service.js';
+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';
+
+export type ChartItem = {
+  name: string;
+  value: number;
+};
+export type SysStatisticCount = {
+  userCount: number;
+  pipelineCount?: number;
+  historyCountPerDay: ChartItem[];
+  userRegisterCountPerDay: ChartItem[];
+  pipelineCreateCountPerDay: ChartItem[];
+};
+/**
+ */
+@Provide()
+@Controller('/api/sys/statistic/')
+export class SysStatisticController extends BaseController {
+  @Inject()
+  userService: UserService;
+  @Inject()
+  roleService: RoleService;
+
+  @Inject()
+  pipelineService: PipelineService;
+  @Inject()
+  historyService: HistoryService;
+
+  @Post('/count', { summary: 'sys:settings:view' })
+  public async count() {
+    const userCount = await this.userService.count();
+    const userRegisterCountPerDay = await this.userService.registerCountPerDay({ days: 7 });
+    const pipelineCreateCountPerDay = await this.pipelineService.createCountPerDay({ days: 7 });
+    const pipelineCount = await this.pipelineService.count({});
+    const historyCountPerDay = await this.historyService.countPerDay({ days: 7 });
+
+    const count: SysStatisticCount = {
+      userCount,
+      userRegisterCountPerDay,
+      pipelineCount,
+      pipelineCreateCountPerDay,
+      historyCountPerDay,
+    };
+    return this.ok(count);
+  }
+}

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

@@ -175,17 +175,21 @@ export class HistoryService extends BaseService<HistoryEntity> {
     }
   }
 
-  async dayCount(param: { days: number; userId: any }) {
+  async countPerDay(param: { days: number; userId?: any }) {
     const todayEnd = dayjs().endOf('day');
+    const where: any = {
+      // 0点
+      // userId: param.userId,
+      createTime: MoreThan(todayEnd.add(-param.days, 'day').toDate()),
+    };
+    if (param.userId > 0) {
+      where.userId = param.userId;
+    }
     const result = await this.getRepository()
       .createQueryBuilder('main')
       .select('date(main.createTime)  AS date') // 将UNIX时间戳转换为日期
       .addSelect('COUNT(*) AS count')
-      .where({
+      .where(where)
-        // 0点
-        userId: param.userId,
-        createTime: MoreThan(todayEnd.add(-param.days, 'day').toDate()),
-      })
       .groupBy('date')
       .getRawMany();
 

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

@@ -1,6 +1,6 @@
 import { Config, Inject, Provide, Scope, ScopeEnum, sleep } from '@midwayjs/core';
 import { InjectEntityModel } from '@midwayjs/typeorm';
-import { In, Repository } from 'typeorm';
+import { In, MoreThan, Repository } from 'typeorm';
 import { BaseService, NeedVIPException, PageReq, SysPublicSettings, SysSettingsService } from '@certd/lib-server';
 import { PipelineEntity } from '../entity/pipeline.js';
 import { PipelineDetail } from '../entity/vo/pipeline-detail.js';
@@ -19,6 +19,7 @@ import { AccessGetter } from './access-getter.js';
 import { CnameRecordService } from '../../cname/service/cname-record-service.js';
 import { CnameProxyService } from './cname-proxy-service.js';
 import { PluginConfigGetter } from '../../plugin/service/plugin-config-getter.js';
+import dayjs from 'dayjs';
 
 const runningTasks: Map<string | number, Executor> = new Map();
 const freeCount = 10;
@@ -473,7 +474,7 @@ export class PipelineService extends BaseService<PipelineEntity> {
     await this.historyLogService.addOrUpdate(logEntity);
   }
 
-  async count(param: { userId: any }) {
+  async count(param: { userId?: any }) {
     const count = await this.repository.count({
       where: {
         userId: param.userId,
@@ -482,7 +483,7 @@ export class PipelineService extends BaseService<PipelineEntity> {
     return count;
   }
 
-  async statusCount(param: { userId: any }) {
+  async statusCount(param: { userId?: any } = {}) {
     const statusCount = await this.repository
       .createQueryBuilder()
       .select('status')
@@ -516,4 +517,20 @@ export class PipelineService extends BaseService<PipelineEntity> {
 
     return list.slice(0, 5);
   }
+
+  async createCountPerDay(param: { days: number } = { days: 7 }) {
+    const todayEnd = dayjs().endOf('day');
+    const result = await this.getRepository()
+      .createQueryBuilder('main')
+      .select('date(main.createTime)  AS date') // 将UNIX时间戳转换为日期
+      .addSelect('COUNT(*) AS count')
+      .where({
+        // 0点
+        createTime: MoreThan(todayEnd.add(-param.days, 'day').toDate()),
+      })
+      .groupBy('date')
+      .getRawMany();
+
+    return result;
+  }
 }

packages/ui/certd-server/src/modules/sys/authority/service/user-service.ts

@@ -1,6 +1,6 @@
 import { Inject, Provide, Scope, ScopeEnum } from '@midwayjs/core';
 import { InjectEntityModel } from '@midwayjs/typeorm';
-import { Repository } from 'typeorm';
+import { MoreThan, Repository } from 'typeorm';
 import { UserEntity } from '../entity/user.js';
 import * as _ from 'lodash-es';
 import md5 from 'md5';
@@ -15,6 +15,7 @@ import bcrypt from 'bcryptjs';
 import { SysSettingsService } from '@certd/lib-server';
 import { SysInstallInfo } from '@certd/lib-server';
 import { RandomUtil } from '../../../../utils/random.js';
+import dayjs from 'dayjs';
 
 /**
  * 系统用户
@@ -245,4 +246,29 @@ export class UserService extends BaseService<UserEntity> {
       status,
     });
   }
+
+  async count(param: { userId?: any } = {}) {
+    const count = await this.repository.count({
+      where: {
+        id: param.userId,
+      },
+    });
+    return count;
+  }
+
+  async registerCountPerDay(param: { days: number } = { days: 7 }) {
+    const todayEnd = dayjs().endOf('day');
+    const result = await this.getRepository()
+      .createQueryBuilder('main')
+      .select('date(main.createTime)  AS date') // 将UNIX时间戳转换为日期
+      .addSelect('COUNT(*) AS count')
+      .where({
+        // 0点
+        createTime: MoreThan(todayEnd.add(-param.days, 'day').toDate()),
+      })
+      .groupBy('date')
+      .getRawMany();
+
+    return result;
+  }
 }