| | |
| | | <a-col span="6"> |
| | | <a-tooltip title="海拔高度"> |
| | | <span>ASL</span> |
| | | <span class="ml5">{{ deviceInfo.device.height === str ? str : deviceInfo.device.height.toFixed(2) + ' m'}}</span> |
| | | <span class="ml5">{{ deviceInfo.device.height === str ? str : deviceInfo.device.height.toFixed(2) + |
| | | 'm' }}</span> |
| | | </a-tooltip> |
| | | </a-col> |
| | | <a-col span="6"> |
| | | <a-tooltip title="高于起飞高度"> |
| | | <span>ALT</span> |
| | | <span class="ml5">{{ deviceInfo.device.elevation === str ? str : deviceInfo.device.elevation.toFixed(2) +' m' }}</span> |
| | | <span class="ml5">{{ deviceInfo.device.elevation === str ? str : deviceInfo.device.elevation.toFixed(2) + |
| | | 'm' }}</span> |
| | | </a-tooltip> |
| | | </a-col> |
| | | <a-col span="6"> |
| | |
| | | <a-col span="6"> |
| | | <a-tooltip title="风速"> |
| | | <span>W.S</span> |
| | | <span class="ml5">{{ deviceInfo.device.wind_speed === str ? str : (deviceInfo.device.wind_speed / |
| | | 10).toFixed(2) + ' m/s' }}</span> |
| | | <span class="ml5">{{ deviceInfo.device.wind_speed === str ? str : (deviceInfo.device.wind_speed / 10).toFixed(2) + ' m/s' }}</span> |
| | | </a-tooltip> |
| | | </a-col> |
| | | </a-row> |
| | |
| | | <!-- 机场OSD --> |
| | | <!-- && osdVisible.is_dock --> |
| | | <div class="osd-panel fz12" v-if="osdVisible.visible"> |
| | | <div class="fz16 pl5 pr5 flex-align-center flex-row flex-justify-between" |
| | | <div class="fz16 pr5 flex-align-center flex-row flex-justify-between" |
| | | style="border-bottom: 1px solid #515151; height: 10%;"> |
| | | <span>{{ osdVisible.gateway_callsign }}</span> |
| | | <span><a style="color: white;" @click="closeOsdWindow"> |
| | | <div class="flex-align-center flex-justify-center" style="display: flex;"> |
| | | <div v-if="osdVisible.latest_wayline_job" class="flex-column flex-align-center flex-justify-center"> |
| | | <div class="task_wrapper"> |
| | | <div class="task_content task_content_way" v-if="deviceInfo.device && deviceInfo.device?.mode_code === 5"> |
| | | <div class="task_status"> |
| | | <ContainerOutlined /> |
| | | <span>执行任务中</span> |
| | | </div> |
| | | </div> |
| | | <div class="task_content" v-else> |
| | | <div class="task_status"> |
| | | <ContainerOutlined /> |
| | | <span>待执行</span> |
| | | </div> |
| | | <div class="task_info">{{osdVisible.latest_wayline_job.is_later ? '今天': '明天'}}{{convertTimestampToDate(osdVisible.latest_wayline_job.begin_time, 'hh:mm')}}</div> |
| | | </div> |
| | | <div class="task_title">{{osdVisible.latest_wayline_job.name}}</div> |
| | | </div> |
| | | </div> |
| | | <span :style="[osdVisible.latest_wayline_job?'margin-left:20px':'']">{{ osdVisible.gateway_callsign }}</span> |
| | | </div> |
| | | <div> |
| | | <a style="color: white;" @click="closeOsdWindow"> |
| | | <CloseOutlined /> |
| | | </a></span> |
| | | </a> |
| | | </div> |
| | | </div> |
| | | <!-- 机场 --> |
| | | <div class="flex-display" style="border-bottom: 1px solid #515151;"> |
| | | <div class="flex-column flex-align-stretch flex-justify-center" style="width: 60px; background: #2d2d2d;"> |
| | | <a-tooltip :title="osdVisible.model"> |
| | | <a-tooltip :title="osdVisible.gateway_callsign"> |
| | | <div class="flex-column flex-align-center flex-justify-center" style="width: 90%;"> |
| | | <span> |
| | | <RobotFilled style="font-size: 48px;" /> |
| | |
| | | {{ EDockModeText[deviceInfo.dock.basic_osd?.mode_code] }}</a-col> |
| | | <!-- <a-col span="1">{{ hmsInfo[sn]?.length || 1 }}</a-col> --> |
| | | <a-col span="1" class="num" v-if="hmsInfo[sn]">{{ hmsInfo[sn]?.length }}</a-col> |
| | | <a-col span="14" v-if="hmsInfo[sn] && hmsInfo[sn].length>0" style="width: 100%;padding-left:5px ;"> |
| | | <a-col span="14" v-if="hmsInfo[sn] && hmsInfo[sn].length > 0" style="width: 100%;padding-left:5px ;"> |
| | | <a-tooltip :title="hmsInfo[sn][0].message_zh"> |
| | | <div class="overflow">{{ hmsInfo[sn][0].message_zh }}</div> |
| | | </a-tooltip> |
| | | <div class="overflow">{{ hmsInfo[sn][0].message_zh }}</div> |
| | | </a-tooltip> |
| | | </a-col> |
| | | </a-row> |
| | | <a-row> |
| | |
| | | <span class="ml5">{{ deviceInfo.dock.link_osd?.media_file_detail?.remain_upload }}</span> |
| | | </a-tooltip> |
| | | </div> |
| | | </div> |
| | | </a-col> |
| | | <!-- <a-col span="12"> |
| | | <a-tooltip title="激活时间"> |
| | | <span><FieldTimeOutlined /></span> |
| | | <span class="ml5">{{ new Date((deviceInfo.dock.work_osd?.activation_time ?? 0) * 1000).toLocaleString() }} |
| | | </span> |
| | | </a-tooltip> |
| | | </a-col> --> |
| | | </a-row> |
| | | <a-row> |
| | | <!-- <a-col span="12"> |
| | | <a-tooltip title="累计运行时间"> |
| | | <span><HistoryOutlined /></span> |
| | | <span class="ml5"> |
| | | <span v-if="deviceInfo.dock.work_osd?.acc_time >= 2592000"> {{ Math.floor(deviceInfo.dock.work_osd?.acc_time / 2592000) }}m </span> |
| | | <span v-if="(deviceInfo.dock.work_osd?.acc_time % 2592000) >= 86400"> {{ Math.floor((deviceInfo.dock.work_osd?.acc_time % 2592000) / 86400) }}d </span> |
| | | <span v-if="(deviceInfo.dock.work_osd?.acc_time % 2592000 % 86400) >= 3600"> {{ Math.floor((deviceInfo.dock.work_osd?.acc_time % 2592000 % 86400) / 3600) }}h </span> |
| | | <span v-if="(deviceInfo.dock.work_osd?.acc_time % 2592000 % 86400 % 3600) >= 60"> {{ Math.floor((deviceInfo.dock.work_osd?.acc_time % 2592000 % 86400 % 3600) / 60) }}min </span> |
| | | <span>{{ Math.floor(deviceInfo.dock.work_osd?.acc_time % 2592000 % 86400 % 3600 % 60) }} s</span> |
| | | </span> |
| | | </a-tooltip> |
| | | </a-col> --> |
| | | <a-col span="9"> |
| | | <a-tooltip title="设备上的无人机"> |
| | | <span> |
| | | <RocketOutlined /> |
| | | </span> |
| | | <span class="ml5">{{ DroneInDockEnum[deviceInfo.dock.basic_osd?.drone_in_dock] }}</span> |
| | | </a-tooltip> |
| | | </a-col> |
| | | <a-col span="15" style="width: 100%;"> |
| | | <div class="env-box span5 op_btn"> |
| | | <a-col span="6"> |
| | | <a-tooltip title="设备湿度"> |
| | | <span>💦</span> |
| | | <span class="ml5">{{ deviceInfo.dock.basic_osd?.humidity }}</span> |
| | | </a-tooltip> |
| | | </a-col> |
| | | <a-col span="8"> |
| | | <a-button :class="[showMonitor ? 'active-color' : 'unactive-color']" class="width-100" type="primary" |
| | | size="small" @click="openMonitor"> |
| | | 监控 |
| | | </a-button> |
| | | </a-col> |
| | | <a-col span="2"></a-col> |
| | | <a-col span="8"> |
| | | <a-button :class="[airPortOption ? 'active-color' : 'unactive-color']" class="width-100" type="primary" |
| | | size="small" @click="openFlySetting"> |
| | | 操作 |
| | | </a-button> |
| | | </a-col> |
| | | </div> |
| | | </a-col> |
| | | <!-- <a-col span="12"> |
| | |
| | | </a-tooltip> |
| | | </a-col> |
| | | </a-row> --> |
| | | <a-row class="p5" justify="space-between"> |
| | | <!-- <a-row class="p5" justify="space-between"> |
| | | <a-col span="11"> |
| | | <a-button :class="[showMonitor?'active-color':'unactive-color']" class="width-100" type="primary" size="small" @click="openMonitor"> |
| | | <a-button :class="[showMonitor ? 'active-color' : 'unactive-color']" class="width-100" type="primary" |
| | | size="small" @click="openMonitor"> |
| | | 监控 |
| | | </a-button> |
| | | </a-col> |
| | | <a-col span="11"> |
| | | <a-button :class="[showOption?'active-color':'unactive-color']" class="width-100" type="primary" :disabled="dockControlPanelVisible" size="small" |
| | | @click="openFlySetting"> |
| | | <a-button :class="[showOption ? 'active-color' : 'unactive-color']" class="width-100" type="primary" |
| | | :disabled="dockControlPanelVisible" size="small" @click="openFlySetting"> |
| | | 操作 |
| | | </a-button> |
| | | </a-col> |
| | | </a-row> |
| | | </a-row> --> |
| | | <!-- 机场控制面板 --> |
| | | <DockControlPanel v-if="dockControlPanelVisible" :sn="osdVisible.gateway_sn" :deviceInfo="deviceInfo" |
| | | @close-control-panel="closeOperate"> |
| | |
| | | </div> |
| | | <a-row class="p5" v-if="showMonitor" justify="center" align="middle"> |
| | | <!-- <a-spin :spinning="spinning"> --> |
| | | <Jessibuca v-if="airPortUrl" @timeout="airTimeout" :videoUrl="airPortUrl" width="100%" height="300px" /> |
| | | <Jessibuca v-if="airPortUrl" @timeout="airTimeout" :videoUrl="airPortUrl" width="100%" height="300px" /> |
| | | <!-- </a-spin> --> |
| | | </a-row> |
| | | <!-- 飞机--> |
| | |
| | | <a-tooltip :title="osdVisible.model"> |
| | | <div style="width: 90%;" class="flex-column flex-align-center flex-justify-center"> |
| | | <span><a-image :src="M30" :preview="false" /></span> |
| | | <span>M30</span> |
| | | <span>{{ DEVICE_NAME[`${osdVisible.device_domain}-${osdVisible.device_type}-${osdVisible.device_sub_type}`] |
| | | }}</span> |
| | | </div> |
| | | </a-tooltip> |
| | | </div> |
| | | <div class="osd flex-1"> |
| | | <a-row class="mr-20" align="middle"> |
| | | <a-col span="9" |
| | | :style="!deviceInfo.device || deviceInfo.device?.mode_code === EModeCode.Disconnected ? 'color: red; font-weight: 700;' : 'color: rgb(25,190,107)'"> |
| | | {{ !deviceInfo.device ? EModeText[EModeCode.Disconnected] : EModeText[deviceInfo.device?.mode_code] |
| | | :style="deviceInfo.device && deviceInfo.device?.mode_code !== EModeCode.Disconnected ? 'color: rgb(25,190,107)' : deviceInfo.dock.basic_osd?.drone_in_dock === 1 ? 'color: rgb(25,190,107)' : 'color: red; font-weight: 700;'"> |
| | | <!-- DroneInDockEnum[deviceInfo.dock.basic_osd?.drone_in_dock] --> |
| | | {{ deviceInfo.device ? EModeText[deviceInfo.device?.mode_code] : (deviceInfo.dock.basic_osd?.drone_in_dock |
| | | === 1) ? '舱内关机' : EModeText[EModeCode.Disconnected] |
| | | }}</a-col> |
| | | <a-col span="15"> |
| | | <a-select :showArrow="false" v-model:value="aircraSelected" :bordered="false" :options="aircraftList" :placeholder="aircraftList.length==0?'N/A':'请选择'" :disabled="aircraftList.length==0?true:false" size="small" style="width:100%;background-color: #5d5f61;color: #fff;" @change="selectChange"></a-select> |
| | | <div style="width:100%;padding:0 5px;background-color: #5d5f61;color: #fff;font-size: 10px;"> |
| | | {{ deviceInfo.device?.mode_code == 14 || !deviceInfo.device ? 'N/A' : '当前正常' }}</div> |
| | | </a-col> |
| | | </a-row> |
| | | <a-row align="middle" justify="center"> |
| | | <a-col span="24"> <div v-if="deviceInfo.device?.mode_code == 14 || !deviceInfo.device" style="color:#494949;" class="flex-display flex-justify-center mt5 mb5">当前设备已关机,无法进行直播</div> </a-col> |
| | | <a-col span="24"> |
| | | <div v-if="deviceInfo.device?.mode_code == 14 || !deviceInfo.device" style="color:#494949;" |
| | | class="flex-display flex-justify-center mt5 mb5">当前设备已关机,无法进行直播</div> |
| | | </a-col> |
| | | </a-row> |
| | | <a-row class="p5" align="middle" justify="space-between"> |
| | | <a-row class="p5" v-if="deviceInfo.device?.mode_code != 14 && deviceInfo.device" align="middle" |
| | | justify="space-between"> |
| | | <a-col span="11"> |
| | | <a-button :disabled="deviceInfo.device?.mode_code == 14 || !deviceInfo.device?true:false" :class="[showAircraft?'active-color':'unactive-color']" class="width-100" type="primary" size="small" @click="openAircra"> |
| | | 飞行控制 |
| | | <a-button :class="[aircrafIndex === 0 ? 'active-color' : 'unactive-color']" class="width-100" type="primary" |
| | | size="small" @click="openAircra(0)"> |
| | | 飞行相机 |
| | | </a-button> |
| | | </a-col> |
| | | <a-col span="11"> |
| | | <a-button :class="[openDroneControl?'active-color':'unactive-color']" class="width-100" type="primary" size="small" |
| | | @click="openDeviceSetting"> |
| | | 操作 |
| | | <a-button :class="[aircrafIndex === 1 ? 'active-color' : 'unactive-color']" class="width-100" type="primary" |
| | | size="small" @click="openAircra(1)"> |
| | | M30T相机 |
| | | </a-button> |
| | | </a-col> |
| | | </a-row> |
| | | <a-row class="p5" align="middle" justify="space-between"> |
| | | <a-col span="24"> |
| | | <!-- <a-button v-if="controlStatus != ''" :class="[openDroneControl ? 'active-color' : 'unactive-color']" class="width-100" type="primary" |
| | | size="small" @click="openDeviceSetting"> |
| | | 飞行控制(<DesktopOutlined v-if="controlStatus === 'A'" /> <RobotFilled v-else />{{ controlStatus === 'A' ? 'A控' : 'B控'}}) |
| | | </a-button> |
| | | <a-button v-else :class="[openDroneControl ? 'active-color' : 'unactive-color']" class="width-100" type="primary" |
| | | size="small" @click="openDeviceSetting"> |
| | | 飞行控制 |
| | | </a-button> --> |
| | | <a-button :class="[openDroneControl ? 'active-color' : 'unactive-color']" class="width-100" type="primary" |
| | | size="small" @click="openDeviceSetting"> |
| | | 飞行控制 |
| | | </a-button> |
| | | </a-col> |
| | | </a-row> |
| | |
| | | <!-- 飞机直播 --> |
| | | <a-row class="p5" v-if="showAircraft"> |
| | | <!-- <a-spin :spinning="spinning"> --> |
| | | <Jessibuca v-if="aircraftUrl" @timeout="flyTimeout" :videoUrl="aircraftUrl" width="100%" height="300px" /> |
| | | <Jessibuca v-if="aircraftUrl" @timeout="flyTimeout" :videoUrl="aircraftUrl" width="100%" height="300px" /> |
| | | <!-- </a-spin> --> |
| | | </a-row> |
| | | <!-- 飞机图标信息 --> |
| | | <div class="osd-info flex-1"> |
| | | <!-- <a-row align="middle"> |
| | | <!-- <a-row align="middle"> |
| | | <a-col span="6"> |
| | | <a-tooltip title="向上质量"> |
| | | <span> |
| | |
| | | </a-tooltip> |
| | | </a-col> |
| | | </a-row> --> |
| | | <a-row align="middle"> |
| | | <a-col span="6" class="flex-row flex-align-center flex-justify-start"> |
| | | <a-tooltip title="飞行模式"> |
| | | <span> |
| | | <ControlOutlined class="fz16" /> |
| | | </span> |
| | | <span class="ml5">{{ deviceInfo.device ? EGear[deviceInfo.device?.gear] : str }}</span> |
| | | </a-tooltip> |
| | | </a-col> |
| | | <a-col span="6"> |
| | | <a-tooltip title="RTK"> |
| | | <span> |
| | | <TrademarkOutlined class="fz14" /> |
| | | </span> |
| | | <span class="ml5">{{ deviceInfo.device ? deviceInfo.device.position_state.rtk_number : str }}</span> |
| | | </a-tooltip> |
| | | </a-col> |
| | | <a-col span="6"> |
| | | <a-tooltip title="无人机电池电量"> |
| | | <span> |
| | | <ThunderboltOutlined class="fz14" /> |
| | | </span> |
| | | <span class="ml5">{{ deviceInfo.device && deviceInfo.device.battery.capacity_percent !== str ? |
| | | deviceInfo.device?.battery.capacity_percent + ' %' : str }}</span> |
| | | </a-tooltip> |
| | | </a-col> |
| | | </a-row> |
| | | <a-row align="middle" class="mt10"> |
| | | <a-col span="6"> |
| | | <a-tooltip title="海拔高度"> |
| | | <span>ASL</span> |
| | | <span class="ml5">{{ !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="高于起飞高度"> |
| | | <span>ALT</span> |
| | | <span class="ml5">{{ !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="水平速度"> |
| | | <span>H.S</span> |
| | | <span class="ml5">{{ !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="垂直速度"> |
| | | <span>V.S</span> |
| | | <span class="ml5">{{ !deviceInfo.device || deviceInfo.device.vertical_speed === str ? str : |
| | | deviceInfo.device?.vertical_speed.toFixed(2) + ' m/s' }}</span> |
| | | </a-tooltip> |
| | | </a-col> |
| | | </a-row> |
| | | <a-row align="middle"> |
| | | <a-col span="6" class="flex-row flex-align-center flex-justify-start"> |
| | | <a-tooltip title="飞行模式"> |
| | | <span> |
| | | <ControlOutlined class="fz16" /> |
| | | </span> |
| | | <span class="ml5">{{ deviceInfo.device ? EGear[deviceInfo.device?.gear] : str }}</span> |
| | | </a-tooltip> |
| | | </a-col> |
| | | <a-col span="6"> |
| | | <a-tooltip title="RTK"> |
| | | <span> |
| | | <TrademarkOutlined class="fz14" /> |
| | | </span> |
| | | <span class="ml5">{{ deviceInfo.device ? deviceInfo.device.position_state.rtk_number : str }}</span> |
| | | </a-tooltip> |
| | | </a-col> |
| | | <a-col span="6"> |
| | | <a-tooltip title="无人机电池电量"> |
| | | <span> |
| | | <ThunderboltOutlined class="fz14" /> |
| | | </span> |
| | | <span class="ml5">{{ deviceInfo.device && deviceInfo.device.battery.capacity_percent !== str ? |
| | | deviceInfo.device?.battery.capacity_percent + ' %' : str }}</span> |
| | | </a-tooltip> |
| | | </a-col> |
| | | </a-row> |
| | | <a-row align="middle" class="mt10"> |
| | | <a-col span="6"> |
| | | <a-tooltip title="海拔高度"> |
| | | <span>ASL</span> |
| | | <span class="ml5">{{ !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="高于起飞高度"> |
| | | <span>ALT</span> |
| | | <span class="ml5">{{ !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="水平速度"> |
| | | <span>H.S</span> |
| | | <span class="ml5">{{ !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="垂直速度"> |
| | | <span>V.S</span> |
| | | <span class="ml5">{{ !deviceInfo.device || deviceInfo.device.vertical_speed === str ? str : |
| | | deviceInfo.device?.vertical_speed.toFixed(2) + ' m/s' }}</span> |
| | | </a-tooltip> |
| | | </a-col> |
| | | </a-row> |
| | | </div> |
| | | <!-- 飞行控制 --> |
| | | <!-- <div class="fly-control flex-display"> |
| | |
| | | </div> |
| | | </div> |
| | | <!-- 飞行指令 --> |
| | | <DroneControlPanel v-model="openDroneControl" :sn="osdVisible.gateway_sn" :deviceInfo="deviceInfo" :payloads="osdVisible.payloads"> |
| | | <DroneControlPanel v-model="openDroneControl" :sn="osdVisible.gateway_sn" :deviceInfo="deviceInfo" |
| | | :payloads="osdVisible.payloads"> |
| | | </DroneControlPanel> |
| | | </div> |
| | | </div> |
| | |
| | | import { getLiveCapacity, startLivestream, stopLivestream } from '/@/api/manage' |
| | | import { |
| | | DeviceOsd, DeviceStatus, DockOsd, EGear, EModeCode, GatewayOsd, EDockModeCode, EDockModeText, EModeText, |
| | | NetworkStateQualityEnum, NetworkStateTypeEnum, RainfallEnum, DroneInDockEnum |
| | | NetworkStateQualityEnum, NetworkStateTypeEnum, RainfallEnum, DroneInDockEnum, DEVICE_NAME |
| | | } from '/@/types/device' |
| | | import pin from '/@/assets/icons/pin-2d8cf0.svg' |
| | | import M30 from '/@/assets/icons/m30.png' |
| | | import { |
| | | BorderOutlined, LineOutlined, CloseOutlined, ControlOutlined, TrademarkOutlined, ArrowDownOutlined, |
| | | BorderOutlined, LineOutlined, ControlOutlined, TrademarkOutlined, ArrowDownOutlined, |
| | | ThunderboltOutlined, SignalFilled, GlobalOutlined, HistoryOutlined, CloudUploadOutlined, RocketOutlined, |
| | | FieldTimeOutlined, CloudOutlined, CloudFilled, FolderOpenOutlined, RobotFilled, ArrowUpOutlined, CarryOutOutlined |
| | | FieldTimeOutlined, CloudOutlined, CloudFilled, FolderOpenOutlined, RobotFilled, ArrowUpOutlined, CarryOutOutlined, |
| | | DesktopOutlined, CloseOutlined, ContainerOutlined |
| | | } from '@ant-design/icons-vue' |
| | | import { EDeviceTypeName } from '../types' |
| | | import DockControlPanel from './g-map/DockControlPanel.vue' |
| | |
| | | import DroneControlPanel from './g-map/DroneControlPanel.vue' |
| | | import { useConnectMqtt } from './g-map/use-connect-mqtt' |
| | | import Cesium from './cesiumMap/cesium.vue' |
| | | import { convertTimestampToDate } from '/@/utils/time' |
| | | export default defineComponent({ |
| | | components: { |
| | | BorderOutlined, |
| | | LineOutlined, |
| | | CloseOutlined, |
| | | ContainerOutlined, |
| | | ControlOutlined, |
| | | TrademarkOutlined, |
| | | ThunderboltOutlined, |
| | |
| | | DockControlPanel, |
| | | DroneControlPanel, |
| | | CarryOutOutlined, |
| | | RocketOutlined |
| | | RocketOutlined, |
| | | DesktopOutlined, |
| | | }, |
| | | name: 'GMap', |
| | | props: {}, |
| | |
| | | const useGMapManageHook = useGMapManage() |
| | | const deviceTsaUpdateHook = deviceTsaUpdate() |
| | | interface SelectOption { |
| | | value: any, |
| | | label: string, |
| | | more?: any |
| | | } |
| | | value: any, |
| | | label: string, |
| | | more?: any |
| | | } |
| | | // 打开飞行控制 |
| | | const openDroneControl = ref(false) |
| | | const root = getRoot() |
| | | // 监控显示 |
| | | const showMonitor = ref(false) |
| | | // 操作显示 |
| | | const showOption = ref(false) |
| | | const mouseMode = ref(false) |
| | | const store = useMyStore() |
| | | // 机场直播地址 |
| | | const airPortUrl = ref('') |
| | | const airPortOption = ref(false) |
| | | // 设备列表 |
| | | const droneList = ref() |
| | | // 设备相机 |
| | |
| | | const showAircraft = ref(false) |
| | | // 飞机视频列表 |
| | | const aircraftList = ref([]) |
| | | const aircraSelected = ref('') |
| | | const aircraSelected = ref(undefined) |
| | | const aircrafIndex = ref(-1) |
| | | const state = reactive({ |
| | | currentType: '', |
| | | coverIndex: 0 |
| | |
| | | // 关闭窗口 |
| | | const closeOsdWindow = () => { |
| | | store.commit('SET_OSD_VISIBLE_INFO', false) |
| | | showAircraft.value = false |
| | | aircrafIndex.value = -1 |
| | | aircraftUrl.value = '' |
| | | showMonitor.value = false |
| | | airPortUrl.value = '' |
| | | airPortOption.value = false |
| | | showMonitor.value = false |
| | | } |
| | | |
| | | // 打开监控权限 |
| | |
| | | if (showMonitor.value) { |
| | | loadVideo() |
| | | } else { |
| | | onClose() |
| | | airPortUrl.value = '' |
| | | // onClose() |
| | | } |
| | | } |
| | | // 打开飞机监控 |
| | | const openAircra = () => { |
| | | const openAircra = (type: number) => { |
| | | showAircraft.value = !showAircraft.value |
| | | if (showAircraft.value) { |
| | | loadDroneVideo() |
| | | if (type === aircrafIndex.value) { |
| | | showAircraft.value = false |
| | | aircrafIndex.value = -1 |
| | | } else { |
| | | closeFly() |
| | | showAircraft.value = true |
| | | aircrafIndex.value = type |
| | | } |
| | | if (showAircraft.value) { |
| | | loadDroneVideo(type) |
| | | } else { |
| | | aircraftUrl.value = '' |
| | | // closeFly() |
| | | } |
| | | } |
| | | // 加载该设备的视频信息 |
| | |
| | | } |
| | | }) |
| | | .catch(error => { |
| | | showMonitor.value = false |
| | | airPortUrl.value = '' |
| | | message.error(error) |
| | | }) |
| | | } |
| | | // 加载无人机的视频信息 |
| | | const loadDroneVideo = async () => { |
| | | const loadDroneVideo = async (index: number) => { |
| | | aircraftList.value = [] |
| | | await getLiveCapacity({ id: store.state.common.projectId }) |
| | | .then(res => { |
| | |
| | | console.warn('warning: get live capacity is null!!!') |
| | | return |
| | | } |
| | | const resData: Array<[]> = res.data |
| | | const drone = res.data.find(v => v.sn === deviceInfo.dock.basic_osd.sub_device?.device_sn) |
| | | const temp: Array<SelectOption> = [] |
| | | if (drone) { |
| | |
| | | vadeosList: v.videos_list |
| | | } |
| | | }) |
| | | aircraSelected.value = aircraftList.value[0].value |
| | | aircraSelected.value = aircraftList.value[index].value |
| | | flyOnStart() |
| | | } else { |
| | | showAircraft.value = false |
| | |
| | | } |
| | | }) |
| | | .catch(error => { |
| | | showAircraft.value = false |
| | | aircrafIndex.value = -1 |
| | | message.error(error) |
| | | }) |
| | | } |
| | |
| | | try { |
| | | onStart() |
| | | } catch (e) { |
| | | onClose() |
| | | airPortUrl.value = '' |
| | | // onClose() |
| | | } |
| | | } |
| | | const flyTimeout = () => { |
| | | try { |
| | | flyOnStart() |
| | | } catch (e) { |
| | | closeFly() |
| | | aircraftUrl.value = '' |
| | | // closeFly() |
| | | } |
| | | } |
| | | // 设备开始播放 |
| | |
| | | if (res.code !== 0) return |
| | | airPortUrl.value = res.data.url |
| | | }) |
| | | } |
| | | // 下拉框选择变化 |
| | | const selectChange = async (e) => { |
| | | // await closeFly() |
| | | // setTimeout(async () => { |
| | | await flyOnStart() |
| | | // }, 500) |
| | | } |
| | | // 关闭设备直播 |
| | | const onClose = async () => { |
| | |
| | | // 打开机场操作 |
| | | const openFlySetting = () => { |
| | | openDroneControl.value = false |
| | | setDockControlPanelVisible(true) |
| | | airPortOption.value = !airPortOption.value |
| | | if (airPortOption.value) { |
| | | setDockControlPanelVisible(true) |
| | | } else { |
| | | setDockControlPanelVisible(false) |
| | | } |
| | | } |
| | | // 打开无人机操作 |
| | | const openDeviceSetting = () => { |
| | | setDockControlPanelVisible(false) |
| | | airPortOption.value = false |
| | | openDroneControl.value = !openDroneControl.value |
| | | } |
| | | // 飞行控制状态 |
| | | const controlStatus = computed(() => store.state.common.droneControlSource) |
| | | watch(() => store.state.deviceStatusEvent, |
| | | data => { |
| | | if (Object.keys(data.deviceOnline).length !== 0) { |
| | |
| | | aircraftUrl.value = '' |
| | | showAircraft.value = false |
| | | aircraftList.value = [] |
| | | aircraSelected.value = '' |
| | | aircraSelected.value = undefined |
| | | airPortUrl.value = '' |
| | | droneList.value = [] |
| | | if (deviceInfo.dock.basic_osd?.mode_code === 2) { |
| | |
| | | onCloseControlPanel, |
| | | } = useDockControl() |
| | | // 关闭设备控制方法 |
| | | const closeOperate = (sn:string) => { |
| | | const closeOperate = (sn: string) => { |
| | | airPortOption.value = false |
| | | if (deviceInfo.dock.basic_osd?.mode_code === 2) { |
| | | onCloseControlPanel(sn) |
| | | } else { |
| | |
| | | str, |
| | | EDockModeCode, |
| | | EDockModeText, |
| | | DEVICE_NAME, |
| | | EModeText, |
| | | dockControlPanelVisible, |
| | | setDockControlPanelVisible, |
| | |
| | | hmsInfo, |
| | | sn, |
| | | showMonitor, |
| | | showOption, |
| | | airPortUrl, |
| | | openMonitor, |
| | | droneIndex, |
| | |
| | | aircraftUrl, |
| | | aircraftList, |
| | | aircraSelected, |
| | | selectChange, |
| | | closeOperate, |
| | | closeOsdWindow, |
| | | openDroneControl, |
| | | openFlySetting, |
| | | openDeviceSetting, |
| | | airTimeout, |
| | | flyTimeout |
| | | flyTimeout, |
| | | aircrafIndex, |
| | | airPortOption, |
| | | controlStatus, |
| | | convertTimestampToDate |
| | | } |
| | | } |
| | | }) |
| | |
| | | display: none; |
| | | } |
| | | } |
| | | |
| | | &:deep(.ant-btn > .anticon + span, .ant-btn > span + .anticon, .ant-btn > .anticon + span, .ant-btn > span + .anticon) { |
| | | margin-left: 5px !important; |
| | | } |
| | | } |
| | | |
| | | .osd-panel { |
| | |
| | | left: 10px; |
| | | top: 10px; |
| | | width: 480px; |
| | | background: #000; |
| | | background-color: #232323; |
| | | color: #fff; |
| | | border-radius: 2px; |
| | | opacity: 0.8; |
| | | // opacity: 0.8; |
| | | } |
| | | |
| | | .overflow { |
| | |
| | | white-space: nowrap; |
| | | text-overflow: ellipsis; |
| | | } |
| | | |
| | | .osd-info { |
| | | margin: 15px 10px; |
| | | } |
| | | |
| | | .num { |
| | | padding: 0 5px; |
| | | background-color: #ff9900; |
| | |
| | | padding-right: 20px; |
| | | } |
| | | |
| | | .op_btn { |
| | | justify-content: space-between; |
| | | } |
| | | |
| | | .osd>div:not(.dock-control-panel) { |
| | | margin-top: 5px; |
| | | padding-left: 5px; |
| | | margin-bottom: 5px; |
| | | } |
| | | |
| | | .circle { |
| | |
| | | min-height: 2px; |
| | | border-radius: 2px; |
| | | } |
| | | .task_wrapper { |
| | | display: flex; |
| | | align-items: center; |
| | | font-size: 12px; |
| | | .task_content { |
| | | background-color: #41bbfa; |
| | | padding: 2px 4px; |
| | | } |
| | | |
| | | .task_content_way { |
| | | background-color: #19be6b; |
| | | } |
| | | .task_title { |
| | | margin-left: 5px; |
| | | font-size: 14px; |
| | | } |
| | | } |
| | | </style> |