<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script type="text/javascript" src="./js/jquery.min.js"></script>
    <link rel="stylesheet" th:href="@{/css/airconditioner.css}">
    <link rel="stylesheet" href="./css/xadmin.css">
    <script src="./lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="./js/xadmin.js"></script>

    <style type="text/css">
        #data{
            position: absolute;
            left: 1000px;
            top: 100px;
        }
        #dataTitle{
            background-color: #33aba0;
        }
        .dataTr{
            background-color: #d5d5d5;
        }

        #temp_set {
            position: absolute;
            /*left: ;*/
        }
        #temp_set_val {
            position: absolute;
            left: 250px;
        }
        #humi_set {
            position: absolute;
            top: 40px;
        }
        #humi_set_val {
            position: absolute;
            top: 40px;
            left: 250px;
        }
        #Moisture_set {
            position: absolute;
            top: 70px;
        }
        #Moisture_set_val {
            position: absolute;
            top: 70px;
            left: 250px;
        }
        #unit_delay_stop {
            position: absolute;
            top: 100px;
        }
        #unit_delay_stop_val {
            position: absolute;
            top: 100px;
            left: 250px;
        }
        .turnOnForm {
            position: absolute;
            top: 150px;
        }
        .downForm {
            position: absolute;
            top: 150px;
            left: 250px;
        }
    </style>

</head>
<body>
<div>
    <image height="252.00019" id="svg_1" width="164.66677" th:src="@{/images/sq_end_cut_w.png}"></image>
    <image height="196.48484" id="svg_2" width="134.30802" th:src="@{/images/fi_horiz.png}"></image>
    <image height="255.86875" id="svg_3" width="180.1212" th:src="@{/images/sq_stretch_horiz.png}"></image>
    <image height="196.27268" id="svg_4" width="126.81811" th:src="@{/images/coil_water_cool_horiz_2.png}"></image>
    <image height="255.86875" id="svg_5" width="180.1212" th:src="@{/images/sq_stretch_horiz.png}"></image>
    <image height="193.71433" id="svg_6" width="153.85716" th:src="@{/images/coil_water_heat_horiz_2.png}"></image>
    <image height="255.86875" id="svg_7" width="132.34342" th:src="@{/images/sq_stretch_horiz.png}"></image>
    <image height="192.71414" id="svg_8" width="139.85718" th:src="@{/images/coil_electric_horiz_1.png}"></image>
    <image height="255.86875" id="svg_9" width="132.34342" th:src="@{/images/sq_stretch_horiz.png}"></image>
    <image height="195.40477" id="svg_10" width="110.41274" th:src="@{/images/hum_horiz_5.png}"></image>
    <image height="255.86875" id="svg_11" width="132.34342" th:src="@{/images/sq_stretch_horiz.png}">
        <image height="255.86875" id="svg_12" width="132.34342" th:src="@{/images/sq_stretch_horiz.png}"></image>
    </image>
    <image height="128.60264" id="svg_13" width="130.60264" th:src="@{/images/fan_e_2.png}"></image>
    <image height="75.13629" id="svg_14" width="67.38647" th:src="@{/images/去向车间风机E1.gif}" display=""></image>
    <image height="255.86875" id="svg_15" width="180.1212" x="356.0283" th:src="@{/images/sq_stretch_horiz.png}"
           y="384.25157"/>
    <image height="201.24676" id="svg_16" width="126.64935" x="1197.06179" th:src="@{/images/fi_horiz.png}"
           y="499.05981"></image>
    <image height="255.86875" id="svg_17" width="180.1212" x="356.0283" th:src="@{/images/sq_stretch_horiz.png}"
           y="384.25157"/>
    <image height="252.72236" id="svg_18" width="194.88878" x="1287.4606" th:src="@{/images/sq_end_cut_e.png}"
           y="455.29125"></image>
</div>
<div>
    <span class="fontStyle" id="prefilter">初效滤网</span>
    <span class="statusStyleGreen fontStyle" id="prefilterStatus" th:text="${device.deviceData.M_bit2BinStr.charAt(15)} == '0' ? '正常' : '报警'">正常</span>
    <div class="fontStyle" id="coldWaterValveDiv">
        <span id="coldWaterValve">冷水阀: </span>
        <span id="coldWaterValveStatus" th:text="${device.deviceData.cold_water_valve_value}">94%</span>%
    </div>
    <div class="fontStyle" id="hotWaterValveDiv">
        <span id="hotWaterValve">热水阀: </span>
        <span id="hotWaterValveStatus" th:text="${device.deviceData.hot_water_valve_value}">87%</span>%
    </div>
    <span class="fontStyle" id="highTemperatureAlarm">高温报警</span>
    <span class="statusStyleGreen fontStyle" id="highTemperatureAlarmStatus" th:text="${device.deviceData.M_bit2BinStr.charAt(10)} == '0' ? '正常' : '报警'">正常</span>
    <span class="fontStyle" id="electricalHeating">电加热</span>
    <div class="fontStyle" id="electricalHeatingGears">
        <span class="statusStyleGreen" id="gearOne">一</span>
        <span class="statusStyleGreen" id="gearTwo">二</span>
        <span class="statusStyleGrey" id="gearThree">三</span>
    </div>
    <div class="fontStyle" id="humidifierDiv">
        <span id="humidifier">加湿器</span>
        <span id="humidifierStatus" th:text="${device.deviceData.humidification_value}">87%</span>%
    </div>
    <span class="fontStyle" id="lackOfLeeway">缺风压差</span>
    <span class="fontStyle statusStyleGreen" id="lackOfLeewayStatus" th:text="${device.deviceData.M_bit2BinStr.charAt(9)} == '0' ? '正常' : '报警'">正常</span>
    <span class="fontStyle" id="W-CELL">中效滤网</span>
    <span class="statusStyleGreen fontStyle" id="W-CELL_status" th:text="${device.deviceData.M_bit2BinStr.charAt(14)} == '0' ? '正常' : '报警'">正常</span>

    <span class="fontStyle"  id="temp_set">排风温度设定: </span>
    <span class="fontStyle"  id="temp_set_val" th:text="${device.deviceData.temp_set} + '℃'">排风温度设定</span>
    <span class="fontStyle" id="humi_set">排风湿度设定: </span>
    <span class="fontStyle" id="humi_set_val" th:text="${device.deviceData.humi_set} + '%'">排风湿度设定</span>
    <span class="fontStyle" id="Moisture_set">排风含湿量设定: </span>
    <span class="fontStyle" id="Moisture_set_val" th:text="${device.deviceData.Moisture_set} + 'g/kg'">排风含湿量设定</span>
    <span class="fontStyle" id="unit_delay_stop">停机延时: </span>
    <span class="fontStyle" id="unit_delay_stop_val" th:text="${device.deviceData.unit_delay_stop} + 'S'">停机延时</span>

    <form class="layui-form layui-col-space5 turnOnForm">
        <div class="layui-input-inline">
            <input type="hidden" name="m_bit1" class="layui-input"
                   lay-verify="" th:value="${device.deviceData.M_bit1BinStr.charAt(5)} == '0' ? 1024 : -1024">
        </div>
        <a class="layui-btn" lay-submit lay-filter="update">
<!--            <i class="layui-icon" >-->
<!--                启动/停止-->
<!--            </i>-->
            <i class="layui-icon" th:text="${device.deviceData.M_bit1BinStr.charAt(5)} == '0' ? '启动' : '停止'">开启</i>
        </a>
    </form>

    <form class="layui-form layui-col-space5 downForm">
        <div class="layui-input-inline">
            <input type="hidden" name="m_bit1" class="layui-input"
                   lay-verify="" th:value="${device.deviceData.M_bit1BinStr.charAt(3)} == '0' ? 4096 : -4096">
        </div>
        <a class="layui-btn" lay-submit lay-filter="downRecover">
            <i class="layui-icon" >
                故障复位
            </i>
        </a>
    </form>

</div>

<div id="data">
    <form>
        <table>
            <tr id="dataTitle">
                <th colspan="2">CK-1</th>
            </tr>
            <tr class="dataTr">
                <td>温度</td>
                <td th:text="${device.deviceData.Temp_read} + '℃'">22.5℃</td>
            </tr>
            <tr class="dataTr">
                <td>湿度</td>
                <td th:text="${device.deviceData.Humi_read} + '%'">59.7%</td>
            </tr>
            <tr class="dataTr">
                <td>含湿量</td>
                <td th:text="${device.deviceData.Moisture_value} + 'g/kg'">10.2g/kg</td>
            </tr>
        </table>
    </form>
</div>

<script>
    var $prefilterStatus = $("#prefilterStatus");
    var $highTemperatureAlarmStatus = $("#highTemperatureAlarmStatus");
    var $gearOne = $("#gearOne");
    var $gearTwo = $("#gearTwo");
    var $gearThree = $("#gearThree");
    var $lackOfLeewayStatus = $("#lackOfLeewayStatus");
    var $W = $("#W-CELL_status");
    if ($prefilterStatus.text() == '报警') {
        $prefilterStatus.removeClass("statusStyleGreen");
        $prefilterStatus.addClass("statusStyleRed");
    }
    if ($highTemperatureAlarmStatus.text() == '报警') {
        $highTemperatureAlarmStatus.removeClass("statusStyleGreen");
        $highTemperatureAlarmStatus.addClass("statusStyleRed");
    }
    if($lackOfLeewayStatus.text() == '报警') {
        $lackOfLeewayStatus.removeClass("statusStyleGreen");
        $lackOfLeewayStatus.addClass("statusStyleRed");
    }
    if ($W.text() == '报警') {
        $W.removeClass("statusStyleGreen");
        $W.addClass("statusStyleRed");
    }

</script>
<script th:inline="javascript">
    var gearOneStatus = [[${device.deviceData.Q_bit3BinStr.charAt(3)}]]
    var gearTwoStatus = [[${device.deviceData.Q_bit3BinStr.charAt(2)}]]
    var gearThreeStatus = [[${device.deviceData.Q_bit3BinStr.charAt(1)}]]
    if (gearOneStatus == '0') {
        $gearOne.removeClass("statusStyleGreen");
        $gearOne.addClass("statusStyleGrey");
    } else if (gearOneStatus == '1') {
        $gearOne.removeClass("statusStyleGrey");
        $gearOne.addClass("statusStyleGreen");
    }
    if (gearTwoStatus == '0') {
        $gearTwo.removeClass("statusStyleGreen");
        $gearTwo.addClass("statusStyleGrey");
    } else if (gearTwoStatus == '1') {
        $gearTwo.removeClass("statusStyleGrey");
        $gearTwo.addClass("statusStyleGreen");
    }
    if (gearThreeStatus == '0') {
        $gearThree.removeClass("statusStyleGreen");
        $gearThree.addClass("statusStyleGrey");
    } else if (gearThreeStatus == '1') {
        $gearThree.removeClass("statusStyleGrey");
        $gearThree.addClass("statusStyleGreen");
    }



</script>
<script>
    layui.use(['laydate', 'form'], function () {
        var laydate = layui.laydate;
        var form = layui.form;

        form.on('submit(update)',
            function (data) {

                console.log(JSON.stringify(data.field))

                layer.confirm('确认要启动/停止吗？', function () {
                    $.ajax({
                        url: "[[${#request.contextPath}]]" + "/parameterSetting/update",
                        method: "post",
                        data: JSON.stringify(data.field),
                        contentType: "application/json;charset=UTF-8" //定义数据格式为JSON
                    });
                    layer.msg('启动/停止成功', {icon: 1}, function () {
                        location.reload();
                    });
                })

            });

        form.on('submit(downRecover)',
            function (data) {

                console.log(JSON.stringify(data.field))

                layer.confirm('确认要故障复位吗？', function () {
                    $.ajax({
                        url: "[[${#request.contextPath}]]" + "/parameterSetting/update",
                        method: "post",
                        data: JSON.stringify(data.field),
                        contentType: "application/json;charset=UTF-8" //定义数据格式为JSON
                    });
                    layer.msg('故障复位成功', {icon: 1}, function () {
                        location.reload();
                    });
                })

            });
    });
</script>

</body>
</html>