NewInStockFuel.cshtml 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357
  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_FuelDetailList" style="position:absolute;top:100px;height:600px">
  29. <div id="Table_FuelDetailList" style="position:absolute;float:left;height:600px;width:950px" onclick="PageMainBodyClickEvent()">
  30. <table border="0" cellpadding="0" cellspacing="0" width="1280px" style="position:absolute;left:50px;line-height:45px">
  31. <thead style="font-size:24;text-align:left">
  32. <tr>
  33. <th style="width:315px"> 开始/结束时间 </th>
  34. <th style="width:200px"> 进油量(升) </th>
  35. <th style="width:315px"> 温度补偿油量(升) </th>
  36. <th style="width:200px"> 油位(mm) </th>
  37. <th style="width:200px"> 水位(mm) </th>
  38. </tr>
  39. </thead>
  40. <tbody style="font-size:20;text-align:left">
  41. <tr>
  42. <th> 1号罐 #95 </th>
  43. </tr>
  44. <tr>
  45. <th style="width:315px"> 开始: 20202-04-10 </th>
  46. <th style="width:200px"> 20202-04-10 </th>
  47. <th style="width:315px"> 20202-04-10 </th>
  48. <th style="width:200px"> 20202-04-10 </th>
  49. <th style="width:200px"> 20202-04-10 </th>
  50. </tr>
  51. <tr>
  52. <th style="width:315px"> 结束: 20202-04-10 </th>
  53. <th style="width:200px"> 20202-04-10 </th>
  54. <th style="width:315px"> 20202-04-10 </th>
  55. <th style="width:200px"> 20202-04-10 </th>
  56. <th style="width:200px"> 20202-04-10 </th>
  57. </tr>
  58. <tr>
  59. <th style="width:315px"> 统计: </th>
  60. <th style="width:200px"> 20202-04-10 </th>
  61. <th style="width:315px"> 20202-04-10 </th>
  62. </tr>
  63. </tbody>
  64. </table>
  65. </div>
  66. <div style="display:flex;margin-left:1120px">
  67. <div id="FilterList_HiddenPicture" style="margin-left:70px;margin-top:-40px;visibility:visible">
  68. <a><img src="~/images/device/fairbanks/筛选图标.png" style="" onclick="FilterListPictureClickEvent()"></a>
  69. </div>
  70. <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">
  71. <table style="width:180px;text-align:left">
  72. <caption style="font-size:28;font-weight:bolder;widows:initial;text-align:left"> 筛选查询 </caption>
  73. <tr style="height: 10px">
  74. <th> </th>
  75. </tr>
  76. <tbody>
  77. <tr>
  78. <th style="font-size:24"> 起始时间: </th>
  79. </tr>
  80. <tr>
  81. <th style="font-size:20"> temp </th>
  82. </tr>
  83. <tr>
  84. <th style="font-size:24"> 结束日期: </th>
  85. </tr>
  86. <tr>
  87. <th style="font-size:20"> temp </th>
  88. </tr>
  89. <tr>
  90. <th style="font-size:24"> 油罐选择: </th>
  91. </tr>
  92. <tr>
  93. <th style="font-size:20"> temp </th>
  94. </tr>
  95. <tr style="height:10px">
  96. <th> </th>
  97. </tr>
  98. <tr>
  99. <th> 查询条件: </th>
  100. </tr>
  101. </tbody>
  102. </table>
  103. <div style="position:absolute;margin-top:20px;margin-left:15px">
  104. <div id="FilterList_NewInStockFuel" style="display:flex">
  105. <a href="NewFuelInventory">
  106. <img id="img_NewInStockFuel" src="~/images/device/fairbanks/选框.png" style="z-index:1;position:absolute;float:left;visibility:hidden">
  107. <p style="z-index:1;float:left;position:absolute;width:110px;margin-top:3px;left:25px"><font id="font_NewInStockFuel" size="5" color="white" style="font-weight:bold"> 最新进油 </font></p>
  108. </a>
  109. </div>
  110. <div id="FilterList_InStockFuelReport" style="display:flex;margin-top:50px">
  111. <a href="InStockFuelReport">
  112. <img id="img_InStockFuelReport" src="~/images/device/fairbanks/选框.png" style="z-index:1;position:absolute;float:left;visibility:hidden">
  113. <p style="z-index:1;float:left;position:absolute;width:110px;margin-top:3px;left:25px"><font id="font_InStockFuelReport" size="5" color="white" style="font-weight:bold"> 进油报表 </font></p>
  114. </a>
  115. </div>
  116. <div id="FilterList_NewFuelInventory" style="display:flex;margin-top:50px">
  117. <a href="NewInStockFuel">
  118. <img id="img_NewFuelInventory" src="~/images/device/fairbanks/选框.png" style="z-index:1;position:absolute;float:left;visibility:hidden">
  119. <p style="z-index:1;float:left;position:absolute;width:110px;margin-top:3px;left:25px"><font id="font_NewFuelInventory" size="5" color="white" style="font-weight:bold"> 最新库存 </font></p>
  120. </a>
  121. </div>
  122. <div id="FilterList_FuelInventoryList" style="display:flex;margin-top:50px">
  123. <a href="FuelInventoryList">
  124. <img id="img_FuelInventoryList" src="~/images/device/fairbanks/选框.png" style="z-index:1;position:absolute;float:left;visibility:hidden">
  125. <p style="z-index:1;float:left;position:absolute;width:110px;margin-top:3px;left:25px"><font id="font_FuelInventoryList" size="5" color="white" style="font-weight:bold"> 库存报表 </font></p>
  126. </a>
  127. </div>
  128. </div>
  129. </div>
  130. </div>
  131. </div>
  132. <div style="position:absolute;top:500px">
  133. <div style="height:40px">
  134. <p style="z-index:1; height:10%;position:absolute;float:left"></p>
  135. </div>
  136. <div style="display:flex;height:5%;width:50%">
  137. <div style="position:absolute;float:left;height:10%;width:1280px;z-index:0;left:50px">
  138. <a href="TankDevicesOverview">
  139. <img id="testimage" src="~/images/device/pages/3fa0df.png" style="z-index:1;position:absolute;float:left;visibility:hidden">
  140. @*<asp:ImageButton ImageUrl="~/image/device/pages/3fa0df.png" href="/_Layout_TankDetail.cshtml" ></asp:ImageButton>*@
  141. <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>
  142. <canvas></canvas>
  143. </a>
  144. </div>
  145. <div style="position:absolute;float:right;left:200px;height:10%;width:1000px;z-index:0">
  146. <a href="TankDeviceDetails">
  147. <img id="testimage" src="~/images/device/pages/3fa0df.png" style="z-index:2;position:absolute;float:left;visibility:hidden" onclick="">
  148. <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>
  149. <canvas></canvas>
  150. </a>
  151. </div>
  152. <div style="position:absolute;float:right;left:350px;height:10%;width:1000px;z-index:0">
  153. <a href="AlarmHistory">
  154. <img id="testimage" src="~/images/device/pages/3fa0df.png" style="z-index:2;position:absolute;float:left;visibility:hidden" onclick="">
  155. <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>
  156. <canvas></canvas>
  157. </a>
  158. </div>
  159. <div style="position:absolute;float:right;left:500px;height:10%;width:1000px;z-index:0">
  160. <a href="FuelInventoryList">
  161. <img id="testimage" src="~/images/device/pages/3fa0df.png" style="z-index:2;position:absolute;float:left" onclick="">
  162. <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>
  163. <canvas></canvas>
  164. </a>
  165. </div>
  166. @*<div>
  167. <div style="position:absolute;float:right;left:860px;height:10%;width:50px;z-index:0;margin-top:10px">
  168. <img src="~/images/device/pages/1a8eda.png" style="position:absolute;left:0px">
  169. <img src="~/images/device/pages/b1d5eb.png" style="position:absolute;left:0px">
  170. </div>
  171. <div style="position:absolute;float:right;left:940px;height:10%;width:50px;z-index:0;margin-top:10px">
  172. <img src="~/images/device/pages/1a8eda.png" style="position:absolute;left:0px">
  173. <img src="~/images/device/pages/b1d5eb.png" style="position:absolute;left:0px">
  174. </div>
  175. <div style="position:absolute;float:right;left:1020px;height:10%;width:50px;z-index:0;margin-top:10px">
  176. <img src="~/images/device/pages/1a8eda.png" style="position:absolute;left:0px">
  177. <img src="~/images/device/pages/b1d5eb.png" style="position:absolute;left:0px">
  178. </div>
  179. <div style="position:absolute;float:right;left:1100px;height:10%;width:50px;z-index:0;margin-top:10px">
  180. <img src="~/images/device/pages/1a8eda.png" style="position:absolute;left:0px">
  181. <img src="~/images/device/pages/b1d5eb.png" style="position:absolute;left:0px">
  182. </div>
  183. <div style="position:absolute;float:right;left:1180px;height:10%;width:50px;z-index:0;margin-top:10px">
  184. <img src="~/images/device/pages/1a8eda.png" style="position:absolute;left:0px">
  185. <img src="~/images/device/pages/b1d5eb.png" style="position:absolute;left:0px">
  186. </div>
  187. </div>*@
  188. </div>
  189. </div>
  190. </body>
  191. <script>
  192. var FilterList_Pciture = document.getElementById("FilterList_HiddenPicture");
  193. var FilterList_Table = document.getElementById("FilterList_ShowTable");
  194. function FilterList_ShowHide(DivID) {
  195. if (DivID == "PageMainBody" || DivID == "PageBody") {
  196. if (FilterList_Table.style.visibility == "visible") {
  197. FilterList_Pciture.style.visibility = (FilterList_Pciture.style.visibility = "hidden") ? "visible" : "hidden";
  198. FilterList_Table.style.visibility = (FilterList_Table.style.visibility = "visible") ? "hidden" : "visible";
  199. TagDeal_hidden();
  200. }
  201. }
  202. else if (DivID == "FilterListPicture") {
  203. FilterList_Pciture.style.visibility = (FilterList_Pciture.style.visibility = "visible") ? "hidden" : "visible";;
  204. FilterList_Table.style.visibility = (FilterList_Table.style.visibility = "hidden") ? "visible" : "hidden";
  205. TagDeal();
  206. }
  207. }
  208. function PageMainBodyClickEvent() {
  209. FilterList_ShowHide("PageMainBody");
  210. }
  211. function FilterListPictureClickEvent() {
  212. FilterList_ShowHide("FilterListPicture");
  213. }
  214. function TagDeal() {
  215. document.getElementById("font_NewInStockFuel").style.color = "black";
  216. document.getElementById("font_InStockFuelReport").style.color = "black";
  217. document.getElementById("font_NewFuelInventory").style.color = "white";
  218. document.getElementById("font_FuelInventoryList").style.color = "black";
  219. document.getElementById("img_NewInStockFuel").style.visibility = "hidden";
  220. document.getElementById("img_InStockFuelReport").style.visibility = "hidden";
  221. document.getElementById("img_NewFuelInventory").style.visibility = "visible";
  222. document.getElementById("img_FuelInventoryList").style.visibility = "hidden";
  223. }
  224. function TagDeal_hidden() {
  225. document.getElementById("img_NewFuelInventory").style.visibility = "hidden";
  226. }
  227. //$(document).ready(function () {
  228. var hostname = 'localhost', //'192.168.1.2',
  229. port = 8384,
  230. clientId = 'mqttjs_' + (Math.random() * 1000000).toString(),
  231. timeout = 5000,
  232. keepAlive = 100,
  233. cleanSession = false,
  234. mqttVersion = 3,
  235. ssl = false;
  236. var options = {
  237. //mqtt客户端的id,这里面应该还可以加上其他参数,具体看官方文档
  238. clientId: 'mqttjs_' + (Math.random() * 1000000).toString(),
  239. timeout: timeout,
  240. useSSL: false
  241. }
  242. //浏览器采用websocket协议,host主机地址为192.168.0.200,端口为9001,路径为/mqtt
  243. var client = mqtt.connect("ws://localhost:8384/mqtt", options); // you add a ws:// url here
  244. ////建立连接
  245. client.on('connect',
  246. function () {
  247. var a = document.getElementById("testmqqt");
  248. if (a != null) a.innerHTML = "connected";
  249. //订阅主题 presence
  250. client.subscribe('/sys/VeederRoot_ATG_Console_Tcp/VeederRoot_ATG_Console.Handler/thing/service/GetTankReadingsAsync_reply',
  251. function (err) {
  252. if (!err) {
  253. //client.publish('/sys/VeederRoot_ATG_Console_Tcp/VeederRoot_ATG_Console.Handler/thing/service/GetTankReadingsAsync');
  254. } else {
  255. //打印错误
  256. if (a != null) a.innerHTML = err;
  257. }
  258. });
  259. });
  260. client.publish('/sys/VeederRoot_ATG_Console_Tcp/VeederRoot_ATG_Console.Handler/thing/service/GetTankReadingsAsync', 'Mqtt Hello');
  261. //如果连接错误,打印错误
  262. client.on('error',
  263. function (err) {
  264. var a = document.getElementById("testmqqt");
  265. if (a != null) a.innerHTML = err;
  266. client.end();
  267. });
  268. //如果client订阅主题成功,那么这里就是当接收到自己订阅主题的处理逻辑
  269. client.on('message',
  270. function (topic, message) {
  271. var a = document.getElementById("testmqqt");
  272. //if (a != null) a.innerHTML = message.toString();
  273. if (topic == "/sys/VeederRoot_ATG_Console_Tcp/VeederRoot_ATG_Console.Handler/thing/service/GetTankReadingsAsync_reply") {
  274. TableRowADD(JSON.parse(message.toString()));
  275. }
  276. });
  277. //// 用户程序点击事件
  278. //function Onmqtttest() {
  279. // message = "message from browser with websocket"; // 消息内容
  280. // //发布主题presence,消息内容为Hello mqtt,订阅与推送一样自发自收
  281. // client.publish('/sys/VeederRoot_ATG_Console_Tcp/VeederRoot_ATG_Console.Handler/thing/service/GetTankDeliveryAsync', 'Hello mqtt ' + message);
  282. // var a = document.getElementById("testmqqt");
  283. // if (a != null) a.innerHTML = message;
  284. //}
  285. function TableRowADD(datas) {
  286. if (datas == null) {
  287. console.log("response data is null for chart table");
  288. return;
  289. }
  290. var chartTable = document.getElementById("Chart_table");
  291. if (chartTable == null) {
  292. console.log("chart table is not created");
  293. return;
  294. }
  295. var originalTableRows = chartTable.rows.length;
  296. var r = chartTable.insertRow(chartTable.rows.length);
  297. //var c1 = r.insertCell(r.cells.length);
  298. //c1.innerHTML = d.DataCollectorNozzleNumber;
  299. var c1 = r.insertCell(r.cells.length);
  300. c1.innerHTML = new Date().getFullYear() + "-" + (new Date().getMonth() + 1, 2) + "-" + (new Date().getDate(), 2);
  301. var c2 = r.insertCell(r.cells.length);
  302. c2.innerHTML = datas.Volume;
  303. var c3 = r.insertCell(r.cells.length);
  304. c3.innerHTML = datas.TcVolume;
  305. var c4 = r.insertCell(r.cells.length);
  306. c4.innerHTML = datas.Volume//(new Date(d.FuellingEndTime) - new Date(d.FuellingStartTime)) / 1000;
  307. var c5 = r.insertCell(r.cells.length);
  308. c5.innerHTML = datas.WaterVolume;
  309. var c6 = r.insertCell(r.cells.length);
  310. c6.innerHTML = datas.Temperature;
  311. //datas.forEach(function (d) {
  312. // var r = chartTable.insertRow(chartTable.rows.length);
  313. // //var c1 = r.insertCell(r.cells.length);
  314. // //c1.innerHTML = d.DataCollectorNozzleNumber;
  315. // var c1 = r.insertCell(r.cells.length);
  316. // c1.innerHTML = new Date(d.FuellingStartTime).getFullYear() + "-" + Pad(new Date(d.FuellingStartTime).getMonth() + 1, 2) + "-" + Pad(new Date(d.FuellingStartTime).getDate(), 2);
  317. // var c2 = r.insertCell(r.cells.length);
  318. // c2.innerHTML = d.Volume;
  319. // var c3 = r.insertCell(r.cells.length);
  320. // c3.innerHTML = d.TcVolume;
  321. // var c4 = r.insertCell(r.cells.length);
  322. // c4.innerHTML = d.Volume//(new Date(d.FuellingEndTime) - new Date(d.FuellingStartTime)) / 1000;
  323. // var c5 = r.insertCell(r.cells.length);
  324. // c5.innerHTML = d.WaterVolume;
  325. // var c6 = r.insertCell(r.cells.length);
  326. // c6.innerHTML = d.Temperature;
  327. //});
  328. //insert an empty row, otherwise the style of the table will be changed
  329. if (datas.length === 0) {
  330. var r = chartTable.insertRow(chartTable.rows.length);
  331. var c1 = r.insertCell(r.cells.length);
  332. c1.innerHTML = "";
  333. var c2 = r.insertCell(r.cells.length);
  334. c2.innerHTML = "";
  335. var c3 = r.insertCell(r.cells.length);
  336. c3.innerHTML = "";
  337. var c4 = r.insertCell(r.cells.length);
  338. c4.innerHTML = "";
  339. var c5 = r.insertCell(r.cells.length);
  340. c5.innerHTML = "";
  341. var c6 = r.insertCell(r.cells.length);
  342. c6.innerHTML = "";
  343. }
  344. }
  345. //})
  346. </script>