diff --git a/nezha-fronted/src/assets/css/main.css b/nezha-fronted/src/assets/css/main.css index 13a101a49..22aff1144 100644 --- a/nezha-fronted/src/assets/css/main.css +++ b/nezha-fronted/src/assets/css/main.css @@ -225,7 +225,7 @@ html { height: calc(100% - 100px); } .right-box-add-endpoint { - width: 720px; + width: 820px; height: calc(100% - 100px); } /* begin--右侧弹框--顶部按钮*/ diff --git a/nezha-fronted/src/components/common/language/en.js b/nezha-fronted/src/components/common/language/en.js index 8ce9bc542..6b1774141 100644 --- a/nezha-fronted/src/components/common/language/en.js +++ b/nezha-fronted/src/components/common/language/en.js @@ -16,7 +16,9 @@ const en = { add: "Add", option: "Option", clearAll: "Clear All", + clear: "Clear", name: 'Name', + cover: 'Cover' }, search: { searchTip: 'Press Enter or click to search' @@ -156,6 +158,7 @@ const en = { path: "Path", asset: "Asset", lastUpdate: "Last Update", + moduleParameter: "Module's Parameter" }, metrics: { metrics: "Metrics", diff --git a/nezha-fronted/src/components/common/rightBox/addEndpointBox.vue b/nezha-fronted/src/components/common/rightBox/addEndpointBox.vue index c10d2b3d4..0ebecdcf9 100644 --- a/nezha-fronted/src/components/common/rightBox/addEndpointBox.vue +++ b/nezha-fronted/src/components/common/rightBox/addEndpointBox.vue @@ -76,7 +76,7 @@
-
+
{{item.host}}
{{item.sn}}
@@ -85,9 +85,78 @@
-
-
- +
+
{{$t('project.endpoint.moduleParameter')}}:
+ + +
+
{{item.key}}={{item.value}}
+
+ + + + {{$t('overall.cover')}} +
+
+ + + + + + + + + + +
{{$t('overall.clear')}}
@@ -117,13 +186,42 @@ rightBox: {show: false, title: this.$t('project.endpoint.createEndpoint'),isEdit: false}, editParamBox: {show: false}, //param编辑弹框 viewParamBox: {show: false}, //param查看弹框 + moduleParamShow: false, //module默认参数param悬浮窗 assetSearch: {host: '', sn: '', text: '', label: 'IP', dropdownShow: false}, //侧滑框中asset的搜索相关 assetPageObj: {pageNo: 1, pageSize: 9999}, selectedAssets: [], //侧滑框中选中的asset - selectedAsset: {id: '', host: '', sn: ''}, //endpoint侧滑框中选中的asset projectList: [], moduleList: [], - assetList: [] + assetList: [], + endpointList: [], + endpointTableTitle: [ + { + label: this.$t("project.endpoint.asset"), + prop: 'asset', + width: 123, + show: true, + },{ + label: this.$t("project.endpoint.host"), + prop: 'host', + width: 123, + show: true, + },{ + label: this.$t("project.endpoint.port"), + prop: 'port', + width: 55, + show: true, + },{ + label: this.$t("project.endpoint.param"), + prop: 'param', + width: 93, + show: true, + },{ + label: this.$t("project.endpoint.path"), + prop: 'path', + width: 63, + show: true, + } + ], } }, methods: { @@ -205,10 +303,32 @@ }, // endpoint弹框中的asset子弹框里asset选择事件 - selectAsset(obj) { - this.selectedAsset = obj; - this.endpoint.host = obj.host; - this.endpoint.assetId = obj.id; + selectAsset(obj, index) { + this.endpointList.push({ + assetId: obj.id, + asset: obj, + host: obj.host, + param: this.currentModule.param, + paramObj: this.currentModule.paramObj, + port: this.currentModule.port, + path: this.currentModule.path, + moduleId: this.currentModule.id + }); + this.assetList.splice(index, 1); + }, + + //将param转为json字符串格式 + paramToJson(param) { + let tempParam = {}; + for (let i = 0; i < param.length; i++) { + eval('tempParam.' + param[i].key + '="' + param[i].value + '"'); + } + let jsonString = JSON.stringify(tempParam); + if (jsonString == '{}') { + return ""; + } else { + return jsonString; + } }, // 获取endpoint弹框中module下拉框数据 @@ -247,6 +367,10 @@ }); }, + //param展示悬浮框 + viewParam(item, flag, event) { + }, + //删除endpoint del() { this.$confirm(this.$t("tip.confirmDelete"), { @@ -346,17 +470,27 @@ line-height: 32px; color: #c4c7cF; } - .param-box-row-symbol { + .param-box-row-symbol:first-of-type { + font-size: 18px; + color: #bbbbbb; + text-align: center; + display: inline-block; + position: absolute; + top: 6px; + right: 34px; + cursor: pointer; + } + .param-box-row-symbol:last-of-type { font-size: 12px; - color: #c4c7cF; - border: 1px solid #c4c7cF; + color: #bbbbbb; + border: 1px solid #bbbbbb; text-align: center; height: 12px; width: 14px; display: inline-block; position: absolute; - top: 17px; - right: 25px; + top: 9px; + right: 14px; cursor: pointer; } .param-box-row-symbol>i { @@ -389,20 +523,70 @@ } .endpoints-box { margin: 0 0 0 280px; - background-color: gray; - width: 440px; + width: 540px; } .right-child-box .el-input-group { width: 187px; float: right; margin: 7px 5px 0 0; } + .right-child-box .module-info .el-input { + display: inline-block; + } + + .right-child-box .module-info { + display: inline-block; + height: 33px; + vertical-align: middle; + position: absolute; + top: 2px; + } .right-child-box-title { padding: 9px 0 0 4px; display: inline-block; } - - + .endpoints-box-module-info { + background: #eeeeee; + width: 100%; + height: 33px; + position: relative; + } + .endpoints-box-module-info .title { + line-height: 33px; + color: #5e5e5e; + padding-left: 5px; + display: inline-block; + } + .module-info-port { + width: 55px; + right: 210px; + } + .module-info-param { + width: 88px; + right: 118px; + } + .module-info-path { + width: 60px; + right: 52px; + } + .right-child-box .module-info-cover { + right: 4px; + height: 28px; + padding: 5px 5px; + background: #656565; + color: white; + border-radius: 4px; + } + .endpoints-box-endpoints { + border-radius: 4px; + border: 1px solid #dcdfe6; + height: calc(100% - 39px); + margin-top: 6px; + } + .endpoint-param-pop{ + max-height: 200px; + overflow: auto; + } /* end--小盒子*/ /* begin--子弹框*/ @@ -473,6 +657,10 @@ height: 30px; color: #656565; } + .endpoint-sub-table-row:hover { + background-color: #dadada; + cursor: default; + } .endpoint-sub-table-row-active { background-color: #dadada; } @@ -496,7 +684,38 @@ overflow: auto; height: calc(100% - 95px); } + .endpoints-clear-btn { + margin: 6px 0 0 10px; + } /* end--table*/ /* end--子弹框*/ +