perf(views): 优化环境区域编辑器

1. 优化画布存储的监测点数据，去掉多余的历史数据
2. 编辑器加载完成时通知外部窗口
3. 支持打开室外温湿度配置弹窗和关闭编辑器

src/views/EnvArea/Graphics.vue

@@ -37,7 +37,11 @@ const monitorPoints = computed<MonitorPointItem[]>(() => {
     disabled: monitorPointIds.value.includes(item.id),
     data: {
       ...monitorPointData,
-      monitorPointInfo: item,
+      monitorPointInfo: {
+        ...item,
+        humidityData: null,
+        tempData: null
+      }
     },
   }));
 });

src/views/EnvArea/Index.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, ref } from "vue";
+import { onMounted, onUnmounted, ref } from "vue";
 import Graphics from "./Graphics.vue";
 import View from "./View.vue";
 import { IframeMsg, RegionsPointsItem } from "@/types";
@@ -8,20 +8,32 @@ import { EnvAreaMsgType, getEnvAreaMsgType } from ".";
 const currentAreaData = ref<RegionsPointsItem>();
 
 onMounted(() => {
-  window.addEventListener("message", (e: MessageEvent<IframeMsg>) => {
-    const { msgType, ...areaData } = e.data;
+  window.addEventListener("message", handleMsg);
 
-    if (msgType === getEnvAreaMsgType(EnvAreaMsgType.EditArea)) {
-      currentAreaData.value = areaData as RegionsPointsItem;
-    }
-  });
+  const msg: IframeMsg = {
+    msgType: getEnvAreaMsgType(EnvAreaMsgType.EditLoaded),
+  };
+
+  window.parent.postMessage(msg, "*");
+});
+
+onUnmounted(() => {
+  window.removeEventListener("message", handleMsg);
 });
+
+const handleMsg = (e: MessageEvent<IframeMsg>) => {
+  const { msgType, ...areaData } = e.data;
+
+  if (msgType === getEnvAreaMsgType(EnvAreaMsgType.EditArea)) {
+    currentAreaData.value = areaData as RegionsPointsItem;
+  }
+};
 </script>
 
 <template>
   <div class="app-page" @contextmenu.prevent>
     <div class="design-body">
-      <Graphics :area-data="currentAreaData"/>
+      <Graphics :area-data="currentAreaData" />
       <View />
     </div>
   </div>

src/views/EnvArea/View.vue

@@ -7,6 +7,8 @@ import { registerAreaPens } from "./pens/register";
 import { useSelection } from "@/services/selections";
 import { useMonitorPointPen } from "@/services/monitor-point-pen";
 import { monitorPointData, MonitorPointPen } from "./pens/monitorPoint";
+import { EnvAreaMsgType, getEnvAreaMsgType } from ".";
+import { IframeMsg } from "@/types";
 
 const { select } = useSelection();
 const { setMonitorPointPens } = useMonitorPointPen();
@@ -85,7 +87,7 @@ const patchFlag = () => {
   const monitorPointPens = data.pens.filter(
     (item) => item.name === monitorPointData.name
   );
-  
+
   setMonitorPointPens(monitorPointPens as MonitorPointPen[]);
 };
 
@@ -143,11 +145,27 @@ const changeContextMenuVisible = (e: boolean) => {
 };
 
 const handleOk = () => {
-  return;
+  const msg: IframeMsg = {
+    msgType: getEnvAreaMsgType(EnvAreaMsgType.SubmitEditArea),
+  };
+
+  window.parent.postMessage(msg, "*");
 };
 
 const handleCancel = () => {
-  return;
+  const msg: IframeMsg = {
+    msgType: getEnvAreaMsgType(EnvAreaMsgType.CancelEditArea),
+  };
+
+  window.parent.postMessage(msg, "*");
+};
+
+const handleOutdoorTempHumidity = () => {
+  const msg: IframeMsg = {
+    msgType: getEnvAreaMsgType(EnvAreaMsgType.EditOutdoorTempHumidity),
+  };
+
+  window.parent.postMessage(msg, "*");
 };
 </script>
 
@@ -169,7 +187,7 @@ const handleCancel = () => {
       <t-button
         class="hvac-outline-button temperature-humidity-button outdoor"
         variant="outline"
-        @click="handleOk"
+        @click="handleOutdoorTempHumidity"
       >
         <SvgIcon name="outdoor"></SvgIcon>
         <span>{{ $t("点击配置") }}</span>

src/views/EnvArea/index.ts

@@ -7,7 +7,9 @@ export const envAreaMsgPrefix = 'hvac-env-monitor';
  * 环境监控模块与其区域 Iframe 内嵌网页通信的消息类型
  */
 export const enum EnvAreaMsgType {
+  EditLoaded = 'edit-loaded',
   EditArea = 'edit-area',
+  EditOutdoorTempHumidity = 'edit-outdoor-temp-humidity',
   SubmitEditArea = 'submit-edit-area',
   CancelEditArea = 'cancel-edit-area',
 }