dry_container_schedule_0911.html 27 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634
  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. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  17. <style>
  18. body {
  19. margin: 0;
  20. }
  21. .navbar-dark .navbar-nav .nav-link {
  22. color: white;
  23. cursor: pointer;
  24. text-decoration: none;
  25. width: 110px;
  26. height: 46px;
  27. }
  28. .nav-top {
  29. line-height: 40px;
  30. background-color: #C4C4C4;
  31. }
  32. .website_title {
  33. font-family: Roboto;
  34. font-style: normal;
  35. font-weight: normal;
  36. font-size: 30px;
  37. color: #000000;
  38. }
  39. .navbar-nav>li {
  40. float: none;
  41. display: inline-block;
  42. width: 100px;
  43. margin: 0 auto;
  44. text-align: center;
  45. }
  46. .navbar-nav>li a {
  47. font-size: 20px;
  48. }
  49. .main-page {
  50. margin-top: 200px;
  51. }
  52. .page-title {
  53. font-family: Roboto;
  54. font-style: normal;
  55. font-weight: bold;
  56. font-size: 36px;
  57. }
  58. .flex {
  59. display: flex;
  60. flex-direction: row;
  61. flex-wrap: wrap;
  62. justify-content: center;
  63. }
  64. .set-link {
  65. display: inline-block;
  66. width: 350px;
  67. height: 100px;
  68. line-height: 100px;
  69. background: #008CBA;
  70. border: 1px solid #CFCFCF;
  71. box-sizing: border-box;
  72. color: #FFFFFF;
  73. border-radius: 10px;
  74. font-size: 36px;
  75. }
  76. .cmn-toggle {
  77. position: absolute;
  78. margin-left: 0px;
  79. visibility: hidden;
  80. }
  81. .cmn-toggle+label {
  82. display: block;
  83. position: relative;
  84. cursor: pointer;
  85. outline: none;
  86. user-select: none;
  87. }
  88. input.cmn-toggle-round-flat+label {
  89. padding: 2px;
  90. width: 60px;
  91. height: 30px;
  92. background-color: #C0C0C0;
  93. border-radius: 60px;
  94. transition: background 0.4s;
  95. }
  96. input.cmn-toggle-round-flat+label:before,
  97. input.cmn-toggle-round-flat+label:after {
  98. display: block;
  99. position: absolute;
  100. content: "";
  101. }
  102. input.cmn-toggle-round-flat+label:before {
  103. top: 2px;
  104. left: 2px;
  105. bottom: 2px;
  106. right: 2px;
  107. background-color: #fff;
  108. border-radius: 60px;
  109. transition: background 0.4s;
  110. }
  111. input.cmn-toggle-round-flat+label:after {
  112. top: 4px;
  113. left: 4px;
  114. bottom: 4px;
  115. width: 24px;
  116. background-color: #dddddd;
  117. border-radius: 52px;
  118. transition: margin 0.4s, background 0.4s;
  119. }
  120. input.cmn-toggle-round-flat:checked+label {
  121. background-color: #C0C0C0;
  122. }
  123. input.cmn-toggle-round-flat:checked+label:after {
  124. margin-left: 27px;
  125. background-color: #008CBA;
  126. }
  127. @media(max-width:373px) {
  128. .card {
  129. margin-right: 0px;
  130. }
  131. .set-link {
  132. width: 250px;
  133. }
  134. }
  135. @media(max-width:577px) {}
  136. @media(min-width:576px) {}
  137. @media(min-width:768px) {
  138. .navbar-nav>li {
  139. margin-left: 0px;
  140. }
  141. .navbar-nav .li-block {
  142. display: none;
  143. }
  144. }
  145. @media(min-width:991px) {
  146. .navbar-nav>li {
  147. margin-left: 20px;
  148. }
  149. .navbar-nav .li-block {
  150. display: none;
  151. }
  152. }
  153. @media(min-width:1200px) {
  154. .navbar-nav>li {
  155. margin-left: 50px;
  156. }
  157. .navbar-nav .li-block {
  158. display: inline-block;
  159. width: 100px;
  160. }
  161. }
  162. @media(min-width:1400px) {
  163. .navbar-nav .li-block {
  164. display: inline-block;
  165. width: 200px;
  166. }
  167. }
  168. @media(min-width:1689px) {
  169. .navbar-nav>li {
  170. margin-left: 50px;
  171. }
  172. .navbar-nav .li-block {
  173. display: inline-block;
  174. width: 500px;
  175. }
  176. }
  177. </style>
  178. </head>
  179. <body>
  180. <h6>感測器數值</h6>
  181. 入料儲豆槽液位計高度(cm):!測試時請用生豆高度!{{input_UltraSonic.UltraSonic}}
  182. <div id="input_UltraSonic" d={{input_UltraSonic.UltraSonic}} style="display:none"></div>
  183. <br>
  184. 設定空桶高度應低於 10
  185. <br>
  186. 乾燥槽液位計高度(cm):!測試時請用生豆高度!{{tank_UltraSonic.UltraSonic}}
  187. <div id="tank_UltraSonic" d={{tank_UltraSonic.UltraSonic}} style="display:none"></div>
  188. <br>
  189. <hr size="50" width="100%">
  190. <h6>入料排程</h6>
  191. 設定入料儲豆槽生豆高度(cm):
  192. <input name="schedule_input_height" id="schedule_input_height" type="text" style="width:100px;" value="70">
  193. <br>
  194. 設定吸料時間(s):
  195. <input name="schedule_tank_vacuumin" id="schedule_tank_vacuumin" type="text" style="width:100px;" value="5">
  196. <br>
  197. 設定放料時間(s):
  198. <input name="schedule_tank_vacuumout" id="schedule_tank_vacuumout" type="text" style="width:100px;" value="10">
  199. <br>
  200. 設定乾燥槽生豆高度(cm):
  201. <input name="schedule_tank_height" id="schedule_tank_height" type="text" style="width:100px;" value="70">
  202. <br>
  203. 入料時馬達轉速(rpm):
  204. <input name="schedule_tank_motorrpm" id="schedule_tank_motorrpm" type="text" style="width:100px;" value="10">
  205. <br>
  206. <button type="submit" class="btn btn-primary" onclick="schedule_Start()">開始入料</button>
  207. <script>
  208. function schedule_Start() {
  209. //word = document.getElementById("schedule_SOP").innerHTML;
  210. //document.getElementById("schedule_SOP").innerHTML = word+'<br>*';
  211. var schedule_input_height = $("input[name=schedule_input_height]").val();
  212. var schedule_tank_vacuumin = $("input[name=schedule_tank_vacuumin]").val();
  213. var schedule_tank_vacuumout = $("input[name=schedule_tank_vacuumout]").val();
  214. var schedule_tank_height = $("input[name=schedule_tank_height]").val();
  215. var schedule_tank_motorrpm = $("input[name=schedule_tank_motorrpm]").val();
  216. var tank_UltraSonic = parseInt(document.getElementById('tank_UltraSonic').getAttribute('d'));
  217. // 入料判斷
  218. if (schedule_input_height <= input_UltraSonic) {
  219. console.log('儲豆槽達指定高度')
  220. console.log('tank_UltraSonic:' + tank_UltraSonic)
  221. if (tank_UltraSonic <= 10) {
  222. var DRY_STATE = 'Ready'
  223. console.log('乾燥桶為空, 狀態為 Ready, 準備入料')
  224. // 開始入料
  225. while (schedule_tank_height >= tank_UltraSonic) {
  226. // 真空吸料機 ON
  227. var data = { "tank-number": "1", "command": "tank_vacuum_status", "value": "on" };
  228. console.log('data:', data)
  229. /*
  230. $.post('/mqtt/{{tid}}', data, function (res) {
  231. console.log('真空吸料機 '+res)
  232. }, 'text')
  233. */
  234. // 吸料時間
  235. var time = new Date();
  236. while ((new Date() - time) < schedule_tank_vacuumin * 1000) { }
  237. // 真空吸料機 OFF
  238. var data = { "tank-number": "1", "command": "tank_vacuum_status", "value": "off" };
  239. console.log('data:', data)
  240. /*
  241. $.post('/mqtt/{{tid}}', data, function (res) {
  242. console.log('真空吸料機 '+ res)
  243. }, 'text')
  244. */
  245. // 放料時間
  246. var time = new Date();
  247. while ((new Date() - time) < schedule_tank_vacuumout * 1000) { }
  248. location.reload();
  249. }
  250. console.log('乾燥桶生豆以達指定高度, 入料結束')
  251. } else { console.log('乾燥桶不為空, 無法入料') }
  252. } else { console.log('儲豆槽未達指定高度, 無法入料') }
  253. }
  254. </script>
  255. <br>
  256. <hr size="50" width="100%">
  257. <!--
  258. <h6>入料排程_程式</h6>
  259. <p id="schedule_SOP">按下"開始入料"</p>
  260. -->
  261. <script>
  262. dry_object = new Array();
  263. dry_object[0] = ["ON", "OFF"]; // 入料真空吸料機
  264. dry_object[1] = ["ON", "OFF"]; // 真空吸料機
  265. dry_object[2] = ["ON 吸料", "OFF 排氣"]; // 三通閥
  266. dry_object[3] = ["0", "10", "20", "30", "40", "50"]; // 馬達
  267. dry_object[4] = ["ON", "OFF"]; // 鼓風機
  268. dry_object[5] = ["ON", "OFF"]; // 加熱器 1
  269. dry_object[6] = ["ON", "OFF"]; // 加熱器 2
  270. dry_object[7] = ["ON", "OFF"]; // 蝴蝶閥
  271. dry_object[8] = ["ON", "OFF"]; // 消毒電磁閥
  272. dry_object[9] = ["ON", "OFF"]; // 排水電磁閥
  273. dry_object[10] = ["ON", "OFF"]; // 溫控開關
  274. dry_object[11] = ["OFF", "28", "30", "32", "34", "36", "38", "40"]; // 設定溫度
  275. dry_object[12] = ["ON", "OFF"]; // 出料真空吸料機
  276. dry_object[13] = ["ON", "OFF"]; // 入料儲豆槽_液位計
  277. dry_object[14] = ["ON", "OFF"]; // 液位計
  278. dry_object[15] = ["ON", "OFF"]; // SHT11_溫度
  279. dry_object[16] = ["ON", "OFF"]; // SHT11_濕度
  280. dry_object[17] = ["ON", "OFF"]; // 土壤三合一_溫度
  281. dry_object[18] = ["ON", "OFF"]; // 土壤三合一_濕度
  282. dry_object[19] = ["ON", "OFF"]; // 土壤三合一_EC
  283. dry_object[20] = ["ON", "OFF"]; // 氣壓
  284. dry_object[21] = ["ON", "OFF"]; // 出料儲豆槽_液位計
  285. function renew1(index) {
  286. console.log('index' + index)
  287. for (var i = 0; i < dry_object[index].length; i++)
  288. document.action.do_act1.options[i] = new Option(dry_object[index][i], dry_object[index][i]);
  289. document.action.do_act1.length = dry_object[index].length; // 刪除多餘的選項
  290. }
  291. function renew2(index) {
  292. console.log('index' + index)
  293. for (var i = 0; i < dry_object[index].length; i++)
  294. document.action.dryinput_do_act2.options[i] = new Option(dry_object[index][i], dry_object[index][i]);
  295. document.action.dryinput_do_act2.length = dry_object[index].length; // 刪除多餘的選項
  296. }
  297. </script>
  298. <!-- !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! -->
  299. <div id="box">
  300. <form name="condition">
  301. 條件
  302. <select name="cond_a1">
  303. <optgroup label="Actuator">
  304. <option value="input_vacuum">入料真空吸料機</option>
  305. <option value="tank_vacuum">真空吸料機</option>
  306. <option value="tank_threewayvalve">三通閥</option>
  307. <option value="tank_motor">馬達</option>
  308. <option value="tank_blower">鼓風機</option>
  309. <option value="tank_heater1">加熱器 1</option>
  310. <option value="tank_heater2">加熱器 2</option>
  311. <option value="tank_diskvalve">蝴蝶閥</option>
  312. <option value="tank_solenoid_disinfect">消毒電磁閥</option>
  313. <option value="tank_solenoid_water">排水電磁閥</option>
  314. <option value="tank_temp1_enable">溫控開關</option>
  315. <option value="tank_temp1">設定溫度</option>
  316. <option value="output_vacuum">出料真空吸料機</option>
  317. </optgroup>
  318. <optgroup label="Sensor">
  319. <option value="input_UltraSonic">入料儲豆槽_液位計(cm)</option>
  320. <option value="tank_UltraSonic">液位計(cm)</option>
  321. <option value="tank_SHT11_Temp">SHT11_溫度(℃)</option>
  322. <option value="tank_SHT11_Humidity">SHT11_濕度(%)</option>
  323. <option value="tank_soil_Temp">土壤三合一_溫度(℃)</option>
  324. <option value="tank_soil_Humidity">土壤三合一_濕度(%)</option>
  325. <option value="tank_soil_EC">土壤三合一_EC(%)</option>
  326. <option value="tank_PA">氣壓(PA)</option>
  327. <option value="output_UltraSonic">出料儲豆槽_液位計(cm)</option>
  328. </optgroup>
  329. </select>
  330. <select name="cond_cal1">
  331. <option value="cal1_equal">==</option>
  332. <option value="cal1_more">&gt;=</option>
  333. <option value="cal1_less">&lt;=</option>
  334. <option value="cal1_and">and</option>
  335. <option value="cal1_or">or</option>
  336. </select>
  337. <input list="cal1" name="cond_b1">
  338. <datalist id="cal1">
  339. <option value="ON">
  340. <option value="OFF">
  341. <option value="(或請自行輸入數值)">
  342. </datalist>
  343. </form>
  344. <form name="action">
  345. 物件:
  346. <select name="do_obj1" onChange="renew1(this.selectedIndex);">
  347. <optgroup label="Actuator">
  348. <option value="input_vacuum1">入料真空吸料機
  349. <option value="tank_vacuum1">真空吸料機</option>
  350. <option value="tank_threewayvalve1">三通閥</option>
  351. <option value="tank_motor1">馬達</option>
  352. <option value="tank_blower1">鼓風機</option>
  353. <option value="tank_heater11">加熱器 1</option>
  354. <option value="tank_heater21">加熱器 2</option>
  355. <option value="tank_diskvalve1">蝴蝶閥</option>
  356. <option value="tank_solenoid_disinfect1">消毒電磁閥</option>
  357. <option value="tank_solenoid_water1">排水電磁閥</option>
  358. <option value="tank_temp1_enable1">溫控開關</option>
  359. <option value="tank_temp11">設定溫度</option>
  360. <option value="output_vacuum1">出料真空吸料機</option>
  361. </optgroup>
  362. <optgroup label="Sensor">
  363. <option value="input_UltraSonic1">入料儲豆槽_液位計</option>
  364. <option value="tank_UltraSonic1">液位計</option>
  365. <option value="tank_SHT11_Temp1">SHT11_溫度</option>
  366. <option value="tank_SHT11_Humidity1">SHT11_濕度</option>
  367. <option value="tank_soil_Temp1">土壤三合一_溫度</option>
  368. <option value="tank_soil_Humidity1">土壤三合一_濕度</option>
  369. <option value="tank_soil_EC1">土壤三合一_EC</option>
  370. <option value="tank_PA1">氣壓</option>
  371. <option value="output_UltraSonic1">出料儲豆槽_液位計</option>
  372. </optgroup>
  373. </select>
  374. 動作:
  375. <select name="do_act1">
  376. <option value="">請由左方選取物件
  377. </select>
  378. </form>
  379. <!-- !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! -->
  380. <div id="new">
  381. 新增的條件物件放這裡
  382. </div>
  383. <!-- !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! -->
  384. <script>
  385. var i = 1
  386. function Add(evt) {
  387. // onclick = "Add(hoist_add1);""
  388. // evt = hoist_num (= hoist_add1 / hoist_add2 / hoist_add3 ...)
  389. evt.style.display = "none"; // 元素不顯示
  390. i++;
  391. var div = document.createElement('div'); // 輸出 <div></div>
  392. var cond_a = 'cond_a' + i;
  393. var cond_b = 'cond_b' + i;
  394. var cond_cal = 'cond_cal' + i;
  395. var id = evt.getAttribute('id'); // 輸出 dryinput_add1
  396. console.log('id:' + id)
  397. var add = id.split('_')[0] + '_add' + i; // dryinput + _add + 2 => 輸出 hoist_add2
  398. var del = id.split('_')[0] + '_del' + i; // dryinput + _del + 2 => 輸出 hoist_del2
  399. var html = '';
  400. var begin = id.split('_')[0]; // 輸出 dryinput
  401. div.className = "col-12 row";
  402. div.style.marginTop = "10px";
  403. html += '<form name="dryinput_condition">';
  404. html += '條件';
  405. if (begin == 'dryinput') {
  406. html += ' <select name="dryinput_cond_a' + i + '">';
  407. } else {
  408. };
  409. html += '<optgroup label="Actuator">' +
  410. '<option value="input_vacuum">入料真空吸料機</option>' +
  411. '<option value="tank_vacuum">真空吸料機</option>' +
  412. '<option value="tank_threewayvalve">三通閥</option>' +
  413. '<option value="tank_motor">馬達</option>' +
  414. '<option value="tank_blower">鼓風機</option>' +
  415. '<option value="tank_heater1">加熱器 1</option>' +
  416. '<option value="tank_heater2">加熱器 2</option>' +
  417. '<option value="tank_diskvalve">蝴蝶閥</option>' +
  418. '<option value="tank_solenoid_disinfect">消毒電磁閥</option>' +
  419. '<option value="tank_solenoid_water">排水電磁閥</option>' +
  420. '<option value="tank_temp1_enable">溫控開關</option>' +
  421. '<option value="tank_temp1">設定溫度</option>' +
  422. '<option value="output_vacuum">出料真空吸料機</option>' +
  423. '</optgroup>' +
  424. '<optgroup label="Sensor">' +
  425. '<option value="input_UltraSonic">入料儲豆槽_液位計(cm)</option>' +
  426. '<option value="tank_UltraSonic">液位計(cm)</option>' +
  427. '<option value="tank_SHT11_Temp">SHT11_溫度(℃)</option>' +
  428. '<option value="tank_SHT11_Humidity">SHT11_濕度(%)</option>' +
  429. '<option value="tank_soil_Temp">土壤三合一_溫度(℃)</option>' +
  430. '<option value="tank_soil_Humidity">土壤三合一_濕度(%)</option>' +
  431. '<option value="tank_soil_EC">土壤三合一_EC(%)</option>' +
  432. '<option value="tank_PA">氣壓(PA)</option>' +
  433. '<option value="output_UltraSonic">出料儲豆槽_液位計(cm)</option>' +
  434. '</optgroup>' +
  435. '</select>';
  436. if (begin == 'dryinput') {
  437. html += '<select name="dryinput_cond_cal' + i + '">';
  438. } else {
  439. };
  440. html += '<option value="cal1_equal">==</option>' +
  441. '<option value="cal1_more">&gt;=</option>' +
  442. '<option value="cal1_less">&lt;=</option>' +
  443. '<option value="cal1_and">and</option>' +
  444. '<option value="cal1_or">or</option>' +
  445. '</select>';
  446. if (begin == 'dryinput') {
  447. html += '<input list="cal' + i + '" name="dryinput_cond_b' + i + '">';
  448. } else {
  449. };
  450. html += '<datalist id="cal' + i + '">' +
  451. '<option value="ON">' +
  452. '<option value="OFF">' +
  453. '<option value="(或請自行輸入數值)">' +
  454. '</datalist>' +
  455. '</form>';
  456. html += '<form name="dryinput_action">';
  457. html += '物件:';
  458. html += '<script>' +
  459. 'dry_object = new Array();' +
  460. 'dry_object[0] = ["ON", "OFF"];' +
  461. 'dry_object[1] = ["ON", "OFF"];' +
  462. 'dry_object[2] = ["ON 吸料", "OFF 排氣"];' +
  463. 'dry_object[3] = ["0", "10", "20", "30", "40", "50"];' +
  464. 'dry_object[4] = ["ON", "OFF"];' +
  465. 'dry_object[5] = ["ON", "OFF"];' +
  466. 'dry_object[6] = ["ON", "OFF"];' +
  467. 'dry_object[7] = ["ON", "OFF"]; ' +
  468. 'function renew' + i + '(index) {' +
  469. 'for (var i = 0; i < dry_object[index].length; i++)' +
  470. 'document.action.dryinput_do_act' + i + '.options[i] = new Option(dry_object[index][i], dry_object[index][i]);' +
  471. 'document.action.dryinput_do_act' + i + '.length = dry_object[index].length;' +
  472. '}' +
  473. '<\/script>';
  474. if (begin == 'dryinput') {
  475. html += '<select name="dryinput_do_obj' + i + '" onChange="renew' + i + '(this.selectedIndex);">';
  476. } else {
  477. };
  478. html += '<optgroup label="Actuator">' +
  479. '<option value="input_vacuum1">入料真空吸料機' +
  480. '<option value="tank_vacuum1">真空吸料機</option>' +
  481. '<option value="tank_threewayvalve1">三通閥</option>' +
  482. '<option value="tank_motor1">馬達</option>' +
  483. '<option value="tank_blower1">鼓風機</option>' +
  484. '<option value="tank_heater11">加熱器 1</option>' +
  485. '<option value="tank_heater21">加熱器 2</option>' +
  486. '<option value="tank_diskvalve1">蝴蝶閥</option>' +
  487. '<option value="tank_solenoid_disinfect1">消毒電磁閥</option>' +
  488. '<option value="tank_solenoid_water1">排水電磁閥</option>' +
  489. '<option value="tank_temp1_enable1">溫控開關</option>' +
  490. '<option value="tank_temp11">設定溫度</option>' +
  491. '<option value="output_vacuum1">出料真空吸料機</option>' +
  492. '</optgroup>' +
  493. '<optgroup label="Sensor">' +
  494. '<option value="input_UltraSonic1">入料儲豆槽_液位計</option>' +
  495. '<option value="tank_UltraSonic1">液位計</option>' +
  496. '<option value="tank_SHT11_Temp1">SHT11_溫度</option>' +
  497. '<option value="tank_SHT11_Humidity1">SHT11_濕度</option>' +
  498. '<option value="tank_soil_Temp1">土壤三合一_溫度</option>' +
  499. '<option value="tank_soil_Humidity1">土壤三合一_濕度</option>' +
  500. '<option value="tank_soil_EC1">土壤三合一_EC</option>' +
  501. '<option value="tank_PA1">氣壓</option>' +
  502. '<option value="output_UltraSonic1">出料儲豆槽_液位計</option>' +
  503. '</optgroup>' +
  504. '</select>';
  505. html += '動作:';
  506. if (begin == 'dryinput') {
  507. html += '<select name="dryinput_do_act' + i + '">';
  508. } else {
  509. };
  510. html += '<option value="">請由左方選取物件' +
  511. '</select>' +
  512. '<input id=dryinput_del' + i + ' class="delete" type="button" value="條件物件--" onclick="Delete(dryinput_del' + i + ');">'
  513. '</form>' +
  514. '</div>';
  515. //html += ;
  516. html += '<br><input id="dryinput_add' + i + '" class="add" type="button" value="條件物件++" onclick="Add(dryinput_add' + i + ');"><br>';
  517. html += '</div><div id="dry_con_act' + (i + 1) + '"></div>';
  518. var divbox = document.getElementById('box');
  519. divbox.insertAdjacentHTML('beforeend', html);
  520. };
  521. function Delete(evt) {
  522. // evt = dryinput_del2
  523. var id = evt.getAttribute('id'); // 輸出 dryinput_del2
  524. //console.log('id:'+id)
  525. var begin = id.split('_')[0]; // 輸出 dryinput
  526. //console.log('begin:'+begin)
  527. var del_num = id.split('_')[1].replace("del", "");
  528. //console.log('del_num:'+del_num)
  529. var obox = document.getElementById("box");
  530. var target = "dry_con_act" + del_num
  531. console.log('target:' + target)
  532. var divs = obox.getElementById(target);
  533. if (divs.length > 0) {
  534. obox.removeChild(divs[0]);
  535. }
  536. };
  537. </script>
  538. <!--
  539. <input type="button" onclick="document.body.insertAdjacentHTML('beforeEnd', box)" value="新增">
  540. box = '<input type=text name=' + i + ' value=' + i + '><br>'
  541. -->
  542. <input id="dryinput_add1" class="add" type="button" value="條件物件++" onclick="Add(dryinput_add1);">
  543. <br>
  544. <div id="dry_con_act2"></div>
  545. </div>
  546. <hr size="50" width="100%">
  547. </body>
  548. </html>