Skip to content

S
smart
Commit 20b8da64 authored by wangqinghua's avatar wangqinghua
Browse files
Options

样式

parent 8b3090c1
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 314 additions and 58 deletions
src/main/webapp/app/app.service.ts
View file @ 20b8da64
...@@ -4,7 +4,7 @@ import {BehaviorSubject, Subscription} from 'rxjs'; ...@@ -4,7 +4,7 @@ import {BehaviorSubject, Subscription} from 'rxjs';
@Injectable() @Injectable()
export class AppService { export class AppService {
private themeSource:BehaviorSubject<string> = new BehaviorSubject('white'); private themeSource:BehaviorSubject<string> = new BehaviorSubject('dark');
public theme = this.themeSource.asObservable(); public theme = this.themeSource.asObservable();
public setTheme(value: string){ public setTheme(value: string){
......
src/main/webapp/app/layouts/sidebar/sidebar.component.html
View file @ 20b8da64
<div class="logo padding-40">智能运维监管平台</div> <div class="logo">智能运维监管平台</div>
<ul nz-menu [nzMode]="'inline'"> <ul nz-menu [nzMode]="'inline'">
<ng-container *ngFor="let item of menuList"> <ng-container *ngFor="let item of menuList">
<li nz-submenu (nzOpenChange)="openHandler(item)" [(nzOpen)]="item.checked"> <li nz-submenu (nzOpenChange)="openHandler(item)" [(nzOpen)]="item.checked">
......
src/main/webapp/app/overAll/basic/basic-detail/basic-detail.component.html
View file @ 20b8da64
...@@ -23,9 +23,9 @@ ...@@ -23,9 +23,9 @@
<nz-spin [nzSpinning]="isSpinning"> <nz-spin [nzSpinning]="isSpinning">
<!-- 交换机 --> <!-- 交换机 -->
<smart-switch></smart-switch> <!-- <smart-switch></smart-switch>-->
<!-- 服务器--> <!-- 服务器-->
<smart-server></smart-server> <smart-server></smart-server>
<!-- 数据库--> <!-- 数据库-->
<smart-database></smart-database> <!-- <smart-database></smart-database>-->
</nz-spin> </nz-spin>
src/main/webapp/app/overAll/modal/database/database.component.html
View file @ 20b8da64
...@@ -3,8 +3,43 @@ ...@@ -3,8 +3,43 @@
<nz-col span="12"> <nz-col span="12">
<div> <div>
<nz-row> <nz-row>
<nz-col span="12">数据库</nz-col> <nz-col span="12">
<nz-col span="12">指标列表</nz-col> <p class="host-item-title">数据库</p>
</nz-col>
<nz-col span="12">
<p class="host-item-title">指标列表</p>
<nz-row>
<div class="host-item-content">
<nz-col nzSpan="14"><span class="left">主键缓存大小(MB)：</span></nz-col>
<nz-col nzSpan="10"><span class="right">284</span></nz-col>
<nz-col nzSpan="14"><span class="left">数据库存储引擎：</span></nz-col>
<nz-col nzSpan="10"><span class="right">284</span></nz-col>
<nz-col nzSpan="14"><span class="left">最大连接数：</span></nz-col>
<nz-col nzSpan="10"><span class="right">284</span></nz-col>
<nz-col nzSpan="14"><span class="left">缓存大小：</span></nz-col>
<nz-col nzSpan="10"><span class="right">284</span></nz-col>
<nz-col nzSpan="14"><span class="left">主键命中率(%)：</span></nz-col>
<nz-col nzSpan="10"><span class="right">284</span></nz-col>
<nz-col nzSpan="14"><span class="left">X活数：</span></nz-col>
<nz-col nzSpan="10"><span class="right">284</span></nz-col>
<nz-col nzSpan="14"><span class="left">当前进程数：</span></nz-col>
<nz-col nzSpan="10"><span class="right">284</span></nz-col>
<nz-col nzSpan="14"><span class="left">数据文件请求速率：</span></nz-col>
<nz-col nzSpan="10"><span class="right">284</span></nz-col>
<nz-col nzSpan="14"><span class="left">缓存命中率(%)：</span></nz-col>
<nz-col nzSpan="10"><span class="right">284</span></nz-col>
</div>
</nz-row>
</nz-col>
</nz-row> </nz-row>
</div> </div>
<div> <div>
...@@ -12,7 +47,7 @@ ...@@ -12,7 +47,7 @@
</div> </div>
</nz-col> </nz-col>
<nz-col span="12"> <nz-col span="12">
<div> <div class="host-item-title">
告警总数趋势 告警总数趋势
</div> </div>
<div></div> <div></div>
......
src/main/webapp/app/overAll/modal/server/server.component.html
View file @ 20b8da64
<div> <div>
<nz-row> <nz-row>
<nz-col span="12"> <nz-col span="12">
<div> <div class="padding-10" style="height: 20%;">
关键指标 <p class="host-item-title">关键指标</p>
</div> </div>
<div> <div class="padding-10" style="height: 40%;">
分区 <p class="host-item-title">分区</p>
</div> </div>
<div> <div class="padding-10" style="height: 40%;">
<nz-row> <nz-row>
<nz-col span="12">基本信息</nz-col> <nz-col span="12">
<nz-col span="12">指标列表</nz-col> <p class="host-item-title">基本信息</p>
</nz-row> <div class="host-item-content">
</div> <nz-col nzSpan="8"><span class="left">资源状态：</span></nz-col>
</nz-col> <nz-col nzSpan="16"><span class="right">100</span></nz-col>
<nz-col span="12">
<div> <nz-col nzSpan="8"><span class="left">名称：</span></nz-col>
指标趋势 <nz-col nzSpan="16"><span class="right">100</span></nz-col>
</div>
<div> <nz-col nzSpan="8"><span class="left">IP地址：</span></nz-col>
可用性历史趋势 <nz-col nzSpan="16"><span class="right">100</span></nz-col>
</div>
</nz-col> <nz-col nzSpan="8"><span class="left">设备类型：</span></nz-col>
</nz-row> <nz-col nzSpan="16"><span class="right">100</span></nz-col>
<nz-col nzSpan="8"><span class="left">资产编号：</span></nz-col>
<nz-col nzSpan="16"><span class="right">100</span></nz-col>
<nz-col nzSpan="8"><span class="left">资源位置：</span></nz-col>
<nz-col nzSpan="16"><span class="right">100</span></nz-col>
<nz-col nzSpan="8"><span class="left">负责人：</span></nz-col>
<nz-col nzSpan="16"><span class="right">100</span></nz-col>
</div>
</nz-col>
<nz-col span="12">
<p class="host-item-title">指标列表</p>
<div class="host-item-content">
<nz-row >
<nz-col nzSpan="8"><span class="left">CPU利用率(%)：</span></nz-col>
<nz-col nzSpan="16"><span class="right">100</span></nz-col>
<nz-col nzSpan="8"><span class="left">Ping延时(ms)：</span></nz-col>
<nz-col nzSpan="16"><span class="right">100</span></nz-col>
<nz-col nzSpan="8"><span class="left">内存利用率(%)：</span></nz-col>
<nz-col nzSpan="16"><span class="right">100</span></nz-col>
<nz-col nzSpan="8"><span class="left">CPU个数：</span></nz-col>
<nz-col nzSpan="16"><span class="right">100</span></nz-col>
<nz-col nzSpan="8"><span class="left">接口数：</span></nz-col>
<nz-col nzSpan="16"><span class="right">100</span></nz-col>
<nz-col nzSpan="8"><span class="left">物理内存容量(GB)：</span></nz-col>
<nz-col nzSpan="16"><span class="right">100</span></nz-col>
<nz-col nzSpan="8"><span class="left">MAC地址：</span></nz-col>
<nz-col nzSpan="16"><span class="right">100</span></nz-col>
</nz-row>
</div>
</nz-col>
</nz-row>
</div>
</nz-col>
<nz-col span="12">
<div class="padding-10" style="height: 50%;">
<div class="host-item-title">
指标趋势
</div>
<div class="host-item-content">图表</div>
</div>
<div class="padding-10" style="height: 50%;">
<div class="host-item-title">
可用性历史趋势
</div>
<div class="host-item-content">图表</div>
</div>
</nz-col>
</nz-row>
</div> </div>
src/main/webapp/app/overAll/modal/switch/switch.component.html
View file @ 20b8da64
<nz-row> <nz-row>
<nz-col span="12"> <nz-col nzSpan="8">
<div> <div class="padding-10" style="height: 30%;">
<p>关键指标</p> <p class="host-item-title">关键指标</p>
<div class="host-item-content">
</div>
</div> </div>
<div> <div class="padding-10" style="height: 35%;">
<p>基本信息</p> <p class="host-item-title">基本信息</p>
<div class="host-item-content">
<nz-row>
<nz-col nzSpan="8"><span class="left">资源状态：</span></nz-col>
<nz-col nzSpan="16"><span class="right">100</span></nz-col>
<nz-col nzSpan="8"><span class="left">名称：</span></nz-col>
<nz-col nzSpan="16"><span class="right">100</span></nz-col>
<nz-col nzSpan="8"><span class="left">IP地址：</span></nz-col>
<nz-col nzSpan="16"><span class="right">100</span></nz-col>
<nz-col nzSpan="8"><span class="left">设备类型：</span></nz-col>
<nz-col nzSpan="16"><span class="right">100</span></nz-col>
<nz-col nzSpan="8"><span class="left">资产编号：</span></nz-col>
<nz-col nzSpan="16"><span class="right">100</span></nz-col>
<nz-col nzSpan="8"><span class="left">负责人：</span></nz-col>
<nz-col nzSpan="16"><span class="right">100</span></nz-col>
</nz-row>
</div>
</div> </div>
<div> <div class="padding-10" style="height: 35%;">
<p>指标列表</p> <p class="host-item-title">指标列表</p>
<div class="host-item-content">
<nz-row >
<nz-col nzSpan="8"><span class="left">CPU利用率(%)：</span></nz-col>
<nz-col nzSpan="16"><span class="right">100</span></nz-col>
<nz-col nzSpan="8"><span class="left">Ping延时(ms)：</span></nz-col>
<nz-col nzSpan="16"><span class="right">100</span></nz-col>
<nz-col nzSpan="8"><span class="left">丢包数：</span></nz-col>
<nz-col nzSpan="16"><span class="right">100</span></nz-col>
<nz-col nzSpan="8"><span class="left">内存利用率(%)：</span></nz-col>
<nz-col nzSpan="16"><span class="right">100</span></nz-col>
<nz-col nzSpan="8"><span class="left">总流速(Kbps)：</span></nz-col>
<nz-col nzSpan="16"><span class="right">100</span></nz-col>
</nz-row>
</div>
</div> </div>
</nz-col> </nz-col>
<nz-col span="12"> <nz-col nzSpan="16">
<div> <div class="padding-10" style="height: 50%;">
指标趋势 <div class="host-item-title">指标趋势</div>
<div class="host-item-content">图表</div>
</div> </div>
<div> <div class="padding-10" style="height: 50%;">
网卡流量 <div class="host-item-title">网卡流量</div>
<div class="host-item-content">图表</div>
</div> </div>
</nz-col> </nz-col>
</nz-row> </nz-row>
......
src/main/webapp/app/overAll/modal/switch/switch.component.ts
View file @ 20b8da64
import { Component, OnInit } from '@angular/core'; import {Component, OnInit} from '@angular/core';
import {CommonService} from '../../../shared/common/common.service';
@Component({ @Component({
selector: 'smart-switch', selector: 'smart-switch',
templateUrl: './switch.component.html', templateUrl: './switch.component.html',
styles: [] styles: []
}) })
export class SwitchComponent implements OnInit { export class SwitchComponent implements OnInit {
constructor() { } targetFlow = [
{'label': 'CPU利用率(%)', value: ''},
{'label': 'Ping延时(ms)', value: ''},
{'label': '丢包数', value: ''},
{'label': '内存利用率(%)', value: ''},
{'label': '总流速(Kbps)', value: ''},
];
ngOnInit() { timeList = [
} {'label':'最近一小时',value:'0'},
{'label':'最近一天',value:'1'},
{'label':'最近三天',value:'3'},
{'label':'最近一周',value:'4'},
];
timeTarget;
timeFlow;
interfaceList = []; //接口数组
interface;
unitList = [
{'label':'Kbps',value:''},
{'label':'Mbps',value:''},
{'label':'Gbps',value:''},
];
unit;
constructor(private commonSer:CommonService) {
}
ngOnInit() {
}
/**********指标趋势**************/
changeTimeTarget(){
const timeObj = this.commonSer.getTimeByType(this.timeFlow);
}
/**********指标趋势**************/
/**********网卡流量**************/
changeTimeFlow(){
const timeObj = this.commonSer.getTimeByType(this.timeFlow);
}
/**********网卡流量**************/
} }
src/main/webapp/app/shared/common/common.service.ts
View file @ 20b8da64
import {Injectable, OnInit} from "@angular/core"; import {Injectable, OnInit} from "@angular/core";
import {NzModalService} from 'ng-zorro-antd'; import {NzModalService} from 'ng-zorro-antd';
import {SERVER_API_URL, SERVER_API_URL_COMS} from '../../app.constants'; import {SERVER_API_URL, SERVER_API_URL_COMS} from '../../app.constants';
import {DatePipe} from '@angular/common';
@Injectable() @Injectable()
export class CommonService implements OnInit { export class CommonService implements OnInit {
constructor(private modalSer:NzModalService) { constructor(private modalSer:NzModalService,private datePipe:DatePipe) {
// 定义发射事件 // 定义发射事件
} }
...@@ -137,4 +138,58 @@ export class CommonService implements OnInit { ...@@ -137,4 +138,58 @@ export class CommonService implements OnInit {
return usablePrefixMethod; return usablePrefixMethod;
} }
} /**
\ No newline at end of file * 根据type 查询时间段
* @param timeType 0 最近一小时 1 今天 2 昨天(最近一天) 3 最近三天 4 最近一周 5 最近一个月
*/
getTimeByType(timeType){
const nowDate = new Date().getTime();
let day1, day2; //当作变量使用
let obj = {startTime:'',endTime:''};
switch (timeType) {
case'0':{ //最近一小时
day1 = nowDate - 1 * 60 * 60 * 1000;
obj.startTime = this.datePipe.transform(day1, 'yyyy-MM-dd HH:mm:ss');
obj.endTime = this.datePipe.transform(nowDate, 'yyyy-MM-dd HH:mm:ss');
break;
}
case'1': { //今天
obj.startTime = this.datePipe.transform(nowDate, 'yyyy-MM-dd') + ' 00:00:00';
obj.endTime = this.datePipe.transform(nowDate, 'yyyy-MM-dd') + ' 23:59:59';
break;
}
case'2': { //昨天
day1 = nowDate - 1 * 24 * 60 * 60 * 1000;
obj.startTime = this.datePipe.transform(day1, 'yyyy-MM-dd') + ' 00:00:00';
obj.endTime = this.datePipe.transform(day1, 'yyyy-MM-dd') + ' 23:59:59';
break;
}
case'3': { //最近三天
day1 = nowDate - 3 * 24 * 60 * 60 * 1000;
day2 = nowDate;
obj.startTime = this.datePipe.transform(day1, 'yyyy-MM-dd') + ' 00:00:00';
obj.endTime = this.datePipe.transform(day2, 'yyyy-MM-dd') + ' 23:59:59';
break;
}
case'4': { //最近一周
day1 = nowDate - 7 * 24 * 60 * 60 * 1000;
day2 = nowDate;
obj.startTime = this.datePipe.transform(day1, 'yyyy-MM-dd') + ' 00:00:00';
obj.endTime = this.datePipe.transform(day2, 'yyyy-MM-dd') + ' 23:59:59';
break;
}
case'5': { //最近一个月
day1 = nowDate - 30 * 24 * 60 * 60 * 1000;
day2 = nowDate;
obj.startTime = this.datePipe.transform(day1, 'yyyy-MM-dd') + ' 00:00:00';
obj.endTime = this.datePipe.transform(day2, 'yyyy-MM-dd') + ' 23:59:59';
break;
}
case'6': {
break;
}
}
console.log(obj);
return obj;
}
}
src/main/webapp/content/css/documentation.css
View file @ 20b8da64
...@@ -18,7 +18,7 @@ ...@@ -18,7 +18,7 @@
text-align: center; text-align: center;
font-size: 20px; font-size: 20px;
font-weight: 500; font-weight: 500;
padding: 20px 0; padding: 17px 0;
} }
.breadcrumbs{ .breadcrumbs{
padding: 10px 0; padding: 10px 0;
...@@ -194,4 +194,4 @@ ...@@ -194,4 +194,4 @@
border-radius: 4px; border-radius: 4px;
padding: 2px 5px; padding: 2px 5px;
cursor: pointer; cursor: pointer;
} }
\ No newline at end of file
src/main/webapp/content/css/global.css
View file @ 20b8da64
...@@ -5,7 +5,9 @@ Bootstrap tweaks ...@@ -5,7 +5,9 @@ Bootstrap tweaks
body, h1, h2, h3, h4 { body, h1, h2, h3, h4 {
font-weight: 400; font-weight: 400;
} }
p{
margin: 0;
}
body { body {
background: #ffffff; background: #ffffff;
} }
......
src/main/webapp/content/scss/darkBlue.scss
View file @ 20b8da64
$dark:#193250; $dark:#193250;
.dark{ .dark{
.container{ .container{
height: 100%;
padding: 0 16px; padding: 0 16px;
background-image: url("../../content/images/dark-bg-img.png"); background-image: url("../../content/images/dark-bg-img.png");
background-size: cover; background-size: cover;
...@@ -17,6 +18,29 @@ $dark:#193250; ...@@ -17,6 +18,29 @@ $dark:#193250;
nz-header{ nz-header{
background: $dark; background: $dark;
padding: 0 16px; padding: 0 16px;
border-bottom: 1px solid #e5e5e5; border-bottom: 1px solid $dark;
}
//主机详情
.host-item-title{
background-color: $dark;
color: #f2f2f2;
padding:10px 15px;
}
.host-item-content{
background-color: rgba(0,0,0,.2);
color: #b7cfea;
nz-col{
margin-bottom: 10px;
.left{
color: #ffffff;
}
.right{
color: #7bcefb;
}
}
nz-col[nzSpan='8'],nz-col[nzSpan='14']{
text-align: right;
}
} }
} }
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment