<template>
|
<div class="config_dock">
|
<div class="w100 option flex-display">
|
<div class="option-left-icon flex-display">
|
<RobotOutlined :style="{ fontSize: '48px' }" />
|
<div style="margin-top: 10px;">Dock</div>
|
</div>
|
<div class="option-right">
|
<div class="wrapper">
|
<div class="wrapper-item flex-display">
|
<span class="item-left">设备空闲中</span>
|
<span class="item-right dock-status">当前正常</span>
|
</div>
|
|
<div class="wrapper-item flex-display">
|
<div class="item-left">
|
<CloudOutlined />
|
<span>正常</span>
|
</div>
|
<div class="item-right flex-display flex-align-center">
|
<span class="mr20">
|
<ThunderboltOutlined />
|
34°C
|
</span>
|
<span class="mr20">
|
<FundProjectionScreenOutlined />
|
436kb/s
|
</span>
|
<span class="mr20">
|
<UploadOutlined />
|
0
|
</span>
|
</div>
|
</div>
|
</div>
|
<div class="option-btn flex-display flex-justify-between">
|
<div class="btn">
|
<a-button type="primary" @click="videoControl = !videoControl" :class="{ unchecked: !videoControl }"
|
style="width: 100%;">
|
<template #icon>
|
<VideoCameraOutlined />
|
</template>
|
监控
|
</a-button>
|
</div>
|
<div class="btn">
|
<a-button type="primary" @click="optionControl = !optionControl"
|
:class="{ unchecked: !optionControl }" style="width: 100%;">
|
<template #icon>
|
<ToolOutlined />
|
</template>
|
操作
|
</a-button>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="video">
|
<!-- <div class="video-option">
|
<a-tooltip title="关闭补光灯"></a-tooltip>
|
</div> -->
|
<video auto src="https://cdn.jsdelivr.net/gh/xdlumia/files/video-play/IronMan.mp4"
|
style="width: 100%;height: 200px;"></video>
|
</div>
|
<div class="w100 option flex-display aerial">
|
<div class="option-left-icon flex-display">
|
<RobotOutlined :style="{ fontSize: '48px' }" />
|
<div style="margin-top: 10px;">Dock</div>
|
</div>
|
<div class="option-right">
|
<div class="wrapper">
|
<div class="wrapper-item flex-display">
|
<span class="item-left">舱内关机</span>
|
<span class="item-right dock-status">N/A</span>
|
</div>
|
|
<div class="wrapper-item flex-display">
|
<span class="w100 text-center f12" style="color: #4e4e4e;">当前设备已关机，无法进行直播</span>
|
<!-- <div class="item-left">
|
<CloudOutlined />
|
<span>正常</span>
|
</div>
|
<div class="item-right flex-display flex-align-center">
|
<span class="mr20">
|
<ThunderboltOutlined />
|
34°C
|
</span>
|
</div> -->
|
</div>
|
</div>
|
<div class="option-btn flex-display flex-justify-between">
|
<div class="btn" style="width: 100%;">
|
<a-button type="primary" @click="flyControl = !flyControl" :class="{ unchecked: !flyControl }"
|
style="width: 100%;">
|
<template #icon>
|
<BoxPlotOutlined />
|
</template>
|
飞行控制
|
</a-button>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="takeoff flex-display flex-align-center">
|
<div class="takeoff-left mr15 flex-display flex-align-center flex-direction-column">
|
<RobotOutlined :style="{ fontSize: '28px' }" />
|
<div style="margin-top: 10px;">一键起飞</div>
|
</div>
|
<div class="divider"></div>
|
<div class="takeoff-middle"></div>
|
<div class="takeoff-right flex-display flex-justify-center flex-align-center flex-direction-column">
|
<div class="mb5 input-box flex-display flex-align-center">
|
<span class="f10 label mr15">安全离场高(ALT)</span>
|
<a-input size="small" class="input-style" suffix="m" v-model:value="option.safe_height" />
|
</div>
|
<div class="mb5 input-box flex-display flex-align-center">
|
<span class="f10 label mr15">飞行作业高(AGL)</span>
|
<a-input size="small" class="input-style" suffix="m" v-model:value="option.fly_height" />
|
</div>
|
<div class="mb5 input-box flex-display flex-align-center">
|
<span class="f10 label mr15">返航高(ALT)</span>
|
<a-input size="small" class="input-style" suffix="m" v-model:value="option.return_height" />
|
</div>
|
<div class="mb5 select-box flex-display flex-align-center">
|
<span class="f10 label mr15">失联动作</span>
|
<a-select :dropdownMatchSelectWidth="false" class="select-style" :bordered="false" size="small" ref="select"
|
v-model:value="option.lose_connection" style="width: 60px" @change="handleChange">
|
<a-select-option value="1">悬停</a-select-option>
|
<a-select-option value="2">返航</a-select-option>
|
<a-select-option value="3">继续执行</a-select-option>
|
</a-select>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { VideoCameraOutlined, RobotOutlined, ToolOutlined, CloudOutlined, ThunderboltOutlined, FundProjectionScreenOutlined, UploadOutlined, BoxPlotOutlined } from '@ant-design/icons-vue'
|
import Drawer from '/@/components/Drawer/Drawer.vue'
|
const videoControl = ref(false)
|
const optionControl = ref(false)
|
const flyControl = ref(false)
|
const option = ref({
|
safe_height: 60,
|
fly_height: 60,
|
return_height: 60,
|
lose_connection: '1',
|
})
|
const handleChange = (e: string) => {
|
console.log(e, 'eee')
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.config_dock {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
|
:deep(.ant-input-affix-wrapper > input.ant-input) {
|
background: #101010;
|
color: #fff;
|
text-align: center;
|
margin-right: 5px;
|
width: 30px;
|
}
|
|
:deep(.ant-input-affix-wrapper .ant-input-suffix) {
|
color: #fff;
|
}
|
|
.unchecked {
|
color: #fff;
|
background-color: #3c3c3c;
|
border: none;
|
}
|
|
.option {
|
width: 100%;
|
height: 120px;
|
align-items: center;
|
|
.option-left-icon {
|
flex-direction: column;
|
justify-content: center;
|
align-items: center;
|
background-color: #3d3d3d;
|
padding: 10px;
|
}
|
|
.option-right {
|
flex: 1;
|
padding: 5px;
|
|
.wrapper {
|
width: 100%;
|
|
.wrapper-item {
|
align-items: center;
|
justify-content: space-between;
|
margin-bottom: 10px;
|
|
.item-left {
|
width: 100px;
|
}
|
|
.item-right {
|
flex: 1;
|
}
|
|
.dock-status {
|
background-color: #5d5f61;
|
padding: 0 5px;
|
color: #fff;
|
}
|
}
|
}
|
|
.option-btn {
|
width: 100%;
|
|
.btn {
|
width: 48%;
|
}
|
}
|
}
|
}
|
|
.video {
|
width: 100%;
|
height: 80%;
|
position: relative;
|
|
.video-option {
|
display: flex;
|
align-items: center;
|
justify-content: flex-end;
|
}
|
}
|
|
.takeoff {
|
padding: 5px;
|
height: 100px;
|
width: 100%;
|
margin-bottom: 10px;
|
|
.takeoff-left {
|
background-color: #3d3d3d;
|
padding: 10px;
|
width: 90px;
|
height: 90px;
|
justify-content: center;
|
}
|
|
.input-style {
|
width: 60px;
|
padding: 0;
|
background-color: #101010;
|
border: none;
|
}
|
|
.select-style {
|
background-color: #3c3c3c;
|
padding: 0;
|
color: #fff;
|
font-size: 10px;
|
}
|
|
.label {
|
min-width: 100px;
|
text-align: right;
|
}
|
|
.divider {
|
height: 100%;
|
width: 1.12px;
|
background-color: hsla(0, 0%, 100%, .1);
|
}
|
}
|
}</style>
|
