eoss-ui 0.5.11 → 0.5.13

package/packages/theme-chalk/lib/nav.css

@@ -1 +1 @@
-@charset "UTF-8";.es-nav,.es-nav .es-nav-main{display:inline-block;overflow:hidden}.es-nav{transition:all .2s;-webkit-transition:all .2s}.es-nav .el-menu,.es-nav .es-menu{background-color:transparent}.es-nav .es-nav-main{position:relative;height:100%;background-color:#002766;border-right:1px solid #d9d9d9}.es-nav .es-nav-main .es-nav-title{width:100%;height:45px;font-size:16px;line-height:44px;text-align:center;overflow:hidden;padding-right:32px;background-color:#096dd9;color:#fff;position:relative;z-index:1;-webkit-box-shadow:0 4px 10px 0 rgba(0,0,0,.2);box-shadow:0 4px 10px 0 rgba(0,0,0,.2)}.es-nav .es-nav-main .es-nav-title .es-collapse-handle{font-size:20px;cursor:pointer;position:absolute;right:12px;top:50%;margin-top:-10px;color:#fff}.es-nav .es-nav-main .es-nav-title .es-collapse-handle.es-icon-zengjiasuojinliang{right:50%;margin-right:-10px}.es-nav .es-nav-initial{width:70px;-webkit-box-shadow:0 6px 30px 5px rgba(0,0,0,.05),0 16px 24px 2px rgba(0,0,0,.04),0 8px 10px -5px rgba(0,0,0,.08);box-shadow:0 6px 30px 5px rgba(0,0,0,.05),0 16px 24px 2px rgba(0,0,0,.04),0 8px 10px -5px rgba(0,0,0,.08);position:relative;z-index:2;height:100%;background:#003a8c}.es-nav .es-nav-initial .el-menu-item,.es-nav .es-nav-initial .es-menu-vertical{height:auto}.es-nav .es-nav-initial .el-menu-item.is-active,.es-nav .es-nav-initial .es-menu-vertical.is-active{background:#096dd9}.es-nav.es-nav-biserial{position:relative}.es-nav.es-nav-biserial .es-nav-main{position:absolute;left:70px;top:0;bottom:0}.es-nav.es-nav-biserial .es-menu-title-vertical{margin-right:0}
+@charset "UTF-8";.es-nav,.es-nav .es-nav-main{display:inline-block;overflow:hidden}.es-nav{transition:all .2s;-webkit-transition:all .2s}.es-nav .el-menu,.es-nav .es-menu{background-color:transparent}.es-nav .es-nav-main{position:relative;height:100%;background-color:#002766;border-right:1px solid #d9d9d9}.es-nav .es-nav-main .es-nav-title{width:100%;height:45px;font-size:15px;line-height:30px;text-align:center;overflow:hidden;padding:7px 32px 7px 0;background-color:#096dd9;color:#fff;position:relative;z-index:1;-webkit-box-shadow:0 4px 10px 0 rgba(0,0,0,.2);box-shadow:0 4px 10px 0 rgba(0,0,0,.2)}.es-nav .es-nav-main .es-nav-title .es-collapse-handle{font-size:20px;cursor:pointer;position:absolute;right:12px;top:50%;margin-top:-10px;color:#fff}.es-nav .es-nav-main .es-nav-title .es-collapse-handle.es-icon-zengjiasuojinliang{right:50%;margin-right:-10px}.es-nav .es-nav-main .es-nav-title .el-tooltip{text-align:center;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;position:relative;padding:0 4px}.es-nav .es-nav-main .es-nav-title .el-tooltip.es-nav-title-filter{padding-right:10px;cursor:pointer}.es-nav .es-nav-main .es-nav-title .el-tooltip.es-nav-title-filter .el-icon--right{position:absolute;right:6px;top:50%;margin-top:-4px}.es-nav .es-nav-initial{width:70px;-webkit-box-shadow:0 6px 30px 5px rgba(0,0,0,.05),0 16px 24px 2px rgba(0,0,0,.04),0 8px 10px -5px rgba(0,0,0,.08);box-shadow:0 6px 30px 5px rgba(0,0,0,.05),0 16px 24px 2px rgba(0,0,0,.04),0 8px 10px -5px rgba(0,0,0,.08);position:relative;z-index:2;height:100%;background:#003a8c}.es-nav .es-nav-initial .el-menu-item,.es-nav .es-nav-initial .es-menu-vertical{height:auto}.es-nav .es-nav-initial .el-menu-item.is-active,.es-nav .es-nav-initial .es-menu-vertical.is-active{background:#096dd9}.es-nav.es-nav-biserial{position:relative}.es-nav.es-nav-biserial .es-nav-main{position:absolute;left:70px;top:0;bottom:0}.es-nav.es-nav-biserial .es-menu-title-vertical{margin-right:0}

package/packages/theme-chalk/src/nav.scss

@@ -18,10 +18,11 @@
     .es-nav-title {
       width: 100%;
       height: 45px;
-      font-size: 16px;
-      line-height: 44px;
+      font-size: 15px;
+      line-height: 30px;
       text-align: center;
       overflow: hidden;
+      padding: 7px 32px 7px 0;
       padding-right: 32px;
       background-color: $--color-primary-light-7;
       color: #fff;
@@ -41,6 +42,24 @@
           margin-right: -10px;
         }
       }
+      .el-tooltip {
+        text-align: center;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+        position: relative;
+        padding: 0 4px;
+        &.es-nav-title-filter {
+          padding-right: 10px;
+          cursor: pointer;
+          .el-icon--right {
+            position: absolute;
+            right: 6px;
+            top: 50%;
+            margin-top: -4px;
+          }
+        }
+      }
     }
   }
   .es-nav-initial {

package/src/index.js

@@ -117,7 +117,7 @@ if (typeof window !== 'undefined' && window.Vue) {
 }
 
 export default {
-  version: '0.5.11',
+  version: '0.5.13',
   install,
   Button,
   ButtonGroup,

package/src/utils/util.js

@@ -7,12 +7,11 @@
 
 /* eslint-disable indent */
 const sm2 = require('sm-crypto').sm2;
-import { authCenter, wss, topic } from '../config/api';
+import { authCenter } from '../config/api';
 import axios from 'axios';
 import qs from 'qs';
 import JSONbig from 'json-bigint';
-import SockJS from 'sockjs-client';
-import Stomp from 'stompjs';
+import WebSocket from './webSocket';
 
 const win = window.__WUJIE_RAW_WINDOW__ ? window.__WUJIE_RAW_WINDOW__ : window;
 
@@ -1997,29 +1996,29 @@ const isLogined = function ({
       }).catch(e => { });
     } else
       if (
-      token ||
-      to.path === '/' ||
-      to.path === '/404' ||
-      exclude.indexOf(to.path) > -1 || exclude.indexOf(to.name) > -1 ||
-      to.path === '/login' ||
-      (token && to.path === '/main')
-    ) {
-      if (redirect && (to.path === '/main' || to.path === '/login')) {
-        window.location.replace(urlJoinParams({ url: `.${to.path}.html`, param: to.query }));
-      } else {
-        next();
-      }
-    } else {
-      if (loginPage) {
-        win.top.location.replace(loginPage);
-      } else if (document.referrer) {
-        win.top.location.replace(document.referrer);
-      } else if (win.top.location.href.indexOf('main.html') > -1) {
-        win.top.location.href = './login.html';
+        token ||
+        to.path === '/' ||
+        to.path === '/404' ||
+        exclude.indexOf(to.path) > -1 || exclude.indexOf(to.name) > -1 ||
+        to.path === '/login' ||
+        (token && to.path === '/main')
+      ) {
+        if (redirect && (to.path === '/main' || to.path === '/login')) {
+          window.location.replace(urlJoinParams({ url: `.${to.path}.html`, param: to.query }));
+        } else {
+          next();
+        }
       } else {
-        next('/login');
+        if (loginPage) {
+          win.top.location.replace(loginPage);
+        } else if (document.referrer) {
+          win.top.location.replace(document.referrer);
+        } else if (win.top.location.href.indexOf('main.html') > -1) {
+          win.top.location.href = './login.html';
+        } else {
+          next('/login');
+        }
       }
-    }
   }
 };
 const isLogged = function (res) {
@@ -2475,64 +2474,13 @@ const setStorage = function ({ type, key, value }) {
  * @param {String} [take] - 订阅地址
  * @param {String} [debug] - 调试
  * @param {String} [interval] - 重连间隔时间
+ * @param {Function} [success] - 调试
+ * @param {Function} [error] - 重连间隔时间
  **/
-function socket(options) {
-  let nextDate = 0;
-  let connect = 1;
-  return new Promise((resolve, reject) => {
-    let wshost = getStorage('wshost') || '';
-    let option = {
-      url: wshost + wss,
-      take: topic,
-      debug: true,
-      interval: 20
-    };
-    let websocket = win.websocket || {};
-    if (options && isObject(options)) {
-      option = { ...option, ...options };
-    }
-    let key = window.btoa(option.url);
-    if (!websocket[key]) {
-      websocket[key] = { socket: new SockJS(option.url) };
-      win.websocket = websocket;
-    }
-
-    let client = websocket[key] ? websocket[key].client : null;
-    if (!client) {
-      client = websocket[key].client = Stomp.over(websocket[key].socket);
-      !option.debug && (client.debug = null);
-    }
-    client.connect(
-      {},
-      () => {
-        client.subscribe(option.take, (response) => {
-          let res = JSON.parse(response.body);
-          resolve(res, () => {
-            client.disconnect();
-            win.top.websocket && win.top.websocket[key] && delete win.top.websocket[key];
-          }, client, websocket[key]);
-        });
-      },
-      (error) => {
-        let diffSecond = parseInt((new Date() - nextDate) / 1000, 10);
-        if (connect > 5 && diffSecond < option.interval) {
-          client.disconnect();
-          if (win.top.websocket) {
-            if (Object.keys(win.top.websocket).length > 1) {
-              delete win.top.websocket[key];
-            } else {
-              delete win.top.websocket;
-            }
-          }
-        } else {
-          win.top.websocket && win.top.websocket[key] && setTimeout(() => {
-            socket(options);
-          }, 5000);
-        }
-        reject(error);
-      }
-    );
-  });
+function socket(option, vm) {
+  const socket = new WebSocket();
+  socket.init(option, vm);
+  return socket;
 }
 /**
  * sum

package/src/utils/webSocket.js

@@ -0,0 +1,100 @@
+import SockJS from 'sockjs-client';
+import Stomp from 'stompjs';
+class WebSocket {
+  // 构造函数
+  constructor() {
+    this.host = sessionStorage.getItem('wshost') || '';
+    this.tryTimes = 1; // 重连次数
+    this.callback = null; // 回调函数
+    this.client = null; // stomp对象
+    this.reconTimeout = null; // 重连延时器
+    this.debug = true; // 调试
+    this.interval = 20; // 重连间隔时间
+    this.vm = null;
+    this.nextDate = 0;
+    this.connects = 1;
+    this.recon = false;
+    this.sendTimeout = null;
+  }
+
+  /** socket连接 */
+  connect() {
+    if (!this.client) {
+    // 连接SockJS
+      let socket = new SockJS(this.host + this.url);
+      // 获取STOMP子协议的客户端对象
+      this.client = Stomp.over(socket);
+
+    }
+
+    // 日志不打印
+    if (!this.debug) {
+      console.log(111);
+      this.client.debug = () => {};
+    }
+
+    // 向服务器发起websocket连接
+    this.client.connect({}, () => {
+      this.recon = true;
+      // tryTimes定义重置
+      this.connects = 1;
+      // 订阅消息
+      this.subscribe();
+    }, (error) => {
+      let diffSecond = parseInt((new Date() - this.nextDate) / 1000, 10);
+      if (this.connects > 5 && diffSecond < this.interval) {
+        this.client.disconnect();
+        this.error && this.error(error);
+      } else {
+        this.reconTimeout = setTimeout(() => {
+          this.connect();
+          this.connects++;
+        }, 5000);
+      }
+    });
+  }
+  /** 订阅服务端 */
+  subscribe() {
+    // 订阅服务端提供的某个topic
+    this.client.subscribe(this.take, (response) => {
+      if (response && (this.callback || this.success)) {
+        let callback = this.callback || this.success;
+        callback(JSON.parse(response.body));
+      }
+    });
+  }
+
+  /** 赋值、初始化socket */
+  init(option, vm) {
+    for (let i in option) {
+      this[i] = option[i];
+    }
+    this.vm = vm;
+    // 初始化连接
+    this.connect();
+  }
+
+  /** 发送消息 */
+  send(data) {
+    if (this.recon) {
+      clearTimeout(this.sendTimeout);
+      this.client.send(this.take, {}, typeof data === 'string' ? data : JSON.stringify(data));
+    } else {
+      this.sendTimeout = setTimeout(() => {
+        this.send(data);
+      }, 1000);
+    }
+  }
+
+  /** 销毁 */
+  destroy() {
+    // 断开连接,清除定时器
+    if (this.client) {
+      this.client.disconnect();
+    };
+    this.reconTimeout && clearTimeout(this.reconTimeout);
+    this.sendTimeout && clearTimeout(this.sendTimeout);
+  }
+}
+
+export default WebSocket;