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


<div id="SearchOnlineMonitorDiv" class="tank_table_div">
    <form action="" method="post">
        <div v-if="currentTab == 'searchListTab'" class="chart_form_div" ref="canvasdiv">
            <div v-if="currentlang.indexOf('zh-tw') >= 0" class="tank_form_head">
                <label style="width: 3%" class="tank_form_label">槍號</label>
                <label style="width: 11%" class="tank_form_label">時間</label>
                <label style="width: 11%" class="tank_form_label">加油時間(s)</label>
                <label style="width: 8%" class="tank_form_label">A/L(%)</label>
                <label style="width: 10%" class="tank_form_label">油氣流量(L)</label>
                <label style="width: 10%" class="tank_form_label">燃油流量(L)</label>
                <label style="width: 12%" class="tank_form_label">最大氣體流速(L/s)</label>
                <label style="width: 12%" class="tank_form_label">最大燃油流速(L/s)</label>
                <label style="width: 10%" class="tank_form_label" :style="showFilter">油罐壓力(inHg)</label>
            </div>
            <div v-else class="tank_form_head">
                <label style="width: 3%" class="tank_form_label">枪号</label>
                <label style="width: 11%" class="tank_form_label">时间</label>
                <label style="width: 11%" class="tank_form_label">加油时间(s)</label>
                <label style="width: 8%" class="tank_form_label">A/L(%)</label>
                <label style="width: 10%" class="tank_form_label">油气流量(L)</label>
                <label style="width: 10%" class="tank_form_label">燃油流量(L)</label>
                <label style="width: 12%" class="tank_form_label">最大气体流速(L/s)</label>
                <label style="width: 12%" class="tank_form_label">最大燃油流速(L/s)</label>
                <label style="width: 10%" class="tank_form_label" :style="showFilter">油罐压力(Pa)</label>
            </div>
            <div v-for="(r, index) in airLiquidList" :key="index" class="tank_form_body">
                <label style="width: 3%" class="tank_form_label">{{r.SiteLevelNozzleId}}</label>
                <label style="width: 11%" class="tank_form_label">{{r.FuellingStartTime | formatDate}}</label>
                <label style="width: 11%" class="tank_form_label">{{r.FuellingTime}}</label>
                <label style="width: 8%" class="tank_form_label">{{r.VaporLiquidRatio}}</label>
                <label style="width: 10%" class="tank_form_label">{{r.VaporVolumeWithDecimal}}</label>
                <label style="width: 10%" class="tank_form_label">{{r.LiquidVolumeWithDecimal}}</label>
                <label style="width: 12%" class="tank_form_label">{{r.MaxAirFlowRateWithDecimal}}</label>
                <label style="width: 12%" class="tank_form_label">{{r.MaxLiquidFlowRateWithDecimal}}</label>
                <label style="width: 10%" class="tank_form_label" :style="showFilter">{{r.TankPressure | numFilter}}</label>
            </div>
        </div>
    </form>
    <div v-if="currentTab == 'searchListTab'" class="config-search-navigation" :style="panelStyle">
        <div v-if="currentlang.indexOf('zh-tw') >= 0" class="config-search-tab">篩選查詢</div>
        <div v-else class="config-search-tab">筛选查询</div>
        <div v-if="currentlang.indexOf('zh-tw') >= 0" class="config-search-lable">起始日期：</div>
        <div v-else class="config-search-lable">起始日期：</div>
        <input class="config-search-input" type="text" v-model="startDate" />
        <input class="config-search-date" type="datetime-local" v-model="stdatetime" @@change="change('startDate')" />
        <div v-if="currentlang.indexOf('zh-tw') >= 0" class="config-search-lable">結束日期：</div>
        <div v-else class="config-search-lable">结束日期：</div>
        <input class="config-search-input" type="text" v-model="endDate" />
        <input class="config-search-date" type="datetime-local" v-model="stdatetime" @@change="change('endDate')" />
        <div v-if="currentlang.indexOf('zh-tw') >= 0" class="config-search-lable">油槍選擇：</div>
        <div v-else class="config-search-lable">油枪选择：</div>
        <input class="config-search-input input" type="text" v-model="nozzleNumber" @@click="show" />
        @*<select class="config-form-select" v-model="nozzleNumber">
                <option v-for="(item, i) in nozzleArray" :key="i" :value="item.SiteLevelNozzleId">{{item.SiteLevelNozzleId}}号枪 {{item.Product.ProductLabel}}</option>
        </select>*@
        <div v-if="currentlang.indexOf('zh-tw') >= 0" class="config-search-lable">油罐壓力(inHg)：</div>
        <div v-else class="config-search-lable">油罐压力(Pa)：</div>
        <input class="config-search-input input" type="text" v-model="tankPressure" @@click="show" />
        @*<div class="config-search-lable">液阻压力(Pa)：</div>
        <input class="config-search-input input" type="text" v-model="liquidPressure" @@focus="show" />
        <div class="config-search-lable">油气浓度(%)：</div>
        <input class="config-search-input input" type="text" v-model="gasConcentrations" @@click="show" />*@
        <div>
            <download-excel class="download_excel_div" :header="excel_header" :fields="json_fields" :data="excelAirLiquidList" :name="filename" worksheet="Worksheet">
                <button class="btn-default">Exc</button>
            </download-excel>
            <div class="search_list_div" @@click="search('searchListTab')"></div>
        </div>
    </div>
    <div class="tank_filter_div" :style="showFilter" @@click="clickFilter()">
    </div>
</div>

<script type="text/javascript">
    Vue.component("downloadExcel", JsonExcel);
    var vm = new Vue({
        el: '#SearchOnlineMonitorDiv',
        data: {
            currentlang: "",
            filename: ".xls",
            excel_header: "",
            json_fields: {
                '枪号': 'SiteLevelNozzleId',
                '时间': 'FuellingStartTime',
                '加油时间(s)': 'FuellingTime',
                'A/L(%)': 'VaporLiquidRatio',
                '油气流量(L)': 'VaporVolumeWithDecimal',
                '燃油流量(L)': 'LiquidVolumeWithDecimal',
                '最大气体流速(L/s)': 'MaxAirFlowRateWithDecimal',
                '最大燃油流速(L/s)': 'MaxLiquidFlowRateWithDecimal',
                '油罐压力(Pa)': 'TankPressure'
            },
            currentTab: 'searchListTab',
            warningValueMin: 0.58,
            warningValueMax: 1.98,
            warningPointColor: 'rgba(255, 0, 0,1)',
            normalPointColor: 'rgba(0, 0, 255, 1)',
            nozzleArray: [],
            nozzleNumber: '',
            stdatetime: null,
            startDate: null,
            endDate: null,
            alChart: null,
            boardDatas: [],
            chartWidth: 0,
            startIndex: 0,
            rowCount: 10,
            tankPressure: '-10000.01 ~ 20000.01',
            liquidPressure: '-10000.01 ~ 20000.01',
            gasConcentrations: '-10.01 ~ 20000.01',
            airLiquidList: [],
            //{
            //SiteLevelNozzleId: 3, FuellingStartTime: '2021-08-28T23:59:59', FuellingTime: 28, VaporLiquidRatio: 118, VaporVolumeWithDecimal: 18.19, LiquidVolumeWithDecimal: 28.31,
            //TankPressure: 12.33, MaxAirFlowRateWithDecimal: 12.33, MaxLiquidFlowRateWithDecimal: 12.33
            //}
            excelAirLiquidList: [],
            inventoryFilter: [],
            deliveryFilter: [],
            panelStyle: 'visibility: hidden;',
            showFilter: 'visibility: visible;'
        },
        mounted() {
            let today = new Date()
            this.startDate = this.toDateString(today) + ' 00:00:00'
            this.endDate = this.toDateString(today) + ' 23:59:59'
            let path = '/sys/Vapor_Recovery_App/Application.VaporRecoveryApp.App/thing/service/'
            let args = '["' + this.startDate.replace(/ /g, "T") + '","' + this.endDate.replace(/ /g, "T") + '",0,0,10,"","",""]'
            let argsex = '["' + this.startDate.replace(/ /g, "T") + '","' + this.endDate.replace(/ /g, "T") + '",0,0,1000000,"","",""]'
            this.filename = 'result_' + this.startDate.replace(/-/g, "").substr(2, 6) + '-' + this.endDate.replace(/-/g, "").substr(2, 6) + this.filename
            this.excel_header = '起始日期：' + this.startDate + '结束日期：' + this.endDate
            Publish2(args, path, 'GetVRBoardNozzleTrxFlowDatas')
            Publish2(argsex, path, 'GetVRBoardNozzleTrxFlowDatas')
            this.nozzleArray = [{ SiteLevelNozzleId: 8, Product: { ProductLabel: "92#" } }]
            this.currentlang = (navigator.language || navigator.userLanguage || navigator.browserLanguage).toLowerCase();
            if (this.currentlang.indexOf('zh-tw') >= 0) {
                this.excel_header = '起始日期：' + this.startDate + '結束日期：' + this.endDate
                this.json_fields = {
                    '槍號': 'SiteLevelNozzleId',
                    '時間': 'FuellingStartTime',
                    '加油時間(s)': 'FuellingTime',
                    'A/L(%)': 'VaporLiquidRatio',
                    '油氣流量(L)': 'VaporVolumeWithDecimal',
                    '燃油流量(L)': 'LiquidVolumeWithDecimal',
                    '最大氣體流速(L/s)': 'MaxAirFlowRateWithDecimal',
                    '最大燃油流速(L/s)': 'MaxLiquidFlowRateWithDecimal',
                    '油罐壓力(inHg)': 'TankPressure'
                }
            }
        },
        methods: {
            show(e) {
                showKeyboard("default", e.currentTarget)
            },
            search(tab) {
                this.currentTab = tab
                this.panelStyle = 'visibility: hidden;'
                this.showFilter = 'visibility: visible;'
                this.startIndex = 0
                this.getdatas()
            },
            getdatas() {
                let path = '/sys/Vapor_Recovery_App/Application.VaporRecoveryApp.App/thing/service/'
                this.filename = 'result_' + this.startDate.replace(/-/g, "").substr(2, 6) + '-' + this.endDate.replace(/-/g, "").substr(2, 6) + ".xls"
                this.excel_header = '起始日期：' + this.startDate + '结束日期：' + this.endDate
                if (this.currentlang.indexOf('zh-tw') >= 0) {
                    this.excel_header = '起始日期：' + this.startDate + '結束日期：' + this.endDate
                }
                let args = '["' + this.startDate.replace(/ /g, "T") + '","' + this.endDate.replace(/ /g, "T") + '",' + (this.nozzleNumber === '' ? '0' : this.nozzleNumber)
                if (this.currentTab == 'searchChartTab') {
                    args += ',0,2000080000,"","",""]'
                    Publish1(path, 'GetVaporRecoveryConfig')
                    Publish2(args, path, 'GetVRBoardNozzleTrxFlowDatas')
                } else if (this.currentTab == 'searchListTab') {
                    this.alChart = null
                    let argsex = args + ',0,1000000' + ',"' + this.tankPressure + '","' + this.liquidPressure + '","' + this.gasConcentrations + '"]'
                    args += ',' + this.startIndex + ',' + this.rowCount + ',"' + this.tankPressure + '","' + this.liquidPressure + '","' + this.gasConcentrations + '"]'
                    Publish2(args, path, 'GetVRBoardNozzleTrxFlowDatas')
                    Publish2(argsex, path, 'GetVRBoardNozzleTrxFlowDatas')
                }
                this.$forceUpdate()
            },
            UpdateFooterPage() {
                if (document.getElementById("PumpsPage_Bottom_pages") != null) {
                    var footerPage = document.getElementById("PumpsPage_Bottom_pages");
                    if (this.currentTab == 'searchListTab') {
                        footerPage.style.visibility = "visible";
                        footerPage.style.display = "";
                    } else { footerPage.style.visibility = "hidden"; footerPage.style.display = "none"; }
                }
            },
            clickFilter() {
                if (this.currentTab == 'searchChartTab') {
                    this.resizeChart(0.88)
                }
                this.panelStyle = 'visibility: visible;'
                this.showFilter = 'visibility: hidden;'
            },
            resizeChart(ratio) {
                this.chartWidth = this.alChart.chart.width
                this.alChart.chart.width = this.$refs.canvasdiv.clientWidth * ratio
                this.$refs.canvasRef.getContext("2d").clearRect(0, 0, this.$refs.canvasRef.width, this.$refs.canvasRef.height)
                this.alChart.update()
            },
            PrefixInteger(num, length) {
                return ('000' + num).substr(-length)
            },
            change(target) {
                let val = this.stdatetime.replace(/T/g, " ") + ':00'
                if (target === 'startDate') {
                    this.startDate = val
                } else {
                    this.endDate = val
                }
            },
            formatDate(value) {
                let realVal = ''
                if (value !== null && typeof (value) !== 'undefined') {
                    realVal = value.substring(0, 16).replace('T', ' ')
                } else {
                    realVal = 'N/A'
                }
                return realVal
            },
            toDateString(date) {
                return date.getFullYear() + '-' + this.PrefixInteger(date.getMonth() + 1, 2) + '-' + this.PrefixInteger(date.getDate(), 2)
            }
        },
        watch: {
            boardDatas: {
                handler(newValue, oldValue) {
                    this.UpdateALScatterChart(newValue)
                    this.UpdateFooterPage()
                },
                deep: true
            },
            airLiquidList: {
                handler(newValue, oldValue) {
                    for (let index in newValue) {
                        let dt = newValue[index]
                        dt.FuellingTime = (new Date(dt.FuellingEndTime) - new Date(dt.FuellingStartTime)) / 1000
                    }
                    this.UpdateFooterPage()
                    this.$forceUpdate()
                },
                deep: true
            }
        },
        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
            }
        }
    })

    function OnReply(apis, topic, jsonObj) {
        let boardpath = apis.has("GetVRBoardNozzleTrxFlowDatas_Reply") ? apis.get("GetVRBoardNozzleTrxFlowDatas_Reply") : '/sys/Vapor_Recovery_App/Application.VaporRecoveryApp.App/thing/service/GetVRBoardNozzleTrxFlowDatas_Reply'
        let vrconfigpath = apis.has("GetVaporRecoveryConfig_Reply") ? apis.get("GetVaporRecoveryConfig_Reply") : '/sys/Vapor_Recovery_App/Application.VaporRecoveryApp.App/thing/service/GetVaporRecoveryConfig_Reply'
        if (topic === boardpath) {
            if (vm.currentTab == 'searchChartTab') {
                vm.boardDatas = jsonObj
            } else if (vm.currentTab == 'searchListTab') {
                if (jsonObj.length > vm.rowCount) {
                    vm.excelAirLiquidList = jsonObj
                } else {
                    vm.airLiquidList = jsonObj
                    vm.excelAirLiquidList = jsonObj
                }
                console.log('searchListTab', jsonObj.length)
            }
        } else if (topic === vrconfigpath) {
            vm.warningValueMin = jsonObj.QualifiedAirLiquidRatioMin
            vm.warningValueMax = jsonObj.QualifiedAirLiquidRatioMax
        }
    }

    function ShowPreviousPage() {
        if (vm.startIndex <= 0) {
            dialogBox("提示信息", "已經是第一頁", null, null);
            return
        }
        vm.startIndex -= vm.rowCount
        vm.getdatas()
    }

    function ShowNextPage() {
        if (vm.rowCount > vm.airLiquidList.length) {
            dialogBox("提示信息", "已經是最後一頁", null, null)
            return
        }
        vm.startIndex += vm.rowCount
        vm.getdatas()
    }

    function UpdateFooterPage() {
        if (document.getElementById("PumpsPage_Bottom_pages") != null) {
            for (var p = 1; p < 6; p++) {
                var imgCurrentPageIdStr = "PumpsPage_Bottom_pages_img_" + p;
                var imgCurrentPageNotShowedIdStr = "PumpsPage_Bottom_pages_notshowed_img_" + p;
                if (document.getElementById(imgCurrentPageIdStr) != null)
                    document.getElementById(imgCurrentPageIdStr).style.visibility = "hidden";
                if (document.getElementById(imgCurrentPageNotShowedIdStr) != null)
                    document.getElementById(imgCurrentPageNotShowedIdStr).style.visibility = "hidden";
            }
            //update next page img position
            var nextPageImg = document.getElementById("PumpsPage_Bottom_pages_img_next_page");
            var previousPageImg = document.getElementById("PumpsPage_Bottom_pages_img_previous_page");

            previousPageImg.style.visibility = "visible";
            if (nextPageImg != null) {
                //if (totalPage < 5)
                nextPageImg.style.left = (16.5 * 1 + 5).toString() + "%";
                nextPageImg.style.visibility = "visible";
            }
        }
    }
    UpdateFooterPage();
</script>