|
|
@@ -1,629 +0,0 @@
|
|
|
-<!-- 查看监控 -->
|
|
|
-<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="false" :enable-danmu="false" :muted="false"
|
|
|
- :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="imagesUrl('commonality/icon_sskz_zc.png')" v-if="!item.type" />
|
|
|
- <img :src="imagesUrl('commonality/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">
|
|
|
- {{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/apiDemo/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
|
|
|
- // 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);
|
|
|
- })
|
|
|
- },
|
|
|
- //上传MP3
|
|
|
- async uploadImg(tempFilePaths) {
|
|
|
- var self = this;
|
|
|
- uni.uploadFile({
|
|
|
- url: config.base_url + '/system/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);
|
|
|
- // 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: this.itemData.floorId,
|
|
|
- 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].hls;
|
|
|
- url = url.split("rtp/");
|
|
|
- let newUrl = text + 'rtp/' + url[1];
|
|
|
- let obj = {
|
|
|
- id: data.data[i].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>
|
|
|
- @import '@/api/request/imagesUrl.styl';
|
|
|
-
|
|
|
- #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;
|
|
|
- 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;
|
|
|
- justify-content: center;
|
|
|
- // margin-right :30rpx;
|
|
|
- margin: 10rpx 16rpx;
|
|
|
- padding: 0 12rpx;
|
|
|
- box-sizing: border-box;
|
|
|
-
|
|
|
- .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_b {
|
|
|
- font-size: 24rpx;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: 500;
|
|
|
- color: #999999;
|
|
|
- line-height: 24rpx;
|
|
|
- text-align center;
|
|
|
- margin-top: 14rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .broadcast_m_t_back_a {
|
|
|
- background: url($imagesUrl+'commonality/icon_sskz_skfs.png') no-repeat center 0px;
|
|
|
- background-size: 100%;
|
|
|
- color: #FFFFFF;
|
|
|
- }
|
|
|
-
|
|
|
- .broadcast_m_t_back_b {
|
|
|
- background: url($imagesUrl+'commonality/icon_sskz_azsh.png') no-repeat center 0px;
|
|
|
- background-size: 100%;
|
|
|
- color: #0183FA;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .null-device-box {
|
|
|
- text-align: center;
|
|
|
- color: #999;
|
|
|
- line-height: 100rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-</style>
|
dedsudiyu