add:monitor_config

2025-04-18 08:21:22 +08:00 · 2025-04-18 08:21:22 +08:00 · f53f594a2b
parent ccd4018f87
commit f53f594a2b
2 changed files with 236 additions and 33 deletions
--- a/server/plugin/monitor/model/monitor_config.go
+++ b/server/plugin/monitor/model/monitor_config.go
@ -1,5 +1,5 @@
-
 package model
+
 import (
 	"github.com/flipped-aurora/gin-vue-admin/server/global"
 	"time"
@ -7,25 +7,17 @@ import (

 // MonitorConfig 监控配置 结构体
 type MonitorConfig struct {
-    global.GVA_MODEL
-    BusinessDB  *string `json:"businessDB" form:"businessDB" gorm:"column:business_db;comment:;" binding:"required"`  //业务库名
-    Database  *string `json:"database" form:"database" gorm:"column:database;comment:;" binding:"required"`  //数据库名
-    Table  *string `json:"table" form:"table" gorm:"column:table;comment:;" binding:"required"`  //表名
-    Columns  *string `json:"columns" form:"columns" gorm:"column:columns;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:;"`  //结束时间
+	global.GVA_MODEL
+	BusinessDB *string    `json:"businessDB" form:"businessDB" gorm:"column:business_db;comment:;" binding:"required"`                 //业务库名
+	Database   *string    `json:"database" form:"database" gorm:"column:database;comment:;" binding:"required"`                        //数据库名
+	Table      *string    `json:"table" form:"table" gorm:"column: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"
+	return "monitor_config"
 }
-
-
-
-
-
-
-
--- a/web/src/plugin/monitor/view/monitorConfig.vue
+++ b/web/src/plugin/monitor/view/monitorConfig.vue
@ -96,16 +96,86 @@

          <el-form :model="formData" label-position="top" ref="elFormRef" :rules="rule" label-width="80px">
            <el-form-item label="业务库名:"  prop="businessDB" >
-              <el-input v-model="formData.businessDB" :clearable="false"  placeholder="请输入业务库名" />
+<!--              <el-input v-model="formData.businessDB" :clearable="false"  placeholder="请输入业务库名" />-->
+              <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-input v-model="formData.database" :clearable="false"  placeholder="请输入数据库名" />
+<!--              <el-input v-model="formData.database" :clearable="false"  placeholder="请输入数据库名" />-->
+              <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-input v-model="formData.table" :clearable="false"  placeholder="请输入表名" />
+<!--              <el-input v-model="formData.table" :clearable="false"  placeholder="请输入表名" />-->
+              <el-select
+                  v-model="formData.table"
+                  :disabled="!formData.database"
+                  class="w-full"
+                  filterable
+                  placeholder="请选择表"
+                  @change="getColumsFunc"
+                  @focus="getColumsOptions"
+              >
+                <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-input v-model="formData.columns" :clearable="false"  placeholder="请输入字段" />
+<!--              <el-input v-model="formData.columns" :clearable="false"  placeholder="请输入字段" />-->
+              <el-select
+                  v-model="formData.columns"
+                  :disabled="!formData.table"
+                  class="w-full"
+                  filterable
+                  multiple
+                  placeholder="请选择字段"
+                  @focus="getColumsOptions"
+              >
+                <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>
@ -122,19 +192,19 @@
    <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 }}
+                      {{ detailFrom.businessDB }}
                    </el-descriptions-item>
                    <el-descriptions-item label="数据库名">
-                        {{ detailFrom.database }}
+                      {{ detailFrom.database }}
                    </el-descriptions-item>
                    <el-descriptions-item label="表名">
-                        {{ detailFrom.table }}
+                      {{ detailFrom.table }}
                    </el-descriptions-item>
                    <el-descriptions-item label="字段">
-                        {{ detailFrom.columns }}
+                        {{ detailFrom.columns?detailFrom.columns.join(","):"" }}
                    </el-descriptions-item>
                    <el-descriptions-item label="是否启用">
-                        {{ detailFrom.isEnable }}
+                      {{ formatBoolean(detailFrom.isEnable) }}
                    </el-descriptions-item>
                    <el-descriptions-item label="开始时间">
                        {{ detailFrom.startTime }}
@ -162,6 +232,7 @@ import {
 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'



@ -176,19 +247,164 @@ const btnLoading = ref(false)
 // 控制更多查询条件显示/隐藏状态
 const showAllQuery = ref(false)

+// const dbform = ref({
+//   businessDB: '',
+//   dbName: '',
+//   tableName: '',
+//   columns:[]
+// })
+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
+  }
+  // formData.value.database = ''
+}
+const getColumsOptions=async ()=>{
+  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) => {
+      if (item.columnName === 'deleted_at') {
+        // middleDate.value.dataSource.hasDeletedAt = true
+      }
+      return {
+        columnName: item.columnName,
+        value: item.columnName,
+      }
+    })
+    if (formData.value.columns.length > 0 ) {
+      // middleDate.value.dataSource.label = dbColumnList.value[0].columnName
+      // middleDate.value.dataSource.value = dbColumnList.value[0].columnName
+    }
+  }
+}
+const getColumsFunc =async ()=>{
+  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) => {
+      if (item.columnName === 'deleted_at') {
+        // middleDate.value.dataSource.hasDeletedAt = true
+      }
+      return {
+        columnName: item.columnName,
+        value: item.columnName,
+      }
+    })
+    if (formData.value.columns.length > 0 ) {
+      // middleDate.value.dataSource.label = dbColumnList.value[0].columnName
+      // middleDate.value.dataSource.value = dbColumnList.value[0].columnName
+    }
+  }
+}
 // 自动化生成的字典（可能为空）以及字段
 const formData = ref({
            businessDB: '',
            database: '',
            table: '',
-            columns: '',
+            columns: [],
            isEnable: false,
            startTime: new Date(),
            endTime: new Date(),
        })

+const clearAccress = () => {
+  middleDate.value.dataSource.value = ''
+  middleDate.value.dataSource.label = ''
+}
+
+const clearDataSourceTable = () => {
+  middleDate.value.dataSource.table = ''
+}
+
+const dbNameChange = () => {
+  getDBTableList()
+  clearDataSourceTable()
+  clearAccress()
+}
+
+const dbTableList = ref([])
+
+const getDBTableList = async () => {
+  const res = await getTable({
+    businessDB: middleDate.value.dataSource.dbName
+  })
+  if (res.code === 0) {
+    let list = res.data.tables // 确保这里正确获取到 tables 数组
+    dbTableList.value = list.map((item) => ({
+      tableName: item.tableName,
+      value: item.tableName // 这里假设 value 也是 tableName，如果不同请调整
+    }))
+  }
+  clearAccress()
+}


+// const selectDB = async (val, isInit) => {
+//   // middleDate.value.dataSource.hasDeletedAt = false
+//   // middleDate.value.dataSource.table = val
+//   const res = await getColumn({
+//     businessDB: dbform.value.dbName,
+//     tableName: dbform.value.tableName
+//   })
+//
+//   if (res.code === 0) {
+//     let list = res.data.columns // 确保这里正确获取到 tables 数组
+//     dbColumnList.value = list.map((item) => {
+//       if (item.columnName === 'deleted_at') {
+//         // middleDate.value.dataSource.hasDeletedAt = true
+//       }
+//       return {
+//         columnName: item.columnName,
+//         value: item.columnName,
+//         type: item.dataType,
+//         isPrimary: item.primaryKey,
+//         comment: item.columnComment
+//       }
+//     })
+//     if (dbColumnList.value.length > 0 && !isInit) {
+//       // middleDate.value.dataSource.label = dbColumnList.value[0].columnName
+//       // middleDate.value.dataSource.value = dbColumnList.value[0].columnName
+//     }
+//   }
+// }
+const init = () => {
+  getDbFunc()
+  getTableFunc()
+  // getColumsFunc()
+}
+init()
 // 验证规则
 const rule = reactive({
               businessDB : [{
@ -229,11 +445,6 @@ const rule = reactive({
                   message: '',
                   trigger: ['input','blur'],
               },
-               {
-                   whitespace: true,
-                   message: '不能只输入空格',
-                   trigger: ['input', 'blur'],
-              }
              ],
               isEnable : [{
                   required: true,