部门对比优化websocket

package-lock.json

@@ -11862,6 +11862,11 @@
         "resolve": "^1.1.6"
       }
     },
+    "reconnecting-websocket": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmmirror.com/reconnecting-websocket/-/reconnecting-websocket-4.4.0.tgz",
+      "integrity": "sha512-D2E33ceRPga0NvTDhJmphEgJ7FUYF0v4lr1ki0csq06OdlxKfugGzN0dSkxM/NfqCxYELK4KcaTOUOjTV6Dcng=="
+    },
     "redent": {
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/redent/-/redent-1.0.0.tgz",

package.json

@@ -28,6 +28,7 @@
     "qrcode.vue": "^1.6.3",
     "qrcodejs2": "0.0.2",
     "qs": "^6.9.6",
+    "reconnecting-websocket": "^4.4.0",
     "sortablejs": "^1.14.0",
     "swiper": "^5.2.1",
     "vant": "^2.12.51",

src/point/view/integral/deptRank.vue

@@ -30,7 +30,7 @@
     <div class="mrd-content">
       <scroller
         ref="scroller"
-        :on-refresh="onRefresh"
+        :on-refresh="getDataList"
       >
         <van-cell v-for="item in dataList" :key="item.id" :title="item.name" :value="item.point"/>
         <noData :list="dataList" />
@@ -85,6 +85,8 @@ import moment from "moment/moment";
 import { DropdownMenu, DropdownItem ,Calendar,Switch} from 'vant';
 import DeptSelectorDropdown from '@/components/DeptSelectorDropdown';
 import RuleCategorySelDropdown from '@/components/RuleCategorySelDropdown';
+import ReconnectingWebSocket from "reconnecting-websocket";
+import {generateUUID, getToken} from "../../../utils/auth";
 
 Vue.use(DropdownMenu).use(DropdownItem).use(Calendar).use(Switch);
 
@@ -131,7 +133,9 @@ export default {
       minDate:minDate,
       maxDate:maxDate,
       timeScope:[new Date(startDate),new Date(endDate)],
-      showSearchBar:!this.$supremeAuthority('employee')
+      showSearchBar:!this.$supremeAuthority('employee'),
+      rws:null,
+      rwsHasAuth:false,
     }
   },
   computed:{
@@ -152,29 +156,31 @@ export default {
       })
     },
     'searchForm.startDate'(val){
-      this.onRefresh()
+      this.getDataList()
     },
     'searchForm.endDate'(val){
-      this.onRefresh()
+      this.getDataList()
     },
     'searchForm.deptId'(val){
-      this.onRefresh()
+      this.getDataList()
     },
     'searchForm.deptIncludeSub'(val){
-      this.onRefresh()
+      this.getDataList()
     },
     'searchForm.ptId'(val){
-      this.onRefresh()
+      this.getDataList()
     },
     'searchForm.ruleId'(val){
-      this.onRefresh()
+      this.getDataList()
     },
     'searchForm.ruleIncludeSub'(val){
-      this.onRefresh()
+      this.getDataList()
+    },
+    rwsHasAuth(v){
+      console.log('rws auth',v)
+      if (v) this.getDataList();
     },
-
   },
-  created() {},
   methods:{
     timeScopeThisWeek(){
       this.timeScope = [new Date(moment().startOf('week').format('YYYY-MM-DD')),new Date(moment().endOf('week').format('YYYY-MM-DD'))]
@@ -222,12 +228,38 @@ export default {
       this.searchForm.ruleId = ruleId || 0;
       this.$refs.ruleDropdownItem.toggle();
     },
-    onRefresh(done){
-      if (!this.searchForm.startDate || !this.searchForm.endDate || !this.searchForm.ptId){
+    // onRefresh(done){
+    //   if (!this.searchForm.startDate || !this.searchForm.endDate || !this.searchForm.ptId){
+    //     if (typeof done === 'function') done();
+    //     return;
+    //   }
+    //
+    //   let msg = {
+    //     type:'dr',
+    //     start_date:this.searchForm.startDate,
+    //     end_date:this.searchForm.endDate,
+    //     pt_id:this.searchForm.ptId,
+    //     dept_id:this.searchForm.deptId,
+    //     dept_include_sub:this.searchForm.deptIncludeSub ? 1 : 0,
+    //     item_id:0,
+    //     rule_id:this.searchForm.ruleId,
+    //     rule_include_sub:this.searchForm.ruleIncludeSub ? 1 : 0
+    //   }
+    //
+    //   this.$socketApiTow.sendData(msg,(res) => {
+    //     if (res.code !== 1 || res.type !== msg.type){
+    //       if (typeof done === 'function') done();
+    //       return;
+    //     }
+    //     this.dataList = res.result.list;
+    //     if (typeof done === 'function') done();
+    //   })
+    // },
+    getDataList(done){
+      if (!this.rws || !this.rwsHasAuth || !this.searchForm.startDate || !this.searchForm.endDate || !this.searchForm.ptId){
         if (typeof done === 'function') done();
         return;
       }
-
       let msg = {
         type:'dr',
         start_date:this.searchForm.startDate,
@@ -238,20 +270,75 @@ export default {
         item_id:0,
         rule_id:this.searchForm.ruleId,
         rule_include_sub:this.searchForm.ruleIncludeSub ? 1 : 0
-      }
+      };
 
-      this.$socketApiTow.sendData(msg,(res) => {
-        if (res.code !== 1 || res.type !== msg.type){
-          if (typeof done === 'function') done();
-          return;
-        }
-        this.dataList = res.result.list;
-        if (typeof done === 'function') done();
-      })
+      this.rws.send(JSON.stringify(msg));
 
+      if (typeof done === 'function') done();
+    },
 
+    onWsOpen(){
+      console.log('on ws open');
+      let params = {
+        type:'auth',
+        token: getToken(),
+        machine: generateUUID(),
+      }
+      this.rws.send(JSON.stringify(params));
+    },
+    onWsMessage(event){
+      let msg = event.data ?  JSON.parse(event.data) : null;
+      if (!msg) return;
+      switch (msg.type){
+        case 'ping':
+          this.rws.send("dept rank keep connecting")
+          break;
+        case 'auth':
+          if (msg.code === 1) this.rwsHasAuth = true;
+          break;
+        case 'dr':
+          if (msg.code === 1) this.dataList = msg.result.list;
+          break;
+      }
+    },
+    onWsError(event){
+      this.rwsHasAuth = false;
+      console.log('on ws error',event);
+    },
+    onWsClose(event){
+      this.rwsHasAuth = false;
+      console.log('on ws close',event);
+    },
+    initRws(){
+      if (this.rws){
+        this.rws.close();
+        this.rws = null;
+        this.rwsHasAuth = false;
+      }
+      this.rws = new ReconnectingWebSocket(process.env.VUE_APP_WEBSCOKET_TOW);
+      this.rws.onopen = this.onWsOpen;
+      this.rws.onmessage = this.onWsMessage;
+      this.rws.onerror = this.onWsError;
+      this.rws.onclose = this.onWsClose;
+    },
+    clearRws(){
+      if (this.rws) this.rws.close();
+      this.rws = null;
+      this.rwsHasAuth = false;
     }
-  }
+  },
+  created() {},
+  mounted() {},
+  activated() {
+    this.initRws();
+  },
+  deactivated() {
+    this.clearRws();
+  },
+  beforeDestroy() {
+    this.clearRws();
+  },
+  destroyed() {},
 }
 
 </script>

src/point/view/pointHome.vue

@@ -53,8 +53,9 @@
           </van-grid-item>
           <van-grid-item @click="goDeptRank">
             <template #text>
-              <van-loading v-if="!deptRank" type="spinner" size="10px"/>
-              <span class="van-grid-item__text" v-else>部门对比</span>
+<!--              <van-loading v-if="!deptRank" type="spinner" size="10px"/>-->
+<!--              <span class="van-grid-item__text" v-else>部门对比</span>-->
+              <span class="van-grid-item__text">部门对比</span>
             </template>
             <template #icon>
               <img src="static/images/callback1.png" style="-webkit-touch-callout: none;"/>
@@ -247,7 +248,7 @@ export default {
   name: 'pointHome',
   data() {
     return {
-      deptRank:false,
+      // deptRank:false,
       userMonth:{task:{reward:{},deduction:{},exec:{}},ratio:{}},
 
       // rankingList: [], // 我的排名列表
@@ -747,7 +748,7 @@ export default {
         this.pk.teamLoading = false;
 
         //ws数据初始化完成,部门排名才可以点击
-        this.deptRank = true;
+        // this.deptRank = true;
       })
       this.$nextTick(() => {
         setTimeout(() => {
@@ -756,7 +757,7 @@ export default {
       })
     },
     goDeptRank(){
-      if (!this.deptRank) return;
+      // if (!this.deptRank) return;
       this.$router.push({ name: 'dept_rank' });
     },
     goAppeal(){