hbyd_ueba_fe/src/app/routes/config/layout/manage/manage.component.html

<div  class="container">
    <div class="seach">
        <div class="form-item">
            <div class="form-label">时间选择:</div>
            <nz-range-picker [nzShowTime]="true" [nzFormat]="dateFormat"  [(ngModel)]="dateRange"></nz-range-picker>
        </div>
       
        <div class="form-item" >
            <div class="form-label">统计维度:</div>
            <nz-select (ngModelChange)="selectValChange()" [(ngModel)]="dimension">
                <nz-option nzValue="1" nzLabel="IP"></nz-option>
                <nz-option nzValue="2" nzLabel="账号"></nz-option>
                <nz-option nzValue="3" nzLabel="接口" ></nz-option>
                <nz-option nzValue="4" nzLabel="菜单" ></nz-option>
              </nz-select>
        </div>
        
        <div style="margin-left: 50px;">
            <button nz-button (click)="onSubmit()" nzType="primary">查询</button>
        </div>
    </div>


    <div style="margin-top: 50px;">
        <nz-table *ngIf="dimension === '1'" #basicTable [nzData]="listOfData">
            <thead>
              <tr>
                <th>归属单位</th>
                <th>访问频次</th>
                <th>频次占比</th>
                <th>IP计数</th>
                <th>IP占比</th>
                <th>IP均值</th>
                <th>访问趋势</th>
              </tr>
            </thead>
            <tbody>
              <tr *ngFor="let data of basicTable.data">
                <!-- "company": "孝感分公司",
                "req_frequency": 122,
                "frequency_rate": 0.2,
                "ip_count": 323,
                "ip_reat": 0.3,
                "ip_avg": 0.43,
                "trend": 0.3 -->
                <td>{{ data.company }}</td>
                <td>{{ data.req_frequency }}</td>
                <td>{{ data.frequency_rate }}</td>
                <td>{{ data.ip_count }}</td>
                <td>{{ data.ip_reat }}</td>
                <td>{{ data.ip_avg }}</td>
                <td>{{ data.trend }}</td>
              </tr>
            </tbody>
          </nz-table>

          <nz-table *ngIf="dimension === '2'" #basicTable [nzData]="listOfData">
            <thead>
              <tr>
                <th>归属单位</th>
                <th>访问频次</th>
                <th>频次占比</th>
                <th>账号计数</th>
                <th>账号占比</th>
                <th>账号均值</th>
                <th>访问趋势</th>
              </tr>
            </thead>
            <tbody>
              <tr *ngFor="let data of basicTable.data">
                <!-- "company": "湖北公司",
                "req_frequency": 122,
                "frequency_rate": 0.2,
                "account_count": 323,
                "account_reat": 0.3,
                "account_avg": 0.43,
                "trend": 0.3 -->
                <td>{{ data.company }}</td>
                <td>{{ data.req_frequency }}</td>
                <td>{{ data.frequency_rate }}</td>
                <td>{{ data.account_count }}</td>
                <td>{{ data.account_reat }}</td>
                <td>{{ data.account_avg }}</td>
                <td>{{ data.trend }}</td>
              </tr>
            </tbody>
          </nz-table>

          <nz-table *ngIf="dimension === '3'" #basicTable [nzData]="listOfData">
            <thead>
              <tr>
                <th>接口地址</th>
                <th>访问频次</th>
                <th>频次占比</th>
                <th>频次均值</th>
                <th>访问趋势</th>
              </tr>
            </thead>
            <tbody>
              <tr *ngFor="let data of basicTable.data">
                <!-- "interface_addr": "http://190.89.233.2:8909/getUser",
                "req_frequency": 212,
                "frequency_rate": 0.160727824109174,
                "frequency_avg": 0,
                "trend": 0.07 -->
                <td>{{ data.interface_addr }}</td>
                <td>{{ data.req_frequency }}</td>
                <td>{{ data.frequency_avg }}</td>
                <td>{{ data.trend }}</td>
              </tr>
            </tbody>
          </nz-table>

          <nz-table *ngIf="dimension === '4'" #basicTable [nzData]="listOfData">
            <thead>
              <tr>
                <th>菜单名称</th>
                <th>访问频次</th>
                <th>频次占比</th>
                <th>频次均值</th>
                <th>访问趋势</th>
              </tr>
            </thead>
            <tbody>
              <tr *ngFor="let data of basicTable.data">
                <!-- "menu_name": "菜单1",
                "req_frequency": 333,
                "frequency_rate": 0.263449367088608,
                "frequency_avg": 111,
                "trend": 0.09 -->
                <td>{{ data.menu_name }}</td>
                <td>{{ data.req_frequency }}</td>
                <td>{{ data.frequency_avg }}</td>
                <td>{{ data.trend }}</td>
              </tr>
            </tbody>
          </nz-table>
    </div>


    <nz-modal [(nzVisible)]="isVisible" nzWidth="80%" nzTitle="明细" (nzOnCancel)="isVisible = false" [nzFooter]="null">
        <app-path></app-path>
      </nz-modal>
    
</div>