2026-01-15 14:41:50 +08:00
|
|
|
|
<template>
|
|
|
|
|
|
<view class="" style="padding-bottom: 50rpx;box-sizing: border-box;padding-top: 130rpx;">
|
|
|
|
|
|
<view class="iptbox">
|
|
|
|
|
|
<view class="qrcode" @click="qrcode()">
|
|
|
|
|
|
<image src="https://api.ccttiot.com/smartmeter/img/static/uy7BNwAMIKwvstqFnRhs" mode=""></image>
|
|
|
|
|
|
</view>
|
2026-01-17 17:34:06 +08:00
|
|
|
|
<input type="text" class="ips" v-model="storeId" :placeholder="$i18n.t('scanQRCode')" style="margin-left: 32rpx;" placeholder-class="my-placeholder"/>
|
2026-01-15 14:41:50 +08:00
|
|
|
|
<!-- <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">
|
2026-01-17 17:34:06 +08:00
|
|
|
|
{{$i18n.t('gatewayMac')}}{{obj.mac == undefined ? '--' : obj.mac}} <text v-if="onlineStatus == $i18n.t('offline')" style="color: red;margin-left: 50rpx;">{{$i18n.t('offline')}}</text> <text v-if="onlineStatus == $i18n.t('online')" style="color: green;margin-left: 50rpx;">{{$i18n.t('online')}}</text>
|
2026-01-15 14:41:50 +08:00
|
|
|
|
</view>
|
|
|
|
|
|
<view class="zisb" style="width: 658rpx;margin: auto;">
|
|
|
|
|
|
<view class="tit" style="margin-top: 30rpx;">
|
2026-01-17 17:34:06 +08:00
|
|
|
|
{{$i18n.t('subDeviceInfo')}}
|
2026-01-15 14:41:50 +08:00
|
|
|
|
</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'}">
|
2026-01-17 17:34:06 +08:00
|
|
|
|
{{macobj.onlineStatus == '1' ? $i18n.t('online') : $i18n.t('offline')}}
|
2026-01-15 14:41:50 +08:00
|
|
|
|
</view>
|
2026-01-17 17:34:06 +08:00
|
|
|
|
<text class="device-version" v-if="macobj.version">{{$i18n.t('versionLabel')}} {{getver() == undefined ? '--' : getver()}}</text>
|
2026-01-15 14:41:50 +08:00
|
|
|
|
<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>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 状态信息 -->
|
|
|
|
|
|
<view class="info-section">
|
2026-01-17 17:34:06 +08:00
|
|
|
|
<view class="section-title">{{$i18n.t('statusInfo')}}</view>
|
2026-01-15 14:41:50 +08:00
|
|
|
|
<view class="info-grid">
|
|
|
|
|
|
<view class="info-item">
|
2026-01-17 17:34:06 +08:00
|
|
|
|
<text class="info-label">{{$i18n.t('onlineStatusLabel')}}</text>
|
2026-01-15 14:41:50 +08:00
|
|
|
|
<text class="info-value" :style="{color: macobj.onlineStatus == '1' ? '#52c41a' : '#ff4d4f'}">
|
2026-01-17 17:34:06 +08:00
|
|
|
|
{{macobj.onlineStatus == '1' ? $i18n.t('online') : $i18n.t('offline')}}
|
2026-01-15 14:41:50 +08:00
|
|
|
|
</text>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="info-item">
|
2026-01-17 17:34:06 +08:00
|
|
|
|
<text class="info-label">{{$i18n.t('deviceStatusLabel')}}</text>
|
2026-01-15 14:41:50 +08:00
|
|
|
|
<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">
|
2026-01-17 17:34:06 +08:00
|
|
|
|
{{$i18n.t('open')}}
|
2026-01-15 14:41:50 +08:00
|
|
|
|
</view>
|
|
|
|
|
|
<view class="anniu" @click="btngb">
|
2026-01-17 17:34:06 +08:00
|
|
|
|
{{$i18n.t('close')}}
|
2026-01-15 14:41:50 +08:00
|
|
|
|
</view>
|
|
|
|
|
|
<view class="anniu" @click="getmac">
|
2026-01-17 17:34:06 +08:00
|
|
|
|
{{$i18n.t('refresh')}}
|
2026-01-15 14:41:50 +08:00
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="fanhui" @click="btnfh">
|
2026-01-17 17:34:06 +08:00
|
|
|
|
{{$i18n.t('back')}}
|
2026-01-15 14:41:50 +08:00
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
|
|
|
export default {
|
|
|
|
|
|
data() {
|
|
|
|
|
|
return {
|
|
|
|
|
|
bgc: {
|
|
|
|
|
|
backgroundColor: "#FAFDFD",
|
|
|
|
|
|
},
|
|
|
|
|
|
storeId: '',
|
|
|
|
|
|
obj: {},
|
|
|
|
|
|
id: '',
|
|
|
|
|
|
onlineStatus: '--',
|
|
|
|
|
|
powerStatus: '--',
|
2026-01-17 17:34:06 +08:00
|
|
|
|
message: this.$i18n.t('timerNotStarted'),
|
2026-01-15 14:41:50 +08:00
|
|
|
|
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.dsLogParams) {
|
|
|
|
|
|
return '--';
|
|
|
|
|
|
}
|
|
|
|
|
|
return this.macobj.dsLogParams.ver
|
|
|
|
|
|
},
|
|
|
|
|
|
// 获取设备状态（根据dsLogParams.d判断）
|
|
|
|
|
|
getDeviceStatus() {
|
|
|
|
|
|
if (!this.macobj || !this.macobj.dsLogParams) {
|
|
|
|
|
|
return '--';
|
|
|
|
|
|
}
|
|
|
|
|
|
const d = this.macobj.dsLogParams.water_sw;
|
|
|
|
|
|
if (d === 0 || d === '0') {
|
2026-01-17 17:34:06 +08:00
|
|
|
|
return this.$i18n.t('close');
|
2026-01-15 14:41:50 +08:00
|
|
|
|
} else if (d === 1 || d === '1') {
|
2026-01-17 17:34:06 +08:00
|
|
|
|
return this.$i18n.t('open');
|
2026-01-15 14:41:50 +08:00
|
|
|
|
} 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) {
|
2026-01-17 17:34:06 +08:00
|
|
|
|
this.onlineStatus = this.$i18n.t('offline')
|
2026-01-15 14:41:50 +08:00
|
|
|
|
} else if (res.data.onlineStatus == 1) {
|
2026-01-17 17:34:06 +08:00
|
|
|
|
this.onlineStatus = this.$i18n.t('online')
|
2026-01-15 14:41:50 +08:00
|
|
|
|
}
|
|
|
|
|
|
if (res.data.powerStatus == 0) {
|
2026-01-17 17:34:06 +08:00
|
|
|
|
this.powerStatus = this.$i18n.t('close')
|
2026-01-15 14:41:50 +08:00
|
|
|
|
} else if (res.data.powerStatus == 1) {
|
2026-01-17 17:34:06 +08:00
|
|
|
|
this.powerStatus = this.$i18n.t('open')
|
2026-01-15 14:41:50 +08:00
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
// 启动定时器，并将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({
|
2026-01-17 17:34:06 +08:00
|
|
|
|
title: this.$i18n.t('scanningFailed'),
|
2026-01-15 14:41:50 +08:00
|
|
|
|
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) {
|
2026-01-17 17:34:06 +08:00
|
|
|
|
this.onlineStatus = this.$i18n.t('offline')
|
2026-01-15 14:41:50 +08:00
|
|
|
|
} else if (res.data.onlineStatus == 1) {
|
2026-01-17 17:34:06 +08:00
|
|
|
|
this.onlineStatus = this.$i18n.t('online')
|
2026-01-15 14:41:50 +08:00
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
} else {
|
|
|
|
|
|
uni.showToast({
|
2026-01-17 17:34:06 +08:00
|
|
|
|
title: this.$i18n.t('error') + res.msg,
|
2026-01-15 14:41:50 +08:00
|
|
|
|
icon: 'none',
|
|
|
|
|
|
duration: 2000,
|
|
|
|
|
|
})
|
|
|
|
|
|
this.clearInterval()
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
},
|
|
|
|
|
|
// 返回录入
|
|
|
|
|
|
btnfh() {
|
|
|
|
|
|
uni.reLaunch({
|
|
|
|
|
|
url:'/pages/luru/index'
|
|
|
|
|
|
})
|
|
|
|
|
|
},
|
|
|
|
|
|
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({
|
2026-01-17 17:34:06 +08:00
|
|
|
|
title: this.$i18n.t('error') + resp.msg,
|
2026-01-15 14:41:50 +08:00
|
|
|
|
icon: 'none',
|
|
|
|
|
|
duration: 2000
|
|
|
|
|
|
})
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
}else{
|
|
|
|
|
|
uni.showToast({
|
2026-01-17 17:34:06 +08:00
|
|
|
|
title: this.$i18n.t('error') + res.msg,
|
2026-01-15 14:41:50 +08:00
|
|
|
|
icon: 'none',
|
|
|
|
|
|
duration: 2000
|
|
|
|
|
|
})
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
// 关闭
|
|
|
|
|
|
btngb() {
|
|
|
|
|
|
uni.showLoading({
|
2026-01-17 17:34:06 +08:00
|
|
|
|
title: this.$i18n.t('closing'),
|
2026-01-15 14:41:50 +08:00
|
|
|
|
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({
|
2026-01-17 17:34:06 +08:00
|
|
|
|
title: this.$i18n.t('error') + res.msg,
|
2026-01-15 14:41:50 +08:00
|
|
|
|
icon: 'none',
|
|
|
|
|
|
duration: 2000
|
|
|
|
|
|
})
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
},
|
|
|
|
|
|
// 开启
|
|
|
|
|
|
btngbkq() {
|
|
|
|
|
|
uni.showLoading({
|
2026-01-17 17:34:06 +08:00
|
|
|
|
title: this.$i18n.t('opening'),
|
2026-01-15 14:41:50 +08:00
|
|
|
|
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({
|
2026-01-17 17:34:06 +08:00
|
|
|
|
title: this.$i18n.t('error') + res.msg,
|
2026-01-15 14:41:50 +08:00
|
|
|
|
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({
|
2026-01-17 17:34:06 +08:00
|
|
|
|
title: this.$i18n.t('error') + resp.msg,
|
2026-01-15 14:41:50 +08:00
|
|
|
|
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: #000;
|
|
|
|
|
|
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: #000;
|
|
|
|
|
|
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: #000;
|
|
|
|
|
|
color: #fff;
|
|
|
|
|
|
font-size: 32rpx;
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
line-height: 90rpx;
|
|
|
|
|
|
margin: 0 10rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.fanhui {
|
|
|
|
|
|
width: 658rpx;
|
|
|
|
|
|
height: 90rpx;
|
|
|
|
|
|
border-radius: 20rpx;
|
|
|
|
|
|
background-color: #000;
|
|
|
|
|
|
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 #000;
|
|
|
|
|
|
margin-left: 50rpx;
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
border-radius: 10rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
view{
|
|
|
|
|
|
margin-left: 20rpx;
|
|
|
|
|
|
padding: 10rpx 20rpx;
|
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
background-color: #000;
|
|
|
|
|
|
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;
|
|
|
|
|
|
border-bottom: 1rpx solid #f0f0f0;
|
|
|
|
|
|
margin-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;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
</style>
|
