Compare commits
27 Commits
dev-ele-up
...
dev-23.09
| Author | SHA1 | Date | |
|---|---|---|---|
|
2fe18471fa | ||
|
|
cdd3557bbe | ||
|
|
b44a99f354 | ||
|
|
76c0c081e5 | ||
|
|
6ac9b71b0e | ||
|
|
41f161e301 | ||
|
|
e926163da4 | ||
|
|
7b7c2456e2 | ||
|
|
4fb8ab2996 | ||
|
|
be6a1e9fb6 | ||
|
|
faae781f42 | ||
|
|
216c6eaab2 | ||
|
|
f939d344fa | ||
|
|
7b93068d75 | ||
|
|
5dedc6d12d | ||
|
|
d0cad48f6a | ||
|
|
1fa8f157ed | ||
|
|
9a3e4e07ab | ||
|
|
817d593c78 | ||
|
|
ed8be53798 | ||
|
|
d14f34ec9f | ||
|
|
6cb27b72af | ||
|
|
4abe0ce74c | ||
|
|
272fd2a5d2 | ||
|
|
fc56a1fc0c | ||
|
|
ccd2b3d08b | ||
|
|
60bbb8b165 |
@@ -28,8 +28,7 @@ module.exports = {
|
||||
'node'
|
||||
],
|
||||
moduleNameMapper: {
|
||||
'@/(.*)$': '<rootDir>/src/$1',
|
||||
'\\.(css|less|scss|sass)$': '<rootDir>/test/__mocks__/styleMock.js'
|
||||
'@/(.*)$': '<rootDir>/src/$1'
|
||||
},
|
||||
resetMocks: true
|
||||
}
|
||||
|
||||
10
package.json
10
package.json
@@ -13,7 +13,6 @@
|
||||
"@amcharts/amcharts4": "~4.10.0",
|
||||
"@amcharts/amcharts4-geodata": "^4.1.20",
|
||||
"@antv/g6": "^4.8.17",
|
||||
"@element-plus/icons-vue": "^2.3.1",
|
||||
"axios": "^0.21.1",
|
||||
"babel-plugin-lodash": "~3.3.0",
|
||||
"codemirror": "^5.65.1",
|
||||
@@ -21,10 +20,9 @@
|
||||
"dayjs": "^1.10.5",
|
||||
"dexie": "~3.2.0",
|
||||
"echarts": "^5.1.1",
|
||||
"element-plus": "^2.5.1",
|
||||
"element-plus": "~1.0.2-beta.71",
|
||||
"lib-flexible": "^0.3.2",
|
||||
"lodash": "^4.17.21",
|
||||
"maplibre-gl": "3.6.2",
|
||||
"mockjs": "^1.1.0",
|
||||
"moment-timezone": "^0.5.33",
|
||||
"node-sass": "~4.14.0",
|
||||
@@ -44,8 +42,8 @@
|
||||
"@babel/core": "~7.22.5",
|
||||
"@babel/plugin-proposal-class-properties": "~7.18.0",
|
||||
"@babel/plugin-proposal-private-methods": "~7.18.0",
|
||||
"@babel/plugin-proposal-private-property-in-object": "~7.21.0",
|
||||
"@babel/plugin-transform-runtime": "~7.22.0",
|
||||
"@babel/plugin-proposal-private-property-in-object": "~7.21.0",
|
||||
"@babel/preset-env": "~7.22.0",
|
||||
"@babel/preset-typescript": "~7.22.0",
|
||||
"@commitlint/cli": "^9.1.2",
|
||||
@@ -68,8 +66,8 @@
|
||||
"@vue/cli-service": "~4.5.0",
|
||||
"@vue/compiler-sfc": "~3.3.0",
|
||||
"@vue/component-compiler-utils": "~3.3.0",
|
||||
"@vue/server-renderer": "~3.3.0",
|
||||
"@vue/test-utils": "~2.4.0",
|
||||
"@vue/server-renderer": "~3.3.0",
|
||||
"babel-eslint": "^10.1.0",
|
||||
"babel-jest": "^26.0.0",
|
||||
"compression-webpack-plugin": "^8.0.1",
|
||||
@@ -83,8 +81,6 @@
|
||||
"jest": "~26.6.0",
|
||||
"ts-jest": "~26.5.0",
|
||||
"uglifyjs-webpack-plugin": "^2.2.0",
|
||||
"unplugin-auto-import": "^0.17.5",
|
||||
"unplugin-vue-components": "^0.26.0",
|
||||
"vue-jest": "^5.0.0-alpha.10"
|
||||
},
|
||||
"browserslist": [
|
||||
|
||||
@@ -1,25 +1,5 @@
|
||||
const BASE_CONFIG = {
|
||||
baseUrl: 'http://192.168.44.54:8090/',
|
||||
version: '23.12',
|
||||
baseUrl: 'http://192.168.44.54:8091/',
|
||||
version: '23.06',
|
||||
apiVersion: 'v1'
|
||||
}
|
||||
// 默认时间过滤条件，单位分钟. 0表示请求接口时不传时间参数
|
||||
const DEFAULT_TIME_FILTER_RANGE = {
|
||||
dashboard: 60, // 所有dashboard
|
||||
entity: {
|
||||
list: 60, // 实体列表
|
||||
trafficLine: 60, // 实体详情--通用--流量曲线
|
||||
subscriberKpi: 60, // 实体详情--subscriber--kpi
|
||||
subscriberTopApp: 60, // 实体详情--subscriber--topApp
|
||||
subscriberMap: 60, // 实体详情--subscriber--地图
|
||||
informationAggregation: 0, // 实体详情--通用--信息聚合
|
||||
relatedEntity: 60 * 24 * 7, // 实体详情--通用--相关实体
|
||||
openPort: 60 * 24 * 7, // 实体详情--通用--开放端口
|
||||
deviceInformation: 60 * 24 * 7, // 实体详情--subscriber--设备信息
|
||||
accountInformation: 60 * 24 * 7, // 实体详情--subscriber--账户信息
|
||||
securityEvent: 60 * 24 * 7, // 实体详情--通用--安全事件
|
||||
performanceEvent: 60 * 24 * 7, // 实体详情--通用--性能事件
|
||||
behaviorPattern: 60 * 24 * 7 // 实体详情--IP--行为模式
|
||||
},
|
||||
detection: 60 // 事件日志列表
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Binary file not shown.
|
Before Width: | Height: | Size: 881 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 KiB |
@@ -8,7 +8,7 @@
|
||||
<script src="config.js"></script>
|
||||
<title>Cyber Narrator</title>
|
||||
</head>
|
||||
<body>
|
||||
<body class="theme-light">
|
||||
<noscript>
|
||||
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
||||
</noscript>
|
||||
|
||||
@@ -7,18 +7,15 @@
|
||||
<el-form class="login__box">
|
||||
<el-form-item>
|
||||
<el-input
|
||||
prefix-icon="cn-icon cn-icon-user2"
|
||||
class="login--input login__input"
|
||||
v-model="username"
|
||||
>
|
||||
<template #prefix>
|
||||
<i class="cn-icon cn-icon-user2"></i>
|
||||
</template>
|
||||
</el-input>
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-input
|
||||
class="login--input"
|
||||
prefix-icon="Lock"
|
||||
prefix-icon="el-icon-lock"
|
||||
type="password"
|
||||
@keyup.enter="login"
|
||||
v-model="pin"
|
||||
@@ -57,8 +54,7 @@ export default {
|
||||
return {
|
||||
loading: false,
|
||||
username: '',
|
||||
pin: '',
|
||||
language: ''
|
||||
pin: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
@@ -79,9 +75,6 @@ export default {
|
||||
if (!_.isEmpty(res.data.data.user.lang)) {
|
||||
localStorage.setItem(storageKey.language, res.data.data.user.lang)
|
||||
}
|
||||
if (!localStorage.getItem(storageKey.language)) {
|
||||
localStorage.setItem(storageKey.language, this.language)
|
||||
}
|
||||
if (!_.isEmpty(res.data.data.user.theme)) {
|
||||
localStorage.setItem(storageKey.theme, res.data.data.user.theme)
|
||||
}
|
||||
@@ -92,7 +85,6 @@ export default {
|
||||
// localStorage.setItem(storageKey.userId, res.data.data.user.userId)
|
||||
localStorage.setItem(storageKey.userId, res.data.data.user.id)
|
||||
localStorage.setItem(storageKey.token, res.data.data.token)
|
||||
// const theme =
|
||||
this.$i18n.locale = localStorage.getItem(storageKey.language)
|
||||
}
|
||||
}
|
||||
@@ -115,7 +107,6 @@ export default {
|
||||
})
|
||||
},
|
||||
appearanceOut (data) {
|
||||
this.language = data.lang || defaultLang
|
||||
if (_.isEmpty(localStorage.getItem(storageKey.language))) {
|
||||
localStorage.setItem(storageKey.language, data.lang || defaultLang)
|
||||
}
|
||||
@@ -144,7 +135,7 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
<style scoped>
|
||||
.logins {
|
||||
background-color: #000C18;
|
||||
background-size: auto;
|
||||
@@ -157,12 +148,12 @@ export default {
|
||||
}
|
||||
|
||||
:deep .el-input__inner {
|
||||
//background-color: #0B325C !important;
|
||||
background-color: #0B325C !important;
|
||||
border: none;
|
||||
//border-radius: 0px;
|
||||
//border-bottom: 1px solid #295688;
|
||||
border-radius: 0px;
|
||||
border-bottom: 1px solid #295688;
|
||||
font-size: 14px;
|
||||
//line-height: 14px;
|
||||
line-height: 14px;
|
||||
}
|
||||
:deep .el-input__inner:hover {
|
||||
border-color: #295688;
|
||||
@@ -182,7 +173,6 @@ export default {
|
||||
-webkit-text-fill-color: rgba(231,234,237, .8) !important;
|
||||
transition: background-color 500000000000000000s ease-in-out 0s !important;
|
||||
caret-color: #fff ;
|
||||
font-size: 14px;
|
||||
}
|
||||
.inside {
|
||||
width: 414px;
|
||||
@@ -240,21 +230,4 @@ export default {
|
||||
width: 334px;
|
||||
height: 52px;
|
||||
}
|
||||
.login--input {
|
||||
:deep .el-input__wrapper {
|
||||
background-color: rgb(11, 50, 92) !important;
|
||||
box-shadow: none !important;
|
||||
//border-bottom: 1px solid rgba(103,179,245,0.65);
|
||||
border-bottom: 1px solid #295688;
|
||||
border-radius: 0;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
font-size: 14px;
|
||||
padding: 1px 4px 2px 5px;
|
||||
}
|
||||
|
||||
:deep .el-input__wrapper.is-focus {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,90 +0,0 @@
|
||||
.el-drawer__body {
|
||||
padding: 0 !important;
|
||||
}
|
||||
.el-tabs__item {
|
||||
display: inline-block !important;
|
||||
height: var(--el-tabs-header-height);
|
||||
line-height: var(--el-tabs-header-height);
|
||||
}
|
||||
|
||||
.el-table--border::before, .el-table__border-left-patch {
|
||||
width: 0 !important;
|
||||
}
|
||||
.el-table--border .el-table__inner-wrapper::after, .el-table__inner-wrapper::before {
|
||||
height: 0 !important;
|
||||
}
|
||||
|
||||
.el-popper.is-pure {
|
||||
margin-top: -10px;
|
||||
}
|
||||
.el-select__wrapper {
|
||||
min-height: 28px !important;
|
||||
}
|
||||
.el-input__wrapper {
|
||||
height: 28px;
|
||||
}
|
||||
.el-input--mini .el-input__inner {
|
||||
height: 28px !important;
|
||||
line-height: 28px !important;
|
||||
}
|
||||
.el-table td.el-table__cell div {
|
||||
margin-left: -1px;
|
||||
}
|
||||
.el-table .sort-caret.ascending {
|
||||
border-bottom-color: #c0c4cc !important;
|
||||
}
|
||||
.el-table .ascending .sort-caret.ascending {
|
||||
border-bottom-color: #699dc9 !important;
|
||||
}
|
||||
.el-table .sort-caret.descending {
|
||||
border-top-color: #c0c4cc !important;
|
||||
}
|
||||
.el-table .descending .sort-caret.descending {
|
||||
border-top-color: #699dc9 !important;
|
||||
}
|
||||
.el-radio.el-radio--large {
|
||||
height: auto !important;
|
||||
}
|
||||
.el-radio {
|
||||
height: auto !important;
|
||||
}
|
||||
.el-radio__input.is-checked + .el-radio__label {
|
||||
color: $--color-primary !important;
|
||||
}
|
||||
.el-radio__input.is-checked .el-radio__inner {
|
||||
background: $--color-primary !important;
|
||||
border-color: $--color-primary !important;
|
||||
}
|
||||
.el-radio__label {
|
||||
padding-left: 10px !important;
|
||||
}
|
||||
.el-tag {
|
||||
min-width: 24px;
|
||||
height: 24px !important;
|
||||
line-height: 24px !important;
|
||||
}
|
||||
.el-popover.el-popper {
|
||||
padding: 0 !important;
|
||||
}
|
||||
.my-header-cell-class .el-checkbox__input{
|
||||
display: none;
|
||||
}
|
||||
.el-dialog {
|
||||
padding: 0 !important;
|
||||
}
|
||||
.el-switch.is-checked .el-switch__core {
|
||||
background-color: $--color-primary !important;
|
||||
}
|
||||
.el-date-table td.end-date .el-date-table-cell__text, .el-date-table td.start-date .el-date-table-cell__text {
|
||||
background-color: $--color-primary !important;
|
||||
}
|
||||
.el-date-table td.available:hover {
|
||||
color: $--color-primary !important;
|
||||
}
|
||||
.el-picker__popper.el-popper {
|
||||
margin-top: 8px;
|
||||
}
|
||||
//.el-button:hover {
|
||||
// color: $--color-primary !important;
|
||||
// border-color: $--color-primary !important;
|
||||
//}
|
||||
@@ -1,6 +1,6 @@
|
||||
// 部分 select 通用样式
|
||||
.common-select.el-select__popper {
|
||||
//top: 27px !important;
|
||||
top: 27px !important;
|
||||
.el-popper__arrow {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@@ -64,9 +64,6 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.container__form {
|
||||
|
||||
}
|
||||
.el-form-item__content {
|
||||
.input-box {
|
||||
@@ -139,9 +136,6 @@
|
||||
.el-input__inner:focus {
|
||||
border-color: darken($--right-box-border-color, 20%);
|
||||
}
|
||||
.el-form-item__label {
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
}
|
||||
.el-form-item.is-error .el-input__inner, .el-form-item.is-error .el-input__inner:focus, .el-form-item.is-error .el-textarea__inner, .el-form-item.is-error .el-textarea__inner:focus, .el-message-box__input input.invalid, .el-message-box__input input.invalid:focus {
|
||||
border-color: #F56C6C
|
||||
@@ -307,24 +301,4 @@
|
||||
.el-form-item__content .el-autocomplete .el-input-group {
|
||||
vertical-align: unset;
|
||||
}
|
||||
.el-input__wrapper {
|
||||
border-radius: 2px;
|
||||
height: 32px !important;
|
||||
line-height: 32px !important;
|
||||
//box-shadow: 0 0 0 1px var(--el-input-border-color,var(--el-border-color)) inset;
|
||||
box-shadow: 0 0 0 1px #e7eaed inset;
|
||||
}
|
||||
.el-input__inner, .el-textarea__inner {
|
||||
border: none !important;
|
||||
}
|
||||
.el-select__wrapper {
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
}
|
||||
.el-switch.is-checked .el-switch__core {
|
||||
background-color: $--color-primary;
|
||||
}
|
||||
.el-textarea__inner {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -55,10 +55,6 @@
|
||||
.top-tool-btn--search:focus {
|
||||
border-left: none !important;
|
||||
}
|
||||
.el-input--small .el-input__wrapper {
|
||||
height: 28px !important;
|
||||
border-radius: 2px 0 0 2px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.top-tool-right {
|
||||
@@ -200,7 +196,7 @@
|
||||
position: absolute;
|
||||
width: calc(100% - 40px);
|
||||
border: 1px solid $--right-box-border-color;
|
||||
//border-bottom: none;
|
||||
border-bottom: none;
|
||||
border-radius:4px;
|
||||
|
||||
.caret-wrapper {
|
||||
@@ -218,7 +214,7 @@
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 3px 0 4px 0;
|
||||
padding: 8px 0;
|
||||
border-bottom: 1px solid $--right-box-border-color;
|
||||
}
|
||||
th {
|
||||
@@ -403,9 +399,6 @@
|
||||
.margin-t-20{
|
||||
margin-top: 20px;
|
||||
}
|
||||
.margin-r-3{
|
||||
margin-right: 3px;
|
||||
}
|
||||
.tooltip-column-name {
|
||||
color: #aeb0b9;
|
||||
height:40px;
|
||||
|
||||
@@ -3,92 +3,84 @@
|
||||
height: 100%;
|
||||
|
||||
.search__suffixes {
|
||||
height: 38px;
|
||||
|
||||
&.entity-explorer-home {
|
||||
margin-right: 1px;
|
||||
color: #3976CB;
|
||||
|
||||
&.search__suffixes--text-mode, &.search__suffixes--tag-mode {
|
||||
.search__suffix:last-of-type {
|
||||
width: unset;
|
||||
height: unset;
|
||||
margin-right: 12px;
|
||||
background-color: transparent;
|
||||
|
||||
i {
|
||||
color: #3976CB;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.search__suffixes--text-mode, &.search__suffixes--tag-mode {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
top: 1px;
|
||||
right: 0;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
|
||||
.search__suffix {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 12px;
|
||||
border-radius: 0 2px 2px 0;
|
||||
// margin-left: 8px;
|
||||
|
||||
.cn-icon-search-advance, .cn-icon-search-normal, .cn-icon-filter {
|
||||
color: #A6AAAE;
|
||||
font-size: 18px;
|
||||
}
|
||||
.el-icon-search {
|
||||
color: #3976CB;
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
&:last-of-type {
|
||||
margin-right: 0;
|
||||
width: 41px;
|
||||
height: 38px;
|
||||
line-height: 39px;
|
||||
background: #38ACD2;
|
||||
|
||||
i {
|
||||
font-size: 22px;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.search__suffix-close {
|
||||
i {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
margin-top: -9px;
|
||||
|
||||
.el-icon-error {
|
||||
font-size: 17px;
|
||||
color: #C4C4C4;
|
||||
margin-right: 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.entity-explorer-search {
|
||||
color: #3976CB;
|
||||
margin-top: -2px;
|
||||
}
|
||||
.margin-r-12 {
|
||||
margin-right: 12px;
|
||||
}
|
||||
.new-search__suffix {
|
||||
width: 41px;
|
||||
height: 41px;
|
||||
line-height: 41px;
|
||||
background: #38ACD2;
|
||||
text-align: center;
|
||||
margin-top: -10px;
|
||||
margin-right: -10px;
|
||||
|
||||
.el-icon-search {
|
||||
color: #fff !important;
|
||||
margin-top: 9px !important;
|
||||
}
|
||||
}
|
||||
.my-popper-class .el-popper__arrow {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.search__suffixes--tag-mode__block {
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
/*.search-tip--error {
|
||||
font-size: 14px;
|
||||
color: #F56C6C;
|
||||
}*/
|
||||
}
|
||||
.detections {
|
||||
.tag-search, .CodeMirror {
|
||||
border: 1px solid #E2E5EC;
|
||||
}
|
||||
.advanced-search--show-list .CodeMirror, .advanced-search--show-list .tag-search {
|
||||
border: none;
|
||||
}
|
||||
.tag-search {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 40px;
|
||||
overflow: auto hidden;
|
||||
border: 1px solid #CECECE;
|
||||
border-radius: 2px;
|
||||
padding-left: 10px;
|
||||
padding-right: 80px;
|
||||
background-color: $--select-bg-color-1;
|
||||
border: 1px solid #DEDEDE;
|
||||
background-color: white;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
@@ -112,7 +104,6 @@
|
||||
border-radius: 1px;
|
||||
cursor: pointer;
|
||||
transition: all linear .1s;
|
||||
margin-right: 30px;
|
||||
|
||||
&:hover {
|
||||
background-color: white;
|
||||
@@ -151,20 +142,6 @@
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
cursor: text;
|
||||
.el-select {
|
||||
min-width: 210px !important;
|
||||
min-height: 20px !important;
|
||||
height: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.el-select__wrapper {
|
||||
height: 28px;
|
||||
margin-top: -4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.el-select__wrapper.is-focused {
|
||||
box-shadow: 0 0 0 1px $--color-primary inset !important;
|
||||
}
|
||||
}
|
||||
.condition__operator {
|
||||
color: #3976CB;
|
||||
@@ -190,17 +167,8 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.entity__search .tag-search {
|
||||
padding-left: 65px;
|
||||
}
|
||||
|
||||
.my-popper-class {
|
||||
.el-popover.my-popper-class {
|
||||
width: auto !important;
|
||||
padding: 8px 10px !important;
|
||||
}
|
||||
.el-input__wrapper.is-focus {
|
||||
box-shadow: 0 0 0 1px $--color-primary inset !important;
|
||||
}
|
||||
.el-select-dropdown__item.is-selected {
|
||||
color: #2c72c6 !important;
|
||||
padding: 8px 12px !important;
|
||||
}
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
.CodeMirror {
|
||||
/* Set height, width, borders, and global font properties here */
|
||||
height: 40px !important;
|
||||
height: 40px;
|
||||
color: black;
|
||||
direction: ltr;
|
||||
border: 1px solid #CECECE;
|
||||
@@ -13,16 +13,11 @@
|
||||
color: #ccc;
|
||||
}
|
||||
}
|
||||
.entity__search {
|
||||
.CodeMirror {
|
||||
padding-left: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
/* PADDING */
|
||||
|
||||
.CodeMirror-lines {
|
||||
//padding: 9px 5px; /* Vertical padding around content */
|
||||
padding: 11px 5px; /* Vertical padding around content */
|
||||
}
|
||||
.CodeMirror pre.CodeMirror-line,
|
||||
.CodeMirror pre.CodeMirror-line-like {
|
||||
@@ -175,20 +170,14 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #a22;}
|
||||
overflow: hidden;
|
||||
margin-bottom: -50px; margin-right: -50px;
|
||||
padding-bottom: 50px;
|
||||
height: 50px !important;
|
||||
height: 100%;
|
||||
outline: none; /* Prevent dragging from highlighting the element */
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
}
|
||||
.CodeMirror-scroll::-webkit-scrollbar {
|
||||
width: 0;
|
||||
}
|
||||
.CodeMirror-sizer {
|
||||
position: relative;
|
||||
border-right: 50px solid transparent;
|
||||
width: 3000px; // 避免搜索过长导致换行
|
||||
height: 30px;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
/* The fake, visible scrollbars. Used to force redraw during scrolling
|
||||
@@ -224,7 +213,7 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #a22;}
|
||||
}
|
||||
.CodeMirror-gutter {
|
||||
white-space: normal;
|
||||
height: 100% !important;
|
||||
height: 100%;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
margin-bottom: -50px;
|
||||
@@ -251,7 +240,6 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #a22;}
|
||||
.CodeMirror-lines {
|
||||
cursor: text;
|
||||
min-height: 1px; /* prevents collapsing before first draw */
|
||||
margin-top: 4px;
|
||||
}
|
||||
.CodeMirror pre.CodeMirror-line,
|
||||
.CodeMirror pre.CodeMirror-line-like {
|
||||
@@ -363,127 +351,3 @@ div.CodeMirror-dragcursors {
|
||||
|
||||
/* Help users use markselection to safely style text background */
|
||||
span.CodeMirror-selectedtext { background: none; }
|
||||
|
||||
.CodeMirror-hint-active {
|
||||
background-color: #eaf1f5;
|
||||
color: #5a90b0;
|
||||
}
|
||||
|
||||
.el-dropdown-menu__item.CodeMirror-hint {
|
||||
line-height: 20px;
|
||||
/*font-family: NotoSansSC-Regular;*/
|
||||
}
|
||||
|
||||
.hint-clear {
|
||||
color: #31739C !important;
|
||||
}
|
||||
|
||||
.hint-title {
|
||||
margin: 7px 0 3px 0 !important;
|
||||
/* 禁止选中 样式 */
|
||||
background: #fff !important;
|
||||
font-family: NotoSansHans-Medium;
|
||||
font-size: 12px;
|
||||
color: #333333 !important;
|
||||
letter-spacing: 0;
|
||||
font-weight: 600 !important;
|
||||
line-height: 12px;
|
||||
}
|
||||
|
||||
.cm-s-eclipse span.cm-string-2 {
|
||||
//color: #D85512;
|
||||
}
|
||||
|
||||
.in-coder-panel {
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
.in-coder-panel pre {
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
.in-coder-panel .CodeMirror {
|
||||
/*height: inherit;*/
|
||||
}
|
||||
|
||||
.in-coder-panel input {
|
||||
font-size: 12px !important;
|
||||
display: block;
|
||||
border-color: transparent !important;
|
||||
padding: 0 0 0 8px !important;
|
||||
}
|
||||
|
||||
.CodeMirror-hints {
|
||||
font-family: NotoSansSC-Regular !important;
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
.CodeMirror-line {
|
||||
//font-family: Arial !important;
|
||||
}
|
||||
|
||||
.CodeMirror-hint {
|
||||
margin: 0;
|
||||
padding: 0 !important;
|
||||
line-height: 20px !important;
|
||||
border-radius: 2px;
|
||||
white-space: pre;
|
||||
color: black;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.cm-variable-2{
|
||||
color: #164 !important;
|
||||
}
|
||||
|
||||
.default-tips-header,.default-tips-title {
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
font-weight: 700;
|
||||
color: #333333;
|
||||
font-size: 14px;
|
||||
margin: 6px 0;
|
||||
font-family: NotoSansSC-Bold;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.default-tips-header {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.show-hint-tips__p {
|
||||
word-break: keep-all;
|
||||
margin: 0;
|
||||
line-height: 24px;
|
||||
color: #575757;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.Hint {
|
||||
padding: 0;
|
||||
z-index: 2;
|
||||
|
||||
.hint__block {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: calc(100% - 41px);
|
||||
min-height: 298px;
|
||||
margin-top: 6px;
|
||||
box-shadow: 0 2px 8px 0 rgba(0,0,0,.3);
|
||||
z-index: 2;
|
||||
|
||||
.hint__block-filter {
|
||||
width: 319px;
|
||||
background: #fff;
|
||||
border-right: 1px solid #DEDEDE;
|
||||
padding: 12px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.hint__block-helper {
|
||||
width: calc(100% - 319px);
|
||||
background: #fff;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -32,10 +32,8 @@
|
||||
padding: 0 10px;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
//background: #FFFFFF;
|
||||
background: var(--el-fill-color-blank);
|
||||
//border: 1px solid #DEDEDE;
|
||||
border: 1px solid var(--el-border-color);
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #DEDEDE;
|
||||
box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
|
||||
border-radius: 2px;
|
||||
height: 28px;
|
||||
@@ -58,8 +56,7 @@
|
||||
|
||||
.date-range-title {
|
||||
font-size: 14px;
|
||||
//color: #666666;
|
||||
color: $--text-color-4;
|
||||
color: #666666;
|
||||
font-weight: 600;
|
||||
padding: 14px 0 7px 8px;
|
||||
}
|
||||
@@ -74,8 +71,7 @@
|
||||
white-space: nowrap;
|
||||
display: inline-block;
|
||||
margin: 0 5px;
|
||||
//color: #353636;
|
||||
color: $--text-color-1;
|
||||
color: #353636;
|
||||
.cn-icon-Data {
|
||||
color: #575757;
|
||||
}
|
||||
@@ -92,8 +88,7 @@
|
||||
.date-range-panel {
|
||||
height: 426px;
|
||||
width: 500px;
|
||||
//background: #FFFFFF;
|
||||
background: $--select-bg-color-1;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
|
||||
position: absolute;
|
||||
right: 0;
|
||||
@@ -107,8 +102,7 @@
|
||||
|
||||
.content-title {
|
||||
font-size: 14px;
|
||||
//color: #666666;
|
||||
color: var(--el-text-color-primary);
|
||||
color: #666666;
|
||||
font-weight: 400;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
@@ -140,13 +134,9 @@
|
||||
|
||||
.date-range-history-item:hover {
|
||||
/*font-weight: 600;*/
|
||||
//background: #f9f9f9;
|
||||
background: $--select-bg-color-hover-1;
|
||||
background: #f9f9f9;
|
||||
}
|
||||
}
|
||||
.el-range-editor.el-input__wrapper{
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.date-range-panel-content-right {
|
||||
@@ -166,18 +156,15 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
//color: #333333;
|
||||
color: var(--el-text-color-primary);
|
||||
color: #333333;
|
||||
font-weight: 400;
|
||||
padding: 0 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
li.active {
|
||||
//background: #F2F9FF;
|
||||
//color: #0091FF;
|
||||
background: $--select-bg-color-1;
|
||||
color: var(--el-color-primary);
|
||||
background: #F2F9FF;
|
||||
color: #0091FF;
|
||||
font-weight: 400;
|
||||
|
||||
.cn-icon-check {
|
||||
@@ -188,10 +175,8 @@
|
||||
}
|
||||
|
||||
li:hover {
|
||||
//background: #F2F9FF;
|
||||
background: var(--el-color-primary-light-9);
|
||||
//color: #0091FF;
|
||||
color: var(--el-color-primary);
|
||||
background: #F2F9FF;
|
||||
color: #0091FF;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -221,20 +206,9 @@
|
||||
}
|
||||
|
||||
.my-date-picker {
|
||||
z-index: 100004 !important;
|
||||
.el-popper__arrow {
|
||||
position: absolute;
|
||||
top: 20px !important;
|
||||
left: 642px !important; // element上样式设定是left，添加right不生效
|
||||
}
|
||||
}
|
||||
.my-date-picker__left {
|
||||
.el-popper__arrow {
|
||||
position: absolute;
|
||||
top: 20px !important;
|
||||
left: -6px !important;
|
||||
}
|
||||
.el-popper__arrow::before {
|
||||
border: 1px solid #E7EAED !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -17,9 +17,8 @@
|
||||
.refresh-list{
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
//background: #FFFFFF;
|
||||
background: $--select-bg-color-1;
|
||||
border: 1px solid var(--el-border-color);
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #DEDEDE;
|
||||
box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
|
||||
border-radius: 2px;
|
||||
top: 30px;
|
||||
@@ -30,13 +29,13 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
color: $--text-color-5;
|
||||
color: #333333;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
padding: 8px 0 8px 12px;
|
||||
}
|
||||
.refresh-list-item.active{
|
||||
background: $--select-bg-color-1;
|
||||
background: #F2F9FF;
|
||||
color: #0091FF;
|
||||
font-weight: 400;
|
||||
.cn-icon-check{
|
||||
@@ -46,8 +45,7 @@
|
||||
}
|
||||
}
|
||||
.refresh-list-item:hover{
|
||||
//background: #F2F9FF;
|
||||
background: $--select-bg-color-hover-1;
|
||||
background: #F2F9FF;
|
||||
color: #0091FF;
|
||||
}
|
||||
}
|
||||
@@ -68,6 +66,5 @@
|
||||
.el-button--mini{
|
||||
padding: 4px 6px !important;
|
||||
min-height: 28px !important;
|
||||
height: 28px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
.error-component {
|
||||
position: absolute;
|
||||
//width: 100%;
|
||||
//height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 1000;
|
||||
}
|
||||
.error-block {
|
||||
display: inline-block;
|
||||
|
||||
@@ -17,9 +17,8 @@
|
||||
box-shadow: none;
|
||||
|
||||
&>.el-tabs__header {
|
||||
//background-color: white;
|
||||
background-color: $--select-bg-color-1;
|
||||
border-color: $--border-color-2;
|
||||
background-color: white;
|
||||
border-color: #E2E5EC;
|
||||
|
||||
.el-tabs__nav-wrap {
|
||||
padding-left: 27px;
|
||||
@@ -34,7 +33,6 @@
|
||||
}
|
||||
.el-tabs__nav {
|
||||
z-index: 1;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.el-tabs__item.is-top {
|
||||
@@ -42,7 +40,7 @@
|
||||
line-height: 35px;
|
||||
|
||||
.chart-tabs__label {
|
||||
color: $--text-color-1;
|
||||
color: #353636;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
box-sizing: border-box;
|
||||
@@ -55,7 +53,7 @@
|
||||
}
|
||||
&.is-active {
|
||||
.chart-tabs__label {
|
||||
color: $--text-color-1;
|
||||
color: #353636;
|
||||
|
||||
i {
|
||||
color: #046EC9;
|
||||
|
||||
@@ -1,89 +1,16 @@
|
||||
//.pagination {
|
||||
// padding-top: 8px;
|
||||
// text-align: center;
|
||||
// max-height: 42px;
|
||||
//
|
||||
// .el-pagination {
|
||||
// max-height: 42px;
|
||||
// padding-right: 0;
|
||||
// }
|
||||
// .pagination-size-select .el-input--mini .el-input__inner{
|
||||
// height: 20px;
|
||||
// line-height: 20px;
|
||||
// margin: 5px 0 5px 5px;
|
||||
// }
|
||||
// .el-pager li, .el-pagination .btn-next, .el-pagination .btn-prev {
|
||||
// margin:5px 5px 0 5px;
|
||||
// padding: 0 4px;
|
||||
// font-size: 13px;
|
||||
// min-width: 20px;
|
||||
// height: 20px;
|
||||
// line-height: 20px;
|
||||
// text-align: center;
|
||||
// border: 1px solid rgba(154,154,154,0.20);
|
||||
// border-radius: 2px;
|
||||
// }
|
||||
// .el-pagination .el-pager li.btn-quicknext, .el-pager li.btn-quickprev {
|
||||
// line-height: 20px;
|
||||
// }
|
||||
// .el-pagination .el-pager .more::before {
|
||||
// line-height: 20px;
|
||||
// }
|
||||
// .el-pagination .el-pager .more {
|
||||
// background-color: $--content-right-background-color;
|
||||
// }
|
||||
// .btn-next, .btn-prev {
|
||||
// background-color: $--content-right-background-color !important;
|
||||
// }
|
||||
// input {
|
||||
// background-color: $--content-right-background-color !important;
|
||||
// }
|
||||
// .el-pager li.number {
|
||||
// color: #666666;
|
||||
// letter-spacing: 0;
|
||||
// font-weight:normal;
|
||||
// background-color: $--content-right-background-color;
|
||||
// }
|
||||
// .el-pager li.number.active {
|
||||
// color: #FFFFFF;
|
||||
// letter-spacing: 0;
|
||||
// }
|
||||
//
|
||||
// .el-pagination .el-pager li.active {
|
||||
// background-color: $--color-primary;
|
||||
// border-radius: 2px;
|
||||
// }
|
||||
// .el-pager li:hover, .el-pagination .btn-next:hover, .el-pagination .btn-prev:hover {
|
||||
// color: #666666;
|
||||
// letter-spacing: 0;
|
||||
// font-weight:normal;
|
||||
// }
|
||||
// .el-pagination__sizes .el-input .el-input__inner, .el-pagination__editor.el-input .el-input__inner {
|
||||
// height: 20px;
|
||||
// border-color: rgba(154,154,154,0.20);
|
||||
// }
|
||||
// .el-pagination__sizes .el-input .el-input__inner:hover {
|
||||
// border-color: rgba(154,154,154,0.20);
|
||||
// }
|
||||
//}
|
||||
//.entity__pagination .pagination {
|
||||
// .el-pager li.more + li {
|
||||
// display: none;
|
||||
// }
|
||||
// .el-pager li.number:not(:last-of-type) {
|
||||
// display: inline-block !important;
|
||||
// }
|
||||
//}
|
||||
|
||||
.pagination {
|
||||
//max-height: 42px;
|
||||
padding-top: 8px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.el-pagination__total {
|
||||
margin-right: 10px;
|
||||
font-size: 13px;
|
||||
text-align: center;
|
||||
max-height: 42px;
|
||||
|
||||
.el-pagination {
|
||||
max-height: 42px;
|
||||
padding-right: 0;
|
||||
}
|
||||
.pagination-size-select .el-input--mini .el-input__inner{
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
margin: 5px 0 5px 5px;
|
||||
}
|
||||
.el-pager li, .el-pagination .btn-next, .el-pagination .btn-prev {
|
||||
margin:5px 5px 0 5px;
|
||||
@@ -96,44 +23,54 @@
|
||||
border: 1px solid rgba(154,154,154,0.20);
|
||||
border-radius: 2px;
|
||||
}
|
||||
.el-pagination .btn-prev {
|
||||
.el-pagination .el-pager li.btn-quicknext, .el-pager li.btn-quickprev {
|
||||
line-height: 20px;
|
||||
}
|
||||
.el-pagination .el-pager .more::before {
|
||||
line-height: 20px;
|
||||
}
|
||||
.el-pagination .el-pager .more {
|
||||
background-color: $--content-right-background-color;
|
||||
}
|
||||
.btn-next, .btn-prev {
|
||||
background-color: $--content-right-background-color !important;
|
||||
}
|
||||
input {
|
||||
background-color: $--content-right-background-color !important;
|
||||
}
|
||||
.el-pager li.number {
|
||||
color: #666666;
|
||||
letter-spacing: 0;
|
||||
font-weight:normal;
|
||||
background-color: $--content-right-background-color;
|
||||
}
|
||||
.el-pager li.number.active {
|
||||
color: #FFFFFF;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.el-pagination .el-pager li.active {
|
||||
background-color: $--color-primary;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.el-pager li:hover, .el-pagination .btn-next:hover, .el-pagination .btn-prev:hover {
|
||||
color: #666666;
|
||||
letter-spacing: 0;
|
||||
font-weight:normal;
|
||||
}
|
||||
.btn-next, .btn-prev {
|
||||
background-color: $--content-right-background-color !important;
|
||||
}
|
||||
.el-pager li.is-active {
|
||||
background-color: #699dc9;
|
||||
color: #fff;
|
||||
font-weight: 500;
|
||||
}
|
||||
.el-pager li, .el-pagination .btn-next, .el-pagination .btn-prev {
|
||||
margin-top: 0;
|
||||
}
|
||||
.el-select {
|
||||
width: 100px !important;
|
||||
margin-left: 3px;
|
||||
}
|
||||
.pagination-size-select .el-select__wrapper{
|
||||
width: 100px;
|
||||
.el-pagination__sizes .el-input .el-input__inner, .el-pagination__editor.el-input .el-input__inner {
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
min-height: 20px !important;
|
||||
margin: 5px 0 5px 5px;
|
||||
padding: 4px 8px 4px 10px;
|
||||
font-size: 12px;
|
||||
border-radius: 2px;
|
||||
border-color: rgba(154,154,154,0.20);
|
||||
}
|
||||
.el-select__suffix {
|
||||
svg {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
.el-pagination__sizes .el-input .el-input__inner:hover {
|
||||
border-color: rgba(154,154,154,0.20);
|
||||
}
|
||||
}
|
||||
.entity__pagination .pagination {
|
||||
.el-pager li.more + li {
|
||||
display: none;
|
||||
}
|
||||
.el-pager li.number:not(:last-of-type) {
|
||||
display: inline-block !important;
|
||||
}
|
||||
//el-icon el-select__caret el-select__icon
|
||||
}
|
||||
|
||||
@@ -1,12 +1,10 @@
|
||||
.cn-container {
|
||||
height: calc(100% - 100px);
|
||||
//background-color: $--content-right-background-color;
|
||||
background-color: var(--bg-color);
|
||||
background-color: $--content-right-background-color;
|
||||
width: 100%;
|
||||
&>div {
|
||||
height: 100%;
|
||||
}
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.cn-header {
|
||||
@@ -50,9 +48,8 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 40px;
|
||||
//background-color: #f7f7f7;
|
||||
background-color: var(--el-bg-color-overlay);
|
||||
border-bottom: 1px solid $--border-color;
|
||||
background-color: #f7f7f7;
|
||||
border-bottom: 1px solid #E2E5EC;
|
||||
|
||||
.cn-icon-a-NetworkAnalytics {
|
||||
margin-left: 20px;
|
||||
@@ -70,6 +67,88 @@
|
||||
.header__left-breadcrumb-item-select{
|
||||
display:flex;
|
||||
align-items: center;
|
||||
.search-input{
|
||||
width:100%;
|
||||
padding: 4px 4px 0px 4px;
|
||||
.el-input__inner{
|
||||
padding:0px 4px;
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #C5C5C5;
|
||||
box-shadow: -1px 1px 10px -1px rgba(205,205,205,0.85);
|
||||
border-radius: 2px;
|
||||
font-size: 12px;
|
||||
/*color: rgba(87,87,87,0.60);*/
|
||||
letter-spacing: 0;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
.breadcrumb-button{
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 24px;
|
||||
justify-content: center;
|
||||
line-height: 24px;
|
||||
padding: 0px 6px;
|
||||
span {
|
||||
margin-right: 6px;
|
||||
}
|
||||
}
|
||||
.breadcrumb-button:hover,.breadcrumb-button__active {
|
||||
cursor:pointer;
|
||||
background: rgba(113,113,113,0.10);
|
||||
box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
|
||||
border-radius: 2px;
|
||||
}
|
||||
.breadcrumb__popper{
|
||||
top: -7px !important;
|
||||
width:auto !important;
|
||||
max-height:206px;
|
||||
overflow:hidden;
|
||||
padding: 0px !important;
|
||||
background: #FFFFFF;
|
||||
border:1px solid #C5C5C5 !important;
|
||||
box-shadow: -1px 1px 10px -1px rgba(205,205,205,0.85)!important;
|
||||
border-radius: 2px !important;
|
||||
.el-row {
|
||||
width: 100% !important;
|
||||
}
|
||||
.selected {
|
||||
color: #0091ff;
|
||||
font-weight: bold;
|
||||
}
|
||||
.el-popper {
|
||||
max-height: 405px;
|
||||
}
|
||||
.select-dropdown {
|
||||
max-height:172px;
|
||||
width:100%;
|
||||
margin: 1px 0px;
|
||||
overflow:auto;
|
||||
list-style: none;
|
||||
padding:4px 0px;
|
||||
box-sizing: border-box;
|
||||
.select-dropdown__item:hover{
|
||||
background-color: #F5F7FA !important;
|
||||
}
|
||||
.select-dropdown__item{
|
||||
width:100%;
|
||||
height:30px;
|
||||
padding:0px 11px;
|
||||
line-height:30px;
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
color: #666665;
|
||||
display: list-item;
|
||||
text-align: -webkit-match-parent;
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -166,9 +245,6 @@
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
.header-menu--item {
|
||||
outline-style: initial;
|
||||
}
|
||||
}
|
||||
.left-menu--pin {
|
||||
width: 20px;
|
||||
@@ -216,93 +292,3 @@
|
||||
border-radius: 4px;
|
||||
border: 2px solid transparent;
|
||||
}
|
||||
|
||||
.breadcrumb__popper{
|
||||
top: 96px !important;
|
||||
width: 180px !important;
|
||||
min-width: 180px;
|
||||
max-height:206px;
|
||||
overflow:hidden;
|
||||
padding: 0 !important;
|
||||
background: #963131;
|
||||
border:1px solid #C5C5C5 !important;
|
||||
box-shadow: -1px 1px 10px -1px rgba(205,205,205,0.85)!important;
|
||||
border-radius: 2px !important;
|
||||
.el-row {
|
||||
width: 100% !important;
|
||||
}
|
||||
.selected {
|
||||
color: #0091ff;
|
||||
font-weight: bold;
|
||||
}
|
||||
.el-popper {
|
||||
max-height: 405px;
|
||||
}
|
||||
.select-dropdown {
|
||||
max-height:172px;
|
||||
width:100%;
|
||||
margin: 1px 0px;
|
||||
overflow:auto;
|
||||
list-style: none;
|
||||
padding:4px 0px;
|
||||
box-sizing: border-box;
|
||||
.select-dropdown__item:hover{
|
||||
background-color: #F5F7FA !important;
|
||||
}
|
||||
.select-dropdown__item{
|
||||
width:100%;
|
||||
height:30px;
|
||||
padding:0px 11px;
|
||||
line-height:30px;
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
color: #666665;
|
||||
display: list-item;
|
||||
text-align: -webkit-match-parent;
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search-input{
|
||||
width:100%;
|
||||
padding: 4px 4px 0px 4px;
|
||||
.el-input__wrapper {
|
||||
border: 1px solid #C5C5C5;
|
||||
box-shadow: -1px 1px 10px -1px rgba(205,205,205,0.85);
|
||||
}
|
||||
.el-input__inner{
|
||||
//padding:0px 4px;
|
||||
//background: #FFFFFF;
|
||||
//border: 1px solid #C5C5C5;
|
||||
//box-shadow: -1px 1px 10px -1px rgba(205,205,205,0.85);
|
||||
border-radius: 2px;
|
||||
font-size: 12px;
|
||||
/*color: rgba(87,87,87,0.60);*/
|
||||
letter-spacing: 0;
|
||||
font-weight: 400;
|
||||
margin-left: -7px;
|
||||
}
|
||||
}
|
||||
.breadcrumb-button{
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 24px;
|
||||
justify-content: center;
|
||||
line-height: 24px;
|
||||
padding: 0px 6px;
|
||||
span {
|
||||
margin-right: 6px;
|
||||
}
|
||||
}
|
||||
.breadcrumb-button:hover,.breadcrumb-button__active {
|
||||
cursor:pointer;
|
||||
background: rgba(113,113,113,0.10);
|
||||
box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
@@ -4,7 +4,6 @@
|
||||
.el-checkbox {
|
||||
margin-right: 24px;
|
||||
line-height: 28px;
|
||||
margin-top: -2px;
|
||||
}
|
||||
.el-checkbox-group {
|
||||
line-height: 28px;
|
||||
@@ -109,40 +108,10 @@
|
||||
height: 32px;
|
||||
margin: 10px 0 0 10px;
|
||||
}
|
||||
.el-input__wrapper {
|
||||
height: 32px !important;
|
||||
padding: 1px 11px !important;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.el-input__inner {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.el-form-item__content {
|
||||
line-height: 40px !important;
|
||||
}
|
||||
}
|
||||
.el-input__inner {
|
||||
border: none;
|
||||
}
|
||||
.el-select--small .el-select__wrapper {
|
||||
padding: 0 10px;
|
||||
min-height: 32px !important;
|
||||
line-height: 32px !important;
|
||||
margin-top: -2px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
.right-box__select--param {
|
||||
//.el-select--small .el-select__prefix {
|
||||
// left: 0;
|
||||
// background-color: #f5f7fa;
|
||||
// color: #999;
|
||||
// padding: 0 1.07143rem;
|
||||
// border: 1px solid #dcdfe6;
|
||||
// border-radius: 2px 0 0 2px;
|
||||
//}
|
||||
.el-select__prefix, .el-input__prefix {
|
||||
.el-input__prefix {
|
||||
left: 0;
|
||||
background-color: #f5f7fa;
|
||||
color: #999;
|
||||
@@ -150,11 +119,5 @@
|
||||
border: 1px solid #dcdfe6;
|
||||
border-radius: 2px 0 0 2px;
|
||||
}
|
||||
.el-select__wrapper {
|
||||
padding-left: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.my-form-item .el-form-item__content {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
@@ -86,12 +86,9 @@
|
||||
width:28px !important;
|
||||
height:28px !important;
|
||||
padding:unset !important;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
i {
|
||||
font-size: 14px;
|
||||
color: $--text-color-2;
|
||||
color: #575757;
|
||||
margin-right:unset !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -81,15 +81,8 @@
|
||||
@import 'views/administration/AdministrationTabs';
|
||||
@import 'views/administration/Appearance.scss';
|
||||
|
||||
@import 'views/system/Plugin';
|
||||
|
||||
@import 'views/setting/knowledgeBase';
|
||||
@import 'views/charts2/entityDetailLine';
|
||||
@import 'views/charts2/EntityDetailSubscriberKpi.scss';
|
||||
@import 'views/charts2/EntityDetailSubscriberTopApp.scss';
|
||||
@import 'views/charts2/entityDetailSubscriberMap.scss';
|
||||
@import 'views/charts2/entityDetailSubscriberLine.scss';
|
||||
|
||||
@import 'views/charts2/entityDetailTabs';
|
||||
@import 'views/charts2/digitalCertificate';
|
||||
@import 'views/charts2/entityDetailBasicInfo';
|
||||
|
||||
@@ -10,21 +10,6 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
.el-form-item {
|
||||
margin-bottom: 27px;
|
||||
}
|
||||
.el-form-item__content {
|
||||
width: 600px;
|
||||
.el-select__wrapper {
|
||||
min-height: 32px !important;
|
||||
line-height: 32px;
|
||||
padding: 0 10px 0 16px;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
.el-form--default.el-form--label-top .el-form-item .el-form-item__label {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.el-input {
|
||||
width:600px;
|
||||
}
|
||||
@@ -75,6 +60,3 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-popper.is-pure {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
@@ -1,94 +0,0 @@
|
||||
.subscriber-kpi {
|
||||
height: 100%;
|
||||
|
||||
.subscriber-kpi-header {
|
||||
height:34px;
|
||||
padding-bottom:10px;
|
||||
font-family: NotoSansHans-Medium;
|
||||
font-size: 14px;
|
||||
color: #353636;
|
||||
font-weight: 500;
|
||||
display:flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.subscriber-kpi-title {
|
||||
height:24px;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
.subscriber-kpi-body {
|
||||
border: 1px solid #E2E5EC;
|
||||
border-radius: 4px;
|
||||
height:calc(100% - 34px);
|
||||
.subscriber-kpi-content {
|
||||
height: calc(100% - 36px);
|
||||
padding: 20px 0 20px 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.panel-chart__no-data {
|
||||
height: calc(100% - 46px);
|
||||
}
|
||||
.kpi-type {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content:space-between;
|
||||
height: calc(100% - 65px);
|
||||
.kpi-type-value {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-bottom:20px;
|
||||
.kpi-type-value-name {
|
||||
line-height: 12px;
|
||||
margin-bottom: 10px;
|
||||
font-size: 14px;
|
||||
color: #575757;
|
||||
font-weight: 400;
|
||||
}
|
||||
.kpi-type-data {
|
||||
display:flex;
|
||||
flex-direction: row;
|
||||
.kpi-type-value-number {
|
||||
white-space: nowrap;
|
||||
font-family: Helvetica-Bold;
|
||||
font-size: 20px;
|
||||
color: #353636;
|
||||
font-weight: 700;
|
||||
}
|
||||
.data-trend {
|
||||
display: flex;
|
||||
width: 50%;
|
||||
.data-total-trend {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 6px;
|
||||
justify-content: center;
|
||||
margin-top: 2px;
|
||||
border-radius: 10px;
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
height: 20px;
|
||||
padding: 0 5px;
|
||||
}
|
||||
.data-total-trend-black {
|
||||
background-color: rgba(113,113,113,0.12);
|
||||
color: #717171;
|
||||
width: 36px;
|
||||
}
|
||||
.data-total-trend-green {
|
||||
background-color: rgba(126,159,84,0.12);
|
||||
color: #7E9F54;
|
||||
}
|
||||
.data-total-trend-red {
|
||||
background-color: rgba(226,97,84,0.12);
|
||||
color: #E26154;
|
||||
.cn-icon-rise1{
|
||||
color: #E44D3E;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,113 +0,0 @@
|
||||
.subscriber-top-app {
|
||||
height: 100%;
|
||||
|
||||
.subscriber-top-app-header {
|
||||
height:34px;
|
||||
padding-bottom:10px;
|
||||
font-family: NotoSansHans-Medium;
|
||||
font-size: 14px;
|
||||
color: #353636;
|
||||
font-weight: 500;
|
||||
display:flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.subscriber-top-app-title {
|
||||
height:24px;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
.subscriber-top-app-body {
|
||||
border: 1px solid #E2E5EC;
|
||||
border-radius: 4px;
|
||||
height:calc(100% - 34px);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 20px 20px 20px;
|
||||
|
||||
.panel-chart__no-data {
|
||||
height: calc(100% - 46px);
|
||||
}
|
||||
.top-app-left {
|
||||
height:100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-right:15px;
|
||||
.app-data {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
color: #353636;
|
||||
font-weight: 400;
|
||||
height:calc(100%/10);
|
||||
.app-index {
|
||||
text-align: right;
|
||||
width:20px;
|
||||
margin-right:15px;
|
||||
}
|
||||
.app-name {
|
||||
width:80px;
|
||||
margin-right:10px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.top-app-divider {
|
||||
height:10px;
|
||||
background: #717171;
|
||||
margin-left:10px;
|
||||
margin-right:8px;
|
||||
}
|
||||
.app-trend-right {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
white-space: nowrap;
|
||||
width:50px;
|
||||
i {
|
||||
margin-right:3px;
|
||||
font-size:12px;
|
||||
color: #717171;
|
||||
}
|
||||
}
|
||||
.app-trend-left {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
white-space: nowrap;
|
||||
width:60px;
|
||||
i {
|
||||
margin-right:3px;
|
||||
font-size:12px;
|
||||
color: #717171;
|
||||
}
|
||||
}
|
||||
.app-up {
|
||||
font-size: 12px;
|
||||
color: #717171;
|
||||
letter-spacing: -0.2px;
|
||||
text-align: center;
|
||||
font-weight: 400;
|
||||
}
|
||||
.app-down {
|
||||
font-size: 12px;
|
||||
color: #717171;
|
||||
letter-spacing: -0.2px;
|
||||
text-align: center;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
.top-app-right {
|
||||
height: 100%;
|
||||
width:calc(100% - 248px);
|
||||
position: relative;
|
||||
.chart-content {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,7 +1,7 @@
|
||||
.dns-event-chart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 1px solid $--border-color;
|
||||
border: 1px solid #E2E5EC;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
.el-popper.analysis-popper {
|
||||
margin-top: -5px !important;
|
||||
top: -5px !important;
|
||||
padding: 0;
|
||||
border: 1px solid #C5C5C5 !important;
|
||||
border: 1px solid #C5C5C5;
|
||||
border-radius: 4px;
|
||||
box-shadow: -1px 1px 10px -1px rgba(205,205,205,0.85);
|
||||
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
align-items: center;
|
||||
|
||||
& > .el-select {
|
||||
width: 162px !important;
|
||||
width: 162px;
|
||||
margin-right: 10px;
|
||||
|
||||
.select-prefix {
|
||||
@@ -34,23 +34,15 @@
|
||||
.line-select-metric {
|
||||
margin-right: 20px;
|
||||
|
||||
.el-select__wrapper {
|
||||
.el-input__inner {
|
||||
width: 127px;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
min-height: 24px !important;
|
||||
padding-left: 4px;
|
||||
font-size: 12px;
|
||||
color: #2C72C6;
|
||||
font-weight: 400;
|
||||
border-radius: 2px;
|
||||
.el-select__placeholder {
|
||||
color: #2C72C6 !important;
|
||||
margin-left: 1px;
|
||||
}
|
||||
.el-select__suffix {
|
||||
margin-right: -2px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,51 +0,0 @@
|
||||
.entity-detail-line--subscriber {
|
||||
$blue: #046ECA;
|
||||
$grey: #353636;
|
||||
height:100%;
|
||||
|
||||
.el-tabs__content {
|
||||
overflow: visible;
|
||||
}
|
||||
.cn-chart__tabs {
|
||||
height:100%;
|
||||
.tab-pane {
|
||||
height:100%;
|
||||
}
|
||||
.el-tabs__header {
|
||||
margin-bottom: 10px;
|
||||
width: calc(100% - 272px);
|
||||
}
|
||||
.el-tabs__nav-wrap::after {
|
||||
height: 1px;
|
||||
background-color: transparent ;
|
||||
}
|
||||
.el-tabs__nav.is-top {
|
||||
height: 33px;
|
||||
|
||||
.el-tabs__active-bar {
|
||||
background-color: $blue;
|
||||
}
|
||||
.el-tabs__item {
|
||||
padding: 0 10px;
|
||||
height: 33px;
|
||||
color: $grey;
|
||||
font-size: 14px;
|
||||
|
||||
&.el-tabs__item.is-top.is-active {
|
||||
color:$blue;
|
||||
}
|
||||
&:nth-child(2) {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.el-tabs__content {
|
||||
height: calc(100% - 40px);
|
||||
border:none;
|
||||
.el-table__body-wrapper {
|
||||
height: calc(100% - 45px) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,70 +0,0 @@
|
||||
.subscriber-map {
|
||||
height: 100%;
|
||||
|
||||
.subscriber-map-header {
|
||||
height: 34px;
|
||||
padding-bottom: 10px;
|
||||
font-size: 14px;
|
||||
color: #353636;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.subscriber-map-title {
|
||||
height: 24px;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
.subscriber-map-body {
|
||||
position: relative;
|
||||
border: 1px solid #E2E5EC;
|
||||
border-radius: 4px;
|
||||
height: calc(100% - 34px);
|
||||
|
||||
.subscriber-map {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
.maplibregl-canvas:focus-visible {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
.panel-chart__no-data {
|
||||
height: calc(100% - 46px);
|
||||
}
|
||||
}
|
||||
|
||||
.subscriber-map-point-tooltip {
|
||||
position: fixed;
|
||||
background-color: white;
|
||||
width: 200px;
|
||||
border: 1px solid #C5C5C5;
|
||||
box-shadow: -1px 1px 10px -1px rgba(205,205,205,0.85);
|
||||
border-radius: 2px;
|
||||
|
||||
.subscriber-map-point-tooltip__time {
|
||||
padding: 10px;
|
||||
font-size: 12px;
|
||||
color: #353636;
|
||||
font-weight: bold;
|
||||
}
|
||||
.subscriber-map-point-tooltip__coordinates {
|
||||
padding: 0 10px 10px;
|
||||
|
||||
.subscriber-map-point-tooltip__coordinate {
|
||||
display: flex;
|
||||
|
||||
.coordinate__label {
|
||||
width: 115px;
|
||||
font-size: 12px;
|
||||
color: #575757;
|
||||
}
|
||||
.coordinate__value {
|
||||
font-size: 12px;
|
||||
color: #353636;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -83,71 +83,6 @@
|
||||
|
||||
.entity-detail-event-block {
|
||||
width: calc(100% - 2px);
|
||||
.behavior-pattern {
|
||||
height:100% ;
|
||||
position: relative;
|
||||
display:flex;
|
||||
flex-direction: row;
|
||||
.behavior-pattern-legend {
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
padding:10px 18px 10px 18px;
|
||||
width:400px;
|
||||
.behavior-pattern-legend__item {
|
||||
display:flex;
|
||||
flex-direction: row;
|
||||
font-size: 12px;
|
||||
color: #353636;
|
||||
line-height: 12px;
|
||||
margin-bottom:11px;
|
||||
.legend-icon {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
margin: 3px 8px 0 0;
|
||||
border-radius: 1px;;
|
||||
}
|
||||
.legend-name {
|
||||
width:180px;
|
||||
font-weight: 400;
|
||||
}
|
||||
.legend-value{
|
||||
display: flex;
|
||||
justify-content: left;
|
||||
margin-left:20px;
|
||||
width:90px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.legend-percent {
|
||||
margin-left:20px;
|
||||
width:70px;
|
||||
justify-content: left;
|
||||
display: flex;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
.behavior-pattern-chart{
|
||||
height: calc(100% - 50px);
|
||||
width:calc(100% - 400px);
|
||||
position: relative
|
||||
}
|
||||
.chart-bottom-dot__left {
|
||||
position: absolute;
|
||||
height: 0;
|
||||
width: 195px;
|
||||
border-bottom: 1px dashed #d3d3d3;
|
||||
top: 319px;left: 575px;
|
||||
}
|
||||
.chart-bottom-dot__right {
|
||||
position: absolute;
|
||||
height: 0;
|
||||
width: 195px;
|
||||
border-bottom: 1px dashed #d3d3d3;
|
||||
top: 319px;left: 830px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.entity-detail-event-error {
|
||||
@@ -155,14 +90,6 @@
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.entity-subscriber-detail-error {
|
||||
margin-top: 0px;
|
||||
margin-left: 0px;
|
||||
.error-block {
|
||||
margin:0px;
|
||||
}
|
||||
}
|
||||
|
||||
.entity-detail-performance {
|
||||
height: 46px;
|
||||
border-radius: $tab-border-radius;
|
||||
|
||||
@@ -32,7 +32,7 @@
|
||||
width: 50px;
|
||||
height: 100%;
|
||||
margin-right: 8px;
|
||||
transform: rotate(-45deg) translate(-5px,-15px);
|
||||
transform: translate(0, -15px);
|
||||
color: #353636;
|
||||
font-size: 12px;
|
||||
}
|
||||
@@ -88,8 +88,7 @@ $blue: #046ECA;
|
||||
.item-popover-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px 0;
|
||||
line-height: 14px;
|
||||
line-height: 32px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
|
||||
@@ -129,25 +128,24 @@ $blue: #046ECA;
|
||||
}
|
||||
}
|
||||
}
|
||||
.link-statistical-dimension {
|
||||
.row-dot {
|
||||
margin-top: 5px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.green-dot {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-radius: 50%;
|
||||
background: #749F4D;
|
||||
}
|
||||
.row-dot {
|
||||
margin-top: 5px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.red-dot {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-radius: 50%;
|
||||
background: #E26154;
|
||||
}
|
||||
.green-dot {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-radius: 50%;
|
||||
background: #749F4D;
|
||||
}
|
||||
|
||||
.red-dot {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-radius: 50%;
|
||||
background: #E26154;
|
||||
}
|
||||
|
||||
.item-popover-up, .item-popover-down {
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
|
||||
.network-overview-apps-title {
|
||||
font-size: 14px;
|
||||
color: $--text-color-1;
|
||||
color: #353636;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
@@ -20,7 +20,7 @@
|
||||
|
||||
&>span {
|
||||
font-size: 12px;
|
||||
color: $--text-color-2;
|
||||
color: #575757;
|
||||
font-weight: 400;
|
||||
margin-right: 3px;
|
||||
}
|
||||
@@ -45,7 +45,7 @@
|
||||
.el-select__caret {
|
||||
line-height: 24px;
|
||||
width: 16px;
|
||||
color: $--text-color-2;
|
||||
color: #575757;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -62,14 +62,14 @@
|
||||
padding-top: 10px;
|
||||
|
||||
.app-card {
|
||||
border: 1px solid $--border-color;
|
||||
border: 1px solid #E2E5EC;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
height: 100px;
|
||||
flex-direction: column;
|
||||
|
||||
&.app-card--create {
|
||||
background-color: $--block-bg-color-1;
|
||||
background-color: #F7F7F7;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
@@ -81,7 +81,7 @@
|
||||
}
|
||||
span {
|
||||
font-size: 12px;
|
||||
color: $--text-color-1;
|
||||
color: #353636;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
@@ -119,12 +119,12 @@
|
||||
border-radius: 2px;
|
||||
font-size: 12px;
|
||||
padding-left: 6.8px;
|
||||
color: $--text-color-1;
|
||||
color: #353636;
|
||||
font-weight: 400;
|
||||
i {
|
||||
margin-right: 5.67px;
|
||||
font-size: 12px;
|
||||
color: $--text-color-2;
|
||||
color: #575757;
|
||||
}
|
||||
}
|
||||
.app-card-title-more-delete:hover {
|
||||
@@ -155,7 +155,7 @@
|
||||
display: flex;
|
||||
.app-card__body-content-number {
|
||||
font-size: 14px;
|
||||
color: $--text-color-1;
|
||||
color: #353636;
|
||||
font-weight: 700;
|
||||
margin-right: 6px;
|
||||
}
|
||||
@@ -171,7 +171,7 @@
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
top: 50%;
|
||||
color: $--text-color-3;
|
||||
color: #717171;
|
||||
margin-top: -10px;
|
||||
background-color: rgba(113, 113, 113, 0.12);
|
||||
}
|
||||
@@ -188,12 +188,12 @@
|
||||
margin-top: -2px;
|
||||
margin-bottom: 2px;
|
||||
font-size: 12px;
|
||||
color: $--text-color-3;
|
||||
color: #778391;
|
||||
}
|
||||
.app-card__body-previous {
|
||||
display: flex;
|
||||
font-size: 12px;
|
||||
color: $--text-color-1;
|
||||
color: #353636;
|
||||
font-weight: 400;
|
||||
div:nth-of-type(1) {
|
||||
margin-right: 5px;
|
||||
@@ -207,10 +207,6 @@
|
||||
.add-app-drawer {
|
||||
height: 526px !important;
|
||||
|
||||
.el-drawer__body {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.add-app {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -220,14 +216,14 @@
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: 46px;
|
||||
background-color: $--select-bg-color-1;
|
||||
background-color: white;
|
||||
|
||||
.header__title {
|
||||
padding-left: 20px;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
line-height: 46px;
|
||||
color: $--text-color-1;
|
||||
color: #353636;
|
||||
}
|
||||
.header__operations {
|
||||
display: flex;
|
||||
@@ -265,12 +261,6 @@
|
||||
flex: 1;
|
||||
position: relative;
|
||||
}
|
||||
.el-tabs__item {
|
||||
display: inline-block;
|
||||
}
|
||||
.el-tabs__item:hover {
|
||||
color: #046eca;
|
||||
}
|
||||
.el-tabs__item.is-top {
|
||||
height: 50px;
|
||||
line-height: 60px;
|
||||
@@ -290,25 +280,18 @@
|
||||
right: 28px;
|
||||
top: 11px;
|
||||
width: 280px;
|
||||
.el-input__wrapper {
|
||||
border-radius: 14px;
|
||||
font-size: 12px;
|
||||
.el-input.el-input--mini {
|
||||
.el-input__inner {
|
||||
font-size: 12px !important;
|
||||
//background: #FFFFFF;
|
||||
//border: 1px solid #DEDEDE;
|
||||
//box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
|
||||
//border-radius: 14px;
|
||||
}
|
||||
.el-input.el-input--mini {
|
||||
.el-input__inner {
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #DEDEDE;
|
||||
box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
|
||||
border-radius: 14px;
|
||||
}
|
||||
.el-input__prefix-inner {
|
||||
&.el-input--prefix {
|
||||
i {
|
||||
color: $--text-color-2;
|
||||
color: #575757;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
margin-left: -2px;
|
||||
margin-right: 6px
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -367,7 +350,7 @@
|
||||
.body__app-left-title {
|
||||
font-family: Helvetica-Bold;
|
||||
font-size: 16px;
|
||||
color: $--text-color-1;
|
||||
color: #353636;
|
||||
font-weight: 700;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
@@ -392,7 +375,7 @@
|
||||
}
|
||||
.body__app-value {
|
||||
font-size: 12px;
|
||||
color: $--text-color-3;
|
||||
color: #717171;
|
||||
line-height: 18px;
|
||||
font-weight: 400;
|
||||
max-height: 54px;
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
.ddos-detection {
|
||||
height: 100%;
|
||||
border: 1px solid $--border-color;
|
||||
border: 1px solid #E2E5EC;
|
||||
border-radius: 4px;
|
||||
background: rgba(113,113,113,0.06);
|
||||
.ddos-detection-title {
|
||||
font-size: 14px;
|
||||
color: $--text-color-1;
|
||||
color: #353636;
|
||||
font-weight: 600;
|
||||
margin-top: 15px;
|
||||
i {
|
||||
@@ -34,7 +34,7 @@
|
||||
flex-direction: column;
|
||||
.ddos-detection-type-value-name {
|
||||
font-size: 12px;
|
||||
color: $--text-color-2;
|
||||
color: #575757;
|
||||
line-height: 12px;
|
||||
font-weight: 400;
|
||||
margin-bottom: 12px;
|
||||
@@ -53,27 +53,23 @@
|
||||
.el-button {
|
||||
margin-right: 20px;
|
||||
width: 117px;
|
||||
height: 29.6px;
|
||||
min-height: 28px;
|
||||
background: $--button-color-1;
|
||||
border: 1px solid $--border-color-1;
|
||||
background: #FBFBFB;
|
||||
border: 1px solid #C5C5C5;
|
||||
box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
|
||||
border-radius: 4px;
|
||||
padding: 8px 5px;
|
||||
span {
|
||||
font-size: 12px;
|
||||
color: $--text-color-2;
|
||||
color: #575757;
|
||||
font-weight: 500;
|
||||
i {
|
||||
//transform: rotate(-90deg);
|
||||
color: $--text-color-2;
|
||||
transform: rotate(-90deg);
|
||||
color: #575757;
|
||||
font-size: 12px;
|
||||
margin-left: 4px;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
background: $--button-bg-color-1 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
border: 1px solid $--border-color;
|
||||
border: 1px solid #E2E5EC;
|
||||
border-radius: 4px;
|
||||
.chart-drawing {
|
||||
height: 100%;
|
||||
@@ -35,10 +35,6 @@
|
||||
display: flex;
|
||||
//flex: 1;
|
||||
.line-select__operation {
|
||||
.el-select__wrapper {
|
||||
height: 24px !important;
|
||||
min-height: 24px !important;
|
||||
}
|
||||
.el-input__inner {
|
||||
width: 100px;
|
||||
}
|
||||
@@ -46,10 +42,6 @@
|
||||
.line-select-reference-line {
|
||||
margin-right: 20px;
|
||||
.line-select__operation {
|
||||
.el-select__wrapper {
|
||||
height: 24px !important;
|
||||
min-height: 24px !important;
|
||||
}
|
||||
.el-input__inner {
|
||||
width: 127px;
|
||||
}
|
||||
@@ -62,36 +54,17 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.line-select__operation {
|
||||
min-width: 127px;
|
||||
height: 24px;
|
||||
margin-left: 3px;
|
||||
box-shadow: none;
|
||||
border-radius: 2px;
|
||||
.el-select__wrapper {
|
||||
min-height: 24px !important;
|
||||
//padding-left: 4px;
|
||||
line-height: 24px !important;
|
||||
.el-input__inner {
|
||||
padding-left: 4px;
|
||||
line-height: 24px;
|
||||
height: 24px;
|
||||
font-size: 12px;
|
||||
color: $--text-color-6;
|
||||
color: #2C72C6;
|
||||
font-weight: 400;
|
||||
padding: 5px 6px 4px 5px !important;
|
||||
.el-select__placeholder {
|
||||
color: $--text-color-6;
|
||||
}
|
||||
.el-select__suffix {
|
||||
.el-icon {
|
||||
color: #575757;
|
||||
}
|
||||
}
|
||||
//.el-input__inner {
|
||||
// padding-left: 4px;
|
||||
// line-height: 24px;
|
||||
// height: 24px;
|
||||
// font-size: 12px;
|
||||
// color: #2C72C6;
|
||||
// font-weight: 400;
|
||||
//}
|
||||
}
|
||||
.el-input__suffix {
|
||||
display: flex;
|
||||
@@ -138,14 +111,14 @@
|
||||
.line-value-unit-number {
|
||||
font-family: Helvetica-Bold;
|
||||
font-size: 28px;
|
||||
color: $--text-color-1;
|
||||
color: #353636;
|
||||
margin-right: 4px;
|
||||
}
|
||||
.line-value-unit-number2 {
|
||||
font-size: 0;
|
||||
span {
|
||||
font-size: 12px;
|
||||
color: $--text-color-2;
|
||||
color: #575757;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
.performance-event {
|
||||
height: 100%;
|
||||
border: 1px solid $--border-color;
|
||||
border: 1px solid #E2E5EC;
|
||||
border-radius: 4px;
|
||||
background: rgba(113,113,113,0.06);
|
||||
.performance-event-title {
|
||||
margin-top: 15px;
|
||||
font-size: 14px;
|
||||
color: $--text-color-1;
|
||||
color: #353636;
|
||||
font-weight: 600;
|
||||
line-height: 1;
|
||||
i {
|
||||
@@ -24,7 +24,7 @@
|
||||
height: 1px;
|
||||
width: calc(100% - 40px);
|
||||
margin: auto;
|
||||
background: $--border-color;
|
||||
background: #E2E5EC;
|
||||
}
|
||||
.performance-event-pie {
|
||||
position: relative;
|
||||
@@ -38,30 +38,26 @@
|
||||
}
|
||||
.pie-button.el-button {
|
||||
width: 96px;
|
||||
height: 29.6px;
|
||||
}
|
||||
.el-button {
|
||||
width: 117px;
|
||||
min-height: 28px;
|
||||
background: $--button-color-1;
|
||||
border: 1px solid $--border-color-1;
|
||||
background: #FBFBFB;
|
||||
border: 1px solid #C5C5C5;
|
||||
box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
|
||||
border-radius: 4px;
|
||||
padding: 8px 5px;
|
||||
margin-left: 30px;
|
||||
span {
|
||||
font-size: 12px;
|
||||
color: $--text-color-2;
|
||||
color: #575757;
|
||||
font-weight: 500;
|
||||
i {
|
||||
//transform: rotate(-90deg);
|
||||
color: $--text-color-2;
|
||||
transform: rotate(-90deg);
|
||||
color: #575757;
|
||||
font-size: 12px;
|
||||
margin-left: 4px;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
background: $--button-bg-color-1 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -52,28 +52,11 @@
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
align-items: flex-start;
|
||||
color: $--text-color-3;
|
||||
font-weight: 400;
|
||||
.data-column__span {
|
||||
font-weight: bold;
|
||||
color: $--text-color-1;
|
||||
}
|
||||
.unit__span {
|
||||
color: #778391;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
.column-loading {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
.loading-icon {
|
||||
position:relative;
|
||||
transform: translateZ(0) scale(0.5);
|
||||
width:20px;
|
||||
height:20px;
|
||||
margin-right:3px;
|
||||
}
|
||||
}
|
||||
.tab-table {
|
||||
border: 1px solid #E2E5EC;
|
||||
border-radius: 4px 4px 0 0;
|
||||
@@ -120,9 +103,9 @@
|
||||
}
|
||||
}
|
||||
.tab-table__average {
|
||||
border: 1px solid $--border-color;
|
||||
border: 1px solid #E2E5EC;
|
||||
border-radius: 4px 4px 0 0;
|
||||
//padding: 1px;
|
||||
padding: 1px;
|
||||
.data-click:hover{
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -185,7 +168,7 @@
|
||||
height: 0px;
|
||||
}
|
||||
.el-table thead {
|
||||
color: $--text-color-1;
|
||||
color: $grey;
|
||||
}
|
||||
.el-table__empty-text{
|
||||
line-height:20px !important;
|
||||
@@ -196,7 +179,6 @@
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
line-height:18px;
|
||||
padding: 1px 10px 0 11px !important;
|
||||
.caret-wrapper {
|
||||
margin-top:3px;
|
||||
}
|
||||
@@ -227,13 +209,6 @@
|
||||
background: #749F4D;
|
||||
}
|
||||
}
|
||||
.el-table__border-left-patch {
|
||||
width: 0;
|
||||
}
|
||||
.el-table__inner-wrapper::after, .el-table__inner-wrapper::before {
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
.el-tabs__header {
|
||||
margin-bottom: 10px;
|
||||
@@ -251,8 +226,8 @@
|
||||
}
|
||||
.el-tabs__item {
|
||||
padding: 0 10px;
|
||||
height: 40px;
|
||||
color: $--text-color-1;
|
||||
height: 33px;
|
||||
color: $grey;
|
||||
font-size: 14px;
|
||||
|
||||
&.el-tabs__item.is-top.is-active {
|
||||
@@ -346,153 +321,8 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.customize-tab__popper{
|
||||
max-height:405px;/*calc(100% - 136px);*/
|
||||
overflow:hidden;
|
||||
padding: 0px !important;
|
||||
background: #FFFFFF;
|
||||
/*border: 1px solid #C5C5C5;*/
|
||||
border:1px solid #C5C5C5 !important;
|
||||
box-shadow: -1px 1px 10px -1px rgba(205,205,205,0.85)!important;
|
||||
border-radius: 2px !important;
|
||||
.el-popper {
|
||||
max-height: 405px;
|
||||
}
|
||||
.el-tabs__header{
|
||||
font-size: 12px;
|
||||
color:green !important;
|
||||
font-weight: 500;
|
||||
margin: 0px ;
|
||||
border-bottom: 1px solid #E2E5EC;
|
||||
height: 30px !important;
|
||||
}
|
||||
.el-tabs__content {
|
||||
max-height: 358px !important;
|
||||
margin:8px 0 6px 0;
|
||||
}
|
||||
.el-tabs__nav{
|
||||
width:100%;
|
||||
}
|
||||
.el-tabs__nav-wrap {
|
||||
margin-bottom: 0px !important;
|
||||
}
|
||||
.el-tabs__item{
|
||||
width:50%;
|
||||
text-align:center;
|
||||
padding:0px;
|
||||
height:30px;
|
||||
line-height: 30px;
|
||||
font-size: 12px;
|
||||
color: #353636;
|
||||
font-weight: 500;
|
||||
}
|
||||
.el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
|
||||
border-top: 3px solid #38ACD2;
|
||||
}
|
||||
.el-tabs--card > .el-tabs__header .el-tabs__item:first-child{
|
||||
border-radius: 2.5px 0 0 0;
|
||||
}
|
||||
.el-tabs--card > .el-tabs__header .el-tabs__item:last-child{
|
||||
border-radius: 0 2.5px 0 0 ;
|
||||
border-left: 1px #E2E5EC solid !important;
|
||||
}
|
||||
.el-tabs--card > .el-tabs__header .el-tabs__item{
|
||||
border-bottom: 0px ;
|
||||
border-top: 3px solid white;
|
||||
color: #353636;
|
||||
}
|
||||
.el-tabs--card > .el-tabs__header .el-tabs__nav {
|
||||
border:0px ;
|
||||
}
|
||||
|
||||
.list {
|
||||
list-style: none;
|
||||
padding-inline-start: 0px !important;
|
||||
/*height:375px;*/
|
||||
max-height: 358px !important;
|
||||
overflow:auto;
|
||||
margin:0 0;
|
||||
.drag-move {
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
|
||||
.list-item:last-child {
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.list-item {
|
||||
width:100%;
|
||||
color: #575757;
|
||||
margin-bottom: 0px;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
text-align: left;
|
||||
font-weight:400;
|
||||
font-size:12px;
|
||||
|
||||
.icon-drag{
|
||||
cursor: move;
|
||||
margin-left:6px;
|
||||
margin-right:3px;
|
||||
}
|
||||
|
||||
.el-checkbox__input.is-checked .el-checkbox__inner {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
background-color: #38ACD2;
|
||||
border-color: #38ACD2;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.el-checkbox__input .el-checkbox__inner {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
background-color: #F2F7F9;
|
||||
border: 1px solid rgba(0,0,0,0.15);
|
||||
border-radius: 2px;
|
||||
}
|
||||
.el-checkbox__input.is-checked + .el-checkbox__label,.el-checkbox__input + .el-checkbox__label {
|
||||
font-size: 12px;
|
||||
color: #575757;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
/*top:0px !important;
|
||||
right:200px !important;
|
||||
transform: translateY(126px) !important;*/
|
||||
}
|
||||
.fixed-row {
|
||||
display:flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
//background: white;
|
||||
background: var(--el-bg-color);
|
||||
width: 100%;
|
||||
height:40px;
|
||||
border:solid 1px $--border-color;
|
||||
//border: 1px solid var(var(--el-border-color-lighter));
|
||||
padding-left:10px !important;
|
||||
text-align: left;
|
||||
border-radius:0 0 4px 4px;
|
||||
color:#046eca;
|
||||
.fixed-button {
|
||||
display:flex;
|
||||
justify-content: center;
|
||||
padding:7px 10px;
|
||||
align-items: center;
|
||||
height: 30px;
|
||||
}
|
||||
.fixed-button:hover {
|
||||
cursor:pointer;
|
||||
background: #e6f4ff;
|
||||
box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
.btn-up{
|
||||
margin-top:40px;
|
||||
}
|
||||
.tab-search__popper{
|
||||
margin-top: -7px;
|
||||
top: -7px !important;
|
||||
width:auto !important;
|
||||
max-height:206px;
|
||||
overflow:hidden;
|
||||
@@ -505,10 +335,10 @@
|
||||
width:100%;
|
||||
padding: 4px 4px 0px 4px;
|
||||
.el-input__inner{
|
||||
//padding:0px 4px;
|
||||
//background: #FFFFFF;
|
||||
//border: 1px solid #C5C5C5;
|
||||
//box-shadow: -1px 1px 10px -1px rgba(205,205,205,0.85);
|
||||
padding:0px 4px;
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #C5C5C5;
|
||||
box-shadow: -1px 1px 10px -1px rgba(205,205,205,0.85);
|
||||
border-radius: 2px;
|
||||
font-size: 12px;
|
||||
/*color: rgba(87,87,87,0.60);*/
|
||||
@@ -556,3 +386,140 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.customize-tab__popper{
|
||||
max-height:405px;/*calc(100% - 136px);*/
|
||||
overflow:hidden;
|
||||
padding: 0px !important;
|
||||
background: #FFFFFF;
|
||||
/*border: 1px solid #C5C5C5;*/
|
||||
border:1px solid #C5C5C5 !important;
|
||||
box-shadow: -1px 1px 10px -1px rgba(205,205,205,0.85)!important;
|
||||
border-radius: 2px !important;
|
||||
.el-popper {
|
||||
max-height: 405px;
|
||||
}
|
||||
.el-tabs__header{
|
||||
font-size: 12px;
|
||||
color:green !important;
|
||||
font-weight: 500;
|
||||
margin: 0px ;
|
||||
border-bottom: 1px solid #E2E5EC;
|
||||
}
|
||||
.el-tabs__content {
|
||||
max-height: 358px !important;
|
||||
margin:8px 0 6px 0;
|
||||
}
|
||||
.el-tabs__nav{
|
||||
width:100%;
|
||||
}
|
||||
.el-tabs__nav-wrap {
|
||||
margin-bottom: 0px !important;
|
||||
}
|
||||
.el-tabs__item{
|
||||
width:50%;
|
||||
text-align:center;
|
||||
padding:0px;
|
||||
height:30px;
|
||||
line-height: 30px;
|
||||
font-size: 12px;
|
||||
color: #353636;
|
||||
font-weight: 500;
|
||||
}
|
||||
.el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
|
||||
border-top: 3px solid #38ACD2;
|
||||
}
|
||||
.el-tabs--card > .el-tabs__header .el-tabs__item:first-child{
|
||||
border-radius: 2.5px 0 0 0;
|
||||
}
|
||||
.el-tabs--card > .el-tabs__header .el-tabs__item:last-child{
|
||||
border-radius: 0 2.5px 0 0 ;
|
||||
border-left: 1px #E2E5EC solid !important;
|
||||
}
|
||||
.el-tabs--card > .el-tabs__header .el-tabs__item{
|
||||
border-bottom: 0px ;
|
||||
border-top: 3px solid white;
|
||||
}
|
||||
.el-tabs--card > .el-tabs__header .el-tabs__nav {
|
||||
border:0px ;
|
||||
}
|
||||
|
||||
.list {
|
||||
list-style: none;
|
||||
padding-inline-start: 0px !important;
|
||||
/*height:375px;*/
|
||||
max-height: 358px !important;
|
||||
overflow:auto;
|
||||
margin:0 0;
|
||||
.drag-move {
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
|
||||
.list-item:last-child {
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.list-item {
|
||||
width:100%;
|
||||
color: #575757;
|
||||
margin-bottom: 0px;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
text-align: left;
|
||||
font-weight:400;
|
||||
font-size:12px;
|
||||
|
||||
.icon-drag{
|
||||
cursor: move;
|
||||
margin-left:6px;
|
||||
margin-right:3px;
|
||||
}
|
||||
|
||||
.el-checkbox__input.is-checked .el-checkbox__inner {
|
||||
background-color: #38ACD2;
|
||||
border-color: #38ACD2;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.el-checkbox__input .el-checkbox__inner {
|
||||
background-color: #F2F7F9;
|
||||
border: 1px solid rgba(0,0,0,0.15);
|
||||
border-radius: 2px;
|
||||
}
|
||||
.el-checkbox__input.is-checked + .el-checkbox__label,.el-checkbox__input + .el-checkbox__label {
|
||||
font-size: 12px;
|
||||
color: #575757;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
/*top:0px !important;
|
||||
right:200px !important;
|
||||
transform: translateY(126px) !important;*/
|
||||
}
|
||||
.fixed-row {
|
||||
display:flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
background: white;
|
||||
width: 100%;
|
||||
height:40px;
|
||||
border:solid 1px #E2E5EC;
|
||||
padding-left:10px !important;
|
||||
text-align: left;
|
||||
border-radius:0 0 4px 4px;
|
||||
color:#046eca;
|
||||
.fixed-button {
|
||||
display:flex;
|
||||
justify-content: center;
|
||||
padding:7px 10px;
|
||||
align-items: center;
|
||||
height: 30px;
|
||||
}
|
||||
.fixed-button:hover {
|
||||
cursor:pointer;
|
||||
background: #e6f4ff;
|
||||
box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
.btn-up{
|
||||
margin-top:40px;
|
||||
}
|
||||
|
||||
@@ -73,14 +73,11 @@
|
||||
padding: 5px 0;
|
||||
.data-column__span {
|
||||
font-size: 12px;
|
||||
color: $--text-color-1;
|
||||
color: #353636;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-table__cell {
|
||||
padding: 13px 0;
|
||||
}
|
||||
.el-table__header-wrapper .el-table__header {
|
||||
tr th:nth-last-child(-n+3) {
|
||||
text-align: center;
|
||||
@@ -89,7 +86,7 @@
|
||||
.el-table__body-wrapper.is-scrolling-none {
|
||||
height: 306px !important;
|
||||
tr td {
|
||||
padding: 13px 0 !important;
|
||||
padding: 13px 0;
|
||||
}
|
||||
tr td:nth-last-child(-n+3) {
|
||||
text-align: center;
|
||||
@@ -102,7 +99,6 @@
|
||||
.data-total {
|
||||
display: flex !important;
|
||||
.data-total-category-icon {
|
||||
margin-left: -2px;
|
||||
i {
|
||||
font-size: 16px;
|
||||
margin-right: 12px;
|
||||
@@ -124,7 +120,6 @@
|
||||
width: 34px;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
margin-left: -2px;
|
||||
}
|
||||
.data-score.data-score-red {
|
||||
background: #E26154;
|
||||
@@ -138,7 +133,6 @@
|
||||
.data-score-no-data {
|
||||
width: 34px;
|
||||
text-align: center;
|
||||
margin-left: -2px;
|
||||
}
|
||||
}
|
||||
.data-total-value {
|
||||
|
||||
@@ -47,7 +47,7 @@
|
||||
padding: 4px 0;
|
||||
.data-column__span {
|
||||
font-size: 12px;
|
||||
color: $--text-color-1;
|
||||
color: #353636;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
@@ -116,7 +116,4 @@
|
||||
left: 0;
|
||||
top: 32px;
|
||||
}
|
||||
.el-table .cell {
|
||||
padding: 0 10px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -24,29 +24,12 @@
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 10px;
|
||||
display: inline-block;
|
||||
|
||||
.el-select__wrapper {
|
||||
font-size: 12px;
|
||||
padding: 0;
|
||||
}
|
||||
.el-select__popper.map-select-down {
|
||||
top: 32px !important;
|
||||
.el-popper__arrow {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.el-select__placeholder {
|
||||
padding-left: 16px;
|
||||
color: #2c72c6;
|
||||
}
|
||||
.el-select__prefix {
|
||||
padding-left: 5px;
|
||||
}
|
||||
.el-select__suffix {
|
||||
padding-right: 10px;
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
.map-select {
|
||||
margin-left: 10px;
|
||||
|
||||
@@ -57,19 +40,6 @@
|
||||
width: 110px;
|
||||
}
|
||||
}
|
||||
.map-select__location {
|
||||
&.el-select {
|
||||
width: 222px;
|
||||
}
|
||||
.el-select__wrapper {
|
||||
min-height: 28px;
|
||||
height: 28px;
|
||||
.el-select__placeholder {
|
||||
padding-left: 4px;
|
||||
color: #c0c4cc;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.map-legend {
|
||||
display: flex;
|
||||
|
||||
@@ -20,36 +20,12 @@
|
||||
border: 1px solid #E2E5EC;
|
||||
border-radius: 4px;
|
||||
padding: 1px;
|
||||
|
||||
.el-scrollbar__thumb {
|
||||
background: rgba(0,0,0,0);
|
||||
//width: calc(100% - 200px) !important;
|
||||
}
|
||||
.el-table__empty-block {
|
||||
width: calc(100% - 2px) !important;
|
||||
}
|
||||
.el-table__empty-text {
|
||||
line-height: 25px !important;
|
||||
.table-no-data {
|
||||
//margin-left: -2px !important;
|
||||
.icon {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
margin-left: 1px;
|
||||
}
|
||||
.table-no-data__title {
|
||||
font-size: 14px;
|
||||
color: #575757;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-table__header-wrapper {
|
||||
tr th {
|
||||
padding: 4px 0;
|
||||
.data-column__span {
|
||||
font-size: 12px;
|
||||
color: $--text-color-1;
|
||||
color: #353636;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
@@ -58,6 +34,20 @@
|
||||
tr td {
|
||||
padding: 6.75px 0;
|
||||
}
|
||||
.el-table__empty-block .el-table__empty-text {
|
||||
line-height: 25px;
|
||||
.table-no-data {
|
||||
.icon {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
.table-no-data__title {
|
||||
font-size: 14px;
|
||||
color: #575757;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.data-recent-table {
|
||||
@@ -116,7 +106,4 @@
|
||||
.el-table--group::after,.el-table--border::after, .el-table::before {
|
||||
height: 0px;
|
||||
}
|
||||
.el-table .cell {
|
||||
padding: 0 10px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -18,7 +18,6 @@
|
||||
|
||||
&>.el-tabs__header {
|
||||
background-color: white;
|
||||
//background-color: #f00;
|
||||
border-color: #E2E5EC;
|
||||
|
||||
.el-tabs__nav-wrap {
|
||||
|
||||
@@ -22,37 +22,17 @@
|
||||
}
|
||||
.line-select__operation {
|
||||
height: 24px;
|
||||
min-height: 24px;
|
||||
margin-left: 3px;
|
||||
box-shadow: none;
|
||||
border-radius: 2px;
|
||||
.el-select__wrapper {
|
||||
.el-input__inner {
|
||||
width: 225px;
|
||||
height: 24px !important;
|
||||
min-height: 24px !important;
|
||||
height: 24px;
|
||||
padding-left: 4px;
|
||||
line-height: 24px;
|
||||
font-size: 12px;
|
||||
color: #2C72C6;
|
||||
font-weight: 400;
|
||||
.el-select__placeholder {
|
||||
color: #2C72C6;
|
||||
margin-left: 1px;
|
||||
}
|
||||
.el-input__inner {
|
||||
width: 225px;
|
||||
height: 24px;
|
||||
padding-left: 4px;
|
||||
line-height: 24px;
|
||||
font-size: 12px;
|
||||
color: #2C72C6;
|
||||
font-weight: 400;
|
||||
}
|
||||
.el-select__suffix {
|
||||
margin-right: -7px;
|
||||
i {
|
||||
color: #575757 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-input__suffix {
|
||||
display: flex;
|
||||
|
||||
@@ -15,14 +15,14 @@
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
margin-top: 20px;
|
||||
padding: 0 20px 20px;
|
||||
|
||||
.panel__title {
|
||||
font-size: 24px;
|
||||
line-height: 24px;
|
||||
font-weight: 900;
|
||||
//color: #353636;
|
||||
color: $--text-color-1;
|
||||
color: #353636;
|
||||
display:flex;
|
||||
.score {
|
||||
.circle-icon {
|
||||
@@ -77,7 +77,7 @@
|
||||
display: flex;
|
||||
|
||||
&>.el-select {
|
||||
width: 162px !important;
|
||||
width: 162px;
|
||||
margin-right: 10px;
|
||||
|
||||
.select-prefix {
|
||||
@@ -97,22 +97,6 @@
|
||||
.panel__time {
|
||||
display: flex;
|
||||
}
|
||||
.el-select__wrapper {
|
||||
height: 28px !important;
|
||||
min-height: 20px !important;
|
||||
padding: 5px 7px 4px 5px !important;
|
||||
.el-select__prefix {
|
||||
.select-prefix {
|
||||
margin-right: -5px !important;
|
||||
}
|
||||
}
|
||||
.el-select__suffix {
|
||||
.el-icon {
|
||||
margin-left: -17px !important;
|
||||
margin-top: -2px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.chart-list {
|
||||
|
||||
@@ -1,17 +1,6 @@
|
||||
.form-setting__block {
|
||||
width: 620px;
|
||||
|
||||
&.el-form-item {
|
||||
margin-bottom: 20px;
|
||||
margin-top: -4px;
|
||||
}
|
||||
.el-select__wrapper, .el-input__wrapper {
|
||||
min-height: 24px !important;
|
||||
height: 24px !important;
|
||||
}
|
||||
.el-switch__label.is-active {
|
||||
color: $--text-color-1;
|
||||
}
|
||||
.el-form-item__label {
|
||||
height: 14px;
|
||||
line-height: 14px;
|
||||
@@ -42,12 +31,8 @@
|
||||
line-height: 16px;
|
||||
margin-right: 10px;
|
||||
|
||||
.block-mode-icon1 {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.block-mode-icon {
|
||||
font-size: 15px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -205,13 +190,12 @@
|
||||
}
|
||||
}
|
||||
|
||||
.form-setting__btn, .form-setting__btn1, .policy-form__footer__btn {
|
||||
.form-setting__btn, .form-setting__btn1 {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
||||
.el-button {
|
||||
width: 80px !important;
|
||||
height: 30px !important;
|
||||
min-height: 30px !important;
|
||||
line-height: 30px !important;
|
||||
@@ -224,25 +208,9 @@
|
||||
font-weight: 500;
|
||||
padding: 0 14px;
|
||||
}
|
||||
|
||||
.btn1 {
|
||||
margin-right: 10px;
|
||||
.el-button {
|
||||
background: #F5F6F7;
|
||||
border: 1px solid rgba(215,215,215,1);
|
||||
color: #353636;
|
||||
}
|
||||
}
|
||||
}
|
||||
.policy-form__footer__btn {
|
||||
justify-content: center;
|
||||
margin-top: 8px;
|
||||
|
||||
.btn1 {
|
||||
margin-right: 16px;
|
||||
}
|
||||
}
|
||||
.form-setting__btn1, .policy-form__footer__btn {
|
||||
.form-setting__btn1 {
|
||||
.el-button {
|
||||
padding: 0 11px !important;
|
||||
}
|
||||
|
||||
@@ -10,9 +10,9 @@
|
||||
}
|
||||
|
||||
.detection-form-content {
|
||||
height: calc(100% - 92px);
|
||||
height: 100%;
|
||||
overflow: scroll;
|
||||
padding-bottom: 20px;
|
||||
padding-bottom: 40px;
|
||||
|
||||
.detection-form-collapse {
|
||||
margin-top: 20px;
|
||||
@@ -101,12 +101,6 @@
|
||||
justify-content: flex-start;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
|
||||
.policy-form-item {
|
||||
.el-form-item__error {
|
||||
width: 260px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-input--mini .el-input__inner {
|
||||
@@ -130,22 +124,6 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.policy-form-trigger {
|
||||
.el-collapse-item__content {
|
||||
padding-bottom: 0 !important;
|
||||
}
|
||||
.el-input__wrapper, .el-select__wrapper {
|
||||
height: 24px !important;
|
||||
line-height: 24px !important;
|
||||
min-height: 24px !important;
|
||||
width: 112px;
|
||||
margin: 0 12px;
|
||||
}
|
||||
.el-input__inner {
|
||||
padding: 0 15px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-input--mini, .el-input--mini .el-input__inner {
|
||||
@@ -159,13 +137,4 @@
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.policy-form__footer {
|
||||
width: calc(100% + 40px);
|
||||
height: 60px;
|
||||
margin-left: -20px;
|
||||
box-shadow: 0 -1px 4px 0 rgba(0,0,0,0.10);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
background-color: rgba(0, 0, 0, 0.16) !important;
|
||||
}
|
||||
|
||||
.detection-drawer-title, .basic-function-value, basic-description-value, .drawer-trigger-minutes {
|
||||
.detection-drawer-title, .basic-function-value, basic-description-value {
|
||||
font-family: NotoSansSChineseRegular;
|
||||
font-size: 14px;
|
||||
color: #717171;
|
||||
@@ -34,15 +34,6 @@
|
||||
|
||||
.drawer-basic-id {
|
||||
margin-bottom: 10px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
i {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -67,10 +58,6 @@
|
||||
color: #046ECA;
|
||||
}
|
||||
|
||||
.drawer-trigger-minutes {
|
||||
color: #353636;
|
||||
}
|
||||
|
||||
.detection-drawer-collapse {
|
||||
background: #FFFFFF;
|
||||
border: 1px solid rgba(226, 229, 236, 1);
|
||||
|
||||
@@ -2,124 +2,98 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 280px;
|
||||
margin-right: 12px;
|
||||
padding: 10px;
|
||||
margin-right: 10px;
|
||||
background-color: white;
|
||||
overflow: auto;
|
||||
z-index: 1;
|
||||
border: 1px solid rgba(226, 229, 236, 1) !important;
|
||||
border-radius: 4px !important;
|
||||
|
||||
.filter-case__header {
|
||||
padding-left: 8px;
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
background: #F7F7F7;
|
||||
box-shadow: 0 1px 0 0 rgba(226,229,236,1);
|
||||
border-radius: 4px 4px 0 0;
|
||||
}
|
||||
.detection-filter {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 10px;
|
||||
|
||||
.filter__header {
|
||||
height: 46px;
|
||||
line-height: 46px;
|
||||
margin: 0 20px;
|
||||
font-size: 14px;
|
||||
color: #353636;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.filter__body {
|
||||
width: calc(100% - 30px);
|
||||
margin: 0 10px 0 20px;
|
||||
max-height: 265px;
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
|
||||
.filter__body-item {
|
||||
height: 26px;
|
||||
line-height: 26px;
|
||||
.filter__header {
|
||||
display: flex;
|
||||
flex: 0 0 32px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding-left: 10px;
|
||||
color: #666;
|
||||
//background-color: #F3F7FA;
|
||||
cursor: pointer;
|
||||
|
||||
.filter__body-item-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
span {
|
||||
font-size: 14px;
|
||||
padding-left: 6px;
|
||||
}
|
||||
i {
|
||||
font-size: 12px;
|
||||
transition: all linear .1s;
|
||||
transform: rotate(0) translate(0, 2px);
|
||||
}
|
||||
i.arrow-rotate {
|
||||
transform: rotate(90deg) translate(2px, 3px);
|
||||
}
|
||||
.new-detection-filter-header-title {
|
||||
font-size: 14px;
|
||||
color: #353636;
|
||||
font-weight: 400;
|
||||
font-weight: 600;
|
||||
}
|
||||
.new-detection-filter-icon {
|
||||
margin-left: 8px;
|
||||
margin-bottom: 2px;
|
||||
font-weight: bold !important;
|
||||
}
|
||||
}
|
||||
|
||||
.filter__body-item-left-index {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
text-align: center;
|
||||
background: #EFF2F5;
|
||||
border-radius: 2px;
|
||||
margin-right: 6px;
|
||||
font-family: NotoSansHans-Black;
|
||||
font-size: 9px;
|
||||
color: #96A2B0;
|
||||
font-weight: 900;
|
||||
.filter__body {
|
||||
padding: 5px 0 0 15px;
|
||||
|
||||
.el-checkbox-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.el-checkbox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
padding: 5px 0;
|
||||
margin-right: 5px;
|
||||
.el-checkbox__label {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.filter__body-item-left-label {
|
||||
max-width: 180px;
|
||||
font-family: NotoSansSChineseRegular;
|
||||
font-size: 14px;
|
||||
color: #353636;
|
||||
font-weight: 400;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
.filter__checkbox-label {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.filter__body-item-right {
|
||||
flex-shrink: 0;
|
||||
font-family: NotoSansSChineseRegular;
|
||||
font-size: 12px;
|
||||
color: #717171;
|
||||
font-weight: 400;
|
||||
margin-right: 10px;
|
||||
.severity-color-block {
|
||||
width: 4px;
|
||||
height: 15px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.new-detection-filter-title {
|
||||
display: flex;
|
||||
flex: 0 0 32px;
|
||||
align-items: center;
|
||||
padding-left: 27px;
|
||||
background-color: #EFF2F5;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
color: #353636;
|
||||
font-weight: 600;
|
||||
margin: -10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.filter-country-flag {
|
||||
width: 18px;
|
||||
height: 12px;
|
||||
margin-right: 6px;
|
||||
border: 1px solid #E8E8E8;
|
||||
}
|
||||
|
||||
.filter-show-more, .filter-no-show-more {
|
||||
cursor: pointer;
|
||||
height: 26px;
|
||||
line-height: 26px;
|
||||
margin-left: 20px;
|
||||
color: #046ECA;
|
||||
user-select: none; // 禁止文本选中
|
||||
font-size: 12px;
|
||||
}
|
||||
.filter-no-show-more {
|
||||
cursor: not-allowed;
|
||||
color: rgba(16, 16, 16, 0.3);
|
||||
}
|
||||
|
||||
.filter-hr {
|
||||
width: calc(100% - 40px);
|
||||
margin-left: 20px;
|
||||
margin-top: 6px;
|
||||
height: 1px;
|
||||
background: #EFF2F5;
|
||||
//background: #000;
|
||||
}
|
||||
|
||||
.new-detection-filter-title {
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
@@ -130,10 +104,7 @@
|
||||
}
|
||||
.new-detection-filter-content {
|
||||
padding: 20px;
|
||||
.el-checkbox {
|
||||
display: inline-block !important;
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
.new-filter-content-title {
|
||||
font-family: NotoSansHans-Medium;
|
||||
font-size: 14px;
|
||||
@@ -148,12 +119,11 @@
|
||||
|
||||
.new-filter-content-checkbox {
|
||||
line-height: 16px;
|
||||
margin-bottom: 13.6px;
|
||||
margin-bottom: 10px;
|
||||
font-family: NotoSansSChineseRegular;
|
||||
font-size: 14px;
|
||||
color: #353636;
|
||||
font-weight: 400;
|
||||
display: flex !important;
|
||||
|
||||
.el-checkbox__inner {
|
||||
width: 16px !important;
|
||||
@@ -189,7 +159,6 @@
|
||||
font-size: 14px;
|
||||
color: #353636;
|
||||
font-weight: 400;
|
||||
padding-left: 10px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -59,7 +59,6 @@
|
||||
width: 5px;
|
||||
height: 20px;
|
||||
border-radius: 12px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.cn-detection__row {
|
||||
@@ -89,7 +88,6 @@
|
||||
margin-left: 12px;
|
||||
font-size: xx-small;
|
||||
font-weight: bold;
|
||||
margin-top: -1px;
|
||||
}
|
||||
|
||||
.circle {
|
||||
@@ -97,7 +95,7 @@
|
||||
height: 10px;
|
||||
border: 2px solid #da5656;
|
||||
border-radius: 10px;
|
||||
margin-top: 1px;
|
||||
margin-top: 4px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
@@ -121,12 +119,10 @@
|
||||
margin-right: 12px;
|
||||
}
|
||||
.detection-event-severity-block {
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
font-size: 12px;
|
||||
color: #046EC9;
|
||||
font-weight: 500;
|
||||
padding: 0 10px;
|
||||
padding: 2px 10px;
|
||||
background: rgba(56,172,210,0.10);
|
||||
border: 1px solid #ADC7DB;
|
||||
box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
|
||||
@@ -149,7 +145,7 @@
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.basic-info__item, .basic-info__item1 {
|
||||
.basic-info__item {
|
||||
padding-right: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -172,11 +168,6 @@
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
.basic-info__item1 {
|
||||
span: {
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.show-detail {
|
||||
@@ -271,8 +262,3 @@
|
||||
color: #FFD82D !important;
|
||||
}
|
||||
}
|
||||
|
||||
.detection-list-icon {
|
||||
margin-top: 1px;
|
||||
font-size: 16px !important;
|
||||
}
|
||||
|
||||
@@ -37,7 +37,7 @@
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
flex-wrap: nowrap;
|
||||
padding: 6px 10px 6px 0;
|
||||
padding: 2px 10px 2px 0;
|
||||
font-size: 14px;
|
||||
word-break: break-all;
|
||||
|
||||
@@ -45,8 +45,6 @@
|
||||
padding-right: 20px;
|
||||
min-width: 100px;
|
||||
color: #6B717B;
|
||||
line-height: 14px;
|
||||
word-break: normal;
|
||||
}
|
||||
|
||||
.row__charts {
|
||||
@@ -62,15 +60,12 @@
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.row__content, .row__content1 {
|
||||
.row__content {
|
||||
display: flex;
|
||||
//color: #3976CB;
|
||||
color: #046ECA;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
line-height: 14px;
|
||||
|
||||
&.row__content--link {
|
||||
font-style: italic;
|
||||
@@ -92,21 +87,6 @@
|
||||
font-style: italic;
|
||||
color: #1890FF;
|
||||
}
|
||||
|
||||
.row__content__icon {
|
||||
font-size: 14px;
|
||||
margin-right: 5px;
|
||||
color: #1890FF;
|
||||
}
|
||||
|
||||
.row__content__svg {
|
||||
font-size: 14px;
|
||||
margin-right: 7px;
|
||||
}
|
||||
}
|
||||
.row__content1 {
|
||||
display: block;
|
||||
padding-right: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -206,7 +186,6 @@
|
||||
color: #046ECA;
|
||||
margin-bottom: 10px;
|
||||
font-weight: 500;
|
||||
height: 36px;
|
||||
}
|
||||
.timeline__start-time {
|
||||
font-size: 12px;
|
||||
@@ -236,20 +215,13 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.row__tag, .row__tag__level {
|
||||
.row__tag {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 0 4px;
|
||||
//color: white;
|
||||
}
|
||||
.row__tag__level {
|
||||
height: 16px;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
color: #fff;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.performance-event-remark {
|
||||
font-family: NotoSansSChineseRegular;
|
||||
|
||||
@@ -1,10 +1,5 @@
|
||||
|
||||
.detection-table {
|
||||
.el-table td, .el-table th {
|
||||
padding: 12px 0;
|
||||
}
|
||||
.el-table .el-table__cell.is-center {
|
||||
padding-top: 4px;
|
||||
}
|
||||
.el-table th > .cell, .el-table .cell {
|
||||
padding-left: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
@@ -37,37 +32,7 @@
|
||||
height: 32px !important;
|
||||
}
|
||||
}
|
||||
.policy-library-tip {
|
||||
max-width: 180px;
|
||||
padding: 4px;
|
||||
|
||||
.tip__header {
|
||||
color: #353636;
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
}
|
||||
.tip__tags {
|
||||
display: flex;
|
||||
margin-top: 8px;
|
||||
|
||||
.tip__tag {
|
||||
margin-right: 10px;
|
||||
padding: 2px 10px;
|
||||
background-color: #EBF7FA;
|
||||
color: #046ECA;
|
||||
box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
|
||||
border-radius: 12px;
|
||||
}
|
||||
}
|
||||
.tip__description {
|
||||
margin-top: 14px;
|
||||
color: #666;
|
||||
|
||||
&.tip__description--non {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
.detection-tag-blue, .detection-tag-red, .detection-tag-gray, .detection-tag-status0, .detection-tag-status1 {
|
||||
display: inline-block;
|
||||
border-radius: 10px;
|
||||
@@ -96,19 +61,22 @@
|
||||
|
||||
.detection-tag-status0 {
|
||||
font-weight: 500;
|
||||
font-family: NotoSansHans-Medium;
|
||||
background: rgba(113, 113, 113, 0.12);
|
||||
color: #717171;
|
||||
padding: 0 10px;
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
.detection-tag-status1 {
|
||||
font-weight: 500;
|
||||
font-family: NotoSansHans-Medium;
|
||||
background: rgba(126, 159, 84, 0.12);
|
||||
color: #7E9F54;
|
||||
padding: 0 10px;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.detection-table-library {
|
||||
font-family: NotoSansSChineseRegular;
|
||||
font-size: 12px;
|
||||
color: #046ECA;
|
||||
font-weight: 400;
|
||||
|
||||
@@ -129,10 +129,6 @@
|
||||
|
||||
.el-input--small {
|
||||
line-height: 27px;
|
||||
.el-input__wrapper {
|
||||
height: 28px !important;
|
||||
border-radius: 2px 0 0 2px !important;
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
height: 28px;
|
||||
|
||||
@@ -4,18 +4,6 @@
|
||||
width: 100%;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.detections {
|
||||
.entity__pagination{
|
||||
bottom: 9px;
|
||||
height: 40px;
|
||||
width: 100%;
|
||||
}
|
||||
.detections__container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
}
|
||||
.detection__list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@@ -26,7 +26,7 @@
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.explorer-top-tools, .explorer-detection-top-tools, .explorer-entity-top-tools {
|
||||
.explorer-top-tools, .explorer-detection-top-tools {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
@@ -46,10 +46,7 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.explorer-entity-top-tools {
|
||||
width: 100%;
|
||||
}
|
||||
.explorer-detection-top-tools, .explorer-entity-top-tools {
|
||||
.explorer-detection-top-tools {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
@@ -90,15 +87,6 @@
|
||||
font-size: 14px;
|
||||
color: #353636;
|
||||
font-weight: 400;
|
||||
height: 20.8px;
|
||||
line-height: 20.8px;
|
||||
|
||||
.entity-hide-entity {
|
||||
margin-left: 20px;
|
||||
.el-checkbox__label {
|
||||
padding-left: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.explorer-container, .explorer-container-new {
|
||||
display: flex;
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 320px;
|
||||
margin-right: 12px;
|
||||
margin-right: 20px;
|
||||
overflow: auto;
|
||||
z-index: 1;
|
||||
border: 1px solid rgba(226, 229, 236, 1) !important;
|
||||
@@ -32,6 +32,7 @@
|
||||
width: calc(100% - 30px);
|
||||
margin: 0 10px 0 20px;
|
||||
max-height: 265px;
|
||||
min-height: 40px;
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
|
||||
|
||||
@@ -64,7 +64,6 @@
|
||||
i {
|
||||
color: #23BF9A;
|
||||
margin-right: 4px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -350,25 +349,6 @@
|
||||
.data-score-green {
|
||||
background: #749F4D;
|
||||
}
|
||||
.score-dot {
|
||||
display: inline-block;
|
||||
margin-bottom: 2px;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background-color: #CBCBCB;
|
||||
margin-right: 4px;
|
||||
|
||||
&.score-dot--red {
|
||||
background-color: #E26154;
|
||||
}
|
||||
&.score-dot--yellow {
|
||||
background-color: #E5A219;
|
||||
}
|
||||
&.score-dot--green {
|
||||
background-color: #749F4D;
|
||||
}
|
||||
}
|
||||
height:24px;
|
||||
font-size: 14px;
|
||||
color: #046ECA;
|
||||
|
||||
@@ -21,7 +21,7 @@
|
||||
.entity-list--list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
height: auto;
|
||||
/*overflow: visible;/*overflow: auto;*/
|
||||
|
||||
.cn-entity__shadow {
|
||||
|
||||
@@ -43,7 +43,7 @@
|
||||
align-content: center;
|
||||
padding: 16px 0;
|
||||
margin-bottom: 1px;
|
||||
//background-color: white;
|
||||
background-color: white;
|
||||
border-radius: 0 4px 4px 0;
|
||||
|
||||
.cn-entity__icon {
|
||||
@@ -79,20 +79,9 @@
|
||||
.cn-entity__header-title {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.entity-related-entity {
|
||||
font-size: 12px;
|
||||
color: #717171;
|
||||
cursor: pointer;
|
||||
margin-right: 6px;
|
||||
}
|
||||
}
|
||||
.cn-entity__header-tag {
|
||||
|
||||
.entity-row-tag {
|
||||
display: flex;
|
||||
margin-left: 6px;
|
||||
margin-top: 1px;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: -10px;
|
||||
}
|
||||
}
|
||||
|
||||
.cn-entity__body {
|
||||
@@ -109,7 +98,7 @@
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.basic-info__item, .basic-info__item1 {
|
||||
.basic-info__item {
|
||||
padding-right: 30px;
|
||||
|
||||
.item__box {
|
||||
@@ -172,17 +161,6 @@
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
.basic-info__item1 {
|
||||
span: {
|
||||
color: #666;
|
||||
}
|
||||
span:first-of-type {
|
||||
color: #666;
|
||||
}
|
||||
.row-item-label {
|
||||
color: #999 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.row-item-label {
|
||||
font-family: NotoSansSChineseRegular;
|
||||
@@ -196,26 +174,6 @@
|
||||
font-size: 14px;
|
||||
color: #353636;
|
||||
font-weight: 400;
|
||||
|
||||
.score-dot {
|
||||
display: inline-block;
|
||||
margin-bottom: 2px;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background-color: #CBCBCB;
|
||||
margin-right: 4px;
|
||||
|
||||
&.score-dot--red {
|
||||
background-color: #E26154;
|
||||
}
|
||||
&.score-dot--yellow {
|
||||
background-color: #E5A219;
|
||||
}
|
||||
&.score-dot--green {
|
||||
background-color: #749F4D;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -26,8 +26,7 @@
|
||||
padding: 0 20px;
|
||||
|
||||
&.explorer-search__input-case--question-mark-in-line {
|
||||
//flex-direction: row;
|
||||
flex-direction: column;
|
||||
flex-direction: row;
|
||||
padding: 0;
|
||||
|
||||
.explorer-search__input {
|
||||
@@ -35,8 +34,9 @@
|
||||
max-width: unset;
|
||||
}
|
||||
|
||||
.explorer-search__input--border .CodeMirror {
|
||||
border: 1px solid #DEDEDE;
|
||||
.explorer-search__input__border {
|
||||
border: 1px #DEDEDE solid;
|
||||
height: 43px;
|
||||
}
|
||||
}
|
||||
.search-symbol-inline {
|
||||
@@ -53,14 +53,14 @@
|
||||
max-width: 1000px;
|
||||
height: 40px;
|
||||
}
|
||||
.explorer-search__foot,.explorer-search__foot-list {
|
||||
.explorer-search__foot {
|
||||
display: flex;
|
||||
padding-top: 9px;
|
||||
padding-top: 18px;
|
||||
width: 100%;
|
||||
max-width: 1000px;
|
||||
position: relative;
|
||||
justify-content: flex-start;
|
||||
//font-weight: bold;
|
||||
justify-content: space-between;
|
||||
font-weight: bold;
|
||||
|
||||
.foot__item {
|
||||
display: flex;
|
||||
@@ -87,15 +87,14 @@
|
||||
|
||||
.search__history {
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
display: flex;
|
||||
padding: 10px 0 0 0;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
max-width: 1000px;
|
||||
z-index: 2;
|
||||
//top: 47px;
|
||||
border: 1px solid rgba(226,229,236,1);
|
||||
top: 47px;
|
||||
border: 1px solid rgba(206,206,206,0.20);
|
||||
border-radius: 2px;
|
||||
background-color: white;
|
||||
|
||||
@@ -138,35 +137,8 @@
|
||||
color: #66b1ff;
|
||||
}
|
||||
}
|
||||
|
||||
.history__items-new {
|
||||
max-height: 300px;
|
||||
overflow: auto;
|
||||
.el-table th,.el-table td {
|
||||
padding: 6px 0;
|
||||
border: none !important;
|
||||
}
|
||||
.el-table {
|
||||
font-family: NotoSansSChineseRegular;
|
||||
font-size: 14px;
|
||||
color: #575757;
|
||||
font-weight: 400;
|
||||
thead {
|
||||
font-family: NotoSansHans-Medium;
|
||||
font-size: 14px;
|
||||
color: #353636;
|
||||
font-weight: 500;
|
||||
}
|
||||
.cell {
|
||||
padding-left: 18px;
|
||||
}
|
||||
}
|
||||
.el-scrollbar__bar {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
.clear-all {
|
||||
padding-left: 18px;
|
||||
padding-left: 30px;
|
||||
font-weight: normal;
|
||||
font-size: 14px;
|
||||
height: 35px;
|
||||
@@ -180,71 +152,6 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.explorer-search__foot-list {
|
||||
max-width: 756px;
|
||||
position: absolute;
|
||||
left: 196px;
|
||||
top: 44px;
|
||||
.search__history {
|
||||
top: 6px;
|
||||
max-width: 756px;
|
||||
margin-left: -196px;
|
||||
.history__items-new {
|
||||
max-height: 300px;
|
||||
overflow: auto;
|
||||
.el-table th,.el-table td {
|
||||
padding: 4px 0;
|
||||
border: none !important;
|
||||
}
|
||||
.el-table {
|
||||
font-size: 12px;
|
||||
thead {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
.el-table--scrollable-x .el-table__body-wrapper {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.highlight__text {
|
||||
background: #FEECC2;
|
||||
padding: 0 3px;
|
||||
}
|
||||
.highlight__block {
|
||||
background: #FEECC2;
|
||||
}
|
||||
.explorer-search__foot-list .explorer-search__block {
|
||||
margin-left: -196px;
|
||||
top: -44px;
|
||||
}
|
||||
.explorer-search__foot .explorer-search__block {
|
||||
margin-left: 0;
|
||||
top: -40px;
|
||||
}
|
||||
.explorer-search__block {
|
||||
position: absolute;
|
||||
padding-left: 15px;
|
||||
height: 39px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
z-index: 1;
|
||||
|
||||
i {
|
||||
font-size: 20px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.search-dividing-line {
|
||||
width: 1px;
|
||||
height: 26px;
|
||||
background: #DEDEDE;
|
||||
margin-left: 15px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -78,37 +78,11 @@
|
||||
color: #1b2e3b;
|
||||
background: #ebeef5;
|
||||
}
|
||||
.el-range-editor--small.el-input__wrapper {
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
}
|
||||
.cn-detection__footer {
|
||||
text-align: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.el-pagination__jump {
|
||||
margin-left: 3px;
|
||||
}
|
||||
.el-pagination__goto {
|
||||
display: none;
|
||||
}
|
||||
.el-input--small {
|
||||
width: 46px !important;
|
||||
.el-input__wrapper {
|
||||
height: 22px;
|
||||
}
|
||||
}
|
||||
.el-pagination--small {
|
||||
.btn-prev {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.btn-next {
|
||||
margin-left: 10px;
|
||||
}
|
||||
&span {
|
||||
color: $--color-text-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.block.drop-down-time {
|
||||
@@ -202,12 +176,6 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-table__border-left-patch, .el-table--border::before {
|
||||
width: 0;
|
||||
}
|
||||
.el-table--border .el-table__inner-wrapper::after, .el-table__inner-wrapper::before {
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.table-operation-all {
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,49 +0,0 @@
|
||||
.plugin {
|
||||
font-size: 12px;
|
||||
color: #353636;
|
||||
line-height: 14px;
|
||||
font-weight: 400;
|
||||
.type-tag {
|
||||
display: inline-block;
|
||||
padding: 0 10px;
|
||||
background-color: #EBF7FA;
|
||||
color: #046ECA;
|
||||
box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
|
||||
border-radius: 12px;
|
||||
}
|
||||
.plugin-name {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: left;
|
||||
align-items: center;
|
||||
.icon-background {
|
||||
display:flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width:32px;
|
||||
height:32px;
|
||||
background: #ECECEC;
|
||||
border-radius: 4px;
|
||||
margin-right:6px;
|
||||
.plugin-name-icon {
|
||||
width:25px;
|
||||
height:25px;
|
||||
color:red;
|
||||
display:flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
.two-line {
|
||||
overflow: hidden; //超出的文本隐藏
|
||||
text-overflow: ellipsis; //溢出用省略号显示
|
||||
display: -webkit-box;
|
||||
line-clamp:2 ;
|
||||
-webkit-line-clamp: 2; // 超出多少行
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
.cn-table .el-table:not(.chart-table) td {
|
||||
padding: 8px 0 !important;
|
||||
}
|
||||
}
|
||||
@@ -1,8 +1,8 @@
|
||||
@font-face {
|
||||
font-family: "cn-icon"; /* Project id 2614877 */
|
||||
src: url('iconfont.woff2?t=1703561754372') format('woff2'),
|
||||
url('iconfont.woff?t=1703561754372') format('woff'),
|
||||
url('iconfont.ttf?t=1703561754372') format('truetype');
|
||||
src: url('iconfont.woff2?t=1693386443164') format('woff2'),
|
||||
url('iconfont.woff?t=1693386443164') format('woff'),
|
||||
url('iconfont.ttf?t=1693386443164') format('truetype');
|
||||
}
|
||||
|
||||
.cn-icon {
|
||||
@@ -13,58 +13,6 @@
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.cn-icon-system:before {
|
||||
content: "\e6cc";
|
||||
}
|
||||
|
||||
.cn-icon-plugin:before {
|
||||
content: "\e6cd";
|
||||
}
|
||||
|
||||
.cn-icon-IMSI:before {
|
||||
content: "\e812";
|
||||
}
|
||||
|
||||
.cn-icon-APN:before {
|
||||
content: "\e813";
|
||||
}
|
||||
|
||||
.cn-icon-shoujihaoma:before {
|
||||
content: "\e814";
|
||||
}
|
||||
|
||||
.cn-icon-IMEI:before {
|
||||
content: "\e811";
|
||||
}
|
||||
|
||||
.cn-icon-trace-point:before {
|
||||
content: "\e810";
|
||||
}
|
||||
|
||||
.cn-icon-account-info:before {
|
||||
content: "\e80e";
|
||||
}
|
||||
|
||||
.cn-icon-device-info:before {
|
||||
content: "\e80f";
|
||||
}
|
||||
|
||||
.cn-icon-related:before {
|
||||
content: "\e640";
|
||||
}
|
||||
|
||||
.cn-icon-indicator-match:before {
|
||||
content: "\e80c";
|
||||
}
|
||||
|
||||
.cn-icon-threshold:before {
|
||||
content: "\e80d";
|
||||
}
|
||||
|
||||
.cn-icon-behavior:before {
|
||||
content: "\e61c";
|
||||
}
|
||||
|
||||
.cn-icon-category-group:before {
|
||||
content: "\e6c7";
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -27,20 +27,18 @@ $--font-path: '~@/assets/css/themes/src/fonts'; // 避免ele原字体加载语
|
||||
|
||||
/* 主题 */
|
||||
|
||||
$--color-text-primary: #303133 !default;
|
||||
$--border-color: #E2E5EC;
|
||||
|
||||
@import './themes/theme-light.scss'; // 加载主题变量
|
||||
@import './components/index'; // 加载cn组件样式
|
||||
@import './common/index.scss'; // 加载通用样式
|
||||
@import "common/cover-element-plus"; // 覆盖新版elemen-plus样式
|
||||
|
||||
.dark {
|
||||
$--theme: dark;
|
||||
@import './themes/theme-dark.scss'; // 加载主题变量
|
||||
.theme-light {
|
||||
$--theme: light;
|
||||
@import './themes/theme-light.scss'; // 加载主题变量
|
||||
@import './themes/src/index.scss'; // 加载ele样式
|
||||
@import './components/index'; // 加载cn组件样式
|
||||
@import './common/index.scss'; // 加载通用样式
|
||||
}
|
||||
|
||||
.theme-dark {
|
||||
$--theme: dark;
|
||||
@import './themes/theme-dark.scss'; // 加载主题变量
|
||||
@import './themes/src/index.scss'; // 加载ele样式
|
||||
@import './components/index'; // 加载cn组件样式
|
||||
@import './common/index.scss'; // 加载通用样式
|
||||
.fixed-button:hover {
|
||||
background: #40474b !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -11,23 +11,3 @@
|
||||
- theme-chalk/src/mixins/mixins.scss 改动较多，如需了解请比对文件差异
|
||||
- // $arrow-selector: #{& + '__arrow'};
|
||||
改为 $arrow-selector: '.el-popper__arrow';
|
||||
|
||||
### 20240118__element-plus升级
|
||||
#### 变动事项
|
||||
|
||||
- elemen-plus由1.0.2-beta.71升级至2.5.1，旧版本是将element-plus源文件放到theme/src中进行部分修改使用，现在弃用该方案，直接使用element-plus组件，部分组件有差异改动，对比界面进行调整并记录在cover-element.scss
|
||||
- 弃用之前的主题写法，改为官网的主题切换方法。删除body上的class，在html上添加class="dark"。默认明亮主题light，暗黑主题dark，默认引入theme-light.scss样式文件，暗黑主题theme-dark.scss样式文件
|
||||
- 如需添加暗黑样式，先在theme-light.scss添加唯一样式名，再到theme-dark中添加同名样式。如在light中添加字体颜色$--text-color-1: #353636;，则需要在dark中添加$--text-color-1: #d8d8d8;
|
||||
- header.vue的第四级面包屑导航栏，以及NetworkOverviewTabs.vue第一列搜索的popover。原结构的popover被上一层div包裹，但在html中解析成两个div，原来的popper-class需要提出来，不要在原div的class下，否则样式错乱
|
||||
|
||||
#### 新旧组件差异
|
||||
|
||||
- table表格：自定义单元格样式cell-style。老版cell-style接受格式为string/object，新版疑似仅接受object，string格式会报错。表头格式header-cell-style同理。
|
||||
- input输入框1：老版el-input是包含class为el-input__inner的input，新版el-input在此基础上被class="el-input__wrapper"的div包裹。在老版的el-input__inner改动的样式，需要在el-input__wrapper上修改
|
||||
- input输入框2：老版给input添加icon，是给属性prefix-icon添加icon名。新版是在prefix插槽里添加icon标签
|
||||
- icon图标：老版使用：<i class="el-icon-search" />。新版则是svg文件，需要单独引入封装成component的格式，使用时：<el-icon><Search /></el-icon>
|
||||
- select选择器：新版被el-select__wrapper的div包裹，与旧版顺序不同。
|
||||
- * input和select的右侧图标和maxlength间距新版比旧版略大
|
||||
- drawer抽屉：在header.vue中遇到，custom-class="cn-menu"，渲染后class中没有cn-menu，也许是按需引入导致的，额外标注
|
||||
- message-box弹窗：新版在旧版的el-message-box的外层包裹了一层父div el-overlay-message-box，导致原样式会错乱
|
||||
- dialog: custom在2.4版本后被移除，使用class替代，插槽中的title也在2.4版本后移除，使用header替代
|
||||
|
||||
@@ -94,4 +94,4 @@
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -60,23 +60,3 @@ $--border-color-light: #E7EAED;
|
||||
$--chart-box-border-color: $--border-color-light;
|
||||
$--chart-title-hover-background-color: #323238;
|
||||
@import './common';
|
||||
|
||||
|
||||
$--border-color: #363637;
|
||||
$--text-color-1: #d8d8d8;
|
||||
$--text-color-2: #afafaf;
|
||||
$--text-color-3: #a4adb7;
|
||||
$--text-color-4: #BEBEBE;
|
||||
$--text-color-5: #D8D8D8;
|
||||
$--text-color-6: #2764ad;
|
||||
|
||||
$--button-color-1: #1D1D1D;
|
||||
$--button-bg-color-1: #303030;
|
||||
$--border-color-1: var(--el-text-color-disabled);
|
||||
$--border-color-2: #6C6E72;
|
||||
|
||||
$--select-bg-color-1: #1D1E1F;
|
||||
$--select-bg-color-hover-1: #18222C;
|
||||
$--select-bg-color-hover-2: #18222C;
|
||||
|
||||
$--block-bg-color-1: #181818;
|
||||
|
||||
@@ -61,22 +61,3 @@ $--border-color-light: #E7EAED;
|
||||
$--chart-box-border-color: $--border-color-light;
|
||||
$--chart-title-hover-background-color: $--background-color-1;
|
||||
@import './common';
|
||||
|
||||
$--text-color-1: #353636;
|
||||
$--text-color-2: #575757;
|
||||
$--text-color-3: #778391;
|
||||
$--text-color-4: #666666;
|
||||
$--text-color-5: #333333;
|
||||
$--text-color-6: #2C72C6;
|
||||
|
||||
$--button-color-1: #FBFBFB;
|
||||
$--button-bg-color-1: #EBF1F4;
|
||||
$--border-color-1: #C5C5C5;
|
||||
$--border-color-2: #E2E5EC;
|
||||
$--border-color-3: #DEDEDE;
|
||||
|
||||
$--select-bg-color-1: #FFFFFF;
|
||||
$--select-bg-color-hover-1: #f9f9f9;
|
||||
$--select-bg-color-hover-2: #F2F9FF;
|
||||
|
||||
$--block-bg-color-1: #F7F7F7;
|
||||
|
||||
@@ -5,20 +5,16 @@
|
||||
@mouseleave="showCloseIcon = false"
|
||||
>
|
||||
<text-mode
|
||||
test-id="text-mode"
|
||||
v-if="searchMode === 'text'"
|
||||
ref="textMode"
|
||||
:column-list="columnList"
|
||||
:str="str"
|
||||
:show-list="showList"
|
||||
:is-show-hint="showHint"
|
||||
:unit-test-str="unitTestStr"
|
||||
@changeMode="changeMode"
|
||||
@search="search"
|
||||
:show-close-icon="showCloseIcon"
|
||||
></text-mode>
|
||||
<tag-mode
|
||||
test-id="tag-mode"
|
||||
v-if="searchMode === 'tag'"
|
||||
ref="tagMode"
|
||||
:column-list="columnList"
|
||||
@@ -51,11 +47,6 @@ export default {
|
||||
showCloseIcon: false
|
||||
}
|
||||
},
|
||||
provide () {
|
||||
return {
|
||||
myHighLight: !this.noHighlight
|
||||
}
|
||||
},
|
||||
props: {
|
||||
// 默认模式，tag | text
|
||||
defaultMode: String,
|
||||
@@ -73,22 +64,11 @@ export default {
|
||||
required: true
|
||||
},
|
||||
// 连接符列表
|
||||
connectionList: Array,
|
||||
showHint: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
noHighlight: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
connectionList: Array
|
||||
},
|
||||
emits: ['search'],
|
||||
methods: {
|
||||
search (parseData) {
|
||||
if (this.isUnitTesting) {
|
||||
this.unitTestParam = parseData
|
||||
}
|
||||
this.$emit('search', parseData)
|
||||
},
|
||||
changeMode (mode, { str, metaList }) {
|
||||
|
||||
@@ -7,13 +7,9 @@
|
||||
>
|
||||
<template v-if="meta.meta === condition">
|
||||
<!-- 删除按钮 -->
|
||||
<div class="condition__delete" @click="removeCondition(index)">
|
||||
<el-icon><CircleCloseFilled /></el-icon>
|
||||
<!--<i class="el-icon-error"></i>-->
|
||||
</div>
|
||||
<div class="condition__delete" @click="removeCondition(index)"><i class="el-icon-error"></i></div>
|
||||
<!-- 字段选择 -->
|
||||
<div v-if="meta.column.show" class="condition__column">
|
||||
<!-- <div>-->
|
||||
<div v-show="meta.column.isEditing">
|
||||
<el-select
|
||||
allow-create
|
||||
@@ -21,7 +17,7 @@
|
||||
size="mini"
|
||||
v-model="meta.column.label"
|
||||
ref="columnSelect"
|
||||
:placeholder="meta.column.label || ' '"
|
||||
:placeholder="meta.column.label || ''"
|
||||
@blur="columnBlur(meta, index)"
|
||||
@change="(value) => selectColumn(value, meta)"
|
||||
>
|
||||
@@ -44,58 +40,7 @@
|
||||
<div v-if="meta.operator.value === 'has'" class="condition__operator" style="color: #000C18">({{meta.column.label}},</div>
|
||||
<!-- 值 -->
|
||||
<div class="condition__value">
|
||||
<!--点击=操作符时，单个选择枚举值-->
|
||||
<div v-if="meta.value.isEditing && meta.doc && meta.column.type!==columnType.array">
|
||||
<el-select
|
||||
allow-create
|
||||
filterable
|
||||
size="mini"
|
||||
v-model="meta.value.value"
|
||||
ref="columnValue"
|
||||
:placeholder="meta.value.value || ' '"
|
||||
@blur="valueBlur1(meta, index)"
|
||||
@change="(value) => selectValue(value, meta)"
|
||||
>
|
||||
<el-option
|
||||
v-for="(code, i) in meta.doc.data"
|
||||
:key="i"
|
||||
:label="code.code"
|
||||
:value="code.code"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
|
||||
<!--点击 in 操作符时，多个选择枚举值-->
|
||||
<div v-if="meta.value.isEditing && meta.doc && meta.column.type===columnType.array">
|
||||
<el-select
|
||||
v-model="myCheckboxList"
|
||||
ref="valuesSelect"
|
||||
multiple
|
||||
size="mini"
|
||||
collapse-tags
|
||||
collapse-tags-tooltip
|
||||
:placeholder="meta.value.value || ' '"
|
||||
@blur="valuesBlur(meta, index)"
|
||||
@focus="valuesFocus(meta)"
|
||||
@change="(value) => selectValues(value, meta)"
|
||||
@visible-change="(value) => selectVisibleValues(value, meta)"
|
||||
popper-class="my-select-class"
|
||||
>
|
||||
<template #label>
|
||||
{{ meta.value.value }}
|
||||
</template>
|
||||
<template #default>
|
||||
<el-option
|
||||
v-for="item in meta.doc.data"
|
||||
:key="item.code"
|
||||
:label="item.code"
|
||||
:value="item.code"
|
||||
/>
|
||||
</template>
|
||||
</el-select>
|
||||
</div>
|
||||
|
||||
<div v-if="meta.value.isEditing && !meta.doc">
|
||||
<div v-if="meta.value.isEditing">
|
||||
<!--避免blur事件和keyup.enter重复执行-->
|
||||
<el-input
|
||||
ref="valueInput"
|
||||
@@ -145,27 +90,25 @@
|
||||
</template>
|
||||
</div>
|
||||
<div class="tag-search__add" @click="addCondition">{{$t('entities.advancedSearch.add')}}</div>
|
||||
<div class="search__suffixes search__suffixes--tag-mode search__suffixes--tag-mode__block" :class="showList ? '' : 'entity-explorer-home'">
|
||||
<span class="search__suffix">
|
||||
<div class="search__suffixes search__suffixes--tag-mode">
|
||||
<div class="search__suffix" style="margin-right: 12px">
|
||||
<el-popover
|
||||
popper-class="my-popper-class"
|
||||
placement="top"
|
||||
trigger="hover"
|
||||
:content="$t('overall.switchToText')"
|
||||
:content="$t('entity.switchToBasicSearch')"
|
||||
>
|
||||
<template #reference>
|
||||
<i class="cn-icon cn-icon-search-normal" @click="changeMode"></i>
|
||||
</template>
|
||||
</el-popover>
|
||||
</span>
|
||||
<span v-show="metaList.length>0" class="search__suffix search__suffix-close" @click="cleanMetaList">
|
||||
<el-icon><CircleCloseFilled /></el-icon>
|
||||
<!--<i class="el-icon-error"></i>-->
|
||||
</span>
|
||||
<span test-id="tag-search" class="search__suffix" @click="search">
|
||||
<el-icon><Search /></el-icon>
|
||||
<!--<i class="el-icon-search"></i>-->
|
||||
</span>
|
||||
</div>
|
||||
<div v-show="metaList.length>0" class="search__suffix-close" @click="cleanMetaList">
|
||||
<i class="el-icon-error"></i>
|
||||
</div>
|
||||
<div class="search__suffix" :class="showList ? 'new-search__suffix' : 'entity-explorer-search'" @click="search">
|
||||
<i class="el-icon-search"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -176,28 +119,23 @@ import _ from 'lodash'
|
||||
import { handleErrorTip } from '@/components/advancedSearch/meta/error'
|
||||
import Parser, { stringInQuot } from '@/components/advancedSearch/meta/parser'
|
||||
import { overwriteUrl, urlParamsHandler } from '@/utils/tools'
|
||||
import { enumerateData } from '@/utils/static-data'
|
||||
export default {
|
||||
name: 'TagMode',
|
||||
props: {
|
||||
columnList: Array,
|
||||
connectionList: Array,
|
||||
convertMetaList: Array,
|
||||
showList: Boolean,
|
||||
unitTestStr: String
|
||||
showList: Boolean
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
condition,
|
||||
connection,
|
||||
metaList: [],
|
||||
columnType,
|
||||
myCheckboxList: [],
|
||||
operatorList: [] // 操作符列表，根据所选columnList的label来确定，一般为=,IN，tags操作符为has
|
||||
}
|
||||
},
|
||||
emits: ['changeMode', 'search'],
|
||||
inject: ['myHighLight'],
|
||||
methods: {
|
||||
// 新增条件
|
||||
addCondition (meta) {
|
||||
@@ -264,7 +202,6 @@ export default {
|
||||
if (this.isCustomized(value)) {
|
||||
meta.column.type = columnType.fullText
|
||||
meta.column.label = value
|
||||
meta.column.isFullText = true
|
||||
meta.resetOperator()
|
||||
meta.resetValue()
|
||||
} else {
|
||||
@@ -280,61 +217,19 @@ export default {
|
||||
if (!meta.operator.value) {
|
||||
meta.operator.isEditing = true
|
||||
meta.operator.show = true
|
||||
} else {
|
||||
// 切换column，清除上次column选择的value，包含枚举的则删除，in操作符的让类型回归array
|
||||
meta.value.value = ''
|
||||
meta.value.label = ''
|
||||
meta.value.isEditing = true
|
||||
meta.value.show = true
|
||||
const obj = enumerateData.find(d => d.name === meta.column.label)
|
||||
if (obj) {
|
||||
meta.doc = obj
|
||||
if (this.$refs.valuesSelect) {
|
||||
// 触发focus后，select弹窗并没有生效
|
||||
this.$refs.valuesSelect[0].focus(meta)
|
||||
}
|
||||
} else {
|
||||
delete meta.doc
|
||||
}
|
||||
if (meta.operator.value.toLowerCase() === 'in') {
|
||||
meta.column.type = columnType.array
|
||||
}
|
||||
}
|
||||
}, 200)
|
||||
}
|
||||
},
|
||||
selectValue (value, meta) {
|
||||
const isWrapped = this.isSingleQuoteWrapping(value)
|
||||
meta.value.value = isWrapped && meta.column.type === columnType.string ? value : `'${value}'`
|
||||
meta.value.label = isWrapped && meta.column.type === columnType.string ? value : `'${value}'`
|
||||
setTimeout(() => {
|
||||
meta.column.isEditing = false
|
||||
meta.value.isEditing = false
|
||||
}, 100)
|
||||
},
|
||||
selectVisibleValues (value, meta) {
|
||||
if (!value) {
|
||||
meta.value.isEditing = false
|
||||
this.myCheckboxList = []
|
||||
}
|
||||
},
|
||||
selectValues (value, meta) {
|
||||
if (value.length > 0) {
|
||||
let str = ''
|
||||
value.forEach(item => {
|
||||
str += `'${item}',`
|
||||
})
|
||||
str = str.substring(0, str.length - 1)
|
||||
str = `(${str})`
|
||||
meta.value.value = value
|
||||
meta.value.label = str
|
||||
} else {
|
||||
meta.value.value = ''
|
||||
}
|
||||
},
|
||||
selectConnection (value, meta) {
|
||||
meta.isEditing = false
|
||||
},
|
||||
columnClick (meta) {
|
||||
meta.column.isEditing = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.columnSelect[this.$refs.columnSelect.length - 1].focus()
|
||||
})
|
||||
},
|
||||
columnBlur (meta, index) {
|
||||
setTimeout(() => {
|
||||
const parser = new Parser(this.columnList)
|
||||
@@ -352,64 +247,26 @@ export default {
|
||||
this.operatorList = obj ? obj.doc.constraints.operator_functions.split(',') : ['=', 'IN']
|
||||
if (meta.column && meta.column.type === 'fullText') {
|
||||
meta.operator.value = '='
|
||||
meta.column.show = true
|
||||
meta.column.isFullText = true
|
||||
meta.operator.show = true
|
||||
meta.column.show = false
|
||||
meta.operator.show = false
|
||||
const label = JSON.parse(JSON.stringify(meta.column.label))
|
||||
meta.column.label = parser.getEntityTypeByValue(meta.column.label)
|
||||
meta.value.value = label
|
||||
meta.value.label = label
|
||||
|
||||
if (meta.column.label === 'domain') {
|
||||
meta.operator.value = 'like'
|
||||
meta.value.value = `%${this.delSingleQuote(label)}`
|
||||
meta.value.label = `%${this.delSingleQuote(label)}`
|
||||
} else if (meta.column.label === 'app') {
|
||||
meta.operator.value = 'like'
|
||||
meta.value.value = `%${this.delSingleQuote(label)}%`
|
||||
meta.value.label = `%${this.delSingleQuote(label)}%`
|
||||
}
|
||||
// if (meta.column.label === 'domain') {
|
||||
// meta.operator.value = 'like'
|
||||
// meta.value.value = `%${this.delSingleQuote(label)}`
|
||||
// meta.value.label = `${this.delSingleQuote(label)}`
|
||||
// } else if (meta.column.label === 'app') {
|
||||
// meta.operator.value = 'like'
|
||||
// meta.value.value = `%${this.delSingleQuote(label)}%`
|
||||
// meta.value.label = `${this.delSingleQuote(label)}`
|
||||
// }
|
||||
meta.column.type = 'string'
|
||||
}
|
||||
}, 200)
|
||||
},
|
||||
valueBlur1 (meta) {
|
||||
setTimeout(() => {
|
||||
meta.value.isEditing = false
|
||||
}, 200)
|
||||
},
|
||||
valuesBlur (meta) {
|
||||
this.$nextTick(() => {
|
||||
})
|
||||
},
|
||||
valuesFocus (meta) {
|
||||
this.$nextTick(() => {
|
||||
meta.value.isEditing = true
|
||||
setTimeout(() => {
|
||||
if (meta.value.value && this.myCheckboxList.length === 0) {
|
||||
let valueArr = []
|
||||
if (!_.isArray(meta.value.value)) {
|
||||
let value = meta.value.value
|
||||
if (value.indexOf('(') === 0 && value.indexOf(')') === value.length - 1) {
|
||||
value = value.substring(1, value.length)
|
||||
value = value.substring(0, value.length - 1)
|
||||
}
|
||||
valueArr = value.split(',')
|
||||
valueArr.forEach((item, index) => {
|
||||
if (item[0] === "'" && item[item.length - 1] === "'") {
|
||||
item = item.substring(1, item.length - 1)
|
||||
this.myCheckboxList.push(item)
|
||||
}
|
||||
})
|
||||
} else if (_.isArray(meta.value.value)) {
|
||||
meta.value.value.forEach(item => {
|
||||
this.myCheckboxList.push(item)
|
||||
})
|
||||
}
|
||||
}
|
||||
}, 100)
|
||||
})
|
||||
},
|
||||
connectionClick (meta) {
|
||||
meta.isEditing = true
|
||||
},
|
||||
@@ -420,13 +277,10 @@ export default {
|
||||
// 处理搜索值
|
||||
meta.value.isEditing = true
|
||||
meta.value.show = true
|
||||
const obj = enumerateData.find(d => d.name === meta.column.label)
|
||||
if (obj) {
|
||||
meta.doc = obj
|
||||
}
|
||||
// 若是in或not in，column的type要改成array，否则是string
|
||||
if (operator.toLowerCase().indexOf('in') > -1) {
|
||||
meta.column.type = columnType.array
|
||||
meta.value.value = []
|
||||
} else if (['>', '<', '>=', '<='].indexOf(operator) > -1) {
|
||||
meta.column.type = columnType.number
|
||||
} else {
|
||||
@@ -436,16 +290,9 @@ export default {
|
||||
}
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
if (meta.doc) {
|
||||
const selectList = this.$refs.columnValue
|
||||
if (selectList && selectList.length > 0) {
|
||||
this.$refs.columnValue[selectList.length - 1].focus() // 在for循环里生成的dom，所以是数组
|
||||
}
|
||||
} else {
|
||||
const selectList = this.$refs.valueInput
|
||||
if (selectList && selectList.length > 0) {
|
||||
this.$refs.valueInput[selectList.length - 1].focus() // 在for循环里生成的dom，所以是数组
|
||||
}
|
||||
const selectList = this.$refs.valueInput
|
||||
if (selectList && selectList.length > 0) {
|
||||
this.$refs.valueInput[selectList.length - 1].focus() // 在for循环里生成的dom，所以是数组
|
||||
}
|
||||
})
|
||||
},
|
||||
@@ -592,26 +439,10 @@ export default {
|
||||
}
|
||||
meta.value.isEditing = !meta.isCompleteCondition()
|
||||
},
|
||||
columnClick (meta) {
|
||||
meta.column.isEditing = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.columnSelect[this.$refs.columnSelect.length - 1].focus()
|
||||
})
|
||||
},
|
||||
valueClick (meta) {
|
||||
meta.value.isEditing = true
|
||||
const obj = enumerateData.find(d => d.name === meta.column.label)
|
||||
if (obj) {
|
||||
meta.doc = obj
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
if (this.$refs.valueInput) {
|
||||
this.$refs.valueInput[0].focus()
|
||||
}
|
||||
if (this.$refs.valuesSelect.length > 0) {
|
||||
// 触发focus后，select弹窗并没有生效
|
||||
this.$refs.valuesSelect[0].focus(meta)
|
||||
}
|
||||
this.$refs.valueInput[0].focus()
|
||||
})
|
||||
},
|
||||
// 判断是否是用户自己添加的内容，用于判断是否是全局搜索
|
||||
@@ -629,20 +460,14 @@ export default {
|
||||
search () {
|
||||
if (this.metaList.length > 0) {
|
||||
const parser = new Parser(this.columnList)
|
||||
let errorList = parser.validateMeta(this.metaList)
|
||||
// 测试的metaList并不是由new Meta()生成，所以instanceof时，meta并不在Meta原型链上导致报错，故直接略过
|
||||
if (this.isUnitTesting) {
|
||||
errorList = []
|
||||
}
|
||||
const keywordList = this.myHighLight ? parser.getKeywordList(this.metaList) : [] // 搜索高亮的关键字
|
||||
const errorList = parser.validateMeta(this.metaList)
|
||||
if (_.isEmpty(errorList)) {
|
||||
const strObj = parser.handleMetaListToStr(this.metaList)
|
||||
const str = strObj.str ? strObj.str : strObj
|
||||
const str2 = strObj.str2 ? strObj.str2 : strObj
|
||||
// str为将metaList转成字符串的值，str2为地址栏展示的值
|
||||
let key = parser.handleEntityTypeByStr(str)
|
||||
key = parser.conversionEnum(key)
|
||||
this.$emit('search', { ...parser.parseStr(key), str: str2, keywordList: keywordList })
|
||||
const key = parser.handleEntityTypeByStr(str)
|
||||
this.$emit('search', { ...parser.parseStr(key), str: str2 })
|
||||
} else {
|
||||
this.$message.error(handleErrorTip(errorList[0]))
|
||||
}
|
||||
@@ -730,17 +555,14 @@ export default {
|
||||
const column = this.columnList.find(c => {
|
||||
return c.label === param.column
|
||||
})
|
||||
const obj = this.metaList.find(d => d.column && d.column.label === param.column && d.value && (d.value.value === `'${param.value[0]}'` || d.value.value === param.value[0]))
|
||||
if (obj) {
|
||||
const metaIndex = this.metaList.findIndex(m => m.column && m.column.label === param.column && m.operator.value === param.operator && m.value.value === this.handleValue(param.value, column, param.operator))
|
||||
// 不是在首位，则删除时顺带删除前一个index（and或or），否则顺带删除后一个index
|
||||
if (metaIndex > 0) {
|
||||
this.metaList.splice(metaIndex - 1, 2)
|
||||
} else if (this.metaList.length === 1) {
|
||||
this.metaList.splice(metaIndex, 1)
|
||||
} else {
|
||||
this.metaList.splice(metaIndex, 2)
|
||||
}
|
||||
const metaIndex = this.metaList.findIndex(m => m.column && m.column.label === param.column && m.operator.value === param.operator && m.value.value === this.handleValue(param.value, column, param.operator))
|
||||
// 不是在首位，则删除时顺带删除前一个index（and或or），否则顺带删除后一个index
|
||||
if (metaIndex > 0) {
|
||||
this.metaList.splice(metaIndex - 1, 2)
|
||||
} else if (this.metaList.length === 1) {
|
||||
this.metaList.splice(metaIndex, 1)
|
||||
} else {
|
||||
this.metaList.splice(metaIndex, 2)
|
||||
}
|
||||
})
|
||||
},
|
||||
@@ -800,25 +622,20 @@ export default {
|
||||
let { q } = this.$route.query
|
||||
if (q && !this.convertMetaList) {
|
||||
const parser = new Parser(this.columnList)
|
||||
if (q.indexOf('+') > -1) {
|
||||
q = q.replace('+', '')
|
||||
}
|
||||
if (q.indexOf('%') === 0 || q.indexOf('%20') > -1 || q.indexOf('%25') > -1) {
|
||||
q = decodeURI(q)
|
||||
} else {
|
||||
const str1 = q.substring(q.indexOf('%'), q.indexOf('%') + 3)
|
||||
if (q.indexOf('%') > 0 && (str1 === '%20' || str1 === '%25')) {
|
||||
if (q.indexOf('%') > 0 && (str1 !== '%20' || str1 === '%25')) {
|
||||
q = decodeURI(q)
|
||||
}
|
||||
}
|
||||
this.metaList = parser.parseStr(q).metaList
|
||||
}
|
||||
|
||||
if (!this.isUnitTesting) {
|
||||
this.emitter.on('advanced-search', function () {
|
||||
vm.search()
|
||||
})
|
||||
}
|
||||
this.emitter.on('advanced-search', function () {
|
||||
vm.search()
|
||||
})
|
||||
},
|
||||
watch: {
|
||||
convertMetaList: {
|
||||
@@ -833,7 +650,6 @@ export default {
|
||||
if (item.column && item.column.type === 'fullText') {
|
||||
item.operator.value = '='
|
||||
item.column.show = false
|
||||
item.column.isFullText = true
|
||||
item.operator.show = false
|
||||
const label = JSON.parse(JSON.stringify(item.column.label))
|
||||
item.column.label = parser.getEntityTypeByValue(item.column.label)
|
||||
|
||||
@@ -1,58 +1,35 @@
|
||||
<template>
|
||||
<div @click="handleClick" v-ele-click-outside="handleBlur">
|
||||
<textarea
|
||||
style="text-indent: 65px;"
|
||||
cols="40"
|
||||
ref="textSearch"
|
||||
></textarea>
|
||||
<div class="search__suffixes search__suffixes--text-mode" :class="showList ? '' : 'entity-explorer-home'" style="padding-left: 1px;background: #fff;">
|
||||
<!--切换text、tag模式图标-->
|
||||
<span class="search__suffix">
|
||||
<el-popover
|
||||
popper-class="my-popper-class"
|
||||
placement="top"
|
||||
trigger="click"
|
||||
:content="$t('overall.switchToTag')"
|
||||
>
|
||||
<template #reference>
|
||||
<i test-id="text-change-mode" class="cn-icon cn-icon-filter" @click="changeMode"></i>
|
||||
</template>
|
||||
</el-popover>
|
||||
</span>
|
||||
<!--删除图标-->
|
||||
<span v-show="isCloseIcon" class="search__suffix search__suffix-close" @click="cleanParams">
|
||||
<el-icon><CircleCloseFilled /></el-icon>
|
||||
<!--<i class="el-icon-error"></i>-->
|
||||
</span>
|
||||
<!--搜索图标-->
|
||||
<span class="search__suffix" test-id="text-search" @click.stop="search">
|
||||
<el-icon><Search /></el-icon>
|
||||
<!--<i class="el-icon-search"></i>-->
|
||||
</span>
|
||||
<textarea
|
||||
ref="textSearch"
|
||||
></textarea>
|
||||
<div class="search__suffixes search__suffixes--text-mode">
|
||||
<div class="search__suffix">
|
||||
<el-popover
|
||||
popper-class="my-popper-class"
|
||||
placement="top"
|
||||
trigger="hover"
|
||||
:content="$t('entity.switchToAdvancedSearch')"
|
||||
>
|
||||
<template #reference>
|
||||
<i class="cn-icon cn-icon-filter margin-r-12" @click="changeMode"></i>
|
||||
</template>
|
||||
</el-popover>
|
||||
</div>
|
||||
<div v-show="isCloseIcon" class="search__suffix-close" @click="cleanParams">
|
||||
<i class="el-icon-error"></i>
|
||||
</div>
|
||||
<div class="search__suffix" :class="showList ? 'new-search__suffix' : 'entity-explorer-search'" @click="search">
|
||||
<i class="el-icon-search"></i>
|
||||
</div>
|
||||
|
||||
<!--showHint弹窗部分-->
|
||||
<el-popover
|
||||
placement="bottom"
|
||||
width="100%"
|
||||
ref="popoverRef"
|
||||
:visible="hintVisible"
|
||||
popper-class="search-show-hint-popover"
|
||||
trigger="click">
|
||||
<template #reference>
|
||||
<div>
|
||||
<hint v-if="hintVisible" :hintList="hintList"
|
||||
@load="handleHintLoad"
|
||||
@select="handleSelect"
|
||||
:hintParams="hintParams"
|
||||
:hintSearch="searchStr"></hint>
|
||||
</div>
|
||||
</template>
|
||||
</el-popover>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import 'codemirror/theme/ambiance.css'
|
||||
import 'codemirror/addon/hint/show-hint'
|
||||
import 'codemirror/addon/hint/show-hint.css'
|
||||
import 'codemirror/addon/display/placeholder'
|
||||
import 'codemirror/mode/sql/sql'
|
||||
import Parser, { stringInQuot, handleOperatorSpace } from '@/components/advancedSearch/meta/parser'
|
||||
import CodeMirror from 'codemirror'
|
||||
import { toRaw } from 'vue'
|
||||
@@ -60,65 +37,23 @@ import _ from 'lodash'
|
||||
import { columnType } from '@/components/advancedSearch/meta/meta'
|
||||
import { handleErrorTip } from '@/components/advancedSearch/meta/error'
|
||||
import { overwriteUrl, urlParamsHandler } from '@/utils/tools'
|
||||
import Hint from '@/components/advancedSearch/showhint/Hint/Hint'
|
||||
import { getDataset } from '@/components/advancedSearch/showhint/packages/getDataset'
|
||||
import codeMirrorMixins from '@/components/advancedSearch/showhint/myCodeMirror.js'
|
||||
|
||||
export default {
|
||||
name: 'TextMode',
|
||||
mixins: [codeMirrorMixins],
|
||||
props: {
|
||||
columnList: Array,
|
||||
str: String,
|
||||
showList: Boolean,
|
||||
showCloseIcon: Boolean,
|
||||
isShowHint: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
unitTestStr: String
|
||||
showCloseIcon: Boolean
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
codeMirror: null,
|
||||
isCloseIcon: this.showCloseIcon,
|
||||
isEdit: false,
|
||||
hintVisible: false,
|
||||
dataset: null,
|
||||
CodeMirror,
|
||||
myUnitTestStr: this.unitTestStr
|
||||
isEdit: false
|
||||
}
|
||||
},
|
||||
emits: ['changeMode', 'search'],
|
||||
inject: ['myHighLight'],
|
||||
created () {
|
||||
if (this.isShowHint && !this.isUnitTesting) {
|
||||
this._initComponent()
|
||||
}
|
||||
},
|
||||
provide () {
|
||||
return {
|
||||
getDataset: () => {
|
||||
// provide() 写成方法之后,保证this的指向
|
||||
return this.dataset || null
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
Hint
|
||||
},
|
||||
computed: {
|
||||
searchStr () {
|
||||
const { wholeTokenStr } = this.getWholeToken() || ''
|
||||
if (['not in', 'not like', 'order by', 'group by'].includes(wholeTokenStr?.toLowerCase())) {
|
||||
return wholeTokenStr
|
||||
}
|
||||
if (['operator', 'keyword', 'builtin'].includes(this.hintParams?.token?.type)) {
|
||||
return this.hintParams?.token?.string
|
||||
}
|
||||
return this.hintParams.leftpart || this.hintSearch || ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
cleanParams () {
|
||||
toRaw(this.codeMirror).setValue('')
|
||||
@@ -129,74 +64,43 @@ export default {
|
||||
this.reloadUrl(routeQuery, 'cleanOldParams')
|
||||
},
|
||||
initCodeMirror () {
|
||||
let option = {
|
||||
mode: 'sql',
|
||||
placeholder: '',
|
||||
this.codeMirror = CodeMirror.fromTextArea(this.$refs.textSearch, {
|
||||
mode: {
|
||||
name: 'sql'
|
||||
},
|
||||
placeholder: 'Enter...',
|
||||
lineNumbers: false
|
||||
}
|
||||
if (this.isShowHint) {
|
||||
option = {
|
||||
keyMap: 'sublime',
|
||||
tabSize: 2, // 缩进格式
|
||||
// theme: 'eclipse', // 主题，对应主题库 JS 需要提前引入
|
||||
line: true,
|
||||
lineNumbers: false, // 显示行数
|
||||
indentUnit: 4, // 缩进单位为4
|
||||
styleActiveLine: true, // 当前行背景高亮
|
||||
// mode: 'text/x-filter', // HMTL混合模式
|
||||
mode: 'sql', // HMTL混合模式
|
||||
foldGutter: true,
|
||||
lint: true,
|
||||
auto: 'auto', // 自动换行
|
||||
autoCloseBrackets: true, // 自动闭合符号
|
||||
matchBrackets: true, // 是否添加匹配括号高亮
|
||||
spellcheck: true, // 启用拼写检查
|
||||
autocorrect: true, // 启用自动更正
|
||||
lineWrapping: true, // 滚动或换行以显示长行
|
||||
// 提示配置
|
||||
hintOptions: {
|
||||
completeSingle: false, // 自动匹配唯一值
|
||||
// 匹配 t_test_login.col_a 用. 来连接的
|
||||
tables: {
|
||||
filter_table: ['recv_time']
|
||||
},
|
||||
alignWithWord: false
|
||||
}
|
||||
})
|
||||
this.codeMirror.setOption('extraKeys', {
|
||||
Enter: (cm) => {}
|
||||
})
|
||||
this.codeMirror.on('focus', () => {
|
||||
if (this.codeMirror.getValue().trim() !== '') {
|
||||
this.isEdit = true
|
||||
this.isCloseIcon = true
|
||||
}
|
||||
}
|
||||
this.codeMirror = CodeMirror.fromTextArea(this.$refs.textSearch, option)
|
||||
if (this.codeMirror) {
|
||||
this.codeMirror.setOption('extraKeys', {
|
||||
Enter: (cm) => {}
|
||||
})
|
||||
this.setCodemirrorValue()
|
||||
this.initEvent()
|
||||
this.initHint()
|
||||
}
|
||||
})
|
||||
this.codeMirror.on('blur', () => {
|
||||
const timer = setTimeout(() => {
|
||||
this.isEdit = false
|
||||
this.isCloseIcon = false
|
||||
clearTimeout(timer)
|
||||
}, 200)
|
||||
})
|
||||
this.codeMirror.on('update', () => {
|
||||
this.isEdit = true
|
||||
this.isCloseIcon = true
|
||||
})
|
||||
},
|
||||
search () {
|
||||
this.handleBlur()
|
||||
let str
|
||||
if (!this.isUnitTesting) {
|
||||
str = this.codeMirror.getValue().trim()
|
||||
} else {
|
||||
str = this.myUnitTestStr
|
||||
}
|
||||
const str = this.codeMirror.getValue().trim()
|
||||
if (str) {
|
||||
const parser = new Parser(this.columnList)
|
||||
const keyInfo = parser.comparedEntityKey(parser.handleEntityTypeByStr(str)) // 校验输入str字段是schema内的字段，并将语句进行规范
|
||||
const metaList = parser.parseStr(_.cloneDeep(str)).metaList
|
||||
const keywordList = this.myHighLight ? parser.getKeywordList(metaList) : [] // 搜索高亮所需的关键字
|
||||
const keyInfo = parser.comparedEntityKey(parser.handleEntityTypeByStr(str))
|
||||
if (keyInfo.isKey) {
|
||||
const enumKey = parser.conversionEnum(keyInfo.key) // 检查是否包含枚举字段，包含的话进行替换
|
||||
const errorList = parser.validateStr(enumKey) // 检查语句是否有错误
|
||||
const errorList = parser.validateStr(keyInfo.key)
|
||||
if (_.isEmpty(errorList)) {
|
||||
// 补全模糊搜索
|
||||
if (!this.isUnitTesting) {
|
||||
toRaw(this.codeMirror).setValue(parser.handleEntityTypeByStr(str))
|
||||
}
|
||||
// 注：参数str，1.是用户搜索框的内容在补全模糊搜索后的内容；2.部分参数是用户主观可见，但格式不符合接口原则的，如status='Active'，接口需要status=0
|
||||
this.$emit('search', { ...parser.parseStr(enumKey), str: parser.handleEntityTypeByStr(str), keywordList: keywordList })
|
||||
this.$emit('search', { ...parser.parseStr(keyInfo.key), str: str })
|
||||
} else {
|
||||
this.$message.error(handleErrorTip(errorList[0]))
|
||||
}
|
||||
@@ -207,9 +111,8 @@ export default {
|
||||
this.$emit('search', { q: '', str: '', metaList: [] })
|
||||
}
|
||||
},
|
||||
focus (e) {
|
||||
toRaw(this.codeMirror).setValue(e.str)
|
||||
// this.codeMirror.focus()
|
||||
focus () {
|
||||
this.codeMirror.focus()
|
||||
},
|
||||
changeMode () {
|
||||
const str = this.codeMirror.getValue().trim()
|
||||
@@ -244,12 +147,7 @@ export default {
|
||||
}
|
||||
},
|
||||
addParams (params) {
|
||||
let current = ''
|
||||
if (!this.isUnitTesting) {
|
||||
current = this.codeMirror.getValue()
|
||||
} else {
|
||||
current = this.myUnitTestStr
|
||||
}
|
||||
let current = this.codeMirror.getValue()
|
||||
params.forEach(param => {
|
||||
const column = this.columnList.find(c => c.label === param.column)
|
||||
if (param.operator === 'has') {
|
||||
@@ -258,11 +156,7 @@ export default {
|
||||
current = `${current ? current + ' AND ' : ''}${param.column}${handleOperatorSpace(param.operator)}${this.handleValue(param.value, column, param.operator)}`
|
||||
}
|
||||
})
|
||||
if (!this.isUnitTesting) {
|
||||
toRaw(this.codeMirror).setValue(current.trim())
|
||||
} else {
|
||||
this.myUnitTestStr = current
|
||||
}
|
||||
toRaw(this.codeMirror).setValue(current.trim())
|
||||
},
|
||||
removeParams (params) {
|
||||
let current = this.codeMirror.getValue()
|
||||
@@ -299,174 +193,6 @@ export default {
|
||||
newUrl = urlParamsHandler(window.location.href, query, newParam, clean)
|
||||
}
|
||||
overwriteUrl(newUrl)
|
||||
},
|
||||
initEvent () {
|
||||
this.codeMirror.on('focus', (coder) => {
|
||||
if (this.codeMirror.getValue().trim() !== '') {
|
||||
this.isEdit = true
|
||||
this.isCloseIcon = true
|
||||
}
|
||||
if (this.isShowHint && this.$emit) {
|
||||
this.$emit('focus', coder.getValue())
|
||||
}
|
||||
})
|
||||
this.codeMirror.on('blur', (coder) => {
|
||||
const timer = setTimeout(() => {
|
||||
this.isEdit = false
|
||||
this.isCloseIcon = false
|
||||
if (this.isShowHint && this.$emit) {
|
||||
this.$emit('blur', coder.getValue())
|
||||
}
|
||||
clearTimeout(timer)
|
||||
}, 200)
|
||||
})
|
||||
this.codeMirror.on('update', () => {
|
||||
this.isEdit = true
|
||||
this.isCloseIcon = true
|
||||
})
|
||||
|
||||
if (this.isShowHint) {
|
||||
// 支持双向绑定
|
||||
this.codeMirror.on('change', (coder) => {
|
||||
if (this.$emit) {
|
||||
this.$emit('input', coder.getValue())
|
||||
}
|
||||
})
|
||||
|
||||
this.codeMirror.on('startCompletion', () => {
|
||||
// 展开自动提示的 事件回调
|
||||
this.hintVisible = true
|
||||
this.hintVm?.hintDeactive()
|
||||
})
|
||||
this.codeMirror.on('endCompletion', () => {
|
||||
// 自动提示关闭
|
||||
this.hintVisible = false
|
||||
this.hintParams = {}
|
||||
this.hintList = []
|
||||
})
|
||||
this.$emit('load', this.codeMirror)
|
||||
}
|
||||
},
|
||||
_initComponent () {
|
||||
getDataset(this, this.queryParams || {}, this.columnList).then((dataset, dataDisposeFun) => {
|
||||
this.dataset = Object.freeze(dataset)
|
||||
}).catch(err => {
|
||||
console.error(err)
|
||||
})
|
||||
},
|
||||
initHint () {
|
||||
this.codeMirror.on('inputRead', () => {
|
||||
setTimeout(() => {
|
||||
this.codeMirror.showHint()
|
||||
})
|
||||
})
|
||||
},
|
||||
handleBlur () {
|
||||
if (this.isShowHint) {
|
||||
this.hintVisible = false
|
||||
this.hintParams = {}
|
||||
this.hintList = []
|
||||
}
|
||||
},
|
||||
handleClick () {
|
||||
if (this.isShowHint) {
|
||||
this.hintVisible = true
|
||||
this.codeMirror.showHint()
|
||||
}
|
||||
},
|
||||
getWholeToken () {
|
||||
// 获取 前一个token
|
||||
const editor = this.hintParams.editor
|
||||
const Pos = this.CodeMirror.Pos
|
||||
const cur = this.hintParams.cur
|
||||
const token = this.hintParams.token
|
||||
if (!editor) {
|
||||
return
|
||||
}
|
||||
const spaceToken = editor.getTokenAt(Pos(cur.line, token.start))
|
||||
let preToken = ''
|
||||
if (spaceToken && spaceToken?.string === ' ') {
|
||||
preToken = editor.getTokenAt(Pos(cur.line, spaceToken.start))
|
||||
}
|
||||
const searchKey = `${preToken?.string} ${token?.string}`
|
||||
|
||||
return {
|
||||
wholeTokenStr: searchKey,
|
||||
spaceToken,
|
||||
preToken,
|
||||
token
|
||||
}
|
||||
},
|
||||
handleHintLoad ({ vm }) {
|
||||
this.hintVm = vm
|
||||
},
|
||||
handleSelect (item, index, hintList) {
|
||||
if (index === 0) {
|
||||
// 不可能选中0 第0项是标题, 选中0 说明没选中
|
||||
this.hintParams?.editor?.closeHint()
|
||||
this.$emit('query', CodeMirror)
|
||||
return
|
||||
}
|
||||
|
||||
const data = {
|
||||
from: this.hintParams.from,
|
||||
to: this.hintParams.to,
|
||||
list: hintList
|
||||
}
|
||||
|
||||
const { wholeTokenStr, preToken, token } = this.getWholeToken() || ''
|
||||
let cur = null
|
||||
cur = this.hintParams?.cur
|
||||
|
||||
// 上一个字段 是存在空格的关键字,整体删除上一个关键字
|
||||
if (['not in', 'not like', 'order by', 'group by'].includes(wholeTokenStr?.toLowerCase())) {
|
||||
this.hintParams?.editor?.replaceRange('', { line: cur.line, ch: preToken.start }, {
|
||||
line: cur.line,
|
||||
ch: token.end
|
||||
})
|
||||
}
|
||||
|
||||
this.completion && this.completion.pick(data, index)
|
||||
},
|
||||
setCodemirrorValue () {
|
||||
// 如果地址栏包含参数q，则将参数q回显到搜索栏内
|
||||
let { q } = this.$route.query
|
||||
|
||||
if (this.str) {
|
||||
toRaw(this.codeMirror).setValue(this.str)
|
||||
}
|
||||
if (q) {
|
||||
if (q.indexOf('+') > -1) {
|
||||
q = q.replace('+', ' ')
|
||||
}
|
||||
if (q.indexOf('%') === 0 || q.indexOf('%20') > -1 || q.indexOf('%25') > -1) {
|
||||
q = decodeURI(q)
|
||||
} else {
|
||||
const str1 = q.substring(q.indexOf('%'), q.indexOf('%') + 3)
|
||||
if (q.indexOf('%') > 0 && (str1 === '%20' || str1 === '%25')) {
|
||||
q = decodeURI(q)
|
||||
}
|
||||
}
|
||||
// 为避免地址栏任意输入导致全查询的q带QUERY，解析时不识别导致的语法错误
|
||||
// 如地址栏输入116.178.222.171，此时的q很长，刷新界面时需要把q里的116.178.222.171拿出来进行搜索
|
||||
if (q.indexOf('QUERY') > -1) {
|
||||
const strList = q.split(' ')
|
||||
if (strList.length > 0) {
|
||||
// 此时strList[1]为ip_addr:116.178.222.171，获取116.178.222.171
|
||||
q = strList[1].slice(8)
|
||||
}
|
||||
}
|
||||
if (this.codeMirror) {
|
||||
toRaw(this.codeMirror).setValue(q)
|
||||
}
|
||||
} else {
|
||||
this.isCloseIcon = false
|
||||
}
|
||||
|
||||
const vm = this
|
||||
this.emitter.on('advanced-search', function () {
|
||||
vm.search()
|
||||
})
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
@@ -490,23 +216,39 @@ export default {
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
if (this.isShowHint) {
|
||||
this.$nextTick(() => {
|
||||
// dataset是避免数据未初始化完成注册失败，ref是因为组件加载2次，避免第二次时dom丢失导致数据挂载失败
|
||||
if (this.dataset && this.$refs.textSearch) {
|
||||
this.initShowHint()
|
||||
this.initCodeMirror()
|
||||
}
|
||||
})
|
||||
} else if (this.$refs.textSearch) {
|
||||
this.initCodeMirror()
|
||||
// 如果地址栏包含参数q，则将参数q回显到搜索栏内
|
||||
let { q } = this.$route.query
|
||||
this.initCodeMirror()
|
||||
if (this.str) {
|
||||
toRaw(this.codeMirror).setValue(this.str)
|
||||
}
|
||||
if (q) {
|
||||
if (q.indexOf('%') === 0 || q.indexOf('%20') > -1 || q.indexOf('%25') > -1) {
|
||||
q = decodeURI(q)
|
||||
} else {
|
||||
const str1 = q.substring(q.indexOf('%'), q.indexOf('%') + 3)
|
||||
if (q.indexOf('%') > 0 && (str1 !== '%20' || str1 === '%25')) {
|
||||
q = decodeURI(q)
|
||||
}
|
||||
}
|
||||
// 为避免地址栏任意输入导致全查询的q带QUERY，解析时不识别导致的语法错误
|
||||
// 如地址栏输入116.178.222.171，此时的q很长，刷新界面时需要把q里的116.178.222.171拿出来进行搜索
|
||||
if (q.indexOf('QUERY') > -1) {
|
||||
const strList = q.split(' ')
|
||||
if (strList.length > 0) {
|
||||
// 此时strList[1]为ip_addr:116.178.222.171，获取116.178.222.171
|
||||
q = strList[1].slice(8)
|
||||
}
|
||||
}
|
||||
toRaw(this.codeMirror).setValue(q)
|
||||
} else {
|
||||
this.isCloseIcon = false
|
||||
}
|
||||
|
||||
const vm = this
|
||||
this.emitter.on('advanced-search', function () {
|
||||
vm.search()
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-popper.search-show-hint-popover {
|
||||
visibility: hidden !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -4,7 +4,6 @@ import ParserError, { errorDesc, errorTypes } from '@/components/advancedSearch/
|
||||
import _ from 'lodash'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import i18n from '@/i18n'
|
||||
import store from '@/store'
|
||||
|
||||
const strReg = {
|
||||
// 需要不限制语言，正则过滤中英日俄语出错实现语言都通过。留个记录观察，后续校验
|
||||
@@ -13,14 +12,6 @@ const strReg = {
|
||||
value: /^[\da-zA-Z\u4E00-\u9FA5\u3040-\u309F\u0800-\u4e00\u0400-\u04FF\u2000-\u206F\s.'-_%]$/
|
||||
}
|
||||
const operatorList = ['=', ' in ', ' IN ', ' like ', ' LIKE ', 'HAS(', 'has(']
|
||||
const enumList = ['status', 'eventType', 'severity']
|
||||
|
||||
// ipv4校验
|
||||
const regexIPv4 = /^((25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/
|
||||
// ipv6校验
|
||||
const regexIPv6 = /^(?:(?:[0-9A-Fa-f]{1,4}:){7}[0-9A-Fa-f]{1,4}|(?:[0-9A-Fa-f]{1,4}:){1,7}:|(?:[0-9A-Fa-f]{1,4}:){1,6}:[0-9A-Fa-f]{1,4}|(?:[0-9A-Fa-f]{1,4}:){1,5}(?::[0-9A-Fa-f]{1,4}){1,2}|(?:[0-9A-Fa-f]{1,4}:){1,4}(?::[0-9A-Fa-f]{1,4}){1,3}|(?:[0-9A-Fa-f]{1,4}:){1,3}(?::[0-9A-Fa-f]{1,4}){1,4}|(?:[0-9A-Fa-f]{1,4}:){1,2}(?::[0-9A-Fa-f]{1,4}){1,5}|[0-9A-Fa-f]{1,4}:(?:(?::[0-9A-Fa-f]{1,4}){1,6})|:(?:(?::[0-9A-Fa-f]{1,4}){1,7}|:)|fe80:(?::[0-9A-Fa-f]{0,4}){0,4}%\w+|::(?:ffff(?::0{1,4}){0,1}:){0,1}(?:(?:2[0-4]|1\d|[1-9])?\d|25[0-5])\.(?:(?:2[0-4]|1\d|[1-9])?\d|25[0-5])\.(?:(?:2[0-4]|1\d|[1-9])?\d|25[0-5])\.(?:(?:2[0-4]|1\d|[1-9])?\d|25[0-5])|(?:[0-9A-Fa-f]{1,4}:){1,4}:192\.88\.99\.(\d{1,3})|(?:[0-9A-Fa-f]{1,4}:){1,4}:192\.0\.2\.(\d{1,3})|(?:[0-9A-Fa-f]{1,4}:){1,4}:(?:[0-9A-Fa-f]{1,4}:){0,1}192\.0\.0\.(\d{1,3})|ff00:(?::[0-9A-Fa-f]{0,4}){0,4}|(?:[0-9A-Fa-f]{1,4}:){1,4}:255\.255\.255\.255)$/
|
||||
// domain校验
|
||||
const regexDomain = /^(?=^.{3,255}$)(http(s)?:\/\/)?(www\.)?[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+(:\d+)*(\/\w+\.\w+)*$/
|
||||
|
||||
export default class Parser {
|
||||
constructor (columnList) {
|
||||
@@ -869,7 +860,7 @@ export default class Parser {
|
||||
item.value.label = isWrapped ? `'${this.delSingleQuote(label)}'` : `${this.delSingleQuote(label)}`
|
||||
item.value.label1 = isWrapped ? `'%${this.delSingleQuote(label)}%'` : `%${this.delSingleQuote(label)}%`
|
||||
}
|
||||
item.column.type = columnType.string
|
||||
item.column.type = 'string'
|
||||
}
|
||||
})
|
||||
// 长度为1时，即模糊搜索，例如搜索框值为1.1.1.1，则直接返回1.1.1.1
|
||||
@@ -1120,7 +1111,7 @@ export default class Parser {
|
||||
if (key === 'has') {
|
||||
returnObj.key += 'has(' + obj.label + item.substring(item.indexOf(','), item.length) + ' AND '
|
||||
} else {
|
||||
returnObj.key += obj.label + ' ' + item.substring(obj.label.length, item.length) + ' AND '
|
||||
returnObj.key += obj.label + ' ' + item.substring(item.toLowerCase().indexOf(key.toLowerCase()), item.length) + ' AND '
|
||||
}
|
||||
} else if (returnObj.isKey) {
|
||||
returnObj.key = '[' + key + ']'
|
||||
@@ -1182,9 +1173,7 @@ export default class Parser {
|
||||
const arr = []
|
||||
// 如果出现this.columnList中的字段，如IP\Domain\App\Country等，则不进行模糊搜索，将str返回出去
|
||||
this.columnList.forEach(item => {
|
||||
// todo 取消了大小写校验，后续观察是否出现问题
|
||||
// arr.push(item.label.toLowerCase())
|
||||
arr.push(item.label)
|
||||
arr.push(item.label.toLowerCase())
|
||||
})
|
||||
|
||||
// 因为手动输入时可能会输入and，所以将操作符的AND转换为and，统一处理
|
||||
@@ -1194,9 +1183,7 @@ export default class Parser {
|
||||
newStr = newStr.replace(new RegExp(arr[i], 'g'), arr[i])
|
||||
}
|
||||
// 检查str字段在arr中是否出现,true为出现过
|
||||
// todo 取消了大小写校验，后续观察是否出现问题
|
||||
// const result = arr.some(item => newStr.toLowerCase().includes(item))
|
||||
const result = arr.some(item => newStr.includes(item))
|
||||
const result = arr.some(item => newStr.toLowerCase().includes(item))
|
||||
if (newStr.indexOf(' and ') > -1) {
|
||||
// 将单引号包裹的and拿出来放到数组tempList里，原来的单引号包裹内容用temp即'it is test keyword{键值}'代替
|
||||
// 再将字符串用and转换为数组，遍历数组，发现值为temp的，获取键值，根据键值获取tempList的值组合起来，
|
||||
@@ -1207,7 +1194,7 @@ export default class Parser {
|
||||
|
||||
// 将单引号包裹的and内容集合起来
|
||||
while ((match = regex.exec(newStr)) !== null) {
|
||||
if (match[1].includes(' and ')) {
|
||||
if (match[1].includes('and')) {
|
||||
tempList.push(match[1])
|
||||
}
|
||||
}
|
||||
@@ -1225,9 +1212,8 @@ export default class Parser {
|
||||
if (item.indexOf('it is test keyword') > -1) {
|
||||
const regex = /\d+/g
|
||||
const result1 = item.match(regex)
|
||||
result1.forEach((r, i) => {
|
||||
noAndList[index] = noAndList[index].replace('it is test keyword' + r, tempList[result1[i]])
|
||||
})
|
||||
noAndList[index] = noAndList[index].replace(result1[0], '')
|
||||
noAndList[index] = noAndList[index].replace('it is test keyword', tempList[result1[0]])
|
||||
}
|
||||
})
|
||||
|
||||
@@ -1248,8 +1234,7 @@ export default class Parser {
|
||||
// 不区分大小写，用this.columnList里的label
|
||||
arr.forEach(item => {
|
||||
if (str.toLowerCase().indexOf(item.toLowerCase()) > -1) {
|
||||
// todo 记录一下此处取消了转小写转换，后续搜索验证
|
||||
// str = str.replace(new RegExp(item, 'gi'), item)
|
||||
str = str.replace(new RegExp(item, 'gi'), item)
|
||||
if (!operatorList.some(ite => str.includes(ite)) && str.toLowerCase() !== item.toLowerCase()) {
|
||||
str = this.checkFormatByStr(str)
|
||||
}
|
||||
@@ -1283,6 +1268,12 @@ export default class Parser {
|
||||
if (str[0] === '%' && str[str.length - 1] !== '%') {
|
||||
str = str.substring(1, str.length)
|
||||
}
|
||||
// ipv4校验
|
||||
const regexIPv4 = /^((25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/
|
||||
// ipv6校验
|
||||
const regexIPv6 = /^(?:(?:[0-9A-Fa-f]{1,4}:){7}[0-9A-Fa-f]{1,4}|(?:[0-9A-Fa-f]{1,4}:){1,7}:|(?:[0-9A-Fa-f]{1,4}:){1,6}:[0-9A-Fa-f]{1,4}|(?:[0-9A-Fa-f]{1,4}:){1,5}(?::[0-9A-Fa-f]{1,4}){1,2}|(?:[0-9A-Fa-f]{1,4}:){1,4}(?::[0-9A-Fa-f]{1,4}){1,3}|(?:[0-9A-Fa-f]{1,4}:){1,3}(?::[0-9A-Fa-f]{1,4}){1,4}|(?:[0-9A-Fa-f]{1,4}:){1,2}(?::[0-9A-Fa-f]{1,4}){1,5}|[0-9A-Fa-f]{1,4}:(?:(?::[0-9A-Fa-f]{1,4}){1,6})|:(?:(?::[0-9A-Fa-f]{1,4}){1,7}|:)|fe80:(?::[0-9A-Fa-f]{0,4}){0,4}%\w+|::(?:ffff(?::0{1,4}){0,1}:){0,1}(?:(?:2[0-4]|1\d|[1-9])?\d|25[0-5])\.(?:(?:2[0-4]|1\d|[1-9])?\d|25[0-5])\.(?:(?:2[0-4]|1\d|[1-9])?\d|25[0-5])\.(?:(?:2[0-4]|1\d|[1-9])?\d|25[0-5])|(?:[0-9A-Fa-f]{1,4}:){1,4}:192\.88\.99\.(\d{1,3})|(?:[0-9A-Fa-f]{1,4}:){1,4}:192\.0\.2\.(\d{1,3})|(?:[0-9A-Fa-f]{1,4}:){1,4}:(?:[0-9A-Fa-f]{1,4}:){0,1}192\.0\.0\.(\d{1,3})|ff00:(?::[0-9A-Fa-f]{0,4}){0,4}|(?:[0-9A-Fa-f]{1,4}:){1,4}:255\.255\.255\.255)$/
|
||||
// domain校验
|
||||
const reg = /^(?=^.{3,255}$)(http(s)?:\/\/)?(www\.)?[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+(:\d+)*(\/\w+\.\w+)*$/
|
||||
|
||||
if (regexIPv4.test(str) || regexIPv6.test(str)) {
|
||||
const obj = this.columnList.find(t => t.label.toLowerCase() === 'ip')
|
||||
@@ -1294,7 +1285,7 @@ export default class Parser {
|
||||
}
|
||||
return str
|
||||
}
|
||||
} else if (regexDomain.test(str)) {
|
||||
} else if (reg.test(str)) {
|
||||
// 只写作domain即可，schema字段更改几次，避免后续再更改，直接拿this.columnList的label进行替换
|
||||
const obj = this.columnList.find(t => t.label.toLowerCase() === 'domain')
|
||||
if (obj) {
|
||||
@@ -1318,14 +1309,18 @@ export default class Parser {
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 判断传过来值的实体类型，仅限于ip、domain、app
|
||||
*/
|
||||
getEntityTypeByValue (str) {
|
||||
if (str[0] === "'" && str[str.length - 1] === "'") {
|
||||
str = str.substring(1, str.length)
|
||||
str = str.substring(0, str.length - 1)
|
||||
}
|
||||
// ipv4校验
|
||||
const regexIPv4 = /^((25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/
|
||||
// ipv6校验
|
||||
const regexIPv6 = /^(?:(?:[0-9A-Fa-f]{1,4}:){7}[0-9A-Fa-f]{1,4}|(?:[0-9A-Fa-f]{1,4}:){1,7}:|(?:[0-9A-Fa-f]{1,4}:){1,6}:[0-9A-Fa-f]{1,4}|(?:[0-9A-Fa-f]{1,4}:){1,5}(?::[0-9A-Fa-f]{1,4}){1,2}|(?:[0-9A-Fa-f]{1,4}:){1,4}(?::[0-9A-Fa-f]{1,4}){1,3}|(?:[0-9A-Fa-f]{1,4}:){1,3}(?::[0-9A-Fa-f]{1,4}){1,4}|(?:[0-9A-Fa-f]{1,4}:){1,2}(?::[0-9A-Fa-f]{1,4}){1,5}|[0-9A-Fa-f]{1,4}:(?:(?::[0-9A-Fa-f]{1,4}){1,6})|:(?:(?::[0-9A-Fa-f]{1,4}){1,7}|:)|fe80:(?::[0-9A-Fa-f]{0,4}){0,4}%\w+|::(?:ffff(?::0{1,4}){0,1}:){0,1}(?:(?:2[0-4]|1\d|[1-9])?\d|25[0-5])\.(?:(?:2[0-4]|1\d|[1-9])?\d|25[0-5])\.(?:(?:2[0-4]|1\d|[1-9])?\d|25[0-5])\.(?:(?:2[0-4]|1\d|[1-9])?\d|25[0-5])|(?:[0-9A-Fa-f]{1,4}:){1,4}:192\.88\.99\.(\d{1,3})|(?:[0-9A-Fa-f]{1,4}:){1,4}:192\.0\.2\.(\d{1,3})|(?:[0-9A-Fa-f]{1,4}:){1,4}:(?:[0-9A-Fa-f]{1,4}:){0,1}192\.0\.0\.(\d{1,3})|ff00:(?::[0-9A-Fa-f]{0,4}){0,4}|(?:[0-9A-Fa-f]{1,4}:){1,4}:255\.255\.255\.255)$/
|
||||
// domain校验
|
||||
const reg = /^(?=^.{3,255}$)(http(s)?:\/\/)?(www\.)?[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+(:\d+)*(\/\w+\.\w+)*$/
|
||||
|
||||
if (regexIPv4.test(str) || regexIPv6.test(str)) {
|
||||
const obj = this.columnList.find(t => t.label.toLowerCase() === 'ip')
|
||||
if (obj) {
|
||||
@@ -1333,7 +1328,7 @@ export default class Parser {
|
||||
} else {
|
||||
return str
|
||||
}
|
||||
} else if (regexDomain.test(str)) {
|
||||
} else if (reg.test(str)) {
|
||||
const obj = this.columnList.find(t => t.label.toLowerCase() === 'domain')
|
||||
if (obj) {
|
||||
return obj.label
|
||||
@@ -1415,7 +1410,7 @@ export default class Parser {
|
||||
lastObj[i] = `has(${i},${commonObj[i]})`
|
||||
} else {
|
||||
// 单独存在的,直接保留
|
||||
lastObj[i] = `${i}=${commonObj[i]}`
|
||||
lastObj[i] = `${i} = '${commonObj[i]}'`
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1476,78 +1471,6 @@ export default class Parser {
|
||||
|
||||
return this.columnList.find(t => t.label.toLowerCase() === label.toLowerCase())
|
||||
}
|
||||
|
||||
/**
|
||||
* 检测str是否包含枚举字段，包含的话，进行替换
|
||||
* @param str
|
||||
* @returns {string|*}
|
||||
*/
|
||||
conversionEnum (str) {
|
||||
if (str) {
|
||||
let enumFlag = false // 判断字符串是否包含枚举类型的key，不包含则直接返回
|
||||
enumList.forEach(item => {
|
||||
if (str.toLocaleLowerCase().indexOf(item.toLocaleLowerCase()) > -1) {
|
||||
enumFlag = true
|
||||
}
|
||||
})
|
||||
if (enumFlag) {
|
||||
let key = _.cloneDeep(str)
|
||||
let searchList = [] // 将字符串按AND分割成单独的搜索条件
|
||||
if (key.indexOf(' AND ') > -1) {
|
||||
searchList = key.split(' AND ')
|
||||
} else {
|
||||
searchList = [key]
|
||||
}
|
||||
searchList.forEach((item, index) => {
|
||||
const obj = this.columnList.find(d => item.indexOf(d.label) > -1)
|
||||
if (obj && obj.doc.data) {
|
||||
for (let i = 0; i < obj.doc.data.length; i++) {
|
||||
const item1 = obj.doc.data[i]
|
||||
if (item.indexOf(item1.code) > -1) {
|
||||
searchList[index] = searchList[index].replace(new RegExp(item1.code, 'g'), item1.value)
|
||||
// 匹配到code，终止匹配
|
||||
break
|
||||
} else {
|
||||
// 该操作是避免中文参数切换到英文环境时，code经i18n转为英文，匹配不到中文参数的情况
|
||||
Object.keys(store.state.i18nObj).forEach(lang => {
|
||||
const i18nCode = store.state.i18nObj[lang][item1.code1]
|
||||
if (item.indexOf(i18nCode) > -1) {
|
||||
searchList[index] = searchList[index].replace(new RegExp(i18nCode, 'g'), item1.value)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
key = searchList.join(' AND ')
|
||||
return key
|
||||
} else {
|
||||
return str
|
||||
}
|
||||
} else {
|
||||
return str
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取关键字列表，即高亮字段
|
||||
* @param metaList
|
||||
* @returns {*[]}
|
||||
*/
|
||||
getKeywordList (metaList) {
|
||||
const keywordList = []
|
||||
if (metaList && metaList.length > 0) {
|
||||
metaList.forEach(item => {
|
||||
if (item.column && item.column.isFullText) {
|
||||
keywordList.push({ type: 'fullText', value: item.value.value })
|
||||
} else if (item.column && !item.column.isFullText) {
|
||||
keywordList.push({ type: item.column.type, value: item.value.value || item.column.label })
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
return keywordList
|
||||
}
|
||||
}
|
||||
|
||||
// 使用单引号包裹
|
||||
|
||||
@@ -1,171 +0,0 @@
|
||||
<template>
|
||||
<div class="HelperInfo">
|
||||
<div class="tips-container">
|
||||
<Renderer ref="renderVm" :renderProps="renderProps" :renderFun="helperDataFun"></Renderer>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import operatorTips from '@/components/advancedSearch/showhint/const/operatorTips'
|
||||
import defaultTips from '@/components/advancedSearch/showhint/const/defaultTips.js'
|
||||
import sqlTips from '@/components/advancedSearch/showhint/const/sqlTips.js'
|
||||
import functionTips from '@/components/advancedSearch/showhint/const/functionTips.js'
|
||||
import filterTips from '@/components/advancedSearch/showhint/const/filterTips.js'
|
||||
import varTips from '@/components/advancedSearch/showhint/const/varTips.js'
|
||||
|
||||
import { fieldRender } from '@/components/advancedSearch/showhint/const/fieldTips.js'
|
||||
import { EN, storageKey, ZH } from '@/utils/constants'
|
||||
|
||||
export default {
|
||||
name: 'HelperInfo',
|
||||
inject: ['getDataset'],
|
||||
props: {
|
||||
hintSearch: {},
|
||||
hintParams: {}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
operatorTips,
|
||||
sqlTips,
|
||||
functionTips,
|
||||
renderProps: {},
|
||||
isShow: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
refreshRender () {
|
||||
this.$refs?.renderVm.$forceUpdate()
|
||||
},
|
||||
matchFields (searchKey) {
|
||||
const dataset = this.getDataset()
|
||||
const fieldInfo = dataset.getFieldInfo(searchKey)
|
||||
if (!fieldInfo) {
|
||||
return false
|
||||
}
|
||||
let operates = dataset.getOperates(fieldInfo.type, fieldInfo._matchItem)
|
||||
operates = operates.map(item => item.text.toUpperCase())
|
||||
let funs = dataset.getFunctions(fieldInfo.type, fieldInfo._matchItem)
|
||||
funs = funs.map(item => item.text.toUpperCase())
|
||||
|
||||
let operatorReference = dataset.sourceData.operatorReference
|
||||
let funcReference = dataset.sourceData.funcReference
|
||||
|
||||
operatorReference = operatorReference.filter(item => {
|
||||
return operates.includes(item.label)
|
||||
})
|
||||
funcReference = funcReference.filter(item => {
|
||||
return funs.includes(item.name)
|
||||
})
|
||||
|
||||
this.renderProps = {
|
||||
fieldInfo,
|
||||
funcReference,
|
||||
operatorReference,
|
||||
funs,
|
||||
operates
|
||||
}
|
||||
return fieldRender
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
helperDataFun () {
|
||||
let hintSearch = ''
|
||||
if (this.hintSearch) {
|
||||
hintSearch = JSON.parse(JSON.stringify(this.hintSearch))
|
||||
const fields = this.getDataset().sourceData.fields
|
||||
const obj = fields.find(d => d.label === hintSearch)
|
||||
if (obj) {
|
||||
hintSearch = obj.label
|
||||
}
|
||||
}
|
||||
|
||||
let searchKey = hintSearch.toUpperCase() || ''
|
||||
searchKey = searchKey.trim()
|
||||
// if (functionTips[searchKey]) {
|
||||
// return functionTips[searchKey].description
|
||||
// }
|
||||
if (operatorTips[searchKey]) {
|
||||
return operatorTips[searchKey].description
|
||||
}
|
||||
// if (sqlTips[searchKey]) {
|
||||
// return sqlTips[searchKey].description
|
||||
// }
|
||||
if (filterTips[searchKey]) {
|
||||
return filterTips[searchKey].description
|
||||
}
|
||||
// if (varTips[searchKey]) {
|
||||
// return varTips[searchKey].description
|
||||
// }
|
||||
|
||||
// 完整的匹配关键字
|
||||
if (this.getDataset()) {
|
||||
const fieldRender = this.matchFields(searchKey)
|
||||
if (fieldRender) {
|
||||
return fieldRender
|
||||
}
|
||||
}
|
||||
const language = localStorage.getItem(storageKey.language) || EN
|
||||
|
||||
if (language === ZH) {
|
||||
return defaultTips.zhDefault.description
|
||||
}
|
||||
return defaultTips.enDefault.description
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.HelperInfo {
|
||||
min-width: 450px;
|
||||
background-color: #fff;
|
||||
height: 294px;
|
||||
box-sizing: border-box;
|
||||
overflow: auto;
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
.tips-container {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
/deep/ ul li {
|
||||
list-style: inside;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
/deep/ h3 {
|
||||
margin: 8px 0;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
/deep/ p {
|
||||
line-height: 22px;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
/deep/ code,
|
||||
.code {
|
||||
background: initial;
|
||||
border: 1px solid #DEDEDE;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
padding: 0 12px;
|
||||
margin: 6px 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/deep/ .sub-url {
|
||||
padding-left: 18px;
|
||||
}
|
||||
|
||||
/deep/ .sub-url li {
|
||||
list-style: inside circle;
|
||||
}
|
||||
|
||||
/deep/ i.ref-txt {
|
||||
line-height: 20px;
|
||||
color: #aaa;
|
||||
}
|
||||
</style>
|
||||
@@ -1,35 +0,0 @@
|
||||
<!-- 提示信息 -->
|
||||
<template>
|
||||
<div class="Hint" @click.stop>
|
||||
<div class="hint__block">
|
||||
<div class="hint__block-filter">
|
||||
<hint-info v-on="$listeners" :hintList="hintList" @select="onSelect"></hint-info>
|
||||
</div>
|
||||
<div class="hint__block-helper">
|
||||
<helper-info :hintSearch="hintSearch"></helper-info>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import HelperInfo from './HelperInfo.vue'
|
||||
import HintInfo from './HintInfo.vue'
|
||||
|
||||
export default {
|
||||
name: 'Hint',
|
||||
props: {
|
||||
hintList: [],
|
||||
hintSearch: {}
|
||||
},
|
||||
components: {
|
||||
HintInfo,
|
||||
HelperInfo
|
||||
},
|
||||
methods: {
|
||||
onSelect (item, index, hintList) {
|
||||
this.$emit('select', item, index, hintList)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,127 +0,0 @@
|
||||
<template>
|
||||
<div class="HintInfo">
|
||||
<ul style="padding-left: 0;margin: -10px 0 0 0;min-width: calc(100% - 12px)">
|
||||
<template v-for="(item,index) in hintList" :key="index">
|
||||
<li :ref="'hint_'+index" class="relative-item CodeMirror-hint"
|
||||
style="margin-bottom: 2px"
|
||||
@click="handleSelect(item,index,hintList)"
|
||||
:class="{'CodeMirror-hint-active':index === activeIndex,[item.className]:true}"
|
||||
>{{ item.displayText }}</li>
|
||||
</template>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'HintInfo',
|
||||
props: {
|
||||
hintList: {
|
||||
type: Array,
|
||||
default () {
|
||||
return []
|
||||
}
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
active: true,
|
||||
activeIndex: null
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
// this.handleFocus()
|
||||
this.$emit('load', {
|
||||
name: this.name,
|
||||
label: this.name,
|
||||
vm: this
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
scrollToView (index = 0) {
|
||||
// 移动到可视区域
|
||||
const li = this.$refs['hint_' + index][0]
|
||||
li && li.scrollIntoView(false)
|
||||
},
|
||||
handleDown () {
|
||||
if (!this.active) {
|
||||
this.hintActive()
|
||||
return
|
||||
}
|
||||
let nextIndex = this.activeIndex + 1
|
||||
let nextItem = this.hintList[nextIndex]
|
||||
|
||||
if (nextItem?.type === 'abstract') {
|
||||
nextIndex++
|
||||
nextItem = this.hintList[nextIndex]
|
||||
}
|
||||
|
||||
if (nextItem?.type === 'abstract') {
|
||||
nextIndex++
|
||||
}
|
||||
nextIndex >= this.hintList.length ? this.activeIndex = 1 : this.activeIndex = nextIndex
|
||||
this.scrollToView(this.activeIndex)
|
||||
},
|
||||
handleUp () {
|
||||
if (!this.active) {
|
||||
this.hintActive()
|
||||
return
|
||||
}
|
||||
let preIndex = this.activeIndex - 1
|
||||
let preItem = this.hintList[preIndex]
|
||||
|
||||
if (preItem?.type === 'abstract') {
|
||||
preIndex--
|
||||
preItem = this.hintList[preIndex]
|
||||
}
|
||||
if (preItem?.type === 'abstract') {
|
||||
preIndex--
|
||||
}
|
||||
preIndex > 0 ? this.activeIndex = preIndex : this.activeIndex = this.hintList.length - 1
|
||||
this.scrollToView(this.activeIndex)
|
||||
},
|
||||
hintActive () {
|
||||
this.active = true
|
||||
this.activeIndex = 1
|
||||
this.scrollToView(this.activeIndex)
|
||||
},
|
||||
hintDeactive () {
|
||||
this.active = false
|
||||
this.activeIndex = null
|
||||
},
|
||||
handleSelect (item, index) {
|
||||
this.$emit('select', item, index, this.hintList)
|
||||
},
|
||||
triggerSelect () {
|
||||
const index = this.activeIndex || 0
|
||||
const item = this.hintList[index]
|
||||
this.$emit('select', item, index, this.hintList)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.HintInfo {
|
||||
height: 280px;
|
||||
overflow: auto;
|
||||
background: #fff;
|
||||
}
|
||||
ul {
|
||||
min-width: 300px;
|
||||
height:auto;
|
||||
width: fit-content;
|
||||
box-sizing: border-box;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
.el-dropdown-menu__item{
|
||||
text-indent: 1em;
|
||||
font-size: 12px !important;
|
||||
font-family: NotoSansSChineseRegular;
|
||||
color: #575757;
|
||||
font-weight: 400;
|
||||
}
|
||||
.hint-clear{
|
||||
text-indent: 1em;
|
||||
}
|
||||
</style>
|
||||
@@ -1,16 +0,0 @@
|
||||
<script>
|
||||
export default {
|
||||
name: 'Renderer',
|
||||
// abstract: true,
|
||||
props: {
|
||||
renderFun: {
|
||||
type: Function,
|
||||
require: true
|
||||
},
|
||||
renderProps: {}
|
||||
},
|
||||
render (h) {
|
||||
return this.renderFun(h, this.renderProps)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,22 +0,0 @@
|
||||
import sqlHint from './sql-hint.js'
|
||||
import showHint from './show-hint.js'
|
||||
import manualShowHint from './manual-show-hint'
|
||||
import 'codemirror/addon/hint/show-hint.css'
|
||||
|
||||
export default function createHint (hitType = 'default', CodeMirror, {
|
||||
dataset,
|
||||
hinthook,
|
||||
keywordshook,
|
||||
callback,
|
||||
keyboardUp,
|
||||
keyboardDown,
|
||||
keyboardEnter
|
||||
}) {
|
||||
hitType === 'default' ? showHint(CodeMirror) : manualShowHint(CodeMirror, {
|
||||
cb: callback,
|
||||
keyboardUp,
|
||||
keyboardDown,
|
||||
keyboardEnter
|
||||
})
|
||||
sqlHint(CodeMirror, { dataset, hinthook, keywordshook })
|
||||
}
|
||||
@@ -1,596 +0,0 @@
|
||||
export default function (CodeMirror,{
|
||||
cb,
|
||||
keyboardUp,
|
||||
keyboardDown,
|
||||
keyboardEnter
|
||||
}) {
|
||||
|
||||
var HINT_ELEMENT_CLASS = "CodeMirror-hint";
|
||||
var ACTIVE_HINT_ELEMENT_CLASS = "CodeMirror-hint-active";
|
||||
|
||||
// This is the old interface, kept around for now to stay
|
||||
// backwards-compatible.
|
||||
CodeMirror.showHint = function (cm, getHints, options) {
|
||||
if (!getHints) return cm.showHint(options);
|
||||
if (options && options.async) getHints.async = true;
|
||||
var newOpts = {hint: getHints};
|
||||
if (options) for (var prop in options) newOpts[prop] = options[prop];
|
||||
return cm.showHint(newOpts);
|
||||
};
|
||||
|
||||
CodeMirror.defineExtension("showHint", function (options) {
|
||||
options = parseOptions(this, this.getCursor("start"), options);
|
||||
var selections = this.listSelections()
|
||||
if (selections.length > 1) return;
|
||||
// By default, don't allow completion when something is selected.
|
||||
// A hint function can have a `supportsSelection` property to
|
||||
// indicate that it can handle selections.
|
||||
if (this.somethingSelected()) {
|
||||
if (!options.hint.supportsSelection) return;
|
||||
// Don't try with cross-line selections
|
||||
for (var i = 0; i < selections.length; i++)
|
||||
if (selections[i].head.line != selections[i].anchor.line) return;
|
||||
}
|
||||
if (this.state.completionActive) this.state.completionActive.close();
|
||||
var completion = this.state.completionActive = new Completion(this, options);
|
||||
if (!completion.options.hint) return;
|
||||
|
||||
CodeMirror.signal(this, "startCompletion", this);
|
||||
completion.update(true);
|
||||
|
||||
cb && cb({completion})
|
||||
});
|
||||
|
||||
CodeMirror.defineExtension("closeHint", function () {
|
||||
if (this.state.completionActive) this.state.completionActive.close()
|
||||
})
|
||||
|
||||
function Completion(cm, options) {
|
||||
this.cm = cm;
|
||||
this.options = options;
|
||||
this.widget = null;
|
||||
this.debounce = 0;
|
||||
this.tick = 0;
|
||||
this.startPos = this.cm.getCursor("start");
|
||||
this.startLen = this.cm.getLine(this.startPos.line).length - this.cm.getSelection().length;
|
||||
|
||||
if (this.options.updateOnCursorActivity) {
|
||||
var self = this;
|
||||
cm.on("cursorActivity", this.activityFunc = function () {
|
||||
self.cursorActivity();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
var requestAnimationFrame = window.requestAnimationFrame || function (fn) {
|
||||
return setTimeout(fn, 1000 / 60);
|
||||
};
|
||||
var cancelAnimationFrame = window.cancelAnimationFrame || clearTimeout;
|
||||
|
||||
Completion.prototype = {
|
||||
close: function () {
|
||||
if (!this.active()) return;
|
||||
this.cm.state.completionActive = null;
|
||||
this.tick = null;
|
||||
if (this.options.updateOnCursorActivity) {
|
||||
this.cm.off("cursorActivity", this.activityFunc);
|
||||
}
|
||||
|
||||
if (this.widget && this.data) CodeMirror.signal(this.data, "close");
|
||||
if (this.widget) this.widget.close();
|
||||
CodeMirror.signal(this.cm, "endCompletion", this.cm);
|
||||
},
|
||||
|
||||
active: function () {
|
||||
return this.cm.state.completionActive == this;
|
||||
},
|
||||
|
||||
pick: function (data, i) {
|
||||
var completion = data.list[i], self = this;
|
||||
this.cm.operation(function () {
|
||||
if (completion.hint)
|
||||
completion.hint(self.cm, data, completion);
|
||||
else
|
||||
self.cm.replaceRange(getText(completion), completion.from || data.from,
|
||||
completion.to || data.to, "complete");
|
||||
CodeMirror.signal(data, "pick", completion);
|
||||
self.cm.scrollIntoView();
|
||||
});
|
||||
if (this.options.closeOnPick) {
|
||||
this.close();
|
||||
}
|
||||
},
|
||||
|
||||
cursorActivity: function () {
|
||||
if (this.debounce) {
|
||||
cancelAnimationFrame(this.debounce);
|
||||
this.debounce = 0;
|
||||
}
|
||||
|
||||
var identStart = this.startPos;
|
||||
if (this.data) {
|
||||
identStart = this.data.from;
|
||||
}
|
||||
|
||||
var pos = this.cm.getCursor(), line = this.cm.getLine(pos.line);
|
||||
if (pos.line != this.startPos.line || line.length - pos.ch != this.startLen - this.startPos.ch ||
|
||||
pos.ch < identStart.ch || this.cm.somethingSelected() ||
|
||||
(!pos.ch || this.options.closeCharacters.test(line.charAt(pos.ch - 1)))) {
|
||||
this.close();
|
||||
} else {
|
||||
var self = this;
|
||||
this.debounce = requestAnimationFrame(function () {
|
||||
self.update();
|
||||
});
|
||||
if (this.widget) this.widget.disable();
|
||||
}
|
||||
},
|
||||
|
||||
update: function (first) {
|
||||
if (this.tick == null) return
|
||||
var self = this, myTick = ++this.tick
|
||||
fetchHints(this.options.hint, this.cm, this.options, function (data) {
|
||||
if (self.tick == myTick) self.finishUpdate(data, first)
|
||||
})
|
||||
},
|
||||
|
||||
finishUpdate: function (data, first) {
|
||||
if (this.data) CodeMirror.signal(this.data, "update");
|
||||
|
||||
var picked = (this.widget && this.widget.picked) || (first && this.options.completeSingle);
|
||||
if (this.widget) this.widget.close();
|
||||
|
||||
this.data = data;
|
||||
|
||||
if (data && data.list.length) {
|
||||
if (picked && data.list.length == 1) {
|
||||
this.pick(data, 0);
|
||||
} else {
|
||||
this.widget = new Widget(this, data);
|
||||
CodeMirror.signal(data, "shown");
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
function parseOptions(cm, pos, options) {
|
||||
var editor = cm.options.hintOptions;
|
||||
var out = {};
|
||||
for (var prop in defaultOptions) out[prop] = defaultOptions[prop];
|
||||
if (editor) for (var prop in editor)
|
||||
if (editor[prop] !== undefined) out[prop] = editor[prop];
|
||||
if (options) for (var prop in options)
|
||||
if (options[prop] !== undefined) out[prop] = options[prop];
|
||||
if (out.hint.resolve) out.hint = out.hint.resolve(cm, pos)
|
||||
return out;
|
||||
}
|
||||
|
||||
function getText(completion) {
|
||||
if (typeof completion == "string") return completion;
|
||||
else return completion.text;
|
||||
}
|
||||
|
||||
function buildKeyMap(completion, handle) {
|
||||
var baseMap = {
|
||||
Up: function () {
|
||||
handle.moveFocus(-1);
|
||||
},
|
||||
Down: function () {
|
||||
handle.moveFocus(1);
|
||||
},
|
||||
PageUp: function () {
|
||||
handle.moveFocus(-handle.menuSize() + 1, true);
|
||||
},
|
||||
PageDown: function () {
|
||||
handle.moveFocus(handle.menuSize() - 1, true);
|
||||
},
|
||||
Home: function () {
|
||||
handle.setFocus(0);
|
||||
},
|
||||
End: function () {
|
||||
handle.setFocus(handle.length - 1);
|
||||
},
|
||||
// Enter: handle.pick,
|
||||
// Tab: handle.pick,
|
||||
Tab: keyboardEnter,
|
||||
Enter: keyboardEnter,
|
||||
Esc: handle.close
|
||||
};
|
||||
|
||||
var mac = /Mac/.test(navigator.platform);
|
||||
|
||||
if (mac) {
|
||||
baseMap["Ctrl-P"] = function () {
|
||||
handle.moveFocus(-1);
|
||||
};
|
||||
baseMap["Ctrl-N"] = function () {
|
||||
handle.moveFocus(1);
|
||||
};
|
||||
}
|
||||
|
||||
var custom = completion.options.customKeys;
|
||||
var ourMap = custom ? {} : baseMap;
|
||||
|
||||
function addBinding(key, val) {
|
||||
var bound;
|
||||
if (typeof val != "string")
|
||||
bound = function (cm) {
|
||||
return val(cm, handle);
|
||||
};
|
||||
// This mechanism is deprecated
|
||||
else if (baseMap.hasOwnProperty(val))
|
||||
bound = baseMap[val];
|
||||
else
|
||||
bound = val;
|
||||
ourMap[key] = bound;
|
||||
}
|
||||
|
||||
if (custom)
|
||||
for (var key in custom) if (custom.hasOwnProperty(key))
|
||||
addBinding(key, custom[key]);
|
||||
var extra = completion.options.extraKeys;
|
||||
if (extra)
|
||||
for (var key in extra) if (extra.hasOwnProperty(key))
|
||||
addBinding(key, extra[key]);
|
||||
return ourMap;
|
||||
}
|
||||
|
||||
function getHintElement(hintsElement, el) {
|
||||
while (el && el != hintsElement) {
|
||||
if (el.nodeName.toUpperCase() === "LI" && el.parentNode == hintsElement) return el;
|
||||
el = el.parentNode;
|
||||
}
|
||||
}
|
||||
|
||||
function Widget(completion, data) {
|
||||
this.id = "cm-complete-" + Math.floor(Math.random(1e6))
|
||||
this.completion = completion;
|
||||
this.data = data;
|
||||
this.picked = false;
|
||||
var widget = this, cm = completion.cm;
|
||||
var ownerDocument = cm.getInputField().ownerDocument;
|
||||
var parentWindow = ownerDocument.defaultView || ownerDocument.parentWindow;
|
||||
|
||||
var hints = this.hints = ownerDocument.createElement("ul");
|
||||
// $(hints).append(`
|
||||
// <h1>lalallalla</h1>
|
||||
// `)
|
||||
hints.setAttribute("role", "listbox")
|
||||
hints.setAttribute("aria-expanded", "true")
|
||||
hints.id = this.id
|
||||
var theme = completion.cm.options.theme;
|
||||
hints.className = "CodeMirror-hints " + theme;
|
||||
this.selectedHint = data.selectedHint || 0;
|
||||
|
||||
var completions = data.list;
|
||||
for (var i = 0; i < completions.length; ++i) {
|
||||
var elt = hints.appendChild(ownerDocument.createElement("li")), cur = completions[i];
|
||||
var className = HINT_ELEMENT_CLASS + (i != this.selectedHint ? "" : " " + ACTIVE_HINT_ELEMENT_CLASS);
|
||||
if (cur.className != null) className = cur.className + " " + className;
|
||||
elt.className = className;
|
||||
if (i == this.selectedHint) elt.setAttribute("aria-selected", "true")
|
||||
elt.id = this.id + "-" + i
|
||||
elt.setAttribute("role", "option")
|
||||
if (cur.render) cur.render(elt, data, cur);
|
||||
else elt.appendChild(ownerDocument.createTextNode(cur.displayText || getText(cur)));
|
||||
elt.hintId = i;
|
||||
}
|
||||
|
||||
var container = completion.options.container || ownerDocument.body;
|
||||
var pos = cm.cursorCoords(completion.options.alignWithWord ? data.from : null);
|
||||
var left = pos.left, top = pos.bottom, below = true;
|
||||
var offsetLeft = 0, offsetTop = 0;
|
||||
if (container !== ownerDocument.body) {
|
||||
// We offset the cursor position because left and top are relative to the offsetParent's top left corner.
|
||||
var isContainerPositioned = ['absolute', 'relative', 'fixed'].indexOf(parentWindow.getComputedStyle(container).position) !== -1;
|
||||
var offsetParent = isContainerPositioned ? container : container.offsetParent;
|
||||
var offsetParentPosition = offsetParent.getBoundingClientRect();
|
||||
var bodyPosition = ownerDocument.body.getBoundingClientRect();
|
||||
offsetLeft = (offsetParentPosition.left - bodyPosition.left - offsetParent.scrollLeft);
|
||||
offsetTop = (offsetParentPosition.top - bodyPosition.top - offsetParent.scrollTop);
|
||||
}
|
||||
hints.style.left = (left - offsetLeft) + "px";
|
||||
hints.style.top = (top - offsetTop) + "px";
|
||||
// todo 隐藏codemirror自带的提示
|
||||
hints.style.display = 'none'
|
||||
|
||||
// If we're at the edge of the screen, then we want the menu to appear on the left of the cursor.
|
||||
var winW = parentWindow.innerWidth || Math.max(ownerDocument.body.offsetWidth, ownerDocument.documentElement.offsetWidth);
|
||||
var winH = parentWindow.innerHeight || Math.max(ownerDocument.body.offsetHeight, ownerDocument.documentElement.offsetHeight);
|
||||
|
||||
//不用默认的DOM 下拉提示
|
||||
// container.appendChild(hints);
|
||||
hints.remove()
|
||||
|
||||
cm.getInputField().setAttribute("aria-autocomplete", "list")
|
||||
cm.getInputField().setAttribute("aria-owns", this.id)
|
||||
cm.getInputField().setAttribute("aria-activedescendant", this.id + "-" + this.selectedHint)
|
||||
|
||||
var box = completion.options.moveOnOverlap ? hints.getBoundingClientRect() : new DOMRect();
|
||||
var scrolls = completion.options.paddingForScrollbar ? hints.scrollHeight > hints.clientHeight + 1 : false;
|
||||
|
||||
// Compute in the timeout to avoid reflow on init
|
||||
var startScroll;
|
||||
setTimeout(function () {
|
||||
startScroll = cm.getScrollInfo();
|
||||
});
|
||||
|
||||
var overlapY = box.bottom - winH;
|
||||
if (overlapY > 0) {
|
||||
var height = box.bottom - box.top, curTop = pos.top - (pos.bottom - box.top);
|
||||
if (curTop - height > 0) { // Fits above cursor
|
||||
hints.style.top = (top = pos.top - height - offsetTop) + "px";
|
||||
below = false;
|
||||
} else if (height > winH) {
|
||||
hints.style.height = (winH - 5) + "px";
|
||||
hints.style.top = (top = pos.bottom - box.top - offsetTop) + "px";
|
||||
var cursor = cm.getCursor();
|
||||
if (data.from.ch != cursor.ch) {
|
||||
pos = cm.cursorCoords(cursor);
|
||||
hints.style.left = (left = pos.left - offsetLeft) + "px";
|
||||
box = hints.getBoundingClientRect();
|
||||
}
|
||||
}
|
||||
}
|
||||
var overlapX = box.right - winW;
|
||||
if (scrolls) overlapX += cm.display.nativeBarWidth;
|
||||
if (overlapX > 0) {
|
||||
if (box.right - box.left > winW) {
|
||||
hints.style.width = (winW - 5) + "px";
|
||||
overlapX -= (box.right - box.left) - winW;
|
||||
}
|
||||
hints.style.left = (left = Math.max(pos.left - overlapX - offsetLeft, 0)) + "px";
|
||||
}
|
||||
if (scrolls) for (var node = hints.firstChild; node; node = node.nextSibling)
|
||||
node.style.paddingRight = cm.display.nativeBarWidth + "px"
|
||||
|
||||
// debugger
|
||||
cm.addKeyMap(this.keyMap = buildKeyMap(completion, {
|
||||
moveFocus: function (n, avoidWrap) {
|
||||
n === -1 ? keyboardUp && keyboardUp() : keyboardDown && keyboardDown()
|
||||
widget.changeActive(widget.selectedHint + n, avoidWrap);
|
||||
},
|
||||
setFocus: function (n) {
|
||||
widget.changeActive(n);
|
||||
},
|
||||
menuSize: function () {
|
||||
return widget.screenAmount();
|
||||
},
|
||||
length: completions.length,
|
||||
close: function () {
|
||||
completion.close();
|
||||
},
|
||||
pick: function () {
|
||||
widget.pick();
|
||||
},
|
||||
data: data
|
||||
}));
|
||||
|
||||
if (completion.options.closeOnUnfocus) {
|
||||
var closingOnBlur;
|
||||
cm.on("blur", this.onBlur = function () {
|
||||
closingOnBlur = setTimeout(function () {
|
||||
completion.close();
|
||||
}, 100);
|
||||
});
|
||||
cm.on("focus", this.onFocus = function () {
|
||||
clearTimeout(closingOnBlur);
|
||||
});
|
||||
}
|
||||
|
||||
cm.on("scroll", this.onScroll = function () {
|
||||
var curScroll = cm.getScrollInfo(), editor = cm.getWrapperElement().getBoundingClientRect();
|
||||
if (!startScroll) startScroll = cm.getScrollInfo();
|
||||
var newTop = top + startScroll.top - curScroll.top;
|
||||
var point = newTop - (parentWindow.pageYOffset || (ownerDocument.documentElement || ownerDocument.body).scrollTop);
|
||||
if (!below) point += hints.offsetHeight;
|
||||
if (point <= editor.top || point >= editor.bottom) return completion.close();
|
||||
hints.style.top = newTop + "px";
|
||||
hints.style.left = (left + startScroll.left - curScroll.left) + "px";
|
||||
});
|
||||
|
||||
CodeMirror.on(hints, "dblclick", function (e) {
|
||||
var t = getHintElement(hints, e.target || e.srcElement);
|
||||
if (t && t.hintId != null) {
|
||||
widget.changeActive(t.hintId);
|
||||
widget.pick();
|
||||
}
|
||||
});
|
||||
|
||||
CodeMirror.on(hints, "click", function (e) {
|
||||
var t = getHintElement(hints, e.target || e.srcElement);
|
||||
if (t && t.hintId != null) {
|
||||
widget.changeActive(t.hintId);
|
||||
if (completion.options.completeOnSingleClick) widget.pick();
|
||||
}
|
||||
});
|
||||
|
||||
CodeMirror.on(hints, "mousedown", function () {
|
||||
setTimeout(function () {
|
||||
cm.focus();
|
||||
}, 20);
|
||||
});
|
||||
|
||||
// The first hint doesn't need to be scrolled to on init
|
||||
var selectedHintRange = this.getSelectedHintRange();
|
||||
if (selectedHintRange.from !== 0 || selectedHintRange.to !== 0) {
|
||||
this.scrollToActive();
|
||||
}
|
||||
|
||||
CodeMirror.signal(data, "select", completions[this.selectedHint], hints.childNodes[this.selectedHint]);
|
||||
return true;
|
||||
}
|
||||
|
||||
Widget.prototype = {
|
||||
close: function () {
|
||||
if (this.completion.widget != this) return;
|
||||
this.completion.widget = null;
|
||||
if (this.hints.parentNode) this.hints.parentNode.removeChild(this.hints);
|
||||
this.completion.cm.removeKeyMap(this.keyMap);
|
||||
var input = this.completion.cm.getInputField()
|
||||
input.removeAttribute("aria-activedescendant")
|
||||
input.removeAttribute("aria-owns")
|
||||
|
||||
var cm = this.completion.cm;
|
||||
if (this.completion.options.closeOnUnfocus) {
|
||||
cm.off("blur", this.onBlur);
|
||||
cm.off("focus", this.onFocus);
|
||||
}
|
||||
cm.off("scroll", this.onScroll);
|
||||
},
|
||||
|
||||
disable: function () {
|
||||
this.completion.cm.removeKeyMap(this.keyMap);
|
||||
var widget = this;
|
||||
this.keyMap = {
|
||||
Enter: function () {
|
||||
widget.picked = true;
|
||||
}
|
||||
};
|
||||
this.completion.cm.addKeyMap(this.keyMap);
|
||||
},
|
||||
|
||||
pick: function () {
|
||||
this.completion.pick(this.data, this.selectedHint);
|
||||
},
|
||||
|
||||
changeActive: function (i, avoidWrap) {
|
||||
if (i >= this.data.list.length)
|
||||
i = avoidWrap ? this.data.list.length - 1 : 0;
|
||||
else if (i < 0)
|
||||
i = avoidWrap ? 0 : this.data.list.length - 1;
|
||||
if (this.selectedHint == i) return;
|
||||
var node = this.hints.childNodes[this.selectedHint];
|
||||
if (node) {
|
||||
node.className = node.className.replace(" " + ACTIVE_HINT_ELEMENT_CLASS, "");
|
||||
node.removeAttribute("aria-selected")
|
||||
}
|
||||
node = this.hints.childNodes[this.selectedHint = i];
|
||||
node.className += " " + ACTIVE_HINT_ELEMENT_CLASS;
|
||||
node.setAttribute("aria-selected", "true")
|
||||
this.completion.cm.getInputField().setAttribute("aria-activedescendant", node.id)
|
||||
this.scrollToActive()
|
||||
CodeMirror.signal(this.data, "select", this.data.list[this.selectedHint], node);
|
||||
},
|
||||
|
||||
scrollToActive: function () {
|
||||
var selectedHintRange = this.getSelectedHintRange();
|
||||
var node1 = this.hints.childNodes[selectedHintRange.from];
|
||||
var node2 = this.hints.childNodes[selectedHintRange.to];
|
||||
var firstNode = this.hints.firstChild;
|
||||
if (node1.offsetTop < this.hints.scrollTop)
|
||||
this.hints.scrollTop = node1.offsetTop - firstNode.offsetTop;
|
||||
else if (node2.offsetTop + node2.offsetHeight > this.hints.scrollTop + this.hints.clientHeight)
|
||||
this.hints.scrollTop = node2.offsetTop + node2.offsetHeight - this.hints.clientHeight + firstNode.offsetTop;
|
||||
},
|
||||
|
||||
screenAmount: function () {
|
||||
return Math.floor(this.hints.clientHeight / this.hints.firstChild.offsetHeight) || 1;
|
||||
},
|
||||
|
||||
getSelectedHintRange: function () {
|
||||
var margin = this.completion.options.scrollMargin || 0;
|
||||
return {
|
||||
from: Math.max(0, this.selectedHint - margin),
|
||||
to: Math.min(this.data.list.length - 1, this.selectedHint + margin),
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
function applicableHelpers(cm, helpers) {
|
||||
if (!cm.somethingSelected()) return helpers
|
||||
var result = []
|
||||
for (var i = 0; i < helpers.length; i++)
|
||||
if (helpers[i].supportsSelection) result.push(helpers[i])
|
||||
return result
|
||||
}
|
||||
|
||||
function fetchHints(hint, cm, options, callback) {
|
||||
if (hint.async) {
|
||||
hint(cm, callback, options)
|
||||
} else {
|
||||
var result = hint(cm, options)
|
||||
if (result && result.then) result.then(callback)
|
||||
else callback(result)
|
||||
}
|
||||
}
|
||||
|
||||
function resolveAutoHints(cm, pos) {
|
||||
var helpers = cm.getHelpers(pos, "hint"), words
|
||||
if (helpers.length) {
|
||||
var resolved = function (cm, callback, options) {
|
||||
var app = applicableHelpers(cm, helpers);
|
||||
|
||||
function run(i) {
|
||||
if (i == app.length) return callback(null)
|
||||
fetchHints(app[i], cm, options, function (result) {
|
||||
if (result && result.list.length > 0) callback(result)
|
||||
else run(i + 1)
|
||||
})
|
||||
}
|
||||
|
||||
run(0)
|
||||
}
|
||||
resolved.async = true
|
||||
resolved.supportsSelection = true
|
||||
return resolved
|
||||
} else if (words = cm.getHelper(cm.getCursor(), "hintWords")) {
|
||||
return function (cm) {
|
||||
return CodeMirror.hint.fromList(cm, {words: words})
|
||||
}
|
||||
} else if (CodeMirror.hint.anyword) {
|
||||
return function (cm, options) {
|
||||
return CodeMirror.hint.anyword(cm, options)
|
||||
}
|
||||
} else {
|
||||
return function () {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
CodeMirror.registerHelper("hint", "auto", {
|
||||
resolve: resolveAutoHints
|
||||
});
|
||||
|
||||
CodeMirror.registerHelper("hint", "fromList", function (cm, options) {
|
||||
var cur = cm.getCursor(), token = cm.getTokenAt(cur)
|
||||
var term, from = CodeMirror.Pos(cur.line, token.start), to = cur
|
||||
if (token.start < cur.ch && /\w/.test(token.string.charAt(cur.ch - token.start - 1))) {
|
||||
term = token.string.substr(0, cur.ch - token.start)
|
||||
} else {
|
||||
term = ""
|
||||
from = cur
|
||||
}
|
||||
var found = [];
|
||||
for (var i = 0; i < options.words.length; i++) {
|
||||
var word = options.words[i];
|
||||
if (word.slice(0, term.length) == term)
|
||||
found.push(word);
|
||||
}
|
||||
|
||||
if (found.length) return {list: found, from: from, to: to};
|
||||
});
|
||||
|
||||
CodeMirror.commands.autocomplete = CodeMirror.showHint;
|
||||
|
||||
var defaultOptions = {
|
||||
hint: CodeMirror.hint.auto,
|
||||
completeSingle: true,
|
||||
alignWithWord: true,
|
||||
closeCharacters: /[\s()\[\]{};:>,]/,
|
||||
|
||||
closeOnPick: false,
|
||||
closeOnUnfocus: false, //阻止提示信息 失焦关闭
|
||||
// closeOnUnfocus: false,
|
||||
|
||||
updateOnCursorActivity: true,
|
||||
completeOnSingleClick: true,
|
||||
container: null,
|
||||
customKeys: null,
|
||||
extraKeys: null,
|
||||
paddingForScrollbar: true,
|
||||
moveOnOverlap: true,
|
||||
};
|
||||
CodeMirror.defineOption("hintOptions", null);
|
||||
|
||||
}
|
||||
@@ -1,227 +0,0 @@
|
||||
//正则 向前去找关键字
|
||||
/* 用于匹配关系数据 */
|
||||
function matchOperator(CodeMirror, hintParams = {}) {
|
||||
var editor = hintParams.editor;
|
||||
var Pos = CodeMirror.Pos
|
||||
var cur = hintParams.cur;
|
||||
var token = hintParams.token;
|
||||
if (!editor) {
|
||||
return
|
||||
}
|
||||
|
||||
|
||||
var start = token.start;
|
||||
var cont = true;
|
||||
var leftTokenGroup = [];
|
||||
while (cont) {
|
||||
start = token.start;
|
||||
leftTokenGroup.unshift(token);
|
||||
token = editor.getTokenAt(Pos(cur.line, token.start));
|
||||
cont = !(token.string.match(/^[ ]*$/) || start === 0); //只用空格做终止条件
|
||||
}
|
||||
|
||||
var cursorLeftString = editor.getRange(Pos(cur.line, leftTokenGroup[0].start), Pos(cur.line, leftTokenGroup[leftTokenGroup.length - 1].end))
|
||||
|
||||
//判断是不是满足 运算符 表达式的正则
|
||||
//test 如果是ig 会改变正则指针: https://my.oschina.net/jamesview/blog/5460753
|
||||
var reg = /^(.*?)(=|!=|>|<|>=|<=)([^ ]*?)$/;
|
||||
if (reg.test(cursorLeftString)) {
|
||||
var execArr = reg.exec(cursorLeftString) || []
|
||||
return {
|
||||
leftTokenGroup,
|
||||
cursorLeftString,
|
||||
label: execArr[1],
|
||||
sign: execArr[2],
|
||||
value: execArr[3],
|
||||
}
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
function matchCommon(CodeMirror, hintParams = {}) {
|
||||
//通用情况 QUANTILE(expr,level) 左括号右侧第一个就是 关键字
|
||||
var editor = hintParams.editor;
|
||||
var Pos = CodeMirror.Pos
|
||||
var cur = hintParams.cur;
|
||||
var token = hintParams.token;
|
||||
if (!editor) {
|
||||
return
|
||||
}
|
||||
|
||||
|
||||
var start = token.start;
|
||||
var cont = true;
|
||||
var leftTokenGroup = [];
|
||||
while (cont) {
|
||||
start = token.start;
|
||||
leftTokenGroup.unshift(token);
|
||||
token = editor.getTokenAt(Pos(cur.line, token.start));
|
||||
cont = !(token.string.match(/^[ (]*$/) || start === 0); //括号或者空格为终止条件
|
||||
|
||||
//括号补上
|
||||
if (token.string === '(') {
|
||||
leftTokenGroup.unshift(token);
|
||||
}
|
||||
}
|
||||
|
||||
var cursorLeftString = editor.getRange(Pos(cur.line, leftTokenGroup[0].start), Pos(cur.line, leftTokenGroup[leftTokenGroup.length - 1].end))
|
||||
|
||||
//判断是不是满足 运算符 表达式的正则
|
||||
var reg = /^\((.*?),([^ ]*)$/;
|
||||
if (reg.test(cursorLeftString)) {
|
||||
var execArr = reg.exec(cursorLeftString) || []
|
||||
return {
|
||||
leftTokenGroup,
|
||||
cursorLeftString,
|
||||
label: execArr[1],
|
||||
sign: 'unknown', //没必要判断
|
||||
value: execArr[2],
|
||||
}
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
function matchIn(CodeMirror, hintParams = {}) {
|
||||
//in 的情况比较特殊
|
||||
//通用情况 expr not in (values) expr in (values)
|
||||
var editor = hintParams.editor;
|
||||
var Pos = CodeMirror.Pos
|
||||
var cur = hintParams.cur;
|
||||
var token = hintParams.token;
|
||||
if (!editor) {
|
||||
return
|
||||
}
|
||||
|
||||
|
||||
var start = token.start;
|
||||
var cont = true;
|
||||
var leftTokenGroup = [];
|
||||
|
||||
//找到左括号
|
||||
while (cont) {
|
||||
start = token.start;
|
||||
leftTokenGroup.unshift(token);
|
||||
token = editor.getTokenAt(Pos(cur.line, token.start));
|
||||
cont = !(token.string.match(/^[ (]*$/) || start === 0); //括号或者空格为终止条件
|
||||
//左括号补上
|
||||
if (token.string === '(') {
|
||||
leftTokenGroup.unshift(token);
|
||||
}
|
||||
}
|
||||
|
||||
//左括号继续向右找
|
||||
cont = true
|
||||
while (cont) {
|
||||
start = token.start;
|
||||
leftTokenGroup.unshift(token);
|
||||
token = editor.getTokenAt(Pos(cur.line, token.start));
|
||||
cont = !(!token.string.match(/^(in|not| )/g) || start === 0); //括号或者空格为终止条件
|
||||
|
||||
//string-2
|
||||
if (token.type === 'string-2') {
|
||||
leftTokenGroup.unshift(token);
|
||||
}
|
||||
}
|
||||
var cursorLeftString = editor.getRange(Pos(cur.line, leftTokenGroup[0].start), Pos(cur.line, leftTokenGroup[leftTokenGroup.length - 1].end))
|
||||
|
||||
//判断是不是满足 运算符 表达式的正则
|
||||
var reg = /^(.*?)[ ]+((?:not[ ]+)?in)[ ]*\(([^ ]*?)$/i;
|
||||
if (reg.test(cursorLeftString)) {
|
||||
var execArr = reg.exec(cursorLeftString) || []
|
||||
return {
|
||||
leftTokenGroup,
|
||||
cursorLeftString,
|
||||
label: execArr[1],
|
||||
sign: execArr[2],
|
||||
value: execArr[3],
|
||||
}
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
function matchLike(CodeMirror, hintParams = {}) {
|
||||
//like 的情况比较特殊 expr like value , expr not like value
|
||||
var editor = hintParams.editor;
|
||||
var Pos = CodeMirror.Pos
|
||||
var cur = hintParams.cur;
|
||||
var token = hintParams.token;
|
||||
if (!editor) {
|
||||
return
|
||||
}
|
||||
|
||||
|
||||
var start = token.start;
|
||||
var cont = true;
|
||||
var leftTokenGroup = [];
|
||||
|
||||
//找到左括号
|
||||
while (cont) {
|
||||
start = token.start;
|
||||
leftTokenGroup.unshift(token);
|
||||
token = editor.getTokenAt(Pos(cur.line, token.start));
|
||||
cont = !(token.string.match(/^[ ]*$/) || start === 0); //括号或者空格为终止条件
|
||||
}
|
||||
|
||||
//左括号继续向右找
|
||||
cont = true
|
||||
while (cont) {
|
||||
start = token.start;
|
||||
leftTokenGroup.unshift(token);
|
||||
token = editor.getTokenAt(Pos(cur.line, token.start));
|
||||
cont = !(!token.string.match(/^(like|not| )/g) || start === 0); //括号或者空格为终止条件
|
||||
|
||||
//string-2
|
||||
if (token.type === 'string-2') {
|
||||
leftTokenGroup.unshift(token);
|
||||
}
|
||||
}
|
||||
var cursorLeftString = editor.getRange(Pos(cur.line, leftTokenGroup[0].start), Pos(cur.line, leftTokenGroup[leftTokenGroup.length - 1].end))
|
||||
|
||||
//判断是不是满足 运算符 表达式的正则
|
||||
var reg = /^(.*?)[ ]+((?:not[ ]+)?like)[ ]*([^ ]*?)$/i;
|
||||
if (reg.test(cursorLeftString)) {
|
||||
var execArr = reg.exec(cursorLeftString) || []
|
||||
return {
|
||||
leftTokenGroup,
|
||||
cursorLeftString,
|
||||
label: execArr[1],
|
||||
sign: execArr[2],
|
||||
value: execArr[3],
|
||||
}
|
||||
}
|
||||
return null
|
||||
|
||||
}
|
||||
|
||||
export const matchMain = (CodeMirror, params, manualParams = {}) => {
|
||||
var matchRes = null
|
||||
//匹配 运算符表达式
|
||||
matchRes = matchOperator(CodeMirror, manualParams)
|
||||
if (matchRes) {
|
||||
return matchRes
|
||||
}
|
||||
|
||||
//匹配 in表达式
|
||||
matchRes = matchIn(CodeMirror, manualParams)
|
||||
if (matchRes) {
|
||||
return matchRes
|
||||
}
|
||||
|
||||
//匹配 like表达式
|
||||
matchRes = matchLike(CodeMirror, manualParams)
|
||||
if (matchRes) {
|
||||
return matchRes
|
||||
}
|
||||
|
||||
//这里缺少一个对 count(distinct expr) 模式的匹配, 感觉大数据涉及存在缺陷, 先暂时不写
|
||||
|
||||
|
||||
//匹配 其他表达式 (expr,value1,value2....) 模式的匹配
|
||||
matchRes = matchCommon(CodeMirror, manualParams)
|
||||
if (matchRes) {
|
||||
// 说明这是一个 运算符表达式
|
||||
return matchRes
|
||||
}
|
||||
|
||||
return matchRes
|
||||
}
|
||||
@@ -1,591 +0,0 @@
|
||||
export default function showHint(CodeMirror) {
|
||||
"use strict";
|
||||
|
||||
var HINT_ELEMENT_CLASS = "CodeMirror-hint";
|
||||
var ACTIVE_HINT_ELEMENT_CLASS = "CodeMirror-hint-active";
|
||||
|
||||
// This is the old interface, kept around for now to stay
|
||||
// backwards-compatible.
|
||||
CodeMirror.showHint = function (cm, getHints, options) {
|
||||
if (!getHints) return cm.showHint(options);
|
||||
if (options && options.async) getHints.async = true;
|
||||
var newOpts = {hint: getHints};
|
||||
if (options) for (var prop in options) newOpts[prop] = options[prop];
|
||||
return cm.showHint(newOpts);
|
||||
};
|
||||
|
||||
CodeMirror.defineExtension("showHint", function (options) {
|
||||
options = parseOptions(this, this.getCursor("start"), options);
|
||||
var selections = this.listSelections()
|
||||
if (selections.length > 1) return;
|
||||
// By default, don't allow completion when something is selected.
|
||||
// A hint function can have a `supportsSelection` property to
|
||||
// indicate that it can handle selections.
|
||||
if (this.somethingSelected()) {
|
||||
if (!options.hint.supportsSelection) return;
|
||||
// Don't try with cross-line selections
|
||||
for (var i = 0; i < selections.length; i++)
|
||||
if (selections[i].head.line != selections[i].anchor.line) return;
|
||||
}
|
||||
|
||||
if (this.state.completionActive) this.state.completionActive.close();
|
||||
var completion = this.state.completionActive = new Completion(this, options);
|
||||
if (!completion.options.hint) return;
|
||||
|
||||
CodeMirror.signal(this, "startCompletion", this);
|
||||
completion.update(true);
|
||||
});
|
||||
|
||||
CodeMirror.defineExtension("closeHint", function () {
|
||||
if (this.state.completionActive) this.state.completionActive.close()
|
||||
})
|
||||
|
||||
function Completion(cm, options) {
|
||||
this.cm = cm;
|
||||
this.options = options;
|
||||
this.widget = null;
|
||||
this.debounce = 0;
|
||||
this.tick = 0;
|
||||
this.startPos = this.cm.getCursor("start");
|
||||
this.startLen = this.cm.getLine(this.startPos.line).length - this.cm.getSelection().length;
|
||||
|
||||
if (this.options.updateOnCursorActivity) {
|
||||
var self = this;
|
||||
cm.on("cursorActivity", this.activityFunc = function () {
|
||||
self.cursorActivity();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
var requestAnimationFrame = window.requestAnimationFrame || function (fn) {
|
||||
return setTimeout(fn, 1000 / 60);
|
||||
};
|
||||
var cancelAnimationFrame = window.cancelAnimationFrame || clearTimeout;
|
||||
|
||||
Completion.prototype = {
|
||||
close: function () {
|
||||
if (!this.active()) return;
|
||||
this.cm.state.completionActive = null;
|
||||
this.tick = null;
|
||||
if (this.options.updateOnCursorActivity) {
|
||||
this.cm.off("cursorActivity", this.activityFunc);
|
||||
}
|
||||
|
||||
if (this.widget && this.data) CodeMirror.signal(this.data, "close");
|
||||
if (this.widget) this.widget.close();
|
||||
CodeMirror.signal(this.cm, "endCompletion", this.cm);
|
||||
},
|
||||
|
||||
active: function () {
|
||||
return this.cm.state.completionActive == this;
|
||||
},
|
||||
|
||||
pick: function (data, i) {
|
||||
var completion = data.list[i], self = this;
|
||||
this.cm.operation(function () {
|
||||
if (completion.hint)
|
||||
completion.hint(self.cm, data, completion);
|
||||
else
|
||||
self.cm.replaceRange(getText(completion), completion.from || data.from,
|
||||
completion.to || data.to, "complete");
|
||||
CodeMirror.signal(data, "pick", completion);
|
||||
self.cm.scrollIntoView();
|
||||
});
|
||||
if (this.options.closeOnPick) {
|
||||
this.close();
|
||||
}
|
||||
},
|
||||
|
||||
cursorActivity: function () {
|
||||
if (this.debounce) {
|
||||
cancelAnimationFrame(this.debounce);
|
||||
this.debounce = 0;
|
||||
}
|
||||
|
||||
var identStart = this.startPos;
|
||||
if (this.data) {
|
||||
identStart = this.data.from;
|
||||
}
|
||||
|
||||
var pos = this.cm.getCursor(), line = this.cm.getLine(pos.line);
|
||||
if (pos.line != this.startPos.line || line.length - pos.ch != this.startLen - this.startPos.ch ||
|
||||
pos.ch < identStart.ch || this.cm.somethingSelected() ||
|
||||
(!pos.ch || this.options.closeCharacters.test(line.charAt(pos.ch - 1)))) {
|
||||
this.close();
|
||||
} else {
|
||||
var self = this;
|
||||
this.debounce = requestAnimationFrame(function () {
|
||||
self.update();
|
||||
});
|
||||
if (this.widget) this.widget.disable();
|
||||
}
|
||||
},
|
||||
|
||||
update: function (first) {
|
||||
if (this.tick == null) return
|
||||
var self = this, myTick = ++this.tick
|
||||
fetchHints(this.options.hint, this.cm, this.options, function (data) {
|
||||
if (self.tick == myTick) self.finishUpdate(data, first)
|
||||
})
|
||||
},
|
||||
|
||||
finishUpdate: function (data, first) {
|
||||
if (this.data) CodeMirror.signal(this.data, "update");
|
||||
|
||||
var picked = (this.widget && this.widget.picked) || (first && this.options.completeSingle);
|
||||
if (this.widget) this.widget.close();
|
||||
|
||||
this.data = data;
|
||||
|
||||
if (data && data.list.length) {
|
||||
if (picked && data.list.length == 1) {
|
||||
this.pick(data, 0);
|
||||
} else {
|
||||
this.widget = new Widget(this, data);
|
||||
CodeMirror.signal(data, "shown");
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
function parseOptions(cm, pos, options) {
|
||||
var editor = cm.options.hintOptions;
|
||||
var out = {};
|
||||
for (var prop in defaultOptions) out[prop] = defaultOptions[prop];
|
||||
if (editor) for (var prop in editor)
|
||||
if (editor[prop] !== undefined) out[prop] = editor[prop];
|
||||
if (options) for (var prop in options)
|
||||
if (options[prop] !== undefined) out[prop] = options[prop];
|
||||
if (out.hint.resolve) out.hint = out.hint.resolve(cm, pos)
|
||||
return out;
|
||||
}
|
||||
|
||||
function getText(completion) {
|
||||
if (typeof completion == "string") return completion;
|
||||
else return completion.text;
|
||||
}
|
||||
|
||||
function buildKeyMap(completion, handle) {
|
||||
var baseMap = {
|
||||
Up: function () {
|
||||
handle.moveFocus(-1);
|
||||
},
|
||||
Down: function () {
|
||||
handle.moveFocus(1);
|
||||
},
|
||||
PageUp: function () {
|
||||
handle.moveFocus(-handle.menuSize() + 1, true);
|
||||
},
|
||||
PageDown: function () {
|
||||
handle.moveFocus(handle.menuSize() - 1, true);
|
||||
},
|
||||
Home: function () {
|
||||
handle.setFocus(0);
|
||||
},
|
||||
End: function () {
|
||||
handle.setFocus(handle.length - 1);
|
||||
},
|
||||
Enter: handle.pick,
|
||||
Tab: handle.pick,
|
||||
Esc: handle.close
|
||||
};
|
||||
|
||||
var mac = /Mac/.test(navigator.platform);
|
||||
|
||||
if (mac) {
|
||||
baseMap["Ctrl-P"] = function () {
|
||||
handle.moveFocus(-1);
|
||||
};
|
||||
baseMap["Ctrl-N"] = function () {
|
||||
handle.moveFocus(1);
|
||||
};
|
||||
}
|
||||
|
||||
var custom = completion.options.customKeys;
|
||||
var ourMap = custom ? {} : baseMap;
|
||||
|
||||
function addBinding(key, val) {
|
||||
var bound;
|
||||
if (typeof val != "string")
|
||||
bound = function (cm) {
|
||||
return val(cm, handle);
|
||||
};
|
||||
// This mechanism is deprecated
|
||||
else if (baseMap.hasOwnProperty(val))
|
||||
bound = baseMap[val];
|
||||
else
|
||||
bound = val;
|
||||
ourMap[key] = bound;
|
||||
}
|
||||
|
||||
if (custom)
|
||||
for (var key in custom) if (custom.hasOwnProperty(key))
|
||||
addBinding(key, custom[key]);
|
||||
var extra = completion.options.extraKeys;
|
||||
if (extra)
|
||||
for (var key in extra) if (extra.hasOwnProperty(key))
|
||||
addBinding(key, extra[key]);
|
||||
return ourMap;
|
||||
}
|
||||
|
||||
function getHintElement(hintsElement, el) {
|
||||
while (el && el != hintsElement) {
|
||||
if (el.nodeName.toUpperCase() === "LI" && el.parentNode == hintsElement) return el;
|
||||
el = el.parentNode;
|
||||
}
|
||||
}
|
||||
|
||||
function Widget(completion, data) {
|
||||
this.id = "cm-complete-" + Math.floor(Math.random(1e6))
|
||||
this.completion = completion;
|
||||
this.data = data;
|
||||
this.picked = false;
|
||||
var widget = this, cm = completion.cm;
|
||||
var ownerDocument = cm.getInputField().ownerDocument;
|
||||
var parentWindow = ownerDocument.defaultView || ownerDocument.parentWindow;
|
||||
|
||||
var hints = this.hints = ownerDocument.createElement("ul");
|
||||
// $(hints).append(`
|
||||
// <h1>lalallalla</h1>
|
||||
// `)
|
||||
hints.setAttribute("role", "listbox")
|
||||
hints.setAttribute("aria-expanded", "true")
|
||||
hints.id = this.id
|
||||
var theme = completion.cm.options.theme;
|
||||
hints.className = "CodeMirror-hints " + theme;
|
||||
this.selectedHint = data.selectedHint || 0;
|
||||
|
||||
var completions = data.list;
|
||||
for (var i = 0; i < completions.length; ++i) {
|
||||
var elt = hints.appendChild(ownerDocument.createElement("li")), cur = completions[i];
|
||||
var className = HINT_ELEMENT_CLASS + (i != this.selectedHint ? "" : " " + ACTIVE_HINT_ELEMENT_CLASS);
|
||||
if (cur.className != null) className = cur.className + " " + className;
|
||||
elt.className = className;
|
||||
if (i == this.selectedHint) elt.setAttribute("aria-selected", "true")
|
||||
elt.id = this.id + "-" + i
|
||||
elt.setAttribute("role", "option")
|
||||
if (cur.render) cur.render(elt, data, cur);
|
||||
else elt.appendChild(ownerDocument.createTextNode(cur.displayText || getText(cur)));
|
||||
elt.hintId = i;
|
||||
}
|
||||
|
||||
var container = completion.options.container || ownerDocument.body;
|
||||
var pos = cm.cursorCoords(completion.options.alignWithWord ? data.from : null);
|
||||
var left = pos.left, top = pos.bottom, below = true;
|
||||
var offsetLeft = 0, offsetTop = 0;
|
||||
if (container !== ownerDocument.body) {
|
||||
// We offset the cursor position because left and top are relative to the offsetParent's top left corner.
|
||||
var isContainerPositioned = ['absolute', 'relative', 'fixed'].indexOf(parentWindow.getComputedStyle(container).position) !== -1;
|
||||
var offsetParent = isContainerPositioned ? container : container.offsetParent;
|
||||
var offsetParentPosition = offsetParent.getBoundingClientRect();
|
||||
var bodyPosition = ownerDocument.body.getBoundingClientRect();
|
||||
offsetLeft = (offsetParentPosition.left - bodyPosition.left - offsetParent.scrollLeft);
|
||||
offsetTop = (offsetParentPosition.top - bodyPosition.top - offsetParent.scrollTop);
|
||||
}
|
||||
hints.style.left = (left - offsetLeft) + "px";
|
||||
hints.style.top = (top - offsetTop) + "px";
|
||||
// todo 隐藏codemirror自带的提示
|
||||
hints.style.display = 'none'
|
||||
|
||||
// If we're at the edge of the screen, then we want the menu to appear on the left of the cursor.
|
||||
var winW = parentWindow.innerWidth || Math.max(ownerDocument.body.offsetWidth, ownerDocument.documentElement.offsetWidth);
|
||||
var winH = parentWindow.innerHeight || Math.max(ownerDocument.body.offsetHeight, ownerDocument.documentElement.offsetHeight);
|
||||
//在这里 添加的DOM 元素 -- 该方案 实现复杂算了吧
|
||||
container.appendChild(hints);
|
||||
// debugger
|
||||
// $(container).append(
|
||||
// `
|
||||
// <div>
|
||||
// <h1>hahah</h1>
|
||||
// ${ hints }
|
||||
// </div>
|
||||
// `
|
||||
// )
|
||||
cm.getInputField().setAttribute("aria-autocomplete", "list")
|
||||
cm.getInputField().setAttribute("aria-owns", this.id)
|
||||
cm.getInputField().setAttribute("aria-activedescendant", this.id + "-" + this.selectedHint)
|
||||
|
||||
var box = completion.options.moveOnOverlap ? hints.getBoundingClientRect() : new DOMRect();
|
||||
var scrolls = completion.options.paddingForScrollbar ? hints.scrollHeight > hints.clientHeight + 1 : false;
|
||||
|
||||
// Compute in the timeout to avoid reflow on init
|
||||
var startScroll;
|
||||
setTimeout(function () {
|
||||
startScroll = cm.getScrollInfo();
|
||||
});
|
||||
|
||||
var overlapY = box.bottom - winH;
|
||||
if (overlapY > 0) {
|
||||
var height = box.bottom - box.top, curTop = pos.top - (pos.bottom - box.top);
|
||||
if (curTop - height > 0) { // Fits above cursor
|
||||
hints.style.top = (top = pos.top - height - offsetTop) + "px";
|
||||
below = false;
|
||||
} else if (height > winH) {
|
||||
hints.style.height = (winH - 5) + "px";
|
||||
hints.style.top = (top = pos.bottom - box.top - offsetTop) + "px";
|
||||
var cursor = cm.getCursor();
|
||||
if (data.from.ch != cursor.ch) {
|
||||
pos = cm.cursorCoords(cursor);
|
||||
hints.style.left = (left = pos.left - offsetLeft) + "px";
|
||||
box = hints.getBoundingClientRect();
|
||||
}
|
||||
}
|
||||
}
|
||||
var overlapX = box.right - winW;
|
||||
if (scrolls) overlapX += cm.display.nativeBarWidth;
|
||||
if (overlapX > 0) {
|
||||
if (box.right - box.left > winW) {
|
||||
hints.style.width = (winW - 5) + "px";
|
||||
overlapX -= (box.right - box.left) - winW;
|
||||
}
|
||||
hints.style.left = (left = Math.max(pos.left - overlapX - offsetLeft, 0)) + "px";
|
||||
}
|
||||
if (scrolls) for (var node = hints.firstChild; node; node = node.nextSibling)
|
||||
node.style.paddingRight = cm.display.nativeBarWidth + "px"
|
||||
|
||||
// debugger
|
||||
cm.addKeyMap(this.keyMap = buildKeyMap(completion, {
|
||||
moveFocus: function (n, avoidWrap) {
|
||||
widget.changeActive(widget.selectedHint + n, avoidWrap);
|
||||
},
|
||||
setFocus: function (n) {
|
||||
widget.changeActive(n);
|
||||
},
|
||||
menuSize: function () {
|
||||
return widget.screenAmount();
|
||||
},
|
||||
length: completions.length,
|
||||
close: function () {
|
||||
completion.close();
|
||||
},
|
||||
pick: function () {
|
||||
widget.pick();
|
||||
},
|
||||
data: data
|
||||
}));
|
||||
|
||||
if (completion.options.closeOnUnfocus) {
|
||||
var closingOnBlur;
|
||||
cm.on("blur", this.onBlur = function () {
|
||||
closingOnBlur = setTimeout(function () {
|
||||
completion.close();
|
||||
}, 100);
|
||||
});
|
||||
cm.on("focus", this.onFocus = function () {
|
||||
clearTimeout(closingOnBlur);
|
||||
});
|
||||
}
|
||||
|
||||
cm.on("scroll", this.onScroll = function () {
|
||||
var curScroll = cm.getScrollInfo(), editor = cm.getWrapperElement().getBoundingClientRect();
|
||||
if (!startScroll) startScroll = cm.getScrollInfo();
|
||||
var newTop = top + startScroll.top - curScroll.top;
|
||||
var point = newTop - (parentWindow.pageYOffset || (ownerDocument.documentElement || ownerDocument.body).scrollTop);
|
||||
if (!below) point += hints.offsetHeight;
|
||||
if (point <= editor.top || point >= editor.bottom) return completion.close();
|
||||
hints.style.top = newTop + "px";
|
||||
hints.style.left = (left + startScroll.left - curScroll.left) + "px";
|
||||
});
|
||||
|
||||
CodeMirror.on(hints, "dblclick", function (e) {
|
||||
var t = getHintElement(hints, e.target || e.srcElement);
|
||||
if (t && t.hintId != null) {
|
||||
widget.changeActive(t.hintId);
|
||||
widget.pick();
|
||||
}
|
||||
});
|
||||
|
||||
CodeMirror.on(hints, "click", function (e) {
|
||||
var t = getHintElement(hints, e.target || e.srcElement);
|
||||
if (t && t.hintId != null) {
|
||||
widget.changeActive(t.hintId);
|
||||
if (completion.options.completeOnSingleClick) widget.pick();
|
||||
}
|
||||
});
|
||||
|
||||
CodeMirror.on(hints, "mousedown", function () {
|
||||
setTimeout(function () {
|
||||
cm.focus();
|
||||
}, 20);
|
||||
});
|
||||
|
||||
// The first hint doesn't need to be scrolled to on init
|
||||
var selectedHintRange = this.getSelectedHintRange();
|
||||
if (selectedHintRange.from !== 0 || selectedHintRange.to !== 0) {
|
||||
this.scrollToActive();
|
||||
}
|
||||
|
||||
CodeMirror.signal(data, "select", completions[this.selectedHint], hints.childNodes[this.selectedHint]);
|
||||
return true;
|
||||
}
|
||||
|
||||
Widget.prototype = {
|
||||
close: function () {
|
||||
if (this.completion.widget != this) return;
|
||||
this.completion.widget = null;
|
||||
if (this.hints.parentNode) this.hints.parentNode.removeChild(this.hints);
|
||||
this.completion.cm.removeKeyMap(this.keyMap);
|
||||
var input = this.completion.cm.getInputField()
|
||||
input.removeAttribute("aria-activedescendant")
|
||||
input.removeAttribute("aria-owns")
|
||||
|
||||
var cm = this.completion.cm;
|
||||
if (this.completion.options.closeOnUnfocus) {
|
||||
cm.off("blur", this.onBlur);
|
||||
cm.off("focus", this.onFocus);
|
||||
}
|
||||
cm.off("scroll", this.onScroll);
|
||||
},
|
||||
|
||||
disable: function () {
|
||||
this.completion.cm.removeKeyMap(this.keyMap);
|
||||
var widget = this;
|
||||
this.keyMap = {
|
||||
Enter: function () {
|
||||
widget.picked = true;
|
||||
}
|
||||
};
|
||||
this.completion.cm.addKeyMap(this.keyMap);
|
||||
},
|
||||
|
||||
pick: function () {
|
||||
this.completion.pick(this.data, this.selectedHint);
|
||||
},
|
||||
|
||||
changeActive: function (i, avoidWrap) {
|
||||
if (i >= this.data.list.length)
|
||||
i = avoidWrap ? this.data.list.length - 1 : 0;
|
||||
else if (i < 0)
|
||||
i = avoidWrap ? 0 : this.data.list.length - 1;
|
||||
if (this.selectedHint == i) return;
|
||||
var node = this.hints.childNodes[this.selectedHint];
|
||||
if (node) {
|
||||
node.className = node.className.replace(" " + ACTIVE_HINT_ELEMENT_CLASS, "");
|
||||
node.removeAttribute("aria-selected")
|
||||
}
|
||||
node = this.hints.childNodes[this.selectedHint = i];
|
||||
node.className += " " + ACTIVE_HINT_ELEMENT_CLASS;
|
||||
node.setAttribute("aria-selected", "true")
|
||||
this.completion.cm.getInputField().setAttribute("aria-activedescendant", node.id)
|
||||
this.scrollToActive()
|
||||
CodeMirror.signal(this.data, "select", this.data.list[this.selectedHint], node);
|
||||
},
|
||||
|
||||
scrollToActive: function () {
|
||||
var selectedHintRange = this.getSelectedHintRange();
|
||||
var node1 = this.hints.childNodes[selectedHintRange.from];
|
||||
var node2 = this.hints.childNodes[selectedHintRange.to];
|
||||
var firstNode = this.hints.firstChild;
|
||||
if (node1.offsetTop < this.hints.scrollTop)
|
||||
this.hints.scrollTop = node1.offsetTop - firstNode.offsetTop;
|
||||
else if (node2.offsetTop + node2.offsetHeight > this.hints.scrollTop + this.hints.clientHeight)
|
||||
this.hints.scrollTop = node2.offsetTop + node2.offsetHeight - this.hints.clientHeight + firstNode.offsetTop;
|
||||
},
|
||||
|
||||
screenAmount: function () {
|
||||
return Math.floor(this.hints.clientHeight / this.hints.firstChild.offsetHeight) || 1;
|
||||
},
|
||||
|
||||
getSelectedHintRange: function () {
|
||||
var margin = this.completion.options.scrollMargin || 0;
|
||||
return {
|
||||
from: Math.max(0, this.selectedHint - margin),
|
||||
to: Math.min(this.data.list.length - 1, this.selectedHint + margin),
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
function applicableHelpers(cm, helpers) {
|
||||
if (!cm.somethingSelected()) return helpers
|
||||
var result = []
|
||||
for (var i = 0; i < helpers.length; i++)
|
||||
if (helpers[i].supportsSelection) result.push(helpers[i])
|
||||
return result
|
||||
}
|
||||
|
||||
function fetchHints(hint, cm, options, callback) {
|
||||
if (hint.async) {
|
||||
hint(cm, callback, options)
|
||||
} else {
|
||||
var result = hint(cm, options)
|
||||
if (result && result.then) result.then(callback)
|
||||
else callback(result)
|
||||
}
|
||||
}
|
||||
|
||||
function resolveAutoHints(cm, pos) {
|
||||
var helpers = cm.getHelpers(pos, "hint"), words
|
||||
if (helpers.length) {
|
||||
var resolved = function (cm, callback, options) {
|
||||
var app = applicableHelpers(cm, helpers);
|
||||
|
||||
function run(i) {
|
||||
if (i == app.length) return callback(null)
|
||||
fetchHints(app[i], cm, options, function (result) {
|
||||
if (result && result.list.length > 0) callback(result)
|
||||
else run(i + 1)
|
||||
})
|
||||
}
|
||||
|
||||
run(0)
|
||||
}
|
||||
resolved.async = true
|
||||
resolved.supportsSelection = true
|
||||
return resolved
|
||||
} else if (words = cm.getHelper(cm.getCursor(), "hintWords")) {
|
||||
return function (cm) {
|
||||
return CodeMirror.hint.fromList(cm, {words: words})
|
||||
}
|
||||
} else if (CodeMirror.hint.anyword) {
|
||||
return function (cm, options) {
|
||||
return CodeMirror.hint.anyword(cm, options)
|
||||
}
|
||||
} else {
|
||||
return function () {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
CodeMirror.registerHelper("hint", "auto", {
|
||||
resolve: resolveAutoHints
|
||||
});
|
||||
|
||||
CodeMirror.registerHelper("hint", "fromList", function (cm, options) {
|
||||
var cur = cm.getCursor(), token = cm.getTokenAt(cur)
|
||||
var term, from = CodeMirror.Pos(cur.line, token.start), to = cur
|
||||
if (token.start < cur.ch && /\w/.test(token.string.charAt(cur.ch - token.start - 1))) {
|
||||
term = token.string.substr(0, cur.ch - token.start)
|
||||
} else {
|
||||
term = ""
|
||||
from = cur
|
||||
}
|
||||
var found = [];
|
||||
for (var i = 0; i < options.words.length; i++) {
|
||||
var word = options.words[i];
|
||||
if (word.slice(0, term.length) == term)
|
||||
found.push(word);
|
||||
}
|
||||
|
||||
if (found.length) return {list: found, from: from, to: to};
|
||||
});
|
||||
|
||||
CodeMirror.commands.autocomplete = CodeMirror.showHint;
|
||||
|
||||
var defaultOptions = {
|
||||
hint: CodeMirror.hint.auto,
|
||||
completeSingle: true,
|
||||
alignWithWord: true,
|
||||
closeCharacters: /[\s()\[\]{};:>,]/,
|
||||
closeOnPick: true,
|
||||
closeOnUnfocus: true,
|
||||
updateOnCursorActivity: true,
|
||||
completeOnSingleClick: true,
|
||||
container: null,
|
||||
customKeys: null,
|
||||
extraKeys: null,
|
||||
paddingForScrollbar: true,
|
||||
moveOnOverlap: true,
|
||||
};
|
||||
|
||||
CodeMirror.defineOption("hintOptions", null);
|
||||
}
|
||||
@@ -1,372 +0,0 @@
|
||||
import {cloneDeep} from 'lodash'
|
||||
import {matchMain} from './matchRelatedInfo'
|
||||
|
||||
export default function (CodeMirror,
|
||||
{
|
||||
dataset,
|
||||
hinthook, //生成提示的hook 拦截
|
||||
keywordshook //关键字hook 在关键字里面
|
||||
}
|
||||
) {
|
||||
// "use strict";
|
||||
|
||||
var tables;
|
||||
var defaultTable;
|
||||
var keywords;
|
||||
var identifierQuote;
|
||||
var CONS = {
|
||||
QUERY_DIV: ";",
|
||||
ALIAS_KEYWORD: "AS"
|
||||
};
|
||||
var Pos = CodeMirror.Pos, cmpPos = CodeMirror.cmpPos;
|
||||
|
||||
function isArray(val) {
|
||||
return Object.prototype.toString.call(val) == "[object Array]"
|
||||
}
|
||||
|
||||
function getKeywords(editor) {
|
||||
var mode = editor.doc.modeOption;
|
||||
if (mode === "sql") mode = "text/x-sql";
|
||||
keywords = CodeMirror.resolveMode(mode).keywords;
|
||||
if (keywordshook) {
|
||||
keywords = keywordshook(keywords, CodeMirror.resolveMode(mode)) || keywords
|
||||
}
|
||||
return keywords
|
||||
}
|
||||
|
||||
function getIdentifierQuote(editor) {
|
||||
var mode = editor.doc.modeOption;
|
||||
if (mode === "sql") mode = "text/x-sql";
|
||||
return CodeMirror.resolveMode(mode).identifierQuote || "`";
|
||||
}
|
||||
|
||||
function getText(item) {
|
||||
return typeof item == "string" ? item : item.text;
|
||||
}
|
||||
|
||||
function wrapTable(name, value) {
|
||||
if (isArray(value)) value = {columns: value}
|
||||
if (!value.text) value.text = name
|
||||
return value
|
||||
}
|
||||
|
||||
function parseTables(input) {
|
||||
//table 名称变大写 统一变成对象格式 columns text
|
||||
var result = {}
|
||||
if (isArray(input)) {
|
||||
for (var i = input.length - 1; i >= 0; i--) {
|
||||
var item = input[i]
|
||||
result[getText(item).toUpperCase()] = wrapTable(getText(item), item)
|
||||
}
|
||||
} else if (input) {
|
||||
for (var name in input)
|
||||
result[name.toUpperCase()] = wrapTable(name, input[name])
|
||||
}
|
||||
return result
|
||||
}
|
||||
|
||||
function getTable(name) {
|
||||
return tables[name.toUpperCase()]
|
||||
}
|
||||
|
||||
function shallowClone(object) {
|
||||
var result = {};
|
||||
for (var key in object) if (object.hasOwnProperty(key))
|
||||
result[key] = object[key];
|
||||
return result;
|
||||
}
|
||||
|
||||
function match(string, word) {
|
||||
var len = string.length;
|
||||
var sub = getText(word).substr(0, len);
|
||||
return string.toUpperCase() === sub.toUpperCase();
|
||||
}
|
||||
|
||||
function addMatches(result, search, wordlist, formatter) {
|
||||
if (isArray(wordlist)) {
|
||||
for (var i = 0; i < wordlist.length; i++)
|
||||
if (match(search, wordlist[i])) result.push(formatter(wordlist[i]))
|
||||
} else {
|
||||
for (var word in wordlist) if (wordlist.hasOwnProperty(word)) {
|
||||
var val = wordlist[word]
|
||||
if (!val || val === true)
|
||||
val = word
|
||||
else
|
||||
val = val.displayText ? {text: val.text, displayText: val.displayText} : val.text
|
||||
if (match(search, val)) result.push(formatter(val))
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function cleanName(name) {
|
||||
// Get rid name from identifierQuote and preceding dot(.)
|
||||
if (name.charAt(0) == ".") {
|
||||
name = name.substr(1);
|
||||
}
|
||||
// replace duplicated identifierQuotes with single identifierQuotes
|
||||
// and remove single identifierQuotes
|
||||
var nameParts = name.split(identifierQuote + identifierQuote);
|
||||
for (var i = 0; i < nameParts.length; i++)
|
||||
nameParts[i] = nameParts[i].replace(new RegExp(identifierQuote, "g"), "");
|
||||
return nameParts.join(identifierQuote);
|
||||
}
|
||||
|
||||
function insertIdentifierQuotes(name) {
|
||||
var nameParts = getText(name).split(".");
|
||||
for (var i = 0; i < nameParts.length; i++)
|
||||
nameParts[i] = identifierQuote +
|
||||
// duplicate identifierQuotes
|
||||
nameParts[i].replace(new RegExp(identifierQuote, "g"), identifierQuote + identifierQuote) +
|
||||
identifierQuote;
|
||||
var escaped = nameParts.join(".");
|
||||
if (typeof name == "string") return escaped;
|
||||
name = shallowClone(name);
|
||||
name.text = escaped;
|
||||
return name;
|
||||
}
|
||||
|
||||
function getLeftpart(cur, token, result, editor) {
|
||||
var nameParts = [];
|
||||
var start = token.start;
|
||||
var cont = true;
|
||||
while (cont) {
|
||||
//全是空格 或者 是操作符 就接着往前找
|
||||
cont = ((token.type === 'operator' || token.string.match(/^[ ]*$/)) && start !== 0);
|
||||
start = token.start;
|
||||
nameParts.unshift(token.string);
|
||||
token = editor.getTokenAt(Pos(cur.line, token.start));
|
||||
if (token.type === 'operator') {
|
||||
cont = true;
|
||||
token = editor.getTokenAt(Pos(cur.line, token.start));
|
||||
}
|
||||
}
|
||||
|
||||
return nameParts[0]
|
||||
}
|
||||
|
||||
function isRightpart(cur, token, result, editor) {
|
||||
token = editor.getTokenAt(Pos(cur.line, token.start));
|
||||
return token.type === 'operator'
|
||||
}
|
||||
|
||||
function nameCompletion(cur, token, result, editor) {
|
||||
// Try to complete table, column names and return start position of completion
|
||||
var useIdentifierQuotes = false;
|
||||
var nameParts = [];
|
||||
var start = token.start;
|
||||
var cont = true;
|
||||
while (cont) {
|
||||
cont = (token.string.charAt(0) == ".");
|
||||
useIdentifierQuotes = useIdentifierQuotes || (token.string.charAt(0) == identifierQuote);
|
||||
|
||||
start = token.start;
|
||||
nameParts.unshift(cleanName(token.string));
|
||||
|
||||
token = editor.getTokenAt(Pos(cur.line, token.start));
|
||||
if (token.string == ".") {
|
||||
cont = true;
|
||||
token = editor.getTokenAt(Pos(cur.line, token.start));
|
||||
}
|
||||
}
|
||||
|
||||
// Try to complete table names
|
||||
var string = nameParts.join(".");
|
||||
addMatches(result, string, tables, function (w) {
|
||||
return useIdentifierQuotes ? insertIdentifierQuotes(w) : w;
|
||||
});
|
||||
|
||||
// Try to complete columns from defaultTable
|
||||
addMatches(result, string, defaultTable, function (w) {
|
||||
return useIdentifierQuotes ? insertIdentifierQuotes(w) : w;
|
||||
});
|
||||
|
||||
// Try to complete columns
|
||||
string = nameParts.pop();
|
||||
var table = nameParts.join(".");
|
||||
|
||||
var alias = false;
|
||||
var aliasTable = table;
|
||||
// Check if table is available. If not, find table by Alias
|
||||
if (!getTable(table)) {
|
||||
var oldTable = table;
|
||||
table = findTableByAlias(table, editor);
|
||||
if (table !== oldTable) alias = true;
|
||||
}
|
||||
|
||||
var columns = getTable(table);
|
||||
if (columns && columns.columns)
|
||||
columns = columns.columns;
|
||||
|
||||
if (columns) {
|
||||
addMatches(result, string, columns, function (w) {
|
||||
var tableInsert = table;
|
||||
if (alias == true) tableInsert = aliasTable;
|
||||
if (typeof w == "string") {
|
||||
w = tableInsert + "." + w;
|
||||
} else {
|
||||
w = shallowClone(w);
|
||||
w.text = tableInsert + "." + w.text;
|
||||
}
|
||||
return useIdentifierQuotes ? insertIdentifierQuotes(w) : w;
|
||||
});
|
||||
}
|
||||
return start;
|
||||
}
|
||||
|
||||
function eachWord(lineText, f) {
|
||||
var words = lineText.split(/\s+/)
|
||||
for (var i = 0; i < words.length; i++)
|
||||
if (words[i]) f(words[i].replace(/[`,;]/g, ''))
|
||||
}
|
||||
|
||||
function findTableByAlias(alias, editor) {
|
||||
var doc = editor.doc;
|
||||
var fullQuery = doc.getValue();
|
||||
var aliasUpperCase = alias.toUpperCase();
|
||||
var previousWord = "";
|
||||
var table = "";
|
||||
var separator = [];
|
||||
var validRange = {
|
||||
start: Pos(0, 0),
|
||||
end: Pos(editor.lastLine(), editor.getLineHandle(editor.lastLine()).length)
|
||||
};
|
||||
|
||||
//add separator
|
||||
var indexOfSeparator = fullQuery.indexOf(CONS.QUERY_DIV);
|
||||
while (indexOfSeparator != -1) {
|
||||
separator.push(doc.posFromIndex(indexOfSeparator));
|
||||
indexOfSeparator = fullQuery.indexOf(CONS.QUERY_DIV, indexOfSeparator + 1);
|
||||
}
|
||||
separator.unshift(Pos(0, 0));
|
||||
separator.push(Pos(editor.lastLine(), editor.getLineHandle(editor.lastLine()).text.length));
|
||||
|
||||
//find valid range
|
||||
var prevItem = null;
|
||||
var current = editor.getCursor()
|
||||
for (var i = 0; i < separator.length; i++) {
|
||||
if ((prevItem == null || cmpPos(current, prevItem) > 0) && cmpPos(current, separator[i]) <= 0) {
|
||||
validRange = {start: prevItem, end: separator[i]};
|
||||
break;
|
||||
}
|
||||
prevItem = separator[i];
|
||||
}
|
||||
|
||||
if (validRange.start) {
|
||||
var query = doc.getRange(validRange.start, validRange.end, false);
|
||||
|
||||
for (var i = 0; i < query.length; i++) {
|
||||
var lineText = query[i];
|
||||
eachWord(lineText, function (word) {
|
||||
var wordUpperCase = word.toUpperCase();
|
||||
if (wordUpperCase === aliasUpperCase && getTable(previousWord))
|
||||
table = previousWord;
|
||||
if (wordUpperCase !== CONS.ALIAS_KEYWORD)
|
||||
previousWord = word;
|
||||
});
|
||||
if (table) break;
|
||||
}
|
||||
}
|
||||
return table;
|
||||
}
|
||||
|
||||
CodeMirror.registerHelper("hint", "sql", function (editor, options) {
|
||||
tables = parseTables(options && options.tables);
|
||||
var defaultTableName = options && options.defaultTable; //默认table 名称
|
||||
var disableKeywords = options && options.disableKeywords; //禁用的keyword
|
||||
defaultTable = defaultTableName && getTable(defaultTableName);
|
||||
keywords = getKeywords(editor); //获取 定义defineMIME 时候的关键字参数
|
||||
identifierQuote = getIdentifierQuote(editor); //获取 引用标识符
|
||||
|
||||
if (defaultTableName && !defaultTable)
|
||||
defaultTable = findTableByAlias(defaultTableName, editor);
|
||||
|
||||
defaultTable = defaultTable || [];
|
||||
|
||||
if (defaultTable.columns)
|
||||
defaultTable = defaultTable.columns;
|
||||
|
||||
var cur = editor.getCursor(); //line 当前行 ch 索引 sticky ??
|
||||
var result = [];
|
||||
var token = editor.getTokenAt(cur), start, end, search;
|
||||
if (token.end > cur.ch) {
|
||||
token.end = cur.ch;
|
||||
token.string = token.string.slice(0, cur.ch - token.start);
|
||||
}
|
||||
|
||||
//start end search 赋值
|
||||
// todo 此处允许字符串包含 .
|
||||
// if (token.string.match(/^[.`"'\w@][\w$#]*/g)) {
|
||||
if (token.string.match(/^[.`"'\w@][\w#]*/g)) {
|
||||
search = token.string;
|
||||
start = token.start;
|
||||
end = token.end;
|
||||
} else {
|
||||
start = end = cur.ch;
|
||||
search = "";
|
||||
}
|
||||
|
||||
//对引用标识符 . 的使用,关联table 列
|
||||
if (search.charAt(0) == "." || search.charAt(0) == identifierQuote) {
|
||||
start = nameCompletion(cur, token, result, editor);
|
||||
} else {
|
||||
var objectOrClass = function (w, className) {
|
||||
if (typeof w === "object") {
|
||||
w.className = className;
|
||||
} else {
|
||||
w = {text: w, className: className};
|
||||
}
|
||||
return w;
|
||||
};
|
||||
addMatches(result, search, defaultTable, function (w) {
|
||||
return objectOrClass(w, "CodeMirror-hint-table CodeMirror-hint-default-table");
|
||||
});
|
||||
addMatches(
|
||||
result,
|
||||
search,
|
||||
tables, function (w) {
|
||||
return objectOrClass(w, "CodeMirror-hint-table");
|
||||
}
|
||||
);
|
||||
if (!disableKeywords)
|
||||
addMatches(result, search, keywords, function (w) {
|
||||
return objectOrClass(w.toUpperCase(), "CodeMirror-hint-keyword");
|
||||
});
|
||||
}
|
||||
//写入一个 钩子,在这里决定提示的内容
|
||||
if (hinthook) {
|
||||
var params = {
|
||||
search, //搜索 关键字
|
||||
keywords, //关键字列表
|
||||
};
|
||||
if (token.type === 'operator') {
|
||||
params.leftpart = getLeftpart(cur, token, result, editor) || ''
|
||||
}
|
||||
if (isRightpart(cur, token, result, editor)) {
|
||||
params.rightpart = token.string
|
||||
}
|
||||
|
||||
/* 之后的参数 是为manualHinthook 预备的 */
|
||||
|
||||
var manualParams = {
|
||||
search, //搜索 关键字
|
||||
// keywords, //关键字列表 没啥用
|
||||
from: Pos(cur.line, start),
|
||||
to: Pos(cur.line, end),
|
||||
leftpart: getLeftpart(cur, token, result, editor) || '',
|
||||
rightpart: params.rightpart,
|
||||
list: cloneDeep(result),
|
||||
editor,
|
||||
token,
|
||||
cur
|
||||
}
|
||||
|
||||
var refField = matchMain(CodeMirror, params, manualParams);
|
||||
manualParams.refField = refField
|
||||
manualParams.leftpart = refField?.label || manualParams.leftpart;
|
||||
params.leftpart = refField?.label || params.leftpart;
|
||||
|
||||
result = hinthook(result, params, manualParams) || result
|
||||
}
|
||||
return {list: result, from: Pos(cur.line, start), to: Pos(cur.line, end)};
|
||||
});
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
@@ -1,70 +0,0 @@
|
||||
export default {
|
||||
enDefault: {
|
||||
description () {
|
||||
return (<div className='default-tips'>
|
||||
<div class='default-tips-header'>How To Search</div>
|
||||
<p class='show-hint-tips__p'> You can write queries to retrieve entities, including their basic information, activity levels, network performance, threat events, relationships with other entities, and so on. A query has three basic parts: fields, operators, and values.</p>
|
||||
<code>[Field + operator + value] keyword [operator(Field)]</code>
|
||||
<ul style="padding: 0">
|
||||
<li className='show-hint-tips__p'>Field - Fields are different types of traffic attributes in the system.
|
||||
Fields include ip, domain, app, and so on.
|
||||
</li>
|
||||
<li className='show-hint-tips__p'>Operator - Operators are the foundation of the query. They relate the field
|
||||
to the value and build a query condition. Common operators include =, IN, Like, and so on.
|
||||
</li>
|
||||
<li className='show-hint-tips__p'>Value - Values are the actual data in the query.</li>
|
||||
<p className='show-hint-tips__p'>Use the percent(%) wildcard substitutes for one or more characters in a
|
||||
string. Such as: </p>
|
||||
<code>domain like '%google.com'</code>
|
||||
<p className='show-hint-tips__p'>Strings containing spaces must be enclosed in single quotes ('). Such as:</p>
|
||||
<code>ip=192.168.10.53</code>
|
||||
<code>ip.country='United States'</code>
|
||||
<li className='show-hint-tips__p'>Keyword - Keywords are specific words in the query. You can specify the AND
|
||||
and OR to create more complex query conditions.
|
||||
</li>
|
||||
<p className='show-hint-tips__p'>Currently only support AND.</p>
|
||||
</ul>
|
||||
<p class='show-hint-tips__p'>There are two input modes, which can be switched by clicking the button on the right side of the input box.</p>
|
||||
|
||||
<div class='default-tips-title'> 1. Text Mode</div>
|
||||
<p class='show-hint-tips__p'>In text mode, you will write your query with the help of input suggestions.</p>
|
||||
|
||||
<div class='default-tips-title'> 2. Tag Mode </div>
|
||||
<p class='show-hint-tips__p'>In tag mode, you will be guided through preset steps to write a query.</p>
|
||||
</div>)
|
||||
}
|
||||
},
|
||||
zhDefault: {
|
||||
description () {
|
||||
return (<div className='default-tips'>
|
||||
<div class='default-tips-header'>如何搜索</div>
|
||||
<p class='show-hint-tips__p'>您可以编写查询来检索实体。查询具有三个基本部分：字段、运算符和值。</p>
|
||||
<code>[字段 + 运算符 + 值] 关键字 [运算符(字段)]</code>
|
||||
<ul style="padding: 0">
|
||||
<li className='show-hint-tips__p'>字段 - 字段是系统中不同类型的属性。字段包括 ip、domain、app 等。</li>
|
||||
<li className='show-hint-tips__p'>运算符 - 运算符是查询的基础。他们将字段与值相关联并构建查询条件。常见的运算符包括
|
||||
=、IN、Like 等。
|
||||
</li>
|
||||
<li className='show-hint-tips__p'>值 - 值是查询中的实际数据。</li>
|
||||
<p className='show-hint-tips__p'>使用百分号(%)通配符替换字符串中的一个或多个字符。例如：</p>
|
||||
<code>domain like '%google.com'</code>
|
||||
<p className='show-hint-tips__p'>包含空格的字符串必须用单引号(')括住。例如：</p>
|
||||
<code>ip=192.168.10.53</code>
|
||||
<code>ip.country='United States'</code>
|
||||
<li className='show-hint-tips__p'>关键字 - 关键字是查询中的特定单词。您可以指定 AND 和 OR
|
||||
来创建更复杂的查询条件。
|
||||
</li>
|
||||
<p className='show-hint-tips__p'>暂时只支持AND。</p>
|
||||
</ul>
|
||||
|
||||
<p class='show-hint-tips__p'>有两种输入模式，通过点击输入框右侧的按钮进行切换。</p>
|
||||
|
||||
<div class='default-tips-title'> 1. 文本模式</div>
|
||||
<p class='show-hint-tips__p'>文本模式中，您将在输入建议的帮助下编写查询语句。</p>
|
||||
|
||||
<div class='default-tips-title'> 2. 标签模式 </div>
|
||||
<p class='show-hint-tips__p'>标签模式中，您将在引导下按预设好的步骤编写查询。</p>
|
||||
</div>)
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,26 +0,0 @@
|
||||
import i18n from '@/i18n'
|
||||
export function fieldRender (h, { fieldInfo = {}, funcReference = [], operatorReference = [], operates = [], funs = [] }) {
|
||||
return (<div className='field-tips'>
|
||||
<div class='default-tips-header'>{fieldInfo.label}</div>
|
||||
<p class='show-hint-tips__p'> {i18n.global.t('overall.name')}: {fieldInfo.name}</p>
|
||||
<p class='show-hint-tips__p'> {i18n.global.t('overall.type')}: {typeof fieldInfo.type === 'object' ? fieldInfo.type.type : fieldInfo.type} </p>
|
||||
<p class='show-hint-tips__p'> {i18n.global.t('overall.operators')}: {operates.join(',')} </p>
|
||||
{/* <p> Function: {funs.join(',')} </p> */}
|
||||
<p> {fieldInfo.options && (
|
||||
'Options: ' + fieldInfo.options.map(item => {
|
||||
return `${item.displayText}(${item.text})`
|
||||
}).join(',')
|
||||
)} </p>
|
||||
|
||||
<div class='default-tips-header'>{i18n.global.t('overall.enableOperators')}</div>
|
||||
{/* 提示超过一屏幕 明显不合理 --- 换成简单形式 */}
|
||||
<ul style="padding-left: 0;margin: 12px 0;">
|
||||
{operatorReference.map(item => {
|
||||
return <li>
|
||||
<span>{item.name}</span>
|
||||
<code> {item.function} </code>
|
||||
</li>
|
||||
})}
|
||||
</ul>
|
||||
</div>)
|
||||
}
|
||||
@@ -1,109 +0,0 @@
|
||||
import i18n from '@/i18n'
|
||||
import { EN, storageKey, ZH } from '@/utils/constants'
|
||||
|
||||
export const helpInfo = [
|
||||
{
|
||||
operator: 'AND',
|
||||
zhDescribe: '搜索包含所有搜索字段的实体。',
|
||||
enDescribe: 'Search entities that contain all the search fields. ',
|
||||
example: [
|
||||
"ip = '192.168.10.53' AND domain = 'google.com'",
|
||||
"domain = 'google.com' AND app = 'google'"
|
||||
]
|
||||
}
|
||||
// {
|
||||
// // operator: '= , !=',
|
||||
// operator: ' = ',
|
||||
// describe: 'Search logs that do EQUALS or NOT EQUALS the search value. ',
|
||||
// example: [
|
||||
// "Client IP = '192.168.10.53' "
|
||||
// // 'Server Port != 443'
|
||||
// ]
|
||||
// },
|
||||
// {
|
||||
// operator: '> , < , >= , <=',
|
||||
// describe: 'Search logs greater than and equal or less than and equal a value , or whtin a range. This operator can‘t be used with string fields. ',
|
||||
// example: [
|
||||
// 'Bytes Sent >= 751',
|
||||
// 'Bytes Sent >= 751 and Bytes Sent <= 1024'
|
||||
// ]
|
||||
// },
|
||||
// {
|
||||
// operator: ' LIKE ',
|
||||
// // operator: 'LIKE , NOT LIKE',
|
||||
// describe: 'You can use wildcard searches for value that contain or not contain search fields. Using percent (%) wildcard substitutes for one or more characters in a string. Using underscore (_) wildcard substitutes for exactly one character in a string. ',
|
||||
// example: [
|
||||
// "SSL.SNI LIKE '%google.com' ",
|
||||
// "Client IP LIKE '192.168.10.1_'"
|
||||
// // "SSL.SNI NOT LIKE '%google.com'",
|
||||
// // "Client IP NOT LIKE '192.168%'"
|
||||
// ]
|
||||
// },
|
||||
// {
|
||||
// operator: ' IN ',
|
||||
// // operator: 'IN , NOT IN',
|
||||
// describe: 'Specify or exclude multiple values for search fields. IN IN condition you can use when you need to use multiple OR condition. ',
|
||||
// example: [
|
||||
// "l7 Protocol IN ('HTTP', 'HTTPS')"
|
||||
// // 'Server Port NOT IN (443,80)'
|
||||
// ]
|
||||
// },
|
||||
// {
|
||||
// operator: 'EMPTY , NOT EMPTY',
|
||||
// describe: 'Specify or exclude empty value for search fields. A string or array is considered non-empty if it contains at least one byte, even if this is a space or a null byte. ',
|
||||
// example: [
|
||||
// 'NOT EMPTY(SSL.SNI)',
|
||||
// 'EMPTY(Application Label)'
|
||||
// ]
|
||||
// },
|
||||
// {
|
||||
// operator: 'HAS',
|
||||
// describe: 'Search logs that has element value for array type. Example:',
|
||||
// example: [
|
||||
// 'HAS(FQDN Category, music)'
|
||||
// ]
|
||||
// }
|
||||
// {
|
||||
// operator: 'bitAnd',
|
||||
// describe: 'A bitwise And(&) is a binary operation that compares each bit of the first operand to the corresponding bit of the second operand. Both expressions must have integral types. Examples:',
|
||||
// example: [
|
||||
// 'bitAnd(Flags, Asymmetric|Download) = Asymmetric|Download',
|
||||
// 'bitAnd(Flags, Asymmetric|Download) >0'
|
||||
// ]
|
||||
// }
|
||||
]
|
||||
const renderData = [
|
||||
helpInfo[0]
|
||||
]
|
||||
export const filterList = renderData
|
||||
function main () {
|
||||
const sqlTips = {}
|
||||
const language = localStorage.getItem(storageKey.language) || EN
|
||||
renderData.forEach((item, index) => {
|
||||
const data = item // 这是个闭包
|
||||
sqlTips[item.operator] = {
|
||||
name: item.operator,
|
||||
// syntax: item.syntax,
|
||||
type: 'filter',
|
||||
description () {
|
||||
return (<div className='filter-tips'>
|
||||
<div class='default-tips-header'>{data.operator}</div>
|
||||
<div class='default-tips-title'> {i18n.global.t('overall.remark')}: </div>
|
||||
<p class='show-hint-tips__p'> {language === ZH ? data.zhDescribe : data.enDescribe}</p>
|
||||
<div class='default-tips-title'>{i18n.global.t('overall.examples')}:</div>
|
||||
<ul style="padding-left: 0;">
|
||||
{item.example.map(v => {
|
||||
return <li>
|
||||
<code>{v}</code>
|
||||
</li>
|
||||
})}
|
||||
</ul>
|
||||
</div>)
|
||||
}
|
||||
}
|
||||
})
|
||||
return sqlTips
|
||||
}
|
||||
|
||||
const filterTips = main()
|
||||
export default filterTips
|
||||
@@ -1,341 +0,0 @@
|
||||
var renderData = [
|
||||
{
|
||||
name: 'COUNT',
|
||||
syntax: 'count(expr)',
|
||||
description: 'Aggregate function is used to count the number of rows',
|
||||
example: [
|
||||
{
|
||||
purpose: 'Total count of all logs :',
|
||||
code: 'count(*)'
|
||||
},
|
||||
{
|
||||
purpose: 'Counts the occurrences of a Client IP :',
|
||||
code: 'count(client_ip)'
|
||||
}
|
||||
],
|
||||
details () {
|
||||
// 支持jsx 嵌套写法,万一测试要关键字加重呢
|
||||
return <div>
|
||||
You can use COUNT function by count(*), count(1) or count(field). But there are something difference:
|
||||
<ul>
|
||||
<li>count(*) and count(1) will count all the rows in the table, including NULL values.</li>
|
||||
<li>count(field) will count all the rows in the specified field while excluding NULL values.</li>
|
||||
</ul>
|
||||
</div>
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'COUNT_DISTINCT',
|
||||
syntax: 'count(distinct expr)',
|
||||
description: 'Aggregate function is used to count only distinct(unique) rows in the specified field',
|
||||
example: [
|
||||
{
|
||||
purpose: 'Counts the number of different Client IP :',
|
||||
code: 'count(distinct client_ip)'
|
||||
},
|
||||
{
|
||||
purpose: `Counts the number of different "Server IP" and "Server port" :`,
|
||||
code: 'count(distinct server_ip, server_port)'
|
||||
}
|
||||
],
|
||||
details () {
|
||||
// 支持jsx 嵌套写法,万一测试要关键字加重呢
|
||||
return <div>The COUNT DISTINCT function returns the number of unique values in the field or multiple fields.
|
||||
System will uses an adaptive sampling algorithm to perform fast count distinct operations.</div>
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'AVG',
|
||||
syntax: 'avg(expr)',
|
||||
description: 'Aggregate function is used to calculate the arithmetic mean in the specified field. EXPR must be Integer,Float or Decimal and returned value as Float.',
|
||||
example: [
|
||||
{
|
||||
purpose: `Calculates the average(mean) "Byte sent (sent_bytes)" field:`,
|
||||
code: 'avg(sent_bytes)'
|
||||
},
|
||||
{
|
||||
purpose: `Calculates the average(mean) "Bytes" , rounded to 2 decimal points:`,
|
||||
code: 'round(avg(sent_bytes+received_bytes),2)'
|
||||
}
|
||||
],
|
||||
details () {
|
||||
// 支持jsx 嵌套写法,万一测试要关键字加重呢
|
||||
return <div>You can use ROUND(expr[,decimal_places]) or FLOOR(expr[,decimal_places]) function that rounds or
|
||||
floors a value to a specified number of decimal places.</div>
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'SUM',
|
||||
syntax: 'sum(expr)',
|
||||
description: 'Aggregate function is used to sum of the values of the specified field. EXPR must be Integer,Float or Decimal.',
|
||||
example: [
|
||||
{
|
||||
purpose: `The sum of the "Byte sent (sent_bytes)" field:`,
|
||||
code: 'sum(sent_bytes)'
|
||||
},
|
||||
{
|
||||
purpose: `The sum of the "sent_bytes" and "received_bytes" fields , and rename as "Bytes ":`,
|
||||
code: 'sum(sent_bytes+received_bytes) as Bytes'
|
||||
}
|
||||
],
|
||||
details () {
|
||||
// 支持jsx 嵌套写法,万一测试要关键字加重呢
|
||||
return <div>You can rename the field using the AS keyword.</div>
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'MAX',
|
||||
syntax: 'max(expr)',
|
||||
description: 'Aggregate function is used to return the maximum value of the specified field.',
|
||||
example: [
|
||||
{
|
||||
purpose: `Returns the maximum value of the "Byte sent (sent_bytes)" field:`,
|
||||
code: 'max(sent_bytes)'
|
||||
}
|
||||
],
|
||||
details () {
|
||||
// 支持jsx 嵌套写法,万一测试要关键字加重呢
|
||||
return <div>The <b>MAX</b> aggregate function can also be used with the DateTime data type, where it will sort the
|
||||
DateTime values and return the last value from the sorted logs.</div>
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'MIN',
|
||||
syntax: 'min(expr)',
|
||||
description: 'Aggregate function is used to return the minimum value of the specified field.',
|
||||
example: [
|
||||
{
|
||||
purpose: `Returns the minimum value of the "Byte sent (sent_bytes)" field:`,
|
||||
code: 'min(sent_bytes)'
|
||||
}
|
||||
],
|
||||
details () {
|
||||
// 支持jsx 嵌套写法,万一测试要关键字加重呢
|
||||
return <div>The MIN aggregate function can also be used with the DateTime data type, where it will sort the
|
||||
DateTime values and return the minimum value from the sorted logs.</div>
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'TIME_FLOOR_WITH_FILL',
|
||||
syntax: 'TIME_FLOOR_WITH_FILL(<timestamp_expr>, <period>[,<fill>])',
|
||||
description: 'Rounds down a timestamp, returning it as a new timestamp,optionally from some reference fill, and fills time gaps and impute missing values.',
|
||||
example: [
|
||||
{
|
||||
purpose: `Round the recv_time down to a 5 minutes increment and fill time gaps and impute zero value.`,
|
||||
code: 'TIME_FLOOR_WITH_FILL(recv_time,\'PT5M\',\'zero\')'
|
||||
}
|
||||
],
|
||||
details () {
|
||||
// 支持jsx 嵌套写法,万一测试要关键字加重呢
|
||||
return <div>
|
||||
<p>The TIME_FLOOR_WITH_FILL function as Timeseries granularity is used for time-based grouping.</p>
|
||||
<ul>
|
||||
<li> timestamp_expr - Unix Timestamp field</li>
|
||||
<li>period - can be any ISO8601 period, like P3M (quarters) or PT12H (half-days)</li>
|
||||
<li>
|
||||
<span>fill - optionnal. Includes none, null, zero, previous, next value.</span>
|
||||
<ul class="sub-url">
|
||||
<li>none: empty string ""</li>
|
||||
<li>null："NULL" expression</li>
|
||||
<li>zero：zero "0"</li>
|
||||
<li>previous：previous value</li>
|
||||
<li>next：next value</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'UNIX_TIMESTAMP',
|
||||
syntax: `UNIX_TIMESTAMP(date)`,
|
||||
description: `Returns a Unix timestamp the value of the argument as seconds since '1970-01-01 00:00:00' UTC.`,
|
||||
example: [
|
||||
{
|
||||
purpose: `Specify a datetime string "2019-06-06 19:11:12", calculate the Unix timestamp:`,
|
||||
code: 'UNIX_TIMESTAMP(\'2019-06-06 19:11:12\')'
|
||||
},
|
||||
{
|
||||
purpose: `Specify a ISO8601 datetime string with time zone information "2019-10-12T14:20:50+08:00", calculate the Unix timestamp:`,
|
||||
code: 'UNIX_TIMESTAMP(\'2019-10-12T14:20:50+08:00\')'
|
||||
},
|
||||
{
|
||||
purpose: `Specify a ISO8601 datetime string with UTC+0 time zone information "2019-10-12T14:20:50Z", calculate the Unix timestamp:`,
|
||||
code: 'UNIX_TIMESTAMP(\'2019-10-12T14:20:50Z\')'
|
||||
},
|
||||
],
|
||||
details () {
|
||||
// 支持jsx 嵌套写法,万一测试要关键字加重呢
|
||||
return <div>
|
||||
<p>The date argument may be a DATE, DATETIME or TIMESTAMP string, or a number in YYMMDD, YYMMDDhhmmss, YYYYMMDD,
|
||||
or YYYYMMDDhhmmss format.</p>
|
||||
<ul>
|
||||
<li> Standard datetime string(UTC+0) : UNIX_TIMESTAMP('2019-06-06 19:11:12')</li>
|
||||
<li>ISO8601 datetime string：UNIX_TIMESTAMP('2019-10-12T14:20:50Z') or
|
||||
UNIX_TIMESTAMP('2019-10-12T14:20:50+08:00')
|
||||
</li>
|
||||
<li>Date: UNIX_TIMESTAMP(DATE('2019-06-06 19:11:12'))</li>
|
||||
</ul>
|
||||
</div>
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'FROM_UNIXTIME',
|
||||
syntax: `FROM_UNIXTIME(unix_timestamp)`,
|
||||
description: `Returns a representation of unix_timestamp as a datetime or character string value. The value returned is expressed using the UTC+0 time zone.`,
|
||||
example: [
|
||||
{
|
||||
purpose: `Specify a Unix Timestamp "1570881546", calculate the datetime string:`,
|
||||
code: 'FROM_UNIXTIME(1570881546)'
|
||||
},
|
||||
],
|
||||
details () {
|
||||
// 支持jsx 嵌套写法,万一测试要关键字加重呢
|
||||
return <div>The unix_timestamp is an internal timestamp value representing seconds since '1970-01-01 00:00:00'
|
||||
UTC.</div>
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'DATE_FORMAT',
|
||||
syntax: 'DATE_FORMAT(date, format)',
|
||||
description: `Formats the date value according to the format string.`,
|
||||
example: [
|
||||
{
|
||||
purpose: `Specify a Unix Timestamp "1570881546", calculate the datetime string with format "%Y-%m-%d %H:%i:%s":`,
|
||||
code: 'DATE_FORMAT(FROM_UNIXTIME(1570881546), \'%Y-%m-%d %H:%i:%s\')'
|
||||
}
|
||||
],
|
||||
details () {
|
||||
// 支持jsx 嵌套写法,万一测试要关键字加重呢
|
||||
return <div>
|
||||
<p>The DATE_FORMAT function accepts two parameters as given below :</p>
|
||||
<ul>
|
||||
<li>date – Specified date to be formatted.</li>
|
||||
<li>
|
||||
<span>format – Specified format. This list of formats used in this function are listed below:</span>
|
||||
<ul class="sub-url">
|
||||
<li>%Y - Year, numeric, four digits</li>
|
||||
<li>%y - Year, numeric (two digits)</li>
|
||||
<li>%M - Month name (January..December)</li>
|
||||
<li>%m - Month, numeric (00..12)</li>
|
||||
<li>%D - Day of the month with English suffix (0th, 1st, 2nd, 3rd, …)</li>
|
||||
<li>%d - Day of the month, numeric (00..31)</li>
|
||||
<li>%H - Hour (00..23)</li>
|
||||
<li>%h - Hour (01..12)</li>
|
||||
<li>%i - Minutes, numeric (00..59)</li>
|
||||
<li>%s - Seconds (00..59)</li>
|
||||
<li>%w - Day of the week (0=Sunday..6=Saturday)</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'CONVERT_TZ',
|
||||
syntax: `CONVERT_TZ(dt, from_tz, to_tz)`,
|
||||
description: `Converts a datetime value dt from the time zone given by from_tz to the time zone given by to_tz and returns the resulting value.`,
|
||||
example: [
|
||||
{
|
||||
purpose: `Specify a datetime string "2021-11-11 00:00:00", converted from GMT(Greenwich Mean Time) to Asia/Shanghai time zone:`,
|
||||
code: 'CONVERT_TZ(\'2021-11-11 00:00:00\',\'GMT\',\'Asia/Shanghai\')'
|
||||
},
|
||||
{
|
||||
purpose: `Specify a Unix timestamp "1636588800", converted from GMT(Greenwich Mean Time) to Asia/Shanghai time zone:`,
|
||||
code: 'CONVERT_TZ(FROM_UNIXTIME(1636588800),\'GMT\',\'Asia/Shanghai\')'
|
||||
},
|
||||
{
|
||||
purpose: `Specify a Unix timestamp "1636588800", converted from Europe/London to America/New_York time zone:`,
|
||||
code: 'CONVERT_TZ(DATE_FORMAT(FROM_UNIXTIME(1636588800), \'%Y-%m-%d %H:%i:%s\'),\'Europe/London\',\'America/New_York\')'
|
||||
},
|
||||
],
|
||||
details () {
|
||||
// 支持jsx 嵌套写法,万一测试要关键字加重呢
|
||||
return <div>
|
||||
<p>The CONVERT_TZ function accepts a three-parameter:</p>
|
||||
<ul>
|
||||
<li>dt - The given DateTime which we want to convert.</li>
|
||||
<li>from_tz - The time zone from which we want to convert DateTime.</li>
|
||||
<li>to_tz - The time zone in which we want to convert DateTime.</li>
|
||||
</ul>
|
||||
</div>
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'MEDIAN',
|
||||
syntax: `MEDIAN(<expr>)`,
|
||||
description: `Aggregate function is used to calculate median value. expr must be Integer, Float or Decimal.`,
|
||||
example: [
|
||||
{
|
||||
purpose: `Calculates the median "TCP Handshake Latency (tcp_handshake_latency_ms)" field:`,
|
||||
code: 'MEDIAN(tcp_handshake_latency_ms)'
|
||||
}
|
||||
],
|
||||
details () {
|
||||
// 支持jsx 嵌套写法,万一测试要关键字加重呢
|
||||
return <div>In Traffic logs analysis, the function can be useful in calculating the median of certain numbers,
|
||||
e.g. median SSL Handshake Latency or TCP Handshake Latency.</div>
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'QUANTILE',
|
||||
syntax: `QUANTILE(<expr>[, <level>])`,
|
||||
description: `Aggregate function is used to calculate an approximate quantile of a numeric data sequence.`,
|
||||
example: [
|
||||
{
|
||||
purpose: `Calculates the 90th percentile "TCP Handshake Latency (tcp_handshake_latency_ms)" field:`,
|
||||
code: 'QUANTILE(tcp_handshake_latency_ms, 0.9)'
|
||||
}
|
||||
],
|
||||
details () {
|
||||
// 支持jsx 嵌套写法,万一测试要关键字加重呢
|
||||
return <div>
|
||||
<p>The QUANTILE function accepts a two-parameter:</p>
|
||||
<ul>
|
||||
<li>expr - The column values resulting in integer, Flot or Decimal.</li>
|
||||
<li>level - Level of quantile. Optional parameter. Constant floating-point number from 0 to 1. We recommend
|
||||
using a level value in the range of [0.01, 0.99]. Default value is 0.5. At level=0.5 the function calculates
|
||||
MEDIAN.
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
}
|
||||
},
|
||||
]
|
||||
|
||||
function main () {
|
||||
var functionTips = {}
|
||||
renderData.forEach((item, index) => {
|
||||
var data = item // 这是个闭包
|
||||
functionTips[item.name] = {
|
||||
name: item.name,
|
||||
syntax: item.syntax,
|
||||
type: 'Function',
|
||||
description () {
|
||||
return (<div className="function-tips">
|
||||
<h2>{data.name}</h2>
|
||||
<h3>Syntax:<span>{data.syntax}</span></h3>
|
||||
<h3> Description: </h3>
|
||||
<p> {data.description}</p>
|
||||
<h3>Examples:</h3>
|
||||
<ul>
|
||||
{item.example.map(v => {
|
||||
return <li>
|
||||
<span>{v.purpose}</span>
|
||||
<code>{v.code}</code>
|
||||
</li>
|
||||
})}
|
||||
</ul>
|
||||
<h3> Details: </h3>
|
||||
{Object.prototype.toString.call(data.details) === '[object Function]' ?
|
||||
<renderer renderFun={data.details}></renderer> : <p>{data.details} </p>}
|
||||
</div>)
|
||||
}
|
||||
}
|
||||
})
|
||||
return functionTips
|
||||
}
|
||||
|
||||
export const functionList = renderData
|
||||
var functionTips = main()
|
||||
export default functionTips
|
||||
@@ -1,111 +0,0 @@
|
||||
import i18n from '@/i18n'
|
||||
import { EN, storageKey, ZH } from '@/utils/constants'
|
||||
|
||||
const renderData = [
|
||||
{
|
||||
name: 'EQUALS',
|
||||
syntax: '=',
|
||||
primaryKey: '=',
|
||||
zhDescription: '搜索指定字段的值与指定值完全匹配的实体。',
|
||||
enDescription: 'Search for entities where the value of a specified field exactly matches a specified value.',
|
||||
example: [
|
||||
{
|
||||
zhPurpose: '通过192.168.10.53查询ip实体:',
|
||||
enPurpose: 'Search entity of ip by 192.168.10.53:',
|
||||
code: 'ip=\'192.168.10.53\''
|
||||
},
|
||||
{
|
||||
zhPurpose: '通过google.com查询domain实体：',
|
||||
enPurpose: 'Search entity of domain by google.com：',
|
||||
code: 'domain=\'google.com\''
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'IN',
|
||||
syntax: 'in',
|
||||
primaryKey: 'IN',
|
||||
zhDescription: '搜索指定字段的值是多个指定值之一的实体。',
|
||||
enDescription: 'Search for entities where the value of a specified field is one of multiple specified values.',
|
||||
example: [
|
||||
{
|
||||
zhPurpose: '通过192.168.10.53 或 192.168.10.54查询ip实体：',
|
||||
enPurpose: 'Search entity by 192.168.10.53 or 192.168.10.54：',
|
||||
code: 'ip in (\'192.168.10.53\', \'192.168.10.54\')'
|
||||
},
|
||||
{
|
||||
zhPurpose: '通过appName1 或 appName2查询app实体:',
|
||||
enPurpose: 'Search entity by appName1 or appName2:',
|
||||
code: 'app in (\'appName1\', \'appName2\')'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'LIKE',
|
||||
syntax: 'like',
|
||||
primaryKey: 'LIKE',
|
||||
zhDescription: '搜索使用通配符搜索包含搜索字段的值的实体。此运算符与字符串字段一起使用。',
|
||||
enDescription: 'Search for entities where use wildcard searches for value that contain search fields. This operator is used with array fields.',
|
||||
example: [
|
||||
{
|
||||
zhPurpose: '通过google.com查询domain实体:',
|
||||
enPurpose: 'Search entity of domain by google.com:',
|
||||
code: 'domain like \'%google.com\''
|
||||
},
|
||||
{
|
||||
zhPurpose: '通过appName查询app实体:',
|
||||
enPurpose: 'Search entity of app by appName:',
|
||||
code: 'app like \'%appName%\''
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'HAS',
|
||||
syntax: 'has',
|
||||
primaryKey: 'HAS',
|
||||
zhDescription: '搜索指定字段的值是指定值之一的实体。此运算符与数组字段一起使用。',
|
||||
enDescription: 'Search for entities where the values of a specified field is one of specified value. This operator is used with array fields.',
|
||||
example: [
|
||||
{
|
||||
zhPurpose: '通过ADNS查询tag实体:',
|
||||
enPurpose: 'Search entity of tag by ADNS:',
|
||||
code: 'has(tag,\'ADNS\')'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
export const operatorList = renderData
|
||||
|
||||
function main () {
|
||||
const operatorTips = {}
|
||||
const language = localStorage.getItem(storageKey.language) || EN
|
||||
renderData.forEach((item, index) => {
|
||||
const data = item // 这是个闭包
|
||||
operatorTips[item.primaryKey] = {
|
||||
name: item.name,
|
||||
syntax: item.syntax,
|
||||
type: 'Operators',
|
||||
description () {
|
||||
return (<div className="operator-tips">
|
||||
<div class='default-tips-header'>{data.name}</div>
|
||||
<div class='default-tips-title'>{i18n.global.t('overall.syntax')}: <span>{data.syntax}</span></div>
|
||||
<div class='default-tips-title'>{i18n.global.t('overall.remark')}: </div>
|
||||
<p class='show-hint-tips__p'> {language === ZH ? data.zhDescription : data.enDescription}</p>
|
||||
<div class='default-tips-title'>{i18n.global.t('overall.examples')}: </div>
|
||||
<ul style="padding-left: 0;">
|
||||
{item.example.map(v => {
|
||||
return <li>
|
||||
<span>{language === ZH ? v.zhPurpose : v.enPurpose}</span>
|
||||
<code>{v.code}</code>
|
||||
</li>
|
||||
})}
|
||||
</ul>
|
||||
</div>)
|
||||
}
|
||||
}
|
||||
})
|
||||
return operatorTips
|
||||
}
|
||||
|
||||
const operatorTips = main()
|
||||
export default operatorTips
|
||||
@@ -1,97 +0,0 @@
|
||||
var renderData = [
|
||||
{
|
||||
name: 'FROM',
|
||||
syntax: `FROM [db.]table |$log_type`,
|
||||
description: {
|
||||
title: `The table name of logs. If you type $log_type, the variable value is the current table name of logs.`
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'SELECT',
|
||||
syntax: `Optional. The selected columns(also known as dimensions and metrics).`,
|
||||
description: {
|
||||
title: '可选，获取列',
|
||||
list: [
|
||||
`aggregate_function(field) - Aggregate functions, default is count.`,
|
||||
`as field - Use as to specify a aliases for a field or expression.`
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'GROUP BY',
|
||||
syntax: `GROUP BY <field-list>`,
|
||||
description: {
|
||||
title: 'Aggregate data. GROUP BY clause switches the SELECT query into an aggregation mode：',
|
||||
list: [
|
||||
`The list of fields known as "grouping key", while each individual expression be referred to as a "key expression".`,
|
||||
`All the expressions in the SELECT, HAVING and ORDER BY , must be "key expression" or on aggregate functions.`,
|
||||
`The result of aggregating SELECT query will return unique values of "grouping key" in log type.`
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'HAVING',
|
||||
syntax: `HAVING <expression-list>`,
|
||||
description: {
|
||||
title: `Optional. HAVING clause filtering the aggregation results retrieved by GROUP BY. It is difference is that WHERE is performed before aggregation, while HAVING is performed after it.
|
||||
Note: HAVING can't be performed if GROUP BY is not performed.`
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'LIMIT',
|
||||
syntax: `LIMIT [n, ]m`,
|
||||
description: {
|
||||
title: `Select the m rows from the aggregate results after skipping the first n rows. Default is 10 rows.`
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'ORDER BY',
|
||||
syntax: `ORDER BY <sort-field> [ASC|DESC]`,
|
||||
description: {
|
||||
title: `Sort all of the results by the specified fields.`
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'WHERE',
|
||||
syntax: `where $filter [and <expression-list>]`,
|
||||
description: {
|
||||
title: `Filter the data.`,
|
||||
list: [
|
||||
`$filter - Default global filter clause. Include Time period, Vsys ID, and other expressions, etc`,
|
||||
`and <expression-list> - filter clauses`
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
export const sqlList = renderData
|
||||
|
||||
function main () {
|
||||
var sqlTips = {}
|
||||
renderData.forEach((item, index) => {
|
||||
var data = item // 这是个闭包
|
||||
sqlTips[item.name] = {
|
||||
name: item.name,
|
||||
syntax: item.syntax,
|
||||
type: 'sql',
|
||||
description () {
|
||||
return (<div className="sql-tips">
|
||||
<h2>{data.name}</h2>
|
||||
<h3>Syntax: <span>{data.syntax}</span></h3>
|
||||
<h3> Description: </h3>
|
||||
<p> {data.description.title}</p>
|
||||
{
|
||||
data.description.list && <ul>
|
||||
{data.description.list.map(v => {
|
||||
return <li>{v} </li>
|
||||
})}
|
||||
</ul>
|
||||
}
|
||||
</div>)
|
||||
}
|
||||
}
|
||||
})
|
||||
return sqlTips
|
||||
}
|
||||
|
||||
var sqlTips = main()
|
||||
export default sqlTips
|
||||
@@ -1,48 +0,0 @@
|
||||
var renderData = [
|
||||
{
|
||||
name: '$LOG_TYPE',
|
||||
description: 'A variable is a symbolic representation of data that enables you to access a value without having to enter it manually wherever you need it. You can use $ to reference variables throughout Advanced Search. ',
|
||||
details () {
|
||||
// 支持jsx 嵌套写法,万一测试要关键字加重呢
|
||||
return <div>
|
||||
$log_type: The table name of logs.
|
||||
</div>
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '$FILTER',
|
||||
description: 'A variable is a symbolic representation of data that enables you to access a value without having to enter it manually wherever you need it. You can use $ to reference variables throughout Advanced Search. ',
|
||||
details () {
|
||||
// 支持jsx 嵌套写法,万一测试要关键字加重呢
|
||||
return <div>
|
||||
$filter: The default filter clauses. such as time period, Vsys ID, and other default expressions, etc.
|
||||
</div>
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
function main () {
|
||||
const varTips = {}
|
||||
renderData.forEach((item, index) => {
|
||||
const data = item // 这是个闭包
|
||||
varTips[item.name] = {
|
||||
name: item.name,
|
||||
type: 'Variables',
|
||||
description () {
|
||||
return (<div className="var-tips">
|
||||
<h2>{data.name}</h2>
|
||||
<h3> Description: </h3>
|
||||
<p> {data.description}</p>
|
||||
<h3> Details: </h3>
|
||||
{Object.prototype.toString.call(data.details) === '[object Function]' ?
|
||||
<renderer renderFun={data.details}></renderer> : <p>{data.details} </p>}
|
||||
</div>)
|
||||
}
|
||||
}
|
||||
})
|
||||
return varTips
|
||||
}
|
||||
|
||||
export const varList = renderData
|
||||
const varTips = main()
|
||||
export default varTips
|
||||
@@ -1,129 +0,0 @@
|
||||
import 'codemirror/lib/codemirror.css'
|
||||
import 'codemirror/theme/eclipse.css'
|
||||
import 'codemirror/mode/sql/sql'
|
||||
|
||||
import 'codemirror/theme/ambiance.css'
|
||||
// import 'codemirror/addon/hint/show-hint.js'
|
||||
import 'codemirror/addon/hint/show-hint.css'
|
||||
import 'codemirror/addon/display/placeholder'
|
||||
|
||||
import 'codemirror/addon/hint/anyword-hint' // 关键字
|
||||
import 'codemirror/addon/comment/comment'
|
||||
import 'codemirror/keymap/sublime'
|
||||
import 'codemirror/addon/edit/closebrackets'
|
||||
import CodeMirror from 'codemirror'
|
||||
import createMode from '@/components/advancedSearch/showhint/TextSearch/sql'
|
||||
import createHint from '@/components/advancedSearch/showhint/TextSearch/createHint'
|
||||
import { functionList } from '@/components/advancedSearch/showhint/const/functionTips'
|
||||
import { cloneDeep } from 'lodash'
|
||||
|
||||
const codeMirrorMixins = {
|
||||
data () {
|
||||
return {
|
||||
CodeMirror,
|
||||
initData: {},
|
||||
hintSearch: '',
|
||||
hintList: [],
|
||||
hintParams: {},
|
||||
completion: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
initShowHint () {
|
||||
const dataset = this.dataset
|
||||
createMode(CodeMirror, {
|
||||
dataset,
|
||||
modehook: this.modehook
|
||||
})
|
||||
|
||||
const hintHook = this.manualHinthook
|
||||
const vm = this
|
||||
createHint('manual', CodeMirror, {
|
||||
dataset,
|
||||
hinthook: hintHook,
|
||||
callback (completion, defaultOptions) {
|
||||
vm.completion = completion.completion
|
||||
},
|
||||
keyboardUp () {
|
||||
// 键盘向上
|
||||
vm.hintVm?.handleUp()
|
||||
},
|
||||
keyboardDown () {
|
||||
// 键盘向下
|
||||
vm.hintVm?.handleDown()
|
||||
},
|
||||
keyboardEnter () {
|
||||
if (!vm.hintVisible) {
|
||||
return
|
||||
}
|
||||
// 回车 选中值
|
||||
vm.hintVm?.triggerSelect()
|
||||
}
|
||||
})
|
||||
},
|
||||
manualHinthook (result, params, manualParams) {
|
||||
this.hintParams = manualParams
|
||||
this.hintSearch = manualParams.search
|
||||
|
||||
this.hintList = []
|
||||
const list = this.hinthook(result, params)
|
||||
this.hintList = cloneDeep(list)
|
||||
return list
|
||||
},
|
||||
hinthook (result, { search, keywords, leftpart, rightpart }) {
|
||||
if (leftpart) {
|
||||
const options = this.matchOptions(leftpart)
|
||||
if (options) {
|
||||
return options
|
||||
}
|
||||
}
|
||||
result = this.dataset.getHintList(search, null, null, this.value)
|
||||
return result
|
||||
},
|
||||
matchOptions (leftpart) {
|
||||
// 用于匹配下拉选
|
||||
|
||||
const fieldInfo = this.dataset.getFieldInfo(leftpart)
|
||||
if (fieldInfo && fieldInfo.options) {
|
||||
const options = []
|
||||
options.push(
|
||||
{
|
||||
type: 'abstract',
|
||||
text: '',
|
||||
displayText: 'Options',
|
||||
className: 'divider hint-title'
|
||||
}
|
||||
)
|
||||
const fieldOptions = cloneDeep(fieldInfo.options)
|
||||
// eslint-disable-next-line no-return-assign
|
||||
fieldOptions.forEach(item => item.displayText = `${item.displayText}(${item.text})`)
|
||||
options.push(...fieldOptions)
|
||||
return options
|
||||
}
|
||||
return null
|
||||
},
|
||||
modehook (CodeMirror, set, { client, keywords, builtin, hookVar }) {
|
||||
// 自定义 过滤器类型
|
||||
const clientWords = this.dataset.getClientwords()
|
||||
let clientWordsStr = ''
|
||||
clientWordsStr = clientWords.join(' ')
|
||||
const dateFuns = functionList.map(v => v.name.toLowerCase())
|
||||
CodeMirror.defineMIME('text/x-filter', {
|
||||
name: 'sql',
|
||||
client: set(clientWordsStr + ' ' + client), // 客户端解析指令
|
||||
builtin: set(builtin + ' like in not empty notempty has bitand'),
|
||||
keywords: set(keywords + ' and or ' + dateFuns.join(' ')),
|
||||
|
||||
atoms: set('false true null unknown'),
|
||||
operatorChars: /^[*+\-%<>!=&|^]/,
|
||||
dateSQL: set('date time timestamp '),
|
||||
support: set('ODBCdotTable doubleQuote binaryNumber hexNumber'), // 支持的数据编码 ODBC double 二进制 16进制
|
||||
hooks: {
|
||||
$: hookVar
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default codeMirrorMixins
|
||||
@@ -1,288 +0,0 @@
|
||||
// 改js 用户获取初始化的 SchemaData
|
||||
import { Scheme } from './service/Scheme'
|
||||
import i18n from '@/i18n'
|
||||
|
||||
export class Dataset {
|
||||
constructor ({ operatesList, filtersList, operatesDic, funcDic, operatorManual, fields, doc }) {
|
||||
this.sourceData = {}
|
||||
this.sourceData = this.keepSourcedata(operatesList, funcDic, filtersList, operatesDic, operatorManual, fields, doc)
|
||||
// 存储格式化的数据
|
||||
this.hintData = {}
|
||||
this.hintData.operatesList = this.formatOperates(operatesList)
|
||||
this.hintData.filtersList = this.formatFilters(filtersList)
|
||||
}
|
||||
|
||||
getHintList (keyword, sqlKeywordsOptions = null, callback, completeFilter) {
|
||||
// 获取提示列表
|
||||
const operatesList = this.matchFilter(sqlKeywordsOptions || this.hintData.operatesList || [], keyword)
|
||||
const filtersList = this.matchFilter(this.hintData.filtersList || [], keyword)
|
||||
|
||||
const hintList = [...operatesList, ...filtersList]
|
||||
callback && callback(operatesList, filtersList, hintList)
|
||||
return hintList
|
||||
}
|
||||
|
||||
getClientwords () {
|
||||
// 获取高亮的 可查询的 字段
|
||||
const filtersList = this.sourceData.filtersList || []
|
||||
const clientwords = []
|
||||
filtersList.forEach((item) => {
|
||||
// 可以在这里增加 过滤逻辑
|
||||
// todo client由name改为label
|
||||
// clientwords.push(item.name)
|
||||
clientwords.push(item.label)
|
||||
})
|
||||
return clientwords
|
||||
}
|
||||
|
||||
matchFilter (list, keyword) {
|
||||
// 用于 匹配过滤器
|
||||
const results = list.filter((item) => {
|
||||
if (item.type === 'abstract') {
|
||||
return true
|
||||
}
|
||||
let displayTextLow = item.displayText + '' ? (item.displayText + '').toLowerCase() : item.displayText
|
||||
let keywordLow = keyword + '' ? (keyword + '').toLowerCase() : keyword
|
||||
|
||||
const reg = /[ '"]/ig
|
||||
displayTextLow = (displayTextLow + '').replace(reg, '').toLowerCase()
|
||||
keywordLow = (keywordLow + '').replace(reg, '').toLowerCase()
|
||||
|
||||
return displayTextLow && displayTextLow.indexOf(keywordLow) !== -1
|
||||
})
|
||||
const hasEnable = results.some((item) => {
|
||||
return item.type !== 'abstract'
|
||||
})
|
||||
return hasEnable ? results : []
|
||||
}
|
||||
|
||||
formatFilters (list) {
|
||||
// 格式化 过滤器
|
||||
if (!(list && list.length > 0)) {
|
||||
return
|
||||
}
|
||||
const tempTitle = {
|
||||
type: 'abstract',
|
||||
text: '',
|
||||
// displayText: "Filter",
|
||||
displayText: i18n.global.t('overall.fields'),
|
||||
className: 'divider hint-title',
|
||||
hint (cm, callback, options) {
|
||||
}
|
||||
}
|
||||
|
||||
const results = list.map((item) => {
|
||||
return {
|
||||
// text: item.name,
|
||||
// displayText: `${item.label}(${item.name})`,
|
||||
text: item.label,
|
||||
displayText: `${item.label}`,
|
||||
className: 'filter-item el-dropdown-menu__item relative-item'
|
||||
}
|
||||
})
|
||||
results.unshift(tempTitle)
|
||||
return results
|
||||
}
|
||||
|
||||
formatOperates (list) {
|
||||
// 格式化 操作符
|
||||
if (!(list && list.length > 0)) {
|
||||
return
|
||||
}
|
||||
const tempTitle = {
|
||||
type: 'abstract',
|
||||
text: '',
|
||||
// displayText: "Operator",
|
||||
displayText: i18n.global.t('overall.keyword'),
|
||||
className: 'divider hint-title'
|
||||
// hint(cm, callback, options) {}
|
||||
}
|
||||
|
||||
const results = list.map((item) => {
|
||||
return {
|
||||
text: item.name,
|
||||
displayText: item.name,
|
||||
className: 'operates-item el-dropdown-menu__item relative-item'
|
||||
// hint(cm, callback, options) {}
|
||||
}
|
||||
})
|
||||
results.unshift(tempTitle)
|
||||
return results
|
||||
}
|
||||
|
||||
keepSourcedata (operatesList, funcDic, filtersList, operatesDic, operatorManual, fields, doc) {
|
||||
// 初始化原始数据 方法(存放的是 全量原始数据)
|
||||
const sourceData = {}
|
||||
// 支持的逻辑运算符
|
||||
sourceData.operatesList = operatesList || []
|
||||
// 过滤器列表
|
||||
sourceData.filtersList = filtersList || []
|
||||
sourceData.operatesDic = operatesDic || []
|
||||
sourceData.operatorReference = doc?.functions?.operator || []
|
||||
sourceData.operatorManual = operatorManual || []
|
||||
|
||||
// 添加全量数据
|
||||
sourceData.fields = fields || []
|
||||
sourceData.doc = doc || {}
|
||||
|
||||
// 存储function 的原始变量
|
||||
sourceData.funcDic = funcDic || []
|
||||
const aggregation = doc?.functions?.aggregation || []
|
||||
const dateFuns = doc?.functions?.date || []
|
||||
sourceData.funcReference = [...dateFuns, ...aggregation]
|
||||
|
||||
return sourceData
|
||||
}
|
||||
|
||||
matchHightlight (keyWord) {
|
||||
// 匹配高亮
|
||||
// var reg = new RegExp(keyWord, 'i')
|
||||
let matchFlag = false
|
||||
// reg.test(val)
|
||||
matchFlag = this.sourceData.operatesList.some((item) => {
|
||||
return keyWord === item.name
|
||||
})
|
||||
if (matchFlag) {
|
||||
return 'keyword'
|
||||
}
|
||||
if (matchFlag) {
|
||||
return 'variable-2'
|
||||
}
|
||||
matchFlag = this.sourceData.filtersList.some((item) => {
|
||||
return keyWord === item.name
|
||||
})
|
||||
if (matchFlag) {
|
||||
return 'comment'
|
||||
}
|
||||
matchFlag = this.sourceData.specialCharacters.some((item) => {
|
||||
return keyWord === item.name
|
||||
})
|
||||
if (matchFlag) {
|
||||
return 'atom'
|
||||
}
|
||||
}
|
||||
|
||||
getOperates (type, item) {
|
||||
// 获取 当前类型支持的操作符
|
||||
let operatorFunctions = ''
|
||||
if (item && item.doc && item.doc.constraints && item.doc.constraints.operator_functions) {
|
||||
operatorFunctions = item.doc.constraints.operator_functions
|
||||
} else {
|
||||
const functions = this.sourceData.operatesDic.find(item => {
|
||||
return item.type === type
|
||||
})
|
||||
// eslint-disable-next-line no-mixed-operators
|
||||
operatorFunctions = functions && functions.functions || ''
|
||||
}
|
||||
const funList = operatorFunctions.split(',')
|
||||
return funList.map((item) => {
|
||||
return {
|
||||
text: item,
|
||||
displayText: item,
|
||||
className: 'filter-item el-dropdown-menu__item relative-item'
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
getFunctions (type, item) {
|
||||
// 获取 当前类型支持的操作符
|
||||
let functionsInfo = ''
|
||||
// 这里肯定有问题
|
||||
if (item && item.doc && item.doc.constraints && item.doc.constraints.aggregation_functions) {
|
||||
functionsInfo = item.doc.constraints.aggregation_functions
|
||||
} else {
|
||||
const functions = this.sourceData.funcDic.find(item => {
|
||||
return item.type === type
|
||||
})
|
||||
functionsInfo = (functions && functions.functions) || ''
|
||||
}
|
||||
|
||||
const funList = functionsInfo.split(',')
|
||||
let result = []
|
||||
result = funList.map((item) => {
|
||||
return {
|
||||
text: item,
|
||||
displayText: item,
|
||||
className: 'filter-item el-dropdown-menu__item relative-item'
|
||||
}
|
||||
})
|
||||
return result
|
||||
}
|
||||
|
||||
getFieldInfo (keywords) {
|
||||
// 获取字段的相关信息 1.下拉数据是需要获取的 2.支持的运算符 是不是需要呢 ???
|
||||
if (!keywords || !keywords.toLowerCase) {
|
||||
return
|
||||
}
|
||||
keywords = (keywords.trim && keywords.trim()) || keywords
|
||||
const fieldInfo = {}
|
||||
const matchItem = this.sourceData.filtersList.find((item) => {
|
||||
// const itemName = item.name && item.name.toLowerCase()
|
||||
// 左侧面板的options值，即枚举的值
|
||||
const itemName = item.label && item.label.toLowerCase()
|
||||
return keywords.toLowerCase() === itemName
|
||||
})
|
||||
if (!matchItem) {
|
||||
return null
|
||||
}
|
||||
// 存在下拉值 候选项
|
||||
if (matchItem && matchItem.doc && matchItem.doc.data) {
|
||||
fieldInfo.options = matchItem.doc.data.map(item => {
|
||||
return {
|
||||
text: matchItem.type === 'string' ? `'${item.code}'` : item.code,
|
||||
displayText: item.value,
|
||||
className: 'filter-item el-dropdown-menu__item relative-item'
|
||||
}
|
||||
})
|
||||
fieldInfo.operateType = 'select'
|
||||
}
|
||||
// 这是一个 远程下拉值
|
||||
if (matchItem && matchItem.doc && matchItem.doc.dict_location) {
|
||||
fieldInfo.operateType = 'remoteSelect'
|
||||
}
|
||||
|
||||
fieldInfo._matchItem = matchItem
|
||||
fieldInfo.name = matchItem.name
|
||||
fieldInfo.type = matchItem.type
|
||||
fieldInfo.label = matchItem.label
|
||||
return fieldInfo
|
||||
}
|
||||
|
||||
getFieldList () {
|
||||
// 获取字段列表
|
||||
const fieldList = (this.sourceData && this.sourceData.filtersList) || []
|
||||
return fieldList
|
||||
}
|
||||
|
||||
getOperatorItem (code) {
|
||||
const operators = this.sourceData.operatorManual || []
|
||||
const matchItem = operators.find(item => {
|
||||
return item.name === code.trim()
|
||||
})
|
||||
if (matchItem && !matchItem.label) {
|
||||
matchItem.label = matchItem.name
|
||||
}
|
||||
return matchItem || null
|
||||
}
|
||||
|
||||
dispose () {
|
||||
this.sourceData = null
|
||||
this.hintData.operatesList = null
|
||||
this.hintData.filtersList = null
|
||||
this.hintData = null
|
||||
}
|
||||
}
|
||||
|
||||
// 获取数据集
|
||||
export function getDataset (component, params, list) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const schemeInstance = new Scheme(component, params, list)
|
||||
schemeInstance.getFormatedData((schemeData) => {
|
||||
const dataset = new Dataset(schemeData)
|
||||
resolve(dataset, () => {
|
||||
schemeInstance.dispose()
|
||||
dataset.dispose()
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user