From 7b1c73b230607b5fb01473f6c2e6c3b143a99812 Mon Sep 17 00:00:00 2001
From: BianLzhaoMin <11485688+bianliangzhaomin123@user.noreply.gitee.com>
Date: Mon, 21 Oct 2024 13:56:51 +0800
Subject: [PATCH] =?UTF-8?q?iot=E5=AE=9A=E4=BD=8D=E8=AE=BE=E5=A4=87?=
 =?UTF-8?q?=E6=96=B0=E9=9C=80=E6=B1=82=E5=A2=9E=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/index.html                             |   2 +
 src/App.vue                                   |  14 +-
 .../coding-nw/component/MapDIalog.vue         | 210 ++++++++++++++----
 vue.config.js                                 |   4 +-
 4 files changed, 177 insertions(+), 53 deletions(-)

diff --git a/public/index.html b/public/index.html
index 0a06390..1b6fc75 100644
--- a/public/index.html
+++ b/public/index.html
@@ -10,6 +10,8 @@
   <title>
     <%= webpackConfig.name %>
   </title>
+  <script async src="https://api.map.baidu.com/api?v=2.0&ak=cClgLBaLgGUdQDilX9dGvieL"></script>
+  <script src="https://api.map.baidu.com/api?type=webgl&v=2.0&ak=cClgLBaLgGUdQDilX9dGvieL"></script>
   <script type="text/javascript" src="//api.map.baidu.com/library/TrackAnimation/src/TrackAnimation_min.js"></script>
   <!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
   <style>
diff --git a/src/App.vue b/src/App.vue
index 1b6c27f..9dcf6fa 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -24,13 +24,13 @@ export default {
         }
     },
     mounted() {
-        const script_1 = document.createElement('script')
-        const script_2 = document.createElement('script')
-        script_1.src = `https://api.map.baidu.com/api?v=2.0&ak=${process.env.VUE_APP_BAIDU_MAP_AK}`
-        script_2.src = `https://api.map.baidu.com/api?type=webgl&v=2.0&ak=${process.env.VUE_APP_BAIDU_MAP_AK}`
-        script_1.async = true
-        document.body.appendChild(script_1)
-        document.body.appendChild(script_2)
+        // const script_1 = document.createElement('script')
+        // const script_2 = document.createElement('script')
+        // script_1.src = `https://api.map.baidu.com/api?v=2.0&ak=${process.env.VUE_APP_BAIDU_MAP_AK}`
+        // script_2.src = `https://api.map.baidu.com/api?type=webgl&v=2.0&ak=${process.env.VUE_APP_BAIDU_MAP_AK}`
+        // script_1.async = true
+        // document.body.appendChild(script_1)
+        // document.body.appendChild(script_2)
     },
 }
 </script>
diff --git a/src/views/warehouseManage/machinery/coding-nw/component/MapDIalog.vue b/src/views/warehouseManage/machinery/coding-nw/component/MapDIalog.vue
index 89e21c4..adedd93 100644
--- a/src/views/warehouseManage/machinery/coding-nw/component/MapDIalog.vue
+++ b/src/views/warehouseManage/machinery/coding-nw/component/MapDIalog.vue
@@ -304,7 +304,7 @@ export default {
             this.parkList.forEach((e) => {
                 console.log(e, '----')
                 e.startTime = moment(parseInt(e.beginTime)).format(
-                    'YYYY-MM-DD HH:mm:ss',
+                    'YYYY-MM-DD HH:mm',
                 )
 
                 e.hours = parseInt(
@@ -353,6 +353,14 @@ export default {
 
             this.tripInfoListNew = tripInfoList
 
+            console.log(
+                ' this.tripInfoListNew行程信息---',
+                this.tripInfoListNew,
+            )
+
+            if (this.tripInfoListNew.length < 1) return
+            this.onDrawLine(this.tripInfoListNew)
+
             // console.log(tripInfoList, '处理后的行程---')
             // let tripInfo = JSON.parse(res.msg)
             // console.log(tripInfo, '反序列化之后', this.parkList)
@@ -388,6 +396,7 @@ export default {
         },
         /** 查看行程 */
         handlePreviewTrip(item, index) {
+            const this_ = this
             this.activeIndex = index
             if (this.trackAni) {
                 this.trackAni.cancel()
@@ -399,30 +408,102 @@ export default {
             this.linePointList[1].lng = item.endLng
             this.linePointList[1].lat = item.endLat
             if (this.linePointList.length === 0) return
-            for (var i = 0; i < this.linePointList.length; i++) {
-                pointList.push(
-                    new BMapGL.Point(
-                        this.linePointList[i].lng,
-                        this.linePointList[i].lat, 
-                    ),
-                )
-            }
+            // for (var i = 0; i < this.linePointList.length; i++) {
+            //     var pointArr = []
+            //     var points = new BMapGL.Point(
+            //         this.linePointList[i].lng,
+            //         this.linePointList[i].lat,
+            //     )
+            //     var convertor = new BMapGL.Convertor()
+            //     pointArr.push(points)
+            //     convertor.translate(
+            //         pointArr,
+            //         COORDINATES_WGS84,
+            //         COORDINATES_BD09,
+            //         function (data) {
+            //             // newPointList.push(data.points[0])
+            //             newPoints = data.points[0]
+            //         },
+            //     )
+            // }
 
-            // pointList.push(new BMapGL.Point(item.slon, item.slat))
-            // pointList.push(new BMapGL.Point(item.elon, item.elat))
-            let polyline = new BMapGL.Polyline(pointList)
-            // 修改线的样式
-            polyline.setStrokeColor('#EA3323') // 线颜色  #EA3323
-            // polyline.setStrokeWeight(2) // 线宽
-            this.trackAni = new BMapGLLib.TrackAnimation(this.map, polyline, {
-                overallView: true, // 动画完成后自动调整视野到总览
-                tilt: 55, // 轨迹播放的角度，默认为55
-                duration: 1500, // 动画持续时长，默认为10000，单位ms
-                delay: 100, // 动画开始的延迟，默认0，单位ms
+            var pointArr = []
+            var points = new BMapGL.Point(
+                this.linePointList[0].lng,
+                this.linePointList[0].lat,
+            )
+            var points_2 = new BMapGL.Point(
+                this.linePointList[1].lng,
+                this.linePointList[1].lat,
+            )
+            var convertor = new BMapGL.Convertor()
+            pointArr.push(points)
+            pointArr.push(points_2)
+            convertor.translate(
+                pointArr,
+                COORDINATES_WGS84,
+                COORDINATES_BD09,
+                function (data) {
+                    let polyline = new BMapGL.Polyline(data.points)
+                    // 修改线的样式
+                    polyline.setStrokeColor('#EA3323') // 线颜色  #EA3323
+                    // polyline.setStrokeWeight(2) // 线宽
+                    this_.trackAni = new BMapGLLib.TrackAnimation(
+                        this_.map,
+                        polyline,
+                        {
+                            overallView: true, // 动画完成后自动调整视野到总览
+                            tilt: 55, // 轨迹播放的角度，默认为55
+                            duration: 1500, // 动画持续时长，默认为10000，单位ms
+                            delay: 100, // 动画开始的延迟，默认0，单位ms
+                        },
+                    )
+                    this_.trackAni.start()
+                    // 设置起点终点图标
+                    this_.triggerMovement()
+                },
+            )
+        },
+
+        onDrawLine(list) {
+            const this_ = this
+            if (this.trackAni) {
+                this.trackAni.cancel()
+            }
+            this.map.clearOverlays()
+            let pointArr = []
+            list.forEach((e, index) => {
+                if (index === list.length - 1) {
+                    pointArr.push(new BMapGL.Point(e.startLng, e.startLat))
+                    pointArr.push(new BMapGL.Point(e.endLng, e.endLat))
+                } else {
+                    pointArr.push(new BMapGL.Point(e.startLng, e.startLat))
+                }
             })
-            this.trackAni.start()
-            // 设置起点终点图标
-            this.triggerMovement()
+            const convertor = new BMapGL.Convertor()
+            convertor.translate(
+                pointArr,
+                COORDINATES_WGS84,
+                COORDINATES_BD09,
+                function (data) {
+                    let polyline = new BMapGL.Polyline(data.points)
+                    // 修改线的样式
+                    polyline.setStrokeColor('#EA3323') // 线颜色  #EA3323
+                    // polyline.setStrokeWeight(2) // 线宽
+                    this_.trackAni = new BMapGLLib.TrackAnimation(
+                        this_.map,
+                        polyline,
+                        {
+                            overallView: true, // 动画完成后自动调整视野到总览
+                            tilt: 55, // 轨迹播放的角度，默认为55
+                            duration: 1500, // 动画持续时长，默认为10000，单位ms
+                            delay: 100, // 动画开始的延迟，默认0，单位ms
+                        },
+                    )
+                    this_.trackAni.start()
+                    this_.drawMaker(data.points)
+                },
+            )
         },
         // async handleQuery() {
         //     console.log('🚀 ~ handleQuery ~ 查询:', this.queryForm.date)
@@ -453,6 +534,7 @@ export default {
         initMap() {
             console.log('地图初始化--')
             this.$nextTick(() => {
+                const this_ = this
                 this.map = new BMapGL.Map('container') // 创建地图实例
                 // let point = new BMapGL.Point(117.13805, 31.8734) // 创建点坐标
                 let point = new BMapGL.Point(this.calLon, this.calLat) // 创建点坐标
@@ -460,35 +542,75 @@ export default {
                 this.map.enableScrollWheelZoom(true) // 启用滚轮放大缩小
                 this.map.setHeading(64.5) //设置地图旋转角度
                 this.map.setTilt(73) //设置地图的倾斜角度
-                let marker = new BMapGL.Marker(point) // 创建标点
-                this.map.addOverlay(marker)
+
+                var convertor = new BMapGL.Convertor()
+                var pointArr = []
+                pointArr.push(point)
+                convertor.translate(
+                    pointArr,
+                    COORDINATES_WGS84,
+                    COORDINATES_BD09,
+                    function (data) {
+                        let marker = new BMapGL.Marker(data.points[0]) // 创建标点
+                        this_.map.addOverlay(marker)
+                    },
+                )
 
                 var myGeo = new BMapGL.Geocoder()
-                // 根据坐标得到地址描述
-                // myGeo.getLocation(new BMapGL.Point(this.calLon, this.calLat))
-
-                // this.map.getLocation(point, (res) => {
-                //     console.log(res, '所在位置--')
-                // })
             })
         },
+
         // 添加起点和终点的标记
         addStartEndMarkers(startLatLng, endLatLng) {
-            let startIcon = new BMapGL.Icon(
-                require('/src/assets/images/startIcon.png'),
-                new BMapGL.Size(32, 32),
-            )
-            let startMarker = new BMapGL.Marker(startLatLng, {
-                icon: startIcon,
-            })
-            this.map.addOverlay(startMarker)
+            // const startPoints = this.translateCallback(startLatLng)
+            const this_ = this
+            var convertor = new BMapGL.Convertor()
+            var pointArr = []
+            pointArr.push(startLatLng)
+            pointArr.push(endLatLng)
+            convertor.translate(
+                pointArr,
+                COORDINATES_WGS84,
+                COORDINATES_BD09,
+                function (data) {
+                    let startIcon = new BMapGL.Icon(
+                        require('/src/assets/images/startIcon.png'),
+                        new BMapGL.Size(32, 32),
+                    )
 
-            let endIcon = new BMapGL.Icon(
-                require('/src/assets/images/endIcon.png'),
-                new BMapGL.Size(32, 32),
+                    let startMarker = new BMapGL.Marker(data.points[0], {
+                        icon: startIcon,
+                    })
+
+                    this_.map.addOverlay(startMarker)
+
+                    let endIcon = new BMapGL.Icon(
+                        require('/src/assets/images/endIcon.png'),
+                        new BMapGL.Size(32, 32),
+                    )
+
+                    let endMarker = new BMapGL.Marker(data.points[1], {
+                        icon: endIcon,
+                    })
+                    this_.map.addOverlay(endMarker)
+                },
             )
-            let endMarker = new BMapGL.Marker(endLatLng, { icon: endIcon })
-            this.map.addOverlay(endMarker)
+
+            // var endPointArr = []
+            // endPointArr.push(endLatLng)
+            // convertor.translate(
+            //     endPointArr,
+            //     COORDINATES_WGS84,
+            //     COORDINATES_BD09,
+            //     function (data) {},
+            // )
+        },
+
+        drawMaker(list) {
+            list.forEach((e, index) => {
+                let marker = new BMapGL.Marker(e)
+                this.map.addOverlay(marker)
+            })
         },
         // 轨迹运动结束后的回调
         triggerMovement() {
diff --git a/vue.config.js b/vue.config.js
index 73906f9..f2d4ad8 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -42,11 +42,11 @@ module.exports = {
                 // target: `https://test-cc.zhgkxt.com`,//线上环境-南网
                 // target: `https://z.csgmall.com.cn`,
 
-                target: `http://192.168.2.127:39080`, //超
+                // target: `http://192.168.2.127:39080`, //超
                 // target: `http://10.40.92.81:8080`, //韩/
                 // target: `http://192.168.2.74:49080`, //旭/
                 // target: `http://192.168.2.17:39080`, //帅
-                // target: `http://192.168.2.234:49080`, //福
+                target: `http://192.168.2.209:49080`, //福
                 // target: `http://192.168.0.37:49080`, //跃
 
                 //******** 注意事项  ********* */