| | |
| | | <template> |
| | | <div class="g-map-wrapper"> |
| | | <!-- 地图区域 --> |
| | | <div id="g-container" :style="{ width: '100%', height: '100%' }" /> |
| | | <!-- 绘制面板 --> |
| | | <div |
| | | class="g-action-panle" |
| | | class="g-action-panel" |
| | | :style="{ right: drawVisible ? '316px' : '16px' }" |
| | | > |
| | | <div :class="state.currentType === 'pin' ? 'g-action-item selection' : 'g-action-item'" @click="draw('pin', true)"> |
| | |
| | | <a style="color: red;"><CloseOutlined /></a> |
| | | </div> |
| | | </div> |
| | | <!-- 飞机OSD --> |
| | | <div v-if="osdVisible.visible && !osdVisible.is_dock" class="osd-panel fz12"> |
| | | <div class="pl5 pr5 flex-align-center flex-row flex-justify-between" style="border-bottom: 1px solid #515151; height: 18%;"> |
| | | <span>{{ osdVisible.callsign }}</span> |
| | |
| | | </div> |
| | | <div class="osd"> |
| | | <a-row> |
| | | <a-col span="16" :style="deviceInfo.device.mode_code === EModeCode.Disconnected ? 'color: red; font-weight: 700;': 'color: rgb(25,190,107)'">{{ EModeCode[deviceInfo.device.mode_code] }}</a-col> |
| | | <a-col span="16" :style="deviceInfo.device.mode_code === EModeCode.Disconnected ? 'color: red; font-weight: 700;': 'color: rgb(25,190,107)'">{{ EModeText[deviceInfo.device.mode_code] }}</a-col> |
| | | </a-row> |
| | | <a-row> |
| | | <a-col span="6"> |
| | |
| | | </a-col> |
| | | |
| | | <a-col span="6"> |
| | | <a-tooltip title="Drone Battery Level"> |
| | | <a-tooltip title="无人机电池电量"> |
| | | <span><ThunderboltOutlined class="fz14"/></span> |
| | | <span class="ml10">{{ deviceInfo.device.battery.capacity_percent !== str ? deviceInfo.device.battery.capacity_percent + ' %' : deviceInfo.device.battery.capacity_percent }}</span> |
| | | </a-tooltip> |
| | | </a-col> |
| | | </a-row> |
| | | <a-row> |
| | | <a-tooltip title="RTK Fixed"> |
| | | <a-tooltip title="RTK固定"> |
| | | <a-col span="6" class="flex-row flex-align-center flex-justify-start"> |
| | | <span>Fixed</span> |
| | | <span class="ml10 circle" :style="deviceInfo.device.position_state.is_fixed === 1 ? 'backgroud: rgb(25,190,107);' : ' background: red;'"></span> |
| | |
| | | </a-row> |
| | | <a-row> |
| | | <a-col span="6"> |
| | | <a-tooltip title="Flight Mode"> |
| | | <a-tooltip title="飞行模式"> |
| | | <span><ControlOutlined class="fz16" /></span> |
| | | <span class="ml10">{{ EGear[deviceInfo.device.gear] }}</span> |
| | | </a-tooltip> |
| | | </a-col> |
| | | <a-col span="6"> |
| | | <a-tooltip title="Altitude above sea level"> |
| | | <a-tooltip title="海拔高度"> |
| | | <span>ASL</span> |
| | | <span class="ml10">{{ deviceInfo.device.height === str ? str : deviceInfo.device.height.toFixed(2) + ' m'}}</span> |
| | | </a-tooltip> |
| | | </a-col> |
| | | <a-col span="6"> |
| | | <a-tooltip title="Altitude above takeoff level"> |
| | | <a-tooltip title="高于起飞高度"> |
| | | <span>ALT</span> |
| | | <span class="ml10">{{ deviceInfo.device.elevation === str ? str : deviceInfo.device.elevation.toFixed(2) + ' m' }}</span> |
| | | </a-tooltip> |
| | | </a-col> |
| | | <a-col span="6"> |
| | | <a-tooltip title="Distance to Home Point"> |
| | | <a-tooltip title="到起点距离"> |
| | | <span>H</span> |
| | | <span class="ml10">{{ deviceInfo.device.home_distance === str ? str : deviceInfo.device.home_distance.toFixed(2) + ' m' }}</span> |
| | | </a-tooltip> |
| | |
| | | </a-row> |
| | | <a-row> |
| | | <a-col span="6"> |
| | | <a-tooltip title="Horizontal Speed"> |
| | | <a-tooltip title="水平速度"> |
| | | <span>H.S</span> |
| | | <span class="ml10">{{ deviceInfo.device.horizontal_speed === str ? str : deviceInfo.device.horizontal_speed.toFixed(2) + ' m/s'}}</span> |
| | | </a-tooltip> |
| | | </a-col> |
| | | <a-col span="6"> |
| | | <a-tooltip title="Vertical Speed"> |
| | | <a-tooltip title="垂直速度"> |
| | | <span>V.S</span> |
| | | <span class="ml10">{{ deviceInfo.device.vertical_speed === str ? str : deviceInfo.device.vertical_speed.toFixed(2) + ' m/s'}}</span> |
| | | </a-tooltip> |
| | | </a-col> |
| | | <a-col span="6"> |
| | | <a-tooltip title="Wind Speed"> |
| | | <a-tooltip title="风速"> |
| | | <span>W.S</span> |
| | | <span class="ml10">{{ deviceInfo.device.wind_speed === str ? str : (deviceInfo.device.wind_speed / 10).toFixed(2) + ' m/s'}}</span> |
| | | </a-tooltip> |
| | |
| | | <div class="osd flex-1" style="flex: 1"> |
| | | <a-row> |
| | | <a-col span="16" :style="deviceInfo.dock.basic_osd?.mode_code === EDockModeCode.Disconnected ? 'color: red; font-weight: 700;': 'color: rgb(25,190,107)'"> |
| | | {{ EDockModeCode[deviceInfo.dock.basic_osd?.mode_code] }}</a-col> |
| | | {{ EDockModeText[deviceInfo.dock.basic_osd?.mode_code] }}</a-col> |
| | | </a-row> |
| | | <a-row> |
| | | <a-col span="12"> |
| | | <a-tooltip title="Accumulated Running Time"> |
| | | <a-tooltip title="累计运行时间"> |
| | | <span><HistoryOutlined /></span> |
| | | <span class="ml10"> |
| | | <span v-if="deviceInfo.dock.work_osd?.acc_time >= 2592000"> {{ Math.floor(deviceInfo.dock.work_osd?.acc_time / 2592000) }}m </span> |
| | |
| | | </a-tooltip> |
| | | </a-col> |
| | | <a-col span="12"> |
| | | <a-tooltip title="Activation time"> |
| | | <a-tooltip title="激活时间"> |
| | | <span><FieldTimeOutlined /></span> |
| | | <span class="ml10">{{ new Date((deviceInfo.dock.work_osd?.activation_time ?? 0) * 1000).toLocaleString() }} |
| | | </span> |
| | |
| | | </a-row> |
| | | <a-row> |
| | | <a-col span="6"> |
| | | <a-tooltip title="Network State"> |
| | | <a-tooltip title="网络状态"> |
| | | <span :style="deviceInfo.dock.basic_osd?.network_state?.type === NetworkStateTypeEnum.ETHERNET || deviceInfo.dock.basic_osd?.network_state?.quality === NetworkStateQualityEnum.GOOD ? |
| | | 'color: #00ee8b' : deviceInfo.dock.basic_osd?.network_state?.quality === NetworkStateQualityEnum.MEDIUM ? 'color: yellow' : 'color: red'"> |
| | | <span v-if="deviceInfo.dock.basic_osd?.network_state?.type === NetworkStateTypeEnum.FOUR_G"><SignalFilled /></span> |
| | |
| | | </a-tooltip> |
| | | </a-col> |
| | | <a-col span="6"> |
| | | <a-tooltip title="The total number of times the dock has performed missions."> |
| | | <a-tooltip title="设备执行任务总次数"> |
| | | <span><CarryOutOutlined /></span> |
| | | <span class="ml10" >{{ deviceInfo.dock.work_osd?.job_number }} </span> |
| | | </a-tooltip> |
| | | </a-col> |
| | | <a-col span="6"> |
| | | <a-tooltip title="Media File Remain Upload"> |
| | | <a-tooltip title="媒体文件剩余上传"> |
| | | <span><CloudUploadOutlined class="fz14"/></span> |
| | | <span class="ml10">{{ deviceInfo.dock.link_osd?.media_file_detail?.remain_upload }}</span> |
| | | </a-tooltip> |
| | |
| | | <a-col span="6"> |
| | | <a-tooltip> |
| | | <template #title> |
| | | <p>total: {{ deviceInfo.dock.basic_osd?.storage?.total }}</p> |
| | | <p>used: {{ deviceInfo.dock.basic_osd?.storage?.used }}</p> |
| | | <p>总共: {{ deviceInfo.dock.basic_osd?.storage?.total }}</p> |
| | | <p>已使用: {{ deviceInfo.dock.basic_osd?.storage?.used }}</p> |
| | | </template> |
| | | <span><FolderOpenOutlined /></span> |
| | | <span class="ml10" v-if="deviceInfo.dock.basic_osd?.storage?.total > 0"> |
| | |
| | | </a-row> |
| | | <a-row> |
| | | <a-col span="6"> |
| | | <a-tooltip title="Wind Speed"> |
| | | <a-tooltip title="风速"> |
| | | <span>W.S</span> |
| | | <span class="ml10">{{ (deviceInfo.dock.basic_osd?.wind_speed ?? str) + ' m/s'}}</span> |
| | | </a-tooltip> |
| | | </a-col> |
| | | <a-col span="6"> |
| | | <a-tooltip title="Rainfall"> |
| | | <a-tooltip title="降雨量"> |
| | | <span>🌧</span> |
| | | <span class="ml10">{{ RainfallEnum[deviceInfo.dock.basic_osd?.rainfall] }}</span> |
| | | <span class="ml10">{{ RainfallEnum[deviceInfo.dock.basic_osd?.降雨量] }}</span> |
| | | </a-tooltip> |
| | | </a-col> |
| | | <a-col span="6"> |
| | | <a-tooltip title="Environment Temperature"> |
| | | <a-tooltip title="环境温度"> |
| | | <span>°C</span> |
| | | <span class="ml10">{{ deviceInfo.dock.basic_osd?.environment_temperature }}</span> |
| | | </a-tooltip> |
| | | </a-col> |
| | | <a-col span="6"> |
| | | <a-tooltip title="Dock Temperature"> |
| | | <a-tooltip title="设备温度"> |
| | | <span>°C</span> |
| | | <span class="ml10">{{ deviceInfo.dock.basic_osd?.temperature }}</span> |
| | | </a-tooltip> |
| | |
| | | </a-row> |
| | | <a-row> |
| | | <a-col span="6"> |
| | | <a-tooltip title="Dock Humidity"> |
| | | <a-tooltip title="设备湿度"> |
| | | <span>💦</span> |
| | | <span class="ml10">{{ deviceInfo.dock.basic_osd?.humidity }}</span> |
| | | </a-tooltip> |
| | | </a-col> |
| | | <a-col span="6"> |
| | | <a-tooltip title="Working Voltage"> |
| | | <a-tooltip title="工作电压"> |
| | | <span style="border: 1px solid; border-radius: 50%; width: 18px; height: 18px; line-height: 16px; text-align: center; float: left;">V</span> |
| | | <span class="ml10">{{ (deviceInfo.dock.work_osd?.working_voltage ?? str) + ' mV' }}</span> |
| | | </a-tooltip> |
| | | </a-col> |
| | | <a-col span="6"> |
| | | <a-tooltip title="Working Current"> |
| | | <a-tooltip title="工作电流"> |
| | | <span style="border: 1px solid; border-radius: 50%; width: 18px; height: 18px; line-height: 15px; text-align: center; float: left;" >A</span> |
| | | <span class="ml10">{{ (deviceInfo.dock.work_osd?.working_current ?? str) + ' mA' }}</span> |
| | | </a-tooltip> |
| | | </a-col> |
| | | <a-col span="6"> |
| | | <a-tooltip title="Drone in dock"> |
| | | <a-tooltip title="设备上的无人机"> |
| | | <span><RocketOutlined /></span> |
| | | <span class="ml10">{{ DroneInDockEnum[deviceInfo.dock.basic_osd?.drone_in_dock] }}</span> |
| | | </a-tooltip> |
| | |
| | | </a-row> |
| | | <a-row class="p5"> |
| | | <a-col span="24"> |
| | | <a-button type="primary" :disabled="controlPanelVisible" size="small" @click="setControlPanelVisible(true)"> |
| | | 设备操作 |
| | | <a-button type="primary" :disabled="dockControlPanelVisible" size="small" @click="setDockControlPanelVisible(true)"> |
| | | 操作 |
| | | </a-button> |
| | | </a-col> |
| | | </a-row> |
| | | <DockControlPanel v-if="controlPanelVisible" :sn="osdVisible.gateway_sn" :deviceInfo="deviceInfo" @close-control-panel="dockDebugOnOff"> |
| | | <!-- 机场控制面板 --> |
| | | <DockControlPanel v-if="dockControlPanelVisible" :sn="osdVisible.gateway_sn" :deviceInfo="deviceInfo" @close-control-panel="onCloseControlPanel"> |
| | | </DockControlPanel> |
| | | </div> |
| | | </div> |
| | |
| | | <div class="osd flex-1"> |
| | | <a-row> |
| | | <a-col span="16" :style="!deviceInfo.device || deviceInfo.device?.mode_code === EModeCode.Disconnected ? 'color: red; font-weight: 700;': 'color: rgb(25,190,107)'"> |
| | | {{ !deviceInfo.device ? EModeCode[EModeCode.Disconnected] : EModeCode[deviceInfo.device?.mode_code] }}</a-col> |
| | | {{ !deviceInfo.device ? EModeText[EModeCode.Disconnected] : EModeText[deviceInfo.device?.mode_code] }}</a-col> |
| | | </a-row> |
| | | <a-row> |
| | | <a-col span="6"> |
| | | <a-tooltip title="Upward Quality"> |
| | | <a-tooltip title="向上质量"> |
| | | <span><SignalFilled /><ArrowUpOutlined style="font-size: 9px; vertical-align: top;" /></span> |
| | | <span class="ml10">{{ deviceInfo.dock.link_osd?.sdr?.up_quality }}</span> |
| | | </a-tooltip> |
| | | </a-col> |
| | | <a-col span="6"> |
| | | <a-tooltip title="Downward Quality"> |
| | | <a-tooltip title="向下质量"> |
| | | <span><SignalFilled /><ArrowDownOutlined style="font-size: 9px; vertical-align: top;" /></span> |
| | | <span class="ml10">{{ deviceInfo.dock.link_osd?.sdr?.down_quality }}</span> |
| | | </a-tooltip> |
| | | </a-col> |
| | | <a-col span="6"> |
| | | <a-tooltip title="Drone Battery Level"> |
| | | <a-tooltip title="无人机电池电量"> |
| | | <span><ThunderboltOutlined class="fz14"/></span> |
| | | <span class="ml10">{{ deviceInfo.device && deviceInfo.device.battery.capacity_percent !== str ? deviceInfo.device?.battery.capacity_percent + ' %' : str }}</span> |
| | | </a-tooltip> |
| | |
| | | <a-col span="6"> |
| | | <a-tooltip> |
| | | <template #title> |
| | | <p>total: {{ deviceInfo.device?.storage?.total }}</p> |
| | | <p>used: {{ deviceInfo.device?.storage?.used }}</p> |
| | | <p>总供: {{ deviceInfo.device?.storage?.total }}</p> |
| | | <p>已使用: {{ deviceInfo.device?.storage?.used }}</p> |
| | | </template> |
| | | <span><FolderOpenOutlined /></span> |
| | | <span class="ml10" v-if="deviceInfo.device?.storage?.total > 0"> |
| | |
| | | </a-col> |
| | | </a-row> |
| | | <a-row> |
| | | <a-tooltip title="RTK Fixed"> |
| | | <a-tooltip title="RTK固定"> |
| | | <a-col span="6" class="flex-row flex-align-center flex-justify-start"> |
| | | <span>Fixed</span> |
| | | <span class="ml10 circle" :style="deviceInfo.device?.position_state.is_fixed === 1 ? 'backgroud: rgb(25,190,107);' : ' background: red;'"></span> |
| | |
| | | </a-row> |
| | | <a-row> |
| | | <a-col span="6"> |
| | | <a-tooltip title="Flight Mode"> |
| | | <a-tooltip title="飞行模式"> |
| | | <span><ControlOutlined class="fz16" /></span> |
| | | <span class="ml10">{{ deviceInfo.device ? EGear[deviceInfo.device?.gear] : str }}</span> |
| | | </a-tooltip> |
| | | </a-col> |
| | | <a-col span="6"> |
| | | <a-tooltip title="Altitude above sea level"> |
| | | <a-tooltip title="海拔高度"> |
| | | <span>ASL</span> |
| | | <span class="ml10">{{ !deviceInfo.device || deviceInfo.device.height === str ? str : deviceInfo.device?.height.toFixed(2) + ' m'}}</span> |
| | | </a-tooltip> |
| | | </a-col> |
| | | <a-col span="6"> |
| | | <a-tooltip title="Altitude above takeoff level"> |
| | | <a-tooltip title="高于起飞高度"> |
| | | <span>ALT</span> |
| | | <span class="ml10">{{ !deviceInfo.device || deviceInfo.device.elevation === str ? str : deviceInfo.device?.elevation.toFixed(2) + ' m' }}</span> |
| | | </a-tooltip> |
| | | </a-col> |
| | | <a-col span="6"> |
| | | <a-tooltip title="Distance to Home Point"> |
| | | <a-tooltip title="到起点距离"> |
| | | <span style="border: 1px solid; border-radius: 50%; width: 18px; height: 18px; line-height: 15px; text-align: center; display: block; float: left;" >H</span> |
| | | <span class="ml10">{{ !deviceInfo.device || deviceInfo.device.home_distance === str ? str : deviceInfo.device?.home_distance.toFixed(2) + ' m' }}</span> |
| | | </a-tooltip> |
| | |
| | | </a-row> |
| | | <a-row> |
| | | <a-col span="6"> |
| | | <a-tooltip title="Horizontal Speed"> |
| | | <a-tooltip title="水平速度"> |
| | | <span>H.S</span> |
| | | <span class="ml10">{{ !deviceInfo.device || deviceInfo.device?.horizontal_speed === str ? str : deviceInfo.device?.horizontal_speed.toFixed(2) + ' m/s'}}</span> |
| | | </a-tooltip> |
| | | </a-col> |
| | | <a-col span="6"> |
| | | <a-tooltip title="Vertical Speed"> |
| | | <a-tooltip title="垂直速度"> |
| | | <span>V.S</span> |
| | | <span class="ml10">{{ !deviceInfo.device || deviceInfo.device.vertical_speed === str ? str : deviceInfo.device?.vertical_speed.toFixed(2) + ' m/s'}}</span> |
| | | </a-tooltip> |
| | | </a-col> |
| | | <a-col span="6"> |
| | | <a-tooltip title="Wind Speed"> |
| | | <a-tooltip title="风速"> |
| | | <span>W.S</span> |
| | | <span class="ml10">{{ !deviceInfo.device || deviceInfo.device.wind_speed === str ? str : (deviceInfo.device?.wind_speed / 10).toFixed(2) + ' m/s'}}</span> |
| | | </a-tooltip> |
| | |
| | | {{ 10 > (deviceInfo.device.battery.remain_flight_time % 60) ? '0' : ''}}{{deviceInfo.device.battery.remain_flight_time % 60 }} |
| | | </div> |
| | | </div> |
| | | |
| | | <!-- 飞行指令 --> |
| | | <DroneControlPanel :sn="osdVisible.gateway_sn" :deviceInfo="deviceInfo" :payloads="osdVisible.payloads"></DroneControlPanel> |
| | | </div> |
| | | </div> |
| | | </template> |
| | |
| | | import { gcj02towgs84, wgs84togcj02 } from '/@/vendors/coordtransform' |
| | | import { deviceTsaUpdate } from '/@/hooks/use-g-map-tsa' |
| | | import { |
| | | DeviceOsd, DeviceStatus, DockOsd, EGear, EModeCode, GatewayOsd, EDockModeCode, |
| | | DeviceOsd, DeviceStatus, DockOsd, EGear, EModeCode, GatewayOsd, EDockModeCode, EDockModeText, EModeText, |
| | | NetworkStateQualityEnum, NetworkStateTypeEnum, RainfallEnum, DroneInDockEnum |
| | | } from '/@/types/device' |
| | | import pin from '/@/assets/icons/pin-2d8cf0.svg' |
| | |
| | | } from '@ant-design/icons-vue' |
| | | import { EDeviceTypeName } from '../types' |
| | | import DockControlPanel from './g-map/DockControlPanel.vue' |
| | | import { useDockControl } from './g-map/useDockControl' |
| | | import { useDockControl } from './g-map/use-dock-control' |
| | | import DroneControlPanel from './g-map/DroneControlPanel.vue' |
| | | import { useConnectMqtt } from './g-map/use-connect-mqtt' |
| | | |
| | | export default defineComponent({ |
| | | components: { |
| | |
| | | ArrowUpOutlined, |
| | | ArrowDownOutlined, |
| | | DockControlPanel, |
| | | DroneControlPanel, |
| | | CarryOutOutlined, |
| | | RocketOutlined |
| | | }, |
| | |
| | | deviceTsaUpdateHook.initMarker(EDeviceTypeName.Dock, [EDeviceTypeName.Dock], data.currentSn, data.dockInfo[data.currentSn].basic_osd?.longitude, data.dockInfo[data.currentSn].basic_osd?.latitude) |
| | | if (osdVisible.value.visible && osdVisible.value.is_dock && osdVisible.value.gateway_sn !== '') { |
| | | deviceInfo.dock = data.dockInfo[osdVisible.value.gateway_sn] |
| | | deviceInfo.device = data.deviceInfo[deviceInfo.dock.basic_osd?.sub_device?.device_sn ?? osdVisible.value.sn] |
| | | deviceInfo.device = data.deviceInfo[deviceInfo.dock.basic_osd.sub_device?.device_sn ?? osdVisible.value.sn] |
| | | } |
| | | } |
| | | }, { |
| | |
| | | mouseMode.value = bool |
| | | } |
| | | |
| | | // dock 控制指令 |
| | | // dock 控制面板 |
| | | const { |
| | | controlPanelVisible, |
| | | setControlPanelVisible, |
| | | sendDockControlCmd, |
| | | dockDebugOnOff, |
| | | dockControlPanelVisible, |
| | | setDockControlPanelVisible, |
| | | onCloseControlPanel, |
| | | } = useDockControl() |
| | | |
| | | onMounted(() => { |
| | | // 连接或断开drc |
| | | useConnectMqtt() |
| | | |
| | | onMounted(async () => { |
| | | await nextTick() |
| | | const app = getApp() |
| | | useGMapManageHook.globalPropertiesConfig(app) |
| | | setInterval(() => { |
| | | console.info(deviceInfo.dock) |
| | | }, 1000) |
| | | }) |
| | | |
| | | function getDrawCallback ({ obj }) { |
| | | switch (state.currentType) { |
| | | case MapDoodleEnum.PIN: |
| | |
| | | EModeCode, |
| | | str, |
| | | EDockModeCode, |
| | | controlPanelVisible, |
| | | dockDebugOnOff, |
| | | setControlPanelVisible, |
| | | EDockModeText, |
| | | EModeText, |
| | | dockControlPanelVisible, |
| | | setDockControlPanelVisible, |
| | | onCloseControlPanel, |
| | | NetworkStateTypeEnum, |
| | | NetworkStateQualityEnum, |
| | | RainfallEnum, |
| | |
| | | height: 100%; |
| | | width: 100%; |
| | | |
| | | .g-action-panle { |
| | | .g-action-panel { |
| | | position: absolute; |
| | | top: 16px; |
| | | right: 16px; |
| | |
| | | left: 10px; |
| | | top: 10px; |
| | | width: 480px; |
| | | background: black; |
| | | color: white; |
| | | background: #000; |
| | | color: #fff; |
| | | border-radius: 2px; |
| | | opacity: 0.7; |
| | | opacity: 0.8; |
| | | } |
| | | .osd > div { |
| | | .osd > div:not(.dock-control-panel) { |
| | | margin-top: 5px; |
| | | padding-left: 5px; |
| | | } |