组态iframe嵌入、修改HEADER与FOOTER当切换为组态模块时隐藏

src/layout/components/AppView.vue

@@ -28,6 +28,10 @@ const reload = () => {
   routerAlive.value = false
   nextTick(() => (routerAlive.value = true))
 }
+
+const { currentRoute } = useRouter()
+const isTopologyRoute = /^\/topology/.test(currentRoute?.value?.path || '')
+
 // 为组件后代提供刷新方法
 provide('reload', reload)
 //endregion
@@ -36,7 +40,9 @@ provide('reload', reload)
 <template>
   <section
     :class="[
-      'p-[var(--app-content-padding)] w-[calc(100%-var(--app-content-padding)-var(--app-content-padding))] bg-[var(--app-content-bg-color)] dark:bg-[var(--el-bg-color)]',
+      isTopologyRoute
+        ? ``
+        : 'p-[var(--app-content-padding)] w-[calc(100%-var(--app-content-padding)-var(--app-content-padding))] bg-[var(--app-content-bg-color)] dark:bg-[var(--el-bg-color)]',
       {
         '!min-h-[calc(100%-var(--app-content-padding)-var(--app-content-padding)-var(--app-footer-height))]':
           (fixedHeader &&
@@ -59,6 +65,7 @@ provide('reload', reload)
           !fixedHeader && layout === 'cutMenu' && footer
       }
     ]"
+    :style="isTopologyRoute ? `width: 100%; height: 100%` : ''"
   >
     <router-view v-if="routerAlive">
       <template #default="{ Component, route }">
@@ -68,5 +75,5 @@ provide('reload', reload)
       </template>
     </router-view>
   </section>
-  <Footer v-if="footer" />
+  <Footer v-if="!isTopologyRoute && footer" />
 </template>

src/layout/components/ToolHeader.vue

@@ -47,7 +47,7 @@ export default defineComponent({
   name: 'ToolHeader',
   setup() {
     const { currentRoute } = useRouter()
-    const isTopologyRoute = false && /^\/topology/.test(currentRoute?.value?.path || '')
+    const isTopologyRoute = /^\/topology/.test(currentRoute?.value?.path || '')
 
     if (!isTopologyRoute) {
       return () => (

src/layout/components/useRenderLayout.tsx

@@ -78,7 +78,47 @@ export const useRenderLayout = () => {
           ]}
           style="transition: all var(--transition-time-02);"
         >
-          <ElScrollbar
+          {isTopologyRoute ? (<ElScrollbar
+            v-loading={pageLoading.value}
+            class={[
+              `${prefixCls}-content-scrollbar`,
+              {
+                '!h-[100%]':
+                  fixedHeader.value
+              }
+            ]}
+          >
+            {isTopologyRoute ? undefined : (
+              <div
+                class={[
+                  {
+                    'fixed top-0 left-0 z-10': fixedHeader.value,
+                    'w-[calc(100%-var(--left-menu-min-width))] !left-[var(--left-menu-min-width)]':
+                      collapse.value && fixedHeader.value && !mobile.value,
+                    'w-[calc(100%-var(--left-menu-max-width))] !left-[var(--left-menu-max-width)]':
+                      !collapse.value && fixedHeader.value && !mobile.value,
+                    '!w-full !left-0': mobile.value
+                  }
+                ]}
+                style="transition: all var(--transition-time-02);"
+              >
+                <ToolHeader
+                  class={[
+                    'bg-[var(--top-header-bg-color)]',
+                    {
+                      'layout-border__bottom': !tagsView.value
+                    }
+                  ]}
+                ></ToolHeader>
+
+                {tagsView.value ? (
+                  <TagsView class="layout-border__top layout-border__bottom"></TagsView>
+                ) : undefined}
+              </div>
+            )}
+
+            <AppView></AppView>
+          </ElScrollbar>) : (<ElScrollbar
             v-loading={pageLoading.value}
             class={[
               `${prefixCls}-content-scrollbar`,
@@ -88,7 +128,7 @@ export const useRenderLayout = () => {
               }
             ]}
           >
-            {false && isTopologyRoute ? undefined : (
+            {isTopologyRoute ? undefined : (
               <div
                 class={[
                   {
@@ -118,7 +158,8 @@ export const useRenderLayout = () => {
             )}
 
             <AppView></AppView>
-          </ElScrollbar>
+          </ElScrollbar>)}
+
         </div>
       </>
     )

src/views/topology/2d/index.vue

@@ -1,10 +1,26 @@
 <template>
-  <div>2D-testPage</div>
+  <div class="iframBox" v-if="pageReady">
+    <iframe src="http://123.60.223.250:6080/#/d2d"></iframe>
+  </div>
 </template>
 
 <script>
-export default {}
+export default {
+  data() {
+    return {
+      pageReady: false
+    }
+  },
+  mounted() {
+    this.pageReady = true
+  }
+}
 </script>
 
-<style>
+<style lang="scss" scoped>
+.iframBox,
+iframe {
+  width: 100%;
+  height: 100%;
+}
 </style>

src/views/topology/3d/index.vue

@@ -1,10 +0,0 @@
-<template>
-  <div>3D-testPage</div>
-</template>
-
-<script>
-export default {}
-</script>
-
-<style>
-</style>

src/views/topology/3d/viewModel.vue

@@ -0,0 +1,17 @@
+<template>
+  <div class="iframBox">
+    <iframe src="http://123.60.223.250:6080/#/viewModel?selectModel=1"></iframe>
+  </div>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style lang="scss" scoped>
+.iframBox,
+iframe {
+  width: 100%;
+  height: 100%;
+}
+</style>