123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308 |
- Partials.Consume = function (params) {
- var tabs = [ { text: "월" }, { text: "년" } ];
- var selectedTab = ko.observable(0);
- var dataViewPopup = ko.observable(false);
- var dateBoxValue = ko.observable(new Date());
- var initialized = false;
- var dataSource;
- var chartDataSource = ko.observable();
- function createDaily() {
- return new DevExpress.data.DataSource({
- store: Partials.odata.ConsumeDaily,
- select: ['Year', 'Month', 'Day', 'Cooler', 'Boiler'],
- paginate: false,
- map: function (item) {
- item.Total = item.Cooler + item.Boiler;
- return item;
- },
- filter: [
- ["SiteId", "=", 1],
- ["BuildingId", "=", 1],
- ["Year", "=", dateBoxValue().getFullYear()],
- ["Month", "=", dateBoxValue().getMonth() + 1],
- ]
- });
- }
- function createMonthly() {
- return new DevExpress.data.DataSource({
- store: Partials.odata.ConsumeMonthly,
- select: ['Year', 'Month', 'Cooler', 'Boiler'],
- paginate: false,
- map: function (item) {
- item.Total = item.Cooler + item.Boiler;
- return item;
- },
- filter: [
- ["SiteId", "=", 1],
- ["BuildingId", "=", 1],
- ["Year", "=", dateBoxValue().getFullYear()]
- ]
- });
- }
- function load(result) {
- chartDataSource (result);
- viewModel.summary.load(result);
- $("#graphContainer").dxChart("instance").option({
- dataSource: chartDataSource,
- commonSeriesSettings: {
- argumentField: ["Day", "Month"][selectedTab()],
- type: "bar",
- hoverMode: "allArgumentPoints",
- selectionMode: "allArgumentPoints",
- },
- argumentAxis: {
- label: {
- customizeText: function() {
- return this.value + ['일', '월'][selectedTab()];
- }
- },
- type: 'discreate',
- axisDivisionFactor: [31, 100][selectedTab()]
- },
- valueAxis: {
- label: {
- format: 'fixedPoint thousands',
- customizeText: function () {
- return this.valueText + ' toe';
- }
- }
- },
- series: [
- { name: "냉방", color: "#70cbed", valueField: "Cooler", },
- { name: "난방", color: "#ff7c7c", valueField: "Boiler" },
- { name: "전체", type: "line", color: "#9da5ad", valueField: "Total" },
- ],
- legend: {
- verticalAlignment: "top",
- horizontalAlignment: "right",
- position: "inside",
- border: { visible: true }
- },
- onPointClick: function (e) {
- e.target.select();
- },
- tooltip: {
- enabled: true,
- location: "edge",
- format: 'fixedPoint',
- customizeText: function () {
- return this.seriesName + " : " + this.valueText;
- }
- }
- });
- }
- dateBoxValue.subscribe(function (e) {
- switch (selectedTab()) {
- case 0:
- dataSource = createDaily();
- break;
- case 1:
- dataSource = createMonthly();
- break;
- }
- handleViewShown();
- });
- selectedTab.subscribe(function (e) {
- switch (selectedTab()) {
- case 0:
- dataSource = createDaily();
- $("#dateBox").dxDateBox({ formatString: "yyyy년 MM월", maxZoomLevel: 'year' });
- viewModel.summary.previous.name('전월 소비량');
- break;
- case 1:
- dataSource = createMonthly();
- $("#dateBox").dxDateBox({ formatString: "yyyy년", maxZoomLevel: 'decade' });
- viewModel.summary.previous.name('전년 소비량');
- break;
- }
- handleViewShown();
- });
- var handleViewShown = function () {
- if (initialized == false) {
- switch (selectedTab()) {
- case 0:
- dataSource = createDaily();
- break;
- case 1:
- dataSource = createMonthly();
- break;
- }
- initialized = true;
- }
- dataSource.load().done( function (result)
- {
- load(result);
- });
- };
- var dataViewPopup = {
- width: 800,
- height: 'auto',
- showTitle: true,
- title: ko.computed({
- read: function () {
- switch (selectedTab()) {
- case 0: return moment(dateBoxValue()).format("YYYY년 MM월");
- case 1: return moment(dateBoxValue()).format("YYYY년");
- }
- }
- }),
- visible: ko.observable(false),
- dragEnabled: false,
- closeOnOutsideClick: false,
- show: function () {
- dataViewPopup.visible(true);
- },
- shownAction: function () {
- var dataGrid = $("#dataGrid").dxDataGrid("instance");
- switch (selectedTab()) {
- case 0:
- dataGrid.option({
- "export": {
- enabled: true,
- fileName: "ConsumeDaily"
- },
- columns: [
- { dataField: 'Day', caption: '일', width: '10%', },
- { dataField: 'Cooler', caption: '냉방', format: 'fixedPoint' },
- { dataField: 'Boiler', caption: '난방', format: 'fixedPoint' },
- { dataField: 'Total', caption: '전체', format: 'fixedPoint' }]
- });
- break;
- case 1:
- dataGrid.option({
- "export": {
- enabled: true,
- fileName: "ConsumeMonthly"
- },
- columns: [
- { dataField: 'Month', caption: '월', width: '10%', },
- { dataField: 'Cooler', caption: '냉방', format: 'fixedPoint' },
- { dataField: 'Boiler', caption: '난방', format: 'fixedPoint' },
- { dataField: 'Total', caption: '전체', format: 'fixedPoint' }]
- });
- break;
- }
- }
- };
- var viewModel = {
- dateBoxValue: dateBoxValue,
- dataSource: chartDataSource,
- tabs: tabs,
- selectedTab: selectedTab,
- dataViewPopup: dataViewPopup,
- viewShown: handleViewShown,
- summary: {
- load: function (result) {
- viewModel.summary.pred.max({ title: '', value: 0 });
- viewModel.summary.pred.min({ title: '', value: 0 });
- viewModel.summary.previous.max({ title: '', value: 0 });
- viewModel.summary.previous.min({ title: '', value: 0 });
- switch (selectedTab()) {
- case 0:
- this.pred.max(result.reduce(function (p, c) { return p.value > c.Total ? p : { title: c.Day + '일', value: c.Total } }));
- this.pred.min(result.reduce(function (p, c) { return p.value <= c.Total ? p : { title: c.Day + '일', value: c.Total } }));
- var date = new Date(dateBoxValue());
- date.setMonth(date.getMonth() - 1);
- previousDataSource = new DevExpress.data.DataSource({
- store: Partials.odata.ConsumeDaily,
- select: ['Year', 'Month', 'Day', 'Cooler', 'Boiler'],
- paginate: false,
- map: function (item) {
- item.Consume = item.Cooler + item.Boiler;
- return item;
- },
- filter: [
- ["SiteId", "=", 1],
- ["BuildingId", "=", 1],
- ["Year", "=", date.getFullYear()],
- ["Month", "=", date.getMonth() + 1],
- ]
- });
- previousDataSource.load().done(function (data) {
- viewModel.summary.previous.max(data.reduce(function (p, c) { return p.value > c.Consume ? p : { title: c.Day + '일', value: c.Consume } }));
- viewModel.summary.previous.min(data.reduce(function (p, c) { return p.value <= c.Consume ? p : { title: c.Day + '일', value: c.Consume } }));
- });
- break;
- case 1:
- this.pred.max(result.reduce(function (p, c) { return p.value > c.Total ? p : { title: c.Month + '월', value: c.Total } }));
- this.pred.min(result.reduce(function (p, c) { return p.value <= c.Total ? p : { title: c.Month + '월', value: c.Total } }));
- var date = new Date(dateBoxValue());
- date.setFullYear(date.getFullYear() - 1);
- previousDataSource = new DevExpress.data.DataSource({
- store: Partials.odata.ConsumeMonthly,
- select: ['Year', 'Month', 'Cooler', 'Boiler'],
- paginate: false,
- map: function (item) {
- item.Consume = item.Cooler + item.Boiler;
- return item;
- },
- filter: [
- ["SiteId", "=", 1],
- ["BuildingId", "=", 1],
- ["Year", "=", date.getFullYear()]
- ]
- });
- previousDataSource.load().done(function (data) {
- viewModel.summary.previous.max(data.reduce(function (p, c) { return p.value > c.Consume ? p : { title: c.Month + '월', value: c.Consume } }));
- viewModel.summary.previous.min(data.reduce(function (p, c) { return p.value <= c.Consume ? p : { title: c.Month + '월', value: c.Consume } }));
- });
- break;
- }
- },
- previous: {
- name: ko.observable('전월 소비량'),
- min: ko.observable({ title: '', value: 0 }),
- max: ko.observable({ title: '', value: 0 }),
- },
- pred: {
- min: ko.observable({ title: '', value: 0 }),
- max: ko.observable({ title: '', value: 0 }),
- }
- },
- onPrevious: function (e) {
- var date = new Date(dateBoxValue());
- (selectedTab() == 0) ? date.setMonth(date.getMonth() - 1) : date.setFullYear(date.getFullYear() - 1)
- dateBoxValue(date);
- },
- onNext: function (e) {
- var date = new Date(dateBoxValue());
- (selectedTab() == 0) ? date.setMonth(date.getMonth() + 1) : date.setFullYear(date.getFullYear() + 1)
- dateBoxValue(date);
- }
- };
- return viewModel;
- };
|