这可能是截止目前写的最易读,最整洁的代码了吧
总结一下
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>
网友评论