293 lines
8.0 KiB
Vue
293 lines
8.0 KiB
Vue
<template>
|
|
<view class="video-list-box">
|
|
<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" :up="upOption" @up="upCallback">
|
|
<view class="video-list">
|
|
<view class="video-item" v-for="(item,index) in dataList" :key="item.id">
|
|
<view class="item-header">
|
|
<view class="item-header-left">
|
|
设备编号：{{item.deviceId}}
|
|
</view>
|
|
<view class="item-header-right" :style="{color:item.status==1?'#52c41a':'#ff4d4f'}">
|
|
{{item.status==1?'启用':'禁用'}}
|
|
</view>
|
|
</view>
|
|
<view class="item-content">
|
|
<view class="content-title-box">
|
|
<view class="content-title-box-left">
|
|
<view class="iconfont icon-jiankong"></view>
|
|
</view>
|
|
<view class="content-title-box-right">
|
|
<view class="content-title-txt">
|
|
{{item.name}}
|
|
</view>
|
|
<view class="content-title-info">
|
|
设备型号：{{item.model||'-'}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="item-content-list">
|
|
<view class="item-content-list-left">
|
|
<view class="item-content-item">
|
|
设备类型：{{item.deviceType||'-'}}
|
|
</view>
|
|
<view class="item-content-item">
|
|
提供商：{{item.provider||'-'}}
|
|
</view>
|
|
<view class="item-content-item">
|
|
厂家：{{item.manufacturer||'-'}}
|
|
</view>
|
|
<view class="item-content-item">
|
|
创建时间：{{item.createdAt}}
|
|
</view>
|
|
</view>
|
|
<view class="item-content-list-right">
|
|
<!-- <u-button type="primary" size="mini" :custom-style="customStyle" @click="getChanneList(item.id,index)">查询通道</u-button> -->
|
|
<u-button type="primary" size="mini" :custom-style="customStyle" @click="goDetail(index)">查看设备</u-button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- <view class="item-footer" v-if="item.channelList && item.channelList.length>0">
|
|
<view class="channel-item" v-for="(val,i) in item.channelList" :key="val.id">
|
|
<view class="channel-item-left">
|
|
<view class="iconfont icon-video-camera"></view>
|
|
<view class="channel-name">
|
|
{{val.name}}
|
|
</view>
|
|
<view class="channel-status" :style="{color:val.status==1?'#52c41a':'#ff4d4f'}">
|
|
{{val.status==1?'启用':'禁用'}}
|
|
</view>
|
|
</view>
|
|
<u-button type="primary" size="mini" :custom-style="customStyle2" @click.stop="goDetail(index,i)">播放</u-button>
|
|
</view>
|
|
</view> -->
|
|
</view>
|
|
</view>
|
|
</mescroll-body>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js"
|
|
|
|
let liveList = [{
|
|
name:'区域1',
|
|
children:[
|
|
{
|
|
name:'监控1',
|
|
url:'https://gbs.gkiiot.com:8082/hdl/34020000001110000000/34020000001320000047.flv'
|
|
},
|
|
{
|
|
name:'监控2',
|
|
url:'https://gbs.gkiiot.com:8082/hdl/34020000001110000000/34020000001320000047.flv'
|
|
}
|
|
]
|
|
},{
|
|
name:'区域2',
|
|
children:[
|
|
{
|
|
name:'监控3',
|
|
url:'https://gbs.gkiiot.com:8082/hdl/34020000001110000000/34020000001320000047.flv'
|
|
},
|
|
{
|
|
name:'监控4',
|
|
url:'https://gbs.gkiiot.com:8082/hdl/34020000001110000000/34020000001320000047.flv'
|
|
}
|
|
]
|
|
}]
|
|
export default{
|
|
mixins: [MescrollMixin],
|
|
data(){
|
|
return {
|
|
customStyle: {
|
|
padding: '30rpx 30rpx', // 注意驼峰命名，并且值必须用引号包括，因为这是对象
|
|
margin:'0'
|
|
},
|
|
customStyle2: {
|
|
padding: '30rpx 40rpx', // 注意驼峰命名，并且值必须用引号包括，因为这是对象
|
|
margin:'0'
|
|
},
|
|
upOption:{
|
|
noMoreSize: 4,
|
|
textNoMore: '---- 已经到底啦 ----',
|
|
empty:{
|
|
tip: '~ 暂无监控设备 ~' // 提示
|
|
}
|
|
},
|
|
dataList:[],
|
|
}
|
|
},
|
|
onLoad() {
|
|
// this.getVideoList();
|
|
},
|
|
methods:{
|
|
upCallback(page){
|
|
let params = {
|
|
page: page.num,
|
|
pageSize: page.size,
|
|
}
|
|
this.$api.videoApi.getVideoList(params).then(res => {
|
|
console.log("getVideoList",res);
|
|
if(res.code === 0){
|
|
let curPageData = res.data && res.data.list || [];
|
|
let curPageLen = curPageData && curPageData.length || 0;
|
|
let totalSize = res.data.totalCount;
|
|
curPageData.forEach((item,index)=>{
|
|
curPageData[index].channelList = []
|
|
})
|
|
this.$nextTick(()=>{
|
|
// 隐藏下拉刷新和上拉加载的状态;
|
|
this.mescroll.endBySize(curPageLen, totalSize);
|
|
})
|
|
//设置列表数据
|
|
if(page.num == 1) this.dataList = []; //如果是第一页需手动制空列表
|
|
this.dataList = curPageLen > 0 && this.dataList.concat(curPageData); //追加新数据
|
|
this.total = totalSize;
|
|
}else{
|
|
this.$u.toast(res.msg);
|
|
this.mescroll.endErr();
|
|
}
|
|
|
|
}, error => {
|
|
this.$u.toast('服务器开小差了呢，请您稍后再试')
|
|
})
|
|
},
|
|
getChanneList(id,index){
|
|
console.log("id",id,index)
|
|
this.$api.videoApi.getVideoChannelList({pid: id,page:1,pageSize:999}).then(res => {
|
|
if(res.code == 0){
|
|
if(res.data.list && res.data.list.length>0){
|
|
console.log("this.dataList[index]",this.dataList[index])
|
|
this.$nextTick(()=>{
|
|
this.$set(this.dataList[index],'channelList',res.data.list)
|
|
})
|
|
}else{
|
|
this.$u.toast('通道为空');
|
|
this.$nextTick(()=>{
|
|
this.$set(this.dataList[index],'channelList',[])
|
|
})
|
|
}
|
|
|
|
}else{
|
|
this.$u.toast(res.msg);
|
|
}
|
|
}, error => {
|
|
this.$u.toast('服务器开小差了呢，请您稍后再试')
|
|
})
|
|
},
|
|
// goDetail(index,i){
|
|
// console.log("111")
|
|
// let deviceObj = this.dataList[index];
|
|
// let channeObj = this.dataList[index].channelList[i];
|
|
// if(channeObj.hdlUrl){
|
|
// uni.navigateTo({
|
|
// url:'./video-detail?deviceObj='+encodeURIComponent(JSON.stringify(deviceObj))+ '&channeObj='+encodeURIComponent(JSON.stringify(channeObj))
|
|
// })
|
|
// }else{
|
|
// this.$u.toast('获取通道地址错误')
|
|
// }
|
|
// },
|
|
goDetail(index){
|
|
let deviceObj = this.dataList[index];
|
|
uni.navigateTo({
|
|
url:'./video-webview?deviceObj='+encodeURIComponent(JSON.stringify(deviceObj))
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.video-list-box{
|
|
min-height: 100%;
|
|
background: #f2f1f6;
|
|
padding: 20rpx;
|
|
.video-list{
|
|
.video-item{
|
|
background: #fff;
|
|
border-radius: 10rpx;
|
|
margin-bottom: 20rpx;
|
|
.item-header{
|
|
height: 80rpx;
|
|
border-bottom: 1px solid #f2f1f6;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 0 20rpx;
|
|
}
|
|
.item-content{
|
|
padding: 20rpx;
|
|
.content-title-box{
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 10rpx;
|
|
.content-title-box-left{
|
|
background: #f6f6f6;
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-right: 10rpx;
|
|
border-radius: 4px;
|
|
.iconfont{
|
|
font-size: 60rpx;
|
|
color: #2979ff;
|
|
}
|
|
}
|
|
.content-title-box-right{
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-around;
|
|
.content-title-txt{
|
|
font-weight: bold;
|
|
}
|
|
.content-title-info{
|
|
font-size: 22rpx;
|
|
color: #bbb;
|
|
}
|
|
}
|
|
}
|
|
.item-content-list{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
.item-content-list-left{
|
|
.item-content-item{
|
|
font-size: 24rpx;
|
|
line-height: 40rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.item-footer{
|
|
width: 100%;
|
|
.channel-item{
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 20rpx;
|
|
border-bottom: 1px dashed #f2f1f6;
|
|
&:last-child{
|
|
border-bottom: none;
|
|
}
|
|
.channel-item-left{
|
|
display: flex;
|
|
align-items: center;
|
|
.iconfont{
|
|
color: #2979ff;
|
|
margin-right: 10rpx;
|
|
}
|
|
.channel-name{
|
|
font-weight: bold;
|
|
margin-right: 10rpx;
|
|
}
|
|
.channel-status{
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |