地图打点动态数据加载，

api/6170/callPolice.js

@@ -0,0 +1,9 @@
+import request from '@/utils/request'
+//报警
+export function deviceSendAlarmMessage(data) {
+  return request({
+    url: '/app/device/sendAlarmMessage',
+    method: 'post',
+    data: data
+  })
+}

components/CustomPopup/CustomPopup.vue

@@ -139,7 +139,7 @@
 			},
 			popupBg: {
 				type: String,
-				default: 'rgb(42, 42, 42)'
+				default: 'rgb(42, 42, 42, 0.9)'
 			},
 			popupRadius: {
 				type: String,
@@ -267,7 +267,7 @@
 		left: 0;
 		right: 0;
 		bottom: 0;
-		background-color: rgba(0, 0, 0, 1);
+		background-color: rgba(0, 0, 0, 0.7);
 		display: flex;
 		justify-content: center;
 		align-items: center;

manifest.json

@@ -84,7 +84,8 @@
                         "name" : "amapHG8nIFW5",
                         "appkey_ios" : "065c43f02c7b627a74ad7dd23b16bb4f",
                         "appkey_android" : "d7d852dbda2b95f6f796fb9a711a9fee"
-                    }
+                    },
+                    "customStyle": true
                 },
                 "oauth" : {},
                 "push" : {}

pages/210/deviceControl/index.vue

@@ -6,7 +6,7 @@
 		<!-- 使用自定义导航栏 -->
 		<view v-show="!pageLoading">
 			<custom-navbar :title="navTitle" :showBack="true" color="#FFFFFF"
-				:rightIcon="isRightIconVisible ? '/static/images/shape.png' : ''"
+				:rightIcon="isRightIconVisible ? '/static/images/common/shape.png' : ''"
 				@right-click="shareUp"></custom-navbar>
 			<view class="device-detail-container" :style="{ paddingTop: navBarHeight + 'px' }">
 				<!-- 设备电量信息 -->

pages/6170/callPolice/index.vue

@@ -35,11 +35,13 @@
 		<!-- 强制报警提示弹框 -->
 		<CustomPopup v-if="popupType === 'force'" :show="showPopupFlag" popupBorder="1rpx solid rgba(224, 52, 52, 0.3)"
 			:message="popupMessage" icon="/static/images/6170/bj.png" :confirm-text="popupConfirmText"
-			:show-cancel="false" @confirm="onPopupConfirm" confirmBtnBg="rgba(224, 52, 52, 1)" confirmBtnColor="#fff" />
+			:show-cancel="false" @close="onclosePopup" @confirm="onPopupConfirm" confirmBtnBg="rgba(224, 52, 52, 1)"
+			confirmBtnColor="#fff" />
 		<!-- 解除报警 -->
 		<CustomPopup v-if="popupType === 'cancel'" :show="showPopupFlag" popupBorder="1rpx solid rgba(224, 52, 52, 0.3)"
 			:message="popupMessage" icon="/static/images/6170/svg.png" :confirm-text="popupConfirmText"
-			:show-cancel="false" @confirm="onPopupConfirm" confirmBtnBg="rgba(224, 52, 52, 1)" confirmBtnColor="#fff" />
+			:show-cancel="false" @close="onclosePopup" @confirm="onPopupConfirm" confirmBtnBg="rgba(224, 52, 52, 1)"
+			confirmBtnColor="#fff" />
 	</view>
 </template>
 
@@ -49,8 +51,8 @@
 		deviceInfo,
 	} from '@/api/common/index.js'
 	import {
-		deviceSendMessage
-	} from '@/api/6170/deviceControl.js'
+		deviceSendAlarmMessage
+	} from '@/api/6170/callPolice.js'
 	export default {
 		components: {
 			CustomPopup
@@ -64,6 +66,7 @@
 				popupMessage: '确认要对所选设备开启强制报警?',
 				popupConfirmText: '确认',
 				popupType: 'force', // 'force' or 'cancel'
+				pendingAlarmAction: ''
 			}
 		},
 		computed: {
@@ -72,6 +75,9 @@
 			}
 		},
 		methods: {
+			onclosePopup() {
+				this.showPopupFlag = false
+			},
 			toggleSelect(index) {
 				this.deviceList[index].checked = !this.deviceList[index].checked
 				this.$forceUpdate()
@@ -122,6 +128,8 @@
 				this.popupType = 'force';
 				this.popupMessage = '确认要对所选设备开启强制报警?';
 				this.showPopupFlag = true;
+				this.pendingAlarmAction = 1
+
 			},
 			// 解除报警
 			cancelAlarm() {
@@ -136,6 +144,8 @@
 				this.popupType = 'cancel';
 				this.popupMessage = '确认要解除所选设备的报警状态?';
 				this.showPopupFlag = true;
+				this.pendingAlarmAction = 1
+
 			},
 			sendAlarmCommand(type) {
 				const selectedDevices = this.deviceList.filter(item => item.checked);
@@ -143,12 +153,20 @@
 
 				let data = {
 					deviceIds: deviceIds,
-					commandType: type // '强制或者解除'
+					instructValue: this.pendingAlarmAction, // '强制或者解除'
 				}
-
-				deviceSendMessage(data).then((res) => {
+				deviceSendAlarmMessage(data).then((res) => {
 					if (res.code == 200) {
-						this.showPopupFlag = true;
+						uni.showToast({ 
+							title: res.msg,
+							icon: 'none'
+						});
+						this.showPopupFlag = false
+						setTimeout(() => {
+							uni.navigateBack()
+						}, 500)
+
+
 					} else {
 						uni.showToast({
 							title: res.msg,
@@ -159,10 +177,8 @@
 			},
 			// 点击确认状态
 			onPopupConfirm() {
-				this.showPopupFlag = false
-				uni.navigateBack()
-				console.log('用户点击了确定')
 				this.sendAlarmCommand(this.popupType);
+
 				// 处理确认逻辑
 			},
 		},

pages/6170/deviceControl/index.vue

@@ -222,9 +222,9 @@
 				<!-- 上传画面弹窗 -->
 				<view class="agreement-popupC" @click.stop>
 					<!-- 标题 -->
-					<view class="popup-title">确认开启激光模式？</view>
+					<view class="popup-title">{{ isLaserOn ? '确认关闭激光模式？' : '确认开启激光模式？' }}</view>
 					<view class="popup-content">
-						<view class="popup-Title">
+						<view class="popup-Title" v-if="!isLaserOn">
 							<view>注意事项</view>
 							<view>1.禁止直视光源或反射面！</view>
 							<view>2.避免直射人或易燃物！</view>
@@ -326,7 +326,7 @@
 				file: '',
 				selectedItemIndex: 0,
 				popupType: 'person', //弹框类型
-				timer: null
+				 isLaserOn: false 
 			}
 		},
 		computed: {
@@ -346,20 +346,13 @@
 				// 添加调试日志
 				uni.navigateTo({
 					url: '/pages/common/map/index',
-					success: (res) => {
-						// 确保使用深拷贝
-						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)))
+					events: {
+						ack: function(data) {}
 					},
-					fail: (err) => {
-
+					success: (res) => {
+						res.eventChannel.emit('Map', {
+							data: item
+						});
 					}
 				})
 			},
@@ -558,9 +551,10 @@
 			},
 			// 激光确认框提交
 			handleBtn() {
+				 const instructValue = this.isLaserOn ? 0 : 1;
 				let data = {
 					deviceId: this.deviceID,
-					instructValue: 1
+					instructValue: instructValue
 				}
 				laserModeSettings(data).then((res) => {
 					if (res.code == 200) {
@@ -568,6 +562,7 @@
 							icon: 'none',
 							title: res.msg
 						})
+						 this.isLaserOn = !this.isLaserOn;
 						this.lightModeC = false
 					} else {
 						uni.showToast({
@@ -885,7 +880,8 @@
 					this.mqttClient.subscribe(statusTopic, (payload) => {
 						console.log(`收到来自 ${statusTopic} 的消息:`, payload);
 						//收到电量上报。延迟20s请求接口数据
-						const parsedMessage = typeof payload === 'string' ? JSON.parse(payload) : payload;
+						const parsedMessage = typeof payload === 'string' ? JSON.parse(payload) :
+							payload;
 						const deviceState = parsedMessage.state; // 直接取 state 数组
 						// ✅ 发送全局事件通知主页面更新
 						uni.$emit('deviceStatusUpdate', {
@@ -896,7 +892,7 @@
 							setTimeout(() => {
 								this.fetchDeviceDetail(data.data.id);
 							}, 20000);
-						
+
 							// 这里判断电量低于20%,弹框提示
 							if (this.deviceInfo.batteryPercentage < 20) {
 								this.popupType = 'bettery'

pages/common/index/index.vue

@@ -442,7 +442,16 @@
 			// 位置
 			location() {
 				uni.navigateTo({
-					url: '/pages/common/map/index'
+					url: '/pages/common/map/index',
+					events: {
+						ack: function(data) {}
+					},
+					success: (res) => {
+						// 页面跳转成功后的回调函数
+						res.eventChannel.emit('Map', {
+							data: this.deviceList,
+						});
+					}
 				})
 			},
 			handleFile(item) {

pages/common/map/index.vue

@@ -1,73 +1,151 @@
 <template>
-	<view class="map-container">
-		<map style="width: 100%; height: 100%;" :latitude="latitude" :longitude="longitude" :markers="markers"
-			:custom-map-style="customMapStyle" :enable-custom="true">
-		</map>
+	<view>
+		<view class="page-body">
+			<view class="page-section page-section-gap">
+				<map style="width: 100%; height: 100vh;" 
+					:latitude="latitude" 
+					:longitude="longitude" 
+					:markers="covers"
+					@markertap="onMarkerTap"
+					:scale="16">
+				</map>
+			</view>
+		</view>
 		<!-- 加载提示 -->
 		<view v-if="loading" class="loading-mask">
-			<view class="loading-content">地图加载中...</view>
+			<view class="loading-content">加载中...</view>
 		</view>
 	</view>
 </template>
 
+
 <script>
-	export default {
-		data() {
-			return {
-				loading: true, // 默认显示加载提示
-				latitude: 30.592,
-				longitude: 114.305,
-				customMapStyle: '8c3efc37298895fd78e6aa0e799e78ce',
-				markers: [{
-					id: 1,
-					latitude: 30.507,
-					longitude: 114.404,
-					title: '华中科技大学'
-				}, {
-					id: 2,
-					latitude: 30.476,
-					longitude: 114.428,
-					title: '光谷金融港'
-				}, {
-					id: 3,
-					latitude: 30.504,
-					longitude: 114.433,
-					title: '武汉东站'
-				}]
-			}
-		},
-		onLoad() {
-			// 尝试获取当前位置
-			uni.getLocation({
-				type: 'gcj02',
-				success: (res) => {
-					this.latitude = res.latitude;
-					this.longitude = res.longitude;
+export default {
+	data() {
+		return {
+			title: 'map',
+			latitude: 39.909,  // 默认纬度
+			longitude: 116.39742,  // 默认经度
+			covers: [],  // 标记点数组
+			loading: true,  // 加载状态
+			markerData: []  // 存储原始标记数据
+		}
+	},
+	onLoad() {
+		// 获取事件通道
+		const eventChannel = this.getOpenerEventChannel();
+		// 监听传递过来的位置数据
+		eventChannel.on('Map', (receivedData) => {
+			this.loading = true;
+			this.covers = [];
+			//先获取data属性内容
+			const dataContent = receivedData.data;
+			//data是数组
+			if (Array.isArray(dataContent)) {
+				// 过滤掉经纬度为空的设备
+				const validDevices = dataContent.filter(device => 
+					device.latitude !== null && 
+					device.longitude !== null && 
+					device.latitude !== '' && 
+					device.longitude !== ''
+				);
+				this.markerData = validDevices;
+				if (validDevices.length > 0) {
+					this.processMultipleMarkers(validDevices);
+				} else {
+					console.log('没有有效的设备经纬度数据');
+					this.loading = false;
 				}
-			});
-		},
-		onReady() {
-			// 页面初次渲染完成时，隐藏加载提示
+			} 
+			//data是单个设备对象
+			else if (typeof dataContent === 'object' && dataContent !== null) {
+				if (this.validateMarker(dataContent)) {
+					this.markerData = [dataContent];
+					this.processSingleMarker(dataContent);
+				} else {
+					console.log('单个设备数据缺少有效的经纬度');
+					this.loading = false;
+				}
+			} 
+		});
+	},
+	methods: {
+		// 处理单个标记点
+		processSingleMarker(marker) {
+			// 转换经纬度为数字
+			const lat = parseFloat(marker.latitude);
+			const lng = parseFloat(marker.longitude);
+			// 设置地图中心
+			this.latitude = lat;
+			this.longitude = lng;
+			// 创建标记点
+			this.covers = [{
+				id: marker.deviceImei, // 适配deviceId字段
+				latitude: lat,
+				longitude: lng,
+				iconPath: marker.devicePic || '/static/images/common/device.png',
+				width: 40,
+				height: 40,
+				anchor: {x: 0.5, y: 0.5}, // 锚点在中心
+				callout: {
+					content: `ID: ${marker.deviceImei}`
+				}
+			}];
+			
 			this.loading = false;
+		},
+		
+		// 处理多个标记点
+		processMultipleMarkers(markers) {
+			// 使用第一个有效标记点的位置作为地图中心
+			const firstMarker = markers[0];
+			this.latitude = parseFloat(firstMarker.latitude);
+			this.longitude = parseFloat(firstMarker.longitude);
+			
+			// 转换所有有效标记点
+			this.covers = markers.map((marker, index) => ({
+				id: marker.deviceId || marker.id || marker.deviceImei || index + 1,
+				latitude: parseFloat(marker.latitude),
+				longitude: parseFloat(marker.longitude),
+				iconPath: marker.devicePic || '/static/images/common/device.png',
+				width: 40,
+				height: 40,
+				anchor: {x: 0.5, y: 0.5},
+				callout: {
+					content: `ID: ${marker.deviceImei}`,
+				}
+			}));
+			
+			this.loading = false;
+		},
+		
+		// 验证标记点是否包含必要信息
+		validateMarker(marker) {
+			// 验证经纬度是否有效
+			const hasValidLat = marker.latitude && marker.latitude !== '' && !isNaN(parseFloat(marker.latitude));
+			const hasValidLng = marker.longitude && marker.longitude !== '' && !isNaN(parseFloat(marker.longitude));
+			return hasValidLat && hasValidLng;
+		},
+		
+		// 标记点点击事件
+		onMarkerTap(e) {
+			const clickedMarker = this.markerData.find(
+				item =>item.deviceImei === e.markerId
+			);
 		}
 	}
+}
 </script>
 
-<style>
-	.map-container {
-		width: 100%;
-		height: 100vh;
-		position: relative;
-	}
 
-	/* 加载提示 */
+<style>
 	.loading-mask {
 		position: absolute;
 		top: 0;
 		left: 0;
 		width: 100%;
 		height: 100%;
-		background: #121212;
+		background: rgba(0, 0, 0, 0.5);
 		display: flex;
 		justify-content: center;
 		align-items: center;
@@ -75,10 +153,23 @@
 	}
 
 	.loading-content {
-		color: rgba(255, 255, 255, 0.9);
+		color: #fff;
 		font-size: 16px;
 		padding: 12px 24px;
 		background: rgba(0, 0, 0, 0.7);
 		border-radius: 8px;
 	}
+	
+	.empty-tip {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		background: rgba(0, 0, 0, 0.7);
+		color: #fff;
+		padding: 10px 20px;
+		border-radius: 4px;
+		z-index: 99;
+	}
 </style>
+    

pages/common/send/index.vue

@@ -32,7 +32,7 @@
 				<view class="ql-editor">编辑信息</view>
 				<view class="ql-input">
 					<textarea placeholder-style="color:rgba(255, 255, 255, 0.4)" placeholder="请输入内容" class="textarea"
-						v-model="messageToSend" />
+						v-model="messageToSend"  :maxlength="20"/>
 				</view>
 				<button class="login-btn" @click="sendTextMessage">发送</button>
 			</view>