<html>
<head>
<title>SVG演示</title>
<script src="jquery-1.8.0.min.js" type="text/javascript"></script>
</head>
<body style="margin: 0px; padding: 0px;">
<div style="text-align: center; background-color: #009694;">
<embed id="svgDoc" src="lnhld.svg" width='100%' height='100%' type="image/svg+xml"
wmode='transparent'></embed>
<!-- <iframe src="lnhld.svg" width='100%' height='100%'></iframe>-->
<!-- object 在火狐和google下面svg里调用html代码有问题-->
<!-- <object data="lnhld.svg" width="100%" height="100%" type="image/svg+xml">-->
<!--</object>-->
</div>
<script language="javascript" type="text/javascript">
var ip = "172.18.16.247";
var port = "8889"
var tags = "\\TestTag\\mnl_1,\\TestTag\\mnl_1,\\TestTag\\mnl_1,\\TestTag\\mnl_1,\\TestTag\\mnl_1,\\TestTag\\mnl_1";
var svgDoc = null;
var svgRoot = null; //SVG根元素
var svg_jzyl = null;
var svg_jzwd = null;
var svg_czyl = null;
var svg_czwd = null;
var svg_wd = null;
var svg_yl = null;
var svg_yll = null; //压力炉
var timer = null;
/// <summary>启动定时刷新</summary>
function Start() {
InitSvgElement();
this.timer = setInterval("GetTagValues()", 1000);
}
/// <summary>启动定时刷新</summary>
function Stop() {
clearInterval(this.timer);
}
/// <summary>获取测点数据</summary>
function GetTagValues() {
try {
$.ajax({
type: "POST",
url: "../PsWebService.asmx/GetTagValues",
data: { ip: ip, port: port, tagNames: tags },
dataType: 'xml',
error: function (request) {
alert("调用webService异常");
},
success: function (msg) {
var tagValueJSON = $(msg).find("string").text();
UpdateTagLables(tagValueJSON);
}
});
} catch (e) {
alert(e.Message);
}
}
/// <summary>初始化SVG元素</summary>
function InitSvgElement() {
this.svgDoc = document.getElementById('svgDoc').getSVGDocument();
this.svgRoot = this.svgDoc.documentElement;
this.svg_jzwd = this.svgDoc.getElementById("tspan-jzwd");
this.svg_jzyl = this.svgDoc.getElementById("tspan-jzyl");
this.svg_czyl = this.svgDoc.getElementById("tspan-czyl");
this.svg_czwd = this.svgDoc.getElementById("tspan-czwd");
this.svg_yl = this.svgDoc.getElementById("tspan-yl");
this.svg_wd = this.svgDoc.getElementById("tspan-wd");
this.svg_yll = this.svgDoc.getElementById("rect-ylg");
}
/// <summary>更新标签数据</summary>
function UpdateTagLables(valueJSON) {
var tagValueArray = eval('(' + valueJSON + ')');
if (tagValueArray.length != 6) {
// alert("数据长度不足,请按照顺序设置测点!" + tagValueArray.length);
return;
}
else {
this.SetElementValue(this.svg_jzwd, tagValueArray[0].Value, " ℃");
this.SetElementValue(this.svg_jzyl, tagValueArray[1].Value, " MPa");
this.SetElementValue(this.svg_czwd, tagValueArray[2].Value, " ℃");
this.SetElementValue(this.svg_czyl, tagValueArray[3].Value, " MPa");
this.SetElementValue(this.svg_wd, tagValueArray[4].Value, " ℃");
this.SetElementValue(this.svg_yl, tagValueArray[5].Value, " MPa");
var yl = (tagValueArray[5].Value / 1000) * 68; //当前值除以量程(1000)得到百分比,然后乘以压力计的最大宽度得出实际应该显示的高度
yl = CurrencyFormatted(yl);
this.svg_yll.setAttributeNS(null, "width", yl);
}
}
/// <summary>设置元素值,数据进行格式化保留两位小数</summary>
function SetElementValue(element, value, unit) {
var newValue = CurrencyFormatted(value);
if ($.browser.msie&&$.browser.version=="8.0") { //IE 下的写法
element.getFirstChild().setNodeValue(newValue + unit);
}
if ($.browser.msie && $.browser.version == "9.0") { //IE 下的写法
element.firstChild.textContent = newValue + unit;
}
if ($.browser.msie && $.browser.version == "10.0") { //IE 下的写法
element.firstChild.textContent = newValue + unit;
}
if ($.browser.chrome) { //Chrome下的写法
element.firstChild.textContent = newValue + unit;
}
else {
element.firstChild.textContent = newValue + unit;
}
}
/// <summary>四舍五入保留两位小数</summary>
function CurrencyFormatted(amount) {
var i = parseFloat(amount);
if (isNaN(i)) {
i = 0.00;
}
var minus = '';
if (i < 0) {
minus = '-';
}
i = Math.abs(i);
i = parseInt((i + .005) * 100);
i = i / 100;
s = new String(i);
if (s.indexOf('.') < 0) {
s += '.00';
}
if (s.indexOf('.') == (s.length - 2)) {
s += '0';
}
s = minus + s;
return s;
}
</script>
</body>
</html>
- 1
- 2
前往页