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