socket弹出层处理

src/layout/index.vue

@@ -12,6 +12,20 @@
         <div style="font-size:14px;float:right;">{{ isHyd? '哈尔滨盈达科技有限公司 联系电话:0451-87001273' : $t('global.companyICP') }}</div>
       </el-footer>
     </div>
+    <div>
+      <el-dialog
+        :title="$t('tip.hint')"
+        custom-class="dialogMessage"
+        :visible.sync="dialogVisible"
+        width="30%"
+        :before-close="closeDialog"
+      >
+        <span>{{ dialogMessage }}</span>
+        <span slot="footer" class="dialog-footer">
+          <el-button type="primary" @click="closeDialog">{{ $t('global.confirm') }}</el-button>
+        </span>
+      </el-dialog>
+    </div>
   </div>
 </template>
 
@@ -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{

src/store/modules/app.js

@@ -8,7 +8,8 @@ const state = {
     device: 'desktop',
     width: document.documentElement.clientWidth,
     height: document.documentElement.clientHeight,
-	windowSizeCount: 0
+    windowSizeCount: 0,
+    dialogMessage:''
 };
 
 const mutations = {
@@ -34,6 +35,9 @@ const mutations = {
     },
     SET_HEIGHT: (state, height) => {
         state.height = height;
+    },
+    SET_DIALOG_MESSAGE:(state, dialogMessage)=>{
+        state.dialogMessage = dialogMessage;
     }
 };
 
@@ -55,6 +59,9 @@ const actions = {
             commit('SET_HEIGHT', opt.height);
         }
         state.windowSizeCount += 1;
+    },
+    SET_DIALOG_MESSAGE({ commit }, dialogMessage) {
+        commit('SET_DIALOG_MESSAGE', dialogMessage);
     }
 };
 

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(() => {