基于Flutter的机务工作手册数字化系统设计与实现

赵雅琼 王哲 刘硕 陶英杰 陈淑颖

（中国民航大学计算机科学与技术学院 天津市 300300）

1 引言

各机务维修单位的工作程序手册依据维修能力范围、不同客户等因素会存在非常多的具体工作程序，是各位工作人员在工作中必须遵从的。然而大量非结构化的数据有着查询困难和难以整理等特点，并且不利于各部门之间的交流协作。通过手册数字化系统的设计与实现，将实现手册的结构化存储，极大提高工作效率，便于管理，以解决此类问题。

在开源的跨平台APP 开发技术中，使用НTML5 实现的网页式APP 开发因无法调用原生API 致使大量功能无法实现，且运行性能低，操作体验差，这使得该技术逐步被基于原生渲染的混合式APP 开发技术所取代，其中Flutter 是基于自绘UI 的混合式APP 开发技术[1]。Flutter 是Google 公司开发并推出的跨平台、开源移动端UI 框架，它帮助开发者通过一套代码库高效构建精美的iOS 和Android 应用[2]。它支持一套代码在多种平台上构建应用以及嵌入式开发，这极大地减少了APP 的开发和维护成本。并且可以实现原生用户页面，在渲染技术上实现了GDI，因此有较好可控性。同时，Flutter 使用简单易学且性能强大的Dart 语言进行开发，有利于快速学习和实现开发。鉴于以上优点，本系统通过部署Flutter 框架设计并实现UI 界面。

2 系统主要功能模块

本系统主要服务于机务维修工作者，将工作程序具体对应到责任部门、工作岗位和负责人。用户可以对手册和工作程序内容进行检索，管理人员能够根据相应权限为一般员工分配工作，使其了解工作流程步骤，遵守相应的规章制度。

综合实际，本系统实现具体功能模块如图1 所示。

（1）用户登录：用户通过用户名和密码登录系统。

（2）手册浏览：用户可以下载手册文件及其下各章节的工作程序文件。

（3）基本配置：拥有基本配置权限的用户可以配置部门及其下岗位以及岗位对应的员工。

（4）手册录入：拥有手册录入权限的用户可以录入手册和对应的工作程序内容，包括程序编号、程序名称、目的、适用范围、名词术语、依据、修订版本等信息，还可上传流程图和程序文件。

（5）部门配置：拥有部门配置权限的用户可以将人员、工作和对应的工作流程进行对接，以实现手册内容对接到人和岗。

（6）用户权限配置：管理员用户可以修改各用户的系统权限，包括管理员、手册录入、基本配置和部门配置五个权限。

（7）手册查询：用户可根据程序编号、程序名称、修订标识、责任部门、责任岗位、工作名称、相关责任人以及关键字进行检索，查看所有程序的流程步骤，以及下载相关文件。

（8）个人信息：用户可以看到自己所在的部门和岗位；修改自己的密码和退出登录。

3 UI界面的设计与实现

3.1 页面布局设计

如图2 所示，在整体布局设计中，系统引入了flutter_screenutil插件，对整体的布局进行框定，设定了长宽高及各项组件的大小比例，也引入了easy_refresh 插件，对页面过长进行限定并设置了优雅的个性化上拉加载。在Flutter 项目中Container 是其中最常用的组件，每个页面在设计上都是采用Container 组件嵌套其他组件的形式构造出来的，如登录页面中嵌套了Text、TextFormField 和RaisedButton，首页中嵌套了Drawer、ClipOval、ExpansionalTile 等。除此之外，对各个页面的部分按钮，Inkwell 组件通过设置点击事件Navigator 中调用MaterialPageRoute 来进行页面之间的跳转。

图1：机务工作手册数字化系统的功能模块图

图2：UI 设计图

图3：MVC 模式示意图

图4：前后端数据通信过程

3.2 网络请求数据

在一些页面按钮的点击事件中，以及在页面初始化initState 和build 时，为了显示数据，系统调用dio 方法异步发起get 请求并将返回值通过一个Response 对象来返回数据，最后用json.decode 方法对数据进行转换，即可放在前端界面显示。

在手册浏览界面，手册目录的每个ListTile 添加了点击事件，运用DirectoryUtil 以及Path 这两种组件对下载文件的文件名和路径进行设定，使用Dio().download()方法对目的URL 的文件进行下载，最后用fluttertoast 插件以及showDialog 方法将下载过程通过弹出对话框的方式进行提示。

3.3 Model数据模型和Provide状态管理

通过Dio 库系统对请求服务器返回的Json 数据建立数据模型，将数据进行模型化管理。首先建立如图3 所示的部门数据模型，然后构造Provide 类对该模型进行状态管理，混入ChangeNotifier 可以不用管理听众，而notifyListeners 可以通知听众刷新，将Provide注入顶层后，便可实现各个页面的数据处理和局部刷新。当其他页面对数据有增删查改操作时，系统通过Provide 局部刷新通知该组件重新计算数据信息及长度，然后传递参数，利用手册显示各元素详细信息。在每次调用数据操作时，Provide 都会重新执行，以改变当前数据存储状态。

3.4 路由页面跳转

在Flutter 中路由通常由Navigator 组件管理，有静态路由注册和动态路由注册。动态路由注册自己生成页面对象，可以传递自定义参数；也可利用PaperRouterBuilder 进行自定义动画；而静态路由不可以向下个页面传递参数，所以本系统利用动态路由进行页面跳转以及手册数据模型在页面间数据传输。

4 后台服务器的设计与实现

系统服务器基于Flask 框架设计开发。Flask 是一个使用Python 编写的轻量级Web 应用框架，其WSGI 工具箱采用Werkzeug，模板引擎则使用Jinja2。系统使用flask 蓝本设置路由方法，对视图函数进行模块化的处理，在APP 下的__init__.py文件中注册了login、read、basicConfigrations、handbookInput、departmentConfigrations、rightConfigration、findНandbook 和manage六个蓝图。

数据库采用MySQL 存储数据，并通过调用SQL alchemy 对数据库进行操作。

4.1 服务器的架构模式

MVC（Model View Controller）一种将应用程序的逻辑层和视图层分离设计, 并通过控制层连接的架构模式[3]，包括了三个层：

Model（模型）应用于程序中处理数据逻辑。主要负责数据库进行数据存取。

View（视图）负责处理应用程序中数据的可视化，通常依据模型数据创建。

Controller（控制器）处理与用户的交互部分，从视图取数据，控制用户输入，并向模型发送数据。

三者的调用关系如图3 所示。

4.2 通信方式

Flask 的基本模式是在程序中为URL 分配视图，每当用户访问URL 时，系统将执行该URL 对应的视图函数，获取其返回值。前后端通过НTTP 通信协议实现数据交互，既方便传递响应，又能够传输文件；强大的兼容性为之后系统的升级和维护提供了便利；通信内容层层加密，极大的保证了用户的账号安全和员工的信息安全。通信过程如图4 所示，数据交换格式使用json。

5 结语

本文基于Flutter、Python Flask、MySQL 等技术提出了一个工作手册数字化系统的设计与实现，给员工提供一个线上手册查询APP，易于携带、方便查询，及时更新共享，从而提高机务人员的工作效率，有助于民航业进一步实现现代化和数字化。该系统根据员工的职位分配相应的权限，使其能够及时准确地掌握与工作内容相关的信息，具有较强的实用意义。