Skip to content

D
dsk-cr20g
Commit a3220857 authored by tianhongyang's avatar tianhongyang
Browse files
Options

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

parent 0065ad75
Hide whitespace changes
Inline Side-by-side
Showing with 514 additions and 184 deletions
dsk-operate-ui/package.json
View file @ a3220857
......@@ -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
View file @ a3220857
......@@ -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
View file @ a3220857
<template>
<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>
</el-scrollbar>
<div v-show="isExpand" class="side-expand" @click="toggleSideBar">
<img :src="isCollapse?require('@/assets/images/sidebar_right.png'):require('@/assets/images/sidebar_left.png')">
</div>
<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>
</el-scrollbar>
<div v-show="isExpand" class="side-expand" @click="toggleSideBar">
<img :src="isCollapse?require('@/assets/images/sidebar_right.png'):require('@/assets/images/sidebar_left.png')">
</div>
</div>
</template>
<script>
......@@ -40,69 +24,70 @@ import variables from "@/assets/styles/variables.scss";
export default {
components: { SidebarItem, Logo },
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
}
})
}
return item
})
},
activeMenu() {
const route = this.$route;
const { meta, path } = route;
// if set path, the sidebar will highlight the path you set
if (meta.activeMenu) {
return meta.activeMenu;
components: { SidebarItem, Logo },
data() {
return {
isExpand: false
};
},
computed: {
...mapState(["settings"]),
...mapGetters(["sidebarRouters", "sidebar"]),
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 path;
},
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
},
showLogo() {
return this.$store.state.settings.sidebarLogo;
},
variables() {
return variables;
},
isCollapse() {
return !this.sidebar.opened;
},
});
}
return item;
});
return JSON.parse(JSON.stringify(resultArray));
},
activeMenu() {
const route = this.$route;
const { meta, path } = route;
// if set path, the sidebar will highlight the path you set
if (meta.activeMenu) {
return meta.activeMenu;
}
return path;
},
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;
},
showLogo() {
return this.$store.state.settings.sidebarLogo;
},
variables() {
return variables;
},
isCollapse() {
return !this.sidebar.opened;
},
},
methods: {
toggleSideBar() {
this.$emit('handleBar', this.isCollapse ? '-96' : '96'); // 96为展开宽度和收起宽度之差
this.$store.dispatch('app/toggleSideBar');
},
sideEnter() {
if (this.device !== 'mobile') {
this.isExpand = true;
}
},
sideLeave() {
if (this.device !== 'mobile') {
this.isExpand = false;
}
},
methods: {
toggleSideBar(){
this.$emit('handleBar', this.isCollapse ? '-96' : '96'); // 96为展开宽度和收起宽度之差
this.$store.dispatch('app/toggleSideBar');
},
sideEnter(){
if (this.device !== 'mobile') {
this.isExpand = true;
}
},
sideLeave(){
if (this.device !== 'mobile') {
this.isExpand = false;
}
},
},
},
};
</script>
dsk-operate-ui/src/main.js
View file @ a3220857
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
View file @ a3220857
......@@ -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
View file @ a3220857
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
View file @ a3220857
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
View file @ a3220857
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
View file @ a3220857
......@@ -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
View file @ a3220857
......@@ -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,49 +23,55 @@ class PostMessageBridge {
_targetOriginUrl = null;
// 事件调度中心
_eventCenter = null;
// 触发的行为
_actionMap = null;
// 当前vue实例
_vueIns = null;
// 处理函数
_messageHandlers = null;
//通信是否建立成功
_communication = false;
constructor() { }
/**
*
* @param {{
* currentSystem : Window || undefined;
* currentOriginUrl : string;
* targetSystem : Window || undefined;
* targetOriginUrl : string || undefined;
* vueIns : any;
* }} options
*/
constructor(options) {
return new Promise(async (resolve, reject) => {
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);
} catch (error) {
reject(error);
}
});
}
/**
* 通信初始化
*/
async init() {
* currentSystem : Window || undefined;
* currentOriginUrl : string;
* targetSystem : Window || undefined;
* targetOriginUrl : string || undefined;
* vueIns : any;
* }} options
*/
async init(options) {
try {
this._eventCenter = new EventCenter();
this._actionMap = action;
this._currentSystem.addEventListener("message", this.messageListener, false);
this._currentSystem = options.currentSystem;
this._currentOriginUrl = options.currentOriginUrl || location.origin;
this._targetSystem = options.targetSystem;
this._targetOriginUrl = options.targetOriginUrl || "*";
this._vueIns = options.vueIns || null;
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) {
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;
}
}
/**
* 触发message 时执行的函数
* @param {MessageEvent} event
......@@ -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);
resolve(result);
// 判断来源 必须 来自子系统
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
View file @ a3220857
export { default as PostMessageBridge } from "./bridge";
\ No newline at end of file
export { default as PostMessageBridge, pmb } from "./bridge";
\ No newline at end of file
dsk-operate-ui/src/utils/postMessageBridge/tools/index.js
View file @ a3220857
......@@ -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) => {
try {
const result = fn(...args);
return Promise.resolve(result);
} catch (error) {
return Promise.reject(error);
}
return new Promise((resolve, reject) => {
try {
const result = fn(...args);
resolve(result);
} catch (error) {
reject(error);
}
});
};
};
\ No newline at end of file
dsk-operate-ui/src/views/subsystem/components/IframeComIns.vue
View file @ a3220857
......@@ -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 0 → 100644
View file @ a3220857
<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
View file @ a3220857
<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>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment