650 lines
16 KiB
Vue
650 lines
16 KiB
Vue
<template>
|
||
<view>
|
||
<u-navbar :is-back="true" title='设置' title-color="#000" :border-bottom="false" :background="true" id="navbar">
|
||
</u-navbar>
|
||
<!-- 背景 -->
|
||
<view class="img">
|
||
<image class="img" :src="imgpic" mode=""></image>
|
||
</view>
|
||
<view class="name" @click="btnxianshi">
|
||
<view class="">{{user.deviceName == undefined ? '--' : user.deviceName}}</view>
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/uL6FHnMGWFrdptmDokDI" mode=""></image>
|
||
</view>
|
||
<view class="model">
|
||
<text class="one">型号</text> <text>{{user.model == undefined ? '--' : user.model}}</text>
|
||
</view>
|
||
<view class="model" style="margin-top: 24rpx;">
|
||
<text class="one" style="margin-right: 124rpx;">MAC</text>
|
||
<text>{{user.mac == undefined ? '--' : user.mac}}</text>
|
||
</view>
|
||
<view class="wifi" style="margin-top: 78rpx;" @click="btnxip">
|
||
<view class="">息屏</view>
|
||
<view class="flex">{{xinpin == null ? '--' : xinpin + '秒'}}
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/uiTIUYnR3ClrmqOTyF8F" mode=""></image>
|
||
</view>
|
||
</view>
|
||
<view class="wifi" style="margin-top: 24rpx;display: block;" @click="gjconfirm" >
|
||
<view class="" style="display: flex;justify-content: space-between;align-items: center;">
|
||
<view class="">固件更新</view>
|
||
<view class="flex" style="color: red;font-size: 26rpx;" v-if=" ver != null && ver != version">
|
||
<text style="display: inline-block;width: 10rpx;height: 10rpx;border-radius: 50%;background-color: red;margin-right: 10rpx;"></text>点击更新
|
||
</view>
|
||
</view>
|
||
<view class="" style="font-size: 24rpx;display: flex;justify-content: space-between;">
|
||
<view class="">
|
||
当前版本：{{ver == null ? '请连接蓝牙获取当前版本' : ver}}
|
||
</view>
|
||
<view class="">
|
||
最新版本：{{version == null ? '' : version}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 息屏选择器 -->
|
||
<!-- 固件更新选择器 -->
|
||
<u-select v-model="gjshow" :list="gjlist" @confirm="gjconfirm"></u-select>
|
||
<!-- 修改设备名称弹框 -->
|
||
<view class="editname" v-if="nameflag">
|
||
<view class="top">
|
||
修改名称
|
||
</view>
|
||
<input type="text" v-model="namesb" placeholder="请输入您想要修改的名字" />
|
||
<view class="anniu">
|
||
<view class="qx" @click="btnqx">
|
||
取消
|
||
</view>
|
||
<view class="qd" @click="btnqd">
|
||
确定
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 解绑 -->
|
||
<view class="annius" @click="btnjiebang">
|
||
<button>解绑设备</button>
|
||
</view>
|
||
<!-- 修改名称蒙层 -->
|
||
<view class="mask" v-if="nameflag"></view>
|
||
|
||
<!-- 进度条 -->
|
||
<view class="container" v-if="shengjiflag">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/uquIy7wJmrNhjvy2maJf" mode=""></image>
|
||
<!-- 进度条背景 -->
|
||
<view class="progress-bar">
|
||
<!-- 进度条填充部分 -->
|
||
<view class="progress-fill" :style="{ width: progress + '%' }"></view>
|
||
</view>
|
||
<!-- 显示进度百分比 -->
|
||
<view class="progress-text">{{ progress }}%</view>
|
||
<view class="wz">
|
||
固件升级中请保持蓝牙连接
|
||
</view>
|
||
<view class="wz">
|
||
切记在蓝牙范围内，以防升级失败
|
||
</view>
|
||
</view>
|
||
|
||
<u-picker v-model="xpshow" mode="time" :default-time="00" :params="params" @confirm="confirm"></u-picker>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
var xBlufi = require("@/components/blufi/xBlufi.js")
|
||
export default {
|
||
data() {
|
||
return {
|
||
xpshow: false,
|
||
gjshow: false,
|
||
xptxt: '',
|
||
nameflag: false,
|
||
params: {
|
||
year: false,
|
||
month: false,
|
||
day: false,
|
||
hour: false,
|
||
minute: true,
|
||
second: true
|
||
},
|
||
deviceid: '',
|
||
user: {},
|
||
namesb: '',
|
||
ver:'',
|
||
file:'',
|
||
intervalId: null,
|
||
progress:0,
|
||
shengjiflag:false,
|
||
xctime:'--',
|
||
version:'',
|
||
xinpin:'',
|
||
imgpic:''
|
||
}
|
||
},
|
||
// 分享到好友（会话）
|
||
onShareAppMessage: function() {
|
||
return {
|
||
title: '绿小能',
|
||
path: '/pages/index/index'
|
||
}
|
||
},
|
||
// 分享到朋友圈
|
||
onShareTimeline: function() {
|
||
return {
|
||
title: '绿小能',
|
||
query: '',
|
||
path: '/pages/index/index'
|
||
}
|
||
},
|
||
onLoad(option) {
|
||
console.log(option,'0000');
|
||
xBlufi.listenDeviceMsgEvent(true, this.funListenDeviceMsgEvent)
|
||
xBlufi.notifySendCustomData({
|
||
customData: "11get"
|
||
})
|
||
this.deviceid = option.deviceid
|
||
this.imgpic = option.img
|
||
if(option.xctime != '--'){
|
||
// this.xinpin = option.xipin
|
||
if(option.xctime != '--' && option.ver){
|
||
this.ver = 'V' + option.ver.slice(3)
|
||
this.xctime = option.xctime
|
||
console.log(11);
|
||
}else{
|
||
this.ver = 'V1'
|
||
this.xctime = option.xctime
|
||
console.log(22);
|
||
}
|
||
}else{
|
||
this.ver = null
|
||
}
|
||
|
||
this.getshebxq()
|
||
},
|
||
onUnload() {
|
||
this.ver = ''
|
||
xBlufi.listenDeviceMsgEvent(false, this.funListenDeviceMsgEvent)
|
||
},
|
||
onHide() {
|
||
this.ver = ''
|
||
xBlufi.listenDeviceMsgEvent(false, this.funListenDeviceMsgEvent)
|
||
},
|
||
methods: {
|
||
btnxip(){
|
||
if(this.xinpin == '' || this.xinpin == null){
|
||
uni.showToast({
|
||
title: '请先连接蓝牙拿取息屏时间',
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
}else{
|
||
this.xpshow = true
|
||
}
|
||
},
|
||
// 设置息屏时间
|
||
confirm(e) {
|
||
this.xinpin = Number(e.minute * 60) + Number(e.second)
|
||
xBlufi.notifySendCustomData({
|
||
customData: '11sleep' + this.xinpin + '@'
|
||
})
|
||
xBlufi.notifySendCustomData({
|
||
customData: '11get'
|
||
})
|
||
},
|
||
// 解绑设备按钮
|
||
btnjiebang() {
|
||
let that = this
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '您确定要解绑当前设备吗？',
|
||
success: function(res) {
|
||
if (res.confirm) {
|
||
that.$u.delete(`/app/device/unbind/${that.deviceid}`).then(res => {
|
||
if (res.code == 200) {
|
||
uni.showToast({
|
||
title: '解绑成功',
|
||
icon: 'success',
|
||
duration: 2000
|
||
})
|
||
setTimeout(() => {
|
||
uni.reLaunch({
|
||
url:'/pages/index/index'
|
||
})
|
||
}, 1000)
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
}
|
||
})
|
||
} else if (res.cancel) {
|
||
|
||
}
|
||
}
|
||
})
|
||
},
|
||
// 获取设备信息
|
||
getshebxq() {
|
||
this.$u.get(`/app/getDeviceInfo/${this.deviceid}`).then(res => {
|
||
if (res.code == 200) {
|
||
this.user = res.data
|
||
this.getbanbens()
|
||
// this.file = 'https://wc.chuangtewl.com/download/water_flower(4).bin'
|
||
}
|
||
})
|
||
},
|
||
|
||
|
||
// 点击显示修改名称弹框
|
||
btnxianshi() {
|
||
this.nameflag = true
|
||
this.namesb = this.user.deviceName
|
||
},
|
||
// 选择息屏时间
|
||
xpconfirm(e) {
|
||
this.xptxt = e[0].label
|
||
},
|
||
getbanbens(){
|
||
this.$u.get(`/app/model/${this.user.modelId}`).then(res => {
|
||
if (res.code == 200) {
|
||
this.version = res.data.version
|
||
console.log(this.ver,'当前蓝牙版本号',this.version,'最新蓝牙版本号');
|
||
this.file = res.data.asDeviceVersion.file
|
||
console.log(this.file)
|
||
// this.file = 'https://wc.chuangtewl.com/download/water_flower.bin'
|
||
}
|
||
})
|
||
},
|
||
startProgress() {
|
||
this.intervalId = setInterval(() => {
|
||
if (this.progress < 100) {
|
||
|
||
} else {
|
||
clearInterval(this.intervalId); // 进度达到 100% 时清除定时器
|
||
console.log("加载完成");
|
||
}
|
||
}, 1); // 每 1 毫秒更新一次进度
|
||
},
|
||
// 选择固件版本
|
||
gjconfirm(e) {
|
||
if(this.ver != null && this.ver != this.version){
|
||
xBlufi.notifySendCustomData({
|
||
customData: '11sleep' + this.xinpin
|
||
})
|
||
if(this.file == '' || this.file == null){
|
||
uni.showToast({
|
||
title: '暂无新版本',
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
}else{
|
||
console.log('更新');
|
||
var data = {
|
||
sum: 100,
|
||
http:this.file
|
||
}
|
||
// https://www.zenghi.com/gj/water_flower.bin
|
||
console.log(data,'5555555555555555555555555');
|
||
xBlufi.notifySendCustomData({
|
||
customData:data
|
||
})
|
||
this.shengjiflag = true
|
||
this.startProgress()
|
||
}
|
||
}else{
|
||
uni.showToast({
|
||
title: '已是最新版本',
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
}
|
||
},
|
||
// 点击取消修改设备名称
|
||
btnqx() {
|
||
this.nameflag = false
|
||
},
|
||
// 点击确定修改设备名称
|
||
btnqd() {
|
||
this.$u.put(`/app/editDeviceName?deviceId=${this.deviceid}&deviceName=${this.namesb}`).then(res => {
|
||
if (res.code == 200) {
|
||
this.nameflag = false
|
||
this.user.deviceName = this.namesb
|
||
uni.showToast({
|
||
title: '修改成功',
|
||
icon: 'success',
|
||
duration: 2000
|
||
})
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
}
|
||
})
|
||
},
|
||
|
||
// 接受蓝牙回调
|
||
funListenDeviceMsgEvent: function(options) {
|
||
switch (options.type) {
|
||
case xBlufi.XBLUFI_TYPE.TYPE_STATUS_CONNECTED:
|
||
if (!options.result) {
|
||
console.log('duankai');
|
||
uni.showToast({
|
||
title: '蓝牙已断开',
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
uni.reLaunch({
|
||
url:'/pages/index/index'
|
||
})
|
||
}
|
||
break;
|
||
case xBlufi.XBLUFI_TYPE.TYPE_GET_DEVICE_LISTS:
|
||
if (options.result) {
|
||
|
||
}
|
||
break;
|
||
case xBlufi.XBLUFI_TYPE.TYPE_CONNECTED:
|
||
console.log("连接回调：" + JSON.stringify(options))
|
||
if (options.result == true){
|
||
|
||
}else{
|
||
|
||
}
|
||
break
|
||
case xBlufi.XBLUFI_TYPE.TYPE_RECIEVE_CUSTON_DATA:
|
||
// console.log("选择固件升级收信息：", options.data, options.data.length);
|
||
console.log(options,'020202020202');
|
||
if (options.data.indexOf("prom:") !== -1) {
|
||
console.log('固件升级中')
|
||
var indexOld = options.data.substring(options.data.indexOf('prom:'))
|
||
console.log("indexOld", indexOld);
|
||
var load_num = indexOld.substring(
|
||
indexOld.indexOf("prom:") + 5,
|
||
indexOld.indexOf("@")
|
||
)
|
||
this.progress = Number(load_num);
|
||
console.log("load_num", load_num);
|
||
console.log("升级进度：", this.progress)
|
||
if (this.progress == 6000) {
|
||
console.log('固件成功')
|
||
this.progress = 100
|
||
uni.showToast({
|
||
title: '固件升级成功',
|
||
icon: 'success',
|
||
duration: 2000
|
||
})
|
||
this.ver = this.version
|
||
setTimeout(()=>{
|
||
this.shengjiflag = false
|
||
uni.reLaunch({
|
||
url:'/pages/index/index'
|
||
})
|
||
},1000)
|
||
}
|
||
if (this.progress == 9000) {
|
||
console.log('固件升级失败')
|
||
this.progress = 99
|
||
uni.showToast({
|
||
title: '固件升级失败',
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
setTimeout(()=>{
|
||
this.shengjiflag = false
|
||
uni.reLaunch({
|
||
url:'/pages/index/index'
|
||
})
|
||
},1000)
|
||
}
|
||
}else{
|
||
console.log('jiexijiexi',options);
|
||
const inputString = options.data.slice(0, -1) + ";"
|
||
const hasAtSymbol = inputString.includes(',');
|
||
let processedString = inputString;
|
||
let currentDay = 0;
|
||
const pairs = processedString.split(';').filter(Boolean);
|
||
const showObject = {};
|
||
const pSetObjects = {};
|
||
// 初始化所有p_set为默认值
|
||
for (let i = 1; i <= 6; i++) {
|
||
pSetObjects[`p_set${i}`] = [0, 0, 0, 0, 0];
|
||
}
|
||
// 解析字符串
|
||
pairs.forEach(pair => {
|
||
const [key, value] = pair.split(':');
|
||
// 处理可能带有前缀的show键，如 "ver270@show"
|
||
const cleanKey = key.includes('@') ? key.split('@')[1] : key;
|
||
if (cleanKey == 'show') {
|
||
showObject.showArray = value.split(',').map(Number);
|
||
} else if (key.startsWith('p_set')) {
|
||
const values = value.split(',').map(Number);
|
||
// 确保数组长度为5
|
||
while (values.length < 5) {
|
||
values.push(0);
|
||
}
|
||
pSetObjects[key] = values;
|
||
}
|
||
})
|
||
console.log(showObject,'showObjectshowObject');
|
||
this.xinpin = showObject.showArray[showObject.showArray.length - 2]
|
||
}
|
||
break;
|
||
case xBlufi.XBLUFI_TYPE.TYPE_GET_DEVICE_LISTS_START:
|
||
if (!options.result) {
|
||
console.log('蓝牙未开启')
|
||
return
|
||
}
|
||
break
|
||
}
|
||
},
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="less">
|
||
.container {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
height: 100vh; /* 全屏高度 */
|
||
background-color: #f0f0f0; /* 背景颜色 */
|
||
position: fixed;
|
||
top: 0;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 100%;
|
||
image{
|
||
width: 400rpx;
|
||
height: 500rpx;
|
||
margin-top: 260rpx;
|
||
margin-bottom: 80rpx;
|
||
}
|
||
.wz{
|
||
color: red;
|
||
margin-top: 20rpx;
|
||
}
|
||
}
|
||
|
||
/* 进度条背景 */
|
||
.progress-bar {
|
||
width: 80%; /* 进度条宽度 */
|
||
height: 20px; /* 进度条高度 */
|
||
background-color: #e0e0e0; /* 背景颜色 */
|
||
border-radius: 10px; /* 圆角 */
|
||
overflow: hidden; /* 隐藏超出部分 */
|
||
}
|
||
|
||
/* 进度条填充部分 */
|
||
.progress-fill {
|
||
height: 100%;
|
||
background-color: #7FAD76; /* 填充颜色 */
|
||
transition: width 0.1s ease; /* 平滑过渡 */
|
||
}
|
||
|
||
/* 进度百分比文字 */
|
||
.progress-text {
|
||
margin-top: 20px;
|
||
font-size: 24px;
|
||
color: #333;
|
||
}
|
||
.annius {
|
||
padding: 0 40rpx;
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
position: fixed;
|
||
left: 0;
|
||
bottom: 112rpx;
|
||
|
||
button {
|
||
background: #7FAD76;
|
||
border-radius: 52rpx 52rpx 52rpx 52rpx;
|
||
color: #fff;
|
||
}
|
||
}
|
||
|
||
::v-deep .u-title {
|
||
margin-bottom: 22rpx;
|
||
}
|
||
|
||
::v-deep .uicon-nav-back {
|
||
margin-bottom: 22rpx;
|
||
}
|
||
|
||
.editname {
|
||
width: 530rpx;
|
||
height: 340rpx;
|
||
background-color: #fff;
|
||
position: fixed;
|
||
top: 600rpx;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
border-radius: 20rpx;
|
||
z-index: 1;
|
||
padding: 20rpx;
|
||
box-sizing: border-box;
|
||
|
||
.top {
|
||
font-size: 32rpx;
|
||
color: #3D3D3D;
|
||
text-align: center;
|
||
width: 100%;
|
||
margin-top: 20rpx;
|
||
font-weight: 600;
|
||
}
|
||
|
||
input {
|
||
width: 450rpx;
|
||
height: 80rpx;
|
||
background-color: #eee;
|
||
border-radius: 10rpx;
|
||
margin: auto;
|
||
margin-top: 20rpx;
|
||
padding-left: 10rpx;
|
||
}
|
||
|
||
.anniu {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-top: 30rpx;
|
||
padding: 0 10rpx;
|
||
box-sizing: border-box;
|
||
|
||
view {
|
||
width: 48%;
|
||
height: 80rpx;
|
||
line-height: 80rpx;
|
||
text-align: center;
|
||
font-size: 32rpx;
|
||
}
|
||
|
||
.qx {
|
||
border: 1px solid #7FAD76;
|
||
border-radius: 20rpx;
|
||
color: #7FAD76;
|
||
}
|
||
|
||
.qd {
|
||
background-color: #7FAD76;
|
||
color: #fff;
|
||
border-radius: 20rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.mask {
|
||
width: 100%;
|
||
height: 100vh;
|
||
background-color: #000;
|
||
opacity: .5;
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
}
|
||
|
||
.img {
|
||
width: 304rpx;
|
||
height: 332rpx;
|
||
margin: auto;
|
||
}
|
||
|
||
.name {
|
||
width: 100%;
|
||
font-weight: 600;
|
||
font-size: 36rpx;
|
||
color: #3D3D3D;
|
||
display: flex;
|
||
margin-top: 64rpx;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
image {
|
||
width: 44rpx;
|
||
height: 44rpx;
|
||
margin-left: 26rpx;
|
||
}
|
||
}
|
||
|
||
.model {
|
||
width: 100%;
|
||
display: flex;
|
||
font-weight: 600;
|
||
font-size: 32rpx;
|
||
color: #3D3D3D;
|
||
margin-top: 48rpx;
|
||
|
||
.one {
|
||
margin-left: 74rpx;
|
||
margin-right: 144rpx;
|
||
}
|
||
}
|
||
|
||
.wifi {
|
||
width: 678rpx;
|
||
height: 104rpx;
|
||
font-size: 32rpx;
|
||
color: #3D3D3D;
|
||
line-height: 104rpx;
|
||
background: rgba(255, 255, 255, 0.2);
|
||
box-shadow: 0rpx 10rpx 64rpx 0rpx rgba(0, 0, 0, 0.08);
|
||
margin: auto;
|
||
margin-top: 60rpx;
|
||
border-radius: 20rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 0 42rpx;
|
||
box-sizing: border-box;
|
||
|
||
.flex {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
image {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
margin-left: 18rpx;
|
||
}
|
||
}
|
||
}
|
||
</style> |