~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>
			@@ -64,6 +76,19 @@
			</div>
			</div>
			</td>

			<td>
			<div class="layui-form" lay-filter="countyFilter">
			<div class="layui-form-item">
			<div class="layui-input-block">
			<select name="county" id="county" lay-filter="county">
			<option value="">请选择区/县</option>
			</select>
			</div>
			</div>
			</div>
			</td>

			<td>
			<div class="layui-form" lay-filter="homeFilter">
			<div class="layui-form-item">
			@@ -106,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>
			@@ -124,6 +158,7 @@
			<!-- 整体灰色遮罩层 -->
			<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>
			@@ -236,15 +271,69 @@
			createLayuiSelect(ele, list);
			form.render('select', 'cityFilter');

			// 查询区县
			searchCounty();
			}
			});
			}

			// 切换市-区县
			form.on('select(city)', function(data) {
			// 查询区县
			searchCounty();
			});


			// 查询区/县
			function searchCounty(isLoad) {
			// 构造查询条件
			var tmp = {
			StationName1: $("#province").val(),
			StationName2: $("#city").val()
			};
			// 是否添加等待
			if(isLoad) {
			filterLoad = layer.load();
			}
			// 根据构造条件查询内容
			$.ajax({
			type: 'post',
			async: true,
			url: 'BattInfAction!serchStationName5',
			dataType: 'json',
			data: "json = "+JSON.stringify(tmp),
			success: function(result) {
			var rs = JSON.parse(result.result);
			//console.info(rs);
			var list = []; // option结果集
			var ele = $('#county'); // 目标select
			if(rs.code == 1) {
			var data = rs.data;
			list.push(getLayuiSelect('请选择区/县', '', {}, undefined));
			// 遍历查询结果
			for(var i=0; i<data.length; i++) {
			var _data = data[i];
			var _tmp = getLayuiSelect(_data.StationName5, _data.StationName5, {}, _data);
			//console.info(_tmp);
			list.push(_tmp);
			}
			}else {
			list.push(getLayuiSelect('暂无区/县', '', {}, undefined));
			}

			// 根据对象数组生成下拉列表
			createLayuiSelect(ele, list);
			form.render('select', 'countyFilter');

			// 查询机房
			searchHome();
			}
			});
			}

			// 切换市-机房
			form.on('select(city)', function(data) {
			// 查询机房
			// 切换市-区县
			form.on('select(county)', function(data) {
			// 查询区县
			searchHome();
			});

			@@ -253,7 +342,8 @@
			// 构造查询条件
			var tmp = {
			StationName1:$("#province").val(),
			StationName2:$("#city").val()
			StationName2:$("#city").val(),
			StationName5:$("#county").val(),
			};
			// 根据构造条件查询内容
			$.ajax({
			@@ -298,9 +388,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:[]
			@@ -322,10 +412,22 @@
			}
			});

			// 切换数据显示类型
			form.on('switch(dataType)', function(data){
			console.log(this.checked);
			if(this.checked) {
			layer.msg('我是折线图');
			}else {
			layer.msg('我是表格！');
			}
			});

			// 查询表格数据
			var allData = [];
			function sTblData(sData) {
			// 开启等待框
			var loading = layer.load();
			var loading = layer.load(1);
			allData = [];
			// 根据查询条件，查询内容
			$.ajax({
			type: 'post',
			@@ -338,6 +440,7 @@
			layer.close(loading);
			// 解析获取的json
			var rs = JSON.parse(result.result);
			console.info(rs);
			// 初始化数据结果
			tOptions.data = [];
			if(rs.code == 1) {
			@@ -350,8 +453,9 @@
			tmp.province = _data.stationName1;
			tmp.city = _data.stationName2;
			tmp.home = _data.stationName;
			tmp.flowSize = tranfficCount(_data.nowflow);
			tmp.flowSize = tranfficCount(_data.dayflow);
			tOptions.data.push(tmp);
			allData.push(_data);
			}
			}else {
			layer.msg('暂无数据！', {icon:0, shade: 0.1,shadeClose:true});
			@@ -365,6 +469,7 @@

			// 生成表格数据
			table.render(tOptions);
			console.log(getLineData());
			}
			});
			}
			@@ -381,6 +486,26 @@
			return temp;
			}

			// 处理并返回生成折线图的数据
			function getLineData() {
			var rs = {
			x: [],
			y:[]
			};
			var type = $('#statistics').val();
			// 遍历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);
			@@ -391,6 +516,34 @@
			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;
			}
			});
			</script>
			</body>