下面是網頁前端待改進的一些點
root 路由
前端一個添加一個 url.path=’/’ 時的路由處理,即當用戶只輸入了域名時的訪問路由處理,可以前端自動跳轉到 /broadcastManagement/ ,我本來計劃在後端直接使用 nginx/envoy 返回 301 進行跳轉,但發現很難處理,因爲系統沒有直接發佈到用戶訪問的地址,中間經過了多次內部跳轉導致端口號遺失,當最終的 nginx/envoy 收到請求時,它已經遺失了前端 url 中輸入的端口號,則在用戶通過非常規端口(80/443)時會導致後端跳轉到一個錯誤地址。
以測試網頁爲例,訪問地址是 https://xsd-kb2022-dev.cdnewstar.cn:3443,這會被發佈到我們公司的一個外部公開服務器,它等待請求後將此請求轉發到內部的測試機器 192.168.x.x:5000 端口,此時 192.168.x.x 上的 nginx/envoy 服務器並不知道用戶請求的 url 是 3443 端口而認爲是 5000 端口,它們將會 301 重定向到 http://xsd-kb2022-dev.cdnewstar.cn:5000/broadcastManagement (因爲 最外層的公開服務器處理了 https 所以 192.168.x.x 甚至認爲用戶是通過 http 進行的訪問)。當然對於這裏的特定情況可以在 192.168.x.x 上寫死跳轉到 https://xsd-kb2022-dev.cdnewstar.cn:3443/broadcastManagement 但是當系統部署在不同客戶那裏時不同客戶的內部網路佈局是不同的,這將無法提供一個通用的自動化維護設定。
所以比較簡單的方案是,前端自己處理下路由 / 將其跳轉到 /broadcastManagement/ 或跳轉到其它自己的主入口點(index.html)
用戶管理
頁面: /broadcastManagement/system/useManagement
- 修改分組 功能只能單選,但實際應該是多選,不同的用戶可能需要自由組合多個不同的組權限。如果單選則需要將所有可能都全排後創建分組列表,這極容易出錯且使用很不靈活(特別是後期新加了組可能需,重新排列組合組列表)。多選則可以由用戶自由組合需要分配的組合
- 分組選項可以做成 checkbox, 此外最好爲 checkbox 加上 tooltip 在鼠標覆蓋時顯示組的描述信息(或其它類型實現,目的是讓用戶可以在選擇頁面看到描述信息,以方便可以在選擇時知道相關組具體是做什麼用處的)
- 修改區域 功能只能單選,但實際應該是多選,用戶可能需要同時管理多個同級別或位於不同樹分叉上的區域,例如用戶需要同時管理 上海和成都,它們在區域樹上位於不同的分叉路徑,單選則無法實現只管理 上海和成都
設備管理
頁面: /broadcastManagement/device/deviceManagement
- 當設置查選區域時(通過彈出單選框選擇區域,直接輸入邏輯碼時沒有這一問題),傳遞了錯誤的參數名稱 “logic[]” 個服務器,服務器接收的參數名稱是 “logic”,如果要設置數組多次設置參數即可,例如 ?logic=51&logic=52
- 邏輯碼(logic) 和 物理碼(physical) 兩個參數不支持模糊匹配,實際上它們使用了前綴匹配並且只有這一工作模式。目前在勾選模糊匹配時,爲 邏輯碼(logic) 和 物理碼(physical) 也添加了 % 導致服務器驗證參數出錯返回 http 400 錯誤
- 導出數據,具銷售人員要求,這個頁面的查詢數據需要導出爲 excel 可讀的數據,用戶可能需要把某一時刻的數據保存到 excel 表格。前端可以使用 html 提供的 URL.createObjectURL 來生成數據供用戶下載,數據格式可以採用 csv(不推薦,可能出現內容和分隔符衝突) 的文本或者使用 sheetjs(推薦使用) 來生成 xls 之類的檔案
- 應該提供頁面導出,使用 sheetjs 將當前頁面數據生成 xls 供用戶下載
- 全部導出,自動查詢所有分頁頁面數據,合併寫入到 sheetjs 供用戶下載。
- 分頁查詢時可能會存在重複的數據,所以最好所以 id 創建一個 new Set() 索引,把已經添加的數據加入到 set.add(id) ,寫入數據時先判斷數據是否已經寫入果 set.has(id)
- 出現重複的原因主要是因爲可能同一時間段內有其他她它用戶修改了數據導致,數據排序發生了偏移以至於分頁的內容發生了變化
- 設置設備位置 打開的座標選擇地圖中 搜索無法使用,使用時向服務器後臺請求了 /v3/geocode/geo 接口,服務器並未提供這一接口,是否需要安裝第三方軟件適配?如何適配?
設備管控
頁面: /broadcastManagement/device/deviceControl
- 當設置查選區域時(通過彈出單選框選擇區域,直接輸入邏輯碼時沒有這一問題),傳遞了錯誤的參數名稱 “logic[]” 個服務器,服務器接收的參數名稱是 “logic”,如果要設置數組多次設置參數即可,例如 ?logic=51&logic=52
- 邏輯碼(logic) 和 物理碼(physical) 兩個參數不支持模糊匹配,實際上它們使用了前綴匹配並且只有這一工作模式。目前在勾選模糊匹配時,爲 邏輯碼(logic) 和 物理碼(physical) 也添加了 % 導致服務器驗證參數出錯返回 http 400 錯誤
- 操作記錄 分頁存在 bug,當選擇了新的頁後數據沒有刷新,必須關閉彈出窗口重新打開才會顯示剛剛選擇的頁面數據
- 無法發送 休眠指令 因爲服務器要求的參數是一個 number 的秒數,前端直接將輸入框中的字符串傳遞給了服務器導致服務器驗證參數發生錯誤
- 服務器地址窗口前端驗證格式似乎存在bug,正確的 host:port 形式的地址無法通過前端驗證導致無法向後端提交請求。並且頁面顯示屬性,兩個輸入框是綁定的,但實際上應該是兩個不同的值,並且應該是 safe和http,safe 就代表了 https 而不是頁面的 safe 和 https
- 對講參數要求的是 number 數據(uint32 的頻率和 float32 的亞音)。前端直接將 type=’text’ 的輸入框字符串數據傳遞給了後端導致後端驗證數據發生錯誤。此外亞音的 placeholder 屬性顯示的文本佔位符不正確(顯示的 請輸入休眠時間)
- 操作記錄裏面應該顯示parameters屬性(直接顯示字符串內容即可)或者使用tooltip在鼠標懸停記錄時顯示,這樣管理員才能知道這個記錄到底是把設備設置成了什麼樣子。例如管理員知道設置了 “對講開關” 這個指令用戶不大,管理員還想知道到底是打開了還是關閉了這個開關,類似這些信息需要從 parameters 屬性中得知
- 操作記錄裏面對於失敗的記錄,應該顯示 message 屬性,或者使用tooltip在鼠標懸停記錄時顯示。通常 message 屬性記錄了設備回傳的失敗原因。管理員需要知道這個原因以方便排除導致失敗的問題
- 操作記錄中應該查詢下用戶id,之後顯示用戶名稱/昵稱,這樣才能更方便的知道誰執行了這些操作
- 操作指令,应该增加一个自定义操作,由用户手动输入指令的 command 值 和 value 值。这是为了兼容性考虑。因为操作指令大概率会变化,如果存在这个自定义功能,当新增了指令时(只升级了终端设备和服务器),即时网页前端没有升级时也有办法发送新的指令给设备
設備模擬器
頁面: /broadcastManagement/device/deviceHistory
- 日誌窗口中的 樂觀鎖和日誌等級在設置後即時點擊查詢也不會生效,必須關閉窗口後重新 打開窗口才會生效。
- 詳情中的任務目標最好查詢下對應的區域,顯示區域名。如果目標字符串長度爲 20 則目標是設備,則應該查詢下設備。有可能查詢不到對應的區域名/設備(例如已經被刪除或區域不存在),此時才顯示邏輯碼。並且在顯示查找到的區域/設備名稱時,應該加上一個 tooltip 在鼠標懸停時顯示邏輯碼
- 導出數據,具銷售人員要求,這個頁面的查詢數據需要導出爲 excel 可讀的數據,用戶可能需要把某一時刻的數據保存到 excel 表格。前端可以使用 html 提供的 URL.createObjectURL 來生成數據供用戶下載,數據格式可以採用 csv(不推薦,可能出現內容和分隔符衝突) 的文本或者使用 sheetjs(推薦使用) 來生成 xls 之類的檔案
- 應該提供頁面導出,使用 sheetjs 將當前頁面數據生成 xls 供用戶下載
- 全部導出,自動查詢所有分頁頁面數據,合併寫入到 sheetjs 供用戶下載。
- 應該添加可選條件,查詢不同連接狀態的設備(所有設備 已連接 已斷線)
創建流程任務
頁面: /broadcastManagement/task/createTask
- 在勾選模糊匹配時,前端爲數值 priority(任務優先度) 和 level(任務級別) 兩個參數加上了 %,但數字不支持模糊匹配,這導致服務器延遲參數無效返回 http 400 錯誤
- 添加任務 時的任務時間存在bug 當設置多組時間時,非第一組時間不能設置在第一組時間之後。例如第一組時間設置爲9點到10點,第二祖時間只能設置9點之前,無法設置 10點之後的時間。這應該時前端哪裏驗證時間有效時錯誤的將後面組的時間參數錯誤傳成了第一組時間(純猜想)
- 修改任務 時的任務時間存在 bug 當設置多組時間時,非第一組時間的開始時間可以設置在第一組時間之後,但結束時間無法設置到第一組時間之後。
- 添加任務/修改任務 時間經常存在無法修改的問題。設置了一個正確的時間但自動被修改回之前的值。且沒有任何錯誤提示。(確定是bug 多次測試確定輸入了正確的時間格式,且結束時間設置爲開始時間之後)。無法確定哪裏的bug 但估計應該時前端驗證時間值時哪個參數應該傳入新輸入值但錯誤傳遞了原來未修改前的值
- 修改任務 有兩個音頻,刪除第二個,重新添加一個音頻會出現一個多餘給空白欄。並且修改任務時向服務器傳遞的是音頻名稱,而非服務器要求的音頻id
- 在查看任務時應該可以直接試聽音頻內容,以確定任務要播放的真實音頻是什麼
- 任務級別 選項內容錯誤的設置成了任務優先級的選項
流程任務一覽
頁面: /broadcastManagement/task/toExamineTask
- 這裏不應該顯示處於草稿(1)狀態和被拒絕(4)的任務因爲這兩種類型的數據只屬於創建的用戶並且也只有創建的用戶可以對其進行操作,但頁面只剔除了草稿狀態的數據,應該刪除查詢條件 state=4。同時應該要顯示被刪除(8)和物理刪除(9)的數據,所以加上 state=8&state=9,最終state參數應該時 state=2&state=3&state=5&state=6&state=7&state=8&state=9。(刪除只表示不能再恢復使用這個任務,服務器可以包保存的音頻刪掉以釋放硬盤佔用,服務器會等待一段時間以確定資源確實不需要了就物理刪除音頻資源以真的釋放掉磁盤佔用,但管理員還是需要可以查到被刪除的任務歷史所以需要顯示被刪除和物理刪除的數據。)
- 在查看任務時應該可以直接試聽音頻內容,以確定任務要播放的真實音頻是什麼
- 只有處於提交狀態(2)的任務才可以被拒絕,其它狀態應該禁用 拒絕 按鈕
- 任務級別 選項內容錯誤的設置成了任務優先級的選項
- 顯示數據時應該顯示調度器id(數組元素的 lastID 屬性),因爲使用調度器id 可以查詢到任務調度的具體情況
音頻管理
頁面: /broadcastManagement/task/audioList
- 應該在此爲音頻添加試聽功能,以便用戶可以在此頁面直接試聽音頻內容
音頻直播
頁面: /broadcastManagement/task/audioLive
- 應該要顯示直播的音頻資產,並且可以在線收聽這些音頻資產,這樣管理員才知道直播了什麼內容
- 任務級別 選項內容錯誤的設置成了任務優先級的選項
- 顯示數據時應該顯示調度器id(數組元素的 lastID 屬性),因爲使用調度器id 可以查詢到任務調度的具體情況
檔案直播
頁面: /broadcastManagement/task/timelyLive
- 任務級別 選項內容錯誤的設置成了任務優先級的選項
- 在上傳檔案直播時,任務創建成功後也彈出了一個錯誤提示(顯示了 “添加错误,稍后再试”)
- 顯示數據時應該顯示調度器id(數組元素的 lastID 屬性),因爲使用調度器id 可以查詢到任務調度的具體情況
- 文字转语音直播 應該設置默認的 語速爲5 音調爲5 音量爲5 發音人爲普通女聲
- 上傳存在bug,上傳的mp3 檔案似乎存在問題,幀似乎是亂的,多次上傳同一個檔案到服務器發現存儲下來的檔案 md5 值不一樣。(確定服務器接口沒有問題是前端問題,因爲試過測試接口上傳的內容正常)
任務調度器
頁面: /broadcastManagement/task/taskHistory
- 應該添加 調度器id 作爲可選的用戶查詢條件 ,這種最快查詢到任務調度詳情的方法。雖然任務id也是快速查詢到調度詳情的一個好用的查詢條件,但是對於流程任務同一個任務id可能會有很多的不同調度器id,例如一個流程任務每天播放兩次則每天會產生兩個調度器id,一年後這個任務id 會查詢出365*2 個不同的調度器,所以很有必要使用 調度器id 作爲條件查詢調度詳情(這也是上面要求將任務的 調度id 顯示在頁面數據中的原因)。
- 點擊 目標設備 按鈕後彈出框什麼都沒有,我覺得可以直接把這個按鈕刪除吧(除非後面老闆或其它人有要求)。因爲這個頁面主要是在想追查任務的播放情況。查看任務目標是次要的,管理員可以直接去任務相關查詢頁面查詢任務的目標。
數據統計
頁面: /broadcastManagement/bigScreen
- 在點擊區域樹上的區域節點時應該把地圖自動定位到此區域。
- 應該爲區域葉子節點增加設備節點(如果存在的化),並且在點擊葉子節點時,如果存在定位信息應該把地圖導航到定位的座標。應該可以雙擊或者在右擊設備節點後顯示設備信息(/broadcastManagement/device/deviceHistory 頁面顯示的設備詳情)
- 對於已經定位的設備添加到地圖,並且可以點擊查看設備詳情
添加 notice 功能
notice 功能被遺忘了,它主要是一些系統發給用戶的消息,做個頁面可以查詢消息,顯示消息內容,把消息標記爲已讀,刪除消息即可。
自動刷新 session
上個版本的 session 可以自動刷新一次,這次的版本 session 一次都不會自動刷新,這導致用戶登入後只能操作一個小時(服務器目前配置爲 1小時 session 過期)。這對要長時間操作的用戶體驗很差。在前端請求服務器接口發現 session 後應該自動嘗試獲取新的session並在成功後自動重試用戶請求的接口。