From 4315cdade352238127e8f2d6302fde5e0c2322d8 Mon Sep 17 00:00:00 2001 From: joylink_cuiweidong <364937672@qq.com> Date: Wed, 15 Jan 2020 14:32:17 +0800 Subject: [PATCH] =?UTF-8?q?socket=E5=BC=B9=E5=87=BA=E5=B1=82=E5=A4=84?= =?UTF-8?q?=E7=90=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/layout/index.vue | 34 ++++++++++++ src/store/modules/app.js | 113 +++++++++++++++++++++------------------ src/utils/sock.js | 9 ++-- 3 files changed, 99 insertions(+), 57 deletions(-) diff --git a/src/layout/index.vue b/src/layout/index.vue index b039d0def..fcab1e2d3 100644 --- a/src/layout/index.vue +++ b/src/layout/index.vue @@ -12,6 +12,20 @@
{{ isHyd? '哈尔滨盈达科技有限公司 联系电话:0451-87001273' : $t('global.companyICP') }}
+
+ + {{ dialogMessage }} + + {{ $t('global.confirm') }} + + +
@@ -26,6 +40,7 @@ export default { }, data() { return { + dialogVisible: false }; }, computed: { @@ -49,6 +64,19 @@ export default { }, isHyd() { return getSessionStorage('project').endsWith('hyd'); + }, + dialogMessage() { + return this.$store.state.app.dialogMessage; + } + }, + watch:{ + '$store.state.app.dialogMessage':function(val) { + debugger; + if (val == '') { + this.dialogVisible = false; + } else { + this.dialogVisible = true; + } } }, created() { @@ -62,6 +90,9 @@ export default { this.$router.beforeEach((to, from, next) => { next(); }); + }, + closeDialog() { + this.$store.dispatch('app/SET_DIALOG_MESSAGE', ''); } } }; @@ -107,6 +138,9 @@ export default { height: 100%; } } + .el-dialog.dialogMessage{ + width:400px !important; + } // 定义公共card样式 .joylink-card{ diff --git a/src/store/modules/app.js b/src/store/modules/app.js index 1149f4962..11b0eebde 100644 --- a/src/store/modules/app.js +++ b/src/store/modules/app.js @@ -1,66 +1,73 @@ import Cookies from 'js-cookie'; const state = { - sidebar: { - opened: Cookies.get('sidebarStatus') ? !!+Cookies.get('sidebarStatus') : true, - withoutAnimation: false - }, - device: 'desktop', - width: document.documentElement.clientWidth, - height: document.documentElement.clientHeight, - windowSizeCount: 0 + sidebar: { + opened: Cookies.get('sidebarStatus') ? !!+Cookies.get('sidebarStatus') : true, + withoutAnimation: false + }, + device: 'desktop', + width: document.documentElement.clientWidth, + height: document.documentElement.clientHeight, + windowSizeCount: 0, + dialogMessage:'' }; const mutations = { - TOGGLE_SIDEBAR: state => { - state.sidebar.opened = !state.sidebar.opened; - state.sidebar.withoutAnimation = false; - if (state.sidebar.opened) { - Cookies.set('sidebarStatus', 1); - } else { - Cookies.set('sidebarStatus', 0); - } - }, - CLOSE_SIDEBAR: (state, withoutAnimation) => { - Cookies.set('sidebarStatus', 0); - state.sidebar.opened = false; - state.sidebar.withoutAnimation = withoutAnimation; - }, - TOGGLE_DEVICE: (state, device) => { - state.device = device; - }, - SET_WIDTH: (state, width) => { - state.width = width; - }, - SET_HEIGHT: (state, height) => { - state.height = height; - } + TOGGLE_SIDEBAR: state => { + state.sidebar.opened = !state.sidebar.opened; + state.sidebar.withoutAnimation = false; + if (state.sidebar.opened) { + Cookies.set('sidebarStatus', 1); + } else { + Cookies.set('sidebarStatus', 0); + } + }, + CLOSE_SIDEBAR: (state, withoutAnimation) => { + Cookies.set('sidebarStatus', 0); + state.sidebar.opened = false; + state.sidebar.withoutAnimation = withoutAnimation; + }, + TOGGLE_DEVICE: (state, device) => { + state.device = device; + }, + SET_WIDTH: (state, width) => { + state.width = width; + }, + SET_HEIGHT: (state, height) => { + state.height = height; + }, + SET_DIALOG_MESSAGE:(state, dialogMessage)=>{ + state.dialogMessage = dialogMessage; + } }; const actions = { - toggleSideBar({ commit }) { - commit('TOGGLE_SIDEBAR'); - }, - closeSideBar({ commit }, { withoutAnimation }) { - commit('CLOSE_SIDEBAR', withoutAnimation); - }, - toggleDevice({ commit }, device) { - commit('TOGGLE_DEVICE', device); - }, - resize({ state, commit }, opt) { - if (opt.width) { - commit('SET_WIDTH', opt.width); - } - if (opt.height) { - commit('SET_HEIGHT', opt.height); - } - state.windowSizeCount += 1; - } + toggleSideBar({ commit }) { + commit('TOGGLE_SIDEBAR'); + }, + closeSideBar({ commit }, { withoutAnimation }) { + commit('CLOSE_SIDEBAR', withoutAnimation); + }, + toggleDevice({ commit }, device) { + commit('TOGGLE_DEVICE', device); + }, + resize({ state, commit }, opt) { + if (opt.width) { + commit('SET_WIDTH', opt.width); + } + if (opt.height) { + commit('SET_HEIGHT', opt.height); + } + state.windowSizeCount += 1; + }, + SET_DIALOG_MESSAGE({ commit }, dialogMessage) { + commit('SET_DIALOG_MESSAGE', dialogMessage); + } }; export default { - namespaced: true, - state, - mutations, - actions + namespaced: true, + state, + mutations, + actions }; diff --git a/src/utils/sock.js b/src/utils/sock.js index 6ed81add9..135892d49 100644 --- a/src/utils/sock.js +++ b/src/utils/sock.js @@ -52,7 +52,8 @@ StompClient.prototype = { const that = this; this.clientIns.connect({ 'X-Token': getToken() }, () => { if (notFirstConnect) { - Message.success('连接成功'); + store.dispatch('app/SET_DIALOG_MESSAGE', ''); + setTimeout(()=>{ Message.success('连接成功'); }); } console.info('连接成功.'); that.count = 0; @@ -65,7 +66,8 @@ StompClient.prototype = { // sock断开回调 this.clientIns.ws.onclose = () => { - MessageBox.confirm('socket已经断开'); + // MessageBox.confirm('连接已经断开'); + store.dispatch('app/SET_DIALOG_MESSAGE', 'socket连接已断开'); notFirstConnect = true; checkLoginLine().then(() => { this.status = false; @@ -76,7 +78,6 @@ StompClient.prototype = { }); }; this.clientIns.ws.onerror = ()=>{ - // debugger; console.log(1111); }; resolve(this); @@ -109,7 +110,7 @@ StompClient.prototype = { // 恢复链接 reconnect(count) { console.info(`尝试第${count || 1}次连接.`); - Message.error(`正在尝试第${count || 1}次连接.`); + store.dispatch('app/SET_DIALOG_MESSAGE', `正在尝试第${count || 1}次连接.`); const that = this; setTimeout(() => { that.connect().then(() => { }).catch(() => {