Test.cshtml 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131
  1. @*@page
  2. @model Applications.UniversalApi_WebConsole_App.Views.TankDetails.TestModel
  3. @{
  4. }*@
  5. @{
  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 style="width:1250px;height:780px;background-color:aqua">
  12. <div id="test_div" style=""> </div>
  13. </body>
  14. <script>
  15. //$(document).ready(function () {
  16. var hostname = 'localhost', //'192.168.1.2',
  17. port = 8384,
  18. clientId = 'mqttjs_' + (Math.random() * 1000000).toString(),
  19. timeout = 5000,
  20. keepAlive = 100,
  21. cleanSession = false,
  22. mqttVersion = 3,
  23. ssl = false;
  24. var options = {
  25. //mqtt客户端的id,这里面应该还可以加上其他参数,具体看官方文档
  26. clientId: 'mqttjs_' + (Math.random() * 1000000).toString(),
  27. timeout: timeout,
  28. useSSL: false
  29. }
  30. //浏览器采用websocket协议,host主机地址为192.168.0.200,端口为9001,路径为/mqtt
  31. //var client = mqtt.connect("ws://localhost:8384/mqtt", options); // you add a ws:// url here
  32. var client = mqtt.connect("ws://localhost:8384/mqtt", options);
  33. ////建立连接
  34. client.on('connect',
  35. function () {
  36. var a = document.getElementById("testmqqt");
  37. if (a != null) a.innerHTML = "connected";
  38. //订阅主题 presence
  39. client.subscribe('/sys/VeederRoot_ATG_Console_Tcp/VeederRoot_ATG_Console.Handler/thing/service/GetTankInventoryAsync_reply',
  40. function (err) {
  41. if (!err) {
  42. console.log("Subscribe TankReadig success");
  43. //client.publish('/sys/VeederRoot_ATG_Console_Tcp/VeederRoot_ATG_Console.Handler/thing/service/GetTankReadingsAsync');
  44. } else {
  45. //打印错误
  46. if (a != null) a.innerHTML = err;
  47. }
  48. });
  49. client.subscribe('/sys/VeederRoot_ATG_Console_Tcp/VeederRoot_ATG_Console.Handler/thing/service/GetTanksAsync_reply',
  50. function (err) {
  51. if (!err) {
  52. console.log("Subscribe getTAnk success");
  53. client.publish('/sys/VeederRoot_ATG_Console_Tcp/VeederRoot_ATG_Console.Handler/thing/service/GetTanksAsync',"[]");
  54. //client.publish('/sys/VeederRoot_ATG_Console_Tcp/VeederRoot_ATG_Console.Handler/thing/service/GetTankReadingsAsync');
  55. } else {
  56. //打印错误
  57. if (a != null) a.innerHTML = err;
  58. }
  59. });
  60. });
  61. //如果连接错误,打印错误
  62. //如果连接错误,打印错误
  63. client.on('error',
  64. function (err) {
  65. var a = document.getElementById("test_div");
  66. if (a != null) a.innerHTML = err;
  67. client.end();
  68. });
  69. //如果client订阅主题成功,那么这里就是当接收到自己订阅主题的处理逻辑
  70. client.on('message',
  71. function (topic, message) {
  72. var a = document.getElementById("testmqqt");
  73. //if (a != null) a.innerHTML = message.toString();
  74. if (topic == "/sys/VeederRoot_ATG_Console_Tcp/VeederRoot_ATG_Console.Handler/thing/service/GetTankInventoryAsync_reply") {
  75. //TableRowADD(JSON.parse(message.toString()));
  76. //GenerateHeadView();
  77. //GenerateFootView();
  78. //GenerateTanksView(JSON.parse(message.toString()), totaltanksnumber);
  79. //TankDataGet(JSON.parse(message.toString()));
  80. }
  81. if (topic == "/sys/VeederRoot_ATG_Console_Tcp/VeederRoot_ATG_Console.Handler/thing/service/GetTanksAsync_reply") {
  82. //TankIDGet(JSON.parse(message.toString()));
  83. //GenerateFootView();
  84. //var s = message.toString();
  85. //GenerateTankView(JSON.parse(message.toString()));
  86. }
  87. });
  88. //function TankDataGet(datas) {
  89. // datas.forEach(function(d){
  90. // FuelAmount.innerHTML = "实时油量:" + FormatFloat(d.FuelVolume, 0) + "升";
  91. // FuelAmount.style = "font-size:16px; color:black;font-weight:bold;height:30px;width:180px;margin-top:16px;margin-left:0px";
  92. // FuelVolume.innerHTML = "实时油位:" + FormatFloat(d.FuelHeight, 0) + "mm";
  93. // FuelVolume.style = "font-size:16px; color:black;font-weight:bold;height:30px;width:180px;margin-top:6px;margin-left:0px";
  94. // RemainingSpace.innerHTML = "剩余空间:" + FormatFloat(d.FuelTCVolume, 0) + "升";
  95. // RemainingSpace.style = "font-size:16px; color:black;font-weight:bold;height:30px;width:180px;margin-top:6px;margin-left:0px";
  96. // Temperature.innerHTML = "实时油温:" + FormatFloat(d.Temperture, 0) + "℃";
  97. // Temperature.style = "font-size:16px; color:black;font-weight:bold;height:30px;width:180px;margin-top:6px;margin-left:0px";
  98. // WaterLevel.innerHTML = "实时水位:" + FormatFloat(d.WaterHeight, 0) + "mm";
  99. // WaterLevel.style = "font-size:16px; color:black;font-weight:bold;height:30px;width:180px;margin-top:6px;margin-left:0px";
  100. // })
  101. //}
  102. //})
  103. //function TankIDGet(message) {
  104. // if (message == null) {
  105. // console.log("Invalid message got in tanks view");
  106. // return;
  107. // }
  108. // var d = message;
  109. // totaltanksnumber = message.length;
  110. // for (i = 0; i < totaltanksnumber; ++i) {
  111. // currentFuelID = d[i].Product.ProductLabel;
  112. // currentFuelKind = d[i].Label;
  113. // currentTankID = d[i].TankNumber;
  114. // tanknumber["Parameters:"].tanknumber = i;
  115. // client.publish('/sys/VeederRoot_ATG_Console_Tcp/VeederRoot_ATG_Console.Handler/thing/service/GetTankInventoryAsync', JSON.stringify(tanknumber));
  116. // }
  117. //}
  118. </script>