g82tt/SecMPS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

V4修复: 操作列改为直接写在base_device.vue的onInited中(Vue3写法)

Browse Source
This commit is contained in:
g82tt
2026-05-17 13:55:59 +08:00
parent 3ac3f5a0fe
commit 652513724b
2 changed files with 43 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
web.vite/src/extension/warehouse/device_manager/base_device.jsx
View File

@@ -1,57 +0,0 @@
/**
* base_device 操作列扩展 — 按 DeviceGroup 渲染内联按钮 + 对话框
*/
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 {
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: '操作',
field: '_actions',
width: 300,
align: 'left',
fixed: 'right',
render: (h, { 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
}
}

47
web.vite/src/views/warehouse/device_manager/base_device.vue
View File

@@ -15,7 +15,6 @@
:searchFormFields="searchFormFields"
:searchFormOptions="searchFormOptions"
:table="table"
:extend="extend"
:onInit="onInit"
:onInited="onInited"
:searchBefore="searchBefore"
@@ -31,9 +30,12 @@
</view-grid>
</template>
<script setup lang="jsx">
import extend from "@/extension/warehouse/device_manager/base_device.jsx";
import viewOptions from './base_device/options.js'
import { ref, reactive, getCurrentInstance, watch, onMounted } from "vue";
import viewOptions from './base_device/options.js'
import { ref, reactive, getCurrentInstance, watch, onMounted, h } from "vue";
import DeviceLivePreview from "./base_device/components/DeviceLivePreview.vue";
import PtzControlPanel from "./base_device/components/PtzControlPanel.vue";
import RealtimeDataPanel from "./base_device/components/RealtimeDataPanel.vue";
import DeviceControlPanel from "./base_device/components/DeviceControlPanel.vue";
const grid = ref(null);
const { proxy } = getCurrentInstance()
//http请求，proxy.http.post/get
@@ -48,6 +50,43 @@
}
//生成对象属性初始化后,操作明细表配置用到
const onInited = async () => {
// 自定义操作列：按 DeviceGroup 渲染对应按钮
const curDev = ref(null);
const pv = ref(false), ptz = ref(false), rt = ref(false), ctrl = ref(false);
columns.push({
title: '操作', field: '_actions', width: 300, align: 'left', fixed: 'right',
render: (_h, { row }) => {
if (row.DeviceGroup === '视频设备') {
return _h('div', [
_h('el-button', { size: 'small', type: 'primary',
onClick: () => { curDev.value = row; pv.value = true }
}, { default: () => '预览' }),
_h('el-button', { size: 'small',
onClick: () => { curDev.value = row; ptz.value = true }
}, { default: () => '云台' }),
_h(DeviceLivePreview, { modelValue: pv.value, 'onUpdate:modelValue': v => pv.value = v, device: curDev.value }),
_h(PtzControlPanel, { modelValue: ptz.value, 'onUpdate:modelValue': v => ptz.value = v, device: curDev.value }),
]);
}
if (row.DeviceGroup === 'IoT设备') {
return _h('div', [
_h('el-button', { size: 'small', type: 'primary',
onClick: () => { curDev.value = row; rt.value = true }
}, { default: () => '实时数据' }),
_h('el-button', { size: 'small',
onClick: () => { curDev.value = row; ctrl.value = true }
}, { default: () => '控制' }),
_h(RealtimeDataPanel, { modelValue: rt.value, 'onUpdate:modelValue': v => rt.value = v, device: curDev.value }),
_h(DeviceControlPanel, { modelValue: ctrl.value, 'onUpdate:modelValue': v => ctrl.value = v, device: curDev.value }),
]);
}
return null;
}
});
const gcol = columns.find(c => c.field === 'DeviceGroup');
if (gcol) gcol.hidden = false;
}
const searchBefore = async (param) => {
//界面查询前,可以给param.wheres添加查询参数