2022.7.22 移动端团队填报统计

fhKeeper/formulahousekeeper/timesheet_h5/src/components/Footer.vue

@@ -6,6 +6,12 @@
                 <p class="mt-5 f12 text">首页</p>
             </router-link>
         </li>
+        <li class="item" v-if="reportsCompany || this.user.manageDeptId != 0 || reportsDept">
+            <router-link to="/count" class="flex2 aic f20 text" active-class="active">
+                <van-icon class="text" name="bar-chart-o" />
+                <p class="mt-5 text f12">填报统计</p>
+            </router-link>
+        </li>
         <li class="item">
             <router-link to="/my" class="flex2 aic f20 text" active-class="active">
                 <van-icon class="text" name="user-o"></van-icon>
@@ -16,7 +22,25 @@
 </template>
 
 <script>
-    export default {};
+    export default {
+        data() {
+            return {
+                user: JSON.parse(localStorage.userInfo),
+                reportsCompany: false,
+                reportsDept: false
+            }
+        },
+        mounted() {
+            for(let i in this.user.functionList){
+                if(this.user.functionList[i].name == '查看全公司工时'){
+                    this.reportsCompany = true
+                }
+                if(this.user.functionList[i].name == '查看本部门工时'){
+                    this.reportsDept = true
+                }
+            }
+        },
+    };
 </script>
 
 <style scoped lang="less">

fhKeeper/formulahousekeeper/timesheet_h5/src/main.js

@@ -15,14 +15,14 @@ import { Form , Toast , Grid, GridItem , DatetimePicker ,
 Picker , Dialog , NumberKeyboard , Sticky , Skeleton ,
 Panel , Divider , List , pullRefresh , SwipeCell, Checkbox, 
 Search, Slider,Stepper,Tag, Calendar, Row, Col, RadioGroup, Radio, 
-Loading ,DropdownMenu, DropdownItem, Button, ActionSheet, PullRefresh} from 'vant';
+Loading ,DropdownMenu, DropdownItem, Button, ActionSheet, PullRefresh,Tabbar, TabbarItem} from 'vant';
 
 Vue.use(Form).use(Toast).use(Grid).use(GridItem).use(DatetimePicker)
 .use(Picker).use(Dialog).use(NumberKeyboard).use(Sticky).use(Skeleton)
 .use(Panel).use(Divider).use(List).use(pullRefresh).use(SwipeCell)
 .use(Checkbox).use(Search).use(Slider).use(Stepper).use(Tag).use(Calendar).use(RadioGroup).use(Radio)
 .use(Row).use(Col).use(Loading).use(DropdownMenu).use(DropdownItem).use(Button).use(ActionSheet)
-.use(PullRefresh);
+.use(PullRefresh).use(Tabbar).use(TabbarItem);
 
 // rem
 import "amfe-flexible";
@@ -36,6 +36,8 @@ Vue.mixin(mixin);
 // Vue.prototype.$wx = wx
 
 Vue.config.productionTip = false;
+import * as echarts from 'echarts';
+Vue.prototype.$echarts = echarts;
 
 new Vue({
     store,

fhKeeper/formulahousekeeper/timesheet_h5/src/router/index.js

@@ -165,6 +165,13 @@ const router = new Router({
             }
         ]
     },
+    {
+        path: "/count",
+        component: () => import("@/views/count/count"),
+        meta: {
+            title: "填报统计"
+        }
+    },
     {
         path: "*",
         component: () => import("@/components/NotFound")

fhKeeper/formulahousekeeper/timesheet_h5/src/views/count/count.vue

@@ -0,0 +1,286 @@
+<template>
+  <div>
+    <van-cell>
+        <template #default>
+            <div style="text-align:center">团队填报统计</div>
+        </template>
+    </van-cell>
+    <div class="title111">
+    <van-cell :title="'选择月份：' + nowMonthTitle" @click="monthSelectShow = true" class="monthSel" />
+    <van-action-sheet v-model="monthSelectShow">
+        <div class="monthSelectContent">
+            <van-datetime-picker
+            v-model="monthDatetime"
+            type="year-month"
+            title="选择月份"
+            :max-date="maxDate"
+            :formatter="formatter"
+            @confirm="monthChange"
+            @cancel="monthSelectShow = false"
+            />
+        </div>
+    </van-action-sheet>
+    <van-tabs background="#20a0ff" title-active-color="#fff" title-inactive-color="#3c3c45" @change="dateChange" v-model="nowDay">
+        <van-tab v-for="item in dateArray" :key="item.day" :name="item.day">
+            <template #title>
+                <div style="text-align:center;width:0.6rem;padding-bottom:10px">
+                    <span style="font-size:90%;">{{weekString[item.weekday]}}</span><br>
+                    <span>{{item.day}}</span>
+                </div>
+            </template>
+        </van-tab>
+    </van-tabs>
+    </div>
+
+
+    <div id="main" style="width:300px;height:300px;margin:0 auto"></div>
+
+    <van-tabbar v-model="stateActive" :fixed="false" @change="stateChange" class="stateActiveClass">
+        <van-tabbar-item name="submit">已提交
+            <template #icon>
+                <span style="color:#409eff">{{submitList.length}}</span><span style="font-size:0.32rem;color:#333">人</span>
+            </template>
+        </van-tabbar-item>
+        <van-tabbar-item name="unsubmit">未提交
+            <template #icon>
+                <span style="color:#ffa366">{{unSubmitList.length}}</span><span style="font-size:0.32rem;color:#333">人</span>
+            </template>
+        </van-tabbar-item>
+        <van-tabbar-item name="unfill">未填写
+            <template #icon>
+                <span style="color:#ff4500">{{unFillList.length + unFillLeaveList.length}}</span><span style="font-size:0.32rem;color:#333">人</span>
+            </template>
+        </van-tabbar-item>
+    </van-tabbar>
+    <van-cell v-if="stateActive == 'unfill' && (user.timeType.syncCorpwxTime == 1 || user.timeType.syncDingding == 1 || leaveFil)">
+        <template #default>
+            <van-tabs type="card" @change="unfillSelect" v-model="unfillSelKey" color="#20a0ff">
+                <van-tab title="当天未填" :name="0"></van-tab>
+                <van-tab title="全天请假" :name="1"></van-tab>
+            </van-tabs>
+        </template>
+    </van-cell>
+    <van-cell-group v-if="showList.length">
+        <van-cell v-for="item in showList" :key="item.id" :title="item.name" :value="item.department" title-style="color:#666"></van-cell>
+    </van-cell-group>
+    <van-cell-group v-else>
+        <van-cell>
+            <template #default>
+                <div style="text-align:center;color:#7d7e80;font-size:13px">暂无数据</div>
+            </template>
+        </van-cell>
+    </van-cell-group>
+    <Footer page="index"></Footer>
+  </div>
+</template>
+
+<script>
+import Footer from "@/components/Footer";
+export default {
+    components: {
+        Footer
+    },
+    data() {
+        return{
+            user: JSON.parse(localStorage.userInfo),
+            leaveFil: false,
+
+
+            monthSelectShow: false,
+            monthDatetime: new Date(),
+            maxDate: new Date(),
+            nowMonthTitle: '',
+            dateArray:[],
+            weekString:['日','一','二','三','四','五','六'],
+            nowDay: new Date().getDate(),
+            nowLookDate: '',    //当前选中的日期
+            unfillSelKey: 0,
+
+            submitList:[],  //已提交人员列表
+            unSubmitList:[],    //未提交人员列表
+            unFillList:[],  //未填写人员列表
+            unFillLeaveList:[],
+            showList:[],
+
+            stateActive: 'submit'
+        }
+    },
+    methods: {
+        formatter(type, val) {
+            if (type === 'year') {
+                return `${val}年`;
+            } else if (type === 'month') {
+                return `${val}月`;
+            }
+            return val;
+        },
+
+        monthChange(value){
+            this.nowMonthTitle = value.getFullYear() + '年' + (value.getMonth() + 1) + '月'
+            this.monthSelectShow = false
+            let daylength = new Date(value.getFullYear(),(value.getMonth() + 1),0).getDate()
+            this.dateArray = []
+            for(let i = 1; i < daylength + 1; i++){
+                let item = {
+                    day: i,
+                    weekday: new Date(value.getFullYear(),value.getMonth(),i).getDay()
+                }
+                this.dateArray.push(item)
+            }
+            let newdate = new Date()
+            if(value.getFullYear() == newdate.getFullYear() && value.getMonth() == newdate.getMonth()){
+                this.dateChange(newdate.getDate())
+            }else{
+                this.dateChange(1)
+            }
+            console.log('当前月份',this.dateArray);
+        },
+
+        dateChange(name){
+            this.nowDay = name
+            let nyear = this.monthDatetime.getFullYear()
+            let nmonth = this.monthDatetime.getMonth() + 1
+            this.nowLookDate = nyear + '-' + (nmonth < 10 ? '0' + nmonth : nmonth) + '-' + (name < 10 ? '0' + name : name) 
+            console.log('日期切换',this.nowLookDate,this.nowDay)
+            this.getCountData()
+        },
+        stateChange(active){
+            this.stateActive = active
+            if(active == 'submit'){
+                this.showList = this.submitList
+            }else if(active == 'unsubmit'){
+                this.showList = this.unSubmitList
+            }else if(active == 'unfill'){
+                this.unfillSelect(0)
+            }
+        },
+
+        unfillSelect(name){
+            this.unfillSelKey = name
+            if(name == 0){
+                this.showList = this.unFillList
+            }else{
+                this.showList = this.unFillLeaveList
+            }
+        },
+        
+
+        getCountData(){ //获取填报统计数据
+            let parameter = {
+                date: this.nowLookDate
+            }
+            if (this.user.manageDeptId != 0 && !this.permissions.reportsCompany && !this.permissions.reportsDept) {
+                parameter.manageDeptId = this.user.manageDeptId; 
+            }
+            this.$axios.post('/report/getMembList', parameter)
+            .then(res => {
+                if(res.code == 'ok'){
+                    this.submitList = []
+                    this.unSubmitList = []
+                    this.unFillList = []
+                    this.unFillLeaveList = []
+                    this.extractUser(res.data)
+                    this.drawChart()
+                    this.stateChange('submit')
+                }else {
+                    this.$toast.clear();
+                    this.$toast.fail('获取失败:'+res.msg);
+                } 
+            }).catch(err=> {
+                this.$toast.clear();
+            });
+        },
+        extractUser(list){
+            for(let i in list){
+                if(list[i].children){
+                    this.extractUser(list[i].children)
+                }
+                if(list[i].userList){
+                    let deptname = list[i].label
+                    list[i].userList.forEach(element => {
+                        element.department = deptname
+                        if(element.workingTime){
+                            if(element.state == 3){ //待提交
+                                this.unSubmitList.push(element)
+                            }else{  //已提交
+                                this.submitList.push(element)
+                            }
+                        }else{  //未填写
+                            if((element.leaveDays >= 1 || element.leaveTimes >= this.user.timeType.allday) && (this.user.timeType.syncCorpwxTime == 1 || this.user.timeType.syncDingding == 1 || this.leaveFil)){
+                                this.unFillLeaveList.push(element)  //全天请假
+                            }else{
+                                this.unFillList.push(element)   //非全天请假
+                            }
+                        }
+                    });
+                }
+            }
+        },
+
+        drawChart(){
+            var myChart = this.$echarts.init(document.getElementById('main'));
+            // 绘制图表
+            myChart.setOption({
+                series: [
+                    {
+                    type: 'pie',
+                    color:['#5d9cec','#fc8d52','#ed5555'],
+                    label: {
+                        show: false
+                    },
+                    data: [this.submitList.length, this.unSubmitList.length, this.unFillList.length + this.unFillLeaveList.length]
+                    // data: [30,20,10]
+                    }
+                ]
+            });
+        }
+    },
+    mounted() {
+        
+        this.monthChange(new Date())
+        for(let i in this.user.functionList){
+            if(this.user.functionList[i].name == '请假填报'){
+                this.leaveFil = true
+            }
+        }
+        console.log('请假填报',this.leaveFil);
+    }
+}
+</script>
+
+<style>
+body{
+    background: #fff;
+}
+.monthSelectContent {
+    padding: 16px 16px 16px;
+}
+.monthSel {
+    background-color: #20a0ff;
+    color: #fff;
+    font-size: 12px !important;
+    padding-top: 0.14rem;
+    padding-left: 0.43rem;
+    padding-bottom: 0.3rem;
+}
+.monthSel::after{
+    display: none;
+}
+.stateActiveClass{
+    padding: 0.15rem 0;
+}
+.stateActiveClass .van-tabbar-item{
+    font-size: 0.3rem;
+}
+.stateActiveClass .van-tabbar-item .van-tabbar-item__text{
+    padding-top: 0.1rem;
+}
+.title111 {
+    background-color: #20a0ff;
+    /* border-radius: 5px; */
+    overflow: hidden;
+}
+.title111 .van-tabs__line{
+    background-color: #eee;
+}
+</style>