;
layui.config({
base: "../../../admin/js/layuiPlugins/"
}).use(['form', 'layer', 'jquery', 'laypage', 'element', 'table', 'laydate', 'laytpl', 'cascade'], function() {
var form = layui.form,
layer = layui.layer,
laytpl = layui.laytpl,
laypage = layui.laypage,
$ = layui.jquery,
table = layui.table,
element = layui.element,
laydate = layui.laydate,
cascade = layui.cascade;
//自定义验证
form.verify({
namelength: [
/^.{0,18}$/,
"长度限制在0-18个字符噢"
]
});
var vm = function(obj) {
var _this = this;
_this.dataId = obj.dataId || 'dataListId'; //数据表ID
_this.elem = obj.elem || 'dataListBox'; //数据表容器
_this.toolbar = obj.toolbar || '';
_this.url = obj.url || ''; //数据表接口URL
_this.page = obj.page; //分页
_this.limit = obj.limit;
_this.cols = obj.cols || []; //表头
_this.done = obj.done || ''; //表头
_this.formObj = {}; //当前表单对象
_this.searchParameter = {}; //搜索参数
_this.config = {};
_this.where = obj.where;
_this.config.dateTime = obj.dateTime;
_this.dateTime = {
year: 365 * 1 * 24 * 3600 * 1000,
month: 30 * 1 * 24 * 3600 * 1000,
day: 24 * 3600 * 1000,
}
_this.main();
};
//入口函数
vm.prototype.main = function() {
var _this = this;
laydate.render({
elem: '#test6',
range: true,
btns: ['now','confirm'],
done: function(value, date, endDate) {
if (date.month < 10) {
date.month = '0' + date.month
}
if (date.date < 10) {
date.date = '0' + date.date
}
if (endDate.month < 10) {
endDate.month = '0' + endDate.month
}
if (endDate.date < 10) {
endDate.date = '0' + endDate.date
}
rankTableVm.searchParameter.timeType = '';
rankTableVm.searchParameter.beginTime = date.year + '-' + date.month + '-' + date.date;
rankTableVm.searchParameter.endTime = endDate.year + '-' + endDate.month + '-' + endDate.date;
rankTableVm.reload();
}
});
laydate.render({
elem: '#test7',
range: true,
btns: ['now','confirm'],
done: function(value, date, endDate) {
if (date.month < 10) {
date.month = '0' + date.month
}
if (date.date < 10) {
date.date = '0' + date.date
}
if (endDate.month < 10) {
endDate.month = '0' + endDate.month
}
if (endDate.date < 10) {
endDate.date = '0' + endDate.date
}
singleGoodsTableVm.searchParameter.timeType = '';
singleGoodsTableVm.searchParameter.beginTime = date.year + '-' + date.month + '-' + date.date;
singleGoodsTableVm.searchParameter.endTime = endDate.year + '-' + endDate.month + '-' + endDate.date;
_this.lineChartShow();
_this.totalShow();
singleGoodsTableVm.reload();
}
});
//监听一级Tab切换
element.on('tab(tabBrief)', function(obj) {
console.log('12', obj)
switch (obj.index) {
case 0:
$('#rankBtn button').eq(0).removeClass('layui-btn-primary').siblings().addClass('layui-btn-primary');
rankTableVm.reload();
break;
case 1:
$('#singleGoodsBtn button').eq(0).removeClass('layui-btn-primary').siblings().addClass('layui-btn-primary');
singleGoodsTableVm.searchParameter.timeType = 1
_this.lineChartShow();
_this.totalShow();
singleGoodsTableVm.reload();
break;
}
});
_this.initializationData();
};
//初始化表格
vm.prototype.initializationData = function() {
var _this = this;
_this.dataListObj = table.render({
id: _this.dataId,
elem: _this.elem,
toolbar: _this.toolbar,
defaultToolbar: ['filter'],
url: _this.url,
page: _this.page,
cols: _this.cols,
done: _this.done,
where: $.extend(_this.where, _this.searchParameter),
limit: _this.limit,
});
};
//重新加载数据表
vm.prototype.reload = function() {
var _this = this;
_this.dataListObj = table.reload(_this.dataId, { //执行重载数据表
where: _this.searchParameter,
page: {
curr: 1
}
});
};
//初始化组件
vm.prototype.initializationModule = function(obj) {
var _this = this;
$.ajax({
url: obj.url,
data: obj.data,
success: function(res) {
var html = '';
for (var i in res.data) {
html += '';
}
$(obj.elem).html(html);
form.render();
}
});
};
//初始化事件监听
vm.prototype.eventMonitor = function(id) {
var _this = this;
//监听搜索表单事件
if (typeof(_this.formEvent) == "object") {
for (let i = 0; i < _this.formEvent.length; i++) {
form.on('submit(' + _this.formEvent[i] + ')', function(obj) {
_this.formInfoSearch(_this.formEvent[i], obj);
return false;
});
}
}
//监听类别切换事件
if (typeof(_this.tabEvent) == "object") {
for (let i = 0; i < _this.tabEvent.length; i++) {
form.on('submit(' + _this.tabEvent[i] + ')', function(obj) {
_this.tabInfoSearch(_this.tabEvent[i], obj);
return false;
});
}
}
return _this;
};
//搜索处理函数
vm.prototype.formInfoSearch = function(id, obj) {
var _this = this;
$(obj.elem).removeClass('layui-btn-primary').siblings().addClass('layui-btn-primary');
if (obj.elem.name == 4) {
return false
}
obj.field.timeType = obj.elem.name || 1;
_this.searchParameter = obj.field;
if (_this.dataId == "singleGoodsTableData") {
_this.lineChartShow();
_this.totalShow();
}
_this.reload();
};
vm.prototype.tabInfoSearch = function(id, obj) {
var _this = this;
console.log(_this)
$(obj.elem).removeClass('layui-btn-primary').siblings().addClass('layui-btn-primary');
obj.field.timeType = 1;
_this.searchParameter = obj.field;
if (id == 'goods') {
table.reload(tableId, {
url: 'goodsTableUrl',
cols: [
[{
type: 'numbers',
title: '排名',
width: 80
}, {
field: 'name',
title: '商品名称'
}, {
field: 'buyers',
title: '支付买家数',
align: 'center'
}, {
field: 'orders',
title: '支付订单数',
align: 'center'
}, {
field: 'dealAmount',
title: '成交金额(元)',
align: 'center'
}]
]
})
} else if (id == 'seller') {
table.reload(tableId, {
url: 'sellerTableUrl',
cols: [
[{
type: 'numbers',
title: '排名',
width: 80
}, {
field: 'name',
title: '商户名称'
}, {
field: 'buyers',
title: '支付买家数',
align: 'center'
}, {
field: 'orders',
title: '支付订单数',
align: 'center'
}, {
field: 'dealAmount',
title: '成交金额(元)',
align: 'center'
}]
]
});
}
};
//jquer事件绑定
vm.prototype.$event = function() {
var _this = this;
//监听头部工具栏
table.on('toolbar(' + _this.dataId + ')', function(obj) {
switch (obj.event) {
case 'export':
_this.dataExport();
break;
};
});
};
//数据导出处理函数
vm.prototype.dataExport = function() {
var _this = this;
_this.downloadParameter = '?';
for (var i in _this.dataListObj.config.where) {
_this.downloadParameter += "&" + i + '=' + _this.dataListObj.config.where[i];
}
_this.startDownload();
};
//启动下载
vm.prototype.startDownload = function() {
var _this = this;
window.open(window.hywa.config.href + window.hywa.config.port[_this.dataDownload] + _this.downloadParameter);
};
vm.prototype.lineChartShow = function() {
var _this = this;
$.ajax({
url: "singleOrderVolumeUrl",
data: {
timeType: singleGoodsTableVm.searchParameter.timeType,
beginTime: singleGoodsTableVm.searchParameter.beginTime,
endTime: singleGoodsTableVm.searchParameter.endTime,
},
success: function(res) {
console.log(res)
if (res.code == 0) {
let seriesData1 = [],
seriesData2 = [],
xAxisData = []
for (let i = 0; i < res.data.length; i++) {
xAxisData.push(res.data[i].time);
seriesData1.push(res.data[i].orders);
seriesData2.push(res.data[i].rateOfIncrease);
}
_this.lineChart = echarts.init(document.getElementById('goodsChart'));
var option = {
color: ['#1E9FFF', '#e34c4c'],
tooltip: {
trigger: 'axis',
},
color: ['#5FB878', '#1E9FFF'],
legend: {
data: ['下单量', '增长率']
},
grid: {
left: '2%',
right: '1%',
bottom: '2%',
top: '20%',
containLabel: true
},
xAxis: [{
type: 'category',
data: xAxisData,
axisPointer: {
type: 'shadow'
},
axisLine: {
show: false
},
axisTick: {
show: false
}
}],
yAxis: [{
type: 'value',
name: '下单量',
axisLabel: {
formatter: '{value}'
},
axisLine: {
show: false
},
axisTick: {
show: false
}
},
{
type: 'value',
name: '增长率',
axisLabel: {
formatter: '{value}'
},
axisLine: {
show: false
},
axisTick: {
show: false
}
}
],
series: [{
name: '下单量',
type: 'bar',
barMaxWidth: 35,
barGap: 0,
data: seriesData1,
itemStyle: {
normal: {
barBorderRadius: 20,
},
},
},
{
name: '增长率',
type: 'line',
yAxisIndex: 1,
data: seriesData2,
smooth: true
}
]
};
_this.lineChart.setOption(option);
window.addEventListener("resize", () => {
_this.lineChart.resize();
});
}
}
});
};
vm.prototype.totalShow = function() {
var _this = this;
$.ajax({
type: 'get',
url: "singleGoodsTotalUrl",
data: {
timeType: singleGoodsTableVm.searchParameter.timeType,
beginTime: singleGoodsTableVm.searchParameter.beginTime,
endTime: singleGoodsTableVm.searchParameter.endTime,
},
success: function(res) {
console.log(res)
typeTpl({
elem: ".goodsTotal",
tpl: totalTpl,
data: res.data[0]
});
},
})
};
//模板引擎
function typeTpl(obj) {
laytpl(obj.tpl.innerHTML).render(obj.data, function(html) {
$(obj.elem).html(html);
});
}
// 排行榜
let tableId = "rankTableData"
var rankTableVm = new vm({
dataId: 'rankTableData',
elem: '#rankTableData',
url: 'goodsTableUrl',
page: true,
where: {
beginTime: '',
endTime: '',
timeType: 1,
},
cols: [
[{
type: 'numbers',
title: '排名',
width: 80
}, {
field: 'name',
title: '商品名称'
}, {
field: 'buyers',
title: '支付买家数',
align: 'center'
}, {
field: 'orders',
title: '支付订单数',
align: 'center'
}, {
field: 'dealAmount',
title: '成交金额(元)',
align: 'center'
}]
]
});
//初始化事件监听
rankTableVm.formEvent = ['day', 'month', 'week', 'range'];
rankTableVm.tabEvent = ['goods', 'seller'];
rankTableVm.eventMonitor();
rankTableVm.$event();
// 单品分析
var singleGoodsTableVm = new vm({
dataId: 'singleGoodsTableData',
elem: '#singleGoodsTableData',
url: 'singleGoodsTableUrl',
page: true,
where: {
beginTime: '',
endTime: '',
timeType: 1,
},
cols: [
[{
field: 'productName',
title: '农产品名称',
align: 'center'
}, {
field: 'avgPrice',
title: '成交价格(元)',
align: 'center'
}, {
field: 'usersNumber',
title: '支付人数',
align: 'center'
}, {
field: 'ordersNumber',
title: '支付订单数',
align: 'center'
}, {
field: 'amount',
title: '成交金额(元)',
align: 'center'
}]
]
});
//初始化事件监听
singleGoodsTableVm.formEvent = ['day1', 'month1', 'week1', 'range1'];
singleGoodsTableVm.eventMonitor();
singleGoodsTableVm.$event();
});