smartswrtch-app/page_user/wifijoint/index.vue

<template>
	<view class="">
		<u-navbar title="设备控制" :border-bottom="false" :background="bgc" title-color='#262B37' back-icon-color="#262B37" title-size='36'
			height='50'></u-navbar>
        <view class="title">
        	控制台
        </view>
		<view class="shuom">
			请扫描设备上的二维码
		</view>
		<view class="iptbox">
			<view class="qrcode" @click="qrcode()">
				<image src="https://api.ccttiot.com/smartmeter/img/static/uy7BNwAMIKwvstqFnRhs" mode=""></image>
			</view>
			<input type="text" class="ips" v-model="storeId" placeholder="请扫描设备上的二维码" style="margin-left: 32rpx;"
				placeholder-class="my-placeholder" />
		</view>
		<view class="machao">
			MAC号：{{obj.mac == undefined ? '--' : obj.mac}}
		</view>
		<view class="machao">
			电压：{{obj.voltage == undefined ? '--' : obj.voltage}}V
		</view>
		<view class="machao">
			功率：{{obj.realTimePower == undefined ? '--' : obj.realTimePower}}KW
		</view>
		<view class="machao">
			电流：{{obj.electricity == undefined ? '--' : obj.electricity}}A
		</view>
		<view class="machao">
			网络：<text v-if="onlineStatus == '离线'" style="color: red;">离线</text> <text v-if="onlineStatus == '在线'" style="color: green;">在线</text>
		</view>
		<view class="machao">
			状态：<text v-if="powerStatus == '关闭'" style="color: red;">关闭</text> <text v-if="powerStatus == '开启'" style="color: green;">开启</text>
		</view>
		<view class="machao">
			最后在线时间：{{obj.lastOnlineTime == undefined ? '--' : obj.lastOnlineTime}}
		</view>
		
		<view class="list">
			<view class="anniulist">
				<view class="anniu" @click="btnkq">
					开启
				</view>
				<view class="anniu" @click="btngb">
					关闭
				</view>
				<view class="anniu" @click="btnsx">
					刷新
				</view>
			</view>
			<view class="fanhui" @click="btnfh">
				返回
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgc: {
					backgroundColor: "#F7FAFE",
				},
				storeId: '',
				obj:{},
				id:'',
				onlineStatus:'--',
				powerStatus:'--'
			}
		},
		onLoad(options) {
			if(options.sn){
				this.storeId = options.sn
				this.getsn()
			}
		},
		// 分享到好友（会话）
		  onShareAppMessage: function () {  
		    return {  
		      title: '创想物联',  
		      path: '/pages/shouye/index'  
		    }  
		  },  
		  
		  // 分享到朋友圈  
		  onShareTimeline: function () {  
		    return {  
		      title: '创想物联',  
		      query: '',  
		      path: '/pages/shouye/index'  
		    }  
		  },
		methods: {
             qrcode() {
             	uni.scanCode({
             		onlyFromCamera: true,
             		scanType: ['qrCode'],
             		success: res => {
             			function getQueryParam(url, paramName) {
             				let regex = new RegExp(`[?&]${paramName}=([^&]*)`)
             				let results = regex.exec(url);
             				return results ? decodeURIComponent(results[1].replace(/\+/g, ' ')) : null
             			}
             			let sceneValue = res.result
             			let decodedValue = decodeURIComponent(sceneValue)
             			let id = getQueryParam(decodedValue, 's')
             			this.storeId = id
						this.getsn()
             		},
             		fail: err => {
             			console.error('扫描失败：', err)
             			uni.showToast({
             				title: '扫描失败',
             				icon: 'none'
             			})
             		}
             	})
             },
			 
			 getsn(){
				 this.$u.get(`/app/device/${this.storeId}/bySn`).then(res => {
				 	if (res.code == 200) {
				 		this.obj = res.data
						this.id = res.data.deviceId
						if(res.data.onlineStatus == 0){
							this.onlineStatus = '离线'
						}else if(res.data.onlineStatus == 1){
							this.onlineStatus = '在线'
						}
						if(res.data.powerStatus == 0){
							this.powerStatus = '关闭'
						}else if(res.data.powerStatus == 1){
							this.powerStatus = '开启'
						}
						uni.showToast({
							title: res.msg,
							icon: 'success',
							duration: 2000,
						})
				 	}else{
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000,
						})
					}
				 })
			 },
			 
			 // 返回录入
			 btnfh(){
				uni.navigateBack()
			 },
			 
			 // 开启
			 btnkq(){
				 this.$u.put(`/app/device/admin/${this.id}/switch?open=true`).then((res) => {
				 	if (res.code == 200) {
						setTimeout(()=>{
							this.btnsx()
						},1000)
				 		uni.showToast({
				 			title: res.msg,
				 			icon: 'success',
				 			duration: 2000
				 		})
				 	} else {
				 		uni.showToast({
				 			title: res.msg,
				 			icon: 'none',
				 			duration: 2000
				 		})
				 	}
				 })
			 },
			 // 关闭
			 btngb(){
				 this.$u.put(`/app/device/admin/${this.id}/switch?open=false`).then((res) => {
				 	if (res.code == 200) {
						setTimeout(()=>{
							this.btnsx()
						},1000)
				 		uni.showToast({
				 			title: res.msg,
				 			icon: 'success',
				 			duration: 2000
				 		})
				 	} else {
				 		uni.showToast({
				 			title: res.msg,
				 			icon: 'none',
				 			duration: 2000
				 		})
				 	}
				 })
			 },
			 // 刷新
			 btnsx(){
				 this.$u.get(`/app/device/${this.id}/refreshIot`).then((res) => {
					 if(res.code == 200){
						 this.getsn()
						 uni.showToast({
						 	title: res.msg,
						 	icon: 'success',
						 	duration: 2000
						 })
					 }else{
						 uni.showToast({
						 	title: res.msg,
						 	icon: 'none',
						 	duration: 2000
						 })
					 }
				 })
			 }

		
		}
	}
</script>

<style lang="less">
	.list{
		position: fixed;
		bottom: 50rpx;
		left: 50%;
		transform: translateX(-50%);
		.anniulist{
			width: 658rpx;
			margin: auto;
			margin-top: 200rpx;
			text-align: left;
			font-size: 32rpx;
			display: flex;
			justify-content: space-between;
			.anniu{
				width: 30%;
				height: 90rpx;
				border-radius: 20rpx;
				background-color: #8883f0;
				color: #fff;
				font-size: 32rpx;
				text-align: center;
				line-height: 90rpx;
			}
		}
		.fanhui{
			width: 658rpx;
			height: 90rpx;
			border-radius: 20rpx;
			background-color: #8883f0;
			color: #fff;
			font-size: 32rpx;
			text-align: center;
			line-height: 90rpx;
			margin: auto;
			margin-top: 50rpx;
		}
	}
	.machao{
		width: 658rpx;
		margin: auto;
		margin-top: 20rpx;
		text-align: left;
		font-size: 32rpx;
	}
	.title{
		font-size: 70rpx;
		font-weight: 600;
		text-align: left;
		width: 658rpx;
		margin: auto;
		margin-top: 30rpx;
	}
	.shuom{
		width: 658rpx;
		margin: auto;
		margin-top: 30rpx;
		text-align: left;
		font-size: 32rpx;
	}
	.iptbox {
		display: flex;
		align-items: center;
		flex-wrap: nowrap;
		padding: 22rpx;
		margin: 28rpx auto 0;
		width: 658rpx;
		height: 88rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.15);
		border-radius: 20rpx 20rpx 20rpx 20rpx;
	
		.qrcode {
			padding-right: 20rpx;
			border-right: 2rpx solid #D8D8D8;
	
			image {
				width: 54rpx;
				height: 54rpx;
			}
		}
	
		.ips {
			width: 630rpx;
	
		}
	
		image {
			width: 18rpx;
			height: 32rpx;
		}
	
		.my-placeholder {
			font-weight: 400;
			font-size: 32rpx;
			color: #808080;
		}
	}
      
</style>