jia
didiyu
2018-10-29 2d1ac5bf4914d99eff56914ef33b68592b9b9e75
jia
1个文件已添加
381 ■■■■■ 已修改文件
gx_tieta/WebRoot/batt-traffic-statistics.jsp 381 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
gx_tieta/WebRoot/batt-traffic-statistics.jsp
New file
@@ -0,0 +1,381 @@
<%@ 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%>">
    <title>流量统计</title>                <!--流量统计-->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="css/basic.css" rel="stylesheet">
    <link rel="stylesheet" href="css/BrdwMaint.css">
    <link rel="stylesheet" type="text/css" href="css/loading.css">
    <link rel="stylesheet" type="text/css" href="css/dischargeplan_layout.css">
    <link rel="stylesheet" type="text/css" href="src/css/layui.css">
    <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">
    <style type="text/css">
        body {
            overflow-x: hidden !important;
        }
        #tbHead table{
            width: 100%;
        }
        #tbBrdw {
            overflow: auto;
        }
        #tbBrdw tbody tr:hover {
            background-color: #DDDDDD;
        }
        #cardOption .con_table {
            overflow: auto;
        }
        #tbBrdw table {
            width: 100%;
        }
        #tbBrdw table i.fa-refresh {
            font-size:18px;
            cursor: pointer;
        }
        #cardOption input[type="checkbox"] {
            vertical-align: middle;
        }
        #cardOption table thead input[type="checkbox"]{
            margin-left: 4px;
        }
    </style>
    </head>
    <body>
        <!--头部内容开始-->
        <jsp:include page="Top.jsp" flush="true"/>
        <!--头部内容结束-->
        <!--导航开始-->
        <jsp:include page="nav.jsp" flush="true"/>
        <!-- 主体内容 -->
        <div id="main">
            <div id="eleInfor">
                <span class="summary">流量统计</span>
                <div class="checkCon">
                    <!-- 维护区信息 -->
                    <form action="" id="search_form">
                    <table>
                        <tr class="fWeight">
                             <td>省</td>                        <!-- 省 -->
                            <td>市</td>                        <!-- 市 -->
                            <td><s:text name="Computer_name"/></td>                            <!-- 机房名称 -->
                            <td>统计方式</td>
                            <td colspan="2" style="width: 30%;">时间段</td>
                        </tr>
                        <tr>
                            <td>
                                <select id="station_name1">
                                </select>
                            </td>
                            <td>
                                <select id="city">
                                </select>
                            </td>
                            <td>
                                <select id="station_name">
                                </select>
                            </td>
                            <td>
                                <select>
                                        <option>按年统计</option>
                                        <option>按月统计</option>
                                        <option>按日统计</option>
                                </select>
                            </td>
                            <td><input type="text" id="startalm" readonly="readonly" name="bmd.adata.alm_start_time" value="2000-1-1" /></td>
                            <td><input type="text" id="endTalm" readonly="readonly" name="bmd.adata.alm_start_time1" /></td>
                        </tr>
                    </table>
                    </form>
                </div>
            </div>
            <!-- 表格固定的头部 -->
            <div id="tbHead"></div>
            <!-- 表格滚动的部分 -->
            <div id="tbBrdw"></div>
            <!-- 按钮内容 -->
            <div id="paging">
               <span>总计</span>
               <span>5000</span>
            </div>
        </div>
        <!-- 整体灰色遮罩层 -->
        <div id="allShade"></div>
        <script type="text/javascript" src="js/loading.js"></script>
        <script type="text/javascript" src="js/createTab.js"></script>
        <script type="text/javascript" src="src/layui.js"></script>
        <script type="text/javascript" src="js/eleHistWarn1-jquery.ui.js"></script>
        <script type="text/javascript">
            layui.use(['layer'], function() {
                var layer = layui.layer;
                var arrTh = new Array();    // 表格的头部
                var arrTd = new Array();    // 表格的表体
                var tblStatus = new Array();    // 表格状态数组
                var tblOptsHd = new Array();    // 表格选项头部
                var tblOptsBd = new Array();  // 表格选项数组
                arrTh = ['时间段', '机房名称','流量','统计时间'];
                //arrTh = ['<s:text name="Maintenance_area"/>', '<s:text name="Computer_name"/>',  '<s:text name="Nominal_capacity"/>(AH)', '<s:text name="Actual_capacity"/>(AH)','<s:text name="Residual_capacity"/>(AH)', '<s:text name="real_time"/><s:text name="Current"/>(A)', '<s:text name="Power_cut"/><s:text name="Endurance"/><s:text name="Time"/>'];
                //tblOptsHd = ['编号', '选项', '是否选择'];
                tblOptsHd = ['<s:text name="Number"/>', '<s:text name="Options"/>', '<s:text name="IsChecked"/>'];
                var tblHd = $('#tbHead');
                var tblBd = $('#tbBrdw');
                // 根据表格的头部生成表格选项和表格的状态数组
                $(function() {
                    centerDiv($('#cardOption'));
                    // 遍历表格头部生成状态数组
                    for(var i = 0; i < arrTh.length; i++) {
                        tblStatus.push(1);
                        var temp = new Array();
                        temp.push(i+1);
                        temp.push(arrTh[i]);
                        temp.push('<input type="checkbox" checked="checked"/>');
                        tblOptsBd.push(temp);
                    }
                    var cardHd = $('#cardOption .tbHead');
                    var cardBd = $('#cardOption .con_table');
                    createCard(cardHd, tblOptsHd, tblOptsBd);
                    createCard(cardBd, tblOptsHd, tblOptsBd);
                });
                // 生成表格
                $(function() {
                     for(i=0;i<5000;i++){arrTd.push(i)}
                    createAllTbl(tblHd, tblBd, arrTh, arrTd, tblStatus);
                    // 点击表格选项显示表格选项弹出框
                    $('#paging .card-opt').click(function() {
                        var checkboxList = $('#cardOption .con_table table tbody').find('input[type="checkbox"]');
                        // 根据状态数组修改表格选项复选框的状态
                        for(var i = 0; i < tblStatus.length; i++) {
                            if(tblStatus[i] == 1) {
                                checkboxList.eq(i).prop('checked', true);
                            }else{
                                checkboxList.eq(i).prop('checked', false);
                            }
                        }
                        $('#cardOption').show();
                        $('#allShade').show();
                    });
                    // 点击取消和确定隐藏表格选项窗口和遮罩层
                    $('#cardOption .en-card-opts').click(function() {
                        // 根据表格选项的复选框设置状态数组
                        var checkboxList = $('#cardOption .con_table table tbody').find('input[type="checkbox"]');
                        checkboxList.each(function(i) {
                            if($(this).is(':checked')) {
                               tblStatus[i] = 1;
                            }else{
                                tblStatus[i] = 0;
                            }
                        });
                        createAllTbl(tblHd, tblBd, arrTh, arrTd, tblStatus);
                        $('#cardOption').hide();
                        $('#allShade').hide();
                    });
                    $('#cardOption .out-card-opts').click(function() {
                        $('#cardOption').hide();
                        $('#allShade').hide();
                    });
                });
                // 根据表格的的头部生成
                $(function() {
                    $('#endtime').val(new Date().format('yyyy-MM-dd'));
                });
                // 初始化页面高度
                $(function() {
                    pageInit();
                    $(window).resize(function() {
                        pageInit();
                    });
                });
                // 初始化页面内容
                function pageInit() {
                    var winHt = $(window).height();
                    var bodyHt = $('body').height();
                    var tblHt = $('#tbBrdw').height();
                    var shiftHt = winHt - bodyHt - 32;
                    if(shiftHt > 0) {
                        $('#tbBrdw').height(shiftHt + tblHt);
                    }
                }
                // 生成表格的头部和表体
                function createAllTbl (header, body, arrTh, arrTd, status) {
                    //console.info(status);
                    var newArrTh = new Array();
                    var newArrTd = new Array();
                    newArrTh = getArrTh(status, arrTh);
                    newArrTd = getArrTd(status, arrTd);
                    createTablenew(header, newArrTh, newArrTd);
                    createTablenew(body, newArrTh, newArrTd);
                    // 定义表格的头部和表体宽度一致
                    var bdWidth = body.find('table').width();
                    header.find('table').width(bdWidth);
                }
                //对于弹出串口进行定位(position:fixed)
                function centerDiv(ele){
                    //获取屏幕的高度对弹出窗口进行定位
                    var srnHei=$(window).height();    //屏幕的高度
                    var eleHei=ele.height();    //弹出窗口的高度
                    var topHei=parseInt((srnHei-eleHei)/2);    //获取居中高度
                    ele.css({
                        'top':topHei
                    });
                }
                  // 省-市-机房-电池组
                $(document).ready(function(){
                    //页面加载时查询维护区中的枢纽类型
                    $.post("User_battgroup_baojigroup_battgroupAction!serchStationName1InGroup",null,function(data){
                        data=data.result;
                        data=eval("("+data+")");
                        //console.info(data);
                        if(data.code==1 && data.data.length>0){
                            var $select = $("#station_name1");
                            $select.text('');
                            for(var i=0;i<=data.data.length;i++){
                                $option=$("<option></option>");
                                if(i==0){
                                    $option.html("<s:text name='All'/>(<s:text name='Common'/>"+data.data.length+"<s:text name='Species'/>)");
                                    $option.attr("value", "");
                                }else{
                                    $option.text(data.data[i-1]);
                                    $option.attr("value",data.data[i-1]);
                                }
                                $select.append($option);
                            }
                        }else{
                            $("#station_name1").text('').html('<option>暂无管理的维护区</option>');
                        }
                        findCity();
                    });
                });
                function findCity() {
                    var data = {
                        StationName1: $("#station_name1").val()
                    };
                    // 请求获取当前省下的市
                    $.ajax({
                        type: "post",
                        url: "BattInfAction!serchStationName2",
                        async:true,
                        dataType:'json',
                        data:"json = "+JSON.stringify(data),
                        success: function(data){
                            var rs = JSON.parse(data.result);
                            var $select = $("#city");
                            if(rs.code == 1) {
                                var _data= rs.data;
                                // 根据数据构造生成下拉列表的数据
                                var optsList = [];
                                for(var i=0;i<_data.length;i++){
                                    var __data = _data[i];
                                    var tmp = getOptionsData(__data.StationName2, __data.StationName2, __data);
                                    optsList.push(tmp);
                                }
                                // 根据数据生成下拉列表
                                createOptions($select, optsList, true);
                            }else {
                                $select.text('').html('<option>暂无可测市</option>');
                            }
                            findStationNamebyStationname1();
                        }
                    });
                }
                //当维护区的值变换时更新市
                $('#station_name1').change(function(){
                    findCity();
                });
                //当维护区的值变换时更新机房站点
                $('#city').change(function(){
                    findStationNamebyStationname1();
                });
                //根据省,市查询站点
                function findStationNamebyStationname1(){
                    findStationNamebyStationname1.stations = new Array();
                    var tmp = {
                        StationName1:$("#station_name1").val(),
                        StationName2:$("#city").val()
                    };
                    //var selectvalue=$("#station_name1 option:selected").val();
                    //alert(selectvalue);
                    $.post("BattInfAction!serchStationName3","json="+JSON.stringify(tmp),function(data){
                        var rs = JSON.parse(data.result);
                        if(rs.code==1){
                            var _data = rs.data;
                            var $select = $("#station_name");
                            // 根据数据构造生成下拉列表的数据
                            var optsList = [];
                            for(var i=0;i<_data.length;i++){
                                var __data = _data[i];
                                //console.info(__data);
                                var _attr = {
                                    StationId: __data.FBSDeviceId,
                                };
                                var tmp = getOptionsData(__data.StationName3, __data.StationName, __data, _attr);
                                optsList.push(tmp);
                            }
                            findStationNamebyStationname1.stations = _data;
                            // 根据数据生成下拉列表
                            createOptions($select, optsList, true);
                        }else{
                            $("#station_name").text('').html('<option>暂无可测机房站点</option>');
                        }
                    });
                }
            });
            //获取选中的机房对象
            function getSelectStation(dev_id,arr){
                if(arr != undefined && arr.length > 0){
                    for(var i=0;i<arr.length;i++){
                        if(arr[i].FBSDeviceId == dev_id){
                            return arr[i];
                        }
                    }
                }
                return undefined;
            }
        </script>
    </body>
</html>