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

<!-- 查看监控 -->
<template>
	<view id="monitor">
		<view class="name-box">{{itemData.name}}</view>
		<view class="address-box">{{itemData.address}}</view>
		<view class="max-viode-box">
			<video v-for="(item,index) in urlList" :key="index" :id="urlList.id" :src="item.url" :poster="videoCover"
				:custom-cache='false' :autoplay="true" :controls="false" :enable-danmu="false" :muted="false"
				:show-fullscreen-btn="true" :show-center-play-btn="false" :show-play-btn="false" @error="videoErrorCallback">
			</video>
		</view>
		<view class="gb-box">
			<!-- <view class="radio-box">
        <view class="radio-title">播报方式</view>
        <radio-group @change="radioChange" class="radio-max-button">
          <label class="radio-button" v-for="(item, index) in items" :key="item.value">
            <radio :value="item.value" color="#007AFF" :checked="item.value == current" />{{item.name}}
          </label>
        </radio-group>
      </view> -->
			<!-- <view class="input-box" v-if="current == 1">
        <view class="textarea-title">广播内容</view>
        <textarea placeholder="请输入广播内容" v-model="text" maxlength="100"></textarea>
        <view class="input-button" @click="voiceButton">确定</view>
      </view> -->
			<view class="device-box" v-if="current == 2 && trumpetList[0]">
				<view class="device-title">广播设备</view>
				<view class="device-for-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">
						<view class="trumpet-for-min-box">
							<img :src="imagesUrl('commonality/icon_sskz_zc.png')" v-if="!item.type" />
							<img :src="imagesUrl('commonality/icon_sskz_xz.png')" v-if="item.type" />
							<view>{{item.name}}</view>
						</view>
					</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 class="null-device-box" v-if="!trumpetList[0]">
				暂无广播设备
			</view>
		</view>
	</view>
</template>

<script>
	import {
		config
	} from '@/api/request/config.js'
	import {
		getChannels,
		GetStartList,
		getDeviceListBySub,
		textParseUrlIps,
		voice
	} from '@/api/apiDemo/index.js'
	export default {
		data() {
			return {
				videoCover: uni.getStorageSync('videoCover'),
				itemData: {},
				urlList: [],
				deptId: "",
				text: "",
				type: "",
				items: [{
						name: "文字",
						value: "1"
					},
					{
						name: "音频",
						value: "2"
					},
				],

				current: 2,
				trumpetList: [],
				//滑动记录
				startPoint: {},
				//广播相关
				liveType: false,
				sendLock: true, //发送锁，当为true时上锁，false时解锁发送
				recorderManager: wx.getRecorderManager(),
			}
		},
		onLoad(option) {
			this.itemData = JSON.parse(decodeURIComponent(option.item));
			this.deptId = JSON.parse(decodeURIComponent(option.deptId));
			console.log(this.itemData)
			console.log(this.deptId)


			this.GetVideoList();
			this.getDeviceListBySub();
			// this.getChannels();
		},
		onShow() {
			// wx.getSystemInfo({
			//   success (res) {
			//     console.log("res",res)
			//   }
			// })
		},
		methods: {
			voiceButton() {
				let self = this;
				if (!this.text) {
					uni.showToast({
						title: '请输入广播内容',
						icon: "none",
						mask: true,
						duration: 2000
					});
					return
				}
				uni.showModal({
					// title: '确认要退出吗?',
					content: '确认播放吗?',
					cancelColor: "#999",
					confirmColor: "#0183FA",
					success: function(res) {
						if (res.confirm) {
							self.voice();
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			//播放
			async voice() {
				let obj = {
					txt: this.text,

					type: '1'
				};
				const {
					data
				} = await voice(this.itemData.id, obj);
				if (data.code == 200) {
					this.text = "";
					uni.showToast({
						title: '播放成功',
						icon: "none",
						mask: true,
						duration: 2000
					});
				}
			},
			//点击选择喇叭
			trumpetClick(index) {
				this.trumpetList[index].type = !this.trumpetList[index].type
				//  let _this=this;
				//  if(_this.trumpetList[index].type==true){
				//    _this.trumpetList.forEach(function(item2) {
				//      if(item2.deviceSn==_this.trumpetList[index].deviceSn){
				//        item2.type=true
				//      }else{
				//        item2.type=false
				//      }
				//    })
				// }
			},
			//录制
			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 + '/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)
							self.textParseUrlIps(config.base_url + '/' + res.data.url);
							// self.newData.imgList.push(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
					});
				}
			},
			radioChange(e) {
				this.current = e.detail.value;
			},
			//获取喇叭列表
			async getDeviceListBySub() {
				let obj = {
					floorId: this.itemData.floorId,
					subId: this.itemData.id,
					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)
					// console.log(data);
				}
			},
			//查询摄像头地址
			async GetVideoList() {
				let obj = {
					page: '1',
					count: '10',
					deviceIds: this.itemData.hardwareNUM
				};
				const {
					data
				} = await GetStartList(obj);
				if (data.code == 200) {
					let list = [];
					for (let i = 0; i < data.data.length; i++) {
						let text = uni.getStorageSync('cameraUrl');
						let url = data.data[i].hls;
						url = url.split("rtp/");
						let newUrl = text + 'rtp/' + url[1];
						let obj = {
							id: data.data[i].deviceID,
							url: newUrl,
						}
						list.push(obj)
						console.log("obj", obj)
					}
					this.urlList = list;
				}
			},

			videoErrorCallback(e) {
				console.log("播放失败", e);
				// uni.showToast({
				//     title: '视频播放失败',
				//     icon:"none",
				//     mask:true,
				//     duration: 3000
				// });
			},
		}
	}
</script>

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

	#monitor {
		padding: 10rpx 20rpx;

		background: #fff;

		.name-box {
			line-height: 50rpx;
			font-size: 30rpx;
			color: #333;
		}

		.address-box {
			line-height: 50rpx;
			font-size: 28rpx;
			color: #666;
			margin-bottom: 20rpx;
		}

		.max-viode-box {
			height: 720rpx;
			overflow-y scroll;

			video {
				width: 710rpx;
				height: 355rpx;
			}
		}

		.gb-box {
			margin-top: 20rpx;

			.radio-box {
				display flex;
				font-size: 26rpx;

				.radio-title {
					font-size: 28rpx;
					margin: 20rpx 0 20rpx 20rpx;
					line-height: 40rpx;
				}

				.radio-max-button {
					display: flex;
					margin: 0 100rpx;
					height: 40rpx;
					margin-top: 20rpx;

					.radio-button {
						flex: 1;
						margin-left: 75rpx;
						font-size: 26rpx;
					}
				}
			}

			.input-box {
				.textarea-title {
					font-size: 28rpx;
					margin: 20rpx 0 20rpx 20rpx;
					line-height: 40rpx;
				}

				textarea {
					width: 630rpx;
					height: 200rpx;
					margin: 20rpx 20rpx 0;
					font-size: 26rpx;
					border: 1rpx solid #E0E0E0;
					border-radius: 10rpx;
					padding: 20rpx;
				}

				.input-button {
					margin: 20rpx auto;
					width: 600rpx;
					height: 80rpx;
					line-height: 80rpx;
					color: #fff;
					background #007AFF;
					text-align center;
					border-radius: 20rpx;
				}
			}

			.device-box {
				margin-bottom: 50rpx;

				.device-title {
					font-size: 28rpx;
					margin: 20rpx 0 20rpx 20rpx;
					line-height: 40rpx;
				}

				.device-for-max-box {
					margin-top: 22rpx;

					.trumpet-for-box {
						display: inline-block !important;
						//width:204rpx;
						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;
						justify-content: center;
						// margin-right :30rpx;
						margin: 10rpx 16rpx;
						padding: 0 12rpx;
						box-sizing: border-box;

						.trumpet-for-min-box {
							display flex;

							>img {
								display: inline-block !important;
								width: 36rpx;
								height: 34rpx;
								margin: 13rpx 20rpx 0 25rpx;
							}

							view {
								display: inline-block !important;
							}
						}
					}

					.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;
						margin: 30rpx auto 0;
						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;
					}
				}
			}

			.null-device-box {
				text-align: center;
				color: #999;
				line-height: 100rpx;
			}
		}
	}
</style>