BemsWebApplication.PlanConsumeGoal = function (params, viewInfo) {
    'use strict';
    var endpointSelector = "";
    if (BemsWebApplication.config.mode == "production") {
        endpointSelector = new DevExpress.EndpointSelector(BemsWebApplication.config.endpoints).config.db.production;
    } else {
        endpointSelector = new DevExpress.EndpointSelector(BemsWebApplication.config.endpoints).config.db.local;
    }

    ////// 전역 변수 설정 부

    //  2019.04.17 : 그리드 도표 작업 : 팝업창 추가 ~~~
    // 팝업창뷰 보이기 속성 제어용 변수 선언
    var DataGridPopup_Visible = ko.observable(false);
    // 그래프 출력 이후 엑셀출력을 위한 팝업창을 위해 임시 저장용 배열 선언
    var dataArrayresult = ko.observableArray();
    //  ~~~ 2019.04.17 : 그리드 도표 작업 : 팝업창 추가

    var m3calValue;
    var applyonoff = false;
    var SiteId = BWA.UserInfo.SiteId();
    var ServiceTypeId = 1;
    var visiblePopup = ko.observable(false);
    var dataSource = [{
        dateTime: "1",
        Prediction: 0,  //예측
        Goal: 0         //목표
    }, {
        dateTime: "2",
        Prediction: 0,
        Goal: 0
    }, {
        dateTime: "3",
        Prediction: 0,
        Goal: 0
    }, {
        dateTime: "4",
        Prediction: 0,
        Goal: 0
    }, {
        dateTime: "5",
        Prediction: 0,
        Goal: 0
    }, {
        dateTime: "6",
        Prediction: 0,
        Goal: 0
    }, {
        dateTime: "7",
        Prediction: 0,
        Goal: 0
    }, {
        dateTime: "8",
        Prediction: 0,
        Goal: 0
    }, {
        dateTime: "9",
        Prediction: 0,
        Goal: 0
    }, {
        dateTime: "10",
        Prediction: 0,
        Goal: 0
    }, {
        dateTime: "11",
        Prediction: 0,
        Goal: 0
    }, {
        dateTime: "12",
        Prediction: 0,
        Goal: 0
    }, {
        dateTime: "13",
        Prediction: 0,
        Goal: 0
    }, {
        dateTime: "14",
        Prediction: 0,
        Goal: 0
    }, {
        dateTime: "15",
        Prediction: 0,
        Goal: 0
    }, {
        dateTime: "16",
        Prediction: 0,
        Goal: 0
    }, {
        dateTime: "17",
        Prediction: 0,
        Goal: 0
    }, {
        dateTime: "18",
        Prediction: 0,
        Goal: 0
    }, {
        dateTime: "19",
        Prediction: 0,
        Goal: 0
    }, {
        dateTime: "20",
        Prediction: 0,
        Goal: 0
    }, {
        dateTime: "21",
        Prediction: 0,
        Goal: 0
    }, {
        dateTime: "22",
        Prediction: 0,
        Goal: 0
    }, {
        dateTime: "23",
        Prediction: 0,
        Goal: 0
    }, {
        dateTime: "24",
        Prediction: 0,
        Goal: 0
    }, {
        dateTime: "25",
        Prediction: 0,
        Goal: 0
    }, {
        dateTime: "26",
        Prediction: 0,
        Goal: 0
    }, {
        dateTime: "27",
        Prediction: 0,
        Goal: 0
    }, {
        dateTime: "28",
        Prediction: 0,
        Goal: 0
    }, {
        dateTime: "29",
        Prediction: 0,
        Goal: 0
    }, {
        dateTime: "30",
        Prediction: 0,

        Goal: 0
    }, {
        dateTime: "31",
        Prediction: 0,
        Goal: 0
    }];

    var FuelID = [
        { id: 1, fuel: "전기" },
        { id: 2, fuel: "가스" },
        { id: 3, fuel: "수도" }
    ];
    var energySelectButton = 1;
    var yearSelectButton = "Month";
    var TodayAdd = new Date();
    
    var SelectedYear = 0; // 사용자가 선택한 연도
    var SelectedMonth = 0; // 사용자가 선택한 월
    ////// 전역 변수 설정 부

    function numberWithCommas(x) {
        return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    }

    //  2019.04.17 : 해당월의 일수 구하기 ~~~
    function LastDayOfMonth(year, month) {
        var _firstDayOfMonth = [year, month, 1].join('-');
        var _firstDayOfMonthDate = new Date(_firstDayOfMonth);

        _firstDayOfMonthDate.setMonth(_firstDayOfMonthDate.getMonth() + 1);
        _firstDayOfMonthDate.setDate(_firstDayOfMonthDate.getDate() - 1);

        return _firstDayOfMonthDate.getDate();
    }
    //  2019.04.17 : 해당월의 일수 구하기 ~~~

    //  2019.04.17 : 그리드 도표 작업 : 팝업창 추가 ~~~
    function DataGridPopup_ButtonClick() {
        // DevExpress.ui.notify("날짜가 일치하지 않는 데이타가 존재합니다", "fail", 1000);  
        DataGridPopup_Visible(true);
    }
    function handlePopupShown() {

        var ArraySize;     //해당 월의 길이

        dataArrayresult = dataSource.slice();// 데이타소스 복제
        if (yearSelectButton == "Month") {
            ArraySize = LastDayOfMonth(SelectedYear, SelectedMonth);
            viewModel.PlanGoalOptions.columns[0].caption = "일";
        }
        else {
            ArraySize = 12;
            viewModel.PlanGoalOptions.columns[0].caption = "월";
        }
        dataArrayresult.splice(ArraySize, 31 - ArraySize);  // 불필요 데이터 삭제
        
        energySelectButton = $("#energySelect").dxSelectBox("instance").option('value');
        if (energySelectButton == 1) {
            viewModel.PlanGoalOptions.columns[1].caption = "예측 전력(kWh)";
            viewModel.PlanGoalOptions.columns[2].caption = "목표 전력(kWh)";
        }
        else if (energySelectButton == 2) {
            viewModel.PlanGoalOptions.columns[1].caption = "예측 가스(m3)";
            viewModel.PlanGoalOptions.columns[2].caption = "목표 가스(m3)";
        }
        else {
            viewModel.PlanGoalOptions.columns[1].caption = "예측 수도(m3)";
            viewModel.PlanGoalOptions.columns[2].caption = "목표 수도(m3)";
        }

        $("#PlanGoal_Container").dxDataGrid("instance").option("dataSource", dataArrayresult);
        // 팝업창 갱신
        DataGridPopup_Visible(true);
    }
    //  ~~~ 2019.04.17 : 그리드 도표 작업 : 팝업창 추가

    function handleViewShowing() {
        var getTOEDataSource = new DevExpress.data.DataSource({
            store: {
                type: "odata",
                url: endpointSelector + "/BemsFactorToe"
            },
            requireTotalCount: true,
            pageSize: 3
        });
        getTOEDataSource.load()
        .done(function (Result) {
            var powertoe, gastoe;
            if (Result.length != 0) {
                for (var i = 0; i < Result.length; i++) {
                    if (Result[i].FuelTypeId == 1) {
                        powertoe = Result[i].TotalFactor;
                    }
                    if (Result[i].FuelTypeId == 2) {
                        gastoe = Result[i].TotalFactor;
                    }
                }
                if (powertoe != null && gastoe != null)
                    m3calValue = gastoe / powertoe;
            }
            else {
                utils.toast.show("[BemsFactorToe] 데이터가 없습니다.");
            }
        })
        .fail(function (error) {
            utils.toast.show("[BemsFactorToe] 데이터를 불러오는데 실패 하였습니다.");
        });
    }

    function getAllData() {
        for (var i = 0; i < dataSource.length; i++) {
            dataSource[i].dateTime = i + 1;
            dataSource[i].Prediction = 0;
            dataSource[i].Goal = 0;
        }

        var tmpDate = $("#startDatePicker").dxDateBox("instance").option('value');
        $("#sideBarChart").dxChart("instance").option('commonSeriesSettings').type = "stackedBar";
        var poweropt = [
            { valueField: "Prediction", name: "예측 전력", stack: "prediction", color: '#007994' },
            { valueField: "Goal", name: "목표 전력", stack: "goal", color: '#5F8B95' }];
        var gasopt = [
            { valueField: "Prediction", name: "예측 가스", stack: "prediction", color: '#007994' },
            { valueField: "Goal", name: "목표 가스", stack: "goal", color: '#5F8B95' }];
        var wateropt = [
            { valueField: "Prediction", name: "예측 수도", stack: "prediction", color: '#007994' },
            { valueField: "Goal", name: "목표 수도", stack: "goal", color: '#5F8B95' }];

        if (energySelectButton == 1) {
            $("#sideBarChart").dxChart("instance").option('series', poweropt);
        }
        else if (energySelectButton == 2) {
            $("#sideBarChart").dxChart("instance").option('series', gasopt);
        }
        else {
            $("#sideBarChart").dxChart("instance").option('series', wateropt);
        }

        // 2019.04.17   사용자가 선택한 연도, 월 업데이트 ~~~
        SelectedYear = tmpDate.getFullYear();
        SelectedMonth = tmpDate.getMonth() + 1;
        // ~~~ 2019.04.17   사용자가 선택한 연도, 월 업데이트

        var DataSource = new DevExpress.data.DataSource({
            store: {
                type: "odata",
                url: endpointSelector + "/BemsEnergyDaily"
            },
            requireTotalCount: true,
            pageSize: 400
        });

        if (yearSelectButton == "Month") {
            DataSource.filter([
               ["SiteId", "=", SiteId],
               "and",
               ["ServiceTypeId", "=", ServiceTypeId],
               "and",
               ["FuelTypeId", "=", energySelectButton],  //전력 시설ID
               "and",
               ["CreatedDate", ">=", new Date(tmpDate.getFullYear(), tmpDate.getMonth(), 1, 0, 0)],
               "and",
               ["CreatedDate", "<", new Date(tmpDate.getFullYear(), tmpDate.getMonth() + 1, 1, 0, 0)]
            ]);
        }
        else {
            DataSource.filter([
              ["SiteId", "=", SiteId],
              "and",
               ["ServiceTypeId", "=", ServiceTypeId],
               "and",
              ["FuelTypeId", "=", energySelectButton],  //전력 시설ID
              "and",
              ["CreatedDate", ">=", new Date(tmpDate.getFullYear(), 0, 1, 0, 0)],
              "and",
              ["CreatedDate", "<", new Date(tmpDate.getFullYear() + 1, 0, 1, 0, 0)]
            ]);
        }
        DataSource.sort({ getter: "CreatedDate", asc: true });

        DataSource.load()
        .done(function (Result) {
            if (Result.length != 0) {
                if (yearSelectButton == "Month") {
                    for (var i = 0; i < Result.length; i++) {
                        if (Result[i].Prediction != null) {
                            if (energySelectButton != 2) {
                                dataSource[i].Prediction = Result[i].Prediction;
                            }
                            else {
                                dataSource[i].Prediction = Result[i].Prediction / m3calValue;
                            }
                        }
                        else
                            dataSource[i].Prediction = 0;
                        if (Result[i].Goal != null) {
                            if (energySelectButton != 2) {
                                dataSource[i].Goal = Result[i].Goal;
                            }
                            else {
                                dataSource[i].Goal = Result[i].Goal / m3calValue;
                            }
                        }
                        else
                            dataSource[i].Goal = 0;
                    }
                }
                else {
                    for (var i = 0; i < Result.length; i++) {
                        switch (Result[i].CreatedDate.getMonth()) {
                            case 0: {
                                if (Result[i].Prediction != null) {
                                    if (energySelectButton != 2) {
                                        dataSource[0].Prediction += Result[i].Prediction;
                                    }
                                    else {
                                        dataSource[0].Prediction += Result[i].Prediction / m3calValue;
                                    }
                                }
                                if (Result[i].Goal != null) {
                                    if (energySelectButton != 2) {
                                        dataSource[0].Goal += Result[i].Goal;
                                    }
                                    else {
                                        dataSource[0].Goal += Result[i].Goal / m3calValue;
                                    }
                                }
                                break;
                            }
                            case 1: {
                                if (Result[i].Prediction != null) {
                                    if (energySelectButton != 2) {
                                        dataSource[1].Prediction += Result[i].Prediction;
                                    }
                                    else {
                                        dataSource[1].Prediction += Result[i].Prediction / m3calValue;
                                    }
                                }
                                if (Result[i].Goal != null) {
                                    if (energySelectButton != 2) {
                                        dataSource[1].Goal += Result[i].Goal;
                                    }
                                    else {
                                        dataSource[1].Goal += Result[i].Goal / m3calValue;
                                    }
                                }
                                break;
                            }
                            case 2: {
                                if (Result[i].Prediction != null) {
                                    if (energySelectButton != 2) {
                                        dataSource[2].Prediction += Result[i].Prediction;
                                    }
                                    else {
                                        dataSource[2].Prediction += Result[i].Prediction / m3calValue;
                                    }
                                }
                                if (Result[i].Goal != null) {
                                    if (energySelectButton != 2) {
                                        dataSource[2].Goal += Result[i].Goal;
                                    }
                                    else {
                                        dataSource[2].Goal += Result[i].Goal / m3calValue;
                                    }
                                }
                                break;
                            }
                            case 3: {
                                if (Result[i].Prediction != null) {
                                    if (energySelectButton != 2) {
                                        dataSource[3].Prediction += Result[i].Prediction;
                                    }
                                    else {
                                        dataSource[3].Prediction += Result[i].Prediction / m3calValue;
                                    }
                                }
                                if (Result[i].Goal != null) {
                                    if (energySelectButton != 2) {
                                        dataSource[3].Goal += Result[i].Goal;
                                    }
                                    else {
                                        dataSource[3].Goal += Result[i].Goal / m3calValue;
                                    }
                                }
                                break;
                            }
                            case 4: {
                                if (Result[i].Prediction != null) {
                                    if (energySelectButton != 2) {
                                        dataSource[4].Prediction += Result[i].Prediction;
                                    }
                                    else {
                                        dataSource[4].Prediction += Result[i].Prediction / m3calValue;
                                    }
                                }
                                if (Result[i].Goal != null) {
                                    if (energySelectButton != 2) {
                                        dataSource[4].Goal += Result[i].Goal;
                                    }
                                    else {
                                        dataSource[4].Goal += Result[i].Goal / m3calValue;
                                    }
                                }
                                break;
                            }
                            case 5: {
                                if (Result[i].Prediction != null) {
                                    if (energySelectButton != 2) {
                                        dataSource[5].Prediction += Result[i].Prediction;
                                    }
                                    else {
                                        dataSource[5].Prediction += Result[i].Prediction / m3calValue;
                                    }
                                }
                                if (Result[i].Goal != null) {
                                    if (energySelectButton != 2) {
                                        dataSource[5].Goal += Result[i].Goal;
                                    }
                                    else {
                                        dataSource[5].Goal += Result[i].Goal / m3calValue;
                                    }
                                }
                                break;
                            }
                            case 6: {
                                if (Result[i].Prediction != null) {
                                    if (energySelectButton != 2) {
                                        dataSource[6].Prediction += Result[i].Prediction;
                                    }
                                    else {
                                        dataSource[6].Prediction += Result[i].Prediction / m3calValue;
                                    }
                                }
                                if (Result[i].Goal != null) {
                                    if (energySelectButton != 2) {
                                        dataSource[6].Goal += Result[i].Goal;
                                    }
                                    else {
                                        dataSource[6].Goal += Result[i].Goal / m3calValue;
                                    }
                                }
                                break;
                            }
                            case 7: {
                                if (Result[i].Prediction != null) {
                                    if (energySelectButton != 2) {
                                        dataSource[7].Prediction += Result[i].Prediction;
                                    }
                                    else {
                                        dataSource[7].Prediction += Result[i].Prediction / m3calValue;
                                    }
                                }
                                if (Result[i].Goal != null) {
                                    if (energySelectButton != 2) {
                                        dataSource[7].Goal += Result[i].Goal;
                                    }
                                    else {
                                        dataSource[7].Goal += Result[i].Goal / m3calValue;
                                    }
                                }
                                break;
                            }
                            case 8: {
                                if (Result[i].Prediction != null) {
                                    if (energySelectButton != 2) {
                                        dataSource[8].Prediction += Result[i].Prediction;
                                    }
                                    else {
                                        dataSource[8].Prediction += Result[i].Prediction / m3calValue;
                                    }
                                }
                                if (Result[i].Goal != null) {
                                    if (energySelectButton != 2) {
                                        dataSource[8].Goal += Result[i].Goal;
                                    }
                                    else {
                                        dataSource[8].Goal += Result[i].Goal / m3calValue;
                                    }
                                }
                                break;
                            }
                            case 9: {
                                if (Result[i].Prediction != null) {
                                    if (energySelectButton != 2) {
                                        dataSource[9].Prediction += Result[i].Prediction;
                                    }
                                    else {
                                        dataSource[9].Prediction += Result[i].Prediction / m3calValue;
                                    }
                                }
                                if (Result[i].Goal != null) {
                                    if (energySelectButton != 2) {
                                        dataSource[9].Goal += Result[i].Goal;
                                    }
                                    else {
                                        dataSource[9].Goal += Result[i].Goal / m3calValue;
                                    }
                                }
                                break;
                            }
                            case 10: {
                                if (Result[i].Prediction != null) {
                                    if (energySelectButton != 2) {
                                        dataSource[10].Prediction += Result[i].Prediction;
                                    }
                                    else {
                                        dataSource[10].Prediction += Result[i].Prediction / m3calValue;
                                    }
                                }
                                if (Result[i].Goal != null) {
                                    if (energySelectButton != 2) {
                                        dataSource[10].Goal += Result[i].Goal;
                                    }
                                    else {
                                        dataSource[10].Goal += Result[i].Goal / m3calValue;
                                    }
                                }
                                break;
                            }
                            case 11: {
                                if (Result[i].Prediction != null) {
                                    if (energySelectButton != 2) {
                                        dataSource[11].Prediction += Result[i].Prediction;
                                    }
                                    else {
                                        dataSource[11].Prediction += Result[i].Prediction / m3calValue;
                                    }
                                }
                                if (Result[i].Goal != null) {
                                    if (energySelectButton != 2) {
                                        dataSource[11].Goal += Result[i].Goal;
                                    }
                                    else {
                                        dataSource[11].Goal += Result[i].Goal / m3calValue;     // 2019.04.23 오류수정
                                    }
                                }
                                break;
                            }
                        }
                    }
                }
                $("#LoadPanel").dxLoadPanel('instance').option('visible', false);
                $("#sideBarChart").dxChart("instance").option('dataSource', dataSource);
            }
            else {
                utils.toast.show("[BemsEnergyDaily]데이터가 없습니다.");
                $("#LoadPanel").dxLoadPanel('instance').option('visible', false);
            }
        })
        .fail(function (error) {
            utils.toast.show("데이터를 불러오는데 실패 하였습니다.");
            $("#LoadPanel").dxLoadPanel('instance').option('visible', false);
        });
    }
    function handleViewShown() {
        $("#LoadPanel").dxLoadPanel({
            message: '로딩 중...',
            showIndicator: true,
            visible: false
        });
        $("#monthBtn").dxButton({
            text: "월",
            onClick: function () {
                $("#LoadPanel").dxLoadPanel('instance').option('visible', true);
                yearSelectButton = "Month";
                energySelectButton = $("#energySelect").dxSelectBox("instance").option('value');
                $("#startDatePicker").dxDateBox("instance").option("formatString", "yyyy년 MM월");
                $("#startDatePicker").dxDateBox("instance").option("maxZoomLevel", "year");
                $("#monthBtn").css("background-image", "linear-gradient(180deg,#9babc3 0%,#41618c 100%)");
                $("#yearBtn").css("background-image", "linear-gradient(rgb(56,88,130) 0%, rgb(44,68,101)100%)");
                $("#startDatePicker").dxDateBox("instance").option("width", "140px");

                var argAxis = $("#sideBarChart").dxChart("instance").option('argumentAxis');
                var tmpDate = $("#startDatePicker").dxDateBox("instance").option('value');

                argAxis.max = 32 - new Date(tmpDate.getFullYear(), tmpDate.getMonth(), 32).getDate();
                var labelObj = {
                    customizeText: function () {
                        return this.value + '일';
                    }
                };

                argAxis.label = labelObj;
                $("#sideBarChart").dxChart("instance").option('argumentAxis', argAxis);
                if (energySelectButton == 1) {
                    var valAxis = this.chartOptions.valueAxis();
                    valAxis.min = 0;
                    //valAxis.max = 15000;
                    //valAxis.tickInterval = 1000;
                    var labelObj = {
                        customizeText: function () {
                            if (this.value >= 1000 && this.value < 10000) {
                                this.value = this.value.toString().substring(0, 1) + 'K';
                            } else if (this.value >= 10000) {
                                this.value = this.value.toString().substring(0, 2) + 'K';
                            } else {
                                this.value = this.value;
                            }
                            return this.value + ' kWh';
                        }
                    };
                    valAxis.label = labelObj;
                    this.chartOptions.valueAxis(valAxis);
                }
                else if (energySelectButton == 2) {
                    var valAxis = this.chartOptions.valueAxis();
                    valAxis.min = 0;
                    //valAxis.max = 15000;
                    //valAxis.tickInterval = 200;
                    var labelObj = {
                        customizeText: function () {
                            if (this.value >= 1000 && this.value < 10000) {
                                this.value = this.value.toString().substring(0, 1) + 'K';
                            } else if (this.value >= 10000) {
                                this.value = this.value.toString().substring(0, 2) + 'K';
                            } else {
                                this.value = this.value;
                            }
                            return this.value + ' m3';
                        }
                    };
                    valAxis.label = labelObj;
                    this.chartOptions.valueAxis(valAxis);
                }
                else {
                    var valAxis = this.chartOptions.valueAxis();
                    valAxis.min = 0;
                    //valAxis.max = 100;
                    //valAxis.tickInterval = 10;
                    var labelObj = {
                        customizeText: function () {
                            if (this.value >= 1000) {
                                this.value = this.value.toString().substring(0, 1) + 'K';
                            } else {
                                this.value = this.value;
                            }
                            return this.value + ' m3';
                        }
                    };
                    valAxis.label = labelObj;
                    this.chartOptions.valueAxis(valAxis);
                }
                getAllData();
            }
        });
        $("#yearBtn").dxButton({
            text: "년",
            onClick: function () {
                $("#LoadPanel").dxLoadPanel('instance').option('visible', true);
                yearSelectButton = "Year";
                energySelectButton = $("#energySelect").dxSelectBox("instance").option('value');
                $("#startDatePicker").dxDateBox("instance").option("formatString", "yyyy년");
                $("#startDatePicker").dxDateBox("instance").option("maxZoomLevel", "decade");
                $("#yearBtn").css("background-image", "linear-gradient(180deg,#9babc3 0%,#41618c 100%)");
                $("#monthBtn").css("background-image", "linear-gradient(rgb(56,88,130) 0%, rgb(44,68,101)100%)");
                $("#startDatePicker").dxDateBox("instance").option("width", "100px");

                var argAxis = $("#sideBarChart").dxChart("instance").option('argumentAxis');

                argAxis.max = 12;
                var labelObj = {
                    customizeText: function () {
                        return this.value + '월';
                    }
                };

                argAxis.label = labelObj;
                $("#sideBarChart").dxChart("instance").option('argumentAxis', argAxis);
                if (energySelectButton == 1) {
                    var valAxis = this.chartOptions.valueAxis();
                    valAxis.min = 0;
                    //valAxis.max = 400000;
                    //valAxis.tickInterval = 50000;
                    var labelObj = {
                        customizeText: function () {
                            if (this.value >= 1000 && this.value < 10000) {
                                this.value = this.value.toString().substring(0, 1) + 'K';
                            } else if (this.value >= 10000 && this.value < 100000) {
                                this.value = this.value.toString().substring(0, 2) + 'K';
                            } else if (this.value >= 100000) {
                                this.value = this.value.toString().substring(0, 3) + 'K';
                            } else {
                                this.value = this.value;
                            }
                            return this.value + ' kWh';
                        }
                    };
                    valAxis.label = labelObj;
                    this.chartOptions.valueAxis(valAxis);
                }
                else if (energySelectButton == 2) {
                    var valAxis = this.chartOptions.valueAxis();
                    valAxis.min = 0;
                    //valAxis.max = 400000;
                    //valAxis.tickInterval = 40000;
                    var labelObj = {
                        customizeText: function () {
                            if (this.value >= 1000 && this.value < 10000) {
                                this.value = this.value.toString().substring(0, 1) + 'K';
                            } else if (this.value >= 10000 && this.value < 100000) {
                                this.value = this.value.toString().substring(0, 2) + 'K';
                            } else if (this.value >= 100000 && this.value < 1000000) {
                                this.value = this.value.toString().substring(0, 3) + 'K';
                            } else if (this.value >= 1000000 && this.value < 10000000) {
                                this.value = this.value.toString().substring(0, 1) + 'M';
                            } else if (this.value >= 10000000 && this.value < 100000000) {
                                this.value = this.value.toString().substring(0, 2) + 'M';
                            } else if (this.value >= 100000000 && this.value < 1000000000) {
                                this.value = this.value.toString().substring(0, 3) + 'M';
                            } else if (this.value >= 1000000000) {
                                this.value = this.value.toString().substring(0, 4) + 'M';
                            } else {
                                this.value = this.value;
                            }
                            return this.value + ' m3';
                        }
                    };
                    valAxis.label = labelObj;
                    this.chartOptions.valueAxis(valAxis);
                }
                else {
                    var valAxis = this.chartOptions.valueAxis();
                    valAxis.min = 0;
                    //valAxis.max = 2500;
                    //valAxis.tickInterval = 250;
                    var labelObj = {
                        customizeText: function () {
                            //if (this.value >= 1000 && this.value < 10000) {
                            //    this.value = this.value.toString().substring(0, 1) + 'K';
                            //} else if (this.value >= 10000) {
                            //    this.value = this.value.toString().substring(0, 2) + 'K';
                            //} else {
                            //    this.value = this.value;
                            //}
                            return this.value + ' m3';
                        }
                    };
                    valAxis.label = labelObj;
                    this.chartOptions.valueAxis(valAxis);
                }
                getAllData();
            }
        });
        $("#startDatePicker").dxDateBox({
            value: TodayAdd,
            maxZoomLevel: 'year',
            formatString: "yyyy년 MM월",
            onValueChanged: function (data) {
                var tmpDate = data.value;
                $("#LoadPanel").dxLoadPanel('instance').option('visible', true);

                if (yearSelectButton == "Month") {
                    argAxis.max = 32 - new Date(tmpDate.getFullYear(), tmpDate.getMonth(), 32).getDate();
                    var labelObj = {
                        customizeText: function () {
                            return this.value + '일';
                        }
                    };
                } else {
                    argAxis.max = 12;
                    var labelObj = {
                        customizeText: function () {
                            return this.value + '월';
                        }
                    };
                }
                argAxis.label = labelObj;
                $("#sideBarChart").dxChart("instance").option('argumentAxis', argAxis);

                if (yearSelectButton == "Month") {
                    if (energySelectButton == 1) {
                        var valAxis = this.chartOptions.valueAxis();
                        valAxis.min = 0;
                        //valAxis.max = 15000;
                        //valAxis.tickInterval = 1000;
                        var labelObj = {
                            customizeText: function () {
                                if (this.value >= 1000 && this.value < 10000) {
                                    this.value = this.value.toString().substring(0, 1) + 'K';
                                } else if (this.value >= 10000) {
                                    this.value = this.value.toString().substring(0, 2) + 'K';
                                } else {
                                    this.value = this.value;
                                }
                                return this.value + ' kWh';
                            }
                        };
                        valAxis.label = labelObj;
                        this.chartOptions.valueAxis(valAxis);
                    }
                    else if (energySelectButton == 2) {
                        var valAxis = this.chartOptions.valueAxis();
                        valAxis.min = 0;
                        //valAxis.max = 15000;
                        //valAxis.tickInterval = 500;
                        var labelObj = {
                            customizeText: function () {
                                if (this.value >= 1000 && this.value < 10000) {
                                    this.value = this.value.toString().substring(0, 1) + 'K';
                                } else if (this.value >= 10000) {
                                    this.value = this.value.toString().substring(0, 2) + 'K';
                                } else {
                                    this.value = this.value;
                                }
                                return this.value + ' m3';
                            }
                        };
                        valAxis.label = labelObj;
                        this.chartOptions.valueAxis(valAxis);
                    }
                    else {
                        var valAxis = this.chartOptions.valueAxis();
                        valAxis.min = 0;
                        //valAxis.max = 100;
                        //valAxis.tickInterval = 10;
                        var labelObj = {
                            customizeText: function () {
                                if (this.value >= 1000) {
                                    this.value = this.value.toString().substring(0, 1) + 'K';
                                } else {
                                    this.value = this.value;
                                }
                                return this.value + ' m3';
                            }
                        };
                        valAxis.label = labelObj;
                        this.chartOptions.valueAxis(valAxis);
                    }
                }
                else {
                    if (energySelectButton == 1) {
                        var valAxis = this.chartOptions.valueAxis();
                        valAxis.min = 0;
                        //valAxis.max = 400000;
                        //valAxis.tickInterval = 50000;
                        var labelObj = {
                            customizeText: function () {
                                if (this.value >= 1000 && this.value < 10000) {
                                    this.value = this.value.toString().substring(0, 1) + 'K';
                                } else if (this.value >= 10000 && this.value < 100000) {
                                    this.value = this.value.toString().substring(0, 2) + 'K';
                                } else if (this.value >= 100000) {
                                    this.value = this.value.toString().substring(0, 3) + 'K';
                                } else {
                                    this.value = this.value;
                                }
                                return this.value + ' kWh';
                            }
                        };
                        valAxis.label = labelObj;
                        this.chartOptions.valueAxis(valAxis);
                    }
                    else if (energySelectButton == 2) {
                        var valAxis = this.chartOptions.valueAxis();
                        valAxis.min = 0;
                        //valAxis.max = 400000;
                        //valAxis.tickInterval = 40000;
                        var labelObj = {
                            customizeText: function () {
                                if (this.value >= 1000 && this.value < 10000) {
                                    this.value = this.value.toString().substring(0, 1) + 'K';
                                } else if (this.value >= 10000 && this.value < 100000) {
                                    this.value = this.value.toString().substring(0, 2) + 'K';
                                } else if (this.value >= 100000 && this.value < 1000000) {
                                    this.value = this.value.toString().substring(0, 3) + 'K';
                                } else if (this.value >= 1000000 && this.value < 10000000) {
                                    this.value = this.value.toString().substring(0, 1) + 'M';
                                } else if (this.value >= 10000000 && this.value < 100000000) {
                                    this.value = this.value.toString().substring(0, 2) + 'M';
                                } else if (this.value >= 100000000 && this.value < 1000000000) {
                                    this.value = this.value.toString().substring(0, 3) + 'M';
                                } else if (this.value >= 1000000000) {
                                    this.value = this.value.toString().substring(0, 4) + 'M';
                                } else {
                                    this.value = this.value;
                                }
                                return this.value + ' m3';
                            }
                        };
                        valAxis.label = labelObj;
                        this.chartOptions.valueAxis(valAxis);
                    }
                    else {
                        var valAxis = this.chartOptions.valueAxis();
                        valAxis.min = 0;
                        //valAxis.max = 2500;
                        //valAxis.tickInterval = 250;
                        var labelObj = {
                            customizeText: function () {
                                //if (this.value >= 1000 && this.value < 10000) {
                                //    this.value = this.value.toString().substring(0, 1) + 'K';
                                //} else if (this.value >= 10000) {
                                //    this.value = this.value.toString().substring(0, 2) + 'K';
                                //} else {
                                //    this.value = this.value;
                                //}
                                return this.value + ' m3';
                            }
                        };
                        valAxis.label = labelObj;
                        this.chartOptions.valueAxis(valAxis);
                    }
                }
                getAllData();
            }
        });
        $("#energySelect").dxSelectBox({
            dataSource: FuelID,
            displayExpr: "fuel",
            valueExpr: "id",
            value: energySelectButton,
            onValueChanged: function (data) {
                $("#LoadPanel").dxLoadPanel('instance').option('visible', true);
                var tmpDate = $("#startDatePicker").dxDateBox("instance").option('value');
                energySelectButton = data.value;
                if (yearSelectButton == "Month") {
                    argAxis.max = 32 - new Date(tmpDate.getFullYear(), tmpDate.getMonth(), 32).getDate();
                    var labelObj = {
                        customizeText: function () {
                            return this.value + '일';
                        }
                    };
                } else {
                    argAxis.max = 12;
                    var labelObj = {
                        customizeText: function () {
                            return this.value + '월';
                        }
                    };
                }
                argAxis.label = labelObj;
                $("#sideBarChart").dxChart("instance").option('argumentAxis', argAxis);
                if (yearSelectButton == "Month") {
                    if (energySelectButton == 1) {
                        var valAxis = this.chartOptions.valueAxis();
                        valAxis.min = 0;
                        //valAxis.max = 15000;
                        //valAxis.tickInterval = 1000;
                        var labelObj = {
                            customizeText: function () {
                                if (this.value >= 1000 && this.value < 10000) {
                                    this.value = this.value.toString().substring(0, 1) + 'K';
                                } else if (this.value >= 10000) {
                                    this.value = this.value.toString().substring(0, 2) + 'K';
                                } else {
                                    this.value = this.value;
                                }
                                return this.value + ' kWh';
                            }
                        };
                        valAxis.label = labelObj;
                        this.chartOptions.valueAxis(valAxis);
                    }
                    else if (energySelectButton == 2) {
                        var valAxis = this.chartOptions.valueAxis();
                        valAxis.min = 0;
                        //valAxis.max = 15000;
                        //valAxis.tickInterval = 500;
                        var labelObj = {
                            customizeText: function () {
                                if (this.value >= 1000 && this.value < 10000) {
                                    this.value = this.value.toString().substring(0, 1) + 'K';
                                } else if (this.value >= 10000) {
                                    this.value = this.value.toString().substring(0, 2) + 'K';
                                } else {
                                    this.value = this.value;
                                }
                                return this.value + ' m3';
                            }
                        };
                        valAxis.label = labelObj;
                        this.chartOptions.valueAxis(valAxis);
                    }
                    else {
                        var valAxis = this.chartOptions.valueAxis();
                        valAxis.min = 0;
                        //valAxis.max = 100;
                        //valAxis.tickInterval = 10;
                        var labelObj = {
                            customizeText: function () {
                                if (this.value >= 1000) {
                                    this.value = this.value.toString().substring(0, 1) + 'K';
                                } else {
                                    this.value = this.value;
                                }
                                return this.value + ' m3';
                            }
                        };
                        valAxis.label = labelObj;
                        this.chartOptions.valueAxis(valAxis);
                    }
                }
                else {
                    if (energySelectButton == 1) {
                        var valAxis = this.chartOptions.valueAxis();
                        valAxis.min = 0;
                        //valAxis.max = 400000;
                        //valAxis.tickInterval = 50000;
                        var labelObj = {
                            customizeText: function () {
                                if (this.value >= 1000 && this.value < 10000) {
                                    this.value = this.value.toString().substring(0, 1) + 'K';
                                } else if (this.value >= 10000 && this.value < 100000) {
                                    this.value = this.value.toString().substring(0, 2) + 'K';
                                } else if (this.value >= 100000) {
                                    this.value = this.value.toString().substring(0, 3) + 'K';
                                } else {
                                    this.value = this.value;
                                }
                                return this.value + ' kWh';
                            }
                        };
                        valAxis.label = labelObj;
                        this.chartOptions.valueAxis(valAxis);
                    }
                    else if (energySelectButton == 2) {
                        var valAxis = this.chartOptions.valueAxis();
                        valAxis.min = 0;
                        //valAxis.max = 400000;
                        //valAxis.tickInterval = 40000;
                        var labelObj = {
                            customizeText: function () {
                                if (this.value >= 1000 && this.value < 10000) {
                                    this.value = this.value.toString().substring(0, 1) + 'K';
                                } else if (this.value >= 10000 && this.value < 100000) {
                                    this.value = this.value.toString().substring(0, 2) + 'K';
                                } else if (this.value >= 100000 && this.value < 1000000) {
                                    this.value = this.value.toString().substring(0, 3) + 'K';
                                } else if (this.value >= 1000000 && this.value < 10000000) {
                                    this.value = this.value.toString().substring(0, 1) + 'M';
                                } else if (this.value >= 10000000 && this.value < 100000000) {
                                    this.value = this.value.toString().substring(0, 2) + 'M';
                                } else if (this.value >= 100000000 && this.value < 1000000000) {
                                    this.value = this.value.toString().substring(0, 3) + 'M';
                                } else if (this.value >= 1000000000) {
                                    this.value = this.value.toString().substring(0, 4) + 'M';
                                } else {
                                    this.value = this.value;
                                }
                                return this.value + ' m3';
                            }
                        };
                        valAxis.label = labelObj;
                        this.chartOptions.valueAxis(valAxis);
                    }
                    else {
                        var valAxis = this.chartOptions.valueAxis();
                        valAxis.min = 0;
                        //valAxis.max = 2500;
                        //valAxis.tickInterval = 250;
                        var labelObj = {
                            customizeText: function () {
                                //if (this.value >= 1000 && this.value < 10000) {
                                //    this.value = this.value.toString().substring(0, 1) + 'K';
                                //} else if (this.value >= 10000) {
                                //    this.value = this.value.toString().substring(0, 2) + 'K';
                                //} else {
                                //    this.value = this.value;
                                //}
                                return this.value + ' m3';
                            }
                        };
                        valAxis.label = labelObj;
                        this.chartOptions.valueAxis(valAxis);
                    }
                }
                getAllData();
            }
        });
        $("#goalBtn").dxButton({
            text: "에너지원별 목표 설정(예측 대비)",
            onClick: function () {
                visiblePopup(true);
                applyonoff = false;
            }
        });
        $("#LoadPanel").dxLoadPanel('instance').option('visible', true);
        $("#monthBtn").css("background-image", "linear-gradient(180deg,#9babc3 0%,#41618c 100%)");
        $("#yearBtn").css("background-image", "linear-gradient(rgb(56,88,130) 0%, rgb(44,68,101)100%)");
        energySelectButton = 1;
        yearSelectButton = "Month";
        var argAxis = $("#sideBarChart").dxChart("instance").option('argumentAxis');
        var tmpDate = $("#startDatePicker").dxDateBox("instance").option('value');
        if (yearSelectButton == "Month") {
            argAxis.max = 32 - new Date(tmpDate.getFullYear(), tmpDate.getMonth(), 32).getDate();
            var labelObj = {
                customizeText: function () {
                    return this.value + '일';
                }
            };
        } else {
            argAxis.max = 12;
            var labelObj = {
                customizeText: function () {
                    return this.value + '월';
                }
            };
        }
        argAxis.label = labelObj;
        $("#sideBarChart").dxChart("instance").option('argumentAxis', argAxis);
        $('#monthBtn').trigger('click');
    }

    var searchViewOptions = {

    }
    function handleSearchInSearchView() {

    }
    function getpredictiondata() {
        var applyyear = ($("#Apply_Year").dxDateBox("instance").option('value')).getFullYear();
        var power = 0, gas = 0, water = 0;
        $("#LoadPanel").dxLoadPanel('instance').option('visible', true);
        var GridSource = new DevExpress.data.DataSource({
            store: {
                type: "odata",
                url: endpointSelector + "/BemsEnergyDaily"
            },
            requireTotalCount: true,
            pageSize: 1100
        });

        GridSource.filter([
                ["SiteId", "=", SiteId], //사이트 아이디
                "and",
                ["ServiceTypeId", "=", 1],
                "and",
                ["CreatedDate", ">=", new Date(applyyear, 0, 1, 0, 0, 0)],
                "and",
                ["CreatedDate", "<=", new Date(applyyear, 11, 31, 23, 59, 59)]
        ]);
        GridSource.sort({ getter: "CreatedDate", desc: true }, { getter: "FuelTypeId", ASC: true });
        GridSource.load()
        .done(function (result) {
            if (result.length != 0) {
                var savecnt = 0;
                var YearDayCnt = ((((((new Date(applyyear + 1, 0, 1).getTime()) - (new Date(applyyear, 0, 1).getTime())) / 1000) / 60) / 60) / 24);
                for (var i = 0; i < result.length; i++) {
                    var temp_fuel = result[i].FuelTypeId;
                    var temp_date = new Date(result[i].CreatedDate);
                    var temp_UTC = Date.UTC(temp_date.getFullYear(), temp_date.getMonth(), temp_date.getDate(), 0, 0, 0);
                    var temp_date_UTC = new Date(temp_UTC);
                    if (temp_fuel == 1) {
                        power += result[i].Prediction;
                    }
                    else if (temp_fuel == 2) {
                        gas += result[i].Prediction;
                    }
                    else {
                        water += result[i].Prediction;
                    }
                }
                $("#Prediction_Power").dxTextBox("instance").option('value', parseFloat(power.toFixed(2)));
                $("#Prediction_Gas").dxTextBox("instance").option('value', parseFloat(gas.toFixed(2)));
                $("#Prediction_Water").dxTextBox("instance").option('value', parseFloat(water.toFixed(2)));
                $("#LoadPanel").dxLoadPanel('instance').option('visible', false);
            }
            else {
                $("#Prediction_Power").dxTextBox("instance").option('value', null);
                $("#Prediction_Gas").dxTextBox("instance").option('value', null);
                $("#Prediction_Water").dxTextBox("instance").option('value', null);
                $("#LoadPanel").dxLoadPanel('instance').option('visible', false);
                utils.toast.show("[BemsEnergyDaily] 예측값이 없습니다.");
            }
        })
        .fail(function (error) {
            $("#LoadPanel").dxLoadPanel('instance').option('visible', false);
            utils.toast.show(error);
        });
    }
    var viewModel = $.extend(BWA.CommonView.create(params, viewInfo, searchViewOptions, ko.observable(null), handleViewShown, null, handleSearchInSearchView),
    {
        viewShowing: handleViewShowing,
        chartOptions: {
            dataSource: dataSource,
            barWidth: 0.5,
            size: {
                height: 600
            },
            commonSeriesSettings: {
                argumentField: "dateTime",
                type: "bar"
            },
            series: [
                { valueField: "Prediction", name: "예측", color: '#007994' },
                { valueField: "Goal", name: "목표", color: '#5F8B95' }
            ],
            legend: {
                verticalAlignment: "top",
                horizontalAlignment: "center",
                position: "outside",
                border: { visible: false }
            },
            valueAxis: ko.observable({
                visible: true,
                label: {
                    customizeText: function () {
                        if (this.value >= 1000 && this.value < 10000) {
                            this.value = this.value.toString().substring(0, 1) + 'K';
                        } else if (this.value >= 10000) {
                            this.value = this.value.toString().substring(0, 2) + 'K';
                        } else {
                            this.value = this.value;
                        }
                        return this.value + ' kWh';
                    }
                },
                min: 0,
                //max: 11000,
                valueType: 'numeric',
                //tickInterval: 1000
            }),
            argumentAxis: ko.observable({
                visible: true,
                label: {
                    customizeText: function () {
                        return this.value + '일';
                    }
                },
                min: 1,
                max: 32 - new Date(TodayAdd.getFullYear, TodayAdd.getMonth, 32).getDate(),
                valueType: 'numeric',
                tickInterval: 1
            }),
            "export": {
                enabled: true
            },
            tooltip: {
                enabled: true,
                customizeTooltip: function (point) {
                    return {
                        text: numberWithCommas(point.value.toFixed(2))
                    };
                }
            }
        },
        //  2019.04.17 : 그리드 도표 작업 : 팝업창 추가
        PlanGoalPopup_ButtonClicked: DataGridPopup_ButtonClick
        //  2019.04.17 : 그리드 도표 작업 : 팝업창 추가
    });
    viewModel.popupOptions = {
        width: 600,
        height: 300,
        visible: visiblePopup,
        dragEnabled: true,
        shading: true,
        closeOnOutsideClick: true,
        shadingColor: 'transparent',
        showTitle: true,
        title: "에너지원 별 목표 설정",
        showCloseButton: true,
        onShowing: function () {
        },
        onShown: function (t, tt) {
            $("#Apply_Year").dxDateBox({
                value: TodayAdd,
                maxZoomLevel: 'decade',
                formatString: "yyyy년",
                onValueChanged: function (data) {
                    var tmpDate = data.value;
                    if (tmpDate.getFullYear() > (TodayAdd.getFullYear() + 1)) {
                        utils.toast.show("선택 연도가 내년보다 클 수 없습니다.");
                        $("#Apply_Year").dxDateBox("instance").option('value', TodayAdd);
                        return;
                    }
                    $("#Prediction_Power").dxTextBox("instance").option('value', null);
                    $("#Prediction_Gas").dxTextBox("instance").option('value', null);
                    $("#Prediction_Water").dxTextBox("instance").option('value', null);
                    $("#Apply_Power").dxTextBox("instance").option('value', null);
                    $("#Apply_Gas").dxTextBox("instance").option('value', null);
                    $("#Apply_Water").dxTextBox("instance").option('value', null);
                    $("#Goal_Power").dxTextBox("instance").option('value', null);
                    $("#Goal_Gas").dxTextBox("instance").option('value', null);
                    $("#Goal_Water").dxTextBox("instance").option('value', null);
                    getpredictiondata();
                }
            });
            $("#Goal_Power").dxTextBox({
                readOnly: true
            });
            $("#Goal_Gas").dxTextBox({
                readOnly: true
            });
            $("#Goal_Water").dxTextBox({
                readOnly: true
            });

            $("#Apply_Power").dxTextBox({

            });
            $("#Apply_Gas").dxTextBox({

            });
            $("#Apply_Water").dxTextBox({

            });

            $("#Prediction_Power").dxTextBox({

            });
            $("#Prediction_Gas").dxTextBox({

            });
            $("#Prediction_Water").dxTextBox({

            });
            $("#Apply_Btn").dxButton({
                text: "적용",
                onClick: function () {
                    var applyyear = ($("#Apply_Year").dxDateBox("instance").option('value')).getFullYear();
                    var applypower = $("#Apply_Power").dxTextBox("instance").option('value');
                    if (applypower != "") {
                        if (applypower != null)
                            applypower = parseFloat(applypower);
                        else {
                            utils.toast.show("전력 절감량 정보가 잘못되었습니다.");
                            return;
                        }
                    }
                    else {
                        utils.toast.show("전력 절감량 정보가 잘못되었습니다.");
                        return;
                    }
                    var applygas = $("#Apply_Gas").dxTextBox("instance").option('value');
                    if (applygas != "") {
                        if (applygas != null)
                            applygas = parseFloat(applygas);
                        else {
                            utils.toast.show("가스 절감량 정보가 잘못되었습니다.");
                            return;
                        }
                    }
                    else {
                        utils.toast.show("가스 절감량 정보가 잘못되었습니다.");
                        return;
                    }
                    var applywater = $("#Apply_Water").dxTextBox("instance").option('value');
                    if (applywater != "") {
                        if (applywater != null)
                            applywater = parseFloat(applywater);
                        else {
                            utils.toast.show("수도 절감량 정보가 잘못되었습니다.");
                            return;
                        }
                    }
                    else {
                        utils.toast.show("수도 절감량 정보가 잘못되었습니다.");
                        return;
                    }
                    var temp_power = 0, temp_gas = 0, temp_water = 0;
                    $("#LoadPanel").dxLoadPanel('instance').option('visible', true);
                    var GridSource = new DevExpress.data.DataSource({
                        store: {
                            type: "odata",
                            url: endpointSelector + "/BemsEnergyDaily"
                        },
                        requireTotalCount: true,
                        pageSize: 1100
                    });

                    GridSource.filter([
                            ["SiteId", "=", SiteId], //사이트 아이디
                            "and",
                            ["ServiceTypeId", "=", 1],
                            "and",
                            ["CreatedDate", ">=", new Date(applyyear, 0, 1, 0, 0, 0)],
                            "and",
                            ["CreatedDate", "<=", new Date(applyyear, 11, 31, 23, 59, 59)]
                    ]);
                    GridSource.sort({ getter: "CreatedDate", desc: true }, { getter: "FuelTypeId", ASC: true });
                    GridSource.load()
                    .done(function (result) {
                        if (result.length != 0) {
                            var savecnt = 0;
                            var YearDayCnt = ((((((new Date(applyyear + 1, 0, 1).getTime()) - (new Date(applyyear, 0, 1).getTime())) / 1000) / 60) / 60) / 24);
                            for (var i = 0; i < result.length; i++) {
                                var temp_fuel = result[i].FuelTypeId;
                                var temp_date = new Date(result[i].CreatedDate);
                                var temp_UTC = Date.UTC(temp_date.getFullYear(), temp_date.getMonth(), temp_date.getDate(), 0, 0, 0);
                                var temp_date_UTC = new Date(temp_UTC);
                                var temp_Prediction = result[i].Prediction;
                                if (temp_fuel == 1) {
                                    temp_power += parseFloat(((result[i].Prediction * (100 - applypower)) / 100).toFixed(2));
                                }
                                else if (temp_fuel == 2) {
                                    temp_gas += parseFloat(((result[i].Prediction * (100 - applygas)) / 100).toFixed(2));
                                }
                                else {
                                    temp_water += parseFloat(((result[i].Prediction * (100 - applywater)) / 100).toFixed(2));
                                }
                            }
                            $("#Goal_Power").dxTextBox("instance").option('value', parseFloat(temp_power.toFixed(2)));
                            $("#Goal_Gas").dxTextBox("instance").option('value', parseFloat(temp_gas.toFixed(2)));
                            $("#Goal_Water").dxTextBox("instance").option('value', parseFloat(temp_water.toFixed(2)));
                            applyonoff = true;
                            $("#LoadPanel").dxLoadPanel('instance').option('visible', false);
                        }
                        else {
                            applyonoff = false;
                            $("#LoadPanel").dxLoadPanel('instance').option('visible', false);
                            utils.toast.show("[BemsEnergyDaily] 예측값이 없습니다.");
                        }
                    })
                    .fail(function (error) {
                        $("#LoadPanel").dxLoadPanel('instance').option('visible', false);
                        utils.toast.show(error);
                    });
                }
            });
            $("#Save_Btn").dxButton({
                text: "저장",
                onClick: function () {
                    if (applyonoff) {
                        var applyyear = ($("#Apply_Year").dxDateBox("instance").option('value')).getFullYear();
                        var applypower = $("#Apply_Power").dxTextBox("instance").option('value');
                        if (applypower != "")
                            applypower = parseFloat(applypower);
                        var applygas = $("#Apply_Gas").dxTextBox("instance").option('value');
                        if (applygas != "")
                            applygas = parseFloat(applygas);
                        var applywater = $("#Apply_Water").dxTextBox("instance").option('value');
                        if (applywater != "")
                            applywater = parseFloat(applywater);
                        if (applypower == "" || applygas == "" || applywater == "") {
                            utils.toast.show("입력 데이터가 잘못되었습니다.");
                            return;
                        }
                        $("#LoadPanel").dxLoadPanel('instance').option('visible', true);
                        var GridSource = new DevExpress.data.DataSource({
                            store: {
                                type: "odata",
                                url: endpointSelector + "/BemsEnergyDaily"
                            },
                            requireTotalCount: true,
                            pageSize: 1100
                        });

                        GridSource.filter([
                                ["SiteId", "=", SiteId], //사이트 아이디
                                "and",
                                ["ServiceTypeId", "=", 1],
                                "and",
                                ["CreatedDate", ">=", new Date(applyyear, 0, 1, 0, 0, 0)],
                                "and",
                                ["CreatedDate", "<=", new Date(applyyear, 11, 31, 23, 59, 59)]
                        ]);
                        GridSource.sort({ getter: "CreatedDate", desc: true }, { getter: "FuelTypeId", ASC: true });
                        GridSource.load()
                        .done(function (result) {
                            if (result.length != 0) {
                                var savecnt = 0;
                                var YearDayCnt = ((((((new Date(applyyear + 1, 0, 1).getTime()) - (new Date(applyyear, 0, 1).getTime())) / 1000) / 60) / 60) / 24);
                                for (var i = 0; i < result.length; i++) {
                                    var temp_fuel = result[i].FuelTypeId;
                                    var temp_date = new Date(result[i].CreatedDate);
                                    var temp_UTC = Date.UTC(temp_date.getFullYear(), temp_date.getMonth(), temp_date.getDate(), 0, 0, 0);
                                    var temp_date_UTC = new Date(temp_UTC);
                                    var temp_Prediction = result[i].Prediction;
                                    if (temp_fuel == 1) {
                                        var temp_Goal = parseFloat(((result[i].Prediction * (100 - applypower)) / 100).toFixed(2));
                                    }
                                    else if (temp_fuel == 2) {
                                        var temp_Goal = parseFloat(((result[i].Prediction * (100 - applygas)) / 100).toFixed(2));
                                    }
                                    else {
                                        var temp_Goal = parseFloat(((result[i].Prediction * (100 - applywater)) / 100).toFixed(2));
                                    }
                                    BWA.api.post('BemsEnergyDaily/UpdatePart2', { //UpdatePart
                                        SiteId: SiteId,
                                        BuildingId: 1,
                                        ServiceTypeId: 1,
                                        FuelTypeId: temp_fuel,
                                        CreatedDate: temp_date_UTC,
                                        Prediction: temp_Prediction,
                                        Goal: temp_Goal
                                    }).done(function () {
                                        savecnt++;
                                        if (savecnt == YearDayCnt * 3) {
                                            applyonoff = false;
                                            utils.toast.show("DB에 저장이 되었습니다.");
                                            $("#LoadPanel").dxLoadPanel('instance').option('visible', false);
                                            if (yearSelectButton == "Month")
                                                $('#monthBtn').trigger('click');
                                            else
                                                $('#yearBtn').trigger('click');
                                        }
                                    }).fail(function (error) {
                                        $("#LoadPanel").dxLoadPanel('instance').option('visible', false);
                                        utils.toast.show("DB에 저장이 실패하였습니다.");
                                    });
                                }
                            }
                            else {
                                $("#LoadPanel").dxLoadPanel('instance').option('visible', false);
                                utils.toast.show("[BemsEnergyDaily] 예측값이 없습니다.");
                            }
                        })
                            .fail(function (error) {
                                $("#LoadPanel").dxLoadPanel('instance').option('visible', false);
                                utils.toast.show(error);
                            });
                    }
                    else {
                        $("#LoadPanel").dxLoadPanel('instance').option('visible', false);
                        utils.toast.show("적용버튼을 먼저 눌러주시기 바랍니다.");
                    }
                }
            });
            $("#Prediction_Power").dxTextBox("instance").option('value', null);
            $("#Prediction_Gas").dxTextBox("instance").option('value', null);
            $("#Prediction_Water").dxTextBox("instance").option('value', null);
            $("#Apply_Power").dxTextBox("instance").option('value', null);
            $("#Apply_Gas").dxTextBox("instance").option('value', null);
            $("#Apply_Water").dxTextBox("instance").option('value', null);
            $("#Goal_Power").dxTextBox("instance").option('value', null);
            $("#Goal_Gas").dxTextBox("instance").option('value', null);
            $("#Goal_Water").dxTextBox("instance").option('value', null);
            getpredictiondata();
        },
        onHidden: function () {
        }
    };

    //  2019.04.17 : 그리드 도표 작업 : 팝업창 추가 ~~~
    // 그래프 도표 팝업창 
    viewModel.PlanGoalPopupOptions = {
        width: '480px',
        height: '750px', // cyim 2017.05.30 : 테스트 결과 Devextreme 버그임. px 로 지정하면 초기 출력시 정확하게 가운데에 있지만, auto 설정시 화면아래에 위치하게 됨
        contentTemplate: "content",
        showTitle: true,
        title: "도표",
        visible: DataGridPopup_Visible,
        dragEnabled: true,
        closeOnOutsideClick: true,
        shownAction: handlePopupShown,
        animation: window.utils.popup.createAnimation()
    };

    // 주석이 너무 없음. 나중에 변경 작업을 진행하는 누군가가 시간 소비를 하지 않기 위해...남김
    // 시간 포맷은 그래프에 귀속해야 되므로 포맷은 변경하지 않는 것이 유리함
    // 전기,가스,수도 와 같이 선택적으로 변경해야 된다면 아래와 같이 캡션은 고정하지 말것

    viewModel.PlanGoalOptions = {
        dataSource: dataArrayresult,
        paging: { pageSize: 17 },
        columns: [
            { dataField: 'dateTime', width: '20%', alignment: 'center', },// dataType: 'date', format: 'yyyy-MM-dd HH:mm' },            
            { dataField: 'Prediction', width: '40%', alignment: 'center', format: 'fixedPoint', precision: 2 },
            { dataField: 'Goal', width: '40%', alignment: 'center', format: 'fixedPoint', precision: 2 }
        ],
        // 엑셀 출력
        "export": {
            enabled: true,
            fileName: '에너지원별 에너지 사용량 및 목표설정 값'
        }
    };
    // ~~~ 2019.04.17 : 그리드 도표 작업 : 팝업창 추가
    return viewModel;
};