coffeeproject20230512/coffeeproject/app/templates/demo.html

<!-- 宣告我們要套用模板 -->
{% extends "base.html" %}
{% block title %}{{ title }}{% endblock %}

{% block script %}
    <script language="JavaScript">
        var status = '{{status}}';
        var username = '{{username}}';
        $(document).ready(function(){
            $("#coffee_title_pc").text("DEMO 貨櫃");
            $("#coffee_title_phone").text("DEMO 貨櫃");
            $('#navbarDropdown_user_pc').text(username);
            $('#navbarDropdown_user_phone').text(username);
            loading_D_status();
        });

        clean_input_status = ['{{CI1}}', '{{CI2}}']
        clean_tank_status = ['{{C1}}', '{{C2}}']
        reclaimedwater_tank_status = ['{{R1}}']
        colorselect_tank_status = ['{{S1}}', '{{S2}}']
        peel_tank_status = ['{{P1}}', '{{P2}}']
        ferment_tank_status = ['{{F1}}', '{{F2}}']
        dry_tank_status = ['{{D1}}']
        peel_output_status = ['{{PO1}}']
        peel_outputb_status = ['{{POb1}}']
        function loading_D_status(){
            // 狀態 入料儲豆槽
            for (let i=0; i<clean_input_status.length; i++) {
                if (clean_input_status[i] == 'CI_InputtingBean') {
                    $("#DM_InputBean_"+parseInt(i+1)+"_bar").css("background-color", "MediumSeaGreen")
                    $("#DM_InputBean_"+parseInt(i+1)+"_status").text("入豆中")
                } else if (clean_input_status[i] == 'CI_Waiting') {
                    $("#DM_InputBean_"+parseInt(i+1)+"_bar").css("background-color", "lightgray")
                    $("#DM_InputBean_"+parseInt(i+1)+"_status").text("空桶等待")
                } else if (clean_input_status[i] == 'CI_OutputtingBean') {
                    $("#DM_InputBean_"+parseInt(i+1)+"_bar").css("background-color", "MediumSeaGreen")
                    $("#DM_InputBean_"+parseInt(i+1)+"_status").text("可出豆")
                } else if (clean_input_status[i] == 'CI_Warning') {
                    $("#DM_InputBean_"+parseInt(i+1)+"_bar").css("background-color", "crimson")
                    $("#DM_InputBean_"+parseInt(i+1)+"_status").text("發生錯誤")
                    $("#DM_InputBean_"+parseInt(i+1)+"_status").css("color", "crimson")
                } else {
                    console.log('DM_InputBean pass')
                }
            }

            // 狀態 清洗槽 1
            for (let i=0; i<clean_tank_status.length; i++) {
                if (clean_tank_status[i] == 'C_InputtingBean') {
                    $("#DM_Clean_"+parseInt(i+1)+"_bar").css("background-color", "MediumSeaGreen")
                    $("#DM_Clean_"+parseInt(i+1)+"_status").text("入豆中")
                } else if (clean_tank_status[i] == 'C_Waiting') {
                    $("#DM_Clean_"+parseInt(i+1)+"_bar").css("background-color", "lightgray")
                    $("#DM_Clean_"+parseInt(i+1)+"_status").text("空桶等待")
                } else if (clean_tank_status[i] == 'C_InputtingWater') {
                    $("#DM_Clean_"+parseInt(i+1)+"_bar").css("background-color", "DeepSkyBlue")
                    $("#DM_Clean_"+parseInt(i+1)+"_status").text("內外桶入水中")
                } else if (clean_tank_status[i] == 'C_Cleaning') {
                    $("#DM_Clean_"+parseInt(i+1)+"_bar").css("background-color", "plum")
                    $("#DM_Clean_"+parseInt(i+1)+"_status").text("清洗中")
                } else if (clean_tank_status[i] == 'C_OutputtingWater') {
                      $("#DM_Clean_"+parseInt(i+1)+"_bar").css("background-color", "DeepSkyBlue")
                      $("#DM_Clean_"+parseInt(i+1)+"_status").text("  內桶排水中")
                } else if (clean_tank_status[i] == 'C_OutputtingBean') {
                    $("#DM_Clean_"+parseInt(i+1)+"_bar").css("background-color", "MediumSeaGreen")
                    $("#DM_Clean_"+parseInt(i+1)+"_status").text("可出豆")
                } else if (clean_tank_status[i] == 'C_Warning') {
                    $("#DM_Clean_"+parseInt(i+1)+"_bar").css("background-color", "crimson")
                    $("#DM_Clean_"+parseInt(i+1)+"_status").text("發生錯誤")
                    $("#DM_Clean_"+parseInt(i+1)+"_status").css("color", "crimson")
                } else {
                    console.log('DM_Clean pass')
                }
            }

            // 狀態 中水桶
            for (let i=0; i<reclaimedwater_tank_status.length; i++) {
                    if (reclaimedwater_tank_status[i] == 'R_InputtingWater') {
                    $("#DM_ReclaimedWater_"+parseInt(i+1)+"_bar").css("background-color", "DeepSkyBlue")
                    $("#DM_ReclaimedWater_"+parseInt(i+1)+"_status").text(" 入水中")

                  } else if (reclaimedwater_tank_status[i] == 'R_Waiting') {
                    $("#DM_ReclaimedWater_"+parseInt(i+1)+"_bar").css("background-color", "lightgray")
                    $("#DM_ReclaimedWater_"+parseInt(i+1)+"_status").text(" 空桶等待")

                  } else if (reclaimedwater_tank_status[i] == 'R_OutputtingWater') {
                    $("#DM_ReclaimedWater_"+parseInt(i+1)+"_bar").css("background-color", "DeepSkyBlue")
                    $("#DM_ReclaimedWater_"+parseInt(i+1)+"_status").text(" 排水中")
                  } else if (reclaimedwater_tank_status[i] == 'R_Stand_by') {
                    $("#DM_ReclaimedWater_"+parseInt(i+1)+"_bar").css("background-color", "HotPink")
                    $("#DM_ReclaimedWater_"+parseInt(i+1)+"_status").text(" 待命")
                  } else if (reclaimedwater_tank_status[i] == 'R_Warning') {
                    console.log('[動作] R桶警告 R' + parseInt(i+1) + ' 警告')
                    $("#DM_ReclaimedWater_"+parseInt(i+1)+"_bar").css("background-color", "crimson")
                    $("#DM_ReclaimedWater_"+parseInt(i+1)+"_status").text(" 警告")

                  } else {
                    console.log('pass')
                  }                
            }

            // 狀態 色選機            
            for (let i=0; i<colorselect_tank_status.length; i++) {
                if (colorselect_tank_status[i] == 'S_InputtingBean') {
                    $("#DM_ColorSelect_"+parseInt(i+1)+"_bar").css("background-color", "MediumSeaGreen")
                    $("#DM_ColorSelect_"+parseInt(i+1)+"_status").text("入豆中")
                } else if (colorselect_tank_status[i] == 'S_Waiting') {
                    $("#DM_ColorSelect_"+parseInt(i+1)+"_bar").css("background-color", "lightgray")
                    $("#DM_ColorSelect_"+parseInt(i+1)+"_status").text("空桶等待")
                } else if (colorselect_tank_status[i] == 'S_OutputtingBean') {
                    $("#DM_ColorSelect_"+parseInt(i+1)+"_bar").css("background-color", "MediumSeaGreen")
                    $("#DM_ColorSelect_"+parseInt(i+1)+"_status").text("可出豆")
                } else if (colorselect_tank_status[i] == 'S_Warning') {
                    $("#DM_ColorSelect_"+parseInt(i+1)+"_bar").css("background-color", "crimson")
                    $("#DM_ColorSelect_"+parseInt(i+1)+"_status").text("發生錯誤")
                    $("#DM_ColorSelect_"+parseInt(i+1)+"_status").css("color", "crimson")
                } else {
                    console.log('DM_ColorSelect pass')
                }
            }
            // 狀態 脫皮機
            for (let i=0; i<peel_tank_status.length; i++) {
                if (peel_tank_status[i] == 'P_InputtingBean') {
                    $("#DM_Peel_"+parseInt(i+1)+"_bar").css("background-color", "MediumSeaGreen")
                    $("#DM_Peel_"+parseInt(i+1)+"_status").text("入豆中")
                } else if (peel_tank_status[i] == 'P_Waiting') {
                    $("#DM_Peel_"+parseInt(i+1)+"_bar").css("background-color", "lightgray")
                    $("#DM_Peel_"+parseInt(i+1)+"_status").text("空桶等待")
                } else if (peel_tank_status[i] == 'P_OutputtingBean') {
                    $("#DM_Peel_"+parseInt(i+1)+"_bar").css("background-color", "MediumSeaGreen")
                    $("#DM_Peel_"+parseInt(i+1)+"_status").text("可出豆")
                } else if (peel_tank_status[i] == 'P_Warning') {
                    $("#DM_Peel_"+parseInt(i+1)+"_bar").css("background-color", "crimson")
                    $("#DM_Peel_"+parseInt(i+1)+"_status").text("發生錯誤")
                    $("#DM_Peel_"+parseInt(i+1)+"_status").css("color", "crimson")
                } else {
                    console.log('DM_DM_Peel pass')
                }
            }            
            // 狀態 發酵槽 1
            for (let i=0; i<ferment_tank_status.length; i++) {
                if (ferment_tank_status[i] == 'F_InputtingBean') {
                    $("#DM_Ferment_"+parseInt(i+1)+"_bar").css("background-color", "MediumSeaGreen")
                    $("#DM_Ferment_"+parseInt(i+1)+"_status").text("入豆中")
                } else if (ferment_tank_status[i] == 'F_Waiting') {
                    $("#DM_Ferment_"+parseInt(i+1)+"_bar").css("background-color", "lightgray")
                    $("#DM_Ferment_"+parseInt(i+1)+"_status").text("空桶等待")
                } else if (ferment_tank_status[i] == 'F_OutputtingBean') {
                    $("#DM_Ferment_"+parseInt(i+1)+"_bar").css("background-color", "MediumSeaGreen")
                    $("#DM_Ferment_"+parseInt(i+1)+"_status").text("可出豆")
                } else if (ferment_tank_status[i] == 'F_InputtingBean_Pause') {
                    $("#DM_Ferment_"+parseInt(i+1)+"_bar").css("background-color", "MediumSeaGreen")
                    $("#DM_Ferment_"+parseInt(i+1)+"_status").text("入豆暫停")
                } else if (ferment_tank_status[i] == 'F_InputtingBean_Finish') {
                    $("#DM_Ferment_"+parseInt(i+1)+"_bar").css("background-color", "MediumSeaGreen")
                    $("#DM_Ferment_"+parseInt(i+1)+"_status").text("入豆完成")
                } else if (ferment_tank_status[i] == 'F_InputtingWater') {
                    $("#DM_Ferment_"+parseInt(i+1)+"_bar").css("background-color", "MediumSeaGreen")
                    $("#DM_Ferment_"+parseInt(i+1)+"_status").text("入水中")
                } else if (ferment_tank_status[i] == 'F_Fermenting') {
                    $("#DM_Ferment_"+parseInt(i+1)+"_bar").css("background-color", "MediumSeaGreen")
                    $("#DM_Ferment_"+parseInt(i+1)+"_status").text("發酵中")
                } else if (ferment_tank_status[i] == 'F_Warning') {
                    $("#DM_Ferment_"+parseInt(i+1)+"_bar").css("background-color", "crimson")
                    $("#DM_Ferment_"+parseInt(i+1)+"_status").text("發生錯誤")
                    $("#DM_Ferment_"+parseInt(i+1)+"_status").css("color", "crimson")
                } else {
                    console.log('DM_Ferment pass')
                }
            }
           
            // 狀態 乾燥槽
            for (let i=0; i<dry_tank_status.length; i++) {
                if (dry_tank_status[i] == 'D_InputtingBean') {
                    $("#DM_Dry_"+parseInt(i+1)+"_bar").css("background-color", "MediumSeaGreen")
                    $("#DM_Dry_"+parseInt(i+1)+"_status").text("入豆中")
                } else if (dry_tank_status[i] == 'D_Waiting') {
                    $("#DM_Dry_"+parseInt(i+1)+"_bar").css("background-color", "lightgray")
                    $("#DM_Dry_"+parseInt(i+1)+"_status").text("空桶等待")
                } else if (dry_tank_status[i] == 'D_InputtingWater') {
                      $("#DM_Dry_"+parseInt(i+1)+"_bar").css("background-color", "DeepSkyBlue")
                      $("#DM_Dry_"+parseInt(i+1)+"_status").text(" 外桶入水中")
                } else if (dry_tank_status[i] == 'D_Drying') {
                    $("#DM_Dry_"+parseInt(i+1)+"_bar").css("background-color", "MediumSeaGreen")
                    $("#DM_Dry_"+parseInt(i+1)+"_status").text("乾燥中")
                } else if (dry_tank_status[i] == 'D_OutputtingBean') {
                    $("#DM_Dry_"+parseInt(i+1)+"_bar").css("background-color", "MediumSeaGreen")
                    $("#DM_Dry_"+parseInt(i+1)+"_status").text("可出豆")
                } else if (dry_tank_status[i] == 'D_Warning') {
                    $("#DM_Dry_"+parseInt(i+1)+"_bar").css("background-color", "crimson")
                    $("#DM_Dry_"+parseInt(i+1)+"_status").text("發生錯誤")
                    $("#DM_Dry_"+parseInt(i+1)+"_status").css("color", "crimson")
                } else {
                    console.log('DM_InputBean pass')
                }
            }
            
            for (let i=0; i<peel_output_status.length; i++) {
                if (peel_output_status[i] == 'PO_InputtingBean') {
                    $("#DM_OutputBean_"+parseInt(i+1)+"_bar").css("background-color", "MediumSeaGreen")
                    $("#DM_OutputBean_"+parseInt(i+1)+"_status").text(" 入豆中")

                  } else if (peel_output_status[i] == 'PO_Waiting') {
                    $("#DM_OutputBean_"+parseInt(i+1)+"_bar").css("background-color", "lightgray")
                    $("#DM_OutputBean_"+parseInt(i+1)+"_status").text(" 空桶等待")

                  } else if (peel_output_status[i] == 'PO_OutputtingBean') {
                    $("#DM_OutputBean_"+parseInt(i+1)+"_bar").css("background-color", "MediumSeaGreen")
                    $("#DM_OutputBean_"+parseInt(i+1)+"_status").text(" 可出豆")
                  } else if (peel_output_status[i] == 'PO_Stand_by') {
                    $("#DM_OutputBean_"+parseInt(i+1)+"_bar").css("background-color", "HotPink")
                    $("#DM_OutputBean_"+parseInt(i+1)+"_status").text(" 待命")

                  } else {
                    console.log('pass')
                  }                
            }
            for (let i=0; i<peel_outputb_status.length; i++) {
                if (peel_outputb_status[i] == 'PO_InputtingBean') {
                    $("#DM_BadBean_"+parseInt(i+1)+"_bar").css("background-color", "MediumSeaGreen")
                    $("#DM_BadBean_"+parseInt(i+1)+"_status").text(" 入豆中")

                  } else if (peel_outputb_status[i] == 'PO_Waiting') {
                    $("#DM_BadBean_"+parseInt(i+1)+"_bar").css("background-color", "lightgray")
                    $("#DM_BadBean_"+parseInt(i+1)+"_status").text(" 空桶等待")

                  } else if (peel_outputb_status[i] == 'PO_OutputtingBean') {
                    $("#DM_BadBean_"+parseInt(i+1)+"_bar").css("background-color", "MediumSeaGreen")
                    $("#DM_BadBean_"+parseInt(i+1)+"_status").text(" 可出豆")
                  } else if (peel_outputb_status[i] == 'PO_Stand_by') {
                    $("#DM_BadBean_"+parseInt(i+1)+"_bar").css("background-color", "HotPink")
                    $("#DM_BadBean_"+parseInt(i+1)+"_status").text(" 待命")

                  } else {
                    console.log('pass')
                  }                
            }
        }
    </script>
    <script language="JavaScript">
        function myrefresh()
        { 
          $.get('/demo_auto_data', function (resText) {
            clean_input_status = [resText.CI1,resText.CI2]
            clean_tank_status = [resText.C1, resText.C2]
            reclaimedwater_tank_status = [resText.R1]
            colorselect_tank_status = [resText.S1, resText.S2]
            peel_tank_status = [resText.P1, resText.P2]
            ferment_tank_status = [resText.F1, resText.F2]
            dry_tank_status = [resText.D1]
            peel_output_status = [resText.PO1]
            peel_outputb_status = [resText.POb1]
            // 狀態 入料儲豆槽
            for (let i=0; i<clean_input_status.length; i++) {
                if (clean_input_status[i] == 'CI_InputtingBean') {
                    $("#DM_InputBean_"+parseInt(i+1)+"_bar").css("background-color", "MediumSeaGreen")
                    $("#DM_InputBean_"+parseInt(i+1)+"_status").text("入豆中")
                } else if (clean_input_status[i] == 'CI_Waiting') {
                    $("#DM_InputBean_"+parseInt(i+1)+"_bar").css("background-color", "lightgray")
                    $("#DM_InputBean_"+parseInt(i+1)+"_status").text("空桶等待")
                } else if (clean_input_status[i] == 'CI_OutputtingBean') {
                    $("#DM_InputBean_"+parseInt(i+1)+"_bar").css("background-color", "MediumSeaGreen")
                    $("#DM_InputBean_"+parseInt(i+1)+"_status").text("可出豆")
                } else if (clean_input_status[i] == 'CI_Warning') {
                    $("#DM_InputBean_"+parseInt(i+1)+"_bar").css("background-color", "crimson")
                    $("#DM_InputBean_"+parseInt(i+1)+"_status").text("發生錯誤")
                } else {
                    console.log('DM_InputBean pass')
                }
            }

            // 狀態 清洗槽 1
            for (let i=0; i<clean_tank_status.length; i++) {
                if (clean_tank_status[i] == 'C_InputtingBean') {
                    $("#DM_Clean_"+parseInt(i+1)+"_bar").css("background-color", "MediumSeaGreen")
                    $("#DM_Clean_"+parseInt(i+1)+"_status").text("入豆中")
                } else if (clean_tank_status[i] == 'C_Waiting') {
                    $("#DM_Clean_"+parseInt(i+1)+"_bar").css("background-color", "lightgray")
                    $("#DM_Clean_"+parseInt(i+1)+"_status").text("空桶等待")
                } else if (clean_tank_status[i] == 'C_InputtingWater') {
                    $("#DM_Clean_"+parseInt(i+1)+"_bar").css("background-color", "DeepSkyBlue")
                    $("#DM_Clean_"+parseInt(i+1)+"_status").text("內外桶入水中")
                } else if (clean_tank_status[i] == 'C_Cleaning') {
                    $("#DM_Clean_"+parseInt(i+1)+"_bar").css("background-color", "plum")
                    $("#DM_Clean_"+parseInt(i+1)+"_status").text("清洗中")
                } else if (clean_tank_status[i] == 'C_OutputtingWater') {
                      $("#DM_Clean_"+parseInt(i+1)+"_bar").css("background-color", "DeepSkyBlue")
                      $("#DM_Clean_"+parseInt(i+1)+"_status").text("  內桶排水中")
                } else if (clean_tank_status[i] == 'C_OutputtingBean') {
                    $("#DM_Clean_"+parseInt(i+1)+"_bar").css("background-color", "MediumSeaGreen")
                    $("#DM_Clean_"+parseInt(i+1)+"_status").text("可出豆")
                } else if (clean_tank_status[i] == 'C_Warning') {
                    $("#DM_Clean_"+parseInt(i+1)+"_bar").css("background-color", "crimson")
                    $("#DM_Clean_"+parseInt(i+1)+"_status").text("發生錯誤")
                } else {
                    console.log('DM_Clean pass')
                }
            }

            // 狀態 中水桶
            for (let i=0; i<reclaimedwater_tank_status.length; i++) {
                    if (reclaimedwater_tank_status[i] == 'R_InputtingWater') {
                    $("#DM_ReclaimedWater_"+parseInt(i+1)+"_bar").css("background-color", "DeepSkyBlue")
                    $("#DM_ReclaimedWater_"+parseInt(i+1)+"_status").text(" 入水中")

                  } else if (reclaimedwater_tank_status[i] == 'R_Waiting') {
                    $("#DM_ReclaimedWater_"+parseInt(i+1)+"_bar").css("background-color", "lightgray")
                    $("#DM_ReclaimedWater_"+parseInt(i+1)+"_status").text(" 空桶等待")

                  } else if (reclaimedwater_tank_status[i] == 'R_OutputtingWater') {
                    $("#DM_ReclaimedWater_"+parseInt(i+1)+"_bar").css("background-color", "DeepSkyBlue")
                    $("#DM_ReclaimedWater_"+parseInt(i+1)+"_status").text(" 排水中")
                  } else if (reclaimedwater_tank_status[i] == 'R_Stand_by') {
                    $("#DM_ReclaimedWater_"+parseInt(i+1)+"_bar").css("background-color", "HotPink")
                    $("#DM_ReclaimedWater_"+parseInt(i+1)+"_status").text(" 待命")
                  } else if (reclaimedwater_tank_status[i] == 'R_Warning') {
                    console.log('[動作] R桶警告 R' + parseInt(i+1) + ' 警告')
                    $("#DM_ReclaimedWater_"+parseInt(i+1)+"_bar").css("background-color", "crimson")
                    $("#DM_ReclaimedWater_"+parseInt(i+1)+"_status").text(" 警告")

                  } else {
                    console.log('pass')
                  }                
            }

            // 狀態 色選機            
            for (let i=0; i<colorselect_tank_status.length; i++) {
                if (colorselect_tank_status[i] == 'S_InputtingBean') {
                    $("#DM_ColorSelect_"+parseInt(i+1)+"_bar").css("background-color", "MediumSeaGreen")
                    $("#DM_ColorSelect_"+parseInt(i+1)+"_status").text("入豆中")
                } else if (colorselect_tank_status[i] == 'S_Waiting') {
                    $("#DM_ColorSelect_"+parseInt(i+1)+"_bar").css("background-color", "lightgray")
                    $("#DM_ColorSelect_"+parseInt(i+1)+"_status").text("空桶等待")
                } else if (colorselect_tank_status[i] == 'S_OutputtingBean') {
                    $("#DM_ColorSelect_"+parseInt(i+1)+"_bar").css("background-color", "MediumSeaGreen")
                    $("#DM_ColorSelect_"+parseInt(i+1)+"_status").text("可出豆")
                } else if (colorselect_tank_status[i] == 'S_Warning') {
                    $("#DM_ColorSelect_"+parseInt(i+1)+"_bar").css("background-color", "crimson")
                    $("#DM_ColorSelect_"+parseInt(i+1)+"_status").text("發生錯誤")
                } else {
                    console.log('DM_ColorSelect pass')
                }
            }
            // 狀態 脫皮機
            for (let i=0; i<peel_tank_status.length; i++) {
                if (peel_tank_status[i] == 'P_InputtingBean') {
                    $("#DM_Peel_"+parseInt(i+1)+"_bar").css("background-color", "MediumSeaGreen")
                    $("#DM_Peel_"+parseInt(i+1)+"_status").text("入豆中")
                } else if (peel_tank_status[i] == 'P_Waiting') {
                    $("#DM_Peel_"+parseInt(i+1)+"_bar").css("background-color", "lightgray")
                    $("#DM_Peel_"+parseInt(i+1)+"_status").text("空桶等待")
                } else if (peel_tank_status[i] == 'P_OutputtingBean') {
                    $("#DM_Peel_"+parseInt(i+1)+"_bar").css("background-color", "MediumSeaGreen")
                    $("#DM_Peel_"+parseInt(i+1)+"_status").text("可出豆")
                } else if (peel_tank_status[i] == 'P_Warning') {
                    $("#DM_Peel_"+parseInt(i+1)+"_bar").css("background-color", "crimson")
                    $("#DM_Peel_"+parseInt(i+1)+"_status").text("發生錯誤")
                } else {
                    console.log('DM_DM_Peel pass')
                }
            }            
            // 狀態 發酵槽 1
            for (let i=0; i<ferment_tank_status.length; i++) {
                if (ferment_tank_status[i] == 'F_InputtingBean') {
                    $("#DM_Ferment_"+parseInt(i+1)+"_bar").css("background-color", "MediumSeaGreen")
                    $("#DM_Ferment_"+parseInt(i+1)+"_status").text("入豆中")
                } else if (ferment_tank_status[i] == 'F_Waiting') {
                    $("#DM_Ferment_"+parseInt(i+1)+"_bar").css("background-color", "lightgray")
                    $("#DM_Ferment_"+parseInt(i+1)+"_status").text("空桶等待")
                } else if (ferment_tank_status[i] == 'F_OutputtingBean') {
                    $("#DM_Ferment_"+parseInt(i+1)+"_bar").css("background-color", "MediumSeaGreen")
                    $("#DM_Ferment_"+parseInt(i+1)+"_status").text("可出豆")
                } else if (ferment_tank_status[i] == 'F_InputtingBean_Pause') {
                    $("#DM_Ferment_"+parseInt(i+1)+"_bar").css("background-color", "MediumSeaGreen")
                    $("#DM_Ferment_"+parseInt(i+1)+"_status").text("入豆暫停")
                } else if (ferment_tank_status[i] == 'F_InputtingBean_Finish') {
                    $("#DM_Ferment_"+parseInt(i+1)+"_bar").css("background-color", "MediumSeaGreen")
                    $("#DM_Ferment_"+parseInt(i+1)+"_status").text("入豆完成")
                } else if (ferment_tank_status[i] == 'F_InputtingWater') {
                    $("#DM_Ferment_"+parseInt(i+1)+"_bar").css("background-color", "MediumSeaGreen")
                    $("#DM_Ferment_"+parseInt(i+1)+"_status").text("入水中")
                } else if (ferment_tank_status[i] == 'F_Fermenting') {
                    $("#DM_Ferment_"+parseInt(i+1)+"_bar").css("background-color", "MediumSeaGreen")
                    $("#DM_Ferment_"+parseInt(i+1)+"_status").text("發酵中")
                } else if (ferment_tank_status[i] == 'F_Warning') {
                    $("#DM_Ferment_"+parseInt(i+1)+"_bar").css("background-color", "crimson")
                    $("#DM_Ferment_"+parseInt(i+1)+"_status").text("發生錯誤")
                } else {
                    console.log('DM_Ferment pass')
                }
            }
           
            // 狀態 乾燥槽
            for (let i=0; i<dry_tank_status.length; i++) {
                if (dry_tank_status[i] == 'D_InputtingBean') {
                    $("#DM_Dry_"+parseInt(i+1)+"_bar").css("background-color", "MediumSeaGreen")
                    $("#DM_Dry_"+parseInt(i+1)+"_status").text("入豆中")
                } else if (dry_tank_status[i] == 'D_Waiting') {
                    $("#DM_Dry_"+parseInt(i+1)+"_bar").css("background-color", "lightgray")
                    $("#DM_Dry_"+parseInt(i+1)+"_status").text("空桶等待")
                } else if (dry_tank_status[i] == 'D_InputtingWater') {
                      $("#DM_Dry_"+parseInt(i+1)+"_bar").css("background-color", "DeepSkyBlue")
                      $("#DM_Dry_"+parseInt(i+1)+"_status").text(" 外桶入水中")
                } else if (dry_tank_status[i] == 'D_Drying') {
                    $("#DM_Dry_"+parseInt(i+1)+"_bar").css("background-color", "MediumSeaGreen")
                    $("#DM_Dry_"+parseInt(i+1)+"_status").text("乾燥中")
                } else if (dry_tank_status[i] == 'D_OutputtingBean') {
                    $("#DM_Dry_"+parseInt(i+1)+"_bar").css("background-color", "MediumSeaGreen")
                    $("#DM_Dry_"+parseInt(i+1)+"_status").text("可出豆")
                } else if (dry_tank_status[i] == 'D_Warning') {
                    $("#DM_Dry_"+parseInt(i+1)+"_bar").css("background-color", "crimson")
                    $("#DM_Dry_"+parseInt(i+1)+"_status").text("發生錯誤")
                } else {
                    console.log('DM_InputBean pass')
                }
            }
            
            for (let i=0; i<peel_output_status.length; i++) {
                if (peel_output_status[i] == 'PO_InputtingBean') {
                    $("#DM_OutputBean_"+parseInt(i+1)+"_bar").css("background-color", "MediumSeaGreen")
                    $("#DM_OutputBean_"+parseInt(i+1)+"_status").text(" 入豆中")

                  } else if (peel_output_status[i] == 'PO_Waiting') {
                    $("#DM_OutputBean_"+parseInt(i+1)+"_bar").css("background-color", "lightgray")
                    $("#DM_OutputBean_"+parseInt(i+1)+"_status").text(" 空桶等待")

                  } else if (peel_output_status[i] == 'PO_OutputtingBean') {
                    $("#DM_OutputBean_"+parseInt(i+1)+"_bar").css("background-color", "MediumSeaGreen")
                    $("#DM_OutputBean_"+parseInt(i+1)+"_status").text(" 可出豆")
                  } else if (peel_output_status[i] == 'PO_Stand_by') {
                    $("#DM_OutputBean_"+parseInt(i+1)+"_bar").css("background-color", "HotPink")
                    $("#DM_OutputBean_"+parseInt(i+1)+"_status").text(" 待命")

                  } else {
                    console.log('pass')
                  }                
            }
            for (let i=0; i<peel_outputb_status.length; i++) {
                if (peel_outputb_status[i] == 'PO_InputtingBean') {
                    $("#DM_BadBean_"+parseInt(i+1)+"_bar").css("background-color", "MediumSeaGreen")
                    $("#DM_BadBean_"+parseInt(i+1)+"_status").text(" 入豆中")

                  } else if (peel_outputb_status[i] == 'PO_Waiting') {
                    $("#DM_BadBean_"+parseInt(i+1)+"_bar").css("background-color", "lightgray")
                    $("#DM_BadBean_"+parseInt(i+1)+"_status").text(" 空桶等待")

                  } else if (peel_outputb_status[i] == 'PO_OutputtingBean') {
                    $("#DM_BadBean_"+parseInt(i+1)+"_bar").css("background-color", "MediumSeaGreen")
                    $("#DM_BadBean_"+parseInt(i+1)+"_status").text(" 可出豆")
                  } else if (peel_outputb_status[i] == 'PO_Stand_by') {
                    $("#DM_BadBean_"+parseInt(i+1)+"_bar").css("background-color", "HotPink")
                    $("#DM_BadBean_"+parseInt(i+1)+"_status").text(" 待命")

                  } else {
                    console.log('pass')
                  }                
            }         
          },'json');
        }
        setInterval('myrefresh()',1000);
    </script>
{% endblock %}
{% block style %}        
    <style>
        /* 各桶槽狀態大小的共同 CSS */
        .div_DryTank_position {
            text-align: center;
            font-weight: bold;
            border: 0px aquamarine solid;
        }
        .td-clickable:hover {
            /* background-color: rgb(238, 236, 236); */
            background-color: lavender;
            transition-duration: 0.5s;
            cursor: pointer;
        }
        /* 桶槽狀態顯示的顏色條 */
        .div_DryTank_Status {
            height: 20px; 
            border-style: solid; 
            border-color: whitesmoke; 
            background-color: black;
        
        }
        /* 制動器狀態的圈圈 */
        .actuator_status {
            width: 18px; 
            height: 18px; 
            background-color:black; 
            border-radius: 50%;
        }
        /* 狀態外框的 CSS */
        .table_css {
            border: 0px lightsteelblue solid; 
            margin-right: auto; 
            margin-left: auto; 
            text-align: center; 
            margin-top: 5px; 
            width: 80%;
        }
    </style>
{% endblock %}

{% block main %}
        <!-- 乾燥槽 互動視窗(模态框) -->
        <div class="modal fade" id="D_Modal">
            <div class="modal-dialog modal-dialog-centered" style="width: 400px;">
                <div class="modal-content">

                    <!-- 互動視窗 標題 -->
                    <div class="modal-header">
                        <h4 id="Modal_title" class="modal-title">乾燥槽 D1 狀態</h4>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>

                    <!-- 互動視窗 內容 -->
                    <div class="modal-body">
                        <table style="border:0px gray solid; width: 100%;" cellpadding="3">
                            <!--<table style="border:0px gray solid;-->
                            <tr>
                                <td><strong><a id="actuator_link" href="">制動器狀態</a></strong></td>
                                <td><strong><a id="sensor_link" href="">感測器狀態</a></strong></td>
                            </tr>
                            <tr>
                                <td style="vertical-align:text-top;">
                                    <table style="border:0px gray solid;" cellpadding="3">
                                        <!--font-size:12px; -->
                                        <tr>
                                            <td>
                                                <div id="tank_vacuum_status" class="actuator_status">
                                                </div>
                                            </td>
                                            <td>
                                                <a id="Vacuum" href="">真空吸料機</a>
                                                <!--<span id="tank_vacuum_t_status"></span>-->
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <div id="tank_threewayvalve_input_status" class="actuator_status">
                                                </div>
                                            </td>
                                            <td>
                                                <a id="ThreeWayValveInput" href="">入料三通閥</a>
                                                <!--<span id="tank_threewayvalve_t_status"></span>-->
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <div id="tank_threewayvalve_bean_status" class="actuator_status">
                                                </div>
                                            </td>
                                            <td>
                                                <a id="ThreeWayValveBean" href="">測豆三通閥</a>
                                                <!--<span id="tank_threewayvalve_t_status"></span>-->
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <div id="tank_solenoid_disinfect_status" class="actuator_status">
                                                </div>
                                            </td>
                                            <td>
                                                <a id="SolenoidDisinfect" href="">消毒電磁閥</a>
                                                <!--<span id="tank_solenoid_disinfect_t_status"></span>-->
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <div id="tank_motor_status" class="actuator_status">
                                                </div>
                                            </td>
                                            <td>
                                                <a id="Motor" href="">馬達</a>
                                                <!--<span id="tank_motor_t_status"></span>-->
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <div id="tank_blower_status" class="actuator_status">
                                                </div>
                                            </td>
                                            <td>
                                                <a id="Blower" href="">鼓風機</a>
                                                <!--<span id="tank_blower_t_status"></span>-->
                                            </td>
                                        </tr>

                                        <tr>
                                            <td>
                                                <div id="tank_heater1_status" class="actuator_status">
                                                </div>
                                            </td>
                                            <td>
                                                <a id="Heater1" href="">加熱器 1</a>
                                                <!--<span id="tank_heater1_t_status"></span>-->
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <div id="tank_heater2_status" class="actuator_status">
                                                </div>
                                            </td>
                                            <td>
                                                <a id="Heater2" href="">加熱器 2</a>
                                                <!--<span id="tank_heater2_t_status"></span>-->
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <div id="tank_temp1_enable_status" class="actuator_status">
                                                </div>

                                            </td>
                                            <td>
                                                <a id="TempEnable" href="">溫控開關</a>
                                                <!--<span id="tank_temp1_enable_t_status"></span>-->
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <div id="tank_temp1_status" class="actuator_status">
                                                </div>
                                            </td>
                                            <td>
                                                <a id="Temp" href="">設定溫度</a>
                                                <!--<span id="tank_temp1_t_status"></span>-->
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <div id="tank_solenoid_water_status" class="actuator_status">
                                                </div>
                                            </td>
                                            <td>
                                                <a id="SolenoidWater" href="">排水電磁閥</a>
                                                <!--<span id="tank_solenoid_water_t_status"></span>-->
                                            </td>
                                        </tr>

                                        <tr>
                                            <td>
                                                <div id="tank_diskvalve_status" class="actuator_status">
                                                </div>
                                            </td>
                                            <td>
                                                <a id="DiskValve" href="">蝴蝶閥</a>
                                                <!--<span id="tank_diskvalve_t_status"></span>-->
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                                <td style="vertical-align:text-top;">
                                    <table style="border:0px gray solid;" cellpadding="3">
                                        <!--font-size:12px; -->
                                        <tr>
                                            <td>
                                                <a id="UltraSonic" href="">咖啡生豆高度</a>
                                            </td>
                                            <td>
                                                <span id="UltraSonic_t_status"></span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <a id="SHT11_Temp" href="">乾燥槽溫度</a>
                                            </td>
                                            <td>
                                                <span id="SHT11_Temp_t_status"></span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <a id="SHT11_Humidity" href="">乾燥槽濕度</a>
                                            </td>
                                            <td>
                                                <span id="SHT11_Humidity_t_status"></span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <a id="soil_Temp" href="">咖啡生豆溫度</a>
                                            </td>
                                            <td>
                                                <span id="soil_Temp_t_status"></span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <a id="soil_Humidity" href="">咖啡生豆濕度</a>
                                            </td>
                                            <td>
                                                <span id="soil_Humidity_t_status"></span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <a id="soil_EC" href="">咖啡生豆 EC</a>
                                            </td>
                                            <td>
                                                <span id="soil_EC_t_status"></span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <a id="PA" href="">桶內壓力</a>
                                            </td>
                                            <td>
                                                <span id="PA_t_status"></span>
                                            </td>
                                        </tr>

                                        <tr>
                                            <td>
                                                <a id="camera_dry_tid" href=""><strong>攝影機畫面</strong></a>
                                            </td>
                                        </tr>

                                    </table>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- 入料儲豆槽 互動視窗(模态框) -->
        <div class="modal fade" id="IB_Modal">
            <div class="modal-dialog modal-dialog-centered" style="width: 400px;">
                <div class="modal-content">

                    <!-- 互動視窗 標題 -->
                    <div class="modal-header">
                        <h4 id="Modal_IB_title" class="modal-title">入料儲豆槽 IB 狀態</h4>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>

                    <!-- 互動視窗 內容 -->
                    <div class="modal-body">
                        <table style="border:0px gray solid; width: 100%;" cellpadding="3">
                            <!--<table style="border:0px gray solid;-->
                            <tr>
                                <td><strong><a id="actuator_link" href="">制動器狀態</a></strong></td>
                                <td><strong><a id="sensor_link" href="">感測器狀態</a></strong></td>
                            </tr>
                            <tr>
                                <td style="vertical-align:text-top;">
                                    <table style="border:0px gray solid;" cellpadding="3">
                                        <!--font-size:12px; -->
                                        <tr>
                                            <td>
                                                <div id="tank_vacuum_status" class="actuator_status">
                                                </div>
                                            </td>
                                            <td>
                                                <a id="Vacuum" href="">真空吸料機</a>
                                                <!--<span id="tank_vacuum_t_status"></span>-->
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                                <td style="vertical-align:text-top;">
                                    <table style="border:0px gray solid;" cellpadding="3">
                                        <!--font-size:12px; -->
                                        <tr>
                                            <td>
                                                <a id="UltraSonic" href="">咖啡生豆高度</a>
                                            </td>
                                            <td>
                                                <span id="UltraSonic_t_status"></span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <a id="camera_dry_tid" href=""><strong>攝影機畫面</strong></a>
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- 清洗槽 互動視窗(模态框) -->
        <div class="modal fade" id="C_Modal">
            <div class="modal-dialog modal-dialog-centered" style="width: 400px;">
                <div class="modal-content">

                    <!-- 互動視窗 標題 -->
                    <div class="modal-header">
                        <h4 id="Modal_C_title" class="modal-title">入料儲豆槽 IB 狀態</h4>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>

                    <!-- 互動視窗 內容 -->
                    <div class="modal-body">
                        <table style="border:0px gray solid; width: 100%;" cellpadding="3">
                            <!--<table style="border:0px gray solid;-->
                            <tr>
                                <td><strong><a id="actuator_link" href="">制動器狀態</a></strong></td>
                                <td><strong><a id="sensor_link" href="">感測器狀態</a></strong></td>
                            </tr>
                            <tr>
                                <td style="vertical-align:text-top;">
                                    <table style="border:0px gray solid;" cellpadding="3">
                                        <!--font-size:12px; -->
                                        <tr>
                                            <td>
                                                <div id="tank_vacuum_status" class="actuator_status">
                                                </div>
                                            </td>
                                            <td>
                                                <a id="Vacuum" href="">真空吸料機</a>
                                                <!--<span id="tank_vacuum_t_status"></span>-->
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                                <td style="vertical-align:text-top;">
                                    <table style="border:0px gray solid;" cellpadding="3">
                                        <!--font-size:12px; -->
                                        <tr>
                                            <td>
                                                <a id="UltraSonic" href="">咖啡生豆高度</a>
                                            </td>
                                            <td>
                                                <span id="UltraSonic_t_status"></span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <a id="camera_dry_tid" href=""><strong>攝影機畫面</strong></a>
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- 中水桶 互動視窗(模态框) -->
        <div class="modal fade" id="RW_Modal">
            <div class="modal-dialog modal-dialog-centered" style="width: 400px;">
                <div class="modal-content">

                    <!-- 互動視窗 標題 -->
                    <div class="modal-header">
                        <h4 id="Modal_RW_title" class="modal-title">入料儲豆槽 IB 狀態</h4>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>

                    <!-- 互動視窗 內容 -->
                    <div class="modal-body">
                        <table style="border:0px gray solid; width: 100%;" cellpadding="3">
                            <!--<table style="border:0px gray solid;-->
                            <tr>
                                <td><strong><a id="actuator_link" href="">制動器狀態</a></strong></td>
                                <td><strong><a id="sensor_link" href="">感測器狀態</a></strong></td>
                            </tr>
                            <tr>
                                <td style="vertical-align:text-top;">
                                    <table style="border:0px gray solid;" cellpadding="3">
                                        <!--font-size:12px; -->
                                        <tr>
                                            <td>
                                                <div id="tank_vacuum_status" class="actuator_status">
                                                </div>
                                            </td>
                                            <td>
                                                <a id="Vacuum" href="">真空吸料機</a>
                                                <!--<span id="tank_vacuum_t_status"></span>-->
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                                <td style="vertical-align:text-top;">
                                    <table style="border:0px gray solid;" cellpadding="3">
                                        <!--font-size:12px; -->
                                        <tr>
                                            <td>
                                                <a id="UltraSonic" href="">咖啡生豆高度</a>
                                            </td>
                                            <td>
                                                <span id="UltraSonic_t_status"></span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <a id="camera_dry_tid" href=""><strong>攝影機畫面</strong></a>
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- 色選機 互動視窗(模态框) -->
        <div class="modal fade" id="CS_Modal">
            <div class="modal-dialog modal-dialog-centered" style="width: 400px;">
                <div class="modal-content">

                    <!-- 互動視窗 標題 -->
                    <div class="modal-header">
                        <h4 id="Modal_CS_title" class="modal-title">入料儲豆槽 IB 狀態</h4>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>

                    <!-- 互動視窗 內容 -->
                    <div class="modal-body">
                        <table style="border:0px gray solid; width: 100%;" cellpadding="3">
                            <!--<table style="border:0px gray solid;-->
                            <tr>
                                <td><strong><a id="actuator_link" href="">制動器狀態</a></strong></td>
                                <td><strong><a id="sensor_link" href="">感測器狀態</a></strong></td>
                            </tr>
                            <tr>
                                <td style="vertical-align:text-top;">
                                    <table style="border:0px gray solid;" cellpadding="3">
                                        <!--font-size:12px; -->
                                        <tr>
                                            <td>
                                                <div id="tank_vacuum_status" class="actuator_status">
                                                </div>
                                            </td>
                                            <td>
                                                <a id="Vacuum" href="">真空吸料機</a>
                                                <!--<span id="tank_vacuum_t_status"></span>-->
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                                <td style="vertical-align:text-top;">
                                    <table style="border:0px gray solid;" cellpadding="3">
                                        <!--font-size:12px; -->
                                        <tr>
                                            <td>
                                                <a id="UltraSonic" href="">咖啡生豆高度</a>
                                            </td>
                                            <td>
                                                <span id="UltraSonic_t_status"></span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <a id="camera_dry_tid" href=""><strong>攝影機畫面</strong></a>
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- 脫皮機 互動視窗(模态框) -->
        <div class="modal fade" id="P_Modal">
            <div class="modal-dialog modal-dialog-centered" style="width: 400px;">
                <div class="modal-content">

                    <!-- 互動視窗 標題 -->
                    <div class="modal-header">
                        <h4 id="Modal_P_title" class="modal-title">入料儲豆槽 IB 狀態</h4>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>

                    <!-- 互動視窗 內容 -->
                    <div class="modal-body">
                        <table style="border:0px gray solid; width: 100%;" cellpadding="3">
                            <!--<table style="border:0px gray solid;-->
                            <tr>
                                <td><strong><a id="actuator_link" href="">制動器狀態</a></strong></td>
                                <td><strong><a id="sensor_link" href="">感測器狀態</a></strong></td>
                            </tr>
                            <tr>
                                <td style="vertical-align:text-top;">
                                    <table style="border:0px gray solid;" cellpadding="3">
                                        <tr>
                                            <td>
                                                <div id="P_vacuum_status" class="actuator_status">
                                                </div>
                                                
                                            </td>
                                            <td>
                                                真空吸料機
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <div id="tank_motor_status" class="actuator_status">
                                                </div>
                                            </td>
                                            <td>
                                                馬達
                                            </td>
                                        </tr>
                                    </table> 
                                </td>
                                <td style="vertical-align:text-top;">
                                    <table style="border:0px gray solid;" cellpadding="3">
                                        <!--font-size:12px; -->
                                        <tr>
                                            <td>
                                                <a id="UltraSonic" href="">咖啡生豆高度</a>
                                            </td>
                                            <td>
                                                <span id="UltraSonic_t_status"></span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <a id="camera_dry_tid" href=""><strong>攝影機畫面</strong></a>
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- 發酵槽 互動視窗(模态框) -->
        <div class="modal fade" id="F_Modal">
            <div class="modal-dialog modal-dialog-centered" style="width: 400px;">
                <div class="modal-content">

                    <!-- 互動視窗 標題 -->
                    <div class="modal-header">
                        <h4 id="Modal_F_title" class="modal-title">入料儲豆槽 IB 狀態</h4>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>

                    <!-- 互動視窗 內容 -->
                    <div class="modal-body">
                        <table style="border:0px gray solid; width: 100%;" cellpadding="3">
                            <!--<table style="border:0px gray solid;-->
                            <tr>
                                <td><strong><a id="actuator_link" href="">制動器狀態</a></strong></td>
                                <td><strong><a id="sensor_link" href="">感測器狀態</a></strong></td>
                            </tr>
                            <tr>
                                <td style="vertical-align:text-top;">
                                    <table style="border:0px gray solid;" cellpadding="3">
                                        <!--font-size:12px; -->
                                        <tr>
                                            <td>
                                                <div id="tank_vacuum_status"
                                                    style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
                                                </div>
                                            </td>
                                            <td>
                                                <a id="Vacuum" href="">真空吸料機</a>
                                                <!--<span id="tank_vacuum_t_status"></span>-->
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <div id="tank_threewayvalve_input_status"
                                                    style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
                                                </div>
                                            </td>
                                            <td>
                                                <a id="ThreeWayValveInput" href="">入料三通閥</a>
                                                <!--<span id="tank_threewayvalve_input_t_status"></span>-->
                                            </td>
                                        </tr>
                                        <!-- <tr>
                                            <td>
                                                <div id="tank_solenoid_water_total_status"
                                                    style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
                                                </div>
                                            </td>
                                            <td>
                                                <a id="SolenoidWaterTotal" href="">總進水電磁閥</a>
                                                <span id="tank_solenoid_water_total_t_status"></span>
                                            </td>
                                        </tr> -->
                                        <tr>
                                            <td>
                                                <div id="outer_solenoid_water_status"
                                                    style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
                                                </div>
                                            </td>
                                            <td>
                                                <a id="SolenoidOuterWater" href="">保溫夾層進水電磁閥</a>
                                                <!--<span id="outer_solenoid_water_t_status"></span>-->
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <div id="tank_solenoid_water_in_status"
                                                    style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
                                                </div>
                                            </td>
                                            <td>
                                                <a id="SolenoidWaterIn" href="">桶內進水電磁閥</a>
                                                <!--<span id="tank_solenoid_water_in_t_status"></span>-->
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <div id="tank_pump_sensor_status"
                                                    style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
                                                </div>
                                            </td>
                                            <td>
                                                <a id="PumpSensor" href="">感測器抽水雙核隔膜泵</a>
                                                <!--<span id="tank_pump_sensor_t_status"></span>-->
                                            </td>
                                        </tr>
                                        <!-- <tr>
                                            <td>
                                                <div id="tank_threewayvalve_bean_status"
                                                    style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
                                                </div>
                                            </td>
                                            <td>
                                                <a id="ThreeWayValveBean" href="">感測模組下豆三通閥</a>
                                                <span id="tank_threewayvalve_bean_t_status"></span>
                                            </td>
                                        </tr> -->
                                        <tr>
                                            <td>
                                                <div id="outer_threewayvalve_float_status"
                                                    style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
                                                </div>
                                            </td>
                                            <td>
                                                <a id="ThreeWayValveFloat" href="">外桶浮選三通閥</a>
                                                <!--<span id="outer_threewayvalve_float_t_status"></span>-->
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <div id="tank_solenoid_disinfect_status"
                                                    style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
                                                </div>
                                            </td>
                                            <td>
                                                <a id="SolenoidDisinfect" href="">桶內消毒電磁閥</a>
                                                <!--<span id="tank_solenoid_disinfect_t_status"></span>-->
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <div id="tank_motor_status"
                                                    style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
                                                </div>
                                            </td>
                                            <td>
                                                <a id="Motor" href="">馬達</a>
                                                <!--<span id="tank_motor_t_status"></span>-->
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <div id="tank_heater1_status"
                                                    style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
                                                </div>
                                            </td>
                                            <td>
                                                <a id="Heater1" href="">加熱器 1</a>
                                                <!--<span id="tank_heater1_t_status"></span>-->
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <div id="tank_heater2_status"
                                                    style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
                                                </div>                                                
                                            </td>
                                            <td>
                                                <a id="Heater2" href="">加熱器 2</a>
                                                <!--<span id="tank_heater2_t_status"></span>-->
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <div id="tank_temp_enable_status"
                                                    style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
                                                </div>
                                            </td>
                                            <td>
                                                <a id="TempEnable" href="">溫控開關</a>
                                                <!--<span id="tank_temp_enable_t_status"></span>-->
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <div id="tank_temp_status"
                                                    style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
                                                </div>
                                            </td>
                                            <td>
                                                <a id="temp" href="">溫度設定</a>
                                                <!--<span id="tank_temp_t_status"></span>-->
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <div id="tank_diskvalve_status"
                                                    style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
                                                </div>
                                            </td>
                                            <td>
                                                <a id="DiskValve" href="">蝴蝶閥</a>
                                            <!--<span id="tank_diskvalve_t_status"></span>-->
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                                <td style="vertical-align:text-top;">
                                    <table style="border:0px gray solid;" cellpadding="3">
                                        <!--font-size:12px; -->
                                        <tr>
                                            <td>
                                                <a id="UltraSonic" href="">水位/生豆高度</a>
                                            </td>
                                            <td>
                                                <span id="UltraSonic_t_status"></span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <a id="motorEncoder" href="">馬達編碼器</a>
                                            </td>
                                            <td>
                                                <span id="motorEncoder_t_status"></span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <a id="SHT11_Temp" href="">溫度</a>
                                            </td>
                                            <td>
                                                <span id="SHT11_Temp_t_status"></span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <a id="SHT11_Humidity" href="">濕度</a>
                                            </td>
                                            <td>
                                                <span id="SHT11_Humidity_t_status"></span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <a id="CO2" href="">二氧化碳</a>
                                            </td>
                                            <td>
                                                <span id="CO2_t_status"></span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <a id="PA" href="">大氣壓力</a>
                                            </td>
                                            <td>
                                                <span id="PA_t_status"></span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <a id="PH" href="">PH</a>
                                            </td>
                                            <td>
                                                <span id="PH_t_status"></span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <a id="ORP" href="">ORP</a>
                                            </td>
                                            <td>
                                                <span id="ORP_t_status"></span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <a id="DO" href="">DO</a>
                                            </td>
                                            <td>
                                                <span id="DO_t_status"></span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <a id="EC" href="">EC</a>
                                            </td>
                                            <td>
                                                <span id="EC_t_status"></span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                保溫夾層水位
                                            </td>
                                            <td>
                                                <!-- 滿 / 未滿 -->
                                                <span id="WaterLevel_t_status"></span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <a id="camera_ferment_tid" href=""><strong>攝影機畫面</strong></a>
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- 乾燥槽 互動視窗(模态框) -->
        <div class="modal fade" id="D_Modal">
            <div class="modal-dialog modal-dialog-centered" style="width: 400px;">
                <div class="modal-content">

                    <!-- 互動視窗 標題 -->
                    <div class="modal-header">
                        <h4 id="Modal_D_title" class="modal-title">入料儲豆槽 IB 狀態</h4>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>

                    <!-- 互動視窗 內容 -->
                    <div class="modal-body">
                        <table style="border:0px gray solid; width: 100%;" cellpadding="3">
                            <!--<table style="border:0px gray solid;-->
                            <tr>
                                <td><strong><a id="actuator_link" href="">制動器狀態</a></strong></td>
                                <td><strong><a id="sensor_link" href="">感測器狀態</a></strong></td>
                            </tr>
                            <tr>
                                <td style="vertical-align:text-top;">
                                    <table style="border:0px gray solid;" cellpadding="3">
                                        <!--font-size:12px; -->
                                        <tr>
                                            <td>
                                                <div id="tank_vacuum_status" class="actuator_status">
                                                </div>
                                            </td>
                                            <td>
                                                <a id="Vacuum" href="">真空吸料機</a>
                                                <!--<span id="tank_vacuum_t_status"></span>-->
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                                <td style="vertical-align:text-top;">
                                    <table style="border:0px gray solid;" cellpadding="3">
                                        <!--font-size:12px; -->
                                        <tr>
                                            <td>
                                                <a id="UltraSonic" href="">咖啡生豆高度</a>
                                            </td>
                                            <td>
                                                <span id="UltraSonic_t_status"></span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <a id="camera_dry_tid" href=""><strong>攝影機畫面</strong></a>
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- 壞果儲豆槽 互動視窗(模态框) -->
        <div class="modal fade" id="BB_Modal">
            <div class="modal-dialog modal-dialog-centered" style="width: 400px;">
                <div class="modal-content">

                    <!-- 互動視窗 標題 -->
                    <div class="modal-header">
                        <h4 id="Modal_BB_title" class="modal-title">入料儲豆槽 IB 狀態</h4>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>

                    <!-- 互動視窗 內容 -->
                    <div class="modal-body">
                        <table style="border:0px gray solid; width: 100%;" cellpadding="3">
                            <!--<table style="border:0px gray solid;-->
                            <tr>
                                <td><strong><a id="actuator_link" href="">制動器狀態</a></strong></td>
                                <td><strong><a id="sensor_link" href="">感測器狀態</a></strong></td>
                            </tr>
                            <tr>
                                <td style="vertical-align:text-top;">
                                    <table style="border:0px gray solid;" cellpadding="3">
                                        <!--font-size:12px; -->
                                        <tr>
                                            <td>
                                                <div id="tank_vacuum_status" class="actuator_status">
                                                </div>
                                            </td>
                                            <td>
                                                <a id="Vacuum" href="">真空吸料機</a>
                                                <!--<span id="tank_vacuum_t_status"></span>-->
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                                <td style="vertical-align:text-top;">
                                    <table style="border:0px gray solid;" cellpadding="3">
                                        <!--font-size:12px; -->
                                        <tr>
                                            <td>
                                                <a id="UltraSonic" href="">咖啡生豆高度</a>
                                            </td>
                                            <td>
                                                <span id="UltraSonic_t_status"></span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <a id="camera_dry_tid" href=""><strong>攝影機畫面</strong></a>
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- 出料儲豆槽 互動視窗(模态框) -->
        <div class="modal fade" id="OB_Modal">
            <div class="modal-dialog modal-dialog-centered" style="width: 400px;">
                <div class="modal-content">

                    <!-- 互動視窗 標題 -->
                    <div class="modal-header">
                        <h4 id="Modal_OB_title" class="modal-title">入料儲豆槽 IB 狀態</h4>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>

                    <!-- 互動視窗 內容 -->
                    <div class="modal-body">
                        <table style="border:0px gray solid; width: 100%;" cellpadding="3">
                            <!--<table style="border:0px gray solid;-->
                            <tr>
                                <td><strong><a id="actuator_link" href="">制動器狀態</a></strong></td>
                                <td><strong><a id="sensor_link" href="">感測器狀態</a></strong></td>
                            </tr>
                            <tr>
                                <td style="vertical-align:text-top;">
                                    <table style="border:0px gray solid;" cellpadding="3">
                                        <!--font-size:12px; -->
                                        <tr>
                                            <td>
                                                <div id="tank_vacuum_status" class="actuator_status">
                                                </div>
                                            </td>
                                            <td>
                                                <a id="Vacuum" href="">真空吸料機</a>
                                                <!--<span id="tank_vacuum_t_status"></span>-->
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                                <td style="vertical-align:text-top;">
                                    <table style="border:0px gray solid;" cellpadding="3">
                                        <!--font-size:12px; -->
                                        <tr>
                                            <td>
                                                <a id="UltraSonic" href="">咖啡生豆高度</a>
                                            </td>
                                            <td>
                                                <span id="UltraSonic_t_status"></span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <a id="camera_dry_tid" href=""><strong>攝影機畫面</strong></a>
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>        

  <div class="album py-5 bg-light">
    <div class="container">

      <div class="row row-cols-1 row-cols-sm-1 row-cols-md-1 g-3">
        <div class="col">
          <div class="card shadow-sm">
            <div class="card-body">
              <div class="d-flex justify-content-between align-items-center">
                <table class="table_css" cellpadding="6" border="1" style="width: 100%" >
                <tr>
                    <td class="td-clickable" width="14%" style="border: lightsteelblue 1px solid;">
                        <div id="DM_InputBean_1" tabindex="0" class="div_DryTank_position" role="button">
                            <span class="demo_status_css">CI1</span><br>
                            <span id="DM_InputBean_1_status" class="demo_status_css"></span>
                        </div>
                    </td>
                    <td style="width: 10px; font-weight: 900; border: lightsteelblue 1px solid;">
                        入料
                    </td>
                    <td class="td-clickable" width="14%" style="border: lightsteelblue 1px solid;">
                        <div id="DM_Clean_1" tabindex="0" class="div_DryTank_position" role="button">
                            <span class="demo_status_css">C1</span><br>
                            <span id="DM_Clean_1_status" class="demo_status_css"></span>
                            
                        </div>
                    </td>
                    <td class="td-clickable" width="14%" style="border: lightsteelblue 1px solid;">
                        <div id="DM_ReclaimedWater_1" tabindex="0" class="div_DryTank_position" role="button">
                            <span class="demo_status_css">R1</span><br>
                            <span id="DM_ReclaimedWater_1_status" class="demo_status_css"></span>
                            
                        </div>
                    </td>
                    <td class="td-clickable" width="14%" style="border: lightsteelblue 1px solid;">
                        <div id="DM_ColorSelect_1" tabindex="0" class="div_DryTank_position" role="button">
                            <span class="demo_status_css">S1</span><br>
                            <span id="DM_ColorSelect_1_status" class="demo_status_css"></span>
                            
                        </div>
                    </td>
                    <td class="td-clickable" width="14%" style="border: lightsteelblue 1px solid;">
                        <div id="DM_Peel_1" tabindex="0" class="div_DryTank_position" role="button">
                            <span class="demo_status_css">P1</span><br>
                            <span id="DM_Peel_1_status" class="demo_status_css"></span>
                            
                        </div>
                    </td>
                    <td class="td-clickable" width="14%" style="border: lightsteelblue 1px solid;">
                        <div id="DM_Ferment_1" tabindex="0" class="div_DryTank_position" role="button">
                            <span class="demo_status_css">F1</span><br>
                            <span id="DM_Ferment_1_status" class="demo_status_css"></span>
                            
                        </div>
                    </td>
                    <td style="width: 10px; font-weight: 900; border: lightsteelblue 1px solid;">
                        出料
                    </td>
                    <td class="td-clickable" width="14%" style="border: lightsteelblue 1px solid;">
                        <div id="DM_BadBean_1" tabindex="0" class="div_DryTank_position" role="button">
                            <span class="demo_status_css">BPO1</span><br>
                            <span id="DM_BadBean_1_status" class="demo_status_css"></span>
                            
                        </div>
                    </td>
                </tr>
                <tr>
                   <td style="border: lightsteelblue 1px solid;">
                     <center><div id="DM_InputBean_1_bar" class="div_DryTank_Status "></div></center>
                   </td>
                   <td style="border: lightsteelblue 1px solid;">
                   </td>
                   <td style="border: lightsteelblue 1px solid;">
                    <center><div id="DM_Clean_1_bar" class="div_DryTank_Status"></div></center>
                   </td>
                   <td style="border: lightsteelblue 1px solid;">
                     <center><div id="DM_ReclaimedWater_1_bar" class="div_DryTank_Status"></div></center>
                   </td>
                   <td style="border: lightsteelblue 1px solid;">
                     <center><div id="DM_ColorSelect_1_bar" class="div_DryTank_Status"></div></center>
                   </td>
                   <td style="border: lightsteelblue 1px solid;">
                     <center><div id="DM_Peel_1_bar" class="div_DryTank_Status"></div></center>
                   </td>
                   <td style="border: lightsteelblue 1px solid;">
                     <center><div id="DM_Ferment_1_bar" class="div_DryTank_Status"></div></center>
                   </td>
                   <td style="border: lightsteelblue 1px solid;">
                   </td>
                   <td style="border: lightsteelblue 1px solid;">
                     <center><div id="DM_BadBean_1_bar" class="div_DryTank_Status"></div></center>
                   </td>
                </tr>
              </table>
              </div>
            </div>
            <img src="../static/img/web_demo_container.png"  width="100%">
            <div class="card-body">
              <div class="d-flex justify-content-between align-items-center">
              <table class="table_css" cellpadding="6" border="1" style="width: 100%">
              <tr>
                    <td class="td-clickable" width="14%" style="border: lightsteelblue 1px solid;">
                        <div id="DM_InputBean_2" tabindex="0" class="div_DryTank_position" role="button">
                            <span class="demo_status_css">CI2</span><br>
                            <span id="DM_InputBean_2_status" class="demo_status_css"></span>
                            
                        </div>
                    </td>
                    <td style=" font-weight: 900; border: lightsteelblue 1px solid;">
                        入料
                    </td>
                    <td class="td-clickable" width="14%" style="border: lightsteelblue 1px solid;">
                        <div id="DM_Clean_2" tabindex="0" class="div_DryTank_position" role="button">
                            <span class="demo_status_css">C2</span><br>
                            <span id="DM_Clean_2_status" class="demo_status_css"></span>
                            
                        </div>
                    </td>
                    <td class="td-clickable" width="14%" style="border: lightsteelblue 1px solid;">
                        <div id="DM_ColorSelect_2" tabindex="0" class="div_DryTank_position" role="button">
                            <span class="demo_status_css">S2</span><br>
                            <span id="DM_ColorSelect_2_status" class="demo_status_css"></span>
                            
                        </div>
                    </td>
                    <td class="td-clickable" width="14%" style="border: lightsteelblue 1px solid;">
                        <div id="DM_Peel_2" tabindex="0" class="div_DryTank_position" role="button">
                            <span class="demo_status_css">P2</span><br>
                            <span id="DM_Peel_2_status" class="demo_status_css"></span>
                            
                        </div>
                    </td>
                    <td class="td-clickable" width="14%" style="border: lightsteelblue 1px solid;">
                        <div id="DM_Ferment_2" tabindex="0" class="div_DryTank_position" role="button">
                            <span class="demo_status_css">F2</span><br>
                            <span id="DM_Ferment_2_status" class="demo_status_css"></span>
                           
                        </div>
                    </td>
                    <td class="td-clickable" width="14%" style="border: lightsteelblue 1px solid;">
                        <div id="DM_Dry_1" tabindex="0" class="div_DryTank_position" role="button">
                            <span class="demo_status_css">D1</span><br>
                            <span id="DM_Dry_1_status" class="demo_status_css"></span>
                            
                        </div>
                    </td>
                    <td style=" font-weight: 900; border: lightsteelblue 1px solid;">
                        出料
                    </td>
                    <td class="td-clickable" width="14%" style="border: lightsteelblue 1px solid;">
                        <div id="DM_OutputBean_1" tabindex="0" class="div_DryTank_position" role="button">
                            <span class="demo_status_css">PO1</span><br>
                            <span id="DM_OutputBean_1_status" class="demo_status_css"></span>
                        </div>
                    </td>
                </tr>
                <tr>
                   <td style="border: lightsteelblue 1px solid;">
                     <center><div id="DM_InputBean_2_bar" class="div_DryTank_Status"></div></center>
                   </td>
                   <td style="border: lightsteelblue 1px solid;">
                   </td>
                   <td style="border: lightsteelblue 1px solid;">
                    <center><div id="DM_Clean_2_bar" class="div_DryTank_Status"></div></center>
                   </td>
                   <td style="border: lightsteelblue 1px solid;">
                     <center><div id="DM_ColorSelect_2_bar" class="div_DryTank_Status"></div></center>
                   </td>
                   <td style="border: lightsteelblue 1px solid;">
                     <center><div id="DM_Peel_2_bar" class="div_DryTank_Status"></div></center>
                   </td>
                   <td style="border: lightsteelblue 1px solid;">
                     <center><div id="DM_Ferment_2_bar" class="div_DryTank_Status"></div></center>
                   </td>
                   <td style="border: lightsteelblue 1px solid;">
                     <center><div id="DM_Dry_1_bar" class="div_DryTank_Status"></div></center>
                   </td>
                   <td style="border: lightsteelblue 1px solid;">
                   </td>
                   <td style="border: lightsteelblue 1px solid;">
                     <center><div id="DM_OutputBean_1_bar" class="div_DryTank_Status"></div></center>
                   </td>
                </tr>
              </table>
              </div>
            </div>
          </div>
        </div>
            
      </div>
    </div>
  </div>
{% endblock %}
{% block script2 %}
        <script>
            // modal D
            function update_data_D(dtid) {
                console.log('dry_tank_id:' + dtid)
                // dtid = dry_tank_id
                $.get('/loading/D' + dtid, '', function (res) {

                    if (res.tank_vacuum == 0) {
                        $("#tank_vacuum_status").css("background-color", "#C0C0C0")
                    } else if (res.tank_vacuum == 1) {
                        $("#tank_vacuum_status").css("background-color", "forestgreen")
                    } else { $("#tank_vacuum_status").css("background-color", "crimson") }

                    if (res.tank_threewayvalve_input == 0) {
                        $("#tank_threewayvalve_input_status").css("background-color", "#C0C0C0")
                    } else if (res.tank_threewayvalve_input == 1) {
                        $("#tank_threewayvalve_input_status").css("background-color", "forestgreen")
                    } else { $("#tank_threewayvalve_input_status").css("background-color", "crimson") }

                    if (res.tank_threewayvalve_bean == 0) {
                        $("#tank_threewayvalve_bean_status").css("background-color", "#C0C0C0")
                    } else if (res.tank_threewayvalve_bean == 1) {
                        $("#tank_threewayvalve_bean_status").css("background-color", "forestgreen")
                    } else { $("#tank_threewayvalve_bean_status").css("background-color", "crimson") }

                    if (res.tank_diskvalve == 0) {
                        $("#tank_diskvalve_status").css("background-color", "#C0C0C0")
                    } else if (res.tank_diskvalve == 1) {
                        $("#tank_diskvalve_status").css("background-color", "forestgreen")
                    } else { $("#tank_diskvalve_status").css("background-color", "crimson") }

                    if (res.tank_solenoid_disinfect == 0) {
                        $("#tank_solenoid_disinfect_status").css("background-color", "#C0C0C0")
                    } else if (res.tank_solenoid_disinfect == 1) {
                        $("#tank_solenoid_disinfect_status").css("background-color", "forestgreen")
                    } else { $("#tank_solenoid_disinfect_status").css("background-color", "crimson") }

                    if (res.tank_solenoid_water == 0) {
                        $("#tank_solenoid_water_status").css("background-color", "#C0C0C0")
                    } else if (res.tank_solenoid_water == 1) {
                        $("#tank_solenoid_water_status").css("background-color", "forestgreen")
                    } else { $("#tank_solenoid_water_status").css("background-color", "crimson") }

                    if (res.tank_motor == 0) {
                        $("#tank_motor_status").css("background-color", "#C0C0C0")
                    } else if (res.tank_motor > 0 || res.tank_motor < 0) {
                        $("#tank_motor_status").css("background-color", "forestgreen")
                    } else { $("#tank_motor_status").css("background-color", "crimson") }

                    if (res.tank_blower == 0) {
                        $("#tank_blower_status").css("background-color", "#C0C0C0")
                    } else if (res.tank_blower == 1) {
                        $("#tank_blower_status").css("background-color", "forestgreen")
                    } else { $("#tank_blower_status").css("background-color", "crimson") }

                    if (res.tank_heater1 == 0) {
                        $("#tank_heater1_status").css("background-color", "#C0C0C0")
                    } else if (res.tank_heater1 == 1) {
                        $("#tank_heater1_status").css("background-color", "forestgreen")
                    } else { $("#tank_heater1_status").css("background-color", "crimson") }

                    if (res.tank_heater2 == 0) {
                        $("#tank_heater2_status").css("background-color", "#C0C0C0")
                    } else if (res.tank_heater2 == 1) {
                        $("#tank_heater2_status").css("background-color", "forestgreen")
                    } else { $("#tank_heater2_status").css("background-color", "crimson") }

                    if (res.tank_temp1_enable == 0) {
                        $("#tank_temp1_enable_status").css("background-color", "#C0C0C0")
                    } else if (res.tank_temp1_enable == 1) {
                        $("#tank_temp1_enable_status").css("background-color", "forestgreen")
                    } else { $("#tank_temp1_enable_status").css("background-color", "crimson") }

                    if (res.tank_temp1 == 0) {
                        $("#tank_temp1_status").css("background-color", "#C0C0C0")
                    } else if (res.tank_temp1 > 0) {
                        $("#tank_temp1_status").css("background-color", "forestgreen")
                    } else { $("#tank_temp1_status").css("background-color", "crimson") }

                    $("#tank_vacuum_t_status").text(res.tank_vacuum);
                    $("#tank_threewayvalve_t_status").text(res.tank_threewayvalve);
                    $("#tank_diskvalve_t_status").text(res.tank_diskvalve);
                    $("#tank_solenoid_disinfect_t_status").text(res.tank_solenoid_disinfect);
                    $("#tank_solenoid_water_t_status").text(res.tank_solenoid_water);
                    $("#tank_motor_t_status").text(res.tank_motor);
                    $("#tank_blower_t_status").text(res.tank_blower);
                    $("#tank_heater1_t_status").text(res.tank_heater1);
                    $("#tank_heater2_t_status").text(res.tank_heater2);
                    $("#tank_temp1_enable_t_status").text(res.tank_temp1_enable);
                    $("#tank_temp1_t_status").text(res.tank_temp1);

                    $("#UltraSonic_t_status").text(res.UltraSonic);
                    $("#SHT11_Temp_t_status").text(res.SHT11_Temp);
                    $("#SHT11_Humidity_t_status").text(res.SHT11_Humidity);
                    $("#soil_Temp_t_status").text(res.soil_Temp);
                    $("#soil_Humidity_t_status").text(res.soil_Humidity);
                    $("#soil_EC_t_status").text(res.soil_EC);
                    $("#PA_t_status").text(res.PA);
                }, 'json');

                $('#Modal_title').text("乾燥槽 D" + dtid + " 狀態")

                if (status == 2) {
                    $('#actuator_link').attr("title", "該使用者無修改權限")
                    $('#sensor_link').attr("title", "該使用者無修改權限")
                    $('#Vacuum').attr("title", "該使用者無修改權限")
                    $('#ThreeWayValveInput').attr("title", "該使用者無修改權限")
                    $('#ThreeWayValveBean').attr("title", "該使用者無修改權限")
                    $('#SolenoidDisinfect').attr("title", "該使用者無修改權限")
                    $('#Motor').attr("title", "該使用者無修改權限")
                    $('#Blower').attr("title", "該使用者無修改權限")
                    $('#Heater1').attr("title", "該使用者無修改權限")
                    $('#Heater2').attr("title", "該使用者無修改權限")
                    $('#TempEnable').attr("title", "該使用者無修改權限")
                    $('#Temp').attr("title", "該使用者無修改權限")
                    $('#SolenoidWater').attr("title", "該使用者無修改權限")
                    $('#DiskValve').attr("title", "該使用者無修改權限")
                } else if ( (status == 0) || (status == 1) ) {
                    $('#actuator_link').attr("href", "/dry_container_tank/" + dtid)
                    $('#sensor_link').attr("href", "/dry_container_tank/" + dtid)
                    $('#Vacuum').attr("href", "/ctrl_D_Vacuum/" + dtid)
                    $('#ThreeWayValveInput').attr("href", "/ctrl_D_ThreeWayValveInput/" + dtid)
                    $('#ThreeWayValveBean').attr("href", "/ctrl_D_ThreeWayValveBean/" + dtid)
                    $('#SolenoidDisinfect').attr("href", "/ctrl_D_SolenoidDisinfect/" + dtid)
                    $('#Motor').attr("href", "/ctrl_D_Motor/" + dtid)
                    $('#Blower').attr("href", "/ctrl_D_Blower/" + dtid)
                    $('#Heater1').attr("href", "/ctrl_D_Heater1/" + dtid)
                    $('#Heater2').attr("href", "/ctrl_D_Heater2/" + dtid)
                    $('#TempEnable').attr("href", "/ctrl_D_TempEnable/" + dtid)
                    $('#Temp').attr("href", "/ctrl_D_Temp/" + dtid)
                    $('#SolenoidWater').attr("href", "/ctrl_D_SolenoidWater/" + dtid)
                    $('#DiskValve').attr("href", "/ctrl_D_DiskValve/" + dtid)
                }
                

                $('#SHT11_Temp').attr("href", "/chart_D/SHT11_Temp/" + dtid)
                $('#SHT11_Humidity').attr("href", "/chart_D/SHT11_Humidity/" + dtid)
                $('#UltraSonic').attr("href", "/chart_D/UltraSonic/" + dtid)
                $('#PA').attr("href", "/chart_D/PA/" + dtid)
                $('#soil_Temp').attr("href", "/chart_D/soil_Temp/" + dtid)
                $('#soil_Humidity').attr("href", "/chart_D/soil_Humidity/" + dtid)
                $('#soil_EC').attr("href", "/chart_D/soil_EC/" + dtid)
                $('#camera_dry_tid').attr("href", "/camera_D" + dtid)

                
                setTimeout(function(){ $('#D_Modal').modal('show'); }, 300)
                
            }
            
            // modal IB 
            function update_data_IB(id) {
                // ajax 制動器感測器數值
                $('#Modal_IB_title').text("入料儲豆槽 " + id + " 狀態")            
                setTimeout(function(){ $('#IB_Modal').modal('show'); }, 300)
            }

            // modal C
            function update_data_C(id) {
                // ajax 制動器感測器數值
                $('#Modal_C_title').text("清洗槽 " + id + " 狀態")            
                setTimeout(function(){ $('#C_Modal').modal('show'); }, 300)
            }
            
            // modal RW
            function update_data_RW(id) {
                // ajax 制動器感測器數值
                $('#Modal_RW_title').text("中水桶 " + id + " 狀態")            
                setTimeout(function(){ $('#RW_Modal').modal('show'); }, 300)
            }
            
            // modal CS 
            function update_data_CS(id) {
                // ajax 制動器感測器數值
                $('#Modal_CS_title').text("色選機 " + id + " 狀態")            
                setTimeout(function(){ $('#CS_Modal').modal('show'); }, 300)
            }
            
            // modal P 
            function update_data_P(id) {
                // ajax 制動器感測器數值
                $('#Modal_P_title').text("脫皮機 " + id + " 狀態")            
                setTimeout(function(){ $('#P_Modal').modal('show'); }, 300)
            }
            
            // modal F 
            function update_data_F(id) {
                // ajax 制動器感測器數值
                $('#Modal_F_title').text("發酵槽 " + id + " 狀態")            
                setTimeout(function(){ $('#F_Modal').modal('show'); }, 300)
            }
            
            // modal D 
            function update_data_D(id) {
                // ajax 制動器感測器數值
                $('#Modal_D_title').text("乾燥槽 " + id + " 狀態")            
                setTimeout(function(){ $('#D_Modal').modal('show'); }, 300)
            }
            
            // modal BB 
            function update_data_BB(id) {
                // ajax 制動器感測器數值
                $('#Modal_BB_title').text("壞果儲豆槽 " + id + " 狀態")            
                setTimeout(function(){ $('#BB_Modal').modal('show'); }, 300)
            }
            
            // modal OB 
            function update_data_OB(id) {
                // ajax 制動器感測器數值
                $('#Modal_OB_title').text("出料儲豆槽 " + id + " 狀態")            
                setTimeout(function(){ $('#OB_Modal').modal('show'); }, 300)
            }

            var DM_InputBean_1 = document.getElementById('DM_InputBean_1');
            DM_InputBean_1.addEventListener('click', function () { update_data_IB("1") });

            var DM_InputBean_2 = document.getElementById('DM_InputBean_2');
            DM_InputBean_2.addEventListener('click', function () { update_data_IB("2") });

            var DM_Clean_1 = document.getElementById('DM_Clean_1');
            DM_Clean_1.addEventListener('click', function () { update_data_C("1") });

            var DM_Clean_2 = document.getElementById('DM_Clean_2');
            DM_Clean_2.addEventListener('click', function () { update_data_C("2") });

            var DM_ReclaimedWater_1 = document.getElementById('DM_ReclaimedWater_1');
            DM_ReclaimedWater_1.addEventListener('click', function () { update_data_RW("1") });

            var DM_ColorSelect_1 = document.getElementById('DM_ColorSelect_1');
            DM_ColorSelect_1.addEventListener('click', function () { update_data_CS("1") });

            var DM_ColorSelect_2 = document.getElementById('DM_ColorSelect_2');
            DM_ColorSelect_2.addEventListener('click', function () { update_data_CS("2") });

            var DM_Peel_1 = document.getElementById('DM_Peel_1');
            DM_Peel_1.addEventListener('click', function () { update_data_P("1") });

            var DM_Peel_2 = document.getElementById('DM_Peel_2');
            DM_Peel_2.addEventListener('click', function () { update_data_P("2") });

            var DM_Ferment_1 = document.getElementById('DM_Ferment_1');
            DM_Ferment_1.addEventListener('click', function () { update_data_F("1") });

            var DM_Ferment_2 = document.getElementById('DM_Ferment_2');
            DM_Ferment_2.addEventListener('click', function () { update_data_F("2") });

            var DM_Dry_1 = document.getElementById('DM_Dry_1');
            DM_Dry_1.addEventListener('click', function () { update_data_D("1") });

            var DM_BadBean_1 = document.getElementById('DM_BadBean_1');
            DM_BadBean_1.addEventListener('click', function () { update_data_BB("1") });

            var DM_OutputBean_1 = document.getElementById('DM_OutputBean_1');
            DM_OutputBean_1.addEventListener('click', function () { update_data_OB("1") });

        </script>
{% endblock %}