Merge branch 'bjxz-dev' of http://139.9.66.234:18023/dhp/zhgdyunapp into bjxz-dev
This commit is contained in:
Vce
commit
b1656cb321
@ -69,8 +69,12 @@
|
||||
},
|
||||
{
|
||||
"path": "pages/videoManage/playBackList",
|
||||
"style": {}
|
||||
},
|
||||
{
|
||||
"path": "pages/videoManage/playBackVideo",
|
||||
"style": {
|
||||
"navigationBarTitleText": "录像查询",
|
||||
"navigationBarTitleText": "视频回放",
|
||||
"enablePullDownRefresh": false,
|
||||
"onReachBottomDistance": 100,
|
||||
"navigationBarBackgroundColor": "#3A7BFF",
|
||||
|
||||
@ -1,13 +1,25 @@
|
||||
<template>
|
||||
<view class="fullHeight">
|
||||
<headers :showBack="true" :themeType="'#3A7BFF'">
|
||||
<view class="headerName">
|
||||
录像查询
|
||||
</view>
|
||||
</headers>
|
||||
<view class="date-search">
|
||||
<uni-datetime-picker v-model="timeRange" type="daterange" rangeSeparator="至"
|
||||
@change="confirmTimeRange" />
|
||||
<view class="btn-style">查询</view>
|
||||
</view>
|
||||
<view class="videoBox" v-if="videoList.length>0">
|
||||
<view class="videoItem" v-for="(item,index) in videoList" :key="index" @click="playVideoFn(item)">
|
||||
<image v-if="item.coverUrl" class="videoPoster" :src="item.coverUrl" mode="aspectFill"></image>
|
||||
<view v-else class="videoPoster">
|
||||
<image src="/static/no_poster.png" class="no_poster"></image>
|
||||
</view>
|
||||
<view class="videoName">
|
||||
{{item.name}}
|
||||
<view class="back-time">
|
||||
<text class="date-time">2024-05-11 00:00:00</text>
|
||||
<text class="divider-text">至</text>
|
||||
<text class="date-time">2024-05-11 00:00:00</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@ -25,11 +37,13 @@
|
||||
data() {
|
||||
return {
|
||||
videoList: [
|
||||
{startTime: "2024-05-11 00:00:00", endTime: "2024-06-11 00:00:00"}
|
||||
{name: 123, startTime: "2024-05-11 00:00:00", endTime: "2024-06-11 00:00:00"},
|
||||
{name: 123, startTime: "2024-05-11 00:00:00", endTime: "2024-06-11 00:00:00"}
|
||||
],
|
||||
pageType: 'company',
|
||||
pageNo: 1,
|
||||
pageSize: 7,
|
||||
timeRange: []
|
||||
};
|
||||
},
|
||||
onLoad(options) {
|
||||
@ -48,16 +62,16 @@
|
||||
// this.loadData()
|
||||
},
|
||||
methods: {
|
||||
confirmTimeRange(e, index) {
|
||||
console.log(e, index)
|
||||
// this.form.plannedMakeBeamBeginTime = e[0]
|
||||
// this.form.plannedMakeBeamEndTime = e[1]
|
||||
// console.log("制梁时间选择", e)
|
||||
},
|
||||
playVideoFn(item) {
|
||||
// console.log(item)
|
||||
uni.setStorageSync('videoInfo', item)
|
||||
// if(item.liveRadioUrl){
|
||||
uni.navigateTo({
|
||||
// url:'./playVideo?url='+item.liveRadioUrl,
|
||||
url: 'playVideo'
|
||||
url: './playBackVideo'
|
||||
})
|
||||
// }
|
||||
|
||||
},
|
||||
//获取项目视频
|
||||
loadData(sn) {
|
||||
@ -80,43 +94,72 @@
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.videoBox {
|
||||
padding: 20px 10px 10px;
|
||||
overflow: hidden;
|
||||
.fullHeight{
|
||||
background-color: #F4F5FD;
|
||||
}
|
||||
|
||||
.videoItem {
|
||||
float: left;
|
||||
background-color: white;
|
||||
width: calc(50% - 5px);
|
||||
margin-bottom: 10px;
|
||||
|
||||
&:nth-child(2n-1) {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.videoPoster {
|
||||
height: 90px;
|
||||
width: 100%;
|
||||
background-color: #282828;
|
||||
.date-search{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12rpx 18rpx;
|
||||
background: #FFFFFF;
|
||||
.btn-style{
|
||||
width: 120rpx;
|
||||
height: 68rpx;
|
||||
line-height: 68rpx;
|
||||
background: #5181F6;
|
||||
border-radius: 6rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #FFFFFF;
|
||||
text-align: center;
|
||||
|
||||
margin-left: 36rpx;
|
||||
}
|
||||
}
|
||||
.videoBox {
|
||||
padding: 0rpx 20rpx 40rpx 20rpx;
|
||||
overflow: hidden;
|
||||
margin-top: 32rpx;
|
||||
}
|
||||
.videoItem:not(:last-child){
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
.videoItem {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
border-radius: 10rpx;
|
||||
padding: 16rpx 8rpx;
|
||||
.videoPoster {
|
||||
width: 208rpx;
|
||||
height: 208rpx;
|
||||
background: rgba(141,141,141,0.83);
|
||||
border-radius: 8rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.no_poster {
|
||||
width: 55px;
|
||||
height: 50px;
|
||||
margin-top: 20px;
|
||||
width: 110rpx;
|
||||
height: 100rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.videoName {
|
||||
font-size: 14px;
|
||||
color: $uni-text-color;
|
||||
padding: 3px 0 8px;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
text-align: center;
|
||||
.back-time{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
margin-left: 62rpx;
|
||||
.date-time{
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 30rpx;
|
||||
color: #9F9F9F;
|
||||
}
|
||||
.divider-text{
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #272D45;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
170
pages/videoManage/playBackVideo.vue
Normal file
170
pages/videoManage/playBackVideo.vue
Normal file
@ -0,0 +1,170 @@
|
||||
<template>
|
||||
<view class="fullHeight">
|
||||
<headers :showBack="true" :themeType="'#3A7BFF'">
|
||||
<view class="headerName">
|
||||
视频回放
|
||||
</view>
|
||||
</headers>
|
||||
<!-- <video class="videoBox" id="myVideo" :custom-cache="false" :src="url" controls autoplay></video> -->
|
||||
<!-- 外网IP地址访问视频监控 -->
|
||||
<video class="videoBox" id="myVideo" :custom-cache="false" :src="'rtsp://42.180.188.17:'+url.substring(20)" controls autoplay></video>
|
||||
<view class="videoName">
|
||||
<text>南山科技创新中心--标段总承包1#吊塔</text>
|
||||
<text>2024-05-11 00:00:00</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import headers from '../../components/headers/headers.vue'
|
||||
export default {
|
||||
components:{headers},
|
||||
data() {
|
||||
return {
|
||||
url:'',//rtsp://admin:jxj12345@192.168.0.64:554/h264/ch1/main/av_stream
|
||||
videoInfo:{videoName:'',videoType:null},
|
||||
streamType: 1, //1是子码流 2是主码流
|
||||
};
|
||||
},
|
||||
onLoad(options) {
|
||||
//videoType 1萤石云，2乐橙，3ISC，4大华，5宇视，6国标
|
||||
// this.url = options.url
|
||||
this.videoInfo=uni.getStorageSync('videoInfo')
|
||||
if(this.videoInfo.videoType==2){
|
||||
this.url= this.videoInfo.liveRadioUrl
|
||||
}else{
|
||||
this.getPlayUrl()
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
// 跳转到录像回放列表
|
||||
toBackList(){
|
||||
uni.navigateTo({
|
||||
url: './playBackList'
|
||||
})
|
||||
},
|
||||
getPlayUrl(){
|
||||
var that = this
|
||||
var json ={itemId:this.videoInfo.itemId}
|
||||
if(this.videoInfo.videoType==3){
|
||||
json.streamType=this.streamType
|
||||
json.type='rtsp' //rtsp或者hls
|
||||
}
|
||||
this.sendRequest({
|
||||
url: "xmgl/videoItem/getVideoItemInfo",
|
||||
data: json,
|
||||
method: "post",
|
||||
success(res){
|
||||
switch (that.videoInfo.videoType){
|
||||
case 1:
|
||||
that.url=res.result.videoInfo.hdFlvAddress
|
||||
break;
|
||||
default:
|
||||
that.url=res.result.videoInfo.url
|
||||
break;
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
controlVideoFn(pan, tilt, zoom,opType){
|
||||
if(this.videoInfo.deviceType!=2){
|
||||
uni.showToast({
|
||||
title:'该设备不是球机，不支持此操作',
|
||||
icon:'none'
|
||||
})
|
||||
return false
|
||||
}
|
||||
switch (this.videoInfo.videoType){
|
||||
case 3:
|
||||
this.controlVideoFn_isc(opType)
|
||||
break;
|
||||
case 4:
|
||||
this.controlVideoFn_dh(pan, tilt, zoom)
|
||||
break;
|
||||
default:
|
||||
uni.showToast({
|
||||
title:'暂不支持',
|
||||
icon:'none'
|
||||
})
|
||||
break;
|
||||
}
|
||||
},
|
||||
controlVideoFn_isc(opType){
|
||||
let json = {
|
||||
// cameraId: this.videoInfo.deviceSerial,
|
||||
itemId:this.videoInfo.itemId,
|
||||
opType: opType,
|
||||
opSize: 20,
|
||||
opCode: 1
|
||||
};
|
||||
var that = this
|
||||
this.sendRequest({
|
||||
url: "xmgl/videoItem/getHikPtzControl",
|
||||
data: json,
|
||||
method: "post",
|
||||
success(res){
|
||||
uni.showToast({
|
||||
title:'控制成功',
|
||||
icon:'none'
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
controlVideoFn_dh(pan, tilt, zoom){
|
||||
var code = '';
|
||||
var jsonStr = {
|
||||
pan: pan,
|
||||
tilt: tilt,
|
||||
zoom: zoom,
|
||||
duration: 100
|
||||
};
|
||||
let json = {
|
||||
ip: this.videoInfo.ip,
|
||||
port: this.videoInfo.port,
|
||||
username: this.videoInfo.username,
|
||||
password: this.videoInfo.password,
|
||||
chnnelcode: this.videoInfo.chnnelcode,
|
||||
jsonStr: JSON.stringify(jsonStr),
|
||||
data: new Date()
|
||||
};
|
||||
var that = this
|
||||
this.sendRequest({
|
||||
url: "xmgl/video/putPTZ",
|
||||
data: json,
|
||||
method: "get",
|
||||
success(res){
|
||||
uni.showToast({
|
||||
title:'控制成功',
|
||||
icon:'none'
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.fullHeight{
|
||||
background-color: #F4F5FD;
|
||||
}
|
||||
.videoBox{
|
||||
width: 100%;
|
||||
}
|
||||
.videoName{
|
||||
margin: 10px 15px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: 600;
|
||||
text:nth-child(1){
|
||||
color: #000000;
|
||||
}
|
||||
text:nth-child(2){
|
||||
color: #6F6F6F;
|
||||
margin-top: 12rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -202,7 +202,7 @@
|
||||
color: #8D8D8D;
|
||||
position: fixed;
|
||||
bottom: 80rpx;
|
||||
left: 160rpx;
|
||||
left: 140rpx;
|
||||
}
|
||||
.videoOperateBox {
|
||||
text-align: center;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user