Compare commits
10 Commits
077e37990e
...
648f3c4ca9
| Author | SHA1 | Date |
|---|---|---|
风花一世月
|
648f3c4ca9 | |
|
风花一世月
|
ae550f1941 | |
|
风花一世月
|
a1f0f0db02 | |
|
风花一世月
|
4b0c8a411f | |
|
风花一世月
|
1dac10fcb1 | |
|
风花一世月
|
435267f34f | |
|
风花一世月
|
e3fde71b2d | |
|
风花一世月
|
8383f214d9 | |
|
风花一世月
|
e6a52dcfe9 | |
|
风花一世月
|
73e26c8355 |
7
App.vue
7
App.vue
|
|
@ -13,6 +13,13 @@
|
|||
protocol:'https://',
|
||||
address:'cloud.iot-fast.com',
|
||||
}]
|
||||
// #ifdef APP-PLUS
|
||||
configList.push({
|
||||
id:this.$u.guid(32),
|
||||
protocol:'http://',
|
||||
address:'192.168.21.22',
|
||||
})
|
||||
// #endif
|
||||
uni.setStorageSync('configList',configList)
|
||||
uni.setStorageSync('configIndex',0)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
props:{
|
||||
// 选择值
|
||||
value: {
|
||||
type: [String,null],
|
||||
type: [String,Number],
|
||||
default: ''
|
||||
},
|
||||
// 图标
|
||||
|
|
@ -51,12 +51,20 @@
|
|||
}
|
||||
},
|
||||
created() {
|
||||
if(this.value!=null){
|
||||
this.inputValue = this.value+'';
|
||||
}else{
|
||||
this.inputValue = this.value;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value(newValue) {
|
||||
if(newValue!=null){
|
||||
this.inputValue = newValue+'';
|
||||
}else{
|
||||
this.inputValue = newValue;
|
||||
}
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
// 输入值变化
|
||||
|
|
|
|||
|
|
@ -2,8 +2,8 @@
|
|||
"name" : "物联网可视化",
|
||||
"appid" : "__UNI__604B8F1",
|
||||
"description" : "",
|
||||
"versionName" : "1.0.25",
|
||||
"versionCode" : 1025,
|
||||
"versionName" : "1.0.34",
|
||||
"versionCode" : 1034,
|
||||
"transformPx" : false,
|
||||
/* 5+App特有相关 */
|
||||
"app-plus" : {
|
||||
|
|
|
|||
12
pages.json
12
pages.json
|
|
@ -310,6 +310,13 @@
|
|||
// "navigationStyle":"custom"
|
||||
// // #endif
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "video-webview",
|
||||
"style": {
|
||||
"navigationBarTitleText": "视频监控详情"
|
||||
// "navigationStyle":"custom"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -395,6 +402,11 @@
|
|||
"path": "pages/video/video-list", //启动页面，必选
|
||||
"query": "" //启动参数，在页面的onLoad函数里面得到
|
||||
},
|
||||
{
|
||||
"name": "视频监控webview", //模式名称
|
||||
"path": "pages/video/video-webview", //启动页面，必选
|
||||
"query": "" //启动参数，在页面的onLoad函数里面得到
|
||||
},
|
||||
{
|
||||
"name": "消息", //模式名称
|
||||
"path": "pages/tabbar/new", //启动页面，必选
|
||||
|
|
|
|||
|
|
@ -175,13 +175,16 @@
|
|||
if(this.verification()){
|
||||
let obj = {};
|
||||
this.dataList.forEach((item)=>{
|
||||
if(item.checked){
|
||||
obj[item.ioKey]=item.value
|
||||
}
|
||||
})
|
||||
let params = {
|
||||
ac:'write',
|
||||
d:this.devId,
|
||||
pk:this.pk,
|
||||
p:obj
|
||||
p:obj,
|
||||
kw:this.abilityObj.identifier
|
||||
}
|
||||
this.$api.iotsApi.downDeviceAbility(params).then(res => {
|
||||
console.log("下发数据成功",res)
|
||||
|
|
|
|||
|
|
@ -178,7 +178,7 @@
|
|||
pk:this.pk,
|
||||
p:obj
|
||||
}
|
||||
this.$api.iotsApi.downDeviceAbility(params).then(res => {
|
||||
this.$api.iotsApi.downDeviceProp(params).then(res => {
|
||||
console.log("下发数据成功",res)
|
||||
if(res.code == 0){
|
||||
// this.$u.toast('执行成功')
|
||||
|
|
|
|||
|
|
@ -480,6 +480,7 @@
|
|||
},
|
||||
// 选择分组
|
||||
changeGroup(e){
|
||||
this.dataIndex = e;
|
||||
if(e != 0){
|
||||
const identifierMap = new Map();
|
||||
this.dataAllData.forEach(val => {
|
||||
|
|
@ -535,7 +536,6 @@
|
|||
if(thingModel.contents.prop.length){
|
||||
this.dataList = thingModel.contents.prop.map(item=>{
|
||||
if(item.dataType=='int'){
|
||||
|
||||
if(item.ioObj.IoDeployForm.min!=undefined){
|
||||
item.value = parseFloat(item.ioObj.IoDeployForm.min);
|
||||
}else{
|
||||
|
|
@ -824,7 +824,7 @@
|
|||
// this.addLog('up',obj);
|
||||
this.deviceTime = this.$u.timeFormat(obj.fg_device_ts, 'yyyy-mm-dd hh:MM:ss');
|
||||
if (obj) {
|
||||
let dataList = JSON.parse(JSON.stringify(this.dataList));
|
||||
let dataList = JSON.parse(JSON.stringify(this.dataAllData));
|
||||
// 这是连接的第一次获取，虽然进页面已经获取一次最新数据，但是可能存在断开之后的请求，所以需要遍历覆盖
|
||||
for (let i = 0; i < dataList.length; i++) {
|
||||
for (let key in obj) {
|
||||
|
|
@ -840,7 +840,8 @@
|
|||
}
|
||||
}
|
||||
this.$nextTick(()=>{
|
||||
this.$set(this,'dataList',dataList)
|
||||
this.$set(this,'dataAllData',dataList)
|
||||
this.changeGroup(this.dataIndex)
|
||||
this.$forceUpdate()
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -217,7 +217,7 @@
|
|||
getLoginConfig(){
|
||||
this.$api.getLoginConfig({}).then(res => {
|
||||
if(res.code == 0){
|
||||
this.isImgCode = res.data.loginDemoSwitch===1?true:false;
|
||||
this.isImgCode = res.data.loginCaptchaSwitch===1?true:false;
|
||||
}else{
|
||||
this.$u.toast(res.message);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -170,18 +170,25 @@
|
|||
}
|
||||
},
|
||||
watch: {
|
||||
// showToggle() {
|
||||
// console.log("show变化")
|
||||
showToggle() {
|
||||
console.log("show变化")
|
||||
// clearInterval(this.timer);
|
||||
// this.timer = setInterval(() => {
|
||||
// this.mescroll.resetUpScroll();
|
||||
// console.log("当前起始项Index为", this.showStartIndex, this.showEndIndex);
|
||||
this.getDeviceInfo();
|
||||
if(this.dataList.length>0){
|
||||
this.resetDeviceList();
|
||||
}
|
||||
console.log("当前起始项Index为", this.showStartIndex, this.showEndIndex);
|
||||
// }, 5000)
|
||||
// },
|
||||
// hideToggle() {
|
||||
// console.log("hide变化")
|
||||
},
|
||||
hideToggle() {
|
||||
console.log("hide变化")
|
||||
// clearInterval(this.timer);
|
||||
// },
|
||||
},
|
||||
},
|
||||
onShow() {
|
||||
|
||||
},
|
||||
|
||||
created() {
|
||||
|
|
@ -313,6 +320,23 @@
|
|||
this.mescroll.endErr();
|
||||
}
|
||||
}, error => {})
|
||||
},
|
||||
resetDeviceList(){
|
||||
let params = {
|
||||
"pk": this.productPk,
|
||||
"page": 1,
|
||||
"pageSize": this.dataList.length,
|
||||
}
|
||||
this.$api.iotsApi.getDeviceList(params).then(res => {
|
||||
if (res.code === 0) {
|
||||
let curPageData = (res.data && res.data.list)||[];
|
||||
let totalSize = res.data.totalCount;
|
||||
this.dataList = curPageData; //追加新数据
|
||||
this.total = totalSize;
|
||||
} else {
|
||||
this.$u.toast(res.msg);
|
||||
}
|
||||
}, error => {})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -108,11 +108,12 @@
|
|||
}
|
||||
})
|
||||
this.getUserInfo();
|
||||
this.getUserMenu();
|
||||
|
||||
this.tabIndex = 1;
|
||||
this.tabIndex = 0;
|
||||
},
|
||||
onShow() {
|
||||
this.getUserMenu();
|
||||
this.getUnreadNewNum();
|
||||
},
|
||||
mounted() {
|
||||
|
|
|
|||
|
|
@ -1,32 +1,51 @@
|
|||
<template>
|
||||
<view class="video-detail">
|
||||
<nav-bar :is-back="true" title="视频监控"></nav-bar>
|
||||
<!-- <nav-bar :is-back="true" title="视频监控"></nav-bar> -->
|
||||
<view class="video-box">
|
||||
<!-- #ifdef APP-PLUS -->
|
||||
|
||||
<!-- <video id="myVideo" :src="url" autoplay v-if="showVideo" show-mute-btn="true" vslide-gesture="true" :controls="btnToggle"> -->
|
||||
<video id="myVideo" :src="dataObj.url" autoplay v-if="showVideo" controls="false">
|
||||
<!-- <cover-view class="btn-toggle" v-if="btnToggle" @click="quitFullScreen">
|
||||
<!-- #ifdef APP-PLUS -->
|
||||
<video id="myVideo" :src="dataObj.flvUrl" autoplay show-fullscreen-btn v-if="showVideo" :controls="false">
|
||||
<cover-view class="btn-toggle" v-if="btnToggle" @click="quitFullScreen">
|
||||
退出全屏
|
||||
</cover-view>
|
||||
<view class="btn-toggle" v-if="btnToggle" @click="quitFullScreen">
|
||||
退出全屏
|
||||
</view>
|
||||
</video>
|
||||
<!-- #endif -->
|
||||
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<video id="myVideo" class="video-content" :src="dataObj.m3u8Url" :autoplay="true" :direction="0"
|
||||
:muted="true" :controls="true" :is-live="true" object-fit="contain" @binderror="error" :custom-cache="false"
|
||||
title="放大后会显示的标题" show-fullscreen-btn>
|
||||
</video>
|
||||
<!--<video id="myVideo" :src="dataObj.m3u8Url" autoplay show-fullscreen-btn v-if="showVideo" :controls="false">
|
||||
<cover-view class="btn-toggle" v-if="btnToggle" @click="quitFullScreen">
|
||||
退出全屏
|
||||
</cover-view> -->
|
||||
<!-- <view class="btn-toggle" v-if="btnToggle" @click="quitFullScreen">
|
||||
退出全屏
|
||||
</view> -->
|
||||
</video>
|
||||
</view>
|
||||
</video> -->
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<!-- <live-player id="live-video" src="http://al.flv.huya.com/src/78941969-2559461593-10992803837303062528-2693342886-10057-A-0-1-imgplus.flv?wsSecret=f61867c0ada81aceb02d7306fdd059a2&wsTime=6037810b&fm=RFdxOEJjSjNoNkRKdDZUWV8kMF8kMV8kMl8kMw%3D%3D&ctyp=huya_tars&txyp=o%3Aq5%3B&fs=bgct&&sphdcdn=al_7-tx_3-js_3-ws_7-bd2-hw2&sphdDC=huya&sphd=264-265&ratio=500" v-if="showVideo" autoplay> -->
|
||||
|
||||
<!-- #ifdef MP-WEIXIN
|
||||
<live-player id="live-video" :src="dataObj.url" v-if="showVideo" autoplay @statechange="statechange"
|
||||
@netstatus="netstatus">
|
||||
<cover-view class="btn-toggle" v-if="btnToggle" @click="quitFullScreen">
|
||||
退出全屏
|
||||
</cover-view>
|
||||
</live-player>
|
||||
<!-- #endif -->
|
||||
#endif -->
|
||||
|
||||
</view>
|
||||
<view class="video-title">
|
||||
{{dataObj.name}}
|
||||
</view>
|
||||
<view class="channe-name">
|
||||
通道名称:{{dataObj.channeName}}
|
||||
</view>
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<view class="slider-box">
|
||||
<!-- <view class="title">
|
||||
|
|
@ -100,8 +119,12 @@
|
|||
speed: 100,
|
||||
btnToggle: false,
|
||||
dataObj: {
|
||||
url: '',
|
||||
name: ''
|
||||
flvUrl: '',
|
||||
m3u8Url: '',
|
||||
id:'',
|
||||
name: '',
|
||||
channeId:'',
|
||||
channeName:'',
|
||||
},
|
||||
refreshdata: 11,
|
||||
showVideo: true,
|
||||
|
|
@ -118,40 +141,51 @@
|
|||
id: '',
|
||||
channel: '',
|
||||
},
|
||||
// 平台控制头
|
||||
ptzTypeUrl:'',
|
||||
ptzType: {}
|
||||
};
|
||||
},
|
||||
onLoad(option) {
|
||||
console.log("option",option)
|
||||
this.ptzType = PTZ_TYPE;
|
||||
console.log("PTZ_TYPE", PTZ_TYPE)
|
||||
console.log("option: ", option);
|
||||
console.log("optionobj: ", JSON.parse(decodeURIComponent(option.obj)));
|
||||
let obj = JSON.parse(decodeURIComponent(option.obj));
|
||||
if (obj.siteM7sHost && obj.siteM7sPort && obj.devId && obj.devChannel) {
|
||||
if (obj.https) {
|
||||
this.videoObj = {
|
||||
url: 'https://' + obj.siteM7sHost + ':' + obj.siteM7sPort,
|
||||
id: obj.devId,
|
||||
channel: obj.devChannel,
|
||||
}
|
||||
this.pullVideoList('https://' + obj.siteM7sHost + ':' + obj.siteM7sPort, obj.devId, obj.devChannel)
|
||||
this.dataObj.url = 'https://' + obj.siteM7sHost + ':' + obj.siteM7sPort + '/hdl/' + obj.devId + '/' +
|
||||
obj.devChannel + '.flv'
|
||||
} else {
|
||||
this.videoObj = {
|
||||
url: 'http://' + obj.siteM7sHost + ':' + obj.siteM7sPort,
|
||||
id: obj.devId,
|
||||
channel: obj.devChannel,
|
||||
}
|
||||
this.pullVideoList('http://' + obj.siteM7sHost + ':' + obj.siteM7sPort, obj.devId, obj.devChannel)
|
||||
this.dataObj.url = 'http://' + obj.siteM7sHost + ':' + obj.siteM7sPort + '/hdl/' + obj.devId + '/' +
|
||||
obj.devChannel + '.flv'
|
||||
}
|
||||
} else {
|
||||
this.$u.toast('摄像头参数错误!');
|
||||
}
|
||||
this.dataObj.name = obj.label;
|
||||
console.log("当前flv地址:" + this.dataObj.url)
|
||||
let deviceObj = JSON.parse(decodeURIComponent(option.deviceObj));
|
||||
let channeObj = JSON.parse(decodeURIComponent(option.channeObj));
|
||||
this.videoObj.url = channeObj.hlsUrl;
|
||||
this.dataObj.flvUrl = channeObj.hdlUrl;
|
||||
this.dataObj.m3u8Url = channeObj.hlsUrl;
|
||||
this.dataObj.id = channeObj.devId;
|
||||
this.dataObj.name = deviceObj.name;
|
||||
this.dataObj.channeId = channeObj.channelId;
|
||||
this.dataObj.channeName = channeObj.name;
|
||||
this.ptzTypeUrl = channeObj.baseUrl;
|
||||
// if (obj.siteM7sHost && obj.siteM7sPort && obj.devId && obj.devChannel) {
|
||||
// if (obj.https) {
|
||||
// this.videoObj = {
|
||||
// url: 'https://' + obj.siteM7sHost + ':' + obj.siteM7sPort,
|
||||
// id: obj.devId,
|
||||
// channel: obj.devChannel,
|
||||
// }
|
||||
// this.pullVideoList('https://' + obj.siteM7sHost + ':' + obj.siteM7sPort, obj.devId, obj.devChannel)
|
||||
// this.dataObj.url = 'https://' + obj.siteM7sHost + ':' + obj.siteM7sPort + '/hdl/' + obj.devId + '/' +
|
||||
// obj.devChannel + '.flv'
|
||||
// } else {
|
||||
// this.videoObj = {
|
||||
// url: 'http://' + obj.siteM7sHost + ':' + obj.siteM7sPort,
|
||||
// id: obj.devId,
|
||||
// channel: obj.devChannel,
|
||||
// }
|
||||
// this.pullVideoList('http://' + obj.siteM7sHost + ':' + obj.siteM7sPort, obj.devId, obj.devChannel)
|
||||
// this.dataObj.url = 'http://' + obj.siteM7sHost + ':' + obj.siteM7sPort + '/hdl/' + obj.devId + '/' +
|
||||
// obj.devChannel + '.flv'
|
||||
// }
|
||||
// } else {
|
||||
// this.$u.toast('摄像头参数错误!');
|
||||
// }
|
||||
|
||||
console.log("当前flv地址:" + this.videoObj.url)
|
||||
// 为了防止苹果手机静音无法播放
|
||||
// uni.setInnerAudioOption({
|
||||
// obeyMuteSwitch: false
|
||||
|
|
@ -250,12 +284,12 @@
|
|||
console.log("ptzcmd", ptzcmd)
|
||||
this.btnToast(type);
|
||||
let params = {
|
||||
id: this.videoObj.id,
|
||||
channel: this.videoObj.channel,
|
||||
id: this.dataObj.id,
|
||||
channel: this.dataObj.channeId,
|
||||
ptzcmd: ptzcmd
|
||||
}
|
||||
let DefaultOpts = {
|
||||
url: this.videoObj.url + '/api/gb28181/control',
|
||||
url: this.ptzTypeUrl + '/gb28181/api/control',
|
||||
data: params,
|
||||
method: "GET",
|
||||
}
|
||||
|
|
@ -269,6 +303,9 @@
|
|||
}
|
||||
)
|
||||
},
|
||||
error(e){
|
||||
console.log("播放错误",error)
|
||||
},
|
||||
btnToast(type) {
|
||||
if (type == this.ptzType.up) {
|
||||
this.$refs.uToast.show({
|
||||
|
|
@ -337,6 +374,12 @@
|
|||
text-indent: 30rpx;
|
||||
}
|
||||
|
||||
.channe-name{
|
||||
font-size: 28rpx;
|
||||
line-height: 60rpx;
|
||||
margin: 0 30rpx 0 20rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 26rpx;
|
||||
font-weight: bold;
|
||||
|
|
|
|||
|
|
@ -1,28 +1,68 @@
|
|||
<template>
|
||||
<view id="video-list">
|
||||
<!-- <scroll-view scroll-y class="right-box"> -->
|
||||
<view class="video-list-box">
|
||||
<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" :up="upOption" @up="upCallback">
|
||||
<view class="page-view">
|
||||
<u-collapse :accordion="false">
|
||||
<u-collapse-item v-for="(item, index) in dataList"
|
||||
:key="item.id" :open="true">
|
||||
<template slot="title">
|
||||
<view class="box-title">
|
||||
<text>{{item.name}}</text>
|
||||
<text>{{item.children?`(${item.children.length})`:''}}</text>
|
||||
<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>
|
||||
</template>
|
||||
<view class="collapse-item">
|
||||
<view class="box-item" v-for="(val,i) in item.children" :key="val.id"
|
||||
@click="goDetail(val)">
|
||||
{{val.label}}
|
||||
<view class="item-header-right" :style="{color:item.status==1?'#52c41a':'#ff4d4f'}">
|
||||
{{item.status==1?'启用':'禁用'}}
|
||||
</view>
|
||||
</view>
|
||||
</u-collapse-item>
|
||||
</u-collapse>
|
||||
<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>
|
||||
<!-- </scroll-view> -->
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
|
@ -59,11 +99,19 @@
|
|||
mixins: [MescrollMixin],
|
||||
data(){
|
||||
return {
|
||||
customStyle: {
|
||||
padding: '30rpx 30rpx', // 注意驼峰命名，并且值必须用引号包括，因为这是对象
|
||||
margin:'0'
|
||||
},
|
||||
customStyle2: {
|
||||
padding: '30rpx 40rpx', // 注意驼峰命名，并且值必须用引号包括，因为这是对象
|
||||
margin:'0'
|
||||
},
|
||||
upOption:{
|
||||
noMoreSize: 4,
|
||||
textNoMore: '---- 已经到底啦 ----',
|
||||
empty:{
|
||||
tip: '~ 搜索无数据 ~' // 提示
|
||||
tip: '~ 暂无监控设备 ~' // 提示
|
||||
}
|
||||
},
|
||||
dataList:[],
|
||||
|
|
@ -81,9 +129,12 @@
|
|||
this.$api.videoApi.getVideoList(params).then(res => {
|
||||
console.log("getVideoList",res);
|
||||
if(res.code === 0){
|
||||
let curPageData = res.data && res.data.list;
|
||||
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);
|
||||
|
|
@ -101,32 +152,142 @@
|
|||
this.$u.toast('服务器开小差了呢，请您稍后再试')
|
||||
})
|
||||
},
|
||||
goDetail(item){
|
||||
console.log("跳转详情",item);
|
||||
let obj = {
|
||||
url:encodeURIComponent(item.url),
|
||||
name:item.label
|
||||
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-detail?obj='+encodeURIComponent(JSON.stringify(item))
|
||||
url:'./video-webview?deviceObj='+encodeURIComponent(JSON.stringify(deviceObj))
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.box-title{
|
||||
padding: 10rpx 24rpx;
|
||||
}
|
||||
/deep/ .u-collapse-head{
|
||||
border: 1px solid #f5f5f5;
|
||||
}
|
||||
/deep/ .u-collapse-content{
|
||||
// padding: 20rpx;
|
||||
}
|
||||
.box-item{
|
||||
<style lang="less" scoped>
|
||||
.video-list-box{
|
||||
min-height: 100%;
|
||||
background: #f2f1f6;
|
||||
padding: 20rpx;
|
||||
font-size: 30rpx;
|
||||
.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>
|
||||
|
|
@ -0,0 +1,101 @@
|
|||
<template>
|
||||
<view class="webview-box">
|
||||
<view v-if="!isChanneShow" class="loading-box">
|
||||
<u-loading size="100" :show="true"></u-loading>
|
||||
<view>加载中。。。</view>
|
||||
</view>
|
||||
<u-empty v-if="isChanneShow" text="视频通道为空" mode="list"></u-empty>
|
||||
<web-view v-if="isWebview" :src="webviewUrl"></web-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data(){
|
||||
return{
|
||||
isWebview:false,
|
||||
deviceObj:null,
|
||||
channeList:[],
|
||||
webviewHost:'',
|
||||
webviewUrl:'',
|
||||
isChanneShow:false,
|
||||
}
|
||||
},
|
||||
onLoad(option) {
|
||||
let configList = uni.getStorageSync('configList');
|
||||
let configIndex = uni.getStorageSync('configIndex');
|
||||
this.webviewHost = configList[configIndex].protocol + configList[configIndex].address;
|
||||
this.webviewUrl = configList[configIndex].protocol + configList[configIndex].address + '/video/web/h5/index.html';
|
||||
// this.webviewUrl = 'http://192.168.31.39:5501/index.html'
|
||||
console.log("option",option)
|
||||
let deviceObj = JSON.parse(decodeURIComponent(option.deviceObj));
|
||||
this.deviceObj = deviceObj;
|
||||
this.getChanneList(deviceObj.id)
|
||||
},
|
||||
methods:{
|
||||
getChanneList(id){
|
||||
console.log("id",id)
|
||||
this.$api.videoApi.getVideoChannelList({pid: id,page:1,pageSize:999}).then(res => {
|
||||
if(res.code == 0){
|
||||
// res.data.list = null;
|
||||
if(res.data.list && res.data.list.length>0){
|
||||
let channeList = res.data.list||[];
|
||||
// let arr = channeList.map(item=>{
|
||||
// return {
|
||||
// channeId:item.channeId,
|
||||
// name:item.name,
|
||||
// hdlUrl:item.hdlUrl,
|
||||
// }
|
||||
// })
|
||||
this.$nextTick(()=>{
|
||||
this.$set(this,'channeList',res.data.list);
|
||||
let url = this.webviewHost + '/video/web/h5/index.html?deviceObj=' + encodeURIComponent(JSON.stringify(this.deviceObj)) + '&channeList='+encodeURIComponent(JSON.stringify(channeList))
|
||||
// let url = 'http://192.168.31.39:5501/index.html?deviceObj=' + encodeURIComponent(JSON.stringify(this.deviceObj)) + '&channeList='+encodeURIComponent(JSON.stringify(channeList))
|
||||
this.$set(this,'webviewUrl',url);
|
||||
this.isWebview = true;
|
||||
})
|
||||
}else{
|
||||
this.isChanneShow = true;
|
||||
this.$u.toast('通道为空');
|
||||
this.$nextTick(()=>{
|
||||
this.$set(this,'channeList',[])
|
||||
})
|
||||
}
|
||||
|
||||
}else{
|
||||
this.$u.toast(res.msg);
|
||||
}
|
||||
}, error => {
|
||||
this.$u.toast('服务器开小差了呢，请您稍后再试')
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
page{
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style scoped lang="less">
|
||||
.webview-box{
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
.loading-box{
|
||||
position: absolute;
|
||||
left: auto;
|
||||
right: auto;
|
||||
top: auto;
|
||||
bottom: auto;
|
||||
text-align: center;
|
||||
>view{
|
||||
font-size: 30rpx;
|
||||
line-height: 80rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue