fix bug screen 8

Reviewed-on: #84

assets/scss/common/grid.scss

@@ -10,6 +10,14 @@
   &-container {
     width: 100%;
     border-radius: 10px;
+
+    .tui-select-box-input {
+      p {
+        font-size: 14px;
+        font-family: inherit
+      }
+    }
+
   }
 
   &-content-area {
@@ -23,6 +31,7 @@
 
   &-no-scroll-y {
     .tui-grid-rside-area {
+
       .tui-grid-header-area,
       .tui-grid-summary-area {
         margin-right: 0 !important;
@@ -150,6 +159,15 @@
 
   .tui-select-box-input {
     border-radius: 6px;
+
+    .tui-select-box-icon {
+      width: 14px;
+      height: 14px;
+
+      background-repeat: no-repeat;
+      background-size: contain;
+      margin-top: -20px;
+    }
   }
 
   .tui-select-box-dropdown {
@@ -158,7 +176,9 @@
     padding: 4px;
     box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
 
+
     .tui-select-box-item {
+      font-size: 14px;
       margin-bottom: 4px;
       position: relative;
 
@@ -204,44 +224,6 @@
   @include theme($theme);
 
   .v-application.#{$theme}-mode {
-    .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;
@@ -715,7 +697,7 @@
       }
 
       &-tree-button-expand {
-        z-index: 9999;
+        z-index: 7;
 
         .tui-grid-btn-tree {
           i {
@@ -735,7 +717,7 @@
       }
 
       &-tree-button-collapse {
-        z-index: 9999;
+        z-index: 7;
 
         .tui-grid-btn-tree {
           i {
@@ -862,6 +844,17 @@
           "tui-grid-cell-color"
         );
 
+        .tui-select-box-icon {
+
+          @if $theme ==dark {
+            background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2217%22%20height%3D%2216%22%20viewBox%3D%220%200%2017%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20fill%3D%22rgba(255%2C%20255%2C%20255%2C%200.45)%22%20d%3D%22M1.90728%203.65546L8.20371%2012.3358C8.43228%2012.6501%208.90014%2012.6501%209.12692%2012.3358L15.4251%203.65546C15.4406%203.63411%2015.4499%203.60889%2015.452%203.58259C15.454%203.55628%2015.4487%203.52993%2015.4367%203.50644C15.4247%203.48296%2015.4064%203.46326%2015.3839%203.44954C15.3613%203.43581%2015.3354%203.42859%2015.3091%203.42868H13.9698C13.8787%203.42868%2013.793%203.47332%2013.7394%203.54653L8.66621%2010.5394L3.593%203.54653C3.53942%203.47332%203.45371%203.42868%203.36264%203.42868H2.02335C1.90728%203.42868%201.83943%203.56082%201.90728%203.65546Z%22/%3E%3C/svg%3E");
+          }
+
+          @else {
+            background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2217%22%20height%3D%2216%22%20viewBox%3D%220%200%2017%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20fill%3D%22rgba(0%2C%200%2C%200%2C%200.45)%22%20d%3D%22M1.90728%203.65546L8.20371%2012.3358C8.43228%2012.6501%208.90014%2012.6501%209.12692%2012.3358L15.4251%203.65546C15.4406%203.63411%2015.4499%203.60889%2015.452%203.58259C15.454%203.55628%2015.4487%203.52993%2015.4367%203.50644C15.4247%203.48296%2015.4064%203.46326%2015.3839%203.44954C15.3613%203.43581%2015.3354%203.42859%2015.3091%203.42868H13.9698C13.8787%203.42868%2013.793%203.47332%2013.7394%203.54653L8.66621%2010.5394L3.593%203.54653C3.53942%203.47332%203.45371%203.42868%203.36264%203.42868H2.02335C1.90728%203.42868%201.83943%203.56082%201.90728%203.65546Z%22/%3E%3C/svg%3E");
+          }
+        }
+
       }
 
       .tui-select-box-dropdown {
@@ -886,7 +879,8 @@
 
 
         .tui-select-box-highlight {
-          background:none !important;
+          background: none !important;
+
           &:before {
             background: map-deep-get($config,
               #{$theme},

assets/scss/layout.scss

@@ -1,18 +1,27 @@
-.loading {
-  z-index: 99;
+.loading-container {
   position: fixed;
-  top: 50%;
-  left: 50%;
-  width: 100%;
-  height: 100%;
-  transform: translate(-50%, -50%);
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 9999;
   background-color: rgba(0, 0, 0, 0.4);
   //box-shadow: rgba(68, 67, 67, 0.9) 0 0 0 9999px;
 }
 
-.v-spinner {
-  top: 50%;
-  left: 50%;
+.loading-img {
+  width: 64px;
+  height: 64px;
+  animation: spin 3s linear infinite;
+}
+ 
+@keyframes spin {
+  100% {
+    transform: rotate(360deg);
+  }
 }
 
 ::v-deep {
@@ -439,8 +448,8 @@
 
       .router-tab {
         .router-tab__header {
-          background-color: map-deep-get($config, #{$theme}, "router-header");
-          border-color: map-deep-get($config, #{$theme}, "router-header");
+          // background-color: map-deep-get($config, #{$theme}, "router-header");
+          // border-color: map-deep-get($config, #{$theme}, "router-header");
           height: 46px;
           z-index: 7;
           max-width: calc(100vw - 290px);

components/common/PastRsltDatePicker.vue

@@ -58,6 +58,11 @@ export default {
 			require: false,
 			default: false,
 		},
+		required: {
+			type: Boolean,
+			require: false,
+			default: false,
+		},
 		labelCols: {
 			type: Number,
 			require: false,

components/common/chartoptions/GaugeChart.js

@@ -1,5 +1,6 @@
 // Gauge chart options
-export default function getGaugeChartOption({ title, min = 0, max = 160, unit = '%', isDarkMode = false, backgroundRadius = 97 }) {
+export default function getGaugeChartOption({ title, min = 0, max = 160, unit = '%', isDarkMode = false, backgroundRadius = 97,
+    value = 0 }) {
     const colorRanges = isDarkMode
         ? [
             [60 / 160, '#49AA19'], // Dark Green
@@ -24,6 +25,9 @@ export default function getGaugeChartOption({ title, min = 0, max = 160, unit =
     //     [0.8, "#f7931e"],
     //     [1.0, "#ed1c24"],
     // ];
+    
+    const valueLength = String(value).length;
+    const dynamicFontSize = valueLength >= 4 ? 21 : 30;
     return {
         grid: {
             // top: '-10%',
@@ -109,7 +113,7 @@ export default function getGaugeChartOption({ title, min = 0, max = 160, unit =
                     valueAnimation: true,
                     fontWeight: 500, // or "normal", "lighter", "bolder", or a number like 600
                     fontFamily: "Oxanium, sans-serif", // or any custom font
-                    fontSize: 30,
+                    fontSize: dynamicFontSize,
                     lineHeight: 25,
                     offsetCenter: [0, "60%"],
                     color: isDarkMode ? "#fff" : "#333333",
@@ -130,7 +134,7 @@ export default function getGaugeChartOption({ title, min = 0, max = 160, unit =
                 },
                 data: [
                     {
-                        value: 16,
+                        value: value,
                         name: "에너지사용효율", // "Energy Usage Efficiency"
                     },
                 ],

components/common/modal/EqpmSelectPop.vue

@@ -2,17 +2,14 @@
 	<v-row class="search-box" align="center" no-gutters>
 		<v-col v-if="label" :cols="labelCols" class="mr-2">
 			<label for="" class="search-box-label">
-				<v-icon v-if="iconShow" small
-					:class="['mr-1', required ? 'icon-orange' : 'icon-blue']">$icoBulletPoint</v-icon>
+				<v-icon v-if="iconShow" small :class="['mr-1', required ? 'icon-orange' : 'icon-blue']">$icoBulletPoint</v-icon>
 				{{ label }}
 			</label>
 		</v-col>
 		<v-col :cols="textCols">
 			<v-text-field readonly v-model="selectValue" append-icon="" :class="['v-input__custom', customClass]"
 				@click="dialogOpenCloseEvent(dialog)" outlined :hide-details="true" :required="required || false"
-				:disabled="disabled || false"
-				:placeholder="placeholder"
-				>
+				:disabled="disabled || false" :placeholder="placeholder">
 				<template v-slot:append>
 					<!-- Custom SVG icon -->
 					<v-icon>$icoSearch</v-icon>
@@ -31,17 +28,17 @@
 					<v-row align="end">
 						<v-col :cols="3.5">
 							<!-- 설비그룹 -->
-							<component :is="'SelectBox'" :propsValue="selectValue01" :itemList="selectValueList01"
-								:label="'설비그룹'" :disabled="eqpmGrpDisabled" @update:propsValue="selectValue01 = $event"
-								:labelCols="12" :textCols="12" :iconShow="true" />
+							<component :is="'SelectBox'" :propsValue="selectValue01" :itemList="selectValueList01" :label="'설비그룹'"
+								:disabled="eqpmGrpDisabled" @update:propsValue="selectValue01 = $event" :labelCols="12" :textCols="12"
+								:iconShow="true" />
 						</v-col>
 						<v-col>
 							<!-- FAB -->
-							<component :is="'SelectBoxMulti'" :propsValue="selectValue02" :itemList="selectValueList02"
-								:label="'FAB'" :labelCols="12" :multiple="true" :disabled="fabDisabled"
-								@update:propsValue="selectValue02 = $event" :textCols="12" :iconShow="true" />
+							<component :is="'SelectBoxMulti'" :propsValue="selectValue02" :itemList="selectValueList02" :label="'FAB'"
+								:labelCols="12" :multiple="true" :disabled="fabDisabled" @update:propsValue="selectValue02 = $event"
+								:textCols="12" :iconShow="true" />
 						</v-col>
-						<v-col >
+						<v-col>
 							<v-row>
 								<v-col :cols="12" class="py-0">
 									<label for="" class="search-box-label">
@@ -86,15 +83,16 @@
 				</div>
 
 				<div class="pa-5" style="height:calc(100% - 30px)">
-					<div ref="modalGridParent" class="h100 w100">
+					<div ref="modalGridParent" :class="['h100', 'w100', isDarkMode ? 'dark-mode' : 'light-mode']">
 						<component :ref="gridName" :is="loadGrid ? 'Grid' : null"
-							:dataPath="searchParam.eqpmSelectPopData.eqpmSelectPop" :gridName="gridName"
-							:parentPrgmId="parentPrgmId" @getRowsData="getRowData" />
+							:dataPath="searchParam.eqpmSelectPopData.eqpmSelectPop" :gridName="gridName" :parentPrgmId="parentPrgmId"
+							@getRowsData="getRowData" />
 					</div>
 				</div>
 
 				<v-card-actions class="px-6 py-4 d-flex align-center justify-end">
-					<a-button :ripple="false" @click="dialogOpenCloseEvent(dialog)" class="ant-btn-popup-default 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>
@@ -247,6 +245,7 @@ export default {
 					eqpmKindId: data.eqpmKindId,
 				}
 			},
+			isDarkMode: "isDarkMode",
 		}),
 		selectValue: {
 			get() {
@@ -400,7 +399,6 @@ export default {
 				header: {
 					height: 'auto',
 				},
-				// rowHeaders:[{ type: 'checkbox' }],
 				rowHeight: 'auto',
 			};
 			if (this.isMulti) {
@@ -408,8 +406,6 @@ export default {
 				myOptions['rowHeight'] = 'auto';
 			}
 
-
-
 			this.setModalGridOption({
 				modalKey: this.myModalKey,
 				gridKey: this.gridName,
@@ -463,8 +459,6 @@ export default {
 				modalDataKey: this.modalDataKey,
 				value: myColumns,
 			});
-
-
 			// this.getRowGridData();
 		},
 		async getRowGridData() {
@@ -588,6 +582,35 @@ var eqpmSelectPop = {
 		overflow-y: hidden;
 	}
 
+	.tui-grid-lside-area {
+		.tui-grid-table {
+
+			.tui-grid-cell-header {
+				&.tui-grid-cell {
+					input[type=checkbox] {
+						margin-top: 0px;
+					}
+				}
+			}
+		}
+	}
 }
 
+@each $theme in dark, light {
+	@include theme($theme);
+
+	.#{$theme}-mode {
+		::v-deep {
+			.tui-grid-lside-area {
+				.tui-grid-table{
+					border-right: 1px solid map-deep-get($config,
+						#{$theme},
+						"tui-grid-border-vertical-color"
+					) !important;
+				}
+			}
+		}
+	}
+
+}
 </style>

layouts/default.vue

@@ -104,7 +104,9 @@
                   :items="treevieItems" activatable hoverable color="#3896ff" open-on-click @update:open="openNode">
                   <template slot="label" slot-scope="{ item }">
                     <button :class="{ 'justify-center': miniVariant }" @mouseover="doMouseOver">
-                      
+                      <!-- <span v-if="['MNU0065', 'MNU0027'].includes(item.menuId)" >
+                        {{ item }}
+                      </span> -->
                       <v-icon 
                         v-if="item.lvl === 1 && menuIconKeys.includes(item.menuId)"
                         :class="{ 'mr-2': !miniVariant }" 
@@ -142,8 +144,12 @@
               </v-navigation-drawer>
             </div>
 
-            <v-col>
-              <router-tab ref="routerTab" :tabs="treevieItems" :keep-last-tab="false" :contextmenu="false">
+            <v-col :class="`${isDarkMode ? 'dark' : 'light'}`">
+              <router-tab ref="routerTab" 
+                :tabs="treevieItems" 
+                :keep-last-tab="false" 
+                :contextmenu="false"
+              >
                 <template slot-scope="{ title, closable, to, base }">
                   <span>{{ title }}</span>
                   <v-icon size="20" class="ml-2" v-if="closable" @click.stop="onCloseTab(to)">mdi-close</v-icon>
@@ -155,9 +161,8 @@
           </v-row>
         </v-container>
         <div v-if="loadingStackCnt > 0" class="loading-container">
-          <div class="loading">
-            <Fade-loader />
-          </div>
+            <!-- <Fade-loader color="#717577" />   -->
+          <img class="loading-img" src="@/assets/images/loading.png" alt="Loading..." />
         </div>
       </v-main>
     </fullscreen>
@@ -342,6 +347,12 @@ export default {
         //console.log("localPageData", this.pageData);
       },
     },
+    isDarkMode(){
+      this.loadingStackCnt = 1;
+      setTimeout(() => {
+        this.loadingStackCnt = 0;
+      }, 1000);
+    },
     // menuLink: {
     //   deep: true,
     //   handler() {
@@ -701,4 +712,17 @@ export default {
 
 <style lang="scss" scoped>
 @import '@/assets/scss/layout.scss';
+
+</style>
+
+<style lang="scss">
+.light .router-tab .router-tab__header {
+    background-color: #fff;
+    border-color: #fff;
+}
+
+.dark .router-tab .router-tab__header {
+    background-color: #212224;
+    border-color: #212224;
+}
 </style>

pages/ems/base/ReadResultCloseMngPage.vue

@@ -129,10 +129,20 @@ let myPrgmId;
 export default {
   mixins: [mixinGlobal, resize],
   async asyncData(context) {
-    const myState = context.store.state;
+    // console.log('----DEBUG-----ReadResultCloseMngPage--asyncData:', Utility.setFormatDate(new Date(), "YYYYMMDD"));
+    try{
       myPrgmId = context.route.query.prgmId;
-    await context.store.commit("setActiveMenuInfo", myState.menuData[myPrgmId]);
+      const myState = context.store.state;
+      const activeMenuInfo = myState.menuData[myPrgmId];
+      myTitle = activeMenuInfo.menuNm;
+
+      // console.log('-----DEBUG----store.commit----setActiveMenuInfo:', activeMenuInfo);
+      await context.store.commit("setActiveMenuInfo", activeMenuInfo);
       myTitle = await myState.activeMenuInfo.menuNm;
+      // console.log('-----DEBUG----store.commit----setActiveMenuInfo---Compeleted:', myState.activeMenuInfo);
+    }catch(err){
+      // console.log('-----DEBUG----err', err);
+    }
   },
   meta: {
     title: () => {
@@ -206,18 +216,21 @@ export default {
       this.setPageData({ isFind: true });
     },
   },
-  async beforeCreate() {
+  beforeCreate() { 
+    // console.log('----DEBUG-----ReadResultCloseMngPage--beforeCreate:', Utility.setFormatDate(new Date(), "YYYYMMDD"));
     myPrgmId = this.$route.query.prgmId;
-    await this.$store.dispatch("chkOpenTabList", {
+    const context = {
       key: "create",
       prgmId: myPrgmId,
       defaultData: defaultData,
-    });
+    };
+    this.$store.dispatch("chkOpenTabList", context);
   },
   mounted() {
     this.init();
   },
-  created() {},
+  created() { 
+  },
   methods: {
     ...mapMutations({
       setPageData: "setPageData",

pages/ems/effc/EnrgEffcEqpmDetlMntrPage.vue

@@ -589,6 +589,39 @@ export default {
 			});
 
 			const _this = this;
+			class CustomButton {
+				constructor(props) {
+					const { grid, rowKey, columnInfo } = props;
+
+					const gridData = grid.store.data.rawData;
+					const value = gridData[rowKey][columnInfo.name];
+
+					this.disabled = columnInfo.renderer.options.disabled || false;
+					const elDiv = document.createElement('div');
+					if (value != null) {
+						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);
+					} else {
+						elDiv.innerHTML = `<span></span>`;
+					}
+
+					this.el = elDiv;
+
+				}
+				getElement() {
+					return this.el;
+				}
+				getValue() {
+					// return this.el.value;
+				}
+				mounted() {
+					// this.el.focus();
+				}
+			}
 			const myColumns = [
 				{
 					header: 'FAB',
@@ -633,7 +666,13 @@ export default {
 				{
 					header: '가이드명',
 					name: 'gdIdxNm',
-					width: 200,
+					width: 250,
+					renderer: {
+						type: CustomButton,
+						options: {
+							value: "보기",
+						}
+					},
 				},
 				{
 					header: '주의',
@@ -668,6 +707,12 @@ export default {
 					name: 'ngCnt',
 					align: 'right',
 					width: 80,
+					renderer: {
+						type: CustomButton,
+						options: {
+							value: "보기",
+						}
+					},
 				},
 			];
 

pages/ems/effc/EnrgMapPage.vue

@@ -239,7 +239,7 @@ export default {
 			try{
 				await this.getChartData();
 			}catch(err){
-				this.initTestChart();
+				// this.initTestChart();
 			}
 			this.setPageData({
 				isFind: false,

pages/ems/effc/EnrgUseTotSummPage.vue

@@ -442,7 +442,7 @@ export default {
 
           chartOption = getGaugeChartOption({
             title: chartKey,
-            value: 75,
+            value: currentChartData["effcRt"],
             isDarkMode: this.isDarkMode,
             backgroundRadius: 89,
           });

pages/ems/effc/EqpmIndMntrPage.vue

@@ -613,20 +613,34 @@ export default {
         apiKey = "selectMonthlyEnrgUseMainIdx";
         apiKey2 = "selectMonthlyEnrgUseMainIdxPageTotal";
       }
-      var res = await this.postApiReturn({
+
+      
+      var [res, res2] = await Promise.all([
+        this.postApiReturn({
           apiKey: apiKey,
           resKey: "eqpmIndMntrData",
           sendParam: params,
-      });
-
-      var res2 = await this.postApiReturn({
+        }),
+        this.postApiReturn({
           apiKey: apiKey2,
           resKey: "eqpmIndMntrPageTotal",
           sendParam: params,
-      });
+        }),
+      ]);
+
+      // var res = await this.postApiReturn({
+      //   apiKey: apiKey,
+      //   resKey: "eqpmIndMntrData",
+      //   sendParam: params,
+      // });
+
+      // var res2 = await this.postApiReturn({
+      //   apiKey: apiKey2,
+      //   resKey: "eqpmIndMntrPageTotal",
+      //   sendParam: params,
+      // });
 
       this.totalCount = res2[0].totalcount;
-
       this.enrgUseMainIdxDesc = await this.postApiReturn({
         apiKey: "selectEnrgUseMainIdxDesc",
         resKey: "eqpmIndMntrData",
@@ -642,14 +656,12 @@ export default {
           no: i + 1,
         });
       }
-
       this.setGridData({
         gridKey: this.gridName,
         value: newRes,
       });
 
       this.loadGrid = true;
-
       this.makeTooltip();
     },
     async search() {

store/index.js

@@ -513,6 +513,7 @@ export const actions = {
 				//commit("pageInit", {});
 				break;
 			case 'create':
+				// console.log("---------DEBUGmyPrgmId:", myPrgmId);
 				if (!list.some(it => it === myPrgmId)) {
 					// console.log("클릭 한 메뉴가 기존 목록에 없다 => 새로 push"); // & 초기화 세팅
 					localStorage.setItem('pageData', JSON.stringify(state.pageData));