viewSsjk.htm 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  5. <title>实时监控查看</title>
  6. <link rel="StyleSheet" href="css/huimv.css" type="text/css" />
  7. <style type="text/css">
  8. .playMain {
  9. width: 520px;
  10. /* height: 440px; */
  11. float: left;
  12. }
  13. .realPlayX {
  14. width: 500px;
  15. height: 400px;
  16. border: solid 2px #468dcd;
  17. margin-left: 8px;
  18. margin-top: 2px;
  19. }
  20. .buttonGroup {
  21. width: 502px;
  22. height: 30px;
  23. margin-left: 8px;
  24. margin-top: 2px;
  25. }
  26. .btd1 {
  27. width: 52px;
  28. text-align: center;
  29. }
  30. .btd2 {
  31. width: 109px;
  32. text-align: center;
  33. }
  34. .btd3 {
  35. width: 42px;
  36. text-align: center;
  37. }
  38. .chartGroup {
  39. width: 250px;
  40. height: 440px;
  41. float: left;
  42. }
  43. .chart {
  44. width: 240px;
  45. height: 140px;
  46. margin-left: 20px;
  47. margin-bottom: 5px;
  48. }
  49. </style>
  50. <script type="text/javascript" src="views/sj/yzgk/ssjk/viewSsjk.js"></script>
  51. <script type="text/javascript">
  52. var axRealPlayX = document.getElementById('AV_RealPlayX');
  53. var bPlaying = false;
  54. var isExpanding = false;
  55. var WshShell;
  56. var safe = false;
  57. try {
  58. WshShell = new ActiveXObject("WScript.Shell");
  59. } catch (e) {
  60. safe = true;
  61. }
  62. if (safe)
  63. alert("使用IE浏览器,更改“Internet选项”->“安全”->“自定义级别”设置,启用:\n“对未标记为可安全执行脚本的ActiveX控件初始化并执行脚本”");
  64. if ($("#mark1").val() == "" || $("#mark1").val() == null
  65. || $("#mark1").val() == "null") {
  66. $("#mark1").css("display", "none");
  67. }
  68. if ($("#mark2").val() == "" || $("#mark2").val() == null
  69. || $("#mark2").val() == "null") {
  70. $("#mark2").css("display", "none");
  71. }
  72. if ($("#mark3").val() == "" || $("#mark3").val() == null
  73. || $("#mark3").val() == "null") {
  74. $("#mark3").css("display", "none");
  75. }
  76. if ($("#mark4").val() == "" || $("#mark4").val() == null
  77. || $("#mark4").val() == "null") {
  78. $("#mark4").css("display", "none");
  79. }
  80. function realPlay(channel) {
  81. var ip = $("#ip").val();
  82. var port = $("#port").val();
  83. var user = $("#user").val();
  84. var password = $("#password").val();
  85. axRealPlayX = document.getElementById("AV_RealPlayX");
  86. var bSuccess = axRealPlayX.SetDeviceInfo(ip, port, channel - 1, user,
  87. password);
  88. if (bSuccess) {
  89. bPlaying = axRealPlayX.StartPlay();
  90. }
  91. }
  92. function stopPlay() {
  93. document.all("AV_RealPlayX").StopPlay();
  94. bPlaying = false;
  95. }
  96. function ptzControl(cmd, stop) {
  97. if (bPlaying) {
  98. var speed = $("#speed").val();
  99. if (speed != null && speed != "") {
  100. axRealPlayX.PTZControl(cmd, stop, speed);
  101. } else {
  102. return;
  103. }
  104. } else {
  105. return;
  106. }
  107. }
  108. function ptzReset() {
  109. if (bPlaying) {
  110. axRealPlayX.PTZControl(10,0,1);
  111. } else {
  112. return;
  113. }
  114. }
  115. function showMore() {
  116. if (bPlaying) {
  117. if (!isExpanding) {
  118. $("#moreControl").css("display", "");
  119. $("#more").attr("src", "./images/close.png");
  120. isExpanding = true;
  121. } else {
  122. $("#moreControl").css("display", "none");
  123. $("#more").attr("src", "./images/open.png");
  124. isExpanding = false;
  125. }
  126. } else {
  127. return;
  128. }
  129. }
  130. function ptzShow(cc) {
  131. if (!bPlaying) return;
  132. if (cc == "1") {
  133. document.getElementById("more").disabled = false;
  134. $("#moreControl").css("display", "");
  135. $("#more").attr("src", "./images/close.png");
  136. isExpanding = true;
  137. } else {
  138. document.getElementById("more").disabled = true;
  139. $("#moreControl").css("display", "none");
  140. $("#more").attr("src", "./images/open.png");
  141. isExpanding = false;
  142. }
  143. }
  144. </script>
  145. <script type="text/javascript">
  146. // 温度
  147. $(function(){
  148. jQuery.ajax({
  149. type : "get",
  150. url : "getRealWdChart.htm",
  151. data : {"lqid" : $('#lqid').val()},
  152. dataType : "text",
  153. async : true,
  154. success : function(data) {
  155. var chart = new FusionCharts("flash/RealTimeLine.swf?ChartNoDataText=无数据显示&InvalidXMLText=请选择搜索项",
  156. "ChartID", "240", "140", "0", "0");
  157. chart.setDataXML(data);
  158. chart.render("chartWd");
  159. }
  160. });
  161. });
  162. // 湿度
  163. $(function(){
  164. jQuery.ajax({
  165. type : "get",
  166. url : "getRealSdChart.htm",
  167. data : {"lqid" : $('#lqid').val()},
  168. dataType : "text",
  169. async : true,
  170. success : function(data) {
  171. var chart = new FusionCharts("flash/RealTimeLine.swf?ChartNoDataText=无数据显示&InvalidXMLText=请选择搜索项",
  172. "ChartID", "240", "140", "0", "0");
  173. chart.setDataXML(data);
  174. chart.render("chartSd");
  175. }
  176. });
  177. });
  178. // 氨气
  179. $(function(){
  180. jQuery.ajax({
  181. type : "get",
  182. url : "getRealAqChart.htm",
  183. data : {"lqid" : $('#lqid').val()},
  184. dataType : "text",
  185. async : true,
  186. success : function(data) {
  187. var chart = new FusionCharts("flash/RealTimeLine.swf?ChartNoDataText=无数据显示&InvalidXMLText=请选择搜索项",
  188. "ChartID", "240", "140", "0", "0");
  189. chart.setDataXML(data);
  190. chart.render("chartAq");
  191. }
  192. });
  193. });
  194. </script>
  195. </head>
  196. <body onunload="stopPlay();">
  197. <input type="hidden" id="lqid" value="$!lqid"/>
  198. <input type="hidden" id="ip" value="$!ip"/>
  199. <input type="hidden" id="port" value="$!port"/>
  200. <input type="hidden" id="user" value="$!user"/>
  201. <input type="hidden" id="password" value="$!password"/>
  202. <div>
  203. <div class="playMain">
  204. <div class="realPlayX">
  205. <object id="AV_RealPlayX" style="width: 100%; height: 100%;"
  206. classid="CLSID:30209FBC-57EB-4F87-BF3E-740E3D8019D2"
  207. codebase="http://122.112.219.87/download/RealPlayX.cab#version=1,0,0,2">
  208. <param name="_Version" value="65536" />
  209. <param name="_ExtentX" value="22357" />
  210. <param name="_ExtentY" value="16589" />
  211. <param name="_StockProps" value="0" />
  212. </object>
  213. </div>
  214. <div class="buttonGroup">
  215. <input id="mark1" name="realPlay" type="button" style="cursor: pointer; width:115px; height:25px; display:inline;" value="$chan1name" onclick="realPlay($chan1); ptzShow($chan1control);"/>
  216. <input id="mark2" name="realPlay" type="button" style="cursor: pointer; width:115px; height:25px; display:inline;" value="$chan2name" onclick="realPlay($chan2); ptzShow($chan2control);"/>
  217. <input id="mark3" name="realPlay" type="button" style="cursor: pointer; width:115px; height:25px; display:inline;" value="$chan3name" onclick="realPlay($chan3); ptzShow($chan3control);"/>
  218. <input id="mark4" name="realPlay" type="button" style="cursor: pointer; width:115px; height:25px; display:inline;" value="$chan4name" onclick="realPlay($chan4); ptzShow($chan4control);"/>
  219. <input id="more" type="image" src="./images/open.png" alt="More" style="cursor: pointer; width:22px; height:22px; display:inline; float:right;" onclick="showMore();"/>
  220. </div>
  221. <div id="moreControl" style="display:none; width:500px; background: #80FFFF; border: solid 1px #468dcd; margin-left: 8px; margin-top: 2px;">
  222. <table width="99%" align="center" cellpadding="1px" cellspacing="0">
  223. <tr>
  224. <td class="btd1"></td>
  225. <td class="btd1">
  226. <input id="up" type="button" style="cursor: pointer; width:50px; height:25px;" value="上" onmousedown="ptzControl(0, 0);" onmouseup="ptzControl(0, 1);"/>
  227. </td>
  228. <td class="btd1"></td>
  229. <td class="btd2"></td>
  230. <td class="btd2"></td>
  231. <td class="btd3">
  232. <input id="zoomP" type="button" style="cursor: pointer; width:40px; height:25px;" value="+" onmousedown="ptzControl(4, 0);" onmouseup="ptzControl(4, 1);"/>
  233. </td>
  234. <td class="btd3">
  235. <input id="focusP" type="button" style="cursor: pointer; width:40px; height:25px;" value="+" onmousedown="ptzControl(6, 0);" onmouseup="ptzControl(6, 1);"/>
  236. </td>
  237. <td class="btd3">
  238. <input id="apertureP" type="button" style="cursor: pointer; width:40px; height:25px;" value="+" onmousedown="ptzControl(8, 0);" onmouseup="ptzControl(8, 1);"/>
  239. </td>
  240. </tr>
  241. <tr>
  242. <td class="btd1">
  243. <input id="left" type="button" style="cursor: pointer; width:50px; height:25px;" value="左" onmousedown="ptzControl(2, 0);" onmouseup="ptzControl(2, 1);"/>
  244. </td>
  245. <td class="btd1"></td>
  246. <td class="btd1">
  247. <input id="right" type="button" style="cursor: pointer; width:50px; height:25px;" value="右" onmousedown="ptzControl(3, 0);" onmouseup="ptzControl(3, 1);"/>
  248. </td>
  249. <td class="btd2"></td>
  250. <td class="btd2"></td>
  251. <td class="btd3">缩放</td>
  252. <td class="btd3">调焦</td>
  253. <td class="btd3">光圈</td>
  254. </tr>
  255. <tr>
  256. <td class="btd1"></td>
  257. <td class="btd1">
  258. <input id="down" type="button" style="cursor: pointer; width:50px; height:25px;" value="下" onmousedown="ptzControl(1, 0);" onmouseup="ptzControl(1, 1);"/>
  259. </td>
  260. <td class="btd1"></td>
  261. <td class="btd2">
  262. <span>速度:</span>
  263. <select id="speed">
  264. <option value="1">1</option>
  265. <option value="2">2</option>
  266. <option value="3">3</option>
  267. <option value="4">4</option>
  268. <option value="5">5</option>
  269. <option value="6">6</option>
  270. <option value="7">7</option>
  271. <option value="8">8</option>
  272. </select>
  273. </td>
  274. <td >
  275. <input id="reset" type="button" style="cursor: pointer; width:70px; height:20px;" value="复位" onclick="ptzReset();"/>
  276. </td>
  277. <td class="btd3">
  278. <input id="zoomD" type="button" style="cursor: pointer; width:40px; height:25px;" value="-" onmousedown="ptzControl(5, 0);" onmouseup="ptzControl(5, 1);"/>
  279. </td>
  280. <td class="btd3">
  281. <input id="focusD" type="button" style="cursor: pointer; width:40px; height:25px;" value="-" onmousedown="ptzControl(7, 0);" onmouseup="ptzControl(7, 1);"/>
  282. </td>
  283. <td class="btd3">
  284. <input id="apertureD" type="button" style="cursor: pointer; width:40px; height:25px;" value="-" onmousedown="ptzControl(9, 0);" onmouseup="ptzControl(9, 1);"/>
  285. </td>
  286. </tr>
  287. </table>
  288. </div>
  289. </div>
  290. <div class="chartGroup">
  291. <div class="chart">
  292. <table width="100%" align="center" cellpadding="0" cellspacing="0">
  293. <tr>
  294. <td>
  295. <div id="chartWd"></div>
  296. </td>
  297. </tr>
  298. </table>
  299. </div>
  300. <div class="chart">
  301. <table width="100%" align="center" cellpadding="0" cellspacing="0">
  302. <tr>
  303. <td>
  304. <div id="chartSd"></div>
  305. </td>
  306. </tr>
  307. </table>
  308. </div>
  309. <div class="chart">
  310. <table width="100%" align="center" cellpadding="0" cellspacing="0">
  311. <tr>
  312. <td>
  313. <div id="chartAq"></div>
  314. </td>
  315. </tr>
  316. </table>
  317. </div>
  318. </div>
  319. </div>
  320. </body>
  321. </html>