<template>
<view class="page">
<u-navbar :title="tittxt" :border-bottom="false" :background="bgc" back-icon-color="#fff" title-color='#fff'
title-size='36' height='50' id="navbar">
</u-navbar>
<view class="zhuhu">
<view class="card1">
<view class="top">
<view class="left">
设备
</view>
<view class="right">
</view>
</view>
<view class="mid">
<view class="mid_left">
<!-- <button v-if="opflag" style="border: 0;outline: none;width: 143rpx;padding-left: 0rpx;height: 143rpx;border-radius: 16rpx;border: 1rpx solid #ccc;"
type="primary reverse" open-type="chooseAvatar" @chooseavatar="btnpic"> -->
<image :src="imglist" mode=""
style="width: 142rpx;height: 142rpx;border-radius: 20rpx;background: #ccc;"></image>
<!-- </button> -->
<!-- <image v-else :src="imglist" mode=""
style="width: 142rpx;height: 142rpx;border-radius: 20rpx;"></image> -->
</view>
<view class="mid_right">
<view class="mid_top">
{{ deviceInfo.deviceName == null ? '' : deviceInfo.deviceName }}
<view class="" style="font-size: 26rpx;margin-top: 8rpx;">
更新时间：{{deviceInfo.lastPullTime == null ? '--' : deviceInfo.lastPullTime}}</view>
</view>
<view class="mid_bot">
<view class="txt" v-if="deviceInfo">
S/N码：{{ deviceInfo.deviceNo == null ? '' : deviceInfo.deviceNo }}</view>
<div class="tip" v-if="deviceInfo.onlineStatus==1">在线</div>
<div class="tip" v-if="deviceInfo.onlineStatus==0">离线</div>
<div class="tip" v-if="deviceInfo.status==1">空闲</div>
<div class="tip" v-if="deviceInfo.status==2">使用中</div>
<div class="tip" v-if="deviceInfo.status==3">维修中</div>
</view>
</view>
</view>
<view class="bot">
</view>
</view>
<view class="card2">
<view class="bot_right">
<view class="cont" style="text-align: center;">
<view class="txt">
剩余时长：{{formattedTime}}
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
var xBlufi = require("@/page_components/blufi/xBlufi.js")
import uniEcCanvas from '@/components/uni-ec-canvas/uni-ec-canvas.vue'
import * as echarts from '@/components/uni-ec-canvas/echarts'
let chart = null
export default {
components: {
uniEcCanvas
},
data() {
return {
bgc: {
backgroundColor: "#8883f0",
},
ec: {
lazyLoad: true
},
deviceInfo: {},
loadings: false,
info: '',
tittxt: "设备详情",
titlist: [
"全部",
"电表",
"水表",
],
curtitidx: 0,
id: '',
timeday: '',
imglist: '',
token: '',
userImgs: '',
imgflag: true,
mac: "",
name: '',
deviceId: '',
storeId: '',
qrResult: '',
devicesList: [],
setMode:null,
vipflag:false,
cztime:'',
opflag:true,
timer: null
}
},
onLoad(option) {
let id = option.id
this.id = id
// this.getDevice(id)
if(option.flag){
this.opflag = false
}else{
this.opflag = true
}
},
computed: {
formattedTime() {
if (this.timeday.days > 0) {
// 只展示天和小时
return `${this.timeday.days}天${this.timeday.hours}小时`;
} else if (this.timeday.hours > 0) {
// 展示小时和分钟
return `${this.timeday.hours}小时${this.timeday.minutes}分钟`;
} else if (this.timeday.minutes > 0) {
// 展示分钟和秒
return `${this.timeday.minutes}分钟${this.timeday.seconds}秒`;
} else {
// 展示秒或0（如果秒也为0）
return this.timeday.seconds > 0 ? `${this.timeday.seconds}秒` : '0';
}
}
},
// 分享到好友（会话）
onShareAppMessage: function () {
return {
title: '创想物联',
path: '/pages/shouye/index'
}
},
// 分享到朋友圈
onShareTimeline: function () {
return {
title: '创想物联',
query: '',
path: '/pages/shouye/index'
}
},
onShow() {
setTimeout(() => {
this.getDevice(this.id)
}, 100)
this.getQiniuToken()
},
onUnload: function() {
xBlufi.listenDeviceMsgEvent(false, this.funListenDeviceMsgEvent);
xBlufi.notifyStartDiscoverBle({
'isStart': false
});
wx.closeBLEConnection({
deviceId: this.objlist.deviceId,
})
},
onHide() {
xBlufi.listenDeviceMsgEvent(false, this.funListenDeviceMsgEvent);
xBlufi.notifyStartDiscoverBle({
'isStart': false
});
wx.closeBLEConnection({
deviceId: this.objlist.deviceId,
})
},
onBeforeUnmount() {
xBlufi.listenDeviceMsgEvent(false, this.funListenDeviceMsgEvent);
xBlufi.notifyStartDiscoverBle({
'isStart': false
});
wx.closeBLEConnection({
deviceId: this.objlist.deviceId,
})
},
beforeDestroy() {
// 组件销毁前清除定时器，防止内存泄漏
if (this.timer) {
clearInterval(this.timer);
this.timer = null;
console.log('已销毁');
}
},
methods: {
getQiniuToken() {
this.$u.get("/common/qiniu/uploadInfo").then((res) => {
if (res.code == 200) {
this.token = res.token
}
});
},
// btnpic(e) {
// let _this = this
// let math = 'static/' + _this.$u.guid(20)
// const tempFilePaths = e.detail.avatarUrl
// wx.uploadFile({
// url: 'https://up-z2.qiniup.com',
// name: 'file',
// filePath: tempFilePaths,
// formData: {
// token: _this.token,
// key: 'smartmeter/img/' + math
// },
// success: function(res) {
// let str = JSON.parse(res.data)
// console.log(str.key)
// _this.userImgs = 'https://api.ccttiot.com/' + str.key
// _this.imglist = _this.userImgs
// _this.imgflag = false
// let data = {
// deviceId:_this.id,
// customPicture:_this.imglist
// }
// _this.putdevice(data)
// }
// })
// },
putdevice(data) {
this.$u.put('/app/device', data).then((res) => {
if (res.code == 200) {
uni.showToast({
title: '修改成功',
icon: 'success',
duration: 2000
})
} else {
uni.showToast({
title: res.msg,
icon: 'none',
duration: 2000
})
}
})
},
// 获取设备详情
getDevice(id) {
this.$u.get("/app/device/" + id).then((res) => {
// this.$forceUpdate()
if (res.code == 200) {
this.deviceInfo = res.data
this.storeId = res.data.storeId
this.qrResult = 'CTKG-' + res.data.mac
if (res.data.customPicture != null) {
this.imglist = res.data.customPicture
} else {
this.imglist = res.data.picture
}
if(this.deviceInfo.expireTime == null){
this.timeday = 0
}else{
let expireTimeStr = this.deviceInfo.expireTime
let expireTimeParts = expireTimeStr.split(" ");
let expireDateParts = expireTimeParts[0].split("-");
let expireTimePartsTime = expireTimeParts[1].split(":");
let expireDate = new Date(expireDateParts[0], expireDateParts[1] - 1, expireDateParts[2],expireTimePartsTime[0], expireTimePartsTime[1], expireTimePartsTime[2])
let now = new Date();
let differenceInMs = expireDate - now;
if (differenceInMs <= 0) {
this.timeday = 0
} else {
this.timeday = this.formatMilliseconds(differenceInMs)
this.startTimer()
}
}
this.loadings = true
}
})
},
startTimer() {
this.timer = setInterval(() => {
if (this.timeday.seconds > 0) {
this.timeday.seconds--;
} else if (this.timeday.minutes > 0) {
this.timeday.seconds = 59; // 重置秒数为59
this.timeday.minutes--;
} else if (this.timeday.hours > 0) {
this.timeday.minutes = 59; // 重置分钟数为59
this.timeday.hours--;
this.timeday.seconds = 0; // 同时重置秒数为0
} else if (this.timeday.days > 0) {
this.timeday.hours = 23; // 重置小时数为23
this.timeday.minutes = 59; // 重置分钟数为59
this.timeday.seconds = 0; // 重置秒数为0
this.timeday.days--;
} else {
// 所有时间单位都已减为0，停止定时器
clearInterval(this.timer);
this.timer = null;
console.log('时间已到期');
}
}, 1000); // 每秒执行一次
},
// 计算天时分秒
formatMilliseconds(milliseconds) {
// 计算天数
let days = Math.floor(milliseconds / (1000 * 60 * 60 * 24))
// 计算剩余的小时数
let hours = Math.floor((milliseconds % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))
// 计算剩余的分钟数
let minutes = Math.floor((milliseconds % (1000 * 60 * 60)) / (1000 * 60))
// 计算剩余的秒数
let seconds = Math.floor((milliseconds % (1000 * 60)) / 1000)
// 返回一个对象，包含天、小时、分钟和秒
return {
days: days,
hours: hours,
minutes: minutes,
seconds: seconds
}
},
opendevice() {
let stause = 0
if (this.deviceInfo.powerStatus == 1) {
stause = 0
} else {
stause = 1
}
console.log(stause, 'stausestause');
this.$u.put(`/app/device/${this.deviceInfo.deviceId}/changePower?status=` + stause).then((res) => {
// this.$forceUpdate()
if (res.code == 200) {
// this.groupList=res.rows
setTimeout(() => {
this.getDevice(this.id)
}, 2000)
// this.loadings=true
// this.initChart()
} else {
uni.showToast({
title: res.msg,
icon: 'none'
});
}
});
},
opendevices() {
},
swiperchange(e) {
this.curtitidx = e.detail.current
console.log(e, 'aaaa');
},
changeidx(index) {
this.curtitidx = index
},
toydfx() {
uni.navigateTo({
url: "/page_components/eletj?id=" + this.id
})
},
funListenDeviceMsgEvent: function(options) {
switch (options.type) {
case xBlufi.XBLUFI_TYPE.TYPE_RECIEVE_MY_DATA:
let loadPercent = options.data;
let loadText = '文件读取中'
// console.log("文件读取中", options.data);
break;
case xBlufi.XBLUFI_TYPE.TYPE_RECIEVE_CUSTON_DATA:
let ver_data = this.parseCustomData(options.data)
this.setMode = Math.floor(ver_data.setMode / 60)
console.log("1收到设备发来的自定义数据结果：", ver_data,this.setMode);
break;
case xBlufi.XBLUFI_TYPE.TYPE_GET_DEVICE_LISTS:
if (options.result) {
let devicesarr = options.data
// console.log(devicesarr,'devicesarrdevicesarr');
devicesarr.forEach(device => {
const mac = device.name.substring(5);
if (device.name == this.qrResult) {
this.deviceId = device.deviceId
this.name = device.name
this.mac = device.name.slice(5, 17)
// console.log(this.mac, 'macmacmac');
// this.devicesList = uniqueDevicesList;
}
})
}
break;
case xBlufi.XBLUFI_TYPE.TYPE_CONNECTED:
// console.log("连接回调：" + JSON.stringify(options));
if (options.result) {
uni.hideLoading();
// uni.showToast({
// title: '连接成功',
// icon: 'none'
// });
{
console.log("连接回调options.data.deviceId：" + options.data.deviceId,
"连接回调options.data.name：" + options.data.name);
}
} else {
uni.hideLoading()
uni.showToast({
title: '设备离线或不在范围内',
icon: 'none',
duration: 2000
})
}
break;
case xBlufi.XBLUFI_TYPE.TYPE_GET_DEVICE_LISTS_START:
if (!options.result) {
console.log("蓝牙未开启", options);
uni.showToast({
title: '蓝牙未开启',
icon: 'none',
duration: 3000
});
return
} else {
// this.searching = true
//蓝牙搜索开始
// _this.setData({
// searching: true
// });
}
break;
case xBlufi.XBLUFI_TYPE.TYPE_GET_DEVICE_LISTS_STOP:
if (options.result) {
let uniqueDevicesList = Array.from(new Set(this.devicesList));
// 将去重后的数组重新赋值给 this.devicesList
this.devicesList = uniqueDevicesList;
let list = []
filteredDevices.forEach(device => {
// 从设备名称中提取 MAC 地址（假设 MAC 地址是设备名称的后6个字符）
let macFromName = device.name.substring(device.name.length - 12);
this.$u.get(`/app/device/${macFromName}/isBind`).then((res) => {
if (res.data == false) {
list.push(device)
} else {
}
})
});
setTimeout(() => {
this.devicesList = list
}, 200)
console.log('蓝牙停止搜索ok');
} else {
//蓝牙停止搜索失败
console.log('蓝牙停止搜索失败');
}
this.searching = false
// _this.setData({
// searching: false
// });
break;
}
},
parseCustomData(data) {
// 将字符串按照 "@" 分割成数组
const dataArray = data.split('@');
// 根据约定，解析各个字段的值
const voltage = parseFloat(dataArray[0].substring(1)); // 去除前缀 "V"，并将字符串转换为浮点数
const switchState = dataArray[1].substring(1); // 去除前缀 "S"
const current = parseFloat(dataArray[2].substring(1)); // 去除前缀 "A"，并将字符串转换为浮点数
const power = parseFloat(dataArray[4].substring(1)); // 去除前缀 "P"，并将字符串转换为浮点数
const remainingPower = parseFloat(dataArray[5].substring(1)); // 去除前缀 "M"，并将字符串转换为浮点数
const setMode = dataArray[6].substring(1); // 去除前缀 "T"
// 返回解析后的数据对象
return {
voltage,
switchState,
current,
power,
remainingPower,
setMode
};
},
}
}
</script>
<style lang="scss">
/deep/ .u-title {
padding-bottom: 22rpx;
}
/deep/ .u-icon__icon {
padding-bottom: 22rpx;
}
page {
background-color: #F7FAFE;
}
.mask {
width: 750rpx;
height: 100vh;
background: #000000;
border-radius: 0rpx 0rpx 0rpx 0rpx;
opacity: 0.2;
z-index: 1;
position: fixed;
top: 0;
left: 0;
}
.tanc {
width: 610rpx;
height: 282rpx;
background: #FFFFFF;
border-radius: 30rpx 30rpx 30rpx 30rpx;
position: fixed;
top: 628rpx;
left: 50%;
transform: translateX(-50%);
z-index: 2;
.tit {
width: 100%;
text-align: center;
margin-top: 28rpx;
font-weight: 500;
font-size: 32rpx;
color: #3D3D3D;
}
input {
width: 504rpx;
height: 62rpx;
background: #EEEEEE;
border-radius: 6rpx 6rpx 6rpx 6rpx;
margin: auto;
margin-top: 22rpx;
padding-left: 20rpx;
}
.xian {
width: 610rpx;
height: 2rpx;
background: #D8D8D8;
border-radius: 0rpx 0rpx 0rpx 0rpx;
margin-top: 26rpx;
}
.anniu {
display: flex;
justify-content: space-between;
height: 98rpx;
text {
padding: 24rpx;
text-align: center;
box-sizing: border-box;
font-weight: 500;
font-size: 36rpx;
color: #3D3D3D;
display: inline-block;
width: 100%;
height: 100rpx;
}
}
}
.page {
.zhuhu {
margin-top: 60rpx;
padding: 0 40rpx;
.card1 {
padding: 34rpx 0 0 40rpx;
width: 670rpx;
height: 260rpx;
background: #FFFFFF;
box-shadow: 0rpx 14rpx 35rpx 0rpx rgba(53, 140, 255, 0.1);
border-radius: 28rpx 28rpx 0rpx 0rpx;
.top {
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
.left {
font-size: 35rpx;
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
font-weight: 400;
color: #8883F0;
}
.right {
margin-right: 56rpx;
.img1 {
width: 76rpx;
height: 76rpx;
}
}
}
.mid {
margin-top: 20rpx;
display: flex;
flex-wrap: nowrap;
align-content: flex-start;
.mid_left {
image {
width: 160rpx;
height: 160rpx;
border-radius: 20rpx;
}
}
.mid_right {
margin-left: 40rpx;
display: flex;
flex-wrap: wrap;
.mid_top {
width: 100%;
font-size: 42rpx;
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
font-weight: 400;
color: #262B37;
}
.mid_bot {
display: flex;
flex-wrap: nowrap;
align-items: center;
.txt {
font-size: 26rpx;
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
font-weight: 400;
color: #95989D;
}
.tip {
display: flex;
align-items: center;
justify-content: center;
margin-left: 19rpx;
// width: 38rpx;
// height: 23rpx;
padding: 0 10rpx;
box-sizing: border-box;
background: rgba(204, 204, 204, 0);
opacity: 1;
border: 2rpx solid #8883F0;
border-radius: 15rpx;
font-size: 26rpx;
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
font-weight: 400;
color: #8883F0;
}
}
}
}
.bot {
margin-top: 53rpx;
display: flex;
flex-wrap: nowrap;
align-items: center;
.bot_left {
width: 210rpx;
height: 180rpx;
margin-right: 34rpx;
.echarts {
// width: 210rpx;
height: 200rpx;
.uni-ec-canvas {
width: 100%;
height: 100rpx !important;
display: block;
// margin-top: 30rpx;
}
}
}
.bot_right {
// margin-top: 50rpx;
display: flex;
// flex-wrap: nowrap;
width: 100%;
justify-content: space-between;
padding-left: 210rpx;
padding-right: 80rpx;
box-sizing: border-box;
.cont {
.tit {
font-size: 28rpx;
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
font-weight: 600;
color: #262B37;
line-height: 49rpx;
}
.txt {
font-size: 26rpx;
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
font-weight: 400;
color: #262B37;
}
}
}
}
}
.bot_right {
// margin-top: 50rpx;
display: flex;
// flex-wrap: nowrap;
width: 100%;
justify-content: space-between;
padding-left: 220rpx;
padding-right: 80rpx;
box-sizing: border-box;
.cont {
.tit {
font-size: 28rpx;
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
font-weight: 600;
color: #262B37;
line-height: 49rpx;
margin-left: 0;
}
.txt {
font-size: 26rpx;
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
font-weight: 400;
color: #262B37;
}
}
}
.card2 {
padding-top: 0rpx;
width: 670rpx;
height: 60rpx;
background: #FFFFFF;
border-radius:0 0 28rpx 28rpx;
.tit {
margin-left: 40rpx;
font-size: 35rpx;
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
font-weight: 400;
color: #8883F0;
}
.cont_box {
margin-top: 32rpx;
display: flex;
flex-wrap: nowrap;
justify-content: space-around;
.cont {
width: 25%;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
text-align: center;
.top {
width: 110rpx;
font-size: 32rpx;
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
font-weight: 400;
color: #262B37;
}
.bot {
margin-top: 20rpx;
font-size: 26rpx;
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
font-weight: 400;
color: #262B37;
}
}
}
}
.card3 {
padding-top: 40rpx;
margin-top: 24rpx;
width: 670rpx;
// height: 318rpx;
background: #FFFFFF;
box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(53, 140, 255, 0.1);
border-radius: 28rpx;
padding-bottom: 20rpx;
.tit {
margin-left: 40rpx;
font-size: 35rpx;
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
font-weight: 400;
color: #8883F0;
}
.cont_box {
// padding-left: 30rpx;
// padding-right: 30rpx;
padding: 0 40rpx;
margin-top: 32rpx;
display: flex;
flex-wrap: nowrap;
justify-content: space-around;
.cont:last-child {
margin-right: 0rpx;
}
.cont {
width: 112rpx;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
margin-right: 80rpx;
.top {
image {
width: 56rpx;
height: 56rpx;
}
}
.bot {
margin-top: 15rpx;
font-size: 28rpx;
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
font-weight: 400;
color: #808080;
}
}
}
}
.button {
margin-left: 76rpx;
margin-top: 178rpx;
display: flex;
justify-content: center;
align-items: center;
width: 520rpx;
height: 104rpx;
background: #8883F0;
box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42, 130, 228, 0.1);
border-radius: 52rpx 52rpx 52rpx 52rpx;
font-size: 32rpx;
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
font-weight: 400;
color: #FFFFFF;
}
}
}
</style>