Skip to content

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

样式

parent 8b3090c1
Hide whitespace changes
Inline Side-by-side
Showing with 314 additions and 820 deletions
src/main/webapp/app/app.service.ts
View file @ 20b8da64
......@@ -4,7 +4,7 @@ import {BehaviorSubject, Subscription} from 'rxjs';
@Injectable()
export class AppService {
private themeSource:BehaviorSubject<string> = new BehaviorSubject('white');
private themeSource:BehaviorSubject<string> = new BehaviorSubject('dark');
public theme = this.themeSource.asObservable();
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'">
<ng-container *ngFor="let item of menuList">
<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 @@
<nz-spin [nzSpinning]="isSpinning">
<!-- 交换机 -->
<smart-switch></smart-switch>
<!-- <smart-switch></smart-switch>-->
<!-- 服务器-->
<smart-server></smart-server>
<!-- 数据库-->
<smart-database></smart-database>
<!-- <smart-database></smart-database>-->
</nz-spin>
src/main/webapp/app/overAll/basic/basic-detail/basic-detail.component.ts
View file @ 20b8da64
......@@ -138,771 +138,9 @@ export class BasicDetailComponent implements OnInit, AfterViewInit {
}
ngOnInit() {
this.isSpinning = true;
this.responseTime();
this.losed();
this.cpused();
this.used();
// this.inOutInfo();
//监测点
this.getList();
//历史告警
const obj = {};
this.warnList.getList(obj);
this.disks();
}
ngAfterViewInit() {
this.checkEle.nativeElement.children[1].children[0].children[0].children[2].children[0].children[0].children[2].style.marginRight = this.colorEle.nativeElement.offsetWidth +'px';
}
//平均响应时间
responseTime() {
this.overAllSer.responseTime(this.hostId).subscribe(
(res) => {
if (res.errCode == 10000) {
this.responseTimeStr = res.data.responseTime.toFixed(2);
const responseTime = this.responseTimeStr;
const other = 100 - this.responseTimeStr;
const data = [
{value: responseTime},
{value: other},
{
value: 100, name: '', tooltip: {
formatter: function(a) {
return '';
}
}
}
];
this.chartOption1 = {
title: {
text: '平均响应时间',
top: '5%',
left: '35%',
textStyle: {
color: '#999',
fontSize: 12,
}
},
tooltip: {
trigger: 'item',
show: false,
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
color: ['#7eb6ea', '#eeeeee', 'transparent'],
series: [
{
type: 'pie',
startAngle: 180,
radius: ['50%', '85%'],
center: ['50%', '75%'],
hoverAnimation: true,
data: data,
itemStyle: {
normal: {
show: false,
position: 'center'
},
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
labelLine: {
normal: {
show: false
}
},
}
]
};
} else {
this.message.info(res.errMsg);
}
}
);
}
//丢包率
losed() {
this.overAllSer.losed(this.hostId).subscribe(
(res) => {
if (res.errCode == 10000) {
this.losedStr = res.data.losed;
const losed = res.data.losed;
const other = 100 - res.data.losed;
const data = [
{value: losed},
{value: other},
{
value: 100, name: '', tooltip: {
formatter: function(a) {
return '';
}
}
}
];
this.chartOption2 = {
title: {
text: '丢包率',
top: '5%',
left: '38%',
textStyle: {
color: '#999',
fontSize: 12,
}
},
tooltip: {
trigger: 'item',
show: false,
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
color: ['#7eb6ea', '#eeeeee', 'transparent'],
series: [
{
type: 'pie',
startAngle: 180,
radius: ['50%', '85%'],
center: ['50%', '75%'],
hoverAnimation: true,
data: data,
itemStyle: {
normal: {
show: false,
position: 'center'
},
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
labelLine: {
normal: {
show: false
}
},
}
]
};
} else {
this.message.info(res.errMsg);
}
}
);
}
//cup使用率
cpused() {
const data = {
hostId: this.hostId,
};
this.overAllSer.cupUsed(data).subscribe(
(res) => {
if (res.errCode == 10000) {
this.cpuUsedStr = res.data.cpuUsed;
const losed = res.data.cpuUsed;
const other = 100 - res.data.cpuUsed;
const data = [
{value: losed},
{value: other},
{
value: 100, name: '', tooltip: {
formatter: function(a) {
return '';
}
}
}
];
this.chartOption3 = {
title: {
text: 'CPU使用率',
top: '5%',
left: '38%',
textStyle: {
color: '#999',
fontSize: 12,
}
},
tooltip: {
trigger: 'item',
show: false,
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
color: ['#7eb6ea', '#eeeeee', 'transparent'],
series: [
{
type: 'pie',
startAngle: 180,
radius: ['50%', '85%'],
center: ['50%', '75%'],
hoverAnimation: true,
data: data,
itemStyle: {
normal: {
show: false,
position: 'center'
},
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
labelLine: {
normal: {
show: false
}
},
}
]
};
} else {
this.message.info(res.errMsg);
}
}
);
}
//内存使用率
used() {
const data = {
hostId: this.hostId,
};
this.overAllSer.used(data).subscribe(
(res) => {
if (res.errCode == 10000) {
this.usedStr = res.data.used;
const used = res.data.used;
const other = 100 - res.data.used;
const data = [
{value: used},
{value: other},
{
value: 100, name: '', tooltip: {
formatter: function(a) {
return '';
}
}
}
];
this.chartOption4 = {
title: {
text: '内存使用率',
top: '5%',
left: '38%',
textStyle: {
color: '#999',
fontSize: 12,
}
},
tooltip: {
trigger: 'item',
show: false,
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
color: ['#7eb6ea', '#eeeeee', 'transparent'],
series: [
{
type: 'pie',
startAngle: 180,
radius: ['50%', '85%'],
center: ['50%', '75%'],
hoverAnimation: true,
data: data,
itemStyle: {
normal: {
show: false,
position: 'center'
},
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
labelLine: {
normal: {
show: false
}
},
}
]
};
} else {
this.message.info(res.errMsg);
}
}
);
}
//磁盘使用率
disks() {
const data = {
hostId: this.hostId,
};
this.overAllSer.disks(data).subscribe(
(res) => {
if (res.errCode == 10000) {
this.secondOptionLeft = {
grid: {
left: '8%',
right: '0',
bottom: '1%',
containLabel: true
},
tooltip: {
trigger: 'axis',
},
xAxis: {
type: 'value',
show: false,
},
yAxis: {
triggerEvent: true,
type: 'category',
axisTick: {
show: false
},
axisLine: {
show: false,
},
// 分割线设置
splitLine: {
show: true, //显示分割线
},
data: res.data.disks.map((item) => {
return item.name;
}),
axisLabel:res.data.disks.map((item) => {
let data = item.name;
if(data.length > 5) {
data = data.substring(0, 4) + "..";
}
return data;
}),
},
color: ['#ed7a7b', '#f2f2f2'],
series: [
{
name: '已使用',
type: 'bar',
stack: '总空间',
label: {
normal: {
show: true,
position: 'insideRight',
formatter: (obj) => {
const item = (res.data.disks[obj.dataIndex].used / (1024 * 1024 * 1024)).toFixed(2);
return item + 'G';
}
}
},
itemStyle: {
normal: {
color: '#0D5DCB'
},
},
data: res.data.disks.map((item) => {
const pre = ( (item.used / item.total) * 100 ).toFixed(2); //已使用百分比
return pre;
})
},
{
name: '剩余空间',
type: 'bar',
stack: '总空间',
label: {
normal: {
show: true,
position: 'insideRight',
formatter: (obj) => {
const cut = (res.data.disks[obj.dataIndex].total - res.data.disks[obj.dataIndex].used);
const item = (cut / (1024 * 1024 * 1024)).toFixed(2);
return item + 'G';
}
}
},
itemStyle: {
normal: {
color: '#bfbfbf'
},
},
data: res.data.disks.map((item) => {
const pre = ( (item.total - item.used) / (item.total) * 100 ).toFixed(2); //剩余百分比
return pre;
})
},
]
};
let total = res.data.disks.map((item) => {
return item.total;
});
total = this.add(total);
let used = res.data.disks.map((item) => {
return item.used;
});
used = this.add(used);
const arr = [
{
name:"已使用",
value:used,
},
{
name:"未使用",
value:total,
}
];
this.secondOptionRight = {
title: {
text: '磁盘总体使用占比',
x: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
color: ['#3194e0','#bfbfbf'],
series: [
{
name: '',
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
data: arr,
itemStyle: {
normal: {
label: {
position: 'inner',
show: true,
formatter: '{b} : {c} ({d}%)'
},
labelLine: {show: true}
}
},
labelLine: {
normal: {
show: false
}
},
}
]
};
} else {
this.message.info(res.errMsg);
}
this.isSpinning = false;
}
);
}
extension(){
}
add(arr) {
let total = 0;
for (let i = 0; i < arr.length; i++) {
total += arr[i];
}
return (total / 1024 / 1024 / 1024).toFixed(2);
}
//进出口流量-SNMP
inOutInfo() {
this.inOutLoading = true;
const data = {
obj:{
hostid:Number(this.hostId)
},
pageNum:this.pageNum,
pageCount:this.pageCount
}
this.overAllSer.inOutInfoSnmp(data).subscribe(
(res) => {
if (res.errCode == 10000) {
this.dataSet = res.data.data;
this.inOutLoading = false;
this.totalNumInOut = res.data.totalNum;
}else{
this.message.info(res.errMsg);
}
}
);
}
//进出口流量 翻页
changeInoutInfo(e){
this.pageNum = e;
// this.inOutInfo();
}
//添加监测点
showCheckModal() {
this.smartCheck.showAddModal(this.hostId,this.realName,'添加监测点');
}
//编辑监测点
showEditModal(item){
this.smartCheck.showEditModal(this.hostId,item.itemid,this.realName,item.templateid,'编辑监测点');
}
//添加阈值
showAddThresholdModal(item){
this.smartThreshold.showAddModal("添加阈值",item.itemid,this.realName);
}
//编辑阈值
showEditThresholdModal(item){
this.smartThreshold.showEditModal("编辑阈值",item.itemid,this.hostId,this.realName);
}
//添加or编辑监测点 之后
getList(){
this.getCheckList();
this.findItemType();
}
handleKeyCancel() {
this.isKey = false;
}
handleKeyOk() {
this.isKey = false;
}
//监测点列表
getCheckList() {
this.getCheckStatus();
this.loading = true;
const data = {
pageNum: this.pageIndex,
pageCount: pageSize,
obj:{
applicationid: this.applicationId,
hostid: this.hostId,
priorityName:this.changeStates,
name:this.searchName
}
};
this.overAllSer.findCheckByType(data).subscribe(
(res) => {
this.checkList = res.data.data;
this.totalNum = res.data.totalNum;
this.loading = false;
}
);
}
changeState(state){
this.tabNum = 1;
this.changeStates = state;
this.getCheckList();
}
//分页
change(e) {
this.pageIndex = e;
this.getCheckList();
}
changeType(item) {
this.pageIndex = 1;
if(item.name == "全部"){
this.changeStates = null;
}
this.applicationId = item.applicationid;
this.getCheckList();
}
//监测点状态
getCheckStatus() {
this.overAllSer.findItemCount(this.hostId).subscribe(
(res) => {
if(res.errCode == 10000){
this.checkStatus = res.data;
}
}
);
}
//删除监测点
deleteCheckItem(item) {
this.modalService.confirm({
nzTitle: '删除',
nzContent: '<b style="color: red;">确认删除该监测点吗？</b>',
nzOkText: '确定',
nzOkType: 'danger',
nzOnOk: () => {
const data = {
itemids:[item.itemid],
templateid:item.templateid
};
this.overAllSer.deleteItem(data).subscribe(
(res) => {
if (res.errCode == 10000) {
this.message.success('删除成功');
this.getCheckList();
} else {
this.message.error(res.errMsg);
}
}
);
},
nzCancelText: '取消',
nzOnCancel: () => console.log('Cancel')
});
}
//图表
showImageModal(data) {
this.isGrapha = true;
this.selectGraphadata = data;
this.getGraphDate();
}
//获取图表数据
getGraphDate(){
const data = {
date: this.datePipe.transform(this.imageSelectDate,'yyyy-MM-dd'),
itemid: this.selectGraphadata.itemid
};
this.overAllSer.findGraphData(data).subscribe(
(res) => {
if (res.errCode == 10000 && res.data.length > 0) {
const result = res.data;
this.chartOptionGrapha = {
title: {
text: this.selectGraphadata.name
},
tooltip: {
trigger: 'axis'
},
xAxis: {
data: result.map((item) => {
return item.time;
})
},
yAxis: {
splitLine: {
show: false
},
axisLabel:{ //Y轴数据
formatter:(value)=>{
return value+ " " +this.selectGraphadata.units; //负数取绝对值变正数
},
},
},
dataZoom: [{
startValue: '2014-06-01'
}, {
type: 'inside'
}],
series: {
type: 'line',
data: result.map((item) => {
return item.value ;
}),
}
};
}
}
);
}
handleImageCancel() {
this.isGrapha = false;
this.chartOptionGrapha = null;
}
//监控项分类
findItemType() {
const data = {
'hostids': []
};
data.hostids.push(this.hostId);
this.overAllSer.findItemType(data).subscribe(
(res) => {
this.itemTypeList = res.data;
const data = {
applicationid:'',
name:'全部'
};
if (null!=res.data){
this.itemTypeList.unshift(data);
}
this.itemTypeValue = '';
}
);
}
//停止/启用监控项 0 启用 1停止
updateItem(itemid, status) {
const data = {
'status': status,
'itemid': itemid
};
this.modalService.confirm({
nzTitle: '',
nzContent: '<b style="color: red;">确认修改监控项状态吗？</b>',
nzOkText: '确定',
nzOkType: 'danger',
nzOnOk: () => {
this.overAllSer.itemUpdate(data).subscribe(
(res) => {
if (res.errCode == 10000) {
this.getCheckList();
}
this.message.info(res.errMsg);
}
);
},
nzCancelText: '取消',
nzOnCancel: () => console.log('Cancel')
});
}
//删除单个资源
showDeleteConfirm() {
this.modalService.confirm({
nzTitle: '删除',
nzContent: '<b style="color: red;">确认删除该资源吗？</b>',
nzOkText: '确定',
nzOkType: 'danger',
nzOnOk: () => {
const data = {
hostids:[]
};
data.hostids.push(this.hostId);
this.overAllSer.deleteHostPost(data).subscribe(
(res) => {
if (res.errCode == 10000) {
this.message.success('删除成功');
this.router.navigate(['app/main/basic']);
} else {
this.message.error(res.errMsg);
}
}
);
},
nzCancelText: '取消',
nzOnCancel: () => console.log('Cancel')
});
}
}
src/main/webapp/app/overAll/modal/database/database.component.html
View file @ 20b8da64
......@@ -3,8 +3,43 @@
<nz-col span="12">
<div>
<nz-row>
<nz-col span="12">数据库</nz-col>
<nz-col span="12">指标列表</nz-col>
<nz-col span="12">
<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>
</div>
<div>
......@@ -12,7 +47,7 @@
</div>
</nz-col>
<nz-col span="12">
<div>
<div class="host-item-title">
告警总数趋势
</div>
<div></div>
......
src/main/webapp/app/overAll/modal/server/server.component.html
View file @ 20b8da64
<div>
<nz-row>
<nz-col span="12">
<div>
关键指标
</div>
<div>
分区
</div>
<div>
<nz-row>
<nz-col span="12">基本信息</nz-col>
<nz-col span="12">指标列表</nz-col>
</nz-row>
</div>
</nz-col>
<nz-col span="12">
<div>
指标趋势
</div>
<div>
可用性历史趋势
</div>
</nz-col>
</nz-row>
<nz-row>
<nz-col span="12">
<div class="padding-10" style="height: 20%;">
<p class="host-item-title">关键指标</p>
</div>
<div class="padding-10" style="height: 40%;">
<p class="host-item-title">分区</p>
</div>
<div class="padding-10" style="height: 40%;">
<nz-row>
<nz-col span="12">
<p class="host-item-title">基本信息</p>
<div class="host-item-content">
<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-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>
src/main/webapp/app/overAll/modal/switch/switch.component.html
View file @ 20b8da64
<nz-row>
<nz-col span="12">
<div>
<p>关键指标</p>
<nz-col nzSpan="8">
<div class="padding-10" style="height: 30%;">
<p class="host-item-title">关键指标</p>
<div class="host-item-content">
</div>
</div>
<div>
<p>基本信息</p>
<div class="padding-10" style="height: 35%;">
<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>
<p>指标列表</p>
<div class="padding-10" style="height: 35%;">
<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>
</nz-col>
<nz-col span="12">
<div>
指标趋势
<nz-col nzSpan="16">
<div class="padding-10" style="height: 50%;">
<div class="host-item-title">指标趋势</div>
<div class="host-item-content">图表</div>
</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>
......
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({
selector: 'smart-switch',
templateUrl: './switch.component.html',
styles: []
selector: 'smart-switch',
templateUrl: './switch.component.html',
styles: []
})
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 {NzModalService} from 'ng-zorro-antd';
import {SERVER_API_URL, SERVER_API_URL_COMS} from '../../app.constants';
import {DatePipe} from '@angular/common';
@Injectable()
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 {
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 @@
text-align: center;
font-size: 20px;
font-weight: 500;
padding: 20px 0;
padding: 17px 0;
}
.breadcrumbs{
padding: 10px 0;
......@@ -194,4 +194,4 @@
border-radius: 4px;
padding: 2px 5px;
cursor: pointer;
}
\ No newline at end of file
}
src/main/webapp/content/css/global.css
View file @ 20b8da64
......@@ -5,7 +5,9 @@ Bootstrap tweaks
body, h1, h2, h3, h4 {
font-weight: 400;
}
p{
margin: 0;
}
body {
background: #ffffff;
}
......
src/main/webapp/content/scss/darkBlue.scss
View file @ 20b8da64
$dark:#193250;
.dark{
.container{
height: 100%;
padding: 0 16px;
background-image: url("../../content/images/dark-bg-img.png");
background-size: cover;
......@@ -17,6 +18,29 @@ $dark:#193250;
nz-header{
background: $dark;
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