UploadState.cshtml 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178
  1. <!DOCTYPE html>
  2. @{
  3. Layout = null;
  4. }
  5. <head>
  6. <meta charset="utf-8" />
  7. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
  8. <title>@ViewData["Title"] UploadOnlineMonitorDataState</title>
  9. <link rel="icon" href="~/WebConsole/images/device/tankdetails/e71828.png" type="image/x-icon" />
  10. <link rel="stylesheet" href="~/WebConsole/lib/bootstrap/dist/css/bootstrap.min.css" />
  11. <link rel="stylesheet" href="~/WebConsole/css/site.css" />
  12. <link rel="stylesheet" href="~/WebConsole/css/commonlayout.css">
  13. </head>
  14. <div id="BodyContainer" class="SelectDiv">
  15. <div id="configcontainer" class="SelectDiv1">
  16. SelectDiv1
  17. </div>
  18. </div>
  19. <script src="~/WebConsole/lib/jquery/dist/jquery.min.js"></script>
  20. <script src="~/WebConsole/js/mqtt.min.js"></script>
  21. <script type="text/javascript" src="~/WebConsole/js/vue.min.js"></script>
  22. <script type="text/javascript">
  23. var vm = new Vue({
  24. el: '#BodyContainer',
  25. mounted() {
  26. let intervalid = setInterval(() => {
  27. connectIsTimeout()
  28. }, 1600)
  29. },
  30. methods: {
  31. connectIsTimeout() {
  32. console.log('this.$refs.tanktableref.offsetWidth')
  33. }
  34. }
  35. })
  36. var href = window.location.href;
  37. var path = window.location.pathname;
  38. let basicUrl = href.slice(0, href.indexOf(path));
  39. let mqttUrl = "ws:" + basicUrl.slice(basicUrl.indexOf("//")) + "/mqtt";
  40. let apiUpload = "OnUploadOnlineMonitorDataStateChange";
  41. let apis = new Map();
  42. let mqttoptions = {
  43. clientId: 'mqttjs_' + (Math.random() * 1000000).toString(),
  44. timeout: 5000,
  45. useSSL: false
  46. };
  47. let mqttclient = mqtt.connect(mqttUrl, mqttoptions);
  48. mqttclient.on('connect',
  49. function (res) {
  50. subscribeEvents();
  51. });
  52. mqttclient.on('error',
  53. function (err) {
  54. console.log(err);
  55. mqttclient.end();
  56. });
  57. mqttclient.on('message',
  58. function (topic, message) {
  59. let jsonObj = JSON.parse(message.toString())
  60. if (jsonObj) {
  61. OnReply(apis, topic, jsonObj);
  62. } else {
  63. console.log(topic, message.toString());
  64. }
  65. });
  66. function subscribeEvents() {
  67. if (apis.has(apiUpload)) {
  68. mqttclient.subscribe(apis.get(apiUpload), function (err) {
  69. if (!err) {
  70. console.log("subscribe " + apiUpload + " successfully");
  71. }
  72. });
  73. }
  74. }
  75. ShowMeAPIS(["localMqtt", ["在线监测", "OnlineWatch"]], function () { });
  76. function ShowMeAPIS(parameter, callBack) {
  77. var serviceUrl = basicUrl + "/u/?apitype=service&an=ShowMeApi&pn=ProcessorsDispatcher&en=Edge.Core.Processor.Dispatcher.DefaultDispatcher";
  78. $.ajax({
  79. url: serviceUrl,
  80. datatype: "application/json",
  81. type: 'post',
  82. contentType: "application/json;charset=utf-8;",
  83. data: JSON.stringify(parameter),
  84. beforeSend: function () {
  85. },
  86. success: function (data) {
  87. console.log(data);
  88. data.forEach(function (d) {
  89. if (d.Path === null) return;
  90. if (apis.has(d.ApiName)) {
  91. apis.delete(d.ApiName);
  92. }
  93. apis.set(d.ApiName, d.Path.slice(d.Path.length - 1) === "+" ? d.Path.slice(0, d.Path.length - 1) : d.Path);
  94. });
  95. subscribeEvents();
  96. if (callBack !== null) callBack();
  97. },
  98. error: function (err) {
  99. console.log(err);
  100. if (callBack !== null) callBack();
  101. }
  102. });
  103. }
  104. function GetDataByAPIS(apiName, parameter, method, callBack) {
  105. if (apis.size === 0 || !apis.has(apiName)) return;
  106. $.ajax({
  107. url: basicUrl + apis.get(apiName),
  108. datatype: "application/json",
  109. type: method,
  110. contentType: "application/json;charset=utf-8;",
  111. data: JSON.stringify(parameter),
  112. beforeSend: function () {
  113. },
  114. success: function (data) {
  115. console.log(data);
  116. if (callBack !== null) callBack(data);
  117. },
  118. error: function (err) {
  119. console.log(err);
  120. if (callBack !== null) callBack(err);
  121. }
  122. });
  123. }
  124. function OnReply(apis, topic, jsonObj) {
  125. if (topic === apis.get(apiUpload)) {
  126. //vm.allObject = jsonObj
  127. console.log(jsonObj);
  128. }
  129. }
  130. </script>
  131. <style scoped>
  132. .SelectDiv {
  133. width: 200px;
  134. height: 30px;
  135. line-height: 30px;
  136. vertical-align: middle;
  137. display: block;
  138. /*background: transparent url(/images/config/cn.png) no-repeat;*/
  139. background: transparent;
  140. position: relative;
  141. margin: 0px;
  142. padding-top: 6px;
  143. padding-left: 2px;
  144. z-index: 1;
  145. }
  146. .SelectDiv1 {
  147. width: 160px;
  148. height: 15px;
  149. line-height: 15px;
  150. vertical-align: middle;
  151. background: transparent;
  152. position: relative;
  153. overflow: hidden;
  154. border-width: 0px;
  155. border-top-style: none;
  156. border-right-style: none;
  157. border-left-style: none;
  158. border-bottom-style: none;
  159. -webkit-appearance: none;
  160. z-index: 2;
  161. }
  162. </style>