sensor_chart_R.html 16 KB

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