基于Web 前端的气象业务值班信息发布系统设计

赖晓菲

（福建省漳州市气象局 福建 漳州 363000）

0 引言

随着科学技术的发展，气象信息网络与装备保障的业务也逐渐趋向自动化和信息化的发展。 而气象信息网络与装备保障的业务也日新月异，衍生出不同的业务保障内容。 当前，我市气象信息网络与装备保障中心在日常业务值班中，一般是通过邮件通知、工作群提醒等比较零散的办公软件形式来发布值班人员信息和值班任务提醒。 由于值班信息发布渠道的多样性，部门成员常常需要自己梳理值班任务和个人任务，容易导致工作中的疏忽和遗漏。因此，本文针对部门的值班信息发布需求，设计了一款气象业务值班信息发布系统，便于业务人员查看，部署在办公室电视机屏幕上。

1 需求分析

1.1 功能性需求分析

通过分析气象信息网络与装备保障中心的值班信息发布需求，该系统主要满足自动更新每周值班信息和每周值班任务详情两个重要内容。 具体需要满足如下功能：

（1）系统能够自动获取每周七天的值班人员信息和每周七天的任务详情。 并展示周一到周日的值班人员姓名，以及每日的任务提醒。

（2）系统自动更新最新一周的值班人员信息和任务详情。

（3）系统只允许部署在服务器的后台修改值班和任务详情的表格，其他用户只能通过局域网访问此页面，不具有修改的权限。

（4）系统的任务详情页面以滚动形式展示最新一周每日的任务内容，用户访问网页时能够拉取对应日期的任务详情。

（5）系统具有个性化的设置，能够在部署的服务器后台更换个性化壁纸。

1.2 非功能性需求分析

设计本系统不仅要满足以上功能，还应当满足一定的设计原则即非功能性需求，具体包括：

（1）安全性。 该系统只允许在局域网内访问此网页，非局域网内不可访问。 一旦在部署服务器后台关闭此应用程序时，将不再访问此网页。

（2）扩展性。 能够根据业务值班信息的发布需求，不断更新和扩展新的功能，完善信息发布系统，更好地服务于业务人员值班。

2 系统总体设计

2.1 系统的结构

本系统基于浏览器／服务器结构（Browser／Server，B／S）进行开发。 该系统的整体框架如图1 所示，包含前端网页展示部分和后端的交互部分。 前端即本系统展示的网页界面，因为只展示静态网页的界面并不能完成整个系统的功能，所以还需要后端的编写部分，才能完成整个系统的交互运行。 因此，前端网页设计主要是完成页面展示和与服务器端交互的程序部分，而后端主要是获取实时的数据返回给前端，前端再展示最新的内容。

图1 系统框架

2.2 系统的实现

2.2.1 前端部分

前端网页设计选择Visual Studio Code （VS Code）开发软件［1－2］，首先根据超文本标记语言5（hypertext markup language 5，HTML5）编写整个值班信息系统网页的结构和内容，其次应用层叠样式表（cascading style sheets，CSS）设置网页的背景、动画以及字体格式，最后结合Javascript 脚本语言完成网页的交互动态功能［3－4］。 根据业务值班需求，本网页主要分成三个模块：时间控件模块、本周值班人员姓名模块、本周任务提醒详情模块（每天任务详情可展示）。 实现此布局需要将超文本标记语言（hypertext markup language，HTML）布局分为三个部分，顶部居中为模块、左部分为模块、右部分为模块。 给本周值班信息模块和本周任务提醒模块增加一个蒙版样式，突出更新的内容，并且在值班任务提醒模块增添左右滚动功能，可展示查看一周的任务详情，并且i每天的任务上面都显示日期信息，才不会耽误任务的落实。 部分核心代码如下：

＜div id＝＂app＂＞

＜header class＝＂header＂＞｛｛time｝｝＜／header＞

＜section class＝＂main＂＞

＜section class＝＂left＂＞

＜div class＝＂title＂＞本周值班＜／div＞

＜div class＝＂user-container ＂＞

＜div class＝＂mask＂＞

＜div v-for＝＂item in weekUser＂ class＝＂user＂＞

＜div class＝＂label＂＞｛｛item.week｝｝＜／div＞

＜div class＝＂username＂＞｛｛item.users｝｝＜／div＞

＜div class＝＂username＂＞｛｛item.userB｝｝＜／div＞

＜section class＝＂right＂＞

＜div class＝＂title＂＞本周任务提醒＜／div＞

＜div class＝＂content swiper＂＞

＜div class＝＂swiper-wrapper＂＞

＜div class＝＂swiper-slide＂ v-for＝＂task in weekTask＂＞

＜！ －－ ＜marquee direction＝＂up＂ behavior＝＂alternate＂scrolldelay＝＂100＂ onmouseover ＝＂this. stop（）＂onmouseout＝＂this.start（）＂＞－－＞

＜div class＝＂task＂＞

＜div class＝＂item-wrap mask＂＞

＜div class＝＂item＂ v-for＝＂item，index in task＂＞

前端部分除了网页结构和布局的部分编写，还要编写返回从服务器获取的数据内容［5］，如图1 所示服务器返回前端的箭头过程。 自动识别从服务器获取的排班人员信息和任务信息，并识别最新一周的日期信息对应，更新到网页的本周值班和任务提醒模块。 计算最新一周日期的核心代码如下：

const getMondayAndSunDay ＝（） ＝＞｛

const today ＝new Date（）. toISOString（）. split（＇T＇）［0］

const todayDate ＝new Date（today）

const nowTime ＝todayDate.getTime（）

const day ＝ todayDate. getDay（ ） ＞ 0 ？ todayDate.getDay（） ： 7 ／ ／ 表示当前是周几

const oneDayTime ＝24 ∗60 ∗60 ∗1000 ／ ／ 一天的总ms

const Monday ＝new Date（nowTime － （day － 1） ∗oneDayTime）

const Sunday ＝ new Date（nowTime ＋（7 － day） ∗oneDayTime）

const weekTask ＝computed（（） ＝＞｛

const ｛ Monday， Sunday ｝ ＝getMondayAndSunDay（）

const result ＝tasks.value.filter（task ＝＞｛

const taskDate ＝new Date（task［0］）

if （taskDate ＞＝Monday ＆＆ taskDate ＜＝Sunday） ｛

return true

｝

return false

｝）

计算出最新日期后，就要从服务器中获取相应日期的数据以更新HTML 网页，主要核心代码如下：

const getUser ＝async （） ＝＞｛

const data ＝await fetch（＇getuser＇）

const json ＝await data.json（）

return json

｝

const getTask ＝async （） ＝＞｛

const data ＝await fetch（＇gettask＇）

const json ＝await data.json（）

return json

｝

const getRole ＝async （） ＝＞｛

const data ＝await fetch（＇getrole＇）

const json ＝await data.json（）

return json

｝

2.2.2 后端部分

如图2 所示为后端框架，包含搭建服务器模块和自动获取数据两个模块。 搭建服务器是使网页能在局域网内访问的必要条件，此部分基于Java 语言的Web Application来搭建服务器。 通过安装所需第三方包，自动获取本地服务器IP 和内部设置的端口号组成本系统的网址。 本系统的数据库为两个excel 表格，包括user 和task 两个表格，表格名称不可更改否则将无法获取到数据。 user 表格存放值班人员信息，格式为日期（年月日）—值班人员1—值班人员2；而task 则存放任务内容，格式为日期—任务内容。后端应用程序一旦启动，将能自动获取该应用程序下的两个表格内容，发送给前端进行更新。

图2 后端框架

3 功能展示和测试结果

3.1 功能展示

基于Web 前端的气象业务值班信息发布系统支持Windows 7 以上的系统，通过IE、360、谷歌浏览器进行访问。 系统启用之前，首先应先部署服务器的应用程序，在局域网内部署服务器的应用程序后，局域网内均可访问此网页。 选择局域网内任意一台终端部署服务器即可，如图3 所示为部署服务器的应用程序界面。 点击启动，应用程序如图4 所示，服务已开启，关闭程序即停止表示部署服务器成功，下方的网址则是搭建服务器后的网页网址，一旦启动此程序，将会自动跳转至对应的网址。 网址中的IP 号将自动获取服务器的IP 地址，系统默认端口号为8888。

图3 应用程序的界面

图4 应用程序的启动界面

该系统可以根据存放的Jpg 格式图片，自动更换背景图。 需要更换背景图片，只需关闭应用程序，将图片命名为背景图片存放进Public 的文件夹中，再次启动应用程序时，背景图将会改变，网页的顶部为时间展示栏目，将会与部署的服务器端的时间保持一致。 如图5 所示，2023 年8月15 日为星期二，展示了这天的会议时间和参会人员信息，看起来比较清晰直观，且右边的任务提醒部分，可以用鼠标滑动查看本周所有的任务信息，亦可以通过自动滚动来查看信息。 所有字体为了在大屏中展示能更清晰直观，都做了加粗处理。

图5 气象业务值班信息发布网页

3.2 测试结果

目前，本系统服务于漳州市气象局的气象信息网络与装备保障中心部门的值班信息发布，为了便利于业务人员查看，部署在办公室电视机屏幕上。 在系统测试之前，部署一台局域网主机并连接电视机，安装Windows7 系统，并安装IE、360 和谷歌浏览器。 测试结果表明：在Windows7以上的系统均能部署服务器和访问网页，尤其在Windows10 以上的系统运行更稳定；稳定运行表现在网页排版与程序设计是否一致。 发现在IE11.0 浏览器中不能展示网页，出现排版错误情况，除此之外，在360 和谷歌浏览器中均未发现错误。 在网页更新方面，测试三个月以来，发现连续排班一两个月的值班人员信息和任务详情并不会影响服务器端的正常获取数据情况。 所以目前该系统能够稳定运行。

4 结语

综上所述，气象业务值班信息发布系统基于Web 前端进行网页开发，通过Java 语言实现后端服务器搭建和网页交互。 该网页能够与服务器上的时间同步显示，展示实时时间；并根据日期只获取最新一周的值班人员信息和值班任务详情。 便利于业务人员能够直接从展示的大屏中获取值班信息，以及每日任务提醒，节省了自行归纳任务的时间。 业务人员不仅能通过办公室的大屏获取信息，也能通过连接局域网的电脑直接访问值班信息发布的网址，但不具有修改的权限，保证了值班发布系统的权限。只能在部署服务器的终端才能进行添加值班人员、任务提醒的内容，通过添加excel 表格内容再次启动应用程序以此来更新操作。 除了服务器端要安装应用程序和相关文件，其他终端无须安装任何应用程序，即可访问此网页极大方便了业务人员的查询。 而且此系统适用性不仅限于一个科室，也可以投入其他科室的业务值班，所以该系统适用性还是比较广泛。 但是，该系统还存在一定的扩展空间：比如可以增加任务提示音来提醒任务的紧迫性，亦可以增加一些动画让页面看起来更美观。