From 7d657d4429024d3abfa275697af05bc02fe4fea0 Mon Sep 17 00:00:00 2001
From: fengerli <528575642@qq.com>
Date: Fri, 6 Feb 2026 13:42:22 +0800
Subject: [PATCH] =?UTF-8?q?100J=E5=8A=9F=E8=83=BD=E9=83=A8=E5=88=86?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 config/index.js                       |   6 +-
 pages/100J/HBY100-J.vue               | 143 ++++++++++++++------
 pages/100J/audioManager/AudioList.vue | 182 ++++++++++++++++++--------
 3 files changed, 230 insertions(+), 101 deletions(-)

diff --git a/config/index.js b/config/index.js
index 3776862..31d9e3c 100644
--- a/config/index.js
+++ b/config/index.js
@@ -5,10 +5,10 @@ const config = {
 		BASE_URL: 'http://192.168.2.34:8000',//http://139.224.253.23:8000
 		API_PREFIX: '',
 		// MQTT 配置
-		MQTT_HOST: 'www.cnxhyc.com',
-		MQTT_PORT: 8083,
+		MQTT_HOST: '47.120.79.150',
+		MQTT_PORT: 9083,
 		MQTT_USERNAME: 'admin',
-		MQTT_PASSWORD: '#YtvpSfCNG'    
+		MQTT_PASSWORD: '#YtvpSfCNG' 
 	},
 	// 生产环境
 	production: {
diff --git a/pages/100J/HBY100-J.vue b/pages/100J/HBY100-J.vue
index 79fd685..204cbc2 100644
--- a/pages/100J/HBY100-J.vue
+++ b/pages/100J/HBY100-J.vue
@@ -43,26 +43,26 @@
 					<text class="value">{{ deviceInfo.onlineStatus === 0 ? '离线' : deviceInfo.onlineStatus
 						=== 2 ? '故障' : '在线' }}</text>
 				</view>
-				<view class="item">
-					<text class="lbl">定位信息</text>
-					<view class="info-value">
-						<view class="value" @click="gpsPosition(deviceInfo)">
-							{{ deviceInfo && deviceInfo.longitude ? Number(deviceInfo.longitude).toFixed(4) : '' }}
-							{{ deviceInfo && deviceInfo.latitude ? Number(deviceInfo.latitude).toFixed(4) : '' }}
-						</view>
-						<view class="locationGPS">
-							<uni-icons type="location" size="17" color="rgba(255, 255, 255, 0.8)"
-								style="vertical-align: bottom;" />
-							{{ deviceInfo.address }}
-						</view>
+			<view class="info-row">
+				<text class="info-label" style="display: flex; align-items: center;">定位信息</text>
+				<view class="info-value status-running" @click="gpsPosition(deviceInfo)">
+					<view class="info-value status-running">
+						{{ deviceInfo && deviceInfo.longitude ? Number(deviceInfo.longitude).toFixed(4) : '' }}
+						{{ deviceInfo && deviceInfo.latitude ? Number(deviceInfo.latitude).toFixed(4) : '' }}
 					</view>
-				</view>
+					<view class="info-value status-running locationGPS">
+						<uni-icons type="location" size="17"
+							color="rgba(255, 255, 255, 0.8)" style="vertical-align: bottom;" />
+						{{ deviceInfo.address }}
+					</view>
+				</view>  
 			</view>
+			</view> 
 			<view class="lampMode">
 				<view class="sosContent">
 					<view class="btnSos openSos center" :class="{ active: formData.sta_SOSType === 1 }"
 						@click="sosSetting(1)">
-						{{ deviceInfo.chargeState === 1 ? '报警中' : '强制报警' }}
+						{{ deviceInfo.voiceStrobeAlarm === 1 ? '报警中' : '强制报警' }}
 					</view>
 					<view class="btnSos closeSos center" @click="sosSetting(0)">解除</view>
 				</view>
@@ -80,7 +80,7 @@
 						<view class="arrow" @click.stop="openVolume(item, index)" v-if="item.show"
 							v-for="item, index in dic.sta_VoiceType" :class="{
 								'active': formData.sta_VoiceType === item.key,
-								'displayNone': !Status.usrToggle && index > 3
+								'displayNone': !Status.usrToggle && index > 2
 							}">
 							<view class="outCircle">
 								<view class="item">
@@ -148,32 +148,32 @@
 				</view>
 				<view class="header paddingTop0">
 					<text class="sliderTxt">亮度</text>
-					<text class="sliderVal">{{ formData.sta_LightDimmer }}%</text>
+					<text class="sliderVal">{{ formData.lightBrightness }}%</text>
 				</view>
 				<view class="slider-container">
-					<slider min="10" max="100" step="10" :disabled="false" :value="formData.sta_LightDimmer"
+					<slider min="10" max="100" step="10" :disabled="false" :value="formData.lightBrightness"
 						activeColor="#bbe600" backgroundColor="#686767" block-size="20" block-color="#ffffffde"
 						@change="onBrightnessChanging" @changing="onBrightnessChanging" class="custom-slider" />
 				</view>
 				<view class="line"></view>
 				<view class="header paddingTop0">
 					<text class="sliderTxt">频率</text>
-					<text class="sliderVal">{{ formData.sta_LightFreq }}HZ</text>
+					<text class="sliderVal">{{ formData.strobeFrequency }}HZ</text>
 				</view>
 				<view class="slider-container">
-					<slider min="0.5" max="10" step="0.5" :disabled="false" :value="formData.sta_LightFreq"
+					<slider min="0.5" max="10" step="0.5" :disabled="false" :value="formData.strobeFrequency"
 						activeColor="#bbe600" backgroundColor="#686767" block-size="20" block-color="#ffffffde"
 						@change="onFreqChanging" @changing="onFreqChanging" class="custom-slider" />
 				</view>
 				<view class="line"></view>
 				<view class="header paddingTop0">
 					<text class="sliderTxt">音量</text>
-					<text class="sliderVal">{{ formData.sta_VoiceVolume }}</text>
+					<text class="sliderVal">{{ formData.volume }}</text>
 				</view>
 				<view class="slider-container">
-					<slider min="1" max="8" step="1" :disabled="false" :value="formData.sta_VoiceVolume"
-						activeColor="#bbe600" backgroundColor="#686767" block-size="20" block-color="#ffffffde"
-						@change="onVolumeChanging" @changing="onVolumeChanging" class="custom-slider" />
+					<slider min="10" max="100" step="1" :disabled="false" :value="formData.volume" activeColor="#bbe600"
+						backgroundColor="#686767" block-size="20" block-color="#ffffffde" @change="onVolumeChanging"
+						@changing="onVolumeChanging" class="custom-slider" />
 				</view>
 				<view class="proinfo lamp">
 					<text class="title">产品信息</text>
@@ -211,6 +211,7 @@
 
 <script>
 	import gbk from '@/utils/gbk.js'
+	import MqttClient from '@/utils/mqtt.js';
 	import {
 		showLoading,
 		hideLoading,
@@ -234,6 +235,7 @@
 	export default {
 		data() {
 			return {
+				mqttClient: null,
 				Status: {
 					isRightIconVisible: false,
 					navTitle: '',
@@ -304,10 +306,10 @@
 					bleStatu: false,
 					sta_address: '',
 					sta_VoiceType: '0',
-					sta_VoiceVolume: 1,
+					volume: 10,
 					sta_LightType: '',
-					sta_LightFreq: 0.5,
-					sta_LightDimmer: 10,
+					strobeFrequency: 0.5,
+					lightBrightness: 10,
 					sta_system: '',
 					warnTime: 0,
 					sta_SOSType: 0
@@ -363,7 +365,7 @@
 
 					sta_LightType: [{
 							key: "6",
-							name: '红蓝',
+							name: '红蓝交替',
 							show: true
 						},
 						{
@@ -383,17 +385,17 @@
 						},
 						{
 							key: "3",
-							name: '红流水',
+							name: '红色顺时针',
 							show: true
 						},
 						{
 							key: "4",
-							name: '黄流水',
+							name: '黄色顺时针',
 							show: true
 						},
 						{
 							key: "5",
-							name: '蓝流水',
+							name: '红蓝顺时针',
 							show: true
 						},
 						{
@@ -450,6 +452,7 @@
 				these.Status.navTitle = data.data.deviceName;
 				these.Status.apiType = data.apiType;
 				these.Status.isRightIconVisible = these.Status.apiType === 'listA';
+
 				if (data.apiType !== 'listA') {
 					Common.getdeviceShareId(data.data.id).then(res => {
 						if (res.code == 200) {
@@ -460,6 +463,20 @@
 					});
 
 				}
+				this.mqttClient = new MqttClient();
+				this.mqttClient.connect(() => {
+					// 订阅来自设备的状态更新
+					const statusTopic = `status/894078/HBY100/${data.data.deviceImei}`;
+					this.mqttClient.subscribe(statusTopic, (payload) => {
+						try {
+							// 解析MQTT返回的payload
+							const payloadObj = typeof payload === 'string' ? JSON.parse(
+								payload) : payload;
+						} catch (e) {
+							
+						}
+					})
+				})
 				console.log(data, 'datatatatat');
 				these.fetchDeviceDetail(data.data.id)
 			});
@@ -487,7 +504,24 @@
 			fetchDeviceDetail(id) {
 				deviceDetail(id).then((res) => {
 					if (res.code == 200) {
-						this.deviceInfo = res.data
+						const validData = Object.fromEntries(
+							Object.entries(res.data).filter(([key, value]) => {
+								// 过滤规则：值为 null/undefined/0 的字段都不参与合并
+								return value !== null && value !== undefined && value !== 0;
+							})
+						);
+						Object.assign(this.formData, validData);
+						this.deviceInfo = res.data;
+						// 0 红色爆闪，1 蓝色爆闪，2 黄色爆闪，3，红色顺时针旋转爆闪，4黄色顺时针旋转爆闪，5，红蓝顺时针旋转爆闪，6 红蓝交替爆闪
+						this.formData.sta_LightType = (res.data.strobeMode ?? 0) + ''
+						// 0爆闪关闭, 1爆闪开启
+						const strobeEnable = res.data.strobeEnable ?? 0;
+						this.formData.sta_LightType = strobeEnable === 1 ? 1 : -1;
+						if (res.data.alarmMode == 7) {
+							this.formData.sta_VoiceType = res.data.voiceStrobeAlarm ?? 0;
+						} else {
+							this.formData.sta_VoiceType = res.data.alarmMode + ''
+						}
 					}
 				})
 			},
@@ -519,6 +553,7 @@
 			},
 			// 语音管理
 			audioManager(item) {
+				this.formData.sta_VoiceType = -1
 				if (this.Status.apiType !== 'listA') {}
 				uni.navigateTo({
 					url: '/pages/100J/audioManager/AudioList',
@@ -533,18 +568,18 @@
 			},
 			//频率
 			onFreqChanging(e) {
-				this.formData.sta_LightFreq = e.detail.value;
+				this.formData.strobeFrequency = e.detail.value;
 				this.throttledFreqChange(e.detail.value);
 			},
 			//音量
 			onVolumeChanging(e) {
-				this.formData.sta_VoiceVolume = e.detail.value;
+				this.formData.volume = e.detail.value;
 				this.throttledVolumeChange(e.detail.value);
 			},
 
 			// 亮度调节
 			onBrightnessChanging(e) {
-				this.formData.sta_LightDimmer = e.detail.value;
+				this.formData.lightBrightness = e.detail.value;
 				this.throttledBrightnessChange(e.detail.value);
 			},
 			// 亮度调节
@@ -698,7 +733,7 @@
 				this.formData.sta_VoiceType = val;
 				console.log(this.formData.sta_VoiceType, 'this.formData.sta_VoiceType')
 				// 模式类型为7时才去判断
-				if (val == '7') {
+				if (val === '7' || val === '-1') {
 					let data = {
 						deviceId: this.deviceInfo.deviceId,
 						voiceBroadcast: Number(this.formData.sta_VoiceType) === -1 ? 0 : 1
@@ -969,14 +1004,14 @@
 		border-radius: 16rpx;
 		background: rgba(26, 26, 26, 1);
 		box-sizing: border-box;
-		padding: 15rpx 0rpx 40rpx 0rpx;
+		padding: 15rpx 30rpx;
 	}
 
 	.eqinfo .item {
 		width: 100%;
 		height: 60rpx;
 		line-height: 60rpx;
-		padding: 0rpx 28rpx;
+		/* padding: 0rpx 28rpx; */
 		box-sizing: border-box;
 		display: flex;
 		flex-direction: row;
@@ -1006,12 +1041,12 @@
 	}
 
 	.eqinfo .info-value {
-		margin-top: 30rpx;
+		/* margin-top: 30rpx; */
 	}
 
-	.eqinfo .status-running {
+	/* .eqinfo .status-running {
 		color: rgba(174, 214, 0, 1);
-	}
+	} */
 
 	.lamp {
 		margin-top: 24rpx;
@@ -1714,4 +1749,32 @@
 		width: 100%;
 		font-size: 32rpx;
 	}
+	.info-row {
+		display: flex;
+		justify-content: space-between;
+	}
+	
+	.info-label {
+		font-size: 28rpx;
+		color: rgba(255, 255, 255, 0.87);
+		white-space: nowrap;
+	}
+	
+	.info-value {
+		font-size: 28rpx;
+		color: rgba(255, 255, 255, 0.6);
+	}
+	
+	.status-running {
+		/* color: rgba(255, 255, 255, 0.6); */
+		text-align: end;
+	}
+	
+	.locationGPS {
+		width: 88%;
+		text-align: end;
+		float: right;
+		line-height: 45rpx;
+		font-size: 28rpx;
+	}
 </style>
\ No newline at end of file
diff --git a/pages/100J/audioManager/AudioList.vue b/pages/100J/audioManager/AudioList.vue
index 5f86a66..40d2c38 100644
--- a/pages/100J/audioManager/AudioList.vue
+++ b/pages/100J/audioManager/AudioList.vue
@@ -1,34 +1,36 @@
 <template>
 	<view class="maincontent contentBg">
-		<mescroll-uni class="device-list" @init="mescrollInit"  @down="downCallback" @up="upCallback" :up="upOption"
+		<mescroll-uni class="device-list" @init="mescrollInit" @down="downCallback" @up="upCallback" :up="upOption"
 			:down="downOption" :fixed="false" :style="{ height: mescrollHeight + 'px' }">
 			<uni-swipe-action ref="swipeAction">
 				<view v-for="(item, index) in dataListA" class="li" :key="index" :ref="'swipeItem_' + index">
-					<view class="itemIcon center" :class="{'displayNone':!Status.isEdit,'check':isCheck(item,index)}"
-						v-on:click.stop="checkToggle(item,index)">
-						<image class="img" :class="{'displayNone':!isCheck(item,index)}"
+					<view class="itemIcon center"
+						:class="{ 'displayNone': !Status.isEdit, 'check': isCheck(item, index) }"
+						v-on:click.stop="checkToggle(item, index)">
+						<image class="img" :class="{ 'displayNone': !isCheck(item, index) }"
 							src="/static/images/common/gou.png" mode="aspectFit"></image>
 					</view>
-					<view class="itemMain " :class="{'Edit':Status.isEdit}">
+					<view class="itemMain " :class="{ 'Edit': Status.isEdit }">
 						<uni-swipe-action-item :right-options="Options" @click="handleSwipeClick($event, item, index)"
 							class="device-card ">
-							<view @click.stop="handleFile(item,index)">
+							<view @click.stop="handleFile(item, index)">
 								<view class="item">
 									<view class="itemLeft ">
 										<view class="title">{{ item.fileNameExt }}</view>
 										<view class="smallTitle">
 											<!-- 展示前端生成的时间 -->
-											<text>{{item.createTime || Common.DateFormat(new Date(), "yyyy年MM月dd日")}}</text>
-											<text v-show="item.duration">{{item.duration}}秒</text>
-											<image :class="{'displayNone':!item.fileUrl}" class="img"
+											<text>{{ item.createTime || Common.DateFormat(new Date(),
+												"yyyy年MM月dd日") }}</text>
+											<text v-show="item.duration">{{ item.duration }}秒</text>
+											<image :class="{ 'displayNone': !item.fileUrl }" class="img"
 												src="/static/images/100/volume.png" mode="aspectFit"
-												@click.stop="play(item,index)"></image>
+												@click.stop="play(item, index)"></image>
 										</view>
 									</view>
 									<view class="itemRight ">
-										<view class="btn" @click.stop="Apply(item,index)"
-											:class="{'active':item.useStatus,'btn-default':!item.useStatus}">
-											{{item.useStatus==1 ?'使用中':'使用'}}
+										<view class="btn" @click.stop="Apply(item, index)"
+											:class="{ 'active': item.useStatus, 'btn-default': !item.useStatus }">
+											{{ item.useStatus == 1 ? '使用中' : '使用' }}
 										</view>
 									</view>
 									<view class="clear"></view>
@@ -40,7 +42,7 @@
 			</uni-swipe-action>
 		</mescroll-uni>
 		<view class="footer">
-			<view class="addContent" :class="{'displayNone':Status.isEdit}">
+			<view class="addContent" :class="{ 'displayNone': Status.isEdit }">
 				<view class="addItem" @click="gotoRecord('Record')">
 					<view class="imgContent center">
 						<image class="img" src="/static/images/100/record.png" mode="aspectFit"></image>
@@ -60,7 +62,7 @@
 					<view class="txt">文字转语音</view>
 				</view>
 			</view>
-			<view class="editContent" :class="{'displayNone':!Status.isEdit}">
+			<view class="editContent" :class="{ 'displayNone': !Status.isEdit }">
 				<view class="btn-del" @click.stop="delCheckList()">删除</view>
 			</view>
 		</view>
@@ -80,6 +82,13 @@
 			<audio :src="cPlay.src" :id="cPlay.Id" :name="cPlay.name" author="">
 		</view> -->
 		<global-loading ref="loading"></global-loading>
+		<!-- 圆形进度条 + 全屏遮罩层（升级中显示） -->
+		<view v-if="isUpdating" class="mask-layer">
+			<view class="circle-progress-box">
+				<progress :percent="updateProgress" activeColor="#bbe600" backgroundColor="#686767" :border-radius='22'
+					show-info stroke-width="15" class="custom-progress" />
+			</view>
+		</view>
 	</view>
 </template>
 
@@ -91,6 +100,7 @@
 	var timeout = null;
 	import MescrollUni from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-uni.vue'
 	import BleTool from '@/utils/BleHelper.js'
+	import MqttClient from '@/utils/mqtt.js';
 	import {
 		deviceVoliceList,
 		videRenameAudioFile,
@@ -114,6 +124,7 @@
 					isEdit: false,
 					playState: '',
 					playPath: '',
+					mqttClient: null,
 					Pop: {
 						showPop: false, //是否显示弹窗
 						popType: 'custom',
@@ -193,7 +204,10 @@
 					createTime: "", //创建时间
 					fileUrl: "", //本地地址
 					fileUrl: "", //网络地址
-				}
+				},
+				updateProgress: 0, // 升级进度，0-100
+				isUpdating: false, // 是否正在升级（控制进度条显示/隐藏）
+				upgradeTimer: null // 升级超时定时器，初始为null
 			}
 		},
 		onLoad() {
@@ -212,7 +226,10 @@
 			console.log("页面返回")
 		},
 		onUnload() {
-			console.log("页面卸载了");
+			// 页面卸载时断开MQTT连接
+			if (this.mqttClient) {
+				this.mqttClient.disconnect();
+			}
 		},
 		methods: {
 			//语音管理列表
@@ -452,61 +469,72 @@
 				}
 			},
 			Apply(item, index) {
-				console.log(item, 'itemmm');
+				this.mqttClient = new MqttClient();
+				this.updateProgress = 0;
+				this.isUpdating = true;
 				let data = {
 					id: item.id
 				}
 				deviceUpdateVoice(data).then((RES) => {
 					if (RES.code == 200) {
+						this.updateProgress = 0;
+						this.isUpdating = true;
+						this.mqttClient.connect(() => {
+							// 订阅来自设备的状态更新
+							const statusTopic = `status/894078/HBY100/${this.device.deviceImei}`;
+							this.mqttClient.subscribe(statusTopic, (payload) => {
+								console.log(payload, 'payloadpayloadpayload');
+								try {
+									// 解析MQTT返回的payload
+									const payloadObj = typeof payload === 'string' ? JSON.parse(
+										payload) : payload;
+									// 取出进度值
+									const progress = payloadObj.data.progress;
+									if (progress !== undefined && !isNaN(progress) && progress >=
+										0 && progress <= 100) {
+										this.updateProgress = progress;
+										console.log('当前升级进度：', progress + '%');
+										// 进度到100%时
+										if (progress === 100) {
+											clearTimeout(this.upgradeTimer);
+											uni.showToast({
+												title: '更新完成！',
+												icon: 'success',
+												duration: 2000
+											});
+											this.isUpdating = false;
+											item.useStatus = 1
+										}
+									}
+								} catch (e) {
+									clearTimeout(this.upgradeTimer);
+									console.error('解析MQTT payload失败：', e);
+								}
+							})
+						})
+					} else {
 						uni.showToast({
 							title: RES.msg,
 							icon: 'none',
 							duration: 1000
 						});
-						console.log("状态修改完成");
-						// eventChannel.emit('audioApply', item.Id);
-						console.log("返回上一页");
-						setTimeout(()=>{
-							uni.navigateBack();
-						},1000)
-						
+
 					}
-
 				})
-
-				let task = () => {
-					//let fileList = uni.getStorageSync(Common.audioStorageKey);
-					// for (let i = 0; i < these.dataListA.length; i++) {
-					// 	let ele = these.dataListA[i];
-					// 	if (i === index) {
-					// 		these.$set(these.dataListA[index], "isApply", true);
-					// 		fileList.find(v => {
-					// 			if (!v.devices) {
-					// 				v.devices = [];
-					// 			}
-					// 			if (v.Id == ele.Id) {
-					// 				v.devices.push(these.device.id);
-					// 				return true;
-					// 			} else {
-					// 				for (let j = 0; j < v.devices.length; j++) {
-					// 					if (v.devices[j] === these.device.id) {
-					// 						v.devices.splice(j, 1);
-					// 						break
-					// 					};
-					// 				}
-					// 			}
-					// 			return false;
-					// 		});
-					// 	} else {
-					// 		these.$set(these.dataListA[i], "isApply", false);
-					// 	}
-					// }
-
-				}
+				this.upgradeTimer = setTimeout(() => {
+					// 超时后
+					uni.showToast({
+						title: '响应超时',
+						icon: 'none',
+						duration: 2000
+					});
+					this.isUpdating = false; // 关闭进度条
+					this.updateProgress = 0;
+					//this.mqttClient.unsubscribe(statusTopic);
+				}, 20000); //20s超时
 			},
 			closePop: function() {
 				this.Status.Pop.showPop = false;
-
 				if (this.Status.Pop.cancelCallback) {
 					this.Status.Pop.cancelCallback();
 				}
@@ -608,7 +636,21 @@
 	}
 </script>
 
-<style>
+<style lang="less">
+	.custom-progress {
+		border-radius: 10rpx;
+	}
+
+	.custom-progress .uni-progress-bar {
+		border-radius: 10rpx !important;
+	}
+
+	.custom-progress .uni-progress-info {
+		color: #BBE600;
+		font-size: 40rpx;
+		font-weight: 600;
+	}
+
 	.popup-prompt {
 		width: 100%;
 		margin-top: 40rpx;
@@ -849,4 +891,28 @@
 		height: 100%;
 		justify-content: flex-end;
 	}
+
+	/* 全屏遮罩层：半透明黑色，覆盖整个页面，禁止底层滚动/点击 */
+	.mask-layer {
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		background-color: rgba(0, 0, 0, 0.7);
+		/* 半透明黑，可调整透明度 */
+		z-index: 9999;
+		/* 遮罩层层级拉满，确保在最上层 */
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		/* 让内部圆形进度条垂直+水平居中 */
+	}
+
+	/* 圆形进度条容器 */
+	.circle-progress-box {
+		position: relative;
+		width: 70%;
+		height: 100rpx;
+	}
 </style>
\ No newline at end of file