776 lines
32 KiB
Vue
776 lines
32 KiB
Vue
<template>
|
||
<el-tooltip
|
||
class="box-item"
|
||
effect="dark"
|
||
content="
|
||
<div style='font-size: 1rem; color: rgb(165 243 252 / 1); line-height: 1rem;'>
|
||
仅显示输入框，适合熟悉卫星轨道六根数原理的用户使用。
|
||
</div>
|
||
"
|
||
raw-content
|
||
placement="left"
|
||
>
|
||
<button @click="showit" class="satelliteCreate">专家模式</button>
|
||
</el-tooltip>
|
||
<div
|
||
v-if="show"
|
||
class="text-left p-10"
|
||
style="
|
||
color: #ffffff;
|
||
background-color: rgb(55 55 55 / 0.9);
|
||
border-radius: 2rem;
|
||
box-shadow: 0 0px 1rem 0px rgb(165 243 252 / 1);
|
||
position: fixed;
|
||
top: 10vh;
|
||
left: 20vw;
|
||
width: 60vw;
|
||
height: 80vh;
|
||
font-size: 1rem;
|
||
"
|
||
>
|
||
<div
|
||
@click="close"
|
||
class="bg-gray-600 hover:bg-red-600 text-3xl absolute top-0 right-0 cursor-pointer flex justify-center items-center"
|
||
style="
|
||
width: 2rem;
|
||
height: 2rem;
|
||
border-top-right-radius: 1rem;
|
||
border-bottom-left-radius: 1rem;
|
||
"
|
||
>
|
||
<el-icon style="width: 2rem; height: 2rem">
|
||
<CloseBold color="#ffffff" />
|
||
</el-icon>
|
||
</div>
|
||
<div class="w-full text-center" style="font-size: 2rem; height: 4rem; line-height: 4rem;">
|
||
添加轨道
|
||
</div>
|
||
<div class="text-white text-center flex flex-wrap justify-center items-center" style="height: 80%; font-size: 1rem;">
|
||
<div class="option">
|
||
<label :style="satelliteNameCheck ? '' : 'color: red;'">轨道名称：</label>
|
||
<input
|
||
type="text"
|
||
maxlength="12"
|
||
v-model="satelliteNameData"
|
||
placeholder="请输入轨道名称"
|
||
class="dataInput"
|
||
:style="satelliteNameCheck ? 'border: 2px solid black; color: black;' : 'border: 2px solid red; color: red;'"
|
||
/>
|
||
</div>
|
||
<div class="option">
|
||
<label :style="nearPointLengthCheck ? '' : 'color: red;'">近地点高度</label>
|
||
<label :style="nearPointLengthCheck ? 'color: #00efff;' : 'color: red;'">（介于200㎞~120000㎞之间，单位：㎞）</label>
|
||
<label :style="nearPointLengthCheck ? '' : 'color: red;'">：</label>
|
||
<input
|
||
type="number"
|
||
maxlength="6"
|
||
v-model="nearPointLengthData"
|
||
placeholder="请输入数据（单位：㎞）"
|
||
class="dataInput"
|
||
:style="nearPointLengthCheck ? 'border: 2px solid black; color: black;' : 'border: 2px solid red; color: red;'"
|
||
/>
|
||
<el-tooltip
|
||
class="box-item"
|
||
effect="dark"
|
||
content="
|
||
<div style='font-size: 1rem; color: rgb(165 243 252 / 1); line-height: 1.5rem;'>
|
||
近地点高度就是卫星运行时，离地球最近的那个点，到地球表面的垂直距离。
|
||
</div>
|
||
<div style='font-size: 1rem; color: rgb(165 243 252 / 1); line-height: 1.5rem;'>
|
||
卫星的运行轨道不是正圆形，而是有点 “扁” 的椭圆。
|
||
</div>
|
||
<div style='font-size: 1rem; color: rgb(165 243 252 / 1); line-height: 1.5rem;'>
|
||
卫星绕着地球转时，会有一个离地球最近的位置，这个位置就是 “近地点”。
|
||
</div>
|
||
<div style='font-size: 1rem; color: rgb(165 243 252 / 1); line-height: 1.5rem;'>
|
||
近地点高度，就是从这个最近的点，垂直往下量到地心的距离。
|
||
</div>
|
||
"
|
||
raw-content
|
||
placement="top"
|
||
>
|
||
<el-icon style="margin-left: 0.5rem;"><QuestionFilled /></el-icon>
|
||
</el-tooltip>
|
||
</div>
|
||
<div class="option">
|
||
<label :style="farPointLengthCheck ? '' : 'color: red;'">远地点高度</label>
|
||
<label :style="farPointLengthCheck ? 'color: #00efff;' : 'color: red;'">（介于200㎞~120000㎞之间，单位：㎞）</label>
|
||
<label :style="farPointLengthCheck ? '' : 'color: red;'">：</label>
|
||
<input
|
||
type="number"
|
||
maxlength="6"
|
||
v-model="farPointLengthData"
|
||
placeholder="请输入数据（单位：㎞）"
|
||
class="dataInput"
|
||
:style="farPointLengthCheck ? 'border: 2px solid black; color: black;' : 'border: 2px solid red; color: red;'"
|
||
/>
|
||
<el-tooltip
|
||
class="box-item"
|
||
effect="dark"
|
||
content="
|
||
<div style='font-size: 1rem; color: rgb(165 243 252 / 1); line-height: 1.5rem;'>
|
||
远地点高度就是卫星运行时，离地球最远的那个点，到地球表面的垂直距离。
|
||
</div>
|
||
<div style='font-size: 1rem; color: rgb(165 243 252 / 1); line-height: 1.5rem;'>
|
||
卫星的运行轨道不是正圆形，而是有点 “扁” 的椭圆。
|
||
</div>
|
||
<div style='font-size: 1rem; color: rgb(165 243 252 / 1); line-height: 1.5rem;'>
|
||
卫星绕着地球转时，会有一个离地球最远的位置，这个位置就是 “远地点”。
|
||
</div>
|
||
<div style='font-size: 1rem; color: rgb(165 243 252 / 1); line-height: 1.5rem;'>
|
||
远地点高度，就是从这个最远的点，垂直往下量到地心的距离。
|
||
</div>
|
||
"
|
||
raw-content
|
||
placement="top"
|
||
>
|
||
<el-icon style="margin-left: 0.5rem;"><QuestionFilled /></el-icon>
|
||
</el-tooltip>
|
||
</div>
|
||
<div class="option">
|
||
<label :style="semiMajorAxisCheck ? '' : 'color: red;'">轨道半长轴</label>
|
||
<label :style="semiMajorAxisCheck ? 'color: #00efff;' : 'color: red;'">（介于200㎞~120000㎞之间）</label>
|
||
<label :style="semiMajorAxisCheck ? '' : 'color: red;'">：</label>
|
||
<label :style="semiMajorAxisCheck ? 'color: rgb(250, 230, 164);' : 'color: red;'">{{ semiMajorAxisData === '' ? '' : Number(semiMajorAxisData).toFixed(3) }}</label>
|
||
<label :style="semiMajorAxisCheck ? 'color: #00efff;' : 'color: red;'">（单位：㎞）</label>
|
||
<el-tooltip
|
||
class="box-item"
|
||
effect="dark"
|
||
content="
|
||
<div style='font-size: 1rem; color: rgb(165 243 252 / 1); line-height: 1.5rem;'>
|
||
卫星轨道为椭圆形，轨道半长轴就是 “长轴的一半长度”，也就是从椭圆（轨道）中心到椭圆最长端（远地点）的距离。
|
||
</div>
|
||
<div style='font-size: 1rem; color: rgb(165 243 252 / 1); line-height: 1.5rem;'>
|
||
它不是到地球表面的距离，而是从椭圆中心（不是地球球心）到轨道边缘的最长半径。
|
||
</div>
|
||
<div style='font-size: 1rem; color: rgb(165 243 252 / 1); line-height: 1.5rem;'>
|
||
简单说：椭圆轨道像个 “拉长的圆”，半长轴就相当于这个 “拉长圆” 的 “平均半径”—— 能反映轨道的整体大小。
|
||
</div>
|
||
<div style='font-size: 1rem; color: rgb(165 243 252 / 1); line-height: 1.5rem;'>
|
||
轨道半长轴决定了轨道的大小，决定卫星离地球的平均距离，决定卫星飞得高还是低。
|
||
</div>
|
||
<div style='font-size: 1rem; color: rgb(165 243 252 / 1); line-height: 1.5rem;'>
|
||
卫星飞得越高，速度越慢，周期越长，半径越大，轨道越大，卫星离地球越远。
|
||
</div>
|
||
<div style='font-size: 1rem; color: rgb(165 243 252 / 1); line-height: 1.5rem;'>
|
||
图中b为半短轴，半短轴 b 越接近半长轴 a；当偏心率=0（正圆轨道）时，b=a，此时半短轴就是圆的半径。
|
||
</div>
|
||
"
|
||
raw-content
|
||
placement="top"
|
||
>
|
||
<el-icon style="margin-left: 0.5rem;"><QuestionFilled /></el-icon>
|
||
</el-tooltip>
|
||
</div>
|
||
<div class="option">
|
||
<label :style="eccentricityCheck ? '' : 'color: red;'">轨道偏心率</label>
|
||
<label :style="eccentricityCheck ? 'color: #00efff;' : 'color: red;'">（不超过0.9）</label>
|
||
<label :style="eccentricityCheck ? '' : 'color: red;'">：</label>
|
||
<label :style="eccentricityCheck ? 'color: rgb(250, 230, 164);' : 'color: red;'">{{ eccentricityData === '' ? '' : Number(eccentricityData).toFixed(6) }}</label>
|
||
<el-tooltip
|
||
class="box-item"
|
||
effect="dark"
|
||
content="
|
||
<div style='font-size: 1rem; color: rgb(165 243 252 / 1); line-height: 1.5rem;'>
|
||
轨道偏心率决定了轨道的形状，是用来描述天体轨道形状偏离圆形程度的一个数值。
|
||
</div>
|
||
<div style='font-size: 1rem; color: rgb(165 243 252 / 1); line-height: 1.5rem;'>
|
||
轨道偏心率是椭圆两焦点之间的距离（焦距）与长轴的比值，也可以换算为半焦距与半长轴的比值，描述椭圆扁平程度。
|
||
</div>
|
||
<div style='font-size: 1rem; color: rgb(165 243 252 / 1); line-height: 1.5rem;'>
|
||
用 0 到 1 之间的数字表示，偏心率越接近 0，轨道越圆；偏心率越接近 1，轨道越扁（但不会等于 1，等于 1 就不是椭圆了）。
|
||
</div>
|
||
<div style='font-size: 1rem; color: rgb(165 243 252 / 1); line-height: 1.5rem;'>
|
||
近地点和远地点距离差不多（轨道圆），偏心率就小。
|
||
</div>
|
||
<div style='font-size: 1rem; color: rgb(165 243 252 / 1); line-height: 1.5rem;'>
|
||
近地点离地球很近、远地点离地球很远（轨道扁），偏心率就大。
|
||
</div>
|
||
<div style='font-size: 1rem; color: rgb(165 243 252 / 1); line-height: 1.5rem;'>
|
||
用于描述轨道的形状，表征轨道椭圆的扁平程度。
|
||
</div>
|
||
<div style='font-size: 1rem; color: rgb(165 243 252 / 1); line-height: 1.5rem;'>
|
||
假设轨道半长轴为b，轨道焦点到轨道中心距离为a，轨道离心率为e，则：e = a ÷ b。
|
||
</div>
|
||
"
|
||
raw-content
|
||
placement="top"
|
||
>
|
||
<el-icon style="margin-left: 0.5rem;"><QuestionFilled /></el-icon>
|
||
</el-tooltip>
|
||
</div>
|
||
<div class="option">
|
||
<label>轨道周期</label>
|
||
<label style="color: #00efff;">（秒）</label>
|
||
<label>：</label>
|
||
<label style="color: rgb(250, 230, 164);">{{ orbitalPeriodData === '' ? '' : Number(orbitalPeriodData).toFixed(3) }}</label>
|
||
<label style="color: #00efff;">（单位：s）</label>
|
||
<el-tooltip
|
||
class="box-item"
|
||
effect="dark"
|
||
content="
|
||
<div style='font-size: 1rem; color: rgb(165 243 252 / 1); line-height: 1.5rem;'>
|
||
轨道周期就是卫星绕中心天体（比如地球）完整转一圈的时间。
|
||
</div>
|
||
<div style='font-size: 1rem; color: rgb(165 243 252 / 1); line-height: 1.5rem;'>
|
||
简单说，轨道周期就是从卫星某个位置（比如近地点）出发，绕轨道飞一圈后，再回到这个位置的总时间。
|
||
</div>
|
||
<div style='font-size: 1rem; color: rgb(165 243 252 / 1); line-height: 1.5rem;'>
|
||
万有引力常数 G = 6.67430 × 10^⁻¹¹ 米³ / (千克 × 秒²)，地球质量 M = 5.965 × 10²⁴ 千克。
|
||
</div>
|
||
<div style='font-size: 1rem; color: rgb(165 243 252 / 1); line-height: 1.5rem;'>
|
||
人造地球卫星运转周期T（秒）与圆轨道半径或椭圆轨道半长轴R（米）之间的关系可用下列公式计算：T = 2π × (R³ ÷ GM)½ 。
|
||
</div>
|
||
"
|
||
raw-content
|
||
placement="top"
|
||
>
|
||
<el-icon style="margin-left: 0.5rem;"><QuestionFilled /></el-icon>
|
||
</el-tooltip>
|
||
</div>
|
||
<div class="option">
|
||
<label>平均角速度</label>
|
||
<label style="color: #00efff;">（度/秒）</label>
|
||
<label>：</label>
|
||
<label style="color: rgb(250, 230, 164);">{{ angularVelocityDegData === '' ? '' : Number(angularVelocityDegData).toFixed(6) }}</label>
|
||
<label style="color: #00efff;">（单位：°/s）</label>
|
||
<el-tooltip
|
||
class="box-item"
|
||
effect="dark"
|
||
content="
|
||
<div style='font-size: 1rem; color: rgb(165 243 252 / 1); line-height: 1.5rem;'>
|
||
平均角速度就是卫星绕中心天体转的时候，单位时间内转过的角度，简单说就是 “转得快不快” 的 “角度版” 描述。
|
||
</div>
|
||
<div style='font-size: 1rem; color: rgb(165 243 252 / 1); line-height: 1.5rem;'>
|
||
周期越短（转一圈时间少），角速度越大（转得快）。
|
||
</div>
|
||
<div style='font-size: 1rem; color: rgb(165 243 252 / 1); line-height: 1.5rem;'>
|
||
通俗理解：比如卫星 1 小时转了 45°，它的平均角速度就是 45°/ 小时；转得越快，单位时间内转过的角度越大，角速度就越大。
|
||
</div>
|
||
<div style='font-size: 1rem; color: rgb(165 243 252 / 1); line-height: 1.5rem;'>
|
||
卫星飞得越高，速度越慢，卫星飞得越低，速度越快，平均角速度是卫星在轨道上的平均运行速度。
|
||
</div>
|
||
"
|
||
raw-content
|
||
placement="top"
|
||
>
|
||
<el-icon style="margin-left: 0.5rem;"><QuestionFilled /></el-icon>
|
||
</el-tooltip>
|
||
</div>
|
||
<div class="option">
|
||
<label :style="inclinationCheck ? '' : 'color: red;'">轨道倾角</label>
|
||
<label :style="inclinationCheck ? 'color: #00efff;' : 'color: red;'">（0°~180°）</label>
|
||
<label :style="inclinationCheck ? '' : 'color: red;'">：</label>
|
||
<input
|
||
type="number"
|
||
maxlength="3"
|
||
v-model="inclinationData"
|
||
placeholder="请输入数据（0°~180°）"
|
||
class="dataInput"
|
||
:style="inclinationCheck ? 'border: 2px solid black; color: black;' : 'border: 2px solid red; color: red;'"
|
||
/>
|
||
<el-tooltip
|
||
class="box-item"
|
||
effect="dark"
|
||
content="
|
||
<div style='font-size: 1rem; color: rgb(165 243 252 / 1); line-height: 1.5rem;'>
|
||
轨道倾角就是轨道相对于地球赤道的倾斜程度，是卫星绕地球转的轨道平面，和地球赤道平面之间的 “夹角”，用 0° 到 180° 的数字表示，核心是描述轨道 “歪不歪”，“往哪个方向歪”。
|
||
</div>
|
||
<div style='font-size: 1rem; color: rgb(165 243 252 / 1); line-height: 1.5rem;'>
|
||
地球赤道平面：想象过地球赤道画一个无限大的 “隐形圆盘”，这就是赤道平面。
|
||
</div>
|
||
<div style='font-size: 1rem; color: rgb(165 243 252 / 1); line-height: 1.5rem;'>
|
||
卫星轨道平面：卫星绕地球转的轨迹所在的 “隐形圆盘”，就是轨道平面。
|
||
</div>
|
||
<div style='font-size: 1rem; color: rgb(165 243 252 / 1); line-height: 1.5rem;'>
|
||
轨道倾角，就是这两个 “隐形圆盘” 之间夹着的角度，就像两本书打开时书页之间的夹角一样。
|
||
</div>
|
||
<div style='font-size: 1rem; color: rgb(165 243 252 / 1); line-height: 1.5rem;'>
|
||
也可以类比滑滑梯的角度，把地面比作赤道，卫星轨道是倾斜的滑梯，倾角就是地面和滑梯的夹角。
|
||
</div>
|
||
"
|
||
raw-content
|
||
placement="top"
|
||
>
|
||
<el-icon style="margin-left: 0.5rem;"><QuestionFilled /></el-icon>
|
||
</el-tooltip>
|
||
</div>
|
||
<div class="option">
|
||
<label :style="ascendantRightAscensionCheck ? '' : 'color: red;'">升交点赤经</label>
|
||
<label :style="ascendantRightAscensionCheck ? 'color: #00efff;' : 'color: red;'">（0°~360°）</label>
|
||
<label :style="ascendantRightAscensionCheck ? '' : 'color: red;'">：</label>
|
||
<input
|
||
type="number"
|
||
maxlength="3"
|
||
v-model="ascendantRightAscensionData"
|
||
placeholder="请输入数据（0°~360°）"
|
||
class="dataInput"
|
||
:style="ascendantRightAscensionCheck ? 'border: 2px solid black; color: black;' : 'border: 2px solid red; color: red;'"
|
||
/>
|
||
<el-tooltip
|
||
class="box-item"
|
||
effect="dark"
|
||
content="
|
||
<div style='font-size: 1rem; color: rgb(165 243 252 / 1); line-height: 1.5rem;'>
|
||
轨道在空间中的方向，轨道平面在太空中的旋转角度，轨道在赤道上的起点，共同确定了轨道平面和赤道平面交点的位置，相当于给倾斜的轨道找一个基准起点。
|
||
</div>
|
||
<div style='font-size: 1rem; color: rgb(165 243 252 / 1); line-height: 1.5rem;'>
|
||
升交点赤经就是给卫星轨道在宇宙中 “定方向” 的参数，核心是描述轨道与地球赤道交点的 “东向位置”。
|
||
</div>
|
||
<div style='font-size: 1rem; color: rgb(165 243 252 / 1); line-height: 1.5rem;'>
|
||
升交点：卫星从地球南半球飞到北半球时，会穿过赤道平面，这个穿过的点就是升交点。
|
||
</div>
|
||
<div style='font-size: 1rem; color: rgb(165 243 252 / 1); line-height: 1.5rem;'>
|
||
春分点：太阳从地球的南半球向北半球运动穿过地球赤道平面的那个点，可以理解为太阳的升交点，每年春分（3月21日左右）的时候，太阳经过该点。
|
||
</div>
|
||
<div style='font-size: 1rem; color: rgb(165 243 252 / 1); line-height: 1.5rem;'>
|
||
赤经：与经度定义类似，但其参考点为春分点，且不随地球转自转运动。
|
||
</div>
|
||
<div style='font-size: 1rem; color: rgb(165 243 252 / 1); line-height: 1.5rem;'>
|
||
升交点赤经描述的是一个角度，这个角度就是“春分点到地心连线”与“升交点到地心连线”的夹角，表征了轨道平面相对春分点的方位。结合上一节的轨道倾角，就完全确定了轨道平面在三维空间中的方位。
|
||
</div>
|
||
"
|
||
raw-content
|
||
placement="top"
|
||
>
|
||
<el-icon style="margin-left: 0.5rem;"><QuestionFilled /></el-icon>
|
||
</el-tooltip>
|
||
</div>
|
||
<div class="option">
|
||
<label :style="argumentOfPeriapsisCheck ? '' : 'color: red;'">近地点角距</label>
|
||
<label :style="argumentOfPeriapsisCheck ? 'color: #00efff;' : 'color: red;'">（0°~360°）</label>
|
||
<label :style="argumentOfPeriapsisCheck ? '' : 'color: red;'">：</label>
|
||
<input
|
||
type="number"
|
||
maxlength="3"
|
||
v-model="argumentOfPeriapsisData"
|
||
placeholder="请输入数据（0°~360°）"
|
||
class="dataInput"
|
||
:style="argumentOfPeriapsisCheck ? 'border: 2px solid black; color: black;' : 'border: 2px solid red; color: red;'"
|
||
/>
|
||
<el-tooltip
|
||
class="box-item"
|
||
effect="dark"
|
||
content="
|
||
<div style='font-size: 1rem; color: rgb(165 243 252 / 1); line-height: 1.5rem;'>
|
||
近地点角距（近地点幅角）就是从升交点开始，沿着卫星轨道往飞行方向量，到近地点的角度，核心是给近地点 “定具体位置”。
|
||
</div>
|
||
<div style='font-size: 1rem; color: rgb(165 243 252 / 1); line-height: 1.5rem;'>
|
||
近地点角距（近地点幅角），就是以地球球心为中心，在卫星轨道平面上，从升交点出发，顺着卫星飞行的方向，画一条线到近地点，这条线和 “升交点到地心连线” 之间的夹角（范围 0°-360°）。
|
||
</div>
|
||
<div style='font-size: 1rem; color: rgb(165 243 252 / 1); line-height: 1.5rem;'>
|
||
轨道在平面内的朝向，轨道椭圆在轨道平面内的旋转角度，就像钟表指针指向的方向，确定近地点在轨道上的位置，近地点相对于升交点的位置，近地点角距（近地点幅角）决定了卫星离地球最近时，指向哪个方向。
|
||
</div>
|
||
"
|
||
raw-content
|
||
placement="top"
|
||
>
|
||
<el-icon style="margin-left: 0.5rem;"><QuestionFilled /></el-icon>
|
||
</el-tooltip>
|
||
</div>
|
||
<div class="option">
|
||
<label>卫星近地点颜色：</label>
|
||
<select v-model="nearPointSelectedData" style="cursor: pointer; color: black; margin-right: 1rem;">
|
||
<option v-for="(value, key) in cesiumColor" :key="key" :value="key">
|
||
{{ value }}
|
||
</option>
|
||
</select>
|
||
<label>卫星远地点颜色：</label>
|
||
<select v-model="farPointSelectedData" style="cursor: pointer; color: black;">
|
||
<option v-for="(value, key) in cesiumColor" :key="key" :value="key">
|
||
{{ value }}
|
||
</option>
|
||
</select>
|
||
</div>
|
||
<div class="option">
|
||
<label>卫星轨道颜色：</label>
|
||
<select v-model="orbitSelectedData" style="cursor: pointer; color: black; margin-right: 1rem;">
|
||
<option v-for="(value, key) in cesiumColor" :key="key" :value="key">
|
||
{{ value }}
|
||
</option>
|
||
</select>
|
||
</div>
|
||
<div class="option">
|
||
<input
|
||
type="button"
|
||
class="buttonClass"
|
||
id="fly-btn"
|
||
@click="generateOrbit"
|
||
value="添加轨道"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, watch } from "vue";
|
||
import { CloseBold, QuestionFilled } from "@element-plus/icons-vue";
|
||
|
||
const props = defineProps({
|
||
satelliteArr: Array
|
||
});
|
||
|
||
const emit = defineEmits([
|
||
"selectSatelliteModel",
|
||
"generateOrbit"
|
||
]);
|
||
|
||
// 地球赤道半径 6378137 米
|
||
const equatorRadius = 6378.137;
|
||
|
||
const show = ref(false);
|
||
|
||
const satelliteNameData = ref();
|
||
const nearPointLengthData = ref();
|
||
const farPointLengthData = ref();
|
||
const semiMajorAxisData = ref();
|
||
const eccentricityData = ref();
|
||
const orbitalPeriodData = ref();
|
||
const angularVelocityRadData = ref();
|
||
const angularVelocityDegData = ref();
|
||
const inclinationData = ref();
|
||
const ascendantRightAscensionData = ref();
|
||
const argumentOfPeriapsisData = ref();
|
||
const satelliteNameCheck = ref(true);
|
||
const nearPointLengthCheck = ref(true);
|
||
const farPointLengthCheck = ref(true);
|
||
const semiMajorAxisCheck = ref(true);
|
||
const eccentricityCheck = ref(true);
|
||
const inclinationCheck = ref(true);
|
||
const ascendantRightAscensionCheck = ref(true);
|
||
const argumentOfPeriapsisCheck = ref(true);
|
||
const nearPointSelectedData = ref("ORANGE");
|
||
const farPointSelectedData = ref("PINK");
|
||
const orbitSelectedData = ref("BLUE");
|
||
|
||
const cesiumColor = {
|
||
BLUE: "蓝色",
|
||
PURPLE: "紫色",
|
||
RED: "红色",
|
||
YELLOW: "黄色",
|
||
CYAN: "青色",
|
||
ORANGE: "橙色",
|
||
PINK: "粉色",
|
||
GREEN: "绿色",
|
||
WHITE: "白色",
|
||
LIGHTBLUE: "浅蓝色",
|
||
LIME: "青柠色",
|
||
MAGENTA: "品红色",
|
||
};
|
||
|
||
const data = {
|
||
satelliteNameData,
|
||
nearPointLengthData,
|
||
farPointLengthData,
|
||
semiMajorAxisData,
|
||
eccentricityData,
|
||
orbitalPeriodData,
|
||
angularVelocityRadData,
|
||
angularVelocityDegData,
|
||
inclinationData,
|
||
ascendantRightAscensionData,
|
||
argumentOfPeriapsisData,
|
||
nearPointSelectedData,
|
||
farPointSelectedData,
|
||
orbitSelectedData,
|
||
};
|
||
|
||
const resetData = () => {
|
||
satelliteNameData.value = "";
|
||
nearPointLengthData.value = "";
|
||
farPointLengthData.value = "";
|
||
semiMajorAxisData.value = "";
|
||
eccentricityData.value = "";
|
||
orbitalPeriodData.value = "";
|
||
angularVelocityRadData.value = "";
|
||
angularVelocityDegData.value = "";
|
||
inclinationData.value = "";
|
||
ascendantRightAscensionData.value = "";
|
||
argumentOfPeriapsisData.value = "";
|
||
satelliteNameCheck.value = true;
|
||
nearPointLengthCheck.value = true;
|
||
farPointLengthCheck.value = true;
|
||
semiMajorAxisCheck.value = true;
|
||
eccentricityCheck.value = true;
|
||
inclinationCheck.value = true;
|
||
ascendantRightAscensionCheck.value = true;
|
||
argumentOfPeriapsisCheck.value = true;
|
||
nearPointSelectedData.value = "ORANGE";
|
||
farPointSelectedData.value = "PINK";
|
||
orbitSelectedData.value = "BLUE";
|
||
};
|
||
|
||
const showit = () => {
|
||
show.value = true;
|
||
};
|
||
|
||
const close = () => {
|
||
show.value = false;
|
||
setTimeout(() => {
|
||
resetData();
|
||
}, 0);
|
||
};
|
||
|
||
const generateOrbitData = () => {
|
||
if (nearPointLengthData.value != "" && nearPointLengthData.value != undefined && farPointLengthData.value != "" && farPointLengthData.value != undefined) {
|
||
semiMajorAxisData.value = (nearPointLengthData.value + equatorRadius + (farPointLengthData.value + equatorRadius)) / 2;
|
||
eccentricityData.value = (semiMajorAxisData.value - (nearPointLengthData.value + equatorRadius)) / semiMajorAxisData.value;
|
||
orbitalPeriodData.value = ((semiMajorAxisData.value * 1000) / 21613.546) ** 1.5;
|
||
angularVelocityRadData.value = (2 * Math.PI) / orbitalPeriodData.value;
|
||
angularVelocityDegData.value = angularVelocityRadData.value * (180 / Math.PI);
|
||
|
||
if (semiMajorAxisData.value === '' || semiMajorAxisData.value === undefined || semiMajorAxisData.value < 200 || semiMajorAxisData.value > 120000) {
|
||
semiMajorAxisCheck.value = false;
|
||
} else {
|
||
semiMajorAxisCheck.value = true;
|
||
}
|
||
|
||
if (eccentricityData.value === '' || eccentricityData.value === undefined || eccentricityData.value < 0 || eccentricityData.value > 0.9) {
|
||
eccentricityCheck.value = false;
|
||
} else {
|
||
eccentricityCheck.value = true;
|
||
}
|
||
}
|
||
};
|
||
|
||
watch(nearPointLengthData, (value) => {
|
||
generateOrbitData();
|
||
});
|
||
|
||
watch(farPointLengthData, (value) => {
|
||
generateOrbitData();
|
||
});
|
||
|
||
const booleanCheck = (checkArr) => {
|
||
let check = true;
|
||
checkArr.forEach(item => {
|
||
if (item == false) {
|
||
check = false;
|
||
}
|
||
});
|
||
return check;
|
||
};
|
||
|
||
const satelliteNameDataCheck = () => {
|
||
if (satelliteNameData.value === '' || satelliteNameData.value === undefined) {
|
||
satelliteNameCheck.value = false;
|
||
} else {
|
||
satelliteNameCheck.value = true;
|
||
}
|
||
props.satelliteArr.forEach((entity, index) => {
|
||
for (const element in entity) {
|
||
if (entity[element].name !== undefined) {
|
||
let name = entity[element].name;
|
||
if (satelliteNameData.value == name) {
|
||
satelliteNameCheck.value = false;
|
||
}
|
||
}
|
||
}
|
||
});
|
||
};
|
||
|
||
const nearPointLengthDataCheck = () => {
|
||
if (nearPointLengthData.value === "" || nearPointLengthData.value === undefined || nearPointLengthData.value < 200 || nearPointLengthData.value > 120000) {
|
||
nearPointLengthCheck.value = false;
|
||
} else {
|
||
nearPointLengthCheck.value = true;
|
||
}
|
||
if (nearPointLengthCheck.value == 1 && farPointLengthData.value !== "" && farPointLengthData.value !== undefined && nearPointLengthData.value > farPointLengthData.value) {
|
||
nearPointLengthCheck.value = false;
|
||
farPointLengthCheck.value = false;
|
||
} else {
|
||
farPointLengthCheck.value = true;
|
||
}
|
||
};
|
||
|
||
const farPointLengthDataCheck = () => {
|
||
if (farPointLengthData.value === "" || farPointLengthData.value === undefined || farPointLengthData.value < 200 || farPointLengthData.value > 120000) {
|
||
farPointLengthCheck.value = false;
|
||
} else {
|
||
farPointLengthCheck.value = true;
|
||
}
|
||
if (farPointLengthCheck.value == 1 && nearPointLengthData.value !== "" && nearPointLengthData.value !== undefined && nearPointLengthData.value > farPointLengthData.value) {
|
||
nearPointLengthCheck.value = false;
|
||
farPointLengthCheck.value = false;
|
||
} else {
|
||
nearPointLengthCheck.value = true;
|
||
}
|
||
};
|
||
|
||
const semiMajorAxisDataCheck = () => {
|
||
if (semiMajorAxisData.value === '' || semiMajorAxisData.value === undefined || semiMajorAxisData.value < 200 || semiMajorAxisData.value > 120000) {
|
||
semiMajorAxisCheck.value = false;
|
||
} else {
|
||
semiMajorAxisCheck.value = true;
|
||
}
|
||
};
|
||
|
||
const eccentricityDataCheck = () => {
|
||
if (eccentricityData.value === '' || eccentricityData.value === undefined || eccentricityData.value < 0 || eccentricityData.value > 0.9) {
|
||
eccentricityCheck.value = false;
|
||
} else {
|
||
eccentricityCheck.value = true;
|
||
}
|
||
};
|
||
|
||
const inclinationDataCheck = () => {
|
||
if (inclinationData.value === '' || inclinationData.value === undefined || inclinationData.value < 0 || inclinationData.value > 180) {
|
||
inclinationCheck.value = false;
|
||
} else {
|
||
inclinationCheck.value = true;
|
||
}
|
||
};
|
||
|
||
const ascendantRightAscensionDataCheck = () => {
|
||
if (ascendantRightAscensionData.value === '' || ascendantRightAscensionData.value === undefined || ascendantRightAscensionData.value < 0 || ascendantRightAscensionData.value > 360) {
|
||
ascendantRightAscensionCheck.value = false;
|
||
} else {
|
||
ascendantRightAscensionCheck.value = true;
|
||
}
|
||
};
|
||
|
||
const argumentOfPeriapsisDataCheck = () => {
|
||
if (argumentOfPeriapsisData.value === '' || argumentOfPeriapsisData.value === undefined || argumentOfPeriapsisData.value < 0 || argumentOfPeriapsisData.value > 360) {
|
||
argumentOfPeriapsisCheck.value = false;
|
||
} else {
|
||
argumentOfPeriapsisCheck.value = true;
|
||
}
|
||
};
|
||
|
||
watch(satelliteNameData, (value) => {
|
||
satelliteNameDataCheck();
|
||
});
|
||
|
||
watch(nearPointLengthData, (value) => {
|
||
nearPointLengthDataCheck();
|
||
});
|
||
|
||
watch(farPointLengthData, (value) => {
|
||
farPointLengthDataCheck();
|
||
});
|
||
|
||
watch(semiMajorAxisData, (value) => {
|
||
semiMajorAxisDataCheck();
|
||
});
|
||
|
||
watch(eccentricityData, (value) => {
|
||
eccentricityDataCheck();
|
||
});
|
||
|
||
watch(inclinationData, (value) => {
|
||
inclinationDataCheck();
|
||
});
|
||
|
||
watch(ascendantRightAscensionData, (value) => {
|
||
ascendantRightAscensionDataCheck();
|
||
});
|
||
|
||
watch(argumentOfPeriapsisData, (value) => {
|
||
argumentOfPeriapsisDataCheck();
|
||
});
|
||
|
||
|
||
const generateCheck = () => {
|
||
let checkArr = [];
|
||
|
||
satelliteNameDataCheck();
|
||
checkArr.push(satelliteNameCheck.value);
|
||
|
||
nearPointLengthDataCheck();
|
||
farPointLengthDataCheck();
|
||
checkArr.push(nearPointLengthCheck.value);
|
||
checkArr.push(farPointLengthCheck.value);
|
||
|
||
if (nearPointLengthData.value != "" && nearPointLengthData.value != undefined && farPointLengthData.value != "" && farPointLengthData.value != undefined) {
|
||
semiMajorAxisData.value = ((nearPointLengthData.value + equatorRadius) + (farPointLengthData.value + equatorRadius)) / 2;
|
||
eccentricityData.value = (semiMajorAxisData.value - (nearPointLengthData.value + equatorRadius)) / semiMajorAxisData.value;
|
||
orbitalPeriodData.value = ((semiMajorAxisData.value * 1000) / 21613.546) ** 1.5;
|
||
angularVelocityRadData.value = (2 * Math.PI) / orbitalPeriodData.value;
|
||
angularVelocityDegData.value = angularVelocityRadData.value * (180 / Math.PI);
|
||
}
|
||
|
||
semiMajorAxisDataCheck();
|
||
checkArr.push(semiMajorAxisCheck.value);
|
||
|
||
eccentricityDataCheck();
|
||
checkArr.push(eccentricityCheck.value);
|
||
|
||
inclinationDataCheck();
|
||
checkArr.push(inclinationCheck.value);
|
||
|
||
ascendantRightAscensionDataCheck();
|
||
checkArr.push(ascendantRightAscensionCheck.value);
|
||
|
||
argumentOfPeriapsisDataCheck();
|
||
checkArr.push(argumentOfPeriapsisCheck.value);
|
||
|
||
return booleanCheck(checkArr);
|
||
};
|
||
|
||
const generateOrbit = () => {
|
||
if (generateCheck()) {
|
||
emit("generateOrbit", "technology");
|
||
show.value = false;
|
||
setTimeout(() => {
|
||
resetData();
|
||
}, 0);
|
||
}
|
||
};
|
||
|
||
defineExpose({ data });
|
||
</script>
|
||
|
||
<style scoped>
|
||
.satelliteCreate {
|
||
font-size: 1rem;
|
||
color: #ffffff;
|
||
background-color: rgb(255 255 255 / 0.5);
|
||
width: 6rem;
|
||
height: 2rem;
|
||
line-height: 2rem;
|
||
overflow: hidden;
|
||
box-shadow: 0 0px 1rem 0px rgb(165 243 252 / 0.5);
|
||
position: fixed;
|
||
bottom: 14.5rem;
|
||
right: 1rem;
|
||
border-radius: 1rem;
|
||
}
|
||
|
||
.satelliteCreate:hover {
|
||
color: #000000;
|
||
box-shadow: 0 0px 1rem 0px rgb(165 243 252 / 1);
|
||
background-color: rgb(250, 230, 164);
|
||
}
|
||
|
||
.option {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.dataInput {
|
||
padding-left: 0.5rem;
|
||
padding-right: 0.5rem;
|
||
height: 2rem;
|
||
background: #ffffff;
|
||
border-radius: 1rem;
|
||
}
|
||
|
||
.buttonClass {
|
||
padding-left: 0.5rem;
|
||
padding-right: 0.5rem;
|
||
font-size: 1rem;
|
||
width: 8rem;
|
||
height: 2rem;
|
||
line-height: 2rem;
|
||
color: #000000;
|
||
background-color: rgb(165 243 252 / 1);
|
||
overflow: hidden;
|
||
cursor: pointer;
|
||
box-shadow: 0 0px 1rem 0px rgb(165 243 252 / 1);
|
||
border-radius: 2rem;
|
||
}
|
||
</style>
|