DataLine.html 47 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343
  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 class="layui-col-md4">
  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 class="layui-col-md8">
  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(0)">
  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()
  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(0)
  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.getDay() - 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(0)
  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(0)
  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(0)
  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. $('#DeviceSensor_list').append("" +
  379. "<div class=\"layui-col ChangeDiv\" \n" +
  380. " style=\"border: 1px solid #ffffff;height: 52px;background-color: #fafafa;border-radius:5px;padding-top: 2px;margin-top: 6px;\">\n" +
  381. " <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;'/>" +
  382. " <img style=\"float: left;width: 50px;margin: 0px 10px\" src=\"https://osscold.baozhida.cn/images/温湿度传感器-1.png\"\n" +
  383. " height=\"50\"\n" +
  384. " width=\"40\"/>\n" +
  385. " <div style=\"float: left;\" onclick=\"ChangeDiv(this);T_id = " + DS_lite[i].T_id + ";T_sn_T_id = '" + DS_lite[i].T_sn + "';T_name = '" + DS_lite[i].T_name + "';\" >\n" +
  386. " <div style=\"margin-top: 4px;font-size: 14px;height: 24px;\">" + DS_lite[i].T_name + "</div>\n" +
  387. " <div style=\"margin-top: -3px;font-size: 12px\">SN:" + DS_lite[i].T_sn + " [" + DS_lite[i].T_id + "]</div>\n" +
  388. " </div>\n" +
  389. " <div class=\"layui-card-header\" onclick=\"ChangeDiv(this);T_id = " + DS_lite[i].T_id + ";T_sn_T_id = '" + DS_lite[i].T_sn + "';T_name = '" + DS_lite[i].T_name + "';\" \n" +
  390. " 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>