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

Add pagination + fix bugs tooltip + fix bugs line chart

Browse Source
This commit is contained in:
Michael
2025-08-11 11:55:32 +09:00
parent d22b09cc47
commit f666110a1a
9 changed files with 245 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
assets/scss/common.scss
View File

@ -9,6 +9,7 @@
@import "./common/card.scss";
@import "./common/tabs.scss";
@import "./common/numericInput.scss";
@import "./common/pagination.scss";
@import "./common/editor.scss";

43
assets/scss/common/pagination.scss Normal file
View File

@ -0,0 +1,43 @@
@each $theme in dark, light {
// @include theme($theme);
.v-application.#{$theme}-mode {
.ant-pagination-item,
.ant-pagination-prev,
.ant-pagination-next {
// border: none !important;
// box-shadow: none !important;
background-color: map-deep-get($config, #{$theme}, "paging-background") !important;
color: map-deep-get($config, #{$theme}, "paging-text") !important;
border: 0.5px solid #424242;
.ant-pagination-item-link {
border: none;
background-color: map-deep-get($config, #{$theme}, "paging-background") !important;
}
}
.ant-pagination-item-active {
border-color: #1890ff !important;
color: #1890ff !important
}
.ant-pagination-options-size-changer {
.ant-select-selection {
border: 0.5px solid #424242;
background: map-deep-get($config, #{$theme}, "paging-background") !important;
color: map-deep-get($config, #{$theme}, "paging-text") !important;
}
.ant-select-arrow {
color: map-deep-get($config, #{$theme}, "paging-text") !important;
}
.ant-select-selection__rendered {
margin-right: 30px;
}
}
}
}

4
assets/scss/var.scss
View File

@ -182,6 +182,8 @@ $config: (
ant-btn-popup-bg: #212224,
ant-btn-popup-color: #FFFFFFD9,
ant-btn-popup-border: #424242,
paging-background: #212224,
paging-text: #FFFFFFD9
),
light: (w-g5: $--color-gray_555,
g5-w: $--color-white,
@ -327,5 +329,7 @@ $config: (
ant-btn-popup-bg: #FFFFFF,
ant-btn-popup-color: #000000E0,
ant-btn-popup-border: #D9D9D9,
paging-background: #FFFFFF,
paging-text: #000000E0
),
);

93
components/common/Pagination.vue Normal file
View File

@ -0,0 +1,93 @@
<template>
<div class="custom-pagination">
<a-pagination
:current="pageNum"
:total="totalCount"
:page-size="itemsPerPage"
:show-size-changer="useLimit"
:page-size-options="itemsPerPageArray.map(String)"
@change="handlePageChange"
@showSizeChange="changePageLeng"
/>
</div>
</template>
<script>
export default {
props: {
useLimit: {
type: Boolean,
default: true,
},
totalCount: {
type: Number,
default: 0,
},
pageNum: {
type: Number,
default: 0,
},
limit: {
type: Number,
default: 0,
},
itemsPerPageArray: {
type: Array,
default: () => [20, 50, 100],
},
},
data() {
return {
moveToPage: '',
};
},
computed: {
page: function() {
return this.numberOfPages + '-' + this.lastPage;
},
lastPage: function() {
//grid data가 없을 경우 1 리턴
if (this.totalCount == 0) return 1;
let pageLength = Math.floor(this.totalCount / this.itemsPerPage);
if (this.totalCount % this.itemsPerPage > 0) {
pageLength++;
}
return pageLength;
},
itemsPerPage: function() {
return this.limit;
},
numberOfPages: function() {
return Number(this.pageNum);
},
plusPage: function() {
return Number(this.pageNum) + 1;
},
minusPage: function() {
return Number(this.pageNum) - 1;
},
},
watch: {
totalCount: function(newData) {
return (this.moveToPage = newData > 0 ? this.moveToPage : '');
},
moveToPage: function() {
return (this.moveToPage = this.moveToPage.replaceAll(/[^0-9]/g, ''));
},
},
methods: {
handlePageChange(newPage) {
// Emit an event to the parent to load data for the selected page
this.$emit('loadData', newPage, this.itemsPerPage);
},
changePageLeng: function(current, newLimit) {
//부모 컴포넌트에서 loadData(데이터 조회) 구현
//this.$emit('loadData', this.pageNum, limit);
// limit 변경 시 1 페이지로 초기화
this.$emit('loadData', 1, newLimit);
},
},
};
</script>

1
components/common/chartoptions/LineChart.js
View File

@ -70,6 +70,7 @@ export default function getLineChartOption({
},
splitLine: {
lineStyle: {
type: 'dashed', // Options: 'solid', 'dashed', 'dotted'
color: isDarkMode ? '#444444' : '#EEEEEE',
},
},

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

@ -52,6 +52,8 @@
</v-card-title>
<v-row>
<v-col :cols="3" v-for="(item, i) in value.chartData" :key="'key2_' + i">
<v-card>
<div
class="v-box"
style="height: 330px; position: relative"
@ -73,7 +75,7 @@
<!-- Information area -->
<v-col :cols="5" style="height: 100%">
<div style="height: 10%">
<strong style="font-size: 20px; font-weight: 600">{{
<strong class="v-card v-card__title pa-0" >{{
item.fabNm
}}</strong>
</div>
@ -123,6 +125,8 @@
</div>
</v-col>
</div>
</v-card>
</v-col>
</v-row>
</div>

135
pages/ems/effc/EqpmIndMntrPage.vue
View File

@ -97,14 +97,25 @@
<v-card-title class="d-flex align-center justify-space-between pa-5">
<span class="tit ft-size_20 ft-weight_600">설비별 현황 리스트</span>
</v-card-title>
<div class="px-5" style="height: calc(100% - 106px)">
<div ref="gridParent" class="w100 h100">
<div class="px-5" style="height: calc(100% - 56px)">
<div ref="gridParent" class="w100 h100" style="height: calc(100% - 166px)">
<component
:ref="gridName"
:is="loadGrid ? 'Grid' : null"
:gridName="gridName"
:parentPrgmId="myPrgmId"
/>
<div class="pagination-wrapper">
<pagination
id="pagination"
:total-count="totalCount"
:page-num="page"
:limit="limit"
:itemsPerPageArray="itemsPerPageArray"
@loadData="changeGrid"
/>
</div>
<!--
<component
:ref="gridName"
@ -142,6 +153,7 @@ import SelectBox from "@/components/common/select/SelectBox";
import SelectCmCycle from "@/components/common/select/SelectCmCycle";
import DatePicker from "@/components/common/Datepicker";
import Grid from "~/components/common/Grid";
import pagination from "~/components/common/Pagination";
let myTitle;
let myPrgmId;
@ -168,6 +180,7 @@ export default {
SelectCmCycle,
DatePicker,
Grid,
pagination,
},
data() {
return {
@ -188,6 +201,11 @@ export default {
gridName: "grid01",
enrgUseMainIdxDesc: [],
itemsPerPage: 10,
itemsPerPageArray: [10, 20, 30],
limit: 10,
page: 1,
totalCount: 0,
// tooltipData: {
// show: false,
@ -263,6 +281,11 @@ export default {
this.chkOpenTabList({ key: "destroy", prgmId: myPrgmId });
},
methods: {
changeGrid: async function (pageNum, limit) {
this.page = pageNum;
this.limit = limit;
this.search();
},
async init() {
await this.getSelectValueList();
await this.setQueryParams();
@ -367,50 +390,54 @@ export default {
const _this = this;
// 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;
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();
}
}
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();
}
}
var columnList = [
{ header: "NO", name: "no", align: "right", width: 80 },
{ header: "fabId", name: "fabId", hidden: true },
{ header: "FAB", name: "fabNm", align: "left" },
{ header: "eqpmGrpId", name: "eqpmGrpId", hidden: true },
{ header: "설비그룹", name: "eqpmGrpNm", align: "left", width: 200,
{
header: "설비그룹",
name: "eqpmGrpNm",
align: "left",
width: 200,
// Render custom button to switch page instead of double click on row
renderer: {
type: CustomButton,
options: {
value: '보기',
value: "보기",
onClick: (rowKey) => {
const gridInstance = this.$refs[this.gridName].gridInstance;
const eventRowData = gridInstance.invoke("getRow", rowKey);
@ -434,9 +461,9 @@ export default {
key: key,
},
});
}
}
}
},
},
},
},
{ header: "eqpmId", name: "eqpmId", hidden: true },
{ header: "설비명", name: "eqpmNm", align: "left", width: 200 },
@ -546,10 +573,10 @@ export default {
},
],
},
pageOptions: {
useClient: true,
perPage: 3,
}
// pageOptions: {
// useClient: true,
// perPage: 3,
// }
};
this.setGridOption({
@ -566,26 +593,39 @@ export default {
this.loadGrid = false;
this.enrgUseMainIdxDesc = [];
var apiKey = null;
var apiKey2 = null;
var params = {
fabId: this.selectValue01,
eqpmKindId: this.selectValue02,
eqpmGrpId: this.selectValue03,
fromDt: this.pageData.fromDt,
limit: this.limit,
page: this.page,
offset: (this.page - 1) * this.limit, // MariaDB Query에서 직접 계산이 안됨
};
if (this.pageData.cmCycle == "CYC_DAY") {
params["fromDtMm"] = String(this.pageData.fromDt).substring(0, 6);
apiKey = "selectDailyEnrgUseMainIdx";
apiKey2 = "selectDailyEnrgUseMainIdxPageTotal";
} else if (this.pageData.cmCycle == "CYC_MONTH") {
apiKey = "selectMonthlyEnrgUseMainIdx";
apiKey2 = "selectMonthlyEnrgUseMainIdxPageTotal";
}
var res = await this.postApiReturn({
apiKey: apiKey,
resKey: "eqpmIndMntrData",
sendParam: params,
});
var res2 = await this.postApiReturn({
apiKey: apiKey2,
resKey: "eqpmIndMntrPageTotal",
sendParam: params,
});
this.totalCount = res2[0].totalcount;
this.enrgUseMainIdxDesc = await this.postApiReturn({
apiKey: "selectEnrgUseMainIdxDesc",
resKey: "eqpmIndMntrData",
@ -654,7 +694,7 @@ export default {
// id값 설정
elementList[i].id = "tooltipTargetElement_" + i;
tooltipElement.id = "tooltipElement_" + i;
tooltipElement.classList.add(this.isDarkmode ? "dark-mode" : "light-mode");
// element 추가
elementList[i].append(tooltipElement);
}
@ -849,5 +889,12 @@ function numberFormatter({ value }) {
overflow-y: visible;
}
}
.pagination-wrapper {
display: flex;
justify-content: center;
align-items: center;
padding: 12px 0;
}
}
</style>

3
plugins/ant-design-vue.js
View File

@ -1,6 +1,6 @@
import Vue from "vue";
// import Antd from "ant-design-vue";
import { Row, Col, Card, Button, Checkbox, DatePicker, Select, Table, Modal, Input, Icon, Divider } from "ant-design-vue";
import { Row, Col, Card, Button, Checkbox, DatePicker, Select, Table, Modal, Input, Icon, Divider, Pagination } from "ant-design-vue";
import 'ant-design-vue/dist/antd.css'
// import { RangePicker } from "ant-design-vue/types/date-picker/range-picker";
@ -17,4 +17,5 @@ Vue.component(Modal.name, Modal)
Vue.component(Input.name, Input)
Vue.component(Icon.name, Icon)
Vue.component(Divider.name, Divider)
Vue.component(Pagination.name, Pagination)
// Vue.component(RangePicker.name, RangePicker)

5
store/modules/list.js
View File

@ -910,6 +910,11 @@ const INIT_URL_STATE = {
'ems/effc/eqpmIndMntrCtr/selectDailyEnrgUseMainIdx',
selectMonthlyEnrgUseMainIdx:
'ems/effc/eqpmIndMntrCtr/selectMonthlyEnrgUseMainIdx',
selectDailyEnrgUseMainIdxPageTotal:
'ems/effc/eqpmIndMntrCtr/selectDailyEnrgUseMainIdxPageTotal',
selectMonthlyEnrgUseMainIdxPageTotal:
'ems/effc/eqpmIndMntrCtr/selectMonthlyEnrgUseMainIdxPageTotal',
//prgmId : PRG0082 에너지 사용량 - 설비상세 모니터링
selectDailyEnrgUseMainGuideIdx: