Index.html 26 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894
  1. <!doctype html>
  2. <html>
  3. <title>宝智达物联网平台</title>
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  6. <script type="text/javascript" src="{{.OSS_Static}}/panel/jquery.min.js"></script>
  7. <script type="text/javascript" src="{{.OSS_Static}}/panel/layer/layer.js"></script>
  8. <script type="text/javascript" src="{{.OSS_Static}}/panel/context/context.js"></script>
  9. <script type="text/javascript" src="{{.OSS_Static}}/panel/drag.js"></script>
  10. <link rel="stylesheet" type="text/css" href="{{.OSS_Static}}/panel/context/context.standalone.css">
  11. <!--右侧菜单-->
  12. <link rel="stylesheet" type="text/css" href="{{.OSS_Static}}/panel/SlidePushMenus/css/default.css"/>
  13. <link rel="stylesheet" type="text/css" href="{{.OSS_Static}}/panel/SlidePushMenus/css/component.css"/>
  14. <script src="{{.OSS_Static}}/panel/SlidePushMenus/js/modernizr.custom.js"></script>
  15. <script src="{{.OSS_Static}}/panel/SlidePushMenus/js/classie.js"></script>
  16. <meta name="page-view-size" content="2920*1080" />
  17. <link rel="stylesheet" type="text/css" href="https://www.jq22.com/demo/csstoggle202003032356/style.css"/>
  18. <style type="text/css">
  19. html, body {
  20. margin: 0;
  21. padding: 0;
  22. overflow: hidden;
  23. }
  24. .transparent {
  25. filter: alpha(opacity=50);
  26. -moz-opacity: 0.5;
  27. -khtml-opacity: 0.5;
  28. /*opacity: 0.5; // 模糊*/
  29. }
  30. .box {
  31. width: 200px;
  32. height: 100px;
  33. cursor: move;
  34. position: absolute;
  35. top: 30px;
  36. left: 30px;
  37. z-index: 99;
  38. }
  39. .box .bg {
  40. width: 100%;
  41. height: 100%;
  42. background-color: orange;
  43. }
  44. .box .coor {
  45. width: 10px;
  46. height: 10px;
  47. overflow: hidden;
  48. cursor: se-resize;
  49. position: absolute;
  50. right: 0;
  51. bottom: 0;
  52. background-color: red;
  53. z-index: 9999999999;
  54. }
  55. .box .content {
  56. position: absolute;
  57. left: 50%;
  58. top: 50%;
  59. z-index: 99;
  60. text-align: center;
  61. font: bold 14px/1.5em simsun;
  62. }
  63. #debug {
  64. position: absolute;
  65. right: 10px;
  66. top: 10px;
  67. z-index: 88;
  68. border: 1px solid #ccc;
  69. width: 100px;
  70. height: 100px;
  71. background: #fff;
  72. }
  73. #toolbar {
  74. position: absolute;
  75. left: 10px;
  76. top: 10px;
  77. z-index: 88;
  78. }
  79. </style>
  80. <style>
  81. .help-left {
  82. width: 310px;
  83. font-family: 'microsoft YaHei';
  84. float: left;
  85. overflow-x: hidden;
  86. max-height: 100%;
  87. overflow-y: auto;
  88. }
  89. .menu {
  90. border-left: 1px solid #ccc;
  91. border-right: 1px solid #ccc;
  92. background-color:#FEFEFE;
  93. width:100%;
  94. float: left;
  95. }
  96. .menu:last-child {
  97. border-bottom: 1px solid #ccc;
  98. }
  99. .menu summary {
  100. height: 40px;
  101. line-height: 40px;
  102. text-indent: 10px;
  103. outline: none;
  104. font-size: 14px;
  105. font-weight: 700;
  106. border-top: 1px solid #ddd;
  107. background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FEFEFE), color-stop(1, #CCCCCC));
  108. cursor: pointer;
  109. width:100%;
  110. float: left;
  111. text-align: left;
  112. }
  113. .menu summary::-webkit-details-marker {
  114. display: none;
  115. }
  116. .menu .divul {
  117. padding: 10px 0;
  118. clear:left;
  119. width:100%;
  120. float: left;
  121. margin-left: 1px;
  122. }
  123. .menu .divulli {
  124. padding: 10px 0;
  125. width:97px;
  126. height: 100px;
  127. float: left;
  128. cursor: move;
  129. }
  130. .menu .divulli img {
  131. width:60px;
  132. height:60px;
  133. -webkit-user-select: none;
  134. cursor: default;
  135. pointer-events: none;
  136. }
  137. .menu .divulli div {
  138. width:97%;
  139. margin-top:-8px;
  140. overflow: hidden;
  141. text-overflow: ellipsis;
  142. white-space: nowrap;
  143. text-align: center;
  144. display:inline-block
  145. }
  146. .menu .divulli pre {
  147. width:0px;
  148. height:0px;
  149. overflow: hidden;
  150. }
  151. .menu .divulli:hover {
  152. background-color: #ececec;
  153. /*text-decoration: underline;*/
  154. }
  155. </style>
  156. <style>
  157. #tab-header span {
  158. padding: 0px 10px ;
  159. height: 38px;
  160. font-size: 20px;
  161. border-radius: 5px;
  162. padding-bottom: 10px;
  163. padding-top: 4px;
  164. }
  165. #tab-content .dom {
  166. display: none;
  167. }
  168. .open_layer_layui-layer-input {
  169. /*display: block;*/
  170. width: 220px;
  171. height: 30px;
  172. margin: 0 auto;
  173. line-height: 30px;
  174. padding: 0 5px;
  175. border: 1px solid #ccc;
  176. box-shadow: 1px 1px 5px rgba(0, 0, 0, .1) inset;
  177. color: #333;
  178. user-select: auto;
  179. }
  180. #open_layer_save_layer button {
  181. display: block;
  182. height: 38px;
  183. line-height: 38px;
  184. border: 1px solid transparent;
  185. padding: 0 18px;
  186. margin: 20px auto;
  187. background-color: #1E9FFF;;
  188. color: #fff;
  189. white-space: nowrap;
  190. text-align: center;
  191. font-size: 14px;
  192. border-radius: 2px;
  193. cursor: pointer;
  194. }
  195. .layer_tool_tab{
  196. position: absolute;
  197. top: 10px;
  198. right: 10px;
  199. /*background:#FFF;*/
  200. width: 80px;
  201. height: 30px;
  202. z-index:999999999999999999999;
  203. }
  204. .layer_tool_tab button {
  205. height: 28px;
  206. line-height: 28px;
  207. float: left;
  208. border: 1px solid transparent;
  209. padding: 0 18px;
  210. margin: 1px;
  211. background-color: #1E9FFF;;
  212. color: #fff;
  213. white-space: nowrap;
  214. text-align: center;
  215. font-size: 12px;
  216. border-radius: 2px;
  217. cursor: pointer;
  218. }
  219. .layer_tool_tab button:hover {
  220. background-color: #0092ff;;
  221. font-size: 12px;
  222. }
  223. .PanelCanvas_div{
  224. cursor: default;
  225. user-select: none;
  226. position: absolute;
  227. border: 2px dashed transparent;
  228. /*padding: 10px;*/
  229. }
  230. .PanelCanvas_rel_div{
  231. border: 2px dashed transparent;
  232. }
  233. .gridbackground { /*网格背景*/
  234. /*!*90度直线,100灰度,0.1透明度,5%宽度,0透明度背景*!*/
  235. /*background: linear-gradient(90deg, rgba(141, 128, 128, 0.1) 5%, transparent 0),*/
  236. /* !*0度直线,100灰度,0.1透明度,5%宽度,0透明度背景*!*/
  237. /*linear-gradient(rgba(100, 100, 100, 0.1) 5%, transparent 0);*/
  238. /*!*横纵向宽距*!*/
  239. /*background-size: 20px 20px;*/
  240. }
  241. </style>
  242. <style>
  243. /*#open_layer_Class select {*/
  244. /* margin-top: 2px;*/
  245. /* appearance: none;*/
  246. /* -webkit-appearance: none;*/
  247. /* -moz-appearance: none;*/
  248. /* border: 1px solid #e1e1e1;*/
  249. /* border-radius: 4px;*/
  250. /* height: 2.2em;*/
  251. /* padding: 0 24px 0 8px;*/
  252. /* font-family: inherit;*/
  253. /* color: #666;*/
  254. /* cursor: pointer;*/
  255. /* position: relative;*/
  256. /* background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAASFBMVEUAAAD////Nzc3Nzc3V1dXNzc3MzMzMzMzMzMzNzc3Ozs7j4+PMzMzMzMzMzMzPz8/MzMzNzc3Ozs7Ozs7MzMzNzc3Nzc3Nzc1mbvnCAAAAGHRSTlMAAymOBrtVs9RlPgnPltxPlWwvRJzBt+CSuXutAAAAM0lEQVR4nGMYBbgALycjiGIUZEaTEBLl4WJgEOZgZcLQwybOLsbHj800bhEBFqo7cfACACvdARau8cpxAAAAAElFTkSuQmCC') no-repeat right center;*/
  257. /*}*/
  258. .layui-layer-iframe iframe {
  259. display: block;
  260. width: 100%;
  261. height: 600px;
  262. }
  263. </style>
  264. </head>
  265. <body>
  266. <input hidden type="file" id="UpLoadFile"/>
  267. <div id="PanelCanvas" class="gridbackground" draggable="false" style="user-select: none;height: 4000px;width: 4000px;position: absolute;left: 0px;top: 0px;background-color: #f0f0f0">
  268. </div>
  269. {{if le .admin_r.Admin_power 6}}
  270. <div class="layer_tool_tab" >
  271. <button onclick="f_PaneView_E();">编辑</button>
  272. </div>
  273. <script>
  274. // 切换编辑
  275. function f_PaneView_E() {
  276. ToUrl = encodeURIComponent('../..'+window.location.pathname+'?T_viewid='+T_viewid)
  277. window.location.href='PaneView_E?T_viewid='+T_viewid+"&ToUrl="+ToUrl
  278. }
  279. </script>
  280. {{end}}
  281. <!--页面 加载完成后执行-->
  282. <script>
  283. var OSS_Static = "{{.OSS_Static}}"
  284. var T_viewid = "{{.T_viewid}}"
  285. console.log("T_viewid:",T_viewid)
  286. var PanelCanvas_lock = true; //区块锁定标识
  287. // 页面 加载完成后执行
  288. window.onload = function () {
  289. console.log("页面 加载完成后执行")
  290. $('img').on('dragstart', function(event) { event.preventDefault(); });
  291. if(T_viewid.length > 0){
  292. f_PaneView_Get()
  293. }
  294. }
  295. // 切换试图
  296. function f_PaneView_V() {
  297. window.location.href='../..'+window.location.pathname+'?T_viewid='+T_viewid
  298. }
  299. // 调整视图 大小
  300. function win_show() {
  301. PC_width = parseFloat($("#PanelCanvas").css("width"))
  302. PC_height = parseFloat($("#PanelCanvas").css("height"))
  303. setInterval(function(){
  304. Width = $(window).width();
  305. Height = $(window).height();
  306. //
  307. // console.log("W:",Width,Height)
  308. // console.log("PC:",PC_width,PC_height)
  309. //
  310. // console.log("X:",Width/PC_width)
  311. // console.log("Y:",Height/PC_height)
  312. //
  313. $("#PanelCanvas").css({
  314. 'transform': 'scale('+Width/PC_width+', '+Height/PC_height+')',
  315. 'transform-origin': '0 0'
  316. });
  317. },500);
  318. }
  319. </script>
  320. <!--移动面板-->
  321. <script>
  322. //创建拖拽方法
  323. PanelCanvas_move = true
  324. // $("#PanelCanvas").mousedown(function(e){
  325. // if(!PanelCanvas_move){return;}
  326. //
  327. // var canvas = $(this);
  328. // var pos = $(this).position();
  329. // this.posix = {'x': e.pageX - pos.left, 'y': e.pageY - pos.top};
  330. // $.extend(document, {'move': true, 'move_target': this, 'call_down' : function(e, posix){
  331. // canvas.css({
  332. // 'cursor': 'move',
  333. // 'top': e.pageY - posix.y,
  334. // 'left': e.pageX - posix.x
  335. // });
  336. // }, 'call_up' : function(){
  337. // canvas.css('cursor', 'default');
  338. // }});
  339. // })
  340. function f_PanelCanvas_onmouseover() {
  341. // console.log("进入")
  342. PanelCanvas_move = false
  343. }
  344. function f_PanelCanvas_onmouseout() {
  345. // console.log("出去")
  346. PanelCanvas_move = true
  347. }
  348. </script>
  349. <!--数据缓存-->
  350. <script>
  351. var Public_Value_map = new Map();
  352. //读取 同步缓存数据
  353. function f_Public_Value_get(tab) {
  354. if(Public_Value_map.has(tab)){ //判断映射是否存在
  355. return Public_Value_map.get(tab),true
  356. }
  357. return 0,false
  358. }
  359. //设置 同步缓存数据
  360. function f_Public_Value_set(tab,value) {
  361. Public_Value_map.set(tab,value); //添加设置映射
  362. }
  363. </script>
  364. <!--画板入口-->
  365. <script src="{{.OSS_Static}}/panel/PanelCanvas.js"></script>
  366. <script>
  367. var V_PanelCanvas_Map = new Map();
  368. // 层背景图片 回调函数
  369. function f_Layer_background_picture(H_img_id) {
  370. $('#UpLoadFile').click();
  371. F_c = function(up_url) {
  372. if (H_img_id.length > 1) {
  373. $("#" + H_img_id).attr("src", up_url)
  374. }
  375. }
  376. }
  377. function f_PaneView_Get() {
  378. $.ajax({
  379. type: 'POST',
  380. url: '../../Panel/PaneView_Get',//发送请求
  381. data: {
  382. T_viewid: "{{.T_viewid}}",
  383. },
  384. success: function (result) {
  385. console.log(result)
  386. if (result.Code == 200) {
  387. T_PanelCanvas = result.Data
  388. PanelCanvas_mode = T_PanelCanvas.T_mode
  389. console.log("PanelCanvas_mode:",PanelCanvas_mode)
  390. switch (PanelCanvas_mode) {
  391. case 0:
  392. f_PanelCanvas_mode_0(result)
  393. break
  394. case 1:
  395. f_PanelCanvas_mode_1(result)
  396. break
  397. case 2:
  398. f_PanelCanvas_mode_0(result)
  399. win_show() // 调整视图 大小
  400. break
  401. }
  402. } else {
  403. layer.msg('视图获取错误!');
  404. }
  405. }
  406. });
  407. }
  408. // 自由模式
  409. function f_PanelCanvas_mode_0(result) {
  410. T_PanelCanvas = result.Data
  411. // CSS 样式
  412. $('#PanelCanvas').css({
  413. width: T_PanelCanvas.T_width + "px",
  414. height: T_PanelCanvas.T_height + "px"
  415. });
  416. // CSS 自定义样式
  417. f_Up_css(T_PanelCanvas.T_css,"PanelCanvas")
  418. // 加载 组件
  419. if(result.Data.T_text.length < 10 ){
  420. return;
  421. }
  422. PaneView_json = JSON.parse(result.Data.T_text)
  423. for(var i = 0;i < PaneView_json.length;i++){
  424. Layer_Mould_json = PaneView_json[i]
  425. console.log("创建面板 PaneView_json",Layer_Mould_json)
  426. V_PanelCanvas = new f_canvas2(Layer_Mould_json.PanelCanvas_top,Layer_Mould_json.PanelCanvas_left,Layer_Mould_json.PanelCanvas_width, Layer_Mould_json.PanelCanvas_height, Layer_Mould_json.PanelCanvas_z, JSON.stringify(Layer_Mould_json.PanelCanvas_map), Layer_Mould_json.PanelCanvas_css)
  427. V_PanelCanvas_Map.set(V_PanelCanvas.PanelCanvas_id,V_PanelCanvas)
  428. for(var row_i = 0; row_i < Layer_Mould_json.Data_list.length; row_i++){
  429. // rowjson = Layer_Mould_json.Data_list[i]
  430. console.log("row json+ ",Layer_Mould_json.Data_list[row_i])
  431. V_PanelCanvas.F_CreateBox(Layer_Mould_json.Data_list[row_i]);
  432. }
  433. }
  434. }
  435. // 瀑瀑模式
  436. function f_PanelCanvas_mode_1(result){
  437. T_PanelCanvas = result.Data
  438. // CSS 样式
  439. $('#PanelCanvas').css({
  440. width: '100%',
  441. height: '100%',
  442. overflowX: "hidden",
  443. overflowY: "auto",
  444. });
  445. // CSS 自定义样式
  446. f_Up_css(T_PanelCanvas.T_css,"PanelCanvas")
  447. // 加载 组件
  448. if(result.Data.T_text.length < 10 ){
  449. return;
  450. }
  451. // 获取数据源
  452. T_PanelCanvas_T_data_list = []
  453. if(T_PanelCanvas.T_data.search('http') >= 0){
  454. // 接口
  455. }else {
  456. T_PanelCanvas_T_data_list = T_PanelCanvas.T_data.split("\n")
  457. }
  458. if(T_PanelCanvas_T_data_list.length == 0){
  459. layer.msg('没有数据');
  460. return;
  461. }
  462. console.log("T_PanelCanvas_T_data_list:",T_PanelCanvas_T_data_list)
  463. PaneView_json = JSON.parse(T_PanelCanvas.T_text)
  464. if(PaneView_json.length == 0){
  465. layer.msg('没有面板');
  466. return;
  467. }
  468. Layer_Mould_json = PaneView_json[0]
  469. console.log("创建面板 PaneView_json",Layer_Mould_json)
  470. //
  471. console.log("PanelCanvas 宽度:",$("#PanelCanvas").width())
  472. console.log("组件 高度:",Layer_Mould_json.PanelCanvas_height)
  473. width_num = Math.floor($("#PanelCanvas").width()/Layer_Mould_json.PanelCanvas_width)
  474. width_num_left = Math.floor(($("#PanelCanvas").width() - (width_num * Layer_Mould_json.PanelCanvas_width)) / width_num)
  475. console.log("宽度数量:",width_num," 每个左边距:",width_num_left)
  476. P_top = 70 // 初始化 顶高度
  477. P_top -= Number(Layer_Mould_json.PanelCanvas_height) //
  478. P_top -= Number(width_num_left) //
  479. P_left = 0
  480. P_map = JSON.stringify(Layer_Mould_json.PanelCanvas_map)
  481. P_map = JSON.parse(P_map)
  482. console.log("P_map:",P_map)
  483. for(var i = 0;i < T_PanelCanvas_T_data_list.length;i++){
  484. P_map.sn_sn = T_PanelCanvas_T_data_list[i]
  485. if(i % width_num == 0){
  486. P_top += Number(Layer_Mould_json.PanelCanvas_height)
  487. P_top += width_num_left
  488. P_left = 0
  489. }
  490. P_left += Math.floor(width_num_left / 2)
  491. V_PanelCanvas = new f_canvas2(P_top,P_left,Layer_Mould_json.PanelCanvas_width, Layer_Mould_json.PanelCanvas_height, Layer_Mould_json.PanelCanvas_z, JSON.stringify(P_map), Layer_Mould_json.PanelCanvas_css)
  492. V_PanelCanvas_Map.set(V_PanelCanvas.PanelCanvas_id,V_PanelCanvas)
  493. for(var row_i = 0; row_i < Layer_Mould_json.Data_list.length; row_i++){
  494. // rowjson = Layer_Mould_json.Data_list[i]
  495. console.log("row json+ ",Layer_Mould_json.Data_list[row_i])
  496. V_PanelCanvas.F_CreateBox(Layer_Mould_json.Data_list[row_i]);
  497. }
  498. P_left += Number(Layer_Mould_json.PanelCanvas_width) + Math.floor(width_num_left / 2)
  499. }
  500. }
  501. </script>
  502. <!--发布订阅模式-->
  503. <script>
  504. // 控制中心
  505. var pubSub = {
  506. list: {},
  507. // 订阅
  508. subscribe: function(key, fn) {
  509. console.log("加入:",key)
  510. if (!this.list[key]) this.list[key] = [];
  511. this.list[key].push(fn);
  512. key_list = key.split("/")
  513. if(key_list[0].length > 3){
  514. NewSubscribe(key_list[0]) // 订阅SN
  515. f_Data_Read(key_list[0],key_list[1])
  516. }
  517. },
  518. //取消订阅
  519. unsubscribe: function(key, fn) {
  520. let fnList = this.list[key];
  521. if (!fnList) return false;
  522. if (!fn) { // 不传入指定的方法,清空所用 key 下的订阅
  523. fnList && (fnList.length = 0);
  524. } else {
  525. fnList.forEach((item, index) => {
  526. item === fn && fnList.splice(index, 1);
  527. });
  528. }
  529. },
  530. // 发布
  531. publish: function(key, ...args) {
  532. if (this.list[key]){
  533. for (let fn of this.list[key]) fn.call(this, ...args);
  534. }
  535. }
  536. }
  537. function f_Data_Read(T_sn,T_tab) {
  538. $.ajax({
  539. type: 'POST',
  540. url: '../../Device/Data_Read',//发送请求
  541. data: {
  542. T_sn: T_sn,
  543. T_tab: T_tab,
  544. },
  545. success: function (result) {
  546. console.log(result)
  547. if (result.Code == 200) {
  548. pubSub.publish(T_sn+'/'+T_tab, result.Data.T_value);
  549. }
  550. }
  551. });
  552. }
  553. </script>
  554. <!--websocket-->
  555. <script src="{{.OSS_Static}}/js/jquery.cookie.min.js"></script>
  556. <script>
  557. var websocket = null;
  558. //判断当前浏览器是否支持WebSocket
  559. run_WebSocket()
  560. function run_WebSocket() {
  561. console.log("run_WebSocket");
  562. if ('WebSocket' in window) {
  563. url = window.location.host
  564. if (url.indexOf("127.0.0.1") != -1) {
  565. websocket = new WebSocket("ws://" + window.location.host + "/ws/join?User_tokey=" + $.cookie('User_tokey'));
  566. } else {
  567. websocket = new WebSocket("wss://" + window.location.host + "/ws/join?User_tokey=" + $.cookie('User_tokey'));
  568. }
  569. } else {
  570. alert('Dont support websocket')
  571. }
  572. }
  573. //连接成功建立的回调方法
  574. websocket.onopen = function () {
  575. console.log("websocket open");
  576. // get_DeviceCh_List(0)
  577. setTimeout(function(){
  578. SubscribeSend()
  579. },2000);
  580. // send("{\"Sn\":\"" + getQueryString("Sn") + "\"}")
  581. };
  582. //接收到消息的回调方法
  583. websocket.onmessage = function (event) {
  584. var obj = JSON.parse(event.data);
  585. // console.log(obj.type)
  586. if(!SbscribeMap.has(obj.sn)){
  587. console.log(obj.sn,"跳过。。 Device_Sn = ",obj.sn)
  588. return
  589. }
  590. console.log("websocket:",event.data)
  591. pubSub.publish(obj.sn+'/'+obj.tab, obj.value);
  592. f_Public_Value_set(obj.sn+'/'+obj.tab, obj.value)
  593. // op:类型u8, //操作 0-主动上传 1-读 2- 写 3-成功 4-失败
  594. switch (obj.op) {
  595. case 3:
  596. Del_Mid(obj.mid)
  597. break;
  598. case 4:
  599. Err_Mid(obj.mid)
  600. break;
  601. }
  602. // console.log(obj.sn,"进入。。 Device_Sn = ",obj.sn)
  603. // Pu_DeviceCh_List_g(obj.sn,obj.tab,obj.value)
  604. // if (obj.type == 0) {
  605. // // console.log("data.length:",obj.sensor.length)
  606. //
  607. // Pu_DeviceCh_List_g(obj.sn, obj.sensor)
  608. //
  609. // if (obj.type == 0) {
  610. // $("#T_time").html("刷新时间:" + dateChangeFormat_x('YYYY-mm-dd HH:MM:SS', obj.sensor[0].UT) + " 上传刷新间隔:" + Math.abs(timestamp_V - obj.sensor[0].UT).toFixed(0) + "s")
  611. //
  612. // // console.log(timestamp_V, obj.sensor[0].UT, " 刷新间隔:" + (timestamp_V - obj.sensor[0].UT) + "s")
  613. // timestamp_V = obj.sensor[0].UT
  614. //
  615. // }
  616. //
  617. //
  618. // }
  619. //
  620. };
  621. //连接关闭的回调方法
  622. websocket.onclose = function () {
  623. console.log("close");
  624. // setTimeout(function () {
  625. // //要执行的代码
  626. // run_WebSocket();
  627. // }, 2000);
  628. };
  629. //连接发生错误的回调方法
  630. websocket.onerror = function () {
  631. console.log("error");
  632. setTimeout(function () {
  633. //要执行的代码
  634. run_WebSocket();
  635. }, 2000);
  636. };
  637. //监听窗口关闭事件,当窗口关闭时,主动去关闭websocket连接,防止连接还没断开就关闭窗口,server端会抛异常。
  638. window.onbeforeunload = function () {
  639. websocket.close();
  640. console.log("窗口关闭事件");
  641. };
  642. //关闭连接
  643. function closeWebSocket() {
  644. websocket.close();
  645. console.log("onbeforeunload");
  646. window.clearInterval(intervalId);
  647. }
  648. //发送消息
  649. function send(message) {
  650. websocket.send(message);
  651. }
  652. var SbscribeMap = new Set();
  653. // 订阅 SN
  654. function Subscribe(SN) {
  655. if(!SbscribeMap.has(SN)){
  656. console.log("加入订阅:",SN)
  657. SbscribeMap.add(SN)
  658. }
  659. //
  660. }
  661. // 订阅 SN
  662. function NewSubscribe(SN) {
  663. if(!SbscribeMap.has(SN)){
  664. console.log("加入订阅:",SN)
  665. SbscribeMap.add(SN)
  666. send("{ \"Sn\":\""+SN+"\"}")
  667. }
  668. //
  669. }
  670. // 订阅 SN
  671. function SubscribeSend() {
  672. for (var SN of SbscribeMap) { // 遍历Set
  673. send("{ \"Sn\":\""+SN+"\"}")
  674. }
  675. console.log("开始订阅:",SbscribeMap)
  676. }
  677. </script>
  678. <!--远程执行-->
  679. <script>
  680. var Data_Write_Map = new Map();
  681. // 执行
  682. function f_Data_Write(V_id,T_sn,T_tab,T_value) {
  683. $.ajax({
  684. type: 'POST',
  685. url: '../../Device/Data_Write',//发送请求
  686. async: false,
  687. data: {
  688. T_sn:T_sn,
  689. T_tab:T_tab,
  690. T_value:T_value,
  691. },
  692. success: function(result) {
  693. console.log(result)
  694. pubSub.publish(T_sn+'/'+T_tab, T_value);
  695. f_Public_Value_set(T_sn+'/'+T_tab, T_value) //同步缓存数据
  696. Data_Write_Map.set(result.Data,{V_id:V_id,Munm:1});
  697. }
  698. });
  699. }
  700. setInterval(function(){
  701. // 遍历
  702. $(".Mid").remove() // 清空
  703. for(let [Mid,v] of Data_Write_Map) {
  704. console.log("Mid:", Mid,v);
  705. Data_Write_Map.set(Mid,{V_id:v.V_id,Munm:v.Munm + 1});
  706. if(v.Munm > 3 && v.Munm < 20 && v.Munm % 2 == 0){
  707. $("body").append('<div class="Mid" style="user-select: none;position: absolute;left: '+$("#"+v.V_id).offset().left+'px;top: '+$("#"+v.V_id).offset().top+'px;z-index: 999999999999999;width: 20px;height: 20px;background-color:rgb(255, 0, 0);border-radius: 25px;"></div>')
  708. }
  709. if(v.Munm > 10){
  710. Del_Mid(Mid)
  711. }
  712. }
  713. },1000);
  714. function Del_Mid(Mid) {
  715. if(Data_Write_Map.has(Mid)){ //判断映射是否存在
  716. // console.log("delete:",Data_Write_Map.get(Data_Write_Map))
  717. Data_Write_Map.delete(Mid);
  718. }
  719. }
  720. function Err_Mid(Mid) {
  721. // if(Data_Write_Map.has(Mid)){ //判断映射是否存在
  722. // console.log(Data_Write_Map.get(Data_Write_Map))
  723. // }
  724. }
  725. </script>
  726. <script>
  727. function detectZoom (){
  728. var ratio = 0,
  729. screen = window.screen,
  730. ua = navigator.userAgent.toLowerCase();
  731. if (window.devicePixelRatio !== undefined) {
  732. ratio = window.devicePixelRatio;
  733. }
  734. else if (~ua.indexOf('msie')) {
  735. if (screen.deviceXDPI && screen.logicalXDPI) {
  736. ratio = screen.deviceXDPI / screen.logicalXDPI;
  737. }
  738. }
  739. else if (window.outerWidth !== undefined && window.innerWidth !== undefined) {
  740. ratio = window.outerWidth / window.innerWidth;
  741. }
  742. if (ratio){
  743. ratio = Math.round(ratio * 100);
  744. }
  745. return ratio;
  746. };
  747. </script>
  748. </body>
  749. </html>