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