eoss-ui 0.3.97

package/packages/main/src/main.vue

@@ -0,0 +1,1496 @@
+<template>
+  <div class="es-main" :class="{ 'es-main-topside': modal === 'topside' }">
+    <div
+      v-if="showHeader"
+      class="es-main-header"
+      :style="{ backgroundImage: headerImg ? 'url(' + headerImg + ')' : '' }"
+    >
+      <img
+        class="es-main-logo"
+        :src="logoUrl"
+        v-if="modal !== 'topside' && logoUrl"
+      />
+      <div class="es-main-top-nav">
+        <es-menu
+          v-if="navs.length"
+          class="es-fourth-tabs"
+          mode="horizontal"
+          :icons="icons"
+          :popperClass="`el-menu--popup-${modal}`"
+          :data="navs"
+          :deep="modal === 'topnav'"
+          :default-active="topActive"
+          @select="
+            res => {
+              handleSelect(res, 'nav');
+            }
+          "
+        ></es-menu>
+      </div>
+      <es-handler
+        :userModel="userModel"
+        :hide="hide"
+        :subSystem="subsystem"
+        :online="online"
+        :application="application"
+        :storage="storage"
+        :notice="notice"
+        :data="handleData"
+        @select="
+          res => {
+            handleSelect(res, 'sys');
+          }
+        "
+        @click="handleClick"
+      ></es-handler>
+    </div>
+    <div class="es-main-box" v-if="reset">
+      <div class="es-main-left" v-if="modal !== 'topnav'">
+        <div class="es-main-side" v-if="modal === 'topside'">
+          <div class="es-main-side-logo">
+            <img class="es-main-logo" :src="logoUrl" v-if="logoUrl" />
+          </div>
+          <es-handle-user
+            :data="{ type: 'user' }"
+            @click="handleClick"
+          ></es-handle-user>
+        </div>
+        <es-nav
+          v-if="showMenu"
+          :data="menu"
+          :default-active="active"
+          :width="navWidth"
+          :icons="icons"
+          :biserial="biserial"
+          :title="showNavTitle ? title : false"
+          :showCollapse="showNavTitle"
+          :menu-tips="menuTips"
+          :is-default="isDefault"
+          @trigger="
+            res => {
+              handleSelect(res, 'sub');
+            }
+          "
+          @select="
+            res => {
+              handleSelect(res, 'menu');
+            }
+          "
+        ></es-nav>
+      </div>
+      <div class="es-main-body">
+        <div v-if="fourthTabs" class="es-fourth-tabs">
+          <es-menu
+            mode="horizontal"
+            :data="tabs"
+            :titleIcons="false"
+            :default-active="tabsId"
+            :menu-tips="menuTips"
+            @select="
+              res => {
+                handleSelect(res, 'tabs');
+              }
+            "
+          ></es-menu>
+        </div>
+        <div class="es-body">
+          <div
+            class="es-body-main"
+            v-loading="pageLoading"
+            element-loading-background="rgba(0, 0, 0, 0.5)"
+          >
+            <iframe
+              v-if="method === 'iframe'"
+              :id="iframeId"
+              :name="iframeId"
+              frameborder="0"
+              width="100%"
+              height="100%"
+              :src="page"
+            ></iframe>
+            <template v-else-if="method === 'wujie' && refresh">
+              <es-wujie
+                :show="true"
+                :props="wjProps"
+                :attrs="wjAttrs"
+                :name="wjName"
+                :url="page"
+              ></es-wujie>
+            </template>
+            <template v-else-if="method === 'router' && refresh">
+              <router-view v-if="!isKeepAlive" :key="routerKey" />
+              <keep-alive>
+                <router-view v-if="isKeepAlive" :key="routerKey"
+              /></keep-alive>
+            </template>
+          </div>
+          <message
+            v-if="showMsg"
+            ref="message"
+            :total.sync="notice"
+            :visible.sync="showMsg"
+            :winopen="winopen"
+            @ignore="handleChange"
+            @handle="handleMenuTips"
+          ></message>
+        </div>
+      </div>
+    </div>
+    <!-- <div v-show="set" ref="box" class="es-sets-button">
+      <el-button
+        type="primary"
+        class="es-icon-xitongguanli"
+        ref="area"
+      ></el-button>
+    </div> -->
+    <settings
+      v-bind="$attrs"
+      :theme="color"
+      :predefine="themes"
+      :visible.sync="showSet"
+      @change="handleChange"
+    ></settings>
+    <es-dialog
+      v-if="showUserInfo"
+      title="用户信息配置"
+      height="740px"
+      :visible.sync="showUserInfo"
+    >
+      <slot name="user">
+        <userinfo
+          v-bind="$attrs"
+          @change="handleUserModel"
+          @reGetConfig="reGetConfig"
+        >
+          <slot name="userInfo"></slot>
+        </userinfo>
+      </slot>
+    </es-dialog>
+    <notice :data="sysMsg" :winopen="winopen" @opened="handleOpened"></notice>
+  </div>
+</template>
+<script>
+import userinfo from './userinfo.vue';
+import settings from './settings.vue';
+import message from './message.vue';
+import notice from './notice.vue';
+import {
+  mainConfig,
+  updateUserCustomInfo,
+  getComplexApplications,
+  getComplexApplicationsNew,
+  wss,
+  topic
+} from 'eoss-ui/src/config/api.js';
+import store from 'eoss-ui/src/utils/store';
+import util from 'eoss-ui/src/utils/util';
+import SockJS from 'sockjs-client';
+import Stomp from 'stompjs';
+const isIE = navigator.userAgent.indexOf('MSIE') != -1;
+const log = util.getParams('console');
+export default {
+  name: 'EsMain',
+  inheritAttrs: false,
+  components: {
+    userinfo,
+    settings,
+    message,
+    notice
+  },
+  props: {
+    //菜单导航地址
+    menuUrl: String,
+    //菜单展开关闭
+    icons: Object,
+    //logo
+    logo: {
+      type: String,
+      default: 'errorlogo'
+    },
+    //菜单显示类型
+    scene: {
+      type: String,
+      default: 'default'
+    },
+    //host
+    host: {
+      type: String,
+      default() {
+        return util.getStorage('host') ? util.getStorage('host') : '';
+      }
+    },
+    header: {
+      type: Boolean,
+      default: true
+    },
+    //操作栏配置
+    handleData: Array,
+    //本地导航
+    data: Array,
+    //头部背景图片
+    headerImage: String,
+    //默认主题颜色
+    theme: {
+      type: String,
+      default: '#409eff'
+    },
+    //主题颜色选择颜色集合
+    themes: Array,
+    //需要隐藏的头部功能
+    hides: Object,
+    //储存数据
+    storage: {
+      type: String,
+      default() {
+        return util.getStorage('storage');
+      }
+    },
+    //是否启用子应用菜单接口
+    application: {
+      type: Boolean,
+      default: false
+    },
+    //是否显示设置按钮
+    set: {
+      type: Boolean,
+      default: false
+    },
+    //websocket
+    socket: {
+      type: Boolean,
+      default: true
+    },
+    //无界微前端属性
+    wjProps: Object,
+    wjAttrs: Object,
+    //socket调试
+    console: Boolean,
+    //消息办理是否采用window.open的方式打开
+    winopen: {
+      type: Boolean,
+      default: true
+    },
+    //获取用户信息的接口
+    mainConfig: {
+      type: String,
+      default: mainConfig
+    },
+    iframeId: {
+      type: String,
+      default: 'stage'
+    },
+    routePath: {
+      type: String,
+      default: '/main'
+    },
+    setFirstAsDefault: Boolean,
+    pathUrl: {
+      type: String,
+      default: '/primary'
+    },
+    keepAlive: Boolean,
+    loadWujie: {
+      type: Boolean,
+      default: true
+    },
+    downgrade: {
+      type: Boolean,
+      default: true
+    },
+    remote: {
+      type: Boolean,
+      default: true
+    }
+  },
+  computed: {
+    //菜单类型
+    modal() {
+      return this.scene.toLowerCase();
+    },
+    showHeader() {
+      return this.isHeader == 0 ? false : this.header;
+    },
+    isHomePage() {
+      if (util.getParams('applicationid') || util.getParams('applicationId')) {
+        return false;
+      }
+      if (util.getStorage('mainConfig')) {
+        let hash = util.win.location.hash;
+        if (
+          hash &&
+          hash.split('?')[0] !== '#/' &&
+          hash.split('?')[0] !== '#/main'
+        ) {
+          return false;
+        }
+      }
+      return true;
+    },
+    navWidth() {
+      return this.modal === 'topside' ? '230px' : undefined;
+    },
+    showNavTitle() {
+      return this.modal !== 'topside';
+    },
+    //tabs菜单
+    fourthTabs() {
+      return this.tabs.length;
+    },
+    //菜单接口
+    action() {
+      if (this.menuUrl) {
+        return this.menuUrl;
+      }
+      if (this.application) {
+        return getComplexApplicationsNew;
+      }
+      return getComplexApplications;
+    },
+    //是否双列右侧菜单
+    biserial() {
+      if (
+        this.modal === 'subsystem' ||
+        this.modal === 'topside' ||
+        this.application
+      ) {
+        return false;
+      } else {
+        return true;
+      }
+    },
+    //隐藏操作按键
+    hide() {
+      if (this.modal === 'subsystem' || this.application) {
+        if (this.hides && Object.keys(this.hides).length) {
+          return { ...this.hides, set: !this.set, system: false };
+        } else {
+          return { set: !this.set, system: false };
+        }
+      } else if (this.modal === 'topside') {
+        if (this.hides && Object.keys(this.hides).length) {
+          return {
+            ...this.hides,
+            set: !this.set,
+            system: true,
+            user: true
+          };
+        } else {
+          return { set: !this.set, system: true, user: true };
+        }
+      } else {
+        if (this.hides && Object.keys(this.hides).length) {
+          return {
+            ...this.hides,
+            set: !this.set,
+            system: true,
+            user: true
+          };
+        } else {
+          return { set: !this.set, system: true };
+        }
+      }
+    },
+    logoUrl() {
+      if (this.mainLogo) {
+        return this.mainLogo;
+      }
+      return this.logo;
+    },
+    isConsole() {
+      return log ? true : this.console;
+    }
+  },
+  watch: {
+    data: {
+      deep: true,
+      handler() {
+        !this.remote && this.renderMenu();
+      }
+    },
+    menuTips: {
+      immediate: true,
+      deep: true,
+      handler(val) {
+        if (Object.keys(val).length && this.menus.length) {
+          this.setTips(this.menus);
+        }
+      }
+    },
+    color: {
+      immediate: true,
+      handler(val) {
+        if (this.set) {
+          localStorage.setItem('theme', val);
+          util.updateTheme(val);
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      pageLoading: false,
+      client: null,
+      websocket: null,
+      connect: 0,
+      wjName: 'singlespa',
+      menus: '',
+      //头部导航
+      navs: [],
+      //头部默认选择
+      topActive: '',
+      //子系统菜单
+      subsystem: [],
+      //头部子系统子导航默认选中项
+      sysId: '',
+      //导航默认选择
+      active: [],
+      //完整导航选中的ID
+      actives: [],
+      //初始默认选中菜单id
+      defaultActive: [],
+      //侧边导航
+      menu: [],
+      //菜单名称
+      title: '',
+      //菜单提醒气泡
+      menuTips: {},
+      //面包屑导航
+      tabs: [],
+      //页签导航默认选中值
+      tabsId: '',
+      //路由类型
+      method: 'router',
+      //页面地址
+      page: '',
+      //选中的地址
+      selectPage: '',
+      //主页面
+      homePage: '',
+      //header背景
+      mainLogo: null,
+      headerImg: this.headerImage,
+      //在线人数
+      online: 1,
+      //通知数
+      notice: 0,
+      //是否显示消息列表框
+      showMsg: false,
+      //即时消息
+      sysMsg: [],
+      //定时关闭及时消息对象
+      sysMsgOut: null,
+      //额外信息数据
+      extraData: '',
+      //用户信息
+      userModel: null,
+      //刷新路由
+      refresh: true,
+      //显示设置面板
+      showSet: false,
+      //当前设置的主题
+      color: util.getStorage('theme') ? util.getStorage('theme') : this.theme,
+      //显示用户信息
+      showUserInfo: false,
+      //是否展示侧边导航
+      showMenu: true,
+      props: {},
+      //是否首次加载
+      isDefault: true,
+      reset: true,
+      isKeepAlive: this.keepAlive,
+      routerKey: '',
+      defaultwjprops: {},
+      isTabs: false,
+      isHeader: ''
+    };
+  },
+  created() {
+    this.isHeader = util.getParams('header');
+    this.getConfig();
+    if (this.remote) {
+      this.getMenu();
+    } else {
+      this.renderMenu();
+    }
+    if (this.socket) {
+      this.initWebSocket();
+    }
+  },
+  mounted() {
+    util.win.reLogin = this.handleReLogin;
+    this.handleListener();
+    util.win.refresh = this.handleRefresh;
+    util.win.jumpMenu = this.jumpMenu;
+    if (util.win.$wujie) {
+      util.win.$wujie.bus.$on('changeTheme', res => {
+        util.updateTheme(res);
+      });
+    }
+    util.win.windowOpen = this.openPage;
+  },
+  methods: {
+    renderMenu() {
+      if (this.data !== undefined && this.data.length) {
+        this.menus = JSON.parse(JSON.stringify(this.data));
+        let applicationid =
+          util.getParams('applicationid') || util.getParams('applicationId');
+        if (applicationid) {
+          var ids = this.getId(this.menus, applicationid);
+          if (ids) {
+            this.defaultActive = ids;
+          }
+        } else {
+          let hash = util.win.location.hash;
+          if (hash) {
+            hash = hash.split('?')[0];
+          }
+          if (hash !== '#/' && hash !== '#/main') {
+            let ids = this.getId(this.menus, util.win.location.hash, true);
+            if (ids) {
+              this.defaultActive = ids;
+            }
+          }
+        }
+        this.setMenu(this.menus);
+      }
+    },
+    //设置主题颜色
+    setTheme(color) {
+      if (!color) {
+        return;
+      }
+      util
+        .ajax({
+          url: updateUserCustomInfo,
+          params: { color: escape(color.toLowerCase()) },
+          data: { color: escape(color.toLowerCase()) }
+        })
+        .then(res => {
+          if (res.rCode === 0) {
+            this.color = color;
+            localStorage.setItem('theme', color);
+            let mainConfig = JSON.parse(util.getStorage('mainConfig'));
+            mainConfig.userStyle.color = this.color;
+            sessionStorage.setItem('mainConfig', JSON.stringify(mainConfig));
+            this.$emit('setting', 'theme', this.color);
+            this.$message({
+              message: res.msg,
+              type: 'success',
+              duration: 2000
+            });
+          } else {
+            let msg = res.msg || '系统错误，请联系管理员！';
+            this.$message.error(msg);
+          }
+        })
+        .catch(err => {
+          if (err.message && err.message !== 'canceled') {
+            this.$message.error(err.message);
+          }
+        });
+    },
+    //显示隐藏设置面板
+    handleSet() {
+      this.showSet = !this.showSet;
+    },
+    setConfig(results, flag) {
+      if (flag) {
+        sessionStorage.setItem('mainConfig', JSON.stringify(results));
+        util.setStorage({
+          type: this.storage,
+          key: {
+            userId: results.userModel.userId,
+            userName: results.userModel.username,
+            useCaseCodes: results.resourceCodes
+          }
+        });
+      }
+      for (let i in results) {
+        if (i === 'mainLogoUrl' && results[i]) {
+          this.mainLogo = results[i];
+        }
+        if (
+          i === 'mainBannerUrl' &&
+          results[i] &&
+          this.headerImage === undefined
+        ) {
+          this.headerImg = results[i];
+        }
+        if (i === 'initApplication' && results[i]) {
+          this.results[i] = results[i].split(',');
+        }
+        if (i === 'indexUrl') {
+          this.homePage = results[i];
+          if (this.isHomePage) {
+            if (this.menus) {
+              let ids = null;
+              this.homePage && (ids = this.getId(this.menus, this.homePage));
+              if (ids) {
+                this.defaultActive = ids;
+              } else if (this.homePage) {
+                this.handleJump(this.homePage);
+              }
+              this.setMenu(this.menus);
+            }
+          }
+          //this.isHomePage && this.handleJump(this.homePage);
+        }
+        if (i === 'doorIndex' && results[i]) {
+          window.open(results[i]);
+        }
+        if (i === 'subsystemName') {
+          document.title = results[i];
+        }
+        if (i === 'resourceCodes') {
+          sessionStorage.setItem('useCaseCodes', results[i]);
+        }
+        if (i === 'sysLogoIco' && results[i]) {
+          util.setFavicon(results[i]);
+        }
+        if (i === 'userStyle' && results[i].color) {
+          this.color = unescape(results[i].color).toLowerCase();
+        }
+        if (i === 'subsystemExtend' && results[i].webPageWatermark) {
+          util.watermark(results[i].webPageWatermark);
+        }
+        store.set(i, results[i]);
+      }
+      this.userModel = results.userModel;
+    },
+    //获取用户配置及信息
+    getConfig() {
+      if (util.getStorage('mainConfig')) {
+        const results = JSON.parse(util.getStorage('mainConfig'));
+        this.setConfig(results);
+        return true;
+      }
+      util
+        .ajax({ url: this.mainConfig })
+        .then(res => {
+          if (res && res.rCode === 0) {
+            this.setConfig(res.results, 1);
+          } else {
+            let msg = res.msg || '系统错误，请联系管理员！';
+            this.$message.error(msg);
+          }
+        })
+        .catch(err => {
+          if (err.message && err.message !== 'canceled') {
+            this.$message.error(err.message);
+          }
+        });
+    },
+    reGetConfig() {
+      util
+        .ajax({ url: this.mainConfig })
+        .then(res => {
+          if (res && res.rCode === 0) {
+            const results = JSON.parse(JSON.stringify(res.results));
+            this.setConfig(results, 1);
+          } else {
+            let msg = res.msg || '系统错误，请联系管理员！';
+            this.$message.error(msg);
+          }
+        })
+        .catch(err => {
+          if (err.message && err.message !== 'canceled') {
+            this.$message.error(err.message);
+          }
+        });
+    },
+    jumpMenu(res) {
+      if (typeof res === 'string') {
+        res = res.split(',');
+      }
+      this.setDefault(this.menus, res);
+    },
+    getId(arry, res, path) {
+      if (!res) {
+        return false;
+      }
+      for (let i = 0; i < arry.length; i++) {
+        let item = arry[i];
+        if (
+          Object.prototype.hasOwnProperty.call(item, 'children') &&
+          item.children.length
+        ) {
+          let id = this.getId(item.children, res, path);
+          if (id) {
+            if (typeof id === 'string') {
+              this.isTabs = false;
+            }
+            if (item.pid === 'root') {
+              return [item.id].concat(id);
+            } else if (typeof id === 'string') {
+              return [item.id, id];
+            }
+            return id;
+          }
+        } else if (
+          Object.prototype.hasOwnProperty.call(item, 'fourthTabs') &&
+          item.fourthTabs.length
+        ) {
+          let id = this.getId(item.fourthTabs, res, path);
+          if (id) {
+            if (typeof id === 'string') {
+              this.isTabs = true;
+            }
+            if (item.pid === 'root') {
+              return [item.id].concat(id);
+            } else if (typeof id === 'string') {
+              return [item.id, id];
+            }
+            return id;
+          }
+        } else if (item.id === res || item.url == res) {
+          return item.id;
+        } else {
+          if (path && item.url) {
+            let url = new URL(item.url, window.location.origin);
+            if (url.hash == res) {
+              return item.id;
+            }
+          }
+        }
+      }
+      return false;
+    },
+    //获取应用导航菜单
+    getMenu() {
+      util
+        .ajax({ url: this.action })
+        .then(res => {
+          if (res.rCode === 0) {
+            this.menus = JSON.parse(JSON.stringify(res.results));
+            let applicationid =
+              util.getParams('applicationid') ||
+              util.getParams('applicationId');
+            if (applicationid) {
+              let ids = this.getId(this.menus, applicationid);
+              if (ids) {
+                this.defaultActive = ids;
+              }
+            } else {
+              let hash = util.win.location.hash;
+              if (hash) {
+                hash = hash.split('?')[0];
+              }
+              if (hash !== '#/' && hash !== '#/main') {
+                let ids = this.getId(this.menus, util.win.location.hash, true);
+                if (ids) {
+                  this.defaultActive = ids;
+                }
+              }
+            }
+            this.setTips(this.menus);
+            store.set('nav', this.menus);
+            this.setMenu(this.menus);
+          } else {
+            let msg = res.msg || '系统错误，请联系管理员！';
+            this.$message.error(msg);
+          }
+        })
+        .catch(err => {
+          if (err.message && err.message !== 'canceled') {
+            this.$message.error(err.message);
+          }
+        });
+    },
+    //设置默认左侧导航
+    setMenu(res) {
+      if (this.defaultActive && this.defaultActive.length) {
+        this.isDefault = false;
+        this.setDefault(res, this.defaultActive);
+      } else {
+        if (this.homePage || !util.getStorage('mainConfig')) {
+          this.isDefault = true;
+          if (
+            this.homePage &&
+            (!this.defaultActive || !this.defaultActive.length)
+          ) {
+            let ids = this.getId(this.menus, this.homePage);
+            if (ids) {
+              this.defaultActive = ids;
+              this.isDefault = false;
+              this.setDefault(res, this.defaultActive);
+              return false;
+            } else {
+              this.handleJump(this.homePage);
+            }
+          }
+        } else {
+          this.isDefault = false;
+        }
+        if (this.modal === 'subsystem' || this.modal === 'topside') {
+          if (this.modal === 'subsystem') {
+            this.subsystem = res;
+          } else if (this.modal === 'topside') {
+            this.navs = res;
+            this.topActive = res[0].id;
+          }
+          if (this.application) {
+            for (let i = 0; i < res.length; i++) {
+              if (res[i].hasPermission) {
+                this.menu = res[i].children;
+                this.title = res[i].text;
+                break;
+              }
+            }
+          } else {
+            this.menu = res[0].children;
+            this.title = res[0].text;
+          }
+          if (!this.isDefault) {
+            this.active = this.getFirst(this.menu[0]);
+          }
+        } else if (this.modal === 'topnav') {
+          this.navs = res;
+          this.topActive = this.getFirst(res[0]);
+        } else {
+          this.menu = res;
+          if (!this.isDefault) {
+            this.active = [this.menu[0].id];
+            let id = this.getFirst(this.menu[0]);
+            if (id && this.menu[0].id !== id) {
+              this.active.push(id);
+            } else {
+              this.handleJump(
+                this.menu[0].url,
+                this.menu[0].urlopenmode,
+                this.menu[0]
+              );
+            }
+          }
+        }
+      }
+    },
+    //获取菜单第一条数据
+    getFirst(obj) {
+      if (!obj) {
+        return '';
+      }
+      if (obj.children && obj.children.length) {
+        return this.getFirst(obj.children[0]);
+      } else if (obj.fourthTabs && obj.fourthTabs.length) {
+        if (this.modal === 'topnav') {
+          return this.getFirst(obj.fourthTabs[0]);
+        } else {
+          this.tabs = obj.fourthTabs;
+          if (obj.url) {
+            let tab = obj.fourthTabs.filter(item => {
+              return item.url === obj.url;
+            })[0];
+            if (tab) {
+              this.tabsId = tab.id;
+              this.handleJump(tab.url, tab.urlopenmode, tab);
+            }
+          } else {
+            this.tabsId = this.tabs[0].id;
+            this.handleJump(
+              this.tabs[0].url,
+              this.tabs[0].urlopenmode,
+              this.tabs[0]
+            );
+          }
+          return obj.id;
+        }
+      } else {
+        this.handleJump(obj.url, obj.urlopenmode, obj);
+      }
+      return obj.id;
+    },
+    //遍历设置菜单气泡提醒
+    setTips(obj) {
+      if (Array.isArray(obj)) {
+        obj.forEach(item => {
+          this.setTips(item);
+        });
+      } else {
+        if (Object.prototype.hasOwnProperty.call(obj, 'tips') && obj.tips) {
+          this.$set(obj, 'tips', false);
+          delete obj.tips;
+        }
+        let flag = false;
+        if (obj.children && obj.children.length) {
+          obj.children.forEach(item => {
+            if (this.setTips(item)) {
+              flag = true;
+            }
+          });
+          if (flag) {
+            this.$set(obj, 'tips', true);
+            return true;
+          }
+        } else if (obj.fourthTabs && obj.fourthTabs.length) {
+          obj.fourthTabs.forEach(item => {
+            if (this.setTips(item)) {
+              flag = true;
+            }
+          });
+          if (flag) {
+            this.$set(obj, 'tips', true);
+            return true;
+          }
+        } else {
+          if (this.menuTips[obj.id] && Number(this.menuTips[obj.id])) {
+            this.$set(obj, 'tips', Number(this.menuTips[obj.id]));
+            return true;
+          }
+        }
+      }
+      return false;
+    },
+    //设置默认导航页面
+    setDefault(res, active) {
+      this.sysId = '';
+      this.tabsId = '';
+      this.active = '';
+      this.getUrl(res, active);
+      if (
+        this.modal === 'subsystem' ||
+        this.modal === 'subSystem' ||
+        this.modal === 'topnav' ||
+        this.modal === 'topNav' ||
+        this.modal === 'topside' ||
+        this.modal === 'topSide'
+      ) {
+        if (this.modal === 'subsystem' || this.modal === 'subSystem') {
+          this.subsystem = res;
+          this.sysId = active[0];
+        } else if (
+          this.modal === 'topnav' ||
+          this.modal === 'topNav' ||
+          this.modal === 'topside' ||
+          this.modal === 'topSide'
+        ) {
+          this.navs = res;
+          this.topActive = active[0];
+        }
+        if (this.tabs.length || this.isTabs) {
+          this.tabsId = active[active.length - 1];
+          this.active = active.slice(1, active.length - 1);
+        } else {
+          this.active = active.slice(1);
+        }
+        for (let i = 0; i < res.length; i++) {
+          if (res[i].id === active[0]) {
+            this.menu = res[i].children;
+            this.title = res[i].text;
+            break;
+          }
+        }
+      } else {
+        this.menu = res;
+        if (this.biserial) {
+          this.active = active.slice(
+            0,
+            active.length > 2 ? active.length - 1 : active.length
+          );
+        } else {
+          this.active = active.slice(1);
+        }
+        this.tabsId = active[active.length - 1];
+      }
+    },
+    //获取页面类型及地址
+    getUrl(res, active, index) {
+      index = index === undefined ? 0 : index;
+      for (let i = 0; i < res.length; i++) {
+        let item = res[i];
+        if (item.id === active[index]) {
+          if (index === active.length - 1) {
+            this.handleJump(item.url, item.urlopenmode, item);
+            return item.url;
+          } else {
+            if (item.children && item.children.length) {
+              index++;
+              let url = this.getUrl(item.children, active, index);
+              if (url && index === active.length - 1) {
+                this.tabs = '';
+              }
+              return url;
+            }
+            if (item.fourthTabs && item.fourthTabs.length) {
+              index++;
+              let url = this.getUrl(item.fourthTabs, active, index);
+              if (url) {
+                this.$set(this, 'tabs', item.fourthTabs);
+              }
+              return url;
+            }
+          }
+        } else if (item.children && item.children.length) {
+          this.getUrl(item.children, active, index);
+        }
+      }
+      return false;
+    },
+
+    setUrl(url, param) {
+      let obj = param ? param : {};
+      let params = util.getParams({ url: url }, true);
+      for (let i in params) {
+        if (i != 'model' && i != 'view' && i != '_baseUrl') {
+          obj[i] = params[i];
+        }
+      }
+      let _url = params._baseUrl ? params._baseUrl : './primary.html';
+      return util.urlJoinParams({ url: _url, param: obj });
+    },
+    //应用导航交互
+    handleSelect(res, type) {
+      this.isDefault = false;
+      const { node } = res;
+      switch (type) {
+        case 'nav':
+          this.tabs = [];
+          this.active = '';
+          if (this.modal === 'topside') {
+            this.menu = node.children;
+            this.title = node.text;
+            this.active = this.getFirst(node.children[0]);
+          } else {
+            if (node.url) {
+              let tab = node.fourthTabs.filter(item => {
+                return item.url === node.url;
+              })[0];
+              if (tab) {
+                this.tabs = node.fourthTabs;
+                this.tabsId = tab.id;
+              }
+            } else {
+              if (node.fourthTabs.length) {
+                this.tabs = node.fourthTabs;
+                this.tabsId = this.tabs[0].id;
+                this.handleJump(
+                  this.tabs[0].url,
+                  this.tabs[0].urlopenmode,
+                  this.tabs[0]
+                );
+              }
+            }
+          }
+          break;
+        case 'sys':
+          this.tabs = [];
+          this.menu = node.children;
+          this.title = node.text;
+          this.active = this.getFirst(node.children[0]);
+          break;
+        case 'sub':
+          if (node.url) {
+            this.tabs = [];
+          }
+          if (this.setFirstAsDefault) {
+            let id = this.getFirst(node);
+            if (node.id !== id) {
+              this.$set(this.active, 0, node.id);
+              this.$set(this.active, 1, id);
+            }
+          }
+          break;
+        case 'menu':
+          this.tabsId = '';
+          this.tabs = [];
+          if (this.setFirstAsDefault) {
+            if (this.biserial) {
+              this.$set(this.active, 1, node.id);
+            } else {
+              this.active = node.id;
+            }
+          }
+          if (node.url) {
+            let tab = (node.fourthTabs || []).filter(item => {
+              return item.url === node.url;
+            })[0];
+            if (tab) {
+              this.tabs = node.fourthTabs;
+              this.tabsId = tab.id;
+            }
+          } else if (node.fourthTabs.length) {
+            this.tabs = node.fourthTabs;
+            this.tabsId = this.tabs[0].id;
+            this.handleJump(
+              this.tabs[0].url,
+              this.tabs[0].urlopenmode,
+              this.tabs[0]
+            );
+          }
+          break;
+        case 'tabs':
+          break;
+      }
+      if (node.url) {
+        this.selectPage = node.url;
+        this.refresh = false;
+        this.handleJump(node.url, Number(node.urlopenmode), node);
+      }
+    },
+    hasRouter(res, url) {
+      if (!url) {
+        return false;
+      }
+      if (Array.isArray(res)) {
+        for (let i in res) {
+          let path = this.hasRouter(res[i], url);
+          if (path) {
+            return path;
+          }
+        }
+      } else {
+        let path = res.path;
+        if (path !== '/' && path !== '/404') {
+          path = path.replace(path[1], path[1].toLowerCase());
+        }
+        let pathname = url.substring(url.indexOf('#/') + 1);
+        pathname = pathname
+          .replace(pathname[1], pathname[1].toLowerCase())
+          .split('?')[0];
+        if (res.path !== '/' && pathname == path) {
+          return pathname;
+        }
+        if (Object.prototype.hasOwnProperty.call(res, 'children')) {
+          let path = this.hasRouter(res.children, url);
+          if (path) {
+            return path;
+          }
+        }
+      }
+      return false;
+    },
+    handleTrigger(res) {},
+    //头部工具交互事件
+    handleClick(res) {
+      const { type } = res;
+      switch (type) {
+        //刷新
+        case 'refresh':
+          this.handleRefresh();
+          break;
+        case 'home':
+          this.reset = false;
+          if (this.homePage) {
+            this.handleJump(this.homePage);
+          }
+          this.active = '';
+          this.defaultActive = [];
+          this.tabs = [];
+          this.setMenu(this.menus);
+          this.$nextTick(() => {
+            this.reset = true;
+          });
+          break;
+        case 'user':
+          this.showUserInfo = true;
+          break;
+        case 'online':
+          this.dialog = {
+            title: '查看在线人员',
+            show: true,
+            url: '/main/sysuseronline/list.dhtml'
+          };
+          break;
+        case 'notice':
+          this.showMsg = !this.showMsg;
+          break;
+        case 'set':
+          this.handleSet();
+          break;
+        case 'goView':
+          util.win.open(res.path, '_blank');
+          break;
+      }
+    },
+    //刷新子页面、子路由
+    handleRefresh() {
+      if (this.method === 'iframe') {
+        this.page = util.handlerUrl(this.page);
+      } else {
+        this.refresh = false;
+        this.$nextTick(() => {
+          this.refresh = true;
+        });
+      }
+    },
+    //跳转页面
+    handleJump(page, type, res) {
+      console.log(page);
+      if (util.win.location.hash === page) {
+        this.refresh = true;
+        return;
+      }
+      if (type == 1) {
+        util.win.open(page);
+      } else if (type == 2) {
+        location.href = page;
+      } else if (type == 3) {
+        this.method = 'iframe';
+        this.refresh = false;
+        this.page = util.handlerUrl(page);
+      } else if (page) {
+        let urls = page.split('?');
+        if (urls[0].indexOf('.js') > 1) {
+          this.method = 'wujie';
+          this.wjName = 'singlespa';
+          this.page = page;
+          this.$nextTick(() => {
+            this.refresh = true;
+          });
+        } else if (
+          urls[0].indexOf('.dhtml') > 0 ||
+          (urls[0].indexOf('.html') > 0 && urls[0].indexOf('.html#') === -1)
+        ) {
+          this.method = 'iframe';
+          this.refresh = false;
+          this.page = util.handlerUrl(page);
+        } else {
+          if (urls[0].indexOf('.html') === -1 && urls[0].indexOf('#/') === -1) {
+            this.method = 'iframe';
+            this.refresh = false;
+            this.page = util.handlerUrl(page);
+          } else {
+            this.method = 'router';
+            const routes = this.$router.options.routes;
+            if (routes) {
+              let path = this.hasRouter(routes, urls[0]);
+              if (path) {
+                let params = util.getParams({ url: page });
+                if (res) {
+                  this.routerKey = res.id;
+                  if (Object.prototype.hasOwnProperty.call(res, 'keepAlive')) {
+                    this.isKeepAlive = res.keepAlive;
+                  }
+                }
+                this.$router.push({
+                  path: path,
+                  query: params
+                });
+                this.$nextTick(() => {
+                  this.refresh = true;
+                });
+              } else {
+                let urlopenmode = util.getParams({
+                  url: page,
+                  name: 'urlopenmode'
+                });
+                if (
+                  this.loadWujie === false ||
+                  (this.downgrade && isIE) ||
+                  urlopenmode == 3
+                ) {
+                  this.method = 'iframe';
+                  this.refresh = false;
+                  this.page = util.handlerUrl(page);
+                } else {
+                  this.method = 'wujie';
+                  this.wjName = res.appCode ? res.appCode : 'application';
+                  this.page = page;
+                  this.$nextTick(() => {
+                    this.refresh = true;
+                  });
+                }
+              }
+            } else {
+              console.error('缺少路由配置');
+              return;
+            }
+          }
+        }
+      }
+    },
+    //设置回调
+    handleChange(res) {
+      const { type, value } = res;
+      switch (type) {
+        case 'theme':
+          this.setTheme(value);
+          break;
+        case 'ignore':
+          this.notice = 0;
+          break;
+      }
+    },
+    //监听改变菜单
+    handleListener() {
+      util.win.addEventListener(
+        'message',
+        e => {
+          var msg = e.data;
+          if (msg.key == 'jump_Menu') {
+            let res = msg.data1;
+            if (typeof res === 'string') {
+              res = res.split(',');
+            }
+            this.setDefault(this.menus, res);
+          }
+        },
+        false
+      );
+    },
+    //开启weosocket
+    initWebSocket() {
+      //初始化weosocket
+      if (!this.websocket) {
+        const url = (util.getStorage('wshost') || '') + wss;
+        this.websocket = new SockJS(url);
+      }
+      this.client = Stomp.over(this.websocket);
+      if (!this.isConsole && this.client) {
+        this.client.debug = null;
+      }
+      this.handleConnect(this.client);
+    },
+    handleConnect(client) {
+      client.connect(
+        {},
+        () => {
+          //localStorage.setItem("socket",true);
+          //订阅服务端的
+          client.subscribe(topic, response => {
+            let res = JSON.parse(response.body);
+            let data = res.data;
+            for (let i in data) {
+              if (data[i] !== null && data[i] !== undefined) {
+                if (i === 'onlineUserNums' && data[i] > 0) {
+                  this.online = data[i];
+                }
+                if (i === 'sysMsgNums') {
+                  this.notice = data[i];
+                  if (this.showMsg) {
+                    this.$refs.message.getMsg(true);
+                  }
+                }
+                if (i === 'menuTipsMap') {
+                  this.menuTips = data[i];
+                }
+                if (i === 'sysMsgList') {
+                  this.sysMsg = data[i];
+                }
+                if (i === 'extraData') {
+                  this.extraData = data[i];
+                }
+              }
+            }
+          });
+        },
+        error => {
+          console.log('webSocket连接失败');
+          client.disconnect();
+        }
+      );
+    },
+    handleOpened(res) {
+      if (res === undefined) {
+        this.sysMsg = [];
+      } else if (res == false && this.sysMsg.length) {
+        this.sysMsgOut = setTimeout(() => {
+          this.sysMsg = [];
+        }, 3000);
+      } else if (this.sysMsgOut) {
+        clearTimeout(this.sysMsgOut);
+      }
+    },
+    handleDialog(obj) {
+      this.dialog = obj;
+    },
+    handleUserModel(name, val) {
+      this.$set(this.userModel, name, val);
+    },
+    handleMenuTips(id, num) {
+      if (num) {
+        this.$set(this.menuTips, id, num);
+      } else {
+        let n = parseInt(this.menuTips[id], 10) - 1;
+        this.$set(this.menuTips, id, n);
+      }
+    },
+    handleReLogin(res) {
+      if (res && typeof res == 'string') {
+        res = JSON.parse(res);
+      }
+      let msg = '提示';
+      let btn = {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        closeOnClickModal: false,
+        type: 'warning'
+      };
+      if (res) {
+        if (res.rCode === 69) {
+          msg = '该账号在其他地方已登陆!';
+          btn = {
+            confirmButtonText: '确定',
+            closeOnClickModal: false,
+            type: 'warning'
+          };
+        } else {
+          console.log('handleReLogin');
+          msg = '登录已过期，请重新登录！';
+        }
+      }
+      this.$confirm(msg, btn)
+        .then(() => {
+          util.removeStorage([
+            'Authorization',
+            'token',
+            'ssId',
+            'userId',
+            'userName',
+            'auth',
+            'deviceUnique',
+            'menus',
+            'useCaseCodes',
+            'mainConfig'
+          ]);
+          if (util.win.top.location.href.indexOf('main.html') > -1) {
+            util.win.top.location.href = './login.html';
+          } else {
+            const hash = util.win.top.location.hash;
+            if (hash) {
+              const len = util.win.top.location.href.indexOf(hash);
+              let href = util.win.top.location.href.slice(0, len) + '#/login';
+              util.win.top.location.href = href;
+            } else {
+              const loginPage =
+                util.getStorage('login') || util.getStorage('loginPage');
+              if (loginPage) {
+                util.win.top.location.href = loginPage;
+              } else {
+                util.win.top.location.href = '/login.html';
+              }
+            }
+          }
+        })
+        .catch(e => {});
+    },
+    openPage(url, name, width, height) {
+      let src = url;
+      if (!util.startWith(url, ['http', '/'])) {
+        let pathname = window.location.pathname;
+        if (pathname !== '/') {
+          pathname = pathname.split('/');
+          pathname.splice(pathname.length - 1);
+          pathname = pathname.join('/');
+        }
+        src = pathname + url.replace('./', '');
+      }
+      if (name) {
+        let w = width ? width : util.win.top.screen.availWidth - 10;
+        let h = height ? height : util.win.top.screen.availHeight - 60;
+        util.win.open(
+          src,
+          name,
+          `width=${w}px,height=${h}px,resizable=yes,status=yes,menubar=no,scrollbars=yes`
+        );
+      } else {
+        util.win.open(src);
+      }
+    }
+  },
+  beforeDestroy() {
+    if (this.client && this.client.connected) {
+      this.client.disconnect();
+    }
+  }
+};
+</script>