DataLine.html 28 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750
  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;">
  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 ">
  84. <div class="page">
  85. <div id="DeviceSensor_list_Pages">
  86. <!-- <a class="prev" href="">&lt;&lt;</a>-->
  87. <!-- <a class="num" href="">1222</a>-->
  88. <!-- <span class="current">111</span>-->
  89. <!-- <a class="num" href="">444</a>-->
  90. <!-- <a class="next" href="">&gt;&gt;</a>-->
  91. </div>
  92. </div>
  93. <div style="color: #1E9FFF;text-align: center" id="DeviceSensor_list_Pages_x"></div>
  94. </div>
  95. </div>
  96. </div>
  97. </div>
  98. </div>
  99. <!-- // 传感器 选择-->
  100. <div class="layui-col-md8">
  101. <div class="layui-card">
  102. <div class="layui-card-body ">
  103. <form class="layui-form layui-col-space5" οnsubmit="return false;">
  104. <div class="layui-input-inline layui-show-xs-block">
  105. <div class="layui-btn layui-btn-normal"
  106. onclick="quick_1()">
  107. <i class="layui-icon">今天</i>
  108. </div>
  109. </div>
  110. <div class="layui-input-inline layui-show-xs-block">
  111. <div class="layui-btn layui-btn-normal"
  112. onclick="quick_2()">
  113. <i class="layui-icon">近一周</i>
  114. </div>
  115. </div>
  116. <div class="layui-input-inline layui-show-xs-block">
  117. <div class="layui-btn layui-btn-normal"
  118. onclick="quick_3()">
  119. <i class="layui-icon">近一月</i>
  120. </div>
  121. </div>
  122. <div class="layui-input-inline layui-show-xs-block">
  123. <div class="layui-btn layui-btn-normal"
  124. onclick="quick_4()">
  125. <i class="layui-icon">近一季度</i>
  126. </div>
  127. </div>
  128. <div class="layui-input-inline layui-show-xs-block">
  129. 自定义时间:
  130. </div>
  131. <div class="layui-inline layui-show-xs-block">
  132. <input class="layui-input" autocomplete="off" placeholder="开始日" name="Time_start" id="Time_start" lay-key="1"></div>
  133. <div class="layui-inline layui-show-xs-block">
  134. <input class="layui-input" autocomplete="off" placeholder="截止日" name="Time_end" id="Time_end" lay-key="2"></div>
  135. <div class="layui-input-inline layui-show-xs-block">
  136. <div class="layui-btn layui-btn-normal"
  137. onclick="get_DeviceSensor_data(0)">
  138. <i class="layui-icon">&#xe615;</i>
  139. </div>
  140. </div>
  141. </form>
  142. <hr>
  143. </div>
  144. <div class="layui-card-body " >
  145. <div id="T_main" style="width: 99%;height:335px;"></div>
  146. <div id="H_main" style="width: 99%;height:335px;"></div>
  147. </div>
  148. </div>
  149. </div>
  150. </div>
  151. </div>
  152. </div>
  153. </body>
  154. <script>
  155. //获取GET
  156. function getPar(par) {
  157. //获取当前URL
  158. var local_url = document.location.href;
  159. //获取要取得的get参数位置
  160. var get = local_url.indexOf(par + "=")
  161. ;
  162. if (get == -1) {
  163. return false;
  164. }
  165. //截取字符串
  166. //截取字符串
  167. var get_par = local_url.slice(par.length + get + 1);
  168. //判断截取后的字符串是否还有其他get参数
  169. var nextPar = get_par.indexOf("&")
  170. ;
  171. if (nextPar != -1) {
  172. get_par = get_par.slice(0, nextPar);
  173. }
  174. return get_par;
  175. }
  176. layui.use(['laydate', 'form'],
  177. function () {
  178. var laydate = layui.laydate;
  179. //执行一个laydate实例
  180. laydate.render({
  181. elem: '#Time_start' //指定元素
  182. ,type: 'datetime'
  183. });
  184. //执行一个laydate实例
  185. laydate.render({
  186. elem: '#Time_end' //指定元素
  187. ,type: 'datetime'
  188. });
  189. });
  190. var T_name = ""
  191. var T_sn = ""
  192. var T_class_id = 0
  193. var T_id = 0
  194. var T_sn_T_id = ""
  195. var Time_start = ""
  196. var Time_end = ""
  197. var DeviceSensor_lite = []
  198. var DeviceSensor_data = []
  199. /// --------------- 传感器列表
  200. // 页面 加载完成后执行
  201. window.onload = function () {
  202. console.log("页面 加载完成后执行")
  203. quick_1()
  204. get_DeviceSensor_list(0)
  205. }
  206. function ChangeDiv(e) {
  207. var divs = document.getElementsByClassName("ChangeDiv");
  208. var len = divs.length;
  209. for(var i=0;i<len;i++){
  210. divs[i].style.border = "1px solid #ffffff";
  211. }
  212. e.style.border = "1px solid #ed0000";
  213. }
  214. // 今天
  215. function quick_1() {
  216. var myDate = new Date();
  217. y = myDate.getFullYear(); //获取当前年份(2位)
  218. m = myDate.getMonth()+1; //获取当前月份(0-11,0代表1月)
  219. d = myDate.getDate(); //获取当前日(1-31)
  220. console.log(y+"-"+m+"-"+d)
  221. Time_start = y+"-"+m+"-"+d + " 00:00:00"
  222. Time_end = y+"-"+m+"-"+d + " 23:59:59"
  223. $("#Time_start").val(Time_start)
  224. $("#Time_end").val(Time_end)
  225. get_DeviceSensor_data(0)
  226. }
  227. // 近一周
  228. function quick_2() {
  229. var myDate = new Date();
  230. y = myDate.getFullYear(); //获取当前年份(2位)
  231. m = myDate.getMonth()+1; //获取当前月份(0-11,0代表1月)
  232. d = myDate.getDate(); //获取当前日(1-31)
  233. console.log(y+"-"+m+"-"+d)
  234. Time_end = y+"-"+m+"-"+d + " 23:59:59"
  235. $("#Time_end").val(Time_end)
  236. myDate=myDate.setDate(myDate.getDay() - 6);
  237. myDate=new Date(myDate);
  238. y = myDate.getFullYear(); //获取当前年份(2位)
  239. m = myDate.getMonth()+1; //获取当前月份(0-11,0代表1月)
  240. d = myDate.getDate(); //获取当前日(1-31)
  241. Time_start = y+"-"+m+"-"+d + " 00:00:00"
  242. $("#Time_start").val(Time_start)
  243. get_DeviceSensor_data(0)
  244. }
  245. // 近一月
  246. function quick_3() {
  247. var myDate = new Date();
  248. y = myDate.getFullYear(); //获取当前年份(2位)
  249. m = myDate.getMonth()+1; //获取当前月份(0-11,0代表1月)
  250. d = myDate.getDate(); //获取当前日(1-31)
  251. console.log(y+"-"+m+"-"+d)
  252. Time_end = y+"-"+m+"-"+d + " 23:59:59"
  253. $("#Time_end").val(Time_end)
  254. myDate=myDate.setDate(myDate.getDate() - 30);
  255. myDate=new Date(myDate);
  256. y = myDate.getFullYear(); //获取当前年份(2位)
  257. m = myDate.getMonth()+1; //获取当前月份(0-11,0代表1月)
  258. d = myDate.getDate(); //获取当前日(1-31)
  259. Time_start = y+"-"+m+"-"+d + " 00:00:00"
  260. $("#Time_start").val(Time_start)
  261. get_DeviceSensor_data(0)
  262. }
  263. // 近一季度
  264. function quick_4() {
  265. var myDate = new Date();
  266. y = myDate.getFullYear(); //获取当前年份(2位)
  267. m = myDate.getMonth()+1; //获取当前月份(0-11,0代表1月)
  268. d = myDate.getDate(); //获取当前日(1-31)
  269. console.log(y+"-"+m+"-"+d)
  270. Time_end = y+"-"+m+"-"+d + " 23:59:59"
  271. $("#Time_end").val(Time_end)
  272. myDate=myDate.setDate(myDate.getDate() - 30 * 3);
  273. myDate=new Date(myDate);
  274. y = myDate.getFullYear(); //获取当前年份(2位)
  275. m = myDate.getMonth()+1; //获取当前月份(0-11,0代表1月)
  276. d = myDate.getDate(); //获取当前日(1-31)
  277. Time_start = y+"-"+m+"-"+d + " 00:00:00"
  278. $("#Time_start").val(Time_start)
  279. get_DeviceSensor_data(0)
  280. }
  281. function get_DeviceSensor_list(page) {
  282. T_sn = $("#D_T_sn").val();
  283. T_name = $("#D_Name").val();
  284. T_class_id = $("#Class_1").val();
  285. $.ajax({
  286. type: 'POST',
  287. url: 'Device_Sensor_List',//发送请求
  288. data: {
  289. User_tokey: $.cookie("User_tokey"),
  290. T_sn: T_sn,
  291. T_name: T_name,
  292. T_class_id: parseInt(T_class_id),
  293. page: page,
  294. },
  295. success: function (result) {
  296. console.log(result)
  297. if (result.Code == 200) {
  298. $('#DeviceSensor_list').html("")
  299. $('#DeviceSensor_list_Pages').html("")
  300. $('#DeviceSensor_list_Pages_x').html("")
  301. DeviceSensor_lite = result.Data.DeviceSensor_lite
  302. if (DeviceSensor_lite.length == 0) {
  303. $('#DeviceSensor_list').html("<div style=\"color: #1E9FFF;text-align: center;font-size: 15px;margin-top: 150px\">没有设备</div>")
  304. return
  305. }
  306. Add_DeviceSensor_list(result.Data.DeviceSensor_lite) // 列表
  307. Add_DeviceSensor_list_Pages(result.Data.Pages) // 分页
  308. $('#DeviceSensor_list_Pages_x').append("页数:" + result.Data.Page + "/" + result.Data.Page_size + " 总数:" + result.Data.Num);
  309. } else {
  310. }
  311. }
  312. });
  313. return false
  314. }
  315. function Add_DeviceSensor_list(DS_lite) {
  316. for (let i = 0; i < DS_lite.length; i++) {
  317. if(T_id == 0){
  318. T_id = DS_lite[i].T_id;
  319. T_sn_T_id = DS_lite[i].T_sn;
  320. get_DeviceSensor_data(0)
  321. }
  322. $('#DeviceSensor_list').append("" +
  323. "<div class=\"layui-col ChangeDiv\" onclick=\"ChangeDiv(this); T_id = " + DS_lite[i].T_id + ";T_sn_T_id = '" + DS_lite[i].T_sn + "';get_DeviceSensor_data(0)\" \n" +
  324. " style=\"height: 52px;background-color: #fafafa;border-radius:5px;padding-top: 2px;margin-top: 6px;border: 1px solid #ffffff;\">\n" +
  325. " <img style=\"float: left;width: 50px;margin: 0px 10px\" src=\"https://osscold.baozhida.cn/images/温湿度传感器-1.png\"\n" +
  326. " height=\"50\"\n" +
  327. " width=\"40\"/>\n" +
  328. " <div style=\"float: left;\">\n" +
  329. " <div style=\"margin-top: 4px;font-size: 14px;height: 24px;\">" + DS_lite[i].T_name + "</div>\n" +
  330. " <div style=\"margin-top: -3px;font-size: 12px\">SN:" + DS_lite[i].T_sn + " [" + DS_lite[i].T_id + "]</div>\n" +
  331. " </div>\n" +
  332. " <div class=\"layui-card-header\"\n" +
  333. " style=\"float: right;padding-left: 0px;padding-top: 6px;color: #1E9FFF\">\n" +
  334. " 》\n" +
  335. " </div>\n" +
  336. " </div>")
  337. }
  338. }
  339. function Add_DeviceSensor_list_Pages(Pages) {
  340. for (let i = 0; i < Pages.length; i++) {
  341. elem = Pages[i]
  342. switch (elem.A) {
  343. case 1:
  344. $('#DeviceSensor_list_Pages').append("<a class=\"prev\" onclick='get_DeviceSensor_list(" + elem.V + ")' >&lt;&lt;</a>\n");
  345. break;
  346. case 2:
  347. $('#DeviceSensor_list_Pages').append("<a class=\"num\" onclick='get_DeviceSensor_list(" + elem.V + ")' >" + elem.V + "</a>\n");
  348. break;
  349. case 3:
  350. $('#DeviceSensor_list_Pages').append("<span class=\"current\">" + elem.V + "</span>\n");
  351. break;
  352. case 4:
  353. $('#DeviceSensor_list_Pages').append("<a class=\"num\" onclick='get_DeviceSensor_list(" + elem.V + ")' >" + elem.V + "</a>\n");
  354. break;
  355. case 5:
  356. $('#DeviceSensor_list_Pages').append("<a class=\"next\" onclick='get_DeviceSensor_list(" + elem.V + ")' >&gt;&gt;</a>\n");
  357. break;
  358. }
  359. }
  360. }
  361. function get_DeviceSensor_data(page) {
  362. if($("#Time_start").val().length > 0){
  363. Time_start = $("#Time_start").val();
  364. }else {
  365. Time_start = ""
  366. }
  367. if($("#Time_end").val().length > 0){
  368. Time_end = $("#Time_end").val();
  369. }else {
  370. Time_end = ""
  371. }
  372. if(T_sn_T_id.length == 0){
  373. return ;
  374. }
  375. $.ajax({
  376. type: 'POST',
  377. url: 'Device_Sensor_Data',//发送请求
  378. data: {
  379. User_tokey: $.cookie("User_tokey"),
  380. Time_start:Time_start,
  381. Time_end:Time_end,
  382. T_sn: T_sn_T_id,
  383. T_id: T_id,
  384. page: 0,
  385. page_z: 9000,
  386. },
  387. success: function (result) {
  388. console.log(result)
  389. if (result.Code == 200) {
  390. DeviceSensor_data = result.Data.DeviceSensor_data
  391. console.log(result.Data.Num)
  392. if(result.Data.Num == 0){
  393. // alert("当前没有数据,请尝试一下其他时间段");
  394. layer.msg('当前没有数据,请尝试一下其他时间段');
  395. return
  396. }
  397. T_fhand(result.Data.DeviceSensor_data)
  398. } else {
  399. }
  400. }
  401. });
  402. return false
  403. }
  404. var T_myChart = echarts.init(document.getElementById('T_main'));
  405. var H_myChart = echarts.init(document.getElementById('H_main'));
  406. function T_fhand(data) {
  407. var T_time = []
  408. var T_data = []
  409. var T_waring = []
  410. var T_Tlower = 0
  411. var T_Tupper = 0
  412. var T_max = -999
  413. var T_min = 999
  414. var H_time = []
  415. var H_data = []
  416. var H_waring = []
  417. var H_Tlower = 0
  418. var H_Tupper = 0
  419. var H_max = 0
  420. var H_min = 99
  421. var dataZoomstart = 0 //缩放比例
  422. T_Tlower = data[0].T_Tlower
  423. T_Tupper = data[0].T_Tupper
  424. H_Tlower = data[0].T_RHlower
  425. H_Tupper = data[0].T_RHupper
  426. dataZoomstart = 100 - (30 / (data.length / 100))
  427. for (let i = 0; i < data.length; i++) {
  428. // 温度
  429. T_time.unshift(data[i].T_time)
  430. T_data.unshift(data[i].T_t)
  431. if(data[i].T_t > T_max){
  432. T_max = data[i].T_t
  433. }
  434. if(data[i].T_t < T_min){
  435. T_min = data[i].T_t
  436. }
  437. if(data[i].T_t <= data[i].T_Tlower || data[i].T_t >= data[i].T_Tupper){
  438. T_waring.unshift({ name: '周最低', value: data[i].T_t, xAxis: data.length-i-1, yAxis: data[i].T_t })
  439. }
  440. // 湿度
  441. H_time.unshift(data[i].T_time)
  442. H_data.unshift(data[i].T_rh)
  443. if(data[i].T_rh > H_max){
  444. H_max = data[i].T_rh
  445. }
  446. if(data[i].T_rh < H_min){
  447. H_min = data[i].T_rh
  448. }
  449. if(data[i].T_rh <= data[i].T_RHlower || data[i].T_rh >= data[i].T_RHupper){
  450. H_waring.unshift({ name: '周最低', value: data[i].T_rh, xAxis: data.length-i-1, yAxis: data[i].T_rh })
  451. }
  452. }
  453. console.log("T_max:",T_max,"T_min:",T_min)
  454. if(T_Tupper > T_max){
  455. T_max = T_Tupper
  456. }
  457. if(T_Tlower < T_min){
  458. T_min = T_Tlower
  459. }
  460. T_max += 1
  461. T_min -= 1
  462. console.log("H_max:",H_max,"H_min:",H_min)
  463. if(H_Tupper > H_max){
  464. H_max = H_Tupper
  465. }
  466. if(H_Tlower < H_min){
  467. H_min = H_Tlower
  468. }
  469. H_max += 1
  470. H_min -= 1
  471. T_option = {
  472. title: {
  473. text: "温度:" + $("#Time_start").val() + '~' + $("#Time_end").val(),
  474. textStyle:{
  475. fontSize:14,
  476. }
  477. },
  478. tooltip: {
  479. trigger: 'axis'
  480. },
  481. legend: {},
  482. toolbox: {
  483. show: true,
  484. feature: {
  485. dataZoom: {
  486. yAxisIndex: 'none'
  487. },
  488. dataView: { readOnly: false },
  489. magicType: { type: ['line', 'bar'] },
  490. restore: {},
  491. saveAsImage: {}
  492. }
  493. },
  494. xAxis: {
  495. type: 'category',
  496. boundaryGap: false,
  497. data: T_time, //['1', '2', '3', '4', '5', '6', '7'],
  498. },
  499. yAxis: {
  500. type: 'value',
  501. axisLabel: {
  502. formatter: '{value} °C'
  503. },
  504. max:T_max,
  505. min:T_min,
  506. },
  507. dataZoom:[{
  508. type: 'slider',//图表下方的伸缩条
  509. show : true, //是否显示
  510. realtime : true, //拖动时,是否实时更新系列的视图
  511. start : dataZoomstart, //伸缩条开始位置(1-100),可以随时更改
  512. end : 100, //伸缩条结束位置(1-100),可以随时更改
  513. }],
  514. series: [
  515. {
  516. // name: '温度',
  517. type: 'line',
  518. data: T_data, //[1, -2, -1, 5, 3, 2, 0],
  519. markPoint: {
  520. data: T_waring,
  521. // [
  522. // { name: '周最低', value: -2, xAxis: 1, yAxis: -1.5 }
  523. // ,{ name: '周最低', value: -1, xAxis: 2, yAxis: -1 }
  524. // ]
  525. },
  526. markLine: {
  527. data: [
  528. {
  529. silent:true, //鼠标悬停事件 true没有,false有
  530. lineStyle:{ //警戒线的样式 ,虚实 颜色
  531. type:"solid",
  532. color:"#FF4200",
  533. width: 3,
  534. },
  535. label:{
  536. position:'end',
  537. formatter:"下限("+T_Tlower+"℃)"
  538. },
  539. yAxis:T_Tlower
  540. },
  541. {
  542. silent:true, //鼠标悬停事件 true没有,false有
  543. lineStyle:{ //警戒线的样式 ,虚实 颜色
  544. type:"solid",
  545. color:"#FF4200",
  546. width: 3,
  547. },
  548. label:{
  549. position:'end',
  550. formatter:"上限("+T_Tupper+"℃)"
  551. },
  552. yAxis:T_Tupper
  553. }
  554. ]
  555. }
  556. },
  557. ]
  558. };
  559. T_myChart.setOption(T_option);
  560. H_option = {
  561. title: {
  562. text: "湿度:" + $("#Time_start").val() + '~' + $("#Time_end").val(),
  563. textStyle:{
  564. fontSize:14,
  565. }
  566. },
  567. tooltip: {
  568. trigger: 'axis'
  569. },
  570. legend: {},
  571. toolbox: {
  572. show: true,
  573. feature: {
  574. dataZoom: {
  575. yAxisIndex: 'none'
  576. },
  577. dataView: { readOnly: false },
  578. magicType: { type: ['line', 'bar'] },
  579. restore: {},
  580. saveAsImage: {}
  581. }
  582. },
  583. xAxis: {
  584. type: 'category',
  585. boundaryGap: false,
  586. data: H_time, //['1', '2', '3', '4', '5', '6', '7'],
  587. },
  588. yAxis: {
  589. type: 'value',
  590. axisLabel: {
  591. formatter: '{value} °%'
  592. },
  593. max:H_max,
  594. min:H_min,
  595. },
  596. dataZoom:[{
  597. type: 'slider',//图表下方的伸缩条
  598. show : true, //是否显示
  599. realtime : true, //拖动时,是否实时更新系列的视图
  600. start : dataZoomstart, //伸缩条开始位置(1-100),可以随时更改
  601. end : 100, //伸缩条结束位置(1-100),可以随时更改
  602. }],
  603. series: [
  604. {
  605. // name: '湿度',
  606. type: 'line',
  607. data: H_data, //[1, -2, -1, 5, 3, 2, 0],
  608. markPoint: {
  609. data: H_waring,
  610. // [
  611. // { name: '周最低', value: -2, xAxis: 1, yAxis: -1.5 }
  612. // ,{ name: '周最低', value: -1, xAxis: 2, yAxis: -1 }
  613. // ]
  614. },
  615. markLine: {
  616. data: [
  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:"下限("+H_Tlower+"%)"
  627. },
  628. yAxis:H_Tlower
  629. },
  630. {
  631. silent:true, //鼠标悬停事件 true没有,false有
  632. lineStyle:{ //警戒线的样式 ,虚实 颜色
  633. type:"solid",
  634. color:"#FF4200",
  635. width: 3,
  636. },
  637. label:{
  638. position:'end',
  639. formatter:"上限("+H_Tupper+"%)",
  640. },
  641. yAxis:H_Tupper
  642. }
  643. ]
  644. }
  645. }
  646. ]
  647. };
  648. H_myChart.setOption(H_option);
  649. }
  650. </script>
  651. </html>