chuangte_bike_newxcx/page_user/luru/controlDevice.vue

516 lines
12 KiB
Vue
Raw Normal View History

2025-04-01 21:35:30 +08:00
<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 == undefined ? '--' : carInfo.mac}}
</view>
2025-04-27 17:37:23 +08:00
<view class="txt">
网络
<span v-if="carInfo.onlineStatus==0">离线</span>
<span style="color: #8883F0;" v-if="carInfo.onlineStatus==1">在线</span>
</view>
<view class="txt">
2025-04-01 21:35:30 +08:00
信号{{carInfo.signalStrength == undefined ? '--' : carInfo.signalStrength}}
</view>
<view class="txt">
2025-04-27 17:37:23 +08:00
卫星{{carInfo.satellites == undefined ? '--' : carInfo.satellites}}
2025-04-01 21:35:30 +08:00
</view>
<view class="txt">
2025-04-27 17:37:23 +08:00
电压{{carInfo.voltage == undefined ? '--' : carInfo.voltage.toFixed(2)}}V
2025-04-01 21:35:30 +08:00
</view>
<view class="txt">
锁状态
<span v-if="carInfo.lockStatus==0"></span>
<span style="color: #8883F0;" v-if="carInfo.lockStatus==1"></span>
2025-04-27 17:37:23 +08:00
</view>
<view class="txt">
电门
<span v-if="carInfo.quality==0"></span>
<span style="color: #8883F0;" v-if="carInfo.quality==1"></span>
</view>
<view class="txt">
硬件版本{{carInfo.hardwareVersion == undefined ? '--' : carInfo.hardwareVersion}}
</view>
<view class="txt">
软件版本{{carInfo.softwareVersion == undefined ? '--' : carInfo.softwareVersion}}
</view>
<view class="txt">
声音
<span v-if="carInfo.music==0">静音</span>
<span v-if="carInfo.music==1">语音</span>
<span v-if="carInfo.music==2">彩铃</span>
</view>
<view class="txt">
最后定位时间{{carInfo.lastLocationTime == undefined ? '--' : carInfo.lastLocationTime}}
</view>
<view class="txt">
最后在线时间{{carInfo.lastOnlineTime == undefined ? '--' : carInfo.lastOnlineTime}}
2025-04-01 21:35:30 +08:00
</view>
<view class="btnbox">
<view class="btn_box" style="margin-bottom: 20rpx;">
2025-04-27 17:37:23 +08:00
<!-- <view class="btn1" @click="btn(5)">
2025-04-01 21:35:30 +08:00
清空校准
2025-04-27 17:37:23 +08:00
</view> -->
2025-04-01 21:35:30 +08:00
</view>
<view class="btn_box">
<view class="btn1" @click="btn(0)">
开锁
</view>
<view class="btn1" @click="btn(1)">
关锁
</view>
2025-04-27 17:37:23 +08:00
<view class="btn1" @click="btn(9)">
坐垫锁
</view>
2025-04-01 21:35:30 +08:00
</view>
<view class="btn_box" style="margin-top: 20rpx;">
<view class="btn1" @click="btn(3)">
响铃
</view>
2025-04-27 17:37:23 +08:00
<view class="btn1" @click="btn(8)">
重启
</view>
2025-04-01 21:35:30 +08:00
<view class="btn1" @click="btn(4)">
更新
</view>
</view>
2025-04-27 17:37:23 +08:00
<!-- <view class="btn_box" style="margin-top: 20rpx;">
</view> -->
2025-04-01 21:35:30 +08:00
<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:'/page_user/luru/index'
})
},
back(){
uni.reLaunch({
url:'/page_user/luru/index'
})
},
search(){
if (this.sn && this.sn.length === 7 && /^\d+$/.test(this.sn)) {
// 当 this.sn 满足条件时调用 deviceInfo
2025-04-27 17:37:23 +08:00
this.deviceInfo()
2025-04-01 21:35:30 +08:00
} else {
2025-04-27 17:37:23 +08:00
console.log('SN 不是 7 位数字')
2025-04-01 21:35:30 +08:00
// 你可以在这里处理不符合条件的情况,比如提示用户输入正确的 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('=');
2025-04-27 17:37:23 +08:00
if (key === 's') {
sn = value
2025-04-01 21:35:30 +08:00
}
2025-04-27 17:37:23 +08:00
})
2025-04-01 21:35:30 +08:00
}
this.sn = sn
2025-04-27 17:37:23 +08:00
console.log(res.result)
2025-04-01 21:35:30 +08:00
if (this.sn != '') {
this.deviceInfo()
}
},
fail: err => {
2025-04-27 17:37:23 +08:00
console.error('扫描失败:', err)
2025-04-01 21:35:30 +08:00
uni.showToast({
title: '扫描失败',
icon: 'none'
2025-04-27 17:37:23 +08:00
})
2025-04-01 21:35:30 +08:00
}
2025-04-27 17:37:23 +08:00
})
2025-04-01 21:35:30 +08:00
},
deviceInfo() {
2025-04-27 17:37:23 +08:00
this.$u.get('/bst/device?sn=' + this.sn).then((res) => {
2025-04-01 21:35:30 +08:00
if (res.code === 200) {
this.carInfo=res.data
}
}).catch(error => {
2025-04-27 17:37:23 +08:00
console.error("Error fetching area data:", error)
})
2025-04-01 21:35:30 +08:00
},
btn(num) {
if (num == 0) {
uni.showLoading({
title: '加载中...'
})
console.log('点击了....1');
2025-04-27 17:37:23 +08:00
this.$u.put('/bst/device/iot/unlock?sn=' + this.sn).then((res) => {
2025-04-01 21:35:30 +08:00
if (res.code == 200) {
// 处理接口返回的数据,将边界数据转换为地图组件需要的折线结构
this.deviceInfo()
uni.showToast({
title: '操作成功',
2025-04-27 17:37:23 +08:00
icon: 'success',
2025-04-01 21:35:30 +08:00
duration: 2000
2025-04-27 17:37:23 +08:00
})
2025-04-01 21:35:30 +08:00
} else {
uni.hideLoading()
2025-04-27 17:37:23 +08:00
uni.showToast({
title: res.msg,
icon: 'none',
duration: 2000
})
2025-04-01 21:35:30 +08:00
}
}).catch(error => {
2025-04-27 17:37:23 +08:00
console.error("Error fetching area data:", error)
})
2025-04-01 21:35:30 +08:00
} else if (num == 1) {
uni.showLoading({
title: '加载中...'
})
2025-04-27 17:37:23 +08:00
console.log('点击了....2')
this.$u.put('/bst/device/iot/lock?sn=' + this.sn).then((res) => {
2025-04-01 21:35:30 +08:00
if (res.code == 200) {
// 处理接口返回的数据,将边界数据转换为地图组件需要的折线结构
this.deviceInfo()
uni.showToast({
title: '操作成功',
2025-04-27 17:37:23 +08:00
icon: 'success',
2025-04-01 21:35:30 +08:00
duration: 2000
2025-04-27 17:37:23 +08:00
})
2025-04-01 21:35:30 +08:00
} else {
uni.hideLoading()
2025-04-27 17:37:23 +08:00
uni.showToast({
title: res.msg,
icon: 'none',
duration: 2000
})
2025-04-01 21:35:30 +08:00
}
}).catch(error => {
console.error("Error fetching area data:", error);
2025-04-27 17:37:23 +08:00
})
2025-04-01 21:35:30 +08:00
} else if (num == 3) {
uni.showLoading({
title: '加载中...'
})
2025-04-27 17:37:23 +08:00
this.$u.put('/bst/device/iot/ring?sn=' + this.sn).then((res) => {
2025-04-01 21:35:30 +08:00
if (res.code == 200) {
2025-04-27 17:37:23 +08:00
this.deviceInfo()
2025-04-01 21:35:30 +08:00
uni.hideLoading()
uni.showToast({
title: '操作成功',
2025-04-27 17:37:23 +08:00
icon: 'success',
2025-04-01 21:35:30 +08:00
duration: 2000
2025-04-27 17:37:23 +08:00
})
2025-04-01 21:35:30 +08:00
} else {
uni.hideLoading()
uni.showToast({
title: res.msg,
icon: 'none',
duration: 2000
2025-04-27 17:37:23 +08:00
})
2025-04-01 21:35:30 +08:00
}
})
}else if (num == 4){
uni.showLoading({
title: '加载中...'
})
2025-04-27 17:37:23 +08:00
this.$u.put('/bst/device/iot/refresh?sn=' + this.sn).then((res) => {
2025-04-01 21:35:30 +08:00
if (res.code == 200) {
this.deviceInfo()
uni.hideLoading()
uni.showToast({
title: '操作成功',
2025-04-27 17:37:23 +08:00
icon: 'success',
2025-04-01 21:35:30 +08:00
duration: 2000
2025-04-27 17:37:23 +08:00
})
2025-04-01 21:35:30 +08:00
} else {
uni.showToast({
title: res.msg,
icon: 'none',
duration: 2000
2025-04-27 17:37:23 +08:00
})
2025-04-01 21:35:30 +08:00
}
})
}else if (num == 5){
uni.showLoading({
title: '加载中...'
})
2025-04-27 17:37:23 +08:00
this.$u.put('/app/voltage/check?sn=' + this.sn).then((res) => {
2025-04-01 21:35:30 +08:00
if (res.code == 200) {
this.deviceInfo()
uni.hideLoading()
uni.showToast({
title: '操作成功',
2025-04-27 17:37:23 +08:00
icon: 'success',
duration: 2000
})
} else {
uni.showToast({
title: res.msg,
2025-04-01 21:35:30 +08:00
icon: 'none',
duration: 2000
2025-04-27 17:37:23 +08:00
})
}
})
}else if(num == 8){
uni.showLoading({
title: '加载中...'
})
this.$u.put('/bst/device/iot/reboot?sn=' + this.sn).then((res) => {
if (res.code == 200) {
this.deviceInfo()
uni.hideLoading()
uni.showToast({
title: '操作成功',
icon: 'success',
duration: 2000
})
2025-04-01 21:35:30 +08:00
} else {
uni.showToast({
title: res.msg,
icon: 'none',
duration: 2000
2025-04-27 17:37:23 +08:00
})
}
})
}else if(num == 9){
uni.showLoading({
title: '加载中...'
})
this.$u.put('/bst/device/iot/unlockSeat?sn=' + this.sn).then((res) => {
if (res.code == 200) {
this.deviceInfo()
uni.hideLoading()
uni.showToast({
title: '操作成功',
icon: 'success',
duration: 2000
})
} else {
uni.showToast({
title: res.msg,
icon: 'none',
duration: 2000
})
2025-04-01 21:35:30 +08:00
}
})
}
}
}
}
</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;
2025-04-27 17:37:23 +08:00
font-size: 32rpx;
2025-04-01 21:35:30 +08:00
color: #808080;
}
.btn_box {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
.btn1 {
display: flex;
align-items: center;
justify-content: center;
2025-04-27 17:37:23 +08:00
width: 180rpx;
2025-04-01 21:35:30 +08:00
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: 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;
}
}
.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>