Device_Parameter-.html 29 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587
  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" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
  8. <link rel="shortcut icon" href="https://osscold.baozhida.cn/favicon.ico">
  9. <link rel="bookmark" href="https://osscold.baozhida.cn/favicon.ico">
  10. <link rel="stylesheet" href="https://osscold.baozhida.cn/css/font.css">
  11. <link rel="stylesheet" href="https://osscold.baozhida.cn/css/xadmin.css">
  12. <link rel="stylesheet" href="https://osscold.baozhida.cn/layui/css/layui.css">
  13. <script type="text/javascript" src="https://osscold.baozhida.cn/layui/layui.js" charset="utf-8"></script>
  14. <script type="text/javascript" src="https://osscold.baozhida.cn/js/xadmin.js"></script>
  15. <script src="https://cdn.staticfile.org/jquery/3.4.0/jquery.min.js"></script>
  16. <script src="https://cdn.staticfile.org/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
  17. <!-- 让IE8/9支持媒体查询,从而兼容栅格 -->
  18. <!--[if lt IE 9]>
  19. <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
  20. <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
  21. <![endif]--></head>
  22. <body>
  23. <div class="layui-fluid">
  24. <div class="layui-row">
  25. <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
  26. <legend>设备参数</legend>
  27. </fieldset>
  28. <form class="layui-form" action="" lay-filter="example">
  29. <div class="layui-form-item">
  30. <div class="layui-inline">
  31. <label class="layui-form-label" style="width: 28px;">SN</label>
  32. <div class="layui-input-inline">
  33. <input class="layui-input layui-disabled" type="text" id="SN" name="SN" autocomplete="off" class="layui-input">
  34. </div>
  35. </div>
  36. <div class="layui-inline">
  37. <label class="layui-form-label">设备名称</label>
  38. <div class="layui-input-inline">
  39. <input type="text" id="devName" name="devName" autocomplete="off" class="layui-input">
  40. </div>
  41. </div>
  42. </div>
  43. <div class="layui-form-item">
  44. <div class="layui-inline">
  45. <label class="layui-form-label">实时上传间隔</label>
  46. <div class="layui-input-inline" style="width: 100px;">
  47. <input type="text" id="uploadTime" name="uploadTime" autocomplete="off" class="layui-input">
  48. </div>
  49. <span style="float: left;margin-top: 10px;">秒</span>
  50. </div>
  51. <div class="layui-inline">
  52. <label class="layui-form-label">数据保存间隔</label>
  53. <div class="layui-input-inline" style="width: 100px;">
  54. <input type="text" id="saveTime" name="saveTime" autocomplete="off" class="layui-input">
  55. </div>
  56. <span style="float: left;margin-top: 10px;">秒</span>
  57. </div>
  58. </div>
  59. <div class="layui-form-item">
  60. <div class="layui-inline">
  61. <label class="layui-form-label" style="width: 105px;">数据超限保存间隔</label>
  62. <div class="layui-input-inline" style="width: 100px;">
  63. <input type="text" id="overrunSave" name="overrunSave" autocomplete="off" class="layui-input">
  64. </div>
  65. <span style="float: left;margin-top: 10px;">秒</span>
  66. </div>
  67. <div class="layui-inline">
  68. <label class="layui-form-label" style="width: 100px;">超限报警触发间隔</label>
  69. <div class="layui-input-inline" style="width: 100px;">
  70. <input type="text" id="overrunAlarm" name="overrunAlarm" autocomplete="off" class="layui-input">
  71. </div>
  72. <span style="float: left;margin-top: 10px;">秒</span>
  73. </div>
  74. </div>
  75. <div class="layui-form-item">
  76. <div class="layui-inline">
  77. <label class="layui-form-label" style="width: 140px;">传感器掉线报警触发间隔</label>
  78. <div class="layui-input-inline" style="width: 100px;">
  79. <input type="text" id="lostAlarm" name="lostAlarm" autocomplete="off" class="layui-input">
  80. </div>
  81. <span style="float: left;margin-top: 10px;">秒</span>
  82. </div>
  83. <div class="layui-inline">
  84. <label class="layui-form-label" style="width: 140px;">断电报警触发间隔</label>
  85. <div class="layui-input-inline" style="width: 100px;">
  86. <input type="text" id="outageAlarm" name="outageAlarm" autocomplete="off" class="layui-input">
  87. </div>
  88. <span style="float: left;margin-top: 10px;">秒</span>
  89. </div>
  90. </div>
  91. <div class="layui-form-item">
  92. <div class="layui-inline">
  93. <label class="layui-form-label" style="width: 101px;">超限预警触发间隔</label>
  94. <div class="layui-input-inline" style="width: 80px;">
  95. <input type="text" id="warningTime" name="warningTime" autocomplete="off" class="layui-input">
  96. </div>
  97. <span style="float: left;margin-top: 10px;">秒</span>
  98. </div>
  99. <div class="layui-inline">
  100. <label class="layui-form-label" style="width: 81px;">超限预警延时</label>
  101. <div class="layui-input-inline" style="width: 80px;">
  102. <input type="text" id="warningDelay" name="warningDelay" autocomplete="off" class="layui-input">
  103. </div>
  104. <span style="float: left;margin-top: 10px;">秒</span>
  105. </div>
  106. <div class="layui-inline">
  107. <label class="layui-form-label" style="width: 80px;">电池电量下限</label>
  108. <div class="layui-input-inline" style="width: 80px;">
  109. <input type="text" id="batteryLimit" name="batteryLimit" autocomplete="off" class="layui-input">
  110. </div>
  111. <span style="float: left;margin-top: 10px;">%</span>
  112. </div>
  113. <div class="layui-inline">
  114. <label class="layui-form-label" style="width: 90px;">温度预警提前量</label>
  115. <div class="layui-input-inline" style="width: 80px;">
  116. <input type="text" id="tempPre" name="tempPre" autocomplete="off" class="layui-input">
  117. </div>
  118. <span style="float: left;margin-top: 10px;">℃</span>
  119. </div>
  120. <div class="layui-inline">
  121. <label class="layui-form-label" style="width: 100px;">湿度预警提前量</label>
  122. <div class="layui-input-inline" style="width: 80px;">
  123. <input type="text" id="humPre" name="humPre" autocomplete="off" class="layui-input">
  124. </div>
  125. <span style="float: left;margin-top: 10px;">%</span>
  126. </div>
  127. </div>
  128. <div class="layui-form-item">
  129. <label class="layui-form-label" style="width: 101px;">是否启动超限预警</label>
  130. <div class="layui-input-block">
  131. <input type="checkbox" id="enwarning" name="enwarning" lay-filter="switchTest" lay-skin="switch" lay-text="开|关">
  132. <div class="layui-unselect layui-form-switch" lay-skin="_switch"><em>关</em><i></i></div>
  133. </div>
  134. </div>
  135. <div class="layui-form-item" style="font-size: 13px">
  136. <label class="layui-form-label" style="width: 57px;">类型选择</label>
  137. <div class="layui-input-block">
  138. <input type="radio" name="T_l_p" value="0" title="默认"
  139. {{if eq $.Device.T_l_p 0 }}
  140. checked=""
  141. {{end}}
  142. ><div class="layui-unselect layui-form-radio"><i class="layui-anim layui-icon"></i><div>默认</div></div>
  143. <input type="radio" name="T_l_p" value="1" title="物流端"
  144. {{if eq $.Device.T_l_p 1 }}
  145. checked=""
  146. {{end}}
  147. ><div class="layui-unselect layui-form-radio"><i class="layui-anim layui-icon"></i><div>物流端</div></div>
  148. <input type="radio" name="T_l_p" value="2" title="药店端"
  149. {{if eq $.Device.T_l_p 2 }}
  150. checked=""
  151. {{end}}
  152. ><div class="layui-unselect layui-form-radio layui-form-radioed"><i class="layui-anim layui-icon layui-anim-scaleSpring"></i><div>药店端</div></div>
  153. </div>
  154. </div>
  155. <div class="layui-form-item" style="text-align: center;margin-top: 20px">
  156. <button type="submit" class="layui-btn layui-btn-normal" lay-submit="" lay-filter="add">配置参数</button>
  157. </div>
  158. </form>
  159. <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
  160. <legend>最近修改记录</legend>
  161. </fieldset>
  162. {{range $index, $elem := .Device_lite}}
  163. <div class="layui-inline" style="margin-left: 40px;margin-bottom: 20px">
  164. <span style="margin-right: 20px">操作人UUID:{{$elem.T_uuid}}</span>
  165. <span style="margin-right: 20px">设备名称:{{$elem.T_devName}}</span>
  166. <span style="margin-right: 20px">实时数据上传间隔:{{$elem.T_uploadTime}}</span>
  167. <span style="margin-right: 20px">数据保存间隔:{{$elem.T_saveTime}}</span>
  168. <span style="margin-right: 20px">数据超限保存间隔:{{$elem.T_overrunSave}}</span>
  169. <span style="margin-right: 20px">超限报警触发间隔:{{$elem.T_overrunAlarm}}</span>
  170. <span style="margin-right: 20px">传感器掉线报警触发间隔:{{$elem.T_lostAlarm}}</span>
  171. <span style="margin-right: 20px">断电报警触发间隔:{{$elem.T_outageAlarm}}</span>
  172. <span style="margin-right: 20px">超限预警触发间隔:{{$elem.T_warningTime}}</span>
  173. <span style="margin-right: 20px">超限预警延时:{{$elem.T_warningDelay}}</span>
  174. <span style="margin-right: 20px">电池电量下限:{{$elem.T_batteryLimit}}</span>
  175. <span style="margin-right: 20px">温度预警提前量:{{$elem.T_tempPre}}</span>
  176. <span style="margin-right: 20px">湿度预警提前量:{{$elem.T_humPre}}</span>
  177. <span style="margin-right: 20px">是否启动超限预警:{{$elem.T_enwarning}}</span>
  178. <span style="margin-right: 20px">修改时间:{{$elem.CreateTime}}</span>
  179. </div>
  180. {{end}}
  181. </div>
  182. </div>
  183. <script>
  184. //获取url中的参数
  185. function getQueryString(name) {
  186. var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
  187. var r = window.location.search.substr(1).match(reg);
  188. if (r != null)
  189. return decodeURIComponent(r[2]);
  190. return null;
  191. }
  192. layui.use(['form', 'layer',"layedit"],
  193. function() {
  194. $ = layui.jquery;
  195. var form = layui.form,
  196. layer = layui.layer;
  197. var layedit = layui.layedit
  198. layedit.set({
  199. uploadImage: {
  200. url: '/UpFile' //接口url
  201. }
  202. });
  203. //构建一个默认的编辑器
  204. var index = layedit.build('T_text', {
  205. height: 580 //设置编辑器高度,
  206. });
  207. //监听提交
  208. form.on('submit(add)',
  209. function(data) {
  210. console.log("=== submit(add) ==");
  211. console.log(data);
  212. T_enwarning = 0
  213. if(data.field.enwarning != undefined){
  214. T_enwarning = 1
  215. }
  216. if(data.field.devName.length < 1){
  217. layer.msg('设备名称 太短!');
  218. return false;
  219. }
  220. if(data.field.saveTime < 60 || data.field.saveTime > 1800){
  221. layer.msg('数据保存间隔 60~1800');
  222. return false;
  223. }
  224. if(data.field.overrunSave < 60 || data.field.overrunSave > 120){
  225. layer.msg('数据超限保存间隔 60~120');
  226. return false;
  227. }
  228. if(data.field.overrunAlarm < 60 || data.field.overrunAlarm > 600){
  229. layer.msg('超限报警触发间隔 60~600');
  230. return false;
  231. }
  232. if(getQueryString("Sn").indexOf("KF") != -1 ){
  233. if(data.field.outageAlarm < 60 || data.field.outageAlarm > 600){
  234. layer.msg('断电报警触发间隔 60~600');
  235. return false;
  236. }
  237. }
  238. if(data.field.lostAlarm < 60 || data.field.lostAlarm > 600){
  239. layer.msg('传感器掉线报警触发间隔 60~600');
  240. return false;
  241. }
  242. if(data.field.warningDelay < 0 || data.field.warningDelay > 600){
  243. layer.msg('超限预警延时 0~600');
  244. return false;
  245. }
  246. if((data.field.warningTime < 60 || data.field.warningTime > 600)){
  247. if(data.field.warningTime != 0 ){
  248. layer.msg('超限预警触发间隔 0,60~600 为只触发一次');
  249. return false;
  250. }
  251. }
  252. if(data.field.tempPre < 0 || data.field.tempPre > 3){
  253. layer.msg('温度预警提前量 0~3');
  254. return false;
  255. }
  256. if(data.field.humPre < 0 || data.field.humPre > 30){
  257. layer.msg('湿度预警提前量 0~30');
  258. return false;
  259. }
  260. if(data.field.uploadTime < 10 || data.field.uploadTime > 60){
  261. layer.msg('实时上传间隔 10~60 (该参数只对库房终端与PC端的连接有效)');
  262. return false;
  263. }
  264. if(data.field.batteryLimit < 10 ){
  265. layer.msg('电池电量下限 > 10');
  266. return false;
  267. }
  268. loading = layer.load(0, {
  269. shade: false,
  270. time: 99*1000
  271. });
  272. $.ajax({
  273. type: 'POST',
  274. url: 'Pu_DeviceParameter',//发送请求
  275. data: {
  276. User_tokey:$.cookie('User_tokey'),
  277. SN:getQueryString("Sn"),
  278. T_devName:data.field.devName,
  279. T_uploadTime:data.field.uploadTime,
  280. T_saveTime:data.field.saveTime,
  281. T_overrunSave:data.field.overrunSave,
  282. T_overrunAlarm:data.field.overrunAlarm,
  283. T_outageAlarm:data.field.outageAlarm,
  284. T_warningTime:data.field.warningTime,
  285. T_warningDelay:data.field.warningDelay,
  286. T_batteryLimit:data.field.batteryLimit,
  287. T_lostAlarm:data.field.lostAlarm,
  288. T_tempPre:data.field.tempPre,
  289. T_humPre:data.field.humPre,
  290. T_l_p:data.field.T_l_p,
  291. T_enwarning:T_enwarning,
  292. },
  293. success: function(result) {
  294. console.log(result)
  295. if(result.Code != 222){
  296. return
  297. }
  298. layer.close(loading)
  299. layer.msg('配置参数成功!', {
  300. offset: '6px'
  301. });
  302. //关闭当前frame
  303. parent.layer.close(parent.layer.getFrameIndex(window.name));
  304. parent.location.reload();
  305. // return false;
  306. }
  307. });
  308. return false;
  309. });
  310. // //监听指定开关
  311. // form.on('switch(switchTest)', function(data){
  312. // layer.msg('开关checked:'+ (this.checked ? 'true' : 'false'), {
  313. // offset: '6px'
  314. // });
  315. // layer.tips('温馨提示:请注意开关状态的文字可以随意定义,而不仅仅是ON|OFF', data.othis)
  316. // });
  317. //表单取值
  318. // layui.$('#LAY-component-form-getval').on('click', function(){
  319. // var data = form.val('example');
  320. // alert(JSON.stringify(data));
  321. // });
  322. var loading = layer.load(0, {
  323. shade: false,
  324. time: 99*1000
  325. });
  326. var websocket = null;
  327. var ok_websocket1 = false;
  328. var ok_websocket2 = false;
  329. function Timeout_1 (){
  330. //要执行的代码
  331. if(!ok_websocket1){
  332. layer.open({
  333. text:"连接失败",
  334. btn: '立即重新登录',
  335. content: "请退出账号重新登录!",
  336. yes: function(index, layero){
  337. //do something
  338. window.parent.parent.location.href ='../Login';
  339. layer.close(index); //如果设定了yes回调,需进行手工关闭
  340. }
  341. });
  342. }
  343. }
  344. setTimeout(Timeout_1,8000);//5秒后执行
  345. function Timeout_2 (){
  346. //要执行的代码
  347. if(!ok_websocket2){
  348. layer.open({
  349. text:"无响应",
  350. btn: '重新试试',
  351. content: "设备主机无响应,请重新试试,若有疑问请联系工作人员!",
  352. yes: function(index, layero){
  353. //do something
  354. layer.close(index); //如果设定了yes回调,需进行手工关闭
  355. }
  356. });
  357. }
  358. }
  359. setTimeout(Timeout_2,20000);//5秒后执行
  360. //判断当前浏览器是否支持WebSocket
  361. if ('WebSocket' in window) {
  362. url = window.location.host
  363. if(url.indexOf("127.0.0.1") != -1){
  364. websocket = new WebSocket("ws://"+window.location.host+"/ws/join?User_tokey="+$.cookie('User_tokey'));
  365. }else {
  366. websocket = new WebSocket("wss://"+window.location.host+"/ws/join?User_tokey="+$.cookie('User_tokey'));
  367. }
  368. } else {
  369. alert('Dont support websocket')
  370. }
  371. console.log(getQueryString("Sn"))
  372. //连接发生错误的回调方法
  373. websocket.onerror = function () {
  374. console.log("error");
  375. };
  376. //连接成功建立的回调方法
  377. websocket.onopen = function () {
  378. console.log("open");
  379. send("{\"Sn\":\""+ getQueryString("Sn") +"\"}")
  380. };
  381. //接收到消息的回调方法
  382. websocket.onmessage = function (event) {
  383. console.log(event.data)
  384. var obj = JSON.parse(event.data);
  385. console.log(obj.type)
  386. ok_websocket1 = true
  387. if(obj.type == 3){
  388. layer.close(loading)
  389. ok_websocket2 = true
  390. switch (obj.msid%10) {
  391. case 1:
  392. T_enwarning =false
  393. if(obj.base.enwarning = 1){
  394. T_enwarning =true
  395. }
  396. form.val('example', {
  397. "SN": obj.sn // "name": "value"
  398. ,"devName": obj.base.devName
  399. ,"uploadTime": obj.base.uploadTime
  400. ,"saveTime": obj.base.saveTime
  401. ,"overrunSave": obj.base.overrunSave
  402. ,"overrunAlarm": obj.base.overrunAlarm
  403. ,"outageAlarm": obj.base.outageAlarm
  404. ,"lostAlarm": obj.base.lostAlarm
  405. ,"warningDelay": obj.base.warningDelay
  406. ,"warningTime": obj.base.warningTime
  407. ,"batteryLimit": obj.base.batteryLimit
  408. ,"tempPre": obj.base.tempPre
  409. ,"humPre": obj.base.humPre
  410. ,"enwarning": T_enwarning
  411. });
  412. break
  413. }
  414. }
  415. if(obj.type == 4){
  416. switch (obj.msid%10) {
  417. case 1:
  418. layer.close(loading)
  419. layer.msg('配置参数成功!', {
  420. offset: '6px'
  421. });
  422. //关闭当前frame
  423. parent.layer.close(parent.layer.getFrameIndex(window.name));
  424. parent.location.reload();
  425. break
  426. }
  427. }
  428. //
  429. // if(obj && "memberstatus"==obj.type){
  430. // console.log(obj.data)
  431. // table.reload('test', {
  432. // elem: '#test'
  433. // ,data: JSON.parse(obj.data)
  434. // });
  435. // }
  436. };
  437. //连接关闭的回调方法
  438. websocket.onclose = function () {
  439. console.log("close");
  440. };
  441. //监听窗口关闭事件,当窗口关闭时,主动去关闭websocket连接,防止连接还没断开就关闭窗口,server端会抛异常。
  442. window.onbeforeunload = function () {
  443. websocket.close();
  444. console.log("onbeforeunload");
  445. };
  446. //关闭连接
  447. function closeWebSocket() {
  448. websocket.close();
  449. console.log("onbeforeunload");
  450. window.clearInterval(intervalId);
  451. }
  452. //发送消息
  453. function send(message) {
  454. websocket.send(message);
  455. }
  456. });
  457. </script>
  458. <script>
  459. T_img = "{{.Date.T_img}}"
  460. layui.use('upload', function(){
  461. var $ = layui.jquery
  462. ,upload = layui.upload;
  463. //普通图片上传
  464. var uploadInst = upload.render({
  465. elem: '#test1'
  466. ,url: '/UpFile' //改成您自己的上传接口
  467. ,before: function(obj){
  468. //预读本地文件示例,不支持ie8
  469. obj.preview(function(index, file, result){
  470. $('#demo1').attr('src', result); //图片链接(base64)
  471. });
  472. }
  473. ,done: function(res){
  474. console.log(res)
  475. //如果上传失败
  476. if(res.code != 0){
  477. return layer.msg('上传失败');
  478. }
  479. T_img = res.data.src
  480. console.log(T_img)
  481. //上传成功
  482. }
  483. ,error: function(){
  484. console.log("error")
  485. //演示失败状态,并实现重传
  486. var demoText = $('#demoText');
  487. demoText.html('<span style="color: #ff5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
  488. demoText.find('.demo-reload').on('click', function(){
  489. uploadInst.upload();
  490. });
  491. }
  492. });
  493. //绑定原始文件域
  494. upload.render({
  495. elem: '#test20'
  496. ,url: 'https://httpbin.org/post' //改成您自己的上传接口
  497. ,done: function(res){
  498. layer.msg('上传成功');
  499. console.log(res)
  500. }
  501. });
  502. });
  503. </script>
  504. </body>
  505. </html>