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

Merge pull request 'Add paging and button view detail for S1 dashboard + Fix bugs 156 163' (#68) from dev-nghiantt-fix-bugs into dev

Browse Source 
Reviewed-on: #68
This commit is contained in:
dev
2025-08-15 10:10:47 +09:00
parent 6353ffba57 81a20d2851
commit be1e0426e0
6 changed files with 180 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
assets/scss/common/pagination.scss
View File

@ -2,6 +2,13 @@
// @include theme($theme);
.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-prev,

9
components/pages/ems/ErcChrgInfo/ErcChrgInfoTab.vue
View File

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

111
pages/ems/base/DashboardPage.vue
View File

@ -512,7 +512,7 @@
<v-col cols="12" sm="12" xl="12" style="height: 300px">
<v-card style="border-radius: 4px" class="pb-5">
<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">
<component
:is="loadGrid ? 'Grid' : null"
@ -521,6 +521,16 @@
:ref="gridName"
@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>
</v-card>
@ -539,6 +549,7 @@ import DateUtility from "~/plugins/dateUtility";
import Utility from "~/plugins/utility";
import Grid from "~/components/common/Grid";
import Chart from "~/components/common/Chart";
import pagination from "~/components/common/Pagination";
import AntCard from "~/components/common/card/AntCard";
@ -579,7 +590,8 @@ export default {
Chart,
UnusedStatPopPage,
EtcStatPopPage,
PageTitle
PageTitle,
pagination
},
computed: {
...mapState({
@ -697,6 +709,10 @@ export default {
gridName: "dashBoard_grid_01",
loadGrid: false,
itemsPerPageArray: [10, 20, 50],
limit: 10,
page: 1,
totalCount: 0,
isGridLoading: true,
};
},
@ -735,6 +751,11 @@ export default {
}
this.timer = setInterval(this.search, 90000); //15분 주기마다 갱신
},
changeGrid: async function (pageNum, limit) {
this.page = pageNum;
this.limit = limit;
await this.getGridData();
},
async search() {
await new Promise((resolve) => setTimeout(resolve, 1500));
if (this.$router.currentRoute.fullPath == this.myHome.root) {
@ -756,6 +777,41 @@ export default {
// gridHeight = gridHeight*0.9
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 = {
// scrollX: false,
setScroll: true,
@ -840,7 +896,42 @@ export default {
{ header: "주의", name: "careStndVal", align: "right", width: 40 },
{ header: "경고", name: "warnStndVal", 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: "eqpmKindNm", align: "left", hidden: true },
];
@ -855,11 +946,21 @@ export default {
},
async getGridData() {
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({
apiKey: "selectIssueGdIdxData",
resKey: "issueGdIdxData",
sendParam: {},
sendParam: {
limit: this.limit,
page: this.page,
offset: (this.page - 1) * this.limit,
},
});
// let fakeData = [
// {

113
pages/ems/base/EnrgResourceCenterMngPage.vue
View File

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

6
pages/ems/effc/EnrgUseEqpmDetlMntrPage.vue
View File

@ -152,16 +152,16 @@
</div>
</div>
</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">
<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>
</v-card-title>
</div>
<div
ref="gridParent01"
class="pl-3 mt-5"
class="pl-3 mt-3"
style="height: 75%; overflow: hidden;"
>
<component

1
store/modules/list.js
View File

@ -970,4 +970,5 @@ const INIT_URL_STATE = {
selectTodayNgTopTen: 'ems/base/DashboardCtr/selectTodayNgTopTen',
selectCompareEqpmTGdChart: 'ems/base/DashboardCtr/selectCompareEqpmTGdChart',
selectIssueGdIdxData: 'ems/base/DashboardCtr/selectIssueGdIdxData',
selectIssueGdIdxDataPageTotal: 'ems/base/DashboardCtr/selectIssueGdIdxDataPageTotal',
};