From ff94389a675c6be0953de614e8347910209fb49b Mon Sep 17 00:00:00 2001
From: jjLv <1981429112@qq.com>
Date: Mon, 8 Apr 2024 09:31:56 +0800
Subject: [PATCH] =?UTF-8?q?=E7=99=BE=E5=BA=A6=E5=9C=B0=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 js/personnelControl/personnelControl.js   |   7 +-
 pages/personnelControl/MovementTrack.html | 163 ++++++++++++++++------
 2 files changed, 127 insertions(+), 43 deletions(-)
diff --git a/js/personnelControl/personnelControl.js b/js/personnelControl/personnelControl.js
index 0cb9239..d409ed3 100644
--- a/js/personnelControl/personnelControl.js
+++ b/js/personnelControl/personnelControl.js
@@ -221,7 +221,6 @@ function wearGarList(){
 
                 let data = result.data;
                 data.forEach(function(item) {
-                    debugger
                     let arrName = item.modeName.split(',');
                     let arr = item.val.split(',')
                     for (let i = 0; i < arrName.length; i++) {
@@ -232,7 +231,7 @@ function wearGarList(){
                     var longitude = parseFloat(item.经度); // 经度
                     var bindUser = item.绑定人; // 绑定人
 
-                    创建标记点
+                    //创建标记点
                     var point = new BMapGL.Point(longitude, latitude);
                     var marker = new BMapGL.Marker(point);
                     map.addOverlay(marker);
@@ -256,7 +255,7 @@ function wearGarList(){
                 function createInfoWindowContent(userName, bindUser, phone) {
                     return '<div>' + userName + '&nbsp;' + bindUser + '</div>' +
                         '<div>' + phone + '</div>' +
-                        '<div id="showTrack" onclick="test(bindUser)"><a style="color: #1e9fff" href="#"">查看轨迹</a></div>';
+                        '<div id="showTrack" onclick="test(\'' + bindUser + '\')"><a style="color: #1e9fff" href="#"">查看轨迹</a></div>';
                 }
                 // // 创建点标记
                 // let marker = new BMapGL.Marker(new BMapGL.Point(lon,lat));
@@ -349,6 +348,8 @@ function wearGarList(){
     }
 function test(bindUser){
     // 查看轨迹函数
+    sessionStorage.setItem("bindUser", bindUser);
+    sessionStorage.setItem("bidCode", bidCode);
         layer.open({
             type: 2,
             title: '运动轨迹',
diff --git a/pages/personnelControl/MovementTrack.html b/pages/personnelControl/MovementTrack.html
index ebdc188..6fa5dc5 100644
--- a/pages/personnelControl/MovementTrack.html
+++ b/pages/personnelControl/MovementTrack.html
@@ -3,58 +3,141 @@
 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+    <link rel="stylesheet" href="../../css/font.css">
+    <link rel="stylesheet" href="../../plugin/layui-v2.9.7/layui/css/layui.css">
     <style type="text/css">
         body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
+        ul li {
+            list-style: none;
+        }
+        .drawing-panel {
+            position: fixed;
+            bottom: 91%;
+            padding: 1rem 1rem;
+            border-radius: .25rem;
+            /*background-color: #fff;*/
+            /*box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);*/
+        }
+        .btn {
+            float: left;
+            margin: 0 5px;
+            text-align: center;
+            line-height: 30px;
+        }
     </style>
+    <script src="../../js/publics/jquery-3.6.0.min.js" type="text/javascript"></script>
+    <script src="../../js/publics/public.js"></script>
+    <script src="../../plugin/scroll/jquery.nicescroll.min.js"></script>
+    <script src="../../js/publics/echarts.js"></script>
+    <script src="../../plugin/layui-v2.9.7/layui/layui.js"></script>
+    <script src="../../api/commonRequest.js" type="text/javascript"></script>
+    <script src="../../js/publics/aescbc.js"></script>
     <script src="//mapopen.bj.bcebos.com/github/BMapGLLib/TrackAnimation/src/TrackAnimation.min.js"></script>
     <script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=s0zhKgClIXRG8hQp3HB4KtiXPWw1dP8B"></script>
     <title>视角动画</title>
 </head>
 <body>
 <div id="allmap"></div>
+<ul class="drawing-panel" style="z-index: 99;">
+    <li class = "btn">
+        <div class="layui-inline">
+            <div class="layui-input-group">
+                <input type="text" class="layui-input" id="ID-laydate-type-datetime" placeholder="HH:mm:ss">
+                <div class="layui-input-split layui-input-suffix" style="cursor: pointer;" onclick="historicalPath()">
+                    <i class="layui-icon layui-icon-search"></i>
+                </div>
+            </div>
+        </div>
+    </li>
+</ul>
 </body>
 </html>
 <script type="text/javascript">
-    // GL版命名空间为BMapGL
-    // 按住鼠标右键，修改倾斜角和角度
-    var bmap = new BMapGL.Map("allmap");    // 创建Map实例
-    bmap.centerAndZoom(new BMapGL.Point(116.297611, 40.047363), 17);  // 初始化地图,设置中心点坐标和地图级别
-    bmap.enableScrollWheelZoom(true);     // 开启鼠标滚轮缩放
-    var path = [{
-        'lng': 116.297611,
-        'lat': 40.047363
-    }, {
-        'lng': 116.302839,
-        'lat': 40.048219
-    }, {
-        'lng': 116.308301,
-        'lat': 40.050566
-    }, {
-        'lng': 116.305732,
-        'lat': 40.054957
-    }, {
-        'lng': 116.304754,
-        'lat': 40.057953
-    }, {
-        'lng': 116.306487,
-        'lat': 40.058312
-    }, {
-        'lng': 116.307223,
-        'lat': 40.056379
-    }];
-    var point = [];
-    for (var i = 0; i < path.length; i++) {
-        point.push(new BMapGL.Point(path[i].lng, path[i].lat));
-    }
-    var pl = new BMapGL.Polyline(point);
-    setTimeout('start()', 3000);
-    function start () {
-        trackAni = new BMapGLLib.TrackAnimation(bmap, pl, {
-            overallView: true,
-            tilt: 20,
-            duration: 10000,
-            delay: 300
+    let element, layer, laydate;
+    const bidCode = sessionStorage.getItem("bidCode");
+    let bindUser = JSON.parse(sessionStorage.getItem("bindUser"));
+
+    layui.use(['layer', 'element'], function () {
+        element = layui.element;
+        layer = layui.layer;
+        laydate = layui.laydate;
+
+        historicalPath();
+
+        laydate.render({
+            elem: '#ID-laydate-type-datetime',
+            value: getNowDay() // 设置默认值为当天
         });
-        trackAni.start();
+    });
+
+
+    function historicalPath() {
+        const url = commonUrl + "screen/largeScreen/personnelControl/PersonnelHistoricalCoordinates";
+        const params = {
+            "roleCode": roleCode,
+            "orgId": orgId,
+            "userId": userId,
+            "bidCode": bidCode,
+            "bindUser": bindUser,
+            "month": $('#ID-laydate-type-datetime').val(),
+        }
+        let encryptStr = encryptCBC(JSON.stringify(params));
+        ajaxRequest(url, "POST", encryptStr, true, function () {
+        }, function (result) {
+            let rawData = result.data;
+            test(rawData);
+            console.log(result);
+        }, function (xhr) {
+            // error(xhr)
+        } , "application/json",aqEnnable);
     }
+
+    function test(data){
+
+        // GL版命名空间为BMapGL
+        // 按住鼠标右键，修改倾斜角和角度
+        var bmap = new BMapGL.Map("allmap");    // 创建Map实例
+        bmap.centerAndZoom(new BMapGL.Point(117.16010067578883, 31.93566198931321), 13);  // 初始化地图,设置中心点坐标和地图级别
+        bmap.enableScrollWheelZoom(true);     // 开启鼠标滚轮缩放
+        var path = [];
+        // 遍历数据数组
+        for (var i = 0; i < data.length; i++) {
+            var aslatLon = data[i].aslatLon.split(','); // 拆分经纬度字符串
+            var lng = parseFloat(aslatLon[0]); // 经度
+            var lat = parseFloat(aslatLon[1]); // 纬度
+
+            // 创建包含经纬度的对象并添加到数组中
+            path.push({
+                'lng': lng,
+                'lat': lat
+            });
+        }
+        var point = [];
+        for (var i = 0; i < path.length; i++) {
+            point.push(new BMapGL.Point(path[i].lng, path[i].lat));
+        }
+        console.log(point)
+        var pl = new BMapGL.Polyline(point);
+
+        function start () {
+            trackAni = new BMapGLLib.TrackAnimation(bmap, pl, {
+                overallView: true,
+                tilt: 20,
+                duration: 10000,
+                delay: 300
+            });
+            trackAni.start();
+        }
+        setTimeout(start, 3000);
+
+    }
+
+    function getNowDay() {
+        var time = new Date();
+        var year = time.getFullYear();
+        var month = time.getMonth() + 1 >= 10 ? time.getMonth() + 1 : '0' + (time.getMonth() + 1);
+        var day = time.getDate() >= 10 ? time.getDate() : '0' + time.getDate();
+        return year + "-" + month + "-" + day;
+    }
+
 </script>
