Sprinkler-app/page_user/upload.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: 20rpx;" 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) {
			xBlufi.listenDeviceMsgEvent(true, this.funListenDeviceMsgEvent)
			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()
		},
		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 + '@'
				})
			},
			// 解绑设备按钮
			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("加载完成");
			        }
			    }, 30); // 每 30 毫秒更新一次进度
			},
			// 选择固件版本
			gjconfirm(e) {
				// console.log('更新',this.file);
				// var data = {
				//     sum: 100,
				//     http: this.file
				// }
				// xBlufi.notifySendCustomData({
				//     customData: data
				// })
				// this.shengjiflag = true
				// this.startProgress()
				if(this.ver != null && this.ver != this.version){
					if(this.file == '' || this.file == null){
						uni.showToast({
							title: '暂无新版本',
							icon: 'none',
							duration: 2000
						})
					}else{
						console.log('更新');
						var data = {
						    sum: 100,
						    http: this.file
						}
						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');
						}
						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);
					    if (typeof options.data === 'string') {
					        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
									})
									setTimeout(()=>{
										this.shengjiflag = false
										uni.reLaunch({
											url:'/pages/index/index'
										})
									},2000)
					            }
					            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.error("options.data 不是字符串:", options.data);
					    }
					    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;
		}
	}

	/deep/ .u-title {
		margin-bottom: 22rpx;
	}

	/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>