移動端報表如何擷取當前地理位置

標籤：移動端報表   擷取   地理位置   

1. 描述

對於企業大多數員工來說，由於其工作位置的固定的，可以有多種方式進行上班打卡簽到以保證該員工有按時正常來上班，但是對於經常需要出差，去客戶現場的員工來說，就無法保證他們是否有去工作，所以希望能通過手機位置定位來保證員工有正常上班。以報表開發工具FineReport 移動端為例示範企業可以如何完美解決這一問題。

2. 解決思路

可以通過FineReport模板添加一個按鈕控制項，點擊該按鈕的時候，擷取當前地理位置，並將該位置資訊複製給某個儲存格，最後員工填報當前模板即可。

3. 樣本

實現如所示效果，點擊地理位置按鈕擷取當前位置與目前時間，並顯示在下方對應的儲存格中：

650) this.width=650;" src="http://img.blog.csdn.net/20151117102320963?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" style="border:none;" />

3.1 模板製作

開啟設計器，建立一張模板，按照如所示樣式設計範本，其中E2儲存格為按鈕控制項，控制項名稱為地理位置，C5為下拉框控制項，E5為時間控制項：

650) this.width=650;" src="http://img.blog.csdn.net/20151117102358073?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" style="border:none;" />

3.2 擷取當前地理位置

擷取當前地理位置有兩種方式，一個是點擊按鈕擷取地理位置，一個是直接開啟模板的時候就擷取位置，樣本中，我們是想實現通過點擊按鈕擷取地理位置。

· 通過點擊按鈕擷取地理位置

開啟按鈕的控制項設定，為該控制項添加一個點擊事件，如：

650) this.width=650;" src="http://img.blog.csdn.net/20151117102421839?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" style="border:none;" />

js如下：

1. FR.location(function(status, message){ //擷取地理位置  

2. if(status=="success") {  

3.     //定位成功，message返回經緯度值  

4.     FR.Msg.alert("當前位置是" + message);  

5.     contentPane.setCellValue(2, 3, message);      

6. } else {  

7.     //定位失敗，message返回對應的錯誤資訊  

8.     FR.Msg.alert(message); //定位失敗  

9. }  

10. });  

FineReport通過FR.location方法擷取當前位置，如果status值為success，則表示擷取地理位置成功，否則定位失敗，如果定位成功，則將返回的地理位置資訊賦值給C4儲存格。

註：該方法只在移動端有用，如果在web點擊該按鈕事件擷取地理位置，則直接提示定位失敗。

· 載入結束後擷取當前位置

如果想在模板載入結束之後就擷取到當前地理位置，那麼只需要將上述代碼添加到載入結束後事件中即可，開啟模板，點擊模板>模板web屬性>填報版面設定，添加一個載入結束事件，如：

650) this.width=650;" src="http://img.blog.csdn.net/20151117102446997?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" style="border:none;" />

3.3 擷取目前時間

在模板中還需要將當前簽到時間也賦值過去，所以還需要在按鈕的點擊事件中擷取到目前時間，並賦值給E4儲存格,js如下：

1. var myDate = new Date();  

2. var mytime=myDate.getFullYear()+"-"+myDate.getMonth()+1+"-"+myDate.getDate()+" "+myDate.getHours()+":"+myDate.getMinutes()+":"+myDate.getSeconds(); //擷取目前時間  

3. contentPane.setCellValue(4, 3, mytime);   

按鈕點擊事件全部js如下：

1. FR.location(function(status, message){ //擷取地理位置  

2. if(status=="success") {  

3.     //定位成功，message返回經緯度值  

4.     FR.Msg.alert("當前位置是" + message);  

5.     contentPane.setCellValue(2, 3, message);   

6.     var myDate = new Date();  

7.     var mytime=myDate.getFullYear()+"-"+myDate.getMonth()+1+"-"+myDate.getDate()+" "+myDate.getHours()+":"+myDate.getMinutes()+":"+myDate.getSeconds(); //擷取目前時間  

8.     contentPane.setCellValue(4, 3, mytime);   

9.   

10. } else {  

11.     //定位失敗，message返回對應的錯誤資訊  

12.     FR.Msg.alert(message); //定位失敗  

13. }  

14. });  

3.4 效果查看

將該模板添加到資料決策系統的節點樹上，其操作方法請查看添加模板，其中模板的預覽方式為填報，如：

650) this.width=650;" src="http://img.blog.csdn.net/20151117102512902?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" style="border:none;" />

根據添加伺服器章節介紹的操作步驟，用移動端登入該系統，訪問該張模板，點擊地理位置按鈕擷取當前地理位置和目前時間，如：

650) this.width=650;" src="http://img.blog.csdn.net/20151117102527281?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" style="border:none;" />

註：FineReport擷取到的地理位置是經緯度，如需要確定其具體位置，需要另外轉換。

移動端報表如何擷取當前地理位置