ss

src/assets/scss/main-shuju.scss

@@ -5,6 +5,14 @@
 body {
 }
 
+.m-iframe {
+  position: relative;
+  width: 100vw;
+  height: calc(100vh - 55px);
+  margin: -10px;
+  z-index: 100;
+}
+
 /* Reset element-ui
 ------------------------------ */
 .g-bd {

src/router/index.js

@@ -298,12 +298,14 @@ router.beforeEach((to, from, next) => {
       // url: "visual/basicinfo/basicInfoMain",
       children: [
         {
-          url: "/visual/ai/index",
+          url: "https://epmet-dev.elinkservice.cn/epmet-oper-gov/#/",
+          // url: "/visual/ai/index",
           name: "AI安防",
           id: "5feawfwa111111efwa57",
         },
         {
-          url: "/visual/ai/renliu",
+          url: "http://www.baidu.com",
+          // url: "/visual/ai/renliu",
           name: "人流数据",
           id: "5fwaefwae222112fawef58",
         },
@@ -477,12 +479,33 @@ function fnAddDynamicMenuRoutes2(menuList = [], routes = []) {
       eval(s2)
     ); // URL支持{{ window.xxx }}占位符变量
     if (isURL(URL)) {
-      route["path"] = route["name"] = `i-${menuList[i].id}`;
+      if (menuList[i].children && menuList[i].children.length >= 1) {
-      route["meta"]["iframeURL"] = URL;
+        let item = menuList[i].children.find(
+          (subMenu) => subMenu.url == menuList[i].url
+        );
+        if (item) {
+          route["path"] = route["name"] = `i-${menuList[i].id}`;
+          route["redirect"] = `i-${item.id}`;
+        } else {
+          route["path"] = route["name"] = `i-${menuList[i].id}`;
+          route["meta"]["iframeURL"] = URL;
+        }
+      } else {
+        route["path"] = route["name"] = `i-${menuList[i].id}`;
+        route["meta"]["iframeURL"] = URL;
+      }
     } else {
       URL = URL.replace(/^\//, "").replace(/_/g, "-");
-      route["path"] = route["name"] = URL.replace(/\//g, "-");
+      if (URL.startsWith("unopen")) {
-      route["component"] = () => import(`@/views/modules/${URL}`);
+        route["path"] = route["name"] = URL.replace(/\//g, "-");
+        route["component"] = () => import(`@/views/modules/unopen`);
+      } else if (menuList[i].children && menuList[i].children.length >= 1) {
+        route["path"] = route["name"] = URL;
+        route["redirect"] = URL.replace(/\//g, "-");
+      } else {
+        route["path"] = route["name"] = URL.replace(/\//g, "-");
+        route["component"] = () => import(`@/views/modules/${URL}`);
+      }
     }
     routes.push(route);
   }

src/views/main-shuju/main-content.vue

@@ -1,98 +1,137 @@
 <template>
   <main :class="['aui-content']">
-    <!-- 其他方式, 展示内容 -->
+    <!-- tab展示内容 -->
     <template>
-      <keep-alive>
+      <template v-if="tabIsIframe($router.currentRoute.meta.iframeURL)">
-        <router-view />
+        <iframe
+          :src="
+            $router.currentRoute.meta.iframeURL +
+            '?token=' +
+            token +
+            '&customerId=' +
+            customerId
+          "
+          ref="iframes"
+          class="m-iframe"
+          id="iframes"
+          width="100%"
+          height="100%"
+          style=""
+          frameborder="0"
+          scrolling="yes"
+        ></iframe>
+      </template>
+      <keep-alive v-else>
+        <router-view @changeCustomerName="changeCustomerName" />
       </keep-alive>
     </template>
   </main>
 </template>
 
 <script>
-import { isURL } from '@/utils/validate'
+import { isURL } from "@/utils/validate";
-import Cookie from 'js-cookie'
+import Cookie from "js-cookie";
 export default {
-  data () {
+  data() {
     return {
-      iframeUrl: '',
+      iframeUrl: "",
-      token: '',
+      token: "",
-      customerId: ''
+      customerId: "",
-    }
+    };
   },
-  created () {
+  created() {
     // this.$nextTick(() => {
     //   this.sendMessage()
     // })
-    this.token = localStorage.getItem('token')
+    this.token = localStorage.getItem("token");
-    this.customerId = localStorage.getItem('customerId')
+    this.customerId = localStorage.getItem("customerId");
   },
   methods: {
-    changeCustomerName (customerName) {
+    changeCustomerName(customerName) {
-      this.$emit('changeCustomerName', customerName)
+      this.$emit("changeCustomerName", customerName);
     },
     // tabs, 是否通过iframe展示
-    tabIsIframe (url) {
+    tabIsIframe(url) {
       // this.appendIframe(url)
-      this.iframeUrl = url + '?token=' + localStorage.getItem('token') + '&customerId=' + localStorage.getItem('customerId')
+      // this.iframeUrl =
-      return isURL(url)
+      //   url +
+      //   "?token=" +
+      //   localStorage.getItem("token") +
+      //   "&customerId=" +
+      //   localStorage.getItem("customerId");
+      return isURL(url);
     },
     // tabs, 选中tab
-    tabSelectedHandle (tab) {
+    tabSelectedHandle(tab) {
-      tab = this.$store.state.contentTabs.filter(item => item.name === tab.name)[0]
+      tab = this.$store.state.contentTabs.filter(
+        (item) => item.name === tab.name
+      )[0];
       if (tab) {
         this.$router.push({
-          'name': tab.name,
+          name: tab.name,
-          'params': { ...tab.params },
+          params: { ...tab.params },
-          'query': { ...tab.query }
+          query: { ...tab.query },
-        })
+        });
       }
     },
     // tabs, 删除tab
-    tabRemoveHandle (tabName) {
+    tabRemoveHandle(tabName) {
-      if (tabName === 'home') {
+      if (tabName === "home") {
-        return false
+        return false;
       }
-      this.$store.state.contentTabs = this.$store.state.contentTabs.filter(item => item.name !== tabName)
+      this.$store.state.contentTabs = this.$store.state.contentTabs.filter(
+        (item) => item.name !== tabName
+      );
       if (this.$store.state.contentTabs.length <= 0) {
-        this.$store.state.sidebarMenuActiveName = this.$store.state.contentTabsActiveName = 'home'
+        this.$store.state.sidebarMenuActiveName =
-        return false
+          this.$store.state.contentTabsActiveName = "home";
+        return false;
       }
       // 当前选中tab被删除
       if (tabName === this.$store.state.contentTabsActiveName) {
-        let tab = this.$store.state.contentTabs[this.$store.state.contentTabs.length - 1]
+        let tab =
+          this.$store.state.contentTabs[
+            this.$store.state.contentTabs.length - 1
+          ];
         this.$router.push({
           name: tab.name,
           params: { ...tab.params },
-          query: { ...tab.query }
+          query: { ...tab.query },
-        })
+        });
       }
     },
     // tabs, 关闭其它
-    tabsCloseOtherHandle () {
+    tabsCloseOtherHandle() {
-      this.$store.state.contentTabs = this.$store.state.contentTabs.filter(item => {
+      this.$store.state.contentTabs = this.$store.state.contentTabs.filter(
-        return item.name === 'home' || item.name === this.$store.state.contentTabsActiveName
+        (item) => {
-      })
+          return (
+            item.name === "home" ||
+            item.name === this.$store.state.contentTabsActiveName
+          );
+        }
+      );
     },
     // tabs, 关闭全部
-    tabsCloseAllHandle () {
+    tabsCloseAllHandle() {
-      this.$store.state.contentTabs = this.$store.state.contentTabs.filter(item => item.name === 'home')
+      this.$store.state.contentTabs = this.$store.state.contentTabs.filter(
-      this.$router.push({ name: 'home' })
+        (item) => item.name === "home"
+      );
+      this.$router.push({ name: "home" });
     },
-    sendMessage () {
+    sendMessage() {
       // const iframe = this.$refs.iframes.contentWindow
-      const iframe = document.getElementsByClassName('iframes')[0].contentWindow
+      const iframe =
+        document.getElementsByClassName("iframes")[0].contentWindow;
 
-      console.log('iframe', iframe)
+      console.log("iframe", iframe);
       // iframe.postMessage({
       //   token: localStorage.getItem('token'),
       //   customerId: localStorage.getItem('customerId')
       // }, '*')
-      iframe.postMessage({ name: 'lalalal' }, '*')
+      iframe.postMessage({ name: "lalalal" }, "*");
     },
-  }
+  },
-}
+};
 </script>
 
 <style lang="scss" src="@/assets/scss/main-shuju.scss" scoped></style>
-