gitadmin/sk_fems_ui
1
0
Fork 0
Code Issues Pull Requests 1 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

528
pages/ems/base/GdStndMngPage.vue
View File

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