FE-lab-xcx/pages_manage/views/laboratory/voiceBroadcast.vue

<!-- 语音广播 -->
<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="imagesUrl('commonality/icon_sskz_zc.png')" v-if="!item.type">
					<img :src="imagesUrl('commonality/icon_sskz_xz.png')" v-if="item.type">
					{{item.deviceName}}
				</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 {
		iotAppSpeakerFindHorn,
		iotAppSpeakerPlayVoice
	} from '@/pages_manage/api/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: {},
				subId: '',
				floorId: '',
			}
		},
		created() {

		},
		mounted() {
			this.$set(this, 'subId', this.subjectData.subId);
			this.$set(this, 'floorId', this.subjectData.floorId);
			this.iotAppSpeakerFindHorn();
		},
		methods: {
			// 返回按钮
			backPage() {
				this.$parent.buttonClick('broadcastClose', '');
			},
			//获取喇叭列表
			async iotAppSpeakerFindHorn() {
				let self = this;
				let obj = {
					subId: self.subId,
					floorId: self.floorId,
				};
				const {
					data
				} = await iotAppSpeakerFindHorn(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
				}
				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.liveType = false;
					this.sendLock = true; //触发了上滑取消发送，上锁
				} else {
					wx.showToast({
						title: "正在录音，上划取消发送",
						icon: "none",
						duration: 60000
					});
					this.liveType = true;
					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 + '/system/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)
							let url = 'http://' + uni.getStorageSync('mqttIntranetUrl').split(':')[0] + '/' + res.data.url
							self.iotAppSpeakerPlayVoice(url);
						} else {
							uni.showToast({
								title: res.msg,
								icon: "none",
								mask: true,
								duration: 2000
							});
						}
					},
					fail: err => {
						uni.hideLoading()
					},
					complete: () => {}
				});
			},
			//发送语音
			async iotAppSpeakerPlayVoice(text) {
				let self = this;
				let list = [];
				for (let i = 0; i < self.trumpetList.length; i++) {
					if (self.trumpetList[i].type) {
						list.push(self.trumpetList[i].deviceNo)
					}
				}
				let obj = {
					deviceNo: list.join(','),
					voiceUrls: text,
					cycle: 1,
					level: 1000,
				}
				const {
					data
				} = await iotAppSpeakerPlayVoice(obj)
				if (data.code == 200) {
					uni.showToast({
						title: '发送成功',
						icon: "none",
						mask: true,
						duration: 2000
					});
				}
			},
		},
	}
</script>

<style lang="stylus" scoped>
	@import '@/api/request/imagesUrl.styl';

	.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_b {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #999999;
					line-height: 24rpx;
					text-align: center;
					margin-top: 14rpx;
				}
				.broadcast_m_t_back_a {
					background: url($imagesUrl+'commonality/icon_sskz_skfs.png') no-repeat center 0px;
					background-size: 100%;
					color: #FFFFFF;
				}
				
				.broadcast_m_t_back_b {
					background: url($imagesUrl+'commonality/icon_sskz_azsh.png') no-repeat center 0px;
					background-size: 100%;
					color: #0183FA;
				}
			}

			/* 疏散按钮 */
			.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>