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

Compare commits

base: woka:0fa0f6ccfe7eff61bfa065d06edff1a49845f101
Branches Tags
woka:ctw
woka:lbj
woka:master
woka:mh
woka:wxp
...
compare: woka:bef1cbb974feb33293f158681f1d8cf25da95743
Branches Tags
woka:ctw
woka:lbj
woka:master
woka:mh
woka:wxp

2 Commits
0fa0f6ccfe ... bef1cbb974

Author SHA1 Message Date
wangxinping bef1cbb974 Merge branch 'master' of http://124.70.32.114:3100/woka/cesium-map-object
3 months ago
wangxinping 2dd9a57014 新修改页面
3 months ago
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
Unified View
Diff Options
Show Stats
  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> </div>
<!-- 顶部浮动导航栏 - 重新设计 --> <!-- 顶部浮动导航栏 - 最终优化设计 -->
<div class="floating-header blue-theme"> <div class="floating-header">
<!-- 左侧：Logo和系统名称 -->
<div class="header-left"> <div class="header-left">
<div class="system-logo"> <div class="system-title">
<i class="el-icon-s-promotion logo-icon"></i> <i class="el-icon-s-promotion mr-2 logo-icon"></i>
<span class="system-name">联合作战筹划系统</span> <span class="title-text blue-title">联合任务筹划系统</span>
</div> </div>
<!-- 导航菜单 --> <!-- 顶部导航菜单 -->
<div class="nav-menu"> <div class="top-nav-menu">
<div <div
v-for="item in navMenuItems" v-for="item in topNavItems"
:key="item.id" :key="item.id"
class="nav-menu-item" class="top-nav-item"
:class="{ active: activeNavMenu === item.id }" :class="{ active: activeTopNav === item.id }"
@click="selectNavMenu(item)" @click="selectTopNav(item)"
> >
<i :class="item.icon" class="nav-icon"></i>
<span class="nav-text">{{ item.name }}</span> <span class="nav-text">{{ item.name }}</span>
</div> </div>
</div> </div>
</div> </div>
<!-- 右侧：作战信息和用户状态 -->
<div class="header-right"> <div class="header-right">
<!-- 作战信息 --> <!-- 作战信息区域 -->
<div class="combat-info"> <div class="combat-info-group">
<div class="info-item"> <!-- 房间编号 -->
<i class="el-icon-time info-icon"></i> <div class="info-box">
<i class="el-icon-office-building info-icon"></i>
<div class="info-content"> <div class="info-content">
<div class="info-label">作战时间</div> <div class="info-label">房间编号</div>
<div class="info-value">{{ combatTime }}</div> <div class="info-value">{{ roomCode }}</div>
</div> </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-content">
<div class="info-label">天文时间</div> <div class="info-label">在线人数</div>
<div class="info-value">{{ astroTime }}</div> <div class="info-value">{{ onlineCount }}人</div>
</div> </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-content">
<div class="info-label">房间编号</div> <div class="info-label">作战时间</div>
<div class="info-value">{{ roomCode }}</div> <div class="info-value">{{ combatTime }}</div>
</div> </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-content">
<div class="info-label">在线人数</div> <div class="info-label">天文时间</div>
<div class="info-value">{{ onlineCount }}人</div> <div class="info-value">{{ astroTime }}</div>
</div> </div>
</div> </div>
</div> </div>
<!-- 用户状态区域 --> <!-- 用户状态区域 -->
<div class="user-status"> <div class="user-status-area">
<!-- 导入按钮 -->
<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>
<!-- 用户头像 --> <!-- 用户头像 -->
<el-avatar :size="32" :src="userAvatar" class="user-avatar" /> <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> </div>
</div> </div>
@ -449,24 +424,24 @@ export default {
name: 'MissionPlanningView', name: 'MissionPlanningView',
data() { data() {
return { return {
// 导航菜单 // 顶部导航
activeNavMenu: 'file', activeTopNav: 'file',
navMenuItems: [ topNavItems: [
{ id: 'file', name: '文件' }, { id: 'file', name: '文件', icon: 'el-icon-document' },
{ id: 'edit', name: '编辑' }, { id: 'edit', name: '编辑', icon: 'el-icon-edit' },
{ id: 'view', name: '视图' }, { id: 'view', name: '视图', icon: 'el-icon-view' },
{ id: 'map', name: '地图' }, { id: 'map', name: '地图', icon: 'el-icon-map-location' },
{ id: 'airspace', name: '空域' }, { id: 'airspace', name: '空域', icon: 'el-icon-s-grid' },
{ id: 'tools', name: '工具' }, { id: 'tools', name: '工具', icon: 'el-icon-setting' },
{ id: 'options', name: '选项' }, { id: 'options', name: '选项', icon: 'el-icon-s-tools' },
{ id: 'favorites', name: '收藏' } { id: 'favorites', name: '收藏', icon: 'el-icon-star-on' }
], ],
// 作战信息 // 作战信息
combatTime: 'K+01:15:30', roomCode: 'JTF-7-ALPHA',
astroTime: '2023-10-15 14:30:00', onlineCount: 30,
roomCode: 'CMD-ALPHA-01', combatTime: 'K+01:30:45',
onlineCount: 5, astroTime: '',
// 左侧菜单栏 // 左侧菜单栏
isMenuHidden: true, // 是否完全隐藏左侧菜单 isMenuHidden: true, // 是否完全隐藏左侧菜单
@ -560,11 +535,43 @@ export default {
this.isMenuHidden = true; this.isMenuHidden = true;
// 初始化时右侧面板隐藏 // 初始化时右侧面板隐藏
this.isRightPanelHidden = true; this.isRightPanelHidden = true;
// 更新时间
this.updateTime();
setInterval(this.updateTime, 1000);
// 作战时间也需要实时更新
setInterval(this.updateCombatTime, 1000);
}, },
methods: { methods: {
// 导航菜单操作 updateTime() {
selectNavMenu(item) { const now = new Date();
this.activeNavMenu = item.id; 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}`); this.$message.info(`选择菜单: ${item.name}`);
}, },
@ -727,7 +734,8 @@ export default {
width: 100%; width: 100%;
height: 100%; height: 100%;
background: linear-gradient(135deg, #1a2f4b 0%, #2c3e50 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-size: cover;
background-position: center; background-position: center;
z-index: 1; z-index: 1;
@ -870,108 +878,115 @@ export default {
color: #008aff; color: #008aff;
} }
/* 顶部导航栏 - 重新设计 */ /* 顶部导航栏 - 最终优化设计 */
.floating-header { .floating-header {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;
height: 70px; height: 60px;
padding: 0 25px; padding: 0 20px;
border-radius: 0 0 12px 12px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
z-index: 100; z-index: 100;
backdrop-filter: blur(20px); backdrop-filter: blur(15px);
border: none; background: rgba(255, 255, 255, 0.85);
box-shadow: 0 4px 20px rgba(0, 138, 255, 0.25); border-bottom: 1px solid rgba(0, 138, 255, 0.2);
background: rgba(255, 255, 255, 0.95); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
border-bottom: 2px solid rgba(0, 138, 255, 0.3);
} }
.header-left { .header-left {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 40px; gap: 25px;
flex: 1;
} }
.system-logo { .system-title {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 12px; font-size: 18px;
padding-right: 25px; font-weight: bold;
border-right: 1px solid rgba(0, 138, 255, 0.3); min-width: 180px;
} }
.logo-icon { .system-title i {
font-size: 28px; font-size: 24px;
color: #008aff; 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 { .blue-title {
font-size: 22px; color: #008aff !important;
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;
} }
.nav-menu { /* 顶部导航菜单 - 优化为简洁文字效果 */
.top-nav-menu {
display: flex; display: flex;
gap: 0; gap: 0;
background: rgba(255, 255, 255, 0.9); flex: 1;
border-radius: 8px; overflow-x: auto;
padding: 4px; max-width: 800px;
border: 1px solid rgba(0, 138, 255, 0.2); padding: 5px 0;
box-shadow: 0 2px 8px rgba(0, 138, 255, 0.1); scrollbar-width: thin;
backdrop-filter: blur(5px);
} }
.nav-menu-item { .top-nav-menu::-webkit-scrollbar {
padding: 8px 20px; height: 3px;
}
.top-nav-menu::-webkit-scrollbar-track {
background: rgba(0, 138, 255, 0.1);
border-radius: 2px;
}
.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; cursor: pointer;
font-size: 14px; font-size: 13px;
font-weight: 600; font-weight: 600;
color: #555; color: #333;
transition: all 0.3s; transition: all 0.3s;
border-radius: 6px; border-radius: 4px;
white-space: nowrap;
min-width: 60px;
justify-content: center;
margin: 0 1px;
position: relative; position: relative;
text-align: center; flex-shrink: 0;
min-width: 70px;
} }
.nav-menu-item:hover { .top-nav-item:hover {
color: #008aff; 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; color: #008aff;
background: linear-gradient(135deg, rgba(0, 138, 255, 0.15), rgba(0, 138, 255, 0.25)); font-weight: 700;
box-shadow: 0 2px 8px rgba(0, 138, 255, 0.2);
} }
.nav-menu-item.active::after { /* 移除了蓝色指示条 */
content: ''; .top-nav-item.active::after {
position: absolute; display: none;
bottom: -2px; }
left: 20%;
width: 60%; .nav-icon {
height: 2px; font-size: 14px;
background: linear-gradient(90deg, #008aff, #0066cc); color: #333;
border-radius: 1px; transition: all 0.3s;
}
.top-nav-item:hover .nav-icon,
.top-nav-item.active .nav-icon {
color: #008aff;
} }
.nav-text { .nav-text {
@ -982,44 +997,46 @@ export default {
.header-right { .header-right {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 30px; gap: 15px;
} }
.combat-info { /* 作战信息组 */
.combat-info-group {
display: flex; display: flex;
gap: 25px; gap: 12px;
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);
} }
.info-item { .info-box {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 10px; gap: 8px;
padding: 0 10px; padding: 6px 10px;
border-right: 1px solid rgba(0, 138, 255, 0.2); 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 { .info-box:hover {
border-right: none; 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 { .info-icon {
font-size: 18px; font-size: 16px;
color: #008aff; color: #008aff;
background: rgba(0, 138, 255, 0.1); min-width: 20px;
padding: 6px; text-align: center;
border-radius: 6px;
box-shadow: 0 2px 6px rgba(0, 138, 255, 0.2);
} }
.info-content { .info-content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex: 1;
} }
.info-label { .info-label {
@ -1027,106 +1044,50 @@ export default {
color: #666; color: #666;
font-weight: 500; font-weight: 500;
margin-bottom: 2px; margin-bottom: 2px;
white-space: nowrap;
} }
.info-value { .info-value {
font-size: 14px; font-size: 13px;
font-weight: 700; font-weight: 700;
color: #333; color: #333;
white-space: nowrap;
font-family: 'Courier New', monospace; font-family: 'Courier New', monospace;
letter-spacing: 0.5px;
} }
/* 用户状态区域 */ /* 作战时间和天文时间的特殊样式 */
.user-status { .combat-info-group .info-box:nth-child(3) .info-value {
display: flex; color: #008aff;
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);
} }
.export-btn { .combat-info-group .info-box:nth-child(4) .info-value {
background: linear-gradient(135deg, rgba(0, 138, 255, 0.8), rgba(0, 102, 204, 0.8)); color: #52c41a;
border: 1px solid rgba(0, 138, 255, 0.9);
} }
.export-btn:hover { /* 用户状态区域 */
background: linear-gradient(135deg, rgba(0, 138, 255, 0.9), rgba(0, 102, 204, 0.9)); .user-status-area {
border-color: rgba(0, 138, 255, 1); display: flex;
box-shadow: 0 2px 8px rgba(0, 138, 255, 0.3); align-items: center;
} }
.user-avatar { .user-avatar {
border: 2px solid rgba(0, 138, 255, 0.3); 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; transition: all 0.3s;
background: rgba(255, 255, 255, 0.9);
} }
.user-avatar:hover { .user-avatar:hover {
transform: scale(1.1); transform: scale(1.1);
box-shadow: 0 4px 12px rgba(0, 138, 255, 0.3); box-shadow: 0 4px 10px rgba(0, 138, 255, 0.25);
} border-color: rgba(0, 138, 255, 0.6);
.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);
}
} }
/* 左侧菜单栏 - 蓝色主题 */ /* 左侧菜单栏 - 蓝色主题 */
.floating-left-menu { .floating-left-menu {
position: absolute; position: absolute;
top: 80px; top: 70px;
left: 20px; left: 20px;
width: 40px; width: 40px;
background: rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.3);
@ -1256,7 +1217,7 @@ export default {
/* 右侧外部隐藏按钮 */ /* 右侧外部隐藏按钮 */
.right-external-hide-btn { .right-external-hide-btn {
position: absolute; position: absolute;
top: 80px; top: 70px;
right: 320px; /* 面板宽度300px + 外边距20px */ right: 320px; /* 面板宽度300px + 外边距20px */
width: 28px; width: 28px;
height: 40px; height: 40px;
@ -1292,7 +1253,7 @@ export default {
/* 右侧浮动面板 - 蓝色主题 */ /* 右侧浮动面板 - 蓝色主题 */
.floating-right-panel { .floating-right-panel {
position: absolute; position: absolute;
top: 80px; top: 70px;
right: 20px; right: 20px;
width: 300px; width: 300px;
border-radius: 0 8px 8px 8px; border-radius: 0 8px 8px 8px;

Write Preview
Loading…
Cancel
Save