<style scoped>
#main{
background:url("/xxx.jpg");
width:100
vw;
height:100
vh;
position:fixed;
background
-size:103%
110%;
background
-position: center center;
top: 0%;
left: 0;
right: 0;
bottom: 0;
}
/* 容器整体是相对定位 */
.input
-box {
position: absolute;
top: 60px;
left: 100px;
width: 250px; /* 固定宽度方便布局 */
padding: 16px 20px;
background: rgba(0, 0, 0, 0.1); /* 半透明黑背景，突出控件 */
border
-radius: 8px;
color: white;
font
-family: "Segoe UI", Tahoma, Geneva, Verdana, sans
-serif;
font
-size: 14px;
user
-select: none;
z
-index: 3;
}
/* 标题样式 */
.input
-box h3 {
margin: 0 0 12px 0;
font
-weight: 600;
font
-size: 18px;
border
-bottom: 1px solid #555;
padding
-bottom: 6px;
}
/* 输入标签整体块，垂直排列 */
.input
-box label {
display: flex;
justify
-content: space
-between;
align
-items: center;
margin
-bottom: 8px;
user
-select: text;
}
/* 输入框样式 */
.input
-box input[type="number"] {
width: 100px;
padding: 4px 6px;
border
-radius: 4px;
border: none;
font
-size: 14px;
out
line: none;
}
/* 按钮组容器，横向排列，间隔10px */
.button
-group {
margin
-top: 12px;
display: flex;
gap: 10px;
flex
-wrap: wrap; /* 超出换行 */
}
/* 按钮样式 */
.input
-box button {
flex: 1 1 auto;
padding: 8px 12px;
background: rgba(42, 140, 240, 0.5); /* 最后一个值0.8是透明度，1为完全不透明 */
border: none;
border
-radius: 4px;
color: white;
font
-weight: 600;
cursor: pointer;
transition: background
-color 0.2s ease;
}
.input
-box button:hover {
background: #1e6fd8;
}
/* 分割线 */
.input
-box hr {
margin: 20px 0;
border: none;
border
-top: 1px solid #555;
}
/* cesium和three容器占满剩余空间 */
#cesiumContainer {
position: absolute;
top: 68px;
left: 90px;
right:
117px;
bottom: 50px;
z
-index: 2;
/* 添加背景透明度（0.7表示70%不透明，30%透明） */
background
-color: rgba(0, 0, 0, 0.5);
width: 1710px;
height: 850px;
min
-width: 1710px;
min
-height: 850px;
max
-width: 1710px;
max
-height: 950px;
display: block !important;
visibility: visible !important;
overflow: hidden;
/* 新增：确保容器始终有布局 */
box
-sizing: border
-box;
}
#threeContainer {
position: absolute;
top: 180px;
right:
115px;
width: 350px;
height: 350px;
background: rgba(0, 0, 0, 0.1);
/* 添加背景图并设置大小与容器一致 */
background: url("/Satellite_background.png") no
-repeat;
background
-color: rgba(0, 0, 0, 0.3); /* 半透明黑色叠加 */
background
-blend
-mode: multiply; /* 调整混合模式以达到所需效果 */
background
-size: 100% 105.5%;
background
-position:
-1px
-10px;
border
-radius: 8px;
z
-index: 3;
/* 确保容器有实际尺寸 */
min
-width: 350px;
min
-height: 350px;
max
-width: 350px;
max
-height: 350px;
padding
-top: 30px; /* 为标题留出空间 */
box
-sizing: border
-box;
}
/*
使用伪元素添加标题 */
#threeContainer::before {
content: "卫星姿态展示";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 30px;
line-height: 30px;
text
-align: center;
color: white;
font
-family: "Segoe UI", Tahoma, Geneva, Verdana, sans
-serif;
font
-size: 15px;
font
-weight: 600;
z
-index: 4;
}
/* 状态灯样式 */
.status
-lights {
display: flex;
gap: 15px;
margin: 10px 0;
align
-items: center;
}
.status
-item {
display: flex;
align
-items: center;
gap: 5px;
}
.status
-light {
width: 16px;
height: 16px;
border
-radius: 50%;
background
-color: #555; /* 未激活状态为灰色 */
box
-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
transition: all 0.3s ease;
}
/* 正常运行状态灯
- 绿色 */
.normal
-active {
background
-color: #4CAF50;
box
-shadow: 0 0 8px #4CAF50, 0 0 12px rgba(76, 175, 80, 0.5);
}
/* 变轨中状态灯
- 黄色 */
.transition
-active {
background
-color: #FFC107;
box
-shadow: 0 0 8px #FFC107, 0 0 12px rgba(255, 193, 7, 0.5);
}
/* 变轨完成状态灯
- 蓝色 */
.completed
-active {
background
-color: #2196F3;
box
-shadow: 0 0 8px #2196F3, 0 0 12px rgba(33, 150, 243, 0.5);
}
/* 卫星变轨区域折叠控制 */
.orbit
-section .section
-header {
cursor: pointer;
padding: 8px 0;
}
/* 标题悬停效果，提示可点击 */
.orbit
-section .section
-header h3 {
transition: color 0.3s ease;
margin
-bottom: 0; /* 移除默认底部边距，避免折叠时留白 */
}
.orbit
-section .section
-header:hover h3 {
color: #00ffff; /* 科技蓝高亮，提示可点击 */
}
/* 内容区域默认折叠，带过渡动画 */
.section
-content {
max
-height: 0;
overflow: hidden;
transition: max
-height 0.5s cubic
-bez
ier(0, 1, 0, 1); /* 平滑动画曲线 */
padding
-top: 0;
margin
-top: 0;
}
/* 展开状态 */
.section
-content.expanded {
max
-height: 500px; /* 足够容纳内容的高度 */
transition: max
-height 0.5s ease
-in
-out;
padding
-top: 12px; /* 展开时添加顶部间距 */
margin
-top: 8px;
}
/* 颜色说明样式 */
.color
-legend {
display: flex;
flex
-direction: column;
gap: 6px;
margin
-top: 8px;
}
.color
-item {
display: flex;
align
-items: center;
gap: 8px;
font
-size: 13px;
}
.color
-box {
width: 16px;
height: 16px;
border
-radius: 2px;
}
.cyan {
background
-color: rgba(0, 255, 255, 1);
}
.green {
background
-color: rgba(0, 255, 0, 0.7);
}
.orange {
background
-color: rgba(255, 165, 0, 0.7);
}
.yellow {
background
-color: rgba(255, 255, 0, 0.939);
}
#satelliteDataContainer {
position: fixed;
bottom: 350px;
right: 100px;
width: 350px;
background: rgba(0, 0, 0, 0.3);
border
-radius: 8px;
z
-index: 3;
padding: 0;
box
-sizing: border
-box;
color: white;
font
-family: "Segoe UI", Tahoma, Geneva, Verdana, sans
-serif;
box
-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
transition: all 0.3s ease;
max
-height: 50px;
overflow: hidden;
}
/* 标题样式 */
#satelliteDataContainer .data
-title {
margin: 0;
padding: 15px;
font
-size: 16px;
cursor: pointer;
display: flex;
justify
-content: space
-between;
align
-items: center;
justify
-content: center;
background: rgba(0, 0, 0, 0.5);
border
-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
/* 内容区域样式 */
#satelliteDataContainer .data
-content {
padding: 15px;
overflow
-y: auto;
max
-height: calc(100%
- 50px);
}
/* 展开状态样式 */
#satelliteDataContainer.expanded {
top: 50%;
left: 50%;
bottom: auto;
right: auto;
transform: translate(
-50%,
-50%);
width: 80%;
max
-width: 800px;
max
-height: 80
vh;
}
/* 数据分区样式 */
.data
-section {
margin
-bottom: 15px;
padding
-bottom: 10px;
border
-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.data
-section:last
-child {
margin
-bottom: 0;
padding
-bottom: 0;
border
-bottom: none;
}
.data
-section h4 {
margin: 0 0 10px 0;
font
-size: 15px;
color: #00ffff;
}
/* 数据项样式 */
.data
-item {
display: flex;
justify
-content: space
-between;
margin
-bottom: 6px;
font
-size: 16px;
}
.data
-label {
color: #ccc;
}
.data
-value {
color: #fff;
font
-weight: 500;
}
/* 状态颜色 */
.status
-normal {
color: #4CAF50;
}
.status
-error {
color: #ff4444;
}
/* 滚动条美化 */
#satelliteDataContainer .data
-content {
scrollbar
-width: thin;
scrollbar
-color: rgba(255, 255, 255, 0.3) transparent;
}
#satelliteDataContainer .data
-content::
-webkit
-scrollbar {
width: 6px;
}
#satelliteDataContainer .data
-content::
-webkit
-scrollbar
-track {
background: transparent;
}
#satelliteDataContainer .data
-content::
-webkit
-scrollbar
-thumb {
background
-color: rgba(255, 255, 255, 0.3);
border
-radius: 3px;
}
/* 响应式调整 */
@media (max
-width: 768px) {
#satelliteDataContainer {
width: calc(100%
- 40px);
}
#satelliteDataContainer.expanded {
width: 90%;
max
-height: 90
vh;
}
}
/* WebSocket断开提示框 */
.websocket
-alert {
position: fixed;
top: 50%;
left: 50%;
transform: translate(
-50%,
-50%);
width: 250px;
height: 100px;
background: url("/wsAlert.png") no
-repeat center center;
background
-size: 100% 100%;
background
-color: rgba(0, 0, 0, 0.5);
border
-radius: 10px;
display: flex;
align
-items: center;
justify
-content: center;
color: white;
font
-size: 18px;
font
-weight: bold;
z
-index: 9999;
box
-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
border: 1px solid #fff;
/* 应用暗亮动画：1秒一个周期，无限循环 */
animation: brightnessPulse 1s ease
-in
-out infinite;
}
.websocket
-alert.hidden {
display: none;
animation: none; /* 隐藏时停止动画 */
}
/* 定义暗亮闪烁动画（从暗到亮再到暗） */
@keyframes brightnessPulse {
0% {
opacity: 0.5; /* 较暗状态 */
box
-shadow: 0 0 10px rgba(255, 255, 255, 0.3); /* 弱阴影增强暗感 */
}
50% {
opacity: 1; /* 最亮状态 */
box
-shadow: 0 0 20px rgba(255, 255, 255, 0.8); /* 强阴影增强亮感 */
}
100% {
opacity: 0.5; /* 回到较暗状态 */
box
-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}
}
/* 任务状态相关样式 */
/* 下拉框样式 */
.input
-box select {
width: 100%;
padding: 6px 10px;
margin: 8px 0;
border: none;
border
-radius: 4px;
background: rgba(42, 140, 240, 0.3);
color: white;
font
-size: 14px;
font
-weight: 500;
cursor: pointer;
out
line: none;
transition: background 0.2s ease;
}
.input
-box select:hover {
background: rgba(42, 140, 240, 0.6);
}
.input
-box select:disabled {
opacity: 0.6;
cursor: not
-allowed;
}
/* 进度条容器 */
.progress
-bar {
width: 100%;
height: 12px;
background: rgba(255, 255, 255, 0.2);
border
-radius: 6px;
overflow: hidden;
margin: 10px 0;
box
-shadow: inset 0 0 5px rgba(0, 0, 0, 0.4);
}
/* 进度条动画 */
.progress {
height: 100%;
background:
linear
-grad
ient(90deg, #4caf50, #8bc34a);
box
-shadow: 0 0 8px #4caf50;
transition: width 0.2s
linear;
}
</style>
<template>
<div id="main">
<div class="websocket
-alert hidden" id="wsAlert">
{{ wsAlertMessage }}
</div>
<div class="input
-box">
<div class="button
-group">
<button @click="generateSimpleOrbit">生成轨道</button>
<button @click="lockCameraToSatellite">锁定卫星视角</button>
<button @click="clearAllOrbits">清除轨道</button>
<button @click="resetCamera">恢复自由视角</button>
</div>
<hr />
<!
-- 卫星变轨区域
- 默认折叠
-->
<div class="orbit
-section">
<!
-- 点击标题切换展开/折叠
-->
<div class="section
-header" @click="toggleOrbitSection">
<h3>轨道说明</h3>
</div>
<!
-- 内容区域
- 带平滑过渡动画
-->
<div class="section
-content" :class="{ 'expanded': isOrbitExpanded }">
<div class="color
-legend">
<div class="color
-item">
<div class="color
-box cyan"></div>
<span>原轨道</span>
</div>
<div class="color
-item">
<div class="color
-box green"></div>
<span>升轨后新轨道</span>
</div>
<div class="color
-item">
<div class="color
-box orange"></div>
<span>降轨后新轨道</span>
</div>
<div class="color
-item">
<div class="color
-box yellow"></div>
<span>变轨过渡路径</span>
</div>
</div>
</div>
</div>
<hr />
<h3>在轨运行状态</h3>
<div class="status
-lights">
<div class="status
-item">
<div class="status
-light" :class="{ 'normal
-active': currentStatus === 'normal' }"></div>
<span>正常运行</span>
</div>
<div class="status
-item">
<div class="status
-light" :class="{ 'transition
-active': currentStatus === 'transition' }"></div>
<span>变轨中</span>
</div>
<div class="status
-item">
<div class="status
-light" :class="{ 'completed
-active': currentStatus === 'completed' }"></div>
<span>变轨完成</span>
</div>
</div>
<hr />
<!
-- 任务状态部分
-->
<h3>任务状态</h3>
<div>
<p>当前任务：<strong>{{ currentMission }}</strong></p>
<!
-- 下拉选择任务
-->
<select v
-model="selectedMission" :disabled="isSwitching" @change="switchMission">
<option v
-for="m in missions" :key="m" :value="m">{{ m }}</option>
</select>
<!
-- 进度条
-->
<div v
-if="isSwitching" class="progress
-bar">
<div class="progress" :style="{ width: progress + '%' }"></div>
</div>
</div>
<!
-- <h3>卫星模型</h3>
<div class="button
-group">
<button @click="selectSatelliteModel">导入加载卫星模型</button>
</div>
-->
</div>
<div id="cesiumContainer"></div>
<div id="threeContainer"></div>
<div id="satelliteDataContainer" :class="{ 'expanded': isDataExpanded }">
<h3 class="data
-title" @click="toggleDataDisplay">卫星遥测数据</h3>
<div class="data
-content">
<div class="data
-section">
<h4>OBC 数据</h4>
<div class="data
-item">
<span class="data
-label">系统运行状态:</span>
<span class="data
-value" :class="'status
-normal'">{{ obcStatus }}</span>
</div>
<div class="data
-item">
<span class="data
-label">遥控指令计数:</span>
<span class="data
-value">{{ tcCount }}</span>
</div>
<div class="data
-item">
<span class="data
-label">星内基准时:</span>
<span class="data
-value">{{ utcTime }}</span>
</div>
<div class="data
-item">
<span class="data
-label">运行时间:</span>
<span class="data
-value">{{ runTime }}s</span>
</div>
</div>
<div class="data
-section">
<h4>GNSS 数据</h4>
<div class="data
-item">
<span class="data
-label">轨道半长轴:</span>
<span class="data
-value">{{ orbitSma }}m</span>
</div>
<div class="data
-item">
<span class="data
-label">轨道偏心率:</span>
<span class="data
-value">{{ orbitEcc }}</span>
</div>
<div class="data
-item">
<span class="data
-label">轨道倾角:</span>
<span class="data
-value">{{ orbitInc }}rad</span>
</div>
<div class="data
-item">
<span class="data
-label">升交点赤经:</span>
<span class="data
-value">{{ orbitRaan }}rad</span>
</div>
<div class="data
-item">
<span class="data
-label">升交点角距:</span>
<span class="data
-value">{{ orbitAol }}rad</span>
</div>
<div class="data
-item">
<span class="data
-label">平近点角:</span>
<span class="data
-value">{{ orbitMa }}rad</span>
</div>
</div>
<div class="data
-section">
<h4>气浮台数据</h4>
<div class="data
-item">
<span class="data
-label">姿态表示选择:</span>
<span class="data
-value">{{ floatSelect }}</span>
</div>
<div class="data
-item">
<span class="data
-label">俯仰角度:</span>
<span class="data
-value">{{ floatPitch }}°</span>
</div>
<div class="data
-item">
<span class="data
-label">横滚角度:</span>
<span class="data
-value">{{ floatRoll }}°</span>
</div>
<div class="data
-item">
<span class="data
-label">偏航角度:</span>
<span class="data
-value">{{ floatYaw }}°</span>
</div>
</div>
<div class="data
-section">
<h4>系统状态</h4>
<div class="data
-item">
<span class="data
-label">系统状态码:</span>
<span class="data
-value" :class="systemErrorCode === '正常'
? 'status
-normal' : 'status
-error'">{{ systemErrorCode }}</span>
</div>
</div>
</div>
</div>
</div>
</template>
程序运行一段时间后会突然出现如下报错：
An error occurred while rendering. Rendering has stopped.
DeveloperError: Expected width to be greater than 0, actual value was 0
本文讲述了在IE浏览器中line-height使用vh单位失效的问题，并揭示了解决方案——通过添加display:-ms-flexBox属性得以修复。
扫一扫
4001
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
