Merge branch 'feature-creative-center' into uat

src/router/index.js

@@ -398,6 +398,12 @@ const constantRoutes = [
       }
     ]
   },
+  {
+    path: "/SceneSurveyViewerPage",
+    name: "SceneSurveyViewerPage",
+    component: () => import(/* webpackChunkName: 'SceneSurveyViewerPage' */  "../views/planetDesign/SceneSurveyViewerPage/Index.vue")
+  },
+
   // 下载中心
   // {
   //   path: "/downloadCenter",

src/views/planetDesign/Design/components/config/Viewer3D/SceneSurveyViewer.vue

@@ -1,92 +1,72 @@
 <template>
-  <div class="container-viewer-1-"></div>
+  <div style="width: 100%; height: 100%; overflow: hidden;">
+    <iframe :key="key" ref="targetFrame" src="/#/SceneSurveyViewerPage" frameborder="0" width="100%" height="100%"></iframe>
+  </div>
 </template>
 
 <script>
-import { SurveyViewer } from "./shelves.module";
 
 export default {
   props: ["surveyId", "shopData", "page", "sceneAction", "elCart", "defaultWare", "isLocked"],
 
+  data(){
+    return {
+      key: 0,
+      handler: (e) => {
+        var data = null;
+        try{
+          data = JSON.parse(e.data);
+        }
+        catch(e){}
+        // 初始化
+        if (data.command == "getData") {
+          this.$refs.targetFrame.contentWindow.postMessage(JSON.stringify({
+            command: "setData",
+            data: this
+          }), '*');
+          return;
+        }
+
+        if (data.command){
+          this.$emit(data.command, data.data);
+          return;
+        }
+      }
+    };
+  },
+  beforeUnmount(){
+    window.removeEventListener('message', this.handler);
+  },
   mounted() {
-    this.$nextTick(() => this.tryInitView());
-  },
-  beforeUnmount: function () {
-    if (this.viewer_) {
-      this.viewer_.dispose();
-      this.viewer_ = null;
-    }
-  },
-
-  methods: {
-    tryInitView() {
-      if (!this.viewer_) {
-        this.viewer_ = new SurveyViewer({
-          container: this.$el,
-          surveyId: this.surveyId,
-          shopData: this.shopData,
-        });
-        this.viewer_.on("loadingCompletion", () => {
-          this.$emit("onLoadingCompletion");
-        });
-        this.viewer_.on("hold", (d) => {
-          this.$emit("onHold", d);
-        });
-        this.viewer_.on("from_scene_hold_to_shelf", () => {
-          this.$emit("onFromSceneHoldToShelf");
-        });
-        this.viewer_.on("behavior_flush", q1 => {
-          this.$emit("onBehaviorFlush", q1);
-        });
-
-        this.viewer_.startup();
-      }
-      return this.viewer_;
-    },
+    this.key = new Date().getTime();
+    window.addEventListener('message', this.handler);
   },
 
   watch: {
     page(newVal, oldVal) {
-      // console.log('page ........', newVal, oldVal)
-      if (this.viewer_) {
-        this.viewer_.arrange(newVal).then(() => {
-          this.$emit("onPageCompletion");
-          
-          if(!this.defaultWare) return;
-
-          // #20221018
-          this.viewer_.hold({
-              wareId: this.defaultWare?.planetid,
-              keepHold: this.isLocked,
-          })
-        });
+      this.$refs.targetFrame.contentWindow.postMessage(JSON.stringify({
+        command: "setData",
+        data: {
+          page: newVal
         }
+      }), '*');
     },
     sceneAction(newVal, oldVal) {
-      if (this.viewer_ && newVal) {
-        this.viewer_.action(newVal.action);
+      this.$refs.targetFrame.contentWindow.postMessage(JSON.stringify({
+        command: "setData",
+        data: {
+          sceneAction: newVal
         }
+      }), '*');
     },
     elCart(newVal, oldVal) {
-      if (this.viewer_ && newVal) {
-        this.viewer_.elCart = newVal;
+      this.$refs.targetFrame.contentWindow.postMessage(JSON.stringify({
+        command: "setData",
+        data: {
+          elCart: newVal
         }
+      }), '*');
     },
   },
 };
 </script>
-
-<style scoped>
-div.container-viewer-1- {
-  width: 100%;
-  height: 100%;
-}
-
-div.container-viewer-1-:focus {
-  outline: none;
-}
-
-div.container-viewer-1- >>> canvas:focus {
-  outline: none;
-}
-</style>

src/views/planetDesign/Design/components/config/Viewer3D/SceneSurveyViewerBak.vue

@@ -0,0 +1,92 @@
+<template>
+  <div class="container-viewer-1-"></div>
+</template>
+
+<script>
+import { SurveyViewer } from "./shelves.module";
+
+export default {
+  props: ["surveyId", "shopData", "page", "sceneAction", "elCart", "defaultWare", "isLocked"],
+
+  mounted() {
+    this.$nextTick(() => this.tryInitView());
+  },
+  beforeUnmount: function () {
+    if (this.viewer_) {
+      this.viewer_.dispose();
+      this.viewer_ = null;
+    }
+  },
+
+  methods: {
+    tryInitView() {
+      if (!this.viewer_) {
+        this.viewer_ = new SurveyViewer({
+          container: this.$el,
+          surveyId: this.surveyId,
+          shopData: this.shopData,
+        });
+        this.viewer_.on("loadingCompletion", () => {
+          this.$emit("onLoadingCompletion");
+        });
+        this.viewer_.on("hold", (d) => {
+          this.$emit("onHold", d);
+        });
+        this.viewer_.on("from_scene_hold_to_shelf", () => {
+          this.$emit("onFromSceneHoldToShelf");
+        });
+        this.viewer_.on("behavior_flush", q1 => {
+          this.$emit("onBehaviorFlush", q1);
+        });
+
+        this.viewer_.startup();
+      }
+      return this.viewer_;
+    },
+  },
+
+  watch: {
+    page(newVal, oldVal) {
+      // console.log('page ........', newVal, oldVal)
+      if (this.viewer_) {
+        this.viewer_.arrange(newVal).then(() => {
+          this.$emit("onPageCompletion");
+          
+          if(!this.defaultWare) return;
+
+          // #20221018
+          this.viewer_.hold({
+              wareId: this.defaultWare?.planetid,
+              keepHold: this.isLocked,
+          })
+        });
+      }
+    },
+    sceneAction(newVal, oldVal) {
+      if (this.viewer_ && newVal) {
+        this.viewer_.action(newVal.action);
+      }
+    },
+    elCart(newVal, oldVal) {
+      if (this.viewer_ && newVal) {
+        this.viewer_.elCart = newVal;
+      }
+    },
+  },
+};
+</script>
+
+<style scoped>
+div.container-viewer-1- {
+  width: 100%;
+  height: 100%;
+}
+
+div.container-viewer-1-:focus {
+  outline: none;
+}
+
+div.container-viewer-1- >>> canvas:focus {
+  outline: none;
+}
+</style>

src/views/planetDesign/SceneSurveyViewerPage/Index.vue

@@ -0,0 +1,156 @@
+<template>
+  <div class="base">
+    <div ref="target" class="container-viewer-1-"></div>
+    <div ref="elCart" style="position: absolute; right: 100px; bottom: 100px;"></div>
+  </div>
+</template>
+
+<script>
+import { SurveyViewer } from "./shelves.module";
+
+export default {
+  // props: ["surveyId", "shopData", "page", "sceneAction", "elCart", "defaultWare", "isLocked"],
+
+  data(){
+    return {
+      surveyId: null,
+      shopData: null,
+      page: null,
+      sceneAction: null,
+      elCart: null,
+      defaultWare: null,
+      isLocked: null,
+    };
+  },
+  mounted() {
+
+    window.addEventListener('message', (e) => {
+      var data = null;
+      try{
+        data = JSON.parse(e.data);
+      }
+      catch(e){}
+      if (data.command == "setData") {
+        Object.keys(data.data).forEach(key => {
+          this[key] = data.data[key];
+        })
+        this.$nextTick(() => this.tryInitView());
+        return;
+      }
+    });
+
+    window.parent.postMessage(JSON.stringify({
+      command: "getData",
+    }), '*');
+
+  },
+  // beforeUnmount: function () {
+  //   if (this.viewer_) {
+  //     this.viewer_.dispose();
+  //     this.viewer_ = null;
+  //   }
+  // },
+
+  methods: {
+    tryInitView() {
+      if (!this.viewer_) {
+        this.viewer_ = new SurveyViewer({
+          container: this.$refs.target,
+          surveyId: this.surveyId,
+          shopData: this.shopData,
+        });
+        this.viewer_.on("loadingCompletion", () => {
+          // this.$emit("onLoadingCompletion");
+          window.parent.postMessage(JSON.stringify({
+            command: "onLoadingCompletion",
+          }), '*');
+        });
+        this.viewer_.on("hold", (d) => {
+          // this.$emit("onHold", d);
+          window.parent.postMessage(JSON.stringify({
+            command: "onHold",
+            data: d
+          }), '*');
+        });
+        this.viewer_.on("from_scene_hold_to_shelf", () => {
+          // this.$emit("onFromSceneHoldToShelf");
+          window.parent.postMessage(JSON.stringify({
+            command: "onFromSceneHoldToShelf",
+          }), '*');
+        });
+        this.viewer_.on("behavior_flush", q1 => {
+          // this.$emit("onBehaviorFlush", q1);
+          window.parent.postMessage(JSON.stringify({
+            command: "onBehaviorFlush",
+            data: q1
+          }), '*');
+        });
+
+        this.viewer_.startup();
+      }
+      return this.viewer_;
+    },
+  },
+
+  watch: {
+    page(newVal, oldVal) {
+      // console.log('page ........', newVal, oldVal)
+      if (this.viewer_) {
+        this.viewer_.arrange(newVal).then(() => {
+          // this.$emit("onPageCompletion");
+          window.parent.postMessage(JSON.stringify({
+            command: "onPageCompletion",
+          }), '*');
+          
+          if(!this.defaultWare) return;
+
+          // #20221018
+          this.viewer_.hold({
+              wareId: this.defaultWare?.planetid,
+              keepHold: this.isLocked,
+          })
+        });
+      }
+    },
+    sceneAction(newVal, oldVal) {
+      if (this.viewer_ && newVal) {
+        this.viewer_.action(newVal.action);
+      }
+    },
+    elCart(newVal, oldVal) {
+      if (this.viewer_ && newVal) {
+        // this.viewer_.elCart = newVal;
+        this.viewer_.elCart = this.$refs.elCart;
+      }
+    },
+  },
+};
+</script>
+
+<style>
+html,body{
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+}
+</style>
+
+<style scoped>
+.base{
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+div.container-viewer-1- {
+  width: 100%;
+  height: 100%;
+}
+
+div.container-viewer-1-:focus {
+  outline: none;
+}
+
+div.container-viewer-1- >>> canvas:focus {
+  outline: none;
+}
+</style>