Skip to content

S
smart
Commit 5650d831 authored by wangqinghua's avatar wangqinghua
Browse files
Options

网站监测

parent e5dbde52
Hide whitespace changes
Inline Side-by-side
Showing with 236 additions and 11 deletions
src/main/webapp/app/app.route.ts
View file @ 5650d831
......@@ -18,6 +18,7 @@ import {SendSetComponent} from './alarm/send-set/send-set.component';
import {NeTopologyComponent} from './netTopology/ne-topology/ne-topology.component';
import {FlowTrendComponent} from './netTopology/flow-trend/flow-trend.component';
import {NetworkCheckComponent} from './overAll/network-check/network-check.component';
import {NetworkDetailComponent} from './overAll/network-check/network-detail/network-detail.component';
export const route: Routes = [
{path: '', redirectTo: 'app/main', pathMatch: 'full'},
......@@ -31,6 +32,7 @@ export const route: Routes = [
{path: 'basic', component: BasicComponent},
{path: 'basic-detail', component: BasicDetailComponent},
{path: 'networkCheck', component: NetworkCheckComponent},
{path: 'network-detail', component: NetworkDetailComponent},
{path: 'audit', component: AuditComponent},
{path: 'examine', component: ExamineComponent},
{path: 'group', component: GroupComponent},
......
src/main/webapp/app/overAll/network-check/network-check.component.ts
View file @ 5650d831
......@@ -2,6 +2,7 @@ import {Component, OnInit, ViewChild} from '@angular/core';
import {OverAllService} from '../overAll.service';
import {pageSize} from '../../app.constants';
import {WebsiteComponent} from '../../modal/website/website.component';
import {Router} from '@angular/router';
@Component({
selector: 'smart-network-check',
......@@ -28,7 +29,7 @@ export class NetworkCheckComponent implements OnInit {
gray: ''
};
constructor(private overAllSer: OverAllService) {
constructor(private overAllSer: OverAllService,private router:Router) {
}
ngOnInit() {
......@@ -55,6 +56,15 @@ export class NetworkCheckComponent implements OnInit {
);
}
//详情
goDetail(item){
this.router.navigate(['app/main/network-detail'],{
queryParams:{
httptestid:item.httptestid,
}
})
}
//监测状态
getCheckStatus() {
......
src/main/webapp/app/overAll/network-check/network-detail/network-detail.component.html
View file @ 5650d831
<p>
network-detail works!
</p>
<div nz-row class="breadcrumbs">
<div nz-col nzSpan="16">
<nz-breadcrumb class="padding-8-0">
<nz-breadcrumb-item>
首页
</nz-breadcrumb-item>
<nz-breadcrumb-item>
<a>综合监控</a>
</nz-breadcrumb-item>
<nz-breadcrumb-item>
网站监测
</nz-breadcrumb-item>
<nz-breadcrumb-item>
网站名称
</nz-breadcrumb-item>
</nz-breadcrumb>
</div>
<div nz-col nzSpan="8" class="text-right">
<button nz-button nzType="primary"><i class="anticon anticon-sync"></i></button>
<button nz-button nzType="primary"><i class="anticon anticon-arrows-alt"></i></button>
</div>
</div>
<div class="tabset">
<div class="tabset-btn">
<button nz-button nzType="default">编辑</button>
<button nz-button nzType="default">删除</button>
</div>
<div class="releative">
<nz-tabset class="tabs-smart ">
<nz-tab nzTitle="监测信息">
<section>
<div nz-row nzGutter="24">
<div nz-col nzSpan="12">
<div>
<div>
<span>当前状态</span><span>最近一次检查时间</span><span>2013123</span>
</div>
<div nz-row nzGutter="24">
<div nz-col nzSpan="4">状态</div>
<div nz-col nzSpan="4">No.</div>
<div nz-col nzSpan="4">步骤</div>
<div nz-col nzSpan="4">速度</div>
<div nz-col nzSpan="4">响应时间</div>
<div nz-col nzSpan="4">响应代码</div>
</div>
<ng-container *ngFor="let item of nowStatus">
<div nz-row nzGutter="24">
<div nz-col nzSpan="4">{{item.status}}</div>
<div nz-col nzSpan="4">{{item.no}}</div>
<div nz-col nzSpan="4">{{item.name}}</div>
<div nz-col nzSpan="4">{{item.download}}</div>
<div nz-col nzSpan="4">{{item.response}}</div>
<div nz-col nzSpan="4">{{item.response_code}}</div>
</div>
</ng-container>
<div nz-row nzGutter="24">
<div nz-col nzSpan="8">总计</div>
<div nz-col nzSpan="16">No.</div>
</div>
</div>
</div>
<div nz-col nzSpan="12">
<div>阈值设定</div>
<div nz-row nzGutter="24">
<div nz-col nzSpan="4">级别</div>
<div nz-col nzSpan="4">步骤</div>
<div nz-col nzSpan="4">阈值信息</div>
</div>
<ng-container>
<div nz-row nzGutter="24" *ngFor="let item of triggerList">
<div nz-col nzSpan="4">
<span *ngIf="item.priority ==2 ">故障</span>
<span *ngIf="item.priority ==4 ">危险</span>
</div>
<div nz-col nzSpan="4">{{item.name}}</div>
<div nz-col nzSpan="4">{{item.expression}}</div>
</div>
</ng-container>
</div>
</div>
<div nz-row style="margin: 30px 0;">
<div>
<span>监测数据图表</span>
<nz-radio-group style="width: 100%;" [nzButtonStyle]="'solid'">
<label nz-radio-button nzValue="1">今天</label>
<label nz-radio-button nzValue="2">昨天</label>
<label nz-radio-button nzValue="3">三天</label>
<label nz-radio-button nzValue="4">一周</label>
<label nz-radio-button nzValue="5">自定义</label>
</nz-radio-group>
</div>
<div>速度</div>
<div>响应时间</div>
</div>
</section>
</nz-tab>
<nz-tab nzTitle="历史告警 ">
<nz-table #nzTable [nzData]="alarmList">
<thead>
<tr>
<th nzShowSort>产生时间</th>
<th>级别</th>
<th nzWidth="15%">告警信息</th>
<th>步骤名称</th>
<th>持续时间</th>
<th>产生事件</th>
<th>状态</th>
<th style="text-align: center">发送记录</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let data of nzTable.data">
<td class="table-timeline">
<nz-timeline-item>{{data.clock | date:'yyyy-MM-dd HH:MM:ss'}}</nz-timeline-item>
</td>
<td class="round-tag">
<nz-tag *ngIf="data.priority == 4 || data.priority == 5" [nzColor]="'#fc0d1b'"></nz-tag>
<nz-tag *ngIf="data.priority == 2 || data.priority == 3" [nzColor]="'#fd9827'"></nz-tag>
</td>
<td>名称</td>
<td>{{data.description}}</td>
<td>{{data.equipmentType}}</td>
<td>{{data.groupname}}</td>
<td>{{data.continuedTime}}</td>
<td>{{data.eventid}}</td>
<td>
<ng-container *ngIf="data.r_clock">已恢复</ng-container>
<ng-container *ngIf="!data.r_clock">告警中</ng-container>
</td>
<td class="list-icon" (click)="showLog(data)"><i class="anticon anticon-profile"></i></td>
</tr>
</tbody>
</nz-table>
</nz-tab>
</nz-tabset>
</div>
</div>
src/main/webapp/app/overAll/network-check/network-detail/network-detail.component.ts
View file @ 5650d831
import { Component, OnInit } from '@angular/core';
import {Component, OnInit} from '@angular/core';
import {OverAllService} from '../../overAll.service';
import {ActivatedRoute} from '@angular/router';
import {NzMessageService} from 'ng-zorro-antd';
@Component({
selector: 'smart-network-detail',
templateUrl: './network-detail.component.html',
styles: []
selector: 'smart-network-detail',
templateUrl: './network-detail.component.html',
styles: []
})
export class NetworkDetailComponent implements OnInit {
constructor() { }
httptestid; //网站ID
alarmList;
ngOnInit() {
}
nowStatus;
triggerList;
chart;
constructor(private overAllSer: OverAllService, private routerInfo: ActivatedRoute,
private message:NzMessageService) {
}
ngOnInit() {
this.routerInfo.queryParams.subscribe(
(queryParams) => {
this.httptestid = queryParams.httptestid;
}
);
this.findAlertList();
this.findTrigger();
this.findChart();
this.getNowStatus();
}
//历史告警
findAlertList() {
const data = {
httptestid: this.httptestid
};
this.overAllSer.findAlert(data).subscribe(
(res) => {
if (res.errCode == 10000) {
this.alarmList = res.data.data;
}
}
);
}
//当前状态
getNowStatus() {
this.overAllSer.findCurrentState(this.httptestid).subscribe(
(res) => {
if(res.errCode == 10000){
this.nowStatus = res.data;
}
}
);
}
//阈值设定
findTrigger() {
this.overAllSer.findTrigger(this.httptestid).subscribe(
(res) => {
if(res.errCode == 10000){
this.triggerList = res.data;
}else{
this.message.info(res.errMsg);
}
}
);
}
//监测图表
findChart() {
const data = {
startTime: '',
limit: '',
httptestid: this.httptestid
};
this.overAllSer.findChart(data).subscribe(
(res) => {
}
);
}
}
src/main/webapp/app/overAll/overAll.service.ts
View file @ 5650d831
......@@ -274,4 +274,9 @@ export class OverAllService {
findTrigger(params): Observable<any>{
return this.http.get(SERVER_API_URL + '/webscenario/find-trigger/' +params);
}
//网站监测历史告警
findAlert(data): Observable<any>{
return this.http.post(SERVER_API_URL + '/webscenario/findAlert' ,data);
}
}
\ No newline at end of file
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