100J语音上传功能

This commit is contained in:
fengerli
2026-02-03 18:55:48 +08:00
parent 79a03a782b
commit 6e83056687
7 changed files with 3649 additions and 1279 deletions

View File

@ -1,8 +1,33 @@
import request from '@/utils/request'
// 获取设备详细信息
// 获取语音管理列表
export function deviceVoliceList(params) {
return request({
url: `/app/video/queryAudioFileList`,
method: 'get',
data:params
})
}
// 重命名
export function videRenameAudioFile(data) {
return request({
url: `/app/video/renameAudioFile`,
method: 'post',
data:data
})
}
// 删除语音文件列表
export function deviceDeleteAudioFile(params) {
return request({
url: `/app/video/deleteAudioFile`,
method: 'get',
data:params
})
}
// 100J信息
export function deviceDetail(id) {
return request({
url: `/app/bjq/device/${id}`,
url: `/app/hby100/device/${id}`,
method: 'get',
})
}

View File

@ -2,7 +2,7 @@
const config = {
// 开发环境
development: {
BASE_URL: 'http://192.168.110.57:8000',//http://139.224.253.23:8000
BASE_URL: 'http://192.168.2.34:8000',//http://139.224.253.23:8000
API_PREFIX: '',
// MQTT 配置
MQTT_HOST: 'www.cnxhyc.com',

View File

@ -397,7 +397,25 @@
{
"navigationStyle": "custom"
}
},
{
"path": "pages/100J/audioManager/AudioList",
"style": {
"navigationBarTitleText": "语音管理",
"disableScroll":true,
"app-plus": {
"bounce":"none"
}
}
},
{
"path" : "pages/100J/audioManager/Recording",
"style" :
{
"navigationBarTitleText" : "录制语音"
}
}
],

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,840 @@
<template>
<view class="maincontent contentBg">
<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)}"
src="/static/images/common/gou.png" mode="aspectFit"></image>
</view>
<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 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"
src="/static/images/100/volume.png" mode="aspectFit"
@click.stop="play(item,index)"></image>
</view>
</view>
<view class="itemRight ">
<view class="btn" @click.stop="Apply(item,index)"
:class="{'active':item.isApply,'btn-default':!item.isApply}">
{{item.isApply ?'使用中':'使用'}}
</view>
</view>
<view class="clear"></view>
</view>
</view>
</uni-swipe-action-item>
</view>
</view>
</uni-swipe-action>
</mescroll-uni>
<view class="footer">
<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>
</view>
<view class="txt">录制语音</view>
</view>
<view class="addItem" @click="gotoRecord('File')">
<view class="imgContent center">
<image class="img" src="/static/images/100/upload.png" mode="aspectFit"></image>
</view>
<view class="txt">上传语音</view>
</view>
<view class="addItem" @click="gotoRecord('Txt')">
<view class="imgContent center">
<image class="img" src="/static/images/100/txtToAudio.png" mode="aspectFit"></image>
</view>
<view class="txt">文字转语音</view>
</view>
</view>
<view class="editContent" :class="{'displayNone':!Status.isEdit}">
<view class="btn-del" @click.stop="delCheckList()">删除</view>
</view>
</view>
<MessagePopup :visible="Status.Pop.showPop" :type="Status.Pop.popType" :bgColor="Status.Pop.bgColor"
:borderColor="Status.Pop.borderColor" :textColor="Status.Pop.textColor"
:buttonBgColor="Status.Pop.buttonBgColor" :buttonTextColor="Status.Pop.buttonTextColor"
:iconUrl="Status.Pop.iconUrl" :message="Status.Pop.message" :buttonText="Status.Pop.buttonText"
@buttonClick="HidePop" :visiblePrompt="Status.Pop.visiblePrompt" :promptTitle="Status.Pop.promptTitle"
v-model="Status.Pop.modelValue" @closePop="closePop" :buttonCancelText="Status.Pop.buttonCancelText"
:showCancel="Status.Pop.showCancel" @cancelPop="closePop" :showSlot="Status.Pop.showSlot">
<view class="popup-prompt">
<input type="text" class="popup-prompt-input" placeholder="请输入名称" v-model="cEdit.fileNameExt" />
</view>
</MessagePopup>
<!-- <view class="displayNone">
<audio :src="cPlay.src" :id="cPlay.Id" :name="cPlay.name" author="">
</view> -->
<global-loading ref="loading"></global-loading>
</view>
</template>
<script>
var eventChannel = null;
var these = null;
var ble = null;
var innerAudioContext = null;
var timeout = null;
import MescrollUni from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-uni.vue'
import BleTool from '@/utils/BleHelper.js'
import {
deviceVoliceList,
videRenameAudioFile,
deviceDeleteAudioFile
} from '@/api/100J/HBY100-J.js'
import {
showLoading,
hideLoading,
updateLoading
} from '@/utils/loading.js'
import Common from '@/utils/Common.js'
export default {
components: {
MescrollUni
},
data() {
return {
mescroll: null,
Status: {
isEdit: false,
playState: '',
playPath: '',
Pop: {
showPop: false, //是否显示弹窗
popType: 'custom',
bgColor: '#383934bd',
borderColor: '#BBE600',
textColor: '#ffffffde',
buttonBgColor: '#BBE600',
buttonTextColor: '#232323DE',
iconUrl: '',
message: '您确定要这样做吗?',
buttonText: '确定',
clickEvt: '',
visiblePrompt: false,
promptTitle: '设备名称',
modelValue: '',
visibleClose: false,
okCallback: null,
buttonCancelText: '',
showCancel: false,
showSlot: false,
},
},
Options: [{
text: '重命名',
style: {
backgroundColor: '#E09319',
borderRadius: '16px',
width: '240rpx', // 初始宽度
},
},
{
text: '删除',
style: {
backgroundColor: 'rgb(240, 60, 60)',
borderRadius: '16px',
width: '240rpx', // 初始宽度
},
},
],
blue: {
},
device: {},
dataListA: [],
checkList: [],
downOption: {
auto: true
},
upOption: {
auto: false,
noMoreSize: 0,
offset: 50,
isLock: false,
empty: {
tip: '暂无数据',
hideScroll: false
}
},
page: 1, // 当前页码
size: 10, // 每页条数
total: 0, // 总数据量
loadedCount: 0,
loading: false,
finished: false,
mescrollHeight: 0,
cEdit: {
Id: "", //编号
fileNameExt: "", //名称
createTime: "", //创建时间
fileUrl: "", //本地地址
fileUrl: "", //网络地址
statu: "", //状态,是否公开
isApply: "" //是否使用中
},
cPlay: {
Id: "", //编号
fileNameExt: "", //名称
createTime: "", //创建时间
fileUrl: "", //本地地址
fileUrl: "", //网络地址
statu: "", //状态,是否公开
isApply: "" //是否使用中
}
}
},
onLoad() {
these = this;
this.getSystemInfoSyncH();
eventChannel = this.getOpenerEventChannel();
eventChannel.on('deviceData', (rec) => {
console.log(rec, 'ressss');
this.blue = rec.ble;
this.device = rec.data;
this.getinitData(rec.data.deviceId,true)
});
},
onBackPress() {
console.log("页面返回")
},
onUnload() {
console.log("页面卸载了");
},
methods: {
//语音管理列表
getinitData(val,isLoadMore = false) {
let data = {
deviceId: this.device.deviceId
}
deviceVoliceList(data).then((res) => {
if (res.code == 200) {
this.total = res.total;
const list = res.data.map(item => ({
...item,
createTime: item.createTime || Common.DateFormat(new Date(), "yyyy年MM月dd日")
}));
this.dataListA = list;
// 通知mescroll加载完成
if (this.mescroll) {
this.mescroll.endBySize(list.length, this.total);
}
}
})
},
createAudioPlayer(localPath) {
if (innerAudioContext) {
innerAudioContext.close();
console.log("1111111")
}
innerAudioContext = plus.audio.createPlayer({
src: localPath,
autoplay: false,
backgroundControl: false,
});
innerAudioContext.addEventListener('canplay', () => {
console.log("准备就绪,可以播放了");
this.Status.playState = 'ready';
this.cEdit.time = innerAudioContext.getDuration();
console.log("音频长度:", this.cEdit.time);
});
//开始播放
innerAudioContext.addEventListener("play", (res) => {
this.Status.playState = 'play';
console.log("播放中", res);
});
//暂停播放
innerAudioContext.addEventListener("pause", (res) => {
this.Status.playState = 'pause';
console.log("暂停了", res);
});
//播放结束
innerAudioContext.addEventListener("ended", (res) => {
this.Status.playState = 'ready';
console.log("播放结束", res);
});
innerAudioContext.addEventListener("seeked", (res) => {
console.log("seek完成了", res);
})
innerAudioContext.addEventListener("error", (ex) => {
console.log("播放错误", ex);
});
},
gotoRecord(type) {
let id = this.device.deviceId;
uni.navigateTo({
url: '/pages/100J/audioManager/Recording?pageType=' + type + '&id=' + id,
events: {
RecordOver: function(res) {
these.downCallback();
}
},
fail(ex) {
this.showMsg("资源不存在");
}
});
},
play(item, index) {
if (item.type === 'Txt') {
this.showMsg("文字转语音暂不支持播放")
return;
}
if (!item.fileUrl) {
this.showMsg("音频加载错误无法播放");
return;
}
if (this.Status.playPath === item.fileUrl) {
console.log("当前正在播放");
if (this.Status.playState === 'play') {
console.log("暂停播放:", item)
innerAudioContext.pause();
this.Status.playState = 'pause'
return;
} else if (this.Status.playState === 'pause') {
console.log("恢复播放:", item)
innerAudioContext.play();
this.Status.playState = 'play'
return;
}
} else {
console.log("准备播放:", item)
this.Status.playPath = item.fileUrl;
this.createAudioPlayer(item.fileUrl);
innerAudioContext.play();
}
},
handleSwipeClick(e, item, index) {
console.log(e.content.text, item)
switch (e.index) {
case 0:
this.ReName(item, index);
break
case 1:
this.delCheckList(item, index);
break
};
if (this.$refs.swipeAction) {
this.$refs.swipeAction.closeAll();
}
},
ReName(item, index) {
this.cEdit = Object.assign(this.cEdit, item);
let task = () => {
this.closePop();
let data = {
fileName: this.cEdit.fileNameExt,
deviceId: this.device.deviceId,
fileId: item.fileId
}
videRenameAudioFile(data).then((res) => {
console.log('res');
if (res.code == 200) {
uni.showToast({
title: res.msg,
icon: 'none',
duration: 1000
});
this.getinitData()
this.cEdit.fileNameExt = ''
// 关闭所有滑动项
this.$refs.swipeAction.closeAll();
}
})
}
this.showPop({
showPop: true, //是否显示弹窗
popType: 'custom',
bgColor: '#383934bd',
borderColor: '#BBE60096',
textColor: '#ffffffde',
buttonBgColor: '#BBE600',
buttonTextColor: '#232323DE',
iconUrl: '',
message: '',
buttonText: '确定',
clickEvt: '',
visiblePrompt: false,
promptTitle: '',
modelValue: '',
visibleClose: true,
okCallback: task,
showSlot: true,
buttonCancelText: '取消',
showCancel: true
});
},
// 删除
delCheckList(item, index) {
if (!this.checkList.length && !item) {
console.log("无文件删除");
return;
}
let task = () => {
let data = {
fileId: item.fileId,
deviceId: this.device.deviceId
}
deviceDeleteAudioFile(data).then((res) => {
if (res.code == 200) {
uni.showToast({
title: res.msg,
icon: 'none',
duration: 1000
});
this.getinitData()
// 关闭所有滑动项
this.$refs.swipeAction.closeAll();
}
})
}
this.showPop({
showPop: true, //是否显示弹窗
popType: 'custom',
bgColor: '#383934bd',
borderColor: '#e034344d',
textColor: '#ffffffde',
buttonBgColor: '#E03434',
buttonTextColor: '#232323DE',
iconUrl: '',
message: '删除后无法恢复,你确定要删除吗?',
buttonText: '确定',
clickEvt: '',
visiblePrompt: false,
promptTitle: '',
modelValue: '',
visibleClose: true,
okCallback: task,
showSlot: false,
buttonCancelText: '取消',
showCancel: true
})
},
isCheck(item, index) {
let f = this.checkList.find((v, vi) => {
return v === item.Id;
});
if (f) {
return true;
}
return false;
},
checkToggle(item, index) {
let f = null;
let i = null;
this.checkList.find((v, vi) => {
if (v === item.Id) {
f = v;
i = vi;
return true;
}
return false;
});
if (i !== null) {
this.checkList.splice(i, 1);
} else {
this.checkList.push(item.Id);
}
},
Apply(item, index) {
if (item.isApply) {
return;
}
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);
}
}
console.log("状态修改完成");
eventChannel.emit('audioApply', item.Id);
console.log("返回上一页");
uni.navigateBack();
}
},
closePop: function() {
this.Status.Pop.showPop = false;
if (this.Status.Pop.cancelCallback) {
this.Status.Pop.cancelCallback();
}
},
HidePop: function() {
this.Status.Pop.showPop = false;
if (this.Status.Pop.okCallback) {
this.Status.Pop.okCallback();
}
},
showPop: function(option) {
hideLoading(this);
let def = {
showPop: true, //是否显示弹窗
popType: 'custom',
bgColor: '#383934bd',
borderColor: '#BBE600',
textColor: '#ffffffde',
buttonBgColor: '#BBE600',
buttonTextColor: '#232323DE',
iconUrl: '',
message: '',
buttonText: '确定',
clickEvt: '',
visiblePrompt: false,
promptTitle: '',
modelValue: '',
visibleClose: false,
okCallback: null,
showSlot: false,
buttonCancelText: '',
showCancel: false,
}
let keys = Object.keys(def);
for (let i = 0; i < keys.length; i++) {
let key = keys[i];
if (key in option) {
continue;
}
this.Status.Pop[key] = def[key];
}
if (option) {
keys = Object.keys(option);
for (let i = 0; i < keys.length; i++) {
let key = keys[i];
this.Status.Pop[key] = option[key];
}
}
if (!option.borderColor) {
option.borderColor = '#BBE600';
option.buttonBgColor = '#BBE600';
}
these.Status.Pop.showPop = true;
},
showMsg(msg, isSucc) {
let icoUrl = '/static/images/6155/DeviceDetail/uploadErr.png';
let borderColor = "#e034344d";
let buttonBgColor = "#E03434";
if (isSucc) {
icoUrl = '/static/images/common/success.png';
borderColor = "#BBE600";
buttonBgColor = "#BBE600";
}
this.showPop({
message: msg,
iconUrl: icoUrl,
borderColor: borderColor,
buttonBgColor: buttonBgColor,
buttonText: '确定',
okCallback: null
});
},
mescrollInit(mescroll) {
this.mescroll = mescroll;
},
// 下拉刷新
downCallback() {
// 重置分页参数
this.page = 1;
this.getinitData(false);
},
// 上拉加载
upCallback() {
this.page += 1;
this.getinitData(true);
},
getSystemInfoSyncH() {
let sysInfo = uni.getSystemInfoSync();
// 底部 footer 高度约 220rpx + 120rpx = 340rpx转换为 px1rpx = sysInfo.pixelRatio / 750 * 屏幕宽度?不,直接用 rpx 转 px 公式)
const footerHeight = 500 * (sysInfo.screenWidth / 750); // rpx 转 px
console.log("footerHeight=", footerHeight);
this.mescrollHeight = sysInfo.screenHeight - footerHeight;
console.log("mescrollHeight=", this.mescrollHeight);
},
handleFile(item, index) {}
}
}
</script>
<style>
.popup-prompt {
width: 100%;
margin-top: 40rpx;
}
.popup-prompt-input {
width: 100%;
height: 80rpx;
line-height: 80rpx;
border: 1rpx solid #BBE60096;
border-radius: 10rpx;
padding: 0 20rpx;
margin-bottom: 30rpx;
font-size: 26rpx;
box-sizing: border-box;
text-align: left;
}
.li {
border-radius: 16rpx;
background: #1a1a1a;
margin-top: 24rpx;
width: 100%;
box-sizing: border-box;
padding-left: 15rpx;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
justify-content: space-between;
align-items: center;
}
.li .itemMain {}
.li .item {
width: 100%;
height: 200rpx;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
justify-content: space-between;
align-items: center;
}
.li .itemMain {
width: 100%;
}
.li .itemMain.Edit {
width: calc(100% - 35rpx);
margin-left: 15rpx;
}
.item .itemLeft {
width: calc(100% - 120rpx);
}
.item .itemRight {
width: 120rpx;
}
.li .btn {
width: 100rpx;
height: 50rpx;
border-radius: 30rpx;
text-align: center;
line-height: 50rpx;
font-family: PingFang SC;
font-size: 24rpx;
font-weight: 400;
}
.li .btn.btn-default {
background-color: #AED600;
color: #000000;
}
.li .btn.active {
background: #3a3a3a;
color: #ffffff99;
}
.item .itemLeft .title {
color: rgba(255, 255, 255, 0.87);
font-family: PingFang SC;
font-size: 32rpx;
font-weight: 400;
letter-spacing: 0.14rpx;
text-align: left;
}
.item .itemLeft .smallTitle {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
align-items: center;
justify-content: space-between;
width: calc(100% - 50rpx);
margin-top: 5rpx;
color: rgba(255, 255, 255, 0.6);
font-family: PingFang SC;
font-size: 24rpx;
font-weight: 400;
letter-spacing: 0.14px;
}
.item .itemLeft .img {
width: 30rpx;
height: 30rpx;
}
.itemIcon {
width: 40rpx;
height: 40rpx;
box-sizing: border-box;
border: 1px solid rgba(255, 255, 255, 0.4);
border-radius: 8rpx;
color: #00000000;
}
.itemIcon .img {
width: 28rpx;
height: 20rpx;
}
.itemIcon.check {
background-color: #BBE600;
color: #000000;
}
.footer {
width: 100%;
min-height: 220rpx;
height: auto;
position: fixed;
z-index: 99;
bottom: 0rpx;
left: 0rpx;
box-sizing: border-box;
border-radius: 16rpx 16rpx 0px 0px;
/* background: #000000; */
padding-bottom: 120rpx;
}
.footer .addContent {
height: 100%;
margin-top: 20rpx;
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
justify-content: space-evenly;
align-items: center;
}
.footer .addContent .addItem {
width: 140rpx;
height: 180rpx;
display: flex;
flex-wrap: wrap;
align-content: space-between;
justify-content: center;
align-items: center;
box-sizing: border-box;
}
.addItem .imgContent {
width: 120rpx;
height: 120rpx;
border-radius: 8px;
background: rgba(26, 26, 26, 1);
}
.addItem .imgContent .img {
width: 60rpx;
height: 52rpx;
}
.addItem .txt {
color: rgba(255, 255, 255, 0.87);
font-family: PingFang SC;
font-size: 26rpx;
font-weight: 400;
line-height: 40rpx;
letter-spacing: 0.14px;
text-align: center;
}
.footer .btn-del {
width: 100%;
height: 100rpx;
line-height: 100rpx;
border-radius: 180rpx;
background: rgba(224, 52, 52, 1);
color: rgba(255, 255, 255, 0.87);
font-family: PingFang SC;
font-size: 32rpx;
font-weight: 400;
letter-spacing: 12rpx;
text-align: center;
}
.editContent {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
align-content: center;
align-items: flex-start;
width: 100%;
height: 100%;
justify-content: flex-end;
}
</style>

File diff suppressed because it is too large Load Diff

View File

@ -1,5 +1,5 @@
import config from '../config/index.js';
export const env = 'production'; //production development //开发of线上 改这里就行
export const env = 'development'; //production development //开发of线上 改这里就行
const BASE = config[env];
const request = (options) => {
console.log("options" + JSON.stringify(options), BASE.BASE_URL)