Device_Sensor-.html 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559
  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://cdn.staticfile.org/jquery/3.4.0/jquery.min.js"></script>
  17. <script src="https://cdn.staticfile.org/jquery-cookie/1.4.1/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. <body>
  24. <div class="layui-fluid">
  25. <div class="layui-row" id="tab_2">
  26. <div class="layui-row">
  27. <div id="tab_3">
  28. {{if eq $.Admin_Power.Power_DeviceSensor_Compensate_e 1}}
  29. <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
  30. <legend>温湿度补偿参数</legend>
  31. </fieldset>
  32. <div class="layui-col-md7">
  33. <form class="layui-form" action="" lay-filter="O_example">
  34. <div class="layui-form-item">
  35. <div class="layui-inline">
  36. <label class="layui-form-label">温度补偿 ℃</label>
  37. <div class="layui-input-inline" style="width: 100px;">
  38. <input type="text" name="O_T" autocomplete="off" class="layui-input">
  39. </div>
  40. </div>
  41. </div>
  42. <div class="layui-form-item">
  43. <div class="layui-inline">
  44. <label class="layui-form-label">湿度补偿 %</label>
  45. <div class="layui-input-inline" style="width: 100px;">
  46. <input type="text" name="O_RH" autocomplete="off" class="layui-input">
  47. </div>
  48. </div>
  49. </div>
  50. <div class="layui-form-item" style="text-align: center;margin-top: 20px">
  51. <button type="submit" class="layui-btn layui-btn-normal" lay-submit=""
  52. lay-filter="O_add">配置参数
  53. </button>
  54. </div>
  55. </form>
  56. </div>
  57. {{end}}
  58. </div>
  59. </div>
  60. </div>
  61. </div>
  62. <script>
  63. //获取url中的参数
  64. function getQueryString(name) {
  65. var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
  66. var r = window.location.search.substr(1).match(reg);
  67. if (r != null)
  68. return decodeURIComponent(r[2]);
  69. return null;
  70. }
  71. function timestampToTime(timestamp) {
  72. var date = new Date(timestamp * 1000); //时间戳为10位需*1000,时间戳为13位的话不需乘1000
  73. Y = date.getFullYear() + '-';
  74. M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
  75. D = date.getDate() + ' ';
  76. h = date.getHours() + ':';
  77. m = date.getMinutes() + ':';
  78. s = date.getSeconds();
  79. return Y + M + D + h + m + s;
  80. }
  81. function f_Device_Parameter_Del() {
  82. // console.log(getQueryString("Sn"),getQueryString("Id"))
  83. //
  84. $.ajax({
  85. type: 'POST',
  86. url: 'Device_Parameter_Del',//发送请求】
  87. data: {
  88. Sn: getQueryString("Sn"),
  89. Id: getQueryString("Id")
  90. },
  91. success: function (result) {
  92. console.log(result)
  93. //关闭当前frame
  94. parent.layer.close(parent.layer.getFrameIndex(window.name));
  95. parent.location.reload();
  96. // return false;
  97. }
  98. });
  99. }
  100. layui.use(['form', 'layer', "layedit"],
  101. function () {
  102. $ = layui.jquery;
  103. var form = layui.form,
  104. layer = layui.layer;
  105. var layedit = layui.layedit
  106. layedit.set({
  107. uploadImage: {
  108. url: '/UpFile' //接口url
  109. }
  110. });
  111. //构建一个默认的编辑器
  112. var index = layedit.build('T_text', {
  113. height: 580 //设置编辑器高度,
  114. });
  115. //监听提交
  116. form.on('submit(add)',
  117. function (data) {
  118. console.log("=== submit(add) ==");
  119. loading = layer.load(0, {
  120. shade: false,
  121. time: 99 * 1000
  122. });
  123. console.log(data);
  124. S_en = 0
  125. if (data.field.S_en != undefined) {
  126. S_en = 1
  127. }
  128. S_free = 0
  129. if (data.field.S_free != undefined) {
  130. S_free = 1
  131. }
  132. var T_sensor_list = [];
  133. T_sensor_list.push({
  134. "id": parseInt(Id),
  135. "name": data.field.S_name,
  136. "Tlower": parseFloat(data.field.S_Tlower),
  137. "Tupper": parseFloat(data.field.S_Tupper),
  138. "RHlower": parseFloat(data.field.S_RHlower),
  139. "RHupper": parseFloat(data.field.S_RHupper),
  140. "en": S_en,
  141. "free": S_free
  142. })
  143. $.ajax({
  144. type: 'POST',
  145. url: 'Pu_DeviceParameter_Sensor',//发送请求】
  146. data: {
  147. User_tokey: $.cookie('User_tokey'),
  148. SN: Sn,
  149. T_sensor_list: JSON.stringify(T_sensor_list)
  150. },
  151. success: function (result) {
  152. console.log(result)
  153. // return false;
  154. }
  155. });
  156. return false;
  157. });
  158. {{if eq $.Admin_Power.Power_DeviceSensor_Compensate_e 1}}
  159. //监听提交
  160. form.on('submit(O_add)',
  161. function (data) {
  162. console.log("=== submit(add) ==");
  163. loading = layer.load(0, {
  164. shade: false,
  165. time: 99 * 1000
  166. });
  167. var T_sompensate_list = [];
  168. T_sompensate_list.push({
  169. "id": parseInt(Id),
  170. "T": parseFloat(data.field.O_T),
  171. "RH": parseFloat(data.field.O_RH)
  172. })
  173. $.ajax({
  174. type: 'POST',
  175. url: 'Pu_DeviceParameter_Compensate',//发送请求】
  176. data: {
  177. User_tokey: $.cookie('User_tokey'),
  178. SN: Sn,
  179. T_sompensate_list: JSON.stringify(T_sompensate_list)
  180. },
  181. success: function (result) {
  182. console.log(result)
  183. // return false;
  184. }
  185. });
  186. setInterval(function(){
  187. $.ajax({
  188. type: 'POST',
  189. url: 'Pu_DeviceParameter_Compensate',//发送请求】
  190. data: {
  191. User_tokey: $.cookie('User_tokey'),
  192. SN: Sn,
  193. T_sompensate_list: JSON.stringify(T_sompensate_list)
  194. },
  195. success: function (result) {
  196. console.log(result)
  197. // return false;
  198. }
  199. });
  200. },1000);
  201. return false;
  202. });
  203. {{end}}
  204. // //监听指定开关
  205. // form.on('switch(switchTest)', function(data){
  206. // layer.msg('开关checked:'+ (this.checked ? 'true' : 'false'), {
  207. // offset: '6px'
  208. // });
  209. // layer.tips('温馨提示:请注意开关状态的文字可以随意定义,而不仅仅是ON|OFF', data.othis)
  210. // });
  211. //表单取值
  212. // layui.$('#LAY-component-form-getval').on('click', function(){
  213. // var data = form.val('example');
  214. // alert(JSON.stringify(data));
  215. // });
  216. var loading = layer.load(0, {
  217. shade: false,
  218. time: 99 * 1000
  219. });
  220. var timestamp_V = (new Date()) / 1000;
  221. var Sn = getQueryString("Sn")
  222. var Id = getQueryString("Id")
  223. $("#T_devName").html(getQueryString("Sn_name"))
  224. var websocket = null;
  225. var ok_websocket1 = false;
  226. var ok_websocket2 = false;
  227. function Timeout_1 (){
  228. //要执行的代码
  229. if(!ok_websocket1){
  230. layer.open({
  231. text:"连接失败",
  232. btn: '立即重新登录',
  233. content: "请退出账号重新登录!",
  234. yes: function(index, layero){
  235. //do something
  236. window.parent.parent.location.href ='../Login';
  237. layer.close(index); //如果设定了yes回调,需进行手工关闭
  238. }
  239. });
  240. }
  241. }
  242. setTimeout(Timeout_1,8000);//5秒后执行
  243. function Timeout_2 (){
  244. //要执行的代码
  245. if(!ok_websocket2){
  246. layer.open({
  247. text:"无响应",
  248. btn: '重新试试',
  249. content: "设备主机无响应,请重新试试,若有疑问请联系工作人员!",
  250. yes: function(index, layero){
  251. //do something
  252. layer.close(index); //如果设定了yes回调,需进行手工关闭
  253. }
  254. });
  255. }
  256. }
  257. setTimeout(Timeout_2,20000);//5秒后执行
  258. //判断当前浏览器是否支持WebSocket
  259. if ('WebSocket' in window) {
  260. websocket = new WebSocket("ws://"+window.location.host+"/ws/join?User_tokey="+$.cookie('User_tokey'));
  261. } else {
  262. alert('Dont support websocket')
  263. }
  264. console.log(getQueryString("Sn"))
  265. //连接发生错误的回调方法
  266. websocket.onerror = function () {
  267. console.log("error");
  268. };
  269. //连接成功建立的回调方法
  270. websocket.onopen = function () {
  271. console.log("open");
  272. send("{\"Sn\":\"" + getQueryString("Sn") + "\"}")
  273. };
  274. function f_Read_DeviceParameter() {
  275. console.log("Read_DeviceSensorParameter",getQueryString("Sn"))
  276. $.ajax({
  277. type: 'POST',
  278. url: 'Read_DeviceParameter',//发送请求
  279. data: {
  280. SN:getQueryString("Sn"),
  281. },
  282. success: function(result) {
  283. }
  284. });
  285. }
  286. //接收到消息的回调方法
  287. websocket.onmessage = function (event) {
  288. console.log(event.data)
  289. var obj = JSON.parse(event.data);
  290. console.log(obj.type)
  291. ok_websocket1 = true
  292. if(obj.Code == 200){
  293. f_Read_DeviceParameter()
  294. setTimeout(function(){f_Read_DeviceParameter()
  295. },500);
  296. setTimeout(function(){f_Read_DeviceParameter()
  297. },1000);
  298. setTimeout(function(){f_Read_DeviceParameter()
  299. },1500);
  300. }
  301. if (obj.sn != Sn) {
  302. return
  303. }
  304. if (obj.type == 0) {
  305. for (let i = 0; i < obj.sensor.length; i++) {
  306. if (Number(obj.sensor[i].id) == Number(Id)) {
  307. // T_en =false
  308. // if(obj.sensor[i].en == 1){
  309. // T_en =true
  310. // }
  311. // T_free =false
  312. // if(obj.sensor[i].free == 1){
  313. // T_free =true
  314. // }
  315. if (timestamp_V != obj.sensor[i].UT) {
  316. $("#T_t").html("温度:" + obj.sensor[i].T.toFixed(2) + "℃")
  317. $("#T_rh").html("湿度:" + obj.sensor[i].RH.toFixed(1) + "%")
  318. $("#T_Tlower").html("限制:" + obj.sensor[i].Tlower + "℃")
  319. $("#T_Tupper").html(obj.sensor[i].Tupper + "℃")
  320. $("#T_RHlower").html("限制:" + obj.sensor[i].RHlower + "%")
  321. $("#T_RHupper").html(obj.sensor[i].RHupper + "%")
  322. $("#T_time").html("更新时间:" + timestampToTime(obj.sensor[i].UT) + " 更新间隔:" + Math.abs(timestamp_V - obj.sensor[i].UT).toFixed(0) + "s")
  323. console.log(timestamp_V, obj.sensor[i].UT, " 更新间隔:" + (timestamp_V - obj.sensor[i].UT) + "s")
  324. timestamp_V = obj.sensor[i].UT
  325. }
  326. break
  327. }
  328. }
  329. }
  330. if (obj.type == 3) {
  331. ok_websocket2 = true
  332. switch (obj.msid % 10) {
  333. case 1:
  334. obj.base.devName
  335. form.val('example', {
  336. "S_sn": obj.sn
  337. , "S_devName": obj.base.devName
  338. });
  339. break
  340. case 2:
  341. ok_websocket2 = true
  342. for (let i = 0; i < obj.sensor.length; i++) {
  343. if (obj.sensor[i].id == Id) {
  344. T_en = false
  345. if (obj.sensor[i].en == 1) {
  346. T_en = true
  347. }
  348. T_free = false
  349. if (obj.sensor[i].free == 1) {
  350. T_free = true
  351. }
  352. form.val('example', {
  353. "S_id": Id
  354. , "S_name": obj.sensor[i].name
  355. , "S_Tlower": obj.sensor[i].Tlower
  356. , "S_Tupper": obj.sensor[i].Tupper
  357. , "S_RHlower": obj.sensor[i].RHlower
  358. , "S_RHupper": obj.sensor[i].RHupper
  359. , "S_en": T_en
  360. , "S_free": T_free
  361. });
  362. layer.close(loading)
  363. }
  364. }
  365. break
  366. case 3:
  367. console.log("offset:", obj.offset.length)
  368. for (let i = 0; i < obj.offset.length; i++) {
  369. if (obj.offset[i].id == Id) {
  370. console.log(obj.offset[i])
  371. form.val('O_example', {
  372. "O_T": obj.offset[i].T
  373. , "O_RH": obj.offset[i].RH
  374. });
  375. // layer.close(loading)
  376. }
  377. }
  378. layer.close(loading)
  379. break
  380. }
  381. }
  382. if (obj.type == 4) {
  383. switch (obj.msid % 10) {
  384. case 2:
  385. layer.close(loading)
  386. layer.msg('配置参数成功!', {
  387. offset: '6px'
  388. });
  389. //关闭当前frame
  390. parent.layer.close(parent.layer.getFrameIndex(window.name));
  391. parent.location.reload();
  392. break
  393. case 3:
  394. layer.close(loading)
  395. layer.msg('配置参数成功!', {
  396. offset: '6px'
  397. });
  398. //关闭当前frame
  399. parent.layer.close(parent.layer.getFrameIndex(window.name));
  400. parent.location.reload();
  401. break
  402. }
  403. }
  404. //
  405. // if(obj && "memberstatus"==obj.type){
  406. // console.log(obj.data)
  407. // table.reload('test', {
  408. // elem: '#test'
  409. // ,data: JSON.parse(obj.data)
  410. // });
  411. // }
  412. };
  413. //连接关闭的回调方法
  414. websocket.onclose = function () {
  415. console.log("close");
  416. };
  417. //监听窗口关闭事件,当窗口关闭时,主动去关闭websocket连接,防止连接还没断开就关闭窗口,server端会抛异常。
  418. window.onbeforeunload = function () {
  419. websocket.close();
  420. console.log("onbeforeunload");
  421. };
  422. //关闭连接
  423. function closeWebSocket() {
  424. websocket.close();
  425. console.log("onbeforeunload");
  426. window.clearInterval(intervalId);
  427. }
  428. //发送消息
  429. function send(message) {
  430. websocket.send(message);
  431. }
  432. });
  433. </script>
  434. <script>
  435. {{if eq $.Admin_Power.Power_DeviceSensor_Compensate_e 1}}
  436. var key_list = []
  437. $(document).keydown(function(e){
  438. console.log(e.which)
  439. key_list.push(e.which)
  440. if(key_list[0] == 17 && key_list[1] == 16 && key_list[2] == 13){
  441. tab_3_open()
  442. }
  443. });
  444. {{end}}
  445. </script>
  446. </body>
  447. <style>
  448. .tab_show {
  449. background-color: #CCE9FF;
  450. border-radius: 5px;
  451. padding: 4px;
  452. }
  453. </style>
  454. </html>