From 81a20d2851115d306376f3a7810d6b362f36eb40 Mon Sep 17 00:00:00 2001 From: Michael <20074391@skcc.com> Date: Thu, 14 Aug 2025 17:09:19 +0900 Subject: [PATCH] Add paging and button view detail for S1 dashboard + Fix bugs 156 163 --- assets/scss/common/pagination.scss | 7 ++ .../pages/ems/ErcChrgInfo/ErcChrgInfoTab.vue | 9 +- pages/ems/base/DashboardPage.vue | 111 ++++++++++++++++- pages/ems/base/EnrgResourceCenterMngPage.vue | 113 +++++++++--------- pages/ems/effc/EnrgUseEqpmDetlMntrPage.vue | 6 +- store/modules/list.js | 1 + 6 files changed, 180 insertions(+), 67 deletions(-) diff --git a/assets/scss/common/pagination.scss b/assets/scss/common/pagination.scss index 7f41cb7..052c243 100644 --- a/assets/scss/common/pagination.scss +++ b/assets/scss/common/pagination.scss @@ -2,6 +2,13 @@ // @include theme($theme); .v-application.#{$theme}-mode { + .pagination-wrapper { + display: flex; + justify-content: center; + align-items: center; + padding: 12px 0; + margin-top: 10px; + } .ant-pagination-item, .ant-pagination-prev, diff --git a/components/pages/ems/ErcChrgInfo/ErcChrgInfoTab.vue b/components/pages/ems/ErcChrgInfo/ErcChrgInfoTab.vue index 0f74f2c..412dfac 100644 --- a/components/pages/ems/ErcChrgInfo/ErcChrgInfoTab.vue +++ b/components/pages/ems/ErcChrgInfo/ErcChrgInfoTab.vue @@ -6,7 +6,7 @@ - + + \ No newline at end of file diff --git a/pages/ems/base/DashboardPage.vue b/pages/ems/base/DashboardPage.vue index 7fef4cc..d792909 100644 --- a/pages/ems/base/DashboardPage.vue +++ b/pages/ems/base/DashboardPage.vue @@ -512,7 +512,7 @@
-
+
+
+ +
@@ -539,6 +549,7 @@ import DateUtility from "~/plugins/dateUtility"; import Utility from "~/plugins/utility"; import Grid from "~/components/common/Grid"; import Chart from "~/components/common/Chart"; +import pagination from "~/components/common/Pagination"; import AntCard from "~/components/common/card/AntCard"; @@ -579,7 +590,8 @@ export default { Chart, UnusedStatPopPage, EtcStatPopPage, - PageTitle + PageTitle, + pagination }, computed: { ...mapState({ @@ -697,6 +709,10 @@ export default { gridName: "dashBoard_grid_01", loadGrid: false, + itemsPerPageArray: [10, 20, 50], + limit: 10, + page: 1, + totalCount: 0, isGridLoading: true, }; }, @@ -735,6 +751,11 @@ export default { } this.timer = setInterval(this.search, 90000); //15분 주기마다 갱신 }, + changeGrid: async function (pageNum, limit) { + this.page = pageNum; + this.limit = limit; + await this.getGridData(); + }, async search() { await new Promise((resolve) => setTimeout(resolve, 1500)); if (this.$router.currentRoute.fullPath == this.myHome.root) { @@ -756,6 +777,41 @@ export default { // gridHeight = gridHeight*0.9 gridHeight = this.$refs.gridParent.offsetHeight - 35; } + // Define custom button + class CustomButton { + constructor(props, pageData) { + const { grid, rowKey, columnInfo } = props; + const gridData = grid.store.data.rawData; + const value = gridData[rowKey][columnInfo.name]; + const onClickCallback = columnInfo.renderer.options.onClick; + + this.disabled = columnInfo.renderer.options.disabled || false; + const elDiv = document.createElement("div"); + elDiv.innerHTML = `${value}`; + $(elDiv).addClass("tui-grid-cell-content d-flex justify-space-between"); + const el2 = document.createElement("button"); + $(el2).addClass("edit-btn blue--text"); + el2.innerText = "보기"; + elDiv.appendChild(el2); + this.el = elDiv; + if (!this.disabled && typeof onClickCallback === "function") { + // click 이벤트 + this.el.addEventListener("click", function (event) { + onClickCallback(rowKey); + }); + } + } + getElement() { + return this.el; + } + getValue() { + // return this.el.value; + } + mounted() { + // this.el.focus(); + } + } + const myOptions = { // scrollX: false, setScroll: true, @@ -840,7 +896,42 @@ export default { { header: "주의", name: "careStndVal", align: "right", width: 40 }, { header: "경고", name: "warnStndVal", align: "right", width: 40 }, { header: "가이드", name: "totVal", align: "right", width: 40 }, - { header: "알람 내용", name: "alrmMsg", align: "left", resizable: false }, + { header: "알람 내용", name: "alrmMsg", align: "left", resizable: false, + // Render custom button to switch page instead of double click on row + renderer: { + type: CustomButton, + options: { + value: "보기", + onClick: (rowKey) => { + var gridInstance = this.$refs[this.gridName].gridInstance; + var eventRowData = gridInstance.invoke("getRow", rowKey); + var data = { + cmCycle: "CYC_DAY", + fromDt: + eventRowData.totDttm != undefined + ? eventRowData.totDttm + : Utility.setFormatDate(new Date(), "YYYY-MM-DD HH:mm"), + fabId: eventRowData.fabId, + eqpmKindId: eventRowData.eqpmKindId, + eqpmGrpId: eventRowData.eqpmGrpId, + eqpmId: eventRowData.eqpmId, + }; + var key = "tick_" + Math.random(); + this.$router.push({ + name: "ems-effc-EnrgUseEqpmDetlMntrPage", + query: { + prgmId: "PRG0082", + // tick:key + }, + params: { + ...data, + key: key, + }, + }); + }, + }, + }, + }, { header: "설비종류", name: "eqpmKindId", align: "left", hidden: true }, { header: "설비종류", name: "eqpmKindNm", align: "left", hidden: true }, ]; @@ -855,11 +946,21 @@ export default { }, async getGridData() { this.loadGrid = false; - // console + // Get total records of grid + const totalRes = await this.postApiReturn({ + apiKey: "selectIssueGdIdxDataPageTotal", + resKey: "issueGdIdxDataPageTotal", + }); + this.totalCount = totalRes[0].totalcount; + const res = await this.postApiReturn({ apiKey: "selectIssueGdIdxData", resKey: "issueGdIdxData", - sendParam: {}, + sendParam: { + limit: this.limit, + page: this.page, + offset: (this.page - 1) * this.limit, + }, }); // let fakeData = [ // { diff --git a/pages/ems/base/EnrgResourceCenterMngPage.vue b/pages/ems/base/EnrgResourceCenterMngPage.vue index 04e31f1..dbe47c9 100644 --- a/pages/ems/base/EnrgResourceCenterMngPage.vue +++ b/pages/ems/base/EnrgResourceCenterMngPage.vue @@ -84,67 +84,64 @@ - - - - - 에너지원 정보 - - -
-
- -
+ + + + + 에너지원 정보 + + +
+
+
+
- - - 에너지원 상세 -
- - - {{ item.name }} - - - - - - - - -
+ + + + 에너지원 상세 +
+ + + {{ item.name }} + + + + + + + + +
diff --git a/pages/ems/effc/EnrgUseEqpmDetlMntrPage.vue b/pages/ems/effc/EnrgUseEqpmDetlMntrPage.vue index a19a023..2b64c83 100644 --- a/pages/ems/effc/EnrgUseEqpmDetlMntrPage.vue +++ b/pages/ems/effc/EnrgUseEqpmDetlMntrPage.vue @@ -152,16 +152,16 @@
- +
- + 가이드 알람정보