From 28ee53b490cbc0ed16ae55159a6c085057db65bc Mon Sep 17 00:00:00 2001 From: yanfeiyong <2060201549@qq.com> Date: Mon, 7 Apr 2025 16:14:50 +0800 Subject: [PATCH] =?UTF-8?q?=E5=B7=A6=E4=BE=A7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/components/map/panelLeft copy.vue | 94 +++++++++++++++++++++ src/views/components/map/panelLeft.vue | 93 +++++++++++++++++--- 2 files changed, 174 insertions(+), 13 deletions(-) create mode 100644 src/views/components/map/panelLeft copy.vue diff --git a/src/views/components/map/panelLeft copy.vue b/src/views/components/map/panelLeft copy.vue new file mode 100644 index 0000000..fc5fb54 --- /dev/null +++ b/src/views/components/map/panelLeft copy.vue @@ -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> \ No newline at end of file diff --git a/src/views/components/map/panelLeft.vue b/src/views/components/map/panelLeft.vue index 398acdb..fc5fb54 100644 --- a/src/views/components/map/panelLeft.vue +++ b/src/views/components/map/panelLeft.vue @@ -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> \ No newline at end of file