From b47e72ef3eda10a4aba71ed231cfc7cede2e36f3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=88=98=E6=B4=AA=E6=B4=AA?= Date: Fri, 15 Nov 2024 18:45:58 +0800 Subject: [PATCH] =?UTF-8?q?CN-1733=20fix:=20Source=E7=AE=A1=E7=90=86?= =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E5=BC=80=E5=8F=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/css/common/table-common.scss | 9 +- src/assets/css/components/index.scss | 3 + .../views/setting/entitySettingForm.scss | 306 +++++++++ .../components/views/setting/sourcesForm.scss | 189 ++++++ src/assets/css/components/views/tag/tag.scss | 108 ++++ src/components/layout/Header.vue | 42 +- src/components/table/CnDataList.vue | 16 +- .../table/setting/ProfilesTable.vue | 124 ++++ src/components/table/setting/SourcesTable.vue | 308 +++++++++ src/permission.js | 10 + src/utils/api.js | 9 + .../setting/entitySetting/EntitySetting.vue | 255 ++++++++ .../entitySetting/EntitySettingForm.vue | 612 ++++++++++++++++++ src/views/setting/sources/Sources.vue | 252 ++++++++ src/views/setting/sources/SourcesForm.vue | 479 ++++++++++++++ 15 files changed, 2717 insertions(+), 5 deletions(-) create mode 100644 src/assets/css/components/views/setting/entitySettingForm.scss create mode 100644 src/assets/css/components/views/setting/sourcesForm.scss create mode 100644 src/components/table/setting/ProfilesTable.vue create mode 100644 src/components/table/setting/SourcesTable.vue create mode 100644 src/views/setting/entitySetting/EntitySetting.vue create mode 100644 src/views/setting/entitySetting/EntitySettingForm.vue create mode 100644 src/views/setting/sources/Sources.vue create mode 100644 src/views/setting/sources/SourcesForm.vue diff --git a/src/assets/css/common/table-common.scss b/src/assets/css/common/table-common.scss index bc73110c..f61ec435 100644 --- a/src/assets/css/common/table-common.scss +++ b/src/assets/css/common/table-common.scss @@ -53,7 +53,7 @@ border: 1px solid var(--el-border-color-light); } - .top-tool-search { + .top-tool-search, .top-tool-search1 { .top-tool-search__display { display: flex; } @@ -83,6 +83,13 @@ } } + .top-tool-search1 { + width: 100%; + .el-input { + width: 100% !important; + } + } + .top-tool-right { display: flex; } diff --git a/src/assets/css/components/index.scss b/src/assets/css/components/index.scss index 546aa9ea..f1475daa 100644 --- a/src/assets/css/components/index.scss +++ b/src/assets/css/components/index.scss @@ -89,3 +89,6 @@ @import "./components/common/simple-loading"; @import "views/location/location"; + +@import "views/setting/sourcesForm"; +@import "views/setting/entitySettingForm"; diff --git a/src/assets/css/components/views/setting/entitySettingForm.scss b/src/assets/css/components/views/setting/entitySettingForm.scss new file mode 100644 index 00000000..73f4e676 --- /dev/null +++ b/src/assets/css/components/views/setting/entitySettingForm.scss @@ -0,0 +1,306 @@ +$text-color-primary: var(--el-text-color-primary); +$bg-color-page: var(--el-bg-color-page); +$border-color-light: var(--el-border-color-light); + +// es为entity setting简写 +.es-form { + padding: 20px; + + .el-input { + height: 24px; + line-height: 24px; + } + + .el-select__wrapper { + min-height: 24px; + //padding: 2px 8px; + } + + .es-form-header { + font-size: 24px; + color: $text-color-primary; + font-weight: bold; + margin-top: 10px; + } + + .es-form-content { + height: calc(100% - 92px); + overflow: scroll; + padding-bottom: 20px; + + .es-form-collapse { + margin-top: 20px; + width: 1200px; + border: 1px $border-color-light solid; + + .rule-definition { + position: relative; + } + + .el-collapse-item__header { + width: 1200px !important; + height: 56px !important; + background: var(--el-fill-color-blank) !important; + border-left: 1px solid $bg-color-page; + border-right: 1px solid $border-color-light; + border-radius: 4px !important; + display: flex; + justify-content: space-between; + flex-direction: inherit; + position: relative; + padding: 0 20px; + + i { + position: absolute; + left: 20px; + } + } + + .el-collapse-item__wrap { + //border: 1px solid $bg-color-page; + border-top: none; + } + + .form-collapse-header { + margin-left: 26px; + display: flex; + align-items: center; + + .form-collapse-header-no, .form-collapse-header-no-active { + width: 24px; + height: 24px; + line-height: 24px; + text-align: center; + font-size: 16px; + border-radius: 50%; + margin-right: 10px; + transition: 0.5s all; + } + + .form-collapse-header-no { + background: $border-color-light; + color: $text-color-primary; + } + + .form-collapse-header-no-active { + background: var(--el-color-business); + color: var(--el-color-white); + } + + .form-collapse-header-title { + font-size: 16px; + color: $text-color-primary; + } + } + + .form-collapse-content { + padding: 0 20px 0 46px; + + .form-setting__block { + width: 620px; + margin-top: 0; + + .form-setting__select { + width: 620px !important; + } + } + + .form-content__title { + line-height: 16px; + font-size: 16px; + color: var(--el-text-color-primary); + font-weight: 500; + margin-bottom: 15px; + } + + .form-content__block { + width: 620px; + padding: 15px 12px 5px 12px; + border: 1px $border-color-light solid; + margin-bottom: 10px; + + .block-header { + width: 596px; + line-height: 12px; + display: flex; + font-size: 12px; + color: var(--el-text-color-primary); + font-weight: bold; + margin-bottom: 10px; + + div:nth-child(1) { + width: 288px; + } + } + + .el-form { + display: flex; + flex-direction: column; + } + + .block-body { + width: 596px; + display: flex; + + .el-form-item { + margin-bottom: 10px; + } + + .block-body__select { + width: 260px; + } + + .block-body-equal { + margin: 0 10px; + } + + .mapping-item-add { + color: var(--el-text-color-regular); + font-size: 10px; + line-height: 24px; + margin: 0 10px; + cursor: pointer; + } + + .mapping-item-close { + height: 24px; + line-height: 24px; + color: var(--el-color-error); + font-size: 10px; + cursor: pointer; + } + + .relation-field__select { + width: 112px; + } + + .relation-field__select-disabled { + width: 112px; + + .el-select__selected-item { + color: var(--el-text-color-primary); + } + + .el-select__suffix { + display: none; + } + } + + .relation-type__select { + width: 312px; + margin: 0 10px; + } + } + } + + .form-setting-type { + width: 620px; + border: 1px solid $border-color-light; + padding: 15px 12px; + margin-bottom: 10px; + + .setting-type__text { + font-size: 14px; + margin-bottom: 10px; + } + } + + .block__footer { + cursor: pointer; + + .addFieldBtn { + height: 24px; + min-height: 24px; + font-size: 12px; + color: var(--el-text-color-primary); + font-weight: 500; + width: 620px; + background: var(--el-color-business-light-9); + border: 1px $border-color-light solid; + padding: 0; + box-shadow: 0 2px 4px 0 rgba(51, 51, 51, 0.02); + border-radius: 2px; + + .add-field-btn { + color: var(--el-text-color-regular) !important; + font-size: 9px !important; + margin: 0 8px 2px 8px; + } + + &:hover { + i { + color: var(--el-color-business) !important; + } + } + } + } + } + + .margin-20 { + margin: 20px 0; + } + + .el-collapse-item__content { + padding-bottom: 20px; + } + .es-form-trigger { + + .el-input__wrapper, .el-select__wrapper { + width: 112px; + } + + .el-input__inner { + padding: 0 15px !important; + } + } + } + + .el-input--small, .el-input--small .el-input__inner { + border-radius: 2px !important; + } + + .switch__block { + margin: 20px 0; + + .block-title { + font-size: 14px; + line-height: 14px; + color: $text-color-primary; + margin-bottom: 12px; + } + } + } + + .es-form__footer { + width: 100%; + height: 60px; + box-shadow: 0 -1px 4px 0 rgba(0, 0, 0, 0.10); + display: flex; + align-items: center; + justify-content: center; + + .el-form-item__label { + color: var(--el-text-color-primary); + } + + .tag__btn { + margin: 0 10px; + height: 30px; + min-width: 74px; + } + } + + .el-overlay-message-box, .el-message-box { + padding: 0 !important; + } + + .el-overlay-message-box { + text-align: center !important; + } + + .is-message-box .el-overlay-message-box { + display: flex; + justify-content: center; + align-items: center; + } +} diff --git a/src/assets/css/components/views/setting/sourcesForm.scss b/src/assets/css/components/views/setting/sourcesForm.scss new file mode 100644 index 00000000..4f2e2ce9 --- /dev/null +++ b/src/assets/css/components/views/setting/sourcesForm.scss @@ -0,0 +1,189 @@ +$color-text-primary: var(--el-text-color-primary); + +.sources-form { + height: 100%; + + .el-input { + height: 24px; + line-height: 24px; + } + + .el-select__wrapper { + min-height: 24px; + padding: 2px 8px; + } + + .el-input__wrapper { + padding: 1px 6px; + } + + .sources-form__header { + padding: 30px 0 30px 20px; + font-size: 24px; + line-height: 24px; + font-weight: bold; + color: $color-text-primary; + } + + .sources-form__body { + display: flex; + flex-direction: column; + height: calc(100% - 147px); + padding-left: 40px; + overflow: auto; + + .el-form-item__label { + color: var(--el-text-color-primary); + } + + .form__body__label { + font-family: NotoSansHans-Medium; + font-size: 14px; + color: var(--el-text-color-primary); + font-weight: 500; + } + + .form-fields__block { + padding: 10px; + width: 620px; + border: 1px solid var(--el-border-color-light); + border-radius: 2px; + margin-top: 10px; + margin-bottom: 20px; + + .block__header { + display: flex; + font-family: NotoSansHans-Medium; + font-size: 12px; + color: var(--el-text-color-primary); + font-weight: bold; + margin-bottom: 10px; + + .block__header-name { + width: 262px; + margin-right: 10px; + } + + .block__header-type { + width: 162px; + margin-right: 10px; + } + } + + .block__body { + display: flex; + flex-direction: column; + + .block__body-container { + //height: 24px; + //line-height: 24px; + display: flex; + //margin-bottom: 8px; + + .block__body-name, .block__body-type, .block__body-default, .block__body-function, .block__body-field, .block__body-field-name { + width: 262px; + height: 24px; + margin-right: 10px; + } + + .block__body-type { + width: 162px; + } + + .block__body-default { + width: 132px; + } + + .block__body-function { + width: 160px; + } + + .block__body-field { + width: 124px; + } + + .block__body-field-name { + width: 138px; + } + + .remove-btn { + height: 24px; + line-height: 24px; + color: var(--el-text-color-primary); + font-size: 9px; + cursor: pointer; + } + + .el-form-item { + margin-bottom: 12px; + + .el-form-item__content { + line-height: 24px; + } + } + } + } + + .block__footer { + margin-top: 8px; + cursor: pointer; + + .addFieldBtn { + height: 24px; + min-height: 24px; + font-size: 12px; + color: $color-text-primary; + font-weight: 500; + width: 598px; + background: var(--el-color-business-light-9); + border: 1px var(--el-border-color-light) solid; + padding: 0; + box-shadow: 0 2px 4px 0 rgba(51, 51, 51, 0.02); + border-radius: 2px; + font-family: NotoSansHans-Medium !important; + + .add-field-btn { + color: var(--el-text-color-regular) !important; + font-size: 9px !important; + margin: 0 8px 2px 8px; + } + + &:hover { + i { + color: var(--el-color-business) !important; + } + } + + span { + font-family: NotoSansHans-Medium !important; + } + } + } + } + } + + .form-description { + width: 620px; + margin-top: 12px; + margin-bottom: 20px; + } + + .sources-form__footer { + display: flex; + align-items: center; + justify-content: center; + height: 60px; + margin-top: 3px; + box-shadow: 0 -1px 4px 0 rgba(0, 0, 0, 0.10); + + .el-form-item__label { + color: var(--el-text-color-primary); + } + + .tag__btn { + margin: 0 10px; + height: 30px; + min-width: 74px; + } + } +} diff --git a/src/assets/css/components/views/tag/tag.scss b/src/assets/css/components/views/tag/tag.scss index bb9bdca2..a10eebd1 100644 --- a/src/assets/css/components/views/tag/tag.scss +++ b/src/assets/css/components/views/tag/tag.scss @@ -199,6 +199,114 @@ } } } + + .sources-dialog { + .el-dialog__header { + background-color: var(--cn-bg-color-lighter); + box-shadow: 0 1px 0 0 rgba(53,54,54,0.08); + padding: 0; + height: 42px; + line-height: 42px; + + .sources-dialog__header { + font-family: NotoSansSChineseRegular; + font-size: 14px; + color: var(--el-text-color-primary); + letter-spacing: 0; + font-weight: 400; + padding-left: 10px; + } + + .el-dialog__headerbtn { + width: 42px; + height: 42px; + + .el-dialog__close { + color: var(--el-text-color-primary); + } + } + } + + + .sources-dialog__body { + padding: 20px 30px 10px 30px; + display: flex; + flex-direction: column; + + .dialog__body-upload { + width: 420px; + height: 124px; + background: var(--cn-bg-color-lighter); + border: 1px solid var(--el-border-color-light); + border-radius: 4px; + margin-bottom: 10px; + + .el-upload-dragger { + height: 124px; + border: 1px solid var(--el-border-color-light); + } + + .upload-icon { + font-size: 24px; + color: var(--el-text-color-primary); + } + + .el-upload__text { + color: var(--el-text-color-primary); + } + } + + .dialog__body-tip { + width: 420px; + height: 142px; + background: var(--el-color-business-light-9); + border-radius: 4px; + padding: 10px; + + .tip__text { + font-family: NotoSansSChineseRegular; + font-size: 12px; + color: var(--el-text-color-regular); + letter-spacing: 0; + font-weight: 400; + } + } + } + + .el-dialog__footer { + padding: 0; + + .sources-dialog__footer { + height: 52px; + line-height: 52px; + border-top: 1px solid var(--el-border-color-light); + + .cancel-btn { + width: 80px; + height: 28px; + margin-right: 20px; + color: var(--el-text-color-primary); + background: var(--el-fill-color-light); + border: 1px solid var(--el-border-color-dark); + border-radius: 2px; + cursor: pointer; + } + + .upload-btn { + width: 80px; + height: 28px; + margin-right: 20px; + color: var(--el-color-white); + margin-left: 0 !important; + background-color: var(--el-color-business); + border: none; + outline: none; + border-radius: 2px; + cursor: pointer; + } + } + } + } } .type-tag { display: inline-block; diff --git a/src/components/layout/Header.vue b/src/components/layout/Header.vue index cd9ec72a..f5366821 100644 --- a/src/components/layout/Header.vue +++ b/src/components/layout/Header.vue @@ -138,6 +138,7 @@ class="cn-menu" :with-header="false" :show-close="false" + @close="closeDrawer" >
@@ -146,7 +147,7 @@
-
+
{{ $t('overall.networkAnalytics') }}
@@ -186,6 +187,27 @@
+
+
+
{{ $t('overall.setting') }}
+
+
+ +
+
+ +
+
+
+
@@ -336,16 +358,21 @@ export default { wholeScreenRouterMapping, logo: 'images/logo-header.svg', ZH, - EN + EN, + isShowSetting: false } }, computed: { networkAnalyticsMenu () { + console.log('-------', this.$store.getters.menuList) return this.$store.getters.menuList.find(menu => menu.code === 'networkAnalytics') }, locationIntelligenceMenu () { return this.$store.getters.menuList.find(menu => menu.code === 'locationIntelligence') }, + settingMenu () { + return this.$store.getters.menuList.find(menu => menu.code === 'setting') + }, otherMenu () { return this.$store.getters.menuList.filter(menu => ['locationIntelligence', 'networkAnalytics', 'I18N', 'entityDetail', 'entityGraph', 'detectionPolicy'].indexOf(menu.code) === -1) @@ -755,6 +782,11 @@ export default { }, // 仅处理除panel外的相关路径的导航 async jumpOther (route, index) { + console.log('route', route, index) + if (route === '/setting') { + this.isShowSetting = true + return true + } route = route.replace('redirect:', '') this.showMenu = false if (route === this.route && index > 0) { // 当前只有一级菜单时，点击不进行刷新，重新跳转 @@ -893,6 +925,12 @@ export default { if (obj.scrollTop + obj.clientHeight === obj.scrollHeight) { this.initDropdownList() } + }, + closeDrawer () { + const timer = setTimeout(() => { + this.isShowSetting = false + clearTimeout(timer) + }, 400) } } } diff --git a/src/components/table/CnDataList.vue b/src/components/table/CnDataList.vue index a1d86022..e1da9c86 100644 --- a/src/components/table/CnDataList.vue +++ b/src/components/table/CnDataList.vue @@ -5,9 +5,9 @@
-
+
-
+