video.vue 3.44 KB
<template>
	<div>
		<headerComp  :leftImgSrc="leftImg" :title="titleStr" :rightImgSrc="rightImg" @leftClick="backFun" @rightClick="conditionFun"></headerComp>
		<iframe id="iframeId" :src="ifSrc" frameborder="0" width="100%" height="236"  scrolling="yes"></iframe>
		<uni-collapse @change="change">
			<uni-collapse-item :title="item.org_name" open="true" v-for="item in deviceList">
				<view style="padding: 30upx;padding-left: 60upx;" @tap="tapChannel(channelItem)" :class="[channelItem.chan_id==isActiveChannel?'focusClass':'',channelItem.status==0?'disableClass':'']" v-for="channelItem in item.channels"> {{channelItem.chan_name}} </view>
			</uni-collapse-item>
		</uni-collapse>
	</div>
</template>

<script>
	import headerComp from '../../../components/header'
	import backArrow from '../../../static/header/backArrow.png'
	import other from '../../../static/header/other.png'
	import circlebar from '../../../components/circleBarChart'
	import linechart from '../../../components/lineChart'
	import uniCollapse from "../../../components/collapse/uni-collapse/uni-collapse.vue"
	import uniCollapseItem from "../../../components/collapse/uni-collapse-item/uni-collapse-item.vue"
	export default{
		data(){
			return{
				titleStr:'视频巡店',
				leftImg:backArrow,
				rightImg:other,
				atoken:'',
				ifSrc:'',
				isActiveChannel:'1000000001001',
				accountId:[],
				deviceList:[]
			}
		},
		onLoad: function (option) {
			this.ifSrc=window.location.protocol+'//'+window.location.host+'/appweb/static/video.html'
			uni.getStorage({
				key:'accountList',
				success:(res)=>{
					if(res.data){
						var list=JSON.parse(res.data);
						list.forEach((item,index)=>{
							if(index==0){
								this.accountId.push(item.id)
							}
						})
						uni.getStorage({
							key:'selectAccountIdArr',
							success:(res)=> {
								this.accountId=JSON.parse(res.data);
							},
							complete: (res) => {
							}
						})
					}
				}
			})
			uni.getStorage({
				key:'atoken',
				success:(res)=>{
					this.atoken=res.data;
				}
			})
			this.getDeviceList();
		},
		onReady:function(){
		},
		computed: {
			i18n() {
				return this.$t("index")
			}
		},
		components:{
			headerComp,uniCollapse,uniCollapseItem
		},
		methods: {
			change(){
				console.log('change')
			},
			tapChannel(item){
				if(item.status==1){
					this.isActiveChannel=item.chan_id;
					localStorage.setItem('channelId',item.chan_id);
					document.getElementById('iframeId').contentWindow.location.reload(true);
				}
			},
			backFun(){
				uni.reLaunch({
					url:"../profile",
				})
			},
			conditionFun(){
				uni.navigateTo({
					url:'../../list/oneMallList?url=../profile/video/video'
				})
			},
			getDeviceList(){
				//window.url+
				//this.accountId[0]
				uni.request({
					url:window.url+'/deviceMappings/shilian/devices',
					data:{
						mallId:this.accountId[0],
						_t:Date.parse(new Date())/1000
					},
					header: {
						'Authorization': this.atoken //自定义请求头信息
					},
					method:'GET',
					success:(res) =>{
						this.deviceList=res.data.data;
						if(this.deviceList.length>0&&this.deviceList[0].channels.length>0){
							this.isActiveChannel=this.deviceList[0].channels[0].chan_id;
							localStorage.setItem('channelId',this.isActiveChannel);
							document.getElementById('iframeId').contentWindow.location.reload(true);
						}
					}
				})
			}
		},
	}
</script>

<style>
	.focusClass{
		color: #0069FF;
	}
	.disableClass{
		opacity: 0.3;
	}
</style>