上次分享了移動(dòng)端報(bào)表JS開發(fā)的系統(tǒng)概念，后來(lái)我又回去摸索了一些案例。之前接觸到的FineReport的APP客戶端可以用來(lái)打卡簽到，就好奇研究了以下，這次就來(lái)聊一聊報(bào)表移動(dòng)端開發(fā)如何實(shí)現(xiàn)定位功能。
1. 解決思路
在用FineReport設(shè)計(jì)模板的時(shí)候添加一個(gè)按鈕控件，點(diǎn)擊該按鈕的時(shí)候，獲取當(dāng)前地理位置，并將該位置信息復(fù)制給某個(gè)單元格，最后在客戶端填報(bào)當(dāng)前模板即可。
2. 示例
實(shí)現(xiàn)如下圖所示效果，點(diǎn)擊地理位置按鈕獲取當(dāng)前位置與當(dāng)前時(shí)間，并顯示在下方對(duì)應(yīng)的單元格中：
2.1 模板制作
打開設(shè)計(jì)器，新建一張模板，按照如下圖所示樣式設(shè)計(jì)模板，其中E2單元格為按鈕控件，控件名稱為地理位置，C5為下拉框控件，E5為時(shí)間控件：
2.2 獲取當(dāng)前地理位置
獲取當(dāng)前地理位置有兩種方式，一個(gè)是點(diǎn)擊按鈕獲取地理位置，一個(gè)是直接打開模板的時(shí)候就獲取位置，示例中，我們是想實(shí)現(xiàn)通過(guò)點(diǎn)擊按鈕獲取地理位置。
通過(guò)點(diǎn)擊按鈕獲取地理位置
打開按鈕的控件設(shè)置，為該控件添加一個(gè)點(diǎn)擊事件，如下圖：
js如下：
1. FR.location(function(status, message)
{ //獲取地理位置
2. if(status=="success") {
3. //定位成功，message返回經(jīng)緯度值
4. FR.Msg.alert("當(dāng)前位置是" + message);
5. contentPane.setCellValue(2, 3, message);
6. } else {
7. //定位失敗，message返回對(duì)應(yīng)的錯(cuò)誤信息
8. FR.Msg.alert(message); //定位失敗
9. }
10. });
FineReport通過(guò)FR.location方法獲取當(dāng)前位置，如果status值為success，則表示獲取地理位置成功否則定位失敗，如果定位成功，則將返回的地理位置信息賦值給C4單元格。
但是該方法只在移動(dòng)端有用，如果在web點(diǎn)擊該按鈕事件獲取地理位置，則直接提示定位失敗。
加載結(jié)束后獲取當(dāng)前位置
如果想在模板加載結(jié)束之后就獲取到當(dāng)前地理位置，那么只需要將上述代碼添加到加載結(jié)束后事件中即可，打開模板，點(diǎn)擊模板>模板web屬性>填報(bào)頁(yè)面設(shè)置，添加一個(gè)加載結(jié)束事件，如下圖：
2.3 獲取當(dāng)前時(shí)間
在模板中還需要將當(dāng)前簽到時(shí)間也賦值過(guò)去，所以還需要在按鈕的點(diǎn)擊事件中獲取到當(dāng)前時(shí)間，并賦值給E4單元格,js如下：
11. var myDate = new Date();
12. var mytime=myDate.getFullYear()+"-"+myDate.getMonth()+1+"-"+myDate.getDate()+" "+myDate.getHours()+":"+myDate.getMinutes()+":"+myDate.getSeconds(); //獲取當(dāng)前時(shí)間
13. contentPane.setCellValue(4, 3, mytime);
按鈕點(diǎn)擊事件全部js如下：
14. FR.location(function(status, message){ //獲取地理位置
15. if(status=="success") {
16. //定位成功，message返回經(jīng)緯度值
17. FR.Msg.alert("當(dāng)前位置是" + message);
18. contentPane.setCellValue(2, 3, message);
19. var myDate = new Date();
20. var mytime=myDate.getFullYear()+"-"+myDate.getMonth()+1+"-"+myDate.getDate()+" "+myDate.getHours()+":"+myDate.getMinutes()+":"+myDate.getSeconds(); //獲取當(dāng)前時(shí)間
21. contentPane.setCellValue(4, 3, mytime);
22.
23. } else {
24. //定位失敗，message返回對(duì)應(yīng)的錯(cuò)誤信息
25. FR.Msg.alert(message); //定位失敗
26. }
27. });
將該模板添加到數(shù)據(jù)決策系統(tǒng)的節(jié)點(diǎn)樹上，其操作方法請(qǐng)查看添加模板，其中模板的預(yù)覽方式為填報(bào)，如下圖：
根據(jù)添加服務(wù)器章節(jié)介紹的操作步驟，用移動(dòng)端登錄該系統(tǒng)，訪問(wèn)該張模板，點(diǎn)擊地理位置按鈕獲取當(dāng)前地理位置和當(dāng)前時(shí)間，如下圖：
但是，F(xiàn)ineReport獲取到的地理位置是經(jīng)緯度，如需要確定其具體位置，就需要另外轉(zhuǎn)換。
移動(dòng)端的開發(fā)還在持續(xù)學(xué)習(xí)中，感興趣的朋友可以和我一起探討研究。