开发2.0功能

puzhibing

2023-07-26 d6c02727ff5005990c704873668769ee2c6375b4

 management/guns-admin/src/main/webapp/WEB-INF/view/blackboardBlank.html

@@ -5,8 +5,7 @@
         <div class="row" style="border-style: none none solid; border-color: #e7eaec; border-width: 1px 0px;">
            <ul class="breadcrumb" style="height: 45px; line-height: 45px; padding-left: 20px;">
               <li><a href="#" class="statistics">运营数据总览</a></li>
               <li><a href="#" class="map">车辆地图总览</a></li>
               <li><a href="#" class="order">订单热点图</a></li>
               <li><a href="#" class="map">地图总览</a></li>
            </ul>
         </div>

@@ -139,7 +138,7 @@
                  </select>
               </div>
               <div class="initialLevel col-sm-2 control-label form-group" >
                  <button type="button" class="btn btn-primary" onclick="getData()" style="height: 33px">
                  <button type="button" class="btn btn-primary" onclick="getMapData()" style="height: 33px">
                     <i class="fa fa-search"></i>&nbsp;查询
                  </button>
                  <button type="button" class="btn btn-primary button-margin" onclick="reset()" style="height: 33px">
@@ -162,68 +161,25 @@
                     <label id="onLineDriverCount">${onLineDriverCount}</label>
                     <label>人</label>
                  </div>
               </div>
            </div>
         </div>

         <div class="row content" id="orderDiv">
            <div class="initialLevel col-sm-12 control-label form-group" style="cursor: pointer;text-align: left;">
               <div class="initialLevel col-sm-2 control-label form-group"  >
                  <select class="input-group" id="orderType" style="width: 180px;height: 33px" name="orderType">
                     <option value="">请选择订单类型</option>
                     <option value="1">未接单</option>
                     <option value="2">服务中</option>
                     <option value="3">已完成</option>
                     <option value="4">已取消</option>
                  </select>
               </div>
               <div class="initialLevel col-sm-2 control-label form-group"  >
                  <button type="button" class="btn btn-primary " onclick="getDataOrder()" style="height: 33px">
                     <i class="fa fa-search"></i>&nbsp;查询
                  </button>
                  <button type="button" class="btn btn-primary button-margin" onclick="resetOrder()" style="height: 33px">
                     <i class="fa fa-trash"></i>&nbsp;重置
                  </button>
               </div>
            </div>
            <div class="col-sm-10" >
               <input hidden id="allList" value="${allList}">
               <div class="initialLevel col-sm-12 control-label form-group" style="cursor: pointer;text-align: left;">
                  <div class="initialLevel col-sm-12 control-label form-group"  >
                     <div id="containerOrder" ></div>
                     <div id="panelOrder" ></div>
                  </div>
               </div>

               <div class="initialLevel col-sm-12 control-label form-group" style="cursor: pointer;text-align: left;">
                  <div class="initialLevel col-sm-2 control-label form-group"  >
                     <label>未接单</label>
                     <label>未接单:</label>
                     <label id="pendingOrderCount">${pendingOrderCount}</label>
                  </div>
                  <div class="initialLevel col-sm-2 control-label form-group"  >
                     <label>服务中</label>
                     <label>服务中:</label>
                     <label id="serverCount">${serverCount}</label>
                  </div>
                  <div class="initialLevel col-sm-2 control-label form-group"  >
                     <label>已完成</label>
                     <label>已完成:</label>
                     <label id="finishCount">${finishCount}</label>
                  </div>
                  <div class="initialLevel col-sm-2 control-label form-group"  >
                     <label>已取消</label>
                     <label>已取消:</label>
                     <label id="cancelCount">${cancelCount}</label>
                  </div>
               </div>
            </div>
            <div class="col-sm-2">
               <div class="ibox float-e-margins">
                  <div class="ibox-content">
                     <div class="form-horizontal" id="serverOrder" style="overflow:scroll;width: 100%; height:650px;">
                     </div>
                  </div>
               </div>
            </div>
         </div>

      </div>
   </div>
</div>
@@ -366,7 +322,6 @@
               queryOrderCount()
               break;
            case "map":
               map("",113.264434,23.129162);
               break;
            case "order":
               mapOrder("");
@@ -745,187 +700,149 @@
      ajax.start();
   }

   function getDataOrder(){
      var ajax = new $ax(Feng.ctxPath + "/tHomePage/getMap", function (data) {
         document.getElementById("onLineDriverCount").innerText=data.onLineDriverCount
         document.getElementById("pendingOrderCount").innerText=data.pendingOrderCount
         document.getElementById("serverCount").innerText=data.serverCount
         document.getElementById("finishCount").innerText=data.finishCount
         document.getElementById("cancelCount").innerText=data.cancelCount
         $('#allList').val(data.allList);
         console.log(data.allList)
         mapOrder(data.allList)
         getOrderData()

      }, function (data) {
      });
      ajax.set("agentId",$("#agentId").val());
      ajax.set("type",$("#orderType").val());
      ajax.start();
   }
   function resetOrder(){
      $("#agentId").val('')
      $("#orderType").val('')
      var ajax = new $ax(Feng.ctxPath + "/tHomePage/getMap", function (data) {
         document.getElementById("onLineDriverCount").innerText=data.onLineDriverCount
         document.getElementById("pendingOrderCount").innerText=data.pendingOrderCount
         document.getElementById("serverCount").innerText=data.serverCount
         document.getElementById("finishCount").innerText=data.finishCount
         document.getElementById("cancelCount").innerText=data.cancelCount
         $('#allList').val(data.allList);
         mapOrder(data.allList)
         getOrderData()
      }, function (data) {
      });
      ajax.set("agentId",$("#agentId").val());
      ajax.set("type",$("#orderType").val());
      ajax.start();
   }


   function map(e,addressLon,addressLat){
      window._AMapSecurityConfig = {
         securityJsCode:'b62d9146929db08c4c2f4537d045320d',
      };
      laydate.render({
         elem: '#createTime',
         type: 'date',
         range: true
      });
    // 创建地图实例
    var map = new AMap.Map("container", {
        zoom: 13,
        center: [103.924660,30.588548],
        resizeEnable: true
    });

      AMapLoader.reset() // 需要把这个reset一下
      AMapLoader.load({
         "key": "1d43098bcd98ab124623e7e4bcc9595e",              // 申请好的Web端开发者Key，首次调用 load 时必填
         "version": "2.0",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
         "plugins": ['AMap.Driving'],           // 需要使用的的插件列表，如比例尺'AMap.Scale'等
         "AMapUI": {             // 是否加载 AMapUI，缺省不加载
            "version": '1.1',   // AMapUI 版本
            "plugins":['overlay/SimpleMarker'],       // 需要加载的 AMapUI ui插件
         },
         "Loca":{                // 是否加载 Loca， 缺省不加载
            "version": '2.0'  // Loca 版本
         },
      }).then((AMap)=>{
         //初始化地图对象，加载地图
         var map = new AMap.Map('container', {
            viewMode: '2D', // 默认使用 2D 模式，如果希望使用带有俯仰角的 3D 模式，请设置 viewMode: '3D',
            zoom:10, //初始化地图层级
            center: [addressLon,addressLat] //初始化地图中心点
         });
         // map.clearMap();  // 清除地图覆盖物
         // 经纬度坐标数组
         const  onLineDriver = $('#onLineDriver').val();
         var list1 = JSON.stringify(onLineDriver)
         const jsonArr = JSON.parse(list1)
         const jsonArr1 = JSON.parse(jsonArr);
         console.log(jsonArr1)
         M = jsonArr1;
         M.forEach(function(marker) {
            new AMap.Marker({
               map: map,
               icon: marker[2]==1?'https://csxdj.obs.cn-south-1.myhuaweicloud.com/c1d2f38187de40daa353fcc70993288e.png':'https://csxdj.obs.cn-south-1.myhuaweicloud.com/c1d2f38187de40daa353fcc70993288e.png',
               position: [marker[0], marker[1]],
               offset: new AMap.Pixel(-13, -30)
            });
         });
   let texts = [];
   function getMapData() {
        map.remove(texts);
        var ajax = new $ax(Feng.ctxPath + "/tHomePage/getMap", function (data) {
         let lobby = data.lobby;//大厅
         let service = data.service;//服务中
         let receivedOrder = data.receivedOrder;//已接单
         let leisure = data.leisure;//空闲
         let cancel = data.cancel;//流失

         // var center = map.getCenter();
         // var centerText = '当前中心点坐标：' + center.getLng() + ',' + center.getLat();
         // 添加事件监听, 使地图自适应显示到合适的范围
         AMap.event.addDomListener(document.getElementById('container'), 'click', function() {
            var newCenter = map.setFitView();
         });
      }).catch((e)=>{
         console.error(e);  //加载错误提示
      });
   }
            for (let i = 0; i < cancel.length; i++) {
            let lonLat = cancel[i].lonLat;
                let positon = lonLat.split(",");
                var text = new AMap.Text({
                    text:'流 失',
                    anchor:'center', // 设置文本标记锚点
                    draggable:true,
                    cursor:'pointer',
                    style:{
                        // 'padding': '.75rem 1.25rem',
                        // 'margin-bottom': '1rem',
                        // 'border-radius': '.25rem',
                        // 'background-color': 'white',
                        // 'width': '15rem',
                        'border-width': 0,
                        'box-shadow': '0 2px 6px 0 rgba(114, 124, 245, .5)',
                        'text-align': 'center',
                        'font-size': '16px',
                        'color': 'red'
                    },
                    position: [parseFloat(positon[0]),parseFloat(positon[1])]
                });
                text.setMap(map);
                texts.push(text);
            }
            for (let i = 0; i < lobby.length; i++) {
                let lonLat = lobby[i].lonLat;
                let positon = lonLat.split(",");
                var text = new AMap.Text({
                    text:'大 厅',
                    anchor:'center', // 设置文本标记锚点
                    draggable:true,
                    cursor:'pointer',
                    style:{
                        'border-width': 0,
                        'box-shadow': '0 2px 6px 0 rgba(114, 124, 245, .5)',
                        'text-align': 'center',
                        'font-size': '16px',
                        'color': 'blue'
                    },
                    position: [parseFloat(positon[0]),parseFloat(positon[1])]
                });
                text.setMap(map);
                texts.push(text);
            }

   function mapOrder(e){
      window._AMapSecurityConfig = {
         securityJsCode:'b62d9146929db08c4c2f4537d045320d',
      };
      AMapLoader.reset() // 需要把这个reset一下
      AMapLoader.load({
         "key": "1d43098bcd98ab124623e7e4bcc9595e",              // 申请好的Web端开发者Key，首次调用 load 时必填
         "version": "2.0",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
         "plugins": ['AMap.Driving'],           // 需要使用的的插件列表，如比例尺'AMap.Scale'等
         "AMapUI": {             // 是否加载 AMapUI，缺省不加载
            "version": '1.1',   // AMapUI 版本
            "plugins":['overlay/SimpleMarker'],       // 需要加载的 AMapUI ui插件
         },
         "Loca":{                // 是否加载 Loca， 缺省不加载
            "version": '2.0'  // Loca 版本
         },
      }).then((AMap)=>{
         //初始化地图对象，加载地图
         var map = new AMap.Map('containerOrder', {
            viewMode: '2D', // 默认使用 2D 模式，如果希望使用带有俯仰角的 3D 模式，请设置 viewMode: '3D',
            zoom:10, //初始化地图层级
            center: [113.264434,23.129162] //初始化地图中心点
         });
         // map.clearMap();  // 清除地图覆盖物
         // 经纬度坐标数组
         var  allList;
         if(e==""){
            allList = $('#allList').val();
            var list = JSON.stringify(allList)
            const jsonArray = JSON.parse(list)
            const jsonArray1 = JSON.parse(jsonArray);
            console.log(jsonArray1)
            M = jsonArray1;
         }else{
            M=e;
         }
         console.log(M)
         M.forEach(function(marker) {
            new AMap.Marker({
               map: map,
               icon: marker[2]==301?'https://csxdj.obs.cn-south-1.myhuaweicloud.com/8a6bb84da305438faba9fa1552c59f64.png':((marker[2]==109||marker[2]==107||marker[2]==108)?'https://csxdj.obs.cn-south-1.myhuaweicloud.com/6132e18884e24916a507b4b55d38d07b.png':
                           (marker[2]==101?'https://csxdj.obs.cn-south-1.myhuaweicloud.com/7461e4a7e4004c548e91aafa538246a1.png':'https://csxdj.obs.cn-south-1.myhuaweicloud.com/d8739241fa36482b80df7cacac2cc3d1.png')
               ),
               position: [marker[0], marker[1]],
               offset: new AMap.Pixel(-13, -30)
            });
         });
         // var center = map.getCenter();
         // var centerText = '当前中心点坐标：' + center.getLng() + ',' + center.getLat();
         // 添加事件监听, 使地图自适应显示到合适的范围
         AMap.event.addDomListener(document.getElementById('containerOrder'), 'click', function() {
            var newCenter = map.setFitView();
         });
      }).catch((e)=>{
         console.error(e);  //加载错误提示
      });
   }
            for (let i = 0; i < leisure.length; i++) {
                let name = leisure[i].name;
                let lonLat = leisure[i].lonLat;
                let positon = lonLat.split(",");
                var text = new AMap.Text({
                    text:name,
                    anchor:'center', // 设置文本标记锚点
                    draggable:true,
                    cursor:'pointer',
                    style:{
                        'border-width': 0,
                        'box-shadow': '0 2px 6px 0 rgba(114, 124, 245, .5)',
                        'text-align': 'center',
                        'font-size': '16px',
                        'color': 'white',
                  'background-color':'green'
                    },
                    position: [parseFloat(positon[0]),parseFloat(positon[1])]
                });
                text.setMap(map);
                texts.push(text);
            }

   function getOrderData(){
      $.ajax({
         url: Feng.ctxPath + '/tHomePage/getServerOrder',
         type: 'POST',
         data: {
            agentId: $("#agentId").val()
         },
         success: function (res) {
            var order = res.serverList
            var str = '<table><tr><h3>服务中</h3></tr><hr/><br>';
            if(order.length > 0){
               for(var i in order){
                  console.log(order[i].startTime)
                  str +=
                        '<tr><img src=' + order[i].avatar + ' style="height: 40px;width: 40px"></img>' + order[i].driverName +'</tr><br>' +
                        '<table><tr><td class="name1">驾龄</td><td class="name1">' + order[i].drivingExperience + '年'+'</td><td class="name1">代驾次数</td><td class="name1">' + order[i].valetDrivingCount + '次'+'</td></tr><br></table>' +
                        '<table><br><tr><td class="name1">出行时间</td><td class="name1">' + order[i].startTime + '</td></tr>' +
                        '<tr><td class="name1">起点</td><td class="name1">' + order[i].startAddress + '</td></tr>' +
                        '<tr><td class="name1">终点</td><td class="name1">' + order[i].endAddress + '</td></tr></table><br>' +
                        '<table><tr><td class="name1">预估费用</td><td class="name1">' + order[i].estimatedPrice + '元'+'</td><td class="name1">行驶里程</td><td class="name1">' + order[i].mileageTraveled + '公里'+'</td></tr>' +
                        '<tr><td class="name1">等待时间</td><td class="name1">' + order[i].waitTime + '分钟'+'</td><td class="name1">行驶时间</td><td class="name1">' + order[i].goTime + '分钟'+'</td></tr></table><hr/>';
               }
            }
            str += '</table>';
            $('#serverOrder').html(str);
         }
      });
   }
            for (let i = 0; i < service.length; i++) {
                let name = service[i].name;
                let lonLat = service[i].lonLat;
                let positon = lonLat.split(",");
                var text = new AMap.Text({
                    text:name,
                    anchor:'center', // 设置文本标记锚点
                    draggable:true,
                    cursor:'pointer',
                    style:{
                        'border-width': 0,
                        'box-shadow': '0 2px 6px 0 rgba(114, 124, 245, .5)',
                        'text-align': 'center',
                        'font-size': '16px',
                        'color': 'white',
                        'background-color':'red'
                    },
                    position: [parseFloat(positon[0]),parseFloat(positon[1])]
                });
                text.setMap(map);
                texts.push(text);
            }

            for (let i = 0; i < receivedOrder.length; i++) {
                let name = receivedOrder[i].name;
                let lonLat = receivedOrder[i].lonLat;
                let positon = lonLat.split(",");
                var text = new AMap.Text({
                    text:name,
                    anchor:'center', // 设置文本标记锚点
                    draggable:true,
                    cursor:'pointer',
                    style:{
                        'border-width': 0,
                        'box-shadow': '0 2px 6px 0 rgba(114, 124, 245, .5)',
                        'text-align': 'center',
                        'font-size': '16px',
                        'color': 'black',
                        'background-color':'yellow'
                    },
                    position: [parseFloat(positon[0]),parseFloat(positon[1])]
                });
                text.setMap(map);
                texts.push(text);
            }
        }, function (data) {
        });
        ajax.set("agentId", $("#agentId").val());
        ajax.start();
    }

    getMapData();
    setInterval(function () {
        getMapData();
    }, 30000);

</script>
@}