
<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 >
        <a routerLink="../networkCheck">网站监测</a>
      </nz-breadcrumb-item>
      <nz-breadcrumb-item>
        {{webName}}
      </nz-breadcrumb-item>
    </nz-breadcrumb>
  </div>
  <div nz-col nzSpan="8" class="text-right">
    <button (click)="ngOnInit()" nz-button nzType="primary"><i class="anticon anticon-sync"></i></button>
    <smart-full-screen></smart-full-screen>
  </div>
</div>
<div class="tabset">
  <div class="tabset-btn">
    <button (click)="editBasicModal()" nz-button nzType="default">编辑</button>
    <button (click)="showDeleteConfirm()" nz-button nzType="default">删除</button>
  </div>
  <div class="releative">
    <nz-tabset  class="tabs-smart" [nzType]="'card'">
      <nz-tab nzTitle="监测信息">
        <section>
          <div nz-row nzGutter="24">
            <div nz-col nzSpan="12">
              <nz-card nzTitle="当前状态" [nzExtra]="extraTemplate">
                <nz-table #basicTable [nzData]="nowStatus" [nzShowPagination]="false">
                  <thead>
                  <tr>
                    <th>No.</th>
                    <th>步骤</th>
                    <th>速度</th>
                    <th>响应时间</th>
                    <th>响应代码</th>
                  </tr>
                  </thead>
                  <tbody>
                  <tr *ngFor="let data of nowStatus">
                    <td>{{data.no}}</td>
                    <td>{{data.name}}</td>
                    <td>{{data.download}}</td>
                    <td>{{data.response}}</td>
                    <td>{{data.response_code}}</td>
                    <td></td>
                  </tr>
                  <tr>
                    <td></td>
                    <td>总计</td>
                    <td></td>
                    <td>{{totalNum}}</td>
                    <td></td>
                    <td></td>
                  </tr>
                  </tbody>
                </nz-table>
              </nz-card>
              <ng-template #extraTemplate>
                <!--<span>最近一次检查时间</span><span>2013123</span>-->
              </ng-template>
            </div>
            <div nz-col nzSpan="12">
              <nz-card nzTitle="阈值设定">
                <nz-table #basicTable [nzData]="triggerList" [nzShowPagination]="false">
                  <thead>
                  <tr>
                    <th>级别</th>
                    <th>步骤</th>
                    <th>阈值信息</th>
                  </tr>
                  </thead>
                  <tbody>
                  <tr *ngFor="let data of triggerList">
                    <td>
                      <span *ngIf="data.priority ==2  ">故障</span>
                      <span *ngIf="data.priority ==4  ">危险</span>
                    </td>
                    <td>{{data.name}}</td>
                    <td>{{data.expression}}</td>
                  </tr>
                  </tbody>
                </nz-table>
              </nz-card>
            </div>
          </div>
          <div  style="margin: 30px 0;">
            <div nz-row>
              <div nz-col [nzSpan]="3">
                <span>监测数据图表</span>
              </div>
              <div nz-col [nzSpan]="8">
                <nz-radio-group style="width: 100%;" [(ngModel)]="timeType" (ngModelChange)="changeType()" 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 nz-col nzSpan="8" *ngIf="timeType == '5'">
                <nz-date-picker nzFormat="yyyy-MM-dd"
                        [(ngModel)]="obj.startTime"
                        nzPlaceHolder="开始时间"
                ></nz-date-picker>
                <nz-date-picker
                        nzFormat="yyyy-MM-dd"
                        [(ngModel)]="obj.endTime"
                        nzPlaceHolder="结束时间"
                        (ngModelChange)="findChart()"
                ></nz-date-picker>
              </div>
            </div>
            <nz-spin [nzSpinning]="isSpinning" [nzDelay]="500">
              <div nz-row class="chart-div">
                <div nz-col [nzSpan]="6" >
                      <div #chartSpeedLeft class="chart-left" *ngFor="let item of speed,let i  = index;">
                        <p class="tag-form"> <nz-tag [nzColor]="colorArr[i]"></nz-tag> <span>{{item.name}}</span> </p>
                        <p>平均值   {{item.average}}</p>
                        <p>最大值   {{item.max}}</p>
                        <p>最小值   {{item.min}}</p>
                      </div>
                </div>
                <div nz-col [nzSpan]="18">
                  <div  echarts [options]="chartSpeed" style="height: 250px;width: 100%;"></div>
                </div>
              </div>
              <div nz-row class="chart-div">
                <div nz-col [nzSpan]="6" >
                    <div #chartTimeLeft class="chart-left" *ngFor="let item of time,let i  = index;">
                      <p class="tag-form"> <nz-tag [nzColor]="colorArr[i]"></nz-tag> <span>{{item.name}}</span> </p>
                      <p>平均值   {{(item.average)}}</p>
                      <p>最大值   {{(item.max)}}</p>
                      <p>最小值   {{(item.min)}}</p>
                    </div>
                </div>
                <div nz-col [nzSpan]="18">
                  <div echarts [options]="chartTime" style="height: 250px;width: 100%;"></div>
                </div>
              </div>
            </nz-spin>
          </div>
        </section>
      </nz-tab>
      <nz-tab nzTitle="历史告警 ">
        <nz-table #nzTable [nzData]="alarmList">
          <thead>
          <tr>
            <th nzWidth="20%">产生时间</th>
            <th>级别</th>
            <th nzWidth="25%">告警信息</th>
            <th>步骤名称</th>
            <th>持续时间</th>
            <th>状态</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 tag-form">
              <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>{{data.description}}</td>
            <td>{{data.equipmentType}}</td>
            <td>{{data.continuedTime}}</td>
            <td>
              <ng-container *ngIf="data.r_clock">已恢复</ng-container>
              <ng-container *ngIf="!data.r_clock">告警中</ng-container>
            </td>
          </tr>
          </tbody>
        </nz-table>
      </nz-tab>
    </nz-tabset>
  </div>
</div>
<!--添加网站-->
<smart-website #smartWebsite></smart-website>
