From 22ff11be9378a90a22152ab5d0901bd1d4e83fed Mon Sep 17 00:00:00 2001 From: guochuyicmri Date: Fri, 10 May 2019 10:58:23 +0800 Subject: Dashboard interface front-end development Change-Id: I987e663bed2fd6ff584fe00fd6a29b133724e629 Issue-ID: USECASEUI-214 Signed-off-by: guochuyicmri --- usecaseui-portal/src/app/app.component.html | 40 ++++++++++------- usecaseui-portal/src/app/app.component.less | 26 +++++++++++ usecaseui-portal/src/app/app.component.ts | 50 ++++++++++++++++++++- .../app/components/customer/customer.component.ts | 24 ++++------ usecaseui-portal/src/app/home/home.component.ts | 10 ++--- .../src/assets/images/Services-icon-active.png | Bin 0 -> 631 bytes .../src/assets/images/Services-icon.png | Bin 0 -> 903 bytes usecaseui-portal/src/assets/images/UUIMenuBar.png | Bin 0 -> 122390 bytes .../src/assets/images/customer-icon-active.png | Bin 0 -> 737 bytes .../src/assets/images/customer-icon.png | Bin 0 -> 1114 bytes .../src/assets/images/home-icon-active.png | Bin 0 -> 591 bytes usecaseui-portal/src/assets/images/home-icon.png | Bin 0 -> 915 bytes .../src/assets/images/monitor-icon-active.png | Bin 0 -> 715 bytes .../src/assets/images/monitor-icon.png | Bin 0 -> 1126 bytes .../src/assets/images/network-icon-active.png | Bin 0 -> 915 bytes .../src/assets/images/network-icon.png | Bin 0 -> 1457 bytes usecaseui-portal/src/styles.less | 6 +++ 17 files changed, 118 insertions(+), 38 deletions(-) create mode 100644 usecaseui-portal/src/assets/images/Services-icon-active.png create mode 100644 usecaseui-portal/src/assets/images/Services-icon.png create mode 100644 usecaseui-portal/src/assets/images/UUIMenuBar.png create mode 100644 usecaseui-portal/src/assets/images/customer-icon-active.png create mode 100644 usecaseui-portal/src/assets/images/customer-icon.png create mode 100644 usecaseui-portal/src/assets/images/home-icon-active.png create mode 100644 usecaseui-portal/src/assets/images/home-icon.png create mode 100644 usecaseui-portal/src/assets/images/monitor-icon-active.png create mode 100644 usecaseui-portal/src/assets/images/monitor-icon.png create mode 100644 usecaseui-portal/src/assets/images/network-icon-active.png create mode 100644 usecaseui-portal/src/assets/images/network-icon.png (limited to 'usecaseui-portal') diff --git a/usecaseui-portal/src/app/app.component.html b/usecaseui-portal/src/app/app.component.html index ee0fdd8d..c7288e50 100644 --- a/usecaseui-portal/src/app/app.component.html +++ b/usecaseui-portal/src/app/app.component.html @@ -14,40 +14,48 @@ limitations under the License. --> - -
    -
  • + + - + diff --git a/usecaseui-portal/src/app/app.component.less b/usecaseui-portal/src/app/app.component.less index a805166e..685a2167 100644 --- a/usecaseui-portal/src/app/app.component.less +++ b/usecaseui-portal/src/app/app.component.less @@ -1,25 +1,51 @@ nz-layout { nz-sider { ul { + background: transparent; li { margin: 0; font-size: 16px; + color: #ffffff!important; + background: transparent; + a{ + color: #ffffff; + } span { font-size: 16px; } i { width: 16px; height: 16px; + margin-right: 12px; + img{ + width: 20px; + } } .icon-services { background: url(../assets/images/icon.png) no-repeat 0px -16px; } ul { + background: transparent!important; li{ font-size: 12px; + color: #ffffff!important; + background: transparent!important; + } + li:hover,li a:hover{ + color: #ffffff!important; + } + li.activeMenuList,li.activeMenuList a{ + color: #0DA9E2!important; } } } + li:hover,li a:hover{ + color: #ffffff!important; + } + li.activeMenuBar{ + color: #ffffff!important; + background:linear-gradient(90deg,rgba(7,169,225,1) 0%,rgba(48,217,196,1) 100%); + } hr { margin: 0 auto; background-color: #39434f; diff --git a/usecaseui-portal/src/app/app.component.ts b/usecaseui-portal/src/app/app.component.ts index 190f42e3..01206873 100644 --- a/usecaseui-portal/src/app/app.component.ts +++ b/usecaseui-portal/src/app/app.component.ts @@ -45,13 +45,61 @@ export class AppComponent { console.log(data,"-------------getCurrentLanguage"); this.currentLanguage = data.languageAlias.toLowerCase(); this.translate.use(this.currentLanguage); + sessionStorage.setItem("DefaultLang",this.currentLanguage); }, (err) => { console.log(err); } ) }else { - this.translate.setDefaultLang(this.currentLanguage); + this.translate.setDefaultLang(this.currentLanguage); + sessionStorage.setItem("DefaultLang",this.currentLanguage); + } + } + activeMenuBar =[true,false,false,false,false]; + activeMenuList =[false,false]; + thisActive(item){ + if(this.activeMenuBar[item] == true){ + this.activeMenuBar.map((its,index) => { + if(item != index){ + this.activeMenuBar[index] = false; + } + }) + }else { + this.activeMenuBar.map((its,index) => { + if(item == index){ + this.activeMenuBar[item] = true; + }else { + this.activeMenuBar[index] = false; + } + }) + this.activeMenuList.map((its,index) => { + this.activeMenuList[index] = false; + }) + } + } + thisListActive(item){ + if(this.activeMenuBar[3] = true){ + if(this.activeMenuList[item] == true){ + this.activeMenuList.map((its,index) => { + if(item != index){ + this.activeMenuList[index] = false; + } + }) + }else { + this.activeMenuList.map((its,index) => { + if(item == index){ + this.activeMenuList[item] = true; + }else { + this.activeMenuList[index] = false; + } + }) + + } + }else { + this.activeMenuList.map((its,index) => { + this.activeMenuList[index] = false; + }) } } // diff --git a/usecaseui-portal/src/app/components/customer/customer.component.ts b/usecaseui-portal/src/app/components/customer/customer.component.ts index f3d1af3e..61e582c6 100644 --- a/usecaseui-portal/src/app/components/customer/customer.component.ts +++ b/usecaseui-portal/src/app/components/customer/customer.component.ts @@ -89,15 +89,7 @@ export class CustomerComponent implements OnInit { name: "customer", radius: '90%', center: ['50%', '50%'], - data: [{ - value: 67, - }, { - value: 10, - }, { - value: 17, - }, { - value: 33, - },], + data: [], label: { normal: { position: 'center', @@ -217,7 +209,7 @@ export class CustomerComponent implements OnInit { axisLabel: { color: "#3C4F8C" }, - data: ['Other', 'Type1', 'Type2', 'Type3', 'Type4'], + data: [], }, ], @@ -226,7 +218,7 @@ export class CustomerComponent implements OnInit { name: '', barWidth: '40%', type: 'bar', - data: [2800, 1700, 1200, 1000, 900], + data: [], itemStyle: { normal: { color: function (params) { @@ -297,32 +289,32 @@ export class CustomerComponent implements OnInit { name: 'Type4', type: 'bar', stack: '', - data: 2800, + data: '', }, { name: 'Type1', type: 'bar', stack: '', - data: 1700 + data: '' }, { name: 'Type2', type: 'bar', stack: '', - data: 1500 + data: '' }, { name: 'Type3', type: 'bar', stack: '', - data: 1300 + data: '' }, { name: 'Other', type: 'bar', stack: '', - data: 1000, + data: '', } ] diff --git a/usecaseui-portal/src/app/home/home.component.ts b/usecaseui-portal/src/app/home/home.component.ts index ba0ae684..9bd02941 100644 --- a/usecaseui-portal/src/app/home/home.component.ts +++ b/usecaseui-portal/src/app/home/home.component.ts @@ -254,9 +254,7 @@ export class HomeComponent implements OnInit { data: ['CPU', 'Memory', 'Disk'] }, xAxis:{ - data:["2018-09-10 ","2018-09-11","2018-09-12","2018-09-13","2018-09-14", - "2018-09-15","2018-09-16","2018-09-17","2018-09-18","2018-09-19", - "2018-09-20","2018-09-21","2018-09-22"] + data:[] }, series : [ { @@ -265,7 +263,7 @@ export class HomeComponent implements OnInit { itemStyle: { color: "#70ACEC" }, - data: [30, 45, 34, 35, 43, 56, 36, 53, 42, 45, 44, 35, 32] + data: [] }, { name: 'Memory', @@ -273,7 +271,7 @@ export class HomeComponent implements OnInit { itemStyle: { color: "#3BCD79" }, - data: [10, 23, 24, 22, 14, 15, 32, 12, 12, 32, 14, 23, 23] + data: [] }, { name: 'Disk', @@ -281,7 +279,7 @@ export class HomeComponent implements OnInit { itemStyle: { color: "#FDC288" }, - data: [20, 23, 14, 12, 34, 25, 22, 42, 52, 35, 34, 13, 13] + data: [] } ] } diff --git a/usecaseui-portal/src/assets/images/Services-icon-active.png b/usecaseui-portal/src/assets/images/Services-icon-active.png new file mode 100644 index 00000000..a1b8c3e9 Binary files /dev/null and b/usecaseui-portal/src/assets/images/Services-icon-active.png differ diff --git a/usecaseui-portal/src/assets/images/Services-icon.png b/usecaseui-portal/src/assets/images/Services-icon.png new file mode 100644 index 00000000..0ca54865 Binary files /dev/null and b/usecaseui-portal/src/assets/images/Services-icon.png differ diff --git a/usecaseui-portal/src/assets/images/UUIMenuBar.png b/usecaseui-portal/src/assets/images/UUIMenuBar.png new file mode 100644 index 00000000..bb923858 Binary files /dev/null and b/usecaseui-portal/src/assets/images/UUIMenuBar.png differ diff --git a/usecaseui-portal/src/assets/images/customer-icon-active.png b/usecaseui-portal/src/assets/images/customer-icon-active.png new file mode 100644 index 00000000..a9155bf3 Binary files /dev/null and b/usecaseui-portal/src/assets/images/customer-icon-active.png differ diff --git a/usecaseui-portal/src/assets/images/customer-icon.png b/usecaseui-portal/src/assets/images/customer-icon.png new file mode 100644 index 00000000..f0454173 Binary files /dev/null and b/usecaseui-portal/src/assets/images/customer-icon.png differ diff --git a/usecaseui-portal/src/assets/images/home-icon-active.png b/usecaseui-portal/src/assets/images/home-icon-active.png new file mode 100644 index 00000000..c9371550 Binary files /dev/null and b/usecaseui-portal/src/assets/images/home-icon-active.png differ diff --git a/usecaseui-portal/src/assets/images/home-icon.png b/usecaseui-portal/src/assets/images/home-icon.png new file mode 100644 index 00000000..3a5e9212 Binary files /dev/null and b/usecaseui-portal/src/assets/images/home-icon.png differ diff --git a/usecaseui-portal/src/assets/images/monitor-icon-active.png b/usecaseui-portal/src/assets/images/monitor-icon-active.png new file mode 100644 index 00000000..6e06b662 Binary files /dev/null and b/usecaseui-portal/src/assets/images/monitor-icon-active.png differ diff --git a/usecaseui-portal/src/assets/images/monitor-icon.png b/usecaseui-portal/src/assets/images/monitor-icon.png new file mode 100644 index 00000000..8366b60b Binary files /dev/null and b/usecaseui-portal/src/assets/images/monitor-icon.png differ diff --git a/usecaseui-portal/src/assets/images/network-icon-active.png b/usecaseui-portal/src/assets/images/network-icon-active.png new file mode 100644 index 00000000..12bde3d4 Binary files /dev/null and b/usecaseui-portal/src/assets/images/network-icon-active.png differ diff --git a/usecaseui-portal/src/assets/images/network-icon.png b/usecaseui-portal/src/assets/images/network-icon.png new file mode 100644 index 00000000..c42afa05 Binary files /dev/null and b/usecaseui-portal/src/assets/images/network-icon.png differ diff --git a/usecaseui-portal/src/styles.less b/usecaseui-portal/src/styles.less index 6bc9652c..32bad49a 100644 --- a/usecaseui-portal/src/styles.less +++ b/usecaseui-portal/src/styles.less @@ -769,4 +769,10 @@ nz-notification-container .ant-notification{ } } } +} +.ant-menu-dark .ant-menu-submenu-open,.ant-menu-dark .ant-menu-submenu-title:hover{ + color: #ffffff!important; +} +.ant-menu-dark .ant-menu-inline.ant-menu-sub{ + background:#313449!important; } \ No newline at end of file -- cgit 1.2.3-korg