feat(views): 环境监控区域编辑器支持修改画布内容

src/types/index.ts

@@ -1434,7 +1434,8 @@ export interface MonitoringForm {
 export interface RegionQuery {
   id?: number;
   devGroupId: number;
-  regionName: string;
+  regionName?: string;
+  canvas?: string;
 }
 
 export interface GroupRegions {

src/views/env-monitor/AreaEditor.vue

@@ -14,6 +14,7 @@ const props = defineProps<Props>();
 
 const emit = defineEmits<{
   openOutdoorDrawer: [];
+  saveAreaCanvas: [canvas: string];
 }>();
 
 const { visible, showView, hideView } = useViewVisible();
@@ -43,7 +44,7 @@ const handleIframeMsg = (e: MessageEvent<IframeMsg>) => {
   } else if (msgType === getEnvAreaMsgType(EnvAreaMsgType.EditOutdoorTempHumidity)) {
     emit('openOutdoorDrawer');
   } else if (msgType === getEnvAreaMsgType(EnvAreaMsgType.SubmitEditArea)) {
-    console.log('submit');
+    emit('saveAreaCanvas', e.data.canvas);
   } else if (msgType === getEnvAreaMsgType(EnvAreaMsgType.CancelEditArea)) {
     hideView();
   }

src/views/env-monitor/EnvMonitor.vue

@@ -548,6 +548,26 @@ const areaEditorRef = useTemplateRef('areaEditor');
 const currentAreaData = computed(() => {
   return monitoringList.value.find((item) => item.id === selectId.value);
 });
+
+const saveAreaCanvas = (canvas: string) => {
+  handleRequest(async () => {
+    if (gradeTwo.value) {
+      await regionUpdate({
+        id: selectId.value,
+        devGroupId: gradeTwo.value,
+        canvas,
+      });
+
+      const currentAreaData = monitoringList.value.find((item) => item.id === selectId.value);
+
+      if (currentAreaData) {
+        currentAreaData.canvas = canvas;
+      }
+
+      areaEditorRef.value?.hideView();
+    }
+  });
+};
 </script>
 
 <template>
@@ -995,7 +1015,12 @@ const currentAreaData = computed(() => {
         <AButton type="primary">{{ $t('common.confirm') }}</AButton>
       </AFlex>
     </AModal>
-    <AreaEditor ref="areaEditor" :area-data="currentAreaData" @open-outdoor-drawer="addOutdoorDrawer" />
+    <AreaEditor
+      ref="areaEditor"
+      :area-data="currentAreaData"
+      @open-outdoor-drawer="addOutdoorDrawer"
+      @save-area-canvas="saveAreaCanvas"
+    />
   </div>
 </template>