feat 延时队列监控

src/components/registerGlobComp.ts

@@ -40,6 +40,7 @@ import {
   TimePicker,
   Descriptions,
   Space,
+  Statistic,
 } from 'ant-design-vue'
 
 export function registerGlobComp(app: App) {
@@ -84,4 +85,5 @@ export function registerGlobComp(app: App) {
   app.use(Spin)
   app.use(Dropdown)
   app.use(Input)
+  app.use(Statistic)
 }

src/views/baseapi/delay/DelayQuery.api.ts

@@ -0,0 +1,100 @@
+import { defHttp } from '@/utils/http/axios'
+import { PageResult, Result } from '#/axios'
+
+/**
+ * 获取桶信息列表
+ */
+export function getBucket() {
+  return defHttp.get<Result<BucketResult[]>>({ url: '/delay/queue/getBucket' })
+}
+
+/**
+ * 获取桶任务分页
+ */
+export function pageBucketJob(param) {
+  return defHttp.get<Result<PageResult<DelayJobResult>>>({
+    url: '/delay/queue/pageBucketJob',
+    params: param,
+  })
+}
+
+/**
+ * 获取就绪数量和列表
+ */
+export function getReadyTopic() {
+  return defHttp.get<Result<TopicResult[]>>({ url: '/delay/queue/getReadyTopic' })
+}
+
+/**
+ * 获取就绪任务分页
+ */
+export function pageReadyJob(param) {
+  return defHttp.get<Result<PageResult<DelayJobResult>>>({ url: '/delay/queue/pageReadyJob', params: param })
+}
+
+/**
+ * 获取任务详情
+ */
+export function getJobDetail(jobId) {
+  return defHttp.get<Result<DelayJobResult>>({ url: '/delay/queue/getJobDetail', params: { jobId } })
+}
+/**
+ * 获取死信主题数量和列表
+ */
+export function getDeadTopic() {
+  return defHttp.get<Result<TopicResult[]>>({ url: '/delay/queue/getDeadTopic' })
+}
+
+/**
+ * 获取死信主题任务分页
+ */
+export function pageDeadJob(param) {
+  return defHttp.get<Result<PageResult<TopicResult>>>({ url: '/delay/queue/pageDeadJob', params: param })
+}
+
+/**
+ * 获取死信任务详情
+ */
+export function getDeadJobDetail(jobId) {
+  return defHttp.get<Result<DelayJobResult>>({ url: '/delay/queue/getDeadJobDetail', params: { jobId } })
+}
+
+/**
+ * 延时桶信息
+ */
+export interface BucketResult {
+  // 桶名称
+  name?: string
+  // 数量
+  count?: number
+}
+
+/**
+ * 延时任务信息
+ */
+export interface DelayJobResult {
+  // 任务ID
+  id?: string
+  // 主题名称
+  topic?: string
+  // 延时时间
+  delayTime?: string
+  // 任务的执行超时时间
+  timeout?: string
+  // 消息内容
+  message?: string
+  // 重试次数
+  retryCount?: number
+  // 任务状态
+  status?: string
+}
+
+/**
+ * 主题信息
+ */
+export interface TopicResult {
+  // 主题名称
+  name?: string
+  // 数量
+  count?: number
+}

src/views/baseapi/delay/DelayQuery.vue

@@ -1,11 +1,86 @@
-<script setup lang="ts">
-
-</script>
-
 <template>
-
+  <div>
+    <div class="m-3 p-3 pt-5 bg-white">
+      <a-row :gutter="48" justify="space-around">
+        <a-col :span="8" style="display: flex; align-content: center; justify-content: center">
+          <a-card class="card" title="延时桶数量">
+            <a-statistic :value="bucketList.length" />
+          </a-card>
+        </a-col>
+        <a-col :span="8" style="display: flex; align-content: center; justify-content: center">
+          <a-card class="card" title="就绪Topic数量">
+            <a-statistic :value="readyList.length" />
+          </a-card>
+        </a-col>
+        <a-col :span="8" style="display: flex; align-content: center; justify-content: center">
+          <a-card class="card" title="死信Topic数量">
+            <a-statistic :value="deadList.length" />
+          </a-card>
+        </a-col>
+      </a-row>
+      <a-row :gutter="16" justify="space-between" style="margin-top: 30px">
+        <a-col :span="12">
+          <div class="gutter-box">主题列表</div>
+        </a-col>
+        <a-col :span="12">
+          <div class="gutter-box">分页</div>
+        </a-col>
+      </a-row>
+    </div>
+  </div>
 </template>
 
-<style scoped lang="less">
+<script setup lang="ts">
+  import { onMounted, ref } from 'vue'
+  import {
+    BucketResult,
+    getBucket,
+    getDeadTopic,
+    getReadyTopic,
+    TopicResult,
+  } from '@/views/baseapi/delay/DelayQuery.api'
+  import { PageParam } from '#/web'
 
+  const bucketList = ref<BucketResult[]>([])
+  const readyList = ref<TopicResult[]>([])
+  const deadList = ref<TopicResult[]>([])
+
+  onMounted(() => {
+    initData()
+  })
+
+  /**
+   * 初始化数据
+   */
+  function initData() {
+    getBucket().then(({ data }) => {
+      bucketList.value = data
+    })
+    getReadyTopic().then(({ data }) => {
+      readyList.value = data
+    })
+    getDeadTopic().then(({ data }) => {
+      deadList.value = data
+    })
+  }
+
+  /**
+   * 获取桶分页
+   */
+  function getBucketPage(page: number, size: number) {
+    getBucket().then(({ data }) => {
+      bucketList.value = data
+    })
+  }
+</script>
+
+<style scoped lang="less">
+  .card {
+    width: 100%;
+  }
+  .gutter-box {
+    background: #0092ff;
+    height: 250px;
+    padding: 8px 0;
+  }
 </style>