团队PK

src/api/websocketTow.js

@@ -16,6 +16,7 @@ let websocketonmessage = e => {
 			ws.send('保持连接')
 		}
 	}
+  if(typeof weboscket_callback !== 'function') return null;
 	return weboscket_callback(data);
 }
 
@@ -65,6 +66,16 @@ let initWebSocket = () => {
 	ws.onclose = websocketclose
 }
 
+let authWebSocket = (callback) => {
+  if(!ws) initWebSocket();
+  let params = {
+    type: 'auth',
+    token: getToken(),
+    machine:generateUUID()
+  };
+  sendData(params,callback);
+}
+
 // 发送数据
 let sendData = (data, callback) => {
 	weboscket_callback = callback
@@ -99,5 +110,6 @@ let sendData = (data, callback) => {
 export {
 	initWebSocket,
 	sendData,
-	closewebsocket
+	closewebsocket,
+  authWebSocket
 }

src/point/view/pointHome.vue

@@ -137,6 +137,26 @@
           <i class="van-icon van-icon-arrow van-cell__right-icon"></i>
         </div>
       </div>
+
+<!--  团队PK    -->
+      <div class="rankingList" style="border-top: 0.2rem solid #f1f1f1;" v-if="pk.pkDocList.length > 0">
+        <van-cell title="团队PK" :value="pk.pkTimeScopeStr" is-link @click="openCalendar"></van-cell>
+        <van-tabs
+          v-model="pk.pkDocIndex"
+          :animated="true"
+          :border="true"
+          @click="clickPkDoc"
+        >
+          <van-tab v-for="(doc,index) in pk.pkDocList" :key="index" :title="doc.name">
+            <van-cell-group v-if="pk.pkTeamList.length > 0">
+              <van-cell v-for="(team,index) in pk.pkTeamList" :key="index" :title="team.name" :value="team.point"  />
+            </van-cell-group>
+            <no-data v-if="pk.pkTeamList.length === 0"></no-data>
+          </van-tab>
+        </van-tabs>
+      </div>
+
+<!--   底部透明垫   -->
       <div style="height: 1rem;"></div>
     </scroller>
     <van-dialog v-model="isShowDialog">
@@ -146,15 +166,27 @@
         <div>其他排名：除上述两种系统预设的排名，企业也可以前往【PC端】自行组合排名条件，设置适合自身使用的积分排名</div>
       </div>
     </van-dialog>
+    <van-calendar
+      v-model="pk.showDocDatePicker"
+      type="range"
+      :allow-same-day="true"
+      @close="docCalendarClose"
+      @confirm="docCalendarConfirm"
+      :min-date="pk.minDate"
+      :max-date="pk.maxDate"
+      :default-date="pkTimeScope"
+      color="#26A2FF"
+    />
   </div>
 </template>
 
 <script>
 
 import {getToken, setToken} from '@/utils/auth';
-import moment from 'moment';
+import moment, {min} from 'moment';
 import Vue from 'vue';
 import { NoticeBar, Swipe, SwipeItem, Cell, Dialog,Popup  } from 'vant';
+import {authWebSocket} from "../../api/websocketTow";
 Vue.use(NoticeBar)
   .use(Swipe)
   .use(SwipeItem)
@@ -167,7 +199,7 @@ export default {
     return {
       userMonth:{task:{reward:{},deduction:{},exec:{}},ratio:{}},
 
-      rankingList: [], // 我的排名列表
+      // rankingList: [], // 我的排名列表
       rankingTotal: 0, // 我的排名列表数
       situationChart: '', // 管理者奖扣
       rankingIndex: 1,
@@ -205,6 +237,19 @@ export default {
       review_count: 0,
       task_count: 0,
       cuntNum: { deal: 0, notice: '' },
+      pkTimeScope:[],
+      pk:{
+        pkDocList:[],
+        minDate:null,
+        maxDate:null,
+        pkTimeScope:[],
+        pkTimeScopeStr:'',
+        currentDocIndex:0,
+        pkDocIndex:0,
+        showDocDatePicker:false,
+        teamLoading:false,
+        pkTeamList:[]
+      },
     };
   },
   created() {
@@ -212,6 +257,22 @@ export default {
     this.$store.dispatch('getMenu').then(res => {
       this.getMenu(res);
     });
+
+    //初始化pk配置
+    const minDate = new Date();
+    const maxDate = new Date();
+    minDate.setTime(maxDate.getTime() - 3600 * 1000 * 24 * 30 * 6);
+    this.pk.minDate = minDate;
+    this.pk.maxDate = maxDate;
+
+    const startDate = new Date();
+    const endDate = new Date();
+    startDate.setTime(endDate.getTime() - 3600 * 1000 * 24 * 30);
+    this.pkTimeScope = [startDate,endDate]
+    this.pk.pkTimeScope[0] = startDate;
+    this.pk.pkTimeScope[1] = endDate;
+    this.pk.pkTimeScopeStr = this.$moment(startDate).format("MM/DD") + "-" + this.$moment(endDate).format("MM/DD");
+
   },
   activated() {
     this.$store.dispatch('getMenu').then(res => {
@@ -310,7 +371,7 @@ export default {
       let data = {
         group_id: item.target_id,
         start_date:'',
-        start_date:'',
+        // start_date:'',
       };
       if(item.date_interval==1){//本月
         data.start_date=this.$moment().startOf('month').format('YYYY-MM-DD');
@@ -471,7 +532,11 @@ export default {
       });
       var http1 = this.$axiosUser('get', '/api/pro/integral/statistics', { employee_id: this.userInfo.id, month: this.month }, 'v3'); // 获取个人统计
       this.rankingListname(); //排行榜
-      this.opneWebSocket();
+      this.$socketApiTow.authWebSocket(() =>{
+        this.getPkDocList();    //团队pk
+        this.opneWebSocket();   //本月B分奖扣
+      });
+
       Promise.all([http1]).then(res => {
           if (res[0].data.code === 1) {
             this.userStatistics = res[0].data.data;
@@ -495,7 +560,7 @@ export default {
               target_ratio: target_ratio
             }
             this.userMonth=data
-            this.$socketApiTow.closewebsocket();
+            // this.$socketApiTow.closewebsocket();
         }
       }, true);
     },
@@ -545,8 +610,60 @@ export default {
           break;
         }
       }
+    },
+    docCalendarConfirm(event){
+      const [start,end] = event;
+      this.pkTimeScope = [start,end];
+      this.pk.showDocDatePicker = false;
+    },
+    docCalendarClose(){
+      this.pk.showDocDatePicker = false;
+    },
+    openCalendar(){
+      this.pk.showDocDatePicker = true;
+    },
+    clickPkDoc(index,name){
+      if (this.pk.currentDocIndex !== index && this.pk.pkDocList.length > index){
+        this.pk.currentDocIndex = index;
+        this.getPkRankList(this.pk.pkDocList[index].id)
+      }
+    },
+    getPkDocList(){
+      this.$axiosUser('get','/api/pro/pk/doc/list/visible')
+        .then(res => {
+          this.pk.pkDocList = res.data.data.list;
+          if(this.pk.pkDocList.length > 0) this.getPkRankList(this.pk.pkDocList[0].id)
+        })
+    },
+    getPkRankList(docId){
+      console.log(docId)
+      this.pk.teamLoading = true;
+      if (!this.pk.pkTimeScope || this.pk.pkTimeScope.length !== 2) {
+        this.pk.pkTeamList = [];
+        return;
+      }
+      let type = "team_pk";
+      let params = {
+        type:type,
+        doc_id:docId,
+        start_date:this.$moment(this.pk.pkTimeScope[0]).format("YYYY-MM-DD"),
+        end_date:this.$moment(this.pk.pkTimeScope[1]).format("YYYY-MM-DD"),
+      }
+      this.$socketApiTow.sendData(params,(res)=>{
+        if (res.type !== type || res.code !== 1) return;
+        this.pk.pkTeamList = res.result.teams;
+        this.pk.teamLoading = false;
+      })
     }
   },
+  watch: {
+    pkTimeScope(val){
+      this.pk.pkTimeScope[0] = val[0]
+      this.pk.pkTimeScope[1] = val[1]
+      this.pk.pkTimeScopeStr = this.$moment(this.pk.pkTimeScope[0]).format("MM/DD") + "-" + this.$moment(this.pk.pkTimeScope[1]).format("MM/DD");
+      if (this.pk.pkDocList.length > this.pk.currentDocIndex) this.getPkRankList(this.pk.pkDocList[this.pk.currentDocIndex].id)
+    }
+  }
 };
 </script>