CN-574 feat: 搜索组件重新实现
This commit is contained in:
chenjinsong
@@ -6,7 +6,7 @@
|
||||
v-if="searchMode === 'text'"
|
||||
ref="textMode"
|
||||
:column-list="columnList"
|
||||
:sql="sql"
|
||||
:str="str"
|
||||
@changeMode="changeMode"
|
||||
@search="search"
|
||||
></text-mode>
|
||||
@@ -29,8 +29,7 @@ import TextMode from '@/components/advancedSearch/TextMode'
|
||||
import { defaultOperatorList, defaultConnectionList } from '@/components/advancedSearch/meta/meta'
|
||||
import _ from 'lodash'
|
||||
import { ref } from 'vue'
|
||||
import SqlParser from '@/components/advancedSearch/meta/sql-parser'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import Parser from '@/components/advancedSearch/meta/parser'
|
||||
export default {
|
||||
name: 'Index',
|
||||
components: {
|
||||
@@ -39,7 +38,7 @@ export default {
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
sql: null,
|
||||
str: null,
|
||||
metaList: null
|
||||
}
|
||||
},
|
||||
@@ -62,15 +61,15 @@ export default {
|
||||
connectionList: Array
|
||||
},
|
||||
methods: {
|
||||
search (metaList, formatSql) {
|
||||
this.$emit('search', metaList, formatSql)
|
||||
search (parseData) {
|
||||
this.$emit('search', parseData)
|
||||
},
|
||||
changeMode (mode, data) {
|
||||
changeMode (mode, { str, metaList }) {
|
||||
this.searchMode = mode
|
||||
if (mode === 'text') {
|
||||
this.sql = data
|
||||
this.str = str
|
||||
} else if (mode === 'tag') {
|
||||
this.metaList = data
|
||||
this.metaList = metaList
|
||||
}
|
||||
},
|
||||
// params: [{column, operator, value}, ...]
|
||||
@@ -88,17 +87,15 @@ export default {
|
||||
this.$refs.tagMode && this.$refs.tagMode.changeParams(params)
|
||||
this.$refs.textMode && this.$refs.textMode.changeParams(params)
|
||||
},
|
||||
setSql (sql) {
|
||||
setStr (str) {
|
||||
if (this.searchMode === 'text') {
|
||||
this.sql = sql
|
||||
this.str = str
|
||||
} else if (this.searchMode === 'tag') {
|
||||
const parser = new SqlParser(sql, this.columnList)
|
||||
const errorList = parser.validate()
|
||||
if (this.$_.isEmpty(errorList)) {
|
||||
const { metaList } = parser.formatSql()
|
||||
const parser = new Parser(this.columnList)
|
||||
const errorList = parser.validateStr(str)
|
||||
if (_.isEmpty(errorList)) {
|
||||
const { metaList } = parser.parseStr(str)
|
||||
this.metaList = metaList
|
||||
} else {
|
||||
ElMessage.error(this.$t('tip.invalidExpression'))
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
@@ -87,7 +87,7 @@
|
||||
<script>
|
||||
import Meta, { connection, condition, columnType } from './meta/meta'
|
||||
import _ from 'lodash'
|
||||
import SqlParser, { stringInQuot } from '@/components/advancedSearch/meta/sql-parser'
|
||||
import Parser, { stringInQuot } from '@/components/advancedSearch/meta/parser'
|
||||
export default {
|
||||
name: 'TagMode',
|
||||
props: {
|
||||
@@ -205,6 +205,18 @@ export default {
|
||||
// 处理搜索值
|
||||
meta.value.isEditing = true
|
||||
meta.value.show = true
|
||||
// 若是in或not in，column的type要改成array，否则是string
|
||||
if (operator.toLowerCase().indexOf('in') > -1) {
|
||||
meta.column.type = columnType.array
|
||||
meta.value.type = columnType.array
|
||||
meta.value.value = []
|
||||
} else {
|
||||
meta.column.type = columnType.string
|
||||
meta.value.type = columnType.string
|
||||
if (_.isArray(meta.value.value)) {
|
||||
meta.value.value = ''
|
||||
}
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
this.$refs.valueInput.focus()
|
||||
})
|
||||
@@ -230,22 +242,32 @@ export default {
|
||||
})
|
||||
},
|
||||
search () {
|
||||
const parser = new SqlParser(this.metaList, this.columnList)
|
||||
const { metaList, formatSql } = parser.formatMetaList()
|
||||
this.metaList = metaList
|
||||
this.$emit('search', this.metaList, formatSql)
|
||||
if (this.metaList.length > 0) {
|
||||
const parser = new Parser(this.columnList)
|
||||
const errorList = parser.validateMeta(this.metaList)
|
||||
if (_.isEmpty(errorList)) {
|
||||
this.$emit('search', parser.parseMeta(this.metaList))
|
||||
} else {
|
||||
// TODO 错误提示
|
||||
}
|
||||
} else {
|
||||
this.$emit('search', { q: '', str: '', metaList: [] })
|
||||
}
|
||||
},
|
||||
changeMode () {
|
||||
const parser = new SqlParser(this.metaList, this.columnList)
|
||||
const { metaList, formatSql } = parser.formatMetaList()
|
||||
this.metaList = metaList
|
||||
this.$emit('changeMode', 'text', formatSql)
|
||||
const parser = new Parser(this.columnList)
|
||||
const errorList = parser.validateMeta(this.metaList)
|
||||
if (_.isEmpty(errorList)) {
|
||||
this.$emit('changeMode', 'text', parser.parseMeta(this.metaList))
|
||||
} else {
|
||||
this.$emit('changeMode', 'text', { metaList: [], str: '' })
|
||||
}
|
||||
},
|
||||
// 处理value，例如转换IN的值
|
||||
handleValue (value, column, operator) {
|
||||
const isArray = ['IN', 'NOT IN'].indexOf(operator) > -1
|
||||
if (isArray) {
|
||||
if (this.$_.isArray(value)) {
|
||||
if (_.isArray(value)) {
|
||||
value = value.map(v => column.type === columnType.string ? stringInQuot(v) : v)
|
||||
return `(${value.join(',')})`
|
||||
} else {
|
||||
@@ -320,6 +342,7 @@ export default {
|
||||
deep: true,
|
||||
handler (n) {
|
||||
if (!_.isEmpty(n)) {
|
||||
console.info(n)
|
||||
this.metaList = n
|
||||
}
|
||||
}
|
||||
|
||||
@@ -18,18 +18,17 @@ import 'codemirror/addon/hint/show-hint'
|
||||
import 'codemirror/addon/hint/show-hint.css'
|
||||
import 'codemirror/addon/display/placeholder'
|
||||
import 'codemirror/mode/sql/sql'
|
||||
import SqlParser, { stringInQuot, handleOperatorSpace } from '@/components/advancedSearch/meta/sql-parser'
|
||||
import Parser, { stringInQuot, handleOperatorSpace } from '@/components/advancedSearch/meta/parser'
|
||||
import CodeMirror from 'codemirror'
|
||||
import { toRaw } from 'vue'
|
||||
import _ from 'lodash'
|
||||
import { columnType } from '@/components/advancedSearch/meta/meta'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { reg } from '@/utils/constants'
|
||||
|
||||
export default {
|
||||
name: 'TextMode',
|
||||
props: {
|
||||
columnList: Array,
|
||||
sql: String
|
||||
str: String
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
@@ -50,67 +49,41 @@ export default {
|
||||
})
|
||||
},
|
||||
search () {
|
||||
let originalSql = this.codeMirror.getValue().trim()
|
||||
if (originalSql) {
|
||||
originalSql = originalSql.replaceAll(/"/g, '')
|
||||
// 为解决ip无法校验通过的问题，先将带引号的ip转为不带引号的，再把不带引号的转为带引号的
|
||||
originalSql = originalSql.replaceAll(reg.notStrictWithQuotIpv4, function (word) {
|
||||
return word.replaceAll(/'/g, '')
|
||||
})
|
||||
originalSql = originalSql.replaceAll(reg.notStrictIpv4, function (word) {
|
||||
return `'${word}'`
|
||||
})
|
||||
originalSql = originalSql.replaceAll(reg.notStrictWithQuotIpv6, function (word) {
|
||||
return word.replaceAll(/'/g, '')
|
||||
})
|
||||
originalSql = originalSql.replaceAll(reg.notStrictIpv6, function (word) {
|
||||
return `'${word}'`
|
||||
})
|
||||
|
||||
let tempArr = originalSql.split(' ')
|
||||
tempArr = tempArr.map(t => {
|
||||
if (t.lastIndexOf("'") !== (t.length - 1) && t.indexOf("'") !== 0) {
|
||||
if (reg.containChinese.test(t)) {
|
||||
return `'${t}'`
|
||||
}
|
||||
}
|
||||
return t
|
||||
})
|
||||
originalSql = tempArr.join(' ')
|
||||
|
||||
const parser = new SqlParser(originalSql, this.columnList)
|
||||
const errorList = parser.validate()
|
||||
if (this.$_.isEmpty(errorList)) {
|
||||
const { metaList, formatSql } = parser.formatSql()
|
||||
toRaw(this.codeMirror).setValue(formatSql)
|
||||
this.$emit('search', metaList, formatSql)
|
||||
const str = this.codeMirror.getValue().trim()
|
||||
if (str) {
|
||||
const parser = new Parser(this.columnList)
|
||||
const errorList = parser.validateStr(str)
|
||||
if (_.isEmpty(errorList)) {
|
||||
this.$emit('search', parser.parseStr(str))
|
||||
} else {
|
||||
ElMessage.error(this.$t('tip.invalidExpression'))
|
||||
// TODO 错误提示
|
||||
}
|
||||
} else {
|
||||
this.$emit('search')
|
||||
this.$emit('search', { q: '', str: '', metaList: [] })
|
||||
}
|
||||
},
|
||||
focus () {
|
||||
this.codeMirror.focus()
|
||||
},
|
||||
changeMode () {
|
||||
const originalSql = this.codeMirror.getValue()
|
||||
const parser = new SqlParser(originalSql, this.columnList)
|
||||
const errorList = parser.validate()
|
||||
if (this.$_.isEmpty(errorList)) {
|
||||
const { metaList, formatSql } = parser.formatSql()
|
||||
toRaw(this.codeMirror).setValue(formatSql)
|
||||
this.$emit('changeMode', 'tag', metaList)
|
||||
const str = this.codeMirror.getValue().trim()
|
||||
if (str) {
|
||||
const parser = new Parser(this.columnList)
|
||||
const errorList = parser.validateStr(str)
|
||||
if (_.isEmpty(errorList)) {
|
||||
this.$emit('changeMode', 'tag', parser.parseStr(str))
|
||||
} else {
|
||||
this.$emit('changeMode', 'tag', [])
|
||||
this.$emit('changeMode', 'tag', { metaList: [], str: '' })
|
||||
}
|
||||
} else {
|
||||
this.$emit('changeMode', 'tag', { str: '', metaList: [] })
|
||||
}
|
||||
},
|
||||
// 处理value，例如转换IN的值
|
||||
handleValue (value, column, operator) {
|
||||
const isArray = ['IN', 'NOT IN'].indexOf(operator) > -1
|
||||
if (isArray) {
|
||||
if (this.$_.isArray(value)) {
|
||||
if (_.isArray(value)) {
|
||||
value = value.map(v => column.type === columnType.string ? stringInQuot(v) : v)
|
||||
return `(${value.join(',')})`
|
||||
} else {
|
||||
@@ -155,7 +128,7 @@ export default {
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
sql: {
|
||||
str: {
|
||||
immediate: true,
|
||||
handler (n) {
|
||||
if (n) {
|
||||
|
||||
27
src/components/advancedSearch/meta/error.js
Normal file
27
src/components/advancedSearch/meta/error.js
Normal file
@@ -0,0 +1,27 @@
|
||||
export const errorTypes = {
|
||||
illegalChar: 'parse.errorTip.illegalChar', // 非法字符
|
||||
syntaxError: 'parse.errorTip.syntaxError', // 语法错误，此i18n内容有占位符
|
||||
typeError: 'parse.errorTip.typeError' // 类型错误
|
||||
}
|
||||
export const errorDesc = {
|
||||
syntaxError: {
|
||||
moreThan2Apostrophe: 'parse.errorTip.syntaxError.moreThan2Apostrophe', // 语法错误，连续2个以上的单引号
|
||||
unclosedApostrophe: 'parse.errorTip.syntaxError.unclosedApostrophe', // 语法错误，引号未闭合
|
||||
unclosedBracket: 'parse.errorTip.syntaxError.unclosedBracket', // 语法错误，括号未闭合
|
||||
unexpectedString: 'parse.errorTip.syntaxError.unexpectedString', // 期望之外的字符串
|
||||
unexpectedOperator: 'parse.errorTip.syntaxError.unexpectedOperator',
|
||||
unexpectedBracket: 'parse.errorTip.syntaxError.unexpectedBracket',
|
||||
unexpectedConnection: 'parse.errorTip.syntaxError.unexpectedConnection'
|
||||
},
|
||||
typeError: {
|
||||
str: 'parse.errorTip.typeError.expectString', // Expected parameter type is string
|
||||
meta: 'parse.errorTip.typeError.expectMetaArray' // Expected parameter type is Meta array
|
||||
}
|
||||
}
|
||||
export default class ParserError {
|
||||
constructor (index, type, desc) {
|
||||
this.index = index
|
||||
this.type = type
|
||||
this.desc = desc
|
||||
}
|
||||
}
|
||||
741
src/components/advancedSearch/meta/parser.js
Normal file
741
src/components/advancedSearch/meta/parser.js
Normal file
@@ -0,0 +1,741 @@
|
||||
import Meta, { connection, condition, columnType } from './meta'
|
||||
import Token, { types } from './token'
|
||||
import ParserError, { errorTypes, errorDesc } from '@/components/advancedSearch/meta/error'
|
||||
|
||||
const strReg = {
|
||||
all: /^[\da-zA-Z\s.'><!=-_(),%]$/,
|
||||
key: /^(?![\d])[\da-zA-Z\s.'-_]$/,
|
||||
value: /^[\da-zA-Z\s.'-_%]$/
|
||||
}
|
||||
|
||||
export default class Parser {
|
||||
constructor (columnList) {
|
||||
this.columnList = columnList
|
||||
this.tokenList = []
|
||||
this.metaList = []
|
||||
this.errorList = []
|
||||
this.str = ''
|
||||
this.q = ''
|
||||
}
|
||||
|
||||
validateStr (str) {
|
||||
this.reset()
|
||||
this._parseStr(str)
|
||||
return this.errorList
|
||||
}
|
||||
|
||||
validateMeta (metaList) {
|
||||
this.reset()
|
||||
this._parseMeta(metaList)
|
||||
return this.errorList
|
||||
}
|
||||
|
||||
reset () {
|
||||
this.q = ''
|
||||
this.str = ''
|
||||
this.metaList = []
|
||||
this.tokenList = []
|
||||
this.errorList = []
|
||||
}
|
||||
|
||||
/*
|
||||
* str转为metaList
|
||||
* */
|
||||
parseStr (str) {
|
||||
this.reset()
|
||||
this._parseStr(str)
|
||||
return {
|
||||
str: this.str,
|
||||
q: this.q,
|
||||
metaList: this.metaList
|
||||
}
|
||||
}
|
||||
|
||||
parseMeta (metaList) {
|
||||
this.reset()
|
||||
this._parseMeta(metaList)
|
||||
return {
|
||||
str: this.str,
|
||||
q: this.q,
|
||||
metaList: this.metaList
|
||||
}
|
||||
}
|
||||
|
||||
_parseMeta (metaList) {
|
||||
let isMeta = true
|
||||
metaList.forEach(meta => {
|
||||
if (!(meta instanceof Meta)) {
|
||||
isMeta = false
|
||||
}
|
||||
})
|
||||
let str = ''
|
||||
if (!isMeta) {
|
||||
this.errorList.push(new ParserError(0, errorTypes.typeError, errorDesc.typeError.meta))
|
||||
} else {
|
||||
this.metaList = metaList
|
||||
for (let i = 0; i < metaList.length; i++) {
|
||||
const meta = metaList[i]
|
||||
if (meta.meta === connection) {
|
||||
str += `${meta.value.toUpperCase()} `
|
||||
} else if (meta.meta === condition) {
|
||||
if (meta.column.type === columnType.fullText) {
|
||||
str += `'${meta.column.name}' `
|
||||
} else if (meta.column.type === columnType.array) {
|
||||
str += `${meta.column.name} ${meta.operator.value} (`
|
||||
meta.value.value.forEach((s, j) => {
|
||||
str += `'${s}'`
|
||||
if (j < meta.value.value.length) {
|
||||
str += ','
|
||||
}
|
||||
})
|
||||
str = str.substring(0, str.length - 1)
|
||||
str += ') '
|
||||
} else if (meta.column.type === columnType.string) {
|
||||
if (meta.operator.value.toLowerCase().indexOf('like') > -1 || meta.operator.value.toLowerCase().indexOf('in') > -1) {
|
||||
str += `${meta.column.name} ${meta.operator.value} '${meta.value.value}' `
|
||||
} else {
|
||||
str += `${meta.column.name}${meta.operator.value}'${meta.value.value}' `
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
if (str) {
|
||||
str = str.substring(0, str.length - 1)
|
||||
this.str = str
|
||||
this.parseMetaToQ(metaList)
|
||||
}
|
||||
}
|
||||
|
||||
parseMetaToQ (metaList) {
|
||||
let str = ''
|
||||
for (let i = 0; i < metaList.length; i++) {
|
||||
const meta = metaList[i]
|
||||
if (meta.meta === connection) {
|
||||
str += `${meta.value.toUpperCase()} `
|
||||
} else if (meta.meta === condition) {
|
||||
if (meta.column.type === columnType.fullText) {
|
||||
str += "QUERY('"
|
||||
this.columnList.forEach(column => {
|
||||
str += `${column.name}:${meta.column.name} `
|
||||
})
|
||||
str += "') "
|
||||
} else if (meta.column.type === columnType.array) {
|
||||
str += `${meta.column.name} ${meta.operator.value} (`
|
||||
meta.value.value.forEach((s, j) => {
|
||||
str += `'${s}'`
|
||||
if (j < meta.value.value.length) {
|
||||
str += ','
|
||||
}
|
||||
})
|
||||
str = str.substring(0, str.length - 1)
|
||||
str += ') '
|
||||
} else if (meta.column.type === columnType.string) {
|
||||
if (meta.operator.value.toLowerCase().indexOf('like') > -1 || meta.operator.value.toLowerCase().indexOf('in') > -1) {
|
||||
str += `${meta.column.name} ${meta.operator.value} '${meta.value.value}' `
|
||||
} else {
|
||||
str += `${meta.column.name}${meta.operator.value}'${meta.value.value}' `
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
str = str.substring(0, str.length - 1)
|
||||
this.q = str
|
||||
}
|
||||
|
||||
_parseStr (str) {
|
||||
if (typeof str !== 'string') {
|
||||
this.errorList.push(new ParserError(0, errorTypes.typeError, errorDesc.typeError.str))
|
||||
} else {
|
||||
str = str.trim()
|
||||
if (!str) {
|
||||
return
|
||||
}
|
||||
this.str = str
|
||||
const { tokenList, errorList } = this.parseStrToTokenList(str)
|
||||
if (errorList.length === 0) {
|
||||
if (tokenList.length > 0) {
|
||||
this.tokenList = tokenList
|
||||
const { metaList, errorList } = this.parseTokenListToMetaList()
|
||||
if (errorList.length === 0) {
|
||||
this.metaList = metaList
|
||||
this.parseMetaToQ(metaList)
|
||||
} else {
|
||||
this.errorList = errorList
|
||||
}
|
||||
}
|
||||
} else {
|
||||
this.errorList = errorList
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
parseStrToTokenList (str) {
|
||||
const tokenList = []
|
||||
const errorList = []
|
||||
const strArr = str.split('')
|
||||
let token
|
||||
let isInApostrophe = false
|
||||
let isInBracket = false
|
||||
for (let i = 0; i < strArr.length; i++) {
|
||||
const s = strArr[i]
|
||||
if (!strReg.all.test(s)) {
|
||||
errorList.push(new ParserError(i, errorTypes.illegalChar, s))
|
||||
break
|
||||
}
|
||||
if (s === "'") {
|
||||
// 第一次遇到单引号，isInApostrophe=true，如果紧接着也是单引号，视为字符串结束，isInApostrophe=end；；
|
||||
// 连续三个单引号报错
|
||||
let count = 1
|
||||
for (let j = i + 1; j < strArr.length; j++) {
|
||||
if (strArr[j] === "'") {
|
||||
count++
|
||||
} else {
|
||||
break
|
||||
}
|
||||
}
|
||||
if (count === 1) {
|
||||
token = new Token(types.apostrophe, s)
|
||||
token.setStart(i)
|
||||
token.setEnd(i + 1)
|
||||
tokenList.push(token)
|
||||
isInApostrophe = !isInApostrophe
|
||||
// 如果单引号结束后，紧跟着不是逗号、右括号、空格的话，报错
|
||||
if (!isInApostrophe && strArr[i + 1] && [',', ')', ' '].indexOf(strArr[i + 1]) === -1) {
|
||||
errorList.push(new ParserError(i, errorTypes.syntaxError, strArr[i] + strArr[i + 1]))
|
||||
break
|
||||
}
|
||||
} else if (count === 2) {
|
||||
isInApostrophe = false
|
||||
token = new Token(types.apostrophe, s)
|
||||
token.setStart(i)
|
||||
token.setEnd(i + 1)
|
||||
tokenList.push(token)
|
||||
token = new Token(types.apostrophe, s)
|
||||
token.setStart(i + 1)
|
||||
token.setEnd(i + 2)
|
||||
tokenList.push(token)
|
||||
i++
|
||||
} else {
|
||||
errorList.push(new ParserError(i, errorTypes.syntaxError, errorDesc.syntaxError.moreThan2Apostrophe))
|
||||
break
|
||||
}
|
||||
} else if (s === ' ') {
|
||||
} else if (s === '(') {
|
||||
token = new Token(types.leftBracket, s)
|
||||
token.setStart(i)
|
||||
token.setEnd(i + 1)
|
||||
tokenList.push(token)
|
||||
isInBracket = true
|
||||
} else if (s === ')') {
|
||||
token = new Token(types.rightBracket, s)
|
||||
token.setStart(i)
|
||||
token.setEnd(i + 1)
|
||||
tokenList.push(token)
|
||||
isInBracket = false
|
||||
} else if (s === ',') {
|
||||
token = new Token(types.comma, s)
|
||||
token.setStart(i)
|
||||
token.setEnd(i + 1)
|
||||
tokenList.push(token)
|
||||
} else if (['=', '>', '<', '!'].indexOf(s) > -1) {
|
||||
if (['>', '<', '!'].indexOf(s) > -1) {
|
||||
if (strArr[i + 1] && strArr[i + 1] === '=') {
|
||||
token = new Token(types.commonOperator, s + '=')
|
||||
token.setStart(i)
|
||||
token.setEnd(i + 2)
|
||||
tokenList.push(token)
|
||||
i++
|
||||
} else if (['>', '<'].indexOf(s) > -1) {
|
||||
token = new Token(types.commonOperator, s)
|
||||
token.setStart(i)
|
||||
token.setEnd(i + 1)
|
||||
tokenList.push(token)
|
||||
}
|
||||
} else {
|
||||
token = new Token(types.commonOperator, s)
|
||||
token.setStart(i)
|
||||
token.setEnd(i + 1)
|
||||
tokenList.push(token)
|
||||
}
|
||||
} else if (strReg.value.test(s)) {
|
||||
if (!isInApostrophe) {
|
||||
if (['i', 'n', 'l'].indexOf(s.toLowerCase()) > -1) {
|
||||
// 前一位是否是空格，否则视为普通字符串
|
||||
if (s.toLowerCase() === 'i') {
|
||||
if (strArr[i + 1] && strArr[i + 1].toLowerCase() === 'n' && strArr[i + 2] && strArr[i + 2] === ' ') {
|
||||
token = new Token(types.letterOperator, 'in')
|
||||
token.setStart(i)
|
||||
token.setEnd(i + 2)
|
||||
tokenList.push(token)
|
||||
i++
|
||||
} else {
|
||||
// 普通str，直到遇到空格、操作符；连续2个单引号视为普通字符，例如xi''an
|
||||
const t = this.commonStr(i, strArr, [' ', '=', '>', '<', '!', ',', ')'], isInApostrophe, isInBracket, errorList)
|
||||
if (t) {
|
||||
tokenList.push(t)
|
||||
i = t.end - 1
|
||||
}
|
||||
}
|
||||
} else if (s.toLowerCase() === 'n') {
|
||||
if (strArr[i + 1] && strArr[i + 1].toLowerCase() === 'o' &&
|
||||
strArr[i + 2] && strArr[i + 2].toLowerCase() === 't' &&
|
||||
strArr[i + 3] && strArr[i + 3] === ' ') {
|
||||
let nextSpaceCount = 1
|
||||
for (let j = i + 4; j < strArr.length; j++) {
|
||||
if (strArr[j] && strArr[j] === ' ') {
|
||||
nextSpaceCount++
|
||||
} else {
|
||||
break
|
||||
}
|
||||
}
|
||||
if (strArr[i + 3 + nextSpaceCount] && strArr[i + 3 + nextSpaceCount].toLowerCase() === 'l' &&
|
||||
strArr[i + 3 + nextSpaceCount + 1] && strArr[i + 3 + nextSpaceCount + 1].toLowerCase() === 'i' &&
|
||||
strArr[i + 3 + nextSpaceCount + 2] && strArr[i + 3 + nextSpaceCount + 2].toLowerCase() === 'k' &&
|
||||
strArr[i + 3 + nextSpaceCount + 3] && strArr[i + 3 + nextSpaceCount + 3].toLowerCase() === 'e' &&
|
||||
strArr[i + 3 + nextSpaceCount + 4] && strArr[i + 3 + nextSpaceCount + 4] === ' ') {
|
||||
token = new Token(types.letterOperator, 'not like')
|
||||
token.setStart(i)
|
||||
token.setEnd(i + 3 + nextSpaceCount + 3)
|
||||
tokenList.push(token)
|
||||
i = i + 3 + nextSpaceCount + 3
|
||||
} else if (strArr[i + 3 + nextSpaceCount] && strArr[i + 3 + nextSpaceCount].toLowerCase() === 'i' &&
|
||||
strArr[i + 3 + nextSpaceCount + 1] && strArr[i + 3 + nextSpaceCount + 1].toLowerCase() === 'n' &&
|
||||
strArr[i + 3 + nextSpaceCount + 2] && strArr[i + 3 + nextSpaceCount + 2] === ' ') {
|
||||
token = new Token(types.letterOperator, 'not in')
|
||||
token.setStart(i)
|
||||
token.setEnd(i + 3 + nextSpaceCount + 1)
|
||||
tokenList.push(token)
|
||||
i = i + 3 + nextSpaceCount + 1
|
||||
}
|
||||
} else {
|
||||
// 普通str，直到遇到空格、操作符；连续2个单引号视为普通字符，例如xi''an
|
||||
const t = this.commonStr(i, strArr, [' ', '=', '>', '<', '!', ',', ')'], isInApostrophe, isInBracket, errorList)
|
||||
if (t) {
|
||||
tokenList.push(t)
|
||||
i = t.end - 1
|
||||
}
|
||||
}
|
||||
} else if (s.toLowerCase() === 'l') {
|
||||
if (strArr[i + 1] && strArr[i + 1].toLowerCase() === 'i' &&
|
||||
strArr[i + 2] && strArr[i + 2].toLowerCase() === 'k' &&
|
||||
strArr[i + 3] && strArr[i + 3].toLowerCase() === 'e' &&
|
||||
strArr[i + 4] && strArr[i + 4] === ' ') {
|
||||
token = new Token(types.letterOperator, 'like')
|
||||
token.setStart(i)
|
||||
token.setEnd(i + 3)
|
||||
tokenList.push(token)
|
||||
i += 3
|
||||
} else {
|
||||
// 普通str，直到遇到空格、操作符；连续2个单引号视为普通字符，例如xi''an
|
||||
const t = this.commonStr(i, strArr, [' ', '=', '>', '<', '!', ',', ')'], isInApostrophe, isInBracket, errorList)
|
||||
if (t) {
|
||||
tokenList.push(t)
|
||||
i = t.end - 1
|
||||
}
|
||||
}
|
||||
}
|
||||
} else if (['o', 'a'].indexOf(s.toLowerCase()) > -1) {
|
||||
// 前一位是否是空格，否则视为普通字符串
|
||||
if (s.toLowerCase() === 'o') {
|
||||
if (strArr[i + 1] && strArr[i + 1].toLowerCase() === 'r' && strArr[i + 2] && strArr[i + 2] === ' ') {
|
||||
token = new Token(types.connection, 'OR')
|
||||
token.setStart(i)
|
||||
token.setEnd(i + 2)
|
||||
tokenList.push(token)
|
||||
i++
|
||||
} else {
|
||||
// 普通str，直到遇到空格、操作符；连续2个单引号视为普通字符，例如xi''an
|
||||
const t = this.commonStr(i, strArr, [' ', '=', '>', '<', '!', ',', ')'], isInApostrophe, isInBracket, errorList)
|
||||
if (t) {
|
||||
tokenList.push(t)
|
||||
i = t.end - 1
|
||||
}
|
||||
}
|
||||
} else if (s.toLowerCase() === 'a') {
|
||||
if (strArr[i + 1] && strArr[i + 1].toLowerCase() === 'n' &&
|
||||
strArr[i + 2] && strArr[i + 2].toLowerCase() === 'd' &&
|
||||
strArr[i + 3] && strArr[i + 3] === ' ') {
|
||||
token = new Token(types.connection, 'AND')
|
||||
token.setStart(i)
|
||||
token.setEnd(i + 3)
|
||||
tokenList.push(token)
|
||||
i += 2
|
||||
} else {
|
||||
// 普通str，直到遇到空格、操作符；连续2个单引号视为普通字符，例如xi''an
|
||||
const t = this.commonStr(i, strArr, [' ', '=', '>', '<', '!', ',', ')'], isInApostrophe, isInBracket, errorList)
|
||||
if (t) {
|
||||
tokenList.push(t)
|
||||
i = t.end - 1
|
||||
}
|
||||
}
|
||||
} else {
|
||||
// 普通str，直到遇到空格、操作符；连续2个单引号视为普通字符，例如xi''an
|
||||
const t = this.commonStr(i, strArr, [' ', '=', '>', '<', '!', ',', ')'], isInApostrophe, isInBracket, errorList)
|
||||
if (t) {
|
||||
tokenList.push(t)
|
||||
i = t.end - 1
|
||||
}
|
||||
}
|
||||
} else {
|
||||
// 普通str，直到遇到空格、操作符；连续2个单引号视为普通字符，例如xi''an
|
||||
const t = this.commonStr(i, strArr, [' ', '=', '>', '<', '!', ',', ')'], isInApostrophe, isInBracket, errorList)
|
||||
if (t) {
|
||||
tokenList.push(t)
|
||||
i = t.end - 1
|
||||
}
|
||||
}
|
||||
} else {
|
||||
// 在单引号里，视为普通str，直到遇到下个单引号
|
||||
const t = this.commonStr(i, strArr, ["'"], isInApostrophe, isInBracket, errorList)
|
||||
if (t) {
|
||||
tokenList.push(t)
|
||||
i = t.end - 1
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
if (isInApostrophe) {
|
||||
errorList.push(new ParserError(strArr.length - 1, errorTypes.syntaxError, errorDesc.syntaxError.unclosedApostrophe))
|
||||
}
|
||||
if (isInBracket) {
|
||||
errorList.push(new ParserError(strArr.length - 1, errorTypes.syntaxError, errorDesc.syntaxError.unclosedBracket))
|
||||
}
|
||||
tokenList.forEach((token, i) => {
|
||||
if (token[i - 1]) {
|
||||
token.setPrev(tokenList[i - 1])
|
||||
}
|
||||
if (token[i + 1]) {
|
||||
token.setNext(tokenList[i + 1])
|
||||
}
|
||||
})
|
||||
console.info('token:', tokenList)
|
||||
return {
|
||||
tokenList,
|
||||
errorList
|
||||
}
|
||||
}
|
||||
|
||||
commonStr (i, strArr, endSign, isInApostrophe, isInBracket, errorList) {
|
||||
let j = i
|
||||
for (; j < strArr.length; j++) {
|
||||
if (strArr[j] && strArr[j] === "'") {
|
||||
let count = 1
|
||||
for (let k = j + 1; k < strArr.length; k++) {
|
||||
if (strArr[k] === "'") {
|
||||
count++
|
||||
} else {
|
||||
break
|
||||
}
|
||||
}
|
||||
// 若在单引号里，遇到1个单引号，字符串结束，返回；遇到2个单引号继续；超过2个报错；
|
||||
if (isInApostrophe) {
|
||||
if (count === 1) {
|
||||
const token = new Token(types.commonStr, strArr.slice(i, j).join(''))
|
||||
token.setStart(i)
|
||||
token.setEnd(j)
|
||||
return token
|
||||
} else if (count === 2) {
|
||||
j++
|
||||
continue
|
||||
} else {
|
||||
errorList.push(new ParserError(j, errorTypes.syntaxError, errorDesc.syntaxError.moreThan2Apostrophe))
|
||||
break
|
||||
}
|
||||
} else {
|
||||
// 否则，遇到1个单引号报错；遇到2个单引号继续；超过2个报错；
|
||||
if (count === 1) {
|
||||
errorList.push(new ParserError(j, errorTypes.syntaxError, "'"))
|
||||
break
|
||||
} else if (count === 2) {
|
||||
j++
|
||||
continue
|
||||
} else {
|
||||
errorList.push(new ParserError(j, errorTypes.syntaxError, errorDesc.syntaxError.moreThan2Apostrophe))
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
// 在单引号里，又在括号里，则遇到逗号、右括号就报错
|
||||
if (isInBracket && isInApostrophe) {
|
||||
if ([',', ')'].indexOf(strArr[j]) > -1) {
|
||||
errorList.push(new ParserError(j, errorTypes.syntaxError, errorDesc.syntaxError.unclosedApostrophe))
|
||||
break
|
||||
}
|
||||
}
|
||||
if (!strArr[j] || endSign.indexOf(strArr[j]) > -1) {
|
||||
break
|
||||
}
|
||||
}
|
||||
if (errorList.length > 0) {
|
||||
return null
|
||||
}
|
||||
if (j > i) {
|
||||
const token = new Token(types.commonStr, strArr.slice(i, j).join(''))
|
||||
token.setStart(i)
|
||||
token.setEnd(j)
|
||||
return token
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
parseTokenListToMetaList () {
|
||||
const metaList = []
|
||||
const errorList = []
|
||||
let meta
|
||||
let isInApostrophe = false
|
||||
let isInBracket = false
|
||||
let bracketArr = []
|
||||
for (let i = 0; i < this.tokenList.length; i++) {
|
||||
// 当前token、前一个token、后一个token
|
||||
const token = this.tokenList[i]
|
||||
const prevToken = (i - 1 < 0) ? null : this.tokenList[i - 1]
|
||||
const nextToken = (i + 1 > this.tokenList.length) ? null : this.tokenList[i + 1]
|
||||
|
||||
if (!meta || meta.isCompleteCondition()) {
|
||||
if (token.type === types.connection) {
|
||||
meta = new Meta(connection)
|
||||
} else {
|
||||
meta = new Meta(condition)
|
||||
}
|
||||
}
|
||||
switch (token.type) {
|
||||
case types.apostrophe: {
|
||||
isInApostrophe = !isInApostrophe
|
||||
break
|
||||
}
|
||||
case types.leftBracket: {
|
||||
isInBracket = true
|
||||
meta.column.type = columnType.array
|
||||
break
|
||||
}
|
||||
case types.rightBracket: {
|
||||
meta.value.value = bracketArr.map(b => b.value)
|
||||
bracketArr = []
|
||||
isInBracket = false
|
||||
break
|
||||
}
|
||||
case types.comma: {
|
||||
// 接的不是单引号或value，报错
|
||||
if (nextToken) {
|
||||
if ([types.apostrophe, types.commonStr].indexOf(nextToken.type) === -1) {
|
||||
errorList.push(new ParserError(token.end, errorTypes.syntaxError, ','))
|
||||
}
|
||||
}
|
||||
break
|
||||
}
|
||||
case types.commonStr: {
|
||||
// 如果在括号里，是in或not in的value之一
|
||||
if (isInBracket) {
|
||||
// 在单引号里，若下个不是单引号就报错，是单引号继续
|
||||
// 不在单引号里，若下个不是逗号或者右括号就报错，是就继续
|
||||
if (isInApostrophe) {
|
||||
if (this.tokenList[i + 1] && this.tokenList[i + 1].type === types.apostrophe) {
|
||||
bracketArr.push(token)
|
||||
} else {
|
||||
errorList.push(new ParserError(token.end, errorTypes.syntaxError, errorDesc.syntaxError.unclosedApostrophe))
|
||||
break
|
||||
}
|
||||
} else {
|
||||
if (nextToken) {
|
||||
if ([types.comma, types.rightBracket].indexOf(nextToken.type) === -1) {
|
||||
errorList.push(new ParserError(this.tokenList[i + 1].end, errorTypes.syntaxError, nextToken.value))
|
||||
break
|
||||
} else {
|
||||
bracketArr.push(token)
|
||||
}
|
||||
} else {
|
||||
errorList.push(new ParserError(token.end, errorTypes.syntaxError, errorDesc.syntaxError.unclosedBracket))
|
||||
break
|
||||
}
|
||||
}
|
||||
} else {
|
||||
// 不在括号里，是key或者value
|
||||
// 前面是连接符或空，后面是操作符，不在单引号内，则是key
|
||||
// 前面是连接符或操作符或空后面是连接符或空，或在单引号内，是value
|
||||
if (isInApostrophe) {
|
||||
if (meta.column.name) {
|
||||
meta.value.value = token.value
|
||||
meta.value.type = columnType.string
|
||||
meta.column.type = columnType.string
|
||||
} else {
|
||||
meta.column.type = columnType.fullText
|
||||
meta.column.name = token.value
|
||||
}
|
||||
} else {
|
||||
let isColumn = true
|
||||
if (nextToken) {
|
||||
if (prevToken) {
|
||||
if (prevToken.type === types.connection && [types.commonOperator, types.letterOperator].indexOf(nextToken.type) > -1) {
|
||||
meta.column.type = columnType.string
|
||||
meta.column.name = token.value
|
||||
} else {
|
||||
isColumn = false
|
||||
}
|
||||
} else {
|
||||
if ([types.commonOperator, types.letterOperator].indexOf(nextToken.type) > -1) {
|
||||
meta.column.type = columnType.string
|
||||
meta.column.name = token.value
|
||||
} else {
|
||||
isColumn = false
|
||||
}
|
||||
}
|
||||
} else {
|
||||
isColumn = false
|
||||
}
|
||||
|
||||
// 不是key，判断是否是value
|
||||
if (!isColumn) {
|
||||
// 在引号内，引号前面是操作符，则是普通value；前面是连接符或空，则是全文搜索；
|
||||
if (isInApostrophe) {
|
||||
if (prevToken && prevToken.prevToken && [types.commonOperator, types.letterOperator].indexOf(prevToken.prevToken.type) > -1) {
|
||||
meta.value.value = token.value
|
||||
meta.value.type = columnType.string
|
||||
meta.column.type = columnType.string
|
||||
} else if (prevToken && (!prevToken.prevToken || prevToken.prevToken.type === types.connection)) {
|
||||
meta.column.type = columnType.fullText
|
||||
meta.column.name = token.value
|
||||
} else {
|
||||
errorList.push(new ParserError(token.end, errorTypes.syntaxError, errorDesc.syntaxError.unexpectedString))
|
||||
break
|
||||
}
|
||||
} else {
|
||||
// 前面是连接符或操作符或空后面是连接符或空
|
||||
// 后面是连接符或空
|
||||
if (!nextToken || nextToken.type === types.connection) {
|
||||
// 前面是连接符或操作符或空
|
||||
if (prevToken) {
|
||||
// 前面是操作符，则是普通value；前面是连接符，是全文搜索
|
||||
if ([types.commonOperator, types.letterOperator].indexOf(prevToken.type) > -1) {
|
||||
meta.value.value = token.value
|
||||
meta.value.type = columnType.string
|
||||
meta.column.type = columnType.string
|
||||
} else if (prevToken.type === types.connection) {
|
||||
meta.column.name = token.value
|
||||
meta.column.type = columnType.fullText
|
||||
} else {
|
||||
errorList.push(new ParserError(token.end, errorTypes.syntaxError, errorDesc.syntaxError.unexpectedString))
|
||||
break
|
||||
}
|
||||
} else {
|
||||
meta.column.name = token.value
|
||||
meta.column.type = columnType.fullText
|
||||
}
|
||||
} else {
|
||||
errorList.push(new ParserError(token.end, errorTypes.syntaxError, errorDesc.syntaxError.unexpectedString))
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
break
|
||||
}
|
||||
case types.commonOperator:
|
||||
case types.letterOperator: {
|
||||
// 操作符，前面是key，后面是value或左括号或单引号
|
||||
if (nextToken && prevToken) {
|
||||
// 前面必须有且是key
|
||||
if (prevToken) {
|
||||
if (prevToken.type === types.commonStr) {
|
||||
if (nextToken.type === types.leftBracket) {
|
||||
if (['in', 'not in'].indexOf(token.value.toLowerCase()) > -1) {
|
||||
meta.operator.value = token.value.toUpperCase()
|
||||
break
|
||||
} else {
|
||||
errorList.push(new ParserError(nextToken.start, errorTypes.syntaxError, errorDesc.syntaxError.unexpectedBracket))
|
||||
break
|
||||
}
|
||||
} else if ([types.commonStr, types.apostrophe].indexOf(nextToken.type) > -1) {
|
||||
meta.operator.value = token.value
|
||||
break
|
||||
} else {
|
||||
errorList.push(new ParserError(token.start, errorTypes.syntaxError, errorDesc.syntaxError.unexpectedOperator))
|
||||
break
|
||||
}
|
||||
} else {
|
||||
errorList.push(new ParserError(token.start, errorTypes.syntaxError, errorDesc.syntaxError.unexpectedOperator))
|
||||
break
|
||||
}
|
||||
} else {
|
||||
errorList.push(new ParserError(token.start, errorTypes.syntaxError, errorDesc.syntaxError.unexpectedOperator))
|
||||
break
|
||||
}
|
||||
} else {
|
||||
errorList.push(new ParserError(token.start, errorTypes.syntaxError, errorDesc.syntaxError.unexpectedOperator))
|
||||
break
|
||||
}
|
||||
}
|
||||
case types.connection: {
|
||||
// 前一个是引号或右括号或value，后一个是引号或key或者value，前后必须都有内容
|
||||
if (prevToken && nextToken) {
|
||||
if ([types.apostrophe, types.rightBracket, types.commonStr].indexOf(prevToken.type) > -1 && [types.apostrophe, types.commonStr].indexOf(nextToken.type) > -1) {
|
||||
meta = new Meta(connection)
|
||||
meta.value = token.value.toUpperCase()
|
||||
} else {
|
||||
errorList.push(new ParserError(token.start, errorTypes.syntaxError, errorDesc.syntaxError.unexpectedConnection))
|
||||
break
|
||||
}
|
||||
} else {
|
||||
errorList.push(new ParserError(token.start, errorTypes.syntaxError, errorDesc.syntaxError.unexpectedConnection))
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
if (meta.isCompleteCondition()) {
|
||||
if (meta.meta === condition) {
|
||||
if (meta.column.type === columnType.fullText) {
|
||||
meta.operator.show = false
|
||||
meta.value.show = false
|
||||
meta.column.label = meta.column.name
|
||||
metaList.push(meta)
|
||||
} else {
|
||||
const column = this.columnList.find(c => c.name === meta.column.name)
|
||||
if (column) {
|
||||
meta.operator.show = true
|
||||
meta.value.show = true
|
||||
meta.column.label = column.label
|
||||
if (meta.column.type === columnType.array) {
|
||||
if (meta.value.value.length > 0) {
|
||||
let label = '('
|
||||
meta.value.value.forEach(v => {
|
||||
label += `'${v}',`
|
||||
})
|
||||
label = label.substring(0, label.length - 1)
|
||||
label += ')'
|
||||
meta.value.label = label
|
||||
} else {
|
||||
meta.value.label = '()'
|
||||
}
|
||||
} else {
|
||||
meta.value.label = meta.value.value
|
||||
}
|
||||
metaList.push(meta)
|
||||
} else {
|
||||
if (metaList.length > 0) {
|
||||
metaList.splice(metaList.length - 1, 1)
|
||||
}
|
||||
}
|
||||
}
|
||||
} else {
|
||||
metaList.push(meta)
|
||||
}
|
||||
}
|
||||
}
|
||||
return {
|
||||
metaList,
|
||||
errorList
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 使用单引号包裹
|
||||
export function stringInQuot (value) {
|
||||
const match = `${value}`.match(/^'.+?'$/)
|
||||
return match ? value : `'${value}'`
|
||||
}
|
||||
|
||||
// IN和LIKE前后加空格
|
||||
export function handleOperatorSpace (operator) {
|
||||
return ['IN', 'NOT IN', 'LIKE', 'NOT LIKE'].indexOf(operator) > -1 ? ` ${operator} ` : operator
|
||||
}
|
||||
41
src/components/advancedSearch/meta/token.js
Normal file
41
src/components/advancedSearch/meta/token.js
Normal file
@@ -0,0 +1,41 @@
|
||||
/**
|
||||
* 词法解析器的token
|
||||
* */
|
||||
|
||||
export const types = {
|
||||
apostrophe: 'apostrophe', // 单引号
|
||||
leftBracket: 'leftBracket', // 左括号
|
||||
rightBracket: 'rightBracket', // 右括号
|
||||
comma: 'comma', // 逗号
|
||||
commonOperator: 'commonOperator', // 普通操作符
|
||||
letterOperator: 'letterOperator', // 字母操作符，例如in like
|
||||
connection: 'connection', // 连接符 and和or
|
||||
commonStr: 'commonStr' // 字符串
|
||||
}
|
||||
|
||||
export default class Token {
|
||||
constructor (type, value) {
|
||||
this.type = type
|
||||
this.value = value
|
||||
this.start = 0
|
||||
this.end = 0
|
||||
this.next = null
|
||||
this.prev = null
|
||||
}
|
||||
|
||||
setStart (start) {
|
||||
this.start = start
|
||||
}
|
||||
|
||||
setEnd (end) {
|
||||
this.end = end
|
||||
}
|
||||
|
||||
setNext (token) {
|
||||
this.next = token
|
||||
}
|
||||
|
||||
setPrev (token) {
|
||||
this.prev = token
|
||||
}
|
||||
}
|
||||
@@ -1,129 +1,9 @@
|
||||
<template>
|
||||
<div style="overflow: auto;height: 100%;">
|
||||
<div style="height: 8000px; overflow: auto; width: 100%; display: flex; flex-direction: column; align-content: center; background-color: white;">
|
||||
<!-- <div style="padding-left: 30px; font-size: 18px; font-weight: bold; color: #666;">session/s</div>
|
||||
<div id="lineCanvas1" style="margin-bottom: 100px; height: 500px; width: 100%;"></div>
|
||||
<div style="padding-left: 30px; font-size: 18px; font-weight: bold; color: #666;">bytes</div>
|
||||
<div id="lineCanvas2" style="margin-bottom: 100px; height: 500px; width: 100%;"></div>
|
||||
<div style="padding-left: 30px; font-size: 18px; font-weight: bold; color: #666;">rate</div>
|
||||
<div id="lineCanvas3" style="margin-bottom: 100px; height: 500px; width: 100%;"></div>
|
||||
<div style="padding-left: 30px; font-size: 18px; font-weight: bold; color: #666;">行程卡流量数据 rate</div>
|
||||
<div id="lineCanvas6" style="margin-bottom: 100px; height: 500px; width: 100%;"></div>-->
|
||||
<div style="padding-left: 30px; font-size: 18px; font-weight: bold; color: #666;">流量变化曲线</div>
|
||||
<div id="lineCanvas" style="margin-bottom: 100px; height: 500px; width: 100%;"></div>
|
||||
<!-- <div style="padding-left: 30px; font-size: 18px; font-weight: bold; color: #666;">协议占比</div>
|
||||
<div id="pieCanvas0" style="margin-bottom: 100px; height: 500px; width: 100%;"></div>
|
||||
<div style="padding-left: 30px; font-size: 18px; font-weight: bold; color: #666;">APP占比</div>
|
||||
<div id="pieCanvas1" style="margin-bottom: 100px; height: 500px; width: 100%;"></div>
|
||||
<div style="padding-left: 30px; font-size: 18px; font-weight: bold; color: #666;">域名占比</div>
|
||||
<div id="pieCanvas2" style="margin-bottom: 100px; height: 500px; width: 100%;"></div>
|
||||
<div style="padding-left: 30px; font-size: 18px; font-weight: bold; color: #666;">IP占比</div>
|
||||
<div id="pieCanvas3" style="margin-bottom: 100px; height: 500px; width: 100%;"></div>
|
||||
<div style="padding-left: 30px; font-size: 18px; font-weight: bold; color: #666;">出占比</div>
|
||||
<div id="pieCanvas4" style="margin-bottom: 100px; height: 500px; width: 100%;"></div>
|
||||
<div style="padding-left: 30px; font-size: 18px; font-weight: bold; color: #666;">入占比</div>
|
||||
<div id="pieCanvas5" style="margin-bottom: 100px; height: 500px; width: 100%;"></div>-->
|
||||
<div style="padding-left: 30px; font-size: 18px; font-weight: bold; color: #666;">入</div>
|
||||
<div id="sunCanvas1" style="margin-bottom: 100px; height: 500px; width: 100%;"></div>
|
||||
<div style="padding-left: 30px; font-size: 18px; font-weight: bold; color: #666;">出</div>
|
||||
<div id="sunCanvas2" style="margin-bottom: 100px; height: 500px; width: 100%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>Temp</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { lineData, lineOption, sunData1, sunData2, sunOption } from './testData'
|
||||
import * as echarts from 'echarts'
|
||||
import { getMillisecond } from '@/utils/date-util'
|
||||
import unitConvert from '@/utils/unit-convert'
|
||||
import { unitTypes } from '@/utils/constants'
|
||||
export default {
|
||||
name: 'Temp',
|
||||
methods: {
|
||||
/* initLine (lineData, index) {
|
||||
const data = lineData.map(d => {
|
||||
return [getMillisecond(new Date(d[0]).getTime()), d[index]]
|
||||
})
|
||||
const option = this.$_.cloneDeep(lineOption2)
|
||||
option.series.data = data
|
||||
if (index === 1) {
|
||||
option.yAxis.axisLabel.formatter = function (params) {
|
||||
return unitConvert(params, unitTypes.number).join(' ')
|
||||
}
|
||||
} else if (index === 2) {
|
||||
option.yAxis.axisLabel.formatter = function (params) {
|
||||
return unitConvert(params, unitTypes.byte).join(' ')
|
||||
}
|
||||
} else if (index === 3) {
|
||||
option.yAxis.axisLabel.formatter = function (params) {
|
||||
const arr = unitConvert(params, unitTypes.byte).join(' ')
|
||||
return arr.replace(/B/g, 'bps')
|
||||
}
|
||||
} else if (index === 6) {
|
||||
option.yAxis.axisLabel.formatter = function (params) {
|
||||
const arr = unitConvert(params, unitTypes.byte).join(' ')
|
||||
return arr.replace(/B/g, 'Mbps')
|
||||
}
|
||||
}
|
||||
const dom = document.getElementById(`lineCanvas${index}`)
|
||||
const lineChart = echarts.init(dom)
|
||||
this.$nextTick(() => {
|
||||
lineChart.setOption(option)
|
||||
})
|
||||
}, */
|
||||
initLineChart () {
|
||||
// 数据转为需要的格式：[[timestamp, value]]
|
||||
const data = lineData.map(d => {
|
||||
return [getMillisecond(new Date(d[2]).getTime()), d[1]]
|
||||
})
|
||||
const option = this.$_.cloneDeep(lineOption)
|
||||
option.series.data = data
|
||||
const dom = document.getElementById('lineCanvas')
|
||||
const lineChart = echarts.init(dom)
|
||||
this.$nextTick(() => {
|
||||
lineChart.setOption(option)
|
||||
})
|
||||
},
|
||||
initSunChart (index) {
|
||||
const option = this.$_.cloneDeep(sunOption)
|
||||
const data = index === 1 ? sunData1 : sunData2
|
||||
option.series.data = data
|
||||
const dom = document.getElementById('sunCanvas' + index)
|
||||
const lineChart = echarts.init(dom)
|
||||
this.$nextTick(() => {
|
||||
lineChart.setOption(option)
|
||||
})
|
||||
}
|
||||
/* initPie (index) {
|
||||
const data = pieData[index].map(p => {
|
||||
return {
|
||||
value: parseFloat(p[1].replace('%', '')).toFixed(2),
|
||||
name: p[0]
|
||||
}
|
||||
})
|
||||
const option = this.$_.cloneDeep(pieOption)
|
||||
option.series[0].data = data
|
||||
const dom = document.getElementById(`pieCanvas${index}`)
|
||||
const pieChart = echarts.init(dom)
|
||||
this.$nextTick(() => {
|
||||
pieChart.setOption(option)
|
||||
})
|
||||
} */
|
||||
},
|
||||
mounted () {
|
||||
/* this.initLine(lineData2, 1)
|
||||
this.initLine(lineData2, 2)
|
||||
this.initLine(lineData2, 3)
|
||||
this.initLine(lineData3, 6) */
|
||||
this.initLineChart()
|
||||
this.initSunChart(1)
|
||||
this.initSunChart(2)
|
||||
/* this.initPie(0)
|
||||
this.initPie(1)
|
||||
this.initPie(2)
|
||||
this.initPie(3)
|
||||
this.initPie(4)
|
||||
this.initPie(5) */
|
||||
}
|
||||
name: 'Temp'
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -22,8 +22,6 @@
|
||||
<script>
|
||||
import AdvancedSearch from '@/components/advancedSearch/Index'
|
||||
import { humpToLine } from '@/utils/tools'
|
||||
import {columnType} from "@/components/advancedSearch/meta/meta";
|
||||
import SqlParser from "@/components/advancedSearch/meta/sql-parser";
|
||||
export default {
|
||||
name: 'DetectionSearch',
|
||||
props: {
|
||||
@@ -109,7 +107,7 @@ export default {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
search (metaList, formatSql) {
|
||||
/*search (metaList, formatSql) {
|
||||
let sql = formatSql
|
||||
// 全文搜索处理
|
||||
if (metaList && this.$_.isArray(metaList)) {
|
||||
@@ -122,6 +120,9 @@ export default {
|
||||
}
|
||||
}
|
||||
this.$emit('search', metaList, sql)
|
||||
},*/
|
||||
search ({ q, metaList }) {
|
||||
this.$emit('search', { q, metaList })
|
||||
},
|
||||
changeParams (params) { // params: { column: columnName, oldValue: [...], newValue: [...] }
|
||||
// 向下传递时需要再转换一次param格式为[{column, operator, value}, ...]
|
||||
|
||||
@@ -568,10 +568,10 @@ export default {
|
||||
dateTimeRangeChange (s, e, v) {
|
||||
this.timeFilter = { startTime: s, endTime: e, dateRangeValue: v }
|
||||
},
|
||||
search (metaList, formatSql) {
|
||||
search ({ q, metaList }) {
|
||||
this.initNoData()
|
||||
if (formatSql) {
|
||||
this.q = formatSql
|
||||
if (q) {
|
||||
this.q = q
|
||||
this.metaList = metaList
|
||||
} else {
|
||||
this.q = ''
|
||||
|
||||
@@ -154,6 +154,7 @@ import { get } from '@/utils/http'
|
||||
import { api } from '@/utils/api'
|
||||
import { getNowTime, getSecond } from '@/utils/date-util'
|
||||
import { ref } from 'vue'
|
||||
import _ from 'lodash'
|
||||
import Pagination from '@/components/common/Pagination'
|
||||
import Loading from '@/components/common/Loading'
|
||||
|
||||
@@ -403,13 +404,13 @@ export default {
|
||||
]
|
||||
let result = sql
|
||||
columns.forEach(c => {
|
||||
result = this.$_.replace(result, c.original, c.target)
|
||||
result = _.replace(result, c.original, c.target)
|
||||
})
|
||||
return result
|
||||
},
|
||||
search (metaList, formatSql) {
|
||||
if (formatSql) {
|
||||
this.q = this.specialColumnHandle(formatSql)
|
||||
search ({ q, metaList }) {
|
||||
if (q) {
|
||||
this.q = this.specialColumnHandle(q)
|
||||
this.metaList = metaList
|
||||
} else {
|
||||
this.q = ''
|
||||
@@ -425,7 +426,7 @@ export default {
|
||||
this.pageObj.resetPageNo = true
|
||||
}
|
||||
// 带参数时，只查询对应类型的entity；不带参数时，3种entity都查
|
||||
if (formatSql) {
|
||||
if (q) {
|
||||
// entity_type处理，不查其他两种entity_type对应的左侧筛选
|
||||
const entityTypeMeta = metaList.find(meta => {
|
||||
return meta.column && meta.column.name === 'entity_type'
|
||||
@@ -470,12 +471,12 @@ export default {
|
||||
},
|
||||
pageSize (val) {
|
||||
this.pageObj.pageSize = val
|
||||
this.search(this.metaList, this.q)
|
||||
this.search({ metaList: this.metaList, q: this.q })
|
||||
},
|
||||
pageNo (val) {
|
||||
this.pageObj.pageNo = val
|
||||
this.pageObj.resetPageNo = false
|
||||
this.search(this.metaList, this.q)
|
||||
this.search({ metaList: this.metaList, q: this.q })
|
||||
},
|
||||
// 点击上一页箭头
|
||||
prev () {
|
||||
@@ -698,7 +699,7 @@ export default {
|
||||
},
|
||||
watch: {
|
||||
timeFilter (n) {
|
||||
this.search(this.metaList, this.q)
|
||||
this.search({ metaList: this.metaList, q: this.q })
|
||||
}
|
||||
},
|
||||
setup () {
|
||||
|
||||
@@ -62,14 +62,6 @@ export default {
|
||||
custom: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
totalCount2 () {
|
||||
return function (row) {
|
||||
console.info(this.totalCount, row, (this.totalCount === 0 ? 0 : parseFloat(row.count / this.totalCount) * 100).toFixed(2))
|
||||
return (this.totalCount === 0 ? 0 : parseFloat(row.count / this.totalCount) * 100).toFixed(2)
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
indexMethod (index) {
|
||||
return index + 1
|
||||
|
||||
@@ -29,9 +29,9 @@
|
||||
<transition name="el-zoom-in-top">
|
||||
<div class="search__history" v-show="showHistory">
|
||||
<div class="history__items">
|
||||
<div class="history__item" v-for="(h, i) in history" :key="i" @click="selectHistory(h.sql)">
|
||||
<div class="history__item" v-for="(h, i) in history" :key="i" @click="selectHistory(h.str)">
|
||||
<span class="item-date">{{h.date}}</span>
|
||||
<div class="item-value" :title="h.sql">{{h.sql}}</div>
|
||||
<div class="item-value" :title="h.str">{{h.str}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="clear-all">
|
||||
@@ -47,8 +47,7 @@
|
||||
|
||||
<script>
|
||||
import AdvancedSearch from '@/components/advancedSearch/Index'
|
||||
import { columnType } from '@/components/advancedSearch/meta/meta'
|
||||
import SqlParser from '@/components/advancedSearch/meta/sql-parser'
|
||||
import _ from 'lodash'
|
||||
import { storageKey } from '@/utils/constants'
|
||||
export default {
|
||||
name: 'CnSearch',
|
||||
@@ -256,14 +255,13 @@ export default {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
search (metaList, formatSql) {
|
||||
let sql = formatSql
|
||||
search ({ str, q, metaList }) {
|
||||
if (str) {
|
||||
// 加入搜索记录，将记录数量控制在30以内
|
||||
if (sql) {
|
||||
const oldHistory = localStorage.getItem(storageKey.entitySearchHistory)
|
||||
let arr = []
|
||||
const newItem = { sql, date: this.dateFormatByAppearance(new Date()) }
|
||||
if (!this.$_.isEmpty(oldHistory)) {
|
||||
const newItem = { str, date: this.dateFormatByAppearance(new Date()) }
|
||||
if (!_.isEmpty(oldHistory)) {
|
||||
const oldArr = JSON.parse(oldHistory)
|
||||
oldArr.unshift(newItem)
|
||||
arr = [...oldArr]
|
||||
@@ -275,23 +273,13 @@ export default {
|
||||
}
|
||||
localStorage.setItem(storageKey.entitySearchHistory, JSON.stringify(arr))
|
||||
}
|
||||
// 全文搜索处理
|
||||
if (metaList && this.$_.isArray(metaList)) {
|
||||
const hasFullText = metaList.some(meta => {
|
||||
return meta.column && meta.column.type === columnType.fullText
|
||||
})
|
||||
if (hasFullText) {
|
||||
const parser = new SqlParser(metaList, this.columnList)
|
||||
sql = parser.parseMetaToSql(metaList, true)
|
||||
}
|
||||
}
|
||||
this.$emit('search', metaList, sql)
|
||||
this.$emit('search', { q, metaList })
|
||||
},
|
||||
addParams (params) {
|
||||
this.$refs.search.addParams(params)
|
||||
},
|
||||
selectHistory (sql) {
|
||||
this.$refs.search.setSql(sql)
|
||||
selectHistory (str) {
|
||||
this.$refs.search.setStr(str)
|
||||
this.showHistory = false
|
||||
this.$nextTick(() => {
|
||||
if (this.$refs.search.$refs.textMode) {
|
||||
@@ -307,7 +295,7 @@ export default {
|
||||
this.showHistory = !this.showHistory
|
||||
if (this.showHistory) {
|
||||
const history = localStorage.getItem(storageKey.entitySearchHistory)
|
||||
if (!this.$_.isEmpty(history)) {
|
||||
if (!_.isEmpty(history)) {
|
||||
this.history = JSON.parse(history)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,635 +0,0 @@
|
||||
import unitConvert from '@/utils/unit-convert'
|
||||
import { unitTypes } from '@/utils/constants'
|
||||
const chartColor = ['#5370C6', '#90CC74', '#FAC858', '#EE6666',
|
||||
'#73BFDE', '#3BA172', '#FC8452', '#E97CCC',
|
||||
'#9960B4', '#FEA69E', '#57CBAC', '#63B6AC']
|
||||
export const lineData = [
|
||||
[28969982733514, 772532872894, '2022-03-04 00:00:00'],
|
||||
[27655234991362, 737472933103, '2022-03-04 00:05:00'],
|
||||
[26925138516067, 718003693762, '2022-03-04 00:10:00'],
|
||||
[29522842016923, 787275787118, '2022-03-04 00:15:00'],
|
||||
[25315943945800, 675091838555, '2022-03-04 00:20:00'],
|
||||
[24971549517943, 665907987145, '2022-03-04 00:25:00'],
|
||||
[24899825440652, 663995345084, '2022-03-04 00:30:00'],
|
||||
[25247379305464, 673263448146, '2022-03-04 00:35:00'],
|
||||
[23363417530377, 623024467477, '2022-03-04 00:40:00'],
|
||||
[22781937328826, 607518328769, '2022-03-04 00:45:00'],
|
||||
[22334875960906, 595596692291, '2022-03-04 00:50:00'],
|
||||
[21625712171831, 576685657915, '2022-03-04 00:55:00'],
|
||||
[21117202081518, 563125388840, '2022-03-04 01:00:00'],
|
||||
[20123617702070, 536629805389, '2022-03-04 01:05:00'],
|
||||
[19202419248804, 512064513301, '2022-03-04 01:10:00'],
|
||||
[18754213565825, 500112361755, '2022-03-04 01:15:00'],
|
||||
[18124255840306, 483313489075, '2022-03-04 01:20:00'],
|
||||
[19837519272799, 529000513941, '2022-03-04 01:25:00'],
|
||||
[16301475125024, 434706003334, '2022-03-04 01:30:00'],
|
||||
[15762406250887, 420330833357, '2022-03-04 01:35:00'],
|
||||
[15458290240500, 412221073080, '2022-03-04 01:40:00'],
|
||||
[14309311385826, 381581636955, '2022-03-04 01:45:00'],
|
||||
[13814278959849, 368380772263, '2022-03-04 01:50:00'],
|
||||
[13335451883308, 355612050222, '2022-03-04 01:55:00'],
|
||||
[12995486528765, 346546307434, '2022-03-04 02:00:00'],
|
||||
[13166511401387, 351106970704, '2022-03-04 02:05:00'],
|
||||
[11490091356144, 306402436164, '2022-03-04 02:10:00'],
|
||||
[11533102061117, 307549388296, '2022-03-04 02:15:00'],
|
||||
[10871792048158, 289914454618, '2022-03-04 02:20:00'],
|
||||
[10121791046211, 269914427899, '2022-03-04 02:25:00'],
|
||||
[9967875245668, 265810006551, '2022-03-04 02:30:00'],
|
||||
[12210204288490, 325605447693, '2022-03-04 02:35:00'],
|
||||
[8575864848104, 228689729283, '2022-03-04 02:40:00'],
|
||||
[8301752853884, 221380076104, '2022-03-04 02:45:00'],
|
||||
[8050811819445, 214688315185, '2022-03-04 02:50:00'],
|
||||
[7778642815575, 207430475082, '2022-03-04 02:55:00'],
|
||||
[8569941208437, 228531765558, '2022-03-04 03:00:00'],
|
||||
[8198759570750, 218633588553, '2022-03-04 03:05:00'],
|
||||
[6656628393357, 177510090490, '2022-03-04 03:10:00'],
|
||||
[6454278312443, 172114088332, '2022-03-04 03:15:00'],
|
||||
[6284559794438, 167588261185, '2022-03-04 03:20:00'],
|
||||
[6019610840169, 160522955738, '2022-03-04 03:25:00'],
|
||||
[5948136061943, 158616961652, '2022-03-04 03:30:00'],
|
||||
[5902670520287, 157404547208, '2022-03-04 03:35:00'],
|
||||
[5504265610957, 146780416292, '2022-03-04 03:40:00'],
|
||||
[5356920067248, 142851201793, '2022-03-04 03:45:00'],
|
||||
[5395947893404, 143891943824, '2022-03-04 03:50:00'],
|
||||
[5431225782305, 144832687528, '2022-03-04 03:55:00'],
|
||||
[5060360621581, 134942949909, '2022-03-04 04:00:00'],
|
||||
[4734877060777, 126263388287, '2022-03-04 04:05:00'],
|
||||
[4896120032211, 130563200859, '2022-03-04 04:10:00'],
|
||||
[4656914516166, 124184387098, '2022-03-04 04:15:00'],
|
||||
[4370447723752, 116545272633, '2022-03-04 04:20:00'],
|
||||
[4552708884362, 121405570250, '2022-03-04 04:25:00'],
|
||||
[4296041295231, 114561101206, '2022-03-04 04:30:00'],
|
||||
[4142572107934, 110468589545, '2022-03-04 04:35:00'],
|
||||
[4241430444184, 113104811845, '2022-03-04 04:40:00'],
|
||||
[4224243392620, 112646490470, '2022-03-04 04:45:00'],
|
||||
[4198266946467, 111953785239, '2022-03-04 04:50:00'],
|
||||
[3858300702268, 102888018727, '2022-03-04 04:55:00'],
|
||||
[3854869214167, 102796512378, '2022-03-04 05:00:00'],
|
||||
[3789374874342, 101049996649, '2022-03-04 05:05:00'],
|
||||
[3610647812809, 96283941675, '2022-03-04 05:10:00'],
|
||||
[3581341904272, 95502450781, '2022-03-04 05:15:00'],
|
||||
[3419585709043, 91188952241, '2022-03-04 05:20:00'],
|
||||
[3439507132019, 91720190187, '2022-03-04 05:25:00'],
|
||||
[3511079821680, 93628795245, '2022-03-04 05:30:00'],
|
||||
[3240669123023, 86417843281, '2022-03-04 05:35:00'],
|
||||
[3231235979808, 86166292795, '2022-03-04 05:40:00'],
|
||||
[3149380897927, 83983490611, '2022-03-04 05:45:00'],
|
||||
[3292441899857, 87798450663, '2022-03-04 05:50:00'],
|
||||
[3324837434174, 88662331578, '2022-03-04 05:55:00'],
|
||||
[3267947498799, 87145266635, '2022-03-04 06:00:00'],
|
||||
[3294621183448, 87856564892, '2022-03-04 06:05:00'],
|
||||
[3445680106467, 91884802839, '2022-03-04 06:10:00'],
|
||||
[3390821619902, 90421909864, '2022-03-04 06:15:00'],
|
||||
[3398196120285, 90618563208, '2022-03-04 06:20:00'],
|
||||
[3304281747967, 88114179946, '2022-03-04 06:25:00'],
|
||||
[3302100743607, 88056019830, '2022-03-04 06:30:00'],
|
||||
[3358226493011, 89552706480, '2022-03-04 06:35:00'],
|
||||
[3556776773250, 94847380620, '2022-03-04 06:40:00'],
|
||||
[3476802054030, 92714721441, '2022-03-04 06:45:00'],
|
||||
[3406187475416, 90831666011, '2022-03-04 06:50:00'],
|
||||
[4416938530654, 117785027484, '2022-03-04 06:55:00'],
|
||||
[3594270288815, 95847207702, '2022-03-04 07:00:00'],
|
||||
[3626775377470, 96714010066, '2022-03-04 07:05:00'],
|
||||
[3565999784799, 95093327595, '2022-03-04 07:10:00'],
|
||||
[3959810819463, 105594955186, '2022-03-04 07:15:00'],
|
||||
[3986304658215, 106301457552, '2022-03-04 07:20:00'],
|
||||
[4201272551124, 112033934697, '2022-03-04 07:25:00'],
|
||||
[4159651840527, 110924049081, '2022-03-04 07:30:00'],
|
||||
[4388957660565, 117038870948, '2022-03-04 07:35:00'],
|
||||
[4585723812812, 122285968342, '2022-03-04 07:40:00'],
|
||||
[4845957647361, 129225537263, '2022-03-04 07:45:00'],
|
||||
[5073862803258, 135303008087, '2022-03-04 07:50:00'],
|
||||
[5423185300814, 144618274688, '2022-03-04 07:55:00'],
|
||||
[6007173373329, 160191289955, '2022-03-04 08:00:00'],
|
||||
[6555173772201, 174804633925, '2022-03-04 08:05:00'],
|
||||
[6351412507869, 169371000210, '2022-03-04 08:10:00'],
|
||||
[6945767585118, 185220468936, '2022-03-04 08:15:00'],
|
||||
[7073454395363, 188625450543, '2022-03-04 08:20:00'],
|
||||
[7620059685888, 203201591624, '2022-03-04 08:25:00'],
|
||||
[8618131474251, 229816839313, '2022-03-04 08:30:00'],
|
||||
[8190582889750, 218415543727, '2022-03-04 08:35:00'],
|
||||
[8516248200631, 227099952017, '2022-03-04 08:40:00'],
|
||||
[8847870579615, 235943215456, '2022-03-04 08:45:00'],
|
||||
[9291696664567, 247778577722, '2022-03-04 08:50:00'],
|
||||
[9813479864123, 261692796377, '2022-03-04 08:55:00'],
|
||||
[10166374951215, 271103332032, '2022-03-04 09:00:00'],
|
||||
[10566660997360, 281777626596, '2022-03-04 09:05:00'],
|
||||
[11198613029954, 298629680799, '2022-03-04 09:10:00'],
|
||||
[11027698150233, 294071950673, '2022-03-04 09:15:00'],
|
||||
[11534686635398, 307591643611, '2022-03-04 09:20:00'],
|
||||
[11778600764516, 314096020387, '2022-03-04 09:25:00'],
|
||||
[12104533073099, 322787548616, '2022-03-04 09:30:00'],
|
||||
[12244570656108, 326521884163, '2022-03-04 09:35:00'],
|
||||
[12615700396885, 336418677250, '2022-03-04 09:40:00'],
|
||||
[12964143713872, 345710499037, '2022-03-04 09:45:00'],
|
||||
[13016114473998, 347096385973, '2022-03-04 09:50:00'],
|
||||
[13252632094282, 353403522514, '2022-03-04 09:55:00'],
|
||||
[13805416715607, 368144445750, '2022-03-04 10:00:00'],
|
||||
[13934744922725, 371593197939, '2022-03-04 10:05:00'],
|
||||
[14127016542407, 376720441131, '2022-03-04 10:10:00'],
|
||||
[14434554026516, 384921440707, '2022-03-04 10:15:00'],
|
||||
[14432110437071, 384856278322, '2022-03-04 10:20:00'],
|
||||
[14649574536632, 390655320977, '2022-03-04 10:25:00'],
|
||||
[14768680014249, 393831467047, '2022-03-04 10:30:00'],
|
||||
[14910852414432, 397622731052, '2022-03-04 10:35:00'],
|
||||
[15294731712930, 407859512345, '2022-03-04 10:40:00'],
|
||||
[15354741150417, 409459764011, '2022-03-04 10:45:00'],
|
||||
[15372120739418, 409923219718, '2022-03-04 10:50:00'],
|
||||
[15652062314015, 417388328374, '2022-03-04 10:55:00'],
|
||||
[15790550169279, 421081337847, '2022-03-04 11:00:00'],
|
||||
[15974814432383, 425995051530, '2022-03-04 11:05:00'],
|
||||
[18106420031673, 482837867511, '2022-03-04 11:10:00'],
|
||||
[15964304282474, 425714780866, '2022-03-04 11:15:00'],
|
||||
[15866249649602, 423099990656, '2022-03-04 11:20:00'],
|
||||
[16138677050405, 430364721344, '2022-03-04 11:25:00'],
|
||||
[16372432990421, 436598213078, '2022-03-04 11:30:00'],
|
||||
[16533202568615, 440885401830, '2022-03-04 11:35:00'],
|
||||
[17045752272964, 454553393946, '2022-03-04 11:40:00'],
|
||||
[16981335555512, 452835614814, '2022-03-04 11:45:00'],
|
||||
[17118154627460, 456484123399, '2022-03-04 11:50:00'],
|
||||
[17148391455384, 457290438810, '2022-03-04 11:55:00'],
|
||||
[17470154502790, 465870786741, '2022-03-04 12:00:00'],
|
||||
[17568308659292, 468488230914, '2022-03-04 12:05:00'],
|
||||
[17773841618441, 473969109825, '2022-03-04 12:10:00'],
|
||||
[17781079987430, 474162132998, '2022-03-04 12:15:00'],
|
||||
[17990021005772, 479733893487, '2022-03-04 12:20:00'],
|
||||
[18384547822059, 490254608588, '2022-03-04 12:25:00'],
|
||||
[18460819489936, 492288519732, '2022-03-04 12:30:00'],
|
||||
[18490806709057, 493088178908, '2022-03-04 12:35:00'],
|
||||
[18412730482192, 491006146192, '2022-03-04 12:40:00'],
|
||||
[18553258883770, 494753570234, '2022-03-04 12:45:00'],
|
||||
[18669863379552, 497863023455, '2022-03-04 12:50:00'],
|
||||
[19963735697348, 532366285263, '2022-03-04 12:55:00'],
|
||||
[18376553533228, 490041427553, '2022-03-04 13:00:00'],
|
||||
[18558850510486, 494902680280, '2022-03-04 13:05:00'],
|
||||
[18679720275525, 498125874014, '2022-03-04 13:10:00'],
|
||||
[18950990373556, 505359743295, '2022-03-04 13:15:00'],
|
||||
[18912683201075, 504338218695, '2022-03-04 13:20:00'],
|
||||
[18953166427540, 505417771401, '2022-03-04 13:25:00'],
|
||||
[19088811649287, 509034977314, '2022-03-04 13:30:00'],
|
||||
[19195979674584, 511892791322, '2022-03-04 13:35:00'],
|
||||
[19353757750157, 516100206671, '2022-03-04 13:40:00'],
|
||||
[19623023814087, 523280635042, '2022-03-04 13:45:00'],
|
||||
[20006183846599, 533498235909, '2022-03-04 13:50:00'],
|
||||
[20129862506855, 536796333516, '2022-03-04 13:55:00'],
|
||||
[20690589312453, 551749048332, '2022-03-04 14:00:00'],
|
||||
[20817415642015, 555131083787, '2022-03-04 14:05:00'],
|
||||
[21227766113590, 566073763029, '2022-03-04 14:10:00'],
|
||||
[21468895104362, 572503869450, '2022-03-04 14:15:00'],
|
||||
[21814949310487, 581731981613, '2022-03-04 14:20:00'],
|
||||
[22049560972841, 587988292609, '2022-03-04 14:25:00'],
|
||||
[22520902322071, 600557395255, '2022-03-04 14:30:00'],
|
||||
[22717789840723, 605807729086, '2022-03-04 14:35:00'],
|
||||
[25977481697643, 692732845270, '2022-03-04 14:40:00'],
|
||||
[21169021431468, 564507238172, '2022-03-04 14:45:00'],
|
||||
[21185682154079, 564951524109, '2022-03-04 14:50:00'],
|
||||
[21213274986598, 565687332976, '2022-03-04 14:55:00'],
|
||||
[22852488297521, 609399687934, '2022-03-04 15:00:00'],
|
||||
[20180887262764, 538156993674, '2022-03-04 15:05:00'],
|
||||
[20262326460868, 540328705623, '2022-03-04 15:10:00'],
|
||||
[19957329914253, 532195464380, '2022-03-04 15:15:00'],
|
||||
[19540290479846, 521074412796, '2022-03-04 15:20:00'],
|
||||
[19381049642638, 516827990470, '2022-03-04 15:25:00'],
|
||||
[19371501072878, 516573361943, '2022-03-04 15:30:00'],
|
||||
[19195290832621, 511874422203, '2022-03-04 15:35:00'],
|
||||
[19074211930206, 508645651472, '2022-03-04 15:40:00'],
|
||||
[18985114573233, 506269721953, '2022-03-04 15:45:00'],
|
||||
[18986918180614, 506317818150, '2022-03-04 15:50:00'],
|
||||
[18967837386524, 505808996974, '2022-03-04 15:55:00'],
|
||||
[18807707047729, 501538854606, '2022-03-04 16:00:00'],
|
||||
[19012905978812, 507010826102, '2022-03-04 16:05:00'],
|
||||
[20562508930526, 548333571481, '2022-03-04 16:10:00'],
|
||||
[18338426278704, 489024700765, '2022-03-04 16:15:00'],
|
||||
[18524673457921, 493991292211, '2022-03-04 16:20:00'],
|
||||
[18839461266122, 502385633763, '2022-03-04 16:25:00'],
|
||||
[18840101405285, 502402704141, '2022-03-04 16:30:00'],
|
||||
[18834745820616, 502259888550, '2022-03-04 16:35:00'],
|
||||
[19498057758493, 519948206893, '2022-03-04 16:40:00'],
|
||||
[18983988305868, 506239688156, '2022-03-04 16:45:00'],
|
||||
[20375548066233, 543347948433, '2022-03-04 16:50:00'],
|
||||
[18694198464973, 498511959066, '2022-03-04 16:55:00'],
|
||||
[19224086887778, 512642317007, '2022-03-04 17:00:00'],
|
||||
[19234955299191, 512932141312, '2022-03-04 17:05:00'],
|
||||
[19241735704890, 513112952130, '2022-03-04 17:10:00'],
|
||||
[19689558526944, 525054894052, '2022-03-04 17:15:00'],
|
||||
[19512222588749, 520325935700, '2022-03-04 17:20:00'],
|
||||
[19771517781318, 527240474168, '2022-03-04 17:25:00'],
|
||||
[19635672658400, 523617937557, '2022-03-04 17:30:00'],
|
||||
[19851175792287, 529364687794, '2022-03-04 17:35:00'],
|
||||
[20084780673112, 535594151283, '2022-03-04 17:40:00'],
|
||||
[19971398581725, 532570628846, '2022-03-04 17:45:00'],
|
||||
[19857295439822, 529527878395, '2022-03-04 17:50:00'],
|
||||
[19872338682121, 529929031523, '2022-03-04 17:55:00'],
|
||||
[19796261122491, 527900296600, '2022-03-04 18:00:00'],
|
||||
[19782809702179, 527541592058, '2022-03-04 18:05:00'],
|
||||
[19839234416622, 529046251110, '2022-03-04 18:10:00'],
|
||||
[20465886156507, 545756964174, '2022-03-04 18:15:00'],
|
||||
[20122679882572, 536604796869, '2022-03-04 18:20:00'],
|
||||
[20289864215593, 541063045749, '2022-03-04 18:25:00'],
|
||||
[20434921600336, 544931242676, '2022-03-04 18:30:00'],
|
||||
[20669436913095, 551184984349, '2022-03-04 18:35:00'],
|
||||
[20817112208239, 555122992220, '2022-03-04 18:40:00'],
|
||||
[21646842996895, 577249146584, '2022-03-04 18:45:00'],
|
||||
[21523247456176, 573953265498, '2022-03-04 18:50:00'],
|
||||
[21135907030527, 563624187481, '2022-03-04 18:55:00'],
|
||||
[21731228167496, 579499417800, '2022-03-04 19:00:00'],
|
||||
[21555331268992, 574808833840, '2022-03-04 19:05:00'],
|
||||
[21448235081778, 571952935514, '2022-03-04 19:10:00'],
|
||||
[21876037548520, 583361001294, '2022-03-04 19:15:00'],
|
||||
[21955699128376, 585485310090, '2022-03-04 19:20:00'],
|
||||
[22338536796271, 595694314567, '2022-03-04 19:25:00'],
|
||||
[22290878986561, 594423439642, '2022-03-04 19:30:00'],
|
||||
[22696524500427, 605240653345, '2022-03-04 19:35:00'],
|
||||
[22883190465854, 610218412423, '2022-03-04 19:40:00'],
|
||||
[22865109623699, 609736256632, '2022-03-04 19:45:00'],
|
||||
[23463713109730, 625699016259, '2022-03-04 19:50:00'],
|
||||
[23561285058428, 628300934891, '2022-03-04 19:55:00'],
|
||||
[23703339789957, 632089061066, '2022-03-04 20:00:00'],
|
||||
[24166899328339, 644450648756, '2022-03-04 20:05:00'],
|
||||
[24447031010328, 651920826942, '2022-03-04 20:10:00'],
|
||||
[24608672777197, 656231274059, '2022-03-04 20:15:00'],
|
||||
[25275462425767, 674012331354, '2022-03-04 20:20:00'],
|
||||
[25198372992317, 671956613128, '2022-03-04 20:25:00'],
|
||||
[25647780613614, 683940816363, '2022-03-04 20:30:00'],
|
||||
[25625250554055, 683340014775, '2022-03-04 20:35:00'],
|
||||
[25480742337277, 679486462327, '2022-03-04 20:40:00'],
|
||||
[25832082625742, 688855536686, '2022-03-04 20:45:00'],
|
||||
[26231695749025, 699511886641, '2022-03-04 20:50:00'],
|
||||
[26735506293998, 712946834507, '2022-03-04 20:55:00'],
|
||||
[27091127815174, 722430075071, '2022-03-04 21:00:00'],
|
||||
[27277891781922, 727410447518, '2022-03-04 21:05:00'],
|
||||
[27528934099470, 734104909319, '2022-03-04 21:10:00'],
|
||||
[28294252754307, 754513406782, '2022-03-04 21:15:00'],
|
||||
[28578676115585, 762098029749, '2022-03-04 21:20:00'],
|
||||
[28723861609291, 765969642914, '2022-03-04 21:25:00'],
|
||||
[28624746916514, 763326584440, '2022-03-04 21:30:00'],
|
||||
[29567967418560, 788479131162, '2022-03-04 21:35:00'],
|
||||
[29459425404208, 785584677446, '2022-03-04 21:40:00'],
|
||||
[29566556067019, 788441495121, '2022-03-04 21:45:00'],
|
||||
[30572964671261, 815279057900, '2022-03-04 21:50:00'],
|
||||
[30329564491753, 808788386447, '2022-03-04 21:55:00'],
|
||||
[31664399376903, 844383983384, '2022-03-04 22:00:00'],
|
||||
[31116443452479, 829771825399, '2022-03-04 22:05:00'],
|
||||
[31378469745516, 836759193214, '2022-03-04 22:10:00'],
|
||||
[31658679635004, 844231456933, '2022-03-04 22:15:00'],
|
||||
[31875840546222, 850022414566, '2022-03-04 22:20:00'],
|
||||
[32289185521687, 861044947245, '2022-03-04 22:25:00'],
|
||||
[32417837401154, 864475664031, '2022-03-04 22:30:00'],
|
||||
[32346688630505, 862578363480, '2022-03-04 22:35:00'],
|
||||
[33016598180193, 880442618138, '2022-03-04 22:40:00'],
|
||||
[33146008154865, 883893550796, '2022-03-04 22:45:00'],
|
||||
[33268634987419, 887163599665, '2022-03-04 22:50:00'],
|
||||
[33397396256547, 890597233508, '2022-03-04 22:55:00'],
|
||||
[33844643741649, 902523833111, '2022-03-04 23:00:00'],
|
||||
[33958156438588, 905550838362, '2022-03-04 23:05:00'],
|
||||
[33894723651827, 903859297382, '2022-03-04 23:10:00'],
|
||||
[38141959774630, 1017118927323, '2022-03-04 23:15:00'],
|
||||
[32317662070360, 861804321876, '2022-03-04 23:20:00'],
|
||||
[32413119587555, 864349855668, '2022-03-04 23:25:00'],
|
||||
[32548084168381, 867948911157, '2022-03-04 23:30:00'],
|
||||
[32156620281908, 857509874184, '2022-03-04 23:35:00'],
|
||||
[32214736023145, 859059627284, '2022-03-04 23:40:00'],
|
||||
[32164564599083, 857721722642, '2022-03-04 23:45:00'],
|
||||
[31727303531249, 846061427500, '2022-03-04 23:50:00'],
|
||||
[32145322359204, 857208596245, '2022-03-04 23:55:00']
|
||||
]
|
||||
export const lineData2 = []
|
||||
export const lineData3 = []
|
||||
export const sunData1 = [
|
||||
{
|
||||
name: '西安\n29.60%',
|
||||
children: [
|
||||
{
|
||||
name: '257\n14.34%',
|
||||
value: 323703329611
|
||||
},
|
||||
{
|
||||
name: '1281\n13.59%',
|
||||
value: 306756738292
|
||||
},
|
||||
{
|
||||
name: '2817\n1.68%',
|
||||
value: 37855258599
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '太原\n56.35%',
|
||||
children: [
|
||||
{
|
||||
name: '513\n11.42%',
|
||||
value: 257854520910
|
||||
},
|
||||
{
|
||||
name: '769\n1.44%',
|
||||
value: 32505330352
|
||||
},
|
||||
{
|
||||
name: '1537\n15.18%',
|
||||
value: 342760056836
|
||||
},
|
||||
{
|
||||
name: '2049\n15.30%',
|
||||
value: 345397981930
|
||||
},
|
||||
{
|
||||
name: '2305\n13.01%',
|
||||
value: 293586032267
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '西宁\n14.04%',
|
||||
children: [
|
||||
{
|
||||
name: '1025\n14.04%',
|
||||
value: 317022957702
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
export const sunData2 = [
|
||||
{
|
||||
name: '西安\n57.32%',
|
||||
children: [
|
||||
{
|
||||
name: '256\n14.58%',
|
||||
value: 167621458351
|
||||
},
|
||||
{
|
||||
name: '1280\n14.51%',
|
||||
value: 166817230697
|
||||
},
|
||||
{
|
||||
name: '2816\n28.24%',
|
||||
value: 324792075239
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '太原\n41.78%',
|
||||
children: [
|
||||
{
|
||||
name: '512\n3.17%',
|
||||
value: 36512384529
|
||||
},
|
||||
{
|
||||
name: '768\n21.67%',
|
||||
value: 249173998609
|
||||
},
|
||||
{
|
||||
name: '1536\n3.92%',
|
||||
value: 45084239753
|
||||
},
|
||||
{
|
||||
name: '1792\n3.24%',
|
||||
value: 37293491619
|
||||
},
|
||||
{
|
||||
name: '2048\n4.01%',
|
||||
value: 46098857586
|
||||
},
|
||||
{
|
||||
name: '2304\n5.77%',
|
||||
value: 66314220417
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '西宁\n0.90%',
|
||||
children: [
|
||||
{
|
||||
name: '1024\n0.90%',
|
||||
value: 10309648628
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
export const sunOption = {
|
||||
silent: true,
|
||||
series: {
|
||||
type: 'sunburst',
|
||||
radius: [0, '90%'],
|
||||
label: {
|
||||
rotate: 'radial'
|
||||
}
|
||||
}
|
||||
}
|
||||
export const lineOption = {
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
color: chartColor,
|
||||
xAxis: {
|
||||
type: 'time',
|
||||
splitNumber: 12,
|
||||
axisLabel: {
|
||||
formatter: '{HH}:{mm}'
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
splitLine: { show: false },
|
||||
offset: 10,
|
||||
axisLabel: {
|
||||
formatter (params) {
|
||||
const arr = unitConvert(params, unitTypes.byte).join(' ')
|
||||
return arr.replace(/B/g, 'bps')
|
||||
}
|
||||
}
|
||||
},
|
||||
visualMap: {
|
||||
show: false,
|
||||
pieces: [
|
||||
{
|
||||
gt: 0,
|
||||
lte: 536130030141,
|
||||
color: '#FBDB0F'
|
||||
},
|
||||
{
|
||||
gt: 536130030141,
|
||||
lte: 844057710428,
|
||||
color: '#FC7D02'
|
||||
},
|
||||
{
|
||||
gt: 844057710428,
|
||||
lte: 969266744524,
|
||||
color: '#FD0100'
|
||||
},
|
||||
{
|
||||
gt: 969266744524,
|
||||
lte: 9840702500000,
|
||||
color: '#AA069F'
|
||||
}
|
||||
],
|
||||
outOfRange: {
|
||||
color: '#999'
|
||||
}
|
||||
},
|
||||
series: {
|
||||
type: 'line',
|
||||
symbol: 'none',
|
||||
markLine: {
|
||||
silent: true,
|
||||
lineStyle: {
|
||||
color: '#999'
|
||||
},
|
||||
symbol: 'none',
|
||||
label: {
|
||||
formatter (params) {
|
||||
const arr = unitConvert(params.value, unitTypes.byte).join(' ')
|
||||
let desc = ''
|
||||
switch (params.dataIndex) {
|
||||
case 0: {
|
||||
desc = 'P50'
|
||||
break
|
||||
}
|
||||
case 1: {
|
||||
desc = 'P90'
|
||||
break
|
||||
}
|
||||
case 2: {
|
||||
desc = 'P99'
|
||||
break
|
||||
}
|
||||
default: break
|
||||
}
|
||||
return `${arr.replace(/B/g, 'bps')} (${desc})`
|
||||
}
|
||||
},
|
||||
data: [
|
||||
{
|
||||
yAxis: 536130030141
|
||||
},
|
||||
{
|
||||
yAxis: 844057710428
|
||||
},
|
||||
{
|
||||
yAxis: 969266744524
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
export const lineOption2 = {
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
color: chartColor,
|
||||
xAxis: {
|
||||
type: 'time',
|
||||
splitNumber: 12,
|
||||
axisLabel: {
|
||||
formatter: '{MM}-{dd} {HH}:{mm}',
|
||||
rotate: 30
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
splitLine: { show: false },
|
||||
offset: 10,
|
||||
axisLabel: {
|
||||
formatter (params) {
|
||||
const arr = unitConvert(params, unitTypes.byte).join(' ')
|
||||
return arr.replace(/B/g, 'bps')
|
||||
}
|
||||
}
|
||||
},
|
||||
series: {
|
||||
type: 'line',
|
||||
symbol: 'none'
|
||||
}
|
||||
}
|
||||
export const pieData = [
|
||||
[
|
||||
['HTTP', '36.30%'],
|
||||
['HTTPS', '33.75%'],
|
||||
['UNCATEGORIZED', '24.41%'],
|
||||
['QUIC', '2.13%'],
|
||||
['SSL', '2.04%'],
|
||||
['STUN', '0.67%'],
|
||||
['STUN.DTLS', '0.36%'],
|
||||
['RTMP', '0.16%'],
|
||||
['RTSP', '0.03%'],
|
||||
['DNS', '0.03%'],
|
||||
['Other', '0.13%']
|
||||
],
|
||||
[
|
||||
['douyin', '6.12%'],
|
||||
['wechat', '4.87%'],
|
||||
['kuaishou', '3.18%'],
|
||||
['qq', '1.86%'],
|
||||
['qq_web', '1.52%'],
|
||||
['http2', '1.30%'],
|
||||
['youku', '0.94%'],
|
||||
['bmff', '0.90%'],
|
||||
['ppstream', '0.62%'],
|
||||
['other', '78.69%']
|
||||
],
|
||||
[
|
||||
['douyinvod.com', '9.18%'],
|
||||
['qq.com', '1.43%'],
|
||||
['kwaicdn.com', '1.37%'],
|
||||
['douyincdn.com', '1.16%'],
|
||||
['qpic.cn', '0.75%'],
|
||||
['yximgs.com', '0.65%'],
|
||||
['vivo.com.cn', '0.50%'],
|
||||
['amemv.com', '0.43%'],
|
||||
['heytapdownload.com', '0.34%'],
|
||||
['apple.com', '0.26%'],
|
||||
['other', '83.93%']
|
||||
],
|
||||
[
|
||||
['113.200.130.0/24', '4.17%'],
|
||||
['116.177.229.0/24', '1.37%'],
|
||||
['116.177.224.0/24', '1.16%'],
|
||||
['116.177.238.0/24', '1.14%'],
|
||||
['139.170.154.0/24', '1.11%'],
|
||||
['113.200.134.0/24', '1.10%'],
|
||||
['116.177.239.0/24', '1.02%'],
|
||||
['116.177.241.0/24', '0.94%'],
|
||||
['103.251.162.0/24', '0.78%'],
|
||||
['116.177.254.0/24', '0.74%'],
|
||||
['other', '86.47%']
|
||||
],
|
||||
[
|
||||
['256', '263884843187921'],
|
||||
['1280', '259115014797786'],
|
||||
['2304', '179350957251842'],
|
||||
['2048', '146226265132311'],
|
||||
['1536', '144883427788620'],
|
||||
['1792', '144644004094863'],
|
||||
['512', '141461036696155'],
|
||||
['2816', '83886557825029'],
|
||||
['1024', '78239831113846'],
|
||||
['768', '62392314982139']
|
||||
],
|
||||
[
|
||||
['2049', '244714000000000'],
|
||||
['1537', '243301000000000'],
|
||||
['2305', '211735000000000'],
|
||||
['257', '207454000000000'],
|
||||
['1281', '197125000000000'],
|
||||
['513', '174418000000000'],
|
||||
['1025', '78240600000000'],
|
||||
['769', '75635600000000'],
|
||||
['2817', '71460900000000']
|
||||
]
|
||||
]
|
||||
|
||||
export const pieOption = {
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
color: chartColor,
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
radius: '80%',
|
||||
label: {
|
||||
formatter: '{b} {d}%'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
Reference in New Issue
Block a user