ActiveAlarm.cshtml 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317
  1. @*
  2. For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
  3. *@
  4. @{
  5. ViewData["Title"] = "Auto Tank Gauge System";
  6. Layout = null;
  7. }
  8. <script src="~/js/mqtt.min.js"></script>
  9. <script src="~/js/Chart.bundle.js"></script>
  10. <script src="~/js/jquery-3.4.1.min.js"></script>
  11. <body id="Page_Body" style="height:700px;width:1280px;background-image:url(/images/device/background/background.png);background-repeat:no-repeat">
  12. <div style="display:flex;height:5%;width:50%">
  13. <div style="position:absolute;float:right;left:1081px;height:10%;width:0%;z-index:0;top:0px">
  14. <img id="testimage" src="~/images/device/title/505455.png" style="z-index: 2; position: absolute; float: left">
  15. <p style="z-index:4; left:30px;height:7%;position:absolute;float:left;top:-11px"><font size="5" color="white"> 03/31/2020 </font></p>
  16. <canvas></canvas>
  17. </div>
  18. <div style="position:absolute;float:left;height:10%;width:1280px;z-index:0;left:0px;top:0px">
  19. <img id="testimage" src="~/images/device/title/ff1d1c.png" style="z-index:1;position:absolute;float:left;left:0px">
  20. <img id="testimage" src="~/images/device/title/0182d6.png" style="z-index:1;position:absolute;float:left;left:0px">
  21. <img id="testimage" src="~/images/device/title/f8cd1c.png" style="z-index:1;position:absolute;float:left;left:0px">
  22. <p style="z-index: 1; left: 30px; height: 7%; position: absolute; float: left"><font size="6" color="white"> X号油罐 : 高油位警报, </font></p>
  23. <p style="z-index:1; left:550px;height:7%;position:absolute;float:left"><font size="6" color="white"> 活跃预警: </font></p>
  24. <p style="z-index:1; left:850px;height:7%;position:absolute;float:left"><font size="6" color="white"> 活跃报警: </font></p>
  25. <canvas></canvas>
  26. </div>
  27. </div>
  28. <div id="Page_MainBody_Table_WarningList" style="position:absolute;top:100px;height:600px">
  29. <div id="Table_WarningList" style="position:absolute;float:left;height:600px;width:950px" onclick="PageMainBodyClickEvent()">
  30. <table border="0" cellpadding="1" cellspacing="10" width="950px" style="position:absolute;left:20px">
  31. <thead style="font-size:large">
  32. <tr>
  33. <th> 油罐 </th>
  34. <th> 油品 </th>
  35. <th> 警报描述 </th>
  36. <th> 发生时间 </th>
  37. <th> 接触时间 </th>
  38. </tr>
  39. </thead>
  40. <tbody style="font-size:large">
  41. @for (int i = 0; i <= 1; i++)
  42. {
  43. <tr>
  44. <th> teble1 </th>
  45. <th> teble1 </th>
  46. <th> teble1 </th>
  47. <th> teble1 </th>
  48. <th> teble1 </th>
  49. </tr>
  50. }
  51. </tbody>
  52. </table>
  53. </div>
  54. <div style="display:flex;margin-left:1120px">
  55. <div id="FilterList_HiddenPicture" style="margin-left:70px;margin-top:-40px;visibility:visible">
  56. <a><img src="~/images/device/fairbanks/筛选图标.png" style="" onclick="FilterListPictureClickEvent()"></a>
  57. </div>
  58. <div id="FilterList_ShowTable" style="position:absolute;background-image:url('/images/device/fairbanks/筛选背景.jpg');background-size:contain;height:400px;width:150px;margin-top:-40px;margin-left:-20px;visibility:hidden">
  59. <table style="width:180px;text-align:left">
  60. <caption style="font-size:xx-large;font-weight:bolder;widows:initial;text-align:left"> 筛选查询 </caption>
  61. <tr style="height:10px">
  62. <th> </th>
  63. </tr>
  64. <tbody>
  65. <tr>
  66. <th> 起始时间: </th>
  67. </tr>
  68. <tr>
  69. <th> temp </th>
  70. </tr>
  71. <tr>
  72. <th> 结束日期: </th>
  73. </tr>
  74. <tr>
  75. <th> temp </th>
  76. </tr>
  77. <tr>
  78. <th> 油罐选择: </th>
  79. </tr>
  80. <tr>
  81. <th> temp </th>
  82. </tr>
  83. <tr style="height:10px">
  84. <th> </th>
  85. </tr>
  86. <tr>
  87. <th> 查询条件: </th>
  88. </tr>
  89. </tbody>
  90. </table>
  91. <div style="position:absolute;margin-top:20px;margin-left:15px">
  92. <div id="FilterList_ActiveWarning" style="display:flex">
  93. <a href="ActiveAlarm">
  94. <img src="~/images/device/fairbanks/选框.png" style="z-index:1;position:absolute;float:left">
  95. <p style="z-index:1;float:left;position:absolute;width:110px;top:-11px;left:25px"><font size="5" color="white" style="font-weight:bold"> 活跃报警 </font></p>
  96. </a>
  97. </div>
  98. <div id="FilterList_WarningHistory" style="display:flex;margin-top:50px">
  99. <a href="AlarmHistory">
  100. <img src="~/images/device/fairbanks/选框.png" style="z-index:1;position:absolute;float:left;visibility:hidden">
  101. <p style="z-index:1;float:left;position:absolute;width:110px;top:39px;left:25px"><font size="5" color="black" style="font-weight:bold"> 历史记录 </font></p>
  102. </a>
  103. </div>
  104. </div>
  105. </div>
  106. </div>
  107. </div>
  108. <div style="position:absolute;top:500px">
  109. <div style="height:40px">
  110. <p style="z-index:1; height:10%;position:absolute;float:left"></p>
  111. </div>
  112. <div style="display:flex;height:5%;width:50%">
  113. <div style="position:absolute;float:left;height:10%;width:1280px;z-index:0;left:50px">
  114. <a href="TankDevicesOverview">
  115. <img id="testimage" src="~/images/device/pages/3fa0df.png" style="z-index:1;position:absolute;float:left;visibility:hidden">
  116. @*<asp:ImageButton ImageUrl="~/image/device/pages/3fa0df.png" href="/_Layout_TankDetail.cshtml" ></asp:ImageButton>*@
  117. <p style="z-index:1; left:25px;height:7%;position:absolute;float:left;top:-11px"><font size="5" color="black" style="font-weight:bold"> 油罐总览 </font></p>
  118. <canvas></canvas>
  119. </a>
  120. </div>
  121. <div style="position:absolute;float:right;left:200px;height:10%;width:1000px;z-index:0">
  122. <a href="TankDeviceDetails">
  123. <img id="testimage" src="~/images/device/pages/3fa0df.png" style="z-index:2;position:absolute;float:left;visibility:hidden" onclick="">
  124. <p style="z-index:4; left:25px;height:7%;position:absolute;float:left;top:-11px"><font size="5" color="black" style="font-weight:bold"> 油罐详情 </font></p>
  125. <canvas></canvas>
  126. </a>
  127. </div>
  128. <div style="position:absolute;float:right;left:350px;height:10%;width:1000px;z-index:0">
  129. <a href="AlarmHistory">
  130. <img id="testimage" src="~/images/device/pages/3fa0df.png" style="z-index:2;position:absolute;float:left" onclick="">
  131. <p style="z-index:4; left:25px;height:7%;position:absolute;float:left;top:-11px"><font size="5" color="white" style="font-weight:bold"> 报警查询 </font></p>
  132. <canvas></canvas>
  133. </a>
  134. </div>
  135. <div style="position:absolute;float:right;left:500px;height:10%;width:1000px;z-index:0">
  136. <a href="FuelInventoryList">
  137. <img id="testimage" src="~/images/device/pages/3fa0df.png" style="z-index:2;position:absolute;float:left;visibility:hidden" onclick="">
  138. <p style="z-index:4; left:25px;height:7%;position:absolute;float:left;top:-11px"><font size="5" color="black" style="font-weight:bold"> 进油库存 </font></p>
  139. <canvas></canvas>
  140. </a>
  141. </div>
  142. @*<div>
  143. <div style="position:absolute;float:right;left:860px;height:10%;width:50px;z-index:0;margin-top:10px">
  144. <img src="~/images/device/pages/1a8eda.png" style="position:absolute;left:0px">
  145. <img src="~/images/device/pages/b1d5eb.png" style="position:absolute;left:0px">
  146. </div>
  147. <div style="position:absolute;float:right;left:940px;height:10%;width:50px;z-index:0;margin-top:10px">
  148. <img src="~/images/device/pages/1a8eda.png" style="position:absolute;left:0px">
  149. <img src="~/images/device/pages/b1d5eb.png" style="position:absolute;left:0px">
  150. </div>
  151. <div style="position:absolute;float:right;left:1020px;height:10%;width:50px;z-index:0;margin-top:10px">
  152. <img src="~/images/device/pages/1a8eda.png" style="position:absolute;left:0px">
  153. <img src="~/images/device/pages/b1d5eb.png" style="position:absolute;left:0px">
  154. </div>
  155. <div style="position:absolute;float:right;left:1100px;height:10%;width:50px;z-index:0;margin-top:10px">
  156. <img src="~/images/device/pages/1a8eda.png" style="position:absolute;left:0px">
  157. <img src="~/images/device/pages/b1d5eb.png" style="position:absolute;left:0px">
  158. </div>
  159. <div style="position:absolute;float:right;left:1180px;height:10%;width:50px;z-index:0;margin-top:10px">
  160. <img src="~/images/device/pages/1a8eda.png" style="position:absolute;left:0px">
  161. <img src="~/images/device/pages/b1d5eb.png" style="position:absolute;left:0px">
  162. </div>
  163. </div>*@
  164. </div>
  165. </div>
  166. </body>
  167. <script>
  168. var FilterList_Pciture = document.getElementById("FilterList_HiddenPicture");
  169. var FilterList_Table = document.getElementById("FilterList_ShowTable");
  170. function FilterList_ShowHide(DivID) {
  171. if (DivID == "PageMainBody" || DivID == "PageBody") {
  172. if (FilterList_Table.style.visibility == "visible") {
  173. FilterList_Pciture.style.visibility = (FilterList_Pciture.style.visibility = "hidden") ? "visible" : "hidden";
  174. FilterList_Table.style.visibility = (FilterList_Table.style.visibility = "visible") ? "hidden" : "visible";
  175. }
  176. }
  177. else if (DivID == "FilterListPicture") {
  178. FilterList_Pciture.style.visibility = (FilterList_Pciture.style.visibility = "visible") ? "hidden" : "visible";;
  179. FilterList_Table.style.visibility = (FilterList_Table.style.visibility = "hidden") ? "visible" : "hidden";
  180. }
  181. }
  182. function PageMainBodyClickEvent() {
  183. FilterList_ShowHide("PageMainBody");
  184. }
  185. function FilterListPictureClickEvent() {
  186. FilterList_ShowHide("FilterListPicture");
  187. }
  188. //$(document).ready(function () {
  189. var hostname = 'localhost', //'192.168.1.2',
  190. port = 8384,
  191. clientId = 'mqttjs_' + (Math.random() * 1000000).toString(),
  192. timeout = 5000,
  193. keepAlive = 100,
  194. cleanSession = false,
  195. mqttVersion = 3,
  196. ssl = false;
  197. var options = {
  198. //mqtt客户端的id,这里面应该还可以加上其他参数,具体看官方文档
  199. clientId: 'mqttjs_' + (Math.random() * 1000000).toString(),
  200. timeout: timeout,
  201. useSSL: false
  202. }
  203. //浏览器采用websocket协议,host主机地址为192.168.0.200,端口为9001,路径为/mqtt
  204. var client = mqtt.connect("ws://localhost:8384/mqtt", options); // you add a ws:// url here
  205. ////建立连接
  206. client.on('connect',
  207. function () {
  208. var a = document.getElementById("testmqqt");
  209. if (a != null) a.innerHTML = "connected";
  210. //订阅主题 presence
  211. client.subscribe('/sys/VeederRoot_ATG_Console_Tcp/VeederRoot_ATG_Console.Handler/thing/service/GetTankReadingsAsync_reply',
  212. function (err) {
  213. if (!err) {
  214. //client.publish('/sys/VeederRoot_ATG_Console_Tcp/VeederRoot_ATG_Console.Handler/thing/service/GetTankReadingsAsync');
  215. } else {
  216. //打印错误
  217. if (a != null) a.innerHTML = err;
  218. }
  219. });
  220. });
  221. client.publish('/sys/VeederRoot_ATG_Console_Tcp/VeederRoot_ATG_Console.Handler/thing/service/GetTankReadingsAsync', 'Mqtt Hello');
  222. //如果连接错误,打印错误
  223. client.on('error',
  224. function (err) {
  225. var a = document.getElementById("testmqqt");
  226. if (a != null) a.innerHTML = err;
  227. client.end();
  228. });
  229. //如果client订阅主题成功,那么这里就是当接收到自己订阅主题的处理逻辑
  230. client.on('message',
  231. function (topic, message) {
  232. var a = document.getElementById("testmqqt");
  233. //if (a != null) a.innerHTML = message.toString();
  234. if (topic == "/sys/VeederRoot_ATG_Console_Tcp/VeederRoot_ATG_Console.Handler/thing/service/GetTankReadingsAsync_reply") {
  235. TableRowADD(JSON.parse(message.toString()));
  236. }
  237. });
  238. //// 用户程序点击事件
  239. //function Onmqtttest() {
  240. // message = "message from browser with websocket"; // 消息内容
  241. // //发布主题presence,消息内容为Hello mqtt,订阅与推送一样自发自收
  242. // client.publish('/sys/VeederRoot_ATG_Console_Tcp/VeederRoot_ATG_Console.Handler/thing/service/GetTankDeliveryAsync', 'Hello mqtt ' + message);
  243. // var a = document.getElementById("testmqqt");
  244. // if (a != null) a.innerHTML = message;
  245. //}
  246. function TableRowADD(datas) {
  247. if (datas == null) {
  248. console.log("response data is null for chart table");
  249. return;
  250. }
  251. var chartTable = document.getElementById("Chart_table");
  252. if (chartTable == null) {
  253. console.log("chart table is not created");
  254. return;
  255. }
  256. var originalTableRows = chartTable.rows.length;
  257. var r = chartTable.insertRow(chartTable.rows.length);
  258. //var c1 = r.insertCell(r.cells.length);
  259. //c1.innerHTML = d.DataCollectorNozzleNumber;
  260. var c1 = r.insertCell(r.cells.length);
  261. c1.innerHTML = new Date().getFullYear() + "-" + (new Date().getMonth() + 1, 2) + "-" + (new Date().getDate(), 2);
  262. var c2 = r.insertCell(r.cells.length);
  263. c2.innerHTML = datas.Volume;
  264. var c3 = r.insertCell(r.cells.length);
  265. c3.innerHTML = datas.TcVolume;
  266. var c4 = r.insertCell(r.cells.length);
  267. c4.innerHTML = datas.Volume//(new Date(d.FuellingEndTime) - new Date(d.FuellingStartTime)) / 1000;
  268. var c5 = r.insertCell(r.cells.length);
  269. c5.innerHTML = datas.WaterVolume;
  270. var c6 = r.insertCell(r.cells.length);
  271. c6.innerHTML = datas.Temperature;
  272. //datas.forEach(function (d) {
  273. // var r = chartTable.insertRow(chartTable.rows.length);
  274. // //var c1 = r.insertCell(r.cells.length);
  275. // //c1.innerHTML = d.DataCollectorNozzleNumber;
  276. // var c1 = r.insertCell(r.cells.length);
  277. // c1.innerHTML = new Date(d.FuellingStartTime).getFullYear() + "-" + Pad(new Date(d.FuellingStartTime).getMonth() + 1, 2) + "-" + Pad(new Date(d.FuellingStartTime).getDate(), 2);
  278. // var c2 = r.insertCell(r.cells.length);
  279. // c2.innerHTML = d.Volume;
  280. // var c3 = r.insertCell(r.cells.length);
  281. // c3.innerHTML = d.TcVolume;
  282. // var c4 = r.insertCell(r.cells.length);
  283. // c4.innerHTML = d.Volume//(new Date(d.FuellingEndTime) - new Date(d.FuellingStartTime)) / 1000;
  284. // var c5 = r.insertCell(r.cells.length);
  285. // c5.innerHTML = d.WaterVolume;
  286. // var c6 = r.insertCell(r.cells.length);
  287. // c6.innerHTML = d.Temperature;
  288. //});
  289. //insert an empty row, otherwise the style of the table will be changed
  290. if (datas.length === 0) {
  291. var r = chartTable.insertRow(chartTable.rows.length);
  292. var c1 = r.insertCell(r.cells.length);
  293. c1.innerHTML = "";
  294. var c2 = r.insertCell(r.cells.length);
  295. c2.innerHTML = "";
  296. var c3 = r.insertCell(r.cells.length);
  297. c3.innerHTML = "";
  298. var c4 = r.insertCell(r.cells.length);
  299. c4.innerHTML = "";
  300. var c5 = r.insertCell(r.cells.length);
  301. c5.innerHTML = "";
  302. var c6 = r.insertCell(r.cells.length);
  303. c6.innerHTML = "";
  304. }
  305. }
  306. //})
  307. </script>