美文网首页
2018-12-19离线统计模块总结

2018-12-19离线统计模块总结

作者: 1f658716b568 | 来源:发表于2018-12-19 10:01 被阅读0次

这可能是截止目前写的最易读,最整洁的代码了吧

总结一下

web层
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="GatewayNodeOnOff.aspx.cs" Inherits="THMS.page.SuperOption.GatewayNodeOnOff" 
EnableEventValidation="false" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>运维离线统计</title>
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
    
    <link href="../../CommonNew/css/main.css" rel="stylesheet" type="text/css"></link>
    
    <link href="../../CommonNew/css/animate.min.css" rel="stylesheet" type="text/css"></link>

    <script src="../../Common/My97DatePicker/WdatePicker.js" type="text/javascript"></script>

    <script src="../../CommonNew/js/jquery-ui.min.js" type="text/javascript"></script>

    <script src="../../Common/jquery-easyui-1.3.1/jquery-1.8.0.min.js" type="text/javascript"></script>

    <link href="../../Common/jquery-easyui-1.5/themes/default/easyui.css" rel="stylesheet" type="text/css" />
    
    <link href="../../Common/jquery-easyui-1.5/themes/icon.css" rel="stylesheet" type="text/css" />

    <script src="../../Common/jquery-easyui-1.5/jquery.easyui.min.js" type="text/javascript"></script>

    <script src="../../Common/js/topTip.js" type="text/javascript"></script>
    
    <script src="../../Common/jquery-easyui-1.3.1/highcharts.js" type="text/javascript"></script>
    
    <script src="../../Common/jquery-easyui-1.3.1/exporting.js" type="text/javascript"></script>

    <link href="../../Common/Style/topTip.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        .ItemStyleNoDisplay
        {
            display: none;
        }
    </style>
    <script type="text/javascript">

        $(function () {
            topTip.create();

        });


        function Query() {
            document.getElementById("container").style.display = "none";
            var selectDate = $("#txtBegDate").val();
            var userName = $("#ddlMaintenance").combobox("getValue");

            //传值到后台并进行相关操作

            $.ajax(
                {
                    type: 'POST',
                    url: 'GatewayNodeOnOff.aspx',
                    dataType: 'text',
                    data: { Action: 'Query', selectDate: selectDate, userName: userName },
                    cache: false,
                    beforeSend: function ShowdivShowChangeQueryInfo() {
                        topTip.setData({
                            tipText: "正在获取数据...",
                            tipType: "loading"
                        }).showTopTip();
                    },
                    success: OperateCallBack,
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        topTip.setData({
                            tipText: "网络错误,请重试!",
                            tipType: "warn"
                        }).autoShowTopTip();
                    }
                });
            }
            function OperateCallBack(strs) {
                if (strs != "Empty") {
                    topTip.hideTopTip();
                    $("#ShowOperateInfo").html(strs);
                }
                else {
                    topTip.setData({
                        tipText: "没有匹配的数据!",
                        tipType: "error"
                    }).autoShowTopTip();
                    $("#ShowOperateInfo").html("没有匹配的数据");
                }
            }
            function HisGateway(obj) {
                var objImageBtn = obj;
                var obj2;
                obj2 = obj.id;
                var Gateway = obj2.split("_imgS");
                var GatewayID = $("#" + Gateway[0] + "_lbDayID").html();
                var GatewayName = $("#" + Gateway[0] + "_lbUserName").html();
                var OfflineRate = $("#" + Gateway[0] + "_lbOfflineRate").html();
                var DOLSNodeOrEquip = $("#" + Gateway[0] + "_lbDOLSNodeOrEquip").html();
                var DOLSDay = $("#" + Gateway[0] + "_lbDOLSDay").html();
                switch (DOLSNodeOrEquip) {
                    case '传感器':
                        DOLSNodeOrEquip = '0';
                        break;
                    case '网关':
                        DOLSNodeOrEquip = '1';
                        break;
                }
                window.open("HisGatewayNodeOnOff.aspx?GatewayName="+GatewayName+"&DOLSNodeOrEquip="+DOLSNodeOrEquip+"&DOLSDay="+DOLSDay+"");                
            }

            function HisGatewayNode(obj) {
                document.getElementById("container").style.display = "";
                var objImageBtn = obj;
                var obj2;
                obj2 = obj.id;
                var Gateway = obj2.split("_ibtn");
                var GatewayID = $("#" + Gateway[0] + "_lbDayID").html();
                var GatewayName = $("#" + Gateway[0] + "_lbUserName").html();
                var OfflineRate = $("#" + Gateway[0] + "_lbOfflineRate").html();
                var DOLSNodeOrEquip = $("#" + Gateway[0] + "_lbDOLSNodeOrEquip").html();
                var DOLSDay = $("#" + Gateway[0] + "_lbDOLSDay").html();
                switch(DOLSNodeOrEquip){
                    case '传感器':
                        DOLSNodeOrEquip = '0';
                        break;
                    case '网关':
                        DOLSNodeOrEquip = '1';
                        break;
                }
                $.ajax(
                {
                    type: 'POST',
                    url: 'GatewayNodeOnOff.aspx',
                    dataType: 'json',
                    data: { Action: 'HisQuery', OfflineRate: OfflineRate, GatewayName: GatewayName, DOLSNodeOrEquip: DOLSNodeOrEquip, DOLSDay: DOLSDay },
                    cache: false,
                    success:HighData,
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        topTip.setData({
                            tipText: "网络错误,请重试!",
                            tipType: "warn"
                        }).autoShowTopTip();
                    }
                });
            }

            function HighData(data) {
                var OfflineRate = new Array;
                var DOLS_Day = new Array;
                var ChartData = new Array;
                var DOLS_NodeOrEquip = new Array;
                for (var value in data) {
                    DOLS_Day = data[value].DOLS_Day;
                    OfflineRate = data[value].OfflineRate;
                    DOLS_NodeOrEquip = data[value].DOLS_NodeOrEquip;
                    ChartData += "[" + DOLS_Day + "," + OfflineRate + "]" + ",";
                }
                switch (DOLS_NodeOrEquip) {
                    case '0':
                        DOLS_NodeOrEquip = '传感器';
                        break;
                    case '1':
                        DOLS_NodeOrEquip = '网关';
                        break;
                }

                ChartData = ChartData.substr(0, ChartData.length - 1);
                ChartData="["+ChartData+"]";
                ChartLoad(DOLS_NodeOrEquip,ChartData);
            }
            
            //历史曲线
            function ChartLoad(DOLS_NodeOrEquip,ChartData) {

                Highcharts.setOptions({

                    global: {
                        //时间设置
                        useUTC: false//非常重要
                    },
                    lang: {
                        resetZoom: "缩放重置"
                    }
                });

                $('#container').highcharts({
                    chart: {
                        type: "spline",
                        //图形放大类型
                        zoomType: 'x',
                        //图形右侧空间
                        spacingRight: 20
                    },

                    title: {
                        text: '历史离线曲线统计信息',
                        style: {
                            fontSize: '12px'
                        }
                    },

                    subtitle: {
                        text: null
                    },

                    xAxis: {
                        maxZoom: 10 * 60 * 1000, //最大放大级别 eg.一天:24*60*60*1000
                        type: 'datetime',
                        dateTimeLabelFormats: {
                            millisecond: '%H:%M:%S.%L',
                            second: '%H:%M:%S',
                            minute: '%H:%M',
                            hour: '%H:%M',
                            day: '%m-%d',
                            week: '%m-%d',
                            month: '%Y-%m',
                            year: '%Y'
                        }
                    },
                    tooltip: {
                        dateTimeLabelFormats: {
                            millisecond: '%H:%M:%S.%L',
                            second: '%H:%M:%S',
                            minute: '%H:%M',
                            hour: '%H:%M',
                            day: '%Y-%m-%d',
                            week: '%m-%d',
                            month: '%Y-%m',
                            year: '%Y'
                        }
                    },

                    yAxis: [{
                        labels: {
                            format: '{value}%',
                            style: {
                                color: '#4572A7'
                            }
                        },
                        title: {
                            text: '离线率',
                            style: {
                                color: '#4572A7'
                            }
                        }
                    }],

                    legend: {
                        enabled: true
                    },

                    //导出
                    exporting: {
                        enabled: true,
                        filename: '历史离线曲线统计信息图',
                        width: 1200
                    },

                    credits: {
                        enabled: false //屏蔽版权信息
                    },

                    plotOptions: {
                        series: {
                            label: {
                                connectorAllowed: false
                            },
                            pointStart: Date.UTC(2010, 01, 01)
                        }
                    },

                    series: [{
                        name: DOLS_NodeOrEquip,
                        data: eval('(' + ChartData + ')')
                    }]

                });
            }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        
        <div class="nbg_title2">
            <span>运维离线统计</span></div>
        <div class="search_qy v_middle">
            <div class="txt">
                统计日期:</div>
            <div class="input v_middle">
                 <asp:TextBox ID="txtBegDate" runat="server" Width="240px" Height="40px" BorderColor="#A4BED4"
                        ForeColor="#5d7186" Font-Size="12"  onclick="WdatePicker({el:'txtBegDate',dateFmt:'yyyy-MM-dd'})"></asp:TextBox>
            </div>
            
            <div class="txt">
                    运维人员:</div>
                <div class="input v_middle">
                    <asp:DropDownList ID="ddlMaintenance" name="ddlMaintenance" runat="server" CssClass="easyui-combobox"
                        Width="242px" Style="border: 1px solid #d7e0ea; border-radius: 5px; height: 40px;
                        line-height: 40px; padding-left: 15px;">
                    </asp:DropDownList>
            </div>

            <div class="submit">
                <span id="DivQueringShow" style="margin-left: 10px; display: none;">
                    <img src="../../Common/Image/loading.gif" />
                </span>
                <input type="button" value="查询" onclick="Query();return false;" /></div>
        </div>
        <div class="shop_content">
            <div class="zkcurve_list">
                <div id="ShowRoleInfo">
                    <div id="divShowRoleInfo" style="width: 200px; margin-left: 10px; display: none;">
                        <img src="../../Common/Image/loading.gif" /><span style="margin-left: 10px;">正在加载数据......</span>
                    </div>
                </div>
                <div id="ShowOperateInfo" style="margin-top: 3px;">
                    <div id="divShowOperateInfo" style="width: 200px; margin-left: 10px; display: none;">
                        <img src="../../Common/Image/loading.gif" /><span style="margin-left: 10px;">正在加载数据......</span>
                    </div>
                </div>
            </div>
        </div>
        <%--style="display:none"--%>
        <div>
            <asp:GridView runat="server" ID="GatewayInfoGDV" AllowPaging="False" GridLines="None"
                CurrentSortField="" CurrentSortOrder="" PageSize="100" SeqNo="0" Width="100%"
                SeqText="序号" ShowSeqNo="true" AutoGenerateColumns="False">
                <HeaderStyle Wrap="False" BorderColor="#D7E0EA" Height="40px" ForeColor="#36AEEA">
                </HeaderStyle>
                <AlternatingRowStyle CssClass="Grid_AlternatingItem"></AlternatingRowStyle>
                <RowStyle Font-Size="14px" />
                <Columns>
                    <asp:TemplateField HeaderText="序号" InsertVisible="False" HeaderStyle-Wrap="false">
                        <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" />
                        <ItemTemplate>
                            <%-- gridview增加自动序号列 即使分页也会继续累积而不会重新排序 --%>
                            <asp:Label CssClass="InCenter" ID="lblNum" runat="server" Text='<%# this. GatewayInfoGDV.PageIndex*this.GatewayInfoGDV.PageSize + this.GatewayInfoGDV.Rows.Count +1%>'>
                            </asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="自身ID" InsertVisible="False" HeaderStyle-Wrap="false">
                        <HeaderStyle CssClass="ItemStyleNoDisplay" />
                        <ItemStyle HorizontalAlign="Center" CssClass="ItemStyleNoDisplay" />
                        <ItemTemplate>
                            <asp:Label ID="lbDayID" runat="server" Text='<%# Bind("DayOnLineStatistics_ID")%>'>
                            </asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="运维人员" InsertVisible="False" HeaderStyle-Wrap="false">
                        <ItemStyle HorizontalAlign="Center" Wrap="false"/>
                        <ItemTemplate>
                            <asp:Label ID="lbUserName" runat="server" Text='<%# Bind("User_Name")%>'>
                            </asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="统计单位" InsertVisible="False" HeaderStyle-Wrap="false">
                        <ItemStyle HorizontalAlign="Center" Wrap="false" />
                        <ItemTemplate>
                            <asp:Label ID="lbDOLSNodeOrEquip" runat="server" Text='<%# Bind("DOLS_NodeOrEquip")%>'>
                            </asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="日期" InsertVisible="False" HeaderStyle-Wrap="false">
                        <ItemStyle HorizontalAlign="Center" Wrap="false" />
                        <ItemTemplate>
                            <asp:Label ID="lbDOLSDay" runat="server" Text='<%# Bind("DOLS_Day")%>'>
                            </asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="总计" InsertVisible="False" HeaderStyle-Wrap="false">
                        <ItemStyle HorizontalAlign="Center" Wrap="false" />
                        <ItemTemplate>
                            <asp:Label ID="lbDOLSTotalCount" runat="server" Text='<%# Bind("DOLS_TotalCount")%>'>
                            </asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="在线" InsertVisible="False" HeaderStyle-Wrap="false">
                        <ItemStyle HorizontalAlign="Center" Wrap="false" />
                        <ItemTemplate>
                            <asp:Label ID="lbDOLSOnLineCount" runat="server" Text='<%# Bind("DOLS_OnLineCount")%>'>
                            </asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="离线" InsertVisible="False" HeaderStyle-Wrap="false">
                        <ItemStyle HorizontalAlign="Center" Wrap="false" />
                        <ItemTemplate>
                            <asp:Label ID="lbDOLSOffLineCount" runat="server" Text='<%# Bind("DOLS_OffLineCount")%>'>
                            </asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="离线率" InsertVisible="False" HeaderStyle-Wrap="false">
                        <ItemStyle HorizontalAlign="Center" Wrap="false" />
                        <ItemTemplate>
                            <asp:Label ID="lbOfflineRate" runat="server" Text='<%# Bind("OfflineRate")%>'>
                            </asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="昨日离线增加" InsertVisible="False" HeaderStyle-Wrap="false">
                        <ItemStyle HorizontalAlign="Center" Wrap="false" />
                        <ItemTemplate>
                            <asp:Label ID="lbOffLineCountADD" runat="server" Text='<%# Bind("OffLineCountADD")%>'>
                            </asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="历史离线率" HeaderStyle-Wrap="false">
                        <ItemStyle HorizontalAlign="Center" Wrap="false" />
                        <ItemTemplate>
                            <asp:LinkButton ID="imgS" OnClientClick='HisGateway(this);return false;'
                                runat="server" class="bt_off"></asp:LinkButton>
                        </ItemTemplate>
                        <ItemStyle />
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="历史离线曲线" HeaderStyle-Wrap="false">
                        <ItemStyle HorizontalAlign="Center" Wrap="false" />
                        <ItemTemplate>
                            <asp:LinkButton ID="ibtn" class="bt_qx" runat="server" OnClientClick='HisGatewayNode(this);return false;'></asp:LinkButton>
                        </ItemTemplate>
                        <ItemStyle />
                    </asp:TemplateField>
                </Columns>
            </asp:GridView>
        </div>
    </div>
    <div id="container" style="min-width:97%; height:320px; margin: 0 auto;"></div>
    </form>
</body>
</html>

相关文章

网友评论

      本文标题:2018-12-19离线统计模块总结

      本文链接:https://www.haomeiwen.com/subject/qeudkqtx.html