DataLine_.html 29 KB

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