V4修复: 按VolPro官方示例 onInited+JSX内联按钮+h()对话框

web.vite/src/extension/warehouse/device_manager/base_device.jsx

@@ -1,33 +1,57 @@
 /**
- * base_device 页面操作列扩展
+ * base_device 操作列扩展 — 按 DeviceGroup 渲染内联按钮 + 对话框
- * 在 onInit 中动态注入自定义操作列，按 DeviceGroup 渲染对应按钮组件
- * 对话框由各按钮组件内部自行管理
  */
-import { h } from 'vue'
+import { ref } from 'vue'
-import VideoDeviceActions from '@/views/warehouse/device_manager/base_device/components/VideoDeviceActions.vue'
+import DeviceLivePreview from '@/views/warehouse/device_manager/base_device/components/DeviceLivePreview.vue'
-import IoTDeviceActions from '@/views/warehouse/device_manager/base_device/components/IoTDeviceActions.vue'
+import PtzControlPanel from '@/views/warehouse/device_manager/base_device/components/PtzControlPanel.vue'
-
+import RealtimeDataPanel from '@/views/warehouse/device_manager/base_device/components/RealtimeDataPanel.vue'
-const actionMap = {
+import DeviceControlPanel from '@/views/warehouse/device_manager/base_device/components/DeviceControlPanel.vue'
-  '视频设备': VideoDeviceActions,
-  'IoT设备': IoTDeviceActions,
-}
 
 export default {
-  onInit() {
+  onInited() {
-    const gcol = this.columns.find(c => c.field === 'DeviceGroup')
+    const currentDevice = ref(null)
-    if (gcol) gcol.hidden = false
+    const previewVisible = ref(false)
-    this.columns.splice(0, 0, {
+    const ptzVisible = ref(false)
-      field: '_actions',
+    const realtimeVisible = ref(false)
+    const controlVisible = ref(false)
+
+    this.columns.push({
       title: '操作',
-      type: 'string',
+      field: '_actions',
       width: 300,
-      fixed: 'right',
       align: 'left',
+      fixed: 'right',
       render: (h, { row }) => {
-        const comp = actionMap[row.DeviceGroup]
+        if (row.DeviceGroup === '视频设备') {
-        if (!comp) return null
+          return h('div', [
-        return h(comp, { row })
+            h('el-button', { size: 'small', type: 'primary',
+              onClick: () => { currentDevice.value = row; previewVisible.value = true }
+            }, { default: () => '预览' }),
+            h('el-button', { size: 'small',
+              onClick: () => { currentDevice.value = row; ptzVisible.value = true }
+            }, { default: () => '云台' }),
+            h(DeviceLivePreview, { modelValue: previewVisible.value, 'onUpdate:modelValue': v => previewVisible.value = v, device: currentDevice.value }),
+            h(PtzControlPanel, { modelValue: ptzVisible.value, 'onUpdate:modelValue': v => ptzVisible.value = v, device: currentDevice.value }),
+          ])
+        }
+        if (row.DeviceGroup === 'IoT设备') {
+          return h('div', [
+            h('el-button', { size: 'small', type: 'primary',
+              onClick: () => { currentDevice.value = row; realtimeVisible.value = true }
+            }, { default: () => '实时数据' }),
+            h('el-button', { size: 'small',
+              onClick: () => { currentDevice.value = row; controlVisible.value = true }
+            }, { default: () => '控制' }),
+            h(RealtimeDataPanel, { modelValue: realtimeVisible.value, 'onUpdate:modelValue': v => realtimeVisible.value = v, device: currentDevice.value }),
+            h(DeviceControlPanel, { modelValue: controlVisible.value, 'onUpdate:modelValue': v => controlVisible.value = v, device: currentDevice.value }),
+          ])
+        }
+        return null
       }
     })
+
+    // 把 DeviceGroup 列显示出来
+    const gcol = this.columns.find(c => c.field === 'DeviceGroup')
+    if (gcol) gcol.hidden = false
   }
 }