perf: 管理控制台数据统计

2024-10-31 16:19:35 +08:00 · 2024-10-31 16:19:35 +08:00 · babd5897ae
parent 63ec5b5519
commit babd5897ae
14 changed files with 265 additions and 74 deletions
--- a/docker/run/docker-compose.yaml
+++ b/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         # 数据库类型
--- a/packages/ui/certd-client/src/components/vip-button/index.vue
+++ b/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;
--- a/packages/ui/certd-client/src/router/source/modules/sys.ts
+++ b/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",
--- a/packages/ui/certd-client/src/views/certd/mine/user-profile.vue
+++ b/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>
--- a/packages/ui/certd-client/src/views/framework/home/dashboard/charts/day-count.vue
+++ b/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: {
--- a/packages/ui/certd-client/src/views/framework/home/dashboard/index.vue
+++ b/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() {
--- a/packages/ui/certd-client/src/views/framework/home/dashboard/statistic-card.vue
+++ b/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>
--- a/packages/ui/certd-client/src/views/sys/console/api.ts
+++ b/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"
+  });
+}
--- a/packages/ui/certd-client/src/views/sys/console/index.vue
+++ b/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>
--- a/packages/ui/certd-server/src/controller/dashboard/statistic-controller.ts
+++ b/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() });
-    pipelineStatusCount = pipelineStatusCount.map(item => {
-      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 pipelineStatusCount = await this.pipelineService.statusCount({ 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 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({});
-  }
 }
--- a/packages/ui/certd-server/src/controller/sys/console/statistic-controller.ts
+++ b/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);
+  }
+}
--- a/packages/ui/certd-server/src/modules/pipeline/service/history-service.ts
+++ b/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({
-        // 0点
-        userId: param.userId,
-        createTime: MoreThan(todayEnd.add(-param.days, 'day').toDate()),
-      })
+      .where(where)
      .groupBy('date')
      .getRawMany();

--- a/packages/ui/certd-server/src/modules/pipeline/service/pipeline-service.ts
+++ b/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;
+  }
 }
--- a/packages/ui/certd-server/src/modules/sys/authority/service/user-service.ts
+++ b/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;
+  }
 }