dayuan
/
manyi


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190
							<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Cache-Control" content="no-cache,no-store,no-siteapp,must-revalidate">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta name="author" content="">
    <meta name="description" content=""/>
    <meta name="keywords" content="扫码支付，线上投币，运营数据，物联网"/>
    <meta name="format-detection" content="telephone=no,email=no">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
    <title>设备功能配置</title>
    <link rel="stylesheet" href="https://cdn.washpayer.com/components/lib/mui.min.css">
    <link rel="stylesheet" href="/components/custom/css/common.css">
    <link rel="stylesheet" href="/app/css/xyf.common.min.css">
    <style>
    </style>
</head>
<body class="">

<h4 class="param-title" id="device">设备</h4>

<form class="device-param-form" validate="validateForm">
    <h5 class="mui-content-padded font-b-6 ">计费模式</h5>
    <div class="mui-input-group">
        <div class="mui-input-row mui-radio">
            <label for="billingType0">时间计费</label>
            <input id="billingType0" name="billingType" checked value="time" type="radio" class="save-data">
        </div>
        <div class="mui-input-row mui-radio">
            <label for="billingType1">功率计费</label>
            <input id="billingType1" name="billingType" value="power" type="radio">
        </div>
        <div class="mui-input-row mui-radio">
            <label for="billingType2">电量计费</label>
            <input id="billingType2" name="billingType" value="elec" type="radio">
        </div>
    </div>

    <h5 class="mui-content-padded font-b-6 ">多段功率配置</h5>
    <div class="mui-input-group">
        <div class="mui-input-row">
            <label class="">最低功率：</label>
            <input type="number" required inputmode="decimal" step="0.1" id="minPower" class="save-data padding-r-35">
            <span class="mini-unit">W</span>
        </div>
        <div class="mui-input-row">
            <label class="">充满自停功率：</label>
            <input type="number" required inputmode="numeric" step="1" max="255" id="checkAutoStop"
                   class="save-data padding-r-35">
            <span class="mini-unit">W</span>
        </div>
        <div class="mui-input-row">
            <label class="">过载功率：</label>
            <input type="number" required inputmode="numeric" step="1" min="1" max="1000" id="overloadPower"
                   class="save-data padding-r-35">
            <span class="mini-unit">W</span>
        </div>
        <div class="mui-input-row" id="priceRow">
            <label class="">计费价格：</label>
            <input type="number" required inputmode="decimal" step="0.01" min="0" id="price"
                   class="save-data" style="padding-right: 52px">
            <span class="mini-unit">元</span>
        </div>
        <div class="mui-input-row">
            <label class="">温度阈值：</label>
            <input type="number" required inputmode="decimal" step="0.1" id="temperatureTreshold"
                   class="save-data padding-r-35">
            <span class="mini-unit">℃</span>
        </div>
        <div class="mui-input-row">
            <label class="">音量：</label>
            <input type="number" required inputmode="numeric" value="7" step="1" min="0" max="7" id="sound"
                   class="save-data ">
        </div>
    </div>

    <h5 class="mui-content-padded font-b-6 ">时间参数设置</h5>
    <div class="mui-input-group">
        <div class="mui-input-row">
            <label class="">充电开始检测时间： </label>
            <input type="number" required inputmode="numeric" min=1 max=255 id="checkTime"
                   class="save-data padding-r-35">
            <span class="mini-unit">秒</span>
        </div>
        <div class="mui-input-row">
            <label class="">断电速度：</label>
            <input type="number" required inputmode="numeric" step="5" min=0 max=1275 id="powerFailureTime"
                   class="save-data padding-r-35">
            <span class="mini-unit">秒</span>
        </div>
        <div class="mui-input-row">
            <label class="">浮充时间：</label>
            <input type="number" required inputmode="numeric" min=0 max=255 id="floatTime"
                   class="save-data padding-r-35">
            <span class="mini-unit">分钟</span>
        </div>
        <div class="mui-input-row">
            <label class="">单次充电时长：</label>
            <input type="number" required inputmode="numeric" step="5" min=0 max=1275 id="onceChargeTime"
                   class="save-data padding-r-35">
            <span class="mini-unit">分钟</span>
        </div>
    </div>

    <h5 class="mui-content-padded ">功率档位价格设置</h5>
    <ul class="mui-table-view" id="package">
        <li class="mui-table-view-cell ">
            加载中...
        </li>
    </ul>

    <div class="subt">
        <input class="mui-btn-block" type="submit" value="保存参数">
    </div>
</form>


<script src="https://cdn.washpayer.com/components/lib/vue.min.js"></script>
<script src="https://cdn.washpayer.com/components/lib/jquery.min.js"></script>
<script src="https://cdn.washpayer.com/components/lib/mui.min.js"></script>
<script src="/components/custom/js/common.js"></script>
<script src="/app/js/xyf.common.js"></script>
<script src="/app/js/device-param.js"></script>
<script src="/app/js/device-param-100286.js"></script>
<script>
    function getPriceUnit(billingType) {
        var unit = ''
        var style = ''
        if (billingType === 'time') {
            unit = '元/小时'
            style = 'padding-right: 52px'
        }
        if (billingType === 'elec') {
            unit = '元/度'
            style = 'padding-right: 45px'
        }
        if (billingType === 'power') {
            unit = '元'
            style = 'padding-right: 35px'
        }
        $('#priceRow .mini-unit').text(unit)
        $('#price').attr('style', style)
    }

    var packageModal;
    initParam({
        params: {
            "billingType": "radio",
            "minPower": "value",
            "checkAutoStop": "value",
            "overloadPower": "value",
            "temperatureTreshold": "value",
            "price": "value",
            "sound": "value",

            "checkTime": "value",
            "powerFailureTime": "value",
            "floatTime": "value",
            "onceChargeTime": "value",
        },
        callback: function (payload) {
            packageModal = PowerPackageComponent({
                el: "#package",
                packages: payload.packages || [],
            })

            $("[name='billingType']").on('change', function () {
                getPriceUnit(this.value)
            });
            getPriceUnit(payload.billingType)

            // 合并package数据
            mergeSubmitOption.prev = function (data) {
                data.packages = packageModal.info.packages
            }
        }
    })

    function validateForm() {
        if ($('[name="billingType"]:checked').val() === 'power' && packageModal.info.packages.length === 0) {
            mui.toast('当前计费模式为：按功率计费，请添加“功率档位价格”');
            return false
        }
    }

</script>
</body>
</html>