diff options
| author | 段冬梅 <[email protected]> | 2018-12-15 17:28:28 +0800 |
|---|---|---|
| committer | 段冬梅 <[email protected]> | 2018-12-15 17:28:28 +0800 |
| commit | 43bd596f5339bc8ad8ab28f5cb819b87e2485b84 (patch) | |
| tree | d462416420dd094cfde83aedc30d4ae45d7a0180 | |
| parent | 5926bb3745b3b620f9485638a5b5e2199079139c (diff) | |
活跃iP详情图，列表，图为一个小时内的top10趋势，列表为一个小时内的top10每条线最大值的详细信息
22 files changed, 1208 insertions, 13 deletions
diff --git a/src/main/webapp/WEB-INF/views/dashboard/trafficIpActiveList.jsp b/src/main/webapp/WEB-INF/views/dashboard/trafficIpActiveList.jsp index 78f6e3e..34d1b8c 100644 --- a/src/main/webapp/WEB-INF/views/dashboard/trafficIpActiveList.jsp +++ b/src/main/webapp/WEB-INF/views/dashboard/trafficIpActiveList.jsp @@ -44,11 +44,13 @@ <tr>
<th><spring:message code="ip_addr"/></th>
<th><spring:message code="area_id"/></th>
+ <th><spring:message code="c2s_byte_num"/></th>
+ <th><spring:message code="s2c_byte_num"/></th>
+ <th><spring:message code="bytes"/></th>
<th><spring:message code="link_num"/></th>
<th><spring:message code="c2s_pkt_num"/></th>
<th><spring:message code="s2c_pkt_num"/></th>
- <th><spring:message code="c2s_byte_num"/></th>
- <th><spring:message code="s2c_byte_num"/></th>
+ <th><spring:message code="packet"/></th>
<th><spring:message code="stat_time"/></th>
</tr>
</thead>
@@ -65,18 +67,20 @@ </c:choose>
</c:forEach>
</td>
+ <td>${entry.c2sByteLen }</td>
+ <td>${entry.s2cByteLen }</td>
+ <td>${entry.s2cByteLen+entry.c2sByteLen }</td>
<td>${entry.linkNum }</td>
<td>${entry.c2sPktNum }</td>
<td>${entry.s2cPktNum }</td>
- <td>${entry.c2sByteLen }</td>
- <td>${entry.s2cByteLen }</td>
+ <td>${entry.s2cPktNum+entry.c2sPktNum}</td>
<td>${entry.statTime }</td>
<%-- <td><fmt:formatDate value="${entry.statTime }" pattern="yyyy-MM-dd HH:mm:ss"/></td> --%>
</tr>
</c:forEach>
</tbody>
</table>
- <div class="page">${page}</div>
+<%-- <div class="page">${page}</div> --%>
</div>
</div>
</div>
diff --git a/src/main/webapp/WEB-INF/views/dynamicpage/dynamicIndex.jsp b/src/main/webapp/WEB-INF/views/dynamicpage/dynamicIndex.jsp new file mode 100644 index 0000000..cc8056b --- /dev/null +++ b/src/main/webapp/WEB-INF/views/dynamicpage/dynamicIndex.jsp @@ -0,0 +1,1137 @@ +<%@ page contentType="text/html;charset=UTF-8"%>
+<%@ include file="/WEB-INF/include/taglib.jsp"%>
+<html>
+<head>
+ <meta charset="utf-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <title>NTC-DYNAMICINDEX</title>
+ <link rel="stylesheet" href="${pageContext.request.contextPath}/static/pages/css/common.css">
+ <link rel="stylesheet" href="${pageContext.request.contextPath}/static/pages/css/data_text.css">
+ <link rel="stylesheet" href="${pageContext.request.contextPath}/static/pages/css/dashboard.css">
+ <script src="${pageContext.request.contextPath}/static/pages/scripts/dashboard.js"></script>
+
+ <!--[if lt IE 9]>
+ <script src="js/html5shiv.min.js"></script>
+ <script src="js/respond.min.js"></script>
+ <![endif]-->
+ <!-- basic styles -->
+ <link href="${pageContext.request.contextPath}/static/login/assets/css/bootstrap.min.css" rel="stylesheet" />
+ <link rel="stylesheet" href="${pageContext.request.contextPath}/static/login/assets/css/font-awesome.min.css" />
+
+ <link rel="stylesheet" href="${pageContext.request.contextPath}/static/login/assets/css/ace.min.css" />
+ <link rel="stylesheet" href="${pageContext.request.contextPath}/static/login/assets/css/ace-rtl.min.css" />
+ <!-- 数字特效 -->
+ <link href="${pageContext.request.contextPath}/static/login/numbergd/css/globle.css" rel="stylesheet">
+ <!-- 数字特效 -->
+
+ <style type="text/css">
+ /*滚动条样式*/
+ body::-webkit-scrollbar {/*滚动条整体样式*/
+ width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
+ height: 10px;
+ }
+ body::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
+ border-radius: 5px;
+ -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
+ background: rgba(228,230,233,0.2);
+ }
+ body::-webkit-scrollbar-track {/*滚动条里面轨道*/
+ -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
+ border-radius: 0;
+ background: rgba(0,0,0,0.1);
+ }
+ body::-webkit-scrollbar-corner{
+ width: 0px;
+ height: 0px;
+ background: rgba(255,255,255,0);
+ }
+
+ .row{
+ margin-left: 0px;
+ margin-right: 0px;
+ }
+ .col-sm-1 ,.col-sm-2 ,.col-sm-3 ,.col-sm-4 ,.col-sm-5 ,.col-sm-6 ,.col-sm-7 ,.col-sm-8,.col-sm-12{
+ margin: 0px;
+ padding: 0px;
+ }
+ body{
+ /* height:864px; */
+ height:582px;
+ width:1490px;
+ background-color:#181818;
+
+ }
+ .main-container:after{
+ background-color:rgba(255,255,255,0);
+ }
+ .main-container{
+ height:100%;
+ width:100%;
+ background-image: url("${pageContext.request.contextPath}/static/login/assets/images/main/two/main_back.png");
+ background-repeat:no-repeat;
+ background-size:100% 100%;
+ }
+ .main-container-inner{
+ height: 100%;
+
+ }
+
+ /*底图全 */
+ .main_dcqt{
+ width: 100%;
+ position: absolute;
+ top:0%;
+ left: 0%;
+ z-index: 0;
+ }
+
+
+ /*齿轮速率*/
+ .ring {
+ animation: spin 10s linear infinite;
+ transfrom-origin: center center;
+ }
+ .ring2 {
+ animation: spin 8s linear infinite;
+ transfrom-origin: center center;
+ }
+ .ring3 {
+ animation: spin 6s linear infinite;
+ transfrom-origin: center center;
+ }
+ .ring4 {
+ animation: spin 4s linear infinite;
+ transfrom-origin: center center;
+ }
+
+
+ @-webkit-keyframes spin {
+ 0% {
+ -webkit-transform: rotateZ(0);
+ transform: rotateZ(0)
+ }
+ 100% {
+ -webkit-transform: rotateZ(360deg);
+ transform: rotateZ(360deg)
+ }
+ }
+
+ .clbox{
+ position: absolute;
+ top: 12%;
+ left: 4%;
+ width: 99%;
+
+ }
+
+ /* 齿轮1 */
+ .cl_protocol{
+ position: absolute;
+ /*border:1px solid red;*/
+ width:260px;
+ height:260px;
+ transform-style: preserve-3d;
+ -webkit-transform:rotateX(30deg) rotateY(50deg) rotateZ(50deg);
+ margin-top: 19%;
+ left: 1%;
+ z-index: 20;
+ }
+
+ .cl_protocol_back{
+ position: absolute;
+ /*border:1px solid red;*/
+ width:260px;
+ height:260px;
+ transform-style: preserve-3d;
+ -webkit-transform:rotateX(32deg) rotateY(50deg) rotateZ(6deg);
+ margin-top: 13%;
+ left: 0%;
+ z-index: 19;
+ }
+ /* 齿轮2 */
+ .cl_app{
+ position: absolute;
+ /*border:1px solid red;*/
+ width:260px;
+ height:260px;
+ transform-style: preserve-3d;
+ -webkit-transform:rotateX(30deg) rotateY(50deg) rotateZ(20deg);
+ margin-top: 10%;
+ left: 7%;
+ z-index: 18;
+ }
+
+ .cl_app_back{
+ position: absolute;
+ /*border:1px solid red;*/
+ width:260px;
+ height:260px;
+ transform-style: preserve-3d;
+ -webkit-transform:rotateX(23deg) rotateY(50deg) rotateZ(20deg);
+ margin-top: 7%;
+ left: 8%;
+ z-index: 17;
+ }
+ /* 齿轮3 */
+ .cl_document{
+ position: absolute;
+ /*border:1px solid red;*/
+ width:260px;
+ height:260px;
+ transform-style: preserve-3d;
+ -webkit-transform:rotateX(30deg) rotateY(50deg) rotateZ(20deg);
+ margin-top: 7%;
+ left: 18%;
+ z-index: 16;
+ }
+
+ .cl_document_back{
+ position: absolute;
+ /*border:1px solid red;*/
+ width:260px;
+ height:260px;
+ transform-style: preserve-3d;
+ -webkit-transform:rotateX(23deg) rotateY(50deg) rotateZ(20deg);
+ margin-top: 3%;
+ left: 18%;
+ z-index: 15;
+ }
+ /* 齿轮4 */
+ .cl_medal{
+ position: absolute;
+ /*border:1px solid red;*/
+ width:260px;
+ height:260px;
+ transform-style: preserve-3d;
+ -webkit-transform:rotateX(30deg) rotateY(50deg) rotateZ(20deg);
+ margin-top: 0%;
+ left: 24%;
+ z-index: 14;
+ }
+
+ .cl_medal_back{
+ position: absolute;
+ width:260px;
+ height:260px;
+ transform-style: preserve-3d;
+ -webkit-transform:rotateX(23deg) rotateY(50deg) rotateZ(20deg);
+ margin-top: -3%;
+ left: 25%;
+ z-index: 13;
+ }
+ /* 罩子 */
+ .main_zz{
+ position: absolute;
+ z-index: 21;
+ left: 0%;
+ top: 0%;
+ }
+ /* 流量折线 */
+ .box_chart_flow{
+ position:relative;
+ width: 240px;
+ left: 40%;
+ top: 420px;
+ }
+
+ #ntc_flow{
+ height: 200px;
+ -webkit-transform: rotate(30deg) skewX(29deg);
+ }
+ /* 日志 */
+ .box_log_bar{
+ position:absolute;
+ width: 260px;
+ top: 188px;
+ left: 12%;
+ z-index: 22;
+ }
+ #ntc_log_bar{
+ height: 160px;
+ -webkit-transform: rotate(30deg) skewX(28deg);
+ }
+ /* 入流 */
+ .linesFlow_css{
+ position: relative;
+ top: -71%;
+ width: 100%;
+ }
+ /* 数字 */
+ .dataNums .tt span{width:100%;height:100%; font:bold 24px/75px "Arial";color:#ddf0ff;}
+ .dataNums .dataOne{ width:24px; height:54px; margin: 0px -4px; text-align: center; background: url(static/numbergd/images/num-bg1.png) no-repeat;}
+ #dataNums{
+ position: relative;
+ top: 5%;
+ left: -41%;
+ }
+ /* 杂质动态 */
+ .zzdt{
+ position: absolute;
+ top: 297px;
+ left: 54.2%;
+ }
+ </style>
+</head>
+
+<body>
+<!--content开始-->
+<!-- <div class="data_content"> -->
+<!--header开始-->
+ <!--<div class="header">-->
+
+ <!-- </div> -->
+<!-- </div> -->
+<!-- container-fiuled bootstrap全屏 -->
+<div class="main-container" id="main-container">
+ <div class="main-container-inner">
+ <!-- <div class="main_qftd">
+ <img alt="" src="${pageContext.request.contextPath}/static/login/assets/images/main/two/main_qtd.png" >
+ </div> -->
+ <!-- 底图 -->
+ <div class="main_dcqt">
+ <img alt="" src="${pageContext.request.contextPath}/static/login/assets/images/main/two/dizuo.png" style="width: 100%">
+ </div>
+ <!-- 罩子 -->
+ <div class="main_zz">
+ <img alt="" src="${pageContext.request.contextPath}/static/login/assets/images/main/two/gaizi.png" style="width: 100%">
+ </div>
+ <!-- 杂质动态 -->
+ <div class="zzdt">
+ <img alt="" src="${pageContext.request.contextPath}/static/login/assets/gif/zzdt.gif">
+ </div>
+ <div class="row" style="height: 100%;">
+ <div class="col-sm-12" style="height: 100%">
+ <div class="col-sm-3" style="height: 100%">
+ <div class="box_chart_flow">
+ <div id="ntc_flow">
+
+ </div>
+ </div>
+ </div>
+ <div class="col-sm-5" style="height: 100%">
+ <div class="clbox">
+ <!-- 齿轮1 -->
+ <div class="cl_protocol">
+ <img class="ring" alt="" src="${pageContext.request.contextPath}/static/login/assets/images/main/cl/protocol.png">
+ </div>
+ <div class="cl_protocol_back">
+ <img class="ring" alt="" src="${pageContext.request.contextPath}/static/login/assets/images/main/cl/cl_b.png" >
+ </div>
+ <!-- 齿轮2 -->
+ <div class="cl_app">
+ <img class="ring2" alt="" src="${pageContext.request.contextPath}/static/login/assets/images/main/cl/app.png">
+ </div>
+ <div class="cl_app_back">
+ <img class="ring2" alt="" src="${pageContext.request.contextPath}/static/login/assets/images/main/cl/cl_b.png" >
+ </div>
+ <!-- 齿轮3 -->
+ <div class="cl_document">
+ <img class="ring3" alt="" src="${pageContext.request.contextPath}/static/login/assets/images/main/cl/docunment.png">
+ </div>
+ <div class="cl_document_back">
+ <img class="ring3" alt="" src="${pageContext.request.contextPath}/static/login/assets/images/main/cl/cl_b.png" >
+ </div>
+ <!-- 齿轮4 -->
+ <div class="cl_medal">
+ <img class="ring4" alt="" src="${pageContext.request.contextPath}/static/login/assets/images/main/cl/multmedia.png">
+ </div>
+ <div class="cl_medal_back">
+ <img class="ring4" alt="" src="${pageContext.request.contextPath}/static/login/assets/images/main/cl/cl_b.png" >
+ </div>
+ </div>
+ </div>
+ <div class="col-sm-1" style="height: 100%">
+ <!-- 数据流出 -->
+ <div style="margin-left: -187px;margin-top: 11%;">
+ <div id="linesFlow_chu" style="height: 260px;"></div>
+ </div>
+ <div id="dataNums" ></div>
+ </div>
+ <div class="col-sm-3" style="height: 100%">
+ <div class="box_log_bar">
+ <div id="ntc_log_bar">
+
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <!-- 数据流 -->
+ <div class="linesFlow_css">
+ <div id="linesFlow" style="height: 490px;"></div>
+ </div>
+ </div><!-- /.main-container-inner -->
+ </div><!-- /.main-container -->
+ <!-- basic scripts -->
+ <script type="text/javascript">
+ window.jQuery || document.write("<script src='static/assets/js/jquery-2.0.3.min.js'>"+"<"+"script>");
+ </script>
+ <script type="text/javascript">
+ if("ontouchend" in document) document.write("<script src='static/assets/js/jquery.mobile.custom.min.js'>"+"<"+"script>");
+ </script>
+ <script src="${pageContext.request.contextPath}/static/login/assets/js/bootstrap.min.js"></script>
+ <script src="${pageContext.request.contextPath}/static/login/assets/js/typeahead-bs2.min.js"></script>
+ <!-- page specific plugin scripts -->
+ <!--[if lte IE 8]>
+ <script src="assets/js/excanvas.min.js"></script>
+ <![endif]-->
+ <script src="${pageContext.request.contextPath}/static/login/assets/js/jquery-ui-1.10.3.custom.min.js"></script>
+ <script src="${pageContext.request.contextPath}/static/login/assets/js/jquery.ui.touch-punch.min.js"></script>
+ <script src="${pageContext.request.contextPath}/static/login/assets/js/jquery.slimscroll.min.js"></script>
+ <script src="${pageContext.request.contextPath}/static/login/assets/js/jquery.easy-pie-chart.min.js"></script>
+ <script src="${pageContext.request.contextPath}/static/login/assets/js/jquery.sparkline.min.js"></script>
+ <script src="${pageContext.request.contextPath}/static/login/assets/js/flot/jquery.flot.min.js"></script>
+ <script src="${pageContext.request.contextPath}/static/login/assets/js/flot/jquery.flot.pie.min.js"></script>
+ <script src="${pageContext.request.contextPath}/static/login/assets/js/flot/jquery.flot.resize.min.js"></script>
+ <!-- ace scripts -->
+ <script src="${pageContext.request.contextPath}/static/login/assets/js/ace-elements.min.js"></script>
+ <script src="${pageContext.request.contextPath}/static/login/assets/js/ace.min.js"></script>
+ <!-- inline scripts related to this page -->
+ <script src="${pageContext.request.contextPath}/static/login/echarts/echarts.min.js"></script>
+ <!-- 数字特效 -->
+ <script type="text/javascript" src="${pageContext.request.contextPath}/static/login/numbergd/js/index.js"></script>
+ <!-- 数字特效 -->
+
+ <script type="text/javascript">
+ var bodyHeight = window.screen.height;
+
+ /* 流量折线图 */
+ var myChart = echarts.init(document.getElementById('ntc_flow'));
+ var log_bar_Chart = echarts.init(document.getElementById('ntc_log_bar'));
+ var lines_Chart = echarts.init(document.getElementById('linesFlow'));
+ var lines_Chart_chu = echarts.init(document.getElementById('linesFlow_chu'));
+
+ // 颜色
+ var lightBlue = {
+ type: 'linear',
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [{
+ offset: 0,
+ color: 'rgba(0, 192, 255, 1)' // 0% 处的颜色
+ }, {
+ offset: 1,
+ color: 'rgba(0, 192, 255, 0.1)' // 100% 处的颜色
+ }],
+ globalCoord: false // 缺省为 false
+ }
+ var darkBlue = {
+ type: 'linear',
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [{
+ offset: 0,
+ color: 'rgba(41, 121, 255, 1)' // 0% 处的颜色
+ }, {
+ offset: 1,
+ color: 'rgba(41, 121, 255, 0.1)' // 100% 处的颜色
+ }],
+ globalCoord: false // 缺省为 false
+ }
+ function randomData() {
+ value = Math.random() * 100;
+ return {
+ value: Math.round(value)
+ }
+ }
+ // 时间设置
+ function checkTime(i) {
+ if (i < 10) {
+ i = "0" + i;
+ }
+ return i;
+ }
+ function timeSet(i) {
+ var newTime = new Date();
+ var h = newTime.getHours(); ;
+ var m = newTime.getMinutes();
+ var s = newTime.getSeconds();
+ if(i != -1){
+ i = i +1;
+ s = s - i*5;
+ if(s<0){
+ m = m - 1;
+ s = 60 - Math.abs(s);
+ }
+ }
+ h = checkTime(h);
+ m = checkTime(m);
+ s = checkTime(s);
+ return [h, m].join(':')+"'"+s+"''";
+ }
+ var data = [];
+ var timeData = [];
+
+ for (var i = 0; i < 5; i++) {
+ timeData.unshift(timeSet(i));
+ data.unshift(randomData());
+ }
+ // 指定图表的配置项和数据
+ var option = {
+ backgroundColor: "rgba(255,255,255,0)",
+ tooltip: {
+ show: false
+ },
+ grid:{
+ left: 50,
+ },
+ xAxis: {
+ type: 'category',
+ boundaryGap: false,
+ axisLine: {
+ lineStyle: {
+ color: '#4bbbf8',
+ shadowColor: 'rgba(75, 211, 255, 0.5)',
+ shadowBlur: 5
+ }
+ },
+
+ axisLabel: {
+ color: '#fff',
+ fontSize: 12
+ },
+ splitLine: {
+ show: false
+ },
+ data: timeData,
+
+ },
+ yAxis: [{
+
+ min: 0,
+ axisLine: {
+ lineStyle: {
+ color: '#4bbbf8',
+ shadowColor: 'rgba(75, 211, 255, 0.5)',
+ shadowBlur: 5
+ }
+ },
+ axisLabel: {
+ color: 'white',
+ fontSize: 12
+ },
+ splitLine: {
+ lineStyle: {
+ color: 'rgba(75, 211, 255, 0.5)',
+ type: 'dashed'
+ }
+ }
+ }],
+ series: [{
+ name: '数量',
+ type: 'line',
+ smooth: true,
+
+ label: {
+ show: true,
+ position: 'top',
+ color: '#fff',
+ fontSize: 14
+ },
+ itemStyle: {
+
+ color: function(params) {
+ return params.dataIndex % 2 ? darkBlue : lightBlue;
+ }
+ },
+ areaStyle: { //区域填充样式
+ normal: {
+ //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ { offset: 0, color: 'rgba(61,234,255, 0.9)'},
+ { offset: 0.7, color: 'rgba(61,234,255, 0)'}
+ ], false),
+
+ shadowColor: 'rgba(53,142,215, 0.9)', //阴影颜色
+ shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
+ }
+ },
+ data: data
+ }],
+
+ };
+
+ myChart.setOption(option);
+ setInterval(function() {
+ timeData.shift();
+ timeData.push(timeSet(-1));
+
+ data.shift();
+ data.push(randomData());
+
+ myChart.setOption({
+ backgroundColor: "rgba(255,255,255,0)",
+ xAxis: {
+ data: timeData
+ },
+ series: [{
+
+ data: data
+ }]
+ });
+ }, 5000);
+
+
+ /* 日志柱状图 */
+ var bar_option = {
+ //color: ['#3398DB'],
+ tooltip: {
+ trigger: 'axis',
+ backgroundColor:'rgba(255,255,255,0.8)',
+ extraCssText: 'box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);',
+ textStyle:{
+ color:'#6a717b',
+ },
+ },
+ grid: {
+ left: '3%',
+ right: '15%',
+ bottom: '3%',
+ top:'15%',
+ containLabel: true
+ },
+ legend: {
+ show:false,
+ textStyle:{
+ color:'#fff',
+ },
+ data: ['日志']
+ },
+ yAxis: [{
+ type: 'category',
+
+ data: ['12时','11时','10时','09时','08时'],
+ inverse: true,
+ axisTick: {
+ alignWithLabel: true,
+ },
+ axisLabel: {
+ margin: 5,
+ textStyle: {
+ fontSize: 12,
+ color:'#fff'
+ }
+ },
+ axisLine: {
+ lineStyle: {
+ color: '#fff'
+ }
+ },
+ }],
+ xAxis: [{
+ type: 'value',
+ name: '',
+ position:'top',
+ max:8000000,
+ axisLabel: {
+
+ textStyle: {
+ fontSize: 12,
+ color:'#fff'
+ }
+ },
+ axisLine: {
+ lineStyle: {
+ color: '#fff'
+ }
+ },
+ axisLabel: {
+ formatter: (value, index) => {
+ return value/10000
+ },
+ },
+ splitLine: {
+ show:false,
+ lineStyle: {
+ color: '#fff'
+ }
+ }
+ }],
+ backgroundColor: 'rgba(255,255,255,0)',
+ series: [{
+ name: '日志',
+ type: 'bar',
+ barWidth:15,
+ data: [7827896, 7472072, 7433391, 7137253, 6382192],
+ label: {
+ normal: {
+ show: true,
+ formatter: (param) => {
+ return (param.value/10000).toFixed(2);
+ },
+ position: 'insideRight',
+ textStyle: {
+ color: 'white' //color of value
+ }
+ }
+ },
+
+ itemStyle: {
+ normal: {
+ show: true,
+ color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
+ offset: 0,
+ color: '#fac28f' // 0% 处的颜色
+ }, {
+ offset: 1,
+ color: '#fc867a' // 100% 处的颜色
+ }], false),
+ //barBorderRadius: [0,10,10,0],
+ borderWidth: 10,
+ },
+ emphasis: {
+ shadowBlur: 15,
+ shadowColor: 'rgba(105,123, 214, 0.7)'
+ }
+ },
+ barWidth: '50%',
+ zlevel: 11
+ }]
+ };
+ log_bar_Chart.setOption(bar_option);
+ setInterval(function() {
+ log_bar_Chart.clear();
+ log_bar_Chart.setOption(bar_option);
+ }, 5000);
+
+ /* 数字特效 */
+ function animalNum(){
+ var value = rand(100,999);;
+
+ $("#dataNums").rollNum({
+ deVal:value
+ });
+ };
+
+ function rand(min,max) {
+ return Math.floor(Math.random()*(max-min))+min;
+ }
+
+ animalNum();
+ setInterval('animalNum()',5000);
+
+ /* 数据流 */
+ var lines = [
+ {
+ coords: [
+ [46, 600],
+ [830, 864]
+ ],
+ effect: {
+ period: 1.5,
+ },
+ lineStyle: {
+ normal: {
+ color: '#119dd8'
+ }
+ }
+ },
+ {
+ coords: [
+ [30, 600],
+ [830, 864]
+ ],
+ effect: {
+ period: 1.5,
+ },
+ lineStyle: {
+ normal: {
+ color: '#119dd8'
+ }
+ }
+ },
+ {
+ coords: [
+ [100, 500],
+ [800, 814]
+ ],
+ effect: {
+ period: 1.5,
+ },
+ lineStyle: {
+ normal: {
+ color: '#119dd8'
+ }
+ }
+ },
+ {
+ coords: [
+ [100, 500],
+ [800, 814]
+ ],
+ effect: {
+ period: 1.5,
+ },
+ lineStyle: {
+ normal: {
+ color: '#119dd8'
+ }
+ }
+ },
+ {
+ coords: [
+ [150, 500],
+ [830, 864]
+ ],
+ effect: {
+ period: 1.5,
+ },
+ lineStyle: {
+ normal: {
+ color: '#d29781'
+ }
+ }
+ },
+ {
+ coords: [
+ [111, 566],
+ [830, 864]
+ ],
+ effect: {
+ period: 1.5,
+ },
+ lineStyle: {
+ normal: {
+ color: '#d29781'
+ }
+ }
+ },
+ {
+ coords: [
+ [247, 193],
+ [830, 804]
+ ],
+ effect: {
+ period: 1.5,
+ },
+ lineStyle: {
+ normal: {
+ color: '#ebf546'
+ }
+ }
+ },
+ {
+ coords: [
+ [10, 300],
+ [830, 804]
+ ],
+ effect: {
+ period: 1.5,
+ },
+ lineStyle: {
+ normal: {
+ color: '#ebf546'
+ }
+ }
+ },
+ {
+ coords: [
+ [10, 400],
+ [830, 804]
+ ],
+ effect: {
+ period: 1.5,
+ },
+ lineStyle: {
+ normal: {
+ color: '#d29781'
+ }
+ }
+ },
+ {
+ coords: [
+ [60, 400],
+ [830, 804]
+ ],
+ effect: {
+ period: 2,
+ },
+ lineStyle: {
+ normal: {
+ color: '#119dd8'
+ }
+ }
+ },
+ {
+ coords: [
+ [160, 200],
+ [830, 804]
+ ],
+ effect: {
+ period: 1.5,
+ },
+ lineStyle: {
+ normal: {
+ color: '#119dd8'
+ }
+ }
+ },
+ {
+ coords: [
+ [160, 300],
+ [830, 804]
+ ],
+ effect: {
+ period: 2,
+ },
+ lineStyle: {
+ normal: {
+ color: '#119dd8'
+ }
+ }
+ },
+
+ ]
+
+ var line_option = {
+ backgroundColor: 'rgba(255,255,255,0)',
+ grid:{
+ top: 10,
+ bottom: 10,
+ left: 10,
+ right: 10,
+ width: 682,
+ height: 595,
+ },
+ xAxis: {
+ show: false,
+ min: 0,
+ max: 1000,
+ position: 'top',
+ axisPointer: {
+ show: false
+ }
+ },
+ yAxis: {
+ show: false,
+ min: 0,
+ max: 1000,
+ axisPointer: {
+ show: false
+ }
+ },
+
+ // 线条动画
+ series: [
+ {
+ type: 'lines',
+ coordinateSystem: 'cartesian2d',
+ zlevel: 1,
+
+ // 动画效果
+ effect: {
+ show: true,
+ period: 4, //特效动画的时间，单位为 s
+ trailLength: 0.5, //特效尾迹的长度。0~1数值越大尾迹越长
+ //color: '#d29781',
+ symbolSize: 6
+ },
+
+ lineStyle: {
+ normal: {
+ color: '#BF3EFF',
+ width: 0,
+ curveness: 0
+ }
+ },
+ data: lines
+ }
+ ],
+ };
+ lines_Chart.setOption(line_option);
+ /* 数据流出 */
+ var lines_chu = [
+
+ /* 出端 */
+ {
+ coords: [
+ [1, 801],
+ [243,968]
+ ],
+ effect: {
+ period: 1,
+ },
+ lineStyle: {
+ normal: {
+ color: '#119dd8'
+ }
+ }
+ },
+ {
+ coords: [
+ [23,756],
+ [215, 878]
+ ],
+ effect: {
+ period: 0.5,
+ },
+ lineStyle: {
+ normal: {
+ color: '#119dd8'
+ }
+ }
+ },
+ {
+ coords: [
+ [0, 764],
+ [343,968]
+ ],
+ effect: {
+ period: 1,
+ },
+ lineStyle: {
+ normal: {
+ color: '#119dd8'
+ }
+ }
+ },
+ {
+ coords: [
+ [2, 701],
+ [363,968]
+ ],
+ effect: {
+ period: 1,
+ },
+ lineStyle: {
+ normal: {
+ color: '#119dd8'
+ }
+ }
+ },
+ {
+ coords: [
+ [24, 653],
+ [332, 912]
+ ],
+ effect: {
+ period: 1,
+ },
+ lineStyle: {
+ normal: {
+ color: '#119dd8'
+ }
+ }
+ },
+ {
+ coords: [
+ [24, 603],
+ [384, 873]
+ ],
+ effect: {
+ period: 1,
+ },
+ lineStyle: {
+ normal: {
+ color: '#119dd8'
+ }
+ }
+ },
+ {
+ coords: [
+ [24, 553],
+ [368, 781]
+ ],
+ effect: {
+ period: 1.5,
+ },
+ lineStyle: {
+ normal: {
+ color: '#119dd8'
+ }
+ }
+ },
+ {
+ coords: [
+ [24, 553],
+ [337, 779]
+ ],
+ effect: {
+ period: 1.5,
+ },
+ lineStyle: {
+ normal: {
+ color: '#119dd8'
+ }
+ }
+ },
+ {
+ coords: [
+ [24, 453],
+ [338, 727]
+ ],
+ effect: {
+ period: 1.5,
+ },
+ lineStyle: {
+ normal: {
+ color: '#119dd8'
+ }
+ }
+ },
+
+ ]
+
+ var line_chu_option = {
+ backgroundColor: 'rgba(255,255,255,0)',
+ grid:{
+ top: 10,
+ bottom: 10,
+ left: 10,
+ right: 10,
+ width: 682,
+ height: 595,
+ },
+ xAxis: {
+ show: false,
+ min: 0,
+ max: 1000,
+ position: 'top',
+ axisPointer: {
+ show: false
+ }
+ },
+ yAxis: {
+ show: false,
+ min: 0,
+ max: 1000,
+ axisPointer: {
+ show: false
+ }
+ },
+
+ // 线条动画
+ series: [
+ {
+ type: 'lines',
+ coordinateSystem: 'cartesian2d',
+ zlevel: 1,
+
+ // 动画效果
+ effect: {
+ show: true,
+ period: 4, //特效动画的时间，单位为 s
+ trailLength: 0.5, //特效尾迹的长度。0~1数值越大尾迹越长
+ //color: '#d29781',
+ symbolSize: 6
+ },
+ lineStyle: {
+ normal: {
+ color: '#BF3EFF',
+ width: 0,
+ curveness: 0
+ }
+ },
+ data: lines_chu
+ }
+ ],
+ };
+ lines_Chart_chu.setOption(line_chu_option);
+ </script>
+</body>
+</html>
\ No newline at end of file diff --git a/src/main/webapp/WEB-INF/views/home.jsp b/src/main/webapp/WEB-INF/views/home.jsp index 43bea69..c56a6ad 100644 --- a/src/main/webapp/WEB-INF/views/home.jsp +++ b/src/main/webapp/WEB-INF/views/home.jsp @@ -11,12 +11,14 @@ <script src="${pageContext.request.contextPath}/static/pages/scripts/home.js" type="text/javascript"></script> - <script type="text/javascript"> - $(document).ready(function() { + $(document).ready(function() { + //$(".page-bar").addClass("hidden"); + sessionStorage.setItem("log_total","${log_total}"); sessionStorage.setItem("log_time_start","${log_time_start}"); sessionStorage.setItem("log_time_range","${log_time_range}"); + //window.frames['mainFrame'].location="${ctx}/dynamicpage/dynamicIndex"; window.frames['mainFrame'].location="${ctx}/dashboard/logChart"; //国际化切换 var lang = "${cookie.Language.value }".toLowerCase(); @@ -58,7 +60,14 @@ } }); - + // console(window.frames['mainFrame'].location); + // if(window.frames['mainFrame'].location.search("/dynamicIndex/")!=-1){ + //关闭菜单 + //$('.page-sidebar .sidebar-toggler').click(); + //f11全屏 + //fullScreen(); + //} + $("#searchText").click(function(){ $(this).val(""); }); @@ -67,6 +76,7 @@ //页面跳转函数 level:级别，1顶级，2有子级。name:菜单名称，有多级#间隔。url：访问路径。object：点击元素对象。 function page_turn(id, functionId,level, name, url,obj){ + //$(".page-bar").removeClass("hidden"); var $object = $("#menu_"+id);//点击当前级别 $(".page-sidebar li").filter(".active,.open").removeClass("active open");//删除选中样式 @@ -111,9 +121,9 @@ function page_turn(id, functionId,level, name, url,obj){ // }else{ App.startPageLoading({animate:true}); // } -// if(url.search("/nis/dashboard/")!=-1){ -// $('.page-sidebar .sidebar-toggler').click(); -// } + //if(url.search("/dynamicIndex/")!=-1){ + // $('.page-sidebar .sidebar-toggler').click(); + //} //调入页面 if(url.indexOf("?")>0){ @@ -178,7 +188,10 @@ function changeFrameHeight() { var headerHeight = $(".page-header").height(); var barHeight = $(".page-bar").height(); var footerHeight = $(".page-footer").height(); - var paddingHeight = 20; + //var paddingHeight = 20; + //update for dynamicHomePage S + var paddingHeight = 11; + //update for dynamicHomePage E iframe.contents().find(".page-content").addClass("page-content-body"); iframe.prop("height",clientHeight-headerHeight-barHeight-footerHeight-paddingHeight); @@ -260,6 +273,7 @@ background:#3d3d3d; src="${pageContext.request.contextPath}/static/layouts/layout/img/logo2.png" alt="logo" class="logo-default" /> </a> + <!-- <button type="button" onclick="javascript:fullScreen();">a</button> --> <div class="menu-toggler sidebar-toggler"> <span></span> @@ -467,12 +481,13 @@ background:#3d3d3d; <div class="page-bar"> <ul class="page-breadcrumb"> + <!-- <li><a href="${ctx}/dynamicpage/dynamicIndex" target="mainFrame"><spring:message code="home"></spring:message></a> <i class="fa fa-circle"></i></li> --> <li><a href="${ctx}/dashboard/logChart" target="mainFrame"><spring:message code="home"></spring:message></a> <i class="fa fa-circle"></i></li> </ul> </div> - <iframe id="mainFrame" name="mainFrame" width="100%" onload="changeFrameHeight()" frameborder="0" srcolling="no"> + <iframe id="mainFrame" name="mainFrame" width="100%" onload="changeFrameHeight()" frameborder="0" srcolling="no" style="background-color:#181818;"> <table id="contentTable" class="table table-striped table-bordered table-condensed text-nowrap"> <thead> <tr> @@ -508,6 +523,45 @@ background:#3d3d3d; </div> </div> <!-- END FOOTER --> + <script type="text/javascript"> + var fullflag = false; + // 全屏代码 + function fullScreen() { + if(fullflag){ + exitFullScreen(); + }else{ + fullflag = true; + var elem = document.body; + if (elem.webkitRequestFullScreen) { + elem.webkitRequestFullScreen(); + } else if (elem.mozRequestFullScreen) { + elem.mozRequestFullScreen(); + } else if (elem.requestFullScreen) { + elem.requestFullscreen(); + } else { + //notice.notice_show("浏览器不支持全屏API或已被禁用", null, null, null, true, true); + } + } + } + function exitFullScreen() { + fullflag = false; + var elem = document; + if (elem.webkitCancelFullScreen) { + elem.webkitCancelFullScreen(); + } else if (elem.mozCancelFullScreen) { + elem.mozCancelFullScreen(); + } else if (elem.cancelFullScreen) { + elem.cancelFullScreen(); + } else if (elem.exitFullscreen) { + elem.exitFullscreen(); + } else { + //notice.notice_show("浏览器不支持全屏API或已被禁用", null, null, null, true, true); + } + } + //window.onload = function() { + // fullScreen();//直接执行onclick中的函数就行 + //} + </script> </body> diff --git a/src/main/webapp/static/login/assets/gif/zzdt.gif b/src/main/webapp/static/login/assets/gif/zzdt.gif Binary files differnew file mode 100644 index 0000000..c942aa9 --- /dev/null +++ b/src/main/webapp/static/login/assets/gif/zzdt.gif diff --git a/src/main/webapp/static/login/assets/images/login/backimg-all.png b/src/main/webapp/static/login/assets/images/login/backimg-all.png Binary files differnew file mode 100644 index 0000000..a104735 --- /dev/null +++ b/src/main/webapp/static/login/assets/images/login/backimg-all.png diff --git a/src/main/webapp/static/login/assets/images/login/lines.gif b/src/main/webapp/static/login/assets/images/login/lines.gif Binary files differnew file mode 100644 index 0000000..f9baa8d --- /dev/null +++ b/src/main/webapp/static/login/assets/images/login/lines.gif diff --git a/src/main/webapp/static/login/assets/images/login/two/lines.gif b/src/main/webapp/static/login/assets/images/login/two/lines.gif Binary files differnew file mode 100644 index 0000000..f9baa8d --- /dev/null +++ b/src/main/webapp/static/login/assets/images/login/two/lines.gif diff --git a/src/main/webapp/static/login/assets/images/main/cl/app.png b/src/main/webapp/static/login/assets/images/main/cl/app.png Binary files differnew file mode 100644 index 0000000..208958b --- /dev/null +++ b/src/main/webapp/static/login/assets/images/main/cl/app.png diff --git a/src/main/webapp/static/login/assets/images/main/cl/cl_b.png b/src/main/webapp/static/login/assets/images/main/cl/cl_b.png Binary files differnew file mode 100644 index 0000000..80ea014 --- /dev/null +++ b/src/main/webapp/static/login/assets/images/main/cl/cl_b.png diff --git a/src/main/webapp/static/login/assets/images/main/cl/docunment.png b/src/main/webapp/static/login/assets/images/main/cl/docunment.png Binary files differnew file mode 100644 index 0000000..cf79dae --- /dev/null +++ b/src/main/webapp/static/login/assets/images/main/cl/docunment.png diff --git a/src/main/webapp/static/login/assets/images/main/cl/multmedia.png b/src/main/webapp/static/login/assets/images/main/cl/multmedia.png Binary files differnew file mode 100644 index 0000000..54b9c99 --- /dev/null +++ b/src/main/webapp/static/login/assets/images/main/cl/multmedia.png diff --git a/src/main/webapp/static/login/assets/images/main/cl/protocol.png b/src/main/webapp/static/login/assets/images/main/cl/protocol.png Binary files differnew file mode 100644 index 0000000..8a854a6 --- /dev/null +++ b/src/main/webapp/static/login/assets/images/main/cl/protocol.png diff --git a/src/main/webapp/static/login/assets/images/main/two/dizuo.png b/src/main/webapp/static/login/assets/images/main/two/dizuo.png Binary files differnew file mode 100644 index 0000000..92ea13c --- /dev/null +++ b/src/main/webapp/static/login/assets/images/main/two/dizuo.png diff --git a/src/main/webapp/static/login/assets/images/main/two/gaizi.png b/src/main/webapp/static/login/assets/images/main/two/gaizi.png Binary files differnew file mode 100644 index 0000000..770d8cd --- /dev/null +++ b/src/main/webapp/static/login/assets/images/main/two/gaizi.png diff --git a/src/main/webapp/static/login/assets/images/main/two/gaizi_bak.png b/src/main/webapp/static/login/assets/images/main/two/gaizi_bak.png Binary files differnew file mode 100644 index 0000000..7075237 --- /dev/null +++ b/src/main/webapp/static/login/assets/images/main/two/gaizi_bak.png diff --git a/src/main/webapp/static/login/assets/images/main/two/main_back.png b/src/main/webapp/static/login/assets/images/main/two/main_back.png Binary files differnew file mode 100644 index 0000000..19f4f26 --- /dev/null +++ b/src/main/webapp/static/login/assets/images/main/two/main_back.png diff --git a/src/main/webapp/static/login/assets/images/main/two/main_dicengquantu.png b/src/main/webapp/static/login/assets/images/main/two/main_dicengquantu.png Binary files differnew file mode 100644 index 0000000..2ba173e --- /dev/null +++ b/src/main/webapp/static/login/assets/images/main/two/main_dicengquantu.png diff --git a/src/main/webapp/static/login/assets/images/main/two/main_dizuo.png b/src/main/webapp/static/login/assets/images/main/two/main_dizuo.png Binary files differnew file mode 100644 index 0000000..a80a14a --- /dev/null +++ b/src/main/webapp/static/login/assets/images/main/two/main_dizuo.png diff --git a/src/main/webapp/static/login/assets/images/main/two/main_houzhao.png b/src/main/webapp/static/login/assets/images/main/two/main_houzhao.png Binary files differnew file mode 100644 index 0000000..b679c59 --- /dev/null +++ b/src/main/webapp/static/login/assets/images/main/two/main_houzhao.png diff --git a/src/main/webapp/static/login/assets/images/main/two/main_kongzhitai.png b/src/main/webapp/static/login/assets/images/main/two/main_kongzhitai.png Binary files differnew file mode 100644 index 0000000..e8e6b9d --- /dev/null +++ b/src/main/webapp/static/login/assets/images/main/two/main_kongzhitai.png diff --git a/src/main/webapp/static/login/assets/images/main/two/main_qtd.png b/src/main/webapp/static/login/assets/images/main/two/main_qtd.png Binary files differnew file mode 100644 index 0000000..65ddd15 --- /dev/null +++ b/src/main/webapp/static/login/assets/images/main/two/main_qtd.png diff --git a/src/main/webapp/static/login/assets/images/main/two/main_zhao.png b/src/main/webapp/static/login/assets/images/main/two/main_zhao.png Binary files differnew file mode 100644 index 0000000..afa2d8f --- /dev/null +++ b/src/main/webapp/static/login/assets/images/main/two/main_zhao.png |
