From fbe5aa49bee384784bdef36e1d7746f3268587c1 Mon Sep 17 00:00:00 2001
From: BianLzhaoMin <11485688+bianliangzhaomin123@user.noreply.gitee.com>
Date: Tue, 6 Aug 2024 15:31:07 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=9A=E4=BD=8D=E8=AE=BE=E5=A4=87=E6=8E=A5?=
 =?UTF-8?q?=E5=8F=A3=E8=B0=83=E8=AF=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 sgzb-ui/src/api/store/iotManagement.js        | 13 +++++
 .../machinery/coding/component/MapDIalog.vue  | 50 ++++++++++++++++---
 .../machinery/coding/index.vue                | 12 ++++-
 sgzb-ui/vue.config.js                         |  2 +-
 4 files changed, 67 insertions(+), 10 deletions(-)

diff --git a/sgzb-ui/src/api/store/iotManagement.js b/sgzb-ui/src/api/store/iotManagement.js
index d5656d08..04195084 100644
--- a/sgzb-ui/src/api/store/iotManagement.js
+++ b/sgzb-ui/src/api/store/iotManagement.js
@@ -61,6 +61,14 @@ export function getTypeList(params = {}) {
     params,
   })
 }
+// 获取绑定IOT列表 /iotMachine/getTypeList
+export function getTypeListApi(params = {}) {
+  return request({
+    url: '/material/iotMachine/getTypeList',
+    method: 'get',
+    params,
+  })
+}
 
 // 绑定详情 /iotMachine/getRecordList
 export function getRecordList(params = {}) {
@@ -79,3 +87,8 @@ export function getRecordListAll(params = {}) {
     params,
   })
 }
+
+/** 获取机具设备的位置信息 */
+export const getIotDeviceLocationApi = (data) => {
+  return request.post('/material/iotMachine/getLocation', data)
+}
diff --git a/sgzb-ui/src/views/warehouseManage/machinery/coding/component/MapDIalog.vue b/sgzb-ui/src/views/warehouseManage/machinery/coding/component/MapDIalog.vue
index 19333778..9c348063 100644
--- a/sgzb-ui/src/views/warehouseManage/machinery/coding/component/MapDIalog.vue
+++ b/sgzb-ui/src/views/warehouseManage/machinery/coding/component/MapDIalog.vue
@@ -118,6 +118,7 @@
 </template>
 
 <script>
+import { getIotDeviceLocationApi } from '@/api/store/iotManagement.js'
 export default {
     name: 'MapDialog',
     props: {
@@ -131,6 +132,11 @@ export default {
             type: String,
             default: () => '',
         },
+        // 设备状态
+        iotCode: {
+            type: String,
+            default: () => '',
+        },
     },
     data() {
         return {
@@ -176,23 +182,49 @@ export default {
             ],
 
             count: 0,
+            trackAni: null, // 轨迹实例
+            calLon: '',
+            calLat: '',
         }
     },
 
     mounted() {
-        console.log('地图弹框组件被创建--')
-        // this.getEquipmentInfo()
-        this.initMap()
+        Promise.all([this.getIotDeviceLocation()])
+            .then((res) => {
+                this.initMap()
+            })
+            .catch((err) => {
+                console.log(err, '失败')
+            })
+
+        // this.getIotDeviceLocation()
     },
 
     beforeDestroy() {
+        /** 组件销毁之前 先清除地图实例 */
+
+        // 1. 判断轨迹实例是否存在 如果存在 先强制关闭动画，否则页面报错
+        if (this.trackAni) {
+            this.trackAni.cancel()
+        }
+        // 2. 清除地图上面的标点覆盖物 并清除地图实例
         this.map.clearOverlays()
         this.map.destroy()
         this.map = null
-        console.log('地图弹框组件销毁了---', this.map)
     },
 
     methods: {
+        /** 获取当前设备的信息 */
+        async getIotDeviceLocation() {
+            if (this.iotCode) {
+                const { data: res } = await getIotDeviceLocationApi({
+                    iotId: this.iotCode,
+                })
+                // 获取经纬度并赋值
+                this.calLon = res.callon
+                this.calLat = res.callat
+            }
+        },
         /** 查看行程 */
         handlePreviewTrip() {
             let pointList = []
@@ -209,13 +241,13 @@ export default {
             // 修改线的样式
             polyline.setStrokeColor('#EA3323') // 线颜色  #EA3323
             // polyline.setStrokeWeight(2) // 线宽
-            let trackAni = new BMapGLLib.TrackAnimation(this.map, polyline, {
+            this.trackAni = new BMapGLLib.TrackAnimation(this.map, polyline, {
                 overallView: true, // 动画完成后自动调整视野到总览
                 tilt: 30, // 轨迹播放的角度，默认为55
-                duration: 5000, // 动画持续时长，默认为10000，单位ms
-                delay: 2000, // 动画开始的延迟，默认0，单位ms
+                duration: 3000, // 动画持续时长，默认为10000，单位ms
+                delay: 500, // 动画开始的延迟，默认0，单位ms
             })
-            trackAni.start()
+            this.trackAni.start()
             // 设置起点终点图标
             this.triggerMovement()
         },
@@ -246,9 +278,11 @@ export default {
         },
         // 初始化地图和轨迹
         initMap() {
+            console.log('地图初始化--')
             this.$nextTick(() => {
                 this.map = new BMapGL.Map('container') // 创建地图实例
                 let point = new BMapGL.Point(117.14, 31.87) // 创建点坐标
+                // let point = new BMapGL.Point(this.calLon, this.calLat) // 创建点坐标
                 this.map.centerAndZoom(point, 15) // 初始化地图，设置中心点坐标和地图级别
                 this.map.enableScrollWheelZoom(true) // 启用滚轮放大缩小
                 this.map.setHeading(64.5) //设置地图旋转角度
diff --git a/sgzb-ui/src/views/warehouseManage/machinery/coding/index.vue b/sgzb-ui/src/views/warehouseManage/machinery/coding/index.vue
index 4e9f4712..3d8c0a95 100644
--- a/sgzb-ui/src/views/warehouseManage/machinery/coding/index.vue
+++ b/sgzb-ui/src/views/warehouseManage/machinery/coding/index.vue
@@ -537,6 +537,7 @@
             v-if="mapDialogVisible"
             :deviceName="deviceName"
             :deviceType="deviceType"
+            :iotCode="iotCode"
             @handelCloseDialog="handelCloseDialog"
         />
     </div>
@@ -560,6 +561,7 @@ import { getProLists } from '@/api/base/base'
 import { imgUpLoad } from '@/api/system/upload'
 import { getTypeList } from '@/api/store/warehousing'
 import { listHouseTree } from '@/api/store/shelves'
+import { getTypeListApi } from '@/api/store/iotManagement.js'
 import Treeselect from '@riophae/vue-treeselect'
 import '@riophae/vue-treeselect/dist/vue-treeselect.css'
 import QRCode from 'qrcodejs2'
@@ -647,6 +649,7 @@ export default {
             mapDialogVisible: false,
             deviceName: '',
             deviceType: '',
+            iotCode: '',
         }
     },
     created() {
@@ -847,9 +850,16 @@ export default {
             }
         },
         // 查看设备地图
-        handleMap(row) {
+        async handleMap(row) {
             this.deviceName = row.specificationType
             this.deviceType = row.maStatusName
+            // 获取绑定的iot设备
+            const res = await getTypeListApi({ maCode: row.maCode })
+
+            if (res.rows.length > 0) {
+                this.iotCode = res.rows[0].iotCode
+            }
+            // console.log(res, '获取的iot设备信息')
             this.mapDialogVisible = true
         },
         handlePush() {
diff --git a/sgzb-ui/vue.config.js b/sgzb-ui/vue.config.js
index db48f42d..832fa8a4 100644
--- a/sgzb-ui/vue.config.js
+++ b/sgzb-ui/vue.config.js
@@ -46,7 +46,7 @@ module.exports = {
         // target: `http://10.40.92.81:8080`, //韩/
         // target: `http://192.168.2.81:28080`,//旭/
         // target: `http://192.168.2.248:28080`, //帅
-        target: `http://192.168.2.246:28080`, //福
+        target: `http://192.168.2.246:49080`, //福
 
         //******** 注意事项  ********* */
         //1.全局替换qrUrl二维码扫码提供的网址-发布服务器的地址target;