Merge branch 'dev-3.3' of https://git.mesalab.cn/nezha/nezha-fronted into dev-3.4
# Conflicts: # nezha-fronted/src/components/common/table/settings/userTable.vue
This commit is contained in:
zhangyu
1
.gitignore
vendored
1
.gitignore
vendored
@@ -17,3 +17,4 @@ nezha-fronted/src/router/mergeTable.js
|
|||||||
nezha-fronted/src/components/page/dashboard/testData.js
|
nezha-fronted/src/components/page/dashboard/testData.js
|
||||||
nezha-fronted/src/components/common/rightBox/tempRoghtBox.vue
|
nezha-fronted/src/components/common/rightBox/tempRoghtBox.vue
|
||||||
nezha-fronted/exportHtml/
|
nezha-fronted/exportHtml/
|
||||||
|
nezha-fronted/src/a.txt
|
||||||
|
|||||||
@@ -37,9 +37,15 @@ dev_build:
|
|||||||
- echo "npm install ..."
|
- echo "npm install ..."
|
||||||
- npm install --registry=http://registry.npmmirror.com
|
- npm install --registry=http://registry.npmmirror.com
|
||||||
- echo "npm run build"
|
- echo "npm run build"
|
||||||
- npm run build
|
|
||||||
|
|
||||||
|
# 编译 上传模板
|
||||||
|
- npm run build:html
|
||||||
|
- mc alias set nz $MINIO_HOST $MINIO_USER $MINIO_PWD
|
||||||
|
- mc cp dist/index.html nz/depends/template/snapshot_template.html
|
||||||
|
|
||||||
|
- npm run build
|
||||||
- cd /builds/nezha/nezha-fronted/nezha-fronted/dist
|
- cd /builds/nezha/nezha-fronted/nezha-fronted/dist
|
||||||
|
- mc cp nz/depends/template/snapshot_template.html ./snapshot_template.html
|
||||||
- rm -rf nz-gui*.zip
|
- rm -rf nz-gui*.zip
|
||||||
- export FILE_NAME=nz-gui-$CI_COMMIT_REF_NAME-$CI_COMMIT_SHORT_SHA.zip
|
- export FILE_NAME=nz-gui-$CI_COMMIT_REF_NAME-$CI_COMMIT_SHORT_SHA.zip
|
||||||
# 生成 git log 日志文件
|
# 生成 git log 日志文件
|
||||||
@@ -50,7 +56,6 @@ dev_build:
|
|||||||
- zip -q -r $FILE_NAME ./*
|
- zip -q -r $FILE_NAME ./*
|
||||||
|
|
||||||
# 将 dist zip 上传到 minio
|
# 将 dist zip 上传到 minio
|
||||||
- mc alias set nz $MINIO_HOST $MINIO_USER $MINIO_PWD
|
|
||||||
- mc cp $FILE_NAME nz/ci-cd/nz-gui/$FILE_NAME
|
- mc cp $FILE_NAME nz/ci-cd/nz-gui/$FILE_NAME
|
||||||
- mc cp $FILE_NAME nz/ci-cd/nz-gui/nz-gui-$CI_COMMIT_REF_NAME-latest.zip
|
- mc cp $FILE_NAME nz/ci-cd/nz-gui/nz-gui-$CI_COMMIT_REF_NAME-latest.zip
|
||||||
artifacts:
|
artifacts:
|
||||||
@@ -78,11 +83,17 @@ rel_build:
|
|||||||
- cd nezha-fronted
|
- cd nezha-fronted
|
||||||
- npm install --registry=http://registry.npmmirror.com
|
- npm install --registry=http://registry.npmmirror.com
|
||||||
- echo "npm run build"
|
- echo "npm run build"
|
||||||
|
|
||||||
|
- npm run build:html
|
||||||
|
- mc alias set nz $MINIO_HOST $MINIO_USER $MINIO_PWD
|
||||||
|
- mc cp dist/index.html nz/depends/template/snapshot_template.html
|
||||||
|
|
||||||
- npm run build
|
- npm run build
|
||||||
- cd /builds/nezha/nezha-fronted/nezha-fronted/dist
|
- cd /builds/nezha/nezha-fronted/nezha-fronted/dist
|
||||||
|
- mc cp nz/depends/template/snapshot_template.html ./snapshot_template.html
|
||||||
|
- zip -m nz-gui*.zip ./snapshot_template.html
|
||||||
- mv nz-gui*.zip nz-gui-$CI_COMMIT_SHORT_SHA.zip
|
- mv nz-gui*.zip nz-gui-$CI_COMMIT_SHORT_SHA.zip
|
||||||
- md5sum nz-gui-$CI_COMMIT_SHORT_SHA.zip > nz-gui-$CI_COMMIT_SHORT_SHA.zip.md5sum.txt
|
- md5sum nz-gui-$CI_COMMIT_SHORT_SHA.zip > nz-gui-$CI_COMMIT_SHORT_SHA.zip.md5sum.txt
|
||||||
- mc alias set nz $MINIO_HOST $MINIO_USER $MINIO_PWD
|
|
||||||
- mc cp nz-gui-$CI_COMMIT_SHORT_SHA.zip nz/release/nz-gui/nz-gui-$CI_COMMIT_SHORT_SHA.zip
|
- mc cp nz-gui-$CI_COMMIT_SHORT_SHA.zip nz/release/nz-gui/nz-gui-$CI_COMMIT_SHORT_SHA.zip
|
||||||
- mc cp nz-gui-$CI_COMMIT_SHORT_SHA.zip.md5sum.txt nz/release/nz-gui/nz-gui-$CI_COMMIT_SHORT_SHA.zip.md5sum.txt
|
- mc cp nz-gui-$CI_COMMIT_SHORT_SHA.zip.md5sum.txt nz/release/nz-gui/nz-gui-$CI_COMMIT_SHORT_SHA.zip.md5sum.txt
|
||||||
artifacts:
|
artifacts:
|
||||||
|
|||||||
@@ -104,7 +104,6 @@ if (arg === 'html' || devStart === 'dev:html') {
|
|||||||
baseConfig.module.rules.unshift({
|
baseConfig.module.rules.unshift({
|
||||||
include: [
|
include: [
|
||||||
resolve('src/entrance/app'),
|
resolve('src/entrance/app'),
|
||||||
resolve('src/components/common/alert'),
|
|
||||||
resolve('src/components/common/bottomBox'),
|
resolve('src/components/common/bottomBox'),
|
||||||
resolve('src/components/common/detailView'),
|
resolve('src/components/common/detailView'),
|
||||||
resolve('src/components/common/elSelect'),
|
resolve('src/components/common/elSelect'),
|
||||||
|
|||||||
@@ -9,7 +9,7 @@ const CopyWebpackPlugin = require('copy-webpack-plugin')
|
|||||||
const HtmlWebpackPlugin = require('html-webpack-plugin')
|
const HtmlWebpackPlugin = require('html-webpack-plugin')
|
||||||
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
|
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
|
||||||
const portfinder = require('portfinder')
|
const portfinder = require('portfinder')
|
||||||
|
const intro = require('intro.js')
|
||||||
const HOST = process.env.HOST
|
const HOST = process.env.HOST
|
||||||
const PORT = process.env.PORT && Number(process.env.PORT)
|
const PORT = process.env.PORT && Number(process.env.PORT)
|
||||||
const devStart = process.env.npm_lifecycle_event
|
const devStart = process.env.npm_lifecycle_event
|
||||||
@@ -49,6 +49,9 @@ devWebpackConfig = merge(baseWebpackConfig, {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
plugins: [
|
plugins: [
|
||||||
|
new webpack.ProvidePlugin({
|
||||||
|
introJs: ['intro.js']
|
||||||
|
}),
|
||||||
new webpack.DefinePlugin({
|
new webpack.DefinePlugin({
|
||||||
'process.env': require('../config/dev.env')
|
'process.env': require('../config/dev.env')
|
||||||
}),
|
}),
|
||||||
|
|||||||
@@ -49,6 +49,9 @@ if (arg === 'html') {
|
|||||||
chunkFilename: utils.assetsPath('js/[name].[chunkhash].js')
|
chunkFilename: utils.assetsPath('js/[name].[chunkhash].js')
|
||||||
},
|
},
|
||||||
plugins: [
|
plugins: [
|
||||||
|
new webpack.ProvidePlugin({
|
||||||
|
introJs: ['intro.js'],
|
||||||
|
}),
|
||||||
/* new GenerateAssetPlugin({
|
/* new GenerateAssetPlugin({
|
||||||
filename: 'config.json',
|
filename: 'config.json',
|
||||||
fn: (compilation, cb) => {
|
fn: (compilation, cb) => {
|
||||||
@@ -198,6 +201,9 @@ if (arg === 'html') {
|
|||||||
extraFiles: []
|
extraFiles: []
|
||||||
}), */
|
}), */
|
||||||
// http://vuejs.github.io/vue-loader/en/workflow/production.html
|
// http://vuejs.github.io/vue-loader/en/workflow/production.html
|
||||||
|
new webpack.ProvidePlugin({
|
||||||
|
introJs: ['intro.js']
|
||||||
|
}),
|
||||||
new webpack.DefinePlugin({
|
new webpack.DefinePlugin({
|
||||||
'process.env': env
|
'process.env': env
|
||||||
}),
|
}),
|
||||||
@@ -312,7 +318,8 @@ if (process.env.NODE_ENV == 'development') {
|
|||||||
onEnd: [
|
onEnd: [
|
||||||
{
|
{
|
||||||
move: [
|
move: [
|
||||||
{ source: path.join(__dirname, '../dist', '/static/config.json'), destination: path.join(__dirname, '../dist/config.json') }
|
{ source: path.join(__dirname, '../dist', '/static/config.json'), destination: path.join(__dirname, '../dist/config.json') },
|
||||||
|
// { source: path.join(__dirname, '../exportHtml', '/snapshot_template.html'), destination: path.join(__dirname, '../dist/snapshot_template.html') }
|
||||||
|
|
||||||
],
|
],
|
||||||
mkdir: [
|
mkdir: [
|
||||||
@@ -345,7 +352,8 @@ if (process.env.NODE_ENV == 'development') {
|
|||||||
onEnd: [
|
onEnd: [
|
||||||
{
|
{
|
||||||
move: [
|
move: [
|
||||||
{ source: path.join(__dirname, '../dist', '/static/config.json'), destination: path.join(__dirname, '../dist/config.json') }
|
{ source: path.join(__dirname, '../dist', '/static/config.json'), destination: path.join(__dirname, '../dist/config.json') },
|
||||||
|
// { source: path.join(__dirname, '../exportHtml', '/snapshot_template.html'), destination: path.join(__dirname, '../dist/snapshot_template.html') }
|
||||||
|
|
||||||
],
|
],
|
||||||
mkdir: [
|
mkdir: [
|
||||||
@@ -368,12 +376,12 @@ if (process.env.NODE_ENV == 'development') {
|
|||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
if (arg === 'html') {
|
// if (arg === 'html') {
|
||||||
plugin.onStart[0].delete.push(path.join(__dirname, '../exportHtml/'))
|
// plugin.onStart[0].delete.push(path.join(__dirname, '../exportHtml/'))
|
||||||
plugin.onEnd[0].copy.push(
|
// plugin.onEnd[0].copy.push(
|
||||||
{ source: path.join(__dirname, '../dist', '/index.html'), destination: path.join(__dirname, '../exportHtml', '/index.html') }
|
// { source: path.join(__dirname, '../dist', '/index.html'), destination: path.join(__dirname, '../exportHtml', '/snapshot_template.html') }
|
||||||
)
|
// )
|
||||||
}
|
// }
|
||||||
webpackConfig.plugins.push(
|
webpackConfig.plugins.push(
|
||||||
new fileManagerPlugin(plugin)
|
new fileManagerPlugin(plugin)
|
||||||
)
|
)
|
||||||
|
|||||||
10
nezha-fronted/package-lock.json
generated
10
nezha-fronted/package-lock.json
generated
@@ -9097,6 +9097,11 @@
|
|||||||
"p-is-promise": "^1.1.0"
|
"p-is-promise": "^1.1.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"intro.js": {
|
||||||
|
"version": "5.1.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/intro.js/-/intro.js-5.1.0.tgz",
|
||||||
|
"integrity": "sha512-zwWl/duTh00eeNcZRU4o4/xxloNYPFKs4n4lMRDNx59jZr+qRI0jSOnzqYMOuVftD4beGrmxBHz4k8qp9/dCMA=="
|
||||||
|
},
|
||||||
"invariant": {
|
"invariant": {
|
||||||
"version": "2.2.4",
|
"version": "2.2.4",
|
||||||
"resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
|
"resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
|
||||||
@@ -18584,6 +18589,11 @@
|
|||||||
"resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-8.15.1.tgz",
|
"resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-8.15.1.tgz",
|
||||||
"integrity": "sha512-GBbz8qYCu0U2LNu4IcuFLZiuyninG4k26knvhL7GZG5Ncp4RR2VKDEH6g8gQ6I+UUBCvH2MBQVPSdxWe4DBkPw=="
|
"integrity": "sha512-GBbz8qYCu0U2LNu4IcuFLZiuyninG4k26knvhL7GZG5Ncp4RR2VKDEH6g8gQ6I+UUBCvH2MBQVPSdxWe4DBkPw=="
|
||||||
},
|
},
|
||||||
|
"vue-introjs": {
|
||||||
|
"version": "1.3.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/vue-introjs/-/vue-introjs-1.3.2.tgz",
|
||||||
|
"integrity": "sha512-Bj27iGimO6VKr/Ngxs5hr/Fh8ONSHmvTUj2gh1f5CGZC5vfF1Vb5VyetjXiDdMXhLsqeGSIhac6SbVNHwUh9yQ=="
|
||||||
|
},
|
||||||
"vue-jest": {
|
"vue-jest": {
|
||||||
"version": "1.4.0",
|
"version": "1.4.0",
|
||||||
"resolved": "https://registry.npmjs.org/vue-jest/-/vue-jest-1.4.0.tgz",
|
"resolved": "https://registry.npmjs.org/vue-jest/-/vue-jest-1.4.0.tgz",
|
||||||
|
|||||||
@@ -8,7 +8,7 @@
|
|||||||
"dev": "node --max-old-space-size=10240 ./node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --progress --config build/webpack.dev.conf.js",
|
"dev": "node --max-old-space-size=10240 ./node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --progress --config build/webpack.dev.conf.js",
|
||||||
"dev:html": "node --max-old-space-size=10240 ./node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --progress --config build/webpack.dev.conf.js",
|
"dev:html": "node --max-old-space-size=10240 ./node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --progress --config build/webpack.dev.conf.js",
|
||||||
"start": "npm run dev",
|
"start": "npm run dev",
|
||||||
"build": "node build/build.js html && node build/build.js app",
|
"build": "node build/build.js app",
|
||||||
"build:html": "node build/build.js html",
|
"build:html": "node build/build.js html",
|
||||||
"lint": "eslint --fix --ext .js,.vue src",
|
"lint": "eslint --fix --ext .js,.vue src",
|
||||||
"unit": "jest --config test/unit/jest.conf.js --coverage"
|
"unit": "jest --config test/unit/jest.conf.js --coverage"
|
||||||
@@ -43,6 +43,7 @@
|
|||||||
"file-saver": "^2.0.2",
|
"file-saver": "^2.0.2",
|
||||||
"html-webpack-inline-source-plugin": "0.0.10",
|
"html-webpack-inline-source-plugin": "0.0.10",
|
||||||
"html2canvas": "^1.4.1",
|
"html2canvas": "^1.4.1",
|
||||||
|
"intro.js": "^5.1.0",
|
||||||
"jspdf": "^2.5.1",
|
"jspdf": "^2.5.1",
|
||||||
"jszip": "^3.9.1",
|
"jszip": "^3.9.1",
|
||||||
"leaflet": "^1.7.1",
|
"leaflet": "^1.7.1",
|
||||||
@@ -61,6 +62,7 @@
|
|||||||
"vue-draggable-resizable": "^2.3.0",
|
"vue-draggable-resizable": "^2.3.0",
|
||||||
"vue-grid-layout": "^2.3.12",
|
"vue-grid-layout": "^2.3.12",
|
||||||
"vue-i18n": "^8.15.1",
|
"vue-i18n": "^8.15.1",
|
||||||
|
"vue-introjs": "^1.3.2",
|
||||||
"vue-quill-editor": "^3.0.6",
|
"vue-quill-editor": "^3.0.6",
|
||||||
"vue-resource": "^1.5.1",
|
"vue-resource": "^1.5.1",
|
||||||
"vue-router": "^3.0.1",
|
"vue-router": "^3.0.1",
|
||||||
|
|||||||
@@ -220,9 +220,10 @@ td .nz-icon-gear:before{
|
|||||||
.time-no-data {
|
.time-no-data {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
color: $--color-text-secondary;
|
// color: $--color-text-secondary;
|
||||||
|
color: $--color-text-regular;
|
||||||
font-family: NotoSans !important;
|
font-family: NotoSans !important;
|
||||||
font-size: 12px !important;
|
font-size: 13px !important;
|
||||||
}
|
}
|
||||||
.el-tree {
|
.el-tree {
|
||||||
background-color: $--background-color-empty !important;
|
background-color: $--background-color-empty !important;
|
||||||
@@ -421,6 +422,14 @@ input, textarea {
|
|||||||
float: unset;
|
float: unset;
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
margin-left: 190px;
|
margin-left: 190px;
|
||||||
|
.message-next-continue{
|
||||||
|
color: $--color-text-primary;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
.message-next-content{
|
||||||
|
color: $--color-text-link;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.document-copy-block:hover i{
|
.document-copy-block:hover i{
|
||||||
|
|||||||
@@ -7,6 +7,21 @@
|
|||||||
.el-checkbox__input.is-checked .el-checkbox__inner {
|
.el-checkbox__input.is-checked .el-checkbox__inner {
|
||||||
background-color: $--color-primary !important;
|
background-color: $--color-primary !important;
|
||||||
}
|
}
|
||||||
|
.el-checkbox__input.is-checked.is-disabled .el-checkbox__inner{
|
||||||
|
background-color: $--background-color-empty !important;
|
||||||
|
border-color: $--border-color-base !important;
|
||||||
|
}
|
||||||
|
.el-checkbox__input.is-disabled .el-checkbox__inner{
|
||||||
|
background-color: $--background-color-empty !important;
|
||||||
|
border-color: $--border-color-base !important;
|
||||||
|
}
|
||||||
|
.el-checkbox__input.is-checked.is-disabled .el-checkbox__inner:hover{
|
||||||
|
border-color: $--border-color-base !important;
|
||||||
|
}
|
||||||
|
.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner::after {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
.el-checkbox__inner {
|
.el-checkbox__inner {
|
||||||
width: 16px !important;
|
width: 16px !important;
|
||||||
height: 16px !important;
|
height: 16px !important;
|
||||||
@@ -22,7 +37,7 @@
|
|||||||
|
|
||||||
.el-checkbox__inner, .el-input__inner {
|
.el-checkbox__inner, .el-input__inner {
|
||||||
border-color: $--checkbox-border-color;
|
border-color: $--checkbox-border-color;
|
||||||
background-color: $--background-color-empty;
|
background-color: $--background-color-empty !important;
|
||||||
}
|
}
|
||||||
.el-input__inner {
|
.el-input__inner {
|
||||||
border-color: $--border-color-light;
|
border-color: $--border-color-light;
|
||||||
|
|||||||
@@ -1,11 +1,5 @@
|
|||||||
// https://github.com/loadingio/css-spinner/tree/master/dist 从当前链接现在在 在tools.js 的myLoading 进行判断处理
|
// https://github.com/loadingio/css-spinner/tree/master/dist 从当前链接现在在 在tools.js 的myLoading 进行判断处理
|
||||||
// 高度 宽度 等细节 记得处理
|
// 高度 宽度 等细节 记得处理
|
||||||
.my-loading-parent--relative {
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
position: relative !important;
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
.my-loading-parent-icon {
|
.my-loading-parent-icon {
|
||||||
height: auto;
|
height: auto;
|
||||||
width: auto;
|
width: auto;
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
.right-box, .right-sub-box {
|
.right-box, .right-sub-box {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
position: fixed;
|
position: fixed !important;
|
||||||
right: 0;
|
right: 0;
|
||||||
top: 50px;
|
top: 50px;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|||||||
@@ -49,12 +49,10 @@
|
|||||||
.nz-icon-xingzhuang{
|
.nz-icon-xingzhuang{
|
||||||
color: $--color-text-regular;
|
color: $--color-text-regular;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transform:translateY(2px)
|
|
||||||
}
|
}
|
||||||
.nz-icon-a-xingzhuang2{
|
.nz-icon-a-xingzhuang2{
|
||||||
color:#FF9219 !important;
|
color:#FF9219 !important;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transform:translateY(2px) scale(1.2);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -209,7 +207,7 @@
|
|||||||
color: $--color-primary;
|
color: $--color-primary;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.mt-10.table-container.nz-table2 {
|
.mt-10.table-container.nz-table-list {
|
||||||
.el-table:not(.chart-table) {
|
.el-table:not(.chart-table) {
|
||||||
.gutter {
|
.gutter {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
@@ -222,7 +220,7 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
/* 上滑resize工具条--end */
|
/* 上滑resize工具条--end */
|
||||||
.nz-table2 {
|
.nz-table-list {
|
||||||
position: relative;
|
position: relative;
|
||||||
padding: 0 20px;
|
padding: 0 20px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@@ -234,7 +232,10 @@
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
border: 1px solid $--border-color-light;
|
border: 1px solid $--border-color-light;
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
|
.el-checkbox.is-disabled{
|
||||||
|
line-height: 1;
|
||||||
|
height: 16px;
|
||||||
|
}
|
||||||
.caret-wrapper {
|
.caret-wrapper {
|
||||||
height: 23px;
|
height: 23px;
|
||||||
.sort-caret.ascending {
|
.sort-caret.ascending {
|
||||||
@@ -349,7 +350,7 @@
|
|||||||
.el-table__body-wrapper .is-hidden, .el-table__header-wrapper .is-hidden {
|
.el-table__body-wrapper .is-hidden, .el-table__header-wrapper .is-hidden {
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
}
|
}
|
||||||
.nz-table2 {
|
.nz-table-list {
|
||||||
.el-table--border td {
|
.el-table--border td {
|
||||||
border-right: none !important;
|
border-right: none !important;
|
||||||
}
|
}
|
||||||
@@ -397,7 +398,7 @@
|
|||||||
.main-container {
|
.main-container {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
.list-page .nz-table2 .el-table:not(.chart-table) .gutter {
|
.list-page .nz-table-list .el-table:not(.chart-table) .gutter {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
right: 31px;
|
right: 31px;
|
||||||
height: 42px;
|
height: 42px;
|
||||||
@@ -551,7 +552,7 @@
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
.list-page.detail-view .nz-detail-view-right{
|
.list-page.detail-view .nz-detail-view-right{
|
||||||
.nz-table2 .el-table--border {
|
.nz-table-list .el-table--border {
|
||||||
height: calc(100% - 45px) !important;
|
height: calc(100% - 45px) !important;
|
||||||
.gutter {
|
.gutter {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
|||||||
@@ -1,7 +1,12 @@
|
|||||||
.temp-dropdown{
|
.temp-dropdown{
|
||||||
border: none;
|
border: none;
|
||||||
}
|
}
|
||||||
|
.my-loading-parent--relative {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
.panel-chart {
|
.panel-chart {
|
||||||
border: 1px solid $--chart-box-border-color;
|
border: 1px solid $--chart-box-border-color;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
@@ -190,6 +195,20 @@
|
|||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.el-table{
|
||||||
|
background: $--background-color-empty;
|
||||||
|
border: 1px solid $--border-color-light;
|
||||||
|
.el-table--border::after{
|
||||||
|
background: $--border-color-light;
|
||||||
|
}
|
||||||
|
tr{
|
||||||
|
background: $--background-color-empty;
|
||||||
|
//border-bottom: 1px solid $--border-color-light !important;
|
||||||
|
th,td {
|
||||||
|
border-bottom: 1px solid $--border-color-light
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.panel-chart.panel-chart--fullscreen {
|
.panel-chart.panel-chart--fullscreen {
|
||||||
border: none;
|
border: none;
|
||||||
@@ -213,7 +232,7 @@
|
|||||||
&>.overview{
|
&>.overview{
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
}
|
}
|
||||||
&>.nz-table2{
|
&>.nz-table-list{
|
||||||
padding-top: 10px !important;
|
padding-top: 10px !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -548,3 +567,20 @@
|
|||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
.graph-icon-info-box{
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
right: 5%;
|
||||||
|
display: flex;
|
||||||
|
width: 140px;
|
||||||
|
flex-direction: column;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
.graph-icon-content {
|
||||||
|
font-size: 20px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
color: $--color-monitor;
|
||||||
|
.graph-icon-label{
|
||||||
|
margin-left: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@@ -348,9 +348,9 @@
|
|||||||
.nz-alert-tag__content {
|
.nz-alert-tag__content {
|
||||||
padding-left: 6px;
|
padding-left: 6px;
|
||||||
padding-right: 6px;
|
padding-right: 6px;
|
||||||
display: flex;
|
// display: flex;
|
||||||
align-items: center;
|
// align-items: center;
|
||||||
justify-content: center;
|
// justify-content: center;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -412,18 +412,18 @@
|
|||||||
.nz-alert-tag__label {
|
.nz-alert-tag__label {
|
||||||
padding-left: 10px;
|
padding-left: 10px;
|
||||||
padding-right: 10px;
|
padding-right: 10px;
|
||||||
display: flex;
|
// display: flex;
|
||||||
align-items: center;
|
// align-items: center;
|
||||||
justify-content: center;
|
// justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nz-alert-tag__content {
|
.nz-alert-tag__content {
|
||||||
padding-left: 6px;
|
padding-left: 6px;
|
||||||
padding-right: 6px;
|
padding-right: 6px;
|
||||||
color: $--color-text-primary;
|
color: $--color-text-primary;
|
||||||
display: flex;
|
// display: flex;
|
||||||
align-items: center;
|
// align-items: center;
|
||||||
justify-content: center;
|
// justify-content: center;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -31,7 +31,7 @@
|
|||||||
.pagination-bottom {
|
.pagination-bottom {
|
||||||
bottom: 8px;
|
bottom: 8px;
|
||||||
}
|
}
|
||||||
&>.nz-table2 {
|
&>.nz-table-list {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
padding: 20px 20px 10px 20px !important;
|
padding: 20px 20px 10px 20px !important;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
@@ -88,7 +88,7 @@
|
|||||||
}
|
}
|
||||||
.list-page {
|
.list-page {
|
||||||
.sub-box.bottom-box {
|
.sub-box.bottom-box {
|
||||||
.nz-table2 .el-table--border {
|
.nz-table-list .el-table--border {
|
||||||
.gutter {
|
.gutter {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
right: 31px;
|
right: 31px;
|
||||||
@@ -115,13 +115,13 @@
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
background-color: $--background-color-base;
|
background-color: $--background-color-base;
|
||||||
|
|
||||||
&>.nz-table2 {
|
&>.nz-table-list {
|
||||||
height: calc(100% - 92px);
|
height: calc(100% - 92px);
|
||||||
padding: 20px 20px 0;
|
padding: 20px 20px 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.chart-list{
|
.chart-list{
|
||||||
.nz-table2 {
|
.nz-table-list {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
@@ -150,7 +150,7 @@
|
|||||||
}
|
}
|
||||||
.bottom-log {
|
.bottom-log {
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
height: 100%;
|
height: auto;
|
||||||
}
|
}
|
||||||
.bottom-common {
|
.bottom-common {
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
@@ -177,16 +177,16 @@
|
|||||||
.bottom-box .sub-container{
|
.bottom-box .sub-container{
|
||||||
height: calc(100% - 50px);
|
height: calc(100% - 50px);
|
||||||
}
|
}
|
||||||
.bottom-box .sub-container .nz-table2 {
|
.bottom-box .sub-container .nz-table-list {
|
||||||
height: calc(100% - 20px);
|
height: calc(100% - 20px);
|
||||||
.bottom-box__top .my-loading-box {
|
.bottom-box__top .my-loading-box {
|
||||||
height: calc(100% + 20px) !important;
|
height: calc(100% + 20px) !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.asset-detail .sub-container .nz-table2 {
|
.asset-detail .sub-container .nz-table-list {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
.endpoint-tab-new .sub-container .nz-table2 {
|
.endpoint-tab-new .sub-container .nz-table-list {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
/* end--二级顶部工具栏*/
|
/* end--二级顶部工具栏*/
|
||||||
|
|||||||
@@ -9,7 +9,7 @@
|
|||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sub-box .sub-list__tabs .chart-list .nz-table2 {
|
.sub-box .sub-list__tabs .chart-list .nz-table-list {
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
@@ -36,14 +36,14 @@
|
|||||||
& > div {
|
& > div {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
||||||
& > .nz-table2 {
|
& > .nz-table-list {
|
||||||
height: calc(100% - 92px);
|
height: calc(100% - 92px);
|
||||||
padding: 20px 20px 0;
|
padding: 20px 20px 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.chart-list {
|
.chart-list {
|
||||||
.nz-table2 {
|
.nz-table-list {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -95,6 +95,7 @@
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
|
overflow-x: hidden;
|
||||||
}
|
}
|
||||||
.list-item{
|
.list-item{
|
||||||
height: 64px;
|
height: 64px;
|
||||||
|
|||||||
@@ -77,7 +77,7 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
.panel-select-left{
|
.panel-select-left{
|
||||||
width: 170px;
|
width: 180px;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
border-right:1px solid $--border-color-base;
|
border-right:1px solid $--border-color-base;
|
||||||
@@ -98,26 +98,26 @@
|
|||||||
height: 36px;
|
height: 36px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
i{
|
i{
|
||||||
margin-left: 20px;
|
margin-left: 12px;
|
||||||
margin-right: 6px;
|
margin-right: 5px;
|
||||||
width: 22px;
|
width: 20px;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
color: $--color-text-regular;
|
color: $--color-text-regular;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.panel-select-item:hover{
|
.panel-select-item:hover{
|
||||||
color: #FA901C;
|
color: $--color-primary;
|
||||||
background: $--background-color-base;
|
background: $--background-color-base;
|
||||||
i{
|
i{
|
||||||
color: #FA901C;
|
color: $--color-primary;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.panel-select-item.active{
|
.panel-select-item.active{
|
||||||
color: #FA901C;
|
color: $--color-primary;
|
||||||
background: $--background-color-base;
|
background: $--background-color-base;
|
||||||
i{
|
i{
|
||||||
color: #FA901C;
|
color: $--color-primary;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -145,7 +145,7 @@
|
|||||||
}
|
}
|
||||||
.pop-item-wider{
|
.pop-item-wider{
|
||||||
flex: 1;
|
flex: 1;
|
||||||
width: calc(100% - 170px);
|
width: calc(100% - 180px);
|
||||||
padding-top: 0;
|
padding-top: 0;
|
||||||
.panel-select-header{
|
.panel-select-header{
|
||||||
margin-top: 12px;
|
margin-top: 12px;
|
||||||
@@ -155,9 +155,14 @@
|
|||||||
.nz-icon-xingzhuang{
|
.nz-icon-xingzhuang{
|
||||||
color: $--color-text-regular;
|
color: $--color-text-regular;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
|
cursor: pointer ;
|
||||||
}
|
}
|
||||||
.nz-icon-a-xingzhuang2{
|
.nz-icon-a-xingzhuang2{
|
||||||
color:#FF9219 !important;
|
color:#FF9219 !important;
|
||||||
transform: scale(1.2);
|
cursor: pointer ;
|
||||||
|
}
|
||||||
|
.highlight-keyword{
|
||||||
|
color:$--color-primary;
|
||||||
|
background: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -159,12 +159,11 @@
|
|||||||
color: #e2f3ef;
|
color: #e2f3ef;
|
||||||
font-size: 44px;
|
font-size: 44px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 1px;
|
top: 0px;
|
||||||
left: 2px;
|
left: 2px;
|
||||||
transform: scale(0.95);
|
// transform: scale(1.1);
|
||||||
z-index: 0;
|
z-index: -1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.network-pop .error-model-stat .nz-icon-liubianxing {
|
.network-pop .error-model-stat .nz-icon-liubianxing {
|
||||||
color: #FADED7;
|
color: #FADED7;
|
||||||
}
|
}
|
||||||
@@ -490,14 +489,14 @@
|
|||||||
padding:0 !important;
|
padding:0 !important;
|
||||||
width: calc(100% - 2px);
|
width: calc(100% - 2px);
|
||||||
height: calc(100% - 2px) !important;
|
height: calc(100% - 2px) !important;
|
||||||
.nz-table2{
|
.nz-table-list{
|
||||||
padding: 0 !important;
|
padding: 0 !important;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.from-project{
|
.from-project{
|
||||||
padding: 0px 10px 0 0 !important;
|
padding: 0px 10px 0 0 !important;
|
||||||
.nz-table2{
|
.nz-table-list{
|
||||||
padding: 0;
|
padding: 0;
|
||||||
box-sizing: content-box;
|
box-sizing: content-box;
|
||||||
height: calc(100% - 50px);
|
height: calc(100% - 50px);
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
.backups-table{
|
.backups-table{
|
||||||
.nz-table2 {
|
.nz-table-list {
|
||||||
.el-table__row{
|
.el-table__row{
|
||||||
td:last-of-type{
|
td:last-of-type{
|
||||||
// border-bottom: 1px solid $--border-color-light !important;
|
// border-bottom: 1px solid $--border-color-light !important;
|
||||||
@@ -56,4 +56,18 @@
|
|||||||
.nz-icon-shujubeifenhuifu::before{
|
.nz-icon-shujubeifenhuifu::before{
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
}
|
}
|
||||||
|
.el-table--border td:first-child .cell{
|
||||||
|
padding-left: 20px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.el-table__empty-block{
|
||||||
|
.el-table__empty-text{
|
||||||
|
.table-no-data{
|
||||||
|
height: 200px;
|
||||||
|
padding-top: 70px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -31,4 +31,13 @@
|
|||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
line-height: 14px;
|
line-height: 14px;
|
||||||
}
|
}
|
||||||
|
.user-name-td{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
.user-online{
|
||||||
|
margin-right: 5px;
|
||||||
|
margin-left: -10px;
|
||||||
|
color: #38cc20;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -115,7 +115,8 @@
|
|||||||
|
|
||||||
.date-range-text {
|
.date-range-text {
|
||||||
color: $--color-text-regular;
|
color: $--color-text-regular;
|
||||||
font-size: 14px;
|
// font-size: 14px;
|
||||||
|
font-size: 13px;
|
||||||
// min-width: 150px;
|
// min-width: 150px;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
flex-wrap: nowrap;
|
flex-wrap: nowrap;
|
||||||
|
|||||||
@@ -0,0 +1,243 @@
|
|||||||
|
/*
|
||||||
|
Dark theme for IntroJs
|
||||||
|
By: Khashayar Pourdeilami (http://kpourdeilami.github.io)
|
||||||
|
for: IntroJs (https://github.com/usablica/intro.js)
|
||||||
|
*/
|
||||||
|
.introjs-overlay {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 999999;
|
||||||
|
background:#fff;
|
||||||
|
-webkit-transition: all 0.3s ease-out;
|
||||||
|
-moz-transition: all 0.3s ease-out;
|
||||||
|
-ms-transition: all 0.3s ease-out;
|
||||||
|
-o-transition: all 0.3s ease-out;
|
||||||
|
transition: all 0.3s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.introjs-fixParent {
|
||||||
|
z-index: auto !important;
|
||||||
|
opacity: 1.0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.introjs-showElement,
|
||||||
|
tr.introjs-showElement > td,
|
||||||
|
tr.introjs-showElement > th {
|
||||||
|
z-index: 9999999 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.introjs-relativePosition,
|
||||||
|
tr.introjs-showElement > td,
|
||||||
|
tr.introjs-showElement > th {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.introjs-helperLayer {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 9999998;
|
||||||
|
background:#656D78;
|
||||||
|
-webkit-transition: all 0.3s ease-out;
|
||||||
|
-moz-transition: all 0.3s ease-out;
|
||||||
|
-ms-transition: all 0.3s ease-out;
|
||||||
|
-o-transition: all 0.3s ease-out;
|
||||||
|
transition: all 0.3s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.introjs-helperNumberLayer {
|
||||||
|
position: absolute;
|
||||||
|
|
||||||
|
z-index: 9999999999 !important;
|
||||||
|
padding: 10px;
|
||||||
|
font-family: Arial, verdana, tahoma;
|
||||||
|
font-size: 13px;
|
||||||
|
top:-40px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: white;
|
||||||
|
text-align: center;
|
||||||
|
background:#434A54;
|
||||||
|
width: 20px;
|
||||||
|
height:20px;
|
||||||
|
line-height: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.introjs-arrow {
|
||||||
|
border: 5px solid #434A54;
|
||||||
|
content:'';
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
.introjs-arrow.top {
|
||||||
|
top: -10px;
|
||||||
|
border-top-color:transparent;
|
||||||
|
border-right-color:transparent;
|
||||||
|
border-bottom-color:#434A54;
|
||||||
|
border-left-color:transparent;
|
||||||
|
}
|
||||||
|
.introjs-arrow.top-right {
|
||||||
|
top: -10px;
|
||||||
|
right: 10px;
|
||||||
|
border-top-color:transparent;
|
||||||
|
border-right-color:transparent;
|
||||||
|
border-bottom-color:#434A54;
|
||||||
|
border-left-color:transparent;
|
||||||
|
}
|
||||||
|
.introjs-arrow.top-middle {
|
||||||
|
top: -10px;
|
||||||
|
left: 50%;
|
||||||
|
margin-left: -5px;
|
||||||
|
border-top-color:transparent;
|
||||||
|
border-right-color:transparent;
|
||||||
|
border-bottom-color:#434A54;
|
||||||
|
border-left-color:transparent;
|
||||||
|
}
|
||||||
|
.introjs-arrow.right {
|
||||||
|
right: -10px;
|
||||||
|
top: 10px;
|
||||||
|
border-top-color:transparent;
|
||||||
|
border-right-color:transparent;
|
||||||
|
border-bottom-color:transparent;
|
||||||
|
border-left-color:#434A54;
|
||||||
|
}
|
||||||
|
.introjs-arrow.bottom {
|
||||||
|
bottom: -10px;
|
||||||
|
border-top-color:#434A54;
|
||||||
|
border-right-color:transparent;
|
||||||
|
border-bottom-color:transparent;
|
||||||
|
border-left-color:transparent;
|
||||||
|
}
|
||||||
|
.introjs-arrow.left {
|
||||||
|
left: -10px;
|
||||||
|
top: 10px;
|
||||||
|
border-top-color:transparent;
|
||||||
|
border-right-color:#434A54;
|
||||||
|
border-bottom-color:transparent;
|
||||||
|
border-left-color:transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.introjs-tooltip {
|
||||||
|
position: absolute;
|
||||||
|
padding: 10px;
|
||||||
|
background-color: #434A54;
|
||||||
|
min-width: 200px;
|
||||||
|
padding-top:30px;
|
||||||
|
|
||||||
|
max-width: 300px;
|
||||||
|
color:#fff;
|
||||||
|
-webkit-transition: opacity 0.1s ease-out;
|
||||||
|
-moz-transition: opacity 0.1s ease-out;
|
||||||
|
-ms-transition: opacity 0.1s ease-out;
|
||||||
|
-o-transition: opacity 0.1s ease-out;
|
||||||
|
transition: opacity 0.1s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.introjs-tooltipbuttons {
|
||||||
|
text-align: right;
|
||||||
|
position:relative;
|
||||||
|
bottom:-44px;
|
||||||
|
margin-left:-10px;
|
||||||
|
margin-right:-10px;
|
||||||
|
padding:5px;
|
||||||
|
background:#656D78;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
Buttons style by http://nicolasgallagher.com/lab/css3-github-buttons/
|
||||||
|
Changed by Afshin Mehrabani
|
||||||
|
Further modified by: Khashayar P.
|
||||||
|
*/
|
||||||
|
.introjs-button {
|
||||||
|
position: relative;
|
||||||
|
overflow: visible;
|
||||||
|
display: inline-block;
|
||||||
|
padding: 0.3em 0.8em;
|
||||||
|
border: 2px solid #fff;
|
||||||
|
margin: 0;
|
||||||
|
text-decoration: none;
|
||||||
|
font: 11px/normal sans-serif;
|
||||||
|
color: #fff !important;
|
||||||
|
white-space: nowrap;
|
||||||
|
cursor: pointer;
|
||||||
|
outline: none;
|
||||||
|
-webkit-background-clip: padding;
|
||||||
|
-moz-background-clip: padding;
|
||||||
|
-o-background-clip: padding-box;
|
||||||
|
/*background-clip: padding-box;*/ /* commented out due to Opera 11.10 bug */
|
||||||
|
/* IE hacks */
|
||||||
|
zoom: 1;
|
||||||
|
*display: inline;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.introjs-button:hover {
|
||||||
|
text-decoration: none;
|
||||||
|
color:#434A54 !important;
|
||||||
|
background:#fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.introjs-button:focus,
|
||||||
|
.introjs-button:active {
|
||||||
|
background:#fff !important;
|
||||||
|
color:#434A54 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* overrides extra padding on button elements in Firefox */
|
||||||
|
.introjs-button::-moz-focus-inner {
|
||||||
|
padding: 0;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.introjs-skipbutton {
|
||||||
|
margin-right: 5px;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.introjs-prevbutton {
|
||||||
|
|
||||||
|
border-right: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.introjs-disabled, .introjs-disabled:hover, .introjs-disabled:focus {
|
||||||
|
color: #fff;
|
||||||
|
box-shadow: none;
|
||||||
|
cursor: default;
|
||||||
|
background:transparent;
|
||||||
|
border-color:transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.introjs-bullets {
|
||||||
|
text-align: center;
|
||||||
|
display:none;
|
||||||
|
}
|
||||||
|
.introjs-bullets ul {
|
||||||
|
clear: both;
|
||||||
|
margin: 15px auto 0;
|
||||||
|
padding: 0;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
.introjs-bullets ul li {
|
||||||
|
list-style: none;
|
||||||
|
float: left;
|
||||||
|
margin: 0 2px;
|
||||||
|
}
|
||||||
|
.introjs-bullets ul li a {
|
||||||
|
display: block;
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
background: rgba(255,255,255,0.1);
|
||||||
|
border-radius: 10px;
|
||||||
|
-moz-border-radius: 10px;
|
||||||
|
-webkit-border-radius: 10px;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
.introjs-bullets ul li a:hover {
|
||||||
|
background: rgba(255,255,255,0.2);
|
||||||
|
}
|
||||||
|
.introjs-bullets ul li a.active {
|
||||||
|
background: rgba(255,255,255,0.2);
|
||||||
|
}
|
||||||
|
.introjsFloatingElement {
|
||||||
|
position: absolute;
|
||||||
|
height: 0;
|
||||||
|
width: 0;
|
||||||
|
left: 50%;
|
||||||
|
top: 50%;
|
||||||
|
}
|
||||||
File diff suppressed because one or more lines are too long
@@ -193,14 +193,17 @@
|
|||||||
.el-checkbox-button__inner{
|
.el-checkbox-button__inner{
|
||||||
background-color:$--background-color-empty;
|
background-color:$--background-color-empty;
|
||||||
}
|
}
|
||||||
|
.el-checkbox-button.is-checked{
|
||||||
|
border: 1px solid #fbb569 !important;
|
||||||
|
}
|
||||||
.el-checkbox-button.is-checked .el-checkbox-button__inner {
|
.el-checkbox-button.is-checked .el-checkbox-button__inner {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
background-color: #FA901C;
|
background-color: #FA901C;
|
||||||
border-color: #FA901C;
|
border-color: #FA901C;
|
||||||
border: 1px solid #FA901C;
|
// margin-right: -1px;
|
||||||
margin-right: -1px;
|
|
||||||
-webkit-box-shadow: -1px 0 0 0 #fcbc77;
|
-webkit-box-shadow: -1px 0 0 0 #fcbc77;
|
||||||
box-shadow: -1px 0 0 0 #fcbc77;
|
box-shadow: -1px 0 0 0 #fcbc77;
|
||||||
|
border-radius: 0;
|
||||||
}
|
}
|
||||||
.nz-icon-delete:before{
|
.nz-icon-delete:before{
|
||||||
color: $--color-text-regular;
|
color: $--color-text-regular;
|
||||||
|
|||||||
@@ -32,3 +32,41 @@
|
|||||||
background-color: $--background-color-1;
|
background-color: $--background-color-1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.operation-log{
|
||||||
|
.main-list{
|
||||||
|
.api-key{
|
||||||
|
position: relative;
|
||||||
|
.pop-custom{
|
||||||
|
position: absolute;
|
||||||
|
top: -20px;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.main-container{
|
||||||
|
background-color: $--background-color-empty;
|
||||||
|
}
|
||||||
|
.nz-table-list{
|
||||||
|
position: relative;
|
||||||
|
.top-tool-right{
|
||||||
|
position: absolute !important;
|
||||||
|
top: -55px !important;
|
||||||
|
right: 0 !important;
|
||||||
|
}
|
||||||
|
.nz-table-list{
|
||||||
|
width: 100%;
|
||||||
|
height: 100% !important;
|
||||||
|
position: absolute !important;
|
||||||
|
padding-left: 0 !important;
|
||||||
|
padding-right: 0 !important;
|
||||||
|
top: 0 !important;
|
||||||
|
left: 0;
|
||||||
|
#api-key-tab{
|
||||||
|
height: calc(100% - 78px) !important;
|
||||||
|
}
|
||||||
|
.el-table__body-wrapper{
|
||||||
|
overflow-x: hidden !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@@ -228,7 +228,7 @@
|
|||||||
padding: 0;
|
padding: 0;
|
||||||
pxbox-shadow: 0 1px 2px 0 rgba(0,0,0,0.06);
|
pxbox-shadow: 0 1px 2px 0 rgba(0,0,0,0.06);
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
.nz-table2 {
|
.nz-table-list {
|
||||||
height: calc(100% - 69px);
|
height: calc(100% - 69px);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -331,3 +331,10 @@
|
|||||||
width: 320px;
|
width: 320px;
|
||||||
margin: 40px auto
|
margin: 40px auto
|
||||||
}
|
}
|
||||||
|
.profile{
|
||||||
|
#my-datetime-picker{
|
||||||
|
width: 640px;
|
||||||
|
height: 32px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -15,7 +15,7 @@
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.log-table .nz-table2 {
|
.log-table .nz-table-list {
|
||||||
padding: 10px 0 0 0;
|
padding: 10px 0 0 0;
|
||||||
position: relative;
|
position: relative;
|
||||||
background-color: $--background-color-empty;
|
background-color: $--background-color-empty;
|
||||||
@@ -133,11 +133,11 @@
|
|||||||
.chart-log.log-detail {
|
.chart-log.log-detail {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
.log-table {
|
.log-table {
|
||||||
.nz-table2::before{
|
.nz-table-list::before{
|
||||||
display: none;
|
display: none;
|
||||||
height: 0px;
|
height: 0px;
|
||||||
}
|
}
|
||||||
.nz-table2 {
|
.nz-table-list {
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
.el-table__body-wrapper {
|
.el-table__body-wrapper {
|
||||||
|
|||||||
@@ -25,7 +25,7 @@
|
|||||||
.el-carousel__indicator--horizontal.is-active .el-carousel__button{
|
.el-carousel__indicator--horizontal.is-active .el-carousel__button{
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
.nz-table2 {
|
.nz-table-list {
|
||||||
height: 100% !important;
|
height: 100% !important;
|
||||||
}
|
}
|
||||||
.chart-body {
|
.chart-body {
|
||||||
|
|||||||
@@ -25,7 +25,7 @@
|
|||||||
.main-container {
|
.main-container {
|
||||||
padding: 0 !important;
|
padding: 0 !important;
|
||||||
}
|
}
|
||||||
.nz-table2.h100 {
|
.nz-table-list.h100 {
|
||||||
height: 100% !important;
|
height: 100% !important;
|
||||||
}
|
}
|
||||||
.right-bottom-zoom {
|
.right-bottom-zoom {
|
||||||
|
|||||||
@@ -36,7 +36,7 @@
|
|||||||
.top-tools div:nth-of-type(1) {
|
.top-tools div:nth-of-type(1) {
|
||||||
color: $--color-text-primary;
|
color: $--color-text-primary;
|
||||||
}
|
}
|
||||||
.nz-table2 {
|
.nz-table-list {
|
||||||
padding: 0 !important;
|
padding: 0 !important;
|
||||||
}
|
}
|
||||||
.right-bottom-zoom {
|
.right-bottom-zoom {
|
||||||
|
|||||||
@@ -92,7 +92,7 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
.nz-table2{
|
.nz-table-list{
|
||||||
height: auto !important;
|
height: auto !important;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
@@ -159,7 +159,7 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.nz-table2{
|
.nz-table-list{
|
||||||
flex: 1 !important;
|
flex: 1 !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -92,7 +92,7 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
.nz-table2{
|
.nz-table-list{
|
||||||
height: auto !important;
|
height: auto !important;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
@@ -159,7 +159,7 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.nz-table2{
|
.nz-table-list{
|
||||||
flex: 1 !important;
|
flex: 1 !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -32,6 +32,7 @@ html {
|
|||||||
@import './common/index.scss'; // 加载通用样式
|
@import './common/index.scss'; // 加载通用样式
|
||||||
@import './common.scss';
|
@import './common.scss';
|
||||||
@import '../stylus/main.scss';
|
@import '../stylus/main.scss';
|
||||||
|
@import './components/introjs/introjs.scss';
|
||||||
}
|
}
|
||||||
|
|
||||||
.theme-dark {
|
.theme-dark {
|
||||||
@@ -42,4 +43,6 @@ html {
|
|||||||
@import './common/index.scss'; // 加载通用样式
|
@import './common/index.scss'; // 加载通用样式
|
||||||
@import './common.scss';
|
@import './common.scss';
|
||||||
@import '../stylus/main.scss';
|
@import '../stylus/main.scss';
|
||||||
|
@import './components/introjs/introjs.scss';
|
||||||
|
@import './components/introjs/introjs-dark.scss';
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -43,11 +43,11 @@
|
|||||||
</span>
|
</span>
|
||||||
<ul slot="dropdown" v-show="dropdownMenuShow" :id="'dropdownUl'+chartIndex" class="el-dropdown-menu nz-chart-dropdown" style="" >
|
<ul slot="dropdown" v-show="dropdownMenuShow" :id="'dropdownUl'+chartIndex" class="el-dropdown-menu nz-chart-dropdown" style="" >
|
||||||
<li @click="editChart" class="el-dropdown-menu__item">
|
<li @click="editChart" class="el-dropdown-menu__item">
|
||||||
<i class="nz-icon nz-icon-edit" style="font-size: 16px;"></i><span>{{$t('dashboard.edit')}}</span></li>
|
<i class="nz-icon nz-icon-edit" style="font-size: 16px;"></i><span>{{$t('overall.edit')}}</span></li>
|
||||||
<li v-has="'main_delete'" class="el-dropdown-menu__item" @click="removeChart">
|
<li v-has="'main_delete'" class="el-dropdown-menu__item" @click="removeChart">
|
||||||
<i class="nz-icon nz-icon-delete" style="font-size: 16px;"></i>{{$t('dashboard.delete')}}</li>
|
<i class="nz-icon nz-icon-delete" style="font-size: 16px;"></i>{{$t('overall.delete')}}</li>
|
||||||
<li v-has="'main_add'" class="el-dropdown-menu__item" @click="duplicate">
|
<li v-has="'main_add'" class="el-dropdown-menu__item" @click="duplicate">
|
||||||
<i class="el-icon-copy-document" style="font-size: 16px;"></i>{{$t('dashboard.duplicate')}}</li>
|
<i class="el-icon-copy-document" style="font-size: 16px;"></i>{{$t('overall.duplicate')}}</li>
|
||||||
<li v-has="'main_edit'" v-if="from !== 'chartTemp'&&chartData.pid" class="el-dropdown-menu__item" @click="$emit('sync')">
|
<li v-has="'main_edit'" v-if="from !== 'chartTemp'&&chartData.pid" class="el-dropdown-menu__item" @click="$emit('sync')">
|
||||||
<i class="nz-icon nz-icon-sync" style="font-size: 16px;"></i>{{$t('overall.syncChart')}}</li>
|
<i class="nz-icon nz-icon-sync" style="font-size: 16px;"></i>{{$t('overall.syncChart')}}</li>
|
||||||
</ul>
|
</ul>
|
||||||
@@ -57,16 +57,16 @@
|
|||||||
<el-table :id="'tableContainer'+chartIndex" ref="tableContainer" :height="tableHeight" class="chart-table"
|
<el-table :id="'tableContainer'+chartIndex" ref="tableContainer" :height="tableHeight" class="chart-table"
|
||||||
:data="seriesItem" border tooltip-effect="light" v-cloak
|
:data="seriesItem" border tooltip-effect="light" v-cloak
|
||||||
@sort-change="tableDataSort" >
|
@sort-change="tableDataSort" >
|
||||||
<el-table-column :label="$t('dashboard.panel.chartTableColumn.time')" min-width="100" prop="time"
|
<el-table-column :label="$t('overall.time')" min-width="100" prop="time"
|
||||||
:sort-orders="['ascending', 'descending']" :sortable="'custom'"></el-table-column>
|
:sort-orders="['ascending', 'descending']" :sortable="'custom'"></el-table-column>
|
||||||
<el-table-column :show-overflow-tooltip="true" prop="element"
|
<el-table-column :show-overflow-tooltip="true" prop="element"
|
||||||
:label="$t('dashboard.panel.chartTableColumn.element')" min-width="260"
|
:label="$t('dashboard.panel.chartForm.element')" min-width="260"
|
||||||
:sort-orders="['ascending', 'descending']" :sortable="'custom'">
|
:sort-orders="['ascending', 'descending']" :sortable="'custom'">
|
||||||
<template slot-scope="scope">
|
<template slot-scope="scope">
|
||||||
{{ scope.row.element.alias?scope.row.element.alias:scope.row.element.element}}
|
{{ scope.row.element.alias?scope.row.element.alias:scope.row.element.element}}
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column :label="$t('dashboard.panel.chartTableColumn.value')" class-name="costom-value" min-width="90" prop="value"
|
<el-table-column :label="$t('overall.value')" class-name="costom-value" min-width="90" prop="value"
|
||||||
:resizable="false" :sort-orders="['ascending', 'descending']" :sortable="'custom'">
|
:resizable="false" :sort-orders="['ascending', 'descending']" :sortable="'custom'">
|
||||||
<template slot-scope="scope">
|
<template slot-scope="scope">
|
||||||
<div :style="{color:scope.row.mapping?scope.row.mapping.color.text:'#000',background:scope.row.mapping?scope.row.mapping.color.bac:'#fff'}" >
|
<div :style="{color:scope.row.mapping?scope.row.mapping.color.text:'#000',background:scope.row.mapping?scope.row.mapping.color.bac:'#fff'}" >
|
||||||
@@ -79,7 +79,7 @@
|
|||||||
ref="Pagination" :append-to-body="false" pop-class="out-popper-fix"></Pagination>
|
ref="Pagination" :append-to-body="false" pop-class="out-popper-fix"></Pagination>
|
||||||
</div>
|
</div>
|
||||||
<!--全屏-->
|
<!--全屏-->
|
||||||
<el-dialog class="nz-dialog table-chart-dialog" :title="$t('dashboard.panel.view')" :visible.sync="screenModal"
|
<el-dialog class="nz-dialog table-chart-dialog" :title="$t('overall.view')" :visible.sync="screenModal"
|
||||||
width="96%" @close="screenModal = false" :modal-append-to-body="false">
|
width="96%" @close="screenModal = false" :modal-append-to-body="false">
|
||||||
<div slot="title">
|
<div slot="title">
|
||||||
<span class="nz-dialog-title">{{data.name}}</span>
|
<span class="nz-dialog-title">{{data.name}}</span>
|
||||||
@@ -90,16 +90,16 @@
|
|||||||
<el-table :data="seriesItemScreen" border height="95%" style="margin-top: 10px;"
|
<el-table :data="seriesItemScreen" border height="95%" style="margin-top: 10px;"
|
||||||
ref="tableScreen"
|
ref="tableScreen"
|
||||||
@sort-change="tableDataSortScreen" tooltip-effect="light">
|
@sort-change="tableDataSortScreen" tooltip-effect="light">
|
||||||
<el-table-column :label="$t('dashboard.panel.chartTableColumn.time')" min-width="100" prop="time"
|
<el-table-column :label="$t('overall.time')" min-width="100" prop="time"
|
||||||
:sort-orders="['ascending', 'descending']" :sortable="'custom'"></el-table-column>
|
:sort-orders="['ascending', 'descending']" :sortable="'custom'"></el-table-column>
|
||||||
<el-table-column :show-overflow-tooltip="true" prop="element"
|
<el-table-column :show-overflow-tooltip="true" prop="element"
|
||||||
:label="$t('dashboard.panel.chartTableColumn.element')" min-width="420"
|
:label="$t('dashboard.panel.chartForm.element')" min-width="420"
|
||||||
:sort-orders="['ascending', 'descending']" :sortable="'custom'">
|
:sort-orders="['ascending', 'descending']" :sortable="'custom'">
|
||||||
<template slot-scope="scope">
|
<template slot-scope="scope">
|
||||||
{{ scope.row.element.alias?scope.row.element.alias:scope.row.element.element}}
|
{{ scope.row.element.alias?scope.row.element.alias:scope.row.element.element}}
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column :label="$t('dashboard.panel.chartTableColumn.value')" class-name="costom-value" min-width="90" prop="value"
|
<el-table-column :label="$t('overall.value')" class-name="costom-value" min-width="90" prop="value"
|
||||||
:resizable="false" :sort-orders="['ascending', 'descending']" :sortable="'custom'">
|
:resizable="false" :sort-orders="['ascending', 'descending']" :sortable="'custom'">
|
||||||
<template slot-scope="scope">
|
<template slot-scope="scope">
|
||||||
<div :style="{color:scope.row.mapping?scope.row.mapping.color.text:'#000',background:scope.row.mapping?scope.row.mapping.color.bac:'#fff'}" >
|
<div :style="{color:scope.row.mapping?scope.row.mapping.color.text:'#000',background:scope.row.mapping?scope.row.mapping.color.bac:'#fff'}" >
|
||||||
|
|||||||
@@ -54,14 +54,14 @@ export default {
|
|||||||
|
|
||||||
},
|
},
|
||||||
initChart () {
|
initChart () {
|
||||||
setTimeout(() => {
|
// setTimeout(() => {
|
||||||
this.dataList = this.dataList.map(item => {
|
// this.dataList = this.dataList.map(item => {
|
||||||
return {
|
// return {
|
||||||
...item
|
// ...item
|
||||||
// hide: item.name.indexOf(this.filter.searchName) === -1, // 搜索条件
|
// // hide: item.name.indexOf(this.filter.searchName) === -1, // 搜索条件
|
||||||
}
|
// }
|
||||||
})
|
// })
|
||||||
}, 100)
|
// }, 100)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
|
|||||||
@@ -37,7 +37,7 @@
|
|||||||
style="height: 100%"
|
style="height: 100%"
|
||||||
:show-header="false"
|
:show-header="false"
|
||||||
ref="logTable"
|
ref="logTable"
|
||||||
class="nz-table2"
|
class="nz-table-list"
|
||||||
size="mini"
|
size="mini"
|
||||||
v-if="tableData.length"
|
v-if="tableData.length"
|
||||||
>
|
>
|
||||||
|
|||||||
@@ -195,7 +195,7 @@ export default {
|
|||||||
<div class="partition"></div>
|
<div class="partition"></div>
|
||||||
<div class="legend-value legend-value-agent">
|
<div class="legend-value legend-value-agent">
|
||||||
<div class="map-asset">
|
<div class="map-asset">
|
||||||
<div class="progress-title">${self.$t('guide.agent')} ${self.$t('overall.normal')}</div>
|
<div class="progress-title">${self.$t('guide.agent')} ${self.$t('config.agent.up')}</div>
|
||||||
<div class="success-progress progress-box">
|
<div class="success-progress progress-box">
|
||||||
<div class="top-progress" style="width: ${(dcStat.agent.up / (dcStat.agent.up + dcStat.agent.down)) * 100}%"></div>
|
<div class="top-progress" style="width: ${(dcStat.agent.up / (dcStat.agent.up + dcStat.agent.down)) * 100}%"></div>
|
||||||
<div style="width: 100%" class="bottom-progress"></div>
|
<div style="width: 100%" class="bottom-progress"></div>
|
||||||
@@ -203,7 +203,7 @@ export default {
|
|||||||
<div class="success-progress progress-content">${dcStat.agent.up}</div>
|
<div class="success-progress progress-content">${dcStat.agent.up}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="map-asset">
|
<div class="map-asset">
|
||||||
<div class="progress-title">${self.$t('guide.agent')} ${self.$t('overall.unusual')}</div>
|
<div class="progress-title">${self.$t('guide.agent')} ${self.$t('asset.down')}</div>
|
||||||
<div class="error-progress progress-box">
|
<div class="error-progress progress-box">
|
||||||
<div class="top-progress" style="width: ${(dcStat.agent.down / (dcStat.agent.up + dcStat.agent.down)) * 100}%"></div>
|
<div class="top-progress" style="width: ${(dcStat.agent.down / (dcStat.agent.up + dcStat.agent.down)) * 100}%"></div>
|
||||||
<div style="width: 100%" class="bottom-progress"></div>
|
<div style="width: 100%" class="bottom-progress"></div>
|
||||||
|
|||||||
@@ -4,7 +4,7 @@
|
|||||||
class="chart-stat-item"
|
class="chart-stat-item"
|
||||||
v-for="(item,index) in statData"
|
v-for="(item,index) in statData"
|
||||||
:key="index"
|
:key="index"
|
||||||
@mouseenter="statMouseEnter(item)"
|
@mouseenter="statMouseEnter(item,$event)"
|
||||||
@mouseleave="statMouseleave(item)"
|
@mouseleave="statMouseleave(item)"
|
||||||
:class="statData.length===1 ?'only-stat' : ''"
|
:class="statData.length===1 ?'only-stat' : ''"
|
||||||
:style="{
|
:style="{
|
||||||
@@ -163,18 +163,42 @@ export default {
|
|||||||
this.tooltip.x = e.pageX + 15
|
this.tooltip.x = e.pageX + 15
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
statMouseEnter (that) {
|
statMouseEnter (that, e) {
|
||||||
this.tooltip.title = that.legend
|
this.tooltip.title = that.legend
|
||||||
this.tooltip.value = that.showValue
|
this.tooltip.value = that.showValue
|
||||||
this.tooltip.mapping = that.mapping
|
this.tooltip.mapping = that.mapping
|
||||||
this.tooltip.show = true
|
this.tooltip.show = true
|
||||||
|
this.$nextTick(() => {
|
||||||
|
const windowWidth = window.innerWidth// 窗口宽度
|
||||||
|
const windowHeight = window.innerHeight// 窗口高度
|
||||||
|
const box = document.getElementById(`chart-canvas-tooltip-${this.chartId}`)
|
||||||
|
if (box) {
|
||||||
|
const boxWidth = box.offsetWidth
|
||||||
|
const boxHeight = box.offsetHeight
|
||||||
|
if (e.pageX < (windowWidth / 2)) { // 说明鼠标在左边放不下提示框
|
||||||
|
this.tooltip.x = e.pageX + 15
|
||||||
|
} else {
|
||||||
|
this.tooltip.x = e.pageX - boxWidth - 15
|
||||||
|
}
|
||||||
|
if (e.pageY + 50 + boxHeight < windowHeight) { // 说明鼠标上面放不下提示框
|
||||||
|
this.tooltip.y = e.pageY + 15
|
||||||
|
} else {
|
||||||
|
this.tooltip.y = e.pageY - boxHeight - 10
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
this.tooltip.y = e.pageY + 15
|
||||||
|
this.tooltip.x = e.pageX + 15
|
||||||
|
}
|
||||||
|
})
|
||||||
},
|
},
|
||||||
statMouseleave (taht) {
|
statMouseleave (taht) {
|
||||||
this.tooltip.show = false
|
this.tooltip.show = false
|
||||||
},
|
},
|
||||||
getLayout () {
|
getLayout () {
|
||||||
|
try {
|
||||||
this.boxWidth = this.$refs['chart-stat-box'].offsetWidth - 3 * this.boxPadding
|
this.boxWidth = this.$refs['chart-stat-box'].offsetWidth - 3 * this.boxPadding
|
||||||
this.boxHeight = this.$refs['chart-stat-box'].offsetHeight - 3 * this.boxPadding
|
this.boxHeight = this.$refs['chart-stat-box'].offsetHeight - 3 * this.boxPadding
|
||||||
|
} catch (error) {}
|
||||||
return new Promise(resolve => {
|
return new Promise(resolve => {
|
||||||
let rateMax = 0
|
let rateMax = 0
|
||||||
let col = 0
|
let col = 0
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="nz-table2" style="height: 100%;padding: 0 10px 10px 10px;box-sizing: border-box">
|
<div class="nz-table-list" style="height: 100%;padding: 0 10px 10px 10px;box-sizing: border-box">
|
||||||
<el-table
|
<el-table
|
||||||
ref="dataTable"
|
ref="dataTable"
|
||||||
class="chart-table"
|
class="chart-table"
|
||||||
|
|||||||
@@ -95,7 +95,7 @@ export default {
|
|||||||
return
|
return
|
||||||
}
|
}
|
||||||
const decimals = this.chartInfo.param.decimals || 2
|
const decimals = this.chartInfo.param.decimals || 2
|
||||||
const { minTime, maxTime, minValue, maxValue, copies, unit, dot } = this.getMinMaxFromData(this.chartData, this.chartInfo.unit) // 此处时间是秒
|
const { minTime, maxTime, minValue, maxValue, copies, unit, dot } = this.getMinMaxFromData(this.chartData, this.chartInfo.unit) //
|
||||||
chartOption.xAxis.axisLabel.formatter = this.xAxisLabelFormatter(minTime, maxTime)// 需转为毫秒
|
chartOption.xAxis.axisLabel.formatter = this.xAxisLabelFormatter(minTime, maxTime)// 需转为毫秒
|
||||||
chartOption.tooltip.formatter = this.tooltipFormatter(this.chartInfo.param.stack)
|
chartOption.tooltip.formatter = this.tooltipFormatter(this.chartInfo.param.stack)
|
||||||
chartOption.tooltip.position = this.tooltipPosition
|
chartOption.tooltip.position = this.tooltipPosition
|
||||||
@@ -145,9 +145,7 @@ export default {
|
|||||||
datas = [...datas, ...data.values]
|
datas = [...datas, ...data.values]
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
const timeSorted = datas.sort((a, b) => {
|
const timeSorted = this.$loadsh.sortBy(datas, function (o) { return o[0] })
|
||||||
return Number(a[0]) - Number(b[0])
|
|
||||||
})
|
|
||||||
const valueSorted = datas.sort((a, b) => {
|
const valueSorted = datas.sort((a, b) => {
|
||||||
const a1 = isNaN(a[1]) && !a[1] ? 0 : Number(a[1])
|
const a1 = isNaN(a[1]) && !a[1] ? 0 : Number(a[1])
|
||||||
const b1 = isNaN(b[1]) && !b[1] ? 0 : Number(b[1])
|
const b1 = isNaN(b[1]) && !b[1] ? 0 : Number(b[1])
|
||||||
|
|||||||
@@ -1,6 +1,13 @@
|
|||||||
<template>
|
<template>
|
||||||
<div :ref="`chart-canvas-${chartId}`" style="height: 100%;width: 100%;overflow: hidden">
|
<div :ref="`chart-canvas-${chartId}`" style="height: 100%;width: 100%;overflow: hidden">
|
||||||
<div :id="`chart-canvas-${chartId}`" class="chart__canvas chart-svg"></div>
|
<div :id="`chart-canvas-${chartId}`" class="chart__canvas chart-svg"></div>
|
||||||
|
<div class="graph-icon-info-box">
|
||||||
|
<div v-for="(item,index) in graphIconArr" :key="index">
|
||||||
|
<div class="graph-icon-content" @mouseenter="graphIconEnter(item)" @mouseleave="graphIconLeave(item)">
|
||||||
|
<i :class="item.class"/><span class="graph-icon-label">{{item.label}}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<alertLabel
|
<alertLabel
|
||||||
v-if="alertLabelShow"
|
v-if="alertLabelShow"
|
||||||
:id="alertLabelId"
|
:id="alertLabelId"
|
||||||
@@ -59,7 +66,15 @@ export default {
|
|||||||
isDrag: false,
|
isDrag: false,
|
||||||
highlightId: '',
|
highlightId: '',
|
||||||
highlightAll: [],
|
highlightAll: [],
|
||||||
radiusArr: [14, 20, 27]
|
radiusArr: [14, 20, 27],
|
||||||
|
graphIconArr: [],
|
||||||
|
nzIcon: [
|
||||||
|
{ class: 'nz-icon nz-icon-overview-project', type: 'asset', label: this.$t('overall.asset') },
|
||||||
|
{ class: 'nz-icon nz-icon-Datacenter2', type: 'datacenter', label: this.$t('overall.dc') },
|
||||||
|
{ class: 'nz-icon nz-icon-project', type: 'project', label: this.$t('overall.project') },
|
||||||
|
{ class: 'nz-icon nz-icon-overview-module', type: 'module', label: this.$t('overall.module') },
|
||||||
|
{ class: 'nz-icon nz-icon-overview-endpoint', type: 'endpoint', label: this.$t('asset.endpoint') }
|
||||||
|
]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
@@ -210,7 +225,9 @@ export default {
|
|||||||
let node = nodeAll.data(nodes)
|
let node = nodeAll.data(nodes)
|
||||||
.enter().append('g')
|
.enter().append('g')
|
||||||
.attr('class', 'node animation')
|
.attr('class', 'node animation')
|
||||||
.attr('id', function (d) { return 'node' + d.id })
|
.attr('id', function (d) {
|
||||||
|
return 'node' + d.id
|
||||||
|
})
|
||||||
.attr('style', function (d) {
|
.attr('style', function (d) {
|
||||||
let str = 'opacity:'
|
let str = 'opacity:'
|
||||||
str += 1
|
str += 1
|
||||||
@@ -452,12 +469,16 @@ export default {
|
|||||||
})
|
})
|
||||||
nodes.push(...res.data.nodes)
|
nodes.push(...res.data.nodes)
|
||||||
nodes = lodash.uniqBy(nodes, 'id')
|
nodes = lodash.uniqBy(nodes, 'id')
|
||||||
|
self.data.nodes = nodes
|
||||||
simulation.stop()
|
simulation.stop()
|
||||||
node = node
|
node = node
|
||||||
.data(nodes)
|
.data(nodes)
|
||||||
.join(
|
.join(
|
||||||
enter => enter.append('g').attr('class', 'node')
|
enter => enter.append('g').attr('class', 'node')
|
||||||
.attr('id', function (d) { return 'node' + d.id })
|
.attr('id', function (child) {
|
||||||
|
return 'node' + child.id
|
||||||
|
}
|
||||||
|
)
|
||||||
.call(drag(simulation))
|
.call(drag(simulation))
|
||||||
.on('mouseleave', nodeMouseout)
|
.on('mouseleave', nodeMouseout)
|
||||||
.on('click', showChildren),
|
.on('click', showChildren),
|
||||||
@@ -497,7 +518,9 @@ export default {
|
|||||||
.data(nodes)
|
.data(nodes)
|
||||||
.join(
|
.join(
|
||||||
enter => enter.append('g').attr('class', 'node')
|
enter => enter.append('g').attr('class', 'node')
|
||||||
.attr('id', function (d) { return 'node' + d.id })
|
.attr('id', function (child) {
|
||||||
|
return 'node' + child.id
|
||||||
|
})
|
||||||
.call(drag(simulation))
|
.call(drag(simulation))
|
||||||
.on('mouseleave', nodeMouseout)
|
.on('mouseleave', nodeMouseout)
|
||||||
.on('click', showChildren),
|
.on('click', showChildren),
|
||||||
@@ -526,6 +549,7 @@ export default {
|
|||||||
simulation.nodes(nodes)
|
simulation.nodes(nodes)
|
||||||
simulation.force('link').links(links)
|
simulation.force('link').links(links)
|
||||||
simulation.restart().tick()
|
simulation.restart().tick()
|
||||||
|
self.data.nodes = nodes
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -536,6 +560,10 @@ export default {
|
|||||||
if (document.getElementById('#circle' + d.id)) {
|
if (document.getElementById('#circle' + d.id)) {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
box.attr('id', 'node' + d.id)
|
||||||
|
if (document.getElementById('node' + d.id)) {
|
||||||
|
document.getElementById('node' + d.id).innerHTML = ''
|
||||||
|
}
|
||||||
box.append('circle')
|
box.append('circle')
|
||||||
.attr('r', d.radius)
|
.attr('r', d.radius)
|
||||||
.attr('fill', d.color)
|
.attr('fill', d.color)
|
||||||
@@ -670,11 +698,63 @@ export default {
|
|||||||
},
|
},
|
||||||
upDate () {
|
upDate () {
|
||||||
|
|
||||||
|
},
|
||||||
|
graphIconEnter (item) {
|
||||||
|
const svg = d3.select('#svgHex' + this.chartId)
|
||||||
|
const node = svg.selectAll('.node')
|
||||||
|
const linkCopy = svg.selectAll('line')
|
||||||
|
node.transition().attr('style', function (d) {
|
||||||
|
let str = 'opacity:'
|
||||||
|
if (d.type === item.type) {
|
||||||
|
str += 1
|
||||||
|
} else {
|
||||||
|
str += 0.05
|
||||||
|
}
|
||||||
|
return str + ';cursor:pointer'
|
||||||
|
}).duration(300)
|
||||||
|
linkCopy.transition().attr('style', function (d) {
|
||||||
|
let str = 'opacity:'
|
||||||
|
str += 0.05
|
||||||
|
return str + ';cursor:pointer'
|
||||||
|
}).duration(300)
|
||||||
|
},
|
||||||
|
graphIconLeave (item) {
|
||||||
|
const svg = d3.select('#svgHex' + this.chartId)
|
||||||
|
const node = svg.selectAll('.node')
|
||||||
|
const linkCopy = svg.selectAll('line')
|
||||||
|
node.transition().attr('style', function (d) {
|
||||||
|
let str = 'opacity:'
|
||||||
|
str += 1
|
||||||
|
return str + ';cursor:pointer'
|
||||||
|
}).duration(300)
|
||||||
|
linkCopy.transition().attr('style', function (d) {
|
||||||
|
let str = 'opacity:'
|
||||||
|
str += 1
|
||||||
|
return str + ';cursor:pointer'
|
||||||
|
}).duration(300)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
'data.nodes': {
|
||||||
|
handler (n) {
|
||||||
|
this.graphIconArr = []
|
||||||
|
this.data.nodes.forEach(item => {
|
||||||
|
if (this.graphIconArr.indexOf(item.type) === -1) {
|
||||||
|
this.graphIconArr.push(item.type)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
this.graphIconArr = this.graphIconArr.map(item => {
|
||||||
|
return this.nzIcon.find(nzIcon => nzIcon.type === item)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// deep: true,
|
||||||
|
immediate: true
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created () {
|
created () {
|
||||||
},
|
},
|
||||||
mounted () {
|
mounted () {
|
||||||
|
|
||||||
},
|
},
|
||||||
beforeDestroy () {
|
beforeDestroy () {
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -182,6 +182,11 @@ export default {
|
|||||||
i: {
|
i: {
|
||||||
required: true
|
required: true
|
||||||
},
|
},
|
||||||
|
isGroup: {
|
||||||
|
type: Boolean,
|
||||||
|
required: false,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
dragIgnoreFrom: {
|
dragIgnoreFrom: {
|
||||||
type: String,
|
type: String,
|
||||||
required: false,
|
required: false,
|
||||||
@@ -699,12 +704,16 @@ export default {
|
|||||||
// (l - m) / (c + m) = x
|
// (l - m) / (c + m) = x
|
||||||
// x = (left - margin) / (coldWidth + margin)
|
// x = (left - margin) / (coldWidth + margin)
|
||||||
let x = Math.round((left - this.margin[0]) / (colWidth + this.margin[0]))
|
let x = Math.round((left - this.margin[0]) / (colWidth + this.margin[0]))
|
||||||
let y = (top - this.margin[1]) / (this.rowHeight + this.margin[1])
|
|
||||||
|
|
||||||
|
let y = ''
|
||||||
|
if (this.isGroup) {
|
||||||
|
y = Math.round((top - this.margin[1]) / (this.rowHeight + this.margin[1]))
|
||||||
|
} else {
|
||||||
|
y = (top - this.margin[1]) / (this.rowHeight + this.margin[1])
|
||||||
|
}
|
||||||
// Capping
|
// Capping
|
||||||
x = Math.max(Math.min(x, this.cols - this.innerW), 0)
|
x = Math.max(Math.min(x, this.cols - this.innerW), 0)
|
||||||
y = Math.max(Math.min(y, this.maxRows - this.innerH), 0)
|
y = Math.max(Math.min(y, this.maxRows - this.innerH), 0)
|
||||||
|
|
||||||
return { x, y }
|
return { x, y }
|
||||||
},
|
},
|
||||||
// Helper for generating column width
|
// Helper for generating column width
|
||||||
|
|||||||
@@ -56,11 +56,11 @@
|
|||||||
</span>
|
</span>
|
||||||
<ul slot="dropdown" v-show="dropdownMenuShow" :id="'dropdownUl'+chartIndex" class="el-dropdown-menu nz-chart-dropdown" style="" >
|
<ul slot="dropdown" v-show="dropdownMenuShow" :id="'dropdownUl'+chartIndex" class="el-dropdown-menu nz-chart-dropdown" style="" >
|
||||||
<li @click="editChart" class="el-dropdown-menu__item">
|
<li @click="editChart" class="el-dropdown-menu__item">
|
||||||
<i class="nz-icon nz-icon-edit" style="font-size: 16px;"></i><span>{{$t('dashboard.edit')}}</span></li>
|
<i class="nz-icon nz-icon-edit" style="font-size: 16px;"></i><span>{{$t('overall.edit')}}</span></li>
|
||||||
<li v-has="'main_delete'" class="el-dropdown-menu__item" @click="removeChart">
|
<li v-has="'main_delete'" class="el-dropdown-menu__item" @click="removeChart">
|
||||||
<i class="nz-icon nz-icon-delete" style="font-size: 16px;"></i>{{$t('dashboard.delete')}}</li>
|
<i class="nz-icon nz-icon-delete" style="font-size: 16px;"></i>{{$t('overall.delete')}}</li>
|
||||||
<li v-has="'main_add'" class="el-dropdown-menu__item" @click="duplicate">
|
<li v-has="'main_add'" class="el-dropdown-menu__item" @click="duplicate">
|
||||||
<i class="el-icon-copy-document" style="font-size: 16px;"></i>{{$t('dashboard.duplicate')}}</li>
|
<i class="el-icon-copy-document" style="font-size: 16px;"></i>{{$t('overall.duplicate')}}</li>
|
||||||
<li v-has="'main_edit'" v-if="from !== 'chartTemp'&&chartData.pid" class="el-dropdown-menu__item" @click="$emit('sync')">
|
<li v-has="'main_edit'" v-if="from !== 'chartTemp'&&chartData.pid" class="el-dropdown-menu__item" @click="$emit('sync')">
|
||||||
<i class="nz-icon nz-icon-sync" style="font-size: 16px;"></i>{{$t('overall.syncChart')}}</li>
|
<i class="nz-icon nz-icon-sync" style="font-size: 16px;"></i>{{$t('overall.syncChart')}}</li>
|
||||||
</ul>
|
</ul>
|
||||||
@@ -110,7 +110,7 @@
|
|||||||
<!--
|
<!--
|
||||||
<Modal title="查看" v-model="screenModal" width="96%" class="line-chart-block-modal">-->
|
<Modal title="查看" v-model="screenModal" width="96%" class="line-chart-block-modal">-->
|
||||||
<el-dialog class="line-chart-block-modal nz-dialog"
|
<el-dialog class="line-chart-block-modal nz-dialog"
|
||||||
:title="$t('dashboard.panel.view')"
|
:title="$t('overall.view')"
|
||||||
:visible.sync="screenModal"
|
:visible.sync="screenModal"
|
||||||
width="90%"
|
width="90%"
|
||||||
@close="screenModal = false;screenLegendListMore=[]"
|
@close="screenModal = false;screenLegendListMore=[]"
|
||||||
|
|||||||
@@ -17,7 +17,7 @@
|
|||||||
<div class="basic-info-table-value">{{chartDetail? chartDetail.name : '--' }}</div>
|
<div class="basic-info-table-value">{{chartDetail? chartDetail.name : '--' }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="basic-info-table-list">
|
<div class="basic-info-table-list">
|
||||||
<div class="basic-info-table-title">{{$t('overall.manageIp')}}</div>
|
<div class="basic-info-table-title">{{$t('asset.manageIp')}}</div>
|
||||||
<div class="basic-info-table-value">{{chartDetail ? chartDetail.manageIp : '--'}}</div>
|
<div class="basic-info-table-value">{{chartDetail ? chartDetail.manageIp : '--'}}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="basic-info-table-list">
|
<div class="basic-info-table-list">
|
||||||
@@ -40,15 +40,15 @@
|
|||||||
<div class="basic-info-table-value">{{chartDetail.dc ? chartDetail.dc.name : '--'}}</div>
|
<div class="basic-info-table-value">{{chartDetail.dc ? chartDetail.dc.name : '--'}}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="basic-info-table-list">
|
<div class="basic-info-table-list">
|
||||||
<div class="basic-info-table-title">{{$t('overall.cabinet')}}</div>
|
<div class="basic-info-table-title">{{$t('asset.cabinet')}}</div>
|
||||||
<div class="basic-info-table-value">{{chartDetail.cabinet ? chartDetail.cabinet.name : '--'}}</div>
|
<div class="basic-info-table-value">{{chartDetail.cabinet ? chartDetail.cabinet.name : '--'}}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="basic-info-table-list">
|
<div class="basic-info-table-list">
|
||||||
<div class="basic-info-table-title">{{$t('overall.brand')}}</div>
|
<div class="basic-info-table-title">{{$t('asset.brand')}}</div>
|
||||||
<div class="basic-info-table-value">{{chartDetail.brand ? chartDetail.brand.name : '--'}}</div>
|
<div class="basic-info-table-value">{{chartDetail.brand ? chartDetail.brand.name : '--'}}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="basic-info-table-list">
|
<div class="basic-info-table-list">
|
||||||
<div class="basic-info-table-title">{{$t('overall.model')}}</div>
|
<div class="basic-info-table-title">{{$t('asset.model')}}</div>
|
||||||
<div class="basic-info-table-value">{{chartDetail.model ? chartDetail.model.name : '--'}}</div>
|
<div class="basic-info-table-value">{{chartDetail.model ? chartDetail.model.name : '--'}}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="basic-info-table-list">
|
<div class="basic-info-table-list">
|
||||||
@@ -68,7 +68,7 @@
|
|||||||
<div class="basic-info-table-value" v-if="chartDetail">
|
<div class="basic-info-table-value" v-if="chartDetail">
|
||||||
<i :class="chartDetail.alertNum ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert vertical-align-top;" @mouseenter="tooltipHover('',true, $event)" @mouseleave="tooltipHover('',false, $event)"></i>
|
<i :class="chartDetail.alertNum ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert vertical-align-top;" @mouseenter="tooltipHover('',true, $event)" @mouseleave="tooltipHover('',false, $event)"></i>
|
||||||
<div v-if="alertNumtooltipShow" class="alert-days-info-tooltip" :style="{left: position.left + 'px',top:position.top + 'px'}">
|
<div v-if="alertNumtooltipShow" class="alert-days-info-tooltip" :style="{left: position.left + 'px',top:position.top + 'px'}">
|
||||||
<div class="tooltip-title">{{$t('project.topology.alert')}}({{$t('asset.pingActive')}})</div>
|
<div class="tooltip-title">{{$t('project.topology.alert')}}({{$t('overall.active')}})</div>
|
||||||
<div class="severity-info" style='justify-content: space-between'>
|
<div class="severity-info" style='justify-content: space-between'>
|
||||||
<div class="severity-name">{{$t('overall.result.total')}}</div>
|
<div class="severity-name">{{$t('overall.result.total')}}</div>
|
||||||
<div class="severity-value">{{chartDetail.alertNum}}</div>
|
<div class="severity-value">{{chartDetail.alertNum}}</div>
|
||||||
@@ -118,7 +118,7 @@
|
|||||||
<div class="basic-info-table-value" v-if="chartDetail">
|
<div class="basic-info-table-value" v-if="chartDetail">
|
||||||
<i :class="chartDetail.alertNum ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert vertical-align-top;" @mouseenter="tooltipHover('',true, $event)" @mouseleave="tooltipHover('',false, $event)"></i>
|
<i :class="chartDetail.alertNum ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert vertical-align-top;" @mouseenter="tooltipHover('',true, $event)" @mouseleave="tooltipHover('',false, $event)"></i>
|
||||||
<div v-if="alertNumtooltipShow" class="alert-days-info-tooltip" :style="{left: position.left + 'px',top:position.top + 'px'}">
|
<div v-if="alertNumtooltipShow" class="alert-days-info-tooltip" :style="{left: position.left + 'px',top:position.top + 'px'}">
|
||||||
<div class="tooltip-title">{{$t('project.topology.alert')}}({{$t('asset.pingActive')}})</div>
|
<div class="tooltip-title">{{$t('project.topology.alert')}}({{$t('overall.active')}})</div>
|
||||||
<div class="severity-info" style='justify-content: space-between'>
|
<div class="severity-info" style='justify-content: space-between'>
|
||||||
<div class="severity-name">{{$t('overall.result.total')}}</div>
|
<div class="severity-name">{{$t('overall.result.total')}}</div>
|
||||||
<div class="severity-value">{{chartDetail.alertNum}}</div>
|
<div class="severity-value">{{chartDetail.alertNum}}</div>
|
||||||
@@ -131,7 +131,7 @@
|
|||||||
<div class="basic-info-table-title">{{$t('overall.state')}}</div>
|
<div class="basic-info-table-title">{{$t('overall.state')}}</div>
|
||||||
<div class="basic-info-table-value">
|
<div class="basic-info-table-value">
|
||||||
<span style="width: auto">
|
<span style="width: auto">
|
||||||
<span class="endpoint-cell-left"><i class="nz-icon nz-icon-Metrics active" /> {{$t('project.endpoint.metrics')}} </span>
|
<span class="endpoint-cell-left"><i class="nz-icon nz-icon-Metrics active" /> {{$t('overall.metric')}} </span>
|
||||||
<span v-if="chartDetail && chartDetail.configs[0].state === 0">
|
<span v-if="chartDetail && chartDetail.configs[0].state === 0">
|
||||||
<span class="active-icon red-bg inline-block"></span>
|
<span class="active-icon red-bg inline-block"></span>
|
||||||
</span>
|
</span>
|
||||||
@@ -143,7 +143,7 @@
|
|||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
<span style="width: auto">
|
<span style="width: auto">
|
||||||
<span class="endpoint-cell-left" style="margin-left: 10px"><i class="nz-icon nz-icon-logs active" /> {{$t('project.endpoint.logs')}} </span>
|
<span class="endpoint-cell-left" style="margin-left: 10px"><i class="nz-icon nz-icon-logs active" /> {{$t('overall.logs')}} </span>
|
||||||
<span v-if="chartDetail && chartDetail.configs[1].state === 0">
|
<span v-if="chartDetail && chartDetail.configs[1].state === 0">
|
||||||
<span class="active-icon red-bg inline-block"></span>
|
<span class="active-icon red-bg inline-block"></span>
|
||||||
</span>
|
</span>
|
||||||
@@ -210,6 +210,7 @@ export default {
|
|||||||
this.showBasicInfo = !this.showBasicInfo
|
this.showBasicInfo = !this.showBasicInfo
|
||||||
},
|
},
|
||||||
init () {
|
init () {
|
||||||
|
if (window.dataJson) { return }
|
||||||
this.loading = true
|
this.loading = true
|
||||||
const weekDays = this.getWeeksTime()
|
const weekDays = this.getWeeksTime()
|
||||||
if (this.trendTimer) {
|
if (this.trendTimer) {
|
||||||
|
|||||||
@@ -43,7 +43,7 @@
|
|||||||
</el-tooltip>
|
</el-tooltip>
|
||||||
</span>
|
</span>
|
||||||
<span v-if="chartInfo.type=='group'" class="chart-header__tool" @click="addChartGroup">
|
<span v-if="chartInfo.type=='group'" class="chart-header__tool" @click="addChartGroup">
|
||||||
<el-tooltip :content="$t('overall.add')" effect="light" placement="top">
|
<el-tooltip :content="$t('button.add')" effect="light" placement="top">
|
||||||
<i class="nz-icon nz-icon-plus tool__icon"></i>
|
<i class="nz-icon nz-icon-plus tool__icon"></i>
|
||||||
</el-tooltip>
|
</el-tooltip>
|
||||||
</span>
|
</span>
|
||||||
@@ -64,15 +64,15 @@
|
|||||||
<ul v-show="dropdownMenuShow" slot="dropdown" class="el-dropdown-menu nz-chart-dropdown">
|
<ul v-show="dropdownMenuShow" slot="dropdown" class="el-dropdown-menu nz-chart-dropdown">
|
||||||
<li class="el-dropdown-menu__item" v-has="'main_edit'" @click="editChart">
|
<li class="el-dropdown-menu__item" v-has="'main_edit'" @click="editChart">
|
||||||
<i class="nz-icon nz-icon-edit" style="font-size: 16px;"></i>
|
<i class="nz-icon nz-icon-edit" style="font-size: 16px;"></i>
|
||||||
<span>{{$t('dashboard.edit')}}</span>
|
<span>{{$t('overall.edit')}}</span>
|
||||||
</li>
|
</li>
|
||||||
<li v-has="'main_delete'" class="el-dropdown-menu__item" @click="removeChart">
|
<li v-has="'main_delete'" class="el-dropdown-menu__item" @click="removeChart">
|
||||||
<i class="nz-icon nz-icon-delete" style="font-size: 16px;"></i>
|
<i class="nz-icon nz-icon-delete" style="font-size: 16px;"></i>
|
||||||
<span>{{$t('dashboard.delete')}}</span>
|
<span>{{$t('overall.delete')}}</span>
|
||||||
</li>
|
</li>
|
||||||
<li v-has="'main_add'" class="el-dropdown-menu__item" @click="duplicate">
|
<li v-has="'main_add'" class="el-dropdown-menu__item" @click="duplicate">
|
||||||
<i class="el-icon-copy-document" style="font-size: 16px;"></i>
|
<i class="el-icon-copy-document" style="font-size: 16px;"></i>
|
||||||
<span>{{$t('dashboard.duplicate')}}</span>
|
<span>{{$t('overall.duplicate')}}</span>
|
||||||
</li>
|
</li>
|
||||||
<li v-if="from !== this.$CONSTANTS.fromRoute.chartTemp && chartInfo.pid" v-has="'main_edit'" class="el-dropdown-menu__item" @click="sync">
|
<li v-if="from !== this.$CONSTANTS.fromRoute.chartTemp && chartInfo.pid" v-has="'main_edit'" class="el-dropdown-menu__item" @click="sync">
|
||||||
<i class="nz-icon nz-icon-sync" style="font-size: 16px;"></i>
|
<i class="nz-icon nz-icon-sync" style="font-size: 16px;"></i>
|
||||||
|
|||||||
@@ -28,6 +28,7 @@
|
|||||||
:min-h="headerH"
|
:min-h="headerH"
|
||||||
:max-h="12"
|
:max-h="12"
|
||||||
:static="item.static"
|
:static="item.static"
|
||||||
|
:isGroup="isGroup"
|
||||||
:class="{
|
:class="{
|
||||||
'group-hide-header':item.type === 'group' && item.param.collapse,
|
'group-hide-header':item.type === 'group' && item.param.collapse,
|
||||||
'opacityItem': item.static
|
'opacityItem': item.static
|
||||||
@@ -358,7 +359,10 @@ export default {
|
|||||||
this.$refs['chart' + item.id][0] && this.$refs['chart' + item.id][0].groupShow(item.param.collapse)
|
this.$refs['chart' + item.id][0] && this.$refs['chart' + item.id][0].groupShow(item.param.collapse)
|
||||||
this.$refs['chart' + item.id][0] && this.$refs['chart' + item.id][0].$refs.chart && this.$refs['chart' + item.id][0].$refs.chart.$refs['chart' + item.id] && this.$refs['chart' + item.id][0].$refs.chart.$refs['chart' + item.id].$refs.chartList.resize()
|
this.$refs['chart' + item.id][0] && this.$refs['chart' + item.id][0].$refs.chart && this.$refs['chart' + item.id][0].$refs.chart.$refs['chart' + item.id] && this.$refs['chart' + item.id][0].$refs.chart.$refs['chart' + item.id].$refs.chartList.resize()
|
||||||
}
|
}
|
||||||
|
try {
|
||||||
this.$refs['chart' + item.id][0] && this.$refs['chart' + item.id][0].resize()
|
this.$refs['chart' + item.id][0] && this.$refs['chart' + item.id][0].resize()
|
||||||
|
} catch (error) {
|
||||||
|
}
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
refreshPanel () {
|
refreshPanel () {
|
||||||
@@ -444,6 +448,15 @@ export default {
|
|||||||
window.removeEventListener('resize', this.resize)
|
window.removeEventListener('resize', this.resize)
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
|
// 监听查看模式变化
|
||||||
|
'$store.state.panel.mode': {
|
||||||
|
immediate: true,
|
||||||
|
handler (val) {
|
||||||
|
setTimeout(() => {
|
||||||
|
this.resize()
|
||||||
|
}, 100)
|
||||||
|
}
|
||||||
|
},
|
||||||
dataList: {
|
dataList: {
|
||||||
immediate: true,
|
immediate: true,
|
||||||
deep: true,
|
deep: true,
|
||||||
|
|||||||
@@ -1,4 +1,5 @@
|
|||||||
import lodash from 'lodash'
|
import lodash from 'lodash'
|
||||||
|
import * as echarts from 'echarts'
|
||||||
import { getMetricTypeValue } from '@/components/common/js/tools'
|
import { getMetricTypeValue } from '@/components/common/js/tools'
|
||||||
import { getChart, getMousePoint, setChart } from '@/components/common/js/common'
|
import { getChart, getMousePoint, setChart } from '@/components/common/js/common'
|
||||||
import { randomcolor } from '@/components/common/js/radomcolor/randomcolor'
|
import { randomcolor } from '@/components/common/js/radomcolor/randomcolor'
|
||||||
@@ -40,6 +41,20 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
// 十六进制转为rgba
|
||||||
|
hexToRgb (hex, a = 1) {
|
||||||
|
/*
|
||||||
|
hex: {String}, "#333", "#AF0382"
|
||||||
|
*/
|
||||||
|
hex = hex.slice(1)
|
||||||
|
if (hex.length == 3) {
|
||||||
|
hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2]
|
||||||
|
}
|
||||||
|
const r = parseInt(hex.slice(0, 2), 16)
|
||||||
|
const g = parseInt(hex.slice(2, 4), 16)
|
||||||
|
const b = parseInt(hex.slice(4, 6), 16)
|
||||||
|
return `rgba(${r}, ${g}, ${b}, ${a})`
|
||||||
|
},
|
||||||
handleTimeSeries (chartInfo, seriesTemplate, originalDatas) {
|
handleTimeSeries (chartInfo, seriesTemplate, originalDatas) {
|
||||||
const series = []
|
const series = []
|
||||||
let colorIndex = 0
|
let colorIndex = 0
|
||||||
@@ -74,6 +89,21 @@ export default {
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
// 判断如果是面积图 颜色设为渐变色
|
||||||
|
if (s.areaStyle && this.colorList.length) {
|
||||||
|
s.areaStyle = {
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: this.hexToRgb(this.colorList[colorIndex], 0.1)
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: this.hexToRgb(this.colorList[colorIndex], 1)
|
||||||
|
}
|
||||||
|
])
|
||||||
|
}
|
||||||
|
}
|
||||||
series.push(s)
|
series.push(s)
|
||||||
colorIndex++
|
colorIndex++
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -435,10 +435,16 @@ export default {
|
|||||||
break
|
break
|
||||||
}
|
}
|
||||||
case 'system': {
|
case 'system': {
|
||||||
|
this.chartInfo.elements = this.chartInfo.param.datasource
|
||||||
this.chartData = []
|
this.chartData = []
|
||||||
this.chartData.push(this.dataJson[this.chartInfo.id + '_' + 0].result)
|
if (this.chartInfo.type === 'assetInfo' || this.chartInfo.type === 'endpointInfo') {
|
||||||
}
|
this.chartData = this.dataJson[this.chartInfo.id + '_' + 0].data
|
||||||
|
this.loading = false
|
||||||
break
|
break
|
||||||
|
}
|
||||||
|
this.chartData.push(this.dataJson[this.chartInfo.id + '_' + 0].result)
|
||||||
|
break
|
||||||
|
}
|
||||||
case 'misc': {
|
case 'misc': {
|
||||||
this.loading = false
|
this.loading = false
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
@@ -576,6 +582,9 @@ export default {
|
|||||||
this.$emit('showFullscreen', show, this.chartInfo)
|
this.$emit('showFullscreen', show, this.chartInfo)
|
||||||
},
|
},
|
||||||
groupShow (flag) {
|
groupShow (flag) {
|
||||||
|
if (this.chartInfo.type === 'group' && !flag) {
|
||||||
|
this.chartData = lodash.get(this, 'chartInfo.children', [])
|
||||||
|
}
|
||||||
this.chartInfo.param.collapse = flag
|
this.chartInfo.param.collapse = flag
|
||||||
this.groupInit()
|
this.groupInit()
|
||||||
bus.$emit('groupMove', '', '', true)
|
bus.$emit('groupMove', '', '', true)
|
||||||
|
|||||||
@@ -95,7 +95,7 @@
|
|||||||
<div class="footer" slot="footer">
|
<div class="footer" slot="footer">
|
||||||
<div class="el-message-box__btns" style="text-align: right;margin-top: 20px;">
|
<div class="el-message-box__btns" style="text-align: right;margin-top: 20px;">
|
||||||
<button @click="upload" class="el-button el-button--default el-button--small">
|
<button @click="upload" class="el-button el-button--default el-button--small">
|
||||||
<span>{{$t('webshell.uploadButtonTitle')}}</span>
|
<span>{{$t('overall.upload')}}</span>
|
||||||
</button>
|
</button>
|
||||||
<button @click="closeDialog" class="el-button el-button--default el-button--small" >
|
<button @click="closeDialog" class="el-button el-button--default el-button--small" >
|
||||||
<span>{{$t('overall.cancel')}}</span>
|
<span>{{$t('overall.cancel')}}</span>
|
||||||
@@ -119,7 +119,7 @@
|
|||||||
<div class="footer" slot="footer">
|
<div class="footer" slot="footer">
|
||||||
<div class="el-message-box__btns" style="text-align: right;margin-top: 20px;">
|
<div class="el-message-box__btns" style="text-align: right;margin-top: 20px;">
|
||||||
<button @click="download" class="el-button el-button--default el-button--small">
|
<button @click="download" class="el-button el-button--default el-button--small">
|
||||||
<span>{{$t('webshell.downloadButtonTitle')}}</span>
|
<span>{{$t('overall.download')}}</span>
|
||||||
</button>
|
</button>
|
||||||
<button @click="closeDownloadDialog" class="el-button el-button--default el-button--small">
|
<button @click="closeDownloadDialog" class="el-button el-button--default el-button--small">
|
||||||
<span>{{$t('overall.cancel')}}</span>
|
<span>{{$t('overall.cancel')}}</span>
|
||||||
@@ -198,28 +198,28 @@
|
|||||||
<el-option v-for="item in authProtocol" :id="'dc-principal-op-'+item.value" :key="item.value" :label="item.name" :value="item.value"></el-option>
|
<el-option v-for="item in authProtocol" :id="'dc-principal-op-'+item.value" :key="item.value" :label="item.name" :value="item.value"></el-option>
|
||||||
</el-select>
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item :label='$t("webshell.authType")' prop="authType" @change="authTypeChange" >
|
<el-form-item :label='$t("asset.authType")' prop="authType" @change="authTypeChange" >
|
||||||
<el-select value-key="id" popper-class="config-dropdown w260 right-box-select-top right-public-box-dropdown-top" v-model="customConnect.authType" :disabled="customConnect.authProtocol === 2" placeholder="" size="small" id="webshell-box-input-protocol">
|
<el-select value-key="id" popper-class="config-dropdown w260 right-box-select-top right-public-box-dropdown-top" v-model="customConnect.authType" :disabled="customConnect.authProtocol === 2" placeholder="" size="small" id="webshell-box-input-protocol">
|
||||||
<el-option v-for="item in authType" :id="'dc-principal-op-'+item.value" :key="item.value" :label="item.name" :value="item.value"></el-option>
|
<el-option v-for="item in authType" :id="'dc-principal-op-'+item.value" :key="item.value" :label="item.name" :value="item.value"></el-option>
|
||||||
</el-select>
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item :label='$t("webshell.host")' prop="host">
|
<el-form-item :label='$t("asset.host")' prop="host">
|
||||||
<el-input v-model="customConnect.host" size="small"/>
|
<el-input v-model="customConnect.host" size="small"/>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item :label='$t("webshell.port")' prop="port">
|
<el-form-item :label='$t("asset.port")' prop="port">
|
||||||
<el-input v-model="customConnect.port" size="small"/>
|
<el-input v-model="customConnect.port" size="small"/>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item :label='$t("webshell.authUsername")' prop="authUsername">
|
<el-form-item :label='$t("profile.username")' prop="authUsername">
|
||||||
<el-input v-model="customConnect.authUsername" size="small" autocomplete="new-password"/>
|
<el-input v-model="customConnect.authUsername" size="small" autocomplete="new-password"/>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item
|
<el-form-item
|
||||||
v-if="customConnect.authType === 2"
|
v-if="customConnect.authType === 2"
|
||||||
:label='$t("webshell.authPriKey")'
|
:label='$t("asset.talon.token")'
|
||||||
prop="authPriKey"
|
prop="authPriKey"
|
||||||
>
|
>
|
||||||
<el-input v-model="customConnect.authPriKey" size="small" autocomplete="new-password"/>
|
<el-input v-model="customConnect.authPriKey" size="small" autocomplete="new-password"/>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item :label='$t("webshell.authPin")' prop="authPin"
|
<el-form-item :label='$t("login.pin")' prop="authPin"
|
||||||
:rules="[
|
:rules="[
|
||||||
{ required: customConnect.authType ===1, message:$t('validate.required'), trigger: 'change'},
|
{ required: customConnect.authType ===1, message:$t('validate.required'), trigger: 'change'},
|
||||||
]">
|
]">
|
||||||
@@ -227,13 +227,13 @@
|
|||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item
|
<el-form-item
|
||||||
v-if="customConnect.authProtocol === 2"
|
v-if="customConnect.authProtocol === 2"
|
||||||
:label='$t("webshell.authUserTip")'
|
:label='$t("asset.usernamePrompt")'
|
||||||
prop="authUserTip">
|
prop="authUserTip">
|
||||||
<el-input v-model="customConnect.authUserTip" size="small"/>
|
<el-input v-model="customConnect.authUserTip" size="small"/>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item
|
<el-form-item
|
||||||
v-if="customConnect.authProtocol === 2"
|
v-if="customConnect.authProtocol === 2"
|
||||||
:label='$t("webshell.authPinTip")'
|
:label='$t("asset.pinPrompt")'
|
||||||
prop="authPinTip"
|
prop="authPinTip"
|
||||||
>
|
>
|
||||||
<el-input v-model="customConnect.authPinTip" size="small"/>
|
<el-input v-model="customConnect.authPinTip" size="small"/>
|
||||||
@@ -318,11 +318,11 @@ export default {
|
|||||||
// upoload-download
|
// upoload-download
|
||||||
|
|
||||||
currentUuid: '',
|
currentUuid: '',
|
||||||
uploadBox: { showUpload: false, title: this.$t('webshell.uploadTitle') },
|
uploadBox: { showUpload: false, title: this.$t('overall.upload') },
|
||||||
uploadFile: { file: '', path: '', uuid: '' },
|
uploadFile: { file: '', path: '', uuid: '' },
|
||||||
uploadFileList: [],
|
uploadFileList: [],
|
||||||
uploadResult: null,
|
uploadResult: null,
|
||||||
downloadBox: { showDownload: false, title: this.$t('webshell.downloadTitle') },
|
downloadBox: { showDownload: false, title: this.$t('overall.download') },
|
||||||
downloadFile: { path: '', uuid: '' },
|
downloadFile: { path: '', uuid: '' },
|
||||||
downloadFileList: [],
|
downloadFileList: [],
|
||||||
downloadResult: null,
|
downloadResult: null,
|
||||||
|
|||||||
@@ -102,7 +102,7 @@
|
|||||||
<button type="button" @click="previewTopology" v-if="!isPreview" class="nz-btn nz-btn-size-normal nz-btn-style-light"
|
<button type="button" @click="previewTopology" v-if="!isPreview" class="nz-btn nz-btn-size-normal nz-btn-style-light"
|
||||||
style="margin-right: 20px"
|
style="margin-right: 20px"
|
||||||
>
|
>
|
||||||
{{$t('project.topology.preview')}}
|
{{$t('overall.preview')}}
|
||||||
</button>
|
</button>
|
||||||
<button type="button" v-if="isPreview" class="nz-btn nz-btn-size-normal nz-btn-style-light" @click="previewExit"
|
<button type="button" v-if="isPreview" class="nz-btn nz-btn-size-normal nz-btn-style-light" @click="previewExit"
|
||||||
style="margin-right: 20px"
|
style="margin-right: 20px"
|
||||||
@@ -113,7 +113,7 @@
|
|||||||
:disabled="prevent_opt.save"
|
:disabled="prevent_opt.save"
|
||||||
:class="{'nz-btn-disabled':prevent_opt.save}"
|
:class="{'nz-btn-disabled':prevent_opt.save}"
|
||||||
style="margin-right: 20px">
|
style="margin-right: 20px">
|
||||||
{{$t('project.topology.save')}}
|
{{$t('overall.save')}}
|
||||||
</button>
|
</button>
|
||||||
<button type="button" class="nz-btn nz-btn-size-normal nz-btn-style-normal" style="margin-right: 20px" @click="cancelTopology">
|
<button type="button" class="nz-btn nz-btn-size-normal nz-btn-style-normal" style="margin-right: 20px" @click="cancelTopology">
|
||||||
{{$t('project.topology.exit')}}
|
{{$t('project.topology.exit')}}
|
||||||
@@ -122,7 +122,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div v-if="(!editTopologyFlag&&!fromOverView)&&!fromChart" class="top-tools" style="padding-left: 10px">
|
<div v-if="(!editTopologyFlag&&!fromOverView)&&!fromChart" class="top-tools" style="padding-left: 10px">
|
||||||
</div>
|
</div>
|
||||||
<div class="nz-table2" :class="fromChart ? 'h100': ''">
|
<div class="nz-table-list" :class="fromChart ? 'h100': ''">
|
||||||
<!--悬浮network部分-->
|
<!--悬浮network部分-->
|
||||||
<div class="network-info">
|
<div class="network-info">
|
||||||
<div v-if="popDataShow.main">
|
<div v-if="popDataShow.main">
|
||||||
@@ -302,7 +302,7 @@
|
|||||||
v-has="'topo_icon_save'" :disabled="prevent_opt.save"
|
v-has="'topo_icon_save'" :disabled="prevent_opt.save"
|
||||||
:class="{'nz-btn-disabled':prevent_opt.save}"
|
:class="{'nz-btn-disabled':prevent_opt.save}"
|
||||||
style="margin-right: 20px">
|
style="margin-right: 20px">
|
||||||
{{$t('project.topology.save')}}
|
{{$t('overall.save')}}
|
||||||
</button>
|
</button>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
@@ -327,7 +327,7 @@ import {
|
|||||||
myCubec,
|
myCubec,
|
||||||
myCubeAnchors
|
myCubeAnchors
|
||||||
} from '../project/L5/services/canvas.js'
|
} from '../project/L5/services/canvas.js'
|
||||||
import {getTopology, getTopologyImg, setTopology, setTopologyImg} from '../js/common'
|
import {getTopology, setTopology} from '../js/common'
|
||||||
import CanvasProps from '../project/L5/CanvasProps'
|
import CanvasProps from '../project/L5/CanvasProps'
|
||||||
import topologyTopTool from '../project/L5/topologyTopTool'
|
import topologyTopTool from '../project/L5/topologyTopTool'
|
||||||
import popDataMain from '../project/popData/Main'
|
import popDataMain from '../project/popData/Main'
|
||||||
@@ -355,7 +355,7 @@ export default {
|
|||||||
name: 'diagram',
|
name: 'diagram',
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
title: this.$t('overall.customPicture'),
|
title: this.$t('overall.uploadCustomPicture'),
|
||||||
objChange: false, // project 变化 用于判断 init是否执行完成 执行完成 才可以执行下次变化
|
objChange: false, // project 变化 用于判断 init是否执行完成 执行完成 才可以执行下次变化
|
||||||
chartDataInfo: {},
|
chartDataInfo: {},
|
||||||
topoPrevData: {}, // 预览数据
|
topoPrevData: {}, // 预览数据
|
||||||
@@ -491,7 +491,7 @@ export default {
|
|||||||
id: 'endpoint',
|
id: 'endpoint',
|
||||||
title: this.$t('project.topology.endpoint')
|
title: this.$t('project.topology.endpoint')
|
||||||
},
|
},
|
||||||
{ top: '-40px', left: '19px', className: 'nz-icon-asset', id: 'asset', title: this.$t('project.topology.asset') },
|
{ top: '-40px', left: '19px', className: 'nz-icon-asset', id: 'asset', title: this.$t('asset.asset') },
|
||||||
{ top: '-4px', left: '40px', className: '', id: 'other', title: '' },
|
{ top: '-4px', left: '40px', className: '', id: 'other', title: '' },
|
||||||
{ top: '30px', left: '19px', className: '', id: 'other', title: '' },
|
{ top: '30px', left: '19px', className: '', id: 'other', title: '' },
|
||||||
{ top: '30px', left: '-21px', className: 'nz-icon-info-normal', id: 'info', title: this.$t('project.topology.info') },
|
{ top: '30px', left: '-21px', className: 'nz-icon-info-normal', id: 'info', title: this.$t('project.topology.info') },
|
||||||
@@ -1744,7 +1744,7 @@ export default {
|
|||||||
res.data.list.forEach((item, index) => {
|
res.data.list.forEach((item, index) => {
|
||||||
item.imageName = item.name
|
item.imageName = item.name
|
||||||
delete item.name
|
delete item.name
|
||||||
const nowImage = getTopologyImg(item.id) ? JSON.parse(getTopologyImg(item.id)) : ''
|
const nowImage = ''
|
||||||
if (nowImage && nowImage.data) {
|
if (nowImage && nowImage.data) {
|
||||||
promiseArr.push(nowImage)
|
promiseArr.push(nowImage)
|
||||||
} else {
|
} else {
|
||||||
@@ -1756,14 +1756,6 @@ export default {
|
|||||||
this.iconArray = [...res.data.list]
|
this.iconArray = [...res.data.list]
|
||||||
this.iconArray.forEach((item, index) => {
|
this.iconArray.forEach((item, index) => {
|
||||||
item.image = res2[index].data
|
item.image = res2[index].data
|
||||||
const nowImage = getTopologyImg(item.id) ? JSON.parse(getTopologyImg(item.id)) : ''
|
|
||||||
if (!nowImage || (nowImage && !nowImage.data)) {
|
|
||||||
setTopologyImg(item.id, JSON.stringify({
|
|
||||||
data: res2[index].data,
|
|
||||||
width: res2[index].width,
|
|
||||||
height: res2[index].height
|
|
||||||
}))
|
|
||||||
}
|
|
||||||
const group = this.tools.find(tool => tool.group === item.unit)
|
const group = this.tools.find(tool => tool.group === item.unit)
|
||||||
if (group) {
|
if (group) {
|
||||||
group.children.push({
|
group.children.push({
|
||||||
@@ -1814,7 +1806,7 @@ export default {
|
|||||||
}
|
}
|
||||||
imgidList.forEach((item, index) => {
|
imgidList.forEach((item, index) => {
|
||||||
if (item.data.imageId && imageAllId.data.list.find(image => item.data.imageId === image.id)) {
|
if (item.data.imageId && imageAllId.data.list.find(image => item.data.imageId === image.id)) {
|
||||||
const nowImage = getTopologyImg(item.data.imageId) ? JSON.parse(getTopologyImg(item.data.imageId)) : ''
|
const nowImage = ''
|
||||||
if (nowImage && nowImage.data) {
|
if (nowImage && nowImage.data) {
|
||||||
promiseArr.push(nowImage)
|
promiseArr.push(nowImage)
|
||||||
} else {
|
} else {
|
||||||
@@ -1835,14 +1827,6 @@ export default {
|
|||||||
this.iconArray.forEach((item, index) => {
|
this.iconArray.forEach((item, index) => {
|
||||||
if (item.id) {
|
if (item.id) {
|
||||||
item.image = res2[index].data
|
item.image = res2[index].data
|
||||||
const nowImage = getTopologyImg(item.id) ? JSON.parse(getTopologyImg(item.id)) : ''
|
|
||||||
if (!nowImage || (nowImage && !nowImage.image)) {
|
|
||||||
setTopologyImg(item.id, JSON.stringify({
|
|
||||||
data: res2[index].data,
|
|
||||||
width: res2[index].width,
|
|
||||||
height: res2[index].height
|
|
||||||
}))
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
this.imgInit = true
|
this.imgInit = true
|
||||||
|
|||||||
@@ -57,7 +57,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div> -->
|
</div> -->
|
||||||
<div class="alert-label-box">
|
<div class="alert-label-box">
|
||||||
<div class="alert-label-title">{{ $t("overall.manageIp") }}</div>
|
<div class="alert-label-title">{{ $t("asset.manageIp") }}</div>
|
||||||
<div class="alert-label-value">
|
<div class="alert-label-value">
|
||||||
{{
|
{{
|
||||||
alertLabelData && alertLabelData.manageIp
|
alertLabelData && alertLabelData.manageIp
|
||||||
@@ -123,7 +123,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="alert-label-box">
|
<div class="alert-label-box">
|
||||||
<div class="alert-label-title">{{ $t("overall.cabinet") }}</div>
|
<div class="alert-label-title">{{ $t("asset.cabinet") }}</div>
|
||||||
<div class="alert-label-value">
|
<div class="alert-label-value">
|
||||||
{{
|
{{
|
||||||
alertLabelData &&
|
alertLabelData &&
|
||||||
@@ -135,7 +135,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="alert-label-box">
|
<div class="alert-label-box">
|
||||||
<div class="alert-label-title">{{ $t("overall.brand") }}</div>
|
<div class="alert-label-title">{{ $t("asset.brand") }}</div>
|
||||||
<div class="alert-label-value">
|
<div class="alert-label-value">
|
||||||
{{
|
{{
|
||||||
alertLabelData && alertLabelData.brand && alertLabelData.brand.name
|
alertLabelData && alertLabelData.brand && alertLabelData.brand.name
|
||||||
@@ -145,7 +145,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="alert-label-box">
|
<div class="alert-label-box">
|
||||||
<div class="alert-label-title">{{ $t("overall.model") }}</div>
|
<div class="alert-label-title">{{ $t("asset.model") }}</div>
|
||||||
<div class="alert-label-value">
|
<div class="alert-label-value">
|
||||||
{{
|
{{
|
||||||
alertLabelData && alertLabelData.model && alertLabelData.model.name
|
alertLabelData && alertLabelData.model && alertLabelData.model.name
|
||||||
@@ -169,7 +169,7 @@
|
|||||||
:style="{ left: position.left + 'px', top: position.top + 'px' }"
|
:style="{ left: position.left + 'px', top: position.top + 'px' }"
|
||||||
>
|
>
|
||||||
<div class="tooltip-title">
|
<div class="tooltip-title">
|
||||||
{{ $t("project.topology.alert") }}({{ $t("asset.pingActive") }})
|
{{ $t("project.topology.alert") }}({{ $t("overall.active") }})
|
||||||
</div>
|
</div>
|
||||||
<div class="severity-info" style="justify-content: space-between">
|
<div class="severity-info" style="justify-content: space-between">
|
||||||
<div class="severity-name">{{ $t("overall.result.total") }}</div>
|
<div class="severity-name">{{ $t("overall.result.total") }}</div>
|
||||||
@@ -263,7 +263,7 @@
|
|||||||
:style="{ left: position.left + 'px', top: position.top + 'px' }"
|
:style="{ left: position.left + 'px', top: position.top + 'px' }"
|
||||||
>
|
>
|
||||||
<div class="tooltip-title">
|
<div class="tooltip-title">
|
||||||
{{ $t("project.topology.alert") }}({{ $t("asset.pingActive") }})
|
{{ $t("project.topology.alert") }}({{ $t("overall.active") }})
|
||||||
</div>
|
</div>
|
||||||
<div class="severity-info" style="justify-content: space-between">
|
<div class="severity-info" style="justify-content: space-between">
|
||||||
<div class="severity-name">{{ $t("overall.result.total") }}</div>
|
<div class="severity-name">{{ $t("overall.result.total") }}</div>
|
||||||
@@ -358,7 +358,7 @@
|
|||||||
:style="{ left: position.left + 'px', top: position.top + 'px' }"
|
:style="{ left: position.left + 'px', top: position.top + 'px' }"
|
||||||
>
|
>
|
||||||
<div class="tooltip-title">
|
<div class="tooltip-title">
|
||||||
{{ $t("project.topology.alert") }}({{ $t("asset.pingActive") }})
|
{{ $t("project.topology.alert") }}({{ $t("overall.active") }})
|
||||||
</div>
|
</div>
|
||||||
<div class="severity-info" style="justify-content: space-between">
|
<div class="severity-info" style="justify-content: space-between">
|
||||||
<div class="severity-name">{{ $t("overall.result.total") }}</div>
|
<div class="severity-name">{{ $t("overall.result.total") }}</div>
|
||||||
@@ -457,7 +457,7 @@
|
|||||||
:style="{ left: position.left + 'px', top: position.top + 'px' }"
|
:style="{ left: position.left + 'px', top: position.top + 'px' }"
|
||||||
>
|
>
|
||||||
<div class="tooltip-title">
|
<div class="tooltip-title">
|
||||||
{{ $t("project.topology.alert") }}({{ $t("asset.pingActive") }})
|
{{ $t("project.topology.alert") }}({{ $t("overall.active") }})
|
||||||
</div>
|
</div>
|
||||||
<div class="severity-info" style="justify-content: space-between">
|
<div class="severity-info" style="justify-content: space-between">
|
||||||
<div class="severity-name">{{ $t("overall.result.total") }}</div>
|
<div class="severity-name">{{ $t("overall.result.total") }}</div>
|
||||||
@@ -476,7 +476,7 @@
|
|||||||
<span style="width: auto">
|
<span style="width: auto">
|
||||||
<span class="endpoint-cell-left"
|
<span class="endpoint-cell-left"
|
||||||
><i class="nz-icon nz-icon-Metrics active" />
|
><i class="nz-icon nz-icon-Metrics active" />
|
||||||
{{ $t("project.endpoint.metrics") }}
|
{{ $t("overall.metric") }}
|
||||||
</span>
|
</span>
|
||||||
<span
|
<span
|
||||||
v-if="alertLabelData && alertLabelData.configs[0].state === 0"
|
v-if="alertLabelData && alertLabelData.configs[0].state === 0"
|
||||||
@@ -497,7 +497,7 @@
|
|||||||
<span style="width: auto">
|
<span style="width: auto">
|
||||||
<span class="endpoint-cell-left" style="margin-left: 10px"
|
<span class="endpoint-cell-left" style="margin-left: 10px"
|
||||||
><i class="nz-icon nz-icon-logs active" />
|
><i class="nz-icon nz-icon-logs active" />
|
||||||
{{ $t("project.endpoint.logs") }}
|
{{ $t("overall.logs") }}
|
||||||
</span>
|
</span>
|
||||||
<span
|
<span
|
||||||
v-if="alertLabelData && alertLabelData.configs[1].state === 0"
|
v-if="alertLabelData && alertLabelData.configs[1].state === 0"
|
||||||
@@ -533,7 +533,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="alert-label-box">
|
<div class="alert-label-box">
|
||||||
<div class="alert-label-title">{{ $t("overall.location") }}</div>
|
<div class="alert-label-title">{{ $t("asset.location") }}</div>
|
||||||
<div class="alert-label-value">
|
<div class="alert-label-value">
|
||||||
{{
|
{{
|
||||||
alertLabelData && alertLabelData.location && alertLabelData.location
|
alertLabelData && alertLabelData.location && alertLabelData.location
|
||||||
@@ -543,7 +543,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="alert-label-box">
|
<div class="alert-label-box">
|
||||||
<div class="alert-label-title">{{ $t("overall.cabinet") }}</div>
|
<div class="alert-label-title">{{ $t("asset.cabinet") }}</div>
|
||||||
<div class="alert-label-value">
|
<div class="alert-label-value">
|
||||||
<i
|
<i
|
||||||
v-if="alertLabelData"
|
v-if="alertLabelData"
|
||||||
@@ -589,7 +589,7 @@
|
|||||||
:style="{ left: position.left + 'px', top: position.top + 'px' }"
|
:style="{ left: position.left + 'px', top: position.top + 'px' }"
|
||||||
>
|
>
|
||||||
<div class="tooltip-title">
|
<div class="tooltip-title">
|
||||||
{{ $t("project.topology.alert") }}({{ $t("asset.pingActive") }})
|
{{ $t("project.topology.alert") }}({{ $t("overall.active") }})
|
||||||
</div>
|
</div>
|
||||||
<div class="severity-info" style="justify-content: space-between">
|
<div class="severity-info" style="justify-content: space-between">
|
||||||
<div class="severity-name">{{ $t("overall.result.total") }}</div>
|
<div class="severity-name">{{ $t("overall.result.total") }}</div>
|
||||||
|
|||||||
@@ -17,7 +17,7 @@
|
|||||||
<div class="alert-label-value">{{alertLabelData && alertLabelData.name ? alertLabelData.name : '--'}}</div>
|
<div class="alert-label-value">{{alertLabelData && alertLabelData.name ? alertLabelData.name : '--'}}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="alert-label-box">
|
<div class="alert-label-box">
|
||||||
<div class="alert-label-title">{{$t('overall.manageIp')}}</div>
|
<div class="alert-label-title">{{$t('asset.manageIp')}}</div>
|
||||||
<div class="alert-label-value">{{alertLabelData && alertLabelData.manageIp ? alertLabelData.manageIp : '--'}}</div>
|
<div class="alert-label-value">{{alertLabelData && alertLabelData.manageIp ? alertLabelData.manageIp : '--'}}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="alert-label-box">
|
<div class="alert-label-box">
|
||||||
@@ -40,15 +40,15 @@
|
|||||||
<div class="alert-label-value">{{alertLabelData && alertLabelData.dc && alertLabelData.dc.name ? alertLabelData.dc.name:'--'}}</div>
|
<div class="alert-label-value">{{alertLabelData && alertLabelData.dc && alertLabelData.dc.name ? alertLabelData.dc.name:'--'}}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="alert-label-box">
|
<div class="alert-label-box">
|
||||||
<div class="alert-label-title">{{$t('overall.cabinet')}}</div>
|
<div class="alert-label-title">{{$t('asset.cabinet')}}</div>
|
||||||
<div class="alert-label-value">{{alertLabelData && alertLabelData.cabinet && alertLabelData.cabinet.name ? alertLabelData.cabinet.name : '--'}}</div>
|
<div class="alert-label-value">{{alertLabelData && alertLabelData.cabinet && alertLabelData.cabinet.name ? alertLabelData.cabinet.name : '--'}}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="alert-label-box">
|
<div class="alert-label-box">
|
||||||
<div class="alert-label-title">{{$t('overall.brand')}}</div>
|
<div class="alert-label-title">{{$t('asset.brand')}}</div>
|
||||||
<div class="alert-label-value">{{alertLabelData && alertLabelData.brand && alertLabelData.brand.name ? alertLabelData.brand.name : '--'}}</div>
|
<div class="alert-label-value">{{alertLabelData && alertLabelData.brand && alertLabelData.brand.name ? alertLabelData.brand.name : '--'}}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="alert-label-box">
|
<div class="alert-label-box">
|
||||||
<div class="alert-label-title">{{$t('overall.model')}}</div>
|
<div class="alert-label-title">{{$t('asset.model')}}</div>
|
||||||
<div class="alert-label-value">{{alertLabelData && alertLabelData.model && alertLabelData.model.name ? alertLabelData.model.name : '--'}}</div>
|
<div class="alert-label-value">{{alertLabelData && alertLabelData.model && alertLabelData.model.name ? alertLabelData.model.name : '--'}}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="alert-label-box">
|
<div class="alert-label-box">
|
||||||
@@ -56,7 +56,7 @@
|
|||||||
<div class="alert-label-value" v-if="alertLabelData">
|
<div class="alert-label-value" v-if="alertLabelData">
|
||||||
<i :class="alertLabelData.alertNum ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert vertical-align-top;" @mouseenter="tooltipHover('',true, $event)" @mouseleave="tooltipHover('',false, $event)"></i>
|
<i :class="alertLabelData.alertNum ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert vertical-align-top;" @mouseenter="tooltipHover('',true, $event)" @mouseleave="tooltipHover('',false, $event)"></i>
|
||||||
<div v-if="alertNumtooltipShow" class="alert-days-info-tooltip" :style="{left: position.left + 'px',top:position.top + 'px'}">
|
<div v-if="alertNumtooltipShow" class="alert-days-info-tooltip" :style="{left: position.left + 'px',top:position.top + 'px'}">
|
||||||
<div class="tooltip-title">{{$t('project.topology.alert')}}({{$t('asset.pingActive')}})</div>
|
<div class="tooltip-title">{{$t('project.topology.alert')}}({{$t('overall.active')}})</div>
|
||||||
<div class="severity-info" style='justify-content: space-between'>
|
<div class="severity-info" style='justify-content: space-between'>
|
||||||
<div class="severity-name">{{$t('overall.result.total')}}</div>
|
<div class="severity-name">{{$t('overall.result.total')}}</div>
|
||||||
<div class="severity-value">{{alertLabelData.alertNum}}</div>
|
<div class="severity-value">{{alertLabelData.alertNum}}</div>
|
||||||
@@ -107,7 +107,7 @@
|
|||||||
<div class="alert-label-value" v-if="alertLabelData">
|
<div class="alert-label-value" v-if="alertLabelData">
|
||||||
<i :class="alertLabelData.alertNum ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert vertical-align-top;" @mouseenter="tooltipHover('',true, $event)" @mouseleave="tooltipHover('',false, $event)"></i>
|
<i :class="alertLabelData.alertNum ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert vertical-align-top;" @mouseenter="tooltipHover('',true, $event)" @mouseleave="tooltipHover('',false, $event)"></i>
|
||||||
<div v-if="alertNumtooltipShow" class="alert-days-info-tooltip" :style="{left: position.left + 'px',top:position.top + 'px'}">
|
<div v-if="alertNumtooltipShow" class="alert-days-info-tooltip" :style="{left: position.left + 'px',top:position.top + 'px'}">
|
||||||
<div class="tooltip-title">{{$t('project.topology.alert')}}({{$t('asset.pingActive')}})</div>
|
<div class="tooltip-title">{{$t('project.topology.alert')}}({{$t('overall.active')}})</div>
|
||||||
<div class="severity-info" style='justify-content: space-between'>
|
<div class="severity-info" style='justify-content: space-between'>
|
||||||
<div class="severity-name">{{$t('overall.result.total')}}</div>
|
<div class="severity-name">{{$t('overall.result.total')}}</div>
|
||||||
<div class="severity-value">{{alertLabelData.alertNum}}</div>
|
<div class="severity-value">{{alertLabelData.alertNum}}</div>
|
||||||
@@ -158,7 +158,7 @@
|
|||||||
<div class="alert-label-value" v-if="alertLabelData">
|
<div class="alert-label-value" v-if="alertLabelData">
|
||||||
<i :class="alertLabelData.alertNum ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert vertical-align-top;" @mouseenter="tooltipHover('',true, $event)" @mouseleave="tooltipHover('',false, $event)"></i>
|
<i :class="alertLabelData.alertNum ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert vertical-align-top;" @mouseenter="tooltipHover('',true, $event)" @mouseleave="tooltipHover('',false, $event)"></i>
|
||||||
<div v-if="alertNumtooltipShow" class="alert-days-info-tooltip" :style="{left: position.left + 'px',top:position.top + 'px'}">
|
<div v-if="alertNumtooltipShow" class="alert-days-info-tooltip" :style="{left: position.left + 'px',top:position.top + 'px'}">
|
||||||
<div class="tooltip-title">{{$t('project.topology.alert')}}({{$t('asset.pingActive')}})</div>
|
<div class="tooltip-title">{{$t('project.topology.alert')}}({{$t('overall.active')}})</div>
|
||||||
<div class="severity-info" style='justify-content: space-between'>
|
<div class="severity-info" style='justify-content: space-between'>
|
||||||
<div class="severity-name">{{$t('overall.result.total')}}</div>
|
<div class="severity-name">{{$t('overall.result.total')}}</div>
|
||||||
<div class="severity-value">{{alertLabelData.alertNum}}</div>
|
<div class="severity-value">{{alertLabelData.alertNum}}</div>
|
||||||
@@ -208,7 +208,7 @@
|
|||||||
<div class="alert-label-value" v-if="alertLabelData">
|
<div class="alert-label-value" v-if="alertLabelData">
|
||||||
<i :class="alertLabelData.alertNum ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert vertical-align-top;" @mouseenter="tooltipHover('',true, $event)" @mouseleave="tooltipHover('',false, $event)"></i>
|
<i :class="alertLabelData.alertNum ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert vertical-align-top;" @mouseenter="tooltipHover('',true, $event)" @mouseleave="tooltipHover('',false, $event)"></i>
|
||||||
<div v-if="alertNumtooltipShow" class="alert-days-info-tooltip" :style="{left: position.left + 'px',top:position.top + 'px'}">
|
<div v-if="alertNumtooltipShow" class="alert-days-info-tooltip" :style="{left: position.left + 'px',top:position.top + 'px'}">
|
||||||
<div class="tooltip-title">{{$t('project.topology.alert')}}({{$t('asset.pingActive')}})</div>
|
<div class="tooltip-title">{{$t('project.topology.alert')}}({{$t('overall.active')}})</div>
|
||||||
<div class="severity-info" style='justify-content: space-between'>
|
<div class="severity-info" style='justify-content: space-between'>
|
||||||
<div class="severity-name">{{$t('overall.result.total')}}</div>
|
<div class="severity-name">{{$t('overall.result.total')}}</div>
|
||||||
<div class="severity-value">{{alertLabelData.alertNum}}</div>
|
<div class="severity-value">{{alertLabelData.alertNum}}</div>
|
||||||
@@ -224,7 +224,7 @@
|
|||||||
<div class="alert-label-title">{{$t('overall.state')}}</div>
|
<div class="alert-label-title">{{$t('overall.state')}}</div>
|
||||||
<div class="alert-label-value">
|
<div class="alert-label-value">
|
||||||
<span style="width: auto">
|
<span style="width: auto">
|
||||||
<span class="endpoint-cell-left"><i class="nz-icon nz-icon-Metrics colorFA901C" /> {{$t('project.endpoint.metrics')}} </span>
|
<span class="endpoint-cell-left"><i class="nz-icon nz-icon-Metrics colorFA901C" /> {{$t('overall.metric')}} </span>
|
||||||
<span v-if="alertLabelData && alertLabelData.configs[0].state === 0">
|
<span v-if="alertLabelData && alertLabelData.configs[0].state === 0">
|
||||||
<span class="active-icon red-bg inline-block"></span>
|
<span class="active-icon red-bg inline-block"></span>
|
||||||
</span>
|
</span>
|
||||||
@@ -236,7 +236,7 @@
|
|||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
<span style="width: auto">
|
<span style="width: auto">
|
||||||
<span class="endpoint-cell-left" style="margin-left: 10px"><i class="nz-icon nz-icon-logs colorFA901C" /> {{$t('project.endpoint.logs')}} </span>
|
<span class="endpoint-cell-left" style="margin-left: 10px"><i class="nz-icon nz-icon-logs colorFA901C" /> {{$t('overall.logs')}} </span>
|
||||||
<span v-if="alertLabelData && alertLabelData.configs[1].state === 0">
|
<span v-if="alertLabelData && alertLabelData.configs[1].state === 0">
|
||||||
<span class="active-icon red-bg inline-block"></span>
|
<span class="active-icon red-bg inline-block"></span>
|
||||||
</span>
|
</span>
|
||||||
@@ -261,11 +261,11 @@
|
|||||||
<div class="alert-label-value">{{alertLabelData && alertLabelData.name ? alertLabelData.name : '--'}}</div>
|
<div class="alert-label-value">{{alertLabelData && alertLabelData.name ? alertLabelData.name : '--'}}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="alert-label-box">
|
<div class="alert-label-box">
|
||||||
<div class="alert-label-title">{{$t('overall.location')}}</div>
|
<div class="alert-label-title">{{$t('asset.location')}}</div>
|
||||||
<div class="alert-label-value">{{alertLabelData && alertLabelData.location && alertLabelData.location ? alertLabelData.location : '--'}}</div>
|
<div class="alert-label-value">{{alertLabelData && alertLabelData.location && alertLabelData.location ? alertLabelData.location : '--'}}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="alert-label-box">
|
<div class="alert-label-box">
|
||||||
<div class="alert-label-title">{{$t('overall.cabinet')}}</div>
|
<div class="alert-label-title">{{$t('asset.cabinet')}}</div>
|
||||||
<div class="alert-label-value">
|
<div class="alert-label-value">
|
||||||
<i v-if="alertLabelData" class="nz-icon nz-icon-cabinet monitorColor" :class="alertLabelData && alertLabelData.cabinetNum> 0 ? 'color23BF9A' : 'colorEF7458'"/>
|
<i v-if="alertLabelData" class="nz-icon nz-icon-cabinet monitorColor" :class="alertLabelData && alertLabelData.cabinetNum> 0 ? 'color23BF9A' : 'colorEF7458'"/>
|
||||||
<span>{{alertLabelData && alertLabelData.cabinetNum ? alertLabelData.cabinetNum : 0}}</span></div>
|
<span>{{alertLabelData && alertLabelData.cabinetNum ? alertLabelData.cabinetNum : 0}}</span></div>
|
||||||
@@ -282,7 +282,7 @@
|
|||||||
<div class="alert-label-value" v-if="alertLabelData">
|
<div class="alert-label-value" v-if="alertLabelData">
|
||||||
<i :class="alertLabelData.alertNum ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert vertical-align-top;" @mouseenter="tooltipHover('',true, $event)" @mouseleave="tooltipHover('',false, $event)"></i>
|
<i :class="alertLabelData.alertNum ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert vertical-align-top;" @mouseenter="tooltipHover('',true, $event)" @mouseleave="tooltipHover('',false, $event)"></i>
|
||||||
<div v-if="alertNumtooltipShow" class="alert-days-info-tooltip" :style="{left: position.left + 'px',top:position.top + 'px'}">
|
<div v-if="alertNumtooltipShow" class="alert-days-info-tooltip" :style="{left: position.left + 'px',top:position.top + 'px'}">
|
||||||
<div class="tooltip-title">{{$t('project.topology.alert')}}({{$t('asset.pingActive')}})</div>
|
<div class="tooltip-title">{{$t('project.topology.alert')}}({{$t('overall.active')}})</div>
|
||||||
<div class="severity-info" style='justify-content: space-between'>
|
<div class="severity-info" style='justify-content: space-between'>
|
||||||
<div class="severity-name">{{$t('overall.result.total')}}</div>
|
<div class="severity-name">{{$t('overall.result.total')}}</div>
|
||||||
<div class="severity-value">{{alertLabelData.alertNum}}</div>
|
<div class="severity-value">{{alertLabelData.alertNum}}</div>
|
||||||
|
|||||||
@@ -38,7 +38,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div> -->
|
</div> -->
|
||||||
<div class="alert-label-box">
|
<div class="alert-label-box">
|
||||||
<div class="alert-label-title">{{ $t("overall.manageIp") }}</div>
|
<div class="alert-label-title">{{ $t("asset.manageIp") }}</div>
|
||||||
<div class="alert-label-value">
|
<div class="alert-label-value">
|
||||||
{{
|
{{
|
||||||
alertLabelData && alertLabelData.manageIp
|
alertLabelData && alertLabelData.manageIp
|
||||||
@@ -104,7 +104,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="alert-label-box">
|
<div class="alert-label-box">
|
||||||
<div class="alert-label-title">{{ $t("overall.cabinet") }}</div>
|
<div class="alert-label-title">{{ $t("asset.cabinet") }}</div>
|
||||||
<div class="alert-label-value">
|
<div class="alert-label-value">
|
||||||
{{
|
{{
|
||||||
alertLabelData &&
|
alertLabelData &&
|
||||||
@@ -116,7 +116,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="alert-label-box">
|
<div class="alert-label-box">
|
||||||
<div class="alert-label-title">{{ $t("overall.brand") }}</div>
|
<div class="alert-label-title">{{ $t("asset.brand") }}</div>
|
||||||
<div class="alert-label-value">
|
<div class="alert-label-value">
|
||||||
{{
|
{{
|
||||||
alertLabelData && alertLabelData.brand && alertLabelData.brand.name
|
alertLabelData && alertLabelData.brand && alertLabelData.brand.name
|
||||||
@@ -126,7 +126,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="alert-label-box">
|
<div class="alert-label-box">
|
||||||
<div class="alert-label-title">{{ $t("overall.model") }}</div>
|
<div class="alert-label-title">{{ $t("asset.model") }}</div>
|
||||||
<div class="alert-label-value">
|
<div class="alert-label-value">
|
||||||
{{
|
{{
|
||||||
alertLabelData && alertLabelData.model && alertLabelData.model.name
|
alertLabelData && alertLabelData.model && alertLabelData.model.name
|
||||||
@@ -150,7 +150,7 @@
|
|||||||
:style="{ left: position.left + 'px', top: position.top + 'px' }"
|
:style="{ left: position.left + 'px', top: position.top + 'px' }"
|
||||||
>
|
>
|
||||||
<div class="tooltip-title">
|
<div class="tooltip-title">
|
||||||
{{ $t("project.topology.alert") }}({{ $t("asset.pingActive") }})
|
{{ $t("project.topology.alert") }}({{ $t("overall.active") }})
|
||||||
</div>
|
</div>
|
||||||
<div class="severity-info" style="justify-content: space-between">
|
<div class="severity-info" style="justify-content: space-between">
|
||||||
<div class="severity-name">{{ $t("overall.result.total") }}</div>
|
<div class="severity-name">{{ $t("overall.result.total") }}</div>
|
||||||
@@ -244,7 +244,7 @@
|
|||||||
:style="{ left: position.left + 'px', top: position.top + 'px' }"
|
:style="{ left: position.left + 'px', top: position.top + 'px' }"
|
||||||
>
|
>
|
||||||
<div class="tooltip-title">
|
<div class="tooltip-title">
|
||||||
{{ $t("project.topology.alert") }}({{ $t("asset.pingActive") }})
|
{{ $t("project.topology.alert") }}({{ $t("overall.active") }})
|
||||||
</div>
|
</div>
|
||||||
<div class="severity-info" style="justify-content: space-between">
|
<div class="severity-info" style="justify-content: space-between">
|
||||||
<div class="severity-name">{{ $t("overall.result.total") }}</div>
|
<div class="severity-name">{{ $t("overall.result.total") }}</div>
|
||||||
@@ -339,7 +339,7 @@
|
|||||||
:style="{ left: position.left + 'px', top: position.top + 'px' }"
|
:style="{ left: position.left + 'px', top: position.top + 'px' }"
|
||||||
>
|
>
|
||||||
<div class="tooltip-title">
|
<div class="tooltip-title">
|
||||||
{{ $t("project.topology.alert") }}({{ $t("asset.pingActive") }})
|
{{ $t("project.topology.alert") }}({{ $t("overall.active") }})
|
||||||
</div>
|
</div>
|
||||||
<div class="severity-info" style="justify-content: space-between">
|
<div class="severity-info" style="justify-content: space-between">
|
||||||
<div class="severity-name">{{ $t("overall.result.total") }}</div>
|
<div class="severity-name">{{ $t("overall.result.total") }}</div>
|
||||||
@@ -438,7 +438,7 @@
|
|||||||
:style="{ left: position.left + 'px', top: position.top + 'px' }"
|
:style="{ left: position.left + 'px', top: position.top + 'px' }"
|
||||||
>
|
>
|
||||||
<div class="tooltip-title">
|
<div class="tooltip-title">
|
||||||
{{ $t("project.topology.alert") }}({{ $t("asset.pingActive") }})
|
{{ $t("project.topology.alert") }}({{ $t("overall.active") }})
|
||||||
</div>
|
</div>
|
||||||
<div class="severity-info" style="justify-content: space-between">
|
<div class="severity-info" style="justify-content: space-between">
|
||||||
<div class="severity-name">{{ $t("overall.result.total") }}</div>
|
<div class="severity-name">{{ $t("overall.result.total") }}</div>
|
||||||
@@ -457,7 +457,7 @@
|
|||||||
<span style="width: auto">
|
<span style="width: auto">
|
||||||
<span class="endpoint-cell-left"
|
<span class="endpoint-cell-left"
|
||||||
><i class="nz-icon nz-icon-Metrics active" />
|
><i class="nz-icon nz-icon-Metrics active" />
|
||||||
{{ $t("project.endpoint.metrics") }}
|
{{ $t("overall.metric") }}
|
||||||
</span>
|
</span>
|
||||||
<span
|
<span
|
||||||
v-if="alertLabelData && alertLabelData.configs[0].state === 0"
|
v-if="alertLabelData && alertLabelData.configs[0].state === 0"
|
||||||
@@ -478,7 +478,7 @@
|
|||||||
<span style="width: auto">
|
<span style="width: auto">
|
||||||
<span class="endpoint-cell-left" style="margin-left: 10px"
|
<span class="endpoint-cell-left" style="margin-left: 10px"
|
||||||
><i class="nz-icon nz-icon-logs active" />
|
><i class="nz-icon nz-icon-logs active" />
|
||||||
{{ $t("project.endpoint.logs") }}
|
{{ $t("overall.logs") }}
|
||||||
</span>
|
</span>
|
||||||
<span
|
<span
|
||||||
v-if="alertLabelData && alertLabelData.configs[1].state === 0"
|
v-if="alertLabelData && alertLabelData.configs[1].state === 0"
|
||||||
@@ -514,7 +514,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="alert-label-box">
|
<div class="alert-label-box">
|
||||||
<div class="alert-label-title">{{ $t("overall.location") }}</div>
|
<div class="alert-label-title">{{ $t("asset.location") }}</div>
|
||||||
<div class="alert-label-value">
|
<div class="alert-label-value">
|
||||||
{{
|
{{
|
||||||
alertLabelData && alertLabelData.location && alertLabelData.location
|
alertLabelData && alertLabelData.location && alertLabelData.location
|
||||||
@@ -524,7 +524,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="alert-label-box">
|
<div class="alert-label-box">
|
||||||
<div class="alert-label-title">{{ $t("overall.cabinet") }}</div>
|
<div class="alert-label-title">{{ $t("asset.cabinet") }}</div>
|
||||||
<div class="alert-label-value">
|
<div class="alert-label-value">
|
||||||
<i
|
<i
|
||||||
v-if="alertLabelData"
|
v-if="alertLabelData"
|
||||||
@@ -570,7 +570,7 @@
|
|||||||
:style="{ left: position.left + 'px', top: position.top + 'px' }"
|
:style="{ left: position.left + 'px', top: position.top + 'px' }"
|
||||||
>
|
>
|
||||||
<div class="tooltip-title">
|
<div class="tooltip-title">
|
||||||
{{ $t("project.topology.alert") }}({{ $t("asset.pingActive") }})
|
{{ $t("project.topology.alert") }}({{ $t("overall.active") }})
|
||||||
</div>
|
</div>
|
||||||
<div class="severity-info" style="justify-content: space-between">
|
<div class="severity-info" style="justify-content: space-between">
|
||||||
<div class="severity-name">{{ $t("overall.result.total") }}</div>
|
<div class="severity-name">{{ $t("overall.result.total") }}</div>
|
||||||
|
|||||||
@@ -348,6 +348,10 @@ export default {
|
|||||||
this.chartInfo.loaded && this.getChartData()
|
this.chartInfo.loaded && this.getChartData()
|
||||||
this.showAllData = !this.showMultiple(this.chartInfo.type)
|
this.showAllData = !this.showMultiple(this.chartInfo.type)
|
||||||
this.getAlertMessageInfo()
|
this.getAlertMessageInfo()
|
||||||
|
window.addEventListener('resize', this.resize)
|
||||||
|
},
|
||||||
|
destroyed() {
|
||||||
|
window.removeEventListener('resize', this.resize)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -52,7 +52,7 @@ export default {
|
|||||||
{ key: 'summary', label: this.$t('alert.summary') },
|
{ key: 'summary', label: this.$t('alert.summary') },
|
||||||
{ key: 'description', label: this.$t('overall.remark') },
|
{ key: 'description', label: this.$t('overall.remark') },
|
||||||
{ key: 'labels', label: this.$t('alert.list.labels') },
|
{ key: 'labels', label: this.$t('alert.list.labels') },
|
||||||
{ key: 'startAt', label: this.$t('alert.startAt') }
|
{ key: 'startAt', label: this.$t('overall.startTime') }
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -84,7 +84,7 @@ export default {
|
|||||||
label: this.$t('overall.asset')
|
label: this.$t('overall.asset')
|
||||||
}, {
|
}, {
|
||||||
key: 'endpoint',
|
key: 'endpoint',
|
||||||
label: this.$t('overall.endpoint')
|
label: this.$t('asset.endpoint')
|
||||||
}, {
|
}, {
|
||||||
key: 'module',
|
key: 'module',
|
||||||
label: this.$t('overall.module')
|
label: this.$t('overall.module')
|
||||||
|
|||||||
@@ -194,7 +194,7 @@ export default {
|
|||||||
{
|
{
|
||||||
key: "endpoint",
|
key: "endpoint",
|
||||||
isSelect: true,
|
isSelect: true,
|
||||||
label: this.$t("overall.endpoint"),
|
label: this.$t("asset.endpoint"),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: "alertrule",
|
key: "alertrule",
|
||||||
|
|||||||
@@ -1,5 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div :style="calcPosition(that.position,that)" class="alert-label__border alert-label" v-my-loading="loading" ref="alertLabels">
|
<div :style="calcPosition(that.position,that)" class="alert-label__border alert-label" ref="alertLabels">
|
||||||
|
<div v-my-loading="loading">
|
||||||
<div class="alert-label-header-title">
|
<div class="alert-label-header-title">
|
||||||
<div class="alert-label-header-circle" :style="`background: ${alertColor}`">
|
<div class="alert-label-header-circle" :style="`background: ${alertColor}`">
|
||||||
<i class="nz-icon nz-icon-Alertrule"></i>
|
<i class="nz-icon nz-icon-Alertrule"></i>
|
||||||
@@ -18,14 +19,14 @@
|
|||||||
<div class="alert-rule-value">{{alertRuleData.name ? alertRuleData.name : '--'}}</div>
|
<div class="alert-rule-value">{{alertRuleData.name ? alertRuleData.name : '--'}}</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- <div class="alert-rule-box">-->
|
<!-- <div class="alert-rule-box">-->
|
||||||
<!-- <div class="alert-rule-title">{{$t('alert.name')}}</div>-->
|
<!-- <div class="alert-rule-title">{{$t('overall.name')}}</div>-->
|
||||||
<!-- <div class="alert-rule-value">{{alertRuleData.name ? alertRuleData.name : '--'}}</div>-->
|
<!-- <div class="alert-rule-value">{{alertRuleData.name ? alertRuleData.name : '--'}}</div>-->
|
||||||
<!-- </div>-->
|
<!-- </div>-->
|
||||||
<div class="alert-rule-box">
|
<div class="alert-rule-box">
|
||||||
<div class="alert-rule-title">{{$t('alert.type')}}</div>
|
<div class="alert-rule-title">{{$t('overall.type')}}</div>
|
||||||
<div class="alert-rule-value">
|
<div class="alert-rule-value">
|
||||||
<span v-if="alertRuleData.type === 1">
|
<span v-if="alertRuleData.type === 1">
|
||||||
{{$t('project.metrics.metrics')}}
|
{{$t('overall.metric')}}
|
||||||
</span>
|
</span>
|
||||||
<span v-else-if="alertRuleData.type === 2">
|
<span v-else-if="alertRuleData.type === 2">
|
||||||
{{$t('overall.logs')}}
|
{{$t('overall.logs')}}
|
||||||
@@ -47,7 +48,7 @@
|
|||||||
<div class="alert-rule-value" v-if="alertRuleData">
|
<div class="alert-rule-value" v-if="alertRuleData">
|
||||||
<i :class="alertRuleData.alertNum ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert vertical-align-top;" @mouseenter="tooltipHover('',true, $event)" @mouseleave="tooltipHover('',false, $event)"></i>
|
<i :class="alertRuleData.alertNum ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert vertical-align-top;" @mouseenter="tooltipHover('',true, $event)" @mouseleave="tooltipHover('',false, $event)"></i>
|
||||||
<div v-if="alertNumtooltipShow" class="alert-days-info-tooltip" :style="{left: position.left + 'px',top:position.top + 'px'}">
|
<div v-if="alertNumtooltipShow" class="alert-days-info-tooltip" :style="{left: position.left + 'px',top:position.top + 'px'}">
|
||||||
<div class="tooltip-title">{{$t('project.topology.alert')}}({{$t('asset.pingActive')}})</div>
|
<div class="tooltip-title">{{$t('project.topology.alert')}}({{$t('overall.active')}})</div>
|
||||||
<div class="severity-info" style='justify-content: space-between'>
|
<div class="severity-info" style='justify-content: space-between'>
|
||||||
<div class="severity-name">{{$t('overall.result.total')}}</div>
|
<div class="severity-name">{{$t('overall.result.total')}}</div>
|
||||||
<div class="severity-value">{{alertRuleData.alertNum}}</div>
|
<div class="severity-value">{{alertRuleData.alertNum}}</div>
|
||||||
@@ -64,7 +65,7 @@
|
|||||||
<div class="alert-rule-value" @click="trbShotShow"><i class="nz-icon nz-icon-guzhangshuju"></i></div>
|
<div class="alert-rule-value" @click="trbShotShow"><i class="nz-icon nz-icon-guzhangshuju"></i></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="alert-rule-box">
|
<div class="alert-rule-box">
|
||||||
<div class="alert-rule-title">{{$t('alert.state')}}</div>
|
<div class="alert-rule-title">{{$t('overall.state')}}</div>
|
||||||
<div class="alert-rule-value" style="margin-left: 3px">
|
<div class="alert-rule-value" style="margin-left: 3px">
|
||||||
<div v-if="alertRuleData.state === 1">
|
<div v-if="alertRuleData.state === 1">
|
||||||
<i class="active-icon green-bg inline-block"></i>
|
<i class="active-icon green-bg inline-block"></i>
|
||||||
@@ -78,6 +79,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|||||||
@@ -18,14 +18,14 @@
|
|||||||
<div class="alert-rule-value">{{alertRuleData.name ? alertRuleData.name : '--'}}</div>
|
<div class="alert-rule-value">{{alertRuleData.name ? alertRuleData.name : '--'}}</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- <div class="alert-rule-box">-->
|
<!-- <div class="alert-rule-box">-->
|
||||||
<!-- <div class="alert-rule-title">{{$t('alert.name')}}</div>-->
|
<!-- <div class="alert-rule-title">{{$t('overall.name')}}</div>-->
|
||||||
<!-- <div class="alert-rule-value">{{alertRuleData.name ? alertRuleData.name : '--'}}</div>-->
|
<!-- <div class="alert-rule-value">{{alertRuleData.name ? alertRuleData.name : '--'}}</div>-->
|
||||||
<!-- </div>-->
|
<!-- </div>-->
|
||||||
<div class="alert-rule-box">
|
<div class="alert-rule-box">
|
||||||
<div class="alert-rule-title">{{$t('alert.type')}}</div>
|
<div class="alert-rule-title">{{$t('overall.type')}}</div>
|
||||||
<div class="alert-rule-value">
|
<div class="alert-rule-value">
|
||||||
<span v-if="alertRuleData.type === 1">
|
<span v-if="alertRuleData.type === 1">
|
||||||
{{$t('project.metrics.metrics')}}
|
{{$t('overall.metric')}}
|
||||||
</span>
|
</span>
|
||||||
<span v-else-if="alertRuleData.type === 2">
|
<span v-else-if="alertRuleData.type === 2">
|
||||||
{{$t('overall.logs')}}
|
{{$t('overall.logs')}}
|
||||||
@@ -47,7 +47,7 @@
|
|||||||
<div class="alert-rule-value" v-if="alertRuleData">
|
<div class="alert-rule-value" v-if="alertRuleData">
|
||||||
<i :class="alertRuleData.alertNum ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert vertical-align-top;" @mouseenter="tooltipHover('',true, $event)" @mouseleave="tooltipHover('',false, $event)"></i>
|
<i :class="alertRuleData.alertNum ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert vertical-align-top;" @mouseenter="tooltipHover('',true, $event)" @mouseleave="tooltipHover('',false, $event)"></i>
|
||||||
<div v-if="alertNumtooltipShow" class="alert-days-info-tooltip" :style="{left: position.left + 'px',top:position.top + 'px'}">
|
<div v-if="alertNumtooltipShow" class="alert-days-info-tooltip" :style="{left: position.left + 'px',top:position.top + 'px'}">
|
||||||
<div class="tooltip-title">{{$t('project.topology.alert')}}({{$t('asset.pingActive')}})</div>
|
<div class="tooltip-title">{{$t('project.topology.alert')}}({{$t('overall.active')}})</div>
|
||||||
<div class="severity-info" style='justify-content: space-between'>
|
<div class="severity-info" style='justify-content: space-between'>
|
||||||
<div class="severity-name">{{$t('overall.result.total')}}</div>
|
<div class="severity-name">{{$t('overall.result.total')}}</div>
|
||||||
<div class="severity-value">{{alertRuleData.alertNum}}</div>
|
<div class="severity-value">{{alertRuleData.alertNum}}</div>
|
||||||
@@ -64,7 +64,7 @@
|
|||||||
<div class="alert-rule-value" @click="trbShotShow"><i class="nz-icon nz-icon-guzhangshuju"></i></div>
|
<div class="alert-rule-value" @click="trbShotShow"><i class="nz-icon nz-icon-guzhangshuju"></i></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="alert-rule-box">
|
<div class="alert-rule-box">
|
||||||
<div class="alert-rule-title">{{$t('alert.state')}}</div>
|
<div class="alert-rule-title">{{$t('overall.state')}}</div>
|
||||||
<div class="alert-rule-value" style="margin-left: 3px">
|
<div class="alert-rule-value" style="margin-left: 3px">
|
||||||
<div v-if="alertRuleData.state === 1">
|
<div v-if="alertRuleData.state === 1">
|
||||||
<i class="active-icon green-bg inline-block"></i>
|
<i class="active-icon green-bg inline-block"></i>
|
||||||
|
|||||||
@@ -37,7 +37,7 @@
|
|||||||
<operation-log-tab v-if="from === fromRoute.user && targetTab === 'operationLogTab'" :from="from" :obj="obj" :tabs="tabs.user.operationLog" @changeTab="changeTab" :targetTab.sync="targetTab"></operation-log-tab>
|
<operation-log-tab v-if="from === fromRoute.user && targetTab === 'operationLogTab'" :from="from" :obj="obj" :tabs="tabs.user.operationLog" @changeTab="changeTab" :targetTab.sync="targetTab"></operation-log-tab>
|
||||||
<terminal-log-tab v-if="from === fromRoute.user && targetTab === 'terminalLogTab'" :from="from" :obj="obj" :tabs="tabs.user.terminalLog" @changeTab="changeTab" :targetTab.sync="targetTab"></terminal-log-tab>
|
<terminal-log-tab v-if="from === fromRoute.user && targetTab === 'terminalLogTab'" :from="from" :obj="obj" :tabs="tabs.user.terminalLog" @changeTab="changeTab" :targetTab.sync="targetTab"></terminal-log-tab>
|
||||||
<!-- asset列表的3个 -->
|
<!-- asset列表的3个 -->
|
||||||
<panel-tab-new @getTableData="getTableData" :paramsType="'asset'" v-if="from === fromRoute.asset && targetTab === 'panelTab'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.asset.panel" :targetTab.sync="targetTab" @changeTab="changeTab"></panel-tab-new>
|
<panel-tab-new @exit="closeSubList" @getTableData="getTableData" :paramsType="'asset'" v-if="from === fromRoute.asset && targetTab === 'panelTab'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.asset.panel" :targetTab.sync="targetTab" @changeTab="changeTab"></panel-tab-new>
|
||||||
<alertMessageTabNew v-if="from === fromRoute.asset && targetTab === 'alertMessageTab'" v-show="subResizeShow" :sign="sign+'alert'" :from="from" :obj="obj" :tabs="tabs.asset.alertMessage" :targetTab.sync="targetTab" @changeTab="changeTab" ></alertMessageTabNew>
|
<alertMessageTabNew v-if="from === fromRoute.asset && targetTab === 'alertMessageTab'" v-show="subResizeShow" :sign="sign+'alert'" :from="from" :obj="obj" :tabs="tabs.asset.alertMessage" :targetTab.sync="targetTab" @changeTab="changeTab" ></alertMessageTabNew>
|
||||||
<endpointTabNew v-if="from === fromRoute.asset && targetTab === 'endpointTab'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.asset.endpoint" :targetTab.sync="targetTab" @changeTab="changeTab"></endpointTabNew>
|
<endpointTabNew v-if="from === fromRoute.asset && targetTab === 'endpointTab'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.asset.endpoint" :targetTab.sync="targetTab" @changeTab="changeTab"></endpointTabNew>
|
||||||
<log-bottom-tab v-if="from === fromRoute.asset && targetTab === 'log'" v-show="subResizeShow" :sign="sign+'log'" :from="from" :obj="obj" :tabs="tabs.asset.log" :targetTab.sync="targetTab" @changeTab="changeTab"></log-bottom-tab>
|
<log-bottom-tab v-if="from === fromRoute.asset && targetTab === 'log'" v-show="subResizeShow" :sign="sign+'log'" :from="from" :obj="obj" :tabs="tabs.asset.log" :targetTab.sync="targetTab" @changeTab="changeTab"></log-bottom-tab>
|
||||||
@@ -45,14 +45,14 @@
|
|||||||
<!--module列表的tab-->
|
<!--module列表的tab-->
|
||||||
<endpointTabNew v-if="from === fromRoute.module && targetTab === 'endpoint'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.module.moduleTabTitle" :targetTab="targetTab" @changeTab="changeTab"></endpointTabNew>
|
<endpointTabNew v-if="from === fromRoute.module && targetTab === 'endpoint'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.module.moduleTabTitle" :targetTab="targetTab" @changeTab="changeTab"></endpointTabNew>
|
||||||
<alertMessageTabNew v-if="from === fromRoute.module && targetTab === 'moduleAlertMessage'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.module.moduleTabTitle" @changeTab="changeTab" :targetTab="targetTab"></alertMessageTabNew>
|
<alertMessageTabNew v-if="from === fromRoute.module && targetTab === 'moduleAlertMessage'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.module.moduleTabTitle" @changeTab="changeTab" :targetTab="targetTab"></alertMessageTabNew>
|
||||||
<panel-tab-new @getTableData="getTableData" :paramsType="'module'" v-if="from === fromRoute.module && targetTab === 'panel'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.module.moduleTabTitle" :targetTab.sync="targetTab" @changeTab="changeTab"></panel-tab-new>
|
<panel-tab-new @exit="closeSubList" @getTableData="getTableData" :paramsType="'module'" v-if="from === fromRoute.module && targetTab === 'panel'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.module.moduleTabTitle" :targetTab.sync="targetTab" @changeTab="changeTab"></panel-tab-new>
|
||||||
<!--endpoint列表的tab-->
|
<!--endpoint列表的tab-->
|
||||||
<panel-tab-new v-if="from === fromRoute.endpoint && targetTab === 'panelTab'" v-show="subResizeShow" :from="from" :obj="obj" :paramsType="'endpoint'" :tabs="endpointTabs" :targetTab.sync="targetTab" @changeTab="changeTab" @getTableData="getTableData"></panel-tab-new>
|
<panel-tab-new @exit="closeSubList" v-if="from === fromRoute.endpoint && targetTab === 'panelTab'" v-show="subResizeShow" :from="from" :obj="obj" :paramsType="'endpoint'" :tabs="endpointTabs" :targetTab.sync="targetTab" @changeTab="changeTab" @getTableData="getTableData"></panel-tab-new>
|
||||||
<endpointQuery v-if="from === fromRoute.endpoint && targetTab === 'Metrics'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="endpointTabs" :targetTab.sync="targetTab" @changeTab="changeTab"></endpointQuery>
|
<endpointQuery v-if="from === fromRoute.endpoint && targetTab === 'Metrics'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="endpointTabs" :targetTab.sync="targetTab" @changeTab="changeTab"></endpointQuery>
|
||||||
<log-bottom-tab v-if="from === fromRoute.endpoint && targetTab === 'log' && hasLogConfig" :sign="sign+'log'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="endpointTabs" :targetTab.sync="targetTab" @changeTab="changeTab"></log-bottom-tab>
|
<log-bottom-tab v-if="from === fromRoute.endpoint && targetTab === 'log' && hasLogConfig" :sign="sign+'log'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="endpointTabs" :targetTab.sync="targetTab" @changeTab="changeTab"></log-bottom-tab>
|
||||||
<alertMessageTabNew v-if="from === fromRoute.endpoint && targetTab === 'endpointAlertMessage'" :sign="sign+'alert'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="endpointTabs" :targetTab.sync="targetTab" @changeTab="changeTab"></alertMessageTabNew>
|
<alertMessageTabNew v-if="from === fromRoute.endpoint && targetTab === 'endpointAlertMessage'" :sign="sign+'alert'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="endpointTabs" :targetTab.sync="targetTab" @changeTab="changeTab"></alertMessageTabNew>
|
||||||
<!--chartTemp的Tab-->
|
<!--chartTemp的Tab-->
|
||||||
<panel-tab-new @getTableData="getTableData" :paramsType="'template'" v-if="from === fromRoute.chartTemp && targetTab === 'panel'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.chartTemp.chartTempTabTitle" :targetTab.sync="targetTab" @changeTab="changeTab"></panel-tab-new>
|
<panel-tab-new @exit="closeSubList" @getTableData="getTableData" :paramsType="'template'" v-if="from === fromRoute.chartTemp && targetTab === 'panel'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.chartTemp.chartTempTabTitle" :targetTab.sync="targetTab" @changeTab="changeTab"></panel-tab-new>
|
||||||
<!--alertRule Tab-->
|
<!--alertRule Tab-->
|
||||||
<alertMessageTabNew v-if="from === fromRoute.alertRule && targetTab === 'alertRuleAlertMessage'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.alertRule.alertRule" @changeTab="changeTab" :targetTab.sync="targetTab"></alertMessageTabNew>
|
<alertMessageTabNew v-if="from === fromRoute.alertRule && targetTab === 'alertRuleAlertMessage'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.alertRule.alertRule" @changeTab="changeTab" :targetTab.sync="targetTab"></alertMessageTabNew>
|
||||||
<alertRuleEvalLog v-if="from === fromRoute.alertRule && targetTab === 'evalLog'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.alertRule.alertRule" @changeTab="changeTab" :targetTab.sync="targetTab"></alertRuleEvalLog>
|
<alertRuleEvalLog v-if="from === fromRoute.alertRule && targetTab === 'evalLog'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.alertRule.alertRule" @changeTab="changeTab" :targetTab.sync="targetTab"></alertRuleEvalLog>
|
||||||
@@ -216,7 +216,7 @@ export default {
|
|||||||
endpointTabTitle: [
|
endpointTabTitle: [
|
||||||
{ prop: 'panelTab', name: this.$t('overall.detail') },
|
{ prop: 'panelTab', name: this.$t('overall.detail') },
|
||||||
{ prop: 'endpointAlertMessage', name: this.$t('overall.alert') },
|
{ prop: 'endpointAlertMessage', name: this.$t('overall.alert') },
|
||||||
{ prop: 'Metrics', name: this.$t('project.metrics.metrics') },
|
{ prop: 'Metrics', name: this.$t('overall.metric') },
|
||||||
{ prop: 'log', name: this.$t('overall.logs') }
|
{ prop: 'log', name: this.$t('overall.logs') }
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
@@ -232,22 +232,22 @@ export default {
|
|||||||
]
|
]
|
||||||
},
|
},
|
||||||
model: [
|
model: [
|
||||||
{ prop: 'asset', name: this.$t('asset.assets'), active: true }
|
{ prop: 'asset', name: this.$t('asset.asset'), active: true }
|
||||||
],
|
],
|
||||||
dc: {
|
dc: {
|
||||||
cabinet: [
|
cabinet: [
|
||||||
{ prop: 'cabinet', name: this.$t('config.dc.cabinets'), active: true },
|
{ prop: 'cabinet', name: this.$t('asset.cabinet'), active: true },
|
||||||
{ prop: 'asset', name: this.$t('asset.assets'), active: false },
|
{ prop: 'asset', name: this.$t('asset.asset'), active: false },
|
||||||
{ prop: 'alertMessageTab', name: this.$t('overall.alert'), active: false }
|
{ prop: 'alertMessageTab', name: this.$t('overall.alert'), active: false }
|
||||||
],
|
],
|
||||||
asset: [
|
asset: [
|
||||||
{ prop: 'cabinet', name: this.$t('config.dc.cabinets'), active: false },
|
{ prop: 'cabinet', name: this.$t('asset.cabinet'), active: false },
|
||||||
{ prop: 'asset', name: this.$t('asset.assets'), active: true },
|
{ prop: 'asset', name: this.$t('asset.asset'), active: true },
|
||||||
{ prop: 'alertMessageTab', name: this.$t('overall.alert'), active: false }
|
{ prop: 'alertMessageTab', name: this.$t('overall.alert'), active: false }
|
||||||
],
|
],
|
||||||
alertMessage: [
|
alertMessage: [
|
||||||
{ prop: 'cabinet', name: this.$t('config.dc.cabinets'), active: false },
|
{ prop: 'cabinet', name: this.$t('asset.cabinet'), active: false },
|
||||||
{ prop: 'asset', name: this.$t('asset.assets'), active: false },
|
{ prop: 'asset', name: this.$t('asset.asset'), active: false },
|
||||||
{ prop: 'alertMessageTab', name: this.$t('overall.alert'), active: true }
|
{ prop: 'alertMessageTab', name: this.$t('overall.alert'), active: true }
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
@@ -274,7 +274,7 @@ export default {
|
|||||||
const tabs = [
|
const tabs = [
|
||||||
{ prop: 'panelTab', name: this.$t('overall.detail') },
|
{ prop: 'panelTab', name: this.$t('overall.detail') },
|
||||||
{ prop: 'endpointAlertMessage', name: this.$t('overall.alert') },
|
{ prop: 'endpointAlertMessage', name: this.$t('overall.alert') },
|
||||||
{ prop: 'Metrics', name: this.$t('project.metrics.metrics') }
|
{ prop: 'Metrics', name: this.$t('overall.metric') }
|
||||||
]
|
]
|
||||||
if (hasLog) {
|
if (hasLog) {
|
||||||
tabs.push({ prop: 'log', name: this.$t('overall.logs') })
|
tabs.push({ prop: 'log', name: this.$t('overall.logs') })
|
||||||
|
|||||||
@@ -100,14 +100,14 @@ export default {
|
|||||||
const className = []
|
const className = []
|
||||||
switch (this.targetTab) {
|
switch (this.targetTab) {
|
||||||
case 'panelTab':
|
case 'panelTab':
|
||||||
className.push('nz-table2 bottom-panel')
|
className.push('nz-table-list bottom-panel')
|
||||||
break
|
break
|
||||||
case 'log': {
|
case 'log': {
|
||||||
className.push('bottom-log')
|
className.push('bottom-log')
|
||||||
break
|
break
|
||||||
}
|
}
|
||||||
default: {
|
default: {
|
||||||
className.push('nz-table2')
|
className.push('nz-table-list')
|
||||||
break
|
break
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -121,7 +121,7 @@ export default {
|
|||||||
label: 'addr',
|
label: 'addr',
|
||||||
disabled: false
|
disabled: false
|
||||||
}, {
|
}, {
|
||||||
name: this.$t('asset.state'),
|
name: this.$t('overall.state'),
|
||||||
type: 'input',
|
type: 'input',
|
||||||
label: 'state',
|
label: 'state',
|
||||||
disabled: false
|
disabled: false
|
||||||
@@ -169,6 +169,7 @@ export default {
|
|||||||
deep: true,
|
deep: true,
|
||||||
handler (n, o) {
|
handler (n, o) {
|
||||||
if (n) {
|
if (n) {
|
||||||
|
this.searchLabel = {}
|
||||||
this.getTableData()
|
this.getTableData()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -3,8 +3,8 @@
|
|||||||
<div class="sub-top-tools">
|
<div class="sub-top-tools">
|
||||||
<div class="sub-list-tabs" v-if="from===fromRoute.module">
|
<div class="sub-list-tabs" v-if="from===fromRoute.module">
|
||||||
<div class="sub-list-tab-title">{{obj.name}}</div>
|
<div class="sub-list-tab-title">{{obj.name}}</div>
|
||||||
<div @click="changeTab('endpoint')" class="sub-list-tab" id="endpoint-tab-change-endpoint">{{$t("asset.modules")}}</div>
|
<div @click="changeTab('endpoint')" class="sub-list-tab" id="endpoint-tab-change-endpoint">{{$t("asset.endpoint")}}</div>
|
||||||
<div class="sub-list-tab sub-list-tab-active" >{{$t("asset.alerts")}}</div>
|
<div class="sub-list-tab sub-list-tab-active" >{{$t("alert.alertMessage")}}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="sub-list-tabs" v-else>
|
<div class="sub-list-tabs" v-else>
|
||||||
<div class="sub-list-tab-title">
|
<div class="sub-list-tab-title">
|
||||||
@@ -13,8 +13,8 @@
|
|||||||
<template v-if="from == $CONSTANTS.fromRoute.endpoint"><div class="sub-list-tab-title">{{$t("project.endpoint.endpointId")}}: {{obj ? obj.id : ''}}</div></template>
|
<template v-if="from == $CONSTANTS.fromRoute.endpoint"><div class="sub-list-tab-title">{{$t("project.endpoint.endpointId")}}: {{obj ? obj.id : ''}}</div></template>
|
||||||
</div><div :id="from+'-change-panelordetail'"
|
</div><div :id="from+'-change-panelordetail'"
|
||||||
@click="changeTab(from == $CONSTANTS.fromRoute.asset || from == $CONSTANTS.fromRoute.rule || from == $CONSTANTS.fromRoute.endpoint? 'panel' : 'detail')" class="sub-list-tab">{{$t("overall.detail")}}</div><div
|
@click="changeTab(from == $CONSTANTS.fromRoute.asset || from == $CONSTANTS.fromRoute.rule || from == $CONSTANTS.fromRoute.endpoint? 'panel' : 'detail')" class="sub-list-tab">{{$t("overall.detail")}}</div><div
|
||||||
class="sub-list-tab sub-list-tab-active">{{$t("asset.alerts")}}</div><div v-if="from == $CONSTANTS.fromRoute.asset" :id="from+'-change-modules'"
|
class="sub-list-tab sub-list-tab-active">{{$t("alert.alertMessage")}}</div><div v-if="from == $CONSTANTS.fromRoute.asset" :id="from+'-change-modules'"
|
||||||
@click="changeTab('endpoint')" class="sub-list-tab" v-has="'asset_endpoint_view'">{{$t("asset.modules")}}</div>
|
@click="changeTab('endpoint')" class="sub-list-tab" v-has="'asset_endpoint_view'">{{$t("asset.endpoint")}}</div>
|
||||||
<div @click="changeTab('endpointQuery')" class="sub-list-tab" v-has="'project_endpoint_query_chart_view'" v-if="from == $CONSTANTS.fromRoute.endpoint" :id="from+'-change-endpoint'">{{$t("overall.query")}}</div>
|
<div @click="changeTab('endpointQuery')" class="sub-list-tab" v-has="'project_endpoint_query_chart_view'" v-if="from == $CONSTANTS.fromRoute.endpoint" :id="from+'-change-endpoint'">{{$t("overall.query")}}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="top-tool-right">
|
<div class="top-tool-right">
|
||||||
@@ -22,7 +22,7 @@
|
|||||||
<div class="top-tool-search">
|
<div class="top-tool-search">
|
||||||
<search-input :default-item="'alertMessageState'" :default-value="defaultSearchValue" :searchMsg="searchMsg" @search="search" position="alert-bottom"></search-input>
|
<search-input :default-item="'alertMessageState'" :default-value="defaultSearchValue" :searchMsg="searchMsg" @search="search" position="alert-bottom"></search-input>
|
||||||
</div>
|
</div>
|
||||||
<button :title="$t('overall.exportExcelLower')" @click="importBox.show = true" type="button" v-has="['rule_alerts_export', 'project_endpoint_alerts_export', 'asset_alerts_export']"
|
<button :title="$t('overall.exportExcel')" @click="importBox.show = true" type="button" v-has="['rule_alerts_export', 'project_endpoint_alerts_export', 'asset_alerts_export']"
|
||||||
class="nz-btn nz-btn-size-normal nz-btn-style-light margin-l-20" id="alert-list-export">
|
class="nz-btn nz-btn-size-normal nz-btn-style-light margin-l-20" id="alert-list-export">
|
||||||
<i class="nz-icon nz-icon-download1"></i>
|
<i class="nz-icon nz-icon-download1"></i>
|
||||||
</button>
|
</button>
|
||||||
@@ -49,7 +49,7 @@
|
|||||||
<el-dialog :visible.sync="importBox.show" :title="importBox.title" :modal-append-to-body='false' :show-close="true" width="300px" @close="importBox.show = false" class="nz-dialog">
|
<el-dialog :visible.sync="importBox.show" :title="importBox.title" :modal-append-to-body='false' :show-close="true" width="300px" @close="importBox.show = false" class="nz-dialog">
|
||||||
<div class="upload-body">
|
<div class="upload-body">
|
||||||
<button @click="exportCur" class="el-button el-button--default el-button--small">
|
<button @click="exportCur" class="el-button el-button--default el-button--small">
|
||||||
<span>{{$t('overall.exportCur')}}</span>
|
<span>{{$t('overall.current')}}</span>
|
||||||
</button>
|
</button>
|
||||||
<button @click="exportAll" class="el-button el-button--default el-button--small">
|
<button @click="exportAll" class="el-button el-button--default el-button--small">
|
||||||
<span>{{$t('overall.exportAll')}}</span>
|
<span>{{$t('overall.exportAll')}}</span>
|
||||||
@@ -168,16 +168,16 @@ export default {
|
|||||||
prop: 'description',
|
prop: 'description',
|
||||||
show: true
|
show: true
|
||||||
}, {
|
}, {
|
||||||
label: this.$t('alert.list.state'),
|
label: this.$t('overall.state'),
|
||||||
prop: 'state',
|
prop: 'state',
|
||||||
show: true,
|
show: true,
|
||||||
width: 100
|
width: 100
|
||||||
}, {
|
}, {
|
||||||
label: this.$t('alert.startAt'),
|
label: this.$t('overall.startTime'),
|
||||||
prop: 'startAt',
|
prop: 'startAt',
|
||||||
show: true
|
show: true
|
||||||
}, {
|
}, {
|
||||||
label: this.$t('alert.endAt'),
|
label: this.$t('overall.endTime'),
|
||||||
prop: 'endAt',
|
prop: 'endAt',
|
||||||
show: true
|
show: true
|
||||||
}, {
|
}, {
|
||||||
@@ -231,14 +231,14 @@ export default {
|
|||||||
disabled: false
|
disabled: false
|
||||||
}, {
|
}, {
|
||||||
id: 12,
|
id: 12,
|
||||||
name: this.$t('alert.list.state'),
|
name: this.$t('overall.state'),
|
||||||
type: 'select',
|
type: 'select',
|
||||||
label: 'alertMessageState',
|
label: 'alertMessageState',
|
||||||
disabled: false
|
disabled: false
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 26,
|
id: 26,
|
||||||
name: this.$t('alert.list.id'),
|
name: this.$t('asset.id'),
|
||||||
type: 'id',
|
type: 'id',
|
||||||
label: 'id',
|
label: 'id',
|
||||||
disabled: false
|
disabled: false
|
||||||
@@ -696,6 +696,7 @@ export default {
|
|||||||
immediate: true,
|
immediate: true,
|
||||||
deep: true,
|
deep: true,
|
||||||
handler (n) {
|
handler (n) {
|
||||||
|
this.searchLabel = {}
|
||||||
if (this.from === fromRoute.module) {
|
if (this.from === fromRoute.module) {
|
||||||
this.searchLabel.moduleIds = n.id
|
this.searchLabel.moduleIds = n.id
|
||||||
} else {
|
} else {
|
||||||
|
|||||||
@@ -158,9 +158,11 @@ export default {
|
|||||||
immediate: true,
|
immediate: true,
|
||||||
handler (n) {
|
handler (n) {
|
||||||
if (n) {
|
if (n) {
|
||||||
|
this.searchLabel = {}
|
||||||
if (this.from === fromRoute.alertSilence) {
|
if (this.from === fromRoute.alertSilence) {
|
||||||
this.state = '2'
|
this.state = '2'
|
||||||
}
|
}
|
||||||
|
this.searchLabel = {}
|
||||||
this.getTableData()
|
this.getTableData()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -201,7 +203,7 @@ export default {
|
|||||||
searchLabelList: [
|
searchLabelList: [
|
||||||
{
|
{
|
||||||
id: 26,
|
id: 26,
|
||||||
name: this.$t('alert.list.id'),
|
name: this.$t('asset.id'),
|
||||||
type: 'input',
|
type: 'input',
|
||||||
label: 'ids',
|
label: 'ids',
|
||||||
disabled: false
|
disabled: false
|
||||||
|
|||||||
@@ -33,6 +33,7 @@
|
|||||||
@addSilence="addSilence"
|
@addSilence="addSilence"
|
||||||
@orderBy="tableDataSort"
|
@orderBy="tableDataSort"
|
||||||
@reload="getTableData"
|
@reload="getTableData"
|
||||||
|
@topology="topology"
|
||||||
@selectionChange="selectionChange"
|
@selectionChange="selectionChange"
|
||||||
></asset-table>
|
></asset-table>
|
||||||
</template>
|
</template>
|
||||||
@@ -104,9 +105,10 @@ export default {
|
|||||||
label: 'manageIp',
|
label: 'manageIp',
|
||||||
disabled: false
|
disabled: false
|
||||||
}, {
|
}, {
|
||||||
name: this.$t('asset.state'),
|
name: this.$t('overall.state'),
|
||||||
type: 'assetState',
|
type: 'assetState',
|
||||||
label: 'stateIds',
|
label: 'assetState',
|
||||||
|
id: 'stateIds',
|
||||||
readonly: true,
|
readonly: true,
|
||||||
disabled: false
|
disabled: false
|
||||||
}]
|
}]
|
||||||
@@ -279,6 +281,7 @@ export default {
|
|||||||
immediate: true,
|
immediate: true,
|
||||||
deep: true,
|
deep: true,
|
||||||
handler (n, o) {
|
handler (n, o) {
|
||||||
|
this.searchLabel = {}
|
||||||
this.searchLabel.dcIds = n.id
|
this.searchLabel.dcIds = n.id
|
||||||
if (this.from === fromRoute.model) {
|
if (this.from === fromRoute.model) {
|
||||||
delete this.searchLabel.dcIds
|
delete this.searchLabel.dcIds
|
||||||
|
|||||||
@@ -32,6 +32,7 @@
|
|||||||
@addSilence="addSilence"
|
@addSilence="addSilence"
|
||||||
@orderBy="tableDataSort"
|
@orderBy="tableDataSort"
|
||||||
@reload="getTableData"
|
@reload="getTableData"
|
||||||
|
@topology="topology"
|
||||||
@selectionChange="selectionChange"
|
@selectionChange="selectionChange"
|
||||||
></asset-table>
|
></asset-table>
|
||||||
</template>
|
</template>
|
||||||
@@ -103,9 +104,9 @@ export default {
|
|||||||
label: 'manageIp',
|
label: 'manageIp',
|
||||||
disabled: false
|
disabled: false
|
||||||
}, {
|
}, {
|
||||||
name: this.$t('asset.state'),
|
name: this.$t('overall.state'),
|
||||||
type: 'assetState',
|
type: 'assetState',
|
||||||
label: 'stateIds',
|
label: 'assetState',
|
||||||
id: 'stateIds',
|
id: 'stateIds',
|
||||||
readonly: true,
|
readonly: true,
|
||||||
disabled: false
|
disabled: false
|
||||||
@@ -283,6 +284,7 @@ export default {
|
|||||||
immediate: true,
|
immediate: true,
|
||||||
deep: true,
|
deep: true,
|
||||||
handler (n, o) {
|
handler (n, o) {
|
||||||
|
this.searchLabel = {}
|
||||||
this.searchLabel.dcIds = n.id
|
this.searchLabel.dcIds = n.id
|
||||||
if (this.from === fromRoute.model) {
|
if (this.from === fromRoute.model) {
|
||||||
delete this.searchLabel.dcIds
|
delete this.searchLabel.dcIds
|
||||||
|
|||||||
@@ -93,6 +93,7 @@ export default {
|
|||||||
obj: {
|
obj: {
|
||||||
immediate: true,
|
immediate: true,
|
||||||
handler (n) {
|
handler (n) {
|
||||||
|
this.searchLabel = {}
|
||||||
this.formatTime = bus.timeFormate(new Date(bus.computeTimezoneTime(new Date())))
|
this.formatTime = bus.timeFormate(new Date(bus.computeTimezoneTime(new Date())))
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -22,7 +22,7 @@
|
|||||||
<div class="sub-list-tabs">
|
<div class="sub-list-tabs">
|
||||||
<div class="sub-list-tab-title">{{$t("project.endpoint.endpointId")}}: {{currentEndpoint ? currentEndpoint.id : ''}}</div><div
|
<div class="sub-list-tab-title">{{$t("project.endpoint.endpointId")}}: {{currentEndpoint ? currentEndpoint.id : ''}}</div><div
|
||||||
class="sub-list-tab" @click="changeTab('panel')" id="endpoint-query-changepanel">{{$t("overall.detail")}}</div>
|
class="sub-list-tab" @click="changeTab('panel')" id="endpoint-query-changepanel">{{$t("overall.detail")}}</div>
|
||||||
<div class="sub-list-tab" @click="changeTab('alertMessage')" id="endpoint-query-alertMessage">{{$t("asset.alerts")}}</div>
|
<div class="sub-list-tab" @click="changeTab('alertMessage')" id="endpoint-query-alertMessage">{{$t("alert.alertMessage")}}</div>
|
||||||
<div class="sub-list-tab sub-list-tab-active">{{$t("overall.query")}}</div>
|
<div class="sub-list-tab sub-list-tab-active">{{$t("overall.query")}}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="top-tool-right">
|
<div class="top-tool-right">
|
||||||
@@ -64,7 +64,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="table-header-inner" @click="clearSelectedMetrics"><span><i style="font-size: 12px;margin-left: 2px;" class="nz-icon nz-icon-close " :class="{'control-icon-unchecked':selectedEndpoints.length<1,'control-icon-checked':selectedEndpoints.length>0}"></i></span></div>
|
<div class="table-header-inner" @click="clearSelectedMetrics"><span><i style="font-size: 12px;margin-left: 2px;" class="nz-icon nz-icon-close " :class="{'control-icon-unchecked':selectedEndpoints.length<1,'control-icon-checked':selectedEndpoints.length>0}"></i></span></div>
|
||||||
<pl-table :row-height="28" use-virtual :datas="tableData" border :empty-text="$t('config.mib.noData')" :header-cell-class-name="cellClass" :style="{height: $tableHeight.noPagination}"
|
<pl-table :row-height="28" use-virtual :datas="tableData" border :empty-text="$t('overall.noData')" :header-cell-class-name="cellClass" :style="{height: $tableHeight.noPagination}"
|
||||||
:pagination-show="false" class="nz-table endpoint-query-table" ref="endpointQueryTable" style="width: 100%;" v-my-loading="loading"
|
:pagination-show="false" class="nz-table endpoint-query-table" ref="endpointQueryTable" style="width: 100%;" v-my-loading="loading"
|
||||||
v-if="tableShow && plTableSHow" id="endpoint-list-table" :tooltip-effect="'light'" @selection-change="selectChange">
|
v-if="tableShow && plTableSHow" id="endpoint-list-table" :tooltip-effect="'light'" @selection-change="selectChange">
|
||||||
<pl-table-column
|
<pl-table-column
|
||||||
@@ -80,7 +80,7 @@
|
|||||||
:min-width="1000"
|
:min-width="1000"
|
||||||
column-key="element"
|
column-key="element"
|
||||||
:show-overflow-tooltip="true"
|
:show-overflow-tooltip="true"
|
||||||
:label="$t('project.endpoint.element')">
|
:label="$t('dashboard.panel.chartForm.element')">
|
||||||
<template v-slot="scope">
|
<template v-slot="scope">
|
||||||
<el-popover trigger="hover" placement="right" v-if="typeof scope.row.metricTip != 'undefined' && scope.row.metricTip != null">
|
<el-popover trigger="hover" placement="right" v-if="typeof scope.row.metricTip != 'undefined' && scope.row.metricTip != null">
|
||||||
<div>
|
<div>
|
||||||
@@ -100,7 +100,7 @@
|
|||||||
:resizable="false"
|
:resizable="false"
|
||||||
prop="value"
|
prop="value"
|
||||||
column-key="value"
|
column-key="value"
|
||||||
:label="$t('project.endpoint.value')"
|
:label="$t('overall.value')"
|
||||||
min-width="180">
|
min-width="180">
|
||||||
</pl-table-column>
|
</pl-table-column>
|
||||||
</pl-table>
|
</pl-table>
|
||||||
@@ -705,6 +705,7 @@ export default {
|
|||||||
deep: true,
|
deep: true,
|
||||||
handler (n) {
|
handler (n) {
|
||||||
if (n) {
|
if (n) {
|
||||||
|
this.searchLabel = {}
|
||||||
this.currentEndpoint = JSON.parse(JSON.stringify(n))
|
this.currentEndpoint = JSON.parse(JSON.stringify(n))
|
||||||
this.queryEndpoint()
|
this.queryEndpoint()
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -4,13 +4,13 @@
|
|||||||
<div class="sub-list-tabs" v-if="from===fromRoute.asset">
|
<div class="sub-list-tabs" v-if="from===fromRoute.asset">
|
||||||
<div class="sub-list-tab-title">{{obj.host}}</div>
|
<div class="sub-list-tab-title">{{obj.host}}</div>
|
||||||
<div class="sub-list-tab" @click="changeTab('panel')" id="endpoint-tab-change-panel">{{$t("overall.detail")}}</div>
|
<div class="sub-list-tab" @click="changeTab('panel')" id="endpoint-tab-change-panel">{{$t("overall.detail")}}</div>
|
||||||
<div @click="changeTab('alertMessage')" class="sub-list-tab" v-has="'asset_alerts_view'" id="endpoint-tab-change-alertmsg">{{$t("asset.alerts")}}</div>
|
<div @click="changeTab('alertMessage')" class="sub-list-tab" v-has="'asset_alerts_view'" id="endpoint-tab-change-alertmsg">{{$t("alert.alertMessage")}}</div>
|
||||||
<div class="sub-list-tab sub-list-tab-active">{{$t("asset.modules")}}</div>
|
<div class="sub-list-tab sub-list-tab-active">{{$t("asset.endpoint")}}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="sub-list-tabs" v-if="from===fromRoute.module">
|
<div class="sub-list-tabs" v-if="from===fromRoute.module">
|
||||||
<div class="sub-list-tab-title">{{obj.name}}</div>
|
<div class="sub-list-tab-title">{{obj.name}}</div>
|
||||||
<div class="sub-list-tab sub-list-tab-active">{{$t("asset.modules")}}</div>
|
<div class="sub-list-tab sub-list-tab-active">{{$t("asset.endpoint")}}</div>
|
||||||
<div @click="changeTab('alertMessage')" class="sub-list-tab" id="endpoint-tab-change-alertmsg">{{$t("asset.alerts")}}</div>
|
<div @click="changeTab('alertMessage')" class="sub-list-tab" id="endpoint-tab-change-alertmsg">{{$t("alert.alertMessage")}}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="top-tool-right">
|
<div class="top-tool-right">
|
||||||
<div class="top-tool-search">
|
<div class="top-tool-search">
|
||||||
@@ -206,17 +206,17 @@ export default {
|
|||||||
show: true,
|
show: true,
|
||||||
width: '120'
|
width: '120'
|
||||||
}, {
|
}, {
|
||||||
label: this.$t('project.endpoint.asset'),
|
label: this.$t('asset.asset'),
|
||||||
prop: 'asset',
|
prop: 'asset',
|
||||||
show: true,
|
show: true,
|
||||||
minWidth: '400'
|
minWidth: '400'
|
||||||
}, {
|
}, {
|
||||||
label: this.$t('project.endpoint.host'),
|
label: this.$t('asset.host'),
|
||||||
prop: 'host',
|
prop: 'host',
|
||||||
show: true,
|
show: true,
|
||||||
width: 120
|
width: 120
|
||||||
}, {
|
}, {
|
||||||
label: this.$t('project.endpoint.port'),
|
label: this.$t('asset.port'),
|
||||||
prop: 'port',
|
prop: 'port',
|
||||||
show: true,
|
show: true,
|
||||||
width: '120'
|
width: '120'
|
||||||
@@ -226,27 +226,27 @@ export default {
|
|||||||
show: false,
|
show: false,
|
||||||
width: 120
|
width: 120
|
||||||
}, {
|
}, {
|
||||||
label: this.$t('project.endpoint.labels'),
|
label: this.$t('alert.list.labels'),
|
||||||
prop: 'labels',
|
prop: 'labels',
|
||||||
show: true,
|
show: true,
|
||||||
width: 200
|
width: 200
|
||||||
}, {
|
}, {
|
||||||
label: this.$t('project.endpoint.param'),
|
label: this.$t('config.assetLabel.params'),
|
||||||
prop: 'param',
|
prop: 'param',
|
||||||
show: true,
|
show: true,
|
||||||
width: 200
|
width: 200
|
||||||
}, {
|
}, {
|
||||||
label: this.$t('project.endpoint.path'),
|
label: this.$t('config.terminallog.path'),
|
||||||
prop: 'path',
|
prop: 'path',
|
||||||
show: true,
|
show: true,
|
||||||
width: 200
|
width: 200
|
||||||
}, {
|
}, {
|
||||||
label: this.$t('alert.list.state'),
|
label: this.$t('overall.state'),
|
||||||
prop: 'state',
|
prop: 'state',
|
||||||
show: true,
|
show: true,
|
||||||
width: '80'
|
width: '80'
|
||||||
}, {
|
}, {
|
||||||
label: this.$t('project.endpoint.alerts'),
|
label: this.$t('overall.alert'),
|
||||||
prop: 'alerts',
|
prop: 'alerts',
|
||||||
show: true,
|
show: true,
|
||||||
width: 180
|
width: 180
|
||||||
@@ -283,7 +283,7 @@ export default {
|
|||||||
disabled: false
|
disabled: false
|
||||||
}, {
|
}, {
|
||||||
id: 33,
|
id: 33,
|
||||||
name: this.$t('asset.state'),
|
name: this.$t('overall.state'),
|
||||||
// name: this.$t('asset.asset'),
|
// name: this.$t('asset.asset'),
|
||||||
type: 'select',
|
type: 'select',
|
||||||
label: 'endpointState',
|
label: 'endpointState',
|
||||||
@@ -499,7 +499,7 @@ export default {
|
|||||||
this.getTableData()
|
this.getTableData()
|
||||||
},
|
},
|
||||||
messageStyle (e) {
|
messageStyle (e) {
|
||||||
if (e.column.label == 'Alerts' || e.column.label == this.$t('project.endpoint.alerts')) {
|
if (e.column.label == 'Alerts' || e.column.label == this.$t('overall.alert')) {
|
||||||
if (e.row.alertNum > 0) {
|
if (e.row.alertNum > 0) {
|
||||||
return 'danger'
|
return 'danger'
|
||||||
} else {
|
} else {
|
||||||
@@ -515,6 +515,7 @@ export default {
|
|||||||
deep: true,
|
deep: true,
|
||||||
handler (n) {
|
handler (n) {
|
||||||
if (n) {
|
if (n) {
|
||||||
|
this.searchLabel = {}
|
||||||
if (this.from === fromRoute.asset) {
|
if (this.from === fromRoute.asset) {
|
||||||
this.asset = JSON.parse(JSON.stringify(n))
|
this.asset = JSON.parse(JSON.stringify(n))
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
|
|||||||
@@ -33,6 +33,7 @@
|
|||||||
@orderBy="tableDataSort"
|
@orderBy="tableDataSort"
|
||||||
@addSilence="addSilence"
|
@addSilence="addSilence"
|
||||||
@reload="getTableData"
|
@reload="getTableData"
|
||||||
|
@topology="topology"
|
||||||
@selectionChange="selectionChange"
|
@selectionChange="selectionChange"
|
||||||
></endpoint-table>
|
></endpoint-table>
|
||||||
</template>
|
</template>
|
||||||
@@ -74,6 +75,7 @@ export default {
|
|||||||
immediate: true,
|
immediate: true,
|
||||||
handler (n) {
|
handler (n) {
|
||||||
if (n) {
|
if (n) {
|
||||||
|
this.searchLabel = {}
|
||||||
this.getTableData()
|
this.getTableData()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -65,7 +65,7 @@ export default {
|
|||||||
searchLabelList: [
|
searchLabelList: [
|
||||||
{
|
{
|
||||||
id: 11,
|
id: 11,
|
||||||
name: this.$t('config.operationlog.type'),
|
name: this.$t('overall.type'),
|
||||||
type: 'input',
|
type: 'input',
|
||||||
label: 'type',
|
label: 'type',
|
||||||
disabled: false
|
disabled: false
|
||||||
@@ -77,7 +77,7 @@ export default {
|
|||||||
disabled: false
|
disabled: false
|
||||||
}, {
|
}, {
|
||||||
id: 13,
|
id: 13,
|
||||||
name: this.$t('config.operationlog.operation'),
|
name: this.$t('overall.option'),
|
||||||
type: 'selectString',
|
type: 'selectString',
|
||||||
label: 'operation',
|
label: 'operation',
|
||||||
readonly: true,
|
readonly: true,
|
||||||
|
|||||||
@@ -365,6 +365,10 @@ export default {
|
|||||||
if (this.panelDataList.length > 0) {
|
if (this.panelDataList.length > 0) {
|
||||||
this.showPanel.id = this.filter.panelId = 0
|
this.showPanel.id = this.filter.panelId = 0
|
||||||
this.getData(this.filter)
|
this.getData(this.filter)
|
||||||
|
} else {
|
||||||
|
this.chartListLoading = false
|
||||||
|
this.dataList = this.panelDataList
|
||||||
|
this.$emit('exit')
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
this.$emit('getTableData')
|
this.$emit('getTableData')
|
||||||
@@ -808,6 +812,7 @@ export default {
|
|||||||
handler (n, o) {
|
handler (n, o) {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
if (n && n.id) {
|
if (n && n.id) {
|
||||||
|
this.searchLabel = {}
|
||||||
this.getTableData(n.id)
|
this.getTableData(n.id)
|
||||||
if (this.from === fromRoute.asset) {
|
if (this.from === fromRoute.asset) {
|
||||||
this.searchLabel.assetIds = n.id
|
this.searchLabel.assetIds = n.id
|
||||||
|
|||||||
@@ -88,6 +88,7 @@ export default {
|
|||||||
deep: true,
|
deep: true,
|
||||||
handler (n, o) {
|
handler (n, o) {
|
||||||
if (n) {
|
if (n) {
|
||||||
|
this.searchLabel = {}
|
||||||
this.inputDateSearch = ''
|
this.inputDateSearch = ''
|
||||||
this.getTableData()
|
this.getTableData()
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -235,7 +235,7 @@ export default {
|
|||||||
}).then(() => {
|
}).then(() => {
|
||||||
this.$put('/terminal/kill', { uuid: this.obj.uuid }).then(res => {
|
this.$put('/terminal/kill', { uuid: this.obj.uuid }).then(res => {
|
||||||
if (res.code === 200) {
|
if (res.code === 200) {
|
||||||
this.$message.success(this.$t('config.terminallog.success'))
|
this.$message.success(this.$t('overall.result.success'))
|
||||||
this.$emit('exit')
|
this.$emit('exit')
|
||||||
} else {
|
} else {
|
||||||
this.$message.error(this.$t('config.terminallog.killErrorTip'))
|
this.$message.error(this.$t('config.terminallog.killErrorTip'))
|
||||||
|
|||||||
@@ -84,7 +84,7 @@ export default {
|
|||||||
disabled: false
|
disabled: false
|
||||||
}, {
|
}, {
|
||||||
id: 13,
|
id: 13,
|
||||||
name: this.$t('config.terminallog.sourceIp'),
|
name: this.$t('ping.sourceIp'),
|
||||||
type: 'input',
|
type: 'input',
|
||||||
label: 'remoteAddr',
|
label: 'remoteAddr',
|
||||||
disabled: false
|
disabled: false
|
||||||
@@ -102,14 +102,14 @@ export default {
|
|||||||
disabled: false
|
disabled: false
|
||||||
}, {
|
}, {
|
||||||
id: 16,
|
id: 16,
|
||||||
name: this.$t('config.terminallog.protocol'),
|
name: this.$t('webshell.protocol'),
|
||||||
type: 'selectString',
|
type: 'selectString',
|
||||||
label: 'protocol',
|
label: 'protocol',
|
||||||
readonly: true,
|
readonly: true,
|
||||||
disabled: false
|
disabled: false
|
||||||
}, {
|
}, {
|
||||||
id: 17,
|
id: 17,
|
||||||
name: this.$t('config.terminallog.status'),
|
name: this.$t('overall.state'),
|
||||||
type: 'terminalStatus',
|
type: 'terminalStatus',
|
||||||
label: 'state',
|
label: 'state',
|
||||||
readonly: true,
|
readonly: true,
|
||||||
@@ -164,7 +164,7 @@ export default {
|
|||||||
}).then(() => {
|
}).then(() => {
|
||||||
this.$put('/terminal/kill', { uuid: record.uuid }).then(res => {
|
this.$put('/terminal/kill', { uuid: record.uuid }).then(res => {
|
||||||
if (res.code === 200) {
|
if (res.code === 200) {
|
||||||
this.$message.success(this.$t('config.terminallog.success'))
|
this.$message.success(this.$t('overall.result.success'))
|
||||||
this.bottomBox.showSubList = false
|
this.bottomBox.showSubList = false
|
||||||
this.getTableData()
|
this.getTableData()
|
||||||
} else {
|
} else {
|
||||||
|
|||||||
@@ -10,6 +10,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import bus from '@/libs/bus'
|
||||||
export default {
|
export default {
|
||||||
name: 'deleteButton',
|
name: 'deleteButton',
|
||||||
props: {
|
props: {
|
||||||
@@ -44,6 +45,7 @@ export default {
|
|||||||
if (response.code === 200) {
|
if (response.code === 200) {
|
||||||
this.$message({ duration: 2000, type: 'success', message: this.$t('tip.deleteSuccess') })
|
this.$message({ duration: 2000, type: 'success', message: this.$t('tip.deleteSuccess') })
|
||||||
this.$emit('after')
|
this.$emit('after')
|
||||||
|
bus.$emit('delTableRow', this.deleteObjs.map(item => item.id))
|
||||||
} else {
|
} else {
|
||||||
this.$message.error(response.msg)
|
this.$message.error(response.msg)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -18,7 +18,7 @@
|
|||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="detail-top-search" style="text-align: center" v-else>
|
<div class="detail-top-search" style="text-align: center" v-else>
|
||||||
{{$t('config.assetLabel.all')}}
|
{{$t('overall.exportAll')}}
|
||||||
</div>
|
</div>
|
||||||
<i class="nz-icon nz-icon-arrow-down search-value"/>
|
<i class="nz-icon nz-icon-arrow-down search-value"/>
|
||||||
</div>
|
</div>
|
||||||
@@ -50,7 +50,7 @@
|
|||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="detail-top-search" style="text-align: center" v-else>
|
<div class="detail-top-search" style="text-align: center" v-else>
|
||||||
{{$t('config.assetLabel.all')}}
|
{{$t('overall.exportAll')}}
|
||||||
</div>
|
</div>
|
||||||
<i class="nz-icon nz-icon-arrow-down search-value"/>
|
<i class="nz-icon nz-icon-arrow-down search-value"/>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -35,7 +35,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="asset-name">
|
<div class="asset-name">
|
||||||
<span>{{item.severity?item.severity.name:'-'}} /
|
<span>{{item.severity?item.severity.name:'-'}} /
|
||||||
<span v-if="item.type === 1">{{ $t('project.metrics.metrics') }}</span>
|
<span v-if="item.type === 1">{{ $t('overall.metric') }}</span>
|
||||||
<span v-else-if="item.type === 2">{{ $t('overall.logs') }}</span>
|
<span v-else-if="item.type === 2">{{ $t('overall.logs') }}</span>
|
||||||
<span v-else-if="item.type === 3">SNMP trap</span>
|
<span v-else-if="item.type === 3">SNMP trap</span>
|
||||||
<span v-else>-</span>
|
<span v-else>-</span>
|
||||||
@@ -148,7 +148,7 @@ export default {
|
|||||||
show: false,
|
show: false,
|
||||||
minWidth: 100
|
minWidth: 100
|
||||||
}, {
|
}, {
|
||||||
label: this.$t('config.dc.state'),
|
label: this.$t('overall.state'),
|
||||||
prop: 'state',
|
prop: 'state',
|
||||||
show: true,
|
show: true,
|
||||||
minWidth: 100,
|
minWidth: 100,
|
||||||
|
|||||||
@@ -77,12 +77,12 @@ export default {
|
|||||||
minWidth: 140,
|
minWidth: 140,
|
||||||
sortable: 'custom'
|
sortable: 'custom'
|
||||||
}, {
|
}, {
|
||||||
label: this.$t('overall.parent'),
|
label: this.$t('asset.parent'),
|
||||||
prop: 'parent',
|
prop: 'parent',
|
||||||
show: false,
|
show: false,
|
||||||
minWidth: 110
|
minWidth: 110
|
||||||
}, {
|
}, {
|
||||||
label: this.$t('overall.children'),
|
label: this.$t('overall.assetSubTab'),
|
||||||
prop: 'children',
|
prop: 'children',
|
||||||
show: false,
|
show: false,
|
||||||
minWidth: 120
|
minWidth: 120
|
||||||
@@ -93,7 +93,7 @@ export default {
|
|||||||
minWidth: 140,
|
minWidth: 140,
|
||||||
sortable: 'custom'
|
sortable: 'custom'
|
||||||
}, {
|
}, {
|
||||||
label: this.$t('asset.state'),
|
label: this.$t('overall.state'),
|
||||||
prop: 'state',
|
prop: 'state',
|
||||||
show: true,
|
show: true,
|
||||||
minWidth: 110,
|
minWidth: 110,
|
||||||
@@ -116,7 +116,7 @@ export default {
|
|||||||
minWidth: 110,
|
minWidth: 110,
|
||||||
sortable: 'custom'
|
sortable: 'custom'
|
||||||
}, {
|
}, {
|
||||||
label: this.$t('asset.alertNum'),
|
label: this.$t('overall.alert'),
|
||||||
prop: 'alertNum',
|
prop: 'alertNum',
|
||||||
show: true,
|
show: true,
|
||||||
width: 120,
|
width: 120,
|
||||||
|
|||||||
@@ -77,29 +77,29 @@ export default {
|
|||||||
prop: 'location',
|
prop: 'location',
|
||||||
show: true
|
show: true
|
||||||
}, {
|
}, {
|
||||||
label: this.$t('config.dc.cabinetNum'),
|
label: this.$t('asset.cabinet'),
|
||||||
prop: 'cabinetNum',
|
prop: 'cabinetNum',
|
||||||
show: true,
|
show: true,
|
||||||
minWidth: 100,
|
minWidth: 100,
|
||||||
sortable: 'custom'
|
sortable: 'custom'
|
||||||
}, {
|
}, {
|
||||||
label: this.$t('config.dc.assets'),
|
label: this.$t('asset.asset'),
|
||||||
prop: 'assetNum',
|
prop: 'assetNum',
|
||||||
show: true,
|
show: true,
|
||||||
minWidth: 90,
|
minWidth: 90,
|
||||||
sortable: 'custom'
|
sortable: 'custom'
|
||||||
}, {
|
}, {
|
||||||
label: this.$t('config.dc.alert'),
|
label: this.$t('overall.alert'),
|
||||||
prop: 'alertNum',
|
prop: 'alertNum',
|
||||||
width: 120,
|
width: 120,
|
||||||
show: true
|
show: true
|
||||||
}, {
|
}, {
|
||||||
label: this.$t('asset.tel'),
|
label: this.$t('config.dc.tel'),
|
||||||
prop: 'tel',
|
prop: 'tel',
|
||||||
show: false,
|
show: false,
|
||||||
minWidth: 100
|
minWidth: 100
|
||||||
}, {
|
}, {
|
||||||
label: this.$t('asset.principal'),
|
label: this.$t('config.dc.principal'),
|
||||||
prop: 'principal',
|
prop: 'principal',
|
||||||
show: false,
|
show: false,
|
||||||
minWidth: 120
|
minWidth: 120
|
||||||
@@ -114,7 +114,7 @@ export default {
|
|||||||
show: false,
|
show: false,
|
||||||
minWidth: 100
|
minWidth: 100
|
||||||
}, {
|
}, {
|
||||||
label: this.$t('config.dc.state'),
|
label: this.$t('overall.state'),
|
||||||
prop: 'state',
|
prop: 'state',
|
||||||
show: true,
|
show: true,
|
||||||
minWidth: 100,
|
minWidth: 100,
|
||||||
|
|||||||
@@ -67,7 +67,7 @@ export default {
|
|||||||
width: 80,
|
width: 80,
|
||||||
sortable: 'custom'
|
sortable: 'custom'
|
||||||
}, {
|
}, {
|
||||||
label: this.$t('project.endpoint.name'),
|
label: this.$t('overall.name'),
|
||||||
prop: 'name',
|
prop: 'name',
|
||||||
show: true,
|
show: true,
|
||||||
minWidth: 200,
|
minWidth: 200,
|
||||||
@@ -80,7 +80,7 @@ export default {
|
|||||||
sortable: 'custom'
|
sortable: 'custom'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: this.$t('project.endpoint.asset'),
|
label: this.$t('asset.asset'),
|
||||||
prop: 'asset',
|
prop: 'asset',
|
||||||
show: true,
|
show: true,
|
||||||
minWidth: 90,
|
minWidth: 90,
|
||||||
@@ -92,20 +92,20 @@ export default {
|
|||||||
show: true
|
show: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: this.$t('project.endpoint.configs'),
|
label: this.$t('project.module.configs'),
|
||||||
prop: 'configs',
|
prop: 'configs',
|
||||||
minWidth: 150,
|
minWidth: 150,
|
||||||
show: false
|
show: false
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: this.$t('project.endpoint.alerts'),
|
label: this.$t('overall.alert'),
|
||||||
prop: 'alerts',
|
prop: 'alerts',
|
||||||
show: true,
|
show: true,
|
||||||
minWidth: 180,
|
minWidth: 180,
|
||||||
sortable: 'custom'
|
sortable: 'custom'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: this.$t('project.endpoint.state'),
|
label: this.$t('overall.state'),
|
||||||
prop: 'state',
|
prop: 'state',
|
||||||
show: true,
|
show: true,
|
||||||
minWidth: 200
|
minWidth: 200
|
||||||
|
|||||||
@@ -67,7 +67,7 @@ export default {
|
|||||||
width: 80,
|
width: 80,
|
||||||
sortable: 'custom'
|
sortable: 'custom'
|
||||||
}, {
|
}, {
|
||||||
label: this.$t('project.module.moduleName'),
|
label: this.$t('overall.name'),
|
||||||
prop: 'name',
|
prop: 'name',
|
||||||
show: true,
|
show: true,
|
||||||
minWidth: 200,
|
minWidth: 200,
|
||||||
@@ -86,7 +86,7 @@ export default {
|
|||||||
width: 200,
|
width: 200,
|
||||||
sortable: 'custom'
|
sortable: 'custom'
|
||||||
}, {
|
}, {
|
||||||
label: this.$t('project.module.alerts'),
|
label: this.$t('overall.alert'),
|
||||||
prop: 'alertNum',
|
prop: 'alertNum',
|
||||||
show: true,
|
show: true,
|
||||||
width: 120,
|
width: 120,
|
||||||
|
|||||||
@@ -92,7 +92,7 @@ export default {
|
|||||||
return {
|
return {
|
||||||
tableTitle: [
|
tableTitle: [
|
||||||
{
|
{
|
||||||
label: this.$t('config.terminallog.id'),
|
label: this.$t('asset.id'),
|
||||||
prop: 'id',
|
prop: 'id',
|
||||||
show: true,
|
show: true,
|
||||||
width: 80,
|
width: 80,
|
||||||
@@ -103,13 +103,13 @@ export default {
|
|||||||
minWidth: 200,
|
minWidth: 200,
|
||||||
show: true
|
show: true
|
||||||
}, {
|
}, {
|
||||||
label: this.$t('config.terminallog.username'),
|
label: this.$t('config.operationlog.username'),
|
||||||
prop: 'username',
|
prop: 'username',
|
||||||
minWidth: 200,
|
minWidth: 200,
|
||||||
show: true
|
show: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: this.$t('config.terminallog.source'),
|
label: this.$t('ping.sourceIp'),
|
||||||
prop: 'sourceIp',
|
prop: 'sourceIp',
|
||||||
minWidth: 115,
|
minWidth: 115,
|
||||||
show: true,
|
show: true,
|
||||||
@@ -121,12 +121,12 @@ export default {
|
|||||||
show: true
|
show: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: this.$t('config.terminallog.protocol'),
|
label: this.$t('webshell.protocol'),
|
||||||
prop: 'protocol',
|
prop: 'protocol',
|
||||||
show: true
|
show: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: this.$t('config.terminallog.startTime'),
|
label: this.$t('overall.startTime'),
|
||||||
prop: 'startTime',
|
prop: 'startTime',
|
||||||
minWidth: 100,
|
minWidth: 100,
|
||||||
show: true
|
show: true
|
||||||
@@ -143,7 +143,7 @@ export default {
|
|||||||
show: false
|
show: false
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: this.$t('config.terminallog.status'), // killusername鼠标悬停形式
|
label: this.$t('overall.state'), // killusername鼠标悬停形式
|
||||||
prop: 'state',
|
prop: 'state',
|
||||||
show: true,
|
show: true,
|
||||||
width: 150,
|
width: 150,
|
||||||
|
|||||||
@@ -73,13 +73,13 @@ export default {
|
|||||||
sortable: 'custom'
|
sortable: 'custom'
|
||||||
},
|
},
|
||||||
// {
|
// {
|
||||||
// label: this.$t('config.user.username'),
|
// label: this.$t('login.username'),
|
||||||
// prop: 'username',
|
// prop: 'username',
|
||||||
// show: true,
|
// show: true,
|
||||||
// width: 150
|
// width: 150
|
||||||
// },
|
// },
|
||||||
{
|
{
|
||||||
label: this.$t('config.user.roles'),
|
label: this.$t('profile.role'),
|
||||||
prop: 'roles',
|
prop: 'roles',
|
||||||
show: true,
|
show: true,
|
||||||
width: 150
|
width: 150
|
||||||
@@ -89,17 +89,17 @@ export default {
|
|||||||
show: true,
|
show: true,
|
||||||
minWidth: 150
|
minWidth: 150
|
||||||
}, {
|
}, {
|
||||||
label: this.$t('config.user.lastLoginTime'),
|
label: this.$t('profile.lastLoginTime'),
|
||||||
prop: 'lastLoginTime',
|
prop: 'lastLoginTime',
|
||||||
show: true,
|
show: true,
|
||||||
width: 200
|
width: 200
|
||||||
}, {
|
}, {
|
||||||
label: this.$t('config.user.lastLoginIp'),
|
label: this.$t('profile.lastLoginIp'),
|
||||||
prop: 'lastLoginIp',
|
prop: 'lastLoginIp',
|
||||||
show: true,
|
show: true,
|
||||||
width: 150
|
width: 150
|
||||||
}, {
|
}, {
|
||||||
label: this.$t('config.user.source'),
|
label: this.$t('profile.source'),
|
||||||
prop: 'source',
|
prop: 'source',
|
||||||
show: true,
|
show: true,
|
||||||
width: 150
|
width: 150
|
||||||
@@ -109,7 +109,7 @@ export default {
|
|||||||
show: true,
|
show: true,
|
||||||
width: 150
|
width: 150
|
||||||
}, {
|
}, {
|
||||||
label: this.$t('config.user.enable'),
|
label: this.$t('overall.enable'),
|
||||||
prop: 'status',
|
prop: 'status',
|
||||||
show: true,
|
show: true,
|
||||||
width: 100
|
width: 100
|
||||||
|
|||||||
@@ -200,7 +200,7 @@ export default {
|
|||||||
endpointTabTitle: [
|
endpointTabTitle: [
|
||||||
{ prop: 'panelTab', name: this.$t('overall.detail') },
|
{ prop: 'panelTab', name: this.$t('overall.detail') },
|
||||||
{ prop: 'endpointAlertMessage', name: this.$t('overall.alert') },
|
{ prop: 'endpointAlertMessage', name: this.$t('overall.alert') },
|
||||||
{ prop: 'endpointQuery', name: this.$t('project.metrics.metrics') },
|
{ prop: 'endpointQuery', name: this.$t('overall.metric') },
|
||||||
{ prop: 'log', name: this.$t('overall.logs') }
|
{ prop: 'log', name: this.$t('overall.logs') }
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
@@ -216,22 +216,22 @@ export default {
|
|||||||
]
|
]
|
||||||
},
|
},
|
||||||
model: [
|
model: [
|
||||||
{ prop: 'asset', name: this.$t('asset.assets'), active: true }
|
{ prop: 'asset', name: this.$t('asset.asset'), active: true }
|
||||||
],
|
],
|
||||||
dc: {
|
dc: {
|
||||||
cabinet: [
|
cabinet: [
|
||||||
{ prop: 'cabinet', name: this.$t('config.dc.cabinets'), active: true },
|
{ prop: 'cabinet', name: this.$t('asset.cabinet'), active: true },
|
||||||
{ prop: 'asset', name: this.$t('asset.assets'), active: false },
|
{ prop: 'asset', name: this.$t('asset.asset'), active: false },
|
||||||
{ prop: 'alertMessageTab', name: this.$t('overall.alert'), active: false }
|
{ prop: 'alertMessageTab', name: this.$t('overall.alert'), active: false }
|
||||||
],
|
],
|
||||||
asset: [
|
asset: [
|
||||||
{ prop: 'cabinet', name: this.$t('config.dc.cabinets'), active: false },
|
{ prop: 'cabinet', name: this.$t('asset.cabinet'), active: false },
|
||||||
{ prop: 'asset', name: this.$t('asset.assets'), active: true },
|
{ prop: 'asset', name: this.$t('asset.asset'), active: true },
|
||||||
{ prop: 'alertMessageTab', name: this.$t('overall.alert'), active: false }
|
{ prop: 'alertMessageTab', name: this.$t('overall.alert'), active: false }
|
||||||
],
|
],
|
||||||
alertMessage: [
|
alertMessage: [
|
||||||
{ prop: 'cabinet', name: this.$t('config.dc.cabinets'), active: false },
|
{ prop: 'cabinet', name: this.$t('asset.cabinet'), active: false },
|
||||||
{ prop: 'asset', name: this.$t('asset.assets'), active: false },
|
{ prop: 'asset', name: this.$t('asset.asset'), active: false },
|
||||||
{ prop: 'alertMessageTab', name: this.$t('overall.alert'), active: true }
|
{ prop: 'alertMessageTab', name: this.$t('overall.alert'), active: true }
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -210,7 +210,7 @@ export default {
|
|||||||
return this.noMatchText || this.t('el.select.noMatch')
|
return this.noMatchText || this.t('el.select.noMatch')
|
||||||
}
|
}
|
||||||
if (this.options.length === 0) {
|
if (this.options.length === 0) {
|
||||||
return this.noDataText || this.t('el.select.noData')
|
return this.noDataText || this.t('overall.noData')
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return null
|
return null
|
||||||
|
|||||||
@@ -28,7 +28,7 @@
|
|||||||
</button>
|
</button>
|
||||||
<div>
|
<div>
|
||||||
<button :id="tableId+'-element-set-esc'" class="nz-btn nz-btn-size-small nz-btn-style-light" type="button" @click.stop="esc">
|
<button :id="tableId+'-element-set-esc'" class="nz-btn nz-btn-size-small nz-btn-style-light" type="button" @click.stop="esc">
|
||||||
<span class="top-tool-btn-txt">{{$t('overall.esc')}}</span>
|
<span class="top-tool-btn-txt">{{$t('overall.cancel')}}</span>
|
||||||
</button>
|
</button>
|
||||||
<button :id="tableId+'-element-set-save'" class="nz-btn nz-btn-size-small nz-btn-style-normal" type="button" @click.stop="save">
|
<button :id="tableId+'-element-set-save'" class="nz-btn nz-btn-size-small nz-btn-style-normal" type="button" @click.stop="save">
|
||||||
<span class="top-tool-btn-txt">{{$t('overall.save')}}</span>
|
<span class="top-tool-btn-txt">{{$t('overall.save')}}</span>
|
||||||
|
|||||||
@@ -42,7 +42,7 @@
|
|||||||
<div v-if="importBox.type == 2">
|
<div v-if="importBox.type == 2">
|
||||||
<div class="upload-body">
|
<div class="upload-body">
|
||||||
<button @click="exportCur" class="el-button el-button--default el-button--small" :id="id+'-xlsx-export-current'">
|
<button @click="exportCur" class="el-button el-button--default el-button--small" :id="id+'-xlsx-export-current'">
|
||||||
<span>{{$t('overall.exportCur')}}</span>
|
<span>{{$t('overall.current')}}</span>
|
||||||
</button>
|
</button>
|
||||||
<button @click="exportAll" class="el-button el-button--default el-button--small" :id="id+'-xlsx-export-all'">
|
<button @click="exportAll" class="el-button el-button--default el-button--small" :id="id+'-xlsx-export-all'">
|
||||||
<span>{{$t('overall.exportAll')}}</span>
|
<span>{{$t('overall.exportAll')}}</span>
|
||||||
|
|||||||
@@ -63,7 +63,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</div>
|
</div>
|
||||||
<div class="tag-search__add cursor-pointer" @click="addCondition()">{{$t('project.topology.add')}}</div>
|
<div class="tag-search__add cursor-pointer" @click="addCondition()">{{$t('buttons.add')}}</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|||||||
@@ -52,7 +52,7 @@
|
|||||||
<div class="list-item-sub" v-if="item.sub">
|
<div class="list-item-sub" v-if="item.sub">
|
||||||
{{ item.sub }}
|
{{ item.sub }}
|
||||||
</div>
|
</div>
|
||||||
<div class="is-jump" v-my-loading:circle3.scaleMin.icon="true">
|
<div class="is-jump" v-my-loading:circle3.scaleMin.icon="jumpLoading">
|
||||||
<i class="nz-icon nz-icon-huiche"></i>
|
<i class="nz-icon nz-icon-huiche"></i>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
@@ -163,7 +163,7 @@ export default {
|
|||||||
}, {
|
}, {
|
||||||
type: 'endpoint',
|
type: 'endpoint',
|
||||||
isSelect: true,
|
isSelect: true,
|
||||||
title: this.$t('overall.endpoint')
|
title: this.$t('asset.endpoint')
|
||||||
}, {
|
}, {
|
||||||
type: 'alertrule',
|
type: 'alertrule',
|
||||||
isSelect: true,
|
isSelect: true,
|
||||||
|
|||||||
@@ -12,7 +12,7 @@
|
|||||||
<el-skeleton-item class="search-item-name" search-item-path variant="h3" style="width: 30%" />
|
<el-skeleton-item class="search-item-name" search-item-path variant="h3" style="width: 30%" />
|
||||||
<div v-for="item in skeletonArr" :key="item" class="search-item-info">
|
<div v-for="item in skeletonArr" :key="item" class="search-item-info">
|
||||||
<el-skeleton-item class="search-item-key"/>
|
<el-skeleton-item class="search-item-key"/>
|
||||||
<el-skeleton-item class="search-item-value-box" style="margin-left: 20px"/>
|
<el-skeleton-item class="search-item-value-box" style="margin-left: 20px;height: 13px"/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@@ -29,7 +29,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="search-item-value-box" v-if="obj.type === 'endpoint'&&item.key==='state'&&alertLabelData && alertLabelData.configs">
|
<div class="search-item-value-box" v-if="obj.type === 'endpoint'&&item.key==='state'&&alertLabelData && alertLabelData.configs">
|
||||||
<span style="width: auto">
|
<span style="width: auto">
|
||||||
<span class="endpoint-cell-left"><i class="nz-icon nz-icon-Metrics active" /> {{$t('project.endpoint.metrics')}} </span>
|
<span class="endpoint-cell-left"><i class="nz-icon nz-icon-Metrics active" /> {{$t('overall.metric')}} </span>
|
||||||
<span v-if="alertLabelData && alertLabelData.configs[0].state === 0">
|
<span v-if="alertLabelData && alertLabelData.configs[0].state === 0">
|
||||||
<span class="active-icon red-bg inline-block"></span>
|
<span class="active-icon red-bg inline-block"></span>
|
||||||
</span>
|
</span>
|
||||||
@@ -41,7 +41,7 @@
|
|||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
<span style="width: auto">
|
<span style="width: auto">
|
||||||
<span class="endpoint-cell-left" style="margin-left: 10px"><i class="nz-icon nz-icon-logs active" /> {{$t('project.endpoint.logs')}} </span>
|
<span class="endpoint-cell-left" style="margin-left: 10px"><i class="nz-icon nz-icon-logs active" /> {{$t('overall.logs')}} </span>
|
||||||
<span v-if="alertLabelData && alertLabelData.configs[1].state === 0">
|
<span v-if="alertLabelData && alertLabelData.configs[1].state === 0">
|
||||||
<span class="active-icon red-bg inline-block"></span>
|
<span class="active-icon red-bg inline-block"></span>
|
||||||
</span>
|
</span>
|
||||||
@@ -66,7 +66,7 @@
|
|||||||
<div style="cursor: pointer" v-else-if="item.key === 'alertNum'">
|
<div style="cursor: pointer" v-else-if="item.key === 'alertNum'">
|
||||||
<i :class="Number(getPathContent(item.key)) ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert vertical-align-top;" @mouseenter="tooltipHover('',true, $event)" @mouseleave="tooltipHover('',false, $event)"></i>
|
<i :class="Number(getPathContent(item.key)) ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert vertical-align-top;" @mouseenter="tooltipHover('',true, $event)" @mouseleave="tooltipHover('',false, $event)"></i>
|
||||||
<div v-if="alertNumtooltipShow" class="alert-days-info-tooltip" :style="{left: position.left + 'px',top:position.top + 'px'}">
|
<div v-if="alertNumtooltipShow" class="alert-days-info-tooltip" :style="{left: position.left + 'px',top:position.top + 'px'}">
|
||||||
<div class="tooltip-title">{{$t('project.topology.alert')}}({{$t('asset.pingActive')}})</div>
|
<div class="tooltip-title">{{$t('project.topology.alert')}}({{$t('overall.active')}})</div>
|
||||||
<div class="severity-info" style='justify-content: space-between'>
|
<div class="severity-info" style='justify-content: space-between'>
|
||||||
<div class="severity-name">{{$t('overall.result.total')}}</div>
|
<div class="severity-name">{{$t('overall.result.total')}}</div>
|
||||||
<div class="severity-value">{{getPathContent(item.key)}}</div>
|
<div class="severity-value">{{getPathContent(item.key)}}</div>
|
||||||
@@ -136,7 +136,7 @@ export default {
|
|||||||
label: this.$t('overall.name')
|
label: this.$t('overall.name')
|
||||||
}, {
|
}, {
|
||||||
key: 'manageIp',
|
key: 'manageIp',
|
||||||
label: this.$t('overall.manageIp')
|
label: this.$t('asset.manageIp')
|
||||||
}, {
|
}, {
|
||||||
key: 'type.name',
|
key: 'type.name',
|
||||||
label: this.$t('overall.type')
|
label: this.$t('overall.type')
|
||||||
@@ -152,13 +152,13 @@ export default {
|
|||||||
label: this.$t('overall.dc')
|
label: this.$t('overall.dc')
|
||||||
}, {
|
}, {
|
||||||
key: 'cabinet.name',
|
key: 'cabinet.name',
|
||||||
label: this.$t('overall.cabinet')
|
label: this.$t('asset.cabinet')
|
||||||
}, {
|
}, {
|
||||||
key: 'brand.name',
|
key: 'brand.name',
|
||||||
label: this.$t('overall.brand')
|
label: this.$t('asset.brand')
|
||||||
}, {
|
}, {
|
||||||
key: 'model.name',
|
key: 'model.name',
|
||||||
label: this.$t('overall.model')
|
label: this.$t('asset.model')
|
||||||
}, {
|
}, {
|
||||||
key: 'alertNum',
|
key: 'alertNum',
|
||||||
icon: 'nz-icon-overview-alert',
|
icon: 'nz-icon-overview-alert',
|
||||||
@@ -174,11 +174,11 @@ export default {
|
|||||||
label: this.$t('overall.name')
|
label: this.$t('overall.name')
|
||||||
}, {
|
}, {
|
||||||
key: 'location',
|
key: 'location',
|
||||||
label: this.$t('overall.location')
|
label: this.$t('asset.location')
|
||||||
}, {
|
}, {
|
||||||
key: 'cabinetNum',
|
key: 'cabinetNum',
|
||||||
icon: 'nz-icon-cabinet monitorColor',
|
icon: 'nz-icon-cabinet monitorColor',
|
||||||
label: this.$t('overall.cabinet')
|
label: this.$t('asset.cabinet')
|
||||||
}, {
|
}, {
|
||||||
key: 'assetNum',
|
key: 'assetNum',
|
||||||
icon: 'nz-icon-overview-project monitorColor',
|
icon: 'nz-icon-overview-project monitorColor',
|
||||||
@@ -279,10 +279,10 @@ export default {
|
|||||||
label: 'Id'
|
label: 'Id'
|
||||||
}, {
|
}, {
|
||||||
key: 'name',
|
key: 'name',
|
||||||
label: this.$t('alert.name')
|
label: this.$t('overall.name')
|
||||||
}, {
|
}, {
|
||||||
key: 'type',
|
key: 'type',
|
||||||
label: this.$t('alert.type')
|
label: this.$t('overall.type')
|
||||||
}, {
|
}, {
|
||||||
key: 'severityId',
|
key: 'severityId',
|
||||||
label: this.$t('alert.severity'),
|
label: this.$t('alert.severity'),
|
||||||
@@ -457,7 +457,7 @@ export default {
|
|||||||
return style
|
return style
|
||||||
},
|
},
|
||||||
alertruleStr () {
|
alertruleStr () {
|
||||||
const arr = [this.$t('project.metrics.metrics'), this.$t('overall.logs'), 'SNMP trap']
|
const arr = [this.$t('overall.metric'), this.$t('overall.logs'), 'SNMP trap']
|
||||||
if (this.alertLabelData.type) {
|
if (this.alertLabelData.type) {
|
||||||
return arr[this.alertLabelData.type - 1]
|
return arr[this.alertLabelData.type - 1]
|
||||||
} else {
|
} else {
|
||||||
@@ -505,10 +505,10 @@ export default {
|
|||||||
switch (item.type) {
|
switch (item.type) {
|
||||||
case 'asset' : str += `<span>${this.$t('overall.asset')}</span> <span>/</span> <span>${this.$t('overall.asset')}</span>`; break
|
case 'asset' : str += `<span>${this.$t('overall.asset')}</span> <span>/</span> <span>${this.$t('overall.asset')}</span>`; break
|
||||||
case 'datacenter' : str += `<span>${this.$t('config.config')}</span> <span>/</span> <span>${this.$t('overall.dc')}</span>`; break
|
case 'datacenter' : str += `<span>${this.$t('config.config')}</span> <span>/</span> <span>${this.$t('overall.dc')}</span>`; break
|
||||||
case 'project' : str += `<span>${this.$t('config.system.monitor.monitor')}</span> <span>/</span> <span>${this.$t('dashboard.overview.project.project')}</span>`; break
|
case 'project' : str += `<span>${this.$t('config.system.monitor.monitor')}</span> <span>/</span> <span>${this.$t('project.project.projectName')}</span>`; break
|
||||||
case 'module' :str += `<span>${this.$t('config.system.monitor.monitor')}</span> <span>/</span> <span>${this.$t('overall.module')}</span>`; break
|
case 'module' :str += `<span>${this.$t('config.system.monitor.monitor')}</span> <span>/</span> <span>${this.$t('overall.module')}</span>`; break
|
||||||
case 'endpoint' : str += `<span>${this.$t('config.system.monitor.monitor')}</span> <span>/</span> <span>${this.$t('asset.endpoint')}</span>`; break
|
case 'endpoint' : str += `<span>${this.$t('config.system.monitor.monitor')}</span> <span>/</span> <span>${this.$t('asset.endpoint')}</span>`; break
|
||||||
case 'alertrule' : str += `<span>${this.$t('overall.alert')}</span> <span>/</span> <span>${this.$t('dashboard.overview.alert.alertRule')}</span>`; break
|
case 'alertrule' : str += `<span>${this.$t('overall.alert')}</span> <span>/</span> <span>${this.$t('alert.rule')}</span>`; break
|
||||||
}
|
}
|
||||||
return str
|
return str
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -45,13 +45,11 @@ export function setTopology (key, value) {
|
|||||||
// const topologyImgList = localStorage.getItem('nz-imgList') ? JSON.parse(localStorage.getItem('nz-imgList')) : {}
|
// const topologyImgList = localStorage.getItem('nz-imgList') ? JSON.parse(localStorage.getItem('nz-imgList')) : {}
|
||||||
|
|
||||||
export function getTopologyImg (key) {
|
export function getTopologyImg (key) {
|
||||||
// console.log(topologyCache, 'topologyCache')
|
return false
|
||||||
// console.log(localStorage.getItem('nz-img-' + key), !localStorage.getItem('nz-img-' + key))
|
|
||||||
return localStorage.getItem('nz-img-' + key)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export function setTopologyImg (key, img) {
|
export function setTopologyImg (key, img) {
|
||||||
localStorage.setItem('nz-img-' + key, img)
|
// localStorage.setItem('nz-topologyImg-' + key, img)
|
||||||
}
|
}
|
||||||
|
|
||||||
export function setHexagon (key, value) {
|
export function setHexagon (key, value) {
|
||||||
|
|||||||
@@ -157,7 +157,7 @@ export const asset = {
|
|||||||
editTypeOptions: [
|
editTypeOptions: [
|
||||||
{ value: 1, label: i18n.t('overall.account') },
|
{ value: 1, label: i18n.t('overall.account') },
|
||||||
{ value: 2, label: i18n.t('overall.labels') },
|
{ value: 2, label: i18n.t('overall.labels') },
|
||||||
{ value: 3, label: i18n.t('asset.state') },
|
{ value: 3, label: i18n.t('overall.state') },
|
||||||
{ value: 4, label: i18n.t('asset.snmpCredential') }
|
{ value: 4, label: i18n.t('asset.snmpCredential') }
|
||||||
],
|
],
|
||||||
editTypeData: {
|
editTypeData: {
|
||||||
@@ -198,8 +198,8 @@ export const alertMessage = {
|
|||||||
{ value: 'P3', label: i18n.t('alert.config.P3') }
|
{ value: 'P3', label: i18n.t('alert.config.P3') }
|
||||||
],
|
],
|
||||||
typeData: [
|
typeData: [
|
||||||
{ value: 1, label: i18n.t('alert.config.typeOption.project') },
|
{ value: 1, label: i18n.t('project.project.projectName') },
|
||||||
{ value: 2, label: i18n.t('alert.config.typeOption.module') },
|
{ value: 2, label: i18n.t('overall.module') },
|
||||||
{ value: 3, label: i18n.t('alert.config.typeOption.asset') }
|
{ value: 3, label: i18n.t('alert.config.typeOption.asset') }
|
||||||
],
|
],
|
||||||
levels: [
|
levels: [
|
||||||
@@ -216,19 +216,19 @@ export const alertMessage = {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export const statisticsList = [
|
export const statisticsList = [
|
||||||
{ value: 'min', label: i18n.t('dashboard.panel.chartForm.statisticsVal.min') },
|
{ value: 'min', label: i18n.t('dashboard.panel.chartForm.min') },
|
||||||
{ value: 'max', label: i18n.t('dashboard.panel.chartForm.statisticsVal.max') },
|
{ value: 'max', label: i18n.t('dashboard.panel.chartForm.max') },
|
||||||
{ value: 'avg', label: i18n.t('dashboard.panel.chartForm.statisticsVal.average') },
|
{ value: 'avg', label: i18n.t('dashboard.panel.chartForm.statisticsVal.average') },
|
||||||
{ value: 'total', label: i18n.t('dashboard.panel.chartForm.statisticsVal.total') },
|
{ value: 'total', label: i18n.t('dashboard.panel.chartTotal') },
|
||||||
{ value: 'first', label: i18n.t('dashboard.panel.chartForm.statisticsVal.first') },
|
{ value: 'first', label: i18n.t('dashboard.panel.chartForm.statisticsVal.first') },
|
||||||
{ value: 'last', label: i18n.t('dashboard.panel.chartForm.statisticsVal.last') },
|
{ value: 'last', label: i18n.t('dashboard.panel.chartForm.statisticsVal.last') },
|
||||||
{ value: 'range', label: i18n.t('dashboard.panel.chartForm.statisticsVal.range') },
|
{ value: 'range', label: i18n.t('dashboard.panel.chartForm.valMapping.range') },
|
||||||
{ value: 'different', label: i18n.t('dashboard.panel.chartForm.statisticsVal.different') }
|
{ value: 'different', label: i18n.t('dashboard.panel.chartForm.statisticsVal.different') }
|
||||||
]
|
]
|
||||||
|
|
||||||
export const alignList = [
|
export const alignList = [
|
||||||
{ value: 'left', label: i18n.t('dashboard.panel.chartForm.alignList.left') },
|
{ value: 'left', label: i18n.t('project.topology.left') },
|
||||||
{ value: 'center', label: i18n.t('dashboard.panel.chartForm.alignList.center') },
|
{ value: 'center', label: i18n.t('project.topology.center') },
|
||||||
{ value: 'right', label: i18n.t('dashboard.panel.chartForm.alignList.right') }
|
{ value: 'right', label: i18n.t('dashboard.panel.chartForm.alignList.right') }
|
||||||
]
|
]
|
||||||
|
|
||||||
@@ -277,15 +277,15 @@ export const chart = {
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
value: 'url',
|
value: 'url',
|
||||||
label: i18n.t('dashboard.panel.chartForm.typeVal.url.label')
|
label: i18n.t('dashboard.panel.chartForm.url')
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
value: 'group',
|
value: 'group',
|
||||||
label: i18n.t('dashboard.panel.chartForm.typeVal.group.label')
|
label: i18n.t('dashboard.panel.chartForm.group')
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
value: 'logs',
|
value: 'logs',
|
||||||
label: i18n.t('dashboard.panel.chartForm.typeVal.logs.label')
|
label: i18n.t('overall.logs')
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
value: 'diagram',
|
value: 'diagram',
|
||||||
@@ -295,7 +295,7 @@ export const chart = {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export const intervalList = [
|
export const intervalList = [
|
||||||
{ value: -1, label: i18n.t('dashboard.panel.refreshInterval.never') },
|
{ value: -1, label: i18n.t('dashboard.panel.chartForm.lockList.off') },
|
||||||
{ value: 30, label: '30s' },
|
{ value: 30, label: '30s' },
|
||||||
{ value: 60, label: '1m' },
|
{ value: 60, label: '1m' },
|
||||||
{ value: 300, label: '5m' },
|
{ value: 300, label: '5m' },
|
||||||
@@ -306,7 +306,7 @@ export const intervalList = [
|
|||||||
export const setting = {
|
export const setting = {
|
||||||
DcState: [
|
DcState: [
|
||||||
{ value: 'ON', label: i18n.t('config.dc.usable') },
|
{ value: 'ON', label: i18n.t('config.dc.usable') },
|
||||||
{ value: 'OFF', label: i18n.t('config.dc.suspended') }
|
{ value: 'OFF', label: i18n.t('asset.suspended') }
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
export const snmpProtocolTypes = [
|
export const snmpProtocolTypes = [
|
||||||
|
|||||||
@@ -39,8 +39,6 @@ export const clickoutside = {
|
|||||||
if (oldValue) {
|
if (oldValue) {
|
||||||
// const newValue = JSON.parse(JSON.stringify(binding.value.obj))
|
// const newValue = JSON.parse(JSON.stringify(binding.value.obj))
|
||||||
if (unsavedChange == 'on' && !isEqual(oldValue, el.__newValue__)) {
|
if (unsavedChange == 'on' && !isEqual(oldValue, el.__newValue__)) {
|
||||||
// 防止表单自动聚焦
|
|
||||||
setTimeout(() => {
|
|
||||||
MessageBox.confirm(i18n.t('tip.confirmCancel'), {
|
MessageBox.confirm(i18n.t('tip.confirmCancel'), {
|
||||||
confirmButtonText: i18n.t('tip.yes'),
|
confirmButtonText: i18n.t('tip.yes'),
|
||||||
cancelButtonText: i18n.t('tip.no'),
|
cancelButtonText: i18n.t('tip.no'),
|
||||||
@@ -50,7 +48,6 @@ export const clickoutside = {
|
|||||||
binding.value.func()
|
binding.value.func()
|
||||||
}
|
}
|
||||||
}).catch(err => err)
|
}).catch(err => err)
|
||||||
})
|
|
||||||
} else {
|
} else {
|
||||||
binding.value.func()
|
binding.value.func()
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -154,7 +154,7 @@ export function uSize (rule, value, callback) {
|
|||||||
} else {
|
} else {
|
||||||
const num = Number(value)
|
const num = Number(value)
|
||||||
if (num < 0 || num > 47) {
|
if (num < 0 || num > 47) {
|
||||||
callback(new Error(vm.$t('validate.usize')))
|
callback(new Error(vm.$t('validate.uSize')))
|
||||||
} else {
|
} else {
|
||||||
callback()
|
callback()
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -29,7 +29,7 @@ const newcn = {
|
|||||||
system: {
|
system: {
|
||||||
configTitle: '系统配置',
|
configTitle: '系统配置',
|
||||||
configTip: '请输入管理员的用户名和密码，并设置Nezha WEB模块的安装信息，如IP:port',
|
configTip: '请输入管理员的用户名和密码，并设置Nezha WEB模块的安装信息，如IP:port',
|
||||||
federation: '联邦',
|
federation: '集群',
|
||||||
federationEnable: '可用',
|
federationEnable: '可用',
|
||||||
federationDisable: '不可用'
|
federationDisable: '不可用'
|
||||||
},
|
},
|
||||||
@@ -65,6 +65,28 @@ const newcn = {
|
|||||||
verifyPlaceholder: '验证码',
|
verifyPlaceholder: '验证码',
|
||||||
bindFail: '绑定失败'
|
bindFail: '绑定失败'
|
||||||
},
|
},
|
||||||
|
asset: {
|
||||||
|
host: 'Host',
|
||||||
|
port: '端口',
|
||||||
|
talon: {
|
||||||
|
enable: '启用'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
validate: {
|
||||||
|
required: '必填项',
|
||||||
|
host: '不合法的IP',
|
||||||
|
number: '必须是数字',
|
||||||
|
port: '不合法的端口',
|
||||||
|
special: '不能包含特殊字符',
|
||||||
|
unavailable: '不可用'
|
||||||
|
},
|
||||||
|
profile: {
|
||||||
|
username: '用户名'
|
||||||
|
},
|
||||||
|
overall: {
|
||||||
|
system: '系统',
|
||||||
|
back: '返回'
|
||||||
|
},
|
||||||
...zhLocale
|
...zhLocale
|
||||||
}
|
}
|
||||||
export default newcn
|
export default newcn
|
||||||
|
|||||||
@@ -73,6 +73,28 @@ const newen = {
|
|||||||
verifyPlaceholder: 'verify code',
|
verifyPlaceholder: 'verify code',
|
||||||
bindFail: 'Binding failure'
|
bindFail: 'Binding failure'
|
||||||
},
|
},
|
||||||
|
asset: {
|
||||||
|
host: 'Host',
|
||||||
|
port: 'Port',
|
||||||
|
talon: {
|
||||||
|
enable: 'Enable'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
validate: {
|
||||||
|
required: 'Required',
|
||||||
|
host: 'Invalid Host',
|
||||||
|
number: 'Numberic',
|
||||||
|
port: 'Invalid port',
|
||||||
|
special: 'Cannot contain special characters',
|
||||||
|
unavailable: 'Unavailable'
|
||||||
|
},
|
||||||
|
profile: {
|
||||||
|
username: 'User name'
|
||||||
|
},
|
||||||
|
overall: {
|
||||||
|
system: 'System',
|
||||||
|
back: 'Back'
|
||||||
|
},
|
||||||
...enLocale
|
...enLocale
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -3,7 +3,7 @@
|
|||||||
<div class="input-box">
|
<div class="input-box">
|
||||||
<div class="input-box-item" style="display: none;">
|
<div class="input-box-item" style="display: none;">
|
||||||
<el-input v-model="lnglat" @blur="setLatlng" @change="setLatlng">
|
<el-input v-model="lnglat" @blur="setLatlng" @change="setLatlng">
|
||||||
<template slot="prepend" v-if="showZoom">{{$t('config.system.basic.lnglat')}}</template>
|
<template slot="prepend" v-if="showZoom">{{$t('config.dc.lnglat')}}</template>
|
||||||
</el-input>
|
</el-input>
|
||||||
</div>
|
</div>
|
||||||
<div class="input-box-item" v-if="showZoom">
|
<div class="input-box-item" v-if="showZoom">
|
||||||
|
|||||||
@@ -14,7 +14,7 @@
|
|||||||
<i class="nz-icon nz-icon-password"></i>
|
<i class="nz-icon nz-icon-password"></i>
|
||||||
<input v-model="loginData.pin" autocomplete="on" name="password" placeholder="Password" type="password" @keydown.enter="login"></input>
|
<input v-model="loginData.pin" autocomplete="on" name="password" placeholder="Password" type="password" @keydown.enter="login"></input>
|
||||||
</div>
|
</div>
|
||||||
<div class="login-label" v-if="verifyShow">{{$t('login.verifyTitle')}}</div>
|
<div class="login-label" v-if="verifyShow">{{$t('profile.twoFactorAuthentication')}}</div>
|
||||||
<div class="login-input" v-if="verifyShow">
|
<div class="login-input" v-if="verifyShow">
|
||||||
<i class="nz-icon nz-icon-yanzhengma"></i>
|
<i class="nz-icon nz-icon-yanzhengma"></i>
|
||||||
<input v-model="loginData.authCode" name="newPassword" autocomplete="off" :placeholder="$t('login.verifyPlaceholder')" @keydown.enter="verify"></input>
|
<input v-model="loginData.authCode" name="newPassword" autocomplete="off" :placeholder="$t('login.verifyPlaceholder')" @keydown.enter="verify"></input>
|
||||||
|
|||||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user