部门排名

src/point/view/integral/deptRank.vue

@@ -0,0 +1,231 @@
+<template>
+  <div class="mrd-container">
+    <van-nav-bar title="部门排名" left-text="返回" @click-left="$route_back" left-arrow />
+    <van-dropdown-menu>
+<!--  A/B分    -->
+      <van-dropdown-item :title="timeScopeText" @open="calendarOpen"></van-dropdown-item>
+      <van-dropdown-item :title="searchForm.deptName" ref="deptDropdownItem"><DeptSelectorDropdown @onConfirm="onConfirmDept" /></van-dropdown-item>
+      <van-dropdown-item title="规则" ref="ruleDropdownItem"><RuleCategorySelDropdown @onConfirm="onConfirmRule" @onCancel="searchForm.ruleId = 0"/></van-dropdown-item>
+      <van-dropdown-item>
+        <van-icon name="list-switch" slot="title" size="1.5em" />
+        <template slot="default">
+          <van-cell center title="积分分类">
+            <template #right-icon>
+              <van-radio-group v-model="searchForm.ptId" direction="horizontal">
+                <van-radio v-for="pt in pts" :key="pt.value" :name="pt.value">{{pt.text}}</van-radio>
+              </van-radio-group>
+            </template>
+          </van-cell>
+          <van-cell center title="包含子部门">
+            <van-switch v-model="searchForm.deptIncludeSub" active-color="#26A2FF" slot="right-icon" size="24"/>
+          </van-cell>
+          <van-cell center title="包含子规则分类">
+            <van-switch v-model="searchForm.ruleIncludeSub" active-color="#26A2FF" slot="right-icon" size="24"/>
+          </van-cell>
+        </template>
+      </van-dropdown-item>
+    </van-dropdown-menu>
+    <div class="mrd-content">
+      <scroller
+        ref="scroller"
+        :on-refresh="onRefresh"
+      >
+        <van-cell v-for="item in dataList" :key="item.id" :title="item.name" :value="item.point"/>
+
+      </scroller>
+    </div>
+
+
+
+    <van-calendar
+      v-model="showCalendar"
+      type="range"
+      :allow-same-day="true"
+      :min-date="minDate"
+      :max-date="maxDate"
+      :default-date="timeScope"
+      :show-confirm="false"
+      color="#26A2FF"
+      @close="calendarClose"
+      @confirm="calendarConfirm"
+    />
+
+
+  </div>
+</template>
+
+
+<script>
+import Vue from 'vue';
+import moment from "moment/moment";
+import { DropdownMenu, DropdownItem ,Calendar,Switch} from 'vant';
+import DeptSelectorDropdown from '@/components/DeptSelectorDropdown';
+import RuleCategorySelDropdown from '@/components/RuleCategorySelDropdown';
+
+Vue.use(DropdownMenu).use(DropdownItem).use(Calendar).use(Switch);
+
+export default {
+  name: "dept_rank",
+  components:{
+    DeptSelectorDropdown,
+    RuleCategorySelDropdown
+  },
+  data(){
+    let startDate = new Date();
+    startDate.setTime(startDate.getTime() - 3600 * 1000 * 24 * 7);
+    startDate = moment(startDate).format('YYYY-MM-DD');
+    let endDate = moment().format('YYYY-MM-DD');
+    let pts = this.$getTypes.map(type => {
+      return {value:type.id,text:type.name,code:type.code}
+    });
+    let ptB = pts.filter(pt => pt.code === 'BF');
+    ptB = ptB.length > 0 ? ptB[0] : null;
+
+    let today = new Date();
+    let minDate = new Date();
+    minDate.setTime(today.getTime() - 3600 * 1000 * 24 * 30 * 6);
+    let maxDate = new Date(today.getFullYear(),today.getMonth(),1);
+    maxDate.setMonth(maxDate.getMonth() + 1);
+    maxDate.setDate(0);
+
+    return{
+      pts:pts,
+      searchForm:{
+        startDate:startDate,
+        endDate:endDate,
+        deptId:0,
+        deptName:'全公司',
+        deptIncludeSub:false,
+        ptId:ptB ? ptB.value : 0,
+        ptName: ptB ? ptB.text : '',
+        ruleId:0,
+        ruleIncludeSub:false,
+        itemId:0
+      },
+      dataList:[],
+      showCalendar:false,
+      minDate:minDate,
+      maxDate:maxDate,
+      timeScope:[new Date(startDate),new Date(endDate)]
+    }
+  },
+  computed:{
+    timeScopeText(){
+      return moment(this.searchForm.startDate).format('MM/DD') + '-' + moment(this.searchForm.endDate).format('MM/DD')
+    },
+    currentPtName(){
+      if (this.searchForm.ptId <= 0) return '积分分类';
+      let pt = this.pts.filter(pt => pt.id === this.searchForm.ptId);
+      return pt ? pt.name : '积分分类';
+    }
+  },
+  watch:{
+    timeScope(val){
+      this.$nextTick(()=>{
+        this.searchForm.startDate = moment(val[0]).format('YYYY-MM-DD');
+        this.searchForm.endDate = moment(val[1]).format('YYYY-MM-DD');
+      })
+    },
+    'searchForm.startDate'(val){
+      this.onRefresh()
+    },
+    'searchForm.endDate'(val){
+      this.onRefresh()
+    },
+    'searchForm.deptId'(val){
+      this.onRefresh()
+    },
+    'searchForm.deptIncludeSub'(val){
+      this.onRefresh()
+    },
+    'searchForm.ptId'(val){
+      this.onRefresh()
+    },
+    'searchForm.ruleId'(val){
+      this.onRefresh()
+    },
+    'searchForm.ruleIncludeSub'(val){
+      this.onRefresh()
+    },
+
+  },
+  created() {},
+  methods:{
+    calendarOpen(){
+      this.showCalendar = true;
+    },
+    calendarClose(){
+      this.showCalendar = false;
+    },
+    calendarConfirm(event){
+      const [start,end] = event;
+      this.timeScope = [start,end];
+      this.showCalendar = false;
+    },
+    truncateString(str,length){
+      if (str.length > length){
+      }
+      return str.length > length ? str.substring(0,length) : str;
+    },
+    onConfirmDept(deptItem){
+      if (deptItem){
+        this.searchForm.deptId = deptItem.id;
+        this.searchForm.deptName = this.truncateString(deptItem.name,3);
+      }else {
+        this.searchForm.deptId = 0;
+        this.searchForm.deptName = '全公司';
+      }
+      this.$refs.deptDropdownItem.toggle();
+    },
+    onConfirmRule(ruleId){
+      this.searchForm.ruleId = ruleId || 0;
+      this.$refs.ruleDropdownItem.toggle();
+    },
+    onRefresh(done){
+      if (!this.searchForm.startDate || !this.searchForm.endDate || !this.searchForm.ptId){
+        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){
+          done();
+          return;
+        }
+        this.dataList = res.result.list;
+        done();
+      })
+
+
+    }
+  }
+}
+
+</script>
+
+
+
+<style scoped lang="less">
+.mrd-container {
+  background-color: white;
+
+  & .mrd-content {
+    margin-top: 20px;
+    position: relative;
+    height: calc(100%);
+  }
+
+}
+</style>

src/point/view/pointHome.vue

@@ -13,8 +13,15 @@
               <div class="blue" style="font-size: 26px;font-weight: 600;">{{showPoint? userStatistics.b:userStatistics.a}}</div>
             </div>
             <div class="point-box flex-box">
-              <span @click.stop="showPoint=!showPoint" style="border-top-left-radius: 4px;border-bottom-left-radius: 4px;border-right: none;" :class="showPoint? 'pointActive':''">B分</span>
-              <span @click.stop="showPoint=!showPoint" style="border-top-right-radius: 4px;border-bottom-right-radius: 4px;border-left: none;" :class="!showPoint? 'pointActive':''">A分</span>
+              <span class="tp" @click.stop="showPoint=!showPoint" style="border-top-left-radius: 4px;border-bottom-left-radius: 4px;border-right: none;" :class="showPoint? 'pointActive':''">B分</span>
+              <span class="tp" @click.stop="goDeptRank" style="width: 1.3rem; text-align: center;" >
+<!--                <van-loading type="spinner" size="10px"  />-->
+                <van-loading v-if="!deptRank" type="spinner" size="10px"  />
+                <template v-else>
+                  部门排名
+                </template>
+              </span>
+              <span class="tp" @click.stop="showPoint=!showPoint" style="border-top-right-radius: 4px;border-bottom-right-radius: 4px;border-left: none;" :class="!showPoint? 'pointActive':''">A分</span>
             </div>
           </div>
           <div class="flex-box-ce">
@@ -200,17 +207,19 @@
 import {getToken, setToken} from '@/utils/auth';
 import moment, {min} from 'moment';
 import Vue from 'vue';
-import { NoticeBar, Swipe, SwipeItem, Cell, Dialog,Popup  } from 'vant';
+import { NoticeBar, Swipe, SwipeItem, Cell, Dialog,Popup,Loading  } from 'vant';
 Vue.use(NoticeBar)
   .use(Swipe)
   .use(SwipeItem)
   .use(Cell)
+  .use(Loading)
   .use(Popup);
 
 export default {
   name: 'pointHome',
   data() {
     return {
+      deptRank:false,
       userMonth:{task:{reward:{},deduction:{},exec:{}},ratio:{}},
 
       // rankingList: [], // 我的排名列表
@@ -582,8 +591,12 @@ export default {
               ratio: ratio,
               target_ratio: target_ratio
             }
-            this.userMonth=data
+            this.userMonth=data;
+
+            //ws数据初始化完成,部门排名才可以点击
+            this.deptRank = true;
             // this.$socketApiTow.closewebsocket();
+
         }
       }, true);
     },
@@ -688,12 +701,19 @@ export default {
         if (res.type !== type || res.code !== 1) return;
         this.pk.pkTeamList = res.result.teams;
         this.pk.teamLoading = false;
+
+        //ws数据初始化完成,部门排名才可以点击
+        this.deptRank = true;
       })
       this.$nextTick(() => {
         setTimeout(() => {
           this.restoreScrollerPosition()
         },50)
       })
+    },
+    goDeptRank(){
+      if (!this.deptRank) return;
+      this.$router.push({ name: 'dept_rank' });
     }
   },
   watch: {
@@ -719,7 +739,7 @@ export default {
 .point-box{
    border-radius: 2px;
 }
-.point-box span{
+.point-box .tp{
   padding: 0rem 0.2rem;
   border: 1px solid #c0c4cc;
   height: 0.4rem;
@@ -1006,5 +1026,8 @@ export default {
   }
 }
 
+.dept-rank-active{
+  background-color: #F1F1F1;
+}
 
 </style>

src/router/pointRoute.js

@@ -478,5 +478,12 @@ const routes = [
     label: '申请结果',
     need_login: true
   },
+  {
+    path: '/dept_rank',
+    name: 'dept_rank',
+    component: () => import('@/point/view/integral/deptRank'),
+    label: '部门排行',
+    need_login: true
+  }
 ]
 export default routes