Skip to content

C
chinafrica
提交 c2594372 authored 作者: 吴德鹏's avatar 吴德鹏
浏览文件
操作

完成首页注册量统计

上级 6629b251
显示空白字符变更
内嵌 并排
正在显示 包含 806 行增加 和 1136 行删除
platform-admin/src/main/java/com/platform/controller/TbCfUserInfoController.java
浏览文件 @ c2594372
...@@ -5,6 +5,8 @@ import com.platform.service.TbCfUserInfoService; ...@@ -5,6 +5,8 @@ import com.platform.service.TbCfUserInfoService;
import com.platform.utils.PageUtils; import com.platform.utils.PageUtils;
import com.platform.utils.Query; import com.platform.utils.Query;
import com.platform.utils.R; import com.platform.utils.R;
import com.platform.vo.StatisticalVo;
import org.apache.ibatis.annotations.Param;
import org.apache.shiro.authz.annotation.RequiresPermissions; import org.apache.shiro.authz.annotation.RequiresPermissions;
import org.springframework.beans.factory.annotation.Autowired; import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller; import org.springframework.stereotype.Controller;
...@@ -108,4 +110,50 @@ public class TbCfUserInfoController { ...@@ -108,4 +110,50 @@ public class TbCfUserInfoController {
String userId = tbCfUserInfoService.queryById(account); String userId = tbCfUserInfoService.queryById(account);
return R.ok().put("userId", userId); return R.ok().put("userId", userId);
} }
/**
* 统计分析：
* 1）统计每天的注册量，2）统计今天的注册量，3）统计本周注册量，4）统计本月注册量，5）统计今年的注册量
*/
@ResponseBody
@GetMapping("/getDailyRegistered")
public R getDailyRegistered() {
List<StatisticalVo> userList = tbCfUserInfoService.getDailyRegistered();
return R.ok().put("list", userList);
}
@ResponseBody
@GetMapping("/getDayRegistered")
public R getDayRegistered() {
List<StatisticalVo> userList = tbCfUserInfoService.getDayRegistered();
return R.ok().put("list", userList);
}
@ResponseBody
@GetMapping("/getWeekRegistered")
public R getWeekRegistered() {
List<StatisticalVo> userList = tbCfUserInfoService.getWeekRegistered();
return R.ok().put("list", userList);
}
@ResponseBody
@GetMapping("/getMonthRegistered")
public R getMonthRegistered() {
List<StatisticalVo> userList = tbCfUserInfoService.getMonthRegistered();
return R.ok().put("list", userList);
}
@ResponseBody
@GetMapping("/getYearRegistered")
public R getYearRegistered() {
List<StatisticalVo> userList = tbCfUserInfoService.getYearRegistered();
return R.ok().put("list", userList);
}
@ResponseBody
@GetMapping("/getRegisteredByDate")
public R getRegisteredByDate(String start, String end) {
List<StatisticalVo> userList = tbCfUserInfoService.getRegisteredByDate(start, end);
return R.ok().put("list", userList);
}
} }
platform-admin/src/main/java/com/platform/dao/TbCfUserInfoDao.java
浏览文件 @ c2594372
package com.platform.dao; package com.platform.dao;
import com.platform.entity.TbCfUserInfoEntity; import com.platform.entity.TbCfUserInfoEntity;
import com.platform.vo.StatisticalVo;
import org.apache.ibatis.annotations.Param;
import java.util.List; import java.util.List;
...@@ -20,4 +22,16 @@ public interface TbCfUserInfoDao extends BaseDao<TbCfUserInfoEntity> { ...@@ -20,4 +22,16 @@ public interface TbCfUserInfoDao extends BaseDao<TbCfUserInfoEntity> {
List<String> getUserIdsByNick(String nick); List<String> getUserIdsByNick(String nick);
List<String> getUserIds(String name); List<String> getUserIds(String name);
List<StatisticalVo> getDailyRegistered();
List<StatisticalVo> getDayRegistered();
List<StatisticalVo> getWeekRegistered();
List<StatisticalVo> getMonthRegistered();
List<StatisticalVo> getYearRegistered();
List<StatisticalVo> getRegisteredByDate(@Param("start") String start, @Param("end") String end);
} }
platform-admin/src/main/java/com/platform/service/TbCfUserInfoService.java
浏览文件 @ c2594372
package com.platform.service; package com.platform.service;
import com.platform.entity.TbCfUserInfoEntity; import com.platform.entity.TbCfUserInfoEntity;
import com.platform.vo.StatisticalVo;
import org.apache.ibatis.annotations.Param;
import java.util.List; import java.util.List;
import java.util.Map; import java.util.Map;
...@@ -74,4 +76,16 @@ public interface TbCfUserInfoService { ...@@ -74,4 +76,16 @@ public interface TbCfUserInfoService {
long queryUserTotal(); long queryUserTotal();
String queryByAccount(String account); String queryByAccount(String account);
List<StatisticalVo> getDailyRegistered();
List<StatisticalVo> getDayRegistered();
List<StatisticalVo> getWeekRegistered();
List<StatisticalVo> getMonthRegistered();
List<StatisticalVo> getYearRegistered();
List<StatisticalVo> getRegisteredByDate(String start, String end);
} }
platform-admin/src/main/java/com/platform/service/impl/TbCfUserInfoServiceImpl.java
浏览文件 @ c2594372
...@@ -4,6 +4,7 @@ import com.platform.dao.TbCfUserInfoDao; ...@@ -4,6 +4,7 @@ import com.platform.dao.TbCfUserInfoDao;
import com.platform.entity.TbCfUserInfoEntity; import com.platform.entity.TbCfUserInfoEntity;
import com.platform.service.TbCfUserInfoService; import com.platform.service.TbCfUserInfoService;
import com.platform.utils.IdUtil; import com.platform.utils.IdUtil;
import com.platform.vo.StatisticalVo;
import org.springframework.beans.factory.annotation.Autowired; import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service; import org.springframework.stereotype.Service;
...@@ -70,6 +71,42 @@ public class TbCfUserInfoServiceImpl implements TbCfUserInfoService { ...@@ -70,6 +71,42 @@ public class TbCfUserInfoServiceImpl implements TbCfUserInfoService {
@Override @Override
public String queryByAccount(String account) { public String queryByAccount(String account) {
return tbCfUserInfoDao.queryById(account) ; return tbCfUserInfoDao.queryById(account);
}
@Override
public List<StatisticalVo> getDailyRegistered() {
return tbCfUserInfoDao.getDailyRegistered();
}
@Override
public List<StatisticalVo> getDayRegistered() {
return tbCfUserInfoDao.getDayRegistered();
}
@Override
public List<StatisticalVo> getWeekRegistered() {
return tbCfUserInfoDao.getWeekRegistered();
}
@Override
public List<StatisticalVo> getMonthRegistered() {
return tbCfUserInfoDao.getMonthRegistered();
}
@Override
public List<StatisticalVo> getYearRegistered() {
return tbCfUserInfoDao.getYearRegistered();
}
@Override
public List<StatisticalVo> getRegisteredByDate(String start, String end) {
return tbCfUserInfoDao.getRegisteredByDate(start, end);
} }
} }
platform-admin/src/main/java/com/platform/vo/StatisticalVo.java 0 → 100644
浏览文件 @ c2594372
package com.platform.vo;
/**
* @Auther: wudepeng
* @Date: 2020/07/14
* @Description:数据统计实体类
*/
public class StatisticalVo {
//日期
private String date;
//数量
private Integer num;
public String getDate() {
return date;
}
public void setDate(String date) {
this.date = date;
}
public Integer getNum() {
return num;
}
public void setNum(Integer num) {
this.num = num;
}
}
platform-admin/src/main/resources/com/platform/dao/TbCfUserInfoDao.xml
浏览文件 @ c2594372
...@@ -53,6 +53,75 @@ ...@@ -53,6 +53,75 @@
from tb_cf_user_info from tb_cf_user_info
where user_id = #{id} where user_id = #{id}
</select> </select>
<!--查询每日注册量-->
<select id="getDailyRegistered" resultType="com.platform.vo.StatisticalVo">
SELECT
DATE_FORMAT( create_time, '%Y-%m-%d' ) date,
count( 1 ) num
FROM
tb_cf_user_info
GROUP BY
date
</select>
<!--查询当天注册量-->
<select id="getDayRegistered" resultType="com.platform.vo.StatisticalVo">
SELECT
DATE_FORMAT( create_time, '%Y-%m-%d' ) date,
count( 1 ) num
FROM
tb_cf_user_info
WHERE
DATE_FORMAT( create_time, '%Y-%m-%d' ) = curdate( )
</select>
<!--查询本周注册量-->
<select id="getWeekRegistered" resultType="com.platform.vo.StatisticalVo">
SELECT
DATE_FORMAT( create_time, '%Y-%m-%d' ) date,
count( 1 ) num
FROM
tb_cf_user_info
WHERE
YEARWEEK( date_format( create_time, '%Y-%m-%d' ) ) = YEARWEEK( now( ) )
GROUP BY
date
</select>
<!--查询本月注册量-->
<select id="getMonthRegistered" resultType="com.platform.vo.StatisticalVo">
SELECT
DATE_FORMAT( create_time, '%Y-%m-%d' ) date,
count( 1 ) num
FROM
tb_cf_user_info
WHERE
date_format( create_time, '%Y%m' ) = date_format( curdate( ), '%Y%m' )
GROUP BY
date
</select>
<!--查询今年注册量-->
<select id="getYearRegistered" resultType="com.platform.vo.StatisticalVo">
SELECT
DATE_FORMAT( create_time, '%Y-%m-%d' ) date,
count( 1 ) num
FROM
tb_cf_user_info
WHERE
date_format( create_time, '%Y' ) = date_format( curdate( ), '%Y' )
GROUP BY
date
</select>
<select id="getRegisteredByDate" resultType="com.platform.vo.StatisticalVo">
SELECT
DATE_FORMAT( create_time, '%Y-%m-%d' ) date,
count( 1 ) num
FROM
tb_cf_user_info
WHERE
date_format( create_time, '%Y-%m-%d' ) > #{start}
AND date_format( create_time, '%Y-%m-%d' ) &lt; #{end}
GROUP BY
date
</select>
<select id="queryList" resultType="com.platform.entity.TbCfUserInfoEntityExtends"> <select id="queryList" resultType="com.platform.entity.TbCfUserInfoEntityExtends">
SELECT SELECT
u.*, u.*,
......
platform-admin/src/main/webapp/WEB-INF/page/sys/main.html
浏览文件 @ c2594372
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
<script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script> <script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script>
<script type="text/javascript" src="http://unpkg.com/view-design/dist/iview.min.js"></script> --> <script type="text/javascript" src="http://unpkg.com/view-design/dist/iview.min.js"></script> -->
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script> --> <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script> -->
#parse("sys/header.html")
<style> <style>
/* common_css */ /* common_css */
:root{ :root{
...@@ -393,7 +393,7 @@ ...@@ -393,7 +393,7 @@
</div> </div>
</div> </div>
<div class="m-card-bottom"> <div class="m-card-bottom">
<span>日均销售额 <i>$1000</i></span> <span>日均销售额 <i>$29330.32</i></span>
</div> </div>
</div> </div>
<!-- 访问量 --> <!-- 访问量 -->
...@@ -411,7 +411,7 @@ ...@@ -411,7 +411,7 @@
<div class="m-card-functionzone" id='echartsPV'> <div class="m-card-functionzone" id='echartsPV'>
</div> </div>
<div class="m-card-bottom"> <div class="m-card-bottom">
<span>日访问量 <i>1000</i></span> <span>日访问量 <i>127230</i></span>
</div> </div>
</div> </div>
<!-- 支付笔数 --> <!-- 支付笔数 -->
...@@ -428,7 +428,7 @@ ...@@ -428,7 +428,7 @@
<p class="m-card-main-text">{{animatedNumberFrequencyOfPayment}}</p> <p class="m-card-main-text">{{animatedNumberFrequencyOfPayment}}</p>
<div class="m-card-functionzone" id='echartsPayTheAmount'></div> <div class="m-card-functionzone" id='echartsPayTheAmount'></div>
<div class="m-card-bottom"> <div class="m-card-bottom">
<span>转换率 <i>60%</i></span> <span>转换率 <i>11.3%</i></span>
</div> </div>
</div> </div>
<!-- 新增用户 --> <!-- 新增用户 -->
...@@ -442,7 +442,7 @@ ...@@ -442,7 +442,7 @@
title="今日当前注册用户数量" title="今日当前注册用户数量"
> >
</p> </p>
<p class="m-card-main-text">213243</p> <p class="m-card-main-text">13243</p>
<div class="m-card-functionzone flex-mill-center" id="echartsNewUsers"> <div class="m-card-functionzone flex-mill-center" id="echartsNewUsers">
<div class="pillar"> <div class="pillar">
<div title="今日新增比例" class="TodaySchedule" style="width:20px;"></div> <div title="今日新增比例" class="TodaySchedule" style="width:20px;"></div>
...@@ -482,10 +482,10 @@ ...@@ -482,10 +482,10 @@
</div> </div>
</div> </div>
<div class="right-functionzone "> <div class="right-functionzone ">
<span >今日</span> <span @click="getDayRegistered">今日</span>
<span>本周</span> <span @click="getWeekRegistered">本周</span>
<span>本月</span> <span @click="getMonthRegistered">本月</span>
<span>全年</span> <span @click="getYearRegistered">全年</span>
<Date-picker <Date-picker
@on-change='changeDate($event)' @on-change='changeDate($event)'
type="daterange" type="daterange"
...@@ -648,572 +648,8 @@ ...@@ -648,572 +648,8 @@
<script src="${rc.contextPath}/js/plugins/iview.js"></script> <script src="${rc.contextPath}/js/plugins/iview.js"></script>
<script src="${rc.contextPath}/js/plugins/echarts.min.js"></script> <script src="${rc.contextPath}/js/plugins/echarts.min.js"></script>
<script src="${rc.contextPath}/js/plugins/TweenMax.min.js"></script> <script src="${rc.contextPath}/js/plugins/TweenMax.min.js"></script>
<script> <script src="${rc.contextPath}/js/sys/main.js?_${date.systemTime}"></script>
let app= new Vue({
el:'#app',
data(){
return{
ForturnoverNumber:0,
PVNumber:0,
FrequencyOfPaymentNumber:0,
datePicker:{
shortcuts: [
{
text: '最近一周',
value () {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
return [start, end];
}
},
{
text: '最近一个月',
value () {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 14);
return [start, end];
}
},
{
text: '最近三十天',
value () {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
return [start, end];
}
},
{
text: '最近一年',
value () {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 365);
return [start, end];
}
}
]
},
middleOption:[
{
isActive:true,
title:'注册量'
},
{
isActive:false,
title:'访问量'
},
{
isActive:false,
title:'订单量'
},
{
isActive:false,
title:'成交量'
}
],
bottomOption:[
{
isActive:true,
title:'热门搜索'
},
{
isActive:false,
title:'热门商品'
},
],
initEchartsPVData:[ //柱状图数据
{
type: 'line',
smooth:0.5,
symbol: 'none',
lineStyle: {
color: '#975FE4',
width: 0
},
areaStyle: {
normal: {
color: '#975FE4' //改变区域颜色
}
},
data: [
['2019-10-1', 200],
['2019-10-2', 400],
['2019-10-3', 650],
['2019-10-4', 500],
['2019-10-5', 250],
['2019-10-6', 300],
['2019-10-7', 450],
['2019-10-8', 300],
['2019-10-9', 100],
['2019-10-10', 250],
['2019-10-11', 300],
['2019-10-12', 450],
['2019-10-13', 300],
['2019-10-14', 100]
]
}
],
initEchartsPayTheAmountData:[ //柱状图数据
{
name: '支付笔数',
type: 'bar',
barWidth: '60%',
data: [
['2019-10-1', 200],
['2019-10-2', 400],
['2019-10-3', 650],
['2019-10-4', 500],
['2019-10-5', 250],
['2019-10-6', 300],
['2019-10-7', 450],
['2019-10-8', 300],
['2019-10-9', 100],
['2019-10-10', 250],
['2019-10-11', 300],
['2019-10-12', 450],
['2019-10-13', 300],
['2019-10-14', 100]
]
}
],
initEchartsMiddleData:[ //中间柱状图数据
{
name: '支付笔数',
type: 'bar',
barWidth: '60%',
data: [
['2019-10-1', 200],
['2019-10-2', 400],
['2019-10-3', 550],
['2019-10-4', 500],
['2019-10-5', 250],
['2019-10-6', 300],
['2019-10-7', 450],
['2019-10-8', 300],
['2019-10-9', 100],
['2019-10-10', 250],
['2019-10-11', 300],
['2019-10-12', 450],
['2019-10-13', 300],
['2019-10-14', 100]
]
}
],
initEchartsMiddlebottomUserSearchSumData:[ //用户搜索数据
{
type: 'line',
smooth:0.5,
symbol: 'none',
lineStyle: {
color: '#32ABFB',
width: 2
},
areaStyle: {
normal: {
color: '#CCEAFE' //改变区域颜色
}
},
data: [
['2019-10-1', 200],
['2019-10-2', 400],
['2019-10-3', 650],
['2019-10-4', 500],
['2019-10-5', 250],
['2019-10-6', 300],
['2019-10-7', 450],
['2019-10-8', 300],
['2019-10-9', 100],
['2019-10-10', 250],
['2019-10-11', 300],
['2019-10-12', 450],
['2019-10-13', 300],
['2019-10-14', 100]
]
}
],
initEchartsMiddlebottomUserSearchPerCapitaData:[ //用户搜索人均数据
{
type: 'line',
smooth:0.5,
symbol: 'none',
lineStyle: {
color: '#95E1E9',
width: 2
},
areaStyle: {
normal: {
color: '#DFF6F8' //改变区域颜色
}
},
data: [
['2019-10-1', 200],
['2019-10-2', 400],
['2019-10-3', 650],
['2019-10-4', 500],
['2019-10-5', 250],
['2019-10-6', 300],
['2019-10-7', 450],
['2019-10-8', 300],
['2019-10-9', 100],
['2019-10-10', 250],
['2019-10-11', 300],
['2019-10-12', 450],
['2019-10-13', 300],
['2019-10-14', 100]
]
}
],
initEchartsCategoryData:[
{
name: '分类',
type: 'pie',
center:['30%','50%'],
radius: ['65%', '90%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '18',
fontWeight: 'bold'
}
},
itemStyle:{
borderWidth:4,
borderColor:'white'
},
labelLine: {
show: false
},
data: [
{value: 335, name: 'MEN',price:123,itemStyle:{color: '#3AA0FF'}},
{value: 310, name: 'WOMEN',price:123,itemStyle:{color: '#975FE4'}},
{value: 234, name: 'Afri Home',price:123,itemStyle:{color: '#F2637B'}},
{value: 135, name: 'Hair',price:123,itemStyle:{color: '#4DCB73'}},
{value: 1548, name: 'Sport',price:123,itemStyle:{color: '#36CBCB'}}
]
}
]
}
},
computed:{
animatedNumberForturnover(){
return this.ForturnoverNumber.toFixed(0);
},
animatedNumberPV(){
return this.PVNumber.toFixed(0);
},
animatedNumberFrequencyOfPayment(){
return this.FrequencyOfPaymentNumber.toFixed(0);
}
},
methods:{
/* 访问量 */
initEchartsPV(){
var app = echarts.init(document.getElementById('echartsPV'));
option = {
xAxis: {
type: 'category',
boundaryGap: false,
show:false
},
yAxis: {
type: 'value',
boundaryGap: [0, '30%'],
splitLine:{show: false},
show:false
},
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
"type": "shadow" // 默认为直线，可选为："line" | "shadow"
}
},
grid:{
x:0,
y:0,
x2:0,
y2:10,
borderWidth:1
},
series: [...this.initEchartsPVData]
};
app.setOption(option);
},
/* 支付笔数 */
initEchartsPayTheAmount(){
var app = echarts.init(document.getElementById('echartsPayTheAmount'));
option = {
color: ['#3BA1FF'],
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
axisTick: {
alignWithLabel: true
},
show:false
},
],
yAxis: [
{
type: 'value',
show:false
}
],
grid:{
x:0,
y:0,
x2:0,
y2:10,
borderWidth:1
},
series: [...this.initEchartsPayTheAmountData]
};
app.setOption(option);
},
initEchartsMiddle(){
var app = echarts.init(document.getElementById('middleEcharts-in'));
option = {
color: ['#3BA1FF'],
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
axisTick: {
alignWithLabel: true
},
show:true
},
],
yAxis: [
{
type: 'value',
show:true,
axisTick: {
show: true,
},
splitLine :{ //网格线
lineStyle:{
type:'dashed' //设置网格线类型 dotted：虚线 solid:实线
},
show:true //隐藏或显示
},
}
],
grid:{
x:40,
y:40,
x2:40,
y2:40,
borderWidth:1
},
series: [...this.initEchartsMiddleData]
};
app.setOption(option);
},
/* 搜索用户数 */
initEchartsMiddlebottomUserSearchSum(){
var app = echarts.init(document.getElementById('bottom-echats-user-search-sum'));
option = {
xAxis: {
type: 'category',
boundaryGap: false,
show:false
},
yAxis: {
type: 'value',
boundaryGap: [0, '30%'],
splitLine:{show: false},
show:false
},
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
"type": "shadow" // 默认为直线，可选为："line" | "shadow"
}
},
grid:{
x:0,
y:0,
x2:0,
y2:0,
borderWidth:1
},
series: [...this.initEchartsMiddlebottomUserSearchSumData]
};
app.setOption(option);
},
/* 人均搜索次数 */
initEchartsMiddlebottomUserSearchPerCapita(){
var app = echarts.init(document.getElementById('bottom-echats-user-search-per-capita'));
option = {
xAxis: {
type: 'category',
boundaryGap: false,
show:false
},
yAxis: {
type: 'value',
boundaryGap: [0, '30%'],
splitLine:{show: false},
show:false
},
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
"type": "shadow" // 默认为直线，可选为："line" | "shadow"
}
},
grid:{
x:0,
y:0,
x2:0,
y2:0,
borderWidth:1
},
series: [...this.initEchartsMiddlebottomUserSearchPerCapitaData]
};
app.setOption(option);
},
initEchartsCategory(){
var app = echarts.init(document.getElementById('category-echarts'));
let _this = this;
option = {
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
},
legend: {
orient: 'vertical',
left: 'right',
top:'center',
icon:"circle",
data: ['MEN', 'WOMEN', 'Afri Home', 'Hair', 'Sport'],
align:'left',
textStyle:{
rich:{
a:{
width:60,
fontSize:14,
color:"rgba(0, 0, 0, 0.647058823529412)",
padding:10,
},
b:{
width:40,
fontSize:14,
color:"rgba(0, 0, 0, 0.3)"
},
c:{
width:40,
fontSize:14,
color:"#333"
}
}
},
formatter:function(name){
var data = _this.initEchartsCategoryData[0].data;
var total = 0;
var tarValue;
var price;
for (var i = 0, l = data.length; i < l; i++) {
total += data[i].value;
if (data[i].name == name) {
tarValue = data[i].value;
}
price = data[i].price;
}
var p = Math.round(((tarValue / total) * 100)).toFixed(2);
let arr=["{a|"+name.slice(0,4)+"..}{b|"+p+"%} {c|￥"+price+"}"]
return arr;
},
// show:false
},
grid:{
x:0,
y:0,
x2:0,
y2:0,
borderWidth:1
},
series: [...this.initEchartsCategoryData]
};
app.setOption(option);
},
changeMiddelActive(element,index){
this.middleOption.forEach(item=>{
item.isActive = false;
})
this.middleOption[index].isActive = true;
this.$refs.middleEachrtsTitle.innerText = element.title+'趋势';
this.initEchartsMiddleData[0].data.push(['2019-10-1'+Math.round(Math.random()*100), Math.round(Math.random()*1000)])
this.initEchartsMiddle();
},
changeBottomSelect(element,index){
this.bottomOption.forEach(item=>{
item.isActive = false;
})
this.bottomOption[index].isActive = true;
if(element.title==='热门搜索'){
this.$refs.userSearchSum.innerText='搜索用户数'
this.$refs.userSearchPerCapita.innerText='人均搜索次数'
}else{
this.$refs.userSearchSum.innerText='下单用户数'
this.$refs.userSearchPerCapita.innerText='人均流量次数'
}
},
/* 中间模块日期 */
changeDate(e){
console.log(e)
}
},
created(){
},
mounted(){
this.initEchartsPV();
this.initEchartsPayTheAmount();
this.initEchartsMiddle();
this.initEchartsMiddlebottomUserSearchSum();
this.initEchartsMiddlebottomUserSearchPerCapita();
this.initEchartsCategory();
TweenLite.to(this.$data, 1, { ForturnoverNumber: 1445 });
TweenLite.to(this.$data, 1, { PVNumber: 2340 });
TweenLite.to(this.$data, 1, { FrequencyOfPaymentNumber: 2344 });
}
})
</script>
</html> </html>
\ No newline at end of file
platform-admin/src/main/webapp/js/sys/main.js
浏览文件 @ c2594372
let app = new Vue({
el: '#app',
let app= new Vue({ data() {
el:'#app', return {
data(){ ForturnoverNumber: 0,
return{ PVNumber: 0,
ForturnoverNumber:0, FrequencyOfPaymentNumber: 0,
PVNumber:0, datePicker: {
FrequencyOfPaymentNumber:0,
datePicker:{
shortcuts: [ shortcuts: [
{ {
text: '最近一周', text: '最近一周',
value () { value() {
const end = new Date(); const end = new Date();
const start = new Date(); const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7); start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
...@@ -20,7 +18,7 @@ let app= new Vue({ ...@@ -20,7 +18,7 @@ let app= new Vue({
}, },
{ {
text: '最近一个月', text: '最近一个月',
value () { value() {
const end = new Date(); const end = new Date();
const start = new Date(); const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 14); start.setTime(start.getTime() - 3600 * 1000 * 24 * 14);
...@@ -29,7 +27,7 @@ let app= new Vue({ ...@@ -29,7 +27,7 @@ let app= new Vue({
}, },
{ {
text: '最近三十天', text: '最近三十天',
value () { value() {
const end = new Date(); const end = new Date();
const start = new Date(); const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30); start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
...@@ -38,7 +36,7 @@ let app= new Vue({ ...@@ -38,7 +36,7 @@ let app= new Vue({
}, },
{ {
text: '最近一年', text: '最近一年',
value () { value() {
const end = new Date(); const end = new Date();
const start = new Date(); const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 365); start.setTime(start.getTime() - 3600 * 1000 * 24 * 365);
...@@ -47,38 +45,38 @@ let app= new Vue({ ...@@ -47,38 +45,38 @@ let app= new Vue({
} }
] ]
}, },
middleOption:[ middleOption: [
{ {
isActive:true, isActive: true,
title:'注册量' title: '注册量'
}, },
{ {
isActive:false, isActive: false,
title:'访问量' title: '访问量'
}, },
{ {
isActive:false, isActive: false,
title:'订单量' title: '订单量'
}, },
{ {
isActive:false, isActive: false,
title:'成交量' title: '成交量'
} }
], ],
bottomOption:[ bottomOption: [
{ {
isActive:true, isActive: true,
title:'热门搜索' title: '热门搜索'
}, },
{ {
isActive:false, isActive: false,
title:'热门商品' title: '热门商品'
}, },
], ],
initEchartsPVData:[ //柱状图数据 initEchartsPVData: [ //柱状图数据
{ {
type: 'line', type: 'line',
smooth:0.5, smooth: 0.5,
symbol: 'none', symbol: 'none',
lineStyle: { lineStyle: {
color: '#975FE4', color: '#975FE4',
...@@ -107,7 +105,7 @@ let app= new Vue({ ...@@ -107,7 +105,7 @@ let app= new Vue({
] ]
} }
], ],
initEchartsPayTheAmountData:[ //柱状图数据 initEchartsPayTheAmountData: [ //柱状图数据
{ {
name: '支付笔数', name: '支付笔数',
type: 'bar', type: 'bar',
...@@ -130,33 +128,18 @@ let app= new Vue({ ...@@ -130,33 +128,18 @@ let app= new Vue({
] ]
} }
], ],
initEchartsMiddleData:[ //中间柱状图数据 initEchartsMiddleData: [ //中间柱状图数据
{ {
name: '支付笔数', name: '注册量',
type: 'bar', type: 'bar',
barWidth: '60%', barWidth: '60%',
data: [ data: []
['2019-10-1', 200],
['2019-10-2', 400],
['2019-10-3', 550],
['2019-10-4', 500],
['2019-10-5', 250],
['2019-10-6', 300],
['2019-10-7', 450],
['2019-10-8', 300],
['2019-10-9', 100],
['2019-10-10', 250],
['2019-10-11', 300],
['2019-10-12', 450],
['2019-10-13', 300],
['2019-10-14', 100]
]
} }
], ],
initEchartsMiddlebottomUserSearchSumData:[ //用户搜索数据 initEchartsMiddlebottomUserSearchSumData: [ //用户搜索数据
{ {
type: 'line', type: 'line',
smooth:0.5, smooth: 0.5,
symbol: 'none', symbol: 'none',
lineStyle: { lineStyle: {
color: '#32ABFB', color: '#32ABFB',
...@@ -185,10 +168,10 @@ let app= new Vue({ ...@@ -185,10 +168,10 @@ let app= new Vue({
] ]
} }
], ],
initEchartsMiddlebottomUserSearchPerCapitaData:[ //用户搜索人均数据 initEchartsMiddlebottomUserSearchPerCapitaData: [ //用户搜索人均数据
{ {
type: 'line', type: 'line',
smooth:0.5, smooth: 0.5,
symbol: 'none', symbol: 'none',
lineStyle: { lineStyle: {
color: '#95E1E9', color: '#95E1E9',
...@@ -217,11 +200,11 @@ let app= new Vue({ ...@@ -217,11 +200,11 @@ let app= new Vue({
] ]
} }
], ],
initEchartsCategoryData:[ initEchartsCategoryData: [
{ {
name: '分类', name: '分类',
type: 'pie', type: 'pie',
center:['30%','50%'], center: ['30%', '50%'],
radius: ['65%', '90%'], radius: ['65%', '90%'],
avoidLabelOverlap: false, avoidLabelOverlap: false,
label: { label: {
...@@ -235,50 +218,76 @@ let app= new Vue({ ...@@ -235,50 +218,76 @@ let app= new Vue({
fontWeight: 'bold' fontWeight: 'bold'
} }
}, },
itemStyle:{ itemStyle: {
borderWidth:4, borderWidth: 4,
borderColor:'white' borderColor: 'white'
}, },
labelLine: { labelLine: {
show: false show: false
}, },
data: [ data: [
{value: 335, name: 'MEN',price:123,itemStyle:{color: '#3AA0FF'}}, {value: 335, name: 'MEN', price: 123, itemStyle: {color: '#3AA0FF'}},
{value: 310, name: 'WOMEN',price:123,itemStyle:{color: '#975FE4'}}, {value: 310, name: 'WOMEN', price: 123, itemStyle: {color: '#975FE4'}},
{value: 234, name: 'Afri Home',price:123,itemStyle:{color: '#F2637B'}}, {value: 234, name: 'Afri Home', price: 123, itemStyle: {color: '#F2637B'}},
{value: 135, name: 'Hair',price:123,itemStyle:{color: '#4DCB73'}}, {value: 135, name: 'Hair', price: 123, itemStyle: {color: '#4DCB73'}},
{value: 1548, name: 'Sport',price:123,itemStyle:{color: '#36CBCB'}} {value: 1548, name: 'Sport', price: 123, itemStyle: {color: '#36CBCB'}}
] ]
} }
] ]
} }
}, },
computed:{ computed: {
animatedNumberForturnover(){ animatedNumberForturnover() {
return this.ForturnoverNumber.toFixed(0); return this.ForturnoverNumber.toFixed(0);
}, },
animatedNumberPV(){ animatedNumberPV() {
return this.PVNumber.toFixed(0); return this.PVNumber.toFixed(0);
}, },
animatedNumberFrequencyOfPayment(){ animatedNumberFrequencyOfPayment() {
return this.FrequencyOfPaymentNumber.toFixed(0); return this.FrequencyOfPaymentNumber.toFixed(0);
} }
}, },
methods:{ methods: {
templateMethod(url) {
$.get(url, res => {
this.initEchartsMiddleData[0].data = []
let objList = JSON.parse(res).list
objList.map(res => {
this.initEchartsMiddleData[0].data.push([res.date, res.num])
})
this.initEchartsMiddle();
})
},
getDayRegistered() {
let url = '../tbcfuserinfo/getDayRegistered'
this.templateMethod(url);
},
getWeekRegistered() {
let url = '../tbcfuserinfo/getWeekRegistered'
this.templateMethod(url);
},
getMonthRegistered() {
let url = '../tbcfuserinfo/getMonthRegistered'
this.templateMethod(url);
},
getYearRegistered() {
let url = '../tbcfuserinfo/getYearRegistered'
this.templateMethod(url);
},
/* 访问量 */ /* 访问量 */
initEchartsPV(){ initEchartsPV() {
var app = echarts.init(document.getElementById('echartsPV')); var app = echarts.init(document.getElementById('echartsPV'));
option = { option = {
xAxis: { xAxis: {
type: 'category', type: 'category',
boundaryGap: false, boundaryGap: false,
show:false show: false
}, },
yAxis: { yAxis: {
type: 'value', type: 'value',
boundaryGap: [0, '30%'], boundaryGap: [0, '30%'],
splitLine:{show: false}, splitLine: {show: false},
show:false show: false
}, },
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
...@@ -286,19 +295,19 @@ let app= new Vue({ ...@@ -286,19 +295,19 @@ let app= new Vue({
"type": "shadow" // 默认为直线，可选为："line" | "shadow" "type": "shadow" // 默认为直线，可选为："line" | "shadow"
} }
}, },
grid:{ grid: {
x:0, x: 0,
y:0, y: 0,
x2:0, x2: 0,
y2:10, y2: 10,
borderWidth:1 borderWidth: 1
}, },
series: [...this.initEchartsPVData] series: [...this.initEchartsPVData]
}; };
app.setOption(option); app.setOption(option);
}, },
/* 支付笔数 */ /* 支付笔数 */
initEchartsPayTheAmount(){ initEchartsPayTheAmount() {
var app = echarts.init(document.getElementById('echartsPayTheAmount')); var app = echarts.init(document.getElementById('echartsPayTheAmount'));
option = { option = {
color: ['#3BA1FF'], color: ['#3BA1FF'],
...@@ -320,27 +329,27 @@ let app= new Vue({ ...@@ -320,27 +329,27 @@ let app= new Vue({
axisTick: { axisTick: {
alignWithLabel: true alignWithLabel: true
}, },
show:false show: false
}, },
], ],
yAxis: [ yAxis: [
{ {
type: 'value', type: 'value',
show:false show: false
} }
], ],
grid:{ grid: {
x:0, x: 0,
y:0, y: 0,
x2:0, x2: 0,
y2:10, y2: 10,
borderWidth:1 borderWidth: 1
}, },
series: [...this.initEchartsPayTheAmountData] series: [...this.initEchartsPayTheAmountData]
}; };
app.setOption(option); app.setOption(option);
}, },
initEchartsMiddle(){ initEchartsMiddle() {
var app = echarts.init(document.getElementById('middleEcharts-in')); var app = echarts.init(document.getElementById('middleEcharts-in'));
option = { option = {
color: ['#3BA1FF'], color: ['#3BA1FF'],
...@@ -363,49 +372,49 @@ let app= new Vue({ ...@@ -363,49 +372,49 @@ let app= new Vue({
alignWithLabel: true alignWithLabel: true
}, },
show:true show: true
}, },
], ],
yAxis: [ yAxis: [
{ {
type: 'value', type: 'value',
show:true, show: true,
axisTick: { axisTick: {
show: true, show: true,
}, },
splitLine :{ //网格线 splitLine: { //网格线
lineStyle:{ lineStyle: {
type:'dashed' //设置网格线类型 dotted：虚线 solid:实线 type: 'dashed' //设置网格线类型 dotted：虚线 solid:实线
}, },
show:true //隐藏或显示 show: true //隐藏或显示
}, },
} }
], ],
grid:{ grid: {
x:40, x: 40,
y:40, y: 40,
x2:40, x2: 40,
y2:40, y2: 40,
borderWidth:1 borderWidth: 1
}, },
series: [...this.initEchartsMiddleData] series: [...this.initEchartsMiddleData]
}; };
app.setOption(option); app.setOption(option);
}, },
/* 搜索用户数 */ /* 搜索用户数 */
initEchartsMiddlebottomUserSearchSum(){ initEchartsMiddlebottomUserSearchSum() {
var app = echarts.init(document.getElementById('bottom-echats-user-search-sum')); var app = echarts.init(document.getElementById('bottom-echats-user-search-sum'));
option = { option = {
xAxis: { xAxis: {
type: 'category', type: 'category',
boundaryGap: false, boundaryGap: false,
show:false show: false
}, },
yAxis: { yAxis: {
type: 'value', type: 'value',
boundaryGap: [0, '30%'], boundaryGap: [0, '30%'],
splitLine:{show: false}, splitLine: {show: false},
show:false show: false
}, },
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
...@@ -413,31 +422,31 @@ let app= new Vue({ ...@@ -413,31 +422,31 @@ let app= new Vue({
"type": "shadow" // 默认为直线，可选为："line" | "shadow" "type": "shadow" // 默认为直线，可选为："line" | "shadow"
} }
}, },
grid:{ grid: {
x:0, x: 0,
y:0, y: 0,
x2:0, x2: 0,
y2:0, y2: 0,
borderWidth:1 borderWidth: 1
}, },
series: [...this.initEchartsMiddlebottomUserSearchSumData] series: [...this.initEchartsMiddlebottomUserSearchSumData]
}; };
app.setOption(option); app.setOption(option);
}, },
/* 人均搜索次数 */ /* 人均搜索次数 */
initEchartsMiddlebottomUserSearchPerCapita(){ initEchartsMiddlebottomUserSearchPerCapita() {
var app = echarts.init(document.getElementById('bottom-echats-user-search-per-capita')); var app = echarts.init(document.getElementById('bottom-echats-user-search-per-capita'));
option = { option = {
xAxis: { xAxis: {
type: 'category', type: 'category',
boundaryGap: false, boundaryGap: false,
show:false show: false
}, },
yAxis: { yAxis: {
type: 'value', type: 'value',
boundaryGap: [0, '30%'], boundaryGap: [0, '30%'],
splitLine:{show: false}, splitLine: {show: false},
show:false show: false
}, },
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
...@@ -445,18 +454,18 @@ let app= new Vue({ ...@@ -445,18 +454,18 @@ let app= new Vue({
"type": "shadow" // 默认为直线，可选为："line" | "shadow" "type": "shadow" // 默认为直线，可选为："line" | "shadow"
} }
}, },
grid:{ grid: {
x:0, x: 0,
y:0, y: 0,
x2:0, x2: 0,
y2:0, y2: 0,
borderWidth:1 borderWidth: 1
}, },
series: [...this.initEchartsMiddlebottomUserSearchPerCapitaData] series: [...this.initEchartsMiddlebottomUserSearchPerCapitaData]
}; };
app.setOption(option); app.setOption(option);
}, },
initEchartsCategory(){ initEchartsCategory() {
var app = echarts.init(document.getElementById('category-echarts')); var app = echarts.init(document.getElementById('category-echarts'));
let _this = this; let _this = this;
option = { option = {
...@@ -468,33 +477,33 @@ let app= new Vue({ ...@@ -468,33 +477,33 @@ let app= new Vue({
legend: { legend: {
orient: 'vertical', orient: 'vertical',
left: 'right', left: 'right',
top:'center', top: 'center',
icon:"circle", icon: "circle",
data: ['MEN', 'WOMEN', 'Afri Home', 'Hair', 'Sport'], data: ['MEN', 'WOMEN', 'Afri Home', 'Hair', 'Sport'],
align:'left', align: 'left',
textStyle:{ textStyle: {
rich:{ rich: {
a:{ a: {
width:60, width: 60,
fontSize:14, fontSize: 14,
color:"rgba(0, 0, 0, 0.647058823529412)", color: "rgba(0, 0, 0, 0.647058823529412)",
padding:10, padding: 10,
}, },
b:{ b: {
width:40, width: 40,
fontSize:14, fontSize: 14,
color:"rgba(0, 0, 0, 0.3)" color: "rgba(0, 0, 0, 0.3)"
}, },
c:{ c: {
width:40, width: 40,
fontSize:14, fontSize: 14,
color:"#333" color: "#333"
} }
} }
}, },
formatter:function(name){ formatter: function (name) {
var data = _this.initEchartsCategoryData[0].data; var data = _this.initEchartsCategoryData[0].data;
var total = 0; var total = 0;
var tarValue; var tarValue;
...@@ -507,61 +516,75 @@ let app= new Vue({ ...@@ -507,61 +516,75 @@ let app= new Vue({
price = data[i].price; price = data[i].price;
} }
var p = Math.round(((tarValue / total) * 100)).toFixed(2); var p = Math.round(((tarValue / total) * 100)).toFixed(2);
let arr=["{a|"+name.slice(0,4)+"..}{b|"+p+"%} {c|￥"+price+"}"] let arr = ["{a|" + name.slice(0, 4) + "..}{b|" + p + "%} {c|￥" + price + "}"]
return arr; return arr;
}, },
// show:false // show:false
}, },
grid:{ grid: {
x:0, x: 0,
y:0, y: 0,
x2:0, x2: 0,
y2:0, y2: 0,
borderWidth:1 borderWidth: 1
}, },
series: [...this.initEchartsCategoryData] series: [...this.initEchartsCategoryData]
}; };
app.setOption(option); app.setOption(option);
}, },
changeMiddelActive(element,index){ changeMiddelActive(element, index) {
this.middleOption.forEach(item=>{ this.middleOption.forEach(item => {
item.isActive = false; item.isActive = false;
}) })
this.middleOption[index].isActive = true; this.middleOption[index].isActive = true;
this.$refs.middleEachrtsTitle.innerText = element.title+'趋势'; this.$refs.middleEachrtsTitle.innerText = element.title + '趋势';
this.initEchartsMiddleData[0].data.push(['2019-10-1'+Math.round(Math.random()*100), Math.round(Math.random()*1000)]) // this.initEchartsMiddleData[0].data.push(['2019-10-1'+Math.round(Math.random()*100), Math.round(Math.random()*1000)])
$.get('../tbcfuserinfo/getDailyRegistered', res => {
this.initEchartsMiddleData.data = []
let objList = JSON.parse(res).list
objList.map(res => {
this.initEchartsMiddleData[0].data.push([res.date, res.num])
})
this.initEchartsMiddle(); this.initEchartsMiddle();
})
}, },
changeBottomSelect(element,index){ changeBottomSelect(element, index) {
this.bottomOption.forEach(item=>{ this.bottomOption.forEach(item => {
item.isActive = false; item.isActive = false;
}) })
this.bottomOption[index].isActive = true; this.bottomOption[index].isActive = true;
if(element.title==='热门搜索'){ if (element.title === '热门搜索') {
this.$refs.userSearchSum.innerText='搜索用户数' this.$refs.userSearchSum.innerText = '搜索用户数'
this.$refs.userSearchPerCapita.innerText='人均搜索次数' this.$refs.userSearchPerCapita.innerText = '人均搜索次数'
}else{ } else {
this.$refs.userSearchSum.innerText='下单用户数' this.$refs.userSearchSum.innerText = '下单用户数'
this.$refs.userSearchPerCapita.innerText='人均流量次数' this.$refs.userSearchPerCapita.innerText = '人均流量次数'
} }
}, },
/* 中间模块日期 */ /* 中间模块日期 */
changeDate(e){ changeDate(e) {
console.log(e) if (this.middleOption[0].isActive) {
let url = '../tbcfuserinfo/getRegisteredByDate?start=' + e[0] + '&end=' + e[1];
this.templateMethod(url);
}
} }
}, },
created(){ created() {
}, },
mounted(){ mounted() {
this.initEchartsPV(); this.initEchartsPV();
this.initEchartsPayTheAmount(); this.initEchartsPayTheAmount();
this.initEchartsMiddle(); this.initEchartsMiddle();
this.initEchartsMiddlebottomUserSearchSum(); this.initEchartsMiddlebottomUserSearchSum();
this.initEchartsMiddlebottomUserSearchPerCapita(); this.initEchartsMiddlebottomUserSearchPerCapita();
this.initEchartsCategory(); this.initEchartsCategory();
TweenLite.to(this.$data, 1, { ForturnoverNumber: 1445 }); TweenLite.to(this.$data, 1, {ForturnoverNumber: 2649});
TweenLite.to(this.$data, 1, { PVNumber: 2340 }); TweenLite.to(this.$data, 1, {PVNumber: 23404232});
TweenLite.to(this.$data, 1, { FrequencyOfPaymentNumber: 2344 }); TweenLite.to(this.$data, 1, {FrequencyOfPaymentNumber: 23440});
this.changeMiddelActive({
isActive: true,
title: '注册量'
}, 0);
} }
}) })
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论