feat: 相机管理模块
JINGYJ
2 days ago
parent
77d5e04569
commit
badb802edc
@ -0,0 +1,667 @@
|
||||
<template>
|
||||
<!-- 控制器管理弹框 -->
|
||||
<DSDialog
|
||||
title="相机管理"
|
||||
v-model="show"
|
||||
width="1200"
|
||||
class="cameraManagement-dialog ds-dialog"
|
||||
@close="handleClose"
|
||||
>
|
||||
<div class="cameraManagement-container">
|
||||
<div class="cameraManagement-infoList">
|
||||
<div class="cameraManagement-infoList-title">
|
||||
<span>设备列表</span>
|
||||
<div class="infoList-title-btn" @click="addDevice">+</div>
|
||||
</div>
|
||||
<div class="cameraManagement-infoList-content">
|
||||
<div
|
||||
class="cameraManagement-infoList-item"
|
||||
:class="{ active: deviceTab === item.name }"
|
||||
v-for="(item, index) in deviceBars"
|
||||
:key="index"
|
||||
@click="selectDevice(item)"
|
||||
>
|
||||
<span>{{ item.name }}</span>
|
||||
<el-switch v-model="item.enabled" size="small" />
|
||||
</div>
|
||||
<el-empty
|
||||
:image-size="54"
|
||||
:image="NoDataIcon"
|
||||
style="margin-top: 130px"
|
||||
v-if="deviceBars.length === 0"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cameraManagement-line-first" />
|
||||
<div class="cameraManagement-content">
|
||||
<el-form label-width="auto" size="default" :model="formCameraInfo" style="max-width: 100%">
|
||||
<el-tabs v-model="dataTab" class="data-tabs" @tab-click="handleClick">
|
||||
<el-tab-pane label="常用参数" name="commParam"> </el-tab-pane>
|
||||
<el-tab-pane label="设备控制" name="deviceControl"> </el-tab-pane>
|
||||
</el-tabs>
|
||||
<template v-if="dataTab === 'commParam'">
|
||||
<el-form-item
|
||||
label="GenTL相机"
|
||||
label-position="left"
|
||||
v-if="formCameraInfo.typeSelection === '1'"
|
||||
>
|
||||
<el-switch v-model="formCameraInfo.GenTL" />
|
||||
</el-form-item>
|
||||
<el-row :gutter="24" v-if="formCameraInfo.GenTL">
|
||||
<el-col :span="10">
|
||||
<el-form-item label="选择Cti文件" label-position="top">
|
||||
<el-select
|
||||
v-model="formCameraInfo.ctiFile"
|
||||
placeholder="请选择"
|
||||
class="device-select"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-form-item label="类型选择：" label-position="left" v-if="!formCameraInfo.GenTL">
|
||||
<el-radio-group v-model="formCameraInfo.typeSelection" class="camera-radio-group">
|
||||
<el-radio value="1" size="large">枚举</el-radio>
|
||||
<el-radio value="2" size="large">跨网段IP</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-row :gutter="24" v-if="formCameraInfo.typeSelection === '1'">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="选择相机" label-position="top">
|
||||
<el-select
|
||||
v-model="formCameraInfo.cameras"
|
||||
placeholder="请选择"
|
||||
class="device-select"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-button type="primary" :icon="RefreshRight" circle class="mt-7" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24" v-if="formCameraInfo.typeSelection === '2'">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="本机IP" label-position="top">
|
||||
<el-select
|
||||
v-model="formCameraInfo.localIP"
|
||||
placeholder="请选择"
|
||||
class="device-select"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="相机IP" label-position="top">
|
||||
<el-select
|
||||
v-model="formCameraInfo.cameraIP"
|
||||
placeholder="请选择"
|
||||
class="device-select"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="5" v-if="formCameraInfo.typeSelection === '2'">
|
||||
<el-form-item label="连接相机" label-position="left">
|
||||
<el-switch v-model="formCameraInfo.connectCamera" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="5" v-if="formCameraInfo.typeSelection === '2'">
|
||||
<el-form-item label="自动重连" label-position="left">
|
||||
<el-switch v-model="formCameraInfo.autoReconnect" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="5">
|
||||
<el-form-item label="加载用户集" label-position="left">
|
||||
<el-switch v-model="formCameraInfo.loadUser" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="5">
|
||||
<el-form-item label="调试存图" label-position="left">
|
||||
<el-switch v-model="formCameraInfo.saveImage" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="图像缓存数" label-position="top">
|
||||
<el-input-number
|
||||
v-model="formCameraInfo.imageCaches"
|
||||
:min="1"
|
||||
:max="10"
|
||||
controls-position="right"
|
||||
@change="handleChange"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="实时取流" label-position="top">
|
||||
<el-button type="primary">查看画面</el-button>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="断线重连时间" label-position="top">
|
||||
<el-input-number
|
||||
v-model="formCameraInfo.reconnectedTime"
|
||||
:min="1"
|
||||
:max="10"
|
||||
controls-position="right"
|
||||
@change="handleChange"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="软触发超时" label-position="top">
|
||||
<el-input-number
|
||||
v-model="formCameraInfo.triggerTimeout"
|
||||
:min="1"
|
||||
:max="10"
|
||||
controls-position="right"
|
||||
@change="handleChange"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div>触发设置</div>
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="触发源" label-position="top">
|
||||
<el-select
|
||||
v-model="formCameraInfo.triggerSource"
|
||||
placeholder="请选择"
|
||||
class="device-select"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="触发模式" label-position="top">
|
||||
<el-select
|
||||
v-model="formCameraInfo.triggerMode"
|
||||
placeholder="请选择"
|
||||
class="device-select"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="触发延迟" label-position="top">
|
||||
<el-input-number
|
||||
v-model="formCameraInfo.triggerDelay"
|
||||
:min="1"
|
||||
:max="10"
|
||||
controls-position="right"
|
||||
@change="handleChange"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div>图像参数</div>
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="图像宽度" label-position="top">
|
||||
<el-input-number
|
||||
v-model="formCameraInfo.imageWidth"
|
||||
:min="1"
|
||||
:max="10"
|
||||
controls-position="right"
|
||||
@change="handleChange"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="图像高度" label-position="top">
|
||||
<el-input-number
|
||||
v-model="formCameraInfo.imageHight"
|
||||
:min="1"
|
||||
:max="10"
|
||||
controls-position="right"
|
||||
@change="handleChange"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="像素格式" label-position="top">
|
||||
<el-select
|
||||
v-model="formCameraInfo.pixelFormat"
|
||||
placeholder="请选择"
|
||||
class="device-select"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="6">
|
||||
<el-form-item label="帧率" label-position="top">
|
||||
<el-input-number
|
||||
v-model="formCameraInfo.FPS"
|
||||
:min="1"
|
||||
:max="10"
|
||||
controls-position="right"
|
||||
@change="handleChange"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="实际帧率" label-position="top">
|
||||
<el-input-number
|
||||
v-model="formCameraInfo.actualFPS"
|
||||
:min="1"
|
||||
:max="10"
|
||||
controls-position="right"
|
||||
@change="handleChange"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="曝光模式" label-position="top">
|
||||
<el-select
|
||||
v-model="formCameraInfo.exposureMode"
|
||||
placeholder="请选择"
|
||||
class="device-select"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="曝光时间" label-position="top">
|
||||
<el-input-number
|
||||
v-model="formCameraInfo.exposureTime"
|
||||
:min="1"
|
||||
:max="10"
|
||||
controls-position="right"
|
||||
@change="handleChange"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div>增益</div>
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="增益模式" label-position="top">
|
||||
<el-select
|
||||
v-model="formCameraInfo.gainMode"
|
||||
placeholder="请选择"
|
||||
class="device-select"
|
||||
>
|
||||
<el-option v-for="item in options" :key="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="增益" label-position="top">
|
||||
<el-input-number
|
||||
v-model="formCameraInfo.gain"
|
||||
:min="1"
|
||||
:max="10"
|
||||
controls-position="right"
|
||||
@change="handleChange"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="最小增益" label-position="top">
|
||||
<el-input-number
|
||||
v-model="formCameraInfo.gainMin"
|
||||
:min="1"
|
||||
:max="10"
|
||||
controls-position="right"
|
||||
@change="handleChange"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="最大增益" label-position="top">
|
||||
<el-input-number
|
||||
v-model="formCameraInfo.gainMax"
|
||||
:min="1"
|
||||
:max="10"
|
||||
controls-position="right"
|
||||
@change="handleChange"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div>图像参数</div>
|
||||
<el-form-item label="Gamma使能" label-position="left">
|
||||
<el-switch v-model="formCameraInfo.gamma" />
|
||||
</el-form-item>
|
||||
<el-row :gutter="24" v-if="formCameraInfo.gamma">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="选择器" label-position="top">
|
||||
<el-select
|
||||
v-model="formCameraInfo.selector"
|
||||
placeholder="请选择"
|
||||
class="device-select"
|
||||
>
|
||||
<el-option v-for="item in options" :key="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div>线阵相机</div>
|
||||
<div class="text-[#C9CDD4]">暂未检测到相关数据</div>
|
||||
<div>运行参数</div>
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="相机类型" label-position="top">
|
||||
<el-select
|
||||
v-model="formCameraInfo.cameraType"
|
||||
placeholder="请选择"
|
||||
class="device-select"
|
||||
>
|
||||
<el-option v-for="item in options" :key="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="有效电平" label-position="top">
|
||||
<el-select
|
||||
v-model="formCameraInfo.activeLevel"
|
||||
placeholder="请选择"
|
||||
class="device-select"
|
||||
>
|
||||
<el-option v-for="item in options" :key="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="text-right">
|
||||
<el-button color="#F53F3E">删除设备</el-button>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div>运行参数</div>
|
||||
<div class="text-[#C9CDD4]">暂未检测到相关数据</div>
|
||||
<div>运行参数</div>
|
||||
<div class="text-[#C9CDD4]">暂未检测到相关数据</div>
|
||||
</template>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</DSDialog>
|
||||
<CameraDialog v-model:value="isCameraDialog" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
defineOptions({
|
||||
name: 'cameraManagement'
|
||||
})
|
||||
import { DSButton } from '@/components/Button'
|
||||
import { DSDialog } from '@/components/Dialog'
|
||||
import { RefreshRight } from '@element-plus/icons-vue'
|
||||
import CameraDialog from './cameraDialog.vue'
|
||||
interface Props {
|
||||
/** import DeviceDialog from './deviceDialog.vue';
|
||||
弹窗显隐 */
|
||||
value: boolean
|
||||
}
|
||||
interface Emits {
|
||||
(e: 'update:value', val: boolean): void
|
||||
}
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
value: false
|
||||
})
|
||||
const emit = defineEmits<Emits>()
|
||||
console.log(props.value)
|
||||
const show = computed({
|
||||
get() {
|
||||
Object.assign(deviceBars, deviceList)
|
||||
return props.value
|
||||
},
|
||||
set(val: boolean) {
|
||||
emit('update:value', val)
|
||||
}
|
||||
})
|
||||
const isCameraDialog = ref(false)
|
||||
|
||||
const dataTab = ref('commParam')
|
||||
|
||||
const handleClick = (tab: any) => {
|
||||
dataTab.value = tab.props.name
|
||||
}
|
||||
// 中间tab
|
||||
const deviceTab = ref('') // device/receive/send/heartbeat/response
|
||||
const deviceBars = ref([])
|
||||
|
||||
const options = [
|
||||
{
|
||||
value: 'DPS2',
|
||||
label: 'DPS2'
|
||||
},
|
||||
{
|
||||
value: 'MV-AP1024-2T',
|
||||
label: 'MV-AP1024-2T'
|
||||
}
|
||||
]
|
||||
// 设备列表
|
||||
const deviceList = ref([
|
||||
{
|
||||
name: '1 Light-1',
|
||||
enabled: false,
|
||||
info: {}
|
||||
},
|
||||
{ name: '2 Light-2', enabled: false }
|
||||
])
|
||||
// 设备信息表单
|
||||
const formCameraInfo = reactive({
|
||||
GenTL: false,
|
||||
typeSelection: '1',
|
||||
cameras: '',
|
||||
ctiFile: '',
|
||||
localIP: '',
|
||||
cameraIP: '',
|
||||
connectCamera: false,
|
||||
autoReconnect: false,
|
||||
loadUser: false,
|
||||
saveImage: false,
|
||||
imageCaches: 1,
|
||||
reconnectedTime: 1,
|
||||
triggerTimeout: 1,
|
||||
triggerSource: '',
|
||||
triggerMode: '',
|
||||
triggerDelay: 1,
|
||||
imageWidth: 1,
|
||||
imageHight: 1,
|
||||
pixelFormat: '',
|
||||
FPS: 1,
|
||||
actualFPS: 1,
|
||||
exposureMode: '',
|
||||
exposureTime: 1,
|
||||
gainMode: '',
|
||||
gain: 1,
|
||||
gainMin: 1,
|
||||
gainMax: 1,
|
||||
gamma: false,
|
||||
selector: '',
|
||||
cameraType: '',
|
||||
activeLevel: ''
|
||||
})
|
||||
|
||||
const selectDevice = (device: Device) => {
|
||||
deviceTab.value = device.name
|
||||
Object.assign(formCameraInfo, device.info)
|
||||
console.log(deviceTab.value)
|
||||
}
|
||||
|
||||
// 添加设备
|
||||
const addDevice = () => {
|
||||
isCameraDialog.value = true
|
||||
// deviceList.value.push({
|
||||
// name: `${deviceList.value.length + 1} Light-${deviceList.value.length + 1}`,
|
||||
// enabled: false,
|
||||
// info: {}
|
||||
// })
|
||||
}
|
||||
|
||||
const handleTableAdd = () => {
|
||||
formCameraInfo.tableData.push({
|
||||
num: formCameraInfo.tableData.length + 1,
|
||||
inputIO: '1',
|
||||
triggeringSignal: '上升沿',
|
||||
process: '流程1'
|
||||
})
|
||||
}
|
||||
|
||||
const handleChange = () => {}
|
||||
// 处理对话框关闭事件
|
||||
const handleClose = () => {}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
/* 弹框整体样式 */
|
||||
.cameraManagement-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 766px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
.cameraManagement-infoList {
|
||||
box-sizing: border-box;
|
||||
width: 250px;
|
||||
.cameraManagement-infoList-title {
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
padding: 0 16px;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
.infoList-title-btn {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: #154ddd;
|
||||
border: none;
|
||||
color: #fff;
|
||||
font-size: 24px;
|
||||
text-align: center;
|
||||
line-height: 20px;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.cameraManagement-infoList-content {
|
||||
.cameraManagement-infoList-item {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 32px;
|
||||
padding: 0 16px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
.cameraManagement-infoList-item.active {
|
||||
background: #f2f2f7;
|
||||
span {
|
||||
color: #154ddd;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.cameraManagement-content {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
box-sizing: border-box;
|
||||
padding: 16px 24px 24px;
|
||||
.device-select {
|
||||
color: #fff;
|
||||
:deep(.el-select__wrapper) {
|
||||
background: #303136;
|
||||
.el-select__selected-item {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
:deep(.el-input-number) {
|
||||
width: 100%;
|
||||
.el-input-number__increase,
|
||||
.el-input-number__decrease {
|
||||
background: transparent;
|
||||
color: #fff;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
.form-device-btn {
|
||||
width: 80px;
|
||||
padding: 0 12px;
|
||||
}
|
||||
.camera-radio-group {
|
||||
height: 32px;
|
||||
:deep(.el-radio.el-radio--large) {
|
||||
height: 32px;
|
||||
}
|
||||
:deep(.el-radio__label) {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.cameraManagement-line-first {
|
||||
position: absolute;
|
||||
left: 250px;
|
||||
width: 1px;
|
||||
height: 100vh;
|
||||
background-color: #fff;
|
||||
opacity: 0.3;
|
||||
}
|
||||
.data-tabs {
|
||||
width: 100%;
|
||||
:deep(.el-tabs__item) {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue