列表明细页面

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

@@ -138,7 +138,7 @@
     </div>
 
 
-    <nz-modal [(nzVisible)]="isVisible" nzWidth="80%" nzTitle="The first Modal" (nzOnCancel)="isVisible = false" >
+    <nz-modal [(nzVisible)]="isVisible" nzWidth="80%" nzTitle="明细" (nzOnCancel)="isVisible = false" [nzFooter]="null">
         <app-path></app-path>
       </nz-modal>
     

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

@@ -1,4 +1,103 @@
-
 <!-- <app-wechart-robot [data]="wechartRobotData"></app-wechart-robot> -->
 
-<div>cdfddffff</div>
+<!-- <div>cdfddffff</div> -->
+
+<div>
+  <nz-table *ngIf="viewType === 1" #basicTable [nzData]="data" [nzPageSize]="10" nzShowSizeChanger [nzPageSize]="10" [nzPageSizeOptions]="[10, 20, 50, 100]">
+    <thead>
+      <tr>
+        <th>访问源IP</th>
+        <th>访问频次</th>
+        <th nzRight>操作</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr *ngFor="let data of basicTable.data">
+        <td>{{ data.req_ip }}</td>
+        <td><a (click)="clickFrequency(data)">{{ data.req_frequency }}</a></td>
+        <td nzRight>
+            <a (click)="clickWihteList(data)">白名单</a>
+            <nz-divider nzType="vertical"></nz-divider>
+            <a (click)="clickGreyList(data)">灰名单</a>
+          </td>
+      </tr>
+    </tbody>
+  </nz-table>
+
+  <nz-table *ngIf="viewType === 2" #basicTable [nzData]="data" [nzPageSize]="10" nzShowSizeChanger [nzPageSize]="10" [nzPageSizeOptions]="[10, 20, 50, 100]">
+    <thead>
+      <tr>
+        <th>账号</th>
+        <th>访问频次</th>
+        <th>工号</th>
+        <th nzRight>操作</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr *ngFor="let data of basicTable.data">
+        <td>{{ data.req_account }}</td>
+        <td><a (click)="clickFrequency(data)">{{ data.req_frequency }}</a></td>
+        <td>{{ data.req_jobnum }}</td>
+        <td nzRight>
+            <a (click)="clickWihteList(data)">白名单</a>
+            <nz-divider nzType="vertical"></nz-divider>
+            <a (click)="clickGreyList(data)">灰名单</a>
+          </td>
+      </tr>
+    </tbody>
+  </nz-table>
+
+  <nz-table *ngIf="viewType === 3" #basicTable [nzData]="data" [nzPageSize]="10" nzShowSizeChanger [nzPageSize]="10" [nzPageSizeOptions]="[10, 20, 50, 100]">
+    <thead>
+      <tr>
+        <th>接口地址</th>
+        <th>访问IP</th>
+        <th>访问账号</th>
+        <th>访问频次</th>
+        <th>工号</th>
+        <th nzRight>操作</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr *ngFor="let data of basicTable.data">
+        <td>{{ data.interface_addr }}</td>
+        <td>{{ data.req_ip }}</td>
+        <td>{{ data.req_account }}</td>
+        <td><a (click)="clickFrequency(data)">{{ data.req_frequency }}</a></td>
+        <td>{{ data.req_jobnum }}</td>
+        <td nzRight>
+            <a (click)="clickWihteList(data)">白名单</a>
+            <nz-divider nzType="vertical"></nz-divider>
+            <a (click)="clickGreyList(data)">灰名单</a>
+          </td>
+      </tr>
+    </tbody>
+  </nz-table>
+
+  <nz-table *ngIf="viewType === 4" #basicTable [nzData]="data" [nzPageSize]="10" nzShowSizeChanger [nzPageSize]="10" [nzPageSizeOptions]="[10, 20, 50, 100]">
+    <thead>
+      <tr>
+        <th>菜单名称</th>
+        <th>访问IP</th>
+        <th>访问账号</th>
+        <th>访问频次</th>
+        <th>工号</th>
+        <th nzRight>操作</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr *ngFor="let data of basicTable.data">
+        <td>{{ data.menu_name }}</td>
+        <td>{{ data.req_ip }}</td>
+        <td>{{ data.req_account }}</td>
+        <td><a (click)="clickFrequency(data)">{{ data.req_frequency }}</a></td>
+        <td>{{ data.req_jobnum }}</td>
+        <td nzRight>
+            <a (click)="clickWihteList(data)">白名单</a>
+            <nz-divider nzType="vertical"></nz-divider>
+            <a (click)="clickGreyList(data)">灰名单</a>
+          </td>
+      </tr>
+    </tbody>
+  </nz-table>
+</div>

src/app/routes/config/layout/manage/path/path.component.ts

@@ -10,12 +10,11 @@ import { NoticeService } from '../../../service/https/notice.service';
 export class PathComponent implements OnInit {
   @Input() datas: any;
   data;
-  mailData: any;
+  viewType = 'ip';
-  messageData: any;
+  ipData: [];
-  qywechatData: any;
+  accountData: [];
-  dingtalkData: any;
+  interfaceData: [];
-  wechartRobotData: any;
+  menuData: [];
-  dingdingRobotData: any;
 
   constructor(
     private noticeService: NoticeService,
@@ -23,47 +22,37 @@ export class PathComponent implements OnInit {
   ) {}
 
   ngOnInit() {
-    this.queryData();
+    // this.queryData();
+    console.log('11111');
+    const jsonStr = '{"type":3,"http://190.89.233.2:8909/getpublicconfig":[{"req_ip":"192.156.3.12","interface_addr":"http://190.89.233.2:8909/getpublicconfig","req_jobnum":43327,"req_frequency":43,"req_account":"liuhr"},{"req_ip":"192.156.3.12","interface_addr":"http://190.89.233.2:8909/getpublicconfig","req_jobnum":43328,"req_frequency":44,"req_account":"sunxq01"},{"req_ip":"192.156.3.18","interface_addr":"http://190.89.233.2:8909/getpublicconfig","req_jobnum":65341,"req_frequency":45,"req_account":"shicl"},{"req_ip":"192.106.3.33","interface_addr":"http://190.89.233.2:8909/getpublicconfig","req_jobnum":65342,"req_frequency":46,"req_account":"gongxs"},{"req_ip":"192.106.3.34","interface_addr":"http://190.89.233.2:8909/getpublicconfig","req_jobnum":65343,"req_frequency":47,"req_account":"sunzs"}]}'
+    if (this.datas == null) {
+      this.datas = JSON.parse(jsonStr);
+    }
+    this.parseData(this.datas);
   }
 
-  queryData() {
+  parseData(datas: any) {
-    this.noticeService.queryConfig().subscribe(
+    for (const dataKey in datas) {
-      resp => {
+      if (datas.hasOwnProperty(dataKey)) {
-        if (resp.status === 200) {
+        if (dataKey === 'type') {
-          // console.log(resp.data);
+          this.viewType = datas[dataKey];
-          this.data = resp.data;
-          this.processData(this.data);
         } else {
-          this.message.error(resp.msg);
+          this.data = datas[dataKey];
         }
-      },
-      error => {
-        this.message.error('服务器错误');
       }
-    );
+    }
   }
 
-  processData(allData) {
+  clickWihteList(data) {
-    allData.forEach((item) => {
+    alert("点击白名单");
-      if (item.type === 'mail') {
+  }
-        this.mailData = item;
+
-      }
+  clickGreyList(data) {
-      if (item.type === 'message') {
+    alert("点击灰名单");
-        this.messageData = item;
+  }
-      }
+
-      if (item.type === 'qywechat') {
+  clickFrequency(data) {
-        this.qywechatData = item;
+    alert("点击超链接");
-      }
-      if (item.type === 'dingtalk') {
-        this.dingtalkData = item;
-      }
-      if (item.type === 'webhook') {
-        this.wechartRobotData = item;
-      }
-      if (item.type === 'robot') {
-        this.dingdingRobotData = item;
-      }
-    });
   }
 
 }