fence.js 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154
  1. (function () {
  2. var page = {
  3. init: function ($page, param) {
  4. $page.find('#fence-switch').rlswitch();
  5. var userinfo = learun.storage.get('userinfo');
  6. // //地图初始化
  7. var map = new AMap.Map("fence-map", {
  8. center: [120.210649,30.246071],//地图中心点
  9. zoom: 12 //地图显示的缩放级别
  10. });
  11. learun.layer.loading(true, "加载数据中");
  12. map.on('complete', function(){
  13. learun.layer.loading(false);
  14. });
  15. var fenceInfo = null;
  16. var defaultPt = [120.210649,30.246071];
  17. var storeCenter = null;
  18. var ableStatus = null;
  19. var radius = null;
  20. console.log(param)
  21. if(param){
  22. fenceInfo = param.fenceInfo.data;
  23. ableStatus = param.fenceStatus;
  24. if(fenceInfo){
  25. radius = fenceInfo.radius;
  26. storeCenter = [fenceInfo.center.lng, fenceInfo.center.lat]
  27. }
  28. }
  29. console.log(storeCenter)
  30. if(ableStatus !== '0'){
  31. console.log(ableStatus);
  32. $('#fence-switch').addClass('f-active');
  33. }
  34. var circleFence = new AMap.Circle({
  35. center: storeCenter || defaultPt,
  36. radius: radius || 100,
  37. strokeOpacity: 0,
  38. strokeWeight: 0,
  39. strokeOpacity: 0.2,
  40. fillOpacity: 0.3,
  41. fillColor : '#1791fc',
  42. zIndex: 50,
  43. });
  44. console.log(defaultPt)
  45. circleFence.setMap(map)
  46. map.setFitView(circleFence);
  47. var rangeObj = $('#fence-radius');
  48. rangeObj[0].value = radius || 100;
  49. $('#display-radius')[0].innerHTML = rangeObj[0].value;
  50. //获取要设置的半径
  51. function getSetRadius(){
  52. return rangeObj[0].value;
  53. }
  54. $('#fence-radius').on('input',function(){
  55. $('#display-radius')[0].innerHTML = this.value;
  56. var radius = getSetRadius();
  57. circleFence.setRadius(radius);
  58. map.setFitView([ circleFence ]);
  59. });
  60. map.on('moveend', function(){
  61. var center = map.getCenter();
  62. circleFence.setCenter(center);
  63. });
  64. //保存
  65. $page.find('#save-fence').on('tap', function(){
  66. learun.layer.confirm('保存将会覆盖原围栏', function (_index) {
  67. if(_index === '1'){
  68. var data = getPostData();
  69. console.log(data);
  70. if(!data){
  71. learun.layer.toast('围栏信息有误或者为空');
  72. return;
  73. }
  74. postFence(data);
  75. }else{
  76. return;
  77. }
  78. }, '保存围栏', ['否', '是']);
  79. });
  80. //获取提交数据
  81. function getPostData(){
  82. var fenceEnable = getAbleStatus();
  83. var circleCenter = circleFence.getCenter();
  84. var center = {lng: circleCenter.lng, lat:circleCenter.lat}
  85. var fenceData = {};
  86. fenceData.type = 'circle';
  87. fenceData.data = {};
  88. fenceData.data.radius = circleFence.getRadius();
  89. fenceData.data.center = center;
  90. var data = {};
  91. data.vehicleNumber = userinfo.baseinfo.deviceNumber;
  92. data.data = JSON.stringify(fenceData);
  93. data.fenceAlarmEnable = fenceEnable;
  94. console.log(data)
  95. return data;
  96. }
  97. //获取启用状态
  98. function getAbleStatus(){
  99. var status = $('#fence-switch').hasClass('f-active');
  100. if(status){
  101. return true;
  102. }else{
  103. return false;
  104. }
  105. }
  106. //post围栏信息
  107. function postFence(data){
  108. learun.httppost(config.webapi+'?s=api/save_fence_info',data,function(res){
  109. if(!res.success){
  110. learun.layer.toast(res.message);
  111. return;
  112. }
  113. learun.layer.toast('保存成功');
  114. });
  115. }
  116. }
  117. };
  118. return page;
  119. })();