From f5a698a187922e4842fa3bc3c0871807eb91bfce Mon Sep 17 00:00:00 2001
From: SHAOJIAHAO <55341701@qq.com>
Date: Tue, 6 Sep 2022 17:27:54 +0800
Subject: [PATCH] =?UTF-8?q?[=E6=96=B0=E5=A2=9E]=E8=81=8A=E5=A4=A9=E6=A1=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
package-lock.json | 15 +++
package.json | 1 +
src/app/app.module.ts | 3 +-
.../chat-window/chat-window.component.html | 25 ++++-
.../chat-window/chat-window.component.scss | 95 +++++++++++++++++-
.../chat-window/chat-window.component.ts | 79 ++++++++++++++-
src/app/home/home.module.ts | 6 +-
.../station-task-apply.component.html | 8 +-
.../station-task-apply.component.scss | 7 +-
.../station-task-apply.component.ts | 19 ++--
.../zhi-indicators.component.ts | 1 -
src/assets/images/icon/chat.png | Bin 0 -> 1317 bytes
12 files changed, 236 insertions(+), 23 deletions(-)
create mode 100644 src/assets/images/icon/chat.png
diff --git a/package-lock.json b/package-lock.json
index c7600f3..fd53c1d 100644
--- 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",
diff --git a/package.json b/package.json
index 09ebcac..8e91bea 100644
--- 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",
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index e6c2010..64c360d 100644
--- 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 }],
diff --git a/src/app/home/commonComponents/chat-window/chat-window.component.html b/src/app/home/commonComponents/chat-window/chat-window.component.html
index 5877ca1..cff2243 100644
--- 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>
\ No newline at end of file
diff --git a/src/app/home/commonComponents/chat-window/chat-window.component.scss b/src/app/home/commonComponents/chat-window/chat-window.component.scss
index 0c482dc..52c45cf 100644
--- 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;
+ }
}
diff --git a/src/app/home/commonComponents/chat-window/chat-window.component.ts b/src/app/home/commonComponents/chat-window/chat-window.component.ts
index 8208e11..f630006 100644
--- 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
+ // }
+ // });
+
+ }
}
diff --git a/src/app/home/home.module.ts b/src/app/home/home.module.ts
index ddb5dd9..ea5a3ba 100644
--- 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]
})
diff --git 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
index 017b9d7..dbb4722 100644
--- 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>
\ No newline at end of file
diff --git 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
index cadaf0b..7052485 100644
--- 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 {
diff --git 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
index 4d41138..cc1fba5 100644
--- 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 {
双随机,
diff --git a/src/app/home/task/zhi-indicators/zhi-indicators.component.ts b/src/app/home/task/zhi-indicators/zhi-indicators.component.ts
index cb84d07..dbb0735 100644
--- 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',
diff --git a/src/assets/images/icon/chat.png b/src/assets/images/icon/chat.png
new file mode 100644
index 0000000000000000000000000000000000000000..7fb10d63bae6b7d3a50d46a202a58d2359254419
GIT binary patch
literal 1317
zcmV+=1={+FP)<h;3K|Lk000e1NJLTq001!n001Zm1^@s6S49#}00004b3#c}2nYxW
zd<bNS000EsNkl<ZSVzrS?O7T@5T3;(kLZtR1u+$bR1mB{(E`K@zzW0)0u@LKP@saG
z6^IoCE71J#<B7>_-dS!h<7T<rgX7WtBXE1W^Uln^^UkU$VCVsDJZjpBHPw}(Elsqc
zh-%{12|iEoEW(`e`W}q}mMv`xY?(bC22|IYjxnQNWJiF!B~8Ohg-)ssVt`8>UJ$<q
zRQs*zYf<C9mTKx&0Y)_dY)Ruk5O)LGg%?lpV56)(5t(sCQDa$Ac?RO)jG9`}X<5e0
zbvVTU<nuCsq#%;~|Go?Wc1@1RnxgHpQ_Fy0_PN*eqs$b_a7J%!kJ@EA%Ye8$qYmhi
zS!n44Z1;1mLR)1<Lva)yG~F!KdQI0zrT*Ir4c|3rY@?6b^U2+}x<?m9ZBffS%wV}|
zgt}ARr#{Xc7s(xpQF|1MW;Xjx5U~hE5Una2<wZ^1pVJV?cZ#CVn-3#SkT%^%7#qiQ
zjC5`0z2ke%tfn;eRfT%9m`&ZC)1@OJ=GiNKhjYF{)MoGB52%G`be#n`UB-w;gn6a_
zuHrkuPGw9?TQMSqPc_(;rkkN?O-H=0YamAg&&wO|+Tkj4ALnd<RoNI~VEEI84CxoC
z6RaGbG_?Wdz*>m4`s@32C@n4*1U$92Pu=@708ps>({WM7=e)ema-)$!G16Yqhr}t*
zfGE)GE%NpKqOm|Yub^IQh%Bd1%WOvU4Zk%PUE8cRt!0r-F+OvMNQa+sBqIF%vgk%|
z#P$mE7Q*qeYyfF02_RC&a3mHkbRr5YTUfrAUeGKML)B0h(ostOICnH~7C?c+ba4^t
zx!25i(WWd%1L?Xsl^y5cVZi`JH|A8*F(^`*9)$4yV-XfAx?j@oOw$$;-+<s~pdgLs
zJ>X!UO;9QyvX)J)qJ|ZnZ%YFo@PAT#fnEZtR1(AmzSmu&OrH*rF|%01s01_EtAC&v
zKnf$PtBhmMQ5(?DqY(Cd^ehOeS4vY90z%50H)xKm!ARvB)=@UUEwDV6vmltp{q1Rt
zGg6>-Bp|E?^G0GOh@?(2qk;ELOYAggBdl)=XByxXyi6w<ese~U<DrM0J^K`+DknV&
zgL2c!NC?b<UYbb#V|sd!0whTUGKlPZsQPVAC!DvAn@;jzv&_l8vH_STN-rBYv#Rq#
zD-{~2DFDWhd0+I<=FOM2jY%aFgj`I@3C|`b<nZ1k(KivkZ|4~^&vV&ITUiqfBCE1n
zT9tD+IzHJvkKyti**aK)2nR8vATj{lVAO5iVw15IX_AE&HQuz*F|Lymb^J^KhA!?C
ziY@?4k2t^)pP{TqCUoC)&FO`nX`EbjTqF{12ROo^YWfOM!bAp0Vr+z{9LZu90wP(b
zC0kpcyblH;JHU`W!EIy`5At>95U!l8D7x~2O5Qt2E)&w5cdjFR>A+2w>wsVows{Hx
z@a!N$>f?LcN6~Jp$u$Fnz-_HNdcJyLCk2Dx0?5}b^DvIlO(=Bm?k)`H|8b->M*?ve
za0Ea@?$`5L+h7nOIUG92Z8h;;1Wz~k#si?teQ*(Gdl3*8tn6d>vKjPwV$+Fx6e&Zp
z9Q2|f*f1A}rO_hA^2I^8K&;1QG0RKSR{_EYqzDVX8W0S`x!m^lCBCS<DiA3U6g4hv
bp>+Ni<4s?<PAG)P00000NkvXXu0mjfxH(s4
literal 0
HcmV?d00001