161 lines
8.1 KiB
Plaintext
161 lines
8.1 KiB
Plaintext
<!-- 设备详情页：上部信息区（可滚动） + 底部固定收发控制台（串口调试工具风格） -->
|
||
<view class="page">
|
||
<!-- ===== 上半屏：设备信息与配置（可滚动） ===== -->
|
||
<scroll-view class="body-scroll" scroll-y>
|
||
<!-- 设备信息 -->
|
||
<view class="device-info card">
|
||
<view class="info-row">
|
||
<text class="info-label">设备编号</text>
|
||
<text class="info-value">{{device.serialNumber || '-'}}</text>
|
||
</view>
|
||
<view class="info-row">
|
||
<text class="info-label">BLE 地址</text>
|
||
<text class="info-value">{{device.deviceId || '-'}}</text>
|
||
</view>
|
||
<view class="info-row">
|
||
<text class="info-label">BLE 状态</text>
|
||
<!-- 未连接时可点击手动重连：自动重连卡死（连续连接超时后 native 半开连接）时的确定性出口 -->
|
||
<view class="status-tag {{bleConnected ? 'online' : 'offline'}} {{canRetryBle ? 'retryable' : ''}}"
|
||
bindtap="onRetryBle">
|
||
{{bleConnected ? '已连接' : (canRetryBle ? '未连接 · 点击重连' : '未连接')}}
|
||
</view>
|
||
</view>
|
||
<view class="info-row">
|
||
<text class="info-label">MQTT 状态</text>
|
||
<!-- MQTT 为账号/产品级自动连接（凭证在「我的」页）：
|
||
正常情况下点击小程序即自动连上，这里只在异常/手动断开时提供一键重连 -->
|
||
<view class="status-tag {{mqttConnected ? 'online' : 'offline'}} {{canRetryMqtt ? 'retryable' : ''}}"
|
||
bindtap="onRetryMqtt">
|
||
<block wx:if="{{mqttConnected}}">已连接</block>
|
||
<block wx:elif="{{mqttConnecting}}">连接中…</block>
|
||
<block wx:elif="{{mqttUserDisconnected}}">已手动断开 · 点击重连</block>
|
||
<block wx:elif="{{canRetryMqtt}}">未连接 · 点击重连</block>
|
||
<block wx:else>未连接</block>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 测点与模式 -->
|
||
<view class="measure-card card">
|
||
<view class="measure-item">
|
||
<text class="measure-label">测点ID</text>
|
||
<!-- 只用正则把关，**刻意不用 type="number"**：测点ID 是数据唯一归属（"0001" ≠ "1"），
|
||
数字键盘在部分平台/输入法会做数值归一化或吞前导零，静默改写主键的代价大于键盘便利 -->
|
||
<input class="measure-input {{measurePointIdValid ? '' : 'invalid'}}"
|
||
maxlength="64"
|
||
placeholder="纯数字, 1-64位"
|
||
value="{{measurePointId}}"
|
||
bindinput="onMeasurePointInput" />
|
||
</view>
|
||
<view class="measure-hint error" wx:if="{{!measurePointIdValid}}">测点ID格式非法：仅支持纯数字，长度1-64</view>
|
||
<view class="measure-item">
|
||
<text class="measure-label">采集模式</text>
|
||
<radio-group class="mode-group" bindchange="onModeChange">
|
||
<label class="mode-option">
|
||
<radio value="1" checked="{{collectMode === 1}}" color="#1890ff" />
|
||
<text>手动确认</text>
|
||
</label>
|
||
<label class="mode-option">
|
||
<radio value="2" checked="{{collectMode === 2}}" color="#1890ff" />
|
||
<text>自动上传</text>
|
||
</label>
|
||
</radio-group>
|
||
</view>
|
||
<view class="measure-hint" wx:if="{{collectMode === 1}}">手动模式：采集到的数据需点击「确认」后才上传</view>
|
||
<view class="measure-hint" wx:else>自动模式：采集到数据即上传到平台</view>
|
||
</view>
|
||
</scroll-view>
|
||
|
||
<!-- ===== 底部：固定收发区 ===== -->
|
||
<view class="console">
|
||
<view wx:if="{{lastError}}" class="notice-text">{{lastError}}</view>
|
||
|
||
<!-- 数据接收：标题 + 工具区（清空 / 滚动 / Hex / 上传离线）同排，控件统一 52rpx 高。
|
||
注意：button 的宽度会被基础库强制成 184px，靠 wxss 里的「父容器+类名」提权压回，详见 detail.wxss -->
|
||
<view class="console-header">
|
||
<text class="console-title">数据接收：</text>
|
||
<view class="console-tools">
|
||
<button class="btn-clear-mini" bindtap="handleClearData">清空</button>
|
||
<!-- ⚠️ 勾选框必须由 checkbox-group 包裹：bindchange 是 checkbox-group 的事件，
|
||
checkbox 自身没有该事件（裸挂要么不派发、要么 detail.value 是布尔值而非数组，
|
||
两种情况都会让开关恒定失效）。group 的 detail.value 才是「选中项 value 数组」 -->
|
||
<checkbox-group class="chk-item" bindchange="onAutoScrollToggle">
|
||
<label class="chk-item">
|
||
<checkbox class="chk-box" value="scroll" checked="{{autoScroll}}" color="#07c160" />
|
||
<text>滚动</text>
|
||
</label>
|
||
</checkbox-group>
|
||
<checkbox-group class="chk-item" bindchange="onRecvHexToggle">
|
||
<label class="chk-item">
|
||
<checkbox class="chk-box" value="hex" checked="{{recvHex}}" color="#07c160" />
|
||
<text>Hex</text>
|
||
</label>
|
||
</checkbox-group>
|
||
<!-- 离线补传：排在接收行末位；禁用态走 class（button[disabled]:not([type]) 会压掉属性选择器） -->
|
||
<button class="btn-flush {{canFlush ? '' : 'is-disabled'}}"
|
||
bindtap="handleFlushOffline"
|
||
disabled="{{!canFlush}}">
|
||
上传离线({{offlineCount}})
|
||
</button>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="log-wrap">
|
||
<scroll-view class="log-scroll" scroll-y
|
||
scroll-into-view="{{scrollIntoView}}"
|
||
bindscroll="onLogScroll"
|
||
bindscrolltolower="onLogToLower"
|
||
lower-threshold="60">
|
||
<block wx:if="{{displayList.length > 0}}">
|
||
<!-- 最新在后：自动滚动锚定最后一行 -->
|
||
<view class="log-line" wx:for="{{displayList}}" wx:key="id" id="log-{{item.id}}">
|
||
<text class="log-text">[{{item.time}}]:{{item.text}}</text>
|
||
<text wx:if="{{item.uploaded}}" class="log-flag uploaded">↑已上报</text>
|
||
<text wx:elif="{{item.offline}}" class="log-flag cached">已缓存</text>
|
||
<text wx:elif="{{modeManual && !item.confirmed}}" class="log-flag confirm-btn" catchtap="onConfirmData" data-id="{{item.id}}">确认</text>
|
||
<text wx:elif="{{modeManual && item.confirmed}}" class="log-flag confirmed">已确认</text>
|
||
<text wx:elif="{{item.pendingReason}}" class="log-flag pending">{{item.pendingReason}}</text>
|
||
</view>
|
||
</block>
|
||
<view wx:else class="log-empty">
|
||
<text>{{enabled ? '等待设备上报数据…' : '启用网关采集后可查看实时数据'}}</text>
|
||
</view>
|
||
</scroll-view>
|
||
<!-- 手动上翻回看时的"回到底部"快捷入口 -->
|
||
<view class="follow-btn" wx:if="{{autoScroll && !logFollowing && displayList.length > 0}}"
|
||
bindtap="onFollowTap">↓ 最新</view>
|
||
</view>
|
||
|
||
<!-- 统计 -->
|
||
<view class="console-stats">
|
||
<text class="stat-chip">接收 {{stats.received}}</text>
|
||
<text class="stat-chip">已上报 {{stats.uploaded}}</text>
|
||
<text class="stat-chip">失败 {{stats.failed}}</text>
|
||
<text class="stat-chip">离线 {{offlineCount}}</text>
|
||
</view>
|
||
|
||
<!-- 数据发送 -->
|
||
<view class="console-header send-header">
|
||
<text class="console-title">数据发送：</text>
|
||
<checkbox-group class="chk-item" bindchange="onSendHexToggle">
|
||
<label class="chk-item">
|
||
<checkbox class="chk-box" value="hex" checked="{{sendHex}}" color="#07c160" />
|
||
<text>Hex</text>
|
||
</label>
|
||
</checkbox-group>
|
||
</view>
|
||
<view class="send-row">
|
||
<input class="send-input"
|
||
placeholder="{{sendHex ? '如：00 60 00 FF 00 FF F0' : '发送 ASCII 文本'}}"
|
||
placeholder-class="send-placeholder"
|
||
value="{{sendInput}}"
|
||
bindinput="onSendInput"
|
||
confirm-type="send" confirm-hold
|
||
bindconfirm="handleSend" />
|
||
<button class="btn-send {{canSend ? '' : 'is-disabled'}}"
|
||
bindtap="handleSend"
|
||
disabled="{{!canSend}}">发送</button>
|
||
</view>
|
||
</view>
|
||
</view>
|