From 6b409f427295a304473a723f45aefd85e95b0e1e Mon Sep 17 00:00:00 2001
From: fengerli <528575642@qq.com>
Date: Fri, 1 Aug 2025 16:36:43 +0800
Subject: [PATCH] =?UTF-8?q?=E5=9C=B0=E5=9B=BE=E5=8A=A8=E6=80=81=E6=89=93?=
 =?UTF-8?q?=E7=82=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/210/deviceControl/index.vue  |   2 +-
 pages/6170/deviceControl/index.vue |  34 +--
 pages/common/map/index.vue         | 415 +++++++++++++++--------------
 3 files changed, 232 insertions(+), 219 deletions(-)

diff --git a/pages/210/deviceControl/index.vue b/pages/210/deviceControl/index.vue
index c33f86e..708c64d 100644
--- a/pages/210/deviceControl/index.vue
+++ b/pages/210/deviceControl/index.vue
@@ -702,7 +702,7 @@
 				this.mqttClient.connect(() => {
 					console.log('MQTT 连接成功，开始订阅主题');
 					// 订阅来自设备的状态更新
-					const statusTopic = `A/${this.itemInfo.id}`;
+					const statusTopic = `A/${this.itemInfo.deviceImei}`;
 					this.mqttClient.subscribe(statusTopic, (payload) => {
 						console.log(`收到来自 ${statusTopic} 的消息:`, payload);
 						// uni.showModal({
diff --git a/pages/6170/deviceControl/index.vue b/pages/6170/deviceControl/index.vue
index c4b1a12..8e33ff7 100644
--- a/pages/6170/deviceControl/index.vue
+++ b/pages/6170/deviceControl/index.vue
@@ -307,15 +307,23 @@
 			},
 			// *******定位******
 			gpsPosition(item) {
+				// 添加调试日志
 				uni.navigateTo({
 					url: '/pages/common/map/index',
-					events: {
-						ack: function(data) {}
-					},
 					success: (res) => {
-						res.eventChannel.emit('MapData', {
-							data: item
-						});
+						// 确保使用深拷贝
+						const mapData = {
+							deviceLocation: {
+								longitude: String(item.longitude), // 强制转为字符串
+								latitude: String(item.latitude),
+								deviceImage: item.devicePic || '',
+								deviceName: item.deviceImei || ''
+							}
+						}
+						res.eventChannel.emit('MapData', JSON.parse(JSON.stringify(mapData)))
+					},
+					fail: (err) => {
+				
 					}
 				})
 			},
@@ -661,12 +669,6 @@
 						});
 					}
 				})
-				// const topic = `device/command/${this.deviceID}/message`;
-				// this.mqttClient.publish(topic, this.messageToSend);
-				// uni.showToast({
-				// 	title: '消息已发送',
-				// 	icon: 'success'
-				// });
 			},
 			// 统一处理返回方法
 			handleDeviceData(res, isFromShared = false) {
@@ -745,7 +747,7 @@
 				this.mqttClient.connect(() => {
 					console.log('MQTT 连接成功，开始订阅主题');
 					// 订阅来自设备的状态更新
-					const statusTopic = `A/${this.deviceID}`;
+					const statusTopic = `A/${this.itemInfo.deviceImei}`;
 					this.mqttClient.subscribe(statusTopic, (payload) => {
 						console.log(`收到来自 ${statusTopic} 的消息:`, payload);
 						// ✅ 发送全局事件通知主页面更新
@@ -928,12 +930,14 @@
 		color: rgba(255, 255, 255, 0.6);
 		text-align: end;
 	}
+
 	.locationGPS {
-		width:88%;
+		width: 88%;
 		text-align: end;
 		float: right;
-		line-height:50rpx;
+		line-height: 50rpx;
 	}
+
 	.control-card {
 		background-color: rgb(26, 26, 26);
 		border-radius: 16rpx;
diff --git a/pages/common/map/index.vue b/pages/common/map/index.vue
index 74ea6b7..bf29939 100644
--- a/pages/common/map/index.vue
+++ b/pages/common/map/index.vue
@@ -1,67 +1,67 @@
 <template>
-  <view class="map-container">
-    <!-- 背景保护层 -->
-    <view class="map-background"></view>
-    <view id="mapWrapper" ref="mapRef" class="map-wrapper"></view>
-    <!-- 加载提示 -->
-    <view v-if="loading" class="loading-mask">
-      <view class="loading-content">地图加载中...</view>
-    </view>
-  </view>
+	<view class="map-container">
+		<!-- 背景保护层 -->
+		<view class="map-background"></view>
+		<view id="mapWrapper" ref="mapRef" class="map-wrapper"></view>
+		<!-- 加载提示 -->
+		<view v-if="loading" class="loading-mask">
+			<view class="loading-content">地图加载中...</view>
+		</view>
+	</view>
 </template>
 
 <script>
-export default {
-  data() {
-    return {
-      loading: true
-    }
-  },
-  methods: {
-    hideLoading() {
-      this.loading = false
-    }
-  }
-}
+	export default {
+		data() {
+			return {
+				loading: true
+			}
+		},
+		methods: {
+			hideLoading() {
+				this.loading = false
+			}
+		}
+	}
 </script>
 
 <script module="amap" lang="renderjs">
-export default {
-  data() {
-    return {
-      markers: [],
-      customPopup: null
-    }
-  },
-  mounted() {
-    // 初始设置背景色
-    const container = document.getElementById('mapWrapper')
-    container.style.backgroundColor = '#121212'
-    container.style.transition = 'background 0.5s'
-    
-    this.initMap()
-  },
-  methods: {
-    async loadScript(url) {
-      return new Promise((resolve) => {
-        const script = document.createElement('script')
-        script.src = url
-        script.onload = resolve
-        document.head.appendChild(script)
-      })
-    },
+	export default {
+		data() {
+			return {
+				markers: [],
+				customPopup: null
+			}
+		},
+		mounted() {
+			// 初始设置背景色
+			const container = document.getElementById('mapWrapper')
+			container.style.backgroundColor = '#121212'
+			container.style.transition = 'background 0.5s'
 
-    async initMap() {
-      try {
-        // 动态加载SDK
-        if (!window.AMap) {
-          await this.loadScript(
-            'https://webapi.amap.com/maps?v=2.0&key=90bc158992feb8ccd0145e168cab1307'
-          )
-        }
+			this.initMap()
+		},
+		methods: {
+			async loadScript(url) {
+				return new Promise((resolve) => {
+					const script = document.createElement('script')
+					script.src = url
+					script.onload = resolve
+					document.head.appendChild(script)
+				})
+			},
 
-        const container = document.getElementById('mapWrapper')
-        container.innerHTML = `
+			async initMap() {
+				try {
+					// 动态加载SDK
+					if (!window.AMap) {
+						await this.loadScript(
+							'https://webapi.amap.com/maps?v=2.0&key=90bc158992feb8ccd0145e168cab1307'
+						)
+					}
+
+					const container = document.getElementById('mapWrapper')
+					container.innerHTML = `
           <div id="amapContainer" style="
             width:100%;
             height:100%;
@@ -71,173 +71,182 @@ export default {
           "></div>
         `
 
-        // 初始化地图
-        this.map = new AMap.Map('amapContainer', {
-          viewMode: '3D',
-          zoom: 13,
-          center: [114.305, 30.592],
-          mapStyle: 'amap://styles/grey'
-        })
+					// 初始化地图
+					this.map = new AMap.Map('amapContainer', {
+						viewMode: '3D',
+						zoom: 13,
+						center: [114.305, 30.592],
+						mapStyle: 'amap://styles/grey'
+					})
 
-        // 地图加载完成后淡入
-        this.map.on('complete', () => {
-          document.getElementById('amapContainer').style.opacity = 1
-          this.$ownerInstance.callMethod('hideLoading')
-          
-          // 添加标记点
-          const wuhanPoints = [
-            { lnglat: [114.404, 30.507], name: "华中科技大学" },
-            { lnglat: [114.428, 30.476], name: "光谷金融港" },
-            { lnglat: [114.433, 30.504], name: "武汉东站" }
-          ]
-          wuhanPoints.forEach(point => {
-            this.addMarker(point.lnglat, point.name)
-          })
-        })
+					// 地图加载完成后淡入
+					this.map.on('complete', () => {
+						document.getElementById('amapContainer').style.opacity = 1
+						this.$ownerInstance.callMethod('hideLoading')
+						// 添加标记点
+						const wuhanPoints = [{
+								lnglat: [114.404, 30.507],
+								name: "华中科技大学"
+							},
+							{
+								lnglat: [114.428, 30.476],
+								name: "光谷金融港"
+							},
+							{
+								lnglat: [114.433, 30.504],
+								name: "武汉东站"
+							}
+						]
+						wuhanPoints.forEach(point => {
+							this.addMarker(point.lnglat, point.name)
+						})
+					})
+					// 创建自定义弹窗
+					this.createCustomPopup()
+				} catch (e) {
+					console.error('初始化失败:', e)
+					this.$ownerInstance.callMethod('hideLoading')
+				}
+			},
 
-        // 创建自定义弹窗
-        this.createCustomPopup()
-
-      } catch (e) {
-        console.error('初始化失败:', e)
-        this.$ownerInstance.callMethod('hideLoading')
-      }
-    },
-
-    createCustomPopup() {
-      this.customPopup = document.createElement('div')
-      this.customPopup.className = 'custom-map-popup'
-      this.customPopup.innerHTML = `
+			createCustomPopup() {
+				this.customPopup = document.createElement('div')
+				this.customPopup.className = 'custom-map-popup'
+				this.customPopup.innerHTML = `
         <div class="popup-content">
           <div class="popup-title"></div>
         </div>
       `
-      this.customPopup.style.display = 'none'
-      document.getElementById('amapContainer').appendChild(this.customPopup)
-    },
+				this.customPopup.style.display = 'none'
+				document.getElementById('amapContainer').appendChild(this.customPopup)
+			},
 
-    addMarker(position, title) {
-      const marker = new AMap.Marker({
-        position: new AMap.LngLat(...position),
-        map: this.map,
-        icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
-      })
-      
-      marker.on('click', () => {
-        this.showCustomPopup(position, title)
-      })
-      
-      this.markers.push(marker)
-      return marker
-    },
+			addMarker(position, title) {
+				const marker = new AMap.Marker({
+					position: new AMap.LngLat(...position),
+					map: this.map,
+					icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
+				})
+				marker.on('click', () => {
+					this.showCustomPopup(position, title)
+				})
+				this.markers.push(marker)
+				return marker
+			},
 
-    showCustomPopup(position, title) {
-      const pixel = this.map.lngLatToContainer(position)
-      this.customPopup.querySelector('.popup-title').textContent = title
-      this.customPopup.style.display = 'block'
-      this.customPopup.style.left = `${pixel.x}px`
-      this.customPopup.style.top = `${pixel.y}px`
-      
-      this.map.on('click', this.hideCustomPopup)
-    },
+			showCustomPopup(position, title) {
+				const pixel = this.map.lngLatToContainer(position)
+				this.customPopup.querySelector('.popup-title').textContent = title
+				this.customPopup.style.display = 'block'
+				this.customPopup.style.left = `${pixel.x}px`
+				this.customPopup.style.top = `${pixel.y}px`
+				this.map.on('click', this.hideCustomPopup)
+			},
 
-    hideCustomPopup() {
-      if (this.customPopup) {
-        this.customPopup.style.display = 'none'
-      }
-      this.map.off('click', this.hideCustomPopup)
-    }
-  },
-  onLoad(options) {
-  	const eventChannel = this.getOpenerEventChannel();
-  	// 监听 'detailData' 事件，获取传过来的数据
-  	eventChannel.on('MapData', (data) => {
-		console.log(data,'data');
-	})
+			hideCustomPopup() {
+				if (this.customPopup) {
+					this.customPopup.style.display = 'none'
+				}
+				this.map.off('click', this.hideCustomPopup)
+			}
+		},
+		onLoad(options) {
+			console.log(options,'optionsoptions');
+			const eventChannel = this.getOpenerEventChannel();
+			eventChannel.on('MapData', (data) => {
+				console.log(data, 'data');
+			})
+		}
 	}
-}
 </script>
 
 <style>
-/* 基础样式 */
-.map-container {
-  width: 100%;
-  height: 100vh;
-  position: relative;
-  overflow: hidden;
-}
+	/* 基础样式 */
+	.map-container {
+		width: 100%;
+		height: 100vh;
+		position: relative;
+		overflow: hidden;
+	}
 
-.map-background {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  background: #121212;
-  z-index: 1;
-}
+	.map-background {
+		position: absolute;
+		width: 100%;
+		height: 100%;
+		background: #121212;
+		z-index: 1;
+	}
 
-.map-wrapper {
-  width: 100%;
-  height: 100%;
-  position: relative;
-  z-index: 2;
-}
+	.map-wrapper {
+		width: 100%;
+		height: 100%;
+		position: relative;
+		z-index: 2;
+	}
 
-/* 加载提示 */
-.loading-mask {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: #121212;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  z-index: 999;
-}
+	/* 加载提示 */
+	.loading-mask {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		background: #121212;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		z-index: 999;
+	}
 
-.loading-content {
-  color: rgba(255,255,255,0.9);
-  font-size: 16px;
-  padding: 12px 24px;
-  background: rgba(0,0,0,0.7);
-  border-radius: 8px;
-}
+	.loading-content {
+		color: rgba(255, 255, 255, 0.9);
+		font-size: 16px;
+		padding: 12px 24px;
+		background: rgba(0, 0, 0, 0.7);
+		border-radius: 8px;
+	}
 
-/* 弹窗样式 */
-.custom-map-popup {
-  position: absolute;
-  z-index: 9999;
-  transform: translate(-50%, -100%);
-  min-width: 200rpx;
-  pointer-events: none;
-  animation: popupFadeIn 0.3s ease-out;
-}
+	/* 弹窗样式 */
+	.custom-map-popup {
+		position: absolute;
+		z-index: 9999;
+		transform: translate(-50%, -100%);
+		min-width: 200rpx;
+		pointer-events: none;
+		animation: popupFadeIn 0.3s ease-out;
+	}
 
-.popup-content {
-  background: rgba(18,45,74,0.95);
-  border-radius: 16rpx;
-  padding: 12rpx 24rpx;
-  color: #fff;
-  font-size: 14px;
-  text-align: center;
-  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
-  border: 1px solid rgba(255,255,255,0.1);
-}
+	.popup-content {
+		background: rgba(18, 45, 74, 0.95);
+		border-radius: 16rpx;
+		padding: 12rpx 24rpx;
+		color: #fff;
+		font-size: 14px;
+		text-align: center;
+		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+		border: 1px solid rgba(255, 255, 255, 0.1);
+	}
 
-.popup-content:after {
-  content: '';
-  position: absolute;
-  bottom: -8px;
-  left: 50%;
-  transform: translateX(-50%);
-  border-width: 8px 8px 0;
-  border-style: solid;
-  border-color: rgba(18,45,74,0.95) transparent transparent;
-}
+	.popup-content:after {
+		content: '';
+		position: absolute;
+		bottom: -8px;
+		left: 50%;
+		transform: translateX(-50%);
+		border-width: 8px 8px 0;
+		border-style: solid;
+		border-color: rgba(18, 45, 74, 0.95) transparent transparent;
+	}
 
-@keyframes popupFadeIn {
-  from { opacity: 0; transform: translate(-50%, -90%); }
-  to { opacity: 1; transform: translate(-50%, -100%); }
-}
+	@keyframes popupFadeIn {
+		from {
+			opacity: 0;
+			transform: translate(-50%, -90%);
+		}
+
+		to {
+			opacity: 1;
+			transform: translate(-50%, -100%);
+		}
+	}
 </style>
\ No newline at end of file