<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
|
<%
|
String path = request.getContextPath();
|
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
|
%>
|
<%@ taglib uri="/struts-tags" prefix="s" %>
|
<!DOCTYPE HTML>
|
<html>
|
<head>
|
<base href="<%=basePath%>">
|
<meta charset="UTF-8">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta http-equiv="pragma" content="no-cache">
|
<meta http-equiv="cache-control" content="no-cache">
|
<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> <!--设备流量统计查询-->
|
<link rel="stylesheet" type="text/css" href="pages/css/base.css">
|
<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>
|
<!--头部内容开始-->
|
<jsp:include page="Top.jsp" flush="true"/>
|
<!--头部内容结束-->
|
<!--导航开始-->
|
<jsp:include page="nav.jsp" flush="true"/>
|
<!-- 主体内容 -->
|
<div class="layui-page-container">
|
<!-- 条件筛选 -->
|
<div class="layui-page-filter">
|
<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>
|
<div class="layui-form" lay-filter="provinceFilter">
|
<div class="layui-form-item">
|
<div class="layui-input-block">
|
<select name="province" id="province" lay-filter="province">
|
<option value="">请选择省</option>
|
</select>
|
</div>
|
</div>
|
</div>
|
</td>
|
<td>
|
<div class="layui-form" lay-filter="cityFilter">
|
<div class="layui-form-item">
|
<div class="layui-input-block">
|
<select name="city" id="city" lay-filter="city">
|
<option value="">请选择市/区</option>
|
</select>
|
</div>
|
</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">
|
<div class="layui-input-block">
|
<select name="home" id="home" lay-filter="home">
|
<option value="">请选择机房</option>
|
</select>
|
</div>
|
</div>
|
</div>
|
</td>
|
<td>
|
<div class="layui-form">
|
<div class="layui-form-item">
|
<div class="layui-input-block">
|
<select id="statistics" name="statistics" lay-filter="statistics">
|
<option value="3">按年统计</option>
|
<option value="1">按月统计</option>
|
<option value="2">按日统计</option>
|
</select>
|
</div>
|
</div>
|
</div>
|
</td>
|
<td class="w272">
|
<div class="layui-form">
|
<div class="layui-form-item">
|
<div class="layui-input-block">
|
<input type="text" class="layui-input" id="startTime" placeholder="yyyy-MM-dd HH:mm:ss">
|
</div>
|
</div>
|
</div>
|
</td>
|
<td class="w272">
|
<div class="layui-form">
|
<div class="layui-form-item">
|
<div class="layui-input-block">
|
<input type="text" class="layui-input" id="endTime" placeholder="yyyy-MM-dd HH:mm:ss">
|
</div>
|
</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>
|
</div>
|
<!-- 页面主题内容 -->
|
<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">
|
<a href="javascript:" class="search"><s:text name="Search"/><!-- 查询 --></a>
|
<s:text name="Total_data"/><!-- 数据总量 --><span id="total" class="total">0</span>
|
</div>
|
</div>
|
<!-- 整体灰色遮罩层 -->
|
<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();
|
var today = date.format("yyyy-MM-dd")+" 23:59:59";
|
// 定义开始时间
|
laydate.render({
|
elem: '#startTime',
|
type: 'datetime',
|
value: '2000-01-01 00:00:00',
|
btns: ['confirm'],
|
max: today,
|
min: '2000-01-01 00:00:00'
|
});
|
|
// 定义结束时间
|
laydate.render({
|
elem: '#endTime',
|
type: 'datetime',
|
value: today,
|
btns: ['confirm'],
|
min: '2000-01-01 00:00:00',
|
max: today
|
});
|
|
|
var isNewLoad = true;
|
|
var pre_province = getQueryString('province');
|
// 查询省下拉框
|
searchProvince();
|
// 查询省
|
function searchProvince() {
|
// 请求后台查询
|
$.ajax({
|
type:'post',
|
async:true,
|
url: 'User_battgroup_baojigroup_battgroupAction!serchStationName1InGroup',
|
data: null,
|
dataType: 'json',
|
success:function(result) {
|
var rs = JSON.parse(result.result);
|
var list = []; // option结果集
|
var ele = $('#province'); // 目标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, _data, {}, {});
|
if(pre_province == _data && isNewLoad){
|
_tmp = getLayuiSelect(_data, _data, {}, {},true);
|
}
|
list.push(_tmp);
|
}
|
}else {
|
list.push(getLayuiSelect('暂无省/直辖市', '', {}, undefined));
|
}
|
|
// 根据对象数组生成下拉列表
|
createLayuiSelect(ele, list);
|
form.render('select', 'provinceFilter');
|
|
// 查询市
|
searchCity();
|
}
|
});
|
}
|
|
// 切换省-市
|
form.on('select(province)', function(data) {
|
// 查询市
|
searchCity();
|
});
|
|
// 查询市
|
function searchCity() {
|
// 构造查询条件
|
var tmp = {
|
StationName1: $("#province").val()
|
};
|
var pre_city = getQueryString('city');
|
// 根据构造条件查询内容
|
$.ajax({
|
type: 'post',
|
async: true,
|
url: 'BattInfAction!serchStationName2',
|
dataType: 'json',
|
data: "json = "+JSON.stringify(tmp),
|
success: function(result) {
|
var rs = JSON.parse(result.result);
|
var list = []; // option结果集
|
var ele = $('#city'); // 目标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.StationName2, _data.StationName2, {}, _data);
|
if(pre_city == _data.StationName2 && isNewLoad){
|
_tmp = getLayuiSelect(_data.StationName2, _data.StationName2, {}, _data,true);
|
}
|
list.push(_tmp);
|
}
|
}else {
|
list.push(getLayuiSelect('暂无市/区', '', {}, undefined));
|
}
|
|
// 根据对象数组生成下拉列表
|
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();
|
}
|
var pre_county = getQueryString('county');
|
// 根据构造条件查询内容
|
$.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);
|
if(pre_county == _data.StationName5 && isNewLoad){
|
_tmp = getLayuiSelect(_data.StationName5, _data.StationName5, {}, _data,true);
|
}
|
//console.info(_tmp);
|
list.push(_tmp);
|
}
|
}else {
|
list.push(getLayuiSelect('暂无区/县', '', {}, undefined));
|
}
|
|
// 根据对象数组生成下拉列表
|
createLayuiSelect(ele, list);
|
form.render('select', 'countyFilter');
|
|
// 查询机房
|
searchHome();
|
}
|
});
|
}
|
|
// 切换市-区县
|
form.on('select(county)', function(data) {
|
// 查询区县
|
searchHome();
|
});
|
|
// 查询机房
|
function searchHome() {
|
// 构造查询条件
|
var tmp = {
|
StationName1:$("#province").val(),
|
StationName2:$("#city").val(),
|
StationName5:$("#county").val(),
|
};
|
var pre_home = getQueryString('home');
|
var auto_seach = false;
|
// 根据构造条件查询内容
|
$.ajax({
|
type: 'post',
|
async: true,
|
url: 'BattInfAction!serchStationName3',
|
dataType: 'json',
|
data: "json = "+JSON.stringify(tmp),
|
success: function(result) {
|
var rs = JSON.parse(result.result);
|
var list = []; // option结果集
|
var ele = $('#home'); // 目标select
|
if(rs.code == 1) {
|
var data = rs.data;
|
list.push(getLayuiSelect('请选择机房', '', {StationId: '', dev_id: ''}, undefined));
|
// 遍历查询结果
|
for(var i=0; i<data.length; i++) {
|
var _data = data[i];
|
var _attr = {
|
StationId: _data.StationId,
|
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;
|
|
}
|
});
|
}
|
|
// 表格模块
|
var tOptions = {
|
elem: '#pageTbl'
|
,toolbar: false
|
,cellMinWidth: 80
|
,cols: [[
|
{field:'timeSlot', title:'统计时间段', align:'center', width: 380}
|
,{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:[]
|
,limit: 1000
|
,page: false
|
,height: 'full-290'
|
};
|
|
// 生成表格数据
|
table.render(tOptions);
|
|
// 点击查询
|
$('#paging .search').click(function() {
|
var temp = createSearchForm();
|
if(temp.dev_id) {
|
sTblData(temp);
|
}else {
|
layer.msg('请选择机房！', {icon:0, shade: 0.1,shadeClose:true});
|
}
|
});
|
|
// 切换数据显示类型
|
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(1);
|
allData = [];
|
// 根据查询条件，查询内容
|
$.ajax({
|
type: 'post',
|
async: true,
|
url: 'StationtrafficAction!serchByCondition',
|
data: "json="+JSON.stringify(sData),
|
dataType: 'json',
|
success: function(result) {
|
// 关闭等待框
|
layer.close(loading);
|
// 解析获取的json
|
var rs = JSON.parse(result.result);
|
//console.info(rs);
|
// 初始化数据结果
|
tOptions.data = [];
|
if(rs.code == 1) {
|
// 遍历数据结果
|
var data = rs.data;
|
for(var i=0; i<data.length; i++) {
|
var _data = data[i];
|
var tmp = {};
|
tmp.timeSlot = _data.note;
|
tmp.province = _data.stationName1;
|
tmp.city = _data.stationName2;
|
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});
|
}
|
|
var pageNum = tOptions.data.length;
|
tOptions.limit = pageNum;
|
|
// 设置分页信息
|
$('#total').text(pageNum);
|
|
// 生成表格数据
|
table.render(tOptions);
|
|
// 获取类型
|
var type = sData.num;
|
var lineData = getLineData(type);
|
var lineGraphOpts = getlineGraphOpts(lineData, type)
|
createLine(lineGraph, lineGraphOpts);
|
}
|
});
|
}
|
|
// 查询表格的构造条件
|
function createSearchForm(){
|
var dev_id = $('#home').find("option:selected").attr('dev_id');
|
var temp = {
|
dev_id: dev_id?dev_id:0,
|
record_time:$('#startTime').val(),
|
record_time1:$('#endTime').val(),
|
num:$('#statistics').val()
|
};
|
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);
|
if(value>1024){
|
value = (value/1024).toFixed(2);
|
return value + "G";
|
}else{
|
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>
|
</html>
|
