相机预览-增加全屏功能

src/views/cameras/preview/components/CameraViewSetting/CameraViewSetting.vue

@@ -2,6 +2,12 @@
   <div>
     <div class="toolbarWrapper">
       <ViewWindowSetting v-model="viewType" @update:model-value="handleUpdateViewType" />
+      <el-tooltip content="全屏">
+        <el-icon class="el-input__icon" :size="18" style="margin-left: 10px; margin-right: 10px">
+          <FullscreenExitOutlined role="full" @click="enterFullscreen" />
+        </el-icon>
+      </el-tooltip>
+
       <PresetSelect />
       <FenceToolbar
         :style="{ visibility: drawable ? 'visible' : 'hidden' }"
@@ -56,7 +62,6 @@
   import FenceToolbar from '../FenceToolbar/FenceToolbar.vue';
   import FenceEditor from '../FenceEditorV2/FenceEditor.vue';
   import CameraLiveVideo from '../CameraLiveVideo/CameraLiveVideo.vue';
-  import ViewWindowSetting from '../ViewWindowSetting/ViewWindowSetting.vue';
   import PresetSelect from '../PresetSelect/PresetSelect.vue';
   import { ViewType } from '../ViewWindowSetting/types';
   import useFenceStore from '../../store/useFenceStore';
@@ -65,10 +70,14 @@
   import useCameraDetailStore from '../../store/useCameraDetailStore';
   import useCameraAlgoStore from '../../store/useCameraAlgoStore';
   import AlgorithmsSetting from '../AlgorithmsSetting/AlgorithmsSetting.vue';
-  import CameraParams from '../CameraParams/CameraParams.vue';
+  import { FullscreenExitOutlined } from '@vicons/antd';
+
   import { ElMessage } from 'element-plus';
   import CameraDirectionControl from '../CameraDirectionControl/CameraDirectionControl.vue';
-  import { canvasHeight, canvasWidth, domHeight, domWidth, scale } from './constants';
+  import { canvasHeight, canvasWidth, domHeight, domWidth } from './constants';
+  import useFullscreen from 'vue-hooks-plus/lib/useFullscreen';
+
+  const [, { enterFullscreen }] = useFullscreen(() => document.querySelector('.cameraVideo'));
 
   const fenceEditorRef = ref<typeof FenceEditor | null>(null);
 

src/views/cameras/preview/components/ViewWindowSetting/ViewWindowSetting.vue

@@ -1,5 +1,6 @@
 <template>
-  <div style="display: flex">
+  <!-- 先不展示 -->
+  <div style="display: flex" v-if="false">
     <ToolbarIcon
       :src="window1"
       :active="props.modelValue === ViewType.window1"