设备操作优化
This commit is contained in:
ChenYi
parent
b0760495ae
commit
f54c055199
@ -42,6 +42,7 @@ import {
|
||||
batchAddDeviceFormSchema,
|
||||
bindDeviceThingModelFormSchema,
|
||||
commandFormSchema,
|
||||
deviceUpgradeFormSchema,
|
||||
editDeviceFormSchemaEdit,
|
||||
querySchema,
|
||||
tableSchema,
|
||||
@ -267,6 +268,9 @@ const pageLoading = ref(false);
|
||||
const loadingTip = ref('缓存刷新中...');
|
||||
const commandRow: Record<string, any> = ref({});
|
||||
|
||||
// 设备升级相关
|
||||
const upgradeRow: Record<string, any> = ref({});
|
||||
|
||||
// 表格列定义
|
||||
const commandTableColumns = computed(() => [
|
||||
{
|
||||
@ -394,6 +398,21 @@ interface ThingModelProperty {
|
||||
|
||||
const thingModelProperties = ref<ThingModelProperty[]>([]);
|
||||
const thingModelLoading = ref(false);
|
||||
// 筛选关键词
|
||||
const filterKeyword = ref('');
|
||||
// 过滤后的物模型属性列表
|
||||
const filteredThingModelProperties = computed(() => {
|
||||
if (!filterKeyword.value.trim()) {
|
||||
return thingModelProperties.value;
|
||||
}
|
||||
const keyword = filterKeyword.value.trim().toLowerCase();
|
||||
return thingModelProperties.value.filter((prop) => {
|
||||
return (
|
||||
prop.standardFieldDisplayName?.toLowerCase().includes(keyword) ||
|
||||
prop.ioTPlatformRawFieldName?.toLowerCase().includes(keyword)
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
// 获取平台物模型属性列表
|
||||
const fetchThingModelProperties = async (row: Record<string, any>) => {
|
||||
@ -514,12 +533,14 @@ const [CommandModal, commandModalApi] = useVbenModal({
|
||||
onBeforeClose: () => {
|
||||
commandRow.value = {};
|
||||
thingModelProperties.value = [];
|
||||
filterKeyword.value = ''; // 清空筛选关键词
|
||||
return true;
|
||||
},
|
||||
onOpenChange: async (isOpen: boolean) => {
|
||||
if (isOpen && commandRow.value) {
|
||||
// 打开模态框时，获取平台物模型属性列表
|
||||
await fetchThingModelProperties(commandRow.value);
|
||||
filterKeyword.value = ''; // 重置筛选关键词
|
||||
}
|
||||
},
|
||||
});
|
||||
@ -703,6 +724,83 @@ const [BatchAddModal, batchAddModalApi] = useVbenModal({
|
||||
},
|
||||
});
|
||||
|
||||
// 设备升级表单
|
||||
const [UpgradeForm, upgradeFormApi] = useVbenForm({
|
||||
collapsed: false,
|
||||
commonConfig: {
|
||||
labelWidth: 120,
|
||||
componentProps: {
|
||||
class: 'w-full',
|
||||
},
|
||||
},
|
||||
layout: 'horizontal',
|
||||
schema: deviceUpgradeFormSchema.value,
|
||||
showCollapseButton: false,
|
||||
showDefaultActions: false,
|
||||
wrapperClass: 'grid-cols-1',
|
||||
});
|
||||
|
||||
// 设备升级提交逻辑
|
||||
const submitDeviceUpgrade = async () => {
|
||||
const { valid } = await upgradeFormApi.validate();
|
||||
if (!valid) return;
|
||||
|
||||
const formValues = await upgradeFormApi.getValues();
|
||||
|
||||
try {
|
||||
upgradeModalApi.setState({ loading: true, confirmLoading: true });
|
||||
|
||||
// TODO: 待接口实现后，调用实际的升级接口
|
||||
// const result = await postDeviceUpgrade({
|
||||
// body: {
|
||||
// deviceId: upgradeRow.value.id,
|
||||
// targetVersionId: formValues.targetVersionId,
|
||||
// upgradeDescription: formValues.upgradeDescription,
|
||||
// },
|
||||
// });
|
||||
|
||||
// 模拟接口调用
|
||||
await new Promise((resolve) => setTimeout(resolve, 1000));
|
||||
|
||||
Message.success('设备升级任务已提交');
|
||||
upgradeModalApi.close();
|
||||
upgradeRow.value = {};
|
||||
upgradeFormApi.resetForm();
|
||||
gridApi.reload();
|
||||
} catch (error) {
|
||||
console.error('设备升级失败:', error);
|
||||
Message.error('设备升级失败');
|
||||
} finally {
|
||||
upgradeModalApi.setState({ loading: false, confirmLoading: false });
|
||||
}
|
||||
};
|
||||
|
||||
// 打开设备升级弹窗
|
||||
const openUpgradeModal = (row: Record<string, any>) => {
|
||||
upgradeRow.value = row;
|
||||
upgradeModalApi.open();
|
||||
// 设置表单初始值
|
||||
nextTick(() => {
|
||||
upgradeFormApi.setValues({
|
||||
deviceId: row.id,
|
||||
deviceName: row.deviceName || row.deviceAddress,
|
||||
currentVersion: row.firmwareVersion || '未知',
|
||||
targetVersionId: undefined,
|
||||
upgradeDescription: '',
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const [UpgradeModal, upgradeModalApi] = useVbenModal({
|
||||
draggable: true,
|
||||
onConfirm: submitDeviceUpgrade,
|
||||
onBeforeClose: () => {
|
||||
upgradeRow.value = {};
|
||||
upgradeFormApi.resetForm();
|
||||
return true;
|
||||
},
|
||||
});
|
||||
|
||||
// 获取批量添加模态框的状态
|
||||
const batchAddModalState = batchAddModalApi.useStore();
|
||||
|
||||
@ -1549,6 +1647,10 @@ const toolbarActions = computed(() => [
|
||||
<Popover trigger="hover" placement="bottomRight" :overlay-style="{ minWidth: '120px' }">
|
||||
<template #content>
|
||||
<div style="display: flex; flex-direction: column; gap: 4px">
|
||||
<Button type="text" size="small" @click="openUpgradeModal.bind(null, row)()"
|
||||
style="padding: 4px 8px; text-align: left">
|
||||
设备升级
|
||||
</Button>
|
||||
<Button type="text" size="small" @click="toDeviceLog.bind(null, row)()"
|
||||
style="padding: 4px 8px; text-align: left">
|
||||
{{ $t('abp.IoTDBBase.PlatformLog') }}
|
||||
@ -1583,9 +1685,32 @@ const toolbarActions = computed(() => [
|
||||
<div v-if="thingModelLoading" style="padding: 40px; text-align: center">
|
||||
<Loading :loading="true" tip="加载物模型属性中..." />
|
||||
</div>
|
||||
<Table v-else :columns="commandTableColumns" :data-source="thingModelProperties" :pagination="false"
|
||||
:scroll="{ x: 1000, y: 500 }" row-key="id" size="small" />
|
||||
<div v-else>
|
||||
<div style="margin-bottom: 16px">
|
||||
<Input
|
||||
v-model:value="filterKeyword"
|
||||
placeholder="请输入标准物模型属性名称或平台物模型属性标识符进行筛选"
|
||||
allow-clear
|
||||
style="width: 100%"
|
||||
>
|
||||
<template #prefix>
|
||||
<Icon icon="ant-design:search-outlined" />
|
||||
</template>
|
||||
</Input>
|
||||
</div>
|
||||
<Table
|
||||
:columns="commandTableColumns"
|
||||
:data-source="filteredThingModelProperties"
|
||||
:pagination="false"
|
||||
:scroll="{ x: 1000, y: 500 }"
|
||||
row-key="id"
|
||||
size="small"
|
||||
/>
|
||||
</div>
|
||||
</CommandModal>
|
||||
<UpgradeModal title="设备升级" class="w-[600px]">
|
||||
<UpgradeForm />
|
||||
</UpgradeModal>
|
||||
<BindModal :title="`绑定设备端物模型${bindRows.length > 0 ? ` (已选择 ${bindRows.length} 个设备)` : ''}`" class="w-[600px]">
|
||||
<div v-if="bindRows.length > 0" class="mb-4 rounded border border-blue-200 bg-blue-50 p-3">
|
||||
<div class="mb-2 text-sm font-medium text-blue-800">
|
||||
|
||||
@ -643,6 +643,59 @@ export const commandFormSchema: any = computed(() => [
|
||||
// 指令表单不再使用schema字段，改为在模板中动态渲染
|
||||
]);
|
||||
|
||||
// 设备升级表单
|
||||
export const deviceUpgradeFormSchema: any = computed(() => [
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'deviceId',
|
||||
label: '设备ID',
|
||||
componentProps: {
|
||||
disabled: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'deviceName',
|
||||
label: '设备名称',
|
||||
componentProps: {
|
||||
disabled: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'currentVersion',
|
||||
label: '当前版本',
|
||||
componentProps: {
|
||||
disabled: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
component: 'ApiSelect',
|
||||
fieldName: 'targetVersionId',
|
||||
label: '目标版本',
|
||||
componentProps: {
|
||||
// TODO: 待接口实现后，替换为实际的版本列表接口
|
||||
api: null,
|
||||
placeholder: '请选择目标版本',
|
||||
allowClear: true,
|
||||
},
|
||||
rules: z.string().min(1, {
|
||||
message: '请选择目标版本',
|
||||
}),
|
||||
},
|
||||
{
|
||||
component: 'Textarea',
|
||||
fieldName: 'upgradeDescription',
|
||||
label: '升级说明',
|
||||
componentProps: {
|
||||
rows: 4,
|
||||
placeholder: '请输入升级说明（可选）',
|
||||
maxLength: 500,
|
||||
showCount: true,
|
||||
},
|
||||
},
|
||||
]);
|
||||
|
||||
export const batchAddDeviceFormSchema: any = computed(() => [
|
||||
{
|
||||
component: 'Textarea',
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user