From 715c42fd4dbb1f4aae1fe498d01fc726bbfd6958 Mon Sep 17 00:00:00 2001 From: g82tt Date: Sun, 17 May 2026 13:42:39 +0800 Subject: [PATCH] =?UTF-8?q?V4=E4=BF=AE=E5=A4=8D:=20jsx=E6=94=B9=E7=94=A8on?= =?UTF-8?q?Init+columns+render=20=E7=BB=84=E4=BB=B6=E8=87=AA=E5=90=AB?= =?UTF-8?q?=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 | 81 +++++-------------- .../components/IoTDeviceActions.vue | 14 ++-- .../components/VideoDeviceActions.vue | 20 +++-- .../device_manager/base_device/options.js | 10 +-- .../device_manager/gateway_nodes/options.js | 59 +++++++++++++- 5 files changed, 106 insertions(+), 78 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 7230d76..dc71e52 100644 --- a/web.vite/src/extension/warehouse/device_manager/base_device.jsx +++ b/web.vite/src/extension/warehouse/device_manager/base_device.jsx @@ -1,72 +1,33 @@ /** * base_device 页面操作列扩展 - * 按 DeviceGroup 动态渲染对应的操作按钮组件 - * 框架升级不覆盖此文件（extension 目录受保护） + * 在 onInit 中动态注入自定义操作列，按 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' -import AccessDeviceActions from '@/views/warehouse/device_manager/base_device/components/AccessDeviceActions.vue' -import BarrierDeviceActions from '@/views/warehouse/device_manager/base_device/components/BarrierDeviceActions.vue' -import AlarmDeviceActions from '@/views/warehouse/device_manager/base_device/components/AlarmDeviceActions.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' -import DeviceEditDialog from '@/views/warehouse/device_manager/base_device/components/DeviceEditDialog.vue' -import MapBindingPanel from '@/views/warehouse/device_manager/base_device/components/MapBindingPanel.vue' -// 按 DeviceGroup 映射操作组件 const actionMap = { - '视频设备': 'VideoDeviceActions', - 'IoT设备': 'IoTDeviceActions', - '门禁设备': 'AccessDeviceActions', - '道闸设备': 'BarrierDeviceActions', - '报警设备': 'AlarmDeviceActions', + '视频设备': VideoDeviceActions, + 'IoT设备': IoTDeviceActions, } export default { - components: { - VideoDeviceActions, IoTDeviceActions, AccessDeviceActions, BarrierDeviceActions, AlarmDeviceActions, - DeviceLivePreview, PtzControlPanel, RealtimeDataPanel, DeviceControlPanel, DeviceEditDialog, MapBindingPanel - }, - - data() { - return { - currentDevice: null, - dialogs: { preview: false, ptz: false, realtime: false, control: false, edit: false, map: false } - } - }, - - // 替换框架操作列 - slots: { - 'col-action': (h, { row }) => { - const compName = actionMap[row.deviceGroup] - if (!compName) return null - // 渲染自定义按钮组，绑定事件 - return h(compName, { - props: { row }, - on: { - preview: () => this.openDialog('preview', row), - ptz: () => this.openDialog('ptz', row), - playback: () => console.log('playback', row), - snapshot: () => console.log('snapshot', row), - syncChannels: () => console.log('syncChannels', row), - realtime: () => this.openDialog('realtime', row), - control: () => this.openDialog('control', row), - refresh: () => this.$emit('refresh'), - alarms: () => console.log('alarms', row), - } - }) - } - }, - - methods: { - openDialog(name, device) { - this.currentDevice = device - this.dialogs[name] = true - }, - onRefresh() { - this.$emit('refresh') - } + onInit() { + const gcol = this.columns.find(c => c.field === 'DeviceGroup') + if (gcol) gcol.hidden = false + this.columns.splice(0, 0, { + field: '_actions', + title: '操作', + type: 'string', + width: 300, + fixed: 'right', + align: 'left', + render: (h, { row }) => { + const comp = actionMap[row.DeviceGroup] + if (!comp) return null + return h(comp, { row }) + } + }) } } diff --git a/web.vite/src/views/warehouse/device_manager/base_device/components/IoTDeviceActions.vue b/web.vite/src/views/warehouse/device_manager/base_device/components/IoTDeviceActions.vue index 6904158..62aa3ab 100644 --- a/web.vite/src/views/warehouse/device_manager/base_device/components/IoTDeviceActions.vue +++ b/web.vite/src/views/warehouse/device_manager/base_device/components/IoTDeviceActions.vue @@ -1,16 +1,20 @@ diff --git a/web.vite/src/views/warehouse/device_manager/base_device/options.js b/web.vite/src/views/warehouse/device_manager/base_device/options.js index 008eb8c..d69531d 100644 --- a/web.vite/src/views/warehouse/device_manager/base_device/options.js +++ b/web.vite/src/views/warehouse/device_manager/base_device/options.js @@ -30,15 +30,14 @@ export default function(){ const searchFormOptions = []; const columns = [{field:'DeviceId',title:'设备ID',type:'int',width:110,hidden:true,require:true,align:'left'}, {field:'DeviceName',title:'设备名称',type:'string',link:true,width:120,require:true,align:'left'}, - {field:'AdapterCode',title:'来源适配器(类型:实例)',type:'string',width:110,hidden:true,require:true,align:'left'}, - {field:'SourceId',title:'源系统设备ID',type:'string',width:120,require:true,align:'left'}, + {field:'AdapterCode',title:'来源适配器(类型:实例)',type:'string',width:110,hidden:true,align:'left'}, + {field:'SourceId',title:'源系统设备ID',type:'string',width:120,align:'left'}, {field:'DeviceCategory',title:'设备种类(数据字典)',type:'string',bind:{ key:'设备种类',data:[]},width:110,require:true,align:'left'}, {field:'DeviceGroup',title:'设备分组(数据字典)',type:'string',bind:{ key:'设备分组',data:[]},width:110,hidden:true,require:true,align:'left'}, {field:'PointId',title:'所属点位ID',type:'int',width:110,hidden:true,align:'left'}, - {field:'GatewayNodeId',title:'所属网关节点ID',type:'int',width:110,hidden:true,align:'left'}, {field:'IsParent',title:'是否父设备(数据字典)',type:'string',bind:{ key:'是否父设备',data:[]},width:110,require:true,align:'left'}, {field:'ParentDeviceId',title:'父设备ID(自引用,子设备挂父设备下)',type:'int',width:110,hidden:true,align:'left'}, - {field:'IsOnline',title:'在线状态(数据字典)',type:'string',bind:{ key:'在线状态',data:[]},width:110,require:true,align:'left'}, + {field:'IsOnline',title:'在线状态(数据字典)',type:'string',bind:{ key:'在线状态',data:[]},width:110,align:'left'}, {field:'IpAddress',title:'IP地址',type:'string',width:110,align:'left'}, {field:'Port',title:'端口',type:'int',width:110,align:'left'}, {field:'Location',title:'安装位置',type:'string',width:180,align:'left'}, @@ -56,7 +55,8 @@ export default function(){ {field:'CreateDate',title:'创建时间',type:'datetime',width:110,align:'left'}, {field:'ModifyID',title:'修改人ID',type:'int',width:80,hidden:true,align:'left'}, {field:'Modifier',title:'修改人',type:'string',width:100,align:'left'}, - {field:'ModifyDate',title:'修改时间',type:'datetime',width:110,align:'left'}]; + {field:'ModifyDate',title:'修改时间',type:'datetime',width:110,align:'left'}, + {field:'NodeId',title:'所属网关节点ID',type:'int',width:120,hidden:true,align:'left'}]; const detail ={columns:[]}; const details = [ { cnName: '视频通道', diff --git a/web.vite/src/views/warehouse/device_manager/gateway_nodes/options.js b/web.vite/src/views/warehouse/device_manager/gateway_nodes/options.js index 74a4547..8c34207 100644 --- a/web.vite/src/views/warehouse/device_manager/gateway_nodes/options.js +++ b/web.vite/src/views/warehouse/device_manager/gateway_nodes/options.js @@ -40,7 +40,64 @@ export default function(){ {field:'Modifier',title:'修改人',type:'string',width:100,align:'left'}, {field:'ModifyDate',title:'修改时间',type:'datetime',width:110,align:'left'}]; const detail ={columns:[]}; - const details = []; + const details = [ { + cnName: '设备管理', + table: 'base_device', + columns: [{field:'DeviceId',title:'设备ID',type:'int',width:110,hidden:true,require:true,align:'left'}, + {field:'DeviceName',title:'设备名称',type:'string',link:true,width:120,edit:{type:''},require:true,align:'left'}, + {field:'AdapterCode',title:'来源适配器(类型:实例)',type:'string',width:110,hidden:true,align:'left'}, + {field:'SourceId',title:'源系统设备ID',type:'string',width:120,align:'left'}, + {field:'DeviceCategory',title:'设备种类(数据字典)',type:'string',bind:{ key:'设备种类',data:[]},width:110,edit:{type:'select'},require:true,align:'left'}, + {field:'DeviceGroup',title:'设备分组(数据字典)',type:'string',bind:{ key:'设备分组',data:[]},width:110,hidden:true,edit:{type:'select'},require:true,align:'left'}, + {field:'PointId',title:'所属点位ID',type:'int',width:110,hidden:true,edit:{type:''},align:'left'}, + {field:'IsParent',title:'是否父设备(数据字典)',type:'string',bind:{ key:'是否父设备',data:[]},width:110,edit:{type:'select'},require:true,align:'left'}, + {field:'ParentDeviceId',title:'父设备ID(自引用,子设备挂父设备下)',type:'int',width:110,hidden:true,align:'left'}, + {field:'IsOnline',title:'在线状态(数据字典)',type:'string',bind:{ key:'在线状态',data:[]},width:110,align:'left'}, + {field:'IpAddress',title:'IP地址',type:'string',width:110,align:'left'}, + {field:'Port',title:'端口',type:'int',width:110,align:'left'}, + {field:'Location',title:'安装位置',type:'string',width:180,edit:{type:''},align:'left'}, + {field:'Lat',title:'纬度',type:'decimal',width:110,align:'left'}, + {field:'Lng',title:'经度',type:'decimal',width:110,align:'left'}, + {field:'MapModelId',title:'三维地图模型ID',type:'string',width:120,edit:{type:''},align:'left'}, + {field:'MapModelScale',title:'模型缩放比例',type:'decimal',width:110,align:'left'}, + {field:'MapModelRotation',title:'模型旋转角度(JSON)',type:'string',width:120,align:'left'}, + {field:'ExtraData',title:'适配器扩展数据JSON(Owl/MC4/门禁字段均存于此)',type:'string',width:110,align:'left'}, + {field:'LastSyncTime',title:'上次同步时间',type:'datetime',width:110,align:'left'}, + {field:'Enable',title:'启用状态(数据字典)',type:'string',bind:{ key:'启用状态',data:[]},width:110,edit:{type:'select'},align:'left'}, + {field:'Remark',title:'备注',type:'string',width:150,edit:{type:'textarea'},align:'left'}, + {field:'CreateID',title:'创建人ID',type:'int',width:80,hidden:true,align:'left'}, + {field:'Creator',title:'创建人',type:'string',width:100,align:'left'}, + {field:'CreateDate',title:'创建时间',type:'datetime',width:110,align:'left'}, + {field:'ModifyID',title:'修改人ID',type:'int',width:80,hidden:true,align:'left'}, + {field:'Modifier',title:'修改人',type:'string',width:100,align:'left'}, + {field:'ModifyDate',title:'修改时间',type:'datetime',width:110,align:'left'}, + {field:'NodeId',title:'所属网关节点ID',type:'int',width:120,hidden:true,readonly:true,align:'left'}], + sortName: 'DeviceName', + key: 'DeviceId', + buttons:[], + delKeys:[], + detail:{ + cnName: '设备管理_视频通道', + table: 'video_channel', + firstTable: 'gateway_nodes', + secondTable: 'base_device', + secondKey: 'DeviceId', + sortName: 'DeviceId', + key: 'ChannelId', + buttons:[], + delKeys:[], + columns: [{field:'ChannelId',title:'通道记录ID',type:'int',width:110,hidden:true,require:true,align:'left'}, + {field:'OwlChannelId',title:'Owl系统通道ID',type:'string',width:120,hidden:true,require:true,align:'left'}, + {field:'DeviceId',title:'关联Base_Device设备ID',type:'int',width:110,hidden:true,require:true,align:'left'}, + {field:'OwlStreamApp',title:'Owl流应用名',type:'string',width:110,align:'left'}, + {field:'OwlStreamName',title:'Owl流名称',type:'string',width:120,align:'left'}, + {field:'HasPtz',title:'是否支持云台',type:'byte',width:110,align:'left'}, + {field:'HasRecording',title:'是否支持录像',type:'byte',width:110,align:'left'}, + {field:'RecordMode',title:'录像模式',type:'int',width:110,align:'left'}, + {field:'SnapshotUrl',title:'快照地址',type:'string',width:150,align:'left'}, + {field:'CreateDate',title:'创建时间',type:'datetime',width:110,align:'left'},] + } + }]; return { table,