~whychwj/haha.git

			@@ -15,11 +15,21 @@
			<meta http-equiv="expires" content="0">
			<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
			<meta http-equiv="description" content="This is my page">
			<title>机房流量统计查询</title> <!--流量统计-->
			<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>
			<!--头部内容开始-->
			@@ -31,15 +41,17 @@
			<div class="layui-page-container">
			<!-- 条件筛选 -->
			<div class="layui-page-filter">
			<div class="page-filter-header layui-page-filter-fweight">机房流量统计查询</div>
			<div class="page-filter-header layui-page-filter-fweight">设备流量统计查询</div>
			<div class="page-filter-content">
			<table>
			<tr class="layui-page-filter-tbl-header layui-page-filter-fweight">
			<td>省</td> <!-- 省 -->
			<td>市</td> <!-- 市 -->
			<td>区/县</td> <!-- 市 -->
			<td><s:text name="Computer_name"/></td> <!-- 机房名称 -->
			<td>统计方式</td>
			<td colspan="2">时间段</td>
			<td>数据类型</td>
			</tr>
			<tr>
			<td>
			@@ -119,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>
			@@ -127,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">
			@@ -137,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();
			@@ -171,6 +210,9 @@
			});


			var isNewLoad = true;

			var pre_province = getQueryString('province');
			// 查询省下拉框
			searchProvince();
			// 查询省
			@@ -193,6 +235,9 @@
			for(var i=0; i<data.length; i++) {
			var _data = data[i];
			var _tmp = getLayuiSelect(_data, _data, {}, {});
			if(pre_province == _data && isNewLoad){
			_tmp = getLayuiSelect(_data, _data, {}, {},true);
			}
			list.push(_tmp);
			}
			}else {
			@@ -221,6 +266,7 @@
			var tmp = {
			StationName1: $("#province").val()
			};
			var pre_city = getQueryString('city');
			// 根据构造条件查询内容
			$.ajax({
			type: 'post',
			@@ -239,6 +285,9 @@
			for(var i=0; i<data.length; i++) {
			var _data = data[i];
			var _tmp = getLayuiSelect(_data.StationName2, _data.StationName2, {}, _data);
			if(pre_city == _data.StationName2 && isNewLoad){
			_tmp = getLayuiSelect(_data.StationName2, _data.StationName2, {}, _data,true);
			}
			list.push(_tmp);
			}
			}else {
			@@ -273,6 +322,7 @@
			if(isLoad) {
			filterLoad = layer.load();
			}
			var pre_county = getQueryString('county');
			// 根据构造条件查询内容
			$.ajax({
			type: 'post',
			@@ -292,6 +342,9 @@
			for(var i=0; i<data.length; i++) {
			var _data = data[i];
			var _tmp = getLayuiSelect(_data.StationName5, _data.StationName5, {}, _data);
			if(pre_county == _data.StationName5 && isNewLoad){
			_tmp = getLayuiSelect(_data.StationName5, _data.StationName5, {}, _data,true);
			}
			//console.info(_tmp);
			list.push(_tmp);
			}
			@@ -323,6 +376,8 @@
			StationName2:$("#city").val(),
			StationName5:$("#county").val(),
			};
			var pre_home = getQueryString('home');
			var auto_seach = false;
			// 根据构造条件查询内容
			$.ajax({
			type: 'post',
			@@ -345,15 +400,23 @@
			dev_id: _data.FBSDeviceId
			};
			var _tmp = getLayuiSelect(_data.StationName, _data.StationName3, _attr, _data);
			if(pre_home == _data.StationName && isNewLoad){
			_tmp = getLayuiSelect(_data.StationName, _data.StationName3, _attr, _data,true);
			auto_seach = true;
			}
			list.push(_tmp);
			}
			}else {
			list.push(getLayuiSelect('暂无机房', '', {}, undefined));
			}

			// 根据对象数组生成下拉列表
			createLayuiSelect(ele, list);
			form.render('select', 'homeFilter');
			if(auto_seach){
			var temp = createSearchForm();
			sTblData(temp);
			}
			isNewLoad = false;

			}
			});
			@@ -366,9 +429,9 @@
			,cellMinWidth: 80
			,cols: [[
			{field:'timeSlot', title:'统计时间段', align:'center', width: 380}
			,{field:'province', title:'省', align:'center'}
			,{field:'city', title:'市', align:'center'}
			,{field:'home', title:'机房名称', align:'center'}
			,{field:'province', title:'省', align:'center',width:200}
			,{field:'city', title:'市', align:'center',width:200}
			,{field:'home', title:'机房名称', align:'center',width:600}
			,{field:'flowSize', title:'流量', align:'center'}
			]]
			,data:[]
			@@ -390,10 +453,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',
			@@ -406,7 +481,7 @@
			layer.close(loading);
			// 解析获取的json
			var rs = JSON.parse(result.result);
			console.info(rs);
			//console.info(rs);
			// 初始化数据结果
			tOptions.data = [];
			if(rs.code == 1) {
			@@ -421,6 +496,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});
			@@ -434,6 +510,12 @@

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

			// 获取类型
			var type = sData.num;
			var lineData = getLineData(type);
			var lineGraphOpts = getlineGraphOpts(lineData, type)
			createLine(lineGraph, lineGraphOpts);
			}
			});
			}
			@@ -450,6 +532,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);
			@@ -460,6 +562,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>