~whychwj/haha.git

			@@ -17,9 +17,19 @@
			<meta http-equiv="description" content="This is my page">
			<title>机房流量统计查询</title> <!--流量统计-->
			<link rel="stylesheet" type="text/css" href="pages/css/base.css">
			<link rel="stylesheet" type="text/css" href="jqueryui/jquery-ui.min.js">
			<link rel="stylesheet" type="text/css" href="jqueryui/jquery-ui.css">
			<link rel="stylesheet" type="text/css" href="src/css/layui.css">
			<link rel="stylesheet" type="text/css" href="pages/css/mylayui.css">
			<style>
			.dataTypeCont {
			width: 160px;
			text-align: center;
			}
			.dataTypeCont .layui-form-switch {
			min-width: 70px;
			margin-top: 4px;
			}
			</style>
			</head>
			<body>
			<!--头部内容开始-->
			@@ -41,6 +51,7 @@
			<td><s:text name="Computer_name"/></td> <!-- 机房名称 -->
			<td>统计方式</td>
			<td colspan="2">时间段</td>
			<td>数据类型</td>
			</tr>
			<tr>
			<td>
			@@ -120,6 +131,15 @@
			</div>
			</div>
			</td>
			<td class="dataTypeCont">
			<div class="layui-form">
			<div class="layui-form-item">
			<div class="layui-input-block">
			<input type="checkbox" name="close" lay-skin="switch" lay-filter="dataType" lay-text="折线图\|表格">
			</div>
			</div>
			</div>
			</td>
			</tr>
			</table>
			</div>
			@@ -128,6 +148,13 @@
			<div class="layui-page-content">
			<!-- 表格内容 -->
			<table id="pageTbl" lay-filter="pageTbl"></table>
			</div>
			<div id="echarts-container" class="abs abs-top220 bg-red abs-index1n abs-bottom70">
			<div class="abs-container">
			<div class="graph">
			<div class="graph-content" id="lineGraph"></div>
			</div>
			</div>
			</div>
			<!-- 分页内容 -->
			<div id="paging">
			@@ -138,15 +165,26 @@
			<!-- 整体灰色遮罩层 -->
			<div id="allShade"></div>
			<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
			<script type="text/javascript" src="js/echarts.js"></script>
			<script type="text/javascript" src="jqueryui/jquery-ui.min.js"></script>
			<script type="text/javascript" src="src/layui.js"></script>
			<script type="text/javascript" src="pages/js/mylayui.js"></script>
			<script type="text/javascript" src="pages/js/pages/control-common.js"></script>
			<script type="text/javascript">
			layui.use(['form', 'table', 'layer', 'laydate', 'element'], function() {
			var table = layui.table; // 获取表格模块
			var form = layui.form; // 获取表单模块
			var layer = layui.layer; // 获取弹出框模块
			var laydate = layui.laydate; // 获取日期模块
			var createLine = GLOBAL.eleDataGraph.createLine; // 生成折线图
			var $lineGraph = $('#lineGraph').get(0);
			var lineGraph = echarts.init($lineGraph);
			createLine(lineGraph, {});

			// 页面大小改变模块
			$(window).resize(function() {
			lineGraph.resize();
			});

			// 定义时间模块
			var date = new Date();
			@@ -391,10 +429,22 @@
			}
			});

			// 切换数据显示类型
			var echartsCont = $('#echarts-container');
			form.on('switch(dataType)', function(data){
			if(this.checked) {
			echartsCont.removeClass('abs-index1n');
			}else {
			echartsCont.addClass('abs-index1n');
			}
			});

			// 查询表格数据
			var allData = [];
			function sTblData(sData) {
			// 开启等待框
			var loading = layer.load();
			var loading = layer.load(1);
			allData = [];
			// 根据查询条件，查询内容
			$.ajax({
			type: 'post',
			@@ -422,6 +472,7 @@
			tmp.home = _data.stationName;
			tmp.flowSize = tranfficCount(_data.dayflow);
			tOptions.data.push(tmp);
			allData.push(_data);
			}
			}else {
			layer.msg('暂无数据！', {icon:0, shade: 0.1,shadeClose:true});
			@@ -435,6 +486,12 @@

			// 生成表格数据
			table.render(tOptions);

			// 获取类型
			var type = sData.num;
			var lineData = getLineData(type);
			var lineGraphOpts = getlineGraphOpts(lineData, type)
			createLine(lineGraph, lineGraphOpts);
			}
			});
			}
			@@ -451,6 +508,26 @@
			return temp;
			}

			// 处理并返回生成折线图的数据
			function getLineData(type) {
			var rs = {
			x: [],
			y:[]
			};

			// 遍历allData的值
			for(var i=0; i<allData.length; i++) {
			var _allData = allData[i];
			var x = getNeedDate(_allData.note, type);
			var y = getTranfficCount(_allData.dayflow, type);
			rs.x.push(x);
			rs.y.push(y);
			}

			return rs;
			}


			// 计算流量
			function tranfficCount(value){
			value = (value/1048576).toFixed(2);
			@@ -461,6 +538,63 @@
			return value + "M";
			}
			}

			// 获取G/M判断与#statistics一致
			function getTranfficCount(value, type) {
			var _value = (value/1048576).toFixed(2);
			if(type == "3") {
			_value = (_value/1024).toFixed(2);
			}

			return _value;
			}

			// 截取日期(仅保留需要的年月日)case值要与#statistics一致
			function getNeedDate(date, type) {
			var rs = '';
			switch(type) {
			case '3':
			rs = date.slice(0, 4);
			break;
			case '1':
			rs = date.slice(0, 7);
			break;
			default:
			rs = date.slice(0, 10);
			break;
			}

			return rs;
			}

			// 获取生成折线图的配置项
			function getlineGraphOpts(data, type) {
			console.log(data);
			var rs = {
			xdata:[],
			sdata: [],
			};
			rs.xdata = data.x;
			rs.sdata.push(data.y);
			rs.tname = '流量统计';
			rs.lname = ["使用流量"];
			switch(type) {
			case '3':
			rs.subtxt = '按年统计';
			rs.unit = "G";
			break;
			case '1':
			rs.subtxt = '按月统计';
			rs.unit = "M";
			break;
			default:
			rs.subtxt = '按天统计';
			rs.unit = "M";
			break;
			}
			console.log(rs);
			return rs;
			}
			});
			</script>
			</body>