Skip to content

Q
qa-platform-ui
Commit 2d759c40 authored by 王晓铜's avatar 王晓铜
Browse files
Options

更新sql监控

parent 815f0ac8
Show whitespace changes
Inline Side-by-side
Showing with 104 additions and 89 deletions
src/assets/css/iconfont.css
View file @ 2d759c40
......@@ -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.js
View file @ 2d759c40
This source diff could not be displayed because it is too large. You can view the blob instead.
src/assets/fonts/iconfont.json
View file @ 2d759c40
......@@ -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
View file @ 2d759c40
......@@ -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
View file @ 2d759c40
......@@ -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
View file @ 2d759c40
......@@ -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,64 +229,38 @@ 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) => {
if (resp.data.businessCode === '0000') {
var data = resp.data.data
// 给表格绑定数据源
this.sqlList = data
if (data !== null) {
if (data.length) {
this.isShow = true
// 获取表格第一行数据
......@@ -303,6 +271,14 @@ export default {
columnArr.push(i)
}
this.columnArr = columnArr
} else {
return this.$message.error('没有查询到任何数据！')
}
} else {
return this.$message.error('没有查询到任何数据！')
}
} 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>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment