PerfectEquation
/
GZ


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287
							<!DOCTYPE html>
<html>
<head>
<title>台区停电统计图</title>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="/nwyj/page/cockpit/context.js"></script>
<!--框架必需start-->
<script type="text/javascript" src="/nwyj/scripts/qui/libs/js/jquery.js"></script>
<script type="text/javascript"
	src="/nwyj/scripts/qui/libs/js/language/cn.js"></script>
<script type="text/javascript" src="/nwyj/scripts/qui/libs/js/main.js"></script>
<script type="text/javascript"
	src="/nwyj/scripts/qui/libs/js/framework.js"></script>
<link href="/nwyj/scripts/qui/libs/css/import_basic.css"
	rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" id="skin"
	prePath="/nwyj/scripts/qui/" scrollerY="false" />
<link rel="stylesheet" type="text/css" id="customSkin" />
<!--框架必需end-->
<!--树组件start-->
<link rel="stylesheet" type="text/css"
	href="/nwyj/scripts/qui/libs/js/tree/ztree/ztree.css" />
<script type="text/javascript"
	src="/nwyj/scripts/qui/libs/js/tree/ztree/ztree.js"></script>
<script type="text/javascript"
	src="/nwyj/scripts/qui/libs/js/form/selectTree.js"></script>
<script type="text/javascript"
	src="/nwyj/scripts/qui/libs/js/form/listerTree.js"></script>
<!--树组件end-->
<link rel="stylesheet" type="text/css"
	href="/nwyj/page/cockpit/chartPage.css">
<script type="text/javascript"
	src="/nwyj/page/cockpit/echarts-2.2.7/build/dist/echarts-all.js"></script>
<script type="text/javascript"
	src="/nwyj/page/cockpit/echarts-2.2.7/build/dist/chart/pie.js"></script>
<script type="text/javascript"
	src=" /nwyj/page/cockpit/cockpit_echart.js"></script>
<script type="text/javascript"
	src="/nwyj/page/cockpit/laydate/laydate.js"></script>
<script type="text/javascript" src="/nwyj/page/cockpit/webgis/util.js"></script>

<link rel="stylesheet" type="text/css" href="/nwyj/css/cockpit/charTitle.css">
</head>
<body>
	<div id="title" class="jsc_chartitle"></div>
	<div id="container"></div>
	<div id="choose_content">
		<h2>单位:</h2>
		<div id="compTree" class="selectTree _left_margin" selWidth="280"
			asyncMode="true" multiMode="true"></div>
		</br>
		<h2>数据源:</h2>
		<div id="from">
			<input type="radio" class="_left_margin" name="from" value="sys">系统数据源
			<input type="radio" class="_left_margin" name="from" value="peo"
				checked="checked">人工数据源
		</div>
		<h2>间隔时间：</h2>
		<select id="selectList" value=""></select><br />
		<div class="_startTime _hide">
			<h2>起始时间(YYYY-MM-DD HH:mm:ss):</h2>
			<input id="startTime" class="_left_margin"
				onclick="laydate({istime: true, format: 'YYYY-MM-DD hh:mm:ss'})">
		</div>
		<div class="_endTime">
			<h2>时间(YYYY-MM-DD HH:mm:ss):</h2>
			<input id="dataTime" class="_left_margin"
				onclick="laydate({istime: true, format: 'YYYY-MM-DD hh:mm:ss'})">
		</div>
		<h2 class="_center">
			<span class="_query_command">查询</span><span class="_rend_command">刷新</span>
		</h2>
	</div>
	<script type="text/javascript">
		/******************************************************查询条件***********************************************************/
		//图表用参数
		// dept_id//user_id//user_name//dept_name
		var customMadeTool=["search","render","list","enlarge","resource"];//父页面显示的工具栏
		var interval = null;//定时器
		var dataFrom = "peo";//数据源的状态
		var n = intervalTime;//初始化默认刷新时间
		var list = intervalList//刷新时间list列表
		var urlParams = resolveUrl();//主页面传递参数
		HTitle["fixed"] = urlParams["dept_name"];//固定标题
		HTitle["change"] = urlParams["dept_name"];//可变标题

		var text = HTitle[tState] + taiQuTitleChart;

		var childId = "'" + urlParams["dept_id"] + "'";//该部门的ID
		var bindChildId = childId.split(",");//绑定点击事件查询id
		var parentId = urlParams["parentId"];//该部门父部门的ID
		var dateTime = getNowDateTime();//获取现在的时间
		var chart = null;//图表对象
		var categorie = [ urlParams["dept_name"] ];//部门名称
		var state = [ {
			name : "已恢复",
			column : "TD_COUNT"
		}, {
			name : "未恢复",
			column : "UNRECOVERED"
		} ];

		var deptUrl = deptTreePath;//组织结构树的映射路径
		function init() {
			//加载刷新时间列表
			loadSelect($("#selectList"), list);
			// 添加额外属性主要用于最初的初始节点
			$("#compTree").attr('params',
					'{"deptId":"' + urlParams["dept_id"] + '"}');
			// 异步加载请求地址
			$("#compTree").attr('url', deptUrl);
			$.post(deptUrl, {
				"id" : urlParams["dept_id"]
			}, function(data) {
				$("#compTree").data("data", data);
				$("#compTree").render();
			}, "json");
			$("._query_command").on("click", query);
			$("._rend_command").on("click", rend);

		}

		/**
		 *时时数据刷新
		 */
		function rend() {
			//移除定时器
			interval = removeRendChart(interval);
			//获取刷新间隔时间
			n = getInterval($("#selectList"), n);
			//获取部门Id
			getDepartment($("#compTree"), taiQuTitleChart);
			bindChildId = childId.split(",");//绑定点击事件查询id
			//检查查询条件参数
			//alert("parentId=" + parentId + ";childId=" + childId + ";n=" + n+ ";")
			//加载表格
			rendChart();
			interval = outoRendChart(interval, n, rendChart);
		}

		/**
		 *查询历史
		 */
		function query() {
			//移除定时器
			interval = removeRendChart(interval);
			//获取部门
			getDepartment($("#compTree"), taiQuTitleChart);
			bindChildId = childId.split(",");//绑定点击事件查询id
			//获取时间
			dateTime = getTimeChart($("#dataTime"));
			//加载
			//检查查询条件的参数
			//alert("parentId=" + parentId + ";childId=" + childId + ";dateTime="+ dateTime + ";")
			loadChart(parentId, childId, dateTime, "5");
		}
		/**
		 *初始化加载图表，
		 *根据系统配置参数判断初始化加载本部门的数据还是直辖部门的数据
		 *如果是直辖部门，根据配置初始化加载的部门数量选择加载该配置量的部门
		 */
		function getInitParams() {
			//当oadState["lineChart"]==0时，加载本部门的数据
			//否则加载直辖loadState["lineChart"]数量的部门，
			//如果直辖部门大于loadState["lineChart"]数量，则显示该数量部门
			//否则显示实际部门数量
			if (loadState["lineChart"] == 0) {
				rendChart();
			} else {
				$.post(path+ "ws/ChartDaoServiceImpl/ChartDaoServiceImpl/getParentsInfo",
								{
									comId : urlParams["dept_id"],
									count : loadState["lineChart"]
								},
								function(result) {
									categorie = [];
									HTitle["change"] = "";
									childId = "'"
											+ result.rows.childId.join("','")
											+ "'";
									bindChildId = childId.split(",");
									categorie = result.rows.childName;
									HTitle["change"] = '"'
											+ categorie.join('","') + '"';
									text = HTitle[tState] + taiQuTitleChart;
									//alert("parentId=" + parentId + ";childId="+ childId + ";dateTime=" + dateTime);
									parentId = urlParams["dept_id"];
									rendChart();
									interval = outoRendChart(interval, n,
											rendChart);
								}, "json");
			}
		}
		//初始化
		$(function() {
			//初始化界面
			init();
			getInitParams();
		});

		function rendChart() {
			loadChart(parentId, childId, getNowDateTime(), "5");
		}

		/********************************************************************************************************************/
		function loadChart(compId, childId, date, typeId) {
			$.post(path+ "ws/ChartDaoServiceImpl/ChartDaoServiceImpl/getChartInfo",{comId : compId,childId : childId,typeId : typeId,date : date},function(result) {
				var leArr = [];
				var xArr = [];
				var sArr = [ {name : '访问来源',type : 'pie',selectedMode : 'single',radius : [ "20%", "50%" ],x : '20%',width : '40%',funnelAlign : 'right',
									itemStyle : {
										normal : {
											label : {
												position : 'inner'
											},
											labelLine : {
												show : false
											}
										}
									},
									data : []
								}, 
							{name : '访问来源',type : 'pie',radius : [ "60%", "80%" ],x : '60%',width : '35%',funnelAlign : 'left',data : []} ]
				var opParams = null;
				if (result.length > 0) {
					opParams = loadData(leArr, xArr, sArr,
					result,date);
				} else {
					opParams = {title : "",//标题
								unit : "单位：条",//单位
								leArr : leArr,//图例
								xArr : xArr,//x轴
								sArr : sArr
									//主数据
								};
				}

				//创建图表并加载图表数据
				chart=getEchart($("#container"),getOption,opParams,chart);
				//监听窗口大小变化
				$(window).resize(function(){
				 	chart.resize();
				 });
			}, "json");
			$("#title").html(text);
		};

		//拼接echart图表的数据
		function loadData(leArr, xArr, sArr, result,date) {
			for (var index = 0, len = result.length; index < len; index++) {
				leArr.push(categorie[index])
				//console.log("==="+JSON.stringify(result[index]));
		
				//console.log("===TQ_TD_COUNT=="+(changeQ(result[index]["TQ_TD_COUNT"])- changeQ(result[index]["TQ_UNRECOVERED"])));
				//console.log("===TQ_UNRECOVERED=="+result[index]["TQ_UNRECOVERED"]);
				
				sArr[0].data.push({
					//图表数据
					name : categorie[index],
					value : changeQ(result[index]["TQ_TD_COUNT"])
				});
				sArr[1].data.push({
					//图表数据
					name : categorie[index] + "以恢复",
					value : changeQ(result[index]["TQ_TD_COUNT"])
							- changeQ(result[index]["TQ_UNRECOVERED"])
				});
				sArr[1].data.push({
					//图表数据
					name : categorie[index] + "未恢复",
					value : changeQ(result[index]["TQ_UNRECOVERED"])
				});
			}
			
			return {
				title : "",//标题
				unit : "单位：条",//单位
				leArr : leArr,//图例
				xArr : xArr,//x轴
				sArr : sArr
			//主数据
			};
		}
	</script>
</body>
</html>