FCC/Framework/Edge.WebHost/Views/WebConsole/TankDetails/FuelInventoryList.cshtml


<div id="FuelInventoryListDiv" class="tank_table_div">
    <form action="" method="post" class="tank_form_div">
        <div v-if="currentTab == 'lastDelivery' || currentTab == 'historyDelivery'">
            <div class="tank_form_head">
                <label style="width: 32%" class="tank_form_label">开始/结束时间</label>
                <label style="width: 13%" class="tank_form_label">加油量(升)</label>
                <label style="width: 23%" class="tank_form_label">温度补偿油量(升)</label>
                <label style="width: 13%" class="tank_form_label">油位(mm)</label>
                <label style="width: 13%" class="tank_form_label" :style="showFilter">水位(mm)</label>
            </div>
            <div v-for="(r, index) in deliveryFilter" :key="index" class="tank_form_body">
                <div style="width: 90%; margin-left: 8.6%; text-align: left;">
                    {{r.TankNumber}}号罐
                </div>
                <div style="width: 98%; margin-left: 1%;">
                    <label style="width: 32.9%" class="tank_form_label">开始：{{r.StartingDateTime | formatDate}}</label>
                    <label style="width: 13.9%" class="tank_form_label">{{r.StartingFuelVolume | numFilter}}</label>
                    <label style="width: 23.5%" class="tank_form_label">{{r.StartingFuelTCVolume | numFilter}}</label>
                    <label style="width: 13.9%" class="tank_form_label">{{r.StartingFuelHeight | numFilter}}</label>
                    <label style="width: 13.5%" class="tank_form_label" :style="showFilter">{{r.StartingWaterHeight | numFilter}}</label>
                </div>
                <div style="width: 98%; margin-left: 1%;">
                    <label style="width: 32.9%" class="tank_form_label">开始：{{r.EndingDateTime | formatDate}}</label>
                    <label style="width: 13.9%" class="tank_form_label">{{r.EndingFuelVolume | numFilter}}</label>
                    <label style="width: 23.5%" class="tank_form_label">{{r.EndingFuelTCVolume | numFilter}}</label>
                    <label style="width: 13.9%" class="tank_form_label">{{r.EndingFuelHeight | numFilter}}</label>
                    <label style="width: 13.5%" class="tank_form_label" :style="showFilter">{{r.EndingWaterHeight | numFilter}}</label>
                </div>
                <div style="width: 98%; margin-left: 1%;">
                    <label style="width: 32.9%;padding-right: 12.8%" class="tank_form_label">统计：</label>
                    <label style="width: 13.9%" class="tank_form_label">{{(r.EndingFuelVolume - r.StartingFuelVolume) | numFilter}}</label>
                    <label style="width: 23.5%" class="tank_form_label">{{(r.EndingFuelTCVolume - r.StartingFuelTCVolume) | numFilter}}</label>
                    <label style="width: 13.9%" class="tank_form_label"></label>
                    <label style="width: 13.5%" class="tank_form_label"></label>
                </div>
            </div>
        </div>
        <div v-if="currentTab == 'lastInventory' || currentTab == 'inventoryReport'">
            <div class="tank_form_head">
                <label style="width: 22%" class="tank_form_label">日期时间</label>
                <label style="width: 13%" class="tank_form_label">油量(升)</label>
                <label style="width: 23%" class="tank_form_label">温度补偿油量(升)</label>
                <label style="width: 13%" class="tank_form_label">油位(mm)</label>
                <label style="width: 13%" class="tank_form_label">水位(mm)</label>
                <label style="width: 13%" class="tank_form_label" :style="showFilter">油温(℃)</label>
            </div>
            <div v-for="(r, index) in inventoryFilter" :key="index" class="tank_form_body">
                <label style="width: 22%" class="tank_form_label">{{r.TimeStamp | formatDate}}</label>
                <label style="width: 13%" class="tank_form_label">{{r.FuelVolume | numFilter}}</label>
                <label style="width: 23%" class="tank_form_label">{{r.FuelTCVolume | numFilter}}</label>
                <label style="width: 13%" class="tank_form_label">{{r.FuelHeight | numFilter}}</label>
                <label style="width: 13%" class="tank_form_label">{{r.WaterHeight | numFilter}}</label>
                <label style="width: 13%" class="tank_form_label" :style="showFilter">{{r.Temperture | numFilter}}</label>
            </div>
        </div>
    </form>
    <div class="config-right-navigation" :style="panelStyle">
        <div class="config-topright-tab">筛选查询</div>
        <div class="config-topright-settingselect">起始日期：</div>
        <input class="config-form-input" type="text" v-model="startDate" />
        @*<input class="config-form-date" type="date" v-model="startDate" />*@
        <div class="config-topright-settingselect">结束日期：</div>
        <input class="config-form-input" type="text" v-model="endDate" />
        @*<input class="config-form-date" type="date" v-model="endDate" />*@
        <div class="config-topright-settingselect">油罐选择：</div>
        <select class="config-form-select" v-model="tankNumber">
            <option v-for="(item, i) in tankArray" :key="i" :value="item.TankNumber">{{item.TankNumber}}号罐 {{item.Product.ProductLabel}}</option>
        </select>
        <div class="config-topright-settingselect">查询条件：</div>
        <div :class="currentTab == 'lastDelivery' ? 'config-topright-rnav-image' : 'config-topright-rnav'" @@click="search('lastDelivery')">最新进油</div>
        <div :class="currentTab == 'historyDelivery' ? 'config-topright-rnav-image' : 'config-topright-rnav'" @@click="search('historyDelivery')">进油报表</div>
        <div :class="currentTab == 'lastInventory' ? 'config-topright-rnav-image' : 'config-topright-rnav'" @@click="search('lastInventory')">最新库存</div>
        <div :class="currentTab == 'inventoryReport' ? 'config-topright-rnav-image' : 'config-topright-rnav'" @@click="search('inventoryReport')">库存报表</div>
    </div>
    <div class="tank_filter_div" :style="showFilter" @@click="clickFilter()">
    </div>
</div>

<script type="text/javascript">
    var vm = new Vue({
        el: '#FuelInventoryListDiv',
        data: {
            inventory: [],
            delivery: [],
            tankArray: [],
            startDate: null,
            endDate: null,
            tankNumber: 1,
            inventoryFilter: [],
            deliveryFilter: [],
            currentTab: 'lastInventory',
            panelStyle: 'visibility: hidden;',
            showFilter: 'visibility: visible;'
        },
        filters: {
            formatDate(value) {
                let realVal = ''
                if (value !== null && typeof (value) !== 'undefined') {
                    realVal = value.substring(0, 16).replace('T', ' ')
                } else {
                    realVal = 'N/A'
                }
                return realVal
            },
            numFilter(value) {
                let realVal = ''
                if (!isNaN(value) && value !== '') {
                    realVal = parseFloat(value).toFixed(3)
                } else {
                    realVal = 'N/A'
                }
                return realVal
            }
        },
        methods: {
            search(tab) {
                this.currentTab = tab
                this.panelStyle = 'visibility: hidden;'
                this.showFilter = 'visibility: visible;'
                let path = '/sys/VeederRoot_ATG_Console_Tcp/VeederRoot_ATG_Console.Handler/thing/service/'
                let endDateHour = this.toDateString(new Date(this.endDate + ' 24:0:0'))
                if (tab == 'lastDelivery') {
                    Publish2('[1, 10, 0, null]', path, 'GetTankDeliveryAsync')
                } else if (tab == 'historyDelivery') {
                    this.deliveryFilter = this.delivery.filter(item => item.TankNumber == this.tankNumber && item.StartingDateTime >= this.startDate && item.EndingDateTime < endDateHour)
                } else if (tab == 'lastInventory') {
                    Publish2('[1, 10, 0, null]', path, 'GetTankInventoryAsync')
                } else if (tab == 'inventoryReport') {
                    this.inventoryFilter = this.inventory.filter(item => item.TimeStamp >= this.startDate && item.TimeStamp < endDateHour)
                }
                this.$forceUpdate()
            },
            clickFilter() {
                this.panelStyle = 'visibility: visible;'
                this.showFilter = 'visibility: hidden;'
            },
            PrefixInteger(num, length) {
                return ('000' + num).substr(-length)
            },
            toDateString(date) {
                return date.getFullYear() + '-' + this.PrefixInteger(date.getMonth() + 1, 2) + '-' + this.PrefixInteger(date.getDate(), 2)
            }
        },
        watch: {
            inventory: {
                handler(newValue, oldValue) {
                    if (this.inventoryFilter.length <= 0) {
                        this.inventoryFilter = newValue
                        this.$forceUpdate()
                    }
                },
                deep: true
            },
            delivery: {
                handler(newValue, oldValue) {
                    if (this.deliveryFilter.length <= 0) {
                        this.deliveryFilter = newValue
                        this.$forceUpdate()
                    }
                },
                deep: true
            }
        },
        mounted() {
            this.startDate = this.toDateString(new Date())
            this.endDate = this.toDateString(new Date())
            let path = '/sys/VeederRoot_ATG_Console_Tcp/VeederRoot_ATG_Console.Handler/thing/service/'
            Publish2('[1, 10, 0, null]', path, 'GetTankInventoryAsync')
            Publish1(path, 'GetTanksAsync')
        }
    })

    function OnReply(apis, topic, jsonObj) {
        let tankspath = apis.has("GetTanksAsync_Reply") ? apis.get("GetTanksAsync_Reply") : '/sys/VeederRoot_ATG_Console_Tcp/VeederRoot_ATG_Console.Handler/thing/service/GetTanksAsync_Reply'
        let inventorypath = apis.has("GetTankInventoryAsync_Reply") ? apis.get("GetTankInventoryAsync_Reply") : '/sys/VeederRoot_ATG_Console_Tcp/VeederRoot_ATG_Console.Handler/thing/service/GetTankInventoryAsync_Reply'
        let deliverypath = apis.has("GetTankDeliveryAsync_Reply") ? apis.get("GetTankDeliveryAsync_Reply") : '/sys/VeederRoot_ATG_Console_Tcp/VeederRoot_ATG_Console.Handler/thing/service/GetTankDeliveryAsync_Reply'
        if (topic === inventorypath) {
            vm.inventory = jsonObj
        } else if (topic === tankspath) {
            vm.tankArray = jsonObj
        } else if (topic === deliverypath) {
            vm.delivery = jsonObj
        }
    }
</script>