supply-chain-web/views/home/index.js

;
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 = '<option value="">' + obj.prompt + '</option>';
				for (var i in res.data) {
					html += '<option value="' + res.data[i].id + '">' + res.data[i].name +
						'</option>';
				}
				$(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();

});