fix bugs 47, 145

Reviewed-on: #51

assets/scss/common/input.scss

@@ -50,6 +50,7 @@
   }
 }
 
+
 .v-input__custom {
   .v-input__slot {
 
@@ -149,6 +150,11 @@
 .v-input {
   margin-top: 0 !important;
   padding-top: 0 !important;
+  &.v-text-field--outlined {
+    fieldset {
+      top: -4px
+    }
+  }
 }
 
 .v-input__append-inner {
@@ -449,7 +455,7 @@ input[type="checkbox"] {
       transform: none;
 
       &.mdi:before {
-        font-size: 16px;
+        font-size: 20px;
       }
 
       @if $theme ==dark {

assets/scss/var.scss

@@ -177,13 +177,10 @@ $config: (
     v-header-border: #424242,
     v-chart-border: #424242,
     v-sidebar-border: #303030,
-<<<<<<< Updated upstream
     ant-checkbox-bg: #212224,
     ant-checkbox-border: #424242,
-=======
     ant-btn-popup-bg: #212224,
     ant-btn-popup-color: #FFFFFFD9,
->>>>>>> Stashed changes
   ),
   light: (w-g5: $--color-gray_555,
     g5-w: $--color-white,
@@ -324,12 +321,9 @@ $config: (
     v-header-border: #D9D9D9,
     v-chart-border: #D9D9D9,
     v-sidebar-border: #F0F0F0,
-<<<<<<< Updated upstream
     ant-checkbox-bg: #FFFFFF,
     ant-checkbox-border: #D9D9D9,
-=======
     ant-btn-popup-bg: #FFFFFF,
     ant-btn-popup-color: #000000E0,
->>>>>>> Stashed changes
   ),
 );

components/common/chartoptions/SankeyChart.js

@@ -0,0 +1,46 @@
+// Sankey chart options
+export function getSankeyChartOption({ isDarkMode = false, data = [], links = [] }) {
+  const chartOption = {
+    backgroundColor: '#FFFFFF',
+    series: [
+      {
+        data,
+        links,
+
+        layoutIterations: 0,
+        type: 'sankey',
+        left: 25.0,
+        top: 20.0,
+        right: 120,
+        bottom: 50.0,
+        nodeGap: 10,
+        nodeAlign: 'left',
+        lineStyle: {
+          color: 'source',
+          curveness: 0.5,
+        },
+        // nodeWidth:10,
+        // triggerEvent: true,
+        itemStyle: {
+          //color: '#1f77b4',
+          //borderColor: '#1f77b4'
+        },
+        label: {
+          color: isDarkMode
+            ? '#FFFFFFD9'
+            : '#000000E0',
+          // fontFamily: 'Arial',
+          fontSize: 14,
+        },
+      },
+    ],
+    tooltip: {
+      trigger: 'item',
+    },
+  };
+
+  return chartOption;
+}
+
+export default getSankeyChartOption;
+

components/common/modal/EqpmSelectPop.vue

@@ -404,8 +404,8 @@ export default {
 				rowHeight: 'auto',
 			};
 			if (this.isMulti) {
-				// myOptions['rowHeaders'] = [{ type: 'checkbox' }];
+				myOptions['rowHeaders'] = [{ type: 'checkbox' }];
-				// myOptions['rowHeight'] = 'auto';
+				myOptions['rowHeight'] = 'auto';
 			}
 
 
@@ -523,12 +523,11 @@ export default {
 
 
 			this.loadGrid = true;
-			// this.$nextTick(() => {
+			this.$nextTick(() => {
-			// 	if (this.isMulti) {
+				if (this.isMulti) {
-			// 		this.getChecked();
+					this.getChecked();
-			// 	}
+				}
-			// });
+			});
-
 		},
 		setUpdate() {
 			if (this.isMulti) {

components/common/select/SelectReadObj.vue

@@ -21,6 +21,7 @@
 				outlined
 				append-icon=""
 				:class="['v-select__custom', customClass]"
+				:menu-props="{ top: false, offsetY: true }"
 			><template v-slot:append>
 				<v-icon>$icoChevronDown</v-icon>
 				</template></v-select>

pages/comm/base/CalendarMngPage.vue

@@ -250,7 +250,6 @@ export default {
 				{
 					header: '요일',
 					name: 'dtNm',
-					align: 'center',
 					formatter({ value }) {
 						return value + '요일';
 					},
@@ -258,7 +257,6 @@ export default {
 				{
 					header: '구분',
 					name: 'hldyFg',
-					align: 'center',
 					essential: true,
 					formatter({ value }) {
 						return value == 1 ? '휴일' : '평일';

pages/ems/effc/EnrgMapPage.vue

@@ -14,9 +14,9 @@
 							<!-- 대상일 -->
 							<component :is="'Datepicker'" :parentPrgmId="myPrgmId" :label="'대상일'" :labelCols="3" customClass="datepicker-large" />
 						</v-col>
-						<v-col :cols="4" class="text-right">
+						<v-col :cols="6" class="text-right">
-							<BtnSearch @click="search" size="large" />
 							<!-- 조회버튼 -->
+							<BtnSearch @click="search" size="large" />
 						</v-col>
 					</v-row>
 				</v-card>
@@ -47,8 +47,13 @@
 					</v-row>
 					<div class="px-5" style="height: 80%">
 						<div ref="chartParent" class="w100 h100">
-							<component :ref="chartName" class="w100 h100" :is="loadChart ? 'Chart' : null" :parentPrgmId="myPrgmId"
+							<component 
-								:chartName="chartName" />
+								:ref="chartName" 
+								class="w100 h100" 
+								:is="loadChart ? 'Chart' : null" 
+								:parentPrgmId="myPrgmId"
+								:chartName="chartName" 
+							/>
 						</div>
 					</div>
 				</v-card>
@@ -68,6 +73,8 @@ import SelectBox from '@/components/common/select/SelectBox';
 import DateUtility from '~/plugins/dateUtility';
 import Chart from '~/components/common/Chart';
 
+import getSankeyChartOption from "~/components/common/chartoptions/sankeyChart";
+
 let myTitle;
 let myPrgmId;
 
@@ -101,6 +108,8 @@ export default {
 			selectValue01: null,
 			loadChart: false,
 			chartName: 'sankeyChart',
+			sankeyChartData: [],
+			sankeyChartLinks: []
 		};
 	},
 	computed: {
@@ -148,6 +157,16 @@ export default {
 				});
 			}
 		},
+		isDarkMode(newVal) {
+			this.setChartOption({ 
+				chartKey: this.chartName, 
+				value: getSankeyChartOption({
+						isDarkMode: newVal,
+						data: this.sankeyChartData,
+						links: this.sankeyChartLinks
+					})
+			});
+		},
 	},
 	async beforeCreate() {
 		myPrgmId = this.$route.query.prgmId;
@@ -159,9 +178,6 @@ export default {
 	},
 	async created() { },
 	async mounted() {
-		// this.initTest();
-		// return;
-
 		this.init();
 		// document.querySelector('.icon_arrow').style.width = document.querySelector('.iconArrowCols').clientWidth-20 + "px";
 	},
@@ -176,10 +192,8 @@ export default {
 		...mapActions({
 			getCodeList: 'modules/search/getCodeList',
 		}),
-		initTest() {
+		initTestChart() {
-			
+			const randomNumber = n => Math.floor(Math.random() * n) + 1;
-		const randomNumber = n => Math.floor(Math.random() * n) + 1;
-
 			const makeData = [
 				{ name: 'A' },
 				{ name: 'B' },
@@ -205,45 +219,13 @@ export default {
 				]);
 			}
 
-			const chartOption = {
+			this.sankeyChartData = makeData;
-				backgroundColor: '#FFFFFF',
+			this.sankeyChartLinks = makeLinks;
-				series: [
+			const chartOption = getSankeyChartOption({
-					{
+				isDarkMode: this.isDarkMode,
-						layoutIterations: 0,
+				data: makeData,
-						type: 'sankey',
+				links: makeLinks
-						left: 25.0,
+			});
-						top: 20.0,
-						right: 120,
-						bottom: 50.0,
-						// nodeWidth:10,
-						nodeGap: 10,
-						nodeAlign: 'left',
-						data: makeData,
-						links: makeLinks,
-						lineStyle: {
-							color: 'source',
-							curveness: 0.5,
-						},
-						// triggerEvent: true,
-						itemStyle: {
-							//color: '#1f77b4',
-							//borderColor: '#1f77b4'
-						},
-						label: {
-							color: this.isDarkMode
-								? 'rgba(250,250,250,0.7)'
-								: 'rgba(0,0,0,0.7)',
-							fontFamily: 'Arial',
-							fontSize: 12,
-						},
-					},
-				],
-				tooltip: {
-					trigger: 'item',
-				},
-			};
-
-			
 			this.setChartOption({ chartKey: this.chartName, value: chartOption });
 			this.$nextTick(() => {
 				this.loadChart = true;
@@ -254,7 +236,11 @@ export default {
 			this.setFromDt();
 		},
 		async search() {
-			await this.getChartData();
+			try{
+				await this.getChartData();
+			}catch(err){
+				this.initTestChart();
+			}
 			this.setPageData({
 				isFind: false,
 			});
@@ -458,43 +444,13 @@ export default {
 				};
 			}
 
-			const chartOption = {
+			this.sankeyChartData = makeData;
-				backgroundColor: '#FFFFFF',
+			this.sankeyChartLinks = makeLinks;
-				series: [
+			const chartOption = getSankeyChartOption({
-					{
+				isDarkMode: this.isDarkMode,
-						layoutIterations: 0,
+				data: makeData,
-						type: 'sankey',
+				links: makeLinks
-						left: 25.0,
+			});
-						top: 20.0,
-						right: 120,
-						bottom: 50.0,
-						// nodeWidth:10,
-						nodeGap: 10,
-						nodeAlign: 'left',
-						data: makeData,
-						links: makeLinks,
-						lineStyle: {
-							color: 'source',
-							curveness: 0.5,
-						},
-						// triggerEvent: true,
-						itemStyle: {
-							//color: '#1f77b4',
-							//borderColor: '#1f77b4'
-						},
-						label: {
-							color: this.isDarkMode
-								? 'rgba(250,250,250,0.7)'
-								: 'rgba(0,0,0,0.7)',
-							fontFamily: 'Arial',
-							fontSize: 12,
-						},
-					},
-				],
-				tooltip: {
-					trigger: 'item',
-				},
-			};
 
 			this.setChartOption({ chartKey: this.chartName, value: chartOption });