Skip to content

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

聊天室优化

parent f1c9d809
Hide 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[ ...@@ -135,4 +135,12 @@ export default[
parent_name: "数据管理"//人物详情对应的一级菜单名称 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 @@ ...@@ -7,22 +7,26 @@
<div v-for="item in chatMessageList" class="everyMessage"> <div v-for="item in chatMessageList" class="everyMessage">
<div :style="{ justifyContent: item.fromUserId == userInfo.account ? 'flex-end' : 'flex-start' }"> <div :style="{ justifyContent: item.fromUserId == userInfo.account ? 'flex-end' : 'flex-start' }">
<template v-if="item.fromUserId != userInfo.account"> <template v-if="item.fromUserId != userInfo.account">
<img class="avatarImg" :src="avatar" alt=""> <img class="otherSidesAvatarImg" :src="avatar" alt="">
<!-- <div v-text="item.content" style="background-color:white"></div> --> <div class="otherSides">
<div v-if="item.messageForm == 'TEXT'" v-html="item.content" style="background-color: white;"> <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 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> </div>
<el-image v-else-if="item.messageForm == 'PICTURE'" style="width: 150px; height: 100px"
:src="item.content" :preview-src-list="[item.content]">
</el-image>
</template> </template>
<template v-else-if="item.fromUserId == userInfo.account"> <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;"> style="background-color: #85ce61;">
</div> </div>
<el-image v-else-if="item.messageForm == 'PICTURE'" style="width: 150px; height: 100px" <el-image v-else-if="item.messageForm == 'PICTURE'" style="width: 150px; height: 100px"
:src="item.content" :preview-src-list="[item.content]"> :src="item.content" :preview-src-list="[item.content]">
</el-image> </el-image>
<img class="avatarImg" :src="avatar" alt=""> <img class="MySidesAvatarImg" :src="avatar" alt="">
</template> </template>
</div> </div>
</div> </div>
...@@ -49,7 +53,7 @@ import { getRecordsByPagingTeam } from '../../../api/chat/chatRecords'; ...@@ -49,7 +53,7 @@ import { getRecordsByPagingTeam } from '../../../api/chat/chatRecords';
import elDragDialog from "@/util/directive/el-dragDialog"; import elDragDialog from "@/util/directive/el-dragDialog";
import onPaste from '@/util/onPaste.js'; import onPaste from '@/util/onPaste.js';
import { upLoadFiles } from '@/api/chat/chatRoom'; 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 { export default {
data() { data() {
return { return {
...@@ -59,7 +63,7 @@ export default { ...@@ -59,7 +63,7 @@ export default {
chatMessageList: [], chatMessageList: [],
// stompClient: '', // stompClient: '',
// ws: null, // ws: null,
analogDataList: [], // analogDataList: [],
currentChatRoom: {}, currentChatRoom: {},
myStompClient: null, myStompClient: null,
file: null, file: null,
...@@ -72,7 +76,6 @@ export default { ...@@ -72,7 +76,6 @@ export default {
}, },
props: { props: {
visible: Boolean, visible: Boolean,
analogData: Array,
stompClient: Object, stompClient: Object,
currentChatRoomInfo: Object currentChatRoomInfo: Object
...@@ -148,31 +151,27 @@ export default { ...@@ -148,31 +151,27 @@ export default {
keepBottom() { keepBottom() {
this.$refs.chatContent.scrollTop = this.$refs.chatContent.scrollHeight; this.$refs.chatContent.scrollTop = this.$refs.chatContent.scrollHeight;
}, },
listChatroom(data) { listChatroom(item) {
//取消群聊的订阅 //取消群聊的订阅
for (const sub in this.stompClient.subscriptions) { for (const sub in this.stompClient.subscriptions) {
if (sub.startsWith("multicast")) { if (sub.startsWith("multicastTeam")) {
this.stompClient.unsubscribe(sub); this.stompClient.unsubscribe(sub);
} }
} }
data.forEach(e => { this.stompClient.subscribe('/topic/multicast/' + item.id + '/' + item.teamId, data => {
//订阅聊天室主题，订阅功能中设置ID： this.chatMessageList.push({
this.stompClient.subscribe('/topic/multicast/' + e.id + '/' + e.teamId, data => { content: JSON.parse(data.body).content,
this.chatMessageList.push({ fromUserId: data.headers.fromUserId,
content: JSON.parse(data.body).content, messageForm: JSON.parse(data.body).messageForm
fromUserId: data.headers.fromUserId, });
messageForm: JSON.parse(data.body).messageForm this.$nextTick(() => {
}); this.keepBottom();
this.$nextTick(() => { });
this.keepBottom(); }, { id: "multicastTeam" + item.id + new Date().getTime() });
});
}, { id: "multicast" + e.id + new Date().getTime() });
})
}, },
getCurrentMessageList(item) { 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.chatMessageList = res1.records;
this.$nextTick(() => { this.$nextTick(() => {
this.keepBottom(); this.keepBottom();
...@@ -180,11 +179,11 @@ export default { ...@@ -180,11 +179,11 @@ export default {
}) })
}, },
handleDialogOpen() { handleDialogOpen() {
this.analogDataList = this.$props.analogData; // this.analogDataList = this.$props.analogData;
this.currentChatRoom = this.$props.currentChatRoomInfo; this.currentChatRoom = this.$props.currentChatRoomInfo;
this.myStompClient = this.$props.stompClient; this.myStompClient = this.$props.stompClient;
//订阅 //订阅
this.listChatroom(this.analogDataList); this.listChatroom(this.currentChatRoom);
this.getCurrentMessageList(this.$props.currentChatRoomInfo); this.getCurrentMessageList(this.$props.currentChatRoomInfo);
}, },
// 监听输入框内容 // 监听输入框内容
...@@ -282,25 +281,50 @@ export default { ...@@ -282,25 +281,50 @@ export default {
.avatarImg { .otherSidesAvatarImg {
width: 20px; width: 20px;
height: 20px; height: 20px;
margin: 0px 10px; margin: 5px 10px 0px 10px;
} }
.el-imgage { .mySidesAvatarImg {
img { width: 20px;
width: 100%; height: 20px;
height: 100%; margin: 0px 10px;
}
} }
&>div { &>div {
max-width: 50%; max-width: 50%;
padding: 5px 10px;
.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%;
}
}
}
.mySides-text {
border-radius: 5px; border-radius: 5px;
color: black; 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 @@ ...@@ -11,7 +11,7 @@
</el-form-item> </el-form-item>
<el-form-item label="附件"> <el-form-item label="附件">
<el-upload class="upload-demo" action="" :on-change="handleChange" :on-remove="handleRemove" <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> <el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">支持导入word,pdf,ppt,mlf,xls!!!</div> <div slot="tip" class="el-upload__tip">支持导入word,pdf,ppt,mlf,xls!!!</div>
</el-upload> </el-upload>
...@@ -50,15 +50,12 @@ export default { ...@@ -50,15 +50,12 @@ export default {
elDragDialog elDragDialog
}, },
props: { props: {
visible: Boolean,
stompClient: Object, stompClient: Object,
currentChatRoomInfo: Object, currentChatRoomInfo: Object
analogData: Array
}, },
methods: { methods: {
handleClose() { handleClose() {
this.dialogVisible = false; this.dialogVisible = false;
// this.$emit('handleCancel');
}, },
showDialog() { showDialog() {
this.dialogVisible = true; this.dialogVisible = true;
...@@ -81,39 +78,25 @@ export default { ...@@ -81,39 +78,25 @@ export default {
}); });
}, },
handleRemove() { }, handleRemove() {
this.form.fileList = [];
},
sendNotice() { sendNotice() {
this.myStompClient.send(`/app/sendToChatRoom/${this.currentChatRoom.id}/${this.currentChatRoom.teamId}`, {}, JSON.stringify(this.form)); this.myStompClient.send(`/app/sendToChatRoom/${this.currentChatRoom.id}/${this.currentChatRoom.teamId}`, {}, JSON.stringify(this.form));
}, this.form = {
listChatroom(data) { title: '',
//取消群聊的订阅 content: '',
for (const sub in this.stompClient.subscriptions) { attachment: '',
if (sub.startsWith("multicast")) { messageForm: null
this.stompClient.unsubscribe(sub); };
} this.handleRemove();
}
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() });
})
}, },
handleDialogOpen() { handleDialogOpen() {
this.myStompClient = this.$props.stompClient; this.myStompClient = this.$props.stompClient;
this.currentChatRoom = this.$props.currentChatRoomInfo; 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> </script>
......
src/view/ddkz/ddkzzs.vue
View file @ b900e056
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<div class="ddkz"> <div class="ddkz">
<transition name="animate__animated animate__bounce" enter-active-class="animate__bounceInLeft" <transition name="animate__animated animate__bounce" enter-active-class="animate__bounceInLeft"
leave-active-class="animate__bounceOutLeft" mode="out-in"> leave-active-class="animate__bounceOutLeft" mode="out-in">
<div class="ddkz-all" v-if="!isInfo"> <div class="ddkz-all">
<div class="ddkz-selection"> <div class="ddkz-selection">
<el-form ref="form" :inline="true" :model="form" label-width="80px" class="demo-form-inline"> <el-form ref="form" :inline="true" :model="form" label-width="80px" class="demo-form-inline">
<el-form-item> <el-form-item>
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
</div> </div>
<div class="ddkz-content"> <div class="ddkz-content">
<div v-for="item in analogData" class="content-card bk-ddkz-animation animate__animated animate__ZoomIn" <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-title" v-text="item.nickname" :title="item.nickname"></div>
<div class="card-date" v-text="item.createTime"></div> <div class="card-date" v-text="item.createTime"></div>
<div class="card-text" v-text="item.conRemark" :title="item.conRemark"></div> <div class="card-text" v-text="item.conRemark" :title="item.conRemark"></div>
...@@ -35,117 +35,20 @@ ...@@ -35,117 +35,20 @@
<div v-show="item.isYellow"> <div v-show="item.isYellow">
<div class="isYellow circle"></div> <div class="isYellow circle"></div>
</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>
</div> </div>
</div> </div>
</transition> </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> </div>
</template> </template>
<script> <script>
import "animate.css"; import "animate.css";
import goBack from '../../assets/img/xjs/4.png'; import { getChatRoomList } from "../../api/chat/chatRoom";
import arrow from '../../assets/img/ddkz/8.png'; import '@/util/stomp.min.js'
import avatar from '../../assets/img/ddkz/headPhoto.jpg'; import { getTime_extent } from '@/util/http_util.js';
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';
export default { export default {
data() { data() {
...@@ -154,190 +57,32 @@ export default { ...@@ -154,190 +57,32 @@ export default {
keyWord: null, keyWord: null,
dateRange: [] dateRange: []
}, },
formInfo: {
day: null,
fromUser: null
},
analogData: [], 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: {}, stompClient: {},
ws: null, ws: null
excelImg: excelImg,
textImg: textImg
} }
}, },
components: {
NoticeDialog: NoticeDialog,
ChatRoomDialog: ChatRoomDialog,
ChatRoomPeople: ChatRoomPeople
},
methods: { methods: {
onSearch() { showInfo(item) {
this.$router.push({ name: '聊天室详情' + this.$route.meta.type_name,params:{data:item,client:this.stompClient} });
},
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();
})
}, },
queryChatRoomListFn(params) { queryChatRoomListFn(params) {
getChatRoomList(params).then(res => { getChatRoomList(params).then(res => {
this.analogData = res; this.analogData = res;
}); });
}, },
sendEmail() {
alert('敬请期待');
},
connect() { connect() {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
this.ws = new WebSocket(`ws://${window.location.host}/websocket/my-websocket`); this.ws = new WebSocket(`ws://${window.location.host}/websocket/my-websocket`);
this.stompClient && this.stompClient.connected && this.stompClient.disconnect(); this.stompClient && this.stompClient.connected && this.stompClient.disconnect();
this.stompClient = Stomp.over(this.ws); this.stompClient = Stomp.over(this.ws);
this.stompClient.heartbeat.outgoing = 20000; //若使用STOMP 1.1 版本，默认开启了心跳检测机制（默认值都是10000ms） 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 => { this.stompClient.connect({ name: this.userInfo.account }, frame => {
resolve("连接成功") resolve("连接成功")
}, err => { }, err => {
debugger
console.log(typeof err == "string" ? err : err.headers.message) console.log(typeof err == "string" ? err : err.headers.message)
reject(typeof err == "string" ? err : err.headers.message) reject(typeof err == "string" ? err : err.headers.message)
}); });
...@@ -345,11 +90,8 @@ export default { ...@@ -345,11 +90,8 @@ export default {
}) })
}, },
searchChatList() { 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: { computed: {
userInfo() { userInfo() {
...@@ -360,24 +102,6 @@ export default { ...@@ -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() { mounted() {
this.queryChatRoomListFn({ userId: this.userInfo.account }); this.queryChatRoomListFn({ userId: this.userInfo.account });
this.connect(); this.connect();
......
src/view/sjgl/ddkzConfig/ddkzConfigAdd.vue
View file @ b900e056
...@@ -57,9 +57,9 @@ ...@@ -57,9 +57,9 @@
<div class="ta-transfer_btn"> <div class="ta-transfer_btn">
<el-button type="primary" :disabled='item.parameter.selected_num == 0' <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' <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> <i class="el-icon-arrow-right el-icon--right"></i>
</el-button> </el-button>
</div> </div>
...@@ -193,7 +193,7 @@ export default { ...@@ -193,7 +193,7 @@ export default {
} }
); );
}, },
addRemoveGoods(index) { //添加或者删除物品 addPeopleToMeeting(index) { //参会
let formData = this.formData.teams[index].invoking.checkedCities let formData = this.formData.teams[index].invoking.checkedCities
for (const key in formData) { for (const key in formData) {
for (const k in this.allData) { for (const k in this.allData) {
...@@ -211,7 +211,7 @@ export default { ...@@ -211,7 +211,7 @@ export default {
this.formData.teams[index].invoking.checkedCities = [] this.formData.teams[index].invoking.checkedCities = []
this.formData.teams[index].invoking.checkAll = false this.formData.teams[index].invoking.checkAll = false
}, },
removeGoods(index) { //拿出 removePeopleFromMeeting(index) { //离席
let formData = this.formData.teams[index].parameter.checkedCities let formData = this.formData.teams[index].parameter.checkedCities
for (const key in formData) { for (const key in formData) {
for (const k in this.formData.teams[index].wpinfo) { 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