diff --git a/web_src/js/components/DataAnalysis.vue b/web_src/js/components/DataAnalysis.vue
index 186a216c2..68af96239 100755
--- a/web_src/js/components/DataAnalysis.vue
+++ b/web_src/js/components/DataAnalysis.vue
@@ -1,4 +1,4 @@
-<template>
+<!-- <template>
     <div  style="height:100%">
         <el-tabs tab-position="left" v-model="activeName" style="height:100%" @tab-click="handleClick" >
             <el-tab-pane label="概览" name="first" >
@@ -36,68 +36,108 @@
             </el-tab-pane>
       </el-tabs>
       </div>
-    </template>
-
+    </template> -->
+    <template>
+        <div style="height:100%;padding-bottom: 60px;">
+          <el-col :span="3" style="height:100%;padding-right:20px;">
+            <el-menu
+              default-active="this.$route.path"
+              class="el-menu-vertical-demo"
+               :router="true" style="height:100%; background-color: #F5F5F6;" >
+                <el-menu-item index="overview" >
+                    <i class="ri-home-4-line"></i>
+                    <span slot="title">概览</span>
+                </el-menu-item>
+                <el-submenu index="1">
+                    <template slot="title">
+                    <el-image style="width: 13px; height: 13px" src="/img/pro_rgb.svg">
+                    </el-image>
+                    <span>项目分析</span>
+                    </template>
+                    <el-menu-item index="ProTend">项目增长趋势分析</el-menu-item> 
+                    <el-menu-item index="ProAnalysis">详细数据</el-menu-item>
+                </el-submenu>
+                <el-submenu index="2">
+                    <template slot="title">
+                    <i class="ri-user-line"></i>
+                    <span>用户分析</span>
+                    </template>
+                    <el-menu-item index="UserAnalysis">用户增长趋势分析</el-menu-item> 
+                    <el-menu-item index="2-2">活动分析</el-menu-item>
+                </el-submenu>
+                <el-menu-item index="demo">
+                    <i class="ri-server-fill"></i>
+                    <span slot="title">云脑分析</span>
+                </el-menu-item>
+            </el-menu>
+            
+          </el-col>
+          <router-view> </router-view>
+          </div>
+        </template>
+    
     <script>
-        import ProAnalysis from './ProAnalysis.vue'
-        import UserAnalysis from './UserAnalysis.vue'
-        import BrainAnalysis from './BrainAnalysis.vue'
 
-        export default {
+    //     import ProAnalysis from './ProAnalysis.vue'
+    //     import UserAnalysis from './UserAnalysis.vue'
+    //     import BrainAnalysis from './BrainAnalysis.vue'
 
-            components:{
-                'ProAnalysis':ProAnalysis,
-                'UserAnalysis':UserAnalysis,
-                'BrainAnalysis':BrainAnalysis,
-            },
-            data() {
-                return {
-                    activeName:"second",
-                    loading:true,
-                    loading1:true,
-                    isRouterAlive: true,
-                    isRouterAlive1: true,
+    //     export default {
+
+    //         components:{
+    //             'ProAnalysis':ProAnalysis,
+    //             'UserAnalysis':UserAnalysis,
+    //             'BrainAnalysis':BrainAnalysis,
+    //         },
+    //         data() {
+    //             return {
+    //                 activeName:"second",
+    //                 loading:true,
+    //                 loading1:true,
+    //                 isRouterAlive: true,
+    //                 isRouterAlive1: true,
                     
-                    isSecond:true,
-                    isThird:false,
-                }
-            },
-            methods:{
-                handleClick(tab, event){
-                    if(tab.name=="second"){
-                        this.reload()
+    //                 isSecond:true,
+    //                 isThird:false,
+    //             }
+    //         },
+    //         methods:{
+    //             handleClick(tab, event){
+    //                 if(tab.name=="second"){
+    //                     this.reload()
 
-                        this.isSecond = true
-                        this.isThird = false
-                        this.$refs.ProAnalysis.getAllProList("all",7)
-                    }
-                    if(tab.name=="third"){
+    //                     this.isSecond = true
+    //                     this.isThird = false
+    //                     this.$refs.ProAnalysis.getAllProList("all",7)
+    //                 }
+    //                 if(tab.name=="third"){
 
-                        this.reload1()
-                        this.isSecond = false
-                        this.isThird = true
+    //                     this.reload1()
+    //                     this.isSecond = false
+    //                     this.isThird = true
 
-                        this.$refs.UserAnalysis.getUpdateTime()
-                        this.$refs.UserAnalysis.getUserList("all_usr",7)
+    //                     this.$refs.UserAnalysis.getUpdateTime()
+    //                     this.$refs.UserAnalysis.getUserList("all_usr",7)
                         
 
                         
-                    }
+    //                 }
 
-                },
+    //             },
                     
-                reload () {
-                    this.isRouterAlive = false
-                    this.$nextTick(() => (this.isRouterAlive = true))
-                },
-                reload1 () {
-                    this.isRouterAlive1 = false
-                    this.$nextTick(() => (this.isRouterAlive1 = true))
-                }   
+    //             reload () {
+    //                 this.isRouterAlive = false
+    //                 this.$nextTick(() => (this.isRouterAlive = true))
+    //             },
+    //             reload1 () {
+    //                 this.isRouterAlive1 = false
+    //                 this.$nextTick(() => (this.isRouterAlive1 = true))
+    //             }   
 
-            },
-        }
+    //         },
+    //     }
     </script>
+
     
     <style scoped>
      /deep/ .is-active{
@@ -137,8 +177,19 @@
     /deep/ .el-tabs__item:hover .el-image{
         filter:none
     }
-    /deep/ .el-image{
+
+    .bk{
+        background-color: #F5F5F6;
+    }
+    .el-menu-item.is-active {
+    color: #409eff;
+    background-color: #FFFFFF !important;
+}
+    /* .el-menu-item.el-image{
         filter:grayscale(100%)
     }
+ .el-menu-item.is-active.el-image{
+        filter:grayscale(0%) ;
+    } */
   
     </style>
\ No newline at end of file
diff --git a/web_src/js/components/DataAnalysis1.vue b/web_src/js/components/DataAnalysis1.vue
new file mode 100644
index 000000000..5a0caaada
--- /dev/null
+++ b/web_src/js/components/DataAnalysis1.vue
@@ -0,0 +1,158 @@
+<template>
+    <!-- <div  style="height:100%"> -->
+        <!-- <el-tabs tab-position="left" v-model="activeName" style="height:100%" @tab-click="handleClick" >
+            <el-tab-pane label="概览" name="first" >
+                <span slot="label"> 
+                    <el-image style="width: 13px; height: 13px" src="/img/overview_rgb.svg">
+                    </el-image>
+                    概览 
+                </span>    
+                <div >暂无内容.......</div>
+
+            </el-tab-pane>
+            <el-tab-pane label="项目分析" name="second" id="second" >
+                <ProAnalysis  ref='ProAnalysis'id="pro" v-if="isRouterAlive"></ProAnalysis>
+                <span slot="label"> 
+                    <el-image style="width: 13px; height: 13px" src="/img/pro_rgb.svg">
+                    </el-image>
+                    项目分析 
+                </span> 
+            </el-tab-pane>
+            <el-tab-pane name="third" id='third' > 
+                <span slot='label'>
+                    <el-image style="width: 13px; height: 13px" src="/img/user_rgb.svg">
+                    </el-image>
+                    用户分析 
+                </span>
+                <UserAnalysis ref='UserAnalysis'  v-if="isRouterAlive1" id ="usr"></UserAnalysis>
+            </el-tab-pane>
+            <el-tab-pane name="four" id='four' > 
+                <BrainAnalysis  ref='BrainAnalysis'id="brain" v-if="isRouterAlive"></BrainAnalysis>
+                <span slot="label"> 
+                    <el-image style="width: 13px; height: 13px" src="/img/pro_rgb.svg">
+                    </el-image>
+                    云脑分析（建设中..） 
+                </span> 
+            </el-tab-pane>
+
+
+      </el-tabs> -->
+        <el-col :span="21" style="float: right;padding-left:10px">
+            <ProAnalysis></ProAnalysis>
+        </el-col>
+      <!-- </div> -->
+    </template>
+    <script>
+        import ProAnalysis from './ProAnalysis.vue'
+        export default {
+
+            components:{
+                'ProAnalysis':ProAnalysis,
+            },
+        }
+    </script>
+<!-- 
+    <script>
+        import ProAnalysis from './ProAnalysis.vue'
+        import UserAnalysis from './UserAnalysis.vue'
+        import BrainAnalysis from './BrainAnalysis.vue'
+
+        export default {
+
+            components:{
+                'ProAnalysis':ProAnalysis,
+                'UserAnalysis':UserAnalysis,
+                'BrainAnalysis':BrainAnalysis,
+            },
+            data() {
+                return {
+                    activeName:"second",
+                    loading:true,
+                    loading1:true,
+                    isRouterAlive: true,
+                    isRouterAlive1: true,
+                    
+                    isSecond:true,
+                    isThird:false,
+                }
+            },
+            methods:{
+                handleClick(tab, event){
+                    if(tab.name=="second"){
+                        this.reload()
+
+                        this.isSecond = true
+                        this.isThird = false
+                        this.$refs.ProAnalysis.getAllProList("all",7)
+                    }
+                    if(tab.name=="third"){
+
+                        this.reload1()
+                        this.isSecond = false
+                        this.isThird = true
+
+                        this.$refs.UserAnalysis.getUpdateTime()
+                        this.$refs.UserAnalysis.getUserList("all_usr",7)
+                        
+
+                        
+                    }
+
+                },
+                    
+                reload () {
+                    this.isRouterAlive = false
+                    this.$nextTick(() => (this.isRouterAlive = true))
+                },
+                reload1 () {
+                    this.isRouterAlive1 = false
+                    this.$nextTick(() => (this.isRouterAlive1 = true))
+                }   
+
+            },
+        }
+    </script>
+    
+    <style scoped>
+     /deep/ .is-active{
+    color: #238BFC ;
+    background-color: #FFFF ;
+    }
+    /deep/ .ui-container{
+      background-color: #FFFF;
+    }
+    
+    
+    /deep/ .el-tabs--left .el-tabs__header.is-left{
+      background-color:#F5F5F6;
+      width: 12.43%;
+    
+    }
+    .el-tabs--left .el-tabs__header.is-left
+    
+    
+    html,
+    body,
+    /deep/ .el-container {
+      padding: 0px;
+      margin: 0px;
+      height: 100%;
+    }
+    
+    /deep/ .el-tabs--left .el-tabs__item.is-left {
+        text-align: left;
+    }
+    /deep/ .el-tabs__item {
+        padding: 0px 20px 0px 20px;
+    }
+    /deep/ .el-tabs__item.is-active .el-image{
+        filter:none
+    }
+    /deep/ .el-tabs__item:hover .el-image{
+        filter:none
+    }
+    /deep/ .el-image{
+        filter:grayscale(100%)
+    }
+  
+    </style> -->
\ No newline at end of file
diff --git a/web_src/js/components/Overview.vue b/web_src/js/components/Overview.vue
new file mode 100644
index 000000000..0988ef61e
--- /dev/null
+++ b/web_src/js/components/Overview.vue
@@ -0,0 +1,5 @@
+<template>
+    <div>
+        暂无内容
+    </div>
+</template>
\ No newline at end of file
diff --git a/web_src/js/components/ProAnalysis.vue b/web_src/js/components/ProAnalysis.vue
index bdc874c27..016da4abc 100755
--- a/web_src/js/components/ProAnalysis.vue
+++ b/web_src/js/components/ProAnalysis.vue
@@ -1,5 +1,5 @@
 <template>
-    <div style="width: 100%;">
+    <div class="el-col el-col-21" style="padding-left: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>   
diff --git a/web_src/js/components/ProAnalysis1.vue b/web_src/js/components/ProAnalysis1.vue
new file mode 100644
index 000000000..bdc874c27
--- /dev/null
+++ b/web_src/js/components/ProAnalysis1.vue
@@ -0,0 +1,1336 @@
+<template>
+    <div style="width: 100%;">
+        <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>   
+            </div>
+    
+            <bar-label :width="'95%'" :height="'500px'"></bar-label>
+            <div style="margin-top: 20px;">
+                <span  class="sta_iterm">统计周期：</span> 
+                <button type="button" class='btnFirst' id ="yesterday" v-bind:class="{colorChange:1==dynamic}"  @click="resetPage(),getAllProList('yesterday',1)">昨天</button>
+                <button type="button" class='btn' id = "current_week" v-bind:class="{colorChange:2==dynamic}"  @click="resetPage(),getAllProList('current_week',2)">本周</button>
+                <button type="button" class='btn' id = "current_month" v-bind:class="{colorChange:3==dynamic}"  @click="resetPage(),getAllProList('current_month',3)">本月</button>
+                <button type="button" class='btn' id = "last_month" v-bind:class="{colorChange:4==dynamic}"  @click="resetPage(),getAllProList('last_month',4)">上月</button>
+                <button type="button" class='btn' id = "monthly" v-bind:class="{colorChange:5==dynamic}"  @click="resetPage(),getAllProList('monthly',5)">近30天</button>
+                <button type="button" class='btn' id = "current_year" v-bind:class="{colorChange:6==dynamic}" @click="resetPage(),getAllProList('current_year',6)">今年</button>
+                <button type="button" class='btnLast' id = "all"  v-bind:class="{colorChange:7==dynamic}" @click="resetPage(),getAllProList('all',7)">所有</button>
+                <span style="margin-left: 20px;">
+                    <el-date-picker
+                        v-model="value_time"
+                        prefix-icon="el-icon-time"
+                        @change="resetPage(),getAllProList('',0)"
+                        type="daterange"
+                        size='small'
+                        range-separator="至"
+                        start-placeholder="开始日期"
+                        end-placeholder="结束日期">   
+                    </el-date-picker>
+                </span>
+                <span style="float:right; margin-right: 20px;">
+                    <div style="display:inline-block;margin-left: 20px; ">
+                        <a class="el-icon-download" v-if="tableData!=''" :href= "'../api/v1/projectboard/downloadAll/?type='+this.params.type+'&beginTime='+this.params.beginTime+'&endTime='+this.params.endTime+'&q='+this.params.q+'&sort=openi'" ></a>
+                        <i class="el-icon-download" v-else="tableData=''" href="#" style="color:rgba(187, 187, 187, 100);" @click='popMark()'></i>
+                        <!-- <span ><a id = "download_file" :href= "'../api/v1/projectboard/downloadAll/?type='+this.params.type+'&beginTime='+this.params.beginTime+'&endTime='+this.params.endTime+'&q='+this.params.q+'&sort=openi'"   >下载报告</a> </span> -->
+                        <span >
+                            <a id = "download_file"  v-if="tableData!=''" :href= "'../api/v1/projectboard/downloadAll/?type='+this.params.type+'&beginTime='+this.params.beginTime+'&endTime='+this.params.endTime+'&q='+this.params.q+'&sort=openi'">下载报告</a>
+                            <a id = "download_file"  v-else="tableData=''"  href= "#" style="color:rgba(187, 187, 187, 100);" @click='popMark()'>下载报告</a> 
+                        </span>
+                    </div>  
+
+
+                    <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"
+                        align="left"
+                        prop="repo_id"
+                        stripe
+                        >
+                    </el-table-column>
+                    <el-table-column
+                        label="项目名称中文"
+                        align="left"
+                        prop="name"
+                        v-if='0'
+                        >
+                    </el-table-column>
+                    <el-table-column
+                        label="项目名称"
+                        width="125px"
+                        align="left"
+                        prop="alias"
+                        style="color:#0366D6;font-family: Roboto"
+                        >
+                        <template slot-scope="scope">
+                            <a @click=goToDetailPage(scope.row.repo_id,scope.row.name,scope.row.ownerName,scope.row.alias)>{{scope.row.alias}} </a>
+                        </template>
+                    </el-table-column>
+                        <el-table-column
+                        label="拥有者"
+                        align="center"
+                        prop="ownerName"
+                        stripe
+                        >
+                    </el-table-column>
+                    <el-table-column
+                        prop="isPrivate" 
+                        label="私有"
+                        align="center">
+                        <template slot-scope="scope">
+                             {{scope.row.isPrivate|changeType}}                      
+                        </template>
+                    </el-table-column>
+                    <el-table-column
+                        prop="openi"
+                        label="OpenI指数"
+                        align="center">
+                        <template slot-scope="scope">
+                            {{scope.row.openi | rounding}}
+                        </template>
+                    </el-table-column>
+                    <el-table-column
+                        prop="view"
+                        label="浏览量"
+                        align="center">
+                   </el-table-column>
+                   <el-table-column
+                        prop="download"
+                        label="代码下载量"
+                        align="center">
+                    </el-table-column>
+                    <el-table-column
+                        prop="pr"
+                        label="PR"
+                        align="center">
+                    </el-table-column>
+                    <el-table-column
+                        prop="commit"
+                        label="Commit数"
+                        align="center">
+                    </el-table-column>
+                    <el-table-column
+                        prop="watch"
+                        label="关注数"
+                        align="center">
+                    </el-table-column>
+                    <el-table-column
+                        prop="star"
+                        label="点赞数"
+                        align="center">
+                    </el-table-column>
+                    <el-table-column
+                        prop="fork"
+                        label="派生数"
+                        align="center">
+                    </el-table-column>
+                    <el-table-column
+                        prop="issue"
+                        label="任务数"
+                        align="center">
+                    </el-table-column>
+                    <el-table-column
+                        prop="issueClosed"
+                        label="已解决任务"
+                        align="center">
+                    </el-table-column>
+                    <el-table-column
+                        prop="contributor"
+                        label="贡献者数"
+                        align="center">
+                    </el-table-column>
+                    <el-table-column
+                        prop="isFork"
+                        label="派生"
+                        align="center">
+                        <template slot-scope="scope">
+                            {{scope.row.isFork|changeType}}                      
+                        </template>
+                    </el-table-column> 
+                    <el-table-column
+                        prop="isMirror"
+                        label="镜像"
+                        align="center">
+                        <template slot-scope="scope">
+                            {{scope.row.isMirror|changeType}}                      
+                       </template>
+                    </el-table-column>   
+                    <el-table-column
+                        prop="createUnix"
+                        label="项目创建时间"
+                        width="120px"
+                        align="center">
+                        <template slot-scope="scope">
+                            {{scope.row.createUnix|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="[5,10,20]"
+                layout="total, sizes,prev, pager, next,jumper"
+                :total="totalNum">
+                </el-pagination>
+            </div>
+                    
+        </div>
+        <div id ="pro_detail" style="display:none;width: 100%;">
+            <div style="margin-top: 10px;">
+                <a  class="pro_item" :href="'../../../'+this.ownerName+'/'+this.pro_name">{{this.ownerName}}&nbsp/&nbsp{{this.alias}}</a>  <span class="update_time">数据更新时间：</span><span style="font-size: 12px;">{{tableDataIDTotal.lastUpdatedTime}}&nbsp/&nbsp从{{tableDataIDTotal.recordBeginTime}}开始统计</span>   
+            </div>
+            <div style="margin-top: 10px;">
+                项目描述：{{tableDataIDTotal.description | discriptionFun}}
+            </div>
+            <div style="margin-top:20px">
+                <el-row >
+                    <el-col :span='4' class="items"> 
+                        <el-row>项目创建时间 </el-row>
+                        <el-row class="item_content">{{tableDataIDTotal.creatTime}}</el-row>
+                    </el-col>
+                    <el-col :span='4' class="items"> 
+                        <el-row>OpenI指数</el-row>
+                        <el-row class="item_content">{{tableDataIDTotal.openi |  rounding}}</el-row>
+                    </el-col>
+                    <el-col :span='4' class="items"> 
+                        <el-row>评论数 </el-row>
+                        <el-row class="item_content">{{tableDataIDTotal.comment}}</el-row>
+                    </el-col>
+                    <el-col :span='4' class="items"> 
+                        <el-row>浏览量 </el-row>
+                        <el-row class="item_content">{{tableDataIDTotal.view}}</el-row>
+                    </el-col>
+                    <el-col :span='4' class="items"> 
+                        <el-row>代码下载量</el-row>
+                        <el-row class="item_content">{{tableDataIDTotal.download}}</el-row>
+                    </el-col>
+                    <el-col :span='4' style="text-align: center;"> 
+                        <el-row>任务完成比例</el-row>
+                        <el-row class="item_content">{{Math.round(tableDataIDTotal.issueClosedRatio * 100) }}%</el-row>
+                    </el-col>
+                </el-row>           
+            </div>
+            <div style="margin-top:30px;">
+                <el-row :gutter="20">
+                    <el-col :span=18 >                    
+                        <div class="item_l"  id="charts">
+                            <div style="font-size:14px;color:#0366D6;margin:20px 5px;">OpenI指数：{{tableDataIDTotal.openi | rounding}}</div>
+                            <div >
+                                <el-col :span='8' id="radar_openi" :style="{ height: '300px'}"></el-col>
+    
+                                <el-col :span='16' id="line_openi" :style="{ height: '300px',float:'right'}"></el-col>
+                            </div>
+                        </div>
+                    </el-col>
+                    <el-col :span=6 >
+                        <div class="item_r">
+                            <div style="margin:0 5px;">
+                                <div style="font-size:14px;color:rgb(0,0,0);margin:10px 5px">贡献者TOP10</div>
+                                <div>
+                                    <el-table
+                                        :data="tableDataContTop10"
+                                        style="width: 100%"
+                                        stripe
+                                        :header-cell-style="tableHeaderStyle"
+                                        >
+                                        <el-table-column
+                                            label="用户名"
+                                            align="left"
+                                            prop="user">
+                                            <template slot-scope="scope">
+                                                <a v-if="scope.row.relAvatarLink!=''" :href="AppSubUrl +'../../../'+ scope.row.user"><img class="ui avatar s16 image js-popover-card" :src="scope.row.relAvatarLink">{{scope.row.user}} </a>
+                                                <a v-else :href="'mailto:'+ scope.row.email "> <img class="ui avatar s16 image js-popover-card" :avatar="scope.row.email"> {{scope.row.user}}</a>  
+                                            </template>  
+                                        </el-table-column>
+                                        <el-table-column
+                                            label="身份"
+                                            align="center"
+                                            prop="mode"
+                                            v-if='0'>
+                                            <template slot-scope="scope">
+                                                {{scope.row.mode | showMode}}
+                                            </template>    
+                                        </el-table-column>
+                                        <el-table-column
+                                            prop="pr"
+                                            label="PR"
+                                            width="50px"
+                                            align="center">
+                                        </el-table-column>
+                                        <el-table-column
+                                            prop="commit"
+                                            label="commit"
+                                            align="center">
+                                        </el-table-column>
+                                                
+                                    </el-table>
+                                </div>
+                            </div>
+                        </div>
+                    </el-col>
+                </el-row>
+            </div>
+            <div style="margin-top: 20px;">
+                <span  class="sta_iterm">统计周期：</span> 
+                <button type="button" class='btnFirst' id ="yesterday_pro" v-bind:class="{colorChange:1==dynamic_pro}"  @click="resetCurrentPage(),getOneProList(pro_id,'yesterday',false,1)">昨天</button>
+                <button type="button" class='btn' id = "current_week_pro" v-bind:class="{colorChange:2==dynamic_pro}"  @click="resetCurrentPage(),getOneProList(pro_id,'current_week',false,2)">本周</button>
+                <button type="button" class='btn' id = "current_month_pro" v-bind:class="{colorChange:3==dynamic_pro}"  @click="resetCurrentPage(),getOneProList(pro_id,'current_month',false,3)">本月</button>
+                <button type="button" class='btn' id = "last_month_pro" v-bind:class="{colorChange:4==dynamic_pro}"  @click="resetCurrentPage(),getOneProList(pro_id,'last_month',false,4)">上月</button>
+                <button type="button" class='btn' id = "monthly_pro" v-bind:class="{colorChange:5==dynamic_pro}"  @click="resetCurrentPage(),getOneProList(pro_id,'monthly',false,5)">近30天</button>
+                <button type="button" class='btn' id = "current_year_pro" v-bind:class="{colorChange:6==dynamic_pro}" @click="resetCurrentPage(),getOneProList(pro_id,'current_year',false,6)">今年</button>
+                <button type="button" class='btnLast' id = "all_pro"  v-bind:class="{colorChange:7==dynamic_pro}" @click="resetCurrentPage(),getOneProList(pro_id,'all',false,7)">所有</button>
+                <span style="margin-left: 20px;">
+                    <el-date-picker
+                        v-model="create_time_pro"
+                        prefix-icon="el-icon-time"
+                        @change="resetCurrentPage(),getOneProList(pro_id,'',false,0),clickCheckBox"
+                        type="daterange"
+                        size='small'
+                        range-separator="至"
+                        start-placeholder="开始日期"
+                        end-placeholder="结束日期">   
+                    </el-date-picker>
+                </span>
+                <span style="float:right; margin-right: 20px;">
+                    <div style="display:inline-block;margin-left: 20px;">
+                        <a  v-if="tableDataID!=''"  @click="exportData()" class="el-icon-download"></a>
+                        <a  v-else="tableDataID=''" @click="exportData()" style="color:rgba(187, 187, 187, 100);" class="el-icon-download"></a>
+                        <span >
+                            <a v-if="tableDataID!=''" @click="exportData()">下载报告</a>
+                            <a v-else="tableDataID=''" @click="exportData()" style="color:rgba(187, 187, 187, 100);">下载报告</a>
+                        </span>
+                    </div>  
+                </span>
+            </div>
+            <div class="item_echart" id ='linecharts'>
+                <div style="margin-top:10px;margin-left: 5px;">
+                    <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="commit"/>commit
+                    </label>
+	            </div>              
+                <div id ="selectData" style="height: 300px;">
+
+                </div>
+    
+            </div>
+            <div style="margin-top: 30px;"> 
+                <el-table
+                    :data="tableDataID.slice((currentPage-1)*pageSize1,currentPage*pageSize1)"
+                    style="width: 100%"
+                    :header-cell-style="tableHeaderStyle"
+                    :cell-style='cellStyle'>
+                    <el-table-column
+                        label="日期"
+                        align="center"
+                        prop="date"
+                        stripe
+                        >
+                    </el-table-column>
+                    <el-table-column
+                        label="浏览量"
+                        align="center"
+                        prop="view">
+                    </el-table-column>
+                    <el-table-column
+                        prop="download"
+                        label="下载量"
+                        align="center">
+                    </el-table-column>
+                    <el-table-column
+                        prop="commit"
+                        label="commit"
+                        align="center">
+                    </el-table-column>
+                                  
+                </el-table>
+            </div>
+            <div style="margin-top:50px;text-align:center">
+                <el-pagination
+                    background
+                    @size-change="handleSizeChangeID"
+                    @current-change="handleCurrentChangeID"
+                    :current-page="currentPage"
+                    :page-size="pageSize1" 
+                    :page-sizes="[5,10,20]"
+                    layout="total, sizes,prev, pager, next,jumper"
+                    :total="tableDataID.length">
+                </el-pagination>
+            </div>
+            
+    
+        </div>
+    </div>
+    </template>
+    
+    <script>
+        // import barLabel from './basic/barLabel.vue';
+        const {AppSubUrl, StaticUrlPrefix, csrf} = window.config;
+
+        import { export2Excel } from '../excel/util.js'
+        export default{
+            name:'ProAnalysis',
+            components: {
+                // barLabel,
+            },
+            data() {
+                return {
+                    recordBeginTime:'',
+                    lastUpdatedTime:'',
+                    page:1,
+                    pageSize:10,
+                    params:{type:'all',page:1,pagesize:10,beginTime:'',endTime:'',q:'',sort:'openi'},
+                    tableData: [],
+                    totalPage:0,
+                    totalNum:0,
+                    pickerOptions: {
+                    },
+                    value_time: '',
+                    search:'',
+                    dynamic:7,
+                    download_a:"",
+                    downLoadSrc:'',
+
+    
+                    //单个项目参数
+                    columns: [{title: '日期',key: 'date'},{title: '浏览量',key: 'view'},{title: '下载量',key: 'download'},{title: 'commit',key: 'commit'}],
+                    currentPage:1,
+                    pageSize1:10,
+                    paramsID:{type:'all' ,beginTime:'',endTime:'',openi:'false'},
+                    tableDataIDTotal: [],
+                    tableDataID: [],
+                    tableDataIDOpenI:[],  
+                    tableDataContTop10:[],
+                    create_time_pro: '',
+                    dynamic_pro:7,
+                    pro_name:'',
+                    alias:'',
+                    pro_id:'',
+                    ownerName:'',
+                    radarOpenI:'',
+                    echartsOITd:'',
+                    echartsSelectData:'',
+                    option:'',
+
+    
+                };
+             },
+            methods: {
+                // download_file(){
+                //     this.params.type='all'
+                // },
+                popMark(){
+                    alert("数据为空时，不能下载！")
+                },
+                exportData(){
+                    
+                    // this.getOneProList(this.pro_id,'all',true,7)
+                    // this.getOneProList(this.pro_id,'all',false,7)
+                    // this.fileName()
+                    if (this.tableDataID!=''){
+                        this.currentPage=1
+                        var saveFileName = this.getFileName()
+                        export2Excel(this.columns,this.tableDataID,saveFileName)
+                    }else{
+                        alert("数据为空时，不能下载！")
+                    }
+               
+                },
+                getFileName(){
+
+                    var now = new Date(); // 当前日期
+                    var nowDayOfWeek = now.getDay(); // 今天本周的第几天
+                    var nowDay = now.getDate(); // 当前日
+                    var nowMonth = now.getMonth(); // 当前月
+                    var nowYear = now.getFullYear(); // 当前年     
+                    var today = this.saveFormatDate(nowYear,nowMonth+1,nowDay);
+                    var tmp = new Date(now.setTime(now.getTime()-24*60*60*1000));
+                    var yesterday = this.saveFormatDate(tmp.getFullYear(),tmp.getMonth()+1,tmp.getDate());
+                    var yesterday_tmp = this.formatDate(tmp.getFullYear(),tmp.getMonth()+1,tmp.getDate())
+
+                   
+                    var startDate=''
+                    var endDate=''
+                    var saveFileName = ''
+                    
+                    if (typeof this.paramsID.type=="undefined" || this.paramsID.type=="null" || this.paramsID.type==""){
+                        
+                        // startDate=  this.saveFormatDate(this.create_time_pro[0].getFullYear(),this.create_time_pro[0].getMonth() + 1,this.create_time_pro[0].getDate());
+                        endDate = this.saveFormatDate(this.create_time_pro[1].getFullYear(),this.create_time_pro[1].getMonth() + 1,this.create_time_pro[1].getDate());
+                        
+                        var tmp = this.formatDate(this.create_time_pro[0].getFullYear(),this.create_time_pro[0].getMonth() + 1,this.create_time_pro[0].getDate())
+                        startDate = this.comparedate(tmp,this.recordBeginTime)
+
+                        console.log("comparedate:"+startDate)
+                        saveFileName = this.alias+"_"+startDate+'_'+endDate
+                    }else{
+                        switch(this.paramsID.type){
+                            case "yesterday":{
+                                
+                                startDate = this.comparedate(yesterday_tmp,this.recordBeginTime)
+                                endDate = startDate
+
+                                saveFileName = this.alias+"_"+startDate+'_'+ endDate
+                                break
+                            }
+                            case "current_week":{
+                                var now = new Date(); // 当前日期
+                                var nowDayOfWeek = now.getDay(); // 今天本周的第几天
+                                var day = nowDayOfWeek || 7;
+                                startDate = this.formatDate(now.getFullYear(), nowMonth+1, nowDay + 1 - day);
+                                startDate = this.comparedate(startDate,this.recordBeginTime)
+        
+
+                                endDate = yesterday
+                                saveFileName = this.alias+"_"+startDate+'_'+ endDate
+                                break
+                            }
+                            case "current_month":{
+                               
+                                startDate =  this.formatDate(nowYear,nowMonth+1,1);
+                                startDate = this.comparedate(startDate,this.recordBeginTime)
+
+                                endDate = yesterday
+                                
+                                saveFileName = this.alias+"_"+startDate+'_'+ endDate
+                                break
+                            }
+                            case "last_month":{
+
+                                let lastMonthDate = new Date();  // 上月日期
+                                lastMonthDate.setDate(1);
+                                lastMonthDate.setMonth(lastMonthDate.getMonth()-1);
+                                let lastYear = lastMonthDate.getFullYear();
+                                let lastMonth = lastMonthDate.getMonth();
+
+                                startDate=this.formatDate(lastYear, lastMonth+1, 1);
+                                startDate = this.comparedate(startDate,this.recordBeginTime)
+
+
+                                var monthStartDate = new Date(lastYear, lastMonth, 1);
+                                var monthEndDate = new Date(lastYear, lastMonth+1, 1);
+                                var days = (monthEndDate - monthStartDate) / (1000 * 60 * 60 * 24)
+
+                                endDate=this.saveFormatDate(lastYear, lastMonth+1, days);  //月份从0开始，所以+1保存月份 
+                                saveFileName = this.alias+"_"+startDate+'_'+ endDate
+                                break
+                            }
+                            case "monthly":{
+                                var temp=new Date(now - 1000 * 60 * 60 * 24 * 30)
+                                startDate = this.formatDate(temp.getFullYear(),temp.getMonth()+1,temp.getDate());
+                                startDate = this.comparedate(startDate,this.recordBeginTime)
+
+                                endDate = yesterday
+                                saveFileName = this.alias+"_"+startDate+'_'+ endDate
+                                break
+                            }
+                            case "current_year":{
+                                startDate = this.formatDate(now.getFullYear(), 1, 1);
+                                startDate = this.comparedate(startDate,this.recordBeginTime)
+
+                                endDate = yesterday
+                                saveFileName = this.alias+"_"+startDate+'_'+ endDate
+                                break
+                            }
+                            case "all":{
+                                console.log("e:"+today)
+                                startDate = 'all'
+                                endDate = yesterday
+                                saveFileName = this.alias+'_所有'
+                                break
+                            }
+                        }
+                    }
+                    return saveFileName
+
+                },
+                resetPage(){
+                    this.page=1
+                    this.params.page = 1
+                },
+                resetCurrentPage(){
+                    this.currentPage=1
+                },
+                handleSizeChange(val){
+                    this.params.pagesize = val
+                    this.resetPage()
+                    this.getAllProList(this.params.type, this.dynamic)
+                },
+                handleCurrentChange(val){
+                    console.log(val)
+                    this.params.page = val
+                    this.page = val
+                    switch(this.params.type){
+                        case "yesterday":{
+                                this.value_time=''
+                                this.getAllProList(this.params.type,1)
+                                break
+                            }
+                        case "current_week":{
+                            this.value_time=''
+                            this.getAllProList(this.params.type,2)
+                            break
+                        }
+                        case "current_month":{
+                            this.value_time=''
+                            this.getAllProList(this.params.type,3)
+                            break
+                        }
+                        case "last_month":{
+                            this.value_time=''
+                            this.getAllProList(this.params.type,4)
+                            break
+    
+                        }
+                        case "monthly":{
+                            this.value_time=''
+                            this.getAllProList(this.params.type,5)
+                            break
+                        }
+                        case "current_year":{
+                            this.value_time=''
+                            this.getAllProList(this.params.type,6)
+                            break
+                        }
+                        case "all":{
+                            this.value_time=''
+                            this.getAllProList(this.params.type,7)
+                            break
+                        }
+                        case "":{
+                            // this.value_time=''
+                            this.getAllProList(this.params.type,0)
+                            break
+                        }
+                    }
+                },
+                saveFormatDate(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;
+                    }
+                    console.log((myyear +''+ mymonth  +''+ myweekday))
+                    return (myyear +''+ mymonth  +''+ myweekday);
+                },
+                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);
+                },
+                //获得某月的天数
+               
+                
+                
+                getAllProList(type_val,index){
+                    console.log("类型："+type_val)
+                    this.dynamic = index
+                    if (typeof type_val=="undefined" || type_val=="null" || type_val==""){
+                        this.params.type=''
+                        this.params.beginTime=this.formatDate(this.value_time[0].getFullYear(),this.value_time[0].getMonth() + 1,this.value_time[0].getDate())
+                        this.params.endTime=this.formatDate(this.value_time[1].getFullYear(),this.value_time[1].getMonth() + 1,this.value_time[1].getDate())
+                    }else{
+                        this.params.type=type_val
+                        this.params.beginTime=''
+                        this.params.endTime=''
+                        this.value_time=[]
+                    }
+    
+                    this.$axios.get('../api/v1/projectboard/project',{
+                        params:this.params
+                    }).then((res)=>{
+                
+                    this.recordBeginTime=res.data.recordBeginTime
+                    this.lastUpdatedTime=res.data.lastUpdatedTime
+                    this.tableData = res.data.pageRecords
+                    this.totalPage=res.data.totalPage
+                    this.totalNum = res.data.totalCount//this.totalPage*this.params.pagesize
+                    // console.log("this.totalPage:"+this.totalPage)
+    
+                    })
+                },
+                searchName(){
+                    this.params.q = this.search
+                    this.params.page = 1
+                    this.page=1
+                    this.getAllProList(this.params.type, this.dynamic)
+                },
+    
+                goToDetailPage(pro_id,pro_name,ownerName,alias){
+                    this.currentPage=1
+                    document.getElementById("pro_main").style.display="none";
+                    document.getElementById("pro_detail").style.display="block";
+                    // console.log(pro_id)
+                    // console.log(pro_name)
+                    this.pro_name=pro_name;
+                    this.alias=alias;
+                    this.pro_id=pro_id;
+                    this.ownerName=ownerName
+                    this.getOneProData(pro_id);
+                    this.getOneProList(pro_id,"current_year",true,0);
+                    this.getOneProList(pro_id,"monthly",false,5);
+                },
+                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'
+                    }       
+                },
+                handleSizeChangeID(val){
+                    this.pageSize1=val                   
+                },
+
+                handleCurrentChangeID(currentPage){
+                    this.currentPage = currentPage;
+                },
+                
+                getOneProData(pro_id){
+                    this.$axios.get('../api/v1/projectboard/project/'+pro_id,{
+                    }).then((res)=>{
+                    this.tableDataIDTotal = res.data
+                    this.tableDataContTop10=res.data.top10
+                    // this.drawLine()
+                    this.drawRadarOpenI()
+                    
+                    })
+                },
+                getOneProList(pro_id,type_val,bool_val,index){
+                    this.dynamic_pro=index
+                    console.log("日期类型："+type_val)
+                    if (typeof type_val=="undefined" || type_val=="null" || type_val==""){
+                        this.paramsID.type='' 
+                        this.paramsID.beginTime= this.formatDate(this.create_time_pro[0].getFullYear(),this.create_time_pro[0].getMonth() + 1,this.create_time_pro[0].getDate()) 
+                        this.paramsID.endTime=this.formatDate(this.create_time_pro[1].getFullYear(),this.create_time_pro[1].getMonth() + 1,this.create_time_pro[1].getDate())
+                    }else{
+                        this.create_time_pro=[]
+                        this.paramsID.type=type_val
+                        this.paramsID.beginTime=''
+                        this.paramsID.endTime=''
+                    }
+                    this.paramsID.openi=bool_val
+                    this.$axios.get('../api/v1/projectboard/project/'+pro_id+"/period",{
+                        params:this.paramsID
+                    }).then((res)=>{
+                        if (bool_val){
+                            this.tableDataIDOpenI = res.data            
+                            this.drawOpenItrend()
+                           
+                            
+                            
+                        }else{
+                            this.tableDataID = res.data
+                            this.drawSelectData()
+                            
+                        }
+                        
+                    })
+                },
+                drawRadarOpenI(){
+                    
+                    var ydata = [this.roundingF(this.tableDataIDTotal.impact),this.roundingF(this.tableDataIDTotal.completeness),this.roundingF(this.tableDataIDTotal.liveness),this.roundingF(this.tableDataIDTotal.projectHealth),this.roundingF(this.tableDataIDTotal.teamHealth),this.roundingF(this.tableDataIDTotal.growth)]
+                    console.log("ydata:",ydata)
+                    var i = -1;
+                    var option = {
+                            titile:{
+                                text:""
+                            },
+                            tooltip: {
+                                trigger: 'item',
+                                backgroundColor:'rgba(255,255,255,0.8)',
+                                color:'black',
+                                borderWidth:'1',
+                                borderColor:'gray',
+                                textStyle:{
+                                    color:'black'
+                                },
+                                position: 'right',
+
+
+
+                                // formatter: function (params) {
+                                //     console.log('params:',params)
+                                //     console.log('params.data:',params[0])
+                                //     let str = params.data.name + "<br />";
+                                //     params.data.forEach((item) => {
+                                //     str +=
+                                //         '<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color:'+params.color+'"></span>' + item.seriesName + " : " + '<span style="float:right">'+item.data[1] +'</span>'+ "<br />";
+                                //     });
+                                //     return str;
+                                // },
+                                // formatter: function (params, ticket, callback) {
+                                //     console.log(params);
+                                //     var showHtm="";
+                                //     var data = params.data.value
+                                //     for(var i=0;i<data.length;i++){
+                                //         //x轴名称
+                                //         var name = data[i];
+                                //          //值
+                                //         var value = params[i][2];
+                                //         showHtm+= text+ '--' + name + ' :' + value+'<br>'
+                                //     }
+                                //     return showHtm;
+                                // }
+
+
+
+
+
+
+                                
+                            },//提示层
+                            legend: {
+                                // data: ['']
+                            },
+                            radar: {
+                                name: {
+                                    textStyle: {
+                                        color: 'rgb(0,0,0)', //字体颜色
+                                        borderRadius: 3, //圆角
+                                        padding: [3, 5] //padding
+                                    }
+                                },
+                                slpitNumber:5,
+                                center: ['50%', '50%'],
+                                splitArea: { // 坐标轴在 grid 区域中的分隔区域
+                                    show: false,                            
+                                },
+
+                                indicator: [{
+                                        name: '社区影响力',
+                                        max: 100
+                                    },
+                                    {
+                                        name: '项目成熟度',
+                                        max: 100
+                                    },
+                                    {
+                                        name: '开发活跃度',
+                                        max: 100
+                                    },
+                                    {
+                                        name: '项目健康度',
+                                        max: 100
+                                    },
+                                    {
+                                        name: '团队健康度',
+                                        max: 100
+                                    },
+                                    {
+                                        name: '项目发展趋势',
+                                        max: 100
+                                    }
+                                ],
+                            },
+                            series: [{
+                                type: 'radar',
+                                lineStyle:{
+                                    width:2,
+                                    color: '#0366D6',
+                                    normal:{
+                                        color:'#0366D6 '
+                                    }
+                                },
+                                itemStyle : {
+                                    normal : {
+                                        color:'#0366D6'
+                                    }
+                                }, 
+                                data: [{
+                                    value: ydata,
+                                    name:"数据"
+                                }]
+                            }]
+    
+                    }
+                    this.radarOpenI.setOption(option)         
+    
+                },
+                drawOpenItrend(){
+                    var xdata_openI=[]
+                    var ydata_openI=[]
+                    for(var i =0;i<this.tableDataIDOpenI.length;i++){
+                        xdata_openI.push(this.tableDataIDOpenI[i].date);
+                        ydata_openI.push(this.roundingF(this.tableDataIDOpenI[i].openi))
+                    }
+                    console.log("ydata_openI:"+ydata_openI)
+                    console.log(xdata_openI)
+                    var option = {
+                            title : {
+                                text: 'OpenI指数趋势',
+
+
+                                textStyle: {
+                                        fontSize: 12,
+                                    },
+                                left:'center',
+                                top:'bottom',
+
+                                subtext: '',
+
+                            },
+                            tooltip : {
+                                trigger: 'axis',
+                                backgroundColor:'rgba(255,255,255,0.8)',
+                                color:'black',
+                                borderWidth:'1',
+                                borderColor:'#DCE7FB',
+                                textStyle:{
+                                    color:'black'
+                                },
+                            },
+                            legend: {
+                                orient: 'vertical',
+                                top:'top',　　
+                            },
+                            // calculable : true,
+                            xAxis : [
+                                {
+                                    type : 'category',
+                                    boundaryGap: false,
+                                    data : xdata_openI,
+                                    
+                                }
+                            ],
+                            yAxis : [
+                                {
+                                    type : 'value',
+    
+                                }
+                            ],
+
+                            series : [
+                                {
+                                    data: ydata_openI,
+                                    type: 'line',
+                                    areaStyle: {
+                                        type:'linear',
+                                        color:'#DCE7FB',
+                                        opacity: 0.3,
+                                        origin:"start",
+                                        normal:{
+                                            color:'#DCE7FB'
+                                        }
+                                    },
+                                    lineStyle:{
+                                        width:1,
+                                        normal:{
+                                            color:'#0366D6'
+                                        }
+                                    },
+                                    itemStyle : {
+                                        normal : {
+                                            color:'#0366D6'
+                                        }
+                                    },      
+                                }
+                            ]
+                    }; 
+                    this.echartsOITd.setOption(option)
+                    // setTimeout(function (){
+                    //     window.onresize = function () {
+                    //         this.echartsOITd.resize();
+                    //     }
+                    // },200)
+                    
+                },
+                drawSelectData(){
+                    
+                    // $("#selectData").removeAttr("selectData").empty();
+                    var xdata=[]
+                    var ydata_view=[]
+                    var ydata_download=[]
+                    var ydata_commit=[]
+                    // if ()
+                    for(var i =0;i<this.tableDataID.length;i++){
+                        xdata.push(this.tableDataID[this.tableDataID.length-1-i].date);
+                        ydata_view.push(this.tableDataID[this.tableDataID.length-1-i].view)
+                        ydata_download.push(this.tableDataID[this.tableDataID.length-1-i].download)
+                        ydata_commit.push(this.tableDataID[this.tableDataID.length-1-i].commit)
+                    }
+                    console.log("ydata_openI:"+ydata_download)
+                    console.log(xdata)
+                     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:['浏览量','下载量','commit'],
+                                // 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,
+                                    
+                                }
+                            ],
+                            yAxis : [
+                                {
+                                    type : 'value',   
+                                }
+                            ],
+                            series : [
+                                {   name:"浏览量",
+                                    data: ydata_view,
+                                    type: 'line',
+                                    areaStyle: {},
+                                },
+                                {
+                                    name:"下载量",
+                                    data: ydata_download,
+                                    type: 'line',
+                                    areaStyle: {},
+                                },
+                                {
+                                    name:"commit",
+                                    data: ydata_commit,
+                                    type: 'line',
+                                    areaStyle: {},
+                                },
+
+                            ]
+                    }; 
+                    // 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);
+                    // });
+                    
+
+
+                },
+                roundingF(value){
+                    return Number(value).toFixed(2)
+                },
+                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);
+                    // });
+
+                },
+                comparedate(date1,date2){
+                    console.log("date1:"+date1)
+                    console.log("date1:"+date2)
+                    var oDate1 = new Date(date1);
+                    var oDate2 = new Date(date2);
+                    if(oDate1.getTime() < oDate2.getTime()){
+                        var data = date2.split('-')
+                        return data[0]+''+data[1]+''+data[2]
+                    } else {
+                        var data = date1.split('-')
+                        return data[0]+''+data[1]+''+data[2]
+                    }
+                },
+                goBack(){
+                    if( $("#pro_detail").is(':visible') ){
+                        document.getElementById("pro_main").style.display = "block";
+                        document.getElementById("pro_detail").style.display = "none";
+                    }
+                },
+
+            },
+            filters:{
+
+                rounding (value) {
+                    return Number(value).toFixed(2)
+                },
+                changeType(value){
+                    if(value==false){
+                        return "否"
+                    }else{
+                        return "是"
+                    }
+                },
+                discriptionFun(value){
+                    if(value==''){
+                        return "暂无描述"
+                    }
+                },
+                showMode(value){
+                    if(value==1){
+                        return "可读权限"
+                    }else if(value==2){
+                        return "可写权限"
+                    }else if(value==3){
+                        return "管理员"
+                    }else if(value==4){
+                        return "所有者"
+                    }else{
+                         return "未定义"
+                    }
+                },
+                showContext(value){
+                    if (value.mode!=-1){
+                       return  " <img class=\"ui avatar image\" src= \" "+ value.RelAvatarLink+ " \" > "+" <a href= \" " + AppSubUrl+"/"+value.user+ "\">"+value.user+" </a>"
+                    }
+                    else{
+                        return " <a href=\" mailto:" + value.email + "class=\"circular ui button\">"  +value.user+ "</a>"
+                    }			
+                    
+                },
+                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 dateString = Y + M + D + h + m ;//+ s;
+                    return dateString;
+                },              
+            },
+    
+    
+            mounted() {   
+
+                this.getAllProList("all",7)
+                console.log("id:"+this.pro_id);
+
+                document.getElementById('radar_openi').style.width = document.getElementById('pro_main').offsetWidth*0.22+'px'
+                document.getElementById('line_openi').style.width  = document.getElementById('pro_main').offsetWidth*0.33+'px'
+                document.getElementById('selectData').style.width  = document.getElementById('pro_main').offsetWidth*0.8+'px' 
+                this.radarOpenI = this.$echarts.init(document.getElementById('radar_openi'))
+                this.echartsOITd = this.$echarts.init(document.getElementById('line_openi'))
+                this.echartsSelectData = this.$echarts.init(document.getElementById('selectData'))
+                if (window.history && window.history.pushState) {
+                    history.pushState(null, null, document.URL);
+                    window.addEventListener('popstate', this.goBack, false);
+                }
+                // window.onresize=function(){
+                //     this.radarOpenI.resize();
+                //     this.echartsOITd.resize();
+                //     this.echartsSelectData.resize();
+                // }
+                // console.log("this.radarOpenI:"+this.radarOpenI)
+            },
+
+            watch:{
+                search(val){
+                    if(!val){
+                        this.params.q = this.search
+                        this.params.page = 1
+                        this.page=1
+                        this.getAllProList(this.params.type, this.dynamic)
+                    } 
+                }
+
+            },
+
+            created() {
+                // this.download_a=document.getElementById("download_file")
+            },
+            updated(){
+                if(document.querySelectorAll('img[avatar]').length!==0){
+                    window.LetterAvatar.transform()
+                }
+            }
+        }
+    </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;
+        }
+        .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: 250px;
+        } */
+        /deep/ .el-table tbody tr:hover>td { 
+            background-color:#D3D3D3!important;
+            opacity:1
+        }
+        /deep/ .el-table {
+            font-size: 12px;
+        }
+     
+        /deep/ .el-range-separator{
+            width: 20% !important;
+        }
+
+        .colorChange {
+            background-color: #1684FC;
+            color: #FFFF;
+            cursor: default;
+        }
+        .items{
+            text-align: center;
+            border-right:1px solid rgba(219, 219, 219, 100);
+        }  
+        .item_l{
+            margin-right: 5px;
+            border:1px solid rgba(219, 219, 219, 100);
+            height: 370px;
+            width: 100%;
+        }
+        .item_r{
+            margin-right:5px;
+            border:1px solid rgba(219, 219, 219, 100);
+            height: 370px;
+            overflow:auto
+        }
+        .item_echart{
+            margin-top: 10px;
+            margin-right: 5px;
+            border:1px solid rgba(219, 219, 219, 100);
+            height: 350px;
+            width: 100%;
+        }
+        .item_content{
+            color:#0366D6;
+            margin-top: 10px;
+            font-weight:bold;
+        }
+    </style>
diff --git a/web_src/js/components/ProTend.vue b/web_src/js/components/ProTend.vue
new file mode 100644
index 000000000..2780fcf6f
--- /dev/null
+++ b/web_src/js/components/ProTend.vue
@@ -0,0 +1,1000 @@
+<template>
+    <div id='pro_tend' class="el-col el-col-21">
+        <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">
+            <el-row>
+                <el-col :span='1' class ='item_list_first'>
+                    <el-row class="item_title_h">
+                        &nbsp;
+                    </el-row>
+                    <el-row class="item_h">
+                        昨天
+                    </el-row>
+                    <el-row class="item_h"> 
+                        今天
+                    </el-row>
+                </el-col>
+                <el-col span='23' >
+                    <el-col :span='3' class ='item_list'>
+                        <el-row class="item_title_h">
+                        项目
+                        </el-row>
+                        <el-row class="item_h">
+                            234
+                        </el-row>
+                        <el-row class="item_h">
+                            2345
+                        </el-row>
+                    </el-col>
+                    <el-col :span='3' > 
+                        <el-row class ='item_list_p item_title_h'>
+                        公开
+                        </el-row>
+                        <el-row class="item_h">
+                            34567
+                        </el-row >
+                        <el-row class="item_h">
+                            456789
+                        </el-row>
+                    
+                    </el-col>
+                    <el-col :span='3' class ='item_list'>
+                        <el-row class="item_title_h"> 
+                        私有
+                        </el-row>
+                        <el-row class="item_h">
+                            234556
+                        </el-row>
+                        <el-row class="item_h"> 
+                            7890087
+                        </el-row>
+                    </el-col>
+                    <el-col :span='3'>
+                        <el-row class ='item_list_p item_title_h'>
+                        自建
+                        </el-row>
+                        <el-row class="item_h">
+                        89087
+                        </el-row >
+                        <el-row class="item_h">
+                            5677
+                        </el-row>
+                    
+                    </el-col>
+                    <el-col :span='3' >
+                        <el-row class ='item_list_p item_title_h'>
+                        派生
+                        </el-row>
+                        <el-row class="item_h">
+                            234556
+                        </el-row >
+                        <el-row class="item_h"> 
+                            7890087
+                        </el-row>
+                    </el-col>
+                    <el-col :span='3' class ='item_list '>
+                        <el-row class="item_title_h">
+                        镜像
+                        </el-row>
+                        <el-row class="item_h">
+                        89087
+                        </el-row>
+                        <el-row class="item_h">
+                            5677
+                        </el-row>
+                    
+                    </el-col>
+                    <el-col :span='3'>
+                        <el-row class ='item_list_p item_title_h'>
+                        组织
+                        </el-row>
+                        <el-row class="item_h">
+                            234556
+                        </el-row>
+                        <el-row class="item_h">
+                            7890087
+                        </el-row>
+                    </el-col>
+                    <el-col :span='2'>
+                        <el-row class="item_title_h"> 
+                        个人
+                        </el-row>
+                        <el-row class="item_h">
+                        89087
+                        </el-row>
+                        <el-row class="item_h">
+                            5677
+                        </el-row>
+                    
+                    </el-col>
+                </el-col>
+            </el-row>
+        </div>
+        <div style="margin-top: 20px;">
+            <span  class="sta_iterm">统计周期：</span> 
+            <button type="button" class='btnFirst' id ="yesterday" v-bind:class="{colorChange:1==dynamic}"  @click="resetPage(),getAllProList('yesterday',1)">昨天</button>
+            <button type="button" class='btn' id = "current_week" v-bind:class="{colorChange:2==dynamic}"  @click="resetPage(),getAllProList('current_week',2)">本周</button>
+            <button type="button" class='btn' id = "current_month" v-bind:class="{colorChange:3==dynamic}"  @click="resetPage(),getAllProList('current_month',3)">本月</button>
+            <button type="button" class='btn' id = "last_month" v-bind:class="{colorChange:4==dynamic}"  @click="resetPage(),getAllProList('last_month',4)">上月</button>
+            <button type="button" class='btn' id = "monthly" v-bind:class="{colorChange:5==dynamic}"  @click="resetPage(),getAllProList('monthly',5)">近30天</button>
+            <button type="button" class='btn' id = "current_year" v-bind:class="{colorChange:6==dynamic}" @click="resetPage(),getAllProList('current_year',6)">今年</button>
+            <button type="button" class='btnLast' id = "all"  v-bind:class="{colorChange:7==dynamic}" @click="resetPage(),getAllProList('all',7)">所有</button>
+            <span style="margin-left: 20px;">
+                <el-date-picker
+                    v-model="value_time"
+                    prefix-icon="el-icon-time"
+                    @change="resetPage(),getAllProList('',0)"
+                    type="daterange"
+                    size='small'
+                    range-separator="至"
+                    start-placeholder="开始日期"
+                    end-placeholder="结束日期">   
+                </el-date-picker>
+            </span>
+            <span style="float:right; margin-right: 20px;">
+                <div style="display:inline-block;margin-left: 20px; ">
+                    <a class="el-icon-download" v-if="tableData!=''" :href= "'../api/v1/projectboard/downloadAll/?type='+this.params.type+'&beginTime='+this.params.beginTime+'&endTime='+this.params.endTime+'&q='+this.params.q+'&sort=openi'" ></a>
+                    <i class="el-icon-download" v-else="tableData=''" href="#" style="color:rgba(187, 187, 187, 100);" @click='popMark()'></i>
+                    <!-- <span ><a id = "download_file" :href= "'../api/v1/projectboard/downloadAll/?type='+this.params.type+'&beginTime='+this.params.beginTime+'&endTime='+this.params.endTime+'&q='+this.params.q+'&sort=openi'"   >下载报告</a> </span> -->
+                    <span >
+                        <a id = "download_file"  v-if="tableData!=''" :href= "'../api/v1/projectboard/downloadAll/?type='+this.params.type+'&beginTime='+this.params.beginTime+'&endTime='+this.params.endTime+'&q='+this.params.q+'&sort=openi'">下载报告</a>
+                        <a id = "download_file"  v-else="tableData=''"  href= "#" style="color:rgba(187, 187, 187, 100);" @click='popMark()'>下载报告</a> 
+                    </span>
+                </div>  
+            </span>
+        </div>
+    </div>
+</template>
+
+<script>
+    // import barLabel from './basic/barLabel.vue';
+    const {AppSubUrl, StaticUrlPrefix, csrf} = window.config;
+
+    import { export2Excel } from '../excel/util.js'
+    export default{
+        name:'ProAnalysis',
+        components: {
+            // barLabel,
+        },
+        data() {
+            return {
+                recordBeginTime:'',
+                lastUpdatedTime:'',
+                page:1,
+                pageSize:10,
+                params:{type:'all',page:1,pagesize:10,beginTime:'',endTime:''},
+                tableData: [],
+                totalPage:0,
+                totalNum:0,
+                pickerOptions: {
+                },
+                value_time: '',
+                search:'',
+                dynamic:7,
+                download_a:"",
+                downLoadSrc:'',
+
+
+                //单个项目参数
+                columns: [{title: '日期',key: 'date'},{title: '浏览量',key: 'view'},{title: '下载量',key: 'download'},{title: 'commit',key: 'commit'}],
+                currentPage:1,
+                pageSize1:10,
+                paramsID:{type:'all' ,beginTime:'',endTime:'',openi:'false'},
+                tableDataIDTotal: [],
+                tableDataID: [],
+                tableDataIDOpenI:[],  
+                tableDataContTop10:[],
+                create_time_pro: '',
+                dynamic_pro:7,
+                pro_name:'',
+                alias:'',
+                pro_id:'',
+                ownerName:'',
+                radarOpenI:'',
+                echartsOITd:'',
+                echartsSelectData:'',
+                option:'',
+
+
+            };
+         },
+        methods: {
+            // download_file(){
+            //     this.params.type='all'
+            // },
+            popMark(){
+                alert("数据为空时，不能下载！")
+            },
+            exportData(){
+                
+                // this.getOneProList(this.pro_id,'all',true,7)
+                // this.getOneProList(this.pro_id,'all',false,7)
+                // this.fileName()
+                if (this.tableDataID!=''){
+                    this.currentPage=1
+                    var saveFileName = this.getFileName()
+                    export2Excel(this.columns,this.tableDataID,saveFileName)
+                }else{
+                    alert("数据为空时，不能下载！")
+                }
+           
+            },
+            getFileName(){
+
+                var now = new Date(); // 当前日期
+                var nowDayOfWeek = now.getDay(); // 今天本周的第几天
+                var nowDay = now.getDate(); // 当前日
+                var nowMonth = now.getMonth(); // 当前月
+                var nowYear = now.getFullYear(); // 当前年     
+                var today = this.saveFormatDate(nowYear,nowMonth+1,nowDay);
+                var tmp = new Date(now.setTime(now.getTime()-24*60*60*1000));
+                var yesterday = this.saveFormatDate(tmp.getFullYear(),tmp.getMonth()+1,tmp.getDate());
+                var yesterday_tmp = this.formatDate(tmp.getFullYear(),tmp.getMonth()+1,tmp.getDate())
+
+               
+                var startDate=''
+                var endDate=''
+                var saveFileName = ''
+                
+                if (typeof this.paramsID.type=="undefined" || this.paramsID.type=="null" || this.paramsID.type==""){
+                    
+                    // startDate=  this.saveFormatDate(this.create_time_pro[0].getFullYear(),this.create_time_pro[0].getMonth() + 1,this.create_time_pro[0].getDate());
+                    endDate = this.saveFormatDate(this.create_time_pro[1].getFullYear(),this.create_time_pro[1].getMonth() + 1,this.create_time_pro[1].getDate());
+                    
+                    var tmp = this.formatDate(this.create_time_pro[0].getFullYear(),this.create_time_pro[0].getMonth() + 1,this.create_time_pro[0].getDate())
+                    startDate = this.comparedate(tmp,this.recordBeginTime)
+
+                    console.log("comparedate:"+startDate)
+                    saveFileName = this.alias+"_"+startDate+'_'+endDate
+                }else{
+                    switch(this.paramsID.type){
+                        case "yesterday":{
+                            
+                            startDate = this.comparedate(yesterday_tmp,this.recordBeginTime)
+                            endDate = startDate
+
+                            saveFileName = this.alias+"_"+startDate+'_'+ endDate
+                            break
+                        }
+                        case "current_week":{
+                            var now = new Date(); // 当前日期
+                            var nowDayOfWeek = now.getDay(); // 今天本周的第几天
+                            var day = nowDayOfWeek || 7;
+                            startDate = this.formatDate(now.getFullYear(), nowMonth+1, nowDay + 1 - day);
+                            startDate = this.comparedate(startDate,this.recordBeginTime)
+    
+
+                            endDate = yesterday
+                            saveFileName = this.alias+"_"+startDate+'_'+ endDate
+                            break
+                        }
+                        case "current_month":{
+                           
+                            startDate =  this.formatDate(nowYear,nowMonth+1,1);
+                            startDate = this.comparedate(startDate,this.recordBeginTime)
+
+                            endDate = yesterday
+                            
+                            saveFileName = this.alias+"_"+startDate+'_'+ endDate
+                            break
+                        }
+                        case "last_month":{
+
+                            let lastMonthDate = new Date();  // 上月日期
+                            lastMonthDate.setDate(1);
+                            lastMonthDate.setMonth(lastMonthDate.getMonth()-1);
+                            let lastYear = lastMonthDate.getFullYear();
+                            let lastMonth = lastMonthDate.getMonth();
+
+                            startDate=this.formatDate(lastYear, lastMonth+1, 1);
+                            startDate = this.comparedate(startDate,this.recordBeginTime)
+
+
+                            var monthStartDate = new Date(lastYear, lastMonth, 1);
+                            var monthEndDate = new Date(lastYear, lastMonth+1, 1);
+                            var days = (monthEndDate - monthStartDate) / (1000 * 60 * 60 * 24)
+
+                            endDate=this.saveFormatDate(lastYear, lastMonth+1, days);  //月份从0开始，所以+1保存月份 
+                            saveFileName = this.alias+"_"+startDate+'_'+ endDate
+                            break
+                        }
+                        case "monthly":{
+                            var temp=new Date(now - 1000 * 60 * 60 * 24 * 30)
+                            startDate = this.formatDate(temp.getFullYear(),temp.getMonth()+1,temp.getDate());
+                            startDate = this.comparedate(startDate,this.recordBeginTime)
+
+                            endDate = yesterday
+                            saveFileName = this.alias+"_"+startDate+'_'+ endDate
+                            break
+                        }
+                        case "current_year":{
+                            startDate = this.formatDate(now.getFullYear(), 1, 1);
+                            startDate = this.comparedate(startDate,this.recordBeginTime)
+
+                            endDate = yesterday
+                            saveFileName = this.alias+"_"+startDate+'_'+ endDate
+                            break
+                        }
+                        case "all":{
+                            console.log("e:"+today)
+                            startDate = 'all'
+                            endDate = yesterday
+                            saveFileName = this.alias+'_所有'
+                            break
+                        }
+                    }
+                }
+                return saveFileName
+
+            },
+            resetPage(){
+                this.page=1
+                this.params.page = 1
+            },
+            resetCurrentPage(){
+                this.currentPage=1
+            },
+            handleSizeChange(val){
+                this.params.pagesize = val
+                this.resetPage()
+                this.getAllProList(this.params.type, this.dynamic)
+            },
+            handleCurrentChange(val){
+                console.log(val)
+                this.params.page = val
+                this.page = val
+                switch(this.params.type){
+                    case "yesterday":{
+                            this.value_time=''
+                            this.getAllProList(this.params.type,1)
+                            break
+                        }
+                    case "current_week":{
+                        this.value_time=''
+                        this.getAllProList(this.params.type,2)
+                        break
+                    }
+                    case "current_month":{
+                        this.value_time=''
+                        this.getAllProList(this.params.type,3)
+                        break
+                    }
+                    case "last_month":{
+                        this.value_time=''
+                        this.getAllProList(this.params.type,4)
+                        break
+
+                    }
+                    case "monthly":{
+                        this.value_time=''
+                        this.getAllProList(this.params.type,5)
+                        break
+                    }
+                    case "current_year":{
+                        this.value_time=''
+                        this.getAllProList(this.params.type,6)
+                        break
+                    }
+                    case "all":{
+                        this.value_time=''
+                        this.getAllProList(this.params.type,7)
+                        break
+                    }
+                    case "":{
+                        // this.value_time=''
+                        this.getAllProList(this.params.type,0)
+                        break
+                    }
+                }
+            },
+            saveFormatDate(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;
+                }
+                console.log((myyear +''+ mymonth  +''+ myweekday))
+                return (myyear +''+ mymonth  +''+ myweekday);
+            },
+            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);
+            },
+            //获得某月的天数
+           
+            
+            
+            getAllProList(type_val,index){
+                console.log("类型："+type_val)
+                this.dynamic = index
+                if (typeof type_val=="undefined" || type_val=="null" || type_val==""){
+                    this.params.type=''
+                    this.params.beginTime=this.formatDate(this.value_time[0].getFullYear(),this.value_time[0].getMonth() + 1,this.value_time[0].getDate())
+                    this.params.endTime=this.formatDate(this.value_time[1].getFullYear(),this.value_time[1].getMonth() + 1,this.value_time[1].getDate())
+                }else{
+                    this.params.type=type_val
+                    this.params.beginTime=''
+                    this.params.endTime=''
+                    this.value_time=[]
+                }
+                console.log("params:",this.params)
+                this.$axios.get('../api/v1/projectboard/summary/period',{
+                    params:this.params
+                }).then((res)=>{
+            
+                // this.recordBeginTime=res.data.recordBeginTime
+                // this.lastUpdatedTime=res.data.lastUpdatedTime
+                // this.tableData = res.data.pageRecords
+                // this.totalPage=res.data.totalPage
+                // this.totalNum = res.data.totalCount//this.totalPage*this.params.pagesize
+                console.log("this.totalPage:"+this.totalPage)
+
+                })
+            },
+            searchName(){
+                this.params.q = this.search
+                this.params.page = 1
+                this.page=1
+                this.getAllProList(this.params.type, 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'
+                }       
+            },
+            handleSizeChangeID(val){
+                this.pageSize1=val                   
+            },
+
+            handleCurrentChangeID(currentPage){
+                this.currentPage = currentPage;
+            },
+            
+            getOneProData(pro_id){
+                this.$axios.get('../api/v1/projectboard/project/'+pro_id,{
+                }).then((res)=>{
+                this.tableDataIDTotal = res.data
+                this.tableDataContTop10=res.data.top10
+                // this.drawLine()
+                this.drawRadarOpenI()
+                
+                })
+            },
+            getOneProList(pro_id,type_val,bool_val,index){
+                this.dynamic_pro=index
+                console.log("日期类型："+type_val)
+                if (typeof type_val=="undefined" || type_val=="null" || type_val==""){
+                    this.paramsID.type='' 
+                    this.paramsID.beginTime= this.formatDate(this.create_time_pro[0].getFullYear(),this.create_time_pro[0].getMonth() + 1,this.create_time_pro[0].getDate()) 
+                    this.paramsID.endTime=this.formatDate(this.create_time_pro[1].getFullYear(),this.create_time_pro[1].getMonth() + 1,this.create_time_pro[1].getDate())
+                }else{
+                    this.create_time_pro=[]
+                    this.paramsID.type=type_val
+                    this.paramsID.beginTime=''
+                    this.paramsID.endTime=''
+                }
+                this.paramsID.openi=bool_val
+                this.$axios.get('../api/v1/projectboard/summary/period',{
+                    params:this.paramsID
+                }).then((res)=>{
+                    if (bool_val){
+                        this.tableDataIDOpenI = res.data            
+                        // this.drawOpenItrend()
+                       
+                        
+                        
+                    }else{
+                        this.tableDataID = res.data
+                        // this.drawSelectData()
+                        
+                    }
+                    
+                })
+            },
+            drawRadarOpenI(){
+                
+                var ydata = [this.roundingF(this.tableDataIDTotal.impact),this.roundingF(this.tableDataIDTotal.completeness),this.roundingF(this.tableDataIDTotal.liveness),this.roundingF(this.tableDataIDTotal.projectHealth),this.roundingF(this.tableDataIDTotal.teamHealth),this.roundingF(this.tableDataIDTotal.growth)]
+                console.log("ydata:",ydata)
+                var i = -1;
+                var option = {
+                        titile:{
+                            text:""
+                        },
+                        tooltip: {
+                            trigger: 'item',
+                            backgroundColor:'rgba(255,255,255,0.8)',
+                            color:'black',
+                            borderWidth:'1',
+                            borderColor:'gray',
+                            textStyle:{
+                                color:'black'
+                            },
+                            position: 'right',
+
+
+
+                            // formatter: function (params) {
+                            //     console.log('params:',params)
+                            //     console.log('params.data:',params[0])
+                            //     let str = params.data.name + "<br />";
+                            //     params.data.forEach((item) => {
+                            //     str +=
+                            //         '<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color:'+params.color+'"></span>' + item.seriesName + " : " + '<span style="float:right">'+item.data[1] +'</span>'+ "<br />";
+                            //     });
+                            //     return str;
+                            // },
+                            // formatter: function (params, ticket, callback) {
+                            //     console.log(params);
+                            //     var showHtm="";
+                            //     var data = params.data.value
+                            //     for(var i=0;i<data.length;i++){
+                            //         //x轴名称
+                            //         var name = data[i];
+                            //          //值
+                            //         var value = params[i][2];
+                            //         showHtm+= text+ '--' + name + ' :' + value+'<br>'
+                            //     }
+                            //     return showHtm;
+                            // }
+
+
+
+
+
+
+                            
+                        },//提示层
+                        legend: {
+                            // data: ['']
+                        },
+                        radar: {
+                            name: {
+                                textStyle: {
+                                    color: 'rgb(0,0,0)', //字体颜色
+                                    borderRadius: 3, //圆角
+                                    padding: [3, 5] //padding
+                                }
+                            },
+                            slpitNumber:5,
+                            center: ['50%', '50%'],
+                            splitArea: { // 坐标轴在 grid 区域中的分隔区域
+                                show: false,                            
+                            },
+
+                            indicator: [{
+                                    name: '社区影响力',
+                                    max: 100
+                                },
+                                {
+                                    name: '项目成熟度',
+                                    max: 100
+                                },
+                                {
+                                    name: '开发活跃度',
+                                    max: 100
+                                },
+                                {
+                                    name: '项目健康度',
+                                    max: 100
+                                },
+                                {
+                                    name: '团队健康度',
+                                    max: 100
+                                },
+                                {
+                                    name: '项目发展趋势',
+                                    max: 100
+                                }
+                            ],
+                        },
+                        series: [{
+                            type: 'radar',
+                            lineStyle:{
+                                width:2,
+                                color: '#0366D6',
+                                normal:{
+                                    color:'#0366D6 '
+                                }
+                            },
+                            itemStyle : {
+                                normal : {
+                                    color:'#0366D6'
+                                }
+                            }, 
+                            data: [{
+                                value: ydata,
+                                name:"数据"
+                            }]
+                        }]
+
+                }
+                this.radarOpenI.setOption(option)         
+
+            },
+            drawOpenItrend(){
+                var xdata_openI=[]
+                var ydata_openI=[]
+                for(var i =0;i<this.tableDataIDOpenI.length;i++){
+                    xdata_openI.push(this.tableDataIDOpenI[i].date);
+                    ydata_openI.push(this.roundingF(this.tableDataIDOpenI[i].openi))
+                }
+                console.log("ydata_openI:"+ydata_openI)
+                console.log(xdata_openI)
+                var option = {
+                        title : {
+                            text: 'OpenI指数趋势',
+
+
+                            textStyle: {
+                                    fontSize: 12,
+                                },
+                            left:'center',
+                            top:'bottom',
+
+                            subtext: '',
+
+                        },
+                        tooltip : {
+                            trigger: 'axis',
+                            backgroundColor:'rgba(255,255,255,0.8)',
+                            color:'black',
+                            borderWidth:'1',
+                            borderColor:'#DCE7FB',
+                            textStyle:{
+                                color:'black'
+                            },
+                        },
+                        legend: {
+                            orient: 'vertical',
+                            top:'top',　　
+                        },
+                        // calculable : true,
+                        xAxis : [
+                            {
+                                type : 'category',
+                                boundaryGap: false,
+                                data : xdata_openI,
+                                
+                            }
+                        ],
+                        yAxis : [
+                            {
+                                type : 'value',
+
+                            }
+                        ],
+
+                        series : [
+                            {
+                                data: ydata_openI,
+                                type: 'line',
+                                areaStyle: {
+                                    type:'linear',
+                                    color:'#DCE7FB',
+                                    opacity: 0.3,
+                                    origin:"start",
+                                    normal:{
+                                        color:'#DCE7FB'
+                                    }
+                                },
+                                lineStyle:{
+                                    width:1,
+                                    normal:{
+                                        color:'#0366D6'
+                                    }
+                                },
+                                itemStyle : {
+                                    normal : {
+                                        color:'#0366D6'
+                                    }
+                                },      
+                            }
+                        ]
+                }; 
+                this.echartsOITd.setOption(option)
+                // setTimeout(function (){
+                //     window.onresize = function () {
+                //         this.echartsOITd.resize();
+                //     }
+                // },200)
+                
+            },
+            drawSelectData(){
+                
+                // $("#selectData").removeAttr("selectData").empty();
+                var xdata=[]
+                var ydata_view=[]
+                var ydata_download=[]
+                var ydata_commit=[]
+                // if ()
+                for(var i =0;i<this.tableDataID.length;i++){
+                    xdata.push(this.tableDataID[this.tableDataID.length-1-i].date);
+                    ydata_view.push(this.tableDataID[this.tableDataID.length-1-i].view)
+                    ydata_download.push(this.tableDataID[this.tableDataID.length-1-i].download)
+                    ydata_commit.push(this.tableDataID[this.tableDataID.length-1-i].commit)
+                }
+                console.log("ydata_openI:"+ydata_download)
+                console.log(xdata)
+                 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:['浏览量','下载量','commit'],
+                            // 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,
+                                
+                            }
+                        ],
+                        yAxis : [
+                            {
+                                type : 'value',   
+                            }
+                        ],
+                        series : [
+                            {   name:"浏览量",
+                                data: ydata_view,
+                                type: 'line',
+                                areaStyle: {},
+                            },
+                            {
+                                name:"下载量",
+                                data: ydata_download,
+                                type: 'line',
+                                areaStyle: {},
+                            },
+                            {
+                                name:"commit",
+                                data: ydata_commit,
+                                type: 'line',
+                                areaStyle: {},
+                            },
+
+                        ]
+                }; 
+                // 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);
+                // });
+                
+
+
+            },
+            roundingF(value){
+                return Number(value).toFixed(2)
+            },
+            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);
+                // });
+
+            },
+            comparedate(date1,date2){
+                console.log("date1:"+date1)
+                console.log("date1:"+date2)
+                var oDate1 = new Date(date1);
+                var oDate2 = new Date(date2);
+                if(oDate1.getTime() < oDate2.getTime()){
+                    var data = date2.split('-')
+                    return data[0]+''+data[1]+''+data[2]
+                } else {
+                    var data = date1.split('-')
+                    return data[0]+''+data[1]+''+data[2]
+                }
+            },
+            goBack(){
+              console.log(",")
+            },
+
+        },
+        filters:{
+
+            rounding (value) {
+                return Number(value).toFixed(2)
+            },
+            changeType(value){
+                if(value==false){
+                    return "否"
+                }else{
+                    return "是"
+                }
+            },
+            discriptionFun(value){
+                if(value==''){
+                    return "暂无描述"
+                }
+            },
+            showMode(value){
+                if(value==1){
+                    return "可读权限"
+                }else if(value==2){
+                    return "可写权限"
+                }else if(value==3){
+                    return "管理员"
+                }else if(value==4){
+                    return "所有者"
+                }else{
+                     return "未定义"
+                }
+            },
+            showContext(value){
+                if (value.mode!=-1){
+                   return  " <img class=\"ui avatar image\" src= \" "+ value.RelAvatarLink+ " \" > "+" <a href= \" " + AppSubUrl+"/"+value.user+ "\">"+value.user+" </a>"
+                }
+                else{
+                    return " <a href=\" mailto:" + value.email + "class=\"circular ui button\">"  +value.user+ "</a>"
+                }			
+                
+            },
+            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 dateString = Y + M + D + h + m ;//+ s;
+                return dateString;
+            },              
+        },
+
+
+        mounted() {   
+
+            this.getAllProList("all",7)
+            console.log("id:"+this.pro_id);
+
+            // document.getElementById('radar_openi').style.width = document.getElementById('pro_main').offsetWidth*0.22+'px'
+            // document.getElementById('line_openi').style.width  = document.getElementById('pro_main').offsetWidth*0.33+'px'
+            // document.getElementById('selectData').style.width  = document.getElementById('pro_main').offsetWidth*0.8+'px' 
+            // this.radarOpenI = this.$echarts.init(document.getElementById('radar_openi'))
+            // this.echartsOITd = this.$echarts.init(document.getElementById('line_openi'))
+            // this.echartsSelectData = this.$echarts.init(document.getElementById('selectData'))
+            // if (window.history && window.history.pushState) {
+            //     history.pushState(null, null, document.URL);
+            //     window.addEventListener('popstate', this.goBack, false);
+            // }
+            // window.onresize=function(){
+            //     this.radarOpenI.resize();
+            //     this.echartsOITd.resize();
+            //     this.echartsSelectData.resize();
+            // }
+            // console.log("this.radarOpenI:"+this.radarOpenI)
+        },
+
+        watch:{
+            search(val){
+                if(!val){
+                    this.params.q = this.search
+                    this.params.page = 1
+                    this.page=1
+                    this.getAllProList(this.params.type, this.dynamic)
+                } 
+            }
+
+        },
+
+        created() {
+            // this.download_a=document.getElementById("download_file")
+        },
+        updated(){
+            if(document.querySelectorAll('img[avatar]').length!==0){
+                window.LetterAvatar.transform()
+            }
+        }
+    }
+</script>
+<style>
+    .item_list_first{
+        border-right: 1px solid rgba(219,219,219,100);
+        padding-right: 10px;
+    }
+
+    .item_list{
+        border-right: 1px solid rgba(219,219,219,100);
+        padding:0px 10px;
+    }
+    .item_list_p{
+        border-right: 1px solid rgba(219,219,219,100);
+        padding:0px 10px;
+    }
+    .item_h{
+        line-height: 40px;
+    }
+    .item_title_h{
+        line-height: 28px;
+    }
+</style>
\ No newline at end of file
diff --git a/web_src/js/components/UserAnalysis.vue b/web_src/js/components/UserAnalysis.vue
index 596ecd602..59a77d078 100755
--- a/web_src/js/components/UserAnalysis.vue
+++ b/web_src/js/components/UserAnalysis.vue
@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div class="el-col el-col-21" style="padding-left: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>   
         </div>
diff --git a/web_src/js/components/UserAnalysis1.vue b/web_src/js/components/UserAnalysis1.vue
new file mode 100644
index 000000000..596ecd602
--- /dev/null
+++ b/web_src/js/components/UserAnalysis1.vue
@@ -0,0 +1,520 @@
+<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='btnFirst' 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='btnLast' 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'>
+                    <a class="el-icon-download" v-if="tableData!=''" :href= "this.dataUrl + '?startDate='+this.params.startDate+'&endDate='+this.params.endDate+'&IsReturnFile=true'+'&userName='+this.params.userName" ></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'+'&userName='+this.params.userName" >下载报告</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 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="left"
+                    stripe
+                    >
+                </el-table-column>
+                <el-table-column
+                    label="用户名"
+                    align="left"
+                    prop="Name"
+                    width="100px">
+                    <template slot-scope="scope">
+                        <a :href="AppSubUrl +'../../../'+ scope.row.Name">{{scope.row.Name}} </a>    
+                    </template>  
+                </el-table-column>
+                <el-table-column
+                    prop="CodeMergeCount"
+                    label="PR数"
+                    align="center">
+                </el-table-column>
+                <el-table-column
+                    prop="UserIndex"
+                    label="用户指数"
+                    width="120px"
+                    align="center">
+                    <template slot-scope="scope">
+                            {{scope.row.UserIndex | rounding}}
+                    </template>
+                </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="CloudBrainTaskNum"
+                    label="云脑任务数"
+                    width="120px"
+                    align="center">
+                </el-table-column>   
+                <el-table-column
+                    prop="CloudBrainRunTime"
+                    label="云脑运行时间（小时）"
+                    width="120px"
+                    align="center">
+                    <template slot-scope="scope">
+                            {{scope.row.CloudBrainRunTime | roundingToHour}}
+                    </template>
+                </el-table-column> 
+                <el-table-column
+                    prop="CommitDatasetNum"
+                    label="上传（提交）数据集文件数"
+                    width="120px"
+                    align="center">
+                </el-table-column> 
+                <el-table-column
+                    prop="CommitModelCount"
+                    label="提交模型数"
+                    width="120px"
+                    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="DataDate"
+                    label="系统统计时间"
+                    width="120px"
+                    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="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,
+                dataUrl:'../api/v1/query_user_static_page',
+                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:7,
+
+                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.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;
+                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_static_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_user_current_week';
+                            break
+                        }
+                        case "current_month_usr":{
+                            this.value_time=[]
+                            this.dataUrl = '../api/v1/query_user_current_month';
+                            break
+                        }
+                        case "last_month_usr":{
+                            this.value_time=[]
+                            this.dataUrl = '../api/v1/query_user_last_month';
+                            break
+                        }
+                        case "monthly_usr":{
+                            this.value_time=[]
+                            this.dataUrl = '../api/v1/query_user_last30_day';
+                            break
+                        }
+                        case "current_year_usr":{
+                            this.value_time=[]
+                            this.dataUrl = '../api/v1/query_user_current_year';
+                            break
+                        }
+                        case "all_usr":{
+                            this.value_time=[]
+                            this.dataUrl = '../api/v1/query_user_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
+                })
+
+            
+            },
+            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'
+                }       
+            },
+
+            
+        },
+        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;
+            },
+        },
+        
+        mounted() {   
+            // document.getElementById("all_usr").style.outline="none"
+            // document.getElementById("all_usr").focus()
+            this.getUpdateTime()
+            this.getUserList("all_usr",7)
+        },
+        created() {
+            
+        },
+        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;
+    }
+
+    .colorChange {
+        background-color: #1684FC;
+        color: #FFFF;
+        cursor: default;
+    }
+
+</style>
\ No newline at end of file
diff --git a/web_src/js/index.js b/web_src/js/index.js
index 6fdd68d8d..3eba803b7 100755
--- a/web_src/js/index.js
+++ b/web_src/js/index.js
@@ -39,12 +39,14 @@ import EditAboutInfo from './components/EditAboutInfo.vue';
 // import Images from './components/Images.vue';
 import EditTopics from './components/EditTopics.vue';
 import DataAnalysis from './components/DataAnalysis.vue'
+import DataAnalysis1 from './components/DataAnalysis1.vue'
 import Contributors from './components/Contributors.vue'
 import Model from './components/Model.vue';
 import WxAutorize from './components/WxAutorize.vue'
 import initCloudrain from './features/cloudrbanin.js'
 import initImage from './features/images.js'
 // import $ from 'jquery.js'
+import router from './router/index.js'
 
 Vue.use(ElementUI);
 Vue.prototype.$axios = axios;
@@ -4376,7 +4378,7 @@ function initVueDataAnalysis() {
 
   new Vue({
     el: '#data_analysis',
-    
+    router,
     render: h => h(DataAnalysis)
   });
 }
diff --git a/web_src/js/router/index.js b/web_src/js/router/index.js
new file mode 100644
index 000000000..b113e252a
--- /dev/null
+++ b/web_src/js/router/index.js
@@ -0,0 +1,45 @@
+import Vue from 'vue'
+import Router from 'vue-router'
+import DataAnalysis1 from '../components/DataAnalysis1.vue'
+import DataAnalysis from '../components/DataAnalysis.vue'
+import ProAnalysis from  '../components/ProAnalysis.vue'
+import ProTend from  '../components/ProTend.vue'
+import UserAnalysis from '../components/UserAnalysis.vue'
+import BrainAnalysis from '../components/BrainAnalysis.vue'
+import Overview from '../components/Overview.vue'
+Vue.use(Router)
+
+export default new Router({
+    routes:[
+        {
+            path:'/overview',
+            name:'overview',
+            component:Overview,
+        },
+        {
+            path:'/ProAnalysis',
+            name:'ProAnalysis',
+            component:ProAnalysis,
+        },
+        {
+            path:'/ProTend',
+            name:'ProTend',
+            component:ProTend,
+        },
+        {
+            path:'/UserAnalysis',
+            name:'UserAnalysis',
+            component:UserAnalysis,
+        },
+
+        {
+            path:'/BrainAnalysis',
+            name:'BrainAnalysis',
+            component:BrainAnalysis,
+        },
+
+
+    ],
+
+
+})
\ No newline at end of file
diff --git a/web_src/js/router/main_.js b/web_src/js/router/main_.js
new file mode 100644
index 000000000..ed96faf1c
--- /dev/null
+++ b/web_src/js/router/main_.js
@@ -0,0 +1,17 @@
+import Vue from 'vue';
+import DataAnalysis from './components/DataAnalysis.vue'
+import router from './router/index.js'
+function initVueDataAnalysis() {
+    const el = document.getElementById('data_analysis');
+    if (!el) {
+      return;
+    }
+  
+    new Vue({
+      el: '#data_analysis',
+      router,
+      render: h => h(DataAnalysis)
+    });
+  }
+
+  initVueDataAnalysis()
\ No newline at end of file