gitadmin/sk_fems_ui
1
0
Fork 0
Code Issues Pull Requests 3 Actions Packages Projects Releases Wiki Activity

sk_fems_ui commit

Browse Source
This commit is contained in:
unknown
2025-07-12 15:13:46 +09:00
commit ffdf5ccb66
380 changed files with 137913 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

807
pages/ems/effc/DataSetMngPage.vue Normal file
View File

@ -0,0 +1,807 @@
<template>
<div class="l-layout">
<!-- Dataset 페이지 시작 -->
<div v-if="pageActionFlag == 'list'" class="h100">
<v-row ref="searchFilter">
<v-col :cols="12">
<v-card class="searchFilter">
<v-row align="center" no-gutters>
<v-col :cols="4">
<InputText
:parentPrgmId="myPrgmId"
label="DataSet 명"
valueNm="dataSetNm"
:labelCols="4"
:textCols="8"
:searchOption="true"
/>
</v-col>
<v-col :cols="3">
<component
:is="'selectCodeList'"
:parentPrgmId="myPrgmId"
:label="'사용여부'"
dataKey="useFg"
:sendParam="{ commGrpCd: 'CO_USEFG', useFg: '1' }"
:addAll="true"
/>
</v-col>
<v-col :cols="3">
<!-- 사업장 -->
<component
:is="'SelectBlocMstr'"
ref="SelectBlocMstr"
:parentPrgmId="myPrgmId"
/>
</v-col>
<v-col :cols="2" class="text-right">
<v-btn
@click="jamoviClickEvent('view')"
:ripple="false"
class="mr-1"
>Jamovi</v-btn
>
<BtnSearch @click="search" />
</v-col>
</v-row>
</v-card>
</v-col>
</v-row>
<v-row ref="contents">
<v-col :cols="5" class="h100">
<v-card class="pb-5">
<div class="d-flex align-center justify-space-between pa-5">
<v-card-title class="pa-0 custom-title-4"
>Data Set 리스트</v-card-title
>
<Buttons
:parentPrgmId="myPrgmId"
:bindingData="gridName"
:detailList="detailList"
:btnActionsFnc="btnActions"
/>
</div>
<div class="px-5" style="height:calc(100% - 76px)">
<div ref="gridParent" class="w100 h100">
<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 class="custom-title-4" style="min-height:76px;"
>Data Set 상세
</v-card-title>
<div class="px-5" style="height:calc(100% - 76px)">
<v-tabs v-model="tab">
<v-tab v-for="item in items" :key="item.id">
{{ item.name }}
</v-tab>
</v-tabs>
<v-tabs-items
v-model="tab"
style="height: calc(100% - 65px);"
class="py-6"
>
<v-tab-item v-for="(item, idx) in items" :key="item.id">
<component
v-if="item.id == 'dataSetInfoTab'"
:is="'Form'"
:parentPrgmId="myPrgmId"
:detailList="detailList"
:bindingData="gridName"
@gridEditingFinish="gridEditingFinish"
/>
<DataSetTagRelTab
v-if="item.id == 'dataSetTagRelTab'"
:parentPrgmId="myPrgmId"
:innerTabGridInfo="{ tab, idx }"
@jamoviClickEvent="jamoviClickEvent"
/>
</v-tab-item>
</v-tabs-items>
</div>
</v-card>
</v-col>
</v-row>
</div>
<!-- Dataset 페이지 끝 -->
<!-- Jamovi 페이지 시작 -->
<div v-if="pageActionFlag == 'view'" class="h100">
<v-row align="center" no-gutters>
<v-col :cols="12">
<v-card>
<div class="d-flex align-center justify-space-between pa-5">
<v-card-title class="pa-0">모델링 Data Set</v-card-title>
<div class="d-flex align-center">
<v-btn
@click="jamoviClickEvent('list')"
:ripple="false"
class="mr-1"
>관리 화면으로</v-btn
>
</div>
</div>
</v-card>
</v-col>
</v-row>
<v-row>
<v-col :cols="12">
<v-card>
<div class="w100 h100">
<iframe
name="iframeJamovi"
id="iframeJamoviViewComponent"
width="100%"
height="100%"
:src="smgHtmlPath"
frameborder="0"
ref="iframeDom"
@load="iframeIsLoaded"
></iframe>
</div>
</v-card>
</v-col>
</v-row>
</div>
<!-- Jamovi 페이지 끝 -->
</div>
</template>
<script>
import { mapState, mapMutations, mapActions } from 'vuex';
import mixinGlobal from '@/mixin/global.js';
import { resize } from '@/mixin/resize.js';
import BtnSearch from '~/components/common/button/BtnSearch';
import Buttons from '~/components/common/button/Buttons';
import SelectBlocMstr from '@/components/common/select/SelectBlocMstr';
import selectCodeList from '@/components/common/select/selectCodeList';
import InputText from '@/components/common/input/InputText';
import Form from '~/components/common/form/Form';
import DataSetTagRelTab from '@/components/pages/ems/DataSetInfo/DataSetTagRelTab';
import Grid from '~/components/common/Grid';
import Utility from '~/plugins/utility';
import DateUtility from '~/plugins/dateUtility';
let myTitle;
let myPrgmId;
let smgHtmlPath;
let isJamoviInit = false;
let jamoviOpenDocKey = '';
const globalComId = '';
export default {
mixins: [mixinGlobal, resize],
async asyncData(context) {
const myState = context.store.state;
myPrgmId = context.route.query.prgmId;
await context.store.commit('setActiveMenuInfo', myState.menuData[myPrgmId]);
myTitle = await myState.activeMenuInfo.menuNm;
},
meta: {
title: () => {
return myTitle;
},
prgmId: myPrgmId,
smgHtmlPath: smgHtmlPath,
closable: true,
smgHtmlPath:
'http://172.28.103.246:41337/?access_key=20d6a0e0768f4ca093c113827ed1ad83',
},
components: {
BtnSearch,
Buttons,
SelectBlocMstr,
selectCodeList,
InputText,
Form,
DataSetTagRelTab,
Grid,
},
data() {
return {
myPrgmId: myPrgmId,
pageActionFlag: 'list',
gridName: 'rowGrid',
smgHtmlPath:
'http://172.28.103.246:41337/?access_key=20d6a0e0768f4ca093c113827ed1ad83', // jamoviOpenDocKey,
loadGrid: false,
tab: null,
items: [
{
name: 'Data Set 정보',
id: 'dataSetInfoTab',
disabledFlag: false,
},
{
name: 'Data Set TAG 연결',
id: 'dataSetTagRelTab',
disabledFlag: false,
},
],
detailList: myDetail,
defaultUseFg: 1,
};
},
computed: {
chkIsFind() {
// 조회 플래그
return this.pageData.isFind;
},
chkBlocCd() {
return this.pageData.blocId;
},
chkUseFg() {
// 사용여부 선택 감지
return this.pageData.useFgList === undefined ? -1 : this.pageData.useFg;
},
},
watch: {
chkIsFind(val) {
if (val) this.search();
},
chkBlocCd() {
this.setPageData({ isFind: true });
},
chkUseFg() {
this.setPageData({ isFind: true });
},
},
async beforeCreate() {
myPrgmId = this.$route.query.prgmId;
await this.$store.dispatch('chkOpenTabList', {
key: 'create',
prgmId: myPrgmId,
defaultData: defaultData,
});
},
created() {
var data = this.$route.params;
this.routeData = {
fromDt: data.fromDt,
};
// 모델 데이터 유형
this.getCodeList({
dataKey: 'mdlDataTypeCd',
params: { commGrpCd: 'MDL_DATA_TYPE_CD', useFg: '1' },
addAll: false,
});
},
mounted() {
this.init();
},
beforeDestroy() {
this.chkOpenTabList({ key: 'destroy', prgmId: myPrgmId });
},
methods: {
...mapActions({
getCodeList: 'modules/search/getCodeList',
getBlocMstrList: 'modules/search/getBlocMstrList',
getJamoviUrlReturn: 'modules/list/getJamoviUrlReturn',
}),
init() {
this.setFromDt();
this.initData();
this.gridInit();
},
async initData() {},
setFromDt() {
this.pageData.fromDt = Utility.setBeforetDate(
this.pageData,
this.pageData.toDt,
'YYYYMMDD',
);
// this.pageData.toDt = Utility.setAftertDate(this.pageData, this.pageData.fromDt, "YYYYMMDD");
},
gridInit() {
const gridHeight = this.$refs.gridParent.offsetHeight - 30;
const gridWidth = this.$refs.gridParent.offsetWidth;
const myOptions = {
columnOptions: {
resizable: true,
},
};
this.setGridOption({
gridKey: this.gridName,
value: Object.assign(Utility.defaultGridOption(gridHeight), myOptions),
});
const _this = this;
const myColumns = [
{
header: '모델링 DataSet ID',
name: 'dataSetId',
align: 'center',
width: 180,
},
{
header: 'DataSet 명',
name: 'dataSetNm',
align: 'left',
width: 200,
},
{
header: '사업장',
name: 'blocId',
align: 'center',
formatter({ value }) {
let retVal = '';
const newValue = _this.pageData.blocIdList.filter(
item => item.blocId == value,
);
if (newValue.length > 0) {
retVal = newValue[0].blocNm;
}
return retVal;
},
hidden: true,
},
{
header: '사용 여부',
name: 'useFg',
width: 100,
align: 'center',
formatter({ value }) {
value = value === true ? '1' : '0';
const newValue = _this.pageData.useFgList.filter(
item => item.commCd == value,
);
return newValue[0].commCdNm;
},
},
{ header: '비고', name: 'rmrk', align: 'left' },
];
this.setGridColumn({
gridKey: this.gridName,
value: myColumns,
});
this.loadGrid = true;
this.getRowGridData();
},
async search() {
// this.loadTree = false;
this.loadGrid = false;
await this.getRowGridData();
await this.setPageData({
isFind: false,
});
},
async getRowGridData() {
let res = [];
var useFg =
this.pageData.useFgList.length > 0
? this.pageData.useFg
: this.defaultUseFg;
if (this.pageData.blocMstrList.length > 0) {
res = await this.postApiReturn({
apiKey: 'selectDataSetInfo',
resKey: 'dataSetInfoData',
sendParam: {
comId: globalComId,
useFg: useFg,
dataSetNmLike: this.pageData.dataSetNm,
},
});
} else {
this.setPageData({ isFind: false });
}
const newRes = res.map(item => {
const newObj = {
...item,
rowStat: null,
dataSetId: item.dataSetId,
dataSetNm: item.dataSetNm,
useFg: item.useFg === '1' ? true : false, // 화면 개발 편의를 위해 boolean 타입으로 교체, 저장시 "1", "0" 으로 바꿔 보내야 함
};
return newObj;
});
this.loadGrid = true;
this.setGridData({
gridKey: this.gridName,
value: newRes,
});
this.$nextTick(() => {
if (newRes.length > 0) {
this.$refs[this.gridName].focus({
rowKey:
this.pageData.rowGridSelectKey == '' ||
this.pageData.rowGridSelectKey == null
? 0
: this.pageData.rowGridSelectKey ==
this.$refs[this.gridName].getData().length - 1
? this.pageData.rowGridSelectKey
: 0,
columnName: 'dataSetNm',
setScroll: true,
});
} else {
this.detailDataInit();
}
});
},
async getRowData(data, gridName) {
this.setPageData({
rowGridSelectKey: data.rowKey,
rowGridSelectData: data,
});
this.setDataSetTagRelInfo(data);
this.setGridSelectData({
gridKey: gridName,
gridSelect: true,
rowGridSelectKey: data.rowKey,
rowGridSelectData: Object.assign({}, data),
});
this.setGridSelectData({
gridKey: 'rowDataSetTagRelGrid',
gridSelect: true,
rowGridSelectKey: '',
rowGridSelectData: Object.assign({}, {}),
});
},
async setDataSetTagRelInfo(data) {
this.setPageData({
rowGridSelectKey: data.rowKey,
rowGridSelectData: data,
});
// 검침개소 추가 정보 처리
const res = await this.postApiReturn({
apiKey: 'selectMdlDataSetTagRelInfo',
resKey: 'dataSetTagRelData',
sendParam: {
comId: data.comId,
dataSetId: data.dataSetId,
},
});
console.debug('res', res);
const newRes = res.map(item => {
const newObj = {
...item,
comId: item.comId || '',
dataSetId: item.dataSetId || '',
dataSetNm: item.dataSetNm || '',
tagId: item.tagId || '',
tagNm: item.tagNm || '',
rmrk: item.rmrk || '',
useFg: item.useFg === '1' ? true : false,
rowStat: null,
};
return newObj;
});
this.setGridData({
gridKey: 'rowDataSetTagRelGrid',
value: newRes,
});
},
detailDataInit() {
this.setPageData({
rowGridSelectKey: null,
rowGridSelectData: [],
});
this.setGridData({
gridKey: 'rowDetailGrid',
value: [],
});
},
detailDataSetTagRelInit() {
this.setPageData({
rowGridSelectKey: null,
rowGridSelectData: [],
});
this.setGridData({
gridKey: 'rowDataSetTagRelGrid',
value: [],
});
},
getSelectedRowStatInfo(data) {
if (data) {
var rowStat = data.rowStat;
if (rowStat === 'I') {
this.tab = 0;
for (var i = 1; i < this.items.length; i++) {
this.items[i].disabledFlag = true;
}
} else if (rowStat === 'U') {
for (var i = 1; i < this.items.length; i++) {
this.items[i].disabledFlag = false;
}
} else if (rowStat === 'D') {
for (var i = 1; i < this.items.length; i++) {
this.items[i].disabledFlag = false;
}
} else if (rowStat === null) {
for (var i = 1; i < this.items.length; i++) {
this.items[i].disabledFlag = false;
}
}
}
},
async btnActions(action) {
let dataArr = [];
switch (action) {
case 'add':
const defaultRow = {
comId: this.userInfo.comId,
dataSetId: '',
dataSetNm: '',
useFg: '1',
};
this.$refs[this.gridName].addTreeRow(defaultRow);
break;
case 'remove':
this.$refs[this.gridName].removeTreeRow();
break;
case 'save':
dataArr = this.$refs[this.gridName].save();
var validCheck = true;
if (dataArr.length > 0) {
dataArr.filter(item => {
if (item.rowStat === 'I') {
if (item.dataSetNm == '') {
alert('필수 입력값을 입력해주세요.');
validCheck = false;
}
} else if (item.rowStat === 'U') {
if (item.dataSetNm == '') {
alert('필수 입력값을 입력해주세요.');
validCheck = false;
}
}
});
if (validCheck) {
const sendParam = {
datas: {
dsMdlDataSetInfo: dataArr.map(item => ({
...item,
comId: globalComId,
useFg: item.useFg ? '1' : '0',
})),
},
params: {},
};
await this.postUpdateApi({
apiKey: 'saveMdlDataSetInfo',
sendParam: sendParam,
});
this.$nextTick(() => {
this.setPageData({ isFind: true });
});
}
} else {
alert('저장할 내용이 없습니다.');
}
break;
default:
break;
}
},
gridEditingFinish(data, bindingData) {
switch (bindingData) {
case this.gridName:
this.$refs[bindingData].editingFinish(data);
break;
default:
this.$refs[bindingData][0].editingFinish(data);
break;
}
},
async jamoviClickEvent(action, payload) {
switch (action) {
case 'view':
jamoviOpenDocKey = '';
this.pageActionFlag = 'view';
break; // 리스트 페이지 상세보기 버튼
case 'view1':
console.log('view1', payload);
console.log(
'view1 fromDt : ',
this.pageData.fromDt,
', toDt : ',
this.pageData.toDt,
);
const res = await this.postApiReturn({
apiKey: 'selectJamoviOpen',
resKey: 'jamoviOpenData',
sendParam: {
comId: payload.comId,
dataSetId: payload.dataSetId,
sterm: DateUtility.format(this.pageData.fromDt, 'YYYY-MM-DD'),
eterm: DateUtility.format(this.pageData.toDt, 'YYYY-MM-DD'),
term: this.pageData.mdlDataTerm,
},
});
console.log('jamoviClickEvent : ', res);
if (res.status && res.status == 'OK') {
console.log('jamoviClickEvent Ok : ', stat, url);
let stat = res.status;
let url = res.url;
jamoviOpenDocKey = url;
this.pageActionFlag = 'view';
} else {
alert(
'RTDB로 부터 Data Load중 오류가 발생하였습니다.\n검색기간을 확인하시고 다시 요청 바랍니다.',
);
}
break; // 리스트 페이지 상세보기 버튼
case 'list':
this.pageActionFlag = 'list';
isJamoviInit = false;
break; // 리스트 페이지 상세보기 버튼
}
},
iframeIsLoaded() {
// smgHtmlPath
console.log('iframe loaded', jamoviOpenDocKey);
console.log('iframe iframeJamovi', this.$refs.iframeDom.src);
let url = '';
if (!isJamoviInit) {
console.log('iframe loaded2');
isJamoviInit = true;
this.$refs.iframeDom.src =
// 'http://jamovi.kfems.co.kr:41337/' +
'http://172.28.103.246:41337/' +
(jamoviOpenDocKey || '?access_key=20d6a0e0768f4ca093c113827ed1ad83');
console.log('iframe iframeJamovi', this.$refs.iframeDom.src);
}
},
},
};
const defaultData = {
/* 검색옵션 */
comId: globalComId,
dataSetId: '',
dataSetNm: '',
blocId: '',
blocMstrList: [],
blocIdList: [],
useFg: '1',
useFgList: [],
commGrpCd: '',
commGrpCdNm: '',
mdlDataTerm: '',
mdlDataTermList: [],
mdlDataTypeCd: '',
mdlDataTypeCdList: [],
facInfo: {},
isMulti: false,
// 선택된 그룹코드 상세 데이터
rowGridSelectKey: 0,
rowGridSelectData: null,
isFind: false, // true 경우 조회, 조회버튼도 이 값으로 연동 예정
cmCycle: 'CYC_DAY', // 주기
defaultRange: {
CYC_DAY: 30,
},
fromDt: '',
toDt: Utility.setFormatDate(new Date(), 'YYYYMMDD'),
smgHtmlPath:
'http://172.28.103.246:41337/?access_key=20d6a0e0768f4ca093c113827ed1ad83',
/* data 세팅 */
// 로컬 gridName 값과 동일한 이름으로 세팅
rowGrid: {
data: [],
column: [], // myColumns,
option: {}, // myOptions
defaultRow: {
comId: globalComId,
dataSetId: '',
dataSetNm: '',
blocId: null,
useFg: '1',
rowStat: 'I',
},
buttonAuth: {
add: true,
remove: true,
save: true,
excel: false,
},
rowGridSelectKey: 0,
rowGridSelectData: null,
},
rowDataSetTagRelGrid: {
data: [],
column: [], // myColumns,
option: {}, // myOptions
defaultRow: {
comId: '',
dataSetId: '',
dataSetNm: '',
tagId: '',
tagNm: '',
mdlDataTypeCd: 'SUM',
useFg: '1',
rmrk: null,
rowStat: null,
},
buttonAuth: {
add: true,
remove: true,
save: true,
excel: false,
},
rowGridSelectKey: 0,
rowGridSelectData: null,
},
};
const myDetail = [
{
type: 'InputText',
label: 'Data Set ID',
valueNm: 'dataSetId',
readonly: true,
cols: 6,
class: 'py-2',
required: false,
placeholder: '시스템 자동입력',
},
{
type: 'InputText',
label: 'Data Set 명',
valueNm: 'dataSetNm',
disabled: false,
cols: 6,
class: 'py-2',
required: true,
},
{
type: 'CheckBox',
label: '사용 여부',
valueNm: 'useFg',
disabled: false,
cols: 6,
class: 'py-2',
value: { '1': true, '0': false },
required: true,
},
{
type: 'TextArea',
label: '비고',
valueNm: 'rmrk',
disabled: false,
cols: 12,
textCols: 9,
rows: 2,
class: 'py-2',
required: false,
},
];
</script>
<style lang="scss">
@import '@/assets/scss/common.scss';
</style>

809
pages/ems/effc/EnrgEffcEqpmDetlMntrPage.vue Normal file
View File

@ -0,0 +1,809 @@
<template>
<div class="l-layout">
<v-row ref="searchFilter">
<v-col :cols="12">
<v-card class="searchFilter">
<v-row align="center" no-gutters>
<v-col :cols="3">
<!-- 설비종류 -->
<component
:is="'SelectBox'"
:propsValue="selectValue02"
:itemList="selectValueList02"
:label="'FAB'"
@update:propsValue="selectValue02 = $event"
/>
</v-col>
<v-col :cols="3">
<!-- 설비종류 -->
<component
:is="'SelectBox'"
:propsValue="selectValue01"
:itemList="selectValueList01"
:label="'설비종류'"
@update:propsValue="selectValue01 = $event"
/>
</v-col>
<v-col :cols="3">
<!-- 설비종류 -->
<component
:is="'SelectBox'"
:propsValue="selectValue03"
:itemList="selectValueList03"
:label="'설비그룹'"
@update:propsValue="selectValue03 = $event"
/>
</v-col>
<v-col :cols="2">
<!-- 평가 -->
<component
:is="'SelectBox'"
:propsValue="selectValue06"
:itemList="selectValueList06"
:label="'평가'"
@update:propsValue="selectValue06 = $event"
/>
</v-col>
<v-col :cols="1" class="text-right">
<!-- 조회버튼 -->
<BtnSearch @click="search" />
</v-col>
</v-row>
<v-row align="center" no-gutters>
<v-col :cols="3">
<!-- 설비종류 -->
<component
ref="EqpmSelectPop"
:is="'EqpmSelectPop'"
:label="'설비'"
:valueNm="'eqpmNm'"
:parentPrgmId="myPrgmId"
:eqpmGrpDisabled="true"
:fabDisabled="true"
:textCols="8"
:isMulti="true"
/>
</v-col>
<v-col :cols="3">
<!-- 설비종류 -->
<component
:is="'SelectBox'"
ref="SelectBox1"
:propsValue="selectValue05"
:itemList="selectValueList05"
:label="'가이드명'"
@update:propsValue="selectValue05 = $event"
/>
</v-col>
<v-col :cols="4">
<!-- 대상일 -->
<component
:is="'Datepicker'"
:parentPrgmId="myPrgmId"
:label="'대상일'"
:labelCols="3"
/>
</v-col>
</v-row>
</v-card>
</v-col>
</v-row>
<v-row ref="contents">
<v-col :cols="12" style="height: 100%">
<v-card class="pb-5">
<div class="d-flex align-center justify-space-between pa-5">
<v-card-title class="pa-0">설비별 현황 리스트</v-card-title>
</div>
<div class="px-5" style="height:calc(100% - 76px)">
<div ref="gridParent" class="w100 h100">
<component
:ref="gridName"
:is="loadGrid ? 'Grid' : null"
:gridName="gridName"
:parentPrgmId="myPrgmId"
:columnClickEventFlag="true"
@columnClick="columnClick"
/>
</div>
</div>
</v-card>
</v-col>
</v-row>
<component
ref="EnrgEffcEqpmDetailPop"
:is="'EnrgEffcEqpmDetailPop'"
:parentPrgmId="myPrgmId"
/>
<component
ref="EnrgEffcGdIdxDetPop"
:is="'EnrgEffcGdIdxDetPop'"
:parentPrgmId="myPrgmId"
/>
</div>
</template>
<script>
import mixinGlobal from '@/mixin/global.js';
import { resize } from '@/mixin/resize.js';
import { mapActions } from 'vuex';
import BtnSearch from '~/components/common/button/BtnSearch';
import Buttons from '~/components/common/button/Buttons';
import SelectBox from '@/components/common/select/SelectBox';
import Grid from '~/components/common/Grid';
import Utility from '~/plugins/utility';
import Datepicker from '~/components/common/Datepicker';
import EqpmSelectPop from '~/components/common/modal/EqpmSelectPop';
import EnrgEffcEqpmDetailPop from '~/components/common/modal/EnrgEffcEqpmDetailPop';
import EnrgEffcGdIdxDetPop from '~/components/common/modal/EnrgEffcGdIdxDetPop';
let myTitle;
let myPrgmId;
let paramsKey;
// let params;
// let routeCheck = false;
export default {
mixins: [mixinGlobal, resize],
async asyncData(context) {
const myState = context.store.state;
myPrgmId = context.route.query.prgmId;
await context.store.commit('setActiveMenuInfo', myState.menuData[myPrgmId]);
myTitle = await myState.activeMenuInfo.menuNm;
},
meta: {
title: () => {
return myTitle;
},
prgmId: myPrgmId,
closable: true,
},
components: {
Utility,
Grid,
SelectBox,
Buttons,
BtnSearch,
Datepicker,
EnrgEffcEqpmDetailPop,
EqpmSelectPop,
EnrgEffcGdIdxDetPop,
},
data() {
return {
myPrgmId: myPrgmId,
selectValue01: null,
selectValue02: null,
selectValue03: null,
selectValue04: { eqpmId: [] },
selectValue05: null,
selectValue06: null,
selectValueList01: [],
selectValueList02: [],
selectValueList03: [],
selectValueList04: [],
selectValueList05: [],
selectValueList06: [],
initedFlag: false,
loadGrid: false,
gridName: 'rowGrid',
popDialog: false,
eqpmFlag: false,
eqpmKindFlag: false,
eqpmGrpFlag: false,
eqpmGdIdxFlag: false,
fabFlag: false,
routeData: {},
};
},
computed: {
chkIsFind() {
// 조회 플래그
return this.pageData.isFind;
},
fabId() {
return this.pageData.fabId;
},
fabNm() {
return this.pageData.fabNm;
},
eqpmKindId() {
return this.pageData.eqpmKindId;
},
eqpmGrpId() {
return this.pageData.eqpmGrpId;
},
eqpmGrpNm() {
return this.pageData.eqpmGrpNm;
},
fromDt() {
return this.pageData.fromDt;
},
checkedRows() {
return this.pageData.checkedRows;
},
eqpmInfo() {
return this.pageData.eqpmInfo;
},
},
watch: {
$route(to, from) {
// routeCheck=true;
if (to.query.prgmId == myPrgmId) {
if (paramsKey != to.params.key) {
if (to.params.key == undefined) {
} else {
// params=to.params;
paramsKey = to.params.Key;
document.getElementById('refresh').click();
}
}
}
},
chkIsFind(val) {
if (val) this.search();
},
fabId(val) {},
fabNm(val) {},
eqpmKindId(val) {},
eqpmGrpId(val) {},
eqpmGrpNm(val) {},
fromDt(val) {},
async selectValue02(val) {
if (this.initedFlag) {
this.setPageData({
fabId: val,
eqpmId: [],
eqpmNm: null,
eqpmIdList: [],
// isFind:true
});
this.selectValue04 = { eqpmId: [] };
// await this.getEqpm();
// if(this.eqpmFlag){
// this.setPageData({ isFind: true });
// this.eqpmFlag=false;
// }
}
},
async selectValue01(val) {
if (this.initedFlag) {
this.setPageData({
eqpmKindId: val,
eqpmGrpId: null,
eqpmId: [],
eqpmNm: null,
eqpmIdList: [],
});
this.selectValue04 = { eqpmId: [] };
await this.getEqpmGrp();
// await this.getEqpm(this.selectValueList03);
}
},
async selectValue03(val) {
if (this.initedFlag) {
this.setPageData({
eqpmGrpId: val,
eqpmId: [],
eqpmNm: null,
eqpmIdList: [],
});
this.selectValue04 = { eqpmId: [] };
// await this.getEqpm();
// if(this.eqpmFlag){
// this.setPageData({ isFind: true });
this.eqpmGrpFlag = true;
// }
// await this.getEqpm();
await this.getGdIdx();
}
},
async selectValue06(val) {
if (this.initedFlag) {
this.setPageData({
eqpmGrpId: null,
eqpmId: [],
eqpmNm: null,
eqpmIdList: [],
isFind: true,
});
}
},
checkedRows(val) {
if (this.initedFlag) {
var temp = this.pageData.checkedRows.map(item => {
return item.eqpmId;
});
this.selectValue04 = { eqpmId: temp };
}
},
eqpmInfo(val) {
if (this.initedFlag) {
this.setPageData({ eqpmId: val.eqpmId, eqpmNm: val.eqpmNm });
}
},
// async selectValue04(val) {
// if (this.initedFlag) {
// console.log("val : ",val)
// this.setPageData({ isFind: true });
// }
// },
selectValue04: {
deep: true,
handler(newVal, oldVal) {
this.setPageData({ isFind: true });
},
},
async selectValue05(val) {
if (this.initedFlag) {
this.setPageData({ isFind: true });
}
},
},
async beforeCreate() {
myPrgmId = this.$route.query.prgmId;
await this.$store.dispatch('chkOpenTabList', {
key: 'create',
prgmId: myPrgmId,
defaultData: defaultData,
});
},
created() {
var data = this.$route.params;
// this.setPageData({
// eqpmGrpId : data.eqpmGrpId,
// eqpmGrpNm : data.eqpmGrpNm,
// fabId : data.fabId,
// fabNm : data.fabNm,
// eqpmKindId : data.eqpmKindId,
// fromDt : data.fromDt
// });
this.routeData = {
eqpmGrpId: data.eqpmGrpId,
eqpmGrpNm: data.eqpmGrpNm,
fabId: data.fabId,
fabNm: data.fabNm,
eqpmKindId: data.eqpmKindId,
fromDt: data.fromDt,
okFg:data.okFg
};
},
async mounted() {
await this.init();
this.initedFlag = true;
this.routeData = {};
},
beforeDestroy() {
// routeCheck=false;
this.chkOpenTabList({ key: 'destroy', prgmId: myPrgmId });
},
methods: {
...mapActions({
getCodeList: 'modules/search/getCodeList',
getBlocMstrList: 'modules/search/getBlocMstrList',
}),
async init() {
await this.getFab();
await this.getEqpmKind();
await this.getEqpmGrp();
// await this.getEqpm();
await this.getGdIdx();
await this.getOkFg();
if (this.routeData.fromDt != null) {
this.setPageData({
fromDt: this.routeData.fromDt,
});
} else {
this.setFromDt();
}
await this.gridInit();
},
async search() {
await this.getRowGridData();
this.setPageData({
isFind: false,
});
},
setFromDt() {
this.pageData.fromDt = Utility.setBeforetDate(
this.pageData,
this.pageData.toDt,
'YYYYMMDD',
);
// this.pageData.toDt = Utility.setAftertDate(this.pageData, this.pageData.fromDt, "YYYYMMDD");
},
async getEqpmKind() {
let res = await this.postApiReturn({
apiKey: 'selectEqpmKindCodeList',
resKey: 'eqpmKindCodeLists',
sendParam: {},
});
if (res.length > 0) {
this.selectValueList01 = await res.map(item => {
return {
text: item.eqpmKindNm,
value: item.eqpmKindId,
};
});
this.selectValueList01.unshift({
text: '전체',
value: null,
});
if (
this.routeData.eqpmKindId == null ||
this.routeData.eqpmKindId == ''
) {
this.selectValue01 = this.selectValueList01[0].value;
} else if (
this.routeData.eqpmKindId != null ||
this.routeData.eqpmKindId != ''
) {
this.selectValue01 = this.routeData.eqpmKindId;
}
} else {
this.selectValueList01 = [];
this.selectValue01 = null;
}
this.setPageData({
eqpmKindList: this.selectValueList01,
eqpmKindId: this.selectValue01,
});
},
async getFab() {
let res = await this.postApiReturn({
apiKey: 'selectFabCodeList',
resKey: 'fabCodeLists',
sendParam: {},
});
if (res.length > 0) {
this.selectValueList02 = await res.map(item => {
return {
text: item.eccNm,
value: item.eccId,
};
});
this.selectValueList02.unshift({
text: '전체',
value: null,
});
if (this.routeData.fabId != null && this.routeData.fabId != '') {
this.selectValue02 = this.routeData.fabId;
} else if (this.routeData.fabId == null || this.routeData.fabId == '') {
this.selectValue02 = this.selectValueList02[0].value;
}
} else {
this.selectValueList02 = [];
this.selectValue02 = null;
}
this.setPageData({
fabIdList: this.selectValueList02,
fabId: this.selectValue02,
});
},
async getEqpmGrp() {
//설비그룹
let res = await this.postApiReturn({
apiKey: 'selectEqpmGrpCodeList',
resKey: 'eqpmGrpCodeLists',
sendParam: { eqpmKindId: this.selectValue01 },
});
if (res.length > 0) {
this.selectValueList03 = await res.map(item => {
return {
text: item.eqpmGrpNm,
value: item.eqpmGrpId,
};
});
this.selectValueList03.unshift({
text: '전체',
value: null,
});
if (
this.routeData.eqpmGrpId != null &&
this.routeData.eqpmGrpId != ''
) {
this.selectValue03 = this.routeData.eqpmGrpId;
} else if (
this.routeData.eqpmGrpId == null ||
this.routeData.eqpmGrpId == ''
) {
this.selectValue03 = this.selectValueList03[0].value;
}
} else {
this.selectValueList03 = [];
this.selectValue03 = null;
}
this.setPageData({
eqpmGrpId : this.selectValue03,
eqpmGrpIdList : this.selectValueList03
})
},
async getEqpm(data) {},
async getGdIdx() {
let res = await this.postApiReturn({
apiKey: 'selectEqpmGdIdxCodeList',
resKey: 'eqpmGdIdxCodeLists',
sendParam: {
eqpmGrpId: this.selectValue03,
},
});
if (res.length > 0) {
this.selectValueList05 = await res.map(item => {
return {
text: item.gdIdxNm,
value: item.gdIdxId,
};
});
this.selectValueList05.unshift({
text: '전체',
value: null,
});
this.selectValue05 = this.selectValueList05[0].value;
} else {
this.selectValueList05 = [];
this.selectValue05 = null;
}
this.setPageData({
gdIdxIdList: this.selectValueList05,
gdIdxId: this.selectValue05,
});
},
async getOkFg() {
this.selectValueList06 = [
{
text: '전체',
value: null,
},
{
text: 'OK',
value: 'OK',
},
{
text: 'NG',
value: 'NG',
},
];
if(this.routeData.okFg == null || this.routeData.okFg == '' ){
this.selectValue06 = this.selectValueList06[0].value;
}else if(this.routeData.okFg != null || this.routeData.okFg != '' ){
this.selectValue06 = this.routeData.okFg;
}
this.setPageData({
okFg: this.selectValue06,
okFgList: this.selectValueList06,
});
},
async gridInit() {
const gridHeight = this.$refs.gridParent.offsetHeight - 30;
// const gridWidth = this.$refs.gridParent.offsetWidth / 2;
const myOptions = {
columnOptions: {
resizable: true,
},
rowHeaders: ['rowNum'],
// heightResizable: true,
// rowHeight:'auto'
};
this.setGridOption({
gridKey: this.gridName,
value: Object.assign(Utility.defaultGridOption(gridHeight), myOptions),
});
const _this = this;
const myColumns = [
{
header: 'FAB',
name: 'fabNm',
align: 'left',
width: 80,
},
{
header: '설비그룹',
name: 'eqpmGrpNm',
width: 130,
},
{
header: '설비id',
name: 'eqpmId',
hidden: true,
},
{
header: '설비명',
name: 'eqpmNm',
width: 130,
},
{
header: '가이드명',
name: 'gdIdxId',
hidden: true,
// formatter({ value }) {
// let retVal = '';
// const newValue = _this.pageData.gdIdxIdList.filter(
// item => item.value == value,
// );
// if (newValue.length > 0) {
// retVal = newValue[0].text;
// }
// //빈값일때 전체방지
// if (value == '' || value == null) {
// retVal = '';
// }
// return retVal;
// },
},
{
header: '가이드명',
name: 'gdIdxNm',
width: 200,
},
{
header: '주의',
name: 'careStndVal',
align: 'right',
width: 80,
},
{
header: '경고',
name: 'warnStndVal',
align: 'right',
width: 80,
},
{
header: '가이드값',
name: 'totVal',
align: 'right',
width: 120,
},
{
header: '평가',
name: 'okFg',
align: 'center',
width: 80,
},
{
header: '절감가이드 방법',
name: 'gdMeth',
},
{
header: 'NG발생건수',
name: 'ngCnt',
align: 'right',
width: 80,
},
];
this.setGridColumn({
gridKey: this.gridName,
value: myColumns,
});
// this.loadGrid = true;
this.getRowGridData();
},
async getRowGridData() {
this.loadGrid = false;
var res = await this.postApiReturn({
apiKey: 'selectEnrgEffcEqpmDetlMntr',
resKey: 'eqpmDetlData',
sendParam: {
eqpmId: this.selectValue04.eqpmId,
eqpmGrpId: this.selectValue03,
fromDt: this.pageData.fromDt,
toDt: this.pageData.toDt,
gdIdxId: this.selectValue05,
fabId: this.selectValue02,
eqpmKindId: this.selectValue01,
okFg: this.selectValue06,
},
});
this.setGridData({
gridKey: this.gridName,
value: res,
});
this.loadGrid = true;
},
columnClick(e) {
var data = this.$refs[this.gridName].gridInstance.invoke(
'getRow',
e.rowKey,
);
if (e.columnName == 'ngCnt' && e.targetType == 'cell') {
// if(e.columnName == 'ngCnt' && data.ngCnt > 0){
this.$refs['EnrgEffcEqpmDetailPop'].popCheck = true;
this.setPageData({
rowGridSelectKey: e.rowKey,
rowGridSelectData: {
...data,
fromDt: this.pageData.fromDt,
toDt: this.pageData.toDt,
},
});
}
if (e.columnName == 'gdIdxNm' && e.targetType == 'cell') {
// if(e.columnName == 'ngCnt' && data.ngCnt > 0){
this.$refs['EnrgEffcGdIdxDetPop'].popCheck = true;
this.setPageData({
rowGridSelectKey: e.rowKey,
rowGridSelectData: {
...data,
fromDt: this.pageData.fromDt,
toDt: this.pageData.toDt,
},
});
}
},
},
};
const defaultData = {
isFind: false,
fabId: '',
fabIdList: [],
fabNm: '',
eccId: '',
eqpmInfo: null,
eccIdList: [],
eqpmGrpNm: '',
eqpmGrpId: null,
eqpmGrpList: [],
eqpmId: [],
eqpmNm: null,
eqpmIdList: [],
eqpmNm: '',
eqpmKindId: '',
gdIdxId: '',
gdIdxIdList: [],
checkedRows: [],
cmCycle: 'CYC_DAY', // 주기
defaultRange: {
CYC_DAY: 30,
},
calcProc: null,
calcDesc: null,
fromDt: '',
toDt: Utility.setFormatDate(new Date(), 'YYYYMMDD'),
modalData: {},
// 선택된 그룹코드 상세 데이터
rowGridSelectKey: 0,
rowGridSelectData: null,
rowGrid: {
data: [],
column: [],
option: {},
defaultRow: {
fabNm: '',
eqpmGrpNm: '',
eqpmId: null,
gdIdxId: '',
careStndVal: '',
warnStndVal: '',
totVal: '',
okFg: '',
gdMeth: '',
ngCnt: '',
rowStat: null,
},
buttonAuth: {
add: false,
remove: false,
save: false,
excel: false,
},
},
};
</script>

421
pages/ems/effc/EnrgEffcTotSummPage.vue Normal file
View File

@ -0,0 +1,421 @@
<template>
<div class="l-layout">
<v-row ref="searchFilter">
<v-col :cols="12">
<v-card class="searchFilter">
<v-row align="center" no-gutters>
<v-col :cols="3">
<!-- 설비종류 -->
<component
:is="'SelectBox'"
ref="SelectBox1"
:propsValue="selectValue01"
:itemList="selectValueList01"
:label="'설비종류'"
@update:propsValue="selectValue01 = $event"
/>
</v-col>
<v-col :cols="3">
<!-- 대상일 -->
<component
:is="'Datepicker'"
:parentPrgmId="myPrgmId"
:label="'대상일'"
:labelCols="3"
/>
</v-col>
<v-col :cols="6" class="text-right">
<!-- 조회버튼 -->
<BtnSearch @click="search" />
</v-col>
</v-row>
</v-card>
</v-col>
</v-row>
<v-row ref="contents">
<v-col
:cols="6"
v-for="(item, index) in selectData"
:key="item.eqpmGrpId"
style="height: 50%"
>
<!-- <v-card class="pa-5" @click="barClick($event,'card')"> -->
<v-card class="pa-5">
<div class="d-flex align-center justify-space-between">
<v-card-title class="pa-0">{{ item.eqpmGrpNm }}</v-card-title>
</div>
<div ref="chartParent" style="height: 90%">
<component
:id="chartNameList[index]"
class="w100 h100 totChart"
:is="loadChartList[index] ? 'Chart' : null"
:parentPrgmId="myPrgmId"
:chartName="chartNameList[index]"
:ref="chartNameList[index]"
@click="barClick($event, chartNameList[index])"
/>
</div>
</v-card>
</v-col>
<!-- <v-col :cols="12" style="height: 35%">
<v-card class="pa-5">
<div ref="gridParent">
<component
ref="grid_01"
:is="loadGrid_01 ? 'Grid' : null"
:gridName="grid_01"
:parentPrgmId="myPrgmId"
/>
</div>
</v-card>
</v-col> -->
</v-row>
</div>
</template>
<script>
import { mapActions, mapMutations } from 'vuex';
import vue from 'vue';
import mixinGlobal from '@/mixin/global.js';
import { resize } from '@/mixin/resize.js';
import Datepicker from '~/components/common/Datepicker';
import Grid from '~/components/common/Grid';
import SelectBox from '@/components/common/select/SelectBox';
import BtnSearch from '~/components/common/button/BtnSearch';
import Buttons from '~/components/common/button/Buttons';
import Utility from '~/plugins/utility';
import Chart from '~/components/common/Chart';
let myTitle;
let myPrgmId;
export default {
mixins: [mixinGlobal, resize],
async asyncData(context) {
const myState = context.store.state;
myPrgmId = context.route.query.prgmId;
await context.store.commit('setActiveMenuInfo', myState.menuData[myPrgmId]);
myTitle = await myState.activeMenuInfo.menuNm;
},
meta: {
title: () => {
return myTitle;
},
prgmId: myPrgmId,
closable: true,
},
components: {
Datepicker,
Grid,
SelectBox,
BtnSearch,
Buttons,
Utility,
Chart,
},
data() {
return {
myPrgmId: myPrgmId,
selectValue01: null,
selectValueList01: [],
loadChartList: [],
chartNameList: [],
selectData: [],
url: '',
objList: {},
};
},
computed: {
chkIsFind() {
// 조회 플래그
return this.pageData.isFind;
},
fromDt() {
return this.pageData.fromDt;
},
},
watch: {
chkIsFind(val) {
if (val) this.search();
},
selectValue01(val) {
this.chartNameList = [];
this.search();
},
fromDt(val) {
this.chartNameList = [];
},
},
async beforeCreate() {
myPrgmId = this.$route.query.prgmId;
await this.$store.dispatch('chkOpenTabList', {
key: 'create',
prgmId: myPrgmId,
defaultData: defaultData,
});
},
created() {},
async mounted() {
await this.init();
// document.getElementById('totChart').on('click', function(params){
// });
},
beforeDestroy() {
this.chkOpenTabList({ key: 'destroy', prgmId: myPrgmId });
},
methods: {
...mapMutations({
setChartOption: 'setChartOption',
setPageData: 'setPageData',
}),
...mapActions({
getCodeList: 'modules/search/getCodeList',
getBlocMstrList: 'modules/search/getBlocMstrList',
getAddInfoList: 'modules/search/getAddInfoList',
}),
async init() {
await this.getEqpmKind();
await this.getData();
// await this.getChartData();
// await this.setChartData(data);
},
async search() {
// this.getRowGridData();
await this.getData();
this.setPageData({
isFind: false,
});
},
async getEqpmKind() {
let res = await this.postApiReturn({
apiKey: 'selectEqpmKindCodeList',
resKey: 'eqpmKindCodeLists',
sendParam: {},
});
if (res.length > 0) {
this.selectValueList01 = await res.map(item => {
return {
text: item.eqpmKindNm,
value: item.eqpmKindId,
};
});
this.selectValue01 = this.selectValueList01[0].value;
} else {
this.selectValueList01 = [];
this.selectValue01 = null;
}
this.setPageData({
eqpmKindList: this.selectValueList01,
eqpmKindId: this.selectValue01,
});
},
gridInit() {},
getRowGridData() {},
async getData() {
let res = await this.postApiReturn({
apiKey: 'selectEnrgEffcTotSumm',
resKey: 'totSummData',
sendParam: {
fromDt: this.pageData.fromDt,
eqpmKindId: this.selectValue01,
},
});
await this.getChartData(res);
this.selectData = res.filter((item, i) => {
return (
res.findIndex((item2, j) => {
return item.eqpmGrpId === item2.eqpmGrpId;
}) === i
);
});
},
barClick(event, chartName) {
var data = {};
if (chartName == 'card') {
data.fromDt = null;
data.eqpmGrpId = null;
data.eqpmGrpNm = null;
data.fabId = null;
data.fabNm = null;
data.okFg = null;
data.eqpmKindNm = null;
} else {
var chartData = this.objList[chartName];
data.fromDt = this.pageData.fromDt;
data.eqpmGrpId = chartData[event.dataIndex].eqpmGrpId;
data.eqpmGrpNm = chartData[event.dataIndex].eqpmGrpNm;
data.fabId = chartData[event.dataIndex].fabId;
data.fabNm = chartData[event.dataIndex].fabNm;
data.okFg = event.seriesName;
data.eqpmKindId = this.selectValue01;
}
this.$router.push({
name: 'ems-effc-EnrgEffcEqpmDetlMntrPage',
params: {
...data,
key: 'data_' + Math.random(),
},
query: {
prgmId: 'PRG0084',
// key : "data_"+Math.random()
},
});
},
async getChartData(data) {
var chartDataObj = {};
this.objList = {};
// let res = await this.postApiReturn({
// apiKey : 'selectEnrgEffcTotSumm',
// resKey : 'totSummData',
// sendParam:{
// fromDt : this.pageData.fromDt,
// eqpmKindId : this.pageData.eqpmKindId,
// }
// });
data.map(item => {
if (chartDataObj[item.eqpmGrpId] != null) {
chartDataObj[item.eqpmGrpId].push(item);
} else {
chartDataObj[item.eqpmGrpId] = [item];
}
});
// chartDataObj.keys()[0]
var i = 0;
for (var x of Object.keys(chartDataObj)) {
this.loadChartList.push(false);
i++;
this.objList['chart_0' + i] = chartDataObj[x];
this.chartNameList.push('chart_0' + i);
this.setPageData({
[this.chartNameList[i - 1]]: Utility.defaultChartOption(true),
});
this.setChartData(chartDataObj[x], i);
}
// this.setChartData(chartDataObj[Object.keys(chartDataObj)[0]]);
},
async setChartData(data, number) {
this.loadChartList[number - 1] = false;
let xAxisData = [];
let seriesData = [];
var emphasisStyle = {
itemStyle: {
shadowBlur: 10,
shadowColor: 'rgba(0,0,0,0.3)',
},
};
// console.log("data : ", data);
data.map(item => {
xAxisData.push(item.fabNm);
});
seriesData.push({
name: 'OK',
type: 'bar',
stack: 'one',
barWidth: '40',
emphasis: emphasisStyle,
data: data.map(obj => obj['okCnt']),
});
seriesData.push({
name: 'NG',
type: 'bar',
stack: 'one',
barWidth: '40',
emphasis: emphasisStyle,
data: data.map(obj => obj['ngCnt']),
});
var dataZoom = [];
if (xAxisData.length > 7) {
dataZoom = [
{
type: 'inside',
disabled: false,
start: 0,
end: parseInt(700 / xAxisData.length) - 1,
},
{
show: true,
moveOnMouseMove: true,
start: 0,
end: parseInt(700 / xAxisData.length) - 1,
},
];
} else {
dataZoom = [
{
type: 'inside',
disabled: true,
start: 0,
end: parseInt(700 / xAxisData.length) - 1,
},
{
show: false,
moveOnMouseMove: false,
start: 0,
end: parseInt(700 / xAxisData.length) - 1,
},
];
}
// console.log("xAxisData : ", xAxisData);
// console.log("seriesData : ", seriesData);
var chartOption = {
legend: {
top: xAxisData.length > 7 ? 'top' : 'bottom',
},
grid: {
top: '10%',
bottom: '16%',
},
yAxis: {},
xAxis: {
data: xAxisData,
},
series: seriesData,
tooltip: {},
dataZoom: dataZoom,
};
await this.$nextTick();
this.setChartOption({
chartKey: this.chartNameList[number - 1],
value: chartOption,
});
this.loadChartList[number - 1] = true;
},
},
};
const defaultData = {
isFind: false,
eqpmKindList: [],
eqpmKindId: '',
cmCycle: 'CYC_DAY', // 주기
defaultRange: {
CYC_DAY: 0,
},
fromDt: Utility.setFormatDate(new Date(), 'YYYYMMDD'), // 조회 시작일
};
</script>
<style lang="scss" scoped>
@import '@/assets/scss/common.scss';
// .echarts::v-deep > div > canvas:hover {
// cursor: pointer;
// }
// ::v-deep{
// .echarts:hover > div:nth-child(1){
// cursor:pointer !important;
// }
// }
</style>

574
pages/ems/effc/EnrgMapPage.vue Normal file
View File

@ -0,0 +1,574 @@
<template>
<div class="l-layout">
<v-row ref="searchFilter">
<v-col :cols="12">
<v-card class="searchFilter">
<v-row align="center" no-gutters>
<v-col :cols="3">
<!-- 차트목록 -->
<component
:is="'SelectBox'"
ref="SelectBox"
:propsValue="selectValue01"
:itemList="selectValueList01"
:label="'차트'"
@update:propsValue="selectValue01 = $event"
/>
</v-col>
<v-col :cols="4">
<!-- 대상일 -->
<component
:is="'Datepicker'"
:parentPrgmId="myPrgmId"
:label="'대상일'"
:labelCols="3"
/>
</v-col>
<v-col :cols="5" class="text-right">
<!-- 조회버튼 -->
<BtnSearch @click="search" />
</v-col>
</v-row>
</v-card>
</v-col>
</v-row>
<v-row ref="contents">
<v-col :cols="12" style="height: 100%">
<v-card class="pb-5">
<div class="d-flex align-center justify-space-between pa-5">
<v-card-title class="pa-0">에너지 현황</v-card-title>
</div>
<v-row>
<!-- <div style="text-align:center;"> -->
<v-col class="arrowCols" :cols="3" style="text-align:center;">
<div class="arrowText">고압반</div>
</v-col>
<!-- <span class="mdi mdi-arrow-right-bold" size="mdi-48px"></span> -->
<!-- <i class="mdi mdi-arrow-right-bold"></i> -->
<!-- <span style="width:1000px;">&#10230;</span> -->
<v-col class="iconArrowCols" :cols="6">
<div class="arrow-right"></div>
<!-- <img class="icon_arrow" src="@/assets/images/icon/ico-enrgMap.png"/> -->
</v-col>
<v-col class="arrowCols" :cols="3" style="text-align:center;">
<div class="arrowText">분전반</div>
</v-col>
<!-- </div> -->
</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"
:chartName="chartName"
/>
</div>
</div>
</v-card>
</v-col>
</v-row>
</div>
</template>
<script>
import mixinGlobal from '@/mixin/global.js';
import { resize } from '@/mixin/resize.js';
import Datepicker from '~/components/common/Datepicker';
import { mapState, mapActions, mapMutations } from 'vuex';
import BtnSearch from '~/components/common/button/BtnSearch';
import Utility from '~/plugins/utility';
import SelectBox from '@/components/common/select/SelectBox';
import DateUtility from '~/plugins/dateUtility';
import Chart from '~/components/common/Chart';
let myTitle;
let myPrgmId;
export default {
mixins: [mixinGlobal, resize],
async asyncData(context) {
const myState = context.store.state;
myPrgmId = context.route.query.prgmId;
await context.store.commit('setActiveMenuInfo', myState.menuData[myPrgmId]);
myTitle = await myState.activeMenuInfo.menuNm;
},
meta: {
title: () => {
return myTitle;
},
prgmId: myPrgmId,
closable: true,
},
components: {
Datepicker,
BtnSearch,
Utility,
DateUtility,
Chart,
SelectBox,
},
data() {
return {
myPrgmId: myPrgmId,
selectValueList01: [],
selectValue01: null,
loadChart: false,
chartName: 'sankeyChart',
loadChart: false,
};
},
computed: {
...mapState({
isDarkMode: state => state.isDarkMode,
}),
chkIsFind() {
// 조회 플래그
return this.pageData.isFind;
},
chkToDt() {
return this.pageData.toDt;
},
chkFromDt() {
return this.pageData.fromDt;
},
},
watch: {
chkIsFind(val) {
if (val) this.search();
},
chkToDt(val) {
var diff = DateUtility.diff(
Utility.setFormatDate(new Date(), 'YYYY-MM-DD'),
this.pageData.toDt,
'd',
);
if (diff > 0) {
this.setPageData({
toDt: new Date(),
isCheck: true,
});
}
},
chkFromDt(val) {
var diff = DateUtility.diff(
Utility.setFormatDate(new Date(), 'YYYY-MM-DD'),
this.pageData.fromDt,
'd',
);
if (diff > 0) {
this.setPageData({
fromDt: new Date(),
isCheck: true,
});
}
},
},
async beforeCreate() {
myPrgmId = this.$route.query.prgmId;
await this.$store.dispatch('chkOpenTabList', {
key: 'create',
prgmId: myPrgmId,
defaultData: defaultData,
});
},
async created() {},
async mounted() {
this.init();
// document.querySelector('.icon_arrow').style.width = document.querySelector('.iconArrowCols').clientWidth-20 + "px";
},
beforeDestroy() {
this.chkOpenTabList({ key: 'destroy', prgmId: myPrgmId });
},
methods: {
...mapMutations({
setChartOption: 'setChartOption',
setPageData: 'setPageData',
}),
...mapActions({
getCodeList: 'modules/search/getCodeList',
}),
async init() {
await this.getEnrgMapChartList();
this.setFromDt();
},
async search() {
await this.getChartData();
this.setPageData({
isFind: false,
});
},
setFromDt() {
this.pageData.fromDt = Utility.setBeforetDate(
this.pageData,
this.pageData.toDt,
'YYYYMMDD',
);
},
async getEnrgMapChartList() {
let res = await this.postApiReturn({
apiKey: 'selectEnrgMapChartList',
resKey: 'enrgMapChartList',
sendParam: {},
});
if (res.length > 0) {
this.selectValueList01 = await res.map(item => {
return {
text: item.sankeyChartNm,
value: item.sankeyChartSno.toString(),
};
});
this.selectValue01 = this.selectValueList01[0].value;
} else {
this.selectValueList01 = [];
this.selectValue01 = null;
}
this.setPageData({
sankeyChartList: this.selectValueList01,
sankeyChartSno: this.selectValue01,
});
},
async getChartData() {
let res = await this.postApiReturn({
apiKey: 'selectChartNode',
resKey: 'enrgMapChartNodeList',
sendParam: {
sankeyChartSno: this.selectValue01,
},
});
let res2 = await this.postApiReturn({
apiKey: 'selectSankeyTag',
resKey: 'sankeyTagList',
sendParam: {
sankeyChartSno: this.selectValue01,
},
});
var taglist = res2.map(item => {
return item['hmiTagNm'];
});
var tempSObj = {};
var tempEObj = {};
tempSObj['eterm'] = Utility.setFormatDate(
this.pageData.fromDt,
'YYYY-MM-DD 00:29:59',
);
tempSObj['sterm'] = Utility.setFormatDate(
DateUtility.addDate(-1, 'YYYY/MM/DD', this.pageData.fromDt),
'YYYY-MM-DD 23:59:59',
);
tempSObj['interval'] = '1';
tempSObj['vals'] = ['MIN'];
tempSObj['t'] = '2022-06-03 05:22:50';
tempSObj['term'] = 'MIN10';
tempSObj['tags'] = taglist;
tempSObj['url'] = 'http://58.232.11.31:1567/RTDBweapi/aggdata2.do';
var today = Utility.setFormatDate(new Date(), 'YYYYMMDD');
var eterm = Utility.setFormatDate(this.pageData.toDt, 'YYYYMMDD');
tempEObj['eterm'] = Utility.setFormatDate(
this.pageData.toDt,
'YYYY-MM-DD 23:59:59',
);
tempEObj['sterm'] =
today == eterm
? Utility.setFormatDate(this.pageData.toDt, 'YYYY-MM-DD 00:00:00')
: Utility.setFormatDate(this.pageData.toDt, 'YYYY-MM-DD 23:29:59');
tempEObj['interval'] = '1';
tempEObj['vals'] = ['MIN'];
tempEObj['t'] = '2022-06-03 05:22:50';
tempEObj['term'] = 'MIN10';
tempEObj['tags'] = taglist;
tempEObj['url'] = 'http://58.232.11.31:1567/RTDBweapi/aggdata2.do';
var startRes = await this.postApiReturn({
apiKey: 'selectEnrgMapInfo',
resKey: 'enrgMapInfoData',
sendParam: tempSObj,
});
var endRes = await this.postApiReturn({
apiKey: 'selectEnrgMapInfo',
resKey: 'enrgMapInfoData',
sendParam: tempEObj,
});
var resultRes = [];
var tempTags = [];
var allResCheck = false;
for (var i = 0; i < taglist.length; i++) {
if (
startRes.tags[i]['d'].length > 0 &&
endRes.tags[i]['d'].length > 0
) {
resultRes.push(
Utility.setFormatDecimal(
endRes.tags[i]['M'] - startRes.tags[i]['N'],
2,
),
);
} else {
resultRes.push(0);
tempTags.push({ index: i, tag: startRes.tags[i].tag });
}
}
if (tempTags.length > 0) {
allResCheck = true;
console.log('allResCheck... true');
}
if (allResCheck) {
tempSObj['tags'] = tempTags.map(item => {
return item.tag;
});
tempSObj['sterm'] = Utility.setFormatDate(
DateUtility.addDate(-1, 'YYYY/MM/DD', this.pageData.fromDt),
'YYYY-MM-DD 23:59:59',
);
tempSObj['eterm'] = Utility.setFormatDate(
this.pageData.toDt,
'YYYY-MM-DD 23:29:59',
);
var allRes = await this.postApiReturn({
apiKey: 'selectEnrgMapInfo',
resKey: 'enrgMapInfoData',
sendParam: tempSObj,
});
var cnt = 0;
allRes.tags.map(item => {
resultRes[tempTags[cnt++].index] = Utility.setFormatDecimal(
item['M'] - item['N'],
2,
);
});
}
this.setChartData(res, res2, resultRes);
},
async setChartData(nodeList, data, value) {
this.loadChart = false;
let makeData = [];
let makeLinks = [];
this.makeDataAndLink(nodeList, data, value, makeLinks, makeData);
//label에서 보여줄 total 값
var totalVal = 0;
makeLinks.map(item => {
if (item.source == makeData[0].name) {
totalVal += item.value;
}
});
//label , tooltip 셋팅
for (var i = 0; i < makeData.length; i++) {
makeData[i]['label'] = {
show: true,
formatter: function(obj) {
var retVal = makeLinks.filter(n => {
return n.target == obj.name;
});
return (
obj.name +
'\n' +
(obj.name == makeData[0].name
? Utility.setFormatIntDecimal(totalVal, 2)
: Utility.setFormatIntDecimal(retVal[0].value, 2))
);
},
};
makeData[i]['tooltip'] = {
formatter: function(obj) {
var retVal = makeLinks.filter(n => {
return n.target == obj.name;
});
return (
obj.name +
'\n' +
(obj.name == makeData[0].name
? Utility.setFormatIntDecimal(totalVal, 2)
: Utility.setFormatIntDecimal(retVal[0].value, 2)
)
.toString()
.bold()
);
},
};
}
const chartOption = {
backgroundColor: '#FFFFFF',
series: [
{
layoutIterations: 0,
type: 'sankey',
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.loadChart = true;
},
makeDataAndLink(nodeList, data, value, makeLinks, makeData) {
var makeTempData = [];
var tempMakeLinks = [];
nodeList.map(item => {
makeTempData.push({
name: item.nodeName,
});
});
var cnt = 0;
data.map(item => {
tempMakeLinks.push({
source: item.sourceName,
target: item.tartgetName,
value: parseFloat(value[cnt++]),
});
});
// var resultArr = parentList.filter((item, index)=>{
// console.log("index :",parentList.indexOf(item))
// console.log("##",parentList.indexOf(item) === index)
// return parentList.indexOf(item) === index;
// });
//1차 정렬
tempMakeLinks.sort(function(a, b) {
if (a.source == b.source) {
return b.value - a.value;
}
});
tempMakeLinks.filter(item => {
if (item.source == makeTempData[0].name) {
makeLinks.push(item);
}
});
//2차 정렬
makeSort(makeLinks, tempMakeLinks);
makeLinks.map(item => {
makeData.push({ name: item.target });
});
makeData.unshift(makeTempData[0]);
//
function makeSort(list, b) {
for (var i = 0; i < list.length; i++) {
b.filter(item => {
if (item.source == list[i].target) {
makeLinks.push(item);
}
});
}
}
},
},
};
const defaultData = {
isFind: false,
cmCycle: 'CYC_DAY', // 주기
defaultRange: {
CYC_DAY: 30,
},
fromDt: '',
toDt: Utility.setFormatDate(new Date(), 'YYYYMMDD'),
sankeyChartList: [],
sankeyChartSno: null,
sankeyChart: {
tooltip: {
trigger: 'axis',
confine: true,
axisPointer: {
type: 'shadow',
},
},
grid: {
left: '0',
right: '0',
top: '0',
},
legend: null,
series: [],
title: {},
backgroundColor: '',
},
};
</script>
<style lang="scss">
// .icon-arrow {
// display:inline-block;
// position: relative;
// height: 60px;
// // top: 20px;
// // left: 0;
// }
// .arrowText{
// // align-items: center;
// display: inline-block;
// flex-wrap: wrap;
// font-size: 1.25rem;
// font-weight: 700;
// letter-spacing: 0.0125em;
// line-height: 1.5;
// word-break: break-all;
// position: relative;
// line-height:60px;
// }
.arrow-right {
width: 100%;
height: 35px;
display: flex;
}
.arrow-right:before {
content: '';
background: #594dff;
width: 100%;
clip-path: polygon(
0 10px,
calc(100% - 15px) 10px,
calc(100% - 15px) 0,
100% 50%,
calc(100% - 15px) 100%,
calc(100% - 15px) calc(100% - 10px),
0 calc(100% - 10px)
);
}
</style>

901
pages/ems/effc/EnrgReptMngPage.vue Normal file
View File

@ -0,0 +1,901 @@
<template>
<div class="l-layout">
<v-row ref="searchFilter">
<v-col :cols="12">
<v-card class="searchFilter">
<v-row align="center" no-gutters>
<v-col :cols="3">
<!-- 설비종류 -->
<component
:is="'SelectBox'"
:propsValue="selectValue01"
:itemList="selectValueList01"
:label="'설비종류'"
@update:propsValue="selectValue01 = $event"
/>
</v-col>
<v-col :cols="3">
<!-- 설비그룹 -->
<component
:is="'SelectBox'"
:propsValue="selectValue02"
:itemList="selectValueList02"
:label="'설비그룹'"
@update:propsValue="selectValue02 = $event"
/>
</v-col>
<v-col :cols="3">
<!-- FAB -->
<component
ref="fabSelect"
:is="'SelectBoxMulti'"
:propsValue="selectValue03"
:itemList="selectValueList03"
:label="'FAB'"
:multiple="fabMultiple"
@update:propsValue="selectValue03 = $event"
/>
</v-col>
<v-col :cols="3" class="text-right">
<!-- 조회버튼 -->
<v-btn class="d-inline-flex" @click="createExcel()">엑셀</v-btn>
<BtnSearch @click="search" />
</v-col>
</v-row>
<v-row align="center" no-gutters>
<v-col :cols="3">
<!-- 효율지표 -->
<component
ref="effcIdxSelect"
:is="'SelectBoxMulti'"
:propsValue="selectValue04"
:itemList="selectValueList04"
:label="'효율지표'"
:multiple="effcIdxMultiple"
@update:propsValue="selectValue04 = $event"
/>
</v-col>
<v-col :cols="4">
<!-- 대상일 -->
<component
:is="'Datepicker'"
:parentPrgmId="myPrgmId"
:label="'대상일'"
:labelCols="3"
/>
</v-col>
</v-row>
</v-card>
</v-col>
</v-row>
<v-row ref="contents">
<v-col :cols="12" style="height: 50%">
<v-card class="pb-5 v-card v-sheet theme--dark">
<div class="d-flex align-center justify-space-between pa-5">
<v-card-title class="pa-0">설비그룹 효율지표 Trend</v-card-title>
</div>
<div ref="chartParent" style="height: 80%">
<component
:ref="chartName01"
class="w100 h100"
:is="loadChart01 ? 'Chart' : null"
:parentPrgmId="myPrgmId"
:chartName="chartName01"
/>
</div>
</v-card>
</v-col>
<v-col :cols="12" style="height: 50%">
<v-card class="pb-5 v-card v-sheet theme--dark">
<div class="d-flex align-center justify-space-between pa-5">
<v-row>
<v-col :cols="3">
<v-card-title class="pa-0">설비별 효율지표 Trend</v-card-title>
</v-col>
<v-col :cols="5"></v-col>
<v-col :cols="3">
<component
class="text-right"
ref="EqpmSelectPop"
:is="'EqpmSelectPop'"
:label="'설비'"
:labelCols="1"
:textCols="10"
:valueNm="'eqpmId'"
:parentPrgmId="myPrgmId"
:eqpmGrpDisabled="true"
:fabDisabled="true"
:iconShow="false"
:isMulti="true"
/>
</v-col>
<v-col :cols="1">
<v-btn @click="getEqpmData()">조회</v-btn>
</v-col>
</v-row>
</div>
<div ref="chartParent" style="height: 80%">
<component
class="w100 h100"
:is="loadChart02 ? 'Chart' : null"
:parentPrgmId="myPrgmId"
:chartName="chartName02"
:ref="chartName02"
/>
</div>
</v-card>
</v-col>
</v-row>
</div>
</template>
<script>
import mixinGlobal from '@/mixin/global.js';
import { resize } from '@/mixin/resize.js';
import { mapActions, mapMutations } from 'vuex';
import BtnSearch from '~/components/common/button/BtnSearch';
import Buttons from '~/components/common/button/Buttons';
import SelectBox from '@/components/common/select/SelectBox';
import SelectBoxMulti from '@/components/common/select/SelectBoxMulti';
import Utility from '~/plugins/utility';
import Datepicker from '~/components/common/Datepicker';
import BtnExcelDownload from '~/components/common/button/BtnExcelDownload';
import Chart from '~/components/common/Chart';
import EqpmSelectPop from '~/components/common/modal/EqpmSelectPop';
import DateUtility from '~/plugins/dateUtility';
import XLSX from 'xlsx';
let myTitle;
let myPrgmId;
export default {
mixins: [mixinGlobal, resize],
async asyncData(context) {
const myState = context.store.state;
myPrgmId = context.route.query.prgmId;
await context.store.commit('setActiveMenuInfo', myState.menuData[myPrgmId]);
myTitle = await myState.activeMenuInfo.menuNm;
},
meta: {
title: () => {
return myTitle;
},
prgmId: myPrgmId,
closable: true,
},
components: {
BtnSearch,
Buttons,
SelectBox,
Utility,
Datepicker,
BtnExcelDownload,
Chart,
SelectBoxMulti,
EqpmSelectPop,
DateUtility,
XLSX,
},
data() {
return {
myPrgmId: myPrgmId,
selectValue01: null,
selectValue02: null,
selectValue03: [],
selectValue04: [],
selectValueList01: [],
selectValueList02: [],
selectValueList03: [],
selectValueList04: [],
gridName: 'eqpmGrdGrid',
loadChart01: false,
loadChart02: false,
chartName01: 'eqpmGrpChart',
chartName02: 'eqpmChart',
fabMultiple: true,
effcIdxMultiple: true,
xlsData: [],
xlsHeader: [],
eqpmGrpObj: {},
eqpmKindObj: {},
};
},
computed: {
chkIsFind() {
// 조회 플래그
return this.pageData.isFind;
},
chkIsFind2() {
// 설비팝업 조회 플래그
return this.pageData.isFind2;
},
chkFromDt() {
return this.pageData.fromDt;
},
chkToDt() {
return this.pageData.toDt;
},
},
watch: {
chkIsFind(val) {
if (val) this.search();
},
chkIsFind2(val) {
// 설비팝업 조회 플래그
if (val) this.getEqpmData();
},
async selectValue01(val) {
if (this.initedFlag) {
this.setPageData({
eqpmKindId: val,
eqpmGrpId: '',
});
await this.getEqpmGrp();
}
},
async selectValue02(val) {
if (this.initedFlag) {
this.setPageData({
eqpmGrpId: val,
eqpmId: [],
eqpmIdList: [],
});
this.setPageData({ isFind: true });
}
},
async selectValue03(val) {
if (this.selectValue04.length > 1) {
if (this.selectValue03.length > 1) {
this.selectValue03.shift();
}
}
if (this.selectValue03.length != 0) {
if (this.initedFlag) {
this.setPageData({
fabId: val,
eqpmId: [],
eqpmIdList: [],
});
this.setPageData({ isFind: true });
}
}
},
async selectValue04(val) {
if (this.selectValue03.length > 1) {
if (this.selectValue04.length > 1) {
this.selectValue04.shift();
}
}
if (this.selectValue04.length == 0) {
return;
}
if (this.initedFlag) {
this.setPageData({ isFind: true });
}
},
chkToDt(val) {
var diff = DateUtility.diff(
this.pageData.fromDt,
this.pageData.toDt,
'd',
);
if (diff < 6 && diff > 0) {
this.setPageData({
toDt: DateUtility.addDate(6, 'd', this.pageData.fromDt),
isCheck: true,
});
}
},
chkFromDt(val) {
var diff = DateUtility.diff(
this.pageData.fromDt,
this.pageData.toDt,
'd',
);
if (diff < 6 && diff > 0) {
this.setPageData({
fromDt: DateUtility.addDate(-6, 'd', this.pageData.toDt),
isCheck: true,
});
}
},
},
async beforeCreate() {
myPrgmId = this.$route.query.prgmId;
await this.$store.dispatch('chkOpenTabList', {
key: 'create',
prgmId: myPrgmId,
defaultData: defaultData,
});
},
created() {},
async mounted() {
await this.init();
this.initedFlag = true;
},
beforeDestroy() {
this.chkOpenTabList({ key: 'destroy', prgmId: myPrgmId });
},
methods: {
...mapMutations({
setChartOption: 'setChartOption',
setChartDataZoom: 'setChartDataZoom',
setPageData: 'setPageData',
setChartXAxisData: 'setChartXAxisData',
setChartYAxisData: 'setChartYAxisData',
setChartSeries: 'setChartSeries',
}),
...mapActions({
getCodeList: 'modules/search/getCodeList',
}),
async init() {
await this.getFab();
await this.getEqpmKind();
await this.getEqpmGrp();
await this.getEffcIdx();
this.setFromDt();
// await this.getData();
},
async search() {
// await this.getRowGridData();
if (this.selectValue03.length > 0 && this.selectValue04.length > 0) {
await this.getEqpmGrpData();
await this.getEqpmData();
}
this.setPageData({
isFind: false,
});
},
setFromDt() {
this.pageData.fromDt = Utility.setBeforetDate(
this.pageData,
this.pageData.toDt,
'YYYYMMDD',
);
// this.setPageData({
// toDt : DateUtility.addDate(6, 'd', this.pageData.fromDt)
// })
// this.pageData.toDt = Utility.setAftertDate(this.pageData, this.pageData.fromDt, "YYYYMMDD");
},
async getEqpmKind() {
let res = await this.postApiReturn({
apiKey: 'selectEqpmKindCodeList',
resKey: 'eqpmKindCodeLists',
sendParam: {},
});
var tmpData = {};
if (res.length > 0) {
this.selectValueList01 = await res.map(item => {
tmpData[item.eqpmKindId] = item.eqpmKindNm;
return {
text: item.eqpmKindNm,
value: item.eqpmKindId,
};
});
this.selectValue01 = this.selectValueList01[0].value;
} else {
this.selectValueList01 = [];
this.selectValue01 = null;
}
this.eqpmKindObj = tmpData;
this.setPageData({
eqpmKindList: this.selectValueList01,
eqpmKindId: this.selectValue01,
});
},
async getFab() {
let res = await this.postApiReturn({
apiKey: 'selectFabCodeList',
resKey: 'fabCodeLists',
sendParam: {},
});
if (res.length > 0) {
this.selectValueList03 = await res.map(item => {
return {
text: item.eccNm,
value: item.eccId,
};
});
// if(this.pageData.eccId != null && this.pageData.eccId != ''){
// this.selectValue02 = this.pageData.eccId;
// }else if(this.pageData.eccId == null || this.pageData.eccId == ''){
this.selectValue03.push(this.selectValueList03[0].value);
// }
} else {
this.selectValueList03 = [];
this.selectValue03 = [];
}
this.setPageData({
fabIdList: this.selectValueList03,
fabId: this.selectValue03,
});
},
async getEqpmGrp() {
let res = await this.postApiReturn({
apiKey: 'selectEqpmGrpCodeList',
resKey: 'eqpmGrpCodeLists',
sendParam: { eqpmKindId: this.selectValue01 },
});
var tmpData = {};
if (res.length > 0) {
this.selectValueList02 = await res.map(item => {
tmpData[item.eqpmGrpId] = item.eqpmGrpNm;
return {
text: item.eqpmGrpNm,
value: item.eqpmGrpId,
};
});
// this.selectValue02 = this.pageData.eqpmGrpId;
// }else if(this.pageData.eqpmGrpId == null || this.pageData.eqpmGrpId == ''){
this.selectValue02 = this.selectValueList02[0].value;
// }
} else {
this.selectValueList02 = [];
this.selectValue02 = null;
}
this.eqpmGrpObj = tmpData;
this.setPageData({
eqpmGrpList: this.selectValueList02,
eqpmGrpId: this.selectValue02,
});
},
async getEffcIdx() {
let res = await this.postApiReturn({
apiKey: 'selectEffcIdxCodeList',
resKey: 'effcIdxCodeList',
sendParam: {},
});
if (res.length > 0) {
this.selectValueList04 = await res.map(item => {
return {
text: item.effcIdxNm,
value: item.effcIdxId,
};
});
this.selectValue04.push(this.selectValueList04[0].value);
} else {
this.selectValueList04 = [];
this.selectValue02 = [];
}
this.setPageData({
effcIdxIdList: this.selectValueList02,
effcIdxId: this.selectValue02,
});
},
async getEqpmGrpData() {
//설비그룹 trend
let res = await this.postApiReturn({
apiKey: 'selectEffcIdxEgrpTrend',
resKey: 'egrpTrendData',
sendParam: {
fabId: this.selectValue03,
eqpmGrpId: this.selectValue02,
effcIdxId: this.selectValue04,
fromDt: this.pageData.fromDt,
toDt: this.pageData.toDt,
},
});
this.setPageData({
chartData01: res,
});
this.setChartData(res);
},
async getEqpmData() {
//설비별 Trend
let res = await this.postApiReturn({
apiKey: 'selectEffcIdxEqpmTrend',
resKey: 'eqpmTrendData',
sendParam: {
fabId: this.selectValue03,
eqpmGrpId: this.selectValue02,
effcIdxId: this.selectValue04,
fromDt: this.pageData.fromDt,
toDt: this.pageData.toDt,
eqpmId: this.pageData.eqpmId,
},
});
this.setPageData({
chartData02: res,
isFind2: false,
});
this.setChartData2(res);
},
setExcelData(data, type) {
var xlsRowData = [];
var xlsHeader = [];
var diff = DateUtility.diff(
this.pageData.fromDt,
this.pageData.toDt,
'd',
);
var totVal = [];
xlsRowData = data;
if (type == 'eqpmGrp') {
xlsHeader.push({
header: '설비종류',
name: 'eqpmKindNm',
});
xlsHeader.push({
header: '설비그룹',
name: 'eqpmGrpNm',
});
xlsHeader.push({
header: 'FAB',
name: 'fabNm',
});
xlsHeader.push({
header: '효율지표',
name: 'effcIdxNm',
});
} else if (type == 'eqpm') {
xlsHeader.push({
header: '설비종류',
name: 'eqpmKindNm',
});
xlsHeader.push({
header: '설비그룹',
name: 'eqpmGrpNm',
});
xlsHeader.push({
header: '설비',
name: 'eqpmNm',
});
xlsHeader.push({
header: '효율지표',
name: 'effcIdxNm',
});
}
for (var i = 0; i < diff + 1; i++) {
var date = DateUtility.addDate(i, 'YYYY/MM/DD', this.pageData.fromDt);
xlsHeader.push({
header: date,
name: date,
});
totVal.push(0);
}
var exceptionColumList = [
'effcIdxNm',
'fabNm',
'eqpmKindNm',
'eqpmGrpNm',
'eqpmNm',
];
let myKey = xlsHeader.map(item => {
return item.name;
});
myKey = myKey.filter(v => {
return !exceptionColumList.includes(v);
});
let tmpData = [];
let tmpMap = {};
let excelMap = {};
if (type == 'eqpmGrp') {
xlsRowData.map(item => {
if (tmpMap[item.fabEffcNm] == null) {
tmpMap[item.fabEffcNm] = {
...item,
totVal: [...totVal],
};
}
});
xlsRowData.map(item => {
if (tmpMap[item.fabEffcNm] != undefined) {
tmpMap[item.fabEffcNm]['totVal'][
myKey.indexOf(Utility.setFormatDate(item.totDttm, 'YYYY/MM/DD'))
] = item.totVal;
}
});
} else if (type == 'eqpm') {
xlsRowData.map(item => {
if (tmpMap[item.eqpmEffcNm] == null) {
tmpMap[item.eqpmEffcNm] = {
...item,
totVal: [...totVal],
};
}
});
xlsRowData.map(item => {
if (tmpMap[item.eqpmEffcNm] != undefined) {
tmpMap[item.eqpmEffcNm]['totVal'][
myKey.indexOf(Utility.setFormatDate(item.totDttm, 'YYYY/MM/DD'))
] = item.totVal;
}
});
}
var tmpMapKey = Object.keys(tmpMap);
for (var i = 0; i < tmpMapKey.length; i++) {
excelMap['설비종류'] = this.eqpmKindObj[this.selectValue01];
excelMap['설비그룹'] = this.eqpmGrpObj[this.selectValue02];
if (type == 'eqpmGrp') {
excelMap['FAB'] = tmpMap[tmpMapKey[i]].fabNm;
} else if (type == 'eqpm') {
excelMap['설비'] = tmpMap[tmpMapKey[i]].eqpmNm;
}
excelMap['효율지표'] = tmpMap[tmpMapKey[i]].effcIdxNm;
var count = 0;
tmpMap[tmpMapKey[i]].totVal.map(v => {
excelMap[myKey[count]] = v;
count++;
});
tmpData.push(excelMap);
excelMap = {};
}
var newXlsHeader = [];
xlsHeader.map(v => {
newXlsHeader.push(String(v.header));
});
return { data: tmpData, header: newXlsHeader };
},
createExcel() {
let fileName = '에너지보고서';
const workBook = XLSX.utils.book_new(); // 새 시트 생성
var chartData = this.setExcelData(this.pageData.chartData01, 'eqpmGrp');
let excelData = XLSX.utils.json_to_sheet(chartData.data, {
header: chartData.header,
});
XLSX.utils.book_append_sheet(
workBook,
excelData,
'설비그룹_효율지표Trend',
); // 시트 명명, 데이터 지정
chartData = this.setExcelData(this.pageData.chartData02, 'eqpm');
excelData = XLSX.utils.json_to_sheet(chartData.data, {
header: chartData.header,
});
XLSX.utils.book_append_sheet(workBook, excelData, '설비별_효율지표Trend'); // 시트 명명, 데이터 지정
XLSX.writeFile(
workBook,
`${fileName ? fileName : this.menuNm.replace(/(\s*)/g, '')}.xlsx`,
); // 엑셀파일 만듬
},
async setChartData(data) {
this.loadChart01 = false;
let xAxisData = [];
let seriesData = [];
var diff = DateUtility.diff(
this.pageData.fromDt,
this.pageData.toDt,
'd',
);
var totVal = [];
for (var i = 0; i < diff + 1; i++) {
xAxisData.push(DateUtility.addDate(i, 'DD', this.pageData.fromDt));
totVal.push(0);
}
var tempData = {};
data.map(item => {
if (tempData[item.fabEffcNm] == null) {
tempData[item.fabEffcNm] = {
...item,
totVal: [...totVal],
};
}
});
data.map(item => {
if (tempData[item.fabEffcNm] != undefined) {
tempData[item.fabEffcNm]['totVal'][
xAxisData.indexOf(Utility.setFormatDate(item.totDttm, 'DD'))
] = item.totVal;
}
});
var keys = Object.keys(tempData);
for (var i = 0; i < keys.length; i++) {
seriesData.push({
name: tempData[keys[i]].fabEffcNm,
type: 'line',
data: tempData[keys[i]].totVal,
});
}
var dataZoom = [];
if (xAxisData.length > 7) {
dataZoom = [
{
type: 'inside',
disabled: false,
start: 0,
end: parseInt(700 / xAxisData.length) - 1,
},
{
show: true,
moveOnMouseMove: true,
start: 0,
end: parseInt(700 / xAxisData.length) - 1,
},
];
} else {
dataZoom = [
{
type: 'inside',
disabled: true,
start: 0,
end: parseInt(700 / xAxisData.length) - 1,
},
{
show: false,
moveOnMouseMove: false,
start: 0,
end: parseInt(700 / xAxisData.length) - 1,
},
];
}
var chartOption = {
legend: {
top: 'top',
},
grid: {
top: '10%',
bottom: '20%',
},
yAxis: {},
xAxis: {
data: xAxisData,
},
series: seriesData,
tooltip: {},
dataZoom: dataZoom,
};
this.setChartOption({ chartKey: this.chartName01, value: chartOption });
// this.setChartYAxisData({ chartKey: this.chartName01, value: yAxisData });
// this.setChartXAxisData({ chartKey: this.chartName01, value: xAxisData });
// this.setChartSeries({ chartKey: this.chartName01, value: seriesData });
this.$nextTick(() => {
this.loadChart01 = true;
});
},
async setChartData2(data) {
this.loadChart02 = false;
let xAxisData = [];
let seriesData = [];
var diff = DateUtility.diff(
this.pageData.fromDt,
this.pageData.toDt,
'd',
);
var totVal = [];
for (var i = 0; i < diff + 1; i++) {
xAxisData.push(DateUtility.addDate(i, 'DD', this.pageData.fromDt));
totVal.push(0);
}
var tempData = {};
data.map(item => {
if (tempData[item.eqpmEffcNm] == null) {
tempData[item.eqpmEffcNm] = {
...item,
totVal: [...totVal],
};
}
});
data.map(item => {
if (tempData[item.eqpmEffcNm] != undefined) {
tempData[item.eqpmEffcNm]['totVal'][
xAxisData.indexOf(Utility.setFormatDate(item.totDttm, 'DD'))
] = item.totVal;
}
});
var keys = Object.keys(tempData);
for (var i = 0; i < keys.length; i++) {
seriesData.push({
name: tempData[keys[i]].eqpmEffcNm,
type: 'line',
data: tempData[keys[i]].totVal,
});
}
var dataZoom = [];
if (xAxisData.length > 7) {
dataZoom = [
{
type: 'inside',
disabled: false,
start: 0,
end: parseInt(700 / xAxisData.length) - 1,
},
{
show: true,
moveOnMouseMove: true,
start: 0,
end: parseInt(700 / xAxisData.length) - 1,
},
];
} else {
dataZoom = [
{
type: 'inside',
disabled: true,
start: 0,
end: parseInt(700 / xAxisData.length) - 1,
},
{
show: false,
moveOnMouseMove: false,
start: 0,
end: parseInt(700 / xAxisData.length) - 1,
},
];
}
var chartOption = {
legend: {
top: 'top',
},
grid: {
top: '10%',
bottom: '20%',
},
yAxis: {},
xAxis: {
data: xAxisData,
},
series: seriesData,
tooltip: {},
dataZoom: dataZoom,
};
this.setChartOption({ chartKey: this.chartName02, value: chartOption });
// this.setChartDataZoom({chartKey : this.chartName02,value: dataZoom});
this.$nextTick(() => {
this.loadChart02 = true;
});
},
},
};
const defaultData = {
isFind: false,
isFind2: false,
fabId: [],
fabIdList: [],
fabNm: '',
chartData01: [],
chartData02: [],
// eccId:'',
// eccIdList:[],
eqpmGrpNm: '',
eqpmGrpId: '',
eqpmGrpList: [],
eqpmId: [],
eqpmIdList: [],
eqpmNm: '',
eqpmKindId: '',
effcIdxId: '',
cmCycle: 'CYC_DAY', // 주기
defaultRange: {
CYC_DAY: 30,
},
fromDt: '',
toDt: Utility.setFormatDate(new Date(), 'YYYYMMDD'),
modalData: {},
eqpmGrpChart: Utility.defaultChartOption(true),
eqpmChart: Utility.defaultChartOption(true),
};
</script>

927
pages/ems/effc/EnrgUseEqpmDetlMntrPage.vue Normal file
View File

@ -0,0 +1,927 @@
<template>
<div ref="mainDiv" class="l-layout">
<v-row ref="searchFilter">
<v-col :cols="12">
<v-card class="searchFilter">
<v-row align="center" no-gutters>
<v-col :cols="2">
<component
:is="'SelectBox'"
ref="SelectBox1"
:propsValue="selectValue01"
:itemList="selectValueList01"
:label="'FAB'"
@update:propsValue="selectValue01 = $event"
/>
</v-col>
<v-col :cols="2">
<component
:is="'SelectBox'"
ref="SelectBox2"
:propsValue="selectValue02"
:itemList="selectValueList02"
:label="'설비종류'"
@update:propsValue="selectValue02 = $event"
/>
</v-col>
<v-col :cols="2">
<component
:is="'SelectBox'"
ref="SelectBox3"
:propsValue="selectValue03"
:itemList="selectValueList03"
:label="'설비그룹'"
@update:propsValue="selectValue03 = $event"
/>
</v-col>
<v-col :cols="2">
<component
:is="'SelectBox'"
ref="SelectBox4"
:propsValue="selectValue04"
:itemList="selectValueList04"
:label="'설비'"
@update:propsValue="selectValue04 = $event"
/>
</v-col>
<v-col :cols="1">
<component
:is="'SelectCmCycle'"
:parentPrgmId="myPrgmId"
:labelCols="5"
:textCols="7"
:label="'구분'"
/>
</v-col>
<v-col :cols="2">
<component
:is="'DatePicker'"
:label="'대상년월'"
:parentPrgmId="myPrgmId"
:isRangeOption="false"
/>
</v-col>
<v-col :cols="1" class="text-right">
<v-btn :ripple="false" @click="search()">조회</v-btn>
</v-col>
</v-row>
</v-card>
</v-col>
</v-row>
<v-row ref="contents" style="height: calc(100vh - 230px)">
<v-col :cols="12" style="height: 100%;">
<v-row class="pa-1" style="height:33%; width:100%">
<v-card class="pa-1" style="height: 100%; width:100%">
<div style="height: 100%">
<div style="height:25%">
<v-card-title
class="d-flex align-center justify-space-between pa-5"
>
<span class="tit ft-size_20 ft-weight_600"
>주요가이드 지표</span
>
</v-card-title>
</div>
<div style="height:75%; ">
<v-row style="height:100%; overflow: auto;">
<v-col
:cols="3"
style="height:100%;"
v-for="(value, key, index) in contentData01"
:key="'key1' + index"
>
<div
class="v-box"
style="height: 100%; padding:3px; margin:2px"
>
<v-col :cols="12" style="height:100%">
<div style="height:20%">
{{ value['gdIdxNm'] }}
</div>
<div style="height:80%">
<component
class="w100 h100"
:is="loadChart ? 'Chart' : null"
:parentPrgmId="myPrgmId"
:chartName="'chartGroup01_' + value['gdIdxId']"
:ref="'chartGroup01_' + value['gdIdxId']"
/>
</div>
</v-col>
</div>
</v-col>
</v-row>
</div>
</div>
</v-card>
</v-row>
<v-row class="pa-1" style="height:33%; width:100%">
<v-card class="pa-1" style="height: 100%; width:100%">
<div style="height : 25%">
<v-card-title
class="d-flex align-center justify-space-between pa-5"
>
<span class="tit ft-size_20 ft-weight_600"
>가이드 알람정보</span
>
</v-card-title>
</div>
<div ref="gridParent01" style="height : 75%">
<component
:ref="gridName01"
:is="loadGrid01 ? 'Grid' : null"
:gridName="gridName01"
:parentPrgmId="myPrgmId"
/>
</div>
</v-card>
</v-row>
<v-row class="pa-1" style="height:34%; width:100%">
<div style="height: 100%; width:100%">
<v-row style="height: 100%">
<v-col :cols="5" class="">
<v-card class="pa-1" style="height: 100%; width:100%">
<div style="height: 25%">
<v-card-title
class="d-flex align-center justify-space-between pa-5"
>
<span class="tit ft-size_20 ft-weight_600"
>설비 상세 정보</span
>
</v-card-title>
</div>
<div ref="gridParent02" style="height: 75%">
<component
:ref="gridName02"
:is="loadGrid02 ? 'Grid' : null"
:gridName="gridName02"
:parentPrgmId="myPrgmId"
@getRowsData="getRowData02"
/>
</div>
</v-card>
</v-col>
<v-col :cols="7" class="">
<v-card class="pa-1" style="height: 100%; width:100%">
<div style="height: 25%">
<v-card-title
class="d-flex align-center justify-space-between pa-5"
>
<span class="tit ft-size_20 ft-weight_600"
>시간별 TREND 정보</span
>
</v-card-title>
</div>
<div ref="trendChartParent" style="height: 75%">
<component
class="w100 h100"
:is="loadTrendChart ? 'Chart' : null"
:parentPrgmId="myPrgmId"
:chartName="'trendChart'"
/>
</div>
</v-card>
</v-col>
</v-row>
</div>
</v-row>
</v-col>
</v-row>
</div>
</template>
<script>
import { mapState, mapMutations, mapActions } from 'vuex';
import mixinGlobal from '@/mixin/global.js';
import { resize } from '@/mixin/resize.js';
import Utility from '~/plugins/utility';
import SelectBox from '@/components/common/select/SelectBox';
import SelectCmCycle from '@/components/common/select/SelectCmCycle';
import DatePicker from '@/components/common/Datepicker';
import Grid from '~/components/common/Grid';
import Chart from '~/components/common/Chart';
let myTitle;
let myPrgmId;
let paramKey;
export default {
mixins: [mixinGlobal, resize],
async asyncData(context) {
const myState = context.store.state;
myPrgmId = context.route.query.prgmId;
await context.store.commit('setActiveMenuInfo', myState.menuData[myPrgmId]);
myTitle = await myState.activeMenuInfo.menuNm;
},
meta: {
title: () => {
return myTitle;
},
prgmId: myPrgmId,
closable: true,
},
components: {
Utility,
SelectBox,
SelectCmCycle,
DatePicker,
Grid,
Chart,
},
data() {
return {
myPrgmId: myPrgmId,
initedFlag: false,
queryParams: null,
selectValueList01: [],
selectValueList02: [],
selectValueList03: [],
selectValueList04: [],
selectValue01: null,
selectValue02: null,
selectValue03: null,
selectValue04: null,
contentData01: {},
loadGrid01: false,
loadGrid02: false,
gridName01: 'grid01',
gridName02: 'grid02',
loadTrendChart: false,
};
},
computed: {
...mapState({
pageData: state => state.pageData[myPrgmId],
}),
fromDt() {
return this.pageData.fromDt;
},
},
watch: {
async $route(to, from) {
if (to.query.prgmId == myPrgmId) {
if (to.params.key) {
document.getElementById('refresh').click();
}
}
},
async selectValue01(value) {
if (this.initedFlag) {
// await this.search();
await this.getSelectValueList04();
}
},
async selectValue02(value) {
if (this.initedFlag) {
await this.getSelectValueList03();
}
},
async selectValue03(value) {
if (this.initedFlag) {
await this.getSelectValueList04();
}
},
async selectValue04(value) {
if (this.initedFlag) {
await this.search();
}
},
async fromDt(value) {
if (this.initedFlag) {
await this.search();
}
},
},
async beforeCreate() {
myPrgmId = this.$route.query.prgmId;
await this.$store.dispatch('chkOpenTabList', {
key: 'create',
prgmId: myPrgmId,
defaultData: defaultData,
});
},
created() {},
mounted() {
this.init();
},
beforeDestroy() {
this.initedFlag = false;
this.chkOpenTabList({ key: 'destroy', prgmId: myPrgmId });
},
methods: {
...mapMutations({
setChartOption: 'setChartOption',
}),
async init() {
await this.getSelectValueList();
await this.setQueryParams();
await this.search();
this.initedFlag = true;
},
async setQueryParams() {
this.queryParams = null;
if (paramKey == this.$route.params.key) {
return;
}
if (this.$route.params.key) {
paramKey = this.$route.params.key;
this.queryParams = this.$route.params;
}
if (this.queryParams && typeof this.queryParams == 'object') {
this.setPageData({
dateInitedFlag: true,
});
this.selectValue01 = this.queryParams['fabId'];
this.selectValue02 = this.queryParams['eqpmKindId'];
await this.getSelectValueList03();
this.selectValue03 = this.queryParams['eqpmGrpId'];
await this.getSelectValueList04();
this.selectValue04 = this.queryParams['eqpmId'];
this.setPageData({
fromDt: this.queryParams['fromDt'],
cmCycle: this.queryParams['cmCycle'],
});
}
},
async getSelectValueList() {
await this.getSelectValueList01();
await this.getSelectValueList02();
await this.getSelectValueList03();
await this.getSelectValueList04();
},
async getSelectValueList01() {
let res = await this.postApiReturn({
apiKey: 'selectFabCodeList',
resKey: 'fabCodeLists',
sendParam: {},
});
if (res.length > 0) {
this.selectValueList01 = await res.map(item => {
return {
text: item.eccNm,
value: item.eccId,
};
});
this.selectValue01 = this.selectValueList01[0].value;
} else {
this.selectValueList01 = [];
this.selectValue01 = null;
}
},
async getSelectValueList02() {
var res = await this.postApiReturn({
apiKey: 'selectEmsEqpmKindList',
resKey: 'eqpmGrpPysclQtyMngData',
sendParam: {},
});
if (res.length > 0) {
this.selectValueList02 = await res.map(item => {
return {
text: item.eqpmKindNm,
value: item.eqpmKindId,
data: {
...item,
},
};
});
this.selectValue02 = this.selectValueList02[0].value;
} else {
this.selectValueList02 = [];
this.selectValue02 = null;
}
},
async getSelectValueList03() {
var res = await this.postApiReturn({
apiKey: 'selectEmsEqpmGrpList',
resKey: 'eqpmGrpPysclQtyMngData',
sendParam: {
eqpmKindId: this.selectValue02,
},
});
if (res.length > 0) {
this.selectValueList03 = await res.map(item => {
return {
text: item.eqpmGrpNm,
value: item.eqpmGrpId,
data: {
...item,
},
};
});
this.selectValue03 = this.selectValueList03[0].value;
} else {
this.selectValueList03 = [];
this.selectValue03 = null;
}
},
async getSelectValueList04() {
var res = await this.postApiReturn({
apiKey: 'selectFabEqpmList',
resKey: 'enrgUseEqpmDetlMntrData',
sendParam: {
fabId: this.selectValue01,
eqpmGrpId: this.selectValue03,
},
});
if (res.length > 0) {
this.selectValueList04 = await res.map(item => {
return {
text: item.eqpmNm,
value: item.eqpmId,
data: {
...item,
},
};
});
this.selectValue04 = this.selectValueList04[0].value;
} else {
this.selectValueList04 = [];
this.selectValue04 = null;
}
},
async search() {
// console.log('search ...');
// console.log('selectValue01 : ', this.selectValue01);
// console.log('selectValue02 : ', this.selectValue02);
// console.log('selectValue03 : ', this.selectValue03);
// console.log('selectValue04 : ', this.selectValue04);
// console.log('cmCycle : ', this.pageData.cmCycle);
// console.log('fromDt : ', this.fromDt);
await this.setContentData();
this.setPageData({
dateInitedFlag: false,
});
},
async setContentData() {
await this.setContentData01();
await this.setContentData02();
await this.setContentData03();
// await this.setContentData04();
},
async setContentData01() {
var apiKey = null;
var res = null;
this.contentData01 = {};
if (this.pageData.cmCycle == 'CYC_DAY') {
apiKey = 'selectDailyEnrgUseMainGuideIdx';
} else if (this.pageData.cmCycle == 'CYC_MONTH') {
apiKey = 'selectMonthlyEnrgUseMainGuideIdx';
}
res = await this.postApiReturn({
apiKey: apiKey,
resKey: 'enrgUseEqpmDetlMntrData',
sendParam: {
eqpmGrpId: this.selectValue03,
eqpmId: this.selectValue04,
fromDt: this.fromDt,
},
});
this.contentData01 = await this.makeContentData01(res);
this.setChartGroup01(this.contentData01);
},
async setContentData02() {
const _this = this;
const myOptions = {
columnOptions: {
resizable: true,
},
};
const gridHeight = this.$refs.mainDiv.offsetHeight * 0.17;
var columnList = [
{ header: 'NO', name: 'no', width: 40, align: 'center' },
{ header: 'gdIdxId', name: 'gdIdxId', hidden: true },
{ header: 'totDttm', name: 'totDttm', hidden: true },
{ header: '발생일', name: 'totDt', width: 150, align: 'center' },
{ header: '발생시간대', name: 'totTm', width: 100, align: 'center' },
{ header: '가이드지표명', name: 'gdIdxNm', width: 200 },
{ header: '가이드값', name: 'totVal', hidden: true },
{ header: '주의값', name: 'caseStndVal', hidden: true },
{ header: '경고값', name: 'warnStndVal', hidden: true },
{ header: '알람종류', name: 'alrmKind', hidden: true },
{ header: '알람내용', name: 'alrmMsg' },
];
var res = [];
var newRes = [];
this.loadGrid01 = false;
res = await this.postApiReturn({
apiKey: 'selectEnrgUseGuideAlarmInfo',
resKey: 'enrgUseEqpmDetlMntrData',
sendParam: {
cmCycle: this.pageData.cmCycle,
eqpmId: this.selectValue04,
fromDt: this.fromDt,
alrmKind: ['WARN', 'CARE'],
},
});
for (var i = 0; i < res.length; i++) {
newRes.push({
...res[i],
no: i + 1,
});
}
this.setGridOption({
gridKey: this.gridName01,
value: Object.assign(Utility.defaultGridOption(gridHeight), myOptions),
});
this.setGridColumn({
gridKey: this.gridName01,
value: columnList,
});
this.setGridData({
gridKey: this.gridName01,
value: newRes,
});
this.loadGrid01 = true;
},
async setContentData03() {
const _this = this;
const myOptions = {
columnOptions: {
resizable: true,
},
};
const gridHeight = this.$refs.mainDiv.offsetHeight * 0.17;
var columnList = [
{ header: 'NO', name: 'no', align: 'center', width: 40 },
{ header: '물리량ID', name: 'pysclQtyId', width: 100, align: 'center' },
{ header: '물리량코드', name: 'pysclQtyCd' },
{ header: '물리량명', name: 'pysclQtyNm', width: 190 },
{ header: '물리량타입', name: 'pysclQtyTp', width: 100 },
];
var res = [];
var newRes = [];
this.loadGrid02 = false;
res = await this.postApiReturn({
apiKey: 'selectEnrgUseEqpmDescInfo',
resKey: 'enrgUseEqpmDetlMntrData',
sendParam: {
eqpmGrpId: this.selectValue03,
},
});
for (var i = 0; i < res.length; i++) {
newRes.push({
...res[i],
no: i + 1,
});
}
this.setGridOption({
gridKey: this.gridName02,
value: Object.assign(Utility.defaultGridOption(gridHeight), myOptions),
});
this.setGridColumn({
gridKey: this.gridName02,
value: columnList,
});
this.setGridData({
gridKey: this.gridName02,
value: newRes,
});
this.loadGrid02 = true;
await this.$nextTick();
this.$refs[this.gridName02].focus({
rowKey: 0,
columnName: 'no',
setScroll: true,
});
},
async setContentData04(selectedData) {
var res = null;
var _this = this;
var xAxisData = null;
var seriesData = null;
var sliderHandleSize = 100;
this.loadTrendChart = false;
xAxisData = this.makeTrendChartXaxisData();
if (this.pageData.cmCycle == 'CYC_MONTH') {
sliderHandleSize = ((24 / xAxisData.length) * 100 * 24) / 25;
}
res = await this.postApiReturn({
apiKey: 'selectEnrgUseHourlyTrendInfo',
resKey: 'enrgUseEqpmDetlMntrData',
sendParam: {
pysclQtyId: selectedData.pysclQtyId,
eqpmId: this.selectValue04,
fromDt: this.fromDt,
cmCycle: this.pageData.cmCycle,
},
});
seriesData = new Array(xAxisData.length).fill(NaN);
for (var i = 0; i < res.length; i++) {
if (this.pageData.cmCycle == 'CYC_MONTH') {
seriesData[res[i]['monthCnt']] = res[i]['totVal'];
} else if (this.pageData.cmCycle == 'CYC_DAY') {
seriesData[res[i]['dayCnt']] = res[i]['totVal'];
}
}
var chartOption = {
grid: {
top: '3%',
bottom: '25%',
},
tooltip: {
axisPointer: {
label: {
formatter: function(value) {
value = value.value;
return (
value.substring(5, 7) +
'월 ' +
value.substring(8, 10) +
'일 ' +
value.substring(11, 13) +
'시'
);
},
},
},
},
xAxis: {
data: xAxisData,
axisLabel: {
formatter: function(value) {
return value.substring(11, 13) + '시';
},
},
axisTick: {
interval: 23,
},
},
yAxis: {
type: 'value',
},
series: [
{
type: 'line',
data: seriesData,
},
],
dataZoom: [
{
type: 'slider',
// zoomLock: true,
zoomLock: false,
brushSelect: false,
start: 0, // 0-100 %
end: sliderHandleSize, // 0-100 %
},
{
type: 'inside',
zoomOnMouseWheel: false,
moveOnMouseMove: false,
moveOnMouseWheel: true,
},
],
};
this.setChartOption({ chartKey: 'trendChart', value: chartOption });
this.loadTrendChart = true;
},
async getRowData02(selectedData) {
await this.setContentData04(selectedData);
},
async makeContentData01(data) {
var result = {};
for (var i = 0; i < data.length; i++) {
if (!result.hasOwnProperty(data[i]['gdIdxId'])) {
result[data[i]['gdIdxId']] = {
gdIdxId: data[i]['gdIdxId'],
gdIdxNm: data[i]['gdIdxNm'],
data: [],
};
result[data[i]['gdIdxId']]['data'].push({
...data[i],
});
} else {
result[data[i]['gdIdxId']]['data'].push({
...data[i],
});
}
}
var idxData = await this.postApiReturn({
apiKey: 'selectEnrgUseMainIdxDesc',
resKey: 'eqpmIndMntrData',
sendParam: {
eqpmGrpId: this.selectValue03,
},
});
for (var i = 0; i < idxData.length; i++) {
if (!result.hasOwnProperty(idxData[i]['gdIdxId'])) {
result[idxData[i]['gdIdxId']] = {
gdIdxId: idxData[i]['gdIdxId'],
gdIdxNm: idxData[i]['gdIdxNm'],
data: [],
};
}
}
return result;
},
async setChartGroup01(data) {
this.loadChart = false;
await this.$nextTick();
this.initChartGroup01(data);
this.setChartGroup01Data(data);
this.loadChart = true;
},
initChartGroup01(data) {
var dataKeyList = Object.keys(data);
var currentChartData = null;
var chartKey = null;
for (var i = 0; i < dataKeyList.length; i++) {
currentChartData = data[dataKeyList[i]];
chartKey = 'chartGroup01_' + currentChartData['gdIdxId'];
this.setPageData({
[chartKey]: this.getGroup01ChartOption(),
});
}
},
setChartGroup01Data(data) {
var dataKeyList = Object.keys(data);
var currentChartData = null;
var chartKey = null;
var xAxisData = null;
var seriesData = null;
xAxisData = this.makeChartGroup01XaxisData();
for (var i = 0; i < dataKeyList.length; i++) {
seriesData = new Array(xAxisData.length).fill(NaN);
currentChartData = data[dataKeyList[i]];
chartKey = 'chartGroup01_' + currentChartData['gdIdxId'];
for (var j = 0; j < currentChartData['data'].length; j++) {
seriesData[currentChartData['data'][j]['dataNum']] =
currentChartData['data'][j]['totVal'];
}
this.$store.state.pageData[myPrgmId][chartKey]['xAxis'][
'data'
] = xAxisData;
this.$store.state.pageData[myPrgmId][chartKey]['series'][0][
'data'
] = seriesData;
}
},
getGroup01ChartOption() {
var chartOption = Utility.defaultChartOption(true);
chartOption['series'][0]['type'] = 'line';
chartOption['grid']['bottom'] = '3%';
// console.log('chartOption : ', chartOption);
return chartOption;
},
makeChartGroup01XaxisData() {
var result = [];
var paramsDt = this.fromDt;
if (this.pageData.cmCycle == 'CYC_MONTH') {
var tempDate = new Date(
paramsDt.substring(0, 4) +
'-' +
paramsDt.substring(4, 6) +
'-01 00:00',
);
var lastDayOfMonth = getLastDayOfMonth(tempDate);
for (var i = 1; i <= lastDayOfMonth; i++) {
result.push(i);
}
} else if (this.pageData.cmCycle == 'CYC_DAY') {
for (var i = 0; i < 24; i++) {
result.push(i);
}
}
return result;
},
makeTrendChartXaxisData() {
var result = [];
var paramsDt = this.fromDt;
var timezoneOffset = new Date().getTimezoneOffset() * 60000;
if (this.pageData.cmCycle == 'CYC_MONTH') {
var tempDate = new Date(
paramsDt.substring(0, 4) +
'-' +
paramsDt.substring(4, 6) +
'-01 00:00',
);
var lastDayOfMonth = getLastDayOfMonth(tempDate);
tempDate = new Date(tempDate - timezoneOffset);
result.push(tempDate.toISOString());
for (var i = 0; i < 24 * lastDayOfMonth - 1; i++) {
tempDate = addHours(1, tempDate);
result.push(tempDate.toISOString());
}
} else if (this.pageData.cmCycle == 'CYC_DAY') {
var tempDate = new Date(
paramsDt.substring(0, 4) +
'-' +
paramsDt.substring(4, 6) +
'-' +
paramsDt.substring(6, 8) +
' 00:00',
);
tempDate = new Date(tempDate - timezoneOffset);
result.push(tempDate.toISOString());
for (var i = 0; i < 23; i++) {
tempDate = addHours(1, tempDate);
result.push(tempDate.toISOString());
}
}
return result;
},
},
};
function addHours(h, date) {
date.setTime(date.getTime() + h * 60 * 60 * 1000);
return date;
}
function getLastDayOfMonth(date) {
return new Date(
new Date(date.getFullYear(), date.getMonth() + 1, 1) - 1,
).getDate();
}
const defaultData = {
dateInitedFlag: false,
cmCycle: 'CYC_MONTH',
cmCycleList: [
{ idx: 0, text: '월', value: 'CYC_MONTH' },
{ idx: 1, text: '일', value: 'CYC_DAY' },
],
defaultRange: {
CYC_MONTH: 1,
CYC_DAY: 1,
},
fromDt: Utility.setFormatDate(new Date(), 'YYYYMM'), // 조회 시작일
grid01: {
data: [],
column: [],
option: {},
},
grid02: {
data: [],
column: [],
option: {},
},
trendChart: Utility.defaultChartOption(true),
};
</script>

907
pages/ems/effc/EnrgUsePlanPage.vue Normal file
View File

@ -0,0 +1,907 @@
<template>
<div ref="mainDiv" class="l-layout">
<v-row ref="searchFilter">
<v-col :cols="12">
<v-card class="searchFilter">
<v-row align="center" no-gutters>
<v-col :cols="2">
<DatePicker :parentPrgmId="myPrgmId" :label="'조회연도'" />
</v-col>
<v-col :cols="3">
<component
:is="'SelectBox'"
ref="SelectBox1"
:propsValue="selectValue01"
:itemList="selectValueList01"
:label="'FAB'"
@update:propsValue="selectValue01 = $event"
/>
</v-col>
<v-col :cols="3">
<component
:is="'SelectBox'"
ref="SelectBox2"
:propsValue="selectValue02"
:itemList="selectValueList02"
:label="'설비종류'"
@update:propsValue="selectValue02 = $event"
/>
</v-col>
<v-col :cols="3">
<component
:is="'SelectBox'"
ref="SelectBox3"
:propsValue="selectValue03"
:itemList="selectValueList03"
:label="'설비그룹'"
@update:propsValue="selectValue03 = $event"
/>
</v-col>
<v-col :cols="1" class="text-right">
<BtnSearch @click="search" />
<component
ref="EnrgUsePlanModiPop"
:is="'EnrgUsePlanModiPop'"
:label="'test'"
:parentPrgmId="myPrgmId"
@gridEditingFinish="gridEditingFinish"
/>
</v-col>
</v-row>
</v-card>
</v-col>
</v-row>
<v-row ref="contents">
<v-col :cols="12" style="height: 100%">
<v-card class="pb-5 h100">
<div class="d-flex align-center justify-space-between pa-4">
<v-card-title class="pa-0 custom-title-4"
>설비별 에너지 계획 리스트</v-card-title
>
<Buttons
:parentPrgmId="myPrgmId"
:bindingData="gridName"
:btnActionsFnc="btnActions"
/>
</div>
<div class="h100 px-5" style="height:calc(100% - 70px)">
<div ref="gridParent" class="w100 h100">
<component
:ref="gridName"
:is="loadGrid ? 'Grid' : null"
:gridName="gridName"
:parentPrgmId="myPrgmId"
:editorGrid="true"
@getRowsData="getRowData"
/>
</div>
</div>
</v-card>
</v-col>
</v-row>
</div>
</template>
<script>
import { mapState, mapActions } from 'vuex';
import mixinGlobal from '@/mixin/global.js';
import { resize } from '@/mixin/resize.js';
import SelectBox from '@/components/common/select/SelectBox';
import BtnSearch from '~/components/common/button/BtnSearch';
import DatePicker from '~/components/common/Datepicker';
import Grid from '~/components/common/Grid';
import Utility from '~/plugins/utility';
import Buttons from '~/components/common/button/Buttons';
import EnrgUsePlanModiPop from '~/components/common/modal/EnrgUsePlanModiPop';
import DateUtility from '~/plugins/dateUtility';
let myTitle;
let myPrgmId;
let stateOfDarkMode;
export default {
mixins: [mixinGlobal, resize],
async asyncData(context) {
const myState = context.store.state;
myPrgmId = context.route.query.prgmId;
await context.store.commit('setActiveMenuInfo', myState.menuData[myPrgmId]);
myTitle = await myState.activeMenuInfo.menuNm;
stateOfDarkMode = await myState.isDarkMode;
},
meta: {
title: () => {
return myTitle;
},
prgmId: myPrgmId,
closable: true,
},
components: {
BtnSearch,
SelectBox,
DatePicker,
Grid,
Buttons,
EnrgUsePlanModiPop,
},
data() {
return {
myPrgmId: myPrgmId,
darkModeFg: stateOfDarkMode,
btnStyleDict: null,
initedFlag: false,
loadGrid: false,
gridName: 'grid01',
selectValue01: null,
selectValueList01: [],
selectValue02: null,
selectValueList02: [],
selectValue03: null,
selectValueList03: [],
fromDt: new Date().getFullYear(),
rowKey: null,
edtingFinishFlag: 'Y',
// gridName: 'rowGrid',
};
},
computed: {
// ...mapState({
// pageData: state => state.pageData[myPrgmId]
// }),
...mapState({
isDarkMode: state => state.isDarkMode,
}),
chkIsDarkMode() {
return this.isDarkMode;
},
chkIsFind() {
// 조회 플래그
return this.pageData.isFind;
},
chkFromDt() {
return this.pageData.fromDt;
},
},
watch: {
chkIsDarkMode(val) {
this.darkModeFg = val;
// this.btnStyleDict = val;
},
chkFromDt(val) {
this.fromDt = val;
},
chkIsFind(val) {
if (val) this.search();
},
async selectValue01(val) {
if (this.initedFlag) {
this.setPageData({ isFind: true });
}
},
async selectValue02(val) {
if (this.initedFlag) {
this.setPageData({ eqpmKindId: val });
await this.getEqpmGrp();
}
},
async selectValue03(val) {
if (this.initedFlag) {
this.setPageData({ isFind: true });
}
},
},
async beforeCreate() {
myPrgmId = this.$route.query.prgmId;
await this.$store.dispatch('chkOpenTabList', {
key: 'create',
prgmId: myPrgmId,
defaultData: defaultData,
});
},
created() {},
async mounted() {
await this.init();
this.initedFlag = true;
},
beforeDestroy() {
this.chkOpenTabList({ key: 'destroy', prgmId: myPrgmId });
},
methods: {
...mapActions({
getCodeList: 'modules/search/getCodeList',
getBlocMstrList: 'modules/search/getBlocMstrList',
getAddInfoList: 'modules/search/getAddInfoList',
}),
async init() {
await this.getFab();
await this.getEqpmKind();
await this.getEqpmGrp();
await this.gridInit();
},
search() {
// this.gridInit();
this.getGridData();
this.setPageData({
isFind: false,
});
},
async getFab() {
let res = await this.postApiReturn({
apiKey: 'selectFabCodeList',
resKey: 'fabCodeLists',
sendParam: {},
// sendParam: {level:3},
});
if (res.length > 0) {
this.selectValueList01 = await res.map(item => {
return {
text: item.eccNm,
value: item.eccId,
};
});
// this.selectValueList01.unshift({
// text: '전체',
// value: null,
// });
this.selectValue01 = this.selectValueList01[0].value;
} else {
this.selectValueList01 = [];
this.selectValue01 = null;
}
this.setPageData({
eccIdList: this.selectValueList01,
eccId: this.selectValue01,
});
},
async getEqpmKind() {
let res = await this.postApiReturn({
apiKey: 'selectEqpmKindCodeList',
resKey: 'eqpmKindCodeLists',
sendParam: {},
});
if (res.length > 0) {
this.selectValueList02 = await res.map(item => {
return {
text: item.eqpmKindNm,
value: item.eqpmKindId,
};
});
this.selectValue02 = this.selectValueList02[0].value;
} else {
this.selectValueList02 = [];
this.selectValue02 = null;
}
this.setPageData({
eqpmKindList: this.selectValueList02,
eqpmKindId: this.selectValue02,
});
},
async getEqpmGrp() {
let res = await this.postApiReturn({
apiKey: 'selectEqpmGrpCodeList',
resKey: 'eqpmGrpCodeLists',
sendParam: { eqpmKindId: this.selectValue02 },
});
if (res.length > 0) {
this.selectValueList03 = await res.map(item => {
return {
text: item.eqpmGrpNm,
value: item.eqpmGrpId,
};
});
this.selectValue03 = this.selectValueList03[0].value;
} else {
this.selectValueList03 = [];
this.selectValue03 = null;
}
this.setPageData({
eqpmGrpList: this.selectValueList03,
eqpmGrpId: this.selectValue03,
});
},
gridInit() {
this.loadGrid = false;
let _this = this;
const gridHeight = this.$refs.gridParent.offsetHeight - 50;
let yyyyCol = this.pageData.fromDt + '년';
let childCols1 = [];
let myComplexColumns = [
{
header: yyyyCol,
name: 'yyyyCol',
childNames: childCols1,
},
{
header: '설비명',
name: 'fakeEqpmNm',
childNames: ['eqpmNm', 'btnCol'],
hideChildHeaders: true,
},
];
let myOptions = {
columnOptions: {
resizable: true,
},
header: {
height: 65,
complexColumns: myComplexColumns,
},
};
class CustumButton {
constructor(props) {
// v-btn v-btn--is-elevated v-btn--has-bg theme--dark v-size--default
const el = document.createElement('button');
const { grid, rowKey, columnInfo } = props;
$(el).addClass('tui-grid-cell-content');
// $(el).css('text-align', 'center');
el.classList.add('v-btn');
// el.style.width = '80%';
// el.style.height = '80%';
// el.style.boxShadow = '0px 0px 0px 2px #cbced6';
// el.style.background = 'linear-gradient(to bottom, #242940 5%, #476e9e 100%)';
// el.style.backgroundColor = '#144985';
el.style.borderRadius = '7px';
el.style.border = '1px solid #4e6096';
// el.style.display = 'inline-block';
// el.style.cursor = 'pointer';
el.style.color = '#ffffff';
// el.style.fontFamily = 'Arial';
el.style.padding = '6% 3%';
// el.style.textDecoration = 'none';
// el.style.textShadow = '0px 1px 0px #283966';
el.innerText = columnInfo.renderer.options.value;
this.el = el;
this.disabled = columnInfo.renderer.options.disabled || false;
if (!this.disabled) {
// hover 기능 구현
this.el.addEventListener('mouseover', function(event) {
// console.log('darkModeFg', _this.darkModeFg);
// console.log('event',event.fromElement);
// console.log('event',document.defaultView.getComputedStyle(el).getPropertyValue('background-color'));
// rgb(85, 130, 220) // light
// el.style.backgroundColor = '#26578F'; // rgb(20, 73, 133) // dark
// let btnColor = _this.darkModeFg? {mouseOver: '#26578F', mouseOut: '#144985'} : {mouseOver: 'rgb(85, 130, 220)', mouseOut: 'rgb(71, 119, 217)'};
// el.style.backgroundColor = btnColor['mouseOver'];
});
this.el.addEventListener('mouseout', function(event) {
// rgb(71, 119, 217) // light
// el.style.backgroundColor = '#144985'; // dark
// console.log('event',event.fromElement);
// let btnColor = _this.darkModeFg? {mouseOver: '#26578F', mouseOut: '#144985'} : {mouseOver: 'rgb(85, 130, 220)', mouseOut: 'rgb(71, 119, 217)'};
// el.style.backgroundColor = btnColor['mouseOut'];
});
// click 이벤트
this.el.addEventListener('click', function(event) {
let gridData = grid.store.data.rawData;
let rowNum = gridData[rowKey].rowNum;
let selectedGridData = gridData.filter(item => {
return item.rowNum === rowNum && item.gubun == '2PLAN';
});
// this.popupDialogFg = true;
_this.setPageData({ eqpmNm: selectedGridData[0].eqpmNm });
_this.setPageData({ popupDialogFg: true });
});
}
}
getElement() {
return this.el;
}
getValue() {
// return this.el.value;
}
mounted() {
// this.el.focus();
}
}
let myColumns = [
{
header: '설비그룹ID',
name: 'eqpmGrpId',
width: 50,
align: 'left',
hidden: true,
},
{
header: '설비ID',
name: 'eqpmId',
width: 50,
align: 'left',
hidden: true,
},
{
header: 'NO',
name: 'rowNum',
width: 40,
align: 'center',
// hidden: true,
},
{
header: 'FAB',
name: 'fab',
width: 100,
align: 'left',
// hidden: true,
},
{
header: '공정명',
name: 'eccNm',
width: 100,
align: 'left',
hidden: true,
},
{
header: '설비그룹',
name: 'eqpmGrpNm',
minwidh: 200,
align: 'left',
// hidden: true,
},
{
header: '설비명',
name: 'eqpmNm',
minWidth: 200,
align: 'left',
// hidden: true,
},
{
header: '',
name: 'btnCol',
width: 70,
align: 'center',
renderer: {
type: CustumButton,
options: {
value: '계획수정',
},
},
// ,editor: {
// type: CustomEditor,
// align: "center"
// }
},
{
header: '구분',
name: 'gubun',
width: 80,
align: 'left',
// hidden: true,
formatter({ value }) {
let retVal = '';
if (value == '1RSLT') {
retVal = '전년실적';
} else if (value == '2PLAN') {
retVal = '계획';
} else {
retVal = value;
}
return retVal;
},
},
{
header: 'rowStat',
name: 'rowStat',
hidden: true,
},
{
header: 'readObjId',
name: 'readObjId',
hidden: true,
},
];
for (var i = 1; i <= 12; i++) {
let qty = 'qty' + i.toString().padStart(2, '0');
myColumns.push({
header: i.toString() + '월',
name: qty,
width: 73,
align: 'right',
editor: 'text',
formatter: this.numberFormatter,
});
childCols1.push(qty);
}
this.setGridColumn({
gridKey: this.gridName,
value: myColumns,
});
this.setGridOption({
gridKey: this.gridName,
value: Object.assign(Utility.defaultGridOption(gridHeight), myOptions),
});
this.$nextTick(() => {
this.loadGrid = true;
this.getGridData();
});
},
async getRowData(data) {
this.rowKey = data.rowKey;
this.edtingFinishFlag = 'Y';
// 선택한 row의 계획data만 pageData에 저장
let gridData = this.$refs.grid01.getData();
let selectedGridData = gridData.filter(item => {
return item.rowNum == data.rowNum;
});
await this.$nextTick(() => {});
this.setPageData({
rowGrid2SelectData: selectedGridData,
});
this.setPageData({
rowGridSelectKey: data.rowKey,
rowGridSelectData: data,
});
// this.setPageData({
// rowGridSelectKey: selectedGridData[1].rowKey,
// rowGridSelectData: selectedGridData[1],
// });
},
async getGridData() {
let res = [];
res = await this.postApiReturn({
apiKey: 'selectEnrgUsePlanData',
resKey: 'enrgUsePlanDatas',
sendParam: {
fromDt: this.fromDt,
pastDt: parseInt(this.fromDt) - 1,
eqpmGrpId: this.selectValue03,
eccId: this.selectValue01,
},
});
let fabText = this.pageData.eccIdList.filter(item => {
return item.value == this.selectValue01;
})[0]['text'];
let newRes = res.map(item => {
const newObj = {
...item,
rowStat: null,
fab: fabText,
};
return newObj;
});
function setRowSpanAttribute(
separateColStandardList,
res,
targetAttributeName,
rowSpanList,
) {
if (!(res.length && res.length >= 2)) {
return;
}
var valueList = [];
var rowSpanValueList = [];
var currentIdx = 0;
for (var i = 0; i < res.length; i++) {
valueList.push(res[i][targetAttributeName]);
}
function makeCurrentSeparateVal(idx, separateColStandardList) {
let returnVal = '';
for (var i = 0; i < separateColStandardList.length; i++) {
returnVal += res[idx][separateColStandardList[i]];
}
return returnVal;
}
let beforeSeparateVal = makeCurrentSeparateVal(
0,
separateColStandardList,
);
rowSpanValueList[0] = [valueList[0], 1, currentIdx];
for (var i = 1; i < valueList.length; i++) {
currentIdx += 1;
let currentSeparateVal = makeCurrentSeparateVal(
i,
separateColStandardList,
);
if (
currentSeparateVal == beforeSeparateVal &&
valueList[i] == rowSpanValueList[rowSpanValueList.length - 1][0]
) {
rowSpanValueList[rowSpanValueList.length - 1][1] += 1;
} else {
rowSpanValueList[rowSpanValueList.length] = [
valueList[i],
1,
currentIdx,
];
beforeSeparateVal = currentSeparateVal;
}
}
for (var i = 0; i < rowSpanValueList.length; i++) {
if (rowSpanValueList[i][1] === 1) {
continue;
}
if (res[rowSpanValueList[i][2]]['_attributes'] == undefined) {
res[rowSpanValueList[i][2]]['_attributes'] = {
rowSpan: new Object(),
};
//추가용
res[rowSpanValueList[i][2]]['_attributes']['className'] = {
column: new Object(),
};
for (var j = 0; j < rowSpanList.length; j++) {
res[rowSpanValueList[i][2]]['_attributes']['className']['column'][
rowSpanList[j]
] = ['colrowspan'];
}
//추가용
}
res[rowSpanValueList[i][2]]['_attributes']['rowSpan'][
targetAttributeName
] = rowSpanValueList[i][1];
res[rowSpanValueList[i][2]]['_attributes']['className']['column'][
targetAttributeName
].push(['rowrowspan']);
}
}
let rowSpanList = ['rowNum', 'fab', 'eqpmGrpNm', 'eqpmNm', 'btnCol'];
setRowSpanAttribute(['eqpmId'], newRes, 'rowNum', rowSpanList);
setRowSpanAttribute(['rowNum'], newRes, 'fab', rowSpanList);
setRowSpanAttribute(['rowNum'], newRes, 'eqpmGrpNm', rowSpanList);
setRowSpanAttribute(['rowNum'], newRes, 'eqpmNm', rowSpanList);
setRowSpanAttribute(['rowNum'], newRes, 'btnCol', rowSpanList);
this.setGridData({
gridKey: this.gridName,
value: newRes,
});
this.$nextTick(() => {
this.setRowDisabled();
});
// let temp = newRes.filter(item => {
// return item.gubun=='1RSLT'
// })
// console.log('temp', temp);
// for(var i=0; i<temp.length; i++){
// console.log(temp.rowKey);
// }
},
numberFormatter({ value }) {
// return Utility.setFormatIntDecimal(value, 0);
if (value === undefined || value === null || value === '') {
return '';
}
var newValue = value.toString().split('.');
// 숫자와 문자가 섞여있을 경우 구분하는 로직 추가
var regex = /[^0-9]/g; // 숫자가 아닌 문자열을 선택하는 정규식
for (var i = 0; i < newValue.length; i++) {
if (regex.test(newValue[i])) {
newValue[i] = newValue[i].toString().replace(regex, '');
}
}
if (parseInt(newValue[1]) >= 5) {
return (parseInt(newValue[0]) + 1)
.toString()
.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
} else {
return newValue[0].toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
}
// return (
// newValue[0].toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') +
// (newValue[1] ? '.' + newValue[1] : '')
// );
},
async btnActions(action) {
let dataArr = [];
switch (action) {
case 'save':
if (this.edtingFinishFlag == 'Y') {
await this.$refs[this.gridName].editingFinish({
rowKey: this.rowKey,
});
}
// let temp = this.$refs[this.gridName].getData();
dataArr = this.$refs[this.gridName].save();
var validCheck = true;
if (dataArr.length > 0) {
dataArr.filter(item => {
if (item.eqpmGrpId == '' || item.eqpmId == null) {
alert('필수 입력값을 입력해주세요.');
validCheck = false;
}
});
let dataList = [];
for (var i = 0; i < dataArr.length; i++) {
if (dataArr[i]['gubun'] == '2PLAN') {
for (var j = 1; j <= 12; j++) {
let temp = {};
let qty = 'qty' + j.toString().padStart(2, '0');
temp['eqpmId'] = dataArr[i]['eqpmId'];
temp['readObjId'] = dataArr[i]['readObjId'];
temp['objMm'] =
this.pageData.fromDt + j.toString().padStart(2, '0');
temp['rowStat'] = dataArr[i]['rowStat'];
temp['planVal'] =
dataArr[i][qty] == ''
? null
: parseInt(dataArr[i][qty]) == 0
? 0
: dataArr[i][qty];
dataList.push(temp);
}
}
}
// console.log('dataList', dataList);
// // dataArr[i]
// }
if (validCheck) {
const sendParam = {
datas: {
dsEmsEqpmMmPlanDatas: dataList,
},
params: {},
};
await this.postUpdateApi({
apiKey: 'saveEmsEqpmMmPlanDatas',
sendParam: sendParam,
});
this.$nextTick(() => {
// this.setPageData({ isFind: true });
this.search();
});
}
} else {
alert('저장할 내용이 없습니다.');
}
break;
default:
break;
}
},
gridEditingFinish(data) {
this.$refs[this.gridName].editingFinish(data);
},
setRowDisabled() {
let gridData = this.$refs[this.gridName].getData();
let rowKeyList = gridData
.filter(item => {
return item.gubun == '1RSLT';
})
.map(item => item.rowKey);
for (var i = 0; i < rowKeyList.length; i++) {
this.$refs[this.gridName].disableRow(rowKeyList[i]);
}
if (gridData.length > 0) {
try {
this.$refs[this.gridName].focus({
//rowKey: 0,
rowKey: 0,
setScroll: true,
});
} catch (error) {
console.log('error[nextTick grid] : ', error);
}
}
},
},
};
const dt = new Date();
const yyyy = dt.getFullYear();
const defaultData = {
isFind: false, // true 경우 조회
/* 검색옵션 */
cmCycle: 'CYC_YEAR', // DatePicker 옵션
fromDt: `${yyyy}`, // DatePicker 옵션
eccIdList: [], // FAB
eccId: '', // FAB
eqpmKindList: [], // 설비종류
eqpmKindId: '', // 설비종류
eqpmGrpList: [], // 설비그룹
eqpmGrpId: '', // 설비그룹
// Grid에서 선택된 데이터
rowGridSelectKey: 0,
rowGridSelectData: null,
rowGrid2SelectData: [
{
gubun: '',
eccNm: '',
eqpmGrpId: '',
eqpmGrpNm: '',
eqpmId: '',
eqpmNm: '',
qty01: '',
qty02: '',
qty03: '',
qty04: '',
qty05: '',
qty06: '',
qty07: '',
qty08: '',
qty09: '',
qty10: '',
qty11: '',
qty12: '',
btnCol: '',
rowStat: null,
},
],
// popup dialog flag
popupDialogFg: false,
eqpmNm: '',
//grid 설정
grid01: {
data: [],
column: [],
option: { header: { complexColumns: [] } },
defaultRow: {
gubun: '',
eccNm: '',
eqpmGrpId: '',
eqpmGrpNm: '',
eqpmId: '',
eqpmNm: '',
qty01: '',
qty02: '',
qty03: '',
qty04: '',
qty05: '',
qty06: '',
qty07: '',
qty08: '',
qty09: '',
qty10: '',
qty11: '',
qty12: '',
btnCol: '',
rowStat: null,
},
buttonAuth: {
add: false,
remove: false,
save: true,
excel: false,
},
},
};
</script>
<style lang="scss">
// @import '@/assets/scss/common.scss';
@import '@/assets/scss/var.scss';
@each $theme in dark, light {
.v-application.#{$theme}-mode {
.tui-grid {
&-row-odd,
&-row-even {
&:hover > .colrowspan {
background-color: map-deep-get(
$config,
#{$theme},
'tui-grid-cell-backgroundColor'
) !important;
.tui-grid-cell-content {
color: map-deep-get($config, #{$theme}, 'activate') !important;
}
}
}
&-cell {
&.row-selected.colrowspan {
background-color: map-deep-get(
$config,
#{$theme},
'tui-grid-cell-backgroundColor'
) !important;
.tui-grid-cell-content {
color: map-deep-get($config, #{$theme}, 'activate') !important;
}
}
}
}
}
}
</style>

558
pages/ems/effc/EnrgUseTotSummPage.vue Normal file
View File

@ -0,0 +1,558 @@
<template>
<div ref="mainDiv" class="l-layout">
<v-row ref="searchFilter">
<v-col :cols="12">
<v-card class="searchFilter">
<v-row align="center" no-gutters>
<v-col :cols="3">
<component
:is="'SelectBox'"
ref="SelectBox1"
:propsValue="selectValue01"
:itemList="selectValueList01"
:label="'설비종류'"
@update:propsValue="selectValue01 = $event"
/>
</v-col>
<v-col :cols="3">
<component
:is="'DatePicker'"
:label="'대상연월'"
:parentPrgmId="myPrgmId"
/>
</v-col>
<v-col :cols="3"> </v-col>
<v-col :cols="3" class="text-right">
<v-btn v-show="false" :ripple="false" @click="test()">TEST</v-btn>
<v-btn :ripple="false" @click="search()">조회</v-btn>
</v-col>
</v-row>
</v-card>
</v-col>
</v-row>
<v-row ref="contents" style="overflow: auto;">
<v-col>
<v-card class="pb-5 px-2">
<div
v-for="(value, key, index) in contentData"
:key="'key1_' + index"
>
<v-card-title
class="d-flex align-center justify-space-between pa-3"
>
<span class="tit ft-size_20 ft-weight_600">{{
value.eqpmGrpNm
}}</span>
</v-card-title>
<v-row>
<v-col
:cols="3"
v-for="(item, i) in value.chartData"
:key="'key2_' + i"
>
<div
class="v-box"
style="height : 330px"
:ref="item.eqpmGrpId + '_' + item.fabId"
@click="chartClickEvent(item, $event)"
>
<v-col :cols="12" style="height:100%">
<div style="height: 10%">
<strong>{{ item.fabNm }}</strong>
</div>
<div style="height: 5%"></div>
<div style="height: 10%; text-align:center">
<v-row>
<v-col :cols="1"> </v-col>
<v-col :cols="4">
일에너지 :
</v-col>
<v-col :cols="4" style="text-align:right">
{{ item.dayVal }}
</v-col>
<v-col :cols="2" style="text-align:left">
MWh
</v-col>
<v-col :cols="1"> </v-col>
</v-row>
</div>
<div style="height: 10%; text-align:center">
<v-row>
<v-col :cols="1"> </v-col>
<v-col :cols="4">
월에너지 :
</v-col>
<v-col :cols="4" style="text-align:right">
{{ item.mnthVal }}
</v-col>
<v-col :cols="2" style="text-align:left">
MWh
</v-col>
<v-col :cols="1"> </v-col>
</v-row>
</div>
<div style="height: 5%"></div>
<div style="height: 10%; text-align:center">
에너지사용효율
</div>
<div style="height: 50%">
<component
class="w100 h100"
:is="loadChart ? 'Chart' : null"
:parentPrgmId="myPrgmId"
:chartName="
'chart_' + item.eqpmGrpId + '_' + item.fabId
"
:ref="'chart_' + item.eqpmGrpId + '_' + item.fabId"
/>
</div>
</v-col>
</div>
</v-col>
</v-row>
</div>
</v-card>
</v-col>
</v-row>
</div>
</template>
<script>
import { mapState, mapMutations, mapActions } from 'vuex';
import mixinGlobal from '@/mixin/global.js';
import { resize } from '@/mixin/resize.js';
import Utility from '~/plugins/utility';
import SelectBox from '@/components/common/select/SelectBox';
import BtnSearch from '~/components/common/button/BtnSearch';
import DatePicker from '@/components/common/Datepicker';
import Chart from '~/components/common/Chart';
let myTitle;
let myPrgmId;
export default {
mixins: [mixinGlobal, resize],
async asyncData(context) {
const myState = context.store.state;
myPrgmId = context.route.query.prgmId;
await context.store.commit('setActiveMenuInfo', myState.menuData[myPrgmId]);
myTitle = await myState.activeMenuInfo.menuNm;
},
meta: {
title: () => {
return myTitle;
},
prgmId: myPrgmId,
closable: true,
},
components: {
Utility,
SelectBox,
BtnSearch,
DatePicker,
Chart,
},
data() {
return {
myPrgmId: myPrgmId,
initedFlag: false,
selectValueList01: [], // 설비종류 리스트
selectValue01: null,
contentData: {},
loadChart: false,
testFlag: false,
};
},
computed: {
...mapState({
pageData: state => state.pageData[myPrgmId],
}),
fromDt() {
return this.pageData.fromDt;
},
},
watch: {
async selectValue01(value) {
if (this.initedFlag) {
await this.search();
}
},
async fromDt(value) {
if (this.initedFlag) {
await this.search();
}
},
},
async beforeCreate() {
myPrgmId = this.$route.query.prgmId;
await this.$store.dispatch('chkOpenTabList', {
key: 'create',
prgmId: myPrgmId,
defaultData: defaultData,
});
},
created() {},
mounted() {
this.init();
},
beforeDestroy() {
this.initedFlag = false;
this.chkOpenTabList({ key: 'destroy', prgmId: myPrgmId });
},
methods: {
...mapMutations({
setChartOption: 'setChartOption',
}),
async test() {
this.testFlag = !this.testFlag;
await this.search();
},
async init() {
await this.getSelectValueList01();
await this.search();
this.initedFlag = true;
},
async search() {
var enrgUseTotSummData = await this.getEnrgUseTotSummData();
var data = this.replaceUndefined(enrgUseTotSummData);
var dataGroupByEqpmGrpId = this.groupByEqpmGrpId(data);
this.contentData = dataGroupByEqpmGrpId;
this.setContent(this.contentData);
},
async getSelectValueList01() {
var res = await this.postApiReturn({
apiKey: 'selectEmsEqpmKindList',
resKey: 'eqpmGrpPysclQtyMngData',
sendParam: {},
});
if (res.length > 0) {
this.selectValueList01 = await res.map(item => {
return {
text: item.eqpmKindNm,
value: item.eqpmKindId,
data: {
...item,
},
};
});
this.selectValue01 = this.selectValueList01[0].value;
} else {
this.selectValueList01 = [];
this.selectValue01 = null;
}
},
async getEnrgUseTotSummData() {
var res = await this.postApiReturn({
apiKey: 'selectEnrgUseTotSumm',
resKey: 'data',
sendParam: {
fromDt: this.pageData.fromDt,
eqpmKind: this.selectValue01,
},
});
if (this.testFlag == true) {
res = [
{
eqpmGrpNm: '냉동기저온',
fabId: 'ECC000003',
eqpmGrpId: 'EQG000001',
fabNm: '삼천1공장',
dayVal: 252.55,
mnthVal: 4800.12,
planVal: 4400,
effcRt: 87.5,
},
{
eqpmGrpNm: '냉동기저온',
fabId: 'ECC000008',
eqpmGrpId: 'EQG000001',
fabNm: '삼천2공장',
dayVal: 353.46,
mnthVal: 2000.12,
planVal: 1800,
effcRt: 86,
},
{
eqpmGrpNm: '냉동기저온',
fabId: 'ECC000009',
eqpmGrpId: 'EQG000001',
fabNm: '삼천3공장',
dayVal: 353.46,
mnthVal: 2000.12,
planVal: 1800,
effcRt: 86,
},
{
eqpmGrpNm: '냉동기저온',
fabId: 'ECC000010',
eqpmGrpId: 'EQG000001',
fabNm: '삼천4공장',
dayVal: 553.46,
mnthVal: 3000.12,
planVal: 2800,
effcRt: 90,
},
{
eqpmGrpNm: '냉동기저온',
fabId: 'ECC000011',
eqpmGrpId: 'EQG000001',
fabNm: '삼천5공장',
dayVal: 453.46,
mnthVal: 3000.12,
planVal: 2800,
effcRt: 86,
},
{
eqpmGrpNm: '냉동기고온',
fabId: 'ECC000008',
eqpmGrpId: 'EQG000002',
fabNm: '삼천2공장',
dayVal: 444,
mnthVal: 8888.888,
planVal: 6000,
effcRt: 72.44,
},
{
eqpmGrpNm: 'test1',
fabId: 'ECC000008',
eqpmGrpId: 'EQG000007',
fabNm: '삼천2공장',
dayVal: 455,
mnthVal: 9999.999,
planVal: 5000,
effcRt: 50.555,
},
];
}
return res;
},
groupByEqpmGrpId(data) {
var result = {};
for (var i = 0; i < data.length; i++) {
if (!result.hasOwnProperty(data[i]['eqpmGrpId'])) {
var tempObject = {};
tempObject.eqpmGrpId = data[i]['eqpmGrpId'];
tempObject.eqpmGrpNm = data[i]['eqpmGrpNm'];
tempObject.chartData = [];
tempObject.chartData.push({
...data[i],
});
result[data[i]['eqpmGrpId']] = tempObject;
} else {
result[data[i]['eqpmGrpId']].chartData.push({
...data[i],
});
}
}
return result;
},
replaceUndefined(data) {
var dataKeyList = ['dayVal', 'mnthVal', 'planVal', 'effcRt'];
var replaceValList = [0, 0, 0, 0];
// var replaceValList = [666666.66, 252.35, '', 50];
for (var i = 0; i < data.length; i++) {
for (var j = 0; j < dataKeyList.length; j++) {
if (data[i][dataKeyList[j]] == undefined) {
data[i][dataKeyList[j]] = replaceValList[j];
}
}
}
return data;
},
async setContent(data) {
this.initChart(data);
this.loadChart = false;
await this.$nextTick();
this.setChartData(data);
this.loadChart = true;
},
initChart(data) {
var dataKeyList = Object.keys(data);
var currentChartData = null;
var chartKey = null;
for (var i = 0; i < dataKeyList.length; i++) {
for (var j = 0; j < data[dataKeyList[i]].chartData.length; j++) {
currentChartData = data[dataKeyList[i]].chartData[j];
chartKey =
'chart_' +
currentChartData['eqpmGrpId'] +
'_' +
currentChartData['fabId'];
this.setPageData({
[chartKey]: this.getGuageChartOption(),
});
}
}
},
async setChartData(data) {
var dataKeyList = Object.keys(data);
var currentChartData = null;
var chartKey = null;
var chartOption = null;
for (var i = 0; i < dataKeyList.length; i++) {
for (var j = 0; j < data[dataKeyList[i]].chartData.length; j++) {
currentChartData = data[dataKeyList[i]].chartData[j];
chartKey =
'chart_' +
currentChartData['eqpmGrpId'] +
'_' +
currentChartData['fabId'];
chartOption = this.getGuageChartOption();
chartOption['series'][0]['data'][0].value =
currentChartData['effcRt'];
this.$store.state.pageData[myPrgmId][chartKey] = chartOption;
}
}
},
getGuageChartOption() {
// const gaugeColors = [
// [0.125, '#009245'],
// [0.25, '#39b54a'],
// [0.375, '#d9e021'],
// [0.5, '#fcee21'],
// [0.625, '#fbb03b'],
// [0.75, '#f7931e'],
// [0.875, '#f15a24'],
// [1.0, '#ed1c24']
// ];
const gaugeColors = [
[0, '#ed1c24'],
[0.6, '#ed1c24'],
[0.8, '#f7931e'],
[1.0, '#009245'],
];
var guageChartOption = {
grid: {
top: '30%',
bottom: 0,
},
series: [
{
type: 'gauge',
center: ['50%', '80%'],
radius: '100%',
startAngle: 180,
endAngle: 0,
min: 0,
max: 100,
splitNumber: 10,
itemStyle: {
// color: '#FFAB91'
color: 'auto',
// color:gaugeColors
},
progress: {
// show: true,
show: false,
width: 20,
},
pointer: {
// show: false
show: true,
itemStyle: {
// color: '#FFAB91',
color: 'auto',
},
},
axisLine: {
lineStyle: {
width: 20,
color: gaugeColors,
},
},
axisTick: {
distance: -35,
splitNumber: 5,
lineStyle: {
width: 2,
color: '#999',
},
},
splitLine: {
distance: -42,
length: 14,
lineStyle: {
width: 3,
color: '#999',
},
},
axisLabel: {
distance: -10,
color: '#999',
fontSize: 10,
},
anchor: {
show: false,
},
title: {
show: false,
},
detail: {
valueAnimation: true,
width: '60%',
lineHeight: 25,
borderRadius: 8,
// offsetCenter: [0, '-15%'],
offsetCenter: [0, '33%'],
fontSize: 17,
fontWeight: 'bolder',
formatter: '{value} %',
color: 'auto',
},
data: [
{
value: NaN,
},
],
},
],
};
return guageChartOption;
},
chartClickEvent(argData, $event) {
var data = {
...argData,
fromDt: this.pageData.fromDt,
};
var key = 'tick_' + Math.random();
this.$router.push({
name: 'ems-effc-EqpmIndMntrPage',
query: {
prgmId: 'PRG0081',
// tick:key
},
params: {
...data,
key: key,
},
});
},
},
};
const defaultData = {
cmCycle: 'CYC_MONTH',
fromDt: Utility.setFormatDate(new Date(), 'YYYYMM'), // 조회 시작일
};
</script>

710
pages/ems/effc/EqpmIndMntrPage.vue Normal file
View File

@ -0,0 +1,710 @@
<template>
<div ref="mainDiv" class="l-layout">
<v-row ref="searchFilter">
<v-col :cols="12">
<v-card class="searchFilter">
<v-row align="center" no-gutters>
<v-col :cols="2">
<component
:is="'SelectBox'"
ref="SelectBox1"
:propsValue="selectValue01"
:itemList="selectValueList01"
:label="'FAB'"
@update:propsValue="selectValue01 = $event"
/>
</v-col>
<v-col :cols="2">
<component
:is="'SelectBox'"
ref="SelectBox2"
:propsValue="selectValue02"
:itemList="selectValueList02"
:label="'설비종류'"
@update:propsValue="selectValue02 = $event"
/>
</v-col>
<v-col :cols="2">
<component
:is="'SelectBox'"
ref="SelectBox3"
:propsValue="selectValue03"
:itemList="selectValueList03"
:label="'설비그룹'"
@update:propsValue="selectValue03 = $event"
/>
</v-col>
<v-col :cols="2">
<component
:is="'SelectCmCycle'"
:parentPrgmId="myPrgmId"
:label="'구분'"
/>
</v-col>
<v-col :cols="2">
<component
:is="'DatePicker'"
:label="'대상년월'"
:parentPrgmId="myPrgmId"
:isRangeOption="false"
/>
</v-col>
<v-col :cols="2" class="text-right">
<v-btn :ripple="false" @click="search()">조회</v-btn>
</v-col>
</v-row>
</v-card>
</v-col>
</v-row>
<v-row ref="contents" style="height: calc(100vh - 230px)">
<v-col :cols="12" class="h100">
<v-card class="pb-5 px-2">
<v-card-title class="d-flex align-center justify-space-between pa-5">
<span class="tit ft-size_20 ft-weight_600">설비별 현황 리스트</span>
</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"
@dblClick="gridDoubleClickEvent"
/>
<!--
<component
:ref="gridName"
:is="loadGrid ? 'Grid' : null"
:gridName="gridName"
:parentPrgmId="myPrgmId"
:mouseoverEvent="gridMouseoverEvent"
:mouseoutEvent="gridMouseoutEvent"
@dblClick="gridDoubleClickEvent"
/>
-->
</div>
</div>
</v-card>
</v-col>
</v-row>
<!--<v-tooltip
top
v-model="tooltipData.show"
:position-x="tooltipData.x"
:position-y="tooltipData.y"
:z-index="1000"
>
{{tooltipData.content}}
</v-tooltip> -->
</div>
</template>
<script>
import { mapState, mapMutations, mapActions } from 'vuex';
import mixinGlobal from '@/mixin/global.js';
import { resize } from '@/mixin/resize.js';
import Utility from '~/plugins/utility';
import SelectBox from '@/components/common/select/SelectBox';
import SelectCmCycle from '@/components/common/select/SelectCmCycle';
import DatePicker from '@/components/common/Datepicker';
import Grid from '~/components/common/Grid';
let myTitle;
let myPrgmId;
let paramKey;
export default {
mixins: [mixinGlobal, resize],
async asyncData(context) {
const myState = context.store.state;
myPrgmId = context.route.query.prgmId;
await context.store.commit('setActiveMenuInfo', myState.menuData[myPrgmId]);
myTitle = await myState.activeMenuInfo.menuNm;
},
meta: {
title: () => {
return myTitle;
},
prgmId: myPrgmId,
closable: true,
},
components: {
Utility,
SelectBox,
SelectCmCycle,
DatePicker,
Grid,
},
data() {
return {
myPrgmId: myPrgmId,
initedFlag: false,
queryParams: null,
selectValueList01: [],
selectValueList02: [],
selectValueList03: [],
selectValue01: null,
selectValue02: null,
selectValue03: null,
loadGrid: false,
gridName: 'grid01',
enrgUseMainIdxDesc: [],
// tooltipData: {
// show: false,
// x: 0,
// y: 0,
// content: null,
// },
// tooltipTranscationFlag: false,
};
},
computed: {
...mapState({
pageData: state => state.pageData[myPrgmId],
}),
fromDt() {
return this.pageData.fromDt;
},
},
watch: {
async $route(to, from) {
if (to.query.prgmId == myPrgmId) {
if (to.params.key) {
document.getElementById('refresh').click();
}
}
},
async selectValue01(value) {
if (this.initedFlag) {
await this.search();
}
},
async selectValue02(value) {
if (this.initedFlag) {
await this.getSelectValueList03();
}
},
async selectValue03(value) {
if (this.initedFlag) {
await this.search();
}
},
async fromDt(value) {
if (this.initedFlag) {
await this.search();
}
},
},
async beforeCreate() {
myPrgmId = this.$route.query.prgmId;
await this.$store.dispatch('chkOpenTabList', {
key: 'create',
prgmId: myPrgmId,
defaultData: defaultData,
});
},
created() {},
mounted() {
this.init();
},
beforeDestroy() {
this.initedFlag = false;
this.chkOpenTabList({ key: 'destroy', prgmId: myPrgmId });
},
methods: {
async init() {
await this.getSelectValueList();
await this.setQueryParams();
this.gridInit();
await this.getGridData();
this.initedFlag = true;
},
async setQueryParams() {
this.queryParams = null;
if (paramKey == this.$route.params.key) {
return;
}
if (this.$route.params.key) {
paramKey = this.$route.params.key;
this.queryParams = this.$route.params;
}
if (this.queryParams && typeof this.queryParams == 'object') {
this.selectValue01 = this.queryParams['fabId'];
this.selectValue02 = this.queryParams['eqpmKindId'];
await this.getSelectValueList03();
this.selectValue03 = this.queryParams['eqpmGrpId'];
}
},
async getSelectValueList() {
await this.getSelectValueList01();
await this.getSelectValueList02();
await this.getSelectValueList03();
},
async getSelectValueList01() {
let res = await this.postApiReturn({
apiKey: 'selectFabCodeList',
resKey: 'fabCodeLists',
sendParam: {},
});
if (res.length > 0) {
this.selectValueList01 = await res.map(item => {
return {
text: item.eccNm,
value: item.eccId,
};
});
this.selectValue01 = this.selectValueList01[0].value;
} else {
this.selectValueList01 = [];
this.selectValue01 = null;
}
},
async getSelectValueList02() {
var res = await this.postApiReturn({
apiKey: 'selectEmsEqpmKindList',
resKey: 'eqpmGrpPysclQtyMngData',
sendParam: {},
});
if (res.length > 0) {
this.selectValueList02 = await res.map(item => {
return {
text: item.eqpmKindNm,
value: item.eqpmKindId,
data: {
...item,
},
};
});
this.selectValue02 = this.selectValueList02[0].value;
} else {
this.selectValueList02 = [];
this.selectValue02 = null;
}
},
async getSelectValueList03() {
var res = await this.postApiReturn({
apiKey: 'selectEmsEqpmGrpList',
resKey: 'eqpmGrpPysclQtyMngData',
sendParam: {
eqpmKindId: this.selectValue02,
},
});
if (res.length > 0) {
this.selectValueList03 = await res.map(item => {
return {
text: item.eqpmGrpNm,
value: item.eqpmGrpId,
data: {
...item,
},
};
});
this.selectValue03 = this.selectValueList03[0].value;
} else {
this.selectValueList03 = [];
this.selectValue03 = null;
}
},
gridInit() {
const gridHeight = this.$refs.gridParent.offsetHeight - 30;
const _this = this;
var columnList = [
{ header: 'NO', name: 'no', align: 'center', width: 80 },
{ header: 'fabId', name: 'fabId', hidden: true },
{ header: 'FAB', name: 'fabNm', align: 'left' },
{ header: 'eqpmGrpId', name: 'eqpmGrpId', hidden: true },
{ header: '설비그룹', name: 'eqpmGrpNm', align: 'left', width: 200 },
{ header: 'eqpmId', name: 'eqpmId', hidden: true },
{ header: '설비명', name: 'eqpmNm', align: 'left', width: 200 },
{
header: '계획량',
name: 'planVal',
align: 'right',
minWidth: 110,
formatter: numberFormatter,
},
{
header: '사용량',
name: 'usedVal',
align: 'right',
minWidth: 110,
formatter: numberFormatter,
},
{
header: 'KPI',
name: 'effcRt',
align: 'right',
formatter: numberFormatter,
},
{
header: '지표1',
name: 'gd01',
align: 'right',
formatter: numberFormatter,
},
{
header: '지표2',
name: 'gd02',
align: 'right',
formatter: numberFormatter,
},
{
header: '지표3',
name: 'gd03',
align: 'right',
formatter: numberFormatter,
},
{
header: '지표4',
name: 'gd04',
align: 'right',
formatter: numberFormatter,
},
{
header: '지표5',
name: 'gd05',
align: 'right',
formatter: numberFormatter,
},
{
header: '지표6',
name: 'gd06',
align: 'right',
formatter: numberFormatter,
},
{
header: '지표7',
name: 'gd07',
align: 'right',
formatter: numberFormatter,
},
{
header: '지표8',
name: 'gd08',
align: 'right',
formatter: numberFormatter,
},
{
header: '지표9',
name: 'gd09',
align: 'right',
formatter: numberFormatter,
},
{
header: '지표10',
name: 'gd10',
align: 'right',
formatter: numberFormatter,
},
];
const myOptions = {
columnOptions: {
resizable: true,
},
header: {
height: 65,
complexColumns: [
{
header: '주요지표',
name: 'complexColumn01',
childNames: [
'gd01',
'gd02',
'gd03',
'gd04',
'gd05',
'gd06',
'gd07',
'gd08',
'gd09',
'gd10',
],
},
],
},
};
this.setGridOption({
gridKey: this.gridName,
value: Object.assign(Utility.defaultGridOption(gridHeight), myOptions),
});
this.setGridColumn({
gridKey: this.gridName,
value: columnList,
});
},
async getGridData() {
this.loadGrid = false;
this.enrgUseMainIdxDesc = [];
var apiKey = null;
var params = {
fabId: this.selectValue01,
eqpmKindId: this.selectValue02,
eqpmGrpId: this.selectValue03,
fromDt: this.pageData.fromDt,
};
if (this.pageData.cmCycle == 'CYC_DAY') {
params['fromDtMm'] = String(this.pageData.fromDt).substring(0, 6);
apiKey = 'selectDailyEnrgUseMainIdx';
} else if (this.pageData.cmCycle == 'CYC_MONTH') {
apiKey = 'selectMonthlyEnrgUseMainIdx';
}
var res = await this.postApiReturn({
apiKey: apiKey,
resKey: 'eqpmIndMntrData',
sendParam: params,
});
this.enrgUseMainIdxDesc = await this.postApiReturn({
apiKey: 'selectEnrgUseMainIdxDesc',
resKey: 'eqpmIndMntrData',
sendParam: {
eqpmGrpId: this.selectValue03,
},
});
var newRes = [];
for (var i = 0; i < res.length; i++) {
newRes.push({
...res[i],
no: i + 1,
});
}
this.setGridData({
gridKey: this.gridName,
value: newRes,
});
this.loadGrid = true;
this.makeTooltip();
},
async search() {
await this.getGridData();
},
async makeTooltip() {
var gdIdxList = [
'gd01',
'gd02',
'gd03',
'gd04',
'gd05',
'gd06',
'gd07',
'gd08',
'gd09',
'gd10',
];
var elementList = [];
await new Promise(resolve => setTimeout(resolve, 1000));
for (var i = 0; i < gdIdxList.length; i++) {
var selector =
'.tui-grid-cell-header[data-column-name="' + gdIdxList[i] + '"]';
var tempElement = document.querySelector(selector);
elementList.push(tempElement);
}
console.log('this.enrgUseMainIdxDesc : ', this.enrgUseMainIdxDesc);
for (var i = 0; i < elementList.length; i++) {
var tooltipElement = document.createElement('div');
var tooltipContent = '';
if (this.enrgUseMainIdxDesc[i]) {
tooltipContent = this.enrgUseMainIdxDesc[i].gdIdxNm;
} else {
tooltipContent = '지표에 대한 정보가 없습니다.';
}
// textContent 세팅
tooltipElement.textContent = tooltipContent;
// id값 설정
elementList[i].id = 'tooltipTargetElement_' + i;
tooltipElement.id = 'tooltipElement_' + i;
// element 추가
elementList[i].append(tooltipElement);
}
},
// gridMouseoverEvent(e) {
// if (e.targetType == 'columnHeader') {
// if (String(e.columnName).search('gd') >= 0) {
// this.tooltipTranscationFlag = true;
// this.tooltipData.content = null;
// var element = document.querySelector(
// '.tui-grid-cell-header[data-column-name="' + e.columnName + '"]',
// );
// var boundingClientRect = element.getBoundingClientRect();
// this.tooltipData.x =
// (boundingClientRect.right + boundingClientRect.left) / 2;
// this.tooltipData.y = boundingClientRect.top;
// for (var i = 0; i < this.enrgUseMainIdxDesc.length; i++) {
// if (
// this.enrgUseMainIdxDesc[i].gdSeq ==
// String(e.columnName).toUpperCase()
// ) {
// this.tooltipData.content = this.enrgUseMainIdxDesc[i].gdIdxNm;
// }
// }
// if (this.tooltipData.content == null) {
// this.tooltipData.content = '지표에 대한 정보가 없습니다.';
// }
// this.tooltipData.show = true;
// this.tooltipTranscationFlag = false;
// }
// }
// },
// gridMouseoutEvent(e) {
// if (
// e.targetType == 'columnHeader' &&
// this.tooltipTranscationFlag === false
// ) {
// this.tooltipData.show = false;
// }
// },
gridDoubleClickEvent(_, event, gridName) {
var gridInstance = this.$refs[this.gridName].gridInstance;
var eventRowData = gridInstance.invoke('getRow', event.rowKey);
var data = {
cmCycle: this.pageData.cmCycle,
fromDt: this.pageData.fromDt,
fabId: this.selectValue01,
eqpmKindId: this.selectValue02,
eqpmGrpId: this.selectValue03,
eqpmId: eventRowData.eqpmId,
};
var key = 'tick_' + Math.random();
this.$router.push({
name: 'ems-effc-EnrgUseEqpmDetlMntrPage',
query: {
prgmId: 'PRG0082',
// tick:key
},
params: {
...data,
key: key,
},
});
},
},
};
const defaultData = {
cmCycle: 'CYC_MONTH',
cmCycleList: [
{ idx: 0, text: '월', value: 'CYC_MONTH' },
{ idx: 1, text: '일', value: 'CYC_DAY' },
],
defaultRange: {
CYC_MONTH: 1,
CYC_DAY: 1,
},
fromDt: Utility.setFormatDate(new Date(), 'YYYYMM'), // 조회 시작일
grid01: {
data: [],
column: [],
option: {},
},
};
function numberFormatter({ value }) {
if (typeof value == 'number' || typeof value == 'string') {
// return Math.round(Number(value) * 100) / 100;
// return Utility.setFormatIntDecimal(Number(value), 2);
// return Math.ceil(Number(value));
var tempValue = Utility.setFormatIntDecimal(Number(value), 2);
if (tempValue[tempValue.length - 1] == '0') {
tempValue = tempValue.slice(0, -1);
}
if (
tempValue[tempValue.length - 1] == '0' &&
tempValue[tempValue.length - 2] == '.'
) {
tempValue = tempValue.slice(0, -2);
}
return tempValue;
} else {
return '';
}
}
</script>
<style lang="scss">
@for $i from 0 through 9 {
#gridParent > * {
// .tui-grid-content-area{
background-color: red;
color: red;
overflow: visible;
position: relative;
}
#tooltipTargetElement_#{$i} {
overflow: visible;
position: relative; // 테스트3번쨰
white-space: nowrap; // 테스트3번쨰
}
#tooltipElement_#{$i} {
display: none;
overflow: visible;
position: relative;
}
#tooltipTargetElement_#{$i}:hover #tooltipElement_#{$i} {
display: block;
position: absolute;
min-width: 100%;
bottom: 30px;
z-index: 1000000000;
align: 'center';
color: #f2f2f2;
background-color: #7f7f7f;
// width : 77px;
width: 200%;
left: -50%;
border-radius: 3px;
word-break: keep-all;
white-space: pre-wrap;
}
.tui-grid-rside-area {
display: none;
overflow: visible;
overflow-x: visible;
overflow-y: visible;
}
.tui-grid-header-area {
border-style: solid;
border-width: 0 0 1px;
position: relative;
overflow: visible;
overflow-x: visible;
overflow-y: visible;
}
}
</style>

581
pages/ems/effc/EqpmIndMntrPage_bak.vue Normal file
View File

@ -0,0 +1,581 @@
<template>
<div ref="mainDiv" class="l-layout">
<v-row ref="searchFilter">
<v-col :cols="12">
<v-card class="searchFilter">
<v-row align="center" no-gutters>
<v-col :cols="2">
<component
:is="'SelectBox'"
ref="SelectBox1"
:propsValue="selectValue01"
:itemList="selectValueList01"
:label="'Fab'"
@update:propsValue="selectValue01 = $event"
/>
</v-col>
<v-col :cols="2">
<component
:is="'SelectBox'"
ref="SelectBox2"
:propsValue="selectValue02"
:itemList="selectValueList02"
:label="'설비종류'"
@update:propsValue="selectValue02 = $event"
/>
</v-col>
<v-col :cols="2">
<component
:is="'SelectBox'"
ref="SelectBox3"
:propsValue="selectValue03"
:itemList="selectValueList03"
:label="'설비그룹'"
@update:propsValue="selectValue03 = $event"
/>
</v-col>
<v-col :cols="2">
<component
:is="'SelectCmCycle'"
:parentPrgmId="myPrgmId"
:label="'구분'"
/>
</v-col>
<v-col :cols="2">
<component
:is="'DatePicker'"
:label="'대상년월'"
:parentPrgmId="myPrgmId"
:isRangeOption="false"
/>
</v-col>
<v-col :cols="2" class="text-right">
<v-btn :ripple="false" @click="search()">조회</v-btn>
</v-col>
</v-row>
</v-card>
</v-col>
</v-row>
<v-row ref="contents" style="height: calc(100vh - 230px)">
<v-col :cols="12" class="">
<v-card class="pb-5 px-2">
<v-card-title class="d-flex align-center justify-space-between pa-5">
<span class="tit ft-size_20 ft-weight_600">설비별 현황 리스트</span>
</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"
@dblClick="gridDoubleClickEvent"
/>
<!--
<component
:ref="gridName"
:is="loadGrid ? 'Grid' : null"
:gridName="gridName"
:parentPrgmId="myPrgmId"
:mouseoverEvent="gridMouseoverEvent"
:mouseoutEvent="gridMouseoutEvent"
@dblClick="gridDoubleClickEvent"
/>
-->
</div>
</div>
</v-card>
</v-col>
</v-row>
<!--<v-tooltip
top
v-model="tooltipData.show"
:position-x="tooltipData.x"
:position-y="tooltipData.y"
:z-index="1000"
>
{{tooltipData.content}}
</v-tooltip> -->
</div>
</template>
<script>
import { mapState, mapMutations, mapActions } from 'vuex';
import mixinGlobal from '@/mixin/global.js';
import Utility from '~/plugins/utility';
import SelectBox from '@/components/common/select/SelectBox';
import SelectCmCycle from '@/components/common/select/SelectCmCycle';
import DatePicker from '@/components/common/Datepicker';
import Grid from '~/components/common/Grid';
let myTitle;
let myPrgmId;
let paramKey;
export default {
mixins: [mixinGlobal],
async asyncData(context) {
const myState = context.store.state;
myPrgmId = context.route.query.prgmId;
await context.store.commit('setActiveMenuInfo', myState.menuData[myPrgmId]);
myTitle = await myState.activeMenuInfo.menuNm;
},
meta: {
title: () => {
return myTitle;
},
prgmId: myPrgmId,
closable: true,
},
components: {
Utility,
SelectBox,
SelectCmCycle,
DatePicker,
Grid,
},
data() {
return {
myPrgmId: myPrgmId,
initedFlag:false,
queryParams: null,
selectValueList01: [],
selectValueList02: [],
selectValueList03: [],
selectValue01:null,
selectValue02:null,
selectValue03:null,
loadGrid:false,
gridName:'grid01',
enrgUseMainIdxDesc:[],
// tooltipData:{
// show:false,
// x:0,
// y:0,
// content:null
// },
};
},
computed:{
...mapState({
pageData: state => state.pageData[myPrgmId],
}),
fromDt(){
return this.pageData.fromDt;
}
},
watch:{
async $route(to, from){
if(to.query.prgmId == myPrgmId){
if(to.params.key){
document.getElementById('refresh').click();
}
}
},
async selectValue01(value){
if(this.initedFlag){
await this.search();
}
},
async selectValue02(value){
if(this.initedFlag){
await this.getSelectValueList03();
}
},
async selectValue03(value){
if(this.initedFlag){
await this.search();
}
},
async fromDt(value){
if(this.initedFlag){
await this.search();
}
}
},
async beforeCreate() {
myPrgmId = this.$route.query.prgmId;
await this.$store.dispatch('chkOpenTabList', {
key: 'create',
prgmId: myPrgmId,
defaultData: defaultData,
});
},
created() {},
mounted() {
this.init();
},
beforeDestroy() {
this.initedFlag = false;
this.chkOpenTabList({ key: 'destroy', prgmId: myPrgmId });
},
methods: {
async init(){
await this.getSelectValueList();
await this.setQueryParams();
this.gridInit();
await this.getGridData();
this.initedFlag = true;
},
async setQueryParams(){
this.queryParams = null;
if(paramKey==this.$route.params.key){
return;
}
if(this.$route.params.key){
paramKey = this.$route.params.key;
this.queryParams = this.$route.params;
}
if(this.queryParams && typeof(this.queryParams)=='object'){
this.selectValue01 = this.queryParams['fabId'];
this.selectValue02 = this.queryParams['eqpmKindId'];
await this.getSelectValueList03();
this.selectValue03 = this.queryParams['eqpmGrpId'];
}
},
async getSelectValueList(){
await this.getSelectValueList01();
await this.getSelectValueList02();
await this.getSelectValueList03();
},
async getSelectValueList01(){
let res = await this.postApiReturn({
apiKey: 'selectFabCodeList',
resKey: 'fabCodeLists',
sendParam: {},
});
if (res.length > 0) {
this.selectValueList01 = await res.map(item => {
return {
text: item.eccNm,
value: item.eccId,
};
});
this.selectValue01 = this.selectValueList01[0].value;
} else {
this.selectValueList01 = [];
this.selectValue01 = null;
}
},
async getSelectValueList02(){
var res = await this.postApiReturn({
apiKey: 'selectEmsEqpmKindList',
resKey: 'eqpmGrpPysclQtyMngData',
sendParam: {},
});
if (res.length > 0) {
this.selectValueList02 = await res.map(item => {
return {
text: item.eqpmKindNm,
value: item.eqpmKindId,
data: {
...item,
},
};
});
this.selectValue02 = this.selectValueList02[0].value;
} else {
this.selectValueList02 = [];
this.selectValue02 = null;
}
},
async getSelectValueList03(){
var res = await this.postApiReturn({
apiKey: 'selectEmsEqpmGrpList',
resKey: 'eqpmGrpPysclQtyMngData',
sendParam: {
eqpmKindId: this.selectValue02,
},
});
if (res.length > 0) {
this.selectValueList03 = await res.map(item => {
return {
text: item.eqpmGrpNm,
value: item.eqpmGrpId,
data: {
...item,
},
};
});
this.selectValue03 = this.selectValueList03[0].value;
} else {
this.selectValueList03 = [];
this.selectValue03 = null;
}
},
gridInit(){
const gridHeight = this.$refs.gridParent.offsetHeight - 30;
const _this = this;
var columnList = [
{header:'NO', name:'no', align:'center'},
{header:'fabId', name:'fabId', hidden:true},
{header:'FAB', name:'fabNm', align:'left'},
{header:'eqpmGrpId', name:'eqpmGrpId', hidden:true},
{header:'설비그룹', name:'eqpmGrpNm', align:'left'},
{header:'eqpmId', name:'eqpmId', hidden:true},
{header:'설비명', name:'eqpmNm', align:'left'},
{header:'계획량', name:'planVal', align:'right'},
{header:'사용량', name:'usedVal', align:'right'},
{header:'KPI', name:'effcRt', align:'right'},
{header:'지표1', name:'gd01', align:'right'},
{header:'지표2', name:'gd02', align:'right'},
{header:'지표3', name:'gd03', align:'right'},
{header:'지표4', name:'gd04', align:'right'},
{header:'지표5', name:'gd05', align:'right'},
{header:'지표6', name:'gd06', align:'right'},
{header:'지표7', name:'gd07', align:'right'},
{header:'지표8', name:'gd08', align:'right'},
{header:'지표9', name:'gd09', align:'right'},
{header:'지표10', name:'gd10', align:'right'},
];
const myOptions = {
columnOptions: {
resizable: true,
},
header:{
height:65,
complexColumns:[
{
header:'주요지표',
name:'complexColumn01',
childNames:[
'gd01',
'gd02',
'gd03',
'gd04',
'gd05',
'gd06',
'gd07',
'gd08',
'gd09',
'gd10',
]
}
]
}
};
this.setGridOption({
gridKey: this.gridName,
value: Object.assign(Utility.defaultGridOption(gridHeight), myOptions),
});
this.setGridColumn({
gridKey: this.gridName,
value: columnList,
});
},
async getGridData(){
this.loadGrid = false;
this.enrgUseMainIdxDesc = [];
var apiKey = null;
var params = {
fabId:this.selectValue01,
eqpmKindId:this.selectValue02,
eqpmGrpId:this.selectValue03,
fromDt:this.pageData.fromDt
};
if(this.pageData.cmCycle=='CYC_DAY'){
params['fromDtMm'] = String(this.pageData.fromDt).substring(0, 6);
apiKey = 'selectDailyEnrgUseMainIdx';
}else if(this.pageData.cmCycle=='CYC_MONTH'){
apiKey = 'selectMonthlyEnrgUseMainIdx';
}
var res = await this.postApiReturn({
apiKey: apiKey,
resKey: 'eqpmIndMntrData',
sendParam: params,
});
this.enrgUseMainIdxDesc = await this.getEnrgUseMainIdxDesc();
// this.enrgUseMainIdxDesc = await this.postApiReturn({
// apiKey: 'selectEnrgUseMainIdxDesc',
// resKey: 'eqpmIndMntrData',
// sendParam: {
// eqpmGrpId:this.selectValue03
// },
// });
var newRes = [];
for(var i=0; i<res.length; i++){
newRes.push({
...res[i],
'no':(i+1)
});
}
this.setGridData({
gridKey: this.gridName,
value: newRes,
});
this.loadGrid = true;
this.makeTooltip();
},
async getEnrgUseMainIdxDesc(){
var res = await this.postApiReturn({
apiKey: 'selectEnrgUseMainIdxDesc',
resKey: 'eqpmIndMntrData',
sendParam: {
eqpmGrpId:this.selectValue03
},
});
while(res.length < 10){
res.push({
});
}
return res;
},
async search(){
await this.getGridData();
},
async makeTooltip(){
var gdIdxList = ['gd01', 'gd02', 'gd03', 'gd04', 'gd05', 'gd06', 'gd07', 'gd08', 'gd09', 'gd10'];
var elementList = [];
await new Promise(resolve => setTimeout(resolve, 1000));
for(var i=0; i<gdIdxList.length; i++){
var selector = '.tui-grid-cell-header[data-column-name="'+gdIdxList[i]+'"]';
var tempElement = document.querySelector(selector);
elementList.push(tempElement);
}
for(var i=0; i<elementList.length; i++){
var columnElement = document.createElement('span');
var tooltipElement = document.createElement('div');
// var tooltipContent = this.enrgUseMainIdxDesc[i].gdIdxNm != undefined ? this.enrgUseMainIdxDesc[i].gdIdxNm : '지표에 대한 정보가 없습니다.';
var tooltipContent = this.enrgUseMainIdxDesc[i].gdIdxNm != undefined ? this.enrgUseMainIdxDesc[i].gdIdxNm : '지표';
console.log('this.enrgUseMainIdxDesc : ', this.enrgUseMainIdxDesc);
console.log('tooltipContent[' + i + '] : ', tooltipContent );
// textContent 세팅
columnElement.textContent = elementList[i].textContent;
elementList[i].textContent = '';
tooltipElement.textContent = tooltipContent;
// tooltipElement.textContent = this.enrgUseMainIdxDesc[i].gdIdxNm;
// id값 설정
columnElement.id = 'tooltipTargetElement_'+i;
tooltipElement.id = 'tooltipElement_'+i;
// element 추가
elementList[i].append(columnElement);
elementList[i].append(tooltipElement);
}
},
// gridMouseoverEvent(e){
// if(e.targetType=='columnHeader'){
// if(String(e.columnName).search('gd')>=0){
// this.tooltipData.content = null;
// var element = document.querySelector('.tui-grid-cell-header[data-column-name="'+e.columnName+'"]');
// var boundingClientRect = element.getBoundingClientRect();
// this.tooltipData.x = (boundingClientRect.right + boundingClientRect.left)/2;
// this.tooltipData.y = boundingClientRect.top;
// for(var i=0; i<this.enrgUseMainIdxDesc.length; i++){
// if(this.enrgUseMainIdxDesc[i].gdSeq == String(e.columnName).toUpperCase()){
// this.tooltipData.content = this.enrgUseMainIdxDesc[i].gdIdxNm;
// }
// }
// if(this.tooltipData.content==null){
// this.tooltipData.content = '지표에 대한 정보가 없습니다.';
// }
// this.tooltipData.show = true;
// }
// }
// },
// gridMouseoutEvent(e){
// if(e.targetType=='columnHeader'){
// this.tooltipData.show = false;
// }
// },
gridDoubleClickEvent(_, event, gridName){
var gridInstance = this.$refs[this.gridName].gridInstance;
var eventRowData = gridInstance.invoke('getRow', event.rowKey);
var data = {
cmCycle : this.pageData.cmCycle,
fromDt : this.pageData.fromDt,
fabId:this.selectValue01,
eqpmKindId:this.selectValue02,
eqpmGrpId:this.selectValue03,
eqpmId:eventRowData.eqpmId
};
var key = 'tick_' + Math.random();
this.$router.push({
name:'ems-effc-EnrgUseEqpmDetlMntrPage',
query:{
prgmId:'PRG0082',
// tick:key
},
params:{
...data,
key:key
}
})
}
}
};
const defaultData = {
cmCycle:'CYC_MONTH',
cmCycleList: [
{ idx: 0, text: '월', value: 'CYC_MONTH' },
{ idx: 1, text: '일', value: 'CYC_DAY' },
],
defaultRange: {
CYC_MONTH: 1,
CYC_DAY: 1,
},
fromDt: Utility.setFormatDate(new Date(), 'YYYYMM'), // 조회 시작일
grid01:{
data: [],
column: [],
option: {},
}
}
</script>
<style lang="scss">
// #tooltipTargetElement_0:hover + #tooltipElement_0{
// display : block
// }
// #tooltipElement_0{
// display : none
// }
@for $i from 0 through 9{
#tooltipTargetElement_#{$i}:hover + #tooltipElement_#{$i}{
display : block
}
#tooltipElement_#{$i}{
display : none
}
}
</style>

1186
pages/ems/effc/TagTrndPage.vue Normal file
View File

File diff suppressed because it is too large Load Diff