liuqing13100
/
tuoheng_virtualAirPlan_web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

阶段性代码提交

This commit is contained in:
WORK\64751 2025-09-02 13:05:38 +08:00
parent 5289fff280
commit 4a42f2afec
18 changed files with 511 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
index.html
View File

@ -3,7 +3,10 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta
name="viewport"
content="width=device-width, initial-scale=1.0 maximum-scale=1.0, user-scalable=no"
/>
<script src="js/liveplayer-lib.min.js"></script> <script src="js/liveplayer-lib.min.js"></script>
<!-- 如果正在使用 vue-cli: <!-- 如果正在使用 vue-cli:
<script src="<%= BASE_URL %>js/liveplayer-lib.min.js"></script> <script src="<%= BASE_URL %>js/liveplayer-lib.min.js"></script>

13
src/apis/common.js
View File

@ -60,15 +60,17 @@ export async function getAirWayPointsToJson(url) {
arr = arr.map((text) => { arr = arr.map((text) => {
return text.split(/\s+/) return text.split(/\s+/)
}) })
// 删除前两个起飞点 // 删除前两个起飞点（不使用）
arr.splice(0, 2) // arr.splice(0, 2)
// 删除最后一个降落点 // 删除第一个起飞点
arr.pop() arr.splice(0, 1)
// 删除最后一个降落点(不删除)
// arr.pop()
// 航线节点 // 航线节点
for (let i = 0; i < arr.length; i++) { for (let i = 0; i < arr.length; i++) {
const stop = arr[i] const stop = arr[i]
if (parseInt(stop[3]) === 16) { if (true) {
// 地图点，用于绘制 // 地图点，用于绘制
mapPointList.push({ mapPointList.push({
// id // id
@ -76,6 +78,7 @@ export async function getAirWayPointsToJson(url) {
// 经纬度 // 经纬度
lngLat: [parseFloat(stop[9]), parseFloat(stop[8])], lngLat: [parseFloat(stop[9]), parseFloat(stop[8])],
alt: parseInt(stop[10]), // 高度 alt: parseInt(stop[10]), // 高度
type: Number(stop[3]), //航点类型，gis需要
}) })
} }
} }

75
src/assets/iconfont/demo_index.html
View File

@ -54,6 +54,24 @@
<div class="content unicode" style="display: block;"> <div class="content unicode" style="display: block;">
<ul class="icon_lists dib-box"> <ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont">&#xe69e;</span>
<div class="name">对号2</div>
<div class="code-name">&amp;#xe69e;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe642;</span>
<div class="name">差号</div>
<div class="code-name">&amp;#xe642;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe619;</span>
<div class="name">报错</div>
<div class="code-name">&amp;#xe619;</div>
</li>
<li class="dib"> <li class="dib">
<span class="icon iconfont">&#xeb21;</span> <span class="icon iconfont">&#xeb21;</span>
<div class="name">返航</div> <div class="name">返航</div>
@ -240,9 +258,9 @@
<pre><code class="language-css" <pre><code class="language-css"
>@font-face { >@font-face {
font-family: 'iconfont'; font-family: 'iconfont';
src: url('iconfont.woff2?t=1752124461773') format('woff2'), src: url('iconfont.woff2?t=1756778130469') format('woff2'),
url('iconfont.woff?t=1752124461773') format('woff'), url('iconfont.woff?t=1756778130469') format('woff'),
url('iconfont.ttf?t=1752124461773') format('truetype'); url('iconfont.ttf?t=1756778130469') format('truetype');
} }
</code></pre> </code></pre>
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3> <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@ -268,6 +286,33 @@
<div class="content font-class"> <div class="content font-class">
<ul class="icon_lists dib-box"> <ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont icon-duihao2"></span>
<div class="name">
对号2
</div>
<div class="code-name">.icon-duihao2
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-chahao"></span>
<div class="name">
差号
</div>
<div class="code-name">.icon-chahao
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-baocuo"></span>
<div class="name">
报错
</div>
<div class="code-name">.icon-baocuo
</div>
</li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-fanhang"></span> <span class="icon iconfont icon-fanhang"></span>
<div class="name"> <div class="name">
@ -547,6 +592,30 @@
<div class="content symbol"> <div class="content symbol">
<ul class="icon_lists dib-box"> <ul class="icon_lists dib-box">
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-duihao2"></use>
</svg>
<div class="name">对号2</div>
<div class="code-name">#icon-duihao2</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-chahao"></use>
</svg>
<div class="name">差号</div>
<div class="code-name">#icon-chahao</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-baocuo"></use>
</svg>
<div class="name">报错</div>
<div class="code-name">#icon-baocuo</div>
</li>
<li class="dib"> <li class="dib">
<svg class="icon svg-icon" aria-hidden="true"> <svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-fanhang"></use> <use xlink:href="#icon-fanhang"></use>

18
src/assets/iconfont/iconfont.css
View File

@ -1,8 +1,8 @@
@font-face { @font-face {
font-family: "iconfont"; /* Project id 4970295 */ font-family: "iconfont"; /* Project id 4970295 */
src: url('iconfont.woff2?t=1752124461773') format('woff2'), src: url('iconfont.woff2?t=1756778130469') format('woff2'),
url('iconfont.woff?t=1752124461773') format('woff'), url('iconfont.woff?t=1756778130469') format('woff'),
url('iconfont.ttf?t=1752124461773') format('truetype'); url('iconfont.ttf?t=1756778130469') format('truetype');
} }
.iconfont { .iconfont {
@ -13,6 +13,18 @@
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
.icon-duihao2:before {
content: "\e69e";
}
.icon-chahao:before {
content: "\e642";
}
.icon-baocuo:before {
content: "\e619";
}
.icon-fanhang:before { .icon-fanhang:before {
content: "\eb21"; content: "\eb21";
} }

2
src/assets/iconfont/iconfont.js
View File

File diff suppressed because one or more lines are too long

21
src/assets/iconfont/iconfont.json
View File

@ -5,6 +5,27 @@
"css_prefix_text": "icon-", "css_prefix_text": "icon-",
"description": "", "description": "",
"glyphs": [ "glyphs": [
{
"icon_id": "1239935",
"name": "对号2",
"font_class": "duihao2",
"unicode": "e69e",
"unicode_decimal": 59038
},
{
"icon_id": "9274928",
"name": "差号",
"font_class": "chahao",
"unicode": "e642",
"unicode_decimal": 58946
},
{
"icon_id": "17408084",
"name": "报错",
"font_class": "baocuo",
"unicode": "e619",
"unicode_decimal": 58905
},
{ {
"icon_id": "38050835", "icon_id": "38050835",
"name": "返航", "name": "返航",

BIN
src/assets/iconfont/iconfont.ttf
View File

Binary file not shown.

BIN
src/assets/iconfont/iconfont.woff
View File

Binary file not shown.

BIN
src/assets/iconfont/iconfont.woff2
View File

Binary file not shown.

BIN
src/assets/icons/leftplane.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.2 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
src/assets/icons/middleplane.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
src/assets/icons/rightplane.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.4 KiB

After

Width:  |  Height:  |  Size: 1.6 KiB

42
src/assets/style/main.less
View File

@ -82,3 +82,45 @@ div::-webkit-scrollbar-track {
border-radius: 0; border-radius: 0;
background: rgba(0, 0, 0, 0.1); background: rgba(0, 0, 0, 0.1);
} }
@layer components {
.zoom07 {
zoom: 0.7;
}
.zoom08 {
zoom: 0.8;
}
.zoom09 {
zoom: 0.9;
}
.zoom1 {
zoom: 1;
}
.zoom12 {
zoom: 1.2;
}
.zoom13 {
zoom: 1.3;
}
.zoom14 {
zoom: 1.4;
}
.zoom15 {
zoom: 1.5;
}
.zoom16 {
zoom: 1.6;
}
.zoom17 {
zoom: 1.7;
}
.zoom18 {
zoom: 1.8;
}
.zoom19 {
zoom: 1.9;
}
.zoom20 {
zoom: 2;
}
}

209
src/views/carbin/components/beforeCheck.vue
View File

@ -19,12 +19,14 @@ const props = defineProps({
}) })
let isChecked = ref(false) let isChecked = ref(false)
let checkTime = null let checkTime = null
let isFirstQuery = false //是否是第一次请求
let checkTimeNum = ref(0) //花费的检测时间 let checkTimeNum = ref(0) //花费的检测时间
let checkTimeNum_timeout = null let checkTimeNum_timeout = null
let processInfoList = ref([]) //进度列表 let processInfoList = ref([]) //进度列表
let processTitle = ref('') let processTitle = ref('')
let processStatus = ref(null) let processStatus = ref(null)
let precent = ref(0) let precent = ref(0)
let progressStatus = ref('')
const indicator = h(LoadingOutlined, { const indicator = h(LoadingOutlined, {
style: { style: {
@ -43,19 +45,118 @@ const startTimeFn = () => {
//自检请求 //自检请求
const checkFn = async (row) => { const checkFn = async (row) => {
if (row) { if (row) {
// console.log(row)
// console.log(row.id)
let params = { let params = {
airportId: row.id, airportId: row.id,
taskId: row.task[0].taskId, taskId: row.task[0].taskId,
// taskId: 4454, // taskId: 4454,
} }
//先隐藏下面
let res = await beforeCheckApi(params) let res = await beforeCheckApi(params)
if (res.code == 0) { if (res.code == 0) {
/*测试数据
res = {
code: 0,
msg: '操作成功',
data: {
description: '[地面站]无人机起飞成功',
progressPercentage: 100,
elapsedSeconds: 114,
taskStartTime: '2025-08-22 15:11:03',
taskStartTimestampMs: 1755846663000,
status: 'success',
steps: [
{
description: '[综管]航线飞行任务接收成功',
time: '15:11:03',
diffSeconds: '',
status: 'success',
},
{
description: '[机巢]机巢设备自检通过',
time: '15:11:12',
diffSeconds: '9s',
status: 'success',
},
{
description: '[机巢]机场气象环境检查通过',
time: '15:11:13',
diffSeconds: '1s',
status: 'success',
},
{
description: '[机巢]升平台成功',
time: '15:11:40',
diffSeconds: '27s',
status: 'success',
},
{
description: '[机巢]打开灯光成功',
time: '15:11:40',
diffSeconds: '0s',
status: 'success',
},
{
description: '[机巢]打开图传成功',
time: '15:11:41',
diffSeconds: '1s',
status: 'success',
},
{
description: '[机巢]无人机开机成功',
time: '15:11:43',
diffSeconds: '2s',
status: 'success',
},
{
description: '[机巢]出舱成功',
time: '15:11:56',
diffSeconds: '13s',
status: 'success',
},
{
description: '[地面站]无人机连接成功',
time: '15:11:56',
diffSeconds: '0s',
status: 'success',
},
{
description: '[地面站]获取无人机环境检查成功',
time: '15:12:45',
diffSeconds: '49s',
status: 'success',
},
{
description: '[地面站]无人机写入航线',
time: '15:12:48',
diffSeconds: '3s',
status: 'success',
},
{
description: '[综管]无人机起飞条件检查成功',
time: '15:12:53',
diffSeconds: '5s',
status: 'success',
},
{
description: '[地面站]无人机起飞成功',
time: '15:12:57',
diffSeconds: '',
status: 'success',
},
],
},
traceId: '',
}
*/
processInfoList = res.data.steps processInfoList = res.data.steps
//总共花费的时间 //总共花费的时间
checkTimeNum.value = res.data.elapsedTime if (!isFirstQuery) {
checkTimeNum.value = Number(res.data.elapsedSeconds)
}
processTitle.value = res.data.description processTitle.value = res.data.description
processStatus.value = res.data.status processStatus.value = res.data.status
precent.value = res.data.progressPercentage precent.value = res.data.progressPercentage
@ -67,9 +168,18 @@ const checkFn = async (row) => {
return return
} }
if (processStatus.value == 'error') { if (processStatus.value == 'error') {
progressStatus.value = 'exception' //进度条设置为红色
clearTimeout(checkTime) clearTimeout(checkTime)
return return
} }
if (!isFirstQuery) {
//第一次进入
isFirstQuery = true
if (processStatus.value != 'error' && precent.value != 100) {
startTimeFn()
}
}
checkTime = setTimeout(() => { checkTime = setTimeout(() => {
checkFn(row) checkFn(row)
}, 1000) }, 1000)
@ -77,6 +187,17 @@ const checkFn = async (row) => {
} }
} }
//临时代码啊
checkFn({
id: 1,
task: [
{
taskId: 2,
},
],
})
//临时代码啊
watch( watch(
() => props.row, () => props.row,
(val) => { (val) => {
@ -95,46 +216,87 @@ watch(
onMounted(() => {}) onMounted(() => {})
onUnmounted(() => { onUnmounted(() => {
clearTimeout(checkTime) clearTimeout(checkTime)
// clearTimeout(checkTimeNum_timeout) clearTimeout(checkTimeNum_timeout)
}) })
</script> </script>
<template> <template>
<div class="p-2.5"> <div class="p-2.5">
<div class="flex flex-row items-center justify-between mt-4"> <div class="flex flex-row items-center justify-between mt-4">
<span class="text-[18px] text-[#ffffff] font-medium">TAKEOFF PREPARING</span> <span>
<span v-if="processStatus == 'success' && precent == 100" class="success_text">SUCCESS</span> <span class="text-[18px] text-[#ffffff] font-medium text-xl">TAKEOFF PREPARING</span>
<span v-if="processStatus == 'error'" class="fail_text">FAILED</span> <span
v-if="processStatus == 'success' && precent == 100"
class="success_text text-xl text-[#50d890] ml-3"
>SUCCESS</span
>
<span v-if="processStatus == 'error'" class="fail_text text-xl text-[#F12626] ml-3"
>FAILED</span
>
</span>
<a-spin :indicator="indicator" v-if="precent != 100" /> <a-spin :indicator="indicator" v-if="precent != 100 && processStatus != 'error'" />
<span
class="iconfont icon-baocuo text-[#F12626] text-xl"
v-if="processStatus == 'error'"
></span>
<span
class="iconfont icon-duihao2 text-[#50d890] text-xl"
v-if="processStatus == 'success' && precent == 100"
></span>
</div> </div>
<a-progress :percent="precent" :show-info="false" trailColor="#ffffff" /> <a-progress
:percent="precent"
:status="progressStatus"
:show-info="false"
trailColor="#ffffff"
/>
<div class="flex flex-row items-center justify-between text-sm"> <div class="flex flex-row items-center justify-between text-sm">
<span> <span>
<span class="text-[#ffffff]">耗时:</span> <span class="text-[#ffffff] text-base">耗时:</span>
<span class="text-[#3BA3FB] ml-2">{{ checkTimeNum }}</span> <span class="text-[#3BA3FB] ml-2 text-base">{{ checkTimeNum }}S</span>
</span> </span>
<span> <span>
<span class="text-[#ffffff]">{{ processTitle }}</span> <span class="text-[#ffffff] text-base">{{ processTitle }}</span>
<!-- <span class="text-[#FFA800] ml-2">50s</span> --> <!-- <span class="text-[#FFA800] ml-2">50s</span> -->
</span> </span>
</div> </div>
<div <div
v-if="processInfoList.length > 0" v-if="processInfoList.length > 0"
class="w-full mt-6 py-3 px-1 border border-[#394C73] rounded-bl-md rounded-br-md" :class="
processStatus == 'error'
? 'errorBox w-full mt-6 py-3 px-2 border border-[#F12626] rounded-bl-md rounded-br-md'
: 'w-full mt-6 py-3 px-2 border border-[#394C73] rounded-bl-md rounded-br-md'
"
> >
<div <div
class="w-full grid grid-cols-10 gap-0" class="w-full grid grid-cols-10 gap-0 py-2"
v-for="(item, index) in processInfoList" v-for="(item, index) in processInfoList"
:key="index" :key="index"
> >
<span class="iconfont icon-biaoqian text-[#ffffff] opacity-50 col-span-1 leading-5"></span> <span
<span class="text-[#FFA800] text-xs col-span-2">{{ item.time }}</span> class="iconfont icon-duihao2 text-[#50d890] col-span-1 text-xl"
<span class="text-[#ffffff] text-xs col-span-5">{{ item.description }}</span> v-if="item.status == 'success'"
<span class="text-[#ffffff] text-xs col-span-2 text-right" v-if="item.diffSeconds != ''" ></span>
<span
class="iconfont icon-chahao text-[#F12626] col-span-1 text-xl"
v-else-if="item.status == 'error'"
></span>
<span class="iconfont icon-biaoqian text-[#ffffff] col-span-1 text-xl" v-else></span>
<span class="text-[#FFA800] text-base col-span-2">{{ item.time }}</span>
<span class="text-[#50d890] text-base col-span-5" v-if="item.status == 'success'">{{
item.description
}}</span>
<span class="text-[#F12626] text-base col-span-5" v-else-if="item.status == 'error'">{{
item.description
}}</span>
<span class="text-[#ffffff] text-base col-span-5" v-else>{{ item.description }}</span>
<span class="text-[#ffffff] text-base col-span-2 text-right" v-if="item.diffSeconds != ''"
>耗时{{ item.diffSeconds }}</span >耗时{{ item.diffSeconds }}</span
> >
</div> </div>
@ -152,9 +314,12 @@ onUnmounted(() => {
} }
.fail_text { .fail_text {
font-weight: 500; font-weight: 500;
color: #ffffff; //color: #ffffff;
background: linear-gradient(0deg, #de4747 0%, #f12626 100%); //background: linear-gradient(0deg, #de4747 0%, #f12626 100%);
-webkit-background-clip: text; //-webkit-background-clip: text;
-webkit-text-fill-color: transparent; //-webkit-text-fill-color: transparent;
}
.errorBox {
box-shadow: inset 0 0 5px 5px rgba(255, 0, 0, 0.5);
} }
</style> </style>

30
src/views/carbin/components/flying.vue
View File

@ -27,6 +27,9 @@ let viewMode = ref(1) //1-1/4方式 2-对半方式
let littleViewMode = ref(2) //1-舱外视频 2-舱内视频 3-无人机视频 let littleViewMode = ref(2) //1-舱外视频 2-舱内视频 3-无人机视频
let littleViewModeName = ref('舱内画面') let littleViewModeName = ref('舱内画面')
import img_default from '@/assets/icons/state1.png'
import img_touch from '@/assets/icons/state2.png'
//飞机高度 //飞机高度
let planeAlt = 0 let planeAlt = 0
//已修改过小窗的视频类型 //已修改过小窗的视频类型
@ -37,7 +40,7 @@ let planeStateList = reactive({
key: 'vspeed', key: 'vspeed',
name: '爬升速度', name: '爬升速度',
icon: 'icon-shangshengxiajiang', icon: 'icon-shangshengxiajiang',
value: '-', value: '0',
touch: false, touch: false,
content: '爬升<br>速度', content: '爬升<br>速度',
unit: '/s', unit: '/s',
@ -46,7 +49,7 @@ let planeStateList = reactive({
id: 2, id: 2,
name: '平飞速度', name: '平飞速度',
icon: 'icon-jiantouzuoyou', icon: 'icon-jiantouzuoyou',
value: '-', value: '0',
touch: false, touch: false,
content: '平飞<br>速度', content: '平飞<br>速度',
unit: '/s', unit: '/s',
@ -55,7 +58,7 @@ let planeStateList = reactive({
id: 3, id: 3,
name: '距离机场', name: '距离机场',
icon: 'icon-H', icon: 'icon-H',
value: '-', value: '0',
touch: false, touch: false,
content: '距离<br>机场', content: '距离<br>机场',
unit: 'm', unit: 'm',
@ -64,7 +67,7 @@ let planeStateList = reactive({
id: 4, id: 4,
name: '海拔高度', name: '海拔高度',
icon: 'icon-tiedijuli', icon: 'icon-tiedijuli',
value: '-', value: '0',
touch: false, touch: false,
content: '海拔<br>高度', content: '海拔<br>高度',
unit: 'm', unit: 'm',
@ -73,7 +76,7 @@ let planeStateList = reactive({
id: 5, id: 5,
name: '无人机俯仰角', name: '无人机俯仰角',
icon: 'icon-flight-takeoff-line', icon: 'icon-flight-takeoff-line',
value: '-', value: '0',
touch: false, touch: false,
content: '无人机<br>俯仰角', content: '无人机<br>俯仰角',
unit: '°', unit: '°',
@ -82,7 +85,7 @@ let planeStateList = reactive({
id: 6, id: 6,
name: '无人机偏航角', name: '无人机偏航角',
icon: 'icon-feihangqipianhangjiao', icon: 'icon-feihangqipianhangjiao',
value: '-', value: '0',
content: '无人机<br>偏航角', content: '无人机<br>偏航角',
touch: false, touch: false,
unit: '°', unit: '°',
@ -91,7 +94,7 @@ let planeStateList = reactive({
id: 7, id: 7,
name: '云台俯仰角', name: '云台俯仰角',
icon: 'icon-pianhangjiao-1', icon: 'icon-pianhangjiao-1',
value: '-', value: '0',
content: '云台<br>俯仰角', content: '云台<br>俯仰角',
touch: false, touch: false,
unit: '°', unit: '°',
@ -100,7 +103,7 @@ let planeStateList = reactive({
id: 8, id: 8,
name: '云台偏航角', name: '云台偏航角',
icon: 'icon-pianhangjiao-1', icon: 'icon-pianhangjiao-1',
value: '-', value: '0',
content: '云台<br>偏航角', content: '云台<br>偏航角',
touch: false, touch: false,
unit: '°', unit: '°',
@ -208,7 +211,8 @@ airPortSocketStore.$subscribe((mutate, state) => {
<template> <template>
<div class="w-full h-full flex flex-row relative"> <div class="w-full h-full flex flex-row relative">
<div class="leftPlane flex flex-row w-1/4 h-full py-3 px-2.5"> <!-- lg:h-c150 xk:h-c150 x1k:h-c212 x2k:h-c282 -->
<div class="leftPlane flex flex-row w-1/4 h-full py-3 px-2.5 xk:zoom09 x1k:zoom13 x2k:zoom17">
<div class="h-full flex flex-col"> <div class="h-full flex flex-col">
<div <div
@click="switchView(1)" @click="switchView(1)"
@ -217,7 +221,7 @@ airPortSocketStore.$subscribe((mutate, state) => {
> >
<img :src="size1Img" alt="" /> <img :src="size1Img" alt="" />
<p <p
class="text-center text-[#ffffff] opacity-30 text-[11px]" class="text-center text-[#ffffff] text-[11px]"
:class="viewMode == 1 ? 'opacity-100' : 'opacity-30'" :class="viewMode == 1 ? 'opacity-100' : 'opacity-30'"
> >
常规 常规
@ -225,7 +229,7 @@ airPortSocketStore.$subscribe((mutate, state) => {
</div> </div>
<div <div
@click="switchView(2)" @click="switchView(2)"
class="size-12 rounded border border-[#BFBFBF] p-1 cursor-pointer" class="size-12 rounded border p-1 cursor-pointer"
:class="viewMode != 1 ? 'border-[#006FFE]' : 'border-[#BFBFBF]'" :class="viewMode != 1 ? 'border-[#006FFE]' : 'border-[#BFBFBF]'"
> >
<img :src="size2Img" alt="" /> <img :src="size2Img" alt="" />
@ -305,7 +309,7 @@ airPortSocketStore.$subscribe((mutate, state) => {
</div> </div>
<!-- 右边 --> <!-- 右边 -->
<div class="rightPlane flex flex-row w-3/4 h-full py-3 pr-2.5"> <div class="rightPlane flex flex-row w-3/4 h-full py-3 pr-2.5 xk:zoom11 x1k:zoom14 x2k:zoom19">
<div class="w-[260px] m-auto"> <div class="w-[260px] m-auto">
<a-row :gutter="[4, 8]" style="height: fit-content"> <a-row :gutter="[4, 8]" style="height: fit-content">
<a-col <a-col
@ -320,7 +324,7 @@ airPortSocketStore.$subscribe((mutate, state) => {
@mouseover="item.touch = true" @mouseover="item.touch = true"
@mouseout="item.touch = false" @mouseout="item.touch = false"
> >
<img src="@/assets/icons/state1.png" class="w-full h-full" alt="" /> <img :src="item.touch ? img_touch : img_default" class="w-full h-full" alt="" />
<span <span
v-if="!item.touch" v-if="!item.touch"
:class=" :class="

147
src/views/carbin/index.vue
View File

@ -64,8 +64,8 @@ let currentAirPortInfo = ref(null)
let currentAirPortStatus = ref(-1) let currentAirPortStatus = ref(-1)
const statusList = reactive({ const statusList = reactive({
1: '空闲', 1: '空闲',
2: '飞行中', 2: '正在飞行',
3: '准备中', 3: '飞行准备中',
}) })
let iframeData = null let iframeData = null
@ -122,6 +122,23 @@ const queryAirLine_AirPort = async () => {
statusList[currentAirPortStatus.value], statusList[currentAirPortStatus.value],
) )
//机场当前状态
if (Number(currentAirPortInfo.value.status) == 2) {
//飞行中 请求航线文件
queryAirLine(currentAirPortInfo.value.task[0].fileUrl)
} else {
//地图数据
iframeData = {
airportName: currentAirPortInfo.value.name,
airportLocation: {
lon: currentAirPortInfo.value.longitude,
lat: currentAirPortInfo.value.latitude,
},
flyPath: [],
coverage: currentAirPortInfo.value.coverage,
}
}
resetScreen() resetScreen()
} }
@ -137,23 +154,23 @@ const queryAirLine_AirPort = async () => {
} }
} }
if (res[1].value.code == 0) { // if (res[1].value.code == 0) {
//航线文件 // //航线文件
let airLineInfo = res[1].value.data[0] // let airLineInfo = res[1].value.data[0]
//请求航线数据 // //请求航线数据
let resultWayPoint = await getAirWayPointsToJson(airLineInfo.fileUrl) // let resultWayPoint = await getAirWayPointsToJson(airLineInfo.fileUrl)
//地图数据 // //地图数据
iframeData = { // iframeData = {
airportName: currentAirPortInfo.value.name, // airportName: currentAirPortInfo.value.name,
airportLocation: { // airportLocation: {
lon: currentAirPortInfo.value.longitude, // lon: currentAirPortInfo.value.longitude,
lat: currentAirPortInfo.value.latitude, // lat: currentAirPortInfo.value.latitude,
}, // },
flyPath: resultWayPoint, // flyPath: resultWayPoint,
coverage: currentAirPortInfo.value.coverage, // coverage: currentAirPortInfo.value.coverage,
} // }
} // }
//6秒查询一次，主要是获取机场的状态，不同的状态展示的界面也不一样 //6秒查询一次，主要是获取机场的状态，不同的状态展示的界面也不一样
setTimeout(() => { setTimeout(() => {
@ -174,7 +191,6 @@ const queryAirPort = async () => {
currentAirPortInfo.value.status = 2 currentAirPortInfo.value.status = 2
//机场当前状态
if (currentAirPortStatus.value != Number(currentAirPortInfo.value.status)) { if (currentAirPortStatus.value != Number(currentAirPortInfo.value.status)) {
currentAirPortStatus.value = Number(currentAirPortInfo.value.status) currentAirPortStatus.value = Number(currentAirPortInfo.value.status)
console.log( console.log(
@ -183,6 +199,12 @@ const queryAirPort = async () => {
statusList[currentAirPortStatus.value], statusList[currentAirPortStatus.value],
) )
//机场当前状态
if (Number(currentAirPortInfo.value.status) == 2) {
//飞行中 请求航线文件
queryAirLine(currentAirPortInfo.value.task[0].fileUrl)
}
resetScreen() resetScreen()
} }
console.log('现在的状态是:', currentAirPortStatus.value, statusList[currentAirPortStatus.value]) console.log('现在的状态是:', currentAirPortStatus.value, statusList[currentAirPortStatus.value])
@ -192,6 +214,46 @@ const queryAirPort = async () => {
queryAirPort() queryAirPort()
}, 6000) }, 6000)
} }
//只请求航线
const queryAirLine = async (fileUrl) => {
//请求航线数据
let resultWayPoint = await getAirWayPointsToJson(fileUrl)
//地图数据
iframeData = {
airportName: currentAirPortInfo.value.name,
airportLocation: {
lon: currentAirPortInfo.value.longitude,
lat: currentAirPortInfo.value.latitude,
},
flyPath: resultWayPoint,
coverage: currentAirPortInfo.value.coverage,
}
//下面是以前的
// let params = {
// airportId: window.iframe_AirPortID, //67 1011
// }
// let res = await queryAirLineApi(params)
// if (res.code == 0) {
// //航线文件
// let airLineInfo = res.data
// //请求航线数据
// let resultWayPoint = await getAirWayPointsToJson(airLineInfo.fileUrl)
// //地图数据
// iframeData = {
// airportName: currentAirPortInfo.value.name,
// airportLocation: {
// lon: currentAirPortInfo.value.longitude,
// lat: currentAirPortInfo.value.latitude,
// },
// flyPath: resultWayPoint,
// coverage: currentAirPortInfo.value.coverage,
// }
// }
}
//获取天气 //获取天气
// const getweatherFn = async () => { // const getweatherFn = async () => {
// let params = { // let params = {
@ -249,7 +311,7 @@ const iframeLoaded = (iframeContent) => {
}, 50) }, 50)
}, 0) }, 0)
} }
//无人机实时飞机发送消息 //无人机实时飞机发送消息gis
const sendPosToPlane = (socketData) => { const sendPosToPlane = (socketData) => {
if (currentAirPortStatus.value != 2) { if (currentAirPortStatus.value != 2) {
return return
@ -398,7 +460,7 @@ const droneCommandExecute = async (zhilin) => {
//继续飞行任务，隐藏继续按钮 //继续飞行任务，隐藏继续按钮
command5.value = false command5.value = false
} }
message.success('任务下发成功') // message.success('任务下发成功')
} else { } else {
message.error(res.msg) message.error(res.msg)
} }
@ -418,7 +480,12 @@ onMounted(() => {
> >
<div> <div>
<span class="text-sm text-[#B4D5FF]">{{ airPortName }}</span> <span class="text-sm text-[#B4D5FF]">{{ airPortName }}</span>
<span class="ml-2.5 text-xs px-4 py-1 bg-[#016CF8] text-white rounded-sm">{{ <span
v-if="currentAirPortStatus == 2"
class="ml-2.5 text-xs px-4 py-1 bg-[#EEA72D] text-white rounded-sm"
>{{ statusList[currentAirPortStatus] }}</span
>
<span v-else class="ml-2.5 text-xs px-4 py-1 bg-[#016CF8] text-white rounded-sm">{{
statusList[currentAirPortStatus] statusList[currentAirPortStatus]
}}</span> }}</span>
</div> </div>
@ -473,12 +540,12 @@ onMounted(() => {
<a-radio-button value="stop" disabled>任务已暂停</a-radio-button> <a-radio-button value="stop" disabled>任务已暂停</a-radio-button>
<a-radio-button value="continue" @click="droneCommandExecute('04')">继续</a-radio-button> <a-radio-button value="continue" @click="droneCommandExecute('04')">继续</a-radio-button>
</a-radio-group> </a-radio-group>
<!-- lg:h-c150 xk:h-c150 x1k:h-c212 x2k:h-c282 -->
<div <div
:class=" :class="
currentAirPortStatus == 2 currentAirPortStatus == 2
? 'fullScreen w-full absolute right-0 lg:h-c150 xk:h-c150 x1k:h-c212 x2k:h-c282' ? 'fullScreen w-full absolute right-0 h-full bg-black'
: 'fullScreen w-full absolute right-0 h-full' : 'fullScreen w-full absolute right-0 h-full bg-black'
" "
> >
<div <div
@ -486,11 +553,18 @@ onMounted(() => {
v-if="currentAirPortStatus == 2" v-if="currentAirPortStatus == 2"
> >
<planeControl <planeControl
class="absolute left-0 right-0 top-0 bottom-0 m-auto" class="absolute left-0 right-0 m-auto lg:bottom-[150px] xk:bottom-[150px] x1k:bottom-[212px] x2k:bottom-[282px]"
@droneCommandExecute="droneCommandExecute" @droneCommandExecute="droneCommandExecute"
/> />
</div> </div>
<div id="big_area" class="relative w-full h-full overflow-hidden"> <div
id="big_area"
:class="
currentAirPortStatus == 2 && leftPlaneWidth == '50%'
? 'relative w-full h-full overflow-hidden lg:h-c150 xk:h-c150 x1k:h-c212 x2k:h-c282'
: 'relative w-full h-full overflow-hidden'
"
>
<ScreenComp :showType="big_area_showType" @iframeLoaded="iframeLoaded" /> <ScreenComp :showType="big_area_showType" @iframeLoaded="iframeLoaded" />
</div> </div>
</div> </div>
@ -499,7 +573,7 @@ onMounted(() => {
<!-- 底部面板 --> <!-- 底部面板 -->
<div <div
v-if="currentAirPortStatus == 2" v-if="currentAirPortStatus == 2"
class="bottomPlane w-full lg:h-[150px] xk:h-[150px] x1k:h-[212px] x2k:h-[282px] bg-[#0B2038] absolute bottom-0 left-0 z-[3]" class="bottomPlane w-full lg:h-[150px] xk:h-[150px] x1k:h-[212px] x2k:h-[282px] bg-[#001626] bg-opacity-70 absolute bottom-0 left-0 z-[3]"
> >
<bottomPlaneFlying <bottomPlaneFlying
v-if="currentAirPortStatus == 2" v-if="currentAirPortStatus == 2"
@ -534,11 +608,21 @@ onMounted(() => {
height: 100%; height: 100%;
} }
:deep(.vjs-control-bar) { :deep(.vjs-control-bar) {
// display: none !important; display: none !important;
} }
:deep(.live-player-stretch-btn) { :deep(.live-player-stretch-btn) {
// display: none !important; // display: none !important;
} }
:deep(.video-js .vjs-tech) {
max-width: unset !important;
width: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
height: 120%;
}
.rem-header { .rem-header {
background: linear-gradient(0deg, #051a31, #09315d); background: linear-gradient(0deg, #051a31, #09315d);
@ -550,18 +634,19 @@ onMounted(() => {
width: var(--leftPlaneWidth); width: var(--leftPlaneWidth);
} }
.leftPlane-area { .leftPlane-area {
height: calc(100% - 150px); height: 100%;
} }
.rightPlane { .rightPlane {
--rightPlaneWidth: v-bind(rightPlaneWidth); --rightPlaneWidth: v-bind(rightPlaneWidth);
width: var(--rightPlaneWidth); width: var(--rightPlaneWidth);
border-left: 1px solid #09315d;
} }
.fullScreen { .fullScreen {
// --rightPlaneHeight: v-bind(rightPlaneHeight); // --rightPlaneHeight: v-bind(rightPlaneHeight);
// --rightPlaneBottom: v-bind(rightPlaneBottom); // --rightPlaneBottom: v-bind(rightPlaneBottom);
// height: var(--rightPlaneHeight); // height: var(--rightPlaneHeight);
// bottom: var(--rightPlaneBottom); // bottom: var(--rightPlaneBottom);
background: #ffffff; background: #000000;
} }
#virturalDrive_iframe_full { #virturalDrive_iframe_full {
width: 100%; width: 100%;

41
src/views/carbin/toolComp/planeControl.vue
View File

@ -10,15 +10,15 @@ const emits = defineEmits(['droneCommandExecute'])
let items = reactive({ let items = reactive({
battery: { battery: {
label: '电池循环次数', label: '电池循环次数',
value: '-', value: '0',
}, },
version: { version: {
label: '无人机版本', label: '无人机版本',
value: '-', value: '',
}, },
temperature: { temperature: {
label: '电池温度', label: '电池温度',
value: '-', value: '0℃',
}, },
}) })
@ -30,9 +30,9 @@ let lastTime = ref('-')
const setCurrentData = (data) => { const setCurrentData = (data) => {
// console.log(data) // console.log(data)
//电池循环次数 //电池循环次数
items.battery.value = data ? data.batLoopTimes : '-' items.battery.value = data ? data.batLoopTimes : '0'
//电池温度 //电池温度
items.temperature.value = data ? data.weather.cellTemp : '-' items.temperature.value = data ? data.weather.cellTemp + '℃' : '0℃'
precent.value = data ? Number(data.battery) * 100 : '-' precent.value = data ? Number(data.battery) * 100 : '-'
lastTime.value = data ? data.allflytime : '-' lastTime.value = data ? data.allflytime : '-'
@ -79,20 +79,23 @@ onMounted(() => {})
<div <div
v-for="(item, index) in items" v-for="(item, index) in items"
:key="index" :key="index"
class="w-[200px] py-[20px] bg-[#00000040] flex flex-row justify-between" class="w-[200px] py-[10px] bg-[#00000040] flex flex-row justify-between"
> >
<span>{{ item.label }}</span <span>{{ item.label }}</span
><span>{{ item.value }}</span> ><span>{{ item.value }}</span>
</div> </div>
</div> </div>
</template> </template>
<div class="middlePlane w-[210px] h-[46px] mx-3 flex flex-row items-center justify-around"> <div
class="relative middlePlane w-[210px] h-[46px] mx-3 flex flex-row items-center justify-around"
>
<img src="@/assets/icons/middleplane.png" alt="" class="absolute w-full h-full z-[-1]" />
<div <div
class="w-[23px] h-[23px] bg-[#ffffff50] rounded-[6px] flex-row items-center justify-center text-center" class="w-[25px] h-[25px] bg-[#ffffff50] rounded-[6px] flex-row items-center justify-center text-center"
> >
<span class="iconfont icon-xudianchi text-[#ffffff] text-base"></span> <span class="iconfont icon-xudianchi text-[#ffffff] text-xl"></span>
</div> </div>
<span class="text-sm text-[#B4D5FF]">电池电量</span> <span class="text-sm text-[#ffffff]">电池电量</span>
<div class="lastTime text-sm font-bold">{{ precent }}%/{{ lastTime }}min</div> <div class="lastTime text-sm font-bold">{{ precent }}%/{{ lastTime }}min</div>
<span class="iconfont icon-xiashuangjiantou text-[#ffffff50]"></span> <span class="iconfont icon-xiashuangjiantou text-[#ffffff50]"></span>
</div> </div>
@ -120,17 +123,19 @@ onMounted(() => {})
<style lang="scss" scoped> <style lang="scss" scoped>
.middlePlane { .middlePlane {
background: linear-gradient(270deg, #006ffe, #3ca4fb); //background: linear-gradient(270deg, #006ffe, #3ca4fb);
border-radius: 2px; border-radius: 2px;
border: 2px solid #75a9d6; border: 2px solid #75a9d6;
} }
.lastTime { .lastTime {
background: linear-gradient( // background: linear-gradient(
0deg, // 0deg,
rgba(79, 255, 208, 0.44) 0%, // rgba(79, 255, 208, 0.44) 0%,
rgba(20, 255, 50, 0.44) 98.779296875% // rgba(20, 255, 50, 0.44) 98.779296875%
); // );
-webkit-background-clip: text; color: #4fffd0;
-webkit-text-fill-color: transparent; font-weight: bold;
// -webkit-background-clip: text;
// -webkit-text-fill-color: transparent;
} }
</style> </style>

6
src/views/carbin/toolComp/screen.vue
View File

@ -39,11 +39,15 @@ const iframeLoaded = () => {
} }
const setVideo = () => { const setVideo = () => {
// let tempLive = 'http://127.0.0.1:7001/live/movie.flv'
if (showType.value == 'video_out') { if (showType.value == 'video_out') {
// LiveOptions.videoUrl = tempLive
LiveOptions.videoUrl = row.external_monitor_url LiveOptions.videoUrl = row.external_monitor_url
} else if (showType.value == 'video_in') { } else if (showType.value == 'video_in') {
// LiveOptions.videoUrl = tempLive
LiveOptions.videoUrl = row.internal_monitor_url LiveOptions.videoUrl = row.internal_monitor_url
} else if (showType.value == 'video_plane') { } else if (showType.value == 'video_plane') {
// LiveOptions.videoUrl = tempLive
LiveOptions.videoUrl = row.camera_url LiveOptions.videoUrl = row.camera_url
} }
// console.log(row) // console.log(row)
@ -66,7 +70,7 @@ watch(
</script> </script>
<template> <template>
<div class="w-full h-full"> <div class="w-full h-full bg-black">
<LivePlayer <LivePlayer
class="h-full absolute left-0 right-0 top-0 right-0 m-auto" class="h-full absolute left-0 right-0 top-0 right-0 m-auto"
v-show=" v-show="