joylink/rt-sim-training-client
6
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

会话群调整

Browse Source
This commit is contained in:
dong 2023-04-20 15:38:48 +08:00
parent 53ef9b5930
commit baaa8e4bbb
2 changed files with 104 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/store/modules/socket.js
View File

@ -120,7 +120,14 @@ const socket = {
conversationMessage: {},
controlTransfer: {},
operationModeApplyList: [], // 模式转换消息列表
conversationGroup: {} // 群组消息
conversationGroup: { // 群组
JOIN: {}, // 创建或加入群组
UPDATE_NAME: {}, // 更新名称
UPDATE_MEMBER: {}, // 更新群成员
EXIT: {}, // 退群
MESSAGE: {}, // 消息
MESSAGE_STATUS: {} // 消息状态
}
},
getters: {
},
@ -409,7 +416,9 @@ const socket = {
});
},
setConversationGroup: (state, message) => {
state.conversationGroup = message;
if (state.conversationGroup[message.messageType] !== undefined) {
state.conversationGroup[message.messageType] = message;
}
}
},

108
src/views/newMap/display/newChat/chatDialog.vue
View File

@ -39,20 +39,27 @@
</div>
</div>
<div class="middleMain">
<div v-for="(item, index) in groupList" :key="index" class="row pointer" :class="{active: item.id === groupIdActive}" @click="groupClick(item)">
<div v-for="(item, index) in groupList" :key="index" class="row pointer" :class="{active: item.id === id}" @click="groupClick(item)">
<div class="groupIcon"><img :src="getImgUrl(item.imageUrl)" alt=""></div>
<div class="groupInfo">
<div class="text"><b>{{ item.name }}</b></div>
<div class="text">{{ item.message }}</div>
<div class="text">{{ getLastMsg(item.messageList) }}</div>
</div>
<div class="groupMarke">
<div class="time">{{ item.time }}</div>
<div class="time">{{ getLastTime(item.messageList) }}</div>
<i v-if="item.isMute" class="el-icon-close-notification" />
</div>
</div>
</div>
</div>
<div class="right">消息</div>
<div class="right">
<div v-for="(item, index) in activeMessageList" :key="index">
<span>{{ item.time }}</span>
<span>{{ item.content }}</span>
</div>
<el-input v-model="inputMsg" />
<el-button @click="sendMsg">发送</el-button>
</div>
</div>
<div v-else-if="tabActive==1">文档</div>
<div v-else-if="tabActive==2">工作台</div>
@ -63,7 +70,8 @@
<script>
import {mapGetters} from 'vuex';
import { getGroupList } from '@/api/newChat';
import { getGroupList, sendText } from '@/api/newChat';
import { timestampFormat } from '@/utils/date';
export default {
name: '',
components: {
@ -74,6 +82,7 @@ export default {
},
data() {
return {
inputMsg: '',
logoImgUrl: '',
dialogVisible: false,
tabs: [
@ -92,23 +101,52 @@ export default {
],
filterActive: 0,
groupList: [
{name: '分公司领导', imageUrl: '', time: '15:36', message: '控制中心消息：【I 类】'},
{name: '集团公司', imageUrl: '', time: '04-17', message: '【演练结束】2号线二期：14:58 Y04列车演练结束', isMute: true}
// {name: '分公司领导', imageUrl: '', memberList:[], messageList: [{content: '控制中心消息：【I 类】', time: '2023-04-20 15:08:55'}]},
// {name: '集团公司', imageUrl: '', memberList:[],messageList: [{content: '【演练结束】2号线二期：14:58 Y04列车演练结束', time: '2023-04-20 15:08:55'}], isMute: true}
],
groupIdActive: 0
id: 0 // 当前的群组id
};
},
computed: {
...mapGetters('projectConfig', ['loginProLogo']),
groupId() {
return this.$route.query.group;
},
activeMessageList() {
let list = [];
const find = this.groupList.find(item => {
return item.id == this.id;
});
if (find) {
list = find.messageList;
}
return list;
}
},
watch: {
'$store.state.socket.conversationGroup': function(val) {
if (val) {
console.log('🚀 ~ file: chatDialog.vue:110 ~ val:', val);
'$store.state.socket.conversationGroup.MESSAGE': function(val) {
const find = this.groupList.find(item => {
return item.id == val.id;
});
if (find) {
find.messageList.push(val.message);
}
},
'$store.state.socket.conversationGroup.MESSAGE_STATUS': function(val) {
const find = this.groupList.find(item => {
return item.id == val.id;
});
if (find) {
const index = find.messageList.findIndex(item => {
return item.id == val.message.id;
});
if (index > -1) {
const obj = {
...find.messageList[index],
...val.message
};
find.messageList.splice(index, 1, obj);
}
}
}
},
@ -122,12 +160,53 @@ export default {
this.handleClose();
},
methods: {
sendMsg() {
sendText(this.groupId, {id: this.id, content:this.inputMsg}).then(res => {
console.log(res, '--res--');
this.inputMsg = '';
}).catch(err => {
console.log(err, '--err--');
});
},
getLastMsg(list) {
let msg = '';
if (list.length) {
msg = list[list.length - 1].content;
}
return msg;
},
getLastTime(list) {
let time = '';
if (list.length) {
time = list[list.length - 1].time;
}
return this.timestampFormat(time);
},
timestampFormat(time) {
let timeStr = '';
if (time) {
const t = new Date(time).getTime();
const todayTime = new Date(new Date().toLocaleDateString()).getTime();
const tomorrow = todayTime + 24 * 3600 * 1000;
const yesterday = todayTime - 24 * 3600 * 1000;
if (t >= tomorrow) {
timeStr = timestampFormat('MM-DD', time);
} else if (tomorrow > t && t >= todayTime) {
timeStr = timestampFormat('HH:mm', time);
} else if (todayTime > t && t >= yesterday) {
timeStr = '昨天';
} else if (yesterday > t) {
timeStr = timestampFormat('MM-DD', time);
}
}
return timeStr;
},
getGroupList() {
getGroupList(this.groupId).then(res => {
console.log(res, '---res--');
this.groupList = res.data;
if (this.groupList && this.groupList[0].id) {
this.groupIdActive = this.groupList[0].id;
this.id = this.groupList[0].id;
}
}).catch(err => {
console.log(err, '---获取群组列表失败--');
@ -146,8 +225,7 @@ export default {
this.filterActive = index;
},
groupClick(item) {
console.log('🚀 ~ file: chatDialog.vue:149 ~ groupClick ~ item:', item);
this.groupIdActive = item.id;
this.id = item.id;
},
handleClose() {
this.$store.dispatch('training/setChatBoxMin', true);