heyang

pages_manage/workbench/laboratory/laboratoryInfo.vue

@@ -69,14 +69,10 @@
         <view class="right-view">智能控制</view>
       </view>
       <view class="button-max-box">
-        <view class="button-box" v-if="itemData.videoNum>0">
-          <view>视频监控</view>
-          <view @click="goVideo()">查看</view>
+        <view class="button-box">
+          <view @click="goVideo()" v-if="itemData.videoNum>0">视频监控</view>
+          <view @click="shadeTypeClick()" v-if="trumpetList.length>0">语音广播</view>
         </view>
-<!--        <view class="button-box">
-          <view>语音播报</view>
-          <view @click="goWord()">播放文字</view>
-        </view> -->
         <view class="for-button-box" v-for="(minItem,minIndex) in itemData.labHardwareVOList" :key="minIndex" v-if="minItem.hardwareTypeEnum.enumName!='VIDEO_MONITOR' && minItem.hardwareTypeEnum.enumName!='RFID_RECOGNIZER'&& minItem.hardwareTypeEnum.enumName!='AI_TERMINAL'&& minItem.hardwareTypeEnum.enumName!='AI_DOORLOCK'&& minItem.hardwareTypeEnum.enumName!='AI_CABINETLOCK' && minItem.hardwareName!='一键灭火' && minItem.isPcfire != '1'">
           <view class="for-button-p">{{minItem.hardwareName}}</view>
           <img v-if="minItem.state.code=='3' && minItem.pcType != 1" src="@/pages_manage/images/icon_10.png" @click="hardwareButton(minItem,'close')">
@@ -143,7 +139,7 @@
             <img class="img-ojb" src="@/pages_manage/images/icon_aqxxp_gzf.png" v-if="item == 'gongzuofu'" v-for="(item,index) in itemData.safeSigns" :key="index">
             <img class="img-ojb" src="@/pages_manage/images/icon_aqxxp_gbmc.png" v-if="item == 'menchuang'" v-for="(item,index) in itemData.safeSigns" :key="index">
             <img class="img-ojb" src="@/pages_manage/images/icon_aqxxp_gbsd.png" v-if="item == 'shuidian'" v-for="(item,index) in itemData.safeSigns" :key="index">
-            <img v-if="itemData.safeInfo.qrCode" class="code-img" :src="itemData.safeInfo.qrCode">
+            <img v-if="baseUrl+itemData.safeInfo.qrCode" class="code-img" :src="baseUrl+itemData.safeInfo.qrCode">
           </view>
         </view>
       </view>
@@ -157,6 +153,33 @@
 	    <view class="shade-outfire-n-b" @click="cancelOutfire()">放弃一键灭火</view>
 	  </view>
 	</view>
+	 <!-- 语音广播-->
+	  <view class="shade-max-big-box" v-if="broadcastType">
+		<view class="null-box" @click="shadeTypeClick()"></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="@/pages_manage/images/icon_sskz_zc.png" v-if="!item.type">
+			  <img src="@/pages_manage/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>
 
@@ -164,10 +187,11 @@
 import $mqtt from '@/utils/mqtt.min.js';
 import { config } from '@/api/request/config.js'
 import { mySubjectList,subject_class,listDepartments,mangerControl,getDicts,laboratoryInfo,
-		 firedeviceStatus,firedeviceStart,firedeviceCancel,controlSwitch} from '@/api/index.js'
+		 firedeviceStatus,firedeviceStart,firedeviceCancel,controlSwitch,getDeviceListBySub, textParseUrlIps,} from '@/api/index.js'
 export default {
   data() {
     return {
+		baseUrl:config.base_url,
       itemData:{},
       //MQTT请求参数-传感器
       mtopic:"lab/function/data",
@@ -212,6 +236,16 @@ export default {
 	  fireStartType:false, //灭火启动状态
 	  outfireData: {}, //一键灭火
 	  subId:'',
+	  broadcastType: false,
+	  //喇叭数据
+	  trumpetList: [],
+	  //广播相关
+	  liveType: false,
+	  sendLock: true, //发送锁，当为true时上锁，false时解锁发送
+	  recorderManager: wx.getRecorderManager(),
+	  isEvacuate: true, //疏散按钮控制，当为true时候执行疏散
+	  //滑动记录
+	  startPoint: {},
     }
   },
   onLoad(option) {
@@ -290,7 +324,7 @@ export default {
       }
     }
 	this.firedeviceStatus();
-
+    this.getDeviceList();
   },
   onShow(){
     if(!this.saoCodeType){
@@ -306,6 +340,9 @@ export default {
 
   },
   methods: {
+	    shadeTypeClick() {
+	        this.broadcastType = !this.broadcastType
+	    },
 	  //一键灭火-查询设备状态
 	  async firedeviceStatus() {
 	    let _this = this;
@@ -786,6 +823,200 @@ export default {
         });
       }
     },
+	//获取喇叭列表
+	    async getDeviceList() {
+			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
+	        });
+	      }
+	    },
     goVideo(){
 		this.itemData.floorId = this.itemData.subAddrr.floorId;
       uni.navigateTo({
@@ -831,6 +1062,173 @@ export default {
   height:100%;
   display flex;
   flex-direction column;
+   /* 语音广播 */
+      .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: 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;
+          }
+        }
+      }
+
   /* 一键灭火 */
   .outfire {
     width: 750rpx;
@@ -1112,21 +1510,21 @@ export default {
         display flex
         border-bottom:1rpx solid #e0e0e0;
         margin:0 20rpx;
+		view{
+			width:200rpx;
+			line-height:70rpx;
+			border: 2rpx solid #0183FA;
+			border-radius: 35rpx;
+			color: #0183FA;
+			font-size: 24rpx;
+			text-align center;
+			margin:30rpx 0 30rpx 0;
+		}
         view:nth-child(1){
-          flex:1;
-          line-height:90rpx;
-          color:#333333;
-          font-size:28rpx;
+         margin-right: 18rpx;
         }
         view:nth-child(2){
-          width:120rpx;
-          line-height:42rpx;
-          border:4rpx solid #0183FA;
-          border-radius:30rpx;
-          color: #0183FA;
-          font-size: 24rpx;
-          text-align center;
-          margin:20rpx 0 20rpx 0;
+         
         }
       }
       .for-button-box:last-child{