|
|
|
@ -1,37 +1,309 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div style="margin-bottom: 10px;">
|
|
|
|
|
<div style="display: flex;align-items: center;">
|
|
|
|
|
<span style="margin-right: 10px;">远程调试</span>
|
|
|
|
|
<div class="open-control-div">
|
|
|
|
|
<div class="control-content">
|
|
|
|
|
<span class="open-title">远程调试</span>
|
|
|
|
|
<a-switch :checked="props.deviceInfoList[props.controlSN].mode_code == 2" @change="openDebug"/>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="margin-bottom: 10px;">机场控制</div>
|
|
|
|
|
<div style="margin-bottom: 20px;">
|
|
|
|
|
<div style="width: 252px;height: 58px;background-color: #f7f9fa;padding-left: 8px;padding-right: 8px;display: flex;justify-content: space-between;">
|
|
|
|
|
<div style="display: flex;align-items: center;">
|
|
|
|
|
<div :style="`width: 21px;height: 21px;background-color: ${props.deviceInfoList[props.controlSN].cover_state == 1? 'green': 'red'};margin-right: 8px;`"></div>
|
|
|
|
|
<div class="setting-control-title">机场控制</div>
|
|
|
|
|
<div class="setting-control-list">
|
|
|
|
|
<div class="control-item">
|
|
|
|
|
<div class="info-div">
|
|
|
|
|
<div class="icon">
|
|
|
|
|
<Icon icon="tabler:drone" style="font-size: 21px;"/>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<div class="show-span">
|
|
|
|
|
{{
|
|
|
|
|
modeCodeOptions[props.deviceInfoList[props.controlSN].mode_code]
|
|
|
|
|
}}
|
|
|
|
|
</div>
|
|
|
|
|
<div class="show-span">机场系统</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="button-div">
|
|
|
|
|
<a-button class="control-button" @click="changeState('device_reboot')" :disabled="props.deviceInfoList[props.controlSN].mode_code != 2">重启</a-button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="control-item">
|
|
|
|
|
<div class="info-div">
|
|
|
|
|
<div class="icon">
|
|
|
|
|
<Icon icon="tabler:capture" style="font-size: 21px;"/>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<div class="show-span">
|
|
|
|
|
{{
|
|
|
|
|
getCoverState(props.deviceInfoList[props.controlSN].cover_state)
|
|
|
|
|
}}
|
|
|
|
|
</div>
|
|
|
|
|
<div class="show-span">舱盖</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="button-div">
|
|
|
|
|
<a-button
|
|
|
|
|
class="control-button"
|
|
|
|
|
@click="changeState(props.deviceInfoList[props.controlSN].cover_state == 0? 'cover_open': 'cover_close')"
|
|
|
|
|
:disabled="props.deviceInfoList[props.controlSN].mode_code != 2">
|
|
|
|
|
{{props.deviceInfoList[props.controlSN].cover_state == 0? '打开': '关闭'}}
|
|
|
|
|
</a-button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="control-item">
|
|
|
|
|
<div class="info-div">
|
|
|
|
|
<div class="icon">
|
|
|
|
|
<Icon icon="streamline:travel-hotel-air-conditioner-heating-ac-air-hvac-cool-cooling-cold-hot-conditioning" style="font-size: 21px;"/>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<div class="show-span">
|
|
|
|
|
{{
|
|
|
|
|
props.deviceInfoList[props.controlSN].air_conditioner && airConditionerStateOptions[props.deviceInfoList[props.controlSN].air_conditioner.air_conditioner_state]
|
|
|
|
|
}}
|
|
|
|
|
</div>
|
|
|
|
|
<div class="show-span">空调</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="button-div">
|
|
|
|
|
<a-button
|
|
|
|
|
v-if="props.deviceInfoList[props.controlSN]?.air_conditioner.air_conditioner_state != 0"
|
|
|
|
|
class="control-button"
|
|
|
|
|
@click="changeState('air_conditioner_mode_switch',0)"
|
|
|
|
|
:disabled="props.deviceInfoList[props.controlSN].mode_code != 2">
|
|
|
|
|
停止
|
|
|
|
|
</a-button>
|
|
|
|
|
<a-dropdown v-else placement="bottom">
|
|
|
|
|
<a-button class="control-button">开启</a-button>
|
|
|
|
|
<template #overlay>
|
|
|
|
|
<a-menu>
|
|
|
|
|
<a-menu-item @click="changeState('air_conditioner_mode_switch',1)">制冷</a-menu-item>
|
|
|
|
|
<a-menu-item @click="changeState('air_conditioner_mode_switch',2)">制热</a-menu-item>
|
|
|
|
|
<a-menu-item @click="changeState('air_conditioner_mode_switch',3)">除湿</a-menu-item>
|
|
|
|
|
</a-menu>
|
|
|
|
|
</template>
|
|
|
|
|
</a-dropdown>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="control-item">
|
|
|
|
|
<div class="info-div">
|
|
|
|
|
<div class="icon">
|
|
|
|
|
<Icon icon="material-symbols:volume-off" style="font-size: 21px;"/>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<div style="line-height: 22px;">{{getCoverState(props.deviceInfoList[props.controlSN].cover_state)}}</div>
|
|
|
|
|
<div style="line-height: 22px;">舱盖</div>
|
|
|
|
|
<div class="show-span">
|
|
|
|
|
{{
|
|
|
|
|
silentModeOptions[props.deviceInfoList[props.controlSN].silent_mode]
|
|
|
|
|
}}
|
|
|
|
|
</div>
|
|
|
|
|
<div class="show-span">静音模式</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="display: flex;align-items: center;">
|
|
|
|
|
<a-button style="width: 70px;height: 30px;" @click="openCoverState" :disabled="props.deviceInfoList[props.controlSN].mode_code != 2">{{props.deviceInfoList[props.controlSN].cover_state == 0? '打开': '关闭'}}</a-button>
|
|
|
|
|
<div class="button-div">
|
|
|
|
|
<a-button
|
|
|
|
|
class="control-button"
|
|
|
|
|
@click=""
|
|
|
|
|
:disabled="props.deviceInfoList[props.controlSN].mode_code != 2">
|
|
|
|
|
{{props.deviceInfoList[props.controlSN].silent_mode == 0? '开启': '关闭'}}
|
|
|
|
|
</a-button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="control-item">
|
|
|
|
|
<div class="info-div">
|
|
|
|
|
<div class="icon">
|
|
|
|
|
<Icon icon="mdi:alarm-light-outline" style="font-size: 21px;"/>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<div class="show-span">
|
|
|
|
|
{{
|
|
|
|
|
alarmStateOptions[props.deviceInfoList[props.controlSN].alarm_state]
|
|
|
|
|
}}
|
|
|
|
|
</div>
|
|
|
|
|
<div class="show-span">机场声光报警</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="button-div">
|
|
|
|
|
<a-button
|
|
|
|
|
class="control-button"
|
|
|
|
|
@click="changeState('alarm_state_switch',props.deviceInfoList[props.controlSN].alarm_state == 0? 1: 0)"
|
|
|
|
|
:disabled="props.deviceInfoList[props.controlSN].mode_code != 2">
|
|
|
|
|
{{props.deviceInfoList[props.controlSN].alarm_state == 0? '开启': '关闭'}}
|
|
|
|
|
</a-button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="control-item">
|
|
|
|
|
<div class="info-div">
|
|
|
|
|
<div class="icon">
|
|
|
|
|
<Icon icon="icon-park-twotone:storage-card-two" style="font-size: 21px;"/>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<div class="show-span">
|
|
|
|
|
{{
|
|
|
|
|
props.deviceInfoList[props.controlSN].storage &&
|
|
|
|
|
`${(props.deviceInfoList[props.controlSN].storage.used / 1000 / 1024).toFixed(1)}/${(props.deviceInfoList[props.controlSN].storage.total / 1000 / 1024).toFixed(1)}GB`
|
|
|
|
|
}}
|
|
|
|
|
</div>
|
|
|
|
|
<div class="show-span">机场存储</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="button-div">
|
|
|
|
|
<a-button
|
|
|
|
|
class="control-button"
|
|
|
|
|
@click="changeState('device_format')"
|
|
|
|
|
:disabled="props.deviceInfoList[props.controlSN].mode_code != 2">
|
|
|
|
|
格式化
|
|
|
|
|
</a-button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="control-item">
|
|
|
|
|
<div class="info-div">
|
|
|
|
|
<div class="icon">
|
|
|
|
|
<Icon icon="icon-park-outline:storage-card-one" style="font-size: 21px;"/>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<div class="show-span">--</div>
|
|
|
|
|
<div class="show-span">机场增强图传</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="button-div">
|
|
|
|
|
<a-button
|
|
|
|
|
class="control-button"
|
|
|
|
|
@click=""
|
|
|
|
|
:disabled="props.deviceInfoList[props.controlSN].mode_code != 2">
|
|
|
|
|
设置
|
|
|
|
|
</a-button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="control-item">
|
|
|
|
|
<div class="info-div">
|
|
|
|
|
<div class="icon">
|
|
|
|
|
<Icon icon="carbon:certificate-check" style="font-size: 21px;"/>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<div class="show-span">解禁证书</div>
|
|
|
|
|
<div class="show-span">限飞解禁证书</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="button-div">
|
|
|
|
|
<a-button
|
|
|
|
|
class="control-button"
|
|
|
|
|
@click=""
|
|
|
|
|
:disabled="props.deviceInfoList[props.controlSN].mode_code != 2">
|
|
|
|
|
设置
|
|
|
|
|
</a-button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="margin-bottom: 10px;">飞行器控制</div>
|
|
|
|
|
<div>
|
|
|
|
|
<div style="width: 252px;height: 58px;background-color: #f7f9fa;padding-left: 8px;padding-right: 8px;display: flex;justify-content: space-between;">
|
|
|
|
|
<div style="display: flex;align-items: center;">
|
|
|
|
|
<div :style="`width: 21px;height: 21px;background-color: ${props.deviceInfoList[props.controlSN].sub_device.device_online_status == 1? 'green': 'red'};margin-right: 8px;`"></div>
|
|
|
|
|
<div class="setting-control-title">飞行器控制</div>
|
|
|
|
|
<div class="setting-control-list">
|
|
|
|
|
<div class="control-item">
|
|
|
|
|
<div class="info-div">
|
|
|
|
|
<div class="icon">
|
|
|
|
|
<Icon icon="material-symbols:power-settings-new" style="font-size: 21px;"/>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<div class="show-span">
|
|
|
|
|
{{
|
|
|
|
|
deviceOnlineStatusOptions[props.deviceInfoList[props.controlSN].sub_device.device_online_status]
|
|
|
|
|
}}
|
|
|
|
|
</div>
|
|
|
|
|
<div class="show-span">飞行器电源</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="button-div">
|
|
|
|
|
<a-button
|
|
|
|
|
class="control-button"
|
|
|
|
|
@click="changeDeviceState(props.deviceInfoList[props.controlSN].sub_device.device_online_status == 0? 'drone_open': 'drone_close')"
|
|
|
|
|
:disabled="props.deviceInfoList[props.controlSN].mode_code != 2">
|
|
|
|
|
{{props.deviceInfoList[props.controlSN].sub_device.device_online_status == 0? '开机': '关机'}}
|
|
|
|
|
</a-button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="control-item">
|
|
|
|
|
<div class="info-div">
|
|
|
|
|
<div class="icon">
|
|
|
|
|
<Icon icon="mdi:battery-high" style="font-size: 21px;"/>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<div class="show-span">
|
|
|
|
|
{{
|
|
|
|
|
droneChargeStateOptions[props.deviceInfoList[props.controlSN].drone_charge_state.state]
|
|
|
|
|
}}
|
|
|
|
|
</div>
|
|
|
|
|
<div class="show-span">飞行器充电</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="button-div">
|
|
|
|
|
<a-button
|
|
|
|
|
class="control-button"
|
|
|
|
|
@click="changeDeviceState(props.deviceInfoList[props.controlSN].drone_charge_state.state == 0? 'charge_open': 'charge_close')"
|
|
|
|
|
:disabled="props.deviceInfoList[props.controlSN].mode_code != 2">
|
|
|
|
|
{{props.deviceInfoList[props.controlSN].drone_charge_state.state == 0? '充电': '停止'}}
|
|
|
|
|
</a-button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="control-item">
|
|
|
|
|
<div class="info-div">
|
|
|
|
|
<div class="icon">
|
|
|
|
|
<Icon icon="mdi:signal-4g" style="font-size: 21px;"/>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<div class="show-span">
|
|
|
|
|
{{
|
|
|
|
|
fourgLinkStateOptions[props.deviceInfoList[props.controlSN].wireless_link["4g_link_state"]]
|
|
|
|
|
}}
|
|
|
|
|
</div>
|
|
|
|
|
<div class="show-span">增强图传</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="button-div">
|
|
|
|
|
<a-button
|
|
|
|
|
class="control-button"
|
|
|
|
|
@click="changeDeviceState('sdr_workmode_switch',props.deviceInfoList[props.controlSN].wireless_link['4g_link_state'] == 0? 1: 0, 'link_workmode')"
|
|
|
|
|
:disabled="props.deviceInfoList[props.controlSN].mode_code != 2">
|
|
|
|
|
{{props.deviceInfoList[props.controlSN].wireless_link["4g_link_state"] == 0? '开启': '关闭'}}
|
|
|
|
|
</a-button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="control-item">
|
|
|
|
|
<div class="info-div">
|
|
|
|
|
<div class="icon">
|
|
|
|
|
<Icon icon="icon-park-twotone:storage-card-two" style="font-size: 21px;"/>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<div class="show-span">
|
|
|
|
|
--
|
|
|
|
|
</div>
|
|
|
|
|
<div class="show-span">飞行器存储</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="button-div">
|
|
|
|
|
<a-button
|
|
|
|
|
class="control-button"
|
|
|
|
|
@click="changeDeviceState('drone_format')"
|
|
|
|
|
:disabled="props.deviceInfoList[props.controlSN].mode_code != 2">
|
|
|
|
|
格式化
|
|
|
|
|
</a-button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="control-item">
|
|
|
|
|
<div class="info-div">
|
|
|
|
|
<div class="icon">
|
|
|
|
|
<Icon icon="ph:sim-card-duotone" style="font-size: 21px;"/>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<div style="line-height: 22px;">{{props.deviceInfoList[props.controlSN].sub_device.device_online_status == 0? "关机": "开机"}}</div>
|
|
|
|
|
<div style="line-height: 22px;">飞行器电源</div>
|
|
|
|
|
<div class="show-span">
|
|
|
|
|
{{
|
|
|
|
|
linkWorkmodeOptions[props.deviceInfoList[props.controlSN].wireless_link.link_workmode]
|
|
|
|
|
}}
|
|
|
|
|
</div>
|
|
|
|
|
<div class="show-span">飞行器增强图传</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="display: flex;align-items: center;">
|
|
|
|
|
<a-button style="width: 70px;height: 30px;" @click="openDeviceOnline" :disabled="props.deviceInfoList[props.controlSN].mode_code != 2">{{props.deviceInfoList[props.controlSN].sub_device.device_online_status == 0? '开机': '关机'}}</a-button>
|
|
|
|
|
<div class="button-div">
|
|
|
|
|
<a-button
|
|
|
|
|
class="control-button"
|
|
|
|
|
@click=""
|
|
|
|
|
:disabled="props.deviceInfoList[props.controlSN].mode_code != 2">
|
|
|
|
|
设置
|
|
|
|
|
</a-button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
@ -41,6 +313,9 @@
|
|
|
|
|
import { defineProps } from "vue"
|
|
|
|
|
import { clientPublish } from '@/utils/mqtt'
|
|
|
|
|
import { buildGUID } from '@/utils/uuid';
|
|
|
|
|
import Icon from '@/components/Icon/Icon.vue';
|
|
|
|
|
import { modeCodeOptions, deviceOnlineStatusOptions, coverStateOptions, airConditionerStateOptions, silentModeOptions,
|
|
|
|
|
alarmStateOptions, droneChargeStateOptions, fourgLinkStateOptions, linkWorkmodeOptions } from './util'
|
|
|
|
|
const props = defineProps(['deviceInfoList', 'controlSN'])
|
|
|
|
|
|
|
|
|
|
const openDebug = () => {
|
|
|
|
@ -60,28 +335,77 @@ const getCoverState = (value) => {
|
|
|
|
|
}
|
|
|
|
|
return options[value]
|
|
|
|
|
}
|
|
|
|
|
const openCoverState = () => {
|
|
|
|
|
const changeState = (method,action?) => {
|
|
|
|
|
let publishUrl = `thing/product/${props.controlSN}/services`
|
|
|
|
|
let params = {
|
|
|
|
|
method: props.deviceInfoList[props.controlSN].cover_state == 0? 'cover_open': 'cover_close',
|
|
|
|
|
method: method,
|
|
|
|
|
bid: buildGUID(),
|
|
|
|
|
tid: buildGUID(),
|
|
|
|
|
timestamp: new Date().getTime(),
|
|
|
|
|
data: null,
|
|
|
|
|
data: action? { action }: null,
|
|
|
|
|
};
|
|
|
|
|
clientPublish(publishUrl,params)
|
|
|
|
|
}
|
|
|
|
|
const openDeviceOnline = () => {
|
|
|
|
|
const changeDeviceState = (method, action?, type?) => {
|
|
|
|
|
let publishUrl = `thing/product/${props.controlSN}/services`
|
|
|
|
|
let params = {
|
|
|
|
|
method: props.deviceInfoList[props.controlSN].sub_device.device_online_status == 0? 'drone_open': 'drone_close',
|
|
|
|
|
method,
|
|
|
|
|
bid: buildGUID(),
|
|
|
|
|
tid: buildGUID(),
|
|
|
|
|
timestamp: new Date().getTime(),
|
|
|
|
|
data: null,
|
|
|
|
|
data: type? { [type]: action }: action? { action }: null,
|
|
|
|
|
};
|
|
|
|
|
clientPublish(publishUrl,params)
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped></style>
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
.open-control-div{
|
|
|
|
|
margin-bottom: 10px;
|
|
|
|
|
.control-content{
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
.open-title{
|
|
|
|
|
margin-right: 10px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.setting-control-title{
|
|
|
|
|
margin-bottom: 10px;
|
|
|
|
|
}
|
|
|
|
|
.setting-control-list{
|
|
|
|
|
margin-bottom: 20px;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
gap: 10px;
|
|
|
|
|
.control-item{
|
|
|
|
|
width: 252px;
|
|
|
|
|
height: 58px;
|
|
|
|
|
background-color: #f7f9fa;
|
|
|
|
|
padding-left: 8px;
|
|
|
|
|
padding-right: 8px;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
}
|
|
|
|
|
.info-div{
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
.icon{
|
|
|
|
|
width: 21px;
|
|
|
|
|
height: 21px;
|
|
|
|
|
margin-right: 8px;
|
|
|
|
|
}
|
|
|
|
|
.show-span{
|
|
|
|
|
line-height: 22px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.button-div{
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
.control-button{
|
|
|
|
|
width: 70px;
|
|
|
|
|
height: 30px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|