From b6389f800724050616d3cebb2543696312a47a74 Mon Sep 17 00:00:00 2001
From: wangxinping <753819757@qq.com>
Date: Thu, 22 Jan 2026 13:22:43 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A1=B6=E9=83=A8=E4=BB=A5=E5=8F=8A=E8=81=8A?=
=?UTF-8?q?=E5=A4=A9=E5=AE=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
ruoyi-ui/src/views/childRoom/TopHeader.vue | 56 +++--
ruoyi-ui/src/views/dialogs/OnlineMembersDialog.vue | 259 +++++++++++++++++++--
2 files changed, 288 insertions(+), 27 deletions(-)
diff --git a/ruoyi-ui/src/views/childRoom/TopHeader.vue b/ruoyi-ui/src/views/childRoom/TopHeader.vue
index 870d0ad..8b258e4 100644
--- a/ruoyi-ui/src/views/childRoom/TopHeader.vue
+++ b/ruoyi-ui/src/views/childRoom/TopHeader.vue
@@ -2,8 +2,14 @@
-
-
+
@@ -205,6 +242,29 @@ export default {
time: 'K+00:32:08',
type: 'success'
}
+ ],
+
+ // 新增：聊天室相关数据
+ newMessage: '',
+ chatMessages: [
+ {
+ sender: '张三',
+ content: '各位注意，J-20参数已更新，速度调整为850km/h',
+ time: 'K+00:45:30',
+ avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
+ },
+ {
+ sender: '李四',
+ content: '收到，Alpha进场航线已选中，等待进一步指令',
+ time: 'K+00:42:20',
+ avatar: 'https://cube.elemecdn.com/1/88/03b0d39583f48206768a7534e55bcpng.png'
+ },
+ {
+ sender: '王五',
+ content: 'Beta巡逻航线已添加WP5航点，坐标确认完毕',
+ time: 'K+00:38:50',
+ avatar: 'https://cube.elemecdn.com/2/88/03b0d39583f48206768a7534e55bcpng.png'
+ }
]
};
},
@@ -221,6 +281,81 @@ export default {
this.showRollbackDialog = false;
this.$message.success('操作回滚成功');
// 这里可以添加实际的回滚逻辑
+ },
+
+ // 新增：发送聊天消息
+ sendMessage() {
+ if (!this.newMessage.trim()) {
+ this.$message.warning('请输入消息内容');
+ return;
+ }
+
+ // 模拟生成当前时间（K+格式）
+ const now = new Date();
+ const hours = now.getHours().toString().padStart(2, '0');
+ const minutes = now.getMinutes().toString().padStart(2, '0');
+ const seconds = now.getSeconds().toString().padStart(2, '0');
+ const currentTime = `K+${hours}:${minutes}:${seconds}`;
+
+ // 添加新消息到聊天记录
+ this.chatMessages.push({
+ sender: '我',
+ content: this.newMessage.trim(),
+ time: currentTime,
+ avatar: 'https://cube.elemecdn.com/5/88/03b0d39583f48206768a7534e55bcpng.png'
+ });
+
+ // 清空输入框
+ this.newMessage = '';
+
+ // 滚动到聊天底部
+ this.$nextTick(() => {
+ const chatContent = this.$refs.chatContent;
+ chatContent.scrollTop = chatContent.scrollHeight;
+ });
+
+ // 模拟其他人回复（可选）
+ setTimeout(() => {
+ const randomMember = this.onlineMembers[Math.floor(Math.random() * this.onlineMembers.length)];
+ const replies = [
+ `收到你的消息，${randomMember.role}已确认`,
+ `已处理：${randomMember.name}正在执行相关操作`,
+ `明白，${randomMember.role}这边已准备就绪`
+ ];
+ const randomReply = replies[Math.floor(Math.random() * replies.length)];
+
+ const now2 = new Date();
+ const hours2 = now2.getHours().toString().padStart(2, '0');
+ const minutes2 = now2.getMinutes().toString().padStart(2, '0');
+ const seconds2 = now2.getSeconds().toString().padStart(2, '0');
+ const replyTime = `K+${hours2}:${minutes2}:${seconds2}`;
+
+ this.chatMessages.push({
+ sender: randomMember.name,
+ content: randomReply,
+ time: replyTime,
+ avatar: randomMember.avatar
+ });
+
+ // 再次滚动到底部
+ this.$nextTick(() => {
+ const chatContent = this.$refs.chatContent;
+ chatContent.scrollTop = chatContent.scrollHeight;
+ });
+ }, 1000);
+ }
+ },
+ // 新增：进入聊天室时自动滚动到底部
+ watch: {
+ activeTab(newVal) {
+ if (newVal === 'chat') {
+ this.$nextTick(() => {
+ const chatContent = this.$refs.chatContent;
+ if (chatContent) {
+ chatContent.scrollTop = chatContent.scrollHeight;
+ }
+ });
+ }
}
}
};
@@ -247,6 +382,7 @@ export default {
bottom: 0;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(2px);
+ cursor: pointer;
}
.dialog-content {
@@ -292,23 +428,22 @@ export default {
color: #999;
cursor: pointer;
transition: color 0.3s;
+ width: 24px;
+ height: 24px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
}
.close-btn:hover {
color: #666;
+ background: #f5f5f5;
+ border-radius: 50%;
}
.dialog-body {
padding: 20px;
-}
-
-.dialog-footer {
- display: flex;
- align-items: center;
- justify-content: flex-end;
- padding: 16px 20px;
- border-top: 1px solid #e8e8e8;
- gap: 10px;
+ /* 调整内边距 让内容和顶部更协调 */
}
/* 在线成员样式 */
@@ -483,4 +618,102 @@ export default {
.text-warning {
color: #fa8c16;
}
+
+/* 新增：聊天室样式 */
+.chat-room {
+ display: flex;
+ flex-direction: column;
+ height: 400px;
+}
+
+.chat-header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 12px;
+}
+
+.chat-header h4 {
+ margin: 0;
+ font-size: 14px;
+ font-weight: 600;
+ color: #333;
+}
+
+.online-count {
+ font-size: 12px;
+ color: #008aff;
+}
+
+.chat-content {
+ flex: 1;
+ overflow-y: auto;
+ padding: 12px;
+ background: rgba(240, 242, 245, 0.5);
+ border-radius: 8px;
+ margin-bottom: 12px;
+}
+
+.chat-message {
+ display: flex;
+ margin-bottom: 16px;
+ max-width: 80%;
+}
+
+.self-message {
+ flex-direction: row-reverse;
+ margin-left: auto;
+}
+
+.other-message {
+ margin-right: auto;
+}
+
+.message-avatar {
+ margin: 0 8px;
+}
+
+.message-content {
+ background: white;
+ padding: 8px 12px;
+ border-radius: 8px;
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.self-message .message-content {
+ background: #e6f7ff;
+}
+
+.message-sender {
+ font-size: 12px;
+ font-weight: 600;
+ color: #333;
+ margin-bottom: 4px;
+}
+
+.message-text {
+ font-size: 13px;
+ color: #333;
+ line-height: 1.4;
+ margin-bottom: 4px;
+}
+
+.message-time {
+ font-size: 11px;
+ color: #999;
+ text-align: right;
+}
+
+.chat-input {
+ display: flex;
+ gap: 8px;
+}
+
+.chat-input .el-input {
+ flex: 1;
+}
+
+.send-btn {
+ width: 80px;
+}
\ No newline at end of file
+ 网络化任务规划系统