sensor_chart_D.html 32 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>{{ title }}</title>
  6. <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  7. <!-- 新 Bootstrap4 核心 CSS 文件 -->
  8. <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css">
  9. <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
  10. <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  11. <!-- popper.min.js 用于弹窗、提示、下拉菜单 -->
  12. <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
  13. <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
  14. <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
  15. <!--
  16. <script src="../static/js/sign_in.js"></script>
  17. <link rel="stylesheet" href="../static/css/sign_in.css">
  18. -->
  19. <!--引入 echarts.js -->
  20. <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
  21. <script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js'></script>
  22. <script src='https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.js'></script>
  23. <script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-zoom/0.3.0/Chart.Zoom.min.js"></script>
  24. <script language="JavaScript">
  25. var tank = '{{tank}}';
  26. var sensor_name = '{{sensor_name}}';
  27. var tid = '{{tid}}';
  28. $(document).ready(function(){
  29. $("#coffee_title_pc").text(tank + tid + ' 乾燥槽感測器圖表');
  30. $("#coffee_title_phone").text(tank + tid + ' 感測器');
  31. });
  32. </script>
  33. </head>
  34. <body>
  35. <div id="wrapper">
  36. <div id="coffee_header">
  37. <!-- 匯入共同使用的 header.html 內容 -->
  38. {% include 'header.html' %}
  39. </div>
  40. <table style="margin: auto; border:3px gray solid; width: 80%; text-align: center;" cellpadding="6" rules='ALL'>
  41. <tr>
  42. <td>
  43. {% if tid == '2'%}
  44. <select id="tank_num">
  45. <option value="D1">乾燥槽_1</option>
  46. <option value="D2" selected>乾燥槽_2</option>
  47. <option value="D3">乾燥槽_3</option>
  48. <option value="D4">乾燥槽_4</option>
  49. <option value="D5">乾燥槽_5</option>
  50. <option value="D6">乾燥槽_6</option>
  51. <option value="D7">乾燥槽_7</option>
  52. <option value="D8">乾燥槽_8</option>
  53. <option value="D9">乾燥槽_9</option>
  54. <option value="D10">乾燥槽_10</option>
  55. <option value="D11">乾燥槽_11</option>
  56. <option value="D12">乾燥槽_12</option>
  57. </select>
  58. {% elif tid == '3'%}
  59. <select id="tank_num">
  60. <option value="D1">乾燥槽_1</option>
  61. <option value="D2">乾燥槽_2</option>
  62. <option value="D3" selected>乾燥槽_3</option>
  63. <option value="D4">乾燥槽_4</option>
  64. <option value="D5">乾燥槽_5</option>
  65. <option value="D6">乾燥槽_6</option>
  66. <option value="D7">乾燥槽_7</option>
  67. <option value="D8">乾燥槽_8</option>
  68. <option value="D9">乾燥槽_9</option>
  69. <option value="D10">乾燥槽_10</option>
  70. <option value="D11">乾燥槽_11</option>
  71. <option value="D12">乾燥槽_12</option>
  72. </select>
  73. {% elif tid == '4'%}
  74. <select id="tank_num">
  75. <option value="D1">乾燥槽_1</option>
  76. <option value="D2">乾燥槽_2</option>
  77. <option value="D3">乾燥槽_3</option>
  78. <option value="D4" selected>乾燥槽_4</option>
  79. <option value="D5">乾燥槽_5</option>
  80. <option value="D6">乾燥槽_6</option>
  81. <option value="D7">乾燥槽_7</option>
  82. <option value="D8">乾燥槽_8</option>
  83. <option value="D9">乾燥槽_9</option>
  84. <option value="D10">乾燥槽_10</option>
  85. <option value="D11">乾燥槽_11</option>
  86. <option value="D12">乾燥槽_12</option>
  87. </select>
  88. {% elif tid == '5'%}
  89. <select id="tank_num">
  90. <option value="D1">乾燥槽_1</option>
  91. <option value="D2">乾燥槽_2</option>
  92. <option value="D3">乾燥槽_3</option>
  93. <option value="D4">乾燥槽_4</option>
  94. <option value="D5" selected>乾燥槽_5</option>
  95. <option value="D6">乾燥槽_6</option>
  96. <option value="D7">乾燥槽_7</option>
  97. <option value="D8">乾燥槽_8</option>
  98. <option value="D9">乾燥槽_9</option>
  99. <option value="D10">乾燥槽_10</option>
  100. <option value="D11">乾燥槽_11</option>
  101. <option value="D12">乾燥槽_12</option>
  102. </select>
  103. {% elif tid == '6'%}
  104. <select id="tank_num">
  105. <option value="D1">乾燥槽_1</option>
  106. <option value="D2">乾燥槽_2</option>
  107. <option value="D3">乾燥槽_3</option>
  108. <option value="D4">乾燥槽_4</option>
  109. <option value="D5">乾燥槽_5</option>
  110. <option value="D6" selected>乾燥槽_6</option>
  111. <option value="D7">乾燥槽_7</option>
  112. <option value="D8">乾燥槽_8</option>
  113. <option value="D9">乾燥槽_9</option>
  114. <option value="D10">乾燥槽_10</option>
  115. <option value="D11">乾燥槽_11</option>
  116. <option value="D12">乾燥槽_12</option>
  117. </select>
  118. {% elif tid == '7'%}
  119. <select id="tank_num">
  120. <option value="D1">乾燥槽_1</option>
  121. <option value="D2">乾燥槽_2</option>
  122. <option value="D3">乾燥槽_3</option>
  123. <option value="D4">乾燥槽_4</option>
  124. <option value="D5">乾燥槽_5</option>
  125. <option value="D6">乾燥槽_6</option>
  126. <option value="D7" selected>乾燥槽_7</option>
  127. <option value="D8">乾燥槽_8</option>
  128. <option value="D9">乾燥槽_9</option>
  129. <option value="D10">乾燥槽_10</option>
  130. <option value="D11">乾燥槽_11</option>
  131. <option value="D12">乾燥槽_12</option>
  132. </select>
  133. {% elif tid == '8'%}
  134. <select id="tank_num">
  135. <option value="D1">乾燥槽_1</option>
  136. <option value="D2">乾燥槽_2</option>
  137. <option value="D3">乾燥槽_3</option>
  138. <option value="D4">乾燥槽_4</option>
  139. <option value="D5">乾燥槽_5</option>
  140. <option value="D6">乾燥槽_6</option>
  141. <option value="D7">乾燥槽_7</option>
  142. <option value="D8" selected>乾燥槽_8</option>
  143. <option value="D9">乾燥槽_9</option>
  144. <option value="D10">乾燥槽_10</option>
  145. <option value="D11">乾燥槽_11</option>
  146. <option value="D12">乾燥槽_12</option>
  147. </select>
  148. {% elif tid == '9'%}
  149. <select id="tank_num">
  150. <option value="D1">乾燥槽_1</option>
  151. <option value="D2">乾燥槽_2</option>
  152. <option value="D3">乾燥槽_3</option>
  153. <option value="D4">乾燥槽_4</option>
  154. <option value="D5">乾燥槽_5</option>
  155. <option value="D6">乾燥槽_6</option>
  156. <option value="D7">乾燥槽_7</option>
  157. <option value="D8">乾燥槽_8</option>
  158. <option value="D9" selected>乾燥槽_9</option>
  159. <option value="D10">乾燥槽_10</option>
  160. <option value="D11">乾燥槽_11</option>
  161. <option value="D12">乾燥槽_12</option>
  162. </select>
  163. {% elif tid == '10'%}
  164. <select id="tank_num">
  165. <option value="D1">乾燥槽_1</option>
  166. <option value="D2">乾燥槽_2</option>
  167. <option value="D3">乾燥槽_3</option>
  168. <option value="D4">乾燥槽_4</option>
  169. <option value="D5">乾燥槽_5</option>
  170. <option value="D6">乾燥槽_6</option>
  171. <option value="D7">乾燥槽_7</option>
  172. <option value="D8">乾燥槽_8</option>
  173. <option value="D9">乾燥槽_9</option>
  174. <option value="D10" selected>乾燥槽_10</option>
  175. <option value="D11">乾燥槽_11</option>
  176. <option value="D12">乾燥槽_12</option>
  177. </select>
  178. {% elif tid == '11'%}
  179. <select id="tank_num">
  180. <option value="D1">乾燥槽_1</option>
  181. <option value="D2">乾燥槽_2</option>
  182. <option value="D3">乾燥槽_3</option>
  183. <option value="D4">乾燥槽_4</option>
  184. <option value="D5">乾燥槽_5</option>
  185. <option value="D6">乾燥槽_6</option>
  186. <option value="D7">乾燥槽_7</option>
  187. <option value="D8">乾燥槽_8</option>
  188. <option value="D9">乾燥槽_9</option>
  189. <option value="D10">乾燥槽_10</option>
  190. <option value="D11" selected>乾燥槽_11</option>
  191. <option value="D12">乾燥槽_12</option>
  192. </select>
  193. {% elif tid == '12'%}
  194. <select id="tank_num">
  195. <option value="D1">乾燥槽_1</option>
  196. <option value="D2">乾燥槽_2</option>
  197. <option value="D3">乾燥槽_3</option>
  198. <option value="D4">乾燥槽_4</option>
  199. <option value="D5">乾燥槽_5</option>
  200. <option value="D6">乾燥槽_6</option>
  201. <option value="D7">乾燥槽_7</option>
  202. <option value="D8">乾燥槽_8</option>
  203. <option value="D9">乾燥槽_9</option>
  204. <option value="D10">乾燥槽_10</option>
  205. <option value="D11">乾燥槽_11</option>
  206. <option value="D12" selected>乾燥槽_12</option>
  207. </select>
  208. {% else %}
  209. <select id="tank_num">
  210. <option value="D1" selected>乾燥槽_1</option>
  211. <option value="D2">乾燥槽_2</option>
  212. <option value="D3">乾燥槽_3</option>
  213. <option value="D4">乾燥槽_4</option>
  214. <option value="D5">乾燥槽_5</option>
  215. <option value="D6">乾燥槽_6</option>
  216. <option value="D7">乾燥槽_7</option>
  217. <option value="D8">乾燥槽_8</option>
  218. <option value="D9">乾燥槽_9</option>
  219. <option value="D10">乾燥槽_10</option>
  220. <option value="D11">乾燥槽_11</option>
  221. <option value="D12">乾燥槽_12</option>
  222. </select>
  223. {% endif %}
  224. {% if sensor_name=='SHT11_Humidity' %}
  225. <select id="sensors">
  226. <option value="SHT11_Temp">乾燥槽桶內溫度</option>
  227. <option value="SHT11_Humidity" selected>乾燥槽桶內濕度</option>
  228. <option value="UltraSonic">乾燥槽桶內咖啡生豆高度</option>
  229. <option value="PA">乾燥槽桶內壓力</option>
  230. <option value="soil_Temp">乾燥槽咖啡生豆溫度</option>
  231. <option value="soil_Humidity">乾燥槽咖啡生豆濕度</option>
  232. <option value="soil_EC">乾燥槽咖啡生豆 EC</option>
  233. </select>
  234. {% elif sensor_name=='UltraSonic' %}
  235. <select id="sensors">
  236. <option value="SHT11_Temp">乾燥槽桶內溫度</option>
  237. <option value="SHT11_Humidity">乾燥槽桶內濕度</option>
  238. <option value="UltraSonic" selected>乾燥槽桶內咖啡生豆高度</option>
  239. <option value="PA">乾燥槽桶內壓力</option>
  240. <option value="soil_Temp">乾燥槽咖啡生豆溫度</option>
  241. <option value="soil_Humidity">乾燥槽咖啡生豆濕度</option>
  242. <option value="soil_EC">乾燥槽咖啡生豆 EC</option>
  243. </select>
  244. {% elif sensor_name=='PA' %}
  245. <select id="sensors">
  246. <option value="SHT11_Temp">乾燥槽桶內溫度</option>
  247. <option value="SHT11_Humidity">乾燥槽桶內濕度</option>
  248. <option value="UltraSonic">乾燥槽桶內咖啡生豆高度</option>
  249. <option value="PA" selected>乾燥槽桶內壓力</option>
  250. <option value="soil_Temp">乾燥槽咖啡生豆溫度</option>
  251. <option value="soil_Humidity">乾燥槽咖啡生豆濕度</option>
  252. <option value="soil_EC">乾燥槽咖啡生豆 EC</option>
  253. </select>
  254. {% elif sensor_name=='soil_Temp' %}
  255. <select id="sensors">
  256. <option value="SHT11_Temp">乾燥槽桶內溫度</option>
  257. <option value="SHT11_Humidity">乾燥槽桶內濕度</option>
  258. <option value="UltraSonic">乾燥槽桶內咖啡生豆高度</option>
  259. <option value="PA">乾燥槽桶內壓力</option>
  260. <option value="soil_Temp" selected>乾燥槽咖啡生豆溫度</option>
  261. <option value="soil_Humidity">乾燥槽咖啡生豆濕度</option>
  262. <option value="soil_EC">乾燥槽咖啡生豆 EC</option>
  263. </select>
  264. {% elif sensor_name=='soil_Humidity' %}
  265. <select id="sensors">
  266. <option value="SHT11_Temp">乾燥槽桶內溫度</option>
  267. <option value="SHT11_Humidity">乾燥槽桶內濕度</option>
  268. <option value="UltraSonic">乾燥槽桶內咖啡生豆高度</option>
  269. <option value="PA">乾燥槽桶內壓力</option>
  270. <option value="soil_Temp">乾燥槽咖啡生豆溫度</option>
  271. <option value="soil_Humidity" selected>乾燥槽咖啡生豆濕度</option>
  272. <option value="soil_EC">乾燥槽咖啡生豆 EC</option>
  273. </select>
  274. {% elif sensor_name=='soil_EC' %}
  275. <select id="sensors">
  276. <option value="SHT11_Temp">乾燥槽桶內溫度</option>
  277. <option value="SHT11_Humidity">乾燥槽桶內濕度</option>
  278. <option value="UltraSonic">乾燥槽桶內咖啡生豆高度</option>
  279. <option value="PA">乾燥槽桶內壓力</option>
  280. <option value="soil_Temp">乾燥槽咖啡生豆溫度</option>
  281. <option value="soil_Humidity">乾燥槽咖啡生豆濕度</option>
  282. <option value="soil_EC" selected>乾燥槽咖啡生豆 EC</option>
  283. </select>
  284. {% else %}
  285. <select id="sensors">
  286. <option value="SHT11_Temp" selected>乾燥槽桶內溫度</option>
  287. <option value="SHT11_Humidity">乾燥槽桶內濕度</option>
  288. <option value="UltraSonic">乾燥槽桶內咖啡生豆高度</option>
  289. <option value="PA">乾燥槽桶內壓力</option>
  290. <option value="soil_Temp">乾燥槽咖啡生豆溫度</option>
  291. <option value="soil_Humidity">乾燥槽咖啡生豆濕度</option>
  292. <option value="soil_EC">乾燥槽咖啡生豆 EC</option>
  293. </select>
  294. {% endif %}
  295. </td>
  296. </tr>
  297. <tr>
  298. <td>
  299. 時間間隔:
  300. <select name="time-interval" class="text-right">
  301. <option value="month">逐月</option>
  302. <option value="day">逐日</option>
  303. <option value="hour">逐時</option>
  304. </select>
  305. &nbsp;
  306. <!--
  307. 從&nbsp;
  308. <input type="datetime-local" name="sensor_starttime" id="sensor_starttime" value={{starttime}}>
  309. &nbsp;到&nbsp;
  310. <input type="datetime-local" name="sensor_endtime" id="sensor_endtime" value={{endtime}}>
  311. &nbsp;為止
  312. -->
  313. <span>從</span>
  314. <label for="querydate-start"></label><input id="querydate-start" type="date">
  315. <span>到</span>
  316. <label for="querydate-end"></label><input id="querydate-end" type="date">
  317. <span>為止</span>
  318. </td>
  319. </tr>
  320. <tr>
  321. <td>
  322. 資料類型:
  323. <label><input type="checkbox" name="data-type" value="max">最大值</label>
  324. <label><input type="checkbox" name="data-type" value="avg">平均值</label>
  325. <label><input type="checkbox" name="data-type" value="min">最小值</label>
  326. <br>
  327. </td>
  328. </tr>
  329. <tr>
  330. <td>
  331. <!--
  332. <button type="submit" name="charting">繪製圖表</button>
  333. <button type="submit" onclick="" id="btn_save_chart" style="display: none;">儲存圖表</button>
  334. -->
  335. <input type="button" value="查詢" onclick="ShowInfo()">
  336. <input type="button" value="匯出" onclick="downloadFile()">
  337. <input type="button" value="刪除" onclick="">
  338. <script>
  339. function ShowInfo() {
  340. // 取得桶號、感測器名稱
  341. tid = document.getElementById("tank_num").value
  342. console.log('tid: ' + tid)
  343. sensor_name = document.getElementById("sensors").value
  344. console.log('sensor_name: ' + sensor_name)
  345. // 數據整理
  346. Echart(sensor_name, tid)
  347. // 顯示圖表
  348. };
  349. function downloadFile() {
  350. tid = document.getElementById("tank_num").value
  351. sensor_name = document.getElementById("sensors").value
  352. //藉型別陣列建構的 blob 來建立 URL
  353. let fileName = "ChartData_" + tid + "_" + sensor_name + ".csv";
  354. //"\ufeff"解決打開CSV中文亂碼問題
  355. const data = "\ufeff" + getData();
  356. let blob = new Blob([data], {
  357. type: 'text/csv,charset=UTF-8'
  358. });
  359. var href = URL.createObjectURL(blob);
  360. // 從 Blob 取出資料
  361. var link = document.createElement("a");
  362. document.body.appendChild(link);
  363. link.href = href;
  364. link.download = fileName;
  365. link.click();
  366. };
  367. //所有資料函數
  368. function getData() {
  369. var header = "日期," + data_name + "\n";
  370. var data = "";
  371. var length = all_datetime.length;
  372. for (var i = 0; i < length; i++) {
  373. data = data + all_datetime[i] + ',' + all_data[i] + '\n';
  374. };
  375. return header + data;
  376. };
  377. //最大最小平均資料函數
  378. function getData() {
  379. var header = data_name + "\n日期,";
  380. if (max_data) {
  381. console.log(max_data);
  382. header = header + "最大值,";
  383. };
  384. if (avg_data) {
  385. header = header + "平均值,";
  386. };
  387. if (min_data) {
  388. header = header + "最小值,";
  389. };
  390. header = header + "\n";
  391. var data = "";
  392. var length = xAxis_data.length;
  393. for (var i = 0; i < length; i++) {
  394. data = data + xAxis_data[i] + ',';
  395. if (max_data) {
  396. data = data + max_data[i] + ',';
  397. };
  398. if (avg_data) {
  399. data = data + avg_data[i] + ',';
  400. };
  401. if (min_data) {
  402. data = data + min_data[i] + ',';
  403. };
  404. data = data + '\n';
  405. };
  406. return header + data;
  407. };
  408. </script>
  409. </td>
  410. </tr>
  411. <tr>
  412. <td>
  413. <!--
  414. <img src={{ url }}>
  415. -->
  416. <div id="" class="show-info" style="text-align: center;">
  417. <center>
  418. <div class="show-chart" style="height: 420px; width: 100%; text-align: center;">
  419. 圖表
  420. </div>
  421. </center>
  422. </div>
  423. </td>
  424. </tr>
  425. </table>
  426. <div id="coffee_footer">
  427. <!-- 匯入共同使用的 footer.html 內容 -->
  428. {% include 'footer.html' %}
  429. </div>
  430. </div>
  431. </body>
  432. <script>
  433. var all_datetime = 0; // 所有資料時間 ?
  434. var all_data = 0; // 所有感測器數據 ?
  435. var data_name = 0; // 感測器名稱 // "溫溼度"
  436. var xAxis_data = 0; // x 軸資料
  437. var max_data = 0; //
  438. var min_data = 0; //
  439. var avg_data = 0; //
  440. function Echart(sensor_name, tid) {
  441. // Echart(sensor_name, tid)
  442. //將echarts圖形銷毀
  443. $(".show-chart").removeAttr("_echarts_instance_").empty();
  444. // Rita:sensor 與 data_name 重複
  445. // var sensor = evt.substring(2);
  446. if (!$("input[value=avg]").prop('checked') && !$("input[value=min]").prop('checked') && !$("input[value=max]").prop('checked')) {
  447. alert("請至少選擇一種資料類型!");
  448. return false;
  449. };
  450. if ($("#querydate-start").val() == '' || $("#querydate-end").val() == '') {
  451. alert("請選擇日期範圍!");
  452. return false;
  453. };
  454. //基於準備好的dom,初始化echarts例項
  455. var myChart = echarts.init(document.getElementsByClassName('show-chart')[0]); // class="col-10 show-chart"
  456. var date_start = $("#querydate-start").val();
  457. var date_end = $("#querydate-end").val();
  458. var avg = 0;
  459. var max = 0;
  460. var min = 0;
  461. var time_interval = $("select[name=time-interval]").val();
  462. var legend = new Array();
  463. var color = new Array();
  464. var series = new Array();
  465. if ($("input[value=max]").prop('checked')) {
  466. max = 1;
  467. legend.push("最大值");
  468. color.push("#1e88e5"); // 水藍色
  469. };
  470. if ($("input[value=avg]").prop('checked')) {
  471. avg = 1;
  472. legend.push("平均值");
  473. color.push("#43a047"); // 草綠色
  474. };
  475. if ($("input[value=min]").prop('checked')) {
  476. min = 1;
  477. legend.push("最小值");
  478. color.push("#e64a19"); // 橘紅色
  479. };
  480. var json = {
  481. 'tid': tid,
  482. 'sensor_name': sensor_name,
  483. 'avg': avg,
  484. 'max': max,
  485. 'min': min,
  486. 'time-interval': time_interval,
  487. 'date-start': date_start,
  488. 'date-end': date_end
  489. };
  490. console.log('json___' +
  491. 'tid: ' + tid +
  492. 'sensor_name: ' + sensor_name +
  493. 'avg: ' + avg +
  494. 'max: ' + max +
  495. 'min: ' + min +
  496. 'time-interval: ' + time_interval +
  497. 'date-start: ' + date_start +
  498. 'date-end: ' + date_end
  499. )
  500. $.get('/history_data_new', json, function (resText) {
  501. if (resText.max) {
  502. var max_series = {
  503. 'name': '最大值',
  504. 'type': 'scatter',
  505. 'data': resText.max.map(function (item) { return item[1]; }),
  506. 'itemStyle': { 'normal': { 'lineStyle': { 'color': '#1e88e5' } } },
  507. };
  508. series.push(max_series); // 把上面的 dict 加入 series array 內
  509. xAxis_data = resText.max.map(function (item) { return item[0]; });
  510. max_data = resText.max.map(function (item) { return item[1]; });
  511. };
  512. if (resText.avg) {
  513. var avg_series = { 'name': '平均值', 'type': 'scatter', 'data': resText.avg.map(function (item) { return item[1]; }), 'itemStyle': { 'normal': { 'lineStyle': { 'color': '#43a047' } } }, };
  514. series.push(avg_series);
  515. xAxis_data = resText.avg.map(function (item) { return item[0]; });
  516. console.log('xAxis_data' + xAxis_data) // 2021-07-09 10:00:00,2021-07-20 09:00:00,2021-07-22 15:00:00,2021-07-26 15:00:00,2021-07-26 16:00:00
  517. avg_data = resText.avg.map(function (item) { return item[1]; });
  518. console.log('avg_data' + avg_data) // 91.0,98.0,11.0,15.2,30.5
  519. };
  520. if (resText.min) {
  521. var min_series = { 'name': '最小值', 'type': 'scatter', 'data': resText.min.map(function (item) { return item[1]; }), 'itemStyle': { 'normal': { 'lineStyle': { 'color': '#e64a19' } } }, };
  522. series.push(min_series);
  523. xAxis_data = resText.min.map(function (item) { return item[0]; }); // all
  524. min_data = resText.min.map(function (item) { return item[1]; }); // min
  525. };
  526. //獲取日期內所有數據
  527. all_datetime = resText.all.map(function (item) { return item[0]; }); // all
  528. all_data = resText.all.map(function (item) { return item[1]; });
  529. //指定圖表的配置項和資料
  530. option = {
  531. title: {
  532. text: '', // 'Data History'
  533. left: '1%'
  534. },
  535. tooltip: {
  536. trigger: 'axis'
  537. },
  538. color: color,
  539. legend: {
  540. data: legend,
  541. },
  542. xAxis: {
  543. data: xAxis_data,
  544. },
  545. yAxis: {
  546. splitLine: {
  547. show: true,
  548. lineStyle: {
  549. color: ''
  550. }
  551. }
  552. },
  553. toolbox: {
  554. show: true,
  555. feature: {
  556. dataZoom: {
  557. yAxisIndex: 'none'
  558. },
  559. dataView: { readOnly: false },
  560. magicType: { type: ['line', 'bar'] },
  561. restore: {},
  562. saveAsImage: {}
  563. }
  564. },
  565. dataZoom: [{
  566. startValue: '2021-01-01'
  567. }, {
  568. type: 'inside'
  569. }],
  570. series: series,
  571. /*
  572. series: [
  573. {
  574. name: '最大值',
  575. type: 'line',
  576. data: resText.max.map(function (item) {
  577. return item[1];
  578. }),
  579. itemStyle: {
  580. normal: {
  581. lineStyle: {
  582. color: '#1e88e5'
  583. }
  584. }
  585. },
  586. },
  587. {
  588. name: '平均值',
  589. type: 'line',
  590. data: [20.0, 20.0, 20.0, 20.0, 20.0, 20.0],
  591. itemStyle: {
  592. normal: {
  593. lineStyle: {
  594. color: '#43a047'
  595. }
  596. }
  597. },
  598. },
  599. {
  600. name: '最小值',
  601. type: 'line',
  602. data: [15.0, 15.0, 15.0, 15.0, 15.0, 15.0],
  603. itemStyle: {
  604. normal: {
  605. lineStyle: {
  606. color: '#e64a19'
  607. }
  608. }
  609. }
  610. },
  611. ]
  612. */
  613. };
  614. console.log('SHOW myChart')
  615. //使用剛指定的配置項和資料顯示圖表
  616. myChart.setOption(option);
  617. }, 'json');
  618. } // Echart(sensor_name, tid)
  619. </script>
  620. </html>