[新增]聊天框

package-lock.json

@@ -2223,6 +2223,21 @@
         "fast-deep-equal": "^3.1.3"
       }
     },
+    "angular2-draggable": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmmirror.com/angular2-draggable/-/angular2-draggable-2.3.2.tgz",
+      "integrity": "sha512-rw2O/icgVang8uSVIU7nmm59f1DceSAUQkOuSGYnKbv/h8EbhJ9099sCjh/I5LymZBza1XPKeFZofIvhekdE+A==",
+      "requires": {
+        "tslib": "^1.9.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "1.14.1",
+          "resolved": "https://registry.npmmirror.com/tslib/-/tslib-1.14.1.tgz",
+          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+        }
+      }
+    },
     "ansi-colors": {
       "version": "4.1.1",
       "resolved": "https://registry.nlark.com/ansi-colors/download/ansi-colors-4.1.1.tgz",

package.json

@@ -20,6 +20,7 @@
     "@angular/router": "~13.1.0",
     "@microsoft/signalr": "^6.0.8",
     "@types/file-saver": "^2.0.5",
+    "angular2-draggable": "^2.3.2",
     "echarts": "^5.3.3",
     "file-saver": "^2.0.5",
     "js-base64": "^3.7.2",

src/app/app.module.ts

@@ -30,7 +30,8 @@ registerLocaleData(zh);
     HttpClientModule,
     NzNotificationModule,
     NzMessageModule,
-    NzModalModule
+    NzModalModule,
+  
   ],
   // providers: [httpInterceptorProviders, CacheTokenService, TreeService,
   //   { provide: RouteReuseStrategy, useClass: CustomReuseStrategy }],

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

@@ -1,3 +1,24 @@
-<div class="chatbox">
+<div class="chatbox" ngDraggable [preventDefaultEvent]="true" [handle]="dragheader">
-
+    <div class="titlebox">
+        <span class="titlename" #dragheader>
+            历下区A消防救援站群聊(3)
+        </span>
+        <span class="close" nz-icon nzType="close" nzTheme="outline" (click)="close()"></span>
+    </div>
+    <div class="chatcontent" id="chatcontent">
+        <div class="chatitem" *ngFor="let item of data" [ngClass]="{'chatitemMe': item.name == '我'}">
+            <div class="name">
+                {{item.name}}
+            </div>
+            <div class="chatmessage">
+                {{item.content}}
+            </div>
+        </div>
+    </div>
+    <div class="inputarea">
+        <textarea rows="4" nz-input [nzBorderless]="true" [(ngModel)]="text"></textarea>
+    </div>
+    <div class="btnbox">
+        <button nz-button nzType="primary" (click)="send()">发送</button>
+    </div>
 </div>

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

@@ -1,7 +1,98 @@
 .chatbox {
-  width: 478px;
+  width: 500px;
-  height: 734px;
+  height: 580px;
   background: #F5F6F8;
   border-radius: 4px 4px 4px 4px;
   opacity: 1;
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  border: 1px solid rgb(216, 209, 209);
+}
+
+.titlebox {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 46px;
+  border-bottom: 1px solid #E4E7EC;
+  box-sizing: border-box;
+  padding: 0 18px;
+
+  .titlename {
+    flex: 1;
+    cursor: move;
+    text-align: left;
+  }
+
+  .close {
+    cursor: pointer;
+  }
+}
+
+.chatcontent {
+  flex: 1;
+  overflow-y: auto;
+  box-sizing: border-box;
+  padding: 0 18px;
+
+  .chatitem {
+    display: flex;
+    flex-direction: column;
+    margin: 12px 0;
+
+    .name {
+      text-align: left;
+      color: gray;
+      font-size: 12px;
+      margin-bottom: 3px;
+    }
+
+    .chatmessage {
+
+      background-color: #fff;
+      box-sizing: border-box;
+      padding: 6px 8px;
+      text-align: left;
+      width: fit-content;
+      width: -webkit-fit-content;
+      width: -moz-fit-content;
+
+    }
+  }
+
+  .chatitemMe {
+    .name {
+      text-align: right;
+    }
+
+    .chatmessage {
+      display: flex;
+      align-self: flex-end;
+      background: #89d961;
+    }
+  }
+
+}
+
+.inputarea {
+  height: 120px;
+  border-top: 1px solid #E4E7EC;
+
+  textarea {
+    height: 100%;
+    background: #F5F6F8;
+    resize: none;
+  }
+}
+
+.btnbox {
+  display: flex;
+  height: 56px;
+  align-items: center;
+  justify-content: flex-end;
+
+  button {
+    margin-right: 18px;
+  }
 }

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

@@ -1,4 +1,7 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, ElementRef, OnInit, NgZone, Input, Inject } from '@angular/core';
+import { NzMessageService } from 'ng-zorro-antd/message';
+import { debounceTime, fromEvent } from 'rxjs';
+import { StationTaskApplyComponent } from '../../task/station-task-apply/station-task-apply.component';
 
 @Component({
   selector: 'app-chat-window',
@@ -6,10 +9,82 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./chat-window.component.scss']
 })
 export class ChatWindowComponent implements OnInit {
+  @Input() public taskId: any;//父组件传进来的任务id
 
-  constructor() { }
 
+  constructor(private ngZone: NgZone, private element: ElementRef, private message: NzMessageService,
+    @Inject(StationTaskApplyComponent) private parentComponent: any) { }
+
+
+
+  chatcontent
   ngOnInit(): void {
+    this.chatcontent = this.element.nativeElement.querySelector(`#chatcontent`)
+    setTimeout(() => {
+      this.scrollToBottom()
+    }, 0);
+  }
+  text = ''
+  data = [
+    { name: '小王', content: '说三道四的数据库的技术框架的开始倒计时打开双击打开双击打开双击打开速度加快速度加快速度加快是昆明昆明昆明的技术框架的历下区A消防救援站正在执行熟悉演练任务~' },
+    { name: '小李', content: '收到~' },
+    { name: '炒鸡消防站', content: '~' },
+    { name: '我', content: '说三道四的数据库的技术框架的开始倒计时打开双击打开双击打开双击打开速度加快速度加快速度加快是昆明昆明昆明的技术框架的历下区A消防救援站正在执行熟悉演练任务~' },
+    { name: '阿玉', content: 'fdff~' },
+    { name: '我', content: '咋了~' },
+    { name: '阿玉', content: 'hahah~' }
+  ]
+
+
+  close() {
+    // let obj = {
+    //   name: "小虎",
+    //   content: '测试数据'
+    // }
+    // this.ngZone.run(() => {
+    //   this.data.push(obj)
+    //   //如果此时滚动条在最底部
+    //   if (this.chatcontent.scrollHeight - (this.chatcontent.scrollTop + this.chatcontent.clientHeight) == 0) {
+    //     setTimeout(() => {
+    //       this.scrollToBottom()
+    //     }, 0);
+    //   }
+    // })
+    this.parentComponent.closechat()
   }
+  send() {
+    if (!this.text) {
+      this.message.create('warning', '输入不能为空');
+      return
+    }
+    let obj = {
+      name: "我",
+      content: this.text
+    }
+    this.data.push(obj)
+    setTimeout(() => {
+      this.scrollToBottom()
+    }, 0);
+    this.text = ''
+  }
+  scrollToBottom() {
+    this.chatcontent.scrollTop = this.chatcontent.scrollHeight
+  }
+
 
+  //是否滚动到底部
+  // isScrollBottom = true
+
+  ngAfterViewInit(): void {
+    // let tableHeader = this.element.nativeElement.querySelector(`.ant-table-header`).clientHeight
+    // fromEvent(this.chatcontent as HTMLCanvasElement, 'scroll').pipe(debounceTime(100)).subscribe(async (event: any) => { //监听 DOM 滚动事件
+    //   //如果滚动到底部
+    //   if (event.target.scrollHeight - (event.target.scrollTop + event.target.clientHeight) == 0) {
+    //     this.isScrollBottom = true
+    //   } else {
+    //     this.isScrollBottom = false
+    //   }
+    // });
+
+  }
 }

src/app/home/home.module.ts

@@ -69,8 +69,9 @@ import { NzBadgeModule } from 'ng-zorro-antd/badge';
 import { NzListModule } from 'ng-zorro-antd/list';
 import { OperationLogComponent } from './basic-info/unit-details/operation-log/operation-log.component';
 import { NzDividerModule } from 'ng-zorro-antd/divider';
-import { AppModule } from '../app.module';
+import { AppModule } from '../app.module';
 import { ChatWindowComponent } from './commonComponents/chat-window/chat-window.component';
+import { AngularDraggableModule } from 'angular2-draggable';
 @NgModule({
   declarations: [
     NavComponent,
@@ -146,7 +147,8 @@ import { ChatWindowComponent } from './commonComponents/chat-window/chat-window.
     NzNotificationModule,
     NzBadgeModule,
     NzListModule,
-    NzDividerModule
+    NzDividerModule,
+    AngularDraggableModule
   ],
   entryComponents: [AddroleComponent, EditroleComponent, AdduserComponent, EdituserComponent, AddorComponent, EditorComponent, ApplyComponent, ApplyLookComponent, LookTaskComponent, AllotPersonComponent, EditOrComponent, CreateTaskComponent]
 })

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

@@ -100,7 +100,7 @@
                                 单位名称
                             </span>
                         </div>
-                        <div class="flexcol">
+                        <div class="flexcol flexcollevel">
                             <span>
                                 {{item.company.useNature}}
                             </span>
@@ -192,7 +192,7 @@
                         </div>
                         <div class="flexcol">
                             <span>
-                                <span class="blue" (click)="xxx()">消息</span>
+                                <img style="cursor: pointer;width: 36px;height: 28px;" src="../../../../assets/images/icon/chat.png" (click)="openchat()" alt="">
                             </span>
                             <span>
                                 消息
@@ -212,7 +212,7 @@
     </div>
 
 
-    <div *ngIf="ischat" style="position: absolute;">
+    <div *ngIf="ischat" style="position: absolute;left: 30%;top: 12%;">
-        <app-chat-window></app-chat-window>
+        <app-chat-window [taskId]="'1234'"></app-chat-window>
     </div>
 </div>

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

@@ -171,6 +171,7 @@
         div {
           flex: 1;
           overflow: hidden;
+
           span {
             display: inline-block;
             width: 100%;
@@ -203,9 +204,11 @@
           }
 
         }
-
+        .flexcollevel{
+          flex: 2.5;
+        }
         .flexcolassistant {
-          flex: 1.5;
+          flex: 2.5;
           overflow: hidden;
 
           .assistant {

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

@@ -356,6 +356,8 @@ export class StationTaskApplyComponent implements OnInit {
   }
 
 
+  
+
   look(item) {
     const modal = this.modal.create({
       nzTitle: '详情',
@@ -403,18 +405,21 @@ export class StationTaskApplyComponent implements OnInit {
   }
 
   ischat = false
-  xxx() {
+  openchat() {
     this.ischat = true
   }
+  public closechat() {
+    this.ischat = false
+  }
 }
 
 export enum ApprovalStatus {
-  未派发 = 0,
+  未派发,
-  待处理 = 1,
+  待处理,
-  通过 = 2,
+  通过,
-  驳回 = 3,
+  驳回,
-  待检查 = 4,
+  待检查,
-  已检查 = 5,
+  已检查,
 }
 export enum TaskType {
   双随机,

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

@@ -10,7 +10,6 @@ import { NzModalService } from 'ng-zorro-antd/modal';
 import { EditOrComponent } from './edit-or/edit-or.component';
 import { AllotPersonComponent } from '../da-subordinate-audit/allot-person/allot-person.component';
 
-import signalR from '../../../../signalR'
 @Component({
   selector: 'app-zhi-indicators',
   templateUrl: './zhi-indicators.component.html',