feat(views): 环境区域编辑器获取和修改画布内容

src/views/EnvArea/Index.vue

@@ -34,7 +34,7 @@ const handleMsg = (e: MessageEvent<IframeMsg>) => {
   <div class="app-page" @contextmenu.prevent>
     <div class="design-body">
       <Graphics :area-data="currentAreaData" />
-      <View />
+      <View :area-data="currentAreaData" />
     </div>
   </div>
 </template>

src/views/EnvArea/View.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { onMounted, onUnmounted, reactive, ref } from "vue";
-import { HoverType, Meta2d, Options, Pen } from "@meta2d/core";
+import { onMounted, onUnmounted, reactive, ref, watch } from "vue";
+import { HoverType, Meta2d, Meta2dData, Options, Pen } from "@meta2d/core";
 import ContextMenu from "../components/ContextMenu.vue";
 import SvgIcon from "../components/SvgIcon.vue";
 import { registerAreaPens } from "./pens/register";
@@ -8,16 +8,27 @@ 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";
+import { IframeMsg, MonitoringPointData, RegionsPointsItem } from "@/types";
+
+interface Props {
+  areaData?: RegionsPointsItem;
+}
+
+const props = defineProps<Props>();
 
 const { select } = useSelection();
 const { setMonitorPointPens } = useMonitorPointPen();
 
+const defaultSize = {
+  width: 820,
+  height: 660,
+};
+
 const meta2dOptions: Options = {
   x: 0,
   y: 0,
-  width: 820,
-  height: 660,
+  width: defaultSize.width,
+  height: defaultSize.height,
   background: "#F5F7FA",
   shadowBlur: 0,
   disableAnchor: true,
@@ -62,6 +73,45 @@ onUnmounted(() => {
   meta2d?.destroy();
 });
 
+watch(
+  () => props.areaData,
+  () => {
+    if (props.areaData && props.areaData.canvas !== "") {
+      const { canvas, points } = props.areaData;
+      const data = JSON.parse(canvas) as Meta2dData;
+
+      const monitorPointPens = data.pens.filter(
+        (item) => item.name === monitorPointData.name
+      ) as MonitorPointPen[];
+
+      const pointsMap: Record<number, MonitoringPointData> = {};
+      points.forEach((item) => (pointsMap[item.id] = item));
+
+      monitorPointPens.forEach((item) => {
+        const currPointData = pointsMap[item.monitorPointInfo.id];
+
+        if (currPointData) {
+          Object.assign(item.monitorPointInfo, {
+            ...currPointData,
+            humidityData: null,
+            tempData: null,
+          });
+        }
+      });
+
+      setMonitorPointPens(monitorPointPens);
+      meta2d.open(data);
+    } else {
+      meta2d.open({
+        pens: [],
+        background: "#F5F7FA",
+        width: defaultSize.width,
+        height: defaultSize.height,
+      } as any);
+    }
+  }
+);
+
 const inactive = () => {
   if (fitFlag.value) {
     return;
@@ -147,6 +197,7 @@ const changeContextMenuVisible = (e: boolean) => {
 const handleOk = () => {
   const msg: IframeMsg = {
     msgType: getEnvAreaMsgType(EnvAreaMsgType.SubmitEditArea),
+    canvas: JSON.stringify(meta2d.data()),
   };
 
   window.parent.postMessage(msg, "*");
@@ -198,7 +249,11 @@ const handleOutdoorTempHumidity = () => {
         @click="handleCancel"
       >
         <SvgIcon name="home"></SvgIcon>
-        <span>22.9℃｜60.6%</span>
+        <span>
+          {{ areaData?.avgTemperature || "-" }}℃｜{{
+            areaData?.avgHumidity || "-"
+          }}%
+        </span>
       </t-button>
       <div id="env-area-meta2d"></div>
     </div>