424 lines
15 KiB
HTML
424 lines
15 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="renderer" content="webkit">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
|
<title>自由拖拽报表-e订通后台</title>
|
|
<link rel="stylesheet" href="layuiadmin/layui/css/layui.css">
|
|
<link rel="stylesheet" href="index.css">
|
|
<script src="layuiadmin/layui/layui.js"></script>
|
|
<link href="js/webdatarocks/webdatarocks.min.css" rel="stylesheet" type="text/css" />
|
|
<style>
|
|
#wdr-toolbar-wrapper #wdr-toolbar li {
|
|
width: 60px;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div>
|
|
<!-- <blockquote class="layui-elem-quote" style="line-height:44px;padding:8px;" id="search_top"> -->
|
|
<!-- <div class="layui-inline"><a class="layui-btn layui-btn-normal btn_getdata">获取基础数据</a></div> -->
|
|
<!-- <div class="layui-inline" style="color:red;" id="data_time"></div> -->
|
|
<!-- </blockquote> -->
|
|
<div class="wrap">
|
|
<!-- 1. Create a DIV container to insert the component -->
|
|
<div id="pivot-container" style="padding: 10px;"></div>
|
|
<!-- You can use a different theme by specifying the corresponding path. -->
|
|
<!-- For example, to load the Green theme: -->
|
|
<!-- <link href="webdatarocks/theme/green/webdatarocks.min.css" rel="stylesheet" type="text/css" /> -->
|
|
<!-- See the full list of available themes: https://www.webdatarocks.com/doc/customizing-appearance/#built-in-themes -->
|
|
|
|
<!-- 3. Create an instance of the component using new Flexmonster() -->
|
|
|
|
</div>
|
|
<!-- <div style="width:99%;"> -->
|
|
<!-- <iframe id="dataiframe" src="zdy_table.htm" frameborder="0" ></iframe> -->
|
|
<!-- </div> -->
|
|
</div>
|
|
<script>
|
|
layui.use(['layer'], function () {
|
|
layui.layer.load();
|
|
});
|
|
</script>
|
|
<script src="js/jquery.min.js"></script>
|
|
<script src="js/function.js"></script>
|
|
<script src="js/webdatarocks/webdatarocks.js" type="text/javascript"></script>
|
|
<script src="js/webdatarocks/webdatarocks.toolbar.min.js" type="text/javascript"></script>
|
|
<script>
|
|
var ft;
|
|
var pivot;
|
|
layui.use(['form', 'layer', 'table', 'laytpl'], function () {
|
|
var form = layui.form,
|
|
layer = layui.layer,
|
|
$ = layui.jquery;
|
|
$.ajax({
|
|
url: "./?_m=zdy_report&_a=is_csv_exist",
|
|
contentType: "application/json",
|
|
method: 'POST',
|
|
success: function (res) {
|
|
layer.closeAll('loading');
|
|
var res = $.parseJSON(res);
|
|
ft = res.update_time;
|
|
if (res.code == "1") {
|
|
pivot = new WebDataRocks({
|
|
container: "#pivot-container",
|
|
global: {
|
|
localization: "../js/webdatarocks/zh.json"
|
|
},
|
|
toolbar: true,
|
|
beforetoolbarcreated: customizeToolbar,
|
|
height: innerHeight - 20 + 'px',
|
|
report: {
|
|
"dataSource": {
|
|
"dataSourceType": "csv",
|
|
"filename": "../cache/admin.csv"
|
|
},
|
|
"slice": {
|
|
"rows": [{
|
|
"uniqueName": "店铺名称"
|
|
}],
|
|
"columns": [{
|
|
"uniqueName": "Measures"
|
|
}],
|
|
"measures": [{
|
|
"uniqueName": "数量",
|
|
"aggregation": "sum"
|
|
},
|
|
{
|
|
"uniqueName": "金额",
|
|
"aggregation": "sum"
|
|
}
|
|
]
|
|
}
|
|
}
|
|
});
|
|
pivot.on('update', function () {
|
|
//时间更新
|
|
//console.log("时间更新");
|
|
document.getElementsByClassName(
|
|
"wdr-ui-element wdr-ui wdr-ui-label wdr-credits")[0]
|
|
.innerHTML = "最后更新于" + ft;
|
|
|
|
});
|
|
|
|
|
|
} else {
|
|
pivot = new WebDataRocks({
|
|
container: "#pivot-container",
|
|
global: {
|
|
localization: "../js/webdatarocks/zh.json"
|
|
},
|
|
toolbar: true,
|
|
beforetoolbarcreated: customizeToolbar,
|
|
height: 600
|
|
});
|
|
}
|
|
},
|
|
error: function () {
|
|
layer.closeAll('loading');
|
|
layui.layer.msg("与服务器通信失败！");
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
function customizeToolbar(toolbar) {
|
|
var tabs = toolbar.getTabs(); // get all tabs from the toolbar
|
|
toolbar.getTabs = function () {
|
|
tabs[0].menu = undefined;
|
|
tabs[0].id = "reflash";
|
|
tabs[0].title = "更新数据";
|
|
tabs[0].icon =
|
|
'<svg t="1629769424436" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3255" width="36" height="36"><path d="M917.8 111.2l-84.6 84.6-2.5-7.4C743.5 106.3 641.5 64 517.1 64s-231.5 42.3-318.6 129.4C111.3 280.5 69 387.5 69 511.9S111.3 740.8 198.4 828c87.1 87.1 194.1 132 318.6 132s229-44.9 316-132c47.2-44.8 79.7-94.6 102-151.8l-208.9-79.7c-10 24.9-29.8 49.8-49.8 72.2-44.8 44.9-97.1 67.3-159.2 67.3s-114.5-22.4-159.3-67.2c-42.3-42.3-64.7-94.5-64.7-156.8s22.4-114.5 64.7-159.3c44.8-42.3 97.1-64.7 159.3-64.7 59.7 0 112 19.9 154.3 59.7l14.9-12.5-14.9 12.5 4.9 4.9-84.6 84.6c-7.4 4.9-7.4 10-10 14.9-2.5 7.5-2.5 10 0 12.5 2.5 4.9 4.9 7.4 10 7.4l333.5 2.5c2.5 0 7.5-2.5 12.5-2.5 4.9-4.9 7.5-10 12.5-14.9 2.5-4.9 4.9-10 4.9-12.5l-4.9-333.5v-2.5c0-4.9-2.5-4.9-4.9-7.4 0 0-2.5 0-2.5-2.5-2.5 0-4.9 2.5-10 2.5-5.1 2.6-12.6 5.1-15 10z" p-id="3256"></path></svg>';
|
|
tabs[0].handler = function () {
|
|
get_by_uid(1);
|
|
//pivot.connectTo({
|
|
//type: "csv",
|
|
////browseForFile: true
|
|
//filename: 'csv/admin1.csv'
|
|
//});
|
|
}
|
|
tabs[1].id = "openmb";
|
|
tabs[1].title = "模板管理";
|
|
tabs[1].menu = undefined;
|
|
tabs[1].handler = function () {
|
|
getReportList();
|
|
}
|
|
|
|
tabs[2].id = "savemb";
|
|
tabs[2].title = "保存模板";
|
|
tabs[2].handler = function () {
|
|
saveReport();
|
|
}
|
|
tabs[3].id = "outputbb";
|
|
tabs[3].title = "导出报表";
|
|
tabs.splice(7,0,{
|
|
id: "wdr-tab-ec",
|
|
title: "数据折叠",
|
|
rightGroup: true,
|
|
menu: [{
|
|
title: '展开全部',
|
|
id: 'wdr-tab-expand',
|
|
icon: '<svg t="1632794740766" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8710" width="36" height="36"><path d="M832 288H192c-19.2 0-32-12.8-32-32s12.8-32 32-32h640c19.2 0 32 12.8 32 32s-12.8 32-32 32zM832 544H448c-19.2 0-32-12.8-32-32s12.8-32 32-32h384c19.2 0 32 12.8 32 32s-12.8 32-32 32zM192 633.6c-6.4 0-19.2 0-25.6-6.4-12.8-12.8-12.8-32 0-44.8L236.8 512 166.4 441.6c-12.8-12.8-12.8-32 0-44.8s32-12.8 44.8 0l89.6 89.6c19.2 12.8 19.2 38.4 6.4 51.2L217.6 627.2c-6.4 6.4-19.2 6.4-25.6 6.4zM832 800H192c-19.2 0-32-12.8-32-32s12.8-32 32-32h640c19.2 0 32 12.8 32 32s-12.8 32-32 32z" p-id="8711"></path></svg>',
|
|
handler: function () {
|
|
this.pivot.expandAllData();
|
|
}
|
|
}, {
|
|
title: '折叠全部',
|
|
id: 'wdr-tab-collapse',
|
|
args: 'html',
|
|
icon: '<svg t="1632794940089" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="948" width="36" height="36"><path d="M832 288H192c-19.2 0-32-12.8-32-32s12.8-32 32-32h640c19.2 0 32 12.8 32 32s-12.8 32-32 32zM832 544H448c-19.2 0-32-12.8-32-32s12.8-32 32-32h384c19.2 0 32 12.8 32 32s-12.8 32-32 32zM256 633.6c-6.4 0-19.2 0-25.6-6.4L140.8 537.6c-12.8-12.8-12.8-38.4 0-51.2l89.6-89.6c12.8-12.8 38.4-12.8 51.2 0s12.8 32 0 44.8L211.2 512l70.4 70.4c12.8 12.8 12.8 32 0 44.8-6.4 6.4-19.2 6.4-25.6 6.4zM832 800H192c-19.2 0-32-12.8-32-32s12.8-32 32-32h640c19.2 0 32 12.8 32 32s-12.8 32-32 32z" p-id="949"></path></svg>',
|
|
handler: function () {
|
|
this.pivot.collapseAllData();
|
|
}
|
|
}],
|
|
icon: '<svg t="1632794276739" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2499" width="36" height="36"><path d="M122.368 165.888h778.24c-9.216 0-16.384-7.168-16.384-16.384v713.728c0-9.216 7.168-16.384 16.384-16.384h-778.24c9.216 0 16.384 7.168 16.384 16.384V150.016c0 8.192-6.656 15.872-16.384 15.872z m-32.768 684.544c0 26.112 20.992 47.104 47.104 47.104h750.08c26.112 0 47.104-20.992 47.104-47.104V162.304c0-26.112-20.992-47.104-47.104-47.104H136.704c-26.112 0-47.104 20.992-47.104 47.104v688.128z" p-id="2500"></path><path d="M138.752 158.208V435.2h745.472V158.208H138.752z m609.792 206.336l-102.912-109.056 25.088-26.624 77.824 82.432 77.824-82.432 25.088 26.624-102.912 109.056zM138.752 682.496h745.472v48.128H138.752zM138.752 453.632h745.472v50.176H138.752zM748.544 659.968l-102.912-109.056 25.088-26.624 77.824 82.432 77.824-82.432 25.088 26.624z" p-id="2501"></path></svg>'
|
|
});
|
|
return tabs;
|
|
}
|
|
}
|
|
$(".btn_getdata").click(function () {
|
|
get_by_uid(1);
|
|
|
|
//layer.load();
|
|
//$.ajax({
|
|
//url:"./?_m=zdy_report&_a=create_data",
|
|
//contentType: "application/json",
|
|
//method: 'POST',
|
|
//success: function (res) {
|
|
//layer.closeAll('loading');
|
|
//var res=$.parseJSON(res);
|
|
//if(res.code=="1"){
|
|
//layui.layer.alert("数据获取成功!");
|
|
//$("#data_time").html(res.data_time);
|
|
//$('#dataiframe').attr('src', $('#dataiframe').attr('src'));
|
|
//}
|
|
//},
|
|
//error: function () {
|
|
//layer.closeAll('loading');
|
|
//layui.layer.msg("与服务器通信失败！");
|
|
//}
|
|
|
|
//});
|
|
})
|
|
|
|
function get_by_uid(page) {
|
|
layer.confirm('确定更新数据吗？', {
|
|
icon: 3,
|
|
title: '提示信息'
|
|
}, function (index) {
|
|
//var tmpurl="./?_m=zdy_report&_a=create_data&s_uid="+uid+"&ct="+ct;
|
|
var tmpurl = "./?_m=zdy_report&_a=create_data&page=" + page;
|
|
//layer.load();
|
|
$.ajax({
|
|
url: tmpurl,
|
|
contentType: "application/json",
|
|
method: 'POST',
|
|
success: function (res) {
|
|
//
|
|
var res = $.parseJSON(res);
|
|
if (res.next_page) {
|
|
layui.layer.msg(res.msg);
|
|
get_by_uid(res.next_page);
|
|
} else {
|
|
//layer.closeAll('loading');
|
|
if (res.err) {
|
|
layui.layer.msg(res.err);
|
|
} else {
|
|
layui.layer.msg(res.msg);
|
|
$.ajax({
|
|
url: "./?_m=zdy_report&_a=create_csv",
|
|
contentType: "application/json",
|
|
method: 'POST',
|
|
success: function (res) {
|
|
var res = $.parseJSON(res);
|
|
ft = res.update_time;
|
|
pivot.clear();
|
|
pivot.setReport({
|
|
"dataSource": {
|
|
"dataSourceType": "csv",
|
|
"filename": "../cache/admin.csv"
|
|
},
|
|
"slice": {
|
|
"rows": [{
|
|
"uniqueName": "店铺名称"
|
|
}],
|
|
"columns": [{
|
|
"uniqueName": "Measures"
|
|
}],
|
|
"measures": [{
|
|
"uniqueName": "数量",
|
|
"aggregation": "sum"
|
|
},
|
|
{
|
|
"uniqueName": "金额",
|
|
"aggregation": "sum"
|
|
}
|
|
]
|
|
}
|
|
});
|
|
//pivot.refresh();
|
|
// console.log(pivot);
|
|
document.getElementsByClassName(
|
|
"wdr-ui-element wdr-ui wdr-ui-label wdr-credits"
|
|
)[0].innerHTML = "最后更新于" + ft;
|
|
layui.layer.msg("更新完成");
|
|
},
|
|
error: function () {
|
|
layer.closeAll('loading');
|
|
layui.layer.msg("与服务器通信失败！");
|
|
}
|
|
});
|
|
}
|
|
}
|
|
},
|
|
error: function () {
|
|
layui.layer.msg("与服务器通信失败！");
|
|
layer.closeAll('loading');
|
|
}
|
|
|
|
});
|
|
})
|
|
}
|
|
|
|
function getReportList() {
|
|
$.ajax({
|
|
//获取模板列表
|
|
url: "./?_m=zdy_report&_a=get_mb",
|
|
contentType: "application/json",
|
|
method: 'POST',
|
|
success: function (res) {
|
|
// alert(res);
|
|
var res = $.parseJSON(res);
|
|
var listContent =
|
|
'<div style="overflow-y: auto;max-height: 450px;"><div id="mbList"><table class="layui-table" lay-even="" lay-skin="line"><thead><tr><th>名称</th><th style="width:100px">创建者</th><th style="width:150px">日期</th><th style="width:150px">操作</th></tr> </thead><tbody>';
|
|
for (var i = 0; i < res.data.length; i++) {
|
|
// listContent +=(i!=0?'<br />':'')+'<input type="radio" name="mbSelect" value="'+res.data[i].id+'" title="'+res
|
|
// .data[i].mb_name+(i==0?'" checked="">':'">')+res
|
|
// .data[i].mb_name+'</input>';
|
|
listContent += '<tr id="mb_line_' + res
|
|
.data[i].id + '"><td id="mb_name_' + res
|
|
.data[i].id + '">' + res.data[i].mb_name + '</td><td>' + res.data[i]
|
|
.username +
|
|
'</td><td>' + res.data[i].add_time +
|
|
'</td><td><div class="layui-btn-group"><button onclick="mbload(\'' + res
|
|
.data[i].id +
|
|
'\')" type="button" class="layui-btn layui-btn-sm" title="载入"><i class="layui-icon"></i></button><button onclick="mbrename(\'' +
|
|
res
|
|
.data[i].id + '\',\'' + res.data[i].mb_name +
|
|
'\')" type="button" class="layui-btn layui-btn-primary layui-btn-sm" title="重命名"><i class="layui-icon"></i></button><button onclick="mbdelete(\'' +
|
|
res.data[i].id + '\',\'' + res.data[i].mb_name +
|
|
'\')" type="button" class="layui-btn layui-btn-primary layui-btn-sm" title="删除"><i style="color:#f00" class="layui-icon"></i></button></div></td></tr>';
|
|
}
|
|
listContent += '</tbody></table></div></div>';
|
|
layer.open({
|
|
area: ['800px'],
|
|
type: 1,
|
|
id: 'mbgl',
|
|
title: '模板管理',
|
|
content: '' + listContent + ''
|
|
});
|
|
|
|
},
|
|
error: function () {
|
|
layui.layer.msg("读取失败");
|
|
}
|
|
});
|
|
|
|
|
|
}
|
|
|
|
function saveReport() {
|
|
layer.prompt({
|
|
title: '请输入模板名称',
|
|
}, function (value, index, elem) {
|
|
if (value.trim() === "") {
|
|
layui.layer.msg("不可为空");
|
|
return false;
|
|
} else {
|
|
//保存操作
|
|
$.post("./?_m=zdy_report&_a=save_mb", {
|
|
"mb_name": value.trim(),
|
|
"mb": JSON.stringify(pivot.getReport())
|
|
}, function (data, status) {
|
|
var res = $.parseJSON(data);
|
|
if (res.code === 0) {
|
|
layer.close(index);
|
|
layui.layer.msg("保存成功");
|
|
} else {
|
|
// layer.close(index);
|
|
layui.layer.msg(res.errmsg);
|
|
}
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
});
|
|
|
|
function mbload(mb_id) {
|
|
$.ajax({
|
|
url: "./?_m=zdy_report&_a=get_mb_info&mbid=" + mb_id,
|
|
contentType: "application/json",
|
|
method: 'POST',
|
|
success: function (res) {
|
|
var res = $.parseJSON(res);
|
|
pivot.setReport(res.data[0].mb[0]);
|
|
layui.layer.msg("载入成功");
|
|
layer.closeAll('page');
|
|
},
|
|
error: function () {
|
|
layui.layer.msg("读取失败");
|
|
}
|
|
});
|
|
}
|
|
|
|
function mbrename(mb_id, mb_name) {
|
|
layer.prompt({
|
|
value: mb_name,
|
|
title: '请输入新名称',
|
|
}, function (value, index, elem) {
|
|
if (value.trim() === "") {
|
|
layui.layer.msg("不可为空");
|
|
return false;
|
|
} else {
|
|
$.post("./?_m=zdy_report&_a=save_mb_info&mbid=" + mb_id + "&mb_name=" + value.trim(), {},
|
|
function (data, status) {
|
|
var res = $.parseJSON(data);
|
|
if (res.code === 0) {
|
|
$("#mb_name_" + mb_id).text(value.trim());
|
|
layer.close(index);
|
|
layui.layer.msg("修改成功");
|
|
} else {
|
|
// layer.close(index);
|
|
layui.layer.msg(res.errmsg);
|
|
}
|
|
|
|
}
|
|
);
|
|
}
|
|
});
|
|
}
|
|
|
|
function mbdelete(mb_id, mb_name) {
|
|
layer.confirm('确定要删除' + mb_name + '吗？', {
|
|
icon: 3,
|
|
title: '删除'
|
|
}, function (index) {
|
|
$.post("./?_m=zdy_report&_a=delete_mb&mbid=" + mb_id, {}, function (data,
|
|
status) {
|
|
$("#mb_line_" + mb_id).remove();
|
|
layer.close(index);
|
|
layui.layer.msg("删除成功");
|
|
});
|
|
});
|
|
|
|
}
|
|
</script>
|
|
</body>
|
|
|
|
</html> |