添加sql监控页面

src/api/sqlMonitor.js

+import holmesRequest from '@/utils/holmesRequest'
+// 获取sql监控列表
+export function getSqlMonitorList(queryInfo) {
+  return holmesRequest({
+    url: '/monitor/task/list',
+    method: 'get',
+    params: queryInfo
+  })
+}
+// 新增sql监控
+export function addSqlMonitor(data) {
+  return holmesRequest({
+    url: '/monitor/task/add',
+    method: 'post',
+    data
+  })
+}
+// 编辑sql监控
+export function editSqlMonitor(data) {
+  return holmesRequest({
+    url: '/monitor/task/edit',
+    method: 'post',
+    data
+  })
+}
+// 删除sql监控
+export function delSqlMonitor(data) {
+  return holmesRequest({
+    url: '/monitor/task/delete',
+    method: 'post',
+    data
+  })
+}
+// 执行sql监控
+export function executeSqlMonitor(data) {
+  return holmesRequest({
+    url: '/monitor/task/execute',
+    method: 'post',
+    data
+  })
+}
+// 发送sql监控
+export function sendTestSqlMonitor(data) {
+  return holmesRequest({
+    url: '/monitor/task/test',
+    method: 'post',
+    data
+  })
+}
+// 获取数据源列表
+export function getSqlMonitorData(queryInfo) {
+  return holmesRequest({
+    url: '/monitor/ds/list',
+    method: 'post',
+    params: queryInfo
+  })
+}

src/router/index.js

@@ -61,7 +61,9 @@ import BindAddress from '../views/yxm/BindAddress'
 import TestDescription from '../views/qa/TestDescription'
 // 新添加提测说明详情页面(2021-11-10)
 import DetailTestDescription from '../views/qa/DetailTestDescription'
-
+// 新添加sql监控(2021-12-28)
+import SqlMonitorList from '../views/monitor/SqlMonitorList'
+import AddSqlMonitor from '../views/monitor/AddSqlMonitor'
 const originalPush = Router.prototype.push
 Router.prototype.push = function push(location) {
   return originalPush.call(this, location).catch(err => err)
@@ -319,6 +321,18 @@ const router = new Router({
           path: '/qa/detailTestDescription',
           name: DetailTestDescription,
           component: DetailTestDescription
+        },
+        // 添加sql监控列表页面(2021-12-28)
+        {
+          path: '/monitor/sqlMonitorList',
+          name: SqlMonitorList,
+          component: SqlMonitorList
+        },
+        // 添加sql监控新增页面(2021-12-28)
+        {
+          path: '/monitor/addSqlMonitor',
+          name: AddSqlMonitor,
+          component: AddSqlMonitor
         }
       ]
     }

src/views/layout/leftAside/menu.json

@@ -268,6 +268,19 @@
     },
     {
       "id": 9,
+      "title": "线上监控",
+      "icon": "iconfont icon-quality",
+      "child": [   
+        {
+          "id": 1,
+          "title": "sql监控",
+          "icon": "iconfont icon-explain",
+          "path": "/monitor/sqlMonitorList"
+        }
+      ]
+    },
+    {
+      "id": 10,
       "title": "用户权限管理",
       "icon": "iconfont icon-mg-role",
       "child": [

src/views/monitor/AddSqlMonitor.vue

+<template>
+  <div>
+    <el-card>
+      <el-form ref="caseFormRef" :model="caseForm" label-width="90px">
+        <el-form-item label="模块名称:" style="width:200px">
+          <el-input v-model="sqlMonitorForm.taskName" placeholder="请输入监控名称"></el-input>
+        </el-form-item>
+        <el-form-item label="数据源">
+          <el-select v-model="sqlMonitorForm.dsId" placeholder="请选择数据源" clearable>
+            <el-option v-for="item in dataSourceList" :key="item.id" :label="item.name" :value="item.id"></el-option>
+          </el-select>
+        </el-form-item>
+
+      </el-form>
+    </el-card>
+  </div>
+</template>
+<script>
+import { getSqlMonitorData } from '@/api/sqlMonitor'
+export default {
+  data() {
+    return {
+      sqlMonitorForm: {},
+      dataSourceList: []
+    }
+  },
+  created() {
+    this.getSqlMonitorDataSource()
+  },
+  methods: {
+    // 获取数据源列表
+    getSqlMonitorDataSource() {
+      getSqlMonitorData().then((resp) => {
+        console.log('www', resp)
+      })
+    }
+  }
+}
+</script>

src/views/monitor/SqlMonitorList.vue

+<template>
+  <div>
+    <el-card>
+      <div>
+        服务名称:
+        <el-select v-model="queryModuleInfo.serviceName" placeholder="请选择服务名称" filterable clearable>
+          <el-option v-for="item in serviceList" :key="item.name" :label="item.name" :value="item.name"></el-option>
+        </el-select>
+        <el-input v-model="queryModuleInfo.taskName" clearable placeholder="请输入监控名称" style="width: 300px;">
+        </el-input>
+        <el-button type="primary" style="margin-left:10px" icon="el-icon-search" @click="queryData">查询</el-button>
+        <el-button type="primary" style="margin-left:10px" icon="el-icon-circle-plus" @click="addSqlMonitor"
+          v-permission="('monitor:sql:add')">新增</el-button>
+      </div>
+      <el-table :data="sqlMonitorList" border style="width: 100%;margin-top:20px">
+        <el-table-column type='index' width="50px">
+          <template slot-scope="scope">
+            <span>{{(queryModuleInfo.pageNum -1 ) * queryModuleInfo.pageSize + scope.$index + 1}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="监控名称" prop="taskName" width="180px"></el-table-column>
+        <el-table-column label="执行策略" prop="taskCron" width="180px"></el-table-column>
+        <el-table-column label="sql" width="150px">
+          <template slot-scope="scope">
+            <el-popover placement="top-start" title="sql" width="50" trigger="hover" :content="scope.row.sql">
+              <div slot="reference" style="color:#409EFF">SQL</div>
+            </el-popover>
+          </template>
+        </el-table-column>
+        <el-table-column label="服务名称" prop="serviceName" width="100px"></el-table-column>
+        <el-table-column label="数据源" prop="dsName" width="80px"></el-table-column>
+        <el-table-column label="负责人" prop="owner" width="80px"></el-table-column>
+        <el-table-column label="当前状态" width="80px">
+          <template slot-scope="scope">
+            <p v-if="scope.row.status===1">启用</p>
+            <p v-if="scope.row.status===0">禁用</p>
+          </template>
+        </el-table-column>
+        <el-table-column label="创建时间" prop="createTime" width="180px"></el-table-column>
+        <el-table-column label="操作">
+          <slot slot-scope="scope">
+            <el-button type="warning" icon="el-icon-edit" @click="openEditDialog(scope.row)"
+              v-permission="('monitor:sql:edit')">编辑</el-button>
+            <el-button type="success" icon="el-icon-success" @click="openEditDialog(scope.row)"
+              v-permission="('monitor:sql:enable')" style="margin-left:1px">启用</el-button>
+            <el-button type="danger" icon="el-icon-delete" @click="delSqlMonitor(scope.row)"
+              v-permission="('monitor:sql:del')" style="margin-left:1px">删除</el-button>
+          </slot>
+        </el-table-column>
+      </el-table>
+      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
+        :current-page.sync="queryModuleInfo.pageNum" :page-size="queryModuleInfo.pageSize"
+        layout="total, prev, pager, next" :total="totalNum">
+      </el-pagination>
+    </el-card>
+  </div>
+</template>
+<script>
+import { getSqlMonitorList, delSqlMonitor } from '@/api/sqlMonitor'
+import { getGitProjectList } from '@/api/jira'
+export default {
+  data() {
+    return {
+      queryModuleInfo: {
+        serviceName: '',
+        taskName: '',
+        pageNum: 1,
+        pageSize: 10
+      },
+      totalNum: 0,
+      sqlMonitorList: [],
+      serviceList: []
+    }
+  },
+  created() {
+    this.getSqlMonitorList()
+    this.getServiceList()
+  },
+  methods: {
+    // 获取sql监控列表
+    getSqlMonitorList() {
+      getSqlMonitorList(this.queryModuleInfo).then((resp) => {
+        this.sqlMonitorList = resp.data.data.list
+        this.totalNum = resp.data.data.total
+        // console.log('返回信息', resp)
+      })
+    },
+    // 查询按钮
+    queryData() {
+      this.getSqlMonitorList()
+    },
+    // 添加按钮
+    addSqlMonitor() {
+      this.$router.push({
+        path: `/monitor/addSqlMonitor`
+      })
+    },
+    // 获取服务列表
+    getServiceList() {
+      getGitProjectList().then((resp) => {
+        this.serviceList = resp.data.data
+      })
+    },
+    // 对话框方法
+    openMessage(message, confirmText, doit) {
+      this.$messageBox
+        .confirm(message, '确定', {
+          cancelButtonText: '取消',
+          confirmButtonText: confirmText,
+          type: 'warning'
+        })
+        .then(() => {
+          doit()
+        })
+        .catch(() => {})
+    },
+    // 删除sql监控
+    delSqlMonitor(row) {
+      this.openMessage('您确定要删除吗？', '删除', () => {
+        delSqlMonitor(row)
+          .then((resp) => {
+            if (resp.data.businessCode === '0000') {
+              this.$message.success(resp.data.msg)
+              this.getSqlMonitorList()
+            } else {
+              this.$message.error(resp.data.msg)
+            }
+          })
+          .catch((error) => {
+            this.$message({ type: 'error', message: error })
+          })
+      })
+    },
+
+    handleSizeChange(newSize) {
+      this.queryModuleInfo.pageSize = newSize
+      this.getSqlMonitorList()
+    },
+    handleCurrentChange(newPage) {
+      this.queryModuleInfo.pageNum = newPage
+      this.getSqlMonitorList()
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+.el-select {
+  margin-right: 20px;
+}
+</style>

src/views/qa/AddTestDescription.vue

-<template>
-  <div>
-    <el-form ref="addTestDescriptionRef" :rules="rules" :model="addTestDescriptionForm" label-width="88px"
-      style="margin-left:25px">
-      <el-form-item label="Jira项目:" prop="jiraProjectKey">
-        <el-select v-model="addTestDescriptionForm.jiraProjectKey" placeholder="请选择Jira项目" filterable clearable>
-          <el-option v-for="item in jiraProjectList" :key="item.key" :label="item.name" :value="item.key">
-          </el-option>
-        </el-select>
-      </el-form-item>
-      <el-form-item label="项目名称:" style="width:400px" prop="projectName">
-        <el-input v-model="addTestDescriptionForm.projectName" placeholder="请输入项目名称"></el-input>
-      </el-form-item>
-      <!-- 服务及分支 -->
-      <el-form-item label="服务及分支:">
-        <el-table :data="serviceAndBranchList" border style="width:90%;margin-top:5px;">
-          <el-table-column label="服务" width="310">
-            <template slot-scope="scope">
-              <el-select v-model="scope.row.serviceName" filterable placeholder="请选择服务"
-                @change="selectServiceModel(scope.row.serviceName)" clearable style="width:280px">
-                <el-option v-for="item2 in serviceList" :key="item2.name" :label="item2.name" :value="item2.name">
-                </el-option>
-              </el-select>
-            </template>
-          </el-table-column>
-          <el-table-column label="分支" width="310">
-            <template slot-scope="scope">
-              <el-select v-model="scope.row.branch" filterable placeholder="请选择分支" clearable
-                @focus="focusevent(scope.row.serviceName)" style="width:280px">
-                <el-option v-for="item2 in serviceBranchList" :key="item2.name" :label="item2.name" :value="item2.name">
-                </el-option>
-              </el-select>
-            </template>
-          </el-table-column>
-          <el-table-column label="开发负责人" width="190">
-            <template slot-scope="scope">
-              <el-input v-model="scope.row.developer"></el-input>
-            </template>
-          </el-table-column>
-          <el-table-column label="操作">
-            <template slot-scope="scope">
-              <el-button type="danger" size="mini" icon="el-icon-delete" @click="serviceAndBranchDelete(scope.$index)">
-                删除
-              </el-button>
-            </template>
-          </el-table-column>
-        </el-table>
-        <el-button type="primary" size="mini" plain class="el-icon-circle-plus" style="margin-top:10px"
-          @click="addServiceAndBranchRow()">添加行</el-button>
-      </el-form-item>
-      <!-- apollo变更 -->
-      <el-form-item label="apollo变更:">
-        <el-table :data="apolloList" border style="width:90%;margin-top:5px;">
-          <el-table-column label="项目名称" width="230">
-            <template slot-scope="scope">
-              <el-select v-model="scope.row.projectName" placeholder="请选择项目" filterable clearable>
-                <el-option v-for="item in projectNameList" :key="item.projectName" :label="item.projectName"
-                  :value="item.projectName">
-                </el-option>
-              </el-select>
-            </template>
-          </el-table-column>
-          <el-table-column label="apollo Key" width="290">
-            <template slot-scope="scope">
-              <el-input v-model="scope.row.key">
-              </el-input>
-            </template>
-          </el-table-column>
-          <el-table-column label="apollo value" width="290">
-            <template slot-scope="scope">
-              <el-input v-model="scope.row.value">
-              </el-input>
-            </template>
-          </el-table-column>
-          <el-table-column label="操作">
-            <template slot-scope="scope">
-              <el-button type="danger" size="mini" icon="el-icon-delete" @click="apolloDelete(scope.$index)">删除
-              </el-button>
-            </template>
-          </el-table-column>
-        </el-table>
-        <el-button type="primary" size="mini" plain class="el-icon-circle-plus" style="margin-top:10px"
-          @click="addApolloListRow()">添加行</el-button>
-      </el-form-item>
-      <!-- 数据库变更 -->
-      <el-form-item label="数据库变更:">
-        <el-table :data="databaseList" border style="width:90%;margin-top:5px;">
-          <el-table-column label="数据库名称" width="210">
-            <template slot-scope="scope">
-              <el-select v-model="scope.row.db" placeholder="请选择" filterable clearable>
-                <el-option v-for="item in queryDataBaseList" :key="item" :label="item" :value="item">
-                </el-option>
-              </el-select>
-            </template>
-          </el-table-column>
-          <el-table-column label="sql" width="600px">
-            <template slot-scope="scope">
-              <el-input v-model.trim="scope.row.sql" type="textarea" autosize>
-              </el-input>
-            </template>
-          </el-table-column>
-          <el-table-column label="操作">
-            <template slot-scope="scope">
-              <el-button type="danger" size="mini" icon="el-icon-delete" @click="databaseDelete(scope.$index)">删除
-              </el-button>
-            </template>
-          </el-table-column>
-        </el-table>
-        <el-button type="primary" size="mini" plain class="el-icon-circle-plus" style="margin-top:10px"
-          @click="addDatabaseListRow()">添加行</el-button>
-      </el-form-item>
-      <el-form-item label="需求地址:" style="width:91%">
-        <el-input v-model="addTestDescriptionForm.requirement"></el-input>
-      </el-form-item>
-      <el-form-item label="接口地址:" style="width:91%">
-        <el-input v-model="addTestDescriptionForm.api"></el-input>
-      </el-form-item>
-      <el-form-item label="其它:" style="width:91%">
-        <el-input v-model="addTestDescriptionForm.scope" type="textarea"></el-input>
-      </el-form-item>
-    </el-form>
-    <span slot="footer" class="dialog-footer">
-      <el-button @click="DialogAddVisible=false">取 消</el-button>
-      <el-button type="primary" @click="addTestDescriptionFrom">确 定</el-button>
-    </span>
-
-  </div>
-</template>
-<script>
-import {
-  getJiraProjectList,
-  getGitProjectList,
-  getGitBranchList
-} from '@/api/jira'
-import {
-  addTestDescription,
-  editTestDescription,
-  getProjectNameList
-} from '@/api/TestDesciption'
-import { getDataBaseList } from '@/api/effect'
-// import bus from '@/utils/bus'
-import { mapGetters } from 'vuex'
-export default {
-  computed: {
-    ...mapGetters({
-      // 获取用户名称(可当作全局变量使用)
-      getUserName: 'user/chineseName'
-    })
-  },
-  data() {
-    return {
-      queryModuleInfo: {
-        projectName: '',
-        jiraProjectKey: '',
-        pageNum: 1,
-        pageSize: 10
-      },
-      totalNum: 0,
-      DialogAddVisible: false,
-      jiraProjectList: [],
-      addTestDescriptionForm: {
-        id: '',
-        jiraProjectKey: '',
-        projectName: '',
-        serviceAndBranch: '',
-        apollo: '',
-        database: '',
-        requirement: '',
-        api: '',
-        scope: ''
-      },
-      rules: {
-        jiraProjectKey: [
-          {
-            required: true,
-            message: '请选择项目名称',
-            trigger: 'blur'
-          }
-        ],
-        projectName: [
-          {
-            required: true,
-            message: '请输入项目名称',
-            trigger: 'blur'
-          }
-        ]
-      },
-      serviceList: [],
-      serviceBranchList: [],
-      queryDataBaseList: [],
-      serviceAndBranchList: [],
-      apolloList: [],
-      databaseList: [],
-      projectNameList: []
-    }
-  },
-  created() {
-    this.getJiraProjectList()
-    // 获取所有的服务
-    this.getServiceList()
-    // 获取所有项目
-    this.getProjectNameList()
-  },
-  methods: {
-    // 复制模板内容
-    // copyTemplate(id) {
-    //   let value = this.baseURL + '/xxx/xxx/xxx/xxx/xxx?authorization=&id=' + id
-    //   this.copyToClipboard(value) // 需要复制的文本内容
-    //   this.$message.success('复制成功，注意带变量字段内容请自行替换！')
-    // },
-    // 获取jira项目列表
-    getJiraProjectList() {
-      getJiraProjectList().then((resp) => {
-        this.jiraProjectList = resp.data.data
-      })
-    },
-    // 获取服务列表
-    getServiceList() {
-      getGitProjectList().then((resp) => {
-        this.serviceList = resp.data.data
-      })
-    },
-    focusevent(name) {
-      getGitBranchList({ projectName: name }).then((resp) => {
-        this.serviceBranchList = resp.data.data.data
-      })
-    },
-    // 选择服务下拉框触发事件
-    selectServiceModel(item) {
-      getGitBranchList({ projectName: item }).then((resp) => {
-        this.serviceBranchList = resp.data.data.data
-      })
-    },
-    // 添加服务及分支
-    addServiceAndBranchRow() {
-      this.serviceAndBranchList.push({
-        serviceName: '',
-        branch: '',
-        developer: this.getUserName
-      })
-    },
-    // 删除服务及分支
-    serviceAndBranchDelete(index) {
-      this.serviceAndBranchList.splice(index, 1)
-    },
-    // 添加apollo配置行
-    addApolloListRow() {
-      this.apolloList.push({
-        projectName: '',
-        key: '',
-        value: ''
-      })
-    },
-    // 删除apollo配置行
-    apolloDelete(index) {
-      this.apolloList.splice(index, 1)
-    },
-    // 添加数据库行
-    addDatabaseListRow() {
-      this.databaseList.push({
-        db: '',
-        sql: ''
-      })
-    },
-    // 删除数据库
-    databaseDelete(index) {
-      this.databaseList.splice(index, 1)
-    },
-    // 获取数据库列表信息
-    getDataBaseList() {
-      getDataBaseList().then((resp) => {
-        this.queryDataBaseList = resp.data.data
-      })
-    },
-    // 保存数据按钮
-    addTestDescriptionFrom() {
-      // 将数组对象转化为Json字符串
-      this.addTestDescriptionForm.serviceAndBranch = JSON.stringify(
-        this.serviceAndBranchList
-      )
-      this.addTestDescriptionForm.apollo = JSON.stringify(this.apolloList)
-      this.addTestDescriptionForm.database = JSON.stringify(this.databaseList)
-      this.$refs.addTestDescriptionRef.validate((valid) => {
-        if (!valid) {
-          return false
-        } else {
-          // 编辑测试文档
-          if (this.addTestDescriptionForm.id) {
-            editTestDescription(this.addTestDescriptionForm).then((resp) => {
-              if (resp.data.businessCode === '0000') {
-                this.$message.success(resp.data.msg)
-                this.DialogAddVisible = false
-              } else {
-                this.$message.error(resp.data.msg)
-              }
-            })
-          } else {
-            // 添加测试文档
-            addTestDescription(this.addTestDescriptionForm).then((resp) => {
-              if (resp.data.businessCode === '0000') {
-                this.$message.success(resp.data.msg)
-                this.DialogAddVisible = false
-              } else {
-                this.$message.error(resp.data.msg)
-              }
-            })
-          }
-        }
-      })
-    },
-    // 编辑对话框
-    openEditDialog(row) {
-      this.DialogAddVisible = true
-      this.getDataBaseList()
-      this.addTestDescriptionForm.id = row.id
-      this.addTestDescriptionForm.projectName = row.projectName
-      this.addTestDescriptionForm.jiraProjectKey = row.jiraProjectKey
-      this.addTestDescriptionForm.requirement = row.requirement
-      this.addTestDescriptionForm.api = row.api
-      this.addTestDescriptionForm.scope = row.scope
-      this.serviceAndBranchList = JSON.parse(row.serviceAndBranch)
-      this.apolloList = JSON.parse(row.apollo)
-      this.databaseList = JSON.parse(row.database)
-    },
-    // 获取所有项目名称
-    getProjectNameList() {
-      getProjectNameList().then((resp) => {
-        console.log('444', resp)
-        this.projectNameList = resp.data.data
-      })
-    }
-  }
-}
-</script>
-<style lang="less" scoped>
-.btn-style {
-  margin-top: 10px;
-}
-.el-select {
-  margin: 0 10px 0 5px;
-}
-</style>