<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="../jquery-1.10.2.min.js"></script> <style> #fengji, #cdc, #zwxd, #tsb1, #tsb2 { display: none; } </style> </head> <body> <svg version="1.1" id="sketchpad" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="80%" height="80%" viewBox="60 0 1100 570"> <g> <image overflow="visible" width="2880" height="2000" xlink:href="dajingcun.png" transform="matrix(0.4246 0 0 0.3336 -4 -55.6528)"> </image> </g> <!--绘制指示灯开始--> <g id="lempBox"> <image id="fengji" x="285" y="370" width="15" height="15" xlink:href="run.gif"></image> <image id="cdc" x="707" y="315" width="15" height="15" xlink:href="run.gif"></image> <image id="zwxd" x="1027" y="385" width="15" height="15" xlink:href="run.gif"></image> <image id="tsb1" x="465" y="140" width="15" height="15" xlink:href="run.gif"></image> <image id="tsb2" x="485" y="145" width="15" height="15" xlink:href="run.gif"></image> </g> <!--绘制指示灯结束--> <!--绑定数据开始--> <g transform="translate(00 -15) "> <text x="195" y="165" fill="#082b59" style="font-family:微软雅黑;font-weight:bolder;font-size:8px;text-anchor: end;">Q= </text> <text x="255" y="165" fill="#082b59" style="font-family:微软雅黑;font-weight:bolder;font-size:9px;">m³/h</text> <text x="248" y="165" fill="#082b59" style="font-family:微软雅黑;font-weight:bolder;font-size:8px;text-anchor: end;" id="JSSSLL">暂无数据 </text> <rect width="50" height="15" x="200" y="155" style="fill:transparent;stroke-width:1;stroke:#002e73;"></rect> </g> <!--绑定数据结束--> </svg> <script> function judgeSta(data, id) { if (data != undefined) { $("#" + id).css("display", "block");//设置元素的显隐 var lempBox = document.getElementById(id); if (data.RunStatus == "1.0") { lempBox.href.baseVal = "run.gif";//修改image的图片 } if (data.RunStatus == "0.0") { lempBox.href.baseVal = "stop.gif"; } if (data.ErrorStatus == "1.0") { lempBox.href.baseVal = "alarm.gif"; } } } searchData(); function searchData() { var data = { "code": 200, "success": true, "message": "findDeviceRealTimeInfo success", "data": { "shebe1": {"Flow": "0.03", "dataTime": "1513063954727", "deviceId": "1025"}, "shebe2": { "RunStatus": "1.0", "AutoStatus": "0.0", "ErrorStatus": "0.0", "dataTime": "1513063954727", "deviceId": "1024" }, "shebe3": { "AutoState": "1.0", "RunStatus": "1.0", "ErrorStatus": "0.0", "dataTime": "1513063954724", "deviceId": "1019" }, "shebe4": { "dataTime": "1513063954725", "AutoState": "0.0", "RunStatus": "0.0", "ErrorStatus": "0.0", "deviceId": "1020" }, "shebe5": { "AutoState": "1.0", "RunStatus": "0.0", "dataTime": "1513063954723", "ErrorStatus": "0.0", "deviceId": "1017" }, "shebe6": { "ErrorStatus": "0.0", "dataTime": "1513063954724", "RunStatus": "0.0", "AutoState": "0.0", "deviceId": "1018" } } }; var JSSSLL = document.getElementById("JSSSLL");//进水瞬时流量 if (data.data.shebe1 != undefined) { if (data.data.shebe1.Flow != undefined || data.data.shebe1.Flow != null) { JSSSLL.textContent= parseFloat(data.data.shebe1.Flow).toFixed(2);// 文本框赋值 } } judgeSta(data.data.shebe3, "fengji"); judgeSta(data.data.shebe4, "cdc"); judgeSta(data.data.shebe2, "zwxd"); judgeSta(data.data.shebe5, "tsb1"); judgeSta(data.data.shebe6, "tsb2"); } </script> </body> </html>
jq svg 修改image的xmlns:xlink及图片的显隐
最新推荐文章于 2024-08-01 00:26:34 发布