代码拉取完成，页面将自动刷新
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="keywords" content="鲸鱼">
<title>营销分析--活动分析</title>
<link rel="stylesheet" href="css/daterangepicker.css">
<link rel="stylesheet" href="css/style.css">
<!--<script type="text/javascript" src="js/jquery.js"></script>-->
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/moment.min.js"></script>
<script type="text/javascript" src="js/jquery.daterangepicker.js"></script>
<script type="text/javascript" src="js/highchart.js"></script>
<script type="text/javascript" src="js/grid.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript" src="js/table/jquery.table2excel.js"></script>
<!--<script type="text/javascript" src="build.js"></script>-->
<style>
.search-area .date{margin-left: 0;}
.search-area .date .searchBox{text-indent: 5px;text-align: left;color: #666;margin-left: 20px;font-size: 12px;}
.searchBox::-webkit-input-placeholder { color:#666;font-family: "微软雅黑";}
.searchBox:-moz-placeholder { color:#666;font-family: "微软雅黑";}
.searchBox::-moz-placeholder { color:#666;font-family: "微软雅黑";}
.searchBox:-ms-input-placeholder { color:#666;font-family: "微软雅黑";}
.tablebox{max-width: 96%;overflow-x:auto;margin:0 auto; position: relative;}
.tablebox .data-table{width: 150%;margin-top: 0;}
.tablediv {
float: left;
width: 95%;
max-height: inherit;
}
.right-more{float:right;width:5%;right: 0;background: #fff;top: 0;text-align: center;border: 1px solid #000;border-bottom: 1px solid #000;box-sizing: border-box;}
.right-more li{background: url(images/more.png) no-repeat center;height: 27px;border-bottom: 1px solid #000;}
.right-more li:hover{background: url(images/more-hover.png) no-repeat center;cursor: pointer;}
.right-more .li1{line-height: 55px;background: #ccc0da;height: 55px;font-weight: bold;color: #000;}
.right-more .li1:hover{background: #ccc0da;cursor: inherit;}
#iframe{
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="analyseBox">
<p class="head-title">投资金额分析</p>
<div class="search-area">
<div class="area1">
<div class="date">
<label for="date-select">选择月份：</label><input type="text" id="date-select" size="15">
<input type="text" placeholder="输入活动标题搜索" class="searchBox">
</div>
</div>
<div class="area2">
<span>统计区域：</span>
<div class="divs">
<div class="provinces">
<ul>
<li class="all-pros">全部省</li>
<li>福建</li>
<li>广东</li>
</ul>
</div>
<div class="citys">
<ul>
<li class="all-citys on">全部市</li>
</ul>
</div>
</div>
</div>
<div>
<input type="button" value="查询" class="search" onclick="checkInfo2()">
</div>
</div>
<!--hide-->
<div class="show-area ">
<div class="box">
<div class="opespan">
<p class="chart-title">活动列表</p>
<p class="operator"><span>全屏查看</span></p>
</div>
<div class="sexdiv">
<a href="javascript:;" class="export" id="export">导出数据↓</a>
</div>
<!--表格-->
<div class="tablediv" id="activeList"></div>
<!--更多-->
<div class="right-more" id="rightMoreList"></div>
</div>
</div>
</div>
<div id="iframe" class="hide" data-list=""></div>
</body>
<script>
/**
* 格式化时间
* @param {String} format 时间格式 默认输出 2016/08/9
*/
Date.prototype.format = function(format) {
format = format || 'yyyy/MM/d'
var date = {
"M+": this.getMonth() + 1,
"d+": this.getDate(),
"h+": this.getHours(),
"m+": this.getMinutes(),
"s+": this.getSeconds(),
"q+": Math.floor((this.getMonth() + 3) / 3),
"S+": this.getMilliseconds()
};
if (/(y+)/i.test(format)) {
format = format.replace(RegExp.$1, (this.getFullYear() + '').substr(4 - RegExp.$1.length));
}
for (var k in date) {
if (new RegExp("(" + k + ")").test(format)) {
format = format.replace(RegExp.$1, RegExp.$1.length == 1
? date[k] : ("00" + date[k]).substr(("" + date[k]).length));
}
}
return format;
}
// function isMonthRange(str, monthNum){
// monthNum = monthNum || 6
// format = format || 'yyyy-MM-dd'
// var _data = new Date(str)
// var _dataNow = new Date()
// var timestamp = _data.getTime()
// var timestampNow = _dataNow.getTime()
// }
/**
* 比较两个时间
* @param {String} parameter 时间格式 2016-08-9
* @param {String} timeEnd 结束时间
* @param {String} monthNum 判断两个时间段是否相差 m 个月
* @param {bool} return
*/
function isMonthRange(timeStart, timeEnd, monthNum) {
monthNum = monthNum || 6
timeStart = new Date(timeStart)
timeEnd = new Date(timeEnd)
var diffyear = timeEnd.getFullYear() - timeStart.getFullYear() ;
var diffmonth = diffyear * 12 + timeEnd.getMonth() - timeStart.getMonth() ;
if(diffmonth < 0 ){
return false ;
}
var diffDay = timeEnd.getDate() - timeStart.getDate() ;
if(diffmonth < monthNum || (diffmonth == monthNum && diffDay <= 0)){
if(diffmonth == monthNum && diffDay == 0){
var timeA = timeStart.getHours()*3600+60*timeStart.getMinutes()+timeStart.getSeconds();
var timeB = timeEnd.getHours()*3600+60*timeEnd.getMinutes()+timeEnd.getSeconds();
if(timeB-timeA > 0){
return false;
}
}
return true ;
}
return false ;
}
var aaaa = isMonthRange('2014-2-12', '2014-04-11')
console.log(aaaa)
function getDays(day){
day = day.toString()
var ye, mo, da, days;
if (day.length == 8) {
ye = day.substring(0, 4)
mo = day.substring(4, 6).replace("0", "")
da = day.substring(6, 8).replace("0", "")
days = ye+"年"+mo+"月"+da +"日"
} else {
var days = "未知时间"
}
return days
}
$(function(){
//全局的AJAX访问，处理AJAX清求时SESSION超时
$.ajaxSetup({
contentType : "application/x-www-form-urlencoded;charset=utf-8",
beforeSend : function(XMLHttpRequest, textStatus){
//通过XMLHttpRequest取得响应头，sessionstatus
var sessionstatus = XMLHttpRequest.getResponseHeader("sessionstatus");
console.log(textStatus)
console.log(sessionstatus)
if(sessionstatus == "timeout"){
//跳转的登录页面
window.location.replace('${ctx}/login');
return;
}
}
});
// console.log( new Date('20170606').format('yyyy年MM月dd日'));
// console.log(getDays(25415351));
$(document).on("click", ".right-more li", function () {
$("#iframe").empty();
// console.log($(this).attr('data-c'))
let dataC = $(this).attr('data-c')
var iframe = '<iframe id="iframeBox" data-c="' + dataC + '" src="./营销分析-更多分析.html" width="100%" height="100%" scrolling="NO" frameborder="100%" ></iframe>'
$('#iframe').html(iframe).removeClass()
})
//日期选择
$('#date-select').dateRangePicker({
autoClose: true,
singleDate : true,
showShortcuts: false,
beforeShowDay: function(t)
{
var n = new Date();
n.setDate(n.getDate());
var m = n.getTime();
var valid = !(t.getTime()>m); //disable saturday and sunday
var _class = '';
var _tooltip = valid ? '' : '超过当天日期不可选';
return [valid,_class,_tooltip];
}
});
var d = new Date().Format('yyyy-MM');
$('#date-select').val(d);
// 请求
$.ajax({
type : "GET", //请求方式
// url : "/jinr-bi-web/activity/selectActivityAnalyze", //请求路径
url : "./json/a.json", //请求路径
traditional: true,
data : { //请求参数
month: '2016-08',
eventName: '红包',
province: '北京',
city : '北京'
},
dataType: "json",
success : function(msg) { //异步请求成功执行的回调函数
var thead = [
['序号','活动名称','红包总数','红包金额','参与人数','新注册用户','新增首投用户','复投用户','活动期限',],
['注册人数','绑卡人数','注册绑卡率','新增首投人数','有效新增首投人数','有效投资占比','复投人数','有效复投人数','复投占比','开始日期','结束日期','在线天数',],
]
var tbodyArr = msg.eventsList
$('#activeList').html(createTableActiveList(tbodyArr))
$('#rightMoreList').html(createMoreList(tbodyArr))
exportTable('#export', '.table', 'table')
},
error : function(XMLHttpRequest, textStatus, errorThrown) {
//alert(textStatus);
//alert("失败了"+errorThrown)
}
});
// $.ajax({
//// url : "/jinr-bi-web/activity/selectActivityAnalyze",
// url : "/jinr-bi-web/operation/InvestAmount",
// type : "POST",
// data : { //请求参数
//// month: '2017-06',
//// eventName: '红包',
//// province: '福建',
//// city : '全部市'
// statisticType:'小时',
// startDate:'2017-05-29',
// endDate: '2017-06-04',
// province:'福建',
// city:'厦门',
// productCodes: ['00000008', '00000004','00000005']
// },
// success : function(data) {
// // 填充表格(活动列表)
// var a1 = eval(data.eventsList);
// var tableStr1 = '';
// for (var j = 0; j < a1.length; j++) {
// var c1 = a1[j];
// tableStr1 += '<tr>';
// var b1 = [ c1.id, c1.eventName, c1.hbTotal, c1.hbMoneys,
// c1.hbUsers, c1.newRegUsers, c1.newCardUsers,
// c1.newRegCardRate, c1.firstUsers, c1.firstValidUsers,
// c1.firstValidInvestmentRate, c1.repeatUsers, c1.repeatValidUsers,
// c1.repeatValidInvestmentRate, c1.eventStime, c1.eventEtime,
// c1.onlineDays ];
// for (var i = 0; i < b1.length; i++) {
// tableStr1 += '<td>' + b1[i] + '</td>';
// }
// tableStr1 += '</tr>';
// // alert(tableStr);
// }
// $('#events').append(tableStr1);
// // alert("success++++++++++++++++++++++++++++++++++++++");
// }
// });
});
/**
* 查询操作
*/
function checkInfo2(){
var date = $('#date-select').val();
var searchCon = $('.searchBox').val();
var province = $('.provinces').find('li.on').text();
if(date == '' || date == null){
alert('月份不能为空');
}else if(searchCon == '' || searchCon == null){
alert('搜索内容不能为空');
}else if(province == ''||province == null){
alert('省份不能为空');
}else{
$('.show-area').show();
}
}
/**
* 导出数据表格
* @param {字符串} eventObject 事件对象 点击谁
* @param {字符串} tableDiv 选择导出对象
* @param {字符串} FileName 导出文件名 默认 FileName+时间
*/
function exportTable(eventObject, tableDiv, FileName) {
FileName = FileName || "myFileName" + new Date().toISOString().replace(/[\-\:\.]/g, ""),
// 导出表格
$(eventObject).on('click', function () {
$(tableDiv).table2excel({
exclude: ".noExl",
name: "Excel Document Name",
filename: FileName,
fileext: ".xls",
});
})
}
/**
* 创建活动列表表格
* @param {Array} theadArr 表头数组
* @param tbodyArr 数据
* return 整个表格
*/
function createTableActiveList(tbodyArr, theadArr) {
var _table;
_table ='<table class="table" cellpadding="0" cellspacing="0" border="1" border-spacing="0" bordercolor="#000">'
_table += '<thead>'
_table += '<tr>'
_table += '<th rowspan="2" >序号</th>'
_table += '<th rowspan="2" >活动名称</th>'
_table += '<th rowspan="2" >红包总数</th>'
_table += '<th rowspan="2" >红包金额</th>'
_table += '<th rowspan="2" >参与人数</th>'
_table += '<th colspan="3" >新注册用户</th>'
_table += '<th colspan="3" >新增首投用户</th>'
_table += '<th colspan="3" >复投用户</th>'
_table += '<th colspan="3" >活动期限</th>'
_table += '</tr>'
_table += '<tr >'
_table += '<th >注册人数</th>'
_table += '<th >绑卡人数</th>'
_table += '<th >注册绑卡率</th>'
_table += '<th >新增首投人数</th>'
_table += '<th >有效新增首投人数</th>'
_table += '<th >有效投资占比</th>'
_table += '<th >复投人数</th>'
_table += '<th >有效复投人数</th>'
_table += '<th >复投占比</th>'
_table += '<th >开始日期</th>'
_table += '<th >结束日期</th>'
_table += '<th >在线天数</th>'
_table += '</tr>'
_table += '</thead><tbody>'
tbodyArr.forEach(function(ele,index){
_table += '<tr>'
_table += '<td>' + ele['id'] + '</td>'
_table += '<td>' + ele['eventName'] + '</td>'
_table += '<td>' + ele['hbTotal'] + '</td>'
_table += '<td>' + formatCurrency(ele['hbMoneys']) + '</td>'
_table += '<td>' + ele['hbUsers'] + '</td>'
_table += '<td>' + ele['newRegUsers'] + '</td>'
_table += '<td>' + ele['newCardUsers'] + '</td>'
_table += '<td>' + ele['newRegCardRate'] + '</td>'
_table += '<td>' + ele['firstUsers'] + '</td>'
_table += '<td>' + ele['firstValidUsers'] + '</td>'
_table += '<td>' + ele['firstValidInvestmentRate'] + '</td>'
_table += '<td>' + ele['repeatUsers'] + '</td>'
_table += '<td>' + ele['repeatValidUsers'] + '</td>'
_table += '<td>' + ele['repeatValidInvestmentRate'] + '</td>'
_table += '<td>' + (new Date(ele['eventStime']).format()) + '</td>'
_table += '<td>' + (new Date(ele['eventEtime']).format()) + '</td>'
_table += '<td>' + ele['onlineDays'] + '</td>'
_table += '</tr>'
})
_table +=`</tbody></table>`
return _table
}
/**
* 创建活动列表更多list
* @param tbodyArr
*/
function createMoreList(tbodyArr) {
var _moreLi;
_moreLi = '<ul><li class="li1">更多</li>'
tbodyArr.forEach(function(ele,index){
let dataLi = 'id=' + ele['id'] + '&'
dataLi += 'province=' + ele['id'] + '&'
dataLi += 'city=' + ele['id'] + '&'
dataLi += 'nowTimestamp=' + (new Date(ele['eventEtime']).format()) + '&'
dataLi += 'eventEtime=' + (new Date(ele['eventStime']).format('yyyy-MM-d hh:mm:ss')) + '&'
dataLi += 'firstUsers=' + ele['repeatUsers'] + '&'
dataLi += 'firstValidUsers=' + ele['repeatValidUsers'] + '&'
dataLi += 'repeatUsers=' + ele['repeatValidUsers'] + '&'
dataLi += 'repeatValidUsers=' + ele['repeatValidUsers']
_moreLi += '<li data-c="'+ dataLi + '"></li>'
})
_moreLi += '</ul>'
return _moreLi
}
/**
* 关闭iframe窗口
*/
function close() {
$("iframe")
$('#iframe').addClass('hide').empty();
}
function monthDiff(d1, d2) {
var months;
d1 = new Date(d1)
d2 = new Date(d2)
months = (d2.getFullYear() - d1.getFullYear()) * 12;
months -= d1.getMonth() + 1;
months += d2.getMonth();
return months <= 0 ? 0 : months;
}
// console.log(monthDiff('2010/4', '2010/12'))
function dateDiff(date1, date2, type) {
date1 = typeof date1 == 'string' ? new Date(date1) : date1;
date1 = date1.getTime();
date2 = typeof date2 == 'string' ? new Date(date2) : date2;
date2 = date2.getTime();
type = type || 'hour';
var diffValue = Math.abs(date2 - date1);
var second = 1000,
minute = second * 60,
hour = minute * 60,
day = hour * 24,
month = day * 30,
year = month * 12;
var timeType = {
second: second,
minute: minute,
hour: hour,
day: day,
month: month,
year: year
};
return Math.ceil(diffValue / timeType[type]);
}
console.log(dateDiff('2010/4/15', '2010/12/4', 'month'))
</script>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手