331 lines
8.3 KiB
Vue
331 lines
8.3 KiB
Vue
<template>
|
|
<view class="page">
|
|
<u-navbar :is-back="true" :border-bottom="false" :background="bgc" title-color='#2E4975' title-size='36'
|
|
height='40' title="网关列表"></u-navbar>
|
|
<view class="gateway-list">
|
|
<view class="gateway-item" v-for="(item, index) in gatewayList" :key="index" @click="handleItemClick(item)">
|
|
<view class="gateway-header">
|
|
<view class="gateway-icon-wrapper">
|
|
<image class="gateway-icon" :src="item.picture || item.modelPicture " mode="aspectFill"></image>
|
|
<view class="status-dot" :class="item.onlineStatus == 1 ? 'status-online-dot' : 'status-offline-dot'"></view>
|
|
</view>
|
|
<view class="gateway-main-info">
|
|
<view class="gateway-title-row">
|
|
<text class="gateway-title">{{ item.deviceName || '未命名设备' }}</text>
|
|
</view>
|
|
<view class="gateway-model">{{ item.modelName }}</view>
|
|
</view>
|
|
<view class="gateway-status-badge" :class="item.onlineStatus == 1 ? 'status-online' : 'status-offline'">
|
|
{{ item.onlineStatus == 1 ? '在线' : '离线' }}
|
|
</view>
|
|
</view>
|
|
<view class="gateway-divider"></view>
|
|
<view class="gateway-info-grid">
|
|
<view class="info-item">
|
|
<text class="info-label">SN</text>
|
|
<text class="info-value">{{ item.sn || '--' }}</text>
|
|
</view>
|
|
<view class="info-item">
|
|
<text class="info-label">MAC</text>
|
|
<text class="info-value">{{ item.mac || '--' }}</text>
|
|
</view>
|
|
</view>
|
|
<view class="gateway-footer" v-if="item.activationTime">
|
|
<text class="footer-text">激活时间：{{ formatTime(item.activationTime) }}</text>
|
|
</view>
|
|
</view>
|
|
<view class="empty-state" v-if="gatewayList.length == 0">
|
|
<text class="empty-text">暂无网关设备</text>
|
|
<text class="empty-desc">请添加网关设备后查看</text>
|
|
</view>
|
|
</view>
|
|
<view class="saoma" @click="btnsm">
|
|
扫码绑定
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
bgc: {
|
|
background: '#FFFFFF'
|
|
},
|
|
gatewayList: [],
|
|
sn:''
|
|
}
|
|
},
|
|
onLoad() {
|
|
// 可以在这里请求网关列表数据
|
|
this.getlist()
|
|
},
|
|
methods: {
|
|
// 获取网关列表
|
|
getlist(){
|
|
let userId = uni.getStorageSync('userId')
|
|
this.$u.get(`/app/device/list?userId=${userId}&classifyCodeList=6`).then((res) => {
|
|
if (res.code == 200) {
|
|
this.gatewayList = res.data
|
|
}
|
|
})
|
|
},
|
|
// 格式化时间
|
|
formatTime(timeStr) {
|
|
if (!timeStr) return '--'
|
|
// 如果时间格式是 "2025-12-20 13:46:28"，直接返回
|
|
if (timeStr.includes(' ')) {
|
|
return timeStr
|
|
}
|
|
// 如果是时间戳，需要转换
|
|
const date = new Date(timeStr)
|
|
if (isNaN(date.getTime())) {
|
|
return timeStr
|
|
}
|
|
const year = date.getFullYear()
|
|
const month = String(date.getMonth() + 1).padStart(2, '0')
|
|
const day = String(date.getDate()).padStart(2, '0')
|
|
const hours = String(date.getHours()).padStart(2, '0')
|
|
const minutes = String(date.getMinutes()).padStart(2, '0')
|
|
const seconds = String(date.getSeconds()).padStart(2, '0')
|
|
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
|
|
},
|
|
// 处理项目点击
|
|
handleItemClick(item) {
|
|
uni.navigateTo({
|
|
url: `/pages/gateway/xq?id=${item.deviceId}`
|
|
})
|
|
},
|
|
// 点击进行扫码
|
|
btnsm(){
|
|
uni.scanCode({
|
|
onlyFromCamera: true,
|
|
scanType: ['qrCode'],
|
|
success: res => {
|
|
console.log(res)
|
|
function getQueryParam(url, paramName) {
|
|
let regex = new RegExp(`[?&]${paramName}=([^&]*)`)
|
|
let results = regex.exec(url)
|
|
return results ? decodeURIComponent(results[1].replace(/\+/g, ' ')) : null
|
|
}
|
|
let sceneValue = res.result
|
|
let decodedValue = decodeURIComponent(sceneValue)
|
|
this.sn = getQueryParam(decodedValue, 's')
|
|
let data = {
|
|
sn:this.sn
|
|
}
|
|
this.$u.post(`/app/device/bindDevice`,data).then((res) => {
|
|
if (res.code == 200) {
|
|
this.getlist()
|
|
uni.showToast({
|
|
title: '绑定成功',
|
|
icon: 'success',
|
|
duration:3000
|
|
})
|
|
}else{
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: res.msg,
|
|
showCancel: false,
|
|
confirmText: '知道了'
|
|
})
|
|
}
|
|
})
|
|
},
|
|
fail: err => {
|
|
console.error('扫描失败：', err)
|
|
uni.showToast({
|
|
title: '扫描失败',
|
|
icon: 'none'
|
|
})
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.page {
|
|
min-height: 100vh;
|
|
background: linear-gradient(180deg, #F8F9FA 0%, #F0F2F5 100%);
|
|
}
|
|
.saoma{
|
|
width: 680rpx;
|
|
height: 90rpx;
|
|
background-color: #48893B;
|
|
color: #FFFFFF;
|
|
font-size: 32rpx;
|
|
font-weight: 600;
|
|
text-align: center;
|
|
line-height: 90rpx;
|
|
border-radius: 30rpx;
|
|
position: fixed;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
bottom: 30rpx;
|
|
}
|
|
.gateway-list {
|
|
padding: 24rpx;
|
|
box-sizing: border-box;
|
|
height: 82vh;
|
|
overflow: scroll;
|
|
.gateway-item {
|
|
background: #FFFFFF;
|
|
border-radius: 24rpx;
|
|
margin-bottom: 24rpx;
|
|
padding: 32rpx;
|
|
box-sizing: border-box;
|
|
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
|
|
transition: all 0.3s ease;
|
|
&:active {
|
|
transform: scale(0.98);
|
|
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
|
|
}
|
|
.gateway-header {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 24rpx;
|
|
.gateway-icon-wrapper {
|
|
position: relative;
|
|
margin-right: 24rpx;
|
|
flex-shrink: 0;
|
|
.gateway-icon {
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
border-radius: 20rpx;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
}
|
|
.status-dot {
|
|
position: absolute;
|
|
top: -4rpx;
|
|
right: -4rpx;
|
|
width: 24rpx;
|
|
height: 24rpx;
|
|
border-radius: 50%;
|
|
border: 4rpx solid #FFFFFF;
|
|
&.status-online-dot {
|
|
background: #15C55D;
|
|
box-shadow: 0 0 12rpx rgba(21, 197, 93, 0.4);
|
|
}
|
|
&.status-offline-dot {
|
|
background: #999999;
|
|
}
|
|
}
|
|
}
|
|
.gateway-main-info {
|
|
flex: 1;
|
|
min-width: 0;
|
|
.gateway-title-row {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 12rpx;
|
|
.gateway-title {
|
|
font-size: 36rpx;
|
|
color: #1A1A1A;
|
|
font-weight: 600;
|
|
margin-right: 16rpx;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.tag-default {
|
|
display: inline-block;
|
|
padding: 4rpx 12rpx;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
color: #FFFFFF;
|
|
font-size: 20rpx;
|
|
border-radius: 8rpx;
|
|
font-weight: 500;
|
|
flex-shrink: 0;
|
|
}
|
|
}
|
|
.gateway-model {
|
|
font-size: 26rpx;
|
|
color: #8E8E93;
|
|
font-weight: 400;
|
|
}
|
|
}
|
|
.gateway-status-badge {
|
|
padding: 8rpx 20rpx;
|
|
border-radius: 20rpx;
|
|
font-size: 24rpx;
|
|
font-weight: 500;
|
|
flex-shrink: 0;
|
|
&.status-online {
|
|
background: rgba(21, 197, 93, 0.1);
|
|
color: #15C55D;
|
|
}
|
|
&.status-offline {
|
|
background: rgba(153, 153, 153, 0.1);
|
|
color: #999999;
|
|
}
|
|
}
|
|
}
|
|
.gateway-divider {
|
|
height: 1rpx;
|
|
background: linear-gradient(90deg, transparent 0%, #E5E5E5 20%, #E5E5E5 80%, transparent 100%);
|
|
margin: 24rpx 0;
|
|
}
|
|
.gateway-info-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 24rpx;
|
|
.info-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
.info-label {
|
|
font-size: 24rpx;
|
|
color: #8E8E93;
|
|
margin-bottom: 8rpx;
|
|
font-weight: 400;
|
|
}
|
|
.info-value {
|
|
font-size: 28rpx;
|
|
color: #1A1A1A;
|
|
font-weight: 500;
|
|
&.voltage-value {
|
|
color: #FF9500;
|
|
}
|
|
&.power-value {
|
|
color: #007AFF;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.gateway-footer {
|
|
margin-top: 24rpx;
|
|
padding-top: 24rpx;
|
|
border-top: 1rpx solid #F0F2F5;
|
|
.footer-text {
|
|
font-size: 24rpx;
|
|
color: #8E8E93;
|
|
}
|
|
}
|
|
}
|
|
.empty-state {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 120rpx 40rpx;
|
|
.empty-icon {
|
|
width: 200rpx;
|
|
height: 200rpx;
|
|
opacity: 0.3;
|
|
margin-bottom: 32rpx;
|
|
}
|
|
.empty-text {
|
|
font-size: 32rpx;
|
|
color: #8E8E93;
|
|
margin-bottom: 16rpx;
|
|
font-weight: 500;
|
|
}
|
|
.empty-desc {
|
|
font-size: 26rpx;
|
|
color: #C7C7CC;
|
|
}
|
|
}
|
|
}
|
|
</style>
|