dianwang
/
dianwangAdm


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527
							<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>导入</title>
    <script src="../../js/min-loader-next.js"></script>
    <script src="../../js/report.js"></script>
    <script src="../../js/echarts.min.js"></script>
    <link rel="stylesheet" href="../../plugins/layui/lay/modules/steps/style.css"></link>
    <style>
    	.layui-input {
    		width : 200px;
    	}
    	.layui-upload-drag .layui-icon {
    		font-size: 18px;
		    color: #fff;
		}
		.layui-btn-sm {
		    height: 22px;
		    line-height: 22px;
		    padding: 0 10px;
		    font-size: 12px;
		}
    </style>
</head>
<body class="content">
	<div id="step_demo" class="step-body" style = "margin-top : 20px; margin-left: 10%;">
	    <div class="step-header" style="width:80%;overflow: hidden;">
	        <ul>
	            <li>
	                <span class="step-name">选择报告/报表</span>
	            </li>
	            <li>
	                <span class="step-name">选择文件</span>
	            </li>
	            <li>
	                <span class="step-name">数据预览</span>
	            </li>
	            <li>
	                <span class="step-name">生成报告/报表</span>
	            </li>
	        </ul>
	    </div>
	</div>
	<div class="order-body" style = "width: 80%; margin-left : 10%;height : 450px" name = "step">
		<form class="layui-form" style = "text-align : center;">
			<div class="order-select" id="content" style = "background: #FFFFFF;border-radius: 8px;padding: 16px 1.4rem;">
				<div class="layui-inline" style="margin-top: 150px;">
					<label class="f12-gray4">请选择文件类型:</label>
					<div id = "reportTypeDiv" class="layui-inline">
					</div>
				</div>
				<div style="margin-top : 200px;">
			      <button type="button" class="layui-btn" style = "width : 214px" onclick = "goStep(2)">下一步</button>
			    </div>
			</div>
		</form>
	</div>
	<div name = "step" style = "width: 80%; margin-left : 10%;height : 300px; display : none; text-align : center;">
		<div style = "width: 80%; margin-left : 0px; height : 200px" class = "layui-upload-drag" >
		  	<input id = "chooseFenxiReport" type="text" style = "display : inline-block" class="layui-input" placeholder="请选择分析表">
		</div>
		<div style="margin-top : 50px;">
	      <button type="button" class="layui-btn" style = "width : 214px" onclick = "tableYulan()">下一步</button>
	    </div>
	</div>
	<div name = "step" style = "height : 300px; display : none; text-align : center;">
		<div style = "width: 100%; margin-left : 0px;" class = "layui-upload-drag" >
		  <p id = "fileName" contenteditable="true">国网泰安供电公司2020年8月份配网运行分析月报</p>
		  <div id = "reportDiv" style = "text-align:left;"></div>
		</div>
		<div style="margin-top : 50px;">
	      <button type="button" class="layui-btn" style = "width : 214px" onclick = "goStep(4)">下一步</button>
	    </div>
	</div>
	<div name = "step" style = "width: 80%; margin-left : 10%;height : 300px; display : none; text-align : center; margin-top : 50px;">
		<i class="layui-icon layui-icon-ok-circle" style="font-size: 100px; color: #009688;"></i>
		<p style = "font-weight: 700;font-size: 25px;">报表生成成功！</p>
		<p style = " color: #b2bbc2;">可在数据仓库-报表管理进行查看</p>
		<div style="margin-top : 100px;">
	      <button type="button" class="layui-btn" style = "width : 214px" onclick = "finish()">完成</button>
	    </div>
	</div>
	
    <script>
		var pageId = getQueryString("pageId");
		var reportType = getQueryString("reportType");// 00日报01周报02月报
		
		var $step;
		layui.config({
	        base: '../../plugins/layui/lay/modules/steps/'
	    }).use(['steps','jquery'],function(){
	    	var $ = layui.$;
    	    $step = $("#step_demo").step();
		})
		
		$("#chooseFenxiReport").click(function(){
			var openPageId = pageId + "-01";
    	  	openMainTabPage(openPageId, "报表生成", "common/chooseDdyFxb.html?pageId="+openPageId, '', pageId, chooseBack);
		})
		
		// 选择分析表返回
		var fxbReport;
		function chooseBack() {
			fxbReport = getTempVal("fxbReport");
			$("#chooseFenxiReport").val(fxbReport.fileName);
		}
		
		// 范围类型
		layui.use('form', function(){
			var form = layui.form;
			$.request({
				action : 'BranchReportTypeAction/branchReportTypeQuery',
				data : {
					reportType : reportType
				},
				success : function(data) {
					var html = '<select id = "reportType" lay-filter="reportTypeFilter"><option value = "">请选择</option>';
					var fileTypeList = data.data;
					for (var i = 0; i < fileTypeList.length; i ++) {
						var fileTypeInf = fileTypeList[i];
						html += '<option value = "' + fileTypeInf.id + '_' + fileTypeInf.type + '_' + fileTypeInf.timeType + '">' + fileTypeInf.name + '</option>';
					}
					html += '</select>';
					$("#reportTypeDiv").html(html);
					form.render();
				},
				error : function(data2) {
					$.ErrorAlert(data2.MINErrorMessage);
				}
    	  	});
			
			form.on('select(reportTypeFilter)', function(data){
				var value = data.value;
				if (!isEmpty(value)) {
					var reportTypeId = value.split("_")[0];
					
					$("#fileName").html(data.elem.selectedOptions[0].text);
					
					if (!isEmpty(reportTypeId)) {
						  $.request({
								action : 'BranchReportTypeAction/fileTypeOfReportType',
								data : {
									reportTypeId : reportTypeId
								},
								success : function(data) {
									fileType = data.data;
									setTempVal("fileType", fileType);
									
									var utilDataInf = data.utilDataInf;
									if (!isEmpty(utilDataInf)) {
										$("#utilName").html(utilDataInf.fileName);
										$("#utilName").attr("fileName", utilDataInf.fileName);
										setTempVal("utilExcelDataDetail", utilDataInf.excelData);
										var algorithmInf = data.algorithmInf;
										if (!isEmpty(algorithmInf)) {
											$("#algorithmName").html(utilDataInf.fileName+"算法");
											$("#algorithmName").attr("reportTypeId", reportTypeId);
										}
									}
									
								},
								error : function(data2) {
									$.ErrorAlert(data2.MINErrorMessage);
								}
				    	  });
					  }
				}
			});      
		})
		
		function goStep (step) {
			var reportInf = $("#reportTypeDiv").find("select option:selected").val();
			if (step == 2) {
				if (isEmpty(reportInf)) {
					$.ErrorAlert("请选择上传文件类型!");
					return;
				}
			}
			
			if (step == 4) {
				var fileName = $("#fileName").html();
				$.request({
					action : 'ReportManageAction/fileInfReportSubmit',
					data : {
						reportData : JSON.stringify(reportData),
						reportInf : reportInf,
						fileName : fileName,
						ddyFxbId : fxbReport.id
					},
					success : function(data) {
						if (data.code == 0) {
							$step.goStep(step);
							var stepDiv = $("div[name = 'step']");
							for (var i = 0; i < stepDiv.length; i ++) {
								if (step == (i + 1)) {
									$(stepDiv[i]).show();
								} else {
									$(stepDiv[i]).hide();
								}
							}
				    	} else {
				    		$.ErrorAlert(res.MINErrorMessage);
				    	}
					},
					error : function(data2) {
						$.ErrorAlert(data2.MINErrorMessage);
					}
	    	  	});
				return;
			}
			
			$step.goStep(step);
			var stepDiv = $("div[name = 'step']");
			for (var i = 0; i < stepDiv.length; i ++) {
				if (step == (i + 1)) {
					$(stepDiv[i]).show();
				} else {
					$(stepDiv[i]).hide();
				}
			}
		}
		
		function finish() {
			deleteTabPageParent(pageId); 
		}
		
		// 报表excel
		var reportData = null;
		// 预览
		function tableYulan() {
			var reportInf = $("#reportTypeDiv").find("select option:selected").val();
			if (isEmpty(fxbReport)) {
				$.ErrorAlert("请选择分析表!");
				return;
			}
			
			// 查询符合条件的明细数据,生成预览数据
			$.request({
				action : 'ReportManageAction/reportNeedDataDetail',
				data : {
					reportInf : reportInf,
					ddyFxbId : fxbReport.id
				},
				success : function(data) {
					if (data.code == 0) {
						var resData = data.data;
						var desc1 = resData.desc1;
						var tableArray1 = resData.tableArray1;
						var tubiaoData1 = resData.tubiaoData1;
						var areaList = resData.areaList;
						var desc2 = resData.desc2;
						var tableArray2 = resData.tableArray2;
						var desc3 = resData.desc3;
						var tableArray3 = resData.tableArray3;
						var desc4 = resData.desc4;
						var tableArray4 = resData.tableArray4;
						var tubiaoData2 = resData.tubiaoData2;
						
						var dataMap = resData.dataMap;
						reportData = resData;
						
						for(var key in dataMap){
							var replaceStr = "${" + key + "}";
							if (key == "month") {
								desc1 = desc1.replace(/\${month}/g, dataMap[key]);
								desc2 = desc2.replace(/\${month}/g, dataMap[key]);
								desc3 = desc3.replace(/\${month}/g, dataMap[key]);
								desc4 = desc4.replace(/\${month}/g, dataMap[key]);
							} else if (key == "year") {
								desc1 = desc1.replace(/\${year}/g, dataMap[key]);
								desc2 = desc2.replace(/\${year}/g, dataMap[key]);
								desc3 = desc3.replace(/\${year}/g, dataMap[key]);
								desc4 = desc4.replace(/\${year}/g, dataMap[key]);
							} else {
								desc1 = desc1.replace(replaceStr, dataMap[key]);
								desc2 = desc2.replace(replaceStr, dataMap[key]);
								desc3 = desc3.replace(replaceStr, dataMap[key]);
								desc4 = desc4.replace(replaceStr, dataMap[key]);
							}
						}
						$("#reportDiv").append(desc1);
						
						// 压受考核及预警情况统计见表
						var tableArray1Html = '<table class="layui-table">';
						for (var i = 0; i < tableArray1.length; i ++) {
							var child = tableArray1[i];
							tableArray1Html += '<tr>';
							for (var j = 0; j < child.length; j ++) {
								var h = child[j];
								tableArray1Html += '<td>' + h + '</td>';
							}
							tableArray1Html += '</tr>';
						}
						tableArray1Html += '</table>';
						$("#reportDiv").append(tableArray1Html);
						
						$("#reportDiv").append('<div id = "tubiaoData1" style="width: 1200px;height:600px;"></div>');
						var ymin1 = '';
						var ymax1 = '';
						var ymin2 = '';
						var ymax2 = '';
						var ymin3 = '';
						var ymax3 = '';
						for (var i = 0; i < tubiaoData1.length; i ++) {
							var childMap = tubiaoData1[i];
							var childList = childMap.data;
							for (var j = 0; j < childList.length; j ++) {
								if (i == 0) {
									childList[j] = parseInt(childList[j]);
								} else {
									childList[j] = parseFloat(childList[j].replace("%", ""));
								}
								// 获取最大最小值
								if (i == 0) {
									if (isEmpty(ymin1)) {
										ymin1 = childList[j];
									} else if (ymin1 > childList[j]) {
										ymin1 = childList[j];
									}
									if (isEmpty(ymax1)) {
										ymax1 = childList[j];
									} else if (ymax1 < childList[j]) {
										ymax1 = childList[j];
									}
								}
								if (i == 1) {
									if (isEmpty(ymin2)) {
										ymin2 = childList[j];
									} else if (ymin2 > childList[j]) {
										ymin2 = childList[j];
									}
									if (isEmpty(ymax2)) {
										ymax2 = childList[j];
									} else if (ymax2 < childList[j]) {
										ymax2 = childList[j];
									}
								}
								if (i == 2) {
									if (isEmpty(ymin3)) {
										ymin3 = childList[j];
									} else if (ymin3 > childList[j]) {
										ymin3 = childList[j];
									}
									if (isEmpty(ymax3)) {
										ymax3 = childList[j];
									} else if (ymax3 < childList[j]) {
										ymax3 = childList[j];
									}
								}
							}
						}
						var tubiaoData1Charts = echarts.init(document.getElementById('tubiaoData1'));
						var colors = ['#5793f3', '#d14a61', '#675bba'];
						var tubiaoData1Option = {
								color: colors,
							    tooltip: {
							        trigger: 'axis',
							        axisPointer: {
							            type: 'cross'
							        }
							    },
							    toolbox: {
							        feature: {
							            dataView: {show: true, readOnly: false},
							            magicType: {show: true, type: ['line', 'bar']},
							            restore: {show: true},
							            saveAsImage: {show: true}
							        }
							    },
							    legend: {
							        data: ['治理完成户数', '治理完成率', '考核低压占比']
							    },
							    xAxis: [
							        {
							            type: 'category',
							            data: areaList,
							            axisPointer: {
							                type: 'shadow'
							            }
							        }
							    ],
							    yAxis: [
							        {
							            type: 'value',
							            name: '治理完成户数',
							            min: ymin1,
							            max: ymax1,
							            position: 'left',
							            axisLine: {
							                lineStyle: {
							                    color: colors[0]
							                }
							            }
							        },
							        {
							            type: 'value',
							            name: '治理完成率',
							            min: ymin2,
							            max: ymax2,
							            position: 'right',
							            axisLabel: {
							                formatter: '{value} %'
							            },
							            axisLine: {
							                lineStyle: {
							                    color: colors[1]
							                }
							            }
							        },{
							            type: 'value',
							            name: '考核低压占比',
							            min: ymin3,
							            max: ymax3,
							            offset: 80,
							            position: 'right',
							            axisLabel: {
							                formatter: '{value} %'
							            },
							            axisLine: {
							                lineStyle: {
							                    color: colors[2]
							                }
							            }
							        }
							    ],
							    series: tubiaoData1
							};
						tubiaoData1Charts.setOption(tubiaoData1Option);
						
						$("#reportDiv").append(desc2);
						
						var tableArray2Html = '<table class="layui-table">';
						for (var i = 0; i < tableArray2.length; i ++) {
							var child = tableArray2[i];
							tableArray2Html += '<tr>';
							for (var j = 0; j < child.length; j ++) {
								var h = child[j];
								tableArray2Html += '<td>' + h + '</td>';
							}
							tableArray2Html += '</tr>';
						}
						tableArray2Html += '</table>';
						$("#reportDiv").append(tableArray2Html);
						
						$("#reportDiv").append(desc3);
						
						var tableArray3Html = '<table class="layui-table">';
						for (var i = 0; i < tableArray3.length; i ++) {
							var child = tableArray3[i];
							tableArray3Html += '<tr>';
							for (var j = 0; j < child.length; j ++) {
								var h = child[j];
								tableArray3Html += '<td>' + h + '</td>';
							}
							tableArray3Html += '</tr>';
						}
						tableArray3Html += '</table>';
						$("#reportDiv").append(tableArray3Html);
						
						$("#reportDiv").append(desc4);
						var tableArray4Html = '<table class="layui-table">';
						for (var i = 0; i < tableArray4.length; i ++) {
							var child = tableArray4[i];
							tableArray4Html += '<tr>';
							for (var j = 0; j < child.length; j ++) {
								var h = child[j];
								tableArray4Html += '<td>' + h + '</td>';
							}
							tableArray4Html += '</tr>';
						}
						tableArray4Html += '</table>';
						$("#reportDiv").append(tableArray4Html);
						
						
						$("#reportDiv").append('<div id = "tubiaoData2" style="width: 1200px;height:600px;"></div>');
						var tubiaoData2Charts = echarts.init(document.getElementById('tubiaoData2'));
						var tubiaoData2LegendData = new Array();
						for (var i = 0; i < tubiaoData2[0].data.length; i ++) {
							tubiaoData2LegendData.push(tubiaoData2[0].data[i].name);
						}
						var tubiaoData2Option = {
							    title: {
							        text: '受考核低电压用户原因',
							        subtext: '分类情况统计',
							        left: 'center'
							    },
							    tooltip: {
							        trigger: 'item',
							        formatter: '{a} <br/>{b} : {c} ({d}%)'
							    },
							    toolbox: {
							        show: true,
							        feature: {
							            mark: {show: true},
							            dataView: {show: true, readOnly: false},
							            magicType: {
							                show: true,
							                type: ['pie', 'funnel']
							            },
							            restore: {show: true},
							            saveAsImage: {show: true}
							        }
							    },
							    legend: {
							        orient: 'vertical',
							        left: 'left',
							        data: tubiaoData2LegendData
							    },
							    series: tubiaoData2
							};
						tubiaoData2Charts.setOption(tubiaoData2Option);
						goStep(3);
			    	} else {
			    		$.ErrorAlert(res.MINErrorMessage);
			    	}
				},
				error : function(data2) {
					$.ErrorAlert(data2.MINErrorMessage);
				}
    	  	});
		}
    </script>
</body>

</html>