Merge branch 'dev' of https://git.mesalab.cn/cyber-narrator/cn-ui into dev
This commit is contained in:
@@ -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);
|
||||||
|
|||||||
@@ -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;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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)
|
||||||
|
|||||||
@@ -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)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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'") {
|
||||||
|
|||||||
@@ -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, '')
|
||||||
|
|||||||
Reference in New Issue
Block a user