修复错误

apps/web-antd/src/views/dataManger/deviceData/DeviceSelect.vue

@@ -107,11 +107,9 @@ const handleValueChange = (value: string) => {
     const selectedDevice = options.value.find(option => option.value === value);
     if (selectedDevice) {
       emit('device-change', selectedDevice);
-      console.log('DeviceSelect 发送设备信息:', selectedDevice);
     }
   } else {
     emit('device-change', null);
-    console.log('DeviceSelect 清空设备信息');
   }
 };
 

apps/web-antd/src/views/dataManger/deviceData/dynamicColumns.ts

@@ -52,20 +52,39 @@ export const generateDynamicColumns = (data: DynamicDeviceData[]): ColumnConfig[
   return fields
     .filter(field => !excludeFields.includes(field))
     .map(field => {
-      const columnConfig: any = {
-        field,
-        title: fieldNameMapping[field] || field,
+      // 确保字段名是有效的字符串
+      const safeField = String(field || '').trim();
+      if (!safeField) return null;
+      
+      const columnConfig: ColumnConfig = {
+        field: safeField,
+        title: fieldNameMapping[safeField] || safeField,
         minWidth: 150,
         showOverflow: true,
+        slots: {}, // 添加空的slots属性，避免VXE表格报错
       };
 
-      // 应用字段类型配置
-      if (fieldTypeConfig[field]) {
-        Object.assign(columnConfig, fieldTypeConfig[field]);
+      // 应用字段类型配置，确保配置是安全的
+      if (fieldTypeConfig[safeField]) {
+        const typeConfig = fieldTypeConfig[safeField];
+        if (typeConfig.formatter && typeof typeConfig.formatter === 'function') {
+          columnConfig.formatter = typeConfig.formatter;
+        }
+        if (typeConfig.width !== undefined) {
+          columnConfig.width = typeConfig.width;
+        }
+        if (typeConfig.minWidth !== undefined) {
+          columnConfig.minWidth = typeConfig.minWidth;
+        }
+        // 确保slots属性始终存在
+        if (!columnConfig.slots) {
+          columnConfig.slots = {};
+        }
       }
 
       return columnConfig;
-    });
+    })
+    .filter(Boolean) as ColumnConfig[]; // 过滤掉null值
 };
 
 // 获取所有可能的字段（用于预定义列）

apps/web-antd/src/views/dataManger/deviceData/index.vue

@@ -26,7 +26,6 @@ const selectedDeviceInfo = ref<any>(null);
 // 获取设备信息的完整数据（用于根据设备ID获取设备信息）
 const fetchDeviceOptions = async () => {
   try {
-    console.log('开始获取设备信息...');
     const { data } = await postMetersPage({
       body: {
         pageIndex: 1,
@@ -36,10 +35,6 @@ const fetchDeviceOptions = async () => {
 
     if (data?.items) {
       deviceOptions.value = data.items;
-      console.log('设备信息获取成功，总数:', data.items.length);
-      console.log('设备信息选项前3项:', deviceOptions.value.slice(0, 3));
-    } else {
-      console.log('设备信息为空');
     }
   } catch (error) {
     console.error('获取设备信息失败:', error);
@@ -48,6 +43,9 @@ const fetchDeviceOptions = async () => {
 
 // 根据设备ID获取设备信息对象
 const getDeviceInfoById = (deviceId: string) => {
+  if (!deviceId || !deviceOptions.value || deviceOptions.value.length === 0) {
+    return null;
+  }
   return deviceOptions.value.find((device) => device.id === deviceId);
 };
 
@@ -61,36 +59,58 @@ const dynamicColumns = ref<any[]>([]);
 
 // 固定列定义（始终显示）- 基于 IoTDBTreeModelDeviceDataDto 类型
 const fixedColumns = [
-  { title: '序号', type: 'seq', width: 50 },
-  { field: 'Timestamps', title: $t('abp.IoTDBBase.Timestamps'), minWidth: 150 },
-  { field: 'SystemName', title: $t('abp.IoTDBBase.SystemName'), minWidth: 150 },
-  { field: 'ProjectId', title: $t('abp.IoTDBBase.ProjectId'), minWidth: 150 },
-  { field: 'DeviceType', title: $t('abp.IoTDBBase.DeviceType'), minWidth: 150 },
+  { title: '序号', type: 'seq', width: 50, field: 'seq', slots: {} },
+  { field: 'Timestamps', title: $t('abp.IoTDBBase.Timestamps'), minWidth: 150, showOverflow: true, slots: {} },
+  { field: 'SystemName', title: $t('abp.IoTDBBase.SystemName'), minWidth: 150, showOverflow: true, slots: {} },
+  { field: 'ProjectId', title: $t('abp.IoTDBBase.ProjectId'), minWidth: 150, showOverflow: true, slots: {} },
+  { field: 'DeviceType', title: $t('abp.IoTDBBase.DeviceType'), minWidth: 150, showOverflow: true, slots: {} },
   {
     field: 'IoTDataType',
     title: $t('abp.IoTDBBase.IoTDataType'),
     minWidth: 150,
+    showOverflow: true,
+    slots: {},
   },
-  { field: 'DeviceId', title: $t('abp.IoTDBBase.DeviceId'), minWidth: 150 },
+  { field: 'DeviceId', title: $t('abp.IoTDBBase.DeviceId'), minWidth: 150, showOverflow: true, slots: {} },
 ];
 
 // 合并固定列和动态列 - 使用计算属性确保响应式
-const allColumns = computed(() => [...fixedColumns, ...dynamicColumns.value]);
+const allColumns = computed(() => {
+  // 如果表格未初始化，只返回固定列
+  if (!isGridInitialized.value) {
+    return [...fixedColumns];
+  }
+  
+  const columns = [...fixedColumns];
+  
+  // 安全地添加动态列
+  if (dynamicColumns.value && Array.isArray(dynamicColumns.value)) {
+    const validDynamicColumns = dynamicColumns.value.filter(col => 
+      col && typeof col === 'object' && col.field && col.title
+    ).map(col => ({
+      ...col,
+      slots: col.slots || {} // 确保每个列都有slots属性
+    }));
+    columns.push(...validDynamicColumns);
+  }
+  
+  return columns;
+});
 
 // 初始化默认列（防止表格空白）
 const initDefaultColumns = () => {
-  if (dynamicColumns.value.length === 0) {
-    // 不再需要在这里设置默认列，因为固定列已经包含了基本字段
+  // 确保dynamicColumns是一个有效的数组
+  if (!Array.isArray(dynamicColumns.value)) {
     dynamicColumns.value = [];
   }
 };
 
+// 表格是否已初始化
+const isGridInitialized = ref(false);
+
 // 初始化默认列
 initDefaultColumns();
 
-// 获取设备信息数据
-fetchDeviceOptions();
-
 const formOptions: VbenFormProps = {
   schema: querySchema.value,
   initialValues: {
@@ -118,32 +138,27 @@ const formOptions: VbenFormProps = {
     // 新增：DeviceId变化时同步selectedDeviceInfo
     if (changedFields.includes('DeviceId')) {
       const deviceId = values.DeviceId;
-      console.log('DeviceId变化:', deviceId);
       
       if (deviceId) {
         // 先尝试从 deviceOptions 中查找（备用方案）
-        let device = deviceOptions.value.find(d => d.id === deviceId);
+        let device = deviceOptions.value.length > 0 ? deviceOptions.value.find(d => d.id === deviceId) : null;
         
         // 如果没找到，尝试从 DeviceSelect 组件中获取
         if (!device && gridApi?.formApi) {
           try {
             // 获取 DeviceSelect 组件的实例
             const deviceSelectRef = gridApi.formApi.getFieldComponentRef('DeviceId');
-            console.log('DeviceSelect组件实例:', deviceSelectRef);
             if (deviceSelectRef && deviceSelectRef.getSelectedDevice) {
               device = deviceSelectRef.getSelectedDevice();
-              console.log('从DeviceSelect组件获取设备信息:', device);
             }
           } catch (error) {
-            console.log('无法从DeviceSelect组件获取设备信息:', error);
+            // 静默处理错误
           }
         }
         
         if (device) {
           selectedDeviceInfo.value = device;
-          console.log('同步设备信息成功:', device);
         } else {
-          console.log('未找到匹配的设备，deviceId:', deviceId);
           // 如果还是没找到，尝试延迟获取（组件可能还没完全更新）
           setTimeout(() => {
             try {
@@ -152,31 +167,22 @@ const formOptions: VbenFormProps = {
                 const delayedDevice = deviceSelectRef.getSelectedDevice();
                 if (delayedDevice) {
                   selectedDeviceInfo.value = delayedDevice;
-                  console.log('延迟获取设备信息成功:', delayedDevice);
                 }
               }
             } catch (error) {
-              console.log('延迟获取设备信息失败:', error);
+              // 静默处理错误
             }
           }, 100);
         }
       } else {
         selectedDeviceInfo.value = null;
-        console.log('DeviceId为空，清空selectedDeviceInfo');
       }
     }
 
     if (hasRelevantChange) {
-      console.log('表单字段变化:', { values, changedFields });
-      console.log(
-        '相关字段变化:',
-        changedFields.filter((field) => relevantFields.has(field)),
-      );
-
       // 使用 setTimeout 确保表单值已经完全更新
       setTimeout(async () => {
         const latestValues = await gridApi.formApi.getValues();
-        console.log('最新表单值:', latestValues);
         gridApi.reload(latestValues);
       }, 0);
     }
@@ -188,7 +194,7 @@ const gridOptions: VxeGridProps<any> = {
     highlight: true,
     labelField: 'name',
   },
-  columns: allColumns, // 使用计算属性
+  columns: fixedColumns, // 初始化时只使用固定列
   height: 'auto',
   keepSource: true,
   pagerConfig: {
@@ -196,10 +202,8 @@ const gridOptions: VxeGridProps<any> = {
     pageSize: 20,
     // 添加分页事件处理
     onChange: (currentPage: number, pageSize: number) => {
-      console.log('分页变化:', { currentPage, pageSize });
       // 当pageSize变化时，重置到第一页
       if (pageSize !== gridOptions.pagerConfig.pageSize) {
-        console.log('页面大小变化，重置到第一页');
         // 更新配置中的pageSize
         gridOptions.pagerConfig.pageSize = pageSize;
         gridOptions.pagerConfig.currentPage = 1;
@@ -218,7 +222,6 @@ const gridOptions: VxeGridProps<any> = {
   proxyConfig: {
     ajax: {
       query: async ({ page }, formValues) => {
-        console.log('=== API调用开始 ===');
         // 处理DeviceType和IoTDataType，确保传递数字类型
         const deviceTypeValue = formValues.DeviceType || DeviceType;
         const deviceTypeNumber = deviceTypeValue
@@ -227,38 +230,27 @@ const gridOptions: VxeGridProps<any> = {
 
         const ioTDataTypeValue = formValues.IoTDataType;
 
-        console.log('=== API调用开始 ===2', ioTDataTypeValue);
-
         // 处理DeviceId，当设备类型为集中器(10)时，使用focusId
-        let finalDeviceId = formValues.DeviceId || DeviceId;
-        let finalFocusAddress = formValues.FocusAddress;
+        let finalDeviceId = formValues.DeviceId || DeviceId || '';
+        let finalFocusAddress = formValues.FocusAddress || '';
         
         // 优先使用选中的设备信息
-        console.log('API调用时的selectedDeviceInfo:', selectedDeviceInfo.value);
-        console.log('API调用时的formValues.DeviceId:', formValues.DeviceId);
-        
-        const deviceInfo = selectedDeviceInfo.value || (formValues.DeviceId ? getDeviceInfoById(formValues.DeviceId) : null);
-        console.log('最终使用的deviceInfo:', deviceInfo);
+        const deviceInfo = selectedDeviceInfo.value || (formValues.DeviceId && deviceOptions.value.length > 0 ? getDeviceInfoById(formValues.DeviceId) : null);
         
         if (deviceInfo) {
-          finalFocusAddress = deviceInfo.focusAddress;
-          console.log('使用focusAddress:', finalFocusAddress);
+          finalFocusAddress = deviceInfo.focusAddress || '';
           
           if (deviceTypeNumber === 10) {
             // 集中器类型使用focusId
             if (deviceInfo.focusId) {
               finalDeviceId = deviceInfo.focusId;
-              console.log('集中器类型，使用focusId:', finalDeviceId);
             }
           } else {
             // 其他设备类型使用meterId
             if (deviceInfo.meterId) {
               finalDeviceId = deviceInfo.meterId;
-              console.log('其他类型，使用meterId:', finalDeviceId);
             }
           }
-        } else {
-          console.log('没有找到设备信息，使用原始DeviceId:', finalDeviceId);
         }
         try {
           const { data } = await postTreeModelDeviceDataInfoPage({
@@ -266,59 +258,41 @@ const gridOptions: VxeGridProps<any> = {
               pageIndex: page.currentPage,
               pageSize: page.pageSize,
               // 优先使用表单中的值，如果没有则使用路由参数
-              DeviceType: deviceTypeNumber,
-              DeviceId: finalDeviceId.toString(),
-              FocusAddress: finalFocusAddress || FocusAddress,
+              DeviceType: deviceTypeNumber || undefined,
+              DeviceId: finalDeviceId ? finalDeviceId.toString() : '',
+              FocusAddress: finalFocusAddress || FocusAddress || '',
               // 添加其他表单参数
-              SystemName: formValues.SystemName || SystemName,
-              IoTDataType: ioTDataTypeValue,
+              SystemName: formValues.SystemName || SystemName || '',
+              IoTDataType: ioTDataTypeValue || undefined,
             },
           });
 
-          console.log('API返回的原始数据:', data);
-          console.log('数据类型:', typeof data);
-          console.log(
-            'data是否为null/undefined:',
-            data === null || data === undefined,
-          );
 
-          if (data) {
-            console.log('data.items存在:', !!data.items);
-            console.log(
-              'data.items类型:',
-              Array.isArray(data.items) ? 'Array' : typeof data.items,
-            );
-            if (data.items) {
-              console.log('data.items长度:', data.items.length);
-              if (data.items.length > 0) {
-                console.log('第一条数据:', data.items[0]);
-                console.log(
-                  '第一条数据的所有字段:',
-                  Object.keys(data.items[0]),
-                );
-              }
-            }
-          }
 
           // 简化处理逻辑，直接使用接口返回的数据
           if (data?.items && data.items.length > 0) {
-            console.log('原始items数据:', data.items);
+            try {
+              // 动态生成列定义
+              const generatedColumns = generateDynamicColumns(data.items);
 
-            // 动态生成列定义
-            const generatedColumns = generateDynamicColumns(data.items);
-            console.log('生成的列定义:', generatedColumns);
+              // 更新动态列
+              dynamicColumns.value = generatedColumns;
 
-            // 更新动态列
-            dynamicColumns.value = generatedColumns;
-
-            // 使用setState更新整个gridOptions，确保列定义能够正确更新
-            await nextTick();
-            gridApi.setState({
-              gridOptions: {
-                ...gridOptions,
-                columns: allColumns.value,
-              },
-            });
+              // 使用setState更新整个gridOptions，确保列定义能够正确更新
+              await nextTick();
+              if (gridApi && gridApi.setState) {
+                gridApi.setState({
+                  gridOptions: {
+                    ...gridOptions,
+                    columns: allColumns.value,
+                  },
+                });
+              }
+            } catch (error) {
+              console.error('更新列定义时出错:', error);
+              // 如果列更新失败，使用空数组
+              dynamicColumns.value = [];
+            }
 
             // 直接使用接口返回的totalCount
             const result = {
@@ -326,22 +300,8 @@ const gridOptions: VxeGridProps<any> = {
               totalCount: data.totalCount || 0,
             };
 
-            console.log('返回给表格的数据:', result);
-            console.log(
-              '总数:',
-              result.totalCount,
-              '当前页数据量:',
-              result.items.length,
-            );
-            console.log('分页信息:', {
-              currentPage: page.currentPage,
-              pageSize: page.pageSize,
-            });
-
             return result;
           }
-
-          console.log('没有数据或数据为空');
           return {
             items: [],
             totalCount: 0,
@@ -358,57 +318,71 @@ const gridOptions: VxeGridProps<any> = {
 const [Grid, gridApi] = useVbenVxeGrid({ formOptions, gridOptions });
 
 // 监听分页器状态变化
-watch(
-  () => gridApi?.pagerApi?.currentPage,
-  (newPage, oldPage) => {
-    console.log('当前页变化:', { newPage, oldPage });
-  },
-);
-
 watch(
   () => gridApi?.pagerApi?.pageSize,
   (newSize, oldSize) => {
-    console.log('页面大小变化:', { newSize, oldSize });
     if (newSize !== oldSize && oldSize) {
-      console.log('页面大小从', oldSize, '变为', newSize, '，重置到第一页');
       // 重置到第一页
       gridApi.pagerApi.currentPage = 1;
     }
   },
 );
 
+// 初始化函数
+const initializeGrid = async () => {
+  try {
+    // 获取设备信息数据
+    await fetchDeviceOptions();
+    
+    // 标记表格已初始化
+    isGridInitialized.value = true;
+    
+    // 更新表格列定义
+    if (gridApi && gridApi.setState) {
+      await nextTick();
+      gridApi.setState({
+        gridOptions: {
+          ...gridOptions,
+          columns: allColumns.value,
+        },
+      });
+    }
+    
+    // 如果有路由参数，自动触发查询
+    if (DeviceType || DeviceId || FocusAddress || SystemName) {
+      // 延迟一下确保表格已完全初始化
+      setTimeout(() => {
+        if (gridApi) {
+          gridApi.reload();
+        }
+      }, 300);
+    }
+  } catch (error) {
+    console.error('初始化表格失败:', error);
+  }
+};
+
 // 监听路由参数变化，当有路由参数时自动触发查询
 watch(
   () => [DeviceType, DeviceId, FocusAddress, SystemName],
   async (newValues, oldValues) => {
-    console.log('路由参数变化:', { newValues, oldValues });
     // 如果有路由参数，等待设备信息加载完成后自动触发查询
-    if (newValues.some(val => val) && gridApi) {
-      // 等待设备信息加载完成
-      await fetchDeviceOptions();
+    if (newValues.some(val => val) && gridApi && isGridInitialized.value) {
       // 延迟一下确保表单值已经设置
       setTimeout(() => {
-        console.log('自动触发查询，路由参数:', { DeviceType, DeviceId, FocusAddress, SystemName });
         gridApi.reload();
       }, 100);
     }
   },
-  { immediate: true }
+  { immediate: false } // 改为false，避免立即触发
 );
 
-// 页面初始化时，如果有路由参数则自动触发查询
+// 页面初始化时，延迟初始化表格
 onMounted(async () => {
-  console.log('页面挂载完成，检查路由参数:', { DeviceType, DeviceId, FocusAddress, SystemName });
-  // 如果有路由参数，等待设备信息加载完成后自动触发查询
-  if (DeviceType || DeviceId || FocusAddress || SystemName) {
-    // 等待设备信息加载完成
-    await fetchDeviceOptions();
-    // 延迟一下确保表单值已经设置
-    setTimeout(() => {
-      console.log('页面初始化时自动触发查询');
-      gridApi.reload();
-    }, 200);
-  }
+  // 延迟初始化，确保VXE表格组件已完全挂载
+  setTimeout(async () => {
+    await initializeGrid();
+  }, 100);
 });
 </script>
 

apps/web-antd/src/views/dataManger/deviceData/types.ts

@@ -30,6 +30,7 @@ export interface ColumnConfig {
   width?: string | number;
   showOverflow?: boolean;
   formatter?: (value: any) => string;
+  slots?: Record<string, any>; // 添加slots属性
   [key: string]: any;
 }
 
@@ -44,6 +45,7 @@ export interface FieldTypeConfig {
     formatter?: (value: any) => string;
     width?: string | number;
     minWidth?: string | number;
+    slots?: Record<string, any>;
     [key: string]: any;
   };
 }