feat(views): 预览“环境区域”时支持点击高亮监测点，并与外部监测点联动

src/views/EnvArea/Preview.vue

@@ -31,6 +31,7 @@ const meta2dOptions: Options = {
 onMounted(() => {
   new Meta2d(meta2dDom.value, meta2dOptions);
   registerAreaPens();
+  meta2d.on('highlightMonitorPoint', highlightEnvMonitorPoint);
 
   window.addEventListener("message", handleMsg);
 
@@ -42,6 +43,7 @@ onMounted(() => {
 });
 
 onUnmounted(() => {
+  meta2d.off('highlightMonitorPoint', highlightEnvMonitorPoint);
   meta2d?.destroy();
   window.removeEventListener("message", handleMsg);
 });
@@ -87,8 +89,46 @@ const handleMsg = (e: MessageEvent<IframeMsg>) => {
 
   if (msgType === getEnvAreaMsgType(EnvAreaMsgType.PreviewArea)) {
     currentAreaData.value = areaData as RegionsPointsItem;
+  } else if (
+    msgType === getEnvAreaMsgType(EnvAreaMsgType.HighlightCanvasMonitorPoint)
+  ) {
+    highlightMonitorPoint(e.data.monitorPointId);
   }
 };
+
+const highlightMonitorPoint = (id: number) => {
+  meta2d.data().pens.forEach((item) => {
+    if (item.name !== monitorPointData.name) {
+      return;
+    }
+
+    const monitorPointId = (item as MonitorPointPen).monitorPointInfo.id;
+
+    meta2d.setValue(
+      {
+        id: item.id,
+        monitorPointHighlighted: monitorPointId === id,
+      },
+      {
+        render: false,
+      }
+    );
+  });
+
+  meta2d.render();
+};
+
+const highlightEnvMonitorPoint = ({ pen }: { pen: MonitorPointPen }) => {
+  const monitorPointId = pen.monitorPointInfo.id
+  highlightMonitorPoint(monitorPointId)
+
+  const msg: IframeMsg = {
+    msgType: getEnvAreaMsgType(EnvAreaMsgType.HighlightEnvMonitorPoint),
+    monitorPointId
+  };
+
+  window.parent.postMessage(msg, "*");
+}
 </script>
 
 <template>

src/views/EnvArea/pens/monitorPoint.ts

@@ -1,13 +1,14 @@
-import { getFont, Pen } from "@meta2d/core";
+import { EventAction, getFont, Pen } from "@meta2d/core";
 import { MonitoringPointData } from "@/types";
 
 const isPointNormal = (point: MonitoringPointData) => {
   const { temperature, humidity } = point;
-  return temperature !== null && humidity !== null
-}
+  return temperature !== null && humidity !== null;
+};
 
 export interface MonitorPointPen extends Pen {
-  monitorPointInfo: MonitoringPointData
+  monitorPointInfo: MonitoringPointData;
+  monitorPointHighlighted?: boolean;
 }
 
 export function monitorPoint(
@@ -26,6 +27,14 @@ export function monitorPoint(
   const iconColor = !isLock || isNormal ? "103, 194, 58" : "245, 108, 108"; // 正常状态 - 绿色、异常状态 - 红色
 
   // 绘制三个同心圆
+  // 选中监测点时绘制背景圆，用于高亮
+  if (pen.monitorPointHighlighted) {
+    ctx.beginPath();
+    ctx.arc(iconX, iconY, 40, 0, Math.PI * 2);
+    ctx.fillStyle = `rgba(${iconColor}, 0.3)`;
+    ctx.fill();
+  }
+
   // 最大圆（直径24）
   ctx.beginPath();
   ctx.arc(iconX, iconY, 12, 0, Math.PI * 2);
@@ -67,8 +76,15 @@ export function monitorPoint(
   ctx.restore();
 }
 
-export const monitorPointData = {
+export const monitorPointData: Pen = {
   name: "monitorPoint",
   width: 214,
   height: 56,
+  events: [
+    {
+      name: "click",
+      action: EventAction.Emit,
+      value: "highlightMonitorPoint",
+    },
+  ],
 };