hldy_yunwei_vue/src/views/iot/tplink/camera/components/CameraPictureConfig.vue

<template>
  <div>
    <a-tabs
      v-model:activeKey="activeKey"
      tab-position="left"
      :style="{ height: '100%' }"
    >
      <a-tab-pane key="A" tab="画面显示">
        <a-tabs
          v-model:activeKey="oneChildActiveKey"
          tab-position="top"
          :style="{ height: '100%' }"
          type="card"
        >
          <a-tab-pane key="A1" tab="视频显示">
            <div class="scrollable" v-if="oneChildActiveKey=='A1'">
              <CameraCommonForm ref="commonFormRef" :data="cameraData"></CameraCommonForm>
            </div>
          </a-tab-pane>
          <a-tab-pane key="A2" tab="OSD">
            <div class="scrollable" v-if="oneChildActiveKey=='A2'">
              <CameraOsdForm ref="osdFormRef" :data="cameraData"></CameraOsdForm>
            </div>
          </a-tab-pane>
          <a-tab-pane key="A3" tab="码流参数">
            <div class="scrollable" v-if="oneChildActiveKey=='A3'">
              <CameraBitrateForm :data="cameraData"></CameraBitrateForm>
            </div>
          </a-tab-pane>
        </a-tabs>
      </a-tab-pane>
      <a-tab-pane key="B" tab="事件侦测">
        <a-tabs
          v-model:activeKey="twoChildActiveKey"
          tab-position="top"
          :style="{ height: '100%' }"
          type="card"
        >
          <a-tab-pane key="B1" 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="C" tab="报警设备">
        <a-tabs
          v-model:activeKey="threeChildActiveKey"
          tab-position="top"
          :style="{ height: '100%' }"
          type="card"
        >
          <a-tab-pane key="C1" tab="白光报警">
            <div class="scrollable" v-if="threeChildActiveKey=='C1'">
              <CameraLightAlarmForm :data="cameraData"></CameraLightAlarmForm>
            </div>
          </a-tab-pane>
          <a-tab-pane key="C2" tab="声音报警">
            <div class="scrollable" v-if="threeChildActiveKey=='C2'">
              <CameraSoundAlarmForm :data="cameraData"></CameraSoundAlarmForm>
            </div>
          </a-tab-pane>
        </a-tabs>
      </a-tab-pane>
      <a-tab-pane key="D" tab="录像管理">
        <a-tabs
          v-model:activeKey="fourChildActiveKey"
          tab-position="top"
          :style="{ height: '100%' }"
          type="card"
        >
          <a-tab-pane key="D1" tab="MP4转发FTP">
            <div class="scrollable">
              <CameraUploadForm :data="cameraData"></CameraUploadForm>
            </div>
          </a-tab-pane>
          <a-tab-pane key="D2" 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-tab-pane key="E" tab="录像设置" forceRender="true">
        <PlanAddForm ref="addForm" :initData="formData" :data="cameraData" @success="submitCallback" />
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script lang="ts" name="iot-nuIotCameraInfo" setup>
  import {ref, onMounted, reactive, onUnmounted} from "vue";
  import { useRouter } from 'vue-router';
  import type { TabsProps } from 'ant-design-vue';
  import { useListPage } from "@/hooks/system/useListPage";
  import { getImageCommon,setImageCommon } from "../camera.api";
  import { recordingColumns,searchRecording } from "../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 PlanAddForm from '/@/views/iot/tplink/plan/components/PlanAddForm.vue';//录像设置
  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
    channel: ''
  });
  const cameraData = ref({});
  const activeKey = ref('A');
  const oneChildActiveKey = ref('A1');
  const twoChildActiveKey = ref('B1');
  const threeChildActiveKey = ref('C1');
  const commonFormRef = ref();
  const osdFormRef = ref();

  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(()=>{
    console.log(router.currentRoute.value.query);
    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;
    cameraData.value.parentId = formData.parentId;
    console.log(cameraData);
  })*/
  // onUnmounted(()=>{
  //
  // })

function edit(record) {
  formData.deviceIndex = record.deviceIndex;
  formData.deviceName = record.deviceName;
  formData.parentId = record.parentId;
  formData.multitrans = record.multitrans;
  formData.projectId = record.projectId;
  formData.regionId = record.regionId;
  formData.channel = record.channel;
  formData.ip = record.ip;

  cameraData.value.deviceIndex = formData.deviceIndex;
  cameraData.value.deviceName = formData.deviceName;
  cameraData.value.projectId = formData.projectId;
  cameraData.value.regionId = formData.regionId;
  cameraData.value.multitrans = formData.multitrans;
  cameraData.value.scale = formData.scale;
  cameraData.value.parentId = formData.parentId;
  cameraData.value.channel = formData.channel;
}

  function destroyPlayer(){
    if(commonFormRef.value){
      commonFormRef.value.destroyPlayer();
    }
    if(osdFormRef.value){
      osdFormRef.value.destroyPlayer();
    }
  }

defineExpose({
  edit,
  destroyPlayer
});

</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>