diff --git a/apps/web-antd/src/views/devicemanagement/deviceinfo/index.vue b/apps/web-antd/src/views/devicemanagement/deviceinfo/index.vue
index 6218f04..a25b3a4 100644
--- a/apps/web-antd/src/views/devicemanagement/deviceinfo/index.vue
+++ b/apps/web-antd/src/views/devicemanagement/deviceinfo/index.vue
@@ -2859,6 +2859,12 @@ const toolbarActions = computed(() => [
         )
           " />
       </template>
+      <template #deviceOnlineStatusName="{ row }">
+        <component :is="h(Tag, { color: row.deviceOnlineStatus === 1 ? 'green' : row.deviceOnlineStatus === 2 ? 'red' : 'default' }, () =>
+          row.deviceOnlineStatusName || '-',
+        )
+          " />
+      </template>
 
       <template #action="{ row }">
         <div style="display: flex; gap: 8px; align-items: center">
diff --git a/apps/web-antd/src/views/devicemanagement/deviceinfo/schema.ts b/apps/web-antd/src/views/devicemanagement/deviceinfo/schema.ts
index 9e23f36..94d7d60 100644
--- a/apps/web-antd/src/views/devicemanagement/deviceinfo/schema.ts
+++ b/apps/web-antd/src/views/devicemanagement/deviceinfo/schema.ts
@@ -155,6 +155,7 @@ export const tableSchema: any = computed((): VxeGridProps['columns'] => [
     field: 'deviceOnlineStatusName',
     title: $t('abp.deviceInfos.DeviceOnlineStatus'),
     minWidth: '150',
+    slots: { default: 'deviceOnlineStatusName' },
   },
   {
     field: 'lastOnlineTime',