init dev-push code ui base design

This commit is contained in:
leonard
2025-07-22 09:58:38 +07:00
parent ffdf5ccb66
commit eedbf94d56
214 changed files with 42170 additions and 28040 deletions

View File

@ -515,6 +515,3 @@ function numberFormatter({ value }) {
}
}
</script>
<style lang="scss">
@import '@/assets/scss/common.scss';
</style>

View File

@ -3,73 +3,50 @@
<v-row ref="searchFilter">
<v-col :cols="12">
<v-card class="searchFilter">
<v-row align="center" no-gutters>
<v-col :cols="4">
<component
:is="'selectCodeList'"
:parentPrgmId="myPrgmId"
:label="'시스템구분'"
dataKey="sysDivCd"
:sendParam="{ commGrpCd: 'CO_SYSDIV', useFg: '1' }"
:addAll="true"
/>
<v-row align="end" no-gutters>
<v-col :cols="3">
<component :is="'selectCodeList'" :parentPrgmId="myPrgmId" :label="'시스템구분'"
dataKey="sysDivCd" :sendParam="{ commGrpCd: 'CO_SYSDIV', useFg: '1' }" :addAll="true"
:customClass="'select-large'" />
</v-col>
<v-col :cols="4">
<component
:is="'selectCodeList'"
:parentPrgmId="myPrgmId"
:label="'사용여부'"
:dataKey="'useFg'"
:sendParam="{ commGrpCd: 'CO_USEFG', useFg: '1' }"
:addAll="true"
/>
<v-col :cols="3">
<component :is="'selectCodeList'" :parentPrgmId="myPrgmId" :label="'사용여부'"
:dataKey="'useFg'" :sendParam="{ commGrpCd: 'CO_USEFG', useFg: '1' }" :addAll="true"
:customClass="'select-large'" />
</v-col>
<v-col :cols="4" class="text-right">
<v-btn :ripple="false" @click="search()">조회</v-btn>
<v-col :cols="6" class="text-right">
<BtnSearch @click="search" size="large" />
</v-col>
</v-row>
</v-card>
</v-col>
</v-row>
<v-row ref="contents">
<v-col :cols="4" class="h100">
<v-row ref="contents" class="mt-4">
<v-col :cols="6" class="h100">
<v-card class="pb-5">
<div class="d-flex align-center justify-space-between pa-5">
<div class="d-flex align-center justify-space-between pa-4">
<v-card-title class="pa-0">메뉴 리스트</v-card-title>
<div>
<Buttons
:parentPrgmId="myPrgmId"
:bindingData="gridName"
:btnActionsFnc="btnActions"
/>
<Buttons :parentPrgmId="myPrgmId" :bindingData="gridName" :btnActionsFnc="btnActions" />
</div>
</div>
<div class="h100 px-5" style="height:calc(100% - 70px)">
<div class="h100 px-4" style="height:calc(100% - 70px)">
<div ref="treeGridParent" class="w100 h100">
<component
:ref="gridName + myPrgmId"
:is="loadTree ? 'Grid' : null"
:gridName="gridName"
:parentPrgmId="myPrgmId"
@getRowsData="getRowData"
/>
<component :ref="gridName + myPrgmId" :is="loadTree ? 'Grid' : null" :gridName="gridName"
:parentPrgmId="myPrgmId" @getRowsData="getRowData" :dataPath="dataPathExample" />
</div>
</div>
</v-card>
</v-col>
<v-col :cols="8" class="h100">
<v-col :cols="6" class="h100">
<v-card class="pb-5">
<div class="d-flex align-center justify-space-between pa-5">
<div class="d-flex align-center justify-space-between pa-4">
<v-card-title class="pa-0">메뉴 상세</v-card-title>
</div>
<div class="px-5" style="height:calc(100% - 76px)">
<component
:is="'Form'"
:parentPrgmId="myPrgmId"
:detailList="detailList"
@gridEditingFinish="gridEditingFinish"
/>
<div class="px-4 py-2" style="height:calc(100% - 76px)">
<component :is="'Form'" :parentPrgmId="myPrgmId" :detailList="detailList"
@gridEditingFinish="gridEditingFinish" />
</div>
</v-card>
</v-col>
@ -82,6 +59,7 @@ import Utility from '~/plugins/utility';
import { mapState, mapMutations, mapActions } from 'vuex';
import Grid from '~/components/common/Grid';
import Buttons from '~/components/common/button/Buttons';
import BtnSearch from '~/components/common/button/BtnSearch';
import selectCodeList from '@/components/common/select/selectCodeList';
import Form from '~/components/common/form/Form';
@ -107,14 +85,27 @@ export default {
Buttons,
selectCodeList,
Form,
BtnSearch
},
data() {
return {
myPrgmId: myPrgmId,
gridName: 'treeGrid',
loadTree: false,
loadTree: true,
detailList: myDetail,
addRowFg: false,
dataPathExample: {
"treeGrid": {
data: sampleData,
column: [
{ header: '메뉴명', name: 'menuNm' },
{ header: 'prgmId ', name: 'prgmId', hidden: true },
{ header: 'sysDivCd ', name: 'sysDivCd', hidden: true },
],
option: myOptions,
}
}
};
},
computed: {
@ -218,8 +209,8 @@ export default {
item.upMenuId && item.upMenuId != '0'
? item.upMenuId
: item.upMenuId == '0'
? '0'
: 'ROOT',
? '0'
: 'ROOT',
};
return newItem;
});
@ -239,12 +230,12 @@ export default {
//rowKey: 0,
rowKey:
this.pageData.rowGridSelectKey == '' ||
this.pageData.rowGridSelectKey == null
this.pageData.rowGridSelectKey == null
? 0
: this.pageData.rowGridSelectKey ==
this.$refs[this.gridName + this.myPrgmId].getData().length - 1
? this.pageData.rowGridSelectKey
: 0,
this.$refs[this.gridName + this.myPrgmId].getData().length - 1
? this.pageData.rowGridSelectKey
: 0,
columnName: 'menuNm',
setScroll: true,
});
@ -371,6 +362,63 @@ const defaultData = {
},
},
};
const sampleData = [
{
"menuNm": "root",
"prgmId": "PRGM001",
"sysDivCd": "SYS01",
"_children": [
{
"menuNm": "서울 본사 - 1층",
"prgmId": "PRGM001-1",
"sysDivCd": "SYS01"
},
{
"menuNm": "서울 본사 - 2층",
"prgmId": "PRGM001-2",
"sysDivCd": "SYS01"
}
]
},
{
"menuNm": "부산 지사",
"prgmId": "PRGM002",
"sysDivCd": "SYS02",
"_children": [
{
"menuNm": "부산 지사 - A동",
"prgmId": "PRGM002-A",
"sysDivCd": "SYS02",
"_children": [
{
"menuNm": "부산 지사 - A동 1층",
"prgmId": "PRGM002-A1",
"sysDivCd": "SYS02"
}
]
}
]
},
{
"menuNm": "대전 창고",
"prgmId": "PRGM003",
"sysDivCd": "SYS03"
}
]
;
const myOptions = {
columnOptions: {
resizable: true,
},
treeColumnOptions: {
name: 'menuNm',       // Showing tree table
useIcon: false,      // Not using icon
indentWidth: 10,
},
}
const myDetail = [
{
type: 'InputText',
@ -378,7 +426,10 @@ const myDetail = [
valueNm: 'menuId',
readonly: true,
cols: 6,
class: 'py-2',
labelCols: 12,
textCols: 12,
class: 'py-3 pr-4',
iconShow: true,
required: false,
placeholder: '시스템 자동입력',
},
@ -388,7 +439,10 @@ const myDetail = [
valueNm: 'upMenuId',
disabled: false,
cols: 6,
class: 'py-2',
labelCols: 12,
textCols: 12,
class: 'py-3 pl-4',
iconShow: true,
required: true,
},
{
@ -397,7 +451,10 @@ const myDetail = [
valueNm: 'menuNm',
disabled: false,
cols: 6,
class: 'py-2',
labelCols: 12,
textCols: 12,
class: 'py-3 pr-4',
iconShow: true,
required: true,
},
{
@ -406,7 +463,10 @@ const myDetail = [
valueNm: 'prgmId',
disabled: false,
cols: 6,
class: 'py-2',
labelCols: 12,
textCols: 12,
class: 'py-3 pl-4',
iconShow: true,
},
{
type: 'SelectBox',
@ -414,7 +474,9 @@ const myDetail = [
valueNm: 'sysDivCd',
disabled: false,
cols: 6,
class: 'py-2',
labelCols: 12,
textCols: 12,
class: 'py-3 pr-4',
list: 'sysDivCdList',
itemText: 'commCdNm',
itemValue: 'commCd',
@ -425,7 +487,10 @@ const myDetail = [
valueNm: 'useFg',
disabled: false,
cols: 6,
class: 'py-2',
labelCols: 12,
textCols: 12,
class: 'py-3 pl-4',
iconShow: true,
value: { '1': true, '0': false },
required: true,
},
@ -435,7 +500,10 @@ const myDetail = [
valueNm: 'sortSeq',
disabled: false,
cols: 6,
class: 'py-2',
labelCols: 12,
textCols: 12,
class: 'py-3 pr-4',
iconShow: true,
required: true,
},
{
@ -444,7 +512,10 @@ const myDetail = [
valueNm: 'regUserNo',
disabled: true,
cols: 6,
class: 'py-2',
labelCols: 12,
textCols: 12,
class: 'py-3 pl-4',
iconShow: true,
placeholder: '시스템 자동입력',
},
{
@ -453,7 +524,10 @@ const myDetail = [
valueNm: 'regDttm',
disabled: true,
cols: 6,
class: 'py-2',
clabelCols: 12,
textCols: 12,
class: 'py-3 pr-4',
iconShow: true,
placeholder: '시스템 자동입력',
},
{
@ -462,7 +536,10 @@ const myDetail = [
valueNm: 'procUserNo',
disabled: true,
cols: 6,
class: 'py-2',
labelCols: 12,
textCols: 12,
class: 'py-3 pl-4',
iconShow: true,
placeholder: '시스템 자동입력',
},
{
@ -471,11 +548,11 @@ const myDetail = [
valueNm: 'procDttm',
disabled: true,
cols: 6,
class: 'py-2',
labelCols: 12,
textCols: 12,
class: 'py-3 pr-4',
iconShow: true,
placeholder: '시스템 자동입력',
},
];
</script>
<style lang="scss">
@import '@/assets/scss/common.scss';
</style>

View File

@ -827,6 +827,3 @@ function numberFormatter({ value }) {
}
}
</script>
<style lang="scss">
@import '@/assets/scss/common.scss';
</style>

View File

@ -3,7 +3,7 @@
<v-row ref="searchFilter">
<v-col :cols="12">
<v-card class="searchFilter">
<v-row align="center" no-gutters>
<v-row>
<v-col :cols="3">
<component
:is="'InputText'"
@ -11,6 +11,8 @@
valueNm="roleId"
label="역할코드"
:searchOption="true"
:iconShow="true"
customClass="input-large"
/>
</v-col>
<v-col :cols="3">
@ -20,6 +22,8 @@
valueNm="roleNm"
label="역할명"
:searchOption="true"
:iconShow="true"
customClass="input-large"
/>
</v-col>
<v-col :cols="3">
@ -30,10 +34,13 @@
:dataKey="'useFg'"
:sendParam="{ commGrpCd: 'CO_USEFG', useFg: '1' }"
:addAll="true"
:iconShow="true"
customClass="select-large"
/>
</v-col>
<v-col :cols="3" class="text-right">
<v-btn :ripple="false" @click="search()">조회</v-btn>
<v-col :cols="3" class="d-flex align-end justify-end text-right">
<!-- <v-btn :ripple="false" @click="search()">조회</v-btn> -->
<BtnSearch @click="search" size="large" />
</v-col>
</v-row>
</v-card>
@ -60,6 +67,7 @@
:gridName="gridName"
:parentPrgmId="myPrgmId"
@getRowsData="getRowData"
:dataPath="dataPathMock"
/>
</div>
</div>
@ -93,6 +101,7 @@ import Buttons from '~/components/common/button/Buttons';
import selectCodeList from '@/components/common/select/selectCodeList';
import InputText from '@/components/common/input/InputText';
import Form from '~/components/common/form/Form';
import BtnSearch from '~/components/common/button/BtnSearch';
let myTitle;
let myPrgmId;
@ -112,6 +121,7 @@ export default {
closable: true,
},
components: {
BtnSearch,
Grid,
Buttons,
selectCodeList,
@ -122,8 +132,22 @@ export default {
return {
myPrgmId: myPrgmId,
gridName: 'rowGrid',
loadGrid: false,
loadGrid: true,
detailList: myDetail,
dataPathMock : {
rowGrid: {
column: [
{ header: '추가 정보 그룹', name: 'addGrpId', align: 'left' },
{ header: '추가 정보 ID', name: 'addInfoId', align: 'left' },
{ header: '추가 정보 명', name: 'addInfoNm', align: 'left' },
{ header: 'Data 형식', name: 'addInfoDataKind', align: 'center' },
{ header: '사용여부', name: 'useFg', align: 'center' },
],
data: dataMockExample,
defaultRow: dataMockExample,
option: {},
},
},
};
},
computed: {
@ -394,7 +418,10 @@ const myDetail = [
valueNm: 'roleId',
readonly: true,
cols: 6,
class: 'py-2',
labelCols: 12,
textCols: 12,
iconShow: true,
class: 'py-2 pr-4',
required: false,
placeholder: '시스템 자동입력',
},
@ -404,7 +431,10 @@ const myDetail = [
valueNm: 'roleNm',
disabled: false,
cols: 6,
class: 'py-2',
labelCols: 12,
textCols: 12,
iconShow: true,
class: 'py-2 pl-4',
required: true,
},
{
@ -413,7 +443,10 @@ const myDetail = [
valueNm: 'useFg',
disabled: false,
cols: 6,
class: 'py-2',
labelCols: 12,
textCols: 12,
iconShow: true,
class: 'py-2 pr-4',
value: { '1': true, '0': false },
required: true,
},
@ -423,7 +456,10 @@ const myDetail = [
valueNm: 'rmrk',
disabled: false,
cols: 6,
class: 'py-2',
labelCols: 12,
textCols: 12,
iconShow: true,
class: 'py-2 pl-4',
},
// {
// type: "InputText",
@ -439,7 +475,10 @@ const myDetail = [
valueNm: 'regUserNo',
disabled: true,
cols: 6,
class: 'py-2',
labelCols: 12,
textCols: 12,
iconShow: true,
class: 'py-2 pr-4',
placeholder: '시스템 자동입력',
},
{
@ -448,7 +487,10 @@ const myDetail = [
valueNm: 'regDttm',
disabled: true,
cols: 6,
class: 'py-2',
labelCols: 12,
textCols: 12,
iconShow: true,
class: 'py-2 pl-4',
placeholder: '시스템 자동입력',
},
{
@ -457,7 +499,10 @@ const myDetail = [
valueNm: 'procUserNo',
disabled: true,
cols: 6,
class: 'py-2',
labelCols: 12,
textCols: 12,
iconShow: true,
class: 'py-2 pr-4',
placeholder: '시스템 자동입력',
},
{
@ -466,11 +511,50 @@ const myDetail = [
valueNm: 'procDttm',
disabled: true,
cols: 6,
class: 'py-2',
labelCols: 12,
textCols: 12,
iconShow: true,
class: 'py-2 pl-4',
placeholder: '시스템 자동입력',
},
];
const dataMockExample = [
{
addGrpId: 'GRP001',
addInfoId: 'INFO001',
addInfoNm: '온도 센서',
addInfoDataKind: 'DATA01',
useFg: true,
},
{
addGrpId: 'GRP002',
addInfoId: 'INFO002',
addInfoNm: '압력 센서',
addInfoDataKind: 'DATA02',
useFg: false,
},
{
addGrpId: 'GRP003',
addInfoId: 'INFO003',
addInfoNm: '압력 센서',
addInfoDataKind: 'DATA03',
useFg: false,
},
{
addGrpId: 'GRP004',
addInfoId: 'INFO004',
addInfoNm: '압력 센서',
addInfoDataKind: 'DATA04',
useFg: false,
},
{
addGrpId: 'GRP005',
addInfoId: 'INFO005',
addInfoNm: '압력 센서',
addInfoDataKind: 'DATA05',
useFg: false,
},
];
</script>
<style lang="scss">
@import '@/assets/scss/common.scss';
</style>

View File

@ -1037,6 +1037,3 @@ function sha512(str) {
.digest('hex');
}
</script>
<style lang="scss">
@import '@/assets/scss/common.scss';
</style>

View File

@ -4,24 +4,28 @@
<v-row ref="searchFilter">
<v-col :cols="12">
<v-card class="searchFilter">
<v-row align="center" no-gutters>
<v-col :cols="2">
<v-row align="end" no-gutters>
<v-col :cols="2.5">
<InputText
:parentPrgmId="myPrgmId"
label="배치ID"
valueNm="batchId"
:searchOption="true"
:iconShow="true"
customClass="input-large"
/>
</v-col>
<v-col :cols="2">
<v-col :cols="2.5">
<InputText
:parentPrgmId="myPrgmId"
label="배치명"
valueNm="batchNm"
:searchOption="true"
:iconShow="true"
customClass="input-large"
/>
</v-col>
<v-col :cols="2">
<v-col :cols="2.5">
<component
:is="'selectCodeList'"
:parentPrgmId="myPrgmId"
@ -29,19 +33,21 @@
:dataKey="'execRsltCd'"
:sendParam="{ commGrpCd: 'CO_BATCH_EXEC_RSLT', useFg: '1' }"
:addAll="true"
:iconShow="true"
customClass="select-large"
/>
</v-col>
<v-col :cols="2">
<v-col :cols="2.5">
<component
:is="'Datepicker'"
:parentPrgmId="myPrgmId"
:label="'조회기간'"
:customClass="'input-large'"
/>
</v-col>
<v-spacer></v-spacer>
<v-col :cols="4" class="text-right">
<BtnSearch />
<BtnExcelDownload :parentPrgmId="myPrgmId" :gridName="gridName" />
<v-col :cols="2" class="text-right d-flex align-end justify-end ga-1" style="gap: 4px">
<BtnSearch size="large" />
<BtnExcelDownload :parentPrgmId="myPrgmId" :gridName="gridName" size="large" />
</v-col>
</v-row>
</v-card>
@ -57,10 +63,11 @@
<div ref="gridParent" class="px-5 h100">
<component
:ref="gridName"
:is="loadGrid ? 'Grid' : null"
:is=" 'Grid' "
:parentPrgmId="myPrgmId"
:gridName="gridName"
@getRowsData="getRowData"
:dataPath="dataPathMock"
/>
</div>
</div>
@ -133,10 +140,56 @@ export default {
data() {
return {
myPrgmId: myPrgmId,
loadGrid: false,
loadGrid: true,
gridName: 'rowGrid',
// rowGridOrigin: [],
detailList: myDetail,
dataPathMock : {
'rowGrid': {
column: [
{ header: 'No.', name: 'batchLogSeq', align: 'center', width: 100 },
{ header: '배치ID', name: 'batchId', align: 'center', width: 100 },
{ header: '배치명', name: 'batchNm', align: 'left', width: 150 },
{ header: '실행 일자', name: 'execDt', align: 'center', width: 80 },
{
header: '실행 결과',
name: 'execRsltCd',
align: 'center',
width: 80,
// formatter({ value }) {
// let retVal = '';
// const newValue = _this.pageData.execRsltCdList.filter(
// item => item.commCd == value,
// );
// if (newValue.length > 0) {
// retVal = newValue[0].commCdNm;
// }
// return retVal;
// },
}, // "1": 프로그램, "2": 팝업
{ header: '실행 로그', name: 'execLogCont', minWidth: 150 },
{
header: '배치 시작 일시',
name: 'batchStrtDttm',
align: 'center',
width: 160,
},
{
header: '배치 종료 일시',
name: 'batchEndDttm',
align: 'center',
width: 160,
},
{ header: '등록자NO', name: 'regUserNo', width: 120 },
{ header: '등록일시', name: 'regDttm', align: 'center', width: 160 },
{ header: '수정자NO', name: 'procUserNo', width: 120 },
{ header: '수정일시', name: 'procDttm', align: 'center', width: 160 },
],
data: dataMockExample,
defaultRow: dataMockExample,
option: {},
},
},
};
},
computed: {
@ -195,6 +248,14 @@ export default {
init() {
// this.layoutInit();
this.gridInit();
// _this.pageData = {
// execRsltCdList: [
// { commCd: '1', commCdNm: '성공' },
// { commCd: '2', commCdNm: '실패' },
// ],
// };
},
// layoutInit() {
// const searchFilterHeight = this.$refs.searchFilter.offsetHeight;
@ -307,10 +368,13 @@ export default {
}
});
},
async getRowData(data) {
// async getRowData(data) {
async getRowData() {
console.log("something")
this.setPageData({
rowGridSelectKey: data.rowKey,
rowGridSelectData: data,
// rowGridSelectKey: data.rowKey,
rowGridSelectKey: 1,
rowGridSelectData: fakeRowData,
});
},
compareData(type, newDt) {
@ -417,16 +481,86 @@ const defaultData = {
},
};
const dataMockExample = [
{
batchLogSeq: 1,
batchId: 'BATCH001',
batchNm: '일일 데이터 백업',
execDt: '2025-07-15',
execRsltCd: '1', // sẽ được formatter thành "성공" hoặc tương tự
execLogCont: '백업 완료. 오류 없음.',
batchStrtDttm: '2025-07-15 01:00:00',
batchEndDttm: '2025-07-15 01:30:00',
regUserNo: 'admin01',
regDttm: '2025-07-15 01:00:00',
procUserNo: 'admin02',
procDttm: '2025-07-15 01:35:00',
},
{
batchLogSeq: 2,
batchId: 'BATCH002',
batchNm: '월간 리포트 생성',
execDt: '2025-07-01',
execRsltCd: '2',
execLogCont: '리포트 생성 중 오류 발생: 파일 접근 실패.',
batchStrtDttm: '2025-07-01 03:00:00',
batchEndDttm: '2025-07-01 03:10:00',
regUserNo: 'reportUser',
regDttm: '2025-07-01 03:00:00',
procUserNo: 'admin03',
procDttm: '2025-07-01 03:15:00',
},
{
batchLogSeq: 3,
batchId: 'BATCH003',
batchNm: '사용자 통계 갱신',
execDt: '2025-07-14',
execRsltCd: '1',
execLogCont: '통계 갱신 완료.',
batchStrtDttm: '2025-07-14 23:00:00',
batchEndDttm: '2025-07-14 23:20:00',
regUserNo: 'statUser',
regDttm: '2025-07-14 23:00:00',
procUserNo: 'admin01',
procDttm: '2025-07-14 23:25:00',
},
];
const fakeRowData = {
rowKey: 1,
batchLogSeq: 1,
batchId: 'BATCH001',
batchNm: '일일 데이터 백업',
execDt: '2025-07-15',
execRsltCd: '1',
execLogCont: JSON.stringify({
session: {
userNo: 'admin01',
userNm: '관리자',
comId: 'SKCC',
locale: 'ko_KR',
},
batch: {
comId: 'SKCC',
totStdDt: '20230110',
},
}),
batchStrtDttm: '2025-07-15 01:00:00',
batchEndDttm: '2025-07-15 01:30:00',
regUserNo: 'admin01',
regDttm: '2025-07-15 01:00:00',
procUserNo: 'admin02',
procDttm: '2025-07-15 01:35:00',
};
const myDetail = [
{
type: 'TextArea',
valueNm: 'execLogCont',
readonly: true,
cols: 12,
class: 'py-2',
class: 'py-2 transparent',
},
];
</script>
<style lang="scss">
@import '@/assets/scss/common.scss';
</style>

View File

@ -4,45 +4,38 @@
<v-row ref="searchFilter">
<v-col :cols="12">
<v-card class="searchFilter">
<v-row align="center" no-gutters>
<v-col :cols="2">
<InputText
:parentPrgmId="myPrgmId"
label="배치ID"
valueNm="batchId"
:searchOption="true"
/>
<v-row align="end" no-gutters>
<v-col :cols="2.5">
<InputText :parentPrgmId="myPrgmId" label="배치ID" valueNm="batchId" :searchOption="true"
:customClass="'input-large'" />
</v-col>
<v-col :cols="2">
<InputText
:parentPrgmId="myPrgmId"
label="배치명"
valueNm="batchNm"
:searchOption="true"
/>
<v-col :cols="2.5">
<InputText :parentPrgmId="myPrgmId" label="배치명" valueNm="batchNm" :searchOption="true"
:customClass="'input-large'" />
</v-col>
<v-col :cols="3">
<component
<v-col :cols="2.5">
<!-- <component
:is="'selectCodeList'"
:parentPrgmId="myPrgmId"
:label="'배치 실행 구분'"
:dataKey="'searchBatchExecTp'"
:sendParam="{ commGrpCd: 'CO_BATCH_EXEC_TP', useFg: '1' }"
:addAll="true"
/>
:customClass="'select-large'"
/> -->
</v-col>
<v-col :cols="3">
<component
<v-col :cols="2.5">
<!-- <component
:is="'selectCodeList'"
:parentPrgmId="myPrgmId"
:label="'사용여부'"
:dataKey="'searchUseFg'"
:sendParam="{ commGrpCd: 'CO_USEFG', useFg: '1' }"
/>
</v-col>
<v-col :cols="2" class="text-right">
<BtnSearch />
:customClass="'select-large'"
/> -->
</v-col>
<BtnSearch size="large" />
</v-row>
</v-card>
</v-col>
@ -50,77 +43,47 @@
<v-row ref="contents">
<!-- 배치 리스트 -->
<v-col :cols="5" class="h100" style="height: calc(100vh - 180px);">
<v-col :cols="6" class="h100">
<v-card class="pb-5">
<div class="d-flex align-center justify-space-between pa-5">
<div class="d-flex align-center justify-space-between pa-4">
<!-- <v-card-title>
<span class="tit ft-size_20 ft-weight_600">배치 리스트</span>
</v-card-title> -->
<v-card-title class="pa-0"> 배치 리스트 </v-card-title>
<!-- <v-card-actions> -->
<Buttons
:parentPrgmId="myPrgmId"
:bindingData="gridName"
:detailList="detailList"
:btnActionsFnc="btnActions"
/>
<Buttons :parentPrgmId="myPrgmId" :bindingData="gridName" :detailList="detailList"
:btnActionsFnc="btnActions" />
</div>
<div class="px-5" style="height:calc(100% - 70px);">
<div class="px-4">
<div ref="gridParent" class="h100 w100">
<component
:ref="gridName"
:is="loadGrid ? 'Grid' : null"
:parentPrgmId="myPrgmId"
:gridName="gridName"
@getRowsData="getRowData"
/>
<component :ref="gridName" :is="loadGrid ? 'Grid' : null" :parentPrgmId="myPrgmId"
:gridName="gridName" @getRowsData="getRowData" :dataPath="dataPathExample" />
</div>
<!-- </v-card-actions> -->
</div>
</v-card>
</v-col>
<!-- 배치 상세 -->
<v-col :cols="7" class="h100" style="height: calc(100vh - 180px);">
<v-col :cols="6" class="h100">
<v-card class="pd-y-20 h100">
<v-card-title class="d-flex justify-space-between align-end">
<v-card-title class="d-flex justify-space-between align-end pa-4">
<span class="tit ft-size_20 ft-weight_600">배치 상세</span>
</v-card-title>
<v-card-actions>
<div
ref="gridParent"
class="w100"
style="height: calc(100vh - 380px); padding-left:15px"
>
<component
:is="'Form'"
:parentPrgmId="myPrgmId"
:detailList="detailList"
@gridEditingFinish="gridEditingFinish"
@inputClick="inputClick"
/>
<div ref="gridParent" class="w100 pa-2 pb-6">
<component :is="'Form'" :parentPrgmId="myPrgmId" :detailList="detailList"
@gridEditingFinish="gridEditingFinish" @inputClick="inputClick" />
</div>
</v-card-actions>
</v-card>
</v-col>
<v-dialog
ref="popModal"
v-model="dialog"
width="700"
overlay-color="#000"
overlay-opacity="0.8"
scrollable
>
<v-dialog ref="popModal" v-model="dialog" width="700" overlay-color="#000" overlay-opacity="0.8" scrollable>
<v-card style="height: 100%">
<v-card-title
class="v-card__title d-flex align-center justify-space-between"
>
<v-card-title class="v-card__title d-flex align-center justify-space-between">
<span class="custom-title-4">DB 프로시져 파라메터 설정</span>
<div>
<Buttons
:parentPrgmId="myPrgmId"
:bindingData="gridNameParam"
:btnActionsFnc="btnActionsParam"
/>
<Buttons :parentPrgmId="myPrgmId" :bindingData="gridNameParam"
:btnActionsFnc="btnActionsParam" />
</div>
</v-card-title>
<div class="pa-5">
@ -132,23 +95,16 @@
<v-card-text style="height: 300px;">
<div id="gridParent" class="mt-6" style="height:calc(100% - 36px);">
<div style="height:calc(100% - 36px);">
<Grid
:ref="gridNameParam"
:is="paramLoadGrid && dialog ? 'Grid' : null"
:gridName="gridNameParam"
:parentPrgmId="myPrgmId"
:editorGrid="true"
@getRowsData="getGridNameParamRowData"
/>
<Grid :ref="gridNameParam" :is="paramLoadGrid && dialog ? 'Grid' : null"
:gridName="gridNameParam" :parentPrgmId="myPrgmId" :editorGrid="true"
@getRowsData="getGridNameParamRowData" />
</div>
</div>
</v-card-text>
<v-divider></v-divider>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="primary" dark @click="setParamChangeData()"
>확인</v-btn
>
<v-btn color="primary" dark @click="setParamChangeData()">확인</v-btn>
<v-btn color="primary" dark @click="dialog = false">닫기</v-btn>
</v-card-actions>
</v-card>
@ -199,15 +155,76 @@ export default {
data() {
return {
myPrgmId: myPrgmId,
loadGrid: false,
loadGrid: true,
gridName: 'rowGrid',
dataPathExample: {
"rowGrid": {
data: [
{
"batchId": "BATCH001",
"batchNm": "일일 데이터 백업",
"batchExecTp": "자동 실행",
"batchDupExecFg": "N",
"useFg": "사용"
},
{
"batchId": "BATCH002",
"batchNm": "월간 리포트 생성",
"batchExecTp": "수동 실행",
"batchDupExecFg": "Y",
"useFg": "사용"
},
{
"batchId": "BATCH003",
"batchNm": "로그 정리 작업",
"batchExecTp": "자동 실행",
"batchDupExecFg": "N",
"useFg": "미사용"
},
{
"batchId": "BATCH004",
"batchNm": "사용자 통계 수집",
"batchExecTp": "예약 실행",
"batchDupExecFg": "Y",
"useFg": "사용"
},
{
"batchId": "BATCH005",
"batchNm": "서버 상태 점검",
"batchExecTp": "수동 실행",
"batchDupExecFg": "N",
"useFg": "미사용"
}
]
,
column: [
{ header: '배치ID', name: 'batchId', align: 'center', width: 100 },
{ header: '배치명', name: 'batchNm', minWidth: 200 },
{
header: '배치 실행 구분',
name: 'batchExecTp',
align: 'left',
minWidth: 190,
},
{ header: '배치 중복 여부', name: 'batchDupExecFg', hidden: true },
{
header: '사용여부',
name: 'useFg',
align: 'center',
width: 145,
},
],
}
},
// rowGridOrigin: [],
detailList: myDetail,
// 파라메터 셋팅용 변수
dialog: false,
gridNameParam: 'paramGrid',
paramLoadGrid: false,
paramLoadGrid: true,
selectedGridNameParamRow: null,
};
},
@ -275,7 +292,7 @@ export default {
}),
init() {
// this.layoutInit();
this.gridInit();
// this.gridInit();
this.gridParamInit();
},
// layoutInit() {
@ -367,7 +384,7 @@ export default {
},
async search() {
// console.log("search");
await this.getRowGridData();
// await this.getRowGridData();
await this.setPageData({
isFind: false,
});
@ -410,12 +427,12 @@ export default {
//rowKey: this.chkRowGridSelectKey || 0,
rowKey:
this.pageData.rowGridSelectKey == '' ||
this.pageData.rowGridSelectKey == null
this.pageData.rowGridSelectKey == null
? 0
: this.pageData.rowGridSelectKey ==
this.$refs[this.gridName].getData().length - 1
? this.pageData.rowGridSelectKey
: 0,
this.$refs[this.gridName].getData().length - 1
? this.pageData.rowGridSelectKey
: 0,
setScroll: true,
});
}
@ -596,6 +613,7 @@ export default {
}
},
gridParamInit() {
const gridHeight = this.$refs.gridParent.offsetHeight - 36;
const myOptions = {
columnOptions: {
@ -611,20 +629,20 @@ export default {
gridKey: this.gridNameParam,
value: myOptions,
});
setTimeout(() => {});
// setTimeout(() => { });
let modeList = [];
const modeIn = { text: 'IN', value: 'IN' };
const modeOut = { text: 'OUT', value: 'OUT' };
modeList.push(modeIn);
modeList.push(modeOut);
let typeList = [];
const typeInt = { text: 'INT', value: 'int' };
const typeStr = { text: 'STRING', value: 'str' };
const typeFunc = { text: 'FUNCTION', value: 'function' };
typeList.push(typeInt);
typeList.push(typeStr);
typeList.push(typeFunc);
// let modeList = [];
// const modeIn = { text: 'IN', value: 'IN' };
// const modeOut = { text: 'OUT', value: 'OUT' };
// modeList.push(modeIn);
// modeList.push(modeOut);
// let typeList = [];
// const typeInt = { text: 'INT', value: 'int' };
// const typeStr = { text: 'STRING', value: 'str' };
// const typeFunc = { text: 'FUNCTION', value: 'function' };
// typeList.push(typeInt);
// typeList.push(typeStr);
// typeList.push(typeFunc);
const myColumns = [
{ header: 'ID', name: 'id', editor: 'text' },
@ -646,27 +664,27 @@ export default {
header: 'Type',
name: 'type',
align: 'center',
formatter({ value }) {
let retVal = '';
switch (value) {
case 'int':
retVal = 'INT';
break;
case 'str':
retVal = 'STRING';
break;
case 'function':
retVal = 'FUNCTION';
break;
}
return retVal;
},
editor: {
type: 'select',
options: {
listItems: typeList,
},
},
// formatter({ value }) {
// let retVal = '';
// switch (value) {
// case 'int':
// retVal = 'INT';
// break;
// case 'str':
// retVal = 'STRING';
// break;
// case 'function':
// retVal = 'FUNCTION';
// break;
// }
// return retVal;
// },
// editor: {
// type: 'select',
// options: {
// listItems: typeList,
// },
// },
},
{ header: '값', name: 'val', editor: 'text' },
{ header: 'rowStat', name: 'rowStat', hidden: true },
@ -676,56 +694,95 @@ export default {
gridKey: this.gridNameParam,
value: myColumns,
});
this.getRowParamData();
this.paramLoadGrid = true;
// this.getRowParamData();
},
getRowParamData() {
this.paramLoadGrid = false;
let res = [];
// let res = [];
/* this.pageData.paramStrData 처리 */
// console.log("this.pageData.paramStrData : ", JSON.parse(this.pageData.paramStrData));
let rowData = {};
if (
this.pageData.paramStrData.startsWith('{') &&
this.pageData.paramStrData.endsWith('}')
) {
rowData = JSON.parse(this.pageData.paramStrData);
}
var keys = Object.keys(rowData); //키를 가져옵니다. 이때, keys 는 반복가능한 객체가 됩니다.
for (var i = 0; i < keys.length; i++) {
var key = keys[i];
res.push(rowData[key]);
}
// /* this.pageData.paramStrData 처리 */
// // console.log("this.pageData.paramStrData : ", JSON.parse(this.pageData.paramStrData));
// let rowData = {};
// if (
// this.pageData.paramStrData.startsWith('{') &&
// this.pageData.paramStrData.endsWith('}')
// ) {
// rowData = JSON.parse(this.pageData.paramStrData);
// }
// var keys = Object.keys(rowData); //키를 가져옵니다. 이때, keys 는 반복가능한 객체가 됩니다.
// for (var i = 0; i < keys.length; i++) {
// var key = keys[i];
// res.push(rowData[key]);
// }
const newRes = res.map(item => {
const newObj = {
...item,
rowStat: null,
id: item.id || '',
mode: item.mode || 'in',
type: item.type || 'str',
val: item.val || '',
};
return newObj;
});
// const newRes = res.map(item => {
// const newObj = {
// ...item,
// rowStat: null,
// id: item.id || '',
// mode: item.mode || 'in',
// type: item.type || 'str',
// val: item.val || '',
// };
// return newObj;
// });
const newRes = [
{
"id": "VAR001",
"mode": "OUT",
"type": "int",
"val": "100",
"rowStat": "C"
},
{
"id": "VAR002",
"mode": "IN",
"type": "str",
"val": "Hello World",
"rowStat": "U"
},
{
"id": "FUNC001",
"mode": "out",
"type": "function",
"val": "calculateSum()",
"rowStat": "C"
},
{
"id": "VAR003",
"mode": "IN",
"type": "int",
"val": "42",
"rowStat": "D"
},
{
"id": "VAR004",
"mode": "OUT",
"type": "str",
"val": "Sample Text",
"rowStat": "C"
}
];
this.setGridData({
gridKey: this.gridNameParam,
value: newRes,
});
this.$nextTick(() => {
if (newRes.length > 0) {
try {
this.$refs[this.gridNameParam].focus({
//rowKey: 0,
rowKey: 0,
setScroll: true,
});
} catch (error) {
console.log('error[nextTick grid] : ', error);
}
}
});
// this.$nextTick(() => {
// if (newRes.length > 0) {
// try {
// this.$refs[this.gridNameParam].focus({
// //rowKey: 0,
// rowKey: 0,
// setScroll: true,
// });
// } catch (error) {
// console.log('error[nextTick grid] : ', error);
// }
// }
// });
this.paramLoadGrid = true;
},
xlsDataBind(res) {
@ -754,21 +811,22 @@ export default {
},
inputClick(event, item, valueNm) {
if (valueNm == 'refVal1') {
const rowIdxKey = this.$refs[this.gridName].gridInstance.invoke(
'getFocusedCell',
).rowKey;
const selectRowData = this.$refs[this.gridName].gridInstance.invoke(
'getRow',
rowIdxKey,
);
this.dialog = true;
// const rowIdxKey = this.$refs[this.gridName].gridInstance.invoke(
// 'getFocusedCell',
// ).rowKey;
// const selectRowData = this.$refs[this.gridName].gridInstance.invoke(
// 'getRow',
// rowIdxKey,
// );
if (selectRowData.batchExecTp == 'DP') {
// 여기에 팝업 레이어 띠우기 기능 추가
this.pageData.paramStrData = event.target.value;
this.pageData.paramChangeDataTarget = event.target;
this.getRowParamData();
this.dialog = true;
}
// if (selectRowData.batchExecTp == 'DP') {
// // 여기에 팝업 레이어 띠우기 기능 추가
// this.pageData.paramStrData = event.target.value;
// this.pageData.paramChangeDataTarget = event.target;
// this.getRowParamData();
// this.dialog = true;
// }
}
},
setParamChangeData() {
@ -835,10 +893,10 @@ const defaultData = {
/* 파라메터 설정요 변수 */
/* { "1": {"id": "comId", "type": "str", "val": "COM01"},
"2": {"id": "toStrDt", "type": "function", "val": "DATE_FORMAT(NOW(), '%Y%h%d')"},
"3": {"id": "userId", "type": "str", "val": "3"},
"4": {"id": "retCd", "mode":"OUT","type": "int", "val": "-1"},
"5": {"id": "retMsg", "mode":"OUT","type": "str", "val": "전달"}} */
"2": {"id": "toStrDt", "type": "function", "val": "DATE_FORMAT(NOW(), '%Y%h%d')"},
"3": {"id": "userId", "type": "str", "val": "3"},
"4": {"id": "retCd", "mode":"OUT","type": "int", "val": "-1"},
"5": {"id": "retMsg", "mode":"OUT","type": "str", "val": "전달"}} */
paramStrData: '',
paramChangeDataStr: '',
paramChangeDataTarget: null,
@ -920,7 +978,10 @@ const myDetail = [
valueNm: 'batchId',
readonly: true,
cols: 6,
class: 'py-2',
labelCols: 12,
textCols: 12,
class: 'py-3 pr-4',
iconShow: true,
required: false,
placeholder: '시스템 자동입력',
},
@ -929,7 +990,10 @@ const myDetail = [
label: '배치명',
valueNm: 'batchNm',
cols: 6,
class: 'py-2',
labelCols: 12,
textCols: 12,
class: 'py-3 pl-4',
iconShow: true,
required: true,
},
{
@ -937,7 +1001,10 @@ const myDetail = [
label: '배치 실행 구분',
valueNm: 'batchExecTp',
cols: 6,
class: 'py-2',
labelCols: 12,
textCols: 12,
class: 'py-3 pr-4',
iconShow: true,
list: 'batchExecTpList',
itemText: 'commCdNm',
itemValue: 'commCd',
@ -948,7 +1015,10 @@ const myDetail = [
label: '배치 중복 여부',
valueNm: 'batchDupExecFg',
cols: 6,
class: 'py-2',
labelCols: 12,
textCols: 12,
class: 'py-3 pl-4',
iconShow: true,
list: 'batchDupExecFgList',
itemText: 'commCdNm',
itemValue: 'commCd',
@ -959,7 +1029,10 @@ const myDetail = [
label: '실행주기(초)',
valueNm: 'execCyclSecVal',
cols: 6,
class: 'py-2',
labelCols: 12,
textCols: 12,
class: 'py-3 pr-4',
iconShow: true,
required: true,
},
{
@ -967,7 +1040,10 @@ const myDetail = [
label: '실행주기(분)',
valueNm: 'execCyclMinVal',
cols: 6,
class: 'py-2',
labelCols: 12,
textCols: 12,
class: 'py-3 pl-4',
iconShow: true,
required: true,
},
{
@ -975,7 +1051,10 @@ const myDetail = [
label: '실행주기(시)',
valueNm: 'execCyclHhVal',
cols: 6,
class: 'py-2',
labelCols: 12,
textCols: 12,
class: 'py-3 pr-4',
iconShow: true,
required: true,
},
{
@ -983,7 +1062,10 @@ const myDetail = [
label: '실행주기(일)',
valueNm: 'execCyclDdVal',
cols: 6,
class: 'py-2',
labelCols: 12,
textCols: 12,
class: 'py-3 pl-4',
iconShow: true,
required: true,
},
{
@ -991,7 +1073,10 @@ const myDetail = [
label: '실행주기(월)',
valueNm: 'execCyclMmVal',
cols: 6,
class: 'py-2',
labelCols: 12,
textCols: 12,
class: 'py-3 pr-4',
iconShow: true,
required: true,
},
{
@ -999,7 +1084,10 @@ const myDetail = [
label: '실행주기(요일)',
valueNm: 'execCyclWdayVal',
cols: 6,
class: 'py-2',
labelCols: 12,
textCols: 12,
class: 'py-3 pl-4',
iconShow: true,
required: true,
},
{
@ -1007,7 +1095,10 @@ const myDetail = [
label: '실행주기(년)',
valueNm: 'execCyclYyyyVal',
cols: 6,
class: 'py-2',
labelCols: 12,
textCols: 12,
class: 'py-3 pr-4',
iconShow: true,
required: true,
},
{
@ -1015,7 +1106,10 @@ const myDetail = [
label: '후속배치',
valueNm: 'fllwBatchId',
cols: 6,
class: 'py-2',
labelCols: 12,
textCols: 12,
class: 'py-3 pl-4',
iconShow: true,
list: 'fllwBatchIdList',
itemText: 'batchIdNm',
itemValue: 'batchId',
@ -1026,7 +1120,10 @@ const myDetail = [
label: '실행명령',
valueNm: 'execCmnd',
cols: 6,
class: 'py-2',
labelCols: 12,
textCols: 12,
class: 'py-3 pr-4',
iconShow: true,
required: true,
},
{
@ -1034,7 +1131,10 @@ const myDetail = [
label: '실행 명령 경로',
valueNm: 'execCmndPath',
cols: 6,
class: 'py-2',
labelCols: 12,
textCols: 12,
class: 'py-3 pl-4',
iconShow: true,
required: true,
},
{
@ -1042,7 +1142,10 @@ const myDetail = [
label: '참조값1',
valueNm: 'refVal1',
cols: 6,
class: 'py-2',
labelCols: 12,
textCols: 12,
class: 'py-3 pr-4',
iconShow: true,
required: true,
},
{
@ -1050,21 +1153,30 @@ const myDetail = [
label: '참조값2',
valueNm: 'refVal2',
cols: 6,
class: 'py-2',
labelCols: 12,
textCols: 12,
class: 'py-3 pl-4',
iconShow: true,
},
{
type: 'InputText',
label: '참조값3',
valueNm: 'refVal3',
cols: 6,
class: 'py-2',
labelCols: 12,
textCols: 12,
class: 'py-3 pr-4',
iconShow: true,
},
{
type: 'CheckBox',
label: '사용여부',
valueNm: 'useFg',
cols: 6,
class: 'py-2',
labelCols: 12,
textCols: 12,
class: 'py-3 pl-4',
iconShow: true,
value: { '1': true, '0': false },
required: true,
},
@ -1074,7 +1186,10 @@ const myDetail = [
valueNm: 'regUserNo',
disabled: true,
cols: 6,
class: 'py-2',
labelCols: 12,
textCols: 12,
class: 'py-3 pr-4',
iconShow: true,
placeholder: '시스템 자동입력',
},
{
@ -1083,7 +1198,10 @@ const myDetail = [
valueNm: 'regDttm',
disabled: true,
cols: 6,
class: 'py-2',
labelCols: 12,
textCols: 12,
class: 'py-3 pl-4',
iconShow: true,
placeholder: '시스템 자동입력',
},
{
@ -1092,7 +1210,10 @@ const myDetail = [
valueNm: 'procUserNo',
disabled: true,
cols: 6,
class: 'py-2',
labelCols: 12,
textCols: 12,
class: 'py-3 pr-4',
iconShow: true,
placeholder: '시스템 자동입력',
},
{
@ -1101,11 +1222,11 @@ const myDetail = [
valueNm: 'procDttm',
disabled: true,
cols: 6,
class: 'py-2',
labelCols: 12,
textCols: 12,
class: 'py-3 pl-4',
iconShow: true,
placeholder: '시스템 자동입력',
},
];
</script>
<style lang="scss">
@import '@/assets/scss/common.scss';
</style>

View File

@ -484,8 +484,7 @@ const defaultData = {
},
};
</script>
<style lang="scss">
@import '@/assets/scss/common.scss';
<style lang="scss" scoped>
.selectbox:focus {
outline: none;
}

View File

@ -598,6 +598,3 @@ const myDetail = [
},
];
</script>
<style lang="scss">
@import '@/assets/scss/common.scss';
</style>

View File

@ -12,7 +12,7 @@
/>
</v-col>
<v-col :cols="4">
<component :is="'SelectUseFg'" :parentPrgmId="myPrgmId" />
<component :is="'SelectUseFg'" :parentPrgmId="myPrgmId" :labelCols="12" :textCols="12" />
</v-col>
<v-col :cols="4" class="text-right">
<BtnSearch @click="search" />
@ -158,6 +158,23 @@ export default {
myPrgmId: myPrgmId,
gridName: 'rowGrid',
loadGrid: false,
dataPathMock: {
'rowGrid': {
column: [
{ header: '회사 ID', name: 'comId', hidden: true },
{ header: '설비 그룹 ID', name: 'eqpmGrpId'},
{ header: '설비 그룹 명', name: 'eqpmGrpNm'},
{ header: '설비종류', name: 'eqpmKindId'},
{ header: '사용여부', name: 'useFg'},
{ header: '등록자NO', name: 'regUserNo', hidden: true},
{ header: '등록일시', name: 'regDttm', hidden: true },
{ header: '수정자NO', name: 'procUserNo', hidden: true },
{ header: '수정일시', name: 'procDttm', hidden: true}
],
data: dataPathDataExample,
defaultRow: dataPathDataExample,
}
},
};
},
computed: {
@ -437,7 +454,18 @@ const defaultData = {
},
},
};
import { getPathDataExample } from '@/const/const'
const dataPathDataExample = getPathDataExample({
comId: 'EKIND0005',
eqpmGrpId: 'EQG000010',
eqpmGrpNm:'냉수파이프고온',
eqpmKindId:'냉동파이프',
useFg:'1',
regUserNo: '사용',
regDttm: 'EQP_HVAC_LT_CH001',
procUserNo: '사용',
procDttm: 'EQP_HVAC_LT_CH001',
});
</script>
<style lang="scss">
@import '@/assets/scss/common.scss';
</style>

View File

@ -545,7 +545,7 @@ const myDetail = [
];
</script>
<style lang="scss">
<style lang="scss" scoped>
.swiper-wrapper{
box-sizing: inherit !important;
}

View File

@ -9,32 +9,23 @@
<v-card-title class="pa-0">공지사항</v-card-title>
<div class="d-flex align-center">
<!-- <v-btn @click="listPageButtonGroupClickEvent('view')" :ripple="false" class="mr-1">상세보기</v-btn> -->
<v-btn
@click="listPageButtonGroupClickEvent('write')"
:ripple="false"
class="mr-1"
>작성</v-btn
>
<a-button type="primary" size="large" @click="listPageButtonGroupClickEvent('write')" :ripple="false"
icon="edit" class="mr-1">작성</a-button>
<!-- <v-btn @click="listPageButtonGroupClickEvent('delete')" :ripple="false">삭제</v-btn> -->
</div>
</div>
</v-card>
</v-col>
</v-row>
<v-row ref="contents" style="height:calc(100% - 76px)">
<v-row ref="contents">
<v-col :cols="12">
<v-card class="pa-5">
<div class="h100 px-5" style="height:calc(100% - 70px)">
<div ref="gridParent" class="h100">
<component
:is="loadGrid ? 'Grid' : null"
:gridName="gridName"
:parentPrgmId="myPrgmId"
ref="noticeMngGrid"
@getRowsData="getRowData"
/>
</div>
<div ref="gridParent" class="h100 px-50">
<component :is="loadGrid ? 'Grid' : null" :gridName="gridName" :parentPrgmId="myPrgmId"
ref="noticeMngGrid" @getRowsData="getRowData" :dataPath="dataPathMock" />
</div>
<!-- <div class="h100 W100 px-50" style="min-height:calc(100% - 70px)">
</div> -->
</v-card>
</v-col>
</v-row>
@ -42,94 +33,62 @@
<!-- 리스트 페이지 -->
<!-- 상세보기 페이지 시작 -->
<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">공지사항</v-card-title>
<div class="d-flex align-center">
<v-btn
@click="viewPageButtonGroupClickEvent('list')"
:ripple="false"
class="mr-1"
>목록</v-btn
>
<v-btn
@click="viewPageButtonGroupClickEvent('reply')"
:ripple="false"
class="mr-1"
>답글</v-btn
>
<v-btn
@click="viewPageButtonGroupClickEvent('update')"
:ripple="false"
class="mr-1"
>수정</v-btn
>
<v-btn
@click="viewPageButtonGroupClickEvent('delete')"
:ripple="false"
>삭제</v-btn
>
</div>
<v-card>
<v-row class="pa-5">
<v-col :cols="12" class="d-flex align-center justify-space-between ">
<v-card-title class="pa-0 custom-title-4">공지사항</v-card-title>
<div class="d-flex align-center">
<a-button @click="viewPageButtonGroupClickEvent('list')" type="primary" :ripple="false" class="mr-1" icon="unordered-list" >목록</a-button>
<a-button @click="viewPageButtonGroupClickEvent('reply')" type="primary" :ripple="false" class="mr-1" icon="send-outlined" >
<v-icon
small
:class="['mr-2']"
>$icoSend</v-icon>
답글
</a-button>
<a-button @click="viewPageButtonGroupClickEvent('update')" type="primary" :ripple="false" class="mr-1" icon="edit">수정</a-button>
<a-button @click="viewPageButtonGroupClickEvent('delete')" type="danger" ghost icon="delete" >삭제</a-button>
</div>
</v-card>
</v-col>
</v-row>
<v-row>
<v-col :cols="12">
<v-card min-height="60" class="pa-5">
<v-text-field
v-model="viewActionData.title"
class="v-input__custom"
placeholder="제목"
hide-details
:readonly="true"
>
</v-col>
<v-col :cols="12" class="custom-title-4-new">
제목
</v-col>
<v-col :cols="12">
<v-text-field v-model="viewActionData.title" class="v-input__custom" hide-details
:readonly="true">
</v-text-field>
</v-card>
</v-col>
</v-row>
<v-row style="height:calc(100% - 218px);">
<v-col :cols="12" style="height: 100%;">
<v-card class="pa-5" style="overflow-y:auto;">
<viewer
v-if="viewActionData.viewerFlag"
ref="tuiViewer"
height="inherit"
:initialValue="viewActionData.content"
theme="white"
:class="isDarkMode ? 'theme--white' : 'theme--black'"
/>
</v-card>
</v-col>
</v-row>
<!-- <v-row style="height: 1vh;">
</v-row> -->
<v-row>
<v-col :cols="12">
<v-card class="pa-5">
<v-row align="center" no-gutters>
<v-col cols="1">
<v-card-subtitle class="pa-0">파일목록</v-card-subtitle>
</v-col>
<v-col :cols="11">
<v-row
v-for="fileData in viewActionData.fileData"
:key="fileData.apndFileId"
>
<a @click.prevent="downloadFile(fileData)">
<div class="search-box-label">
{{ fileData.apndFileNm + '.' + fileData.apndFileExt }}
</div>
</a>
</v-row>
</v-col>
</v-row>
</v-card>
</v-col>
</v-row>
</v-col>
</v-row>
<v-row style="height:calc(100% - 218px);">
<v-col :cols="12" style="height: 100%;">
<v-card class="pa-5" style="overflow-y:auto;">
<viewer v-if="viewActionData.viewerFlag" ref="tuiViewer" height="inherit"
:initialValue="viewActionData.content" theme="white"
:class="isDarkMode ? 'theme--white' : 'theme--black'" />
</v-card>
</v-col>
</v-row>
<v-row>
<v-col :cols="12">
<v-card class="pa-5">
<v-row align="center" no-gutters>
<v-col cols="1">
<v-card-subtitle class="pa-0">파일목록</v-card-subtitle>
</v-col>
<v-col :cols="11">
<v-row v-for="fileData in viewActionData.fileData" :key="fileData.apndFileId">
<a @click.prevent="downloadFile(fileData)">
<div class="search-box-label">
{{ fileData.apndFileNm + '.' + fileData.apndFileExt }}
</div>
</a>
</v-row>
</v-col>
</v-row>
</v-card>
</v-col>
</v-row>
</v-card>
</div>
<!-- 상세보기 페이지 -->
<!-- 작성 페이지 시작 -->
@ -138,130 +97,74 @@
<v-col :cols="12">
<v-card>
<v-card-title>공지사항</v-card-title>
</v-card>
</v-col>
</v-row>
<v-row>
<v-col :cols="12">
<v-card min-height="60" class="pa-5">
<v-text-field
v-model="writeActionData.title"
class="v-input__custom"
placeholder="제목"
hide-details
>
</v-text-field>
</v-card>
</v-col>
</v-row>
<v-row style="height:calc(100% - 270px)">
<v-col :cols="12">
<editor ref="tuiEditor" height="100%" initialEditType="wysiwyg" />
</v-col>
</v-row>
<v-row>
<v-col :cols="12">
<v-card class="pa-5">
<v-row align="center" no-gutters>
<v-col cols="1">
<v-card-subtitle class="pa-0">파일첨부</v-card-subtitle>
<v-row class="pa-5">
<v-col :cols="12" class="custom-title-4-new">
제목
</v-col>
<v-col :cols="4">
<v-file-input
multiple
background-color="#47535c"
show-size
v-model="writeActionData.fileData"
hide-details="true"
>
<v-col :cols="12">
<v-text-field v-model="writeActionData.title" class="v-input__custom" hide-details outlined>
</v-text-field>
</v-col>
<v-col :cols="12" style="min-height: calc(90vh - 270px);">
<editor ref="tuiEditor" height="100%" initialEditType="wysiwyg" />
</v-col>
<v-col :cols="12" class="custom-title-4-new mt-2">
파일첨부
</v-col>
<v-col :cols="6">
<!-- background-color="#47535c" -->
<v-file-input multiple show-size v-model="writeActionData.fileData" hide-details="true"
clear-icon="delete" chips label="업로드" flat hide-input outlined>
<!-- append-icon="cancel" -->
</v-file-input>
</v-col>
<v-col :cols="12" class="text-right">
<a-button @click="writePageButtonGroupClickEvent('cancel')" :ripple="false" class="mr-2">취소</a-button>
<a-button @click="writePageButtonGroupClickEvent('write')" :ripple="false" type="primary">등록</a-button>
</v-col>
</v-row>
</v-card>
</v-col>
</v-row>
<v-row>
<v-col :cols="12" class="text-right">
<v-btn
@click="writePageButtonGroupClickEvent('write')"
:ripple="false"
>등록</v-btn
>
<v-btn
@click="writePageButtonGroupClickEvent('cancel')"
:ripple="false"
>취소</v-btn
>
</v-col>
</v-row>
</div>
<!-- 작성 페이지 -->
<!-- 답글 작성 페이지 시작 -->
<div v-if="pageActionFlag == 'reply'" class="h100">
<v-row align="center" no-gutters>
<v-col :cols="12">
<v-card>
<v-card-title>공지사항</v-card-title>
</v-card>
</v-col>
</v-row>
<v-row>
<v-col :cols="12">
<v-card min-height="60" class="pa-5">
<v-text-field
v-model="replyActionData.title"
class="v-input__custom"
placeholder="제목"
hide-details
>
<div v-if="pageActionFlag == 'reply'" class="h1001">
<v-card class="pa-5">
<v-row>
<v-col :cols="12" class="card-title-color">
<v-card-title class="pa-0 custom-title-4">공지사항</v-card-title>
</v-col>
</v-row>
<v-row align="center" class="mt-5" >
<v-col :cols="12">
<p class="custom-title-4-new">제목</p>
<v-text-field v-model="replyActionData.title" class="v-input__custom" placeholder="제목" outlined hide-details>
</v-text-field>
</v-card>
</v-col>
</v-row>
<v-row style="height:calc(100% - 270px)">
<v-col :cols="12">
<editor
ref="tuiReplyEditor"
height="100%"
initialEditType="wysiwyg"
/>
</v-col>
</v-row>
<v-row>
<v-col :cols="12">
<v-card class="pa-5">
<v-row align="center" no-gutters>
<v-col cols="1">
<v-card-subtitle class="pa-0">파일첨부</v-card-subtitle>
</v-col>
<v-col :cols="4">
<v-file-input
multiple
background-color="#47535c"
show-size
v-model="replyActionData.fileData"
hide-details="true"
>
</v-file-input>
</v-col>
</v-row>
</v-card>
</v-col>
</v-row>
<v-row>
<v-col :cols="12" class="text-right">
<v-btn
@click="replyPageButtonGroupClickEvent('reply')"
:ripple="false"
>등록</v-btn
>
<v-btn
@click="replyPageButtonGroupClickEvent('cancel')"
:ripple="false"
>취소</v-btn
>
</v-col>
</v-row>
</v-col>
<v-col :cols="12" style="height: calc(100vh - 270px);" class="mt-4" >
<editor ref="tuiReplyEditor" height="100%" initialEditType="wysiwyg" />
</v-col>
<v-col :cols="12" class="custom-title-4-new mt-4" >
파일첨부
</v-col>
<v-col :cols="12" >
<v-file-input
multiple
show-size
v-model="replyActionData.fileData"
hide-details="true">
</v-file-input>
</v-col>
<v-col :cols="12" class="text-right">
<a-button @click="replyPageButtonGroupClickEvent('cancel')" :ripple="false">취소</a-button>
<a-button @click="replyPageButtonGroupClickEvent('reply')" :ripple="false" type="primary" >등록</a-button>
</v-col>
</v-row>
</v-card>
</div>
<!-- 답글 작성 페이지 -->
<!-- 수정 페이지 시작 -->
@ -276,24 +179,15 @@
<v-row>
<v-col :cols="12">
<v-card min-height="60" class="pa-5">
<v-text-field
v-model="updateActionData.title"
class="v-input__custom"
placeholder="제목"
hide-details
>
<v-text-field v-model="updateActionData.title" class="v-input__custom" placeholder="제목" hide-details>
</v-text-field>
</v-card>
</v-col>
</v-row>
<v-row style="height:calc(100% - 342px)">
<v-col :cols="12">
<editor
ref="tuiUpdateEditor"
height="100%"
initialEditType="wysiwyg"
:initialValue="updateActionData.content"
/>
<editor ref="tuiUpdateEditor" height="100%" initialEditType="wysiwyg"
:initialValue="updateActionData.content" />
</v-col>
</v-row>
<v-row>
@ -304,13 +198,8 @@
<v-card-subtitle class="pa-0">파일첨부</v-card-subtitle>
</v-col>
<v-col :cols="4">
<v-file-input
multiple
background-color="#47535c"
show-size
v-model="updateActionData.fileData"
hide-details="true"
>
<v-file-input multiple background-color="#47535c" show-size v-model="updateActionData.fileData"
hide-details="true">
</v-file-input>
</v-col>
</v-row>
@ -325,10 +214,7 @@
<v-card-subtitle class="pa-0">파일목록</v-card-subtitle>
</v-col>
<v-col :cols="11">
<v-row
v-for="fileData in updateActionData.currentFileList"
:key="fileData.apndFileId"
>
<v-row v-for="fileData in updateActionData.currentFileList" :key="fileData.apndFileId">
<a @click.prevent="downloadFile(fileData)">
<v-col :cols="12">
<div class="search-box-label">
@ -336,10 +222,7 @@
</div>
</v-col>
</a>
<v-icon
class="pl-5"
@click="addFileToDeleteFileList(fileData)"
>
<v-icon class="pl-5" @click="addFileToDeleteFileList(fileData)">
mdi-close
</v-icon>
</v-row>
@ -350,16 +233,8 @@
</v-row>
<v-row>
<v-col :cols="12" class="text-right">
<v-btn
@click="updatePageButtonGroupClickEvent('update')"
:ripple="false"
>등록</v-btn
>
<v-btn
@click="updatePageButtonGroupClickEvent('cancel')"
:ripple="false"
>취소</v-btn
>
<v-btn @click="updatePageButtonGroupClickEvent('update')" :ripple="false">등록</v-btn>
<v-btn @click="updatePageButtonGroupClickEvent('cancel')" :ripple="false">취소</v-btn>
</v-col>
</v-row>
</div>
@ -442,6 +317,8 @@ export default {
postGrpOrd: null,
postOrgNo: null,
},
dataPathMock: {},
};
},
computed: {
@ -605,6 +482,12 @@ export default {
value: columnList,
});
// -----------------------TEST------------------
this.dataPathMock[this.gridName] = {
column: columnList,
data: dataPathDataExample,
}
// -----------------------END TEST--------------
this.getGridData();
},
async getGridData() {
@ -613,19 +496,30 @@ export default {
};
this.loadGrid = false;
var res = await this.postApiReturn({
apiKey: 'selectPostList',
resKey: 'postData',
sendParam: params,
});
let res = null;
try {
res = await this.postApiReturn({
apiKey: 'selectPostList',
resKey: 'postData',
sendParam: params,
});
}
catch (err) { }
finally {
// -----Test mock data-------------
if (null === res) {
res = dataPathDataExample;
}
// -----End test
}
this.setGridData({
gridKey: this.gridName,
value: res,
});
this.loadGrid = true;
this.$nextTick(() => {
this.loadGrid = true;
});
this.setPageData({ isFind: false });
},
getRowData(data) {
@ -1162,9 +1056,19 @@ const defaultData = {
column: [],
},
};
import { getPathDataExample } from '@/const/const'
const dataPathDataExample = getPathDataExample({
postNo: '18',
title: '오픈공지',
regUserNo: '1',
regDttm: '2023-01-09 09:39:41',
viewCnt: '1'
}, 10);
</script>
<style lang="scss">
<style lang="scss" scoped>
.tui-grid-table tr {
cursor: pointer;
}

View File

@ -4,7 +4,7 @@
<v-row ref="searchFilter">
<v-col :cols="12">
<v-card class="searchFilter">
<v-row align="center" no-gutters>
<v-row align="end" no-gutters>
<v-col :cols="3">
<component
:is="'selectCodeList'"
@ -13,6 +13,7 @@
:dataKey="'selectUseFg'"
:sendParam="{ commGrpCd: 'CO_USEFG', useFg: '1' }"
:addAll="true"
customClass="select-large"
/>
</v-col>
<v-col :cols="4">
@ -21,12 +22,13 @@
label="프로그램명"
valueNm="prgmNm"
:searchOption="true"
:labelCols="3"
:textCols="9"
:labelCols="12"
:textCols="12"
customClass="input-large"
/>
</v-col>
<v-col :cols="5" class="text-right">
<BtnSearch />
<BtnSearch size="large" />
</v-col>
</v-row>
</v-card>
@ -48,7 +50,7 @@
/>
</div>
</div>
<div style="height:calc(100% - 70px)">
<div style="min-height:calc(100% - 70px)">
<div ref="gridParent" class="px-5 h100">
<component
:ref="gridName"
@ -56,6 +58,7 @@
:parentPrgmId="myPrgmId"
:gridName="gridName"
@getRowsData="getRowData"
:dataPath="dataPathMock"
/>
</div>
</div>
@ -67,16 +70,16 @@
<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 h100" style="height:calc(100% - 76px)">
<div class="w100">
<component
:is="'Form'"
:parentPrgmId="myPrgmId"
:bindingData="gridName"
:detailList="detailList"
@gridEditingFinish="gridEditingFinish"
/>
</div>
<div class="px-5" style="min-height:calc(100% - 76px)">
<component
:is="'Form'"
:parentPrgmId="myPrgmId"
:bindingData="gridName"
:detailList="detailList"
@gridEditingFinish="gridEditingFinish"
/>
<!-- <div class="w100">
</div> -->
</div>
</v-card>
</v-col>
@ -127,6 +130,23 @@ export default {
gridName: 'rowGrid',
// rowGridOrigin: [],
detailList: myDetail,
dataPathMock: {
'rowGrid': {
column: [
{ header: '프로그램ID', name: 'field1', align: 'left' },
{ header: '프로그램덤', name: 'field2', align: 'left' },
{ header: '타임', name: 'field3', align: 'left' },
{ header: '사용여부', name: 'field4', align: 'left' }
],
data: dataPathDataExample,
defaultRow: dataPathDataExample,
option: {
scrollY: false,
scrollX: false,
}
}
},
};
},
computed: {
@ -443,6 +463,8 @@ const myDetail = [
class: 'py-2',
required: false,
placeholder: '시스템 자동입력',
textCols: 12,
iconShow: true
},
{
type: 'InputText',
@ -451,6 +473,8 @@ const myDetail = [
cols: 6,
class: 'py-2',
required: true,
textCols: 12,
iconShow: true
},
{
type: 'SelectBox',
@ -463,6 +487,8 @@ const myDetail = [
{ text: '프로그램', value: '1' },
{ text: '팝업', value: '2' },
],
textCols: 12,
iconShow: true
},
{
type: 'CheckBox',
@ -474,6 +500,8 @@ const myDetail = [
class: 'py-2',
value: { '1': true, '0': false },
required: true,
textCols: 12,
iconShow: true
},
{
type: 'InputText',
@ -483,6 +511,8 @@ const myDetail = [
cols: 12,
class: 'py-2',
required: true,
textCols: 12,
iconShow: true
},
{
type: 'InputText',
@ -492,6 +522,8 @@ const myDetail = [
cols: 6,
class: 'py-2',
placeholder: '시스템 자동입력',
textCols: 12,
iconShow: true
},
{
type: 'InputText',
@ -501,6 +533,8 @@ const myDetail = [
cols: 6,
class: 'py-2',
placeholder: '시스템 자동입력',
textCols: 12,
iconShow: true
},
{
type: 'InputText',
@ -510,6 +544,8 @@ const myDetail = [
cols: 6,
class: 'py-2',
placeholder: '시스템 자동입력',
textCols: 12,
iconShow: true
},
{
type: 'InputText',
@ -519,9 +555,17 @@ const myDetail = [
cols: 6,
class: 'py-2',
placeholder: '시스템 자동입력',
textCols: 12,
iconShow: true
},
];
import { getPathDataExample } from '@/const/const'
const dataPathDataExample = getPathDataExample({
field1: 'PRG0001',
field2: '대시보드',
field3: '프로그램',
field4: '사용'
});
</script>
<style lang="scss">
@import '@/assets/scss/common.scss';
</style>

View File

@ -542,6 +542,3 @@ const myDetail = [
},
];
</script>
<style lang="scss">
@import '@/assets/scss/common.scss';
</style>

View File

@ -447,6 +447,3 @@ const defaultData = {
selectedRowKey: null,
};
</script>
<style lang="scss">
@import '@/assets/scss/common.scss';
</style>

View File

@ -296,6 +296,3 @@ const menuCnctLogColumns = [
{ header: '메뉴 접근 일시', name: 'menuCnctDttm', align: 'center' },
];
</script>
<style lang="scss">
@import '@/assets/scss/common.scss';
</style>

View File

@ -553,7 +553,7 @@ const myDetail = [
];
</script>
<style lang="scss">
<style lang="scss" scoped>
.v-text-field__details {
display: none;
}

View File

@ -56,4 +56,3 @@ export default {
}
};
</script>
<style lang="scss">@import "@/assets/scss/common.scss" </style>

View File

@ -3,7 +3,7 @@
<v-row ref="searchFilter">
<v-col :cols="12">
<v-card class="searchFilter">
<v-row align="center" no-gutters>
<v-row >
<v-col :cols="3">
<component
:is="'SelectAddGrp'"
@ -12,6 +12,8 @@
dataKey="searchAddGrp"
:sendParam="{ useFg: '1' }"
:addAll="true"
:iconShow="true"
customClass="select-large"
/>
</v-col>
<v-col :cols="3">
@ -20,6 +22,8 @@
label="추가 정보명"
valueNm="addInfoNm"
:searchOption="true"
:iconShow="true"
customClass="input-large"
/>
</v-col>
<v-col :cols="3">
@ -30,10 +34,12 @@
dataKey="useFg"
:sendParam="{ commGrpCd: 'CO_USEFG', useFg: '1' }"
:addAll="true"
:iconShow="true"
customClass="select-large"
/>
</v-col>
<v-col :cols="3" class="text-right">
<BtnSearch @click="search" />
<v-col :cols="3" class="d-flex align-end justify-end text-right">
<BtnSearch @click="search" size="large" />
</v-col>
</v-row>
</v-card>
@ -58,6 +64,7 @@
:gridName="gridName"
:parentPrgmId="myPrgmId"
@getRowsData="getRowData"
:dataPath="dataPathMock"
/>
</div>
</div>
@ -130,10 +137,24 @@ export default {
return {
myPrgmId: myPrgmId,
gridName: 'rowGrid',
loadGrid: false,
loadGrid: true,
tab: null,
detailList: myDetail,
initedFlag: false,
dataPathMock : {
'rowGrid': {
column: [
{ header: '추가 정보 그룹', name: 'addGrpId', align: 'left' },
{ header: '추가 정보 ID', name: 'addInfoId', align: 'left' },
{ header: '추가 정보 명', name: 'addInfoNm', align: 'left' },
{ header: 'Data 형식', name: 'addInfoDataKind', align: 'center' },
{ header: '사용여부', name: 'useFg', align: 'center' },
],
data: dataMockExample,
defaultRow: dataMockExample,
option: {},
},
},
};
},
computed: {
@ -330,7 +351,8 @@ export default {
this.search();
},
async search() {
this.loadGrid = false;
//process
this.loadGrid = true;
await this.getRowGridData();
await this.setPageData({
isFind: false,
@ -510,7 +532,10 @@ const myDetail = [
valueNm: 'addGrpId',
disabled: true,
cols: 6,
class: 'py-2',
labelCols: 12,
textCols: 12,
iconShow: true,
class: 'py-2 pr-4',
list: 'addGrpList',
itemText: 'addGrpNm',
itemValue: 'addGrpId',
@ -522,7 +547,10 @@ const myDetail = [
valueNm: 'addInfoId',
disabled: true,
cols: 6,
class: 'py-2',
labelCols: 12,
textCols: 12,
iconShow: true,
class: 'py-2 pl-4',
required: true,
},
{
@ -531,7 +559,10 @@ const myDetail = [
valueNm: 'addInfoNm',
disabled: false,
cols: 6,
class: 'py-2',
labelCols: 12,
textCols: 12,
iconShow: true,
class: 'py-2 pr-4',
required: true,
},
{
@ -540,7 +571,10 @@ const myDetail = [
valueNm: 'addInfoDataKind',
disabled: false,
cols: 6,
class: 'py-2',
labelCols: 12,
textCols: 12,
iconShow: true,
class: 'py-2 pl-4',
list: 'addInfoDataKindList',
itemText: 'commCdNm',
itemValue: 'commCd',
@ -552,7 +586,10 @@ const myDetail = [
valueNm: 'useFg',
disabled: false,
cols: 6,
class: 'py-2',
labelCols: 12,
textCols: 12,
iconShow: true,
class: 'py-2 pr-4',
value: { '1': true, '0': false },
required: true,
},
@ -562,7 +599,10 @@ const myDetail = [
valueNm: 'regUserNo',
disabled: true,
cols: 6,
class: 'py-2',
labelCols: 12,
textCols: 12,
iconShow: true,
class: 'py-2 pl-4',
placeholder: '시스템 자동입력',
},
{
@ -571,7 +611,10 @@ const myDetail = [
valueNm: 'regDttm',
disabled: true,
cols: 6,
class: 'py-2',
labelCols: 12,
textCols: 12,
iconShow: true,
class: 'py-2 pr-4',
placeholder: '시스템 자동입력',
},
{
@ -580,7 +623,10 @@ const myDetail = [
valueNm: 'procUserNo',
disabled: true,
cols: 6,
class: 'py-2',
labelCols: 12,
textCols: 12,
iconShow: true,
class: 'py-2 pl-4',
placeholder: '시스템 자동입력',
},
{
@ -589,11 +635,50 @@ const myDetail = [
valueNm: 'procDttm',
disabled: true,
cols: 6,
class: 'py-2',
labelCols: 12,
textCols: 12,
iconShow: true,
class: 'py-2 pr-4',
placeholder: '시스템 자동입력',
},
];
const dataMockExample = [
{
addGrpId: 'GRP001',
addInfoId: 'INFO001',
addInfoNm: '온도 센서',
addInfoDataKind: 'DATA01',
useFg: true,
},
{
addGrpId: 'GRP002',
addInfoId: 'INFO002',
addInfoNm: '압력 센서',
addInfoDataKind: 'DATA02',
useFg: false,
},
{
addGrpId: 'GRP003',
addInfoId: 'INFO003',
addInfoNm: '압력 센서',
addInfoDataKind: 'DATA03',
useFg: false,
},
{
addGrpId: 'GRP004',
addInfoId: 'INFO004',
addInfoNm: '압력 센서',
addInfoDataKind: 'DATA04',
useFg: false,
},
{
addGrpId: 'GRP005',
addInfoId: 'INFO005',
addInfoNm: '압력 센서',
addInfoDataKind: 'DATA05',
useFg: false,
},
];
</script>
<style lang="scss">
@import '@/assets/scss/common.scss';
</style>

View File

@ -714,6 +714,3 @@ function numberFormatter({ value }) {
return Utility.setFormatIntDecimal(Number(value), 2);
}
</script>
<style lang="scss">
@import '@/assets/scss/common.scss';
</style>

View File

@ -511,6 +511,3 @@ const defaultData = {
selectedCommCdData: null,
};
</script>
<style lang="scss">
@import '@/assets/scss/common.scss';
</style>

File diff suppressed because it is too large Load Diff

View File

@ -3,227 +3,142 @@
<v-row ref="searchFilter">
<v-col :cols="12">
<v-card class="searchFilter">
<v-row align="center" no-gutters>
<v-col :cols="6">
<InputText
:labelCols="2"
:parentPrgmId="myPrgmId"
label="지표명"
valueNm="searchEffcIdxNm"
:searchOption="true"
/>
<v-row align="end" no-gutters>
<v-col :cols="3">
<InputText :labelCols="12" :textCols="12" :parentPrgmId="myPrgmId" label="지표명"
valueNm="searchEffcIdxNm" :searchOption="true" :customClass="'input-large fixed-width'"
:iconShow="true" />
</v-col>
<v-col :cols="6" class="text-right">
<BtnSearch @click="search" />
<v-col :cols="9" class="text-right">
<BtnSearch @click="search" size="large" />
</v-col>
</v-row>
</v-card>
</v-col>
</v-row>
<v-row ref="contents">
<v-col :cols="3" style="height:100%">
<v-col :cols="5" 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 custom-title-4"
>효율지표 리스트</v-card-title
>
<Buttons
:parentPrgmId="myPrgmId"
:bindingData="gridName"
:btnActionsFnc="btnActions"
/>
<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="px-5" style="height:calc(100% - 76px)">
<div class="px-4" style="height:calc(100% - 76px)">
<div ref="gridParent" id="gridParent" class="w100 h100">
<component
:ref="gridName"
:is="loadGrid ? 'Grid' : null"
:gridName="gridName"
:parentPrgmId="myPrgmId"
@getRowsData="getRowData"
:preventFocusChangeEventFlag="false"
/>
<component :ref="gridName" :is="loadGrid ? 'Grid' : null" :gridName="gridName"
:parentPrgmId="myPrgmId" @getRowsData="getRowData" :preventFocusChangeEventFlag="false"
:dataPath="dataPathExample" />
</div>
</div>
</v-card>
</v-col>
<v-col :cols="9" style="height:100%">
<v-col :cols="7" style="height:100%">
<v-card class="pb-5">
<v-card-title class="custom-title-4" style="min-height:76px;"
>효율지표 상세
<v-card-title class="custom-title-4 pa-4 pb-2">효율지표 상세
</v-card-title>
<div class="px-5" style="height:calc(100% - 76px)">
<div class="px-4" style="height:calc(100% - 76px)">
<v-tabs v-model="tab">
<v-tab
v-for="item in items"
:key="item.id"
:disabled="
(item.id == 'EffcIdxAddInfoTab'
? isInfoTabDisabled
: false) || item.disabledFlag
"
>
<v-tab v-for="item in items" :key="item.id" :disabled="(item.id == 'EffcIdxAddInfoTab'
? isInfoTabDisabled
: false) || item.disabledFlag
">
{{ item.name }}
</v-tab>
</v-tabs>
<v-tabs-items
v-model="tab"
style="height: calc(100% - 65px);"
class="py-6"
>
<v-tabs-items v-model="tab" class="py-6">
<v-tab-item v-for="(item, idx) in items" :key="item.id">
<v-row v-if="item.id == 'EffcIdxInfoTab'">
<v-col :cols="6" class="py-2">
<InputText
ref="effcIdxId"
:parentPrgmId="myPrgmId"
label="효율지표 ID"
valueNm="effcIdxId"
:required="true"
:readonly="true"
placeholder="시스템 자동입력"
/>
<v-row v-if="item.id == 'EffcIdxInfoTab'" class="form-row no-gutters">
<v-col :cols="6" class="py-3 pr-4">
<InputText ref="effcIdxId" :parentPrgmId="myPrgmId" label="효율지표 ID"
valueNm="effcIdxId" :required="true" :readonly="true" placeholder="시스템 자동입력"
:iconShow="true" />
</v-col>
<v-col :cols="6" class="py-2">
<InputText
ref="effcIdxNm"
:parentPrgmId="myPrgmId"
label="효율지표 명"
valueNm="effcIdxNm"
:required="true"
/>
<v-col :cols="6" class="py-3 pl-4">
<InputText ref="effcIdxNm" :parentPrgmId="myPrgmId" label="효율지표 명"
valueNm="effcIdxNm" :required="true" :iconShow="true" />
</v-col>
<v-col :cols="6" class="py-2">
<component
:is="'SelectBox'"
:propsValue="selectValue01"
:itemList="selectValueList01"
:label="'적용최소범위'"
:required="true"
:textCols="7"
@update:propsValue="selectValue01 = $event"
/>
<v-col :cols="6" class="py-3 pr-4">
<component :is="'SelectBox'" :propsValue="selectValue01"
:itemList="selectValueList01" :label="'적용최소범위'" :required="true"
:textCols="12" :labelCols="12"
@update:propsValue="selectValue01 = $event" />
</v-col>
<v-col :cols="6" class="py-2">
<component
:is="'SelectBox'"
:propsValue="selectValue02"
:itemList="selectValueList02"
:label="'상위집계방법'"
:required="true"
:textCols="7"
@update:propsValue="selectValue02 = $event"
/>
<v-col :cols="6" class="py-3 pl-4">
<component :is="'SelectBox'" :propsValue="selectValue02"
:itemList="selectValueList02" :label="'상위집계방법'" :required="true"
:textCols="12" :labelCols="12"
@update:propsValue="selectValue02 = $event" />
</v-col>
<v-col :cols="6" class="py-2">
<component
:is="'SelectBox'"
:propsValue="selectValue03"
:itemList="selectValueList03"
:label="'효율지표종류'"
:required="true"
:textCols="7"
@update:propsValue="selectValue03 = $event"
/>
<v-col :cols="6" class="py-3 pr-4">
<component :is="'SelectBox'" :propsValue="selectValue03"
:itemList="selectValueList03" :label="'효율지표종류'" :required="true"
:textCols="12" :labelCols="12"
@update:propsValue="selectValue03 = $event" />
</v-col>
<v-col :cols="6" class="py-2">
<component
:is="'SelectBox'"
:propsValue="selectValue04"
:itemList="selectValueList04"
:label="'단위'"
:textCols="7"
:required="true"
@update:propsValue="selectValue04 = $event"
/>
<v-col :cols="6" class="py-3 pl-4">
<component :is="'SelectBox'" :propsValue="selectValue04"
:itemList="selectValueList04" :label="'단위'" :textCols="12" :labelCols="12"
:required="true" @update:propsValue="selectValue04 = $event" />
</v-col>
<v-col :cols="6" class="py-2">
<CheckBox
:parentPrgmId="myPrgmId"
label="사용여부"
valueNm="useFg"
:required="true"
/>
<v-col :cols="6" class="py-3 pr-4">
<CheckBox :parentPrgmId="myPrgmId" label="사용여부" valueNm="useFg"
:required="true" />
</v-col>
<v-col :cols="6" class="py-2">
<InputText
ref="sortSeq"
:parentPrgmId="myPrgmId"
label="정렬순번"
valueNm="sortSeq"
:required="true"
/>
<v-col :cols="6" class="py-3 pl-4">
<InputText ref="sortSeq" :parentPrgmId="myPrgmId" label="정렬순번" valueNm="sortSeq"
:required="true" />
</v-col>
<v-col v-if="!checkCalc" :cols="6" class="py-2">
<component
ref="EqpmCalcPop"
:is="'EqpmCalcPop'"
:parentPrgmId="myPrgmId"
:item="calcItem"
:labelContent="'계산코드'"
:openMode="'E'"
:modalTitle="'계산코드'"
/>
<v-col v-if="!checkCalc" :cols="6" class="py-3 pr-4">
<component ref="EqpmCalcPop" :is="'EqpmCalcPop'" :parentPrgmId="myPrgmId"
:item="calcItem" :labelContent="'계산코드'" :openMode="'E'" :modalTitle="'계산코드'"
:textCols="12" :labelCols="12" />
</v-col>
<v-col v-if="!checkCalc" :cols="12" class="py-2">
<component
:is="'TextArea'"
ref="calcDesc"
:parentPrgmId="myPrgmId"
:item="calcDescItem"
/>
<v-col :cols="6" class="py-3">
</v-col>
<v-col v-if="!checkCalc" :cols="2" class="py-2">
<v-col v-if="!checkCalc" :cols="6" class="py-3 pr-4">
<component :is="'TextArea'" ref="calcDesc" :parentPrgmId="myPrgmId"
:item="calcDescItem" :textCols="12" :labelCols="12" />
</v-col>
<v-col :cols="6" class="py-3">
</v-col>
<v-col v-if="!checkCalc" :cols="12" class="py-3">
<label for="" class="search-box-label">
<v-icon x-small :color="'#fb8200'" class="mr-1"
>mdi-record-circle</v-icon
>
<v-icon small :class="['mr-1', 'icon-orange']">$icoBulletPoint</v-icon>
계산 Agument
</label>
</v-col>
<v-col v-if="!checkCalc" :cols="6" class="py-2">
<v-col v-if="!checkCalc" :cols="6" class="py-3 pr-4">
<div>
<component
:is="'SelectBox'"
:propsValue="selectValue05"
:itemList="selectValueList05"
:label="'효율지표ID1'"
:iconShow="false"
:disabled="checkCalc"
@update:propsValue="selectValue05 = $event"
/>
</div>
<div>
<component
:is="'SelectBox'"
ref="effcIdxId2"
:propsValue="selectValue06"
:itemList="selectValueList06"
:label="'효율지표ID2'"
:iconShow="false"
:disabled="effcIdxId2Disabled"
@update:propsValue="selectValue06 = $event"
/>
</div>
<div>
<component
:is="'SelectBox'"
ref="effcIdxId3"
:propsValue="selectValue07"
:itemList="selectValueList07"
:label="'효율지표ID3'"
:iconShow="false"
:disabled="effcIdxId3Disabled"
@update:propsValue="selectValue07 = $event"
/>
<component :is="'SelectBox'" :propsValue="selectValue05"
:itemList="selectValueList05" :label="'효율지표ID1'" :iconShow="false"
:disabled="checkCalc" @update:propsValue="selectValue05 = $event"
:textCols="12" :labelCols="12" />
</div>
</v-col>
<v-col v-if="!checkCalc" :cols="6" class="py-3 pl-4">
<div>
<component :is="'SelectBox'" ref="effcIdxId2" :propsValue="selectValue06"
:itemList="selectValueList06" :label="'효율지표ID2'" :iconShow="false"
:disabled="effcIdxId2Disabled"
@update:propsValue="selectValue06 = $event" :textCols="12"
:labelCols="12" />
</div>
</v-col>
<v-col v-if="!checkCalc" :cols="6" class="py-3 pr-4">
<div>
<component :is="'SelectBox'" ref="effcIdxId3" :propsValue="selectValue07"
:itemList="selectValueList07" :label="'효율지표ID3'" :iconShow="false"
:disabled="effcIdxId3Disabled"
@update:propsValue="selectValue07 = $event" :textCols="12"
:labelCols="12" />
</div>
</v-col>
</v-row>
<EffcIdxAddInfoTab
v-if="item.id == 'EffcIdxAddInfoTab'"
:parentPrgmId="myPrgmId"
:innerTabGridInfo="{ tab, idx }"
/>
<EffcIdxAddInfoTab v-if="item.id == 'EffcIdxAddInfoTab'" :parentPrgmId="myPrgmId"
:innerTabGridInfo="{ tab, idx }" />
</v-tab-item>
</v-tabs-items>
</div>
@ -235,7 +150,7 @@
<script>
import { mapState, mapMutations, mapActions } from 'vuex';
import mixinGlobal from '@/mixin/global.js';
import { resize } from '@/mixin/resize.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';
@ -246,7 +161,7 @@ import EffcIdxAddInfoTab from '@/components/pages/ems/EffcIdxInfo/EffcIdxAddInfo
import Grid from '~/components/common/Grid';
import Utility from '~/plugins/utility';
import SelectBox from '@/components/common/select/SelectBox';
import CheckBox from '~/components/common/CheckBox';
import CheckBox from '~/components/common/checkbox/CheckBox';
import EqpmCalcPop from '~/components/common/modal/EqpmCalcPop';
import TextArea from '@/components/common/form/TextArea';
@ -254,7 +169,7 @@ let myTitle;
// const myPrgmId = "PRG0012";
let myPrgmId;
export default {
mixins: [mixinGlobal,resize],
mixins: [mixinGlobal, resize],
async asyncData(context) {
const myState = context.store.state;
// context.store.commit("setActiveMenuInfo", myState.menuData[myPrgmId]);
@ -297,7 +212,66 @@ export default {
disabledFlag: false,
},
],
loadGrid: false,
loadGrid: true,
dataPathExample: {
"effcIdxGrid": {
data: [
{
"effcIdxId": "E001",
"effcIdxNm": "에너지 소비 효율",
"effcKind": "환경"
},
{
"effcIdxId": "E002",
"effcIdxNm": "작업 시간 대비 생산량",
"effcKind": "생산성"
},
{
"effcIdxId": "E003",
"effcIdxNm": "장비 가동률",
"effcKind": "운영"
},
{
"effcIdxId": "E004",
"effcIdxNm": "불량률",
"effcKind": "품질"
},
{
"effcIdxId": "E005",
"effcIdxNm": "재고 회전율",
"effcKind": "물류"
}
]
,
column: [
{
header: '효율지표 ID',
name: 'effcIdxId',
align: 'center',
// hidden:true
},
{
header: '효율지표명',
name: 'effcIdxNm',
align: 'left',
minWidth: 150,
// hidden:true
},
{
header: '효율지표종류',
name: 'effcKind',
align: 'left',
// hidden: true,
},
// { header: '등록 사용자', name: 'regUserNo', hidden: true },
// { header: '등록 일자', name: 'regDttm', hidden: true },
// { header: '수정 사용자', name: 'procUserNo', hidden: true },
// { header: '수정 일자', name: 'procDttm', hidden: true },
],
}
},
initFlag: false,
selectValueList01: [],
selectValueList02: [],
@ -327,10 +301,11 @@ export default {
required: true,
label: '계산설명',
cols: 12,
textCols: 12,
},
effcIdxId2Disabled: true,
effcIdxId3Disabled: true,
checkCalc: true,
checkCalc: false,
thisArgCnt: '',
isInfoTabDisabled: false,
effcKindInitData: null,
@ -711,7 +686,7 @@ export default {
//
},
mounted() {},
mounted() { },
beforeDestroy() {
this.chkOpenTabList({ key: 'destroy', prgmId: myPrgmId });
},
@ -1088,10 +1063,10 @@ export default {
value: newRes,
});
this.loadGrid = true;
this.loadGrid = true;
this.$nextTick(() => {
let rowGridData = {};
if(this.pageData.rowGridSelectData != null){
if (this.pageData.rowGridSelectData != null) {
// grid Row에서 pk값으로 설정 -> effcIdxId
let lastGridRowPk = this.pageData.rowGridSelectData.effcIdxId;
let gridData = this.$refs[this.gridName].getData();
@ -1105,14 +1080,14 @@ export default {
//rowKey: 0,
rowKey:
this.pageData.rowGridSelectKey == '' ||
this.pageData.rowGridSelectKey == null
this.pageData.rowGridSelectKey == null
? 0
// : this.pageData.rowGridSelectKey ==
// this.$refs[this.gridName].getData().length - 1
// ? this.pageData.rowGridSelectKey
: rowGridData != undefined
? rowGridData.rowKey
: 0,
? rowGridData.rowKey
: 0,
setScroll: true,
});
} catch (error) {
@ -1266,36 +1241,36 @@ export default {
item.calcProc,
'계산코드를 선택해주세요',
item.effcKind == 'CALC' &&
(item.calcProc == '' || item.calcProc == null),
(item.calcProc == '' || item.calcProc == null),
) ||
validationCheck(
item.calcDesc,
'계산설명을 입력해주세요',
item.effcKind == 'CALC' &&
(item.calcDesc == '' || item.calcDesc == null),
(item.calcDesc == '' || item.calcDesc == null),
) ||
validationCheck(
item.effcIdxId1,
'효율지표ID1을 선택해주세요',
item.effcKind == 'CALC' &&
(item.effcIdxId1 == '' || item.effcIdxId1 == null),
(item.effcIdxId1 == '' || item.effcIdxId1 == null),
) ||
validationCheck(
item.effcIdxId2,
'효율지표ID2를 입력해주세요',
item.effcKind == 'CALC' &&
item.argCnt > 1 &&
item.effcIdxId1 != null &&
item.effcIdxId1 != null &&
(item.effcIdxId2 == '' || item.effcIdxId2 == null),
item.argCnt > 1 &&
item.effcIdxId1 != null &&
item.effcIdxId1 != null &&
(item.effcIdxId2 == '' || item.effcIdxId2 == null),
) ||
validationCheck(
item.effcIdxId3,
'효율지표ID3을 입력해주세요',
item.effcKind == 'CALC' &&
item.argCnt > 2 &&
item.effcIdxId2 != null &&
(item.effcIdxId3 == '' || item.effcIdxId3 == null),
item.argCnt > 2 &&
item.effcIdxId2 != null &&
(item.effcIdxId3 == '' || item.effcIdxId3 == null),
)
// item.effcKind == 'CALC' ? (item.calcProc == '' || item.calcProc == null) ? true : false : false
// item.effcKind == 'CALC' ? (item.calcDesc == '' || item.calcDesc == null ? true : false) : false ||
@ -1462,6 +1437,8 @@ const defaultData = {
},
};
</script>
<style lang="scss">
@import '@/assets/scss/common.scss';
</style>
<style lang="scss" scoped>
.v-input__custom.surface-name fieldset {
width: 345px;
}
</style>

View File

@ -677,6 +677,3 @@ const defaultData = {
// };
// };
</script>
<style lang="scss">
@import '@/assets/scss/common.scss';
</style>

View File

@ -3,8 +3,8 @@
<v-row ref="searchFilter">
<v-col :cols="12">
<v-card class="searchFilter">
<v-row align="center" no-gutters>
<v-col :cols="3">
<v-row align="end" no-gutters>
<v-col :cols="2.5">
<component
:is="'selectCodeList'"
:parentPrgmId="myPrgmId"
@ -12,9 +12,11 @@
dataKey="searchLocKind"
:sendParam="{ commGrpCd: 'EM_LOC_KIND', useFg: '1' }"
:addAll="true"
:iconShow="true"
customClass="select-large"
/>
</v-col>
<v-col :cols="3">
<v-col :cols="2.5">
<component
:is="'selectCodeList'"
:parentPrgmId="myPrgmId"
@ -22,10 +24,12 @@
dataKey="searchEccKind"
:sendParam="{ commGrpCd: 'EM_ECC_KIND', useFg: '1' }"
:addAll="true"
:iconShow="true"
customClass="select-large"
/>
</v-col>
<v-col :cols="3">
<!-- 사업장 -->
<!-- <v-col :cols="3">
사업장
<div style="visibility:hidden">
<component
:is="'SelectBlocMstr'"
@ -33,13 +37,8 @@
:parentPrgmId="myPrgmId"
/>
</div>
</v-col>
<v-col :cols="3" class="text-right">
<BtnSearch @click="search" />
</v-col>
</v-row>
<v-row align="center" no-gutters>
<v-col :cols="3">
</v-col> -->
<v-col :cols="2.5">
<component
:is="'selectCodeList'"
:parentPrgmId="myPrgmId"
@ -47,18 +46,23 @@
dataKey="useFg"
:sendParam="{ commGrpCd: 'CO_USEFG', useFg: '1' }"
:addAll="true"
:iconShow="true"
customClass="select-large"
/>
</v-col>
<v-col :cols="6">
<v-col :cols="2.5">
<InputText
:parentPrgmId="myPrgmId"
label="공정명"
valueNm="eccNm"
:labelCols="2"
:textCols="9"
:labelCols="12"
:textCols="12"
:searchOption="true"
:iconShow="true"
customClass="input-large"
/>
</v-col>
<BtnSearch @click="search" size="large" />
</v-row>
</v-card>
</v-col>
@ -75,16 +79,17 @@
:btnActionsFnc="btnActions"
/>
</div>
<div class="px-5" style="height:calc(100% - 76px)">
<div ref="gridParent" class="w100 h100">
<div class="px-5" style="min-height:calc(100% - 76px)">
<div ref="gridParent" class="w100 h100 pb-2">
<component
:ref="gridName"
:is="loadGrid ? 'Grid' : null"
:is="loadGrid ? 'Grid' : null"
:gridName="gridName"
:parentPrgmId="myPrgmId"
@getRowsData="getRowData"
@sendSelectedRowStatInfo="getSelectedRowStatInfo"
:selectedRowDataWatchFlag="true"
:dataPath="dataPathMock"
/>
</div>
</div>
@ -191,13 +196,15 @@ export default {
gridName: 'rowGrid',
loadGrid: false,
tab: null,
selectedRowKey: null,
// rowSelectionStatus: {},
dataPathMock : { },
items: [
{ name: '공정 정보', id: 'eccBaseInfoTab', disabledFlag: false },
{ name: '공정 추가 정보', id: 'eccAddInfoTab', disabledFlag: false },
{ name: '공정 연결 정보', id: 'eccIaoTab', disabledFlag: false },
],
detailList: myDetail,
loadGrid: false,
};
},
computed: {
@ -313,11 +320,23 @@ export default {
},
mounted() {
this.init();
this.$nextTick(() => {
// const checkbox = document.getElementById('headerCheckbox');
// if (checkbox) {
// checkbox.addEventListener('change', this.handleHeaderCheckboxChange);
// }
});
},
beforeDestroy() {
this.chkOpenTabList({ key: 'destroy', prgmId: myPrgmId });
},
methods: {
handleHeaderCheckboxChange(event) {
const checked = event.target.checked;
this.dataPathMock.rowGrid.data.forEach(row => {
row.selected = checked;
});},
...mapMutations({
setPageData: 'setPageData',
}),
@ -332,7 +351,41 @@ export default {
blocId: this.userInfo.blocId,
});
},
gridInitTest() {
const rowGrid = {
column: [
{
header: '',
name: '',
align: 'center',
width: 50,
formatter: (props) => {
return `<label class="custom-radio">
<span class="radio-mark"></span>
</label>`;
}
},
{ header: '공정 정보', name: 'eccNm', align: 'left' },
{ header: '현재 상태', name: 'status', align: 'center' },
{ header: '공정 유형', name: 'eccKind', align: 'left' },
{ header: '사용 여부', name: 'useFg', align: 'center' },
],
data: dataMockExample,
defaultRow: dataMockExample,
option: {
...gridOptions,
},
}
this.dataPathMock = {rowGrid};
this.$nextTick(() => {
this.loadGrid = true;
});
},
gridInit() {
// Test
this.gridInitTest(); return;
// End test
const gridHeight = this.$refs.gridParent.offsetHeight - 30;
const gridWidth = this.$refs.gridParent.offsetWidth;
@ -545,6 +598,16 @@ export default {
});
},
async getRowData(data) {
//Progess and fake radio
// const rowKey = data.rowKey;
// this.selectedRowKey = rowKey;
// Object.keys(this.rowSelectionStatus).forEach(key => {
// this.$set(this.rowSelectionStatus, key, false);
// });
// this.$set(this.rowSelectionStatus, rowKey, true);
this.setEccAddInfo(data);
this.setEccIao(data);
this.setGridSelectData({
@ -560,6 +623,9 @@ export default {
rowGridSelectKey: data.rowKey,
rowGridSelectData: Object.assign({}, data),
});
//fake radio need recheck
// this.$refs[this.gridName]?.repaint?.();
},
async setEccAddInfo(data) {
this.setPageData({
@ -862,9 +928,12 @@ const myDetail = [
valueNm: 'eccId',
readonly: true,
cols: 6,
class: 'py-2',
labelCols: 12,
textCols: 12,
class: 'py-2 pr-4',
required: false,
placeholder: '시스템 자동입력',
iconShow: true
},
{
type: 'InputText',
@ -872,34 +941,23 @@ const myDetail = [
valueNm: 'eccNm',
disabled: false,
cols: 6,
class: 'py-2',
labelCols: 12,
textCols: 12,
class: 'py-2 pl-4',
required: true,
iconShow: true
},
//CustomeInput fakedata and not using in real code
// {
// type: "ReadPlcPop",
// label: "상위 검침개소",
// valueNm: "upEccId",
// disabled: false,
// cols: 6,
// class: "py-2",
// required: true
// },
// {
// type: "InputText",
// valueNm: "upEccNm",
// label: "상위 검침개소명",
// readonly: true,
// cols: 6,
// class: "py-2"
// },
// {
// type: "InputText",
// label: "상위 공정 코드",
// valueNm: "upEccId",
// disabled: false,
// cols: 6,
// class: "py-2",
// required: true
// type: 'CustomInput',
// labelContent: '상위 공정',
// cols: 6,
// valueNm: 'eccNm',
// labelCols: 12,
// textCols: 12,
// class: 'py-2',
// required: true,
// iconShow: true
// },
{
type: 'FtnPlcFormPop',
@ -909,29 +967,42 @@ const myDetail = [
disabled: false,
required: true,
cols: 6,
class: 'py-2',
labelCols: 4,
textCols: 7,
labelCols: 12,
textCols: 12,
class: 'pb-0 mb-0 pr-4',
disableContent: true,
},
{
type: 'InputText',
valueNm: 'upEccNm',
readonly: true,
cols: 5,
class: 'py-2',
},
{
type: 'SelectBox',
label: '위치 유형',
valueNm: 'locKind',
disabled: false,
cols: 6,
class: 'py-2',
labelCols: 12,
textCols: 12,
class: 'py-2 mb-0 pb-0 pl-4',
list: 'locKindList',
itemText: 'commCdNm',
itemValue: 'commCd',
required: true,
iconShow: true,
},
{
type: 'InputText',
valueNm: 'upEccNm',
readonly: true,
cols: 6,
class: 'py-2 pr-4',
},
{
// 공백 처리
type: 'Label',
cols: 6,
class: 'py-2 pl-4',
disabled: false,
labelCols: 12,
textCols: 12,
iconShow: true,
},
{
type: 'SelectBox',
@ -939,11 +1010,14 @@ const myDetail = [
valueNm: 'eccKind',
disabled: false,
cols: 6,
class: 'py-2',
labelCols: 12,
textCols: 12,
class: 'py-2 pr-4',
list: 'eccKindList',
itemText: 'commCdNm',
itemValue: 'commCd',
addNull: true,
iconShow: true
},
{
type: 'InputText',
@ -951,8 +1025,11 @@ const myDetail = [
valueNm: 'sortSeq',
disabled: false,
cols: 6,
class: 'py-2',
labelCols: 12,
textCols: 12,
class: 'py-2 pl-4',
inputType: 'number',
iconShow: true
// onkeydown : "if(this.value > 100) this.value = 100;if(this.value < 0) this.value = 0;if(this.value == '') this.value = 0;"
},
{
@ -961,10 +1038,13 @@ const myDetail = [
valueNm: 'blocId',
disabled: false,
cols: 6,
class: 'py-2',
labelCols: 12,
textCols: 12,
class: 'py-2 pr-4',
list: 'blocIdList',
itemText: 'blocNm',
itemValue: 'blocId',
iconShow: true
},
{
type: 'CheckBox',
@ -972,8 +1052,11 @@ const myDetail = [
valueNm: 'useFg',
disabled: false,
cols: 6,
class: 'py-2',
labelCols: 12,
textCols: 12,
class: 'py-2 pl-4',
value: { '1': true, '0': false },
iconShow: true,
required: true,
},
{
@ -982,11 +1065,147 @@ const myDetail = [
valueNm: 'eccFg',
disabled: false,
cols: 6,
class: 'py-2',
class: 'py-2 pr-4',
iconShow: true,
value: { '1': true, '0': false },
},
];
const dataMockExample = [
{
eccId: 'ECC000001',
eccNm: 'EGP_HVAC_LT_CH001',
status: '운영중',
eccKind: '공정',
useFg: '1',
_children: [
{
eccId: 'ECC000002',
eccNm: 'B01',
status: '대기',
eccKind: '공정',
useFg: '1',
_children: [
{
eccId: 'ECC000005',
eccNm: 'B01-1',
status: '운영중',
eccKind: '공정',
useFg: '1',
_children: [
{
eccId: 'ECC000009',
eccNm: 'B01-1-1',
status: '운영중',
eccKind: '공정',
useFg: '1'
},
{
eccId: 'ECC0000010',
eccNm: 'B01-1-2',
status: '운영중',
eccKind: '공정',
useFg: '1'
},
{
eccId: 'ECC0000011',
eccNm: 'B01-1-3',
status: '운영중',
eccKind: '공정',
useFg: '1'
},
]
},
{
eccId: 'ECC000006',
eccNm: 'B01-2',
status: '점검중',
eccKind: '공정',
useFg: '0',
_children: [
{
eccId: 'ECC0000013',
eccNm: 'B01-2-1',
status: '운영중',
eccKind: '공정',
useFg: '1'
},
{
eccId: 'ECC0000014',
eccNm: 'B01-1-2',
status: '운영중',
eccKind: '공정',
useFg: '1'
},
{
eccId: 'ECC0000015',
eccNm: 'B01-1-3',
status: '운영중',
eccKind: '공정',
useFg: '1'
},
]
},
{
eccId: 'ECC000007',
eccNm: 'B01-3',
status: '운영중',
eccKind: '공정',
useFg: '1',
_children: [
{
eccId: 'ECC000009',
eccNm: 'B01-3-1',
status: '운영중',
eccKind: '공정',
useFg: '1'
},
{
eccId: 'ECC0000010',
eccNm: 'B01-3-2',
status: '운영중',
eccKind: '공정',
useFg: '1'
},
{
eccId: 'ECC0000011',
eccNm: 'B01-3-3',
status: '운영중',
eccKind: '공정',
useFg: '1'
},
]
},
],
},
{
eccId: 'ECC000003',
eccNm: 'B02',
status: '운영중',
eccKind: '공정',
useFg: '1',
},
{
eccId: 'ECC000004',
eccNm: 'B03',
status: '점검중',
eccKind: '공정',
useFg: '0',
},
],
},
];
const gridOptions = {
treeColumnOptions: {
name: 'eccNm', // Showing tree table
useIcon: false, // Not using icon
indentWidth: 10,// spacing when showing children
},
header: {
height: 40,
},
rowHeight: 35,
showCheckbox: false,
};
</script>
<style lang="scss">
@import '@/assets/scss/common.scss';
</style>

View File

@ -876,6 +876,3 @@ const defaultData = {
],
};
</script>
<style lang="scss">
@import '@/assets/scss/common.scss';
</style>

View File

@ -3,139 +3,74 @@
<v-row ref="searchFilter">
<v-col :cols="12">
<v-card class="searchFilter">
<v-row align="center" no-gutters>
<v-col :cols="3">
<v-row align="end" no-gutters>
<v-col :cols="2.5">
<!-- 사업장 -->
<component
:is="'SelectBlocMstr'"
ref="SelectBlocMstr"
:parentPrgmId="myPrgmId"
/>
<component :is="'SelectBlocMstr'" ref="SelectBlocMstr" :parentPrgmId="myPrgmId"
:labelCols="12" :textCols="12" :iconShow="true" :customClass="'select-large'" />
</v-col>
<!-- <v-col :cols="3">
<component
:is="'selectCodeList'"
:parentPrgmId="myPrgmId"
:label="'개소 종류'"
dataKey="searchPlcKind"
:sendParam="{ commGrpCd: 'CM_CHKKIND', useFg: '1'}"
:addAll="true"
/>
</v-col> -->
<v-col :cols="3">
<component
:is="'SelectReadObj'"
:parentPrgmId="myPrgmId"
:label="'검침대상'"
dataKey="searchReadObj"
:sendParam="{ useFg: '1' }"
/>
<v-col :cols="2.5">
<component :is="'SelectReadObj'" :parentPrgmId="myPrgmId" :label="'검침대상'"
dataKey="searchReadObj" :sendParam="{ useFg: '1' }" :labelCols="12" :textCols="12"
:iconShow="true" :customClass="'select-large'" />
</v-col>
<v-col :cols="6" class="text-right">
<BtnSearch @click="search" />
<v-col :cols="2.5">
<component :is="'selectCodeList'" :parentPrgmId="myPrgmId" :label="'사용여부'" dataKey="useFg"
:sendParam="{ commGrpCd: 'CO_USEFG', useFg: '1' }" :addAll="true" :labelCols="12"
:textCols="12" :customClass="'select-large'" :iconShow="true" />
</v-col>
</v-row>
<v-row align="center" no-gutters>
<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="6">
<InputText
:parentPrgmId="myPrgmId"
label="검침개소명"
valueNm="readPlcNm"
:labelCols="2"
:textCols="6"
:searchOption="true"
/>
<v-col :cols="2.5">
<InputText :parentPrgmId="myPrgmId" label="검침개소명" valueNm="readPlcNm" :labelCols="12"
:textCols="12" :searchOption="true" :customClass="'input-large'" :iconShow="true" />
</v-col>
<BtnSearch @click="search" size="large" />
</v-row>
</v-card>
</v-col>
</v-row>
<v-row ref="contents">
<v-row ref="contents" class="mt-4">
<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"
>검침개소 정보</v-card-title
>
<Buttons
:parentPrgmId="myPrgmId"
:bindingData="gridName"
:detailList="detailList"
:btnActionsFnc="btnActions"
/>
<div class="d-flex align-center justify-space-between pa-4 pb-6">
<v-card-title class="pa-0 custom-title-4">검침개소 정보</v-card-title>
<Buttons :parentPrgmId="myPrgmId" :bindingData="gridName" :detailList="detailList"
:btnActionsFnc="btnActions" />
</div>
<div class="px-5" style="height:calc(100% - 76px)">
<div class="px-4">
<div ref="gridParent" class="w100 h100">
<component
:ref="gridName"
:is="loadGrid ? 'Grid' : null"
:gridName="gridName"
:parentPrgmId="myPrgmId"
@getRowsData="getRowData"
@sendSelectedRowStatInfo="getSelectedRowStatInfo"
:selectedRowDataWatchFlag="true"
/>
<component :ref="gridName" :is="loadGrid ? 'Grid' : null" :gridName="gridName"
:parentPrgmId="myPrgmId" @getRowsData="getRowData"
@sendSelectedRowStatInfo="getSelectedRowStatInfo" :selectedRowDataWatchFlag="true"
:dataPath="dataPathExample" />
</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;"
>검침개소 상세
<v-card-title class="custom-title-4 pb-1 pa-4">검침개소 상세
</v-card-title>
<div class="px-5" style="height:calc(100% - 76px)">
<div class="px-4">
<v-tabs v-model="tab">
<v-tab
v-for="item in items"
:key="item.id"
:disabled="
(item.id == 'readPlcImgInfoTab' ? isImgTabDisabled : false) ||
item.disabledFlag
"
>
<v-tab v-for="item in items" :key="item.id" :disabled="(item.id == 'readPlcImgInfoTab' ? isImgTabDisabled : false) ||
item.disabledFlag
">
{{ item.name }}
</v-tab>
</v-tabs>
<v-tabs-items
v-model="tab"
style="height: calc(100% - 65px);"
class="py-6"
>
<v-tabs-items v-model="tab" style="height: calc(100% - 65px);" class="pt-6 py-2">
<v-tab-item v-for="(item, idx) in items" :key="item.id">
<component
v-if="item.id == 'readPlcBaseInfoTab'"
:is="'Form'"
:parentPrgmId="myPrgmId"
:detailList="detailList"
:bindingData="gridName"
@gridEditingFinish="gridEditingFinish"
/>
<ReadPlcAddInfoTab
v-if="item.id == 'readPlcAddInfoTab'"
:parentPrgmId="myPrgmId"
:innerTabGridInfo="{ tab, idx }"
/>
<ReadPlcImgInfoTab
v-if="item.id == 'readPlcImgInfoTab'"
:parentPrgmId="myPrgmId"
:innerTabGridInfo="{ tab, idx }"
/>
<ReadPlcTagRelTab
v-if="item.id == 'readPlcTagRelTab'"
:parentPrgmId="myPrgmId"
:innerTabGridInfo="{ tab, idx }"
/>
<component v-if="item.id == 'readPlcBaseInfoTab'" :is="'Form'" :parentPrgmId="myPrgmId"
:detailList="detailList" :bindingData="gridName"
@gridEditingFinish="gridEditingFinish" />
<ReadPlcAddInfoTab v-if="item.id == 'readPlcAddInfoTab'" :parentPrgmId="myPrgmId"
:innerTabGridInfo="{ tab, idx }" />
<ReadPlcImgInfoTab v-if="item.id == 'readPlcImgInfoTab'" :parentPrgmId="myPrgmId"
:innerTabGridInfo="{ tab, idx }" />
<ReadPlcTagRelTab v-if="item.id == 'readPlcTagRelTab'" :parentPrgmId="myPrgmId"
:innerTabGridInfo="{ tab, idx }" />
</v-tab-item>
</v-tabs-items>
</div>
@ -199,7 +134,7 @@ export default {
return {
myPrgmId: myPrgmId,
gridName: 'rowGrid',
loadGrid: false,
loadGrid: true,
tab: null,
isImgTabDisabled: false,
items: [
@ -222,6 +157,47 @@ export default {
],
detailList: myDetail,
defaultUseFg: 1,
dataPathExample: {
"rowGrid": {
data: sampleData,
column: [
{
header: '',
name: '',
align: 'center',
width: 50,
formatter: (props) => {
return `<label class="custom-radio">
<span class="radio-mark"></span>
</label>`;
}
},
{
header: '검침개소명',
name: 'readPlcNm',
align: 'left',
minWidth: 400,
},
{
header: '개소 종류',
name: 'plcKind',
minWidth: 100,
align: 'center',
},
{
header: '사용 여부',
name: 'useFg',
minWidth: 100,
align: 'center',
},
],
option: myOptions,
}
}
// loadTree: false
};
},
@ -336,18 +312,18 @@ export default {
},
async initData() {
let ercList = [];
const res = await this.postApiReturn({
apiKey: 'selectErcInfo',
resKey: 'ercInfoData',
sendParam: {
blocId: this.userInfo.blocId,
},
});
res.forEach(item => {
const it = { text: item.ercNm, value: item.ercId };
ercList.push(it);
});
this.setPageData({ ercNmList: ercList });
// const res = await this.postApiReturn({
// apiKey: 'selectErcInfo',
// resKey: 'ercInfoData',
// sendParam: {
// blocId: this.userInfo.blocId,
// },
// });
// res.forEach(item => {
// const it = { text: item.ercNm, value: item.ercId };
// ercList.push(it);
// });
// this.setPageData({ ercNmList: ercList });
},
gridInit() {
const gridHeight = this.$refs.gridParent.offsetHeight - 30;
@ -358,7 +334,9 @@ export default {
resizable: true,
},
treeColumnOptions: {
name: 'readPlcNm',
name: 'eccNm',       // Showing tree table
useIcon: false,      // Not using icon
indentWidth: 10,
},
};
this.setGridOption({
@ -530,12 +508,12 @@ export default {
this.$refs[this.gridName].focus({
rowKey:
this.pageData.rowGridSelectKey == '' ||
this.pageData.rowGridSelectKey == null
this.pageData.rowGridSelectKey == null
? 0
: this.pageData.rowGridSelectKey ==
this.$refs[this.gridName].getData().length - 1
? this.pageData.rowGridSelectKey
: 0,
this.$refs[this.gridName].getData().length - 1
? this.pageData.rowGridSelectKey
: 0,
columnName: 'readPlcNm',
setScroll: true,
});
@ -976,6 +954,63 @@ const defaultData = {
},
};
const sampleData = [
{
readPlcNm: '서울 본사',
plcKind: '본사',
useFg: '사용',
_children: [
{
readPlcNm: '서울 본사 - 1층',
plcKind: '층',
useFg: '사용',
},
{
readPlcNm: '서울 본사 - 2층',
plcKind: '층',
useFg: '미사용',
},
],
},
{
readPlcNm: '부산 지사',
plcKind: '지사',
useFg: '사용',
_children: [
{
readPlcNm: '부산 지사 - A동',
plcKind: '건물',
useFg: '사용',
_children: [
{
readPlcNm: '부산 지사 - A동 1층',
plcKind: '층',
useFg: '사용',
},
],
},
],
},
{
readPlcNm: '대전 창고',
plcKind: '창고',
useFg: '미사용',
},
];
const myOptions = {
columnOptions: {
resizable: true,
},
treeColumnOptions: {
name: 'readPlcNm',       // Showing tree table
useIcon: false,      // Not using icon
indentWidth: 10,
},
}
const myDetail = [
{
type: 'InputText',
@ -983,34 +1018,36 @@ const myDetail = [
valueNm: 'readPlcId',
readonly: true,
cols: 6,
class: 'py-2',
labelCols: 12,
textCols: 12,
class: 'py-3 pr-4',
required: false,
placeholder: '시스템 자동입력',
iconShow: true,
},
{
type: 'InputText',
label: '검침개소명',
valueNm: 'readPlcNm',
disabled: false,
labelCols: 12,
textCols: 12,
cols: 6,
class: 'py-2',
class: 'py-3 pl-4',
required: true,
iconShow: true,
},
{
type: 'ReadPlcPop',
label: '상위 검침개소',
valueNm: 'upReadPlcId',
disabled: false,
labelCols: 12,
textCols: 12,
cols: 6,
class: 'py-2',
class: 'py-3 pr-4 pb-2',
required: true,
},
{
type: 'InputText',
valueNm: 'upReadPlcNm',
readonly: true,
cols: 5,
class: 'py-2',
iconShow: true,
},
{
type: 'SelectBox',
@ -1018,23 +1055,42 @@ const myDetail = [
valueNm: 'plcKind',
disabled: false,
cols: 6,
class: 'py-2',
labelCols: 12,
textCols: 12,
class: 'py-3 pl-4',
list: 'plcKindList',
itemText: 'commCdNm',
itemValue: 'commCd',
required: true,
iconShow: true,
},
{
type: 'InputText',
valueNm: 'plcKind',
valueNm: 'upReadPlcNm',
readonly: true,
cols: 6,
textCols: 12,
class: 'pt-1 py-3 pr-4',
},
{
showValue: false,
},
{
type: 'SelectBox',
label: '검침대상',
valueNm: 'readObjId',
disabled: false,
cols: 6,
class: 'py-2',
labelCols: 12,
textCols: 12,
class: 'py-3 pr-4',
list: 'readObjList',
itemText: 'readObjNm',
itemValue: 'readObjId',
required: true,
iconShow: true,
},
{
type: 'CheckBox',
@ -1042,9 +1098,12 @@ const myDetail = [
valueNm: 'useFg',
disabled: false,
cols: 6,
class: 'py-2',
labelCols: 12,
textCols: 12,
class: 'py-3 pl-4',
value: { '1': true, '0': false },
required: true,
iconShow: true,
},
// {
// type: "SelectBox",
@ -1059,6 +1118,3 @@ const myDetail = [
// },
];
</script>
<style lang="scss">
@import '@/assets/scss/common.scss';
</style>

View File

@ -9,6 +9,8 @@
<component
:is="'SelectBlocMstr'"
ref="SelectBlocMstr"
:textCols="12"
:labelCols="12"
:parentPrgmId="myPrgmId"
/>
</v-col>
@ -30,6 +32,8 @@
dataKey="searchReadObj"
:sendParam="{ useFg: '1' }"
:addAll="true"
:textCols="12"
:labelCols="12"
/>
</v-col>
<v-col :cols="3" class="text-right">
@ -62,8 +66,8 @@
:parentPrgmId="myPrgmId"
label="에너지원명"
valueNm="ercNm"
:textCols="7"
:labelCols="4"
:textCols="12"
:labelCols="12"
:searchOption="true"
/>
</v-col>
@ -475,24 +479,74 @@ export default {
this.loadGrid = true;
},
async getRowGridData() {
let res = [];
let res = [
{
"comId": "COM001",
"ercId": "ERC001",
"ercNm": "LNG 가스",
"ercKind": "GAS",
"readObjId": "READ001",
"readPlcId": "PLC001",
"chrgKind": "FIXED",
"unitPrce": 120.5,
"prceFg": "1",
"peakPow": 500,
"elecContId": "EC001",
"elecContNm": "계약A",
"blocId": "BLOC001",
"useFg": true
},
{
"comId": "COM002",
"ercId": "ERC002",
"ercNm": "태양광",
"ercKind": "ELEC",
"readObjId": "READ002",
"readPlcId": "PLC002",
"chrgKind": "VARIABLE",
"unitPrce": 95.0,
"prceFg": "0",
"peakPow": 300,
"elecContId": "EC002",
"elecContNm": "계약B",
"blocId": "BLOC002",
"useFg": false
},
{
"comId": "COM003",
"ercId": "ERC003",
"ercNm": "지열",
"ercKind": "HEAT",
"readObjId": "READ003",
"readPlcId": "PLC003",
"chrgKind": "FIXED",
"unitPrce": 110.0,
"prceFg": "1",
"peakPow": 450,
"elecContId": "EC003",
"elecContNm": "계약C",
"blocId": "BLOC003",
"useFg": true
}
]
;
if (this.pageData.blocMstrList.length > 0) {
res = await this.postApiReturn({
apiKey: 'selectErcInfo',
resKey: 'ercInfoData',
sendParam: {
blocId: this.pageData.blocMstrList[this.pageData.blocId].blocId,
ercKind: this.pageData.searchErcKind,
readObjId: this.pageData.searchReadObj,
chrgKind: this.pageData.searchChrgKind,
useFg: this.pageData.useFg,
ercNmLike: this.pageData.ercNm,
},
});
} else {
this.setPageData({ isFind: false });
}
// if (this.pageData.blocMstrList.length > 0) {
// res = await this.postApiReturn({
// apiKey: 'selectErcInfo',
// resKey: 'ercInfoData',
// sendParam: {
// blocId: this.pageData.blocMstrList[this.pageData.blocId].blocId,
// ercKind: this.pageData.searchErcKind,
// readObjId: this.pageData.searchReadObj,
// chrgKind: this.pageData.searchChrgKind,
// useFg: this.pageData.useFg,
// ercNmLike: this.pageData.ercNm,
// },
// });
// } else {
// this.setPageData({ isFind: false });
// }
const newRes = res.map(item => {
const newObj = {
...item,
@ -744,8 +798,133 @@ const defaultData = {
/* data 세팅 */
// 로컬 gridName 값과 동일한 이름으로 세팅
rowGrid: {
data: [],
column: [], // myColumns,
data: [
{
"comId": "COM001",
"ercId": "ERC001",
"ercNm": "LNG 가스",
"ercKind": "GAS",
"readObjId": "READ001",
"readPlcId": "PLC001",
"chrgKind": "FIXED",
"unitPrce": 120.5,
"prceFg": "1",
"peakPow": 500,
"elecContId": "EC001",
"elecContNm": "계약A",
"blocId": "BLOC001",
"useFg": true
},
{
"comId": "COM002",
"ercId": "ERC002",
"ercNm": "태양광",
"ercKind": "ELEC",
"readObjId": "READ002",
"readPlcId": "PLC002",
"chrgKind": "VARIABLE",
"unitPrce": 95.0,
"prceFg": "0",
"peakPow": 300,
"elecContId": "EC002",
"elecContNm": "계약B",
"blocId": "BLOC002",
"useFg": false
},
{
"comId": "COM003",
"ercId": "ERC003",
"ercNm": "지열",
"ercKind": "HEAT",
"readObjId": "READ003",
"readPlcId": "PLC003",
"chrgKind": "FIXED",
"unitPrce": 110.0,
"prceFg": "1",
"peakPow": 450,
"elecContId": "EC003",
"elecContNm": "계약C",
"blocId": "BLOC003",
"useFg": true
}
],
column: [
{ header: '회사 ID', name: 'comId', hidden: true },
{ header: '에너지원ID', name: 'ercId', width: 120, align: 'center' },
{ header: '에너지원명', name: 'ercNm', align: 'left' },
{
header: '에너지원 유형',
name: 'ercKind',
align: 'center',
},
{
header: '검침대상',
name: 'readObjId',
align: 'left',
},
{
header: '검침 개소 ID',
name: 'readPlcId',
width: 80,
align: 'center',
hidden: true,
},
{
header: '고지 유형',
name: 'chrgKind',
width: 80,
align: 'center',
hidden: true,
},
{
header: '기본단가',
name: 'unitPrce',
width: 100,
align: 'right',
hidden: true,
},
{
header: '단가 사용여부',
name: 'prceFg',
width: 100,
align: 'center',
hidden: true,
},
{
header: '피크 전력',
name: 'peakPow',
width: 100,
align: 'right',
hidden: true,
},
{
header: '전력 계약',
name: 'elecContId',
width: 100,
align: 'center',
hidden: true,
},
{
header: '전력 계약',
name: 'elecContNm',
width: 100,
align: 'center',
hidden: true,
},
{
header: '사업장',
name: 'blocId',
width: 100,
align: 'center',
hidden: true,
},
{
header: '사용 여부',
name: 'useFg',
width: 95,
align: 'center',
}
], // myColumns,
option: {}, // myOptions
defaultRow: {
comId: '',
@ -816,7 +995,10 @@ const myDetail = [
valueNm: 'ercId',
readonly: true,
cols: 6,
class: 'py-2',
labelCols: 12,
textCols: 12,
iconShow: true,
class: 'py-2 pr-4',
required: false,
placeholder: '시스템 자동입력',
},
@ -826,7 +1008,10 @@ const myDetail = [
valueNm: 'ercNm',
disabled: false,
cols: 6,
class: 'py-2',
labelCols: 12,
textCols: 12,
iconShow: true,
class: 'py-2 pl-4',
required: true,
},
{
@ -835,7 +1020,10 @@ const myDetail = [
valueNm: 'ercKind',
disabled: false,
cols: 6,
class: 'py-2',
labelCols: 12,
textCols: 12,
iconShow: true,
class: 'py-2 pr-4',
list: 'ercKindList',
itemText: 'commCdNm',
itemValue: 'commCd',
@ -847,7 +1035,10 @@ const myDetail = [
valueNm: 'readObjId',
disabled: false,
cols: 6,
class: 'py-2',
labelCols: 12,
textCols: 12,
iconShow: true,
class: 'py-2 pl-4',
list: 'readObjList',
itemText: 'readObjNm',
itemValue: 'readObjId',
@ -859,7 +1050,10 @@ const myDetail = [
valueNm: 'chrgKind',
disabled: false,
cols: 6,
class: 'py-2',
labelCols: 12,
textCols: 12,
iconShow: true,
class: 'py-2 pr-4',
list: 'chrgKindList',
itemText: 'commCdNm',
itemValue: 'commCd',
@ -871,7 +1065,10 @@ const myDetail = [
valueNm: 'unitPrce',
disabled: false,
cols: 6,
class: 'py-2',
labelCols: 12,
textCols: 12,
iconShow: true,
class: 'py-2 pl-4',
},
{
type: 'InputText',
@ -879,7 +1076,11 @@ const myDetail = [
valueNm: 'peakPow',
disabled: false,
cols: 6,
class: 'py-2',
labelCols: 12,
textCols: 12,
iconShow: true,
class: 'py-2 pr-4',
},
{
type: 'SelectBox',
@ -887,7 +1088,10 @@ const myDetail = [
valueNm: 'blocId',
disabled: false,
cols: 6,
class: 'py-2',
labelCols: 12,
textCols: 12,
iconShow: true,
class: 'py-2 pl-4',
list: 'blocMstrList',
itemText: 'blocNm',
itemValue: 'blocId',
@ -899,14 +1103,12 @@ const myDetail = [
valueNm: 'elecContId',
disabled: false,
cols: 6,
class: 'py-2',
},
{
type: 'InputText',
valueNm: 'elecContNm',
readonly: true,
cols: 5,
class: 'py-2',
labelCols: 12,
textCols: 12,
iconShow: true,
// class: 'py-2',
class: 'pb-0 mb-0 pr-4',
disableContent: true,
},
{
type: 'ReadPlcPop',
@ -914,14 +1116,26 @@ const myDetail = [
valueNm: 'readPlcId',
disabled: false,
cols: 6,
class: 'py-2',
labelCols: 12,
textCols: 12,
iconShow: true,
class: 'py-2 pl-4',
},
{
type: 'InputText',
valueNm: 'elecContNm',
readonly: true,
cols: 6,
iconShow: true,
class: 'py-2 pr-4',
},
{
type: 'InputText',
valueNm: 'readPlcNm',
readonly: true,
cols: 5,
class: 'py-2',
cols: 6,
iconShow: true,
class: 'py-2 pl-4',
},
{
type: 'CheckBox',
@ -929,7 +1143,8 @@ const myDetail = [
valueNm: 'prceFg',
disabled: false,
cols: 6,
class: 'py-2',
iconShow: true,
class: 'py-2 pr-4',
value: { '1': true, '0': false },
},
{
@ -938,12 +1153,10 @@ const myDetail = [
valueNm: 'useFg',
disabled: false,
cols: 6,
class: 'py-2',
iconShow: true,
class: 'py-2 pl-4',
value: { '1': true, '0': false },
required: true,
},
];
</script>
<style lang="scss">
@import '@/assets/scss/common.scss';
</style>

View File

@ -829,6 +829,3 @@ const defaultData = {
],
};
</script>
<style lang="scss">
@import '@/assets/scss/common.scss';
</style>

View File

@ -1086,6 +1086,3 @@ const defaultData = {
},
};
</script>
<style lang="scss">
@import '@/assets/scss/common.scss';
</style>

View File

@ -814,6 +814,3 @@ function numberFormatter({ value }) {
return Utility.setFormatIntDecimal(value, 2);
}
</script>
<style lang="scss">
@import '@/assets/scss/common.scss';
</style>

View File

@ -3,272 +3,148 @@
<v-row ref="searchFilter">
<v-col :cols="12">
<v-card class="searchFilter">
<v-row align="center" no-gutters>
<v-row align="end" no-gutters>
<v-col :cols="3">
<component
:is="'SelectBox'"
ref="SelectBox1"
:propsValue="selectValue01"
:itemList="selectValueList01"
:label="'설비종류'"
@update:propsValue="selectValue01 = $event"
/>
<component :is="'SelectBox'" ref="SelectBox1" :propsValue="selectValue01"
:itemList="selectValueList01" :label="'설비종류'"
@update:propsValue="selectValue01 = $event" labelCols="12" :textCols="12"
:customClass="'select-large fixed-width'" :iconShow="true" />
</v-col>
<v-col :cols="3">
<component
:is="'SelectBox'"
ref="SelectBox2"
:propsValue="selectValue02"
:itemList="selectValueList02"
:label="'설비그룹'"
@update:propsValue="selectValue02 = $event"
/>
<component :is="'SelectBox'" ref="SelectBox2" :propsValue="selectValue02"
:itemList="selectValueList02" :label="'설비그룹'"
@update:propsValue="selectValue02 = $event" labelCols="12" :textCols="12"
:customClass="'select-large fixed-width'" :iconShow="true" />
</v-col>
<v-col :cols="3">
<component
:is="'SelectBox'"
ref="SelectBox3"
:propsValue="selectValue03"
:itemList="selectValueList03"
:label="'물리량타입'"
@update:propsValue="selectValue03 = $event"
/>
<component :is="'SelectBox'" ref="SelectBox3" :propsValue="selectValue03"
:itemList="selectValueList03" :label="'물리량타입'"
@update:propsValue="selectValue03 = $event" labelCols="12" :textCols="12"
:customClass="'select-large fixed-width'" :iconShow="true" />
</v-col>
<v-col :cols="3" class="text-right">
<v-btn :ripple="false" @click="search()">조회</v-btn>
<BtnSearch @click="search" size="large" />
</v-col>
</v-row>
</v-card>
</v-col>
</v-row>
<v-row ref="contents">
<v-col :cols="4" 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>
<Buttons
:parentPrgmId="myPrgmId"
:bindingData="gridName"
:detailList="detailList"
:btnActionsFnc="btnActions"
/>
<v-col :cols="5" class="h100">
<v-card class="pb-5">
<v-card-title class="d-flex align-center justify-space-between pa-4">
물리량 리스트
<Buttons :parentPrgmId="myPrgmId" :bindingData="gridName" :detailList="detailList"
:btnActionsFnc="btnActions" />
</v-card-title>
<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"
<component :ref="gridName" :is="loadGrid ? 'Grid' : null" :gridName="gridName"
:parentPrgmId="myPrgmId" @getRowsData="getRowData"
@sendSelectedRowStatInfo="getSelectedRowStatInfo" :selectedRowDataWatchFlag="true"
:preventFocusChangeEventFlag="true"
:preventFocusChangeEventTargetGridList="editingGridList"
/>
:preventFocusChangeEventTargetGridList="editingGridList" :dataPath="dataPathExample" />
</div>
</div>
</v-card>
</v-col>
<v-col :cols="8" class="h100">
<v-col :cols="7" class="h100">
<v-card class="pb-5 px-4">
<v-card-title>물리량 상세</v-card-title>
<v-card-title class="px-0">물리량 상세</v-card-title>
<v-row no-gutters>
<v-col :cols="6" class="py-2">
<InputText
:parentPrgmId="myPrgmId"
label="물리량 ID"
valueNm="pysclQtyId"
:labelCols="4"
:textCols="7"
:required="requiredValueList[0]"
:disabled="disabledValueList[0]"
:readonly="readOnlyValueList[0]"
placeholder="시스템 자동입력"
/>
<v-col :cols="12" class="py-3">
<InputText :parentPrgmId="myPrgmId" label="물리량 ID" valueNm="pysclQtyId" :labelCols="12"
:textCols="12" :required="requiredValueList[0]" :disabled="disabledValueList[0]"
:readonly="readOnlyValueList[0]" placeholder="시스템 자동입력" />
</v-col>
</v-row>
<v-row no-gutters>
<v-col :cols="6" class="py-2">
<component
:is="'SelectBox'"
ref="SelectBox4"
:propsValue="formEqpmGrpId"
:itemList="formSelectValueList01"
:label="'설비그룹'"
:required="requiredValueList[1]"
:disabled="disabledValueList[1]"
:readonly="readOnlyValueList[1]"
@update:propsValue="formEqpmGrpId = $event"
:labelCols="4"
:textCols="7"
/>
<v-col :cols="6" class="py-3 pr-4">
<component :is="'SelectBox'" ref="SelectBox4" :propsValue="formEqpmGrpId"
:itemList="formSelectValueList01" :label="'설비그룹'" :required="requiredValueList[1]"
:disabled="disabledValueList[1]" :readonly="readOnlyValueList[1]"
@update:propsValue="formEqpmGrpId = $event" :labelCols="12" :textCols="12" />
</v-col>
<v-col :cols="6" class="py-2">
<InputTextReg
:parentPrgmId="myPrgmId"
label="물리량코드"
valueNm="pysclQtyCd"
:labelCols="4"
:textCols="7"
:required="requiredValueList[2]"
:disabled="disabledValueList[2]"
:readonly="readOnlyValueList[2]"
/>
<v-col :cols="6" class="py-3 pl-4">
<InputTextReg :parentPrgmId="myPrgmId" label="물리량코드" valueNm="pysclQtyCd" :labelCols="12"
:textCols="12" :required="requiredValueList[2]" :disabled="disabledValueList[2]"
:readonly="readOnlyValueList[2]" />
</v-col>
</v-row>
<v-row no-gutters>
<v-col :cols="6" class="py-2">
<InputText
:parentPrgmId="myPrgmId"
label="물리량명"
valueNm="pysclQtyNm"
:labelCols="4"
:textCols="7"
:required="requiredValueList[3]"
:disabled="disabledValueList[3]"
:readonly="readOnlyValueList[3]"
/>
<v-col :cols="12" class="py-3">
<InputText :parentPrgmId="myPrgmId" label="물리량명" valueNm="pysclQtyNm" :labelCols="12"
:textCols="12" :required="requiredValueList[3]" :disabled="disabledValueList[3]"
:readonly="readOnlyValueList[3]" />
</v-col>
</v-row>
<v-row no-gutters>
<v-col :cols="6" class="py-2">
<component
:is="'SelectBox'"
ref="SelectBox5"
:propsValue="formPysclQtyTp"
:itemList="formSelectValueList02"
:label="'물리량타입'"
@update:propsValue="formPysclQtyTp = $event"
:required="requiredValueList[4]"
:disabled="disabledValueList[4]"
:readonly="readOnlyValueList[4]"
:labelCols="4"
:textCols="7"
/>
<v-col :cols="6" class="py-3 pr-4">
<component :is="'SelectBox'" ref="SelectBox5" :propsValue="formPysclQtyTp"
:itemList="formSelectValueList02" :label="'물리량타입'"
@update:propsValue="formPysclQtyTp = $event" :required="requiredValueList[4]"
:disabled="disabledValueList[4]" :readonly="readOnlyValueList[4]" :labelCols="12"
:textCols="12" />
</v-col>
<v-col :cols="6" class="py-2">
<component
:is="'SelectBox'"
ref="SelectBox6"
:propsValue="formUpTotMeth"
:itemList="formSelectValueList04"
:label="'상위집계방법'"
@update:propsValue="formUpTotMeth = $event"
:required="requiredValueList[5]"
:disabled="disabledValueList[5]"
:readonly="readOnlyValueList[5]"
:labelCols="4"
:textCols="7"
/>
<v-col :cols="6" class="py-3 pl-4">
<component :is="'SelectBox'" ref="SelectBox6" :propsValue="formUpTotMeth"
:itemList="formSelectValueList04" :label="'상위집계방법'"
@update:propsValue="formUpTotMeth = $event" :required="requiredValueList[5]"
:disabled="disabledValueList[5]" :readonly="readOnlyValueList[5]" :labelCols="12"
:textCols="12" />
</v-col>
</v-row>
<v-row no-gutters>
<v-col :cols="6" class="py-2">
<component
:is="'SelectBox'"
ref="SelectBox7"
:propsValue="formUnit"
:itemList="formSelectValueList03"
:label="'단위'"
@update:propsValue="formUnit = $event"
:required="requiredValueList[6]"
:disabled="disabledValueList[6]"
:readonly="readOnlyValueList[6]"
:labelCols="4"
:textCols="7"
/>
<v-col :cols="6" class="py-3 pr-4">
<component :is="'SelectBox'" ref="SelectBox7" :propsValue="formUnit"
:itemList="formSelectValueList03" :label="'단위'" @update:propsValue="formUnit = $event"
:required="requiredValueList[6]" :disabled="disabledValueList[6]"
:readonly="readOnlyValueList[6]" :labelCols="12" :textCols="12" />
</v-col>
<v-col :cols="6" class="py-3 pl-4" v-show="argContentShowFlag">
<component :is="'EqpmCalcPop'" :parentPrgmId="myPrgmId" ref="EqpmCalcPop" :openMode="'P'"
:modalTitle="'계산코드'" :labelContent="'계산코드'" :item="calcItem" :labelCols="12"
:textCols="12" />
</v-col>
</v-row>
<v-row no-gutters v-show="argContentShowFlag">
<v-col :cols="6" class="py-2">
<component
:is="'EqpmCalcPop'"
:parentPrgmId="myPrgmId"
ref="EqpmCalcPop"
:openMode="'P'"
:modalTitle="'계산코드'"
:labelContent="'계산코드'"
:item="calcItem"
:labelCols="4"
:textCols="7"
/>
<v-col :cols="6" class="py-3">
<component :is="'TextArea'" :parentPrgmId="myPrgmId" ref="TextArea" :item="calcDescItem" />
</v-col>
</v-row>
<v-row no-gutters v-show="argContentShowFlag">
<v-col :cols="12" class="py-2">
<component
:is="'TextArea'"
:parentPrgmId="myPrgmId"
ref="TextArea"
:item="calcDescItem"
/>
</v-col>
</v-row>
<v-row no-gutters v-show="argContentShowFlag">
<v-col :cols="2" class="py-2">
<label for="">
<v-icon
x-small
:color="requiredValueList[7] ? '#fb8200' : 'primary'"
class="mr-1"
>mdi-record-circle</v-icon
>
<v-icon small
:class="['mr-1', requiredValueList[7] ? 'icon-orange' : 'icon-blue']">$icoBulletPoint</v-icon>
계산Argument
</label>
</v-col>
<v-col :cols="2" class="py-2">
<InputText
:parentPrgmId="myPrgmId"
label="ARG갯수"
valueNm="argCnt"
:labelCols="8"
:textCols="4"
:iconShow="false"
:required="requiredValueList[7]"
:disabled="disabledValueList[7]"
:readonly="readOnlyValueList[7]"
/>
<v-col :cols="4" class="py-2">
<InputText :parentPrgmId="myPrgmId" label="ARG갯수" valueNm="argCnt" :labelCols="12"
:textCols="12" :iconShow="true" :required="requiredValueList[7]"
:disabled="disabledValueList[7]" :readonly="readOnlyValueList[7]" />
</v-col>
<v-col :cols="4"> </v-col>
<v-col :cols="4" class="py-2" align="right">
<v-btn
:ripple="false"
@click="btnAction('add')"
:disabled="disabledValueList[7]"
>추가</v-btn
>
<v-btn :ripple="false" @click="btnAction('add')" :disabled="disabledValueList[7]">추가</v-btn>
<!-- <v-btn :ripple="false" @click="btnAction('edit')">수정</v-btn> -->
<v-btn
:ripple="false"
@click="btnAction('remove')"
:disabled="disabledValueList[7]"
>삭제</v-btn
>
<v-btn :ripple="false" @click="btnAction('remove')"
:disabled="disabledValueList[7]">삭제</v-btn>
</v-col>
</v-row>
<v-row style="height:calc(30% - 76px)" v-show="argContentShowFlag">
<v-col :cols="2"> </v-col>
<v-col :cols="10" style="height:100%">
<div ref="gridParent2" style="height:100%">
<component
:ref="gridName2"
:is="loadGrid2 ? 'Grid' : null"
:gridName="gridName2"
:parentPrgmId="myPrgmId"
@getRowsData="getRowData2"
/>
<component :ref="gridName2" :is="loadGrid2 ? 'Grid' : null" :gridName="gridName2"
:parentPrgmId="myPrgmId" @getRowsData="getRowData2" :dataPath="dataPathExample2" />
</div>
</v-col>
</v-row>
<component
v-show="false"
:is="'EgrpPysclQtyPop'"
:parentPrgmId="myPrgmId"
ref="EgrpPysclQtyPop"
:item="EgrpPysclQtyPopItem"
@dialogOpenCloseEvent="egrpPysclQtyPopOpenCloseEvent"
/>
<component v-show="false" :is="'EgrpPysclQtyPop'" :parentPrgmId="myPrgmId" ref="EgrpPysclQtyPop"
:item="EgrpPysclQtyPopItem" @dialogOpenCloseEvent="egrpPysclQtyPopOpenCloseEvent" />
</v-card>
</v-col>
</v-row>
@ -350,8 +226,115 @@ export default {
formatterSelectList01: [],
formatterSelectList02: [],
loadGrid: false,
loadGrid2: false,
loadGrid: true,
dataPathExample: {
"rowGrid": {
data: [
{
"pysclQtyId": "001",
"pysclQtyCd": "TEMP001",
"pysclQtyNm": "온도",
"pysclQtyTp": "실수"
},
{
"pysclQtyId": "002",
"pysclQtyCd": "PRESS001",
"pysclQtyNm": "압력",
"pysclQtyTp": "실수"
},
{
"pysclQtyId": "003",
"pysclQtyCd": "FLOW001",
"pysclQtyNm": "유량",
"pysclQtyTp": "정수"
},
{
"pysclQtyId": "004",
"pysclQtyCd": "HUMID001",
"pysclQtyNm": "습도",
"pysclQtyTp": "실수"
},
{
"pysclQtyId": "005",
"pysclQtyCd": "VOLT001",
"pysclQtyNm": "전압",
"pysclQtyTp": "실수"
}
]
,
column: [
{
header: '물리량 ID',
name: 'pysclQtyId',
width: 100,
align: 'center',
},
{ header: '물리량코드', name: 'pysclQtyCd', minWidth: 255 },
{ header: '물리량명', name: 'pysclQtyNm', width: 150 },
{
header: '물리량타입',
name: 'pysclQtyTp',
width: 80,
},
],
}
},
dataPathExample2: {
"rowGrid2": {
data:
[
{
"argSeq": "1",
"argPysclQtyId": "001",
"eqpmGrpId": "EQPM-GRP-A",
"pysclQtyCd": "TEMP001"
},
{
"argSeq": "2",
"argPysclQtyId": "002",
"eqpmGrpId": "EQPM-GRP-B",
"pysclQtyCd": "PRESS001"
},
{
"argSeq": "3",
"argPysclQtyId": "003",
"eqpmGrpId": "EQPM-GRP-C",
"pysclQtyCd": "FLOW001"
},
{
"argSeq": "4",
"argPysclQtyId": "004",
"eqpmGrpId": "EQPM-GRP-D",
"pysclQtyCd": "HUMID001"
},
{
"argSeq": "5",
"argPysclQtyId": "005",
"eqpmGrpId": "EQPM-GRP-E",
"pysclQtyCd": "VOLT001"
}
]
,
column: [
{ header: '순번', name: 'argSeq', editor: 'text' },
{ header: '물리량 ID', name: 'argPysclQtyId' },
{
header: '설비그룹',
name: 'eqpmGrpId',
},
{ header: '물리량 코드', name: 'pysclQtyCd' },
],
}
},
loadGrid2: true,
detailList: myDetail,
readOnlyValueList: [
@ -401,7 +384,8 @@ export default {
required: false,
label: '계산설명',
cols: 12,
textCols: 10,
textCols: 12,
padding: false,
},
argContentShowFlag: true,
@ -715,7 +699,7 @@ export default {
defaultData: defaultData,
});
},
created() {},
created() { },
mounted() {
this.init();
},
@ -1045,7 +1029,7 @@ export default {
header: '물리량타입',
name: 'pysclQtyTp',
width: 80,
formatter: function(data) {
formatter: function (data) {
var resultValue = '';
var pysclQtyTp = data.row.pysclQtyTp;
@ -1100,7 +1084,7 @@ export default {
{
header: '설비그룹',
name: 'eqpmGrpId',
formatter: function(data) {
formatter: function (data) {
var resultValue = '';
var pysclQtyId = '';
var eqpmGrpId = '';
@ -1184,12 +1168,12 @@ export default {
//rowKey: 0,
rowKey:
this.pageData.rowGridSelectKey == '' ||
this.pageData.rowGridSelectKey == null
this.pageData.rowGridSelectKey == null
? 0
: this.pageData.rowGridSelectKey ==
this.$refs['rowGrid'].getData().length - 1
? this.pageData.rowGridSelectKey
: 0,
this.$refs['rowGrid'].getData().length - 1
? this.pageData.rowGridSelectKey
: 0,
columnName: 'pysclQtyId',
setScroll: true,
});
@ -1529,7 +1513,7 @@ export default {
}
// 2. 삭제가 먼저 되도록 정렬
dataArr.sort(function(data1, data2) {
dataArr.sort(function (data1, data2) {
if (data1.rowStat > data2.rowStat) {
return 1;
} else if (data1.rowStat < data2.rowStat) {
@ -1683,6 +1667,3 @@ const defaultData = {
const myDetail = [];
</script>
<style lang="scss">
@import '@/assets/scss/common.scss';
</style>

View File

@ -3,19 +3,20 @@
<v-row ref="searchFilter">
<v-col :cols="12">
<v-card class="searchFilter">
<v-row align="center" no-gutters>
<v-row align="end" no-gutters>
<v-col :cols="5">
<InputText
:parentPrgmId="myPrgmId"
label="설비종류명"
valueNm="eqpmKindNm"
:searchOption="true"
:textCols="9"
:labelCols="3"
:textCols="12"
:labelCols="12"
customClass="input-large"
/>
</v-col>
<v-col :cols="7" class="text-right">
<BtnSearch @click="search" />
<BtnSearch @click="search" size="large" />
</v-col>
</v-row>
</v-card>
@ -41,6 +42,7 @@
:parentPrgmId="myPrgmId"
@getRowsData="getRowData"
:preventFocusChangeEventFlag="false"
:dataPath="dataPathMock"
/>
</div>
</div>
@ -116,6 +118,21 @@ export default {
detailList: myDetail,
selectValueList01: [],
selectValue01: null,
dataPathMock: {
'eqpmKindGrid': {
column: [
{ header: '설비종류ID', name: 'eqpmKindId', headerAlign: 'center' },
{ header: '설비종류명', name: 'eqpmKindNm', headerAlign: 'left' },
{ header: '등록자NO', name: 'regUserNo', hidden: true},
{ header: '등록일시', name: 'regDttm', hidden: true },
{ header: '수정자NO', name: 'procUserNo', hidden: true },
{ header: '수정일시', name: 'procDttm', hidden: true}
],
data: dataPathDataExample,
defaultRow: dataPathDataExample,
option: {}
}
},
};
},
computed: {
@ -372,73 +389,83 @@ const myDetail = [
label: '설비종류 ID',
valueNm: 'eqpmKindId',
cols: 6,
class: 'py-2',
class: 'py-2 pr-4',
iconShow: true,
required: false,
readonly: true,
placeholder: '시스템 자동입력',
labelCols: 12,
textCols: 12,
},
{
cols: 6,
},
{
type: 'InputText',
type: 'InputTextReg',
label: '설비종류명',
valueNm: 'eqpmKindNm',
disabled: false,
cols: 6,
class: 'py-2',
class: 'py-2 pl-4',
iconShow: true,
required: true,
},
{
cols: 6,
labelCols: 12,
textCols: 12,
},
{
type: 'InputText',
label: '등록자NO',
valueNm: 'regUserNo',
disabled: true,
iconShow: true,
cols: 6,
class: 'py-2',
class: 'py-2 pr-4 pt-5',
placeholder: '시스템 자동입력',
},
{
cols: 6,
labelCols: 12,
textCols: 12,
},
{
type: 'InputText',
label: '등록일시',
valueNm: 'regDttm',
iconShow: true,
disabled: true,
cols: 6,
class: 'py-2',
class: 'py-2 pl-4 pt-5',
placeholder: '시스템 자동입력',
},
{
cols: 6,
labelCols: 12,
textCols: 12,
},
{
type: 'InputText',
label: '수정자NO',
valueNm: 'procUserNo',
disabled: true,
iconShow: true,
cols: 6,
class: 'py-2',
class: 'py-2 pr-4 pt-5',
placeholder: '시스템 자동입력',
},
{
cols: 6,
labelCols: 12,
textCols: 12,
},
{
type: 'InputText',
label: '수정일시',
valueNm: 'procDttm',
disabled: true,
iconShow: true,
cols: 6,
class: 'py-2',
class: 'py-2 pl-4 pt-5',
placeholder: '시스템 자동입력',
labelCols: 12,
textCols: 12,
},
];
</script>
<style lang="scss">
@import '@/assets/scss/common.scss';
</style>
import { getPathDataExample } from '@/const/const'
const dataPathDataExample = getPathDataExample({
eqpmKindId: 'EKIND0005',
eqpmKindNm: 'VCB',
regUserNo: '사용',
regDttm: 'EQP_HVAC_LT_CH001',
procUserNo: '사용',
procDttm: 'EQP_HVAC_LT_CH001',
});
</script>

View File

@ -3,7 +3,7 @@
<v-row ref="searchFilter">
<v-col :cols="12">
<v-card class="searchFilter">
<v-row align="center" no-gutters>
<v-row align="end" no-gutters>
<v-col :cols="3">
<component
:is="'selectCodeList'"
@ -12,6 +12,7 @@
dataKey="useFg"
:sendParam="{ commGrpCd: 'CO_USEFG', useFg: '1' }"
:addAll="true"
customClass="select-large"
/>
</v-col>
<v-col :cols="3">
@ -22,6 +23,7 @@
:itemList="selectValueList01"
:label="'설비종류'"
@update:propsValue="selectValue01 = $event"
customClass="select-large"
/>
</v-col>
<v-col :cols="3">
@ -30,12 +32,13 @@
label="설비 그룹 명"
valueNm="eqpmGrpNm"
:searchOption="true"
:textCols="8"
:labelCols="4"
:textCols="12"
:labelCols="12"
customClass="input-large"
/>
</v-col>
<v-col :cols="3" class="text-right">
<BtnSearch @click="search" />
<BtnSearch @click="search" size="large" />
</v-col>
</v-row>
</v-card>
@ -60,7 +63,8 @@
:is="loadGrid ? 'Grid' : null"
:gridName="gridName"
:parentPrgmId="myPrgmId"
@getRowsData="getRowData"
@getRowsData="getRowData"
:dataPath="dataPathMock"
/>
</div>
</div>
@ -131,11 +135,29 @@ export default {
return {
myPrgmId: myPrgmId,
gridName: 'rowGrid',
loadGrid: false,
loadGrid: true,
tab: null,
detailList: myDetail,
selectValueList01: [],
selectValue01: null,
dataPathMock: {
'rowGrid': {
column: [
{ header: '회사 ID', name: 'comId', hidden: true },
{ header: '설비 그룹 ID', name: 'eqpmGrpId'},
{ header: '설비 그룹 명', name: 'eqpmGrpNm'},
{ header: '설비종류', name: 'eqpmKindId'},
{ header: '사용여부', name: 'useFg'},
{ header: '등록자NO', name: 'regUserNo', hidden: true},
{ header: '등록일시', name: 'regDttm', hidden: true },
{ header: '수정자NO', name: 'procUserNo', hidden: true },
{ header: '수정일시', name: 'procDttm', hidden: true}
],
data: dataPathDataExample,
defaultRow: dataPathDataExample,
options:{}
}
},
};
},
computed: {
@ -302,7 +324,7 @@ export default {
this.getRowGridData();
},
async search() {
this.loadGrid = false;
this.loadGrid = true;
// if (this.loadFlag == false) {
// return;
// }
@ -482,18 +504,24 @@ const myDetail = [
valueNm: 'eqpmGrpId',
disabled: true,
cols: 6,
class: 'py-2',
class: 'py-2 pr-4',
required: false,
iconShow: true,
labelCols: 12,
textCols: 12,
placeholder: '시스템 자동입력',
},
{
type: 'InputText',
type: 'InputTextReg',
label: '설비 그룹 명',
valueNm: 'eqpmGrpNm',
disabled: false,
cols: 6,
class: 'py-2',
class: 'py-2 pl-4',
required: true,
iconShow: true,
labelCols: 12,
textCols: 12,
},
{
type: 'CheckBox',
@ -501,9 +529,12 @@ const myDetail = [
valueNm: 'useFg',
disabled: false,
cols: 6,
class: 'py-2',
class: 'py-2 pr-4 pt-5',
value: { '1': true, '0': false },
required: true,
iconShow: true,
labelCols: 12,
textCols: 12,
},
{
type: 'SelectBox',
@ -511,11 +542,14 @@ const myDetail = [
valueNm: 'eqpmKindId',
disabled: false,
cols: 6,
class: 'py-2',
class: 'py-2 pl-4 pt-5',
list: 'eqpmKindIdList',
itemText: 'eqpmKindNm',
itemValue: 'eqpmKindId',
required: true,
iconShow: true,
labelCols: 12,
textCols: 12,
},
{
type: 'InputText',
@ -523,8 +557,11 @@ const myDetail = [
valueNm: 'regUserNo',
disabled: true,
cols: 6,
class: 'py-2',
class: 'py-2 pr-4 pt-5',
placeholder: '시스템 자동입력',
iconShow: true,
labelCols: 12,
textCols: 12,
},
{
type: 'InputText',
@ -532,8 +569,11 @@ const myDetail = [
valueNm: 'regDttm',
disabled: true,
cols: 6,
class: 'py-2',
class: 'py-2 pl-4 pt-5',
placeholder: '시스템 자동입력',
iconShow: true,
labelCols: 12,
textCols: 12,
},
{
type: 'InputText',
@ -541,8 +581,11 @@ const myDetail = [
valueNm: 'procUserNo',
disabled: true,
cols: 6,
class: 'py-2',
class: 'py-2 pr-4 pt-5',
placeholder: '시스템 자동입력',
iconShow: true,
labelCols: 12,
textCols: 12,
},
{
type: 'InputText',
@ -550,11 +593,25 @@ const myDetail = [
valueNm: 'procDttm',
disabled: true,
cols: 6,
class: 'py-2',
class: 'py-2 pl-4 pt-5',
placeholder: '시스템 자동입력',
iconShow: true,
labelCols: 12,
textCols: 12,
},
];
import { getPathDataExample } from '@/const/const'
const dataPathDataExample = getPathDataExample({
comId: 'EKIND0005',
eqpmGrpId: 'EQG000010',
eqpmGrpNm:'냉수파이프고온',
eqpmKindId:'냉동파이프',
useFg:'1',
regUserNo: '사용',
regDttm: 'EQP_HVAC_LT_CH001',
procUserNo: '사용',
procDttm: 'EQP_HVAC_LT_CH001',
});
</script>
<style lang="scss">
@import '@/assets/scss/common.scss';
</style>

View File

@ -3,50 +3,32 @@
<v-row ref="searchFilter">
<v-col :cols="12">
<v-card class="searchFilter">
<v-row align="center" no-gutters>
<v-col :cols="3">
<v-row align="end" no-gutters>
<v-col :cols="2.5">
<!-- 사업장 -->
<component
:is="'SelectBlocMstr'"
ref="SelectBlocMstr"
:parentPrgmId="myPrgmId"
/>
<component :is="'SelectBlocMstr'" ref="SelectBlocMstr" :parentPrgmId="myPrgmId"
:labelCols="12"
:textCols="12"
customClass="select-large"
/>
</v-col>
<v-col :cols="3">
<component
:is="'selectCodeList'"
:parentPrgmId="myPrgmId"
:label="'설비 유형'"
dataKey="searchEqpmKind"
:sendParam="{ commGrpCd: 'CM_EQKIND', useFg: '1' }"
:addAll="true"
/>
<v-col :cols="2.5">
<component :is="'selectCodeList'" :parentPrgmId="myPrgmId" :label="'설비 유형'" dataKey="searchEqpmKind"
:sendParam="{ commGrpCd: 'CM_EQKIND', useFg: '1' }" :addAll="true"
customClass="select-large" />
</v-col>
<v-col :cols="3">
<component
:is="'SelectEqpmGrp'"
:parentPrgmId="myPrgmId"
:label="'설비 그룹'"
dataKey="searchEqpmGrp"
:sendParam="{ useFg: '1', test: 'dfadfadf' }"
:addAll="true"
/>
<v-col :cols="2.5">
<component :is="'SelectEqpmGrp'" :parentPrgmId="myPrgmId" :label="'설비 그룹'" dataKey="searchEqpmGrp"
:sendParam="{ useFg: '1', test: 'dfadfadf' }" :addAll="true" :labelCols="12" :textCols="12"
customClass="select-large"
/>
</v-col>
<v-col :cols="3" class="text-right">
<BtnSearch @click="search" />
</v-col>
</v-row>
<v-row align="center" no-gutters>
<v-col :cols="6">
<InputText
:parentPrgmId="myPrgmId"
label="설비명"
valueNm="eqpmNm"
:labelCols="2"
:textCols="10"
:searchOption="true"
/>
<v-col :cols="2.5">
<InputText :parentPrgmId="myPrgmId" label="설비명" valueNm="eqpmNm" :searchOption="true" :labelCols="12"
:textCols="12"
customClass="input-large" />
</v-col>
<BtnSearch @click="search" size="large" />
</v-row>
</v-card>
</v-col>
@ -56,72 +38,36 @@
<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">설비 정보</v-card-title>
<Buttons
:parentPrgmId="myPrgmId"
:bindingData="gridName"
:detailList="detailList"
:btnActionsFnc="btnActions"
/>
<Buttons :parentPrgmId="myPrgmId" :bindingData="gridName" :detailList="detailList"
:btnActionsFnc="btnActions" />
</div>
<div class="px-5" style="height:calc(100% - 76px)">
<div class="px-5" style="min-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"
:preventFocusChangeEventFlag="false"
/>
<component :ref="gridName" :is="loadGrid ? 'Grid' : null" :gridName="gridName" :parentPrgmId="myPrgmId"
@getRowsData="getRowData" @sendSelectedRowStatInfo="getSelectedRowStatInfo"
:selectedRowDataWatchFlag="true" :preventFocusChangeEventFlag="false" :dataPath="dataPathMock" />
</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;"
>설비 상세</v-card-title
>
<div class="px-5" style="height:calc(100% - 76px)">
<v-card-title class="custom-title-4" style="min-height:76px;">설비 상세</v-card-title>
<div class="px-5" style="min-height:calc(100% - 76px)">
<v-tabs v-model="tab">
<v-tab
v-for="item in items"
:key="item.id"
:disabled="item.disabledFlag"
>
<v-tab v-for="item in items" :key="item.id" :disabled="item.disabledFlag">
{{ item.name }}
</v-tab>
</v-tabs>
<v-tabs-items
v-model="tab"
style="height: calc(100% - 65px);"
class="py-6"
>
<v-tabs-items v-model="tab" style="min-height: calc(100% - 65px);" class="py-6">
<v-tab-item v-for="(item, idx) in items" :key="item.id">
<component
v-if="item.id == 'eqpmBaseInfoTab'"
:is="'Form'"
:parentPrgmId="myPrgmId"
:detailList="detailList"
@gridEditingFinish="gridEditingFinish"
/>
<EqpmAddInfoTab
v-if="item.id == 'eqpmAddInfoTab'"
:parentPrgmId="myPrgmId"
:innerTabGridInfo="{ tab, idx }"
/>
<EqpmIaoTab
v-if="item.id == 'eqpmIaoTab'"
:parentPrgmId="myPrgmId"
:innerTabGridInfo="{ tab, idx }"
/>
<EqpmConstTab
v-if="item.id == 'eqpmConstTab'"
:parentPrgmId="myPrgmId"
:innerTabGridInfo="{ tab, idx }"
/>
<component v-if="item.id == 'eqpmBaseInfoTab'" :is="'Form'" :parentPrgmId="myPrgmId"
:detailList="detailList" @gridEditingFinish="gridEditingFinish" />
<EqpmAddInfoTab v-if="item.id == 'eqpmAddInfoTab'" :parentPrgmId="myPrgmId"
:innerTabGridInfo="{ tab, idx }" />
<EqpmIaoTab v-if="item.id == 'eqpmIaoTab'" :parentPrgmId="myPrgmId" :innerTabGridInfo="{ tab, idx }" />
<EqpmConstTab v-if="item.id == 'eqpmConstTab'" :parentPrgmId="myPrgmId"
:innerTabGridInfo="{ tab, idx }" />
</v-tab-item>
</v-tabs-items>
</div>
@ -194,6 +140,24 @@ export default {
],
detailList: myDetail,
lastInsertEqpmId: null,
dataPathMock: {
'rowGrid': {
column: [
{ header: '설비 ID', name: 'id', headerAlign: 'left' },
{ header: '설비 명', name: 'lable', headerAlign: 'left' },
{ header: '설비 유형', name: 'type', headerAlign: 'left' },
{ header: '설비 그룹ㅅ', name: 'note', headerAlign: 'left' },
{ header: '사용 여부', name: 'field1', headerAlign: 'left' },
// { header: '분배율', name: 'field2', headerAlign: 'left' }
],
data: dataPathDataExample,
defaultRow: dataPathDataExample,
option: {
// rowHeaders: ['checkbox']
},
}
},
};
},
computed: {
@ -495,14 +459,14 @@ export default {
this.$refs[this.gridName].focus({
rowKey:
this.pageData.rowGridSelectKey != '' ||
this.pageData.rowGridSelectKey != null
this.pageData.rowGridSelectKey != null
? this.pageData.rowGridSelectKey
: this.$refs[this.gridName]
.getData()
.findIndex(item => item.eqpmId == this.lastInsertEqpmId) ==
-1
? 0
: this.$refs[this.gridName]
.getData()
.findIndex(item => item.eqpmId == this.lastInsertEqpmId) ==
-1
? 0
: this.$refs[this.gridName]
.getData()
.findIndex(item => item.eqpmId == this.lastInsertEqpmId),
columnName: 'eqpmId',
@ -943,11 +907,11 @@ const myDetail = [
// readonly: true,
disabled: true,
cols: 6,
class: 'py-2',
class: 'py-3 pr-4',
required: true,
iconShow: true,
labelCols: 4,
textCols: 7,
labelCols: 12,
textCols: 12,
},
{
type: 'InputText',
@ -955,8 +919,11 @@ const myDetail = [
valueNm: 'eqpmNm',
disabled: false,
cols: 6,
class: 'py-2',
class: 'py-3 pl-4',
required: true,
labelCols: 12,
textCols: 12,
iconShow: true,
},
{
type: 'SelectBox',
@ -964,11 +931,14 @@ const myDetail = [
valueNm: 'eqpmKind',
disabled: false,
cols: 6,
class: 'py-2',
class: 'py-3 pr-4',
list: 'eqpmKindList',
itemText: 'commCdNm',
itemValue: 'commCd',
required: true,
labelCols: 12,
textCols: 12,
iconShow: true,
},
{
type: 'SelectBox',
@ -976,11 +946,14 @@ const myDetail = [
valueNm: 'eqpmGrpId',
disabled: false,
cols: 6,
class: 'py-2',
class: 'py-3 pl-4',
list: 'eqpmGrpList',
itemText: 'eqpmGrpNm',
itemValue: 'eqpmGrpId',
required: true,
labelCols: 12,
textCols: 12,
iconShow: true,
},
{
type: 'FtnPlcFormPop',
@ -990,18 +963,12 @@ const myDetail = [
disabled: false,
required: false,
cols: 6,
class: 'py-2',
labelCols: 4,
textCols: 7,
disableContent: true,
eccFgYn: 'Y',
},
{
type: 'InputText',
valueNm: 'eccNm',
readonly: true,
cols: 5,
class: 'py-2',
labelCols: 12,
textCols: 12,
iconShow: true,
class: 'py-3 pr-4',
},
{
type: 'CheckBox',
@ -1009,12 +976,31 @@ const myDetail = [
valueNm: 'useFg',
disabled: false,
cols: 6,
class: 'py-2',
class: 'py-3 pl-4',
value: { '1': true, '0': false },
required: true,
iconShow: true,
// class: 'd-flex align-end pb-3'
},
{
type: 'InputText',
valueNm: 'eccNm',
readonly: true,
cols: 6,
labelCols: 12,
textCols: 12,
iconShow: true,
class: 'pt-0 py-3 pr-4'
},
];
import { getPathDataExample } from '@/const/const'
const dataPathDataExample = getPathDataExample({
id: 'INCHEON.HVAC.EQP_HT_CH001.UT_CH101.CHI_AMP_1A_PV',
lable: 'INCHEON 고온 냉동기 101호기 - 호로1',
type: '사용', note: '-',
field1: '1111',
field2: '2222',
});
</script>
<style lang="scss">
@import '@/assets/scss/common.scss';
</style>

View File

@ -3,89 +3,61 @@
<v-row ref="searchFilter">
<v-col :cols="12">
<v-card class="searchFilter">
<v-row align="center" no-gutters>
<v-row align="end" no-gutters>
<v-col :cols="3">
<component
:is="'SelectBox'"
ref="SelectBox1"
:propsValue="selectValue01"
:itemList="selectValueList01"
:label="'설비종류'"
@update:propsValue="selectValue01 = $event"
/>
<component :is="'SelectBox'" ref="SelectBox1" :propsValue="selectValue01"
:itemList="selectValueList01" :label="'설비종류'" :iconShow="true"
@update:propsValue="selectValue01 = $event" :labelCols="12" :textCols="12"
:customClass="'select-large'" />
</v-col>
<v-col :cols="3">
<component
:is="'SelectBox'"
ref="SelectBox2"
:propsValue="selectValue02"
:itemList="selectValueList02"
:label="'설비그룹'"
@update:propsValue="selectValue02 = $event"
/>
<component :is="'SelectBox'" ref="SelectBox2" :propsValue="selectValue02"
:itemList="selectValueList02" :label="'설비그룹'" :iconShow="true"
@update:propsValue="selectValue02 = $event" :labelCols="12" :textCols="12"
:customClass="'select-large'" />
</v-col>
<v-col :cols="3">
<InputText
:parentPrgmId="myPrgmId"
label="가이드명"
:textCols="8"
valueNm="gdIdxNm"
:searchOption="true"
/>
<InputText :parentPrgmId="myPrgmId" label="가이드명" :textCols="12" valueNm="gdIdxNm"
:searchOption="true" :iconShow="true" :labelCols="12" :customClass="'input-large'"/>
</v-col>
<v-col :cols="3" class="text-right">
<BtnSearch @click="search" />
<a-button icon="search" type="primary" @click="search()" class="search-button" size="large">조회</a-button>
</v-col>
</v-row>
</v-card>
</v-col>
</v-row>
<v-row ref="contents">
<v-col :cols="12" style="height: 100%">
<!-- <v-card class="py-5"> -->
<v-col :cols="12" style="height: 40%">
<v-card class="pb-5">
<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"
:detailList="detailList"
:btnActionsFnc="btnActions"
/>
<v-row ref="contents" class="mt-4">
<!-- <v-card class="py-5"> -->
<v-col :cols="12">
<v-card class="pb-5">
<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" :detailList="detailList"
:btnActionsFnc="btnActions" />
</div>
<div class="h100 px-4" style="height:calc(100% - 70px)">
<div ref="gridParent" >
<component :ref="gridName" :is="loadGrid ? 'Grid' : null" :gridName="gridName"
:parentPrgmId="myPrgmId" @getRowsData="getRowData" :dataPath="dataPathExample" />
</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"
@getRowsData="getRowData"
/>
</div>
<div class="d-flex py-4">
<component :is="'Form'" :parentPrgmId="myPrgmId" :detailList="detailList"
@gridEditingFinish="gridEditingFinish" />
</div>
</v-card>
</v-col>
<v-col :cols="12" style="height: 60%">
<v-card class="pb-5">
<v-row
:cols="12"
class="d-flex align-center justify-space-between pa-3"
>
<component
:is="'Form'"
:parentPrgmId="myPrgmId"
:detailList="detailList"
@gridEditingFinish="gridEditingFinish"
/>
</v-row>
</v-card>
</v-col>
<!-- </v-card> -->
</div>
</v-card>
</v-col>
<!-- <v-col :cols="12" style="height: 60%">
<v-card class="pb-5">
<v-row :cols="12" class="d-flex align-center justify-space-between pa-3">
<component :is="'Form'" :parentPrgmId="myPrgmId" :detailList="detailList"
@gridEditingFinish="gridEditingFinish" />
</v-row>
</v-card>
</v-col> -->
<!-- </v-card> -->
</v-row>
</div>
</template>
@ -140,7 +112,7 @@ export default {
myPrgmId: myPrgmId,
initedFlag: false,
gridName: 'rowGrid',
loadGrid: false,
loadGrid: true,
detailList: myDetail,
selectValue01: null,
selectValueList01: [],
@ -153,6 +125,102 @@ export default {
// pysclQtyId3 : null,
// pysclQtyId4 : null
// }
dataPathExample: {
"rowGrid": {
data: [
{
gdIdxId: 'GD001',
gdIdxNm: '온도 가이드',
eqpmGrpId: 'EQ001',
upTotMeth: 'AVG',
careStndVal: 50,
warnStndVal: 70,
alrmMsg: '온도가 기준치를 초과했습니다.',
},
{
gdIdxId: 'GD002',
gdIdxNm: '습도 가이드',
eqpmGrpId: 'EQ002',
upTotMeth: 'MAX',
careStndVal: 30,
warnStndVal: 60,
alrmMsg: '습도가 기준치를 초과했습니다.',
},
{
gdIdxId: 'GD003',
gdIdxNm: '압력 가이드',
eqpmGrpId: 'EQ003',
upTotMeth: 'SUM',
careStndVal: 100,
warnStndVal: 150,
alrmMsg: '압력이 기준치를 초과했습니다.',
}
],
column: [
{
header: '가이드',
name: 'gdIdxId',
width: 100,
align: 'center',
},
{
header: '가이드명',
name: 'gdIdxNm',
width: 210,
align: 'left',
},
{
header: '설비그룹ID',
name: 'eqpmGrpId',
width: 100,
align: 'center',
// formatter({ value }) {
// let retVal = '';
// const newValue = _this.pageData.eqpmGrpList.filter(item => item.value == value);
// if (newValue.length > 0) {
// retVal = newValue[0].text;
// }
// return retVal;
// },
},
{
header: '상위집계방법',
name: 'upTotMeth',
width: 100,
align: 'center',
// formatter({ value }) {
// let retVal = '';
// const newValue = _this.pageData.upTotMethList.filter(item => item.commCd == value);
// if (newValue.length > 0) {
// retVal = newValue[0].commCdNm;
// }
// return retVal;
// },
},
{
header: '주의기준',
name: 'careStndVal',
width: 100,
align: 'right',
},
{
header: '경고기준',
name: 'warnStndVal',
width: 100,
align: 'right',
},
{
header: '알람메세지',
name: 'alrmMsg',
minWidth: 860,
align: 'left',
}
]
}
}
};
},
computed: {
@ -284,46 +352,61 @@ export default {
});
},
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;
}
// 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.selectValueList01 = [
{ label: 'Etcher', value: 'EQK001' },
{ label: 'Deposition', value: 'EQK002' },
{ label: 'Inspection', value: 'EQK003' },
];
this.selectValue01 = 'EQK001';
this.setPageData({
eqpmKindList: this.selectValueList01,
eqpmKindId: this.selectValue01,
});
},
async getEqpmGrp() {
let res = await this.postApiReturn({
apiKey: 'selectEqpmGrpCodeList',
resKey: 'eqpmGrpCodeLists',
sendParam: { eqpmKindId: this.selectValue01 },
});
if (res.length > 0) {
this.selectValueList02 = await res.map(item => {
return {
text: item.eqpmGrpNm,
value: item.eqpmGrpId,
};
});
this.selectValue02 = this.selectValueList02[0].value;
} else {
this.selectValueList02 = [];
this.selectValue02 = null;
}
// let res = await this.postApiReturn({
// apiKey: 'selectEqpmGrpCodeList',
// resKey: 'eqpmGrpCodeLists',
// sendParam: { eqpmKindId: this.selectValue01 },
// });
// if (res.length > 0) {
// this.selectValueList02 = await res.map(item => {
// return {
// text: item.eqpmGrpNm,
// value: item.eqpmGrpId,
// };
// });
// this.selectValue02 = this.selectValueList02[0].value;
// } else {
// this.selectValueList02 = [];
// this.selectValue02 = null;
// }
this.selectValueList02 = [
{ label: '냉동기고온', value: '냉동기고온' },
{ label: '냉동기저온', value: '냉동기저온' },
{ label: '공조기', value: '공조기' },
{ label: '보일러', value: '보일러' }
];
this.setPageData({
eqpmGrpList: this.selectValueList02,
eqpmGrpId: this.selectValue02,
@ -553,48 +636,100 @@ export default {
async getRowGridData() {
this.loadGrid = false;
let res = [];
res = await this.postApiReturn({
apiKey: 'selectEqpmGdIdxDataList',
resKey: 'eqpmGdIdxDataList',
sendParam: {
eqpmGrpId: this.selectValue02,
gdIdxNmLike: this.pageData.gdIdxNm,
},
});
const newRes = res.map(item => {
const newObj = {
...item,
const newRes = [
{
comId: 'COM001',
gdIdxId: 'GD001',
gdIdxNm: '온도 가이드',
eqpmGrpId: 'EQ001',
upTotMeth: 'AVG',
sortSeq: 1,
pysclQtyId1: 'TEMP',
pysclQtyId2: null,
pysclQtyId3: null,
pysclQtyId4: null,
ctgr1: '환경',
ctgr2: '내부',
careStndVal: 50,
warnStndVal: 70,
gdMeth: '자동',
useFg: '1',
alrmMsg: '온도가 기준치를 초과했습니다.',
calcProc: 'PROC001',
calcDesc: '평균 계산',
calcMeth: '(A+B)/2',
unit: 'C',
argCnt: 2,
rowStat: null,
};
return newObj;
});
},
{
comId: 'COM002',
gdIdxId: 'GD002',
gdIdxNm: '습도 가이드',
eqpmGrpId: 'EQ002',
upTotMeth: 'MAX',
sortSeq: 2,
pysclQtyId1: 'HUMID',
pysclQtyId2: null,
pysclQtyId3: null,
pysclQtyId4: null,
ctgr1: '환경',
ctgr2: '외부',
careStndVal: 30,
warnStndVal: 60,
gdMeth: '수동',
useFg: '0',
alrmMsg: '습도가 기준치를 초과했습니다.',
calcProc: 'PROC002',
calcDesc: '최대값 계산',
calcMeth: 'MAX(A,B)',
unit: '%',
argCnt: 2,
rowStat: null,
},
];
// res = await this.postApiReturn({
// apiKey: 'selectEqpmGdIdxDataList',
// resKey: 'eqpmGdIdxDataList',
// sendParam: {
// eqpmGrpId: this.selectValue02,
// gdIdxNmLike: this.pageData.gdIdxNm,
// },
// });
// const newRes = res.map(item => {
// const newObj = {
// ...item,
// rowStat: null,
// };
// return newObj;
// });
this.setGridData({
gridKey: this.gridName,
value: newRes,
});
//this.loadGrid = true;
this.$nextTick(() => {
if (newRes.length > 0) {
try {
this.$refs[this.gridName].focus({
//rowKey: 0,
rowKey:
this.pageData.rowGridSelectKey == '' ||
this.pageData.rowGridSelectKey == null
? 0
: this.pageData.rowGridSelectKey ==
this.$refs[this.gridName].getData().length - 1
? this.pageData.rowGridSelectKey
: 0,
columnName: 'gdIdxId',
setScroll: true,
});
} catch (error) {}
} else {
this.detailDataInit();
}
});
// this.$nextTick(() => {
// if (newRes.length > 0) {
// try {
// this.$refs[this.gridName].focus({
// //rowKey: 0,
// rowKey:
// this.pageData.rowGridSelectKey == '' ||
// this.pageData.rowGridSelectKey == null
// ? 0
// : this.pageData.rowGridSelectKey ==
// this.$refs[this.gridName].getData().length - 1
// ? this.pageData.rowGridSelectKey
// : 0,
// columnName: 'gdIdxId',
// setScroll: true,
// });
// } catch (error) { }
// } else {
// this.detailDataInit();
// }
// });
this.loadGrid = true;
},
async getRowData(data) {
@ -1035,7 +1170,60 @@ const defaultData = {
/* data 세팅 */
// 로컬 gridName 값과 동일한 이름으로 세팅
rowGrid: {
data: [],
// data: [],
data: [
{
comId: 'COM001',
gdIdxId: 'GD001',
gdIdxNm: '온도 가이드',
eqpmGrpId: 'EQ001',
upTotMeth: 'AVG',
sortSeq: 1,
pysclQtyId1: 'TEMP',
pysclQtyId2: null,
pysclQtyId3: null,
pysclQtyId4: null,
ctgr1: '환경',
ctgr2: '내부',
careStndVal: 50,
warnStndVal: 70,
gdMeth: '자동',
useFg: '1',
alrmMsg: '온도가 기준치를 초과했습니다.',
calcProc: 'PROC001',
calcDesc: '평균 계산',
calcMeth: '(A+B)/2',
unit: 'C',
argCnt: 2,
rowStat: null,
},
{
comId: 'COM002',
gdIdxId: 'GD002',
gdIdxNm: '습도 가이드',
eqpmGrpId: 'EQ002',
upTotMeth: 'MAX',
sortSeq: 2,
pysclQtyId1: 'HUMID',
pysclQtyId2: null,
pysclQtyId3: null,
pysclQtyId4: null,
ctgr1: '환경',
ctgr2: '외부',
careStndVal: 30,
warnStndVal: 60,
gdMeth: '수동',
useFg: '0',
alrmMsg: '습도가 기준치를 초과했습니다.',
calcProc: 'PROC002',
calcDesc: '최대값 계산',
calcMeth: 'MAX(A,B)',
unit: '%',
argCnt: 2,
rowStat: null,
},
],
column: [], // myColumns,
option: {}, // myOptions
defaultRow: {
@ -1078,30 +1266,34 @@ const myDetail = [
label: '가이드',
valueNm: 'gdIdxId',
cols: 3,
class: 'py-2',
class: 'py-3 pr-3',
required: false,
readonly: true,
placeholder: '시스템 자동입력',
iconShow: true,
labelCols: 12,
textCols: 12,
},
{
type: 'InputText',
label: '가이드 명',
valueNm: 'gdIdxNm',
disabled: false,
cols: 6,
labelCols: 2,
textCols: 9,
class: 'py-2',
cols: 9,
labelCols: 12,
textCols: 12,
class: 'py-3 pl-3',
required: true,
iconShow: true
},
{
// 공백 처리
type: 'Label',
cols: 3,
class: 'py-2',
// label: "* '주의기준값' 또는 '경고기준값' 중 하나는 필수로 입력해 주세요.",
disabled: false,
},
// {
// // 공백 처리
// type: 'Label',
// cols: 3,
// class: 'py-2',
// // label: "* '주의기준값' 또는 '경고기준값' 중 하나는 필수로 입력해 주세요.",
// disabled: false,
// },
// {
// type: 'CheckBox',
// label: '설비기준적용',
@ -1118,12 +1310,15 @@ const myDetail = [
valueNm: 'eqpmGrpId',
disabled: false,
cols: 3,
class: 'py-2',
class: 'py-3 pr-3',
list: 'eqpmGrpList',
itemText: 'text',
itemValue: 'value',
required: true,
readonly: true,
labelCols: 12,
textCols: 12,
iconShow: true
},
{
type: 'SelectBox',
@ -1131,11 +1326,14 @@ const myDetail = [
valueNm: 'upTotMeth',
disabled: false,
cols: 3,
class: 'py-2',
class: 'pa-3',
list: 'upTotMethList',
itemText: 'commCdNm',
itemValue: 'commCd',
required: true,
labelCols: 12,
textCols: 12,
iconShow: true
},
{
type: 'SelectBox',
@ -1143,19 +1341,25 @@ const myDetail = [
valueNm: 'unit',
disabled: false,
cols: 3,
class: 'py-2',
class: 'pa-3',
list: 'unitList',
itemText: 'commCdNm',
itemValue: 'commCd',
// required: true,
labelCols: 12,
textCols: 12,
iconShow: true
},
{
type: 'InputText',
label: '정렬순번',
valueNm: 'sortSeq',
cols: 3,
class: 'py-2',
class: 'pa-3 pr-2',
// required: true,
labelCols: 12,
textCols: 12,
iconShow: true
},
// {
// // 공백 처리
@ -1191,17 +1395,20 @@ const myDetail = [
valueNm: 'calcProc', // textField 바인딩을 위해 필요
valueNm2: 'argCnt',
cols: 3,
class: 'py-2',
class: 'py-3 pr-3',
required: true,
openMode: 'G',
disabled: false,
modalTitle: '계산코드',
labelCols: 12,
textCols: 12,
iconShow: true
},
{
// 공백 처리
type: 'Label',
cols: 9,
class: 'py-2',
class: 'py-3',
// label: "* '주의기준값' 또는 '경고기준값' 중 하나는 필수로 입력해 주세요.",
disabled: false,
},
@ -1210,9 +1417,10 @@ const myDetail = [
label: '계산설명',
valueNm: 'calcDesc',
cols: 12,
labelCols: 1,
textCols: 11,
class: 'py-2',
labelCols: 12,
textCols: 12,
class: 'py-3',
iconShow: true
// required: true,
},
{
@ -1227,7 +1435,7 @@ const myDetail = [
// gridBindingList: ['pysclQtyId1','pysclQtyNm1'], // page의 grid 컬럼
// popupBindingList: ['pysclQtyId','pysclQtyNm'], // popup의 grid 컬럼
cols: 3,
class: 'py-2',
class: 'py-3 pr-3',
required: true,
openMode: 'ALL',
disabled: false,
@ -1235,6 +1443,9 @@ const myDetail = [
eqpmGrpId: '',
closeBtnFg: true,
selectBoxReadonly: true,
labelCols: 12,
textCols: 12,
iconShow: true
},
{
type: 'EgrpPysclQtyPop',
@ -1248,7 +1459,7 @@ const myDetail = [
// gridBindingList: ['pysclQtyId2','pysclQtyNm2'],
// popupBindingList: ['pysclQtyId','pysclQtyNm'],
cols: 3,
class: 'py-2',
class: 'pa-3',
// required: true,
openMode: 'ALL',
disabled: false,
@ -1256,6 +1467,9 @@ const myDetail = [
eqpmGrpId: '',
closeBtnFg: true,
selectBoxReadonly: true,
labelCols: 12,
textCols: 12,
iconShow: true
},
{
type: 'EgrpPysclQtyPop',
@ -1269,7 +1483,7 @@ const myDetail = [
// gridBindingList: ['pysclQtyId3','pysclQtyNm3'],
// popupBindingList: ['pysclQtyId','pysclQtyNm'],
cols: 3,
class: 'py-2',
class: 'pa-3',
// required: true,
openMode: 'ALL',
disabled: false,
@ -1277,6 +1491,9 @@ const myDetail = [
eqpmGrpId: '',
closeBtnFg: true,
selectBoxReadonly: true,
labelCols: 12,
textCols: 12,
iconShow: true
},
{
type: 'EgrpPysclQtyPop',
@ -1290,7 +1507,7 @@ const myDetail = [
// gridBindingList: ['pysclQtyId4','pysclQtyNm4'],
// popupBindingList: ['pysclQtyId','pysclQtyNm'],
cols: 3,
class: 'py-2',
class: 'py-3 pl-3',
// required: true,
openMode: 'ALL',
disabled: false,
@ -1298,6 +1515,9 @@ const myDetail = [
eqpmGrpId: '',
closeBtnFg: true,
selectBoxReadonly: true,
labelCols: 12,
textCols: 12,
iconShow: true
},
{
@ -1305,34 +1525,46 @@ const myDetail = [
label: '카테고리1',
valueNm: 'ctgr1',
cols: 3,
class: 'py-2',
class: 'py-3 pr-3',
disabled: false,
labelCols: 12,
textCols: 12,
iconShow: true
},
{
type: 'InputText',
label: '카테고리2',
valueNm: 'ctgr2',
cols: 3,
class: 'py-2',
class: 'pa-3',
disabled: false,
labelCols: 12,
textCols: 12,
iconShow: true
},
{
type: 'InputText',
label: '주의기준값',
valueNm: 'careStndVal',
cols: 3,
class: 'py-2',
class: 'pa-3',
required: true,
inputType: 'number',
labelCols: 12,
textCols: 12,
iconShow: true
},
{
type: 'InputText',
label: '경고기준값',
valueNm: 'warnStndVal',
cols: 3,
class: 'py-2',
class: 'py-3 pl-3',
required: true,
inputType: 'number',
labelCols: 12,
textCols: 12,
iconShow: true
},
// {
// // 공백 처리
@ -1355,23 +1587,28 @@ const myDetail = [
label: '가이드방법',
valueNm: 'gdMeth',
cols: 12,
labelCols: 1,
textCols: 11,
class: 'py-2',
labelCols: 12,
textCols: 12,
class: 'py-3',
required: true,
iconShow: true
},
{
type: 'InputText',
label: '알람메세지',
valueNm: 'alrmMsg',
cols: 12,
labelCols: 1,
textCols: 11,
class: 'py-2',
labelCols: 12,
textCols: 12,
class: 'py-3',
required: true,
iconShow: true
},
];
</script>
<style lang="scss">
@import '@/assets/scss/common.scss';
<style lang="scss" scoped>
.searchFilter {
border-radius: 6px;
box-shadow: none;
}
</style>

View File

@ -3,241 +3,130 @@
<v-row ref="searchFilter">
<v-col :cols="12">
<v-card class="searchFilter">
<v-row align="center" no-gutters>
<v-row align="end" no-gutters>
<v-col :cols="3">
<component
:is="'SelectBox'"
ref="SelectBox1"
:propsValue="selectValue01"
:itemList="selectValueList01"
:label="'설비종류'"
@update:propsValue="selectValue01 = $event"
/>
<component :is="'SelectBox'" ref="SelectBox1" :propsValue="selectValue01"
:itemList="selectValueList01" :label="'설비종류'"
@update:propsValue="selectValue01 = $event" :customClass="'select-large'"
:labelCols="12" :iconShow="true" :textCols="12" />
</v-col>
<v-col :cols="3">
<component
:is="'SelectBox'"
ref="SelectBox2"
:propsValue="selectValue02"
:itemList="selectValueList02"
:label="'설비그룹'"
@update:propsValue="selectValue02 = $event"
/>
<component :is="'SelectBox'" ref="SelectBox2" :propsValue="selectValue02"
:itemList="selectValueList02" :label="'설비그룹'"
@update:propsValue="selectValue02 = $event" :customClass="'select-large'"
:labelCols="12" :iconShow="true" :textCols="12" />
</v-col>
<v-col :cols="3">
<component
:is="'SelectBox'"
ref="SelectBox3"
:propsValue="selectValue03"
:itemList="selectValueList03"
:label="'가이드지표'"
@update:propsValue="selectValue03 = $event"
/>
<component :is="'SelectBox'" ref="SelectBox3" :propsValue="selectValue03"
:itemList="selectValueList03" :label="'가이드지표'"
@update:propsValue="selectValue03 = $event" :customClass="'select-large'"
:labelCols="12" :iconShow="true" :textCols="12" />
</v-col>
<v-col :cols="3" class="text-right">
<BtnSearch @click="search" />
<BtnSearch @click="search" size="large" />
</v-col>
</v-row>
</v-card>
</v-col>
</v-row>
<v-row ref="contents">
<v-row ref="contents" class="mt-4">
<v-col :cols="12" style="height: 100%">
<!-- <v-card class="py-5"> -->
<v-row style="height: 50%">
<v-col :cols="12" style="height: 100%">
<v-card class="pb-5">
<div class="d-flex align-center justify-space-between pa-4">
<v-card-title class="pa-0 custom-title-4"
>가이드 정보</v-card-title
>
</div>
<v-row
:cols="12"
class="d-flex align-center justify-space-between pa-3"
>
<!-- 가이드 설비그룹 라인 시작 -->
<v-col :cols="3">
<InputText
:parentPrgmId="myPrgmId"
:labelCols="4"
:textCols="8"
:label="'가이드 ID'"
:valueNm="'gdIdxId'"
:readonly="readonlyFg"
/>
</v-col>
<v-col :cols="3">
<InputText
:parentPrgmId="myPrgmId"
:labelCols="0"
:textCols="4"
:valueNm="'gdIdxNm'"
:readonly="readonlyFg"
/>
</v-col>
<v-col :cols="3">
<InputText
:parentPrgmId="myPrgmId"
:labelCols="4"
:textCols="8"
:label="'설비그룹'"
:valueNm="'eqpmGrpNm'"
:readonly="readonlyFg"
/>
</v-col>
<v-col :cols="3"> </v-col>
<!-- 가이드 설비그룹 라인 -->
<!-- 물리량 라인 시작 -->
<v-col :cols="3">
<InputText
:parentPrgmId="myPrgmId"
:labelCols="4"
:textCols="8"
:label="'물리량1'"
:valueNm="'pysclQtyCdNm1'"
:readonly="readonlyFg"
/>
</v-col>
<v-col :cols="3">
<InputText
:parentPrgmId="myPrgmId"
:labelCols="4"
:textCols="8"
:label="'물리량2'"
:valueNm="'pysclQtyCdNm2'"
:readonly="readonlyFg"
/>
</v-col>
<v-col :cols="3">
<InputText
:parentPrgmId="myPrgmId"
:labelCols="4"
:textCols="8"
:label="'물리량3'"
:valueNm="'pysclQtyCdNm3'"
:readonly="readonlyFg"
/>
</v-col>
<v-col :cols="3">
<InputText
:parentPrgmId="myPrgmId"
:labelCols="4"
:textCols="8"
:label="'물리량4'"
:valueNm="'pysclQtyCdNm4'"
:readonly="readonlyFg"
/>
</v-col>
<!-- 물리량 라인 -->
<!-- 카테고리 라인 시작 -->
<v-col :cols="3">
<InputText
:parentPrgmId="myPrgmId"
:labelCols="4"
:textCols="8"
:label="'카테고리1'"
:valueNm="'ctgr1'"
:readonly="readonlyFg"
/>
</v-col>
<v-col :cols="3">
<InputText
:parentPrgmId="myPrgmId"
:labelCols="4"
:textCols="8"
:label="'카테고리2'"
:valueNm="'ctgr2'"
:readonly="readonlyFg"
/>
</v-col>
<v-col :cols="3">
<InputText
:parentPrgmId="myPrgmId"
:labelCols="4"
:textCols="8"
:label="'주의기준값'"
:valueNm="'careStndVal'"
:readonly="readonlyFg"
/>
</v-col>
<v-col :cols="3">
<InputText
:parentPrgmId="myPrgmId"
:labelCols="4"
:textCols="8"
:label="'경고기준값'"
:valueNm="'warnStndVal'"
:readonly="readonlyFg"
/>
</v-col>
<!-- 카테고리 기준값 라인 -->
<!-- 알람메세지 라인 시작 -->
<v-col :cols="12">
<InputText
:parentPrgmId="myPrgmId"
:labelCols="1"
:textCols="11"
:label="'알람메세지'"
:valueNm="'alrmMsg'"
:readonly="readonlyFg"
/>
</v-col>
<!-- 알람메세지 라인 -->
<!-- 계산코드 라인 시작 -->
<v-col :cols="3">
<InputText
:parentPrgmId="myPrgmId"
:labelCols="4"
:textCols="8"
:label="'계산코드'"
:valueNm="'calcProc'"
:readonly="readonlyFg"
/>
</v-col>
<v-col :cols="3"> </v-col>
<v-col :cols="3"> </v-col>
<v-col :cols="3"> </v-col>
<!-- 계산코드 라인 -->
<!-- 계산설명 라인 시작 -->
<v-col :cols="12">
<InputText
:parentPrgmId="myPrgmId"
:labelCols="1"
:textCols="11"
:label="'계산설명'"
:valueNm="'calcDesc'"
:readonly="readonlyFg"
/>
</v-col>
<!-- 계산설명 라인 -->
</v-row>
</v-card>
</v-col>
</v-row>
<v-card style="height: 60%">
<div class="d-flex align-center justify-space-between pa-4">
<v-card-title class="pa-0 custom-title-4">가이드 정보</v-card-title>
</div>
<div class="d-flex align-end justify-space-between px-4 py-2">
<v-row :cols="12" class="align-end">
<!-- 가이드 설비그룹 라인 시작 -->
<v-col :cols="3" class="pa-2">
<InputText :parentPrgmId="myPrgmId" :labelCols="12" :textCols="12" :label="'가이드 ID'"
:valueNm="'gdIdxId'" :readonly="readonlyFg" :iconShow="true" />
</v-col>
<v-col :cols="3" class="pa-2">
<InputText :parentPrgmId="myPrgmId" :labelCols="12" :textCols="12" :label="''"
:valueNm="'gdIdxNm'" :readonly="readonlyFg" :iconShow="true" />
</v-col>
<v-col :cols="3" class="pa-2">
<InputText :parentPrgmId="myPrgmId" :labelCols="12" :textCols="12" :label="'설비그룹'"
:valueNm="'eqpmGrpNm'" :readonly="readonlyFg" :iconShow="true" />
</v-col>
<v-col :cols="3"> </v-col>
<!-- 가이드 설비그룹 라인 -->
<!-- 물리량 라인 시작 -->
<v-col :cols="3" class="pa-2">
<InputText :parentPrgmId="myPrgmId" :labelCols="12" :textCols="12" :label="'물리량1'"
:valueNm="'pysclQtyCdNm1'" :readonly="readonlyFg" :iconShow="true" />
</v-col>
<v-col :cols="3" class="pa-2">
<InputText :parentPrgmId="myPrgmId" :labelCols="12" :textCols="12" :label="'물리량2'"
:valueNm="'pysclQtyCdNm2'" :readonly="readonlyFg" :iconShow="true" />
</v-col>
<v-col :cols="3" class="pa-2">
<InputText :parentPrgmId="myPrgmId" :labelCols="12" :textCols="12" :label="'물리량3'"
:valueNm="'pysclQtyCdNm3'" :readonly="readonlyFg" :iconShow="true" />
</v-col>
<v-col :cols="3" class="pa-2">
<InputText :parentPrgmId="myPrgmId" :labelCols="12" :textCols="12" :label="'물리량4'"
:valueNm="'pysclQtyCdNm4'" :readonly="readonlyFg" :iconShow="true" />
</v-col>
<!-- 물리량 라인 -->
<!-- 카테고리 라인 시작 -->
<v-col :cols="3" class="pa-2">
<InputText :parentPrgmId="myPrgmId" :labelCols="12" :textCols="12" :label="'카테고리1'"
:valueNm="'ctgr1'" :readonly="readonlyFg" :iconShow="true" />
</v-col>
<v-col :cols="3" class="pa-2">
<InputText :parentPrgmId="myPrgmId" :labelCols="12" :textCols="12" :label="'카테고리2'"
:valueNm="'ctgr2'" :readonly="readonlyFg" :iconShow="true" />
</v-col>
<v-col :cols="3" class="pa-2">
<InputText :parentPrgmId="myPrgmId" :labelCols="12" :textCols="12" :label="'주의기준값'"
:valueNm="'careStndVal'" :readonly="readonlyFg" :iconShow="true" />
</v-col>
<v-col :cols="3" class="pa-2">
<InputText :parentPrgmId="myPrgmId" :labelCols="12" :textCols="12" :label="'경고기준값'"
:valueNm="'warnStndVal'" :readonly="readonlyFg" :iconShow="true" />
</v-col>
<!-- 카테고리 기준값 라인 -->
<!-- 알람메세지 라인 시작 -->
<v-col :cols="12" class="pa-2">
<InputText :parentPrgmId="myPrgmId" :labelCols="12" :textCols="12" :label="'알람메세지'"
:valueNm="'alrmMsg'" :readonly="readonlyFg" :iconShow="true" />
</v-col>
<!-- 알람메세지 라인 -->
<!-- 계산코드 라인 시작 -->
<v-col :cols="3" class="pa-2">
<InputText :parentPrgmId="myPrgmId" :labelCols="12" :textCols="12" :label="'계산코드'"
:valueNm="'calcProc'" :readonly="readonlyFg" :iconShow="true" />
</v-col>
<v-col :cols="3"> </v-col>
<v-col :cols="3"> </v-col>
<v-col :cols="3"> </v-col>
<!-- 계산코드 라인 -->
<!-- 계산설명 라인 시작 -->
<v-col :cols="12" class="pa-2">
<InputText :parentPrgmId="myPrgmId" :labelCols="12" :textCols="12" :label="'계산설명'"
:valueNm="'calcDesc'" :readonly="readonlyFg" :iconShow="true" />
</v-col>
<!-- 계산설명 라인 -->
</v-row>
</div>
<v-row style="height: 50%">
</v-card>
<v-row style="height: 40%" class="mt-4">
<v-col :cols="6" style="height: 100%">
<v-card class="pb-5">
<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"
/>
<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 class="h100 px-4" style="height:calc(100% - 70px)">
<div ref="gridParent" class="w100 h100">
<component
:ref="gridName"
:is="loadGrid ? 'Grid' : null"
:gridName="gridName"
:parentPrgmId="myPrgmId"
@getRowsData="getRowData"
/>
<component :ref="gridName" :is="loadGrid ? 'Grid' : null" :gridName="gridName"
:parentPrgmId="myPrgmId" @getRowsData="getRowData"
:dataPath="dataPathExample" />
</div>
</div>
</v-card>
@ -245,24 +134,18 @@
<v-col :cols="6" style="height: 100%">
<v-card class="pb-5">
<div class="d-flex align-center justify-space-between pa-4">
<v-card-title class="pa-0 custom-title-4"
>설비가이드 기준 정보</v-card-title
>
<v-card-title class="pa-0 custom-title-4">설비가이드 기준 정보</v-card-title>
</div>
<v-row
:cols="12"
class="d-flex align-center justify-space-between pa-3"
>
<div class="d-flex align-center justify-space-between pa-4">
<v-row :cols="12">
<!-- 가이드 설비그룹 라인 시작 -->
<v-col :cols="12">
<component
:is="'Form'"
:parentPrgmId="myPrgmId"
:detailList="detailList"
@gridEditingFinish="gridEditingFinish"
/>
</v-col>
</v-row>
<v-col :cols="12">
<component :is="'Form'" :parentPrgmId="myPrgmId" :detailList="detailList"
@gridEditingFinish="gridEditingFinish" />
</v-col>
</v-row>
</div>
</v-card>
</v-col>
</v-row>
@ -318,7 +201,7 @@ export default {
readonlyFg: true,
initedFlag: false,
gridName: 'rowGrid',
loadGrid: false,
loadGrid: true,
detailList: myDetail,
selectValue01: null,
selectValueList01: [],
@ -326,6 +209,62 @@ export default {
selectValueList02: [],
selectValue03: null,
selectValueList03: [],
dataPathExample: {
"rowGrid": {
data: [
{
eqpmId: 'EQ001',
originEqpmId: 'ORIG001',
eqpmNm: '냉각기 A',
careStndVal: 75,
warnStndVal: 90,
},
{
eqpmId: 'EQ002',
originEqpmId: 'ORIG002',
eqpmNm: '펌프 B',
careStndVal: 60,
warnStndVal: 80,
},
{
eqpmId: 'EQ003',
originEqpmId: 'ORIG003',
eqpmNm: '모터 C',
careStndVal: 50,
warnStndVal: 70,
},
{
eqpmId: 'EQ004',
originEqpmId: 'ORIG004',
eqpmNm: '밸브 D',
careStndVal: 65,
warnStndVal: 85,
},
{
eqpmId: 'EQ005',
originEqpmId: 'ORIG005',
eqpmNm: '컨트롤러 E',
careStndVal: 55,
warnStndVal: 75,
},
],
column: [
{ header: '설비', name: 'eqpmId', align: 'left' },
{
header: 'origin설비',
name: 'originEqpmId',
align: 'center',
hidden: true,
},
{ header: '설비명', name: 'eqpmNm', align: 'left' },
{ header: '주의기준', name: 'careStndVal', align: 'right' },
{ header: '심각기준', name: 'warnStndVal', align: 'right' },
]
}
}
};
},
computed: {
@ -572,29 +511,69 @@ export default {
this.loadGrid = false;
let res = [];
if (this.selectValue01 && this.selectValue02 && this.selectValue03) {
res = await this.postApiReturn({
apiKey: 'selectEqpmGdDetl',
resKey: 'eqpmGdDetlData',
sendParam: {
gdIdxId: this.selectValue03,
},
});
}
// if (this.selectValue01 && this.selectValue02 && this.selectValue03) {
// res = await this.postApiReturn({
// apiKey: 'selectEqpmGdDetl',
// resKey: 'eqpmGdDetlData',
// sendParam: {
// gdIdxId: this.selectValue03,
// },
// });
// }
// grid에서 eqpmId를 기억해서 popup에서 중복되는 값을 제거하는데 사용하기위해 저장 - 시작
let eqpmIdList = res.map(item => {
return item.eqpmId;
});
this.setPageData({ nowGridEqpmIdList: eqpmIdList });
// grid에서 eqpmId를 기억해서 popup에서 중복되는 값을 제거하는데 사용하기위해 저장 - 끝
const newRes = res.map(item => {
const newObj = {
...item,
rowStat: null,
};
return newObj;
});
// // grid에서 eqpmId를 기억해서 popup에서 중복되는 값을 제거하는데 사용하기위해 저장 - 시작
// let eqpmIdList = res.map(item => {
// return item.eqpmId;
// });
// this.setPageData({ nowGridEqpmIdList: eqpmIdList });
// // grid에서 eqpmId를 기억해서 popup에서 중복되는 값을 제거하는데 사용하기위해 저장 - 끝
// const newRes = res.map(item => {
// const newObj = {
// ...item,
// rowStat: null,
// };
// return newObj;
// });
const newRes = [
{
eqpmId: 'EQ001',
originEqpmId: 'ORIG001',
eqpmNm: '냉각기 A',
careStndVal: 75,
warnStndVal: 90,
},
{
eqpmId: 'EQ002',
originEqpmId: 'ORIG002',
eqpmNm: '펌프 B',
careStndVal: 60,
warnStndVal: 80,
},
{
eqpmId: 'EQ003',
originEqpmId: 'ORIG003',
eqpmNm: '모터 C',
careStndVal: 50,
warnStndVal: 70,
},
{
eqpmId: 'EQ004',
originEqpmId: 'ORIG004',
eqpmNm: '밸브 D',
careStndVal: 65,
warnStndVal: 85,
},
{
eqpmId: 'EQ005',
originEqpmId: 'ORIG005',
eqpmNm: '컨트롤러 E',
careStndVal: 55,
warnStndVal: 75,
},
]
this.setGridData({
gridKey: this.gridName,
value: newRes,
@ -607,16 +586,16 @@ export default {
//rowKey: 0,
rowKey:
this.pageData.rowGridSelectKey == '' ||
this.pageData.rowGridSelectKey == null
this.pageData.rowGridSelectKey == null
? 0
: this.pageData.rowGridSelectKey ==
this.$refs[this.gridName].getData().length - 1
? this.pageData.rowGridSelectKey
: 0,
this.$refs[this.gridName].getData().length - 1
? this.pageData.rowGridSelectKey
: 0,
columnNmae: 'eqpmId',
setScroll: true,
});
} catch (error) {}
} catch (error) { }
} else {
this.detailDataInit();
}
@ -820,19 +799,25 @@ const myDetail = [
valueNm: 'eqpmId',
valueNm2: 'eqpmNm',
cols: 6,
class: 'py-2',
class: 'py-2 pb-3 pr-2',
required: true,
openMode: 'GRP',
labelCols: 12,
textCols: 12,
iconShow: true
},
{
type: 'InputText',
// label: '검침 대상 명',
label: '검침 대상 명',
valueNm: 'eqpmNm',
readonly: true,
// disabled: true,
cols: 6,
class: 'py-2',
class: 'py-2 pl-2',
required: true,
labelCols: 12,
textCols: 12,
iconShow: true
},
{
type: 'InputText',
@ -840,15 +825,18 @@ const myDetail = [
valueNm: 'careStndVal',
disabled: false,
cols: 6,
class: 'py-2',
class: 'py-3 pr-3',
inputType: 'number',
required: true,
labelCols: 12,
textCols: 12,
iconShow: true
},
{
// 공백 처리
type: 'Label',
cols: 6,
class: 'py-2',
class: 'py-3',
disabled: false,
},
{
@ -857,27 +845,27 @@ const myDetail = [
valueNm: 'warnStndVal',
disabled: false,
cols: 6,
class: 'py-2',
class: 'py-3 pr-3',
inputType: 'number',
required: true,
labelCols: 12,
textCols: 12,
iconShow: true
},
{
// 공백 처리
type: 'Label',
cols: 6,
class: 'py-2',
class: 'py-3',
disabled: false,
},
{
// 공백 처리
type: 'Label',
cols: 12,
class: 'py-2',
class: 'py-3',
label: "* '주의기준값' 또는 '경고기준값' 중 하나는 필수로 입력해 주세요.",
disabled: false,
},
];
</script>
<style lang="scss">
@import '@/assets/scss/common.scss';
</style>

View File

@ -540,6 +540,3 @@ function numberFormatter({ value }) {
return Utility.setFormatIntDecimal(value, 2);
}
</script>
<style lang="scss">
@import '@/assets/scss/common.scss';
</style>

View File

@ -5,13 +5,13 @@
<v-card class="searchFilter">
<v-row align="center" no-gutters>
<v-col :cols="4">
<component :is="'SelectSysDiv'" :parentPrgmId="myPrgmId" />
<component :is="'SelectSysDiv'" :labelCols="12" :textCols="12" :parentPrgmId="myPrgmId" iconShow="true" :customClass="'select-large'" />
</v-col>
<v-col :cols="4">
<component :is="'SelectUseFg'" :parentPrgmId="myPrgmId" />
<component :is="'SelectUseFg'" :parentPrgmId="myPrgmId" :labelCols="12" :textCols="12" iconShow="true" :customClass="'select-large'" />
</v-col>
<v-col :cols="4" class="text-right">
<BtnSearch @click="search" />
<BtnSearch @click="search" size="large" />
</v-col>
</v-row>
</v-card>
@ -21,15 +21,17 @@
<v-col :cols="5" class="h100">
<v-card class="pb-5 h100">
<v-card-title>메뉴 리스트</v-card-title>
<Buttons :parentPrgmId="myPrgmId" :bindingData="gridNameTree" :detailList="detailList"
:btnActionsFnc="btnActions" />
<div class="px-5 h100">
<div ref="treeGridParent" class="w100 h100">
<component
<!-- <component
ref="myGrid"
:is="loadTree ? 'Grid' : null"
:gridName="gridNameTree"
:parentPrgmId="myPrgmId"
@getRowsData="getRowData"
/>
/> -->
</div>
</div>
</v-card>
@ -38,7 +40,7 @@
<v-card class="py-5 h100">
<v-card-title class="d-flex justify-between">
<span class="tit ft-size_20 ft-weight_600">메뉴 상세</span>
<div>
<!-- <div>
<v-btn
class="v-btn-radius__20 v-btn-bg__white-blue mr-1"
@click="addRow"
@ -63,7 +65,7 @@
:parentPrgmId="myPrgmId"
:gridName="gridNameTree"
/>
</div>
</div> -->
</v-card-title>
<v-card-actions>
<v-row>
@ -545,7 +547,7 @@ export default {
const defaultData = {
/* 검색옵션 */
comId: this.comId,
comId: '',
sysDivCd: '',
sysDivCdList: [],
useFg: '',
@ -586,6 +588,3 @@ const defaultData = {
},
};
</script>
<style lang="scss">
@import '@/assets/scss/common.scss';
</style>

View File

@ -0,0 +1,15 @@
<template>
<div>
<h2>Test</h2>
<ColumnChart/>
</div>
</template>
<script>
import ColumnChart from '~/components/common/ColumnChart';
export default{
components:{
ColumnChart
}
}
</script>

View File

@ -1,14 +1,18 @@
<template>
<div class="l-layout">
<PageTitle text="측정 위치 데이터 조회" />
<v-row ref="searchFilter">
<v-col :cols="12">
<v-card class="searchFilter">
<v-row align="center" no-gutters>
<v-row align="end" no-gutters>
<v-col :cols="2">
<component
:is="'SelectBlocMstr'"
ref="SelectBlocMstr"
:parentPrgmId="myPrgmId"
:textCols="12"
customClass="select-large"
/>
</v-col>
<!-- <v-col :cols="2">
@ -35,6 +39,7 @@
:is="'EvtObjPop'"
:parentPrgmId="myPrgmId"
:item="evtObjPopItem"
customClass="select-large"
/>
</v-col>
<v-col :cols="4">
@ -42,18 +47,18 @@
:is="'Datepicker'"
:parentPrgmId="myPrgmId"
:label="'조회기간'"
:labelCols="2"
:textCols="12"
/>
</v-col>
<v-col :cols="3" class="text-right">
<!-- 조회버튼 -->
<BtnSearch @click="search" />
<BtnExcelDownload
style="vertical-align: middle;"
class="d-inline-flex"
<v-col :cols="3" class="d-flex align-end justify-end text-right">
<BtnExcelDownload
class="mr-1"
:parentPrgmId="myPrgmId"
:gridName="gridName"
type="primary"
size="large"
/>
<BtnSearch @click="search" size="large" />
</v-col>
</v-row>
</v-card>
@ -68,8 +73,10 @@
:is="loadGrid ? 'Grid' : null"
:gridName="gridName"
:parentPrgmId="myPrgmId"
:dataPath="dataPathMock"
/>
</div>
</v-card>
</v-col>
</v-row>
@ -92,6 +99,7 @@ import BtnExcelDownload from '~/components/common/button/BtnExcelDownload';
import DateUtility from '~/plugins/dateUtility';
// import Search from "~/components/common/search";
import EvtObjPop from '~/components/common/modal/EvtObjPop';
import PageTitle from "~/components/common/PageTitle";
let myTitle;
// const myPrgmId = "PRG0052";
@ -124,6 +132,7 @@ export default {
PastRsltDataReadPop,
PastRsltDataReadTagPop,
EvtObjPop,
PageTitle,
},
data() {
return {
@ -137,13 +146,61 @@ export default {
modalTitle: 'TAG 리스트',
valueNm: 'tagId',
valueNm2: 'tagNm',
iconShow: true,
disabled: false,
labelCols: 2,
textCols: 9,
labelCols: 12,
textCols: 12,
class: 'py-2',
required: false,
formFg: false,
},
dataPathMock: {
"rowGrid": {
column: [
{
header: 'TAG ID',
name: 'tagId',
minWidth: 500,
},
{
header: 'TAG명',
name: 'tagNm',
},
{
header: '대상일시',
name: 'readDttm',
align:"center",
width: 200,
},
{
header: '값',
name: 'readVal',
width: 100,
align:"center"
},
{
header: '취득일시',
name: 'regDttm',
width: 200,
align:"center"
},
{
header: '적재일시',
name: 'procDttm',
width: 200,
align:"center"
},
],
data: dataPathDataExample,
defaultRow: dataPathDataExample,
option: {
pageOptions: {
useClient: true,
perPage: 10,
},
}
}
},
};
},
computed: {
@ -265,6 +322,7 @@ export default {
gridKey: this.gridName,
value: Object.assign(Utility.defaultGridOption(gridHeight), myOptions),
});
let myColumns = [
{
header: 'TAG ID',
@ -511,7 +569,13 @@ const defaultData = {
},
},
};
import { getPathDataExample } from '@/const/const'
const dataPathDataExample = getPathDataExample({
"tagId": "ICHEON.ELEC.EQID101.VCB_111A_ACC_WH_PV",
"tagNm": "ICHEON VCB_111A 적산 전력",
"readDttm": "2023-01-10 00:00:00",
"readVal": "581.27",
"regDttm": "2023-01-09 15:03:08",
"procDttm": "2023-01-10 00:03:09",
});
</script>
<style lang="scss">
@import '@/assets/scss/common.scss';
</style>

View File

@ -3,7 +3,7 @@
<v-row ref="searchFilter">
<v-col :cols="12">
<v-card class="searchFilter">
<v-row align="center" no-gutters>
<v-row no-gutters>
<v-col :cols="3">
<component
:is="'selectCodeList'"
@ -12,6 +12,8 @@
dataKey="readObjKind"
:addAll="true"
:sendParam="{ commGrpCd: 'CM_MTTTP', useFg: '1' }"
:iconShow="true"
customClass="select-large"
/>
</v-col>
<v-col :cols="3">
@ -22,18 +24,22 @@
dataKey="useFg"
:sendParam="{ commGrpCd: 'CO_USEFG', useFg: '1' }"
:addAll="true"
:iconShow="true"
customClass="select-large"
/>
</v-col>
<v-col :cols="3">
<v-col :cols="3">
<InputText
:parentPrgmId="myPrgmId"
label="검침대상명"
valueNm="readObjNm"
:searchOption="true"
:iconShow="true"
customClass="input-large"
/>
</v-col>
<v-col :cols="3" class="text-right">
<BtnSearch @click="search" />
<v-col :cols="3" class="d-flex align-end justify-end text-right">
<BtnSearch @click="search" size="large" />
</v-col>
</v-row>
</v-card>
@ -43,7 +49,7 @@
<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"
<v-card-title class="pa-0 custom-title-4-new"
>검침 대상 정보</v-card-title
>
<Buttons
@ -63,6 +69,7 @@
@getRowsData="getRowData"
@sendSelectedRowStatInfo="getSelectedRowStatInfo"
:selectedRowDataWatchFlag="true"
:dataPath="dataPathMock"
/>
</div>
</div>
@ -70,11 +77,11 @@
</v-col>
<v-col :cols="7" class="h100">
<v-card class="pb-5">
<v-card-title class="custom-title-4" style="min-height:76px;"
<v-card-title class="custom-title-4-new" style="min-height:76px;"
>검침대상 상세
</v-card-title>
<div class="px-5" style="height:calc(100% - 76px)">
<v-tabs v-model="tab">
<v-tabs v-model="tab" >
<v-tab
v-for="item in items"
:key="item.id"
@ -181,8 +188,26 @@ export default {
return {
myPrgmId: myPrgmId,
gridName: 'rowGrid',
loadGrid: false,
loadGrid: true,
tab: null,
dataPathMock: {
"rowGrid": {
column: [
{ header: '검침 대상 ID', name: 'readObjId', align: 'left' },
{ header: '검침 대상 명', name: 'readObjNm', align: 'left' },
{ header: '검침 대상 유형', name: 'readObjKind', align: 'left' },
{ header: '그룹', name: 'grpCd', align: 'left' },
{ header: 'TJ 환산계수', name: 'tjCvrtCoef', align: 'right' },
{ header: 'TOE 환산계수', name: 'toeCvrtCoef', align: 'right' },
{ header: 'CO2 환산계수', name: 'co2CvrtCoef', align: 'right' },
{ header: '단위', name: 'unitCd', align: 'left' },
{ header: '사용 여부', name: 'useFg', align: 'center' },
],
data: dataPathDataExample,
defaultRow: dataPathDataExample,
option: {}
}
},
items: [
{
name: '검침 대상 정보',
@ -641,10 +666,22 @@ const defaultData = {
readObjKind: '',
readObjKindList: [],
readObjKindDetail: '',
readObjKindDetailList: [],
readObjKindDetailList: [
{ commCd: 'K01', commCdNm: '건물' },
       { commCd: 'K02', commCdNm: '공장' },
        { commCd: 'K03', commCdNm: '학교' },
],
readObjGrp: '',
readObjGrpList: [],
unitCdList: [],
readObjGrpList: [
{ commCd: 'G01', commCdNm: '그룹 A' },
        { commCd: 'G02', commCdNm: '그룹 B' },
        { commCd: 'G03', commCdNm: '그룹 C' },
],
unitCdList: [
{ commCd: 'U01', commCdNm: 'kWh' },
        { commCd: 'U02', commCdNm: 'MJ' },
        { commCd: 'U03', commCdNm: 'TOE' },
],
useFg: '1',
useFgList: [],
commGrpCd: '',
@ -687,8 +724,8 @@ const defaultData = {
},
buttonAuth: {
add: true,
remove: true,
save: true,
remove: true,
excel: false,
},
},
@ -722,7 +759,10 @@ const myDetail = [
valueNm: 'readObjId',
readonly: true,
cols: 6,
class: 'py-2',
labelCols: 12,
textCols: 12,
iconShow: true,
class: 'py-2 pr-2',
required: false,
placeholder: '시스템 자동입력',
},
@ -732,8 +772,11 @@ const myDetail = [
valueNm: 'readObjNm',
disabled: false,
cols: 6,
labelCols: 12,
textCols: 12,
class: 'py-2',
required: true,
iconShow: true,
},
{
type: 'SelectBox',
@ -741,10 +784,13 @@ const myDetail = [
valueNm: 'readObjKind',
disabled: false,
cols: 6,
class: 'py-2',
labelCols: 12,
textCols: 12,
class: 'py-2 pr-2',
list: 'readObjKindDetailList',
itemText: 'commCdNm',
itemValue: 'commCd',
iconShow: true,
required: true,
},
{
@ -753,10 +799,13 @@ const myDetail = [
valueNm: 'grpCd',
disabled: false,
cols: 6,
labelCols: 12,
textCols: 12,
class: 'py-2',
list: 'readObjGrpList',
itemText: 'commCdNm',
itemValue: 'commCd',
iconShow: true,
required: true,
},
{
@ -765,7 +814,10 @@ const myDetail = [
valueNm: 'tjCvrtCoef',
disabled: false,
cols: 6,
class: 'py-2',
labelCols: 12,
textCols: 12,
class: 'py-2 pr-2',
iconShow: true,
inputType: 'number',
},
{
@ -774,7 +826,10 @@ const myDetail = [
valueNm: 'toeCvrtCoef',
disabled: false,
cols: 6,
labelCols: 12,
textCols: 12,
class: 'py-2',
iconShow: true,
inputType: 'number',
},
{
@ -783,7 +838,10 @@ const myDetail = [
valueNm: 'co2CvrtCoef',
disabled: false,
cols: 6,
class: 'py-2',
labelCols: 12,
textCols: 12,
class: 'py-2 pr-2',
iconShow: true,
inputType: 'number',
},
{
@ -792,10 +850,13 @@ const myDetail = [
valueNm: 'unitCd',
disabled: false,
cols: 6,
labelCols: 12,
textCols: 12,
class: 'py-2',
list: 'unitCdList',
itemText: 'commCdNm',
itemValue: 'commCd',
iconShow: true,
required: true,
},
{
@ -804,12 +865,48 @@ const myDetail = [
valueNm: 'useFg',
disabled: false,
cols: 6,
class: 'py-2',
labelCols: 12,
textCols: 12,
class: 'py-2 pr-2',
value: { '1': true, '0': false },
iconShow: true,
required: true,
},
];
const dataPathDataExample = [
{
readObjId: 'OBJ001',
readObjNm: '서울 본사',
readObjKind: 'TYPE01',
grpCd: 'GRP01',
tjCvrtCoef: 1.25,
toeCvrtCoef: 0.85,
co2CvrtCoef: 2.1,
unitCd: 'kWh',
useFg: '1',
},
{
readObjId: 'OBJ002',
readObjNm: '부산 지사',
readObjKind: 'TYPE02',
grpCd: 'GRP02',
tjCvrtCoef: 1.10,
toeCvrtCoef: 0.90,
co2CvrtCoef: 1.8,
unitCd: 'MJ',
useFg: '0',
},
{
readObjId: 'OBJ003',
readObjNm: '대전 공장',
readObjKind: 'TYPE03',
grpCd: 'GRP01',
tjCvrtCoef: 1.30,
toeCvrtCoef: 0.95,
co2CvrtCoef: 2.3,
unitCd: 'GJ',
useFg: '1',
}
];
</script>
<style lang="scss">
@import '@/assets/scss/common.scss';
</style>

View File

@ -1,399 +1,445 @@
<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="'SelectBlocMstr'"
ref="SelectBlocMstr"
:parentPrgmId="myPrgmId"
/>
</v-col>
<v-col :cols="3">
<component
:is="'selectCodeList'"
:parentPrgmId="myPrgmId"
:label="'검침대상유형'"
dataKey="commCd"
:sendParam="{ commGrpCd: 'CM_MTTTP', useFg: '1' }"
/>
</v-col>
<div class="l-layout">
<!-- <h2 class="title">
<v-icon small color="primary" class="mr-1">mdi-circle</v-icon>
계량 데이터 마감 관리
</h2> -->
<PageTitle text="계량 데이터 마감 관리" />
<v-col :cols="3">
<component
:is="'SelectMttList'"
ref="SelectMttList"
:parentPrgmId="myPrgmId"
:label="'검침대상'"
dataKey="readObjId"
/>
</v-col>
<v-col :cols="3" class="text-right">
<v-btn :ripple="false" @click="search">조회</v-btn>
<BtnExcelDownload
class="mr-1"
:parentPrgmId="myPrgmId"
:gridName="gridName"
/>
</v-col>
</v-row>
<v-row align="center" no-gutters>
<v-col :cols="3">
<component
ref="fromPicker"
:is="'Datepicker'"
:parentPrgmId="myPrgmId"
:label="'조회기간'"
/>
</v-col>
</v-row>
</v-card>
</v-col>
</v-row>
<v-row ref="contents">
<!-- 일일검침정보 목록-->
<v-col :cols="12" class="h100">
<v-card class="pb-5">
<div class="d-flex align-center justify-space-between pa-5">
<v-card-title class="custom-title-4 pa-0"
>일일검침정보</v-card-title
>
<div class="d-flex align-center">
<v-btn
:ripple="false"
@click="saveReadResultCloseMngMM()"
class="mr-1"
>월마감</v-btn
>
<v-btn :ripple="false" @click="saveReadResultCloseMng('N')"
>일마감</v-btn
>
</div>
</div>
<div class="px-5" style="height:calc(100% - 76px)">
<div ref="gridParent" class="h100 w100">
<component
:is="loadGrid ? 'Grid' : null"
:ref="gridName"
:parentPrgmId="myPrgmId"
:gridName="gridName"
/>
</div>
</div>
</v-card>
</v-col>
</v-row>
</div>
<v-row ref="searchFilter">
<!-- 조회조견 -->
<v-col :cols="12">
<v-card class="searchFilter">
<v-row align="end" no-gutters>
<v-col :cols="2.5">
<component
:is="'SelectBlocMstr'"
ref="SelectBlocMstr"
:parentPrgmId="myPrgmId"
:textCols="12"
customClass="select-large"
/>
</v-col>
<v-col :cols="2.5">
<component
:is="'selectCodeList'"
:parentPrgmId="myPrgmId"
:label="'검침대상유형'"
dataKey="commCd"
:sendParam="{ commGrpCd: 'CM_MTTTP', useFg: '1' }"
customClass="select-large"
/>
</v-col>
<v-col :cols="2.5">
<component
:is="'SelectMttList'"
ref="SelectMttList"
dataKey="readObjId"
:parentPrgmId="myPrgmId"
:label="'검침대상'"
:textCols="12"
customClass="select-large"
/>
</v-col>
<v-col :cols="2.5">
<component
ref="fromPicker"
:is="'Datepicker'"
:parentPrgmId="myPrgmId"
:label="'조회기간'"
/>
</v-col>
<div class="d-flex">
<BtnExcelDownload
class="mr-1"
:parentPrgmId="myPrgmId"
:gridName="gridName"
type="primary"
:size="'large'"
/>
<a-button
type="primary"
class="mr-1"
icon="search"
:ripple="false"
@click="search"
style="height: 40px"
>
조회
</a-button>
</div>
</v-row>
</v-card>
</v-col>
</v-row>
<v-row ref="contents">
<!-- 일일검침정보 목록-->
<v-col :cols="12" class="h100">
<v-card class="pb-5">
<div class="d-flex align-center justify-space-between pa-5">
<v-card-title class="custom-title-4 pa-0">일일검침정보</v-card-title>
<div class="d-flex align-center">
<a-button
:ripple="false"
@click="saveReadResultCloseMngMM()"
type="primary"
class="mr-1"
>월마감</a-button
>
<a-button
type="primary"
:ripple="false"
@click="saveReadResultCloseMng('N')"
>일마감</a-button
>
</div>
</div>
<div class="px-5" style="min-height: calc(100% - 76px)">
<div ref="gridParent" class="h100 w100">
<component
:is="loadGrid ? 'Grid' : null"
:ref="gridName"
:parentPrgmId="myPrgmId"
:gridName="gridName"
:dataPath="dataPathMock"
/>
</div>
</div>
</v-card>
</v-col>
</v-row>
</div>
</template>
<script>
import mixinGlobal from '@/mixin/global.js';
import { resize } from '@/mixin/resize.js';
import { mapState, mapMutations, mapActions } from 'vuex';
import Search from '~/components/common/search';
import Grid from '~/components/common/Grid';
import Utility from '~/plugins/utility';
import SelectBlocMstr from '@/components/common/select/SelectBlocMstr';
import selectCodeList from '@/components/common/select/selectCodeList';
import SelectMttList from '@/components/common/select/SelectMttList';
import Datepicker from '~/components/common/Datepicker';
import BtnExcelDownload from '~/components/common/button/BtnExcelDownload';
import mixinGlobal from "@/mixin/global.js";
import { resize } from "@/mixin/resize.js";
import { mapState, mapMutations, mapActions } from "vuex";
import Search from "~/components/common/search";
import Grid from "~/components/common/Grid";
import Utility from "~/plugins/utility";
import SelectBlocMstr from "@/components/common/select/SelectBlocMstr";
import selectCodeList from "@/components/common/select/selectCodeList";
import SelectMttList from "@/components/common/select/SelectMttList";
import Datepicker from "~/components/common/Datepicker";
import BtnExcelDownload from "~/components/common/button/BtnExcelDownload";
import PageTitle from "~/components/common/PageTitle";
let myTitle;
// const myPrgmId = "PRG0018";
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: {
SelectBlocMstr,
selectCodeList,
SelectMttList,
BtnExcelDownload,
Datepicker,
Search,
Grid,
},
data() {
return {
myPrgmId: myPrgmId,
gridName: 'rowGrid',
loadGrid: false,
};
},
computed: {
...mapState({
isDarkMode: state => state.isDarkMode,
pageData: state => state.pageData[myPrgmId],
}),
chkIsFind() {
// 조회 플래그
return this.pageData.isFind;
},
chkBlocId() {
// 사업장 코드
return this.pageData.blocId;
},
chkCommCd() {
this.setPageData({ sendMttParam: { mttTp: this.pageData.commCd } });
return this.pageData.commCd;
},
chkReadObjId() {
return this.pageData.readObjId;
},
},
watch: {
chkIsFind(val) {
if (val) this.search();
},
chkBlocId() {
this.setPageData({ isFind: true });
},
chkPlcKind() {
this.setPageData({ isFind: true });
},
chkCommCd() {},
async chkReadObjId(val) {
// console.log("sendMttParam",this.pageData.sendMttParam.mttTp);
// if(this.pageData.sendMttParam.mttTp){
// await this.getRowGridData();
// }
this.setPageData({ isFind: true });
},
},
async beforeCreate() {
myPrgmId = this.$route.query.prgmId;
await this.$store.dispatch('chkOpenTabList', {
key: 'create',
prgmId: myPrgmId,
defaultData: defaultData,
});
},
mounted() {
this.init();
},
created() {},
methods: {
...mapMutations({
setPageData: 'setPageData',
setGridData: 'setGridData',
setGridColumn: 'setGridColumn',
setGridOption: 'setGridOption',
}),
...mapActions({
postApi: 'modules/list/postApi',
postUpdateApi: 'modules/list/postUpdateApi',
postApiReturn: 'modules/list/postApiReturn',
setTree: 'modules/list/setTree',
chkOpenTabList: 'chkOpenTabList',
}),
init() {
this.gridInit();
},
gridInit() {
const gridHeight = this.$refs.gridParent.offsetHeight - 30;
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: {
SelectBlocMstr,
selectCodeList,
SelectMttList,
BtnExcelDownload,
Datepicker,
Search,
Grid,
PageTitle,
},
data() {
return {
myPrgmId: myPrgmId,
gridName: "rowGrid",
loadGrid: true,
dataPathMock: {
rowGrid: {
column: [
{ header: "태그", name: "id", headerAlign: "left" },
{ header: "배율", name: "lable", headerAlign: "left" },
{ header: "설비비", name: "type", headerAlign: "left" },
{ header: "설비배분비율", name: "note", headerAlign: "left" },
{ header: "금일데이터", name: "note", headerAlign: "left" },
{ header: "최종마감시각", name: "date", headerAlign: "left" },
],
data: dataPathDataExample,
defaultRow: dataPathDataExample,
option: {},
},
},
};
},
computed: {
...mapState({
isDarkMode: (state) => state.isDarkMode,
pageData: (state) => state.pageData[myPrgmId],
}),
chkIsFind() {
// 조회 플래그
return this.pageData.isFind;
},
chkBlocId() {
// 사업장 코드
return this.pageData.blocId;
},
chkCommCd() {
this.setPageData({ sendMttParam: { mttTp: this.pageData.commCd } });
return this.pageData.commCd;
},
chkReadObjId() {
return this.pageData.readObjId;
},
},
watch: {
chkIsFind(val) {
if (val) this.search();
},
chkBlocId() {
this.setPageData({ isFind: true });
},
chkPlcKind() {
this.setPageData({ isFind: true });
},
chkCommCd() {},
async chkReadObjId(val) {
// console.log("sendMttParam",this.pageData.sendMttParam.mttTp);
// if(this.pageData.sendMttParam.mttTp){
// await this.getRowGridData();
// }
this.setPageData({ isFind: true });
},
},
async beforeCreate() {
myPrgmId = this.$route.query.prgmId;
await this.$store.dispatch("chkOpenTabList", {
key: "create",
prgmId: myPrgmId,
defaultData: defaultData,
});
},
mounted() {
this.init();
},
created() {},
methods: {
...mapMutations({
setPageData: "setPageData",
setGridData: "setGridData",
setGridColumn: "setGridColumn",
setGridOption: "setGridOption",
}),
...mapActions({
postApi: "modules/list/postApi",
postUpdateApi: "modules/list/postUpdateApi",
postApiReturn: "modules/list/postApiReturn",
setTree: "modules/list/setTree",
chkOpenTabList: "chkOpenTabList",
}),
init() {
this.gridInit();
},
gridInit() {
const gridHeight = this.$refs.gridParent.offsetHeight - 30;
const myOptions = {
columnOptions: {
resizable: true,
},
};
this.setGridOption({
gridKey: this.gridName,
value: Object.assign(Utility.defaultGridOption(gridHeight), myOptions),
});
this.setGridColumn({
gridKey: this.gridName,
value: myColumns,
});
this.loadGrid = true;
},
async search() {
await this.getRowGridData();
},
async getRowGridData() {
if (
this.pageData.blocMstrList.length > 0 &&
this.pageData.commCdList.length > 0 &&
this.pageData.readObjIdList.length > 0
) {
const res = await this.postApiReturn({
apiKey: 'selectReadResultCloseMng',
resKey: 'cdKindData',
sendParam: {
blocId: this.pageData.blocMstrList[this.pageData.blocId].blocId, // 사업장
mttCd: this.pageData.commCd, // 검침대상유형
mttTp: this.pageData.readObjId, // 검침대상
readDt: this.pageData.fromDt, // 조회기간
},
});
this.setGridData({
gridKey: this.gridName,
value: res.map(item => ({
...item,
mgnf: item.mgnf || 0,
})),
});
}
this.setPageData({ isFind: false });
},
//전월 or 일 마감--------------------------------------------------------------------------------------------
async saveReadResultCloseMng(mnthYn) {
const result = confirm('마감시 기존자료는 삭제됩니다. \n계속하겠습니까?');
if (await result) {
const sendParam = {
datas: {},
params: {
mnthYn: mnthYn,
procIp: '0.0.0.0',
readDt: this.pageData.fromDt,
},
};
await this.postUpdateApi({
apiKey: 'saveReadResultCloseMngSP',
sendParam: sendParam,
});
this.setPageData({ isFind: true });
}
},
async saveReadResultCloseMngMM() {
const result = confirm('마감시 기존자료는 삭제됩니다. \n계속하겠습니까?');
if (await result) {
const sendParam = {
datas: {},
params: {
procIp: '0.0.0.0',
readDt: this.pageData.fromDt,
},
};
await this.postUpdateApi({
apiKey: 'saveReadResultCloseMngSPMM',
sendParam: sendParam,
});
this.setPageData({ isFind: true });
}
},
},
const myOptions = {
columnOptions: {
resizable: true,
},
};
this.setGridOption({
gridKey: this.gridName,
value: Object.assign(Utility.defaultGridOption(gridHeight), myOptions),
});
this.setGridColumn({
gridKey: this.gridName,
value: myColumns,
});
this.loadGrid = true;
},
async search() {
await this.getRowGridData();
},
async getRowGridData() {
if (
this.pageData.blocMstrList.length > 0 &&
this.pageData.commCdList.length > 0 &&
this.pageData.readObjIdList.length > 0
) {
const res = await this.postApiReturn({
apiKey: "selectReadResultCloseMng",
resKey: "cdKindData",
sendParam: {
blocId: this.pageData.blocMstrList[this.pageData.blocId].blocId, // 사업장
mttCd: this.pageData.commCd, // 검침대상유형
mttTp: this.pageData.readObjId, // 검침대상
readDt: this.pageData.fromDt, // 조회기간
},
});
this.setGridData({
gridKey: this.gridName,
value: res.map((item) => ({
...item,
mgnf: item.mgnf || 0,
})),
});
}
this.setPageData({ isFind: false });
},
//전월 or 일 마감--------------------------------------------------------------------------------------------
async saveReadResultCloseMng(mnthYn) {
const result = confirm("마감시 기존자료는 삭제됩니다. \n계속하겠습니까?");
if (await result) {
const sendParam = {
datas: {},
params: {
mnthYn: mnthYn,
procIp: "0.0.0.0",
readDt: this.pageData.fromDt,
},
};
await this.postUpdateApi({
apiKey: "saveReadResultCloseMngSP",
sendParam: sendParam,
});
this.setPageData({ isFind: true });
}
},
async saveReadResultCloseMngMM() {
const result = confirm("마감시 기존자료는 삭제됩니다. \n계속하겠습니까?");
if (await result) {
const sendParam = {
datas: {},
params: {
procIp: "0.0.0.0",
readDt: this.pageData.fromDt,
},
};
await this.postUpdateApi({
apiKey: "saveReadResultCloseMngSPMM",
sendParam: sendParam,
});
this.setPageData({ isFind: true });
}
},
},
};
const defaultData = {
/* 검색옵션 */
mttTp: '',
mttTpList: [],
sendMttParam: {},
readPlc: '',
readObjId: '',
readObjIdList: [],
commCd: '',
commCdList: [],
cmCycle: 'CYC_HOUR',
blocId: '',
blocMstrList: [],
/* 검색옵션 */
mttTp: "",
mttTpList: [],
sendMttParam: {},
readPlc: "",
readObjId: "",
readObjIdList: [],
commCd: "",
commCdList: [],
cmCycle: "CYC_HOUR",
blocId: "",
blocMstrList: [],
fromDt: Utility.setFormatDate(new Date(), 'YYYYMMDD'),
fromDt: Utility.setFormatDate(new Date(), "YYYYMMDD"),
isFind: false,
isFind: false,
/* data 세팅 - sms 목록 */
rowGrid: {
data: [],
column: [],
option: {},
},
/* data 세팅 - sms 목록 */
rowGrid: {
data: [],
column: [],
option: {},
},
defaultRange: {
CYC_HOUR: 0,
},
defaultRange: {
CYC_HOUR: 0,
},
xlsFileInfo: {
// 출력하려는 grid 와 같은 이름으로 세팅
rowGrid: {
// 엑셀변환시 데이타 가공이 추가로 필요하게 된다면 여기에 가공된 rowData 를 넣어야 할듯
fileName: null, // 갑이 없으면 해당 페이지 메뉴명
sheetName: null, // 갑이 없으면 'Sheet1'
},
},
xlsFileInfo: {
// 출력하려는 grid 와 같은 이름으로 세팅
rowGrid: {
// 엑셀변환시 데이타 가공이 추가로 필요하게 된다면 여기에 가공된 rowData 를 넣어야 할듯
fileName: null, // 갑이 없으면 해당 페이지 메뉴명
sheetName: null, // 갑이 없으면 'Sheet1'
},
},
};
const myColumns = [
{
header: '태그',
name: 'readPlcNm',
width: 300,
},
{
header: '배율',
name: 'distRt',
align: 'right',
formatter({ value }) {
if (value === null) {
return '';
} else {
return value;
}
},
},
{
header: '설비비',
name: 'eccNm',
formatter({ value }) {
if (value === null) {
return '';
} else {
return value;
}
},
},
{
header: '설비배분비율',
name: 'eccDistRt',
align: 'right',
formatter({ value }) {
if (value === null) {
return '';
} else {
return value;
}
},
},
{
header: '금일데이터',
name: 'totVal',
align: 'right',
excelType: 'number',
excelFormatter: '2',
formatter({ value }) {
return Utility.setFormatIntDecimal(value, 2);
},
},
{
header: '최종마감시각',
name: 'procDttm',
align: 'center',
formatter({ value }) {
if (value === null) {
return '';
} else {
return value;
}
},
},
{
header: "태그",
name: "readPlcNm",
width: 300,
},
{
header: "배율",
name: "distRt",
align: "right",
formatter({ value }) {
if (value === null) {
return "";
} else {
return value;
}
},
},
{
header: "설비비",
name: "eccNm",
formatter({ value }) {
if (value === null) {
return "";
} else {
return value;
}
},
},
{
header: "설비배분비율",
name: "eccDistRt",
align: "right",
formatter({ value }) {
if (value === null) {
return "";
} else {
return value;
}
},
},
{
header: "금일데이터",
name: "totVal",
align: "right",
excelType: "number",
excelFormatter: "2",
formatter({ value }) {
return Utility.setFormatIntDecimal(value, 2);
},
},
{
header: "최종마감시각",
name: "procDttm",
align: "center",
formatter({ value }) {
if (value === null) {
return "";
} else {
return value;
}
},
},
];
import { getPathDataExample } from "@/const/const";
const dataPathDataExample = getPathDataExample({
id: "INCHEON.HVAC.EQP_HT_CH001.UT_CH101.CHI_AMP_1A_PV",
lable: "INCHEON 고온 냉동기 101호기 - 호로1",
type: "사용",
note: "-",
date: "2023-01-10 20:02:00",
});
</script>
<style lang="scss">
@import '@/assets/scss/common.scss';
</style>

View File

@ -532,10 +532,6 @@ const defaultData = {
},
};
</script>
<style lang="scss">
@import '@/assets/scss/common.scss';
</style>
//
<style scoped lang="scss">
// ::v-deep {
// .tui-grid {

View File

@ -689,6 +689,3 @@ const defaultData = {
},
};
</script>
<style lang="scss">
@import '@/assets/scss/common.scss';
</style>

View File

@ -661,6 +661,3 @@ function makeDateVal(date, cmCycle) {
return result;
}
</script>
<style lang="scss">
@import '@/assets/scss/common.scss';
</style>

View File

@ -472,6 +472,3 @@ const defaultData = {
},
};
</script>
<style lang="scss">
@import '@/assets/scss/common.scss';
</style>

View File

@ -1057,6 +1057,3 @@ const myDetail = [
},
];
</script>
<style lang="scss">
@import '@/assets/scss/common.scss';
</style>

View File

@ -10,6 +10,8 @@
:is="'SelectBlocMstr'"
ref="SelectBlocMstr"
:parentPrgmId="myPrgmId"
:textCols="12"
customClass="select-large"
/>
</v-col>
<v-col :cols="3">
@ -20,6 +22,8 @@
dataKey="searchReadDataType"
:sendParam="{ commGrpCd: 'EM_READ_DATA_TYPE', useFg: '1' }"
:addAll="true"
:textCols="12"
customClass="select-large"
/>
</v-col>
<v-col :cols="3">
@ -29,16 +33,15 @@
:label="'측정대상'"
dataKey="searchReadObj"
:sendParam="{ useFg: '1' }"
:labelCols="4"
:textCols="8"
:labelCols="12"
:textCols="12"
:addAll="true"
customClass="select-large"
/>
</v-col>
<v-col :cols="3" class="text-right">
<BtnSearch @click="search" />
</v-col>
</v-row>
<v-row align="center" no-gutters>
<v-row align="end" no-gutters>
<v-col :cols="3">
<component
:is="'selectCodeList'"
@ -47,6 +50,8 @@
dataKey="useFg"
:sendParam="{ commGrpCd: 'CO_USEFG', useFg: '1' }"
:addAll="true"
:textCols="12"
customClass="select-large"
/>
</v-col>
<v-col :cols="3">
@ -54,9 +59,10 @@
:parentPrgmId="myPrgmId"
label="TAG ID"
valueNm="tagId"
:labelCols="4"
:textCols="8"
:labelCols="12"
:textCols="12"
:searchOption="true"
customClass="input-large"
/>
</v-col>
<v-col :cols="3">
@ -64,11 +70,15 @@
:parentPrgmId="myPrgmId"
label="TAG명"
valueNm="tagNm"
:labelCols="4"
:textCols="8"
:labelCols="12"
:textCols="12"
:searchOption="true"
customClass="input-large"
/>
</v-col>
<v-col :cols="3" class="d-flex align-end justify-end text-right">
<BtnSearch @click="search" size="large" />
</v-col>
</v-row>
</v-card>
</v-col>
@ -99,10 +109,11 @@
@getRowsData="getRowData"
@sendSelectedRowStatInfo="getSelectedRowStatInfo"
:selectedRowDataWatchFlag="true"
:dataPath="dataPathMock"
/>
</div>
</v-card-actions>
<div class="d-flex align-center justify-space-between">
<!-- <div class="d-flex align-center justify-space-between">
<pagination
id="pagination"
:total-count="totalCount"
@ -110,7 +121,7 @@
:limit="limit"
@loadData="changeGrid"
/>
</div>
</div> -->
</v-card>
</v-col>
<v-col :cols="7" class="h100">
@ -204,7 +215,7 @@ export default {
return {
myPrgmId: myPrgmId,
gridName: 'rowGrid',
loadGrid: false,
loadGrid: true,
tab: null,
items: [
{ name: 'TAG 정보', id: 'tagBaseInfoTab', disabledFlag: false },
@ -212,11 +223,123 @@ export default {
],
detailList: myDetail,
alrmFg: null,
itemsPerPage: 10,
itemsPerPageArray: [10, 20, 30],
limit: 20,
page: 1,
totalCount: 0,
dataPathMock: {
"rowGrid": {
column: [
{ header: '회사 ID', name: 'comId', hidden: true },
{
header: 'TAG ID',
name: 'tagId',
width: 'auto',
minWidth: 340,
align: 'left',
},
{
header: 'TAG 명',
name: 'tagNm',
width: 'auto',
minWidth: 220,
align: 'left',
},
{
header: '측정 값 유형',
name: 'readDataTypeCd',
width: 90,
align: 'left',
},
{
header: '측정대상',
name: 'readObjId',
width: 100,
align: 'left',
},
{ header: '배율', name: 'mgnf', width: 80, align: 'right' },
{
header: '단위',
name: 'unitCd',
width: 80,
align: 'left',
},
{
header: '최소값',
name: 'rangMin',
width: 100,
align: 'right',
hidden: true,
},
{
header: '최대값',
name: 'rangMax',
width: 100,
align: 'right',
hidden: true,
},
{
header: '경고 상상',
name: 'alrmHihi',
width: 100,
align: 'right',
hidden: true,
},
{
header: '경고 상',
name: 'alrmHi',
width: 100,
align: 'right',
hidden: true,
},
{
header: '경고 하',
name: 'alrmLo',
width: 100,
align: 'right',
hidden: true,
},
{
header: '경고 하하',
name: 'alrmLolo',
width: 100,
align: 'right',
hidden: true,
},
{
header: '사업장',
name: 'blocId',
width: 100,
align: 'center',
hidden: true,
},
{
header: '집계 여부',
name: 'totFg',
width: 80,
align: 'center',
hidden: true,
},
{
header: '사용 여부',
name: 'useFg',
width: 80,
align: 'center',
hidden: true,
},
],
data: dataPathDataExample,
defaultRow: dataPathDataExample,
option: {
pageOptions: {
useClient: true,
perPage: 10,
},
scrollX: true
}
}
},
// itemsPerPage: 10,
// itemsPerPageArray: [10, 20, 30],
// limit: 20,
// page: 1,
// totalCount: 0,
};
},
computed: {
@ -971,30 +1094,39 @@ const myDetail = [
label: 'TAG ID',
valueNm: 'tagId',
disabled: false,
iconShow:true,
cols: 6,
class: 'py-2',
class: 'py-2 pr-4',
required: false,
labelCols: 12,
textCols: 12,
},
{
type: 'InputText',
label: 'TAG 명',
valueNm: 'tagNm',
disabled: false,
iconShow:true,
cols: 6,
class: 'py-2',
class: 'py-2 pl-4',
required: false,
labelCols: 12,
textCols: 12,
},
{
type: 'SelectBox',
label: '측정 값 유형',
valueNm: 'readDataTypeCd',
disabled: false,
iconShow:true,
cols: 6,
class: 'py-2',
class: 'py-2 pr-4 pt-5',
list: 'readDataTypeCdList',
itemText: 'commCdNm',
itemValue: 'commCd',
required: true,
labelCols: 12,
textCols: 12,
},
{
type: 'SelectBox',
@ -1002,11 +1134,14 @@ const myDetail = [
valueNm: 'readObjId',
disabled: false,
cols: 6,
class: 'py-2',
class: 'py-2 pl-4 pt-5',
list: 'readObjList',
itemText: 'readObjNm',
itemValue: 'readObjId',
required: true,
iconShow:true,
labelCols: 12,
textCols: 12,
},
{
type: 'InputText',
@ -1014,8 +1149,11 @@ const myDetail = [
valueNm: 'mgnf',
disabled: false,
cols: 6,
class: 'py-2',
class: 'py-2 pr-4 pt-5',
required: true,
iconShow:true,
labelCols: 12,
textCols: 12,
},
{
type: 'SelectBox',
@ -1023,10 +1161,13 @@ const myDetail = [
valueNm: 'unitCd',
disabled: false,
cols: 6,
class: 'py-2',
class: 'py-2 pl-4 pt-5',
list: 'unitCdList',
itemText: 'commCdNm',
itemValue: 'commCd',
iconShow:true,
labelCols: 12,
textCols: 12,
},
{
type: 'InputText',
@ -1034,7 +1175,10 @@ const myDetail = [
valueNm: 'rangMin',
disabled: false,
cols: 6,
class: 'py-2',
class: 'py-2 pr-4 pt-5',
iconShow:true,
labelCols: 12,
textCols: 12,
},
{
type: 'InputText',
@ -1042,7 +1186,10 @@ const myDetail = [
valueNm: 'rangMax',
disabled: false,
cols: 6,
class: 'py-2',
class: 'py-2 pl-4 pt-5',
iconShow:true,
labelCols: 12,
textCols: 12,
},
{
type: 'InputText',
@ -1050,7 +1197,10 @@ const myDetail = [
valueNm: 'alrmHihi',
disabled: false,
cols: 6,
class: 'py-2',
class: 'py-2 pr-4 pt-5',
iconShow:true,
labelCols: 12,
textCols: 12,
},
{
type: 'InputText',
@ -1058,7 +1208,10 @@ const myDetail = [
valueNm: 'alrmHi',
disabled: false,
cols: 6,
class: 'py-2',
class: 'py-2 pl-4 pt-5',
iconShow:true,
labelCols: 12,
textCols: 12,
},
{
type: 'InputText',
@ -1066,7 +1219,10 @@ const myDetail = [
valueNm: 'alrmLo',
disabled: false,
cols: 6,
class: 'py-2',
class: 'py-2 pr-4 pt-5',
iconShow:true,
labelCols: 12,
textCols: 12,
},
{
type: 'InputText',
@ -1074,7 +1230,10 @@ const myDetail = [
valueNm: 'alrmLolo',
disabled: false,
cols: 6,
class: 'py-2',
class: 'py-2 pl-4 pt-5',
iconShow:true,
labelCols: 12,
textCols: 12,
},
{
type: 'CheckBox',
@ -1082,8 +1241,11 @@ const myDetail = [
valueNm: 'totFg',
disabled: false,
cols: 6,
class: 'py-2',
class: 'py-2 pr-4 pt-5',
value: { '1': true, '0': false },
iconShow:true,
labelCols: 12,
textCols: 12,
},
{
type: 'CheckBox',
@ -1091,9 +1253,12 @@ const myDetail = [
valueNm: 'useFg',
disabled: false,
cols: 6,
class: 'py-2',
class: 'py-2 pl-4 pt-5',
value: { '1': true, '0': false },
required: false,
iconShow:true,
labelCols: 12,
textCols: 12,
},
{
type: 'SelectBox',
@ -1120,7 +1285,25 @@ const myDetail = [
class: 'py-2',
},
];
import { getPathDataExample } from '@/const/const'
const dataPathDataExample = getPathDataExample({
"comId": "",
"tagId": "INCHEON.ELEC.EQID.VCB_111A_ACCWH_PV",
"tagNm": "ICHEON VCB_111A - 적산 전력",
"readDataTypeCd": "적산",
"readObjId": "적산",
"mgnf": "적산",
"unitCd":"적산",
"rangMin":"1",
"rangMax":"10",
"alrmHihi":"1",
"alrmHi":"10",
"alrmLo":"1",
"alrmLolo":"10",
"blocId":"1",
"totFg":"1",
"useFg":"1",
});
</script>
<style lang="scss">
@import '@/assets/scss/common.scss';
</style>

View File

@ -80,7 +80,7 @@ const defaultData = {
const myDetail = [];
</script>
<style lang="scss">
<style lang="scss" scoped>
.swiper-wrapper {
box-sizing: inherit !important;
}

File diff suppressed because it is too large Load Diff

View File

@ -6,126 +6,82 @@
<v-row align="center" no-gutters>
<v-col :cols="3">
<!-- 설비종류 -->
<component
:is="'SelectBox'"
:propsValue="selectValue02"
:itemList="selectValueList02"
:label="'FAB'"
@update:propsValue="selectValue02 = $event"
/>
<component :is="'SelectBox'" :propsValue="selectValue02" :itemList="selectValueList02"
:label="'FAB'" @update:propsValue="selectValue02 = $event" :labelCols="12"
:textCols="12" :customClass="'select-large'" />
</v-col>
<v-col :cols="3">
<!-- 설비종류 -->
<component
:is="'SelectBox'"
:propsValue="selectValue01"
:itemList="selectValueList01"
:label="'설비종류'"
@update:propsValue="selectValue01 = $event"
/>
<component :is="'SelectBox'" :propsValue="selectValue01" :itemList="selectValueList01"
:label="'설비종류'" @update:propsValue="selectValue01 = $event" :labelCols="12"
:textCols="12" :customClass="'select-large'" />
</v-col>
<v-col :cols="3">
<!-- 설비종류 -->
<component
:is="'SelectBox'"
:propsValue="selectValue03"
:itemList="selectValueList03"
:label="'설비그룹'"
@update:propsValue="selectValue03 = $event"
/>
<component :is="'SelectBox'" :propsValue="selectValue03" :itemList="selectValueList03"
:label="'설비그룹'" @update:propsValue="selectValue03 = $event" :labelCols="12"
:textCols="12" :customClass="'select-large'" />
</v-col>
<v-col :cols="2">
<v-col :cols="3">
<!-- 평가 -->
<component
:is="'SelectBox'"
:propsValue="selectValue06"
:itemList="selectValueList06"
:label="'평가'"
@update:propsValue="selectValue06 = $event"
/>
<component :is="'SelectBox'" :propsValue="selectValue06" :itemList="selectValueList06"
:label="'평가'" @update:propsValue="selectValue06 = $event" :labelCols="12" :textCols="12"
:customClass="'select-large'" />
</v-col>
<v-col :cols="1" class="text-right">
<!-- 조회버튼 -->
<BtnSearch @click="search" />
</v-col>
</v-row>
<v-row align="center" no-gutters>
<v-row align="end" no-gutters>
<v-col :cols="3">
<!-- 설비종류 -->
<component
ref="EqpmSelectPop"
:is="'EqpmSelectPop'"
:label="'설비'"
:valueNm="'eqpmNm'"
:parentPrgmId="myPrgmId"
:eqpmGrpDisabled="true"
:fabDisabled="true"
:textCols="8"
:isMulti="true"
/>
<component ref="EqpmSelectPop" :is="'EqpmSelectPop'" :label="'설비'" :valueNm="'eqpmNm'"
:parentPrgmId="myPrgmId" :eqpmGrpDisabled="true" :fabDisabled="true" :isMulti="true"
:labelCols="12" :textCols="12" :customClass="'input-large'" />
</v-col>
<v-col :cols="3">
<!-- 설비종류 -->
<component
:is="'SelectBox'"
ref="SelectBox1"
:propsValue="selectValue05"
:itemList="selectValueList05"
:label="'가이드명'"
@update:propsValue="selectValue05 = $event"
/>
<component :is="'SelectBox'" ref="SelectBox1" :propsValue="selectValue05"
:itemList="selectValueList05" :label="'가이드명'"
@update:propsValue="selectValue05 = $event" :labelCols="12" :textCols="12"
:customClass="'select-large'" />
</v-col>
<v-col :cols="4">
<v-col :cols="3">
<!-- 대상일 -->
<component
:is="'Datepicker'"
:parentPrgmId="myPrgmId"
:label="'대상일'"
:labelCols="3"
/>
<component :is="'Datepicker'" :parentPrgmId="myPrgmId" :label="'대상일'" :labelCols="12"
:textCols="12" :customClass="'input-large'" />
</v-col>
<v-col :cols="3" class="text-right">
<!-- 조회버튼 -->
<BtnSearch @click="search" size="large" />
</v-col>
</v-row>
</v-card>
</v-col>
</v-row>
<v-row ref="contents">
<v-row ref="contents" class="pt-3">
<v-col :cols="12" style="height: 100%">
<v-card class="pb-5">
<div class="d-flex align-center justify-space-between pa-5">
<div class="d-flex align-center justify-space-between pa-4">
<v-card-title class="pa-0">설비별 현황 리스트</v-card-title>
</div>
<div class="px-5" style="height:calc(100% - 76px)">
<div class="px-4" 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"
/>
<component :ref="gridName" :is="loadGrid ? 'Grid' : null" :gridName="gridName"
:parentPrgmId="myPrgmId" :columnClickEventFlag="true" @columnClick="columnClick"
:dataPath="dataPathExample" />
</div>
</div>
</v-card>
</v-col>
</v-row>
<component
ref="EnrgEffcEqpmDetailPop"
:is="'EnrgEffcEqpmDetailPop'"
:parentPrgmId="myPrgmId"
/>
<component
ref="EnrgEffcGdIdxDetPop"
:is="'EnrgEffcGdIdxDetPop'"
:parentPrgmId="myPrgmId"
/>
<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 { resize } from '@/mixin/resize.js';
import { mapActions } from 'vuex';
import BtnSearch from '~/components/common/button/BtnSearch';
import Buttons from '~/components/common/button/Buttons';
@ -185,8 +141,442 @@ export default {
selectValueList05: [],
selectValueList06: [],
initedFlag: false,
loadGrid: false,
loadGrid: true,
gridName: 'rowGrid',
dataPathExample: {
"rowGrid": {
data: [
{
"no": 1,
"fabNm": "B02",
"eqpmGrpNm": "ETCH Group",
"eqpmId": "EQ028",
"eqpmNm": "DEP D78",
"gdIdxId": "GD004",
"gdIdxNm": "Etch Depth Guide",
"careStndVal": 34,
"warnStndVal": 56,
"totVal": 30,
"okFg": "주의",
"gdMeth": "Adjust pad pressure",
"ngCnt": 0
},
{
"no": 2,
"fabNm": "C01",
"eqpmGrpNm": "DEP Group",
"eqpmId": "EQ003",
"eqpmNm": "PHOTO P34",
"gdIdxId": "GD028",
"gdIdxNm": "Exposure Time Guide",
"careStndVal": 40,
"warnStndVal": 53,
"totVal": 48,
"okFg": "주의",
"gdMeth": "Tune RF power",
"ngCnt": 7
},
{
"no": 3,
"fabNm": "C01",
"eqpmGrpNm": "CMP Group",
"eqpmId": "EQ012",
"eqpmNm": "CMP C56",
"gdIdxId": "GD016",
"gdIdxNm": "Etch Depth Guide",
"careStndVal": 31,
"warnStndVal": 34,
"totVal": 44,
"okFg": "양호",
"gdMeth": "Change exposure time",
"ngCnt": 6
},
{
"no": 4,
"fabNm": "D01",
"eqpmGrpNm": "ETCH Group",
"eqpmId": "EQ016",
"eqpmNm": "ETCH E12",
"gdIdxId": "GD004",
"gdIdxNm": "Etch Depth Guide",
"careStndVal": 33,
"warnStndVal": 40,
"totVal": 56,
"okFg": "주의",
"gdMeth": "Modify gas flow",
"ngCnt": 2
},
{
"no": 5,
"fabNm": "C01",
"eqpmGrpNm": "DEP Group",
"eqpmId": "EQ004",
"eqpmNm": "CMP C56",
"gdIdxId": "GD008",
"gdIdxNm": "Deposition Rate Guide",
"careStndVal": 33,
"warnStndVal": 44,
"totVal": 20,
"okFg": "주의",
"gdMeth": "Adjust pad pressure",
"ngCnt": 7
},
{
"no": 6,
"fabNm": "B01",
"eqpmGrpNm": "DEP Group",
"eqpmId": "EQ019",
"eqpmNm": "ETCH E12",
"gdIdxId": "GD014",
"gdIdxNm": "Polish Rate Guide",
"careStndVal": 34,
"warnStndVal": 38,
"totVal": 46,
"okFg": "양호",
"gdMeth": "Modify gas flow",
"ngCnt": 1
},
{
"no": 7,
"fabNm": "D01",
"eqpmGrpNm": "ETCH Group",
"eqpmId": "EQ024",
"eqpmNm": "ETCH E12",
"gdIdxId": "GD008",
"gdIdxNm": "Exposure Time Guide",
"careStndVal": 37,
"warnStndVal": 51,
"totVal": 24,
"okFg": "경고",
"gdMeth": "Modify gas flow",
"ngCnt": 10
},
{
"no": 8,
"fabNm": "D01",
"eqpmGrpNm": "DEP Group",
"eqpmId": "EQ014",
"eqpmNm": "DEP D78",
"gdIdxId": "GD023",
"gdIdxNm": "Deposition Rate Guide",
"careStndVal": 22,
"warnStndVal": 49,
"totVal": 43,
"okFg": "주의",
"gdMeth": "Change exposure time",
"ngCnt": 6
},
{
"no": 9,
"fabNm": "C01",
"eqpmGrpNm": "DEP Group",
"eqpmId": "EQ001",
"eqpmNm": "ETCH E12",
"gdIdxId": "GD022",
"gdIdxNm": "Polish Rate Guide",
"careStndVal": 20,
"warnStndVal": 24,
"totVal": 51,
"okFg": "경고",
"gdMeth": "Modify gas flow",
"ngCnt": 9
},
{
"no": 10,
"fabNm": "D01",
"eqpmGrpNm": "CMP Group",
"eqpmId": "EQ027",
"eqpmNm": "ETCH E12",
"gdIdxId": "GD002",
"gdIdxNm": "Deposition Rate Guide",
"careStndVal": 27,
"warnStndVal": 46,
"totVal": 60,
"okFg": "양호",
"gdMeth": "Modify gas flow",
"ngCnt": 4
},
{
"no": 11,
"fabNm": "C01",
"eqpmGrpNm": "PHOTO Group",
"eqpmId": "EQ004",
"eqpmNm": "CMP C56",
"gdIdxId": "GD025",
"gdIdxNm": "Etch Depth Guide",
"careStndVal": 30,
"warnStndVal": 58,
"totVal": 28,
"okFg": "경고",
"gdMeth": "Modify gas flow",
"ngCnt": 3
},
{
"no": 12,
"fabNm": "D01",
"eqpmGrpNm": "ETCH Group",
"eqpmId": "EQ022",
"eqpmNm": "ETCH E12",
"gdIdxId": "GD024",
"gdIdxNm": "Polish Rate Guide",
"careStndVal": 27,
"warnStndVal": 42,
"totVal": 62,
"okFg": "양호",
"gdMeth": "Adjust pad pressure",
"ngCnt": 0
},
{
"no": 13,
"fabNm": "C01",
"eqpmGrpNm": "ETCH Group",
"eqpmId": "EQ018",
"eqpmNm": "PHOTO P34",
"gdIdxId": "GD013",
"gdIdxNm": "Exposure Time Guide",
"careStndVal": 32,
"warnStndVal": 35,
"totVal": 62,
"okFg": "양호",
"gdMeth": "Change exposure time",
"ngCnt": 5
},
{
"no": 14,
"fabNm": "D01",
"eqpmGrpNm": "CMP Group",
"eqpmId": "EQ017",
"eqpmNm": "DEP D78",
"gdIdxId": "GD005",
"gdIdxNm": "Etch Depth Guide",
"careStndVal": 36,
"warnStndVal": 47,
"totVal": 39,
"okFg": "경고",
"gdMeth": "Tune RF power",
"ngCnt": 10
},
{
"no": 15,
"fabNm": "D01",
"eqpmGrpNm": "DEP Group",
"eqpmId": "EQ025",
"eqpmNm": "DEP D78",
"gdIdxId": "GD028",
"gdIdxNm": "Deposition Rate Guide",
"careStndVal": 36,
"warnStndVal": 59,
"totVal": 63,
"okFg": "양호",
"gdMeth": "Adjust pad pressure",
"ngCnt": 1
},
{
"no": 16,
"fabNm": "B02",
"eqpmGrpNm": "PHOTO Group",
"eqpmId": "EQ026",
"eqpmNm": "PHOTO P34",
"gdIdxId": "GD008",
"gdIdxNm": "Exposure Time Guide",
"careStndVal": 24,
"warnStndVal": 59,
"totVal": 20,
"okFg": "양호",
"gdMeth": "Change exposure time",
"ngCnt": 1
},
{
"no": 17,
"fabNm": "B01",
"eqpmGrpNm": "DEP Group",
"eqpmId": "EQ023",
"eqpmNm": "ETCH E12",
"gdIdxId": "GD021",
"gdIdxNm": "Polish Rate Guide",
"careStndVal": 26,
"warnStndVal": 51,
"totVal": 31,
"okFg": "주의",
"gdMeth": "Modify gas flow",
"ngCnt": 2
},
{
"no": 18,
"fabNm": "B02",
"eqpmGrpNm": "PHOTO Group",
"eqpmId": "EQ012",
"eqpmNm": "ETCH E12",
"gdIdxId": "GD023",
"gdIdxNm": "Polish Rate Guide",
"careStndVal": 34,
"warnStndVal": 45,
"totVal": 64,
"okFg": "경고",
"gdMeth": "Change exposure time",
"ngCnt": 1
},
{
"no": 19,
"fabNm": "B01",
"eqpmGrpNm": "PHOTO Group",
"eqpmId": "EQ018",
"eqpmNm": "ETCH E12",
"gdIdxId": "GD002",
"gdIdxNm": "Etch Depth Guide",
"careStndVal": 30,
"warnStndVal": 31,
"totVal": 51,
"okFg": "주의",
"gdMeth": "Tune RF power",
"ngCnt": 2
},
{
"no": 20,
"fabNm": "C01",
"eqpmGrpNm": "CMP Group",
"eqpmId": "EQ018",
"eqpmNm": "CMP C56",
"gdIdxId": "GD021",
"gdIdxNm": "Exposure Time Guide",
"careStndVal": 30,
"warnStndVal": 51,
"totVal": 45,
"okFg": "양호",
"gdMeth": "Change exposure time",
"ngCnt": 7
},
{
"no": 21,
"fabNm": "B01",
"eqpmGrpNm": "CMP Group",
"eqpmId": "EQ021",
"eqpmNm": "CMP C56",
"gdIdxId": "GD001",
"gdIdxNm": "Deposition Rate Guide",
"careStndVal": 23,
"warnStndVal": 42,
"totVal": 40,
"okFg": "주의",
"gdMeth": "Tune RF power",
"ngCnt": 5
}
]
,
column: [
{
header: 'No.',
name: 'no',
align: 'right',
width: 30,
},
{
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: 100,
},
],
option: {
// pageOptions: {
// useClient: true,
// perPage: 10,
// },
// scrollX: false,
scrollY: true
}
// pageOptions: {
// useClient: true,
// perPage: 10,
// },
// scrollX: false,
// scrollY: false
},
// pageOptions: {
// useClient: true,
// perPage: 10,
// },
// scrollX: true,
// scrollY: false
},
popDialog: false,
eqpmFlag: false,
eqpmKindFlag: false,
@ -243,12 +633,12 @@ export default {
chkIsFind(val) {
if (val) this.search();
},
fabId(val) {},
fabNm(val) {},
eqpmKindId(val) {},
eqpmGrpId(val) {},
eqpmGrpNm(val) {},
fromDt(val) {},
fabId(val) { },
fabNm(val) { },
eqpmKindId(val) { },
eqpmGrpId(val) { },
eqpmGrpNm(val) { },
fromDt(val) { },
async selectValue02(val) {
if (this.initedFlag) {
this.setPageData({
@ -367,7 +757,7 @@ export default {
fabNm: data.fabNm,
eqpmKindId: data.eqpmKindId,
fromDt: data.fromDt,
okFg:data.okFg
okFg: data.okFg
};
},
async mounted() {
@ -399,7 +789,7 @@ export default {
} else {
this.setFromDt();
}
await this.gridInit();
// await this.gridInit();
},
async search() {
await this.getRowGridData();
@ -416,68 +806,75 @@ export default {
// 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;
}
// 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;
}
// let res = await this.postApiReturn({
// apiKey: 'selectFabCodeList',
// resKey: 'fabCodeLists',
// sendParam: {},
// });
this.selectValueList02 = [
{ text: '온도 센서', value: 'ECC001' },
{ text: '압력 센서', value: 'ECC002' },
{ text: '유량 센서', value: 'ECC003' },
{ text: '습도 센서', value: 'ECC004' },
{ text: '전압 센서', value: 'ECC005' }
];
// 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,
@ -519,37 +916,37 @@ export default {
this.selectValue03 = null;
}
this.setPageData({
eqpmGrpId : this.selectValue03,
eqpmGrpIdList : this.selectValueList03
})
this.setPageData({
eqpmGrpId: this.selectValue03,
eqpmGrpIdList: this.selectValueList03
})
},
async getEqpm(data) {},
async getEqpm(data) { },
async getGdIdx() {
let res = await this.postApiReturn({
apiKey: 'selectEqpmGdIdxCodeList',
resKey: 'eqpmGdIdxCodeLists',
sendParam: {
eqpmGrpId: this.selectValue03,
},
});
// 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;
}
// 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,
@ -571,9 +968,9 @@ export default {
value: 'NG',
},
];
if(this.routeData.okFg == null || this.routeData.okFg == '' ){
if (this.routeData.okFg == null || this.routeData.okFg == '') {
this.selectValue06 = this.selectValueList06[0].value;
}else if(this.routeData.okFg != null || this.routeData.okFg != '' ){
} else if (this.routeData.okFg != null || this.routeData.okFg != '') {
this.selectValue06 = this.routeData.okFg;
}
this.setPageData({
@ -590,6 +987,15 @@ export default {
resizable: true,
},
rowHeaders: ['rowNum'],
// pageOptions: {
// useClient: true,
// perPage: 10,
// },
// scrollX: false,
// scrollY: false,
// heightResizable: true,
// rowHeight:'auto'
};
@ -724,27 +1130,27 @@ export default {
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,
},
});
// 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,
},
});
// this.setPageData({
// rowGridSelectKey: e.rowKey,
// rowGridSelectData: {
// ...data,
// fromDt: this.pageData.fromDt,
// toDt: this.pageData.toDt,
// },
// });
}
},
},

View File

@ -0,0 +1,973 @@
<template>
<div class="l-layout">
<v-row ref="searchFilter">
<v-col :cols="12">
<v-card class="searchFilter">
<v-row align="end" no-gutters>
<v-col :cols="3">
<!-- 설비종류 -->
<component :is="'SelectBox'" :propsValue="fabSelected" :itemList="fabList" :label="'FAB'"
@update:propsValue="fabSelected = $event" :labelCols="12" :textCols="12"
:customClass="'select-large'" />
</v-col>
<v-col :cols="3">
<!-- 설비종류 -->
<component :is="'SelectBox'" :propsValue="eqpmKindSelected" :itemList="eqpmKindList" :label="'설비종류'"
@update:propsValue="eqpmKindSelected = $event" :labelCols="12" :textCols="12" :customClass="'select-large'" />
</v-col>
<v-col :cols="3">
<!-- 설비종류 -->
<component :is="'SelectBox'" :propsValue="eqpmGrpSelected" :itemList="eqpmGrpList" :label="'설비그룹'"
@update:propsValue="eqpmGrpSelected = $event":labelCols="12" :textCols="12" :customClass="'select-large'" />
</v-col>
<v-col :cols="2">
<!-- 평가 -->
<component :is="'SelectBox'" :propsValue="selectValue06" :itemList="selectValueList06" :label="'평가'"
@update:propsValue="selectValue06 = $event" :labelCols="12" :textCols="12" :customClass="'select-large'" />
</v-col>
</v-row>
<v-row align="end" no-gutters>
<v-col :cols="3">
<component ref="EqpmSelectPop" :is="'EqpmSelectPop'" :label="'설비'" :valueNm="'eqpmNm'"
:parentPrgmId="myPrgmId" :isMulti="true" :fabSelected="fabSelected"
:eqpmGrpSelected="eqpmGrpSelected" :labelCols="12" :textCols="12" :customClass="'select-large'"/>
</v-col>
<v-col :cols="3">
<!-- 설비종류 -->
<component :is="'SelectBox'" ref="SelectBox1" :propsValue="selectValue05" :itemList="selectValueList05"
:label="'가이드명'" @update:propsValue="selectValue05 = $event" :labelCols="12" :textCols="12" :customClass="'select-large'" />
</v-col>
<v-col :cols="3">
<v-row class="search-box" align="center" no-gutters>
<v-col :cols="12">
<label for="" class="search-box-label">
대상일
</label>
</v-col>
<v-col :cols="12">
<a-range-picker size="large">
<template #suffixIcon>
<a-icon type="calendar" />
</template>
</a-range-picker>
</v-col>
</v-row>
</v-col>
<v-col :cols="3" class="text-right">
<!-- 조회버튼 -->
<a-button icon="search" type="primary" @click="search()" class="search-button" size="large">조회</a-button>
<!-- <BtnSearch @click="search" /> -->
</v-col>
</v-row>
</v-card>
</v-col>
</v-row>
<v-row ref="contents" class="mt-4">
<v-col :cols="12" style="height: 100%">
<a-card class="p-0" :style="{ border: 'none', borderRadius: '8px' }">
<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)">
<a-table :columns="columns" :dataSource="filteredData" bordered>
<template slot="gdIdxNm" slot-scope="text, record">
<a @click="handleGdIdxNmClick(record)" style="cursor: pointer; color: #1890ff;">
{{ text }}
</a>
</template>
<template slot="ngCnt" slot-scope="text, record">
<a @click="handleNgCntClick(record)" style="cursor: pointer; color: #1890ff;">
{{ text }}
</a>
</template>
</a-table>
</div>
</a-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 SelectBox from '@/components/common/select/SelectBox';
import Utility from '~/plugins/utility';
import EqpmSelectPop from '~/components/common/modal/EqpmSelectPop';
import EnrgEffcEqpmDetailPop from '~/components/common/modal/EnrgEffcEqpmDetailPop';
import EnrgEffcGdIdxDetPop from '~/components/common/modal/EnrgEffcGdIdxDetPop';
import { DatePicker } from 'ant-design-vue';
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;
myTitle = '효율운전 가이드';
},
meta: {
title: () => {
return myTitle;
},
prgmId: 'PRG0084',
closable: true,
},
components: {
Utility,
// Grid,
SelectBox,
// Buttons,
BtnSearch,
'a-range-picker': DatePicker.RangePicker,
EnrgEffcEqpmDetailPop,
EqpmSelectPop,
EnrgEffcGdIdxDetPop,
},
data() {
return {
myPrgmId: 'PRG0084',
selectValue01: null,
selectValue02: null,
selectValue03: null,
selectValue04: { eqpmId: [] },
selectValue05: null,
selectValue06: null,
selectValueList01: [],
selectValueList02: [],
selectValueList03: [],
selectValueList04: [],
selectValueList05: [],
selectValueList06: [],
fabSelected: null,
eqpmGrpSelected: null,
eqpmKindSelected: null,
fabList: [],
eqpmGrpList: [],
eqpmKindList: [],
initedFlag: false,
loadGrid: false,
gridName: 'rowGrid',
popDialog: false,
eqpmFlag: false,
eqpmKindFlag: false,
eqpmGrpFlag: false,
eqpmGdIdxFlag: false,
fabFlag: false,
routeData: {},
columns: [
{ title: 'No.', dataIndex: 'No', key: 'No', align: 'center' },
{ title: 'FAB', dataIndex: 'fab', key: 'fab', align: 'center' },
{ title: '설비그룹', dataIndex: '설비그룹', key: '설비그룹' },
{ title: '설비명', dataIndex: '설비명', key: '설비명' },
{ title: '가이드명', dataIndex: '가이드명', key: 'gdIdxNm', scopedSlots: { customRender: 'gdIdxNm' } },
{ title: '주의', dataIndex: '주의', key: '주의' },
{ title: '경고', dataIndex: '경고', key: '경고' },
{ title: '가이드값', dataIndex: '가이드값', key: '가이드값' },
{ title: '평가', dataIndex: '평가', key: '평가' },
{ title: '절감가이드 방법', dataIndex: '절감가이드방법', key: '절감가이드방법' },
{ title: 'NG발생건수', dataIndex: 'NG발생건수', key: 'ngCnt', scopedSlots: { customRender: 'ngCnt' } },
],
filteredData: [
],
data: [
{
No: 1,
fab: 'FAB001',
설비그룹: '냉동기고온',
설비명: 'UT_HT_CH101',
가이드명: 'C.O.P',
주의: 3,
경고: 2,
가이드값: 7.55,
평가: 'NG',
절감가이드방법: '냉동기 C.O.P 효율운전 점검 필요',
NG발생건수: 1,
},
{
No: 2,
fab: 'FAB002',
설비그룹: '냉동기고온',
설비명: 'UT_HT_CH102',
가이드명: '전류부하율 평균 편차',
주의: 3,
경고: 5,
가이드값: -1.421,
평가: 'NG',
절감가이드방법: '냉동기 전류부하율 추가 상승 검토 필요',
NG발생건수: 5,
},
{
No: 3,
fab: 'FAB001',
설비그룹: '공조기',
설비명: 'AHU_01',
가이드명: '온도 편차',
주의: 1,
경고: 0,
가이드값: 0.5,
평가: 'OK',
절감가이드방법: '정상 운전 중',
NG발생건수: 0,
},
{
No: 4,
fab: 'FAB003',
설비그룹: '보일러',
설비명: 'BLR_01',
가이드명: '연료 효율',
주의: 2,
경고: 1,
가이드값: 85.2,
평가: '주의',
절감가이드방법: '연료 효율 점검 필요',
NG발생건수: 2,
},
{
No: 5,
fab: 'FAB002',
설비그룹: '냉동기저온',
설비명: 'LT_CH201',
가이드명: 'C.O.P',
주의: 4,
경고: 3,
가이드값: 6.8,
평가: 'NG',
절감가이드방법: '저온 냉동기 효율 개선 필요',
NG발생건수: 3,
},
{
No: 6,
fab: 'FAB001',
설비그룹: '공조기',
설비명: 'AHU_02',
가이드명: '전력 사용량',
주의: 0,
경고: 0,
가이드값: 120,
평가: 'OK',
절감가이드방법: '정상 운전 중',
NG발생건수: 0,
},
{
No: 7,
fab: 'FAB003',
설비그룹: '냉동기고온',
설비명: 'UT_HT_CH103',
가이드명: 'C.O.P',
주의: 2,
경고: 2,
가이드값: 7.1,
평가: '주의',
절감가이드방법: '냉동기 효율 점검 필요',
NG발생건수: 1,
},
{
No: 8,
fab: 'FAB002',
설비그룹: '보일러',
설비명: 'BLR_02',
가이드명: '온도 편차',
주의: 1,
경고: 1,
가이드값: 1.2,
평가: '주의',
절감가이드방법: '온도 센서 점검 필요',
NG발생건수: 1,
},
{
No: 9,
fab: 'FAB001',
설비그룹: '냉동기저온',
설비명: 'LT_CH202',
가이드명: '전류부하율 평균 편차',
주의: 3,
경고: 4,
가이드값: -2.1,
평가: 'NG',
절감가이드방법: '전류부하율 이상 감지',
NG발생건수: 4,
},
{
No: 10,
fab: 'FAB003',
설비그룹: '공조기',
설비명: 'AHU_03',
가이드명: '전력 사용량',
주의: 0,
경고: 0,
가이드값: 110,
평가: 'OK',
절감가이드방법: '정상 운전 중',
NG발생건수: 0,
},
{
No: 11,
fab: 'FAB002',
설비그룹: '냉동기고온',
설비명: 'UT_HT_CH104',
가이드명: 'C.O.P',
주의: 2,
경고: 3,
가이드값: 6.9,
평가: '주의',
절감가이드방법: '냉동기 효율 점검 필요',
NG발생건수: 2,
},
{
No: 12,
fab: 'FAB001',
설비그룹: '보일러',
설비명: 'BLR_03',
가이드명: '연료 효율',
주의: 1,
경고: 1,
가이드값: 88.5,
평가: 'OK',
절감가이드방법: '정상 운전 중',
NG발생건수: 0,
}
]
// filtered data to show in the table
};
},
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 = {};
this.filteredData = this.data;
},
beforeDestroy() {
// routeCheck=false;
this.chkOpenTabList({ key: 'destroy', prgmId: myPrgmId });
},
methods: {
...mapActions({
getCodeList: 'modules/search/getCodeList',
getBlocMstrList: 'modules/search/getBlocMstrList',
}),
handleNgCntClick(record) {
this.$refs['EnrgEffcEqpmDetailPop'].showDetailModal = true;
},
handleGdIdxNmClick(record) {
this.$refs['EnrgEffcGdIdxDetPop'].showDetailModal = true;
},
async init() {
await this.getFab();
await this.getEqpmKind();
await this.getEqpmGrp();
// await this.getEqpm();
await this.getGdIdx();
await this.getOkFg();
this.filteredData = this.data;
if (this.routeData.fromDt != null) {
this.setPageData({
fromDt: this.routeData.fromDt,
});
} else {
this.setFromDt();
}
await this.gridInit();
},
search() {
this.filteredData = this.data.filter(item => {
return (
(!this.fabSelected || item.fab === this.fabSelected) &&
(!this.eqpmGrpSelected || item['설비그룹'] === this.eqpmGrpSelected) &&
(!this.selectValue06 || item['평가'] === this.selectValue06) &&
(!this.selectValue05 || item['가이드명'] === this.selectValue05)
);
});
},
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() {
this.eqpmKindList = [
{ label: 'Etcher', value: 'EQK001' },
{ label: 'Deposition', value: 'EQK002' },
{ label: 'Inspection', value: 'EQK003' },
];
this.eqpmKindSelected = 'EQK001';
this.setPageData({
eqpmKindList: this.eqpmKindList,
eqpmKindId: this.eqpmKindSelected,
});
},
async getFab() {
this.fabList = [
{ label: 'FAB001', value: 'FAB001' },
{ label: 'FAB002', value: 'FAB002' },
{ label: 'FAB003', value: 'FAB003' },
];
this.setPageData({
fabIdList: this.fabList,
fabId: this.fabSelected,
});
},
async getEqpmGrp() {
//설비그룹
this.eqpmGrpList = [
{ label: '냉동기고온', value: '냉동기고온' },
{ label: '냉동기저온', value: '냉동기저온' },
{ label: '공조기', value: '공조기' },
{ label: '보일러', value: '보일러' }
];
this.setPageData({
eqpmGrpId: this.eqpmGrpSelected,
eqpmGrpIdList: this.eqpmGrpList
})
},
async getEqpm(data) { },
async getGdIdx() {
this.selectValueList05 = [
{ label: 'C.O.P', value: 'C.O.P' },
{ label: '전류부하율 평균 편차', value: '전류부하율 평균 편차' },
{ label: '온도 편차', value: '온도 편차' },
{ label: '연료 효율', value: '연료 효율' },
{ label: '전력 사용량', value: '전력 사용량' }
];
this.setPageData({
gdIdxIdList: this.selectValueList05,
gdIdxId: this.selectValue05,
});
},
async getOkFg() {
this.selectValueList06 = [
{
label: '전체',
value: null,
},
{
label: 'OK',
value: 'OK',
},
{
label: '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,
},
});
const mockData = [
{
fabNm: 'FAB-A',
eqpmGrpNm: 'Group-3',
eqpmId: 'EQPM-001',
eqpmNm: 'Equipment-1',
gdIdxId: 'GD-001',
gdIdxNm: 'Guide-1',
careStndVal: 43.88,
warnStndVal: 98.56,
totVal: 31.62,
okFg: 'OK',
gdMeth: 'Method-C',
ngCnt: 1
},
{
fabNm: 'FAB-C',
eqpmGrpNm: 'Group-3',
eqpmId: 'EQPM-002',
eqpmNm: 'Equipment-2',
gdIdxId: 'GD-002',
gdIdxNm: 'Guide-2',
careStndVal: 42.59,
warnStndVal: 82.21,
totVal: 32.61,
okFg: 'OK',
gdMeth: 'Method-A',
ngCnt: 3
},
{
fabNm: 'FAB-A',
eqpmGrpNm: 'Group-2',
eqpmId: 'EQPM-003',
eqpmNm: 'Equipment-3',
gdIdxId: 'GD-003',
gdIdxNm: 'Guide-3',
careStndVal: 36.6,
warnStndVal: 68.64,
totVal: 50.99,
okFg: 'NG',
gdMeth: 'Method-B',
ngCnt: 8
},
// ... (7 more rows like these)
]
this.setGridData({
gridKey: this.gridName,
value: mockData,
});
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>
<style lang="scss">
.custom-search {
padding: 20px 0;
}
.ant-card-body {
padding: 0 !important;
}
.ant-table-thead > tr > th, .ant-table-tbody > tr > td {
padding: 8px;
}
.ant-modal-content .ant-modal-header {
border-bottom: none;
border-radius: 8px 8px 0 0;
}
.ant-modal-content {
border-radius: 8px;
}
</style>

View File

@ -1,64 +1,69 @@
<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>
<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="'설비종류'"
:labelCols="12"
:textCols="12"
:iconShow="true"
:customClass="'select-large'"
@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-col :cols="3">
<!-- 대상일 -->
<component
:is="'Datepicker'"
:parentPrgmId="myPrgmId"
:customClass="'select-large'"
:label="'대상일'"
:labelCols="3"
/>
</v-col>
<v-col :cols="6" class="text-right">
<!-- 조회버튼 -->
<BtnSearch style="margin-top: 20px" size="large" @click="search" />
</v-col>
</v-row>
</v-card>
</v-col>
</v-row>
<v-row style="height: 700px">
<v-col
:cols="6"
v-for="(item, index) in selectData"
:key="item.eqpmGrpId"
style="height: 50vh"
>
<!-- <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
@ -70,345 +75,376 @@
</div>
</v-card>
</v-col> -->
</v-row>
</div>
</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';
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();
mixins: [mixinGlobal, resize],
async asyncData(context) {
const myState = context.store.state;
myPrgmId = context.route.query.prgmId;
console.log("active menu:", myState.menuData);
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){
// 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: {},
});
// });
},
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,
},
});
let res = [
{
eqpmKindId: "냉동기저온",
eqpmKindNm: "냉동기저온",
},
{
eqpmKindId: "냉동기고온",
eqpmKindNm: "냉동기고온",
},
];
await this.getChartData(res);
if (res.length > 0) {
this.selectValueList01 = await res.map((item) => {
return {
// text: item.eqpmKindNm,
label: 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,
// },
// });
let res = ["aaa", "bbb"];
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.selectData = res.filter((item, i) => {
// return (
// res.findIndex((item2, j) => {
// return item.eqpmGrpId === item2.eqpmGrpId;
// }) === i
// );
// });
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,
// }
// });
this.selectData = [
{ eqpmGrpId: "G001", eqpmGrpNm: "Group A", otherProp: "..." },
{ eqpmGrpId: "G002", eqpmGrpNm: "Group B", otherProp: "..." },
];
},
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;
}
data.map(item => {
if (chartDataObj[item.eqpmGrpId] != null) {
chartDataObj[item.eqpmGrpId].push(item);
} else {
chartDataObj[item.eqpmGrpId] = [item];
}
});
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,
// }
// });
// 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),
});
// data.map((item) => {
// if (chartDataObj[item.eqpmGrpId] != null) {
// chartDataObj[item.eqpmGrpId].push(item);
// } else {
// chartDataObj[item.eqpmGrpId] = [item];
// }
// });
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)',
},
};
chartDataObj = {
group1: [
{ fabNm: "Fab A", okCnt: 120, ngCnt: 30 },
{ fabNm: "Fab B", okCnt: 150, ngCnt: 20 },
{ fabNm: "Fab C", okCnt: 100, ngCnt: 50 },
],
group2: [
{ fabNm: "Fab D", okCnt: 180, ngCnt: 10 },
{ fabNm: "Fab E", okCnt: 160, ngCnt: 25 },
{ fabNm: "Fab F", okCnt: 140, ngCnt: 35 },
],
};
// console.log("data : ", data);
data.map(item => {
xAxisData.push(item.fabNm);
});
// 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)",
},
};
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("data : ", data);
data.map((item) => {
xAxisData.push(item.fabNm);
});
// 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,
};
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"]),
});
await this.$nextTick();
this.setChartOption({
chartKey: this.chartNameList[number - 1],
value: chartOption,
});
this.loadChartList[number - 1] = true;
},
},
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'), // 조회 시작일
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';
// @import "@/assets/scss/common.scss";
// .echarts::v-deep > div > canvas:hover {
// cursor: pointer;

View File

@ -3,68 +3,51 @@
<v-row ref="searchFilter">
<v-col :cols="12">
<v-card class="searchFilter">
<v-row align="center" no-gutters>
<v-col :cols="3">
<v-row align="end" no-gutters>
<v-col :cols="4">
<!-- 차트목록 -->
<component
:is="'SelectBox'"
ref="SelectBox"
:propsValue="selectValue01"
:itemList="selectValueList01"
:label="'차트'"
@update:propsValue="selectValue01 = $event"
/>
<component :is="'SelectBox'" ref="SelectBox" :propsValue="selectValue01" :itemList="selectValueList01"
:label="'차트'" @update:propsValue="selectValue01 = $event" :textCols="12" customClass="select-large" />
</v-col>
<v-col :cols="4">
<!-- 대상일 -->
<component
:is="'Datepicker'"
:parentPrgmId="myPrgmId"
:label="'대상일'"
:labelCols="3"
/>
<component :is="'Datepicker'" :parentPrgmId="myPrgmId" :label="'대상일'" :labelCols="3" />
</v-col>
<v-col :cols="5" class="text-right">
<v-col :cols="4" class="text-right">
<BtnSearch @click="search" size="large" />
<!-- 조회버튼 -->
<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-col :cols="12" style="min-height: 50vh">
<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-row align="center" class="mx-2">
<v-col class="d-flex align-center">
<span class="arrowText">
<v-btn class="" outlined fab x-small color="#E6F4FF">
<v-icon>check</v-icon>
</v-btn>
고압반
</span>
<div class="col arrow-right mx-2 pa-0"></div>
<span class="arrowText">
분전반
<v-btn class="" outlined fab x-small color="#E6F4FF">
<v-icon>check</v-icon>
</v-btn>
</span>
</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 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"
/>
<component :ref="chartName" class="w100 h100" :is="loadChart ? 'Chart' : null" :parentPrgmId="myPrgmId"
:chartName="chartName" />
</div>
</div>
</v-card>
@ -117,7 +100,6 @@ export default {
selectValue01: null,
loadChart: false,
chartName: 'sankeyChart',
loadChart: false,
};
},
computed: {
@ -174,8 +156,11 @@ export default {
defaultData: defaultData,
});
},
async created() {},
async created() { },
async mounted() {
this.initTest();
return;
this.init();
// document.querySelector('.icon_arrow').style.width = document.querySelector('.iconArrowCols').clientWidth-20 + "px";
},
@ -190,6 +175,80 @@ export default {
...mapActions({
getCodeList: 'modules/search/getCodeList',
}),
initTest() {
const randomNumber = n => Math.floor(Math.random() * n) + 1;
const makeData = [
{ name: 'A' },
{ name: 'B' },
{ name: 'B2' },
{ name: 'C1' },
{ name: 'C2' },
{ name: 'C3' },
// { name: 'D' }
];
const makeLinks = [
{ source: 'A', target: 'B', value: 100 },
{ source: 'A', target: 'B2', value: 50 },
{ source: 'B', target: 'C1', value: 50 },
{ source: 'B', target: 'C2', value: 50 },
{ source: 'B2', target: 'C3', value: 50 },
];
for (let index = 0; index < 10; index++) {
makeData.push(...[
{ name: 'D' + index },
]);
makeLinks.push(...[
{ source: 'C' + randomNumber(3), target: 'D' + index, value: randomNumber(50) },
]);
}
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 });
// console.log("----DEBUG chart-options-------", { chartOption });
this.$nextTick(() => {
this.loadChart = true;
});
},
async init() {
await this.getEnrgMapChartList();
this.setFromDt();
@ -367,7 +426,7 @@ export default {
for (var i = 0; i < makeData.length; i++) {
makeData[i]['label'] = {
show: true,
formatter: function(obj) {
formatter: function (obj) {
var retVal = makeLinks.filter(n => {
return n.target == obj.name;
});
@ -381,7 +440,7 @@ export default {
},
};
makeData[i]['tooltip'] = {
formatter: function(obj) {
formatter: function (obj) {
var retVal = makeLinks.filter(n => {
return n.target == obj.name;
});
@ -465,7 +524,7 @@ export default {
// });
//1차 정렬
tempMakeLinks.sort(function(a, b) {
tempMakeLinks.sort(function (a, b) {
if (a.source == b.source) {
return b.value - a.value;
}
@ -530,45 +589,41 @@ const defaultData = {
},
};
</script>
<style lang="scss">
// .icon-arrow {
// display:inline-block;
// position: relative;
// height: 60px;
<style lang="scss" scoped>
@each $theme in dark, light {
.v-application.#{$theme}-mode {
.arrowText {
.v-btn {
background-color: map-deep-get($config, #{$theme}, "arow-line-btn-bg-color"); // #E6F4FF;
border: none;
// // top: 20px;
// // left: 0;
.v-icon {
color: map-deep-get($config, #{$theme}, "arow-line-color"); // #1677FF;
}
}
}
// }
// .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)
);
.arrow-right {
width: 100%;
height: 1px;
display: flex;
background-color: map-deep-get($config, #{$theme}, "arow-line-color"); //#1677FF;
}
}
}
// .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>

View File

@ -1,127 +1,81 @@
<template>
<div class="l-layout">
<PageTitle text="효율성 지표 보고서" />
<v-row ref="searchFilter">
<v-col :cols="12">
<v-card class="searchFilter">
<v-row align="center" no-gutters>
<v-row align="start" no-gutters>
<v-col :cols="3">
<!-- 설비종류 -->
<component
:is="'SelectBox'"
:propsValue="selectValue01"
:itemList="selectValueList01"
:label="'설비종류'"
@update:propsValue="selectValue01 = $event"
/>
<component :is="'SelectBox'" :propsValue="selectValue01" :itemList="selectValueList01" :label="'설비종류'"
@update:propsValue="selectValue01 = $event" :textCols="12" customClass="select-large" />
</v-col>
<v-col :cols="3">
<!-- 설비그룹 -->
<component
:is="'SelectBox'"
:propsValue="selectValue02"
:itemList="selectValueList02"
:label="'설비그룹'"
@update:propsValue="selectValue02 = $event"
/>
<component :is="'SelectBox'" :propsValue="selectValue02" :itemList="selectValueList02" :label="'설비그룹'"
@update:propsValue="selectValue02 = $event" :textCols="12" customClass="select-large" />
</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" />
<component ref="fabSelect" :is="'SelectBoxMulti'" :propsValue="selectValue03"
:itemList="selectValueList03" :label="'FAB'" :multiple="fabMultiple"
@update:propsValue="selectValue03 = $event" :labelCols="12" :textCols="12" customClass="select-large" />
</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"
/>
<component ref="effcIdxSelect" :is="'SelectBoxMulti'" :propsValue="selectValue04"
:itemList="selectValueList04" :label="'효율지표'" :multiple="effcIdxMultiple"
@update:propsValue="selectValue04 = $event" :labelCols="12" :textCols="12" customClass="select-large" />
</v-col>
<v-col :cols="4">
<v-col :cols="3">
<!-- 대상일 -->
<component
:is="'Datepicker'"
:parentPrgmId="myPrgmId"
:label="'대상일'"
:labelCols="3"
/>
<component :is="'Datepicker'" :parentPrgmId="myPrgmId" :label="'대상일'" :labelCols="3" />
</v-col>
<v-col :cols="6" class="text-right d-flex align-end justify-end align-self-end">
<!-- 조회버튼 -->
<a-button type="primary" class="d-inline-flex-1 mr-1" size="large" @click="createExcel()">엑셀</a-button>
<BtnSearch @click="search" size="large" />
</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">
<v-row ref="contents-rm" >
<v-col :cols="12" style="min-height: 50vh">
<v-card class="pb-5 v-card v-sheet">
<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 ref="chartParent" style="height: 100%">
<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">
<v-col :cols="12" style="min-height: 50vh">
<v-card class="pb-5 v-card v-sheet">
<div class="d-flex align-center justify-space-between pa-5">
<v-row>
<v-row class="justify-space-between">
<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 :cols="5"></v-col> -->
<v-col :cols="4" class="d-flex justify-space-end" >
<component class="text-right mr-2" ref="EqpmSelectPop" :is="'EqpmSelectPop'" :label="''" :labelCols="1"
:textCols="12" :valueNm="'eqpmId'" :parentPrgmId="myPrgmId" :eqpmGrpDisabled="true"
:fabDisabled="true" :isMulti="true" />
<a-button @click="getEqpmData()" type="primary" >조회</a-button>
</v-col>
<!-- <v-col :cols="1">
</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 ref="chartParent" style="height: 100%">
<component class="w100 h100" :is="loadChart02 ? 'Chart' : null" :parentPrgmId="myPrgmId"
:chartName="chartName02" :ref="chartName02" />
</div>
</v-card>
</v-col>
@ -144,6 +98,7 @@ import Chart from '~/components/common/Chart';
import EqpmSelectPop from '~/components/common/modal/EqpmSelectPop';
import DateUtility from '~/plugins/dateUtility';
import XLSX from 'xlsx';
import PageTitle from "~/components/common/PageTitle";
let myTitle;
let myPrgmId;
@ -175,6 +130,7 @@ export default {
EqpmSelectPop,
DateUtility,
XLSX,
PageTitle,
},
data() {
return {
@ -308,8 +264,11 @@ export default {
defaultData: defaultData,
});
},
created() {},
created() { },
async mounted() {
console.log('----DEBUG---');
await this.initTest();
// End Debug Test---
await this.init();
this.initedFlag = true;
},
@ -328,6 +287,71 @@ export default {
...mapActions({
getCodeList: 'modules/search/getCodeList',
}),
async initTest() {
// debug test
console.log('----DEBUG init pages----');
const seriesName1 = ['B01. 냉동기전력량', ' B01.COP'];
const seriesName2 = [
'UT_HT_CH101:냉동기전혁당', 'UT_HT_CH102:냉동기전력량', 'UT_HT_CH201:냉동기전력당',
'UT_HT_CH202:냉동기전력당', 'UT_HT_CH101:COP', 'UT_HT_CH102:COP',
'UT_HT _CH201:COP', 'UT_HT _CH202:COP'
];
// await this.getEqpmGrpData();
const xAxisData = [];
const totVal = [];
const totVa2 = [];
for (var i = 0; i < 10; i++) {
xAxisData.push(DateUtility.addDate(i, 'DD', this.pageData.fromDt));
seriesName1.forEach(name => {
totVal[name] = totVal[name] ? totVal[name] : [];
totVal[name].push(Math.random() * 100);
})
seriesName2.forEach(name => {
totVa2[name] = totVa2[name] ? totVa2[name] : [];
totVa2[name].push(Math.random() * 100);
})
}
// const seriesData = [120, 200, 150, 80, 70, 110, 130];
const seriesData = seriesName1.map(name => ({ name, type: 'line', data: totVal[name] }));
const chartOption = {
legend: {
icon: 'circle',
top: 'top',
},
grid: {
top: '10%',
bottom: '20%',
},
yAxis: {},
xAxis: {
data: xAxisData,
},
series: seriesData,
tooltip: {},
// type: 'line',
// dataZoom: dataZoom,
};
// console.log('-----DEBUG test data chart----', {
// chartOption,
// fromDt: this.pageData.fromDt
// });
this.setChartOption({ chartKey: this.chartName01, value: chartOption });
this.setChartOption({
chartKey: this.chartName02,
value: {
...chartOption,
series: seriesName2.map(name => ({ name, type: 'line', data: totVa2[name] })),
},
});
this.$nextTick(() => {
this.loadChart01 = true;
this.loadChart02 = true;
});
// End debug
},
async init() {
await this.getFab();
await this.getEqpmKind();
@ -486,7 +510,6 @@ export default {
this.setPageData({
chartData01: res,
});
this.setChartData(res);
},
async getEqpmData() {
@ -677,6 +700,7 @@ export default {
this.loadChart01 = false;
let xAxisData = [];
let seriesData = [];
var diff = DateUtility.diff(
this.pageData.fromDt,
this.pageData.toDt,
@ -744,6 +768,7 @@ export default {
},
];
}
var chartOption = {
legend: {
top: 'top',
@ -892,7 +917,7 @@ const defaultData = {
defaultRange: {
CYC_DAY: 30,
},
fromDt: '',
fromDt: '20250601',
toDt: Utility.setFormatDate(new Date(), 'YYYYMMDD'),
modalData: {},
eqpmGrpChart: Utility.defaultChartOption(true),

File diff suppressed because it is too large Load Diff

View File

@ -3,50 +3,28 @@
<v-row ref="searchFilter">
<v-col :cols="12">
<v-card class="searchFilter">
<v-row align="center" no-gutters>
<v-col :cols="2">
<v-row align="end" no-gutters>
<v-col :cols="2.5">
<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 :cols="2.5">
<component :is="'SelectBox'" ref="SelectBox1" :propsValue="selectValue01" :itemList="selectValueList01"
:label="'FAB'" @update:propsValue="selectValue01 = $event" :iconShow="false" />
</v-col>
<v-col :cols="3">
<component
:is="'SelectBox'"
ref="SelectBox2"
:propsValue="selectValue02"
:itemList="selectValueList02"
:label="'설비종류'"
@update:propsValue="selectValue02 = $event"
/>
<v-col :cols="2.5">
<component :is="'SelectBox'" ref="SelectBox2" :propsValue="selectValue02" :itemList="selectValueList02"
:label="'설비종류'" @update:propsValue="selectValue02 = $event" :iconShow="false" />
</v-col>
<v-col :cols="3">
<component
:is="'SelectBox'"
ref="SelectBox3"
:propsValue="selectValue03"
:itemList="selectValueList03"
:label="'설비그룹'"
@update:propsValue="selectValue03 = $event"
/>
<v-col :cols="2.5">
<component :is="'SelectBox'" ref="SelectBox3" :propsValue="selectValue03" :itemList="selectValueList03"
:label="'설비그룹'" @update:propsValue="selectValue03 = $event" :iconShow="false" />
</v-col>
<v-col :cols="1" class="text-right">
<BtnSearch @click="search" />
<component
ref="EnrgUsePlanModiPop"
:is="'EnrgUsePlanModiPop'"
:label="'test'"
:parentPrgmId="myPrgmId"
@gridEditingFinish="gridEditingFinish"
/>
<BtnSearch @click="search" />
<v-col>
</v-col>
<component ref="EnrgUsePlanModiPop" :is="'EnrgUsePlanModiPop'" :label="'test'" :parentPrgmId="myPrgmId"
@gridEditingFinish="gridEditingFinish" />
</v-row>
</v-card>
</v-col>
@ -55,34 +33,25 @@
<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"
/>
<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"
/>
<component :ref="gridName" :is="loadGrid ? 'Grid' : null" :gridName="gridName" :parentPrgmId="myPrgmId"
:editorGrid="true" @getRowsData="getRowData" :dataPath="dataPathMock" />
</div>
</div>
</v-card>
</v-col>
</v-row>
</div>
</template>
<script>
import { mapState, mapActions } from 'vuex';
import { mapState, mapActions, mapMutations } from 'vuex';
import mixinGlobal from '@/mixin/global.js';
import { resize } from '@/mixin/resize.js';
import SelectBox from '@/components/common/select/SelectBox';
@ -139,6 +108,9 @@ export default {
fromDt: new Date().getFullYear(),
rowKey: null,
edtingFinishFlag: 'Y',
dataPathMock: {
// "grid01": {}
},
// gridName: 'rowGrid',
};
},
@ -196,8 +168,12 @@ export default {
defaultData: defaultData,
});
},
created() {},
created() { },
async mounted() {
// -------
this.initTest();
return;
// ========End test===========
await this.init();
this.initedFlag = true;
},
@ -210,6 +186,122 @@ export default {
getBlocMstrList: 'modules/search/getBlocMstrList',
getAddInfoList: 'modules/search/getAddInfoList',
}),
...mapMutations({
setPageData: 'setPageData',
}),
initTest() {
let _this = this;
// _this.setPageData({ popupDialogFg: true });
class MockCustumButton {
constructor(props) {
const { grid, rowKey, columnInfo } = props;
const value = columnInfo.renderer.options.value;
const elDiv = document.createElement('div');
elDiv.innerHTML = `<span>${value}</span>`;
$(elDiv).addClass('tui-grid-cell-content d-flex justify-space-between');
const el = document.createElement('button');
$(el).addClass('edit-btn blue--text');
el.innerText = 'Edit';
el.addEventListener('click', function (event) {
// console.log("------DEBUG----_this:", _this);
// _this.setPageData({ eqpmNm: selectedGridData[0]?.eqpmNm });
_this.setPageData({ popupDialogFg: true });
});
elDiv.appendChild(el);
this.elDiv = elDiv;
}
getElement() {
return this.elDiv;
}
}
const mockData = {
column: [
{ header: 'No', name: 'rowNum', align: 'center', width: 40 },
{ header: 'FAB', name: 'fab', align: 'left', width: 80 },
{ header: '설비 그룹', name: 'eqpmGrpNm', align: 'left', minWidth: 150 },
// {
// header: '설비명', name: 'eqpmNm', align: 'left', minWidth: 150,
// formatter: ({ value, row }) => {
// return `
// <div class="d-flex justify-space-between">
// <span>${value}</span>
// <button class="edit-btn blue--text" data-row='${JSON.stringify(row)}'>Edit</button
// </div>
// `;
// }
// },
{
header: '설비명',
name: 'eqpmNm',
width: 70,
align: 'left',
minWidth: 150,
renderer: {
type: MockCustumButton,
options: {
value: '계획수정',
},
},
},
{
header: '구분', name: 'gubun', align: 'left', width: 80,
formatter({ value }) {
let retVal = '';
if (value == '1RSLT') {
retVal = '전년실적';
} else if (value == '2PLAN') {
retVal = '계획';
} else {
retVal = value;
}
return retVal;
},
},
{ header: '1월', name: 'jan', align: 'right', width: 80 },
{ header: '2월', name: 'feb', align: 'right', width: 80 },
{ header: '3월', name: 'mar', align: 'right', width: 80 },
{ header: '4월', name: 'apr', align: 'right', width: 80 },
{ header: '5월', name: 'may', align: 'right', width: 80 },
{ header: '6월', name: 'jun', align: 'right', width: 80 },
{ header: '7월', name: 'jul', align: 'right', width: 80 },
{ header: '8월', name: 'aug', align: 'right', width: 80 },
{ header: '9월', name: 'sep', align: 'right', width: 80 },
{ header: '10월', name: 'oct', align: 'right', width: 80 },
{ header: '11월', name: 'nov', align: 'right', width: 80 },
{ header: '12월', name: 'dec', align: 'right', width: 80 }
],
data: dataPathDataExample,
defaultRow: dataPathDataExample,
option: {
columnOptions: {
resizable: true,
},
header: {
height: 65,
complexColumns: [
{
header: '2025 년',
name: 'yyyyCol',
childNames: [
'jan', 'feb', 'mar', 'apr', 'may', 'jun',
'jul', 'aug', 'sep', 'oct', 'nov', 'dec'
],
},
],
}
}
};
this.dataPathMock[this.gridName] = mockData;
this.$nextTick(() => {
this.loadGrid = true;
});
},
async init() {
await this.getFab();
await this.getEqpmKind();
@ -357,7 +449,7 @@ export default {
if (!this.disabled) {
// hover 기능 구현
this.el.addEventListener('mouseover', function(event) {
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'));
@ -366,7 +458,7 @@ export default {
// 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) {
this.el.addEventListener('mouseout', function (event) {
// rgb(71, 119, 217) // light
// el.style.backgroundColor = '#144985'; // dark
// console.log('event',event.fromElement);
@ -374,7 +466,7 @@ export default {
// el.style.backgroundColor = btnColor['mouseOut'];
});
// click 이벤트
this.el.addEventListener('click', function(event) {
this.el.addEventListener('click', function (event) {
let gridData = grid.store.data.rawData;
let rowNum = gridData[rowKey].rowNum;
let selectedGridData = gridData.filter(item => {
@ -445,6 +537,12 @@ export default {
minWidth: 200,
align: 'left',
// hidden: true,
formatter: ({ value, row }) => {
return `
<span>${value}</span>
<button class="edit-btn" data-row='${JSON.stringify(row)}'>Edit</button>
`;
}
},
{
header: '',
@ -525,7 +623,7 @@ export default {
let selectedGridData = gridData.filter(item => {
return item.rowNum == data.rowNum;
});
await this.$nextTick(() => {});
await this.$nextTick(() => { });
this.setPageData({
rowGrid2SelectData: selectedGridData,
});
@ -724,8 +822,8 @@ export default {
dataArr[i][qty] == ''
? null
: parseInt(dataArr[i][qty]) == 0
? 0
: dataArr[i][qty];
? 0
: dataArr[i][qty];
dataList.push(temp);
}
}
@ -867,18 +965,110 @@ const defaultData = {
},
},
};
const dataPathDataExample = [
{
rowNum: 1,
fab: 'B01',
eqpmGrpNm: '방송기술운',
eqpmNm: 'U/T_LT_CH101',
gubun: '전력량',
jan: 110000,
feb: 112000,
mar: 115000,
apr: 117000,
may: 120000,
jun: 118000,
jul: 119000,
aug: 121000,
sep: 122000,
oct: 123000,
nov: 124000,
dec: 125000
},
{
rowNum: 2,
fab: 'B02',
eqpmGrpNm: '방송기술운',
eqpmNm: 'U/T_LT_CH102',
gubun: '전력량',
jan: 81000,
feb: 82000,
mar: 83000,
apr: 84000,
may: 85000,
jun: 86000,
jul: 87000,
aug: 88000,
sep: 89000,
oct: 90000,
nov: 91000,
dec: 92000
},
{
rowNum: 3, fab: 'C01', eqpmGrpNm: '방송기술운', eqpmNm: 'U/T_LT_CH124', gubun: '수도량',
jan: 106178, feb: 104740, mar: 92283, apr: 116081, may: 98945, jun: 126579,
jul: 90690, aug: 124243, sep: 97524, oct: 84072, nov: 88160, dec: 118183
},
{
rowNum: 4, fab: 'B01', eqpmGrpNm: '방송기술운', eqpmNm: 'U/T_LT_CH103', gubun: '가스량',
jan: 80442, feb: 102867, mar: 114939, apr: 106335, may: 81743, jun: 83711,
jul: 86114, aug: 97432, sep: 84146, oct: 84775, nov: 117921, dec: 119417
},
{
rowNum: 5, fab: 'B01', eqpmGrpNm: '설비운영팀', eqpmNm: 'U/T_LT_CH156', gubun: '전력량',
jan: 90341, feb: 94072, mar: 122754, apr: 85471, may: 90813, jun: 116831,
jul: 90856, aug: 109437, sep: 94029, oct: 96075, nov: 127067, dec: 102503
},
{
rowNum: 6, fab: 'B03', eqpmGrpNm: '방송기술운', eqpmNm: 'U/T_LT_CH183', gubun: '가스량',
jan: 104163, feb: 107012, mar: 104631, apr: 83055, may: 106311, jun: 117306,
jul: 86434, aug: 117087, sep: 118414, oct: 91499, nov: 93829, dec: 94192
},
{
rowNum: 7, fab: 'C01', eqpmGrpNm: '전력관리부', eqpmNm: 'U/T_LT_CH158', gubun: '가스량',
jan: 84821, feb: 128234, mar: 116883, apr: 116718, may: 114738, jun: 88297,
jul: 93840, aug: 84700, sep: 98360, oct: 87021, nov: 113098, dec: 94734
},
{
rowNum: 8, fab: 'B02', eqpmGrpNm: '방송기술운', eqpmNm: 'U/T_LT_CH179', gubun: '가스량',
jan: 128714, feb: 88797, mar: 124808, apr: 109283, may: 113141, jun: 82873,
jul: 114993, aug: 129108, sep: 100885, oct: 125730, nov: 92127, dec: 122286
},
{
rowNum: 9, fab: 'C01', eqpmGrpNm: '전력관리부', eqpmNm: 'U/T_LT_CH191', gubun: '전력량',
jan: 107258, feb: 108424, mar: 113604, apr: 116648, may: 124149, jun: 129978,
jul: 112215, aug: 129602, sep: 93551, oct: 111272, nov: 89736, dec: 128423
},
{
rowNum: 10, fab: 'B02', eqpmGrpNm: '방송기술운', eqpmNm: 'U/T_LT_CH104', gubun: '전력량',
jan: 82089, feb: 102793, mar: 96784, apr: 85238, may: 86153, jun: 123849,
jul: 115095, aug: 129484, sep: 102109, oct: 80976, nov: 119841, dec: 106309
},
{
rowNum: 11, fab: 'C02', eqpmGrpNm: '전력관리부', eqpmNm: 'U/T_LT_CH139', gubun: '전력량',
jan: 128592, feb: 95647, mar: 85982, apr: 126824, may: 87928, jun: 128967,
jul: 94637, aug: 107530, sep: 122533, oct: 97546, nov: 112110, dec: 126250
},
{
rowNum: 12, fab: 'C01', eqpmGrpNm: '설비운영팀', eqpmNm: 'U/T_LT_CH109', gubun: '전력량',
jan: 106530, feb: 91716, mar: 111104, apr: 102663, may: 108912, jun: 91464,
jul: 121245, aug: 90785, sep: 120586, oct: 105718, nov: 96191, dec: 111513
}
];
</script>
<style lang="scss">
// @import '@/assets/scss/common.scss';
<style lang="scss" scoped>
@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,
&:hover>.colrowspan {
background-color: map-deep-get($config,
#{$theme},
'tui-grid-cell-backgroundColor'
) !important;
@ -888,10 +1078,10 @@ const defaultData = {
}
}
}
&-cell {
&.row-selected.colrowspan {
background-color: map-deep-get(
$config,
background-color: map-deep-get($config,
#{$theme},
'tui-grid-cell-backgroundColor'
) !important;

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

View File

@ -562,7 +562,7 @@ const defaultData = {
}
}
</script>
<style lang="scss">
<style lang="scss" scoped>
// #tooltipTargetElement_0:hover + #tooltipElement_0{
// display : block
// }

File diff suppressed because it is too large Load Diff

View File

@ -358,7 +358,7 @@ export default {
const defaultData = {};
</script>
<style lang="scss">
<style lang="scss" scoped>
.v-avatar {
border-radius: 21px;
font-size: 1.75rem;

View File

@ -76,9 +76,9 @@ export default {
},
data: () => ({
valid: true,
userId: 'test',
userPw: '1234',
userComId: 'SKCC',
userId: '',
userPw: '',
userComId: '',
alertItem: {},
comIdHidden: true,
}),
@ -113,38 +113,38 @@ export default {
this.$refs.userComId.focus();
},
async mberCheck() {
if (this.userId == '') {
// alert("사용자 아이디는 필수항목입니다.");
this.alertItem = {
label: '경고',
message: '사용자 아이디를 입력해주세요',
};
this.$refs['alertPop'].dialog = true;
this.focusId();
return;
}
// if (this.userId == '') {
// // alert("사용자 아이디는 필수항목입니다.");
// this.alertItem = {
// label: '경고',
// message: '사용자 아이디를 입력해주세요',
// };
// this.$refs['alertPop'].dialog = true;
// this.focusId();
// return;
// }
if (this.userPw == '') {
// alert("비밀번호는 필수항목입니다.");
this.alertItem = {
label: '경고',
message: '비밀번호를 입력해주세요',
};
this.$refs['alertPop'].dialog = true;
this.focusPw();
return;
}
// if (this.userPw == '') {
// // alert("비밀번호는 필수항목입니다.");
// this.alertItem = {
// label: '경고',
// message: '비밀번호를 입력해주세요',
// };
// this.$refs['alertPop'].dialog = true;
// this.focusPw();
// return;
// }
if (this.userComId == '') {
// alert("회사코드는 필수항목입니다.");
this.alertItem = {
label: '경고',
message: '회사코드를 입력해주세요',
};
this.$refs['alertPop'].dialog = true;
this.focusComId();
return;
}
// if (this.userComId == '') {
// // alert("회사코드는 필수항목입니다.");
// this.alertItem = {
// label: '경고',
// message: '회사코드를 입력해주세요',
// };
// this.$refs['alertPop'].dialog = true;
// this.focusComId();
// return;
// }
await this.loginChk();
},
async loginChk() {
@ -156,25 +156,15 @@ export default {
userId: this.userId,
userPswd: this.userPw,
};
console.log('asdasd' + JSON.stringify( DOMAIN) + params)
const res = await this.$axios.post(DOMAIN + apiUrl, { params: params });
if (res.data.retnCd === -9001) {
alert(res.data.retnMsg);
return {};
} else {
const femsSessionCookie = res.data.dataset.FEMS_SESSION;
const femsSessionCookie = 3434;
const FEMS_SESSION = femsSessionCookie;
$cookie.set('FEMS_SESSION', FEMS_SESSION);
this.setUserInfo(res.data.dataset.userInfo);
console.log('FEMS_SESSION', FEMS_SESSION);
console.log('$cookie.get', $cookie.get('FEMS_SESSION'));
console.log('userInfo', JSON.stringify(res.data.dataset.userInfo));
// alert("임시로 로그인 처리 되었습니다. dashboard 페이지로 이동합니다.");
this.$router.push({ path: this.myHome.root });
}
},
},
};