下面是網頁前端待改進的一些點
地圖key
地圖使用的密鑰不應該硬編碼,這樣無法爲不同客戶替換密鑰。客戶端應該向服務器發送一個 GET /es6/map.json 請求,它將返回一個包含地圖 key 的 json 數據
{
"web-js":"XXXXXXXXX",
"web-service":"XXXXXXXXX"
}
- web-js 是 web端(JS API) 的 key
- web-service 是 web服務 的 key
安全密鑰查看官方文檔設置了nginx代理,詳情請查看官方教學
server {
location /_AMapService/v4/map/styles {
set $args "$args&jscode=xxx";
proxy_pass https://webapi.amap.com/v4/map/styles;
}
# 海外地图服务代理
location /_AMapService/v3/vectormap {
set $args "$args&jscode=xxx";
proxy_pass https://fmap01.amap.com/v3/vectormap;
}
# Web服务API 代理
location /_AMapService/ {
set $args "$args&jscode=xxx";
proxy_pass https://restapi.amap.com/;
}
}
- server 和主網頁服務運行在同一端口地址
- 前端應該參考高德官網教學,請求 /_AMapService/ 路徑下的接口
用户管理
頁面: /broadcastManagement/system/useManagement
- 添加用戶 功能中分組和區域兩個選項都只能單選。但實際上應該是多選
- 修改分組 功能在打開對話框後,應該將當前用戶已擁有的組自動勾選上
- 修改區域 功能在打開對話框後,應該將用戶已經擁有的組自動勾選上(目前的頁面在打開時也存在bug,打開時不會勾選任何區域,但如果修改了某個人的區域,之後打開任何人的區域修改框都會把更改修改時勾選的區域勾選上)(另外目前在修改區域後,沒有修改頁面上列表中對應用戶的區域信息爲新內容)
設備管理
頁面: /broadcastManagement/device/deviceManagement
- 在 https 時添加一個名爲“监听”的功能(添加在 操作菜單欄最開始),當用戶點擊時在新的頁面打開 `//${location.host}/static/listen.html?physical=XXXX`
XXXX 要自動修改爲設備的物理碼
這個頁面可以監聽設備的播放內容並使用瀏覽器將其播放出來,但是受限與瀏覽器的安全限制,它只在 https 模式下才能加載瀏覽器提供的流解碼功能,故只在 https 下有效。所以前端應該判斷下當前是否是 https(js 中 location.protocol 屬性記錄了訪問協議),只在 https 時創建這個按鈕
創建流程任務
頁面: /broadcastManagement/task/createTask
- 在添加音頻時,查詢按鈕無效,在點擊後,在 firefox debug 頁面沒有看到發送查詢請求,頁面也沒有任何變化
- 將時間控件刪除,直接讓用戶手動輸入(HH:mm:ss)。原因如下:
- 這個時間控件選擇起來太麻煩,必須跟用戶進行教學,否則大概率不會正確使用
- 這個控件太難用,必須先選結束時間才能選擇開始時間(開始時間可選範圍受到結束時間影響)。這種選擇方式違反大部分人類習慣
- 這個控件存在時,手動輸入似乎也存在bug(受到控件範圍影響有時會把輸入內容修改到控件要求的範圍內)
- 有時無法先選擇結束時間,只能先選擇開始時間,見下一項功能增加
- 也可以不用刪除,另外一種解決方案是將控件的結束時間默認設置爲 23:59:59 ,這樣開始時間就幾乎不會被結束時間限制。但用戶在修改了結束時間後,再次修改時間仍然會面臨上述多個問題,所以最好直接刪除這個控件,讓用戶手動輸入 HH:mm:ss 的時間文本
- 在時間輸入的對話框後再增加個圖標按鈕,當用戶點擊後依據當前時間自動計算結束時間。(結束時間=開始時間+所有音頻播放播放花費的時間+20秒) (返回的每個音頻數據有個 duration 屬性,是這首音樂的播放時長,+20秒是因爲 任務在開始後會等待一段時間才開始,用於等待所有設備準備好,等待時間由服務器參數控制,但一般都小於 20 秒,此外音頻設備在切換音樂時也會有毫秒級別的切換時間但通常可以忽略)
- 添加任務/修改任務 對話框中的任務目標,應該先反向查詢區域名稱和設備名稱後顯示名稱,在沒有查找到時才顯示目標邏輯碼
- 修改任務時,點擊 選擇區域 按鈕打開 選擇目標區域 對話框時,沒有把已選的區域設置到目標區域中。這應該是沒有把修改任務時已有的區域添加進去
- 創建任務/修改任務 中的 任務描述 允許用戶留空白字符串,這是個可選屬性,目前前端頁面是必填屬性
流程任務一覽
頁面: /broadcastManagement/task/toExamineTask
- 在點擊 查看 按鈕顯示任務詳情時,應該查詢任務目標和音頻的名稱,只在沒查找到對於內容時才顯示,目標邏輯碼或音頻id
- 在列表的 調度器id 非0時,應該可以直接點擊此id後打開一個頁面顯示此 調度器 相關的所有日誌,以便於管理員能夠方便的查看此任務最後的調度情況。
音頻直播
頁面: /broadcastManagement/task/audioLive
- 任務描述 允許用戶留空白字符串,這是個可選屬性,目前前端頁面是必填屬性
- 任務目標 的區域 和 設備,應該優先顯示名稱,只在查詢不到名稱時才顯示邏輯碼
- 試聽 打開的頁面應該優先顯示名稱,只在查詢不到時才顯示音頻 id
- 在列表的 調度器id 非0時,應該可以直接點擊此id後打開一個頁面顯示此 調度器 相關的所有日誌,以便於管理員能夠方便的查看此任務的調度情況。
- 在添加音頻時,查詢按鈕無效,在點擊後,在 firefox debug 頁面沒有看到發送查詢請求,頁面也沒有任何變化
- 在添加音頻時,應該可以在此處直接試聽音頻,以方便管理員可以在此處確定要選擇的音頻內容
檔案直播
頁面: /broadcastManagement/task/timelyLive
- 任務描述 允許用戶留空白字符串,這是個可選屬性,目前前端頁面是必填屬性
- 任務目標 的區域 和 設備,應該優先顯示名稱,只在查詢不到名稱時才顯示邏輯碼
- 檔案直播,上傳mp3進行直播的功能無法正常工作 (將 file.html 中的 fileLiveStreaming 函數拷貝到源碼,這個函數封裝了這一功能,file.html 中包含了對此函數的調用示例)
- 在列表的 調度器id 非0時,應該可以直接點擊此id後打開一個頁面顯示此 調度器 相關的所有日誌,以便於管理員能夠方便的查看此任務的調度情況。
數據統計
頁面: /broadcastManagement/bigScreen
- 在點擊區域樹上的區域節點時應該把地圖自動定位到此區域。(在上個版本中使用百度地圖,做法是,把點擊的區域自動串成一個地理名稱,然後調用baidu地圖提供的api定位到這個名稱。如果目前地圖不支持請後續告知再商議如何處理。 比如點擊了成華區,發現成華區的父級是成都就定位到 “成都成華區”, 以算法來說代碼類似如下)
function onClickItem(ele) {
// 組合地名
const names = []
for (; ele; ele = foundParent(ele)) {
names.push(ele.name)
}
const name = names.reverse().join("")
// 調用地圖 api,顯示這個地名
console.log(name)
}
- 應該爲區域葉子節點增加設備節點(如果存在的化),並且在點擊葉子節點時,如果存在定位信息應該把地圖導航到定位的座標。應該可以雙擊或者在右擊設備節點後顯示設備信息(/broadcastManagement/device/deviceHistory 頁面顯示的設備詳情)
- 應該動態創建樹,而不是一下子創建一個完整的靜態樹
- 爲樹的節點定義兩個類型 area 和 device 然後每個節點記錄這個類型例如記錄到 type 屬性 .type=area or device
- 頁面加載時構建好完整的 area 樹(就是目前情況),或者部分樹
- 爲每個節點添加點擊回調處理,在回調裏面依據 type 記錄的不同而執行不同代碼,如果是 device 彈出一個詳細框顯示節點詳細,如果是 area 並且是葉子節點,查看它是否完成(例如爲每個節點定義一個枚舉 state 屬性 idle,query,complete 。當 state 爲 idle 時執行查詢),查詢它下面的設備(查詢時將 state 設置爲 query 避免多次點擊),在查詢成功後(將 state 設置爲 complete 避免重複查詢)將查找到的設備以 type=device 加入樹中
- 頁面最下面的三個統計(可以選擇統計時間段那三個),具銷售人員建議應該再添加一個可選想 本周 用於查詢本週的數據統計情況
添加 notice 功能
notice 功能被遺忘了,它主要是一些系統發給用戶的消息,做個頁面可以查詢消息,顯示消息內容,把消息標記爲已讀,刪除消息即可。