| | |
|---|
| | | <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>
|
|---|
| | | <!--头部内容开始-->
|
|---|
| | |
|---|
| | | <td><s:text name="Computer_name"/></td> <!-- 机房名称 -->
|
|---|
| | | <td>统计方式</td>
|
|---|
| | | <td colspan="2">时间段</td>
|
|---|
| | | <td>数据类型</td>
|
|---|
| | | </tr>
|
|---|
| | | <tr>
|
|---|
| | | <td>
|
|---|
| | |
|---|
| | | </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 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>
|
|---|
| | |
|---|
| | | }
|
|---|
| | | });
|
|---|
| | |
|
|---|
| | | // 切换数据显示类型
|
|---|
| | | 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',
|
|---|
| | |
|---|
| | | 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});
|
|---|
| | |
|---|
| | |
|
|---|
| | | // 生成表格数据
|
|---|
| | | table.render(tOptions);
|
|---|
| | | console.log(getLineData());
|
|---|
| | | }
|
|---|
| | | });
|
|---|
| | | }
|
|---|
| | |
|---|
| | | 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);
|
|---|
| | |
|---|
| | | 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>
|
|---|
