Skip to content

X
xxx_phase2_web
Commit b900e056 authored by 夏敏伟's avatar 夏敏伟
Browse files
Options

聊天室优化

parent f1c9d809
Show whitespace changes
Inline Side-by-side
Showing with 563 additions and 361 deletions
src/router/info.js
View file @ b900e056
......@@ -135,4 +135,12 @@ export default[
parent_name: "数据管理"//人物详情对应的一级菜单名称
}
},
{
name: "聊天室详情",
path: "/chatRoomInfo",
component:() => import(`@/view/ddkz/components/chatRoomInfo.vue`),
meta: {
parent_name: "导调控制"//人物详情对应的一级菜单名称
}
},
]
\ No newline at end of file
src/view/ddkz/components/chatRoomDialog.vue
View file @ b900e056
......@@ -7,22 +7,26 @@
<div v-for="item in chatMessageList" class="everyMessage">
<div :style="{ justifyContent: item.fromUserId == userInfo.account ? 'flex-end' : 'flex-start' }">
<template v-if="item.fromUserId != userInfo.account">
<img class="avatarImg" :src="avatar" alt="">
<!-- <div v-text="item.content" style="background-color:white"></div> -->
<div v-if="item.messageForm == 'TEXT'" v-html="item.content" style="background-color: white;">
<img class="otherSidesAvatarImg" :src="avatar" alt="">
<div class="otherSides">
<div class="otherSides-user" v-text="item.fromUserId"></div>
<div class="otherSides-text" v-if="item.messageForm == 'TEXT'" v-html="item.content"
style="background-color: white;">
</div>
<el-image v-else-if="item.messageForm == 'PICTURE'" style="width: 150px; height: 100px"
:src="item.content" :preview-src-list="[item.content]">
<el-image class="otherSides-img" v-else-if="item.messageForm == 'PICTURE'"
style="width: 150px; height: 100px;margin: 0;" :src="item.content"
:preview-src-list="[item.content]">
</el-image>
</div>
</template>
<template v-else-if="item.fromUserId == userInfo.account">
<div v-if="item.messageForm == 'TEXT'" v-html="item.content"
<div class="mySides-text" v-if="item.messageForm == 'TEXT'" v-html="item.content"
style="background-color: #85ce61;">
</div>
<el-image v-else-if="item.messageForm == 'PICTURE'" style="width: 150px; height: 100px"
:src="item.content" :preview-src-list="[item.content]">
</el-image>
<img class="avatarImg" :src="avatar" alt="">
<img class="MySidesAvatarImg" :src="avatar" alt="">
</template>
</div>
</div>
......@@ -49,7 +53,7 @@ import { getRecordsByPagingTeam } from '../../../api/chat/chatRecords';
import elDragDialog from "@/util/directive/el-dragDialog";
import onPaste from '@/util/onPaste.js';
import { upLoadFiles } from '@/api/chat/chatRoom';
import { getTime_extent, download } from '@/util/http_util.js';
import { getTime_extent } from '@/util/http_util.js';
export default {
data() {
return {
......@@ -59,7 +63,7 @@ export default {
chatMessageList: [],
// stompClient: '',
// ws: null,
analogDataList: [],
// analogDataList: [],
currentChatRoom: {},
myStompClient: null,
file: null,
......@@ -72,7 +76,6 @@ export default {
},
props: {
visible: Boolean,
analogData: Array,
stompClient: Object,
currentChatRoomInfo: Object
......@@ -148,16 +151,14 @@ export default {
keepBottom() {
this.$refs.chatContent.scrollTop = this.$refs.chatContent.scrollHeight;
},
listChatroom(data) {
listChatroom(item) {
//取消群聊的订阅
for (const sub in this.stompClient.subscriptions) {
if (sub.startsWith("multicast")) {
if (sub.startsWith("multicastTeam")) {
this.stompClient.unsubscribe(sub);
}
}
data.forEach(e => {
//订阅聊天室主题，订阅功能中设置ID：
this.stompClient.subscribe('/topic/multicast/' + e.id + '/' + e.teamId, data => {
this.stompClient.subscribe('/topic/multicast/' + item.id + '/' + item.teamId, data => {
this.chatMessageList.push({
content: JSON.parse(data.body).content,
fromUserId: data.headers.fromUserId,
......@@ -166,13 +167,11 @@ export default {
this.$nextTick(() => {
this.keepBottom();
});
}, { id: "multicast" + e.id + new Date().getTime() });
})
}, { id: "multicastTeam" + item.id + new Date().getTime() });
},
getCurrentMessageList(item) {
//查询我方聊天记录
getRecordsByPagingTeam(item.id, 1, 500, '2023-10-01 00:00:00', getTime_extent(0).pre_rq_end, null, item.teamId).then(res1 => {
getRecordsByPagingTeam(item.id, 1, 200, '2023-10-01 00:00:00', getTime_extent(0).pre_rq_end, null, item.teamId).then(res1 => {
this.chatMessageList = res1.records;
this.$nextTick(() => {
this.keepBottom();
......@@ -180,11 +179,11 @@ export default {
})
},
handleDialogOpen() {
this.analogDataList = this.$props.analogData;
// this.analogDataList = this.$props.analogData;
this.currentChatRoom = this.$props.currentChatRoomInfo;
this.myStompClient = this.$props.stompClient;
//订阅
this.listChatroom(this.analogDataList);
this.listChatroom(this.currentChatRoom);
this.getCurrentMessageList(this.$props.currentChatRoomInfo);
},
// 监听输入框内容
......@@ -282,25 +281,50 @@ export default {
.avatarImg {
.otherSidesAvatarImg {
width: 20px;
height: 20px;
margin: 5px 10px 0px 10px;
}
.mySidesAvatarImg {
width: 20px;
height: 20px;
margin: 0px 10px;
}
&>div {
max-width: 50%;
.otherSides-user {
color: white;
margin-bottom: 5px;
}
.otherSides-text {
border-radius: 5px;
color: black;
margin-bottom: 5px;
padding: 5px 10px;
}
.el-imgage {
img {
width: 100%;
height: 100%;
}
}
}
&>div {
max-width: 50%;
padding: 5px 10px;
.mySides-text {
border-radius: 5px;
color: black;
margin-bottom: 5px;
padding: 5px 10px;
}
}
}
}
......
src/view/ddkz/components/chatRoomInfo.vue 0 → 100644
View file @ b900e056
<template>
<div class="ddkz-info">
<div class="ddkz-info-selection">
<el-form ref="form" :inline="true" :model="formInfo" class="demo-form-inline">
<el-form-item>
<el-select v-model="formInfo.day" placeholder="请选择日期" clearable>
<el-option v-for="item in options" :key="item" :label="item" :value="item">
</el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-select v-model="formInfo.fromUser" placeholder="请选择公告来源" clearable>
<el-option v-for="item in optionsFrom" :key="item" :label="item" :value="item">
</el-option>
</el-select>
</el-form-item>
<el-form-item>
<img class="goBack" :src="goBack" alt="" @click="goBackFn">
</el-form-item>
</el-form>
</div>
<div class="ddkz-info-content">
<div class="info-content-left">
<div class="everyDayNews" v-for="item in newsList">
<div class="everyDayTitle">
<div class="circle-light"></div>&emsp;
<span v-text="item.time"></span>&emsp;
</div>
<div class="everyDayNew">
<div class="everyTemplate">
<div v-for="item1 in item.news"
:class="['everyDayNewCard', 'cardType' + item1.teamInfo.teamType]">
<div class="everyDayNewCardTitle" v-text="item1.title"></div>
<div class="everyDayNewCardContent">
<div class="left-everyDayNew" :style="{ width: item1.attachment ? '50%' : '100%' }">
<div class="everyDayNewCardInfo">
<span v-text="item1.time"></span>&emsp;
来源：<span class="newsSource" v-text="item1.from"></span>
</div>
<div class="everyDayNewCardText" v-text="item1.content"></div>
</div>
<div class="right-everyDayNew" v-if="item1.attachment">
<template v-if="item1.type == 'PICTURE'">
<el-image :src="item1.url" :preview-src-list="[item1.url]">
</el-image>
</template>
<template v-else-if="item1.type == 'VIDEO'">
<video :src="item1.url" controls loop>
</video>
</template>
<template v-else-if="item1.type == 'EXCEL'">
<el-image :src="excelImg" @click="showLiterature(item1.attachment)">
</el-image>
</template>
<template v-else-if="item1.type == 'TEXT'">
<el-image :src="textImg" @click="showLiterature(item1.attachment)">
</el-image>
</template>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<el-tooltip placement="left" class="myButtonList">
<div class="myTools" slot="content">
<div>
<el-button size="mini" type="info" @click="showPeopleList">人员列表</el-button>
</div>
<div>
<el-button size="mini" type="info" @click="showChatRoom">聊天室</el-button>
</div>
<div>
<el-button size="mini" type="info" @click="sendNotice">发送公告</el-button>
<el-button size="mini" type="info" @click="sendEmail">邮箱</el-button>
</div>
</div>
<el-button size="mini">公告及邮箱</el-button>
</el-tooltip>
<NoticeDialog ref="myNotice" :stompClient="stompClient" :currentChatRoomInfo="currentChatRoomInfo"></NoticeDialog>
<ChatRoomDialog ref="myChatRoom" :currentChatRoomInfo="currentChatRoomInfo" :stompClient="stompClient">
</ChatRoomDialog>
<ChatRoomPeople ref="myChatRoomPeople" :peopleList="peopleList"></ChatRoomPeople>
</div>
</template>
<script>
import goBack from '@/assets/img/xjs/4.png';
import { getRecordsByPaging } from '@/api/chat/chatRecords';
import { getChatRoomInfo } from "@/api/chat/chatRoom";
import { getTime_extent } from '@/util/http_util.js';
import NoticeDialog from '@/view/ddkz/components/noticeDialog.vue';
import ChatRoomDialog from "@/view/ddkz/components/chatRoomDialog.vue";
import ChatRoomPeople from "@/view/ddkz/components/chatRoomPeople.vue";
import textImg from '@/assets/img/ddkz/tool1.png';
import excelImg from '@/assets/img/ddkz/tool5.png';
export default {
data() {
return {
goBack: goBack,
excelImg: excelImg,
textImg: textImg,
formInfo: {
day: null,
fromUser: null
},
options: [],
optionsFrom: [],
currentChatRoomInfo: {},
newsList: [],
publicNoticeList: [],
stompClient: null,
peopleList: []
}
},
components: {
NoticeDialog: NoticeDialog,
ChatRoomDialog: ChatRoomDialog,
ChatRoomPeople: ChatRoomPeople
},
methods: {
goBackFn() {
this.$router.push({ name: '导调控制模块' });
},
listChatroom(item) {
//取消群聊的订阅
for (const sub in this.stompClient.subscriptions) {
if (sub.startsWith("multicastMeeting")) {
this.stompClient.unsubscribe(sub);
}
}
//订阅聊天室主题，订阅功能中设置ID：
this.stompClient.subscribe('/topic/multicast/' + item.id, res => {
this.getRecordsByPagingFn(item);
this.$nextTick(() => {
this.$refs.myNotice.handleClose();
})
}, { id: "multicastMeeting" + item.id + new Date().getTime() });
},
//分页查询群聊天记录
getRecordsByPagingFn(item) {
getRecordsByPaging(item.id, 1, 100, '2023-01-01 00:00:00', getTime_extent(0).pre_rq_end).then(res1 => {
this.publicNoticeList = res1.records;
this.dataOrderByParams(null, null);
let newsArr = [], dayArr = [];
this.optionsFrom = [];
this.publicNoticeList.forEach(item => {
let obj = { time: '', news: [] };
if (this.optionsFrom.indexOf(item.fromUserId) == -1) {
this.optionsFrom.push(item.fromUserId);
}
if (newsArr.some(newsArrChild => { return newsArrChild.time == item.createTime.slice(0, 10) })) {
newsArr.forEach(item1 => {
if (item1.time == item.createTime.slice(0, 10)) {
item1.news.push({ time: item.createTime, title: item.title, content: item.content, from: item.fromUserId, teamInfo: item.teamInfo });
}
})
} else {
obj.time = item.createTime.slice(0, 10);
dayArr.push(item.createTime.slice(0, 10));
this.options = dayArr;
obj.news.push({ time: item.createTime, title: item.title, content: item.content, from: item.fromUserId, teamInfo: item.teamInfo });
newsArr.push(obj);
}
});
});
},
dataOrderByParams(day, user) {
let newsArr = [];
let tmpArr = this.publicNoticeList;
if (day == null && user != null) {
tmpArr = this.publicNoticeList.filter(item => { return item.fromUserId == user });
} else if (day != null && user == null) {
tmpArr = this.publicNoticeList.filter(item => { return item.createTime.slice(0, 10) == day });
} else if (day != null && user != null) {
tmpArr = this.publicNoticeList.filter(item => { return item.fromUserId == user && item.createTime.slice(0, 10) == day });
}
tmpArr.forEach(item => {
let obj = { time: '', news: [] };
let fileUrl = null;
fileUrl = item.attachment ? 'api/rest/file/viewPicture/CHAT?objectName=' + item.attachment : null;
if (newsArr.some(newsArrChild => { return newsArrChild.time == item.createTime.slice(0, 10) })) {
newsArr.forEach(item1 => {
if (item1.time == item.createTime.slice(0, 10)) {
item1.news.push({ time: item.createTime, title: item.title, content: item.content, from: item.fromUserId, teamInfo: item.teamInfo, url: fileUrl, type: item.messageForm, attachment: item.attachment });
}
})
} else {
obj.time = item.createTime.slice(0, 10);
obj.news.push({ time: item.createTime, title: item.title, content: item.content, from: item.fromUserId, teamInfo: item.teamInfo, url: fileUrl, type: item.messageForm, attachment: item.attachment });
newsArr.push(obj);
}
});
this.newsList = newsArr;
},
sendNotice() {
this.$nextTick(() => {
this.$refs.myNotice.showDialog();
})
},
showChatRoom() {
this.$nextTick(() => {
this.$refs.myChatRoom.showDialog();
})
},
showPeopleList() {
this.$nextTick(() => {
this.$refs.myChatRoomPeople.showDialog();
})
},
sendEmail() {
alert('敬请期待');
},
getCurrentTeamPeople(item) {
//查询聊天组的人员
getChatRoomInfo(item.id, this.userInfo.account).then(res => {
this.peopleList = res.chatRoomMemberRelationBOList;
});
},
showLiterature(url) {
window.open("api/rest/file/download/CHAT/" + url);
}
},
watch: {
'formInfo.day'(newVal, oldVal) {
if (newVal == '') {
this.formInfo.day = null;
this.dataOrderByParams(null, this.formInfo.fromUser);
} else {
this.dataOrderByParams(newVal, this.formInfo.fromUser);
}
},
'formInfo.fromUser'(newVal, oldVal) {
if (newVal == '') {
this.formInfo.fromUser = null;
this.dataOrderByParams(this.formInfo.day, null);
} else {
this.dataOrderByParams(this.formInfo.day, newVal);
}
}
},
computed: {
userInfo() {
if (this.$store.getters.userInfo) {
return this.$store.getters.userInfo;
} else {
return { account: "" };
}
}
},
activated() {
this.currentChatRoomInfo = this.$route.params.data;
this.stompClient = this.$route.params.client;
this.listChatroom(this.currentChatRoomInfo);
//获取当前组成员
this.getCurrentTeamPeople(this.currentChatRoomInfo);
//获取当前公告列表
this.getRecordsByPagingFn(this.currentChatRoomInfo);
}
}
</script>
<style lang="scss">
.ddkz-info {
width: 100%;
height: 100%;
.ddkz-info-selection {
// display: none;
width: 100%;
height: 40px;
text-align: right;
.el-input {
float: left;
width: 200px;
margin-right: 30px;
.el-input__inner {
background: none;
color: #ffff;
border: 1px solid #3a5f94c9 !important;
}
}
.goBack {
width: 40px;
height: 40px;
margin-right: 35px;
cursor: pointer;
}
}
.ddkz-info-content {
width: 100%;
height: calc(93% - 60px);
margin-top: 20px;
.info-content-left {
width: calc(100% - 20px);
height: 100%;
float: left;
padding-left: 35px;
box-sizing: border-box;
background-image: url(@/assets/img/ddkz/bg3.png);
background-size: cover;
overflow-y: auto;
.everyDayNews {
width: 100%;
height: 230px;
margin-bottom: 50px;
padding: 6px 0px;
box-sizing: border-box;
.everyDayTitle {
width: 100%;
height: 30px;
color: white;
font-size: 20px;
font-weight: 600;
cursor: pointer;
.circle-light {
width: 15px;
height: 15px;
float: left;
margin-top: 7.5px;
border-radius: 50%;
background: white;
box-shadow: 0px 0px 20px 6px white;
}
}
.everyDayNew {
width: 100%;
height: 220px;
padding: 0px 10px;
box-sizing: border-box;
overflow-x: auto;
overflow-y: hidden;
.everyTemplate {
width: 98%;
height: 100%;
padding-bottom: 10px;
box-sizing: border-box;
overflow-x: scroll;
overflow-y: hidden;
display: -webkit-box;
}
.everyDayNewCard {
width: calc(33% - 28px);
height: calc(100% - 20px);
float: left;
margin-top: 20px;
margin-left: 25px;
padding: 15px 30px;
box-sizing: border-box;
background-image: url(@/assets/img/ddkz/new3.png);
background-size: 100% 100%;
.everyDayNewCardTitle {
width: 100%;
height: 30px;
font-size: 18px;
font-weight: 600;
border-bottom: 1px solid #7b7b7bdd;
}
.everyDayNewCardContent {
width: 100%;
height: 110px;
margin-top: 10px;
display: flex;
.left-everyDayNew {
width: 50%;
height: 100%;
.everyDayNewCardInfo {
width: 100%;
height: 20px;
margin-top: 10px;
font-size: 12px;
font-weight: 600;
color: white;
.newsSource {
color: red;
}
}
.everyDayNewCardText {
width: 100%;
// height: calc(100% - 58px);
margin-top: 5px;
font-size: 12px;
font-weight: 600;
color: white;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 5;
/* 控制显示的行数 */
overflow: hidden;
word-break: break-all
}
}
.right-everyDayNew {
width: 50%;
height: 100%;
text-align: center;
img {
width: 100%;
height: 100%;
}
video {
width: 100%;
height: 100%;
}
}
}
}
.cardTypeDIRECTOR {
background-image: url(@/assets/img/ddkz/new3.png);
background-size: 100% 100%;
}
.cardTypeBLUE {
background-image: url(@/assets/img/ddkz/new1.png);
background-size: 100% 100%;
}
.cardTypeRED {
background-image: url(@/assets/img/ddkz/new2.png);
background-size: 100% 100%;
}
}
}
}
}
.myButtonList {
position: absolute;
right: -10px;
bottom: 30px;
}
}
</style>
\ No newline at end of file
src/view/ddkz/components/noticeDialog.vue
View file @ b900e056
......@@ -11,7 +11,7 @@
</el-form-item>
<el-form-item label="附件">
<el-upload class="upload-demo" action="" :on-change="handleChange" :on-remove="handleRemove"
:file-list="form.fileList" :auto-upload="false" multiple :accept="formatFile">
:file-list="form.fileList" :auto-upload="false" :accept="formatFile">
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">支持导入word,pdf,ppt,mlf,xls!!!</div>
</el-upload>
......@@ -50,15 +50,12 @@ export default {
elDragDialog
},
props: {
visible: Boolean,
stompClient: Object,
currentChatRoomInfo: Object,
analogData: Array
currentChatRoomInfo: Object
},
methods: {
handleClose() {
this.dialogVisible = false;
// this.$emit('handleCancel');
},
showDialog() {
this.dialogVisible = true;
......@@ -81,39 +78,25 @@ export default {
});
},
handleRemove() { },
handleRemove() {
this.form.fileList = [];
},
sendNotice() {
this.myStompClient.send(`/app/sendToChatRoom/${this.currentChatRoom.id}/${this.currentChatRoom.teamId}`, {}, JSON.stringify(this.form));
},
listChatroom(data) {
//取消群聊的订阅
for (const sub in this.stompClient.subscriptions) {
if (sub.startsWith("multicast")) {
this.stompClient.unsubscribe(sub);
}
}
data.forEach(e => {
//订阅聊天室主题，订阅功能中设置ID：
this.stompClient.subscribe('/topic/multicast/' + e.id, data => {
this.$emit('handleCancel');
this.$emit('showInfo', true, this.currentChatRoom);
}, { id: "multicast" + e.id + new Date().getTime() });
})
this.form = {
title: '',
content: '',
attachment: '',
messageForm: null
};
this.handleRemove();
},
handleDialogOpen() {
this.myStompClient = this.$props.stompClient;
this.currentChatRoom = this.$props.currentChatRoomInfo;
this.analogDataList = this.$props.analogData;
this.listChatroom(this.analogDataList);
}
},
// mounted() {
// this.dialogVisible = this.$props.visible;
// this.myStompClient = this.$props.stompClient;
// this.currentChatRoom = this.$props.currentChatRoomInfo;
// this.analogDataList = this.$props.analogData;
// this.listChatroom(this.analogDataList);
// }
}
}
</script>
......
src/view/ddkz/ddkzzs.vue
View file @ b900e056
......@@ -2,7 +2,7 @@
<div class="ddkz">
<transition name="animate__animated animate__bounce" enter-active-class="animate__bounceInLeft"
leave-active-class="animate__bounceOutLeft" mode="out-in">
<div class="ddkz-all" v-if="!isInfo">
<div class="ddkz-all">
<div class="ddkz-selection">
<el-form ref="form" :inline="true" :model="form" label-width="80px" class="demo-form-inline">
<el-form-item>
......@@ -21,7 +21,7 @@
</div>
<div class="ddkz-content">
<div v-for="item in analogData" class="content-card bk-ddkz-animation animate__animated animate__ZoomIn"
@click="showInfo(true, item)">
@click="showInfo(item)">
<div class="card-title" v-text="item.nickname" :title="item.nickname"></div>
<div class="card-date" v-text="item.createTime"></div>
<div class="card-text" v-text="item.conRemark" :title="item.conRemark"></div>
......@@ -35,117 +35,20 @@
<div v-show="item.isYellow">
<div class="isYellow circle"></div>
</div>
</div>
</div>
</div>
</div>
<div class="ddkz-info" v-else-if="isInfo">
<div class="ddkz-info-selection">
<el-form ref="form" :inline="true" :model="formInfo" class="demo-form-inline">
<el-form-item>
<el-select v-model="formInfo.day" placeholder="请选择日期" clearable>
<el-option v-for="item in options" :key="item" :label="item" :value="item">
</el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-select v-model="formInfo.fromUser" placeholder="请选择公告来源" clearable>
<el-option v-for="item in optionsFrom" :key="item" :label="item" :value="item">
</el-option>
</el-select>
</el-form-item>
<el-form-item>
<img class="goBack" :src="goBack" alt="" @click="showInfo(false, null)">
</el-form-item>
</el-form>
</div>
<div class="ddkz-info-content">
<div class="info-content-left">
<div class="everyDayNews" v-for="item in newsList">
<div class="everyDayTitle">
<div class="circle-light"></div>&emsp;
<span v-text="item.time"></span>&emsp;
</div>
<div class="everyDayNew">
<div class="everyTemplate">
<div v-for="item1 in item.news"
:class="['everyDayNewCard', 'cardType' + item1.teamInfo.teamType]">
<div class="everyDayNewCardTitle" v-text="item1.title"></div>
<div class="everyDayNewCardContent">
<div class="left-everyDayNew"
:style="{ width: item1.attachment ? '50%' : '100%' }">
<div class="everyDayNewCardInfo">
<span v-text="item1.time"></span>&emsp;
来源：<span class="newsSource" v-text="item1.from"></span>
</div>
<div class="everyDayNewCardText" v-text="item1.content"></div>
</div>
<div class="right-everyDayNew" v-if="item1.attachment">
<template v-if="item1.type == 'PICTURE'">
<el-image :src="item1.url" :preview-src-list="[item1.url]">
</el-image>
</template>
<template v-else-if="item1.type == 'VIDEO'">
<video :src="item1.url" controls loop>
</video>
</template>
<template v-else-if="item1.type == 'EXCEL'">
<el-image :src="excelImg" @click="showLiterature(item1.attachment)">
</el-image>
</template>
<template v-else-if="item1.type == 'TEXT'">
<el-image :src="textImg" @click="showLiterature(item1.attachment)">
</el-image>
</template>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</transition>
<NoticeDialog ref="myNotice" :stompClient="stompClient"
:currentChatRoomInfo="currentChatRoomInfo" :analogData="analogData" @showInfo="showInfo"></NoticeDialog>
<ChatRoomDialog ref="myChatRoom" :analogData="analogData" :currentChatRoomInfo="currentChatRoomInfo" :stompClient="stompClient">
</ChatRoomDialog>
<ChatRoomPeople ref="myChatRoomPeople" :peopleList="peopleList"></ChatRoomPeople>
<el-tooltip placement="left" class="myButtonList" v-if="isInfo">
<div class="myTools" slot="content">
<div>
<el-button size="mini" type="info" @click="showPeopleList">人员列表</el-button>
</div>
<div>
<el-button size="mini" type="info" @click="showChatRoom">聊天室</el-button>
</div>
<div>
<el-button size="mini" type="info" @click="sendNotice">发送公告</el-button>
<el-button size="mini" type="info" @click="sendEmail">邮箱</el-button>
</div>
</div>
<el-button size="mini">公告及邮箱</el-button>
</el-tooltip>
</div>
</template>
<script>
import "animate.css";
import goBack from '../../assets/img/xjs/4.png';
import arrow from '../../assets/img/ddkz/8.png';
import avatar from '../../assets/img/ddkz/headPhoto.jpg';
import NoticeDialog from '../../view/ddkz/components/noticeDialog.vue';
import ChatRoomDialog from "./components/chatRoomDialog.vue";
import ChatRoomPeople from "@/view/ddkz/components/chatRoomPeople.vue";
import { getChatRoomList, getChatRoomInfo } from "../../api/chat/chatRoom";
import { getRecordsByPaging, getFileUrl } from '../../api/chat/chatRecords';
import textImg from '@/assets/img/ddkz/tool1.png';
import excelImg from '@/assets/img/ddkz/tool5.png';
import '../../util/stomp.min.js'
import { getTime_extent, download } from '@/util/http_util.js';
import { getChatRoomList } from "../../api/chat/chatRoom";
import '@/util/stomp.min.js'
import { getTime_extent } from '@/util/http_util.js';
export default {
data() {
......@@ -154,190 +57,32 @@ export default {
keyWord: null,
dateRange: []
},
formInfo: {
day: null,
fromUser: null
},
analogData: [],
isInfo: false,
options: [],
optionsFrom: [],
goBack: goBack,
newsList: [],
arrow: arrow,
personList: [],
publicNoticeList: [],
chatPerson: {
name: '',
isLine: undefined
},
chatMessageList: [
{ id: 1, name: 'xxx', isMe: false, list: ['会议主题是xxx', '主要强调两个方面'] },
{ id: 2, name: 'summer', isMe: true, list: ['确定主题', '同意'] },
{ id: 1, name: 'xxx', isMe: false, list: ['会议主题是xxx', '主要强调两个方面'] },
{ id: 2, name: 'summer', isMe: true, list: ['确定主题', '同意'] },
{ id: 1, name: 'xxx', isMe: false, list: ['会议主题是xxx', '主要强调两个方面'] },
{ id: 2, name: 'summer', isMe: true, list: ['确定主题', '同意'] }
],
avatar: avatar,
sendMessage: '',
// visible: false,
// chatRoomVisible: false,
// chatRoomPeopleVisible: false,
peopleList: [],
// chatMessageList: [],
currentChatRoomInfo: {},
stompClient: {},
ws: null,
excelImg: excelImg,
textImg: textImg
ws: null
}
},
components: {
NoticeDialog: NoticeDialog,
ChatRoomDialog: ChatRoomDialog,
ChatRoomPeople: ChatRoomPeople
},
methods: {
onSearch() {
},
showInfo(value, item) {
this.currentChatRoomInfo = item;
this.isInfo = value;
if (value) {
//查询聊天组的人员
getChatRoomInfo(item.id, this.userInfo.account).then(res => {
this.peopleList = res.chatRoomMemberRelationBOList;
});
this.getRecordsByPagingFn(item);
}
},
//分页查询群聊天记录
getRecordsByPagingFn(item) {
getRecordsByPaging(item.id, 1, 100, this.form.dateRange.length > 0 ? this.form.dateRange[0] : '2020-01-01 00:00:00', this.form.dateRange.length > 0 ? this.form.dateRange[1] : getTime_extent(0).pre_rq_end).then(res1 => {
this.publicNoticeList = res1.records;
this.dataOrderByParams(null, null);
let newsArr = [], dayArr = [];
this.optionsFrom = [];
this.publicNoticeList.forEach(item => {
let obj = { time: '', news: [] };
if (this.optionsFrom.indexOf(item.fromUserId) == -1) {
this.optionsFrom.push(item.fromUserId);
}
if (newsArr.some(newsArrChild => { return newsArrChild.time == item.createTime.slice(0, 10) })) {
newsArr.forEach(item1 => {
if (item1.time == item.createTime.slice(0, 10)) {
item1.news.push({ time: item.createTime, title: item.title, content: item.content, from: item.fromUserId, teamInfo: item.teamInfo });
}
})
} else {
obj.time = item.createTime.slice(0, 10);
dayArr.push(item.createTime.slice(0, 10));
this.options = dayArr;
obj.news.push({ time: item.createTime, title: item.title, content: item.content, from: item.fromUserId, teamInfo: item.teamInfo });
newsArr.push(obj);
}
});
});
},
dataOrderByParams(day, user) {
let newsArr = [];
let tmpArr = this.publicNoticeList;
if (day == null && user != null) {
tmpArr = this.publicNoticeList.filter(item => { return item.fromUserId == user });
} else if (day != null && user == null) {
tmpArr = this.publicNoticeList.filter(item => { return item.createTime.slice(0, 10) == day });
} else if (day != null && user != null) {
tmpArr = this.publicNoticeList.filter(item => { return item.fromUserId == user && item.createTime.slice(0, 10) == day });
}
tmpArr.forEach(item => {
let obj = { time: '', news: [] };
let fileUrl = null;
fileUrl = item.attachment ? 'api/rest/file/viewPicture/CHAT?objectName=' + item.attachment : null;
if (newsArr.some(newsArrChild => { return newsArrChild.time == item.createTime.slice(0, 10) })) {
newsArr.forEach(item1 => {
if (item1.time == item.createTime.slice(0, 10)) {
item1.news.push({ time: item.createTime, title: item.title, content: item.content, from: item.fromUserId, teamInfo: item.teamInfo, url: fileUrl, type: item.messageForm, attachment: item.attachment });
}
})
} else {
obj.time = item.createTime.slice(0, 10);
obj.news.push({ time: item.createTime, title: item.title, content: item.content, from: item.fromUserId, teamInfo: item.teamInfo, url: fileUrl, type: item.messageForm, attachment: item.attachment });
newsArr.push(obj);
}
});
this.newsList = newsArr;
},
selectPerson(item) {
this.chatPerson = item;
},
sendMessageFn() {
if (this.sendMessage.trim().length > 0) {
this.chatMessageList.push({ id: 1, name: 'xxx', isMe: true, list: [this.sendMessage] });
setTimeout(() => {
this.keepBottom();
this.sendMessage = '';
}, 100);
} else {
this.$message.warning('不能发送空白信息');
}
},
keepBottom() {
const divscll = document.getElementById('chatContent');
divscll.scrollTop = divscll.scrollHeight;
},
// closeDialog() {
// this.visible = false;
// },
sendNotice() {
// this.visible = true;
this.$nextTick(() => {
this.$refs.myNotice.showDialog();
})
// if (this.$refs.myNotice) {
// this.$refs.myNotice.showDialog();
// }
},
// closeDialogChatRoom() {
// this.chatRoomVisible = false;
// },
showChatRoom() {
// this.chatRoomVisible = true;
this.$nextTick(() => {
this.$refs.myChatRoom.showDialog();
})
// if (this.$refs.myChatRoom) {
// this.$refs.myChatRoom.showDialog();
// }
},
// closeDialogChatRoomPeople() {
// this.chatRoomPeopleVisible = false;
// },
showPeopleList() {
this.$nextTick(() => {
this.$refs.myChatRoomPeople.showDialog();
})
showInfo(item) {
this.$router.push({ name: '聊天室详情' + this.$route.meta.type_name,params:{data:item,client:this.stompClient} });
},
queryChatRoomListFn(params) {
getChatRoomList(params).then(res => {
this.analogData = res;
});
},
sendEmail() {
alert('敬请期待');
},
connect() {
return new Promise((resolve, reject) => {
this.ws = new WebSocket(`ws://${window.location.host}/websocket/my-websocket`);
this.stompClient && this.stompClient.connected && this.stompClient.disconnect();
this.stompClient = Stomp.over(this.ws);
this.stompClient.heartbeat.outgoing = 20000; //若使用STOMP 1.1 版本，默认开启了心跳检测机制（默认值都是10000ms）
this.stompClient.heartbeat.incoming = 0; //客户端不从服务端接收心跳包
this.stompClient.heartbeat.incoming = 20000; //客户端不从服务端接收心跳包
this.stompClient.connect({ name: this.userInfo.account }, frame => {
resolve("连接成功")
}, err => {
debugger
console.log(typeof err == "string" ? err : err.headers.message)
reject(typeof err == "string" ? err : err.headers.message)
});
......@@ -345,11 +90,8 @@ export default {
})
},
searchChatList() {
this.queryChatRoomListFn({ startTime: this.form.dateRange.length > 0 ? this.form.dateRange[0] : null, endTime: this.form.dateRange.length > 0 ? this.form.dateRange[1] : null, userId: this.userInfo.account, keyword: this.form.keyWord == '' ? null : this.form.keyWord });
this.queryChatRoomListFn({ startTime: this.form.dateRange&&this.form.dateRange.length > 0 ? this.form.dateRange[0] : '2023-01-01 00:00:00', endTime: this.form.dateRange&&this.form.dateRange.length > 0 ? this.form.dateRange[1] : getTime_extent(0).pre_rq_end, userId: this.userInfo.account, keyword: this.form.keyWord == '' ? null : this.form.keyWord });
},
showLiterature(url) {
window.open("api/rest/file/download/CHAT/" + url);
}
},
computed: {
userInfo() {
......@@ -360,24 +102,6 @@ export default {
}
}
},
watch: {
'formInfo.day'(newVal, oldVal) {
if (newVal == '') {
this.formInfo.day = null;
this.dataOrderByParams(null, this.formInfo.fromUser);
} else {
this.dataOrderByParams(newVal, this.formInfo.fromUser);
}
},
'formInfo.fromUser'(newVal, oldVal) {
if (newVal == '') {
this.formInfo.fromUser = null;
this.dataOrderByParams(this.formInfo.day, null);
} else {
this.dataOrderByParams(this.formInfo.day, newVal);
}
}
},
mounted() {
this.queryChatRoomListFn({ userId: this.userInfo.account });
this.connect();
......
src/view/sjgl/ddkzConfig/ddkzConfigAdd.vue
View file @ b900e056
......@@ -57,9 +57,9 @@
<div class="ta-transfer_btn">
<el-button type="primary" :disabled='item.parameter.selected_num == 0'
@click="removeGoods(index)" icon="el-icon-arrow-left">离席</el-button>
@click="removePeopleFromMeeting(index)" icon="el-icon-arrow-left">离席</el-button>
<el-button type="primary" :disabled='item.invoking.selected_num == 0'
@click='addRemoveGoods(index)'>参会
@click='addPeopleToMeeting(index)'>参会
<i class="el-icon-arrow-right el-icon--right"></i>
</el-button>
</div>
......@@ -193,7 +193,7 @@ export default {
}
);
},
addRemoveGoods(index) { //添加或者删除物品
addPeopleToMeeting(index) { //参会
let formData = this.formData.teams[index].invoking.checkedCities
for (const key in formData) {
for (const k in this.allData) {
......@@ -211,7 +211,7 @@ export default {
this.formData.teams[index].invoking.checkedCities = []
this.formData.teams[index].invoking.checkAll = false
},
removeGoods(index) { //拿出
removePeopleFromMeeting(index) { //离席
let formData = this.formData.teams[index].parameter.checkedCities
for (const key in formData) {
for (const k in this.formData.teams[index].wpinfo) {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment