See the License for the specific language governing permissions and
limitations under the License.
-->
-<h3 class="title"> {{"Overall trend" | translate}}</h3>
-<hr>
+
+<!--<h3 class="title"> {{"Overall trend" | translate}}</h3>
+<hr> -->
<div class="content">
<div class="services">
<h4>{{"SERVICES" | translate}}</h4>
- <h3>{{serviceNumber}} <span>{{"services" | translate}}</span> </h3>
- <p>{{serviceNumber}} {{"services has been created" | translate}}</p>
+ <!-- <h3>{{serviceNumber}} <span>{{"services" | translate}}</span> </h3>
+ <p>{{serviceNumber}} {{"services has been created" | translate}}</p> -->
<app-pie [initData]="serviceChartInit" [chartData]="serviceChartData"></app-pie>
- <p class="tip">View the details</p>
+ <div>
+ <h5> {{serviceNumber}} <span>cutomers and</span> {{serviceNumber}} <span>service intance</span></h5>
+ </div>
+ <div class="details">
+ <li> <div class="detailstoplin" *ngFor="let item of userdata"> <div>{{item.name}}</div> <div> <app-bar [initData]="serviceBarChartInit" [chartData]="servicesBarChartData"></app-bar></div> <div>{{item.value1}}/{{item.value2}}</div></div> </li>
+ </div>
+ <p class="tip">View Details</p>
</div>
-
<div class="rightcontent">
<div class="rt-content">
+ <div class="alarm">
+ <h4>{{"ALARM" | translate}}</h4>
+ <app-pie [initData]="alarmChartInit" [chartData]="alarmChartData"></app-pie>
+ </div>
<div class="poerformance">
- <h4>{{"PERFORMANCE" | translate}}</h4>
+ <h4>{{"DEVICES" | translate}}</h4>
<div class="pfVnf">
<h3 class="pfVnfNum">{{performanceVnfNum}}</h3>
<p>Performance VNF</p>
<img src="./assets/images/VM.png" alt="VM/PM">
</div>
</div>
- <div class="alarm">
- <h4>{{"Alarm" | translate}}</h4>
- <app-pie [initData]="alarmChartInit" [chartData]="alarmChartData"></app-pie>
- </div>
</div>
-
<div class="rb-content">
- <h4>{{"Alarm" | translate}}</h4>
+ <h4>{{"VM PERFORMANCE" | translate}}</h4>
<nz-dropdown [nzTrigger]="'click'" [nzPlacement]="'bottomRight'">
<button nz-button nz-dropdown><span>{{sourceNameSelected}}</span> <i class="anticon anticon-down"></i></button>
<ul nz-menu>
<app-line [initData]="alarmLineChartInit" [chartData]="alarmLineChartData"></app-line>
</div>
</div>
-
</div>
-
-.title {
- font: 700 18px/18px "思源黑体";
- color: #4c5e70;
- margin-bottom: 18px;
-}
-hr {
- border: none;
- height: 2px;
- background-color: #dce1e7;
- margin-bottom: 20px;
-}
+// .title {
+// font: 700 18px/18px "思源黑体";
+// color: #4c5e70;
+// margin-bottom: 18px;
+// }
+// hr {
+// border: none;
+// height: 2px;
+// background-color: #dce1e7;
+// margin-bottom: 20px;
+// }
.content {
.services {
float: left;
border-radius: 5px;
padding: 28px 22px;
h4 {
- font: 600 16px/16px "Arial";
- color: #3d4d65;
- margin-bottom: 58px;
+ font: 600 16px/16px "Arial Bold";
+ color: #3F9CFF;
+ margin-bottom: 20px;
}
h3 {
font: 400 48px/48px "Arial";
font-size: 14px;
}
}
+ h5 {
+ font: 500 16px/16px "ArialMT";
+ color:#3F9CFF;
+ margin: -2em 0 1em 0 ;
+ span {
+ font-size: 12px;
+ font-family: "Arial";
+ color:rgba(60,79,140,1);
+ }
+ span:first-child {
+ padding: 0 4PX 0 4px;
+ }
+ span:last-child {
+ padding-left: 4px;
+ }
+
+ }
p {
font: 400 14px/14px "Arial";
color: #54657e;
text-align: center;
margin-bottom: 48px;
}
+ .details {
+ li {
+ border-bottom:0.5px solid rgba(237,237,237,1);
+ border-radius:4px;
+ line-height: 45px;
+ font-size: 14px;
+ color: #3C4F8C;
+ font-family:"ArialMT";
+ .detailstoplin {
+ width: 100%;
+ height: 50px;
+ border-top: 0.5px solid #ededed;
+ border-radius: 4px;
+ div:first-child{
+ width: 20%;
+ float: left;
+ }
+ div:nth-child(2){
+ width: 65%;
+ float: left;
+ }
+ div:last-child {
+ width: 13%;
+ float: right;
+ font-size:12px;
+ font-weight: 500;
+ color:rgba(60,79,140,0.5);
+ }
+ }
+ }
+ }
.tip {
+ width: 110px;
background-color: #eceff4;
- color: #3d4d65;
+ color: #3C4F8C;
font-size: 16px;
- margin: 0 20px;
- height: 35px;
+ float: right;
+ margin-top: 53px;
line-height: 35px;
border-radius: 5px;
}
height: 220px;
margin-bottom: 18px;
.poerformance {
- float: left;
+ float: left;
+ margin-left: 2%;
background-color: #fff;
height: 100%;
width: 50%;
border-radius: 5px;
padding: 28px 26px;
+ .pfVmPm {
+ h3 {
+ color:#BD57E5;
+ }
+ }
h4 {
- font: 600 16px/16px "Arial";
- color: #3d4d65;
+ font: 600 16px/16px "Arial Bold";
+ color: #3F9CFF;
margin-bottom: 34px;
}
+
div {
height: 57px;
position: relative;
margin-bottom: 10px;
h3 {
font: 600 25px/25px "Arial";
- color: #3d4d65;
+ color: #2F6AEF;
margin-bottom: 10px;
+ padding-left: 50%;
}
p {
font: 400 12px/12px "Arial";
- color: #54657e
+ color:rgba(60,79,140,0.5);
+ padding-left: 50%;
+
}
img {
position: absolute;
top: 0;
- right: 0;
+ left: 0;
}
}
}
background-color: #fff;
height: 100%;
width: 48%;
- margin-left: 2%;
+
border-radius: 5px;
position: relative;
padding: 28px 26px;
h4 {
position: absolute;
- font: 600 16px/16px "Arial";
- color: #3d4d65;
+ font: 600 16px/16px "Arial Bold";
+ color: #3F9CFF;
}
}
}
padding: 24px 30px;
position: relative;
h4 {
- font: 600 16px/16px "Arial";
- color: #3d4d65;
+ font: 600 16px/16px "Arial Bold";
+ color: #3F9CFF;
}
nz-dropdown {
position: absolute;
this.getHomePerformanceData();
this.getHomeAlarmData();
this.getHomeAlarmChartData();
+ this.getHomeServiceBarData();
}
serviceNumber:number = 0;
serviceChartData:Object;
serviceChartInit:Object = {
+ backgroundColor: '#fff',
height: 300,
option:{
legend: {
bottom: '0px',
data: ['Active','Closed']
},
- color:["#3fa8eb","#1abb9b","#a4ead7"],
- series:[{
- name:"服务信息",
- radius : ['45%','65%'],
- avoidLabelOverlap: false,
- label:{
- normal:{
- show: false,
- position: 'center'
- },
- emphasis: {
- show: true,
- formatter:'{b}\n{c}',
- textStyle: {
- fontSize: '20',
+ color: ["#7AC0EF", "#6A86D8", "#748CDC", "#7277D4", "#7067CE", "#B9B0F7", "#7DCFF5"],
+ series: [
+ {
+ name: "服务信息",
+ radius: ['50%', '70%'],
+ avoidLabelOverlap: false,
+ label: {
+ normal: {
+ show: false,
+ position: 'center'
+ },
+ emphasis: {
+ show: true,
+ formatter: '{b}\n{c}',
+ textStyle: {
+ fontSize: '18',
fontWeight: 'bold'
}
}
labelLine: {
normal: {
show: false
- }
- },
- }]
+ }
+ },
+ itemStyle: {
+ normal: {
+ borderWidth: 4,
+ borderColor: "#fff"
+ },
+ emphasis: {
+ borderWidth: 0
+ }
+ },
+ }
+ ]
}
};
// gethomeServiceData
// alarm饼图
alarmChartData:Object;
alarmChartInit:Object = {
- height: 164,
+ height: 180,
option:{
legend: {
orient: 'vertical',
left: '0px',
bottom: '0px',
- data: ['Active','Closed']
+ itemWidth: 10,
+ itemHeight: 10,
+ textStyle: {
+ color: "#3C4F8C"
+ },
+ data: ['Active', 'Fixed']
},
- color:["#fb6e6e","#526b75"],
- series:[{
- name:"告警信息",
- radius : '55%',
- label:{
- normal:{
+ color: [
+ {
+ type: 'linear',
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [{
+ offset: 0, color: '#FB93C2' // 0% 处的颜色
+ }, {
+ offset: 1, color: '#FB7788' // 100% 处的颜色
+ }],
+ globalCoord: false // 缺省为 false
+ }, {
+ type: 'linear',
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [{
+ offset: 0, color: '#A6BFE4' // 0% 处的颜色
+ }, {
+ offset: 1, color: '#7A8BAE' // 100% 处的颜色
+ }],
+ globalCoord: false // 缺省为 false
+ }],
+ series: [{
+ name: "告警信息",
+ radius: '55%',
+ label: {
+ normal: {
show: false,
},
emphasis: {
show: true,
- formatter:'{b}\n{c},{d}%',
+ formatter: '{b}\n{c},{d}%',
+ color: "#3C4F8C"
}
}
}]
.subscribe((data)=>{
this.alarmChartData ={
series:[{
- data:[{name:"Active",value:data[0]},{name:"Closed",value:data[1]}]
+ data: [{ name: "Active", value: data[0] }, { name: "Fixed", value: data[1] }]
}]
};
})
option:{
legend: {
bottom: '0px',
- data: ['All','Active','Closed']
+ data: ['CPU', 'Memory', 'Disk']
},
xAxis:{
data:["2018-09-10 ","2018-09-11","2018-09-12","2018-09-13","2018-09-14",
},
series : [
{
- name: 'All',
- type: 'line',
- data:[30,45,34,35,43,56,36,53,42,45,44,35,32]
+ name: 'CPU',
+ type: 'line',
+ itemStyle: {
+ color: "#70ACEC"
+ },
+ data: [30, 45, 34, 35, 43, 56, 36, 53, 42, 45, 44, 35, 32]
},
{
- name: 'Active',
- type: 'line',
- data:[10,23,24,22,14,15,32,12,12,32,14,23,23]
+ name: 'Memory',
+ type: 'line',
+ itemStyle: {
+ color: "#3BCD79"
+ },
+ data: [10, 23, 24, 22, 14, 15, 32, 12, 12, 32, 14, 23, 23]
},
{
- name: 'Closed',
+ name: 'Disk',
type: 'line',
- data:[20,23,14,12,34,25,22,42,52,35,34,13,13]
+ itemStyle: {
+ color: "#FDC288"
+ },
+ data: [20, 23, 14, 12, 34, 25, 22, 42, 52, 35, 34, 13, 13]
}
]
}
};
+
+ // services进度条
+ servicesBarChartData: Object;
+ serviceBarChartInit: Object = {
+ option: {
+ xAxis: {
+ // data: [],
+ type: 'value',
+ show: false,
+ min: 0,
+ max: 80,
+ axisTick: {
+ show: false
+ },
+ },
+ series: [{
+ type: 'bar',
+ name: 'a',
+ silent: true,
+ animation: false,
+ data: [80],
+ stack: 'income',
+ barWidth: 12,
+ itemStyle: {
+ normal: {
+ color: '#7AC0EF',
+ barBorderRadius: [10, 10, 10, 10]
+ }
+ },
+ }, {
+ type: 'bar',
+ name: '',
+ animation: false,
+ silent: true,
+ data: [60],
+ tooltip: {
+ show: false
+ },
+ stack: 'income',
+ barWidth: 12,
+ itemStyle: {
+ normal: {
+ color: '#fff',
+ barBorderRadius: [10, 10, 10, 10]
+ }
+ },
+ label: {
+ normal: {
+ show: false,
+ }
+ },
+ }
+ ]
+ }
+ }
+ userdata;
+ getHomeServiceBarData() {
+ this.myhttp.getHomeServiceBarData()
+ .subscribe((data) => {
+ this.userdata = data.customerServiceList;
+ let Val1;
+ let Val2;
+ let MIN: number = 0;
+ let MAX: number = Val1;
+ Val1 = data.customerServiceList[1].value1;
+ Val2 = data.customerServiceList[1].value2;
+ if (Val1 > Val2) {
+ MIN = 0;
+ MAX = Val1;
+ } else {
+ MIN = Val1 - Val2;
+ MAX = Val2;
+ }
+ this.servicesBarChartData = {
+ xAxis: {
+ min: MIN,
+ max: MAX,
+ },
+ series: [
+ { data: [Val1] },
+ { data: [Val1 - Val2] },
+ ]
+ }
+ }, (err) => {
+ console.log(err);
+ })
+ }
// sourceName筛选框
sourceNameList = ['performanceNameOne'];
sourceNameSelected = null;
Code Review / usecase-ui.git / commitdiff