sensor_chart_DI.html 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439
  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. <!--
  41. <a href="/dry">返回乾燥槽介面</a>
  42. <div style="text-align: center; margin-top:0px; font-size: 24px;">
  43. Smart Coffee
  44. </div>
  45. -->
  46. <!--
  47. <form action="/chart/SHT11_Temp/{{tid}}" method="post">
  48. <div class="form-group" style="margin-top: 30px; text-align: center;">
  49. -->
  50. <table style="margin: auto; border:3px gray solid; width: 80%; text-align: center;" cellpadding="6" rules='ALL'>
  51. <tr>
  52. <td>
  53. {% if tid == '2'%}
  54. <select id="tank_num">
  55. <option value="DI1">乾燥入料儲豆槽_1</option>
  56. <option value="DI2" selected>乾燥入料儲豆槽_2</option>
  57. </select>
  58. {% else %}
  59. <select id="tank_num">
  60. <option value="DI1" selected>乾燥入料儲豆槽_1</option>
  61. <option value="DI2">乾燥入料儲豆槽_2</option>
  62. </select>
  63. {% endif %}
  64. <select id="sensors">
  65. <option value="UltraSonic">乾燥入料儲豆槽咖啡生豆高度</option>
  66. </select>
  67. </td>
  68. </tr>
  69. <tr>
  70. <td>
  71. 時間間隔:
  72. <select name="time-interval" class="text-right">
  73. <option value="month">逐月</option>
  74. <option value="day">逐日</option>
  75. <option value="hour">逐時</option>
  76. </select>
  77. &nbsp;
  78. <!--
  79. 從&nbsp;
  80. <input type="datetime-local" name="sensor_starttime" id="sensor_starttime" value={{starttime}}>
  81. &nbsp;到&nbsp;
  82. <input type="datetime-local" name="sensor_endtime" id="sensor_endtime" value={{endtime}}>
  83. &nbsp;為止
  84. -->
  85. <span>從</span>
  86. <label for="querydate-start"></label><input id="querydate-start" type="date">
  87. <span>到</span>
  88. <label for="querydate-end"></label><input id="querydate-end" type="date">
  89. <span>為止</span>
  90. </td>
  91. </tr>
  92. <tr>
  93. <td>
  94. 資料類型:
  95. <label><input type="checkbox" name="data-type" value="max">最大值</label>
  96. <label><input type="checkbox" name="data-type" value="avg">平均值</label>
  97. <label><input type="checkbox" name="data-type" value="min">最小值</label>
  98. <br>
  99. </td>
  100. </tr>
  101. <tr>
  102. <td>
  103. <!--
  104. <button type="submit" name="charting">繪製圖表</button>
  105. <button type="submit" onclick="" id="btn_save_chart" style="display: none;">儲存圖表</button>
  106. -->
  107. <input type="button" value="查詢" onclick="ShowInfo()">
  108. <input type="button" value="匯出" onclick="downloadFile()">
  109. <input type="button" value="刪除" onclick="">
  110. <script>
  111. function ShowInfo() {
  112. // 取得桶號、感測器名稱
  113. tid = document.getElementById("tank_num").value
  114. console.log('tid: ' + tid)
  115. sensor_name = document.getElementById("sensors").value
  116. console.log('sensor_name: ' + sensor_name)
  117. // 數據整理
  118. Echart(sensor_name, tid)
  119. // 顯示圖表
  120. };
  121. function downloadFile() {
  122. tid = document.getElementById("tank_num").value
  123. sensor_name = document.getElementById("sensors").value
  124. //藉型別陣列建構的 blob 來建立 URL
  125. let fileName = "ChartData_" + tid + "_" + sensor_name + ".csv";
  126. //"\ufeff"解決打開CSV中文亂碼問題
  127. const data = "\ufeff" + getData();
  128. let blob = new Blob([data], {
  129. type: 'text/csv,charset=UTF-8'
  130. });
  131. var href = URL.createObjectURL(blob);
  132. // 從 Blob 取出資料
  133. var link = document.createElement("a");
  134. document.body.appendChild(link);
  135. link.href = href;
  136. link.download = fileName;
  137. link.click();
  138. };
  139. //所有資料函數
  140. function getData() {
  141. var header = "日期," + data_name + "\n";
  142. var data = "";
  143. var length = all_datetime.length;
  144. for (var i = 0; i < length; i++) {
  145. data = data + all_datetime[i] + ',' + all_data[i] + '\n';
  146. };
  147. return header + data;
  148. };
  149. //最大最小平均資料函數
  150. function getData() {
  151. var header = data_name + "\n日期,";
  152. if (max_data) {
  153. console.log(max_data);
  154. header = header + "最大值,";
  155. };
  156. if (avg_data) {
  157. header = header + "平均值,";
  158. };
  159. if (min_data) {
  160. header = header + "最小值,";
  161. };
  162. header = header + "\n";
  163. var data = "";
  164. var length = xAxis_data.length;
  165. for (var i = 0; i < length; i++) {
  166. data = data + xAxis_data[i] + ',';
  167. if (max_data) {
  168. data = data + max_data[i] + ',';
  169. };
  170. if (avg_data) {
  171. data = data + avg_data[i] + ',';
  172. };
  173. if (min_data) {
  174. data = data + min_data[i] + ',';
  175. };
  176. data = data + '\n';
  177. };
  178. return header + data;
  179. };
  180. </script>
  181. </td>
  182. </tr>
  183. <tr>
  184. <td>
  185. <!--
  186. <img src={{ url }}>
  187. -->
  188. <div id="" class="show-info" style="text-align: center;">
  189. <center>
  190. <div class="show-chart" style="height: 420px; width: 100%; text-align: center;">
  191. 圖表
  192. </div>
  193. </center>
  194. </div>
  195. </td>
  196. </tr>
  197. </table>
  198. <div id="coffee_footer">
  199. <!-- 匯入共同使用的 footer.html 內容 -->
  200. {% include 'footer.html' %}
  201. </div>
  202. </div>
  203. </body>
  204. <script>
  205. var all_datetime = 0; // 所有資料時間 ?
  206. var all_data = 0; // 所有感測器數據 ?
  207. var data_name = 0; // 感測器名稱 // "溫溼度"
  208. var xAxis_data = 0; // x 軸資料
  209. var max_data = 0; //
  210. var min_data = 0; //
  211. var avg_data = 0; //
  212. function Echart(sensor_name, tid) {
  213. // Echart(sensor_name, tid)
  214. //將echarts圖形銷毀
  215. $(".show-chart").removeAttr("_echarts_instance_").empty();
  216. // Rita:sensor 與 data_name 重複
  217. // var sensor = evt.substring(2);
  218. if (!$("input[value=avg]").prop('checked') && !$("input[value=min]").prop('checked') && !$("input[value=max]").prop('checked')) {
  219. alert("請至少選擇一種資料類型!");
  220. return false;
  221. };
  222. if ($("#querydate-start").val() == '' || $("#querydate-end").val() == '') {
  223. alert("請選擇日期範圍!");
  224. return false;
  225. };
  226. //基於準備好的dom,初始化echarts例項
  227. var myChart = echarts.init(document.getElementsByClassName('show-chart')[0]); // class="col-10 show-chart"
  228. var date_start = $("#querydate-start").val();
  229. var date_end = $("#querydate-end").val();
  230. var avg = 0;
  231. var max = 0;
  232. var min = 0;
  233. var time_interval = $("select[name=time-interval]").val();
  234. var legend = new Array();
  235. var color = new Array();
  236. var series = new Array();
  237. if ($("input[value=max]").prop('checked')) {
  238. max = 1;
  239. legend.push("最大值");
  240. color.push("#1e88e5"); // 水藍色
  241. };
  242. if ($("input[value=avg]").prop('checked')) {
  243. avg = 1;
  244. legend.push("平均值");
  245. color.push("#43a047"); // 草綠色
  246. };
  247. if ($("input[value=min]").prop('checked')) {
  248. min = 1;
  249. legend.push("最小值");
  250. color.push("#e64a19"); // 橘紅色
  251. };
  252. var json = {
  253. 'tid': tid,
  254. 'sensor_name': sensor_name,
  255. 'avg': avg,
  256. 'max': max,
  257. 'min': min,
  258. 'time-interval': time_interval,
  259. 'date-start': date_start,
  260. 'date-end': date_end
  261. };
  262. console.log('json___' +
  263. 'tid: ' + tid +
  264. 'sensor_name: ' + sensor_name +
  265. 'avg: ' + avg +
  266. 'max: ' + max +
  267. 'min: ' + min +
  268. 'time-interval: ' + time_interval +
  269. 'date-start: ' + date_start +
  270. 'date-end: ' + date_end
  271. )
  272. $.get('/history_data_new', json, function (resText) {
  273. if (resText.max) {
  274. var max_series = {
  275. 'name': '最大值',
  276. 'type': 'scatter',
  277. 'data': resText.max.map(function (item) { return item[1]; }),
  278. 'itemStyle': { 'normal': { 'lineStyle': { 'color': '#1e88e5' } } },
  279. };
  280. series.push(max_series); // 把上面的 dict 加入 series array 內
  281. xAxis_data = resText.max.map(function (item) { return item[0]; });
  282. max_data = resText.max.map(function (item) { return item[1]; });
  283. };
  284. if (resText.avg) {
  285. var avg_series = { 'name': '平均值', 'type': 'scatter', 'data': resText.avg.map(function (item) { return item[1]; }), 'itemStyle': { 'normal': { 'lineStyle': { 'color': '#43a047' } } }, };
  286. series.push(avg_series);
  287. xAxis_data = resText.avg.map(function (item) { return item[0]; });
  288. 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
  289. avg_data = resText.avg.map(function (item) { return item[1]; });
  290. console.log('avg_data: ' + avg_data) // 91.0,98.0,11.0,15.2,30.5
  291. };
  292. if (resText.min) {
  293. var min_series = { 'name': '最小值', 'type': 'scatter', 'data': resText.min.map(function (item) { return item[1]; }), 'itemStyle': { 'normal': { 'lineStyle': { 'color': '#e64a19' } } }, };
  294. series.push(min_series);
  295. xAxis_data = resText.min.map(function (item) { return item[0]; }); // all
  296. min_data = resText.min.map(function (item) { return item[1]; }); // min
  297. };
  298. //獲取日期內所有數據
  299. all_datetime = resText.all.map(function (item) { return item[0]; }); // all
  300. all_data = resText.all.map(function (item) { return item[1]; });
  301. //指定圖表的配置項和資料
  302. option = {
  303. title: {
  304. text: '', // 'Data History'
  305. left: '1%'
  306. },
  307. tooltip: {
  308. trigger: 'axis'
  309. },
  310. color: color,
  311. legend: {
  312. data: legend,
  313. },
  314. xAxis: {
  315. data: xAxis_data,
  316. },
  317. yAxis: {
  318. splitLine: {
  319. show: true,
  320. lineStyle: {
  321. color: ''
  322. }
  323. }
  324. },
  325. toolbox: {
  326. show: true,
  327. feature: {
  328. dataZoom: {
  329. yAxisIndex: 'none'
  330. },
  331. dataView: { readOnly: false },
  332. magicType: { type: ['line', 'bar'] },
  333. restore: {},
  334. saveAsImage: {}
  335. }
  336. },
  337. dataZoom: [{
  338. startValue: '2021-01-01'
  339. }, {
  340. type: 'inside'
  341. }],
  342. series: series,
  343. /*
  344. series: [
  345. {
  346. name: '最大值',
  347. type: 'line',
  348. data: resText.max.map(function (item) {
  349. return item[1];
  350. }),
  351. itemStyle: {
  352. normal: {
  353. lineStyle: {
  354. color: '#1e88e5'
  355. }
  356. }
  357. },
  358. },
  359. {
  360. name: '平均值',
  361. type: 'line',
  362. data: [20.0, 20.0, 20.0, 20.0, 20.0, 20.0],
  363. itemStyle: {
  364. normal: {
  365. lineStyle: {
  366. color: '#43a047'
  367. }
  368. }
  369. },
  370. },
  371. {
  372. name: '最小值',
  373. type: 'line',
  374. data: [15.0, 15.0, 15.0, 15.0, 15.0, 15.0],
  375. itemStyle: {
  376. normal: {
  377. lineStyle: {
  378. color: '#e64a19'
  379. }
  380. }
  381. }
  382. },
  383. ]
  384. */
  385. };
  386. console.log('SHOW myChart')
  387. //使用剛指定的配置項和資料顯示圖表
  388. myChart.setOption(option);
  389. }, 'json');
  390. } // Echart(sensor_name, tid)
  391. </script>
  392. </html>