feat: 添加监控配置管理功能

2025-04-19 22:18:45 +08:00 · 2025-04-19 22:18:45 +08:00 · 9dd906e9f7
parent 16865f77c3
commit 9dd906e9f7
14 changed files with 1196 additions and 19 deletions
--- a/server/plugin/monitor/api/enter.go
+++ b/server/plugin/monitor/api/enter.go
@ -1,6 +1,10 @@
 package api

-var Api = new(api)
+import "github.com/flipped-aurora/gin-vue-admin/server/plugin/monitor/service"

-type api struct {
-}
+var (
+	Api                  = new(api)
+	serviceMonitorConfig = service.Service.MonitorConfig
+)
+
+type api struct{ MonitorConfig MC }
--- a/server/plugin/monitor/api/monitor_config.go
+++ b/server/plugin/monitor/api/monitor_config.go
@ -0,0 +1,186 @@
+package api
+
+import (
+
+	"github.com/flipped-aurora/gin-vue-admin/server/global"
+    "github.com/flipped-aurora/gin-vue-admin/server/model/common/response"
+    "github.com/flipped-aurora/gin-vue-admin/server/plugin/monitor/model"
+    "github.com/flipped-aurora/gin-vue-admin/server/plugin/monitor/model/request"
+    "github.com/gin-gonic/gin"
+    "go.uber.org/zap"
+)
+
+var MonitorConfig = new(MC)
+
+type MC struct {}
+
+// CreateMonitorConfig 创建监控配置
+// @Tags MonitorConfig
+// @Summary 创建监控配置
+// @Security ApiKeyAuth
+// @Accept application/json
+// @Produce application/json
+// @Param data body model.MonitorConfig true "创建监控配置"
+// @Success 200 {object} response.Response{msg=string} "创建成功"
+// @Router /MC/createMonitorConfig [post]
+func (a *MC) CreateMonitorConfig(c *gin.Context) {
+    // 创建业务用Context
+    ctx := c.Request.Context()
+
+	var info model.MonitorConfig
+	err := c.ShouldBindJSON(&info)
+	if err != nil {
+		response.FailWithMessage(err.Error(), c)
+		return
+	}
+	err = serviceMonitorConfig.CreateMonitorConfig(ctx,&info)
+	if err != nil {
+        global.GVA_LOG.Error("创建失败!", zap.Error(err))
+		response.FailWithMessage("创建失败:" + err.Error(), c)
+		return
+	}
+    response.OkWithMessage("创建成功", c)
+}
+
+// DeleteMonitorConfig 删除监控配置
+// @Tags MonitorConfig
+// @Summary 删除监控配置
+// @Security ApiKeyAuth
+// @Accept application/json
+// @Produce application/json
+// @Param data body model.MonitorConfig true "删除监控配置"
+// @Success 200 {object} response.Response{msg=string} "删除成功"
+// @Router /MC/deleteMonitorConfig [delete]
+func (a *MC) DeleteMonitorConfig(c *gin.Context) {
+    // 创建业务用Context
+    ctx := c.Request.Context()
+
+	ID := c.Query("ID")
+	err := serviceMonitorConfig.DeleteMonitorConfig(ctx,ID)
+	if err != nil {
+        global.GVA_LOG.Error("删除失败!", zap.Error(err))
+		response.FailWithMessage("删除失败:" + err.Error(), c)
+		return
+	}
+    response.OkWithMessage("删除成功", c)
+}
+
+// DeleteMonitorConfigByIds 批量删除监控配置
+// @Tags MonitorConfig
+// @Summary 批量删除监控配置
+// @Security ApiKeyAuth
+// @Accept application/json
+// @Produce application/json
+// @Success 200 {object} response.Response{msg=string} "批量删除成功"
+// @Router /MC/deleteMonitorConfigByIds [delete]
+func (a *MC) DeleteMonitorConfigByIds(c *gin.Context) {
+    // 创建业务用Context
+    ctx := c.Request.Context()
+
+	IDs := c.QueryArray("IDs[]")
+	err := serviceMonitorConfig.DeleteMonitorConfigByIds(ctx,IDs)
+	if err != nil {
+        global.GVA_LOG.Error("批量删除失败!", zap.Error(err))
+		response.FailWithMessage("批量删除失败:" + err.Error(), c)
+		return
+	}
+    response.OkWithMessage("批量删除成功", c)
+}
+
+// UpdateMonitorConfig 更新监控配置
+// @Tags MonitorConfig
+// @Summary 更新监控配置
+// @Security ApiKeyAuth
+// @Accept application/json
+// @Produce application/json
+// @Param data body model.MonitorConfig true "更新监控配置"
+// @Success 200 {object} response.Response{msg=string} "更新成功"
+// @Router /MC/updateMonitorConfig [put]
+func (a *MC) UpdateMonitorConfig(c *gin.Context) {
+    // 创建业务用Context
+    ctx := c.Request.Context()
+
+	var info model.MonitorConfig
+	err := c.ShouldBindJSON(&info)
+	if err != nil {
+		response.FailWithMessage(err.Error(), c)
+		return
+	}
+	err = serviceMonitorConfig.UpdateMonitorConfig(ctx,info)
+    if err != nil {
+        global.GVA_LOG.Error("更新失败!", zap.Error(err))
+		response.FailWithMessage("更新失败:" + err.Error(), c)
+		return
+	}
+    response.OkWithMessage("更新成功", c)
+}
+
+// FindMonitorConfig 用id查询监控配置
+// @Tags MonitorConfig
+// @Summary 用id查询监控配置
+// @Security ApiKeyAuth
+// @Accept application/json
+// @Produce application/json
+// @Param ID query uint true "用id查询监控配置"
+// @Success 200 {object} response.Response{data=model.MonitorConfig,msg=string} "查询成功"
+// @Router /MC/findMonitorConfig [get]
+func (a *MC) FindMonitorConfig(c *gin.Context) {
+    // 创建业务用Context
+    ctx := c.Request.Context()
+
+	ID := c.Query("ID")
+	reMC, err := serviceMonitorConfig.GetMonitorConfig(ctx,ID)
+	if err != nil {
+        global.GVA_LOG.Error("查询失败!", zap.Error(err))
+		response.FailWithMessage("查询失败:" + err.Error(), c)
+		return
+	}
+    response.OkWithData(reMC, c)
+}
+// GetMonitorConfigList 分页获取监控配置列表
+// @Tags MonitorConfig
+// @Summary 分页获取监控配置列表
+// @Security ApiKeyAuth
+// @Accept application/json
+// @Produce application/json
+// @Param data query request.MonitorConfigSearch true "分页获取监控配置列表"
+// @Success 200 {object} response.Response{data=response.PageResult,msg=string} "获取成功"
+// @Router /MC/getMonitorConfigList [get]
+func (a *MC) GetMonitorConfigList(c *gin.Context) {
+    // 创建业务用Context
+    ctx := c.Request.Context()
+
+	var pageInfo request.MonitorConfigSearch
+	err := c.ShouldBindQuery(&pageInfo)
+	if err != nil {
+		response.FailWithMessage(err.Error(), c)
+		return
+	}
+	list, total, err := serviceMonitorConfig.GetMonitorConfigInfoList(ctx,pageInfo)
+	if err != nil {
+	    global.GVA_LOG.Error("获取失败!", zap.Error(err))
+        response.FailWithMessage("获取失败:" + err.Error(), c)
+        return
+    }
+    response.OkWithDetailed(response.PageResult{
+        List:     list,
+        Total:    total,
+        Page:     pageInfo.Page,
+        PageSize: pageInfo.PageSize,
+    }, "获取成功", c)
+}
+// GetMonitorConfigPublic 不需要鉴权的监控配置接口
+// @Tags MonitorConfig
+// @Summary 不需要鉴权的监控配置接口
+// @Accept application/json
+// @Produce application/json
+// @Success 200 {object} response.Response{data=object,msg=string} "获取成功"
+// @Router /MC/getMonitorConfigPublic [get]
+func (a *MC) GetMonitorConfigPublic(c *gin.Context) {
+    // 创建业务用Context
+    ctx := c.Request.Context()
+
+    // 此接口不需要鉴权 示例为返回了一个固定的消息接口，一般本接口用于C端服务，需要自己实现业务逻辑
+    serviceMonitorConfig.GetMonitorConfigPublic(ctx)
+    response.OkWithDetailed(gin.H{"info": "不需要鉴权的监控配置接口信息"}, "获取成功", c)
+}
--- a/server/plugin/monitor/gen/gen.go
+++ b/server/plugin/monitor/gen/gen.go
@ -2,17 +2,16 @@ package main

 import (
 	"gorm.io/gen"
-	"path/filepath"
+	"path/filepath" //go:generate go mod tidy
+	//go:generate go mod download
+	//go:generate go run gen.go
+	"github.com/flipped-aurora/gin-vue-admin/server/plugin/monitor/model"
 )

-//go:generate go mod tidy
-//go:generate go mod download
-//go:generate go run gen.go
 func main() {
-	g := gen.NewGenerator(gen.Config{
-		OutPath: filepath.Join("..", "..", "..", "monitor", "blender", "model", "dao"),
-		Mode:    gen.WithoutContext | gen.WithDefaultQuery | gen.WithQueryInterface,
-	})
-	g.ApplyBasic()
+	g := gen.NewGenerator(gen.Config{OutPath: filepath.Join("..", "..", "..", "monitor", "blender", "model", "dao"), Mode: gen.WithoutContext | gen.WithDefaultQuery | gen.WithQueryInterface})
+	g.ApplyBasic(
+		new(model.MonitorConfig),
+	)
 	g.Execute()
 }
--- a/server/plugin/monitor/initialize/gorm.go
+++ b/server/plugin/monitor/initialize/gorm.go
@ -4,12 +4,13 @@ import (
 	"context"
 	"fmt"
 	"github.com/flipped-aurora/gin-vue-admin/server/global"
+	"github.com/flipped-aurora/gin-vue-admin/server/plugin/monitor/model"
 	"github.com/pkg/errors"
 	"go.uber.org/zap"
 )

 func Gorm(ctx context.Context) {
-	err := global.GVA_DB.WithContext(ctx).AutoMigrate()
+	err := global.GVA_DB.WithContext(ctx).AutoMigrate(model.MonitorConfig{})
 	if err != nil {
 		err = errors.Wrap(err, "注册表失败!")
 		zap.L().Error(fmt.Sprintf("%+v", err))
--- a/server/plugin/monitor/initialize/router.go
+++ b/server/plugin/monitor/initialize/router.go
@ -3,6 +3,7 @@ package initialize
 import (
 	"github.com/flipped-aurora/gin-vue-admin/server/global"
 	"github.com/flipped-aurora/gin-vue-admin/server/middleware"
+	"github.com/flipped-aurora/gin-vue-admin/server/plugin/monitor/router"
 	"github.com/gin-gonic/gin"
 )

@ -11,4 +12,5 @@ func Router(engine *gin.Engine) {
 	public.Use()
 	private := engine.Group(global.GVA_CONFIG.System.RouterPrefix).Group("")
 	private.Use(middleware.JWTAuth()).Use(middleware.CasbinHandler())
+	router.Router.MonitorConfig.Init(public, private)
 }
--- a/server/plugin/monitor/model/monitor_config.go
+++ b/server/plugin/monitor/model/monitor_config.go
@ -0,0 +1,24 @@
+package model
+
+import (
+	"time"
+
+	"github.com/flipped-aurora/gin-vue-admin/server/global"
+)
+
+// MonitorConfig 监控配置 结构体
+type MonitorConfig struct {
+	global.GVA_MODEL
+	BusinessDB *string    `json:"businessDB" form:"businessDB" gorm:"column:business_db;comment:;"`                                    //业务库名
+	Database   *string    `json:"database" form:"database" gorm:"column:database;comment:;" binding:"required"`                        //数据库名
+	Table      *string    `json:"table" form:"table" gorm:"column:db_table;comment:;" binding:"required"`                              //表名
+	Columns    []string   `json:"columns" form:"columns" gorm:"column:columns;type:json;serializer:json;comment:;" binding:"required"` //字段
+	IsEnable   *bool      `json:"isEnable" form:"isEnable" gorm:"column:is_enable;comment:;" binding:"required"`                       //是否启用
+	StartTime  *time.Time `json:"startTime" form:"startTime" gorm:"column:start_time;comment:;"`                                       //开始时间
+	EndTime    *time.Time `json:"endTime" form:"endTime" gorm:"column:end_time;comment:;"`                                             //结束时间
+}
+
+// TableName 监控配置 MonitorConfig自定义表名 monitor_config
+func (MonitorConfig) TableName() string {
+	return "monitor_config"
+}
--- a/server/plugin/monitor/model/request/monitor_config.go
+++ b/server/plugin/monitor/model/request/monitor_config.go
@ -0,0 +1,11 @@
+
+package request
+import (
+	"github.com/flipped-aurora/gin-vue-admin/server/model/common/request"
+	"time"
+)
+type MonitorConfigSearch struct{
+    StartCreatedAt *time.Time `json:"startCreatedAt" form:"startCreatedAt"`
+    EndCreatedAt   *time.Time `json:"endCreatedAt" form:"endCreatedAt"`
+    request.PageInfo
+}
--- a/server/plugin/monitor/router/enter.go
+++ b/server/plugin/monitor/router/enter.go
@ -1,6 +1,10 @@
 package router

-var Router = new(router)
+import "github.com/flipped-aurora/gin-vue-admin/server/plugin/monitor/api"

-type router struct {
-}
+var (
+	Router           = new(router)
+	apiMonitorConfig = api.Api.MonitorConfig
+)
+
+type router struct{ MonitorConfig MC }
--- a/server/plugin/monitor/router/monitor_config.go
+++ b/server/plugin/monitor/router/monitor_config.go
@ -0,0 +1,30 @@
+package router
+
+import (
+	"github.com/flipped-aurora/gin-vue-admin/server/middleware"
+	"github.com/gin-gonic/gin"
+)
+
+var MonitorConfig = new(MC)
+
+type MC struct {}
+
+// Init 初始化 监控配置 路由信息
+func (r *MC) Init(public *gin.RouterGroup, private *gin.RouterGroup) {
+	{
+	    group := private.Group("MC").Use(middleware.OperationRecord())
+		group.POST("createMonitorConfig", apiMonitorConfig.CreateMonitorConfig)   // 新建监控配置
+		group.DELETE("deleteMonitorConfig", apiMonitorConfig.DeleteMonitorConfig) // 删除监控配置
+		group.DELETE("deleteMonitorConfigByIds", apiMonitorConfig.DeleteMonitorConfigByIds) // 批量删除监控配置
+		group.PUT("updateMonitorConfig", apiMonitorConfig.UpdateMonitorConfig)    // 更新监控配置
+	}
+	{
+	    group := private.Group("MC")
+		group.GET("findMonitorConfig", apiMonitorConfig.FindMonitorConfig)        // 根据ID获取监控配置
+		group.GET("getMonitorConfigList", apiMonitorConfig.GetMonitorConfigList)  // 获取监控配置列表
+	}
+	{
+	    group := public.Group("MC")
+	    group.GET("getMonitorConfigPublic", apiMonitorConfig.GetMonitorConfigPublic)  // 监控配置开放接口
+	}
+}
--- a/server/plugin/monitor/service/enter.go
+++ b/server/plugin/monitor/service/enter.go
@ -2,6 +2,4 @@ package service

 var Service = new(service)

-type service struct {
-}
-
+type service struct{ MonitorConfig MC }
--- a/server/plugin/monitor/service/monitor_config.go
+++ b/server/plugin/monitor/service/monitor_config.go
@ -0,0 +1,100 @@
+package service
+
+import (
+	"context"
+	"fmt"
+
+	"github.com/flipped-aurora/gin-vue-admin/server/global"
+	"github.com/flipped-aurora/gin-vue-admin/server/plugin/monitor/model"
+	"github.com/flipped-aurora/gin-vue-admin/server/plugin/monitor/model/request"
+)
+
+var MonitorConfig = new(MC)
+
+type MC struct{}
+
+// CreateMonitorConfig 创建监控配置记录
+// Author [yourname](https://github.com/yourname)
+func (s *MC) CreateMonitorConfig(ctx context.Context, MC *model.MonitorConfig) (err error) {
+	var num int64
+	if MC.BusinessDB == nil {
+		MC.BusinessDB = new(string)
+	}
+	err = global.GVA_DB.Model(&model.MonitorConfig{}).Where("business_db = ? AND database = ? AND db_table = ?", *MC.BusinessDB, *MC.Database, *MC.Table).Count(&num).Error
+	if err != nil {
+		return err
+	}
+	if num > 0 {
+		return fmt.Errorf("当前【业务库%s-数据库%s-表名%s】已存在", *MC.BusinessDB, *MC.Database, *MC.Table)
+	}
+
+	err = global.GVA_DB.Create(MC).Error
+	return err
+}
+
+// DeleteMonitorConfig 删除监控配置记录
+// Author [yourname](https://github.com/yourname)
+func (s *MC) DeleteMonitorConfig(ctx context.Context, ID string) (err error) {
+	err = global.GVA_DB.Delete(&model.MonitorConfig{}, "id = ?", ID).Error
+	return err
+}
+
+// DeleteMonitorConfigByIds 批量删除监控配置记录
+// Author [yourname](https://github.com/yourname)
+func (s *MC) DeleteMonitorConfigByIds(ctx context.Context, IDs []string) (err error) {
+	err = global.GVA_DB.Delete(&[]model.MonitorConfig{}, "id in ?", IDs).Error
+	return err
+}
+
+// UpdateMonitorConfig 更新监控配置记录
+// Author [yourname](https://github.com/yourname)
+func (s *MC) UpdateMonitorConfig(ctx context.Context, MC model.MonitorConfig) (err error) {
+	var num int64
+	if MC.BusinessDB == nil {
+		MC.BusinessDB = new(string)
+	}
+	err = global.GVA_DB.Model(&model.MonitorConfig{}).Where("id <> ? AND business_db = ? AND database = ? AND db_table = ?", MC.ID, *MC.BusinessDB, *MC.Database, *MC.Table).Count(&num).Error
+	if err != nil {
+		return err
+	}
+	if num > 0 {
+		return fmt.Errorf("当前【业务库%s-数据库%s-表名%s】已存在", *MC.BusinessDB, *MC.Database, *MC.Table)
+	}
+	err = global.GVA_DB.Model(&model.MonitorConfig{}).Where("id = ?", MC.ID).Updates(&MC).Error
+	return err
+}
+
+// GetMonitorConfig 根据ID获取监控配置记录
+// Author [yourname](https://github.com/yourname)
+func (s *MC) GetMonitorConfig(ctx context.Context, ID string) (MC model.MonitorConfig, err error) {
+	err = global.GVA_DB.Where("id = ?", ID).First(&MC).Error
+	return
+}
+
+// GetMonitorConfigInfoList 分页获取监控配置记录
+// Author [yourname](https://github.com/yourname)
+func (s *MC) GetMonitorConfigInfoList(ctx context.Context, info request.MonitorConfigSearch) (list []model.MonitorConfig, total int64, err error) {
+	limit := info.PageSize
+	offset := info.PageSize * (info.Page - 1)
+	// 创建db
+	db := global.GVA_DB.Model(&model.MonitorConfig{})
+	var MCs []model.MonitorConfig
+	// 如果有条件搜索 下方会自动创建搜索语句
+	if info.StartCreatedAt != nil && info.EndCreatedAt != nil {
+		db = db.Where("created_at BETWEEN ? AND ?", info.StartCreatedAt, info.EndCreatedAt)
+	}
+	err = db.Count(&total).Error
+	if err != nil {
+		return
+	}
+
+	if limit != 0 {
+		db = db.Limit(limit).Offset(offset)
+	}
+	err = db.Find(&MCs).Error
+	return MCs, total, err
+}
+
+func (s *MC) GetMonitorConfigPublic(ctx context.Context) {
+
+}
--- a/web/src/plugin/monitor/api/monitorConfig.js
+++ b/web/src/plugin/monitor/api/monitorConfig.js
@ -0,0 +1,109 @@
+import service from '@/utils/request'
+// @Tags MonitorConfig
+// @Summary 创建监控配置
+// @Security ApiKeyAuth
+// @Accept application/json
+// @Produce application/json
+// @Param data body model.MonitorConfig true "创建监控配置"
+// @Success 200 {string} string "{"success":true,"data":{},"msg":"创建成功"}"
+// @Router /MC/createMonitorConfig [post]
+export const createMonitorConfig = (data) => {
+  return service({
+    url: '/MC/createMonitorConfig',
+    method: 'post',
+    data
+  })
+}
+
+// @Tags MonitorConfig
+// @Summary 删除监控配置
+// @Security ApiKeyAuth
+// @Accept application/json
+// @Produce application/json
+// @Param data body model.MonitorConfig true "删除监控配置"
+// @Success 200 {string} string "{"success":true,"data":{},"msg":"删除成功"}"
+// @Router /MC/deleteMonitorConfig [delete]
+export const deleteMonitorConfig = (params) => {
+  return service({
+    url: '/MC/deleteMonitorConfig',
+    method: 'delete',
+    params
+  })
+}
+
+// @Tags MonitorConfig
+// @Summary 批量删除监控配置
+// @Security ApiKeyAuth
+// @Accept application/json
+// @Produce application/json
+// @Param data body request.IdsReq true "批量删除监控配置"
+// @Success 200 {string} string "{"success":true,"data":{},"msg":"删除成功"}"
+// @Router /MC/deleteMonitorConfig [delete]
+export const deleteMonitorConfigByIds = (params) => {
+  return service({
+    url: '/MC/deleteMonitorConfigByIds',
+    method: 'delete',
+    params
+  })
+}
+
+// @Tags MonitorConfig
+// @Summary 更新监控配置
+// @Security ApiKeyAuth
+// @Accept application/json
+// @Produce application/json
+// @Param data body model.MonitorConfig true "更新监控配置"
+// @Success 200 {string} string "{"success":true,"data":{},"msg":"更新成功"}"
+// @Router /MC/updateMonitorConfig [put]
+export const updateMonitorConfig = (data) => {
+  return service({
+    url: '/MC/updateMonitorConfig',
+    method: 'put',
+    data
+  })
+}
+
+// @Tags MonitorConfig
+// @Summary 用id查询监控配置
+// @Security ApiKeyAuth
+// @Accept application/json
+// @Produce application/json
+// @Param data query model.MonitorConfig true "用id查询监控配置"
+// @Success 200 {string} string "{"success":true,"data":{},"msg":"查询成功"}"
+// @Router /MC/findMonitorConfig [get]
+export const findMonitorConfig = (params) => {
+  return service({
+    url: '/MC/findMonitorConfig',
+    method: 'get',
+    params
+  })
+}
+
+// @Tags MonitorConfig
+// @Summary 分页获取监控配置列表
+// @Security ApiKeyAuth
+// @Accept application/json
+// @Produce application/json
+// @Param data query request.PageInfo true "分页获取监控配置列表"
+// @Success 200 {string} string "{"success":true,"data":{},"msg":"获取成功"}"
+// @Router /MC/getMonitorConfigList [get]
+export const getMonitorConfigList = (params) => {
+  return service({
+    url: '/MC/getMonitorConfigList',
+    method: 'get',
+    params
+  })
+}
+// @Tags MonitorConfig
+// @Summary 不需要鉴权的监控配置接口
+// @Accept application/json
+// @Produce application/json
+// @Param data query request.MonitorConfigSearch true "分页获取监控配置列表"
+// @Success 200 {object} response.Response{data=object,msg=string} "获取成功"
+// @Router /MC/getMonitorConfigPublic [get]
+export const getMonitorConfigPublic = () => {
+  return service({
+    url: '/MC/getMonitorConfigPublic',
+    method: 'get',
+  })
+}
--- a/web/src/plugin/monitor/form/monitorConfig.vue
+++ b/web/src/plugin/monitor/form/monitorConfig.vue
@ -0,0 +1,151 @@
+<template>
+  <div>
+    <div class="gva-form-box">
+      <el-form :model="formData" ref="elFormRef" label-position="right" :rules="rule" label-width="80px">
+        <el-form-item label="业务库名:" prop="businessDB">
+          <el-input v-model="formData.businessDB" :clearable="false" placeholder="请输入业务库名" />
+        </el-form-item>
+        <el-form-item label="数据库名:" prop="database">
+          <el-input v-model="formData.database" :clearable="false" placeholder="请输入数据库名" />
+        </el-form-item>
+        <el-form-item label="表名:" prop="table">
+          <el-input v-model="formData.table" :clearable="false" placeholder="请输入表名" />
+        </el-form-item>
+        <el-form-item label="字段:" prop="columns">
+          <el-input v-model="formData.columns" :clearable="false" placeholder="请输入字段" />
+        </el-form-item>
+        <el-form-item label="是否启用:" prop="isEnable">
+          <el-switch v-model="formData.isEnable" active-color="#13ce66" inactive-color="#ff4949" active-text="是"
+            inactive-text="否" clearable></el-switch>
+        </el-form-item>
+        <el-form-item label="开始时间:" prop="startTime">
+          <el-date-picker v-model="formData.startTime" type="date" placeholder="选择日期"
+            :clearable="false"></el-date-picker>
+        </el-form-item>
+        <el-form-item label="结束时间:" prop="endTime">
+          <el-date-picker v-model="formData.endTime" type="date" placeholder="选择日期" :clearable="false"></el-date-picker>
+        </el-form-item>
+        <el-form-item>
+          <el-button :loading="btnLoading" type="primary" @click="save">保存</el-button>
+          <el-button type="primary" @click="back">返回</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {
+  createMonitorConfig,
+  updateMonitorConfig,
+  findMonitorConfig
+} from '@/plugin/monitor/api/monitorConfig'
+
+defineOptions({
+  name: 'MonitorConfigForm'
+})
+
+// 自动获取字典
+import { getDictFunc } from '@/utils/format'
+import { useRoute, useRouter } from "vue-router"
+import { ElMessage } from 'element-plus'
+import { ref, reactive } from 'vue'
+
+
+const route = useRoute()
+const router = useRouter()
+
+// 提交按钮loading
+const btnLoading = ref(false)
+
+const type = ref('')
+const formData = ref({
+  businessDB: '',
+  database: '',
+  table: '',
+  columns: '',
+  isEnable: false,
+  startTime: new Date(),
+  endTime: new Date(),
+})
+// 验证规则
+const rule = reactive({
+  businessDB: [{
+    required: true,
+    message: '',
+    trigger: ['input', 'blur'],
+  }],
+  database: [{
+    required: true,
+    message: '',
+    trigger: ['input', 'blur'],
+  }],
+  table: [{
+    required: true,
+    message: '',
+    trigger: ['input', 'blur'],
+  }],
+  columns: [{
+    required: true,
+    message: '',
+    trigger: ['input', 'blur'],
+  }],
+  isEnable: [{
+    required: true,
+    message: '',
+    trigger: ['input', 'blur'],
+  }],
+})
+
+const elFormRef = ref()
+
+// 初始化方法
+const init = async () => {
+  // 建议通过url传参获取目标数据ID 调用 find方法进行查询数据操作 从而决定本页面是create还是update 以下为id作为url参数示例
+  if (route.query.id) {
+    const res = await findMonitorConfig({ ID: route.query.id })
+    if (res.code === 0) {
+      formData.value = res.data
+      type.value = 'update'
+    }
+  } else {
+    type.value = 'create'
+  }
+}
+
+init()
+// 保存按钮
+const save = async () => {
+  btnLoading.value = true
+  elFormRef.value?.validate(async (valid) => {
+    if (!valid) return btnLoading.value = false
+    let res
+    switch (type.value) {
+      case 'create':
+        res = await createMonitorConfig(formData.value)
+        break
+      case 'update':
+        res = await updateMonitorConfig(formData.value)
+        break
+      default:
+        res = await createMonitorConfig(formData.value)
+        break
+    }
+    btnLoading.value = false
+    if (res.code === 0) {
+      ElMessage({
+        type: 'success',
+        message: '创建/更改成功'
+      })
+    }
+  })
+}
+
+// 返回按钮
+const back = () => {
+  router.go(-1)
+}
+
+</script>
+
+<style></style>
--- a/web/src/plugin/monitor/view/monitorConfig.vue
+++ b/web/src/plugin/monitor/view/monitorConfig.vue
@ -0,0 +1,558 @@
+<template>
+  <div>
+    <div class="gva-search-box">
+      <el-form ref="elSearchFormRef" :inline="true" :model="searchInfo" class="demo-form-inline" :rules="searchRule"
+        @keyup.enter="onSubmit">
+        <el-form-item label="创建日期" prop="createdAt">
+          <template #label>
+            <span>
+              创建日期
+              <el-tooltip content="搜索范围是开始日期（包含）至结束日期（不包含）">
+                <el-icon>
+                  <QuestionFilled />
+                </el-icon>
+              </el-tooltip>
+            </span>
+          </template>
+          <el-date-picker v-model="searchInfo.startCreatedAt" type="datetime" placeholder="开始日期"
+            :disabled-date="time => searchInfo.endCreatedAt ? time.getTime() > searchInfo.endCreatedAt.getTime() : false"></el-date-picker>
+          —
+          <el-date-picker v-model="searchInfo.endCreatedAt" type="datetime" placeholder="结束日期"
+            :disabled-date="time => searchInfo.startCreatedAt ? time.getTime() < searchInfo.startCreatedAt.getTime() : false"></el-date-picker>
+        </el-form-item>
+
+
+        <template v-if="showAllQuery">
+          <!-- 将需要控制显示状态的查询条件添加到此范围内 -->
+        </template>
+
+        <el-form-item>
+          <el-button type="primary" icon="search" @click="onSubmit">查询</el-button>
+          <el-button icon="refresh" @click="onReset">重置</el-button>
+          <el-button link type="primary" icon="arrow-down" @click="showAllQuery = true"
+            v-if="!showAllQuery">展开</el-button>
+          <el-button link type="primary" icon="arrow-up" @click="showAllQuery = false" v-else>收起</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+    <div class="gva-table-box">
+      <div class="gva-btn-list">
+        <el-button type="primary" icon="plus" @click="openDialog()">新增</el-button>
+        <el-button icon="delete" style="margin-left: 10px;" :disabled="!multipleSelection.length"
+          @click="onDelete">删除</el-button>
+
+      </div>
+      <el-table ref="multipleTable" style="width: 100%" tooltip-effect="dark" :data="tableData" row-key="ID"
+        @selection-change="handleSelectionChange">
+        <el-table-column type="selection" width="55" />
+
+        <el-table-column align="left" label="日期" prop="createdAt" width="180">
+          <template #default="scope">{{ formatDate(scope.row.CreatedAt) }}</template>
+        </el-table-column>
+
+        <el-table-column align="left" label="业务库名" prop="businessDB" width="120" />
+        <el-table-column align="left" label="数据库名" prop="database" width="120" />
+        <el-table-column align="left" label="表名" prop="table" width="120" />
+        <el-table-column align="left" label="字段" prop="columns" width="120" />
+        <el-table-column align="left" label="是否启用" prop="isEnable" width="120">
+          <template #default="scope">{{ formatBoolean(scope.row.isEnable) }}</template>
+        </el-table-column>
+        <el-table-column align="left" label="开始时间" prop="startTime" width="180">
+          <template #default="scope">{{ formatDate(scope.row.startTime) }}</template>
+        </el-table-column>
+        <el-table-column align="left" label="结束时间" prop="endTime" width="180">
+          <template #default="scope">{{ formatDate(scope.row.endTime) }}</template>
+        </el-table-column>
+        <el-table-column align="left" label="操作" fixed="right" min-width="240">
+          <template #default="scope">
+            <el-button type="primary" link class="table-button" @click="getDetails(scope.row)"><el-icon
+                style="margin-right: 5px">
+                <InfoFilled />
+              </el-icon>查看</el-button>
+            <el-button type="primary" link icon="edit" class="table-button"
+              @click="updateMonitorConfigFunc(scope.row)">编辑</el-button>
+            <el-button type="primary" link icon="delete" @click="deleteRow(scope.row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="gva-pagination">
+        <el-pagination layout="total, sizes, prev, pager, next, jumper" :current-page="page" :page-size="pageSize"
+          :page-sizes="[10, 30, 50, 100]" :total="total" @current-change="handleCurrentChange"
+          @size-change="handleSizeChange" />
+      </div>
+    </div>
+    <el-drawer destroy-on-close size="800" v-model="dialogFormVisible" :show-close="false" :before-close="closeDialog">
+      <template #header>
+        <div class="flex justify-between items-center">
+          <span class="text-lg">{{ type === 'create' ? '新增' : '编辑' }}</span>
+          <div>
+            <el-button :loading="btnLoading" type="primary" @click="enterDialog">确 定</el-button>
+            <el-button @click="closeDialog">取 消</el-button>
+          </div>
+        </div>
+      </template>
+
+      <el-form :model="formData" label-position="top" ref="elFormRef" :rules="rule" label-width="80px">
+        <el-form-item label="业务库名:" prop="businessDB">
+          <el-select v-model="formData.businessDB" clearable placeholder="选择业务库" @change="getDbFunc" class="w-full">
+            <el-option v-for="item in dbList" :key="item.aliasName" :value="item.aliasName" :label="item.aliasName"
+              :disabled="item.disable">
+              <div>
+                <span>{{ item.aliasName }}</span>
+                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.dbName }}</span>
+              </div>
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="数据库名:" prop="database">
+          <el-select v-model="formData.database" clearable filterable placeholder="请选择数据库" class="w-full"
+            @change="getTableFunc">
+            <el-option v-for="item in dbOptions" :key="item.database" :label="item.database" :value="item.database" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="表名:" prop="table">
+          <el-select v-model="formData.table" :disabled="!formData.database || !tableOptions" class="w-full" filterable
+            placeholder="请选择表" @change="getColumsFunc(true)">
+            <el-option v-for="item in tableOptions" :key="item.tableName" :label="item.tableName"
+              :value="item.tableName" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="字段:" prop="columns">
+          <el-select v-model="formData.columns" :disabled="!formData.database || !formData.table || !tableOptions"
+            class="w-full" filterable multiple placeholder="请选择字段" @focus="getColumsFunc(false)">
+            <el-option v-for="item in columnOptions" :key="item.columnName" :label="item.columnName"
+              :value="item.columnName" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="是否启用:" prop="isEnable">
+          <el-switch v-model="formData.isEnable" active-color="#13ce66" inactive-color="#ff4949" active-text="是"
+            inactive-text="否" clearable></el-switch>
+        </el-form-item>
+        <el-form-item label="开始时间:" prop="startTime">
+          <el-date-picker v-model="formData.startTime" type="date" style="width:100%" placeholder="选择日期"
+            :clearable="false" />
+        </el-form-item>
+        <el-form-item label="结束时间:" prop="endTime">
+          <el-date-picker v-model="formData.endTime" type="date" style="width:100%" placeholder="选择日期"
+            :clearable="false" />
+        </el-form-item>
+      </el-form>
+    </el-drawer>
+
+    <el-drawer destroy-on-close size="800" v-model="detailShow" :show-close="true" :before-close="closeDetailShow"
+      title="查看">
+      <el-descriptions :column="1" border>
+        <el-descriptions-item label="业务库名">
+          {{ detailFrom.businessDB }}
+        </el-descriptions-item>
+        <el-descriptions-item label="数据库名">
+          {{ detailFrom.database }}
+        </el-descriptions-item>
+        <el-descriptions-item label="表名">
+          {{ detailFrom.table }}
+        </el-descriptions-item>
+        <el-descriptions-item label="字段">
+          {{ detailFrom.columns ? detailFrom.columns.join(",") : "" }}
+        </el-descriptions-item>
+        <el-descriptions-item label="是否启用">
+          {{ formatBoolean(detailFrom.isEnable) }}
+        </el-descriptions-item>
+        <el-descriptions-item label="开始时间">
+          {{ formatDate(detailFrom.startTime) }}
+        </el-descriptions-item>
+        <el-descriptions-item label="结束时间">
+          {{ formatDate(detailFrom.endTime) }}
+        </el-descriptions-item>
+      </el-descriptions>
+    </el-drawer>
+
+  </div>
+</template>
+
+<script setup>
+import {
+  createMonitorConfig,
+  deleteMonitorConfig,
+  deleteMonitorConfigByIds,
+  updateMonitorConfig,
+  findMonitorConfig,
+  getMonitorConfigList
+} from '@/plugin/monitor/api/monitorConfig'
+
+// 全量引入格式化工具 请按需保留
+import { getDictFunc, formatDate, formatBoolean, filterDict, filterDataSource, returnArrImg, onDownloadFile } from '@/utils/format'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { ref, reactive } from 'vue'
+import { getColumn, getDB, getTable } from '@/api/autoCode'
+
+
+
+
+defineOptions({
+  name: 'MonitorConfig'
+})
+
+// 提交按钮loading
+const btnLoading = ref(false)
+
+// 控制更多查询条件显示/隐藏状态
+const showAllQuery = ref(false)
+
+const dbList = ref([])
+const dbOptions = ref([])
+const tableOptions = ref([])
+const columnOptions = ref([])
+
+const getDbFunc = async () => {
+  formData.value.database = ''
+  formData.value.table = ''
+  formData.value.columns = ''
+  const res = await getDB({ businessDB: formData.value.businessDB })
+  if (res.code === 0) {
+    dbOptions.value = res.data.dbs
+    dbList.value = res.data.dbList
+  }
+}
+
+const getTableFunc = async () => {
+  formData.value.table = ''
+  formData.value.columns = ''
+  const res = await getTable({
+    businessDB: formData.value.businessDB,
+    dbName: formData.value.database
+  })
+  if (res.code === 0) {
+    tableOptions.value = res.data.tables
+  }
+}
+
+const getColumsFunc = async (isClear) => {
+  if (isClear) {
+    formData.value.columns = ''
+  }
+  const res = await getColumn({
+    businessDB: formData.value.businessDB,
+    tableName: formData.value.table
+  })
+
+  if (res.code === 0) {
+    let list = res.data.columns // 确保这里正确获取到 tables 数组
+    columnOptions.value = list.map((item) => {
+      return {
+        columnName: item.columnName,
+        value: item.columnName,
+      }
+    })
+  }
+}
+// 自动化生成的字典（可能为空）以及字段
+const formData = ref({
+  businessDB: '',
+  database: '',
+  table: '',
+  columns: [],
+  isEnable: false,
+  startTime: null,
+  endTime: null,
+})
+
+
+const init = () => {
+  getDbFunc()
+  getTableFunc()
+  // getColumsFunc()
+}
+init()
+// 验证规则
+const rule = reactive({
+  // businessDB: [{
+  //   required: true,
+  //   message: '',
+  //   trigger: ['input', 'blur'],
+  // },
+  // {
+  //   whitespace: true,
+  //   message: '不能只输入空格',
+  //   trigger: ['input', 'blur'],
+  // }
+  // ],
+  database: [{
+    required: true,
+    message: '',
+    trigger: ['input', 'blur'],
+  },
+  {
+    whitespace: true,
+    message: '不能只输入空格',
+    trigger: ['input', 'blur'],
+  }
+  ],
+  table: [{
+    required: true,
+    message: '',
+    trigger: ['input', 'blur'],
+  },
+  {
+    whitespace: true,
+    message: '不能只输入空格',
+    trigger: ['input', 'blur'],
+  }
+  ],
+  columns: [{
+    required: true,
+    message: '',
+    trigger: ['input', 'blur'],
+  },
+  ],
+  isEnable: [{
+    required: true,
+    message: '',
+    trigger: ['input', 'blur'],
+  },
+  ],
+})
+
+const searchRule = reactive({
+  createdAt: [
+    {
+      validator: (rule, value, callback) => {
+        if (searchInfo.value.startCreatedAt && !searchInfo.value.endCreatedAt) {
+          callback(new Error('请填写结束日期'))
+        } else if (!searchInfo.value.startCreatedAt && searchInfo.value.endCreatedAt) {
+          callback(new Error('请填写开始日期'))
+        } else if (searchInfo.value.startCreatedAt && searchInfo.value.endCreatedAt && (searchInfo.value.startCreatedAt.getTime() === searchInfo.value.endCreatedAt.getTime() || searchInfo.value.startCreatedAt.getTime() > searchInfo.value.endCreatedAt.getTime())) {
+          callback(new Error('开始日期应当早于结束日期'))
+        } else {
+          callback()
+        }
+      }, trigger: 'change'
+    }
+  ],
+})
+
+const elFormRef = ref()
+const elSearchFormRef = ref()
+
+// =========== 表格控制部分 ===========
+const page = ref(1)
+const total = ref(0)
+const pageSize = ref(10)
+const tableData = ref([])
+const searchInfo = ref({})
+// 重置
+const onReset = () => {
+  searchInfo.value = {}
+  getTableData()
+}
+
+// 搜索
+const onSubmit = () => {
+  elSearchFormRef.value?.validate(async (valid) => {
+    if (!valid) return
+    page.value = 1
+    if (searchInfo.value.isEnable === "") {
+      searchInfo.value.isEnable = null
+    }
+    getTableData()
+  })
+}
+
+// 分页
+const handleSizeChange = (val) => {
+  pageSize.value = val
+  getTableData()
+}
+
+// 修改页面容量
+const handleCurrentChange = (val) => {
+  page.value = val
+  getTableData()
+}
+
+// 查询
+const getTableData = async () => {
+  const table = await getMonitorConfigList({ page: page.value, pageSize: pageSize.value, ...searchInfo.value })
+  if (table.code === 0) {
+    tableData.value = table.data.list
+    total.value = table.data.total
+    page.value = table.data.page
+    pageSize.value = table.data.pageSize
+  }
+}
+
+getTableData()
+
+// ============== 表格控制部分结束 ===============
+
+// 获取需要的字典 可能为空 按需保留
+const setOptions = async () => {
+}
+
+// 获取需要的字典 可能为空 按需保留
+setOptions()
+
+
+// 多选数据
+const multipleSelection = ref([])
+// 多选
+const handleSelectionChange = (val) => {
+  multipleSelection.value = val
+}
+
+// 删除行
+const deleteRow = (row) => {
+  ElMessageBox.confirm('确定要删除吗?', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(() => {
+    deleteMonitorConfigFunc(row)
+  })
+}
+
+// 多选删除
+const onDelete = async () => {
+  ElMessageBox.confirm('确定要删除吗?', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(async () => {
+    const IDs = []
+    if (multipleSelection.value.length === 0) {
+      ElMessage({
+        type: 'warning',
+        message: '请选择要删除的数据'
+      })
+      return
+    }
+    multipleSelection.value &&
+      multipleSelection.value.map(item => {
+        IDs.push(item.ID)
+      })
+    const res = await deleteMonitorConfigByIds({ IDs })
+    if (res.code === 0) {
+      ElMessage({
+        type: 'success',
+        message: '删除成功'
+      })
+      if (tableData.value.length === IDs.length && page.value > 1) {
+        page.value--
+      }
+      getTableData()
+    }
+  })
+}
+
+// 行为控制标记（弹窗内部需要增还是改）
+const type = ref('')
+
+// 更新行
+const updateMonitorConfigFunc = async (row) => {
+  const res = await findMonitorConfig({ ID: row.ID })
+  type.value = 'update'
+  if (res.code === 0) {
+    formData.value = res.data
+    dialogFormVisible.value = true
+  }
+}
+
+
+// 删除行
+const deleteMonitorConfigFunc = async (row) => {
+  const res = await deleteMonitorConfig({ ID: row.ID })
+  if (res.code === 0) {
+    ElMessage({
+      type: 'success',
+      message: '删除成功'
+    })
+    if (tableData.value.length === 1 && page.value > 1) {
+      page.value--
+    }
+    getTableData()
+  }
+}
+
+// 弹窗控制标记
+const dialogFormVisible = ref(false)
+
+// 打开弹窗
+const openDialog = () => {
+  type.value = 'create'
+  dialogFormVisible.value = true
+}
+
+// 关闭弹窗
+const closeDialog = () => {
+  dialogFormVisible.value = false
+  formData.value = {
+    businessDB: '',
+    database: '',
+    table: '',
+    columns: [],
+    isEnable: false,
+    startTime: null,
+    endTime: null,
+  }
+}
+// 弹窗确定
+const enterDialog = async () => {
+  btnLoading.value = true
+  elFormRef.value?.validate(async (valid) => {
+    if (!valid) return btnLoading.value = false
+    let res
+    switch (type.value) {
+      case 'create':
+        res = await createMonitorConfig(formData.value)
+        break
+      case 'update':
+        res = await updateMonitorConfig(formData.value)
+        break
+      default:
+        res = await createMonitorConfig(formData.value)
+        break
+    }
+    btnLoading.value = false
+    if (res.code === 0) {
+      ElMessage({
+        type: 'success',
+        message: '创建/更改成功'
+      })
+      closeDialog()
+      getTableData()
+    }
+  })
+}
+
+const detailFrom = ref({})
+
+// 查看详情控制标记
+const detailShow = ref(false)
+
+
+// 打开详情弹窗
+const openDetailShow = () => {
+  detailShow.value = true
+}
+
+
+// 打开详情
+const getDetails = async (row) => {
+  // 打开弹窗
+  const res = await findMonitorConfig({ ID: row.ID })
+  if (res.code === 0) {
+    detailFrom.value = res.data
+    openDetailShow()
+  }
+}
+
+
+// 关闭详情弹窗
+const closeDetailShow = () => {
+  detailShow.value = false
+  detailFrom.value = {}
+}
+
+
+</script>
+
+<style></style>