|
|
|
@@ -1,5 +1,919 @@ |
|
|
|
<template> |
|
|
|
<div class="el-col el-col-21" style="padding-right:10px "> |
|
|
|
<div class="el-col el-col-21" style="padding-right:10px"> |
|
|
|
<div id='user_tend'> |
|
|
|
<div style="margin-top: 10px;"> |
|
|
|
<b class="pro_item">增长趋势分析</b> <span class="update_time">数据更新时间：</span><span style="font-size: 12px;">{{lastUpdatedTime}}  / 从{{recordBeginTime}}开始统计</span> |
|
|
|
</div> |
|
|
|
<div > |
|
|
|
<el-col :span="11"> |
|
|
|
<el-col id="ys_add_user"class = 'draw_region'> |
|
|
|
|
|
|
|
</el-col> |
|
|
|
<el-col :span="8" :style="{ height: '180px'}"> |
|
|
|
<span class="yesterday_blk yesterday_title" >昨日新增注册用户数 </span> |
|
|
|
<span class="yesterday_blk yesterday_color1 yesterday_pdrt yesterday_text">未激活:<span class="bold_num">{{ tableDataYesterday.NotActivateRegistUser }}</span> 人 </span> |
|
|
|
<span class="yesterday_blk yesterday_color2 yesterday_pdrt yesterday_text">已激活: <span class="bold_num">{{ tableDataYesterday.ActivateRegistUser }} </span>人</span> |
|
|
|
<span class="yesterday_blk yesterday_pdrt yesterday_text">有贡献活动: <span class="bold_num">{{ tableDataYesterday.RegistActivityUser }} </span>人</span> |
|
|
|
|
|
|
|
</el-col> |
|
|
|
|
|
|
|
</el-col> |
|
|
|
<el-col :span="13"> |
|
|
|
<el-col id="ys_all_user" class = 'draw_region'> |
|
|
|
|
|
|
|
</el-col> |
|
|
|
<el-col :span="8" :style="{ height: '180px'}"> |
|
|
|
<span class="yesterday_blk yesterday_title" >注册用户数 </span> |
|
|
|
<span class="yesterday_blk yesterday_color1 yesterday_pdrt yesterday_text">未激活:<span class="bold_num">{{ tableDataYesterday.TotalActivateRegistUser}} </span>人 </span> |
|
|
|
<span class="yesterday_blk yesterday_color2 yesterday_pdrt yesterday_text">已激活:<span class="bold_num">{{ tableDataYesterday.TotalNotActivateRegistUser }} </span>人</span> |
|
|
|
<span class="yesterday_blk yesterday_pdrt yesterday_text">有贡献活动:<span class="bold_num"> {{ tableDataYesterday.TotalHasActivityUser}} </span>人</span> |
|
|
|
</el-col> |
|
|
|
|
|
|
|
|
|
|
|
</el-col> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
<div style="margin-top: 20px;"> |
|
|
|
<span class="sta_iterm">统计周期：</span> |
|
|
|
<button type="button" class='btn' id = "current_week_usr" v-bind:class="{colorChange:1==dynamic}" @click="resetPage(),getUserList('current_week_usr',1)">本周</button> |
|
|
|
<button type="button" class='btn' id = "current_month_usr" v-bind:class="{colorChange:2==dynamic}" @click="resetPage(),getUserList('current_month_usr',2)">本月</button> |
|
|
|
<button type="button" class='btn' id = "last_month_usr" v-bind:class="{colorChange:3==dynamic}" @click="resetPage(),getUserList('last_month_usr',3)">上月</button> |
|
|
|
<button type="button" class='btn' id = "monthly_usr" v-bind:class="{colorChange:4==dynamic}" @click="resetPage(),getUserList('monthly_usr',4)">近30天</button> |
|
|
|
<button type="button" class='btn' id = "current_year_usr" v-bind:class="{colorChange:5==dynamic}" @click="resetPage(),getUserList('current_year_usr',5)">今年</button> |
|
|
|
<button type="button" class='btnLast' id = "all_usr" v-bind:class="{colorChange:6==dynamic}" @click="resetPage(),getUserList('all_usr',6)">所有</button> |
|
|
|
<span style="margin-left: 20px;"> |
|
|
|
<el-date-picker |
|
|
|
v-model="value_time" |
|
|
|
prefix-icon="el-icon-time" |
|
|
|
@change="resetPage(),getUserList('',0)" |
|
|
|
type="daterange" |
|
|
|
size='small' |
|
|
|
unlink-panels |
|
|
|
range-separator="至" |
|
|
|
start-placeholder="开始日期" |
|
|
|
end-placeholder="结束日期"> |
|
|
|
</el-date-picker> |
|
|
|
</span> |
|
|
|
<span style="float:right; margin-right: 20px;" > |
|
|
|
<a style="display:inline-block;margin-left: 20px; " id = 'download'> |
|
|
|
<a class="el-icon-download" v-if="tableData!=''" :href= "this.dataUrl + '?startDate='+this.params.startDate+'&endDate='+this.params.endDate+'&IsReturnFile=true' " ></a> |
|
|
|
<i class="el-icon-download" v-else="tableData=''" href="#" style="color:rgba(187, 187, 187, 100);" @click='popMark()'></i> |
|
|
|
<span > |
|
|
|
<a v-if="tableData!=''" :href= "this.dataUrl + '?startDate='+this.params.startDate+'&endDate='+this.params.endDate+'&IsReturnFile=true' " >下载报告</a> |
|
|
|
<a v-else="tableData=''" href= "#" style="color:rgba(187, 187, 187, 100);" @click='popMark()'>下载报告</a> |
|
|
|
</span> |
|
|
|
</a> |
|
|
|
<!-- <span style="display:inline-block;margin-left: 20px; "> |
|
|
|
<el-input size="small" placeholder="输入用户名搜索" v-model="search" class="input-with-select" @keyup.enter.native="searchName() "><i slot="suffix" class="el-input__icon el-icon-search" @click="searchName() "></i> |
|
|
|
</el-input> |
|
|
|
</span> --> |
|
|
|
</span> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="item_echart" id ='linecharts'> |
|
|
|
<div style="margin: 15px 10px 30px;"> |
|
|
|
<label for="label" @change='clickCheckBox'> |
|
|
|
<input type="checkbox" class="checkboxchart" name="checkboxchart" checked="checked" value="新增项目"/> 新增注册用户 |
|
|
|
<input type="checkbox" class="checkboxchart" name="checkboxchart" checked="checked" value="新增公开项目"/>新增已激活 |
|
|
|
<input type="checkbox" class="checkboxchart" name="checkboxchart" checked="checked" value="新增私有项目"/>新增有贡献活动 |
|
|
|
<input type="checkbox" class="checkboxchart" name="checkboxchart" value="新增自建项目"/>新增未激活 |
|
|
|
<input type="checkbox" class="checkboxchart" name="checkboxchart" value="新增派生项目"/>累计注册用户 |
|
|
|
<input type="checkbox" class="checkboxchart" name="checkboxchart" value="新增镜像项目"/>累计已激活 |
|
|
|
<input type="checkbox" class="checkboxchart" name="checkboxchart" value="累计项目"/>累计有贡献活动 |
|
|
|
</label> |
|
|
|
</div> |
|
|
|
<div id ="selectData" style="height: 300px;"> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
<div style="margin-top: 30px;"> |
|
|
|
<el-table |
|
|
|
:data="tableData.slice((page-1)*pageSize,page*pageSize)" |
|
|
|
style="width: 100%" |
|
|
|
:header-cell-style="tableHeaderStyle" |
|
|
|
:cell-style='cellStyle'> |
|
|
|
<el-table-column |
|
|
|
label="日期" |
|
|
|
prop="DisplayDate" |
|
|
|
align="center" |
|
|
|
stripe |
|
|
|
> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column |
|
|
|
label="新增注册用户" |
|
|
|
prop="TotalRegistUser" |
|
|
|
align="center"> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column |
|
|
|
prop="ActivateRegistUser" |
|
|
|
label="新增已激活" |
|
|
|
width="120px" |
|
|
|
align="center"> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column |
|
|
|
prop="RegistActivityUser" |
|
|
|
label="新增有贡献活动" |
|
|
|
align="center"> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column |
|
|
|
prop="NotActivateRegistUser" |
|
|
|
label="新增未激活" |
|
|
|
align="center"> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column |
|
|
|
prop="ActivateIndex" |
|
|
|
label="新增用户激活率" |
|
|
|
align="center"> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column |
|
|
|
prop="TotalUser" |
|
|
|
label="累计注册用户" |
|
|
|
align="center"> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column |
|
|
|
prop="TotalActivateRegistUser" |
|
|
|
label="累计已激活" |
|
|
|
align="center"> |
|
|
|
</el-table-column> |
|
|
|
|
|
|
|
<el-table-column |
|
|
|
prop="TotalHasActivityUser" |
|
|
|
label="累计有贡献活动" |
|
|
|
align="center"> |
|
|
|
</el-table-column> |
|
|
|
</el-table> |
|
|
|
</div> |
|
|
|
<div style="margin-top:50px;text-align:center"> |
|
|
|
<el-pagination |
|
|
|
background |
|
|
|
@size-change="handleSizeChange" |
|
|
|
@current-change="handleCurrentChange" |
|
|
|
:current-page="page" |
|
|
|
:page-size="pageSize" |
|
|
|
:page-sizes="[5,10,20]" |
|
|
|
layout="total, sizes, prev, pager, next,jumper" |
|
|
|
:total="tableData.length"> |
|
|
|
</el-pagination> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import { export2Excel } from '../excel/util.js' |
|
|
|
export default{ |
|
|
|
name:'UserAnalysis', |
|
|
|
data() { |
|
|
|
return { |
|
|
|
type_val:'', |
|
|
|
recordBeginTime:'', |
|
|
|
lastUpdatedTime:'', |
|
|
|
page:1, |
|
|
|
pageSize:10, |
|
|
|
params:{startDate:'',endDate:''}, |
|
|
|
tableData: [], |
|
|
|
totalNum:0, |
|
|
|
dataUrl:'../api/v1/query_user_metrics_page', |
|
|
|
dataYesterdayUrl:'../api/v1/query_metrics_yesterday', |
|
|
|
tableDataYesterday: {}, |
|
|
|
pickerOptions: { |
|
|
|
}, |
|
|
|
value_time: '', |
|
|
|
search:'', |
|
|
|
data:'', |
|
|
|
// columns: [{title: 'ID',key: 'ID'},{title: '用户名',key: 'Name'},{title: 'PR数',key: 'CodeMergeCount'},{title: 'commit数',key:'CommitCount'},{title: '提出任务数',key: 'IssueCount'},{title: '评论数',key: 'CommentCount'},{title: '关注项目数',key: 'FocusRepoCount'},{title: '点赞项目数',key: 'StarRepoCount'},{title: '登录次数',key: 'LoginCount'},{title:'关注者数',key:'WatchedCount'},{title:'commit代码行数',key:'CommitCodeSize'},{title:'已解决任务数',key:'SolveIssueCount'},{title:'百科页面贡献次数',key:'EncyclopediasCount'},{title:'创建项目',key:'CreateRepoCount'},{title:'用户注册时间',key:'RegistDate'},{title:'云脑任务数',key:'CloudBrainTaskNum'},{title:'云脑运行时间（小时）',key:'CloudBrainRunTime'},{title:'上传（提交）数据集文件数',key:'CommitDatasetNum'},{title:'提交模型数',key:'CommitModelCount'},{title:'用户指数',key:'UserIndex'},{title:'系统统计时间',key:'CountDate'}], |
|
|
|
blob:'', |
|
|
|
fileName:'', |
|
|
|
dynamic:4, |
|
|
|
|
|
|
|
params_pro:{type:'all',page:1,pagesize:10,beginTime:'',endTime:'',q:'',sort:'openi'}, |
|
|
|
}; |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
|
|
|
|
popMark(){ |
|
|
|
alert("数据为空时，不能下载！") |
|
|
|
}, |
|
|
|
// exportData(){ |
|
|
|
// // this.getUserList('all_usr',7) |
|
|
|
// var saveFileName = this.getFileName() |
|
|
|
// export2Excel(this.columns,this.tableData,saveFileName) |
|
|
|
// }, |
|
|
|
// getFileName(){ |
|
|
|
// var saveFileName='' |
|
|
|
// var Date=(this.params.startDate).split('-') |
|
|
|
// var startDate=Date[0]+''+Date[1]+''+Date[2] |
|
|
|
// Date=(this.params.endDate).split('-') |
|
|
|
// var endDate=Date[0]+Date[1]+Date[2] |
|
|
|
// saveFileName = '用户分析_'+this.search+''+startDate+'_'+endDate |
|
|
|
// if (this.type_val=='all_usr'){ |
|
|
|
// saveFileName = '用户分析_'+this.search+'_all' |
|
|
|
// } |
|
|
|
// return saveFileName |
|
|
|
|
|
|
|
// }, |
|
|
|
handleCurrentChange(val){ |
|
|
|
this.page = val |
|
|
|
}, |
|
|
|
handleSizeChange(val){ |
|
|
|
this.pageSize = val |
|
|
|
}, |
|
|
|
resetPage(){ |
|
|
|
this.page=1 |
|
|
|
}, |
|
|
|
addUser(val1, val2){ |
|
|
|
return (val1+val2) |
|
|
|
|
|
|
|
}, |
|
|
|
formatDate(myyear,mymonth,myweekday) { |
|
|
|
// var myyear = this.date.getFullYear(); |
|
|
|
// var mymonth = this.date.getMonth() + 1; |
|
|
|
// var myweekday = this.date.getDate(); |
|
|
|
|
|
|
|
if (mymonth < 10) { |
|
|
|
mymonth = "0" + mymonth; |
|
|
|
} |
|
|
|
if (myweekday < 10) { |
|
|
|
myweekday = "0" + myweekday; |
|
|
|
} |
|
|
|
return (myyear + "-" + mymonth + "-" + myweekday); |
|
|
|
}, |
|
|
|
|
|
|
|
// 获得某月的天数 |
|
|
|
getMonthDays(nowYear,month){ |
|
|
|
let monthStartDate = new Date(nowYear, month, 1); |
|
|
|
let monthEndDate = new Date(nowYear, month + 1, 1); |
|
|
|
let days = (monthEndDate - monthStartDate)/(1000 * 60 * 60 * 24); |
|
|
|
return days; |
|
|
|
}, |
|
|
|
getUpdateTime(){ |
|
|
|
this.$axios.get('../api/v1/projectboard/project',{ |
|
|
|
params:this.params_pro |
|
|
|
}).then((res)=>{ |
|
|
|
this.recordBeginTime=res.data.recordBeginTime |
|
|
|
this.lastUpdatedTime=res.data.lastUpdatedTime |
|
|
|
}) |
|
|
|
}, |
|
|
|
getUserList(type_val,index){ |
|
|
|
this.type_val = type_val |
|
|
|
this.dynamic = index; |
|
|
|
var now = new Date(); // 当前日期 |
|
|
|
var nowDayOfWeek = now.getDay(); // 今天本周的第几天 |
|
|
|
var nowDay = now.getDate(); // 当前日 |
|
|
|
var nowMonth = now.getMonth(); // 当前月 |
|
|
|
var nowYear = now.getFullYear(); // 当前年 |
|
|
|
var today = this.formatDate(nowYear,nowMonth+1,nowDay); |
|
|
|
|
|
|
|
let lastMonthDate = new Date(); // 上月日期 |
|
|
|
lastMonthDate.setDate(1); |
|
|
|
lastMonthDate.setMonth(lastMonthDate.getMonth()-1); |
|
|
|
let lastYear = lastMonthDate.getYear(); |
|
|
|
let lastMonth = lastMonthDate.getMonth(); |
|
|
|
|
|
|
|
this.dataUrl = '../api/v1/query_user_metrics_page'; |
|
|
|
|
|
|
|
if (typeof type_val=="undefined" || type_val=="null" || type_val==""){ |
|
|
|
this.params.startDate= this.formatDate(this.value_time[0].getFullYear(),this.value_time[0].getMonth() + 1,this.value_time[0].getDate()); |
|
|
|
this.params.endDate = this.formatDate(this.value_time[1].getFullYear(),this.value_time[1].getMonth() + 1,this.value_time[1].getDate()); |
|
|
|
}else{ |
|
|
|
switch(type_val){ |
|
|
|
case "yesterday_usr":{ |
|
|
|
this.value_time=[] |
|
|
|
this.dataUrl = '../api/v1/query_user_yesterday'; |
|
|
|
break |
|
|
|
} |
|
|
|
case "current_week_usr":{ |
|
|
|
this.value_time=[] |
|
|
|
this.dataUrl = '../api/v1/query_metrics_current_week'; |
|
|
|
break |
|
|
|
} |
|
|
|
case "current_month_usr":{ |
|
|
|
this.value_time=[] |
|
|
|
this.dataUrl = '../api/v1/query_metrics_current_month'; |
|
|
|
break |
|
|
|
} |
|
|
|
case "last_month_usr":{ |
|
|
|
this.value_time=[] |
|
|
|
this.dataUrl = '../api/v1/query_metrics_last_month'; |
|
|
|
break |
|
|
|
} |
|
|
|
case "monthly_usr":{ |
|
|
|
this.value_time=[] |
|
|
|
this.dataUrl = '../api/v1/query_metrics_last30_day'; |
|
|
|
break |
|
|
|
} |
|
|
|
case "current_year_usr":{ |
|
|
|
this.value_time=[] |
|
|
|
this.dataUrl = '../api/v1/query_metrics_current_year'; |
|
|
|
break |
|
|
|
} |
|
|
|
case "all_usr":{ |
|
|
|
this.value_time=[] |
|
|
|
this.dataUrl = '../api/v1/query_metrics_all'; |
|
|
|
break |
|
|
|
} |
|
|
|
} |
|
|
|
}; |
|
|
|
|
|
|
|
this.$axios.get(this.dataUrl,{ |
|
|
|
params:this.params |
|
|
|
}).then((res)=>{ |
|
|
|
this.tableData = res.data.data |
|
|
|
// console.log("res.data:"+res.data.data) |
|
|
|
|
|
|
|
this.totalNum = res.data.count |
|
|
|
this.drawSelectData() |
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
}, |
|
|
|
getYesterdayUser(){ |
|
|
|
this.$axios.get(this.dataYesterdayUrl,{ |
|
|
|
}).then((res)=>{ |
|
|
|
this.tableDataYesterday = res.data.data[0] |
|
|
|
console.log("tableDataYesterday:",this.tableDataYesterday.ActivateRegistUser) |
|
|
|
console.log("tableDataYesterday:",this.tableDataYesterday.NotActivateRegistUser) |
|
|
|
this.drawYesterdayUser() |
|
|
|
this.drawSumUser() |
|
|
|
}) |
|
|
|
}, |
|
|
|
drawYesterdayUser(){ |
|
|
|
this.optionYesterdayUser = { |
|
|
|
tooltip: { |
|
|
|
trigger: 'item', |
|
|
|
show:false |
|
|
|
}, |
|
|
|
legend: { |
|
|
|
top: '5%', |
|
|
|
left: 'center', |
|
|
|
show:false |
|
|
|
}, |
|
|
|
// graphic:{ |
|
|
|
// type:'text', |
|
|
|
// left:'center', |
|
|
|
// top:'center', |
|
|
|
// style:{ |
|
|
|
// text:this.tableDataYesterday.TotalRegistUser, |
|
|
|
// fontSize:18, |
|
|
|
// fontWeight:'bold', |
|
|
|
// color:'#101010' |
|
|
|
// } |
|
|
|
// }, |
|
|
|
color:['#5087Ec','#DBDBDB'], |
|
|
|
series: [ |
|
|
|
{ |
|
|
|
name: '', |
|
|
|
type: 'pie', |
|
|
|
radius: ['65%', '70%'], |
|
|
|
center:['50%','50%'], |
|
|
|
avoidLabelOverlap: false, |
|
|
|
label: { |
|
|
|
normal:{ |
|
|
|
show: true, |
|
|
|
position: 'center', |
|
|
|
formatter:''+this.tableDataYesterday.TotalRegistUser, |
|
|
|
fontSize:18, |
|
|
|
fontWeight:'bold', |
|
|
|
color:'#101010' |
|
|
|
} |
|
|
|
}, |
|
|
|
emphasis: { |
|
|
|
label: { |
|
|
|
show: false, |
|
|
|
fontSize: '40', |
|
|
|
fontWeight: 'bold' |
|
|
|
} |
|
|
|
}, |
|
|
|
labelLine: { |
|
|
|
normal:{ |
|
|
|
show:false |
|
|
|
} |
|
|
|
}, |
|
|
|
data: [ |
|
|
|
{ value: this.tableDataYesterday.ActivateRegistUser, name: '已激活' }, |
|
|
|
{ value: this.tableDataYesterday.NotActivateRegistUser, name: '未激活'}, |
|
|
|
], |
|
|
|
hoverAnimation:false, |
|
|
|
} |
|
|
|
] |
|
|
|
}; |
|
|
|
this.echartsYsAddUser.setOption(this.optionYesterdayUser) |
|
|
|
}, |
|
|
|
drawSumUser(){ |
|
|
|
this.optionYesterdaAllUser = { |
|
|
|
tooltip: { |
|
|
|
trigger: 'item', |
|
|
|
show:false |
|
|
|
}, |
|
|
|
legend: { |
|
|
|
top: '5%', |
|
|
|
left: 'center', |
|
|
|
show:false |
|
|
|
}, |
|
|
|
// graphic:{ |
|
|
|
// type:'text', |
|
|
|
// left:'center', |
|
|
|
// top:'center', |
|
|
|
// style:{ |
|
|
|
// text:this.tableDataYesterday.TotalRegistUser, |
|
|
|
// fontSize:18, |
|
|
|
// fontWeight:'bold', |
|
|
|
// color:'#101010' |
|
|
|
// } |
|
|
|
// }, |
|
|
|
color:['#5087Ec','#DBDBDB'], |
|
|
|
series: [ |
|
|
|
{ |
|
|
|
name: '', |
|
|
|
type: 'pie', |
|
|
|
radius: ['65%', '70%'], |
|
|
|
center:['50%','50%'], |
|
|
|
avoidLabelOverlap: false, |
|
|
|
label: { |
|
|
|
normal:{ |
|
|
|
show: true, |
|
|
|
position: 'center', |
|
|
|
formatter:''+this.tableDataYesterday.TotalUser, |
|
|
|
fontSize:18, |
|
|
|
fontWeight:'bold', |
|
|
|
color:'#101010' |
|
|
|
} |
|
|
|
}, |
|
|
|
emphasis: { |
|
|
|
label: { |
|
|
|
show: false, |
|
|
|
fontSize: '40', |
|
|
|
fontWeight: 'bold' |
|
|
|
} |
|
|
|
}, |
|
|
|
labelLine: { |
|
|
|
normal:{ |
|
|
|
show:false |
|
|
|
} |
|
|
|
}, |
|
|
|
data: [ |
|
|
|
{ value: this.tableDataYesterday.TotalActivateRegistUser, name: '已激活' }, |
|
|
|
{ value: this.tableDataYesterday.TotalNotActivateRegistUser, name: '未激活'}, |
|
|
|
], |
|
|
|
hoverAnimation:false, |
|
|
|
} |
|
|
|
] |
|
|
|
}; |
|
|
|
this.echartsYsAllUser.setOption(this.optionYesterdaAllUser) |
|
|
|
|
|
|
|
}, |
|
|
|
// searchName(){ |
|
|
|
|
|
|
|
// this.params.userName = this.search |
|
|
|
// this.params.page = 1 |
|
|
|
// this.page=1 |
|
|
|
// this.getUserList(this.type_val, this.dynamic) |
|
|
|
|
|
|
|
// }, |
|
|
|
|
|
|
|
tableHeaderStyle({row,column,rowIndex,columnIndex}){ |
|
|
|
|
|
|
|
if(rowIndex===0){ |
|
|
|
return 'background:#f5f5f6;color:#606266' |
|
|
|
} |
|
|
|
}, |
|
|
|
cellStyle({row,column,rowIndex,columnIndex}){ |
|
|
|
|
|
|
|
if(rowIndex%2 === 1){ |
|
|
|
return 'background:#f5f5f6;color:#606266' |
|
|
|
} |
|
|
|
}, |
|
|
|
drawSelectData(){ |
|
|
|
|
|
|
|
// $("#selectData").removeAttr("selectData").empty(); |
|
|
|
var xdata=[] |
|
|
|
var ydata_TotalRegistUser=[] |
|
|
|
var ydata_ActivateRegistUser=[] |
|
|
|
var ydata_NotActivateRegistUser=[] |
|
|
|
var ydata_RegistActivityUser=[] |
|
|
|
var ydata_TotalUser=[] |
|
|
|
var ydata_TotalActivateRegistUser=[] |
|
|
|
var ydata_TotalHasActivityUser=[] |
|
|
|
|
|
|
|
// if () |
|
|
|
for(var i =0;i<this.tableData.length;i++){ |
|
|
|
xdata.push(this.tableData[this.tableData.length-1-i].DisplayDate); |
|
|
|
ydata_TotalRegistUser.push(this.tableData[this.tableData.length-1-i].TotalRegistUser) |
|
|
|
ydata_ActivateRegistUser.push(this.tableData[this.tableData.length-1-i].ActivateRegistUser) |
|
|
|
ydata_RegistActivityUser.push(this.tableData[this.tableData.length-1-i].RegistActivityUser) |
|
|
|
ydata_NotActivateRegistUser.push(this.tableData[this.tableData.length-1-i].NotActivateRegistUser) |
|
|
|
ydata_TotalUser.push(this.tableData[this.tableData.length-1-i].TotalUser) |
|
|
|
ydata_TotalActivateRegistUser.push(this.tableData[this.tableData.length-1-i].TotalActivateRegistUser) |
|
|
|
ydata_TotalHasActivityUser.push(this.tableData[this.tableData.length-1-i].TotalHasActivityUser) |
|
|
|
} |
|
|
|
|
|
|
|
this.option = { |
|
|
|
title : { |
|
|
|
text: '', |
|
|
|
|
|
|
|
|
|
|
|
textStyle: { |
|
|
|
fontSize: 12, |
|
|
|
}, |
|
|
|
left:'center', |
|
|
|
top:'bottom', |
|
|
|
|
|
|
|
subtext: '', |
|
|
|
|
|
|
|
}, |
|
|
|
tooltip : { |
|
|
|
trigger: 'axis', |
|
|
|
backgroundColor:'rgba(255,255,255,0.8)', |
|
|
|
color:'black', |
|
|
|
borderWidth:'1', |
|
|
|
borderColor:'gray', |
|
|
|
textStyle:{ |
|
|
|
color:'black' |
|
|
|
}, |
|
|
|
|
|
|
|
}, |
|
|
|
legend: { |
|
|
|
data:['新增注册用户','新增已激活','新增有贡献活动','新增未激活','累计注册用户','累计已激活','累计有贡献活动'], |
|
|
|
selected:{ |
|
|
|
'新增未激活':false, |
|
|
|
'累计注册用户':false, |
|
|
|
'累计已激活':false, |
|
|
|
'累计有贡献活动':false |
|
|
|
} |
|
|
|
// orient: 'vertical', |
|
|
|
// top:'top', |
|
|
|
}, |
|
|
|
toolbox: { |
|
|
|
show : false, |
|
|
|
feature : { |
|
|
|
mark : {show: true}, |
|
|
|
dataView : {show: false, readOnly: false}, |
|
|
|
magicType : {show: true, type: ['line', 'bar']}, |
|
|
|
restore : {show: false}, |
|
|
|
saveAsImage : {show: true} |
|
|
|
} |
|
|
|
}, |
|
|
|
calculable : true, |
|
|
|
xAxis : [ |
|
|
|
{ |
|
|
|
type : 'category', |
|
|
|
data : xdata, |
|
|
|
axisLine: { |
|
|
|
show: false, //x轴线消失 |
|
|
|
}, |
|
|
|
axisTick:{ |
|
|
|
show:false//刻度隐藏 |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
], |
|
|
|
yAxis : [ |
|
|
|
{ |
|
|
|
type : 'value', |
|
|
|
axisLine: { |
|
|
|
show: false, //y轴线消失 |
|
|
|
}, |
|
|
|
axisTick:{ |
|
|
|
show:false//刻度隐藏 |
|
|
|
} |
|
|
|
} |
|
|
|
], |
|
|
|
series : [ |
|
|
|
{ name:"新增注册用户", |
|
|
|
data: ydata_TotalRegistUser, |
|
|
|
type: 'line', |
|
|
|
areaStyle: {}, |
|
|
|
itemStyle:{ |
|
|
|
normal:{ |
|
|
|
lineStyle:{ |
|
|
|
color:"#3894FF ", |
|
|
|
}, |
|
|
|
color:"#3894FF ", |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
{ |
|
|
|
name:"新增已激活", |
|
|
|
data: ydata_ActivateRegistUser, |
|
|
|
type: 'line', |
|
|
|
areaStyle: {}, |
|
|
|
itemStyle:{ |
|
|
|
normal:{ |
|
|
|
lineStyle:{ |
|
|
|
color:"#67B3BB", |
|
|
|
}, |
|
|
|
color:"#67B3BB", |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
{ |
|
|
|
name:"新增有贡献活动", |
|
|
|
data: ydata_RegistActivityUser, |
|
|
|
type: 'line', |
|
|
|
areaStyle: {}, |
|
|
|
itemStyle:{ |
|
|
|
normal:{ |
|
|
|
lineStyle:{ |
|
|
|
color:"#58A55C", |
|
|
|
}, |
|
|
|
color:"#58A55C", |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
{ |
|
|
|
name:"新增未激活", |
|
|
|
data: ydata_NotActivateRegistUser, |
|
|
|
type: 'line', |
|
|
|
areaStyle: {}, |
|
|
|
itemStyle:{ |
|
|
|
normal:{ |
|
|
|
lineStyle:{ |
|
|
|
color:"#F2BD42", |
|
|
|
}, |
|
|
|
color:"#F2BD42", |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
{ |
|
|
|
name:"累计注册用户", |
|
|
|
data: ydata_TotalUser, |
|
|
|
type: 'line', |
|
|
|
areaStyle: {}, |
|
|
|
itemStyle:{ |
|
|
|
normal:{ |
|
|
|
lineStyle:{ |
|
|
|
color:"#2E4552", |
|
|
|
}, |
|
|
|
color:"#2E4552", |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
{ |
|
|
|
name:"累计已激活", |
|
|
|
data: ydata_TotalActivateRegistUser, |
|
|
|
type: 'line', |
|
|
|
areaStyle: {}, |
|
|
|
itemStyle:{ |
|
|
|
normal:{ |
|
|
|
lineStyle:{ |
|
|
|
color:"#4786B4", |
|
|
|
}, |
|
|
|
color:"#4786B4", |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
{ |
|
|
|
name:"累计有贡献活动", |
|
|
|
data: ydata_TotalHasActivityUser, |
|
|
|
type: 'line', |
|
|
|
areaStyle: {}, |
|
|
|
itemStyle:{ |
|
|
|
normal:{ |
|
|
|
lineStyle:{ |
|
|
|
color:"#4E9C8F", |
|
|
|
}, |
|
|
|
color:"#4E9C8F", |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
|
|
|
|
] |
|
|
|
}; |
|
|
|
// this.echartsSelectData.resize() |
|
|
|
this.echartsSelectData.setOption(this.option) |
|
|
|
// setTimeout(function (){ |
|
|
|
// window.onresize = function () { |
|
|
|
// this.echartsSelectData.resize; |
|
|
|
// } |
|
|
|
// },200) |
|
|
|
|
|
|
|
// // 使用刚指定的选择项数据显示图表。 |
|
|
|
// var selectArr = this.echartsSelectData.getOption().legend[0].data;//legend所有值 |
|
|
|
// var checkboxs=document.getElementsByName('checkboxchart'); |
|
|
|
// $(".checkboxchart").click(function(){ |
|
|
|
// var obj = {}; |
|
|
|
// for(var i=0; i<checkboxs.length; i++){ |
|
|
|
// if(checkboxs[i].checked){ |
|
|
|
// obj[selectArr[i]] = true; |
|
|
|
// }else{ |
|
|
|
// obj[selectArr[i]] = false; |
|
|
|
// } |
|
|
|
// } |
|
|
|
// option.legend.selected = obj; |
|
|
|
// this.echartsSelectData.setOption(option); |
|
|
|
// }); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}, |
|
|
|
clickCheckBox(){ |
|
|
|
// 使用刚指定的选择项数据显示图表。 |
|
|
|
var selectArr = this.echartsSelectData.getOption().legend[0].data;//legend所有值 |
|
|
|
var checkboxs=document.getElementsByName('checkboxchart'); |
|
|
|
// $(".checkboxchart").click(function(){ |
|
|
|
var obj = {}; |
|
|
|
for(var i=0; i<checkboxs.length; i++){ |
|
|
|
if(checkboxs[i].checked){ |
|
|
|
obj[selectArr[i]] = true; |
|
|
|
}else{ |
|
|
|
obj[selectArr[i]] = false; |
|
|
|
} |
|
|
|
} |
|
|
|
this.option.legend.selected = obj; |
|
|
|
this.echartsSelectData.setOption(this.option); |
|
|
|
// }); |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
}, |
|
|
|
filters:{ |
|
|
|
rounding (value) { |
|
|
|
return Number(value).toFixed(2) |
|
|
|
}, |
|
|
|
roundingToHour (value) { |
|
|
|
return (Number(value)/3600).toFixed(2) |
|
|
|
}, |
|
|
|
transformTimestamp(timestamp){ |
|
|
|
let a = new Date(timestamp*1000); |
|
|
|
const date = new Date(a); |
|
|
|
const Y = date.getFullYear() + '/'; |
|
|
|
const M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '/'; |
|
|
|
const D = (date.getDate() < 10 ? '0'+date.getDate() : date.getDate()) + ' '; |
|
|
|
const h = (date.getHours() < 10 ? '0'+date.getHours() : date.getHours()) + ':'; |
|
|
|
const m = (date.getMinutes() <10 ? '0'+date.getMinutes() : date.getMinutes());// + ':' ; |
|
|
|
// const s = (date.getSeconds() <10 ? '0'+date.getSeconds() : date.getSeconds()) ; // 秒 |
|
|
|
const dateString = Y + M + D + h + m ;//+ s; |
|
|
|
return dateString; |
|
|
|
}, |
|
|
|
addUser(val1,val2){ |
|
|
|
return val1+val2 |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
mounted() { |
|
|
|
// document.getElementById("all_usr").style.outline="none" |
|
|
|
// document.getElementById("all_usr").focus() |
|
|
|
this.getUpdateTime() |
|
|
|
this.getUserList("monthly_usr",4) |
|
|
|
this.getYesterdayUser() |
|
|
|
|
|
|
|
document.getElementById('selectData').style.width = document.getElementById('user_tend').offsetWidth*0.8+'px' |
|
|
|
this.echartsSelectData = this.$echarts.init(document.getElementById('selectData')) |
|
|
|
|
|
|
|
// document.getElementById('ys_add_user').style.width = document.getElementById('user_tend').offsetWidth*0.2+'px' |
|
|
|
this.echartsYsAddUser = this.$echarts.init(document.getElementById('ys_add_user')) |
|
|
|
|
|
|
|
// document.getElementById('ys_all_user').style.width = document.getElementById('user_tend').offsetWidth*0.2+'px' |
|
|
|
this.echartsYsAllUser = this.$echarts.init(document.getElementById('ys_all_user')) |
|
|
|
|
|
|
|
// document.getElementById('ys_sum_user').style.width = document.getElementById('user_tend').offsetWidth*0.23+'px' |
|
|
|
// this.echartsYsSumUser = this.$echarts.init(document.getElementById('ys_sum_user')) |
|
|
|
}, |
|
|
|
created() { |
|
|
|
this.getUserList("monthly_usr",4) |
|
|
|
this.getYesterdayUser() |
|
|
|
}, |
|
|
|
watch:{ |
|
|
|
// search(val){ |
|
|
|
// if(!val){ |
|
|
|
// this.params.userName = this.search |
|
|
|
// this.params.page = 1 |
|
|
|
// this.page=1 |
|
|
|
// this.getUserList(this.type_val, this.dynamic) |
|
|
|
// } |
|
|
|
// } |
|
|
|
}, |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<style scoped> |
|
|
|
.pro_item{ |
|
|
|
font-size: 16px; |
|
|
|
color: rgba(16, 16, 16, 100); |
|
|
|
font-family: SourceHanSansSC-bold; |
|
|
|
} |
|
|
|
.sta_item{ |
|
|
|
font-size: 14px; |
|
|
|
color: rgb(0 0 0); |
|
|
|
font-family: SourceHanSansSC-bold; |
|
|
|
} |
|
|
|
.update_time{ |
|
|
|
line-height: 17px; |
|
|
|
font-size: 12px; |
|
|
|
color:rgba(187, 187, 187, 100); |
|
|
|
margin-left: 10px; |
|
|
|
} |
|
|
|
/* .btn{ |
|
|
|
line-height: 1.5; |
|
|
|
margin: -3px; |
|
|
|
border: 1px solid #409effd6; |
|
|
|
background: #FFFF; |
|
|
|
color: #409eff; |
|
|
|
width: 60px; |
|
|
|
height: 30px; |
|
|
|
border-radius:4px ; |
|
|
|
} */ |
|
|
|
.btnFirst{ |
|
|
|
line-height: 1.5; |
|
|
|
margin: -3.5px; |
|
|
|
border: 1px solid rgba(22, 132, 252, 100); |
|
|
|
border-right: none; |
|
|
|
background: #FFFF; |
|
|
|
color: #1684FC; |
|
|
|
width: 60px; |
|
|
|
height: 30px; |
|
|
|
border-radius:4px 0px 0px 4px; |
|
|
|
} |
|
|
|
.btn{ |
|
|
|
line-height: 1.5; |
|
|
|
margin: -3.5px; |
|
|
|
border: 1px solid rgba(22, 132, 252, 100); |
|
|
|
border-right: none; |
|
|
|
background: #FFFF; |
|
|
|
color: #1684FC; |
|
|
|
width: 60px; |
|
|
|
height: 30px; |
|
|
|
} |
|
|
|
.btnLast{ |
|
|
|
line-height: 1.5; |
|
|
|
margin: -3.5px; |
|
|
|
border: 1px solid rgba(22, 132, 252, 100); |
|
|
|
/* border-right: none; */ |
|
|
|
background: #FFFF; |
|
|
|
color: #1684FC; |
|
|
|
width: 60px; |
|
|
|
height: 30px; |
|
|
|
border-radius:0px 4px 4px 0px; |
|
|
|
} |
|
|
|
.btnFirst,.btn,.btnLast { |
|
|
|
cursor: pointer; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
/* .btn:focus, |
|
|
|
.btn:active{ |
|
|
|
background-color:#409effd6 ; |
|
|
|
} */ |
|
|
|
/* /deep/ .el-date-picker { |
|
|
|
width: 220px; |
|
|
|
} */ |
|
|
|
/deep/ .el-table { |
|
|
|
font-size: 12px; |
|
|
|
} |
|
|
|
/deep/ .el-table tbody tr:hover>td { |
|
|
|
background-color:#D3D3D3!important; |
|
|
|
opacity:1 |
|
|
|
} |
|
|
|
/deep/ .el-range-separator{ |
|
|
|
width: 20% !important; |
|
|
|
} |
|
|
|
/deep/ .el-pagination { |
|
|
|
padding-bottom: 30px; |
|
|
|
} |
|
|
|
.colorChange { |
|
|
|
background-color: #1684FC; |
|
|
|
color: #FFFF; |
|
|
|
cursor: default; |
|
|
|
} |
|
|
|
.item_echart{ |
|
|
|
margin-top: 10px; |
|
|
|
margin-right: 5px; |
|
|
|
border:1px solid rgba(219, 219, 219, 100); |
|
|
|
height: 350px; |
|
|
|
width: 100%; |
|
|
|
} |
|
|
|
.yesterday_blk{ |
|
|
|
display: block; |
|
|
|
margin-top:40px |
|
|
|
} |
|
|
|
.yesterday_pdrt{ |
|
|
|
padding-left: 10px; |
|
|
|
} |
|
|
|
.yesterday_color1{ |
|
|
|
border-left: 3px solid #DBDBDB; |
|
|
|
} |
|
|
|
.yesterday_color2{ |
|
|
|
border-left: 3px solid #5087Ec; |
|
|
|
} |
|
|
|
.yesterday_title{ |
|
|
|
font-size: 14px; |
|
|
|
font-weight: bold; |
|
|
|
} |
|
|
|
.yesterday_text{ |
|
|
|
font-size: 12px; |
|
|
|
line-height: 12px; |
|
|
|
color: #888888; |
|
|
|
margin-top: 10px; |
|
|
|
} |
|
|
|
.bold_num{ |
|
|
|
font-weight: bold; |
|
|
|
} |
|
|
|
.draw_region{ |
|
|
|
width: 180px; |
|
|
|
height: 180px; |
|
|
|
} |
|
|
|
</style> |
wangjr
3 years ago