基于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 表格內容再次啟動應用程序以此來更新操作。 除了服務器端要安裝應用程序和相關文件，其他終端無須安裝任何應用程序，即可訪問此網頁極大方便了業務人員的查詢。 而且此系統適用性不僅限于一個科室，也可以投入其他科室的業務值班，所以該系統適用性還是比較廣泛。 但是，該系統還存在一定的擴展空間：比如可以增加任務提示音來提醒任務的緊迫性，亦可以增加一些動畫讓頁面看起來更美觀。