[完善]完善接收预警通知

src/app/pages/home/home.component.html

@@ -64,15 +64,15 @@
 <ng-template #warning let-item="data">
     <div class="topbox">
         <div>
-            <img src="../assets/images/AnXinQQ.jpg" alt="">
+            <img src="../assets/images/warning.png" alt="">
         </div>
         <div class="text">
             <span class="name">您有一条新的预警提醒!</span>
-            <span class="details">{{item.id}}</span>
+            <span class="details">{{item.notification.data.properties.ViolationName}}</span>
         </div>
     </div>
     <div class="btnbox">
-        <div class="look">
+        <div class="look" (click)="look(item)">
             查看
         </div>
         <div class="lose" (click)="close(item)">

src/app/pages/home/home.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, ViewChild, TemplateRef } from '@angular/core';
+import { Component, OnInit, ViewChild, TemplateRef, ViewContainerRef } from '@angular/core';
 import { Router, NavigationEnd, ActivatedRoute } from '@angular/router';
 import { Title } from '@angular/platform-browser'
 import { filter } from 'rxjs/operators';
@@ -8,6 +8,9 @@ import { CookieService } from 'ngx-cookie-service';
 import { NzMessageService } from 'ng-zorro-antd/message';
 import { SignalRAspNetCoreHelper } from '../../../shared/helpers/SignalRAspNetCoreHelper';
 import { NzNotificationService } from 'ng-zorro-antd/notification';
+import { GetOutOfLineDetailsComponent } from '../today-warning/get-out-of-line-details/get-out-of-line-details.component';
+import { NzModalService } from 'ng-zorro-antd/modal';
+import { HttpClient } from '@angular/common/http';
 declare var abp: any
 
 @Component({
@@ -17,8 +20,8 @@ declare var abp: any
 })
 export class HomeComponent implements OnInit {
   @ViewChild('warning', { static: false }) template?: TemplateRef<{}>;
-  constructor(private router: Router, private navChangeService: NavChangeService, public token: CacheTokenService,
-    private cookieService: CookieService, private message: NzMessageService, private notificationService: NzNotificationService) { }
+  constructor(private http: HttpClient, private router: Router, private navChangeService: NavChangeService, public token: CacheTokenService,
+    private cookieService: CookieService, private message: NzMessageService, private notificationService: NzNotificationService, private modal: NzModalService, private viewContainerRef: ViewContainerRef) { }
 
   isGasStationNav: boolean
   isGasStation: boolean
@@ -89,26 +92,60 @@ export class HomeComponent implements OnInit {
       this.receiptOfNotification(userNotification)
     });
   }
-  messageId=[]
+  messageId = []
   receiptOfNotification(userNotification) {
     let obj = {
-      id:'xxx',
-      messageId:this.notificationService.template(this.template!, {nzPlacement: 'bottomRight', nzClass: 'receiptOfNotification', nzDuration: 0, nzData: userNotification}).messageId
+      id: userNotification.notification.entityId,
+      messageId: this.notificationService.template(this.template!, { nzPlacement: 'bottomRight', nzClass: 'receiptOfNotification', nzDuration: 0, nzData: userNotification }).messageId
     }
     this.messageId.push(obj)
-    console.log(99999,this.messageId)
   }
 
+  look(item) {
+    let params = {
+      id: item.notification.entityId
+    }
+    this.http.get('/api/services/app/ViolateRecord/Get', {
+      params: params
+    }).subscribe((data: any) => {
+      const modal = this.modal.create({
+        nzContent: GetOutOfLineDetailsComponent,
+        nzViewContainerRef: this.viewContainerRef,
+        nzWidth: 1200,
+        nzBodyStyle: {
+          'border': '1px solid #6d9cc7',
+          'border-radius': '0px',
+          'padding': '0px',
+          'box-shadow': '0 0 8px 0 #fff',
+          'background': '#000D21',
+        },
+        nzComponentParams: {
+          data: data.result
+        },
+        nzFooter: null,
+        nzOnOk: async () => {
+
+        }
+      });
+      const instance = modal.getContentComponent();
+      this.messageId.forEach((element) => {
+        if (element.id == item.notification.entityId) {
+          this.notificationService.remove(element.messageId)
+        }
+      })
+    })
 
-  close(item){
-    this.messageId.forEach((element)=>{
-      if(element.id == 'xxx'){
+  }
+  close(item) {
+    // console.log(item)
+    this.messageId.forEach((element) => {
+      if (element.id == item.notification.entityId) {
         this.notificationService.remove(element.messageId)
       }
     })
   }
 
-  
+
   ngOnDestroy() {
     abp.signalr.disconnect()
   }

src/theme.less

@@ -78,23 +78,27 @@
     flex: 1;
     display: flex;
     align-items: center;
+
     img {
-      max-width:70px;
-      max-height: 62px;
+      width: 90px;
+      height: 80px;
+      margin-left: 10px;
+      margin-right: 14px;
     }
+
     .text {
       display: flex;
       flex-direction: column;
       justify-content: center;
-      span{
-        // display: inline-block;
-        margin: 6px 0;
-      }
-      .name{
+
+      .name {
         font-size: 16px;
         color: #ffaaaa;
+        margin-top: 4px;
+        margin-bottom: 6px;
       }
-      .details{
+
+      .details {
         font-size: 14px;
         color: white;
       }
@@ -108,7 +112,8 @@
     justify-content: center;
     align-items: center;
     margin: 12px 0;
-    div{
+
+    div {
       width: 80px;
       height: 32px;
       line-height: 32px;
@@ -185,7 +190,8 @@
 #recordsbox,
 #warningbox,
 #warningboxadmin,
-#addequipment,#stationPlanBox {
+#addequipment,
+#stationPlanBox {
   ::-webkit-input-placeholder {
     /* WebKit browsers */
     color: #345d85;
@@ -286,7 +292,7 @@
 
 
 #stationPlanBox {
-  
+
   .ant-tree .ant-tree-node-content-wrapper:hover,
   .ant-tree .ant-tree-node-content-wrapper.ant-tree-node-selected {
     background: linear-gradient(90deg, rgba(0, 13, 33, 0) 0%, #2399FF 50%, rgba(0, 13, 33, 0) 100%);
@@ -350,20 +356,25 @@
     padding: 0;
     color: #91CCFF;
   }
+
   .look {
     color: #36A2FF;
     cursor: pointer;
   }
-  .ant-table-measure-now{
+
+  .ant-table-measure-now {
     display: none;
   }
-  .ant-empty-description{
+
+  .ant-empty-description {
     color: #23D9FF;
   }
-  .ant-table-tbody > tr > td{
+
+  .ant-table-tbody>tr>td {
     border-bottom: none;
   }
-  .ant-table-tbody > tr > td:hover{
+
+  .ant-table-tbody>tr>td:hover {
     background: none;
   }
 }