From 25f837dde0c74818c478c7f82846ba74e1b7a024 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=8A=B2=E6=9D=BE?= Date: Fri, 27 Mar 2020 15:41:26 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20dc-detail=E8=BD=AC=E4=B8=BA=E4=B8=8A?= =?UTF-8?q?=E6=BB=91=E5=BC=B9=E6=A1=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- nezha-fronted/src/assets/stylus/main.scss | 21 +- .../components/common/bottomBox/bottomBox.vue | 87 ++++++ .../{cabinetBottomBox.vue => dcBottomBox.vue} | 161 +++++------ .../common/bottomBox/tabs/cabinetTab.vue | 259 ++++++++++++++++++ .../common/bottomBox/tabs/commonDetailTab.vue | 38 +++ .../src/components/common/language/en.js | 3 +- .../src/components/page/config/dc.vue | 89 +++--- nezha-fronted/src/main.js | 8 +- 8 files changed, 523 insertions(+), 143 deletions(-) create mode 100644 nezha-fronted/src/components/common/bottomBox/bottomBox.vue rename nezha-fronted/src/components/common/bottomBox/{cabinetBottomBox.vue => dcBottomBox.vue} (54%) create mode 100644 nezha-fronted/src/components/common/bottomBox/tabs/cabinetTab.vue create mode 100644 nezha-fronted/src/components/common/bottomBox/tabs/commonDetailTab.vue diff --git a/nezha-fronted/src/assets/stylus/main.scss b/nezha-fronted/src/assets/stylus/main.scss index 30eb4d9ec..26c38c14f 100644 --- a/nezha-fronted/src/assets/stylus/main.scss +++ b/nezha-fronted/src/assets/stylus/main.scss @@ -386,13 +386,20 @@ li{ .sub-list-tab { width: 100px; font-size: 14px; - color: $global-text-color-active; - background-color: white; - border-top: solid 2px #ee9d3f; + color: #909399; height: calc(100% - 2px); padding-left: 20px; line-height: 27px; display: inline-block; + cursor: pointer; +} +.sub-list-tab:hover { + color: $global-text-color-active; +} +.sub-list-tab-active { + color: $global-text-color-active; + background-color: white; + border-top: solid 2px #ee9d3f; } .sub-list-tab-txt { font-size: 14px; @@ -516,6 +523,7 @@ li{ display: flex; align-content: center; height: 26px; + margin-right: 76px; } .top-tool-main-right { position: absolute; @@ -605,15 +613,16 @@ li{ display: flex; align-items: center; margin-left: 14px; + position: absolute; + right: 0; + top: 8px; + z-index: 1; } .window-control-btn { cursor: pointer; width: 29px; text-align: center; } -.window-control-btn:last-of-type { - margin-right: 4px; -} .window-control-btn>i { color: #909399; font-size: 17px; diff --git a/nezha-fronted/src/components/common/bottomBox/bottomBox.vue b/nezha-fronted/src/components/common/bottomBox/bottomBox.vue new file mode 100644 index 000000000..037f0bf7e --- /dev/null +++ b/nezha-fronted/src/components/common/bottomBox/bottomBox.vue @@ -0,0 +1,87 @@ + + + + + diff --git a/nezha-fronted/src/components/common/bottomBox/cabinetBottomBox.vue b/nezha-fronted/src/components/common/bottomBox/dcBottomBox.vue similarity index 54% rename from nezha-fronted/src/components/common/bottomBox/cabinetBottomBox.vue rename to nezha-fronted/src/components/common/bottomBox/dcBottomBox.vue index 09403b5d8..f715164f3 100644 --- a/nezha-fronted/src/components/common/bottomBox/cabinetBottomBox.vue +++ b/nezha-fronted/src/components/common/bottomBox/dcBottomBox.vue @@ -3,94 +3,97 @@
一
-
-
-
{{$t("overall.query")}}
- {{$t("asset.createAssetTab.dcName")}}：{{obj.name}} -
-
-
- -
- -
- -
- -
- -
-
-
+
+ +
+ +
+ +
- - -
+ + diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/commonDetailTab.vue b/nezha-fronted/src/components/common/bottomBox/tabs/commonDetailTab.vue new file mode 100644 index 000000000..503b62e99 --- /dev/null +++ b/nezha-fronted/src/components/common/bottomBox/tabs/commonDetailTab.vue @@ -0,0 +1,38 @@ + + + + + diff --git a/nezha-fronted/src/components/common/language/en.js b/nezha-fronted/src/components/common/language/en.js index 8d4ca261f..24f2d4053 100644 --- a/nezha-fronted/src/components/common/language/en.js +++ b/nezha-fronted/src/components/common/language/en.js @@ -23,7 +23,6 @@ const en = { search: 'Search', //'搜索' add: 'Create', //"新增" option: 'Operation', //"操作" - clearAll: 'Clear All', //"清空" clear: 'Clear', //"清除" name: 'Name', //'名称' cover: 'Override', //'覆盖' @@ -32,6 +31,7 @@ const en = { ok: 'Ok',//OK all: 'All',//'全选' other: 'Others',//"其他" + detail: 'Detail', //详情 query: 'Query', //查询 back: 'Back', //返回 unavailable: 'Unavailable', @@ -478,6 +478,7 @@ const en = { cabinetNum: "Cabinet number", assets: "Assets", remark:'Remark', + cabinets: "Cabinets" }, model: { model: 'Model', diff --git a/nezha-fronted/src/components/page/config/dc.vue b/nezha-fronted/src/components/page/config/dc.vue index edcb46837..64290c24d 100644 --- a/nezha-fronted/src/components/page/config/dc.vue +++ b/nezha-fronted/src/components/page/config/dc.vue @@ -138,8 +138,8 @@
- + { - if(response.code==200 && response.msg=='success'){ - this.cabinetDatas=response.data.list; - } - }) - }, - editCabinet:function(cabinet){ - this.curCabinet=cabinet; - this.$refs.cabinetEditBox.show(true,true); - }, - toAddCabinet:function(){ - this.$refs.cabinetEditBox.show(true,true); - this.$refs.cabinetEditBox.reset(); - },*/ - /*delCabinet:function(cabinet){ - this.$confirm(this.$t("tip.confirmDelete"), { - confirmButtonText: this.$t("tip.yes"), - cancelButtonText: this.$t("tip.no"), - type: 'warning' - }).then(() => { - this.$delete('/cabinet?ids='+cabinet.id).then(response=>{ - if(response.code == 200){ - this.$message({duration: 2000, type: 'success', message: this.$t("tip.saveSuccess")}); - this.getCabinetDatas(); - }else{ - this.$message.error(response.msg); - } - }) - }) - },*/ - /*back:function(){ - this.tabShow=1; - this.getTableData(); - let temp=this; - setTimeout(function(){temp.$refs.searchInput.clear_input();},100) - }, - cabSearch:function(obj){ - this.cabSearchLabel={idcId:this.currentShowDc.id}; - if(obj){ - for(let item in obj){ - if(obj[item]){ - this.$set(this.cabSearchLabel,item,obj[item]); - } - } - } - this.getCabinetDatas(); - }*/ }, watch: { + cabinetDc: { + deep: true, + handler(n) { + this.dcDetail = this.convertToDetail(n); + } + }, showSubList(n) { this.inTransform = n; if (!n) { diff --git a/nezha-fronted/src/main.js b/nezha-fronted/src/main.js index 888e340c0..188a1353b 100644 --- a/nezha-fronted/src/main.js +++ b/nezha-fronted/src/main.js @@ -36,7 +36,8 @@ import dcBox from "./components/common/rightBox/dcBox"; //dc弹框 import modelBox from "./components/common/rightBox/modelBox"; //model弹框 import selectArea from "./components/common/popBox/selectArea"; //dc弹框 import alertMessageBox from "./components/common/bottomBox/alertMessageBox"; //alertMessage上滑框 -import cabinetBottomBox from "./components/common/bottomBox/cabinetBottomBox"; //机柜上滑框 +import dcBottomBox from "./components/common/bottomBox/dcBottomBox"; //机柜上滑框 +import bottomBox from "./components/common/bottomBox/bottomBox"; //机柜上滑框 import PerfectScrollbar from "perfect-scrollbar"; import "perfect-scrollbar/css/perfect-scrollbar.css"; import loading from "./components/common/loading"; @@ -61,8 +62,9 @@ Vue.component("dc-box", dcBox); Vue.component("model-box", modelBox); Vue.component("select-area", selectArea); Vue.component('loading',loading); -Vue.component('alert-message-box',alertMessageBox); -Vue.component('cabinet-bottom-box',cabinetBottomBox); +Vue.component('alert-message-box', alertMessageBox); +Vue.component('dc-bottom-box', dcBottomBox); +Vue.component('bottom-box', bottomBox); Vue.component('mib-box',mibBox); Vue.prototype.$axios = axios;