[新增]聊天框

3 years ago · f5a698a187
12 changed files with 236 additions and 23 deletions
--- a/package-lock.json
+++ b/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",
--- a/package.json
+++ b/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",
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@ -30,7 +30,8 @@ registerLocaleData(zh);
    HttpClientModule,
    NzNotificationModule,
    NzMessageModule,
-    NzModalModule
+    NzModalModule,
+  
  ],
  // providers: [httpInterceptorProviders, CacheTokenService, TreeService,
  //   { provide: RouteReuseStrategy, useClass: CustomReuseStrategy }],
--- a/src/app/home/commonComponents/chat-window/chat-window.component.html
+++ b/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>
--- a/src/app/home/commonComponents/chat-window/chat-window.component.scss
+++ b/src/app/home/commonComponents/chat-window/chat-window.component.scss
@ -1,7 +1,98 @@
 .chatbox {
-  width: 478px;
-  height: 734px;
+  width: 500px;
+  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;
+  }
 }
--- a/src/app/home/commonComponents/chat-window/chat-window.component.ts
+++ b/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
+    //   }
+    // });
+
+  }
 }
--- a/src/app/home/home.module.ts
+++ b/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]
 })
--- a/src/app/home/task/station-task-apply/station-task-apply.component.html
+++ b/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;">
-        <app-chat-window></app-chat-window>
+    <div *ngIf="ischat" style="position: absolute;left: 30%;top: 12%;">
+        <app-chat-window [taskId]="'1234'"></app-chat-window>
    </div>
 </div>
--- a/src/app/home/task/station-task-apply/station-task-apply.component.scss
+++ b/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 {
--- a/src/app/home/task/station-task-apply/station-task-apply.component.ts
+++ b/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 {
  双随机,
--- a/src/app/home/task/zhi-indicators/zhi-indicators.component.ts
+++ b/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',
--- a/src/assets/images/icon/chat.png
+++ b/src/assets/images/icon/chat.png