设备列表，设备绑定，删除，修改设备名
This commit is contained in:
fengerli
@ -1,10 +1,29 @@
|
||||
<template>
|
||||
<view>
|
||||
<!-- 使用自定义导航栏 -->
|
||||
<custom-navbar :title="navTitle" :showBack="false" backgroundColor="#202020" color="#FFFFFF" right-text="发送信息"
|
||||
right-color="rgba(255, 255, 255, 0.87)" @right-click="handleSend"></custom-navbar>
|
||||
<custom-navbar :title="navTitle" :showBack="false" backgroundColor="#202020" color="#FFFFFF"
|
||||
rightIcon="/static/images/add.png" @right-click="scan"></custom-navbar>
|
||||
<view class="device-page" :style="{ paddingTop: navBarHeight + 'px' }">
|
||||
<scroll-view class="device-list" scroll-y>
|
||||
<!-- handleSend 发送信息 -->
|
||||
|
||||
<scroll-view class="tab-bar" scroll-x="true" scroll-with-animation>
|
||||
<view class="tab-container">
|
||||
<view v-for="(tab, index) in tabs" :key="index"
|
||||
:class="['tab-item', activeTab === index ? 'active' : '']" @click="switchTab(tab,index)">
|
||||
{{tab.typeName}}
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view class="sendFlex">
|
||||
<view>
|
||||
<image src="/static/images/gprs.png" class="gprs"></image>
|
||||
</view>
|
||||
<view class="callpolice">报警</view>
|
||||
<view class="Sendmessage" @click="handleSend">发送信息</view>
|
||||
</view>
|
||||
|
||||
<scroll-view class="device-list" scroll-y @scrolltolower="onScrollToLower" :lower-threshold="100"
|
||||
style="height:80vh;">
|
||||
<uni-swipe-action ref="swipeAction">
|
||||
<block v-for="(item, index) in deviceList" :key="index" :ref="'swipeItem_' + index">
|
||||
<uni-swipe-action-item :right-options="Options" @click="handleSwipeClick($event, item, index)"
|
||||
@ -13,15 +32,17 @@
|
||||
<view @click.stop="handleFile(item)">
|
||||
<view class="device-header">
|
||||
<view class="deviceIMG">
|
||||
<image src="/static/images/device.png" mode="" class="IMG"></image>
|
||||
<image :src="item.devicePic" class="IMG"></image>
|
||||
</view>
|
||||
<view class="device-name">
|
||||
<view>设备:001-00</view>
|
||||
<view class="ID">ID:0222222</view>
|
||||
<view>设备:{{item.deviceName}}</view>
|
||||
<view class="ID" v-if="item.communicationMode==0">ID:{{item.deviceImei}}</view>
|
||||
<view class="ID" v-else>ID:{{item.deviceMac}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="device-status online">已连接</view>
|
||||
<view class="device-info">
|
||||
<!-- <view class="device-status online">已连接</view> -->
|
||||
<view class="device-status unline">未连接</view>
|
||||
<view class="device-info" v-if="item.communicationMode==0">
|
||||
<text class="onlines">在线</text>
|
||||
<text class="line"></text>
|
||||
<text>电量：90%</text>
|
||||
@ -31,8 +52,10 @@
|
||||
</uni-swipe-action-item>
|
||||
</block>
|
||||
</uni-swipe-action>
|
||||
<view class="device-uplod" @click="scan">
|
||||
<uni-icons type="plusempty" size="60" color="rgba(255, 255, 255, 0.5)"></uni-icons>
|
||||
<!-- 加载状态提示 -->
|
||||
<view class="loading-status">
|
||||
<text v-if="loading">加载中...</text>
|
||||
<text v-if="finished">没有更多数据了</text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
@ -47,7 +70,6 @@
|
||||
</view>
|
||||
</view>
|
||||
<!-- 按钮组 -->
|
||||
|
||||
<view class="popup-buttons">
|
||||
<button class="btn agreeBtn" @click="handleBtn">确定</button>
|
||||
</view>
|
||||
@ -60,14 +82,24 @@
|
||||
<view>
|
||||
<view class="popup-flex">
|
||||
<text>设备名称</text>
|
||||
<input type="text" placeholder="请输入设备名称" class="popup-input" />
|
||||
<input type="text" v-model="deviceName" placeholder="请输入设备名称" class="popup-input" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 按钮组 -->
|
||||
|
||||
<view class="popup-buttons" style="margin-top:50rpx;">
|
||||
<button class="btn agreeBtn4" @click="handleBtn">确定</button>
|
||||
<button class="btn agreeBtn4" @click="handleBtnName">确定</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 小提示框 -->
|
||||
<view class="tooltip-box" v-if="showTooltip">
|
||||
<view class="tooltip-arrow"></view>
|
||||
<view class="tooltip-content">
|
||||
<view class="tooltip-item" v-for="(item, index) in menuItems" :key="index"
|
||||
@click="handleMenuClick(item)">
|
||||
<image :src="item.icon" class="item-icon" />
|
||||
<text>{{ item.text }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@ -75,11 +107,20 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
deviceTypeList,
|
||||
deviceInfo,
|
||||
deviceUnbind, //删除设备
|
||||
deviceReName
|
||||
} from '@/api/common/index.js'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
navBarHeight: 70 + uni.getSystemInfoSync().statusBarHeight,
|
||||
deviceList:[],
|
||||
deviceList: [],
|
||||
tabs: [],
|
||||
activeTab: 0,
|
||||
showTooltip: false,
|
||||
Options: [{
|
||||
text: '重命名',
|
||||
style: {
|
||||
@ -99,15 +140,110 @@
|
||||
],
|
||||
navTitle: "我的设备",
|
||||
deleteShow: false,
|
||||
RenameModel: false
|
||||
RenameModel: false,
|
||||
menuItems: [{
|
||||
text: '扫一扫添加',
|
||||
icon: '/static/images/scane.png',
|
||||
action: 'scan'
|
||||
},
|
||||
{
|
||||
text: '蓝牙添加',
|
||||
icon: '/static/images/bluetooth.png',
|
||||
action: 'bluetooth'
|
||||
}
|
||||
],
|
||||
page: 1, // 当前页码
|
||||
size:10, // 每页条数
|
||||
total: 0, // 总数据量
|
||||
loading: false,
|
||||
finished: false,
|
||||
deviceId: '',
|
||||
deviceName: "" //重命名
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
scan() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/common/scan/scan'
|
||||
// tab导航切换栏
|
||||
getTab() {
|
||||
deviceTypeList({}).then((res) => {
|
||||
if (res.code == 200) {
|
||||
this.tabs = [{
|
||||
id: '',
|
||||
name: '全部设备',
|
||||
typeName: '全部设备'
|
||||
},
|
||||
...res.data.map(item => ({
|
||||
id: item.id,
|
||||
name: item.typeName,
|
||||
typeName: item.typeName,
|
||||
communicationMode: item.communicationMode
|
||||
}))
|
||||
];
|
||||
}
|
||||
})
|
||||
},
|
||||
// tab切换页
|
||||
switchTab(tab, index) {
|
||||
this.deviceList = [];
|
||||
this.activeTab = index;
|
||||
this.page = 1; // 重置页码
|
||||
this.finished = false; // 重
|
||||
// 明确传递参数，空字符串改为null或undefined
|
||||
const deviceType = tab.id === '' ? undefined : tab.id;
|
||||
this.getData(deviceType);
|
||||
},
|
||||
// 获取设备列表
|
||||
getData(deviceType = '') {
|
||||
if (this.loading || this.finished) return;
|
||||
this.loading = true;
|
||||
let data = {
|
||||
pageNum: this.page,
|
||||
pageSize: this.size,
|
||||
deviceType: deviceType // 使用传入的设备类型
|
||||
}
|
||||
deviceInfo(data).then((res) => {
|
||||
if (res.code == 200) {
|
||||
const newDevices = res.rows.map(device => ({
|
||||
...device,
|
||||
showConfirm: false
|
||||
}));
|
||||
|
||||
// 如果是第一页或切换分类，替换数据
|
||||
this.deviceList = this.page === 1 ? newDevices : [...this.deviceList, ...newDevices];
|
||||
this.total = res.total;
|
||||
// 判断是否加载完成
|
||||
if (res.rows.length < this.size || this.deviceList.length >= this.total) {
|
||||
this.finished = true;
|
||||
} else {
|
||||
this.page++;
|
||||
}
|
||||
}
|
||||
}).finally(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
// 滚动触底事件处理
|
||||
onScrollToLower() {
|
||||
this.getData();
|
||||
},
|
||||
scan() {
|
||||
this.showTooltip = !this.showTooltip;
|
||||
},
|
||||
|
||||
handleMenuClick(item) {
|
||||
this.showTooltip = false; // 关闭弹窗
|
||||
switch (item.action) {
|
||||
case 'scan':
|
||||
uni.navigateTo({
|
||||
url: '/pages/common/scan/scan'
|
||||
});
|
||||
break;
|
||||
case 'bluetooth':
|
||||
uni.navigateTo({
|
||||
url: '/pages/6155/bluetooth/bluetooth'
|
||||
});
|
||||
break;
|
||||
}
|
||||
},
|
||||
// 右滑点击事件处理
|
||||
handleSwipeClick(e, item, index) {
|
||||
const {
|
||||
@ -122,23 +258,71 @@
|
||||
this.handleRenameDevice(item, index)
|
||||
break
|
||||
};
|
||||
|
||||
},
|
||||
// 删除设备
|
||||
handleDeleteDevice(item, index) {
|
||||
this.deviceId = item
|
||||
this.deleteShow = true
|
||||
uni.hideTabBar()
|
||||
},
|
||||
// 确认删除
|
||||
handleBtn() {
|
||||
this.deleteShow = false,
|
||||
uni.showTabBar()
|
||||
uni.showTabBar()
|
||||
let data = {
|
||||
id: this.deviceId.id
|
||||
}
|
||||
deviceUnbind(data).then((res) => {
|
||||
if (res.code == 200) {
|
||||
uni.showToast({
|
||||
title: '删除成功',
|
||||
icon: 'none',
|
||||
duration: 1000
|
||||
});
|
||||
setTimeout(() => {
|
||||
this.onIntall();
|
||||
}, 500);
|
||||
this.deleteShow = false
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none',
|
||||
duration: 1000
|
||||
});
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 重命名设备
|
||||
handleRenameDevice(item, index) {
|
||||
this.RenameModel = true
|
||||
uni.hideTabBar()
|
||||
this.deviceId = item
|
||||
},
|
||||
handleBtnName() {
|
||||
uni.showTabBar()
|
||||
let data = {
|
||||
id: this.deviceId.id,
|
||||
deviceName: this.deviceName
|
||||
}
|
||||
deviceReName(data).then((res) => {
|
||||
if (res.code == 200) {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none',
|
||||
duration: 1000
|
||||
});
|
||||
setTimeout(() => {
|
||||
this.onIntall();
|
||||
}, 500);
|
||||
this.RenameModel = false
|
||||
this.deviceName = ''
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none',
|
||||
duration: 1000
|
||||
});
|
||||
}
|
||||
})
|
||||
},
|
||||
// 发生短信
|
||||
handleSend() {
|
||||
@ -146,14 +330,32 @@
|
||||
url: '/pages/common/send/index'
|
||||
})
|
||||
},
|
||||
handleFile() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/6170/deviceControl/index'
|
||||
})
|
||||
handleFile(item) {
|
||||
console.log(item, 'item');
|
||||
// communicationMode 0是4G 1是蓝牙
|
||||
if (item.communicationMode == 0) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/6170/deviceControl/index'
|
||||
})
|
||||
} else {
|
||||
uni.navigateTo({
|
||||
url: '/pages/6155/index'
|
||||
})
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
|
||||
onIntall() {
|
||||
this.page = 1;
|
||||
this.finished = false;
|
||||
this.deviceList = [];
|
||||
this.getData(); // 重新加载第一页数据
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
this.getTab()
|
||||
this.onIntall()
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -167,10 +369,67 @@
|
||||
padding: 30rpx;
|
||||
}
|
||||
|
||||
/* 设备列表 */
|
||||
.device-list {
|
||||
/* flex: 1; */
|
||||
/* padding: 20rpx; */
|
||||
.tab-bar {
|
||||
width: 100%;
|
||||
color: rgb(255, 255, 255);
|
||||
white-space: nowrap;
|
||||
/* 禁止换行 */
|
||||
overflow: hidden;
|
||||
|
||||
}
|
||||
|
||||
.tab-container {
|
||||
display: flex;
|
||||
/* justify-content: space-around; */
|
||||
cursor: pointer;
|
||||
margin-bottom: 40rpx;
|
||||
/* min-width: 100%; */
|
||||
/* 最小宽度 */
|
||||
}
|
||||
|
||||
.tab-item {
|
||||
font-size: 28rpx;
|
||||
/* min-width: 120rpx; */
|
||||
padding: 0 30rpx; /* 左右内边距 */
|
||||
text-align: center; /* 文字居中 */
|
||||
/* 设置最小宽度 */
|
||||
}
|
||||
|
||||
.active {
|
||||
color: rgba(187, 230, 0, 1);
|
||||
border-bottom: 6rpx solid rgba(187, 230, 0, 1);
|
||||
height: 60rpx;
|
||||
}
|
||||
|
||||
.sendFlex {
|
||||
display: flex;
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
justify-content: flex-end;
|
||||
cursor: pointer;
|
||||
margin-bottom: 30rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
.gprs{
|
||||
width:28rpx;
|
||||
height:35rpx;
|
||||
position: absolute;
|
||||
left:50rpx
|
||||
}
|
||||
|
||||
.Sendmessage {
|
||||
margin-left: 50rpx;
|
||||
border: 1px solid rgba(187, 230, 0, 0.4);
|
||||
border-radius: 20px;
|
||||
padding: 7rpx 20rpx;
|
||||
color: rgba(187, 230, 0, 1);
|
||||
}
|
||||
.callpolice{
|
||||
border: 1px solid rgba(224, 52, 52, 0.4);
|
||||
border-radius: 20px;
|
||||
color: rgba(224, 52, 52, 1);
|
||||
width: 150rpx;
|
||||
text-align: center;
|
||||
padding: 5rpx 10rpx;
|
||||
}
|
||||
|
||||
/* 设备卡片 */
|
||||
@ -192,7 +451,7 @@
|
||||
}
|
||||
|
||||
.device-name {
|
||||
font-size: 32rpx;
|
||||
font-size: 28rpx;
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
margin-left: 24rpx;
|
||||
line-height: 50rpx;
|
||||
@ -200,7 +459,7 @@
|
||||
|
||||
.ID {
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
font-size: 26rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.device-status {
|
||||
@ -217,17 +476,21 @@
|
||||
}
|
||||
|
||||
.circle {
|
||||
width: 10rpx;
|
||||
height: 50rpx;
|
||||
width: 8rpx;
|
||||
height: 40rpx;
|
||||
position: absolute;
|
||||
right: 40rpx;
|
||||
top: 100rpx;
|
||||
top: 80rpx;
|
||||
}
|
||||
|
||||
.online {
|
||||
color: rgb(187, 230, 0);
|
||||
}
|
||||
|
||||
.unline {
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
|
||||
.device-id {
|
||||
font-size: 26rpx;
|
||||
color: #999;
|
||||
@ -281,6 +544,13 @@
|
||||
margin-top: 12rpx;
|
||||
}
|
||||
|
||||
.loading-status {
|
||||
text-align: center;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
padding: 20rpx;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
|
||||
.device-uplod {
|
||||
background-color: rgb(26, 26, 26);
|
||||
border-radius: 16rpx;
|
||||
@ -401,4 +671,49 @@
|
||||
background-color: rgba(35, 35, 35, 0.87);
|
||||
color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
|
||||
/* 提示框样式 */
|
||||
.tooltip-box {
|
||||
position: fixed;
|
||||
right: 18rpx;
|
||||
top: 140rpx;
|
||||
/* 根据导航栏高度调整 */
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.tooltip-arrow {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 8px solid transparent;
|
||||
border-right: 8px solid transparent;
|
||||
border-bottom: 8px solid #333;
|
||||
position: absolute;
|
||||
right: 12px;
|
||||
top: -8px;
|
||||
}
|
||||
|
||||
.tooltip-content {
|
||||
border-radius: 8rpx;
|
||||
backdrop-filter: blur(14px);
|
||||
background: rgba(58, 58, 58, 1);
|
||||
padding: 10px 0;
|
||||
min-width: 120px;
|
||||
}
|
||||
|
||||
.tooltip-item {
|
||||
padding: 8px 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.tooltip-item text {
|
||||
margin-left: 8px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.item-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user