ShWasher/src_0nline/ShwasherSys/ShwasherSys.Web/Views/Home/home2.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: 200
			}
		},
		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',
//				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],
//					color: 'rgba(220,20,60, 0.6)'
//				},
//				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 q_orderArr = [[],[],[],[]];
			let q_notOrderArr = [[], [], [], []];
			let arrMap = new Map();
			res.forEach(function (v, i) {
				//默认年份
				//let ev = qt == "1" ? `${v.year.substr(2,2)}-Q${v.quarterly}` : v.year;
				let ev = v.year;
				if (!yearArr.some(ele => ele === ev)) {
					yearArr.push(ev);
				}
				if (qt == "1") {
					if (v.statusId == 2 || v.statusId == 15 || v.statusId == 9) {
						if (!arrMap.has(ev + "@" + v.quarterly+ "@0")) {
							arrMap.set(ev + "@" + v.quarterly + "@0", v.count ? v.count : Number(!!v.count));

						} else {
							let preV = arrMap.get(ev + "@" + v.quarterly + "@0");
							arrMap.set(ev + "@" + v.quarterly + "@0", Number(preV) + v.count ? v.count:Number(!!v.count));
						}

					} else {
						if (!arrMap.has(ev + "@" + v.quarterly + "@1")) {
							arrMap.set(ev + "@" + v.quarterly + "@1", v.count ? v.count : Number(!!v.count));
						} else {
							let preV = arrMap.get(ev + "@" + v.quarterly + "@1");
							arrMap.set(ev + "@" + v.quarterly + "@1", Number(preV) + v.count ? v.count : Number(!!v.count));
						}
					}
					
				} else {
					//非完成状态的
					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);
						}
					}
					
				}
				
			});
			let q_order_all = [], q_not_order_all = [];
			if (qt == "1") {
				yearArr.forEach(function (y, i) {
					let a0 = 0, a1 = 0; //4个季度的值汇总之和
					for (let j = 1; j <= 4; j++) {
						let tmp1 = arrMap.get(y + "@" + j + "@1");
						tmp1 = tmp1 ? tmp1 : Number(!!tmp1);
						let tmp0 = arrMap.get(y + "@" + j + "@0");
						tmp0 = tmp0 ? tmp0 : Number(!!tmp0);
						q_orderArr[j - 1].push(tmp1);
						q_notOrderArr[j - 1].push(tmp0);
						a0 += tmp0;
						a1 += tmp1;
					}
					q_order_all.push(a1);
					q_not_order_all.push(a0);
				});
			} else {
				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;

			if (qt == "1") {
				console.log('yearArr', yearArr)
				console.log('q_orderArr', q_orderArr)
				console.log('q_notOrderArr', q_notOrderArr)
				console.log('q_order_all', q_order_all)
				console.log('q_not_order_all', q_not_order_all)
				option1.series = [];
				option1.legend.width = 600;
				option1.legend.padding = 10;
				option1.legend.data = [];
				option1.grid= {
					top:'15%'
				}
				q_orderArr.forEach((v, i) => {
					option1.legend.data.push(`Q${i + 1}完成订单`);
					option1.series.push(
						{
							type: 'bar',
							label: {
								show: true
							},
							data: v,
							name: `Q${i + 1}完成订单`,
							stack: 'one',
							itemStyle: {
								//							borderRadius: [8, 8, 0, 0],
								//							color: 'rgba(220,20,60, 0.6)'
							
							},
							animation: true
						}
					);
				});
				q_notOrderArr.forEach((v, i) => {
					option1.legend.data.push(`Q${i + 1}未完成订单`);
					option1.series.push(
						{
							type: 'bar',
							label: {
								show: true
							},
							data: v,
							name: `Q${i + 1}未完成订单`,
							stack: 'two',
							itemStyle: {
								//							borderRadius: [8, 8, 0, 0],
								//							color: 'rgba(220,20,60, 0.6)'

							},
							animation: true
						}
					);
				});
				option1.legend.data.push(`完成订单`);
				option1.legend.data.push(`未完成订单`);
				console.log("option1.legend.data", option1.legend.data)
				option1.series.push(
					{
						type: 'line',
						label: {
							show: true
						},
						data: q_order_all,
						name: `完成订单`,
						itemStyle: {
							//							borderRadius: [8, 8, 0, 0],
							//							color: 'rgba(220,20,60, 0.6)'
						
						},
						animation: true
					}
				);
				option1.series.push(
					{
						type: 'line',
						label: {
							show: true
						},
						data: q_not_order_all,
						name: `未完成订单`,
						itemStyle: {
							//							borderRadius: [8, 8, 0, 0],
							//							color: 'rgba(220,20,60, 0.6)'

						},
						animation: true
					}
				)
			} else {
				option1.legend.data = ["未完成订单明细", "完成订单明细"];
				option1.series = [];
				option1.series = [
					{
						type: 'bar',
						label: {
							show: true
						},
						data: notOrderArr,
						name: "未完成订单明细",
						stack: 'one',
						itemStyle: {
							//							borderRadius: [8, 8, 0, 0],
							//							color: 'rgba(220,20,60, 0.6)'
						},
						animation: true
					},
					{
						type: 'bar',
						label: {
							show: true
						},
						data: orderArr,
						name: "完成订单明细",
						stack: 'one',
						itemStyle: {
//							borderRadius: [8, 8, 0, 0],
//							color: 'rgba(220,20,60, 0.6)'
						},
						animation: true
					}
				];
				
			}
			
			orderStatusChart.setOption(option1,true);
		}
	});

}

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 = "已入库/已完成的排产单";
			option2.series = [
				{
					type: 'bar',
					label: {
						show: true
					},
					data: notStoreArr,
					name: "未完成排产单",
					stack: 'one',
					itemStyle: {
													//borderRadius: [8, 8, 0, 0],
													color: 'rgba(220,20,60, 0.6)'
					},
					animation: true
				},
				{
					type: 'bar',
					label: {
						show: true
					},
					data: storeArr,
					name: "已入库/已完成的排产单",
					stack: 'one',
					itemStyle: {
													borderRadius: [8, 8, 0, 0],
					},
					animation: true
				}
			];
			productionStatusChart.setOption(option2);
		}
	});
}