perf(views): 优化环境监控区域

1. 修改区域画布后，预览区域立即展示最新的画布内容
2. 修复加载预览区域时可能报错的问题
3. 修复可能无法获取当前区域数据的问题

src/views/env-monitor/AreaPreview.vue

@@ -33,6 +33,7 @@ watch(
       sendAreaData();
     }
   },
+  { deep: true },
 );
 
 const handleIframeMsg = (e: MessageEvent<IframeMsg>) => {

src/views/env-monitor/EnvMonitor.vue

@@ -548,7 +548,7 @@ onMounted(() => {
 const areaEditorRef = useTemplateRef('areaEditor');
 const areaPreviewRef = useTemplateRef('areaPreview');
 const currentAreaData = computed(() => {
-  return monitoringList.value.find((item) => item.id === selectId.value);
+  return regionList.value.find((item) => item.id === selectId.value);
 });
 
 const saveAreaCanvas = (canvas: string) => {
@@ -560,7 +560,7 @@ const saveAreaCanvas = (canvas: string) => {
         canvas,
       });
 
-      const currentAreaData = monitoringList.value.find((item) => item.id === selectId.value);
+      const currentAreaData = regionList.value.find((item) => item.id === selectId.value);
 
       if (currentAreaData) {
         currentAreaData.canvas = canvas;
@@ -672,7 +672,12 @@ const highlightEnvPoint = (id: number) => {
                 <SvgIcon name="home" />
                 {{ currentAreaData?.avgTemperature || '-' }}℃｜{{ currentAreaData?.avgHumidity || '-' }}%
               </AButton>
-              <AreaPreview ref="areaPreview" :area-data="currentAreaData" @highlight-env-point="highlightEnvPoint" />
+              <AreaPreview
+                v-if="regionList.length"
+                ref="areaPreview"
+                :area-data="currentAreaData"
+                @highlight-env-point="highlightEnvPoint"
+              />
             </div>
           </div>
         </AFlex>