sensor_chart_CI.html 16 KB

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