;
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 = {
timeType: '2'
}; //搜索参数
_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;
_this.initializationData();
_this.lineChartShow();
_this.totalShow();
};
//初始化表格
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;
};
//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.lineChartShow = function() {
var _this = this;
$.ajax({
url: "singleOrderVolumeUrl",
data: {
timeType: _this.searchParameter.timeType
},
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);
_this.lineChart.resize();
window.addEventListener("resize", () => {
_this.lineChart.resize();
});
}
}
});
};
vm.prototype.totalShow = function() {
var _this = this;
$.ajax({
type: 'get',
url: "singleGoodsTotalUrl",
data: {
timeType: _this.searchParameter.timeType
},
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);
});
}
// 单品分析
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();
});