229 lines
7.8 KiB
Vue
229 lines
7.8 KiB
Vue
<template>
|
|
<div>
|
|
<a-tabs
|
|
v-model:activeKey="activeKey"
|
|
tab-position="left"
|
|
:style="{ height: '100%' }"
|
|
@tabScroll="callback"
|
|
>
|
|
<a-tab-pane :key="1" tab="画面显示">
|
|
<a-tabs
|
|
v-model:activeKey="oneChildActiveKey"
|
|
tab-position="top"
|
|
:style="{ height: '100%' }"
|
|
@tabScroll="callback"
|
|
type="card"
|
|
>
|
|
<a-tab-pane :key="1" tab="视频显示">
|
|
<div class="scrollable" v-if="oneChildActiveKey==1">
|
|
<CameraCommonForm :data="cameraData"></CameraCommonForm>
|
|
</div>
|
|
</a-tab-pane>
|
|
<a-tab-pane :key="2" tab="OSD">
|
|
<div class="scrollable" v-if="oneChildActiveKey==2">
|
|
<CameraOsdForm :data="cameraData"></CameraOsdForm>
|
|
</div>
|
|
</a-tab-pane>
|
|
<a-tab-pane :key="3" tab="码流参数">
|
|
<div class="scrollable" v-if="oneChildActiveKey==3">
|
|
<CameraBitrateForm :data="cameraData"></CameraBitrateForm>
|
|
</div>
|
|
</a-tab-pane>
|
|
</a-tabs>
|
|
</a-tab-pane>
|
|
<a-tab-pane :key="2" tab="事件侦测">
|
|
<a-tabs
|
|
v-model:activeKey="twoChildActiveKey"
|
|
tab-position="top"
|
|
:style="{ height: '100%' }"
|
|
@tabScroll="callback"
|
|
type="card"
|
|
>
|
|
<a-tab-pane :key="1" tab="镜头遮挡">
|
|
<div class="scrollable">
|
|
<CameraBlockForm :data="cameraData"></CameraBlockForm>
|
|
</div>
|
|
</a-tab-pane>
|
|
<!-- <a-tab-pane :key="2" tab="移动侦测">-->
|
|
<!-- <div class="scrollable">-->
|
|
<!-- 21-->
|
|
<!-- </div>-->
|
|
<!-- </a-tab-pane>-->
|
|
|
|
<!-- <a-tab-pane :key="3" tab="区域覆盖">-->
|
|
<!-- <div class="scrollable">-->
|
|
<!-- 23-->
|
|
<!-- </div>-->
|
|
<!-- </a-tab-pane>-->
|
|
<!-- <a-tab-pane :key="4" tab="越界侦测">-->
|
|
<!-- <div class="scrollable">-->
|
|
<!-- 24-->
|
|
<!-- </div>-->
|
|
<!-- </a-tab-pane>-->
|
|
<!-- <a-tab-pane :key="5" tab="区域入侵">-->
|
|
<!-- <div class="scrollable">-->
|
|
<!-- 25-->
|
|
<!-- </div>-->
|
|
<!-- </a-tab-pane>-->
|
|
</a-tabs>
|
|
</a-tab-pane>
|
|
<a-tab-pane :key="3" tab="报警设备">
|
|
<a-tabs
|
|
v-model:activeKey="threeChildActiveKey"
|
|
tab-position="top"
|
|
:style="{ height: '100%' }"
|
|
@tabScroll="callback"
|
|
type="card"
|
|
>
|
|
<a-tab-pane :key="1" tab="白光报警">
|
|
<div class="scrollable" v-if="threeChildActiveKey==1">
|
|
<CameraLightAlarmForm :data="cameraData"></CameraLightAlarmForm>
|
|
</div>
|
|
</a-tab-pane>
|
|
<a-tab-pane :key="2" tab="声音报警">
|
|
<div class="scrollable" v-if="threeChildActiveKey==2">
|
|
<CameraSoundAlarmForm :data="cameraData"></CameraSoundAlarmForm>
|
|
</div>
|
|
</a-tab-pane>
|
|
</a-tabs>
|
|
</a-tab-pane>
|
|
<a-tab-pane :key="4" tab="录像管理">
|
|
<a-tabs
|
|
v-model:activeKey="fourChildActiveKey"
|
|
tab-position="top"
|
|
:style="{ height: '100%' }"
|
|
@tabScroll="callback"
|
|
type="card"
|
|
>
|
|
<a-tab-pane :key="1" tab="MP4转发FTP">
|
|
<div class="scrollable">
|
|
<CameraUploadForm :data="cameraData"></CameraUploadForm>
|
|
</div>
|
|
</a-tab-pane>
|
|
<a-tab-pane :key="2" tab="当天录像">
|
|
<div class="scrollable">
|
|
<CameraRecordList :data="cameraData" />
|
|
</div>
|
|
</a-tab-pane>
|
|
<!-- <a-tab-pane :key="3" tab="录像设置">
|
|
<div class="scrollable">
|
|
<a-button type="primary" preIcon="ant-design:search-outlined" @click="recordingConfig">获取录像配置</a-button>
|
|
<a-button type="primary" preIcon="ant-design:search-outlined" @click="setRecordingPlan">设置录像计划</a-button>
|
|
<a-button type="primary" preIcon="ant-design:search-outlined" @click="batchProgress">录像计划进度</a-button>
|
|
</div>
|
|
</a-tab-pane>-->
|
|
</a-tabs>
|
|
</a-tab-pane>
|
|
</a-tabs>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" name="iot-nuIotCameraInfo" setup>
|
|
import { ref, onMounted, reactive } from "vue";
|
|
import { useRouter } from 'vue-router';
|
|
import type { TabsProps } from 'ant-design-vue';
|
|
import { useListPage } from "@/hooks/system/useListPage";
|
|
import { getImageCommon,setImageCommon } from "@/views/iot/tplink/camera/camera.api";
|
|
import { recordingColumns,searchRecording } from "@/views/iot/tplink/camera/camera.data";
|
|
import CameraCommonForm from './CameraCommonForm.vue';//画面公共信息
|
|
import CameraOsdForm from './CameraOsdForm.vue';//OSD信息
|
|
import CameraBitrateForm from './CameraBitrateForm.vue';//码流参数
|
|
import CameraBlockForm from './CameraBlockForm.vue';//镜头遮挡
|
|
import CameraLightAlarmForm from './CameraLightAlarmForm.vue';//白光报警
|
|
import CameraSoundAlarmForm from './CameraSoundAlarmForm.vue';//声音报警
|
|
import CameraRecordList from './CameraRecordList.vue';//录像列表
|
|
import CameraUploadForm from './CameraUploadForm.vue';//上传FTP
|
|
import { useMessage } from "@/hooks/web/useMessage";
|
|
|
|
const { createMessage } = useMessage();
|
|
let router = useRouter();
|
|
const formData = reactive<Record<string, any>>({
|
|
//预览通道参数
|
|
deviceIndex: '',//设备索引
|
|
parentId: '',//存储设备(nvr,nvs)ID
|
|
multitrans: '',//multitrans功能标识
|
|
scale: 1 ,//回放速率
|
|
projectId: '' ,//项目ID
|
|
regionId: '' ,//区域ID
|
|
ip: '' ,//IP
|
|
});
|
|
const cameraData = ref({});
|
|
const activeKey = ref(1);
|
|
const oneChildActiveKey = ref(1);
|
|
const twoChildActiveKey = ref(1);
|
|
const threeChildActiveKey = ref(1);
|
|
|
|
const imageData = reactive<Record<string, any>>({
|
|
//画面显示配置
|
|
luma: "50", //亮度
|
|
contrast: '50', //对比度
|
|
saturation: '50', //饱和度
|
|
sharpness: '50', //锐度
|
|
wide_dynamic: 'off', //宽动态
|
|
wd_gain: '50', //宽动态度
|
|
});
|
|
|
|
// function recordingConfig(){
|
|
// getRecordCfgs({
|
|
// "deviceIndex": formData.deviceIndex,
|
|
// "parentId": formData.parentId,
|
|
// "projectId": formData.projectId,
|
|
// "regionId": formData.regionId,
|
|
// "ip": formData.ip
|
|
// }).then(res=>{
|
|
//
|
|
// });
|
|
// }
|
|
//
|
|
// function setRecordingPlan(){
|
|
// setRecordCfgs({
|
|
// "deviceIndex": formData.deviceIndex,
|
|
// "parentId": formData.parentId,
|
|
// "recordSwitch": 0,
|
|
// "streamType": 0
|
|
// }).then(res=>{
|
|
//
|
|
// });
|
|
// }
|
|
//
|
|
// function batchProgress(){
|
|
// getBatchProgress({}).then(res=>{});
|
|
// }
|
|
|
|
onMounted(()=>{
|
|
formData.deviceIndex = router.currentRoute.value.query.deviceIndex;
|
|
formData.parentId = router.currentRoute.value.query.parentId;
|
|
formData.multitrans = router.currentRoute.value.query.multitrans;
|
|
formData.projectId = router.currentRoute.value.query.projectId;
|
|
formData.regionId = router.currentRoute.value.query.regionId;
|
|
formData.ip = router.currentRoute.value.query.ip;
|
|
|
|
cameraData.value.deviceIndex = formData.deviceIndex;
|
|
cameraData.value.projectId = formData.projectId;
|
|
cameraData.value.regionId = formData.regionId;
|
|
cameraData.value.multitrans = formData.multitrans;
|
|
cameraData.value.scale = formData.scale;
|
|
})
|
|
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.scrollable {
|
|
width: 99.6%;
|
|
height: calc(100vh - 160px);
|
|
overflow: auto; /* 或者使用 scroll, hidden, visible */
|
|
//border: 1px solid #000;
|
|
background-color: white;
|
|
}
|
|
|
|
:deep(.ant-tabs-nav){
|
|
margin-bottom: 3px;
|
|
margin-left: -1px;
|
|
}
|
|
|
|
:deep(.ant-tabs-left>.ant-tabs-content-holder>.ant-tabs-content>.ant-tabs-tabpane){
|
|
padding-left: 3px;
|
|
}
|
|
|
|
</style>
|