/unmanned-ship-web

无人船后台管理系统

Primary LanguageVueMIT LicenseMIT

无人船水质检测后台管理系统

一、概述

在无人船水质监测平台(以下简称“平台”)中,无人船是系统的核心,所有功能的设计均围绕无人船展开。从物理上看,无人船是一个整体;然而从功能上看,无人船则是由主控、测量仪器以及监控摄像机组成,这三个部分独立工作互不影响.

其中,主控主要负责船体航行控制;测量仪器负责采集水质数据;摄像机则提供远程监控功能,方便用户操作船体和跟踪测量任务执行情况。

为了便于管理,平台将主控、测量仪器及摄像机作为单一逻辑设备展示和使用。由于三个设备独立工作,要将它们作为整合为单个逻辑设备需要进行关联,目前可以采用如下方案关联设备:

a. 当主控连接至服务器时,服务器获取其序列号;

b. 服务器将主控序列号和 IP 地址关联;

c. 如果在此 IP 地址上接收到测量仪器或摄像机的连接,则将这些连接与主控关联;

d. 至此,平台可以通过主控序列号对各个子设备进行直接访问。

f. 使用网络接口:http://192.168.110.234:8766/openapi/index.html?url=/openapi/v1/openapi.json#/.net/

g. 阉割版官网展示:https://usv.tongji.cq.cn/#/login

二、系统主要功能

1、系统登录页面

image-20210222172911695.png

沿用了传统的后台管理系统简洁大方的优点进行设计

2、系统首页

1_524@2N4BHO_~T_WI4JV.png

用户登陆时,默认打开系统运行状态页面,该页面主要功能如下:

  1. 页面打开时,获取用户有权限访问的所有船只,开始监视这些船只的运行和计划执行的状态
  2. 页面以地图展示为主,地图上显示所有船只的位置和航向,船只图标上标注无人船的名称和状态,在线的船只同时显示其航行速度
  3. 鼠标点击船只图标时,跳转至船只状态页面(详见 #45
  4. 用户可以开启和关闭绘制无人船轨迹的功能,功能开启时在地图上绘制所有无人船的移动轨迹(不通的船只使用不同的颜色),也可以清除地图上绘制的轨迹

3、用户信息管理

image-20210222174553569.png

4、组织机构管理

image-20210222174821569.png

5、无人船信息管理界面

image-20210222173417685.png

5.1 实时视频

_KU_BPZID_K8JI6JDRQJ__T.png

5.2 配置信息界面

6OWFS@_RHA2Z7S_7J4QK_OW.png

5.3 查看运行状态页面

MOJ33_@X_JG`7_5_0V_QV_X.png

无人船信息管理界面可以对无人船进行管理以及无人船的状态配置,如:设置返航点,修改配置信息等,船只状态在线时可以查看无人船运行状态

6、计划管理

image-20210222173714160.png

计划管理可以给船只的航行路径进行规划,执行计划后可以对船只行驶的轨迹进行跟踪。

7、航标管理

航标.jpg

image-20210222173931482.png

根据后端接口实现航标的增删改查功能:

  1. 提供列表模式和地图模式两种展示方式。当用户选择地图模式时,根据地图的显示范围和其他查询条件查询并展示航标,增删改操作也在地图上进行;当用户选择列表模式时,根据用户输入的查询条件查询并展示航标,增删改操作在列表中进行;
  2. 当用户在地图上选择某一个航标时,高亮显示该航标的可导航范围,并获取该航标的导航树在地图上进行展示。

8、航道管理

航道管理.png

  1. 航道的增删改查全部在地图上实现;
  2. 在地图上显示地图范围内的所有航标和航道,其中航道使用不同的颜色区分;
  3. 新增航道时,用户可以选择出发地和目的地调用接口自动生成一条最短的路径进行编辑,也可以选择手动规划路径;
  4. 当用户在地图上选择某一个航标时,高亮显示该航标的可导航范围,并获取该航标的导航树在地图上进行展示。

9、港口泊位管理

image-20210222174317700.png

1.所有操作在地图上进行;

2.根据地图显示范围和缩放级别查询港口并显示,也可以输入港口的 IDENT 或名称搜索;

3.根据港口的范围和当前地图范围决定是否绘制港口的范围,如果绘制了港口范围,同时应获取泊位信息进行绘制;

4.点击港口图标时,显示港口详情和泊位列表,列出新增泊位、修改港口、删除港口等操作地图缩放至可编辑港口的级别;

5.点击泊位图标时,显示泊位详情,列出修改泊位和删除泊位等操作。

10、航图展示

all-channel.png

  1. 航图上显示下列对象:航标、航道、港口及其附属物(泊位、程序端点、过渡路径、标准进/离港程序);
  2. 其中,航标、航道和港口按照地图范围和缩放级别进行显示过滤,港口的详细信息(港口范围及其附属物)按照港口面积占地图面积百分比控制是否显示,暂定超过 5%显示;
  3. 点击航图上的元素可以查看元素的详细信息(但不是允许修改),点击港口可查看其附属物的列表,点击附属物可以在地图上定位该附属物,并展示其详细信息;
  4. 航图提供搜索功能,用户可以按照识别码搜索元素(可根据类型搜索,不指定即搜索全部),搜索结果在下拉框中显示(最大显示 10 条),用户点击结果可以在地图上定位该元素,并展示其详细信息;
  5. 实现最短路径搜索功能,可以选择任意坐标或航标生成最短路径进行展示。