环路详情页加一个tab，可进行切换

src/layout/routerView/parent.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="height:100%" style="overflow-y:auto">
+  <div class="height:100%" style="overflow-y:auto;overflow-x: hidden;">
     <router-view v-slot="{ Component }">
       <transition :name="setTransitionName" mode="out-in">
         <keep-alive :include="keepAliveNameList">
@@ -17,67 +17,67 @@ import { useStore } from '/@/store/index';
 
 // 定义接口来定义对象的类型
 interface ParentViewState {
-	refreshRouterViewKey: null | string;
-	keepAliveNameList: string[];
+  refreshRouterViewKey: null | string;
+  keepAliveNameList: string[];
 }
 
 export default defineComponent({
-	name: 'layoutParentView',
-	props: {
-		minHeight: {
-			type: String,
-			default: '',
-		},
-	},
-	setup() {
-		const { proxy } = <any>getCurrentInstance();
-		const route = useRoute();
-		const store = useStore();
-		const state = reactive<ParentViewState>({
-			refreshRouterViewKey: null,
-			keepAliveNameList: [],
-		});
-		// 设置主界面切换动画
-		const setTransitionName = computed(() => {
-			return store.state.themeConfig.themeConfig.animation;
-		});
-		// 获取布局配置信息
-		const getThemeConfig = computed(() => {
-			return store.state.themeConfig.themeConfig;
-		});
-		// 获取组件缓存列表(name值)
-		const getKeepAliveNames = computed(() => {
-			return store.state.keepAliveNames.keepAliveNames;
-		});
-		// 页面加载前，处理缓存，页面刷新时路由缓存处理
-		onBeforeMount(() => {
-			state.keepAliveNameList = getKeepAliveNames.value;
-			proxy.mittBus.on('onTagsViewRefreshRouterView', (fullPath: string) => {
-				state.keepAliveNameList = getKeepAliveNames.value.filter((name: string) => route.name !== name);
-				state.refreshRouterViewKey = null;
-				nextTick(() => {
-					state.refreshRouterViewKey = fullPath;
-					state.keepAliveNameList = getKeepAliveNames.value;
-				});
-			});
-		});
-		// 页面卸载时
-		onUnmounted(() => {
-			proxy.mittBus.off('onTagsViewRefreshRouterView');
-		});
-		// 监听路由变化，防止 tagsView 多标签时，切换动画消失
-		watch(
-			() => route.fullPath,
-			() => {
-				state.refreshRouterViewKey = route.fullPath;
-			}
-		);
-		return {
-			getThemeConfig,
-			getKeepAliveNames,
-			setTransitionName,
-			...toRefs(state),
-		};
-	},
+  name: 'layoutParentView',
+  props: {
+    minHeight: {
+      type: String,
+      default: '',
+    },
+  },
+  setup() {
+    const { proxy } = <any>getCurrentInstance();
+    const route = useRoute();
+    const store = useStore();
+    const state = reactive<ParentViewState>({
+      refreshRouterViewKey: null,
+      keepAliveNameList: [],
+    });
+    // 设置主界面切换动画
+    const setTransitionName = computed(() => {
+      return store.state.themeConfig.themeConfig.animation;
+    });
+    // 获取布局配置信息
+    const getThemeConfig = computed(() => {
+      return store.state.themeConfig.themeConfig;
+    });
+    // 获取组件缓存列表(name值)
+    const getKeepAliveNames = computed(() => {
+      return store.state.keepAliveNames.keepAliveNames;
+    });
+    // 页面加载前，处理缓存，页面刷新时路由缓存处理
+    onBeforeMount(() => {
+      state.keepAliveNameList = getKeepAliveNames.value;
+      proxy.mittBus.on('onTagsViewRefreshRouterView', (fullPath: string) => {
+        state.keepAliveNameList = getKeepAliveNames.value.filter((name: string) => route.name !== name);
+        state.refreshRouterViewKey = null;
+        nextTick(() => {
+          state.refreshRouterViewKey = fullPath;
+          state.keepAliveNameList = getKeepAliveNames.value;
+        });
+      });
+    });
+    // 页面卸载时
+    onUnmounted(() => {
+      proxy.mittBus.off('onTagsViewRefreshRouterView');
+    });
+    // 监听路由变化，防止 tagsView 多标签时，切换动画消失
+    watch(
+      () => route.fullPath,
+      () => {
+        state.refreshRouterViewKey = route.fullPath;
+      }
+    );
+    return {
+      getThemeConfig,
+      getKeepAliveNames,
+      setTransitionName,
+      ...toRefs(state),
+    };
+  },
 });
 </script>

src/views/heating/monitor/loopSupervision/loopDetail.vue

@@ -26,32 +26,28 @@
     <el-row :gutter="15" class="home-card-one mt15" v-if="$route.query.code">
       <el-col :span="24">
         <div class="home-card-item p20">
-          <div class="home-card-item-title">
-            <span>流程图</span>
-          </div>
-          <div class="iframe-wrapper">
-            <iframe :src="'/plugin/topo/?bgColor=000#/name/'+ $route.query.code" height="400" width="100%" frameborder="0" class="mt15"></iframe>
-            <div class="jump" @click="jump('/plugin/topo/?bgColor=000#/name/'+ $route.query.code)">
-              <img src="/@/assets/open.svg">
-            </div>
-          </div>
-        </div>
-      </el-col>
-    </el-row>
 
-    <el-row :gutter="15" class="home-card-one mt15">
-      <el-col :span="24">
-        <div class="home-card-item p20">
-          <div class="home-card-item-title" style="display: flex;justify-content:space-between;">
-            <span>环路监测</span>
-            <el-button type="text" @click="goDetail()">更多 &gt;</el-button>
-          </div>
-          <el-tabs v-model="tabName" @tab-change="initLineChart">
-            <el-tab-pane label="温度" :name="0"></el-tab-pane>
-            <el-tab-pane label="压力" :name="1"></el-tab-pane>
-            <el-tab-pane label="流量" :name="2"></el-tab-pane>
+          <el-tabs>
+            <el-tab-pane label="环路监测">
+              <div class="flex-row">
+                <el-tabs v-model="tabName" @tab-change="initLineChart">
+                  <el-tab-pane label="温度" :name="0"></el-tab-pane>
+                  <el-tab-pane label="压力" :name="1"></el-tab-pane>
+                  <el-tab-pane label="流量" :name="2"></el-tab-pane>
+                </el-tabs>
+                <el-button type="text" @click="goDetail()">更多 &gt;</el-button>
+              </div>
+              <div style="height: 300px" ref="homeLineRef"></div>
+            </el-tab-pane>
+            <el-tab-pane label="流程图">
+              <div class="iframe-wrapper">
+                <iframe :src="'/plugin/topo/?bgColor=000#/name/'+ $route.query.code" height="400" width="100%" frameborder="0" class="mt15"></iframe>
+                <div class="jump" @click="jump('/plugin/topo/?bgColor=000#/name/'+ $route.query.code)">
+                  <img src="/@/assets/open.svg">
+                </div>
+              </div>
+            </el-tab-pane>
           </el-tabs>
-          <div style="height: 300px" ref="homeLineRef"></div>
         </div>
       </el-col>
     </el-row>