VBDSM
/
UI


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291
							<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>负荷波动情况统计</title>
		<meta http-equiv="X-UA-Compatible" content="IE=8" />
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<link rel="stylesheet" type="text/css" href="http://static.vbdsm.com/css/bootstrap.min.css" />
		<link href="http://static.vbdsm.com/js/lib/easyui/themes/vber/easyui.css" rel="stylesheet" type="text/css" />
		<link href="http://static.vbdsm.com/css/style.css" rel="stylesheet" type="text/css" />
		<link rel="stylesheet" type="text/css" href="http://static.vbdsm.com/js/lib/easyui/themes/icon.css" />
		<link rel="stylesheet" type="text/css" href="http://static.vbdsm.com/js/lib/loadmask/jquery.loadmask.css" />
		<script type="text/javascript" src="http://static.vbdsm.com/js/lib/jquery-1.8.0.min.js"></script>
		<script type="text/javascript" src="http://static.vbdsm.com/js/lib/underscore-min.js"></script>
		<script type="text/javascript" src="http://static.vbdsm.com/js/lib/echarts/build/dist/echarts.js"></script>
		<script type="text/javascript" src="http://static.vbdsm.com/js/lib/zrender/js/jquery.js"></script>
		<script type="text/javascript" src="http://static.vbdsm.com/js/lib/zrender/js/esl/esl.js"></script>
		<script type="text/javascript" src="http://static.vbdsm.com/js/lib/highcharts/highcharts.js"></script>
		<script type="text/javascript" src="http://static.vbdsm.com/js/lib/easyui/jquery.easyui.min.js"></script>
		<script type="text/javascript" src="http://static.vbdsm.com/js/lib/easyui/locale/easyui-lang-zh_CN.js"></script>
		<script type="text/javascript" src="http://static.vbdsm.com/js/lib/loadmask/jquery.loadmask.min.js"></script>
		<script type="text/javascript" src="http://static.vbdsm.com/js/static.support.js"></script>
		<script type="text/javascript" src="http://static.vbdsm.com/js/easyui.support.js"></script>
		<script type="text/javascript" src="http://static.vbdsm.com/js/common.tools.js"></script>
		<script type="text/javascript" src="http://static.vbdsm.com/js/util.js"></script>
		<script src="/system/lang/platformAnalyse/config.json?script=1&auth_cid="></script>
		<script src="/js/geoJson/china-main-city/china-main-city-map.js"></script>
		<style type="text/css">
			body {
				font-family: "微软雅黑";
			}

			* {
				margin: 0px;
				padding: 0px;
			}

			td,
			th {
				padding: 2px;
			}

			dl {
				margin-top: 0;
				margin-bottom: 0px;
			}

			hr {
				margin-top: 7px;
				margin-bottom: 7px;
				border: 0;
			}

			#menu_left * {
				vertical-align: middle;
			}

			#detail td {
				height: 30px;
				line-height: 30px;
				color: #74b8f0;
				font-size: 15px;
			}

			#content {
				padding: 10px;
			}

			#content a {
				text-decoration: none;
			}

			#content th {
				height: 33px;
				line-height: 33px;
				font-size: 12px;
				border: thin solid #ddd;
			}

			#content td {
				height: 26px;
				line-height: 26px;
				font-size: 12px;
				border-bottom: thin solid #ddd;
				border-left: thin solid #ddd;
				border-right: thin solid #ddd;
			}

			.normal {
				text-align: center;
			}

			.normal_left {
				text-align: left;
			}

			.other {
				text-align: center;
				background-color: #eee;
			}

			.other_left {
				text-align: left;
				background-color: #eee;
			}

			.maxbox {
				width: 140px;
				height: 240px;
				border: 1px solid #dedede;
				float: right;
				margin-top: 10px;
			}

			.maxbox > div {
				width: 140px;
				height: 120px;
				background-color: #fff;
				position: relative;
				box-sizing: border-box;
				padding: 15px;
			}

			.maxbox > div.dis {
				background-color: #f2f2f2;
			}

			.maxbox > div.today .tit {
				font-weight: bold;
				font-size: 13px;
			}

			.maxbox > div dl {
				color: #878787;
				padding-top: 5px;
			}

			.maxbox > div dl dd {
				color: #000;
				font-weight: bold;
				font-size: 12px;
			}

			.maxbox > div.today.dis .tit {
				background: url(images/jintian-dis.png);
			}

			.maxbox > div.yesterday .tit {
				font-weight: bold;
				font-size: 13px;
			}

			.nodata {
				font-size: 12px;
				margin-top: 30px;
				text-align: center;
			}
		</style>

		<script type="text/javascript" charset="UTF-8"></script>
	</head>

	<body id="flu_body">
		<div data-options="region:'center'" style="overflow-x: hidden; min-width: 890px; border: solid 1px #99bbe8" id="center">
			<div class="container" style="width: 100%; min-width: 890px; min-height: 570px; border-top: 1px solid #c3c3c3; background-image: url('http://static.vbdsm.com/images/mapbg.jpg'); background-size: 100% 100%">
				<div class="row" style="min-width: 890px">
					<div class="col-xs-6">
						<!-- 地图 -->
						<div id="main" style="margin-left: 5px; position: relative; overflow: hidden; width: 500px; height: 400px; margin-top: 50px; float: left"></div>
					</div>
					<div class="col-xs-6">
						<!-- 总览信息-->
						<div id="detail1" style="overflow: hidden; width: 480px; height: 550px; float: right; margin-right: 10px">
							<div style="width: 100%; height: 265px; background-color: white; margin-top: 10px; border-radius: 5px">
								<div style="margin-top: 10px; width: 90%; height: 35px; border-bottom: 2px solid #74b8f0; margin-left: 5%; vertical-align: baseline; color: #74b8f0; font-size: 24px" align="center" id="title">全国运行情况</div>

								<div id="show1" style="margin-top: 10px; border-right: 2px solid #cccccc; height: 210px; width: 220px; margin-left: 5%; float: left">
									<div id="container1" style="height: 100%; width: 100%"></div>
								</div>

								<div style="margin-top: 10px; height: 180px; width: 190px; float: left">
									<table id="detail" cellspacing="0" cellpadding="0">
										<tr>
											<td align="left">&nbsp;监测用户：<span id="customer"></span></td>
										</tr>
										<tr>
											<td align="left">&nbsp;监测容量：<span id="total"></span></td>
										</tr>
										<tr>
											<td align="left">&nbsp;监测点数量：<span id="totalCount"></span></td>
										</tr>
										<tr id="show4">
											<td align="left">&nbsp;运行异常数量：<span id="NotonlineCount"></span></td>
										</tr>
									</table>
								</div>
							</div>
							<div style="width: 100%; height: 265px; background-color: white; margin-top: 10px; display: none; border-radius: 5px" id="cityContainer">
								<div style="margin-top: 10px; width: 90%; height: 35px; border-bottom: 2px solid #74b8f0; margin-left: 5%; vertical-align: baseline; color: #74b8f0; font-size: 24px" align="center" id="title1">全省运行情况</div>

								<div id="show2" style="margin-top: 10px; border-right: 2px solid #cccccc; height: 210px; width: 220px; margin-left: 5%; float: left">
									<div id="container2" style="height: 100%; width: 100%"></div>
								</div>

								<div style="margin-top: 10px; height: 180px; width: 190px; float: left">
									<table id="detail" cellspacing="0" cellpadding="0">
										<tr>
											<td align="left">&nbsp;监测用户：<span id="customer1"></span></td>
										</tr>
										<tr>
											<td align="left">&nbsp;监测容量：<span id="total1"></span></td>
										</tr>
										<tr>
											<td align="left">&nbsp;监测点数量：<span id="totalCount1"></span></td>
										</tr>
										<tr id="show3">
											<td align="left">&nbsp;运行异常数量：<span id="NotonlineCount1"></span></td>
										</tr>
									</table>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div id="menu_left" style="padding: 2px; background-color: #eee; border-bottom: solid 1px #ddd; min-width: 796px">
				<input type="hidden" id="currentProName" />
				<input type="hidden" id="currentCName" />
				<input type="hidden" id="currentDisName" /> &nbsp;日期1： <input id="date1" class="easyui-datebox" style="width: 100px" /> &nbsp;日期2： <input id="date2" class="easyui-datebox" style="width: 100px" /> &nbsp;日期3：
				<input id="date3" class="easyui-datebox" style="width: 100px" />
				<span>&nbsp;地区：</span>
				<!-- <input id="area1" /> -->
				<input id="area2" />
				<input id="area3" />
				<div style="display: inline-block">
					<span>&nbsp;行业：</span>
					<input id="industry" />
				</div>
				<div style="display: inline-block">
					<span>&nbsp;行业2：</span>
					<input id="industry2" />
					<a id="btnQuery" href="javascript:void(0)" class="easyui-linkbutton" title="查询信息" iconCls="icon-search">查询</a>
				</div>
			</div>
			<div>
				<div id="chartdiv" style="min-height: 300px; float: left"></div>
				<div class="maxbox">
					<div class="today" style="cursor: pointer" title="点击查看该时间点各企业负荷的波动情况">
						<input type="hidden" class="todayTime" />
						<div class="tit" id="firstDate"></div>
						<dl>
							<dt>最大波动负荷</dt>
							<dd></dd>
						</dl>
						<dl class="shijie">
							<dt>最大波动时间</dt>
							<dd></dd>
						</dl>
					</div>
					<div class="yesterday dis" style="cursor: pointer" title="点击查看该时间点各企业负荷的波动情况">
						<input type="hidden" class="yesterdayTime" />
						<div class="tit" id="secondDate"></div>
						<dl>
							<dt>最大波动负荷</dt>
							<dd></dd>
						</dl>
						<dl class="shijie">
							<dt>最大波动时间</dt>
							<dd></dd>
						</dl>
					</div>
				</div>
				<div style="clear: both"></div>
			</div>
			<div id="infoMap" class="infoBox" style="text-align: center; padding: 10px; padding-right: 160px; font-size: 12px; color: #333; font-weight: bold"></div>
		</div>
		<div id="win">
			<table border="0" cellspacing="0" cellpadding="0" style="width: 100%" id="content"></table>
		</div>
		<script>
			$(document).ready(function () {
				var bodyWidth = $("body").width()
				$("#chartdiv").width(bodyWidth - 165)
			})
			$(window).resize(function () {
				var bodyWidth = $("body").width()
				$("#chartdiv").width(bodyWidth - 165)
			})
		</script>
		<script type="text/javascript" src="./js/fluctuationLoadInfo.js"></script>
	</body>
</html>