akira
/
Cloud-API-Demo-Web
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

解决ts报错问题

pull/26/head
pmy 11 months ago
parent
b342b58f58
commit
e67e7c627c
20 changed files with 5543 additions and 865 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      .gitignore
  2. 5
      .gitignore copy
  3. 2
      index.html
  4. 4
      package-lock.json
  5. 2
      package.json
  6. 10
      src/api/http/config.ts
  7. 337
      src/components/GMap.vue
  8. 56
      src/components/LayersTree.vue
  9. 28
      src/components/g-map/DeviceSettingPopover.vue
  10. 33
      src/components/g-map/DockControlPanel.vue
  11. 10
      src/components/g-map/DroneControlInfoPanel.vue
  12. 198
      src/components/g-map/DroneControlPanel.vue
  13. 31
      src/components/g-map/DroneControlPopover.vue
  14. 76
      src/components/livestream-agora.vue
  15. 48
      src/components/task/TaskPanel.vue
  16. 30
      src/types/device.ts
  17. 15
      src/types/mapLayer.ts
  18. 18
      src/utils/genjson.ts
  19. 10
      src/vendors/coordtransform.ts
  20. 4677
      yarn.lock

2
.gitignore vendored
Unescape View File

@ -5,6 +5,8 @@ dist-ssr
*.local *.local
node_modules/ node_modules/
src/api/http/config
# Log files # Log files
npm-debug.log* npm-debug.log*
yarn-debug.log* yarn-debug.log*

5
.gitignore copy
Unescape View File

@ -1,5 +0,0 @@
node_modules
.DS_Store
dist
dist-ssr
*.local

2
index.html
Unescape View File

@ -4,7 +4,7 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>demo-web</title> <title>web</title>
</head> </head>
<body> <body>
<div id="demo-app"></div> <div id="demo-app"></div>

4
package-lock.json generated
Unescape View File

@ -1,11 +1,11 @@
{ {
"name": "demo-web", "name": "web",
"version": "0.0.1", "version": "0.0.1",
"lockfileVersion": 2, "lockfileVersion": 2,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "demo-web", "name": "web",
"version": "0.0.1", "version": "0.0.1",
"license": "ISC", "license": "ISC",
"dependencies": { "dependencies": {

2
package.json
Unescape View File

@ -1,5 +1,5 @@
{ {
"name": "demo-web", "name": "web",
"version": "0.0.1", "version": "0.0.1",
"scripts": { "scripts": {
"serve": "vite", "serve": "vite",

10
src/api/http/config.ts
Unescape View File

@ -1,12 +1,12 @@
export const CURRENT_CONFIG = { export const CURRENT_CONFIG = {
// license // license
appId: 'Please enter the app id.', // You need to go to the development website to apply. appId: '146410', // You need to go to the development website to apply.
appKey: 'Please enter the app key.', // You need to go to the development website to apply. appKey: 'd422e7fa14c4e98ea2100736bea195e', // You need to go to the development website to apply.
appLicense: 'Please enter the app license.', // You need to go to the development website to apply. appLicense: 'vNVYmp43PMf/a4Yb4nJ947S70mT8bZUnNILRZSLFLjLKaOUX58BgS3DKwgQQSsbDyOvTOSSAjrnoD5Xg/2eUXro2MxoxW3Yx55pVUDZ58I2FgHH3870I6fWw3BqWcF0W14lglfWFl5aMuvCsv84G3EnvjRfSGjklHrDiCNSf2Bo=', // You need to go to the development website to apply.
// http // http
baseURL: 'Please enter the backend access address prefix.', // This url must end with "/". Example: 'http://192.168.1.1:6789/' baseURL: 'http://192.168.2.239:6789/', // This url must end with "/". Example: 'http://192.168.1.1:6789/'
websocketURL: 'Please enter the WebSocket access address.', // Example: 'ws://192.168.1.1:6789/api/v1/ws' websocketURL: 'Please enter the WebSocket access address.', // Example: 'ws://192.168.1.1:6789/api/v1/ws'
// livestreaming // livestreaming
@ -31,6 +31,6 @@ export const CURRENT_CONFIG = {
// map // map
// You can apply on the AMap website. // You can apply on the AMap website.
amapKey: 'Please enter the amap key.', amapKey: '6e948d848f069e3fbcae5a7634ae3f8f',
} }

337
src/components/GMap.vue
Unescape View File

@ -3,42 +3,55 @@
<!-- 地图区域 --> <!-- 地图区域 -->
<div id="g-container" :style="{ width: '100%', height: '100%' }" /> <div id="g-container" :style="{ width: '100%', height: '100%' }" />
<!-- 绘制面板 --> <!-- 绘制面板 -->
<div <div class="g-action-panel" :style="{ right: drawVisible ? '316px' : '16px' }">
class="g-action-panel" <div :class="state.currentType === 'pin' ? 'g-action-item selection' : 'g-action-item'"
:style="{ right: drawVisible ? '316px' : '16px' }" @click="draw('pin', true)">
>
<div :class="state.currentType === 'pin' ? 'g-action-item selection' : 'g-action-item'" @click="draw('pin', true)">
<a><a-image :src="pin" :preview="false" /></a> <a><a-image :src="pin" :preview="false" /></a>
</div> </div>
<div :class="state.currentType === 'polyline' ? 'g-action-item selection' : 'g-action-item'" @click="draw('polyline', true)"> <div :class="state.currentType === 'polyline' ? 'g-action-item selection' : 'g-action-item'"
<a><LineOutlined :rotate="135" class="fz20"/></a> @click="draw('polyline', true)">
<a>
<LineOutlined :rotate="135" class="fz20" />
</a>
</div> </div>
<div :class="state.currentType === 'polygon' && !state.isFlightArea ? 'g-action-item selection' : 'g-action-item'" @click="draw('polygon', true)"> <div :class="state.currentType === 'polygon' && !state.isFlightArea ? 'g-action-item selection' : 'g-action-item'"
<a><BorderOutlined class="fz18" /></a> @click="draw('polygon', true)">
<a>
<BorderOutlined class="fz18" />
</a>
</div> </div>
<FlightAreaActionIcon class="g-action-item mt10" :class="{'selection': mouseMode && state.isFlightArea}" @select-action="selectFlightAreaAction" @click="selectFlightAreaAction"/> <FlightAreaActionIcon class="g-action-item mt10" :class="{ 'selection': mouseMode && state.isFlightArea }"
@select-action="selectFlightAreaAction" @click="selectFlightAreaAction" />
<div v-if="mouseMode" class="g-action-item" @click="draw('off', false)"> <div v-if="mouseMode" class="g-action-item" @click="draw('off', false)">
<a style="color: red;"><CloseOutlined /></a> <a style="color: red;">
<CloseOutlined />
</a>
</div> </div>
</div> </div>
<!-- 飞机OSD --> <!-- 飞机OSD -->
<div v-if="osdVisible.visible && !osdVisible.is_dock" v-drag-window class="osd-panel fz12"> <div v-if="osdVisible.visible && !osdVisible.is_dock" v-drag-window class="osd-panel fz12">
<div class="drag-title pl5 pr5 flex-align-center flex-row flex-justify-between" style="border-bottom: 1px solid #515151; height: 18%;"> <div class="drag-title pl5 pr5 flex-align-center flex-row flex-justify-between"
style="border-bottom: 1px solid #515151; height: 18%;">
<span>{{ osdVisible.callsign }}</span> <span>{{ osdVisible.callsign }}</span>
<span><a class="fz16" style="color: white;" @click="() => osdVisible.visible = false"><CloseOutlined /></a></span> <span><a class="fz16" style="color: white;" @click="() => osdVisible.visible = false">
<CloseOutlined />
</a></span>
</div> </div>
<div style="height: 82%;"> <div style="height: 82%;">
<div class="flex-column flex-align-center flex-justify-center" style="margin-top: -5px; padding-top: 25px; float: left; width: 60px; background: #2d2d2d;"> <div class="flex-column flex-align-center flex-justify-center"
style="margin-top: -5px; padding-top: 25px; float: left; width: 60px; background: #2d2d2d;">
<a-tooltip :title="osdVisible.model"> <a-tooltip :title="osdVisible.model">
<div style="width: 90%;" class="flex-column flex-align-center flex-justify-center"> <div style="width: 90%;" class="flex-column flex-align-center flex-justify-center">
<span><a-image :src="M30" :preview="false"/></span> <span><a-image :src="M30" :preview="false" /></span>
<span>{{ osdVisible.model }}</span> <span>{{ osdVisible.model }}</span>
</div> </div>
</a-tooltip> </a-tooltip>
</div> </div>
<div class="osd"> <div class="osd">
<a-row> <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)'">
{{ EModeCode[deviceInfo.device.mode_code] }}</a-col>
</a-row> </a-row>
<a-row> <a-row>
<a-col span="6"> <a-col span="6">
@ -49,15 +62,22 @@
</a-col> </a-col>
<a-col span="6"> <a-col span="6">
<a-tooltip title="RC Battery Level"> <a-tooltip title="RC Battery Level">
<span><ThunderboltOutlined class="fz14"/></span> <span>
<span class="ml10">{{ deviceInfo.gateway && deviceInfo.gateway.capacity_percent !== str ? deviceInfo.gateway?.capacity_percent + ' %' : deviceInfo.gateway?.capacity_percent }}</span> <ThunderboltOutlined class="fz14" />
</span>
<span class="ml10">{{ deviceInfo.gateway && deviceInfo.gateway.capacity_percent !== str ?
deviceInfo.gateway?.capacity_percent + ' %' : deviceInfo.gateway?.capacity_percent }}</span>
</a-tooltip> </a-tooltip>
</a-col> </a-col>
<a-col span="6"> <a-col span="6">
<a-tooltip title="Drone Battery Level"> <a-tooltip title="Drone Battery Level">
<span><ThunderboltOutlined class="fz14"/></span> <span>
<span class="ml10">{{ deviceInfo.device.battery.capacity_percent !== str ? deviceInfo.device.battery.capacity_percent + ' %' : deviceInfo.device.battery.capacity_percent }}</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-tooltip>
</a-col> </a-col>
</a-row> </a-row>
@ -65,7 +85,8 @@
<a-tooltip title="RTK Fixed"> <a-tooltip title="RTK Fixed">
<a-col span="6" class="flex-row flex-align-center flex-justify-start"> <a-col span="6" class="flex-row flex-align-center flex-justify-start">
<span>Fixed</span> <span>Fixed</span>
<span class="ml10 circle" :style="deviceInfo.device.position_state.is_fixed === 1 ? 'backgroud: rgb(25,190,107);' : ' background: red;'"></span> <span class="ml10 circle"
:style="deviceInfo.device.position_state.is_fixed === 1 ? 'backgroud: rgb(25,190,107);' : ' background: red;'"></span>
</a-col> </a-col>
</a-tooltip> </a-tooltip>
<a-col span="6"> <a-col span="6">
@ -76,7 +97,9 @@
</a-col> </a-col>
<a-col span="6"> <a-col span="6">
<a-tooltip title="RTK"> <a-tooltip title="RTK">
<span><TrademarkOutlined class="fz14"/></span> <span>
<TrademarkOutlined class="fz14" />
</span>
<span class="ml10">{{ deviceInfo.device.position_state.rtk_number }}</span> <span class="ml10">{{ deviceInfo.device.position_state.rtk_number }}</span>
</a-tooltip> </a-tooltip>
</a-col> </a-col>
@ -84,26 +107,33 @@
<a-row> <a-row>
<a-col span="6"> <a-col span="6">
<a-tooltip title="Flight Mode"> <a-tooltip title="Flight Mode">
<span><ControlOutlined class="fz16" /></span> <span>
<ControlOutlined class="fz16" />
</span>
<span class="ml10">{{ EGear[deviceInfo.device.gear] }}</span> <span class="ml10">{{ EGear[deviceInfo.device.gear] }}</span>
</a-tooltip> </a-tooltip>
</a-col> </a-col>
<a-col span="6"> <a-col span="6">
<a-tooltip title="Altitude above sea level"> <a-tooltip title="Altitude above sea level">
<span>ASL</span> <span>ASL</span>
<span class="ml10">{{ deviceInfo.device.height === str ? str : deviceInfo.device.height.toFixed(2) + ' m'}}</span> <span class="ml10">
{{ deviceInfo.device.height === str ? str : Number(deviceInfo.device.height).toFixed(2) + 'm' }}
</span>
</a-tooltip> </a-tooltip>
</a-col> </a-col>
<a-col span="6"> <a-col span="6">
<a-tooltip title="Altitude above takeoff level"> <a-tooltip title="Altitude above takeoff level">
<span>ALT</span> <span>ALT</span>
<span class="ml10">{{ deviceInfo.device.elevation === str ? str : deviceInfo.device.elevation.toFixed(2) + ' m' }}</span> <span class="ml10">
{{ deviceInfo.device.elevation === str ? str : Number(deviceInfo.device.elevation).toFixed(2) + ' m'
}}</span>
</a-tooltip> </a-tooltip>
</a-col> </a-col>
<a-col span="6"> <a-col span="6">
<a-tooltip title="Distance to Home Point"> <a-tooltip title="Distance to Home Point">
<span>H</span> <span>H</span>
<span class="ml10">{{ deviceInfo.device.home_distance === str ? str : deviceInfo.device.home_distance.toFixed(2) + ' m' }}</span> <span class="ml10">{{ deviceInfo.device.home_distance === str ?
str : Number(deviceInfo.device.home_distance).toFixed(2) + ' m' }}</span>
</a-tooltip> </a-tooltip>
</a-col> </a-col>
</a-row> </a-row>
@ -111,19 +141,22 @@
<a-col span="6"> <a-col span="6">
<a-tooltip title="Horizontal Speed"> <a-tooltip title="Horizontal Speed">
<span>H.S</span> <span>H.S</span>
<span class="ml10">{{ deviceInfo.device.horizontal_speed === str ? str : deviceInfo.device.horizontal_speed.toFixed(2) + ' m/s'}}</span> <span class="ml10">{{ deviceInfo.device.horizontal_speed === str ?
str : Number(deviceInfo.device.horizontal_speed).toFixed(2) + ' m/s' }}</span>
</a-tooltip> </a-tooltip>
</a-col> </a-col>
<a-col span="6"> <a-col span="6">
<a-tooltip title="Vertical Speed"> <a-tooltip title="Vertical Speed">
<span>V.S</span> <span>V.S</span>
<span class="ml10">{{ deviceInfo.device.vertical_speed === str ? str : deviceInfo.device.vertical_speed.toFixed(2) + ' m/s'}}</span> <span class="ml10">{{ deviceInfo.device.vertical_speed === str ? str :
Number(deviceInfo.device.vertical_speed).toFixed(2) + ' m/s' }}</span>
</a-tooltip> </a-tooltip>
</a-col> </a-col>
<a-col span="6"> <a-col span="6">
<a-tooltip title="Wind Speed"> <a-tooltip title="Wind Speed">
<span>W.S</span> <span>W.S</span>
<span class="ml10">{{ deviceInfo.device.wind_speed === str ? str : (deviceInfo.device.wind_speed / 10).toFixed(2) + ' m/s'}}</span> <span class="ml10">{{ deviceInfo.device.wind_speed === str ? str :
(Number(deviceInfo.device.wind_speed) / 10).toFixed(2) + ' m/s' }}</span>
</a-tooltip> </a-tooltip>
</a-col> </a-col>
</a-row> </a-row>
@ -131,54 +164,71 @@
</div> </div>
<div class="battery-slide" v-if="deviceInfo.device.battery.remain_flight_time !== 0"> <div class="battery-slide" v-if="deviceInfo.device.battery.remain_flight_time !== 0">
<div style="background: #535759;" class="width-100"></div> <div style="background: #535759;" class="width-100"></div>
<div class="capacity-percent" :style="{ width: deviceInfo.device.battery.capacity_percent + '%'}"></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="return-home" :style="{ width: deviceInfo.device.battery.return_home_power + '%' }"></div>
<div class="landing" :style="{ width: deviceInfo.device.battery.landing_power + '%'}"></div> <div class="landing" :style="{ width: deviceInfo.device.battery.landing_power + '%' }"></div>
<div class="white-point" :style="{ left: deviceInfo.device.battery.landing_power + '%'}"></div> <div class="white-point" :style="{ left: deviceInfo.device.battery.landing_power + '%' }"></div>
<div class="battery" :style="{ left: deviceInfo.device.battery.capacity_percent + '%' }"> <div class="battery" :style="{ left: deviceInfo.device.battery.capacity_percent + '%' }">
{{ Math.floor(deviceInfo.device.battery.remain_flight_time / 60) }}: {{ 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 }} {{ 10 > (deviceInfo.device.battery.remain_flight_time % 60) ? '0' :
'' }}{{ deviceInfo.device.battery.remain_flight_time % 60 }}
</div> </div>
</div> </div>
</div> </div>
<!-- 机场OSD --> <!-- 机场OSD -->
<div v-if="osdVisible.visible && osdVisible.is_dock" v-drag-window class="osd-panel fz12"> <div v-if="osdVisible.visible && osdVisible.is_dock" v-drag-window class="osd-panel fz12">
<div class="drag-title fz16 pl5 pr5 flex-align-center flex-row flex-justify-between" style="border-bottom: 1px solid #515151; height: 10%;"> <div class="drag-title 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>{{ osdVisible.gateway_callsign }}</span>
</div> </div>
<span><a style="color: white; position: absolute; top: 5px; right: 5px;" @click="() => osdVisible.visible = false"><CloseOutlined /></a></span> <span><a style="color: white; position: absolute; top: 5px; right: 5px;"
@click="() => osdVisible.visible = false">
<CloseOutlined />
</a></span>
<!-- 机场 --> <!-- 机场 -->
<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;"> <div class="flex-column flex-align-stretch flex-justify-center" style="width: 60px; background: #2d2d2d;">
<a-tooltip :title="osdVisible.model"> <a-tooltip :title="osdVisible.model">
<div class="flex-column flex-align-center flex-justify-center" style="width: 90%;"> <div class="flex-column flex-align-center flex-justify-center" style="width: 90%;">
<span><RobotFilled style="font-size: 48px;"/></span> <span>
<RobotFilled style="font-size: 48px;" />
</span>
<span class="mt10">Dock</span> <span class="mt10">Dock</span>
</div> </div>
</a-tooltip> </a-tooltip>
</div> </div>
<div class="osd flex-1" style="flex: 1"> <div class="osd flex-1" style="flex: 1">
<a-row> <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)'"> <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> {{ EDockModeCode[deviceInfo.dock.basic_osd?.mode_code] }}</a-col>
</a-row> </a-row>
<a-row> <a-row>
<a-col span="12"> <a-col span="12">
<a-tooltip title="Accumulated Running Time"> <a-tooltip title="Accumulated Running Time">
<span><HistoryOutlined /></span> <span>
<HistoryOutlined />
</span>
<span class="ml10"> <span class="ml10">
<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"> {{
<span v-if="(deviceInfo.dock.work_osd?.acc_time % 2592000) >= 86400"> {{ Math.floor((deviceInfo.dock.work_osd?.acc_time % 2592000) / 86400) }}d </span> Math.floor(deviceInfo.dock.work_osd?.acc_time / 2592000) }}m </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"> {{
<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> 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>{{ Math.floor(deviceInfo.dock.work_osd?.acc_time % 2592000 % 86400 % 3600 % 60) }} s</span>
</span> </span>
</a-tooltip> </a-tooltip>
</a-col> </a-col>
<a-col span="12"> <a-col span="12">
<a-tooltip title="Activation time"> <a-tooltip title="Activation time">
<span><FieldTimeOutlined /></span> <span>
<span class="ml10">{{ new Date((deviceInfo.dock.work_osd?.activation_time ?? 0) * 1000).toLocaleString() }} <FieldTimeOutlined />
</span>
<span class="ml10">{{ new Date((deviceInfo.dock.work_osd?.activation_time ?? 0) * 1000).toLocaleString()
}}
</span> </span>
</a-tooltip> </a-tooltip>
</a-col> </a-col>
@ -187,21 +237,29 @@
<a-col span="6"> <a-col span="6">
<a-tooltip title="Network State"> <a-tooltip title="Network State">
<span :style="qualityStyle"> <span :style="qualityStyle">
<span v-if="deviceInfo.dock.basic_osd?.network_state?.type === NetworkStateTypeEnum.FOUR_G"><SignalFilled /></span> <span v-if="deviceInfo.dock.basic_osd?.network_state?.type === NetworkStateTypeEnum.FOUR_G">
<span v-else><GlobalOutlined /></span> <SignalFilled />
</span>
<span v-else>
<GlobalOutlined />
</span> </span>
<span class="ml10" >{{ deviceInfo.dock.basic_osd?.network_state?.rate }} kb/s</span> </span>
<span class="ml10">{{ deviceInfo.dock.basic_osd?.network_state?.rate }} kb/s</span>
</a-tooltip> </a-tooltip>
</a-col> </a-col>
<a-col span="6"> <a-col span="6">
<a-tooltip title="The total number of times the dock has performed missions."> <a-tooltip title="The total number of times the dock has performed missions.">
<span><CarryOutOutlined /></span> <span>
<span class="ml10" >{{ deviceInfo.dock.work_osd?.job_number }} </span> <CarryOutOutlined />
</span>
<span class="ml10">{{ deviceInfo.dock.work_osd?.job_number }} </span>
</a-tooltip> </a-tooltip>
</a-col> </a-col>
<a-col span="6"> <a-col span="6">
<a-tooltip title="Media File Remain Upload"> <a-tooltip title="Media File Remain Upload">
<span><CloudUploadOutlined class="fz14"/></span> <span>
<CloudUploadOutlined class="fz14" />
</span>
<span class="ml10">{{ deviceInfo.dock.link_osd?.media_file_detail?.remain_upload }}</span> <span class="ml10">{{ deviceInfo.dock.link_osd?.media_file_detail?.remain_upload }}</span>
</a-tooltip> </a-tooltip>
</a-col> </a-col>
@ -211,10 +269,14 @@
<p>total: {{ deviceInfo.dock.basic_osd?.storage?.total }}</p> <p>total: {{ deviceInfo.dock.basic_osd?.storage?.total }}</p>
<p>used: {{ deviceInfo.dock.basic_osd?.storage?.used }}</p> <p>used: {{ deviceInfo.dock.basic_osd?.storage?.used }}</p>
</template> </template>
<span><FolderOpenOutlined /></span> <span>
<FolderOpenOutlined />
</span>
<span class="ml10" v-if="deviceInfo.dock.basic_osd?.storage?.total > 0"> <span class="ml10" v-if="deviceInfo.dock.basic_osd?.storage?.total > 0">
<a-progress type="circle" :width="20" :percent="deviceInfo.dock.basic_osd?.storage?.used * 100/ deviceInfo.dock.basic_osd?.storage?.total" <a-progress type="circle" :width="20"
:strokeWidth="20" :showInfo="false" :strokeColor="deviceInfo.dock.basic_osd?.storage?.used * 100 / deviceInfo.dock.basic_osd?.storage?.total > 80 ? 'red' : '#00ee8b' "/> :percent="deviceInfo.dock.basic_osd?.storage?.used * 100 / deviceInfo.dock.basic_osd?.storage?.total"
:strokeWidth="20" :showInfo="false"
:strokeColor="deviceInfo.dock.basic_osd?.storage?.used * 100 / deviceInfo.dock.basic_osd?.storage?.total > 80 ? 'red' : '#00ee8b'" />
</span> </span>
</a-tooltip> </a-tooltip>
</a-col> </a-col>
@ -223,7 +285,7 @@
<a-col span="6"> <a-col span="6">
<a-tooltip title="Wind Speed"> <a-tooltip title="Wind Speed">
<span>W.S</span> <span>W.S</span>
<span class="ml10">{{ (deviceInfo.dock.basic_osd?.wind_speed ?? str) + ' m/s'}}</span> <span class="ml10">{{ (deviceInfo.dock.basic_osd?.wind_speed ?? str) + ' m/s' }}</span>
</a-tooltip> </a-tooltip>
</a-col> </a-col>
<a-col span="6"> <a-col span="6">
@ -254,67 +316,84 @@
</a-col> </a-col>
<a-col span="6"> <a-col span="6">
<a-tooltip title="Working Voltage"> <a-tooltip title="Working Voltage">
<span style="border: 1px solid; border-radius: 50%; width: 18px; height: 18px; line-height: 16px; text-align: center; float: left;">V</span> <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> <span class="ml10">{{ (deviceInfo.dock.work_osd?.working_voltage ?? str) + ' mV' }}</span>
</a-tooltip> </a-tooltip>
</a-col> </a-col>
<a-col span="6"> <a-col span="6">
<a-tooltip title="Working Current"> <a-tooltip title="Working Current">
<span style="border: 1px solid; border-radius: 50%; width: 18px; height: 18px; line-height: 15px; text-align: center; float: left;" >A</span> <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> <span class="ml10">{{ (deviceInfo.dock.work_osd?.working_current ?? str) + ' mA' }}</span>
</a-tooltip> </a-tooltip>
</a-col> </a-col>
<a-col span="6"> <a-col span="6">
<a-tooltip title="Drone in dock"> <a-tooltip title="Drone in dock">
<span><RocketOutlined /></span> <span>
<RocketOutlined />
</span>
<span class="ml10">{{ deviceInfo.dock.basic_osd?.drone_in_dock }}</span> <span class="ml10">{{ deviceInfo.dock.basic_osd?.drone_in_dock }}</span>
</a-tooltip> </a-tooltip>
</a-col> </a-col>
</a-row> </a-row>
<a-row class="p5"> <a-row class="p5">
<a-col span="24"> <a-col span="24">
<a-button type="primary" :disabled="dockControlPanelVisible" size="small" @click="setDockControlPanelVisible(true)"> <a-button type="primary" :disabled="dockControlPanelVisible" size="small"
@click="setDockControlPanelVisible(true)">
Actions Actions
</a-button> </a-button>
</a-col> </a-col>
</a-row> </a-row>
<!-- 机场控制面板 --> <!-- 机场控制面板 -->
<DockControlPanel v-if="dockControlPanelVisible" :sn="osdVisible.gateway_sn" :deviceInfo="deviceInfo" @close-control-panel="onCloseControlPanel"> <DockControlPanel v-if="dockControlPanelVisible" :sn="osdVisible.gateway_sn" :deviceInfo="deviceInfo"
@close-control-panel="onCloseControlPanel">
</DockControlPanel> </DockControlPanel>
</div> </div>
</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;"> <div class="flex-column flex-align-stretch flex-justify-center" style="width: 60px; background: #2d2d2d;">
<a-tooltip :title="osdVisible.model"> <a-tooltip :title="osdVisible.model">
<div style="width: 90%;" class="flex-column flex-align-center flex-justify-center"> <div style="width: 90%;" class="flex-column flex-align-center flex-justify-center">
<span><a-image :src="M30" :preview="false"/></span> <span><a-image :src="M30" :preview="false" /></span>
<span>M30</span> <span>M30</span>
</div> </div>
</a-tooltip> </a-tooltip>
</div> </div>
<div class="osd flex-1"> <div class="osd flex-1">
<a-row> <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)'"> <a-col span="16"
{{ !deviceInfo.device ? EModeCode[EModeCode.Disconnected] : EModeCode[deviceInfo.device?.mode_code] }}</a-col> :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>
</a-row> </a-row>
<a-row> <a-row>
<a-col span="6"> <a-col span="6">
<a-tooltip title="Upward Quality"> <a-tooltip title="Upward Quality">
<span><SignalFilled /><ArrowUpOutlined style="font-size: 9px; vertical-align: top;" /></span> <span>
<SignalFilled />
<ArrowUpOutlined style="font-size: 9px; vertical-align: top;" />
</span>
<span class="ml10">{{ deviceInfo.dock.link_osd?.sdr?.up_quality }}</span> <span class="ml10">{{ deviceInfo.dock.link_osd?.sdr?.up_quality }}</span>
</a-tooltip> </a-tooltip>
</a-col> </a-col>
<a-col span="6"> <a-col span="6">
<a-tooltip title="Downward Quality"> <a-tooltip title="Downward Quality">
<span><SignalFilled /><ArrowDownOutlined style="font-size: 9px; vertical-align: top;" /></span> <span>
<SignalFilled />
<ArrowDownOutlined style="font-size: 9px; vertical-align: top;" />
</span>
<span class="ml10">{{ deviceInfo.dock.link_osd?.sdr?.down_quality }}</span> <span class="ml10">{{ deviceInfo.dock.link_osd?.sdr?.down_quality }}</span>
</a-tooltip> </a-tooltip>
</a-col> </a-col>
<a-col span="6"> <a-col span="6">
<a-tooltip title="Drone Battery Level"> <a-tooltip title="Drone Battery Level">
<span><ThunderboltOutlined class="fz14"/></span> <span>
<span class="ml10">{{ deviceInfo.device && deviceInfo.device.battery.capacity_percent !== str ? deviceInfo.device?.battery.capacity_percent + ' %' : str }}</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-tooltip>
</a-col> </a-col>
<a-col span="6"> <a-col span="6">
@ -323,10 +402,14 @@
<p>total: {{ deviceInfo.device?.storage?.total }}</p> <p>total: {{ deviceInfo.device?.storage?.total }}</p>
<p>used: {{ deviceInfo.device?.storage?.used }}</p> <p>used: {{ deviceInfo.device?.storage?.used }}</p>
</template> </template>
<span><FolderOpenOutlined /></span> <span>
<FolderOpenOutlined />
</span>
<span class="ml10" v-if="deviceInfo.device?.storage?.total > 0"> <span class="ml10" v-if="deviceInfo.device?.storage?.total > 0">
<a-progress type="circle" :width="20" :percent="deviceInfo.device?.storage?.used * 100/ deviceInfo.device?.storage?.total" <a-progress type="circle" :width="20"
:strokeWidth="20" :showInfo="false" :strokeColor="deviceInfo.device?.storage?.used * 100 / deviceInfo.device?.storage?.total > 80 ? 'red' : '#00ee8b' "/> :percent="deviceInfo.device?.storage?.used * 100 / deviceInfo.device?.storage?.total"
:strokeWidth="20" :showInfo="false"
:strokeColor="deviceInfo.device?.storage?.used * 100 / deviceInfo.device?.storage?.total > 80 ? 'red' : '#00ee8b'" />
</span> </span>
</a-tooltip> </a-tooltip>
</a-col> </a-col>
@ -335,7 +418,8 @@
<a-tooltip title="RTK Fixed"> <a-tooltip title="RTK Fixed">
<a-col span="6" class="flex-row flex-align-center flex-justify-start"> <a-col span="6" class="flex-row flex-align-center flex-justify-start">
<span>Fixed</span> <span>Fixed</span>
<span class="ml10 circle" :style="deviceInfo.device?.position_state.is_fixed === 1 ? 'backgroud: rgb(25,190,107);' : ' background: red;'"></span> <span class="ml10 circle"
:style="deviceInfo.device?.position_state.is_fixed === 1 ? 'backgroud: rgb(25,190,107);' : ' background: red;'"></span>
</a-col> </a-col>
</a-tooltip> </a-tooltip>
<a-col span="6"> <a-col span="6">
@ -346,7 +430,9 @@
</a-col> </a-col>
<a-col span="6"> <a-col span="6">
<a-tooltip title="RTK"> <a-tooltip title="RTK">
<span><TrademarkOutlined class="fz14"/></span> <span>
<TrademarkOutlined class="fz14" />
</span>
<span class="ml10">{{ deviceInfo.device ? deviceInfo.device.position_state.rtk_number : str }}</span> <span class="ml10">{{ deviceInfo.device ? deviceInfo.device.position_state.rtk_number : str }}</span>
</a-tooltip> </a-tooltip>
</a-col> </a-col>
@ -354,26 +440,32 @@
<a-row> <a-row>
<a-col span="6"> <a-col span="6">
<a-tooltip title="Flight Mode"> <a-tooltip title="Flight Mode">
<span><ControlOutlined class="fz16" /></span> <span>
<ControlOutlined class="fz16" />
</span>
<span class="ml10">{{ deviceInfo.device ? EGear[deviceInfo.device?.gear] : str }}</span> <span class="ml10">{{ deviceInfo.device ? EGear[deviceInfo.device?.gear] : str }}</span>
</a-tooltip> </a-tooltip>
</a-col> </a-col>
<a-col span="6"> <a-col span="6">
<a-tooltip title="Altitude above sea level"> <a-tooltip title="Altitude above sea level">
<span>ASL</span> <span>ASL</span>
<span class="ml10">{{ !deviceInfo.device || deviceInfo.device.height === str ? str : deviceInfo.device?.height.toFixed(2) + ' m'}}</span> <span class="ml10">{{ !deviceInfo.device || deviceInfo.device.height === str ? str :
Number(deviceInfo.device?.height).toFixed(2) + ' m' }}</span>
</a-tooltip> </a-tooltip>
</a-col> </a-col>
<a-col span="6"> <a-col span="6">
<a-tooltip title="Altitude above takeoff level"> <a-tooltip title="Altitude above takeoff level">
<span>ALT</span> <span>ALT</span>
<span class="ml10">{{ !deviceInfo.device || deviceInfo.device.elevation === str ? str : deviceInfo.device?.elevation.toFixed(2) + ' m' }}</span> <span class="ml10">{{ !deviceInfo.device || deviceInfo.device.elevation === str ? str :
Number(deviceInfo.device?.elevation).toFixed(2) + ' m' }}</span>
</a-tooltip> </a-tooltip>
</a-col> </a-col>
<a-col span="6"> <a-col span="6">
<a-tooltip title="Distance to Home Point"> <a-tooltip title="Distance to Home Point">
<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
<span class="ml10">{{ !deviceInfo.device || deviceInfo.device.home_distance === str ? str : deviceInfo.device?.home_distance.toFixed(2) + ' m' }}</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 :
Number(deviceInfo.device?.home_distance).toFixed(2) + ' m' }}</span>
</a-tooltip> </a-tooltip>
</a-col> </a-col>
</a-row> </a-row>
@ -381,47 +473,59 @@
<a-col span="6"> <a-col span="6">
<a-tooltip title="Horizontal Speed"> <a-tooltip title="Horizontal Speed">
<span>H.S</span> <span>H.S</span>
<span class="ml10">{{ !deviceInfo.device || deviceInfo.device?.horizontal_speed === str ? str : deviceInfo.device?.horizontal_speed.toFixed(2) + ' m/s'}}</span> <span class="ml10">{{ !deviceInfo.device || deviceInfo.device?.horizontal_speed === str ? str :
Number(deviceInfo.device?.horizontal_speed).toFixed(2) + ' m/s' }}</span>
</a-tooltip> </a-tooltip>
</a-col> </a-col>
<a-col span="6"> <a-col span="6">
<a-tooltip title="Vertical Speed"> <a-tooltip title="Vertical Speed">
<span>V.S</span> <span>V.S</span>
<span class="ml10">{{ !deviceInfo.device || deviceInfo.device.vertical_speed === str ? str : deviceInfo.device?.vertical_speed.toFixed(2) + ' m/s'}}</span> <span class="ml10">{{ !deviceInfo.device || deviceInfo.device.vertical_speed === str ? str :
Number(deviceInfo.device?.vertical_speed).toFixed(2) + ' m/s' }}</span>
</a-tooltip> </a-tooltip>
</a-col> </a-col>
<a-col span="6"> <a-col span="6">
<a-tooltip title="Wind Speed"> <a-tooltip title="Wind Speed">
<span>W.S</span> <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> <span class="ml10">{{ !deviceInfo.device || deviceInfo.device.wind_speed === str ? str :
(Number(deviceInfo.device?.wind_speed) / 10).toFixed(2) + ' m/s' }}</span>
</a-tooltip> </a-tooltip>
</a-col> </a-col>
</a-row> </a-row>
</div> </div>
</div> </div>
<div class="battery-slide" v-if="deviceInfo.device && deviceInfo.device.battery.remain_flight_time !== 0" style="border: 1px solid red"> <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 style="background: #535759;" class="width-100"></div>
<div class="capacity-percent" :style="{ width: deviceInfo.device.battery.capacity_percent + '%'}"></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="return-home" :style="{ width: deviceInfo.device.battery.return_home_power + '%' }"></div>
<div class="landing" :style="{ width: deviceInfo.device.battery.landing_power + '%'}"></div> <div class="landing" :style="{ width: deviceInfo.device.battery.landing_power + '%' }"></div>
<div class="white-point" :style="{ left: deviceInfo.device.battery.landing_power + '%'}"></div> <div class="white-point" :style="{ left: deviceInfo.device.battery.landing_power + '%' }"></div>
<div class="battery" :style="{ left: deviceInfo.device.battery.capacity_percent + '%' }"> <div class="battery" :style="{ left: deviceInfo.device.battery.capacity_percent + '%' }">
{{ Math.floor(deviceInfo.device.battery.remain_flight_time / 60) }}: {{ 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 }} {{ 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> <DroneControlPanel :sn="osdVisible.gateway_sn" :deviceInfo="deviceInfo" :payloads="osdVisible.payloads">
</DroneControlPanel>
</div> </div>
<!-- liveview --> <!-- liveview -->
<div class="liveview" v-if="livestreamOthersVisible" v-drag-window > <div class="liveview" v-if="livestreamOthersVisible" v-drag-window>
<div style="height: 40px; width: 100%" class="drag-title"></div> <div style="height: 40px; width: 100%" class="drag-title"></div>
<a style="position: absolute; right: 10px; top: 10px; font-size: 16px; color: white;" @click="closeLivestreamOthers"><CloseOutlined /></a> <a style="position: absolute; right: 10px; top: 10px; font-size: 16px; color: white;"
@click="closeLivestreamOthers">
<CloseOutlined />
</a>
<LivestreamOthers /> <LivestreamOthers />
</div> </div>
<div class="liveview" v-if="livestreamAgoraVisible" v-drag-window > <div class="liveview" v-if="livestreamAgoraVisible" v-drag-window>
<div style="height: 40px; width: 100%" class="drag-title"></div> <div style="height: 40px; width: 100%" class="drag-title"></div>
<a style="position: absolute; right: 10px; top: 10px; font-size: 16px; color: white;" @click="closeLivestreamAgora"><CloseOutlined /></a> <a style="position: absolute; right: 10px; top: 10px; font-size: 16px; color: white;"
@click="closeLivestreamAgora">
<CloseOutlined />
</a>
<LivestreamAgora /> <LivestreamAgora />
</div> </div>
</div> </div>
@ -543,7 +647,7 @@ export default defineComponent({
return_home_power: str, return_home_power: str,
}, },
latitude: 0, latitude: 0,
longitude: 0, longitude: 0
} as DeviceOsd } as DeviceOsd
}) })
const shareId = computed(() => { const shareId = computed(() => {
@ -575,7 +679,7 @@ export default defineComponent({
return 'color: red' return 'color: red'
}) })
watch(() => store.state.deviceStatusEvent, watch(() => store.state.deviceStatusEvent,
data => { (data: any) => {
if (Object.keys(data.deviceOnline).length !== 0) { if (Object.keys(data.deviceOnline).length !== 0) {
deviceTsaUpdateHook.initMarker(data.deviceOnline.domain, data.deviceOnline.device_callsign, data.deviceOnline.sn) deviceTsaUpdateHook.initMarker(data.deviceOnline.domain, data.deviceOnline.device_callsign, data.deviceOnline.sn)
store.state.deviceStatusEvent.deviceOnline = {} as DeviceStatus store.state.deviceStatusEvent.deviceOnline = {} as DeviceStatus
@ -629,9 +733,9 @@ export default defineComponent({
let exist = false let exist = false
if (Object.keys(event.mapElementCreat).length !== 0) { if (Object.keys(event.mapElementCreat).length !== 0) {
console.log(event.mapElementCreat) console.log(event.mapElementCreat)
const ele = event.mapElementCreat const ele: any = event.mapElementCreat
store.state.Layers.forEach(layer => { store.state.Layers.forEach(layer => {
layer.elements.forEach(e => { layer.elements.forEach((e: any) => {
if (e.id === ele.id) { if (e.id === ele.id) {
exist = true exist = true
console.log('true') console.log('true')
@ -716,7 +820,7 @@ export default defineComponent({
draw(isCircle ? MapDoodleEnum.CIRCLE : MapDoodleEnum.POLYGON, true, type) draw(isCircle ? MapDoodleEnum.CIRCLE : MapDoodleEnum.POLYGON, true, type)
} }
function getDrawCallback ({ obj }: { obj : any }) { function getDrawCallback ({ obj }: { obj: any }) {
if (state.isFlightArea) { if (state.isFlightArea) {
getDrawFlightAreaCallback(obj) getDrawFlightAreaCallback(obj)
return return
@ -735,7 +839,7 @@ export default defineComponent({
break break
} }
} }
async function postPinPositionResource (obj) { async function postPinPositionResource (obj: any) {
const req = getPinPositionResource(obj) const req = getPinPositionResource(obj)
setLayers(req) setLayers(req)
const coordinates = req.resource.content.geometry.coordinates const coordinates = req.resource.content.geometry.coordinates
@ -745,7 +849,7 @@ export default defineComponent({
obj.setExtData({ id: req.id, name: req.name }) obj.setExtData({ id: req.id, name: req.name })
store.state.coverMap[req.id] = [obj] store.state.coverMap[req.id] = [obj]
} }
async function postPolylineResource (obj) { async function postPolylineResource (obj: any) {
const req = getPolylineResource(obj) const req = getPolylineResource(obj)
setLayers(req) setLayers(req)
updateCoordinates('gcj02-wgs84', req) updateCoordinates('gcj02-wgs84', req)
@ -753,7 +857,7 @@ export default defineComponent({
obj.setExtData({ id: req.id, name: req.name }) obj.setExtData({ id: req.id, name: req.name })
store.state.coverMap[req.id] = [obj] store.state.coverMap[req.id] = [obj]
} }
async function postPolygonResource (obj) { async function postPolygonResource (obj: any) {
const req = getPoygonResource(obj) const req = getPoygonResource(obj)
setLayers(req) setLayers(req)
updateCoordinates('gcj02-wgs84', req) updateCoordinates('gcj02-wgs84', req)
@ -762,10 +866,10 @@ export default defineComponent({
store.state.coverMap[req.id] = [obj] store.state.coverMap[req.id] = [obj]
} }
function getPinPositionResource (obj) { function getPinPositionResource (obj: any) {
const position = obj.getPosition() const position = obj.getPosition()
const resource = generatePointContent(position) const resource = generatePointContent(position)
const name = obj._originOpts.title const name = obj._originOpts.title as string
const id = uuidv4() const id = uuidv4()
return { return {
id, id,
@ -773,7 +877,7 @@ export default defineComponent({
resource resource
} }
} }
function getPolylineResource (obj) { function getPolylineResource (obj: any) {
const path = obj.getPath() const path = obj.getPath()
const resource = generateLineContent(path) const resource = generateLineContent(path)
const { name, id } = getBaseInfo(obj._opts) const { name, id } = getBaseInfo(obj._opts)
@ -783,7 +887,7 @@ export default defineComponent({
resource resource
} }
} }
function getPoygonResource (obj) { function getPoygonResource (obj: any) {
const path = obj.getPath() const path = obj.getPath()
const resource = generatePolyContent(path) const resource = generatePolyContent(path)
const { name, id } = getBaseInfo(obj._opts) const { name, id } = getBaseInfo(obj._opts)
@ -793,8 +897,8 @@ export default defineComponent({
resource resource
} }
} }
function getBaseInfo (obj) { function getBaseInfo (obj: any) {
const name = obj.title const name = obj.title as string
const id = uuidv4() const id = uuidv4()
return { name, id } return { name, id }
} }
@ -804,7 +908,7 @@ export default defineComponent({
// layer.id = 'private_layer' + uuidv4() // layer.id = 'private_layer' + uuidv4()
// layer?.elements.push(resource) // layer?.elements.push(resource)
if (layer?.elements) { if (layer?.elements) {
;(layer?.elements as any[]).push(resource) ; (layer?.elements as any[]).push(resource)
} }
console.log('layers', layers) console.log('layers', layers)
store.commit('SET_LAYER_INFO', layers) store.commit('SET_LAYER_INFO', layers)
@ -908,7 +1012,6 @@ export default defineComponent({
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.g-map-wrapper { .g-map-wrapper {
height: 100%; height: 100%;
width: 100%; width: 100%;
@ -917,6 +1020,7 @@ export default defineComponent({
position: absolute; position: absolute;
top: 16px; top: 16px;
right: 16px; right: 16px;
.g-action-item { .g-action-item {
width: 28px; width: 28px;
height: 28px; height: 28px;
@ -927,23 +1031,26 @@ export default defineComponent({
text-align: center; text-align: center;
margin-bottom: 2px; margin-bottom: 2px;
} }
.g-action-item:hover { .g-action-item:hover {
border: 1px solid $primary; border: 1px solid $primary;
border-radius: 2px; border-radius: 2px;
} }
} }
.selection { .selection {
border: 1px solid $primary; border: 1px solid $primary;
border-radius: 2px; border-radius: 2px;
} }
// antd button 光晕 // antd button 光晕
&:deep(.ant-btn){ &:deep(.ant-btn) {
&::after { &::after {
display: none; display: none;
} }
} }
} }
.osd-panel { .osd-panel {
position: absolute; position: absolute;
margin-left: 10px; margin-left: 10px;
@ -955,7 +1062,8 @@ export default defineComponent({
border-radius: 2px; border-radius: 2px;
opacity: 0.8; opacity: 0.8;
} }
.osd > div:not(.dock-control-panel) {
.osd>div:not(.dock-control-panel) {
margin-top: 5px; margin-top: 5px;
padding-left: 5px; padding-left: 5px;
} }
@ -970,12 +1078,15 @@ export default defineComponent({
.capacity-percent { .capacity-percent {
background: #00ee8b; background: #00ee8b;
} }
.return-home { .return-home {
background: #ff9f0a; background: #ff9f0a;
} }
.landing { .landing {
background: #f5222d; background: #f5222d;
} }
.white-point { .white-point {
width: 4px; width: 4px;
height: 4px; height: 4px;
@ -983,6 +1094,7 @@ export default defineComponent({
background: white; background: white;
bottom: -0.5px; bottom: -0.5px;
} }
.battery { .battery {
background: #141414; background: #141414;
color: #00ee8b; color: #00ee8b;
@ -993,7 +1105,8 @@ export default defineComponent({
padding: 0 5px; padding: 0 5px;
} }
} }
.battery-slide > div {
.battery-slide>div {
position: absolute; position: absolute;
min-height: 2px; min-height: 2px;
border-radius: 2px; border-radius: 2px;

56
src/components/LayersTree.vue
Unescape View File

@ -1,27 +1,13 @@
<template> <template>
<span> <span>
<a-tree <a-tree draggable :defaultExpandAll="true" class="device-map-layers" @drop="onDrop" v-bind="$attrs">
draggable <a-tree-node :title="layer.name" :id="layer.id" v-for="layer in getTreeData" :key="layer.id">
:defaultExpandAll="true"
class="device-map-layers"
@drop="onDrop"
v-bind="$attrs"
>
<a-tree-node
:title="layer.name"
:id="layer.id"
v-for="layer in getTreeData"
:key="layer.id"
>
<!-- <template #title> <!-- <template #title>
{{layer.name}} {{layer.name}}
</template> --> </template> -->
<template v-if="layer.elements"> <template v-if="layer.elements">
<a-tree-node <a-tree-node v-for="resource in layer.elements" :id="getLayerTreeKey('resource', resource.id)"
v-for="resource in layer.elements" :key="getLayerTreeKey('resource', resource.id)">
:id="getLayerTreeKey('resource', resource.id)"
:key="getLayerTreeKey('resource', resource.id)"
>
<template #title> <template #title>
{{ resource.name }} {{ resource.name }}
</template> </template>
@ -55,7 +41,7 @@ const shareId = computed(() => {
const defaultId = computed(() => { const defaultId = computed(() => {
return store.state.layerBaseInfo.default return store.state.layerBaseInfo.default
}) })
async function onDrop ({ node, dragNode, dropPosition, dropToGap }: DropEvent) { async function onDrop({ node, dragNode, dropPosition, dropToGap }: DropEvent) {
let _treeData = props.layerData || [] let _treeData = props.layerData || []
let dragKey = dragNode.eventKey let dragKey = dragNode.eventKey
dragKey = dragKey.replaceAll('resource__', '') dragKey = dragKey.replaceAll('resource__', '')
@ -99,11 +85,11 @@ async function onDrop ({ node, dragNode, dropPosition, dropToGap }: DropEvent) {
</script> </script>
<style lang="scss"> <style lang="scss">
$antPrefix: 'ant'; $antPrefix: 'ant';
.device-map-layers.#{$antPrefix}-tree { .device-map-layers.#{$antPrefix}-tree {
color: #fff; color: #fff;
.#{$antPrefix}-tree-checkbox:not(.#{$antPrefix}-tree-checkbox-checked) .#{$antPrefix}-tree-checkbox:not(.#{$antPrefix}-tree-checkbox-checked) .#{$antPrefix}-tree-checkbox-inner {
.#{$antPrefix}-tree-checkbox-inner {
background-color: unset; background-color: unset;
} }
@ -112,7 +98,7 @@ $antPrefix: 'ant';
} }
// 第一个层级的 li，有左边距 16px // 第一个层级的 li，有左边距 16px
> li { >li {
padding-left: 16px; padding-left: 16px;
padding-right: 16px; padding-right: 16px;
} }
@ -128,14 +114,15 @@ $antPrefix: 'ant';
padding-top: 4px; padding-top: 4px;
} }
&.#{$antPrefix}-tree-treenode-disabled &.#{$antPrefix}-tree-treenode-disabled>.#{$antPrefix}-tree-node-content-wrapper {
> .#{$antPrefix}-tree-node-content-wrapper {
height: 20px; height: 20px;
span { span {
color: #fff; color: #fff;
} }
} }
> ul {
>ul {
width: 100%; width: 100%;
} }
@ -149,9 +136,9 @@ $antPrefix: 'ant';
.#{$antPrefix}-tree-checkbox { .#{$antPrefix}-tree-checkbox {
z-index: 1; z-index: 1;
} }
.#{$antPrefix}-tree-checkbox:hover::after, .#{$antPrefix}-tree-checkbox:hover::after,
.#{$antPrefix}-tree-checkbox-wrapper:hover .#{$antPrefix}-tree-checkbox-wrapper:hover .#{$antPrefix}-tree-checkbox::after {
.#{$antPrefix}-tree-checkbox::after {
visibility: collapse; visibility: collapse;
} }
@ -177,7 +164,7 @@ $antPrefix: 'ant';
background-color: transparent; background-color: transparent;
} }
> span { >span {
&::before { &::before {
// position: absolute; // position: absolute;
// right: 0; // right: 0;
@ -188,7 +175,7 @@ $antPrefix: 'ant';
} }
// 进度条组件需要相对最外层定位，进度条组件的position不能设置为relative // 进度条组件需要相对最外层定位，进度条组件的position不能设置为relative
> *:not(.progress-wrapper) { >*:not(.progress-wrapper) {
position: relative; position: relative;
z-index: 1; z-index: 1;
} }
@ -197,7 +184,8 @@ $antPrefix: 'ant';
&.#{$antPrefix}-tree-node-selected { &.#{$antPrefix}-tree-node-selected {
background-color: transparent; background-color: transparent;
color: #2d8cf0; color: #2d8cf0;
> span {
>span {
&::before { &::before {
background-color: #4f4f4f; background-color: #4f4f4f;
} }
@ -205,12 +193,12 @@ $antPrefix: 'ant';
} }
} }
} }
span.#{$antPrefix}-tree-switcher.#{$antPrefix}-tree-switcher_open
.#{$antPrefix}-tree-switcher-icon { span.#{$antPrefix}-tree-switcher.#{$antPrefix}-tree-switcher_open .#{$antPrefix}-tree-switcher-icon {
transform: rotate(0deg) !important; transform: rotate(0deg) !important;
} }
span.#{$antPrefix}-tree-switcher.#{$antPrefix}-tree-switcher_close
.#{$antPrefix}-tree-switcher-icon { span.#{$antPrefix}-tree-switcher.#{$antPrefix}-tree-switcher_close .#{$antPrefix}-tree-switcher-icon {
transform: rotate(0deg) !important; transform: rotate(0deg) !important;
} }
} }

28
src/components/g-map/DeviceSettingPopover.vue
Unescape View File

@ -1,25 +1,15 @@
<template> <template>
<a-popover :visible="state.sVisible" <a-popover :visible="state.sVisible" trigger="click" v-bind="$attrs" :overlay-class-name="overlayClassName"
trigger="click" placement="bottom" @visibleChange=";" v-on="$attrs">
v-bind="$attrs"
:overlay-class-name="overlayClassName"
placement="bottom"
@visibleChange=";"
v-on="$attrs">
<template #content> <template #content>
<div class="title-content"> <div class="title-content">
</div> </div>
<slot name="formContent" /> <slot name="formContent" />
<div class="uranus-popconfirm-btns"> <div class="uranus-popconfirm-btns">
<a-button size="sm" <a-button size="sm" @click="onCancel">
@click="onCancel"> {{ cancelText || '取消' }}
{{ cancelText || '取消'}}
</a-button> </a-button>
<a-button size="sm" <a-button size="sm" :loading="loading" type="primary" class="confirm-btn" @click="onConfirm">
:loading="loading"
type="primary"
class="confirm-btn"
@click="onConfirm">
{{ okText || '确定' }} {{ okText || '确定' }}
</a-button> </a-button>
</div> </div>
@ -84,21 +74,21 @@ function onCancel (e: Event) {
.device-setting-popconfirm { .device-setting-popconfirm {
min-width: 300px; min-width: 300px;
.uranus-popconfirm-btns{ .uranus-popconfirm-btns {
display: flex; display: flex;
padding: 10px 0px; padding: 10px 0px;
justify-content: flex-end; justify-content: flex-end;
.confirm-btn{ .confirm-btn {
margin-left: 10px; margin-left: 10px;
} }
} }
.form-content{ .form-content {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
.form-label{ .form-label {
padding-right: 10px; padding-right: 10px;
} }
} }

33
src/components/g-map/DockControlPanel.vue
Unescape View File

@ -1,8 +1,8 @@
<template> <template>
<div class="dock-control-panel"> <div class="dock-control-panel">
<!-- title --> <!-- title -->
<div class="dock-control-panel-header fz16 pl5 pr5 flex-align-center flex-row flex-justify-between"> <div class="dock-control-panel-header fz16 pl5 pr5 flex-align-center flex-row flex-justify-between">
<span>Device Control<span class="fz12 pl15">{{ props.sn}}</span></span> <span>Device Control<span class="fz12 pl15">{{ props.sn }}</span></span>
<span @click="closeControlPanel"> <span @click="closeControlPanel">
<CloseOutlined /> <CloseOutlined />
</span> </span>
@ -13,7 +13,8 @@
<div class="control-cmd-wrapper"> <div class="control-cmd-wrapper">
<div class="control-cmd-header"> <div class="control-cmd-header">
Device Remote Debug Device Remote Debug
<a-switch class="debug-btn" checked-children="开" un-checked-children="关" v-model:checked="debugStatus" @change="onDeviceStatusChange"/> <a-switch class="debug-btn" checked-children="开" un-checked-children="关" v-model:checked="debugStatus"
@change="onDeviceStatusChange" />
</div> </div>
<div class="control-cmd-box"> <div class="control-cmd-box">
<div v-for="(cmdItem, index) in cmdList" :key="cmdItem.cmdKey" class="control-cmd-item"> <div v-for="(cmdItem, index) in cmdList" :key="cmdItem.cmdKey" class="control-cmd-item">
@ -22,14 +23,15 @@
<div class="item-status">{{ cmdItem.status }}</div> <div class="item-status">{{ cmdItem.status }}</div>
</div> </div>
<div class="control-cmd-item-right"> <div class="control-cmd-item-right">
<a-button :disabled="!debugStatus || cmdItem.disabled" :loading="cmdItem.loading" size="small" type="primary" @click="sendControlCmd(cmdItem, index)"> <a-button :disabled="!debugStatus || cmdItem.disabled" :loading="cmdItem.loading" size="small"
type="primary" @click="sendControlCmd(cmdItem, index)">
{{ cmdItem.operateText }} {{ cmdItem.operateText }}
</a-button> </a-button>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
@ -116,7 +118,7 @@ async function sendControlCmd (cmdItem: DeviceCmdItem, index: number) {
</script> </script>
<style lang='scss' scoped> <style lang='scss' scoped>
.dock-control-panel{ .dock-control-panel {
position: absolute; position: absolute;
left: calc(100% + 10px); left: calc(100% + 10px);
top: 0px; top: 0px;
@ -126,28 +128,29 @@ async function sendControlCmd (cmdItem: DeviceCmdItem, index: number) {
color: #fff; color: #fff;
border-radius: 2px; border-radius: 2px;
.dock-control-panel-header{ .dock-control-panel-header {
border-bottom: 1px solid #515151; border-bottom: 1px solid #515151;
} }
.control-cmd-wrapper{ .control-cmd-wrapper {
.control-cmd-header{ .control-cmd-header {
font-size: 14px; font-size: 14px;
font-weight: 600; font-weight: 600;
padding: 10px 10px 0px; padding: 10px 10px 0px;
.debug-btn{ .debug-btn {
margin-left: 10px; margin-left: 10px;
border:1px solid #585858; border: 1px solid #585858;
} }
} }
.control-cmd-box{ .control-cmd-box {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-between; justify-content: space-between;
padding: 4px 10px; padding: 4px 10px;
.control-cmd-item{
.control-cmd-item {
width: 220px; width: 220px;
height: 58px; height: 58px;
display: flex; display: flex;
@ -157,11 +160,11 @@ async function sendControlCmd (cmdItem: DeviceCmdItem, index: number) {
margin: 4px 0; margin: 4px 0;
padding: 0 8px; padding: 0 8px;
.control-cmd-item-left{ .control-cmd-item-left {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.item-label{ .item-label {
font-weight: 700; font-weight: 700;
} }
} }

10
src/components/g-map/DroneControlInfoPanel.vue
Unescape View File

@ -1,7 +1,7 @@
<template> <template>
<div class="drone-control-info-wrap"> <div class="drone-control-info-wrap">
<a-textarea v-model:value="info" placeholder="drc info" :rows="5" disabled/> <a-textarea v-model:value="info" placeholder="drc info" :rows="5" disabled />
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
@ -23,12 +23,10 @@ watch(() => props.message, message => {
<style lang="scss" scoped> <style lang="scss" scoped>
.drone-control-info-wrap { .drone-control-info-wrap {
&::v-deep{ :deep(textarea.ant-input) {
textarea.ant-input {
background-color: #000; background-color: #000;
color: #fff; color: #fff;
white-space: pre-wrap; white-space: pre-wrap;
} }
}
} }
</style> </style>

198
src/components/g-map/DroneControlPanel.vue
Unescape View File

@ -4,145 +4,141 @@
<div class="drone-control-box"> <div class="drone-control-box">
<div class="box"> <div class="box">
<div class="row"> <div class="row">
<div class="drone-control"><Button :ghost="!flightController" size="small" @click="onClickFightControl">{{ flightController ? 'Exit Remote Control' : 'Enter Remote Control'}}</Button></div> <div class="drone-control"><Button :ghost="!flightController" size="small" @click="onClickFightControl">{{
flightController ? 'Exit Remote Control' : 'Enter Remote Control' }}</Button></div>
</div> </div>
<div class="row"> <div class="row">
<div class="drone-control-direction"> <div class="drone-control-direction">
<Button size="small" ghost @mousedown="onMouseDown(KeyCode.KEY_Q)" @onmouseup="onMouseUp"> <Button size="small" ghost @mousedown="onMouseDown(KeyCode.KEY_Q)" @onmouseup="onMouseUp">
<template #icon><UndoOutlined /></template><span class="word">Q</span> <template #icon>
<UndoOutlined />
</template><span class="word">Q</span>
</Button> </Button>
<Button size="small" ghost @mousedown="onMouseDown(KeyCode.KEY_W)" @onmouseup="onMouseUp"> <Button size="small" ghost @mousedown="onMouseDown(KeyCode.KEY_W)" @onmouseup="onMouseUp">
<template #icon><UpOutlined/></template><span class="word">W</span> <template #icon>
<UpOutlined />
</template><span class="word">W</span>
</Button> </Button>
<Button size="small" ghost @mousedown="onMouseDown(KeyCode.KEY_E)" @onmouseup="onMouseUp"> <Button size="small" ghost @mousedown="onMouseDown(KeyCode.KEY_E)" @onmouseup="onMouseUp">
<template #icon><RedoOutlined /></template><span class="word">E</span> <template #icon>
<RedoOutlined />
</template><span class="word">E</span>
</Button> </Button>
<Button size="small" ghost @mousedown="onMouseDown(KeyCode.ARROW_UP)" @onmouseup="onMouseUp"> <Button size="small" ghost @mousedown="onMouseDown(KeyCode.ARROW_UP)" @onmouseup="onMouseUp">
<template #icon><ArrowUpOutlined /></template> <template #icon>
<ArrowUpOutlined />
</template>
</Button> </Button>
<br /> <br />
<Button size="small" ghost @mousedown="onMouseDown(KeyCode.KEY_A)" @onmouseup="onMouseUp"> <Button size="small" ghost @mousedown="onMouseDown(KeyCode.KEY_A)" @onmouseup="onMouseUp">
<template #icon><LeftOutlined/></template><span class="word">A</span> <template #icon>
<LeftOutlined />
</template><span class="word">A</span>
</Button> </Button>
<Button size="small" ghost @mousedown="onMouseDown(KeyCode.KEY_S)" @onmouseup="onMouseUp"> <Button size="small" ghost @mousedown="onMouseDown(KeyCode.KEY_S)" @onmouseup="onMouseUp">
<template #icon><DownOutlined/></template><span class="word">S</span> <template #icon>
<DownOutlined />
</template><span class="word">S</span>
</Button> </Button>
<Button size="small" ghost @mousedown="onMouseDown(KeyCode.KEY_D)" @onmouseup="onMouseUp"> <Button size="small" ghost @mousedown="onMouseDown(KeyCode.KEY_D)" @onmouseup="onMouseUp">
<template #icon><RightOutlined/></template><span class="word">D</span> <template #icon>
<RightOutlined />
</template><span class="word">D</span>
</Button> </Button>
<Button size="small" ghost @mousedown="onMouseDown(KeyCode.ARROW_DOWN)" @onmouseup="onMouseUp"> <Button size="small" ghost @mousedown="onMouseDown(KeyCode.ARROW_DOWN)" @onmouseup="onMouseUp">
<template #icon><ArrowDownOutlined /></template> <template #icon>
<ArrowDownOutlined />
</template>
</Button> </Button>
</div> </div>
<Button type="primary" size="small" danger ghost @click="handleEmergencyStop" > <Button type="primary" size="small" danger ghost @click="handleEmergencyStop">
<template #icon><PauseCircleOutlined/></template><span>Break</span> <template #icon>
<PauseCircleOutlined />
</template><span>Break</span>
</Button> </Button>
</div> </div>
<div class="row"> <div class="row">
<DroneControlPopover <DroneControlPopover :visible="flyToPointPopoverData.visible" :loading="flyToPointPopoverData.loading"
:visible="flyToPointPopoverData.visible" @confirm="($event) => onFlyToConfirm(true)" @cancel="($event) => onFlyToConfirm(false)">
:loading="flyToPointPopoverData.loading"
@confirm="($event) => onFlyToConfirm(true)"
@cancel="($event) =>onFlyToConfirm(false)"
>
<template #formContent> <template #formContent>
<div class="form-content"> <div class="form-content">
<div> <div>
<span class="form-label">latitude:</span> <span class="form-label">latitude:</span>
<a-input-number v-model:value="flyToPointPopoverData.latitude"/> <a-input-number v-model:value="flyToPointPopoverData.latitude" />
</div> </div>
<div> <div>
<span class="form-label">longitude:</span> <span class="form-label">longitude:</span>
<a-input-number v-model:value="flyToPointPopoverData.longitude"/> <a-input-number v-model:value="flyToPointPopoverData.longitude" />
</div> </div>
<div> <div>
<span class="form-label">height(m):</span> <span class="form-label">height(m):</span>
<a-input-number v-model:value="flyToPointPopoverData.height"/> <a-input-number v-model:value="flyToPointPopoverData.height" />
</div> </div>
</div> </div>
</template> </template>
<Button size="small" ghost @click="onShowFlyToPopover" > <Button size="small" ghost @click="onShowFlyToPopover">
<span>Fly to</span> <span>Fly to</span>
</Button> </Button>
</DroneControlPopover> </DroneControlPopover>
<Button size="small" ghost @click="onStopFlyToPoint" > <Button size="small" ghost @click="onStopFlyToPoint">
<span>Stop Fly to</span> <span>Stop Fly to</span>
</Button> </Button>
<DroneControlPopover <DroneControlPopover :visible="takeoffToPointPopoverData.visible" :loading="takeoffToPointPopoverData.loading"
:visible="takeoffToPointPopoverData.visible" @confirm="($event) => onTakeoffToPointConfirm(true)" @cancel="($event) => onTakeoffToPointConfirm(false)">
:loading="takeoffToPointPopoverData.loading"
@confirm="($event) => onTakeoffToPointConfirm(true)"
@cancel="($event) =>onTakeoffToPointConfirm(false)"
>
<template #formContent> <template #formContent>
<div class="form-content"> <div class="form-content">
<div> <div>
<span class="form-label">latitude:</span> <span class="form-label">latitude:</span>
<a-input-number v-model:value="takeoffToPointPopoverData.latitude"/> <a-input-number v-model:value="takeoffToPointPopoverData.latitude" />
</div> </div>
<div> <div>
<span class="form-label">longitude:</span> <span class="form-label">longitude:</span>
<a-input-number v-model:value="takeoffToPointPopoverData.longitude"/> <a-input-number v-model:value="takeoffToPointPopoverData.longitude" />
</div> </div>
<div> <div>
<span class="form-label">height(m):</span> <span class="form-label">height(m):</span>
<a-input-number v-model:value="takeoffToPointPopoverData.height"/> <a-input-number v-model:value="takeoffToPointPopoverData.height" />
</div> </div>
<div> <div>
<span class="form-label">Safe Takeoff Altitude(m):</span> <span class="form-label">Safe Takeoff Altitude(m):</span>
<a-input-number v-model:value="takeoffToPointPopoverData.securityTakeoffHeight"/> <a-input-number v-model:value="takeoffToPointPopoverData.securityTakeoffHeight" />
</div> </div>
<div> <div>
<span class="form-label">Return-to-Home Altitude(m):</span> <span class="form-label">Return-to-Home Altitude(m):</span>
<a-input-number v-model:value="takeoffToPointPopoverData.rthAltitude"/> <a-input-number v-model:value="takeoffToPointPopoverData.rthAltitude" />
</div> </div>
<div> <div>
<span class="form-label">Lost Action:</span> <span class="form-label">Lost Action:</span>
<a-select <a-select v-model:value="takeoffToPointPopoverData.rcLostAction" style="width: 120px"
v-model:value="takeoffToPointPopoverData.rcLostAction" :options="LostControlActionInCommandFLightOptions"></a-select>
style="width: 120px"
:options="LostControlActionInCommandFLightOptions"
></a-select>
</div> </div>
<div> <div>
<span class="form-label">Wayline Lost Action:</span> <span class="form-label">Wayline Lost Action:</span>
<a-select <a-select v-model:value="takeoffToPointPopoverData.exitWaylineWhenRcLost" style="width: 120px"
v-model:value="takeoffToPointPopoverData.exitWaylineWhenRcLost" :options="WaylineLostControlActionInCommandFlightOptions"></a-select>
style="width: 120px"
:options="WaylineLostControlActionInCommandFlightOptions"
></a-select>
</div> </div>
<div> <div>
<span class="form-label">Return-to-Home Mode:</span> <span class="form-label">Return-to-Home Mode:</span>
<a-select <a-select v-model:value="takeoffToPointPopoverData.rthMode" style="width: 120px"
v-model:value="takeoffToPointPopoverData.rthMode" :options="RthModeInCommandFlightOptions"></a-select>
style="width: 120px"
:options="RthModeInCommandFlightOptions"
></a-select>
</div> </div>
<div> <div>
<span class="form-label">Commander Mode Lost Action:</span> <span class="form-label">Commander Mode Lost Action:</span>
<a-select <a-select v-model:value="takeoffToPointPopoverData.commanderModeLostAction" style="width: 120px"
v-model:value="takeoffToPointPopoverData.commanderModeLostAction" :options="CommanderModeLostActionInCommandFlightOptions"></a-select>
style="width: 120px"
:options="CommanderModeLostActionInCommandFlightOptions"
></a-select>
</div> </div>
<div> <div>
<span class="form-label">Commander Flight Mode:</span> <span class="form-label">Commander Flight Mode:</span>
<a-select <a-select v-model:value="takeoffToPointPopoverData.commanderFlightMode" style="width: 120px"
v-model:value="takeoffToPointPopoverData.commanderFlightMode" :options="CommanderFlightModeInCommandFlightOptions"></a-select>
style="width: 120px"
:options="CommanderFlightModeInCommandFlightOptions"
></a-select>
</div> </div>
<div> <div>
<span class="form-label">Commander Flight Height(m):</span> <span class="form-label">Commander Flight Height(m):</span>
<a-input-number v-model:value="takeoffToPointPopoverData.commanderFlightHeight"/> <a-input-number v-model:value="takeoffToPointPopoverData.commanderFlightHeight" />
</div> </div>
</div> </div>
</template> </template>
<Button size="small" ghost @click="onShowTakeoffToPointPopover" > <Button size="small" ghost @click="onShowTakeoffToPointPopover">
<span>Take off</span> <span>Take off</span>
</Button> </Button>
<div v-for="(cmdItem) in cmdList" :key="cmdItem.cmdKey" class="control-cmd-item"> <div v-for="(cmdItem) in cmdList" :key="cmdItem.cmdKey" class="control-cmd-item">
@ -151,10 +147,10 @@
</Button> </Button>
</div> </div>
<div> <div>
<Button size="small" ghost @click="openLivestreamAgora" > <Button size="small" ghost @click="openLivestreamAgora">
<span>Agora Live</span> <span>Agora Live</span>
</Button> </Button>
<Button size="small" ghost @click="openLivestreamOthers" > <Button size="small" ghost @click="openLivestreamOthers">
<span>RTMP/GB28181 Live</span> <span>RTMP/GB28181 Live</span>
</Button> </Button>
</div> </div>
@ -163,27 +159,21 @@
</div> </div>
<div class="box"> <div class="box">
<div class="row"> <div class="row">
<Select v-model:value="payloadSelectInfo.value" style="width: 110px; marginRight: 5px" :options="payloadSelectInfo.options" @change="handlePayloadChange"/> <Select v-model:value="payloadSelectInfo.value" style="width: 110px; margin-right: 5px"
:options="payloadSelectInfo.options" @change="handlePayloadChange" />
<div class="drone-control"> <div class="drone-control">
<Button type="primary" size="small" @click="onAuthPayload">Payload Control</Button> <Button type="primary" size="small" @click="onAuthPayload">Payload Control</Button>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<DroneControlPopover <DroneControlPopover :visible="gimbalResetPopoverData.visible" :loading="gimbalResetPopoverData.loading"
:visible="gimbalResetPopoverData.visible" @confirm="($event) => onGimbalResetConfirm(true)" @cancel="($event) => onGimbalResetConfirm(false)">
:loading="gimbalResetPopoverData.loading"
@confirm="($event) => onGimbalResetConfirm(true)"
@cancel="($event) =>onGimbalResetConfirm(false)"
>
<template #formContent> <template #formContent>
<div class="form-content"> <div class="form-content">
<div> <div>
<span class="form-label">reset mode:</span> <span class="form-label">reset mode:</span>
<a-select <a-select v-model:value="gimbalResetPopoverData.resetMode" style="width: 180px"
v-model:value="gimbalResetPopoverData.resetMode" :options="GimbalResetModeOptions"></a-select>
style="width: 180px"
:options="GimbalResetModeOptions"
></a-select>
</div> </div>
</div> </div>
</template> </template>
@ -207,21 +197,14 @@
<Button size="small" ghost @click="onTakeCameraPhoto"> <Button size="small" ghost @click="onTakeCameraPhoto">
<span>Take Photo</span> <span>Take Photo</span>
</Button> </Button>
<DroneControlPopover <DroneControlPopover :visible="zoomFactorPopoverData.visible" :loading="zoomFactorPopoverData.loading"
:visible="zoomFactorPopoverData.visible" @confirm="($event) => onZoomFactorConfirm(true)" @cancel="($event) => onZoomFactorConfirm(false)">
:loading="zoomFactorPopoverData.loading"
@confirm="($event) => onZoomFactorConfirm(true)"
@cancel="($event) =>onZoomFactorConfirm(false)"
>
<template #formContent> <template #formContent>
<div class="form-content"> <div class="form-content">
<div> <div>
<span class="form-label">camera type:</span> <span class="form-label">camera type:</span>
<a-select <a-select v-model:value="zoomFactorPopoverData.cameraType" style="width: 120px"
v-model:value="zoomFactorPopoverData.cameraType" :options="ZoomCameraTypeOptions"></a-select>
style="width: 120px"
:options="ZoomCameraTypeOptions"
></a-select>
</div> </div>
<div> <div>
<span class="form-label">zoom factor:</span> <span class="form-label">zoom factor:</span>
@ -233,33 +216,26 @@
<span class="word" @click=";">Zoom</span> <span class="word" @click=";">Zoom</span>
</Button> </Button>
</DroneControlPopover> </DroneControlPopover>
<DroneControlPopover <DroneControlPopover :visible="cameraAimPopoverData.visible" :loading="cameraAimPopoverData.loading"
:visible="cameraAimPopoverData.visible" @confirm="($event) => onCameraAimConfirm(true)" @cancel="($event) => onCameraAimConfirm(false)">
:loading="cameraAimPopoverData.loading"
@confirm="($event) => onCameraAimConfirm(true)"
@cancel="($event) =>onCameraAimConfirm(false)"
>
<template #formContent> <template #formContent>
<div class="form-content"> <div class="form-content">
<div> <div>
<span class="form-label">camera type:</span> <span class="form-label">camera type:</span>
<a-select <a-select v-model:value="cameraAimPopoverData.cameraType" style="width: 120px"
v-model:value="cameraAimPopoverData.cameraType" :options="CameraTypeOptions"></a-select>
style="width: 120px"
:options="CameraTypeOptions"
></a-select>
</div> </div>
<div> <div>
<span class="form-label">locked:</span> <span class="form-label">locked:</span>
<a-switch v-model:checked="cameraAimPopoverData.locked"/> <a-switch v-model:checked="cameraAimPopoverData.locked" />
</div> </div>
<div> <div>
<span class="form-label">x:</span> <span class="form-label">x:</span>
<a-input-number v-model:value="cameraAimPopoverData.x" :min="0" :max="1"/> <a-input-number v-model:value="cameraAimPopoverData.x" :min="0" :max="1" />
</div> </div>
<div> <div>
<span class="form-label">y:</span> <span class="form-label">y:</span>
<a-input-number v-model:value="cameraAimPopoverData.y" :min="0" :max="1"/> <a-input-number v-model:value="cameraAimPopoverData.y" :min="0" :max="1" />
</div> </div>
</div> </div>
</template> </template>
@ -772,10 +748,10 @@ watch(() => errorInfo, (errorInfo) => {
</script> </script>
<style lang='scss' scoped> <style lang='scss' scoped>
.drone-control-wrapper{ .drone-control-wrapper {
// border-bottom: 1px solid #515151; // border-bottom: 1px solid #515151;
.drone-control-header{ .drone-control-header {
font-size: 14px; font-size: 14px;
font-weight: 600; font-weight: 600;
padding: 10px 10px 0px; padding: 10px 10px 0px;
@ -784,39 +760,35 @@ watch(() => errorInfo, (errorInfo) => {
.drone-control-box { .drone-control-box {
display: flex; display: flex;
flex-wrap: 1; flex-wrap: 1;
.box { .box {
width: 50%; width: 50%;
padding: 5px; padding: 5px;
border: 0.5px solid rgba(255,255,255,0.3); border: 0.5px solid rgba(255, 255, 255, 0.3);
.row { .row {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
padding: 2px; padding: 2px;
+ .row{ +.row {
margin-bottom: 6px; margin-bottom: 6px;
} }
&::v-deep{ :deep(.ant-btn) {
.ant-btn{
font-size: 12px; font-size: 12px;
padding: 0px 4px; padding: 0px 4px;
margin-right: 5px; margin-right: 5px;
} }
} }
}
.drone-control{
&::v-deep{
.ant-select-single:not(.ant-select-customize-input) .ant-select-selector{ .drone-control {
:deep(.ant-select-single:not(.ant-select-customize-input) .ant-select-selector) {
padding: 0 2px; padding: 0 2px;
} }
} }
}
.drone-control-direction{ .drone-control-direction {
margin-right: 10px; margin-right: 10px;
.ant-btn { .ant-btn {
@ -824,7 +796,7 @@ watch(() => errorInfo, (errorInfo) => {
margin-right: 0; margin-right: 0;
} }
.word{ .word {
width: 12px; width: 12px;
margin-left: 2px; margin-left: 2px;
font-size: 12px; font-size: 12px;

31
src/components/g-map/DroneControlPopover.vue
Unescape View File

@ -1,25 +1,15 @@
<template> <template>
<a-popover :visible="state.sVisible" <a-popover :visible="state.sVisible" trigger="click" v-bind="$attrs" :overlay-class-name="overlayClassName"
trigger="click" placement="bottom" @visibleChange=";" v-on="$attrs">
v-bind="$attrs"
:overlay-class-name="overlayClassName"
placement="bottom"
@visibleChange=";"
v-on="$attrs">
<template #content> <template #content>
<div class="title-content"> <div class="title-content">
</div> </div>
<slot name="formContent" /> <slot name="formContent" />
<div class="uranus-popconfirm-btns"> <div class="uranus-popconfirm-btns">
<a-button size="sm" <a-button size="sm" @click="onCancel">
@click="onCancel"> {{ cancelText || 'cancel' }}
{{ cancelText || 'cancel'}}
</a-button> </a-button>
<a-button size="sm" <a-button size="sm" :loading="loading" type="primary" class="confirm-btn" @click="onConfirm">
:loading="loading"
type="primary"
class="confirm-btn"
@click="onConfirm">
{{ okText || 'ok' }} {{ okText || 'ok' }}
</a-button> </a-button>
</div> </div>
@ -84,21 +74,21 @@ function onCancel (e: Event) {
.drone-control-popconfirm { .drone-control-popconfirm {
min-width: 300px; min-width: 300px;
.uranus-popconfirm-btns{ .uranus-popconfirm-btns {
display: flex; display: flex;
padding: 10px 0px; padding: 10px 0px;
justify-content: flex-end; justify-content: flex-end;
.confirm-btn{ .confirm-btn {
margin-left: 10px; margin-left: 10px;
} }
} }
.form-content{ .form-content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
> div { >div {
display: flex; display: flex;
margin-bottom: 5px; margin-bottom: 5px;
@ -106,9 +96,6 @@ function onCancel (e: Event) {
flex: 1 0 60px; flex: 1 0 60px;
margin-right: 10px; margin-right: 10px;
} }
> div {
}
} }
} }
} }

76
src/components/livestream-agora.vue
Unescape View File

@ -6,36 +6,17 @@
<template v-if="livePara.liveState && dronePara.isDockLive"> <template v-if="livePara.liveState && dronePara.isDockLive">
<span class="mr10">Lens:</span> <span class="mr10">Lens:</span>
<a-radio-group v-model:value="dronePara.lensSelected" button-style="solid"> <a-radio-group v-model:value="dronePara.lensSelected" button-style="solid">
<a-radio-button v-for="lens in dronePara.lensList" :key="lens" :value="lens">{{lens}}</a-radio-button> <a-radio-button v-for="lens in dronePara.lensList" :key="lens" :value="lens">{{ lens }}</a-radio-button>
</a-radio-group> </a-radio-group>
</template> </template>
<template v-else> <template v-else>
<a-select <a-select style="width:150px" placeholder="Select Drone" v-model:value="dronePara.droneSelected">
style="width:150px" <a-select-option v-for="item in dronePara.droneList" :key="item.value" :value="item.value"
placeholder="Select Drone" @click="onDroneSelect(item)">{{ item.label }}</a-select-option>
v-model:value="dronePara.droneSelected"
>
<a-select-option
v-for="item in dronePara.droneList"
:key="item.value"
:value="item.value"
@click="onDroneSelect(item)"
>{{ item.label }}</a-select-option
>
</a-select> </a-select>
<a-select <a-select class="ml10" style="width:150px" placeholder="Select Camera" v-model:value="dronePara.cameraSelected">
class="ml10" <a-select-option v-for="item in dronePara.cameraList" :key="item.value" :value="item.value"
style="width:150px" @click="onCameraSelect(item)">{{ item.label }}</a-select-option>
placeholder="Select Camera"
v-model:value="dronePara.cameraSelected"
>
<a-select-option
v-for="item in dronePara.cameraList"
:key="item.value"
:value="item.value"
@click="onCameraSelect(item)"
>{{ item.label }}</a-select-option
>
</a-select> </a-select>
<!-- <a-select <!-- <a-select
class="ml10" class="ml10"
@ -51,18 +32,9 @@
> >
</a-select> --> </a-select> -->
</template> </template>
<a-select <a-select class="ml10" style="width:150px" placeholder="Select Clarity" @select="onClaritySelect">
class="ml10" <a-select-option v-for="item in clarityList" :key="item.value" :value="item.value">{{ item.label
style="width:150px" }}</a-select-option>
placeholder="Select Clarity"
@select="onClaritySelect"
>
<a-select-option
v-for="item in clarityList"
:key="item.value"
:value="item.value"
>{{ item.label }}</a-select-option
>
</a-select> </a-select>
</div> </div>
<p class="fz16 mt10"> <p class="fz16 mt10">
@ -72,30 +44,18 @@
<span class="mr10">AppId:</span> <span class="mr10">AppId:</span>
<a-input v-model:value="agoraPara.appid" placeholder="APP ID"></a-input> <a-input v-model:value="agoraPara.appid" placeholder="APP ID"></a-input>
<span class="ml10">Token:</span> <span class="ml10">Token:</span>
<a-input <a-input class="ml10" v-model:value="agoraPara.token" placeholder="Token"></a-input>
class="ml10"
v-model:value="agoraPara.token"
placeholder="Token"
></a-input>
<span class="ml10">Channel:</span> <span class="ml10">Channel:</span>
<a-input <a-input class="ml10" v-model:value="agoraPara.channel" placeholder="Channel"></a-input>
class="ml10"
v-model:value="agoraPara.channel"
placeholder="Channel"
></a-input>
</div> </div>
<div class="mt20 flex-row flex-justify-center flex-align-center"> <div class="mt20 flex-row flex-justify-center flex-align-center">
<a-button v-if="livePara.liveState && dronePara.isDockLive" type="primary" large @click="onSwitch">Switch Lens</a-button> <a-button v-if="livePara.liveState && dronePara.isDockLive" type="primary" large @click="onSwitch">Switch
Lens</a-button>
<a-button v-else type="primary" large @click="onStart">Play</a-button> <a-button v-else type="primary" large @click="onStart">Play</a-button>
<a-button class="ml20" type="primary" large @click="onStop" <a-button class="ml20" type="primary" large @click="onStop">Stop</a-button>
>Stop</a-button <a-button class="ml20" type="primary" large @click="onUpdateQuality">Update Clarity</a-button>
> <a-button v-if="!livePara.liveState || !dronePara.isDockLive" class="ml20" type="primary" large
<a-button class="ml20" type="primary" large @click="onUpdateQuality" @click="onRefresh">Refresh Live Capacity</a-button>
>Update Clarity</a-button
>
<a-button v-if="!livePara.liveState || !dronePara.isDockLive" class="ml20" type="primary" large @click="onRefresh"
>Refresh Live Capacity</a-button
>
</div> </div>
</div> </div>
</template> </template>

48
src/components/task/TaskPanel.vue
Unescape View File

@ -20,13 +20,13 @@
<template #status="{ record }"> <template #status="{ record }">
<div> <div>
<div class="flex-display flex-align-center"> <div class="flex-display flex-align-center">
<span class="circle-icon" :style="{backgroundColor: formatTaskStatus(record).color}"></span> <span class="circle-icon" :style="{ backgroundColor: formatTaskStatus(record).color }"></span>
{{ formatTaskStatus(record).text }} {{ formatTaskStatus(record).text }}
<a-tooltip v-if="!!record.code" placement="bottom" arrow-point-at-center > <a-tooltip v-if="!!record.code" placement="bottom" arrow-point-at-center>
<template #title> <template #title>
<div>{{ getCodeMessage(record.code) }}</div> <div>{{ getCodeMessage(record.code) }}</div>
</template> </template>
<exclamation-circle-outlined class="ml5" :style="{color: commonColor.WARN, fontSize: '16px' }"/> <exclamation-circle-outlined class="ml5" :style="{ color: commonColor.WARN, fontSize: '16px' }" />
</a-tooltip> </a-tooltip>
</div> </div>
<div v-if="record.status === TaskStatus.Carrying"> <div v-if="record.status === TaskStatus.Carrying">
@ -46,16 +46,18 @@
<template #media_upload="{ record }"> <template #media_upload="{ record }">
<div> <div>
<div class="flex-display flex-align-center"> <div class="flex-display flex-align-center">
<span class="circle-icon" :style="{backgroundColor: formatMediaTaskStatus(record).color}"></span> <span class="circle-icon" :style="{ backgroundColor: formatMediaTaskStatus(record).color }"></span>
{{ formatMediaTaskStatus(record).text }} {{ formatMediaTaskStatus(record).text }}
</div> </div>
<div class="pl15"> <div class="pl15">
{{ formatMediaTaskStatus(record).number }} {{ formatMediaTaskStatus(record).number }}
<a-tooltip v-if="formatMediaTaskStatus(record).status === MediaStatus.ToUpload" placement="bottom" arrow-point-at-center > <a-tooltip v-if="formatMediaTaskStatus(record).status === MediaStatus.ToUpload" placement="bottom"
arrow-point-at-center>
<template #title> <template #title>
<div>Upload now</div> <div>Upload now</div>
</template> </template>
<UploadOutlined class="ml5" :style="{color: commonColor.BLUE, fontSize: '16px' }" @click="onUploadMediaFileNow(record.job_id)"/> <UploadOutlined class="ml5" :style="{ color: commonColor.BLUE, fontSize: '16px' }"
@click="onUploadMediaFileNow(record.job_id)" />
</a-tooltip> </a-tooltip>
</div> </div>
</div> </div>
@ -63,31 +65,16 @@
<!-- 操作 --> <!-- 操作 -->
<template #action="{ record }"> <template #action="{ record }">
<div class="action-area"> <div class="action-area">
<a-popconfirm <a-popconfirm v-if="record.status === TaskStatus.Wait" title="Are you sure you want to delete flight task?"
v-if="record.status === TaskStatus.Wait" ok-text="Yes" cancel-text="No" @confirm="onDeleteTask(record.job_id)">
title="Are you sure you want to delete flight task?"
ok-text="Yes"
cancel-text="No"
@confirm="onDeleteTask(record.job_id)"
>
<a-button type="primary" size="small">Delete</a-button> <a-button type="primary" size="small">Delete</a-button>
</a-popconfirm> </a-popconfirm>
<a-popconfirm <a-popconfirm v-if="record.status === TaskStatus.Carrying" title="Are you sure you want to suspend?"
v-if="record.status === TaskStatus.Carrying" ok-text="Yes" cancel-text="No" @confirm="onSuspendTask(record.job_id)">
title="Are you sure you want to suspend?"
ok-text="Yes"
cancel-text="No"
@confirm="onSuspendTask(record.job_id)"
>
<a-button type="primary" size="small">Suspend</a-button> <a-button type="primary" size="small">Suspend</a-button>
</a-popconfirm> </a-popconfirm>
<a-popconfirm <a-popconfirm v-if="record.status === TaskStatus.Paused" title="Are you sure you want to resume?"
v-if="record.status === TaskStatus.Paused" ok-text="Yes" cancel-text="No" @confirm="onResumeTask(record.job_id)">
title="Are you sure you want to resume?"
ok-text="Yes"
cancel-text="No"
@confirm="onResumeTask(record.job_id)"
>
<a-button type="primary" size="small">Resume</a-button> <a-button type="primary" size="small">Resume</a-button>
</a-popconfirm> </a-popconfirm>
</div> </div>
@ -328,19 +315,19 @@ async function onUploadMediaFileNow (jobId: string) {
.plan-panel-wrapper { .plan-panel-wrapper {
width: 100%; width: 100%;
padding: 16px; padding: 16px;
.plan-table { .plan-table {
background: #fff; background: #fff;
margin-top: 10px; margin-top: 10px;
} }
.action-area { .action-area {
&::v-deep { :deep(.ant-btn) {
.ant-btn {
margin-right: 10px; margin-right: 10px;
margin-bottom: 10px; margin-bottom: 10px;
} }
} }
}
.circle-icon { .circle-icon {
display: inline-block; display: inline-block;
@ -352,6 +339,7 @@ async function onUploadMediaFileNow (jobId: string) {
flex-shrink: 0; flex-shrink: 0;
} }
} }
.header { .header {
width: 100%; width: 100%;
height: 60px; height: 60px;

30
src/types/device.ts
Unescape View File

@ -22,7 +22,7 @@ export enum DOMAIN {
export enum DRONE_TYPE { export enum DRONE_TYPE {
M30 = 67, M30 = 67,
M300 = 60, M300 = 60,
Mavic3EnterpriseAdvanced= 77, Mavic3EnterpriseAdvanced = 77,
M350 = 89, M350 = 89,
M3D = 91, M3D = 91,
} }
@ -184,7 +184,7 @@ export interface OnlineDevice {
// 固件升级类型 // 固件升级类型
export enum DeviceFirmwareTypeEnum { export enum DeviceFirmwareTypeEnum {
ToUpgraded = 3, // 普通升级 ToUpgraded = 3, // 普通升级
ConsistencyUpgrade =2, // 一致性升级 ConsistencyUpgrade = 2, // 一致性升级
} }
// 固件升级状态 // 固件升级状态
@ -245,7 +245,7 @@ export interface OSDVisible {
is_dock: boolean, is_dock: boolean,
gateway_sn: string, gateway_sn: string,
gateway_callsign: string, gateway_callsign: string,
payloads: null | PayloadInfo [], payloads: null | PayloadInfo[],
} }
export interface GatewayOsd { export interface GatewayOsd {
@ -299,7 +299,11 @@ export interface DeviceOsd {
height_limit?: number;// 限高设置 height_limit?: number;// 限高设置
distance_limit_status?: DistanceLimitStatus;// 限远开关 distance_limit_status?: DistanceLimitStatus;// 限远开关
obstacle_avoidance?: ObstacleAvoidance;// 飞行器避障开关设置 obstacle_avoidance?: ObstacleAvoidance;// 飞行器避障开关设置
cameras?: DeviceOsdCamera[] cameras?: DeviceOsdCamera[],
storage: {
used: number,
total: number
}
} }
export enum NetworkStateTypeEnum { export enum NetworkStateTypeEnum {
@ -361,10 +365,6 @@ export interface DockBasicOsd {
is_calibration: number, is_calibration: number,
quality: number, quality: number,
}, },
storage?: {
total: number,
used: number,
},
mode_code: number, mode_code: number,
cover_state: number, cover_state: number,
supplement_light_state: number, supplement_light_state: number,
@ -382,6 +382,10 @@ export interface DockBasicOsd {
device_online_status: number, device_online_status: number,
device_paired: number, device_paired: number,
}, },
storage: {
total: number,
used: number,
},
// live_capacity?: LiveCapacity; // 直播能力 // live_capacity?: LiveCapacity; // 直播能力
// live_status?: Array<LiveStatus>; // 直播状态 // live_status?: Array<LiveStatus>; // 直播状态
} }
@ -402,7 +406,7 @@ export interface DockLinkOsd {
down_quality: string, down_quality: string,
frequency_band: number, frequency_band: number,
}, },
wireless_link?:{ // 图传链路<会包括4G和sdr信息 wireless_link?: { // 图传链路<会包括4G和sdr信息
dongle_number: number, // dongle 数量 dongle_number: number, // dongle 数量
['4g_link_state']: FourGLinkStateEnum, // 4g_link_state ['4g_link_state']: FourGLinkStateEnum, // 4g_link_state
sdr_link_state: SdrLinkStateEnum, // sdr链路连接状态 sdr_link_state: SdrLinkStateEnum, // sdr链路连接状态
@ -429,7 +433,7 @@ export interface DockWorkOsd {
activation_time: number, activation_time: number,
maintain_status?: { maintain_status?: {
maintain_status_array: MaintainStatus[] maintain_status_array: MaintainStatus[]
} },
electric_supply_voltage: number, electric_supply_voltage: number,
working_voltage: string, working_voltage: string,
working_current: string, working_current: string,
@ -437,17 +441,17 @@ export interface DockWorkOsd {
voltage: number, voltage: number,
temperature: number, temperature: number,
switch: number, switch: number,
} },
drone_battery_maintenance_info?: { // 飞行器电池保养信息 drone_battery_maintenance_info?: { // 飞行器电池保养信息
maintenance_state: DroneBatteryStateEnum, // 保养状态 maintenance_state: DroneBatteryStateEnum, // 保养状态
maintenance_time_left: number, // 电池保养剩余时间(小时) maintenance_time_left: number, // 电池保养剩余时间(小时)
} },
} }
export interface DockOsd { export interface DockOsd {
basic_osd: DockBasicOsd, basic_osd: DockBasicOsd,
link_osd: DockLinkOsd, link_osd: DockLinkOsd,
work_osd: DockWorkOsd work_osd: DockWorkOsd,
} }
export enum EModeCode { export enum EModeCode {

15
src/types/mapLayer.ts
Unescape View File

@ -1,4 +1,5 @@
import { MapElementEnum } from '/@/constants/map' import { MapElementEnum } from '/@/constants/map'
import { GeojsonFeature } from '/@/utils/genjson'
export interface mapLayerStyle { export interface mapLayerStyle {
background: string background: string
@ -38,7 +39,7 @@ export interface mapLayer {
style: mapLayerStyle style: mapLayerStyle
elements: any elements: any
} }
export interface elementGroupsReq{ export interface elementGroupsReq {
groupId: string groupId: string
isDistributed: boolean isDistributed: boolean
} }
@ -48,17 +49,7 @@ export interface PostElementsBody {
resource: { resource: {
type: MapElementEnum, type: MapElementEnum,
user_name?: string, user_name?: string,
content: { content: GeojsonFeature,
type:string,
properties:{
color:string,
clampToGround:boolean
},
geometry:{
type:string,
coordinates:unknown
}
},
} }
} }

18
src/utils/genjson.ts
Unescape View File

@ -1,6 +1,4 @@
import { import { MapGeographicPosition } from '/@/types/map'
MapGeographicPosition,
} from '/@/types/map'
export type GeojsonCoordinate = [number, number, number?] export type GeojsonCoordinate = [number, number, number?]
@ -52,7 +50,19 @@ export interface GeojsonCircle {
} }
} }
export type GeojsonFeature = GeojsonLine | GeojsonPolygon | GeojsonPoint | GeojsonCircle export interface contentType {
type: string,
properties: {
color: string,
clampToGround: boolean
},
geometry: {
type: string,
coordinates: unknown
}
}
export type GeojsonFeature = GeojsonLine | GeojsonPolygon | GeojsonPoint | GeojsonCircle | contentType
export function geographic2Coordinate (position: MapGeographicPosition): GeojsonCoordinate { export function geographic2Coordinate (position: MapGeographicPosition): GeojsonCoordinate {
const coordinates: GeojsonCoordinate = [position.longitude, position.latitude] const coordinates: GeojsonCoordinate = [position.longitude, position.latitude]

10
src/vendors/coordtransform.js → src/vendors/coordtransform.ts vendored
Unescape View File

@ -13,7 +13,7 @@ const ee = 0.00669342162296594323;
* @param lat * @param lat
* @returns {*[]} * @returns {*[]}
*/ */
export function wgs84togcj02(lng, lat) { export function wgs84togcj02(lng: number, lat: number) {
if (out_of_china(lng, lat)) { if (out_of_china(lng, lat)) {
return [lng, lat] return [lng, lat]
} }
@ -38,7 +38,7 @@ export function wgs84togcj02(lng, lat) {
* @param lat * @param lat
* @returns {*[]} * @returns {*[]}
*/ */
export function gcj02towgs84(lng, lat) { export function gcj02towgs84(lng: number, lat: number) {
var lat = +lat; var lat = +lat;
var lng = +lng; var lng = +lng;
if (out_of_china(lng, lat)) { if (out_of_china(lng, lat)) {
@ -58,7 +58,7 @@ export function wgs84togcj02(lng, lat) {
} }
} }
function transformlat(lng, lat) { function transformlat(lng: number, lat: number) {
var ret = -100.0 + 2.0 * lng + 3.0 * lat + 0.2 * lat * lat + 0.1 * lng * lat + 0.2 * Math.sqrt(Math.abs(lng)); var ret = -100.0 + 2.0 * lng + 3.0 * lat + 0.2 * lat * lat + 0.1 * lng * lat + 0.2 * Math.sqrt(Math.abs(lng));
ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0; ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0;
ret += (20.0 * Math.sin(lat * PI) + 40.0 * Math.sin(lat / 3.0 * PI)) * 2.0 / 3.0; ret += (20.0 * Math.sin(lat * PI) + 40.0 * Math.sin(lat / 3.0 * PI)) * 2.0 / 3.0;
@ -66,7 +66,7 @@ function transformlat(lng, lat) {
return ret return ret
} }
export function transformlng(lng, lat) { export function transformlng(lng: number, lat: number) {
var ret = 300.0 + lng + 2.0 * lat + 0.1 * lng * lng + 0.1 * lng * lat + 0.1 * Math.sqrt(Math.abs(lng)); var ret = 300.0 + lng + 2.0 * lat + 0.1 * lng * lng + 0.1 * lng * lat + 0.1 * Math.sqrt(Math.abs(lng));
ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0; ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0;
ret += (20.0 * Math.sin(lng * PI) + 40.0 * Math.sin(lng / 3.0 * PI)) * 2.0 / 3.0; ret += (20.0 * Math.sin(lng * PI) + 40.0 * Math.sin(lng / 3.0 * PI)) * 2.0 / 3.0;
@ -80,6 +80,6 @@ export function transformlng(lng, lat) {
* @param lat * @param lat
* @returns {boolean} * @returns {boolean}
*/ */
function out_of_china(lng, lat) { function out_of_china(lng: number, lat: number) {
return (lng < 72.004 || lng > 137.8347) || ((lat < 0.8293 || lat > 55.8271) || false); return (lng < 72.004 || lng > 137.8347) || ((lat < 0.8293 || lat > 55.8271) || false);
} }

4677
yarn.lock
View File

File diff suppressed because it is too large Load Diff
Write Preview
Loading…
Cancel
Save