页面修改

src/api/common/socket.js

+var websock = null;
+var global_callback = null;
+//webSocket连接端口
+var serverPort = '10086';
+
+/**
+ * 初始化weosocket
+ */
+function initWebSocket() {
+  //ws地址
+  var wsuri = "ws://192.168.20.8:" + serverPort;
+  websock = new WebSocket(wsuri);
+  websock.onmessage = function (e) {
+    websocketonmessage(e);
+  }
+  websock.onclose = function (e) {
+    websocketclose(e);
+  }
+  websock.onopen = function () {
+    websocketOpen();
+  }
+  //连接发生错误的回调方法
+  websock.onerror = function () {
+    console.log("WebSocket连接发生错误");
+  }
+}
+
+/**
+ * 实际调用发送消息的方法
+ * @param {*} postData 参数
+ * @param {*} callback 回调函数
+ */
+function sendSock(postData, callback) {
+  global_callback = callback;
+  if (websock.readyState === websock.OPEN) {
+    //若是ws开启状态
+    websocketsend(postData)
+  } else if (websock.readyState === websock.CONNECTING) {
+    // 若是 正在开启状态，则等待1s后重新调用
+    setTimeout(function () {
+      sendSock(postData, callback);
+    }, 1000);
+  } else {
+    // 若未开启 ，则等待1s后重新调用
+    setTimeout(function () {
+      sendSock(postData, callback);
+    }, 1000);
+  }
+}
+
+/**
+ * 数据接收
+ */
+function websocketonmessage(e) {
+  global_callback(e);
+}
+
+/**
+ * 数据发送
+ * @param {*} agentData 
+ */
+function websocketsend(agentData) {
+  websock.send(JSON.stringify(agentData));
+}
+
+/**
+ * 关闭
+ */
+function websocketclose(e) {
+  console.log("connection closed (" + e.code + ")");
+}
+
+/**
+ * 连接
+ */
+function websocketOpen(e) {
+  console.log("连接成功");
+}
+
+initWebSocket();
+
+export {
+  sendSock
+}

src/layouts/MainLayout.vue

@@ -9,8 +9,8 @@
           {{name}}
         </q-toolbar-title>
         <q-tabs v-model="tab" @input="changeNavs" inline-label
-          style="margin:0 auto;height:60px;flex:1;justify-content: left;font-weight:bold;"
-          shrink stretch v-if="userInfo" active-color="primary">
+          style="margin:0 auto;height:60px;flex:1;justify-content: left;font-weight:bold;" shrink stretch
+          v-if="userInfo" active-color="primary">
           <q-tab v-for="(x, i) in userInfo.MenuList" class="q-mr-md" :key="i" @click="setNavs(i)" :name="`navs_${i}`"
             :label="x.MenuName" :icon="x.MenuIcon" />
         </q-tabs>
@@ -20,14 +20,14 @@
             </span>
             <inline-svg class="svg-icon svg-icon-primary" src="icons/svg/Code/Compiling.svg"></inline-svg>
           </div>
-           <q-btn flat color="text-black" style="height:50px" @click="showInfo">
+          <q-btn flat color="text-black" style="height:50px" @click="showInfo">
             <span class="text-grey q-mr-xs">Hi</span>
             <span class="text-dark q-mr-md">{{(userInfo&& userInfo.AccountName? userInfo.AccountName:"")}} </span>
             <q-avatar size="35px" rounded style="background:#C9F7F5" text-color="white">
               <img :src="userInfo.UserIcon" v-if="userInfo&&userInfo.UserIcon">
               <span v-else>{{(userInfo&& userInfo.AccountName? userInfo.AccountName.substring(0,1):"") }}</span>
             </q-avatar>
-           </q-btn>
+          </q-btn>
         </div>
       </q-toolbar>
     </q-header>
@@ -40,7 +40,7 @@
             <div class="is-show-menu-2" @click="changeLeft">
               <!-- <a v-if="!IsShowLeft" title="收起"><<</a> -->
               <i v-if="!IsShowLeft" class="iconfont icon-shouqi" title="收起"></i>
-              <i v-else class="iconfont icon-zhankai is_Show_menu_3" title="展开"></i> 
+              <i v-else class="iconfont icon-zhankai is_Show_menu_3" title="展开"></i>
               <!-- <a v-else class="is_Show_menu_3" title="展开">>></a> -->
             </div>
             <q-list style="width:180px;overflow:hidden">
@@ -52,7 +52,7 @@
                   </q-item-section>
                   <q-item-section>{{x.MenuName}}</q-item-section>
                 </q-item>
-                <q-expansion-item  v-else :label="x.MenuName">
+                <q-expansion-item v-else :label="x.MenuName">
                   <q-item :to="y.MenuUrl" clickable v-ripple :active="currentPath==y.MenuUrl"
                     v-for="(y, yi) in x.SubList" :key="yi">
                     <q-item-section avatar style="padding-right:0;min-width:30px;">
@@ -83,6 +83,9 @@
   } from 'vuex'
   import userInfoBox from '../components/global/user-right-box'
   import notify from '../components/global/notify'
+  // import {
+  //   sendSock
+  // } from '../api/common/socket'
   export default {
     name: 'MainLayout',
     data() {
@@ -104,14 +107,14 @@
           width: '6px',
           opacity: 0.5
         },
-        persistent:false,
-        persistentNotify:false,
+        persistent: false,
+        persistentNotify: false,
         isExpend: false,
         IsShowLeft: true,
         userCenterMenuList: [], //用户中心菜单
       }
     },
-    components:{
+    components: {
       userInfoBox,
       notify
     },
@@ -167,16 +170,27 @@
       if (this.userInfo && this.userInfo.MenuList) {
         this.secondNavs = this.userInfo.MenuList.length > 0 ? this.userInfo.MenuList[i].SubList : []
       }
+      this.getMsg();
     },
     methods: {
+      getMsg() {
+        var SendData = {
+          AppId: "JiaHeJiaoYu",
+          ClientId: "2",
+        };
+        //sendSock(SendData,this.getDataFunc)
+      },
+      getDataFunc(e) {
+        console.log("getDataFunc", e.data)
+      },
       changeLeft() {
         this.IsShowLeft = !this.IsShowLeft;
       },
-      showInfo(){
-        this.persistent=true
+      showInfo() {
+        this.persistent = true
       },
-      showNotify(){
-        this.persistentNotify=true
+      showNotify() {
+        this.persistentNotify = true
       },
       changeNavs(val) {
         let i = val.split('_')[1]
@@ -184,7 +198,7 @@
       },
       closeSaveForm() {
         this.persistent = false
-        this.persistentNotify=false
+        this.persistentNotify = false
       },
       setNavs(val) {
         //防止页面数据丢失
@@ -202,6 +216,7 @@
 
 <style>
   @import url('~assets/css/common.css');
+
   .full-width {
     height: 100%;
   }
@@ -210,20 +225,23 @@
     position: absolute;
     color: #a1a4a9;
     cursor: pointer;
-    right:75px;
-    bottom:7px;
-    z-index:999;
+    right: 75px;
+    bottom: 7px;
+    z-index: 999;
   }
-  .is-show-menu-2 i{
-    font-size:30px;
+
+  .is-show-menu-2 i {
+    font-size: 30px;
   }
-  .is_Show_menu_3{
+
+  .is_Show_menu_3 {
     position: absolute;
     left: 75px;
-    bottom:7px;
+    bottom: 7px;
     cursor: pointer;
     z-index: 10;
   }
+
   .head-bg {
     /*background-image: url('~assets/images/page/top.png');
     background-position: right;
@@ -231,10 +249,12 @@
     background-size: auto 100%;*/
     background-color: #FFF;
   }
-  .head-bg .q-tab__label{
+
+  .head-bg .q-tab__label {
     font-weight: bold !important;
     font-size: 15px;
   }
+
   .second-menu-bg {
     background-image: url('~assets/images/page/left.png');
     background-position: bottom;
@@ -314,25 +334,29 @@
       width: 60px;
     }
   }
+
   .changeShowqidonghua {
     animation: shouqidonghua 0.5s linear;
     width: 60px !important;
     overflow-x: hidden;
   }
-  .wave_wrapper{
+
+  .wave_wrapper {
     margin: 0px 20px 0px 0;
     width: 50px;
     height: 50px;
     position: relative;
-    display:flex;
+    display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 5px;
     cursor: pointer;
   }
-  .wave_wrapper:hover{
+
+  .wave_wrapper:hover {
     background-color: #f3f6f9;
   }
+
   .wave_wrapper .dona {
     position: absolute;
     width: 50%;
@@ -343,26 +367,29 @@
     border-radius: 50%;
     z-index: 2;
   }
+
   .wave_wrapper span.wave_scale {
-    animation: wave_scale 2s both  infinite;
+    animation: wave_scale 2s both infinite;
   }
-  
+
   @keyframes wave_scale {
-      0% {
-          transform: translate3d(-41px, -41px, 0px) scale(1, 1);
-          -webkit-transform: scale(1, 1);
-          opacity: 1;
-      }
-      50% {
-          transform: translate3d(-41px, -41px, 0px) scale(10, 10);
-          -webkit-transform: scale(2.5, 2.5);
-          opacity: 0;
-      }
-      100% {
-         transform: translate3d(-41px, -41px, 0px) scale(1, 1);
-          -webkit-transform: scale(1, 1);
-          opacity: 0;
-      }
+    0% {
+      transform: translate3d(-41px, -41px, 0px) scale(1, 1);
+      -webkit-transform: scale(1, 1);
+      opacity: 1;
+    }
+
+    50% {
+      transform: translate3d(-41px, -41px, 0px) scale(10, 10);
+      -webkit-transform: scale(2.5, 2.5);
+      opacity: 0;
+    }
+
+    100% {
+      transform: translate3d(-41px, -41px, 0px) scale(1, 1);
+      -webkit-transform: scale(1, 1);
+      opacity: 0;
+    }
   }
-  
+
 </style>