ROBOT-APP/code/HBX/pages/native/work.nvue

<template>
	<view class="nv-work">
		<image class="banner" src="../../static/bg.png"></image>
		<view class="selectTap">
			<uni-icons color="#fff" type="home" size="16"></uni-icons>
			<picker mode="selector" :value="pickeIndex" range-key="robotName" :range="pickerList" @change="changePicker">
				<text class="t1">{{robotName}}</text>
			</picker>
			<uni-icons color="#fff" type="bottom" size="16"></uni-icons>
		</view>

		<view class="nv-video" elevation="3px">
			<view class="top">
				<text @click="changeVideo(1)" :class="[{active:Aindex == 1},{t2:true}]">可见光视频</text>
				<text class="t1"></text>
				<text @click="changeVideo(2)" :class="[{active:Aindex == 2},{t2:true}]">红外视频</text>
			</view>
			<view class="videoBox">
				<video :controls="false" class="myVideo" object-fit="fill" poster="" :src="videoSrc" @error="videoErrorCallback"
					></video>
			</view>
		</view>
		<view class="nv-list" elevation="3px">
			<view class="top">
				<view class="top-v">
					<text class="icons">&#xe6f9;</text>
					<text class="t2 ">环境</text>
				</view>
				<uni-transition ref="ani" :show="true">
					<uni-icons @click="refresh" class="" type="refreshempty" color="#999" size="24"></uni-icons>
				</uni-transition>
				
			</view>
			<view class="center">
				<view class="ul">
					<view class="li" v-for="(item,index) in envirList" :key="index">
						<text class="icon">{{filterType(item.type)}}</text>
						<text class="t1">{{item.name}}</text>
						<view class="vt2">
							<text class="t2"  :style="{color:item.isWarning ?'#ED8B5A':''}">{{item.value || '-'}}</text>
						<!-- 	<text class="t3">{{item.unit}}</text> -->
						</view>
						
					</view>
					<view class="empty" v-if="envirList.length== 0 && !loading">
						<text class="icon emptyicon">&#xe604;</text>
						<text class="e-t1">暂无数据</text>
					</view>
				</view>
			</view>
		</view>
		<!-- <view v-if="!Token">
			<button @click="login">暂未登录</button>
		</view> -->
		<uni-popup ref="popupqx" type="dialog">
			<uni-popup-dialog mode="base" title="提示" content="是否开启系统通知权限功能" :duration="2000" @confirm="confirmQx">
			</uni-popup-dialog>
		</uni-popup>

	</view>
</template>

<script>
	var domModule = weex.requireModule('dom');
	domModule.addRule('fontFace', {
		'fontFamily': "iconfont",
		'src': "url('/static/iconfont.ttf')"
	})
	var bitmap = null;
	import permision from "@/js_sdk/wa-permission/permission.js"
	import {
		BeforeNavigateTo
	} from '../../common/utils.js'
	import {
		mapGetters
	} from 'vuex'
	import {
		getRobotList,
		addTask,
		getEnvData
	} from '@/common/api.js'
	export default {
		data() {
			return {
				showEmplty: false,
				robotName: '-',
				robotData: null,
				pickerList: [],
				loading:true,
				pickeIndex:0,
				step:1,
				Aindex: 1,
				videoSrc: '',
				envirList: []
			}
		},
		onLoad() {
			// this.$nextTick(() => {
			// 	if (!this.Token) {
			// 		uni.reLaunch({
			// 			url: '/pages/native/login'
			// 		})
			// 	} else {
			// 		//this.judgeIosPermission()
			// 	}
				
			// })
			uni.$on('DpopLog1', (data) => {
				addTask({
					robotId: this.robotData.robotId
				}).then(res => {
					
				}).catch(e => {
					console.log(e)
				})
			});
			uni.$on('xBpopLog2', (data) => {
				setTimeout(() =>{
					const csubNVue1 = uni.getSubNVueById('DpopLog1')
					csubNVue1.show('fade-in', 300, () => {
					
					});
				},300)
				
			});
			uni.$on("backhome",() =>{
				this.robotName = ""
				this.envirList = []
				this.pickerList = []
				this.getRobotList()
			})
			//uni.preloadPage({url: "/pages/native/work/inProcess"});
		},
		mounted() {
			this.getRobotList()
			
		},
		onReady() {
			this.$refs.ani.init({
			})
		},
		computed: {
			...mapGetters([
				'Token'
			]),
		},
		onNavigationBarButtonTap(e) {
			uni.navigateTo({
				url:'/pages/webview/popSelect'
			})
		},
		methods: {
			refresh(){
				this.$refs.ani.step({
					rotate:`${720*this.step}`
				},{
					timingFunction: 'ease',
					duration: 1000
				})
				this.$refs.ani.run(()=>{
				    this.step+=1
				})
				this.getEnvData()
			},
			getRobotList(){
				getRobotList().then(res => {
					this.pickerList = res.filter(item =>{
						return item.followed == 1
					}) || []
					if(this.pickerList.length >0){
						this.robotName = this.pickerList[0].robotName
						this.robotData = this.pickerList[0]
						//this.videoSrc = 'rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mov'
						this.videoSrc = `rtsp://${this.robotData.ptzLoginUser}:${this.robotData.ptzPassword}@${this.robotData.ip}:554/h264/ch01/main/av_stream`
						this.getEnvData()
					}
					else{
						this.robotName = null
						this.robotData = null
						this.videoSrc = null
					}
				})
			},
			getEnvData() {
				getEnvData({
					robotId: this.robotData.robotId
				}).then(res => {
					this.envirList = res
					this.loading = false
				}).catch(e => {
					this.envirList = []
					this.loading = false
					console.log(e)
				})
			},
			changeVideo(index) {
				this.Aindex = index
				index == 1 ?
					this.videoSrc =
					`rtsp://${this.robotData.ptzLoginUser}:${this.robotData.ptzPassword}@${this.robotData.ip}:554/h264/ch01/main/av_stream` :
					this.videoSrc =
					`rtsp://${this.robotData.ptzLoginUser}:${this.robotData.ptzPassword}@${this.robotData.ip}:554/h264/ch02/main/av_stream`
					

			},
			changePicker(e) {
				let data = this.pickerList[e.detail.value]
				this.Aindex = 1
				this.pickeIndex = e.detail.value
				this.robotData = data
				this.robotName = data.robotName
				this.videoSrc = `rtsp://${data.ptzLoginUser}:${data.ptzPassword}@${data.ip}:554/h264/ch01/main/av_stream`
				this.getEnvData()
				console.log(this.videoSrc)
			},
			videoErrorCallback(e) {
				console.log(e)
			},
			confirmQx() { //权限设置
				permision.gotoAppPermissionSetting()
			},
			async judgeIosPermission() {
				permision.requestAndroidPermission('android.permission.BROADCAST_WAP_PUSH').then(res => {
					console.log(res)
				})
			},
			login() {
				BeforeNavigateTo({
					url: '/pages/native/login'
				}, true)
			},
			filterType(type) {
				switch (type) {
					case 'HUMIDITY':
						return '\ue871';
					case 'TEMPERATURE':
						return '\ue71a';
					case 'CO':
						return '\ue723'
					case 'O3':
						return '\ue6e0'
					case 'SF6':
						return '\ue71e'
					case 'FIRE':
						return '\ue669'
					case 'O2':
						return '\ue635'	
					case 'MQ':
						return '\ue625'
					case 'LIGHT':
						return '\ue673'
					case 'PM':
						return '\uea32'
					case 'CO2':
						return '\ueb95'
					case 'AIRPRESSURE':
						return '\ue668'
					case 'RAININESS':
						return '\ue600'
					case 'WINDDIRECTION':
						return '\ue783'
					case 'WINDPOWER':
						return '\ue696'
					case 'WINDSPEED':
						return '\ue606'
					case 'ANXIOUSBURNTFLAVOUR':
						return '\ue614'
					case 'RAINFALL':
						return '\uea2e'
					case 'PM10':
						return '\ue8d5'
					default :
					return '\ue613'
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.icon {
		font-family: iconfont;
		font-size: 26px;
		color: #108EE9;
		opacity: 0.7;
	}

	.icons {
		font-family: iconfont;
		color: #0581FD;
		font-size: 26px;
	}
	.empty{
		width: 750rpx;
		height: 500rpx;
		align-items: center;
		justify-content: center;
		.e-t1{
			font-size: 28rpx;
			color: #0099FF;
			padding:20rpx;
		}
		.emptyicon{
			font-size: 80px !important;
		}
	}
	.nv-work {
		.banner {
			width: 750rpx;
			height: 348rpx;
			background: #0581FD;
		}

		.selectTap {
			position: absolute;
			top: 20rpx;
			z-index: 99999;
			left: 20rpx;
			align-items: center;
			display: flex;
			flex-direction: row;

			.t1 {
				color: #fff;
				font-size: 28rpx;
				padding: 0 10rpx 0 5rpx;
			}
		}

		.nv-video {
			position: absolute;
			background-color: #FFFFFF;
			border-radius: 18rpx;
			box-shadow: 1px 2px 10px 0px #E5E5E5;
			top: 80rpx;
			z-index: 99999;
			left: 20rpx;
			right: 20rpx;

			.videoBox {
				.myVideo {
					width: 680rpx;
					height: 360rpx;
				}

				width: 680rpx;
				padding-bottom: 30rpx;
				margin:0 20rpx;
			}

			.top {
				display: flex;
				flex-direction: row;
				align-items: center;
				padding: 30rpx 22rpx;

				.t1 {
					width: 2px;
					height: 16px;
					margin: 0 10rpx;
					background: #0581FD;
					border-radius: 2px;
				}

				.t2 {
					color: #666;
					font-size: 28rpx;
				}

				.active {
					color: #333;
					font-weight: bold;
				}
			}
		}

		.nv-list {
			z-index: 99999;
			margin: 240rpx 20rpx 50rpx 20rpx;
			background-color: #FFFFFF;
			border-radius: 18rpx;
			box-shadow: 1px 2px 10px 0px #E5E5E5;

			.top {
				display: flex;
				flex-direction: row;
				border-bottom: 1px solid #E5E5E5;
				justify-content: space-between;
				align-items: center;
				padding: 20rpx 0;
				margin: 0rpx 22rpx 0 22rpx;
				.top-v{
					flex-direction: row;
					align-items: center;
				}
				.active{
					animation-name: ares;
					animation-duration: 1s;
					animation-iteration-count: 3;
				}
				
				.t2 {
					color: #333;
					font-size: 30rpx;
					font-weight: bold;
					padding-left: 10rpx;
				}

			}

			.center {
				.ul {
					display: flex;
					flex-direction: row;
					flex-wrap: wrap;

					padding-bottom: 35rpx;
					text-align: center;

					.li {
						margin-top: 35rpx;
						align-items: center;
						text-align: center;
						justify-content: center;
						display: flex;
						flex-direction: column;
						width: 177.5rpx;
						.vt2{
							display: flex;
							flex-direction: row;
							align-items: center;
							justify-content: center;
						}
						.t1 {
							color: #0581FD;
							font-size: 22rpx;
							margin-top: 5rpx;
						}
						.t3{
							font-size: 22rpx;
							color: #999;
						}
						.t2 {
							color: #58B453;
							font-size: 24rpx;
							margin-top: 5rpx;
						}
					}
				}
			}

		}
	}
	@keyframes ares {
		0%{
			transform:rotate(0deg);
		}
		100%{
			transform:rotate(360deg);
		}
	}
</style>