DataReal.html 28 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667
  1. <!DOCTYPE html>
  2. <html class="x-admin-sm" style="overflow-y: hidden;">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="renderer" content="webkit">
  6. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  7. <meta name="viewport"
  8. content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
  9. <link rel="shortcut icon" href="https://osscold.baozhida.cn/favicon.ico">
  10. <link rel="bookmark" href="https://osscold.baozhida.cn/favicon.ico">
  11. <link rel="stylesheet" href="https://osscold.baozhida.cn/css/font.css">
  12. <link rel="stylesheet" href="https://osscold.baozhida.cn/css/xadmin.css">
  13. <link rel="stylesheet" href="https://osscold.baozhida.cn/layui/css/layui.css">
  14. <script type="text/javascript" src="https://osscold.baozhida.cn/layui/layui.js" charset="utf-8"></script>
  15. <script type="text/javascript" src="https://osscold.baozhida.cn/js/xadmin.js"></script>
  16. <script src="https://osscold.baozhida.cn/js/jquery.min.js"></script>
  17. <script src="https://osscold.baozhida.cn/js/jquery.cookie.min.js"></script>
  18. <!-- 让IE8/9支持媒体查询,从而兼容栅格 -->
  19. <!--[if lt IE 9]>
  20. <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
  21. <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
  22. <![endif]--></head>
  23. <style>
  24. .text_limit{
  25. overflow:hidden;
  26. text-overflow:ellipsis;
  27. white-space:nowrap
  28. }
  29. </style>
  30. <body>
  31. <div class="x-nav">
  32. <span class="layui-breadcrumb">
  33. <a href="">首页</a>
  34. <a><cite>宝智达</cite></a>
  35. </span>
  36. <a class="layui-btn layui-btn-normal" style="line-height:1.6em;margin-top:3px;float:right"
  37. onclick="location.reload()" title="刷新">
  38. <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
  39. </a>
  40. </div>
  41. <div class="layui-fluid" style="padding: 15px;">
  42. <div class="layui-row">
  43. <!-- // 传感器 选择-->
  44. <div class="layui-col-md4">
  45. <div class="layui-card">
  46. <div class="layui-card-body ">
  47. <div class="layui-row" style="margin: 0px 10px">
  48. <div class="layui-col">
  49. <div class="layui-input-inline layui-show-xs-block">
  50. <input value="" type="text" id="D_Name" name="D_Name" placeholder="请输入 名称"
  51. autocomplete="off"
  52. class="layui-input"></div>
  53. <div class="layui-input-inline layui-show-xs-block">
  54. <input value="" type="text" id="D_T_sn" name="D_T_sn" placeholder="请输入 SN"
  55. autocomplete="off"
  56. class="layui-input"></div>
  57. <div class="layui-input-inline layui-show-xs-block">
  58. <button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="sreach"
  59. onclick="get_Device_list(0)">
  60. <i class="layui-icon">&#xe615;</i></button>
  61. </div>
  62. <div w id="Device_list" style="width: 98%; overflow: hidden;margin-top: 10px">
  63. <!--<div class="layui-col"style="height: 52px;background-color: #fafafa;border-radius:5px;padding-top: 2px;">-->
  64. <!-- <img style="float: left;width: 50px;margin: 0px 10px" src="https://osscold.baozhida.cn/images/设备管理-1.png" height="50"-->
  65. <!-- width="40"/>-->
  66. <!-- <div style="float: left;">-->
  67. <!-- <div style="margin-top: 4px;font-size: 15px">SN:KF20210510143443</div>-->
  68. <!-- <div style="margin-top: 1px;font-size: 15px">主机名称:士大夫撒地方递四方速递</div>-->
  69. <!-- </div>-->
  70. <!-- <div class="layui-card-header" style="float: right;">-->
  71. <!-- <button class="layui-btn layui-btn-normal" style="float: right;margin-top: 11px"-->
  72. <!-- onclick="">-->
  73. <!-- <i class="iconfont" style="margin-right: 4px">&#xe6f7;</i> 绑定-->
  74. <!-- </button>-->
  75. <!-- </div>-->
  76. <!--</div>-->
  77. </div>
  78. <div style="height: 70px">
  79. <div class="layui-card-body ">
  80. <div class="page">
  81. <div id="Device_list_Pages">
  82. <!-- <a class="prev" href="">&lt;&lt;</a>-->
  83. <!-- <a class="num" href="">1222</a>-->
  84. <!-- <span class="current">111</span>-->
  85. <!-- <a class="num" href="">444</a>-->
  86. <!-- <a class="next" href="">&gt;&gt;</a>-->
  87. </div>
  88. </div>
  89. <div style="color: #1E9FFF;text-align: center" id="Device_list_Pages_x"></div>
  90. </div>
  91. </div>
  92. </div>
  93. </div>
  94. </div>
  95. </div>
  96. </div>
  97. <div class="layui-col-md8">
  98. <div class="layui-card" style="padding: 10px">
  99. <div style="margin: 10px" >
  100. <span id="T_time" style="font-size: 14px">更新时间:等待同步中.....</span><img style="margin-left: 2px"
  101. src="https://osscold.baozhida.cn/images/等待.gif" height="20"
  102. width="20"/>
  103. </div>
  104. <div class="layui-col" id="DeviceSensor_list" style="max-height: 663px;overflow-y: auto" >
  105. </div>
  106. </div>
  107. </div>
  108. </div>
  109. </div>
  110. <script>
  111. function ChangeDiv(e) {
  112. var divs = document.getElementsByClassName("ChangeDiv");
  113. var len = divs.length;
  114. for(var i=0;i<len;i++){
  115. divs[i].style.border = "1px solid #ffffff";
  116. }
  117. e.style.border = "1px solid #ed0000";
  118. }
  119. //获取url中的参数
  120. function getQueryString(name) {
  121. var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
  122. var r = window.location.search.substr(1).match(reg);
  123. if (r != null)
  124. return decodeURIComponent(r[2]);
  125. return null;
  126. }
  127. function timestampToTime(timestamp) {
  128. if(timestamp == undefined){
  129. return "<img src=\"https://osscold.baozhida.cn/images/等待.gif\" style='float: left' height=\"16\" width=\"16\"/>"
  130. }
  131. var date = new Date(timestamp * 1000);//时间戳为10位需*1000,时间戳为13位的话不需乘1000
  132. Y = date.getFullYear() + '-';
  133. M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
  134. D = date.getDate() + ' ';
  135. h = date.getHours() + ':';
  136. m = date.getMinutes() + ':';
  137. s = date.getSeconds();
  138. return Y + M + D + h + m + s;
  139. }
  140. function dateChangeFormat(format, date) {
  141. date = new Date(date);
  142. const dataItem = {
  143. 'Y+': date.getFullYear().toString(),
  144. 'm+': (date.getMonth() + 1).toString(),
  145. 'd+': date.getDate().toString(),
  146. 'H+': date.getHours().toString(),
  147. 'M+': date.getMinutes().toString(),
  148. 'S+': date.getSeconds().toString(),
  149. };
  150. Object.keys(dataItem).forEach((item) => {
  151. const ret = new RegExp(`(${item})`).exec(format);
  152. if (ret) {
  153. format = format.replace(ret[1], ret[1].length === 1 ? dataItem[item] : dataItem[item].padStart(ret[1].length, '0'));
  154. }
  155. });
  156. return format;
  157. }
  158. function dateChangeFormat_x(format, date) {
  159. date = new Date(date*1000);
  160. const dataItem = {
  161. 'Y+': date.getFullYear().toString(),
  162. 'm+': (date.getMonth() + 1).toString(),
  163. 'd+': date.getDate().toString(),
  164. 'H+': date.getHours().toString(),
  165. 'M+': date.getMinutes().toString(),
  166. 'S+': date.getSeconds().toString(),
  167. };
  168. Object.keys(dataItem).forEach((item) => {
  169. const ret = new RegExp(`(${item})`).exec(format);
  170. if (ret) {
  171. format = format.replace(ret[1], ret[1].length === 1 ? dataItem[item] : dataItem[item].padStart(ret[1].length, '0'));
  172. }
  173. });
  174. return format;
  175. }
  176. // 时间比较
  177. function dateChangeFormat_xiangcha( date) {
  178. // console.log("===========")
  179. a_t = (new Date(dateChangeFormat('YYYY-mm-dd HH:MM:SS', date)).getTime()/1000)
  180. b_t = ((new Date()) / 1000)
  181. // console.log("a_t:",a_t,"b_t:",b_t,">",b_t - a_t)
  182. return parseInt(b_t - a_t) ;
  183. }
  184. function To_str(data) {
  185. if(data == undefined){
  186. return "<img src=\"https://osscold.baozhida.cn/images/等待.gif\" style='float: left' height=\"16\" width=\"16\"/>"
  187. }
  188. if(data+"".length > 5){
  189. return data+"".slice(0,5);
  190. }
  191. return data;
  192. }
  193. function To_unm(data) {
  194. if(data == undefined){
  195. return "<img src=\"https://osscold.baozhida.cn/images/等待.gif\" style='float: left' height=\"16\" width=\"16\"/>"
  196. }
  197. return data.toFixed(1);
  198. }
  199. layui.use(['form', 'layer', "layedit"],
  200. function () {
  201. $ = layui.jquery;
  202. var form = layui.form,
  203. layer = layui.layer;
  204. var layedit = layui.layedit
  205. layedit.set({
  206. uploadImage: {
  207. url: '/UpFile' //接口url
  208. }
  209. });
  210. //构建一个默认的编辑器
  211. var index = layedit.build('T_text', {
  212. height: 580 //设置编辑器高度,
  213. });
  214. //监听提交
  215. form.on('submit(add)',
  216. function (data) {
  217. console.log("=== submit(add) ==");
  218. // loading = layer.load(0, {
  219. // shade: false,
  220. // time: 99 * 1000
  221. // });
  222. console.log(data);
  223. T_enwarning = 0
  224. if (data.field.enwarning != undefined) {
  225. T_enwarning = 1
  226. }
  227. return false;
  228. });
  229. // //监听指定开关
  230. // form.on('switch(switchTest)', function(data){
  231. // layer.msg('开关checked:'+ (this.checked ? 'true' : 'false'), {
  232. // offset: '6px'
  233. // });
  234. // layer.tips('温馨提示:请注意开关状态的文字可以随意定义,而不仅仅是ON|OFF', data.othis)
  235. // });
  236. //表单取值
  237. // layui.$('#LAY-component-form-getval').on('click', function(){
  238. // var data = form.val('example');
  239. // alert(JSON.stringify(data));
  240. // });
  241. // var loading = layer.load(0, {
  242. // shade: false,
  243. // time: 99 * 1000
  244. // });
  245. });
  246. var Device_list = []
  247. var Device_Sn = ""
  248. var timestamp_V = (new Date()) / 1000;
  249. /// 设备库
  250. get_Device_list(0)
  251. function get_Device_list(page) {
  252. $.ajax({
  253. type: 'POST',
  254. url: '/Device/DeviceBind_List',//发送请求
  255. data: {
  256. User_tokey: $.cookie("User_tokey"),
  257. Admin_uuid: "",
  258. // Class_1: $("#D_Name").val(),
  259. T_sn: $("#D_T_sn").val(),
  260. Name: $("#D_Name").val(),
  261. page: page,
  262. },
  263. success: function (result) {
  264. console.log(result)
  265. if (result.Code == 200) {
  266. $('#Device_list').html("")
  267. $('#Device_list_Pages').html("")
  268. $('#Device_list_Pages_x').html("")
  269. Device_list = result.Data.Device_lite
  270. if (Device_list.length == 0) {
  271. $('#Device_list').html("<div style=\"color: #1E9FFF;text-align: center;font-size: 15px;margin-top: 150px \">没有设备</div>")
  272. return
  273. }
  274. Add_Device_list(result.Data.Device_lite) // 列表
  275. Add_Device_list_Pages(result.Data.Pages) // 分页
  276. $('#Device_list_Pages_x').append("页数:" + result.Data.Page + "/" + result.Data.Page_size + " 总数:" + result.Data.Num);
  277. } else {
  278. }
  279. }
  280. });
  281. }
  282. function Add_Device_list(Device_lite) {
  283. Device_Sn = Device_lite[0].T_sn
  284. console.log(Device_Sn)
  285. for (let i = 0; i < Device_lite.length; i++) {
  286. $('#Device_list').append("" +
  287. "<div onclick=\"ChangeDiv(this);f_Sand('" + Device_lite[i].T_sn + "')\" class=\"layui-col ChangeDiv\"style=\"border: 1px solid #ffffff;height: 52px;background-color: #fafafa;border-radius:5px;padding-top: 2px;margin-top: 6px\">\n" +
  288. " <img style=\"float: left;width: 50px;margin: 0px 10px\" src=\"https://osscold.baozhida.cn/images/设备管理-1.png\" height=\"50\"\n" +
  289. " width=\"40\"/>\n" +
  290. " <div style=\"float: left;width: 69%\">\n" +
  291. " <div style=\"margin-top: 4px;font-size: 15px;\" >SN:" + Device_lite[i].T_sn + "</div>\n" +
  292. " <div style=\"margin-top: 1px;font-size: 15px;\">主机名称:" + Device_lite[i].T_devName + "</div>\n" +
  293. " </div>\n" +
  294. " <div class=\"layui-card-header\" style=\"float: right;margin-top: 6px;color: #1E9FFF\">\n" +
  295. " 》\n" +
  296. " </div>\n" +
  297. " </div>")
  298. }
  299. }
  300. function Add_Device_list_Pages(Pages) {
  301. for (let i = 0; i < Pages.length; i++) {
  302. elem = Pages[i]
  303. switch (elem.A) {
  304. case 1:
  305. $('#Device_list_Pages').append("<a class=\"prev\" onclick='get_Device_list(" + elem.V + ")' >&lt;&lt;</a>\n");
  306. break;
  307. case 2:
  308. $('#Device_list_Pages').append("<a class=\"num\" onclick='get_Device_list(" + elem.V + ")' >" + elem.V + "</a>\n");
  309. break;
  310. case 3:
  311. $('#Device_list_Pages').append("<span class=\"current\">" + elem.V + "</span>\n");
  312. break;
  313. case 4:
  314. $('#Device_list_Pages').append("<a class=\"num\" onclick='get_Device_list(" + elem.V + ")' >" + elem.V + "</a>\n");
  315. break;
  316. case 5:
  317. $('#Device_list_Pages').append("<a class=\"next\" onclick='get_Device_list(" + elem.V + ")' >&gt;&gt;</a>\n");
  318. break;
  319. }
  320. }
  321. }
  322. function Add_DeviceSensor_list_DeviceSensor_List(){
  323. $.ajax({
  324. type: 'POST',
  325. url: '../Device/DeviceSensor_List',//发送请求
  326. data: {
  327. User_tokey: $.cookie("User_tokey"),
  328. Sn:Device_Sn,
  329. page_z:99999,
  330. },
  331. success: function (result) {
  332. console.log(result)
  333. if (result.Code == 200) {
  334. Add_DeviceSensor_list_g(result.Data.DeviceSensor_lite)
  335. } else {
  336. }
  337. }
  338. });
  339. }
  340. function Add_DeviceSensor_list_g(data) {
  341. $('#DeviceSensor_list').html("")
  342. for (let i = 0; i < data.length; i++) {
  343. // console.log(i," "+data[i].name)
  344. src_img = "温湿度传感器-1.png"
  345. Ds = data[i]
  346. x_ = dateChangeFormat_xiangcha(Ds.T_time)
  347. outtime = 60 * 5
  348. if(( 0 == Ds.T_Tlower && 0 == Ds.T_RHlower) && ( 0 == Ds.T_Tupper && 0 == Ds.T_RHupper) ){
  349. if(x_ < outtime) {
  350. // 传感器正常
  351. src_img = "温湿度传感器-1.png"
  352. }else {
  353. // 传感器超时
  354. src_img = "温湿度传感器-2.png"
  355. }
  356. }else if (x_ < outtime) {
  357. if(Ds.T_t < Ds.T_Tlower || Ds.T_rh < Ds.T_RHlower || Ds.T_t > Ds.T_Tupper || Ds.T_rh > Ds.T_RHupper ){
  358. // 传感器 超标
  359. src_img = "温湿度传感器-3.png"
  360. }else {
  361. // 传感器正常
  362. src_img = "温湿度传感器-1.png"
  363. }
  364. }else {
  365. // 传感器超时
  366. src_img = "温湿度传感器-2.png"
  367. }
  368. $('#DeviceSensor_list').append("" +
  369. "<div name='"+data[i].T_sn+"' class=\"layui-col-xs6 layui-col-sm4 layui-col-md3 layui-col-lg3\" style=\"height: 104px; \" >\n" +
  370. " <div name='"+data[i].T_id+"' style=\"margin: 4px;height: 96px; border-radius:5px;background-color:#f1f1f1;\"\n" +
  371. " >\n" +
  372. " <div class=\"layui-row\" style=\"text-align: center;font-size: 15px;background-color: #8ecbff;border-radius:5px;\">\n" +
  373. " <span style=\"float: left;background-color: #69d1ff;padding: 0px 2px;border-radius:5px;\">"+data[i].T_id+"</span>"+To_str(data[i].T_name)+"\n" +
  374. " </div>\n" +
  375. " <div class=\"layui-row\" >\n" +
  376. " <div class=\" layui-col-md4 \">\n" +
  377. " <img name='T_img' src=\"https://osscold.baozhida.cn/images/"+src_img+"\" height=\"50\" width=\"50\"/>\n" +
  378. " </div>\n" +
  379. " <div class=\"layui-col-md8\" style=\"margin-top: 3px;white-space:nowrap\">\n" +
  380. " <div style=\"width: 98%;height:20px;float: left;font-size: 15px;text-overflow:ellipsis; overflow:hidden;\">\n" +
  381. " <span name='T_t' style=\"width: 48px;float: left\">"+To_unm(data[i].T_t)+"℃</span>\n" +
  382. " <span name='T_T' style=\"font-size: 10px;float: left;margin-top: 4px;\">"+data[i].T_Tlower+"~"+data[i].T_Tupper+"</span>\n" +
  383. " </div>\n" +
  384. " <div style=\"width: 98%;height:20px;float: left;font-size: 15px;text-overflow:ellipsis; overflow:hidden;\">\n" +
  385. " <span name='T_rh' style=\"width: 48px;float: left\">"+To_unm(data[i].T_rh)+"%</span>\n" +
  386. " <span name='T_RH' style=\"font-size: 10px;float: left;margin-top: 4px;\">"+data[i].T_RHlower+"~"+data[i].T_RHupper+"</span>\n" +
  387. " </div>\n" +
  388. " </div>\n" +
  389. " <div class=\" layui-col-md12 \" style=\"padding-top: -2px;font-size: 16px;text-align: center;margin-top: -2px;border-top:1px solid #000\">\n" +
  390. " <span name='T_time'>"+dateChangeFormat('YYYY-mm-dd HH:MM:SS', data[i].T_time)+"</span>\n" +
  391. " </div>\n" +
  392. " </div>\n" +
  393. " </div>\n" +
  394. "</div>")
  395. }
  396. }
  397. function Pu_DeviceSensor_list_g(sn,data) {
  398. for (let i = 0; i < data.length; i++) {
  399. // console.log(i," "+data[i].name)
  400. sn_ = $("div[name='"+sn+"']")
  401. // console.log("sn_:",sn_.length)
  402. if(sn_.length > 0){
  403. id_ = sn_.find("div[name='"+data[i].id+"']")
  404. // console.log("id_:",sn_.length)
  405. if(id_.length > 0){
  406. rc_img = "温湿度传感器-1.png"
  407. Ds = data[i]
  408. x_ = dateChangeFormat_xiangcha(dateChangeFormat_x('YYYY-mm-dd HH:MM:SS', data[i].UT))
  409. outtime = 60 * 5
  410. if(( 0 == Ds.Tlower && 0 == Ds.RHlower) && ( 0 == Ds.Tupper && 0 == Ds.RHupper) ){
  411. if(x_ < outtime) {
  412. // 传感器正常
  413. src_img = "温湿度传感器-1.png"
  414. }else {
  415. // 传感器超时
  416. src_img = "温湿度传感器-2.png"
  417. }
  418. }else if (x_ < outtime) {
  419. if(Ds.T < Ds.Tlower || Ds.RH < Ds.RHlower || Ds.T > Ds.Tupper || Ds.RH > Ds.RHupper ){
  420. // 传感器 超标
  421. src_img = "温湿度传感器-3.png"
  422. }else {
  423. // 传感器正常
  424. src_img = "温湿度传感器-1.png"
  425. }
  426. }else {
  427. // 传感器超时
  428. src_img = "温湿度传感器-2.png"
  429. }
  430. id_.find("img")[0].src = "https://osscold.baozhida.cn/images/"+src_img
  431. id_.find("span")[1].innerHTML = To_unm(data[i].T)+"℃"
  432. id_.find("span")[2].innerHTML = data[i].Tlower+"~"+data[i].Tupper
  433. id_.find("span")[3].innerHTML = To_unm(data[i].RH)+"%"
  434. id_.find("span")[4].innerHTML = data[i].RHlower+"~"+data[i].RHupper
  435. id_.find("span")[5].innerHTML = dateChangeFormat_x('YYYY-mm-dd HH:MM:SS', data[i].UT)
  436. }
  437. }
  438. }
  439. }
  440. function Add_DeviceSensor_list(data) {
  441. $('#DeviceSensor_list').html("")
  442. for (let i = 0; i < data.length; i++) {
  443. // console.log(i," "+data[i].name)
  444. $('#DeviceSensor_list').append("" +
  445. "<div class=\"layui-col-xs6 layui-col-sm4 layui-col-md3 layui-col-lg3\" style=\"height: 104px; \" >\n" +
  446. " <div style=\"margin: 4px;height: 96px; border-radius:5px;background-color:#f1f1f1;\"\n" +
  447. " >\n" +
  448. " <div class=\"layui-row\" style=\"text-align: center;font-size: 15px;background-color: #8ecbff;border-radius:5px;\">\n" +
  449. " <span style=\"float: left;background-color: #69d1ff;padding: 0px 2px;border-radius:5px;\">"+data[i].id+"</span>"+To_str(data[i].name)+"\n" +
  450. " </div>\n" +
  451. " <div class=\"layui-row\" >\n" +
  452. " <div class=\" layui-col-md4 \">\n" +
  453. " <img src=\"https://osscold.baozhida.cn/images/温湿度传感器-1.png\" height=\"50\" width=\"50\"/>\n" +
  454. " </div>\n" +
  455. " <div class=\"layui-col-md8\" style=\"margin-top: 3px;white-space:nowrap\">\n" +
  456. " <div style=\"width: 98%;height:20px;float: left;font-size: 15px;text-overflow:ellipsis; overflow:hidden;\">\n" +
  457. " <span style=\"width: 48px;float: left\">"+To_unm(data[i].T)+"℃</span>\n" +
  458. " <span style=\"font-size: 10px;float: left;margin-top: 4px;\">"+data[i].Tlower+"~"+data[i].Tupper+"</span>\n" +
  459. " </div>\n" +
  460. " <div style=\"width: 98%;height:20px;float: left;font-size: 15px;text-overflow:ellipsis; overflow:hidden;\">\n" +
  461. " <span style=\"width: 48px;float: left\">"+To_unm(data[i].RH)+"%</span>\n" +
  462. " <span style=\"font-size: 10px;float: left;margin-top: 4px;\">"+data[i].RHlower+"~"+data[i].RHlower+"</span>\n" +
  463. " </div>\n" +
  464. " </div>\n" +
  465. " <div class=\" layui-col-md12 \" style=\"padding-top: -2px;font-size: 16px;text-align: center;margin-top: -2px;border-top:1px solid #000\">\n" +
  466. " "+timestampToTime(data[i].UT)+"\n" +
  467. " </div>\n" +
  468. " </div>\n" +
  469. " </div>\n" +
  470. "</div>")
  471. }
  472. }
  473. // 页面 加载完成后执行
  474. window.onload = function () {
  475. console.log("页面 加载完成后执行")
  476. setTimeout(function(){
  477. console.log("等待执行")
  478. f_Sand(Device_Sn)
  479. //要执行的代码
  480. },2000);
  481. }
  482. function f_Sand(sn) {
  483. console.log(sn)
  484. Device_Sn = sn
  485. $('#DeviceSensor_list').html("<img src=\"https://osscold.baozhida.cn/images/等待.gif\" style='margin: 20px auto;' height=\"36\" width=\"36\"/>")
  486. Add_DeviceSensor_list_DeviceSensor_List()
  487. websocket.send("{\"Sn\":\"" + sn + "\"}");
  488. }
  489. var websocket = null;
  490. //判断当前浏览器是否支持WebSocket
  491. run_WebSocket()
  492. function run_WebSocket() {
  493. console.log("run_WebSocket");
  494. if ('WebSocket' in window) {
  495. url = window.location.host
  496. if(url.indexOf("127.0.0.1") != -1){
  497. websocket = new WebSocket("ws://"+window.location.host+"/ws/join?User_tokey="+$.cookie('User_tokey'));
  498. }else {
  499. websocket = new WebSocket("wss://"+window.location.host+"/ws/join?User_tokey="+$.cookie('User_tokey'));
  500. }
  501. } else {
  502. alert('Dont support websocket')
  503. }
  504. }
  505. //连接成功建立的回调方法
  506. websocket.onopen = function () {
  507. console.log("open");
  508. // send("{\"Sn\":\"" + getQueryString("Sn") + "\"}")
  509. };
  510. //接收到消息的回调方法
  511. websocket.onmessage = function (event) {
  512. // console.log(event.data)
  513. var obj = JSON.parse(event.data);
  514. // console.log(obj.type)
  515. if(obj.sn != Device_Sn){
  516. console.log(obj.sn,"跳过。。 Device_Sn = ",Device_Sn)
  517. return
  518. }
  519. console.log(obj.sn,"进入。。 Device_Sn = ",Device_Sn)
  520. if (obj.type == 0 ) {
  521. console.log("data.length:",obj.sensor.length)
  522. console.log("data:",obj.sensor)
  523. Pu_DeviceSensor_list_g(obj.sn,obj.sensor)
  524. if(obj.type == 0 ){
  525. if(Math.abs(timestamp_V - obj.sensor[0].UT).toFixed(0) > 0){
  526. $("#T_time").html("刷新时间:" + timestampToTime(obj.sensor[0].UT) + " 上传刷新间隔:" + Math.abs(timestamp_V - obj.sensor[0].UT).toFixed(0) + "s")
  527. // console.log(timestamp_V, obj.sensor[0].UT, " 刷新间隔:" + (timestamp_V - obj.sensor[0].UT) + "s")
  528. timestamp_V = obj.sensor[0].UT
  529. }
  530. }
  531. }
  532. };
  533. //连接关闭的回调方法
  534. websocket.onclose = function () {
  535. console.log("close");
  536. setTimeout(function(){
  537. //要执行的代码
  538. run_WebSocket();
  539. },2000);
  540. };
  541. //连接发生错误的回调方法
  542. websocket.onerror = function () {
  543. console.log("error");
  544. setTimeout(function(){
  545. //要执行的代码
  546. run_WebSocket();
  547. },2000);
  548. };
  549. //监听窗口关闭事件,当窗口关闭时,主动去关闭websocket连接,防止连接还没断开就关闭窗口,server端会抛异常。
  550. window.onbeforeunload = function () {
  551. websocket.close();
  552. console.log("窗口关闭事件");
  553. };
  554. //关闭连接
  555. function closeWebSocket() {
  556. websocket.close();
  557. console.log("onbeforeunload");
  558. window.clearInterval(intervalId);
  559. }
  560. //发送消息
  561. function send(message) {
  562. websocket.send(message);
  563. }
  564. </script>
  565. </body>
  566. </html>