<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>企业统计</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" media="all">
<link rel="stylesheet" href="../../layuiadmin/style/admin.css" media="all">
</head>
<style>
.jgclass {
margin-top: 10px;
}
.btnClass {
margin-left: 7rem;
}
.layui-inline {
margin-bottom: 0 !important
}
.dateClass {
margin-left: 2rem;
width: 15rem;
height: 34px;
}
.selectClass {
display: inline-block;
width: 17rem !important;
}
#entChart {
widows: 100%;
height: 400px;
overflow: hidden;
clear: both;
}
.btn-radius {
border-radius: 5px;
}
.bj_btn {
background: #1890FF;
color: white;
background-size: 4.5rem;
}
.tabClass {
margin-top: 10px;
}
.tiaojian {
cursor: pointer;
display: block;
width: 500px;
text-align: center;
font-weight: bold;
padding: 6px 0px;
}
.nonediv {
height: 153px;
width: 100%;
}
.allbgmore {
display: none;
position: relative;
overflow: hidden;
width: 500px;
padding: 0px 0px 8px 0px;
box-sizing: border-box;
border: 1px solid #E1E1E1;
}
.allbgmore .layui-form-item {
display: block;
margin: 0px 10px;
clear: none !important;
float: left;
}
.eachchech {
display: block;
overflow: hidden;
clear: both;
width: 120px;
float: left;
position: relative;
}
.eachchech i {
display: inline-block;
position: absolute;
top: 10px;
right: 0px;
}
</style>
<body>
<div class="layui-fluid">
<div class="layui-row layui-col-space15">
<div class="layui-col-sm12">
<div class="layui-card">
<div class="layui-card-header">
<h4><b>企业统计</b></h4>
</div>
<div class="layui-card-body">
<form action="" class="layui-form">
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">时间:</label>
<button type="button" class="layui-btn layui-btn-primary btn-radius"
id="today">今日</button>
<button type="button" class="layui-btn layui-btn-primary btn-radius"
id="yesterday">昨日</button>
<button type="button" class="layui-btn layui-btn-primary btn-radius"
id="week">最近七天</button>
<button type="button" class="layui-btn layui-btn-primary btn-radius bj_btn"
id="month">最近30天</button>
<div class="layui-inline">
<input type="text" class="dateClass" id="date"
placeholder=" 开始时间 ~ 结束时间 "><i style="margin-left: -25px"
class="layui-icon layui-icon-date"></i>
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-col-md6">
<label class="layui-form-label">企业:</label>
<div class="selectClass">
<select id="selectList" name="modules" lay-verify="required" lay-search="">
<option value="">输入或选择要查询的企业(默认全部)</option>
</select>
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<div class="btnClass">
<button type="button" class="layui-btn layui-btn-normal btn-radius"
id="query">筛选</button>
<button type="button" class="layui-btn layui-btn-warm btn-radius"
id="download">导出</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="layui-col-sm12">
<div class="layui-card">
<form class="layui-form">
<div>
<div class="layui-tab layui-tab-brief">
<ul class=" layui-tab-title" style="text-align: center">
<li>用户</li>
<li>执照</li>
<li>佣金</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item">
<div class="layui-form-item" style="margin-left: 41%">
<span class="eachchech tj"><input type="checkbox" name="username"
title="提交审核" value="tj" lay-skin="primary"><i
class="layui-icon layui-icon-tips" title="用户提交审核的人数"></i></span>
<span class="eachchech"><input type="checkbox" name="username" title="审核通过"
value="tg" lay-skin="primary" checked class="tg"><i
class="layui-icon layui-icon-tips" title="签约成功且审核通过的数量"></i></span>
<span class="eachchech"><input type="checkbox" name="username" title="企业淘汰"
value="jb" lay-skin="primary"><i class="layui-icon layui-icon-tips"
title="企业淘汰的用户数"></i></span>
</div>
</div>
<div class="layui-tab-item">
<div class="layui-form-item" style="margin-left: 47%">
<span class="eachchech"><input type="checkbox" name="license" title="提交注册"
value="licenseSQ" lay-skin="primary"><i
class="layui-icon layui-icon-tips" title="提交申请数量"></i></span>
<span class="eachchech"><input type="checkbox" name="license" title="已注册"
value="licenseZC" lay-skin="primary" checked class="licenseZC"><i
class="layui-icon layui-icon-tips" title="注册成功的数量"></i></span>
</div>
</div>
<div class="layui-tab-item">
<div class="layui-form-item" style="margin-left: 53%">
<span class="eachchech"><input type="checkbox" name="commission"
title="发放金额" value="commission" lay-skin="primary" checked
class="commission"><i class="layui-icon layui-icon-tips"
title="发放成功的佣金额"></i></span>
<span class="eachchech"><input type="checkbox" name="commission"
title="发放笔数" value="num" lay-skin="primary"><i
class="layui-icon layui-icon-tips" title="发放成功的佣金笔数"></i></span>
<span class="eachchech"><input type="checkbox" name="commission" title="服务费"
value="servicefee" lay-skin="primary"><i
class="layui-icon layui-icon-tips"
title="佣金发放成功计算的服务费金额"></i></span>
<span class="eachchech"><input type="checkbox" name="commission" title="税费"
value="taxfee" lay-skin="primary"><i
class="layui-icon layui-icon-tips" title="佣金发放成功计算的税费金额"></i></span>
</div>
</div>
</div>
</div>
</div>
</form>
<div class="layui-card-body">
<div class="layui-card-body">
<div id="entChart"></div>
<div class="tabClass">
<table id="entTable"></table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="../../layuiadmin/layui/layui.js"></script>
<script src="../../layuiadmin/lib/extend/echarts.min.js"></script>
<script>
layui.config({
base: '../../layuiadmin/' //静态资源所在路径
}).extend({
index: 'lib/index'
}).use(['index', 'cookie', 'layer', 'element', 'table', 'form', 'laydate', 'moneyFormat'], function () {
var laydate = layui.laydate,
table = layui.table,
cookie = layui.cookie,
form = layui.form,
token = cookie.get("token"),
mf = layui.moneyFormat,
$ = layui.$,
element = layui.element,
startDate = getDay(-29), // 默认查询30天数据
endDate = getDay(0)
laydate.render({
elem: '#date',
range: true,
done: function (value, date) {
startDate = value.substring(0, 10);
endDate = value.substring(13, 25);
}
});
query(); // 默认查询30天数据
// 获取企业下拉数据
$.ajax({
url: layui.setter.req_url + 'generalBackstage/enterpriseNameList',
type: 'post',
headers: {
token,
token
},
dataType: 'json',
success: (r) => {
if (r.code == 200) {
var data = r.data;
var selectList = document.getElementById("selectList"); //server为select定义的id
for (var d in data) {
var option = document.createElement("option"); // 创建添加option属性
option.setAttribute("value", data[d].id); // 给option的value添加值
option.innerText = data[d].name; // 打印option对应的纯文本
selectList.appendChild(option); //给select添加option子标签
form.render("select"); // 刷性select，显示出数据
}
}
}
});
function getDay(day) {
var today = new Date();
var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day;
today.setTime(targetday_milliseconds);
var tYear = today.getFullYear();
var tMonth = today.getMonth();
var tDate = today.getDate();
tMonth = doHandleMonth(tMonth + 1);
tDate = doHandleMonth(tDate);
return tYear + "-" + tMonth + "-" + tDate;
}
function doHandleMonth(month) {
var m = month;
if (month.toString().length == 1) {
m = "0" + month;
}
return m;
}
$('#today').click(function () {
$(this).addClass('bj_btn');
$(this).siblings().removeClass("bj_btn");
$('#date').val("");
startDate = getDay(0);
endDate = getDay(0);
})
$('#yesterday').click(function () {
$(this).addClass('bj_btn');
$(this).siblings().removeClass("bj_btn");
$('#date').val("");
startDate = getDay(-1);
endDate = getDay(-1);
})
$('#week').click(function () {
$(this).addClass('bj_btn');
$(this).siblings().removeClass("bj_btn");
$('#date').val("");
startDate = getDay(-6);
endDate = getDay(0);
})
$('#month').click(function () {
$(this).addClass('bj_btn');
$(this).siblings().removeClass("bj_btn");
$('#date').val("");
startDate = getDay(-29);
endDate = getDay(0);
})
var entChart = echarts.init(document.getElementById('entChart'));
var totalData = {};
var initChartData = [];
function query() {
var queryData = {
startDate: startDate,
endDate: endDate
};
if ($('#selectList').val() != '') {
queryData.enterpriseId = $('#selectList').val();
}
window.queryData = queryData;
var index = layer.load(1, {
shade: [0.1, '#fff'] //0.1透明度的白色背景
});
$.ajax({
type: 'POST',
url: layui.setter.req_url + "generalBackstage/enterpriseInfoStatistics",
data: queryData,
headers: {
"token": token
},
contentType: 'application/x-www-form-urlencoded',
dataType: 'json',
success: function (r) {
layer.close(index);
// 默认查询审核通过-已注册-发放金额3项
let date = [],
uservalue = [],
licensevalue = [],
commissionvalue = [],
initChartData = [];
if (r.code == 200) {
totalData = r.data;
for (let i in totalData['userInfo']) {
date.push(totalData['userInfo'][i].date);
uservalue.push(totalData['userInfo'][i]['tg']);
var useObj = Object.assign({
'name': '审核通过'
}, {
'data': uservalue
}, {
type: 'line'
}, {
smooth: true
})
}
for (let i in totalData['ZClicenseInfo']) {
licensevalue.push(totalData['ZClicenseInfo'][i]['num']);
var licenseObj = Object.assign({
'name': '已注册'
}, {
'data': licensevalue
}, {
type: 'line'
}, {
smooth: true
})
}
for (let i in totalData['commissionInfo']) {
commissionvalue.push(totalData['commissionInfo'][i]['commission']);
var commissionObj = Object.assign({
'name': '发放金额'
}, {
'data': commissionvalue
}, {
type: 'line'
}, {
smooth: true
})
}
initChartData.push(useObj, licenseObj, commissionObj);
// 设置图表数据
entChart.setOption({
color: ['#0D91DC', '#18BA98', '#FB8F8C', '#F4D966', '#9064ED', '#F29169', '#FF7CB6', '#7CA7FF',
'#66D789'
],
legend: {
data: ['审核通过', '已注册', '发放金额'],
itemGap: 65
},
tooltip: {
show: true
},
xAxis: {
show: true,
type: 'category',
data: date
},
yAxis: {
show: true,
type: 'value'
},
series: initChartData
})
// 设置table
table.render({
elem: '#entTable',
url: layui.setter.req_url + 'generalBackstage/enterpriseInfoStatistics' //数据接口
,
headers: {
"token": token
},
where: queryData,
parseData: function (res) { //res 即为原始返回的数据
if (res.code == 403) {
layer.msg("您的账号已在别的地方登录，请重新登录...", {
anim: 6,
function() {
cookie.delete("token");
parent.location.href = "../login.html";
}
});
} else {
return {
"code": 0, //解析接口状态
"msg": res.msg, //解析提示文本
"count": res.data.total, //解析数据长度
"data": res.data.tableInfo, //解析数据列表
};
}
},
cols: [
[ //表头
{
field: 'date',
title: '时间'
}, {
field: 'userTG',
title: '审核通过'
}, {
field: 'licenseZC',
title: '已注册',
sort: true
}, {
field: 'commissionMny',
title: '发放金额',
sort: true,
templet: function (d) {
return mf.NumberToMoney(d.commissionMny);
}
}
]
]
});
} else {
layer.msg(res.msg, {
anim: 6,
});
}
},
error: function () {
layer.close(index);
}
});
}
$("#query").click(function () {
entChart.clear();
// 恢复checkbox
$('input[type=checkbox]').prop("checked", false);;
$(".tg").prop("checked", true);
$('.licenseZC').prop('checked', true);
$('.commission').prop('checked', true);
form.render("checkbox");
query();
});
$('#download').click(function () {
previousPage();
})
function previousPage() {
let url = layui.setter.req_url + 'generalBackstage/exportEnterpriseInfoStatistics';
if (window.queryData.startDate && window.queryData.endDate) {
url = url + '?startDate=' + window.queryData.startDate + '&endDate=' + window.queryData.endDate;
}
if (window.queryData.enterpriseId) {
url = url + '&enterpriseId=' + window.queryData.enterpriseId
}
var filename = "查询数据.xls";
if (!filename) filename = url.split('\\').pop().split('/').pop();
fetch(url, {
headers: new Headers({
token: localStorage.getItem("token")
}),
method: "POST",
mode: 'cors'
})
.then(response => response.blob())
.then(blob => {
let blobUrl = window.URL.createObjectURL(blob);
forceDownload(blobUrl, filename);
})
.catch(e => console.error(e));
}
function forceDownload(blob, filename) {
var a = document.createElement('a');
a.download = filename;
a.href = blob;
a.click();
}
$(".layui-tab-title li").click(function () {
var i = $(this),
k = $(".layui-tab-content .layui-tab-item");
if (i.hasClass('layui-this'))
k.hasClass('layui-hide') ? k.removeClass('layui-hide') : k.addClass('layui-hide');
else
k.removeClass('layui-hide');
});
$('.eachchech').click(function () {
let date = [];
let usertjvalue = [],
usertgvalue = [],
userttvalue = [],
licenseSQvalue = [],
licenseZCvalue = [],
commissionMnyvalue = [],
commissionNumvalue = [],
commissionServicefeevalue = [],
commissionTaxfeevalue = []
var bqData = [];
var list = [];
var chartData = [];
var totalChartData = [];
var tableCols = [];
$('input[type=checkbox]:checked').each(function () {
list.push($(this).val());
});
for (let i in totalData['userInfo']) {
date.push(totalData['userInfo'][i].date);
}
// legend
for (let i in list) {
if (list[i] == 'tj') {
bqData.push('提交审核');
tableCols.push(Object.assign({
field: 'userSQ'
}, {
title: '提交审核'
}));
for (let i in totalData['userInfo']) {
usertjvalue.push(totalData['userInfo'][i]['tj']);
}
totalChartData.push(Object.assign({
'name': '提交审核'
}, {
'data': usertjvalue
}, {
type: 'line'
}, {
smooth: true
}));
} else if (list[i] == 'tg') {
bqData.push('审核通过')
tableCols.push(Object.assign({
field: 'userTG'
}, {
title: '审核通过'
}));
for (let i in totalData['userInfo']) {
usertgvalue.push(totalData['userInfo'][i]['tg']);
}
totalChartData.push(Object.assign({
'name': '审核通过'
}, {
'data': usertgvalue
}, {
type: 'line'
}, {
smooth: true
}));
} else if (list[i] == 'jb') {
bqData.push('企业淘汰')
tableCols.push(Object.assign({
field: 'userTT'
}, {
title: '企业淘汰'
}));
for (let i in totalData['userInfo']) {
userttvalue.push(totalData['userInfo'][i]['jb']);
}
totalChartData.push(Object.assign({
'name': '企业淘汰'
}, {
'data': userttvalue
}, {
type: 'line'
}, {
smooth: true
}));
} else if (list[i] == 'licenseSQ') {
bqData.push('提交注册')
tableCols.push(Object.assign({
field: 'licenseSQ'
}, {
title: '提交注册'
}));
for (let i in totalData['SQlicenseInfo']) {
licenseSQvalue.push(totalData['SQlicenseInfo'][i]['num']);
}
totalChartData.push(Object.assign({
'name': '提交注册'
}, {
'data': licenseSQvalue
}, {
type: 'line'
}, {
smooth: true
}));
} else if (list[i] == 'licenseZC') {
bqData.push('已注册')
tableCols.push(Object.assign({
field: 'licenseZC'
}, {
title: '已注册'
}));
for (let i in totalData['ZClicenseInfo']) {
licenseZCvalue.push(totalData['ZClicenseInfo'][i]['num']);
}
totalChartData.push(Object.assign({
'name': '已注册'
}, {
'data': licenseZCvalue
}, {
type: 'line'
}, {
smooth: true
}));
} else if (list[i] == 'commission') {
bqData.push('发放金额')
tableCols.push(Object.assign({
field: 'commissionMny'
}, {
title: '发放金额'
}));
for (let i in totalData['commissionInfo']) {
commissionMnyvalue.push(totalData['commissionInfo'][i]['commission']);
}
totalChartData.push(Object.assign({
'name': '发放金额'
}, {
'data': commissionMnyvalue
}, {
type: 'line'
}, {
smooth: true
}));
} else if (list[i] == 'num') {
bqData.push('发放笔数')
tableCols.push(Object.assign({
field: 'commissionNum'
}, {
title: '发放笔数'
}));
for (let i in totalData['commissionInfo']) {
commissionNumvalue.push(totalData['commissionInfo'][i]['num']);
}
totalChartData.push(Object.assign({
'name': '发放笔数'
}, {
'data': commissionNumvalue
}, {
type: 'line'
}, {
smooth: true
}));
} else if (list[i] == 'servicefee') {
bqData.push('服务费')
tableCols.push(Object.assign({
field: 'commissionServicefee'
}, {
title: '服务费'
}));
for (let i in totalData['commissionInfo']) {
commissionServicefeevalue.push(totalData['commissionInfo'][i]['servicefee']);
}
totalChartData.push(Object.assign({
'name': '服务费'
}, {
'data': commissionServicefeevalue
}, {
type: 'line'
}, {
smooth: true
}));
} else if (list[i] == 'taxfee') {
bqData.push('税费')
tableCols.push(Object.assign({
field: 'commissionTaxfee'
}, {
title: '税费'
}));
for (let i in totalData['commissionInfo']) {
commissionTaxfeevalue.push(totalData['commissionInfo'][i]['taxfee']);
}
totalChartData.push(Object.assign({
'name': '税费'
}, {
'data': commissionTaxfeevalue
}, {
type: 'line'
}, {
smooth: true
}));
}
}
tableCols.unshift({
field: 'date',
title: '时间'
})
// 清除缓存
entChart.clear();
entChart.setOption({
color: ['#0D91DC', '#18BA98', '#FB8F8C', '#F4D966', '#9064ED', '#F29169', '#FF7CB6', '#7CA7FF', '#66D789'],
legend: {
data: bqData,
itemGap: 65
},
tooltip: {
show: true
},
xAxis: {
show: true,
type: 'category',
data: date
},
yAxis: {
show: true,
type: 'value'
},
series: totalChartData
})
// 设置table
table.render({
elem: '#entTable',
url: layui.setter.req_url + 'generalBackstage/enterpriseInfoStatistics' //数据接口
,
headers: {
"token": token
},
where: window.queryData,
parseData: function (res) { //res 即为原始返回的数据
if (res.code == 403) {
layer.msg("您的账号已在别的地方登录，请重新登录...", {
anim: 6,
function() {
cookie.delete("token");
parent.location.href = "../login.html";
}
});
} else {
return {
"code": 0, //解析接口状态
"msg": res.msg, //解析提示文本
"count": res.data.total, //解析数据长度
"data": res.data.tableInfo, //解析数据列表
};
}
},
cols: [tableCols]
});
})
})
</script>
</body>
</html>
网友评论