DataLine.html 46 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342
  1. <!DOCTYPE html>
  2. <html class="x-admin-sm">
  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. <script src="https://osscold.baozhida.cn/js/jquery.min.js"></script>
  14. <script src="https://osscold.baozhida.cn/js/jquery.cookie.min.js"></script>
  15. <script src="https://osscold.baozhida.cn/lib/layui/layui.js" charset="utf-8"></script>
  16. <script src="https://osscold.baozhida.cn/js/echarts.js" charset="utf-8"></script>
  17. <script type="text/javascript" src="https://osscold.baozhida.cn/js/xadmin.js"></script>
  18. </head>
  19. <body>
  20. <div class="x-nav">
  21. <span class="layui-breadcrumb">
  22. <a href="">首页</a>
  23. <a><cite>宝智达</cite></a>
  24. </span>
  25. <a class="layui-btn layui-btn-normal" style="line-height:1.6em;margin-top:3px;float:right"
  26. onclick="location.reload()" title="刷新">
  27. <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
  28. </a>
  29. </div>
  30. <div class="layui-fluid">
  31. <div class="layui-row">
  32. <!-- // 传感器 选择-->
  33. <div style="width: 395px;float: left">
  34. <div class="layui-card">
  35. <div class="layui-card-body ">
  36. <form class="layui-form layui-col-space5" οnsubmit="return false;">
  37. <div class="layui-input-inline layui-show-xs-block">
  38. <input value="" type="text" id="D_T_sn" name="D_T_sn" placeholder="请输入 SN"
  39. autocomplete="off"
  40. class="layui-input"></div>
  41. <div class="layui-input-inline layui-show-xs-block">
  42. <input value="" type="text" id="D_Name" name="D_Name" placeholder="请输入 传感器名称"
  43. autocomplete="off"
  44. class="layui-input"></div>
  45. <div class="layui-input-inline layui-show-xs-block">
  46. <select id="Class_1" name="Class_1">
  47. <option value=0>所有分类</option>
  48. {{range $index, $elem := .Class_List}}
  49. <option value={{$elem.Id}}>{{$elem.T_name}}
  50. </option>
  51. {{end}}
  52. </select>
  53. </div>
  54. <div class="layui-input-inline layui-show-xs-block">
  55. <div class="layui-btn layui-btn-normal"
  56. onclick="get_DeviceSensor_list(0)">
  57. <i class="layui-icon">&#xe615;</i></div>
  58. </div>
  59. </form>
  60. <hr>
  61. </div>
  62. <div class="layui-card-body " style="margin-top: -20px">
  63. <div id="DeviceSensor_list" style="width: 98%; overflow: hidden;max-height: 616px;overflow-y: auto">
  64. <div style="color: #1E9FFF;text-align: center;font-size: 15px;margin-top: 150px">加载中...</div>
  65. <!-- <div class="layui-col"-->
  66. <!-- style="height: 52px;background-color: #fafafa;border-radius:5px;padding-top: 2px;">-->
  67. <!-- <img style="float: left;width: 50px;margin: 0px 10px" src="https://osscold.baozhida.cn/images/温湿度传感器-1.png"-->
  68. <!-- height="50"-->
  69. <!-- width="40"/>-->
  70. <!-- <div style="float: left;">-->
  71. <!-- <div style="margin-top: 4px;font-size: 14px">士大夫撒地方递四方速递</div>-->
  72. <!-- <div style="margin-top: -3px;font-size: 12px">SN:KF20210510143443 [1]</div>-->
  73. <!-- </div>-->
  74. <!-- <div class="layui-card-header"-->
  75. <!-- style="float: right;padding-left: 0px;padding-top: 6px;color: #1E9FFF">-->
  76. <!-- 》-->
  77. <!-- </div>-->
  78. <!-- </div>-->
  79. </div>
  80. </div>
  81. <div class="layui-card-body ">
  82. <div style="height: 70px">
  83. <div class="layui-card-body " style="text-align: center">
  84. <div class="layui-input-inline layui-show-xs-block">
  85. <div class="layui-btn layui-btn-normal"
  86. onclick="Checkboxs_All()">
  87. <i class="layui-icon">全选择</i>
  88. </div>
  89. </div>
  90. <div class="layui-input-inline layui-show-xs-block">
  91. <div class="layui-btn layui-btn-normal"
  92. onclick="Checkboxs_Allno()">
  93. <i class="layui-icon">全取消</i>
  94. </div>
  95. </div>
  96. <div class="layui-input-inline layui-show-xs-block">
  97. <div class="layui-btn layui-btn-normal"
  98. onclick="Checkboxs_Allto()">
  99. <i class="layui-icon">反选</i>
  100. </div>
  101. </div>
  102. <div style="color: #1E9FFF;text-align: center" id="DeviceSensor_list_Pages_x"></div>
  103. </div>
  104. </div>
  105. </div>
  106. </div>
  107. </div>
  108. <!-- // 传感器 选择-->
  109. <div style="width: calc(100% - 395px);float: left">
  110. <div class="layui-card">
  111. <div class="layui-card-body ">
  112. <form class="layui-form layui-col-space5" οnsubmit="return false;">
  113. <div class="layui-input-inline layui-show-xs-block">
  114. <div class="layui-btn layui-btn-normal"
  115. onclick="quick_1()">
  116. <i class="layui-icon">今天</i>
  117. </div>
  118. </div>
  119. <div class="layui-input-inline layui-show-xs-block">
  120. <div class="layui-btn layui-btn-normal"
  121. onclick="quick_2()">
  122. <i class="layui-icon">近3天</i>
  123. </div>
  124. </div>
  125. <div class="layui-input-inline layui-show-xs-block">
  126. <div class="layui-btn layui-btn-normal"
  127. onclick="quick_3()">
  128. <i class="layui-icon">近5天</i>
  129. </div>
  130. </div>
  131. <div class="layui-input-inline layui-show-xs-block">
  132. <div class="layui-btn layui-btn-normal"
  133. onclick="quick_4()">
  134. <i class="layui-icon">近7天</i>
  135. </div>
  136. </div>
  137. <div class="layui-input-inline layui-show-xs-block">
  138. 自定义时间:
  139. </div>
  140. <div class="layui-inline layui-show-xs-block">
  141. <input class="layui-input" autocomplete="off" placeholder="开始日" name="Time_start" id="Time_start" lay-key="1"></div>
  142. <div class="layui-inline layui-show-xs-block">
  143. <input class="layui-input" autocomplete="off" placeholder="截止日" name="Time_end" id="Time_end" lay-key="2"></div>
  144. <div class="layui-input-inline layui-show-xs-block">
  145. <div class="layui-btn layui-btn-normal"
  146. onclick="get_DeviceSensor_data_M()">
  147. <i class="layui-icon">&#xe615;</i>
  148. </div>
  149. </div>
  150. </form>
  151. <hr>
  152. </div>
  153. <div class="layui-card-body " >
  154. <div style="width: 99%;height:35px;">
  155. <h2 id="T_myChart_time" style="text-align: center"></h2>
  156. </div>
  157. <div id="T_myChart_1" style="width: 99%;height:335px;"></div>
  158. <div style="width: 99%;height:35px;">
  159. <h3 id="T_myChart_1_title" style="text-align: center;color: #0bace6;"></h3>
  160. </div>
  161. <div id="T_myChart_2" style="width: 99%;height:335px;"></div>
  162. <div style="width: 99%;height:35px;">
  163. <h3 id="T_myChart_2_title" style="text-align: center;color: #0bace6;"></h3>
  164. </div>
  165. </div>
  166. </div>
  167. </div>
  168. </div>
  169. </div>
  170. </div>
  171. </body>
  172. <script>
  173. //获取GET
  174. function getPar(par) {
  175. //获取当前URL
  176. var local_url = document.location.href;
  177. //获取要取得的get参数位置
  178. var get = local_url.indexOf(par + "=")
  179. ;
  180. if (get == -1) {
  181. return false;
  182. }
  183. //截取字符串
  184. //截取字符串
  185. var get_par = local_url.slice(par.length + get + 1);
  186. //判断截取后的字符串是否还有其他get参数
  187. var nextPar = get_par.indexOf("&")
  188. ;
  189. if (nextPar != -1) {
  190. get_par = get_par.slice(0, nextPar);
  191. }
  192. return get_par;
  193. }
  194. layui.use(['laydate', 'form'],
  195. function () {
  196. var laydate = layui.laydate;
  197. //执行一个laydate实例
  198. laydate.render({
  199. elem: '#Time_start' //指定元素
  200. ,type: 'datetime'
  201. });
  202. //执行一个laydate实例
  203. laydate.render({
  204. elem: '#Time_end' //指定元素
  205. ,type: 'datetime'
  206. });
  207. });
  208. var T_name = ""
  209. var T_sn = ""
  210. var T_class_id = 0
  211. var Admin_rh = "{{$.Admin_r.Admin_rh}}"
  212. var T_id = 0
  213. var T_sn_T_id = ""
  214. var Time_start = ""
  215. var Time_end = ""
  216. var DeviceSensor_snid_list = ""
  217. var DeviceSensor_lite = []
  218. var DeviceSensor_data = []
  219. /// --------------- 传感器列表
  220. // 页面 加载完成后执行
  221. window.onload = function () {
  222. console.log("页面 加载完成后执行")
  223. quick_1()
  224. get_DeviceSensor_list(0)
  225. }
  226. function ChangeDiv(e) {
  227. var divs = document.getElementsByClassName("ChangeDiv");
  228. var len = divs.length;
  229. for(var i=0;i<len;i++){
  230. divs[i].style.border = "1px solid #ffffff";
  231. }
  232. e.parentNode.style.border = "1px solid #ed0000";
  233. get_DeviceSensor_data_M()
  234. }
  235. // 今天
  236. function quick_1() {
  237. var myDate = new Date();
  238. y = myDate.getFullYear(); //获取当前年份(2位)
  239. m = myDate.getMonth()+1; //获取当前月份(0-11,0代表1月)
  240. d = myDate.getDate(); //获取当前日(1-31)
  241. console.log(y+"-"+m+"-"+d)
  242. Time_start = y+"-"+m+"-"+d + " 00:00:00"
  243. Time_end = y+"-"+m+"-"+d + " 23:59:59"
  244. $("#Time_start").val(Time_start)
  245. $("#Time_end").val(Time_end)
  246. get_DeviceSensor_data_M()
  247. }
  248. // 近一周
  249. function quick_2() {
  250. var myDate = new Date();
  251. y = myDate.getFullYear(); //获取当前年份(2位)
  252. m = myDate.getMonth()+1; //获取当前月份(0-11,0代表1月)
  253. d = myDate.getDate(); //获取当前日(1-31)
  254. console.log(y+"-"+m+"-"+d)
  255. Time_end = y+"-"+m+"-"+d + " 23:59:59"
  256. $("#Time_end").val(Time_end)
  257. myDate=myDate.setDate(myDate.getDate() - 2);
  258. myDate=new Date(myDate);
  259. y = myDate.getFullYear(); //获取当前年份(2位)
  260. m = myDate.getMonth()+1; //获取当前月份(0-11,0代表1月)
  261. d = myDate.getDate(); //获取当前日(1-31)
  262. Time_start = y+"-"+m+"-"+d + " 00:00:00"
  263. $("#Time_start").val(Time_start)
  264. get_DeviceSensor_data_M()
  265. }
  266. // 近一月
  267. function quick_3() {
  268. var myDate = new Date();
  269. y = myDate.getFullYear(); //获取当前年份(2位)
  270. m = myDate.getMonth()+1; //获取当前月份(0-11,0代表1月)
  271. d = myDate.getDate(); //获取当前日(1-31)
  272. console.log(y+"-"+m+"-"+d)
  273. Time_end = y+"-"+m+"-"+d + " 23:59:59"
  274. $("#Time_end").val(Time_end)
  275. myDate=myDate.setDate(myDate.getDate() - 4);
  276. myDate=new Date(myDate);
  277. y = myDate.getFullYear(); //获取当前年份(2位)
  278. m = myDate.getMonth()+1; //获取当前月份(0-11,0代表1月)
  279. d = myDate.getDate(); //获取当前日(1-31)
  280. Time_start = y+"-"+m+"-"+d + " 00:00:00"
  281. $("#Time_start").val(Time_start)
  282. get_DeviceSensor_data_M()
  283. }
  284. // 近一季度
  285. function quick_4() {
  286. var myDate = new Date();
  287. y = myDate.getFullYear(); //获取当前年份(2位)
  288. m = myDate.getMonth()+1; //获取当前月份(0-11,0代表1月)
  289. d = myDate.getDate(); //获取当前日(1-31)
  290. console.log(y+"-"+m+"-"+d)
  291. Time_end = y+"-"+m+"-"+d + " 23:59:59"
  292. $("#Time_end").val(Time_end)
  293. myDate=myDate.setDate(myDate.getDate() - 6);
  294. myDate=new Date(myDate);
  295. y = myDate.getFullYear(); //获取当前年份(2位)
  296. m = myDate.getMonth()+1; //获取当前月份(0-11,0代表1月)
  297. d = myDate.getDate(); //获取当前日(1-31)
  298. Time_start = y+"-"+m+"-"+d + " 00:00:00"
  299. $("#Time_start").val(Time_start)
  300. get_DeviceSensor_data_M()
  301. }
  302. //获取div中所有的复选框 .value
  303. var checkboxs = document.getElementsByClassName("checkboxxx");
  304. function Checkboxs_All () {
  305. for(var i = 0;i < checkboxs.length; i++){
  306. checkboxs[i].checked = true
  307. }
  308. }
  309. function Checkboxs_Allno () {
  310. for(var i = 0;i < checkboxs.length; i++){
  311. checkboxs[i].checked = false
  312. }
  313. }
  314. function Checkboxs_Allto () {
  315. for(var i = 0;i < checkboxs.length; i++){
  316. if(checkboxs[i].checked){
  317. checkboxs[i].checked = false
  318. }else {
  319. checkboxs[i].checked = true
  320. }
  321. }
  322. }
  323. function Checkboxs_GetAll () {
  324. DeviceSensor_snid_list = ""
  325. for(var i = 0;i < checkboxs.length; i++){
  326. if(checkboxs[i].checked){
  327. DeviceSensor_snid_list = DeviceSensor_snid_list + checkboxs[i].value + "|"
  328. }
  329. }
  330. }
  331. function get_DeviceSensor_list(page) {
  332. T_sn = $("#D_T_sn").val();
  333. T_name = $("#D_Name").val();
  334. T_class_id = $("#Class_1").val();
  335. $.ajax({
  336. type: 'POST',
  337. url: 'Device_Sensor_List',//发送请求
  338. data: {
  339. User_tokey: $.cookie("User_tokey"),
  340. T_sn: T_sn,
  341. T_name: T_name,
  342. T_class_id: parseInt(T_class_id),
  343. page: page,
  344. page_z: 100,
  345. },
  346. success: function (result) {
  347. console.log(result)
  348. if (result.Code == 200) {
  349. if(page == 0)
  350. $('#DeviceSensor_list').html("")
  351. // $('#DeviceSensor_list_Pages').html("")
  352. // $('#DeviceSensor_list_Pages_x').html("")
  353. DeviceSensor_lite = result.Data.DeviceSensor_lite
  354. if (DeviceSensor_lite.length == 0) {
  355. $('#DeviceSensor_list').html("<div style=\"color: #1E9FFF;text-align: center;font-size: 15px;margin-top: 150px\">没有设备</div>")
  356. return
  357. }
  358. Add_DeviceSensor_list(result.Data.DeviceSensor_lite) // 列表
  359. // Add_DeviceSensor_list_Pages(result.Data.Pages) // 分页
  360. $('#DeviceSensor_list_Pages_x').html(" 传感器 总数:" + result.Data.Num);
  361. if(result.Data.Page_size > result.Data.Page ){
  362. get_DeviceSensor_list(result.Data.Page+1)
  363. }
  364. } else {
  365. }
  366. }
  367. });
  368. return false
  369. }
  370. function Add_DeviceSensor_list(DS_lite) {
  371. for (let i = 0; i < DS_lite.length; i++) {
  372. // if(T_id == 0){
  373. // T_id = DS_lite[i].T_id;
  374. // T_sn_T_id = DS_lite[i].T_sn;
  375. // T_name = DS_lite[i].T_name;
  376. // // get_DeviceSensor_data(0)
  377. // }
  378. //
  379. $('#DeviceSensor_list').append("" +
  380. "<div class=\"layui-col ChangeDiv\" \n" +
  381. " style=\"border: 1px solid #ffffff;height: 52px;background-color: #fafafa;border-radius:5px;padding-top: 2px;margin-top: 6px;\">\n" +
  382. " <input type=\"checkbox\" name='checkboxxx' class='checkboxxx' onclick='get_DeviceSensor_data_M()' value='" + DS_lite[i].T_sn + "," + DS_lite[i].T_id + "' style='float: left;width: 18px;height: 18px;margin-top: 16px;margin-left: 10px;'/>" +
  383. " <img style=\"float: left;width: 50px;margin: 0px 10px\" src=\"https://osscold.baozhida.cn/images/温湿度传感器-1.png\"\n" +
  384. " height=\"50\"\n" +
  385. " width=\"40\"/>\n" +
  386. " <div style=\"float: left;\" >\n" +
  387. " <div style=\"margin-top: 4px;font-size: 14px;height: 24px;\">" + DS_lite[i].T_name + "</div>\n" +
  388. " <div style=\"margin-top: -3px;font-size: 12px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;width: 200px;\">SN:" + DS_lite[i].T_sn + " [" + DS_lite[i].T_id + "]</div>\n" +
  389. " </div>\n" +
  390. " <div class=\"layui-card-header\" style=\"float: right;padding-left: 0px;padding-top: 6px;color: #1E9FFF\">\n" +
  391. " \n" +
  392. " </div>\n" +
  393. " </div>")
  394. }
  395. }
  396. function get_DeviceSensor_data(page) {
  397. if($("#Time_start").val().length > 0){
  398. Time_start = $("#Time_start").val();
  399. }else {
  400. Time_start = ""
  401. }
  402. if($("#Time_end").val().length > 0){
  403. Time_end = $("#Time_end").val();
  404. }else {
  405. Time_end = ""
  406. }
  407. if(T_sn_T_id.length == 0){
  408. return ;
  409. }
  410. $("#T_myChart_time").html(T_name+"["+T_id+"]:" + $("#Time_start").val() + '~' + $("#Time_end").val())
  411. $.ajax({
  412. type: 'POST',
  413. url: 'Device_Sensor_Data',//发送请求
  414. data: {
  415. User_tokey: $.cookie("User_tokey"),
  416. Time_start:Time_start,
  417. Time_end:Time_end,
  418. T_sn: T_sn_T_id,
  419. T_id: T_id,
  420. page: 0,
  421. page_z: 9000,
  422. },
  423. success: function (result) {
  424. console.log(result)
  425. if (result.Code == 200) {
  426. DeviceSensor_data = result.Data.DeviceSensor_data
  427. console.log(result.Data.Num)
  428. if(result.Data.Num == 0){
  429. // alert("当前没有数据,请尝试一下其他时间段");
  430. layer.msg('当前没有数据,请尝试一下其他时间段');
  431. return
  432. }
  433. $("#T_myChart_2").show()
  434. $("#T_myChart_2_title").show()
  435. if(Admin_rh == 0 && T_sn_T_id.indexOf("YD") != -1){
  436. $("#T_myChart_2").hide()
  437. $("#T_myChart_2_title").hide()
  438. }
  439. T_fhand(result.Data.DeviceSensor_data)
  440. } else {
  441. }
  442. }
  443. });
  444. return false
  445. }
  446. function get_DeviceSensor_data_M() {
  447. if($("#Time_start").val().length > 0){
  448. Time_start = $("#Time_start").val();
  449. }else {
  450. Time_start = ""
  451. }
  452. if($("#Time_end").val().length > 0){
  453. Time_end = $("#Time_end").val();
  454. }else {
  455. Time_end = ""
  456. }
  457. Checkboxs_GetAll()
  458. $("#T_myChart_time").html($("#Time_start").val() + '~' + $("#Time_end").val())
  459. console.log("DeviceSensor_snid_list:",DeviceSensor_snid_list)
  460. // KF202201241934253,50|
  461. if(DeviceSensor_snid_list.length < 3) return
  462. DeviceSensor_snid_list_split = DeviceSensor_snid_list.split("|")
  463. var loading = layer.load(0, {
  464. shade: false,
  465. time: 99*1000
  466. });
  467. f_myChart_todata_inte() // 初始化数据
  468. for(var i = 0;i < DeviceSensor_snid_list_split.length ;i++){
  469. if(DeviceSensor_snid_list_split[i].length < 3) continue
  470. snid_split = DeviceSensor_snid_list_split[i].split(",")
  471. console.log("snid_split:",snid_split)
  472. M_T_n_max = 0
  473. M_T_n_min = 100
  474. M_T_n_ave_num = 0
  475. M_T_n_ave_sum = 0
  476. M_T_n_overtime = 0
  477. M_T_n_overtime_a = 0
  478. M_H_n_max = 0
  479. M_H_n_min = 100
  480. M_H_n_ave_num = 0
  481. M_H_n_ave_sum = 0
  482. M_H_n_overtime = 0
  483. M_H_n_overtime_a = 0
  484. $.ajax({
  485. type: 'POST',
  486. url: 'Device_Sensor_Data',//发送请求
  487. data: {
  488. User_tokey: $.cookie("User_tokey"),
  489. Time_start:Time_start,
  490. Time_end:Time_end,
  491. T_sn: snid_split[0],
  492. T_id: snid_split[1],
  493. page: 0,
  494. page_z: 9000,
  495. },
  496. success: function (result) {
  497. console.log(result)
  498. if (result.Code == 200) {
  499. console.log(result.Data.Num)
  500. if(result.Data.Num == 0){
  501. // alert("当前没有数据,请尝试一下其他时间段");
  502. layer.msg('当前没有数据,请尝试一下其他时间段');
  503. return
  504. }
  505. // T_fhand(result.Data.DeviceSensor_data)
  506. f_Data_to_myChart(result.Data.DeviceSensor_data)
  507. layer.close(loading)
  508. } else {
  509. }
  510. }
  511. });
  512. }
  513. return false
  514. }
  515. var T_myChart = echarts.init(document.getElementById('T_myChart_1'));
  516. var H_myChart = echarts.init(document.getElementById('T_myChart_2'));
  517. </script>
  518. <!-- 多个 图表-->
  519. <script>
  520. // 最高温度、最低温度、平均温度、超标温度累积时长
  521. var T_myChart_List_M = []
  522. var H_myChart_List_M = []
  523. function f_myChart_todata_inte() {
  524. T_myChart_List_M = [] // 清空
  525. H_myChart_List_M = [] // 清空
  526. T_myChart.dispose()
  527. H_myChart.dispose()
  528. $("#T_myChart_2").show()
  529. $("#T_myChart_2_title").show()
  530. T_myChart = echarts.init(document.getElementById('T_myChart_1'));
  531. H_myChart = echarts.init(document.getElementById('T_myChart_2'));
  532. $("#T_myChart_1_title").html("")
  533. $("#T_myChart_2_title").html("")
  534. }
  535. var M_T_n_max = 0
  536. var M_T_n_min = 0
  537. var M_T_n_ave_num = 0
  538. var M_T_n_ave_sum = 0
  539. var M_T_n_overtime = 0
  540. var M_T_n_overtime_a = 0
  541. var M_H_n_max = 0
  542. var M_H_n_min = 0
  543. var M_H_n_ave_num = 0
  544. var M_H_n_ave_sum = 0
  545. var M_H_n_overtime = 0
  546. var M_H_n_overtime_a = 0
  547. function f_Data_to_myChart(data) {
  548. data_1 = []
  549. data_2 = []
  550. for (let i = 0; i < data.length; i++) {
  551. // 温度
  552. data_1.unshift([data[i].T_time,data[i].T_t])
  553. if(data[i].T_t > M_T_n_max){
  554. M_T_n_max = data[i].T_t
  555. }
  556. if(data[i].T_t < M_T_n_min){
  557. M_T_n_min = data[i].T_t
  558. }
  559. M_T_n_ave_num += 1
  560. M_T_n_ave_sum += data[i].T_t
  561. if(data[i].T_t <= data[i].T_Tlower || data[i].T_t >= data[i].T_Tupper){
  562. if(M_T_n_overtime_a == 0){
  563. console.log(new Date(data[i].T_time),data[i].T_time)
  564. M_T_n_overtime_a = new Date(data[i].T_time)
  565. }
  566. }else {
  567. if(M_T_n_overtime_a > 0){
  568. M_T_n_overtime += M_T_n_overtime_a - new Date(data[i].T_time)
  569. M_T_n_overtime_a = 0
  570. }
  571. }
  572. // 湿度
  573. data_2.unshift([data[i].T_time,data[i].T_rh])
  574. if(data[i].T_rh > M_H_n_max){
  575. M_H_n_max = data[i].T_rh
  576. }
  577. if(data[i].T_rh < M_H_n_min){
  578. M_H_n_min = data[i].T_rh
  579. }
  580. M_H_n_ave_num += 1
  581. M_H_n_ave_sum += data[i].T_rh
  582. if(data[i].T_rh <= data[i].T_RHlower || data[i].T_rh >= data[i].T_RHupper){
  583. if(M_H_n_overtime_a == 0){
  584. console.log(new Date(data[i].T_time),data[i].T_time)
  585. M_H_n_overtime_a = new Date(data[i].T_time)
  586. }
  587. }else {
  588. if(M_H_n_overtime_a > 0){
  589. M_H_n_overtime += M_H_n_overtime_a - new Date(data[i].T_time)
  590. M_H_n_overtime_a = 0
  591. }
  592. }
  593. }
  594. $("#T_myChart_1_title").html("最高温度:"+M_T_n_max.toFixed(2)+"℃ &nbsp 最低温度"+M_T_n_min.toFixed(2)+"℃ &nbsp 平均温度:"+(M_T_n_ave_sum/M_T_n_ave_num).toFixed(2)+"℃ &nbsp 超标温度累积时长:"+formatSeconds(M_T_n_overtime/10000)+"")
  595. $("#T_myChart_2_title").html("最高湿度:"+M_H_n_max.toFixed(2)+"% &nbsp 最低湿度"+M_H_n_min.toFixed(2)+"% &nbsp 平均湿度:"+(M_H_n_ave_sum/M_H_n_ave_num).toFixed(2)+"% &nbsp 超标湿度累积时长:"+formatSeconds(M_H_n_overtime/10000)+"")
  596. T_myChart_List_M.push({
  597. name: data[0].T_name,
  598. type: 'line',
  599. // stack: 'Total',
  600. smooth: true,
  601. data: data_1,
  602. markLine: {
  603. data: [
  604. {
  605. silent:true, //鼠标悬停事件 true没有,false有
  606. lineStyle:{ //警戒线的样式 ,虚实 颜色
  607. type:"solid",
  608. color:"#FF4200",
  609. width: 3,
  610. },
  611. label:{
  612. position:'end',
  613. formatter:"下限("+data[0].T_Tlower+"℃)"
  614. },
  615. yAxis:data[0].T_Tlower
  616. },
  617. {
  618. silent:true, //鼠标悬停事件 true没有,false有
  619. lineStyle:{ //警戒线的样式 ,虚实 颜色
  620. type:"solid",
  621. color:"#FF4200",
  622. width: 3,
  623. },
  624. label:{
  625. position:'end',
  626. formatter:"上限("+data[0].T_Tupper+"℃)"
  627. },
  628. yAxis:data[0].T_Tupper
  629. }
  630. ]
  631. }
  632. })
  633. H_myChart_List_M.push({
  634. name: data[0].T_name,
  635. type: 'line',
  636. // stack: 'Total',
  637. smooth: true,
  638. data: data_2,
  639. markLine: {
  640. data: [
  641. {
  642. silent:true, //鼠标悬停事件 true没有,false有
  643. lineStyle:{ //警戒线的样式 ,虚实 颜色
  644. type:"solid",
  645. color:"#FF4200",
  646. width: 3,
  647. },
  648. label:{
  649. position:'end',
  650. formatter:"下限("+data[0].T_RHlower+"℃)"
  651. },
  652. yAxis:data[0].T_RHlower
  653. },
  654. {
  655. silent:true, //鼠标悬停事件 true没有,false有
  656. lineStyle:{ //警戒线的样式 ,虚实 颜色
  657. type:"solid",
  658. color:"#FF4200",
  659. width: 3,
  660. },
  661. label:{
  662. position:'end',
  663. formatter:"上限("+data[0].T_RHupper+"℃)"
  664. },
  665. yAxis:data[0].T_RHupper
  666. }
  667. ]
  668. }
  669. })
  670. var T_myChart_option_1 = {
  671. // title: {
  672. // top: '50px',
  673. // text: T_name+"["+T_id+"]:" + $("#Time_start").val() + '~' + $("#Time_end").val(),
  674. // textStyle:{
  675. // fontSize:14,
  676. // }
  677. // },
  678. tooltip: {
  679. trigger: 'axis'
  680. },
  681. toolbox: {
  682. show: true,
  683. feature: {
  684. dataZoom: {
  685. yAxisIndex: 'none'
  686. },
  687. dataView: { readOnly: false },
  688. magicType: { type: ['line', 'bar'] },
  689. restore: {},
  690. saveAsImage: {}
  691. }
  692. },
  693. grid: {
  694. top: '40px',
  695. left: '0px',
  696. right: '70px',
  697. bottom: '50px',
  698. containLabel: true
  699. },
  700. legend: {
  701. textStyle:{
  702. color:"#7c7c7c"
  703. }
  704. },
  705. xAxis: {
  706. type: 'time',
  707. boundaryGap: false,
  708. },
  709. yAxis: {
  710. type: 'value',
  711. axisLabel: {
  712. formatter: '{value} °C'
  713. },
  714. boundaryGap: [0, '100%'],
  715. // max:80,
  716. // min:-10,
  717. },
  718. dataZoom: [
  719. {
  720. type: 'inside',
  721. start: 0,
  722. end: 100
  723. },
  724. {
  725. start: 0,
  726. end: 100
  727. }
  728. ],
  729. markPoint: {
  730. // data: [ {
  731. // name: '最大值',
  732. // type: 'max'
  733. // },{
  734. // name: '最小值',
  735. // type: 'min'
  736. // }
  737. // ]
  738. },
  739. series: T_myChart_List_M
  740. };
  741. // 初始化 图表
  742. T_myChart.setOption(T_myChart_option_1);
  743. var T_myChart_option_2 = {
  744. // title: {
  745. // top: '50px',
  746. // text: T_name+"["+T_id+"]:" + $("#Time_start").val() + '~' + $("#Time_end").val(),
  747. // textStyle:{
  748. // fontSize:14,
  749. // }
  750. // },
  751. tooltip: {
  752. trigger: 'axis'
  753. },
  754. toolbox: {
  755. show: true,
  756. feature: {
  757. dataZoom: {
  758. yAxisIndex: 'none'
  759. },
  760. dataView: { readOnly: false },
  761. magicType: { type: ['line', 'bar'] },
  762. restore: {},
  763. saveAsImage: {}
  764. }
  765. },
  766. grid: {
  767. top: '40px',
  768. left: '0px',
  769. right: '70px',
  770. bottom: '50px',
  771. containLabel: true
  772. },
  773. legend: {
  774. textStyle:{
  775. color:"#7c7c7c"
  776. }
  777. },
  778. xAxis: {
  779. type: 'time',
  780. boundaryGap: false,
  781. },
  782. yAxis: {
  783. type: 'value',
  784. axisLabel: {
  785. formatter: '{value} %'
  786. },
  787. boundaryGap: [0, '100%'],
  788. // max:100,
  789. // min:0,
  790. },
  791. dataZoom: [
  792. {
  793. type: 'inside',
  794. start: 0,
  795. end: 100
  796. },
  797. {
  798. start: 0,
  799. end: 100
  800. }
  801. ],
  802. markPoint: {
  803. // data: [ {
  804. // name: '最大值',
  805. // type: 'max'
  806. // },{
  807. // name: '最小值',
  808. // type: 'min'
  809. // }
  810. // ]
  811. },
  812. series: H_myChart_List_M
  813. };
  814. // 初始化 图表
  815. H_myChart.setOption(T_myChart_option_2);
  816. }
  817. //
  818. // function f_Refresh_T_myChart_1() {
  819. // T_myChart_1.clear();
  820. // //
  821. // // T_myChart_option_1.title.text =
  822. // T_myChart_option_1.series = T_myChart_List_1
  823. // T_myChart_option_1.yAxis.max = T_myChart_max_1
  824. // T_myChart_option_1.yAxis.min = T_myChart_min_1
  825. // T_myChart_option_1.yAxis.axisLabel.formatter = '{value} ℃'
  826. // T_myChart_1.setOption(T_myChart_option_1);
  827. // }
  828. </script>
  829. <!-- 单个 图表-->
  830. <script>
  831. function T_fhand(data) {
  832. T_myChart.dispose()
  833. H_myChart.dispose()
  834. T_myChart = echarts.init(document.getElementById('T_myChart_1'));
  835. H_myChart = echarts.init(document.getElementById('T_myChart_2'));
  836. var T_time = []
  837. var T_data = []
  838. var T_waring = []
  839. var T_Tlower = 0
  840. var T_Tupper = 0
  841. var T_max = -999
  842. var T_min = 999
  843. var T_n_max = 0
  844. var T_n_min = 0
  845. var T_n_ave_num = 0
  846. var T_n_ave_sum = 0
  847. var T_n_overtime = 0
  848. var T_n_overtime_a = 0
  849. var H_time = []
  850. var H_data = []
  851. var H_waring = []
  852. var H_Tlower = 0
  853. var H_Tupper = 0
  854. var H_max = 0
  855. var H_min = 99
  856. var H_n_max = 0
  857. var H_n_min = 0
  858. var H_n_ave_num = 0
  859. var H_n_ave_sum = 0
  860. var H_n_overtime = 0
  861. var H_n_overtime_a = 0
  862. T_Tlower = data[0].T_Tlower
  863. T_Tupper = data[0].T_Tupper
  864. H_Tlower = data[0].T_RHlower
  865. H_Tupper = data[0].T_RHupper
  866. var dataZoomstart = 0 //缩放比例
  867. dataZoomstart = 100 - (30 / (data.length / 100))
  868. for (let i = 0; i < data.length; i++) {
  869. // 温度
  870. T_time.unshift(data[i].T_time)
  871. T_data.unshift(data[i].T_t)
  872. if(data[i].T_t > T_max){
  873. T_max = data[i].T_t
  874. T_n_max = data[i].T_t
  875. }
  876. if(data[i].T_t < T_min){
  877. T_min = data[i].T_t
  878. T_n_min = data[i].T_t
  879. }
  880. T_n_ave_num += 1
  881. T_n_ave_sum += data[i].T_t
  882. if(data[i].T_t <= data[i].T_Tlower || data[i].T_t >= data[i].T_Tupper){
  883. T_waring.unshift({ name: '周最低', value: data[i].T_t, xAxis: data.length-i-1, yAxis: data[i].T_t })
  884. if(T_n_overtime_a == 0){
  885. console.log(new Date(data[i].T_time),data[i].T_time)
  886. T_n_overtime_a = new Date(data[i].T_time)
  887. }
  888. }else {
  889. if(T_n_overtime_a > 0){
  890. T_n_overtime += T_n_overtime_a - new Date(data[i].T_time)
  891. T_n_overtime_a = 0
  892. }
  893. }
  894. // 湿度
  895. H_time.unshift(data[i].T_time)
  896. H_data.unshift(data[i].T_rh)
  897. if(data[i].T_rh > H_max){
  898. H_max = data[i].T_rh
  899. H_n_max = data[i].T_rh
  900. }
  901. if(data[i].T_rh < H_min){
  902. H_min = data[i].T_rh
  903. H_n_min = data[i].T_rh
  904. }
  905. if(data[i].T_rh <= data[i].T_RHlower || data[i].T_rh >= data[i].T_RHupper){
  906. H_waring.unshift({ name: '周最低', value: data[i].T_rh, xAxis: data.length-i-1, yAxis: data[i].T_rh })
  907. if(H_n_overtime_a == 0){
  908. console.log(new Date(data[i].T_time),data[i].T_time)
  909. H_n_overtime_a = new Date(data[i].T_time)
  910. }
  911. }else {
  912. if(H_n_overtime_a > 0){
  913. H_n_overtime += H_n_overtime_a - new Date(data[i].T_time)
  914. H_n_overtime_a = 0
  915. }
  916. }
  917. H_n_ave_num += 1
  918. H_n_ave_sum += data[i].T_rh
  919. }
  920. $("#T_myChart_1_title").html("最高温度:"+T_n_max.toFixed(2)+"℃ &nbsp 最低温度"+T_n_min.toFixed(2)+"℃ &nbsp 平均温度:"+(T_n_ave_sum/T_n_ave_num).toFixed(2)+"℃ &nbsp 超标温度累积时长:"+formatSeconds(T_n_overtime/10000)+"")
  921. $("#T_myChart_2_title").html("最高湿度:"+H_n_max.toFixed(2)+"% &nbsp 最低湿度"+H_n_min.toFixed(2)+"% &nbsp 平均湿度:"+(H_n_ave_sum/H_n_ave_num).toFixed(2)+"% &nbsp 超标湿度累积时长:"+formatSeconds(H_n_overtime/10000)+"")
  922. console.log("T_max:",T_max,"T_min:",T_min)
  923. if(T_Tupper > T_max){
  924. T_max = T_Tupper
  925. }
  926. if(T_Tlower < T_min){
  927. T_min = T_Tlower
  928. }
  929. T_max += 1
  930. T_min -= 1
  931. console.log("H_max:",H_max,"H_min:",H_min)
  932. if(H_Tupper > H_max){
  933. H_max = H_Tupper
  934. }
  935. if(H_Tlower < H_min){
  936. H_min = H_Tlower
  937. }
  938. H_max += 1
  939. H_min -= 1
  940. T_option = {
  941. title: {
  942. text: T_name+"["+T_id+"]:" + $("#Time_start").val() + '~' + $("#Time_end").val(),
  943. textStyle:{
  944. fontSize:14,
  945. }
  946. },
  947. tooltip: {
  948. trigger: 'axis'
  949. },
  950. legend: {},
  951. toolbox: {
  952. show: true,
  953. feature: {
  954. dataZoom: {
  955. yAxisIndex: 'none'
  956. },
  957. dataView: { readOnly: false },
  958. magicType: { type: ['line', 'bar'] },
  959. restore: {},
  960. saveAsImage: {}
  961. }
  962. },
  963. grid: {
  964. top: '40px',
  965. left: '0px',
  966. right: '70px',
  967. bottom: '50px',
  968. containLabel: true
  969. },
  970. xAxis: {
  971. type: 'category',
  972. boundaryGap: false,
  973. data: T_time, //['1', '2', '3', '4', '5', '6', '7'],
  974. },
  975. yAxis: {
  976. type: 'value',
  977. axisLabel: {
  978. formatter: '{value} °C'
  979. },
  980. max:T_max,
  981. min:T_min,
  982. },
  983. dataZoom: [
  984. {
  985. type: 'inside',
  986. start: 0,
  987. end: 100
  988. },
  989. {
  990. start: 0,
  991. end: 100
  992. }
  993. ],
  994. series: [
  995. {
  996. // name: '温度',
  997. type: 'line',
  998. data: T_data, //[1, -2, -1, 5, 3, 2, 0],
  999. markPoint: {
  1000. data: T_waring,
  1001. // [
  1002. // { name: '周最低', value: -2, xAxis: 1, yAxis: -1.5 }
  1003. // ,{ name: '周最低', value: -1, xAxis: 2, yAxis: -1 }
  1004. // ]
  1005. },
  1006. markLine: {
  1007. data: [
  1008. {
  1009. silent:true, //鼠标悬停事件 true没有,false有
  1010. lineStyle:{ //警戒线的样式 ,虚实 颜色
  1011. type:"solid",
  1012. color:"#FF4200",
  1013. width: 3,
  1014. },
  1015. label:{
  1016. position:'end',
  1017. formatter:"下限("+T_Tlower+"℃)"
  1018. },
  1019. yAxis:T_Tlower
  1020. },
  1021. {
  1022. silent:true, //鼠标悬停事件 true没有,false有
  1023. lineStyle:{ //警戒线的样式 ,虚实 颜色
  1024. type:"solid",
  1025. color:"#FF4200",
  1026. width: 3,
  1027. },
  1028. label:{
  1029. position:'end',
  1030. formatter:"上限("+T_Tupper+"℃)"
  1031. },
  1032. yAxis:T_Tupper
  1033. }
  1034. ]
  1035. }
  1036. },
  1037. ]
  1038. };
  1039. T_myChart.setOption(T_option);
  1040. H_option = {
  1041. title: {
  1042. text: T_name+"["+T_id+"]:" + $("#Time_start").val() + '~' + $("#Time_end").val(),
  1043. textStyle:{
  1044. fontSize:14,
  1045. }
  1046. },
  1047. tooltip: {
  1048. trigger: 'axis'
  1049. },
  1050. legend: {},
  1051. toolbox: {
  1052. show: true,
  1053. feature: {
  1054. dataZoom: {
  1055. yAxisIndex: 'none'
  1056. },
  1057. dataView: { readOnly: false },
  1058. magicType: { type: ['line', 'bar'] },
  1059. restore: {},
  1060. saveAsImage: {}
  1061. }
  1062. },
  1063. grid: {
  1064. top: '40px',
  1065. left: '0px',
  1066. right: '70px',
  1067. bottom: '50px',
  1068. containLabel: true
  1069. },
  1070. xAxis: {
  1071. type: 'category',
  1072. boundaryGap: false,
  1073. data: H_time, //['1', '2', '3', '4', '5', '6', '7'],
  1074. },
  1075. yAxis: {
  1076. type: 'value',
  1077. axisLabel: {
  1078. formatter: '{value} %'
  1079. },
  1080. max:H_max,
  1081. min:H_min,
  1082. },
  1083. dataZoom: [
  1084. {
  1085. type: 'inside',
  1086. start: 0,
  1087. end: 100
  1088. },
  1089. {
  1090. start: 0,
  1091. end: 100
  1092. }
  1093. ],
  1094. series: [
  1095. {
  1096. // name: '湿度',
  1097. type: 'line',
  1098. data: H_data, //[1, -2, -1, 5, 3, 2, 0],
  1099. markPoint: {
  1100. data: H_waring,
  1101. // [
  1102. // { name: '周最低', value: -2, xAxis: 1, yAxis: -1.5 }
  1103. // ,{ name: '周最低', value: -1, xAxis: 2, yAxis: -1 }
  1104. // ]
  1105. },
  1106. markLine: {
  1107. data: [
  1108. {
  1109. silent:true, //鼠标悬停事件 true没有,false有
  1110. lineStyle:{ //警戒线的样式 ,虚实 颜色
  1111. type:"solid",
  1112. color:"#FF4200",
  1113. width: 3,
  1114. },
  1115. label:{
  1116. position:'end',
  1117. formatter:"下限("+H_Tlower+"%)"
  1118. },
  1119. yAxis:H_Tlower
  1120. },
  1121. {
  1122. silent:true, //鼠标悬停事件 true没有,false有
  1123. lineStyle:{ //警戒线的样式 ,虚实 颜色
  1124. type:"solid",
  1125. color:"#FF4200",
  1126. width: 3,
  1127. },
  1128. label:{
  1129. position:'end',
  1130. formatter:"上限("+H_Tupper+"%)",
  1131. },
  1132. yAxis:H_Tupper
  1133. }
  1134. ]
  1135. }
  1136. }
  1137. ]
  1138. };
  1139. H_myChart.setOption(H_option);
  1140. }
  1141. function formatSeconds(value) {
  1142. var theTime = parseInt(value);// 秒
  1143. var theTime1 = 0;// 分
  1144. var theTime2 = 0;// 小时
  1145. // alert(theTime);
  1146. if(theTime > 60) {
  1147. theTime1 = parseInt(theTime/60);
  1148. theTime = parseInt(theTime%60);
  1149. // alert(theTime1+"-"+theTime);
  1150. if(theTime1 > 60) {
  1151. theTime2 = parseInt(theTime1/60);
  1152. theTime1 = parseInt(theTime1%60);
  1153. }
  1154. }
  1155. var result = ""+parseInt(theTime)+"秒";
  1156. if(theTime1 > 0) {
  1157. result = ""+parseInt(theTime1)+"分"+result;
  1158. }
  1159. if(theTime2 > 0) {
  1160. result = ""+parseInt(theTime2)+"小时"+result;
  1161. }
  1162. return result;
  1163. }
  1164. </script>
  1165. </html>