210自动报警，手动报警

pages/210/deviceControl/index.vue

@@ -39,15 +39,24 @@
 				<!-- 设备基本信息 -->
 				<view class="info-card">
 					<view class="info-row">
-						<text class="info-label">设备状态</text>
+						<text class="info-label">设备名称</text>
 						<text class="info-value status-running">运行中</text>
 					</view>
+					<view class="info-row">
+						<text class="info-label">蓝牙名称</text>
+						<text class="info-value status-running">FB-Site_02</text>
+					</view>
+					<view class="info-row">
+						<text class="info-label">蓝牙状态</text>
+						<text class="info-value status-running">未连接</text>
+					</view>
+					<view class="hr"></view>
 					<view class="info-row">
 						<text class="info-label">联机状态</text>
 						<text class="info-value status-greend">联机</text>
 					</view>
 					<view class="info-row">
-						<text class="info-label">定位信息</text>
+						<text class="info-label">定位信</text>
 						<view class="info-value status-running" @click="gpsPosition">
 							<view class="info-value status-running">114.72 30.28</view>
 							<view class="info-value status-running">
@@ -69,63 +78,6 @@
 						</view>
 					</view>
 				</view>
-				<!-- 灯光模式选择 -->
-				<!-- 	<view class="mode-section">
-					<view class="mode-buttons">
-						<view class="mode-v1">
-							<view class="mode-v2" @click="selectMode">
-								<image src="/static/images/210/lj.png" class="setIMG"></image>
-								<view>
-									<view class="battery-v2">联机设备</view>
-								</view>
-							</view>
-						</view>
-						<view class="mode-v1">
-							<view class="mode-v2" @click="uploadStartup">
-								<image src="/static/images/common/path7.png" class="setIMG" mode="aspectFit"></image>
-								<view>
-									<view class="battery-v2">开机画面</view>
-									<view class="mode-v3">上传</view>
-								</view>
-							</view>
-						</view>
-						<view class="mode-v1">
-							<view class="mode-v2" @click="automaticAlarm">
-								<image src="/static/images/210/zd.png" class="setIMG" mode="aspectFit"></image>
-								<view>
-									<view class="battery-v2">自动报警</view>
-								</view>
-							</view>
-						</view>
-						<view class="mode-v1">
-							<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>
-								</view>
-							</view>
-						</view>
-						<view class="mode-v1">
-							<view class="mode-v2">
-								<image src="/static/images/210/bj.png" class="setIMG" mode="aspectFit"></image>
-								<view>
-									<view class="battery-v2">报警声音</view>
-									<view class="mode-v3">上传</view>
-								</view>
-							</view>
-						</view>
-						<view class="mode-v1">
-							<view class="mode-v2" @click="alarmTime">
-								<image src="/static/images/210/time.png" class="setIMG" mode="aspectFit"></image>
-								<view>
-									<view class="battery-v2">报警时长</view>
-									<view class="mode-v3">{{alarmTimeDisplay }}</view>
-								</view>
-							</view>
-						</view>
-
-					</view>
-				</view> -->
 				<view class="mode-section">
 					<view class="mode-buttons">
 						<view v-for="(item, index) in modeItems" :key="index" class="mode-v1"
@@ -238,122 +190,17 @@
 						<button class="agree" @click="handleupload">确定</button>
 					</view>
 				</view>
-				<!-- ======各个弹框类型======= -->
-				<CustomPopup :show="currentPopup.show" ="currentPopup.config" @confirm="handleConfirm"
-					@cancel="handleCancel" />
 			</view>
-	
+			<!-- ======各个弹框类型======= -->
+			<CustomPopupTXT :show="currentPopup.show" v-bind="currentPopup.config" @confirm="handleConfirm"
+				@cancel="handleCancel" class="custom-popup-txt" />
 		</view>
 	</view>
 </template>
 
 <script>
-	// 弹框配置中心
+	import CustomPopupTXT from '@/components/CustomPopup/CustomPopup.vue'
-	const POPUP_CONFIGS = {
-		// 人员信息发送
-		person: {
-			config: {
-				icon: '/static/images/common/sendSucc.png',
-				message: '信息发送成功',
-				showCancel: false
-			},
-			confirm() {
-				return true; // 直接关闭
-			}
 
-		},
-		// 上传开机log
-		logo: {
-			config: {
-				icon: '/static/images/common/upload.png',
-				message: '上传成功',
-				showCancel: false
-			},
-			confirm() {
-				return true; // 直接关闭
-			}
-
-		},
-		// 电量低于20%.提示框
-		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
-			},
-			confirm() {
-				return true; // 直接关闭
-			}
-		},
-		// 解除报警关闭的那个提示
-		cancel: {
-			config: {
-				titleColor: 'rgba(224, 52, 52, 1)',
-				icon: '/static/images/6170/svg.png',
-				popupBorder: '1rpx solid rgba(224, 52, 52, 0.3)',
-				confirmBtnBg: 'rgba(224, 52, 52, 1)',
-				showCancel: true //取消按钮
-			},
-			confirm() {
-				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
-			},
-			confirm() {
-				return 'alarmCountdown'; //点击确认,再次弹框,解除报警,再次报警的类型
-			}
-		},
-		// 手动报警再次弹框 再次报警，解除报警指令
-		alarmCountdown: {
-			config: {
-				title: '报警倒计时',
-				icon: '/static/images/6170/svg.png',
-				message: '59秒',
-				popupBorder: '1rpx solid rgba(224, 52, 52, 1)',
-				confirmBtnBg: 'rgba(224, 52, 52, 1)',
-				cancelBtnColor:"rgba(224, 52, 52, 1)",
-				confirmBtnColor:"rgba(255, 255, 255, 0.87)",
-				confirmText: '解除报警',
-				cancelText:"再次报警",
-				showCancel: true //取消按钮
-			},
-			confirm() {
-				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,
-			},
-			confirm() {
-				console.log('自动报警解除报警的弹框');
-			}
-		}
-
-
-	}
 	import MqttClient from '@/utils/mqtt.js';
 	import {
 		deviceDetail,
@@ -373,6 +220,9 @@
 		clientid
 	} from '@/utils/request'
 	export default {
+		components: {
+			CustomPopupTXT
+		},
 		data() {
 			return {
 				selectedIndex: -1, // Track currently selected index
@@ -382,8 +232,8 @@
 						subTitle: ""
 					},
 					{
-						image: "/static/images/common/path7.png",
+						image: "/static/images/210/bj.png",
-						title: "开机画面",
+						title: "报警声音",
 						subTitle: "上传"
 					},
 					{
@@ -397,8 +247,8 @@
 						subTitle: ""
 					},
 					{
-						image: "/static/images/210/bj.png",
+						image: "/static/images/common/path7.png",
-						title: "报警声音",
+						title: "开机画面",
 						subTitle: "上传"
 					},
 					{
@@ -450,6 +300,118 @@
 				radioSelected: 0, // -1表示未选中任何项
 				deviceType: '',
 				popupType: '', //弹框类型
+				// 弹框配置中心
+				POPUP_CONFIGS: {
+					// 人员信息发送
+					person: {
+						config: {
+							icon: '/static/images/common/sendSucc.png',
+							message: '信息发送成功',
+							showCancel: false
+						},
+						confirm() {
+							return true; // 直接关闭
+						}
+					},
+					// 上传开机log
+					logo: {
+						config: {
+							icon: '/static/images/common/upload.png',
+							message: '上传成功',
+							showCancel: false
+						},
+						confirm() {
+							return true; // 直接关闭
+						}
+					},
+					// 电量低于20%.提示框
+					bettery: {
+						config: {
+							show: true, // 必须显式设置为true
+							showIcon: true, // 显示图标
+							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
+						},
+						confirm() {
+							return true; // 直接关闭
+						}
+					},
+					// 解除报警关闭的那个提示
+					cancel: {
+						config: {
+							show: true, // 必须显式设置为true
+							showIcon: true, // 显示图标
+							titleColor: 'rgba(224, 52, 52, 1)',
+							icon: '/static/images/6170/svg.png',
+							popupBorder: '1rpx solid rgba(224, 52, 52, 0.3)',
+							confirmBtnBg: 'rgba(224, 52, 52, 1)',
+							showCancel: true //取消按钮
+						},
+						confirm() {
+							console.log('解除报警确认');
+						}
+					},
+					// 手动报警弹框
+					del: {
+						config: {
+							show: true, // 必须显式设置为true
+							showIcon: true, // 显示图标
+							message: '确定开启报警?',
+							icon: '/static/images/210/bj_1.png',
+							popupBorder: '1rpx solid rgba(255, 200, 78, 1)',
+							confirmBtnBg: 'rgba(255, 200, 78, 1)',
+							showCancel: true
+						},
+						confirm() {
+							return 'alarmCountdown'; //点击确认,再次弹框,解除报警,再次报警的类型
+						}
+					},
+					// 手动报警再次弹框 再次报警，解除报警指令
+					alarmCountdown: {
+						config: {
+							show: true, // 必须显式设置为true
+							showIcon: true, // 显示图标
+							title: '报警倒计时',
+							icon: '/static/images/6170/svg.png',
+							message: '59秒',
+							popupBorder: '1rpx solid rgba(224, 52, 52, 1)',
+							confirmBtnBg: 'rgba(224, 52, 52, 1)',
+							cancelBtnColor: "rgba(224, 52, 52, 1)",
+							confirmBtnColor: "rgba(255, 255, 255, 0.87)",
+							confirmText: '解除报警',
+							cancelText: "再次报警",
+							showCancel: true //取消按钮
+						},
+						confirm() {
+							console.log('解除报警确认');
+						}
+					},
+					// 自动报警
+					autoAlarm: {
+						config: {
+							show: true, // 必须显式设置为true
+							showIcon: true, // 显示图标
+							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,
+						},
+						confirm() {
+							console.log('自动报警解除报警的弹框');
+						}
+					}
+				}
 			}
 		},
 		methods: {
@@ -462,17 +424,18 @@
 			showPopup(type) {
 				this.currentPopup = {
 					show: true,
-					config: POPUP_CONFIGS[type].config,
+					config: this.POPUP_CONFIGS[type].config,
-					callback: POPUP_CONFIGS[type].confirm
+					callback: this.POPUP_CONFIGS[type].confirm
 				}
+				console.log(type, 'typetype');
 			},
 			handleConfirm() {
 				if (this.currentPopup.callback) {
-				  const nextPopupType = this.currentPopup.callback(); // 执行回调并获取下一个弹框类型
+					const nextPopupType = this.currentPopup.callback(); // 执行回调并获取下一个弹框类型
-				    this.currentPopup.show = false; // 关闭当前弹框
+					this.currentPopup.show = false; // 关闭当前弹框
-				    if (nextPopupType) {
+					if (nextPopupType) {
-				      this.showPopup(nextPopupType); // 打开下一个弹框
+						this.showPopup(nextPopupType); // 打开下一个弹框
-				    }
+					}
 				} else {
 					this.currentPopup.show = false; // 默认关闭
 				}
@@ -487,8 +450,8 @@
 					case 0:
 						this.selectMode();
 						break;
-					case 1:
+					case 1: // 报警声音
-						this.uploadStartup();
+						this.soundAlarm();
 						break;
 					case 2:
 						this.automaticAlarm();
@@ -496,6 +459,9 @@
 					case 3:
 						this.manualAlarm();
 						break;
+					case 4:
+						this.uploadStartup();
+						break;
 					case 5:
 						this.alarmTime();
 						break;
@@ -508,6 +474,10 @@
 			handleRadioSelect(index) {
 				this.radioSelected = index;
 				console.log('选中了单选选项：', this.radioList[index]);
+			},
+			// 报警声音
+			soundAlarm() {
+
 			},
 			// 自动报警
 			automaticAlarm() {
@@ -1048,6 +1018,11 @@
 		margin-bottom: 20rpx;
 	}
 
+	.hr {
+		border-bottom: 2rpx solid rgba(255, 255, 255, 0.04);
+		margin-bottom: 10rpx;
+	}
+
 	.info-label {
 		font-size: 28rpx;
 		color: rgba(255, 255, 255, 0.87);