添加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>