316 lines
6.7 KiB
Vue
316 lines
6.7 KiB
Vue
<template>
|
|
<view class="fullHeight">
|
|
<scroll-view scroll-y="true" style="background-color: #EFF3F7;">
|
|
<view class="fixedheader">
|
|
<headers :showBack="true" :themeType="true">
|
|
<view class="headerName"> 视频播放列表 </view>
|
|
</headers>
|
|
</view>
|
|
<view class="search-box" :style="{ paddingTop: statusBarHeight + 44 + 'px' }">
|
|
<view class="uni-form-item">
|
|
<u-search class="uni-input" placeholder="搜索监控点" :show-action="false" @change="loadData"
|
|
v-model="searchName"></u-search>
|
|
</view>
|
|
</view>
|
|
<view class="videoBox" :style="{ 'padding-top': statusBarHeight + 110 + 'px' }" 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/videoControlIcon/no_poster.png" class="no_poster"></image>
|
|
</view>
|
|
<view class="videoName">
|
|
{{item.videoName}}
|
|
</view>
|
|
<view :class="item.deviceState == 1 ? 'state-success' : 'state-error'" class="deviceState">
|
|
{{item.deviceState == 1 ? '在线' : '离线'}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="new-nodata" v-else>
|
|
<view></view>
|
|
<text>暂无数据...</text>
|
|
</view>
|
|
</scroll-view>
|
|
<!-- <footers v-if="pageType=='company'" :activeTab="'videoManage'"></footers> -->
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import footers from "../../components/footers/footers.vue"
|
|
import headers from "../../components/headers/headers.vue"
|
|
export default {
|
|
components: {
|
|
footers
|
|
},
|
|
data() {
|
|
return {
|
|
videoList: [],
|
|
pageType: 'company',
|
|
groupInfo: {},
|
|
projectSn: "",
|
|
videoConfig: {},
|
|
statusBarHeight: 0,
|
|
searchName: "",
|
|
};
|
|
},
|
|
onLoad(options) {
|
|
this.statusBarHeight = uni.getStorageSync('systemInfo').statusBarHeight;
|
|
if (options.pageType) {
|
|
this.pageType = options.pageType
|
|
}
|
|
if (options.obj) {
|
|
this.groupInfo = JSON.parse(options.obj)
|
|
}
|
|
console.log(options)
|
|
if(options.sn) {
|
|
this.projectSn = options.sn;
|
|
} else {
|
|
this.projectSn = JSON.parse(uni.getStorageSync('projectDetail')).projectSn;
|
|
}
|
|
|
|
this.getUseProjectVideoConfig();
|
|
},
|
|
methods: {
|
|
getUseProjectVideoConfig() {
|
|
var that = this
|
|
let requestData = {
|
|
projectSn: this.projectSn
|
|
}
|
|
this.sendRequest({
|
|
url: "xmgl/projectVideoConfig/getUseProjectVideoConfig",
|
|
data: requestData,
|
|
method: "POST",
|
|
success(res) {
|
|
console.log('找封面', res)
|
|
that.videoConfig = res.result;
|
|
that.loadData()
|
|
}
|
|
})
|
|
},
|
|
playVideoFn(item) {
|
|
// console.log(item)
|
|
uni.setStorageSync('videoInfo', {
|
|
...item,
|
|
videoType: this.videoConfig.videoType,
|
|
})
|
|
// if(item.liveRadioUrl){
|
|
uni.navigateTo({
|
|
// url:'./playVideo?url='+item.liveRadioUrl,
|
|
url: `playVideo?tabActive=${0}&&sn=${this.projectSn}`
|
|
})
|
|
// }
|
|
|
|
},
|
|
//获取项目分组视频
|
|
loadData(sn) {
|
|
var that = this
|
|
let requestData = {
|
|
groupId: this.groupInfo.id,
|
|
projectSn: this.projectSn,
|
|
videoType: this.videoConfig.videoType,
|
|
videoName: this.searchName,
|
|
}
|
|
this.sendRequest({
|
|
url: "xmgl/videoItem/selectVideoItemListByType",
|
|
data: requestData,
|
|
method: "POST",
|
|
success(res) {
|
|
console.log('找封面', res)
|
|
that.videoList = res.result
|
|
}
|
|
})
|
|
},
|
|
// //获取项目视频
|
|
// loadData(sn) {
|
|
// var that = this
|
|
// this.sendRequest({
|
|
// url: "xmgl/company/getComapnyStatisticsList",
|
|
// data: {sn: sn,videoType:1},
|
|
// method: "POST",
|
|
// success(res){
|
|
// console.log('找封面',res)
|
|
// that.videoList = res.result.videoList
|
|
// }
|
|
// })
|
|
// },
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.fullHeight{
|
|
background-color: #EFF3F7;
|
|
}
|
|
.videoBox {
|
|
padding: 20px 10px 10px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.videoItem {
|
|
float: left;
|
|
// background-color: white;
|
|
width: calc(50% - 14rpx);
|
|
margin-bottom: 14rpx;
|
|
position: relative;
|
|
.deviceState {
|
|
position: absolute;
|
|
right: 16rpx;
|
|
top: 16rpx;
|
|
color: white;
|
|
padding: 4rpx 8rpx;
|
|
border-radius: 30rpx;
|
|
|
|
font-size: 24rpx;
|
|
}
|
|
.state-success {
|
|
background-color: #33B74B;
|
|
}
|
|
.state-error {
|
|
background-color: #b5b5b5;
|
|
}
|
|
|
|
&:nth-child(2n-1) {
|
|
margin-right: 26rpx;
|
|
}
|
|
|
|
.videoPoster {
|
|
height: 184rpx;
|
|
width: 100%;
|
|
background-color: white;
|
|
// background-color: #282828;
|
|
text-align: center;
|
|
border-radius: 16rpx;
|
|
|
|
.no_poster {
|
|
// width: 55px;
|
|
// height: 50px;
|
|
// margin-top: 20px;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.videoName {
|
|
font-weight: 800;
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
color: $uni-text-color;
|
|
padding: 16rpx 0 6rpx;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
.new-nodata {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
>view {
|
|
width: 300rpx;
|
|
height: 300rpx;
|
|
background-image: url("@/static/staffAttendance/nodata.png");
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
>text {
|
|
font-size: 22rpx;
|
|
color: #808080;
|
|
margin-top: 60rpx;
|
|
}
|
|
}
|
|
|
|
.fixedheader {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
z-index: 999;
|
|
|
|
/deep/ .headerBox {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.headerName {
|
|
z-index: 1;
|
|
}
|
|
}
|
|
|
|
.search-box {
|
|
// background-color: white;
|
|
width: 100%;
|
|
position: fixed;
|
|
z-index: 99;
|
|
|
|
.uni-form-item {
|
|
padding: 20rpx 26rpx;
|
|
position: relative;
|
|
display: flex;
|
|
background-color: #EFF3F7;
|
|
|
|
.uni-input {
|
|
border: 2rpx solid #e4e4e4;
|
|
border-radius: 68rpx;
|
|
padding: 0;
|
|
font-size: 30rpx;
|
|
color: #444444;
|
|
|
|
/deep/ .u-content {
|
|
background-color: #ffffff !important;
|
|
|
|
.u-input {
|
|
background-color: #ffffff !important;
|
|
color: #999999 !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.search-btn {
|
|
width: 72rpx;
|
|
height: 72rpx;
|
|
background: #498cec;
|
|
border-radius: 48rpx;
|
|
margin-left: 30rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
>image {
|
|
width: 50rpx;
|
|
height: 50rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
/deep/ .u-dropdown {
|
|
padding-right: 60rpx;
|
|
}
|
|
|
|
.calendar_box {
|
|
position: absolute;
|
|
right: 28rpx;
|
|
bottom: 20rpx;
|
|
|
|
.calendar {
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
background-image: url("@/static/workTicketManage/calendar.png");
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.calendar_active {
|
|
background-image: url("@/static/workTicketManage/calendar-active.png");
|
|
}
|
|
}
|
|
}
|
|
</style> |