Newer
Older
<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 (click)="showCheckModal()" nz-button nzType="default">添加监测点</button>
<!--<button nz-button nzType="default">编辑</button>-->
<button nz-button nzType="default">删除</button>
</div>
<div class="releative">
<div class="checkTags">
<span> <nz-tag [nzColor]="'#64ad58'"></nz-tag>{{checkStatus.enable}}</span>
<span> <nz-tag [nzColor]="'#ed9e2e'"></nz-tag>{{checkStatus.warning}}</span>
<span> <nz-tag [nzColor]="'#dd4127'"></nz-tag>{{checkStatus.error}}</span>
<span> <nz-tag [nzColor]="'#aaaaaa'"></nz-tag>{{checkStatus.disable}}</span>
</div>
<nz-tabset class="tabs-smart ">
<nz-tab nzTitle="资源详情">
<section>
资源显示名称
<div nz-row nzGutter="24">
<div nz-col nzSpan="12">
<nz-collapse>
<nz-collapse-panel [nzHeader]="panel1.name" [nzActive]="panel1.active"
[nzDisabled]="panel1.disabled">
<div nz-row>
<div class="releative" nz-col nzSpan="12">
<div echarts [options]="chartOption1" style="height: 220px;width: 300px"></div>
<div class="posiabsolutStr">
<p>{{responseTimeStr}}</p>
<p>ms</p>
</div>
<div class="releative" nz-col nzSpan="12">
<div echarts [options]="chartOption2" style="height: 220px;"></div>
<div class="posiabsolutStr">
<p>{{losedStr}}</p>
<p>%</p>
</div>
</nz-collapse-panel>
</nz-collapse>
</div>
<div nz-col nzSpan="12">
<nz-collapse>
<nz-collapse-panel [nzHeader]="panel2.name" [nzActive]="panel2.active"
[nzDisabled]="panel2.disabled">
<div nz-row>
<div class="releative" nz-col nzSpan="12">
<div echarts [options]="chartOption3" style="height: 220px;"></div>
<div class="posiabsolutStr">
<p>{{cpuUsedStr}}</p>
<p>%</p>
</div>
<div class="releative" nz-col nzSpan="12">
<div echarts [options]="chartOption4" style="height: 220px;"></div>
<div class="posiabsolutStr">
<p>{{usedStr}}</p>
<p>%</p>
</div>
</nz-collapse-panel>
</nz-collapse>
</div>
</div>
<div nz-row style="margin: 30px 0;">
<nz-collapse>
<nz-collapse-panel [nzHeader]="panel3.name" [nzActive]="panel3.active"
[nzDisabled]="panel3.disabled">
<div nz-col nzSpan="16">
<div echarts [options]="secondOptionLeft" class="demo-chart"></div>
</div>
<div nz-col nzSpan="8">
<div echarts [options]="secondOptionRight" class="demo-chart"></div>
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<div nz-row>
<nz-table #basicTable [nzData]="dataSet">
<thead>
<tr>
<th>状态</th>
<th>接口</th>
<th>进流量</th>
<th>出流量</th>
<!--<th>状态变更时间</th>-->
<th nzWidth="150px">图表</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let data of basicTable.data">
<td>{{data.state}}</td>
<td>{{data.name}}</td>
<td>{{data.in}}</td>
<td>{{data.out}}</td>
<!--<td>{{data.key5}}</td>-->
<td>图表</td>
</tr>
</tbody>
</nz-table>
</div>
</section>
</nz-tab>
<nz-tab nzTitle="监测点列表 ">
<div class="padding-15-0">
<nz-radio-group [(ngModel)]="itemTypeValue" [nzButtonStyle]="'solid'">
<label *ngFor="let item of itemTypeList" (click)="changeType(item.applicationid)" nz-radio-button nzValue="{{item.applicationid}}">{{item.name}}</label>
</nz-radio-group>
</div>
<nz-table #checkTable [nzData]="checkList" [nzFrontPagination]="false" [nzTotal]="totalNum" [nzPageIndex]="pageIndex" [nzPageSize]="pageSize" (nzPageIndexChange)="change($event)" [nzLoading]="loading">
<th nzWidth="350px">监测点名称</th>
<th nzWidth="150px">最新数据</th>
<th>最新数据时间</th>
<th>监测点分类</th>
<th>更新时间间隔</th>
<th>来源</th>
<th>图表</th>
<th>操作</th>
<td>{{data.newValue}}</td>
<td>{{data.newTime}}</td>
<td>{{data.itemType}}</td>
<td>{{data.delay}}</td>
<td>{{data.source}}</td>
<td class="cursor">
<span (click)="showImageModal(data)">图表</span>
</td>
<td class="handle cursor">
<span (click)="deleteCheckItem(data)">删除</span>
<span *ngIf="data.itemState == 0" (click)="updateItem(data.itemid,1)">停止</span>
<span *ngIf="data.itemState == 1" (click)="updateItem(data.itemid,0)">启用</span>
</td>
</nz-tab>
<nz-tab #thirdTabs nzTitle="历史告警" >
<smart-warn-list #warnList></smart-warn-list>
</nz-tab>
<nz-tab nzTitle="资产运维">
Content of Tab Pane 3
</nz-tab>
</nz-tabset>
</div>
</div>
<!--添加监测点-->
<smart-basi-check #smartCheck></smart-basi-check>
<nz-modal [nzFooter]="null" nzWidth="1080" [(nzVisible)]="isGrapha" nzTitle="" (nzOnCancel)="handleImageCancel()">
<div echarts [options]="chartOptionGrapha" style="height: 520px;width: 100%"></div>
</nz-modal>