<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>