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


<div id="SearchOnlineMonitorDiv" class="tank_table_div">
    <form action="" method="post">
        <div v-if="currentTab == 'searchChartTab'" class="chart_form_div" ref="canvasdiv">
            <canvas ref="canvasRef" style="width:100%;height:100%;" />
        </div>
    </form>
    <div v-if="currentTab == 'searchChartTab'" 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>
            <div class="search_chart_div" @@click="search('searchChartTab')"></div>
            @*<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: 'searchChartTab',
            warningValueMin: 0.58,
            warningValueMax: 1.98,
            warningPointColor: 'rgba(255, 105, 180,1)',
            normalPointColor: 'rgba(0, 0, 255, 1)',
            nozzleArray: [],
            nozzleNumber: 1,
            stdatetime: null,
            startDate: null,
            endDate: null,
            alChart: null,
            boardDatas: [],
            chartWidth: 0,
            startIndex: 0,
            rowCount: 8,
            tankPressure: '-10000.01 ~ 20000.01',
            liquidPressure: '-10000.01 ~ 20000.01',
            gasConcentrations: '-10.01 ~ 20000.01',
            config_scatterChart: {
                type: 'scatter',
                data: {
                    startDate: null,
                    endDate: null,
                    alChart: null,
                    //labels: [],
                    datasets: [
                        {
                            type: 'line',
                            label: '汽液比最大值',
                            borderColor: ['rgba(0, 128, 128, 1)'],
                            pointRadius: 0,
                            fill: false,
                            yAxisID: 'y-axis-1',
                            borderWidth: 1
                            //data: [0, 0, 0]
                        }, {
                            type: 'line',
                            label: '汽液比最小值',
                            borderColor: ['rgba(255, 105, 180, 1)'],
                            pointRadius: 0,
                            fill: false,
                            yAxisID: 'y-axis-1',
                            borderWidth: 1
                            //data: [0, 0, 0]
                        }, {
                            type: 'line',
                            label: '汽液比',
                            borderColor: ['rgba(255, 127, 0, 1)'],
                            pointRadius: 3,
                            //pointStyle: 'crossRot',
                            borderWidth: 1,
                            fill: false,
                            yAxisID: 'y-axis-1'
                            //data: [0, 0, 0]
                        }, {
                            type: 'line',
                            label: '加油量',
                            borderColor: ['rgba(255, 127, 0, 1)'],
                            pointRadius: 3,
                            borderWidth: 1,
                            fill: false,
                            yAxisID: 'y-axis-1'
                        }, {
                            type: 'line',
                            label: '油气量',
                            borderColor: ['rgba(0, 255, 0, 1)'],
                            pointRadius: 3,
                            borderWidth: 1,
                            fill: false,
                            yAxisID: 'y-axis-1'
                        }, {
                            type: 'line',
                            label: '最大加油速度',
                            borderColor: ['rgba(0, 191, 255, 1)'],
                            pointRadius: 3,
                            borderWidth: 1,
                            fill: false,
                            yAxisID: 'y-axis-1'
                        }, {
                            type: 'line',
                            label: '最大油气速度',
                            borderColor: ['rgba(138, 43, 226, 1)'],
                            pointRadius: 3,
                            borderWidth: 1,
                            fill: false,
                            yAxisID: 'y-axis-1'
                        }, {
                            type: 'line',
                            label: '平均加油速度',
                            borderColor: ['rgba(255, 255, 0, 1)'],
                            pointRadius: 3,
                            borderWidth: 1,
                            fill: false,
                            yAxisID: 'y-axis-1'
                        }, {
                            type: 'line',
                            label: '平均油气速度',
                            borderColor: ['rgba(255, 0, 0, 1)'],
                            pointRadius: 3,
                            borderWidth: 1,
                            fill: false,
                            yAxisID: 'y-axis-1'
                        }
                    ]
                },
                options: {
                    responsive: true,
                    hoverMode: 'index',
                    stacked: true,
                    animation: {
                        duration: 0 // general animation time
                    },
                    hover: {
                        animationDuration: 0 // duration of animations when hovering an item
                    },
                    responsiveAnimationDuration: 0, // animation duration after a resize
                    //title: {
                    //    display: true,
                    //    text: '汽液比散点图',
                    //    fontSize: 35,
                    //    fontColor: "#000"
                    //},
                    scales: {
                        xAxes: [{
                            type: 'time',
                            distribution: 'linear',
                            time: {
                                stepSize: 2,
                                displayFormats: {
                                    day: 'MM-DD',
                                    hour: 'DD HH',
                                    minute: 'DD HH:mm'
                                }
                            },
                            scaleLabel: {
                                display: true,
                                labelString: '时间',
                                fontSize: 20
                            },
                            ticks: {
                                autoSkip: true,
                                maxTicksLimit: 20
                            },
                            gridLines: {
                                lineWidth: 0
                            }
                        }],
                        yAxes: [{
                            type: 'linear', // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
                            display: true,
                            position: 'left',
                            id: 'y-axis-1',
                            ticks: {
                                beginAtZero: false,
                                suggestedMin: 0,
                                suggestedMax: 1.8,
                                stepSize: 0.1
                            },
                            scaleLabel: {
                                display: true,
                                labelString: '汽液比',
                                fontSize: 20
                            },
                            gridLines: {
                                lineWidth: 0
                            }
                        }],
                        elements: {
                            line: {
                                tension: 1 // disables bezier curves
                            }
                        }
                    },
                    tooltips: {
                        mode: 'index',
                        intersect: true
                    }
                }
            },
            airLiquidList: [{
                SiteLevelNozzleId: 3, TimeStamp: '21-03-26 13:30:18', 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'
            this.nozzleArray = [{ SiteLevelNozzleId: 8, Product: { ProductLabel: "92#" } }]
            this.currentlang = (navigator.language || navigator.userLanguage || navigator.browserLanguage).toLowerCase();
            if (this.currentlang.indexOf('zh-tw') >= 0) {
                this.config_scatterChart.data.datasets[4].label = '油氣量';
                this.config_scatterChart.data.datasets[6].label = '最大油氣速度';
                this.config_scatterChart.data.datasets[8].label = '平均油氣速度';
                this.config_scatterChart.options.scales.xAxes[0].scaleLabel.labelString = '時間';
            }
            this.getdatas()
        },
        methods: {
            show(e) {
                showKeyboard("default", e.currentTarget)
            },
            UpdateALScatterChart(datas) {
                if (this.alChart == null) {
                    //this.$refs.canvasRef.height = this.$refs.canvasdiv.clientWidth / 10
                    this.alChart = new Chart(this.$refs.canvasRef, this.config_scatterChart);
                }
                if (this.alChart == null || datas == null) return;
                //remove the old data in the chart
                this.alChart.data.labels.splice(0, this.alChart.data.labels.length);
                this.alChart.data.datasets.forEach((dataset) => {
                    dataset.data.splice(0, dataset.data.length);
                });
                this.alChart.update();

                for (let index in datas) {
                    let dt = datas[index]
                    this.alChart.data.datasets[0].data.push(this.warningValueMax);
                    this.alChart.data.datasets[1].data.push(this.warningValueMin);
                    this.alChart.data.datasets[2].data.push(dt.VaporLiquidRatio);
                    this.alChart.data.datasets[3].data.push(dt.LiquidVolumeWithDecimal);
                    this.alChart.data.datasets[4].data.push(dt.VaporVolumeWithDecimal);
                    this.alChart.data.datasets[5].data.push(dt.MaxLiquidFlowRateWithDecimal);
                    this.alChart.data.datasets[6].data.push(dt.MaxAirFlowRateWithDecimal);
                    this.alChart.data.datasets[7].data.push(dt.AvgLiquidFlowRateWithDecimal);
                    this.alChart.data.datasets[8].data.push(dt.AvgAirFlowRateWithDecimal);
                    this.alChart.data.labels.push(dt.FuellingEndTime);
                }
                let i = 0;
                this.alChart.data.datasets[2].data.forEach((data) => {
                    if (data === 0) {
                        this.config_scatterChart.data.datasets[2].borderColor[i] = 'rgba(192, 192, 192, 0)';
                    } else if (data > this.warningValueMax || data < this.warningValueMin) {
                        this.config_scatterChart.data.datasets[2].borderColor[i] = this.warningPointColor;
                    } else {
                        this.config_scatterChart.data.datasets[2].borderColor[i] = this.normalPointColor;
                    }
                    i++;
                });
                for (let dsi = 3; dsi < this.alChart.data.datasets.length; dsi++) {
                    let i = 1;
                    this.alChart.data.datasets[dsi].data.forEach((data) => {
                        this.config_scatterChart.data.datasets[dsi].borderColor[i] = this.config_scatterChart.data.datasets[dsi].borderColor[0];
                        i++;
                    });
                }
                this.alChart.chart.width = this.$refs.canvasdiv.clientWidth * 0.99
                this.alChart.update();
            },
            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
                args += ',0,2000080000,"","",""]'
                Publish1(path, 'GetVaporRecoveryConfig')
                Publish2(args, 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
                        dt.FuellingStartTime = this.formatDate(dt.FuellingStartTime)
                    }
                    this.UpdateFooterPage()
                    this.$forceUpdate()
                },
                deep: true
            }
        },
        filters: {
            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
                }
            }
        } 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>