UI/VbdsmUI_V2.1.1/src/pc/powerservice/onlineenergy/online_energy.js

/**
 *                  _oo8oo_
 *                 o8888888o
 *                 88" . "88
 *                 (| -_- |)
 *                 0\  =  /0
 *               ___/'==='\___
 *             .' \\|     |// '.
 *            / \\|||  :  |||// \
 *           / _||||| -:- |||||_ \
 *          |   | \\\  -  /// |   |
 *          | \_|  ''\---/''  |_/ |
 *          \  .-\__  '-'  __/-.  /
 *        ___'. .'  /--.--\  '. .'___
 *     ."" '<  '.___\_<|>_/___.'  >' "".
 *    | | :  `- \`.:`\ _ /`:.`/ -`  : | |
 *    \  \ `-.   \_ __\ /__ _/   .-` /  /
 *=====`-.____`.___ \_____/ ___.`____.-`=====
 *                  `=---=`
 *~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 *             佛祖保佑         永无bug
 *
 * 电量实时运行图表页面JS
 * @author grxie
 */
var companyId = $.getUrlParam("cid") //机构代码
var monitorId = undefined
$("input[type=radio][name=picType][value=1]").attr("checked", true) //默认选中电量变化
//$("input[type=radio][name=picType]:checked").val();//获取选择值
var type = "monitor" //监测点数据类型
$("#easyui-datagrid-tab").datagrid({
	border: false,
	fit: true,
	fitcolumns: true,
	animate: true,
	selectOnCheck: false,
	checkOnSelect: false,
	singleSelect: true,
	frozenColumns: [
		[
			{ field: "monitorName", title: "监控点名称", width: 120, align: "left" },
			/*{field:'today',title:'时间',width:120,align:'center',
	    	formatter:function(value,row,index){
    			if(value != null)
    				return new Date(value.toString().substr(0,4),parseInt(value.toString().substr(4,2))-1,value.toString().substr(6,2)).format('yyyy-MM-dd');
    		}	
      	},*/
			{ field: "total", title: "总电量(kW.h)", width: 100, align: "right" },
		],
	],
	columns: [
		[{ title: "小时", colspan: 24 }],
		[
			{ field: "1", title: "1", width: 80, align: "center" },
			{ field: "2", title: "2", width: 80, align: "center" },
			{ field: "3", title: "3", width: 80, align: "center" },
			{ field: "4", title: "4", width: 80, align: "center" },
			{ field: "5", title: "5", width: 80, align: "center" },
			{ field: "6", title: "6", width: 80, align: "center" },
			{ field: "7", title: "7", width: 80, align: "center" },
			{ field: "8", title: "8", width: 80, align: "center" },
			{ field: "9", title: "9", width: 80, align: "center" },
			{ field: "10", title: "10", width: 80, align: "center" },
			{ field: "11", title: "11", width: 80, align: "center" },
			{ field: "12", title: "12", width: 80, align: "center" },
			{ field: "13", title: "13", width: 80, align: "center" },
			{ field: "14", title: "14", width: 80, align: "center" },
			{ field: "15", title: "15", width: 80, align: "center" },
			{ field: "16", title: "16", width: 80, align: "center" },
			{ field: "17", title: "17", width: 80, align: "center" },
			{ field: "18", title: "18", width: 80, align: "center" },
			{ field: "19", title: "19", width: 80, align: "center" },
			{ field: "20", title: "20", width: 80, align: "center" },
			{ field: "21", title: "21", width: 80, align: "center" },
			{ field: "22", title: "22", width: 80, align: "center" },
			{ field: "23", title: "23", width: 80, align: "center" },
			{ field: "24", title: "24", width: 80, align: "center" },
		],
	],
})

var tab1State = false,
	tab2State = false
$("#tabs").tabs({
	fit: true,
	border: false,
	tabPosition: "bottom",
	onSelect: function (title, index) {
		tabIndex = index
		if (index == 0) {
			model = "monitor"
		} else if (index == 1) {
			if (!tab1State) {
				monitorId = undefined
				loadTreeData("powerunitTree", powerunitTreeUrl)
				tab1State = true
				type = "powerunit"
			}
		} else if (index == 2) {
			if (!tab2State) {
				monitorId = undefined
				loadTreeData("buildingsTree", buildingTreeUrl)
				tab2State = true
				type = "building"
			}
		}
	},
})

//加在树数据
function loadTreeData(renderObj, url) {
	ajax({
		url: url,
		type: "POST",
		dataType: "json",
		cache: false,
		success: function (data) {
			if (data.status == 1) {
				showTree(renderObj, data.data)
			} else {
				toast(data.msg)
			}
		},
	})
}

var monitorTreeUrl = "/web/getMonitorTree/tree.json?cid=" + companyId
var buildingTreeUrl = "/web/buildingmornitor/getBuildingMonitorTree.json?cid=" + companyId
var powerunitTreeUrl = "/web/monitor/powerunit/getPowerUnitMonitorTree.json?cid=" + companyId
//加载监测点数据
function showTree(renderObj, _data) {
	$("#" + renderObj).tree({
		method: "POST",
		lines: true,
		animate: true,
		data: _data,
		onClick: function (node) {
			monitorId = node.id
			if (node.attribute.type != undefined) {
				type = node.attribute.type
			}
			loadOnlineEnergyDate()
			onclickPowerRadio()
		},
		onLoadSuccess: function (node, data) {
			if (monitorId == undefined) {
				//首次加载时，选中默认节点
				var firstNode = $("#" + renderObj).tree("getChildren", $("#" + renderObj).tree("getRoot").target)[0]
				if (firstNode) {
					$("#" + renderObj).tree("select", firstNode.target)
					monitorId = firstNode.id
				}
				loadOnlineEnergyDate()
				onclickPowerRadio()
			}
		},
	})
}

function loadOnlineEnergyDate() {
	$("#datagrid-tab").mask("数据加载中...")
	//var tabIndex = $('#tabs').tabs('getTabIndex',$('#tabs').tabs('getSelected'));
	ajax({
		url: "/web/anal/energy/getTodayEnergyDate.json",
		data: { monitorId: monitorId, type: type },
		type: "POST",
		dataType: "json",
		cache: false,
		success: function (data) {
			if (data.status == 1) {
				var energyData = data.data[0]
				var gridData = {}
				gridData.monitorName = energyData.monitorName
				gridData.today = energyData.date
				var total = 0
				for (var i = 1; i <= 24; i++) {
					for (var j = 0; j < energyData.energyList.length; j++) {
						if (!energyData.energyList[j]) {
							continue
						}
						if (i == energyData.energyList[j].hour) {
							if (!isNaN(total + energyData.energyList[j].tpe)) total += energyData.energyList[j].tpe
							gridData["" + i] = energyData.energyList[j].tpe
						}
					}
				}
				gridData.total = total.toFixed(2)
				$("#easyui-datagrid-tab").datagrid({ data: [gridData] })
			} else {
				toast(data.msg)
			}
		},
	})
	$("#datagrid-tab").unmask()
}

function onclickPowerRadio() {
	var picType = $("input[type=radio][name=picType]:checked").val()
	ajax({
		url: "/web/online/energy/getChartsData.json",
		data: { monitorId: monitorId, picType: picType, type: type },
		type: "POST",
		dataType: "json",
		cache: false,
		success: function (data) {
			if (data.status == 1) {
				showAreaCharts(data.data)
			} else {
				toast(data.msg)
			}
		},
	})
}

Highcharts.setOptions({
	lang: {
		resetZoom: "返回",
		resetZoomTitle: "回到初始状态",
		printChart: "打印图表",
		downloadPNG: "导出PNG格式图片",
		downloadJPEG: "导出 JPEG格式图片",
		downloadPDF: "导出 PDF文档",
		downloadSVG: "导出 SVG矢量图片",
		contextButtonTitle: "打印和导出",
	},
	global: { useUTC: false },
})

function showAreaCharts(data) {
	//var chart = new Highcharts.Chart({
	$("#showchart").highcharts({
		chart: {
			renderTo: "showchart",
			zoomType: "x",
			spacingRight: 20,
		},
		title: {
			text: data.title,
		},
		xAxis: {
			showEmpty: true,
			type: "datetime",
			maxZoom: 24 * 3600, // one days
			title: {
				text: null,
			},
			labels: {
				formatter: function () {
					return Highcharts.dateFormat("%H:%M", this.value)
				},
			},
		},
		yAxis: {
			min: 0,
			title: {
				text: "电量（kW.h）",
			},
		},
		tooltip: {
			shared: true,
			formatter: function () {
				//%Y-%m-%d
				return Highcharts.dateFormat("%H点%M分", this.x) + "(" + this.y + ")"
			},
		},
		legend: {
			enabled: false,
		},
		plotOptions: {
			area: {
				fillColor: {
					linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
					stops: [
						[0, Highcharts.getOptions().colors[0]],
						[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get("rgba")],
					],
				},
				lineWidth: 1,
				marker: {
					enabled: false,
				},
				shadow: false,
				states: {
					hover: {
						lineWidth: 1,
					},
				},
				threshold: null,
			},
			series: {
				connectNulls: true,
			},
		},

		series: [
			{
				type: "area",
				//	        name: 'USD to EUR',
				pointInterval: 300 * 1000,
				pointStart: data.pointStart,
				data: data.series[0].data,
			},
		],
	})
}

$(document).ready(function () {
	loadTreeData("monitorTree", monitorTreeUrl)
})

//窗口大小变化时延时刷新图片大小
$(window).resize(function () {
	if ($("#showchart").highcharts()) {
		$("#showchart")
			.highcharts()
			.setSize($(window).width() - 230, $("#imageShow").height(), true)
	}
	/*window.resizeTimer = setTimeout(function() {
		window.clearTimeout(window.resizeTimer);
	},100);*/
})