央企集成 查业绩 组合查 2023/12/5

dsk-operate-ui/package.json

@@ -37,6 +37,7 @@
     "url": "https://gitee.com/y_project/RuoYi-Vue.git"
   },
   "dependencies": {
+    "@alita/chalk": "^1.1.2",
     "@cell-x/el-table-sticky": "^1.0.2",
     "@riophae/vue-treeselect": "0.4.0",
     "@vue/composition-api": "^1.7.2",

dsk-operate-ui/src/layout/components/Sidebar/SidebarItem.vue

@@ -9,11 +9,11 @@
           </el-menu-item>
         </app-link>
       </template>
-      <el-submenu v-else ref="subMenu" :index="resolvePath(item.path)" popper-append-to-body>
+      <el-submenu v-else ref="subMenu" :index="resolvePath(item.path,item.query)" popper-append-to-body>
         <template slot="title">
           <item v-if="item.meta" :icon="sideIcon(item)" :title="item.meta.title" />
         </template>
-        <sidebar-item v-for="child in item.children" :key="child.path" :is-nest="true" :item="child" :base-path="resolvePath(child.path,child.query)"
+        <sidebar-item v-for="child in item.children" :key="child.path" :is-nest="true" :item="child" :base-path="resolvePath(child.path)"
           :active-menu="activeMenu" class="nest-menu" />
       </el-submenu>
     </template>
@@ -80,7 +80,7 @@ export default {
       default: false
     },
     basePath: {
-      type: String,
+      type: [String],
       default: ''
     },
     activeMenu: {

dsk-operate-ui/src/layout/components/Sidebar/index.vue

 <template>
-    <div :class="{'has-logo':showLogo}"  @mouseenter="sideEnter" @mouseleave="sideLeave" :style="{ backgroundColor: settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">
+  <div :class="{'has-logo':showLogo}" @mouseenter="sideEnter" @mouseleave="sideLeave"
+    :style="{ backgroundColor: settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">
     <logo v-if="showLogo" :collapse="isCollapse" />
     <el-scrollbar :class="settings.sideTheme" wrap-class="scrollbar-wrapper">
-            <el-menu
-                :default-active="activeMenu"
-                :collapse="isCollapse"
-                :background-color="variables.menuBg"
-                :text-color="variables.menuText"
-                :unique-opened="true"
-                :active-text-color="settings.theme"
-                :collapse-transition="false"
-                mode="vertical"
-            >
-                <sidebar-item
-                    v-for="(route, index) in hidechildren"
-
-                    :key="route.path  + index"
-					:is-collapse="isCollapse"
-					:active-menu="activeMenu"
-                    :item="route"
-                    :base-path="route.path"
-					:class="route.fixed&&route.fixed.isFixed?'sideFoot':''"
-					:style="route.fixed&&route.fixed.isFixed?{'bottom': route.fixed.number*50+'px'}: bottomMenu&&index==routes.length-bottomMenu-2?{'padding-bottom': bottomMenu*50+'px'}:''"
-
-                />
+      <el-menu :default-active="activeMenu" :collapse="isCollapse" :background-color="variables.menuBg" :text-color="variables.menuText"
+        :unique-opened="true" :active-text-color="settings.theme" :collapse-transition="false" mode="vertical">
+        <sidebar-item v-for="(route, index) in hidechildren" :key="route.path  + index" :is-collapse="isCollapse" :active-menu="activeMenu"
+          :item="route" :base-path="route.path" :class="route.fixed&&route.fixed.isFixed?'sideFoot':''"
+          :style="route.fixed&&route.fixed.isFixed?{'bottom': route.fixed.number*50+'px'}: bottomMenu&&index==routes.length-bottomMenu-2?{'padding-bottom': bottomMenu*50+'px'}:''" />
       </el-menu>
     </el-scrollbar>
     <div v-show="isExpand" class="side-expand" @click="toggleSideBar">
@@ -44,22 +28,23 @@ export default {
   data() {
     return {
       isExpand: false
-	  }
+    };
   },
   computed: {
     ...mapState(["settings"]),
     ...mapGetters(["sidebarRouters", "sidebar"]),
-        hidechildren(){
-          return this.sidebarRouters.map(item=>{
-            if(item.children?.length){
-             item.children = item.children.filter(i=>{
-                if (typeof (i.hidden) == 'boolean' && i.hidden == false || i.path == "index"){
-                  return i
+    hidechildren() {
+      const resultArray = this.sidebarRouters.map(item => {
+        if (item.children?.length) {
+          item.children = item.children.filter(i => {
+            if (typeof (i.hidden) == 'boolean' && i.hidden == false || i.path == "index") {
+              return i;
             }
-              })
+          });
         }
-            return item
-          })
+        return item;
+      });
+      return JSON.parse(JSON.stringify(resultArray));
     },
     activeMenu() {
       const route = this.$route;
@@ -71,12 +56,12 @@ export default {
       return path;
     },
     device() {
-		  return this.$store.state.app.device
+      return this.$store.state.app.device;
     },
     bottomMenu() {
-		  const routeArr = this.$router.options.routes
-		  const navFixed = routeArr.filter(item => item.fixed && item.fixed.isFixed)
-		  return navFixed.length
+      const routeArr = this.$router.options.routes;
+      const navFixed = routeArr.filter(item => item.fixed && item.fixed.isFixed);
+      return navFixed.length;
     },
     showLogo() {
       return this.$store.state.settings.sidebarLogo;
@@ -89,16 +74,16 @@ export default {
     },
   },
   methods: {
-		toggleSideBar(){
+    toggleSideBar() {
       this.$emit('handleBar', this.isCollapse ? '-96' : '96'); // 96为展开宽度和收起宽度之差
       this.$store.dispatch('app/toggleSideBar');
     },
-		sideEnter(){
+    sideEnter() {
       if (this.device !== 'mobile') {
         this.isExpand = true;
       }
     },
-		sideLeave(){
+    sideLeave() {
       if (this.device !== 'mobile') {
         this.isExpand = false;
       }

dsk-operate-ui/src/main.js

 import Vue from 'vue';
-import VCA from '@vue/composition-api' //composition APi
+import VCA from '@vue/composition-api'; //composition APi
 
 import Cookies from 'js-cookie';
 
@@ -87,9 +87,11 @@ Vue.use(Element, {
 
 Vue.config.productionTip = false;
 
-new Vue({
+const vueIns = new Vue({
   el: '#app',
   router,
   store,
   render: h => h(App)
 });
+
+export default vueIns;

dsk-operate-ui/src/utils/iframeTools.js

@@ -2,7 +2,7 @@
  * @Author: thy
  * @Date: 2023-11-08 09:28:17
  * @LastEditors: thy
- * @LastEditTime: 2023-11-28 16:04:07
+ * @LastEditTime: 2023-12-01 15:31:33
  * @Description: file content
  * @FilePath: \dsk-operate-ui\src\utils\iframeTools.js
  */
@@ -10,6 +10,8 @@
 import { dskAccessToken } from '@/api/common';
 import { getUrlSearchQuery, isUrl, paramsToQuery } from "@/utils/";
 import { Message } from "element-ui";
+import chalk from "@alita/chalk";
+window.alitadebug = true;
 
 
 /**
@@ -24,13 +26,15 @@ class IframeTools {
   authToken = "";
   origin = location.origin;
   isOuter = false;
+  iframeLoaded = false;
+  isAutoInit = false;
   /**
    * 插件域名地址
    * @param {string} pluginDomain 默认当前环境变量VUE_APP_SUB_SYSTEM_ADDRESS
    * @param {HTMLIFrameElement} subSystemIframe 子系统iframe dom节点
    * @returns
    */
-  constructor(subSystemIframe, pluginDomain = process.env.VUE_APP_SUB_SYSTEM_ADDRESS) {
+  constructor(subSystemIframe, pluginDomain = process.env.VUE_APP_SUB_SYSTEM_ADDRESS, isAutoInit = false) {
     return new Promise(async (resolve, reject) => {
       try {
         const query = getUrlSearchQuery();
@@ -44,11 +48,13 @@ class IframeTools {
         this.subSystemIframe = subSystemIframe;
         // 是否外部打开
         this.isOuter = query.isOuter && typeof JSON.parse(query.isOuter) == "boolean" ? JSON.parse(query.isOuter) : false;
+        // 是否自动初始化iframe
+        this.isAutoInit = isAutoInit;
         // 是一个合法地址 初始化 先替换域名地址 再获取令牌并 拼接
         await this.init();
         resolve(this);
       } catch (error) {
-        reject(error)
+        reject(error);
       }
     });
   }
@@ -82,7 +88,12 @@ class IframeTools {
         url = `${url}${paramsToQuery(query) ? "?" + paramsToQuery(query) : ""}`;
         this.queryParams.url = url;
         console.log(this.queryParams.url);
-        // 倒计时刷新token 正常误差10s 提前获取
+        if (this.isAutoInit) {
+          this.subSystemIframe.src = url;
+          // 初始化iframe
+          await this.initIframe(this.subSystemIframe);
+        }
+        // 倒计时刷新token 误差10s 提前获取
         this.setTokenRefresh(expire * 1000 - 1000 * 10);
       }
     } catch (error) {
@@ -91,6 +102,21 @@ class IframeTools {
     }
   }
 
+  initIframe(iframe) {
+    if (!iframe) throw new Error("缺少需要监听的iframe元素");
+    return new Promise((resolve, reject) => {
+      let that = this;
+      iframe.addEventListener("load", function onIframeLoad(e) {
+        iframe.removeEventListener("load", onIframeLoad, false);
+        that.iframeLoaded = true;
+        // console.clear();
+        chalk.hello("author:thy", "0.0.1");
+        chalk.ready(chalk.bgGreen("iframeTools 初始化完毕"));
+        resolve(true);
+      }, false);
+    });
+  }
+
   /**
    * 获取子系统token
    */

dsk-operate-ui/src/utils/postMessageBridge/action/index.js

-import Interaction from "./interaction";
-import Router from "./router";
+import Interaction from "@/utils/postMessageBridge/action/interaction";
+import Router from "@/utils/postMessageBridge/action/router";
 
-export default {
-  "interaction": new Interaction(),
-  "router": new Router(),
+const interaction = new Interaction();
+const router = new Router();
+
+export const messageHandlers = {
+  interaction,
+  router
+};
+
+export {
+  interaction,
+  router
 };
\ No newline at end of file

dsk-operate-ui/src/utils/postMessageBridge/action/interaction.js

+import { pmb } from "../bridge";
+
+let _this = null;
 class Interaction {
   actionName = "interaction";
 
   constructor() {
+    _this = this;
+  }
+
+  default(params = {}, mergeParams = { action: this.actionName, ...params }) {
+    if (!params) throw new Error("传入的params参数错误");
+    return new Promise((resolve, reject) => pmb.publish(mergeParams, (e) => resolve(e)));
+  }
+
+  layoutHtml(userParams = {}) {
+    return _this.default({
+      method: "layoutHtml",
+      params: { ...userParams }
+    });
+  }
 
+  syncScroll(userParams = {}) {
+    return _this.default({
+      method: "syncScroll",
+      params: { ...userParams }
+    });
   }
 }
 

dsk-operate-ui/src/utils/postMessageBridge/action/router.js

+import { pmb } from "../bridge";
+
+let _this = null;
 class Router {
-  actionName = "router"
+  actionName = "router";
 
   constructor() {
+    _this = this;
+  }
 
+  default(params = {}, mergeParams = { action: this.actionName, ...params }) {
+    if (!params) throw new Error("传入的params参数错误");
+    return new Promise((resolve, reject) => pmb.publish(mergeParams, (e) => resolve(e)));
   }
+
+  toTargetRouter(userParams = {}) {
+    return new Promise((resolve, reject) => {
+      this.$tab.openPage(userParams.title, userParams.url);
+      console.log(userParams);
+      resolve();
+    });
+  }
+
+  iframeToTargetRouter(userParams = {}) {
+    return _this.default({
+      method: "toTargetUrl",
+      params: { ...userParams }
+    });
+  }
+
+  progressDone(userParams = {}) {
+    return new Promise(async (resolve, reject) => {
+      await this.loadedInit();
+      resolve();
+    });
+  }
+
 }
 
 export default Router;
\ No newline at end of file

dsk-operate-ui/src/utils/postMessageBridge/bridge/eventCenter.js

@@ -2,12 +2,15 @@
  * @Author: thy
  * @Date: 2023-11-28 18:09:11
  * @LastEditors: thy
- * @LastEditTime: 2023-11-29 10:48:22
+ * @LastEditTime: 2023-12-01 12:15:31
  * @Description: file content
  * @FilePath: \dsk-operate-ui\src\utils\postMessageBridge\bridge\eventCenter.js
  */
 
 import { v4 } from "uuid";
+import { normalToPromise } from "@/utils/postMessageBridge/tools";
+import chalk from "@alita/chalk";
+window.alitadebug = true;
 
 /**
  * 事件回调 调度中心
@@ -15,9 +18,10 @@ import { v4 } from "uuid";
 class EventCenter {
   //事件回调储存栈
   _eventHandlerMap = new Map();
-
-  constructor() {
-
+  _vueIns = null;
+  constructor(vueIns) {
+    vueIns ? this._vueIns = vueIns : null;
+    process.env.ENV != "production" ? chalk.ready(chalk.bgGreen("事件调度中心初始化完毕")) : null;
   }
 
   /**
@@ -34,7 +38,7 @@ class EventCenter {
    */
   registerHandler(promiseCallBack) {
     return new Promise((resolve, reject) => {
-      if (Object.prototype.toString.call(promiseCallBack) !== "[object Promise]") return console.warn("传入的回调类型不是一个promise实例");
+      if (Object.prototype.toString.call(promiseCallBack) !== "[object Function]") return console.warn("传入的回调类型不是一个函数");
       const uid = v4();
       this._eventHandlerMap.set(uid, promiseCallBack);
       resolve(uid);
@@ -53,15 +57,19 @@ class EventCenter {
    * 根据回调ID 执行事件回调储存中的回调 并卸载
    * @param {string} handlerId 
    */
-  executeHandler(handlerId) {
+  executeHandler(handlerId, params = {}) {
     return new Promise((resolve, reject) => {
       try {
         const currentCallBack = this.getTargetHandler(handlerId);
         if (!currentCallBack) return reject("执行回调错误,未找到对应回调");
+        // 缓存回调
+        const cb = normalToPromise(currentCallBack);
+        // 删除回调
+        this._eventHandlerMap.delete(handlerId);
         // 执行回调
-
+        resolve(cb(params));
       } catch (error) {
-
+        console.log(error);
       }
     });
   }

dsk-operate-ui/src/utils/postMessageBridge/bridge/index.js

@@ -2,15 +2,15 @@
  * @Author: thy
  * @Date: 2023-10-26 14:56:41
  * @LastEditors: thy
- * @LastEditTime: 2023-11-29 17:54:47
+ * @LastEditTime: 2023-12-05 01:39:12
  * @Description: file content
  * @FilePath: \dsk-operate-ui\src\utils\postMessageBridge\bridge\index.js
  */
 
 import EventCenter from "./eventCenter";
-import action from "@/utils/postMessageBridge/action";
-import { normalToPromise } from "@/utils/postMessageBridge/tools";
-
+import { messageHandlers } from "@/utils/postMessageBridge/action";
+import chalk from "@alita/chalk";
+window.alitadebug = true;
 
 class PostMessageBridge {
   // 当前系统
@@ -23,10 +23,15 @@ class PostMessageBridge {
   _targetOriginUrl = null;
   // 事件调度中心
   _eventCenter = null;
-  // 触发的行为
-  _actionMap = null;
   // 当前vue实例
   _vueIns = null;
+  // 处理函数
+  _messageHandlers = null;
+  //通信是否建立成功
+  _communication = false;
+
+  constructor() { }
+
   /**
    * 
    * @param {{ 
@@ -37,32 +42,33 @@ class PostMessageBridge {
   * vueIns : any;
   * }} options 
   */
-  constructor(options) {
-    return new Promise(async (resolve, reject) => {
+  async init(options) {
     try {
       this._currentSystem = options.currentSystem;
       this._currentOriginUrl = options.currentOriginUrl || location.origin;
       this._targetSystem = options.targetSystem;
       this._targetOriginUrl = options.targetOriginUrl || "*";
       this._vueIns = options.vueIns || null;
-        await this.init();
-        resolve(this);
+      this._messageHandlers = messageHandlers;
+      this._eventCenter = new EventCenter(this._vueIns);
+      this._currentSystem.removeEventListener("message", this.messageListener.bind(this), false);
+      this._currentSystem.addEventListener("message", this.messageListener.bind(this), false);
+      // 初始化完毕
+      process.env.ENV != "production" ? chalk.ready(chalk.bgGreen("通信桥梁初始化完毕")) : true;
     } catch (error) {
-        reject(error);
+      console.log(error);
     }
-    });
   }
 
-  /**
-   * 通信初始化
-   */
-  async init() {
-    try {
-      this._eventCenter = new EventCenter();
-      this._actionMap = action;
-      this._currentSystem.addEventListener("message", this.messageListener, false);
-    } catch (error) {
-      console.log(error);
+  getVueInstance(insArray, current) {
+    if (insArray?.length) {
+      const result = insArray.find(item => {
+        if (item.$children && item.$children?.length) {
+          return this.getVueInstance(item.$children, current);
+        }
+        return item.$route == current;
+      });
+      return result;
     }
   }
 
@@ -75,18 +81,70 @@ class PostMessageBridge {
     new Promise(async (resolve, reject) => {
       try {
         const { data, origin, source } = event;
-        if (origin !== this._currentOriginUrl) return;
-        const { id, action, methodName, params } = data;
-        if (!id) return;
-        // promise化
-        const result = await normalToPromise(this._actionMap[action][methodName])(params);
+        // 判断来源 必须 来自子系统
+        if (origin !== this._targetOriginUrl || source !== this._targetSystem?.contentWindow) return;
+        const { callbackId, action, method, params = {} } = data;
+        // 未获取到当前交互id 不执行调用
+        if (!callbackId) return;
+        // 有注册回调 执行回调
+        if (this._eventCenter.getTargetHandler(callbackId)) {
+          resolve(this._eventCenter.executeHandler(callbackId, params));
+        } else {
+          // 订阅消息
+          const result = await this.subscribe(action, method, params);
           resolve(result);
+        }
       } catch (error) {
         console.log(error);
         reject(error);
       }
     });
   };
+
+  /**
+   * 发布消息
+   * @param {Object} options 
+   * @param {Function} callback 
+   */
+  async publish(options, callback) {
+    if (!options || !callback) return;
+    if (!options.action) throw new Error("缺少action参数");
+    if (!options.method) throw new Error("缺少method参数");
+    if (Object.prototype.toString.call(callback) != "[object Function]") return console.warn("传入的回调不是一个函数");
+    options.params = options.params || {};
+    // 绑定到vue实例
+    const bfn = callback.bind(this._vueIns);
+    const callbackId = await this._eventCenter.registerHandler(bfn);
+    const { params, ...rest } = options;
+    process.env.ENV != "production" ? chalk.log(chalk.bgBlack(`发布消息：\n回调ID:${callbackId}\n命中模块:${options.action}\n命中方法:${options.method}\n传递参数:\n${JSON.stringify(params)}`)) : null;
+    this._targetSystem?.contentWindow?.postMessage({
+      callbackId,
+      ...rest,
+      params,
+    }, { targetOrigin: this._targetOriginUrl });
+    return callbackId;
+  }
+
+  /**
+   * 订阅消息
+   * @param {string} action 执行的模块
+   * @param {string} method 执行的方法
+   * @param {Object} params 参数
+   * @returns 
+   */
+  async subscribe(action, method, params) {
+    try {
+      const fn = this._messageHandlers[action] ? this._messageHandlers[action][method] ? this._messageHandlers[action][method] : null : null;
+      // 绑定到vue实例
+      const result = fn ? await this._messageHandlers[action][method].call(this._vueIns, params) : null;
+      return result;
+    } catch (error) {
+      console.log(router);
+    }
+  }
 }
 
+// 单例模式
+export const pmb = new PostMessageBridge();
+
 export default PostMessageBridge;
\ No newline at end of file

dsk-operate-ui/src/utils/postMessageBridge/index.js

-export { default as PostMessageBridge } from "./bridge";
+export { default as PostMessageBridge, pmb } from "./bridge";
\ No newline at end of file

dsk-operate-ui/src/utils/postMessageBridge/tools/index.js

@@ -5,13 +5,15 @@
  */
 export const normalToPromise = (fn) => {
   const tag = Object.prototype.toString.call(fn);
-  if (tag !== "[object Function]" || tag !== "[object AsyncFunction]") return fn;
+  if (tag !== "[object Function]" && tag !== "[object AsyncFunction]") return fn;
   return (...args) => {
+    return new Promise((resolve, reject) => {
       try {
         const result = fn(...args);
-      return Promise.resolve(result);
+        resolve(result);
       } catch (error) {
-      return Promise.reject(error);
+        reject(error);
       }
+    });
   };
 };
\ No newline at end of file

dsk-operate-ui/src/views/subsystem/components/IframeComIns.vue

@@ -22,11 +22,6 @@ export default {
     url: {
       type: String,
       default: ""
-    },
-    // 100%模式
-    layout: {
-      type: Boolean,
-      default: false
     }
   },
   watch: {

dsk-operate-ui/src/views/subsystem/components/searchPerformance/index.vue

+<template>
+  <div class="search-performance-iframe-container">
+    <!-- 查询tab切换 -->
+    <div class="search-tab-list-performance">
+      <div class="search-tab-item-performance" v-for="(item,index) of searchTabList" :key="index"
+        :class="{'current-tab-performance' : item.name == currentValue}" @click="changeCurrent(item)">
+        <span class="search-tab-name">{{item.name}}</span>
+      </div>
+    </div>
+    <iframe-com-ins ref="searchPerformanceIframeContainer" :iframeStyles="urlQueryParams.iframeStyles" :styles="urlQueryParams.styles"
+      :url="urlQueryParams.url"></iframe-com-ins>
+  </div>
+</template>
+<script>
+import IframeComIns from "@/views/subsystem/components/IframeComIns";
+import IframeTools from "@/utils/iframeTools";
+import { pmb } from "@/utils/postMessageBridge";
+import { interaction, router } from "@/utils/postMessageBridge/action";
+export default {
+  name: "searchPerformanceIframeContainer",
+  components: {
+    IframeComIns
+  },
+  data() {
+    return {
+      urlQueryParams: {
+        url: ""
+      },
+      iframeToolsIns: {},
+      messageBridgeIns: {},
+      currentValue: "中标业绩",
+      searchTabList: [
+        {
+          name: "中标业绩",
+          value: "/performance"
+        },
+        {
+          name: "四库业绩",
+          value: "/sky"
+        },
+        {
+          name: "全网业绩",
+          value: "/zb"
+        },
+        {
+          name: "水利监管平台",
+          value: "/sljg"
+        },
+        {
+          name: "水利信用平台",
+          value: "/slxy"
+        },
+      ],
+      observer: null
+    };
+  },
+  //可访问data属性
+  created() {
+    this.init();
+  },
+  beforeDestroy() {
+    if (this.iframeToolsIns) {
+      this.iframeToolsIns.clearRefreshTimer ? this.iframeToolsIns.clearRefreshTimer() : null;
+    }
+    if (this.observer) {
+      this.observer?.disconnect();
+    }
+  },
+  //计算集
+  computed: {
+
+  },
+  //方法集
+  methods: {
+    clearObserver() {
+      if (this.observer) {
+        this.observer?.disconnect();
+      }
+      this.observer = null;
+    },
+    async init() {
+      await this.$nextTick();
+      const dom = this.$refs["searchPerformanceIframeContainer"].$el.querySelector("iframe");
+      // 初始化iframe工具
+      const iframeTools = await new IframeTools(dom);
+      this.iframeToolsIns = iframeTools;
+      this.urlQueryParams = iframeTools.queryParams;
+      await iframeTools.initIframe(dom);
+      // 初始化iframe通信工具
+      await pmb.init({
+        currentSystem: window,
+        currentOriginUrl: location.origin,
+        targetSystem: iframeTools.subSystemIframe,
+        targetOriginUrl: process.env.VUE_APP_SUB_SYSTEM_ADDRESS,
+        vueIns: this
+      });
+      this.messageBridgeIns = pmb;
+      this.loadedInit();
+    },
+    mutationObserverFn(mutationsList) {
+      for (let mutation of mutationsList) {
+        if (mutation.attributeName === "src") {
+          // 当iframe的src属性发生改变时，触发该回调函数
+          const currentUrl = this.iframeToolsIns.subSystemIframe.src;
+          console.log("当前url：" + currentUrl);
+          break;
+        }
+      }
+    },
+    async loadedInit() {
+      // 是否需要使用iframe滚动条监听
+      if (this.urlQueryParams?.syncScroll) {
+        await interaction.syncScroll();
+      }
+      // 是否需要插件适配当前视口
+      if (this.urlQueryParams?.layout) {
+        await interaction.layoutHtml();
+      }
+    },
+    async changeCurrent(item) {
+      try {
+        this.currentValue = item.name;
+        await router.iframeToTargetRouter({
+          url: `/search${item.value}`
+        });
+      } catch (error) {
+
+      }
+    }
+  },
+}
+</script>
+<style lang="scss" scoped>
+.search-performance-iframe-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  overflow: hidden;
+  padding: 16px 24px;
+
+  .search-tab-list-performance {
+    height: 51px;
+    display: flex;
+    align-items: center;
+    background: #fff;
+    box-sizing: border-box;
+
+    .search-tab-item-performance {
+      height: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      color: #333;
+      font-weight: bold;
+      min-width: 96px;
+      padding: 0px 16px;
+      box-sizing: border-box;
+
+      &.current-tab-performance {
+        color: #0081ff;
+        border-bottom: 2px solid #0081ff;
+      }
+
+      .search-tab-name {
+        cursor: pointer;
+      }
+    }
+  }
+
+  .iframe-com-ins {
+    height: calc(100% - 67px);
+    margin-top: 16px;
+  }
+}
+</style>
\ No newline at end of file

dsk-operate-ui/src/views/subsystem/index.vue

 <template>
   <div class="subsystem-iframe-container">
     <iframe-com-ins ref="subsystemIframeContainer" :iframeStyles="urlQueryParams.iframeStyles" :styles="urlQueryParams.styles"
-      :url="urlQueryParams.url" :layout="urlQueryParams.layout"></iframe-com-ins>
+      :url="urlQueryParams.url"></iframe-com-ins>
   </div>
 </template>
 <script>
 import IframeComIns from "./components/IframeComIns";
 import IframeTools from "@/utils/iframeTools";
-import { PostMessageBridge } from "@/utils/postMessageBridge";
+import { pmb } from "@/utils/postMessageBridge";
+import { interaction } from "@/utils/postMessageBridge/action";
 export default {
   name: "subsystemIframeContainer",
   components: {
@@ -15,7 +16,9 @@ export default {
   },
   data() {
     return {
-      urlQueryParams: {},
+      urlQueryParams: {
+        url: ""
+      },
       iframeToolsIns: {},
       messageBridgeIns: {}
     };
@@ -40,19 +43,29 @@ export default {
       const dom = this.$refs["subsystemIframeContainer"].$el.querySelector("iframe");
       // 初始化iframe工具
       const iframeTools = await new IframeTools(dom);
-      console.dir(iframeTools);
+      this.iframeToolsIns = iframeTools;
+      this.urlQueryParams = iframeTools.queryParams;
+      await iframeTools.initIframe(dom);
       // 初始化iframe通信工具
-      const messageBridge = await new PostMessageBridge({
+      await pmb.init({
         currentSystem: window,
-        currentOriginUrl : location.origin,
-        targetSystem: iframeTools.subSystemIframe?.contentWindow,
-        targetOriginUrl: process.env.VUE_APP_SUB_SYSTEM_ADDRESS
+        currentOriginUrl: location.origin,
+        targetSystem: iframeTools.subSystemIframe,
+        targetOriginUrl: process.env.VUE_APP_SUB_SYSTEM_ADDRESS,
+        vueIns: this
       });
-      console.log(messageBridge);
-      this.messageBridgeIns = messageBridge;
-      this.iframeToolsIns = iframeTools;
-      this.urlQueryParams = iframeTools.queryParams;
-      console.log(this.urlQueryParams);
+      this.messageBridgeIns = pmb;
+      this.loadedInit();
+    },
+    async loadedInit() {
+      // 是否需要使用iframe滚动条监听
+      if (this.urlQueryParams?.syncScroll) {
+        await interaction.syncScroll();
+      }
+      // 是否需要插件适配当前视口
+      if (this.urlQueryParams?.layout) {
+        await interaction.layoutHtml();
+      }
     }
   },
 }
@@ -66,5 +79,6 @@ export default {
   height: 100%;
   box-sizing: border-box;
   overflow: hidden;
+  padding: 16px 24px;
 }
 </style>