feat(views): 适配暖通可视化编辑器及预览组件

src/views/Index.vue

@@ -25,11 +25,30 @@ import PensProps from './components/PensProps.vue';
 import FitProps from './components/FitProps.vue';
 
 import { useSelection, SelectionMode } from '@/services/selections';
-import {onMounted} from "vue";
+import { onMounted, onUnmounted } from "vue";
+import { IframeMsg } from '@/types';
+import { getVisual2DMsgType, Visual2DMsgType } from '.';
 
 onMounted(()=>{
   selections.mode = SelectionMode.File
+
+  window.addEventListener("message", handleMsg);
+
+  const msg: IframeMsg = {
+    msgType: getVisual2DMsgType(Visual2DMsgType.EditLoaded),
+  };
+
+  window.parent.postMessage(msg, "*");
 })
+
+onUnmounted(() => {
+  window.removeEventListener("message", handleMsg);
+});
+
+const handleMsg = (e: MessageEvent<IframeMsg>) => {
+  // const { msgType } = e.data;
+};
+
 const { selections } = useSelection();
 </script>
 

src/views/Preview.vue

@@ -14,6 +14,8 @@ import { Meta2d, Options, Pen } from '@meta2d/core';
 import { registerBasicDiagram } from '@/services/register';
 import { cdn, getLe5leV,getComponents } from '@/services/api';
 import { getDownloadList, getPayList,getFrameDownloadList, Frame} from '@/services/download';
+import { IframeMsg } from '@/types';
+import { getVisual2DMsgType, Visual2DMsgType } from '.';
 const route = useRoute();
 
 const meta2dDom = ref('');
@@ -51,10 +53,30 @@ onMounted(() => {
   }
   open();
   meta2d.on('opened', opened);
+  window.addEventListener('click', handlePreviewClick)
+  window.addEventListener('message', handleMsg);
   window.addEventListener('message', dealWithMessage);
   window.addEventListener('resize', viewResize);
+
+  const msg: IframeMsg = {
+    msgType: getVisual2DMsgType(Visual2DMsgType.PreviewLoaded),
+  };
+
+  window.parent.postMessage(msg, "*");
 });
 
+const handleMsg = (e: MessageEvent<IframeMsg>) => {
+  // const { msgType } = e.data;
+};
+
+const handlePreviewClick = () => {
+  const msg: IframeMsg = {
+    msgType: getVisual2DMsgType(Visual2DMsgType.PreviewClicked),
+  };
+
+  window.parent.postMessage(msg, "*");
+}
+
 let timer:any;
 const viewResize = ()=>{
   clearTimeout(timer);
@@ -118,6 +140,9 @@ const open = async () => {
       ret = await getLe5leV(route.query.id + '',undefined , route.query.historyId as string);
     }
     if(ret && ret.data){
+      if(!ret.data.pens){
+        ret.data.pens = [];
+      }
       if(!ret.data.background){
         ret.data.background = '#1e2430';
       }
@@ -128,7 +153,10 @@ const open = async () => {
       if(!ret.data.width){ret.data.width= 1920};
       if(!ret.data.height){ret.data.height= 1080};
       meta2d.open(ret.data);
-      getRealTimeData()
+
+      if (meta2d.store.data.dataPoints.length) {
+        getRealTimeData()
+      }
     }
   } else {
     let data: any = await localforage.getItem(localStorageName);
@@ -242,6 +270,8 @@ onUnmounted(() => {
     meta2d.off('opened', opened);
     meta2d.destroy();
   }
+  window.removeEventListener('click', handlePreviewClick)
+  window.removeEventListener('message', handleMsg);
   window.removeEventListener('message', dealWithMessage);
   window.removeEventListener('resize', viewResize);
 });

src/views/components/View.vue

@@ -1065,10 +1065,15 @@ const open = async (flag: boolean = false) => {
     }
     if (ret) {
       if (!(ret.data.pens && ret.data.pens.length)) {
-        //获取不到pen说明是parse svg
-        MessagePlugin.warning($t('解析的svg图元不允许编辑！'));
-        newFile();
-        return;
+        if (route.query.moduleType) {
+          // 存在模板类型时表明是在编辑暖通的组态或者大屏
+          ret.data.pens = [];
+        } else {
+          //获取不到pen说明是parse svg
+          MessagePlugin.warning($t('解析的svg图元不允许编辑！'));
+          newFile();
+          return;
+        }
       }
       ret.data.id = ret.id || route.query.id;;
       ret.data.folder = ret.folder;

src/views/index.ts

@@ -0,0 +1,19 @@
+/**
+ * 实时监测和大屏等模块与其可视化 Iframe 内嵌网页通信的消息前缀
+ */
+export const visual2DMsgPrefix = 'hvac-visual-2d';
+
+/**
+ * 实时监测和大屏模块与其可视化 Iframe 内嵌网页通信的消息类型
+ */
+export const enum Visual2DMsgType {
+  EditLoaded = 'edit-loaded',
+  CloseEditor = 'close-editor',
+  SendDeviceData = 'send-device-data',
+  PreviewLoaded = 'preview-loaded',
+  PreviewClicked = 'preview-clicked',
+}
+
+export const getVisual2DMsgType = (type: Visual2DMsgType) => {
+  return visual2DMsgPrefix + '-' + type;
+};