FCC/Framework/Edge.WebHost/Views/WebConsole/TankDetails/Config/TankConfigRnav.cshtml


<div id="TankConfigDiv">
    <form action="" method="post" class="config-form">
        <div class="config-form-group">
            <label class="config-form-label">油罐编号选择</label>
            <select class="config-form-select" v-model="values.DeviceId" @@change="changeSerial">
                <option v-for='item in values.atgList' v-bind:value='item.DeviceId'>{{ item.Name }}</option>
            </select>
            <span class="config-form-danger"></span>
        </div>
        <div class="config-form-hint-group">
            <label class="config-form-hint">请选择罐号编辑</label>
        </div>
        <div class="config-form-group">
            <label class="config-form-label">油罐总容积(升)</label>
            <input class="config-form-input" v-model="values.FullVolume" />
            <span class="config-form-danger">请输入探棒物理地址</span>
        </div>
        <div class="config-form-hint-group">
            <label class="config-form-hint">油罐可用总容量</label>
        </div>
        <div class="config-form-group">
            <label class="config-form-label">高油位警戒线（%）</label>
            <input class="config-form-input" v-model="values.HighProduct" />
            <span class="config-form-danger">请输入人工标注</span>
        </div>
        <div class="config-form-hint-group">
            <label class="config-form-hint">高油位警戒线，总容量百分比计算</label>
        </div>
        <div class="config-form-group">
            <label class="config-form-label">入油高油位警戒线（%）</label>
            <input class="config-form-input" v-model="values.HighProduct" />
            <span class="config-form-danger">请输入人工标注</span>
        </div>
        <div class="config-form-hint-group">
            <label class="config-form-hint">入油时，高油位警戒线，总容量百分比计算</label>
        </div>
        <div class="config-form-group">
            <label class="config-form-label">入油极限警戒线（%）</label>
            <input class="config-form-input" v-model="values.HighProduct" />
            <span class="config-form-danger">请输入人工标注</span>
        </div>
        <div class="config-form-hint-group">
            <label class="config-form-hint">入油时，极限最高油位警戒线，总容量百分比计算</label>
        </div>
        <div class="config-form-group">
            <label class="config-form-label">低油位警戒线(升)</label>
            <input class="config-form-input" v-model="values.LowProduct" />
            <span class="config-form-danger"></span>
        </div>
        <div class="config-form-hint-group">
            <label class="config-form-hint">低油位警戒线，按照升计算</label>
        </div>
        <div class="config-form-group">
            <label class="config-form-label">高水位预警线(毫米)</label>
            <input class="config-form-input" v-model="values.HighWaterWarning" />
            <span class="config-form-danger"></span>
        </div>
        <div class="config-form-hint-group">
            <label class="config-form-hint">水位过高预警线</label>
        </div>
        <div class="config-form-group">
            <label class="config-form-label">高水位报警线(毫米)</label>
            <input class="config-form-input" v-model="values.HighWaterAlarm" />
            <span class="config-form-danger"></span>
        </div>
        <div class="config-form-hint-group">
            <label class="config-form-hint">水位过高报警线</label>
        </div>
        <div class="config-form-group">
            <label class="config-form-label">水位报警筛选等级</label>
            <input class="config-form-input" value="LOW" required />
            <span class="config-form-danger"></span>
        </div>
        <div class="config-form-hint-group">
            <label class="config-form-hint" style="color: transparent;">p</label>
        </div>
        <div class="config-form-group">
            <label class="config-form-label">水位报警时间延迟</label>
            <input class="config-form-input" value="180" required />
            <span class="config-form-danger"></span>
        </div>
        <div class="config-form-hint-group">
            <label class="config-form-hint" style="color: transparent;">p</label>
        </div>
        <div class="config-form-group">
            <label class="config-form-label">油温下限（℃）</label>
            <input class="config-form-input" v-model="values.FuelTemperatureLowLimit" />
            <span class="config-form-danger"></span>
        </div>
        <div class="config-form-hint-group">
            <label class="config-form-hint">油温低于设定值则报警</label>
        </div>
        <div class="config-form-group">
            <label class="config-form-label">油温上限（℃）</label>
            <input class="config-form-input" v-model="values.FuelTemperatureHighLimit" />
            <span class="config-form-danger"></span>
        </div>
        <div class="config-form-hint-group">
            <label class="config-form-hint">油温高于设定值则报警</label>
        </div>
        <div class="config-form-group">
            <label class="config-form-label">上传油罐容积表</label>
            <div class="config-form-file-bg">
                <input class="config-form-file" type="file" @@change="changeFile" />
            </div>
            <span class="config-form-danger"></span>
        </div>
        <div class="config-form-hint-group">
            <label class="config-form-hint">选择匹配的容积表文件上传</label>
            <label class="config-form-hint">文件名{{ fileName }}</label>
        </div>
        <div class="config-form-submit-group">
            <label :class="show ? (result ? 'config-form-result' : 'config-form-result-fail') : 'color-transparent'">{{ result ? '提交完成' : '提交失败' }}</label>
        </div>
        <div class="config-form-submit-group">
            <label class="config-form-label"></label>
            <button class="config-form-submit" type="button" @@click="submit(event)" id="TankLimitConfig" />
        </div>
    </form>
</div>

<script type="text/javascript">
    var vm = new Vue({
        el: '#TankConfigDiv',
        data: {
            values: { 'atgList': [{ 'DeviceId': 1, 'Name': '1号罐探棒' }, { 'DeviceId': 3, 'Name': '3号罐探棒' }], 'DeviceId': 3, 'FullVolume': 1960.00, 'HighProduct': 90.00, 'LowProduct': 30, 'HighWaterWarning': 100.00, 'HighWaterAlarm': 135.00, 'FuelTemperatureLowLimit': -50, 'FuelTemperatureHighLimit': 60 },
            descrip: '',
            fileName: '',
            show: false,
            result: false
        },
        mounted: function () {
            let path = '/sys/atg_classic_App/Application.ATG_Classic_App.App/thing/service/GetConfigAsync'
            Publish1(path)
        },
        methods: {
            changeFile: function (ev) {
                if (window.FileReader && ev.target.files.length) {
                    let fr = new FileReader()
                    let file = ev.target.files[0]

                    fr.onloadend = function (e) {
                        vm.values.fileContent = e.target.result
                    }

                    this.fileName = file.name
                    fr.readAsText(file)
                } else {
                    alert("Not supported by your browser!")
                }
            },
            changeSerial: function (ev) {
                console.log(this.values.DeviceId, ev.target)
                //let val = this.values.atgList.find((m) => m.DeviceId == this.values.DeviceId)
                //this.descrip = val.Name
            },
            submit(e) {
                let path = '/sys/atg_classic_App/Application.ATG_Classic_App.App/thing/service/UpsertConfigAsync'
                Publish(e.target.id, JSON.stringify(this.values), path)
                return false
            }
        }
    })

    function OnReply(jsonObj) {
        console.log(JSON.stringify(jsonObj));
        //vm.values = jsonObj
    }
</script>