From 2fe250ece8de95b3f70172fe5b45793ab6a3084a Mon Sep 17 00:00:00 2001 From: D:/workspace/chenjingjing/git/gx_tieta/gx_tieta/.gitignore <chenjingjing@LAPTOP-E51P2139> Date: 星期五, 18 一月 2019 17:30:50 +0800 Subject: [PATCH] 未审批可更改 --- gx_tieta/WebRoot/batt-traffic-statistics1.jsp | 254 ++++++++++++++++++++++++++++++++++++++++++++++++-- 1 files changed, 241 insertions(+), 13 deletions(-) diff --git a/gx_tieta/WebRoot/batt-traffic-statistics1.jsp b/gx_tieta/WebRoot/batt-traffic-statistics1.jsp index b0b5b1b..b814785 100644 --- a/gx_tieta/WebRoot/batt-traffic-statistics1.jsp +++ b/gx_tieta/WebRoot/batt-traffic-statistics1.jsp @@ -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> @@ -114,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"> @@ -124,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(); @@ -158,6 +210,9 @@ }); + var isNewLoad = true; + + var pre_province = getQueryString('province'); // 鏌ヨ鐪佷笅鎷夋 searchProvince(); // 鏌ヨ鐪� @@ -180,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 { @@ -208,6 +266,7 @@ var tmp = { StationName1: $("#province").val() }; + var pre_city = getQueryString('city'); // 鏍规嵁鏋勯�犳潯浠舵煡璇㈠唴瀹� $.ajax({ type: 'post', @@ -226,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 { @@ -236,15 +298,73 @@ 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(city)', function(data) { - // 鏌ヨ鏈烘埧 + // 鍒囨崲甯�-鍖哄幙 + form.on('select(county)', function(data) { + // 鏌ヨ鍖哄幙 searchHome(); }); @@ -253,8 +373,11 @@ // 鏋勯�犳煡璇㈡潯浠� var tmp = { StationName1:$("#province").val(), - StationName2:$("#city").val() + StationName2:$("#city").val(), + StationName5:$("#county").val(), }; + var pre_home = getQueryString('home'); + var auto_seach = false; // 鏍规嵁鏋勯�犳潯浠舵煡璇㈠唴瀹� $.ajax({ type: 'post', @@ -277,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; } }); @@ -298,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:[] @@ -322,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', @@ -338,6 +481,7 @@ layer.close(loading); // 瑙f瀽鑾峰彇鐨刯son var rs = JSON.parse(result.result); + //console.info(rs); // 鍒濆鍖栨暟鎹粨鏋� tOptions.data = []; if(rs.code == 1) { @@ -350,8 +494,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 +510,12 @@ // 鐢熸垚琛ㄦ牸鏁版嵁 table.render(tOptions); + + // 鑾峰彇绫诲瀷 + var type = sData.num; + var lineData = getLineData(type); + var lineGraphOpts = getlineGraphOpts(lineData, type) + createLine(lineGraph, lineGraphOpts); } }); } @@ -381,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); @@ -391,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> -- Gitblit v1.9.1