feat(views): 优化实时监测页面

1. 修复刷新页面后无法打开编辑器的问题
2. 执行编辑、导出图片等操作时检查模板数据
3. 关闭编辑器时刷新预览页面
4. 打开编辑器时刷新编辑页面

src/components/visual-2d/Visual2DEditor.vue

@@ -17,6 +17,10 @@ interface Props {
 
 const props = defineProps<Props>();
 
+const emit = defineEmits<{
+  close: [];
+}>();
+
 const { visible, showView, hideView } = useViewVisible();
 const { handleRequest } = useRequest();
 const iframeRef = useTemplateRef('editorIframe');
@@ -78,6 +82,11 @@ const updateGroupModule = (deviceIds: string) => {
   });
 };
 
+const handleClose = () => {
+  isIframeLoaded.value = false;
+  emit('close');
+};
+
 defineExpose({
   showView,
   hideView,
@@ -93,6 +102,8 @@ defineExpose({
     :closable="false"
     :mask-closable="false"
     :footer="null"
+    :after-close="handleClose"
+    destroy-on-close
   >
     <iframe ref="editorIframe" :src="iframeUrl"></iframe>
     <ASpin v-if="!isIframeLoaded" class="center-loading visual-2d-editor-loading" :spinning="true" />

src/i18n/locales/zh.json

@@ -639,6 +639,7 @@
     "startStopControlTipDisable": "当前设备被禁用，请将其调整为启用状态后再尝试",
     "startStopControlTipLocal": "当前设备处于本地模式，请将设备调整为远程模式后再尝试",
     "switchMode": "切换模式",
+    "templateDataNotFound": "未获取到模板数据，无法操作",
     "timeSegment": "时间段",
     "towerOutWaterTempLowerLimit": "塔出水温度寻优下限",
     "towerOutWaterTempUpperLimit": "塔出水温度寻优上限",

src/views/device-group/DeviceGroup.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onMounted, ref, useTemplateRef, watch } from 'vue';
+import { computed, onMounted, ref, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
 import DeviceWorkStatus from '@/views/device-work-status/DeviceWorkStatus.vue';
@@ -13,7 +13,7 @@ import type { TabComponent } from '@/types';
 const router = useRouter();
 const route = useRoute();
 const { renderView, refreshView } = useRefreshView();
-const realTimeMonitorRefs = useTemplateRef<InstanceType<typeof RealTimeMonitor>[]>('realTimeMonitor');
+const realTimeMonitorRefs = ref<Array<InstanceType<typeof RealTimeMonitor> | undefined>>();
 const activeKey = ref('');
 
 const deviceGroupId = computed(() => {
@@ -63,22 +63,22 @@ 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"
+          :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">
+          <AButton class="icon-button" @click="realTimeMonitorRefs?.[0]?.openEditor">
             <SvgIcon name="edit-o" />
             {{ $t('common.editor') }}
           </AButton>
-          <AButton class="icon-button" @click="realTimeMonitorRefs?.[0].exportImg">
+          <AButton class="icon-button" @click="realTimeMonitorRefs?.[0]?.exportImg">
             <SvgIcon name="export" />
             {{ $t('common.exportImg') }}
           </AButton>
-          <AButton class="icon-button" @click="realTimeMonitorRefs?.[0].maximizeView">
+          <AButton class="icon-button" @click="realTimeMonitorRefs?.[0]?.maximizeView">
             <SvgIcon name="maximize" />
             {{ $t('common.maximize') }}
           </AButton>

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

@@ -4,6 +4,7 @@ import { message } from 'ant-design-vue';
 
 import Visual2DEditor from '@/components/visual-2d/Visual2DEditor.vue';
 import Visual2DPreview from '@/components/visual-2d/Visual2DPreview.vue';
+import { useRefreshView } from '@/hooks/refresh-view';
 import { useRequest } from '@/hooks/request';
 import { t } from '@/i18n';
 import { equipmentDetails, getGroupModuleInfo, getPageList, noPaginationDevicesList } from '@/api';
@@ -32,11 +33,14 @@ const visual2DEditorRef = useTemplateRef('visual2DEditor');
 const visual2DPreviewRef = useTemplateRef('visual2DPreview');
 
 const { isLoading, handleRequest } = useRequest();
+const { renderView, refreshView } = useRefreshView();
 const moduleInfo = ref<GroupModuleInfo>();
 const deviceList = ref<DeviceGroupTree[]>([]);
 const deviceInfo = ref<EquipmentDetailsItem>();
 
 onMounted(() => {
+  refreshView();
+
   handleRequest(async () => {
     const groups = await getPageList();
     const devices = await noPaginationDevicesList();
@@ -97,7 +101,14 @@ const transformGroupsAndDevices = (groups: DeviceGroupItem[], devices: AllDevice
   });
 };
 
+const checkModuleInfo = () => {
+  if (!moduleInfo.value?.leId) {
+    message.error(t('realTimeMonitor.templateDataNotFound'));
+  }
+};
+
 const openEditor = () => {
+  checkModuleInfo();
   visual2DEditorRef.value?.showView();
 };
 
@@ -117,6 +128,7 @@ const openDevCtrlModal = (id: number) => {
 };
 
 const exportImg = () => {
+  checkModuleInfo();
   visual2DPreviewRef.value?.exportImg();
 };
 
@@ -135,15 +147,16 @@ defineExpose({
   <div class="real-time-monitor-container">
     <template v-if="moduleInfo?.leId">
       <Visual2DPreview
+        v-if="renderView"
         ref="visual2DPreview"
         :info="moduleInfo"
         :device-list="deviceList"
         @click="deviceControlRef?.closeCtrlPanel"
         @open-dev-ctrl-modal="openDevCtrlModal"
       />
-      <Visual2DEditor ref="visual2DEditor" :info="moduleInfo" :device-list="deviceList" />
+      <Visual2DEditor ref="visual2DEditor" :info="moduleInfo" :device-list="deviceList" @close="refreshView" />
     </template>
-    <DeviceControl ref="deviceControl" />
+    <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" />