FE-V2-XCX/pages/alarmInfo/alarmInfo.vue

<!-- 停用 -->
<template>
    <view class="alarm">
		<view class="alarm_t">
			<view class="alarm_t_t">
        <img src="@/images/icon_003.png"/>
				<text>2022-01-01  14:00:23</text>
				<text>待处理</text>
			</view>
			<view class="alarm_t_b">化学品名称-未领用带离实验室房间，请尽快确认。</view>
		</view>
		<view class="alarm_c">
			<view class="alarm_c_li">
				<text>位置：</text>
				<text>实验室名称-楼栋楼层房间号</text>
			</view>
			<view class="alarm_c_li">
				<text>气瓶规格：</text>
				<text>10L</text>
			</view>
			<view class="alarm_c_li">
				<text>气体余量：</text>
				<text>10Mpa</text>
			</view>
			<view class="alarm_c_li">
				<text>当前使用人：</text>
				<text>成双-13666554455</text>
			</view>
			<view class="alarm_c_li">
				<text>气瓶所有人：</text>
				<text>李妮妮-13256564545</text>
			</view>
			<view class="alarm_c_img">
				<view>报警抓拍：</view>
				<view>
          <img src="@/images/icon_01.png"/>
          <img src="@/images/icon_01.png"/>
					<img src="@/images/icon_01.png"/>
					<img src="@/images/icon_01.png"/>
					<img src="@/images/icon_01.png"/>
					<img src="@/images/icon_01.png"/>
				</view>
			</view>
		</view>
		<view class="alarm_b">
			<view class="alarm_b_l" @click="MonitorBtn()">查看监控</view>
			<view class="alarm_b_r" @click="voiceBtn()">语音广播</view>
		</view>
		<view class="shade-max-big-box" v-if="broadcastType">
			<view class="null-box" @click="voiceBtn()"></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/icon_sskz_zc.png" v-if="!item.type"/>
						<img src="@/images/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>

	</view>

</template>

<script>
	import { config,} from '@/api/request/config.js'
    import {getDeviceList,textParseUrlIps} from '@/api/index.js'
    export default {
        data() {
            return {
				form:{

				},
				broadcastType:false,
				//喇叭数据
				trumpetList:[],
				//广播相关
				liveType:false,
				sendLock: true, //发送锁，当为true时上锁，false时解锁发送
				recorderManager : wx.getRecorderManager(),
				//滑动记录
				startPoint:{},
            }
        },
        onLoad(option) {
			this.getDeviceList()
        },
        onShow(){

        },
		methods:{
			MonitorBtn(){
				// uni.navigateTo({
				//   url:'/pages/alarmInfo/alarmInfoMonitor'
				// })
			},
			voiceBtn(){
				this.broadcastType = !this.broadcastType
			},
			//获取喇叭
			async getDeviceList(){
				let obj ={
					floorId:5,
					page:1,
					pageSize:100,
				};
				const {data} = await getDeviceList(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
        // 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);
				})
			},
			//发送语音
			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:"",
						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>
    .alarm{
        height:100%;
        width:100%;
		display:flex;
		flex-direction:column;
		overflow-y:scroll;
		.alarm_t{
			padding: 0 20rpx;
			box-sizing: border-box;
			background: #fff;
			.alarm_t_t{
				display: flex;
				justify-content: flex-start;
				align-items: center;
				height: 80rpx;
				border-bottom: 1px solid #e0e0e0;
				>img{
					width: 30rpx;
					height: 30rpx;
					margin-right: 22rpx;
				}
				>text:nth-of-type(1){
					width: 586rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
					line-height: 28rpx;
				}
				>text:nth-of-type(2){
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #FF9C00;
					line-height: 28rpx;
				}
			}
			.alarm_t_b{
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #666666;
				line-height: 120rpx;
			}
		}
		.alarm_c{
			margin: 20rpx;
			padding:0 16rpx;
			box-sizing: border-box;
			background: #FFFFFF;
			border-radius: 20rpx;
			.alarm_c_li{
				height: 80rpx;
				display: flex;
				justify-content: space-between;
				border-bottom: 1px solid #e0e0e0;
				>text{
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
					line-height: 80rpx;
				}
				>text:nth-of-type(1){}
				>text:nth-of-type(2){
					color: #666666;
				}
			}
			.alarm_c_img{
				display: flex;
				justify-content: flex-start;
				margin-top: 30rpx;
				>view:nth-of-type(1){
					width: 184rpx;
					display: inline-block;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
					line-height: 28rpx;
				}
				>view:nth-of-type(2){
					flex: 1;
					display: flex;
					justify-content: flex-start;
					flex-wrap: wrap;
					>img{
						width: 150rpx;
						height: 150rpx;
						background: #FFFFFF;
						border-radius: 4rpx;
						margin-right: 14rpx;
						margin-bottom: 20rpx;
					}
				}
			}

		}
		.alarm_b{
			width: 650rpx;
			margin-left: 50rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 100rpx;
			text-align: center;
			position: fixed;
			bottom: 20rpx;
			display: flex;
			justify-content: flex-start;
			.alarm_b_l{
				width: 325rpx;
				height: 100rpx;
				background: linear-gradient(-45deg, #FA9901, #F28E26);
				border-radius: 50rpx 0px 0px 50rpx;

			}
			.alarm_b_r{
				width: 325rpx;
				height: 100rpx;
				background: linear-gradient(-35deg, #309CFF, #0183FA);
				border-radius: 0px 50rpx 50rpx 0px;

			}
		}
		.shade-max-big-box{
				height:100%;
				width:100%;
				position fixed
				display flex;
				flex-direction column
				z-index:10;
				background :rgba(0,0,0,0.2);
				.null-box{
					flex:1;
				}
				/* 语音广播-执行疏散 */
				.broadcast{
					width: 100%;
					// height: 532rpx;
					background: #FFFFFF;
					border-top-left-radius :20rpx;
					border-top-right-radius :20rpx
					padding :22rpx 30rpx 30rpx;
					box-sizing :border-box;
					margin-top:20rpx;
					.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:200rpx;
							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;
							>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/icon_sskz_skfs.png);
							background-size 100%
							color: #FFFFFF;
						}
						.broadcast_m_t_back_b{
							background:url(@/images/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;
					}
				}
			}

	}

	/deep/.input-value-border{
		display :none !important;
	}
</style>