You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
407 lines
9.4 KiB
407 lines
9.4 KiB
<template> |
|
<view class="container"> |
|
<uni-forms ref="form" :modelValue="form" :rules="rules" class="padding-wrap" label-position="top"> |
|
<view class="user-box"> |
|
<view class="user-avatar"> |
|
<image class="user-avatar-image" src="@/static/header.png" mode="widthFix"></image> |
|
</view> |
|
<view class="user-info"> |
|
<view class="user-info-name">1001</view> |
|
<view class="user-info-group">1组</view> |
|
</view> |
|
</view> |
|
<!-- 语音录入记录 --> |
|
<view class="voice-rocord-box" v-for="(item,index) in voicePathList" :key="'voice'+index"> |
|
<view class="voice-box" @click="playVoice(index)"> |
|
<!-- <view class="voice-mins">60”</view> --> |
|
</view> |
|
<view class="voice-del" @click="delRecord(index)">删除</view> |
|
</view> |
|
<uni-forms-item label="当前位置" label-width="200upx"> |
|
<text>{{form.buildId}}号楼{{form.floorNo}}楼 x:{{form.latidute}} y:{{form.longidute}}</text> |
|
</uni-forms-item> |
|
<view class="tab-switch" @click="positionType = positionType == 1 ? 0 : 1"> |
|
<view class="tab-btn" :class="positionType == 1 ? 'tab-btn active' : 'tab-btn'"> |
|
<view class="tab-btn-item"></view> |
|
</view> |
|
<view class="tab-label">使用常用报警位置</view> |
|
</view> |
|
<uni-forms-item v-if="positionType == 1" label="常用报警位置" label-width="200upx"> |
|
<!-- <uni-data-select v-model="position" :localdata="positionList" placeholder="请选择常用报警位置"></uni-data-select> --> |
|
<text>{{locationInfo.buildId}}号楼{{locationInfo.floorNo}}楼 x:{{locationInfo.latidute}} |
|
y:{{locationInfo.longidute}}</text> |
|
</uni-forms-item> |
|
<uni-forms-item label="应急预案选择" label-width="200upx"> |
|
<uni-data-select v-model="position" :localdata="positionList" placeholder="请选择常应急预案报警类型"></uni-data-select> |
|
</uni-forms-item> |
|
<view style="text-align: right;"> |
|
<view class="submit-btn" @click="submit">上报</view> |
|
</view> |
|
</uni-forms> |
|
<!-- 录音按钮 --> |
|
<view class="voice-btn-box"> |
|
<view class="btn-box" @click="doRecord"> |
|
<view class="btn-box-dot"></view> |
|
</view> |
|
<view class="btn-text" v-if="!isStart">点击录音</view> |
|
<view class="btn-text" v-else @click="endRecord">结束录音</view> |
|
</view> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
export default { |
|
data() { |
|
return { |
|
form: { |
|
type: '1', |
|
employeeId: '', |
|
deviceId: '', |
|
buildId: '', |
|
floorNo: '', |
|
longidute: '', |
|
latidute: '', |
|
planTypeId: '', |
|
planTypeName: '', |
|
}, |
|
positionType: 1, //是否使用常用报警位置 |
|
positionList: [], //常用报警点 |
|
position: '', |
|
rules: { |
|
longidute: { |
|
rules: [{ |
|
required: true, |
|
errorMessage: "请输入上报经度" |
|
}] |
|
}, |
|
latidute: { |
|
rules: [{ |
|
required: true, |
|
errorMessage: "请输入上报维度" |
|
}] |
|
} |
|
}, |
|
voicePathList: [{ |
|
name: 'file0', |
|
uri: '/upload/2023/07/25/472cdb268b414dcd92be7bc3993fee6b_1690278782702.mp3' |
|
}], //录音记录 |
|
voices: ['/upload/2023/07/25/472cdb268b414dcd92be7bc3993fee6b_1690278782702.mp3'], |
|
userInfo: {}, |
|
locationInfo: {}, |
|
isStart: false, //是否开始录音 |
|
recorderManager: {}, |
|
innerAudioContext: {}, |
|
baseUrl: '192.168.3.32:1888' |
|
} |
|
}, |
|
onLoad() { |
|
this.recorderManager = uni.getRecorderManager(); |
|
this.innerAudioContext = uni.createInnerAudioContext(); |
|
this.innerAudioContext.autoplay = true; |
|
this.recorderManager.onStop((res) => { |
|
console.log('recorder stop' + JSON.stringify(res)); |
|
this.voicePathList.push({ |
|
name: 'file' + (this.voicePathList.length > 0 ? this.voicePathList.length - 1 : 0), |
|
uri: res.tempFilePath |
|
}); |
|
}) |
|
let userInfo = uni.getStorageSync('mobileInfo'); |
|
let locationInfo = uni.getStorageSync('locationInfo'); |
|
if (userInfo) { |
|
this.userInfo = JSON.parse(userInfo); |
|
this.form.employeeId = this.userInfo.employeeId; |
|
this.form.deviceId = this.userInfo.employeeId; |
|
} |
|
if (locationInfo) { |
|
this.locationInfo = JSON.parse(locationInfo); |
|
this.form.planTypeId = locationInfo.planId; |
|
this.form.planTypeName = locationInfo.planTypeName; |
|
} |
|
}, |
|
methods: { |
|
//录音 |
|
doRecord() { |
|
if (!this.isStart) { |
|
console.log('开始录音'); |
|
this.isStart = true; |
|
this.recorderManager.start(); |
|
} |
|
}, |
|
endRecord() { |
|
console.log('录音结束'); |
|
this.recorderManager.stop(); |
|
this.isStart = false; |
|
}, |
|
//删除录音 |
|
delRecord(index) { |
|
this.voicePathList = this.voicePathList.splice(index, 1); |
|
}, |
|
//录音播放 |
|
playVoice(index) { |
|
console.log('播放录音'); |
|
this.innerAudioContext.src = this.voicePathList[index].uri; |
|
this.innerAudioContext.play(); |
|
}, |
|
submit() { |
|
this.$refs.form.validate().then(res => { |
|
if (this.voicePathList.length == 0) { |
|
uni.showToast({ |
|
title: '请先上传语音', |
|
icon: 'none' |
|
}) |
|
return; |
|
} |
|
console.log(this.voicePathList) |
|
uni.uploadFile({ |
|
url: 'http://192.168.3.32:81/appData/putFile', |
|
files: this.voicePathList, |
|
formData: this.form, |
|
success: (res) => { |
|
let _data = JSON.parse(res.data); |
|
if (_data.code == 200) { |
|
uni.showToast({ |
|
title: '成功' |
|
}); |
|
this.voices = _data.data; |
|
this.reportIot(); |
|
} else { |
|
uni.showToast({ |
|
title: _data.msg, |
|
icon: 'fail' |
|
}); |
|
} |
|
}, |
|
fail: (err) => { |
|
console.log(err) |
|
}, |
|
complete: (data) => { |
|
console.log(data) |
|
} |
|
}) |
|
}).catch(err => { |
|
console.log('表单错误信息：', err); |
|
uni.showToast({ |
|
title: err |
|
}); |
|
}) |
|
} |
|
}, |
|
//消息上报 |
|
reportIot() { |
|
let _arr = []; |
|
this.voices.forEach(item => { |
|
_arr.push(this.baseUrl + item); |
|
}) |
|
uni.request({ |
|
url: '', |
|
method: 'POST', |
|
data: { |
|
"deviceId": this.form.deviceId, |
|
"onlineStatus": 1, |
|
"latitude": this.form.latidute, |
|
"longitude": this.form.longidute, |
|
"reportTime": new Date().getTime(), |
|
"statusName": "语音上报", |
|
"statusDesc": JSON.stringify(_arr), |
|
"statusCode": "-", |
|
"statusValue": "-" |
|
}, |
|
success: (res) => { |
|
let _data = JSON.parse(res.data); |
|
if (_data.code == 200) { |
|
uni.showToast({ |
|
title: '成功' |
|
}); |
|
} else { |
|
uni.showToast({ |
|
title: _data.msg, |
|
icon: 'fail' |
|
}); |
|
} |
|
} |
|
}) |
|
} |
|
} |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
page, |
|
.container { |
|
min-height: 100vh; |
|
background-color: #FFFFFF; |
|
|
|
/deep/.uni-forms-item__label { |
|
color: #031945; |
|
font-size: 28upx; |
|
font-family: PingFang SC-Bold, PingFang SC; |
|
font-weight: bold; |
|
} |
|
|
|
/deep/.uni-select { |
|
height: 99upx; |
|
background: #F6F8FA; |
|
border-radius: 30upx; |
|
padding: 0 15upx 0 30upx; |
|
border: 0; |
|
} |
|
|
|
/deep/.uni-select__input-box { |
|
height: 99upx; |
|
} |
|
|
|
/deep/.uni-select__input-placeholder { |
|
color: #C4C7CB; |
|
font-size: 28upx; |
|
font-family: PingFang SC-Regular, PingFang SC; |
|
font-weight: 400; |
|
} |
|
|
|
/deep/.uni-icons { |
|
color: #C4C7CB; |
|
font-size: 28upx; |
|
} |
|
} |
|
|
|
.padding-wrap { |
|
padding: 30upx; |
|
} |
|
|
|
.voice-rocord-box { |
|
display: flex; |
|
align-items: center; |
|
justify-content: space-between; |
|
margin-bottom: 40upx; |
|
|
|
.voice-box { |
|
display: flex; |
|
align-items: center; |
|
justify-content: flex-end; |
|
width: 260px; |
|
height: 90upx; |
|
background: #338AF8 url(@/static/voive_bg.png) 40upx 28upx no-repeat; |
|
background-size: 226upx 34upx; |
|
border-radius: 100upx; |
|
|
|
.voice-mins { |
|
color: #FFFFFF; |
|
font-size: 28upx; |
|
font-family: Arial-Regular, Arial; |
|
font-weight: 400; |
|
margin-right: 40upx; |
|
} |
|
} |
|
|
|
.voice-del { |
|
color: #B6B8BB; |
|
font-size: 28upx; |
|
font-family: PingFang SC-Regular, PingFang SC; |
|
font-weight: 400; |
|
margin-left: 20upx; |
|
} |
|
} |
|
|
|
.submit-btn { |
|
display: inline-block; |
|
width: 140upx; |
|
color: #338AF8; |
|
font-size: 28upx; |
|
font-family: PingFang SC-Regular, PingFang SC; |
|
font-weight: 400; |
|
line-height: 66upx; |
|
text-align: center; |
|
background: #E5F0FF; |
|
border-radius: 20upx; |
|
border: 1px solid #338AF8; |
|
} |
|
|
|
.tab-switch { |
|
display: flex; |
|
justify-content: flex-end; |
|
align-items: center; |
|
|
|
.tab-btn { |
|
width: 80upx; |
|
height: 40upx; |
|
border-radius: 20upx; |
|
background-color: #eee; |
|
margin-right: 10upx; |
|
|
|
.tab-btn-item { |
|
float: left; |
|
width: 36upx; |
|
height: 36upx; |
|
border-radius: 18upx; |
|
background-color: #FFFFFF; |
|
margin: 2upx; |
|
} |
|
|
|
&.active { |
|
background-color: #338AF8; |
|
|
|
.tab-btn-item { |
|
float: right; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.user-box { |
|
display: flex; |
|
flex-direction: row; |
|
align-items: center; |
|
margin-bottom: 40upx; |
|
|
|
.user-avatar { |
|
display: block; |
|
margin-right: 26upx; |
|
|
|
.user-avatar-image { |
|
width: 90upx; |
|
height: 90upx; |
|
} |
|
} |
|
|
|
.user-info { |
|
flex: 1; |
|
color: #031945; |
|
font-size: 28upx; |
|
line-height: 40upx; |
|
font-family: PingFang SC-Bold, PingFang SC; |
|
font-weight: bold; |
|
|
|
.user-info-group { |
|
color: #90959D; |
|
} |
|
} |
|
} |
|
|
|
// 录音按钮 |
|
.voice-btn-box { |
|
text-align: center; |
|
|
|
.btn-box { |
|
display: inline-block; |
|
width: 190upx; |
|
height: 190upx; |
|
background: #E5F0FF; |
|
border-radius: 100upx; |
|
margin: 40upx auto; |
|
|
|
.btn-box-dot { |
|
display: inline-block; |
|
width: 126upx; |
|
height: 126upx; |
|
background: #338AF8; |
|
border-radius: 63upx; |
|
margin: 32upx; |
|
} |
|
} |
|
|
|
.btn-text { |
|
color: #031945; |
|
font-size: 28upx; |
|
font-family: PingFang SC-Bold, PingFang SC; |
|
font-weight: bold; |
|
} |
|
} |
|
</style> |