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

<div  class="container">
  <h1>接口访问统计</h1>
    <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  [(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 class="table-container" style="margin-top: 50px;height:100vh;">
      <div style="display: flex;justify-content: right;"><button  nz-button [hidden]="exportIsVisable" (click)="exportExcel()">导出</button></div>
      
        <nz-table *ngIf="tableisShow === '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><a (click)="showModel({type: 1, key: data.company})">{{data.company}}</a></td>
                <td>{{ data.req_frequency }}</td>
                <td>{{ data.frequency_rate| percent: '1.1-2' }}</td>
                <td>{{ data.ip_count }}</td>
                <td>{{ data.ip_rate| percent: '1.1-2' }}</td>
                <td>{{ data.ip_avg| number: '1.2-2' }}</td>
                <td>{{ data.trend| percent: '1.1-2' }}</td>
              </tr>
            </tbody>
          </nz-table>

          <nz-table *ngIf="tableisShow === '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><a (click)="showModel({type: 2, key: data.company})">{{data.company}}</a></td>
                <td>{{ data.req_frequency }}</td>
                <td>{{ data.frequency_rate| percent: '1.1-2' }}</td>
                <td>{{ data.account_count }}</td>
                <td>{{ data.account_rate| percent: '1.1-2' }}</td>
                <td>{{ data.account_avg| number: '1.2-2' }}</td>
                <td>{{ data.trend| percent: '1.1-2'  }}</td>
              </tr>
            </tbody>
          </nz-table>

          <nz-table *ngIf="tableisShow === '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><a (click)="showModel({type: 3, key: data.interface_addr})">{{ data.interface_addr }}</a></td>
                <td>{{ data.req_frequency }}</td>
                <td>{{ data.frequency_rate | percent: '1.1-2' }}</td>
                <td>{{ data.frequency_avg| number: '1.2-2' }}</td>
                <td>{{ data.trend| percent: '1.1-2'  }}</td>
              </tr>
            </tbody>
          </nz-table>

          <nz-table *ngIf="tableisShow === '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><a (click)="showModel({type: 4, key: data.menu_name})">{{ data.menu_name }}</a></td>
                <td>{{ data.req_frequency }}</td>
                <td>{{ data.frequency_rate| percent: '1.1-2'  }}</td>
                <td>{{ data.frequency_avg| number: '1.2-2'}}</td>
                <td>{{ data.trend| percent: '1.1-2'  }}</td>
              </tr>
            </tbody>
          </nz-table>
    </div>

    <app-process [visible]="submitLoading" (onCancel)="cancelSearch()">
    </app-process>

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

</div>