|
|
@@ -0,0 +1,426 @@
|
|
|
+<!-- 语音广播 -->
|
|
|
+<template>
|
|
|
+ <view class="voiceBroadcast">
|
|
|
+ <view class="null-box" @click="backPage()"></view>
|
|
|
+ <!-- 语音广播-执行疏散 -->
|
|
|
+ <view class="broadcast">
|
|
|
+ <view class="broadcast_t">语音广播<label>选择喇叭位置</label></view>
|
|
|
+ <!-- 按钮部分 -->
|
|
|
+ <view class="trumpet-max-box">
|
|
|
+ <view @click="trumpetClick(index)" class="trumpet-for-box"
|
|
|
+ :class="item.type?'trumpet-color-a':'trumpet-color-b'" v-for="(item,index) in trumpetList"
|
|
|
+ :key="index">
|
|
|
+ <img src="@/images/basicsModules/icon_sskz_zc.png" v-if="!item.type">
|
|
|
+ <img src="@/images/basicsModules/icon_sskz_xz.png" v-if="item.type">
|
|
|
+ {{item.name}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="broadcast_m">
|
|
|
+ <view class="broadcast_m_t"
|
|
|
+ :class="liveType?'broadcast_m_t_back_a':'broadcast_m_t_back_b'"
|
|
|
+ @longpress.stop="recordButton"
|
|
|
+ @touchmove.stop="cancelButton"
|
|
|
+ @touchend.stop="sendButton"
|
|
|
+ >
|
|
|
+ {{liveType?'松开发送':'按住说话'}}
|
|
|
+ </view>
|
|
|
+ <view class="broadcast_m_b" v-if="!liveType">按住说话，录入广播内容</view>
|
|
|
+ <view class="broadcast_m_b" v-if="liveType">松开发送，向上滑动取消发送</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+ import {} from '@/api/basicsModules/index.js'
|
|
|
+ import { config } from '@/api/request/config.js'
|
|
|
+ export default {
|
|
|
+ name: "voiceBroadcast",
|
|
|
+ props: {
|
|
|
+ subjectData: {},
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ baseUrl:config.base_url,
|
|
|
+ //喇叭数据
|
|
|
+ trumpetList: [],
|
|
|
+ //广播相关
|
|
|
+ liveType: false,
|
|
|
+ sendLock: true, //发送锁，当为true时上锁，false时解锁发送
|
|
|
+ recorderManager: wx.getRecorderManager(),
|
|
|
+ isEvacuate: true, //疏散按钮控制，当为true时候执行疏散
|
|
|
+ //滑动记录
|
|
|
+ startPoint: {},
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 返回按钮
|
|
|
+ backPage(){
|
|
|
+ this.$parent.buttonClick('broadcastClose','');
|
|
|
+ },
|
|
|
+ //获取喇叭列表
|
|
|
+ async getDeviceListBySub() {
|
|
|
+ let _this=this;
|
|
|
+ let obj = {
|
|
|
+ subId: _this.subId,
|
|
|
+ floorId: _this.itemData.subAddrr.floorId,
|
|
|
+ page: 1,
|
|
|
+ pageSize: 100,
|
|
|
+ };
|
|
|
+ const {data} = await getDeviceListBySub(obj)
|
|
|
+ if (data.code == 200) {
|
|
|
+ for (let i = 0; i < data.data.length; i++) {
|
|
|
+ data.data[i].type = false;
|
|
|
+ }
|
|
|
+ this.$set(this, 'trumpetList', data.data)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //点击选择喇叭
|
|
|
+ trumpetClick(index) {
|
|
|
+ this.trumpetList[index].type = !this.trumpetList[index].type;
|
|
|
+ },
|
|
|
+ //录制
|
|
|
+ recordButton(e) {
|
|
|
+ console.log("按下")
|
|
|
+ let self = this;
|
|
|
+ let num = 0;
|
|
|
+ for (let i = 0; i < self.trumpetList.length; i++) {
|
|
|
+ if (self.trumpetList[i].type) {
|
|
|
+ num++
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (num == 0) {
|
|
|
+ uni.showToast({
|
|
|
+ title: '请选择喇叭',
|
|
|
+ icon: "none",
|
|
|
+ mask: true,
|
|
|
+ duration: 2000
|
|
|
+ });
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.liveType = true;
|
|
|
+ console.log('录制', e)
|
|
|
+ this.startPoint = e.touches[0]; //记录长按时开始点信息，后面用于计算上划取消时手指滑动的距离。
|
|
|
+ const options = {
|
|
|
+ duration: 10000,
|
|
|
+ sampleRate: 16000,
|
|
|
+ numberOfChannels: 1,
|
|
|
+ encodeBitRate: 48000,
|
|
|
+ format: 'mp3',
|
|
|
+ frameSize: 50
|
|
|
+ }
|
|
|
+ this.recorderManager.start(options); //开始录音
|
|
|
+ this.recorderManager.onStart(() => {
|
|
|
+ console.log('recorder start')
|
|
|
+ })
|
|
|
+ this.recorderManager.onError((res) => {
|
|
|
+ console.log(res);
|
|
|
+ })
|
|
|
+ wx.showToast({
|
|
|
+ title: "正在录音，上划取消发送",
|
|
|
+ icon: "none",
|
|
|
+ duration: 60000 //先定义个60秒，后面可以手动调用wx.hideToast()隐藏
|
|
|
+ });
|
|
|
+ this.sendLock = false; //长按时是不上锁的。
|
|
|
+ },
|
|
|
+ //取消
|
|
|
+ cancelButton(e) {
|
|
|
+ console.log("移动")
|
|
|
+ let self = this;
|
|
|
+ let num = 0;
|
|
|
+ for (let i = 0; i < self.trumpetList.length; i++) {
|
|
|
+ if (self.trumpetList[i].type) {
|
|
|
+ num++
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (num == 0) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.liveType = false;
|
|
|
+ console.log('取消', e)
|
|
|
+ let moveLenght = e.touches[e.touches.length - 1].clientY - this.startPoint.clientY; //移动距离
|
|
|
+ if (Math.abs(moveLenght) > 50) {
|
|
|
+ wx.showToast({
|
|
|
+ title: "松开手指,取消发送",
|
|
|
+ icon: "none",
|
|
|
+ duration: 60000
|
|
|
+ });
|
|
|
+ this.sendLock = true; //触发了上滑取消发送，上锁
|
|
|
+ } else {
|
|
|
+ wx.showToast({
|
|
|
+ title: "正在录音，上划取消发送",
|
|
|
+ icon: "none",
|
|
|
+ duration: 60000
|
|
|
+ });
|
|
|
+ this.sendLock = false; //上划距离不足，依然可以发送，不上锁
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //发送
|
|
|
+ sendButton(e) {
|
|
|
+ console.log("松开")
|
|
|
+ let self = this;
|
|
|
+ let num = 0;
|
|
|
+ for (let i = 0; i < self.trumpetList.length; i++) {
|
|
|
+ if (self.trumpetList[i].type) {
|
|
|
+
|
|
|
+ num++
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (num == 0) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.liveType = false;
|
|
|
+ console.log('发送', e)
|
|
|
+ wx.hideToast(); //结束录音、隐藏Toast提示框
|
|
|
+ this.recorderManager.stop(); //结束录音
|
|
|
+ this.recorderManager.onStop((res) => {
|
|
|
+ if (!this.sendLock) {
|
|
|
+ console.log('1', this.recorderManager)
|
|
|
+ this.uploadImg(res.tempFilePath);
|
|
|
+ }
|
|
|
+ console.log('停止录音', res.tempFilePath)
|
|
|
+ console.log("sendLock", this.sendLock);
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //上传MP3
|
|
|
+ async uploadImg(tempFilePaths) {
|
|
|
+ var self = this;
|
|
|
+ uni.uploadFile({
|
|
|
+ url: config.base_url + '/base/file/upload', //仅为示例，非真实的接口地址
|
|
|
+ header: {
|
|
|
+ 'Authorization': uni.getStorageSync('token')
|
|
|
+ },
|
|
|
+ filePath: tempFilePaths,
|
|
|
+ name: 'file',
|
|
|
+ formData: {
|
|
|
+ 'user': 'test'
|
|
|
+ },
|
|
|
+ success: (uploadFileRes) => {
|
|
|
+ let res = JSON.parse(uploadFileRes.data);
|
|
|
+ if (res.code == 200) {
|
|
|
+ console.log("上传成功", res)
|
|
|
+ self.textParseUrlIps(config.base_url + '/' + res.data.url);
|
|
|
+ } else {
|
|
|
+ uni.showToast({
|
|
|
+ title: res.msg,
|
|
|
+ icon: "none",
|
|
|
+ mask: true,
|
|
|
+ duration: 2000
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ fail: err => {
|
|
|
+ uni.hideLoading()
|
|
|
+ },
|
|
|
+ complete: () => {}
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //发送语音
|
|
|
+ async textParseUrlIps(text) {
|
|
|
+ let self = this;
|
|
|
+ let newList = [];
|
|
|
+ for (let i = 0; i < self.trumpetList.length; i++) {
|
|
|
+ if (self.trumpetList[i].type) {
|
|
|
+ let obj = {
|
|
|
+ sn: self.trumpetList[i].deviceSn,
|
|
|
+ port: self.trumpetList[i].port,
|
|
|
+ deviceIp: self.trumpetList[i].deviceIp,
|
|
|
+ type: "",
|
|
|
+ name: "",
|
|
|
+ speed: "",
|
|
|
+ params: {
|
|
|
+ tid: "",
|
|
|
+ vol: self.trumpetList[i].deviceVol,
|
|
|
+ urls: []
|
|
|
+ }
|
|
|
+ };
|
|
|
+ newList.push(obj);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ const {
|
|
|
+ data
|
|
|
+ } = await textParseUrlIps(newList, text)
|
|
|
+ if (data.code == 200) {
|
|
|
+ uni.showToast({
|
|
|
+ title: '发送成功',
|
|
|
+ icon: "none",
|
|
|
+ mask: true,
|
|
|
+ duration: 2000
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="stylus" scoped>
|
|
|
+ .voiceBroadcast{
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ z-index: 10;
|
|
|
+ background: rgba(0, 0, 0, 0.2);
|
|
|
+ .null-box {
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+ /* 语音广播-执行疏散 */
|
|
|
+ .broadcast {
|
|
|
+ width: 100%;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-top-left-radius: 20rpx;
|
|
|
+ border-top-right-radius: 20rpx;
|
|
|
+ padding:22rpx 30rpx 30rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ .broadcast_t {
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #333333;
|
|
|
+ line-height: 30rpx;
|
|
|
+
|
|
|
+ >label {
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #999999;
|
|
|
+ line-height: 30rpx;
|
|
|
+ margin-left: 16rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .trumpet-max-box {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+ margin-top: 22rpx;
|
|
|
+ flex-wrap: wrap;
|
|
|
+
|
|
|
+ .trumpet-for-box {
|
|
|
+ display: inline-block;
|
|
|
+ width: auto;
|
|
|
+ height: 60rpx;
|
|
|
+ line-height: 60rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ text-align: center;
|
|
|
+ cursor: pointer;
|
|
|
+ overflow: hidden;
|
|
|
+ border: 1rpx solid #E0E0E0;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ color: #E0E0E0;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ margin-right: 20rpx;
|
|
|
+ margin-bottom: 10rpx;
|
|
|
+ padding: 0 12rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ >img {
|
|
|
+ width: 36rpx;
|
|
|
+ height: 34rpx;
|
|
|
+ margin: 12rpx 20rpx 0 25rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .trumpet-color-a {
|
|
|
+ border: 1px solid #0183FA;
|
|
|
+ color: #0183FA;
|
|
|
+ }
|
|
|
+
|
|
|
+ .trumpet-color-b {
|
|
|
+ border: 1px solid #CCCCCC;
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .broadcast_m {
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ .broadcast_m_t {
|
|
|
+ width: 142rpx;
|
|
|
+ height: 142rpx;
|
|
|
+ margin: 30rpx 0 0 258rpx;
|
|
|
+ position: relative;
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ line-height: 170rpx;
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ >img {
|
|
|
+ width: 142rpx;
|
|
|
+ height: 142rpx;
|
|
|
+ position: absolute;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ >label {
|
|
|
+ width: 100%;
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #0183FA;
|
|
|
+ line-height: 24rpx;
|
|
|
+ display: inline-block;
|
|
|
+ text-align: center;
|
|
|
+ position: absolute;
|
|
|
+ top: 76rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 按下 */
|
|
|
+ .press_color {
|
|
|
+ color: #FFFFFF;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 松开 */
|
|
|
+ .slip_color {
|
|
|
+ color: #0183FA;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .broadcast_m_t_back_a {
|
|
|
+ background: url(@/images/basicsModules/icon_sskz_skfs.png);
|
|
|
+ background-size: 100%;
|
|
|
+ color: #FFFFFF;
|
|
|
+ }
|
|
|
+
|
|
|
+ .broadcast_m_t_back_b {
|
|
|
+ background: url(@/images/basicsModules/icon_sskz_azsh.png);
|
|
|
+ background-size: 100%;
|
|
|
+ color: #0183FA;
|
|
|
+ }
|
|
|
+
|
|
|
+ .broadcast_m_b {
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #999999;
|
|
|
+ line-height: 24rpx;
|
|
|
+ text-align: center;
|
|
|
+ margin-top: 14rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 疏散按钮 */
|
|
|
+ .evacuation-button-box {
|
|
|
+ width: 650rpx;
|
|
|
+ height: 100rpx;
|
|
|
+ background: #0183FA;
|
|
|
+ color: #fff;
|
|
|
+ text-align center;
|
|
|
+ line-height: 100rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ margin: 88rpx auto 0;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
heyang
