summaryrefslogtreecommitdiffstats
path: root/usecaseui-portal
diff options
context:
space:
mode:
authorguochuyicmri <guochuyi@chinamobile.com>2019-05-10 10:58:23 +0800
committerguochuyicmri <guochuyi@chinamobile.com>2019-05-10 10:58:29 +0800
commit22ff11be9378a90a22152ab5d0901bd1d4e83fed (patch)
treeb55d7f9277ae15b7ce0767e768b0cc0d105f4b87 /usecaseui-portal
parent5b346094ab12d2561471ec15122bdce2f840237c (diff)
Dashboard interface front-end development
Change-Id: I987e663bed2fd6ff584fe00fd6a29b133724e629 Issue-ID: USECASEUI-214 Signed-off-by: guochuyicmri <guochuyi@chinamobile.com>
Diffstat (limited to 'usecaseui-portal')
-rw-r--r--usecaseui-portal/src/app/app.component.html40
-rw-r--r--usecaseui-portal/src/app/app.component.less26
-rw-r--r--usecaseui-portal/src/app/app.component.ts50
-rw-r--r--usecaseui-portal/src/app/components/customer/customer.component.ts24
-rw-r--r--usecaseui-portal/src/app/home/home.component.ts10
-rw-r--r--usecaseui-portal/src/assets/images/Services-icon-active.pngbin0 -> 631 bytes
-rw-r--r--usecaseui-portal/src/assets/images/Services-icon.pngbin0 -> 903 bytes
-rw-r--r--usecaseui-portal/src/assets/images/UUIMenuBar.pngbin0 -> 122390 bytes
-rw-r--r--usecaseui-portal/src/assets/images/customer-icon-active.pngbin0 -> 737 bytes
-rw-r--r--usecaseui-portal/src/assets/images/customer-icon.pngbin0 -> 1114 bytes
-rw-r--r--usecaseui-portal/src/assets/images/home-icon-active.pngbin0 -> 591 bytes
-rw-r--r--usecaseui-portal/src/assets/images/home-icon.pngbin0 -> 915 bytes
-rw-r--r--usecaseui-portal/src/assets/images/monitor-icon-active.pngbin0 -> 715 bytes
-rw-r--r--usecaseui-portal/src/assets/images/monitor-icon.pngbin0 -> 1126 bytes
-rw-r--r--usecaseui-portal/src/assets/images/network-icon-active.pngbin0 -> 915 bytes
-rw-r--r--usecaseui-portal/src/assets/images/network-icon.pngbin0 -> 1457 bytes
-rw-r--r--usecaseui-portal/src/styles.less6
17 files changed, 118 insertions, 38 deletions
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.
-->
<nz-layout>
- <nz-sider nzWidth='260' style="overflow: auto; height: 100vh; position: fixed; left: 0">
- <ul nz-menu [nzTheme]="'dark'" [nzMode]="'inline'" style="width: 260px;">
- <li nz-menu-item nzSelected>
+ <nz-sider nzWidth='330' style="overflow: auto; height: 100vh; position: fixed; left: 0;background: url('../assets/images/UUIMenuBar.png')">
+ <ul nz-menu [nzTheme]="'dark'" [nzMode]="'inline'" style="width: 330px;margin-top: 200px">
+ <li nz-menu-item [ngClass]="{'activeMenuBar':activeMenuBar[0] == true}" (click)="thisActive(0)">
<a routerLink="home">
<span title>
- <i class="anticon anticon-home"></i>
+ <i>
+ <img src="{{activeMenuBar[0] == true ? '../assets/images/home-icon-active.png':'../assets/images/home-icon.png'}}" alt="home">
+ </i>
<span> {{"i18nTextDefine_Home" | translate}} </span>
</span>
</a>
</li>
<hr>
- <li nz-menu-item>
+ <li nz-menu-item [ngClass]="{'activeMenuBar':activeMenuBar[1] == true}" (click)="thisActive(1)">
<a routerLink="management">
<span title>
- <i class="anticon anticon-user"></i>
+ <i>
+ <img src="{{activeMenuBar[1] == true ? '../assets/images/customer-icon-active.png':'../assets/images/customer-icon.png'}}" alt="home">
+ </i>
<span> {{"i18nTextDefine_Customer" | translate}} </span>
</span>
</a>
</li>
<hr>
- <li nz-menu-item>
+ <li nz-menu-item [ngClass]="{'activeMenuBar':activeMenuBar[2]== true}" (click)="thisActive(2)">
<a routerLink="fcaps">
<span title>
- <i class="anticon anticon-user"></i>
+ <i>
+ <img src="{{activeMenuBar[2] == true ? '../assets/images/monitor-icon-active.png':'../assets/images/monitor-icon.png'}}" alt="home">
+ </i>
<span> {{"i18nTextDefine_Monitor" | translate}} </span>
</span>
</a>
</li>
<hr>
- <li nz-submenu>
- <span title><i class="anticon anticon-home"></i> {{"i18nTextDefine_Services" | translate}} </span>
+ <li nz-submenu [ngClass]="{'activeMenuBar':activeMenuBar[3] == true}" (click)="thisActive(3)">
+ <span title> <i>
+ <img src="{{activeMenuBar[3] == true ? '../assets/images/Services-icon-active.png':'../assets/images/Services-icon.png'}}" alt="home">
+ </i> {{"i18nTextDefine_Services" | translate}} </span>
<ul>
- <li nz-menu-item><a routerLink='services/services-list'> {{"i18nTextDefine_ServicesList" | translate}} </a></li>
- <li nz-menu-item><a routerLink='services/onboard-vnf-vm'> {{"i18nTextDefine_PackageManagement" | translate}} </a></li>
+ <li nz-menu-item [ngClass]="{'activeMenuList':activeMenuList[0] == true}" (click)="thisListActive(0)"><a routerLink='services/services-list'> {{"i18nTextDefine_ServicesList" | translate}} </a></li>
+ <li nz-menu-item [ngClass]="{'activeMenuList':activeMenuList[1] == true}" (click)="thisListActive(1)"><a routerLink='services/onboard-vnf-vm'> {{"i18nTextDefine_PackageManagement" | translate}} </a></li>
</ul>
</li>
<!-- <hr>
@@ -68,17 +76,19 @@
</ul>
</li> -->
<hr>
- <li nz-menu-item>
+ <li nz-menu-item [ngClass]="{'activeMenuBar':activeMenuBar[4] == true}" (click)="thisActive(4)">
<a routerLink="network">
<span title>
- <i class="anticon anticon-share-alt"></i>
+ <i>
+ <img src="{{activeMenuBar[4] == true ? '../assets/images/network-icon-active.png':'../assets/images/network-icon.png'}}" alt="home">
+ </i>
<span> {{"i18nTextDefine_NetworkTopology" | translate}} </span>
</span>
</a>
</li>
</ul>
</nz-sider>
- <nz-layout style="margin-left: 260px; height:100vh; position:relative;">
+ <nz-layout style="margin-left: 330px; height:100vh; position:relative;">
<router-outlet></router-outlet>
</nz-layout>
</nz-layout>
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
--- /dev/null
+++ b/usecaseui-portal/src/assets/images/Services-icon-active.png
Binary files 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
--- /dev/null
+++ b/usecaseui-portal/src/assets/images/Services-icon.png
Binary files 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
--- /dev/null
+++ b/usecaseui-portal/src/assets/images/UUIMenuBar.png
Binary files 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
--- /dev/null
+++ b/usecaseui-portal/src/assets/images/customer-icon-active.png
Binary files 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
--- /dev/null
+++ b/usecaseui-portal/src/assets/images/customer-icon.png
Binary files 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
--- /dev/null
+++ b/usecaseui-portal/src/assets/images/home-icon-active.png
Binary files 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
--- /dev/null
+++ b/usecaseui-portal/src/assets/images/home-icon.png
Binary files 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
--- /dev/null
+++ b/usecaseui-portal/src/assets/images/monitor-icon-active.png
Binary files 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
--- /dev/null
+++ b/usecaseui-portal/src/assets/images/monitor-icon.png
Binary files 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
--- /dev/null
+++ b/usecaseui-portal/src/assets/images/network-icon-active.png
Binary files 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
--- /dev/null
+++ b/usecaseui-portal/src/assets/images/network-icon.png
Binary files 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