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

components/CustomPopup/CustomPopup.vue

@@ -1,87 +1,62 @@
 <template>
 	<view class="agreement-mask" v-if="show" @click.stop="closePopup">
 		<!-- 弹窗主体：支持自定义边框、背景 -->
-		<view 
-			class="agreement-popup" 
-			@click.stop
-			:style="{
+		<view class="agreement-popup" @click.stop :style="{
 				border: popupBorder,
 				backgroundColor: popupBg,
 				borderRadius: popupRadius
-			}"
-			:class="popupClass"
-		>
-			<view class="popup-content">
-				<!-- 动态图标：支持自定义大小、边距 -->
-				<image 
-					v-if="showIcon && icon" 
-					:src="icon" 
-					mode="aspectFit" 
-					class="svg"
-					:style="iconStyle"
-				></image>
-				
+			}" :class="popupClass">
 			<view class="text-content">
 				<!-- 动态标题：支持自定义颜色、字体大小 -->
-					<view 
-						class="popup-Title" 
-						v-if="title"
-						:style="{
+				<view 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 
-						class="popup-Message" 
-						v-if="message"
-						:style="{
+					<view 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 
-					v-if="showCancel" 
-					class="btn cancelBtn" 
-					@click="handleCancel"
-					:style="{
+				<button 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 
-					class="btn agreeBtn" 
-					@click="handleConfirm"
-					:style="{
+				<button 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: '确定'

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=""
-					class="pathIMG">
+				<image v-if="rightIcon" :src="rightIcon" @click="handleRightClick" 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)
 			}
 		}
 	}

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"
-				:rightIcon="isRightIconVisible ? '/static/images/common/shape.png' : ''"
-				@right-click="shareUp"></custom-navbar>
+			<custom-navbar :title="navTitle" :showBack="true" color="#FFFFFF" :rightIcons="[
+				    {src: '/static/images/210/ls.png'},
+				    ...(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">
@@ -88,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>
@@ -114,7 +116,7 @@
 						</view>
 						<view class="mode-v1">
 							<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">{{alarmTimeDisplay }}</view>
@@ -265,6 +267,7 @@
 				return true; // 直接关闭
 			}
 		},
+
 		cancel: {
 			config: {
 				titleColor: 'rgba(224, 52, 52, 1)',
@@ -288,7 +291,27 @@
 			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';
@@ -387,6 +410,10 @@
 				this.radioSelected = index;
 				console.log('选中了单选选项：', this.radioList[index]);
 			},
+			// 自动报警
+			automaticAlarm() {
+				this.showPopup('autoAlarm');
+			},
 			// *******定位******
 			gpsPosition() {
 				uni.navigateTo({
@@ -514,9 +541,21 @@
 				this.lightModeA = false;
 				console.log("保存的时间：", time);
 			},
-
-			// 分享
-			shareUp() {
+			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: {
@@ -528,6 +567,12 @@
 							});
 						}
 					})
+				}
+			},
+
+			// 分享
+			shareUp() {
+
 			},
 
 			// 操作说明

pages/210/historyRecords/index.vue

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

pages/common/index/index.vue

@@ -482,7 +482,8 @@
 							// 页面跳转成功后的回调函数
 							res.eventChannel.emit('deviceControl', {
 								data: item,
-								deviceType: deviceType
+								deviceType: deviceType,
+								apiType: 'listA' // 自定义标识
 							});
 						}
 					})