Merge pull request 'Fix selection grid s14 + Remove border legend dashboard' (#73) from dev-nghiantt-fix-bugs into dev

Reviewed-on: #73

assets/scss/common.scss

@@ -231,6 +231,35 @@ a {
   .v-application.#{$theme}-mode {
     min-width: 1000px;
 
+    .ant-checkbox-wrapper.ant-checkbox-wrapper-disabled,
+    .ant-checkbox-disabled .ant-checkbox-input
+    {
+      cursor: default !important;
+    }
+
+    .v-list-item__title {
+      font-family: var(--desktop-normal-font-family, "Inter-Regular", sans-serif) !important;
+    }
+
+    .btn-close-menu-list {
+      min-width: 100px;
+      border-color: transparent;
+      background-color: map-deep-get($config, #{$theme}, "btn-header-select-bg") !important;
+  
+      .v-list-item {
+        min-height: 30px;
+      }
+  
+      .v-list-item__title {
+        color: map-deep-get($config, #{$theme}, "btn-header-select-color") !important;
+  
+        &:hover {
+          color: #46c0ff !important;
+          cursor: pointer;
+        }
+      }
+    }
+
     .icon-datepicker-color {
       color: map-deep-get($config, #{$theme}, "icon-datepicker-color");
     }
@@ -760,7 +789,7 @@ a {
 	
 				.v-list-item__title {
 					color: map-deep-get($config, #{$theme}, "tui-datepicker-calendar-color");
-				}
+        }
 			}
 	
 			&.v-select-list{
@@ -808,6 +837,7 @@ a {
       font-size: 2rem;
       font-weight: bold;
       padding-left: 8px;
+      margin-top: 2px;
 
       img {
         width: 139px;
@@ -824,20 +854,11 @@ a {
   .btn-close-menu-list {
     min-width: 100px;
     border-color: transparent;
-    background-color: map-deep-get($config, #{$theme}, "btn-header-select-bg") !important;
 
     .v-list-item {
       min-height: 30px;
     }
 
-    .v-list-item__title {
-      color: map-deep-get($config, #{$theme}, "btn-header-select-color");
-
-      &:hover {
-        color: #46c0ff;
-      }
-    }
-
     .v-btn {
       background-color: transparent !important;
       color: map-deep-get($config, #{$theme}, "btn-header-select-color") !important;

assets/scss/common/button.scss

@@ -144,11 +144,10 @@
       }
 
       &.ant-btn-danger {
-
         &.ant-btn-background-ghost {
-          color: map-deep-get($config, #{$theme}, "ant-btn-danger-color");
-          border-color: map-deep-get($config, #{$theme}, "ant-btn-danger-color");
-          // background: map-deep-get($config, #{$theme}, "ant-btn-danger-color") !important;
+          color:map-deep-get($config, #{$theme}, "ant-btn-danger-color");
+          border-color:map-deep-get($config, #{$theme}, "ant-btn-danger-border");
+          background: map-deep-get($config, #{$theme}, "ant-btn-danger-bg") !important;
         }
       }
 

assets/scss/common/grid.scss

@@ -21,11 +21,20 @@
     display: none;
   }
 
+  &-no-scroll-y {
+    .tui-grid-rside-area {
+      .tui-grid-header-area,
+      .tui-grid-summary-area {
+        margin-right: 0 !important;
+      }
+    }
+  }
+
   &-rside-area {
 
     .tui-grid-header-area,
     .tui-grid-summary-area {
-      margin-right: $scrollbar-width;
+      margin-right: $scrollbar-width !important;
     }
   }
 
@@ -56,25 +65,35 @@
     font-weight: 400;
   }
 
-  
+
   th[data-column-name="_checked"] {
     padding-left: 0;
   }
 
 
+
 }
 
-.tui-grid-table{
+.tui-grid-table {
+
   .tui-grid-cell-header,
   .tui-grid-cell-has-input .tui-grid-cell-content {
     padding: 8px;
   }
 
   th[data-column-name="_checked"] {
-    &.tui-grid-cell-header  {
+    &.tui-grid-cell-header {
       padding-left: 0;
     }
-    
+
+  }
+
+  .tui-grid-cell {
+    &:last-child {
+      input[type=checkbox] {
+        margin-top: 8px;
+      }
+    }
   }
 }
 
@@ -99,8 +118,46 @@
   @include theme($theme);
 
   .v-application.#{$theme}-mode {
-    .tui-grid-content-area{
-      .tui-grid-header-area{
+    .enrg-effc {
+      .tui-grid-rside-area {
+        .tui-grid-table {
+          tr {
+
+            td:nth-child(4),
+            td:nth-child(10) {
+              .tui-grid-cell-content {
+                color: map-deep-get($config,
+                  #{$theme},
+                  "router-tab-item-active-color"
+                );
+              }
+            }
+          }
+
+          .tui-grid {
+
+            &-row-odd,
+            &-row-even {
+              &:hover {
+
+                >td:nth-child(4),
+                td:nth-child(10) {
+                  .tui-grid-cell-content {
+                    color: map-deep-get($config,
+                      #{$theme},
+                      "router-tab-item-active-color"
+                    );
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .tui-grid-content-area {
+      .tui-grid-header-area {
         height: auto !important;
       }
     }
@@ -115,9 +172,9 @@
         "tui-grid-title-color"
       );
     }
-    
-    .grid-toggle-section{
-      .tui-grid-rside-area{
+
+    .grid-toggle-section {
+      .tui-grid-rside-area {
         .tui-grid-body-area {
           height: auto !important;
 
@@ -145,16 +202,17 @@
         }
       }
 
-      &-border-line-right{
+      &-border-line-right {
         opacity: 0;
       }
 
-      &-body-container{
+      &-body-container {
         border-right: 0;
         // position: relative;
         width: auto !important;
 
-        .tui-grid-table-container{
+        .tui-grid-table-container {
+
           // width: 100% !important;
           .tui-grid-table {
             // width: 100% !important;
@@ -166,12 +224,19 @@
             // }
           }
         }
+
+        .tui-grid-layer-editing {
+          border-color: map-deep-get($config,
+            #{$theme},
+            "tui-grid-border-vertical-color"
+          );
+        }
       }
 
       &-summary-area,
       &-container {
         font-family: Inter;
- 
+
         .tui-grid-cell {
           &.tui-grid-cell-summary {
             color: map-deep-get($config,
@@ -285,7 +350,8 @@
               #{$theme},
               "ant-btn-primary-color"
             );
-            .radio-mark{
+
+            .radio-mark {
               border-color: map-deep-get($config,
                 #{$theme},
                 "arow-line-color"
@@ -294,6 +360,7 @@
                 #{$theme},
                 "arow-line-btn-bg-color"
               );
+
               &::after {
                 content: "";
                 position: absolute;
@@ -311,12 +378,49 @@
             }
           }
         }
+
+        .tui-grid-cell-content {
+
+          input[type='text'],
+          input[type='password'] {
+            border-color: map-deep-get($config,
+              #{$theme},
+              "v-input-fieldset-color"
+            );
+            background: map-deep-get($config,
+              #{$theme},
+              "v-input-backgroundColor"
+            );
+            border-radius: 4px;
+            color: map-deep-get($config,
+              #{$theme},
+              "tui-grid-cell-color"
+            );
+          }
+
+          &.tui-grid-layer-editing {
+            background: transparent;
+            // background:map-deep-get($config,
+            //   #{$theme},
+            //   "tui-grid-cell-insert-color"
+            // );
+          }
+
+          span {
+            &.custom-link {
+              color: map-deep-get($config,
+                #{$theme},
+                "router-tab-item-active-color"
+              );
+            }
+          }
+        }
       }
 
       &-cell {
         &:last-child {
           padding-right: 1px;
-          border-right: 1px solid ;
+          border-right: 1px solid;
           border-right-color: map-deep-get($config,
             #{$theme},
             "tui-grid-cell-borderColor"
@@ -349,7 +453,7 @@
           "tui-grid-border-vertical-color"
         );
         color: map-deep-get($config,
-        #{$theme},
+          #{$theme},
           "tui-grid-header-color"
         );
 
@@ -358,7 +462,7 @@
       &-header-area {
         // background-color: none;
         border: none;
-        margin-right: 0 !important;
+        // margin-right: 0 !important;
         background-color: map-deep-get($config,
           #{$theme},
           "tui-grid-cell-backgroundColor"
@@ -395,14 +499,14 @@
           background-color: map-deep-get($config,
             #{$theme},
             "tui-grid-cell-insert-color"
-          );
+          ) !important;
         }
 
         &.row-modify {
           background-color: map-deep-get($config,
             #{$theme},
             "tui-grid-cell-modify-color"
-          );
+          ) !important;
         }
 
         &.row-removed {
@@ -497,6 +601,7 @@
 
       &-tree-button-expand {
         z-index: 9999;
+
         .tui-grid-btn-tree {
           i {
             width: 16px;
@@ -516,6 +621,7 @@
 
       &-tree-button-collapse {
         z-index: 9999;
+
         .tui-grid-btn-tree {
           i {
             width: 16px;

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,

assets/scss/var.scss

@@ -113,7 +113,7 @@ $config: (
     tui-grid-cell-color: #FFFFFFD9,
     tui-grid-cell-insert-color: #2B2111,
     tui-grid-cell-selected-color: #0A224F,
-    tui-grid-cell-modify-color: #13636c,
+    tui-grid-cell-modify-color: #2B2111,
     tui-grid-cell-removed-color: #2A1215,
     tui-grid-cell-disabled-color: rgb(170, 170, 170),
     tui-grid-cell-hover-backgroundColor: #2d4571,
@@ -166,7 +166,7 @@ $config: (
     ant-btn-primary-color: #212224,
     ant-btn-danger-bg:#D32029,
     ant-btn-danger-border:#D32029,
-    ant-btn-danger-color:#D32029,
+    ant-btn-danger-color:#212224,
     ant-btn-default-border:#FFFFFF2E,
     ant-btn-default-bg:#FFFFFF2E,
     ant-btn-default-color:#FFFFFFD9,
@@ -263,7 +263,7 @@ $config: (
     tui-grid-cell-color: #000000E0,
     tui-grid-cell-insert-color: #FFFBE6,
     tui-grid-cell-selected-color: #E6F4FF,
-    tui-grid-cell-modify-color: #e6f5f7,
+    tui-grid-cell-modify-color: #FFFBE6,
     tui-grid-cell-removed-color: #FFF1F0,
     tui-grid-cell-hover-backgroundColor: #f5f5f5,
     v-tabs-items-border-color: #0000000F,

components/common/Grid.vue

@@ -174,6 +174,10 @@ export default {
 				this.gridScrollTop = e.target.scrollTop;
 				this.gridScrollLeft = e.target.scrollLeft;
 			});
+
+			if (!(this.scrollBody.scrollHeight > this.scrollBody.clientHeight)) {
+				this.gridInstance.$el.getElementsByClassName('tui-grid-content-area')[0].classList.add('tui-grid-no-scroll-y');
+			}
 		}
 	},
 	methods: {
@@ -301,7 +305,7 @@ export default {
 			// console.log('startEditing2...')
 			if (this.editorGrid && e.rowKey >= 0) {
 				this.editorStartKey = e.rowKey;
-				this.gridInstance.invoke('startEditing', e.rowKey, e.columnName);
+				this.gridInstance.invoke('startEditing', e.rowKey, e.columnName, 'row-modify');
 				this.$emit(
 					'getRowsData',
 					this.gridInstance.invoke('getRow', e.rowKey),

components/common/modal/EqpmSelectPop.vue

@@ -94,7 +94,7 @@
 				</div>
 
 				<v-card-actions class="px-6 py-4 d-flex align-center justify-end">
-					<a-button :ripple="false" @click="dialogOpenCloseEvent(dialog)" class="mr-2">닫기</a-button>
+					<a-button :ripple="false" @click="dialogOpenCloseEvent(dialog)" class="ant-btn-popup-default mr-2">닫기</a-button>
 					<a-button :ripple="false" type="primary" @click="setUpdate($event)">확인</a-button>
 				</v-card-actions>
 			</v-card>

components/common/modal/PlanPop.vue

@@ -238,7 +238,13 @@ export default {
 			type: Object,
 			require: false,
 			default: () => {
-				return {};
+				return {
+					selectTimeValue1: "00 : 00", // selectBoxTime에 필요한 prop
+					selectTimeValueList1: [], // selectBoxTime에 필요한 prop
+					selectTimeValue2: "01 : 00", // selectBoxTime에 필요한 prop
+					selectTimeValueList2: [], // selectBoxTime에 필요한 prop
+					minInterval: 10,
+				};
 			},
 		},
 	},
@@ -536,8 +542,8 @@ export default {
 			let returnData = res[0];
 			this.strtDt = Utility.setFormatDate(returnData.strtDt, 'YYYY-MM-DD');
 			this.endDt = Utility.setFormatDate(returnData.endDt, 'YYYY-MM-DD');
-			this.selectTimeValue1 = returnData.strtHh+' : '+  returnData.strtMm;
-			this.selectTimeValue2 = returnData.endHh+' : '+  returnData.endMm;
+			this.selectTimeValue1 = returnData.strtHh + ' : ' + returnData.strtMm;
+			this.selectTimeValue2 = returnData.endHh + ' : ' + returnData.endMm;
 			this.planTitle = returnData.planTitle;
 			this.planCntn = returnData.planCntn;
 			this.planColor = returnData.planColor;

components/common/select/SelectBoxTime.vue

@@ -20,7 +20,7 @@
         item-value="value"
         solo
         outlined
-        :menu-props="{ auto: true, offsetY: true }"
+        :menu-props="{ top: false, offsetY: true }"
         :hide-details="true"
         :class="['v-select__custom', customClass]"
         :disabled="disabled"

components/pages/ems/DataSetInfo/DataSetTagRelTab.vue

@@ -39,8 +39,6 @@
 import { mapState, mapMutations, mapActions } from 'vuex';
 import Buttons from '~/components/common/button/Buttons';
 import Grid from '~/components/common/Grid';
-import { CustomCheckbox } from '~/plugins/gridUtility';
-import { CustomNumberEditor } from '~/plugins/gridUtility';
 import Form from '~/components/common/form/Form';
 import mixinGlobal from '@/mixin/global.js';
 import Utility from '~/plugins/utility';
@@ -70,18 +68,6 @@ export default {
       loadGrid: false,
       gridName: 'rowDataSetTagRelGrid',
       detailDataSetTagList: myDataSetTagDetail,
-      dataPathMock: {
-        "rowDataSetTagRelGrid": {
-          column: [
-            { header: 'TAG ID', name: 'id', headerAlign: 'left' },
-            { header: 'TAG 명', name: 'name', headerAlign: 'left' },
-            { header: '모델 Data 구분', name: 'type', headerAlign: 'left' }
-          ],
-          data: dataPathDataExample,
-          defaultRow: dataPathDataExample,
-          option: {}
-        }
-      },
     };
   },
   computed: {
@@ -175,7 +161,7 @@ export default {
           header: '사용여부',
           name: 'useFg',
           align: 'left',
-          width: 100,
+          minWidth: 80,
           formatter({ value }) {
             value = value === true ? '1' : '0';
             const newValue = _this.pageData.useFgList.filter(
@@ -190,7 +176,7 @@ export default {
           //   }
           // }
         },
-        { header: '비고', name: 'rmrk', align: 'left' },
+        { header: '비고', name: 'rmrk', align: 'left', minWidth: 50, },
       ];
 
       this.setGridColumn({
@@ -324,7 +310,7 @@ const myDataSetTagDetail = [
     valueNm: 'tagNm',
     disabled: false,
     cols: 6,
-    class: 'py-2 mt-2',
+    class: 'py-2 mt-1',
     required: true,
     labelCols: 12,
     textCols: 12,
@@ -350,12 +336,11 @@ const myDataSetTagDetail = [
     valueNm: 'useFg',
     disabled: false,
     cols: 5,
-    class: 'py-2 mt-2',
+    class: 'py-2 mt-1',
     value: { '1': true, '0': false },
     required: true,
     textCols: 12,
     iconShow: true,
-    // class: "d-flex align-end"
   },
   {
     type: 'TextArea',
@@ -369,23 +354,4 @@ const myDataSetTagDetail = [
     required: false,
   },
 ];
-
-
-const dataPathDataExample = [
-  {
-    id: 'INCHEON.HVAC.EQP_HT_CH001.UT_CH101.CHI_AMP_1A_PV',
-    name: 'INCHEON 고온 냉동기 101호기 - 호로1',
-    type: '합계'
-  },
-  {
-    id: 'INCHEON.HVAC.EQP_HT_CH001.UT_CH101.CHI_AMP_1A_PV',
-    name: 'INCHEON 고온 냉동기 101호기 - 호로1',
-    type: '합계'
-  },
-  {
-    id: 'INCHEON.HVAC.EQP_HT_CH001.UT_CH101.CHI_AMP_1A_PV',
-    name: 'INCHEON 고온 냉동기 101호기 - 호로1',
-    type: '합계'
-  },
-];
 </script>

components/pages/ems/EccInfo/EccIaoTab.vue

@@ -98,19 +98,17 @@ export default {
 	watch: {
 		selectedObjId(val) {
 			if (val === 'TAG') {
-				this.detailList[1].class = 'd-none';
-				this.detailList[2].class = 'd-block pl-4';
+				this.detailList[1].class = 'd-none ';
+				this.detailList[2].class = 'd-block pl-4 mt-2';
 				this.detailList[3].class = 'd-block';
+				this.detailList[4].class = 'pl-4 mt-2';
 			} else {
 				// }else if(val==="READ_PLC"){
+				this.detailList[4].class = 'pl-4 mt-2';
 				this.detailList[3].class = 'd-block';
 				this.detailList[2].class = 'd-none';
-				this.detailList[1].class = 'd-block pl-4';
+				this.detailList[1].class = 'd-block pl-4 mt-1 pb-0';
 			}
-			this.detailList[4].class = 'pl-4 mt-2';
-			
-			console.log(val)
-			console.log(this.detailList)
 		},
 	},
 	created() {},
@@ -380,7 +378,7 @@ const myDetail = [
 		label: '대상 유형',
 		disabled: false,
 		cols: 6,
-		class: 'pr-4 py-2',
+		class: 'pr-4 py-2 mt-1',
 		list: 'emMapDivList',
 		valueNm: 'objKind',
 		itemText: 'commCdNm',

components/pages/ems/ErcChrgInfo/ErcChrgInfoTab.vue

@@ -6,7 +6,7 @@
 					<v-row>
 						<v-col :cols="8" style="padding:0px">
 							<!-- 조회기간 -->
-							<DatePicker :parentPrgmId="parentPrgmId" label="조회기간" />
+							<DatePicker :parentPrgmId="parentPrgmId" label="조회기간" customClass="tab-datepicker" />
 						</v-col>
 						<v-col cols="4" class="d-flex justify-end align-center">
 							<Buttons
@@ -205,8 +205,8 @@ export default {
 				header: {
 					height: 38,
 				},
-				rowHeight: 29,
-				minRowHeight: 29,
+				rowHeight: 37,
+				minRowHeight: 37,
 				selectionUnit: 'row',
 				editingEvent: 'click',
 			};
@@ -378,3 +378,20 @@ function numberFormatter({ value }) {
 	return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
 }
 </script>
+<style lang="scss" scoped>
+	::v-deep {
+		.tab-datepicker {
+			width: 64% !important;
+		}
+
+		.tui-grid-layer-state {
+			top: 40px !important;
+		}
+
+		.tui-grid-layer-selection,
+		.tui-grid-cell-content-editor{
+			height: 36px !important;
+			// border: none;
+		}
+	}
+</style>

pages/comm/auth/UserRoleMngPage.vue

@@ -912,17 +912,6 @@ const myColumns = [
 ];
 
 const unAsgnRoleByUserColumns = [
-	{
-		header: '',
-		name: '',
-		align: 'center',
-		width: 50,
-		formatter: (props) => {
-			return `<label class="custom-radio">
-						<span class="radio-mark"></span>
-					</label>`;
-		}
-	},	
 	{ header: '역할ID', name: 'roleId', align: 'left' },
 	{ header: '역할명', name: 'roleNm' },
 	{ header: '적용시작일', name: 'aplyStartDt', hidden: true },
@@ -932,8 +921,7 @@ const unAsgnRoleByUserColumns = [
 ];
 
 const asgnRoleByUserColumns = [
-	
-	{ header: '역할ID', name: 'roleId', align: 'center' },
+	{ header: '역할ID', name: 'roleId', align: 'left' },
 	{ header: '역할명', name: 'roleNm' },
 	{
 		header: '적용시작일',
@@ -947,6 +935,17 @@ const asgnRoleByUserColumns = [
 ];
 
 const asgnMenuByUserColumns = [
+	{
+		header: '',
+		name: '',
+		align: 'center',
+		width: 50,
+		formatter: (props) => {
+			return `<label class="custom-radio">
+						<span class="radio-mark"></span>
+					</label>`;
+		}
+	},	
 	{ header: '메뉴명', name: 'menuNm' }];
 
 const myDetail = blocCdList => {

pages/comm/base/BatchLogMngPage.vue

@@ -7,41 +7,21 @@
 				<v-card class="searchFilter">
 					<v-row align="end" no-gutters>
 						<v-col :cols="2.5">
-							<InputText
-								:parentPrgmId="myPrgmId"
-								label="배치ID"
-								valueNm="batchId"
-								:searchOption="true"
-								customClass="input-large"
-							/>
+							<InputText :parentPrgmId="myPrgmId" label="배치ID" valueNm="batchId" :searchOption="true"
+								customClass="input-large" />
 						</v-col>
 						<v-col :cols="2.5">
-							<InputText
-								:parentPrgmId="myPrgmId"
-								label="배치명"
-								valueNm="batchNm"
-								:searchOption="true"
-								customClass="input-large"
-							/>
+							<InputText :parentPrgmId="myPrgmId" label="배치명" valueNm="batchNm" :searchOption="true"
+								customClass="input-large" />
 						</v-col>
 						<v-col :cols="2.5">
-							<component
-								:is="'selectCodeList'"
-								:parentPrgmId="myPrgmId"
-								:label="'실행 결과'"
-								:dataKey="'execRsltCd'"
-								:sendParam="{ commGrpCd: 'CO_BATCH_EXEC_RSLT', useFg: '1' }"
-								:addAll="true"
-								customClass="select-large"
-							/>
+							<component :is="'selectCodeList'" :parentPrgmId="myPrgmId" :label="'실행 결과'"
+								:dataKey="'execRsltCd'" :sendParam="{ commGrpCd: 'CO_BATCH_EXEC_RSLT', useFg: '1' }"
+								:addAll="true" customClass="select-large" />
 						</v-col>
 						<v-col :cols="2.5">
-							<component
-								:is="'Datepicker'"
-								:parentPrgmId="myPrgmId"
-								:label="'조회기간'"
-								customClass="datepicker-large"
-							/>
+							<component :is="'Datepicker'" :parentPrgmId="myPrgmId" :label="'조회기간'"
+								customClass="datepicker-large" />
 						</v-col>
 						<div class="text-right d-flex align-end justify-end pl-9" style="gap: 8px">
 							<BtnSearch />
@@ -54,37 +34,30 @@
 
 		<v-row ref="contents">
 			<!-- 배치 리스트 -->
-			<v-col :cols="12" style="height:50%">
-				<v-card class="pb-5 h100">
+			<v-col :cols="12" style="height:70%">
+				<v-card class="h100">
 					<v-card-title>배치 리스트</v-card-title>
-					<div class="h100" style="height:calc(100% - 70px)">
+					<div class="h100" style="height:calc(100% - 150px)">
 						<div ref="gridParent" class="px-5 h100">
-							<component
-								:ref="gridName"
-								:is="loadGrid ? 'Grid' : null"
-								:parentPrgmId="myPrgmId"
-								:gridName="gridName"
-								@getRowsData="getRowData"
-							/>
+							<component :ref="gridName" :is="loadGrid ? 'Grid' : null" :parentPrgmId="myPrgmId"
+								:gridName="gridName" @getRowsData="getRowData" />
+						</div>
+						<div class="d-flex align-center justify-center pt-7" v-if="loadGrid && totalCount > 0">
+							<pagination id="pagination" :total-count="totalCount" :page-num="page" :limit="limit"
+								@loadData="changeGrid" />
 						</div>
 					</div>
 				</v-card>
 			</v-col>
 			<!-- 배치 상세 -->
-			<v-col :cols="12" style="height:50%">
-				<v-card class="pb-5 h100">
+			<v-col :cols="12" style="height:30%">
+				<v-card class="h100">
 					<div class="d-flex align-center justify-space-between pa-5">
 						<v-card-title class="pa-0">배치 상세</v-card-title>
 					</div>
-					<div style="height:calc(100% - 50px)">
-						<div ref="gridParent" class="px-5 h100">
-							<component
-								:is="'Form'"
-								:parentPrgmId="myPrgmId"
-								:detailList="detailList"
-								@gridEditingFinish="gridEditingFinish"
-							/>
-						</div>
+					<div style="height:calc(100% - 50px)" class="px-5">
+						<component :is="'Form'" :parentPrgmId="myPrgmId" :detailList="detailList"
+							@gridEditingFinish="gridEditingFinish" />
 					</div>
 				</v-card>
 			</v-col>
@@ -105,6 +78,7 @@ import Buttons from '~/components/common/button/Buttons';
 import Grid from '~/components/common/Grid';
 import Form from '~/components/common/form/Form';
 import Utility from '~/plugins/utility';
+import pagination from '~/components/common/Pagination';
 
 let myTitle;
 let myPrgmId;
@@ -133,6 +107,7 @@ export default {
 		BtnSearch,
 		BtnExcelDownload,
 		Buttons,
+		pagination,
 	},
 	data() {
 		return {
@@ -141,6 +116,11 @@ export default {
 			gridName: 'rowGrid',
 			// rowGridOrigin: [],
 			detailList: myDetail,
+			itemsPerPage: 20,
+			itemsPerPageArray: [10, 20, 30],
+			limit: 20,
+			page: 1,
+			totalCount: 0,
 		};
 	},
 	computed: {
@@ -161,7 +141,10 @@ export default {
 	},
 	watch: {
 		chkIsFind(val) {
-			if (val) this.search();
+			if (val) {
+				this.page = 1;
+				this.search();
+			}
 		},
 		chkExecRsltCd() {
 			this.setPageData({ isFind: true });
@@ -197,17 +180,16 @@ export default {
 		//   chkOpenTabList: "chkOpenTabList"
 		// }),
 		init() {
-			// this.layoutInit();
+			this.layoutInit();
 			this.gridInit();
 		},
-		// layoutInit() {
-		//   const searchFilterHeight = this.$refs.searchFilter.offsetHeight;
-		//   this.$refs.contents.style.height = `calc(100% - ${searchFilterHeight}px)`;
-		// },
+		layoutInit() {
+			const searchFilterHeight = this.$refs.searchFilter.offsetHeight;
+			this.$refs.contents.style.height = `calc(100% - 30px - ${searchFilterHeight}px)`;
+		},
 		gridInit() {
 			this.loadGrid = false;
 			const gridHeight = this.$refs.gridParent.offsetHeight - 30;
-
 			const myOptions = {
 				scrollX: false,
 			};
@@ -219,10 +201,10 @@ export default {
 
 			const _this = this;
 			const myColumns = [
-				{ header: 'No.', name: 'batchLogSeq', align: 'right', width: 100 },
-				{ header: '배치ID', name: 'batchId', align: 'right', width: 100 },
+				{ header: 'No.', name: 'batchLogSeq', align: 'right', width: 90 },
+				{ header: '배치ID', name: 'batchId', align: 'right', width: 90 },
 				{ header: '배치명', name: 'batchNm', align: 'left', width: 150 },
-				{ header: '실행 일자', name: 'execDt', align: 'right', width: 80 },
+				{ header: '실행 일자', name: 'execDt', align: 'right', width: 70 },
 				{
 					header: '실행 결과',
 					name: 'execRsltCd',
@@ -252,9 +234,9 @@ export default {
 					align: 'center',
 					width: 160,
 				},
-				{ header: '등록자NO', name: 'regUserNo', width: 120 },
+				{ header: '등록자NO', name: 'regUserNo', width: 100 },
 				{ header: '등록일시', name: 'regDttm', align: 'center', width: 160 },
-				{ header: '수정자NO', name: 'procUserNo', width: 120 },
+				{ header: '수정자NO', name: 'procUserNo', width: 100 },
 				{ header: '수정일시', name: 'procDttm', align: 'center', width: 160 },
 			];
 
@@ -274,6 +256,11 @@ export default {
 			});
 		},
 		async getRowGridData() {
+			this.loadGrid = false;
+			// this.setGridData({
+			// 	gridKey: this.gridName,
+			// 	value: [],
+			// });
 			const res = await this.postApiReturn({
 				apiKey: 'selectBatchLog',
 				resKey: 'batchLogData',
@@ -282,8 +269,24 @@ export default {
 					batchNm: this.pageData.batchNm, // 검색키워드: 배치명
 					execRsltCd: this.pageData.execRsltCd, //배치 실행 결과
 					fromDt: this.pageData.fromDt,
+					limit: this.limit,
+					page: this.page,
+					offset: (this.page - 1) * this.limit, // MariaDB Query에서 직접 계산이 안됨
 				},
 			});
+
+			const res2 = await this.postApiReturn({
+				apiKey: 'selectBatchLogPageTotal',
+				resKey: 'batchLogPageTotal',
+				sendParam: {
+					batchId: this.pageData.batchId, // 검색키워드: 배치ID
+					batchNm: this.pageData.batchNm, // 검색키워드: 배치명
+					execRsltCd: this.pageData.execRsltCd, //배치 실행 결과
+					fromDt: this.pageData.fromDt,
+				},
+			});
+			this.totalCount = res2[0].totalcount;
+
 			const newRes = res.map(item => {
 				const newObj = {
 					...item,
@@ -302,6 +305,7 @@ export default {
 			});
 
 			this.$nextTick(() => {
+				this.loadGrid = true;
 				if (newRes.length > 0) {
 					this.$refs[this.gridName].focus({
 						rowKey: this.chkRowGridSelectKey || 0,
@@ -361,6 +365,12 @@ export default {
 			}
 			return retVal;
 		},
+		changeGrid: async function (pageNum, limit) {
+			this.page = pageNum;
+			this.limit = limit;
+
+			this.search();
+		},
 	},
 };
 
@@ -428,6 +438,7 @@ const myDetail = [
 		readonly: true,
 		cols: 12,
 		class: 'py-2',
+		rows: 3
 	},
 ];
 </script>

pages/comm/base/CalendarMngPage.vue

@@ -41,7 +41,7 @@
 					<v-card-title>
 						<span class="custom-title-4">캘린더 미리보기</span>
 					</v-card-title>
-					<v-card-actions class="px-5 d-block" >
+					<v-card-actions class="px-5 d-block">
 						<Calendar :parentPrgmId="myPrgmId" :gridName="gridName" :headerVisible="false"
 							:showTitle="false" />
 					</v-card-actions>
@@ -470,71 +470,76 @@ const defaultData = {
 };
 </script>
 <style lang="scss" scoped>
-.selectbox:focus {
-	outline: none;
-}
-
-.calendarOption {
-	box-sizing: border-box;
-	position: relative;
-	width: 100%;
-	height: 100%;
-	padding: 0;
-	margin: 0;
-}
-
-select.selectbox {
-	box-sizing: border-box;
-	position: relative;
-	width: 100%;
-	height: 100%;
-	/* 높이 초기화 */
-	padding: 0;
-	margin: 0;
-	line-height: normal;
-	/* line-height 초기화 */
-	font-family: inherit;
-	/* 폰트 상속 */
-	border: 0;
-	// opacity: 0;  /* 숨기기 */
-	// filter:alpha(opacity=0);  /* IE8 숨기기 */
-	// -webkit-appearance: none; /* 네이티브 외형 감추기 */
-	// -moz-appearance: none;
-	// appearance: none;
-	opacity: 1;
-	/* 숨기기 */
-	filter: alpha(opacity=1);
-	/* IE8 숨기기 */
-	-webkit-appearance: auto;
-	/* 네이티브 외형 감추기 */
-	-moz-appearance: auto;
-	appearance: auto;
-}
-
-.tui-grid-layer-editing {
-	position: absolute;
-	background: #fff;
-	// background-image: initial;
-	// background-position-x: initial;
-	// background-position-y: initial;
-	// background-size: initial;
-	// background-repeat-x: initial;
-	// background-repeat-y: initial;
-	// background-attachment: initial;
-	// background-origin: initial;
-	// background-clip: initial;
-	// background-color: rgb(255, 255, 255);
-	// z-index: 15;
-	padding: 0;
-	margin: 0;
-	/* border-style: solid; */
-	/* border-width: 1px; */
-	white-space: nowrap;
-	border-width: 0px;
-	// box-sizing: border-box;
-}
-
 ::v-deep {
+	.selectbox:focus {
+		outline: none;
+	}
+
+	.calendarOption {
+		box-sizing: border-box;
+		position: relative;
+		width: 100%;
+		height: 100%;
+		padding: 0;
+		margin: 0;
+	}
+
+	select.selectbox {
+		box-sizing: border-box;
+		position: relative;
+		width: 100%;
+		height: 100%;
+		/* 높이 초기화 */
+		padding: 0;
+		margin: 0;
+		line-height: normal;
+		/* line-height 초기화 */
+		font-family: inherit;
+		/* 폰트 상속 */
+		border: 0;
+		// opacity: 0;  /* 숨기기 */
+		// filter:alpha(opacity=0);  /* IE8 숨기기 */
+		// -webkit-appearance: none; /* 네이티브 외형 감추기 */
+		// -moz-appearance: none;
+		// appearance: none;
+		opacity: 1;
+		/* 숨기기 */
+		filter: alpha(opacity=1);
+		/* IE8 숨기기 */
+		-webkit-appearance: auto;
+		/* 네이티브 외형 감추기 */
+		-moz-appearance: auto;
+		appearance: auto;
+		background: #fff;
+		border: 1px solid #d9d9d9;
+		border-radius: 6px;
+		color: rgba(0,0,0,0.87843);
+	}
+
+	.tui-grid-layer-editing {
+		position: absolute;
+		background: #fff;
+		// background-image: initial;
+		// background-position-x: initial;
+		// background-position-y: initial;
+		// background-size: initial;
+		// background-repeat-x: initial;
+		// background-repeat-y: initial;
+		// background-attachment: initial;
+		// background-origin: initial;
+		// background-clip: initial;
+		// background-color: rgb(255, 255, 255);
+		// z-index: 15;
+		padding: 0;
+		margin: 0;
+		/* border-style: solid; */
+		/* border-width: 1px; */
+		white-space: nowrap;
+		border-width: 0px;
+		// box-sizing: border-box;
+	}
+
+
 	.custom-vc-calender {
 		.vc-header {
 			display: none;

pages/comm/base/NoticeMngPage.vue

@@ -60,9 +60,13 @@
 						<v-card-title class="custom-title-7 pa-0">
 							파일목록
 						</v-card-title>
-						<div v-for="fileData in viewActionData.fileData" :key="fileData.apndFileId" class="file-item" style="background-color: unset;">
-							<a @click.prevent="downloadFile(fileData)">
-								<div class="d-flex justify-start search-box-label">
+						<div v-for="fileData in viewActionData.fileData" 
+							:key="fileData.apndFileId" 
+							:class="['file-item', isDarkMode?'dark':'light']"
+							style="background-color: unset;"
+						>
+							<a @click.prevent="downloadFile(fileData)" class="pa-0">
+								<div class="d-flex justify-start search-box-label mb-0">
 									<v-icon>mdi-paperclip</v-icon>
 									<span class="file-item-name ml-2">{{ fileData.apndFileNm + '.' +
 										fileData.apndFileExt }}</span>
@@ -96,7 +100,8 @@
 							<v-card-title class="custom-title-7 pa-0">파일첨부</v-card-title>
 							<div class="" v-if="writeActionData.fileData">
 								<div v-for="(fileData, index) in writeActionData.fileData" :key="fileData.apndFileId"
-									class="file-item d-flex justify-space-between">
+									:class="['file-item d-flex justify-space-between', isDarkMode?'dark':'light']"
+								>
 									<div class="file-item-detail">
 										<v-icon>mdi-paperclip</v-icon>
 										<span href="#" class="file-item-name">{{ fileData.name }}</span>
@@ -144,7 +149,8 @@
 						<v-card-title class="custom-title-7 pa-0">파일첨부</v-card-title>
 						<div class="" v-if="replyActionData.fileData">
 							<div v-for="(fileData, index) in replyActionData.fileData" :key="fileData.apndFileId"
-								class="file-item d-flex justify-space-between">
+								:class="['file-item d-flex justify-space-between', isDarkMode?'dark':'light']"
+							>
 								<div class="file-item-detail">
 									<v-icon>mdi-paperclip</v-icon>
 									<span href="#" class="file-item-name">{{ fileData.name }}</span>
@@ -173,7 +179,7 @@
 		</div>
 		<!-- 답글 작성 페이지 끝 -->
 		<!-- 수정 페이지 시작 -->
-		<div v-if="pageActionFlag == 'update'">
+		<div v-if="pageActionFlag == 'update'" class="update">
 			<v-card>
 				<div class="pa-5">
 					<v-row align="center" no-gutters>
@@ -195,7 +201,8 @@
 							<v-card-title class="custom-title-7 pa-0">파일첨부</v-card-title>
 							<div class="" v-if="updateActionData.fileData">
 								<div v-for="(fileData, index) in updateActionData.fileData" :key="fileData.apndFileId"
-									class="file-item d-flex justify-space-between">
+									:class="['file-item d-flex justify-space-between', isDarkMode?'dark':'light']"
+								>
 									<div class="file-item-detail">
 										<v-icon style="font-size: 18px;">mdi-paperclip</v-icon>
 										<span href="#" class="file-item-name">{{ fileData.name }}</span>
@@ -204,9 +211,11 @@
 										@click="updateActionData.fileData.splice(index, 1)" />
 								</div>
 							</div>
-							<div class="" v-if="updateActionData.currentFileList">
+							<div class="current-files" v-if="updateActionData.currentFileList">
 								<div v-for="(fileData, index) in updateActionData.currentFileList"
-									:key="fileData.apndFileId" class="file-item d-flex justify-space-between">
+									:key="fileData.apndFileId"
+									:class="['file-item d-flex justify-space-between', isDarkMode?'dark':'light']"
+								>
 									<div class="file-item-detail">
 										<v-icon style="font-size: 18px;">mdi-paperclip</v-icon>
 										<span @click.prevent="downloadFile(fileData)" href="#"
@@ -1050,17 +1059,6 @@ const defaultData = {
 	cursor: pointer;
 }
 
-.file-item {
-	width: auto;
-	margin: 2px 0;
-	padding: 4px;
-	background-color: #0000000A;
-
-	.file-item-name {
-		color: #1677FF;
-	}
-}
-
 ::v-deep {
 	.v-input__slot {
 		padding-left: 8px;
@@ -1084,17 +1082,46 @@ const defaultData = {
 		font-size: 1.0rem !important;
 	}
 
-	.toastui-editor-mode-switch .tab-item.active {
-		color: #1677FF
-	}
-
-	.toastui-editor-light .toastui-editor-mode-switch .tab-item {
-		color: #000000E0
-	}
-
 	.v-icon.anticon-delete svg {
 		width: 14px;
 		height: 14px;
 	}
 }
+
+@each $theme in dark, light {
+	@include theme($theme);
+	
+	::v-deep {
+		.toastui-editor-#{$theme} {
+			.toastui-editor-mode-switch {
+				>.tab-item {
+					border: none;
+					background-color: transparent;
+					color: map-deep-get($config, #{$theme}, "card-title-color") !important;
+	
+					&.active {
+						color: map-deep-get($config, #{$theme}, "card-text-info-color") !important;
+						border-top: 1px solid map-deep-get($config, #{$theme}, "card-text-info-color");
+					}
+
+				}
+			}
+	
+		}
+	}
+
+	.file-item {
+		&.#{$theme} {
+			width: auto;
+			margin: 2px 0;
+			padding: 4px;
+			background-color: map-deep-get($config, #{$theme}, "v-calendar-day-in-not-month-color");
+
+			.file-item-name {
+				color: map-deep-get($config, #{$theme}, "card-text-info-color");
+			}
+
+		}
+	}
+}
 </style>

pages/ems/base/DashboardPage.vue

@@ -512,7 +512,7 @@
       <v-col cols="12" sm="12" xl="12" style="height: 300px">
         <v-card style="border-radius: 4px" class="pb-5">
           <div style="height: 20px"></div>
-          <div class="h100 px-5" style="height: calc(100% - 30px)">
+          <div class="h100 px-5" style="height: calc(100% - 70px)">
             <div ref="gridParent" class="h100 w100">
               <component
                 :is="loadGrid ? 'Grid' : null"
@@ -521,6 +521,16 @@
                 :ref="gridName"
                 @dblClick="gridClickEvent"
               />
+              <div v-if="loadGrid && totalCount > 0" class="pagination-wrapper">
+                <pagination
+                  id="pagination"
+                  :total-count="totalCount"
+                  :page-num="page"
+                  :limit="limit"
+                  :itemsPerPageArray="itemsPerPageArray"
+                  @loadData="changeGrid"
+                />
+              </div>
             </div>
           </div>
         </v-card>
@@ -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 = `<span>${value}</span>`;
+          $(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 = [
       // 	{
@@ -1280,6 +1381,9 @@ export default {
           textStyle: {
             color: this.isDarkMode ? "#fff" : "#333333",
           },
+          itemStyle: {        
+            borderWidth: 0
+          }
         },
         series: seriesData,
       };

pages/ems/base/EnrgResourceCenterMngPage.vue

@@ -84,67 +84,64 @@
 				</v-card>
 			</v-col>
 		</v-row>
-		<v-row >
-			<v-col :cols="5" class="h100">
-				<v-card class="pb-5">
-					<v-card-title class="d-flex justify-space-between align-end">
-						<span class="tit ft-size_20 ft-weight_600">에너지원 정보</span>
-						<Buttons
-							:parentPrgmId="myPrgmId"
-							:bindingData="gridName"
-							:detailList="detailList"
-							:btnActionsFnc="btnActions"
-						/>
-					</v-card-title>
-					<div class="px-5" style="height:calc(100% - 106px)">
-						<div ref="gridParent" class="w100 h100">
-							<component
-								:ref="gridName"
-								:is="loadGrid ? 'Grid' : null"
-								:gridName="gridName"
-								:parentPrgmId="myPrgmId"
-								@getRowsData="getRowData"
-								@sendSelectedRowStatInfo="getSelectedRowStatInfo"
-								:selectedRowDataWatchFlag="true"
-							/>
-						</div>
+		<v-row align="stretch">
+			<v-col :cols="5">
+				<v-card class="d-flex flex-column h100">
+				<v-card-title class="d-flex justify-space-between align-end">
+					<span class="tit ft-size_20 ft-weight_600">에너지원 정보</span>
+					<Buttons
+					:parentPrgmId="myPrgmId"
+					:bindingData="gridName"
+					:detailList="detailList"
+					:btnActionsFnc="btnActions"
+					/>
+				</v-card-title>
+				<div class="px-5" style="height: auto;">
+					<div ref="gridParent" class="w100">
+					<component
+						:ref="gridName"
+						:is="loadGrid ? 'Grid' : null"
+						:gridName="gridName"
+						:parentPrgmId="myPrgmId"
+						@getRowsData="getRowData"
+						@sendSelectedRowStatInfo="getSelectedRowStatInfo"
+						:selectedRowDataWatchFlag="true"
+					/>
 					</div>
+				</div>
 				</v-card>
 			</v-col>
-			<v-col :cols="7" class="h100">
-				<v-card class="pb-5">
-					<v-card-title>에너지원 상세</v-card-title>
-					<div class="px-5" style="min-height: auto;">
-						<v-tabs v-model="tab">
-							<v-tab
-								v-for="item in items"
-								:key="item.id"
-								:disabled="item.disabledFlag"
-							>
-								{{ item.name }}
-							</v-tab>
-						</v-tabs>
-						<v-tabs-items
-							v-model="tab"
-							class="py-6"
-							style="min-height: auto;"
-						>
-							<v-tab-item v-for="(item, idx) in items" :key="item.id">				
-								<component
-										v-if="item.id == 'ercInfoTab'"
-										:is="'Form'"
-										:parentPrgmId="myPrgmId"
-										:detailList="detailList"
-										@gridEditingFinish="gridEditingFinish"
-								/>
-								<ErcChrgInfoTab
-										v-if="item.id == 'ercChrgInfoTab'"
-										:parentPrgmId="myPrgmId"
-										:innerTabGridInfo="{ tab, idx }"
-								/>
-							</v-tab-item>
-						</v-tabs-items>
-					</div>
+
+			<v-col :cols="7">
+				<v-card class="d-flex flex-column h100">
+				<v-card-title>에너지원 상세</v-card-title>
+				<div class="px-5" style="height: auto;">
+					<v-tabs v-model="tab">
+					<v-tab
+						v-for="item in items"
+						:key="item.id"
+						:disabled="item.disabledFlag"
+					>
+						{{ item.name }}
+					</v-tab>
+					</v-tabs>
+					<v-tabs-items v-model="tab" class="py-6">
+					<v-tab-item v-for="(item, idx) in items" :key="item.id">
+						<component
+						v-if="item.id == 'ercInfoTab'"
+						:is="'Form'"
+						:parentPrgmId="myPrgmId"
+						:detailList="detailList"
+						@gridEditingFinish="gridEditingFinish"
+						/>
+						<ErcChrgInfoTab
+						v-if="item.id == 'ercChrgInfoTab'"
+						:parentPrgmId="myPrgmId"
+						:innerTabGridInfo="{ tab, idx }"
+						/>
+					</v-tab-item>
+					</v-tabs-items>
+				</div>
 				</v-card>
 			</v-col>
 		</v-row>

pages/ems/effc/EnrgEffcEqpmDetlMntrPage.vue

@@ -66,7 +66,7 @@
 						<v-card-title class="pa-0">설비별 현황 리스트</v-card-title>
 					</div>
 					<div class="px-4" style="height:calc(100% - 76px)">
-						<div ref="gridParent" class="w100 h100">
+						<div ref="gridParent" class="w100 h100 enrg-effc">
 							<component :ref="gridName" :is="loadGrid ? 'Grid' : null" :gridName="gridName"
 								:parentPrgmId="myPrgmId" :columnClickEventFlag="true" @columnClick="columnClick" />
 						</div>

pages/ems/effc/EnrgUseEqpmDetlMntrPage.vue

@@ -152,16 +152,16 @@
             </div>
           </div>
         </v-row>
-        <v-row class="pa-1" style="height: 52%; width: 100%">
+        <v-row class="pa-1" style="height: 45%; width: 100%">
           <v-card class="pa-1" style="height: 100%; width: 100%; overflow: hidden">
             <div style="height: 15%">
-              <v-card-title class="d-flex align-center justify-space-between pl-3">
+              <v-card-title class="d-flex align-center justify-space-between pl-3 pt-2">
                 <span class="tit ft-size_20 ft-weight_600">가이드 알람정보</span>
               </v-card-title>
             </div>
             <div
               ref="gridParent01"
-              class="pl-3 mt-5"
+              class="pl-3 mt-3"
               style="height: 75%; overflow: hidden;"
             >
               <component

store/modules/list.js

@@ -281,6 +281,7 @@ const INIT_URL_STATE = {
 
 	// prgmId: "PRG0020" 배치로그
 	selectBatchLog: 'comm/base/BatchLogCtr/selectBatchLog', // 배치 로그
+	selectBatchLogPageTotal: 'comm/base/BatchLogCtr/selectBatchLogPageTotal', // 배치 로그
 
 	// prgmId: "PRG0017" 검침개소 기간별 비교
 	selectSameReadPlcTime: 'ems/base/sameReadPlcCtr/selectSameReadPlcTime',
@@ -969,4 +970,5 @@ const INIT_URL_STATE = {
 	selectTodayNgTopTen: 'ems/base/DashboardCtr/selectTodayNgTopTen',
 	selectCompareEqpmTGdChart: 'ems/base/DashboardCtr/selectCompareEqpmTGdChart',
 	selectIssueGdIdxData: 'ems/base/DashboardCtr/selectIssueGdIdxData',
+	selectIssueGdIdxDataPageTotal: 'ems/base/DashboardCtr/selectIssueGdIdxDataPageTotal',
 };