dyf/APP
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

100J功能部分功能修改

Browse Source
This commit is contained in:
fengerli
2026-02-06 13:42:22 +08:00
parent 1fc02b5f5a
commit 7d657d4429
3 changed files with 230 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

182
pages/100J/audioManager/AudioList.vue
View File

@ -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>