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

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="text-content">
-		>
+				<!-- 动态标题：支持自定义颜色、字体大小 -->
-			<view class="popup-content">
+				<view class="popup-Title" v-if="title" :style="{
-				<!-- 动态图标：支持自定义大小、边距 -->
+					color: titleColor,
-				<image 
+					fontSize: titleSize,
-					v-if="showIcon && icon" 
+					padding: titlePadding
-					:src="icon" 
+				}">
-					mode="aspectFit" 
+					{{ title }}
-					class="svg"
+				</view>
-					:style="iconStyle"
+				<view class="popup-content">
-				></image>
+					<!-- 动态图标：支持自定义大小、边距 -->
-				
+					<image v-if="showIcon && icon" :src="icon" mode="aspectFit" class="svg" :style="iconStyle"></image>
-				<view class="text-content">
+
-					<!-- 动态标题：支持自定义颜色、字体大小 -->
+
-					<view 
+
-						class="popup-Title" 
-						v-if="title"
-						:style="{
-							color: titleColor,
-							fontSize: titleSize,
-							padding: titlePadding
-						}"
-					>
-						{{ title }}
-					</view>
-					
 					<!-- 动态消息内容：支持自定义颜色、换行、字体大小 -->
-					<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: '确定'
@@ -131,7 +110,7 @@
 				type: Boolean,
 				default: false // 默认不换行，true则自动换行
 			},
-			
+
 			// 弹窗样式自定义
 			popupBorder: {
 				type: String,
@@ -149,7 +128,7 @@
 				type: String,
 				default: ''
 			},
-			
+
 			// 标题样式自定义
 			titleColor: {
 				type: String,
@@ -163,7 +142,7 @@
 				type: String,
 				default: '10rpx 0 10rpx'
 			},
-			
+
 			// 消息样式自定义
 			messageColor: {
 				type: String,
@@ -177,7 +156,7 @@
 				type: String,
 				default: '10rpx 20rpx 30rpx'
 			},
-			
+
 			// 图标样式自定义
 			iconStyle: {
 				type: Object,
@@ -187,7 +166,7 @@
 					marginBottom: '20rpx'
 				})
 			},
-			
+
 			// 按钮组样式
 			buttonGroupMargin: {
 				type: String,
@@ -201,7 +180,7 @@
 				type: String,
 				default: '0 10rpx'
 			},
-			
+
 			// 确认按钮样式
 			confirmBtnBg: {
 				type: String,
@@ -219,7 +198,7 @@
 				type: String,
 				default: ''
 			},
-			
+
 			// 取消按钮样式
 			cancelBtnBorder: {
 				type: String,

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)
 			}
 		}
 	}

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/common/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">
@@ -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>
@@ -239,7 +241,7 @@
 				message: '信息发送成功',
 				showCancel: false
 			},
-			
+
 		},
 		// 开机log
 		logo: {
@@ -248,7 +250,7 @@
 				message: '上传成功',
 				showCancel: false
 			},
-			
+
 		},
 		bettery: {
 			config: {
@@ -265,6 +267,7 @@
 				return true; // 直接关闭
 			}
 		},
+
 		cancel: {
 			config: {
 				titleColor: 'rgba(224, 52, 52, 1)',
@@ -288,8 +291,28 @@
 			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 {
@@ -371,7 +394,7 @@
 					callback: POPUP_CONFIGS[type].onConfirm
 				}
 			},
-			handleConfirm(){
+			handleConfirm() {
 				this.currentPopup.show = false;
 				console.log('这是点击了确认');
 			},
@@ -387,6 +410,10 @@
 				this.radioSelected = index;
 				console.log('选中了单选选项：', this.radioList[index]);
 			},
+			// 自动报警
+			automaticAlarm() {
+				this.showPopup('autoAlarm');
+			},
 			// *******定位******
 			gpsPosition() {
 				uni.navigateTo({
@@ -514,20 +541,38 @@
 				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: {
+							ack: function(data) {}
+						},
+						success: (res) => {
+							res.eventChannel.emit('share', {
+								data: this.itemInfo,
+							});
+						}
+					})
+				}
+			},
 
 			// 分享
 			shareUp() {
-				uni.navigateTo({
+
-					url: '/pages/6170/share/index',
-					events: {
-						ack: function(data) {}
-					},
-					success: (res) => {
-						res.eventChannel.emit('share', {
-							data: this.itemInfo,
-						});
-					}
-				})
 			},
 
 			// 操作说明

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' // 自定义标识
 							});
 						}
 					})