feat(views): 编写“环境区域”预览页面

src/views/EnvArea/Preview.vue

@@ -1,3 +1,110 @@
+<script setup lang="ts">
+import { onMounted, onUnmounted, ref } from "vue";
+import { IframeMsg, MonitoringPointData, RegionsPointsItem } from "@/types";
+import { EnvAreaMsgType, getEnvAreaMsgType } from ".";
+import { Meta2d, Meta2dData, Options } from "@meta2d/core";
+import { registerAreaPens } from "./pens/register";
+import { watch } from "vue";
+import { monitorPointData, MonitorPointPen } from "./pens/monitorPoint";
+
+const defaultSize = {
+  width: 820,
+  height: 660,
+};
+
+const meta2dDom = ref("");
+const bgColor = ref("#F5F7FA");
+const currentAreaData = ref<RegionsPointsItem>();
+
+const meta2dOptions: Options = {
+  x: 0,
+  y: 0,
+  width: defaultSize.width,
+  height: defaultSize.height,
+  background: bgColor.value,
+  shadowBlur: 0,
+  disableAnchor: true,
+  disableScale: true,
+  disableTranslate: true,
+};
+
+onMounted(() => {
+  new Meta2d(meta2dDom.value, meta2dOptions);
+  registerAreaPens();
+
+  window.addEventListener("message", handleMsg);
+
+  const msg: IframeMsg = {
+    msgType: getEnvAreaMsgType(EnvAreaMsgType.PreviewLoaded),
+  };
+
+  window.parent.postMessage(msg, "*");
+});
+
+onUnmounted(() => {
+  meta2d?.destroy();
+  window.removeEventListener("message", handleMsg);
+});
+
+watch(currentAreaData, () => {
+  if (currentAreaData.value && currentAreaData.value.canvas !== "") {
+    const { canvas, points } = currentAreaData.value;
+    const data = JSON.parse(canvas) as Meta2dData;
+    data.locked = 1;
+
+    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,
+        });
+      }
+    });
+
+    meta2d.open(data);
+  } else {
+    meta2d.open({
+      pens: [],
+      background: bgColor.value,
+      width: defaultSize.width,
+      height: defaultSize.height,
+    } as any);
+  }
+});
+
+const handleMsg = (e: MessageEvent<IframeMsg>) => {
+  const { msgType, ...areaData } = e.data;
+
+  if (msgType === getEnvAreaMsgType(EnvAreaMsgType.PreviewArea)) {
+    currentAreaData.value = areaData as RegionsPointsItem;
+  }
+};
+</script>
+
 <template>
-  <div>Env Preview</div>
+  <div class="preview" :style="{ background: bgColor }">
+    <div class="meta2d-canvas" ref="meta2dDom"></div>
+  </div>
 </template>
+
+<style lang="postcss" scoped>
+.preview {
+  width: 100vw;
+  height: 100vh;
+
+  .meta2d-canvas {
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>

src/views/EnvArea/index.ts

@@ -12,6 +12,10 @@ export const enum EnvAreaMsgType {
   EditOutdoorTempHumidity = 'edit-outdoor-temp-humidity',
   SubmitEditArea = 'submit-edit-area',
   CancelEditArea = 'cancel-edit-area',
+  PreviewLoaded = 'preview-loaded',
+  PreviewArea = 'preview-area',
+  HighlightEnvMonitorPoint = 'highlight-env-monitor-point',
+  HighlightCanvasMonitorPoint = 'highlight-canvas-monitor-point',
 }
 
 export const getEnvAreaMsgType = (type: EnvAreaMsgType) => {