Compare commits

..

12 Commits

Author SHA1 Message Date
8bfcebdd10 fix bug 2025-08-21 15:48:01 +09:00
1d6c49f944 add paging for screen 2 12 2025-08-20 12:38:22 +09:00
c6eb2b57b2 fix bug grid no scroll y margin right 2025-08-18 16:31:29 +09:00
1250b3d3af fix desgin screen 38 2025-08-15 15:52:52 +09:00
dev
be1e0426e0 Merge pull request 'Add paging and button view detail for S1 dashboard + Fix bugs 156 163' (#68) from dev-nghiantt-fix-bugs into dev
Reviewed-on: #68
2025-08-15 10:10:47 +09:00
81a20d2851 Add paging and button view detail for S1 dashboard + Fix bugs 156 163 2025-08-14 17:09:19 +09:00
dev
6353ffba57 Merge pull request 'dev-manhph1-figbug' (#67) from dev-manhph1-figbug into dev
Reviewed-on: #67
2025-08-14 16:00:15 +09:00
dev
ed9150aae8 Merge pull request 'fix bug grid + buttons' (#66) from dev-dungtv-0814 into dev
Reviewed-on: #66
lgtm
2025-08-14 15:54:22 +09:00
270279b0c2 add paging for page 38 2025-08-14 15:51:06 +09:00
9a42291cf4 add paging for page 38 2025-08-14 15:50:01 +09:00
c810139554 fix bug grid + buttons 2025-08-14 12:30:55 +07:00
dev
1a5ec4c6a3 Merge pull request 'fixbug' (#65) from dev-luannv24-fixbug-common-screen17 into dev
Reviewed-on: #65
2025-08-14 12:03:40 +09:00
16 changed files with 440 additions and 234 deletions

View File

@ -144,11 +144,10 @@
} }
&.ant-btn-danger { &.ant-btn-danger {
&.ant-btn-background-ghost { &.ant-btn-background-ghost {
color: map-deep-get($config, #{$theme}, "ant-btn-danger-color"); color:map-deep-get($config, #{$theme}, "ant-btn-danger-color");
border-color: map-deep-get($config, #{$theme}, "ant-btn-danger-color"); border-color:map-deep-get($config, #{$theme}, "ant-btn-danger-border");
// background: map-deep-get($config, #{$theme}, "ant-btn-danger-color") !important; background: map-deep-get($config, #{$theme}, "ant-btn-danger-bg") !important;
} }
} }

View File

@ -21,11 +21,20 @@
display: none; display: none;
} }
&-no-scroll-y {
.tui-grid-rside-area {
.tui-grid-header-area,
.tui-grid-summary-area {
margin-right: 0 !important;
}
}
}
&-rside-area { &-rside-area {
.tui-grid-header-area, .tui-grid-header-area,
.tui-grid-summary-area { .tui-grid-summary-area {
margin-right: $scrollbar-width; margin-right: $scrollbar-width !important;
} }
} }
@ -352,10 +361,11 @@
} }
&.tui-grid-layer-editing { &.tui-grid-layer-editing {
background:map-deep-get($config, background: transparent;
#{$theme}, // background:map-deep-get($config,
"tui-grid-cell-insert-color" // #{$theme},
); // "tui-grid-cell-insert-color"
// );
} }
} }
} }
@ -405,7 +415,7 @@
&-header-area { &-header-area {
// background-color: none; // background-color: none;
border: none; border: none;
margin-right: 0 !important; // margin-right: 0 !important;
background-color: map-deep-get($config, background-color: map-deep-get($config,
#{$theme}, #{$theme},
"tui-grid-cell-backgroundColor" "tui-grid-cell-backgroundColor"

View File

@ -2,6 +2,13 @@
// @include theme($theme); // @include theme($theme);
.v-application.#{$theme}-mode { .v-application.#{$theme}-mode {
.pagination-wrapper {
display: flex;
justify-content: center;
align-items: center;
padding: 12px 0;
margin-top: 10px;
}
.ant-pagination-item, .ant-pagination-item,
.ant-pagination-prev, .ant-pagination-prev,

View File

@ -166,7 +166,7 @@ $config: (
ant-btn-primary-color: #212224, ant-btn-primary-color: #212224,
ant-btn-danger-bg:#D32029, ant-btn-danger-bg:#D32029,
ant-btn-danger-border:#D32029, ant-btn-danger-border:#D32029,
ant-btn-danger-color:#D32029, ant-btn-danger-color:#212224,
ant-btn-default-border:#FFFFFF2E, ant-btn-default-border:#FFFFFF2E,
ant-btn-default-bg:#FFFFFF2E, ant-btn-default-bg:#FFFFFF2E,
ant-btn-default-color:#FFFFFFD9, ant-btn-default-color:#FFFFFFD9,

View File

@ -174,6 +174,11 @@ export default {
this.gridScrollTop = e.target.scrollTop; this.gridScrollTop = e.target.scrollTop;
this.gridScrollLeft = e.target.scrollLeft; this.gridScrollLeft = e.target.scrollLeft;
}); });
if (this.scrollBody.scrollHeight > this.scrollBody.clientHeight) {
this.gridInstance.$el.getElementsByClassName('tui-grid-content-area')[0].classList.remove('tui-grid-no-scroll-y');
} else {
this.gridInstance.$el.getElementsByClassName('tui-grid-content-area')[0].classList.add('tui-grid-no-scroll-y');
}
} }
}, },
methods: { methods: {

View File

@ -94,7 +94,7 @@
</div> </div>
<v-card-actions class="px-6 py-4 d-flex align-center justify-end"> <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" @click="dialogOpenCloseEvent(dialog)" class="ant-btn-popup-default mr-2">닫기</a-button>
<a-button :ripple="false" type="primary" @click="setUpdate($event)">확인</a-button> <a-button :ripple="false" type="primary" @click="setUpdate($event)">확인</a-button>
</v-card-actions> </v-card-actions>
</v-card> </v-card>

View File

@ -39,8 +39,6 @@
import { mapState, mapMutations, mapActions } from 'vuex'; import { mapState, mapMutations, mapActions } from 'vuex';
import Buttons from '~/components/common/button/Buttons'; import Buttons from '~/components/common/button/Buttons';
import Grid from '~/components/common/Grid'; import Grid from '~/components/common/Grid';
import { CustomCheckbox } from '~/plugins/gridUtility';
import { CustomNumberEditor } from '~/plugins/gridUtility';
import Form from '~/components/common/form/Form'; import Form from '~/components/common/form/Form';
import mixinGlobal from '@/mixin/global.js'; import mixinGlobal from '@/mixin/global.js';
import Utility from '~/plugins/utility'; import Utility from '~/plugins/utility';
@ -175,7 +173,7 @@ export default {
header: '사용여부', header: '사용여부',
name: 'useFg', name: 'useFg',
align: 'left', align: 'left',
width: 100, minWidth: 80,
formatter({ value }) { formatter({ value }) {
value = value === true ? '1' : '0'; value = value === true ? '1' : '0';
const newValue = _this.pageData.useFgList.filter( const newValue = _this.pageData.useFgList.filter(
@ -190,7 +188,7 @@ export default {
// } // }
// } // }
}, },
{ header: '비고', name: 'rmrk', align: 'left' }, { header: '비고', name: 'rmrk', align: 'left', minWidth: 50, },
]; ];
this.setGridColumn({ this.setGridColumn({
@ -324,7 +322,7 @@ const myDataSetTagDetail = [
valueNm: 'tagNm', valueNm: 'tagNm',
disabled: false, disabled: false,
cols: 6, cols: 6,
class: 'py-2 mt-2', class: 'py-2 mt-1',
required: true, required: true,
labelCols: 12, labelCols: 12,
textCols: 12, textCols: 12,
@ -350,12 +348,11 @@ const myDataSetTagDetail = [
valueNm: 'useFg', valueNm: 'useFg',
disabled: false, disabled: false,
cols: 5, cols: 5,
class: 'py-2 mt-2', class: 'py-2 mt-1',
value: { '1': true, '0': false }, value: { '1': true, '0': false },
required: true, required: true,
textCols: 12, textCols: 12,
iconShow: true, iconShow: true,
// class: "d-flex align-end"
}, },
{ {
type: 'TextArea', type: 'TextArea',
@ -369,23 +366,4 @@ const myDataSetTagDetail = [
required: false, required: false,
}, },
]; ];
const dataPathDataExample = [
{
id: 'INCHEON.HVAC.EQP_HT_CH001.UT_CH101.CHI_AMP_1A_PV',
name: 'INCHEON 고온 냉동기 101호기 - 호로1',
type: '합계'
},
{
id: 'INCHEON.HVAC.EQP_HT_CH001.UT_CH101.CHI_AMP_1A_PV',
name: 'INCHEON 고온 냉동기 101호기 - 호로1',
type: '합계'
},
{
id: 'INCHEON.HVAC.EQP_HT_CH001.UT_CH101.CHI_AMP_1A_PV',
name: 'INCHEON 고온 냉동기 101호기 - 호로1',
type: '합계'
},
];
</script> </script>

View File

@ -6,7 +6,7 @@
<v-row> <v-row>
<v-col :cols="8" style="padding:0px"> <v-col :cols="8" style="padding:0px">
<!-- 조회기간 --> <!-- 조회기간 -->
<DatePicker :parentPrgmId="parentPrgmId" label="조회기간" /> <DatePicker :parentPrgmId="parentPrgmId" label="조회기간" customClass="tab-datepicker" />
</v-col> </v-col>
<v-col cols="4" class="d-flex justify-end align-center"> <v-col cols="4" class="d-flex justify-end align-center">
<Buttons <Buttons
@ -378,3 +378,10 @@ function numberFormatter({ value }) {
return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ','); return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
} }
</script> </script>
<style lang="scss" scoped>
::v-deep {
.tab-datepicker {
width: 64% !important;
}
}
</style>

View File

@ -7,41 +7,21 @@
<v-card class="searchFilter"> <v-card class="searchFilter">
<v-row align="end" no-gutters> <v-row align="end" no-gutters>
<v-col :cols="2.5"> <v-col :cols="2.5">
<InputText <InputText :parentPrgmId="myPrgmId" label="배치ID" valueNm="batchId" :searchOption="true"
:parentPrgmId="myPrgmId" customClass="input-large" />
label="배치ID"
valueNm="batchId"
:searchOption="true"
customClass="input-large"
/>
</v-col> </v-col>
<v-col :cols="2.5"> <v-col :cols="2.5">
<InputText <InputText :parentPrgmId="myPrgmId" label="배치명" valueNm="batchNm" :searchOption="true"
:parentPrgmId="myPrgmId" customClass="input-large" />
label="배치명"
valueNm="batchNm"
:searchOption="true"
customClass="input-large"
/>
</v-col> </v-col>
<v-col :cols="2.5"> <v-col :cols="2.5">
<component <component :is="'selectCodeList'" :parentPrgmId="myPrgmId" :label="'실행 결과'"
:is="'selectCodeList'" :dataKey="'execRsltCd'" :sendParam="{ commGrpCd: 'CO_BATCH_EXEC_RSLT', useFg: '1' }"
:parentPrgmId="myPrgmId" :addAll="true" customClass="select-large" />
:label="'실행 결과'"
:dataKey="'execRsltCd'"
:sendParam="{ commGrpCd: 'CO_BATCH_EXEC_RSLT', useFg: '1' }"
:addAll="true"
customClass="select-large"
/>
</v-col> </v-col>
<v-col :cols="2.5"> <v-col :cols="2.5">
<component <component :is="'Datepicker'" :parentPrgmId="myPrgmId" :label="'조회기간'"
:is="'Datepicker'" customClass="datepicker-large" />
:parentPrgmId="myPrgmId"
:label="'조회기간'"
customClass="datepicker-large"
/>
</v-col> </v-col>
<div class="text-right d-flex align-end justify-end pl-9" style="gap: 8px"> <div class="text-right d-flex align-end justify-end pl-9" style="gap: 8px">
<BtnSearch /> <BtnSearch />
@ -54,37 +34,30 @@
<v-row ref="contents"> <v-row ref="contents">
<!-- 배치 리스트 --> <!-- 배치 리스트 -->
<v-col :cols="12" style="height:50%"> <v-col :cols="12" style="height:70%">
<v-card class="pb-5 h100"> <v-card class="h100">
<v-card-title>배치 리스트</v-card-title> <v-card-title>배치 리스트</v-card-title>
<div class="h100" style="height:calc(100% - 70px)"> <div class="h100" style="height:calc(100% - 150px)">
<div ref="gridParent" class="px-5 h100"> <div ref="gridParent" class="px-5 h100">
<component <component :ref="gridName" :is="loadGrid ? 'Grid' : null" :parentPrgmId="myPrgmId"
:ref="gridName" :gridName="gridName" @getRowsData="getRowData" />
:is="loadGrid ? 'Grid' : null" </div>
:parentPrgmId="myPrgmId" <div class="d-flex align-center justify-center pt-7" v-if="loadGrid && totalCount > 0">
:gridName="gridName" <pagination id="pagination" :total-count="totalCount" :page-num="page" :limit="limit"
@getRowsData="getRowData" @loadData="changeGrid" />
/>
</div> </div>
</div> </div>
</v-card> </v-card>
</v-col> </v-col>
<!-- 배치 상세 --> <!-- 배치 상세 -->
<v-col :cols="12" style="height:50%"> <v-col :cols="12" style="height:30%">
<v-card class="pb-5 h100"> <v-card class="h100">
<div class="d-flex align-center justify-space-between pa-5"> <div class="d-flex align-center justify-space-between pa-5">
<v-card-title class="pa-0">배치 상세</v-card-title> <v-card-title class="pa-0">배치 상세</v-card-title>
</div> </div>
<div style="height:calc(100% - 50px)"> <div style="height:calc(100% - 50px)" class="px-5">
<div ref="gridParent" class="px-5 h100"> <component :is="'Form'" :parentPrgmId="myPrgmId" :detailList="detailList"
<component @gridEditingFinish="gridEditingFinish" />
:is="'Form'"
:parentPrgmId="myPrgmId"
:detailList="detailList"
@gridEditingFinish="gridEditingFinish"
/>
</div>
</div> </div>
</v-card> </v-card>
</v-col> </v-col>
@ -105,6 +78,7 @@ import Buttons from '~/components/common/button/Buttons';
import Grid from '~/components/common/Grid'; import Grid from '~/components/common/Grid';
import Form from '~/components/common/form/Form'; import Form from '~/components/common/form/Form';
import Utility from '~/plugins/utility'; import Utility from '~/plugins/utility';
import pagination from '~/components/common/Pagination';
let myTitle; let myTitle;
let myPrgmId; let myPrgmId;
@ -133,6 +107,7 @@ export default {
BtnSearch, BtnSearch,
BtnExcelDownload, BtnExcelDownload,
Buttons, Buttons,
pagination,
}, },
data() { data() {
return { return {
@ -141,6 +116,11 @@ export default {
gridName: 'rowGrid', gridName: 'rowGrid',
// rowGridOrigin: [], // rowGridOrigin: [],
detailList: myDetail, detailList: myDetail,
itemsPerPage: 20,
itemsPerPageArray: [10, 20, 30],
limit: 20,
page: 1,
totalCount: 0,
}; };
}, },
computed: { computed: {
@ -161,7 +141,10 @@ export default {
}, },
watch: { watch: {
chkIsFind(val) { chkIsFind(val) {
if (val) this.search(); if (val) {
this.page = 1;
this.search();
}
}, },
chkExecRsltCd() { chkExecRsltCd() {
this.setPageData({ isFind: true }); this.setPageData({ isFind: true });
@ -197,17 +180,16 @@ export default {
// chkOpenTabList: "chkOpenTabList" // chkOpenTabList: "chkOpenTabList"
// }), // }),
init() { init() {
// this.layoutInit(); this.layoutInit();
this.gridInit(); this.gridInit();
}, },
// layoutInit() { layoutInit() {
// const searchFilterHeight = this.$refs.searchFilter.offsetHeight; const searchFilterHeight = this.$refs.searchFilter.offsetHeight;
// this.$refs.contents.style.height = `calc(100% - ${searchFilterHeight}px)`; this.$refs.contents.style.height = `calc(100% - 30px - ${searchFilterHeight}px)`;
// }, },
gridInit() { gridInit() {
this.loadGrid = false; this.loadGrid = false;
const gridHeight = this.$refs.gridParent.offsetHeight - 30; const gridHeight = this.$refs.gridParent.offsetHeight - 30;
const myOptions = { const myOptions = {
scrollX: false, scrollX: false,
}; };
@ -219,10 +201,10 @@ export default {
const _this = this; const _this = this;
const myColumns = [ const myColumns = [
{ header: 'No.', name: 'batchLogSeq', align: 'right', width: 100 }, { header: 'No.', name: 'batchLogSeq', align: 'right', width: 90 },
{ header: '배치ID', name: 'batchId', align: 'right', width: 100 }, { header: '배치ID', name: 'batchId', align: 'right', width: 90 },
{ header: '배치명', name: 'batchNm', align: 'left', width: 150 }, { header: '배치명', name: 'batchNm', align: 'left', width: 150 },
{ header: '실행 일자', name: 'execDt', align: 'right', width: 80 }, { header: '실행 일자', name: 'execDt', align: 'right', width: 70 },
{ {
header: '실행 결과', header: '실행 결과',
name: 'execRsltCd', name: 'execRsltCd',
@ -252,9 +234,9 @@ export default {
align: 'center', align: 'center',
width: 160, width: 160,
}, },
{ header: '등록자NO', name: 'regUserNo', width: 120 }, { header: '등록자NO', name: 'regUserNo', width: 100 },
{ header: '등록일시', name: 'regDttm', align: 'center', width: 160 }, { header: '등록일시', name: 'regDttm', align: 'center', width: 160 },
{ header: '수정자NO', name: 'procUserNo', width: 120 }, { header: '수정자NO', name: 'procUserNo', width: 100 },
{ header: '수정일시', name: 'procDttm', align: 'center', width: 160 }, { header: '수정일시', name: 'procDttm', align: 'center', width: 160 },
]; ];
@ -274,6 +256,11 @@ export default {
}); });
}, },
async getRowGridData() { async getRowGridData() {
this.loadGrid = false;
// this.setGridData({
// gridKey: this.gridName,
// value: [],
// });
const res = await this.postApiReturn({ const res = await this.postApiReturn({
apiKey: 'selectBatchLog', apiKey: 'selectBatchLog',
resKey: 'batchLogData', resKey: 'batchLogData',
@ -282,8 +269,24 @@ export default {
batchNm: this.pageData.batchNm, // 검색키워드: 배치명 batchNm: this.pageData.batchNm, // 검색키워드: 배치명
execRsltCd: this.pageData.execRsltCd, //배치 실행 결과 execRsltCd: this.pageData.execRsltCd, //배치 실행 결과
fromDt: this.pageData.fromDt, fromDt: this.pageData.fromDt,
limit: this.limit,
page: this.page,
offset: (this.page - 1) * this.limit, // MariaDB Query에서 직접 계산이 안됨
}, },
}); });
const res2 = await this.postApiReturn({
apiKey: 'selectBatchLogPageTotal',
resKey: 'batchLogPageTotal',
sendParam: {
batchId: this.pageData.batchId, // 검색키워드: 배치ID
batchNm: this.pageData.batchNm, // 검색키워드: 배치명
execRsltCd: this.pageData.execRsltCd, //배치 실행 결과
fromDt: this.pageData.fromDt,
},
});
this.totalCount = res2[0].totalcount;
const newRes = res.map(item => { const newRes = res.map(item => {
const newObj = { const newObj = {
...item, ...item,
@ -302,6 +305,7 @@ export default {
}); });
this.$nextTick(() => { this.$nextTick(() => {
this.loadGrid = true;
if (newRes.length > 0) { if (newRes.length > 0) {
this.$refs[this.gridName].focus({ this.$refs[this.gridName].focus({
rowKey: this.chkRowGridSelectKey || 0, rowKey: this.chkRowGridSelectKey || 0,
@ -361,6 +365,12 @@ export default {
} }
return retVal; return retVal;
}, },
changeGrid: async function (pageNum, limit) {
this.page = pageNum;
this.limit = limit;
this.search();
},
}, },
}; };
@ -428,6 +438,7 @@ const myDetail = [
readonly: true, readonly: true,
cols: 12, cols: 12,
class: 'py-2', class: 'py-2',
rows: 3
}, },
]; ];
</script> </script>

View File

@ -4,7 +4,7 @@
<!-- 리스트 페이지 시작 --> <!-- 리스트 페이지 시작 -->
<div v-if="pageActionFlag == 'list'" class="h1001"> <div v-if="pageActionFlag == 'list'" class="h1001">
<v-card class=""> <v-card class="">
<div class="pa-5"> <div class="pa-5 pb-0">
<v-row align="center" no-gutters> <v-row align="center" no-gutters>
<v-col :cols="12" class="d-flex align-center justify-space-between"> <v-col :cols="12" class="d-flex align-center justify-space-between">
<v-card-title class="pa-0 custom-title-4">공지사항</v-card-title> <v-card-title class="pa-0 custom-title-4">공지사항</v-card-title>
@ -15,11 +15,15 @@
<!-- <v-btn @click="listPageButtonGroupClickEvent('delete')" :ripple="false">삭제</v-btn> --> <!-- <v-btn @click="listPageButtonGroupClickEvent('delete')" :ripple="false">삭제</v-btn> -->
</div> </div>
</v-col> </v-col>
<v-col :cols="12" ref="contents" class="mt-5" style="min-height: calc(100% - 76px);"> <v-col :cols="12" ref="contents" class="mt-5" style="min-height: calc(100% - 73px);">
<div ref="gridParent" class="px-50" style="min-height: 70vh;"> <div ref="gridParent" class="px-50" style="min-height: 64vh;">
<component :ref="gridName" :is="loadGrid ? 'Grid' : null" :gridName="gridName" <component :ref="gridName" :is="loadGrid ? 'Grid' : null" :gridName="gridName"
:parentPrgmId="myPrgmId" @getRowsData="getRowData" /> :parentPrgmId="myPrgmId" @getRowsData="getRowData" />
</div> </div>
<div class="d-flex align-center justify-center pa-5" v-if="loadGrid && totalCount > 0">
<pagination id="pagination" :total-count="totalCount" :page-num="page" :limit="limit"
@loadData="changeGrid" />
</div>
</v-col> </v-col>
</v-row> </v-row>
</div> </div>
@ -37,7 +41,7 @@
class="mr-1" icon="unordered-list">목록</a-button> class="mr-1" icon="unordered-list">목록</a-button>
<a-button @click="viewPageButtonGroupClickEvent('reply')" type="primary" :ripple="false" <a-button @click="viewPageButtonGroupClickEvent('reply')" type="primary" :ripple="false"
class="mr-1" icon="send-outlined"> class="mr-1" icon="send-outlined">
<v-icon small :class="['mr-2']" >$icoSend</v-icon> <v-icon small :class="['mr-2']">$icoSend</v-icon>
답글 답글
</a-button> </a-button>
<a-button @click="viewPageButtonGroupClickEvent('update')" type="primary" :ripple="false" <a-button @click="viewPageButtonGroupClickEvent('update')" type="primary" :ripple="false"
@ -60,9 +64,10 @@
<v-card-title class="custom-title-7 pa-0"> <v-card-title class="custom-title-7 pa-0">
파일목록 파일목록
</v-card-title> </v-card-title>
<div v-for="fileData in viewActionData.fileData" :key="fileData.apndFileId" class="file-item" style="background-color: unset;"> <div v-for="fileData in viewActionData.fileData" :key="fileData.apndFileId"
<a @click.prevent="downloadFile(fileData)"> :class="['file-item', isDarkMode ? 'dark' : 'light']" style="background-color: unset;">
<div class="d-flex justify-start search-box-label"> <a @click.prevent="downloadFile(fileData)" class="pa-0">
<div class="d-flex justify-start search-box-label mb-0">
<v-icon>mdi-paperclip</v-icon> <v-icon>mdi-paperclip</v-icon>
<span class="file-item-name ml-2">{{ fileData.apndFileNm + '.' + <span class="file-item-name ml-2">{{ fileData.apndFileNm + '.' +
fileData.apndFileExt }}</span> fileData.apndFileExt }}</span>
@ -89,14 +94,14 @@
</v-col> </v-col>
<v-col :cols="12" style="min-height: calc(100vh - 450px);"> <v-col :cols="12" style="min-height: calc(100vh - 450px);">
<editor ref="tuiEditor" height="100%" initialEditType="wysiwyg" <editor ref="tuiEditor" height="100%" initialEditType="wysiwyg"
:class="[isDarkMode ? 'toastui-editor-dark' : 'toastui-editor-light']"/> :class="[isDarkMode ? 'toastui-editor-dark' : 'toastui-editor-light']" />
</v-col> </v-col>
<v-col :cols="6" class="mt-5"> <v-col :cols="6" class="mt-5">
<v-card-title class="custom-title-7 pa-0">파일첨부</v-card-title> <v-card-title class="custom-title-7 pa-0">파일첨부</v-card-title>
<div class="" v-if="writeActionData.fileData"> <div class="" v-if="writeActionData.fileData">
<div v-for="(fileData, index) in writeActionData.fileData" :key="fileData.apndFileId" <div v-for="(fileData, index) in writeActionData.fileData" :key="fileData.apndFileId"
class="file-item d-flex justify-space-between"> :class="['file-item d-flex justify-space-between', isDarkMode ? 'dark' : 'light']">
<div class="file-item-detail"> <div class="file-item-detail">
<v-icon>mdi-paperclip</v-icon> <v-icon>mdi-paperclip</v-icon>
<span href="#" class="file-item-name">{{ fileData.name }}</span> <span href="#" class="file-item-name">{{ fileData.name }}</span>
@ -105,17 +110,16 @@
@click="writeActionData.업로드fileData.splice(index, 1)" /> @click="writeActionData.업로드fileData.splice(index, 1)" />
</div> </div>
</div> </div>
<a-button class="ant-btn-popup-default mt-3" color="primary" icon="upload" @click="$refs.writeInputFile.$refs.input.click()"> <a-button class="ant-btn-popup-default mt-3" color="primary" icon="upload"
@click="$refs.writeInputFile.$refs.input.click()">
업로드 업로드
</a-button> </a-button>
<v-file-input ref="writeInputFile" v-model="writeActionData.fileData" multiple outlined <v-file-input ref="writeInputFile" v-model="writeActionData.fileData" multiple outlined
hide-input class="d-none" prepend-icon="mdi-tray-arrow-up"></v-file-input> hide-input class="d-none" prepend-icon="mdi-tray-arrow-up"></v-file-input>
</v-col> </v-col>
<v-col :cols="12" class="text-right"> <v-col :cols="12" class="text-right">
<a-button @click="writePageButtonGroupClickEvent('cancel')" <a-button @click="writePageButtonGroupClickEvent('cancel')" :ripple="false"
:ripple="false" class="ant-btn-popup-default mr-2" color="primary">취소</a-button>
class="ant-btn-popup-default mr-2"
color="primary" >취소</a-button>
<a-button @click="writePageButtonGroupClickEvent('write')" :ripple="false" <a-button @click="writePageButtonGroupClickEvent('write')" :ripple="false"
type="primary">등록</a-button> type="primary">등록</a-button>
</v-col> </v-col>
@ -138,13 +142,13 @@
</v-col> </v-col>
<v-col :cols="12" style="height: calc(100vh - 270px);" class="mt-2"> <v-col :cols="12" style="height: calc(100vh - 270px);" class="mt-2">
<editor ref="tuiReplyEditor" height="100%" initialEditType="wysiwyg" <editor ref="tuiReplyEditor" height="100%" initialEditType="wysiwyg"
:class="[isDarkMode ? 'toastui-editor-dark' : 'toastui-editor-light']"/> :class="[isDarkMode ? 'toastui-editor-dark' : 'toastui-editor-light']" />
</v-col> </v-col>
<v-col :cols="6" class="mt-5"> <v-col :cols="6" class="mt-5">
<v-card-title class="custom-title-7 pa-0">파일첨부</v-card-title> <v-card-title class="custom-title-7 pa-0">파일첨부</v-card-title>
<div class="" v-if="replyActionData.fileData"> <div class="" v-if="replyActionData.fileData">
<div v-for="(fileData, index) in replyActionData.fileData" :key="fileData.apndFileId" <div v-for="(fileData, index) in replyActionData.fileData" :key="fileData.apndFileId"
class="file-item d-flex justify-space-between"> :class="['file-item d-flex justify-space-between', isDarkMode ? 'dark' : 'light']">
<div class="file-item-detail"> <div class="file-item-detail">
<v-icon>mdi-paperclip</v-icon> <v-icon>mdi-paperclip</v-icon>
<span href="#" class="file-item-name">{{ fileData.name }}</span> <span href="#" class="file-item-name">{{ fileData.name }}</span>
@ -153,7 +157,8 @@
@click="replyActionData.fileData.splice(index, 1)" /> @click="replyActionData.fileData.splice(index, 1)" />
</div> </div>
</div> </div>
<a-button class="ant-btn-popup-default mt-3" color="primary" icon="upload" @click="$refs.replyInputFile.$refs.input.click()"> <a-button class="ant-btn-popup-default mt-3" color="primary" icon="upload"
@click="$refs.replyInputFile.$refs.input.click()">
업로드 업로드
</a-button> </a-button>
<v-file-input ref="replyInputFile" multiple show-size v-model="replyActionData.fileData" <v-file-input ref="replyInputFile" multiple show-size v-model="replyActionData.fileData"
@ -161,10 +166,8 @@
</v-file-input> </v-file-input>
</v-col> </v-col>
<v-col :cols="12" class="text-right"> <v-col :cols="12" class="text-right">
<a-button @click="replyPageButtonGroupClickEvent('cancel')" <a-button @click="replyPageButtonGroupClickEvent('cancel')" class="ant-btn-popup-default mr-2"
class="ant-btn-popup-default mr-2" color="primary" :ripple="false">취소</a-button>
color="primary"
:ripple="false">취소</a-button>
<a-button @click="replyPageButtonGroupClickEvent('reply')" :ripple="false" <a-button @click="replyPageButtonGroupClickEvent('reply')" :ripple="false"
type="primary">등록</a-button> type="primary">등록</a-button>
</v-col> </v-col>
@ -173,7 +176,7 @@
</div> </div>
<!-- 답글 작성 페이지 --> <!-- 답글 작성 페이지 -->
<!-- 수정 페이지 시작 --> <!-- 수정 페이지 시작 -->
<div v-if="pageActionFlag == 'update'"> <div v-if="pageActionFlag == 'update'" class="update">
<v-card> <v-card>
<div class="pa-5"> <div class="pa-5">
<v-row align="center" no-gutters> <v-row align="center" no-gutters>
@ -189,13 +192,13 @@
<v-col :cols="12" style="height: calc(90vh - 270px);" class="mt-4"> <v-col :cols="12" style="height: calc(90vh - 270px);" class="mt-4">
<editor ref="tuiUpdateEditor" height="100%" initialEditType="wysiwyg" <editor ref="tuiUpdateEditor" height="100%" initialEditType="wysiwyg"
:initialValue="updateActionData.content" :initialValue="updateActionData.content"
:class="[isDarkMode ? 'toastui-editor-dark' : 'toastui-editor-light']"/> :class="[isDarkMode ? 'toastui-editor-dark' : 'toastui-editor-light']" />
</v-col> </v-col>
<v-col :cols="6" class="mt-5"> <v-col :cols="6" class="mt-5">
<v-card-title class="custom-title-7 pa-0">파일첨부</v-card-title> <v-card-title class="custom-title-7 pa-0">파일첨부</v-card-title>
<div class="" v-if="updateActionData.fileData"> <div class="" v-if="updateActionData.fileData">
<div v-for="(fileData, index) in updateActionData.fileData" :key="fileData.apndFileId" <div v-for="(fileData, index) in updateActionData.fileData" :key="fileData.apndFileId"
class="file-item d-flex justify-space-between"> :class="['file-item d-flex justify-space-between', isDarkMode ? 'dark' : 'light']">
<div class="file-item-detail"> <div class="file-item-detail">
<v-icon style="font-size: 18px;">mdi-paperclip</v-icon> <v-icon style="font-size: 18px;">mdi-paperclip</v-icon>
<span href="#" class="file-item-name">{{ fileData.name }}</span> <span href="#" class="file-item-name">{{ fileData.name }}</span>
@ -204,9 +207,10 @@
@click="updateActionData.fileData.splice(index, 1)" /> @click="updateActionData.fileData.splice(index, 1)" />
</div> </div>
</div> </div>
<div class="" v-if="updateActionData.currentFileList"> <div class="current-files" v-if="updateActionData.currentFileList">
<div v-for="(fileData, index) in updateActionData.currentFileList" <div v-for="(fileData, index) in updateActionData.currentFileList"
:key="fileData.apndFileId" class="file-item d-flex justify-space-between"> :key="fileData.apndFileId"
:class="['file-item d-flex justify-space-between', isDarkMode ? 'dark' : 'light']">
<div class="file-item-detail"> <div class="file-item-detail">
<v-icon style="font-size: 18px;">mdi-paperclip</v-icon> <v-icon style="font-size: 18px;">mdi-paperclip</v-icon>
<span @click.prevent="downloadFile(fileData)" href="#" <span @click.prevent="downloadFile(fileData)" href="#"
@ -217,7 +221,8 @@
@click="addFileToDeleteFileList(fileData)" /> @click="addFileToDeleteFileList(fileData)" />
</div> </div>
</div> </div>
<a-button class="ant-btn-popup-default mt-2" color="primary" icon="upload" @click="$refs.updateInputFile.$refs.input.click()"> <a-button class="ant-btn-popup-default mt-2" color="primary" icon="upload"
@click="$refs.updateInputFile.$refs.input.click()">
업로드 업로드
</a-button> </a-button>
<v-file-input ref="updateInputFile" multiple show-size v-model="updateActionData.fileData" <v-file-input ref="updateInputFile" multiple show-size v-model="updateActionData.fileData"
@ -226,9 +231,7 @@
</v-col> </v-col>
<v-col :cols="12" class="text-right"> <v-col :cols="12" class="text-right">
<a-button @click="updatePageButtonGroupClickEvent('cancel')" <a-button @click="updatePageButtonGroupClickEvent('cancel')"
class="ant-btn-popup-default mr-2" class="ant-btn-popup-default mr-2" color="primary">취소</a-button>
color="primary"
>취소</a-button>
<a-button @click="updatePageButtonGroupClickEvent('update')" type="primary">등록</a-button> <a-button @click="updatePageButtonGroupClickEvent('update')" type="primary">등록</a-button>
</v-col> </v-col>
</v-row> </v-row>
@ -249,6 +252,7 @@ import '@toast-ui/editor/dist/toastui-editor.css';
import { Editor } from '@toast-ui/vue-editor'; import { Editor } from '@toast-ui/vue-editor';
import '@toast-ui/editor/dist/toastui-editor-viewer.css'; import '@toast-ui/editor/dist/toastui-editor-viewer.css';
import { Viewer } from '@toast-ui/vue-editor'; import { Viewer } from '@toast-ui/vue-editor';
import pagination from '~/components/common/Pagination';
let myTitle; let myTitle;
// const myPrgmId = "PRG0034"; // const myPrgmId = "PRG0034";
@ -275,6 +279,7 @@ export default {
Utility, Utility,
Editor, Editor,
Viewer, Viewer,
pagination,
}, },
data() { data() {
return { return {
@ -289,6 +294,11 @@ export default {
loadGrid: false, loadGrid: false,
selectedRowKey: null, selectedRowKey: null,
selectedRowData: null, selectedRowData: null,
itemsPerPage: 10,
itemsPerPageArray: [10, 20, 30],
limit: 20,
page: 1,
totalCount: 0,
writeActionData: { writeActionData: {
title: '', title: '',
postNo: null, postNo: null,
@ -330,7 +340,10 @@ export default {
}, },
watch: { watch: {
chkIsFind(val) { chkIsFind(val) {
if (val) this.search(); if (val) {
this.page = 1;
this.search();
}
}, },
}, },
async beforeCreate() { async beforeCreate() {
@ -416,7 +429,7 @@ export default {
this.getGridData(); this.getGridData();
}, },
gridInit() { gridInit() {
const gridHeight = this.$refs.contents.offsetHeight - 76; const gridHeight = this.$refs.contents.offsetHeight - 120;
const myOptions = { const myOptions = {
header: { header: {
@ -488,16 +501,29 @@ export default {
async getGridData() { async getGridData() {
var params = { var params = {
bordNo: 'BORD0001', bordNo: 'BORD0001',
limit: this.limit,
page: this.page,
offset: (this.page - 1) * this.limit, // MariaDB Query에서 직접 계산이 안됨
}; };
this.loadGrid = false; this.loadGrid = false;
const res = await this.postApiReturn({ const res = await this.postApiReturn({
apiKey: 'selectPostList', apiKey: 'selectPostData',
resKey: 'postData', resKey: 'postPage',
sendParam: params, sendParam: params,
}); });
const res2 = await this.postApiReturn({
apiKey: 'selectPostPageTotal',
resKey: 'postPageTotal',
sendParam: {
bordNo: 'BORD0001',
}
});
this.totalCount = res2[0].totalcount;
this.setGridData({ this.setGridData({
gridKey: this.gridName, gridKey: this.gridName,
value: res, value: res,
@ -1029,6 +1055,12 @@ export default {
return resultFlag; return resultFlag;
}, },
changeGrid: async function (pageNum, limit) {
this.page = pageNum;
this.limit = limit;
this.search();
},
}, },
}; };
@ -1050,17 +1082,6 @@ const defaultData = {
cursor: pointer; cursor: pointer;
} }
.file-item {
width: auto;
margin: 2px 0;
padding: 4px;
background-color: #0000000A;
.file-item-name {
color: #1677FF;
}
}
::v-deep { ::v-deep {
.v-input__slot { .v-input__slot {
padding-left: 8px; padding-left: 8px;
@ -1084,17 +1105,46 @@ const defaultData = {
font-size: 1.0rem !important; font-size: 1.0rem !important;
} }
.toastui-editor-mode-switch .tab-item.active {
color: #1677FF
}
.toastui-editor-light .toastui-editor-mode-switch .tab-item {
color: #000000E0
}
.v-icon.anticon-delete svg { .v-icon.anticon-delete svg {
width: 14px; width: 14px;
height: 14px; height: 14px;
} }
} }
@each $theme in dark, light {
@include theme($theme);
::v-deep {
.toastui-editor-#{$theme} {
.toastui-editor-mode-switch {
>.tab-item {
border: none;
background-color: transparent;
color: map-deep-get($config, #{$theme}, "card-title-color") !important;
&.active {
color: map-deep-get($config, #{$theme}, "card-text-info-color") !important;
border-top: 1px solid map-deep-get($config, #{$theme}, "card-text-info-color");
}
}
}
}
}
.file-item {
&.#{$theme} {
width: auto;
margin: 2px 0;
padding: 4px;
background-color: map-deep-get($config, #{$theme}, "v-calendar-day-in-not-month-color");
.file-item-name {
color: map-deep-get($config, #{$theme}, "card-text-info-color");
}
}
}
}
</style> </style>

View File

@ -512,7 +512,7 @@
<v-col cols="12" sm="12" xl="12" style="height: 300px"> <v-col cols="12" sm="12" xl="12" style="height: 300px">
<v-card style="border-radius: 4px" class="pb-5"> <v-card style="border-radius: 4px" class="pb-5">
<div style="height: 20px"></div> <div style="height: 20px"></div>
<div class="h100 px-5" style="height: calc(100% - 30px)"> <div class="h100 px-5" style="height: calc(100% - 70px)">
<div ref="gridParent" class="h100 w100"> <div ref="gridParent" class="h100 w100">
<component <component
:is="loadGrid ? 'Grid' : null" :is="loadGrid ? 'Grid' : null"
@ -521,6 +521,16 @@
:ref="gridName" :ref="gridName"
@dblClick="gridClickEvent" @dblClick="gridClickEvent"
/> />
<div v-if="loadGrid && totalCount > 0" class="pagination-wrapper">
<pagination
id="pagination"
:total-count="totalCount"
:page-num="page"
:limit="limit"
:itemsPerPageArray="itemsPerPageArray"
@loadData="changeGrid"
/>
</div>
</div> </div>
</div> </div>
</v-card> </v-card>
@ -539,6 +549,7 @@ import DateUtility from "~/plugins/dateUtility";
import Utility from "~/plugins/utility"; import Utility from "~/plugins/utility";
import Grid from "~/components/common/Grid"; import Grid from "~/components/common/Grid";
import Chart from "~/components/common/Chart"; import Chart from "~/components/common/Chart";
import pagination from "~/components/common/Pagination";
import AntCard from "~/components/common/card/AntCard"; import AntCard from "~/components/common/card/AntCard";
@ -579,7 +590,8 @@ export default {
Chart, Chart,
UnusedStatPopPage, UnusedStatPopPage,
EtcStatPopPage, EtcStatPopPage,
PageTitle PageTitle,
pagination
}, },
computed: { computed: {
...mapState({ ...mapState({
@ -697,6 +709,10 @@ export default {
gridName: "dashBoard_grid_01", gridName: "dashBoard_grid_01",
loadGrid: false, loadGrid: false,
itemsPerPageArray: [10, 20, 50],
limit: 10,
page: 1,
totalCount: 0,
isGridLoading: true, isGridLoading: true,
}; };
}, },
@ -735,6 +751,11 @@ export default {
} }
this.timer = setInterval(this.search, 90000); //15분 주기마다 갱신 this.timer = setInterval(this.search, 90000); //15분 주기마다 갱신
}, },
changeGrid: async function (pageNum, limit) {
this.page = pageNum;
this.limit = limit;
await this.getGridData();
},
async search() { async search() {
await new Promise((resolve) => setTimeout(resolve, 1500)); await new Promise((resolve) => setTimeout(resolve, 1500));
if (this.$router.currentRoute.fullPath == this.myHome.root) { if (this.$router.currentRoute.fullPath == this.myHome.root) {
@ -756,6 +777,41 @@ export default {
// gridHeight = gridHeight*0.9 // gridHeight = gridHeight*0.9
gridHeight = this.$refs.gridParent.offsetHeight - 35; gridHeight = this.$refs.gridParent.offsetHeight - 35;
} }
// Define custom button
class CustomButton {
constructor(props, pageData) {
const { grid, rowKey, columnInfo } = props;
const gridData = grid.store.data.rawData;
const value = gridData[rowKey][columnInfo.name];
const onClickCallback = columnInfo.renderer.options.onClick;
this.disabled = columnInfo.renderer.options.disabled || false;
const elDiv = document.createElement("div");
elDiv.innerHTML = `<span>${value}</span>`;
$(elDiv).addClass("tui-grid-cell-content d-flex justify-space-between");
const el2 = document.createElement("button");
$(el2).addClass("edit-btn blue--text");
el2.innerText = "보기";
elDiv.appendChild(el2);
this.el = elDiv;
if (!this.disabled && typeof onClickCallback === "function") {
// click 이벤트
this.el.addEventListener("click", function (event) {
onClickCallback(rowKey);
});
}
}
getElement() {
return this.el;
}
getValue() {
// return this.el.value;
}
mounted() {
// this.el.focus();
}
}
const myOptions = { const myOptions = {
// scrollX: false, // scrollX: false,
setScroll: true, setScroll: true,
@ -840,7 +896,42 @@ export default {
{ header: "주의", name: "careStndVal", align: "right", width: 40 }, { header: "주의", name: "careStndVal", align: "right", width: 40 },
{ header: "경고", name: "warnStndVal", align: "right", width: 40 }, { header: "경고", name: "warnStndVal", align: "right", width: 40 },
{ header: "가이드", name: "totVal", align: "right", width: 40 }, { header: "가이드", name: "totVal", align: "right", width: 40 },
{ header: "알람 내용", name: "alrmMsg", align: "left", resizable: false }, { header: "알람 내용", name: "alrmMsg", align: "left", resizable: false,
// Render custom button to switch page instead of double click on row
renderer: {
type: CustomButton,
options: {
value: "보기",
onClick: (rowKey) => {
var gridInstance = this.$refs[this.gridName].gridInstance;
var eventRowData = gridInstance.invoke("getRow", rowKey);
var data = {
cmCycle: "CYC_DAY",
fromDt:
eventRowData.totDttm != undefined
? eventRowData.totDttm
: Utility.setFormatDate(new Date(), "YYYY-MM-DD HH:mm"),
fabId: eventRowData.fabId,
eqpmKindId: eventRowData.eqpmKindId,
eqpmGrpId: eventRowData.eqpmGrpId,
eqpmId: eventRowData.eqpmId,
};
var key = "tick_" + Math.random();
this.$router.push({
name: "ems-effc-EnrgUseEqpmDetlMntrPage",
query: {
prgmId: "PRG0082",
// tick:key
},
params: {
...data,
key: key,
},
});
},
},
},
},
{ header: "설비종류", name: "eqpmKindId", align: "left", hidden: true }, { header: "설비종류", name: "eqpmKindId", align: "left", hidden: true },
{ header: "설비종류", name: "eqpmKindNm", align: "left", hidden: true }, { header: "설비종류", name: "eqpmKindNm", align: "left", hidden: true },
]; ];
@ -855,11 +946,21 @@ export default {
}, },
async getGridData() { async getGridData() {
this.loadGrid = false; this.loadGrid = false;
// console // Get total records of grid
const totalRes = await this.postApiReturn({
apiKey: "selectIssueGdIdxDataPageTotal",
resKey: "issueGdIdxDataPageTotal",
});
this.totalCount = totalRes[0].totalcount;
const res = await this.postApiReturn({ const res = await this.postApiReturn({
apiKey: "selectIssueGdIdxData", apiKey: "selectIssueGdIdxData",
resKey: "issueGdIdxData", resKey: "issueGdIdxData",
sendParam: {}, sendParam: {
limit: this.limit,
page: this.page,
offset: (this.page - 1) * this.limit,
},
}); });
// let fakeData = [ // let fakeData = [
// { // {

View File

@ -84,67 +84,64 @@
</v-card> </v-card>
</v-col> </v-col>
</v-row> </v-row>
<v-row > <v-row align="stretch">
<v-col :cols="5" class="h100"> <v-col :cols="5">
<v-card class="pb-5"> <v-card class="d-flex flex-column h100">
<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">에너지원 정보</span> <span class="tit ft-size_20 ft-weight_600">에너지원 정보</span>
<Buttons <Buttons
:parentPrgmId="myPrgmId" :parentPrgmId="myPrgmId"
:bindingData="gridName" :bindingData="gridName"
:detailList="detailList" :detailList="detailList"
:btnActionsFnc="btnActions" :btnActionsFnc="btnActions"
/> />
</v-card-title> </v-card-title>
<div class="px-5" style="height:calc(100% - 106px)"> <div class="px-5" style="height: auto;">
<div ref="gridParent" class="w100 h100"> <div ref="gridParent" class="w100">
<component <component
:ref="gridName" :ref="gridName"
:is="loadGrid ? 'Grid' : null" :is="loadGrid ? 'Grid' : null"
:gridName="gridName" :gridName="gridName"
:parentPrgmId="myPrgmId" :parentPrgmId="myPrgmId"
@getRowsData="getRowData" @getRowsData="getRowData"
@sendSelectedRowStatInfo="getSelectedRowStatInfo" @sendSelectedRowStatInfo="getSelectedRowStatInfo"
:selectedRowDataWatchFlag="true" :selectedRowDataWatchFlag="true"
/> />
</div>
</div> </div>
</div>
</v-card> </v-card>
</v-col> </v-col>
<v-col :cols="7" class="h100">
<v-card class="pb-5"> <v-col :cols="7">
<v-card-title>에너지원 상세</v-card-title> <v-card class="d-flex flex-column h100">
<div class="px-5" style="min-height: auto;"> <v-card-title>에너지원 상세</v-card-title>
<v-tabs v-model="tab"> <div class="px-5" style="height: auto;">
<v-tab <v-tabs v-model="tab">
v-for="item in items" <v-tab
:key="item.id" v-for="item in items"
:disabled="item.disabledFlag" :key="item.id"
> :disabled="item.disabledFlag"
{{ item.name }} >
</v-tab> {{ item.name }}
</v-tabs> </v-tab>
<v-tabs-items </v-tabs>
v-model="tab" <v-tabs-items v-model="tab" class="py-6">
class="py-6" <v-tab-item v-for="(item, idx) in items" :key="item.id">
style="min-height: auto;" <component
> v-if="item.id == 'ercInfoTab'"
<v-tab-item v-for="(item, idx) in items" :key="item.id"> :is="'Form'"
<component :parentPrgmId="myPrgmId"
v-if="item.id == 'ercInfoTab'" :detailList="detailList"
:is="'Form'" @gridEditingFinish="gridEditingFinish"
:parentPrgmId="myPrgmId" />
:detailList="detailList" <ErcChrgInfoTab
@gridEditingFinish="gridEditingFinish" v-if="item.id == 'ercChrgInfoTab'"
/> :parentPrgmId="myPrgmId"
<ErcChrgInfoTab :innerTabGridInfo="{ tab, idx }"
v-if="item.id == 'ercChrgInfoTab'" />
:parentPrgmId="myPrgmId" </v-tab-item>
:innerTabGridInfo="{ tab, idx }" </v-tabs-items>
/> </div>
</v-tab-item>
</v-tabs-items>
</div>
</v-card> </v-card>
</v-col> </v-col>
</v-row> </v-row>

View File

@ -12,7 +12,7 @@
</v-col> </v-col>
<v-col :cols="3"> <v-col :cols="3">
<component :is="'EvtObjPop'" :parentPrgmId="myPrgmId" :item="evtObjPopItem" <component :is="'EvtObjPop'" :parentPrgmId="myPrgmId" :item="evtObjPopItem"
class="no-gutters" customClass="select-large" /> class="no-gutters" customClass="select-large pa-0" />
</v-col> </v-col>
<v-col :cols="3"> <v-col :cols="3">
<!-- 대상일 --> <!-- 대상일 -->
@ -38,7 +38,7 @@
<div class="d-flex align-center justify-center pa-5" v-if="loadGrid && totalCount > 0"> <div class="d-flex align-center justify-center pa-5" v-if="loadGrid && totalCount > 0">
<pagination id="pagination" :total-count="totalCount" :page-num="page" :limit="limit" <pagination id="pagination" :total-count="totalCount" :page-num="page" :limit="limit"
@loadData="changeGrid" /> @loadData="changeGrid" />
</div> </div>
</v-card> </v-card>
</v-col> </v-col>

View File

@ -152,16 +152,16 @@
</div> </div>
</div> </div>
</v-row> </v-row>
<v-row class="pa-1" style="height: 52%; width: 100%"> <v-row class="pa-1" style="height: 45%; width: 100%">
<v-card class="pa-1" style="height: 100%; width: 100%; overflow: hidden"> <v-card class="pa-1" style="height: 100%; width: 100%; overflow: hidden">
<div style="height: 15%"> <div style="height: 15%">
<v-card-title class="d-flex align-center justify-space-between pl-3"> <v-card-title class="d-flex align-center justify-space-between pl-3 pt-2">
<span class="tit ft-size_20 ft-weight_600">가이드 알람정보</span> <span class="tit ft-size_20 ft-weight_600">가이드 알람정보</span>
</v-card-title> </v-card-title>
</div> </div>
<div <div
ref="gridParent01" ref="gridParent01"
class="pl-3 mt-5" class="pl-3 mt-3"
style="height: 75%; overflow: hidden;" style="height: 75%; overflow: hidden;"
> >
<component <component

View File

@ -32,15 +32,19 @@
</v-row> </v-row>
<v-row ref="contents"> <v-row ref="contents">
<v-col :cols="12" > <v-col :cols="12" >
<v-card class="pb-5"> <v-card>
<div class="d-flex align-center justify-space-between py-4 px-4"> <div class="d-flex align-center justify-space-between py-4 px-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>
<Buttons :parentPrgmId="myPrgmId" :bindingData="gridName" :btnActionsFnc="btnActions" /> <Buttons :parentPrgmId="myPrgmId" :bindingData="gridName" :btnActionsFnc="btnActions" />
</div> </div>
<div ref="gridParent" class="px-5" style="min-height: 60vh;"> <div ref="gridParent" class="px-5" style="min-height: 50vh;">
<component :ref="gridName" :is="loadGrid ? 'Grid' : null" :gridName="gridName" :parentPrgmId="myPrgmId" <component :ref="gridName" :is="loadGrid ? 'Grid' : null" :gridName="gridName" :parentPrgmId="myPrgmId"
:editorGrid="true" @getRowsData="getRowData" /> :editorGrid="true" @getRowsData="getRowData" />
</div> </div>
<div class="d-flex align-center justify-center pa-5" v-if="loadGrid && totalCount > 0">
<pagination id="pagination" :total-count="totalCount" :page-num="page" :limit="limit"
@loadData="changeGrid" />
</div>
</v-card> </v-card>
</v-col> </v-col>
</v-row> </v-row>
@ -57,7 +61,7 @@ import Grid from '~/components/common/Grid';
import Utility from '~/plugins/utility'; import Utility from '~/plugins/utility';
import Buttons from '~/components/common/button/Buttons'; import Buttons from '~/components/common/button/Buttons';
import EnrgUsePlanModiPop from '~/components/common/modal/EnrgUsePlanModiPop'; import EnrgUsePlanModiPop from '~/components/common/modal/EnrgUsePlanModiPop';
import DateUtility from '~/plugins/dateUtility'; import pagination from '~/components/common/Pagination';
let myTitle; let myTitle;
let myPrgmId; let myPrgmId;
@ -86,6 +90,7 @@ export default {
Grid, Grid,
Buttons, Buttons,
EnrgUsePlanModiPop, EnrgUsePlanModiPop,
pagination
}, },
data() { data() {
return { return {
@ -104,7 +109,11 @@ export default {
fromDt: new Date().getFullYear(), fromDt: new Date().getFullYear(),
rowKey: null, rowKey: null,
edtingFinishFlag: 'Y', edtingFinishFlag: 'Y',
// gridName: 'rowGrid', itemsPerPage: 10,
itemsPerPageArray: [10, 20, 30],
limit: 20,
page: 1,
totalCount: 0,
}; };
}, },
computed: { computed: {
@ -134,7 +143,10 @@ export default {
this.fromDt = val; this.fromDt = val;
}, },
chkIsFind(val) { chkIsFind(val) {
if (val) this.search(); if (val) {
this.page = 1;
this.search();
}
}, },
async selectValue01(val) { async selectValue01(val) {
if (this.initedFlag) { if (this.initedFlag) {
@ -265,7 +277,7 @@ export default {
gridInit() { gridInit() {
this.loadGrid = false; this.loadGrid = false;
let _this = this; let _this = this;
const gridHeight = this.$refs.gridParent.offsetHeight - 50; const gridHeight = this.$refs.gridParent.offsetHeight - 40;
let yyyyCol = this.pageData.fromDt + '년'; let yyyyCol = this.pageData.fromDt + '년';
let childCols1 = []; let childCols1 = [];
let myComplexColumns = [ let myComplexColumns = [
@ -358,14 +370,14 @@ export default {
{ {
header: 'FAB', header: 'FAB',
name: 'fab', name: 'fab',
width: 100, width: 85,
align: 'left', align: 'left',
// hidden: true, // hidden: true,
}, },
{ {
header: '공정명', header: '공정명',
name: 'eccNm', name: 'eccNm',
width: 100, width: 150,
align: 'left', align: 'left',
hidden: true, hidden: true,
}, },
@ -415,7 +427,7 @@ export default {
{ {
header: '구분', header: '구분',
name: 'gubun', name: 'gubun',
width: 200, width: 150,
align: 'left', align: 'left',
// hidden: true, // hidden: true,
formatter({ value }) { formatter({ value }) {
@ -447,7 +459,7 @@ export default {
myColumns.push({ myColumns.push({
header: i.toString() + '월', header: i.toString() + '월',
name: qty, name: qty,
width: 80, width: 70,
align: 'right', align: 'right',
editor: 'text', editor: 'text',
formatter: this.numberFormatter, formatter: this.numberFormatter,
@ -500,8 +512,25 @@ export default {
pastDt: parseInt(this.fromDt) - 1, pastDt: parseInt(this.fromDt) - 1,
eqpmGrpId: this.selectValue03, eqpmGrpId: this.selectValue03,
eccId: this.selectValue01, eccId: this.selectValue01,
limit: this.limit,
page: this.page,
offset: (this.page - 1) * this.limit, // MariaDB Query에서 직접 계산이 안됨
}, },
}); });
const res2 = await this.postApiReturn({
apiKey: 'selectEnrgUsePlanPageTotal',
resKey: 'enrgUsePlanPageTotal',
sendParam: {
fromDt: this.fromDt,
pastDt: parseInt(this.fromDt) - 1,
eqpmGrpId: this.selectValue03,
eccId: this.selectValue01,
},
});
this.totalCount = res2[0].totalcount;
let fabText = this.pageData.eccIdList.filter(item => { let fabText = this.pageData.eccIdList.filter(item => {
return item.value == this.selectValue01; return item.value == this.selectValue01;
})[0]['text']; })[0]['text'];
@ -734,6 +763,12 @@ export default {
} }
} }
}, },
changeGrid: async function (pageNum, limit) {
this.page = pageNum;
this.limit = limit;
this.search();
},
}, },
}; };
const dt = new Date(); const dt = new Date();

View File

@ -281,6 +281,7 @@ const INIT_URL_STATE = {
// prgmId: "PRG0020" 배치로그 // prgmId: "PRG0020" 배치로그
selectBatchLog: 'comm/base/BatchLogCtr/selectBatchLog', // 배치 로그 selectBatchLog: 'comm/base/BatchLogCtr/selectBatchLog', // 배치 로그
selectBatchLogPageTotal: 'comm/base/BatchLogCtr/selectBatchLogPageTotal', // 배치 로그
// prgmId: "PRG0017" 검침개소 기간별 비교 // prgmId: "PRG0017" 검침개소 기간별 비교
selectSameReadPlcTime: 'ems/base/sameReadPlcCtr/selectSameReadPlcTime', selectSameReadPlcTime: 'ems/base/sameReadPlcCtr/selectSameReadPlcTime',
@ -513,6 +514,8 @@ const INIT_URL_STATE = {
// prgmId: "PRG0003" 공지사항 // prgmId: "PRG0003" 공지사항
selectPostList: 'comm/base/NoticeMngCtr/selectPostList', selectPostList: 'comm/base/NoticeMngCtr/selectPostList',
selectPostData: 'comm/base/NoticeMngCtr/selectPostData',
selectPostPageTotal: 'comm/base/NoticeMngCtr/selectPostPageTotal',
deletePostList: 'comm/base/NoticeMngCtr/deletePost', deletePostList: 'comm/base/NoticeMngCtr/deletePost',
//prgmId: "PRG0121" 공지사항 게시물 상세조회 //prgmId: "PRG0121" 공지사항 게시물 상세조회
@ -901,6 +904,8 @@ const INIT_URL_STATE = {
//prgmId: PRG0079 에너지사용량계획 //prgmId: PRG0079 에너지사용량계획
selectFabCodeList: 'ems/effc/EnrgUsePlanCtr/selectFabCodeList', selectFabCodeList: 'ems/effc/EnrgUsePlanCtr/selectFabCodeList',
selectEnrgUsePlanData: 'ems/effc/EnrgUsePlanCtr/selectEnrgUsePlanData', selectEnrgUsePlanData: 'ems/effc/EnrgUsePlanCtr/selectEnrgUsePlanData',
selectEnrgUsePlanPageTotal: 'ems/effc/EnrgUsePlanCtr/selectEnrgUsePlanPageTotal',
saveEmsEqpmMmPlanDatas: 'ems/effc/EnrgUsePlanCtr/saveEmsEqpmMmPlanDatas', saveEmsEqpmMmPlanDatas: 'ems/effc/EnrgUsePlanCtr/saveEmsEqpmMmPlanDatas',
//prgmId : PRG0080 에너지 사용량 - Total Summary //prgmId : PRG0080 에너지 사용량 - Total Summary
@ -969,4 +974,5 @@ const INIT_URL_STATE = {
selectTodayNgTopTen: 'ems/base/DashboardCtr/selectTodayNgTopTen', selectTodayNgTopTen: 'ems/base/DashboardCtr/selectTodayNgTopTen',
selectCompareEqpmTGdChart: 'ems/base/DashboardCtr/selectCompareEqpmTGdChart', selectCompareEqpmTGdChart: 'ems/base/DashboardCtr/selectCompareEqpmTGdChart',
selectIssueGdIdxData: 'ems/base/DashboardCtr/selectIssueGdIdxData', selectIssueGdIdxData: 'ems/base/DashboardCtr/selectIssueGdIdxData',
selectIssueGdIdxDataPageTotal: 'ems/base/DashboardCtr/selectIssueGdIdxDataPageTotal',
}; };