FE-V2-XCX/pages_manage/workbench/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="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="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="@/images/icon_sskz_zc.png" v-if="!item.type">
              <img src="@/images/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">
            <!-- <img src="@/images/icon_sskz_azsh.png" v-if="!liveType">
            <img src="@/images/icon_sskz_skfs.png" v-if="liveType"> -->
            <!-- <label class="slip_color" v-if="!liveType">按住说话</label>
            <label class="press_color" v-if="liveType">松开发送</label> -->
            {{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/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
    },
    //录制
    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/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:5,
        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].result.body.data.hls;
          url = url.split("rtp/");
          let newUrl = text+'rtp/'+url[1];
          let obj = {
            id:data.data[i].result.body.data.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>
#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;
          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;
          .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_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;
        }
      }
    }
	.null-device-box{
		text-align: center;
		color:#999;
		line-height:100rpx;
	}
  }
}
</style>