sk_fems_ui commit

plugins/README.md

@@ -0,0 +1,7 @@
+# PLUGINS
+
+**This directory is not required, you can delete it if you don't want to use it.**
+
+This directory contains Javascript plugins that you want to run before mounting the root Vue.js application.
+
+More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/plugins).

plugins/axios.js

@@ -0,0 +1,11 @@
+import $cookie from 'vue-cookie';
+
+export default ({ $axios, res }) => {
+	$axios.onRequest(config => {
+
+		config.headers.common['AUTHENTICATION_FEMS_SESSION'] = `${$cookie.get(
+			'FEMS_SESSION',
+		)}`;
+		// config.headers['set1-cookie'] = `${$cookie.get('FEMS_SESSION',)}`;
+	});
+};

plugins/dateUtility.js

@@ -0,0 +1,161 @@
+const dayjs = require('dayjs');
+
+const DateUtility = () => {
+	/*
+  //  * 
+  //  * @param {*} date 기준일
+  //  * @param {*} val 계산일수
+  //  * @param {*} type 날짜 포멧
+  //  * @returns 
+  */
+	const addDate = (val, type, date) => {
+		let returnDt = null;
+		const myDate = !date ? dayjs() : dayjs(date);
+		returnDt = myDate.add(val || 0, 'day');
+		if (type === 'd') returnDt = returnDt.format('YYYYMMDD');
+		else if (type) returnDt = returnDt.format(type);
+		return returnDt;
+	};
+
+	/*
+  //  * 
+  //  * @param {*} date 기준일
+  //  * @param {*} val 계산주수
+  //  * @param {*} type 날짜 포멧
+  //  * @returns 
+  */
+	const addWeek = (val, type, date) => {
+		let returnDt = null;
+		const myDate = !date ? dayjs() : dayjs(date);
+		returnDt = myDate.add(val || 0, 'week');
+		if (type === 'd') returnDt = returnDt.format('YYYYMMDD');
+		else if (type) returnDt = returnDt.format(type);
+		return returnDt;
+	};
+
+	/*
+  //  * 
+  //  * @param {*} date 기준일
+  //  * @param {*} val 계산월수
+  //  * @param {*} type 날짜 포멧
+  //  * @returns 
+  */
+	const addMonth = (val, type, date) => {
+		let returnDt = null;
+		const myDate = !date ? dayjs() : dayjs(date);
+		returnDt = myDate.add(val || 0, 'month');
+		//월말인 경우 월을 더할 경우 해당월의 마지막날로 설정되도록 처리
+		if (
+			myDate.format('YYYYMMDD') === myDate.endOf('month').format('YYYYMMDD')
+		) {
+			returnDt = returnDt.endOf('month');
+		}
+		if (type === 'd') returnDt = returnDt.format('YYYYMMDD');
+		else if (type) returnDt = returnDt.format(type);
+		return returnDt;
+	};
+
+	/*
+  //  * 
+  //  * @param {*} date 기준일
+  //  * @param {*} val 계산연수
+  //  * @param {*} type 날짜 포멧
+  //  * @returns 
+  */
+	const addYear = (val, type, date) => {
+		let returnDt = null;
+		const myDate = !date ? dayjs() : dayjs(date);
+		returnDt = myDate.add(val || 0, 'year');
+		if (type === 'd') returnDt = returnDt.format('YYYYMMDD');
+		else if (type) returnDt = returnDt.format(type);
+		return returnDt;
+	};
+
+	/*
+  //  * 
+  //  * @param {*} fromDt 시작일
+  //  * @param {*} toDt 종료일
+  //  * @param {*} type 기준
+  //  * @returns 
+  */
+	const diff = (fromDt, toDt, type) => {
+		let returnDt = null;
+		if (fromDt && toDt) {
+			const myFromDt = fromDt === 'today' ? dayjs() : dayjs(fromDt);
+			const myToDt = toDt === 'today' ? dayjs() : dayjs(toDt);
+			let myType = 'days';
+			switch (type) {
+				case 'w':
+					myType = 'weeks';
+					break;
+				case 'm':
+					myType = 'months';
+					break;
+				case 'y':
+					myType = 'year';
+					break;
+				case 'd':
+					myType ='day';
+					break;
+				default:
+			}
+			returnDt = myToDt.diff(myFromDt, myType);
+		}
+		return returnDt;
+	};
+
+	/*
+  //  * 
+  //  * @param {*} d 기준일
+  //  * @param {*} f 날짜 포멧
+  //  * @returns 
+  */
+	const format = (d, f) => {
+		let returnDt = null;
+		const myDate = !d ? dayjs() : dayjs(d);
+		const myFormat = f || 'YYYYMMDD';
+		returnDt = myDate.format(myFormat);
+		return returnDt;
+	};
+
+	/*
+  //  * 
+  //  * @param {*} strDate 기준일
+  //  * @returns 
+  */
+	const getDate = strDate => {
+		const myDate = !strDate ? dayjs() : dayjs(strDate);
+		return myDate
+			.hour(0)
+			.minute(0)
+			.second(0);
+	};
+
+	/*
+  //  * 
+  //  * @param {*} date 기준일
+  //  * @param {*} type 날짜 포멧
+  //  * @returns 
+  */
+	const getLastDay = (type, date) => {
+		let returnDt = null;
+		const myDate = !date || date.length < 4 ? dayjs() : dayjs(date);
+		returnDt = myDate.endOf('month');
+		if (type === 'd') returnDt = returnDt.format('YYYYMMDD');
+		else if (type) returnDt = returnDt.format(type);
+		return returnDt;
+	};
+
+	return {
+		addDate, // 날짜 더하기
+		addWeek, // 주 더하기
+		addMonth, // 월 더하기
+		addYear, // 년도 더하기
+		diff, // 두 날짜의 차이 구하기
+		format, // 날짜 값을 포맷팅하기
+		getDate, // 스트링 날자 값을 data type로 변환하기
+		getLastDay, // 해당 년/월의 마지막 날짜 구하기
+	};
+};
+
+export default DateUtility();

plugins/datepicker.js

@@ -0,0 +1,5 @@
+import Vue from 'vue';
+import { DatePicker } from 'tui-date-picker';
+import 'tui-date-picker/dist/tui-date-picker.min.css';
+
+Vue.component('tui-datepicker', DatePicker);

plugins/eChart.js

@@ -0,0 +1,54 @@
+import Vue from 'vue';
+import { use } from 'echarts/core';
+import VChart from 'vue-echarts';
+import { CanvasRenderer, SVGRenderer } from 'echarts/renderers';
+import {
+	PieChart,
+	LineChart,
+	BarChart,
+	GaugeChart,
+	SankeyChart,
+	SunburstChart,
+	TreemapChart,
+	TreeChart,
+	ScatterChart,
+} from 'echarts/charts';
+import 'echarts/lib/component/markArea';
+import 'echarts/lib/component/markLine';
+import 'echarts/lib/component/markPoint';
+import 'echarts/lib/component/dataZoom';
+import 'echarts/lib/component/toolbox';
+import {
+	TitleComponent,
+	TooltipComponent,
+	LegendComponent,
+	GridComponent,
+	DatasetComponent,
+	ToolboxComponent,
+	VisualMapComponent,
+	// ToolboxComponent, // 그래프 이미지 save
+} from 'echarts/components';
+
+use([
+	PieChart,
+	LineChart,
+	BarChart,
+	GaugeChart,
+	SankeyChart,
+	SunburstChart,
+	TreemapChart,
+	TreeChart,
+	ScatterChart,
+	CanvasRenderer,
+	SVGRenderer,
+	TitleComponent,
+	TooltipComponent,
+	LegendComponent,
+	GridComponent,
+	DatasetComponent,
+	ToolboxComponent,
+	VisualMapComponent,
+	// ToolboxComponent, // 그래프 이미지 save
+]);
+
+Vue.component('VChart', VChart);

plugins/grid.js

@@ -0,0 +1,5 @@
+import Vue from 'vue';
+import { Grid } from '@toast-ui/vue-grid';
+import 'tui-grid/dist/tui-grid.css';
+
+Vue.component('tui-grid', Grid);

plugins/gridUtility.js

@@ -0,0 +1,397 @@
+// 그리드 에디터 : 숫자타입
+export class CustomNumberEditor {
+	constructor(props) {
+		const { grid, rowKey, columnInfo } = props;
+		const el = document.createElement('input');
+		const numberOption = columnInfo.editor.options;
+
+		this.minValue = numberOption.min;
+		this.maxValue = numberOption.max;
+		this.propsValue = props.value;
+		this.colName = columnInfo.name;
+
+		el.classList.add('tui-grid-content-text');
+		el.type = 'number';
+		el.value = props.value || 0;
+		this.el = el;
+		this.grid = grid;
+		this.rowKey = rowKey;
+
+		this.el.addEventListener('change', () => {
+			grid.setValue(rowKey, columnInfo.name, this.getcheckValue());
+		});
+	}
+	getElement() {
+		return this.el;
+	}
+	getValue() {
+		return this.el.value;
+	}
+	getcheckValue() {
+		let returnVal;
+		const editVal = this.grid.getValue(this.rowKey, this.colName);
+		if (this.minValue != undefined && typeof this.maxValue != undefined) {
+			if (
+				Number(editVal) >= Number(this.minValue) &&
+				Number(editVal) <= Number(this.maxValue)
+			) {
+				returnVal = editVal;
+			} else {
+				returnVal = this.propsValue;
+			}
+		} else {
+			returnVal = editVal;
+		}
+		return returnVal;
+	}
+	mounted() {
+		this.el.select();
+	}
+}
+export class CustomCalcNumberEditor {
+	constructor(props) {
+		const { grid, rowKey, columnInfo } = props;
+		const el = document.createElement('input');
+		const calcOptions = columnInfo.editor.options;
+
+		this.calculation = calcOptions.calculation; // 연산자 String
+		this.calcColumns = calcOptions.calcColumns; // 연산해야할 컬럼이름 Array
+		this.targetColumn = calcOptions.targetColumn; // 연산결과 컬럼이름 String
+
+		el.classList.add('tui-grid-content-text');
+		el.type = 'number';
+		el.value = props.value;
+		this.el = el;
+		this.grid = grid;
+		this.rowKey = rowKey;
+
+		this.el.addEventListener('change', () => {
+			grid.setValue(rowKey, this.targetColumn, this.getCalculation());
+
+			grid.setValue(rowKey, 'rowStat', 'U');
+			grid.addRowClassName(rowKey, 'row-insert');
+		});
+	}
+	getElement() {
+		return this.el;
+	}
+	getValue() {
+		return this.el.value;
+	}
+	getCalculation() {
+		let returnVal;
+		switch (this.calculation) {
+			case 'sum':
+				returnVal = 0;
+				this.calcColumns.forEach(columnNm => {
+					if (this.grid.getValue(this.rowKey, columnNm) == null) {
+						returnVal += 0;
+					} else {
+						returnVal +=
+							parseInt(this.grid.getValue(this.rowKey, columnNm)) || 0;
+					}
+				});
+				break;
+			case 'double':
+				returnVal = 1;
+				this.calcColumns.forEach(columnNm => {
+					returnVal *= parseInt(this.grid.getValue(this.rowKey, columnNm));
+				});
+				break;
+			case 'division':
+				returnVal = 2;
+				var a = parseInt(this.grid.getValue(this.rowKey, this.calcColumns[0]));
+				var b = parseInt(this.grid.getValue(this.rowKey, this.calcColumns[1]));
+				returnVal = a / b;
+				if (returnVal == Infinity) {
+					returnVal = 0;
+				}
+				break;
+		}
+		return returnVal;
+	}
+	mounted() {
+		this.el.select();
+	}
+}
+
+export class CustumChecbox {
+	constructor(props) {
+		const el = document.createElement('input');
+		const { grid, rowKey, columnInfo } = props;
+
+		el.type = 'checkbox';
+		el.value = props.value;
+		this.el = el;
+		this.grid = grid;
+		this.rowKey = rowKey;
+		this.propsVal = props;
+		this.onlyone = columnInfo.renderer.options.onlyone || false;
+		this.disabled = columnInfo.renderer.options.disabled || false;
+		this.colName = columnInfo.name;
+
+		this.render(props);
+		if (!this.disabled) {
+			this.el.addEventListener('change', () => {
+				const originValue = el.value;
+				const changedValue = el.checked ? '1' : '0';
+
+				grid.setValue(rowKey, columnInfo.name, changedValue);
+				if (originValue == changedValue) {
+					grid.removeRowClassName(rowKey, 'row-insert');
+					grid.setValue(rowKey, 'rowStat', null);
+				} else {
+					grid.setValue(rowKey, 'rowStat', 'U');
+					grid.addRowClassName(rowKey, 'row-insert');
+				}
+
+				// onlyone 처리 추가
+				if (this.onlyone) {
+					if (changedValue == '1') {
+						this.grid.getData().forEach(row => {
+							if (this.rowKey != row.rowKey && row[this.colName] == '1') {
+								this.grid.setValue(row.rowKey, this.colName, '0');
+								this.grid.setValue(row.rowKey, 'rowStat', 'U');
+								this.grid.addRowClassName(row.rowKey, 'row-insert');
+							}
+						});
+					}
+				}
+			});
+		}
+	}
+	getElement() {
+		return this.el;
+	}
+	render(props) {
+		const val = props.value;
+		this.el.checked = val == '1' ? true : false;
+	}
+}
+
+export class CustumButton {
+	constructor(props) {
+		const el = document.createElement('button');
+		const { grid, rowKey, columnInfo } = props;
+
+		el.classList.add('v-btn-bg__blue');
+		el.style.width = '90%';
+		// el.type = "button";
+		// el.value = props.value;
+		el.innerText = props.value;
+		this.el = el;
+	}
+	getElement() {
+		return this.el;
+	}
+	getValue() {
+		// return this.el.value;
+	}
+	mounted() {
+		// this.el.focus();
+	}
+}
+export class CustumInputButton {
+	constructor(props) {
+		const el = document.createElement('div');
+		const elInput = document.createElement('input');
+		const elButton = document.createElement('button');
+		const { grid, rowKey, columnInfo } = props;
+
+		el.classList.add('tui-grid-cell-content');
+		el.style.display = 'flex';
+		elInput.type = 'text';
+		elInput.style.width = 'calc(100% - 30px)';
+		elInput.style.color = 'white';
+		elInput.classList.add('tui-grid-content-text');
+		elButton.classList.add('v-btn-bg__blue');
+		elButton.style.width = '30px';
+		elButton.style.height = '30px';
+		// el.type = "button";
+		// el.value = props.value;
+		elInput.value = props.value;
+		el.append(elInput);
+		el.append(elButton);
+		this.el = el;
+	}
+	getElement() {
+		return this.el;
+	}
+	getValue() {
+		// return this.el.value;
+	}
+	mounted() {
+		// this.el.focus();
+	}
+}
+
+export class NewCustomRenderer {
+	constructor(props) {
+		//const { min, max } = props.columnInfo.renderer.options;
+		// console.log('props: %o', props);
+		
+		const el = document.createElement('input');
+		const { grid, rowKey, columnInfo } = props;
+		let gridOriginData = grid.dataManager.getOriginData();
+		// console.log('columnInfo', columnInfo.renderer.options);
+		this.el = el;
+		this.grid = grid;
+		this.rowKey = rowKey;
+		this.propsVal = props;
+		this.disabled = false;
+		if(columnInfo.renderer.options != undefined){
+			this.disabled = columnInfo.renderer.options.disabled == undefined ? false : columnInfo.renderer.options.disabled;
+			// this.onlyone = columnInfo.renderer.options.onlyone == undefined ? false : columnInfo.renderer.options.onlyone;
+			// this.onlyone = columnInfo.renderer.options.onlyone || false;
+		}
+		
+		this.colName = columnInfo.name;
+		if (
+			props.grid.store.data.rawData[props.rowKey].addInfoDataKind == 'FG'
+		) {
+			el.type = 'checkbox';
+		} else {
+			el.type = 'text';
+
+			$(el).addClass('tui-grid-cell-content');
+			$(el).css('text-align', 'center');
+		}
+		this.render(props);
+		if(!this.disabled){
+			
+			this.el.addEventListener('click', (event) => {			
+				// const originValue = el.value;
+				let originValue = null;
+				if(el.type=='checkbox'){
+					let changedValue = null;
+					if (el.checked) {
+						changedValue = 1;
+					} else {
+						changedValue = 0;
+						if(gridOriginData[rowKey] != undefined && gridOriginData[rowKey][this.colName] != '1'){
+							changedValue = gridOriginData[rowKey][this.colName];
+						}
+						
+					}
+					grid.setValue(rowKey, columnInfo.name, changedValue);
+					if(gridOriginData[rowKey] != undefined){
+						originValue = gridOriginData[rowKey][columnInfo.name];
+					}
+					if(originValue == changedValue){
+						grid.removeRowClassName(rowKey, 'row-insert');
+						grid.setValue(rowKey, 'rowStat', null);
+					}else{
+						grid.setValue(rowKey, 'rowStat', 'U');
+						grid.addRowClassName(rowKey, 'row-insert');
+					}
+				}
+			})
+		}
+	}
+
+	getElement() {
+		return this.el;
+	}
+
+	render(props) {
+		// console.log('render___this.el.type', this.el.type);
+		if (this.el.type == 'checkbox') {
+			if (props.value == 1) {
+				this.el.checked = true;
+			} else {
+				this.el.checked = false;
+			}
+		}
+		this.el.value = props.value;					
+	}
+}
+
+export class NewCustomEditor {
+	constructor(props) {
+		const { grid, rowKey, columnInfo } = props;
+		let gridOriginData = grid.dataManager.getOriginData();
+		this.gridOriginData = gridOriginData;
+		this.rowKey = rowKey;
+		this.columnInfo = columnInfo;
+		this.grid = grid;
+		const el = document.createElement('input');
+		if (
+			props.grid.store.data.rawData[props.rowKey].addInfoDataKind == 'FG'
+		) {
+			el.type = 'checkbox';
+			if (props.value == '1') {
+				el.checked = true;
+			} else {
+				el.checked = false;
+			}
+			el.addEventListener('change', (ev) => {
+				// console.log('props: %o', ev);
+				if (ev.target.checked) {
+					ev.target.value = 1;
+					
+				} else {
+					ev.target.value = 0
+					if(this.gridOriginData[this.rowKey] != undefined && this.gridOriginData[this.rowKey][this.columnInfo.name] != '1'){
+						ev.target.value = this.gridOriginData[this.rowKey][this.columnInfo.name];
+					}
+				}
+				let originValue = null;
+				let changedValue = ev.target.value;
+				// changedValue = this.el.value == null ? null : 0; 
+				if(this.gridOriginData[this.rowKey] != undefined){
+					originValue = this.gridOriginData[this.rowKey][this.columnInfo.name] == null ? 0 : this.gridOriginData[this.rowKey][this.columnInfo.name];
+				}
+				if(originValue == changedValue){
+					this.grid.removeRowClassName(this.rowKey, 'row-insert');
+					this.grid.setValue(this.rowKey, 'rowStat', null);
+				}else{
+					this.grid.setValue(this.rowKey, 'rowStat', 'U');
+					this.grid.addRowClassName(this.rowKey, 'row-insert');
+				}
+			});
+		} else {
+			el.type = 'text';
+			if (props.formattedValue == 'NUM') {
+				el.oninput = function(event) {
+					var regExp=/[^0-9]/g;
+          if(event.data != null){
+            if(event.data.match(regExp)){
+              event.target.value = event.target.value.replace(regExp, '');
+            }
+          }
+				};
+			}
+			$(el).addClass('tui-grid-content-text');
+		}
+		
+		// console.log('props: %o', props);
+		// console.log('el: %o', el);
+		this.el = el;
+
+		this.render(props);
+	}
+
+	getElement() {
+		return this.el;
+	}
+
+	getValue() {
+		return this.el.value;
+	}
+
+	render(props) {
+		if (this.el.type == 'checked') {
+			this.el.value = props.value;
+		} else {
+			this.el.value = String(props.value);
+		}
+		//console.log('props: %o', props);
+	}
+
+	mounted() {
+		if (this.el.type == 'checkbox') {
+			$(this.el.parentElement).css('text-align', 'center');
+		}
+		this.el.select();
+	}
+}

plugins/jqxGrid.js

@@ -0,0 +1,5 @@
+import Vue from 'vue';
+import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
+import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
+
+Vue.component('JqxGrid', JqxGrid);

plugins/message.js

@@ -0,0 +1,124 @@
+export default (context, inject) => {
+	const RE_TOKEN_LIST_VALUE = new RegExp(/^(?:\d)+/);
+	const RE_TOKEN_NAMED_VALUE = new RegExp(/^(?:\w)+/);
+
+	const isObject = obj => {
+		return obj !== null && typeof obj === 'object';
+	};
+
+	const parse = msg => {
+		let tokens = [];
+		let position = 0;
+
+		let text = '';
+		while (position < msg.length) {
+			let char = msg[position++];
+			if (char === '{') {
+				if (text) {
+					tokens.push({ type: 'text', value: text });
+				}
+
+				text = '';
+				let sub = '';
+				char = msg[position++];
+				while (char !== undefined && char !== '}') {
+					sub += char;
+					char = msg[position++];
+				}
+				const isClosed = char === '}';
+
+				const type = RE_TOKEN_LIST_VALUE.test(sub)
+					? 'list'
+					: isClosed && RE_TOKEN_NAMED_VALUE.test(sub)
+					? 'named'
+					: 'unknown';
+
+				tokens.push({ value: sub, type });
+			} else if (char === '%') {
+				// when found rails i18n syntax, skip text capture
+				if (msg[position] !== '{') {
+					text += char;
+				}
+			} else {
+				text += char;
+			}
+		}
+		text && tokens.push({ type: 'text', value: text });
+
+		return tokens;
+	};
+
+	const compile = (tokens, values) => {
+		const compiled = [];
+		let index = 0;
+		const mode = Array.isArray(values)
+			? 'list'
+			: isObject(values)
+			? 'named'
+			: 'unknown';
+
+		if (mode === 'unknown') {
+			return compiled;
+		}
+
+		while (index < tokens.length) {
+			const token = tokens[index];
+			switch (token.type) {
+				case 'text':
+					compiled.push(token.value);
+					break;
+				case 'list':
+					compiled.push(values[parseInt(token.value, 10)]);
+					break;
+				case 'named':
+					if (mode === 'named') {
+						compiled.push(values[token.value]);
+					} else {
+						if (process.env.NODE_ENV !== 'production') {
+							console.log(
+								`Type of token '${token.type}' and format of value '${mode}' don't match!`,
+							);
+						}
+					}
+					break;
+				case 'unknown':
+					if (process.env.NODE_ENV !== 'production') {
+						console.log("Detect 'unknown' type of token!");
+					}
+					break;
+			}
+			index++;
+		}
+
+		return compiled;
+	};
+
+	const m = (codeId, def, params) => {
+		let tokens = [];
+		let compiled = [];
+		let returnMsg = '';
+		let dicList = null,
+			userLocale;
+
+		if (context.$auth && context.$auth.user) {
+			dicList = context.$auth.user.dicList;
+			userLocale = context.$auth.user.user.userLocale;
+			returnMsg = dicList[userLocale][codeId];
+			if (params) {
+				tokens = parse(returnMsg);
+				// console.log("tokens: ", tokens);
+				compiled = compile(tokens, params);
+				// console.log("compiled: ", compiled);
+				returnMsg = compiled.join('');
+			}
+		}
+
+		if (!returnMsg) {
+			returnMsg = def;
+		}
+
+		return returnMsg;
+	};
+
+	inject('m', m);
+};

plugins/routerTab.js

@@ -0,0 +1,5 @@
+import Vue from 'vue';
+import RouterTab from 'vue-router-tab';
+import 'vue-router-tab/dist/lib/vue-router-tab.css';
+
+Vue.use(RouterTab);

plugins/utility.js

@@ -0,0 +1,357 @@
+import 'tui-pagination/dist/tui-pagination.css';
+
+const dayjs = require('dayjs');
+
+const dateRangeKey = {
+	CYC_YEAR: 'year',
+	CYC_MONTH: 'month',
+	CYC_DAY: 'day',
+	CYC_HOUR: 'hour',
+};
+
+const Utility = () => {
+	const getStore = self => {
+		const store = self.$store;
+		return store;
+	};
+	const testUtil = v => {
+		console.log('v = ', v);
+		return console.log(getStore(v));
+	};
+
+	const setFormatDate = (value, formatType) => {
+		if (value) {
+			const date = value === 'today' ? dayjs() : dayjs(value);
+			return value ? date.format(formatType) : null;
+		} else {
+			return null;
+		}
+	};
+
+	const setFormatDecimal = (value, num, defaultVal) => {
+		let returnVal = null;
+		if (defaultVal && !value) {
+			let defaultVal = '0.';
+			for (let i = 0; i < num; i++) {
+				defaultVal += '0';
+			}
+			returnVal = defaultVal;
+		} else if (value) {
+			returnVal = value.toFixed(num);
+		}
+		return returnVal;
+	};
+
+	const setFormatInt = value => {
+		// console.log(this.searchParam);
+		return value
+			? String(Math.floor(value)).replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+			: null;
+	};
+
+	const setFormatIntDecimal = (value, num) => {
+		let numComma, commaSplit;
+		let defaultVal = '0.';
+		for (let i = 0; i < num; i++) {
+			defaultVal += '0';
+		}
+		if (value) {
+			const vv = setFormatDecimal(value, num);
+			commaSplit = vv.split('.');
+			numComma = commaSplit[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+		}
+
+		return value ? numComma + '.' + commaSplit[1] : defaultVal;
+	};
+
+	const setFormatNumber = value => {
+		return value ? value.toLocaleString('ko-KR') : null;
+	};
+
+	const toFixedAndLocaleString = (value, num, locale) => {
+		num = num != null ? num : 2;
+		locale = locale != null ? locale : 'ko-KR';
+		value = value != null ? parseFloat(value) : 0;
+
+		var val1 = value.toLocaleString(locale).split('.')[0];
+		var val2 = value.toFixed(num).split('.')[1];
+
+		return val1 + '.' + val2;
+	};
+
+	// 기간 설정값 중 날짜가 30일 단위일 경우 비교 시 월로 계산
+	const setNewDefaultRange = (myCmCycle, defaultRange) => {
+		let myRange = null;
+		let rangeKey = null;
+		if (myCmCycle === 'CYC_DAY' && defaultRange % 30 === 0) {
+			// console.log("달 기준으로 간주");
+			myRange = defaultRange / 30;
+			rangeKey = 'month';
+		} else {
+			myRange = defaultRange;
+			rangeKey = dateRangeKey[myCmCycle];
+			// rangeKey = cmCycleList.filter(item => item.value === myCmCycle)[0]
+			//   .rangeKey;
+		}
+		return { key: rangeKey, range: myRange };
+	};
+	// 바라보는 스토어, 비교날짜, 포멧형식 을 넘겨주면, 스토어에 저장된 기간 범위 기준으로 조정날짜를 반환한다 => 비교날짜가 from 일 경우
+	const setAftertDate = (searchParam, compareDate, formatDate, formatTime) => {
+		let returnDt = null;
+		const myCmCycle = searchParam.cmCycle;
+		const compareDt = dayjs(compareDate);
+		const formatType = formatDate + (formatTime ? ' ' + formatTime : '');
+		const defaultRange = searchParam.defaultRange[myCmCycle];
+		const newDefault = setNewDefaultRange(myCmCycle, defaultRange);
+		const myRange = newDefault.range;
+		const rangeKey = newDefault.key;
+
+		switch (myCmCycle) {
+			case 'CYC_YEAR':
+			case 'CYC_MONTH':
+				// console.log("월 또는 연");
+				returnDt = compareDt.add(myRange - 1, rangeKey);
+				break;
+
+			case 'CYC_DAY':
+				// console.log("일");
+				if (
+					rangeKey === 'month' &&
+					compareDt.format('YYYYMMDD') ===
+						compareDt.startOf('month').format('YYYYMMDD')
+				) {
+					// console.log("들어온날이 첫째 날");
+					returnDt = compareDt.endOf('month');
+				} else if (
+					rangeKey === 'month' &&
+					compareDt.format('YYYYMMDD') ===
+						compareDt.endOf('month').format('YYYYMMDD')
+				) {
+					// console.log("들어온날이 마지말 날");
+					returnDt = compareDt
+						.add(myRange, rangeKey)
+						.endOf('month')
+						.subtract(1, rangeKey);
+				} else {
+					// console.log("그 외 날");
+					returnDt = compareDt.add(myRange, rangeKey).subtract(1, 'day');
+				}
+				break;
+
+			case 'CYC_HOUR':
+				// console.log("시간");
+				returnDt = compareDt.add(myRange, 'h').subtract(1, 's');
+				break;
+
+			default:
+				break;
+		}
+		// console.log(returnDt.format(formatType));
+		return returnDt.format(formatType);
+	};
+	// 바라보는 스토어, 비교날짜, 포멧형식 을 넘겨주면, 스토어에 저장된 기간 범위 기준으로 조정날짜를 반환한다 => 비교날짜가t to 일 경우
+	const setBeforetDate = (searchParam, compareDate, formatDate, formatTime) => {
+		let returnDt = null;
+		const myCmCycle = searchParam.cmCycle;
+		const compareDt = dayjs(compareDate);
+		const formatType = formatDate + (formatTime ? ' ' + formatTime : '');
+		const defaultRange = searchParam.defaultRange[myCmCycle];
+		const newDefault = setNewDefaultRange(myCmCycle, defaultRange);
+		let myRange = newDefault.range; //수정 --------------------
+		const rangeKey = newDefault.key;
+
+		switch (myCmCycle) {
+			case 'CYC_YEAR':
+			case 'CYC_MONTH':
+				// 수정 ---------------------------------
+				if (myRange === 'no limite') {
+					myRange = 12;
+				} else {
+					myRange = myRange;
+				}
+				// --------------------------------------
+				returnDt = compareDt.subtract(myRange - 1, rangeKey);
+				break;
+			case 'CYC_WEEK':
+				returnDt = compareDt.add(myRange, rangeKey);
+				break;
+			case 'CYC_DAY':
+				// console.log("일");
+				if (
+					rangeKey === 'month' &&
+					compareDt.format('YYYYMMDD') ===
+						compareDt.startOf('month').format('YYYYMMDD')
+				) {
+					// console.log("들어온날이 첫째 날");
+					returnDt = compareDt
+						.subtract(myRange, rangeKey)
+						.startOf('month')
+						.add(1, 'day');
+				} else if (
+					rangeKey === 'month' &&
+					compareDt.format('YYYYMMDD') ===
+						compareDt.endOf('month').format('YYYYMMDD')
+				) {
+					// console.log("들어온날이 마지말 날");
+					returnDt = compareDt.startOf('month');
+				} else {
+					// 수정 ---------------------------------
+					if (myRange === 'no limite') {
+						myRange = 30;
+					} else {
+						myRange = myRange;
+					}
+					// --------------------------------------
+					returnDt = compareDt.subtract(myRange, rangeKey).add(1, 'day');
+				}
+				break;
+			case 'CYC_HOUR':
+				// console.log("시간");
+				returnDt = compareDt.subtract(myRange, 'h').add(1, 'm');
+				break;
+
+			default:
+				break;
+		}
+		// console.log(returnDt.format(formatType));
+		return returnDt.format(formatType);
+	};
+
+	const toCamelCase = value => {
+		return value
+			.toLowerCase()
+			.replace(/[^a-zA-Z0-9]+(.)/g, (m, chr) => chr.toUpperCase());
+	};
+
+	// isLegend 값이 false 여도 response 차이데이타 세팅 시 legend 값을 넣어주면 상단에 노출됨
+	const defaultChartOption = isLegend => {
+		const defaultLegend = {
+			top: 'bottom',
+			left: 'center',
+			textStyle: {
+				color: '#95A0A9',
+				fontSize: 10,
+			},
+		};
+		return {
+			tooltip: {
+				trigger: 'axis',
+				confine: true,
+				axisPointer: {
+					type: 'shadow',
+				},
+			},
+			grid: {
+				left: '3%',
+				right: '4%',
+				top: '3%',
+				bottom: isLegend ? '30' : '0',
+				containLabel: true,
+			},
+			legend: isLegend ? Object.assign(defaultLegend, isLegend) : null,
+			yAxis: {
+				type: 'value',
+				axisLabel: {
+					color: '#767D83',
+					fontSize: 10,
+				},
+			},
+			xAxis: {
+				type: 'category',
+				axisLabel: {
+					color: '#767D83',
+					fontSize: 10,
+				},
+				data: [], //xAxis text
+			},
+			toolbox: {
+       
+			},
+			dataZoom: [
+			  
+			],
+			series: [
+				{
+					name: '',
+					type: 'bar',
+					showBackground: true,
+					data: [],
+				},
+			],
+		};
+	};
+
+	const defaultGridOption = gridHeight => {
+		// console.log("gridHeight = ", gridHeight);
+		return {
+			bodyHeight: gridHeight,
+			minBodyHeight: gridHeight,
+			header: {
+				height: 28,
+			},
+			rowHeight: 29,
+			minRowHeight: 29,
+			columnOptions: {
+				resizable: true,
+				minWidth: 100,
+			},
+		};
+	};
+
+	const copyObj = obj => {
+		const result = {};
+		for (let key in obj) {
+			if (typeof obj[key] === 'object') {
+				result[key] = copyObj(obj[key]);
+			} else {
+				result[key] = obj[key];
+			}
+		}
+		return result;
+	};
+
+	const getKeyByValue = (obj, val) => {
+		return Object.keys(obj).find(key => obj[key] === val);
+	};
+	const getValueByObject = (obj, defaultKey, defaultData, valueKey) => {
+		let returnData = '';
+		if (obj.length > 0) {
+			const list = obj.filter(item => item[defaultKey] === defaultData);
+			if (list.length > 0) {
+				returnData = list[0][valueKey];
+			}
+		}
+		return returnData;
+	};
+
+	const prependZero = (max, val) => {
+		let zeroStr = '';
+		let strVal = String(val);
+		for (let i = 0; i < max - strVal.length; i++) {
+			zeroStr += '0';
+		}
+		return zeroStr;
+	};
+
+	return {
+		testUtil,
+		setFormatDate, // 날짜 타입
+		setFormatDecimal, // 소수점 (버림, 반올림, 올림 의 정책이 있다면 수정필요)
+		setFormatInt, // 천단위 콤마
+		setFormatIntDecimal, // 소수점 포함 천단위 콤마
+		setFormatNumber, // 천단위 콤마 & 소수점 (들어오는 값 그대로,, <= 원하는 자릿구 맞추려면 추가해야 함, setFormatDecimal와 함께 사용해도 되기도,,),
+		setNewDefaultRange, // 기간 기준 재설정
+		setAftertDate, // 이후 날짜
+		setBeforetDate, // 이전 날짜
+		toCamelCase, // 카멜케이스로 변환
+		defaultChartOption, // 차트 공통 옵션
+		defaultGridOption, // 그리드 공통 옵션
+		copyObj, // 오브젝트 deep 카피
+		getKeyByValue,
+		getValueByObject,
+		prependZero,
+		toFixedAndLocaleString,
+	};
+};
+
+export default Utility();

plugins/vCalendar.js

@@ -0,0 +1,4 @@
+import Vue from 'vue';
+import VCalendar from 'v-calendar';
+
+Vue.use(VCalendar, { componentPrefix: 'vc' });

plugins/vue-fullscreen.js

@@ -0,0 +1,3 @@
+import fullscreen from 'vue-fullscreen';
+import Vue from 'vue';
+Vue.use(fullscreen);

plugins/vuetify.js

@@ -0,0 +1,61 @@
+import colors from 'vuetify/es5/util/colors';
+import Depth3rdBulletDark from '~/components/icons/Depth3rdBulletDark';
+import icoDarkDashCharge from '~/components/icons/icoDarkDashCharge';
+import icoDarkDashChargeWidget from '~/components/icons/icoDarkDashChargeWidget';
+import icoDarkDashPeak from '~/components/icons/icoDarkDashPeak';
+import icoDarkDashPeakWidget from '~/components/icons/icoDarkDashPeakWidget';
+import icoCalendar from '~/components/icons/icoCalendar';
+import icoAdminMenu from '~/components/icons/icoAdminMenu';
+
+import '@mdi/font/css/materialdesignicons.css'; // Ensure you are using css-loader
+import 'material-design-icons-iconfont/dist/material-design-icons.css';
+import Vue from 'vue';
+import Vuetify from 'vuetify/lib';
+
+Vue.use(Vuetify);
+
+export default new Vuetify({
+	theme: {
+		dark: true,
+		themes: {
+			dark: {
+				primary: '#196dcb',
+				accent: colors.grey.darken3,
+				secondary: colors.amber.darken3,
+				info: colors.teal.lighten1,
+				warning: colors.amber.base,
+				error: colors.deepOrange.accent4,
+				success: colors.green.accent3,
+			},
+			light: {
+				primary: '#4777d9',
+			},
+		},
+	},
+	icons: {
+		iconfont: 'md', // default - only for display purposes
+		values: {
+			depth3rdBulletDark: {
+				component: Depth3rdBulletDark,
+			},
+			darkDashCharge: {
+				component: icoDarkDashCharge,
+			},
+			darkDashPeak: {
+				component: icoDarkDashPeak,
+			},
+			icoCalendar: {
+				component: icoCalendar,
+			},
+			icoAdminMenu: {
+				component: icoAdminMenu,
+			},
+			darkDashPeakWidget: {
+				component: icoDarkDashPeakWidget,
+			},
+			darkDashChargeWidget: {
+				component: icoDarkDashChargeWidget,
+			},
+		},
+	},
+});