feat(views): 实时监测支持最大化

src/views/real-time-monitor/RealTimeMonitor.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { onMounted, ref, useTemplateRef } from 'vue';
+import { useFullscreen } from '@vueuse/core';
 import { message } from 'ant-design-vue';
 
 import Visual2DEditor from '@/components/visual-2d/Visual2DEditor.vue';
@@ -132,8 +133,10 @@ const exportImg = () => {
   visual2DPreviewRef.value?.exportImg();
 };
 
+const { isFullscreen, enter } = useFullscreen(document.body);
+
 const maximizeView = () => {
-  console.log('maximize view');
+  enter();
 };
 
 defineExpose({
@@ -144,7 +147,7 @@ defineExpose({
 </script>
 
 <template>
-  <div class="real-time-monitor-container">
+  <div :class="['real-time-monitor-container', { 'real-time-fullscreen': isFullscreen }]">
     <template v-if="moduleInfo?.leId">
       <Visual2DPreview
         v-if="renderView"
@@ -155,8 +158,8 @@ defineExpose({
         @open-dev-ctrl-modal="openDevCtrlModal"
       />
       <Visual2DEditor ref="visual2DEditor" :info="moduleInfo" :device-list="deviceList" @close="refreshView" />
+      <DeviceControl ref="deviceControl" :info="moduleInfo" />
     </template>
-    <DeviceControl ref="deviceControl" :group-id="props.deviceGroupId" />
     <DeviceCtrlModal ref="deviceCtrlModal" :info="deviceInfo" @open-dev-batch-exe="deviceBatchExeRef?.showView" />
     <DeviceBatchExe ref="deviceBatchExe" :group-id="props.deviceGroupId" />
     <ASpin v-if="isLoading" class="center-loading" :spinning="true" />
@@ -169,4 +172,9 @@ defineExpose({
   background: #1e2530;
   border-radius: 12px;
 }
+
+.real-time-fullscreen {
+  position: fixed;
+  inset: 0;
+}
 </style>