fix(物联网): 功能添加kw，解决多选未生效bug,升级1.0.34

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)
 			}

components/iot-components/input/iots-input.vue

@@ -20,7 +20,7 @@
 		props:{
 			// 选择值
 			value: {
-				type: [String,null],
+				type: [String,Number],
 				default: ''
 			},
 			// 图标
@@ -51,11 +51,19 @@
 			}
 		},
 		created() {
-			this.inputValue = this.value;
+			if(this.value!=null){
+				this.inputValue = this.value+'';
+			}else{
+				this.inputValue = this.value;
+			}
 		},
 		watch: {
 		  value(newValue) {
-		    this.inputValue = newValue;
+				if(newValue!=null){
+					this.inputValue = newValue+'';
+				}else{
+					this.inputValue = newValue;
+				}
 		  }
 		},
 		methods:{

manifest.json

@@ -2,8 +2,8 @@
     "name" : "物联网可视化",
     "appid" : "__UNI__604B8F1",
     "description" : "",
-    "versionName" : "1.0.25",
+    "versionName" : "1.0.34",
-    "versionCode" : 1025,
+    "versionCode" : 1034,
     "transformPx" : false,
     /* 5+App特有相关 */
     "app-plus" : {

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", //启动页面，必选

pages/iots/device/device-ability-detail.vue

@@ -175,13 +175,16 @@
 				if(this.verification()){
 					let obj = {};
 					this.dataList.forEach((item)=>{
-						obj[item.ioKey]=item.value
+						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)

pages/iots/device/device-control.vue

@@ -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('执行成功')

pages/iots/device/device-detail.vue

@@ -170,7 +170,7 @@
 				 :disabled="true"
 				 :name="item.name"
 				 v-model="item.value"
-				 :unit="item.ioObj?item.ioObj.unit?item.ioObj.unit:'':''"
+         :unit="item.ioObj ? item.ioObj.unit ?item.ioObj.unit:'': ''"
 				 @change="downData($event,index)"
 				 @clickLog="clickLog(index)"
 				></iots-input>
@@ -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()
 							})
 						}

pages/tabbar/login.vue

@@ -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);
 					}

pages/tabbar/module/iots2.vue

@@ -170,18 +170,25 @@
 			}
 		},
 		watch: {
-			// showToggle() {
+			showToggle() {
-			// 	console.log("show变化")
+				console.log("show变化")
-			// 	clearInterval(this.timer);
+				// clearInterval(this.timer);
-			// 	this.timer = setInterval(() => {
+				// this.timer = setInterval(() => {
-			// 		this.mescroll.resetUpScroll();
+				// 	this.mescroll.resetUpScroll();
-			// 		console.log("当前起始项Index为", this.showStartIndex, this.showEndIndex);
+					this.getDeviceInfo();
-			// 	}, 5000)
+					if(this.dataList.length>0){
-			// },
+						this.resetDeviceList();
-			// hideToggle() {
+					}
-			// 	console.log("hide变化")
+					console.log("当前起始项Index为", this.showStartIndex, this.showEndIndex);
-			// 	clearInterval(this.timer);
+				// }, 5000)
-			// },
+			},
+			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 => {})
 			}
 		}
 	}

pages/tabbar/workbench.vue

@@ -108,11 +108,12 @@
 				}
 			})
 			this.getUserInfo();
-			this.getUserMenu();
+			
 			this.tabIndex = 1;
 			this.tabIndex = 0;
 		},
 		onShow() {
+			this.getUserMenu();
 			this.getUnreadNewNum();
 		},
 		mounted() {

pages/video/video-detail.vue

@@ -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">
+			<!-- #ifdef APP-PLUS -->
-				<!-- <cover-view class="btn-toggle" v-if="btnToggle" @click="quitFullScreen">
+			<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> -->
+				</view>
-			</video>
+			</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: '',
+					flvUrl: '',
-					name: ''
+					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 deviceObj = JSON.parse(decodeURIComponent(option.deviceObj));
-			let obj = JSON.parse(decodeURIComponent(option.obj));
+			let channeObj = JSON.parse(decodeURIComponent(option.channeObj));
-			if (obj.siteM7sHost && obj.siteM7sPort && obj.devId && obj.devChannel) {
+			this.videoObj.url = channeObj.hlsUrl;
-				if (obj.https) {
+			this.dataObj.flvUrl = channeObj.hdlUrl;
-					this.videoObj = {
+			this.dataObj.m3u8Url = channeObj.hlsUrl;
-						url: 'https://' + obj.siteM7sHost + ':' + obj.siteM7sPort,
+			this.dataObj.id = channeObj.devId;
-						id: obj.devId,
+			this.dataObj.name = deviceObj.name;
-						channel: obj.devChannel,
+			this.dataObj.channeId = channeObj.channelId;
-					}
+			this.dataObj.channeName = channeObj.name;
-					this.pullVideoList('https://' + obj.siteM7sHost + ':' + obj.siteM7sPort, obj.devId, obj.devChannel)
+			this.ptzTypeUrl = channeObj.baseUrl;
-					this.dataObj.url = 'https://' + obj.siteM7sHost + ':' + obj.siteM7sPort + '/hdl/' + obj.devId + '/' +
+			// if (obj.siteM7sHost && obj.siteM7sPort && obj.devId && obj.devChannel) {
-						obj.devChannel + '.flv'
+			// 	if (obj.https) {
-				} else {
+			// 		this.videoObj = {
-					this.videoObj = {
+			// 			url: 'https://' + obj.siteM7sHost + ':' + obj.siteM7sPort,
-						url: 'http://' + obj.siteM7sHost + ':' + obj.siteM7sPort,
+			// 			id: obj.devId,
-						id: obj.devId,
+			// 			channel: obj.devChannel,
-						channel: obj.devChannel,
+			// 		}
-					}
+			// 		this.pullVideoList('https://' + obj.siteM7sHost + ':' + obj.siteM7sPort, obj.devId, obj.devChannel)
-					this.pullVideoList('http://' + obj.siteM7sHost + ':' + obj.siteM7sPort, obj.devId, obj.devChannel)
+			// 		this.dataObj.url = 'https://' + obj.siteM7sHost + ':' + obj.siteM7sPort + '/hdl/' + obj.devId + '/' +
-					this.dataObj.url = 'http://' + obj.siteM7sHost + ':' + obj.siteM7sPort + '/hdl/' + obj.devId + '/' +
+			// 			obj.devChannel + '.flv'
-						obj.devChannel + '.flv'
+			// 	} else {
-				}
+			// 		this.videoObj = {
-			} else {
+			// 			url: 'http://' + obj.siteM7sHost + ':' + obj.siteM7sPort,
-				this.$u.toast('摄像头参数错误!');
+			// 			id: obj.devId,
-			}
+			// 			channel: obj.devChannel,
-			this.dataObj.name = obj.label;
+			// 		}
-			console.log("当前flv地址:" + this.dataObj.url)
+			// 		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,
+					id: this.dataObj.id,
-					channel: this.videoObj.channel,
+					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({
@@ -336,6 +373,12 @@
 			line-height: 100rpx;
 			text-indent: 30rpx;
 		}
+		
+		.channe-name{
+			font-size: 28rpx;
+			line-height: 60rpx;
+			margin: 0 30rpx 0 20rpx;
+		}
 
 		.title {
 			font-size: 26rpx;

pages/video/video-list.vue

@@ -1,28 +1,68 @@
 <template>
-	<view id="video-list">
+	<view class="video-list-box">
-		<!-- <scroll-view scroll-y class="right-box"> -->
 		<mescroll-body ref="mescrollRef"  @init="mescrollInit" @down="downCallback" :up="upOption" @up="upCallback">
-			<view class="page-view">
+			<view class="video-list">
-				<u-collapse :accordion="false">
+				<view class="video-item" v-for="(item,index) in dataList" :key="item.id">
-					<u-collapse-item v-for="(item, index) in dataList"
+					<view class="item-header">
-						:key="item.id" :open="true">
+						<view class="item-header-left">
-						<template slot="title">
+							设备编号：{{item.deviceId}}
-							<view class="box-title">
+						</view>
-								<text>{{item.name}}</text>&nbsp;&nbsp;
+						<view class="item-header-right" :style="{color:item.status==1?'#52c41a':'#ff4d4f'}">
-								<text>{{item.children?`(${item.children.length})`:''}}</text>
+							{{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>
-						</template>
+							<view class="content-title-box-right">
-						<view class="collapse-item">
+								<view class="content-title-txt">
-							<view class="box-item" v-for="(val,i) in item.children" :key="val.id"
+									{{item.name}}
-								@click="goDetail(val)">
+								</view>
-								{{val.label}}
+								<view class="content-title-info">
+									设备型号：{{item.model||'-'}}
+								</view>
 							</view>
 						</view>
-					</u-collapse-item>
+						<view class="item-content-list">
-				</u-collapse>
+							<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){
+			getChanneList(id,index){
-				console.log("跳转详情",item);
+				console.log("id",id,index)
-				let obj = {
+				this.$api.videoApi.getVideoChannelList({pid: id,page:1,pageSize:999}).then(res => {
-					url:encodeURIComponent(item.url),
+					if(res.code == 0){
-					name:item.label
+						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">
+<style lang="less" scoped>
-	.box-title{
+	.video-list-box{
-		padding: 10rpx 24rpx;
+		min-height: 100%;
-	}
+		background: #f2f1f6;
-	/deep/ .u-collapse-head{
-		border: 1px solid #f5f5f5;
-	}
-	/deep/ .u-collapse-content{
-		// padding: 20rpx;
-	}
-	.box-item{
 		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>

pages/video/video-webview.vue

@@ -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>