feat(views): 环境区域编辑器支持获取区域数据及展示监测点列表

src/services/monitor-point-pen.ts

@@ -4,7 +4,7 @@ import { computed, ref } from "vue";
 const monitorPointPens = ref<MonitorPointPen[]>([]);
 
 const monitorPointIds = computed<number[]>(() => {
-  let ids = monitorPointPens.value.map((item) => item.pointId);
+  let ids = monitorPointPens.value.map((item) => item.monitorPointInfo.id);
   return [...new Set(ids)];
 });
 

src/types/index.ts

@@ -4,4 +4,48 @@ export interface IconObject {
   name: IconfontIcon;
   size?: number;
   color?: string;
+}
+
+export interface IframeMsg {
+  msgType: string;
+  [key: string]: any;
+}
+
+export interface RegionsPointsItem {
+  id: number;
+  orgId: number;
+  devGroupId: number;
+  regionName: string;
+  canvas: string;
+  outsideDevGroupId: number;
+  outsideDevId: number;
+  outsideTempParamCode: string;
+  outsideHumidityParamCode: string;
+  outsideEnthalpyParamCode: string;
+  outSideTemperature: string;
+  outSideHumidity: string;
+  outsideEnthalpy: string;
+  avgTemperature: string;
+  avgHumidity: string;
+  points: MonitoringPointData[];
+  name?: string;
+}
+
+export interface MonitoringPointData {
+  id: number;
+  name: string;
+  status: number;
+  temperature: string;
+  humidity: string;
+  tempUpper: number;
+  tempLower: number;
+  humidityUpper: number;
+  humidityLower: number;
+  tempData: CurvedData[];
+  humidityData: CurvedData[];
+}
+
+export interface CurvedData {
+  time: string;
+  value: number;
 }

src/views/EnvArea/Graphics.vue

@@ -1,43 +1,45 @@
 <script setup lang="ts">
-import { computed, onMounted, onUnmounted, ref, watch } from "vue";
+import { computed, onMounted, onUnmounted, ref } from "vue";
 import { deepClone } from "@meta2d/core";
 import { monitorRoomData } from "./pens/monitorRoom";
 import { monitorNoRoomData } from "./pens/monitorNoRoom";
-import { monitorPointData } from "./pens/monitorPoint";
+import { monitorPointData, MonitorPointPen } from "./pens/monitorPoint";
 import { useMonitorPointPen } from "@/services/monitor-point-pen";
+import { RegionsPointsItem } from "@/types";
 
 type AssetsType = "space" | "monitor";
 
+interface Props {
+  areaData?: RegionsPointsItem;
+}
+
+const props = defineProps<Props>();
+
 const activeAssets = ref<AssetsType>("space");
-const monitorPoints = ref([
-  {
-    id: 1,
-    name: "3F-办公室-01",
-    disabled: false,
-    data: {
-      ...monitorPointData,
-      pointId: 1,
-      pointName: "3F-办公室-01",
-    },
-  },
-  {
-    id: 2,
-    name: "3F-办公室-02",
-    disabled: false,
-    data: {
-      ...monitorPointData,
-      pointId: 2,
-      pointName: "3F-办公室-02",
-    },
-  },
-]);
+
+interface MonitorPointItem {
+  id: number;
+  name: string;
+  disabled: boolean;
+  data: MonitorPointPen;
+}
 
 const { monitorPointIds } = useMonitorPointPen();
 
-watch(monitorPointIds, () => {
-  monitorPoints.value.forEach(item => {
-    item.disabled = monitorPointIds.value.includes(item.id)
-  });
+const monitorPoints = computed<MonitorPointItem[]>(() => {
+  if (!props.areaData) {
+    return [];
+  }
+
+  return props.areaData.points.map<MonitorPointItem>((item) => ({
+    id: item.id,
+    name: item.name,
+    disabled: monitorPointIds.value.includes(item.id),
+    data: {
+      ...monitorPointData,
+      monitorPointInfo: item,
+    },
+  }));
 });
 
 const roomList = [

src/views/EnvArea/Index.vue

@@ -1,12 +1,27 @@
 <script setup lang="ts">
+import { onMounted, ref } from "vue";
 import Graphics from "./Graphics.vue";
 import View from "./View.vue";
+import { IframeMsg, RegionsPointsItem } from "@/types";
+import { EnvAreaMsgType, getEnvAreaMsgType } from ".";
+
+const currentAreaData = ref<RegionsPointsItem>();
+
+onMounted(() => {
+  window.addEventListener("message", (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 />
+      <Graphics :area-data="currentAreaData"/>
       <View />
     </div>
   </div>

src/views/EnvArea/View.vue

@@ -6,7 +6,7 @@ import SvgIcon from "../components/SvgIcon.vue";
 import { registerAreaPens } from "./pens/register";
 import { useSelection } from "@/services/selections";
 import { useMonitorPointPen } from "@/services/monitor-point-pen";
-import { monitorPointData } from "./pens/monitorPoint";
+import { monitorPointData, MonitorPointPen } from "./pens/monitorPoint";
 
 const { select } = useSelection();
 const { setMonitorPointPens } = useMonitorPointPen();
@@ -86,7 +86,7 @@ const patchFlag = () => {
     (item) => item.name === monitorPointData.name
   );
   
-  setMonitorPointPens(monitorPointPens);
+  setMonitorPointPens(monitorPointPens as MonitorPointPen[]);
 };
 
 const fitFlag = ref(false);

src/views/EnvArea/index.ts

@@ -0,0 +1,17 @@
+/**
+ * 环境监控模块与其区域 Iframe 内嵌网页通信的消息前缀
+ */
+export const envAreaMsgPrefix = 'hvac-env-monitor';
+
+/**
+ * 环境监控模块与其区域 Iframe 内嵌网页通信的消息类型
+ */
+export const enum EnvAreaMsgType {
+  EditArea = 'edit-area',
+  SubmitEditArea = 'submit-edit-area',
+  CancelEditArea = 'cancel-edit-area',
+}
+
+export const getEnvAreaMsgType = (type: EnvAreaMsgType) => {
+  return envAreaMsgPrefix + '-' + type;
+};

src/views/EnvArea/pens/monitorPoint.ts

@@ -1,10 +1,8 @@
 import { getFont, Pen } from "@meta2d/core";
+import { MonitoringPointData } from "@/types";
 
 export interface MonitorPointPen extends Pen {
-  pointId?: number,
-  pointName?: string;
-  pointTemperature?: string;
-  pointHumidity?: string;
+  monitorPointInfo: MonitoringPointData
 }
 
 export function monitorPoint(
@@ -12,7 +10,7 @@ export function monitorPoint(
   pen: MonitorPointPen
 ): void {
   const { x, y, width, height } = pen.calculative.worldRect;
-  const { pointName, pointTemperature, pointHumidity } = pen;
+  const { name, temperature, humidity } = pen.monitorPointInfo;
   const isLock = meta2d.data().locked;
   const isNormal = true;
   ctx.save();
@@ -52,22 +50,20 @@ export function monitorPoint(
 
   // 绘制右侧文字
   if (!isLock) {
-    ctx.fillText(pointName, iconX + 25, iconY);
+    ctx.fillText(name, iconX + 25, iconY);
   }
 
   // 绘制下方文字
   if (isLock && !isNormal) {
     ctx.textAlign = "center";
-    ctx.fillText(`${pointTemperature}℃｜${pointHumidity}%`, iconX, iconY + 35);
+    ctx.fillText(`${temperature}℃｜${humidity}%`, iconX, iconY + 35);
   }
 
   ctx.restore();
 }
 
-export const monitorPointData: MonitorPointPen = {
+export const monitorPointData = {
   name: "monitorPoint",
   width: 214,
   height: 140,
-  pointTemperature: "-",
-  pointHumidity: "-",
 };