aiforge/web_src/js/components/UserAnalysis.vue

<template>
    <div>
        <div style="margin-top: 10px;">
            <b  class="pro_item">用户分析</b>  <span class="update_time">数据更新时间：</span><span style="font-size: 12px;">{{lastUpdatedTime}} &nbsp/&nbsp从{{recordBeginTime}}开始统计</span>   
        </div>
        <div style="margin-top: 20px;">
            <span  class="sta_iterm">统计周期：</span> 
            <button type="button" class='btn' id ="yesterday_usr" v-bind:class="{colorChange:1==dynamic}" @click="resetPage(),getUserList('yesterday_usr',1)">昨天</button>
            <button type="button" class='btn' id = "current_week_usr" v-bind:class="{colorChange:2==dynamic}" @click="resetPage(),getUserList('current_week_usr',2)">本周</button>
            <button type="button" class='btn' id = "current_month_usr" v-bind:class="{colorChange:3==dynamic}" @click="resetPage(),getUserList('current_month_usr',3)">本月</button>
            <button type="button" class='btn' id = "last_month_usr" v-bind:class="{colorChange:4==dynamic}" @click="resetPage(),getUserList('last_month_usr',4)">上月</button>
            <button type="button" class='btn' id = "monthly_usr" v-bind:class="{colorChange:5==dynamic}" @click="resetPage(),getUserList('monthly_usr',5)">近30天</button>
            <button type="button" class='btn' id = "current_year_usr" v-bind:class="{colorChange:6==dynamic}" @click="resetPage(),getUserList('current_year_usr',6)">今年</button>
            <button type="button" class='btn' id = "all_usr"  v-bind:class="{colorChange:7==dynamic}" @click="resetPage(),getUserList('all_usr',7)">所有</button>
            <span style="margin-left: 20px;">
                <el-date-picker
                    v-model="value_time"
                    prefix-icon="el-icon-time"
                    @change="resetPage(),getUserList('',0)"
                    type="daterange"
                    size='small'
                    unlink-panels
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">   
                </el-date-picker>
            </span>
            <span style="float:right; margin-right: 20px;" >
                <a style="display:inline-block;margin-left: 20px; " id = 'download'>
                    <i class="el-icon-download"></i>
                    <span ><a  :href= "'../tool/query_user_static_page/?startDate='+this.params.startDate+'&endDate='+this.params.endDate+'&IsReturnFile=true'+'&userName='+this.params.userName" >下载报告</a> </span>
                </a>  
                <span style="display:inline-block;margin-left: 20px; ">
                    <el-input size="small" placeholder="输入用户名搜索" v-model="search" class="input-with-select" @keyup.enter.native="searchName() "><i slot="suffix" class="el-input__icon el-icon-search" @click="searchName() "></i>
                    </el-input>
                </span>
            </span>
        </div>
        <div style="margin-top: 30px;"> 
            <el-table
                :data="tableData"
                style="width: 100%"
                :header-cell-style="tableHeaderStyle"
                :cell-style='cellStyle'>
                <el-table-column
                    label="ID"
                    prop="ID"
                    align="center"
                    stripe
                    >
                </el-table-column>
                <el-table-column
                    label="用户名"
                    align="center"
                    prop="Name"
                    width="100px">
                </el-table-column>
                <el-table-column
                    prop="CodeMergeCount"
                    label="PR数"
                    align="center">
                </el-table-column>
                <el-table-column
                    prop="CommitCount"
                    label="commit数"
                    align="center">
                </el-table-column>
                <el-table-column
                    prop="IssueCount"
                    label="提出任务数"
                    align="center">
                </el-table-column>
                <el-table-column
                    prop="CommentCount"
                    label="评论数"
                    align="center">
               </el-table-column>
               <el-table-column
                    prop="FocusRepoCount"
                    label="关注项目数"
                    align="center">
                </el-table-column>
                <el-table-column
                    prop="StarRepoCount"
                    label="点赞项目数"
                    align="center">
                </el-table-column>

                <el-table-column
                    prop="LoginCount"
                    label="登录次数"
                    align="center">
                </el-table-column>
                <el-table-column
                    prop="WatchedCount"
                    label="关注者数"
                    align="center">
                </el-table-column>
                <el-table-column
                    prop="CommitCodeSize"
                    label="commit代码行数"
                    width="115px"
                    align="center">
                </el-table-column>
                <el-table-column
                    prop="SolveIssueCount"
                    label="已解决任务数"
                    align="center">
                </el-table-column>
                <el-table-column
                    prop="EncyclopediasCount"
                    label="百科页面贡献次数"
                    width="130px"
                    align="center">
                </el-table-column>
                <el-table-column
                    prop="CreateRepoCount"
                    label="创建项目"
                    align="center">
                </el-table-column>  
                <el-table-column
                    prop="RegistDate"
                    label="用户注册时间"
                    width="120px"
                    align="center">
                    <template slot-scope="scope">
                        {{scope.row.RegistDate | transformTimestamp}}
                    </template>
                </el-table-column>   
                <el-table-column
                    prop="CountDate"
                    label="系统统计时间"
                    width="120px"
                    align="center">
                    <template slot-scope="scope">
                        {{scope.row.CountDate | transformTimestamp}}
                    </template>
                </el-table-column>           
            </el-table>
        </div>
        <div style="margin-top:50px;text-align:center">
            <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="page"
                :page-size="pageSize" 
                :page-sizes="[2,5,10,20]"
                layout="total, sizes, prev, pager, next,jumper"
                :total="totalNum">
            </el-pagination>
        </div>
        
    </div>
</template>

<script>
    import { export2Excel } from '../excel/util.js'
    export default{
        name:'UserAnalysis',
        data() {
            return {
                type_val:'',
                recordBeginTime:'',
                lastUpdatedTime:'',
                page:1,
                pageSize:10,
                params:{startDate:'',endDate:'',page:1,pageSize:10,userName:''},
                tableData: [],
                totalNum:0,
                pickerOptions: {
                },
                value_time: '',
                search:'',
                data:'',
                columns: [{title: 'ID',key: 'ID'},{title: '用户名',key: 'Name'},{title: 'PR数',key: 'CodeMergeCount'},{title: 'commit数',key:'CommitCount'},{title: '提出任务数',key: 'IssueCount'},{title: '评论数',key: 'CommentCount'},{title: '关注项目数',key: 'FocusRepoCount'},{title: '点赞项目数',key: 'StarRepoCount'},{title: '登录次数',key: 'LoginCount'},{title:'关注者数',key:'WatchedCount'},{title:'commit代码行数',key:'CommitCodeSize'},{title:'已解决任务数',key:'SolveIssueCount'},{title:'百科页面贡献次数',key:'EncyclopediasCount'},{title:'创建项目',key:'CreateRepoCount'},{title:'用户注册时间',key:'RegistDate'},{title:'系统统计时间',key:'CountDate'}],
                blob:'',
                fileName:'',
                dynamic:7,

                params_pro:{type:'all',page:1,pagesize:10,beginTime:'',endTime:'',q:'',sort:'openi'},
            };
         },
        methods: {

            exportData(){
                // this.getUserList('all_usr',7)
                var saveFileName = this.getFileName()
                export2Excel(this.columns,this.tableData,saveFileName)
            },
            getFileName(){
                var saveFileName=''
                var Date=(this.params.startDate).split('-')
                var startDate=Date[0]+''+Date[1]+''+Date[2]
                console.log(startDate)
                Date=(this.params.endDate).split('-')
                var endDate=Date[0]+Date[1]+Date[2]
                saveFileName = '用户分析_'+this.search+''+startDate+'_'+endDate
                if (this.type_val=='all_usr'){ 
                    saveFileName = '用户分析_'+this.search+'_all'
                }
                return saveFileName

            },
            handleCurrentChange(val){
                this.params.page = val
                this.page = val
                this.getUserList(this.type_val,this.dynamic)

            },
            handleSizeChange(val){
                    this.params.pageSize = val
                    this.resetPage()
                    this.getUserList(this.type_val,this.dynamic)
            },
            resetPage(){
                this.page=1
                this.params.page = 1
            },

            formatDate(myyear,mymonth,myweekday) {
                // var myyear = this.date.getFullYear();
                // var mymonth = this.date.getMonth() + 1;
                // var myweekday = this.date.getDate();
        
                if (mymonth < 10) {
                    mymonth = "0" + mymonth;
                }
                if (myweekday < 10) {
                    myweekday = "0" + myweekday;
                }
                return (myyear + "-" + mymonth + "-" + myweekday);
            },

            // 获得某月的天数
            getMonthDays(nowYear,month){
                let monthStartDate = new Date(nowYear, month, 1);
                let monthEndDate = new Date(nowYear, month + 1, 1);
                let days = (monthEndDate - monthStartDate)/(1000 * 60 * 60 * 24);
                return days;
            },
            getUpdateTime(){
                this.$axios.get('../api/v1/projectboard/project',{
                                params:this.params_pro
                }).then((res)=>{
                    this.recordBeginTime=res.data.recordBeginTime
                    this.lastUpdatedTime=res.data.lastUpdatedTime
                })
            },
            getUserList(type_val,index){  
                this.type_val = type_val
                this.dynamic = index;
                console.log("dj:"+type_val)  
                var now = new Date(); // 当前日期
                var nowDayOfWeek = now.getDay(); // 今天本周的第几天
                var nowDay = now.getDate(); // 当前日
                var nowMonth = now.getMonth(); // 当前月
                var nowYear = now.getFullYear(); // 当前年     
                var today = this.formatDate(nowYear,nowMonth+1,nowDay);

                let lastMonthDate = new Date();  // 上月日期
                lastMonthDate.setDate(1);
                lastMonthDate.setMonth(lastMonthDate.getMonth()-1);
                let lastYear = lastMonthDate.getYear();
                let lastMonth = lastMonthDate.getMonth();

                if (typeof type_val=="undefined" || type_val=="null" || type_val==""){
                    this.params.startDate=  this.formatDate(this.value_time[0].getFullYear(),this.value_time[0].getMonth() + 1,this.value_time[0].getDate());
                    this.params.endDate = this.formatDate(this.value_time[1].getFullYear(),this.value_time[1].getMonth() + 1,this.value_time[1].getDate());
                }else{
                    switch(type_val){
                        case "yesterday_usr":{
                            var now = new Date();
                            var tmp = new Date(now.setTime(now.getTime()-24*60*60*1000));
                            var yesterday = this.formatDate(tmp.getFullYear(),tmp.getMonth()+1,tmp.getDate());
                            this.params.startDate = yesterday
                            this.params.endDate = yesterday
                            this.value_time=[]
                            // document.getElementById("yesterday_usr").style.backgroundColor="409effd6"
                            // document.getElementById("current_week_usr")
                            break
                        }
                        case "current_week_usr":{
                            var now = new Date(); // 当前日期
                            var nowDayOfWeek = now.getDay(); // 今天本周的第几天
                            var day = nowDayOfWeek || 7;
                            this.params.startDate = this.formatDate(now.getFullYear(), nowMonth+1, nowDay + 1 - day);
                            this.params.endDate = today
                            this.value_time=[]
                            break
                        }
                        case "current_month_usr":{
                            this.params.startDate =  this.formatDate(nowYear,nowMonth+1,1);
                            this.params.endDate = today
                            this.value_time=[]
                            break
                        }
                        case "last_month_usr":{
                            this.params.startDate=this.formatDate(nowYear, lastMonth+1, 1);
                            this.params.endDate=this.formatDate(nowYear, lastMonth+1, this.getMonthDays(nowYear,lastMonth));
                            this.value_time=[]
                            break

                        }
                        case "monthly_usr":{
                            var temp=new Date(now - 1000 * 60 * 60 * 24 * 30)
                            this.params.startDate = this.formatDate(temp.getFullYear(),temp.getMonth()+1,temp.getDate());
                            this.params.endDate = today
                            this.value_time=[]
                            break
                        }
                        case "current_year_usr":{
                            this.params.startDate = this.formatDate(now.getFullYear(), 1, 1);
                            this.params.endDate = today
                            this.value_time=[]
                            break
                        }
                        case "all_usr":{
                            console.log("e:"+today)
                            this.params.startDate = 'all'//this.formatDate(2000, 1, 1); //this.recordBeginTime//
                            this.params.endDate = today
                            this.value_time=[]
                            break
                        }
                    }
                };

                this.$axios.get('../tool/query_user_static_page',{
                    params:this.params
                }).then((res)=>{
                    this.tableData = res.data.data
                    // console.log("res.data:"+res.data.data)
                   
                    this.totalNum  = res.data.count
                    console.log("res.count:"+res.data.count)
                })

                // this.$axios.get('../tool/query_user_static',{
                //     params:this.params
                // }).then((res)=>{
                //     this.currentPage = 1
                //     this.tableData = res.data
                //     console.log(" this.tableData:", this.tableData.length)
                //     for(var i=0;i<this.tableData.length;i++){
                //         this.tableData[i].RegistDate = this.transformTimestamp(this.tableData[i].RegistDate)
                //         this.tableData[i].CountDate = this.transformTimestamp(this.tableData[i].CountDate)
                //         console.log(" this.tableData:", this.tableData[i].RegistDate)
                //     }
                // })



           

            },
            searchName(){
                    // this.params.q = this.search
                    // this.params.page = 1
                    // this.getUserList("all_usr")
                // var search = this.search;
                // this.getUserList("all_usr",7)
                // this.tableData = this.tableData.filter(data => !search || data.Name.toLowerCase().includes(search.toLowerCase()))

                this.params.userName = this.search
                this.params.page = 1
                this.page=1
                this.getUserList(this.type_val, this.dynamic)

            },
            // goToDetailPage(pro_id,pro_name){
            //     sessionStorage.setItem("pro_id",pro_id);
            //     sessionStorage.setItem("pro_name",pro_name);
            //     document.getElementById("pro_main").style.display="none";
            //     document.getElementById("pro_detail").style.display="block";

            // },
            tableHeaderStyle({row,column,rowIndex,columnIndex}){
        
                if(rowIndex===0){
                    return 'background:#f5f5f6;color:#606266'
                }       
            },
            cellStyle({row,column,rowIndex,columnIndex}){
        
                if(rowIndex%2 === 1){
                    return 'background:#f5f5f6;color:#606266'
                }       
            },

            
        },
        filters:{

            transformTimestamp(timestamp){
                console.log("timestamp",timestamp)
                let a = new Date(timestamp*1000);
                const date = new Date(a);
                const Y = date.getFullYear() + '/';
                const M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '/';
                const D = (date.getDate() < 10 ? '0'+date.getDate() : date.getDate()) + '  ';
                const h = (date.getHours() < 10 ? '0'+date.getHours() : date.getHours()) + ':';
                const m = (date.getMinutes() <10 ? '0'+date.getMinutes() : date.getMinutes());// + ':' ;
               // const s = (date.getSeconds() <10 ? '0'+date.getSeconds() : date.getSeconds()) ; // 秒 
                const dateString = Y + M + D + h + m ;//+ s;
                console.log('dateString', dateString); // > dateString 2021-07-06 14:23
                return dateString;
            },

            // transformTimestamp(timestamp){
            //    var dateString= new Date(timestamp);
                
            //    return dateString.toLocaleDateString().replace(/\//g, "-") + " " + dateString.toTimeString().substr(0, 8);
            // },
        },
        
        mounted() {   
            // document.getElementById("all_usr").style.outline="none"
            // document.getElementById("all_usr").focus()
            this.getUserList("all_usr",7)
        },
        created() {
            
        },
        watch:{
            search(val){
                // if(!val){
                //     this.getUserList("all_usr",7)
                // }
                if(!val){
                    this.params.userName = this.search
                    this.params.page = 1
                    this.page=1
                    this.getUserList(this.type_val, this.dynamic)
                } 
            }
        },
    }
</script>

<style scoped>
    .pro_item{
        font-size: 16px;
        color:  rgba(16, 16, 16, 100);
        font-family: SourceHanSansSC-bold;
    }
    .sta_item{
        font-size: 14px;
        color: rgb(0 0 0);
        font-family: SourceHanSansSC-bold;
    }
    .update_time{
        line-height: 17px;
        font-size: 12px;
        color:rgba(187, 187, 187, 100);
        margin-left: 10px;
    }
    .btn{ 
        line-height: 1.5;
        margin: -3px;
        border: 1px solid #409effd6;
        background: #FFFF;
        color: #409eff;
        width: 60px;
        height: 30px;
        border-radius:4px ;
    }

    /* .btn:focus,
    .btn:active{
        background-color:#409effd6 ;
    } */
    /* /deep/ .el-date-picker {
        width: 220px;
    } */
    /deep/ .el-table {
    font-size: 12px;
    }
    /deep/ .el-table tbody tr:hover>td { 
            background-color:#D3D3D3!important;
            opacity:1
    }
    /deep/ .el-range-separator{
            width: 20% !important;
    }

    .colorChange {
    background-color: #409effd6;
    color: #FFFF;
    }

</style>