Add pagination + fix bugs tooltip + fix bugs line chart
This commit is contained in:
Michael
@ -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>
|
||||
|
||||
Reference in New Issue
Block a user