|
|
@@ -1,8 +1,46 @@
|
|
|
<!-- 视频监控-->
|
|
|
<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>
|
|
|
|
|
|
@@ -10,7 +48,7 @@
|
|
|
|
|
|
<script>
|
|
|
import { config } from '@/api/request/config.js'
|
|
|
-import {checkManageList,conditionCollegeInfo} from '@/api/index.js'
|
|
|
+import {laboratoryInfo,getCameraByFloor,GetStartList,getDeviceListBySub} from '@/api/index.js'
|
|
|
export default {
|
|
|
name: "rectifyList",
|
|
|
components: {
|
|
|
@@ -18,7 +56,17 @@ export default {
|
|
|
},
|
|
|
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(),
|
|
|
|
|
|
}
|
|
|
},
|
|
|
@@ -33,14 +81,293 @@ export default {
|
|
|
|
|
|
},
|
|
|
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'){//详情
|
|
|
@@ -60,6 +387,209 @@ export default {
|
|
|
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>
|
heyang