From 3ac3f5a0feec4beb7bdb85612eae8bd5bbdbb3ae Mon Sep 17 00:00:00 2001
From: g82tt <snow82@vip.qq.com>
Date: Sun, 17 May 2026 13:50:09 +0800
Subject: [PATCH] =?UTF-8?q?V4=E4=BF=AE=E5=A4=8D:=20=E6=8C=89VolPro?=
 =?UTF-8?q?=E5=AE=98=E6=96=B9=E7=A4=BA=E4=BE=8B=20onInited+JSX=E5=86=85?=
 =?UTF-8?q?=E8=81=94=E6=8C=89=E9=92=AE+h()=E5=AF=B9=E8=AF=9D=E6=A1=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../warehouse/device_manager/base_device.jsx  | 66 +++++++++++++------
 1 file changed, 45 insertions(+), 21 deletions(-)

diff --git a/web.vite/src/extension/warehouse/device_manager/base_device.jsx b/web.vite/src/extension/warehouse/device_manager/base_device.jsx
index dc71e52..8b7c388 100644
--- a/web.vite/src/extension/warehouse/device_manager/base_device.jsx
+++ b/web.vite/src/extension/warehouse/device_manager/base_device.jsx
@@ -1,33 +1,57 @@
 /**
- * base_device 页面操作列扩展
- * 在 onInit 中动态注入自定义操作列，按 DeviceGroup 渲染对应按钮组件
- * 对话框由各按钮组件内部自行管理
+ * base_device 操作列扩展 — 按 DeviceGroup 渲染内联按钮 + 对话框
  */
-import { h } from 'vue'
-import VideoDeviceActions from '@/views/warehouse/device_manager/base_device/components/VideoDeviceActions.vue'
-import IoTDeviceActions from '@/views/warehouse/device_manager/base_device/components/IoTDeviceActions.vue'
-
-const actionMap = {
-  '视频设备': VideoDeviceActions,
-  'IoT设备': IoTDeviceActions,
-}
+import { ref } from 'vue'
+import DeviceLivePreview from '@/views/warehouse/device_manager/base_device/components/DeviceLivePreview.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'
+import DeviceControlPanel from '@/views/warehouse/device_manager/base_device/components/DeviceControlPanel.vue'
 
 export default {
-  onInit() {
-    const gcol = this.columns.find(c => c.field === 'DeviceGroup')
-    if (gcol) gcol.hidden = false
-    this.columns.splice(0, 0, {
-      field: '_actions',
+  onInited() {
+    const currentDevice = ref(null)
+    const previewVisible = ref(false)
+    const ptzVisible = ref(false)
+    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 (!comp) return null
-        return h(comp, { row })
+        if (row.DeviceGroup === '视频设备') {
+          return h('div', [
+            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
   }
 }