perf(views): 优化“监测点”控件逻辑

src/views/EnvArea/Graphics.vue

@@ -9,8 +9,22 @@ type AssetsType = "space" | "monitor";
 
 const activeAssets = ref<AssetsType>("space");
 const monitorPoints = ref([
-  { name: "3F-R1", disabled: true },
-  { name: "3F-R2", data: monitorPointData },
+  {
+    name: "3F-办公室-01",
+    disabled: false,
+    data: {
+      ...monitorPointData,
+      pointName: "3F-办公室-01",
+    },
+  },
+  {
+    name: "3F-办公室-02",
+    disabled: false,
+    data: {
+      ...monitorPointData,
+      pointName: "3F-办公室-02",
+    },
+  },
 ]);
 
 const roomList = [

src/views/EnvArea/View.vue

@@ -17,6 +17,7 @@ const meta2dOptions: Options = {
 
 onMounted(() => {
   new Meta2d("env-area-meta2d", meta2dOptions);
+  meta2d.lock(0)
   registerAreaPens()
 });
 

src/views/EnvArea/pens/monitorPoint.ts

@@ -1,14 +1,25 @@
 import { getFont, Pen } from "@meta2d/core";
 
-export function monitorPoint(ctx: CanvasRenderingContext2D, pen: Pen): void {
+export interface MonitorPointPen extends Pen {
+  pointName?: string;
+  pointTemperature?: string;
+  pointHumidity?: string;
+}
+
+export function monitorPoint(
+  ctx: CanvasRenderingContext2D,
+  pen: MonitorPointPen
+): void {
   const { x, y, width, height } = pen.calculative.worldRect;
+  const { pointName, pointTemperature, pointHumidity } = pen;
+  const isLock = meta2d.data().locked;
   const isNormal = true;
   ctx.save();
 
   // 状态图标中心坐标
   const iconX = x + width / 2;
   const iconY = y + height / 2;
-  const iconColor = isNormal ? "103, 194, 58" : "245, 108, 108"; // 正常状态 - 绿色、异常状态 - 红色
+  const iconColor = !isLock || isNormal ? "103, 194, 58" : "245, 108, 108"; // 正常状态 - 绿色、异常状态 - 红色
 
   // 绘制三个同心圆
   // 最大圆（直径24）
@@ -35,20 +46,27 @@ export function monitorPoint(ctx: CanvasRenderingContext2D, pen: Pen): void {
     lineHeight: 22,
   });
 
-  // 绘制右侧文字
   ctx.fillStyle = "rgba(0, 0, 0, 0.65)";
   ctx.textBaseline = "middle";
-  ctx.fillText("3F-办公室-01", iconX + 25, iconY);
+
+  // 绘制右侧文字
+  if (!isLock) {
+    ctx.fillText(pointName, iconX + 25, iconY);
+  }
 
   // 绘制下方文字
-  ctx.textAlign = "center";
-  ctx.fillText("22.9℃｜60.6%", iconX, iconY + 35);
+  if (isLock && !isNormal) {
+    ctx.textAlign = "center";
+    ctx.fillText(`${pointTemperature}℃｜${pointHumidity}%`, iconX, iconY + 35);
+  }
 
   ctx.restore();
 }
 
-export const monitorPointData = {
+export const monitorPointData: MonitorPointPen = {
   name: "monitorPoint",
   width: 214,
   height: 140,
+  pointTemperature: "-",
+  pointHumidity: "-",
 };