更新sql监控

src/assets/css/iconfont.css

@@ -13,6 +13,22 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-SQL:before {
+  content: "\e68c";
+}
+
+.icon-jiankong:before {
+  content: "\e69e";
+}
+
+.icon-jiankongkongzhiguanli:before {
+  content: "\e64f";
+}
+
+.icon-jiankong1:before {
+  content: "\ef8c";
+}
+
 .icon-explain:before {
   content: "\e6f6";
 }

src/assets/fonts/iconfont.json

@@ -5,6 +5,34 @@
   "css_prefix_text": "icon-",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "2654344",
+      "name": "SQL",
+      "font_class": "SQL",
+      "unicode": "e68c",
+      "unicode_decimal": 59020
+    },
+    {
+      "icon_id": "3172484",
+      "name": "监控",
+      "font_class": "jiankong",
+      "unicode": "e69e",
+      "unicode_decimal": 59038
+    },
+    {
+      "icon_id": "12975224",
+      "name": "监控控制管理",
+      "font_class": "jiankongkongzhiguanli",
+      "unicode": "e64f",
+      "unicode_decimal": 58959
+    },
+    {
+      "icon_id": "18538407",
+      "name": "监控",
+      "font_class": "jiankong1",
+      "unicode": "ef8c",
+      "unicode_decimal": 61324
+    },
     {
       "icon_id": "7573251",
       "name": "explain",

src/main.js

@@ -19,7 +19,7 @@ import hljs from 'highlight.js'
 import 'highlight.js/styles/googlecode.css'
 // 引用sql编辑器(2021-12-30)
 import AFTableColumn from 'af-table-column'
-
+// sql编辑器
 import { codemirror } from 'vue-codemirror'
 import 'codemirror/lib/codemirror.css'
 

src/views/layout/leftAside/menu.json

@@ -269,12 +269,12 @@
     {
       "id": 9,
       "title": "线上监控",
-      "icon": "iconfont icon-quality",
+      "icon": "iconfont icon-jiankong",
       "child": [   
         {
           "id": 1,
-          "title": "sql监控",
-          "icon": "iconfont icon-explain",
+          "title": "SQL监控",
+          "icon": "iconfont icon-SQL",
           "path": "/monitor/sqlMonitorList"
         }
       ]

src/views/monitor/AddSqlMonitor.vue

@@ -10,13 +10,10 @@
             <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-item>
-          <el-button @click="sqlFormat">格式化</el-button>
-        </el-form-item>
         <el-form-item label="SQL脚本:" prop="sql">
-          <!-- <textarea ref="mycode" v-model="sqlMonitorForm.sql" placeholder="请输入sql语句"
-            style="height:200px;width:600px"></textarea> -->
-          <codemirror ref="editQuerySQL" v-model="sqlMonitorForm.sql" :options="cmOptions" class="code"></codemirror>
+          <div style="border:1.5px solid #DCDCDC">
+            <codemirror ref="editQuerySQL" v-model="sqlMonitorForm.sql" :options="cmOptions"></codemirror>
+          </div>
         </el-form-item>
         <el-form-item style="margin-left:1000px">
           <el-button type="primary" icon="el-icon-caret-right" @click="executeSqlBtn">执行</el-button>
@@ -26,7 +23,7 @@
           <!-- 动态绑定表格数据 -->
           <el-table :data="sqlList" border style="font-size:8px;"
             :header-cell-style="{background:'#eee',color:'#606266'}" v-if="isShow">
-            <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" class="table-dynamic">
             </af-table-column>
           </el-table>
         </el-form-item>
@@ -82,24 +79,6 @@ import {
 import { getGitProjectList } from '@/api/jira'
 import { mapGetters } from 'vuex'
 // 编辑器引用
-// import { codemirror } from 'vue-codemirror'
-// import 'codemirror/lib/codemirror.css'
-// import 'codemirror/theme/base16-light.css'
-// import 'codemirror/addon/hint/show-hint.css'
-// import 'codemirror/theme/ambiance.css'
-
-// let CodeMirror = require('codemirror/lib/codemirror')
-// require('codemirror/mode/sql/sql.js')
-// require('codemirror/addon/edit/matchbrackets')
-// require('codemirror/addon/selection/active-line')
-// require('codemirror/mode/sql/sql')
-// require('codemirror/addon/hint/show-hint')
-// require('codemirror/addon/hint/sql-hint')
-// require('codemirror/addon/hint/sql-hint.js')
-// require('codemirror/addon/hint/show-hint.js')
-// require('codemirror/addon/selection/active-line.js')
-// import sqlFormatter from 'sql-formatter'
-
 import { codemirror } from 'vue-codemirror'
 
 import 'codemirror/lib/codemirror.css'
@@ -119,8 +98,13 @@ export default {
     ...mapGetters({
       // 获取用户名称(可当作全局变量使用)
       getUserName: 'user/chineseName'
-    })
+    }),
+    // 设置编辑器
+    codemirror() {
+      return this.$refs.editQuerySQL.codemirror
+    }
   },
+
   data() {
     return {
       cmOptions: {
@@ -207,11 +191,21 @@ export default {
             message: '钉钉地址不能为空！',
             trigger: 'blur'
           }
+        ],
+        dingText: [
+          {
+            required: true,
+            message: '消息内容不能为空！',
+            trigger: 'blur'
+          }
         ]
-      }
+      },
+      tableWidth: ''
     }
   },
-
+  watch: {
+    tableWidth: 'getTableWidth'
+  },
   // 接收列表页面传递的参数
   activated() {
     var data = this.$route.query.data
@@ -235,74 +229,56 @@ export default {
     this.getSqlMonitorDataSource()
   },
   mounted() {
-    // let mime = 'text/x-mariadb'
-    // // let theme = 'ambiance'//设置主题，不设置的会使用默认主题
-    // this.editor = CodeMirror.fromTextArea(this.$refs.mycode, {
-    //   mode: mime, // 选择对应代码编辑器的语言，我这边选的是数据库，根据个人情况自行设置即可
-    //   tabSize: 2,
-    //   indentWithTabs: true,
-    //   // 自动缩进
-    //   smartIndent: true,
-    //   // 显示行号
-    //   lineNumbers: true,
-    //   // 匹配结束符号
-    //   matchBrackets: true,
-    //   // theme: theme,
-    //   // 自动聚焦
-    //   autofocus: true,
-    //   // 自定义快捷键
-    //   // extraKeys: { Ctrl: 'autocomplete' }, // 自定义快捷键
-    //   // hint: CodeMirror.hint.sql,
-    //   hintOptions: {
-    //     // 自定义提示选项
-    //     tables: {
-    //       users: ['name', 'score', 'birthDate'],
-    //       countries: ['name', 'population', 'size']
-    //     }
-    //     // tables: window.tablewords
-    //   }
-    // })
-
-    // 代码自动提示功能，记住使用cursorActivity事件不要使用change事件，这是一个坑，那样页面直接会卡死 cursorActivity
-    this.editQuerySQL.on('cursorActivity', function () {
-      console.log('iii', this.editQuerySQL)
-      this.editQuerySQL.showHint()
+    var editor = this.$refs.editQuerySQL.codemirror
+    editor.on('cursorActivity', function () {
+      editor.showHint()
     })
   },
   methods: {
-    sqlFormat() {
-      // let sqlContent = ''
-      // sqlContent = this.editor.getValue()
-      // /* 将sql内容进行格式后放入编辑器中 */
-      // this.editor.setValue(sqlFormatter.format(sqlContent))
+    getTableWidth() {
+      for (let i = 0; i < document.getElementsByClassName('table-dynamic').length; i++) {
+        var item = document.getElementsByClassName('table-dynamic')[i]
+        console.log(item)
+      }
     },
     // 获取数据源列表
     getSqlMonitorDataSource() {
       getSqlMonitorData().then((resp) => {
         this.dataSourceList = resp.data.data
-        // console.log('www', resp)
       })
     },
     // 执行sqla按钮
     executeSqlBtn() {
-      console.log('sql值', this.sqlMonitorForm.sql)
       var formData = new FormData()
       formData.set('dsId', this.sqlMonitorForm.dsId)
       formData.set('sql', this.sqlMonitorForm.sql)
-
+      if (this.sqlMonitorForm.dsId === undefined) {
+        return this.$message.error('请选择数据源！')
+      }
       executeSqlMonitor(formData).then((resp) => {
-        var data = resp.data.data
-        this.sqlList = data
-        if (data.length) {
-          this.isShow = true
-          // 获取表格第一行数据
-          const row = data[0]
-          const columnArr = []
-          // 循环获取第一行的表头数据
-          for (let i in row) {
-            columnArr.push(i)
+        if (resp.data.businessCode === '0000') {
+          var data = resp.data.data
+          // 给表格绑定数据源
+          this.sqlList = data
+          if (data !== null) {
+            if (data.length) {
+              this.isShow = true
+              // 获取表格第一行数据
+              const row = data[0]
+              const columnArr = []
+              // 循环获取第一行的表头数据
+              for (let i in row) {
+                columnArr.push(i)
+              }
+              this.columnArr = columnArr
+            } else {
+              return this.$message.error('没有查询到任何数据！')
+            }
+          } else {
+            return this.$message.error('没有查询到任何数据！')
           }
-          this.columnArr = columnArr
+        } else {
+          return this.$message.error(resp.data.msg)
         }
       })
     },
@@ -339,7 +315,6 @@ export default {
     saveSqlMonitorFrom() {
       this.sqlMonitorForm.owner = this.getUserName
       this.sqlMonitorForm.taskClass = 'SqlMonitorHandler'
-      // console.log('参数', this.sqlMonitorForm)
       // 编辑接口
       if (this.sqlMonitorForm.id) {
         editSqlMonitor(this.sqlMonitorForm).then((resp) => {
@@ -378,8 +353,4 @@ export default {
   font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono,
     DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;
 }
-.el-table th > .cell {
-  white-space: nowrap;
-  width: fit-content;
-}
 </style>