suzhou-jichuang-lanhai
/
uav-flight-control
10
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

左侧

Browse Source
yfy
严飞永 2 weeks ago
parent 2ed94a81f7
commit 28ee53b490
2 changed files with 174 additions and 13 deletions
Show Stats Download Patch File Download Diff File

94
src/views/components/map/panelLeft copy.vue
Unescape View File

@ -0,0 +1,94 @@
<template>
<div class="panel-box panel-left">
<view-title height="50%" title="无人机信息">
<!-- <model-collada
:backgroundAlpha="0"
:rotation="{
x: - Math.PI / 2,
y: 0,
z: 0,
}"
src="../../../assets/images/uav-model.dae"
/> -->
</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 }}</div>
</div>
</div>
</view-title>
<!-- 底部 -->
<div class="contain-foot">
<div class="itemone">
<div><span>经度:</span>: <span>31</span></div>
</div>
<div class="itemone">
<div><span>纬度:</span> <span>31</span></div>
</div>
<div class="itemtwo">
<div><span>经度</span>: <span>31</span></div>
</div>
</div>
</div>
</template>
<script setup>
import { ViewTitle } from "@/views/components/map";
// import { ModelCollada } from 'vue-3d-model';
// 定义数据
const gridItems = [
{ id: 1, content: '-20', footer: '经度(°)' },
{ id: 2, content: '20', footer: '纬度(°)' },
{ id: 3, content: '20', footer: '高度(m)' },
{ id: 4, content: '20', footer: '偏航角(°)' },
{ id: 5, content: '20', footer: '水平速度(°)' },
{ id: 6, content: '20', footer: '垂直速度(m/s)' },
{ id: 7, content: '20', footer: '电量(%)' },
{ id: 8, content: '20', footer: '电池温度(°c)' },
];
</script>
<style scoped>
.panel-left {
display: flex;
flex-direction: column;
}
.contain-grid {
height: 100%;
overflow: auto;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.grid-item {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
/* background-color: #fff; */
border:1px solid #ccc;
}
.contain-foot{
padding: .3rem 1rem;
position: absolute;
width: 79%;
margin-left: -4.4%;
background-color: #05192A;
bottom: 2.4%;
display: flex;
justify-content: space-between;
}
.itemone{
display: flex;
}
.itemone span:first-child{
color:#BCDEFC
}
</style>

91
src/views/components/map/panelLeft.vue
Unescape View File

@ -2,26 +2,93 @@
<div class="panel-box panel-left">
<view-title height="50%" title="无人机信息">
<!-- <model-collada
:backgroundAlpha="0"
:rotation="{
x: - Math.PI / 2,
y: 0,
z: 0,
}"
src="../../../assets/images/uav-model.dae"
/> -->
:backgroundAlpha="0"
:rotation="{
x: - Math.PI / 2,
y: 0,
z: 0,
}"
src="../../../assets/images/uav-model.dae"
/> -->
</view-title>
<view-title height="50%" title="无人机实时状态"></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 }}</div>
</div>
</div>
</view-title>
<!-- 底部 -->
<div class="contain-foot">
<div class="itemone">
<div><span>经度:</span>: <span>31</span></div>
</div>
<div class="itemone">
<div><span>纬度:</span> <span>31</span></div>
</div>
<div class="itemtwo">
<div><span>经度</span>: <span>31</span></div>
</div>
</div>
</div>
</template>
<script setup>
import {ViewTitle} from "@/views/components/map"
import { ViewTitle } from "@/views/components/map";
// import { ModelCollada } from 'vue-3d-model';
// 定义数据
const gridItems = [
{ id: 1, content: '-20', footer: '经度(°)' },
{ id: 2, content: '20', footer: '纬度(°)' },
{ id: 3, content: '20', footer: '高度(m)' },
{ id: 4, content: '20', footer: '偏航角(°)' },
{ id: 5, content: '20', footer: '水平速度(°)' },
{ id: 6, content: '20', footer: '垂直速度(m/s)' },
{ id: 7, content: '20', footer: '电量(%)' },
{ id: 8, content: '20', footer: '电池温度(°c)' },
];
</script>
<style scoped>
.panel-left{
<style scoped>
.panel-left {
display: flex;
flex-direction: column;
}
.contain-grid {
height: 100%;
overflow: auto;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.grid-item {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
/* background-color: #fff; */
border:1px solid #ccc;
}
.contain-foot{
padding: .3rem 1rem;
position: absolute;
width: 79%;
margin-left: -4.4%;
background-color: #05192A;
bottom: 2.4%;
display: flex;
justify-content: space-between;
}
.itemone{
display: flex;
}
.itemone span:first-child{
color:#BCDEFC
}
</style>
Write Preview
Loading…
Cancel
Save