当前位置： 首页 > news >正文

大疆上云API demo前端代码理解

news 来源：原创 2025/6/10 5:45:54

一、devices.vue

根据提供的代码片段，这是一个Vue 3 + TypeScript + Ant Design Vue的设备管理页面。我将分析并提供完整实现方案：

功能分析

  1. ​设备类型切换​：通过水平菜单在Aircraft和Dock类型间切换
  2. ​设备列表展示​：表格展示设备信息（型号、SN、名称等）
  3. ​设备管理功能​：
    • 编辑设备名称
    • 固件升级（仅Dock设备）
    • 查看设备日志（仅Dock设备）
    • 查看HMS信息（仅Dock设备）
    • 删除设备
  4. ​视觉特性​：
    • Dock设备子行样式
    • 在线状态图标
    • 分页和表格优化

关键功能实现说明

  1. ​设备类型切换​

    • 使用a-menu组件实现设备类型切换
    • 当前设备类型存储在current响应式变量中

  2. ​设备列表管理​

    • 表格使用a-table组件，配置了固定高度(600px)和分页
    • 使用rowClassName实现Dock子设备的特殊样式
    • 通过expandRows自动展开Dock设备行

  3. ​设备操作功能​

    • ​编辑名称​：通过editableData管理编辑状态，保存时调用API
    • ​删除设备​：二次确认模式，防止误操作
    • ​固件升级​：使用DeviceFirmwareUpgradeModal独立组件
    • ​设备日志/HMS​：使用抽屉组件展示详细信息

  4. ​状态显示优化​

    • 在线状态使用颜色区分（绿点在线，红点离线）
    • 不同操作使用不同颜色图标（蓝色常规操作，红色危险操作）

  5. ​性能优化​

    • 滚动加载支持大量数据显示
    • 分页控制数据量
    • API调用错误处理

二、dock.vue

功能概述

  1. ​设备概览展示​：

    • 以卡片形式展示所有 Dock 设备列表
    • 每个卡片显示 Dock 名称和绑定的无人机状态
    • 支持点击选择特定的 Dock 设备

  2. ​无限滚动加载​：

    • 实现滚动到底部自动加载更多设备
    • 组件挂载时自动加载初始数据

  3. ​交互功能​：

    • 设备选择后存储在 Vuex 状态管理中
    • 无设备时空状态处理
    • 长名称截断显示（带工具提示）

功能亮点分析

  1. ​自动填充视图机制​：

    • 页面加载后使用定时器自动加载足够填满当前视图的数据
    • 防止初始加载后出现大量空白区域

  2. ​无限滚动加载​：

    • 监听滚动事件动态加载更多数据
    • 防止重复请求的刷新锁机制​
  3. ​设备信息展示优化​：设备名称过长时截断显示（带完整提示）无人机状态显示（使用火箭图标）

  4. ​空状态处理​：

  5. ​设备选择状态管理​：

    点击设备后存储到 Vuex 中

三、Firmwares.vue

主要功能模块

  1. ​固件上传功能​：通过模态框上传新的固件文件
  2. ​固件搜索与过滤​：按状态、设备型号和版本号筛选
  3. ​固件列表展示​：表格形式展示所有固件信息
  4. ​状态管理​：显示固件的各种状态信息

组件结构

这个Firmwares.vue组件展示了一个完整的企业级固件管理功能实现，具有以下值得学习的地方：

  1. ​复杂表单处理​：

    • 文件上传结合表单数据提交
    • 多字段组合验证
    • 表单状态管理（上传前、上传中、上传后）

  2. ​高效数据展示​：

    • 表格的多种自定义渲染方式
    • 分页与数据量控制
    • 大数据量下的性能优化（滚动）

  3. ​用户体验优化​：

    • 搜索与筛选的联动设计
    • 操作过程的即时反馈
    • 数据格式的友好展示

  4. ​代码组织与架构​：

    • UI与逻辑分离
    • 状态管理清晰
    • 组件化设计
    • 工具函数提取

四、flight-area.vue

该组件是一个用于管理自定义飞行区域的界面，主要实现飞行区域的展示、操作与地图集成功能。

主要功能概览

  1. ​飞行区域管理​

    • 展示所有飞行区域列表
    • 区域删除功能
    • 区域选择与地图导航

  2. ​地图集成​

    • 在地图上绘制飞行区域
    • 区域类型区分（圆形、多边形）
    • 地图导航到选定区域

  3. ​数据同步​

    • 使用自定义事件系统响应区域更新
    • 实时更新地图和列表显示

  4. ​用户体验​

    • 加载状态管理
    • 区域分类展示

实现细节

  • 在获取数据后，通过setTimeout(initMapFlightArea, 2000)延迟2秒初始化地图覆盖物。这是为了确保地图已经加载完成？
  • 在updateMapFlightArea函数中，根据飞行区域的几何类型（圆形或多边形）分别调用useGMapCoverHook的相应方法来更新地图覆盖物。
  • 使用useFlightAreaUpdateEvent钩子来监听飞行区域的更新事件，并在这些事件发生时调用相应的处理函数（addArea, deleteArea, updateArea）来更新本地状态和地图显示。

技术亮点与最佳实践

  1. ​组件化设计​

    • 将功能拆分为多个独立组件：FlightAreaPanel（列表）、FlightAreaSyncPanel（同步）
    • 使用DividerLine组件增强视觉分隔

  2. ​自定义Hook应用​

    • useGMapCover: 封装地图覆盖物操作
    • useMapTool: 封装地图工具操作
    • useFlightArea: 封装飞行区域相关方法
    • useFlightAreaUpdateEvent: 封装区域更新事件系统

  3. ​区域处理差异化​

    • 区分圆形(CIRCLE)和多边形(Polygon)区域
    • 针对不同类型采用不同的坐标处理方法

  4. ​坐标系处理​

    • 使用getGcj02进行坐标转换，适配中国地图标准
    • 多边形区域需要处理坐标数组([0]索引)

  5. ​用户体验优化​

    • 加载状态管理(Spin组件)
    • 延迟地图初始化(2000ms)
    • 地图导航功能(panTo)

五、layer.vue

这个project-layer-wrapper组件是一个用于管理地图标注的系统，提供了地图元素的展示、编辑和删除功能。

功能概述

  1. ​图层树形展示​

    • 以树形结构展示所有地图图层和元素
    • 支持选择、勾选元素操作

  2. ​地图元素属性编辑​

    • 点元素的坐标编辑（经度、纬度）
    • 所有元素的名称编辑
    • 元素颜色选择

  3. ​地图元素删除​

    • 提供删除选定元素的选项

  4. ​地图覆盖物集成​

    • 地图上的点、线、面元素同步显示
    • 坐标系转换处理（WGS84 ↔ GCJ02）

技术亮点

  1. ​复杂数据结构处理​：

    • 多层嵌套的图层/元素数据
    • 不同类型元素（点、线、面）的差异化处理

  2. ​坐标系转换集成​：

    • 同时支持国际标准和中国专用坐标系
    • 自动处理坐标格式转换

  3. ​地图与UI状态同步​：

    • UI操作实时更新地图元素
    • 地图元素变化同步到UI状态

  4. ​深色主题优化​：

    • 专门为暗色模式调整界面元素
    • 统一风格的颜色管理

  5. ​组件化设计​：

    • 封装图层树组件(LayersTree)
    • 抽离坐标转换逻辑
    • 地图覆盖物统一管理

使用场景

该组件适用于：

  • GIS地图应用
  • 无人机飞行区域规划
  • 地理信息标注系统
  • 任何需要管理多种地图元素的应用

​WGS84​：国际通用坐标系，GPS标准

​GCJ02​："火星坐标系"，中国地图专用

六、livestream.vue

是一个直播流选择和管理界面组件，提供了两种直播流的选项入口，并支持直播流的显示和控制功能。以下是对其功能和实现细节的全面分析：

功能概述

  1. ​直播源选择​

    • 提供两种直播接入选项：Agora Live 和 RTMP/GB28181 Live
    • 允许用户根据需求选择合适的直播源类型

  2. ​直播窗口管理​

    • 可拖拽的直播窗口（通过 v-drag-window 指令实现）
    • 窗口关闭控制
    • 响应式显示控制

  3. ​路由导航​

    • 基于 Vue Router 的动态路由切换
    • 通过命名路由管理直播组件

  4. ​直播内容展示​

    • 动态加载不同的直播组件
    • 根据用户选择切换直播内容

技术亮点

  1. ​动态路由渲染:根据 routeName 值动态加载不同的直播组件

    <router-view :name="routeName" />

  2. ​路由联动控制​

    • 通过 root.$route.name 检测当前路由
    • 当路由变为 LIVING 时自动显示直播窗口
    • 点击关闭按钮路由回退到 LIVESTREAM

  3. ​可拖动窗口实现​

    • 通过 v-drag-window 自定义指令实现窗口拖动
    • .drag-title 作为可拖动区域（40px高的顶部栏）

  4. ​布局优化​

    • 选项区使用 flex 居中布局
    • 直播窗口使用绝对定位避免影响其他内容
    • 固定尺寸确保直播窗口稳定显示

使用场景

  1. ​初始状态（/livestream）​​

    • 显示两个直播选项按钮
    • 直播窗口隐藏

  2. ​选择直播类型（/livestream/living）​​

    • 显示直播窗口
    • 根据选择的直播类型加载 LiveAgora 或 LiveOthers 组件
    • 传递 routeName 参数给 router-view

  3. ​关闭直播​

    • 点击关闭图标导航回 /livestream
    • 直播窗口隐藏
    • 再次显示选择按钮

七、media.vue

  1. ​当前状态​：

    • media.vue 确实只是一个基础框架/脚手架​
    • 尚未实现任何功能或UI内容

  2. ​需要补充的功能​：

    • 媒体展示（图片网格/视频列表）
    • 媒体过滤与搜索功能
    • 媒体上传/下载/删除功能
    • 媒体详情查看功能
    • 与设备的关联展示
    • 时间线视图支持

  3. ​开发建议​：

    • 参考已有的功能完整页面（Livestream、FlightArea等）
    • 利用Ant Design Vue组件加速开发
    • 集成后端媒体API
    • 考虑媒体文件与设备数据的关联

八、members.vue

功能概述

这个成员管理页面提供了团队成员的信息展示和编辑功能，主要功能包括：

  1. ​成员信息展示​：

    • 账户名、用户类型、工作区名称
    • MQTT连接凭据（用户名和密码）
    • 加入时间

  2. ​成员信息编辑​：

    • MQTT用户名和密码的修改
    • 编辑状态的切换与管理
    • 更改保存功能

  3. ​数据管理​：

    • 分页浏览成员信息
    • 数据筛选与排序功能
    • 响应式布局设计

技术亮点

  1. ​响应式编辑状态管理​：

    • 使用editableData对象精准跟踪每个成员的编辑状态
    • 通过record.user_id实现按需编辑

  2. ​UI/UX优化​：

    • 斑马条纹提高数据可读性
    • 操作按钮使用颜色编码（绿色确认/红色取消/蓝色编辑）
    • 工具提示提供清晰操作指引
    • 合理的负边距解决输入框对齐问题

  3. ​数据验证与反馈​：

    • API错误处理显示错误消息
    • 只允许编辑特定的字段（MQTT凭据）

  4. ​性能优化​：

    • 固定表格高度(88vh)提高渲染效率
    • 虚拟滚动支持(y: 600)优化大数据集性能

九、task.vue

功能概述

这个 Task.vue 页面是一个任务计划库的入口视图，主要实现以下功能：

  1. ​路由导航控制​：

    • 在任务列表和创建任务页面之间切换
    • 通过图标按钮直观引导用户操作

  2. ​视图状态管理​：

    • 根据当前路由动态显示内容
    • 显示/隐藏创建任务按钮

  3. ​响应式布局​：

    • 使用 Ant Design Vue 的栅格系统
    • 自适应图标和布局

界面状态图示

​状态1：任务列表页面

状态2：创建/编辑任务页面

技术亮点

  1. ​动态路由按钮​：

    • 根据路由状态智能切换图标
    • 减少页面元素变动带来的认知负担

  2. ​路由控制​：

    • 使用命名路由提高代码可读性
    • 基于路由状态的条件渲染

  3. ​简洁实现​：

    • 轻量级的组件设计
    • 无复杂状态管理依赖

  4. ​用户体验优化​：

    • 使用直觉性图标（加号创建/减号返回）
    • 标题栏常显提供位置上下文

总结

这个Task.vue页面是一个高效的任务管理入口组件，核心功能是：

  1. 作为路由容器，管理任务相关视图的切换
  2. 提供直观的创建任务/返回列表的导航
  3. 保持标题栏的持久显示，增强用户体验

十、tsa.vue

用于展示在线设备（包括Dock和Aircraft）的状态信息。

此组件作为设备监控系统的核心界面，实现了对大规模设备群的实时状态监控、异常告警和可视化控制能力，特别适合无人机群管理场景。通过 Vue 的响应式系统结合 Ant Design 组件库，构建了高性能的实时监控界面。

组件功能

  1. ​用户信息显示​：在顶部显示当前用户名。
  2. ​设备分类展示​：将设备分为两类：Dock（机场）和Online Devices（在线设备，这里指无人机）。
  3. ​设备状态信息​：对于每个设备，显示其呼号、状态（如工作模式）、健康管理系统（HMS）消息（包括警告、注意、通知等级别）以及电池状态（仅在线设备）。
  4. ​HMS消息展示​：每个设备如果有HMS消息，会以特定颜色标记（通知-绿色、注意-橙色、警告-红色），并可点击展开查看详情。点击后，HMS消息被标记为已读。
  5. ​设备可见性切换​：每个设备旁边有一个眼睛图标，用于切换该设备在OSD（On-Screen Display）上的可见性。
  6. ​滚动区域​：设备列表可滚动，高度根据父容器动态调整。

这是一个监控大疆机场（Dock）和无人机（Aircraft）状态的实时看板组件，主要功能如下：

核心功能

  1. ​身份认证展示​

    • 顶部显示当前登录用户的用户名
    • 从 LocalStorage 获取用户凭证（ELocalStorageKey.Username）

  2. ​双区设备监控​

    • ​Dock 区​：显示机场及其关联无人机的状态
    • ​Online Devices 区​：显示在线的无人机状态
    • 每个区域支持折叠/展开（使用 Ant Design 的 Collapse 组件）

  3. ​设备状态监控​

    • 实时显示设备工作模式（EModeCode）
    • 状态颜色编码：
      • 绿色 (#00ee8b)：设备在线
      • 红色：设备断开连接
    • 设备状态映射： 
      EModeCode[deviceInfo[device.sn].mode_code] // 显示可读状态文本

  4. ​HMS 健康告警系统​

    • 分级告警显示：
      • ⚠️ 注意 (EHmsLevel.CAUTION)：橙色
      • ⚠️ 警告 (EHmsLevel.WARN)：红色
      • ℹ️ 通知 (EHmsLevel.NOTICE)：绿色
    • 滚动显示最新告警消息
    • 点击弹出详细告警列表
    • 标记已读功能（关闭弹窗时触发）

  5. ​设备可视控制​

    • 眼睛图标切换设备在 OSD 中的可见性
    • 禁用无效操作（灰显不可点击状态）

  6. ​电池状态可视化​

    • 彩色电池条分级：
      • 安全电量：绿色 (#00ee8b)
      • 返航电量：橙色 (#ff9f0a)
      • 降落电量：红色 (#f5222d)
    • 动态白色标记点指示当前电量

十一、wayline.vue

其主要功能是展示和管理航线的库（Flight Route Library）。用户能够查看、下载、删除和导入航线文件（.kmz格式）。

核心功能

  1. ​航线文件展示​

    • 列表式展示所有航线文件（包含名称、设备类型、更新时间等信息）
    • 分页加载/滚动加载（自动触底加载下一页）
    • 空数据状态显示（AntD的<a-empty>组件）

  2. ​文件操作​

    • ✈️ ​航线下载​：KMZ格式文件下载
    • 🗑️ ​删除确认​：二次确认防误删（模态框）
    • 📤 ​导入功能​：KMZ文件上传到服务器

  3. ​交互功能​

    • 点击航线项触发选中状态（存储到Vuex）
    • 响应式高度计算（根据窗口尺寸动态调整列表高度）

十二、workspace.vue

这个 workspace.vue 组件是一个无人机控制平台的核心布局组件，实现了工作区的主界面结构和实时数据处理逻辑。

    核心功能​

    ​1、主工作区布局​
    左右分栏结构：左侧导航/信息区 + 右侧地图/任务区
    响应式设计：左侧固定宽度（335px），右侧自适应填充

    2、动态面板控制​

    • 根据当前路由动态显示媒体面板或任务面板：
    <MediaPanel v-if="root.$route.name === ERouterName.MEDIA"/>
<TaskPanel v-if="root.$route.name === ERouterName.TASK"/>

    3、WebSocket 实时数据流​

    • 通过 useConnectWebSocket 钩子建立长连接
    • 处理15+种无人机业务消息类型（EBizCode）

    设计特点​

    1. ​分层架构​

      • 视图层：处理UI渲染（模板）
      • 控制层：处理业务逻辑（WebSocket消息路由）
      • 状态层：集中管理数据（Vuex）

    2. ​事件解耦​

      • 复杂业务逻辑通过 EventBus 通知具体组件处理
      • 示例：EventBus.emit('flightTaskWs', payload)

    3. ​可扩展性​

      • 新增业务码只需在 messageHandler 扩展分支
      • 新增面板可通过路由配置动态加载

    该组件实现了复杂无人机控制平台的实时数据流处理与动态界面管理的核心功能，通过组合Vue生态工具实现了高内聚低耦合的架构设计。

    十三、home.vue

    home.vue 是一个 Vue 单文件组件，主要承担应用核心布局和全局功能集成的角色。

    关键依赖说明

    十四、index.vue

      相关文章：

    1. 词法分析器
    2. 13.10 LangGraph多轮对话系统实战：Ollama私有部署+情感识别优化全解析
    3. 基于开源AI智能名片链动2 + 1模式S2B2C商城小程序的沉浸式体验营销研究
    4. 网站指纹识别
    5. BCS 2025｜百度副总裁陈洋：智能体在安全领域的应用实践
    6. 微波雷达水位在线监测装置：技术解析与应用价值
    7. 淘宝扭蛋机小程序系统开发：打造互动性强的购物平台
    8. 通过ESP32开发板，实现NFC卡片控制继电器通断，从而实现多种物联网中设备的通电
    9. 基于STM32物联网智能鱼缸智能家居系统
    10. Java线上CPU飙高问题排查全指南
    11. 如何在服务器上部署 Python Django 应用
    12. 接地气的方式认识JVM(二）
    13. Linux边缘智能：物联网的终极进化
    14. 【最新案例】智能物料称重柜/生鲜称重售卖柜系统， 共享自助管理系统， 物联网应用定制开发
    15. 职坐标物联网全栈开发全流程解析
    16. VR 技术赋能南锣鼓巷的多元发展潜力与前景​
    17. Python ROS2【机器人中间件框架】 简介
    18. 【HTML-16】深入理解HTML中的块元素与行内元素
    19. 基于江科大stm32屏幕驱动，实现OLED多级菜单（动画效果），结构体链表实现(独创源码)
    20. 基于 Spring Boot 策略模式的短信服务提供商动态切换实现
    21. 青岛哪家做网站的公司好/电商运营培训学费多少
    22. 品牌网站设计公司哪家/长沙靠谱的关键词优化
    23. wordpress自动加内链/网站seo课设
    24. 仪器仪表行业网站建设/冯耀宗seo课程
    25. 小语种服务网站/网站自动推广软件免费
    26. 国土资源网站建设方案/长沙网络公关公司