210新增自动报警弹框提示，历史记录页面功能

App.vue

@@ -15,12 +15,9 @@
 
 <style lang="scss">
 	@import 'vk-uview-ui/index.scss';
-
 	uni-slider .uni-slider-handle-wrapper {
 		border-radius: 20rpx;
-
 	}
-
 	uni-slider .uni-slider-thumb {
 		width: 66rpx !important;
 		height: 80rpx !important;
@@ -29,7 +26,6 @@
 		margin-left: -72rpx !important;
 
 	}
-
 	uni-slider .uni-slider-handle-wrapper {
 		height: 88rpx;
 		position: relative;
@@ -41,17 +37,21 @@
 		width: 180rpx;
 		height: 180rpx;
 	}
-
 	.uni-file-picker.custom-file-picker {
 		overflow: inherit !important;
 	}
-
 	.custom-file-picker .icon-add {
 		height: 5rpx !important;
 		width: 70rpx !important;
 	}
-
+	.uni-picker-view-mask{
-	.custom-file-picker .file-picker__box-content {
+		background: rgba(42, 42, 42, 1);
-		// display: none
+		z-index: -1;
+	}
+	.uni-picker-view-content{
+		position: inherit;
+	}
+	.uni-picker-view-wrapper{
+		background: rgba(42, 42, 42, 1);
 	}
 </style>

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

@@ -1,87 +1,62 @@
 <template>
 	<view class="agreement-mask" v-if="show" @click.stop="closePopup">
 		<!-- 弹窗主体：支持自定义边框、背景 -->
-		<view 
+		<view class="agreement-popup" @click.stop :style="{
-			class="agreement-popup" 
-			@click.stop
-			:style="{
 				border: popupBorder,
 				backgroundColor: popupBg,
 				borderRadius: popupRadius
-			}"
+			}" :class="popupClass">
-			:class="popupClass"
-		>
-			<view class="popup-content">
-				<!-- 动态图标：支持自定义大小、边距 -->
-				<image 
-					v-if="showIcon && icon" 
-					:src="icon" 
-					mode="aspectFit" 
-					class="svg"
-					:style="iconStyle"
-				></image>
-				
 			<view class="text-content">
 				<!-- 动态标题：支持自定义颜色、字体大小 -->
-					<view 
+				<view class="popup-Title" v-if="title" :style="{
-						class="popup-Title" 
-						v-if="title"
-						:style="{
 					color: titleColor,
 					fontSize: titleSize,
 					padding: titlePadding
-						}"
+				}">
-					>
 					{{ title }}
 				</view>
+				<view class="popup-content">
+					<!-- 动态图标：支持自定义大小、边距 -->
+					<image v-if="showIcon && icon" :src="icon" mode="aspectFit" class="svg" :style="iconStyle"></image>
+
+
 
 					<!-- 动态消息内容：支持自定义颜色、换行、字体大小 -->
-					<view 
+					<view class="popup-Message" v-if="message" :style="{
-						class="popup-Message" 
-						v-if="message"
-						:style="{
 							color: messageColor,
 							fontSize: messageSize,
 							whiteSpace: messageWrap ? 'normal' : 'nowrap',
 							padding: messagePadding
-						}"
+						}">
-					>
 						{{ message }}
 					</view>
+					<!-- 倒计时显示 -->
+				<!-- 	<view v-if="showCountdown" class="countdown" :style="countdownStyle">
+						{{ countdownFormat.replace('{time}', currentCountdown) }}
+					</view> -->
 				</view>
 			</view>
 
 			<!-- 按钮组：支持自定义按钮样式 -->
 			<view class="popup-buttons" :style="{ marginTop: buttonGroupMargin }">
-				<button 
+				<button v-if="showCancel" class="btn cancelBtn" @click="handleCancel" :style="{
-					v-if="showCancel" 
-					class="btn cancelBtn" 
-					@click="handleCancel"
-					:style="{
 						border: cancelBtnBorder,
 						color: cancelBtnColor,
 						backgroundColor: cancelBtnBg,
 						fontSize: cancelBtnSize,
 						borderRadius: buttonRadius,
 						margin: buttonMargin
-					}"
+					}" :class="cancelBtnClass">
-					:class="cancelBtnClass"
-				>
 					{{ cancelText }}
 				</button>
 
-				<button 
+				<button class="btn agreeBtn" @click="handleConfirm" :style="{
-					class="btn agreeBtn" 
-					@click="handleConfirm"
-					:style="{
 						backgroundColor: confirmBtnBg,
 						color: confirmBtnColor,
 						fontSize: confirmBtnSize,
 						borderRadius: buttonRadius,
 						margin: buttonMargin
-					}"
+					}" :class="confirmBtnClass">
-					:class="confirmBtnClass"
-				>
 					{{ confirmText }}
 				</button>
 			</view>
@@ -106,6 +81,10 @@
 				type: String,
 				default: ''
 			},
+			showCountdown: {
+				type: Boolean,
+				default: false
+			},
 			confirmText: {
 				type: String,
 				default: '确定'
@@ -139,7 +118,7 @@
 			},
 			popupBg: {
 				type: String,
-				default: 'rgb(42, 42, 42)'
+				default: 'rgb(42, 42, 42, 0.9)'
 			},
 			popupRadius: {
 				type: String,
@@ -267,7 +246,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;

components/TimePicker/TimePicker.vue

@@ -0,0 +1,88 @@
+<template>
+  <picker-view 
+    class="picker-body" 
+    :value="timeIndex" 
+    @change="handleTimeChange"
+  >
+    <!-- 分钟列 -->
+    <picker-view-column>
+      <view 
+        v-for="min in minutes" 
+        :key="min"
+        class="item"
+        :class="{ active: timeIndex[0] === minutes.indexOf(min) }"
+      >{{ min }}分</view>
+    </picker-view-column>
+    
+    <!-- 秒数列 -->
+    <picker-view-column>
+      <view 
+        v-for="sec in seconds" 
+        :key="sec"
+        class="item"
+        :class="{ active: timeIndex[1] === seconds.indexOf(sec) }"
+      >{{ sec }}秒</view>
+    </picker-view-column>
+  </picker-view>
+</template>
+
+<script>
+export default {
+  name: "TimePicker",
+  props: {
+    // 初始时间（格式：{ minutes: '02', seconds: '30' }）
+    defaultTime: {
+      type: Object,
+      default: () => ({ minutes: '00', seconds: '00' })
+    }
+  },
+  data() {
+    return {
+      minutes: Array.from({ length: 60 }, (_, i) => i.toString().padStart(2, '0')), // 00-59
+      seconds: Array.from({ length: 60 }, (_, i) => i.toString().padStart(2, '0')), // 00-59
+      timeIndex: [0, 0], // 当前选中索引
+      selectedTime: { minutes: '00', seconds: '00' } // 当前选择的时间
+    };
+  },
+  created() {
+    // 初始化默认时间
+    const minIndex = this.minutes.indexOf(this.defaultTime.minutes);
+    const secIndex = this.seconds.indexOf(this.defaultTime.seconds);
+    this.timeIndex = [minIndex, secIndex];
+    this.selectedTime = { ...this.defaultTime };
+  },
+  methods: {
+    // 时间变化时更新选中值
+    handleTimeChange(e) {
+      this.timeIndex = e.detail.value;
+      const [minIdx, secIdx] = this.timeIndex;
+      this.selectedTime = {
+        minutes: this.minutes[minIdx],
+        seconds: this.seconds[secIdx]
+      };
+      this.$emit("change", this.selectedTime); // 实时通知父组件
+    },
+    
+    // 提供给父组件的方法：获取当前时间
+    getCurrentTime() {
+      return this.selectedTime;
+    }
+  }
+};
+</script>
+
+<style scoped>
+.picker-body {
+  height: 180px;
+  background: #3A3A3A;
+  border-radius: 10px;
+}
+.item {
+  color: rgba(255, 255, 255, 0.7);
+  text-align: center;
+  padding: 10px 0;
+}
+.item.active {
+  color: #A3FF00; /* 选中项高亮 */
+}
+</style>

components/custom-navbar/custom-navbar.vue

@@ -22,9 +22,17 @@
 				<text v-if="rightText" :style="{ color: rightColor }" @click="handleRightClick">
 					{{ rightText }}
 				</text>
+				<!-- 显示多个图标 -->
+				<template v-if="rightIcons && rightIcons.length > 0">
+					<image v-for="(icon, index) in rightIcons" :key="index" :src="icon.src"
+						@click="handleIconClick(index)" class="pathIMG" :style="{
+				              width: icon.size || '40rpx',
+				              height: icon.size || '40rpx',
+				              marginLeft: index > 0 ? '20rpx' : '0'
+				            }" />
+				</template>
 				<!-- 或显示图标 -->
-				<image v-if="rightIcon" :src="rightIcon" @click="handleRightClick"  mode=""
+				<image v-if="rightIcon" :src="rightIcon" @click="handleRightClick" class="pathIMG">
-					class="pathIMG">
 				</image>
 			</slot>
 		</view>
@@ -60,6 +68,11 @@
 			rightIconSize: { // 图标大小
 				type: Number,
 				default: 24
+			},
+			rightIcons: {
+				type: Array,
+				default: () => []
+				// 格式: [{src: '/path/icon1.png'}, {src: '/path/icon2.png'}]
 			}
 		},
 		data() {
@@ -76,6 +89,10 @@
 			},
 			handleRightClick() {
 				this.$emit('right-click'); // 触发右侧点击事件
+			},
+			// 新增图标点击方法
+			handleIconClick(index) {
+				this.$emit('icon-click', index)
 			}
 		}
 	}

manifest.json

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

pages.json

@@ -178,7 +178,14 @@
 			"style": {
 				"navigationBarTitleText": "添加联机设备"
 			}
+		},
+		{
+			"path": "pages/210/historyRecords/index",
+			"style": {
+				"navigationBarTitleText": "历史记录"
 			}
+		}
+		
 
 	],
 	"tabBar": {

pages/210/deviceControl/index.vue

@@ -5,9 +5,11 @@
 		</view>
 		<!-- 使用自定义导航栏 -->
 		<view v-show="!pageLoading">
-			<custom-navbar :title="navTitle" :showBack="true" color="#FFFFFF"
+			<custom-navbar :title="navTitle" :showBack="true" color="#FFFFFF" :rightIcons="[
-				:rightIcon="isRightIconVisible ? '/static/images/shape.png' : ''"
+				    {src: '/static/images/210/ls.png'},
-				@right-click="shareUp"></custom-navbar>
+				    ...(isRightIconVisible ? [{src: '/static/images/common/shape.png'}] : [])
+				  ]" @right-click="shareUp" @icon-click="handleIconClick"></custom-navbar>
+
 			<view class="device-detail-container" :style="{ paddingTop: navBarHeight + 'px' }">
 				<!-- 设备电量信息 -->
 				<view class="battery-section">
@@ -59,8 +61,7 @@
 				<!-- ===========主副机选择============= -->
 				<view class="mode-section">
 					<view class="radio-group">
-						<view v-for="(item, index) in radioList" :key="index" @click="handleRadioSelect(index)"
+						<view v-for="(item, index) in radioList" :key="index" class="group-item">
-							class="group-item">
 							<view class="radio-icon" :class="{ 'selected': radioSelected === index }">
 								{{ item }}
 								<view class="uni-border"></view>
@@ -89,7 +90,7 @@
 							</view>
 						</view>
 						<view class="mode-v1">
-							<view class="mode-v2" @click="lasermode">
+							<view class="mode-v2" @click="automaticAlarm">
 								<image src="/static/images/210/zd.png" class="setIMG" mode="aspectFit"></image>
 								<view>
 									<view class="battery-v2">自动报警</view>
@@ -97,7 +98,7 @@
 							</view>
 						</view>
 						<view class="mode-v1">
-							<view class="mode-v2" @click="lasermode">
+							<view class="mode-v2" @click="anualAlarm">
 								<image src="/static/images/210/zd-HL.png" class="setIMG" mode="aspectFit"></image>
 								<view>
 									<view class="battery-v2">手动报警</view>
@@ -105,7 +106,7 @@
 							</view>
 						</view>
 						<view class="mode-v1">
-							<view class="mode-v2" @click="lasermode">
+							<view class="mode-v2">
 								<image src="/static/images/210/bj.png" class="setIMG" mode="aspectFit"></image>
 								<view>
 									<view class="battery-v2">报警声音</view>
@@ -114,11 +115,11 @@
 							</view>
 						</view>
 						<view class="mode-v1">
-							<view class="mode-v2" @click="lasermode">
+							<view class="mode-v2" @click="alarmTime">
-								<image src="/static/images/jg.png" class="setIMG" mode="aspectFit"></image>
+								<image src="/static/images/210/time.png" class="setIMG" mode="aspectFit"></image>
 								<view>
 									<view class="battery-v2">报警时长</view>
-									<view class="mode-v3">2分30秒</view>
+									<view class="mode-v3">{{alarmTimeDisplay }}</view>
 								</view>
 							</view>
 						</view>
@@ -187,21 +188,18 @@
 			</view>
 			<!-- 弹框 -->
 			<view class="agreement-mask" v-if="lightModeA" @click.stop="closePopup">
-				<!-- 灯光模式弹窗 -->
+				<!-- 报警时长弹窗 -->
 				<view class="agreement-popup" @click.stop>
 					<!-- 标题 -->
-					<view class="popup-title"> {{ popupTitle }}</view>
+					<view class="popup-title">报警时长</view>
 					<view class="popup-content">
-						<view v-for="(item, index) in items" :key="index">
+						<view class="time-picker-container">
-							<view class="item" :class="{'selected': item.selected}" @click="onItemClick(index)">
+							<TimePicker ref="timePicker" :defaultTime="currentAlarmTime" @change="handleTimeChange" />
-								<image :src="item.image" class="setIMG"></image>
-								{{item.text}}
-							</view>
 						</view>
 					</view>
 					<!-- 按钮组 -->
 					<view class="popup-buttons">
-						<button class="agree" @click="handleSumbit">确定</button>
+						<button class="agree" @click="saveAlarmTime">保存</button>
 					</view>
 				</view>
 			</view>
@@ -213,10 +211,7 @@
 					<view class="popup-title">上传开机画面</view>
 					<view class="popup-content">
 						<view class="example-body">
-							<!-- <uni-file-picker limit="1" class="custom-file-picker"></uni-file-picker> -->
 							<view class="icoContent" @click="checkImgUpload">
-								<!-- <image mode="aspectFit" class="img" src="/static/images/6155/DeviceDetail/add.png">
-								</image> -->
 								<image v-if="selectedImage" :src="selectedImage" mode="aspectFit" class="img"
 									style="width: 100%; height: 100%;"></image>
 								<image v-else mode="aspectFit" class="img"
@@ -230,51 +225,95 @@
 					</view>
 				</view>
 			</view>
-			<!--===================== 激光提示框================== -->
+			<!-- ======各个弹框类型======= -->
-			<view class="agreement-mask" v-if="lightModeC" @click.stop="closePopup">
+			<CustomPopup :show="currentPopup.show" v-bind="currentPopup.config" @confirm="handleConfirm"
-				<!-- 上传画面弹窗 -->
+				@cancel="handleCancel" />
-				<view class="agreement-popupC" @click.stop>
-					<!-- 标题 -->
-					<view class="popup-title">确认开启激光模式？</view>
-					<view class="popup-content">
-						<view class="popup-Title">
-							<view>注意事项</view>
-							<view>1.禁止直视光源或反射面！</view>
-							<view>2.避免直射人或易燃物！</view>
-							<view>3.需佩戴相应专业防护眼镜！</view>
-						</view>
-					</view>
-					<!-- 按钮组 -->
-					<view class="popup-buttons">
-						<button class="btn disagree" @click="handleDisagree">取消</button>
-						<button class="btn agreeBtn" @click.stop="handleBtn">确定</button>
-					</view>
-				</view>
-			</view>
-			<!-- 人员信息成功提示弹框 -->
-			<CustomPopup v-if="popupType === 'person'" :show="showPopupFlag" :message="popupMessage"
-				icon="/static/images/common/sendSucc.png" :confirm-text="popupConfirmText" :show-cancel="false"
-				@confirm="onPopupConfirm" />
-			<!-- 开机log上传成功的弹框提示 -->
-			<CustomPopup v-if="popupType === 'logo'" :show="showPopupFlag" :message="popupMessage"
-				icon="/static/images/common/upload.png" :confirm-text="popupConfirmText" :show-cancel="false"
-				@confirm="onPopupConfirm" />
-			<!--============= 电量低于提示弹框=========== -->
-			<CustomPopup v-if="popupType === 'bettery'" :show="showPopupFlag"
-				popupBorder="1rpx solid rgba(224, 52, 52, 0.3)" :message="popupMessage" title="设备电量低于20%"
-				titleColor="rgba(224, 52, 52, 1)" icon="/static/images/common/path.png" :confirm-text="popupConfirmText"
-				:show-cancel="true" @cancel="onPopupConfirm" @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" />
 		</view>
 	</view>
 </template>
 
 <script>
+	// 弹框配置中心
+	const POPUP_CONFIGS = {
+		person: {
+			config: {
+				icon: '/static/images/common/sendSucc.png',
+				message: '信息发送成功',
+				showCancel: false
+			},
+
+		},
+		// 开机log
+		logo: {
+			config: {
+				icon: '/static/images/common/upload.png',
+				message: '上传成功',
+				showCancel: false
+			},
+
+		},
+		bettery: {
+			config: {
+				title: '设备电量低于20%',
+				titleColor: 'rgba(224, 52, 52, 1)',
+				message: '请及时充电',
+				icon: '/static/images/common/path.png',
+				popupBorder: '1rpx solid rgba(224, 52, 52, 0.3)',
+				confirmBtnBg: 'rgba(224, 52, 52, 1)',
+				showCancel: true
+			},
+			onConfirm() {
+				console.log('确认按钮');
+				return true; // 直接关闭
+			}
+		},
+
+		cancel: {
+			config: {
+				titleColor: 'rgba(224, 52, 52, 1)',
+				icon: '/static/images/common/svg.png',
+				popupBorder: '1rpx solid rgba(224, 52, 52, 0.3)',
+				confirmBtnBg: 'rgba(224, 52, 52, 1)',
+				showCancel: true //取消按钮
+			},
+			onConfirm() {
+				console.log('解除报警确认');
+			}
+		},
+		del: {
+			config: {
+				message: '确定开启报警?',
+				icon: '/static/images/210/bj_1.png',
+				popupBorder: '1rpx solid rgba(255, 200, 78, 1)',
+				confirmBtnBg: 'rgba(255, 200, 78, 1)',
+				showCancel: true
+			},
+			onConfirm() {
+				console.log('删除确认');
+			}
+		},
+		// 自动报警
+		autoAlarm: {
+			config: {
+				icon: '/static/images/6170/svg.png',
+				title: '报警信息',
+				message: '002号设备(ID:123456)\n出现报警', // 使用\n换行
+				showCountdown: true,
+				countdownTime: 59,
+				confirmText: '解除报警',
+				popupBorder: '1rpx solid rgba(224, 52, 52, 0.3)',
+				confirmBtnBg: 'rgba(224, 52, 52, 1)',
+				confirmBtnColor: "rgba(255, 255, 255, 0.87)",
+				showCancel: false,
+			},
+			onConfirm() {
+				console.log('自动报警确认');
+				// 这里可以添加自动报警的逻辑
+			}
+		}
+
+
+	}
 	import MqttClient from '@/utils/mqtt.js';
 	import {
 		deviceDetail,
@@ -296,6 +335,11 @@
 	export default {
 		data() {
 			return {
+				currentPopup: {
+					show: false,
+					config: {},
+					callback: null
+				},
 				pageLoading: true,
 				mainMode: 'string',
 				secondaryMode: 'string',
@@ -303,11 +347,14 @@
 				navTitle: "",
 				lightModeA: false,
 				lightModeB: false,
-				lightModeC: false, //激光提示框
-				items: [],
 				isFormExpanded: true, // 默认展开
 				deviceID: '',
 				itemInfo: {},
+				alarmTimeDisplay: '',
+				currentAlarmTime: {
+					minutes: '0',
+					seconds: '30'
+				},
 				mqttClient: null,
 				messageToSend: '',
 				personnelInfo: {
@@ -330,7 +377,7 @@
 				radioList: ['M', 'S'],
 				radioSelected: 0, // -1表示未选中任何项
 				deviceType: '',
-				popupType:'popupType' //弹框类型
+				popupType: '', //弹框类型
 			}
 		},
 		methods: {
@@ -338,12 +385,35 @@
 			closePopup() {
 				this.lightModeA = false;
 				this.lightModeB = false;
-				this.lightModeC = false;
+			},
+			// 打开弹框
+			showPopup(type) {
+				this.currentPopup = {
+					show: true,
+					config: POPUP_CONFIGS[type].config,
+					callback: POPUP_CONFIGS[type].onConfirm
+				}
+			},
+			handleConfirm() {
+				this.currentPopup.show = false;
+				console.log('这是点击了确认');
+			},
+			// 统一处理取消
+			handleCancel() {
+				this.currentPopup.show = false;
+			},
+			// 手动报警
+			anualAlarm() {
+				this.showPopup('del');
 			},
 			handleRadioSelect(index) {
 				this.radioSelected = index;
 				console.log('选中了单选选项：', this.radioList[index]);
 			},
+			// 自动报警
+			automaticAlarm() {
+				this.showPopup('autoAlarm');
+			},
 			// *******定位******
 			gpsPosition() {
 				uni.navigateTo({
@@ -369,78 +439,6 @@
 			toggleForm() {
 				this.isFormExpanded = !this.isFormExpanded;
 			},
-			onItemClick(index) {
-				const selectedItem = this.items[index];
-				if (selectedItem.text === '激光') {
-					this.lightModeC = true;
-				} else {
-					// 更新选中状态
-					this.items = this.items.map((item, i) => ({
-						...item,
-						selected: i === index
-					}));
-					this.currentMainMode = selectedItem.text;
-					this.selectedItemIndex = index;
-					// 强制更新视图（如果需要）
-					this.$forceUpdate();
-				}
-			},
-			// 灯光模式的确认
-			handleSumbit() {
-				if (this.selectedItemIndex === null) return;
-				const selectedItem = this.items[this.selectedItemIndex];
-				console.log(selectedItem, 'selectedItemselectedItem');
-				// 修正这里的赋值错误，应该保存索引而不是文本
-				this.selectedItemIndex = this.selectedItemIndex;
-				let data = {
-					deviceId: this.deviceID,
-					instructValue: selectedItem.instructValue
-				}
-				lightModeSettings(data).then((res) => {
-					if (res.code == 200) {
-						uni.showToast({
-							icon: 'none',
-							title: res.msg
-						})
-						this.lightModeA = false;
-					} else {
-						uni.showToast({
-							icon: 'none',
-							title: res.msg
-						})
-					}
-				})
-			},
-			// 激光模式
-			lasermode() {
-				this.lightModeC = true
-			},
-			// 激光确认框提交
-			handleBtn() {
-				let data = {
-					deviceId: this.deviceID,
-					instructValue: 1
-				}
-				laserModeSettings(data).then((res) => {
-					if (res.code == 200) {
-						uni.showToast({
-							icon: 'none',
-							title: res.msg
-						})
-						this.lightModeC = false
-					} else {
-						uni.showToast({
-							icon: 'none',
-							title: res.msg
-						})
-					}
-				})
-
-			},
-			//激光取消
-			handleDisagree() {
-				this.lightModeC = false
-			},
 			// 上传开机画面
 			uploadStartup() {
 				this.lightModeB = true
@@ -508,9 +506,7 @@
 						try {
 							const responseData = JSON.parse(res.data);
 							if (responseData.code === 200) {
-								this.popupType = 'logo'; //弹框类型
+								this.showPopup('logo');
-								this.showPopupFlag = true;
-								this.popupMessage = '上传成功';
 								this.selectedImage = '';
 								this.file = null;
 								this.lightModeB = false
@@ -531,8 +527,35 @@
 					}
 				})
 			},
-			// 分享
+			// 报警时长
-			shareUp() {
+			alarmTime() {
+				this.lightModeA = true
+			},
+			handleTimeChange(time) {
+				this.currentAlarmTime = time;
+			},
+			// 保存时间
+			saveAlarmTime() {
+				const time = this.$refs.timePicker.getCurrentTime();
+				this.alarmTimeDisplay = `${time.minutes}分${time.seconds}秒`;
+				this.lightModeA = false;
+				console.log("保存的时间：", time);
+			},
+			handleIconClick(index) {
+				// 历史记录
+				if (index === 0) {
+					uni.navigateTo({
+						url: '/pages/210/historyRecords/index',
+						events: {
+							ack: function(data) {}
+						},
+						success: (res) => {
+							res.eventChannel.emit('share', {
+								data: this.itemInfo,
+							});
+						}
+					})
+				} else {
 					uni.navigateTo({
 						url: '/pages/6170/share/index',
 						events: {
@@ -544,6 +567,12 @@
 							});
 						}
 					})
+				}
+			},
+
+			// 分享
+			shareUp() {
+
 			},
 
 			// 操作说明
@@ -610,9 +639,7 @@
 				registerPersonInfo(data).then((res) => {
 					if (res.code == 200) {
 						uni.hideLoading()
-						this.popupType = 'person'; //弹框类型
+						this.showPopup('person');
-						this.showPopupFlag = true;
-						this.popupMessage = '人员信息发送成功'
 					} else {
 						uni.showToast({
 							title: res.msg,
@@ -621,10 +648,6 @@
 					}
 				})
 			},
-			onPopupConfirm() {
-				this.showPopupFlag = false
-				console.log('用户点击了确定')
-			},
 			// 发送文本消息
 			sendTextMessage() {
 				if (!this.messageToSend) {
@@ -645,9 +668,7 @@
 				deviceSendMessage(data).then((res) => {
 					if (res.code == 200) {
 						uni.hideLoading()
-						this.popupType = 'person'; //弹框类型
+						this.showPopup('person');
-						this.showPopupFlag = true;
-						this.popupMessage = '发送信息成功'
 					} else {
 						uni.showToast({
 							title: res.msg,
@@ -1142,7 +1163,7 @@
 	/* 弹窗主体 */
 	.agreement-popup {
 		width: 100%;
-		height: 50%;
+		height: 40%;
 		background-color: rgb(42, 42, 42);
 		border-radius: 60rpx 60rpx 0rpx 0rpx;
 		padding: 40rpx;

pages/210/historyRecords/index.vue

@@ -0,0 +1,8 @@
+<template>
+</template>
+
+<script>
+</script>
+
+<style>
+</style>

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
+		deviceSendAlarmMessage
-	} from '@/api/6170/deviceControl.js'
+	} 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, // '强制或者解除'
 				}
-
+				deviceSendAlarmMessage(data).then((res) => {
-				deviceSendMessage(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>
@@ -294,7 +294,7 @@
 				secondaryMode: 'string',
 				navBarHeight: 70 + uni.getSystemInfoSync().statusBarHeight,
 				navTitle: "",
-				sliderValue: 30,
+				sliderValue: 25,
 				lightModeA: false,
 				currentMainMode: '强光',
 				lightModeB: false,
@@ -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) => {
+					events: {
-						// 确保使用深拷贝
+						ack: function(data) {}
-						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) => {
+					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', {

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) {
@@ -473,7 +482,8 @@
 							// 页面跳转成功后的回调函数
 							res.eventChannel.emit('deviceControl', {
 								data: item,
-								deviceType: deviceType
+								deviceType: deviceType,
+								apiType: 'listA' // 自定义标识
 							});
 						}
 					})
@@ -498,29 +508,29 @@
 				this.getData(this.deviceType); // 重新加载第一页数据
 			},
 			updateDeviceStatus(data) {
-				// 只更新 communicationMode == 0 的设备
+				this.deviceList = this.deviceList
-				this.deviceList = this.deviceList.map(item => {
+					.map(item => {
-					console.log(item,'item444');
+						if (!item) return null; // 如果 item 是 undefined/null，返回 null
 						if (item.communicationMode == 0) {
-						console.log(item, 'item2222');
 							let messageData;
 							try {
-							messageData = data.message; // 双重解析（如果消息被转义）
+								messageData = data.message;
 							} catch (e) {
-							return item; // 解析失败则不更新
+								return item; // 解析失败则返回原 item
 							}
-						const [deviceId, onlineStatus, batteryPercentage] = messageData.state || [];
+							const [deviceId, onlineStatus, battery] = messageData.state || [];
-						// 只更新电量 & 在线状态（避免覆盖其他字段）
+								console.log('我收到消息了没',item.battery);
 							return {
 								...item,
-							batteryPercentage: batteryPercentage ?? item.batteryPercentage, // 如果新电量有效则更新，否则保留旧值
+								battery: battery ?? item.battery,
-							onlineStatus: onlineStatus ?? item.onlineStatus, // 如果新状态有效则更新，否则保留旧值
+								onlineStatus: onlineStatus ?? item.onlineStatus,
-							lastUpdate: data.timestamp // 更新时间戳
+								lastUpdate: data.timestamp,
 							};
+						}
 						return item;
-					}
+					})
-				});
+					.filter(Boolean);
-			}
+			},
 		},
 		onLoad() {
 			this.getTab()
@@ -530,22 +540,19 @@
 				this.getTab() // 刷新数据
 				this.onIntall()
 			});
+			// 监听设备状态更新事件
+			uni.$on('deviceStatusUpdate', (data) => {
+				console.log('收到设备状态更新通知:', data);
+				this.onIntall()
+			});
 		},
 		beforeDestroy() {
 			// 组件销毁前移除监听器
 			uni.$off('refreshDeviceList');
 		},
-		onShow() {
+		onUnload() {
-			// 监听设备状态更新事件
-			uni.$on('deviceStatusUpdate', (data) => {
-				console.log('收到设备状态更新通知:', data);
-				this.updateDeviceStatus(data);
-			});
-		},
-		onHide() {
-			// 页面隐藏时取消监听，避免内存泄漏
 			uni.$off('deviceStatusUpdate');
-		},
+		}
 
 	}
 </script>

pages/common/map/index.vue

@@ -1,73 +1,151 @@
 <template>
-	<view class="map-container">
+	<view>
-		<map style="width: 100%; height: 100%;" :latitude="latitude" :longitude="longitude" :markers="markers"
+		<view class="page-body">
-			:custom-map-style="customMapStyle" :enable-custom="true">
+			<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, // 默认显示加载提示
+			title: 'map',
-				latitude: 30.592,
+			latitude: 39.909,  // 默认纬度
-				longitude: 114.305,
+			longitude: 116.39742,  // 默认经度
-				customMapStyle: '8c3efc37298895fd78e6aa0e799e78ce',
+			covers: [],  // 标记点数组
-				markers: [{
+			loading: true,  // 加载状态
-					id: 1,
+			markerData: []  // 存储原始标记数据
-					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({
+		const eventChannel = this.getOpenerEventChannel();
-				type: 'gcj02',
+		// 监听传递过来的位置数据
-				success: (res) => {
+		eventChannel.on('Map', (receivedData) => {
-					this.latitude = res.latitude;
+			this.loading = true;
-					this.longitude = res.longitude;
+			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;
+				}
+			} 
+			//data是单个设备对象
+			else if (typeof dataContent === 'object' && dataContent !== null) {
+				if (this.validateMarker(dataContent)) {
+					this.markerData = [dataContent];
+					this.processSingleMarker(dataContent);
+				} else {
+					console.log('单个设备数据缺少有效的经纬度');
+					this.loading = false;
+				}
 			} 
 		});
 	},
-		onReady() {
+	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>

utils/request.js

@@ -1,5 +1,5 @@
 import config from '../config/index.js';
-const env = 'development'; //production development  //开发of线上 改这里就行
+const env = 'production'; //production development  //开发of线上 改这里就行
 const BASE = config[env];
 const request = (options) => {
 	console.log("options"+JSON.stringify(options),BASE.BASE_URL)