|
|
@@ -0,0 +1,449 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <title>{{ title }}</title>
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
|
+
|
|
|
+ <!-- 新 Bootstrap4 核心 CSS 文件 -->
|
|
|
+ <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
|
|
|
+ <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
|
|
|
+ <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
|
|
|
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
|
|
|
+ <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
|
|
|
+ <!--可用來建立使用者小圖示-->
|
|
|
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
|
|
+
|
|
|
+ <script language="JavaScript">
|
|
|
+ var set_dryImport_number = 2; // prompt("請輸入乾燥 入料儲豆槽 數量：")
|
|
|
+ var set_dryTank_number = 12; // prompt("請輸入乾燥 桶槽 數量：")
|
|
|
+ var set_dryExport_number = 2; // prompt("請輸入乾燥 出料儲豆槽 數量：")
|
|
|
+ console.log("get number: " + set_dryImport_number + "-" + set_dryTank_number + "-" + set_dryExport_number);
|
|
|
+
|
|
|
+ // 儲存乾燥貨櫃所有桶槽、入料儲豆槽、出料儲豆槽
|
|
|
+ var dry_import_list = [];
|
|
|
+ var dry_tank_list = [];
|
|
|
+ var dry_export_list = [];
|
|
|
+ // 桶槽對應值
|
|
|
+ var dry_tank_data_list = [];
|
|
|
+ var dry_import_data_list = [];
|
|
|
+ var dry_export_data_list = [];
|
|
|
+
|
|
|
+ var html = '';
|
|
|
+
|
|
|
+ var dry_export_data = [];
|
|
|
+
|
|
|
+ var data = '{{dtr[0]}}';
|
|
|
+ console.log("data: " + data);
|
|
|
+
|
|
|
+ $(function(){
|
|
|
+ // 網頁 title
|
|
|
+ $("#coffee_title_pc").text("桶槽關係建立");
|
|
|
+ $("#coffee_title_phone").text("桶槽關係建立");
|
|
|
+
|
|
|
+ console.log("dry_import_list: " + dry_import_list);
|
|
|
+ console.log("dry_tank_list: " + dry_tank_list);
|
|
|
+ console.log("dry_export_list: " + dry_export_list);
|
|
|
+
|
|
|
+ console.log("dry_tank_data_list: " + dry_tank_data_list);
|
|
|
+ console.log("dry_import_data_list: " + dry_import_data_list);
|
|
|
+ console.log("dry_export_data_list: " + dry_export_data_list);
|
|
|
+
|
|
|
+ // 從 入料桶槽出料 取得 桶槽值 D1, 轉換成下拉式選單選項
|
|
|
+ html = '';
|
|
|
+ for (let dil = 0; dil < dry_import_list.length; dil++) {
|
|
|
+ html += '<option value="' + dry_import_list[dil] + '">' + dry_import_list[dil] + '</option>';
|
|
|
+ }
|
|
|
+ for (let dtl = 0; dtl < dry_tank_list.length; dtl++) {
|
|
|
+ html += '<option value="' + dry_tank_list[dtl] + '">' + dry_tank_list[dtl] + '</option>';
|
|
|
+ }
|
|
|
+ for (let del = 0; del < dry_export_list.length; del++) {
|
|
|
+ html += '<option value="' + dry_export_list[del] + '">' + dry_export_list[del] + '</option>';
|
|
|
+ }
|
|
|
+
|
|
|
+ // 賦值到下拉式選單中 - 入料 + 出料
|
|
|
+ for (let dil = 0; dil < dry_import_list.length; dil++) {
|
|
|
+ var divbox = document.getElementById(dry_import_list[dil] + '_import');
|
|
|
+ divbox.insertAdjacentHTML('beforeend', html);
|
|
|
+ var divbox = document.getElementById(dry_import_list[dil] + '_export');
|
|
|
+ divbox.insertAdjacentHTML('beforeend', html);
|
|
|
+ }
|
|
|
+ for (let dtl = 0; dtl < dry_tank_list.length; dtl++) {
|
|
|
+ var divbox = document.getElementById(dry_tank_list[dtl] + '_import');
|
|
|
+ divbox.insertAdjacentHTML('beforeend', html);
|
|
|
+ var divbox = document.getElementById(dry_tank_list[dtl] + '_export');
|
|
|
+ divbox.insertAdjacentHTML('beforeend', html);
|
|
|
+ }
|
|
|
+ for (let del = 0; del < dry_export_list.length; del++) {
|
|
|
+ var divbox = document.getElementById(dry_export_list[del] + '_import');
|
|
|
+ divbox.insertAdjacentHTML('beforeend', html);
|
|
|
+ var divbox = document.getElementById(dry_export_list[del] + '_export');
|
|
|
+ divbox.insertAdjacentHTML('beforeend', html);
|
|
|
+ }
|
|
|
+ var divbox = document.getElementById('new_import');
|
|
|
+ divbox.insertAdjacentHTML('beforeend', html);
|
|
|
+ var divbox = document.getElementById('new_export');
|
|
|
+ divbox.insertAdjacentHTML('beforeend', html);
|
|
|
+
|
|
|
+ // DB 取值後顯示
|
|
|
+ // // 儲存乾燥貨櫃所有桶槽、入料儲豆槽、出料儲豆槽
|
|
|
+ // var dry_import_list = [];
|
|
|
+ // var dry_tank_list = [];
|
|
|
+ // var dry_export_list = [];
|
|
|
+ // // 桶槽對應值
|
|
|
+ // var dry_tank_data_list = [];
|
|
|
+ // var dry_import_data_list = [];
|
|
|
+ // var dry_export_data_list = [];
|
|
|
+ for (let i = 0; i < dry_tank_data_list.length; i++) {
|
|
|
+ if (dry_tank_data_list.includes(dry_import_data_list[i])) {
|
|
|
+ $("#" + dry_tank_data_list[i] + "_import").val(dry_import_data_list[i]);
|
|
|
+ } else {
|
|
|
+ $("#" + dry_tank_data_list[i] + "_import").val('-');
|
|
|
+ }
|
|
|
+
|
|
|
+ if (dry_tank_data_list.includes(dry_export_data_list[i])) {
|
|
|
+ $("#" + dry_tank_data_list[i] + "_export").val(dry_export_data_list[i]);
|
|
|
+ } else {
|
|
|
+ $("#" + dry_tank_data_list[i] + "_export").val('-');
|
|
|
+ }
|
|
|
+ // $("#" + dry_tank_data_list[i] + "_export").val(dry_export_data_list[i]);
|
|
|
+ // if (dry_tank_data_list.includes(dry_import_data_list[i])) {
|
|
|
+ // console.log("tttest " + dry_import_data_list[i]);
|
|
|
+ // $("#" + dry_tank_data_list[i] + "_import").val(dry_import_data_list[i]);
|
|
|
+ // $("#" + dry_tank_data_list[i] + "_export").val(dry_export_data_list[i]);
|
|
|
+ // } else {
|
|
|
+ // console.log("else tttest " + dry_import_data_list[i]);
|
|
|
+ // $("#" + dry_tank_data_list[i] + "_import").val('-');
|
|
|
+ // $("#" + dry_tank_data_list[i] + "_export").val('-');
|
|
|
+ // }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ // var html = '<table border="5" style="border: 3px lightgray solid; text-align: center; margin-left: auto; margin-right: auto; width: 500px;">' +
|
|
|
+ // '<tr>' +
|
|
|
+ // '<th>桶槽名稱</th>' +
|
|
|
+ // '<th>桶槽類別</th>' +
|
|
|
+ // '<th>桶槽入料</th>' +
|
|
|
+ // '<th>桶槽出料</th>' +
|
|
|
+ // '</tr>';
|
|
|
+ // // 增加入料儲豆槽 設定表格
|
|
|
+ // for (let di = 1; di <= set_dryImport_number; di++) {
|
|
|
+ // html +='<tr>' +
|
|
|
+ // '<td>DI' + di + '</td>' +
|
|
|
+ // '<td></td>' +
|
|
|
+ // '<td></td>' +
|
|
|
+ // '<td></td>' +
|
|
|
+ // '</tr>';
|
|
|
+ // }
|
|
|
+ // // 增加桶槽 設定表格
|
|
|
+ // for (let dt = 1; dt <= set_dryTank_number; dt++) {
|
|
|
+ // html +='<tr>' +
|
|
|
+ // '<td>D' + dt + '</td>' +
|
|
|
+ // '<td></td>' +
|
|
|
+ // '<td></td>' +
|
|
|
+ // '<td></td>' +
|
|
|
+ // '</tr>';
|
|
|
+ // }
|
|
|
+ // // 增加出料儲豆槽 設定表格
|
|
|
+ // for (let de = 1; de <= set_dryExport_number; de++) {
|
|
|
+ // html +='<tr>' +
|
|
|
+ // '<td>DO' + de + '</td>' +
|
|
|
+ // '<td></td>' +
|
|
|
+ // '<td></td>' +
|
|
|
+ // '<td></td>' +
|
|
|
+ // '</tr>';
|
|
|
+ // }
|
|
|
+
|
|
|
+ // html += '<tr>' +
|
|
|
+ // '<td colspan="5">[修改確認]</td>' +
|
|
|
+ // '</table>';
|
|
|
+
|
|
|
+ // var divbox = document.getElementById('set_table');
|
|
|
+ // divbox.insertAdjacentHTML('beforeend', html);
|
|
|
+
|
|
|
+ });
|
|
|
+
|
|
|
+ </script>
|
|
|
+ <style>
|
|
|
+ .input-cond-delete {
|
|
|
+ background: #E43030;
|
|
|
+ border: 1px solid #CFCFCF;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-radius: 5px;
|
|
|
+ margin-left: 5px;
|
|
|
+ width: 86px;
|
|
|
+ height: 33px;
|
|
|
+ font-size: 16px;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 16px;
|
|
|
+ color: #FFFFFF;
|
|
|
+ }
|
|
|
+ .input-cond-add {
|
|
|
+ background: #008CBA;
|
|
|
+ border: 1px solid #CFCFCF;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-radius: 5px;
|
|
|
+ margin-left: 5px;
|
|
|
+ width: 80px;
|
|
|
+ height: 33px;
|
|
|
+ font-size: 16px;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 16px;
|
|
|
+ color: #FFFFFF;
|
|
|
+ }
|
|
|
+
|
|
|
+ .r5_position {
|
|
|
+ position: absolute;
|
|
|
+ top: 160px;
|
|
|
+ left: 310px;
|
|
|
+ width: 40px;
|
|
|
+ height: 150px;
|
|
|
+ border-style: solid;
|
|
|
+ border-color: aqua;
|
|
|
+ }
|
|
|
+ .div_relay_css {
|
|
|
+ position: absolute;
|
|
|
+ border-style: solid;
|
|
|
+ border-color: aqua;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+ /* header */
|
|
|
+ /* 文字輸入框 */
|
|
|
+ .input-text {
|
|
|
+ height: 25px;
|
|
|
+ width: 40px;
|
|
|
+ text-align: center;
|
|
|
+ margin-left: 2px;
|
|
|
+ margin-right: 5px;
|
|
|
+ }
|
|
|
+ /* 致動器狀態表格置中 */
|
|
|
+ .label_ActuatorStatus {
|
|
|
+ margin: auto;
|
|
|
+ }
|
|
|
+ /* 致動器 ON 樣式 */
|
|
|
+ .input-button-on {
|
|
|
+ color: #008CBA;
|
|
|
+ border: 2px rgb(182, 181, 181) solid;
|
|
|
+ background-color: whitesmoke;
|
|
|
+ padding: 1px 3px;
|
|
|
+ width: 45px;
|
|
|
+ }
|
|
|
+ /* 致動器 OFF 樣式 */
|
|
|
+ .input-button-off {
|
|
|
+ color: #707070;
|
|
|
+ border: 2px rgb(192, 192, 192) solid;
|
|
|
+ background-color: whitesmoke;
|
|
|
+ padding: 1px 3px;
|
|
|
+ width: 45px;
|
|
|
+ }
|
|
|
+ /* 輸入按鈕 */
|
|
|
+ .input-button {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #008CBA;
|
|
|
+ border: 2px rgb(182, 181, 181) solid;
|
|
|
+ background-color: whitesmoke;
|
|
|
+ padding: 1px 3px;
|
|
|
+ }
|
|
|
+ /* 大表格樣式 */
|
|
|
+ .table-all {
|
|
|
+ font-size:18px;
|
|
|
+ border:2px #cccccc solid;
|
|
|
+ margin-left: 10px;
|
|
|
+ margin-right: 10px;
|
|
|
+ width: 98%;
|
|
|
+ }
|
|
|
+ /* footer */
|
|
|
+ .footer{
|
|
|
+ height: 40px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ /* 設定footer絕對位置在底部 */
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0px;
|
|
|
+ width: 100%;
|
|
|
+ background-color: #eee;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ html, body {
|
|
|
+ height: 100%;
|
|
|
+ /* margin: 0; */
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+
|
|
|
+ #wrapper {
|
|
|
+ /* 設定高度最小為100%, 如果內容區塊很多, 可以長大 */
|
|
|
+ min-height: 100%;
|
|
|
+ /* 位置設為relative, 作為footer區塊位置的參考 */
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+
|
|
|
+<body style="font-size: 18px;">
|
|
|
+ <div id="wrapper" style="height: fit-content; text-align: center; margin-left: auto; margin-right: auto;">
|
|
|
+ <div id="coffee_header">
|
|
|
+ <!-- 匯入共同使用的 header.html 內容 -->
|
|
|
+ {% include 'header.html' %}
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- <div id="set_table">
|
|
|
+
|
|
|
+ </div> -->
|
|
|
+
|
|
|
+ <table border="5" style="border: 3px lightgray solid; text-align: center; margin-left: auto; margin-right: auto; width: 700px;">
|
|
|
+ <tr>
|
|
|
+ <th>桶槽名稱</th>
|
|
|
+ <th>桶槽類別</th>
|
|
|
+ <th>入料</th>
|
|
|
+ <th>出料</th>
|
|
|
+ <th></th>
|
|
|
+ </tr>
|
|
|
+ {% for i in dtr %}
|
|
|
+ <script>
|
|
|
+ dry_tank_data_list.push('{{ i.tank_id }}');
|
|
|
+ if ('{{ i.tank_id }}'.substring(0, 2) === 'DO') {
|
|
|
+ dry_export_list.push('{{ i.tank_id }}');
|
|
|
+ } else if ('{{ i.tank_id }}'.substring(0, 2) === 'DI') {
|
|
|
+ dry_import_list.push('{{ i.tank_id }}');
|
|
|
+ } else {
|
|
|
+ dry_tank_list.push('{{ i.tank_id }}');
|
|
|
+ }
|
|
|
+ </script>
|
|
|
+ <tr>
|
|
|
+ <td>
|
|
|
+ {{ i.tank_id }}
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <select id="{{ i.tank_id }}_type" onchange="" class="select-input">
|
|
|
+ <option value="tank">桶槽</option>
|
|
|
+ <option value="import">入料儲豆槽</option>
|
|
|
+ <option value="export">出料儲豆槽</option>
|
|
|
+ <option value="mix">混合槽</option>
|
|
|
+ </select>
|
|
|
+ </td>
|
|
|
+ <script>
|
|
|
+ var tank_type_data = '{{i.tank_type}}';
|
|
|
+ $("#{{ i.tank_id }}_type").val(tank_type_data);
|
|
|
+ </script>
|
|
|
+
|
|
|
+ <td>
|
|
|
+ <select id="{{ i.tank_id }}_import" onchange="" class="select-input">
|
|
|
+ <option value="-">-</option>
|
|
|
+ </select>
|
|
|
+ </td>
|
|
|
+ <script>
|
|
|
+ dry_import_data_list.push('{{ i.tank_import }}');
|
|
|
+ </script>
|
|
|
+
|
|
|
+ <td>
|
|
|
+ <select id="{{ i.tank_id }}_export" onchange="" class="select-input">
|
|
|
+ <option value="-">-</option>
|
|
|
+ </select>
|
|
|
+ </td>
|
|
|
+ <script>
|
|
|
+ dry_export_data_list.push('{{ i.tank_export }}');
|
|
|
+ </script>
|
|
|
+ <td>
|
|
|
+ <input type="button" id="{{ i.tank_id }}_del" value="刪除 {{ i.tank_id }}" onclick="relation_del('{{ i.tank_id }}')" class="input-cond-delete">
|
|
|
+ <script>
|
|
|
+ function relation_del(tankID) {
|
|
|
+ var confirm_relation_del = confirm("是否要移除 " + tankID + " ?\n確認後即刪除該項關聯")
|
|
|
+ if (!confirm_relation_del) {
|
|
|
+ alert("已取消動作");
|
|
|
+ } else {
|
|
|
+ const SQL_delete = 'DELETE FROM `dry_tank_relation` WHERE `tank_id` = "' + tankID + '"';
|
|
|
+ // console.log("sql_data: " + sql_data);
|
|
|
+ var sql_data = { "sql": SQL_delete };
|
|
|
+ console.log("sql_data: ", sql_data)
|
|
|
+ $.get('/sql_get', sql_data, function (res) {
|
|
|
+ if (res['response'] == '') {
|
|
|
+ alert("OK");
|
|
|
+ } else {
|
|
|
+ alert(res['response']);
|
|
|
+ }
|
|
|
+ }, 'json');
|
|
|
+ // TRUNCATE TABLE `dry_tank_relation`;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ </script>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ {% endfor %}
|
|
|
+ <tr>
|
|
|
+ <td>
|
|
|
+ <input type="text" id="new_tank_id" style="width: 120px;">
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <select id="new_type" onchange="" class="select-input">
|
|
|
+ <option value="tank">桶槽</option>
|
|
|
+ <option value="import">入料儲豆槽</option>
|
|
|
+ <option value="export">出料儲豆槽</option>
|
|
|
+ </select>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <select id="new_import" onchange="" class="select-input">
|
|
|
+ <option value="-">-</option>
|
|
|
+ </select>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <select id="new_export" onchange="" class="select-input">
|
|
|
+ <option value="-">-</option>
|
|
|
+ </select>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <input type="button" id="new_insert" value="新增" onclick="relation_ins()" class="input-cond-add">
|
|
|
+ <script>
|
|
|
+ function relation_ins() {
|
|
|
+ const new_insert_tid = $('#new_tank_id').val();
|
|
|
+ const new_insert_type = $("#new_type").val();
|
|
|
+ const new_insert_import = $("#new_import").val();
|
|
|
+ const new_insert_export = $("#new_export").val();
|
|
|
+ // console.log("new_insert_tid: " + new_insert_tid);
|
|
|
+ // console.log("new_insert_type: " + new_insert_type);
|
|
|
+ // console.log("new_insert_import: " + new_insert_import);
|
|
|
+ // console.log("new_insert_export: " + new_insert_export);
|
|
|
+
|
|
|
+ const SQL_delete = 'INSERT INTO `dry_tank_relation`(`tank_id`, `tank_type`, `tank_import`, `tank_export`, `datetime`) ' +
|
|
|
+ 'VALUES ("' + new_insert_tid +
|
|
|
+ '","' + new_insert_type +
|
|
|
+ '","' + new_insert_import +
|
|
|
+ '","' + new_insert_export +
|
|
|
+ '", current_timestamp())';
|
|
|
+ console.log("SQL_delete: " + SQL_delete);
|
|
|
+ var sql_data = { "sql": SQL_delete };
|
|
|
+ $.get('/sql_get', sql_data, function (res) {
|
|
|
+ if (res['response'] == '') {
|
|
|
+ alert("OK");
|
|
|
+ } else {
|
|
|
+ alert(res['response']);
|
|
|
+ }
|
|
|
+ }, 'json');
|
|
|
+ }
|
|
|
+ </script>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <script>
|
|
|
+
|
|
|
+ </script>
|
|
|
+ <tr>
|
|
|
+ <td colspan="5">
|
|
|
+ [確認]
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ </table>
|
|
|
+
|
|
|
+
|
|
|
+ <div id="coffee_footer">
|
|
|
+ <!-- 匯入共同使用的 footer.html 內容 -->
|
|
|
+ {% include 'footer.html' %}
|
|
|
+ <br>
|
|
|
+ <br>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</body>
|
|
|
+
|
|
|
+</html>
|
