智能制图分三页面

src/pages/index.vue

@@ -15,6 +15,7 @@ export default {
       '/app_build',
       '/intelligent_drawing',
       '/intelligent_details',
+      '/intelligent_appbuilder',
       '/search_engine'
     ]
   }),

src/pages/workbench/intelligent_appbuilder.vue

+<template>
+  <div class="intelligent_appbuilder-container">
+    <div class="apass_breadcrumb">
+      <el-breadcrumb separator="/">
+        <el-breadcrumb-item>在线组件工具</el-breadcrumb-item>
+        <el-breadcrumb-item>智能制图</el-breadcrumb-item>
+        <!-- <el-breadcrumb-item>资源详情</el-breadcrumb-item> -->
+      </el-breadcrumb>
+    </div>
+
+    <div class="main-container">
+      <iframe ref="intelligent_appbuilder_iframe" width="100%" height="100%" scrolling="no" :src='appbuilderUrl' frameborder="0"></iframe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      originUrl:'https://apaasgis.wodcloud.com/portal/apps/webappbuilder/index.html'
+    };
+  },
+  computed:{
+    appbuilderUrl(){
+      let _self = this;
+      if(_self.$route.name == 'intelligent_appbuilder'){
+        return `${_self.originUrl}?title=${_self.$route.query.title}&tags=${_self.$route.query.tags}&summary=${_self.$route.query.summary}&sharewithwebmap=${_self.$route.query.sharewithwebmap}&webmap=${_self.$route.query.webmap}`
+      }
+    },
+    getAppBuilderParams() {
+      return this.$store.state.appBuilderParams;
+    },
+  },
+  watch: {
+    getAppBuilderParams(newVal) {
+      console.log('智能制图应用程序参数'+newVal)
+    },
+  },
+  mounted() {
+    window.addEventListener('message',event =>{
+      let data = event.data;
+      // App Builder发布服务
+      if (data.cmd == 'appbuildermsg'){
+        console.log(data);
+        this.$store.commit("setAppBuilderParams", data.params);
+        this.$router.push(`/fwzc/fwcs`);
+      }
+    })
+  },
+  methods: {},
+};
+
+</script>
+
+<style scoped>
+.intelligent_appbuilder-container {
+  margin: -157px 40px 20px;
+}
+.intelligent_appbuilder-container .main-container {
+  height: calc(100vh - 150px - 43px);
+  border-radius: 12px;
+  background-color: #fff;
+  padding: 0px;
+}
+.intelligent_appbuilder-container .main-container iframe {
+  border-radius: 12px;
+}
+</style>
+
+<style>
+.intelligent_appbuilder-container .apass_breadcrumb {
+  padding: 0 20px;
+}
+.intelligent_appbuilder-container .apass_breadcrumb > .el-breadcrumb .el-breadcrumb__inner {
+  color: #626de9;
+}
+.intelligent_appbuilder-container
+  .apass_breadcrumb
+  > .el-breadcrumb
+  .el-breadcrumb__item:last-child
+  .el-breadcrumb__inner {
+  color: #b4c0f5;
+}
+</style>

src/pages/workbench/intelligent_details.vue

@@ -4,7 +4,7 @@
       <el-breadcrumb separator="/">
         <el-breadcrumb-item>在线组件工具</el-breadcrumb-item>
         <el-breadcrumb-item>智能制图</el-breadcrumb-item>
-        <el-breadcrumb-item>资源详情</el-breadcrumb-item>
+        <!-- <el-breadcrumb-item>资源详情</el-breadcrumb-item> -->
       </el-breadcrumb>
     </div>
 
@@ -25,7 +25,7 @@ export default {
     itemUrl:function(){
       let _self = this;
       if(_self.$route.name == 'intelligent_details'){
-        return `${_self.originUrl}?id=${_self.$route.query.id}&activeMenu=dataGallery`
+        return `${_self.originUrl}?id=${_self.$route.query.id}&activeMenu=${_self.$route.query.type}`
       }
     }
   },
@@ -50,7 +50,10 @@ export default {
   height: calc(100vh - 150px - 43px);
   border-radius: 12px;
   background-color: #fff;
-  padding: 20px;
+  padding: 0px;
+}
+.intelligent_details-container .main-container iframe {
+  border-radius: 12px;
 }
 </style>
 

src/pages/workbench/intelligent_drawing.vue

@@ -24,9 +24,6 @@ export default {
     getZnztParams() {
       return this.$store.state.znztParams;
     },
-    getAppBuilderParams() {
-      return this.$store.state.appBuilderParams;
-    },
     znztUrl(){
       return this.url+this.urlParams
     },
@@ -43,9 +40,6 @@ export default {
       this.urlParams = `?webmap=${newVal.id}`
       console.log('智能制图参数'+newVal)
     },
-    getAppBuilderParams(newVal) {
-      console.log('智能制图应用程序参数'+newVal)
-    },
   },
   mounted() {
     window.addEventListener('message',event =>{
@@ -56,11 +50,31 @@ export default {
         this.$store.commit("setZnztParams", data.params);
         this.$router.push(`/fwzc/fwcs`);
       }
-      // App Builder发布服务
-      if (data.cmd == 'appbuildermsg'){
+      // App Builder页面 -- 新窗口打开
+      if (data.cmd == 'mapviewtoapp'){
         console.log(data);
-        this.$store.commit("setAppBuilderParams", data.params);
-        this.$router.push(`/fwzc/fwcs`);
+        let params = {
+          title: data.params.title,
+          tags: data.params.tags,
+          sharewithwebmap:data.params.shareWithWebMap,
+          webmap:data.params.id,
+          summary: data.params.summary,
+        };
+        let routeData = this.$router.resolve({
+          name: "intelligent_appbuilder",
+          query: params,
+        });
+        window.open(routeData.href, '_blank');
+        // this.$store.commit("setAppBuilderParams", data.params);
+      }
+      // 智能制图服务详情--新窗口打开
+      if (data.cmd == 'mapdetailmsg'){
+        console.log(data);
+        let routeData = this.$router.resolve({
+          name: "intelligent_details",
+          query: data.params,
+        });
+        window.open(routeData.href, '_blank');
       }
     })
   },

src/router/index.js

@@ -247,6 +247,11 @@ export default new Router({
           name: "intelligent_details",
           component: () => import("@/pages/workbench/intelligent_details"),
         }, // 智能制图--详情页面
+        {
+          path: "/intelligent_appbuilder",
+          name: "intelligent_appbuilder",
+          component: () => import("@/pages/workbench/intelligent_appbuilder"),
+        }, // 智能制图--应用程序页面
         {
           path: "/search_engine",
           name: "search_act",