journey
/
tis_platform
1
0
Fork 1
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

add: 添加框架提供bus的demo

master
Poised_flw 4 years ago
parent
cc82f6a3e6
commit
3530d9f9db
2 changed files with 546 additions and 194 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 460
      src/tis/index.js
  2. 280
      src/tis/utils/bus.js

460
src/tis/index.js
View File

@ -14,9 +14,21 @@ import screenshotPlugin from "./plugins/screenshotPlugin";
import qtPlugin from "./plugins/qtPlugin";
import workerpool from "workerpool";
import { registerApps } from "./utils/scriptsLoader/index";
import { getRecvMsg, updateRecvMsg, activeTime, getOMesplug, setManageMode } from "../api/api";
import { formatDBToMsg, formatMsgToDB, formatSysTime, currentOS } from "./utils/util";
import {
getRecvMsg,
updateRecvMsg,
activeTime,
getOMesplug,
setManageMode
} from "../api/api";
import {
formatDBToMsg,
formatMsgToDB,
formatSysTime,
currentOS
} from "./utils/util";
import router from "./router/index";
import { createBus } from "./utils/bus";
const devLib = process.env.VUE_APP_DEVLIB === "dev";
const devMode = process.env.NODE_ENV === "development" || devLib;
@ -29,57 +41,56 @@ const APPS_SLEEPING_LEN = 5;
// Vue.use(ElementUI);
Vue.config.productionTip = false;
Vue.prototype.$Notifition = Notifition; //可以在任意地方调用,
Vue.prototype.$EsDataMsg = function() {
};
Vue.prototype.$EsDataMsg = function() {};
const bus = new Vue({
data: {
devMode: devMode, //当前运行环境是什么
schema: "", //当前运行项目是什么项目
alias: {},//避免硬编码id，可配置
userInfo: {},//用户信息
openByKt: false,//是否从kt打开
resource: {},//组件静态资源
allComponents: [],//所有的组件
alias: {}, //避免硬编码id，可配置
userInfo: {}, //用户信息
openByKt: false, //是否从kt打开
resource: {}, //组件静态资源
allComponents: [], //所有的组件
whitelist: [], // 白名单应用id
globalState: {}, // 全局变量
appsSleeping: [], // 休眠应用队列 最长暂时为5
apps: [], // 界面显示的所有应用
widgets: [], // 界面显示的所有浮窗
allApps: [],//所有应用
allWidgets: [],//所有浮窗
location: {},//设置经纬度
allApps: [], //所有应用
allWidgets: [], //所有浮窗
location: {}, //设置经纬度
deviceType: currentOS() || "pc",
visibleWidgetPanel: false, // 选择浮窗的视图
visibleAppsPanel: false, // 选择浮窗的视图
widgetListViewVisible: false, // 展示所有浮窗的列表视图
visibleWidgetSysSetting: false,// 展示设置浮窗
visibleWidgetSysSetting: false, // 展示设置浮窗
controlPanelPadVisible: false,
visibleWidgetLogin: false,//登录窗口
visibleWidgetLogin: false, //登录窗口
visibleHistoricalNews: false, //是否显示历史消息
visibleNotificationWhole: false, //是否显示右侧全部消息
visibleSearchBox: false, // 搜索框
visibleDialogBox: false,
visibleLookAtMsgBox: false,
visibleVoiceBox: false,
msgBoxText: "",//查看窗口的文本内容
msgBoxText: "", //查看窗口的文本内容
isFullScreen: false,
messageItem: {}, // 消息面板的信息逻辑
messageBoxList: [], // 收件箱数据面板数据存储，初始化时请求接口，
warAndAstrTime: {
astrTime: "----/--/-- --:--:--",//天文时间
warTime: "----/--/-- --:--:--"//作战时间
astrTime: "----/--/-- --:--:--", //天文时间
warTime: "----/--/-- --:--:--" //作战时间
},
footerTimer: null,
showFooter: true,
alertSettingPageVisible: false,
locationArtificial: false,// 人工定位弹框
visibleMessageBox: false,//消息
visibleToListMail: false,//通知校时
visiblediwd: false,//事件通知
locationArtificial: false, // 人工定位弹框
visibleMessageBox: false, //消息
visibleToListMail: false, //通知校时
visiblediwd: false, //事件通知
headerVisible: true,
theme: document.documentElement.getAttribute("data-theme") || "default",
showMoreContent: false, //底部点击展示更多
menuVisible: false, // 菜单编辑弹框
showMoreContent: false, //底部点击展示更多
menuVisible: false, // 菜单编辑弹框
// pad 应用界面
applicationInterface: {
visible: false,
@ -90,16 +101,17 @@ const bus = new Vue({
searchBoxPadVisible: false, // pad搜索组件
SettingSysPadVisible: false, // pad消息设置
messageCenterVisible: false, // pad消息中心
txlVisiable: false,//pad通讯录
txlVisiable: false, //pad通讯录
registerVisible: {},
notificationConfig: { //消息设置
notificationConfig: {
//消息设置
voiceHint: "无",
precise: "模糊",
rightHint: true,
disturb: false,
startTime: "",
endTime: ""
},//消息通知的设置
}, //消息通知的设置
// 消息中心数据
unReadMessageList: [
{
@ -112,7 +124,7 @@ const bus = new Vue({
time: 1619827200,
title: "态势感知",
reply: 0 // 是否有回复按钮
reply: 0 // 是否有回复按钮
},
{
id: 1,
@ -123,7 +135,7 @@ const bus = new Vue({
compnent: 1,
time: 1622505600000,
title: "态势感知",
reply: 1 // 是否有回复按钮
reply: 1 // 是否有回复按钮
},
{
id: 11,
@ -134,7 +146,7 @@ const bus = new Vue({
compnent: 1,
time: 1622505600000,
title: "态势感知",
reply: 1 // 是否有回复按钮
reply: 1 // 是否有回复按钮
},
{
id: 12,
@ -145,7 +157,7 @@ const bus = new Vue({
compnent: 1,
time: 1622505600000,
title: "态势感知",
reply: 1 // 是否有回复按钮
reply: 1 // 是否有回复按钮
},
{
id: 13,
@ -156,7 +168,7 @@ const bus = new Vue({
compnent: 1,
time: 1622505600000,
title: "态势感知",
reply: 1 // 是否有回复按钮
reply: 1 // 是否有回复按钮
},
{
id: 14,
@ -167,7 +179,7 @@ const bus = new Vue({
compnent: 1,
time: 1622505600000,
title: "态势感知",
reply: 1 // 是否有回复按钮
reply: 1 // 是否有回复按钮
},
{
id: 2,
@ -213,7 +225,7 @@ const bus = new Vue({
appName: "taishiganzhi",
text: "态势感知态势感知态势感知态势感知态势感感",
type: "态势感知",
level: 3,// 3警报，2告警 1生化
level: 3, // 3警报，2告警 1生化
compnent: 1,
time: "10分钟",
title: "态势感知",
@ -224,7 +236,7 @@ const bus = new Vue({
appName: "taishiganzhi",
text: "态势感知态势感知态势感知态势感知态势感感",
type: "态势感知",
level: 3,// 3警报，2告警 1生化
level: 3, // 3警报，2告警 1生化
compnent: 1,
time: "10分钟",
title: "态势感知",
@ -235,7 +247,7 @@ const bus = new Vue({
appName: "taishiganzhi",
text: "态势感知态势感知态势感知态势感知态势感感",
type: "态势感知",
level: 3,// 3警报，2告警 1生化
level: 3, // 3警报，2告警 1生化
compnent: 1,
time: "10分钟",
title: "态势感知",
@ -318,30 +330,36 @@ async function getApp(appId) {
async function loadApp(app) {
const onMessage = { ref: null };
const onMenu = { ref: null };
const instance = loadMicroApp({
name: app.id,
container: "#" + app.containerId,
entry: app.entry,
// activeRule:"/app_demo",
props: {
tis: {
...tis,
...createEventBus(app.id),
appId: app.id,
entry: app.entry,
components: app.components,
asserts: app.asserts,
},
onMessage,
onMenu
}
}, {
sandbox: {
strictStyleIsolation: false,
experimentalStyleIsolation: true
const bus = createBus(app.id);
const instance = loadMicroApp(
{
name: app.id,
container: "#" + app.containerId,
entry: app.entry,
// activeRule:"/app_demo",
props: {
tis: {
...tis,
...createEventBus(app.id),
appId: app.id,
entry: app.entry,
components: app.components,
asserts: app.asserts
},
bus,
onMessage,
onMenu
}
},
{
sandbox: {
strictStyleIsolation: false,
experimentalStyleIsolation: true
}
}
});
await instance.bootstrapPromise.catch((err) => {
);
await instance.bootstrapPromise.catch(err => {
console.error(`boostrap: [${app.name} ${app.id}] 出错`, err);
throw err;
});
@ -419,7 +437,10 @@ const tis = {
return new Promise((resolve, reject) => {
el.onload = el.onreadystatechange = function() {
let readyState = el.readyState;
if (typeof readyState === "undefined" || /^(loaded|complete)$/.test(readyState)) {
if (
typeof readyState === "undefined" ||
/^(loaded|complete)$/.test(readyState)
) {
resolve();
// 卸载事件和断开dom引用，避免内存泄漏
el.onload = el.onerror = el.onreadystatechange = null;
@ -427,7 +448,10 @@ const tis = {
};
el.onerror = function() {
let readyState = el.readyState;
if (typeof readyState === "undefined" || /^(loaded|complete)$/.test(readyState)) {
if (
typeof readyState === "undefined" ||
/^(loaded|complete)$/.test(readyState)
) {
console.log("load js resources failed");
reject({ error: "load js resources failed" });
// 卸载事件和断开dom引用，避免内存泄漏
@ -439,23 +463,28 @@ const tis = {
// 加载第三方耗时js eg:地图
loadTimeConsumingResources() {
this.onLoaded(document).then(() => {
console.log("<<<<=========基础资源加载完毕，第三方资源加载ing===========>>>>>");
console.log(
"<<<<=========基础资源加载完毕，第三方资源加载ing===========>>>>>"
);
// 白名单列表中的launcher不加载地图等耗时资源
const whiteList = ["manager", "appStore", "monitor"];
axios.get(`${baseURL}manifest/library.json`)
.then(async res => {
//是否需要再度延迟，防止用户操作登录下拉框时发生卡顿？可以先观察，未来再处理
const data = res.data;
const resources = Object.keys(data).filter(d => new RegExp(bus.deviceType, "gi")
.test(data[d].target) && !whiteList.includes(window.currentLauncher));
//按照顺序加载
for (let i = 0; i < resources.length; i++) {
let rs = resources[i];
await registerApps(data[rs], baseURL)
.then(() => console.log(`<<<<=========${rs}资源加载完毕===========>>>>>`));
}
console.log("<<<<=========第三方资源加载完毕===========>>>>>");
});
axios.get(`${baseURL}manifest/library.json`).then(async res => {
//是否需要再度延迟，防止用户操作登录下拉框时发生卡顿？可以先观察，未来再处理
const data = res.data;
const resources = Object.keys(data).filter(
d =>
new RegExp(bus.deviceType, "gi").test(data[d].target) &&
!whiteList.includes(window.currentLauncher)
);
//按照顺序加载
for (let i = 0; i < resources.length; i++) {
let rs = resources[i];
await registerApps(data[rs], baseURL).then(() =>
console.log(`<<<<=========${rs}资源加载完毕===========>>>>>`)
);
}
console.log("<<<<=========第三方资源加载完毕===========>>>>>");
});
});
},
//获取天文、作战时间
@ -475,21 +504,21 @@ const tis = {
},
//登出框架，清空用户信息, 清空界面信息
loginOut() {
bus.userInfo = {};//用户信息
bus.openByKt = false;//是否从kt打开
bus.userInfo = {}; //用户信息
bus.openByKt = false; //是否从kt打开
bus.whitelist = []; // 白名单应用id
bus.globalState = {}; // 全局变量
bus.appsSleeping = []; // 休眠应用队列 最长暂时为5
bus.apps = [];// 界面显示的所有应用
bus.apps = []; // 界面显示的所有应用
bus.widgets = []; // 界面显示的所有浮窗
bus.visibleWidgetPanel = false;// 选择浮窗的视图
bus.visibleWidgetPanel = false; // 选择浮窗的视图
bus.visibleAppsPanel = false; // 选择浮窗的视图
bus.widgetListViewVisible = false; // 展示所有浮窗的列表视图
bus.visibleWidgetSysSetting = false;// 展示设置浮窗
bus.visibleWidgetLogin = false;//登录窗口
bus.visibleWidgetSysSetting = false; // 展示设置浮窗
bus.visibleWidgetLogin = false; //登录窗口
bus.visibleHistoricalNews = false; //是否显示历史消息
bus.visibleNotificationWhole = false; //是否显示右侧全部消息
bus.visibleSearchBox = false;// 搜索框
bus.visibleSearchBox = false; // 搜索框
bus.visibleDialogBox = false;
bus.visibleLookAtMsgBox = false;
bus.messageItem = {}; // 消息面板的信息逻辑
@ -500,8 +529,7 @@ const tis = {
localStorage.removeItem("USER_INFO");
localStorage.removeItem("SYS_MODE");
this.openWidgetLoginPanel();
setManageMode({ mode: "0" }).then(res => {
});
setManageMode({ mode: "0" }).then(() => {});
},
// 底部栏显示隐藏
setFooterShow() {
@ -514,7 +542,10 @@ const tis = {
setNotificationConfig(config) {
bus.notificationConfig = config;
//存入localStorage
window.localStorage.setItem("MESSAGE_CONFIG", JSON.stringify(bus.notificationConfig));
window.localStorage.setItem(
"MESSAGE_CONFIG",
JSON.stringify(bus.notificationConfig)
);
},
// 获取消息通知配置
getNotificationConfig() {
@ -546,9 +577,9 @@ const tis = {
// return {};
// }
return bus.userInfo;
},
//控制平板菜单开关
// eslint-disable-next-line no-unused-vars
showControlPanel(name) {
bus.registerVisible.alarmMainWineowVisible = false;
bus.alarmMainWineowVisible = false;
@ -557,17 +588,13 @@ const tis = {
// name: name
// };
bus.controlPanelPadVisible = !bus
.controlPanelPadVisible;
bus.registerVisible.controlPanelPadVisible = !bus
.controlPanelPadVisible;
bus.controlPanelPadVisible = !bus.controlPanelPadVisible;
bus.registerVisible.controlPanelPadVisible = !bus.controlPanelPadVisible;
},
switchControlPadVisible() {
//关闭菜单
bus.controlPanelPadVisible = !bus
.controlPanelPadVisible;
bus.registerVisible.controlPanelPadVisible = !bus
.controlPanelPadVisible;
bus.controlPanelPadVisible = !bus.controlPanelPadVisible;
bus.registerVisible.controlPanelPadVisible = !bus.controlPanelPadVisible;
},
//获取是否需要登录的标识
openFullScreenAppId() {
@ -598,7 +625,7 @@ const tis = {
containerId: "app_" + app.id,
opened: false,
asserts: bus.resource,
privateBus: {}//私有bus
privateBus: {} //私有bus
};
});
bus.apps = [...bus.apps, ...newApss];
@ -620,7 +647,7 @@ const tis = {
// return found || defaultApp || apps[0]
},
getRunningApps() {
return bus.apps.filter((a) => {
return bus.apps.filter(a => {
return a.instance && a.instance.getStatus() === "MOUNTED";
});
},
@ -674,9 +701,13 @@ const tis = {
if (a !== app && a.opened && a.instance) {
a.opened = false;
// 休眠队列和白名单里的进行隐藏不卸载
if (bus.whitelist.includes(a.id) || bus.appsSleeping.indexOf(a.id) !== -1) {
if (
bus.whitelist.includes(a.id) ||
bus.appsSleeping.indexOf(a.id) !== -1
) {
a.instance.hide();
} else { // 非白名单的进行卸载
} else {
// 非白名单的进行卸载
a.instance.unmount();
}
}
@ -708,7 +739,10 @@ const tis = {
console.log("process.env.VUE_APP_DEVLIB", process.env.VUE_APP_DEVLIB);
const domain = devLib ? "http://localhost:9902/" : "";
const base = devMode ? "/" : "/TIS_LIB/";
styleLink.setAttribute("href", `${domain}${base}tis-ui/theme-chalk/index${dir}.css`);
styleLink.setAttribute(
"href",
`${domain}${base}tis-ui/theme-chalk/index${dir}.css`
);
// 设置localstorage
localStorage.setItem("TIS_DESIGN_THEME", theme);
},
@ -731,7 +765,8 @@ const tis = {
// 休眠队列和白名单里的进行隐藏不卸载
if (bus.whitelist.includes(a.id) || bus.appsSleeping.indexOf(a.id) !== -1) {
a.instance.hide();
} else { // 非白名单的进行卸载
} else {
// 非白名单的进行卸载
a.instance.unmount();
}
@ -844,7 +879,6 @@ const tis = {
bus.visiblediwd = false;
},
//人工定位弹框
isVisiblelocationArtificial() {
return bus.locationArtificial;
@ -938,11 +972,14 @@ const tis = {
},
delMessage(id) {
//将此消息状态更新为已读,只有存在15位uuid的才执行数据库的更新
const readedMsg = bus.unReadMessageList.filter(v => v.id == id && id.length > 15).map(m => {
m.isRead = "1";
return formatMsgToDB(m);
});
if (readedMsg.length > 0) updateRecvMsg({ Content: readedMsg }).catch(err => console.error(err));
const readedMsg = bus.unReadMessageList
.filter(v => v.id == id && id.length > 15)
.map(m => {
m.isRead = "1";
return formatMsgToDB(m);
});
if (readedMsg.length > 0)
updateRecvMsg({ Content: readedMsg }).catch(err => console.error(err));
bus.unReadMessageList = bus.unReadMessageList.filter(v => v.id !== id);
},
// 清空消息
@ -954,14 +991,13 @@ const tis = {
//展现右上角的逻辑。
},
addWidgets(widgets) {
const newWidgets = widgets.map((w) => {
const newWidgets = widgets.map(w => {
return {
...w,
containerId: "widget_" + w.id,
opened: false,
asserts: bus.resource
}
;
};
});
bus.widgets = [...bus.widgets, ...newWidgets];
},
@ -975,9 +1011,12 @@ const tis = {
},
//增加所有组件
addComponents(components) {
bus.allComponents = [...bus.allComponents, ...components.map(c => {
return { ...c, loaded: false };
})];
bus.allComponents = [
...bus.allComponents,
...components.map(c => {
return { ...c, loaded: false };
})
];
},
getAllComponents() {
return bus.allComponents;
@ -1012,15 +1051,18 @@ const tis = {
return bus.widgets.length;
},
getOpenedWidgetIds() {
return bus.widgets.filter(w => w.opened).map((w) => w.id);
return bus.widgets.filter(w => w.opened).map(w => w.id);
},
_saveOpenedWidgets() {
sessionStorage.setItem("openedWidgets", JSON.stringify(this.getOpenedWidgetIds()));
sessionStorage.setItem(
"openedWidgets",
JSON.stringify(this.getOpenedWidgetIds())
);
},
restoreWidgetsFromSession() {
try {
const ids = sessionStorage.getItem("openedWidgets") || JSON.stringify([]);
JSON.parse(ids).forEach((widgetId) => {
JSON.parse(ids).forEach(widgetId => {
this.openWidget(widgetId);
});
} catch (_) {
@ -1074,9 +1116,11 @@ const tis = {
}
});
//应用自定义配置的compoonents也得返给应用，不能全部依赖管理员配置
app.components = defaultApp && defaultApp.components ? [...appComps, ...defaultApp.components] : appComps;
app.components =
defaultApp && defaultApp.components
? [...appComps, ...defaultApp.components]
: appComps;
//返回给应用所有的htmlresource资源目录，后端暂时无法配置组件。这个以后可以再改。
});
custom_widgets = widgets.map(widget => {
let widgetComps = [];
@ -1091,12 +1135,14 @@ const tis = {
}
});
//合并默认组件配置和管理员的配置
widget.components = defaultwg && defaultwg.components ? [...defaultwg.components, ...widgetComps] : widgetComps;
widget.components =
defaultwg && defaultwg.components
? [...defaultwg.components, ...widgetComps]
: widgetComps;
//返回给应用所有的htmlresource资源目录，后端暂时无法配置组件。这个以后可以再改。
return { ...widget, ...defaultwg };
});
if (!test) {
//过滤掉kt,兼容
this.addApps(apps.filter(a => a.id !== "TIS_RJJHJCKJ_WEB"));
@ -1104,11 +1150,9 @@ const tis = {
//TODO 打开
this.openDefaultApp();
this.restoreWidgetsFromSession();
this._initUnReadMessageList();//初始化未读消息
this._initUnReadMessageList(); //初始化未读消息
this.initConfig();
}
},
getSchema() {
return bus.schema;
@ -1117,12 +1161,14 @@ const tis = {
initOMFrameView(mode = 0) {
// 清空apps再操作
bus.apps = [];
getOMesplug(mode).then(r => {
const { apps = [] } = r;
this.addApps(apps);
this.initConfig();
this.openDefaultApp();
}).catch(e => console.error(e));
getOMesplug(mode)
.then(r => {
const { apps = [] } = r;
this.addApps(apps);
this.initConfig();
this.openDefaultApp();
})
.catch(e => console.error(e));
},
//默认的初始化框架界面函数
initFrameViewByDefault(options = {}) {
@ -1149,13 +1195,13 @@ const tis = {
//初始化config配置
initConfig() {
const msg_conf = window.localStorage.getItem("MESSAGE_CONFIG");
msg_conf ? bus.notificationConfig = JSON.parse(msg_conf) : "";
msg_conf ? (bus.notificationConfig = JSON.parse(msg_conf)) : "";
},
//初始化框架内apps widgets components 等全集
initAlldata(config = {}) {
const { apps = [], widgets = [], components = [] } = config;
this.addAllApps(apps);//app的全集，用户登录后拿到其中的某几个app构成的子集
this.addAllWidgets(widgets);//widgets，用户登录后拿到其中的某几个widgets构成的子集
this.addAllApps(apps); //app的全集，用户登录后拿到其中的某几个app构成的子集
this.addAllWidgets(widgets); //widgets，用户登录后拿到其中的某几个widgets构成的子集
this.addComponents(components);
this.openAppByIdImmediately();
},
@ -1205,10 +1251,11 @@ const tis = {
getRecvMsg(params).then(d => {
const { Content = [], TotalNum = 0 } = d;
if (TotalNum > 0) {
const unReadMsgs = Content.filter(c => c.isRead == 0).map(c => formatDBToMsg(c));
const unReadMsgs = Content.filter(c => c.isRead == 0).map(c =>
formatDBToMsg(c)
);
unReadMsgs.forEach(ur => this.addMessageData(ur));
}
});
},
//获取alias中别名对应的真名
@ -1217,8 +1264,12 @@ const tis = {
},
// 加载组件的函数，目前应用的加载组件函数是否需要封装到tis中？
async _loadComponent(component) {
let curBaseUrl = process.env.NODE_ENV === "development" ? `http://${document.domain}:8080` : `http://${document.domain}:3806`;
const comp = bus.allComponents.find(arg => arg.component === component) || {};
let curBaseUrl =
process.env.NODE_ENV === "development"
? `http://${document.domain}:8080`
: `http://${document.domain}:3806`;
const comp =
bus.allComponents.find(arg => arg.component === component) || {};
let assets = null;
let dependencies = [];
try {
@ -1230,9 +1281,13 @@ const tis = {
}
console.log(
`框架开始加载${component}组件资源...`,
`所有组件信息`, bus.allComponents,
`匹配到的组件信息`, comp,
"该组件静态资源", assets);
`所有组件信息`,
bus.allComponents,
`匹配到的组件信息`,
comp,
"该组件静态资源",
assets
);
//等待依赖下载完毕
for (const refer of dependencies) {
let reference = bus.resource[refer] || null;
@ -1241,33 +1296,36 @@ const tis = {
return new Promise((resolve, reject) => {
//加载组件资源
console.log("开始加载组件", "组件：" + component, assets);
registerApps(assets, curBaseUrl).then(() => {
let startTime = new Date().getTime();
const looper = setInterval(() => {
if (Vue.component(`${component}`)) {
resolve(comp);
clearInterval(looper);
} else {
let nowTime = new Date().getTime();
if (nowTime - startTime > 2000) {
if (!assets) {
reject(`[loading error:${component}]:组件资源加载失败`);
} else {
reject(`[loading error:${component}]:loading component timed out`);
}
registerApps(assets, curBaseUrl)
.then(() => {
let startTime = new Date().getTime();
const looper = setInterval(() => {
if (Vue.component(`${component}`)) {
resolve(comp);
clearInterval(looper);
} else {
let nowTime = new Date().getTime();
if (nowTime - startTime > 2000) {
if (!assets) {
reject(`[loading error:${component}]:组件资源加载失败`);
} else {
reject(
`[loading error:${component}]:loading component timed out`
);
}
clearInterval(looper);
}
}
}, 300);
})
.catch(err => {
if (!assets) {
reject(`[loading error:${component}]:组件资源加载失败`);
} else {
reject(`[loading error:${component}]:${err}`);
}
}, 300);
}).catch(err => {
if (!assets) {
reject(`[loading error:${component}]:组件资源加载失败`);
} else {
reject(`[loading error:${component}]:${err}`);
}
});
});
});
},
worker,
@ -1281,30 +1339,42 @@ const tis = {
}
},
hiddenAllVisible() {
Object.keys(bus.registerVisible).map((key) => {
Object.keys(bus.registerVisible).map(key => {
bus[key] = false;
});
bus.applicationInterface.visible = false;
},
initAppBusById(bus,AppId){
let app = this.getApps().find(app=>app.id === AppId );
initAppBusById(bus, AppId) {
let app = this.getApps().find(app => app.id === AppId);
app.privateBus = bus;
},
}
};
hotkeysPlugin(tis);
voicePlugin(tis);
qtPlugin(tis);
screenshotPlugin(tis);
Vue.prototype.$tis = new Proxy({ loadApp }, {
get: function(o, k) {
return o[k] || tis[k];
Vue.prototype.$tis = new Proxy(
{ loadApp },
{
get: function(o, k) {
return o[k] || tis[k];
}
}
});
);
export function setup(options = {}) {
const { layouts = {}, whitelist = [], schema, wsUrl, apps = [], components = [], hotkeys, alias = {}, theme = "default" } = options;
const {
layouts = {},
whitelist = [],
schema,
wsUrl,
apps = [],
components = [],
hotkeys,
alias = {},
theme = "default"
} = options;
tis.layouts = layouts;
bus.whitelist = [...whitelist];
bus.alias = alias;
@ -1340,30 +1410,32 @@ export function setup(options = {}) {
tis.bindPlatformHotkeys(hotkeys);
//挂载Vue、tis
window.esapp = Object.assign(!window.esapp ? window.esapp = {} : window.esapp, {
Vue: Vue,
vue: new Vue({
store,
router,
render: h => h(App)
}).$mount("#app"),
add_path: function(route, name, obj) {
store.registerModule(name, obj);
},
add_store: function(module, data) {
store.commit(module, data);
},
Vuex: Vuex,
VueRouter: {},
registerAppAsync: function(source) {
return source;
},
tis: tis, //新框架核心对象,
flag: tis //
});
window.esapp = Object.assign(
!window.esapp ? (window.esapp = {}) : window.esapp,
{
Vue: Vue,
vue: new Vue({
store,
router,
render: h => h(App)
}).$mount("#app"),
add_path: function(route, name, obj) {
store.registerModule(name, obj);
},
add_store: function(module, data) {
store.commit(module, data);
},
Vuex: Vuex,
VueRouter: {},
registerAppAsync: function(source) {
return source;
},
tis: tis, //新框架核心对象,
flag: tis //
}
);
return tis;
}
export default tis;
export default tis;

280
src/tis/utils/bus.js
View File

@ -0,0 +1,280 @@
import Vue from "vue";
import EE from "eventemitter3";
import axios from "axios";
import { registerApps } from "./scriptsLoader/index";
// temp
let curBaseUrl = "";
const dev = process.env.NODE_ENV === "development";
const baseUrl = dev ? process.env.BASE_URL : "";
// 数据机制，考虑vuex来实现
class Bus extends EE {
components = []; // components
asserts = {};
deviceType = "pc";
appId = "";
actives = []; //从菜单中激活的组件,
layouts = []; //由自定义组件和第三方组件组成的布局组件集合
getDeviceType() {
return this.deviceType;
}
getTemplateLayouts() {
return this.layouts;
}
// 传递当前所处组件的上下文环境
menuStatusUpdate() {
const onActives = this.getTemplateLayouts()
.filter(l => !l.lazy)
.map(c => c.component.name || c.component);
const appId = "";
console.log("============>", appId);
// TODO 这里通过event-bus来实现吧，Vue实例获取不到
this.$emit("TIS_TEMPLATE_MENU_ACTIVE", {
appId,
onActives: onActives,
system: true
});
}
async loadComponent(component) {
const comp = this.components.find(arg => arg.component === component) || {};
console.log("所有组件...", this.components);
console.log("所有资源...", this.asserts);
console.log("当前加载组件...", component);
console.log("匹配到的组件...", comp);
let assets = null;
let dependencies = [];
let isLib = false;
try {
const info = comp.segprefix;
assets = this.asserts[info];
dependencies = comp.dependencies || [];
isLib = comp.lib;
} catch (e) {
console.error(e);
}
//等待依赖下载完毕
for (const refer of dependencies) {
let reference = this.asserts[refer] || null;
await registerApps(reference, curBaseUrl);
}
return new Promise((resolve, reject) => {
//加载组件资源
console.log("开始加载组件资源", assets, curBaseUrl);
registerApps(assets, curBaseUrl)
.then(() => {
if (!isLib) {
//正常组件的加载流程,isLib为true代表纯js lib库的加载
let startTime = new Date().getTime();
const looper = setInterval(() => {
if (Vue.component(`${component}`)) {
resolve(comp);
clearInterval(looper);
} else {
let nowTime = new Date().getTime();
if (nowTime - startTime > 2000) {
if (!assets) {
reject(`[loading error:${component}]:组件资源加载失败`);
} else {
reject(
`[loading error:${component}]:loading component timed out`
);
}
clearInterval(looper);
}
}
}, 300);
} else {
resolve(comp);
}
})
.catch(err => {
if (!assets) {
reject(`[loading error:${component}]:组件资源加载失败`);
} else {
reject(`[loading error:${component}]:${err}`);
}
});
});
}
//自定义函数,支持开发者按需增加接口
openComponentByMenu(components) {
//长度变化才会触发computed?
this.components
.filter(c => {
const component = c.component.name || c.component;
//激活组件命中此组件,更改状态
const hit = components.includes(component);
if (hit) {
c.lazy = !hit;
return c;
}
})
.forEach(c => {
if (
!this.layouts.some(
l => (l.component.name || l.component) === c.component
)
) {
this.layouts.push(c);
} else {
//改变状态
this.layouts.forEach(l => {
if ((l.component.name || l.component) === c.component) {
l.lazy = false;
}
});
}
if (!this.actives.some(l => l.component === c.component)) {
//弹窗暂定为同一时间只能打开一个
if (c.type === "dialog") {
this.actives = [c];
} else {
this.actives.push(c);
}
}
});
//有 加入 无 删除？
console.log("layouts变化状态", this.layouts);
console.log("actives变化状态", this.actives);
this.menuStatusUpdate();
}
// 关闭组件
closeComponent(components) {
//修改layout中的状态
this.layouts.forEach(c => {
const component = c.component.name || c.component;
//激活组件命中此组件,更改状态
const hit = components.includes(component);
if (hit) {
c.lazy = hit;
}
});
//active中删除该组件
console.log("待删除组件", components);
components.forEach(c => {
const index = this.actives.findIndex(b => b.component === c);
console.log("aaaaaa", index);
if (index >= 0) {
this.actives.splice(index, 1);
}
});
console.log("layouts变化状态", this.layouts);
console.log("actives变化状态", this.actives);
this.menuStatusUpdate();
}
//initLayouts //layouts 初始化,外部组件
initLayouts(layouts = []) {
this.layouts.push(...layouts.filter(l => !l.lazy));
}
//获取组件
getWidgetsByType(type) {
//以type 或 position 命中widget,背景板默认lazy=false
return this.layouts
.filter(f => (f.type === type || f.position === type) && !f.lazy)
.map(f => {
//string类型，来自配置文件，需要下载资源才能使用，懒加载组件不加载但是需要加入到数组中、、
if (typeof f.component === "string") {
console.log("下载component资源", f.component);
return this.loadComponent(f.component);
} else {
return f;
}
});
}
//获取含有当前类型的激活组件
getActivesByType(type) {
return this.actives.filter(a => a.type === type);
}
// 初始化配置信息
async initData(props) {
const dev = process.env.NODE_ENV === "development";
curBaseUrl = props.tis ? props.tis.entry : baseUrl;
const esData = await axios
.get(`${curBaseUrl}/esplug.json`)
.catch(err => console.error(err));
const asserts = await axios
.get(`${curBaseUrl}/tisplatform.json`)
.catch(err => console.error(err));
try {
//运行模式才取用框架返回的数据
if (props.tis && !dev) {
console.log("框架传入的components:", props.tis.components);
this.components = props.tis.components
? [...props.tis.components, ...esData.data.components]
: esData.data.components;
this.asserts =
Object.keys(props.tis.asserts).length !== 0
? props.tis.asserts
: asserts.data;
this.widgets = props.tis.widgets
? props.tis.widgets
: esData.data.widgets;
} else {
this.components = esData.data.components;
this.asserts = asserts.data;
this.widgets = esData.data.widgets;
}
//避免不填此属性，默认懒加载
this.components = this.components.map(c => {
if (
!Object.prototype.hasOwnProperty.call(c, "lazy") &&
c.type !== "background"
) {
c.lazy = true;
}
return c;
});
} catch (e) {
console.error(e);
}
}
$emit(event) {
return this.emit(event);
}
$on(event, fn) {
return this.on(event, fn);
}
$off(event, fn) {
return this.off(event, fn);
}
$once(event, fn) {
return this.once(event, fn);
}
}
export function createBus(appId) {
const bus = new Bus();
bus.appId = appId;
function onSetup(options = {}) {
bus.layouts = options.layout;
}
async function onMount(props) {
await bus.initData(props);
bus.initLayouts(bus.components);
bus.initLayouts(bus.widgets);
}
return {
bus,
onSetup,
onMount
};
}
Write Preview
Loading…
Cancel
Save