fix bugs 47, 145

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) {

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 });