| | |
| | | <template> |
| | | <div class="g-map-wrapper"> |
| | | <!-- 地图区域 --> |
| | | <div id="g-container" :style="{ width: '100%', height: '100%' }" > |
| | | <Cesium /> |
| | | </div> |
| | | <div id="g-container" :style="{ width: '100%', height: '100%' }" /> |
| | | <!-- 绘制面板 --> |
| | | <div |
| | | class="g-action-panel" |
| | |
| | | </div> |
| | | </div> |
| | | <!-- 飞机OSD --> |
| | | <!-- <div v-if="osdVisible.visible && !osdVisible.is_dock" class="osd-panel fz12"> |
| | | <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> |
| | | <span><a class="fz16" style="color: white;" @click="() => osdVisible.visible = false"><CloseOutlined /></a></span> |
| | |
| | | {{ 10 > (deviceInfo.device.battery.remain_flight_time % 60) ? '0' : ''}}{{deviceInfo.device.battery.remain_flight_time % 60 }} |
| | | </div> |
| | | </div> |
| | | </div> --> |
| | | </div> |
| | | <!-- 机场OSD --> |
| | | <!-- <div v-if="osdVisible.visible && osdVisible.is_dock" class="osd-panel fz12"> |
| | | <div v-if="osdVisible.visible && osdVisible.is_dock" class="osd-panel fz12"> |
| | | <div class="fz16 pl5 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="() => osdVisible.visible = false"><CloseOutlined /></a></span> |
| | | </div> |
| | | < 机场 --> |
| | | <!-- <div class ="flex-display" style="border-bottom: 1px solid #515151;"> |
| | | <!-- 机场 --> |
| | | <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"> |
| | | <div class="flex-column flex-align-center flex-justify-center" style="width: 90%;"> |
| | |
| | | </a-button> |
| | | </a-col> |
| | | </a-row> |
| | | <!机场控制面板 --> |
| | | <!-- <DockControlPanel v-if="dockControlPanelVisible" :sn="osdVisible.gateway_sn" :deviceInfo="deviceInfo" @close-control-panel="onCloseControlPanel"> --> |
| | | <!-- </DockControlPanel> --> |
| | | <!-- </div> --> |
| | | <!-- </div> --> |
| | | <!-- 机场控制面板 --> |
| | | <DockControlPanel v-if="dockControlPanelVisible" :sn="osdVisible.gateway_sn" :deviceInfo="deviceInfo" @close-control-panel="onCloseControlPanel"> |
| | | </DockControlPanel> |
| | | </div> |
| | | </div> |
| | | <!-- 飞机--> |
| | | <!-- <div class ="flex-display"> |
| | | <div class ="flex-display"> |
| | | <div class="flex-column flex-align-stretch flex-justify-center" style="width: 60px; background: #2d2d2d;"> |
| | | <a-tooltip :title="osdVisible.model"> |
| | | <div style="width: 90%;" class="flex-column flex-align-center flex-justify-center"> |
| | |
| | | </a-col> |
| | | </a-row> |
| | | </div> |
| | | </div> --> |
| | | <!-- <div class="battery-slide" v-if="deviceInfo.device && deviceInfo.device.battery.remain_flight_time !== 0" style="border: 1px solid red"> --> |
| | | <!-- <div style="background: #535759;" class="width-100"></div> |
| | | </div> |
| | | <div class="battery-slide" v-if="deviceInfo.device && deviceInfo.device.battery.remain_flight_time !== 0" style="border: 1px solid red"> |
| | | <div style="background: #535759;" class="width-100"></div> |
| | | <div class="capacity-percent" :style="{ width: deviceInfo.device.battery.capacity_percent + '%'}"></div> |
| | | <div class="return-home" :style="{ width: deviceInfo.device.battery.return_home_power + '%'}"></div> |
| | | <div class="landing" :style="{ width: deviceInfo.device.battery.landing_power + '%'}"></div> |
| | |
| | | <div class="battery" :style="{ left: deviceInfo.device.battery.capacity_percent + '%' }"> |
| | | {{ Math.floor(deviceInfo.device.battery.remain_flight_time / 60) }}: |
| | | {{ 10 > (deviceInfo.device.battery.remain_flight_time % 60) ? '0' : ''}}{{deviceInfo.device.battery.remain_flight_time % 60 }} |
| | | </div> --> |
| | | <!-- </div> --> |
| | | </div> |
| | | </div> |
| | | <!-- 飞行指令 --> |
| | | <!-- <DroneControlPanel :sn="osdVisible.gateway_sn" :deviceInfo="deviceInfo" :payloads="osdVisible.payloads"></DroneControlPanel> --> |
| | | <!-- </div> --> |
| | | <DroneControlPanel :sn="osdVisible.gateway_sn" :deviceInfo="deviceInfo" :payloads="osdVisible.payloads"></DroneControlPanel> |
| | | </div> |
| | | </div> |
| | | </template> |
| | | |
| | |
| | | generatePointContent, |
| | | generatePolyContent |
| | | } from '../utils/map-layer-utils' |
| | | import Cesium from './cesiumMap/cesium.vue' |
| | | import { postElementsReq } from '/@/api/layer' |
| | | import { MapDoodleType, MapElementEnum } from '/@/constants/map' |
| | | import { useGMapManage } from '/@/hooks/use-g-map' |
| | |
| | | |
| | | .g-action-panel { |
| | | position: absolute; |
| | | top: 32px; |
| | | top: 16px; |
| | | right: 16px; |
| | | .g-action-item { |
| | | width: 28px; |