优化设备控制,提交后,实时获取设备返回状态信息

This commit is contained in:
fengerli
2025-08-14 13:46:57 +08:00
parent d8edb9f31e
commit e56bbfe674
15 changed files with 1104 additions and 383 deletions

View File

@ -1,23 +1,34 @@
<template>
<view class="share">
<view class="device-title">已分享用户</view>
<view class="device-info" v-for="(item, index) in deviceList" :key="index">
<view class="device-header" @click.stop="handleFile(item)">
<view class="deviceIMG">
<image src="@/static/images/common/user.png" mode="aspectFit" class="IMG"></image>
</view>
<view class="device-name">
<view>用户名{{item.deviceName}}</view>
<view class="ID">
<view class="ID">{{item.phonenumber}}
<!-- 下拉刷新区域 -->
<mescroll-uni ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :up="upOption" :down="downOption">
<view class="device-title">已分享用户</view>
<view class="" v-if="deviceList.length>0">
<view class="device-info" v-for="(item, index) in deviceList" :key="index">
<view class="device-header" @click.stop="handleFile(item)">
<view class="deviceIMG">
<image src="@/static/images/common/user.png" mode="aspectFit" class="IMG"></image>
</view>
<view class="device-name">
<view>用户名{{item.deviceName}}</view>
<view class="ID">
<view class="ID">{{item.phonenumber}}
</view>
</view>
</view>
<view class="device-delete">
<text class="delete" @click.stop="handleDelete(item)">移除</text>
</view>
</view>
</view>
<view class="device-delete">
<text class="delete" @click.stop="handleDelete(item)">移除</text>
</view>
</view>
</view>
<view v-else class="noDATA">
<view> <uni-icons type="image-filled" size="120" color="rgba(255, 255, 255, 0.9)"></uni-icons>
</view>
暂无数据
</view>
</mescroll-uni>
<!-- 删除弹框 -->
<view class="agreement-mask" v-if="deleteShow" @click="closePopup('delete')">
<view class="agreement-popup" @click.stop>
@ -42,16 +53,62 @@
deviceShareList,
deviceShareDelete
} from '@/api/6170/share.js'
import MescrollUni from 'mescroll-uni/mescroll-uni.vue'
export default {
components: {
MescrollUni
},
data() {
return {
deviceList: [],
deleteShow: false,
delelteItemInfo: '',
itemInfo: ''
itemInfo: '',
mescroll: null, // mescroll实例对象
downOption: {
auto: false // 不自动加载
},
upOption: {
auto: false, // 不自动加载
noMoreSize: 5, // 如果列表已无数据,可设置列表的总数量要大于等于5条才显示无更多数据
empty: {
tip: '暂无相关数据'
}
},
page: 1, // 当前页码
size: 10, // 每页条数
total: 0 // 总数据量
}
},
methods: {
// mescroll组件初始化的回调,可获取到mescroll对象
mescrollInit(mescroll) {
this.mescroll = mescroll;
},
// 下拉刷新的回调
downCallback() {
// 重置分页参数
this.page = 1;
this.getData(this.itemInfo.id).then(res => {
// 数据请求成功后,隐藏下拉刷新的状态
this.mescroll.endSuccess();
}).catch(() => {
// 请求失败,隐藏下拉刷新的状态
this.mescroll.endErr();
})
},
// 上拉加载的回调
upCallback() {
this.getData(this.itemInfo.id).then(res => {
// 根据是否有数据来决定是否显示无更多数据的提示
const hasNext = this.deviceList.length < this.total;
this.mescroll.endSuccess(this.deviceList.length, hasNext);
}).catch(() => {
// 请求失败,隐藏上拉加载的状态
this.mescroll.endErr();
})
},
// 点击弹框外的区域关闭
closePopup(type) {
if (type === 'delete') {
@ -73,25 +130,43 @@
icon: 'none'
})
this.deleteShow = false
this.getData()
// 删除后刷新列表
this.page = 1;
this.getData(this.itemInfo.id).then(() => {
this.mescroll.resetUpScroll();
})
} else {
uni.showToast({
title: res.msg,
icon: 'none'
})
}
})
//
},
getData(val) {
let data = {
deviceId: val
}
deviceShareList(data).then((res) => {
if (res.code == 200) {
this.deviceList = res.rows
return new Promise((resolve, reject) => {
let data = {
deviceId: val,
pageNum: this.page,
pageSize: this.size,
}
deviceShareList(data).then((res) => {
if (res.code == 200) {
this.total = res.total;
if (this.page === 1) {
// 如果是第一页,直接替换数据
this.deviceList = res.rows;
} else {
// 如果不是第一页,追加数据
this.deviceList = this.deviceList.concat(res.rows);
}
resolve(res);
} else {
reject(res);
}
}).catch(err => {
reject(err);
})
})
},
// 跳转分享详情
@ -107,7 +182,6 @@
}
})
}
},
onLoad() {
const eventChannel = this.getOpenerEventChannel();
@ -115,7 +189,14 @@
eventChannel.on('shareManagement', (data) => {
console.log(data, 'data1t111');
this.itemInfo = data.data;
this.getData(this.itemInfo.id)
// 初始化加载数据
this.page = 1;
this.getData(this.itemInfo.id).then(() => {
// 数据加载完成后,如果需要可以手动触发下拉刷新结束
if (this.mescroll) {
this.mescroll.endSuccess();
}
})
})
}
}
@ -130,7 +211,7 @@
.device-title {
color: rgba(255, 255, 255, 0.87);
padding: 30rpx 0;
padding: 30rpx;
}
.device-info {
@ -162,7 +243,7 @@
.deviceIMG {
/* width: 100rpx; */
/* height: 100rpx; */
/* height: 100rpx; */
position: relative;
display: flex;
align-items: center;
@ -173,6 +254,12 @@
width: 50%;
}
.noDATA {
text-align: center;
color: rgba(255, 255, 255, 0.87);
transform: translate(-0%, 100%);
}
.delete {
border-radius: 32px;
background: rgba(255, 200, 78, 0.06);