woka
/
cesium-map-object
6
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

顶部以及聊天室

lbj
wangxinping 2 months ago
parent
6fe49fe29a
commit
b6389f8007
2 changed files with 288 additions and 27 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 56
      ruoyi-ui/src/views/childRoom/TopHeader.vue
  2. 259
      ruoyi-ui/src/views/dialogs/OnlineMembersDialog.vue

56
ruoyi-ui/src/views/childRoom/TopHeader.vue
View File

@ -2,8 +2,14 @@
<div class="floating-header">
<div class="header-left">
<div class="system-title">
<i class="el-icon-s-promotion mr-2 logo-icon"></i>
<span class="title-text blue-title">联合任务筹划系统</span>
<!-- 按照实际路径引入logo.jpg -->
<img
src="@/views/childRoom/logo.png"
class="logo-icon mr-2"
alt="系统logo"
style="width:24px; height:24px; object-fit:contain;"
>
<span class="title-text blue-title">网络化任务规划系统</span>
</div>
<!-- 顶部导航菜单 -->
@ -28,6 +34,9 @@
>
<div class="dropdown-trigger"></div>
<el-dropdown-menu slot="dropdown" class="file-dropdown-menu">
<!-- 新增新建计划和打开选项 -->
<el-dropdown-item @click.native="newPlan">新建计划</el-dropdown-item>
<el-dropdown-item @click.native="openPlan">打开</el-dropdown-item>
<el-dropdown-item @click.native="savePlan">保存</el-dropdown-item>
<!-- 导入二级菜单 -->
@ -298,6 +307,14 @@ export default {
this.$emit('select-nav', item)
},
// 文件下拉菜单新增方法
newPlan() {
this.$emit('new-plan')
},
openPlan() {
this.$emit('open-plan')
},
// 文件下拉菜单方法
savePlan() {
this.$emit('save-plan')
@ -475,9 +492,10 @@ export default {
justify-content: space-between;
z-index: 100;
backdrop-filter: blur(15px);
background: rgba(255, 255, 255, 0.85);
border-bottom: 1px solid rgba(0, 138, 255, 0.2);
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
/* 调整背景为更透明的白色 */
background: rgba(255, 255, 255, 0.3);
border-bottom: 1px solid rgba(0, 138, 255, 0.1);
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}
.header-left {
@ -495,6 +513,13 @@ export default {
min-width: 180px;
}
/* 新增logo图片样式，保证显示效果 */
.logo-icon {
width: 24px;
height: 24px;
object-fit: contain;
}
.system-title i {
font-size: 24px;
color: #008aff;
@ -604,8 +629,9 @@ export default {
border-radius: 6px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(15px);
background: rgba(255, 255, 255, 0.85);
border: 1px solid rgba(0, 138, 255, 0.2);
/* 下拉菜单也同步调整为更透明的白色 */
background: rgba(255, 255, 255, 0.9);
border: 1px solid rgba(0, 138, 255, 0.1);
padding: 0;
min-width: auto;
width: fit-content;
@ -660,8 +686,9 @@ export default {
border-radius: 6px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(15px);
background: rgba(255, 255, 255, 0.85);
border: 1px solid rgba(0, 138, 255, 0.2);
/* 子菜单同步调整透明度 */
background: rgba(255, 255, 255, 0.9);
border: 1px solid rgba(0, 138, 255, 0.1);
padding: 0;
min-width: auto;
width: fit-content;
@ -706,17 +733,18 @@ export default {
align-items: center;
gap: 8px;
padding: 8px 12px;
background: rgba(255, 255, 255, 0.6);
/* 信息框也调整为更透明的白色 */
background: rgba(255, 255, 255, 0.5);
border-radius: 8px;
cursor: pointer;
transition: all 0.3s;
border: 1px solid rgba(0, 138, 255, 0.1);
border: 1px solid rgba(0, 138, 255, 0.05);
}
.info-box:hover {
background: rgba(0, 138, 255, 0.1);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 138, 255, 0.2);
box-shadow: 0 4px 12px rgba(0, 138, 255, 0.1);
}
.combat-info-group .info-box:nth-child(3) .info-value {
@ -763,6 +791,6 @@ export default {
.user-avatar:hover {
transform: scale(1.1);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
</style>
</style>

259
ruoyi-ui/src/views/dialogs/OnlineMembersDialog.vue
View File

@ -118,12 +118,49 @@
</el-dialog>
</div>
</el-tab-pane>
<!-- 新增：聊天室标签页 -->
<el-tab-pane label="聊天室" name="chat">
<div class="chat-room">
<!-- 聊天头部 -->
<div class="chat-header">
<h4>群聊 - 在线成员交流</h4>
<span class="online-count">{{ onlineMembers.length }} 人在线</span>
</div>
<!-- 聊天内容区域 -->
<div class="chat-content" ref="chatContent">
<div
v-for="(message, index) in chatMessages"
:key="index"
:class="['chat-message', message.sender === '我' ? 'self-message' : 'other-message']"
>
<div class="message-avatar">
<el-avatar :size="32" :src="message.avatar">{{ message.sender.charAt(0) }}</el-avatar>
</div>
<div class="message-content">
<div class="message-sender">{{ message.sender }}</div>
<div class="message-text">{{ message.content }}</div>
<div class="message-time">{{ message.time }}</div>
</div>
</div>
</div>
<!-- 聊天输入区域 -->
<div class="chat-input">
<el-input
v-model="newMessage"
placeholder="请输入消息..."
@keyup.enter="sendMessage"
clearable
></el-input>
<el-button type="primary" @click="sendMessage" class="send-btn">发送</el-button>
</div>
</div>
</el-tab-pane>
</el-tabs>
</div>
<div class="dialog-footer">
<el-button @click="closeDialog">关闭</el-button>
</div>
<!-- 移除了底部的dialog-footer关闭按钮 -->
</div>
</div>
</template>
@ -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;
}
</style>
Write Preview
Loading…
Cancel
Save