<template>
<view class="pages">
<u-navbar title="设备控制" :border-bottom="false" :background="bgc" title-color='#262B37' title-size='38'
height='50' :custom-back='backPage'></u-navbar>
<view class="title">
<text>控制台</text>
</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="sn" placeholder="请扫描设备上的二维码" style="margin-left: 32rpx;"
placeholder-class="my-placeholder" @input="search()" />
</view>
<view class="txt">
MAC：{{carInfo.mac}}
</view>
<view class="txt" style="margin-top: 100rpx;">
信号：{{carInfo.signalStrength}}
</view>
<view class="txt">
电压：{{carInfo.voltage}}V
</view>
<view class="txt">
网络：
<span v-if="carInfo.onlineStatus==0">离线</span>
<span style="color: #8883F0;" v-if="carInfo.onlineStatus==1">在线</span>
</view>
<view class="txt">
锁状态：
<span v-if="carInfo.lockStatus==0">关</span>
<span style="color: #8883F0;" v-if="carInfo.lockStatus==1">开</span>
</view>
<view class="btnbox">
<view class="btn_box">
<view class="btn1" @click="btn(0)">
开锁
</view>
<view class="btn1" @click="btn(1)">
关锁
</view>
</view>
<view class="btn_box" style="margin-top: 20rpx;">
<view class="btn1" @click="btn(3)">
响铃
</view>
<view class="btn1" @click="btn(4)">
更新
</view>
</view>
<view class="btn2" style="margin-top: 20rpx;" @click="back()">
返回扫描
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
titleflag: false, //提示隐藏
bgc: {
backgroundColor: "#F7FAFE",
},
sn: '',
carInfo:{}
}
},
onLoad(e) {
if (e.sn) {
this.sn = e.sn
this.deviceInfo()
}
},
onShow() {
},
mounted() {
// this.videoContext = uni.createVideoContext('myVideo', this)
},
methods: {
backPage(){
uni.redirectTo({
url:'/pages_admin/worke/bind_sn'
})
},
back(){
uni.reLaunch({
url:'/pages_admin/worke/bind_sn'
})
},
search(){
if (this.sn && this.sn.length === 7 && /^\d+$/.test(this.sn)) {
// 当 this.sn 满足条件时调用 deviceInfo
this.deviceInfo();
} else {
console.log('SN 不是 7 位数字');
// 你可以在这里处理不符合条件的情况，比如提示用户输入正确的 SN
}
},
qrcode() {
uni.scanCode({
onlyFromCamera: true,
scanType: ['qrCode'],
success: res => {
let sn = null;
let queryParams = res.result.split('?')[1];
if (queryParams) {
let params = queryParams.split('&');
params.forEach(param => {
let [key, value] = param.split('=');
if (key === 'sn') {
sn = value;
}
});
}
this.sn = sn
console.log(res.result);
if (this.sn != '') {
this.deviceInfo()
}
},
fail: err => {
console.error('扫描失败：', err);
uni.showToast({
title: '扫描失败',
icon: 'none'
});
}
});
},
deviceInfo() {
this.$u.get('/app/device/info?sn=' + this.sn).then((res) => {
if (res.code === 200) {
this.carInfo=res.data
}
}).catch(error => {
console.error("Error fetching area data:", error);
});
},
btn(num) {
if (num == 0) {
uni.showLoading({
title: '加载中...'
})
console.log('点击了....1');
this.$u.post('/appVerify/admin/unlocking?sn=' + this.sn).then((res) => {
if (res.code == 200) {
// 处理接口返回的数据，将边界数据转换为地图组件需要的折线结构
this.deviceInfo()
uni.showToast({
title: '操作成功',
icon: 'none',
duration: 2000
});
} else {
uni.hideLoading()
}
}).catch(error => {
console.error("Error fetching area data:", error);
});
} else if (num == 1) {
uni.showLoading({
title: '加载中...'
})
console.log('点击了....2');
this.$u.post('/appVerify/admin/lock?sn=' + this.sn).then((res) => {
if (res.code == 200) {
// 处理接口返回的数据，将边界数据转换为地图组件需要的折线结构
this.deviceInfo()
uni.showToast({
title: '操作成功',
icon: 'none',
duration: 2000
});
} else {
uni.hideLoading()
}
}).catch(error => {
console.error("Error fetching area data:", error);
});
} else if (num == 3) {
uni.showLoading({
title: '加载中...'
})
this.$u.post('/app/device/ring?sn=' + this.sn).then((res) => {
if (res.code == 200) {
this.deviceInfo()
uni.hideLoading()
uni.showToast({
title: '操作成功',
icon: 'none',
duration: 2000
});
} else {
uni.hideLoading()
uni.showToast({
title: res.msg,
icon: 'none',
duration: 2000
});
}
})
}else if (num == 4){
uni.showLoading({
title: '加载中...'
})
this.$u.post('/appVerify/refreshDevice?sn=' + this.sn).then((res) => {
if (res.code == 200) {
this.deviceInfo()
uni.hideLoading()
uni.showToast({
title: '操作成功',
icon: 'none',
duration: 2000
});
} else {
uni.showToast({
title: res.msg,
icon: 'none',
duration: 2000
});
}
})
}
}
}
}
</script>
<style lang="scss">
page {
background-color: #f7faff !important;
}
.btnbox {
margin-left: -66rpx;
width: 750rpx;
padding: 0 66rpx;
position: fixed;
bottom: 50rpx;
}
.txt {
margin-top: 16rpx;
font-size: 48rpx;
color: #808080;
}
.btn_box {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
.btn1 {
display: flex;
align-items: center;
justify-content: center;
width: 220rpx;
height: 100rpx;
background: #8b83f0;
font-size: 50rpx;
color: #fff;
border-radius: 30rpx;
}
}
.btn2 {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100rpx;
background: #8b83f0;
font-size: 50rpx;
color: #fff;
border-radius: 30rpx;
}
.pages {
// padding-top: 136rpx !important;
padding: 0 66rpx;
box-sizing: border-box;
}
.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;
}
}
.title {
margin-bottom: 84rpx;
image {
display: inline-block;
width: 48rpx;
height: 48rpx;
vertical-align: bottom;
margin-right: 10rpx;
}
text:nth-child(1) {
font-weight: 400;
font-size: 96rpx;
color: #262B37;
line-height: 88rpx;
text-align: left;
font-style: normal;
text-transform: none;
display: block;
margin-bottom: 48rpx;
}
}
.dblist {
display: flex;
width: 100%;
margin-top: 34rpx;
background: #FFFFFF;
box-shadow: 0rpx 10rpx 64rpx 0rpx rgba(0, 0, 0, 0.08);
padding: 20rpx 0 24rpx 18rpx;
box-sizing: border-box;
text-align: center;
border-radius: 10rpx;
.lt {
padding-left: 10rpx;
box-sizing: border-box;
margin-right: 38rpx;
image {
width: 42rpx;
// height: 112rpx;
}
}
.cen {
width: 370rpx;
padding-left: 10rpx;
box-sizing: border-box;
.name {
white-space: nowrap;
font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
font-weight: 400;
font-size: 28rpx;
color: #262B37;
line-height: 40rpx;
text-align: left;
font-style: normal;
text-transform: none;
margin-top: 10rpx;
}
.mac {
font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
font-weight: 400;
font-size: 24rpx;
color: #262B37;
line-height: 32rpx;
text-align: left;
font-style: normal;
text-transform: none;
margin-top: 16rpx;
}
}
.rt {
margin-left: auto;
margin-top: 22rpx;
text {
display: inline-block;
width: 108rpx;
height: 60rpx;
background: rgba(255, 255, 255, 0);
border: 2rpx solid #8883F0;
filter: blur(0px);
border-radius: 20rpx;
text-align: center;
line-height: 60rpx;
color: #8883F0;
}
}
}
</style>