FCC/Framework/Edge.WebHost/Views/WebConsole/SmartFuel/SensorDataDetails.cshtml


<div id="PressureDiv" class="tank_table_div" ref="tanktableref">
    <div class="tank_meter_div" style="top: 8%; left: 2%; background-image: url(/WebConsole/images/device/sensor/tankprbackg.png);">
        <div class="tank_pointer_div" :style="pointerstyle[0]"></div>
        <div class="live_data_text">{{tankPressureObject.Pressure | numFilter}} {{pressureUnit}}</div>
    </div>
    <div class="tank_meter_div" style="top: 8%; left: 35.66%; background-image: url(/WebConsole/images/device/sensor/liquidprbackg.png);">
        <div class="tank_pointer_div" :style="pointerstyle[1]"></div>
        <div class="live_data_text">{{liquidPressureObject.Pressure | numFilter}} {{pressureUnit}}</div>
    </div>
    <div class="tank_meter_div" style="top: 8%; left: 69.32%; background-image: url(/WebConsole/images/device/sensor/gasconbackg.png);">
        <div class="tank_pointer_div" :style="pointerstyle[2]"></div>
        <div class="live_data_text">
            <label>{{gasConcentrationsObject.Concentration | numFilter}} g/m3</label>
        </div>
    </div>
</div>

<script type="text/javascript">
    var vm = new Vue({
        el: '#PressureDiv',
        data: {
            pressureUnit: 'Pa',
            pointerstyle: ['', '', ''],
            allObject: null,
            tankPressureObject: { DeviceAddress: 1, Pressure: null },
            liquidPressureObject: { DeviceAddress: 1, Pressure: null },
            gasConcentrationsObject: { DeviceAddress: 1, Concentration: null }
        },
        mounted() {
            let lang = (navigator.language || navigator.userLanguage || navigator.browserLanguage).toLowerCase();
            if (lang.indexOf('zh-tw') >= 0) {
                this.pressureUnit = 'inHg'
            }
            else if (lang.indexOf('zh-cn') >= 0) {
                this.pressureUnit = 'Pa'
            }
        },
        watch: {
            allObject: {
                handler(newValue, oldValue) {
                    if (newValue.TankPressure) {
                        this.tankPressureObject = newValue.TankPressure
                        this.pointerstyle[0] = 'background-image: url(/WebConsole/images/device/sensor/' + this.tankPressureObject.CurrentPointer + '.png);'
                    }
                    if (newValue.LiquidPressure) {
                        this.liquidPressureObject = newValue.LiquidPressure
                        this.pointerstyle[1] = 'background-image: url(/WebConsole/images/device/sensor/' + this.liquidPressureObject.CurrentPointer + '.png);'
                    }
                    if (newValue.GasConcentrations) {
                        this.gasConcentrationsObject = newValue.GasConcentrations
                        this.pointerstyle[2] = 'background-image: url(/WebConsole/images/device/sensor/' + this.gasConcentrationsObject.CurrentPointer + '.png);'
                    }
                    this.$forceUpdate()
                },
                deep: true
            }
        },
        filters: {
            numFilter(value) {
                let realVal = ''
                if (!isNaN(value) && value !== '') {
                    realVal = parseFloat(value).toFixed(2)
                } else {
                    realVal = 'N/A'
                }
                return realVal
            }
        }
    })

    function OnReply(apis, topic, jsonObj) {
        let tankpressurepath = apis.has("GetPressureAsync_Reply") ? apis.get("GetPressureAsync_Reply") : '/sys/VeederRoot_ATG_Console_Tcp/VeederRoot_ATG_Console.Handler/thing/service/GetPressureAsync_Reply'
        if (topic === tankpressurepath) {
            vm.allObject = jsonObj
        }
    }
</script>