Merge branch 'master' of http://111.229.174.37:3000/Food/food
This commit is contained in:
commit
3e3cc6281d
108
src/components/BatteryStatus.vue
Normal file
108
src/components/BatteryStatus.vue
Normal file
@ -0,0 +1,108 @@
|
||||
<template>
|
||||
<div class="w-100 batteryBar">
|
||||
<el-progress class="z90" :percentage="batteryRemaining" :show-text="false" :stroke-width="3"
|
||||
:color="statusColor"></el-progress>
|
||||
<tooltip v-if="batteryRemainingPower" class="z90" :horizontalPosition="`${batteryRemaining}%`"
|
||||
:backgroundColor="statusColor">
|
||||
{{ batteryRemainingPower }} 毫安
|
||||
</tooltip>
|
||||
<tooltip v-if="rtlRemaining > 5" class="z90" :horizontalPosition="`${rtlRemaining}%`" backgroundColor="#ff3333">
|
||||
返
|
||||
</tooltip>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Tooltip from '@/components/Tag/Tooltip'
|
||||
|
||||
export default {
|
||||
name: 'BatteryStatus',
|
||||
data () {
|
||||
return {
|
||||
rtlRemainingPower: 0
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
statusColor () {
|
||||
// 获取剩余电量百分比和返航电量百分比
|
||||
const remaining = this.batteryRemaining
|
||||
const rtl = this.rtlRemaining
|
||||
// 计算剩余电量与返航电量的差值
|
||||
const percentage = remaining - rtl
|
||||
// 将百分比值限制在0到100范围内
|
||||
const normalizedPercentage = Math.max(0, Math.min(100, percentage))
|
||||
// 定义起始和结束的色相值 (0 - 360)
|
||||
const startHue = 200 // 代表 #00C8C8
|
||||
const endHue = 0 // 代表 #FF0000
|
||||
// 根据百分比计算色相
|
||||
const hue = Math.round(startHue + (endHue - startHue) * (100 - normalizedPercentage) / 100)
|
||||
// 设置饱和度和亮度（可以根据需要调整）
|
||||
const saturation = 90 // 饱和度保持不变
|
||||
const lightness = 50 // 亮度保持不变
|
||||
// 返回HSL颜色值
|
||||
return `hsl(${hue}, ${saturation}%, ${lightness}%)`
|
||||
},
|
||||
// 电池剩余电量值 ma
|
||||
batteryRemainingPower () {
|
||||
// 检查 this.plane 是否存在，以及 this.plane.planeState 是否存在
|
||||
if (this.plane && this.plane.planeState) {
|
||||
const battCapacity = this.plane.planeState.battCapacity
|
||||
const batteryRemaining = this.plane.planeState.batteryRemaining
|
||||
// 检查 battCapacity 和 batteryRemaining 是否有效
|
||||
if (battCapacity !== undefined && batteryRemaining !== undefined) {
|
||||
return (battCapacity / 100) * batteryRemaining
|
||||
}
|
||||
}
|
||||
// 如果上述检查未通过，返回 0
|
||||
return 0
|
||||
},
|
||||
// 剩余电量 百分比
|
||||
batteryRemaining () {
|
||||
if (this.plane && this.plane.planeState && this.plane.planeState.batteryRemaining !== undefined) {
|
||||
const remaining = this.plane.planeState.batteryRemaining
|
||||
if (remaining < 0) {
|
||||
return 0
|
||||
} else if (remaining > 100) {
|
||||
return 100
|
||||
} else {
|
||||
return Number(remaining)
|
||||
}
|
||||
}
|
||||
return 0
|
||||
},
|
||||
// 返航所需电量 值
|
||||
// rtlRemainingPower () {
|
||||
// return 0
|
||||
// },
|
||||
// 返航所需电量 百分比
|
||||
rtlRemaining () {
|
||||
if (this.plane && this.plane.planeState && this.plane.planeState.battCapacity) {
|
||||
return this.rtlRemainingPower / this.plane.planeState.battCapacity * 100
|
||||
}
|
||||
return 0
|
||||
}
|
||||
},
|
||||
props: {
|
||||
plane: {
|
||||
typeof: 'Object',
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
components: {
|
||||
Tooltip
|
||||
},
|
||||
created () {
|
||||
setInterval(() => {
|
||||
this.rtlRemainingPower += 10
|
||||
}, 1)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/styles/theme.scss";
|
||||
|
||||
.batteryBar {
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="w-100 h-100 mainBox">
|
||||
<!-- 弹出框 -->
|
||||
<el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="320px" top="30vh">
|
||||
<!-- 起飞设置弹出框 -->
|
||||
@ -37,20 +37,14 @@
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
<!-- 侧边 tab -->
|
||||
<div class="tab-container">
|
||||
<el-button size="medium" type="primary" :class="activeIndex === index ? 'butIconGroupBG' : ''"
|
||||
class="butIconGroup" v-for="(item, index) in controlItems" :key="index"
|
||||
@click="toggleContent(index, item.voice)">
|
||||
<i :class="item.icon" class="iconfont f-s-35"></i>
|
||||
<div class="m-t-5 fb">{{ item.title }}</div>
|
||||
</el-button>
|
||||
<!-- 子内容菜单 -->
|
||||
<div class="content" :class="{ 'active': activeIndex !== null }">
|
||||
<!-- 底边 tab控件组 -->
|
||||
<div class="flex column mr mac tabContainer p-l-10 p-r-10">
|
||||
<!-- tab控件组 内容组 -->
|
||||
<div class="tabContent" :class="{ 'active': activeIndex !== null }">
|
||||
<!-- 订单任务 -->
|
||||
<div v-if="activeIndex === 0" class="contentBox">
|
||||
<div v-if="activeIndex === 0" class="tabContentBox">
|
||||
<!-- 标题 -->
|
||||
<div class="clearB m-b-10 fb f-s-16 contentTit">
|
||||
<div class="clearB m-b-15 fb f-s-16 contentTit">
|
||||
<i class="iconfont icon-dingdanguanli f-s-22 m-r-5"></i>
|
||||
<span>送餐任务</span>
|
||||
</div>
|
||||
@ -117,140 +111,148 @@
|
||||
</el-form>
|
||||
</div>
|
||||
<!-- 飞机操作 -->
|
||||
<template v-if="activeIndex === 1">
|
||||
<div v-else-if="activeIndex === 1" class="tabContentBox">
|
||||
<!-- 标题 -->
|
||||
<div class="clearB m-b-10 fb f-s-16 contentTit">
|
||||
<div class="clearB m-b-15 fb f-s-16 contentTit">
|
||||
<i class="iconfont icon-youxishoubing f-s-22 m-r-5"></i>
|
||||
<span>飞机控制</span>
|
||||
</div>
|
||||
<div class="butIconBox">
|
||||
<el-button size="medium" type="primary" class="butIcon border"
|
||||
<div class="butIconBox gap10 flex">
|
||||
<el-button size="medium" type="primary" class="flex1 butIcon"
|
||||
@click="publishFun('{setPlaneState:{bit:3,state:1,count:2,param:[1,0]}}'); speakText('解锁飞机')">
|
||||
<i class="iconfont icon-jiesuo f-s-24"></i>
|
||||
<div class="m-t-5">解锁</div>
|
||||
</el-button>
|
||||
<el-button size="medium" type="primary" class="butIcon border"
|
||||
<el-button size="medium" type="primary" class="flex1 butIcon"
|
||||
@click="confirmation('飞机加锁，螺旋桨将停转，请谨慎操作！', '加锁操作', '{setPlaneState:{bit:3,state:0,count:2,param:[0,21196]}}'); speakText('加锁,请注意安全')">
|
||||
<i class=" iconfont icon-suoding f-s-24"></i>
|
||||
<div class="m-t-5">加锁</div>
|
||||
</el-button>
|
||||
<el-button size="medium" type="primary" class="butIcon border"
|
||||
<el-button size="medium" type="primary" class="flex1 butIcon"
|
||||
@click="dialogVisible = true; dialogTitle = '起飞高度(米)设置'; dialogItem = 'takeoffBox'; speakText('设置起飞高度')">
|
||||
<i class="iconfont icon-yangshi_icon_tongyong_departure f-s-24"></i>
|
||||
<div class="m-t-5">起飞</div>
|
||||
</el-button>
|
||||
<el-button size="medium" type="primary" class="butIcon border"
|
||||
<el-button size="medium" type="primary" class="flex1 butIcon"
|
||||
@click="publishFun('{setPlaneState:{bit:7,state:1}'); speakText('悬停')">
|
||||
<i class="iconfont icon-fengzheng1 f-s-24"></i>
|
||||
<div class="m-t-5">悬停</div>
|
||||
</el-button>
|
||||
<el-button size="medium" type="primary" class="butIcon border" @click="speakText('继续执行航线')">
|
||||
<el-button size="medium" type="primary" class="flex1 butIcon" @click="speakText('继续执行航线')">
|
||||
<i class="iconfont icon-duandianxufei f-s-24"></i>
|
||||
<div class="m-t-5">复航</div>
|
||||
</el-button>
|
||||
<el-button size="medium" type="primary" class="butIcon border"
|
||||
<el-button size="medium" type="primary" class="flex1 butIcon"
|
||||
@click="publishFun('{setPlaneState:{bit:9,state:1}'); speakText('返航')">
|
||||
<i class="iconfont icon-yijianfanhang f-s-24"></i>
|
||||
<div class="m-t-5">返航</div>
|
||||
</el-button>
|
||||
<el-button size="medium" type="primary" class="butIcon border"
|
||||
<el-button size="medium" type="primary" class="flex1 butIcon"
|
||||
@click="publishFun('{setPlaneState:{bit:5,state:1}'); speakText('降落')">
|
||||
<i class="iconfont icon-yangshi_icon_tongyong_arriving f-s-24"></i>
|
||||
<div class="m-t-5">降落</div>
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<!-- 附加模组操作 -->
|
||||
<template v-if="activeIndex === 2">
|
||||
<div v-else-if="activeIndex === 2" class="tabContentBox">
|
||||
<!-- 标题 -->
|
||||
<div class="clearB m-b-10 fb f-s-16 contentTit">
|
||||
<div class="clearB m-b-15 fb f-s-16 contentTit">
|
||||
<i class="iconfont icon-mianxingdiaogou f-s-22 m-r-5"></i>
|
||||
<span>挂载仓控制</span>
|
||||
</div>
|
||||
<div class="butIconBox">
|
||||
<el-button size="medium" type="primary" class="butIcon border"
|
||||
<div class="butIconBox m-b-15 gap10 flex">
|
||||
<el-button size="medium" type="primary" class="flex1 butIcon"
|
||||
@click="publishFun('{hookConteroller:4}'); speakText('重置重量传感器')">
|
||||
<i class="iconfont icon-zhongliang f-s-24"></i>
|
||||
<div class="m-t-5">归零</div>
|
||||
</el-button>
|
||||
<el-button size="medium" type="primary" class="butIcon border"
|
||||
<el-button size="medium" type="primary" class="flex1 butIcon"
|
||||
@click="publishFun('{hookConteroller:0}'); speakText('收钩')">
|
||||
<i class="iconfont icon-xiangshang f-s-24"></i>
|
||||
<div class="m-t-5">收钩</div>
|
||||
</el-button>
|
||||
<el-button size="medium" type="primary" class="butIcon border"
|
||||
<el-button size="medium" type="primary" class="flex1 butIcon"
|
||||
@click="publishFun('{hookConteroller:3}'); speakText('继续放钩')">
|
||||
<i class="iconfont icon-qiyong f-s-24"></i>
|
||||
<div class="m-t-5">继续</div>
|
||||
</el-button>
|
||||
<el-button size="medium" type="primary" class="butIcon border"
|
||||
<el-button size="medium" type="primary" class="flex1 butIcon"
|
||||
@click="publishFun('{hookConteroller:2}'); speakText('暂停放钩')">
|
||||
<i class="iconfont icon-xuanting-zanting f-s-24"></i>
|
||||
<div class="m-t-5">暂停</div>
|
||||
</el-button>
|
||||
</div>
|
||||
<!-- 标题 -->
|
||||
<div class="clearB m-b-10 fb f-s-16 contentTit">
|
||||
<div class="clearB m-b-15 fb f-s-16 contentTit">
|
||||
<i class="iconfont icon-shipinjiankong f-s-22 m-r-5"></i>
|
||||
<span>摄像头控制</span>
|
||||
</div>
|
||||
<div class="butIconBox">
|
||||
<el-button size="medium" type="primary" class="butIcon border"
|
||||
<div class="butIconBox m-b-15 gap10 flex">
|
||||
<el-button size="medium" type="primary" class="flex1 butIcon"
|
||||
@click="publishFun('{cameraController:{item:0,val:0}}'); speakText('摄像头一键回中')">
|
||||
<i class="iconfont icon-icon-rotation f-s-24"></i>
|
||||
<div class="m-t-5">回中</div>
|
||||
</el-button>
|
||||
<el-button size="medium" type="primary" class="butIcon border"
|
||||
<el-button size="medium" type="primary" class="flex1 butIcon"
|
||||
@click="publishFun('{cameraController:{item:2,val:0,yaw:0,pitch:-50}}'); speakText('摄像头一键俯瞰')">
|
||||
<i class="iconfont icon-down f-s-24"></i>
|
||||
<div class="m-t-5">俯瞰</div>
|
||||
</el-button>
|
||||
<el-button size="medium" type="primary" class="butIcon border"
|
||||
<el-button size="medium" type="primary" class="flex1 butIcon"
|
||||
@click="dialogVisible = true; dialogTitle = '摄像头控制'; dialogItem = 'cameraBox'; speakText('手动调整摄像头')">
|
||||
<i class="iconfont icon-chukong f-s-24"></i>
|
||||
<div class="m-t-5">手动</div>
|
||||
</el-button>
|
||||
<el-button size="medium" type="primary" class="butIcon border"
|
||||
<el-button size="medium" type="primary" class="flex1 butIcon"
|
||||
@click="dialogVisible = true; dialogTitle = '摄像头控制'; dialogItem = 'cameraBox'; speakText('调整镜头焦距')">
|
||||
<i class="iconfont icon-fangda f-s-24"></i>
|
||||
<div class="m-t-5">焦距</div>
|
||||
</el-button>
|
||||
</div>
|
||||
<!-- 标题 -->
|
||||
<div class="clearB m-b-10 fb f-s-16 contentTit">
|
||||
<div class="clearB m-b-15 fb f-s-16 contentTit">
|
||||
<i class="iconfont icon-tongzhi f-s-22 m-r-5"></i>
|
||||
<span>喇叭控制</span>
|
||||
</div>
|
||||
<div class="butIconBox">
|
||||
<el-button size="medium" type="primary" class="butIcon border">
|
||||
<div class="butIconBox gap10 flex">
|
||||
<el-button size="medium" type="primary" class="flex1 butIcon">
|
||||
<i class="iconfont icon-icon-test f-s-24"></i>
|
||||
<div class="m-t-5">喊话</div>
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<!-- 飞机调试 -->
|
||||
<template v-if="activeIndex === 3">
|
||||
<div v-else-if="activeIndex === 3" class="tabContentBox">
|
||||
<!-- 标题 -->
|
||||
<div class="clearB m-b-10 fb f-s-16 contentTit">
|
||||
<div class="clearB m-b-15 fb f-s-16 contentTit">
|
||||
<i class="iconfont icon-banshou_Line f-s-22 m-r-5"></i>
|
||||
<span>飞机调试</span>
|
||||
</div>
|
||||
<div class="butIconBox">
|
||||
<el-button size="medium" type="primary" class="butIcon border"
|
||||
<div class="butIconBox m-b-15 gap10 flex">
|
||||
<el-button size="medium" type="primary" class="flex1 butIcon"
|
||||
@click="publishFun('{bit:11,state:1}'); speakText('校准磁罗盘')">
|
||||
<i class="iconfont icon-zhinanzhen f-s-24"></i>
|
||||
<div class="m-t-5">磁罗盘</div>
|
||||
</el-button>
|
||||
<el-button size="medium" type="primary" class="butIcon border" @click="speakText('校准加速度计')">
|
||||
<el-button size="medium" type="primary" class="flex1 butIcon" @click="speakText('校准加速度计')">
|
||||
<i class="iconfont icon-zuobiaozhoupeizhixiang f-s-24"></i>
|
||||
<div class="m-t-5">加速度计</div>
|
||||
</el-button>
|
||||
<el-button size="medium" type="primary" class="butIcon border" @click="speakText('写入参数')">
|
||||
<el-button size="medium" type="primary" class="flex1 butIcon" @click="speakText('写入参数')">
|
||||
<i class="iconfont icon-canshupeizhi f-s-24"></i>
|
||||
<div class="m-t-5">写入参数</div>
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<!-- tab控件组 按钮组 -->
|
||||
<div class="flex gap10 m-b-10 taButGroup">
|
||||
<div class="flex1 h-100 taBut flex column mac mc" :class="activeIndex === index ? 'taButBG' : ''"
|
||||
v-for="(item, index) in controlItems" :key="index" @click="toggleContent(index, item.voice)">
|
||||
<i :class="item.icon" class="iconfont f-s-35 no-select"></i>
|
||||
<div class="m-t-15 fb f-s-18 no-select">{{ item.title }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -393,13 +395,13 @@ export default {
|
||||
if (this.tabIsOpen) {
|
||||
if (index !== this.activeIndex) {
|
||||
this.tabIsOpen = false
|
||||
this.$emit('mapXOffset', -200)
|
||||
this.$emit('mapXOffset', 0, -200)
|
||||
} else {
|
||||
this.speakText(voice)
|
||||
}
|
||||
} else {
|
||||
this.tabIsOpen = true
|
||||
this.$emit('mapXOffset', 200)
|
||||
this.$emit('mapXOffset', 0, 200)
|
||||
this.speakText(voice)
|
||||
}
|
||||
},
|
||||
@ -782,114 +784,91 @@ export default {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.tab-container {
|
||||
height: 365px;
|
||||
width: 80px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
position: fixed;
|
||||
right: 15px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
z-index: 1000;
|
||||
.mainBox {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.butIconGroup {
|
||||
color: $maintext-color;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
border-radius: 15px;
|
||||
padding: 5px;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
border: none;
|
||||
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.butIconGroupBG {
|
||||
color: $graylight-color;
|
||||
background-color: $brand-color;
|
||||
}
|
||||
|
||||
.butIconGroup:last-of-type {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.slider-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
/* 水平垂直居中 */
|
||||
}
|
||||
|
||||
.content {
|
||||
color: $maintext-color;
|
||||
border-radius: 15px;
|
||||
.tabContainer {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
right: -400px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 350px;
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
padding: 20px;
|
||||
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.2);
|
||||
transition: right 0.3s ease;
|
||||
}
|
||||
|
||||
.content.active {
|
||||
right: 95px;
|
||||
.tabContent {
|
||||
z-index: 90;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
border-radius: 10px;
|
||||
max-width: 470px;
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.2);
|
||||
top: -50px;
|
||||
opacity: 0;
|
||||
transition: top 0.5s ease, opacity 1s ease;
|
||||
}
|
||||
|
||||
.tabContent.active {
|
||||
top: -10px;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.tabContentBox {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.contentTit i {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.butIconBox {
|
||||
flex-wrap: wrap;
|
||||
/* 允许换行 */
|
||||
justify-content: flex-start;
|
||||
/* 主轴对齐方式 */
|
||||
align-content: space-around;
|
||||
/* 多行在侧轴上的对齐方式 */
|
||||
}
|
||||
|
||||
.butIcon {
|
||||
border-radius: 10px;
|
||||
padding: 5px;
|
||||
width: 66px;
|
||||
height: 66px;
|
||||
text-align: center;
|
||||
border: none;
|
||||
float: left;
|
||||
margin: 0px !important;
|
||||
margin-bottom: 15px !important;
|
||||
margin-right: 15px !important;
|
||||
margin-left: 0px !important;
|
||||
}
|
||||
|
||||
.butIconBox .butIcon:nth-child(4n) {
|
||||
margin-right: 0 !important;
|
||||
.taButGroup {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: 470px;
|
||||
height: 105px;
|
||||
cursor: pointer;
|
||||
z-index: 90;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.taButGroup {
|
||||
height: calc((100vw - 50px)/4);
|
||||
}
|
||||
|
||||
/* 手机端样式 */
|
||||
@media screen and (max-height: 500px) {
|
||||
.tab-container {
|
||||
height: 300px;
|
||||
width: 50px;
|
||||
width: 100vw;
|
||||
}
|
||||
}
|
||||
|
||||
.butIconGroup {
|
||||
margin-bottom: 12px;
|
||||
.taBut {
|
||||
color: $maintext-color;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
border-radius: 10px;
|
||||
padding: 5px;
|
||||
text-align: center;
|
||||
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.el-button {
|
||||
font-size: 14px !important;
|
||||
.taButBG {
|
||||
color: $graylight-color;
|
||||
background-color: $brand-color;
|
||||
}
|
||||
|
||||
.contentTit {
|
||||
font-size: 14px !important;
|
||||
margin-bottom: 5px !important;
|
||||
}
|
||||
|
||||
.contentTit i {
|
||||
font-size: 18px !important;
|
||||
}
|
||||
|
||||
.butIcon {
|
||||
height: 56px;
|
||||
margin-bottom: 10px !important;
|
||||
}
|
||||
.gap10 {
|
||||
gap: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -154,8 +154,20 @@ export default {
|
||||
projection: 'globe'
|
||||
})
|
||||
// 地图控件
|
||||
this.map.addControl(new mapboxgl.ScaleControl(), 'top-right')
|
||||
this.map.addControl(new mapboxgl.NavigationControl(), 'bottom-left')
|
||||
this.map.addControl(new mapboxgl.NavigationControl(), 'top-right')// 移动旋转指南针
|
||||
// this.map.addControl(new mapboxgl.ScaleControl(), 'top-right')// 地图比例
|
||||
this.map.addControl(new mapboxgl.FullscreenControl(), 'top-right')// 全屏
|
||||
this.map.addControl(
|
||||
new mapboxgl.GeolocateControl({
|
||||
positionOptions: {
|
||||
enableHighAccuracy: true
|
||||
},
|
||||
// When active the map will receive updates to the device's location as it changes.
|
||||
trackUserLocation: true,
|
||||
// Draw an arrow next to the location dot to indicate which direction the device is heading.
|
||||
showUserHeading: true
|
||||
})
|
||||
)// 跟随
|
||||
},
|
||||
/**
|
||||
* @description: 清除地图上的航线
|
||||
@ -486,11 +498,12 @@ export default {
|
||||
})
|
||||
},
|
||||
/**
|
||||
* @description: 屏幕横移
|
||||
* @param {*} val 正数向左移动 负数向右移动
|
||||
* @description: 屏幕横移 纵移
|
||||
* @param {*} x 正数向左移动 负数向右移动
|
||||
* @param {*} y 正数向上移动 负数向下移动
|
||||
*/
|
||||
mapXOffset (val) {
|
||||
this.map.panBy([val, 0], {
|
||||
mapXOffset (x, y) {
|
||||
this.map.panBy([x, y], {
|
||||
duration: 333 // 过渡持续时间，以毫秒为单位
|
||||
})
|
||||
}
|
||||
@ -503,6 +516,7 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
103
src/components/PlaneStatus copy.vue
Normal file
103
src/components/PlaneStatus copy.vue
Normal file
@ -0,0 +1,103 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-row class="m-15" type="flex" justify="space-between">
|
||||
<el-col :span="2">
|
||||
<PublicTag icon="icon-weixing" :val="plane.planeState.satCount" unit="颗" state="normal" />
|
||||
</el-col>
|
||||
<el-col :span="2">
|
||||
<PublicTag icon="icon-weixing" :val="plane.planeState.voltagBattery" unit="V" state="normal" />
|
||||
</el-col>
|
||||
<el-col :span="2">
|
||||
<PublicTag icon="icon-weixing" :val="plane.planeState.loadweight" unit="克" state="normal" />
|
||||
</el-col>
|
||||
<el-col :span="2">
|
||||
<PublicTag icon="icon-gaodu" :val="plane.planeState.state" unit="状" state="normal" />
|
||||
</el-col>
|
||||
<el-col :span="3">
|
||||
<HeartTag :heartBeat="plane.planeState.heartBeat" :heartRandom="plane.planeState.heartRandom"
|
||||
:getPlaneMode="plane.planeState.getPlaneMode" />
|
||||
</el-col>
|
||||
<el-col :span="2">
|
||||
<PublicTag icon="icon-mianxingdiaogou" :val="plane.planeState.hookstatus" unit="" state="normal" />
|
||||
</el-col>
|
||||
<el-col :span="2">
|
||||
<PublicTag icon="icon-gaodu" :val="plane.planeState.positionAlt" unit="米" state="normal" />
|
||||
</el-col>
|
||||
<el-col :span="2">
|
||||
<PublicTag icon="icon-gaodu" :val="plane.planeState.currentBattery" unit="安" state="danger" />
|
||||
</el-col>
|
||||
<el-col :span="2">
|
||||
<PublicTag icon="icon-gaodu" :val="plane.planeState.battCapacity" unit="%" state="danger" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="batteryBox">
|
||||
<!-- <el-progress :percentage="plane.planeState.batteryRemaining" :show-text="false" stroke-width="2"></el-progress>
|
||||
<tooltip :horizontalPosition="'80%'" backgroundColor="#ff3333">
|
||||
H
|
||||
</tooltip> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import HeartTag from '@/components/Tag/HeartTag'
|
||||
import PublicTag from '@/components/Tag/PublicTag'
|
||||
// import Tooltip from '@/components/Tag/Tooltip'
|
||||
import geodist from 'geodist'
|
||||
|
||||
export default {
|
||||
name: 'PlaneStatus',
|
||||
data () {
|
||||
return {
|
||||
distance: 0
|
||||
}
|
||||
},
|
||||
props: {
|
||||
plane: {
|
||||
typeof: 'Object',
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
components: {
|
||||
HeartTag,
|
||||
PublicTag
|
||||
// Tooltip
|
||||
},
|
||||
computed: {
|
||||
},
|
||||
watch: {
|
||||
distance (val) {
|
||||
console.log(val + '米')
|
||||
}
|
||||
},
|
||||
methods: {},
|
||||
created () {
|
||||
try {
|
||||
const point1 = { lat: 52.518611, lon: 13.408056 }
|
||||
const point2 = { lat: 51.507222, lon: -0.1275 }
|
||||
this.distance = geodist(point1, point2, { unit: 'meters' })
|
||||
} catch (error) {
|
||||
console.error('Error calculating distance:', error)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/styles/theme.scss";
|
||||
|
||||
.el-row {
|
||||
z-index: 90;
|
||||
}
|
||||
|
||||
.batteryBox {}
|
||||
|
||||
.batteryBox .el-progress {
|
||||
z-index: 90;
|
||||
}
|
||||
|
||||
.batteryBox .el-tooltip {
|
||||
z-index: 90;
|
||||
}
|
||||
</style>
|
||||
@ -1,56 +1,29 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-row class="m-15" type="flex" justify="space-between">
|
||||
<el-col :span="2">
|
||||
<PublicTag icon="icon-weixing" :val="plane.planeState.satCount" unit="颗" state="normal" />
|
||||
</el-col>
|
||||
<el-col :span="2">
|
||||
<PublicTag icon="icon-weixing" :val="plane.planeState.voltagBattery" unit="V" state="normal" />
|
||||
</el-col>
|
||||
<el-col :span="2">
|
||||
<PublicTag icon="icon-weixing" :val="plane.planeState.loadweight" unit="克" state="normal" />
|
||||
</el-col>
|
||||
<el-col :span="2">
|
||||
<PublicTag icon="icon-gaodu" :val="plane.planeState.state" unit="状" state="normal" />
|
||||
</el-col>
|
||||
<el-col :span="3">
|
||||
<HeartTag :heartBeat="plane.planeState.heartBeat" :heartRandom="plane.planeState.heartRandom"
|
||||
:getPlaneMode="plane.planeState.getPlaneMode" />
|
||||
</el-col>
|
||||
<el-col :span="2">
|
||||
<PublicTag icon="icon-mianxingdiaogou" :val="plane.planeState.hookstatus" unit="" state="normal" />
|
||||
</el-col>
|
||||
<el-col :span="2">
|
||||
<PublicTag icon="icon-gaodu" :val="plane.planeState.positionAlt" unit="米" state="normal" />
|
||||
</el-col>
|
||||
<el-col :span="2">
|
||||
<PublicTag icon="icon-gaodu" :val="plane.planeState.currentBattery" unit="安" state="danger" />
|
||||
</el-col>
|
||||
<el-col :span="2">
|
||||
<PublicTag icon="icon-gaodu" :val="plane.planeState.battCapacity" unit="%" state="danger" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="batteryBox">
|
||||
<!-- <el-progress :percentage="plane.planeState.batteryRemaining" :show-text="false" stroke-width="2"></el-progress>
|
||||
<tooltip :horizontalPosition="'80%'" backgroundColor="#ff3333">
|
||||
H
|
||||
</tooltip> -->
|
||||
<div class="mainBox flex column ofh">
|
||||
<!-- 心跳 -->
|
||||
<div class="tag flex mac mc">
|
||||
<div :class="online ? heartAnimation ? 'icon-heart online' : 'icon-heart1 online' : 'icon-xinsui offline'"
|
||||
class="iconfont f-s-24"></div>
|
||||
</div>
|
||||
<!-- 卫星 -->
|
||||
<div class="tag flex mac">
|
||||
<div class="iconfont icon-weixing f-s-24"></div>
|
||||
<div>{{ satCount }}颗</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import HeartTag from '@/components/Tag/HeartTag'
|
||||
import PublicTag from '@/components/Tag/PublicTag'
|
||||
// import Tooltip from '@/components/Tag/Tooltip'
|
||||
import geodist from 'geodist'
|
||||
|
||||
export default {
|
||||
name: 'PlaneStatus',
|
||||
data () {
|
||||
return {
|
||||
distance: 0
|
||||
/* 心跳 */
|
||||
heartAnimation: false, // 控制心跳动画图标
|
||||
online: false,
|
||||
isOnlineSetTimeout: null
|
||||
}
|
||||
},
|
||||
props: {
|
||||
@ -60,26 +33,45 @@ export default {
|
||||
}
|
||||
},
|
||||
components: {
|
||||
HeartTag,
|
||||
PublicTag
|
||||
// Tooltip
|
||||
},
|
||||
computed: {
|
||||
// 心跳随机数
|
||||
heartRandom () {
|
||||
if (this.plane && this.plane.planeState) {
|
||||
return this.plane.planeState.heartRandom
|
||||
}
|
||||
return 0
|
||||
},
|
||||
// 卫星数
|
||||
satCount () {
|
||||
if (this.plane && this.plane.planeState) {
|
||||
return this.plane.planeState.satCount
|
||||
}
|
||||
return 0
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
distance (val) {
|
||||
console.log(val + '米')
|
||||
heartRandom: {
|
||||
handler (val) {
|
||||
// 心跳动画
|
||||
this.heartAnimation = true
|
||||
setTimeout(() => {
|
||||
this.heartAnimation = false
|
||||
}, 500)
|
||||
// 在线状态
|
||||
if (this.isOnlineSetTimeout) { // 进入本次心跳 删除掉线计时 既以下会重新计时
|
||||
clearInterval(this.isOnlineSetTimeout)
|
||||
}
|
||||
this.online = true
|
||||
this.isOnlineSetTimeout = setTimeout(() => { // 计时10秒后 掉线
|
||||
this.online = false
|
||||
}, 10000)
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {},
|
||||
created () {
|
||||
try {
|
||||
const point1 = { lat: 52.518611, lon: 13.408056 }
|
||||
const point2 = { lat: 51.507222, lon: -0.1275 }
|
||||
this.distance = geodist(point1, point2, { unit: 'meters' })
|
||||
} catch (error) {
|
||||
console.error('Error calculating distance:', error)
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -87,17 +79,23 @@ export default {
|
||||
<style lang="scss" scoped>
|
||||
@import "@/styles/theme.scss";
|
||||
|
||||
.el-row {
|
||||
.mainBox {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
left: 12px;
|
||||
z-index: 90;
|
||||
background-color: white;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.batteryBox {}
|
||||
|
||||
.batteryBox .el-progress {
|
||||
z-index: 90;
|
||||
}
|
||||
|
||||
.batteryBox .el-tooltip {
|
||||
z-index: 90;
|
||||
.tag {
|
||||
height: 29px;
|
||||
min-width: 29px;
|
||||
background-color: white;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
|
||||
cursor: pointer;
|
||||
border: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -65,6 +65,9 @@ label {
|
||||
.disno{
|
||||
display: none;
|
||||
}
|
||||
.z90{
|
||||
z-index: 90;
|
||||
}
|
||||
|
||||
.animation {
|
||||
-webkit-transition: all 0.2s ease;
|
||||
@ -84,6 +87,26 @@ label {
|
||||
.el-button {
|
||||
font-size: 16px !important;
|
||||
}
|
||||
/*抽屉样式 默认上侧加圆角*/
|
||||
.el-drawer {
|
||||
border-top-left-radius: 10px;
|
||||
border-top-right-radius: 10px;
|
||||
}
|
||||
/* 抽屉样式 大于480px时的圆角样式 */
|
||||
.el-drawer-large {
|
||||
border-top-left-radius: 10px !important;
|
||||
border-bottom-left-radius: 10px !important;
|
||||
border-top-right-radius: 0px !important;
|
||||
border-bottom-right-radius: 0px !important;
|
||||
}
|
||||
|
||||
/*抽屉样式 小于480px时的圆角样式 */
|
||||
.el-drawer-small {
|
||||
border-top-left-radius: 10px !important;
|
||||
border-top-right-radius: 10px !important;
|
||||
border-bottom-left-radius: 0px !important;
|
||||
border-bottom-right-radius: 0px !important;
|
||||
}
|
||||
|
||||
//mapboxgl
|
||||
.mapboxgl-ctrl-bottom-left a {
|
||||
|
||||
@ -2,10 +2,10 @@
|
||||
<div class="fixed-bottom p-l-5" :class="maxWidth">
|
||||
<el-button @click="handleOpenBlog" class="l p-3" type="text" size="mini" icon="iconfont icon-chuangkoufangda"
|
||||
circle></el-button>
|
||||
<div class="l p-l-10" v-if="newLog">
|
||||
<div class="l p-l-10 flex" v-if="newLog">
|
||||
<span class="l m-t-5 m-r-5 logDot" :style="{ background: newLog.color }"></span>
|
||||
<span>{{ newLog.timestamp | parseTime('{h}:{i}:{s}') }}</span>
|
||||
<span class="m-l-10">{{ newLog.content }}</span>
|
||||
<span class="content m-l-10">{{ newLog.content }}</span>
|
||||
</div>
|
||||
<el-drawer :modal-append-to-body="false" :visible.sync="drawer" direction="btt" size="50%">
|
||||
<template slot="title">
|
||||
@ -99,4 +99,15 @@ export default {
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.timestamp,
|
||||
.content {
|
||||
display: inline-block;
|
||||
/* 确保元素可以应用宽度 */
|
||||
max-width: 60vw;
|
||||
/* 根据需要设置宽度 */
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -32,8 +32,9 @@
|
||||
<el-button :type="pendingCount + processingCount + shippedCount + requestedCount !== 0 ? 'primary' : ''"
|
||||
@click="drawer = true" size="small" :icon="orderIcon" circle></el-button>
|
||||
</el-badge>
|
||||
<el-drawer :visible.sync="drawer" :size="drawerSize" :append-to-body="true" :modal-append-to-body="false"
|
||||
:direction="drawerDirection">
|
||||
<el-drawer :custom-class="drawerAuto ? 'el-drawer-small' : 'el-drawer-large'" :visible.sync="drawer"
|
||||
:size="drawerAuto ? '90%' : '60%'" :append-to-body="true" :modal-append-to-body="false"
|
||||
:direction="drawerAuto ? 'btt' : 'rtl'">
|
||||
<template slot="title">
|
||||
<div>
|
||||
<i class="l f-s-18 iconfont icon-jinjidingdan m-r-5 l-h-18"></i>
|
||||
@ -112,16 +113,10 @@ export default {
|
||||
},
|
||||
computed: {
|
||||
/**
|
||||
* @description: 任务抽屉根据分辨率自适应
|
||||
* @description: 屏幕宽度是否小于480
|
||||
*/
|
||||
drawerDirection () {
|
||||
return window.innerWidth < 480 ? 'btt' : 'rtl'
|
||||
},
|
||||
/**
|
||||
* @description: 任务抽屉根据分辨率自适应
|
||||
*/
|
||||
drawerSize () {
|
||||
return window.innerWidth < 480 ? '90%' : '60%' // 根据需要设置不同的宽度
|
||||
drawerAuto () {
|
||||
return window.innerWidth < 480
|
||||
},
|
||||
/**
|
||||
* @description: 侧边栏显隐
|
||||
|
||||
@ -2,9 +2,15 @@
|
||||
<div class="h-100">
|
||||
<map-box ref="mapbox" :key="mapBoxKey">
|
||||
<template #content>
|
||||
<<<<<<< HEAD
|
||||
<!-- <PlaneStatus :plane="plane" /> -->
|
||||
<As style="position:absolute;" />
|
||||
<!-- <ControllerTabs :plane="plane" @mapXOffset="mapXOffset" @makeRoute="makeRoute" @clearRoute="clearRoute" /> -->
|
||||
=======
|
||||
<BatteryStatus :plane="plane" />
|
||||
<PlaneStatus :plane="plane" />
|
||||
<ControllerTabs :plane="plane" @mapXOffset="mapXOffset" @makeRoute="makeRoute" @clearRoute="clearRoute" />
|
||||
>>>>>>> c4f06be21d8dfc2a3299a8751200d08811bb8d9a
|
||||
</template>
|
||||
</map-box>
|
||||
</div>
|
||||
@ -13,9 +19,9 @@
|
||||
<script>
|
||||
import mqtt from '@/utils/mqtt'
|
||||
import MapBox from '@/components/MapBox'
|
||||
// import ControllerTabs from '@/components/ControllerTabs'
|
||||
import As from '@/components/As'
|
||||
// import PlaneStatus from '@/components/PlaneStatus'
|
||||
import ControllerTabs from '@/components/ControllerTabs'
|
||||
import BatteryStatus from '@/components/BatteryStatus'
|
||||
import PlaneStatus from '@/components/PlaneStatus'
|
||||
|
||||
export default {
|
||||
name: 'Planes',
|
||||
@ -28,9 +34,9 @@ export default {
|
||||
},
|
||||
components: {
|
||||
MapBox,
|
||||
As
|
||||
// ControllerTabs,
|
||||
// PlaneStatus
|
||||
ControllerTabs,
|
||||
BatteryStatus,
|
||||
PlaneStatus
|
||||
},
|
||||
computed: {
|
||||
plane () {
|
||||
@ -90,9 +96,10 @@ export default {
|
||||
/**
|
||||
* @description: 屏幕横移
|
||||
* @param {*} val 正数向左移动 负数向右移动
|
||||
* @param {*} y 正数向上移动 负数向下移动
|
||||
*/
|
||||
mapXOffset (val) {
|
||||
this.$refs.mapbox.mapXOffset(val)
|
||||
mapXOffset (x, y) {
|
||||
this.$refs.mapbox.mapXOffset(x, y)
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
@ -104,8 +111,7 @@ export default {
|
||||
plane: {
|
||||
handler (val) {
|
||||
this.makePlane(val)// 有飞机数据之后 在地图上创建飞机
|
||||
if (val.planeState.battCapacity === null) {
|
||||
console.log(val.planeState.battCapacity)
|
||||
if (!val.planeState.battCapacity) {
|
||||
mqtt.publishFun(`cmd/${this.plane.macadd}`, '{"getBattCapacity":1}')// 发送设置飞机状态主题 请求飞控返回 电池总容量
|
||||
}
|
||||
},
|
||||
|
||||
Loading…
Reference in New Issue
Block a user