fix(views): 修复实时监测页面点击按钮无反应的问题

src/views/device-group/DeviceGroup.vue

@@ -4,7 +4,6 @@ import { useRoute, useRouter } from 'vue-router';
 
 import DeviceWorkStatus from '@/views/device-work-status/DeviceWorkStatus.vue';
 import RealTimeMonitor from '@/views/real-time-monitor/RealTimeMonitor.vue';
-import SvgIcon from '@/components/SvgIcon.vue';
 import { useRefreshView } from '@/hooks/refresh-view';
 import { t } from '@/i18n';
 
@@ -13,7 +12,6 @@ import type { TabComponent } from '@/types';
 const router = useRouter();
 const route = useRoute();
 const { renderView, refreshView } = useRefreshView();
-const realTimeMonitorRefs = ref<Array<InstanceType<typeof RealTimeMonitor> | undefined>>();
 const activeKey = ref('');
 
 const deviceGroupId = computed(() => {
@@ -75,27 +73,10 @@ const handleTabClick = (activeKey: string | number) => {
       <ATabPane v-for="item in aiSmartCtrlTabs" :key="item.key" :tab="item.name">
         <component
           v-if="activeKey === item.key && renderView"
-          :ref="item.key + 'Refs'"
           :is="item.component"
           :device-group-id="Number(deviceGroupId)"
         />
       </ATabPane>
-      <template #rightExtra>
-        <div class="real-time-monitor-operate" v-show="activeKey === 'realTimeMonitor'">
-          <AButton class="icon-button" @click="realTimeMonitorRefs?.[0]?.openEditor">
-            <SvgIcon name="edit-o" />
-            {{ $t('common.editor') }}
-          </AButton>
-          <AButton class="icon-button" @click="realTimeMonitorRefs?.[0]?.exportImg">
-            <SvgIcon name="export" />
-            {{ $t('common.exportImg') }}
-          </AButton>
-          <AButton class="icon-button" @click="realTimeMonitorRefs?.[0]?.maximizeView">
-            <SvgIcon name="maximize" />
-            {{ $t('common.maximize') }}
-          </AButton>
-        </div>
-      </template>
     </ATabs>
   </div>
 </template>
@@ -130,15 +111,4 @@ const handleTabClick = (activeKey: string | number) => {
     }
   }
 }
-
-.real-time-monitor-operate {
-  button {
-    color: var(--antd-color-primary);
-    border-color: var(--antd-color-primary);
-
-    + button {
-      margin-left: 16px;
-    }
-  }
-}
 </style>

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

@@ -154,6 +154,20 @@ defineExpose({
 
 <template>
   <div :class="['real-time-monitor-container', { 'real-time-fullscreen': isFullscreen }]">
+    <div v-show="!isFullscreen" class="real-time-monitor-operate">
+      <AButton class="icon-button" @click="openEditor">
+        <SvgIcon name="edit-o" />
+        {{ $t('common.editor') }}
+      </AButton>
+      <AButton class="icon-button" @click="exportImg">
+        <SvgIcon name="export" />
+        {{ $t('common.exportImg') }}
+      </AButton>
+      <AButton class="icon-button" @click="maximizeView">
+        <SvgIcon name="maximize" />
+        {{ $t('common.maximize') }}
+      </AButton>
+    </div>
     <template v-if="moduleInfo?.leId">
       <Visual2DPreview
         v-if="renderView"
@@ -184,4 +198,19 @@ defineExpose({
   inset: 0;
   border-radius: 0;
 }
+
+.real-time-monitor-operate {
+  position: absolute;
+  top: -48px;
+  right: 0;
+
+  button {
+    color: var(--antd-color-primary);
+    border-color: var(--antd-color-primary);
+
+    + button {
+      margin-left: 16px;
+    }
+  }
+}
 </style>