[完善]完善聊天框

src/app/home/commonComponents/chat-window/chat-window.component.html

@@ -1,11 +1,14 @@
 <div class="chatbox" ngDraggable [preventDefaultEvent]="true" [handle]="dragheader">
     <div class="titlebox">
-        <span class="titlename" #dragheader>
-            历下区A消防救援站群聊(3)
-        </span>
+        <div class="titlename" #dragheader [title]="chatName">
+            {{chatName}}
+        </div>
         <span class="close" nz-icon nzType="close" nzTheme="outline" (click)="close()"></span>
     </div>
     <div class="chatcontent" id="chatcontent">
+        <div class="spin" *ngIf="isLoading">
+            <nz-spin nzSimple></nz-spin>
+        </div>
         <div class="chatitem" *ngFor="let item of MessagesList" [ngClass]="{'chatitemMe': item.senderId == userId}">
             <div class="name">
                 {{item.senderName}}

src/app/home/commonComponents/chat-window/chat-window.component.scss

@@ -19,11 +19,16 @@
   box-sizing: border-box;
   padding: 0 18px;
   color: #000;
+
+
   .titlename {
     flex: 1;
     cursor: move;
     text-align: left;
-
+    width: 100px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
   .close {
@@ -36,6 +41,7 @@
   overflow-y: auto;
   box-sizing: border-box;
   padding: 0 18px;
+  position: relative;
 
   .chatitem {
     display: flex;

src/app/home/commonComponents/chat-window/chat-window.component.ts

@@ -3,6 +3,7 @@ import { NzMessageService } from 'ng-zorro-antd/message';
 import signalR from '../../../../signalRChat'
 import { HttpClient } from '@angular/common/http';
 import { StationWeeklyPlanComponent } from '../../task/station-weekly-plan/station-weekly-plan.component';
+import { StationTaskExecutionComponent } from '../../task/station-task-execution/station-task-execution.component';
 
 
 @Component({
@@ -15,7 +16,8 @@ export class ChatWindowComponent implements OnInit {
 
 
   constructor(private ngZone: NgZone, private element: ElementRef, private message: NzMessageService,
-    @Inject(StationWeeklyPlanComponent) private parentComponent: any, private http: HttpClient) { }
+    @Inject(StationWeeklyPlanComponent) private parentComponent: any, private http: HttpClient,
+    @Inject(StationTaskExecutionComponent) private parentComponent2: any) { }
 
 
 
@@ -50,23 +52,41 @@ export class ChatWindowComponent implements OnInit {
   /**
    * 消息列表
    */
+  members = []
   MessagesList = []
+
+  isLoading = false
+
+
+  chatName = ''
   /**
    * 获得所有消息
    */
   getAllMessages() {
+    this.isLoading = true
     console.log('任务id', this.taskId)
-    this.http.get('/api/TaskChats/Messages', {
+    this.http.get('/api/TaskChats/Groups', {
       params: {
         TaskId: this.taskId,
-        PageNumber:1,
-        PageSize:999,
-        SortProperty:'CreationTime',
-        SortType:'asc'
+        PageNumber: 1,
+        PageSize: 999,
+        SortProperty: 'CreationTime',
+        SortType: 'asc'
       }
     }).subscribe((data: any) => {
-      this.MessagesList = data.items
-      console.log('聊天记录', this.MessagesList)
+      this.MessagesList = data.items[0].taskChatMessages
+      this.members = data.items[0].members
+
+      this.members.forEach(item => {
+        this.chatName += item.name + ' '
+      })
+      this.chatName = this.chatName + '的群聊' + '(' + this.members.length + ')'
+      this.isLoading = false
+      console.log('chatName', this.chatName)
+      console.log('消息列表', this.MessagesList)
+      setTimeout(() => {
+        this.scrollToBottom()
+      }, 0);
     })
   }
 
@@ -80,6 +100,7 @@ export class ChatWindowComponent implements OnInit {
 
   close() {
     this.parentComponent.closechat()
+    this.parentComponent2.closechat()
   }
   send() {
     if (!this.text) {

src/app/home/home.module.ts

@@ -149,6 +149,7 @@ import { AngularDraggableModule } from 'angular2-draggable';
     NzDividerModule,
     AngularDraggableModule
   ],
+  providers: [StationTaskExecutionComponent,StationWeeklyPlanComponent],
   entryComponents: [AddroleComponent, EditroleComponent, AdduserComponent, EdituserComponent, AddorComponent, EditorComponent, ApplyComponent, ApplyLookComponent, LookTaskComponent, AllotPersonComponent, EditOrComponent, CreateTaskComponent]
 })
 export class HomeModule { }

src/app/home/task/da-monthly-task-overview/da-monthly-task-overview.component.ts

@@ -65,7 +65,7 @@ export class DaMonthlyTaskOverviewComponent implements OnInit {
   ngOnInit(): void {
 
 
-    
+
     // 接收来自中心的消息
     (signalR.SR as any).on('receiveNotification', (message: string, senderName: string) => {
       // 接收后要做的事
@@ -134,7 +134,7 @@ export class DaMonthlyTaskOverviewComponent implements OnInit {
         })
       })
       this.cardData.forEach(element => {
-        element.percentage = Math.round(element.inspected / element.data.length) * 100 || 0
+        element.percentage = Math.round((element.inspected / element.data.length) * 100) || 0
       })
       this.cardData = [...this.cardData]
 

src/app/home/task/da-oneself-plan/da-oneself-plan.component.ts

@@ -118,7 +118,7 @@ export class DaOneselfPlanComponent implements OnInit {
           })
         })
         this.cardData.forEach(element => {
-          element.percentage = Math.round(element.inspected / element.data.length) * 100 || 0
+          element.percentage = Math.round((element.inspected / element.data.length) * 100) || 0
         })
 
         resolve(data)

src/app/home/task/da-oneself-plan/plan-adjustment/plan-adjustment.component.html

@@ -29,8 +29,8 @@
                 <div *ngFor="let i of item.data">
                     <div class="received checked">
                         <div class="name">{{i.company.companyName}}</div>
-                        <div><i nz-icon nzType="close" nzTheme="outline" style="cursor: pointer;"
-                                (click)="cancel(i,item)"></i></div>
+                        <div><i *ngIf="i.approvalStatus!='已检查'" nz-icon nzType="close" nzTheme="outline"
+                                style="cursor: pointer;" (click)="cancel(i,item)"></i></div>
                     </div>
                 </div>
             </div>

src/app/home/task/station-task-execution/station-task-execution.component.html

@@ -147,7 +147,7 @@
                                 {{'协助机构/人员'}}
                             </span>
                         </div>
-                        <div class="flexcol">
+                        <div class="flexcol result">
                             <span>
                                 {{item.inspectionResult}}
                             </span>
@@ -172,6 +172,15 @@
                                 操作
                             </span>
                         </div>
+                        <div class="flexcol flexcolcenter">
+                            <span>
+                                <img style="cursor: pointer;width: 36px;height: 28px;"
+                                    src="../../../../assets/images/icon/chat.png" (click)="openchat(item)" alt="">
+                            </span>
+                            <span>
+                                消息
+                            </span>
+                        </div>
                     </div>
                 </div>
                 <div class="pagination">
@@ -184,4 +193,9 @@
             </div>
         </div>
     </div>
+
+    <div *ngIf="ischat"
+        style="position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);width: 500px;height: 580px;">
+        <app-chat-window [taskId]="taskId"></app-chat-window>
+    </div>
 </div>

src/app/home/task/station-task-execution/station-task-execution.component.scss

@@ -165,7 +165,7 @@
         border: 1px solid #C7CAD0;
         justify-content: space-around;
         padding-left: 80px;
-        margin-bottom: 10px;
+        margin: 10px 0;
 
         div {
           flex: 1;
@@ -204,7 +204,7 @@
         }
 
         .flexcolassistant {
-          flex: 1.5;
+          flex: 2;
           overflow: hidden;
 
           .assistant {
@@ -229,10 +229,18 @@
           }
         }
 
+        .result{
+          flex: 2;
+        }
+
         .unitnamebox {
           flex: 3;
         }
 
+        .flexcolcenter{
+          flex: 0.5;
+          align-items: center;
+        }
       }
 
       .greenborder {

src/app/home/task/station-task-execution/station-task-execution.component.ts

@@ -276,5 +276,14 @@ export class StationTaskExecutionComponent implements OnInit {
 
   look(item) {
   }
-
+  ischat = false
+  taskId
+  openchat(item) {
+    console.log(item)
+    this.taskId = item.id
+    this.ischat = true
+  }
+  closechat() {
+    this.ischat = false
+  }
 }

src/app/home/task/station-weekly-plan/station-weekly-plan.component.html

@@ -256,7 +256,8 @@
     </div>
 
 
-    <div *ngIf="ischat" style="position: absolute;left: 30%;top: 12%;">
+    <div *ngIf="ischat"
+        style="position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);width: 500px;height: 580px;">
         <app-chat-window [taskId]="taskId"></app-chat-window>
     </div>
 </div>

src/app/home/task/station-weekly-plan/station-weekly-plan.component.scss

@@ -4,7 +4,7 @@
   display: flex;
   flex-direction: column;
   overflow: hidden;
-  position: relative;
+  // position: relative;
 }
 
 .informbox {

src/app/home/task/station-weekly-plan/station-weekly-plan.component.ts

@@ -212,11 +212,12 @@ export class StationWeeklyPlanComponent implements OnInit {
         this.cardData.forEach(element => {
           element.data.forEach(item => {
             item.approvalStatus == '通过' ? element.passed += 1 : null
-            item.approvalStatus == '已检查 ' ? element.inspected += 1 : null
+            item.approvalStatus == '已检查' ? element.inspected += 1 : null
           })
         })
+
         this.cardData.forEach(element => {
-          element.percentage = Math.round(element.inspected / element.data.length) * 100
+          element.percentage = Math.round((element.inspected / element.data.length) * 100)
         })
 
         resolve(data)
@@ -281,7 +282,7 @@ export class StationWeeklyPlanComponent implements OnInit {
             i.approvalStatus == '已检查' ? element.finished += 1 : null
           });
         });
-        item.percentage = Math.round(item.inspected / item.allUnitsNum) * 100
+        item.percentage = Math.round((item.inspected / item.allUnitsNum) * 100)
         resolve(data)
       })
     })

src/app/home/task/zhi-indicators/zhi-indicators.component.html

@@ -480,7 +480,10 @@
                             <td>{{item.targetCount}}</td>
                             <td class="flextd">
                                 <ng-container *ngIf="item.planTasks && item.planTasks.length != 0; else elseTemplate">
-                                    <div class="itembox" *ngFor="let i of item.planTasks">{{i.company.companyName}}
+                                    <div class="itembox" *ngFor="let i of item.planTasks">
+                                        {{i.company.companyName}}
+                                        <img *ngIf="i.isCheckAgain" class="isCheckAgain"
+                                            src="../../../../assets/images/icon/isCheckAgain.png" alt="">
                                     </div>
                                 </ng-container>
                                 <ng-template #elseTemplate>

src/app/home/task/zhi-indicators/zhi-indicators.component.scss

@@ -113,7 +113,11 @@
           position: relative;
           display: flex;
           justify-content: space-between;
-
+          .itembox{
+            position: absolute;
+            right: 0;
+            top: 0px;
+          }
           .ellipsis {
             max-width: 200px;
             white-space: nowrap;