添加智能制图详情页面

src/pages/index.vue

@@ -14,6 +14,7 @@ export default {
       '/fwzc/fwcs',
       '/app_build',
       '/intelligent_drawing',
+      '/intelligent_details',
       '/search_engine'
     ]
   }),

src/pages/workbench/intelligent_details.vue

+<template>
+  <div class="intelligent_details-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_details_iframe" width="100%" height="100%" scrolling="no" :src='itemUrl' frameborder="0"></iframe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      originUrl:'https://apaasgis.wodcloud.com/portal/apaasplat/viewer/item.html'
+    };
+  },
+  computed:{
+    itemUrl:function(){
+      let _self = this;
+      if(_self.$route.name == 'intelligent_details'){
+        return `${_self.originUrl}?id=${_self.$route.query.id}&activeMenu=dataGallery`
+      }
+    }
+  },
+  mounted() {
+    window.addEventListener('message',event =>{
+      let data = event.data;
+      if (data.cmd == 'mapmsg'){
+        console.log(data);
+      }
+    })
+  },
+  methods: {},
+};
+
+</script>
+
+<style scoped>
+.intelligent_details-container {
+  margin: -157px 40px 20px;
+}
+.intelligent_details-container .main-container {
+  height: calc(100vh - 150px - 43px);
+  border-radius: 12px;
+  background-color: #fff;
+  padding: 20px;
+}
+</style>
+
+<style>
+.intelligent_details-container .apass_breadcrumb {
+  padding: 0 20px;
+}
+.intelligent_details-container .apass_breadcrumb > .el-breadcrumb .el-breadcrumb__inner {
+  color: #626de9;
+}
+.intelligent_details-container
+  .apass_breadcrumb
+  > .el-breadcrumb
+  .el-breadcrumb__item:last-child
+  .el-breadcrumb__inner {
+  color: #b4c0f5;
+}
+</style>

src/pages/workbench/intelligent_drawing.vue

@@ -8,7 +8,7 @@
     </div>
 
     <div class="main-container">
-      <iframe width="100%" height="100%" scrolling="no" src="https://apaasgis.wodcloud.com/portal/apaasplat/viewer/mapViewer.html" frameborder="0"></iframe>
+      <iframe ref="intelligent_drawing_iframe" width="100%" height="100%" scrolling="no" src="https://apaasgis.wodcloud.com/portal/apaasplat/viewer/mapViewer.html" frameborder="0"></iframe>
     </div>
   </div>
 </template>
@@ -18,7 +18,20 @@ export default {
   data() {
     return {};
   },
-  mounted() {},
+  mounted() {
+    window.addEventListener('message',event =>{
+      let data = event.data;
+      console.log(data);
+      if (data.cmd == 'mapviewmsg'){
+        this.$router.push({
+          name: "intelligent_details",
+          query: {
+            id: data.params.id
+          }
+        });
+      }
+    })
+  },
   methods: {},
 };
 </script>
@@ -27,11 +40,11 @@ export default {
 .intelligent_drawing-container {
   margin: -157px 40px 20px;
 }
-.main-container {
+.intelligent_drawing-container .main-container {
   height: calc(100vh - 150px - 43px);
   border-radius: 12px;
   background-color: #fff;
-  padding: 30px;
+  padding: 20px;
 }
 </style>
 

src/router/index.js

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