872 lines
21 KiB
Vue
872 lines
21 KiB
Vue
<template>
|
||
<view class="" style="padding-bottom: 50rpx;box-sizing: border-box;">
|
||
<u-navbar title="设备控制" :border-bottom="false" :background="bgc" title-color='#000' back-icon-color="#000" :custom-back="btnshang"
|
||
title-size='36' height='50'></u-navbar>
|
||
<view class="iptbox">
|
||
<view class="qrcode" @click="qrcode()">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/uy7BNwAMIKwvstqFnRhs" mode=""></image>
|
||
</view>
|
||
<input type="text" class="ips" v-model="storeId" placeholder="请扫描设备上的二维码" style="margin-left: 32rpx;" placeholder-class="my-placeholder"/>
|
||
<view class="" style="width: 140rpx;height: 60rpx;background-color: #52c41a;text-align: center;line-height: 60rpx;border-radius: 8rpx;color: #fff;" @click="btnly" v-if="obj.mac">
|
||
蓝牙
|
||
</view>
|
||
</view>
|
||
<!-- <view class="machao">
|
||
网关MAC号：{{obj.mac == undefined ? '--' : obj.mac}} <text v-if="onlineStatus == '离线'" style="color: red;margin-left: 50rpx;">离线</text> <text v-if="onlineStatus == '在线'" style="color: green;margin-left: 50rpx;">在线</text>
|
||
</view> -->
|
||
<!-- 网关信息卡片 -->
|
||
<view class="device-info-card" v-if="obj.dataPoints">
|
||
<!-- 设备头部信息 -->
|
||
<view class="device-header">
|
||
<view class="device-header-info" style="display: flex;justify-content: space-between;align-items: center;">
|
||
<view class="device-name" style="display: flex;justify-content: space-between;align-items: center;">
|
||
网关信息
|
||
|
||
<view class="device-status-row" style="margin-left: 20rpx;">
|
||
<view class="status-badge" :class="{'status-online': onlineStatus == '在线', 'status-offline': onlineStatus == '离线'}">
|
||
{{onlineStatus}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="info-item" style="font-size: 22rpx;font-weight: 400;color: #ccc;">
|
||
<text class="info-value">{{obj.mac || '--'}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 状态信息 -->
|
||
<view class="info-section" style="border-top: 1rpx solid #f0f0f0;padding-top: 20rpx;">
|
||
<view class="section-title">网关信息</view>
|
||
<view class="info-grid">
|
||
<view class="info-item">
|
||
<text class="info-label">VER</text>
|
||
<text class="info-value">{{obj.dataPoints && obj.dataPoints.VER ? obj.dataPoints.VER.value : '--'}}</text>
|
||
</view>
|
||
<view class="info-item" style="position: relative;">
|
||
<text class="info-label">CSQ</text>
|
||
<view style="display: flex;align-items: center;gap: 10rpx;">
|
||
<text class="info-value" style="flex: 1;">{{obj.dataPoints && obj.dataPoints.CSQ ? obj.dataPoints.CSQ.value : '--'}}</text>
|
||
<view class="update-btn" @click="updateCSQ">
|
||
<text class="update-icon">↻</text>
|
||
<text class="update-text">更新</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="zisb" style="width: 658rpx;margin: auto;">
|
||
<view class="tit" style="margin-top: 30rpx;">
|
||
子设备信息
|
||
</view>
|
||
</view>
|
||
<!-- 设备详细信息卡片 -->
|
||
<view class="device-info-card" v-if="macobj.deviceId">
|
||
<!-- 设备头部信息 -->
|
||
<view class="device-header">
|
||
<image v-if="macobj.picture || macobj.modelPicture" :src="macobj.picture || macobj.modelPicture" class="device-image" mode="aspectFill"></image>
|
||
<view class="device-header-info">
|
||
<view class="device-name" style="display: flex;justify-content: space-between;align-items: center;">
|
||
{{macobj.deviceName || macobj.modelName || '--'}}
|
||
<view class="info-item" style="font-size: 22rpx;font-weight: 400;color: #ccc;">
|
||
<text class="info-value">{{macobj.mac || '--'}}</text>
|
||
</view></view>
|
||
<view class="device-status-row">
|
||
<view class="status-badge" :class="{'status-online': macobj.onlineStatus == '1', 'status-offline': macobj.onlineStatus == '0'}">
|
||
{{macobj.onlineStatus == '1' ? '在线' : '离线'}}
|
||
</view>
|
||
<text class="device-version" v-if="macobj.version">版本: {{macobj.dataPoints.ver.value == null ? '--' : macobj.dataPoints.ver.value}}</text>
|
||
<text class="device-version" v-if="macobj.dataPoints.RSSI">信号:{{macobj.dataPoints.RSSI.value == null ? '--' : macobj.dataPoints.RSSI.value}}</text>
|
||
<view class="signal-strength" v-if="macobj.bluetoothDbm !== null && macobj.bluetoothDbm !== undefined">
|
||
<view class="signal-bars">
|
||
<view class="signal-bar" :class="{'active': getSignalLevel(macobj.bluetoothDbm) >= 1}"></view>
|
||
<view class="signal-bar" :class="{'active': getSignalLevel(macobj.bluetoothDbm) >= 2}"></view>
|
||
<view class="signal-bar" :class="{'active': getSignalLevel(macobj.bluetoothDbm) >= 3}"></view>
|
||
<view class="signal-bar" :class="{'active': getSignalLevel(macobj.bluetoothDbm) >= 4}"></view>
|
||
</view>
|
||
<text class="signal-value">{{macobj.bluetoothDbm}}dBm</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<text class="device-version" style="margin-bottom: 20rpx;display: block;" v-if="macobj.dataPoints.RSSI">更新时间: {{macobj.dataPoints.RSSI.at == null ? '--' : macobj.dataPoints.RSSI.at}}</text>
|
||
<!-- 状态信息 -->
|
||
<view class="info-section" style="border-top: 1rpx solid #f0f0f0;padding-top: 20rpx;">
|
||
<view class="section-title">状态信息</view>
|
||
<view class="info-grid">
|
||
<view class="info-item">
|
||
<text class="info-label">在线状态</text>
|
||
<text class="info-value" :style="{color: macobj.onlineStatus == '1' ? '#52c41a' : '#ff4d4f'}">
|
||
{{macobj.onlineStatus == '1' ? '在线' : '离线'}}
|
||
</text>
|
||
</view>
|
||
<view class="info-item">
|
||
<text class="info-label">设备状态</text>
|
||
<text class="info-value" style="font-size: 36rpx;font-weight: 600;">{{getDeviceStatus()}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="list">
|
||
<view class="anniulist">
|
||
<view class="anniu" @click="btngbkq">
|
||
开启
|
||
</view>
|
||
<view class="anniu" @click="btngb">
|
||
关闭
|
||
</view>
|
||
<view class="anniu" @click="getmacs">
|
||
刷新
|
||
</view>
|
||
</view>
|
||
<view class="fanhui" @click="btnfh">
|
||
返回
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
bgc: {
|
||
backgroundColor: "#FAFDFD",
|
||
},
|
||
storeId: '',
|
||
obj: {},
|
||
id: '',
|
||
onlineStatus: '--',
|
||
powerStatus: '--',
|
||
message: '定时器未启动',
|
||
intervalId: null, // 用于存储定时器的ID
|
||
wdxsn:'',
|
||
wdxsw:'',
|
||
xsN:'',
|
||
xsW:'',
|
||
|
||
valuedian:1000,
|
||
xshu:'1',
|
||
x:'',
|
||
macsb:'',
|
||
macobj:{}
|
||
}
|
||
},
|
||
onLoad(options) {
|
||
if (options.sn) {
|
||
this.storeId = options.sn
|
||
this.getsn()
|
||
}
|
||
},
|
||
onUnload() {
|
||
// 页面卸载时清除定时器
|
||
this.clearInterval()
|
||
},
|
||
onHide() {
|
||
// 页面隐藏时清除定时器（可选，根据需求决定是否添加）
|
||
this.clearInterval()
|
||
},
|
||
beforeDestroy() {
|
||
// 组件销毁前清除定时器（可选，根据需求决定是否添加）
|
||
this.clearInterval()
|
||
},
|
||
methods: {
|
||
btnly(){
|
||
uni.reLaunch({
|
||
url:'/page_newyemian/wgluru'
|
||
})
|
||
},
|
||
btnshang(){
|
||
uni.reLaunch({
|
||
url:'/page_newyemian/wgluru'
|
||
})
|
||
},
|
||
// 根据信号强度计算信号格数（1-4格）
|
||
getSignalLevel(dbm) {
|
||
if (dbm === null || dbm === undefined) {
|
||
return 0;
|
||
}
|
||
// 信号强度分级：-50到-60为满格，-60到-70为3格，-70到-80为2格，-80到-90为1格
|
||
if (dbm >= -60) {
|
||
return 4; // 满格
|
||
} else if (dbm >= -70) {
|
||
return 3;
|
||
} else if (dbm >= -80) {
|
||
return 2;
|
||
} else if (dbm >= -90) {
|
||
return 1;
|
||
} else {
|
||
return 0; // 信号太弱，不显示
|
||
}
|
||
},
|
||
getver() {
|
||
if (!this.macobj || !this.macobj.dataPoints) {
|
||
return '--';
|
||
}
|
||
return this.macobj.dataPoints.ver
|
||
},
|
||
// 获取设备状态（根据dataPoints.d判断）
|
||
getDeviceStatus() {
|
||
if (!this.macobj || !this.macobj.dataPoints) {
|
||
return '--';
|
||
}
|
||
const d = this.macobj.dataPoints.water_sw.value;
|
||
if (d === 0 || d === '0') {
|
||
return '关闭';
|
||
} else if (d === 1 || d === '1') {
|
||
return '开启';
|
||
} else {
|
||
return '--';
|
||
}
|
||
},
|
||
startInterval() {
|
||
// 每五秒执行一次的方法
|
||
const timerCallback = () => {
|
||
if(this.storeId == '' || this.storeId == null || this.obj == null){
|
||
this.clearInterval()
|
||
}else{
|
||
this.$u.get(`/app/beehive/admin/sn/${this.storeId}?refresh=true`).then(res => {
|
||
if (res.code == 200) {
|
||
this.obj = res.data
|
||
this.xsW = res.data.xsW
|
||
this.xsN = res.data.xsN
|
||
this.id = res.data.deviceId
|
||
if (res.data.onlineStatus == 0) {
|
||
this.onlineStatus = '离线'
|
||
} else if (res.data.onlineStatus == 1) {
|
||
this.onlineStatus = '在线'
|
||
}
|
||
if (res.data.powerStatus == 0) {
|
||
this.powerStatus = '关闭'
|
||
} else if (res.data.powerStatus == 1) {
|
||
this.powerStatus = '开启'
|
||
}
|
||
}
|
||
})
|
||
}
|
||
}
|
||
// 启动定时器，并将ID存储在intervalId中
|
||
this.intervalId = setInterval(timerCallback, 5000)
|
||
},
|
||
clearInterval() {
|
||
// 清除定时器
|
||
if (this.intervalId !== null) {
|
||
clearInterval(this.intervalId)
|
||
this.intervalId = null
|
||
}
|
||
},
|
||
// 进行扫描二维码获取设备sn
|
||
qrcode() {
|
||
uni.scanCode({
|
||
onlyFromCamera: true,
|
||
scanType: ['qrCode'],
|
||
success: 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)
|
||
let id = getQueryParam(decodedValue, 's')
|
||
this.storeId = id
|
||
this.getsn()
|
||
},
|
||
fail: err => {
|
||
console.error('扫描失败：', err)
|
||
uni.showToast({
|
||
title: '扫描失败',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
})
|
||
},
|
||
// 根据设备sn获取设备详情
|
||
getsn() {
|
||
this.$u.get(`/device/device/getDetail?sn=${this.storeId}`).then(res => {
|
||
if (res.code == 200) {
|
||
if(res.data == null){
|
||
this.clearInterval()
|
||
}else{
|
||
this.obj = res.data
|
||
this.getmac()
|
||
if (res.data.onlineStatus == 0) {
|
||
this.onlineStatus = '离线'
|
||
} else if (res.data.onlineStatus == 1) {
|
||
this.onlineStatus = '在线'
|
||
}
|
||
}
|
||
} else {
|
||
uni.showToast({
|
||
title:'错误' + res.msg,
|
||
icon: 'none',
|
||
duration: 2000,
|
||
})
|
||
this.clearInterval()
|
||
}
|
||
})
|
||
},
|
||
// 更新CSQ
|
||
updateCSQ() {
|
||
uni.showLoading({
|
||
title: '更新中...',
|
||
mask: true,
|
||
icon: 'none'
|
||
})
|
||
let data = {
|
||
mac:this.obj.mac,
|
||
command:'CSQ'
|
||
}
|
||
this.$u.post(`/as/deviceGateway/sendCommandToGateway`,data).then(res => {
|
||
if (res.code == 200 && res.data.success == true) {
|
||
this.getsn()
|
||
setTimeout(()=>{
|
||
uni.hideLoading()
|
||
uni.showToast({
|
||
title: '更新成功',
|
||
icon: 'success',
|
||
duration: 2000
|
||
})
|
||
},1000)
|
||
} else {
|
||
uni.showToast({
|
||
title: res.data.msg,
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
uni.hideLoading()
|
||
}
|
||
}).catch(err => {
|
||
uni.hideLoading()
|
||
uni.showToast({
|
||
title: '更新失败',
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
})
|
||
},
|
||
// 返回录入
|
||
btnfh() {
|
||
uni.reLaunch({
|
||
url:'/page_newyemian/wgluru'
|
||
})
|
||
},
|
||
//点击刷新
|
||
getmacs(){
|
||
uni.showLoading({
|
||
title: '刷新中...',
|
||
mask: true,
|
||
icon: 'none'
|
||
})
|
||
setTimeout(()=>{
|
||
this.$u.get(`/system/config/configKey/device.gateway.test.mac`).then(res =>{
|
||
if(res.code == 200){
|
||
this.macsb = res.data
|
||
this.$u.get(`/device/device/getDetail?mac=${this.macsb}&gatewayMacList=${this.obj.mac}`).then(resp =>{
|
||
if(resp.code == 200){
|
||
this.getsn()
|
||
this.id = resp.data.deviceId
|
||
this.macobj = resp.data
|
||
uni.showToast({
|
||
title: '刷新成功',
|
||
icon: 'success',
|
||
duration: 2000
|
||
})
|
||
uni.hideLoading()
|
||
}else{
|
||
uni.showToast({
|
||
title: '错误' + resp.msg,
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
uni.hideLoading()
|
||
}
|
||
})
|
||
}else{
|
||
uni.showToast({
|
||
title: '错误' + res.msg,
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
uni.hideLoading()
|
||
}
|
||
})
|
||
},1000)
|
||
},
|
||
// 自动刷新
|
||
getmac(){
|
||
this.$u.get(`/system/config/configKey/device.gateway.test.mac`).then(res =>{
|
||
if(res.code == 200){
|
||
this.macsb = res.data
|
||
this.$u.get(`/device/device/getDetail?mac=${this.macsb}&gatewayMacList=${this.obj.mac}`).then(resp =>{
|
||
if(resp.code == 200){
|
||
this.id = resp.data.deviceId
|
||
this.macobj = resp.data
|
||
}else{
|
||
uni.showToast({
|
||
title: '错误' + resp.msg,
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
}
|
||
})
|
||
}else{
|
||
uni.showToast({
|
||
title: '错误' + res.msg,
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
}
|
||
})
|
||
},
|
||
|
||
// 关闭
|
||
btngb() {
|
||
uni.showLoading({
|
||
title: '关闭中...',
|
||
mask: true,
|
||
icon: 'none'
|
||
})
|
||
let data = {
|
||
deviceMac:this.macsb,
|
||
gatewayMac:this.obj.mac
|
||
}
|
||
this.$u.post(`/device/device/close/specGateway`,data).then((res) => {
|
||
if (res.code == 200) {
|
||
setTimeout(() => {
|
||
this.btnsx()
|
||
}, 1000)
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'success',
|
||
duration: 2000
|
||
})
|
||
} else {
|
||
uni.hideLoading()
|
||
uni.showToast({
|
||
title: '错误' + res.msg,
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
}
|
||
})
|
||
},
|
||
// 开启
|
||
btngbkq() {
|
||
uni.showLoading({
|
||
title: '开启中...',
|
||
mask: true,
|
||
icon: 'none'
|
||
})
|
||
let data = {
|
||
deviceMac:this.macsb,
|
||
second:180,
|
||
gatewayMac:this.obj.mac
|
||
}
|
||
this.$u.post(`/device/device/time/specGateway`,data).then((res) => {
|
||
if (res.code == 200) {
|
||
setTimeout(() => {
|
||
this.btnsx()
|
||
}, 1000)
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'success',
|
||
duration: 2000
|
||
})
|
||
} else {
|
||
uni.hideLoading()
|
||
uni.showToast({
|
||
title: '错误' + res.msg,
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
}
|
||
})
|
||
},
|
||
// 刷新
|
||
btnsx() {
|
||
this.$u.get(`/device/device/getDetail?mac=${this.macsb}&gatewayMacList=${this.obj.mac}`).then(resp =>{
|
||
if(resp.code == 200){
|
||
this.id = resp.data.deviceId
|
||
this.macobj = resp.data
|
||
uni.hideLoading()
|
||
}else{
|
||
uni.hideLoading()
|
||
uni.showToast({
|
||
title: '错误' + resp.msg,
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
}
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="less">
|
||
.jiaozhun{
|
||
display: flex;
|
||
padding:0 50rpx;
|
||
box-sizing: border-box;
|
||
width: 100%;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
button{
|
||
height: 80rpx;
|
||
line-height: 80rpx;
|
||
background-color: #52c41a;
|
||
color: #fff;
|
||
}
|
||
.input{
|
||
input{
|
||
height: 80rpx;
|
||
line-height: 80rpx;
|
||
}
|
||
border: 1px solid #ccc;
|
||
border-radius: 20rpx;
|
||
display: flex;
|
||
width: 260rpx;
|
||
height: 80rpx;
|
||
text-align: center;
|
||
}
|
||
.view{
|
||
width: 200rpx;
|
||
height: 80rpx;
|
||
border-radius: 20rpx;
|
||
background-color: #52c41a;
|
||
color: #fff;
|
||
text-align: center;
|
||
line-height: 80rpx;
|
||
font-size: 28rpx;
|
||
}
|
||
}
|
||
.list {
|
||
margin-top: 30rpx;
|
||
position: fixed;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
bottom: 50rpx;
|
||
.anniulist {
|
||
width: 658rpx;
|
||
margin: auto;
|
||
text-align: left;
|
||
font-size: 32rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
.anniu {
|
||
width: 30%;
|
||
height: 90rpx;
|
||
border-radius: 20rpx;
|
||
background-color: #52c41a;
|
||
color: #fff;
|
||
font-size: 32rpx;
|
||
text-align: center;
|
||
line-height: 90rpx;
|
||
margin: 0 10rpx;
|
||
}
|
||
}
|
||
.fanhui {
|
||
width: 658rpx;
|
||
height: 90rpx;
|
||
border-radius: 20rpx;
|
||
background-color: #52c41a;
|
||
color: #fff;
|
||
font-size: 32rpx;
|
||
text-align: center;
|
||
line-height: 90rpx;
|
||
margin: auto;
|
||
margin-top: 50rpx;
|
||
}
|
||
}
|
||
.machao {
|
||
width: 658rpx;
|
||
margin: auto;
|
||
margin-top: 20rpx;
|
||
text-align: left;
|
||
font-size: 32rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
.one{
|
||
width: 320rpx;
|
||
}
|
||
input{
|
||
width: 100rpx;
|
||
height: 40rpx;
|
||
border: 1px solid #52c41a;
|
||
margin-left: 50rpx;
|
||
text-align: center;
|
||
border-radius: 10rpx;
|
||
}
|
||
view{
|
||
margin-left: 20rpx;
|
||
padding: 10rpx 20rpx;
|
||
box-sizing: border-box;
|
||
background-color: #52c41a;
|
||
color: #fff;
|
||
border-radius: 10rpx;
|
||
margin-right: 10rpx;
|
||
}
|
||
}
|
||
.title {
|
||
font-size: 70rpx;
|
||
font-weight: 600;
|
||
text-align: left;
|
||
width: 658rpx;
|
||
margin: auto;
|
||
margin-top: 30rpx;
|
||
}
|
||
.shuom {
|
||
width: 658rpx;
|
||
margin: auto;
|
||
margin-top: 30rpx;
|
||
text-align: left;
|
||
font-size: 32rpx;
|
||
}
|
||
.iptbox {
|
||
display: flex;
|
||
align-items: center;
|
||
flex-wrap: nowrap;
|
||
padding: 22rpx;
|
||
margin: 28rpx auto 0;
|
||
width: 658rpx;
|
||
height: 88rpx;
|
||
background: #FFFFFF;
|
||
box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.15);
|
||
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
||
.qrcode {
|
||
padding-right: 20rpx;
|
||
border-right: 2rpx solid #D8D8D8;
|
||
image {
|
||
width: 54rpx;
|
||
height: 54rpx;
|
||
}
|
||
}
|
||
.ips {
|
||
width: 630rpx;
|
||
|
||
}
|
||
image {
|
||
width: 18rpx;
|
||
height: 32rpx;
|
||
}
|
||
.my-placeholder {
|
||
font-weight: 400;
|
||
font-size: 32rpx;
|
||
color: #808080;
|
||
}
|
||
}
|
||
|
||
.tit {
|
||
font-size: 36rpx;
|
||
font-weight: 600;
|
||
color: #333;
|
||
}
|
||
|
||
// 设备信息卡片
|
||
.device-info-card {
|
||
width: 658rpx;
|
||
margin: 30rpx auto;
|
||
background: #FFFFFF;
|
||
border-radius: 20rpx;
|
||
padding: 30rpx;
|
||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
|
||
|
||
.device-header {
|
||
display: flex;
|
||
align-items: center;
|
||
padding-bottom: 30rpx;
|
||
|
||
|
||
.device-image {
|
||
width: 120rpx;
|
||
height: 120rpx;
|
||
border-radius: 16rpx;
|
||
margin-right: 24rpx;
|
||
background: #f5f5f5;
|
||
}
|
||
|
||
.device-header-info {
|
||
flex: 1;
|
||
|
||
.device-name {
|
||
font-size: 36rpx;
|
||
font-weight: 600;
|
||
color: #333;
|
||
margin-bottom: 16rpx;
|
||
}
|
||
|
||
.device-status-row {
|
||
display: flex;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
gap: 16rpx;
|
||
|
||
.status-badge {
|
||
padding: 8rpx 20rpx;
|
||
border-radius: 20rpx;
|
||
font-size: 24rpx;
|
||
|
||
&.status-online {
|
||
background: #e6f7e6;
|
||
color: #52c41a;
|
||
}
|
||
|
||
&.status-offline {
|
||
background: #fff1f0;
|
||
color: #ff4d4f;
|
||
}
|
||
}
|
||
|
||
.device-version {
|
||
font-size: 24rpx;
|
||
color: #999;
|
||
}
|
||
|
||
.signal-strength {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8rpx;
|
||
|
||
.signal-bars {
|
||
display: flex;
|
||
align-items: flex-end;
|
||
gap: 3rpx;
|
||
height: 24rpx;
|
||
|
||
.signal-bar {
|
||
width: 6rpx;
|
||
background: #e0e0e0;
|
||
border-radius: 2rpx;
|
||
transition: all 0.3s;
|
||
|
||
&:nth-child(1) {
|
||
height: 8rpx;
|
||
}
|
||
|
||
&:nth-child(2) {
|
||
height: 12rpx;
|
||
}
|
||
|
||
&:nth-child(3) {
|
||
height: 16rpx;
|
||
}
|
||
|
||
&:nth-child(4) {
|
||
height: 20rpx;
|
||
}
|
||
|
||
&.active {
|
||
background: #52c41a;
|
||
}
|
||
}
|
||
}
|
||
|
||
.signal-value {
|
||
font-size: 22rpx;
|
||
color: #999;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.info-section {
|
||
margin-bottom: 30rpx;
|
||
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 32rpx;
|
||
font-weight: 600;
|
||
color: #333;
|
||
margin-bottom: 20rpx;
|
||
padding-left: 16rpx;
|
||
border-left: 6rpx solid #52c41a;
|
||
}
|
||
|
||
.info-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 20rpx;
|
||
|
||
.info-item {
|
||
background: #fafafa;
|
||
border-radius: 12rpx;
|
||
padding: 20rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
.info-label {
|
||
font-size: 24rpx;
|
||
color: #999;
|
||
margin-bottom: 8rpx;
|
||
}
|
||
|
||
.info-value {
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
font-weight: 500;
|
||
word-break: break-all;
|
||
width: 170rpx;
|
||
}
|
||
|
||
.info-value-group {
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
.info-value {
|
||
margin-bottom: 4rpx;
|
||
}
|
||
|
||
.info-time {
|
||
font-size: 22rpx;
|
||
color: #999;
|
||
}
|
||
}
|
||
|
||
.update-btn {
|
||
padding: 8rpx 16rpx;
|
||
border: none;
|
||
border-radius: 8rpx;
|
||
background: linear-gradient(135deg, #52c41a 0%, #73d13d 100%);
|
||
cursor: pointer;
|
||
transition: all 0.3s;
|
||
flex-shrink: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 4rpx;
|
||
box-shadow: 0 2rpx 8rpx rgba(82, 196, 26, 0.3);
|
||
|
||
.update-icon {
|
||
font-size: 22rpx;
|
||
color: #fff;
|
||
line-height: 1;
|
||
font-weight: bold;
|
||
display: inline-block;
|
||
transition: transform 0.3s;
|
||
}
|
||
|
||
.update-text {
|
||
font-size: 22rpx;
|
||
color: #fff;
|
||
line-height: 1;
|
||
font-weight: 500;
|
||
}
|
||
|
||
&:active {
|
||
background: linear-gradient(135deg, #389e0d 0%, #52c41a 100%);
|
||
box-shadow: 0 1rpx 4rpx rgba(82, 196, 26, 0.4);
|
||
transform: scale(0.95);
|
||
|
||
.update-icon {
|
||
transform: rotate(180deg);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |