FE-lab-xcx/pages_manage/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="@/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>