From b85bb7ecd4fca8accbb7ac08459bffff18acbe3e Mon Sep 17 00:00:00 2001
From: wangjr <wangjr@pcl.ac.cn>
Date: Tue, 10 May 2022 14:25:54 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E7=94=A8=E6=88=B7=E5=A2=9E?=
 =?UTF-8?q?=E9=95=BF=E8=B6=8B=E5=8A=BF=E5=88=86=E6=9E=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web_src/js/components/ProAnalysis.vue  |   2 +-
 web_src/js/components/ProTrend.vue     |   2 +-
 web_src/js/components/UserAnalysis.vue |   2 +-
 web_src/js/components/UserTrend.vue    | 916 ++++++++++++++++++++++++-
 web_src/js/router/index.js             |   5 +
 5 files changed, 923 insertions(+), 4 deletions(-)

diff --git a/web_src/js/components/ProAnalysis.vue b/web_src/js/components/ProAnalysis.vue
index 2e93c223c..d120e9260 100755
--- a/web_src/js/components/ProAnalysis.vue
+++ b/web_src/js/components/ProAnalysis.vue
@@ -2,7 +2,7 @@
     <div class="el-col el-col-21" style="padding-right:10px " >
         <div id = "pro_main">
             <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>   
+                <b  class="pro_item">详细数据</b>  <span class="update_time">数据更新时间：</span>  <span style="font-size: 12px;">{{lastUpdatedTime}}&nbsp/&nbsp从{{recordBeginTime}}开始统计</span>   
             </div>
     
             <bar-label :width="'95%'" :height="'500px'"></bar-label>
diff --git a/web_src/js/components/ProTrend.vue b/web_src/js/components/ProTrend.vue
index 30c40a7ed..7edd69eec 100644
--- a/web_src/js/components/ProTrend.vue
+++ b/web_src/js/components/ProTrend.vue
@@ -2,7 +2,7 @@
     <div  class="el-col el-col-21" style="padding-right:10px ">
         <div id='pro_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>   
+                <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">
                 <el-row>
diff --git a/web_src/js/components/UserAnalysis.vue b/web_src/js/components/UserAnalysis.vue
index 26dcf653c..c4e9c1ce8 100755
--- a/web_src/js/components/UserAnalysis.vue
+++ b/web_src/js/components/UserAnalysis.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="el-col el-col-21" style="padding-right:10px">
         <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>   
+            <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> 
diff --git a/web_src/js/components/UserTrend.vue b/web_src/js/components/UserTrend.vue
index 7c7ac3fdd..0a80fa3fd 100644
--- a/web_src/js/components/UserTrend.vue
+++ b/web_src/js/components/UserTrend.vue
@@ -1,5 +1,919 @@
 <template>
-    <div  class="el-col el-col-21" style="padding-right:10px ">
+    <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',
+                tableDataYesterday: {},
+                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.tableDataYesterday = res.data.data[0]
+                    console.log("tableDataYesterday:",this.tableDataYesterday.ActivateRegistUser)
+                    console.log("tableDataYesterday:",this.tableDataYesterday.NotActivateRegistUser)
+                    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>
\ No newline at end of file
diff --git a/web_src/js/router/index.js b/web_src/js/router/index.js
index 30708ad28..e86e00e44 100644
--- a/web_src/js/router/index.js
+++ b/web_src/js/router/index.js
@@ -43,6 +43,11 @@ export default new Router({
             name:'UserAnalysis',
             component:UserAnalysis,
         },
+        {
+            path:'/UserTrend',
+            name:'UserTrend',
+            component:UserTrend,
+        },
 
         {
             path:'/BrainAnalysis',