src/app/apm/manage/setting/setting.component.ts
| selector | app-setting |
| styleUrls | ./setting.component.scss |
| templateUrl | ./setting.component.html |
Methods |
constructor()
|
| ngOnInit |
ngOnInit()
|
|
Returns :
void
|
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-setting',
templateUrl: './setting.component.html',
styleUrls: ['./setting.component.scss']
})
export class SettingComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
<mat-tab-group class="s mat-elevation-z4">
<mat-tab label="部署说明">
<div>APPID：FYz34dy1546672920722</div>
<mat-slide-toggle>数据接收</mat-slide-toggle>
<div>使用SDK部署方式</div>
</mat-tab>
<mat-tab label="阈值设置">
<form class="p-24">
<div fxLayout="row" fxLayoutAlign="center center">
<label>应用名称：</label>
<mat-form-field fxFlex> <input matInput /> </mat-form-field>
</div>
<div fxLayout="row" fxLayoutAlign="center center">
<label>应用域名：</label>
<mat-form-field fxFlex> <input matInput /> </mat-form-field>
</div>
<div fxLayout="row" fxLayoutAlign="center center">
<label>页面慢加载阀值：</label>
<mat-form-field fxFlex> <input matInput /> </mat-form-field>
</div>
<div fxLayout="row" fxLayoutAlign="center center">
<label>AJAX慢加载阀值：</label>
<mat-form-field fxFlex> <input matInput /> </mat-form-field>
</div>
<div fxLayout="row" fxLayoutAlign="center center">
<label>JS慢加载阀值：</label>
<mat-form-field fxFlex> <input matInput /> </mat-form-field>
</div>
<div fxLayout="row" fxLayoutAlign="center center">
<label>CSS慢加载阀值：</label>
<mat-form-field fxFlex> <input matInput /> </mat-form-field>
</div>
<div fxLayout="row" fxLayoutAlign="center center">
<label>IMG慢加载阀值：</label>
<mat-form-field fxFlex> <input matInput /> </mat-form-field>
</div>
<button mat-raised-button color="primary" type="submit">更新</button>
</form>
</mat-tab>
<mat-tab label="统计设置">
<form class="p-24">
<div><mat-slide-toggle>页面性能指标</mat-slide-toggle></div>
<div><mat-slide-toggle>AJAX性能指标</mat-slide-toggle></div>
<div><mat-slide-toggle>资源性能指标</mat-slide-toggle></div>
<div><mat-slide-toggle>存储访问者系统信息</mat-slide-toggle></div>
<div><mat-slide-toggle>错误信息</mat-slide-toggle></div>
</form>
</mat-tab>
<mat-tab label="日报设置">
<mat-slide-toggle>发送日报</mat-slide-toggle>
</mat-tab>
<mat-tab label="性能优化"> </mat-tab>
</mat-tab-group>
./setting.component.scss
:host {
display: block;
margin: 24px;
}