更新监控显示

src/api/sqlMonitor.js

@@ -71,3 +71,11 @@ export function isEnableSqlMonitor(data) {
     data
   })
 }
+// 获取sql监控详情
+export function getDetailSqlMonitor(queryInfo) {
+  return holmesRequest({
+    url: '/sql/monitor/detail',
+    method: 'get',
+    params: queryInfo
+  })
+}

src/views/monitor/AddSqlMonitor.vue

@@ -3,7 +3,7 @@
     <el-card>
       <el-form ref="sqlMonitorFormRef" :rules="rules" :model="sqlMonitorForm" label-width="90px">
         <el-form-item label="监控名称:" style="width:400px" prop="taskName">
-          <el-input v-model="sqlMonitorForm.taskName" placeholder="请输入监控名称"></el-input>
+          <el-input v-model.trim="sqlMonitorForm.taskName" placeholder="请输入监控名称"></el-input>
         </el-form-item>
         <el-form-item label="数据源:" prop="dsId">
           <el-select v-model="sqlMonitorForm.dsId" placeholder="请选择数据源" style="width:310px" clearable>
@@ -12,7 +12,7 @@
         </el-form-item>
         <el-form-item label="SQL脚本:" prop="sql">
           <div style="border:1.5px solid #DCDCDC;width:90%;">
-            <codemirror ref="editQuerySQL" v-model="sqlMonitorForm.sql" :options="cmOptions" @focus="testFoucs">
+            <codemirror ref="editQuerySQL" v-model.trim="sqlMonitorForm.sql" :options="cmOptions" @focus="testFoucs">
             </codemirror>
           </div>
         </el-form-item>
@@ -24,7 +24,7 @@
           <!-- 动态绑定表格数据 -->
           <el-table id="tabId" :data="sqlList" border style="font-size:8px;"
             :header-cell-style="{background:'#eee',color:'#606266'}" v-if="isShow" ref="tabRef">
-            <af-table-column v-for="(val, key) in columnArr" :label="val" :prop="val" :key="key" :fontRate='fontRate'>
+            <af-table-column v-for="(val, key) in columnArr" :label="val" :prop="val" :key="key">
             </af-table-column>
           </el-table>
         </el-form-item>
@@ -34,7 +34,7 @@
     <el-dialog title="报警策略" :visible.sync="DialogVisible" width="50%">
       <el-form ref="sqlMonitorFormRef" :rules="rules" :model="sqlMonitorForm" label-width="90px">
         <el-form-item label="服务名称:" prop="serviceName">
-          <el-select v-model="sqlMonitorForm.serviceName" placeholder="请选择服务名称" style="width:310px" filterable
+          <el-select v-model.trim="sqlMonitorForm.serviceName" placeholder="请选择服务名称" style="width:310px" filterable
             clearable>
             <el-option v-for="item in serviceList" :key="item.name" :label="item.name" :value="item.name"></el-option>
           </el-select>
@@ -46,16 +46,19 @@
           </el-select>
         </el-form-item>
         <el-form-item label="钉钉地址:" style="width:800px" prop="dingUrl">
-          <el-input v-model="sqlMonitorForm.dingUrl" placeholder="请输入钉钉通知地址" type="textarea" :rows="3">
+          <el-input v-model.trim="sqlMonitorForm.dingUrl" placeholder="请输入钉钉通知地址" type="textarea" :rows="3">
           </el-input>
         </el-form-item>
         <el-form-item label="消息内容:" style="width:800px" prop="dingText">
-          <el-input v-model="sqlMonitorForm.dingText" placeholder="可以使用表达式{0},{1}...表示取结果集的第一行第N列值,使用{count}表示取数据总条数"
-            type="textarea" :rows="3">
+          <el-input v-model.trim="sqlMonitorForm.dingText"
+            placeholder="可以使用表达式{0},{1}...表示取结果集的第一行第N列值,使用{count}表示取数据总条数" type="textarea" :rows="3">
           </el-input>
         </el-form-item>
+        <el-form-item label="负责人:" style="width:300px" prop="owner">
+          <el-input v-model="sqlMonitorForm.owner" placeholder="请输入负责人"></el-input>
+        </el-form-item>
         <el-form-item label="是否启用:">
-          <el-select v-model="sqlMonitorForm.status" placeholder="请选择是否启用" style="width:310px">
+          <el-select v-model="sqlMonitorForm.status" placeholder="请选择是否启用" style="width:210px">
             <el-option v-for="item in enableList" :label="item.lable" :key="item.value" :value="item.value"></el-option>
           </el-select>
         </el-form-item>
@@ -75,18 +78,17 @@ import {
   getMonitorStrategy,
   sendTestSqlMonitor,
   addSqlMonitor,
-  editSqlMonitor
+  editSqlMonitor,
+  getDetailSqlMonitor
 } from '@/api/sqlMonitor'
 import { getGitProjectList } from '@/api/jira'
 import { mapGetters } from 'vuex'
 // 编辑器引用
 import { codemirror } from 'vue-codemirror'
-
 import 'codemirror/lib/codemirror.css'
 import 'codemirror/theme/idea.css'
 import 'codemirror/theme/panda-syntax.css'
 import 'codemirror/addon/hint/show-hint.css'
-
 require('codemirror/lib/codemirror')
 require('codemirror/mode/sql/sql')
 require('codemirror/addon/hint/show-hint')
@@ -105,7 +107,6 @@ export default {
       return this.$refs.editQuerySQL.codemirror
     }
   },
-
   data() {
     return {
       cmOptions: {
@@ -131,8 +132,8 @@ export default {
         dingUrl: '',
         dingText: '',
         status: 1,
-        serviceName: ''
-        // owner: this.getUserName
+        serviceName: '',
+        owner: ''
       },
       dataSourceList: [],
       sqlList: [],
@@ -199,54 +200,50 @@ export default {
             message: '消息内容不能为空！',
             trigger: 'blur'
           }
+        ],
+        owner: [
+          {
+            required: true,
+            message: '负责人不能为空！',
+            trigger: 'blur'
+          }
         ]
       }
     }
   },
-  // 接收列表页面传递的参数
-  // activated() {
-  //   this.DialogVisible = false
-  //   var data = this.$route.query.data
-  //   console.log('rrr', data)
-  //   if (data === 'add') {
-  //     this.isShow = false
-  //     this.sqlMonitorForm = {}
-  //     this.sqlMonitorForm.status = 1
-  //     this.sqlMonitorForm.sql = ''
-  //   } else {
-  //     this.isShow = false
-  //     this.sqlMonitorForm.id = data.id
-  //     this.sqlMonitorForm.dingText = data.dingText
-  //     this.sqlMonitorForm.dingUrl = data.dingUrl
-  //     this.sqlMonitorForm.dsId = data.dsId
-  //     this.sqlMonitorForm.serviceName = data.serviceName
-  //     this.sqlMonitorForm.sql = data.sql
-  //     this.sqlMonitorForm.status = data.status
-  //     this.sqlMonitorForm.taskCron = data.taskCron
-  //     this.sqlMonitorForm.taskName = data.taskName
-  //   }
-  // },
+  // 接收列表页面传递的参数，赋值到编辑页面中
+  activated() {
+    this.DialogVisible = false
+    var id = this.$route.query.id
+    getDetailSqlMonitor({ id: id }).then((resp) => {
+      if (resp.data.businessCode === '0000') {
+        var data = resp.data.data
+        this.isShow = false
+        this.sqlMonitorForm.id = data.id
+        this.sqlMonitorForm.dingText = data.dingText
+        this.sqlMonitorForm.dingUrl = data.dingUrl
+        this.sqlMonitorForm.dsId = data.dsId
+        this.sqlMonitorForm.serviceName = data.serviceName
+        this.sqlMonitorForm.sql = data.sql
+        this.sqlMonitorForm.status = data.status
+        this.sqlMonitorForm.taskCron = data.taskCron
+        this.sqlMonitorForm.taskName = data.taskName
+        this.sqlMonitorForm.owner = data.owner
+      }
+    })
+  },
   created() {
     this.getSqlMonitorDataSource()
     this.$bus.$on('data', (row) => {
-      // console.log('rrr', row)
       if (row !== null) {
         if (row === 'add') {
+          // 整体页面刷新
+          // location.reload()
           this.isShow = false
           this.sqlMonitorForm = {}
+          this.sqlMonitorForm.owner = this.getUserName
           this.sqlMonitorForm.status = 1
           this.sqlMonitorForm.sql = ''
-        } else {
-          this.isShow = false
-          this.sqlMonitorForm.id = row.id
-          this.sqlMonitorForm.dingText = row.dingText
-          this.sqlMonitorForm.dingUrl = row.dingUrl
-          this.sqlMonitorForm.dsId = row.dsId
-          this.sqlMonitorForm.serviceName = row.serviceName
-          this.sqlMonitorForm.sql = row.sql
-          this.sqlMonitorForm.status = row.status
-          this.sqlMonitorForm.taskCron = row.taskCron
-          this.sqlMonitorForm.taskName = row.taskName
         }
       }
     })
@@ -254,7 +251,7 @@ export default {
   methods: {
     testFoucs() {
       var editor = this.$refs.editQuerySQL.codemirror
-      editor.on('cursorActivity', function () {
+      editor.on('inputRead', function () {
         editor.showHint()
       })
     },
@@ -307,6 +304,7 @@ export default {
     },
     // 发送测试按钮
     sendTest() {
+      this.sqlMonitorForm.dingUrl.replace('\\n', '')
       sendTestSqlMonitor(this.sqlMonitorForm).then((resp) => {
         if (resp.data.businessCode === '0000') {
           return this.$message.success(resp.data.msg)
@@ -329,8 +327,9 @@ export default {
     },
     // 保存按钮
     saveSqlMonitorFrom() {
-      this.sqlMonitorForm.owner = this.getUserName
       this.sqlMonitorForm.taskClass = 'SqlMonitorHandler'
+      // 将换行符转化为空
+      this.sqlMonitorForm.dingUrl.replace('\\n', '')
       this.$refs.sqlMonitorFormRef.validate((valid) => {
         if (!valid) {
           return false

src/views/monitor/SqlMonitorList.vue

@@ -21,6 +21,8 @@
         <el-table-column label="监控名称" prop="taskName" width="180px"></el-table-column>
         <el-table-column label="执行策略" prop="taskCron" width="180px">
           <template slot-scope="scope">
+            <p v-if="scope.row.taskCron==='0 */1 * * * ?'">每1分钟执行一次</p>
+            <p v-if="scope.row.taskCron==='0 */5 * * * ?'">每5分钟执行一次</p>
             <p v-if="scope.row.taskCron==='0 0 * * * ?'">每小时执行一次</p>
             <p v-if="scope.row.taskCron==='0 0 10 * * ?'">每天10点执行一次</p>
             <p v-if="scope.row.taskCron==='0 0 10 ? * 2'">每周一上午10点执行一次</p>
@@ -38,8 +40,10 @@
         <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>
+            <!-- <p v-if="scope.row.status===1">启用</p>
+            <p v-if="scope.row.status===0">禁用</p> -->
+            <el-tag type="success" v-if="scope.row.status===1">启用</el-tag>
+            <el-tag type="info" v-if="scope.row.status===0">禁用</el-tag>
           </template>
         </el-table-column>
         <el-table-column label="创建时间" prop="createTime" width="180px"></el-table-column>
@@ -87,13 +91,6 @@ export default {
       serviceList: []
     }
   },
-  // 接收参数
-  // activated() {
-  //   var data = this.$route.query.data
-  //   if (data === 'refresh') {
-  //     this.getSqlMonitorList()
-  //   }
-  // },
   created() {
     this.getSqlMonitorList()
     this.getServiceList()
@@ -118,9 +115,6 @@ export default {
     addSqlMonitor() {
       this.$router.push({
         path: `/monitor/addSqlMonitor`
-        // query: {
-        //   data: 'add'
-        // }
       })
       this.$nextTick(function () {
         // DOM 现在更新了
@@ -131,14 +125,10 @@ export default {
     // 编辑按钮
     openEditMonitorDialog(row) {
       this.$router.push({
-        path: `/monitor/addSqlMonitor`
-        // query: {
-        //   data: row
-        // }
-      })
-      this.$nextTick(function () {
-        // DOM 现在更新了
-        this.$bus.$emit('data', row)
+        path: `/monitor/addSqlMonitor`,
+        query: {
+          id: row.id
+        }
       })
     },
     // 获取服务列表