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

Merge branch 'master' of http://124.70.32.114:3100/woka/cesium-map-object

wxp
ycc 3 months ago
parent
19ad30a292 bef1cbb974
commit
91719eb0f4
1 changed files with 197 additions and 236 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. 433
      ruoyi-ui/src/views/childRoom/index.vue

433
ruoyi-ui/src/views/childRoom/index.vue
View File

@ -32,98 +32,73 @@
</div>
</div>
<!-- 顶部浮动导航栏 - 重新设计 -->
<div class="floating-header blue-theme">
<!-- 左侧：Logo和系统名称 -->
<!-- 顶部浮动导航栏 - 最终优化设计 -->
<div class="floating-header">
<div class="header-left">
<div class="system-logo">
<i class="el-icon-s-promotion logo-icon"></i>
<span class="system-name">联合作战筹划系统</span>
<div class="system-title">
<i class="el-icon-s-promotion mr-2 logo-icon"></i>
<span class="title-text blue-title">联合任务筹划系统</span>
</div>
<!-- 导航菜单 -->
<div class="nav-menu">
<!-- 顶部导航菜单 -->
<div class="top-nav-menu">
<div
v-for="item in navMenuItems"
v-for="item in topNavItems"
:key="item.id"
class="nav-menu-item"
:class="{ active: activeNavMenu === item.id }"
@click="selectNavMenu(item)"
class="top-nav-item"
:class="{ active: activeTopNav === item.id }"
@click="selectTopNav(item)"
>
<i :class="item.icon" class="nav-icon"></i>
<span class="nav-text">{{ item.name }}</span>
</div>
</div>
</div>
<!-- 右侧：作战信息和用户状态 -->
<div class="header-right">
<!-- 作战信息 -->
<div class="combat-info">
<div class="info-item">
<i class="el-icon-time info-icon"></i>
<!-- 作战信息区域 -->
<div class="combat-info-group">
<!-- 房间编号 -->
<div class="info-box">
<i class="el-icon-office-building info-icon"></i>
<div class="info-content">
<div class="info-label">作战时间</div>
<div class="info-value">{{ combatTime }}</div>
<div class="info-label">房间编号</div>
<div class="info-value">{{ roomCode }}</div>
</div>
</div>
<div class="info-item">
<i class="el-icon-sunny info-icon"></i>
<!-- 在线人数 -->
<div class="info-box">
<i class="el-icon-user info-icon"></i>
<div class="info-content">
<div class="info-label">天文时间</div>
<div class="info-value">{{ astroTime }}</div>
<div class="info-label">在线人数</div>
<div class="info-value">{{ onlineCount }}人</div>
</div>
</div>
<div class="info-item">
<i class="el-icon-office-building info-icon"></i>
<!-- 作战时间 -->
<div class="info-box">
<i class="el-icon-timer info-icon"></i>
<div class="info-content">
<div class="info-label">房间编号</div>
<div class="info-value">{{ roomCode }}</div>
<div class="info-label">作战时间</div>
<div class="info-value">{{ combatTime }}</div>
</div>
</div>
<div class="info-item">
<i class="el-icon-user info-icon"></i>
<!-- 天文时间 -->
<div class="info-box">
<i class="el-icon-sunny info-icon"></i>
<div class="info-content">
<div class="info-label">在线人数</div>
<div class="info-value">{{ onlineCount }}人</div>
<div class="info-label">天文时间</div>
<div class="info-value">{{ astroTime }}</div>
</div>
</div>
</div>
<!-- 用户状态区域 -->
<div class="user-status">
<!-- 导入按钮 -->
<el-button
type="primary"
size="mini"
icon="el-icon-upload2"
class="blue-btn import-btn"
@click="importData"
>
导入
</el-button>
<!-- 导出按钮 -->
<el-button
type="primary"
size="mini"
icon="el-icon-download"
class="blue-btn export-btn"
@click="exportReport"
>
导出
</el-button>
<div class="user-status-area">
<!-- 用户头像 -->
<el-avatar :size="32" :src="userAvatar" class="user-avatar" />
<!-- 在线状态 -->
<div class="online-status">
<span class="dot online"></span>
<span class="text">在线</span>
</div>
</div>
</div>
</div>
@ -449,24 +424,24 @@ export default {
name: 'MissionPlanningView',
data() {
return {
// 导航菜单
activeNavMenu: 'file',
navMenuItems: [
{ id: 'file', name: '文件' },
{ id: 'edit', name: '编辑' },
{ id: 'view', name: '视图' },
{ id: 'map', name: '地图' },
{ id: 'airspace', name: '空域' },
{ id: 'tools', name: '工具' },
{ id: 'options', name: '选项' },
{ id: 'favorites', name: '收藏' }
// 顶部导航
activeTopNav: 'file',
topNavItems: [
{ id: 'file', name: '文件', icon: 'el-icon-document' },
{ id: 'edit', name: '编辑', icon: 'el-icon-edit' },
{ id: 'view', name: '视图', icon: 'el-icon-view' },
{ id: 'map', name: '地图', icon: 'el-icon-map-location' },
{ id: 'airspace', name: '空域', icon: 'el-icon-s-grid' },
{ id: 'tools', name: '工具', icon: 'el-icon-setting' },
{ id: 'options', name: '选项', icon: 'el-icon-s-tools' },
{ id: 'favorites', name: '收藏', icon: 'el-icon-star-on' }
],
// 作战信息
combatTime: 'K+01:15:30',
astroTime: '2023-10-15 14:30:00',
roomCode: 'CMD-ALPHA-01',
onlineCount: 5,
roomCode: 'JTF-7-ALPHA',
onlineCount: 30,
combatTime: 'K+01:30:45',
astroTime: '',
// 左侧菜单栏
isMenuHidden: true, // 是否完全隐藏左侧菜单
@ -560,11 +535,43 @@ export default {
this.isMenuHidden = true;
// 初始化时右侧面板隐藏
this.isRightPanelHidden = true;
// 更新时间
this.updateTime();
setInterval(this.updateTime, 1000);
// 作战时间也需要实时更新
setInterval(this.updateCombatTime, 1000);
},
methods: {
// 导航菜单操作
selectNavMenu(item) {
this.activeNavMenu = item.id;
updateTime() {
const now = new Date();
const year = now.getFullYear();
const month = (now.getMonth() + 1).toString().padStart(2, '0');
const day = now.getDate().toString().padStart(2, '0');
const hours = now.getHours().toString().padStart(2, '0');
const minutes = now.getMinutes().toString().padStart(2, '0');
const seconds = now.getSeconds().toString().padStart(2, '0');
this.astroTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
},
updateCombatTime() {
// 模拟作战时间（K时）的更新
// 这里简单模拟，实际应该根据业务逻辑计算
const now = new Date();
const baseSeconds = 5400; // 1小时30分钟 = 5400秒
const currentSeconds = now.getSeconds() + now.getMinutes() * 60 + now.getHours() * 3600;
const combatSeconds = baseSeconds + (currentSeconds % 86400);
const hours = Math.floor(combatSeconds / 3600);
const minutes = Math.floor((combatSeconds % 3600) / 60);
const seconds = combatSeconds % 60;
this.combatTime = `K+${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
},
// 顶部导航菜单操作
selectTopNav(item) {
this.activeTopNav = item.id;
this.$message.info(`选择菜单: ${item.name}`);
},
@ -727,7 +734,8 @@ export default {
width: 100%;
height: 100%;
background: linear-gradient(135deg, #1a2f4b 0%, #2c3e50 100%);
background-image: url('~@/assets/map-background.png');
/* 正确的写法，直接复制这行替换 */
background: url('~@/assets/map-background.png');
background-size: cover;
background-position: center;
z-index: 1;
@ -870,108 +878,115 @@ export default {
color: #008aff;
}
/* 顶部导航栏 - 重新设计 */
/* 顶部导航栏 - 最终优化设计 */
.floating-header {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 70px;
padding: 0 25px;
border-radius: 0 0 12px 12px;
height: 60px;
padding: 0 20px;
display: flex;
align-items: center;
justify-content: space-between;
z-index: 100;
backdrop-filter: blur(20px);
border: none;
box-shadow: 0 4px 20px rgba(0, 138, 255, 0.25);
background: rgba(255, 255, 255, 0.95);
border-bottom: 2px solid rgba(0, 138, 255, 0.3);
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);
}
.header-left {
display: flex;
align-items: center;
gap: 40px;
gap: 25px;
flex: 1;
}
.system-logo {
.system-title {
display: flex;
align-items: center;
gap: 12px;
padding-right: 25px;
border-right: 1px solid rgba(0, 138, 255, 0.3);
font-size: 18px;
font-weight: bold;
min-width: 180px;
}
.logo-icon {
font-size: 28px;
.system-title i {
font-size: 24px;
color: #008aff;
text-shadow: 0 0 10px rgba(0, 138, 255, 0.5);
background: linear-gradient(135deg, #008aff, #0066cc);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.system-name {
font-size: 22px;
font-weight: 800;
color: #008aff;
text-shadow: 0 2px 4px rgba(0, 138, 255, 0.2);
letter-spacing: 1px;
background: linear-gradient(135deg, #008aff, #0066cc);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
.blue-title {
color: #008aff !important;
}
.nav-menu {
/* 顶部导航菜单 - 优化为简洁文字效果 */
.top-nav-menu {
display: flex;
gap: 0;
background: rgba(255, 255, 255, 0.9);
border-radius: 8px;
padding: 4px;
border: 1px solid rgba(0, 138, 255, 0.2);
box-shadow: 0 2px 8px rgba(0, 138, 255, 0.1);
backdrop-filter: blur(5px);
flex: 1;
overflow-x: auto;
max-width: 800px;
padding: 5px 0;
scrollbar-width: thin;
}
.top-nav-menu::-webkit-scrollbar {
height: 3px;
}
.top-nav-menu::-webkit-scrollbar-track {
background: rgba(0, 138, 255, 0.1);
border-radius: 2px;
}
.nav-menu-item {
padding: 8px 20px;
.top-nav-menu::-webkit-scrollbar-thumb {
background: rgba(0, 138, 255, 0.3);
border-radius: 2px;
}
.top-nav-item {
display: flex;
align-items: center;
gap: 6px;
padding: 8px 12px;
cursor: pointer;
font-size: 14px;
font-size: 13px;
font-weight: 600;
color: #555;
color: #333;
transition: all 0.3s;
border-radius: 6px;
border-radius: 4px;
white-space: nowrap;
min-width: 60px;
justify-content: center;
margin: 0 1px;
position: relative;
text-align: center;
min-width: 70px;
flex-shrink: 0;
}
.nav-menu-item:hover {
.top-nav-item:hover {
color: #008aff;
background: rgba(0, 138, 255, 0.1);
transform: translateY(-1px);
box-shadow: 0 2px 6px rgba(0, 138, 255, 0.15);
}
.nav-menu-item.active {
.top-nav-item.active {
color: #008aff;
background: linear-gradient(135deg, rgba(0, 138, 255, 0.15), rgba(0, 138, 255, 0.25));
box-shadow: 0 2px 8px rgba(0, 138, 255, 0.2);
font-weight: 700;
}
.nav-menu-item.active::after {
content: '';
position: absolute;
bottom: -2px;
left: 20%;
width: 60%;
height: 2px;
background: linear-gradient(90deg, #008aff, #0066cc);
border-radius: 1px;
/* 移除了蓝色指示条 */
.top-nav-item.active::after {
display: none;
}
.nav-icon {
font-size: 14px;
color: #333;
transition: all 0.3s;
}
.top-nav-item:hover .nav-icon,
.top-nav-item.active .nav-icon {
color: #008aff;
}
.nav-text {
@ -982,44 +997,46 @@ export default {
.header-right {
display: flex;
align-items: center;
gap: 30px;
gap: 15px;
}
.combat-info {
/* 作战信息组 */
.combat-info-group {
display: flex;
gap: 25px;
background: rgba(255, 255, 255, 0.9);
border-radius: 10px;
padding: 8px 20px;
border: 1px solid rgba(0, 138, 255, 0.2);
box-shadow: 0 2px 10px rgba(0, 138, 255, 0.15);
backdrop-filter: blur(5px);
gap: 12px;
}
.info-item {
.info-box {
display: flex;
align-items: center;
gap: 10px;
padding: 0 10px;
border-right: 1px solid rgba(0, 138, 255, 0.2);
gap: 8px;
padding: 6px 10px;
border-radius: 6px;
transition: all 0.3s;
background: rgba(255, 255, 255, 0.7);
border: 1px solid rgba(0, 138, 255, 0.2);
box-shadow: 0 2px 6px rgba(0, 138, 255, 0.1);
min-width: 120px;
}
.info-item:last-child {
border-right: none;
.info-box:hover {
background: rgba(255, 255, 255, 0.9);
transform: translateY(-1px);
box-shadow: 0 4px 10px rgba(0, 138, 255, 0.2);
border-color: rgba(0, 138, 255, 0.3);
}
.info-icon {
font-size: 18px;
font-size: 16px;
color: #008aff;
background: rgba(0, 138, 255, 0.1);
padding: 6px;
border-radius: 6px;
box-shadow: 0 2px 6px rgba(0, 138, 255, 0.2);
min-width: 20px;
text-align: center;
}
.info-content {
display: flex;
flex-direction: column;
flex: 1;
}
.info-label {
@ -1027,106 +1044,50 @@ export default {
color: #666;
font-weight: 500;
margin-bottom: 2px;
white-space: nowrap;
}
.info-value {
font-size: 14px;
font-size: 13px;
font-weight: 700;
color: #333;
white-space: nowrap;
font-family: 'Courier New', monospace;
letter-spacing: 0.5px;
}
/* 用户状态区域 */
.user-status {
display: flex;
align-items: center;
gap: 15px;
}
.import-btn {
background: linear-gradient(135deg, rgba(82, 196, 26, 0.8), rgba(64, 158, 20, 0.8));
border: 1px solid rgba(82, 196, 26, 0.9);
}
.import-btn:hover {
background: linear-gradient(135deg, rgba(82, 196, 26, 0.9), rgba(64, 158, 20, 0.9));
border-color: rgba(82, 196, 26, 1);
box-shadow: 0 2px 8px rgba(82, 196, 26, 0.3);
/* 作战时间和天文时间的特殊样式 */
.combat-info-group .info-box:nth-child(3) .info-value {
color: #008aff;
}
.export-btn {
background: linear-gradient(135deg, rgba(0, 138, 255, 0.8), rgba(0, 102, 204, 0.8));
border: 1px solid rgba(0, 138, 255, 0.9);
.combat-info-group .info-box:nth-child(4) .info-value {
color: #52c41a;
}
.export-btn:hover {
background: linear-gradient(135deg, rgba(0, 138, 255, 0.9), rgba(0, 102, 204, 0.9));
border-color: rgba(0, 138, 255, 1);
box-shadow: 0 2px 8px rgba(0, 138, 255, 0.3);
/* 用户状态区域 */
.user-status-area {
display: flex;
align-items: center;
}
.user-avatar {
border: 2px solid rgba(0, 138, 255, 0.3);
box-shadow: 0 2px 8px rgba(0, 138, 255, 0.2);
box-shadow: 0 2px 6px rgba(0, 138, 255, 0.15);
transition: all 0.3s;
background: rgba(255, 255, 255, 0.9);
}
.user-avatar:hover {
transform: scale(1.1);
box-shadow: 0 4px 12px rgba(0, 138, 255, 0.3);
}
.online-status {
display: flex;
align-items: center;
gap: 6px;
color: #52c41a;
font-size: 12px;
font-weight: 600;
padding: 6px 12px;
background: rgba(82, 196, 26, 0.1);
border-radius: 6px;
border: 1px solid rgba(82, 196, 26, 0.3);
box-shadow: 0 2px 6px rgba(82, 196, 26, 0.15);
transition: all 0.3s;
}
.online-status:hover {
transform: translateY(-1px);
box-shadow: 0 4px 10px rgba(82, 196, 26, 0.2);
}
.dot {
width: 8px;
height: 8px;
border-radius: 50%;
}
.dot.online {
background: #52c41a;
animation: pulse 2s infinite;
box-shadow: 0 0 8px rgba(82, 196, 26, 0.8);
}
@keyframes pulse {
0% {
opacity: 1;
box-shadow: 0 0 8px rgba(82, 196, 26, 0.8);
}
50% {
opacity: 0.7;
box-shadow: 0 0 12px rgba(82, 196, 26, 1);
}
100% {
opacity: 1;
box-shadow: 0 0 8px rgba(82, 196, 26, 0.8);
}
box-shadow: 0 4px 10px rgba(0, 138, 255, 0.25);
border-color: rgba(0, 138, 255, 0.6);
}
/* 左侧菜单栏 - 蓝色主题 */
.floating-left-menu {
position: absolute;
top: 80px;
top: 70px;
left: 20px;
width: 40px;
background: rgba(255, 255, 255, 0.3);
@ -1256,7 +1217,7 @@ export default {
/* 右侧外部隐藏按钮 */
.right-external-hide-btn {
position: absolute;
top: 80px;
top: 70px;
right: 320px; /* 面板宽度300px + 外边距20px */
width: 28px;
height: 40px;
@ -1292,7 +1253,7 @@ export default {
/* 右侧浮动面板 - 蓝色主题 */
.floating-right-panel {
position: absolute;
top: 80px;
top: 70px;
right: 20px;
width: 300px;
border-radius: 0 8px 8px 8px;

Write Preview
Loading…
Cancel
Save