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

init dev-push code ui base design

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

368
components/common/modal/EgrpPysclQtyPop.vue
View File

@ -1,119 +1,84 @@
<template>
<v-row class="search-box" align="center" no-gutters>
<v-col :cols="option.labelCols">
<v-row class="search-box" align="center">
<v-col :cols="option.labelCols" class="py-0">
<label for="" class="search-box-label">
<v-icon
x-small
:color="item.required ? '#fb8200' : 'primary'"
class="mr-1"
>mdi-record-circle</v-icon
>
<v-icon v-if="item.iconShow" small
:class="['mr-1', item.required ? 'icon-orange' : 'icon-blue']">$icoBulletPoint</v-icon>
{{ option.labelContent }}
</label>
</v-col>
<v-col :cols="option.textCols">
<v-text-field
:readonly="item.readonly || false"
v-model="selectValue"
append-icon="mdi-magnify"
class="v-input__custom"
@click="dialogOpenCloseEvent(dialog)"
outlined
:hide-details="true"
:required="item.required || false"
:disabled="item.disabled || false"
></v-text-field>
</v-col>
<v-col :cols="option.textCols" class="py-0">
<v-text-field :readonly="item.readonly || false" v-model="selectValue" append-icon=""
class="v-input__custom" @click="dialogOpenCloseEvent(dialog)" outlined :hide-details="true"
:required="item.required || false" :disabled="item.disabled || false"><template v-slot:append>
<!-- Custom SVG icon -->
<v-icon>$icoSearch</v-icon>
<v-dialog v-model="dialog" scrollable width="540px">
</template></v-text-field>
</v-col>
<v-dialog v-model="dialog" scrollable width="800px">
<v-card style="height: 100%">
<v-card-title class="pa-5 d-flex align-center justify-space-between">
<v-card-title class="px-6 py-4 d-flex align-center justify-space-between">
<span class="custom-title-4">{{ option.modalTitle }}</span>
<v-btn
icon
tile
:ripple="false"
@click="dialogOpenCloseEvent(dialog)"
>
<v-icon>mdi-close</v-icon>
</v-btn>
<a-button icon="close" type="text" @click="dialogOpenCloseEvent(dialog)"></a-button>
</v-card-title>
<div class="pa-5">
<v-row align="center" no-gutters>
<v-col :cols="12">
<component
:is="'SelectBox'"
ref="SelectBox1"
:labelCols="2"
:textCols="6"
:disabled="option.eqpmGrpDisableFlag"
:propsValue="selectValue01"
:itemList="selectValueList01"
:label="'설비그룹'"
@update:propsValue="selectValue01 = $event"
:readonly="
item.selectBoxReadonly != undefined
? item.selectBoxReadonly
: false
"
/>
<div class="px-6 py-4 pt-0">
<v-row align="center">
<v-col :cols="5">
<component :is="'SelectBox'" ref="SelectBox1" :labelCols="12" :textCols="12"
:disabled="option.eqpmGrpDisableFlag" :propsValue="selectValue01" :iconShow="true"
:itemList="selectValueList01" :label="'설비그룹'"
@update:propsValue="selectValue01 = $event" :readonly="item.selectBoxReadonly != undefined
? item.selectBoxReadonly
: false
" />
</v-col>
</v-row>
<v-row align="center" no-gutters>
<v-col :cols="2">
<label for="" class="search-box-label">
<v-icon x-small color="primary" class="mr-1"
>mdi-record-circle</v-icon
>
물리량명
</label>
</v-col>
<v-col :cols="6">
<v-text-field
append-icon="mdi-magnify"
class="v-input__custom"
outlined
:hide-details="true"
v-model="searchWord"
@keyup.enter="search"
></v-text-field>
</v-col>
<v-spacer></v-spacer>
<v-col cols="4" class="text-right">
<v-btn :ripple="false" @click="search()">
조회
</v-btn>
<!-- <v-btn :ripple="false" @click="initSearch()">
<v-col :cols="7">
<v-row align="center" no-gutters>
<v-col :cols="12">
<label for="" class="search-box-label">
<v-icon small :class="['mr-1 icon-blue']">$icoBulletPoint</v-icon>
물리량명
</label>
</v-col>
<v-col :cols="9">
<v-text-field append-icon="" class="v-input__custom" outlined :hide-details="true"
v-model="searchWord" @keyup.enter="search"><template v-slot:append>
<!-- Custom SVG icon -->
<v-icon>$icoSearch</v-icon>
</template></v-text-field>
</v-col>
<v-spacer></v-spacer>
<v-col cols="3" class="text-right">
<a-button icon="search" type="primary" @click="search()"
class="search-button">조회</a-button>
<!-- <v-btn :ripple="false" @click="initSearch()">
초기화
</v-btn> -->
</v-col>
</v-row>
</v-col>
</v-row>
</div>
<v-divider></v-divider>
<div :style="'height: 429px;'">
<!-- <div :style="{ height: 'calc(100% - 213px)' }"> -->
<div ref="modalGridParent" class="h100 w100">
<component
:is="loadGrid && dialog ? 'Grid' : null"
:gridName="grid_01"
:dataPath="searchParam.pyscModalData.egrpPysclQtyPop"
:parentPrgmId="parentPrgmId"
@getRowsData="getRowData"
@dblClick="setUpdate($event)"
/>
<div :style="'height: calc(50vh)'">
<div ref="modalGridParent" class="h100 px-6 py-4">
<component :is="loadGrid && dialog ? 'Grid' : null" :gridName="grid_01"
:dataPath="searchParam.pyscModalData.egrpPysclQtyPop" :parentPrgmId="parentPrgmId"
@getRowsData="getRowData" @dblClick="setUpdate($event)" />
</div>
</div>
<v-card-actions class="pa-5 d-flex align-center justify-center">
<v-btn :ripple="false" @click="setUpdate($event)">확인</v-btn>
<v-btn :ripple="false" @click="dialogOpenCloseEvent(dialog)"
>닫기</v-btn
>
<v-btn
v-if="item.closeBtnFg || false"
:ripple="false"
@click="deleteBtnAction($event)"
>삭제</v-btn
>
<v-card-actions class="px-6 py-4 d-flex align-center justify-end">
<!-- <v-btn :ripple="false" @click="setUpdate($event)">확인</v-btn>
<v-btn :ripple="false" @click="dialogOpenCloseEvent(dialog)">닫기</v-btn> -->
<!-- <v-btn v-if="item.closeBtnFg || false" :ripple="false" @click="deleteBtnAction($event)">삭제</v-btn> -->
<a-button :ripple="false" @click="setUpdate($event)" class="mr-2">확인</a-button>
<a-button :ripple="false" type="primary" @click="dialogOpenCloseEvent(dialog)"
class="mr-2">닫기</a-button>
<a-button v-if="item.closeBtnFg || false" :ripple="false" icon="delete" type="danger" ghost danger
@click="deleteBtnAction($event)">삭제</a-button>
</v-card-actions>
</v-card>
</v-dialog>
@ -165,7 +130,7 @@ export default {
type: String,
require: false,
},
eqpmGrpDisableFlag:{
eqpmGrpDisableFlag: {
type: Boolean,
require: false,
default: false
@ -185,7 +150,23 @@ export default {
return {
dialog: false,
loadGrid: false,
loadGrid: true,
dataPathPopExample: {
"rowGrid": {
data: [
{
'calcProc': 'AVG_CNT2',
'argCnt': '2',
'calcDesc': '두개 변수에 대한 평균'
}
],
column: [
{ header: '계산코드', name: 'calcProc', width: 150 },
{ header: '아규먼트갯수', name: 'argCnt', align: 'center', width: 100 },
]
}
},
grid_01: 'grid_01',
myModalKey: 'egrpPysclQtyPop',
modalDataKey: 'pyscModalData',
@ -300,7 +281,7 @@ export default {
await this.setSelectValueList01();
this.init();
},
mounted() {},
mounted() { },
methods: {
...mapMutations({
setPageData: 'setPageData',
@ -317,39 +298,46 @@ export default {
},
async setSelectValueList01() {
// form으로 popup 사용할 때 인자로 eqpmKindId, eqpmGrpId 보내줘야한다.
let res = await this.postApiReturn({
apiKey: 'selectEqpmGrpCodeList',
resKey: 'eqpmGrpCodeLists',
sendParam: {
eqpmKindId:
this.item.eqpmKindId != undefined
? this.item.eqpmKindId
: this.searchParam.eqpmKindId,
},
// form을 통해 popup을 사용할 경우 -> this.item.eqpmKindId 사용
// 부모 페이지에서 설비종류인 eqpmKindId 값을 꼭 가져와야한다.
});
if (res.length > 0) {
this.selectValueList01 = await res.map(obj => {
return {
text: obj.eqpmGrpNm,
value: obj.eqpmGrpId,
};
});
// form을 통해 popup을 사용할 경우 -> this.item.eqpmGrpId 사용
// 부모 페이지에서 설비그룹을 선택한 값이 있다면(eqpmGrpId) 그 값으로 바인딩 아닐 경우 조회한 데이터의 첫번째 값으로 선택
// console.log('this.item.eqpmGrpId : ', this.item.eqpmGrpId);
// console.log('this.searchParam.eqpmGrpId : ', this.searchParam.eqpmGrpId);
this.selectValue01 =
this.item.eqpmGrpId != undefined
? this.item.eqpmGrpId
: this.searchParam.eqpmGrpId != undefined
? this.searchParam.eqpmGrpId
: this.selectValueList01[0].value;
} else {
this.selectValueList01 = [];
this.selectValue01 = null;
}
// let res = await this.postApiReturn({
// apiKey: 'selectEqpmGrpCodeList',
// resKey: 'eqpmGrpCodeLists',
// sendParam: {
// eqpmKindId:
// this.item.eqpmKindId != undefined
// ? this.item.eqpmKindId
// : this.searchParam.eqpmKindId,
// },
// // form을 통해 popup을 사용할 경우 -> this.item.eqpmKindId 사용
// // 부모 페이지에서 설비종류인 eqpmKindId 값을 꼭 가져와야한다.
// });
// if (res.length > 0) {
// this.selectValueList01 = await res.map(obj => {
// return {
// text: obj.eqpmGrpNm,
// value: obj.eqpmGrpId,
// };
// });
// // form을 통해 popup을 사용할 경우 -> this.item.eqpmGrpId 사용
// // 부모 페이지에서 설비그룹을 선택한 값이 있다면(eqpmGrpId) 그 값으로 바인딩 아닐 경우 조회한 데이터의 첫번째 값으로 선택
// // console.log('this.item.eqpmGrpId : ', this.item.eqpmGrpId);
// // console.log('this.searchParam.eqpmGrpId : ', this.searchParam.eqpmGrpId);
// this.selectValue01 =
// this.item.eqpmGrpId != undefined
// ? this.item.eqpmGrpId
// : this.searchParam.eqpmGrpId != undefined
// ? this.searchParam.eqpmGrpId
// : this.selectValueList01[0].value;
// } else {
// this.selectValueList01 = [];
// this.selectValue01 = null;
// }
this.selectValueList01 = [
{ label: '냉동기고온', value: '냉동기고온' },
{ label: '냉동기저온', value: '냉동기저온' },
{ label: '공조기', value: '공조기' },
{ label: '보일러', value: '보일러' }
];
},
search() {
this.getGridData();
@ -359,6 +347,7 @@ export default {
this.getGridData();
},
gridInit() {
// const gridHeight = this.$refs.gridParent.offsetHeight - 30;
const myOptions = {
columnOptions: {
resizable: true,
@ -370,7 +359,7 @@ export default {
modalDataKey: this.modalDataKey,
value: Object.assign(
// Utility.defaultGridOption(this.$refs.modalGridParent.offsetHeight - 60, myOptions),
Utility.defaultGridOption(400, myOptions),
// Utility.defaultGridOption(100, myOptions),
myOptions,
),
});
@ -399,44 +388,44 @@ export default {
this.loadGrid = false;
let res = [];
res = await this.postApiReturn({
apiKey: 'selectEgrpPysclQtyPop',
resKey: 'egrpPysclQtyData',
sendParam: {
searchWord: this.searchWord,
eqpmGrpId: this.selectValue01,
openMode: this.item.openMode,
},
});
let newRes = [];
let tempTagList = this.pyscPopVal.split('/*wq2a/');
let tagList = tempTagList.filter(item => item != '');
if (tagList.length > 0) {
newRes = res.filter(item => {
return !tagList.includes(item.pysclQtyId);
});
res = newRes;
}
//이미 선택된 값들 제거(배열)
if (this.item.dataList) {
if (this.item.dataList.length > 0) {
newRes = res.filter(item => {
return !this.item.dataList.includes(item.pysclQtyId);
});
res = newRes;
}
}
// res = [
// {
// 'pysclQtyId' : 'PYSCL00001',
// 'pysclQtyCd' : 'AMP_1A',
// 'pysclQtyNm' : '회로1 전류A',
// 'pysclQtyTpNm' : 'TAG'
// res = await this.postApiReturn({
// apiKey: 'selectEgrpPysclQtyPop',
// resKey: 'egrpPysclQtyData',
// sendParam: {
// searchWord: this.searchWord,
// eqpmGrpId: this.selectValue01,
// openMode: this.item.openMode,
// },
// });
// let newRes = [];
// let tempTagList = this.pyscPopVal.split('/*wq2a/');
// let tagList = tempTagList.filter(item => item != '');
// if (tagList.length > 0) {
// newRes = res.filter(item => {
// return !tagList.includes(item.pysclQtyId);
// });
// res = newRes;
// }
// //이미 선택된 값들 제거(배열)
// if (this.item.dataList) {
// if (this.item.dataList.length > 0) {
// newRes = res.filter(item => {
// return !this.item.dataList.includes(item.pysclQtyId);
// });
// res = newRes;
// }
// ]
// }
res = [
{
'pysclQtyId': 'PYSCL00001',
'pysclQtyCd': 'AMP_1A',
'pysclQtyNm': '회로1 전류A',
'pysclQtyTpNm': 'TAG'
}
]
this.setModalGridData({
modalKey: this.myModalKey,
gridKey: this.grid_01,
@ -491,10 +480,10 @@ export default {
this.dialog = flag;
},
async dialogOpenCloseEvent(val) {
await this.setSelectValueList01();
if (!this.myBindingData) {
return alert('그리드를 먼저 선택해주세요.');
}
// await this.setSelectValueList01();
// if (!this.myBindingData) {
// return alert('그리드를 먼저 선택해주세요.');
// }
this.dialog = !val;
},
deleteBtnAction(v) {
@ -562,33 +551,12 @@ var egrpPysclQtyPop = {
}
}
.tui-grid-cell.tui-grid-cell-has-tree
.tui-grid-tree-extra-content
+ .tui-grid-cell-content:before {
.tui-grid-cell.tui-grid-cell-has-tree .tui-grid-tree-extra-content+.tui-grid-cell-content:before {
content: none !important;
}
}
@each $theme in dark, light {
.v-application.#{$theme}-mode {
.v-dialog {
.v-card {
&__title {
color: map-deep-get($color, 'white', '0');
@if $theme == dark {
background-color: #2d3355;
.v-btn {
background-color: #2d3355;
}
} @else {
background-color: #3f4d7d;
.v-btn {
background-color: #3f4d7d;
}
}
}
}
}
.ant-btn-icon-only {
border: none;
}
}
</style>

14
components/common/modal/ElecPowChrgPop.vue
View File

@ -1,8 +1,8 @@
<template>
<v-row class="search-box" align="center" no-gutters>
<!-- <v-col v-if="label" cols="2"> -->
<v-col v-if="label" :cols="labelCols">
<label for="" class="search-box-label">
<v-col v-if="label" :cols="item.labelCols">
<!-- <label for="" class="search-box-label">
<v-icon
x-small
:color="item.required ? '#fb8200' : 'primary'"
@ -10,9 +10,14 @@
>mdi-record-circle</v-icon
>
{{ item.label }}
</label> -->
<label for="" class="search-box-label">
<v-icon v-if="item.iconShow" small
:class="['mr-1', item.required ? 'icon-orange' : 'icon-blue']">$icoBulletPoint</v-icon>
{{ item.label }}
</label>
</v-col>
<v-col :cols="label ? textCols : ''">
<v-col :cols="label ? item.textCols : ''">
<!-- <v-col :cols="label ? 9 : ''"> -->
<!-- :value="textfield" -->
<v-text-field
@ -644,8 +649,7 @@ const myColumns = [
// 전력량 요금(원/kWh)
</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 {

446
components/common/modal/EnrgEffcEqpmDetailPop.vue
View File

@ -1,5 +1,5 @@
<template>
<v-row class="search-box" align="center" no-gutters >
<v-row class="search-box" align="center" no-gutters>
<!-- <v-col v-if="label" cols="2"> -->
<!-- <v-col v-if="label" :cols="labelCols">
<label for="" class="search-box-label">
@ -27,18 +27,15 @@
</v-col> -->
<!-- <v-row justify="center"> -->
<v-dialog
ref="popModal"
v-model="dialog"
width="1400"
overlay-color="#000"
overlay-opacity="0.8"
scrollable
>
<v-dialog ref="popModal" v-model="dialog" width="1200" overlay-color="#000" overlay-opacity="0.8" scrollable>
<!-- <template v-slot:activator="{ on, attrs }">
<v-btn color="primary" dark v-bind="attrs" v-on="on">공정/설비</v-btn>
</template> -->
<v-card style="height: 100%">
<v-card-title class="px-5 py-4 d-flex align-center justify-space-between">
<span class="custom-title-4">가이드 알람이력</span>
<a-button icon="close" type="text" @click="closePop()"></a-button>
</v-card-title>
<!-- <v-card-title
class="v-card__title d-flex align-center justify-space-between"
>
@ -50,105 +47,66 @@
<!-- <v-card-actions> -->
<div class="pa-5">
<!-- <v-text-field label="위치정보 선택"></v-text-field> -->
<v-row align="center" no-gutters>
<v-col :cols="4">
<div class="d-flex align-center justify-space-between pb-5">
<v-card-title class="pa-0">가이드 알람이력</v-card-title>
</div>
</v-col>
<v-col :cols="8" class="text-right">
<v-btn icon tile :ripple="false" @click="closePop()">
<v-icon>mdi-close</v-icon>
</v-btn>
</v-col>
</v-row>
<!-- <v-row align="center" no-gutters>
<v-col :cols="4">
<div class="d-flex align-center justify-space-between pb-5">
<v-card-title class="pa-0">가이드 알람이력</v-card-title>
</div>
</v-col>
<v-col :cols="8" class="text-right">
<v-btn icon tile :ripple="false" @click="closePop()">
<v-icon>mdi-close</v-icon>
</v-btn>
</v-col>
</v-row> -->
<v-row align="center" no-gutters>
<v-col :cols="1">
<label for="" class="search-box-label">
<v-icon
x-small
:color="'primary'"
class="mr-1"
>mdi-record-circle</v-icon
>
설비
</label>
</v-col>
<v-col :cols="2">
<v-text-field
v-if="dialog"
v-model="InputValue['eqpmId']"
class="v-input__custom"
:readonly="true"
outlined
:hide-details="true"
>
</v-text-field>
<v-col :cols="12">
<label for="" class="search-box-label">
<v-icon small :class="['mr-1','icon-blue']">$icoBulletPoint</v-icon>
설비
</label>
</v-col>
<v-col :cols="3">
<v-text-field
v-if="dialog"
v-model="InputValue['eqpmNm']"
class="v-input__custom"
:readonly="true"
outlined
:hide-details="true"
>
</v-text-field>
<v-col :cols="6" class="pr-2 py-0">
<v-text-field v-if="dialog" v-model="InputValue['eqpmId']" class="v-input__custom"
:readonly="true" outlined :hide-details="true">
</v-text-field>
</v-col>
<v-col :cols="6">
<v-col :cols="6" class="pl-2 py-0">
<v-text-field v-if="dialog" v-model="InputValue['eqpmNm']" class="v-input__custom"
:readonly="true" outlined :hide-details="true">
</v-text-field>
</v-col>
<v-col :cols="1">
<label for="" class="search-box-label">
<v-icon
x-small
:color="'primary'"
class="mr-1"
>mdi-record-circle</v-icon
>
가이드지표
</label>
</v-col>
<v-col :cols="2">
<v-text-field
v-if="dialog"
v-model="InputValue['gdIdxId']"
class="v-input__custom"
:readonly="true"
outlined
:hide-details="true"
>
</v-text-field>
</v-row>
<v-row align="center" no-gutters class="mt-4">
<v-col :cols="12">
<label for="" class="search-box-label">
<v-icon small :class="['mr-1','icon-blue']">$icoBulletPoint</v-icon>
가이드지표
</label>
</v-col>
<v-col :cols="3">
<v-text-field
v-if="dialog"
v-model="InputValue['gdIdxNm']"
class="v-input__custom"
:readonly="true"
outlined
:hide-details="true"
>
</v-text-field>
<v-col :cols="6" class="pr-2 py-0">
<v-text-field v-if="dialog" v-model="InputValue['gdIdxId']" class="v-input__custom"
:readonly="true" outlined :hide-details="true">
</v-text-field>
</v-col>
<v-col :cols="6" class="pl-2 py-0">
<v-text-field v-if="dialog" v-model="InputValue['gdIdxNm']" class="v-input__custom"
:readonly="true" outlined :hide-details="true">
</v-text-field>
</v-col>
</v-row>
</div>
<v-divider></v-divider>
<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="py-0 px-2 custom-title-4">설비 가이드 정보</v-card-title>
</div>
<div class="px-5" style="height:calc(100% - 76px)">
<div ref="modalGridParent" class="w100 h100">
<component
:ref="gridName"
:is="loadGrid? 'Grid' : null"
:dataPath="searchParam.modalData.eqpmDetlPop"
:gridName="gridName"
:parentPrgmId="parentPrgmId"
/>
</div>
</div>
<!-- <div id="gridParent" ref="gridParent" style="height: 500px">
<div class="px-5" style="height:calc(100% - 76px)">
<div ref="modalGridParent" class="w100 h100">
<component :ref="gridName" :is="loadGrid ? 'Grid' : null"
:dataPath="searchParam.modalData.eqpmDetlPop" :gridName="gridName"
:parentPrgmId="parentPrgmId" />
</div>
</div>
<!-- <div id="gridParent" ref="gridParent" style="height: 500px">
<component
:ref="'gridName' + parentPrgmId"
:is="loadGrid && dialog ? 'Grid' : null"
@ -160,11 +118,10 @@
@dblClick="setUpdate()"
/>
</div> -->
<v-divider></v-divider>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="primary" dark @click="closePop()">확인</v-btn>
<a-button color="primary" type="primary" @click="closePop()">확인</a-button>
</v-card-actions>
</v-card>
</v-dialog>
@ -223,19 +180,19 @@ export default {
components: {
Grid,
selectCodeList,
dateUtility,
dateUtility,
InputText
// Tree
},
data() {
return {
labelPrepend: true,
modalDataKey:'modalData',
modalDataKey: 'modalData',
myModalKey: 'eqpmDetlPop',
gridName: 'eqpmDetlGrid',
loadGrid: false,
setGrid:false,
popCheck:false,
loadGrid: true,
setGrid: false,
popCheck: false,
dialog: false,
activeRowData: {},
checkedRowDataList: [],
@ -258,32 +215,38 @@ export default {
}
},
}),
InputValue: {
InputValue: {
get() {
return this.myBindingData;
// return this.myBindingData;
return [{
"eqpmId": "EQ001",
"eqpmNm": "Etcher A12",
"gdIdxId": "GD001",
"gdIdxNm": "Etch Depth Guide",
}]
}
},
chkDialog(){
chkDialog() {
return this.dialog
},
},
watch: {
async chkDialog(val){
if(!val){
this.closePop();
}else{
// await this.getRowGridData();
}
async chkDialog(val) {
if (!val) {
this.closePop();
} else {
// await this.getRowGridData();
}
},
async popCheck(val){
if(val){
await this.getRowGridData();
this.dialog= true;
}else{
this.dialog=false;
}
}
async popCheck(val) {
if (val) {
// await this.getRowGridData();
this.dialog = true;
} else {
this.dialog = false;
}
}
},
beforeCreate() {
@ -297,7 +260,7 @@ export default {
methods: {
...mapMutations({
setPageData: 'setPageData',
setModalGridData: 'setModalGridData',
setModalGridData: 'setModalGridData',
setModalGridColumn: 'setModalGridColumn',
setModalGridOption: 'setModalGridOption',
}),
@ -306,28 +269,32 @@ export default {
}),
init() {
this.gridInit();
this.gridInit();
},
closePop(){
this.popCheck= false;
closePop() {
this.popCheck = false;
},
search() {
// this.getData();
},
gridInit(){
// const gridHeight = this.$refs.gridParent.offsetHeight - 30;
gridInit() {
// const gridHeight = this.$refs.gridParent.offsetHeight - 30;
const myOptions = {
rowHeaders: ['rowNum'],
columnOptions: {
resizable: true,
minWidth:100
},
setScroll: true,
};
const myOptions = {
rowHeaders: ['rowNum'],
columnOptions: {
resizable: true,
minWidth: 100
},
// setScroll: true,
header: {
height: 37,
},
rowHeight: 'auto',
};
this.setModalGridOption({
this.setModalGridOption({
modalKey: this.myModalKey,
gridKey: this.gridName,
modalDataKey: this.modalDataKey,
@ -338,55 +305,55 @@ export default {
),
});
const myColumns= [
{
header : '발생일',
name : 'totDttmDay',
align:'center'
},
{
header : '발생시간대',
name : 'totDttmTime',
align:'center'
},
{
header : '가이드지표명',
minWidth:200,
name : 'gdIdxNm',
},
{
header : '주의',
width:100,
name : 'careStndVal',
align:'center'
},
{
header : '경고',
width:100,
name : 'warnStndVal',
align:'center'
},
{
header : '가이드값',
width:100,
name : 'totVal',
align:'center'
},
{
header : '알람내용',
minWidth:300,
width:'auto',
name : 'alrmMsg',
},
{
header : '알람종류',
name : 'alrmKind',
hidden:true
},
const myColumns = [
{
header: '발생일',
name: 'totDttmDay',
align: 'center'
},
{
header: '발생시간대',
name: 'totDttmTime',
align: 'center'
},
{
header: '가이드지표명',
minWidth: 200,
name: 'gdIdxNm',
},
{
header: '주의',
width: 100,
name: 'careStndVal',
align: 'center'
},
{
header: '경고',
width: 100,
name: 'warnStndVal',
align: 'center'
},
{
header: '가이드값',
width: 100,
name: 'totVal',
align: 'center'
},
{
header: '알람내용',
minWidth: 300,
width: 'auto',
name: 'alrmMsg',
},
{
header: '알람종류',
name: 'alrmKind',
hidden: true
},
]
]
this.setModalGridColumn({
this.setModalGridColumn({
modalKey: this.myModalKey,
gridKey: this.gridName,
modalDataKey: this.modalDataKey,
@ -394,59 +361,90 @@ export default {
});
// this.getRowGridData();
},
async getRowGridData(){
this.loadGrid =false;
var res = await this.postApiReturn({
apiKey: 'selectEqpmDetailPop',
resKey: 'eqpmDetlPopData',
sendParam: {
gdIdxId : this.myBindingData.gdIdxId,
eqpmId : this.myBindingData.eqpmId,
fromDt : this.myBindingData.fromDt,
toDt : this.myBindingData.toDt
},
});
const dayjs = require('dayjs');
var newRes = res.map(item=>
item = {
...item,
totDttmDay : Utility.setFormatDate(item.totDttm, 'YYYY-MM-DD'),
totDttmTime : Utility.setFormatDate(item.totDttm, 'HH') + "~" + dayjs(item.totDttm).add(1,'h').format('HH'),
}
);
this.getRowGridData();
},
async getRowGridData() {
this.loadGrid = false;
// var res = await this.postApiReturn({
// apiKey: 'selectEqpmDetailPop',
// resKey: 'eqpmDetlPopData',
// sendParam: {
// gdIdxId : this.myBindingData.gdIdxId,
// eqpmId : this.myBindingData.eqpmId,
// fromDt : this.myBindingData.fromDt,
// toDt : this.myBindingData.toDt
// },
// });
// const dayjs = require('dayjs');
// var newRes = res.map(item=>
// item = {
// ...item,
// totDttmDay : Utility.setFormatDate(item.totDttm, 'YYYY-MM-DD'),
// totDttmTime : Utility.setFormatDate(item.totDttm, 'HH') + "~" + dayjs(item.totDttm).add(1,'h').format('HH'),
// }
// );
this.setModalGridData({
const newRes = [
{
"totDttmDay": "2025-07-10",
"totDttmTime": "14:00~15:00",
"gdIdxNm": "Etch Depth Guide",
"careStndVal": 500,
"warnStndVal": 700,
"totVal": 720,
"alrmMsg": "Chamber pressure exceeded warning threshold. Immediate inspection required.",
"alrmKind": "경고"
},
{
"totDttmDay": "2025-07-10",
"totDttmTime": "09:00~10:00",
"gdIdxNm": "Etch Depth Guide",
"careStndVal": 60,
"warnStndVal": 80,
"totVal": 75,
"alrmMsg": "Temperature nearing warning threshold. Monitor closely.",
"alrmKind": "주의"
},
{
"totDttmDay": "2025-07-09",
"totDttmTime": "22:00~23:00",
"gdIdxNm": "Etch Depth Guide",
"careStndVal": 300,
"warnStndVal": 400,
"totVal": 290,
"alrmMsg": "Gas flow rate below caution level. Check for leaks or blockages.",
"alrmKind": "주의"
}
]
this.setModalGridData({
modalKey: this.myModalKey,
gridKey: this.gridName,
modalDataKey: this.modalDataKey,
value: newRes,
});
this.loadGrid=true;
this.setGrid = true;
}
this.loadGrid = true;
this.setGrid = true;
}
},
};
var eqpmDetlPop ={
eqpmDetlGrid:{
data:[],
column:[],
option:{}
}
var eqpmDetlPop = {
eqpmDetlGrid: {
data: [],
column: [],
option: {}
}
}
// 전력량 요금(원/kWh)
</script>
<style lang="scss">
<style lang="scss" scoped>
// @import '@/assets/scss/common/grid.scss';
.tui-grid-scrollbar-left-bottom {
display: none !important;
display: none !important;
}
</style>

115
components/common/modal/EnrgEffcEqpmDetailPop_bk.vue Normal file
View File

@ -0,0 +1,115 @@
<template>
<div>
<!-- Detail Modal -->
<a-modal v-model="showDetailModal" title="가이드 알람이력" width="1200px" :footer="null"
:style="{ borderRadius: '8px', overflow: 'hidden' }" :bodyStyle="{ paddingTop: '0px' }">
<!-- Top Input Fields -->
<a-row :gutter="8" align="middle" style="margin-bottom: 16px;">
<!-- Label on the left -->
<a-col :span="24" style="text-align: left;">
<div style="line-height: 32px;">설비</div>
</a-col>
<!-- Two inputs on the right -->
<a-col :span="12">
<a-input value="설비명" :style="{ borderRadius: '6px', height: '34px' }" disabled />
</a-col>
<a-col :span="12">
<a-input value="가이드지표" :style="{ borderRadius: '6px', height: '34px' }" disabled />
</a-col>
</a-row>
<a-row :gutter="8" align="middle" style="margin-bottom: 16px;">
<!-- Label on the left -->
<a-col :span="24" style="text-align: left;">
<div style="line-height: 32px;">가이드지표</div>
</a-col>
<!-- Two inputs on the right -->
<a-col :span="12">
<a-input value="설비명" :style="{ borderRadius: '6px', height: '34px' }" disabled />
</a-col>
<a-col :span="12">
<a-input value="가이드지표" :style="{ borderRadius: '6px', height: '34px' }" disabled />
</a-col>
</a-row>
<a-divider />
<!-- Table -->
<h3 style=" margin-bottom: 16px">설비 가이드 정보</h3>
<a-table :columns="modalTableColumns" :dataSource="modalTableData" rowKey="No" size="small" bordered
:pagination="false" />
<!-- Footer Buttons -->
<div style="text-align: right; margin-top: 16px;">
<a-button @click="showDetailModal = false">닫기</a-button>
<a-button type="primary" style="margin-left: 8px; color:#fff" @click="confirmModal">확인</a-button>
</div>
</a-modal>
</div>
</template>
<script>
export default {
data() {
return {
showDetailModal: false,
selectedRecord: null,
modalTableColumns: [
{ title: 'No.', dataIndex: 'No', key: 'No', align: 'center' },
{ title: '발생일', dataIndex: '발생일', key: '발생일' },
{ title: '발생시간대', dataIndex: '발생시간대', key: '발생시간대' },
{ title: '가이드지표명', dataIndex: '가이드지표명', key: '가이드지표명' },
{ title: '주의', dataIndex: '주의', key: '주의' },
{ title: '경고', dataIndex: '경고', key: '경고' },
{ title: '가이드값', dataIndex: '가이드값', key: '가이드값' },
{ title: '알랑내용', dataIndex: '알랑내용', key: '알랑내용' },
],
modalTableData: [
{
No: 1,
발생일: '2025-06-01',
발생시간대: '02-03',
가이드지표명: '냉수 출구 온도 평균 편차',
주의: 3,
경고: 2,
가이드값: -1.23,
알랑내용: '[심각]냉수3과 온도차가 7.72°C로 낮음(평균 15.44*C 대비 7.72°C 낮음) - UT_HT_CH1C',
},
{
No: 2,
발생일: '2025-06-02',
발생시간대: '02-03',
가이드지표명: '냉수 출구 온도 평균 편차',
주의: 2,
경고: 1,
가이드값: -1.45,
},
],
};
},
methods: {
handleNgCntClick(record) {
this.selectedRecord = record;
this.showDetailModal = true;
},
confirmModal() {
this.showDetailModal = false;
},
},
};
</script>
<style>
.ant-modal-header {
border-bottom: none;
border-radius: 8px 8px 0 0;
}
.ant-modal-content {
border-radius: 8px;
}
.ant-modal-title,
h3 {
font-weight: 600
}
</style>

597
components/common/modal/EnrgEffcGdIdxDetPop.vue
View File

@ -1,7 +1,7 @@
<template>
<v-row class="search-box" align="center" no-gutters >
<!-- <v-col v-if="label" cols="2"> -->
<!-- <v-col v-if="label" :cols="labelCols">
<v-row class="search-box" align="center" no-gutters>
<!-- <v-col v-if="label" cols="2"> -->
<!-- <v-col v-if="label" :cols="labelCols">
<label for="" class="search-box-label">
<v-icon
x-small
@ -12,7 +12,7 @@
{{ item.label }}
</label>
</v-col> -->
<!-- <v-col :cols="label ? textCols : ''">
<!-- <v-col :cols="label ? textCols : ''">
<v-text-field
readonly
v-model="selectValue"
@ -26,20 +26,13 @@
></v-text-field>
</v-col> -->
<!-- <v-row justify="center"> -->
<v-dialog
ref="popModal"
v-model="dialog"
width="1400"
overlay-color="#000"
overlay-opacity="0.8"
scrollable
>
<!-- <template v-slot:activator="{ on, attrs }">
<!-- <v-row justify="center"> -->
<v-dialog ref="popModal" v-model="dialog" width="800" overlay-color="#000" overlay-opacity="0.8" scrollable>
<!-- <template v-slot:activator="{ on, attrs }">
<v-btn color="primary" dark v-bind="attrs" v-on="on">공정/설비</v-btn>
</template> -->
<v-card style="height: 100%">
<!-- <v-card-title
<v-card style="height: 100%">
<!-- <v-card-title
class="v-card__title d-flex align-center justify-space-between"
>
<span class="custom-title-4">{{ '' }}</span>
@ -47,10 +40,13 @@
<v-icon>mdi-close</v-icon>
</v-btn>
</v-card-title> -->
<!-- <v-card-actions> -->
<div class="pa-5">
<!-- <v-text-field label="위치정보 선택"></v-text-field> -->
<v-row align="center" no-gutters>
<!-- <v-card-actions> -->
<!-- <v-text-field label="위치정보 선택"></v-text-field> -->
<v-card-title class="pa-5 d-flex align-center justify-space-between">
<span class="custom-title-4">가이드 정보</span>
<a-button icon="close" type="text" @click="closePop()"></a-button>
</v-card-title>
<!-- <v-row align="center" no-gutters>
<v-col :cols="4">
<div class="d-flex align-center justify-space-between pb-5">
<v-card-title class="pa-0">가이드 정보</v-card-title>
@ -61,208 +57,92 @@
<v-icon>mdi-close</v-icon>
</v-btn>
</v-col>
</v-row>
<v-row align="center" no-gutters>
<v-col :cols="2">
</v-row> -->
<div class="px-5 pb-3">
<v-row align="center" no-gutters>
<v-col :cols="12">
<label for="" class="search-box-label">
<v-icon
x-small
:color="'primary'"
class="mr-1"
>mdi-record-circle</v-icon
>
<v-icon small :class="['mr-1', 'icon-blue']">$icoBulletPoint</v-icon>
가이드지표
</label>
</v-col>
<v-col :cols="3">
<v-text-field
v-if="dialog"
v-model="InputValue['gdIdxId']"
class="v-input__custom"
:readonly="true"
outlined
:hide-details="true"
>
<v-col :cols="6" class="pr-2">
<v-text-field v-if="dialog" v-model="InputValue['gdIdxId']" class="v-input__custom" :readonly="true"
outlined :hide-details="true">
</v-text-field>
</v-col>
<v-col :cols="3">
<v-text-field
v-if="dialog"
v-model="InputValue['gdIdxNm']"
class="v-input__custom"
:readonly="true"
outlined
:hide-details="true"
>
</v-col>
<v-col :cols="6" class="pl-2">
<v-text-field v-if="dialog" v-model="InputValue['gdIdxNm']" class="v-input__custom" :readonly="true"
outlined :hide-details="true">
</v-text-field>
</v-col>
</v-row>
</div>
<v-divider></v-divider>
<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="px-5">
<v-row>
<v-col :cols="6" class="py-2">
<InputText
id="gdIdx_InputText"
:parentPrgmId="parentPrgmId"
label="계산코드"
valueNm="calcProc"
:iconShow="true"
:readonly="true"
:labelCols="4"
:textCols="6"
/>
</v-col>
</v-row>
<v-divider class="mt-5 mb-2"></v-divider>
</div>
<div class="px-5 pb-4">
<v-row align="center">
<v-col :cols="6" class="py-2 pr-2">
<InputText id="gdIdx_InputText" :parentPrgmId="parentPrgmId" label="계산코드" valueNm="calcProc"
:iconShow="true" :readonly="true" :labelCols="12" :textCols="12" />
</v-col>
<v-col :cols="6">
</v-col>
<v-col :cols="12" class="py-2">
<InputText
id="gdIdx_InputText"
:parentPrgmId="parentPrgmId"
label="계산설명"
valueNm="calcDesc"
:iconShow="true"
:labelCols="2"
:textCols="9"
:readonly="true"
/>
<InputText id="gdIdx_InputText" :parentPrgmId="parentPrgmId" label="계산설명" valueNm="calcDesc"
:iconShow="true" :labelCols="12" :textCols="12" :readonly="true" />
</v-col>
<v-col :cols="6" class="py-2">
<InputText
id="gdIdx_InputText"
:parentPrgmId="parentPrgmId"
label="물리량1"
valueNm="pysclQtyId1"
:iconShow="true"
:readonly="true"
:labelCols="4"
:textCols="6"
/>
<v-col :cols="6" class="py-2 pr-2">
<InputText id="gdIdx_InputText" :parentPrgmId="parentPrgmId" label="물리량1" valueNm="pysclQtyId1"
:iconShow="true" :readonly="true" :labelCols="12" :textCols="12" />
</v-col>
<v-col :cols="6" class="py-2">
<InputText
id="gdIdx_InputText"
:parentPrgmId="parentPrgmId"
label="물리량2"
valueNm="pysclQtyId2"
:iconShow="true"
:readonly="true"
:labelCols="4"
:textCols="6"
/>
<v-col :cols="6" class="py-2 pl-2">
<InputText id="gdIdx_InputText" :parentPrgmId="parentPrgmId" label="물리량2" valueNm="pysclQtyId2"
:iconShow="true" :readonly="true" :labelCols="12" :textCols="12" />
</v-col>
<v-col :cols="6" class="py-2">
<InputText
id="gdIdx_InputText"
:parentPrgmId="parentPrgmId"
label="물리량3"
valueNm="pysclQtyId3"
:iconShow="true"
:readonly="true"
:labelCols="4"
:textCols="6"
/>
<v-col :cols="6" class="py-2 pr-2">
<InputText id="gdIdx_InputText" :parentPrgmId="parentPrgmId" label="물리량3" valueNm="pysclQtyId3"
:iconShow="true" :readonly="true" :labelCols="12" :textCols="12" />
</v-col>
<v-col :cols="6" class="py-2">
<InputText
id="gdIdx_InputText"
:parentPrgmId="parentPrgmId"
label="물리량4"
valueNm="pysclQtyId4"
:iconShow="true"
:readonly="true"
:labelCols="4"
:textCols="6"
/>
<v-col :cols="6" class="py-2 pl-2">
<InputText id="gdIdx_InputText" :parentPrgmId="parentPrgmId" label="물리량4" valueNm="pysclQtyId4"
:iconShow="true" :readonly="true" :labelCols="12" :textCols="12" />
</v-col>
<v-col :cols="6" class="py-2">
<InputText
id="gdIdx_InputText"
:parentPrgmId="parentPrgmId"
label="카테고리1"
valueNm="ctgr1"
:iconShow="true"
:readonly="true"
:labelCols="4"
:textCols="6"
/>
<v-col :cols="6" class="py-2 pr-2">
<InputText id="gdIdx_InputText" :parentPrgmId="parentPrgmId" label="카테고리1" valueNm="ctgr1"
:iconShow="true" :readonly="true" :labelCols="12" :textCols="12" />
</v-col>
<v-col :cols="6" class="py-2">
<InputText
id="gdIdx_InputText"
:parentPrgmId="parentPrgmId"
label="카테고리2"
valueNm="ctgr2"
:iconShow="true"
:readonly="true"
:labelCols="4"
:textCols="6"
/>
<v-col :cols="6" class="py-2 pl-2">
<InputText id="gdIdx_InputText" :parentPrgmId="parentPrgmId" label="카테고리2" valueNm="ctgr2"
:iconShow="true" :readonly="true" :labelCols="12" :textCols="12" />
</v-col>
<v-col :cols="6" class="py-2">
<InputText
id="gdIdx_InputText"
:parentPrgmId="parentPrgmId"
label="주의기준값"
valueNm="careStndVal"
:iconShow="true"
:readonly="true"
:labelCols="4"
:textCols="6"
/>
<v-col :cols="6" class="py-2 pr-2">
<InputText id="gdIdx_InputText" :parentPrgmId="parentPrgmId" label="주의기준값" valueNm="careStndVal"
:iconShow="true" :readonly="true" :labelCols="12" :textCols="12" />
</v-col>
<v-col :cols="6">
</v-col>
<v-col :cols="6" class="py-2">
<InputText
id="gdIdx_InputText"
:parentPrgmId="parentPrgmId"
label="경고기준값"
valueNm="warnStndVal"
:iconShow="true"
:readonly="true"
:labelCols="4"
:textCols="6"
/>
<v-col :cols="6" class="py-2 pr-2">
<InputText id="gdIdx_InputText" :parentPrgmId="parentPrgmId" label="경고기준값" valueNm="warnStndVal"
:iconShow="true" :readonly="true" :labelCols="12" :textCols="12" />
</v-col>
<v-col :cols="12" class="py-2">
<InputText
id="gdIdx_InputText"
:parentPrgmId="parentPrgmId"
label="알람메세지"
valueNm="alrmMsg"
:iconShow="true"
:labelCols="2"
:textCols="9"
:readonly="true"
/>
<InputText id="gdIdx_InputText" :parentPrgmId="parentPrgmId" label="알람메세지" valueNm="alrmMsg"
:iconShow="true" :labelCols="12" :textCols="12" :readonly="true" />
</v-col>
<v-col :cols="12" class="py-2">
<InputText
id="gdIdx_InputText"
:parentPrgmId="parentPrgmId"
label="가이드방법"
valueNm="gdMeth"
:iconShow="true"
:labelCols="2"
:textCols="9"
:readonly="true"
/>
<InputText id="gdIdx_InputText" :parentPrgmId="parentPrgmId" label="가이드방법" valueNm="gdMeth"
:iconShow="true" :labelCols="12" :textCols="12" :readonly="true" />
</v-col>
</v-row>
</div>
<div style="height:20px;"></div>
<v-divider></v-divider>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="primary" dark @click="closePop()">확인</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</v-row>
<v-card-actions>
<v-spacer></v-spacer>
<a-button color="primary" type="primary" @click="closePop()">확인</a-button>
</v-card-actions>
</v-card>
</v-dialog>
</v-row>
</template>
<script>
@ -274,175 +154,181 @@ import InputText from '~/components/common/input/InputText';
import dateUtility from '~/plugins/dateUtility';
export default {
props: {
parentPrgmId: {
type: String,
require: true,
default: '비교대상 최대(20개)',
},
label: {
type: String,
require: false,
default: '전력 계약 정보',
},
valueNm: {
type: String,
require: false,
default: '',
},
title: {
type: String,
require: false,
default: '전력 계약 목록',
},
labelCols: {
type: Number,
require: false,
default: 4,
},
textCols: {
type: Number,
require: false,
default: 7,
},
item: {
type: Object,
require: true,
},
bindingData: {
type: String,
require: false,
}
},
components: {
Grid,
selectCodeList,
props: {
parentPrgmId: {
type: String,
require: true,
default: '비교대상 최대(20개)',
},
label: {
type: String,
require: false,
default: '전력 계약 정보',
},
valueNm: {
type: String,
require: false,
default: '',
},
title: {
type: String,
require: false,
default: '전력 계약 목록',
},
labelCols: {
type: Number,
require: false,
default: 4,
},
textCols: {
type: Number,
require: false,
default: 7,
},
item: {
type: Object,
require: true,
},
bindingData: {
type: String,
require: false,
}
},
components: {
Grid,
selectCodeList,
dateUtility,
InputText
// Tree
},
data() {
return {
labelPrepend: true,
modalDataKey:'modalData2',
myModalKey: 'gdIdxDetPop',
gridName: 'gdIdxDetPop',
loadGrid: false,
setGrid:false,
popCheck:false,
dialog: false,
activeRowData: {},
checkedRowDataList: [],
};
},
computed: {
...mapState({
// searchParam: state => state.pageData,
searchParam(state) {
return state.pageData[this.parentPrgmId];
},
myBindingData(state) {
//return state.pageData[this.parentPrgmId]["rowGridSelectData"];
if (!this.bindingData) {
return state.pageData[this.parentPrgmId]['rowGridSelectData'];
} else {
return state.pageData[this.parentPrgmId][this.bindingData][
'rowGridSelectData'
];
}
},
}),
InputText
// Tree
},
data() {
return {
labelPrepend: true,
modalDataKey: 'modalData2',
myModalKey: 'gdIdxDetPop',
gridName: 'gdIdxDetPop',
loadGrid: false,
setGrid: false,
popCheck: false,
dialog: false,
activeRowData: {},
checkedRowDataList: [],
};
},
computed: {
...mapState({
// searchParam: state => state.pageData,
searchParam(state) {
return state.pageData[this.parentPrgmId];
},
myBindingData(state) {
//return state.pageData[this.parentPrgmId]["rowGridSelectData"];
if (!this.bindingData) {
return state.pageData[this.parentPrgmId]['rowGridSelectData'];
} else {
return state.pageData[this.parentPrgmId][this.bindingData][
'rowGridSelectData'
];
}
},
}),
InputValue: {
get() {
return this.myBindingData;
}
},
chkDialog(){
return this.dialog
},
},
watch: {
async chkDialog(val){
if(!val){
this.closePop();
}else{
// await this.getRowGridData();
get() {
return [{
"eqpmId": "EQ001",
"eqpmNm": "Etcher A12",
"gdIdxId": "GD001",
"gdIdxNm": "Etch Depth Guide",
}]
// return this.myBindingData;
}
},
async popCheck(val){
if(val){
await this.getData();
this.dialog= true;
}else{
this.dialog=false;
},
chkDialog() {
return this.dialog
},
},
watch: {
async chkDialog(val) {
if (!val) {
this.closePop();
} else {
// await this.getRowGridData();
}
},
async popCheck(val) {
if (val) {
// await this.getData();
this.dialog = true;
} else {
this.dialog = false;
}
}
},
beforeCreate() {
this.$store.commit('setPageData', {
modalData2: { gdIdxDetPop },
});
},
created() {
},
mounted(){
},
beforeCreate() {
this.$store.commit('setPageData', {
modalData2: { gdIdxDetPop },
});
},
created() {
},
mounted() {
this.init();
},
methods: {
...mapMutations({
setPageData: 'setPageData',
methods: {
...mapMutations({
setPageData: 'setPageData',
setModalGridData: 'setModalGridData',
setModalGridColumn: 'setModalGridColumn',
setModalGridOption: 'setModalGridOption',
}),
...mapActions({
postApiReturn: 'modules/list/postApiReturn',
}),
init() {
setModalGridColumn: 'setModalGridColumn',
setModalGridOption: 'setModalGridOption',
}),
...mapActions({
postApiReturn: 'modules/list/postApiReturn',
}),
init() {
// this.gridInit();
},
closePop(){
this.popCheck= false;
},
search() {
// this.getData();
},
async getData(){
},
closePop() {
this.popCheck = false;
},
search() {
// this.getData();
},
async getData() {
var res = await this.postApiReturn({
apiKey: 'selectEnrgEffcGdIdxDetPop',
resKey: 'gdIdxDetPopData',
sendParam: {
gdIdxId : this.myBindingData.gdIdxId,
eqpmId : this.myBindingData.eqpmId,
},
});
apiKey: 'selectEnrgEffcGdIdxDetPop',
resKey: 'gdIdxDetPopData',
sendParam: {
gdIdxId: this.myBindingData.gdIdxId,
eqpmId: this.myBindingData.eqpmId,
},
});
this.setPageData({
calcProc : res[0].calcProc,
calcDesc : res[0].calcDesc,
pysclQtyId1 : res[0].pysclQtyId1Nm,
pysclQtyId2 : res[0].pysclQtyId2Nm,
pysclQtyId3 : res[0].pysclQtyId3Nm,
pysclQtyId4 : res[0].pysclQtyId4Nm,
ctgr1 : res[0].ctgr1,
ctgr2 : res[0].ctgr2,
warnStndVal : res[0].warnStndVal,
careStndVal : res[0].careStndVal,
alrmMsg : res[0].alrmMsg,
gdMeth : res[0].gdMeth
calcProc: res[0].calcProc,
calcDesc: res[0].calcDesc,
pysclQtyId1: res[0].pysclQtyId1Nm,
pysclQtyId2: res[0].pysclQtyId2Nm,
pysclQtyId3: res[0].pysclQtyId3Nm,
pysclQtyId4: res[0].pysclQtyId4Nm,
ctgr1: res[0].ctgr1,
ctgr2: res[0].ctgr2,
warnStndVal: res[0].warnStndVal,
careStndVal: res[0].careStndVal,
alrmMsg: res[0].alrmMsg,
gdMeth: res[0].gdMeth
});
}
},
},
};
var gdIdxDetPop ={
gdIdxDetGrid:{
data:[],
column:[],
option:{}
var gdIdxDetPop = {
gdIdxDetGrid: {
data: [],
column: [],
option: {}
}
}
@ -451,13 +337,14 @@ var gdIdxDetPop ={
<style lang="scss" scoped>
// @import '@/assets/scss/common/grid.scss';
.tui-grid-scrollbar-left-bottom {
display: none !important;
}
#gdIdx_InputText::v-deep .v-input__custom{
margin-left:-60px;
}
.v-input__custom{
margin-left:-60px;
display: none !important;
}
// #gdIdx_InputText::v-deep .v-input__custom {
// margin-left: -60px;
// }
// .v-input__custom {
// margin-left: -60px;
// }
</style>

220
components/common/modal/EnrgEffcGdIdxDetPop_bk.vue Normal file
View File

@ -0,0 +1,220 @@
<template>
<div>
<!-- Detail Modal -->
<a-modal v-model="showDetailModal" title="가이드 정보" width="800px" :footer="null"
:style="{ borderRadius: '8px', overflow: 'hidden' }" :bodyStyle="{ paddingTop: '0px' }">
<!-- Top Input Fields -->
<a-row :gutter="8" align="middle" style="margin-bottom: 8px;">
<!-- Label on the left -->
<a-col :span="24" style="text-align: left;">
<div style="line-height: 32px;">가이드지표</div>
</a-col>
<!-- Two inputs on the right -->
<a-col :span="12">
<a-input value="GD00111" :style="{ borderRadius: '6px', height: '34px' }" disabled />
</a-col>
<a-col :span="12">
<a-input value="냉각수 온도차 평균 편차" :style="{ borderRadius: '6px', height: '34px' }" disabled />
</a-col>
</a-row>
<a-divider />
<a-row :gutter="8" align="middle" style="margin-bottom: 8px;">
<!-- Label on the left -->
<a-col :span="24" style="text-align: left;">
<div style="line-height: 32px;">계산코드</div>
</a-col>
<!-- Two inputs on the right -->
<a-col :span="12">
<a-input value="BEF_AVG_DEV_GT" :style="{ borderRadius: '6px', height: '34px' }" disabled />
</a-col>
</a-row>
<a-row :gutter="8" align="middle" style="margin-bottom: 8px;">
<!-- Label on the left -->
<a-col :span="24" style="text-align: left;">
<div style="line-height: 32px;">계산설명</div>
</a-col>
<!-- Two inputs on the right -->
<a-col :span="24">
<a-input value="냉각수 온도차" :style="{ borderRadius: '6px', height: '34px' }" disabled />
</a-col>
</a-row>
<a-row :gutter="8" align="middle" style="margin-bottom: 8px;">
<!-- Label on the left -->
<a-col :span="12">
<a-row>
<a-col :span="24" style="text-align: left;">
<div style="line-height: 32px;">물리랑1</div>
</a-col>
<!-- Two inputs on the right -->
<a-col :span="24">
<a-input value="냉각수 온도차" :style="{ borderRadius: '6px', height: '34px' }" disabled />
</a-col>
</a-row>
</a-col>
<a-col :span="12">
<a-row>
<a-col :span="24" style="text-align: left;">
<div style="line-height: 32px;">물리랑2</div>
</a-col>
<!-- Two inputs on the right -->
<a-col :span="24">
<a-input value="" :style="{ borderRadius: '6px', height: '34px' }" disabled />
</a-col>
</a-row>
</a-col>
</a-row>
<a-row :gutter="8" align="middle" style="margin-bottom: 8px;">
<!-- Label on the left -->
<a-col :span="12">
<a-row>
<a-col :span="24" style="text-align: left;">
<div style="line-height: 32px;">물리랑3</div>
</a-col>
<!-- Two inputs on the right -->
<a-col :span="24">
<a-input value="냉각수 온도차" :style="{ borderRadius: '6px', height: '34px' }" disabled />
</a-col>
</a-row>
</a-col>
<a-col :span="12">
<a-row>
<a-col :span="24" style="text-align: left;">
<div style="line-height: 32px;">물리랑4</div>
</a-col>
<!-- Two inputs on the right -->
<a-col :span="24">
<a-input value="" :style="{ borderRadius: '6px', height: '34px' }" disabled />
</a-col>
</a-row>
</a-col>
</a-row>
<a-row :gutter="8" align="middle" style="margin-bottom: 8px;">
<!-- Label on the left -->
<a-col :span="12">
<a-row>
<a-col :span="24" style="text-align: left;">
<div style="line-height: 32px;">카테고리1</div>
</a-col>
<!-- Two inputs on the right -->
<a-col :span="24">
<a-input value="냉각수 온도차" :style="{ borderRadius: '6px', height: '34px' }" disabled />
</a-col>
</a-row>
</a-col>
<a-col :span="12">
<a-row>
<a-col :span="24" style="text-align: left;">
<div style="line-height: 32px;">카테고리2</div>
</a-col>
<!-- Two inputs on the right -->
<a-col :span="24">
<a-input value="" :style="{ borderRadius: '6px', height: '34px' }" disabled />
</a-col>
</a-row>
</a-col>
</a-row>
<a-row :gutter="8" align="middle" style="margin-bottom: 8px;">
<!-- Label on the left -->
<a-col :span="24" style="text-align: left;">
<div style="line-height: 32px;">주의기준간</div>
</a-col>
<!-- Two inputs on the right -->
<a-col :span="12">
<a-input value="3" :style="{ borderRadius: '6px', height: '34px' }" disabled />
</a-col>
</a-row>
<a-row :gutter="8" align="middle" style="margin-bottom: 8px;">
<!-- Label on the left -->
<a-col :span="24" style="text-align: left;">
<div style="line-height: 32px;">경고기준값</div>
</a-col>
<!-- Two inputs on the right -->
<a-col :span="12">
<a-input value="5" :style="{ borderRadius: '6px', height: '34px' }" disabled />
</a-col>
</a-row>
<a-row :gutter="8" align="middle" style="margin-bottom: 8px;">
<!-- Label on the left -->
<a-col :span="24" style="text-align: left;">
<div style="line-height: 32px;">열람메세지</div>
</a-col>
<!-- Two inputs on the right -->
<a-col :span="24">
<a-input value="냉각수 온도차가 @V1C로 낮음(청균@AVG 대비 @RSLTC 낮음]-@EOPM" :style="{ borderRadius: '6px', height: '34px' }"
disabled />
</a-col>
</a-row>
<a-row :gutter="8" align="middle" style="margin-bottom: 8px;">
<!-- Label on the left -->
<a-col :span="24" style="text-align: left;">
<div style="line-height: 32px;">가이드방법</div>
</a-col>
<!-- Two inputs on the right -->
<a-col :span="24">
<a-input value="대비 @RSLTC 낮음]-@EOPM" :style="{ borderRadius: '6px', height: '34px' }" disabled />
</a-col>
</a-row>
<!-- Footer Buttons -->
<div style="text-align: right; margin-top: 16px;">
<a-button @click="showDetailModal = false">닫기</a-button>
<a-button type="primary" style="margin-left: 8px; color:#fff" @click="confirmModal">확인</a-button>
</div>
</a-modal>
</div>
</template>
<script>
export default {
data() {
return {
showDetailModal: false,
selectedRecord: null
};
},
methods: {
handleGdIdxNmClick(record) {
this.selectedRecord = record;
this.showDetailModal = true;
},
confirmModal() {
this.showDetailModal = false;
},
},
};
</script>
<style>
.ant-modal-header {
border-bottom: none;
border-radius: 8px 8px 0 0;
}
.ant-modal-content {
border-radius: 8px;
}
.ant-modal-title,
h3 {
font-weight: 600
}
</style>

169
components/common/modal/EnrgUsePlanModiPop.vue
View File

@ -9,10 +9,15 @@
scrollable
>
<v-card style="height: 100%">
<v-card-title class="pa-5 pb-0 d-flex align-center justify-space-between">
<span class="custom-title-4">사용량 계획</span>
<v-icon @click="closePop()">mdi-close</v-icon>
</v-card-title>
<div class="pa-5">
<!-- <v-text-field label="위치정보 선택"></v-text-field> -->
<v-row align="center" no-gutters>
<v-col :cols="4">
<v-col :cols="4.5">
<InputText
:parentPrgmId="parentPrgmId"
:label="'설비명'"
@ -20,18 +25,43 @@
:readonly="true"
/>
</v-col>
<v-col :cols="2">
</v-row>
<v-row align="end" no-gutters class="mt-4 d-flex justify-center">
<v-col :cols="5.5" class="mr-2">
<component
:is="'SelectBox'"
ref="SelectBox1"
:labelCols='12'
:textCols='12'
:propsValue="selectValue01"
:itemList="selectValueList01"
:label="'대상월'"
@update:propsValue="selectValue01 = $event"
/>
</v-col>
<v-col :cols="3">
</v-col>
<v-col :cols="3" class="text-right">
<v-btn icon tile :ripple="false" @click="closePop()">
<v-icon>mdi-close</v-icon>
</v-btn>
<v-col :cols="5.5" class="mr-2">
<component
:is="'SelectBox'"
ref="SelectBox2"
:labelCols='12'
:textCols='12'
:propsValue="selectValue02"
:itemList="selectValueList02"
:label="'전년대비절감율'"
@update:propsValue="selectValue02 = $event"
/>
</v-col>
<a-button color="primary" dark @click="search()" icon="clock-circle" >
<!-- <template #icon>
<ClockCircleOutlined />
</template> -->
적용
</a-button>
<!-- <v-col :cols="2" class="text-right">
</v-col> -->
</v-row>
</div>
<v-divider></v-divider>
<!-- <v-divider></v-divider> -->
<!-- <div id="chartParent" ref="chartParent" style="height: 100px"> -->
<div :style="'height: calc(50vh)'">
@ -50,37 +80,8 @@
:ref="chartName"
/>
</div>
<v-divider></v-divider>
<div style="height: 20%; margin: auto; width: 90%; display: flex; align-items: center;">
<v-row align="center" no-gutters class="pa-5 d-flex align-center justify-center;">
<v-col :cols="5">
<component
:is="'SelectBox'"
ref="SelectBox1"
:labelCols='3'
:textCols='6'
:propsValue="selectValue01"
:itemList="selectValueList01"
:label="'대상월'"
@update:propsValue="selectValue01 = $event"
/>
</v-col>
<v-col :cols="5">
<component
:is="'SelectBox'"
ref="SelectBox2"
:labelCols='5'
:textCols='6'
:propsValue="selectValue02"
:itemList="selectValueList02"
:label="'전년대비절감율'"
@update:propsValue="selectValue02 = $event"
/>
</v-col>
<v-col :cols="2" class="text-right">
<v-btn color="primary" dark @click="search()">적용</v-btn>
</v-col>
</v-row>
<!-- <v-divider></v-divider> -->
<!-- <div style="height: 20%; margin: auto; width: 90%; display: flex; align-items: center;"> -->
<!-- <div style="height: 70%; width:10%; float: left; border: 1px solid blue; background-color: #A2A2A2">
설정
</div>
@ -97,8 +98,6 @@
</v-col>
</v-row>
</div> -->
<!-- <v-row align="center" no-gutters>
<v-row
:cols="12"
@ -115,7 +114,7 @@
<v-btn color="primary" dark @click="setChart()">적용</v-btn>
</v-col>
</v-row> -->
</div>
<!-- </div> -->
</div>
<!-- <div id="gridParent" ref="gridParent" style="height: 500px">
@ -132,9 +131,9 @@
</div> -->
<v-divider></v-divider>
<v-card-actions class="pa-5 d-flex align-center justify-center">
<v-btn color="primary" dark @click="setUpdate()">확정</v-btn>
<v-btn color="primary" dark @click="closePop()">취소</v-btn>
<v-card-actions class="pa-5 d-flex align-center justify-end">
<a-button color="primary" type="default" class="mr-2" dark @click="closePop()">취소</a-button>
<a-button color="primary" type="primary" dark @click="setUpdate()">확정</a-button>
</v-card-actions>
</v-card>
</v-dialog>
@ -196,7 +195,7 @@ export default {
selectCodeList,
InputText,
Chart,
SelectBox
SelectBox,
// Tree
},
data() {
@ -318,6 +317,9 @@ export default {
// });
// }
},
mounted(){
this.initTest(); return;
},
methods: {
...mapMutations({
setPageData: 'setPageData',
@ -329,6 +331,7 @@ export default {
...mapActions({
postApiReturn: 'modules/list/postApiReturn',
}),
init() {
this.setChart();
},
@ -406,7 +409,79 @@ export default {
this.nowSeriesData = [];
this.nowModalChartData = [];
},
async initTestChart(){
this.loadChart = false;
let xAxisData = [];
let seriesData = [];
let data = [];
let targetMonthList = [];
let _this = this;
const dataItemLine = []; // { gubun: '2PLAN' };
const dataItemBar = []; //{ gubun: '1PLAN' };
const getRanNum = (n) => Math.floor(Math.random()*n + 1);
for(var i=1; i<=12; i++){
let qty = 'qty' + i.toString().padStart(2, '0');
targetMonthList.push(qty);
xAxisData.push(i);
dataItemLine.push(getRanNum(100));
dataItemBar.push(getRanNum(100));
}
data = [
{gubun: '1PLAN'}, {gubun: '2PLAN'},
];
seriesData = data.map(item => ({
name: item.gubun == '2PLAN' ? '계획' : '전년실적',
type: item.gubun == '2PLAN' ? 'line' : 'bar',
data: item.gubun == '2PLAN' ? dataItemLine : dataItemBar
}));
this.nowSeriesData = seriesData;
let option = {
grid: {
top: "3%",
},
xAxis:{
type: 'category',
data: xAxisData
},
yAxis:{
type:'value',
nameLocation : 'middle',
nameGap :45
},
legend: {
icon: 'circle',
},
series: seriesData,
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
}
};
await this.$nextTick(() => { });
this.setModalChartOption({
prgmId: this.$route.query.prgmId,
chartKey: this.chartName,
modalId: this.modalId,
modalDataKey: this.modalDataKey,
value: option,
});
this.loadChart = true;
// this.$nextTick(() => {
// })
},
async setChart(){
// test
this.initTestChart(); return;
// end test
this.loadChart = false;
let xAxisData = [];
let seriesData = [];

303
components/common/modal/EqpmBaseInfoPop.vue
View File

@ -1,115 +1,84 @@
<template>
<v-row class="search-box" align="center" no-gutters>
<v-col :cols="option.labelCols">
<v-row class="search-box" align="center">
<v-col :cols="option.labelCols" class="py-0">
<label for="" class="search-box-label">
<v-icon
x-small
:color="item.required ? '#fb8200' : 'primary'"
class="mr-1"
>mdi-record-circle</v-icon
v-if="item.iconShow"
small
:class="['mr-1', item.required ? 'icon-orange' : 'icon-blue']"
>$icoBulletPoint</v-icon
>
{{ option.labelContent }}
</label>
</v-col>
<v-col :cols="option.textCols">
<v-text-field
readonly
v-model="selectValue"
append-icon="mdi-magnify"
class="v-input__custom"
@click="dialogOpenCloseEvent(dialog)"
outlined
:hide-details="true"
:required="item.required || false"
:disabled="item.disabled || false"
></v-text-field>
<v-col :cols="option.textCols" class="py-0">
<v-text-field readonly v-model="selectValue" append-icon="" class="v-input__custom"
@click="dialogOpenCloseEvent(dialog)" outlined :hide-details="true" :required="item.required || false"
:disabled="item.disabled || false"><template v-slot:append>
<!-- Custom SVG icon -->
<v-icon>$icoSearch</v-icon>
</template></v-text-field>
</v-col>
<v-dialog v-model="dialog" scrollable width="540px">
<v-dialog v-model="dialog" scrollable width="800px">
<v-card style="height: 100%">
<v-card-title class="pa-5 d-flex align-center justify-space-between">
<v-card-title class="px-6 py-4 d-flex align-center justify-space-between">
<span class="custom-title-4">{{ option.modalTitle }}</span>
<v-btn
icon
tile
:ripple="false"
@click="dialogOpenCloseEvent(dialog)"
>
<v-icon>mdi-close</v-icon>
</v-btn>
<a-button icon="close" type="text" @click="dialogOpenCloseEvent(dialog)"></a-button>
</v-card-title>
<div class="pa-5">
<v-row align="center" no-gutters>
<v-col :cols="12">
<component
:is="'SelectBox'"
ref="SelectBox1"
:labelCols="2"
:textCols="6"
:propsValue="selectValue01"
:itemList="selectValueList01"
:label="'설비그룹'"
@update:propsValue="selectValue01 = $event"
:readonly="
item.openMode == undefined
? openMode
: item.openMode == 'ALL'
<div class="pa-6 pt-0">
<v-row align="center">
<v-col :cols="5">
<component :is="'SelectBox'" ref="SelectBox1" :labelCols="12" :textCols="12" :iconShow="true"
:propsValue="selectValue01" :itemList="selectValueList01" :label="'설비그룹'"
@update:propsValue="selectValue01 = $event" :readonly="item.openMode == undefined
? openMode
: item.openMode == 'ALL'
? false
: true
"
/>
</v-col>
</v-row>
<v-row align="center" no-gutters>
<v-col :cols="2">
<label for="" class="search-box-label">
<v-icon x-small color="primary" class="mr-1"
>mdi-record-circle</v-icon
>
설비명
</label>
</v-col>
<v-col :cols="6">
<v-text-field
append-icon="mdi-magnify"
class="v-input__custom"
outlined
:hide-details="true"
v-model="searchWord"
@keyup.enter="search"
></v-text-field>
</v-col>
<v-spacer></v-spacer>
<v-col cols="4" class="text-right">
<v-btn :ripple="false" @click="search()">
조회
</v-btn>
<!-- <v-btn :ripple="false" @click="initSearch()">
초기화
</v-btn> -->
" />
</v-col>
<v-col :cols="7">
<v-row align="center" no-gutters>
<v-col :cols="12">
<label for="" class="search-box-label">
<v-icon small :class="['mr-1 icon-blue']">$icoBulletPoint</v-icon>
물리량명
</label>
</v-col>
<v-col :cols="9"> <v-text-field append-icon="" class="v-input__custom"
outlined :hide-details="true" v-model="searchWord"
@keyup.enter="search"><template v-slot:append>
<!-- Custom SVG icon -->
<v-icon>$icoSearch</v-icon>
</template></v-text-field></v-col>
<v-spacer></v-spacer>
<v-col cols="3" class="text-right">
<a-button icon="search" type="primary" @click="search()"
class="search-button">조회</a-button>
</v-col>
</v-row>
</v-col>
</v-row>
</div>
<v-divider></v-divider>
<!-- <div :style="'height: calc(50vh)'"> -->
<div :style="'height: 429px;'">
<div :style="'height: 429px;'">
<!-- <div :style="{ height: 'calc(100% - 213px)' }"> -->
<div ref="modalGridParent" class="h100 py-3">
<component
:is="loadGrid && dialog ? 'Grid' : null"
:gridName="gridName"
<div ref="modalGridParent" class="h100 px-6 py-4">
<component :is="loadGrid && dialog ? 'Grid' : null" :gridName="gridName"
:dataPath="searchParam.modalDataEqpmBaseInfoPop.eqpmBaseInfoPop"
:parentPrgmId="parentPrgmId"
@getRowsData="getRowData"
@dblClick="setUpdate($event)"
/>
:parentPrgmId="parentPrgmId" @getRowsData="getRowData" @dblClick="setUpdate($event)" />
</div>
</div>
<v-card-actions class="pa-5 d-flex align-center justify-center">
<v-btn :ripple="false" @click="setUpdate($event)">확인</v-btn>
<v-btn :ripple="false" @click="dialogOpenCloseEvent(dialog)"
>닫기</v-btn
>
<v-card-actions class="px-6 py-4 d-flex align-center justify-end">
<a-button :ripple="false" @click="setUpdate($event)" class="mr-2">확인</a-button>
<a-button :ripple="false" type="primary" @click="dialogOpenCloseEvent(dialog)"
class="mr-2">닫기</a-button>
</v-card-actions>
</v-card>
</v-dialog>
@ -166,6 +135,11 @@ export default {
require: false,
default: true, // 'ALL'도 있음
},
iconShow: {
type: Boolean,
require: false,
default: true,
},
// bindingFlag:{
// type:Boolean,
// require: false,
@ -181,7 +155,7 @@ export default {
return {
dialog: false,
loadGrid: false,
loadGrid: true,
gridName: 'gridEqpmBaseInfoPop',
myModalKey: 'eqpmBaseInfoPop',
modalDataKey: 'modalDataEqpmBaseInfoPop',
@ -283,7 +257,7 @@ export default {
async created() {
await this.init();
},
mounted() {},
mounted() { },
methods: {
...mapMutations({
setPageData: 'setPageData',
@ -300,29 +274,36 @@ export default {
this.gridInit();
},
async setSelectValueList01() {
let res = await this.postApiReturn({
apiKey: 'selectEqpmGrpCodeList',
resKey: 'eqpmGrpCodeLists',
sendParam: { eqpmKindId: this.searchParam.eqpmKindId },
// 부모 페이지에서 설비종류인 eqpmKindId 값을 꼭 가져와야한다.
});
if (res.length > 0) {
this.selectValueList01 = await res.map(obj => {
return {
text: obj.eqpmGrpNm,
value: obj.eqpmGrpId,
};
});
// 부모 페이지에서 설비그룹을 선택한 값이 있다면(eqpmGrpId) 그 값으로 바인딩 아닐 경우 조회한 데이터의 첫번째 값으로 선택
this.selectValue01 =
this.searchParam.eqpmGrpId != undefined
? this.searchParam.eqpmGrpId
: this.selectValueList01[0].value;
// this.selectValue01 = this.selectValueList01[0].value;
} else {
this.selectValueList01 = [];
this.selectValue01 = null;
}
// let res = await this.postApiReturn({
// apiKey: 'selectEqpmGrpCodeList',
// resKey: 'eqpmGrpCodeLists',
// sendParam: { eqpmKindId: this.searchParam.eqpmKindId },
// // 부모 페이지에서 설비종류인 eqpmKindId 값을 꼭 가져와야한다.
// });
// if (res.length > 0) {
// this.selectValueList01 = await res.map(obj => {
// return {
// text: obj.eqpmGrpNm,
// value: obj.eqpmGrpId,
// };
// });
// // 부모 페이지에서 설비그룹을 선택한 값이 있다면(eqpmGrpId) 그 값으로 바인딩 아닐 경우 조회한 데이터의 첫번째 값으로 선택
// this.selectValue01 =
// this.searchParam.eqpmGrpId != undefined
// ? this.searchParam.eqpmGrpId
// : this.selectValueList01[0].value;
// // this.selectValue01 = this.selectValueList01[0].value;
// } else {
// this.selectValueList01 = [];
// this.selectValue01 = null;
// }
this.selectValueList01 = [
{ label: '냉동기고온', value: '냉동기고온' },
{ label: '냉동기저온', value: '냉동기저온' },
{ label: '공조기', value: '공조기' },
{ label: '보일러', value: '보일러' }
];
},
search() {
this.getGridData();
@ -360,26 +341,34 @@ export default {
},
async getGridData() {
this.loadGrid = false;
let res = await this.postApiReturn({
apiKey: 'selectEqpmBaseInfoPop',
resKey: 'epqmBaseInfoData',
sendParam: {
eqpmGrpId: this.selectValue01,
searchWord: this.searchWord,
// openMode : this.item.openMode == undefined ? this.openMode : this.item.openMode
},
});
// grid와 popup eqpmId 값 중복되는 것 제거하는 로직 - 시작
let newRes = [];
if (this.bindingGridEqpmIdList.length > 0) {
newRes = res.filter(item => {
return !this.bindingGridEqpmIdList.includes(item.eqpmId);
});
res = newRes;
}
// let res = [];
// let res = await this.postApiReturn({
// apiKey: 'selectEqpmBaseInfoPop',
// resKey: 'epqmBaseInfoData',
// sendParam: {
// eqpmGrpId: this.selectValue01,
// searchWord: this.searchWord,
// // openMode : this.item.openMode == undefined ? this.openMode : this.item.openMode
// },
// });
// // grid와 popup eqpmId 값 중복되는 것 제거하는 로직 - 시작
// let newRes = [];
// if (this.bindingGridEqpmIdList.length > 0) {
// newRes = res.filter(item => {
// return !this.bindingGridEqpmIdList.includes(item.eqpmId);
// });
// res = newRes;
// }
// grid와 popup eqpmId 값 중복되는 것 제거하는 로직 - 끝
const res = [
{
'eqpmId': 'PYSCL00001',
'eqpmNm': 'AMP_1A',
}
]
this.setModalGridData({
modalKey: this.myModalKey,
gridKey: this.gridName,
@ -452,9 +441,9 @@ export default {
// this.dialog = false;
// return;
// }
if (this.myBindingData.length <= 0) {
return alert('설비상세 리스트를 먼저 선택해주세요.');
}
// if (this.myBindingData.length <= 0) {
// return alert('설비상세 리스트를 먼저 선택해주세요.');
// }
this.dialog = !val;
},
},
@ -482,33 +471,29 @@ var eqpmBaseInfoPop = {
}
}
.tui-grid-cell.tui-grid-cell-has-tree
.tui-grid-tree-extra-content
+ .tui-grid-cell-content:before {
.tui-grid-cell.tui-grid-cell-has-tree .tui-grid-tree-extra-content+.tui-grid-cell-content:before {
content: none !important;
}
}
@each $theme in dark, light {
.v-application.#{$theme}-mode {
.v-dialog {
.v-card {
&__title {
color: map-deep-get($color, 'white', '0');
@if $theme == dark {
background-color: #2d3355;
.v-btn {
background-color: #2d3355;
}
} @else {
background-color: #3f4d7d;
.v-btn {
background-color: #3f4d7d;
}
}
}
}
}
}
// .v-application.#{$theme}-mode {
// .v-dialog {
// .v-card {
// &__title {
// @if $theme ==dark {
// background-color: #2d3355;
// .v-btn {
// background-color: #2d3355;
// }
// }
// }
// }
// }
// }
}
</style>

238
components/common/modal/EqpmCalcPop.vue
View File

@ -1,96 +1,76 @@
<template>
<v-row class="search-box" align="center" no-gutters>
<v-col :cols="option.labelCols">
<v-col :cols="option.labelCols" class="py-0">
<label for="" class="search-box-label">
<v-icon
x-small
:color="item.required ? '#fb8200' : 'primary'"
class="mr-1"
>mdi-record-circle</v-icon
v-if="iconShow"
small
:class="['mr-1', required ? 'icon-orange' : 'icon-blue']"
>$icoBulletPoint</v-icon
>
{{ option.labelContent }}
</label>
</v-col>
<v-col :cols="option.textCols">
<v-text-field
:readonly="item.readonly || false"
v-model="selectValue"
append-icon="mdi-magnify"
class="v-input__custom"
@click="dialogOpenCloseEvent(dialog)"
outlined
:hide-details="true"
:required="item.required || false"
:disabled="item.disabled || false"
></v-text-field>
</v-col>
<v-text-field :readonly="item.readonly || false" v-model="selectValue" append-icon=""
class="v-input__custom" @click="dialogOpenCloseEvent(dialog)" outlined :hide-details="true"
:required="item.required || false" :disabled="item.disabled || false"><template v-slot:append>
<!-- Custom SVG icon -->
<v-icon>$icoSearch</v-icon>
<v-dialog v-model="dialog" scrollable width="540px">
</template></v-text-field>
</v-col>
<v-dialog v-model="dialog" scrollable width="800px">
<v-card style="height: 100%">
<v-card-title class="pa-5 d-flex align-center justify-space-between">
<v-card-title class="px-6 py-4 d-flex align-center justify-space-between">
<span class="custom-title-4">{{ option.modalTitle }}</span>
<v-btn
icon
tile
:ripple="false"
@click="dialogOpenCloseEvent(dialog)"
>
<v-icon>mdi-close</v-icon>
</v-btn>
<a-button icon="close" type="text" @click="dialogOpenCloseEvent(dialog)"></a-button>
</v-card-title>
<div class="pa-5">
<v-row align="center" no-gutters>
<v-col :cols="2">
<div class="pa-6 pt-0">
<v-row align="center">
<v-col :cols="12" class="py-0">
<label for="" class="search-box-label">
<v-icon x-small color="primary" class="mr-1"
>mdi-record-circle</v-icon
>
계산설명
<v-icon small :class="['mr-1 icon-blue']">$icoBulletPoint</v-icon>
계산설명
</label>
</v-col>
<v-col :cols="6">
<v-text-field
append-icon="mdi-magnify"
class="v-input__custom"
outlined
:hide-details="true"
v-model="searchWord"
@keyup.enter="search"
></v-text-field>
<v-col :cols="10" class="mr-4 py-0" >
<v-text-field append-icon="" class="v-input__custom" outlined
:hide-details="true" v-model="searchWord" @keyup.enter="search"><template v-slot:append>
<!-- Custom SVG icon -->
<v-icon>$icoSearch</v-icon>
</template></v-text-field>
</v-col>
<v-spacer></v-spacer>
<v-col cols="4" class="text-right">
<v-btn :ripple="false" @click="search()">
조회
</v-btn>
<v-col cols="1" class="py-0">
<a-button icon="search" type="primary" @click="search()" class="search-button">조회</a-button>
<!-- <v-btn :ripple="false" @click="initSearch()">
초기화
</v-btn> -->
</v-col>
</v-row>
</div>
<v-divider></v-divider>
<!-- <v-divider></v-divider> -->
<div :style="'height: calc(50vh)'">
<!-- <div :style="{ height: 'calc(100% - 213px)' }"> -->
<div ref="modalGridParent" class="h100 py-3">
<component
:is="loadGrid && dialog ? 'Grid' : null"
:gridName="grid_01"
:dataPath="searchParam.modalData2.eqpmCalcPop"
:parentPrgmId="parentPrgmId"
@getRowsData="getRowData"
@dblClick="setUpdate($event)"
/>
<div ref="modalGridParent" class="h100 px-6 py-4">
<component :is="loadGrid && dialog ? 'Grid' : null" :gridName="grid_01"
:dataPath="searchParam.modalData2.eqpmCalcPop" :parentPrgmId="parentPrgmId"
@getRowsData="getRowData" @dblClick="setUpdate($event)" />
</div>
</div>
<v-card-actions class="pa-5 d-flex align-center justify-center">
<v-btn :ripple="false" @click="setUpdate($event)">확인</v-btn>
<v-btn :ripple="false" @click="dialogOpenCloseEvent(dialog)"
>닫기</v-btn
>
<v-card-actions class="pa-5 d-flex align-center justify-end">
<!-- <v-btn :ripple="false" @click="setUpdate($event)">확인</v-btn>
<v-btn :ripple="false" @click="dialogOpenCloseEvent(dialog)">닫기</v-btn> -->
<a-button :ripple="false" @click="setUpdate($event)" class="mr-2">확인</a-button>
<a-button :ripple="false" type="primary" @click="dialogOpenCloseEvent(dialog)">닫기</a-button>
</v-card-actions>
</v-card>
</v-dialog>
</v-row>
</template>
@ -138,10 +118,20 @@ export default {
type: String,
require: false,
},
openMode:{
type:String,
openMode: {
type: String,
require: false,
},
required: {
type: Boolean,
require: false,
default: false,
},
iconShow:{
type:Boolean,
require:false,
}
default:true
},
// bindingFlag:{
// type:Boolean,
// require: false,
@ -156,7 +146,23 @@ export default {
return {
dialog: false,
loadGrid: false,
loadGrid: true,
dataPathPopExample: {
"rowGrid": {
data: [
{
'calcProc': 'AVG_CNT2',
'argCnt': '2',
'calcDesc': '두개 변수에 대한 평균'
}
],
column: [
{ header: '계산코드', name: 'calcProc', width: 150 },
{ header: '아규먼트갯수', name: 'argCnt', align: 'center', width: 100 },
]
}
},
grid_01: 'grid_01',
myModalKey: 'eqpmCalcPop',
modalDataKey: 'modalData2',
@ -247,7 +253,7 @@ export default {
async created() {
this.init();
},
mounted() {},
mounted() { },
methods: {
...mapMutations({
setPageData: 'setPageData',
@ -282,7 +288,7 @@ export default {
modalDataKey: this.modalDataKey,
value: Object.assign(
// Utility.defaultGridOption(this.$refs.modalGridParent.offsetHeight - 60, myOptions),
Utility.defaultGridOption(400, myOptions),
// Utility.defaultGridOption(400, myOptions),
myOptions,
),
});
@ -292,39 +298,46 @@ export default {
gridKey: this.grid_01,
modalDataKey: this.modalDataKey,
value: [
{ header: '계산코드', name: 'calcProc', width: 150},
{ header: '아규먼트갯수', name: 'argCnt', align:'center', width: 100},
// { header: '계산설명', name : 'calcDesc', width: 286},
{ header: '계산설명', name : 'calcDesc', align:'left'},
{ header: '계산코드', name: 'calcProc', width: 150 },
{ header: '아규먼트갯수', name: 'argCnt', align: 'center', width: 100 },
{ header: '계산설명', name: 'calcDesc', align: 'left' },
],
});
},
async getGridData() {
this.loadGrid = false;
let res = await this.postApiReturn({
apiKey: 'selectEqpmCalcPop',
resKey: 'eqpmCalcPopData',
sendParam: {
calcDescLike: this.searchWord,
openMode:this.item.openMode != undefined ? this.item.openMode : this.openMode
},
});
if(this.myBindingData['calcProc']!= '' || this.myBindingData['calcProc']!= null || this.myBindingData['calcProc']!=undefined){
let newRes = [];
newRes = res.filter(item => {
return item.calcProc != this.myBindingData['calcProc']
});
res = newRes;
}
// const res = [
// {
// 'calcProc' : 'AVG_CNT2',
// 'argCnt' : '2',
// 'calcDesc' : '두개 변수에 대한 평균'
// let res = await this.postApiReturn({
// apiKey: 'selectEqpmCalcPop',
// resKey: 'eqpmCalcPopData',
// sendParam: {
// calcDescLike: this.searchWord,
// openMode: this.item.openMode != undefined ? this.item.openMode : this.openMode
// },
// });
// if (this.myBindingData['calcProc'] != '' || this.myBindingData['calcProc'] != null || this.myBindingData['calcProc'] != undefined) {
// let newRes = [];
// newRes = res.filter(item => {
// return item.calcProc != this.myBindingData['calcProc']
// });
// res = newRes;
// }
// }
// ]
const res = [
{
'calcProc': 'AVG_CNT2',
'argCnt': '2',
'calcDesc': '두개 변수에 대한 평균'
},
{ 'calcProc': 'PROC001', argCnt: 2, 'calcDesc': '덧셈 연산' },
{ 'calcProc': 'PROC002', argCnt: 1, 'calcDesc': '제곱 연산' },
{ 'calcProc': 'PROC003', argCnt: 2, 'calcDesc': '곱셈 연산' },
{ 'calcProc': 'PROC004', argCnt: 1, 'calcDesc': '루트 연산' },
{ 'calcProc': 'PROC005', argCnt: 3, 'calcDesc': '최대값 계산' },
{ 'calcProc': 'PROC006', argCnt: 3, 'calcDesc': '최소값 계산' },
]
this.setModalGridData({
modalKey: this.myModalKey,
gridKey: this.grid_01,
@ -352,14 +365,14 @@ export default {
value: this.selectedData.calcProc,
};
this.$emit('gridEditingFinish', dt);
this.setPageData({ [this.item.valueNm] : this.selectedData.calcProc});
this.setPageData({ [this.item.valueNm]: this.selectedData.calcProc });
if (this.item.valueNm2 !== undefined) {
const dt = {
columnName: this.item.valueNm2,
value: this.selectedData[this.item.valueNm2],
};
this.$emit('gridEditingFinish', dt);
this.setPageData({[this.item.valueNm2] : this.selectedData.argCnt});
this.setPageData({ [this.item.valueNm2]: this.selectedData.argCnt });
}
if (this.item.bindNm !== undefined) {
const dt = {
@ -367,7 +380,7 @@ export default {
value: this.selectedData.argCnt,
};
this.$emit('gridEditingFinish', dt);
this.setPageData({ [this.item.bindNm] : this.selectedData.argCnt});
this.setPageData({ [this.item.bindNm]: this.selectedData.argCnt });
}
}
},
@ -403,33 +416,10 @@ var eqpmCalcPop = {
}
}
.tui-grid-cell.tui-grid-cell-has-tree
.tui-grid-tree-extra-content
+ .tui-grid-cell-content:before {
.tui-grid-cell.tui-grid-cell-has-tree .tui-grid-tree-extra-content+.tui-grid-cell-content:before {
content: none !important;
}
}
@each $theme in dark, light {
.v-application.#{$theme}-mode {
.v-dialog {
.v-card {
&__title {
color: map-deep-get($color, 'white', '0');
@if $theme == dark {
background-color: #2d3355;
.v-btn {
background-color: #2d3355;
}
} @else {
background-color: #3f4d7d;
.v-btn {
background-color: #3f4d7d;
}
}
}
}
}
}
}
</style>

768
components/common/modal/EqpmSelectPop.vue
View File

@ -1,123 +1,97 @@
<template>
<v-row class="search-box" align="center" no-gutters >
<v-col :cols="labelCols">
<v-row class="search-box" align="center" no-gutters>
<v-col v-if="label" :cols="labelCols">
<label for="" class="search-box-label">
<v-icon v-if="iconShow"
x-small
:color="required ? '#fb8200' : 'primary'"
class="mr-1"
>mdi-record-circle</v-icon
>
<v-icon v-if="iconShow" small
:class="['mr-1', required ? 'icon-orange' : 'icon-blue']">$icoBulletPoint</v-icon>
{{ label }}
</label>
</v-col>
<v-col :cols="textCols">
<v-text-field
readonly
v-model="selectValue"
append-icon="mdi-magnify"
class="v-input__custom"
@click="dialogOpenCloseEvent(dialog)"
outlined
:hide-details="true"
:required="required || false"
:disabled="disabled || false"
></v-text-field>
<v-text-field readonly append-icon="" :class="['v-input__custom', customClass]"
@click="dialogOpenCloseEvent(dialog)" outlined :hide-details="true" :required="required || false"
:disabled="disabled || false"><template v-slot:append>
<!-- Custom SVG icon -->
<v-icon>$icoSearch</v-icon>
</template></v-text-field>
</v-col>
<v-dialog
ref="popModal"
v-model="dialog"
width="1400"
overlay-color="#000"
overlay-opacity="0.8"
scrollable
>
<v-dialog ref="popModal" v-model="dialog" width="800" overlay-color="#000" overlay-opacity="0.8" scrollable>
<v-card style="height: 100%">
<v-divider></v-divider>
<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="pa-5">
<v-row align="center" no-gutters>
<v-col :cols="3">
<!-- 설비그룹 -->
<component
:is="'SelectBox'"
:propsValue="selectValue01"
:itemList="selectValueList01"
:label="'설비그룹'"
:disabled="eqpmGrpDisabled"
@update:propsValue="selectValue01 = $event"
/>
</v-col>
<v-col :cols="6" style="padding:0px 10px;">
<!-- FAB -->
<component
:is="'SelectBoxMulti'"
:propsValue="selectValue02"
:itemList="selectValueList02"
:label="'FAB'"
:labelCols="2"
:multiple="true"
:disabled="fabDisabled"
@update:propsValue="selectValue02 = $event"
/>
</v-col>
<v-spacer></v-spacer>
<v-col cols="3" class="text-right">
<v-btn :ripple="false" @click="search()">
조회
</v-btn>
<!-- <v-btn :ripple="false" @click="initSearch()">
초기화
</v-btn> -->
</v-col>
</v-row>
<v-row align="center" no-gutters style="margin-top: 14px;">
<v-col :cols="1">
<v-card-title class="px-5 py-4 d-flex align-center justify-space-between">
<span class="custom-title-4">설비 선택</span>
<a-button icon="close" type="text" @click="dialogOpenCloseEvent(dialog)"></a-button>
</v-card-title>
<div class="pa-2 pt-0">
<v-card class="searchFilter">
<v-row align="end">
<v-col :cols="3.5">
<!-- 설비그룹 -->
<component :is="'SelectBox'" :propsValue="selectValue01" :itemList="selectValueList01"
:label="'설비그룹'" :disabled="eqpmGrpDisabled"
@update:propsValue="selectValue01 = $event" :labelCols="12" :textCols="12"
:iconShow="true" />
</v-col>
<v-col :cols="3.5">
<!-- FAB -->
<component :is="'SelectBoxMulti'" :propsValue="selectValue02"
:itemList="selectValueList02" :label="'FAB'" :labelCols="12" :multiple="true"
:disabled="fabDisabled" @update:propsValue="selectValue02 = $event" :textCols="12"
:iconShow="true" />
</v-col>
<v-col :cols="3.5">
<v-row>
<v-col :cols="12" class="py-0">
<label for="" class="search-box-label">
<v-icon small :class="['mr-1', 'icon-blue']">$icoBulletPoint</v-icon>
설비명
</label>
</v-col>
<v-col :cols="12" class="pt-0">
<v-text-field append-icon="" class="v-input__custom" outlined
:hide-details="true" v-model="searchWord" @keyup.enter="search"><template
v-slot:append>
<!-- Custom SVG icon -->
<v-icon>$icoSearch</v-icon>
</template></v-text-field>
</v-col>
</v-row>
</v-col>
<a-button icon="search" type="primary" @click="search()" class="search-button">조회</a-button>
</v-row>
</v-card>
<!-- <v-row align="center" no-gutters style="margin-top: 14px;">
<v-col :cols="1">
<label for="" class="search-box-label">
<v-icon x-small color="primary" class="mr-1"
>mdi-record-circle</v-icon
>
설비명
<v-icon x-small color="primary" class="mr-1">mdi-record-circle</v-icon>
설비명
</label>
</v-col>
<v-col :cols="3">
<v-text-field
append-icon="mdi-magnify"
class="v-input__custom"
outlined
:hide-details="true"
v-model="searchWord"
@keyup.enter="search"
></v-text-field>
<v-text-field append-icon="mdi-magnify" class="v-input__custom" outlined
:hide-details="true" v-model="searchWord" @keyup.enter="search"></v-text-field>
</v-col>
</v-row>
</v-row> -->
</div>
<div class="px-5" style="height:429px;">
<div ref="modalGridParent" class="w100 h100">
<component
:ref="gridName"
:is="loadGrid? 'Grid' : null"
:dataPath="searchParam.eqpmSelectPopData.eqpmSelectPop"
:gridName="gridName"
:parentPrgmId="parentPrgmId"
@getRowsData="getRowData"
/>
</div>
</div>
<v-divider></v-divider>
<v-card-actions class="pa-5 d-flex align-center justify-center">
<v-btn :ripple="false" @click="setUpdate($event)">확인</v-btn>
<v-btn :ripple="false" @click="dialogOpenCloseEvent(dialog)"
>닫기</v-btn
>
<div class="px-5" style="height:429px;">
<div ref="modalGridParent" class="w100 h100">
<component :ref="gridName" :is="loadGrid ? 'Grid' : null"
:dataPath="searchParam.eqpmSelectPopData.eqpmSelectPop" :gridName="gridName"
:parentPrgmId="parentPrgmId" @getRowsData="getRowData" />
</div>
</div>
<v-card-actions class="px-6 py-4 d-flex align-center justify-end">
<a-button :ripple="false" @click="dialogOpenCloseEvent(dialog)" class="mr-2">닫기</a-button>
<a-button :ripple="false" type="primary" @click="setUpdate($event)">확인</a-button>
</v-card-actions>
</v-card>
</v-dialog>
</v-row>
</template>
@ -171,66 +145,71 @@ export default {
type: String,
require: false,
},
disabled:{
type:Boolean,
require:false,
default:false
disabled: {
type: Boolean,
require: false,
default: false
},
required:{
type:Boolean,
require:false,
default:false
required: {
type: Boolean,
require: false,
default: false
},
fabDisabled:{
type:Boolean,
require:false,
default:false
fabDisabled: {
type: Boolean,
require: false,
default: false
},
eqpmGrpDisabled:{
type:Boolean,
require:false,
default:false
eqpmGrpDisabled: {
type: Boolean,
require: false,
default: false
},
iconShow:{
type:Boolean,
require:false,
default:true
iconShow: {
type: Boolean,
require: false,
default: true
},
isMulti:{
type:Boolean,
require:false,
default:false
}
isMulti: {
type: Boolean,
require: false,
default: false
},
customClass: {
type: String,
require: false,
default: ''
}
},
components: {
Grid,
selectCodeList,
dateUtility,
dateUtility,
InputText,
SelectBox,
SelectBoxMulti
SelectBox,
SelectBoxMulti
// Tree
},
data() {
return {
labelPrepend: true,
modalDataKey:'eqpmSelectPopData',
modalDataKey: 'eqpmSelectPopData',
myModalKey: 'eqpmSelectPop',
gridName: 'eqpmSelectGrid',
loadGrid: false,
setGrid:false,
popCheck:false,
loadGrid: true,
setGrid: false,
popCheck: false,
dialog: false,
activeRowData: {},
checkedRowDataList: [],
selectValue01:null,
selectValue02:[],
selectValueList01:[],
selectValueList02:[],
searchWord:'',
activeRowData:{},
textFieldData:'',
selectRow:{}
selectValue01: null,
selectValue02: [],
selectValueList01: [],
selectValueList02: [],
searchWord: '',
activeRowData: {},
textFieldData: '',
selectRow: {}
};
},
computed: {
@ -240,28 +219,28 @@ export default {
return state.pageData[this.parentPrgmId];
},
myBindingData(state) {
var data = state.pageData[this.parentPrgmId];
if(data.fabId == ''){
data.fabId = null
}else if(typeof(data.fabId)=='string'){
data.fabId = [data.fabId]
}
return {
fabId : data.fabId,
eqpmGrpId : data.eqpmGrpId,
eqpmId:data.eqpmId,
eqpmNm:data.eqpmNm,
eqpmIdList:data.eqpmIdList,
eqpmKindId:data.eqpmKindId,
}
var data = state.pageData[this.parentPrgmId];
if (data.fabId == '') {
data.fabId = null
} else if (typeof (data.fabId) == 'string') {
data.fabId = [data.fabId]
}
return {
fabId: data.fabId,
eqpmGrpId: data.eqpmGrpId,
eqpmId: data.eqpmId,
eqpmNm: data.eqpmNm,
eqpmIdList: data.eqpmIdList,
eqpmKindId: data.eqpmKindId,
}
},
}),
selectValue: {
get() {
// return this.searchParam[this.item.valueNm];
return this.myBindingData
? this.myBindingData[this.valueNm]
: this.textFieldData;
return this.myBindingData
? this.myBindingData[this.valueNm]
: this.textFieldData;
},
set(value) {
// if(this.item && this.item.disableContent){
@ -270,44 +249,44 @@ export default {
return value;
},
},
chkDialog(){
if(this.isMulti){
this.$store.state.pageData[this.parentPrgmId][this.modalDataKey][this.myModalKey][this.gridName].option.rowHeaders = [{type : 'checkbox'}];
}else{
this.$store.state.pageData[this.parentPrgmId][this.modalDataKey][this.myModalKey][this.gridName].option.rowHeaders = [];
}
chkDialog() {
if (this.isMulti) {
this.$store.state.pageData[this.parentPrgmId][this.modalDataKey][this.myModalKey][this.gridName].option.rowHeaders = [{ type: 'checkbox' }];
} else {
this.$store.state.pageData[this.parentPrgmId][this.modalDataKey][this.myModalKey][this.gridName].option.rowHeaders = [];
}
return this.dialog
},
},
watch: {
async chkDialog(val){
// console.log("val : ", val);
if(val){
this.selectValue01 = this.myBindingData.eqpmGrpId;
this.selectValue02 = this.myBindingData.fabId;
await this.search();
// if(this.isMulti){
// }else{
// // 단일 focus용
// if(this.$refs[this.gridName]){
// this.selectRow = this.$refs[this.gridName].getData().filter(item=>{
// return item.eqpmId == this.myBindingData.eqpmId
// });
// this.$refs[this.gridName].focus({
// rowKey : this.selectRow[0].rowKey,
// setScroll: true
// })
// }
// }
}else{
this.dialog = false;
}
// this.selectValue01 = this.myBindingData.eqpmGrpId;
// this.selectValue02 = this.myBindingData.fabId;
// await this.search();
// this.getChecked();
// }
async chkDialog(val) {
// console.log("val : ", val);
if (val) {
this.selectValue01 = this.myBindingData.eqpmGrpId;
this.selectValue02 = this.myBindingData.fabId;
await this.search();
// if(this.isMulti){
// }else{
// // 단일 focus용
// if(this.$refs[this.gridName]){
// this.selectRow = this.$refs[this.gridName].getData().filter(item=>{
// return item.eqpmId == this.myBindingData.eqpmId
// });
// this.$refs[this.gridName].focus({
// rowKey : this.selectRow[0].rowKey,
// setScroll: true
// })
// }
// }
} else {
this.dialog = false;
}
// this.selectValue01 = this.myBindingData.eqpmGrpId;
// this.selectValue02 = this.myBindingData.fabId;
// await this.search();
// this.getChecked();
// }
},
},
@ -317,14 +296,14 @@ export default {
});
},
async created() {
await this.getFab();
await this.getEqpmGrp();
await this.getFab();
await this.getEqpmGrp();
this.init();
},
methods: {
...mapMutations({
setPageData: 'setPageData',
setModalGridData: 'setModalGridData',
setModalGridData: 'setModalGridData',
setModalGridColumn: 'setModalGridColumn',
setModalGridOption: 'setModalGridOption',
}),
@ -332,90 +311,93 @@ export default {
postApiReturn: 'modules/list/postApiReturn',
}),
init() {
this.activeRowData = {};
this.gridInit();
this.activeRowData = {};
this.gridInit();
},
dialogOpenCloseEvent(val){
dialogOpenCloseEvent(val) {
// this.checkPop = !val;
this.dialog=!val;
// this.checkPop = !val;
this.dialog = !val;
},
search() {
this.getRowGridData();
},
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.pageData.eccId != null && this.pageData.eccId != ''){
// this.selectValue02 = this.pageData.eccId;
// }else if(this.pageData.eccId == null || this.pageData.eccId == ''){
this.selectValue02.push(this.selectValueList02[0].value);
// }
} else {
this.selectValueList02 = [];
this.selectValue02 = [];
}
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.pageData.eccId != null && this.pageData.eccId != ''){
// // this.selectValue02 = this.pageData.eccId;
// // }else if(this.pageData.eccId == null || this.pageData.eccId == ''){
// this.selectValue02.push(this.selectValueList02[0].value);
// // }
// } else {
// this.selectValueList02 = [];
// this.selectValue02 = [];
// }
},
async getEqpmGrp() {
let res = await this.postApiReturn({
apiKey: 'selectEqpmGrpCodeList',
resKey: 'eqpmGrpCodeLists',
sendParam: { },
});
if (res.length > 0) {
this.selectValueList01 = await res.map(item => {
return {
text: item.eqpmGrpNm,
value: item.eqpmGrpId,
};
});
this.selectValueList01.unshift({
text:"전체",
value:null
});
// if(this.pageData.eqpmGrpId != null && this.pageData.eqpmGrpId != ''){
// this.selectValue02 = this.pageData.eqpmGrpId;
// }else if(this.pageData.eqpmGrpId == null || this.pageData.eqpmGrpId == ''){
this.selectValue01 = this.selectValueList01[0].value;
// }
} else {
this.selectValueList01 = [];
this.selectValue01 = null;
}
async getEqpmGrp() {
// let res = await this.postApiReturn({
// apiKey: 'selectEqpmGrpCodeList',
// resKey: 'eqpmGrpCodeLists',
// sendParam: { },
// });
// if (res.length > 0) {
// this.selectValueList01 = await res.map(item => {
// return {
// text: item.eqpmGrpNm,
// value: item.eqpmGrpId,
// };
// });
// this.selectValueList01.unshift({
// text:"전체",
// value:null
// });
// // if(this.pageData.eqpmGrpId != null && this.pageData.eqpmGrpId != ''){
// // this.selectValue02 = this.pageData.eqpmGrpId;
// // }else if(this.pageData.eqpmGrpId == null || this.pageData.eqpmGrpId == ''){
// this.selectValue01 = this.selectValueList01[0].value;
// // }
// } else {
// this.selectValueList01 = [];
// this.selectValue01 = null;
// }
},
gridInit(){
// console.log("modalGridParent : ",this.$refs)
// const gridWidth = this.$refs.modalGridParent.offsetWidth/4;
gridInit() {
// console.log("modalGridParent : ",this.$refs)
// const gridWidth = this.$refs.modalGridParent.offsetWidth/4;
let myOptions = {
columnOptions: {
resizable: true,
},
// rowHeaders:[{ type: 'checkbox' }],
// rowHeight:'auto'
};
if(this.isMulti){
myOptions['rowHeaders'] = [{type : 'checkbox'}];
myOptions['rowHeight'] = 'auto';
}
let myOptions = {
columnOptions: {
resizable: true,
},
header: {
height: 'auto',
},
// rowHeaders:[{ type: 'checkbox' }],
rowHeight: 'auto',
};
if (this.isMulti) {
// myOptions['rowHeaders'] = [{ type: 'checkbox' }];
// myOptions['rowHeight'] = 'auto';
}
this.setModalGridOption({
this.setModalGridOption({
modalKey: this.myModalKey,
gridKey: this.gridName,
modalDataKey: this.modalDataKey,
@ -426,46 +408,46 @@ export default {
),
});
const myColumns= [
{
header : 'FAB',
name : 'fabId',
align:'center',
hidden:true
},
{
header : 'FAB',
name : 'fabNm',
align:'center'
},
{
header : '설비ID',
name : 'eqpmId',
align:'center',
// hidden:true
},
{
header : '설비명',
name : 'eqpmNm',
align:'center'
},
{
header : 'eccId',
name : 'eccId',
align:'center',
hidden:true
},
{
header : 'eccNm',
name : 'eccNm',
align:'center',
hidden:true
},
const myColumns = [
{
header: 'FAB',
name: 'fabId',
align: 'center',
hidden: true
},
{
header: 'FAB',
name: 'fabNm',
align: 'center'
},
{
header: '설비ID',
name: 'eqpmId',
align: 'center',
// hidden:true
},
{
header: '설비명',
name: 'eqpmNm',
align: 'center'
},
{
header: 'eccId',
name: 'eccId',
align: 'center',
hidden: true
},
{
header: 'eccNm',
name: 'eccNm',
align: 'center',
hidden: true
},
]
]
this.setModalGridColumn({
this.setModalGridColumn({
modalKey: this.myModalKey,
gridKey: this.gridName,
modalDataKey: this.modalDataKey,
@ -473,91 +455,117 @@ export default {
});
// this.getRowGridData();
},
async getRowGridData(){
this.loadGrid =false;
var res = await this.postApiReturn({
apiKey: 'selectEqpmPop',
resKey: 'eqpmPopData',
sendParam: {
fabId:this.selectValue02,
eqpmGrpId:this.selectValue01,
searchWord:this.searchWord,
eqpmKindId:this.myBindingData.eqpmKindId,
},
});
// const dayjs = require('dayjs');
// var newRes = res.map(item=>
// item = {
// ...item,
// totDttmDay : Utility.setFormatDate(item.totDttm, 'YYYY-MM-DD'),
// totDttmTime : Utility.setFormatDate(item.totDttm, 'HH') + "~" + dayjs(item.totDttm).add(1,'h').format('HH')
// }
// );
this.setModalGridData({
// this.getRowGridData();
},
async getRowGridData() {
this.loadGrid = false;
// var res = await this.postApiReturn({
// apiKey: 'selectEqpmPop',
// resKey: 'eqpmPopData',
// sendParam: {
// fabId:this.selectValue02,
// eqpmGrpId:this.selectValue01,
// searchWord:this.searchWord,
// eqpmKindId:this.myBindingData.eqpmKindId,
// },
// });
// const dayjs = require('dayjs');
// var newRes = res.map(item=>
// item = {
// ...item,
// totDttmDay : Utility.setFormatDate(item.totDttm, 'YYYY-MM-DD'),
// totDttmTime : Utility.setFormatDate(item.totDttm, 'HH') + "~" + dayjs(item.totDttm).add(1,'h').format('HH')
// }
// );
const res =
[
{
"fabId": "FAB001",
"fabNm": "Gumi FAB",
"eqpmId": "EQ001",
"eqpmNm": "Etcher A12",
"eccId": "ECC001",
"eccNm": "Etch Control Center"
},
{
"fabId": "FAB002",
"fabNm": "Pyeongtaek FAB",
"eqpmId": "EQ002",
"eqpmNm": "Deposition B34",
"eccId": "ECC002",
"eccNm": "Deposition Control Center"
},
{
"fabId": "FAB003",
"fabNm": "Hwaseong FAB",
"eqpmId": "EQ003",
"eqpmNm": "CMP C56",
"eccId": "ECC003",
"eccNm": "CMP Control Center"
}
];
this.setModalGridData({
modalKey: this.myModalKey,
gridKey: this.gridName,
modalDataKey: this.modalDataKey,
value: res
});
this.loadGrid=true;
this.$nextTick(()=>{
if(this.isMulti){
this.getChecked();
}
});
},
setUpdate() {
if(this.isMulti){
var data = this.$refs[this.gridName].getCheckedRowsEvt();
this.dialog = false;
this.setPageData({
checkedRows: data,
eqpmId : data.map(item=>{
return item.eqpmId;
}),
eqpmNm : data.map(item=>{
return item.eqpmNm;
}),
eqpmIdList:data,
isFind2:true
});
}else{
this.dialog = false;
this.setPageData({eqpmInfo : this.activeRowData, eqpmNm : this.activeRowData.eqpmNm})
}
this.loadGrid = true;
this.$nextTick(() => {
if (this.isMulti) {
this.getChecked();
}
});
},
getRowData(data){
if(this.isMulti){
if(data._attributes.checked){
this.$refs[this.gridName].uncheckEvt(data, this.$refs[this.gridName]);
}else{
this.$refs[this.gridName].checkEvt(data, this.$refs[this.gridName]);
}
}else{
this.activeRowData = data;
}
},
getChecked(){
if(this.myBindingData.eqpmIdList.length>0){
this.myBindingData.eqpmIdList.map(item=>{
this.$refs[this.gridName].checkEvt(item, this.$refs[this.gridName]);
});
}
}
setUpdate() {
if (this.isMulti) {
var data = this.$refs[this.gridName].getCheckedRowsEvt();
this.dialog = false;
this.setPageData({
checkedRows: data,
eqpmId: data.map(item => {
return item.eqpmId;
}),
eqpmNm: data.map(item => {
return item.eqpmNm;
}),
eqpmIdList: data,
isFind2: true
});
} else {
this.dialog = false;
this.setPageData({ eqpmInfo: this.activeRowData, eqpmNm: this.activeRowData.eqpmNm })
}
},
getRowData(data) {
if (this.isMulti) {
if (data._attributes.checked) {
this.$refs[this.gridName].uncheckEvt(data, this.$refs[this.gridName]);
} else {
this.$refs[this.gridName].checkEvt(data, this.$refs[this.gridName]);
}
} else {
this.activeRowData = data;
}
},
getChecked() {
if (this.myBindingData.eqpmIdList.length > 0) {
this.myBindingData.eqpmIdList.map(item => {
this.$refs[this.gridName].checkEvt(item, this.$refs[this.gridName]);
});
}
}
},
};
var eqpmSelectPop ={
eqpmSelectGrid:{
data:[],
column:[],
option:{}
}
var eqpmSelectPop = {
eqpmSelectGrid: {
data: [],
column: [],
option: {}
}
}
</script>

375
components/common/modal/EqpmSelectPop_bk.vue Normal file
View File

@ -0,0 +1,375 @@
<template>
<v-row class="search-box" align="center" no-gutters>
<v-col :cols="labelCols">
<label for="" class="search-box-label">
{{ label }}
</label>
</v-col>
<v-col :cols="textCols">
<!-- <a-input :size="size" @click="showDetailModal = true" class="custom-input" suffix-icon placeholder="Search..." v-model="selectValue">
<template #suffix>
<a-icon type="search" />
</template>
</a-input> -->
<!-- append-icon="search" -->
<v-text-field
readonly
v-model="selectValue"
class="v-input__custom"
@click="showDetailModal = true"
outlined
:hide-details="true"
:required="required || false"
>
<!-- :disabled="disabled || false" -->
<template #append >
<a-icon type="search" />
</template>
</v-text-field>
</v-col>
<a-modal v-model="showDetailModal" title="가이드 알람이력" class="text-left" width="800px" :footer="null"
:style="{ borderRadius: '8px', overflow: 'hidden' }" :bodyStyle="{ paddingTop: '0px' }">
<!-- Top Input Fields -->
<v-row :gutters="32" align="end" style="margin-bottom: 16px;">
<!-- Label on the left -->
<!-- Two inputs on the right -->
<v-col :cols="3">
<component :is="'SelectBox'" :label="'실비그룹'" :labelCols="12" :textCols="12"
:propsValue="eqpmGrpSelected" :itemList="eqpmGrpList"
@update:propsValue="eqpmGrpSelected = $event" :disabled="disabled" :iconShow="false" />
</v-col>
<v-col :cols="4" style="text-align: left;">
<component :is="'SelectBox'" :label="'FAB'" :labelCols="12" :textCols="12"
:propsValue="localFabSelected" :itemList="fabList"
@update:propsValue="localFabSelected = $event" :disabled="disabled" :iconShow="false" />
</v-col>
<v-col :cols="5" >
<v-row>
<v-col :cols="12" style="text-align: left;">
<div>실비명</div>
</v-col>
<v-col :cols="8">
<a-input class="custom-input" suffix-icon placeholder="Search..."
:style="{ borderRadius: '6px', }" >
<template #suffix>
<a-icon type="search" />
</template>
</a-input>
</v-col>
<v-col :cols="3" class="text-right">
<!-- 조회버튼 -->
<BtnSearch @click="searchFab()" />
</v-col>
</v-row>
</v-col>
</v-row>
<a-divider />
<!-- Table -->
<a-table :columns="columns" :dataSource="filteredData" rowKey="id" :rowSelection="rowSelection" bordered />
<!-- Footer Buttons -->
<div style="text-align: right; margin-top: 16px;">
<a-button @click="showDetailModal = false">닫기</a-button>
<a-button type="primary" style="margin-left: 8px; color:#fff"
@click="showDetailModal = false">확인</a-button>
</div>
</a-modal>
</v-row>
</template>
<script>
import { mapState, mapMutations, mapActions } from 'vuex';
import Grid from '~/components/common/Grid';
import Utility from '~/plugins/utility';
import selectCodeList from '@/components/common/select/selectCodeList';
import InputText from '~/components/common/input/InputText';
import dateUtility from '~/plugins/dateUtility';
import SelectBox from '@/components/common/select/SelectBox';
import SelectBoxMulti from '@/components/common/select/SelectBoxMulti';
import BtnSearch from '~/components/common/button/BtnSearch';
export default {
props: {
parentPrgmId: {
type: String,
require: true,
default: '비교대상 최대(20개)',
},
label: {
type: String,
require: false,
default: '전력 계약 정보',
},
valueNm: {
type: String,
require: false,
default: '',
},
title: {
type: String,
require: false,
default: '전력 계약 목록',
},
labelCols: {
type: Number,
require: false,
default: 12,
},
textCols: {
type: Number,
require: false,
default: 12,
},
item: {
type: Object,
require: true,
},
bindingData: {
type: String,
require: false,
},
disabled: {
type: Boolean,
default: true
},
required: {
type: Boolean,
require: false,
default: false
},
fabDisabled: {
type: Boolean,
require: false,
default: false
},
eqpmGrpDisabled: {
type: Boolean,
require: false,
default: false
},
iconShow: {
type: Boolean,
require: false,
default: true
},
isMulti: {
type: Boolean,
require: false,
default: false
},
fabSelected: {
type: String, // or Array, depending on your data
required: false
},
eqpmGrpSelected: {
type: String, // or Array, depending on your data
required: false
},
size: {
type: String,
require: false,
default: "middle",
}
},
components: {
Grid,
selectCodeList,
dateUtility,
InputText,
SelectBox,
SelectBoxMulti,
BtnSearch
// Tree
},
data() {
return {
labelPrepend: true,
modalDataKey: 'eqpmSelectPopData',
myModalKey: 'eqpmSelectPop',
gridName: 'eqpmSelectGrid',
loadGrid: false,
setGrid: false,
popCheck: false,
dialog: false,
activeRowData: {},
checkedRowDataList: [],
localFabSelected: this.fabSelected,
localEqpmGrpSelected: this.eqpmGrpSelected,
fabList: [],
eqpmGrpList: [],
searchWord: '',
activeRowData: {},
textFieldData: '',
selectRow: {},
showDetailModal: false,
columns: [
{
title: 'FAB',
dataIndex: 'fab',
key: 'fab',
},
{
title: '설비ID',
dataIndex: 'equipmentId',
key: 'equipmentId',
},
{
title: '설비명',
dataIndex: 'equipmentName',
key: 'equipmentName',
},
],
// Table data
data: [
{
id: 1,
fab: 'FAB001',
equipmentId: 'EQ001',
equipmentName: '냉각기 A',
},
{
id: 2,
fab: 'FAB002',
equipmentId: 'EQ002',
equipmentName: '펌프 B',
},
{
id: 3,
fab: 'FAB003',
equipmentId: 'EQ003',
equipmentName: '히터 C',
},
{
id: 4,
fab: 'FAB001',
equipmentId: 'EQ004',
equipmentName: '냉각기 D',
},
{
id: 5,
fab: 'FAB002',
equipmentId: 'EQ005',
equipmentName: '펌프 E',
},
{
id: 6,
fab: 'FAB003',
equipmentId: 'EQ006',
equipmentName: '히터 F',
},
{
id: 7,
fab: 'FAB001',
equipmentId: 'EQ007',
equipmentName: '냉각기 G',
},
{
id: 8,
fab: 'FAB002',
equipmentId: 'EQ008',
equipmentName: '펌프 H',
},
],
filteredData: [],
// Row selection config
rowSelection: {
onChange: (selectedRowKeys, selectedRows) => {
console.log('Selected Row Keys:', selectedRowKeys);
console.log('Selected Rows:', selectedRows);
},
}
};
},
watch: {
fabSelected(newVal) {
this.localFabSelected = newVal;
},
eqpmGrpSelected(newVal) {
this.localEqpmGrpSelected = newVal;
}
},
beforeCreate() {
this.$store.commit('setPageData', {
eqpmSelectPopData: { eqpmSelectPop },
});
},
async created() {
await this.getFab();
await this.getEqpmGrp();
this.init();
},
methods: {
// ...mapMutations({
// setPageData: 'setPageData',
// setModalGridData: 'setModalGridData',
// setModalGridColumn: 'setModalGridColumn',
// setModalGridOption: 'setModalGridOption',
// }),
// ...mapActions({
// postApiReturn: 'modules/list/postApiReturn',
// }),
init() {
this.filteredData = this.data;
// this.activeRowData = {};
// this.gridInit();
},
// search() {
// this.getRowGridData();
// },
searchFab() {
console.log('tttttttttttt')
// this.filteredData = this.data.filter(item => {
// const matchGrp = this.eqpmGrpSelected ? item.group === this.eqpmGrpSelected : true;
// const matchFab = this.localFabSelected ? item.fab === this.localFabSelected : true;
// return matchGrp && matchFab;
// });
},
async getFab() {
this.fabList = [
{ label: 'FAB001', value: 'FAB001' },
{ label: 'FAB002', value: 'FAB002' },
{ label: 'FAB003', value: 'FAB003' },
];
// this.fabSelected = 'FAB001';
},
async getEqpmGrp() {
this.eqpmGrpList = [
{ label: 'EQ 1', value: 'EQ001' },
{ label: 'EQ 2', value: 'EQ002' },
{ label: 'EQ 3', value: 'EQ003' },
];
// this.eqpmGrpSelected = 'EQ001';
},
},
};
var eqpmSelectPop = {
eqpmSelectGrid: {
data: [],
column: [],
option: {}
}
}
</script>

247
components/common/modal/EvtObjPop.vue
View File

@ -1,95 +1,61 @@
<template>
<v-row class="search-box" align="center" no-gutters>
<v-col :cols="option.labelCols">
<v-row class="search-box" align="center">
<v-col :cols="option.labelCols" class="py-0">
<label for="" class="search-box-label">
<v-icon
x-small
:color="item.required ? '#fb8200' : 'primary'"
class="mr-1"
>mdi-record-circle</v-icon
>
<v-icon v-if="item.iconShow" small
:class="['mr-1', item.required ? 'icon-orange' : 'icon-blue']">$icoBulletPoint</v-icon>
{{ option.labelContent }}
</label>
</v-col>
<v-col :cols="option.textCols">
<v-text-field
readonly
v-model="selectValue"
append-icon="mdi-magnify"
class="v-input__custom"
@click="dialogOpenCloseEvent(dialog)"
outlined
:hide-details="true"
:required="item.required || false"
:disabled="item.disabled || false"
></v-text-field>
<v-text-field readonly v-model="selectValue" append-icon="mdi-magnify"
:class="['v-select__custom', customClass]"
@click="dialogOpenCloseEvent(dialog)" outlined :hide-details="true"
:required="item.required || false"></v-text-field>
<!-- :disabled="item.disabled || false" -->
</v-col>
<v-dialog v-model="dialog" scrollable width="1000px">
<v-card style="height: 100%">
<v-card-title class="pa-5 d-flex align-center justify-space-between">
<span class="custom-title-4">{{ option.modalTitle }}</span>
<v-btn
icon
tile
:ripple="false"
@click="dialogOpenCloseEvent(dialog)"
>
<v-icon>mdi-close</v-icon>
</v-btn>
<v-icon @click="dialogOpenCloseEvent(dialog)">mdi-close</v-icon>
</v-card-title>
<div class="pa-5">
<v-row align="center" no-gutters>
<v-col :cols="2">
<label for="" class="search-box-label">
<v-icon x-small color="primary" class="mr-1"
>mdi-record-circle</v-icon
>
검색
</label>
</v-col>
<v-col :cols="6">
<v-text-field
append-icon="mdi-magnify"
class="v-input__custom"
outlined
:hide-details="true"
v-model="searchWord"
@keyup.enter="search"
></v-text-field>
</v-col>
<v-spacer></v-spacer>
<v-col cols="4" class="text-right">
<v-btn :ripple="false" @click="search()">
조회
</v-btn>
<!-- <v-btn :ripple="false" @click="initSearch()">
초기화
</v-btn> -->
</v-col>
</v-row>
</div>
<v-divider></v-divider>
<v-row align="end" class="pa-5" no-gutters>
<v-col :cols="2.5" class="mr-2">
<v-row>
<v-col :cols="2">
<label for="" class="search-box-label">
<!-- <v-icon small
:class="['mr-1', item.required ? 'icon-orange' : 'icon-blue']"
>$icoBulletPoint</v-icon> -->
검색
</label>
</v-col>
<v-col :cols="12">
<v-text-field append-icon="mdi-magnify" class="v-input__custom" outlined :hide-details="true"
v-model="searchWord" @keyup.enter="search"></v-text-field>
</v-col>
</v-row>
</v-col>
<a-button type="primary" :ripple="false" @click="search()">
조회
</a-button>
</v-row>
<!-- <div :style="'height: calc(65vh)'"> -->
<div :style="'height: 600px'">
<!-- <div :style="{ height: 'calc(100% - 213px)' }"> -->
<div ref="modalGridParent" class="h100 py-3">
<component
:is="loadGrid && dialog ? 'Grid' : null"
:gridName="grid_01"
:dataPath="searchParam.modalData2.evtObjPop"
:parentPrgmId="parentPrgmId"
@getRowsData="getRowData"
@dblClick="setUpdate($event)"
/>
<!-- :is="loadGrid && dialog ? 'Grid' : null" -->
<component :is="loadGrid && dialog ? 'Grid' : null" :gridName="grid_01"
:dataPath="searchParam.modalData2.evtObjPop" :parentPrgmId="parentPrgmId" @getRowsData="getRowData"
@dblClick="setUpdate($event)" />
</div>
</div>
<v-card-actions class="pa-5 d-flex align-center justify-center">
<v-btn :ripple="false" @click="setUpdate('init')">초기화</v-btn>
<v-btn :ripple="false" @click="setUpdate($event)">확인</v-btn>
<v-btn :ripple="false" @click="dialogOpenCloseEvent(dialog)"
>닫기</v-btn
>
<v-card-actions class="pa-5 d-flex align-center justify-end">
<a-button type="default" class="mr-2" :ripple="false" @click="dialogOpenCloseEvent(dialog)">닫기</a-button>
<a-button type="primary" class="mr-2" :ripple="false" @click="setUpdate('init')">초기화</a-button>
<a-button type="primary" :ripple="false" @click="setUpdate($event)">확인</a-button>
</v-card-actions>
</v-card>
</v-dialog>
@ -139,7 +105,11 @@ export default {
bindingData: {
type: String,
require: false,
}
},
customClass: {
type: String,
require: false,
},
// bindingFlag:{
// type:Boolean,
// require: false,
@ -154,7 +124,7 @@ export default {
return {
dialog: false,
loadGrid: false,
loadGrid: true,
grid_01: 'grid_01',
myModalKey: 'evtObjPop',
modalDataKey: 'modalData2',
@ -195,6 +165,35 @@ export default {
computed: {
...mapState({
searchParam(state) {
const myOptions = {
columnOptions: {
resizable: true,
},
treeColumnOptions: {
name: 'readPlcNm', // Showing tree table
useIcon: false, // Not using icon
indentWidth: 10,
},
};
const dataPathMock = {
'grid_01': {
column: [
{ header: '검침개소명', name: 'readPlcNm', align: 'left', minWidth: 400, },
{ header: '검침개소', name: 'plcKind', minWidth: 100, align: 'center', },
// {
// header: '사용 여부', name: 'useFg', minWidth: 100, align: 'center',
// },
],
data: sampleData,
option: myOptions
}
};
return {
modalData2: {
evtObjPop: dataPathMock
}
}
// end test
return state.pageData[this.parentPrgmId];
},
myBindingData(state) {
@ -209,7 +208,7 @@ export default {
}),
selectValue: {
get() {
if(this.formFlag){
if (this.formFlag) {
if (!this.item) {
return this.textFieldData;
}
@ -217,12 +216,12 @@ export default {
// return "NONE";
// }
else {
return this.myBindingData
return this.myBindingData
? this.myBindingData[this.item.valueNm]
: this.textFieldData;
: this.textFieldData;
}
}else{
} else {
// grid와 바인딩 안했을 때
return this.textFieldData;
}
@ -251,7 +250,7 @@ export default {
created() {
this.init();
},
mounted() {},
mounted() { },
methods: {
...mapMutations({
setPageData: 'setPageData',
@ -301,7 +300,7 @@ export default {
});
},
async getGridData() {
this.loadGrid = false;
// this.loadGrid = false;
const res = await this.postApiReturn({
apiKey: 'selectTagBaseInfo',
@ -325,7 +324,7 @@ export default {
},
setUpdate(v) {
// 초기화
if(v == 'init'){
if (v == 'init') {
this.selectedData.tagId = null;
this.selectedData.tagNm = null;
}
@ -334,9 +333,9 @@ export default {
this.textFieldData = this.selectedData.tagId;
} else {
// let formFg = this.item.formFg != undefined ? this.item.formFg : this.formFg;
if(this.formFlag){
if (this.formFlag) {
if (this.item.bindNm) {
this.myBindingData[this.item.bindNm] = this.selectedData.tagNm;
this.myBindingData[this.item.bindNm] = this.selectedData.tagNm;
} else {
this.myBindingData.tagNm = this.selectedData.tagNm;
}
@ -360,16 +359,16 @@ export default {
};
this.$emit('gridEditingFinish', dt);
}
}else{
} else {
// grid와 binding 안되어있는 경우
this.textFieldData = this.selectedData.tagNm;
this.setPageData({
tagId: this.selectedData.tagId,
// [this.item.tagNm]: this.selectedData.tagNm
});
}
}
},
dialogOpenCloseEvent(val) {
@ -377,6 +376,7 @@ export default {
// this.dialog = false;
// return;
// }
console.log("this.dialog: ", this.dialog);
this.dialog = !val;
},
},
@ -389,6 +389,50 @@ var evtObjPop = {
option: {},
},
};
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: '미사용',
},
];
</script>
<style lang="scss" scoped>
@ -404,33 +448,8 @@ var evtObjPop = {
}
}
.tui-grid-cell.tui-grid-cell-has-tree
.tui-grid-tree-extra-content
+ .tui-grid-cell-content:before {
.tui-grid-cell.tui-grid-cell-has-tree .tui-grid-tree-extra-content+.tui-grid-cell-content:before {
content: none !important;
}
}
@each $theme in dark, light {
.v-application.#{$theme}-mode {
.v-dialog {
.v-card {
&__title {
color: map-deep-get($color, 'white', '0');
@if $theme == dark {
background-color: #2d3355;
.v-btn {
background-color: #2d3355;
}
} @else {
background-color: #3f4d7d;
.v-btn {
background-color: #3f4d7d;
}
}
}
}
}
}
}
</style>

80
components/common/modal/FtnPlcFormPop.vue
View File

@ -1,26 +1,32 @@
<template>
<v-row class="search-box" align="center" no-gutters>
<v-col :cols="option.labelCols">
<v-row class="search-box " align="center" no-gutters >
<v-col :cols="option.labelCols" class="py-0">
<label for="" class="search-box-label">
<v-icon
x-small
v-if="iconShow"
small
:color="item.required ? '#fb8200' : 'primary'"
class="mr-1"
>mdi-record-circle</v-icon
:class="['mr-1', item.required ? 'icon-orange' : 'icon-blue']"
>$icoBulletPoint</v-icon
>
{{ option.labelContent }}
</label>
</v-col>
<v-col :cols="option.textCols">
<!-- append-icon="mdi-magnify" -->
<v-text-field
readonly
v-model="selectValue"
append-icon="mdi-magnify"
class="v-input__custom"
@click="dialogOpenCloseEvent(dialog)"
outlined
:hide-details="true"
></v-text-field>
>
<template v-slot:append>
<!-- Custom SVG icon -->
<v-icon>$icoSearch</v-icon>
</template>
</v-text-field>
</v-col>
<v-dialog v-model="dialog" scrollable width="700px">
@ -137,6 +143,11 @@ export default {
type: String,
require: false,
},
iconShow: {
type: Boolean,
require: false,
default: true
},
},
components: {
Grid,
@ -146,7 +157,7 @@ export default {
return {
dialog: false,
loadGrid: false,
loadGrid: true,
grid_01: 'grid_01',
myModalKey: 'FtnPlcFormPop',
modalDataKey: 'modalData3',
@ -285,27 +296,48 @@ export default {
});
},
async getGridData() {
this.loadGrid = false;
// this.loadGrid = false;
const res = await this.postApiReturn({
apiKey: 'selectEccBaseInfo',
resKey: 'eccBaseInfoData',
sendParam: {
blocId: this.myBindingData.blocId,
eqpmYn: '0',
search: this.searchWord,
},
});
// const res = await this.postApiReturn({
// apiKey: 'selectEccBaseInfo',
// resKey: 'eccBaseInfoData',
// sendParam: {
// blocId: this.myBindingData.blocId,
// eqpmYn: '0',
// search: this.searchWord,
// },
// });
const setTreeData = await this.setTree({
gridKey: this.gridNameTree,
treeKey: 'ECC_ID',
value: res.map(item => ({
// const setTreeData = await this.setTree({
// gridKey: this.gridNameTree,
// treeKey: 'ECC_ID',
// value: res.map(item => ({
// ...item,
// eccNm: item.eccNm,
// })),
// });
//mockdata eccNm
let res = [
{ ECC_ID: 'ECC001', eccNm: '서울 본사', iconShow: false, align: 'center' },
{ ECC_ID: 'ECC002', eccNm: '부산 지사', useIcon: false, align: 'center' },
{ ECC_ID: 'ECC003', eccNm: '대구 센터', useIcon: false, align: 'center' },
{ ECC_ID: 'ECC004', eccNm: '광주 사무소' , useIcon: false, align: 'center'},
{ ECC_ID: 'ECC005', eccNm: '인천 물류창고' , useIcon: false, align: 'center'},
];
const setTreeData = {
ROOT: res.map(item => ({
...item,
eccNm: item.eccNm,
})),
});
}))
};
console.log(res);
this.setModalGridData({
modalKey: this.myModalKey,
gridKey: this.grid_01,

267
components/common/modal/ReadPlcPop.vue
View File

@ -1,85 +1,63 @@
<template>
<v-row class="search-box" align="center" no-gutters>
<v-row class="search-box" align="center" >
<!-- <v-col v-if="label" cols="2"> -->
<v-col v-if="label" :cols="labelCols">
<v-col v-if="item.label" :cols="item.labelCols" class="py-0">
<label for="" class="search-box-label">
<v-icon
x-small
:color="item.required ? '#fb8200' : 'primary'"
class="mr-1"
>mdi-record-circle</v-icon
>
<v-icon v-if="item.iconShow" small
:class="['mr-1', item.required ? 'icon-orange' : 'icon-blue']">$icoBulletPoint</v-icon>
{{ item.label }}
</label>
</v-col>
<v-col :cols="label ? textCols : ''">
<v-col :cols="item.label ? item.textCols : ''" class="py-0">
<!-- <v-col :cols="label ? 9 : ''"> -->
<!-- :value="textfield" -->
<v-text-field
readonly
v-model="selectValue"
append-icon="mdi-magnify"
class="v-input__custom"
@click="dialog = !dialog"
outlined
:hide-details="true"
:disabled="item.disabled || false"
:required="item.required || false"
></v-text-field>
<v-text-field readonly v-model="selectValue" append-icon="" class="v-input__custom"
@click="dialog = !dialog" outlined :hide-details="true" :disabled="item.disabled || false"
:required="item.required || false"><template v-slot:append>
<!-- Custom SVG icon -->
<v-icon>$icoSearch</v-icon>
</template></v-text-field>
</v-col>
<!-- <v-row justify="center"> -->
<v-dialog
ref="popModal"
v-model="dialog"
width="600"
overlay-color="#000"
overlay-opacity="0.8"
scrollable
>
<v-dialog v-model="dialog" width="800px" scrollable>
<!-- <template v-slot:activator="{ on, attrs }">
<v-btn color="primary" dark v-bind="attrs" v-on="on">공정/설비</v-btn>
</template> -->
<v-card style="height: 100%">
<v-card-title
class="v-card__title d-flex align-center justify-space-between"
>
<v-card-title class="px-6 py-4 d-flex align-center justify-space-between">
<span class="custom-title-4">{{ item.label }}</span>
<v-btn icon tile :ripple="false" @click="dialog = !dialog">
<v-icon>mdi-close</v-icon>
</v-btn>
<a-button icon="close" type="text" @click="dialog = false"></a-button>
</v-card-title>
<!-- <v-card-actions> -->
<div class="pa-5">
<div class="pa-6 pt-0">
<!-- <v-text-field label="위치정보 선택"></v-text-field> -->
<v-row align="center" no-gutters>
<v-col v-if="label" cols="3">
<v-row align="center">
<v-col v-if="label" cols="12" class="py-0">
<label for="" class="search-box-label">
<v-icon x-small color="primary" class="mr-1"
>mdi-record-circle</v-icon
>
<v-icon small
:class="['mr-1', 'icon-blue']">$icoBulletPoint</v-icon>
{{ item.label }}
</label>
</v-col>
<v-col :cols="label ? 6 : ''">
<v-col :cols="label ? 6 : ''" class="py-0">
<!-- :value="textfield" -->
<v-text-field
append-icon="mdi-magnify"
class="v-input__custom"
outlined
:hide-details="true"
v-model="searchWord"
@keyup.enter="typeEnterKey"
></v-text-field>
<v-text-field append-icon="" class="v-input__custom" outlined :hide-details="true"
v-model="searchWord" @keyup.enter="typeEnterKey"><template v-slot:append>
<!-- Custom SVG icon -->
<v-icon>$icoSearch</v-icon>
</template></v-text-field>
</v-col>
<v-spacer></v-spacer>
<v-col cols="3" class="text-right">
<v-btn :ripple="false" icon tile @click="btnTreeExpand()">
<!-- {{ treeExpand }} -->
<v-icon
size="30"
v-text="treeExpandAll ? 'mdi-chevron-up' : 'mdi-chevron-down'"
></v-icon>
<v-icon size="30"
v-text="treeExpandAll ? 'mdi-chevron-up' : 'mdi-chevron-down'"></v-icon>
</v-btn>
<!-- <v-btn color="primary" dark>펼치기</v-btn> -->
<!-- <v-btn color="primary" dark>접기</v-btn> -->
@ -98,20 +76,13 @@
<!-- <v-btn color="primary" dark>초기화</v-btn> -->
<!-- as-is 롤 봐도 초기화가 하는 기능을 모르겠음.. -->
</div>
<!-- </v-card-actions> -->
<v-divider></v-divider>
<v-card-text>
<div ref="treeGridParent" style="height: 500px">
<component
:ref="'treeGrid' + parentPrgmId"
:is="loadGrid && dialog ? 'Grid' : null"
:gridName="gridNameTree"
:dataPath="searchParam.modalData.selectReadObjListTree"
:parentPrgmId="parentPrgmId"
:bindingData="bindingData"
@getRowsData="getRowData"
@dblClick="setUpdate()"
/>
<component :ref="'treeGrid' + parentPrgmId" :is="loadGrid && dialog ? 'Grid' : null"
:gridName="gridNameTree" :dataPath="searchParam.modalData.selectReadObjListTree"
:parentPrgmId="parentPrgmId" :bindingData="bindingData" @getRowsData="getRowData"
@dblClick="setUpdate()" />
</div>
<!-- <component
:is="ftnPlcListTreeData.length > 0 ? 'Tree' : null"
@ -119,24 +90,9 @@
/> -->
</v-card-text>
<v-divider></v-divider>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="primary" dark @click="setUpdate()">확인</v-btn>
<v-btn color="primary" dark @click="dialog = false">닫기</v-btn>
<!-- <v-btn
color="green darken-1"
text
@click="dialog = false"
>
Disagree
</v-btn>
<v-btn
color="green darken-1"
text
@click="dialog = false"
>
Agree
</v-btn> -->
<v-card-actions class="px-6 py-4 d-flex align-center justify-end">
<a-button :ripple="false" @click="setUpdate()" class="mr-2">확인</a-button>
<a-button :ripple="false" type="primary" @click="dialog = false" class="mr-2">닫기</a-button>
</v-card-actions>
</v-card>
</v-dialog>
@ -199,7 +155,7 @@ export default {
myModalKey: 'selectReadObjListTree',
gridNameTree: 'treeGrid',
loadGrid: false,
loadGrid: true,
dialog: false,
treeData: [], // 리턴받은 원본 트리 데이터
@ -308,6 +264,17 @@ export default {
gridKey: this.gridNameTree,
modalDataKey: this.modalDataKey,
value: [
{
header: '',
name: '',
align: 'center',
width: 50,
formatter: (props) => {
return `<label class="custom-radio">
<span class="radio-mark"></span>
</label>`;
}
},
{
header: '검침개소명',
name: 'readPlcNm',
@ -322,23 +289,69 @@ export default {
async getTreeData() {
this.loadGrid = false;
const res = await this.postApiReturn({
apiKey: 'selectReadPlcBaseInfo',
resKey: 'readPlcBaseInfoData',
sendParam: {
blocId:
this.searchParam.blocMstrList.length > 0
? this.searchParam.blocMstrList[this.searchParam.blocId].blocId
: this.searchParam.blocId, //"BL0001",
// readObjId: this.searchParam.readObj, // "MTT00001" // 전력 코드 고정
readObjId: this.searchParam.searchReadObj, // "MTT00001" // 전력 코드 고정
// const res = await this.postApiReturn({
// apiKey: 'selectReadPlcBaseInfo',
// resKey: 'readPlcBaseInfoData',
// sendParam: {
// blocId:
// this.searchParam.blocMstrList.length > 0
// ? this.searchParam.blocMstrList[this.searchParam.blocId].blocId
// : this.searchParam.blocId, //"BL0001",
// // readObjId: this.searchParam.readObj, // "MTT00001" // 전력 코드 고정
// readObjId: this.searchParam.searchReadObj, // "MTT00001" // 전력 코드 고정
useFg: '1',
readPlcNmLike: this.searchWord,
// useFg: '1',
// readPlcNmLike: this.searchWord,
// },
// });
const treeData = [
{
readPlcNm: '서울 본사',
name: '본사',
_children: [
{
readPlcNm: '서울 본사 - 1층',
name: '1층',
},
{
readPlcNm: '서울 본사 - 2층',
name: '2층',
},
],
},
});
{
readPlcNm: '부산 지사',
name: '지사',
_children: [
{
readPlcNm: '부산 지사 - A동',
name: 'A동',
_children: [
{
readPlcNm: '부산 지사 - A동 1층',
name: '1층',
},
{
readPlcNm: '부산 지사 - A동 2층',
name: '2층',
},
],
},
{
readPlcNm: '부산 지사 - B동',
name: 'B동',
},
],
},
{
readPlcNm: '대전 창고',
name: '창고',
},
];
// console.log("treeData", res)
// // console.log("treeData", res)
let myOptionsTree = {
treeColumnOptions: {
name: 'readPlcNm',
@ -360,32 +373,34 @@ export default {
// this.treeData = res;
// const ROOT = res[0].plcCd;
const setTreeData = await this.setTree({
gridKey: this.gridNameTree,
treeKey: 'READ_PLC_ID',
value: res.map(item => ({
...item,
rowStat: null,
readPlcId: item.readPlcId,
readPlcIdNm: item.readPlcId,
upReadPlcId:
item.upReadPlcId == null || item.upReadPlcId == ''
? ''
: item.upReadPlcId,
upReadPlcNm:
item.upReadPlcNm == null || item.upReadPlcNm == ''
? ''
: item.upReadPlcNm,
blocId: item.blocId,
useFg: item.useFg === '1' ? true : false,
})),
});
// const setTreeData = await this.setTree({
// gridKey: this.gridNameTree,
// treeKey: 'READ_PLC_ID',
// value: res.map(item => ({
// ...item,
// rowStat: null,
// readPlcId: item.readPlcId,
// readPlcIdNm: item.readPlcId,
// upReadPlcId:
// item.upReadPlcId == null || item.upReadPlcId == ''
// ? ''
// : item.upReadPlcId,
// upReadPlcNm:
// item.upReadPlcNm == null || item.upReadPlcNm == ''
// ? ''
// : item.upReadPlcNm,
// blocId: item.blocId,
// useFg: item.useFg === '1' ? true : false,
// })),
// });
// this.treeData = setTreeData;
this.setModalGridData({
modalKey: this.myModalKey,
gridKey: this.gridNameTree,
modalDataKey: this.modalDataKey,
value: setTreeData.ROOT || [],
value: treeData,
});
this.loadGrid = true;
@ -520,9 +535,7 @@ const selectReadObjListTree = {
}
}
.tui-grid-cell.tui-grid-cell-has-tree
.tui-grid-tree-extra-content
+ .tui-grid-cell-content:before {
.tui-grid-cell.tui-grid-cell-has-tree .tui-grid-tree-extra-content+.tui-grid-cell-content:before {
content: none !important;
}
}
@ -532,17 +545,13 @@ const selectReadObjListTree = {
.v-dialog {
.v-card {
&__title {
color: map-deep-get($color, 'white', '0');
@if $theme == dark {
@if $theme ==dark {
background-color: #2d3355;
.v-btn {
background-color: #2d3355;
}
} @else {
background-color: #3f4d7d;
.v-btn {
background-color: #3f4d7d;
}
}
}
}

1090
components/common/modal/TagTrndTagPop.vue
View File

File diff suppressed because it is too large Load Diff