dev-manhph1-screen18-19-21-28

This commit is contained in:
Le Quang Cuong/(Le Quang Cuong)/현장대리인/SK
2025-07-25 18:11:31 +09:00
parent 1453e75f9a
commit dd559629ab
7 changed files with 143 additions and 600 deletions

View File

@ -1,19 +1,26 @@
<template> <template>
<h1 class="h1-title"> <h1 class="h1-title">
<v-avatar size="12" :style="{ backgroundColor: 'currentColor' }"></v-avatar> <v-avatar size="12" :style="{ backgroundColor: 'currentColor' }"></v-avatar>
{{ text }} {{ text ? text : menuNm}}
</h1> </h1>
</template> </template>
<script> <script>
import { mapState } from 'vuex';
export default { export default {
name: "PageTitle", name: "PageTitle",
props: { props: {
text: { text: {
type: String, type: String,
required: true, required: false,
}, },
}, },
computed: {
...mapState({
menuNm: state => state.activeMenuInfo.menuNm,
}),
}
}; };
</script> </script>

View File

@ -124,7 +124,7 @@ export default {
return { return {
dialog: false, dialog: false,
loadGrid: true, loadGrid: false,
grid_01: 'grid_01', grid_01: 'grid_01',
myModalKey: 'evtObjPop', myModalKey: 'evtObjPop',
modalDataKey: 'modalData2', modalDataKey: 'modalData2',
@ -165,35 +165,6 @@ export default {
computed: { computed: {
...mapState({ ...mapState({
searchParam(state) { 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]; return state.pageData[this.parentPrgmId];
}, },
myBindingData(state) { myBindingData(state) {
@ -277,6 +248,9 @@ export default {
columnOptions: { columnOptions: {
resizable: true, resizable: true,
}, },
header: {
height: 38,
},
}; };
this.setModalGridOption({ this.setModalGridOption({
modalKey: this.myModalKey, modalKey: this.myModalKey,
@ -300,7 +274,7 @@ export default {
}); });
}, },
async getGridData() { async getGridData() {
// this.loadGrid = false; this.loadGrid = false;
const res = await this.postApiReturn({ const res = await this.postApiReturn({
apiKey: 'selectTagBaseInfo', apiKey: 'selectTagBaseInfo',
@ -376,7 +350,6 @@ export default {
// this.dialog = false; // this.dialog = false;
// return; // return;
// } // }
console.log("this.dialog: ", this.dialog);
this.dialog = !val; this.dialog = !val;
}, },
}, },
@ -389,50 +362,6 @@ var evtObjPop = {
option: {}, 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> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

View File

@ -22,7 +22,6 @@
:editorGrid="true" :editorGrid="true"
:innerTabGridInfo="innerTabGridInfo" :innerTabGridInfo="innerTabGridInfo"
@getRowsData="getRowData" @getRowsData="getRowData"
:dataPath="dataPathMock"
/> />
</div> </div>
</v-card-actions> </v-card-actions>
@ -51,22 +50,10 @@ export default {
}, },
data() { data() {
return { return {
loadGrid: true, loadGrid: false,
gridName: 'rowDetailGrid', gridName: 'rowDetailGrid',
rowKey: null, rowKey: null,
edtingFinishFlag: 'Y', edtingFinishFlag: 'Y',
dataPathMock: {
"rowDetailGrid": {
column: [
{header: '추가 정보',name: 'addInfoId'},
{header: 'Data 구분',name: 'addInfoDataKind',align: 'center'},
{header: '추가 정보 값',name: 'addInfoVal',align: 'center', renderer: {type: NewCustomRenderer},editor: {type: NewCustomEditor},formatter(data) {return data.row.addInfoDataKind;},}
],
data: dataPathDataExample,
option: {
}
}
},
}; };
}, },
computed: { computed: {
@ -444,37 +431,4 @@ export default {
search() {}, search() {},
}, },
}; };
const dataPathDataExample =
[
{
addInfoId:"경보 여부",
addInfoDataKind:"FG",
addInfoVal:"1"
},
{
addInfoId:"예상 피크전력 여부",
addInfoDataKind:"FG",
addInfoVal:"0"
},
{
addInfoId:"피크전력 여부",
addInfoDataKind:"FG",
addInfoVal:"1"
},
{
addInfoId:"TAG 채널",
addInfoDataKind:"숫자",
addInfoVal:"채널"
},
{
addInfoId:"PLC IP",
addInfoDataKind:"문자",
addInfoVal:"채널"
},
{
addInfoId:"PLC 포트",
addInfoDataKind:"숫자",
addInfoVal:"채널"
},
]
</script> </script>

View File

@ -1,19 +1,13 @@
<template> <template>
<div ref="mainDiv" class="l-layout"> <div ref="mainDiv" class="l-layout">
<PageTitle/>
<v-row ref="searchFilter"> <v-row ref="searchFilter">
<v-col :cols="12"> <v-col :cols="12">
<v-card class="searchFilter"> <v-card class="searchFilter">
<v-row align="end" no-gutters> <v-row align="end" no-gutters>
<v-col :cols="5"> <v-col :cols="5">
<InputText <InputText :parentPrgmId="myPrgmId" label="설비종류명" valueNm="eqpmKindNm" :searchOption="true"
:parentPrgmId="myPrgmId" :textCols="12" :labelCols="12" customClass="input-large" />
label="설비종류명"
valueNm="eqpmKindNm"
:searchOption="true"
:textCols="12"
:labelCols="12"
customClass="input-large"
/>
</v-col> </v-col>
<v-col :cols="7" class="text-right"> <v-col :cols="7" class="text-right">
<BtnSearch @click="search" size="large" /> <BtnSearch @click="search" size="large" />
@ -25,41 +19,27 @@
<v-row ref="contents"> <v-row ref="contents">
<v-col :cols="5" class="h100"> <v-col :cols="5" class="h100">
<v-card class="pb-5"> <v-card class="pb-5">
<div class="d-flex align-center justify-space-between pa-5"> <div class="d-flex align-center justify-space-between pa-4" style="padding-bottom: 30px !important;">
<v-card-title class="pa-0">설비종류</v-card-title> <v-card-title class="pa-0">설비종류</v-card-title>
<Buttons <Buttons :parentPrgmId="myPrgmId" :bindingData="gridName" :btnActionsFnc="btnActions" />
:parentPrgmId="myPrgmId"
:bindingData="gridName"
:btnActionsFnc="btnActions"
/>
</div> </div>
<div class="h100 px-5" style="height:calc(100% - 70px)"> <div class="h100 px-5" style="height:calc(100% - 70px)">
<div ref="gridParent" class="w100 h100"> <div ref="gridParent" class="w100 h100">
<component <component :ref="gridName" :is="loadGrid ? 'Grid' : null" :gridName="gridName"
:ref="gridName" :parentPrgmId="myPrgmId" @getRowsData="getRowData"
:is="loadGrid ? 'Grid' : null" :preventFocusChangeEventFlag="false" />
:gridName="gridName"
:parentPrgmId="myPrgmId"
@getRowsData="getRowData"
:preventFocusChangeEventFlag="false"
:dataPath="dataPathMock"
/>
</div> </div>
</div> </div>
</v-card> </v-card>
</v-col> </v-col>
<v-col :cols="7" class="h100"> <v-col :cols="7" class="h100">
<v-card class="pb-5"> <v-card class="pb-5">
<div class="d-flex align-center justify-space-between pa-5"> <div class="d-flex align-center justify-space-between pa-4" style="padding-bottom: 30px !important;">
<v-card-title class="pa-0">설비종류 상세</v-card-title> <v-card-title class="pa-0">설비종류 상세</v-card-title>
</div> </div>
<div class="px-5" style="height:calc(100% - 76px)"> <div class="px-5" style="height:calc(100% - 76px)">
<component <component :is="'Form'" :parentPrgmId="myPrgmId" :detailList="detailList"
:is="'Form'" @gridEditingFinish="gridEditingFinish" />
:parentPrgmId="myPrgmId"
:detailList="detailList"
@gridEditingFinish="gridEditingFinish"
/>
</div> </div>
</v-card> </v-card>
</v-col> </v-col>
@ -78,6 +58,8 @@ import Form from '~/components/common/form/Form';
import Grid from '~/components/common/Grid'; import Grid from '~/components/common/Grid';
import Utility from '~/plugins/utility'; import Utility from '~/plugins/utility';
import SelectBox from '@/components/common/select/SelectBox'; import SelectBox from '@/components/common/select/SelectBox';
import PageTitle from "~/components/common/PageTitle";
let myTitle; let myTitle;
// const myPrgmId = "PRG0013"; // const myPrgmId = "PRG0013";
let myPrgmId; let myPrgmId;
@ -108,6 +90,7 @@ export default {
Grid, Grid,
Utility, Utility,
SelectBox, SelectBox,
PageTitle,
}, },
data() { data() {
return { return {
@ -118,21 +101,6 @@ export default {
detailList: myDetail, detailList: myDetail,
selectValueList01: [], selectValueList01: [],
selectValue01: null, selectValue01: null,
dataPathMock: {
'eqpmKindGrid': {
column: [
{ header: '설비종류ID', name: 'eqpmKindId', headerAlign: 'center' },
{ header: '설비종류명', name: 'eqpmKindNm', headerAlign: 'left' },
{ header: '등록자NO', name: 'regUserNo', hidden: true},
{ header: '등록일시', name: 'regDttm', hidden: true },
{ header: '수정자NO', name: 'procUserNo', hidden: true },
{ header: '수정일시', name: 'procDttm', hidden: true}
],
data: dataPathDataExample,
defaultRow: dataPathDataExample,
option: {}
}
},
}; };
}, },
computed: { computed: {
@ -164,7 +132,7 @@ export default {
defaultData: defaultData, defaultData: defaultData,
}); });
}, },
created() {}, created() { },
mounted() { mounted() {
this.gridInit(); this.gridInit();
// this.init(); // this.init();
@ -184,6 +152,8 @@ export default {
const myOptions = { const myOptions = {
columnOptions: { columnOptions: {
resizable: true, resizable: true,
}, header: {
height: 38,
}, },
}; };
this.setGridOption({ this.setGridOption({
@ -255,12 +225,12 @@ export default {
//rowKey: 0, //rowKey: 0,
rowKey: rowKey:
this.pageData.rowGridSelectKey == '' || this.pageData.rowGridSelectKey == '' ||
this.pageData.rowGridSelectKey == null this.pageData.rowGridSelectKey == null
? 0 ? 0
: this.pageData.rowGridSelectKey == : this.pageData.rowGridSelectKey ==
this.$refs[this.gridName].getData().length - 1 this.$refs[this.gridName].getData().length - 1
? this.pageData.rowGridSelectKey ? this.pageData.rowGridSelectKey
: 0, : 0,
setScroll: true, setScroll: true,
}); });
} }
@ -398,7 +368,7 @@ const myDetail = [
textCols: 12, textCols: 12,
}, },
{ {
type: 'InputTextReg', type: 'InputText',
label: '설비종류명', label: '설비종류명',
valueNm: 'eqpmKindNm', valueNm: 'eqpmKindNm',
disabled: false, disabled: false,
@ -458,14 +428,4 @@ const myDetail = [
textCols: 12, textCols: 12,
}, },
]; ];
import { getPathDataExample } from '@/const/const'
const dataPathDataExample = getPathDataExample({
eqpmKindId: 'EKIND0005',
eqpmKindNm: 'VCB',
regUserNo: '사용',
regDttm: 'EQP_HVAC_LT_CH001',
procUserNo: '사용',
procDttm: 'EQP_HVAC_LT_CH001',
});
</script> </script>

View File

@ -1,41 +1,23 @@
<template> <template>
<div ref="mainDiv" class="l-layout"> <div ref="mainDiv" class="l-layout">
<PageTitle />
<v-row ref="searchFilter"> <v-row ref="searchFilter">
<v-col :cols="12"> <v-col :cols="12">
<v-card class="searchFilter"> <v-card class="searchFilter">
<v-row align="end" no-gutters> <v-row align="end" no-gutters>
<v-col :cols="3"> <v-col :cols="3">
<component <component :is="'selectCodeList'" :parentPrgmId="myPrgmId" :label="'사용여부'" dataKey="useFg"
:is="'selectCodeList'" :sendParam="{ commGrpCd: 'CO_USEFG', useFg: '1' }" :addAll="true"
:parentPrgmId="myPrgmId" customClass="select-large" />
:label="'사용여부'"
dataKey="useFg"
:sendParam="{ commGrpCd: 'CO_USEFG', useFg: '1' }"
:addAll="true"
customClass="select-large"
/>
</v-col> </v-col>
<v-col :cols="3"> <v-col :cols="3">
<component <component :is="'SelectBox'" ref="SelectBox1" :propsValue="selectValue01"
:is="'SelectBox'" :itemList="selectValueList01" :label="'설비종류'"
ref="SelectBox1" @update:propsValue="selectValue01 = $event" customClass="select-large" />
:propsValue="selectValue01"
:itemList="selectValueList01"
:label="'설비종류'"
@update:propsValue="selectValue01 = $event"
customClass="select-large"
/>
</v-col> </v-col>
<v-col :cols="3"> <v-col :cols="3">
<InputText <InputText :parentPrgmId="myPrgmId" label="설비 그룹 명" valueNm="eqpmGrpNm" :searchOption="true"
:parentPrgmId="myPrgmId" :textCols="12" :labelCols="12" customClass="input-large" />
label="설비 그룹 명"
valueNm="eqpmGrpNm"
:searchOption="true"
:textCols="12"
:labelCols="12"
customClass="input-large"
/>
</v-col> </v-col>
<v-col :cols="3" class="text-right"> <v-col :cols="3" class="text-right">
<BtnSearch @click="search" size="large" /> <BtnSearch @click="search" size="large" />
@ -47,41 +29,28 @@
<v-row ref="contents"> <v-row ref="contents">
<v-col :cols="5" class="h100"> <v-col :cols="5" class="h100">
<v-card class="pb-5"> <v-card class="pb-5">
<v-card-title class="d-flex justify-space-between align-end"> <div class="d-flex align-center justify-space-between pa-4"
<span class="tit ft-size_20 ft-weight_600">설비 그룹</span> style="padding-bottom: 30px !important;">
<Buttons <v-card-title class="pa-0">설비 그룹</v-card-title>
:parentPrgmId="myPrgmId" <Buttons :parentPrgmId="myPrgmId" :bindingData="gridName" :btnActionsFnc="btnActions" />
:bindingData="gridName" </div>
:btnActionsFnc="btnActions"
/>
</v-card-title>
<div class="h100 px-5" style="height:calc(100% - 70px)"> <div class="h100 px-5" style="height:calc(100% - 70px)">
<div ref="gridParent" class="w100 h100"> <div ref="gridParent" class="w100 h100">
<component <component :ref="gridName" :is="loadGrid ? 'Grid' : null" :gridName="gridName"
:ref="gridName" :parentPrgmId="myPrgmId" @getRowsData="getRowData" />
:is="loadGrid ? 'Grid' : null"
:gridName="gridName"
:parentPrgmId="myPrgmId"
@getRowsData="getRowData"
:dataPath="dataPathMock"
/>
</div> </div>
</div> </div>
</v-card> </v-card>
</v-col> </v-col>
<v-col :cols="7" class="h100"> <v-col :cols="7" class="h100">
<v-card class="pb-5"> <v-card class="pb-5">
<div class="d-flex align-center justify-space-between pa-5"> <div class="d-flex align-center justify-space-between pa-4"
style="padding-bottom: 30px !important;">
<v-card-title class="pa-0">설비 그룹 상세</v-card-title> <v-card-title class="pa-0">설비 그룹 상세</v-card-title>
</div> </div>
<div class="px-5" style="height:calc(100% - 76px)"> <div class="px-5" style="height:calc(100% - 76px)">
<component <component :is="'Form'" :parentPrgmId="myPrgmId" :detailList="detailList"
:is="'Form'" @gridEditingFinish="gridEditingFinish" />
:parentPrgmId="myPrgmId"
:detailList="detailList"
@gridEditingFinish="gridEditingFinish"
/>
</div> </div>
</v-card> </v-card>
</v-col> </v-col>
@ -100,6 +69,8 @@ import Form from '~/components/common/form/Form';
import Grid from '~/components/common/Grid'; import Grid from '~/components/common/Grid';
import Utility from '~/plugins/utility'; import Utility from '~/plugins/utility';
import SelectBox from '@/components/common/select/SelectBox'; import SelectBox from '@/components/common/select/SelectBox';
import PageTitle from "~/components/common/PageTitle";
let myTitle; let myTitle;
// const myPrgmId = "PRG0013"; // const myPrgmId = "PRG0013";
let myPrgmId; let myPrgmId;
@ -130,34 +101,17 @@ export default {
Grid, Grid,
Utility, Utility,
SelectBox, SelectBox,
PageTitle,
}, },
data() { data() {
return { return {
myPrgmId: myPrgmId, myPrgmId: myPrgmId,
gridName: 'rowGrid', gridName: 'rowGrid',
loadGrid: true, loadGrid: false,
tab: null, tab: null,
detailList: myDetail, detailList: myDetail,
selectValueList01: [], selectValueList01: [],
selectValue01: null, selectValue01: null,
dataPathMock: {
'rowGrid': {
column: [
{ header: '회사 ID', name: 'comId', hidden: true },
{ header: '설비 그룹 ID', name: 'eqpmGrpId'},
{ header: '설비 그룹 명', name: 'eqpmGrpNm'},
{ header: '설비종류', name: 'eqpmKindId'},
{ header: '사용여부', name: 'useFg'},
{ header: '등록자NO', name: 'regUserNo', hidden: true},
{ header: '등록일시', name: 'regDttm', hidden: true },
{ header: '수정자NO', name: 'procUserNo', hidden: true },
{ header: '수정일시', name: 'procDttm', hidden: true}
],
data: dataPathDataExample,
defaultRow: dataPathDataExample,
options:{}
}
},
}; };
}, },
computed: { computed: {
@ -203,7 +157,7 @@ export default {
defaultData: defaultData, defaultData: defaultData,
}); });
}, },
created() {}, created() { },
mounted() { mounted() {
this.setSelectValueList01(); this.setSelectValueList01();
// if (this.loadFlag) { // if (this.loadFlag) {
@ -252,12 +206,15 @@ export default {
} }
}, },
gridInit() { gridInit() {
const gridHeight = this.$refs.gridParent.offsetHeight - 70; const gridHeight = this.$refs.gridParent.offsetHeight - 30;
const myOptions = { const myOptions = {
columnOptions: { columnOptions: {
resizable: true, resizable: true,
}, },
header: {
height: 38,
},
}; };
this.setGridOption({ this.setGridOption({
gridKey: this.gridName, gridKey: this.gridName,
@ -365,12 +322,12 @@ export default {
//rowKey: 0, //rowKey: 0,
rowKey: rowKey:
this.pageData.rowGridSelectKey == '' || this.pageData.rowGridSelectKey == '' ||
this.pageData.rowGridSelectKey == null this.pageData.rowGridSelectKey == null
? 0 ? 0
: this.pageData.rowGridSelectKey == : this.pageData.rowGridSelectKey ==
this.$refs[this.gridName].getData().length - 1 this.$refs[this.gridName].getData().length - 1
? this.pageData.rowGridSelectKey ? this.pageData.rowGridSelectKey
: 0, : 0,
setScroll: true, setScroll: true,
}); });
} }
@ -512,7 +469,7 @@ const myDetail = [
placeholder: '시스템 자동입력', placeholder: '시스템 자동입력',
}, },
{ {
type: 'InputTextReg', type: 'InputText',
label: '설비 그룹 명', label: '설비 그룹 명',
valueNm: 'eqpmGrpNm', valueNm: 'eqpmGrpNm',
disabled: false, disabled: false,
@ -600,18 +557,4 @@ const myDetail = [
textCols: 12, textCols: 12,
}, },
]; ];
import { getPathDataExample } from '@/const/const'
const dataPathDataExample = getPathDataExample({
comId: 'EKIND0005',
eqpmGrpId: 'EQG000010',
eqpmGrpNm:'냉수파이프고온',
eqpmKindId:'냉동파이프',
useFg:'1',
regUserNo: '사용',
regDttm: 'EQP_HVAC_LT_CH001',
procUserNo: '사용',
procDttm: 'EQP_HVAC_LT_CH001',
});
</script> </script>

View File

@ -73,10 +73,8 @@
:is="loadGrid ? 'Grid' : null" :is="loadGrid ? 'Grid' : null"
:gridName="gridName" :gridName="gridName"
:parentPrgmId="myPrgmId" :parentPrgmId="myPrgmId"
:dataPath="dataPathMock"
/> />
</div> </div>
</v-card> </v-card>
</v-col> </v-col>
</v-row> </v-row>
@ -154,53 +152,6 @@ export default {
required: false, required: false,
formFg: false, formFg: false,
}, },
dataPathMock: {
"rowGrid": {
column: [
{
header: 'TAG ID',
name: 'tagId',
minWidth: 500,
},
{
header: 'TAG명',
name: 'tagNm',
},
{
header: '대상일시',
name: 'readDttm',
align:"center",
width: 200,
},
{
header: '값',
name: 'readVal',
width: 100,
align:"center"
},
{
header: '취득일시',
name: 'regDttm',
width: 200,
align:"center"
},
{
header: '적재일시',
name: 'procDttm',
width: 200,
align:"center"
},
],
data: dataPathDataExample,
defaultRow: dataPathDataExample,
option: {
pageOptions: {
useClient: true,
perPage: 10,
},
}
}
},
}; };
}, },
computed: { computed: {
@ -316,13 +267,15 @@ export default {
columnOptions: { columnOptions: {
resizable: true, resizable: true,
}, },
header: {
height: 38,
},
}; };
this.setGridOption({ this.setGridOption({
gridKey: this.gridName, gridKey: this.gridName,
value: Object.assign(Utility.defaultGridOption(gridHeight), myOptions), value: Object.assign(Utility.defaultGridOption(gridHeight), myOptions),
}); });
let myColumns = [ let myColumns = [
{ {
header: 'TAG ID', header: 'TAG ID',
@ -569,13 +522,4 @@ const defaultData = {
}, },
}, },
}; };
import { getPathDataExample } from '@/const/const'
const dataPathDataExample = getPathDataExample({
"tagId": "ICHEON.ELEC.EQID101.VCB_111A_ACC_WH_PV",
"tagNm": "ICHEON VCB_111A 적산 전력",
"readDttm": "2023-01-10 00:00:00",
"readVal": "581.27",
"regDttm": "2023-01-09 15:03:08",
"procDttm": "2023-01-10 00:03:09",
});
</script> </script>

View File

@ -1,80 +1,40 @@
<template> <template>
<div class="l-layout"> <div class="l-layout">
<PageTitle/>
<v-row ref="searchFilter"> <v-row ref="searchFilter">
<v-col :cols="12"> <v-col :cols="12">
<v-card class="searchFilter"> <v-card class="searchFilter">
<v-row align="center" no-gutters> <v-row align="center" no-gutters>
<v-col :cols="3"> <v-col :cols="3">
<!-- 사업장 --> <!-- 사업장 -->
<component <component :is="'SelectBlocMstr'" ref="SelectBlocMstr" :parentPrgmId="myPrgmId"
:is="'SelectBlocMstr'" :textCols="12" customClass="select-large" />
ref="SelectBlocMstr"
:parentPrgmId="myPrgmId"
:textCols="12"
customClass="select-large"
/>
</v-col> </v-col>
<v-col :cols="3"> <v-col :cols="3">
<component <component :is="'selectCodeList'" :parentPrgmId="myPrgmId" :label="'측정 Data 유형'"
:is="'selectCodeList'" dataKey="searchReadDataType" :sendParam="{ commGrpCd: 'EM_READ_DATA_TYPE', useFg: '1' }"
:parentPrgmId="myPrgmId" :addAll="true" :textCols="12" customClass="select-large" />
:label="'측정 Data 유형'"
dataKey="searchReadDataType"
:sendParam="{ commGrpCd: 'EM_READ_DATA_TYPE', useFg: '1' }"
:addAll="true"
:textCols="12"
customClass="select-large"
/>
</v-col> </v-col>
<v-col :cols="3"> <v-col :cols="3">
<component <component :is="'SelectReadObj'" :parentPrgmId="myPrgmId" :label="'측정대상'"
:is="'SelectReadObj'" dataKey="searchReadObj" :sendParam="{ useFg: '1' }" :labelCols="12" :textCols="12"
:parentPrgmId="myPrgmId" :addAll="true" customClass="select-large" />
:label="'측정대상'"
dataKey="searchReadObj"
:sendParam="{ useFg: '1' }"
:labelCols="12"
:textCols="12"
:addAll="true"
customClass="select-large"
/>
</v-col> </v-col>
</v-row> </v-row>
<v-row align="end" no-gutters> <v-row align="end" no-gutters>
<v-col :cols="3"> <v-col :cols="3">
<component <component :is="'selectCodeList'" :parentPrgmId="myPrgmId" :label="'사용여부'" dataKey="useFg"
:is="'selectCodeList'" :sendParam="{ commGrpCd: 'CO_USEFG', useFg: '1' }" :addAll="true" :textCols="12"
:parentPrgmId="myPrgmId" customClass="select-large" />
:label="'사용여부'"
dataKey="useFg"
:sendParam="{ commGrpCd: 'CO_USEFG', useFg: '1' }"
:addAll="true"
:textCols="12"
customClass="select-large"
/>
</v-col> </v-col>
<v-col :cols="3"> <v-col :cols="3">
<InputText <InputText :parentPrgmId="myPrgmId" label="TAG ID" valueNm="tagId" :labelCols="12"
:parentPrgmId="myPrgmId" :textCols="12" :searchOption="true" customClass="input-large" />
label="TAG ID"
valueNm="tagId"
:labelCols="12"
:textCols="12"
:searchOption="true"
customClass="input-large"
/>
</v-col> </v-col>
<v-col :cols="3"> <v-col :cols="3">
<InputText <InputText :parentPrgmId="myPrgmId" label="TAG명" valueNm="tagNm" :labelCols="12"
:parentPrgmId="myPrgmId" :textCols="12" :searchOption="true" customClass="input-large" />
label="TAG명"
valueNm="tagNm"
:labelCols="12"
:textCols="12"
:searchOption="true"
customClass="input-large"
/>
</v-col> </v-col>
<v-col :cols="3" class="d-flex align-end justify-end text-right"> <v-col :cols="3" class="d-flex align-end justify-end text-right">
<BtnSearch @click="search" size="large" /> <BtnSearch @click="search" size="large" />
@ -88,29 +48,14 @@
<v-card class="pb-5"> <v-card class="pb-5">
<v-card-title class="d-flex justify-space-between align-end"> <v-card-title class="d-flex justify-space-between align-end">
<span class="tit ft-size_20 ft-weight_600">TAG 정보</span> <span class="tit ft-size_20 ft-weight_600">TAG 정보</span>
<Buttons <Buttons :parentPrgmId="myPrgmId" :bindingData="gridName" :detailList="detailList"
:parentPrgmId="myPrgmId" :btnActionsFnc="btnActions" />
:bindingData="gridName"
:detailList="detailList"
:btnActionsFnc="btnActions"
/>
</v-card-title> </v-card-title>
<v-card-actions> <v-card-actions>
<div <div ref="gridParent" class="w100" style="height: calc(100vh - 400px)">
ref="gridParent" <component :ref="gridName" :is="loadGrid ? 'Grid' : null" :gridName="gridName"
class="w100" :parentPrgmId="myPrgmId" @getRowsData="getRowData"
style="height: calc(100vh - 400px)" @sendSelectedRowStatInfo="getSelectedRowStatInfo" :selectedRowDataWatchFlag="true" />
>
<component
:ref="gridName"
:is="loadGrid ? 'Grid' : null"
:gridName="gridName"
:parentPrgmId="myPrgmId"
@getRowsData="getRowData"
@sendSelectedRowStatInfo="getSelectedRowStatInfo"
:selectedRowDataWatchFlag="true"
:dataPath="dataPathMock"
/>
</div> </div>
</v-card-actions> </v-card-actions>
<!-- <div class="d-flex align-center justify-space-between"> <!-- <div class="d-flex align-center justify-space-between">
@ -129,32 +74,16 @@
<v-card-title>TAG 상세</v-card-title> <v-card-title>TAG 상세</v-card-title>
<div class="px-5" style="height:calc(100% - 70px)"> <div class="px-5" style="height:calc(100% - 70px)">
<v-tabs v-model="tab"> <v-tabs v-model="tab">
<v-tab <v-tab v-for="item in items" :key="item.id" :disabled="item.disabledFlag">
v-for="item in items"
:key="item.id"
:disabled="item.disabledFlag"
>
{{ item.name }} {{ item.name }}
</v-tab> </v-tab>
</v-tabs> </v-tabs>
<v-tabs-items <v-tabs-items v-model="tab" style="height: calc(100% - 65px);" class="py-6">
v-model="tab"
style="height: calc(100% - 65px);"
class="py-6"
>
<v-tab-item v-for="(item, idx) in items" :key="item.id"> <v-tab-item v-for="(item, idx) in items" :key="item.id">
<component <component v-if="item.id == 'tagBaseInfoTab'" :is="'Form'" :parentPrgmId="myPrgmId"
v-if="item.id == 'tagBaseInfoTab'" :detailList="detailList" @gridEditingFinish="gridEditingFinish" />
:is="'Form'" <TagAddInfoTab v-if="item.id == 'tagAddInfoTab'" :parentPrgmId="myPrgmId"
:parentPrgmId="myPrgmId" :innerTabGridInfo="{ tab, idx }" />
:detailList="detailList"
@gridEditingFinish="gridEditingFinish"
/>
<TagAddInfoTab
v-if="item.id == 'tagAddInfoTab'"
:parentPrgmId="myPrgmId"
:innerTabGridInfo="{ tab, idx }"
/>
</v-tab-item> </v-tab-item>
</v-tabs-items> </v-tabs-items>
</div> </div>
@ -166,7 +95,7 @@
<script> <script>
import { mapState, mapMutations, mapActions } from 'vuex'; import { mapState, mapMutations, mapActions } from 'vuex';
import mixinGlobal from '@/mixin/global.js'; import mixinGlobal from '@/mixin/global.js';
import { resize } from '@/mixin/resize.js'; import { resize } from '@/mixin/resize.js';
import BtnSearch from '~/components/common/button/BtnSearch'; import BtnSearch from '~/components/common/button/BtnSearch';
import Buttons from '~/components/common/button/Buttons'; import Buttons from '~/components/common/button/Buttons';
import SelectBlocMstr from '@/components/common/select/SelectBlocMstr'; import SelectBlocMstr from '@/components/common/select/SelectBlocMstr';
@ -178,12 +107,13 @@ import TagAddInfoTab from '@/components/pages/ems/TagInfo/TagAddInfoTab';
import Grid from '~/components/common/Grid'; import Grid from '~/components/common/Grid';
import Utility from '~/plugins/utility'; import Utility from '~/plugins/utility';
import pagination from '~/components/Pagination'; import pagination from '~/components/Pagination';
import PageTitle from "~/components/common/PageTitle";
let myTitle; let myTitle;
// const myPrgmId = "PRG0051"; // const myPrgmId = "PRG0051";
let myPrgmId; let myPrgmId;
export default { export default {
mixins: [mixinGlobal,resize], mixins: [mixinGlobal, resize],
async asyncData(context) { async asyncData(context) {
const myState = context.store.state; const myState = context.store.state;
// context.store.commit("setActiveMenuInfo", myState.menuData[myPrgmId]); // context.store.commit("setActiveMenuInfo", myState.menuData[myPrgmId]);
@ -210,6 +140,7 @@ export default {
TagAddInfoTab, TagAddInfoTab,
Grid, Grid,
pagination, pagination,
PageTitle
}, },
data() { data() {
return { return {
@ -223,123 +154,11 @@ export default {
], ],
detailList: myDetail, detailList: myDetail,
alrmFg: null, alrmFg: null,
dataPathMock: { itemsPerPage: 10,
"rowGrid": { itemsPerPageArray: [10, 20, 30],
column: [ limit: 20,
{ header: '회사 ID', name: 'comId', hidden: true }, page: 1,
{ totalCount: 0,
header: 'TAG ID',
name: 'tagId',
width: 'auto',
minWidth: 340,
align: 'left',
},
{
header: 'TAG 명',
name: 'tagNm',
width: 'auto',
minWidth: 220,
align: 'left',
},
{
header: '측정 값 유형',
name: 'readDataTypeCd',
width: 90,
align: 'left',
},
{
header: '측정대상',
name: 'readObjId',
width: 100,
align: 'left',
},
{ header: '배율', name: 'mgnf', width: 80, align: 'right' },
{
header: '단위',
name: 'unitCd',
width: 80,
align: 'left',
},
{
header: '최소값',
name: 'rangMin',
width: 100,
align: 'right',
hidden: true,
},
{
header: '최대값',
name: 'rangMax',
width: 100,
align: 'right',
hidden: true,
},
{
header: '경고 상상',
name: 'alrmHihi',
width: 100,
align: 'right',
hidden: true,
},
{
header: '경고 상',
name: 'alrmHi',
width: 100,
align: 'right',
hidden: true,
},
{
header: '경고 하',
name: 'alrmLo',
width: 100,
align: 'right',
hidden: true,
},
{
header: '경고 하하',
name: 'alrmLolo',
width: 100,
align: 'right',
hidden: true,
},
{
header: '사업장',
name: 'blocId',
width: 100,
align: 'center',
hidden: true,
},
{
header: '집계 여부',
name: 'totFg',
width: 80,
align: 'center',
hidden: true,
},
{
header: '사용 여부',
name: 'useFg',
width: 80,
align: 'center',
hidden: true,
},
],
data: dataPathDataExample,
defaultRow: dataPathDataExample,
option: {
pageOptions: {
useClient: true,
perPage: 10,
},
scrollX: true
}
}
},
// itemsPerPage: 10,
// itemsPerPageArray: [10, 20, 30],
// limit: 20,
// page: 1,
// totalCount: 0,
}; };
}, },
computed: { computed: {
@ -456,12 +275,20 @@ export default {
this.gridInit(); this.gridInit();
}, },
gridInit() { gridInit() {
const gridHeight = this.$refs.gridParent.offsetHeight - 16; const gridHeight = this.$refs.gridParent.offsetHeight - 180;
const myOptions = { const myOptions = {
columnOptions: { columnOptions: {
resizable: true, resizable: true,
}, },
pageOptions: {
useClient: true,
perPage: 10,
},
scrollX: true,
header: {
height: 38,
},
}; };
this.setGridOption({ this.setGridOption({
gridKey: this.gridName, gridKey: this.gridName,
@ -700,16 +527,16 @@ export default {
//rowKey: 0, //rowKey: 0,
rowKey: rowKey:
this.pageData.rowGridSelectKey == '' || this.pageData.rowGridSelectKey == '' ||
this.pageData.rowGridSelectKey == null this.pageData.rowGridSelectKey == null
? 0 ? 0
: this.pageData.rowGridSelectKey == : this.pageData.rowGridSelectKey ==
this.$refs[this.gridName].getData().length - 1 this.$refs[this.gridName].getData().length - 1
? this.pageData.rowGridSelectKey ? this.pageData.rowGridSelectKey
: 0, : 0,
columnName: 'tagId', columnName: 'tagId',
setScroll: true, setScroll: true,
}); });
} catch (error) {} } catch (error) { }
// this.$refs[this.gridName].focus({ // this.$refs[this.gridName].focus({
// rowKey: 0, // rowKey: 0,
// columnName: "tagId", // columnName: "tagId",
@ -946,7 +773,7 @@ export default {
gridEditingFinish(data) { gridEditingFinish(data) {
this.$refs[this.gridName].editingFinish(data); this.$refs[this.gridName].editingFinish(data);
}, },
changeGrid: async function(pageNum, limit) { changeGrid: async function (pageNum, limit) {
this.page = pageNum; this.page = pageNum;
this.limit = limit; this.limit = limit;
@ -990,9 +817,9 @@ function isValidAlrmVal(obj) {
if (Number(obj[keyList[i]]) >= Number(obj[keyList[j]])) { if (Number(obj[keyList[i]]) >= Number(obj[keyList[j]])) {
alert( alert(
nameList[j] + nameList[j] +
'값은 ' + '값은 ' +
nameList[i] + nameList[i] +
'값보다 큰 숫자를 입력해야 합니다.', '값보다 큰 숫자를 입력해야 합니다.',
); );
return false; return false;
} }
@ -1094,7 +921,7 @@ const myDetail = [
label: 'TAG ID', label: 'TAG ID',
valueNm: 'tagId', valueNm: 'tagId',
disabled: false, disabled: false,
iconShow:true, iconShow: true,
cols: 6, cols: 6,
class: 'py-2 pr-4', class: 'py-2 pr-4',
required: false, required: false,
@ -1106,7 +933,7 @@ const myDetail = [
label: 'TAG 명', label: 'TAG 명',
valueNm: 'tagNm', valueNm: 'tagNm',
disabled: false, disabled: false,
iconShow:true, iconShow: true,
cols: 6, cols: 6,
class: 'py-2 pl-4', class: 'py-2 pl-4',
required: false, required: false,
@ -1118,7 +945,7 @@ const myDetail = [
label: '측정 값 유형', label: '측정 값 유형',
valueNm: 'readDataTypeCd', valueNm: 'readDataTypeCd',
disabled: false, disabled: false,
iconShow:true, iconShow: true,
cols: 6, cols: 6,
class: 'py-2 pr-4 pt-5', class: 'py-2 pr-4 pt-5',
list: 'readDataTypeCdList', list: 'readDataTypeCdList',
@ -1139,7 +966,7 @@ const myDetail = [
itemText: 'readObjNm', itemText: 'readObjNm',
itemValue: 'readObjId', itemValue: 'readObjId',
required: true, required: true,
iconShow:true, iconShow: true,
labelCols: 12, labelCols: 12,
textCols: 12, textCols: 12,
}, },
@ -1151,7 +978,7 @@ const myDetail = [
cols: 6, cols: 6,
class: 'py-2 pr-4 pt-5', class: 'py-2 pr-4 pt-5',
required: true, required: true,
iconShow:true, iconShow: true,
labelCols: 12, labelCols: 12,
textCols: 12, textCols: 12,
}, },
@ -1165,7 +992,7 @@ const myDetail = [
list: 'unitCdList', list: 'unitCdList',
itemText: 'commCdNm', itemText: 'commCdNm',
itemValue: 'commCd', itemValue: 'commCd',
iconShow:true, iconShow: true,
labelCols: 12, labelCols: 12,
textCols: 12, textCols: 12,
}, },
@ -1176,7 +1003,7 @@ const myDetail = [
disabled: false, disabled: false,
cols: 6, cols: 6,
class: 'py-2 pr-4 pt-5', class: 'py-2 pr-4 pt-5',
iconShow:true, iconShow: true,
labelCols: 12, labelCols: 12,
textCols: 12, textCols: 12,
}, },
@ -1187,7 +1014,7 @@ const myDetail = [
disabled: false, disabled: false,
cols: 6, cols: 6,
class: 'py-2 pl-4 pt-5', class: 'py-2 pl-4 pt-5',
iconShow:true, iconShow: true,
labelCols: 12, labelCols: 12,
textCols: 12, textCols: 12,
}, },
@ -1198,7 +1025,7 @@ const myDetail = [
disabled: false, disabled: false,
cols: 6, cols: 6,
class: 'py-2 pr-4 pt-5', class: 'py-2 pr-4 pt-5',
iconShow:true, iconShow: true,
labelCols: 12, labelCols: 12,
textCols: 12, textCols: 12,
}, },
@ -1209,7 +1036,7 @@ const myDetail = [
disabled: false, disabled: false,
cols: 6, cols: 6,
class: 'py-2 pl-4 pt-5', class: 'py-2 pl-4 pt-5',
iconShow:true, iconShow: true,
labelCols: 12, labelCols: 12,
textCols: 12, textCols: 12,
}, },
@ -1220,7 +1047,7 @@ const myDetail = [
disabled: false, disabled: false,
cols: 6, cols: 6,
class: 'py-2 pr-4 pt-5', class: 'py-2 pr-4 pt-5',
iconShow:true, iconShow: true,
labelCols: 12, labelCols: 12,
textCols: 12, textCols: 12,
}, },
@ -1231,7 +1058,7 @@ const myDetail = [
disabled: false, disabled: false,
cols: 6, cols: 6,
class: 'py-2 pl-4 pt-5', class: 'py-2 pl-4 pt-5',
iconShow:true, iconShow: true,
labelCols: 12, labelCols: 12,
textCols: 12, textCols: 12,
}, },
@ -1243,7 +1070,7 @@ const myDetail = [
cols: 6, cols: 6,
class: 'py-2 pr-4 pt-5', class: 'py-2 pr-4 pt-5',
value: { '1': true, '0': false }, value: { '1': true, '0': false },
iconShow:true, iconShow: true,
labelCols: 12, labelCols: 12,
textCols: 12, textCols: 12,
}, },
@ -1256,7 +1083,7 @@ const myDetail = [
class: 'py-2 pl-4 pt-5', class: 'py-2 pl-4 pt-5',
value: { '1': true, '0': false }, value: { '1': true, '0': false },
required: false, required: false,
iconShow:true, iconShow: true,
labelCols: 12, labelCols: 12,
textCols: 12, textCols: 12,
}, },
@ -1285,25 +1112,4 @@ const myDetail = [
class: 'py-2', class: 'py-2',
}, },
]; ];
import { getPathDataExample } from '@/const/const'
const dataPathDataExample = getPathDataExample({
"comId": "",
"tagId": "INCHEON.ELEC.EQID.VCB_111A_ACCWH_PV",
"tagNm": "ICHEON VCB_111A - 적산 전력",
"readDataTypeCd": "적산",
"readObjId": "적산",
"mgnf": "적산",
"unitCd":"적산",
"rangMin":"1",
"rangMax":"10",
"alrmHihi":"1",
"alrmHi":"10",
"alrmLo":"1",
"alrmLolo":"10",
"blocId":"1",
"totFg":"1",
"useFg":"1",
});
</script> </script>