MoonLight可视化订单需求区域分析系统前端

1 var overlays &＃61; [];
2 //回调获得覆盖物信息 overlay是覆盖物的抽象基类
3 var overlaycomplete &＃61; function(e) {
4 overlays.push(e.overlay);
5 var result &＃61; "";
6 result &＃61; "

";
7 result &＃43;&＃61; e.drawingMode &＃43; ":";
8 if (e.drawingMode &＃61;&＃61; BMAP_DRAWING_MARKER) {
9 result &＃43;&＃61; &＃39; 坐标&＃xff1a;&＃39; &＃43; e.overlay.getPosition().lng &＃43; &＃39;,&＃39; &＃43; e.overlay.getPosition().lat;
10
11 //getPosition() 获取标签的经纬度坐标 lng lat
12 if ($(&＃39;isInfowindow&＃39;).checked) {
13 searchInfoWindow.open(e.overlay);
14 }
15 }
16 if (e.drawingMode &＃61;&＃61; BMAP_DRAWING_CIRCLE) {
　　//圆形圈选&＃xff0c;获得经纬度和半径 &＃xff0c; 然后拼接到跳转向图标展示页面的url后面, 如 url_toPic所示&＃xff0c;即可实现不同页面之间的参数传递

17 result &＃43;&＃61; &＃39; 半径&＃xff1a;&＃39; &＃43; e.overlay.getRadius();
18 result &＃43;&＃61; &＃39; 中心点&＃xff1a;&＃39; &＃43; e.overlay.getCenter().lng &＃43; "," &＃43; e.overlay.getCenter().lat;
19 var circle_r &＃61; e.overlay.getRadius();
20 var circle_lng &＃61; e.overlay.getCenter().lng;
21 var circle_lat &＃61; e.overlay.getCenter().lat;
22 var url_toPic &＃61; "url?point&＃61;" &＃43; circle_lat &＃43; "," &＃43; circle_lng &＃43; "&radius&＃61;" &＃43; circle_r;
23
24 /* 向后台发送post请求 地理围栏数据*/
25 // 圈选之后会自动跳出一个弹窗&＃xff0c;用于可以自行保存相应的数据&＃xff0c;自行设置名称和分组&＃xff0c;而地理围栏geo和类型则是根据用户全选情况而自动添加。

26 // jQuery("#fence_name").val(name);
27 jQuery("#geo_data").css({
28 "display":"block"
29 }); //弹窗显示
30 /*中间层*/
31 jQuery("#cover").css({
32 "display":"block"
33 }); //中间禁止点击层显示
34 var fence_circle_data;
35 fence_circle_data&＃61;&＃39;{"circle":"&＃39;&＃43;circle_r&＃43;&＃39;","circle_lat":"&＃39;&＃43;circle_lat&＃43;&＃39;","circle_lng":"&＃39;&＃43;circle_lng&＃43;&＃39;"}&＃39;;
36 //地理围栏geo数据拼接和填充
37 jQuery("#fence_geo").val(fence_circle_data);
38 /*圆形1*/
39 40 jQuery("#fence_type").val("1");
41
42 //当点击弹窗的保存按钮时&＃xff0c;则会将此次圈选信息保存起来&＃xff0c;并存储在地理围栏中&＃xff0c;方便后续查询&＃xff0c;然后自动跳转到图表展示页面&＃xff0c;图表展示页面主要是对订单量、日盈里和取消率的数据的具体展示
43 //从中&＃xff0c;我们能够看到整个月份的订单量、日盈里和取消率的折线趋向&＃xff0c;同时下方表格中也将所展示的具体数据填入。如果在弹窗页面出现时&＃xff0c;用户没有填入名称和分组&＃xff0c;那么我们就会给其名称设定为当前的时间戳加上三位随机数&＃xff0c;而默认分组设为default。
44 jQuery("#btn_yes").click(function(){
45 /*获取当前时间戳*/
46 var data_time &＃61; new Date().getTime();
47 /*获取0-1000之间的随机数*/
48 var data_random &＃61; Math.ceil(Math.random()*1000);
49 /*拼接默认弹窗名称*/
50 var name &＃61; "fence-"&＃43;data_time&＃43;data_random;
51 /*控制name group的默认传参*/
52 var name_send;
53 var group_send ;
54 56 if(jQuery("#fence_name").val() !&＃61; ""){
57 name_send &＃61; jQuery("#fence_name").val();
58 }else{
59 name_send &＃61; name;
60 };
61 if(jQuery("#fence_group").val() !&＃61; ""){
62 group_send &＃61; jQuery("#fence_group").val();
63 }else{
64 group_send &＃61; "default";
65 }
66
67
68 var post_data &＃61;new Object;
69 post_data.name&＃61;name_send;
70 post_data.group&＃61;group_send;
71 post_data.type&＃61;jQuery("#fence_type").val();
72 post_data.geo&＃61;jQuery("#fence_geo").val();
73 var saveData &＃61; JSON.stringify(post_data);
74 75 send_post("url",saveData);
76 window.open(url_toPic,"_self");
77 }); //如果用户点击了取消按钮没有保存数据&＃xff0c;那么弹窗隐藏之后便会直接跳转至图表展示页面而不会存储本地圈选信息至地理围栏数据中。
78 jQuery("#btn_no").click(function(){
79 jQuery("#geo_data").css({
80 "display":"none"
81 });
82 jQuery("#cover").css({
83 "display":"none"
84 });
85 window.open(url_toPic,"_self");
86 })
87 }
88
89 if (e.drawingMode &＃61;&＃61; BMAP_DRAWING_POLYLINE || e.drawingMode &＃61;&＃61; BMAP_DRAWING_POLYGON || e.drawingMode &＃61;&＃61; BMAP_DRAWING_RECTANGLE) {
90 //在这里为折线、多边形、矩形等多点圈选&＃xff0c;将所画出的点依次拼接到Url后面 方法同圆形圈选
91 166 });
167 176
177 }
178
179 };

1 //将所传递过来的url后的参数解析绘制图表
2 /*获取url参数*/
3 function getUrlParam(){
4 /*拿到url地址*/
5 var url&＃61;window.location.search;
6 /*截取?后的所有数据*/
7 var params &＃61; url.substring(url.indexOf("?")&＃43;1);
8 /*如果url中有弧度的数据*/
9 var str&＃61;&＃39;radius&＃39;;
10 var json_data;
11 /*获取圆形圈选的经纬度和弧度*/
12 if(url.indexOf(str)!&＃61;-1){
13 var paramArr&＃61;params.split("&");
14 var param_first&＃61;paramArr[0].split("&＃61;");
15 var param_lng_lat&＃61;param_first[1].split(",");
16 var circle_lat &＃61; param_lng_lat[0];
17 var circle_lng &＃61; param_lng_lat[1];
18 var param_second &＃61; paramArr[1].split("&＃61;");
19 var circle_r &＃61; param_second[1];
20
21 /*请求后端接口*/
22 json_data&＃61;send_get("url?point&＃61;" &＃43; circle_lat &＃43; "," &＃43; circle_lng &＃43; "&radius&＃61;" &＃43; circle_r);
23 24 }else{
25 /*截取url中等号右边的参数*/
26 var paramSqual&＃61;params.split("&＃61;");
27 var paramSqual_lng_lat;
28 var url_getSqual;
29 url_getSqual&＃61;"url?";
30 /*参数列表为用;分割开的经纬度数据*/
31 var paramSqual_Arr &＃61; paramSqual[1].split(";");
32 for(var i&＃61;0;i){
33 paramSqual_lng_lat&＃61;paramSqual_Arr[i].split(",");
34 url_getSqual&＃43;&＃61;"point"&＃43;i&＃43;"&＃61;"&＃43;paramSqual_lng_lat[0]&＃43;&＃39;,&＃39;&＃43;paramSqual_lng_lat[1]&＃43;&＃39;&&＃39;;
37 }
38 url_getSqual&＃61;url_getSqual.substring(0,url_getSqual.length-1);
39 json_data&＃61;send_get(url_getSqual);
40 41 }

1 /*渲染图表*/
2
3 /*日订单量图表展示区*/
4 var chartName_total &＃61; echarts.init(document.getElementById("chart_total"));
5 var adata_total&＃61;json_data.data;
6 var option_total &＃61; {
7 title: {
8 text: &＃39;订单量分析&＃39;
9 },
10 tooltip: {
11 trigger: &＃39;axis&＃39;
12 },
13 legend: {
14 data:[&＃39;订单量&＃39;]
15 },
16 grid: {
17 left: &＃39;3%&＃39;,
18 right: &＃39;4%&＃39;,
19 bottom: &＃39;3%&＃39;,
20 containLabel: true
21 },
22 toolbox: {
23 feature: {
24 saveAsImage: {}
25 }
26 },
27 xAxis: {
28 type: &＃39;category&＃39;,
29 boundaryGap: false,
30 data:adata_total["xAxis"]
31 },
32 yAxis: {
33 type: &＃39;value&＃39;
34 },
35 series: [
36 {
37 name: &＃39;订单数量&＃39;,
38 type: &＃39;line&＃39;,
39 stack: &＃39;总量&＃39;,
40 data: adata_total["total"]
41 }
42 ]
43 };
44 chartName_total.setOption(option_total);

/*表格中的数据*/var tableData &＃61;json_data.data.detail;var tableSource&＃61;"

1 //删除和查看数据代码
2 //点击删除按钮时&＃xff0c;将该行数据删除&＃xff0c;并且调用后端接口&＃xff0c;删除后端数据
3 function delete_data(){
4 $(".btn_delete").click(function(){
5 if(confirm("是否确认删除&＃xff1f;")){
6 $(this).parents("tr").remove();
7 var delete_id&＃61;$(this).parents("tr").children("th.delete_id").text(); //先找到父元素&＃xff0c;再找父元素中需要的子元素
8 var url_delete;
9 url_delete&＃61;"url?id&＃61;";
10 url_delete&＃43;&＃61;delete_id;
11 var delete_data&＃61;send_get(url_delete);
12 alert(delete_data.message);
13 }else{
14 return false;
15 }
16 });
17
18 //点击查看按钮时&＃xff0c;将url拼接对应经纬度数据等&＃xff0c;然后跳转到图表展示页面并且进行利用所传递的参数进行图表绘制&＃xff0c;圆形圈选需要的是中心点和半径&＃xff0c;而其他都是将各个点的经纬度依次拼接即可。
19 $(".btn_look").click(function(){
20 var jsonStr&＃61;$(this).parents("tr").children("th.tabData_geo").text();
21 console.log($(this).parents("tr").children("th.tabData_geo").text());
22 var json&＃61;$.parseJSON(String(jsonStr));
23 console.log(json);
24 var look_url;
25 var num&＃61;0;
26 var jsonType&＃61;$(this).parents("tr").children("th#fence_type").text();
27 if(jsonType &＃61;&＃61; "环形") {
28 look_url&＃61; "url?point&＃61;" &＃43; json.circle_lat &＃43; "," &＃43; json.circle_lng &＃43; "&radius&＃61;" &＃43; json.circle;
29 window.open(look_url,"_self")
30 }else {
31 look_url&＃61; "url?point&＃61;";
32 for(var i&＃61;0;i){
33 for(var j in json[i]) {
34 num&＃43;&＃43;;
35 look_url&＃43;&＃61;json[i][j];
36 if(num%2&＃61;&＃61;0) {
37 look_url&＃43;&＃61;";";
38 }else {
39 look_url&＃43;&＃61;",";
40 }
41 }
42 } //根据自己的需要拼接字符串url
43 look_url&＃61;look_url.substring(0,look_url.length-1);
44 window.open(look_url , "_self")
45 }
46 });
47 }

1 //该表格绘制部分分为不同情况&＃xff0c;比如我们刚一打开页面时&＃xff0c;
2 //要向后端默认传递页码为1&＃xff0c;而所拿到的数据是全部数据。
3 //而当我们点击了查询按钮之后&＃xff0c;所拿到的数据多少又会发生变化
4 //向后端传递的字段为page_json ,代码中即可看到具体的内容
5 function tabData_show(){
6
7 var json_data;
8 var page_json &＃61; {
9 "name": null,
10 "group": null,
11 "type": null,
12 "startTime": null,
13 "endTime": null,
14 "pageSize": 10||null,
15 "pageNum": 1||null
16 };
17 page_json &＃61; JSON.stringify(page_json);
18 json_data &＃61; send_post("url",page_json);
19 var tabData &＃61; json_data.data.data;
20
21 var totle_Page &＃61; Math.ceil(json_data.data.total/10);
22 var now_Page &＃61; json_data.data.nowPage;
23 var page_Limit &＃61; Math.min(9 , totle_Page);
24 //nowPage&＃61;now_Page;
25 //maxPage&＃61;totle_Page;
26 page(now_Page,totle_Page , page_Limit);
27 /*地理围栏表格*/
28 ……
29 //接下来根据数据自行渲染表格即可

}

1 /*search按钮点击时的搜索功能*/
2 //查询按钮点击的时候&＃xff0c;没有添加过滤条件时默认返回所有数据进行渲染
3 //而如果有过滤条件时则根据筛选条件返回相应的数据
4 $(".search").click(function () {
5 $("#page-item a.page-link").remove();
6 var search_type;
7 if($("#btn_search_type").val() &＃61;&＃61; "环形") {
8 search_type &＃61; 1;
9 }else if($("#btn_search_type").val() &＃61;&＃61; "矩形") {
10 search_type &＃61; 2;
11 }else{
12 search_type &＃61; 3;
13 }
14 var search_json &＃61; {
15 "name": $("#btn_search_name").val() || null,
16 "group": $("#btn_search_group").val() || null,
17 "type": search_type || null,
18 "startTime": $("#btn_search_start").val() || null,
19 "endTime": $("#btn_search_end").val() || null,
20 "pageSize": 10 || null,
21 "pageNum": 1 || null
22 };
23 search_json &＃61; JSON.stringify(search_json);
24
25 var data_Json &＃61; send_post("url", search_json);
26 var dataJson &＃61; data_Json.data.data;
27 var totle_search &＃61; Math.ceil(data_Json.data.total / 10);
28 var search_Page &＃61; data_Json.data.nowPage;
29 var search_Limit &＃61; Math.min(9, totle_search);
30 page(search_Page, totle_search, search_Limit);
31
32 //然后再根据新拿到的不同数据渲染表格
49 });