perf(views): 优化环境监控区域，加载画布时显示 loading

src/views/env-monitor/AreaEditor.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, onUnmounted, useTemplateRef, watch } from 'vue';
+import { onMounted, onUnmounted, ref, useTemplateRef, watch } from 'vue';
 
 import { useViewVisible } from '@/hooks/view-visible';
 import { EnvAreaMsgType, getEnvAreaMsgType } from '@/utils/env-area';
@@ -19,7 +19,7 @@ const emit = defineEmits<{
 
 const { visible, showView, hideView } = useViewVisible();
 const iframeRef = useTemplateRef('editorIframe');
-let isIframeLoaded = false;
+const isIframeLoaded = ref(false);
 
 onMounted(() => {
   window.addEventListener('message', handleIframeMsg);
@@ -30,7 +30,7 @@ onUnmounted(() => {
 });
 
 watch(visible, () => {
-  if (visible.value && isIframeLoaded) {
+  if (visible.value && isIframeLoaded.value) {
     sendAreaData();
   }
 });
@@ -39,7 +39,7 @@ const handleIframeMsg = (e: MessageEvent<IframeMsg>) => {
   const { msgType } = e.data;
 
   if (msgType === getEnvAreaMsgType(EnvAreaMsgType.EditLoaded)) {
-    isIframeLoaded = true;
+    isIframeLoaded.value = true;
     sendAreaData();
   } else if (msgType === getEnvAreaMsgType(EnvAreaMsgType.EditOutdoorTempHumidity)) {
     emit('openOutdoorDrawer');
@@ -78,6 +78,7 @@ defineExpose({
     :footer="null"
   >
     <iframe ref="editorIframe" src="http://localhost:88/env-area"></iframe>
+    <ASpin v-if="!isIframeLoaded" class="center-loading env-area-editor-loading" :spinning="true" />
   </AModal>
 </template>
 
@@ -111,5 +112,10 @@ defineExpose({
     border: none;
     border-radius: 8px;
   }
+
+  .env-area-editor-loading {
+    background-color: #fff;
+    border-radius: 8px;
+  }
 }
 </style>

src/views/env-monitor/AreaPreview.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, onUnmounted, useTemplateRef, watch } from 'vue';
+import { onMounted, onUnmounted, ref, useTemplateRef, watch } from 'vue';
 
 import { EnvAreaMsgType, getEnvAreaMsgType } from '@/utils/env-area';
 
@@ -16,7 +16,7 @@ const emit = defineEmits<{
 }>();
 
 const iframeRef = useTemplateRef('previewIframe');
-let isIframeLoaded = false;
+const isIframeLoaded = ref(false);
 
 onMounted(() => {
   window.addEventListener('message', handleIframeMsg);
@@ -29,7 +29,7 @@ onUnmounted(() => {
 watch(
   () => props.areaData,
   () => {
-    if (isIframeLoaded) {
+    if (isIframeLoaded.value) {
       sendAreaData();
     }
   },
@@ -40,7 +40,7 @@ const handleIframeMsg = (e: MessageEvent<IframeMsg>) => {
   const { msgType } = e.data;
 
   if (msgType === getEnvAreaMsgType(EnvAreaMsgType.PreviewLoaded)) {
-    isIframeLoaded = true;
+    isIframeLoaded.value = true;
     sendAreaData();
   } else if (msgType === getEnvAreaMsgType(EnvAreaMsgType.HighlightEnvMonitorPoint)) {
     emit('highlightEnvPoint', e.data.monitorPointId);
@@ -74,6 +74,7 @@ defineExpose({
 
 <template>
   <iframe class="env-area-preview" ref="previewIframe" src="http://localhost:88/env-area/preview"></iframe>
+  <ASpin v-if="!isIframeLoaded" class="center-loading env-area-preview-loading" :spinning="true" />
 </template>
 
 <style lang="scss" scoped>
@@ -85,4 +86,9 @@ defineExpose({
   border: none;
   border-radius: 12px;
 }
+
+.env-area-preview-loading {
+  background-color: inherit;
+  border-radius: inherit;
+}
 </style>