20260322:优化IMEI交互界面
This commit is contained in:
George
parent
629d361ca8
commit
479c0aab6c
@ -27,30 +27,78 @@
|
|||||||
<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
|
||||||
|
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-popover>
|
||||||
<el-button type="primary" size="mini" :disabled="deviceInfo.status != 3" @click="sendAt('imei')" :loading="imeiLoading" title="默认指令:AT+IMEI\r\n">从设备读取</el-button>
|
<el-button
|
||||||
|
type="primary"
|
||||||
|
size="mini"
|
||||||
|
:disabled="deviceInfo.status != 3"
|
||||||
|
@click="sendAt('imei')"
|
||||||
|
:loading="imeiLoading"
|
||||||
|
title="默认指令:AT+IMEI\r\n"
|
||||||
|
>从设备读取</el-button>
|
||||||
</div>
|
</div>
|
||||||
</el-descriptions-item>
|
</el-descriptions-item>
|
||||||
|
|
||||||
|
<!-- 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>
|
||||||
ICCID
|
ICCID
|
||||||
</template>
|
</template>
|
||||||
<div class="cell-flex">
|
<div class="cell-flex nowrap">
|
||||||
<el-input v-model="deviceInfo.iccid" size="mini" placeholder="请输入ICCID" style="max-width: 260px;" @keyup.enter.native="saveImeiIccid('iccid')"/>
|
<el-input
|
||||||
<el-popover placement="bottom" width="360" trigger="click" popper-class="atcmd-popover">
|
v-model="deviceInfo.iccid"
|
||||||
<div class="atcmd-title">编辑下发指令</div>
|
size="mini"
|
||||||
<el-input v-model="iccidCmd" size="mini" placeholder="例如：AT+ICCID\\r\\n" />
|
placeholder="请输入ICCID"
|
||||||
<el-button slot="reference" size="mini" icon="el-icon-edit" title="编辑指令"></el-button>
|
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-popover>
|
||||||
<el-button type="primary" size="mini" :disabled="deviceInfo.status != 3" @click="sendAt('iccid')" :loading="iccidLoading" title="默认指令:AT+ICCID\r\n">从设备读取</el-button>
|
<el-button
|
||||||
|
type="primary"
|
||||||
|
size="mini"
|
||||||
|
:disabled="deviceInfo.status != 3"
|
||||||
|
@click="sendAt('iccid')"
|
||||||
|
:loading="iccidLoading"
|
||||||
|
title="默认指令:AT+ICCID\r\n"
|
||||||
|
>从设备读取</el-button>
|
||||||
</div>
|
</div>
|
||||||
</el-descriptions-item>
|
</el-descriptions-item>
|
||||||
|
|
||||||
@ -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>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user