|
|
|
|
@ -1,53 +1,102 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div class="panel-box panel-left">
|
|
|
|
|
<view-title height="50%" title="无人机信息">
|
|
|
|
|
<!-- <model-collada
|
|
|
|
|
@load="onLoad"
|
|
|
|
|
src="src/assets/images/uav-model.dae"
|
|
|
|
|
:rotation="rotation"
|
|
|
|
|
:position="position"
|
|
|
|
|
:height="100"
|
|
|
|
|
:lights="lights"
|
|
|
|
|
:backgroundAlpha="0"
|
|
|
|
|
:controls-options="{
|
|
|
|
|
enableRotate: true, // 是否可旋转
|
|
|
|
|
enableZoom: false, // 是否可缩放
|
|
|
|
|
enablePan: false // 是否可移动（鼠标右键可以移动模型）
|
|
|
|
|
}"
|
|
|
|
|
/> -->
|
|
|
|
|
<div class="uav-data">
|
|
|
|
|
<div class="uav-name">云航低空研训基地
|
|
|
|
|
<div class="uav-state">待命</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="uav-model">
|
|
|
|
|
<div class="uav-model3d">
|
|
|
|
|
<model-collada
|
|
|
|
|
@load="onLoad"
|
|
|
|
|
src="src/assets/images/uav-model.dae"
|
|
|
|
|
:rotation="rotation"
|
|
|
|
|
:position="position"
|
|
|
|
|
:height="100"
|
|
|
|
|
:lights="lights"
|
|
|
|
|
:backgroundAlpha="0"
|
|
|
|
|
:controls-options="{
|
|
|
|
|
enableRotate: true, // 是否可旋转
|
|
|
|
|
enableZoom: false, // 是否可缩放
|
|
|
|
|
enablePan: false, // 是否可移动（鼠标右键可以移动模型）
|
|
|
|
|
}"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="model-bg"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="model-btn">
|
|
|
|
|
<div class="active-btn">接管控制</div>
|
|
|
|
|
<div>开始共享</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="uav-value">
|
|
|
|
|
<div class="value-item">
|
|
|
|
|
<div class="value-image">
|
|
|
|
|
<img src="/src/assets/images/uav-value-icon1.png" alt="">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="value-data">
|
|
|
|
|
<div class="data-name">站点编号</div>
|
|
|
|
|
<div class="data-number">SKDIFISIA</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="value-item">
|
|
|
|
|
<div class="value-image">
|
|
|
|
|
<img src="/src/assets/images/uav-value-icon2.png" alt="">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="value-data">
|
|
|
|
|
<div class="data-name">无人机编号</div>
|
|
|
|
|
<div class="data-number">SJDJFKWKA</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="value-item">
|
|
|
|
|
<div class="value-image">
|
|
|
|
|
<img src="/src/assets/images/uav-value-icon3.png" alt="">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="value-data">
|
|
|
|
|
<div class="data-name">型号</div>
|
|
|
|
|
<div class="data-number">SKDIFISIA</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="value-item">
|
|
|
|
|
<div class="value-image">
|
|
|
|
|
<img src="/src/assets/images/uav-value-icon4.png" alt="">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="value-data">
|
|
|
|
|
<div class="data-name">无人机状态</div>
|
|
|
|
|
<div class="data-number" style="color: #13E052;">在线</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</view-title>
|
|
|
|
|
<view-title height="50%" title="无人机实时状态">
|
|
|
|
|
<!-- 内容区 -->
|
|
|
|
|
<div class="contain-grid">
|
|
|
|
|
<div v-for="item in gridItems" :key="item.id" class="grid-item">
|
|
|
|
|
<div class="grid-item-content">{{ item.content }}</div>
|
|
|
|
|
<div class="grid-item-footer">{{ item.footer }} <span class="unit-name">{{ item.unit }}</span></div>
|
|
|
|
|
<div class="grid-item-footer">
|
|
|
|
|
{{ item.footer }} <span class="unit-name">{{ item.unit }}</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</view-title>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script setup>
|
|
|
|
|
import { ViewTitle } from "@/views/components/map";
|
|
|
|
|
import { ModelCollada } from "vue-3d-model";
|
|
|
|
|
// import { ModelCollada } from 'vue-3d-model';
|
|
|
|
|
|
|
|
|
|
// 定义数据
|
|
|
|
|
const gridItems = [
|
|
|
|
|
{ id: 1, content: '-20', footer: '经度',unit:'(°)' },
|
|
|
|
|
{ id: 2, content: '20', footer: '纬度' ,unit:'(°)'},
|
|
|
|
|
{ id: 3, content: '20', footer: '高度' ,unit:'(m)'},
|
|
|
|
|
{ id: 4, content: '20', footer: '偏航角' ,unit:'(°)'},
|
|
|
|
|
{ id: 5, content: '20', footer: '俯仰角',unit:'(°)' },
|
|
|
|
|
{ id: 6, content: '20', footer: '滚转角',unit:'(°)' },
|
|
|
|
|
{ id: 7, content: '20', footer: '速度',unit:'km/h' },
|
|
|
|
|
{ id: 8, content: '20', footer: '电池电量',unit:''},
|
|
|
|
|
|
|
|
|
|
]
|
|
|
|
|
|
|
|
|
|
{ id: 1, content: "-20", footer: "经度", unit: "(°)" },
|
|
|
|
|
{ id: 2, content: "20", footer: "纬度", unit: "(°)" },
|
|
|
|
|
{ id: 3, content: "20", footer: "高度", unit: "(m)" },
|
|
|
|
|
{ id: 4, content: "20", footer: "偏航角", unit: "(°)" },
|
|
|
|
|
{ id: 5, content: "20", footer: "俯仰角", unit: "(°)" },
|
|
|
|
|
{ id: 6, content: "20", footer: "滚转角", unit: "(°)" },
|
|
|
|
|
{ id: 7, content: "20", footer: "速度", unit: "km/h" },
|
|
|
|
|
{ id: 8, content: "20", footer: "电池电量", unit: "" },
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
const onLoad = () => {
|
|
|
|
|
rotate();
|
|
|
|
|
@ -71,25 +120,126 @@ const position = {
|
|
|
|
|
const lights = [
|
|
|
|
|
{
|
|
|
|
|
type: "HemisphereLight",
|
|
|
|
|
position: { x: 0, y: 15, z: 50},
|
|
|
|
|
position: { x: 0, y: 15, z: 50 },
|
|
|
|
|
skyColor: 0xffd700,
|
|
|
|
|
groundColor: 0xffd700,
|
|
|
|
|
intensity: 0.2,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
type: "DirectionalLight",
|
|
|
|
|
position: { x: 0.2, y: 20, z: 1},
|
|
|
|
|
position: { x: 0.2, y: 20, z: 1 },
|
|
|
|
|
color: 0xffffff,
|
|
|
|
|
intensity: 0.8,
|
|
|
|
|
},
|
|
|
|
|
];
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped >
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
.panel-left {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
}
|
|
|
|
|
.uav-data {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
.uav-name {
|
|
|
|
|
position: relative;
|
|
|
|
|
text-align: center;
|
|
|
|
|
width: 195px;
|
|
|
|
|
padding: 8px 0;
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
background: url("../../../assets/images/introduce-cell-bg.png");
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
.uav-state{
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 50%;
|
|
|
|
|
transform: translateY(-50%);
|
|
|
|
|
right: -28px;
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
color: #43FFAD;
|
|
|
|
|
width: 45px;
|
|
|
|
|
height: 19px;
|
|
|
|
|
line-height: 19px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
background: url("../../../assets/images/uav-state-bg.png");
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.uav-model {
|
|
|
|
|
position: relative;
|
|
|
|
|
margin-top: 50px;
|
|
|
|
|
width: 243px;
|
|
|
|
|
height: 92px;
|
|
|
|
|
|
|
|
|
|
background: url("../../../assets/images/uav-model-bg.png");
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
.uav-model3d {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: -75px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.model-btn {
|
|
|
|
|
margin-top: 10px;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
gap: 15px;
|
|
|
|
|
& > div {
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
height: 30px;
|
|
|
|
|
width: 115px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
line-height: 30px;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
background: url("../../../assets/images/dafault-uav.png");
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
color: #86e0ff;
|
|
|
|
|
}
|
|
|
|
|
.active-btn {
|
|
|
|
|
background: url("../../../assets/images/active-uav.png");
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
color: #f6f3f4;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.uav-value {
|
|
|
|
|
margin-top: 20px;
|
|
|
|
|
|
|
|
|
|
display: grid;
|
|
|
|
|
grid-template-columns: repeat(2, 1fr);
|
|
|
|
|
gap: 10px;
|
|
|
|
|
.value-item {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
height: 65px;
|
|
|
|
|
gap: 6px;
|
|
|
|
|
.value-image {
|
|
|
|
|
position: relative;
|
|
|
|
|
width: 57px;
|
|
|
|
|
height: 35px;
|
|
|
|
|
background: url("../../../assets/images/uav-value-bg.png");
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
img{
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: -10px;
|
|
|
|
|
left: 50%;
|
|
|
|
|
transform: translateX(-50%);
|
|
|
|
|
width: 25px;
|
|
|
|
|
height: 21px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.data-name {
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
color: #d2f3ff;
|
|
|
|
|
}
|
|
|
|
|
.data-number {
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.contain-grid {
|
|
|
|
|
height: 100%;
|
|
|
|
|
@ -104,36 +254,37 @@ const lights = [
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
background: url('../../../assets/images/state-bg.png');
|
|
|
|
|
background: url("../../../assets/images/state-bg.png");
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
.grid-item-content{
|
|
|
|
|
font-size: 30px;
|
|
|
|
|
color: #fff;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
.grid-item-content {
|
|
|
|
|
font-size: 30px;
|
|
|
|
|
color: #fff;
|
|
|
|
|
font-family: "DINCondensed-Bold";
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
}
|
|
|
|
|
.grid-item-footer{
|
|
|
|
|
.grid-item-footer {
|
|
|
|
|
font-size: 15px;
|
|
|
|
|
color: #FFFFFF;
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
}
|
|
|
|
|
.unit-name{
|
|
|
|
|
.unit-name {
|
|
|
|
|
font-size: 13px;
|
|
|
|
|
color: #A2CBEA;
|
|
|
|
|
color: #a2cbea;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.contain-foot{
|
|
|
|
|
padding: .3rem 1rem;
|
|
|
|
|
.contain-foot {
|
|
|
|
|
padding: 0.3rem 1rem;
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 79%;
|
|
|
|
|
margin-left: -4.4%;
|
|
|
|
|
background-color: #05192A;
|
|
|
|
|
background-color: #05192a;
|
|
|
|
|
bottom: 2.4%;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
}
|
|
|
|
|
.itemone{
|
|
|
|
|
.itemone {
|
|
|
|
|
display: flex;
|
|
|
|
|
}
|
|
|
|
|
.itemone span:first-child{
|
|
|
|
|
color:#BCDEFC
|
|
|
|
|
.itemone span:first-child {
|
|
|
|
|
color: #bcdefc;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
