This commit is contained in:
zhangyu
2022-01-26 18:34:51 +08:00
7 changed files with 74 additions and 42 deletions

View File

@@ -54,6 +54,7 @@
font-size: 20px; font-size: 20px;
color: #333; color: #333;
padding: 0; padding: 0;
border-bottom: none;
} }
.chart-header__title { .chart-header__title {
max-width: calc(100% - 100px); max-width: calc(100% - 100px);

View File

@@ -81,51 +81,67 @@
.search__history { .search__history {
position: absolute; position: absolute;
display: flex; display: flex;
padding: 10px 0; padding: 10px 0 0 0;
flex-direction: column; flex-direction: column;
width: 100%; width: 100%;
max-width: 1000px; max-width: 1000px;
z-index: 2;
top: 47px; top: 47px;
border: 1px solid rgba(206,206,206,0.20); border: 1px solid rgba(206,206,206,0.20);
border-radius: 2px; border-radius: 2px;
background-color: white; background-color: white;
.history__item { .history__items {
height: 35px; max-height: 300px;
display: flex; overflow: auto;
align-items: center; .history__item {
height: 35px;
display: flex;
align-items: center;
padding-left: 30px;
font-weight: normal;
font-size: 14px;
flex-shrink: 0;
&.clear-all span {
cursor: pointer;
}
div {
color: #999;
}
.item-date {
color: #bbb;
padding: 0 20px 0 0;
}
.item-value {
flex-basis: calc(100% - 200px);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
word-break: break-all;
color: #444;
}
}
.history__item {
cursor: pointer;
}
.history__item:hover {
background-color: #ecf5ff;
color: #66b1ff;
}
}
.clear-all {
padding-left: 30px; padding-left: 30px;
font-weight: normal; font-weight: normal;
font-size: 14px; font-size: 14px;
height: 35px;
display: flex;
align-items: center;
color: #3976CB;
&.clear-all span { span {
cursor: pointer; cursor: pointer;
} }
div {
color: #999;
}
.item-date {
color: #bbb;
padding: 0 20px 0 0;
}
.item-value {
flex-basis: calc(100% - 200px);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
word-break: break-all;
color: #444;
}
}
.history__item:not(.clear-all) {
cursor: pointer;
}
.history__item:hover:not(.clear-all) {
background-color: #ecf5ff;
color: #66b1ff;
}
.history__item.clear-all {
color: #3976CB;
} }
} }
} }

View File

@@ -66,6 +66,9 @@ export default {
this.$emit('search') this.$emit('search')
} }
}, },
focus () {
this.codeMirror.focus()
},
changeMode () { changeMode () {
const originalSql = this.codeMirror.getValue() const originalSql = this.codeMirror.getValue()
const parser = new SqlParser(originalSql, this.columnList) const parser = new SqlParser(originalSql, this.columnList)

View File

@@ -190,13 +190,13 @@ export default class SqlParser extends SqlParserVisitor {
// 字段或值 // 字段或值
visitExpressionAtomPredicate (ctx) { visitExpressionAtomPredicate (ctx) {
const constant = ctx.getText().toLowerCase() const constant = ctx.getText()
this.buildMeta('expression', constant) this.buildMeta('expression', constant)
} }
// 操作符 // 操作符
visitComparisonOperator (ctx) { visitComparisonOperator (ctx) {
const comparisonOperator = ctx.getText().toLowerCase() const comparisonOperator = ctx.getText()
this.buildMeta('operator', comparisonOperator) this.buildMeta('operator', comparisonOperator)
} }
@@ -208,13 +208,13 @@ export default class SqlParser extends SqlParserVisitor {
// in语句 // in语句
visitInPredicate (ctx) { visitInPredicate (ctx) {
const inPredicate = ctx.getText().toLowerCase() const inPredicate = ctx.getText()
this.buildMeta('in', inPredicate) this.buildMeta('in', inPredicate)
} }
// like语句 // like语句
visitLikePredicate (ctx) { visitLikePredicate (ctx) {
const likePredicate = ctx.getText().toLowerCase() const likePredicate = ctx.getText()
this.buildMeta('like', likePredicate) this.buildMeta('like', likePredicate)
} }
} }

View File

@@ -213,6 +213,8 @@ export default {
if (chartParams && chartParams.dataKey) { if (chartParams && chartParams.dataKey) {
if (response.data.result && (response.data.result[chartParams.dataKey] || response.data.result[chartParams.dataKey] === 0)) { if (response.data.result && (response.data.result[chartParams.dataKey] || response.data.result[chartParams.dataKey] === 0)) {
this.chartData = response.data.result[chartParams.dataKey] this.chartData = response.data.result[chartParams.dataKey]
} else {
this.chartData = null
} }
} }
} }

View File

@@ -452,7 +452,7 @@ export default {
const entityTypeMeta = metaList.find(meta => { const entityTypeMeta = metaList.find(meta => {
return meta.column && meta.column.name === 'entity_type' return meta.column && meta.column.name === 'entity_type'
}) })
if (entityTypeMeta) { if (entityTypeMeta && entityTypeMeta.operator.value === '=') {
let entityType = '' let entityType = ''
this.limitFilterType = false this.limitFilterType = false
if (entityTypeMeta.value.value === "'ip'") { if (entityTypeMeta.value.value === "'ip'") {

View File

@@ -28,11 +28,13 @@
</div> </div>
<transition name="el-zoom-in-top"> <transition name="el-zoom-in-top">
<div class="search__history" v-show="showHistory" v-ele-click-outside="esc"> <div class="search__history" v-show="showHistory" v-ele-click-outside="esc">
<div class="history__item" v-for="(h, i) in history" :key="i" @click="selectHistory(h.sql)"> <div class="history__items">
<span class="item-date">{{h.date}}</span> <div class="history__item" v-for="(h, i) in history" :key="i" @click="selectHistory(h.sql)">
<div class="item-value" :title="h.sql">{{h.sql}}</div> <span class="item-date">{{h.date}}</span>
<div class="item-value" :title="h.sql">{{h.sql}}</div>
</div>
</div> </div>
<div class="history__item clear-all"> <div class="clear-all">
<span @click="clearHistory" v-if="!$_.isEmpty(history)">{{$t('overall.clear')}}</span> <span @click="clearHistory" v-if="!$_.isEmpty(history)">{{$t('overall.clear')}}</span>
<div v-else>暂无记录</div> <div v-else>暂无记录</div>
</div> </div>
@@ -196,7 +198,7 @@ export default {
methods: { methods: {
search (metaList, formatSql) { search (metaList, formatSql) {
let sql = formatSql let sql = formatSql
if (metaList) { if (metaList && this.$_.isArray(metaList)) {
// 全文搜索处理 // 全文搜索处理
const hasFullText = metaList.some(meta => { const hasFullText = metaList.some(meta => {
return meta.column && meta.column.type === columnType.fullText return meta.column && meta.column.type === columnType.fullText
@@ -207,7 +209,7 @@ export default {
} }
} }
this.$emit('search', metaList, sql) this.$emit('search', metaList, sql)
// 加入搜索记录 // 加入搜索记录将记录数量控制在30以内
if (sql) { if (sql) {
const oldHistory = localStorage.getItem(storageKey.entitySearchHistory) const oldHistory = localStorage.getItem(storageKey.entitySearchHistory)
let arr = [] let arr = []
@@ -216,6 +218,9 @@ export default {
const oldArr = JSON.parse(oldHistory) const oldArr = JSON.parse(oldHistory)
oldArr.unshift(newItem) oldArr.unshift(newItem)
arr = [...oldArr] arr = [...oldArr]
if (arr.length > 30) {
arr = arr.slice(0, 30)
}
} else { } else {
arr.push(newItem) arr.push(newItem)
} }
@@ -228,6 +233,11 @@ export default {
selectHistory (sql) { selectHistory (sql) {
this.$refs.search.setSql(sql) this.$refs.search.setSql(sql)
this.showHistory = false this.showHistory = false
this.$nextTick(() => {
if (this.$refs.search.$refs.textMode) {
this.$refs.search.$refs.textMode.focus()
}
})
}, },
clearHistory () { clearHistory () {
localStorage.setItem(storageKey.entitySearchHistory, '') localStorage.setItem(storageKey.entitySearchHistory, '')