From d405e5bf6d2be17d669eb6954e7dfa43d141636d Mon Sep 17 00:00:00 2001
From: Michael <20074391@skcc.com>
Date: Tue, 19 Aug 2025 17:27:35 +0900
Subject: [PATCH] Update paging disable style + Fix bug line chart + Fix paging
 function hide grid

---
 assets/scss/common/pagination.scss | 14 +++++++++++++-
 assets/scss/var.scss               |  2 ++
 pages/ems/base/DashboardPage.vue   | 21 +++++++++++++--------
 pages/ems/effc/EqpmIndMntrPage.vue | 12 +++++++-----
 4 files changed, 35 insertions(+), 14 deletions(-)

diff --git a/assets/scss/common/pagination.scss b/assets/scss/common/pagination.scss
index 052c243..423503a 100644
--- a/assets/scss/common/pagination.scss
+++ b/assets/scss/common/pagination.scss
@@ -10,13 +10,25 @@
       margin-top: 10px;
     }
 
+    .ant-pagination-disabled {
+      color: map-deep-get($config, #{$theme}, "paging-disable") !important;;
+      cursor: not-allowed !important;
+      pointer-events: none; /* disables hover and click */
+      background-color: transparent;
+    }
+
+    .ant-pagination-disabled:hover {
+      color: map-deep-get($config, #{$theme}, "paging-disable") !important;;
+      background-color: transparent !important;
+    }
+
     .ant-pagination-item,
     .ant-pagination-prev,
     .ant-pagination-next {
       // border: none !important;
       // box-shadow: none !important;
       background-color: map-deep-get($config, #{$theme}, "paging-background") !important;
-      color: map-deep-get($config, #{$theme}, "paging-text") !important;
+      color: map-deep-get($config, #{$theme}, "paging-text");
       border: none;
 
       .ant-pagination-item-link {
diff --git a/assets/scss/var.scss b/assets/scss/var.scss
index 0de4a20..26df9e4 100644
--- a/assets/scss/var.scss
+++ b/assets/scss/var.scss
@@ -184,6 +184,7 @@ $config: (
     ant-btn-popup-border: #424242,
     paging-background: #212224,
     paging-text: #FFFFFFD9,
+    paging-disable: #FFFFFF40,
     icon-datepicker-color: #FFFFFF73,
     ant-checkbox-disabled-bg: #FFFFFF14,
     ant-checkbox-disabled-border: #424242,
@@ -334,6 +335,7 @@ $config: (
     ant-btn-popup-border: #D9D9D9,
     paging-background: #FFFFFF,
     paging-text: #000000E0,
+    paging-disable: #00000040,
     icon-datepicker-color: #00000073,
     ant-checkbox-disabled-bg: #0000000A,
     ant-checkbox-disabled-border: #D9D9D9,
diff --git a/pages/ems/base/DashboardPage.vue b/pages/ems/base/DashboardPage.vue
index f3425cc..50956fd 100644
--- a/pages/ems/base/DashboardPage.vue
+++ b/pages/ems/base/DashboardPage.vue
@@ -635,15 +635,15 @@ export default {
       this.setChart04Data(chart04Dat);
 
       let chartOption2 = getLineChartOption({
-            xAxisData: this.$store.state.pageData[myPrgmId][this.chart_02].xAxisData,
-            seriesData: this.$store.state.pageData[myPrgmId][this.chart_02].seriesData,
+            xAxisData: this.$store.state.pageData[myPrgmId][this.chart_02].xAxis.data,
+            seriesData: this.$store.state.pageData[myPrgmId][this.chart_02].series,
             isDarkMode: this.isDarkMode,
           });
       this.$store.state.pageData[myPrgmId][this.chart_02] = chartOption2
 
       let chartOption5 = getLineChartOption({
-            xAxisData: this.$store.state.pageData[myPrgmId][this.chart_05].xAxisData,
-            seriesData: this.$store.state.pageData[myPrgmId][this.chart_05].seriesData,
+            xAxisData: this.$store.state.pageData[myPrgmId][this.chart_05].xAxis.data,
+            seriesData: this.$store.state.pageData[myPrgmId][this.chart_05].series,
             isDarkMode: this.isDarkMode,
           });
       this.$store.state.pageData[myPrgmId][this.chart_05] = chartOption5
@@ -754,7 +754,7 @@ export default {
     changeGrid: async function (pageNum, limit) {
       this.page = pageNum;
       this.limit = limit;
-      await this.getGridData();
+      await this.getGridData(true);
     },
     async search() {
       await new Promise((resolve) => setTimeout(resolve, 1500));
@@ -766,7 +766,7 @@ export default {
         await this.getTodayEfficiencyStatus();
         await this.getTodayNgTopTen();
         await this.getCompareEqpmTGdChart();
-        await this.getGridData();
+        await this.getGridData(false);
       }
     },
     async gridInit() {
@@ -944,8 +944,13 @@ export default {
       this.loadGrid = true;
       // this.getGridData();
     },
-    async getGridData() {
-      this.loadGrid = false;
+    async getGridData(isPaging) {
+
+      // Do not hide grid when trigger paging function
+      if (!isPaging) {
+          this.loadGrid = false; 
+      }
+
       // Get total records of grid
       const totalRes =  await this.postApiReturn({
         apiKey: "selectIssueGdIdxDataPageTotal",
diff --git a/pages/ems/effc/EqpmIndMntrPage.vue b/pages/ems/effc/EqpmIndMntrPage.vue
index b1ba5f4..0c00d5e 100644
--- a/pages/ems/effc/EqpmIndMntrPage.vue
+++ b/pages/ems/effc/EqpmIndMntrPage.vue
@@ -282,13 +282,13 @@ export default {
     changeGrid: async function (pageNum, limit) {
       this.page = pageNum;
       this.limit = limit;
-      this.search();
+      this.getGridData(true);
     },
     async init() {
       await this.getSelectValueList();
       await this.setQueryParams();
       this.gridInit();
-      await this.getGridData();
+      await this.getGridData(false);
 
       this.initedFlag = true;
     },
@@ -588,8 +588,10 @@ export default {
         value: columnList,
       });
     },
-    async getGridData() {
-      this.loadGrid = false;
+    async getGridData(isPaging) {
+      if(!isPaging) {
+        this.loadGrid = false;
+      }
       this.enrgUseMainIdxDesc = [];
       var apiKey = null;
       var apiKey2 = null;
@@ -651,7 +653,7 @@ export default {
       this.makeTooltip();
     },
     async search() {
-      await this.getGridData();
+      await this.getGridData(false);
     },
     async makeTooltip() {
       var gdIdxList = [