aiforge/web_src/js/components/UserTrend.vue

<template>
    <div class="el-col el-col-21" style="padding-right:10px">
        <div id='user_tend'>
            <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>
                <el-col :span="11">
                    <el-col   id="ys_add_user"  class="draw_region">

                    </el-col>
                    <el-col  :span="8" :style="{ height: '180px'}" >
                        <span class="yesterday_blk yesterday_title" >昨日新增注册用户数 </span>
                        <span class="yesterday_blk yesterday_color1 yesterday_pdrt yesterday_text">未激活:<span class="bold_num">{{ tableDataYesterday.NotActivateRegistUser }}</span> 人  </span>
                        <span class="yesterday_blk yesterday_color2 yesterday_pdrt yesterday_text">已激活: <span class="bold_num">{{ tableDataYesterday.ActivateRegistUser }} </span>人</span>
                        <span class="yesterday_blk yesterday_pdrt yesterday_text">有贡献活动: <span class="bold_num">{{ tableDataYesterday.RegistActivityUser }} </span>人</span>
                       
                    </el-col>
                   
                </el-col>
                <el-col :span="13">
                    <el-col  id="ys_all_user"  class="draw_region">

                    </el-col>
                    <el-col :span="8" :style="{ height: '180px'}" >
                        <span class="yesterday_blk yesterday_title" >注册用户数 </span>
                        <span class="yesterday_blk yesterday_color1 yesterday_pdrt yesterday_text">未激活:<span class="bold_num">{{ tableDataYesterday.TotalActivateRegistUser}} </span>人  </span>
                        <span class="yesterday_blk yesterday_color2 yesterday_pdrt yesterday_text">已激活:<span class="bold_num">{{ tableDataYesterday.TotalNotActivateRegistUser }} </span>人</span>
                        <span class="yesterday_blk yesterday_pdrt yesterday_text">有贡献活动:<span class="bold_num"> {{ tableDataYesterday.TotalHasActivityUser}} </span>人</span>
                    </el-col>
            
                    
                </el-col>
                
            </div>

            <div style="margin-top: 20px;">
                <span  class="sta_iterm">统计周期：</span> 
                <button type="button" class='btn' id = "current_week_usr" v-bind:class="{colorChange:1==dynamic}" @click="resetPage(),getUserList('current_week_usr',1)">本周</button>
                <button type="button" class='btn' id = "current_month_usr" v-bind:class="{colorChange:2==dynamic}" @click="resetPage(),getUserList('current_month_usr',2)">本月</button>
                <button type="button" class='btn' id = "last_month_usr" v-bind:class="{colorChange:3==dynamic}" @click="resetPage(),getUserList('last_month_usr',3)">上月</button>
                <button type="button" class='btn' id = "monthly_usr" v-bind:class="{colorChange:4==dynamic}" @click="resetPage(),getUserList('monthly_usr',4)">近30天</button>
                <button type="button" class='btn' id = "current_year_usr" v-bind:class="{colorChange:5==dynamic}" @click="resetPage(),getUserList('current_year_usr',5)">今年</button>
                <button type="button" class='btnLast' id = "all_usr"  v-bind:class="{colorChange:6==dynamic}" @click="resetPage(),getUserList('all_usr',6)">所有</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'>
                        <a class="el-icon-download" v-if="tableData!=''" :href= "this.dataUrl + '?startDate='+this.params.startDate+'&endDate='+this.params.endDate+'&IsReturnFile=true' " ></a>
                        <i class="el-icon-download" v-else="tableData=''" href="#" style="color:rgba(187, 187, 187, 100);" @click='popMark()'></i>
                        <span >
                            <a  v-if="tableData!=''" :href= "this.dataUrl + '?startDate='+this.params.startDate+'&endDate='+this.params.endDate+'&IsReturnFile=true' " >下载报告</a>
                            <a  v-else="tableData=''" href= "#" style="color:rgba(187, 187, 187, 100);" @click='popMark()'>下载报告</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 class="item_echart" id ='linecharts'>
                <div style="margin: 15px 10px 30px;">
                    <label for="label" @change='clickCheckBox'>
                        <input type="checkbox" class="checkboxchart" name="checkboxchart" checked="checked" value="新增项目"/> 新增注册用户
                        <input type="checkbox" class="checkboxchart" name="checkboxchart" checked="checked" value="新增公开项目"/>新增已激活
                        <input type="checkbox" class="checkboxchart" name="checkboxchart" checked="checked" value="新增私有项目"/>新增有贡献活动
                        <input type="checkbox" class="checkboxchart" name="checkboxchart"  value="新增自建项目"/>新增未激活
                        <input type="checkbox" class="checkboxchart" name="checkboxchart"  value="新增派生项目"/>累计注册用户
                        <input type="checkbox" class="checkboxchart" name="checkboxchart"  value="新增镜像项目"/>累计已激活
                        <input type="checkbox" class="checkboxchart" name="checkboxchart"  value="累计项目"/>累计有贡献活动
                    </label>
                </div>              
                <div id ="selectData" style="height: 300px;">

                </div>

            </div>

            <div style="margin-top: 30px;"> 
                <el-table
                    :data="tableData.slice((page-1)*pageSize,page*pageSize)"
                    style="width: 100%"
                    :header-cell-style="tableHeaderStyle"
                    :cell-style='cellStyle'>
                    <el-table-column
                        label="日期"
                        prop="DisplayDate"
                        align="center"
                        stripe
                        >
                    </el-table-column>
                    <el-table-column
                        label="新增注册用户"
                        prop="TotalRegistUser"
                        align="center"> 
                    </el-table-column>
                    <el-table-column
                        prop="ActivateRegistUser"
                        label="新增已激活"
                        width="120px"
                        align="center">
                    </el-table-column> 
                    <el-table-column
                        prop="RegistActivityUser"
                        label="新增有贡献活动"
                        align="center">
                    </el-table-column>
                    <el-table-column
                        prop="NotActivateRegistUser"
                        label="新增未激活"
                        align="center">
                    </el-table-column>
                    <el-table-column
                        prop="ActivateIndex"
                        label="新增用户激活率"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="TotalUser"
                        label="累计注册用户"
                        align="center">
                    </el-table-column>
                    <el-table-column
                        prop="TotalActivateRegistUser"
                        label="累计已激活"
                        align="center">
                    </el-table-column>

                    <el-table-column
                        prop="TotalHasActivityUser"
                        label="累计有贡献活动"
                        align="center">
                    </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="[5,10,20]"
                    layout="total, sizes, prev, pager, next,jumper"
                    :total="tableData.length">
                </el-pagination>
            </div>       
        </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:''},
                tableData: [],
                totalNum:0,
                dataUrl:'../../api/v1/query_user_metrics_page',
                dataYesterdayUrl:'../../api/v1/query_metrics_yesterday',
                ys_count:0,
                tableDataYesterday: {},
                option:'',
                optionYesterdayUser:'',
                optionYesterdaAllUser:'',
                echartsSelectData:'',
                echartsYsAddUser:'',
                echartsYsAllUser:'',
                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:'CloudBrainTaskNum'},{title:'云脑运行时间（小时）',key:'CloudBrainRunTime'},{title:'上传（提交）数据集文件数',key:'CommitDatasetNum'},{title:'提交模型数',key:'CommitModelCount'},{title:'用户指数',key:'UserIndex'},{title:'系统统计时间',key:'CountDate'}],
                blob:'',
                fileName:'',
                dynamic:4,

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

            popMark(){
                    alert("数据为空时，不能下载！")
            },
            // 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]
            //     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.page = val
            },
            handleSizeChange(val){
                this.pageSize = val
            },
            resetPage(){
                this.page=1
            },
            addUser(val1, val2){
                return (val1+val2)

            },
            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;
                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();

                this.dataUrl = '../../api/v1/query_user_metrics_page';

                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":{
                            this.value_time=[]
                            this.dataUrl = '../../api/v1/query_user_yesterday';
                            break
                        }
                        case "current_week_usr":{
                            this.value_time=[]
                            this.dataUrl = '../../api/v1/query_metrics_current_week';
                            break
                        }
                        case "current_month_usr":{
                            this.value_time=[]
                            this.dataUrl = '../../api/v1/query_metrics_current_month';
                            break
                        }
                        case "last_month_usr":{
                            this.value_time=[]
                            this.dataUrl = '../../api/v1/query_metrics_last_month';
                            break
                        }
                        case "monthly_usr":{
                            this.value_time=[]
                            this.dataUrl = '../../api/v1/query_metrics_last30_day';
                            break
                        }
                        case "current_year_usr":{
                            this.value_time=[]
                            this.dataUrl = '../../api/v1/query_metrics_current_year';
                            break
                        }
                        case "all_usr":{
                            this.value_time=[]
                            this.dataUrl = '../../api/v1/query_metrics_all';
                            break
                        }
                    }
                };

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

            
            },
            getYesterdayUser(){
                this.$axios.get(this.dataYesterdayUrl,{
                }).then((res)=>{
                    this.ys_count = res.data.count
                    this.tableDataYesterday = res.data.data[0]
                    if(this.ys_count>0){
                        this.drawYesterdayUser()
                        this.drawSumUser()
                    }
                    
                })
            },
            drawYesterdayUser(){
                this.optionYesterdayUser = {
                    tooltip: {
                        trigger: 'item',
                        show:false
                    },
                    legend: {
                        top: '5%',
                        left: 'center',
                        show:false
                    },
                    // graphic:{
                    //     type:'text',
                    //     left:'center',
                    //     top:'center',
                    //     style:{
                    //         text:this.tableDataYesterday.TotalRegistUser,
                    //         fontSize:18,
                    //         fontWeight:'bold',
                    //         color:'#101010'
                    //     }
                    // },
                    color:['#5087Ec','#DBDBDB'],
                    series: [
                        {
                        name: '',
                        type: 'pie',
                        radius: ['65%', '70%'],
                        center:['50%','50%'],
                        avoidLabelOverlap: false,
                        label: {
                            normal:{
                                show: true,
                                position: 'center',
                                formatter:''+this.tableDataYesterday.TotalRegistUser,
                                fontSize:18,
                                fontWeight:'bold',
                                color:'#101010'
                            }
                        },
                        emphasis: {
                            label: {
                            show: false,
                            fontSize: '40',
                            fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            normal:{
                                show:false
                            }
                        },
                        data: [
                            { value: this.tableDataYesterday.ActivateRegistUser, name: '已激活' },
                            { value: this.tableDataYesterday.NotActivateRegistUser, name: '未激活'},
                        ],
                        hoverAnimation:false,
                        }
                    ]
                    };
                    this.echartsYsAddUser.setOption(this.optionYesterdayUser)
            },
            drawSumUser(){
                this.optionYesterdaAllUser = {
                    tooltip: {
                        trigger: 'item',
                        show:false
                    },
                    legend: {
                        top: '5%',
                        left: 'center',
                        show:false
                    },
                    // graphic:{
                    //     type:'text',
                    //     left:'center',
                    //     top:'center',
                    //     style:{
                    //         text:this.tableDataYesterday.TotalRegistUser,
                    //         fontSize:18,
                    //         fontWeight:'bold',
                    //         color:'#101010'
                    //     }
                    // },
                    color:['#5087Ec','#DBDBDB'],
                    series: [
                        {
                        name: '',
                        type: 'pie',
                        radius: ['65%', '70%'],
                        center:['50%','50%'],
                        avoidLabelOverlap: false,
                        label: {
                            normal:{
                                show: true,
                                position: 'center',
                                formatter:''+this.tableDataYesterday.TotalUser,
                                fontSize:18,
                                fontWeight:'bold',
                                color:'#101010'
                            }
                        },
                        emphasis: {
                            label: {
                            show: false,
                            fontSize: '40',
                            fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            normal:{
                                show:false
                            }
                        },
                        data: [
                            { value: this.tableDataYesterday.TotalActivateRegistUser, name: '已激活' },
                            { value: this.tableDataYesterday.TotalNotActivateRegistUser, name: '未激活'},
                        ],
                        hoverAnimation:false,
                        }
                    ]
                    };
                    this.echartsYsAllUser.setOption(this.optionYesterdaAllUser)

            },
            // searchName(){
                   
            //     this.params.userName = this.search
            //     this.params.page = 1
            //     this.page=1
            //     this.getUserList(this.type_val, this.dynamic)

            // },
           
            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'
                }       
            },
            drawSelectData(){
                
                // $("#selectData").removeAttr("selectData").empty();
                var xdata=[]
                var ydata_TotalRegistUser=[]
                var ydata_ActivateRegistUser=[]
                var ydata_NotActivateRegistUser=[]
                var ydata_RegistActivityUser=[]
                var ydata_TotalUser=[]
                var ydata_TotalActivateRegistUser=[]
                var ydata_TotalHasActivityUser=[]
           
                // if ()
                for(var i =0;i<this.tableData.length;i++){
                    xdata.push(this.tableData[this.tableData.length-1-i].DisplayDate);
                    ydata_TotalRegistUser.push(this.tableData[this.tableData.length-1-i].TotalRegistUser)
                    ydata_ActivateRegistUser.push(this.tableData[this.tableData.length-1-i].ActivateRegistUser)
                    ydata_RegistActivityUser.push(this.tableData[this.tableData.length-1-i].RegistActivityUser)
                    ydata_NotActivateRegistUser.push(this.tableData[this.tableData.length-1-i].NotActivateRegistUser)
                    ydata_TotalUser.push(this.tableData[this.tableData.length-1-i].TotalUser)
                    ydata_TotalActivateRegistUser.push(this.tableData[this.tableData.length-1-i].TotalActivateRegistUser)
                    ydata_TotalHasActivityUser.push(this.tableData[this.tableData.length-1-i].TotalHasActivityUser)
                }

                 this.option = {
                        title : {
                            text: '',


                            textStyle: {
                                    fontSize: 12,
                                },
                            left:'center',
                            top:'bottom',

                            subtext: '',

                        },
                        tooltip : {
                            trigger: 'axis',
                            backgroundColor:'rgba(255,255,255,0.8)',
                            color:'black',
                            borderWidth:'1',
                            borderColor:'gray',
                            textStyle:{
                                color:'black'
                            },
                      
                        },
                        legend: {
                            data:['新增注册用户','新增已激活','新增有贡献活动','新增未激活','累计注册用户','累计已激活','累计有贡献活动'],
                            selected:{
                                '新增未激活':false,
                                '累计注册用户':false,
                                '累计已激活':false,
                                '累计有贡献活动':false
                            }
                            // orient: 'vertical',
                            // top:'top',　　
                        },
                        toolbox: {
                            show : false,
                            feature : {
                                mark : {show: true},
                                dataView : {show: false, readOnly: false},
                                magicType : {show: true, type: ['line', 'bar']},
                                restore : {show: false},
                                saveAsImage : {show: true}
                            }
                        },
                        calculable : true,
                        xAxis : [
                            {
                                type : 'category',
                                data : xdata,
                                axisLine: {
                                    show: false, //x轴线消失
                                }, 
                                axisTick:{
                                    show:false//刻度隐藏
                                }
                                
                            }
                        ],
                        yAxis : [
                            {
                                type : 'value', 
                                axisLine: {
                                    show: false, //y轴线消失
                                }, 
                                axisTick:{
                                    show:false//刻度隐藏
                                }  
                            }
                        ],
                        series : [
                            {   name:"新增注册用户",
                                data: ydata_TotalRegistUser,
                                type: 'line',
                                areaStyle: {},
                                itemStyle:{
                                    normal:{
                                        lineStyle:{
                                            color:"#3894FF ",
                                        },
                                        color:"#3894FF ",
                                    }
                                },
                            },
                            {
                                name:"新增已激活",
                                data: ydata_ActivateRegistUser,
                                type: 'line',
                                areaStyle: {},
                                itemStyle:{
                                    normal:{
                                        lineStyle:{
                                            color:"#67B3BB",
                                        },
                                        color:"#67B3BB",
                                    }
                                },
                            },
                            {
                                name:"新增有贡献活动",
                                data: ydata_RegistActivityUser,
                                type: 'line',
                                areaStyle: {},
                                itemStyle:{
                                    normal:{
                                        lineStyle:{
                                            color:"#58A55C",
                                        },
                                        color:"#58A55C",
                                    }
                                },
                            }, 
                            {
                                name:"新增未激活",
                                data: ydata_NotActivateRegistUser,
                                type: 'line',
                                areaStyle: {},
                                itemStyle:{
                                    normal:{
                                        lineStyle:{
                                            color:"#F2BD42",
                                        },
                                        color:"#F2BD42",
                                    }
                                },
                            },
                            {
                                name:"累计注册用户",
                                data: ydata_TotalUser,
                                type: 'line',
                                areaStyle: {},
                                itemStyle:{
                                    normal:{
                                        lineStyle:{
                                            color:"#2E4552",
                                        },
                                        color:"#2E4552",
                                    }
                                },
                            },  
                            {
                                name:"累计已激活",
                                data: ydata_TotalActivateRegistUser,
                                type: 'line',
                                areaStyle: {},
                                itemStyle:{
                                    normal:{
                                        lineStyle:{
                                            color:"#4786B4",
                                        },
                                        color:"#4786B4",
                                    }
                                },
                            },
                            {
                                name:"累计有贡献活动",
                                data: ydata_TotalHasActivityUser,
                                type: 'line',
                                areaStyle: {},
                                itemStyle:{
                                    normal:{
                                        lineStyle:{
                                            color:"#4E9C8F",
                                        },
                                        color:"#4E9C8F",
                                    }
                                },
                            },

                        ]
                }; 
                // this.echartsSelectData.resize()
                this.echartsSelectData.setOption(this.option)
                // setTimeout(function (){
                //     window.onresize = function () {
                //         this.echartsSelectData.resize;
                //     }
                // },200)

                // // 使用刚指定的选择项数据显示图表。
                // var selectArr = this.echartsSelectData.getOption().legend[0].data;//legend所有值
                // var checkboxs=document.getElementsByName('checkboxchart'); 
                // $(".checkboxchart").click(function(){
                //     var obj = {};
                //     for(var i=0; i<checkboxs.length; i++){
                //         if(checkboxs[i].checked){
                //             obj[selectArr[i]] = true;
                //         }else{
                //             obj[selectArr[i]] = false;
                //         }
                //     } 
                //     option.legend.selected = obj;
                //     this.echartsSelectData.setOption(option);
                // });
                


            },
            clickCheckBox(){
                // 使用刚指定的选择项数据显示图表。
                var selectArr = this.echartsSelectData.getOption().legend[0].data;//legend所有值
                var checkboxs=document.getElementsByName('checkboxchart'); 
                // $(".checkboxchart").click(function(){
                    var obj = {};
                    for(var i=0; i<checkboxs.length; i++){
                        if(checkboxs[i].checked){
                            obj[selectArr[i]] = true;
                        }else{
                            obj[selectArr[i]] = false;
                        }
                    } 
                    this.option.legend.selected = obj;
                    this.echartsSelectData.setOption(this.option);
                // });

            },

            
        },
        filters:{
            rounding (value) {
                    return Number(value).toFixed(2)
            },
            roundingToHour (value) {
                    return (Number(value)/3600).toFixed(2)
            },
            transformTimestamp(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;
                return dateString;
            },
            addUser(val1,val2){
                return val1+val2
            }
        },
        
        mounted() {   
            // document.getElementById("all_usr").style.outline="none"
            // document.getElementById("all_usr").focus()
            this.getUpdateTime()
            this.getUserList("monthly_usr",4)
            this.getYesterdayUser()

            document.getElementById('selectData').style.width  = document.getElementById('user_tend').offsetWidth*0.8+'px'            
            this.echartsSelectData = this.$echarts.init(document.getElementById('selectData'))
       
            // document.getElementById('ys_add_user').style.width  = document.getElementById('user_tend').offsetWidth*0.2+'px'            
            this.echartsYsAddUser = this.$echarts.init(document.getElementById('ys_add_user'))

            // document.getElementById('ys_all_user').style.width  = document.getElementById('user_tend').offsetWidth*0.2+'px'            
            this.echartsYsAllUser = this.$echarts.init(document.getElementById('ys_all_user'))

            // document.getElementById('ys_sum_user').style.width  = document.getElementById('user_tend').offsetWidth*0.23+'px'            
            // this.echartsYsSumUser = this.$echarts.init(document.getElementById('ys_sum_user'))
        },
        created() {
            this.getUserList("monthly_usr",4)
            this.getYesterdayUser()
            
        },
        watch:{
            // search(val){
            //     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 ;
    } */
    .btnFirst{ 
            line-height: 1.5;
            margin: -3.5px;
            border: 1px solid rgba(22, 132, 252, 100);
            border-right: none;
            background: #FFFF;
            color: #1684FC;
            width: 60px;
            height: 30px;
            border-radius:4px 0px 0px 4px;
    }
    .btn{ 
        line-height: 1.5;
        margin: -3.5px;
        border: 1px  solid rgba(22, 132, 252, 100);
        border-right: none;
        background: #FFFF;
        color: #1684FC;
        width: 60px;
        height: 30px;
    }
    .btnLast{ 
        line-height: 1.5;
        margin: -3.5px;
        border: 1px solid rgba(22, 132, 252, 100);
        /* border-right: none; */
        background: #FFFF;
        color: #1684FC;
        width: 60px;
        height: 30px;
        border-radius:0px 4px 4px 0px;
    }
    .btnFirst,.btn,.btnLast {
        cursor: pointer;
    }


    /* .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;
    }
    /deep/ .el-pagination {
        padding-bottom: 30px;
    }
    .colorChange {
        background-color: #1684FC;
        color: #FFFF;
        cursor: default;
    }
    .item_echart{
        margin-top: 10px;
        margin-right: 5px;
        border:1px solid rgba(219, 219, 219, 100);
        height: 350px;
        width: 100%;
    }
    .yesterday_blk{
        display: block;
        margin-top:40px
    }
    .yesterday_pdrt{
        padding-left: 10px;
    }
    .yesterday_color1{
        border-left: 3px solid #DBDBDB;
    }
    .yesterday_color2{
        border-left: 3px solid #5087Ec;
    }
    .yesterday_title{
        font-size: 14px;
        font-weight: bold;
    }
    .yesterday_text{
        font-size: 12px;
        line-height: 12px;
        color: #888888;
        margin-top: 10px;
    }
    .bold_num{
        font-weight: bold;
    }
    .draw_region{
        width: 180px;
        height: 180px;
    }
</style>