一个嵌入Flash的Gadget小程序
Main.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>主动监控</title>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript" src="FusionCharts.js"></script>
<script type="text/javascript">
var openUrl;
//var hostIP = "http://10.204.32.116/ActiveChart";
var hostIP = "http://localhost:9999";
Date.prototype.Format = function(formatStr) {
var str = formatStr;
var now = new Date();
var Week = ['日', '一', '二', '三', '四', '五', '六'];
str = str.replace(/yyyy|YYYY/, now.getFullYear());
str = str.replace(/yy|YY/, (now.getYear() % 100) > 9 ? (now.getYear() % 100).toString() : '0' + (now.getYear() % 100));
str = str.replace(/MM/, now.getMonth() > 9 ? now.getMonth().toString() : '0' + now.getMonth());
str = str.replace(/M/g, now.getMonth());
str = str.replace(/w|W/g, Week[now.getDay()]);
str = str.replace(/dd|DD/, now.getDate() > 9 ? now.getDate().toString() : '0' + now.getDate());
str = str.replace(/d|D/g, now.getDate());
str = str.replace(/hh|HH/, now.getHours() > 9 ? now.getHours().toString() : '0' + now.getHours());
str = str.replace(/h|H/g, now.getHours());
str = str.replace(/mm/, now.getMinutes() > 9 ? now.getMinutes().toString() : '0' + now.getMinutes());
str = str.replace(/m/g, now.getMinutes());
str = str.replace(/ss|SS/, now.getSeconds() > 9 ? now.getSeconds().toString() : '0' + now.getSeconds());
str = str.replace(/s|S/g, now.getSeconds());
return str;
}
var timeout = 10000;
function updateChart(DOMId) {
$(document).ready(function() {
var dn = System.Gadget.Settings.readString("dn");
var kpiId = System.Gadget.Settings.readString("kpiId");
var kpiName = System.Gadget.Settings.readString("kpiName");
System.Debug.outputString(dn); //DEBUG CODE
System.Debug.outputString(kpiId); //DEBUG CODE
System.Debug.outputString(kpiName); //DEBUG CODE
$.ajax({
type: "POST", //访问WebService使用Post方式请求
contentType: "application/json", //WebService 会返回Json类型
url: hostIP + "/Chart/GadgetService.asmx/SetKpiValueByDN", //调用WebService的地址和方法名称组合 ---- WsURL/方法名
data: "{dn:'" + dn + "',chsName:'" + kpiName + "',KpiId:" + kpiId + "}", //这里是要传递的参数，格式为 data: "{paraName:paraValue}",下面将会看到
dataType: 'json',
success: function(result) { //回调函数，result，返回值
openUrl = result.d + "";
System.Debug.outputString("URL:" + result.d); //DEBUG CODE
}
});
});
var strURL = hostIP +"/Chart/Gallery/Data/Angular5.xml?time=a" + Date.prototype.Format("yyyyMMddhhmmss");
var myChart = new FusionCharts(hostIP + "/Chart/Charts/AngularGauge.swf", "myChartId", "200", "200", "0", "0");
myChart.setDataURL(strURL);
myChart.render("chartdiv");
Load_Settings();
timerID = setTimeout(updateChart, timeout);
//var setI = setInterval(updateChart, 2000);
}
function Load_Settings() {
try {
speedcfg = System.Gadget.Settings.readString("speed");
if (speedcfg) timeout = parseInt(speedcfg) * 1000;
System.Debug.outputString("加载" + timeout); //DEBUG CODE
} catch (e) { };
}
function Initialize() {
try {
System.Gadget.settingsUI = "options.html";
Load_Settings();
} catch (e) {
System.Debug.outputString("调试信息" + e); //DEBUG CODE
};
}
function windowOpen() {
window.open(openUrl, "NewWin", "height=524,width=1100,top=0,left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no,fullscreen=yes");
}
</script>
</head>
<body onload="Initialize();updateChart();" style=" margin:0; width: 200px; height: 200px; background-repeat:no-repeat; background:url(bgbk5.png);">
<form id="form1" runat="server">
<table width='98%' align='center' cellpadding='2' cellspacing='0'>
<tr>
<td align="center">
<div id="chartdiv" align="center" onmousedown="javascript:windowOpen();" ></div>
</td>
</tr>
<tr height='10'>
<td></td>
</tr>
</table>
</form>
</body>
</html>
Options.htm
<html>
<head>
<title>Options</title>
<script src="jquery.js" type="text/javascript"></script>
<script>
//var hostIP = "http://10.204.32.116/ActiveChart";
var hostIP = "http://localhost:9999";
var speed1 = 100; // slow
var speed2 = 25; // normal
var speed3 = 10; // fast
var speed4 = 5; // super
function LoadSettings() {
try {
System.Gadget.onSettingsClosing = onclose;
} catch (e) { };
speed = "10";
try {
speed = System.Gadget.Settings.readString("speed");
} catch (e) { };
if (speed) { ; } else speed = "10"; //initial speed
vspeed = parseInt(speed);
txtCustomSpeed.value = speed;
$(document).ready(function() {
try {
var top = System.Gadget.Settings.readString("top");
var down = System.Gadget.Settings.readString("down");
var neEngName = System.Gadget.Settings.readString("neEngName");
if (top) { ; } else top = "0";
if (down) { ; } else down = "200";
if (neEngName) { ; } else neEngName = "SYGS52";
$("#top").val(top);
$("#down").val(down);
$("#NEName").val(neEngName);
System.Debug.outputString("成功");
}
catch (e) {
System.Debug.outputString("失败");
}
})
}
function onclose(event) {
if (event.closeAction == event.Action.commit) {
// save settings
System.Gadget.Settings.write("caption", (chkName.checked ? "1" : "0"));
System.Gadget.Settings.write("core", (cboCore.value + ""));
System.Gadget.Settings.write("speed", txtCustomSpeed.value);
$(document).ready(function() {
$.ajax({
type: "POST", //访问WebService使用Post方式请求
contentType: "application/json", //WebService 会返回Json类型
url: hostIP + "/Chart/GadgetService.asmx/UpdateValueRange", //调用WebService的地址和方法名称组合 ---- WsURL/方法名
data: "{top:'" + $("#top").val() + "',down:'" + $("#down").val() + "'}", //这里是要传递的参数，格式为 data: "{paraName:paraValue}",下面将会看到
dataType: 'json',
success: function(result) { //回调函数，result，返回值
System.Debug.outputString("结果" + result.d); //DEBUG CODE
}
});
});
System.Debug.outputString("{top:'" + $("#top").val() + "',down:'" + $("#down").val() + "'}"); //DEBUG CODE
System.Gadget.Settings.write("top", $("#top").val());
System.Gadget.Settings.write("down", $("#down").val());
System.Gadget.Settings.write("neEngName", $("#NEName").val());
System.Gadget.Settings.write("kpiId", $("#KpiList option:selected").val());
System.Gadget.Settings.write("kpiName", $("#KpiList option:selected").text());
System.Debug.outputString($("#KpiList option:selected").text());
System.Debug.outputString($("#KpiList option:selected").val());
}
event.cancel = false;
}
function DisplayKPI() {
$(document).ready(function() {
var noVar = true;
$.ajax({
type: "POST", //访问WebService使用Post方式请求
contentType: "application/json", //WebService 会返回Json类型
url: hostIP + "/Chart/GadgetService.asmx/GetKpiInfoByNeEngName", //调用WebService的地址和方法名称组合 ---- WsURL/方法名
data: "{NeName:'" + $("#NEName").val() + "'}", //这里是要传递的参数，格式为 data: "{paraName:paraValue}",下面将会看到
dataType: 'json',
success: function(result) { //回调函数，result，返回值
$(result.d).each(function() {
//alert(this);
noVar = false;
$("#KpiList").append("<option value='" + this['KpiId'] + "'>" + this['KpiChsName'] + "</option>");
System.Debug.outputString(noVar);
//jQuery("select[name=sel]").append("<option value='" + key + "'>" + value + "</option>");
System.Debug.outputString(this['KpiChsName'] + " " + this['KpiId']);
//alert(result.d.join(" | "));
});
}
});
System.Debug.outputString(noVar);
if (noVar == false) {
$("#msgInfo").text("无此网元");
}
$.ajax({
type: "POST", //访问WebService使用Post方式请求
contentType: "application/json", //WebService 会返回Json类型
url: hostIP + "/Chart/GadgetService.asmx/GetDnByNeEngName", //调用WebService的地址和方法名称组合 ---- WsURL/方法名
data: "{neName:'" + $("#NEName").val() + "'}", //这里是要传递的参数，格式为 data: "{paraName:paraValue}",下面将会看到
dataType: 'json',
success: function(result) { //回调函数，result，返回值
System.Gadget.Settings.write("dn", result.d);
System.Debug.outputString("网元DN" + result.d);
}
});
System.Debug.outputString(noVar);
if (noVar == false) {
$("#msgInfo").text("无此网元");
}
});
}
</script>
<style type="text/css">
body
{
margin: 0px;
font-family: Segoe UI, Tahoma, sans-serif;
font-size: 12px;
width: 260px;
height: 120px;
}
table
{
font-size: 12px;
font-family: Segoe UI, Tahoma, sans-serif;
}
</style>
</head>
<body onload="LoadSettings();">
<table border="0" width="260" cellpadding="0" cellspacing="5">
<tr>
<td valign="middle">
查询网元:
</td>
<td align="left">
<input type="text" id="NEName" style='width: 95px;' />
<select id="cboCore" style="display: none;" style='width: 95px;'>
<!--<option value=1>Single CPU</option>
<option value=2>Average</option>
<option value=3>CPU #1</option>
<option value=4>CPU #2</option>-->
</select>
<input id="QNE" type="button" onclick="DisplayKPI();" value="列出指标" />
</td>
</tr>
<tr>
<td valign="middle">
选择指标:
</td>
<td align="left">
<select id="KpiList" style='width: 125px;'>
</select>
<span id ="msgInfo" style=" color:Red"></span>
</td>
</tr>
<tr>
<td valign="middle">
设置范围:
</td>
<td>
<input type="text" id="top" size="5" maxlength="6" value="0" />---
<input type="text" id="down" size="5" maxlength="6" value="200" />
</td>
</tr>
<tr>
<td valign="middle">
监控粒度:
</td>
<td valign="middle" style="display: ">
<select id="cboSpeed" onchange="CboChanged();" style='width: 95px;'>
<option value="1">慢</option>
<option value="2">正常</option>
<option value="3">快速</option>
<option value="4">特快</option>
<option value="5">自定义</option>
</select>
<input type="text" id="txtCustomSpeed" size="5" maxlength="6" value="10" onblur="v=parseInt(this.value);if(isNaN(v)) this.value='100'; else if(v<20) this.value='20'; else this.value=v;">
<span style="position: relative; top: -4px;">秒
</td>
</tr>
<input type="checkbox" style="display: none" id="chkName">
</table>
</body>
</html>