452 lines
18 KiB
HTML
452 lines
18 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title></title>
|
||
<link href="../Scripts/layui-v2.4.5/css/layui.css" rel="stylesheet" />
|
||
<script src="../Scripts/jquery-1.10.2.min.js"></script>
|
||
<script src="../Scripts/layui-v2.4.5/layui.js" charset="utf-8"></script>
|
||
<script src="../Scripts/echarts-4.8.0/dist/echarts.min.js"></script>
|
||
<script type="text/javascript">
|
||
var data = [];
|
||
data.push({ weight: 70, rfmName: "复购" });
|
||
data.push({ weight: 60, rfmName: "升级意向" });
|
||
data.push({ weight: 50, rfmName: "购买" });
|
||
data.push({ weight: 40, rfmName: "消退" });
|
||
data.push({ weight: 30, rfmName: "意向" });
|
||
data.push({ weight: 20, rfmName: "互动" });
|
||
data.push({ weight: 10, rfmName: "一般" });
|
||
data.push({ weight: 0, rfmName: "失联" });
|
||
|
||
var data2 = [];
|
||
data2.push({ weight: 70, rfmName: "复购", countTotal: 0 });
|
||
data2.push({ weight: 60, rfmName: "升级意向", countTotal: 0 });
|
||
data2.push({ weight: 50, rfmName: "购买", countTotal: 0 });
|
||
data2.push({ weight: 40, rfmName: "消退", countTotal: 0 });
|
||
data2.push({ weight: 30, rfmName: "意向", countTotal: 0 });
|
||
data2.push({ weight: 20, rfmName: "互动", countTotal: 0 });
|
||
data2.push({ weight: 10, rfmName: "一般", countTotal: 0 });
|
||
data2.push({ weight: 0, rfmName: "失联", countTotal: 0 });
|
||
|
||
layui.use(['table', 'laydate', 'form'], function () {
|
||
var table = layui.table;
|
||
var laydate = layui.laydate;
|
||
var form = layui.form;
|
||
var $ = layui.jquery;
|
||
|
||
var now = new Date(); //当前日期
|
||
var nowMonth = now.getMonth(); //当前月
|
||
var nowYear = now.getFullYear(); //当前年
|
||
//本月的开始时间
|
||
var monthStartDate = new Date(nowYear, nowMonth, 1);
|
||
//本月的结束时间
|
||
var monthEndDate = new Date(nowYear, nowMonth + 1, 0);
|
||
|
||
$(".searchtime").each(function (i, j) {
|
||
if (i == 0) {
|
||
$(this).val(formatDate(monthStartDate));
|
||
}
|
||
else if (i == 1) {
|
||
$(this).val(formatDate(monthEndDate));
|
||
}
|
||
laydate.render({
|
||
elem: this
|
||
, type: 'date'
|
||
});
|
||
//$(".searchtime").removeAttr("lay-key");
|
||
});
|
||
|
||
$.get('/Control/GetCompany', function (rsp) {
|
||
//console.log(rsp);
|
||
$("#ch").append(new Option("请选择", ""))
|
||
$.each(rsp, function (i, j) {
|
||
$("#ch").append(new Option(j.CompanyName, j.Channel));
|
||
});
|
||
form.render('select');
|
||
|
||
$("#search").click();
|
||
});
|
||
|
||
form.on('submit(search)', function (formdata) {
|
||
|
||
var len = $("#divform").children('.divsubform').length;
|
||
|
||
var paraObj = [];
|
||
var columns = [];
|
||
var seriesData = [];
|
||
//var columns = [{ field: 'm0', title: '10.21-10.22', totalRow: true }, { field: 'm1', title: '10.22-10.23', totalRow: true }];
|
||
|
||
for (var i = 0; i < len; i++) {
|
||
paraObj.push({ source: '', ch: '', beginDate: '', endDate: '' });
|
||
columns.push({ title: '', field: 'm' + i, totalRow: true });
|
||
seriesData.push({ name: '', type: 'bar', data: [] });
|
||
}
|
||
|
||
$.each(data, function (m, n) {
|
||
//console.log(n);
|
||
$.each(columns, function (i, j) {
|
||
//console.log(j);
|
||
n[j.field] = 0;
|
||
});
|
||
});
|
||
|
||
//console.log(data);
|
||
|
||
$.each(columns, function (i, j) {
|
||
$("input[name='beginDate']").each(function (m, n) {
|
||
if (i == m) {
|
||
var d = new Date(Date.parse($(n).val().replace(/-/g, "/")));
|
||
j.title = (d.getMonth() + 1) + "." + d.getDate() + "-";
|
||
}
|
||
});
|
||
|
||
$("input[name='endDate']").each(function (m, n) {
|
||
if (i == m) {
|
||
var d = new Date(Date.parse($(n).val().replace(/-/g, "/")));
|
||
j.title += (d.getMonth() + 1) + "." + d.getDate();
|
||
}
|
||
});
|
||
|
||
$("select[name='source']").each(function (m, n) {
|
||
if (i == m) {
|
||
if ($(n).val() != "") {
|
||
if (j.title != "") {
|
||
j.title += "【" + $(n).find("option:selected").text() + "】";
|
||
}
|
||
else {
|
||
j.title += $(n).find("option:selected").text();
|
||
}
|
||
}
|
||
}
|
||
});
|
||
|
||
$("select[name='ch']").each(function (m, n) {
|
||
if (i == m) {
|
||
if ($(n).val() != "") {
|
||
if (j.title != "") {
|
||
j.title += "【" + $(n).find("option:selected").text() + "】";
|
||
}
|
||
else {
|
||
j.title += $(n).find("option:selected").text();
|
||
}
|
||
}
|
||
}
|
||
});
|
||
});
|
||
|
||
$.each(seriesData, function (i, j) {
|
||
$("input[name='beginDate']").each(function (m, n) {
|
||
if (i == m) {
|
||
var d = new Date(Date.parse($(n).val().replace(/-/g, "/")));
|
||
j.name = (d.getMonth() + 1) + "." + d.getDate() + "-";
|
||
}
|
||
});
|
||
|
||
$("input[name='endDate']").each(function (m, n) {
|
||
if (i == m) {
|
||
var d = new Date(Date.parse($(n).val().replace(/-/g, "/")));
|
||
j.name += (d.getMonth() + 1) + "." + d.getDate();
|
||
}
|
||
});
|
||
|
||
$("select[name='source']").each(function (m, n) {
|
||
if (i == m) {
|
||
if ($(n).val() != "") {
|
||
if (j.name != "") {
|
||
j.name += "【" + $(n).find("option:selected").text() + "】";
|
||
}
|
||
else {
|
||
j.name += $(n).find("option:selected").text();
|
||
}
|
||
}
|
||
}
|
||
});
|
||
|
||
$("select[name='ch']").each(function (m, n) {
|
||
if (i == m) {
|
||
if ($(n).val() != "") {
|
||
if (j.name != "") {
|
||
j.name += "【" + $(n).find("option:selected").text() + "】";
|
||
}
|
||
else {
|
||
j.name += $(n).find("option:selected").text();
|
||
}
|
||
}
|
||
}
|
||
});
|
||
});
|
||
|
||
$.each(paraObj, function (i, j) {
|
||
//console.log(j);
|
||
$("input[name='beginDate']").each(function (m, n) {
|
||
if (i == m) {
|
||
j.beginDate = $(n).val();
|
||
}
|
||
});
|
||
|
||
$("input[name='endDate']").each(function (m, n) {
|
||
if (i == m) {
|
||
j.endDate = $(n).val();
|
||
}
|
||
});
|
||
|
||
$("select[name='source']").each(function (m, n) {
|
||
if (i == m) {
|
||
j.source = $(n).val();
|
||
}
|
||
});
|
||
|
||
$("select[name='ch']").each(function (m, n) {
|
||
if (i == m) {
|
||
j.ch = $(n).val();
|
||
}
|
||
});
|
||
});
|
||
|
||
var where = "";
|
||
$.each(paraObj, function (i, j) {
|
||
if (paraObj.length == (i + 1)) {
|
||
where += JSON.stringify(j);
|
||
}
|
||
else {
|
||
where += JSON.stringify(j) + "%";
|
||
}
|
||
});
|
||
|
||
//console.log(paraObj.length);
|
||
//console.log(columns);
|
||
//console.log(where);
|
||
|
||
//var url = "http://192.168.11.141:10045/saleClus/cgi/countIntervalRfm";
|
||
//var para = { "where": "{'source' : 'pc', 'ch' : '' , 'beginDate':'2020-10-21' , 'endDate' : '2020-10-22' }%{'source' : 'pc', 'ch' : '', 'beginDate':'2020-10-22' , 'endDate' : '2020-10-23' }" }
|
||
var para = { "where": where };
|
||
$.post("http://sc.soft.dn8188.com/saleClus/cgi/countIntervalRfm", para, function (rsp) {
|
||
//console.log(rsp.list);
|
||
//console.log(seriesData);
|
||
$.each(rsp.list, function (i, j) {
|
||
|
||
$.each(data2, function (m, n) {
|
||
n.countTotal = 0;
|
||
});
|
||
|
||
$.each(j, function (x, y) {
|
||
//console.log(y);
|
||
$.each(data, function (m, n) {
|
||
//console.log(n);
|
||
if (y.weight == n.weight) {
|
||
n["m" + i] = y.countTotal;
|
||
}
|
||
});
|
||
|
||
$.each(data2, function (m, n) {
|
||
if (y.weight == n.weight) {
|
||
n.countTotal = y.countTotal;
|
||
}
|
||
});
|
||
});
|
||
$.each(seriesData, function (g, h) {
|
||
if (i == g) {
|
||
var tempArr = [];
|
||
$.each(data2, function (m, n) {
|
||
tempArr.push(n.countTotal);
|
||
});
|
||
h.data = tempArr;
|
||
}
|
||
});
|
||
});
|
||
|
||
/*图表数据*/
|
||
var myChart = echarts.init(document.getElementById('main'));
|
||
|
||
var dimensionsArr = ['rfmName'];
|
||
var seriesArr = [];
|
||
|
||
$.each(columns, function (i, j) {
|
||
//console.log(j);
|
||
dimensionsArr.push(j.field);
|
||
seriesArr.push({ type: 'bar' });
|
||
});
|
||
|
||
var legendData = [];
|
||
$.each(seriesData, function (i, j) {
|
||
legendData.push(j.name);
|
||
});
|
||
|
||
//console.log(dimensionsArr);
|
||
//console.log(legendData);
|
||
//console.log(data);
|
||
console.log(seriesData);
|
||
option = {
|
||
tooltip: { trigger: 'axis' },
|
||
legend: { data: legendData },
|
||
xAxis: [
|
||
{
|
||
type: 'category',
|
||
data: ['复购', '升级意向', '购买', '消退', '意向', '互动', '一般', '失联']
|
||
}
|
||
],
|
||
yAxis: [{ type: 'value' }],
|
||
series: seriesData
|
||
};
|
||
|
||
//option = {
|
||
// legend: {},
|
||
// tooltip: {},
|
||
// dataset: {
|
||
// /*dimensions: ['product', '2015', '2016', '2017'],
|
||
// source: [
|
||
// { product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7 },
|
||
// { product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1 },
|
||
// { product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5 },
|
||
// { product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1 }
|
||
// ]*/
|
||
// dimensions: dimensionsArr,
|
||
// source: data
|
||
// },
|
||
// xAxis: { type: 'category' },
|
||
// yAxis: {},
|
||
// series: seriesArr
|
||
//};
|
||
|
||
myChart.setOption(option);
|
||
|
||
/*表格数据*/
|
||
columns.unshift({ title: '标签', field: 'rfmName', totalRowText: '合计' });
|
||
|
||
var tableIns = table.render({
|
||
elem: '#table'
|
||
, totalRow: true
|
||
, cols: [columns]
|
||
, data: data
|
||
});
|
||
|
||
});
|
||
|
||
});
|
||
|
||
//var fi = 1;
|
||
$("#btnAdd").click(function () {
|
||
var subfrom = $("#divsubform").clone(true)
|
||
|
||
//console.log(subfrom);
|
||
//var id = "divsubform" + fi;
|
||
//$(subfrom).attr("id", id);//.append("<button type=\"button\" class=\"layui-btn layui-btn-sm\" onclick=\"delsubfrom('" + id + "')\"><i class=\"layui-icon\"></i></button>");
|
||
|
||
//console.log(subfrom);
|
||
|
||
$("#divform").append(subfrom);
|
||
|
||
$(".searchtime").each(function (i, j) {
|
||
|
||
$(this).attr("lay-key", i + 1);
|
||
|
||
laydate.render({
|
||
elem: this
|
||
, type: 'date'
|
||
});
|
||
});
|
||
|
||
//$(".searchtime").removeAttr("lay-key");
|
||
|
||
$("#btnRemove").show();
|
||
|
||
//form.render('select');
|
||
form.render();
|
||
|
||
//fi++;
|
||
|
||
});
|
||
|
||
$("#btnRemove").click(function () {
|
||
|
||
$(".divsubform:last").remove();
|
||
|
||
$(".searchtime").each(function (i, j) {
|
||
|
||
$(this).attr("lay-key", i + 1);
|
||
|
||
laydate.render({
|
||
elem: this
|
||
, type: 'date'
|
||
});
|
||
});
|
||
|
||
var len = $(".divsubform").length;
|
||
|
||
if (len == 1) {
|
||
$("#btnRemove").hide();
|
||
}
|
||
|
||
form.render();
|
||
});
|
||
|
||
});
|
||
|
||
var formatDate = function (date) {
|
||
|
||
var y = date.getFullYear();
|
||
|
||
var m = date.getMonth() + 1;
|
||
|
||
m = m < 10 ? '0' + m : m;
|
||
|
||
var d = date.getDate();
|
||
|
||
d = d < 10 ? ('0' + d) : d;
|
||
|
||
return y + '-' + m + '-' + d;
|
||
|
||
};
|
||
|
||
</script>
|
||
</head>
|
||
<body>
|
||
<div class="layui-container">
|
||
<br />
|
||
<div class="layui-form">
|
||
<div id="divform" class="layui-inline">
|
||
<div id="divsubform" class="divsubform">
|
||
日期：
|
||
<div class="layui-inline">
|
||
<input class="layui-input searchtime" lay-verify="required" placeholder="开始日" name="beginDate" value="">
|
||
</div>
|
||
<div class="layui-inline">
|
||
<input class="layui-input searchtime" lay-verify="required" placeholder="截止日" name="endDate" value="">
|
||
</div>
|
||
来源：
|
||
<div class="layui-inline">
|
||
<select name="source" id="source">
|
||
<option value="">全部</option>
|
||
<option value="pc">pc软件</option>
|
||
<option value="qiyewechat">企业微信</option>
|
||
<option value="app">app</option>
|
||
<option value="xiaocheng">小程序</option>
|
||
<option value="fuwuhao">服务号</option>
|
||
<option value="web">网页</option>
|
||
<option value="xiaoetong">小额通</option>
|
||
<option value="crm">CRM</option>
|
||
</select>
|
||
</div>
|
||
事业部：
|
||
<div class="layui-inline">
|
||
<select name="ch" id="ch"></select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-inline" style="vertical-align:bottom">
|
||
<button type="button" class="layui-btn layui-btn-sm" id="btnRemove" style="display:none;"><i class="layui-icon"></i></button>
|
||
<button type="button" class="layui-btn layui-btn-sm" id="btnAdd"><i class="layui-icon"></i></button>
|
||
<button class="layui-btn layui-btn-sm" id="search" lay-submit="" lay-filter="search">查询</button>
|
||
</div>
|
||
|
||
</div>
|
||
<br />
|
||
<hr />
|
||
<div id="main" style="width: 100%;height:500px;"></div>
|
||
<hr />
|
||
<br />
|
||
<table class="layui-hide" id="table"></table>
|
||
</div>
|
||
</body>
|
||
</html> |