BemsWebApplication.PriceUsage = function (params, viewInfo) { var energySelectButton = "power"; var priceDataSource; var init = false; var metaResultArray; var metaResultCnt = 0; var SiteID = BWA.UserInfo.SiteId(); 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; } //탭 표시 요금제 Array 데이터 초기화 var tabsData = [ { id: "0", text: "test1" }, { id: "1", text: "test2" }, { id: "2", text: "test3" } ]; var compareDataSource = [{ dateTime: "1", paymentUsage: 0, measureUsage: 0 }, { dateTime: "2", paymentUsage: 0, measureUsage: 0 }, { dateTime: "3", paymentUsage: 0, measureUsage: 0 }, { dateTime: "4", paymentUsage: 0, measureUsage: 0 }, { dateTime: "5", paymentUsage: 0, measureUsage: 0 }, { dateTime: "6", paymentUsage: 0, measureUsage: 0 }, { dateTime: "7", paymentUsage: 0, measureUsage: 0 }, { dateTime: "8", paymentUsage: 0, measureUsage: 0 }, { dateTime: "9", paymentUsage: 0, measureUsage: 0 }, { dateTime: "10", paymentUsage: 0, measureUsage: 0 }, { dateTime: "11", paymentUsage: 0, measureUsage: 0 }, { dateTime: "12", paymentUsage: 0, measureUsage: 0 }]; function getcompareData(SiteId, FuelTypeId, PayDate) { for (var i = 0; i < compareDataSource.length; i++) { compareDataSource[i].dateTime = i + 1; compareDataSource[i].paymentUsage = 0; compareDataSource[i].measureUsage = 0; } $("#compareChart").dxChart("instance").option('dataSource', compareDataSource); var opt; if (FuelTypeId == 1) { opt = [ { valueField: "paymentUsage", name: "고지서 사용량", color: '#007994' }, { valueField: "measureUsage", name: "실 사용량", color: '#72A7B3' } ]; } else if (FuelTypeId == 2) { opt = [ { valueField: "paymentUsage", name: "고지서 사용량", color: '#03C700' }, { valueField: "measureUsage", name: "실 사용량", color: '#90E68E' } ]; } else if (FuelTypeId == 3) { opt = [ { valueField: "paymentUsage", name: "고지서 사용량", color: '#FC6D00' }, { valueField: "measureUsage", name: "실 사용량", color: '#FAE0D4' } ]; } else { utils.toast.show("에너지원이 선택되지 않았습니다."); } $("#compareChart").dxChart("instance").option('series', opt); var dataSource = new DevExpress.data.DataSource({ store: { type: "odata", url: endpointSelector + "/BemsSitePriceHistory" }, map: function (itemData) { return { SiteId: itemData.siteId, FuelTypeId: itemData.fuelTypeId, PriceTypeId: itemData.PriceTypeId, PayDate: itemData.PayDate, PayCharge: itemData.PayCharge, PriceValue: itemData.PriceValue } }, requireTotalCount: true, pageSize: 10 }); if (FuelTypeId == 1) { dataSource.filter([ ["SiteId", "=", SiteId], "and", ["FuelTypeId", "=", FuelTypeId], "and", ["PayDate", ">=", PayDate.toString() + "01"], "and", ["PayDate", "<=", PayDate.toString() + "12"], "and", ["PriceTypeId", "=", parseInt($("#tabOptions").dxTabs("instance").option('selectedItem').id)], "and", [["PriceCode", "=", "P003"] ] ]); } else if (FuelTypeId == 2) { dataSource.filter([ ["SiteId", "=", SiteId], "and", ["FuelTypeId", "=", FuelTypeId], "and", ["PayDate", ">=", PayDate.toString() + "01"], "and", ["PayDate", "<=", PayDate.toString() + "12"], "and", ["PriceTypeId", "=", parseInt($("#tabOptions").dxTabs("instance").option('selectedItem').id)], "and", ["PriceCode", "=", "G001"] ]); } else if (FuelTypeId == 3) { dataSource.filter([ ["SiteId", "=", SiteId], "and", ["FuelTypeId", "=", FuelTypeId], "and", ["PayDate", ">=", PayDate.toString() + "01"], "and", ["PayDate", "<=", PayDate.toString() + "12"], "and", ["PriceTypeId", "=", parseInt($("#tabOptions").dxTabs("instance").option('selectedItem').id)], "and", ["PriceCode", "=", "W007"] ]); } else { utils.toast.show("선택된 에너지원이 없습니다."); } dataSource.group("PayDate"); dataSource.sort({ getter: "PayDate", asc: true }); dataSource.load() .done(function (result) { for (var i = 0; i < result.length; i++) { var month; if (result[i].items[0].PayDate.substr(4, 1) == "0") { month = result[i].items[0].PayDate.substr(5, 1); } else { month = result[i].items[0].PayDate.substr(4, 2); } if (FuelTypeId == 1) { if (result[i].items[0].PriceValue == "") result[i].items[0].PriceValue = "0"; compareDataSource[month - 1].paymentUsage = parseFloat(result[i].items[0].PriceValue.replace(/,/gi, "")); } else { compareDataSource[month - 1].paymentUsage = parseFloat(result[i].items[0].PriceValue.replace(/,/gi, "")); } } var priceTypeId = parseInt($("#tabOptions").dxTabs("instance").option('selectedItem').id); var dataSourceFormula = new DevExpress.data.DataSource({ store: { type: "odata", url: endpointSelector + "/BemsPriceFormula" }, requireTotalCount: true, pageSize: 100 }); dataSourceFormula.filter([ ["SiteId", "=", SiteId], "and", ["PriceTypeId", "=", priceTypeId], //전력 시설ID "and", ["UseYN", "=", "Y"] ]); dataSourceFormula.load() .done(function (resultFormula) { var dataSource2 = new DevExpress.data.DataSource({ store: { type: "odata", url: endpointSelector + "/BemsFormulaParameter" }, requireTotalCount: true, pageSize: 100 }); dataSource2.filter([ ["SiteId", "=", SiteId], "and", ["FacilityCode", "=", resultFormula[0].FacilityCode], //전력 시설ID "and", ["FormulaId", "=", resultFormula[0].FormulaId], "and", ["FacilityTypeId", "=", resultFormula[0].FacilityTypeId] ]); dataSource2.sort({ getter: "ParameterId", asc: true }); dataSource2.load() .done(function (result2) { metaResultArray = new Array(result2.length); for (var t in result2) { metaResultArray[t] = new Array(5); } for (var i in result2) { metaResultArray[i][0] = result2[i].SiteId; metaResultArray[i][1] = result2[i].FacilityTypeId; metaResultArray[i][2] = result2[i].FormulaId; metaResultArray[i][3] = result2[i].ParameterFacilityCode; metaResultArray[i][4] = result2[i].ParameterPropertyId; } getMeasureUsage(SiteId, FuelTypeId, metaResultArray[metaResultCnt], metaResultArray.length, PayDate); }) .fail(function (error) { utils.toast.show(error); }); }) .fail(function (error) { utils.toast.show(error); }); }) .fail(function (error) { utils.toast.show(error); }); } function getMeasureUsage(SiteId, FuelTypeId, dataArrayElement, recursiveCnt, payDate) { var tmpDate = $("#startDatePicker").dxDateBox("instance").option('value'); var dataSourceHistory = new DevExpress.data.DataSource({ store: { type: "odata", url: endpointSelector + "/BemsSitePriceHistory" }, requireTotalCount: true, pageSize: 1000 }); if (FuelTypeId == 1) { dataSourceHistory.filter([ ["SiteId", "=", SiteId], "and", ["FuelTypeId", "=", FuelTypeId], "and", ["PayDate", ">=", payDate.toString() + "01"], "and", ["PayDate", "<=", payDate.toString() + "12"], "and", ["PriceTypeId", "=", parseInt($("#tabOptions").dxTabs("instance").option('selectedItem').id)], "and", [["PriceCode", "=", "P003"] ] ]); } else if (FuelTypeId == 2) { dataSourceHistory.filter([ ["SiteId", "=", SiteId], "and", ["FuelTypeId", "=", FuelTypeId], "and", ["PayDate", ">=", payDate.toString() + "01"], "and", ["PayDate", "<=", payDate.toString() + "12"], "and", ["PriceTypeId", "=", parseInt($("#tabOptions").dxTabs("instance").option('selectedItem').id)], "and", ["PriceCode", "=", "G001"] ]); } else if (FuelTypeId == 3) { dataSourceHistory.filter([ ["SiteId", "=", SiteId], "and", ["FuelTypeId", "=", FuelTypeId], "and", ["PayDate", ">=", payDate.toString() + "01"], "and", ["PayDate", "<=", payDate.toString() + "12"], "and", ["PriceTypeId", "=", parseInt($("#tabOptions").dxTabs("instance").option('selectedItem').id)], "and", ["PriceCode", "=", "W007"] ]); } else { utils.toast.show("선택된 에너지원이 없습니다."); } dataSourceHistory.group("PayDate"); dataSourceHistory.sort({ getter: "PayDate", asc: true }); dataSourceHistory.load() .done(function (resultHistory) { if (resultHistory.length == 0) { utils.toast.show("히스토리 데이터가 없습니다."); } var dataSource = new DevExpress.data.DataSource({ store: { type: "odata", url: endpointSelector + "/BemsMonitoringPointHistoryDaily" }, requireTotalCount: true, pageSize: 1000 }); dataSource.filter([ ["SiteId", "=", dataArrayElement[0]], "and", ["FacilityCode", "=", dataArrayElement[3]], "and", ["PropertyId", "=", dataArrayElement[4]], "and", ["CreatedDateTime", ">=", new Date(payDate.toString(), 0, 1, 0, 0, 0)], "and", ["CreatedDateTime", "<=", new Date(payDate.toString(), 11, 31, 23, 59, 59)] ]); dataSource.sort({ getter: "CreatedDateTime", asc: true }); dataSource.load() .done(function (result) { for (var i in result) { compareDataSource[(result[i].CreatedDateTime.getMonth()).toString()].measureUsage = compareDataSource[(result[i].CreatedDateTime.getMonth()).toString()].measureUsage + parseFloat(result[i].DailyValue.toString()); } recursiveCnt--; if (recursiveCnt >= 1) { metaResultCnt++; getMeasureUsage(SiteId, FuelTypeId, metaResultArray[metaResultCnt], recursiveCnt, payDate); } else { $("#compareChart").dxChart("instance").option('dataSource', compareDataSource); var maxValue = 0; for (var i = 0; i < compareDataSource.length; i++) { if (compareDataSource[i].paymentUsage > maxValue) { maxValue = compareDataSource[i].paymentUsage; } else if (compareDataSource[i].measureUsage > maxValue) { maxValue = compareDataSource[i].measureUsage; } else { maxValue = maxValue; } } var valAxis = $("#compareChart").dxChart("instance").option('valueAxis'); valAxis.max = parseInt(maxValue * 1.10); var tmp = valAxis.max.toString().length - 2; var zero = ""; for (var i = 0; i < tmp; i++) { zero = zero + "0"; } valAxis.max = parseInt(valAxis.max.toString().substr(0, 2) + zero); valAxis.tickInterval = valAxis.max / 10; var label; if (FuelTypeId == 1) { label = { customizeText: function () { return this.value + 'kWh'; } } } else { label = { customizeText: function () { return this.value + 'm3'; } } } valAxis.label = label; $("#compareChart").dxChart("instance").option('valueAxis', valAxis); metaResultCnt = 0; } return true; }) .fail(function (error) { utils.toast.show(error); }); }).fail(function (error) { utils.toast.show(error); }); } function setTabData(SiteID, FuelTypeId) { var dataSource = new DevExpress.data.DataSource({ store: new DevExpress.data.ODataStore({ url: endpointSelector + "/BemsSitePrice" }), expand: ['BemsPriceType'], requireTotalCount: true, pageSize: 1000 }); dataSource.filter([ ["SiteID", "=", SiteID], "and", ["FuelTypeId", "=", FuelTypeId] ]); dataSource.sort({ getter: "FuelTypeId", asc: true }); dataSource.load() .done(function (result) { var tmp = []; tmp.push({ id: result[0].BemsPriceType.PriceTypeId, text: result[0].BemsPriceType.PriceTypeIdDesc }); for (var i = 0; i < result.length; i++) { var resultCnt; for (var j = 0; j < tmp.length; j++) { if (tmp[j].text.indexOf(result[i].BemsPriceType.PriceTypeIdDesc) != -1) { resultCnt++; } } if (resultCnt == 0) tmp.push({ id: result[i].BemsPriceType.PriceTypeId, text: result[i].BemsPriceType.PriceTypeIdDesc }); resultCnt = 0; } tabsData = tmp; $("#tabOptions").dxTabs("instance").option('dataSource', tabsData); if (!init) { $("#tabOptions").dxTabs("instance").option('selectedIndex', 0); var tmpDate = $("#startDatePicker").dxDateBox("instance").option('value'); getcompareData(SiteID, FuelTypeId, tmpDate.getFullYear()); init = true; } else { $("#tabOptions").dxTabs("instance").option('selectedIndex', 0); } }); } function numberWithCommas(x) { return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); } function handleViewShown() { setTabData(SiteID, 1); //초기화 전력 P038 청구요금 $("#powerBtn").css("background-image", "linear-gradient(180deg,#9babc3 0%,#41618c 100%)"); $("#gasBtn").css("background-image", "linear-gradient(rgb(56,88,130) 0%, rgb(44,68,101)100%)"); $("#waterBtn").css("background-image", "linear-gradient(rgb(56,88,130) 0%, rgb(44,68,101)100%)"); } var searchViewOptions = { }; function handleSearchInSearchView() { } var now = new Date(); var beforeNow = now; tmpYear = now.getFullYear(); beforeNow.setFullYear(tmpYear - 1); now = new Date(); var selectEnergy = "전력"; var viewModel = $.extend(BWA.CommonView.create(params, viewInfo, searchViewOptions, ko.observable(null), handleViewShown, null, handleSearchInSearchView), { startDatePicker: { pickerType: "calendar", value: now, formatString: "yyyy년", maxZoomLevel: "decade", width: "9%", onValueChanged: function () { var tmpDate = $("#startDatePicker").dxDateBox("instance").option('value'); if (energySelectButton == "power") { init = false; setTabData(SiteID, 1); } else if (energySelectButton == "gas") { init = false; setTabData(SiteID, 2); } else if (energySelectButton == "water") { init = false; setTabData(SiteID, 3); } else { utils.toast.show("에너지원이 선택되지 않았습니다."); } } }, compareChart: { dataSource: compareDataSource, barWidth: 0.5, commonSeriesSettings: { argumentField: "dateTime", type: "bar" }, series: ko.observable([ { valueField: "paymentUsage", name: '고지서 사용량', color: '#5F8B95' }, { valueField: "measureUsage", name: '실 사용량', color: '#007994' } ]), legend: { verticalAlignment: "top", horizontalAlignment: "center", position: "outside", border: { visible: false } }, valueAxis: ko.observable({ visible: true, label: { customizeText: function () { return numberWithCommas(this.value).toString() + 'kWh'; } }, min: 0, max: 100000000, valueType: 'numeric', tickInterval: 5000000 }), argumentAxis: ko.observable({ visible: true, label: { customizeText: function () { return this.value + '월'; } }, min: 1, max: 12, valueType: 'numeric', tickInterval: 1 }), "export": { enabled: true }, tooltip: { enabled: true, //format: 'largeNumber', customizeTooltip: function (point) { return { text: numberWithCommas(point.value.toFixed(2)) }; } } }, powerButtonClicked: function () { energySelectButton = "power"; $("#powerBtn").css("background-image", "linear-gradient(180deg,#9babc3 0%,#41618c 100%)"); $("#gasBtn").css("background-image", "linear-gradient(rgb(56,88,130) 0%, rgb(44,68,101)100%)"); $("#waterBtn").css("background-image", "linear-gradient(rgb(56,88,130) 0%, rgb(44,68,101)100%)"); selectEnergy = "전력"; init = false; setTabData(SiteID, 1); }, gasButtonClicked: function () { energySelectButton = "gas"; $("#gasBtn").css("background-image", "linear-gradient(180deg,#9babc3 0%,#41618c 100%)"); $("#powerBtn").css("background-image", "linear-gradient(rgb(56,88,130) 0%, rgb(44,68,101)100%)"); $("#waterBtn").css("background-image", "linear-gradient(rgb(56,88,130) 0%, rgb(44,68,101)100%)"); selectEnergy = "가스"; init = false; setTabData(SiteID, 2); }, waterButtonClicked: function () { energySelectButton = "water"; $("#waterBtn").css("background-image", "linear-gradient(180deg,#9babc3 0%,#41618c 100%)"); $("#gasBtn").css("background-image", "linear-gradient(rgb(56,88,130) 0%, rgb(44,68,101)100%)"); $("#powerBtn").css("background-image", "linear-gradient(rgb(56,88,130) 0%, rgb(44,68,101)100%)"); selectEnergy = "수도"; init = false; setTabData(SiteID, 3); }, tabOptions: { dataSource: tabsData, height: 20, selectedIndex: 0, onSelectionChanged: function (e) { if (init) { var FuelTypeId; if (selectEnergy == "전력") { FuelTypeId = 1; } else if (selectEnergy == "가스") { FuelTypeId = 2; } else if (selectEnergy == "수도") { FuelTypeId = 3; } else { utils.toast.show("에너지원이 선택되지 않았습니다."); } var tmpDate = $("#startDatePicker").dxDateBox("instance").option('value'); var month = tmpDate.getMonth() + 1; if (month < 10) { month = "0" + month.toString(); } getcompareData(SiteID, FuelTypeId, tmpDate.getFullYear()); } } } }); return viewModel; };