ShWasher/src_0nline/ShwasherSys/ShwasherSys.Web/Views/Home/home.js

let $totalHeaderbox = $('.totalHeaderbox');
var _orderStatusChart = document.getElementById('orderStatusChart');
var _productionStatusChart = document.getElementById('productionStatusChart');
var orderStatusChart = echarts.init(_orderStatusChart);
var productionStatusChart = echarts.init(_productionStatusChart);
$(function () {
	RenderHeaderAlert();

	initCharts();
	$(".order-info-box .box-tools input[type='radio']").on('click', function () {
		loadOrderStatusChart();
	});
	$(".production-info-box .box-tools input[type='radio']").on('click', function () {
		loadProductionStatusChart();
	});
});

function RenderHeaderAlert() {
	SaveAjax({
		url: window.appUrl + "Common/GetIndexAlertSum",
		dataType: "json",
		isAlert: false,
		isValidate: false,
		success: function (res) {
			$totalHeaderbox.empty();
			if (res && res.length > 0) {
				res.forEach(function (v, i) {
					let color = v.sumType == "1"
						? "aqua"
						: v.sumType == "2"
						? "red"
						: v.sumType == "3"
						? "green"
						: "aqua";
					$totalHeaderbox.append(`
									 <div class="col-md-4 col-sm-6 col-xs-12 totalHeaderItem" data-sumtype="${v.sumType}">
										<div class="info-box">
											<span class="info-box-icon bg-${color}"><img src="/Content/Images/index/${v
						.tipName}.png" /></span>
											<div class="info-box-content">
												<span class="info-box-text" >${v.sumName}</span>
												<span class="info-box-number">${v.quantity}</span>
											</div>
										</div>
									</div>`);
				});
				BindItemEvent();
			}
		}
	});
}

function BindItemEvent() {
	$('.totalHeaderItem').on('click',
		function (e) {
			let st = $(e.target).closest('.totalHeaderItem').data('sumtype');
			$('.alertContent > .row').css("display", "none");
			if (st == 1) {

				//GetOrderAlert();
			} else if (st == 2) {

				//GetProductionOrderAlert();
			} else if (st == 3) {

				//GetPackageApplyAlert();
			}
		});
}

var option1={},option2={};
function initCharts() {
	var option = {
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'cross',
				crossStyle: {
					color: '#999'
				}
			}
		},
		toolbox: {
			feature: {
				dataView: { show: false, readOnly: false },
				magicType: { show: true, type: ['line', 'bar'] },
				restore: { show: false },
				saveAsImage: { show: true }
			},
			iconStyle: {
				//color:'rgb(255,255,255)'
				borderColor: 'rgb(255,255,255)'
			}
		},
		legend: {
			data: ['Evaporation', 'Precipitation'],
			backgroundColor: 'rgb(255,255,255)',
			textStyle: {
				color: '#0087ED',
				fontSize: '12px',
				fontWeight: 300
			}
		},
		xAxis: [
			{
				type: 'category',
				data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
				axisPointer: {
					type: 'shadow'
				},
				axisLine: {
					lineStyle: {
						color: '#0087ED',
						width:2
					}
				}
			}
		],
		yAxis: [
			{
				type: 'value',
				name: '',
				min: 0,
				//max: 250,
				interval: 50,
				//axisLabel: {
				//	formatter: '{value} ml'
				//}
				axisLine: {
					lineStyle: {
						color: '#0087ED',
						width: 1
					}
				}
			}
		],
		series: [
			{
				name: 'Evaporation',
				type: 'bar',
				tooltip: {
					valueFormatter: function (value) {
						return value;
					}
				},
				label: {
					show: true
				},
				color:'rgba(220,20,60, 0.6)',
				data: [
					2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6
				],
				itemStyle: {
					borderRadius:[0,0,0,0]
				},
				animation:true
			},
			{
				name: 'Precipitation',
				type: 'bar',
				tooltip: {
					valueFormatter: function (value) {
						return value;
					}
				},
				label: {
					show: true
				},
				data: [
					2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6
				],
				itemStyle: {
					borderRadius: [8, 8, 0, 0]
				},
				animation: true
			}
		]
	};
	$.extend(true, option1, option);
	$.extend(true, option2, option);
	loadOrderStatusChart();
	loadProductionStatusChart();
}

function loadOrderStatusChart() {
	var qt = $('input[name="orderQt"]:checked').val();
	SaveAjax({
		url: window.appUrl + "Common/GetHomeStatusCharts?ct=1&qt="+qt,
		dataType: "json",
		isAlert: false,
		isValidate: false,
		success: function (res) {
			console.log(res);
			let yearArr = [], orderArr = [], notOrderArr = [];
			let arrMap = new Map();
			res.forEach(function (v, i) {
				//默认年份
				let ev = qt == "1" ? `${v.year.substr(2,2)}-Q${v.quarterly}` : v.year;
				if (!yearArr.some(ele => ele === ev)) {
					yearArr.push(ev);
				}
				
				//非完成状态的
				if (v.statusId == 2 || v.statusId == 15 || v.statusId == 9) {
					if (!arrMap.has(ev + "@0")) {
						arrMap.set(ev + "@0", v.count);
					} else {
						let preV = arrMap.get(ev + "@0");
						arrMap.set(ev + "@0", preV + v.count);
					}
				} else {
					if (!arrMap.has(ev + "@1")) {
						arrMap.set(ev + "@1", v.count);
					} else {
						let preV = arrMap.get(ev + "@1");
						arrMap.set(ev + "@1", preV + v.count);
					}
				}
			});
			yearArr.forEach(function (y, i) {
				orderArr.push(arrMap.get(y + "@1"));
				notOrderArr.push(arrMap.get(y + "@0"));
			});
			console.log('yearArr', yearArr)
			console.log('orderArr', orderArr)
			console.log('notOrderArr', notOrderArr)
			option1.xAxis[0].data = yearArr;
			option1.yAxis[0].interval = 1000;
			option1.legend.data = ["未完成订单明细", "完成订单明细"];
			option1.series[0].data = notOrderArr;
			option1.series[0].name = "未完成订单明细";
			option1.series[0].stack = 'one';
			option1.series[1].data = orderArr;
			option1.series[1].name = "完成订单明细";
			option1.series[1].stack = 'one';
			orderStatusChart.setOption(option1);
		}
	});

}

function loadProductionStatusChart() {
	var qt = $('input[name="productionQt"]:checked').val();
	SaveAjax({
		url: window.appUrl + "Common/GetHomeStatusCharts?ct=2&qt=" + qt,
		dataType: "json",
		isAlert: false,
		isValidate: false,
		success: function (res) {
			console.log(res);
			//1(新建),2（生产中）,3（入库中）,7（已经审核）   已入库/完成 4,5
			let yearArr = [], storeArr = [], notStoreArr = [];
			let arrMap = new Map();
			res.forEach(function (v, i) {
				//默认年份
				let ev = qt == "1" ? `${v.year.substr(2, 2)}-Q${v.quarterly}` : v.year;
				if (!yearArr.some(ele => ele === ev)) {
					yearArr.push(ev);
				}
				//非完成状态的
				if (v.statusId == 1 || v.statusId == 2 || v.statusId == 3 || v.statusId == 7) {
					if (!arrMap.has(ev + "@0")) {
						arrMap.set(ev + "@0", v.count);
					} else {
						let preV = arrMap.get(ev + "@0");
						arrMap.set(ev + "@0", preV + v.count);
					}
				} else if (v.statusId == 4 || v.statusId == 5) {//已入库 / 完成 4, 5
					if (!arrMap.has(ev + "@1")) {
						arrMap.set(ev + "@1", v.count);
					} else {
						let preV = arrMap.get(ev + "@1");
						arrMap.set(ev + "@1", preV + v.count);
					}
				}
			});
			yearArr.forEach(function (y, i) {
				storeArr.push(arrMap.get(y + "@1"));
				notStoreArr.push(arrMap.get(y + "@0"));
			});
			console.log('yearArr', yearArr)
			console.log('storeArr', storeArr)
			console.log('notStoreArr', notStoreArr)
			option2.xAxis[0].data = yearArr;
			
			option2.yAxis[0].interval = qt == "1"?500: 1000;
			option2.legend.data = ["未完成排产单", "已入库/已完成的排产单"];
			option2.series[0].data = notStoreArr;
			option2.series[0].stack = 'one';
			option2.series[0].name = "未完成排产单";
			option2.series[1].data = storeArr;
			option2.series[1].stack = 'one';
			option2.series[1].name = "已入库/已完成的排产单";
			productionStatusChart.setOption(option2);
		}
	});
}