add: 添加框架提供bus的demo

src/tis/index.js

@@ -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;

src/tis/utils/bus.js

@@ -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
+  };
+}