feat(views): 优化实时监测页面组态编辑器

1. 添加关闭按钮
2. 支持保存模板内容
3. 支持处理保存失败的情况

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

@@ -1,11 +1,14 @@
 <script setup lang="ts">
 import { computed, onMounted, onUnmounted, ref, useTemplateRef, watch } from 'vue';
+import { message } from 'ant-design-vue';
 import qs from 'qs';
 
 import { useRequest } from '@/hooks/request';
 import { useViewVisible } from '@/hooks/view-visible';
 import { updateGroupModuleInfo } from '@/api';
 
+import SvgIcon from '../SvgIcon.vue';
+
 import { getVisual2DMsgType, visual2DEditorPageUrl, Visual2DMsgType } from '.';
 
 import type { DeviceGroupTree, GroupModuleInfo, IframeMsg } from '@/types';
@@ -57,8 +60,15 @@ const handleIframeMsg = (e: MessageEvent<IframeMsg>) => {
     sendDeviceData();
   } else if (msgType === getVisual2DMsgType(Visual2DMsgType.SendDeviceIds)) {
     updateGroupModule(e.data.deviceIds);
+  } else if (msgType === getVisual2DMsgType(Visual2DMsgType.SaveModuleFailed)) {
+    hideExitView();
+
+    if (e.data.errMsg) {
+      message.error(e.data.errMsg);
+    }
   } else if (msgType === getVisual2DMsgType(Visual2DMsgType.CloseEditor)) {
-    hideView();
+    hideExitView();
+    setTimeout(hideView, 1200);
   }
 };
 
@@ -87,6 +97,27 @@ const handleClose = () => {
   emit('close');
 };
 
+const { visible: exitVisible, showView: showExitView, hideView: hideExitView } = useViewVisible();
+const isExitLoading = ref(false);
+
+const handleNoSave = () => {
+  hideExitView();
+  hideView();
+};
+
+const handleSave = () => {
+  const msg: IframeMsg = {
+    msgType: getVisual2DMsgType(Visual2DMsgType.SaveModule),
+  };
+
+  iframeRef.value?.contentWindow?.postMessage(msg, '*');
+  isExitLoading.value = true;
+};
+
+const handleExitClose = () => {
+  isExitLoading.value = false;
+};
+
 defineExpose({
   showView,
   hideView,
@@ -101,19 +132,58 @@ defineExpose({
     centered
     :closable="false"
     :mask-closable="false"
+    :keyboard="false"
     :footer="null"
     :after-close="handleClose"
     destroy-on-close
   >
+    <SvgIcon name="close" @click="showExitView" />
     <iframe ref="editorIframe" :src="iframeUrl"></iframe>
     <ASpin v-if="!isIframeLoaded" class="center-loading visual-2d-editor-loading" :spinning="true" />
   </AModal>
+  <AModal
+    v-model:open="exitVisible"
+    :title="$t('common.exitEdit')"
+    wrap-class-name="hvac-modal visual-2d-editor-exit-modal"
+    :width="400"
+    :z-index="1001"
+    centered
+    :mask-closable="false"
+    :after-close="handleExitClose"
+  >
+    <div>{{ $t('realTimeMonitor.saveChangesPrompt', { name: info.groupName }) }}</div>
+    <template #footer>
+      <AButton class="float-left" danger :disabled="isExitLoading" @click="handleNoSave">
+        {{ $t('common.noSave') }}
+      </AButton>
+      <AButton :disabled="isExitLoading" @click="hideExitView">{{ $t('common.cancel') }}</AButton>
+      <AButton type="primary" :loading="isExitLoading" @click="handleSave">{{ $t('common.save') }}</AButton>
+    </template>
+  </AModal>
 </template>
 
 <style lang="scss">
 .visual-2d-editor-modal {
   padding: 32px;
 
+  .svg-icon-close {
+    position: absolute;
+    top: 8px;
+    right: 12px;
+    padding: 4px;
+    font-size: 16px;
+    color: rgb(255 255 255 / 75%);
+    cursor: pointer;
+    transition:
+      color 0.2s,
+      background-color 0.2s;
+
+    &:hover {
+      color: #fff;
+      background-color: rgb(255 255 255 / 12%);
+    }
+  }
+
   .ant-modal {
     max-width: 1700px;
   }
@@ -146,4 +216,10 @@ defineExpose({
     border-radius: 8px;
   }
 }
+
+.visual-2d-editor-exit-modal {
+  .ant-modal-footer .ant-btn + .ant-btn:not(.ant-dropdown-trigger) {
+    margin-inline-start: 16px;
+  }
+}
 </style>

src/components/visual-2d/index.ts

@@ -15,6 +15,8 @@ export const enum Visual2DMsgType {
   CloseEditor = 'close-editor',
   SendDeviceData = 'send-device-data',
   SendDeviceIds = 'send-device-ids',
+  SaveModule = 'save-module',
+  SaveModuleFailed = 'save-module-failed',
   OpenDevCtrlModal = 'open-dev-ctrl-modal',
   PreviewLoaded = 'preview-loaded',
   PreviewClicked = 'preview-clicked',

src/types/index.ts

@@ -2158,6 +2158,7 @@ export interface GroupModuleInfo {
   leId: number;
   moduleType: number;
   groupId: number;
+  groupName: string;
   orgId: number;
   deviceIds: string;
   moduleInfoAi: {