Sumuxi/fastbee
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

20260322:优化IMEI交互界面

Browse Source
This commit is contained in:
George 2026-03-22 11:56:56 +08:00
parent 629d361ca8
commit 479c0aab6c
1 changed files with 109 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

140
yack-web/src/views/iot/device/running-status.vue
View File

@ -21,38 +21,86 @@
<el-button type="success" size="mini" style="float: right" @click="getLatestFirmware(deviceInfo.deviceId)" :disabled="deviceInfo.status != 3">{{ $t('device.running-status.866086-2') }}</el-button>
</el-descriptions-item>
<!-- IMEI / ICCID（蜂窝信息） -->
<el-descriptions-item :labelStyle="statusColor">
<template slot="label">
<i class="el-icon-postcard"></i>
IMEI
</template>
<div class="cell-flex">
<el-input v-model="deviceInfo.imei" size="mini" placeholder="请输入IMEI" style="max-width: 260px;" @keyup.enter.native="saveImeiIccid('imei')" />
<el-popover placement="bottom" width="360" trigger="click" popper-class="atcmd-popover">
<div class="atcmd-title">编辑下发指令</div>
<el-input v-model="imeiCmd" size="mini" placeholder="例如：AT+IMEI\\r\\n" />
<el-button slot="reference" size="mini" icon="el-icon-edit" title="编辑指令"></el-button>
</el-popover>
<el-button type="primary" size="mini" :disabled="deviceInfo.status != 3" @click="sendAt('imei')" :loading="imeiLoading" title="默认指令:AT+IMEI\r\n">从设备读取</el-button>
</div>
</el-descriptions-item>
<!-- IMEI / ICCID（蜂窝信息） -->
<el-descriptions-item :labelStyle="statusColor">
<template slot="label">
<i class="el-icon-postcard"></i>
IMEI
</template>
<div class="cell-flex nowrap">
<el-input v-model="deviceInfo.imei"
size="mini"
placeholder="请输入IMEI"
style="flex: 1; min-width: 160px;"
@keyup.enter.native="saveImeiIccid('imei')"
/>
<el-popover
v-model="imeiPopoverVisible"
placement="bottom"
width="360"
trigger="click"
popper-class="atcmd-popover"
>
<div class="atcmd-title">编辑下发指令，回车即可发送</div>
<el-input
v-model="imeiCmd"
size="mini"
placeholder="例如：AT+IMEI\\r\\n (回车下发)"
@keyup.enter.native="handleEnterSend('imei')"
/>
<el-button slot="reference" size="mini" type="default">编辑指令</el-button>
</el-popover>
<el-button
type="primary"
size="mini"
:disabled="deviceInfo.status != 3"
@click="sendAt('imei')"
:loading="imeiLoading"
title="默认指令:AT+IMEI\r\n"
>从设备读取</el-button>
</div>
</el-descriptions-item>
<el-descriptions-item :labelStyle="statusColor">
<template slot="label">
<i class="el-icon-postcard"></i>
ICCID
</template>
<div class="cell-flex">
<el-input v-model="deviceInfo.iccid" size="mini" placeholder="请输入ICCID" style="max-width: 260px;" @keyup.enter.native="saveImeiIccid('iccid')"/>
<el-popover placement="bottom" width="360" trigger="click" popper-class="atcmd-popover">
<div class="atcmd-title">编辑下发指令</div>
<el-input v-model="iccidCmd" size="mini" placeholder="例如：AT+ICCID\\r\\n" />
<el-button slot="reference" size="mini" icon="el-icon-edit" title="编辑指令"></el-button>
</el-popover>
<el-button type="primary" size="mini" :disabled="deviceInfo.status != 3" @click="sendAt('iccid')" :loading="iccidLoading" title="默认指令:AT+ICCID\r\n">从设备读取</el-button>
</div>
</el-descriptions-item>
<!-- ICCID 区域（同理） -->
<el-descriptions-item :labelStyle="statusColor">
<template slot="label">
<i class="el-icon-postcard"></i>
ICCID
</template>
<div class="cell-flex nowrap">
<el-input
v-model="deviceInfo.iccid"
size="mini"
placeholder="请输入ICCID"
style="flex: 1; min-width: 160px;"
@keyup.enter.native="saveImeiIccid('iccid')"
/>
<el-popover
v-model="iccidPopoverVisible"
placement="bottom"
width="360"
trigger="click"
popper-class="atcmd-popover"
>
<div class="atcmd-title">编辑下发指令，回车即可发送</div>
<el-input
v-model="iccidCmd"
size="mini"
placeholder="例如：AT+ICCID\\r\\n (回车下发)"
@keyup.enter.native="handleEnterSend('iccid')"
/>
<el-button slot="reference" size="mini" type="default">编辑指令</el-button>
</el-popover>
<el-button
type="primary"
size="mini"
:disabled="deviceInfo.status != 3"
@click="sendAt('iccid')"
:loading="iccidLoading"
title="默认指令:AT+ICCID\r\n"
>从设备读取</el-button>
</div>
</el-descriptions-item>
<!-- 设备物模型-->
<el-descriptions-item v-for="(item, index) in deviceInfo.thingsModels" :key="index" :labelStyle="statusColor">
@ -622,6 +670,9 @@ export default {
iccidLoading: false,
saveLoadingImei: false,
saveLoadingIccid: false,
imeiPopoverVisible: false, // 控制IMEI指令编辑弹窗
iccidPopoverVisible: false, // 控制ICCID指令编辑弹窗
};
},
mounted() {
@ -641,6 +692,18 @@ export default {
},
methods: {
// 新增方法：处理弹窗内回车下发指令
handleEnterSend(type) {
// 关闭对应的弹窗
if (type === 'imei') {
this.imeiPopoverVisible = false;
} else if (type === 'iccid') {
this.iccidPopoverVisible = false;
}
// 调用原有的 sendAt 方法下发指令
this.sendAt(type);
},
async refreshDeviceBaseInfo() {
if (!this.deviceInfo || !this.deviceInfo.deviceId) return;
const res = await getDevice(this.deviceInfo.deviceId);
@ -1320,4 +1383,19 @@ export default {
border-color: #badeff;
background-color: #e8f4ff;
}
/* IMEI/ICCID样式 */
.cell-flex {
display: flex;
align-items: center;
gap: 10px;
}
.cell-flex.nowrap {
flex-wrap: nowrap;
}
@media (max-width: 768px) {
.cell-flex.nowrap .el-input {
min-width: 120px;
}
}
</style>