From ae3a3f26d23ffe91b5fade3b3f9445ba13769615 Mon Sep 17 00:00:00 2001 From: SHAOJIAHAO <55341701@qq.com> Date: Wed, 7 Sep 2022 15:20:11 +0800 Subject: [PATCH] =?UTF-8?q?[=E6=96=B0=E5=A2=9E]=E8=81=8A=E5=A4=A9=E5=8A=9F?= =?UTF-8?q?=E8=83=BD=E5=AE=8C=E5=96=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../chat-window/chat-window.component.html | 6 +- .../chat-window/chat-window.component.scss | 5 +- .../chat-window/chat-window.component.ts | 108 ++++++++++-------- src/app/home/home.module.ts | 1 - .../plan-adjustment.component.ts | 2 +- .../station-task-apply.component.html | 13 --- .../station-task-apply.component.ts | 7 -- .../station-task-execution.component.html | 20 ++-- .../station-task-execution.component.ts | 5 +- .../station-weekly-plan.component.html | 33 ++++-- .../station-weekly-plan.component.scss | 6 +- .../station-weekly-plan.component.ts | 12 ++ src/signalRChat.ts | 57 +++++++++ 13 files changed, 173 insertions(+), 102 deletions(-) create mode 100644 src/signalRChat.ts 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 cff2243..e9f269c 100644 --- a/src/app/home/commonComponents/chat-window/chat-window.component.html +++ b/src/app/home/commonComponents/chat-window/chat-window.component.html @@ -6,12 +6,12 @@
-
+
- {{item.name}} + {{item.senderName}}
- {{item.content}} + {{item.message}}
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 52c45cf..fe50df0 100644 --- a/src/app/home/commonComponents/chat-window/chat-window.component.scss +++ b/src/app/home/commonComponents/chat-window/chat-window.component.scss @@ -18,11 +18,12 @@ border-bottom: 1px solid #E4E7EC; box-sizing: border-box; padding: 0 18px; - + color: #000; .titlename { flex: 1; cursor: move; text-align: left; + } .close { @@ -57,7 +58,7 @@ width: fit-content; width: -webkit-fit-content; width: -moz-fit-content; - + color: #000; } } 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 f630006..433f985 100644 --- a/src/app/home/commonComponents/chat-window/chat-window.component.ts +++ b/src/app/home/commonComponents/chat-window/chat-window.component.ts @@ -1,7 +1,9 @@ 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'; +import signalR from '../../../../signalRChat' +import { HttpClient } from '@angular/common/http'; +import { StationWeeklyPlanComponent } from '../../task/station-weekly-plan/station-weekly-plan.component'; + @Component({ selector: 'app-chat-window', @@ -13,43 +15,70 @@ export class ChatWindowComponent implements OnInit { constructor(private ngZone: NgZone, private element: ElementRef, private message: NzMessageService, - @Inject(StationTaskApplyComponent) private parentComponent: any) { } + @Inject(StationWeeklyPlanComponent) private parentComponent: any, private http: HttpClient) { } chatcontent + + userId + userName ngOnInit(): void { + + this.userId = JSON.parse(sessionStorage.getItem('userData')).id + this.userName = JSON.parse(sessionStorage.getItem('userData')).name this.chatcontent = this.element.nativeElement.querySelector(`#chatcontent`) setTimeout(() => { this.scrollToBottom() }, 0); + + this.getAllMessages() + + + signalR.initSR(this.taskId); + // 接收来自中心的消息 + (signalR.SR as any).on('receiveMessage', (message: any) => { + console.log('收到消息', message) + this.MessagesList.push(message); + if (this.chatcontent.scrollHeight - (this.chatcontent.scrollTop + this.chatcontent.clientHeight) == 0) { + setTimeout(() => { + this.scrollToBottom() + }, 0); + } + }) } - text = '' - data = [ - { name: '小王', content: '说三道四的数据库的技术框架的开始倒计时打开双击打开双击打开双击打开速度加快速度加快速度加快是昆明昆明昆明的技术框架的历下区A消防救援站正在执行熟悉演练任务~' }, - { name: '小李', content: '收到~' }, - { name: '炒鸡消防站', content: '~' }, - { name: '我', content: '说三道四的数据库的技术框架的开始倒计时打开双击打开双击打开双击打开速度加快速度加快速度加快是昆明昆明昆明的技术框架的历下区A消防救援站正在执行熟悉演练任务~' }, - { name: '阿玉', content: 'fdff~' }, - { name: '我', content: '咋了~' }, - { name: '阿玉', content: 'hahah~' } - ] + /** + * 消息列表 + */ + MessagesList = [] + /** + * 获得所有消息 + */ + getAllMessages() { + console.log('任务id', this.taskId) + this.http.get('/api/TaskChats/Messages', { + params: { + TaskId: this.taskId, + PageNumber:1, + PageSize:999, + SortProperty:'CreationTime', + SortType:'asc' + } + }).subscribe((data: any) => { + this.MessagesList = data.items + console.log('聊天记录', this.MessagesList) + }) + } + + + ngOnDestroy(): void { + signalR.stopSR() + + } + text = '' 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() { @@ -57,34 +86,15 @@ export class ChatWindowComponent implements OnInit { this.message.create('warning', '输入不能为空'); return } - let obj = { - name: "我", - content: this.text - } - this.data.push(obj) + // 发送消息 + (signalR.SR as any).send('sendMessage', this.taskId, this.text) setTimeout(() => { this.scrollToBottom() + this.text = '' }, 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 ea5a3ba..393dcc2 100644 --- a/src/app/home/home.module.ts +++ b/src/app/home/home.module.ts @@ -69,7 +69,6 @@ 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 { ChatWindowComponent } from './commonComponents/chat-window/chat-window.component'; import { AngularDraggableModule } from 'angular2-draggable'; @NgModule({ diff --git a/src/app/home/task/da-oneself-plan/plan-adjustment/plan-adjustment.component.ts b/src/app/home/task/da-oneself-plan/plan-adjustment/plan-adjustment.component.ts index ef35294..3cb0869 100644 --- a/src/app/home/task/da-oneself-plan/plan-adjustment/plan-adjustment.component.ts +++ b/src/app/home/task/da-oneself-plan/plan-adjustment/plan-adjustment.component.ts @@ -22,9 +22,9 @@ export class PlanAdjustmentComponent implements OnInit { OrganizationId ngOnInit(): void { this.userId = JSON.parse(sessionStorage.getItem('userData')).id + this.OrganizationId = JSON.parse(sessionStorage.getItem('userData')).organizationId this.organizationName = JSON.parse(sessionStorage.getItem('userData')).organizationName - this.OrganizationId = JSON.parse(sessionStorage.getItem('userData')).organizationId let roles = JSON.parse(sessionStorage.getItem('userData')).roles let isSupervisor = roles.find(item => { return item.name.indexOf('检查') != -1 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 dbb4722..e1634ca 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 @@ -190,14 +190,6 @@ 操作
-
- - - - - 消息 - -
- - -
- -
\ No newline at end of file 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 cc1fba5..024588f 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 @@ -404,13 +404,6 @@ export class StationTaskApplyComponent implements OnInit { }); } - ischat = false - openchat() { - this.ischat = true - } - public closechat() { - this.ischat = false - } } export enum ApprovalStatus { diff --git a/src/app/home/task/station-task-execution/station-task-execution.component.html b/src/app/home/task/station-task-execution/station-task-execution.component.html index c9b10fd..aa19c63 100644 --- a/src/app/home/task/station-task-execution/station-task-execution.component.html +++ b/src/app/home/task/station-task-execution/station-task-execution.component.html @@ -95,7 +95,7 @@
- 2022.07.20 14:00 + {{item.lastModificationTime | date:"yyyy-MM-dd"}} 时间 @@ -128,25 +128,23 @@
+ + {{i.name}} + - - {{i.name}} - - - + + {{i.name}} + + {{i.name}} - 协助人员 + {{'协助机构/人员'}}
diff --git a/src/app/home/task/station-task-execution/station-task-execution.component.ts b/src/app/home/task/station-task-execution/station-task-execution.component.ts index 538c7bb..de961e1 100644 --- a/src/app/home/task/station-task-execution/station-task-execution.component.ts +++ b/src/app/home/task/station-task-execution/station-task-execution.component.ts @@ -72,9 +72,9 @@ export class StationTaskExecutionComponent implements OnInit { // OrganizationId: this.OrganizationId, TaskName: this.searchForm.taskname, CompanyName: this.searchForm.unitname, - assistantOrganizationId: this.searchForm.or, + SupervisorId: this.isSupervisor ? this.userId : null, + AssitantOrganizationId: this.isSupervisor ? null : this.OrganizationId, approvalStatuses: ['已检查'], - SupervisorId: this.userId, PageNumber: this.PageNumber, PageSize: this.PageSize } @@ -192,6 +192,7 @@ export class StationTaskExecutionComponent implements OnInit { time2 ngOnInit(): void { + this.userId = JSON.parse(sessionStorage.getItem('userData')).id this.OrganizationId = JSON.parse(sessionStorage.getItem('userData')).organizationId this.userId = JSON.parse(sessionStorage.getItem('userData')).id let roles = JSON.parse(sessionStorage.getItem('userData')).roles diff --git a/src/app/home/task/station-weekly-plan/station-weekly-plan.component.html b/src/app/home/task/station-weekly-plan/station-weekly-plan.component.html index ad8cd36..877d2e9 100644 --- a/src/app/home/task/station-weekly-plan/station-weekly-plan.component.html +++ b/src/app/home/task/station-weekly-plan/station-weekly-plan.component.html @@ -195,20 +195,18 @@
+ + {{o.name}} + - - {{o.name}} - - - + + {{o.name}} + + {{o.name}} @@ -236,9 +234,16 @@ 检查时间
- +
+ + + + + 消息 + +
@@ -250,4 +255,8 @@
+ +
+ +
\ No newline at end of file diff --git a/src/app/home/task/station-weekly-plan/station-weekly-plan.component.scss b/src/app/home/task/station-weekly-plan/station-weekly-plan.component.scss index 19c1c37..01761d8 100644 --- a/src/app/home/task/station-weekly-plan/station-weekly-plan.component.scss +++ b/src/app/home/task/station-weekly-plan/station-weekly-plan.component.scss @@ -4,6 +4,7 @@ display: flex; flex-direction: column; overflow: hidden; + position: relative; } .informbox { @@ -389,8 +390,11 @@ span:nth-child(2) { color: #C7CAD0; } - } + .flexcolcenter{ + align-items: center; + } + .flexcolassistant { flex: 2; diff --git a/src/app/home/task/station-weekly-plan/station-weekly-plan.component.ts b/src/app/home/task/station-weekly-plan/station-weekly-plan.component.ts index d1ee327..c9c957f 100644 --- a/src/app/home/task/station-weekly-plan/station-weekly-plan.component.ts +++ b/src/app/home/task/station-weekly-plan/station-weekly-plan.component.ts @@ -665,4 +665,16 @@ export class StationWeeklyPlanComponent implements OnInit { nzCancelText: '取消' }); } + + + ischat = false + taskId + openchat(item) { + console.log(item) + this.taskId = item.id + this.ischat = true + } + closechat() { + this.ischat = false + } } diff --git a/src/signalRChat.ts b/src/signalRChat.ts new file mode 100644 index 0000000..817a8e5 --- /dev/null +++ b/src/signalRChat.ts @@ -0,0 +1,57 @@ +import * as signalR from '@microsoft/signalr' +export default { + SR: {}, + // 初始化连接 + initSR: function (id) { + const that = this + // // 连接 SignalR + const options: signalR.IHttpConnectionOptions = { + accessTokenFactory: async () => { + return sessionStorage.getItem('token') + } + } + // 1.获取系统中定义的baseURL + const url = '/hubs/taskchat' + // 2.初始化连接 + that.SR = new signalR.HubConnectionBuilder() + .withUrl(url, options) + .configureLogging(signalR.LogLevel.Information) + .build(); + + // 3. 在停止signalR时，不让onclose内的 start执行 + (that.SR as any).flag = true + // 4.启动连接的方法 + async function start() { + try { + await (that.SR as any).start().then(() => { + console.log('加入聊天室',id) + that.SR.send("joinRoom", id) + }); + } catch (err) { + setTimeout(start, 5000); + } + } + // 5.关闭之后重连 + (that.SR as any).onclose(async () => { + if ((that.SR as any).flag) { + await start(); + } + }); + + // 6.启动连接 + start(); + }, + // 停止连接，因为调用that.SR.stop(),同时会触发5操作，所以用了flag + stopSR: function () { + let that = this; + (that.SR as any).flag = false + async function stop() { + try { + await that.SR.stop(); + console.log("signaR退出成功"); + } catch (err) { } + } + stop(); + } + +}; \ No newline at end of file