FE-V2-XCX/pages/earlyWarningManage/videoMonitoring.vue

<!-- 视频监控-->
<template>
  <view class="earlyWarning">
	<scroll-view scroll-x @scrolltolower="scrollGet"  class="header">
		<view class="tabTitle_tow">
			<view class="tabTitle_tow_li" @tap="tabClickTow(item,index)"  :key="index" v-for="(item,index) in tabTextTow">
				<view :class="{on:curTabTow==index}" class="tabTitle_tow_text">{{item.name}}</view>
				<view :class="{on:curTabTow==index}" class="tabTitle_tow_across"></view>
			</view>
		</view>
	</scroll-view>
	<scroll-view scroll-y @scrolltolower="scrollGet" class="info-max-box">
		<!-- 视频部分 -->
		<view class="video-max-box" v-if="urlList[0]">
		  <video v-for="(item,index) in urlList" :key="index" ref="videoRef" :src="item.url"
		         :poster="videoCover" :custom-cache='false' :autoplay="true" :controls="true"
		         :enable-danmu="false" :muted="true" :show-fullscreen-btn="true" :show-center-play-btn="false"
		         :show-play-btn="false" @error="videoErrorCallback">
		  </video>
		</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>
	</scroll-view>	
  </view>

</template>

<script>
import { config } from '@/api/request/config.js'
import {laboratoryInfo,getCameraByFloor,GetStartList,getDeviceListBySub} from '@/api/index.js'
export default {
  name: "rectifyList",
  components: {
   
  },
  data() {
    return {
		videoCover: uni.getStorageSync('videoCover'),
		tabTextTow:[{name:'RFID摄像头'},{name:'房间内监控1'},{name:'房间内监控2'},{name:'房间内监控3'},{name:'房间内监控3'},{name:'房间内监控3'},],
		curTabTow:0,
		//视频数据
		urlList: [{}],
		videoHardwareNUM:[], //实验室和楼道摄像头编码
		trumpetList:[],
		//广播相关
		liveType: false,
		sendLock: true, //发送锁，当为true时上锁，false时解锁发送
		recorderManager: wx.getRecorderManager(),
		
	}
  },
  onLoad(option) {
	  
  },
  onShow() {
	
  },
  mounted(){
	 
	  
  },
  methods: {
		//顶部tab点击
		tabClickTow(item,index) {
			this.curTabTow = index;
			
		},
		//滚动事件
		scrollGet(){
			let self=this;
			
		},
		videoErrorCallback(e){
		  console.log("播放失败",e);
		},
		//获取实验室摄像头
		async laboratoryInfo() {
		
		  let _this = this;
		  const {
		    data
		  } = await laboratoryInfo(_this.itemData.subjectId);
		  if (data.code == 200) {
		    let list = data.data[0];
		    list.labHardwareVOList.forEach(function(item) {
		      if (item.hardwareTypeEnum.enumName == 'VIDEO_MONITOR') {
		        console.log(item.hardwareNUM)
		        _this.videoHardwareNUM.push(item.hardwareNUM)
		      }
		    })
		
		    this.getCameraByFloor();
		
		  }
		},
		//获取楼层摄像头列表
		async getCameraByFloor() {
		  let _this = this;
		  const {
		    data
		  } = await getCameraByFloor({
		    floorId: this.floorId
		  })
		  if (data.code == 200) {
		    if (data.data[0]) {
		      let list = _this.videoHardwareNUM.concat(data.data)
		      let qc = []
		      for (var i = 0; i < list.length - 1; i++) {
		        for (var j = i + 1; j < list.length; j++) {
		          if (list[i] === list[j]) {
		            list.splice(j, 1);
		            j--;
		          }
		        }
		      }
		      this.GetStartList(list);
		    } else {
		      this.GetStartList(_this.videoHardwareNUM);
		    }
		  }
		},
		async GetStartList(rows) {
		  console.log(rows)
		  let self = this;
		  if(!rows[0]){
			return
		  }
		  let list = "";
		  for (let i = 0; i < rows.length; i++) {
		    list = list + rows[i] + ","
		  }
		  let obj = {
		    page: "1",
		    count: "100",
		    deviceIds: list,
		  };
		  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 = {
		        name: "楼道监控" + (i + 1),
		        id:data.data[i].deviceID,
		        url: newUrl,
				videoContext:wx.createVideoContext(data.data[i].deviceID)
		      }
		      list.push(obj)
		    }
		    this.urlList = list;
		  }
		},
		//获取喇叭列表
		async getDeviceList() {
		  let obj = {
		    subId: this.itemData.subjectId,
		    floorId: this.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
		    });
		  }
		},
		handleClick(row,doType){
		  let self=this;
		  if( doType=='detail'){//详情	
			  
		  }
		  
		},
		
	  
  }
}
</script>

<style lang="stylus" scoped>
.earlyWarning{
	height:100%;
	display flex;
	padding-bottom: 30rpx;
	box-sizing: border-box;
	.header{
		width:750rpx;
		height: 100rpx;
		position: fixed;
		top: 0rpx;
		z-index: 100;
		background: #fff;
		.tabTitle_tow{
			height: 100rpx;
			 white-space: nowrap;
			display: inline-flex;	
			.tabTitle_tow_li{
				
				position: relative;
				width:210rpx;
				height: 100rpx;
				text-align center;
				padding-top: 26rpx;
				box-sizing: border-box;
				.tabTitle_tow_text{
					display: inline-block;
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
					line-height: 46rpx;
					position: relative;
					&.on{
						color:#0183FA;
					}
				}
				.tabTitle_tow_across{
					width: 50rpx;
					height: 4rpx;
					background: #0183FA;
					border-radius: 2rpx;
					margin-left: 33%;
					display none;
					&.on{
						display block;
					}
				}
		
			}
		}
		
	}
	.video-max-box {
	  width: 690rpx;
	  height: 420rpx;
	  margin: 116rpx 30rpx 20rpx;
	  video {
	    width: 690rpx;
	    height: 420rpx;
	  }
	}
	.broadcast {
	  width: 690rpx;
	  background: #FFFFFF;
	  border-radius: 20rpx;
	  padding:22rpx 30rpx 30rpx;
	  box-sizing: border-box;
	  margin: 20rpx 30rpx 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/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;
	  }
	}
}
</style>