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

Merge branch 'dev' of http://218.237.212.51:30003/gitadmin/sk_fems_ui into dev-dungtv-0813

Browse Source
This commit is contained in:
Tran Van Dung/(Tran Van Dung)/현장대리인/SK
2025-08-13 11:47:03 +07:00
parent de99b30485 0760bde4e1
commit 9aa9939a43
23 changed files with 191 additions and 192 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
assets/images/SwapRight.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="15" height="14" viewBox="0 0 15 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.4369 8.15117L10.1947 5.30742C10.1538 5.25551 10.1017 5.21353 10.0423 5.18464C9.98285 5.15575 9.91764 5.14071 9.85156 5.14062H8.96562C8.87402 5.14062 8.82344 5.2459 8.87949 5.31836L10.8523 7.82031H2.57812C2.51797 7.82031 2.46875 7.86953 2.46875 7.92969V8.75C2.46875 8.81016 2.51797 8.85938 2.57812 8.85938H12.0924C12.4588 8.85938 12.6625 8.43828 12.4369 8.15117Z" fill="black" fill-opacity="0.45"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 514 B

3
assets/images/SwapRight_Dark.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="15" height="14" viewBox="0 0 15 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.4369 8.15117L10.1947 5.30742C10.1538 5.25551 10.1017 5.21353 10.0423 5.18464C9.98285 5.15575 9.91764 5.14071 9.85156 5.14062H8.96562C8.87402 5.14062 8.82344 5.2459 8.87949 5.31836L10.8523 7.82031H2.57812C2.51797 7.82031 2.46875 7.86953 2.46875 7.92969V8.75C2.46875 8.81016 2.51797 8.85938 2.57812 8.85938H12.0924C12.4588 8.85938 12.6625 8.43828 12.4369 8.15117Z" fill="white" fill-opacity="0.45"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 514 B

1
assets/scss/common.scss
View File

@ -574,6 +574,7 @@ a {
& th,
& td {
height: 48px;
color: map-deep-get($config, #{$theme}, "tui-datepicker-calendar-color");
}
}

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

@ -10,7 +10,7 @@
// 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;
border: none;
.ant-pagination-item-link {
border: none;
@ -19,13 +19,13 @@
}
.ant-pagination-item-active {
border-color: #1890ff !important;
border: 1px solid #1890ff !important;
color: #1890ff !important
}
.ant-pagination-options-size-changer {
.ant-select-selection {
border: 0.5px solid #424242;
border: 0.5px solid map-deep-get($config, #{$theme}, "v-input-fieldset-color") !important;
background: map-deep-get($config, #{$theme}, "paging-background") !important;
color: map-deep-get($config, #{$theme}, "paging-text") !important;
}

12
components/common/Datepicker.vue
View File

@ -23,14 +23,14 @@
<v-icon size="20" v-show="!isRange">$icoCalendar</v-icon>
</template> -->
<template v-slot:append>
<a-icon class="v-icon" type="calendar" style="width: 14px; height: 14px;" />
<a-icon v-show="!isRange" class="v-icon" type="calendar" style="width: 14px; height: 14px;" />
</template>
<template #append-outer>
<div ref="startpicker-container" id="startpicker-container"></div>
</template>
</v-text-field>
<div v-if="isRange" class="mx-3" :style="{ lineHeight: 0 }">
<img :src="arrowIcon" alt="">
<img :src="arrowIcon">
</div>
<v-text-field
v-show="isRange"
@ -43,7 +43,9 @@
outlined
>
<template #append>
<v-icon size="20">$icoCalendar</v-icon>
<div class="pr-1">
<a-icon class="v-icon" type="calendar" style="width: 14px; height: 14px;" />
</div>
</template>
<template #append-outer>
<div ref="endpicker-container" id="endpicker-container"></div>
@ -212,9 +214,9 @@ export default {
},
arrowIcon() {
if(this.isDarkMode){
return require('@/assets/images/arrow_datepicker_dm.png');
return require('@/assets/images/SwapRight_Dark.svg');
}
return require('@/assets/images/arrow_datepicker.png');
return require('@/assets/images/SwapRight.svg');
}
},
watch: {

97
components/common/DatepickerTopView.vue
View File

@ -5,10 +5,7 @@
<!-- <v-icon x-small :color="required ? '#fb8200' : 'primary'" class="mr-1"
>mdi-record-circle</v-icon
> -->
<v-icon
small
:class="['mr-1', required ? 'icon-orange' : 'icon-blue']"
>
<v-icon small :class="['mr-1', required ? 'icon-orange' : 'icon-blue']">
$icoBulletPoint
</v-icon>
{{ label }}
@ -16,17 +13,11 @@
</v-col>
<v-col :cols="label ? textCols : ''">
<div class="datepicker-container">
<v-text-field
id="startpicker"
ref="startpicker"
v-model="fromDtValue"
:class="isRange ? 'v-input__custom half' : 'v-input__custom'"
:hide-details="true"
readonly
outlined
>
<template #append >
<v-icon size="20" v-show="!isRange">$icoCalendar</v-icon>
<v-text-field id="startpicker" ref="startpicker" v-model="fromDtValue"
:class="isRange ? 'v-input__custom half' : 'v-input__custom'" :hide-details="true" readonly
outlined>
<template v-slot:append>
<a-icon v-show="!isRange" class="v-icon" type="calendar" style="width: 14px; height: 14px;" />
</template>
<template #append-outer>
<div ref="startpicker-container" id="startpicker-container"></div>
@ -36,18 +27,13 @@
<div v-show="isRange" class="mx-3" :style="{ lineHeight: 0 }">
<img :src="arrowIcon" alt="">
</div>
<v-text-field
v-show="isRange"
id="endpicker"
ref="endpicker"
v-model="toDtValue"
:class="isRange ? 'v-input__custom half' : 'v-input__custom'"
:hide-details="true"
readonly
outlined
>
<v-text-field v-show="isRange" id="endpicker" ref="endpicker" v-model="toDtValue"
:class="isRange ? 'v-input__custom half' : 'v-input__custom'" :hide-details="true" readonly
outlined>
<template #append>
<v-icon size="20">$icoCalendar</v-icon>
<div class="pr-1">
<a-icon class="v-icon" type="calendar" style="width: 14px; height: 14px;" />
</div>
</template>
<template #append-outer>
<div ref="endpicker-container" id="endpicker-container"></div>
@ -91,9 +77,9 @@ export default {
require: false,
default: false,
},
isRangeOption:{
type:Boolean,
require:false,
isRangeOption: {
type: Boolean,
require: false,
default: true
}
},
@ -177,21 +163,23 @@ export default {
this.myOptions.viewFormat,
);
},
toDtChange(){
toDtChange() {
return {
isCheck:this.searchParam.isCheck ,
toDt : Utility.setFormatDate(
this.searchParam.toDt,
this.myOptions.viewFormat,
)};
isCheck: this.searchParam.isCheck,
toDt: Utility.setFormatDate(
this.searchParam.toDt,
this.myOptions.viewFormat,
)
};
},
fromDtChange(){
fromDtChange() {
return {
isCheck:this.searchParam.isCheck ,
fromDt : Utility.setFormatDate(
isCheck: this.searchParam.isCheck,
fromDt: Utility.setFormatDate(
this.searchParam.fromDt,
this.myOptions.viewFormat,
)};
)
};
},
defaultRange() {
return this.searchParam.defaultRange
@ -205,10 +193,10 @@ export default {
);
},
arrowIcon() {
if(this.isDarkMode){
return require('@/assets/images/arrow_datepicker_dm.png');
if (this.isDarkMode) {
return require('@/assets/images/SwapRight_Dark.svg');
}
return require('@/assets/images/arrow_datepicker.png');
return require('@/assets/images/SwapRight.svg');
}
},
watch: {
@ -242,24 +230,24 @@ export default {
this.endDatepickerInstance.setDate(new Date(newVal));
}
},
fromDtChange:{
deep:true,
handler(){
if(this.fromDtChange.isCheck){
fromDtChange: {
deep: true,
handler() {
if (this.fromDtChange.isCheck) {
this.fromDtChanged(this.fromDtChange.fromDt);
this.setPageData({
isCheck : false
isCheck: false
})
}
}
},
toDtChange:{
deep:true,
handler(){
if(this.toDtChange.isCheck){
toDtChange: {
deep: true,
handler() {
if (this.toDtChange.isCheck) {
this.toDtChanged(this.toDtChange.toDt);
this.setPageData({
isCheck : false
isCheck: false
})
}
}
@ -370,7 +358,7 @@ export default {
if (
(myRange > rangeGap && compareDt.isAfter(defaultDt)) ||
defaultDt.format(this.myOptions.sendFormat) ===
compareDt.format(this.myOptions.sendFormat)
compareDt.format(this.myOptions.sendFormat)
) {
// if(this.cmCycleFlag){
this.setPageData({ isFind: true });
@ -400,7 +388,7 @@ export default {
if (
(myRange > rangeGap && defaultDt.isAfter(compareDt)) ||
defaultDt.format(this.myOptions.sendFormat) ===
compareDt.format(this.myOptions.sendFormat)
compareDt.format(this.myOptions.sendFormat)
) {
this.setPageData({ isFind: true });
} else {
@ -424,6 +412,7 @@ export default {
display: flex;
justify-content: space-around;
background-color: #edf4fc;
.tui-timepicker-column.tui-timepicker-colon {
color: #000 !important;
}

51
components/common/PastRsltDatePicker.vue
View File

@ -3,24 +3,18 @@
<v-col v-if="label" :cols="labelCols">
<label for="" class="search-box-label">
<v-icon small color="primary"
:class="['mr-1', required ? 'icon-orange' : 'icon-blue']"
>$icoBulletPoint</v-icon>
:class="['mr-1', required ? 'icon-orange' : 'icon-blue']">$icoBulletPoint</v-icon>
{{ label }}
</label>
</v-col>
<v-col :cols="label ? textCols : ''">
<div :class="['datepicker-container', customClass]" >
<v-text-field
id="startpicker"
ref="startpicker"
v-model="fromDtValue"
:class="isRange ? 'v-input__custom half' : 'v-input__custom'"
:hide-details="true"
readonly
outlined
>
<template #append >
<v-icon size="20" v-show="!isRange">$icoCalendar</v-icon>
<div :class="['datepicker-container', customClass]">
<v-text-field id="startpicker" ref="startpicker" v-model="fromDtValue"
:class="isRange ? 'v-input__custom half' : 'v-input__custom'" :hide-details="true" readonly
outlined>
<template #append>
<a-icon class="v-icon" v-show="!isRange" type="calendar" style="width: 14px; height: 14px;" />
<!-- <v-icon size="20" v-show="!isRange">$icoCalendar</v-icon> -->
</template>
<template #append-outer>
<div ref="startpicker-container" id="startpicker-container"></div>
@ -29,18 +23,13 @@
<div v-if="isRange" class="mx-3" :style="{ lineHeight: 0 }">
<img :src="arrowIcon" alt="">
</div>
<v-text-field
v-show="isRange"
id="endpicker"
ref="endpicker"
v-model="toDtValue"
:class="isRange ? 'v-input__custom half' : 'v-input__custom'"
:hide-details="true"
readonly
outlined
>
<v-text-field v-show="isRange" id="endpicker" ref="endpicker" v-model="toDtValue"
:class="isRange ? 'v-input__custom half' : 'v-input__custom'" :hide-details="true" readonly
outlined>
<template #append>
<v-icon size="20">$icoCalendar</v-icon>
<div class="pr-1">
<a-icon class="v-icon" type="calendar" style="width: 14px; height: 14px;" />
</div>
</template>
<template #append-outer>
<div ref="endpicker-container" id="endpicker-container"></div>
@ -98,6 +87,7 @@ export default {
searchParam(state) {
return state.pageData[this.parentPrgmId];
},
isDarkMode: "isDarkMode",
}),
myCmCycle() {
return this.searchParam.cmCycle;
@ -138,10 +128,10 @@ export default {
);
},
arrowIcon() {
if(this.isDarkMode){
return require('@/assets/images/arrow_datepicker_dm.png');
if (this.isDarkMode) {
return require('@/assets/images/SwapRight_Dark.svg');
}
return require('@/assets/images/arrow_datepicker.png');
return require('@/assets/images/SwapRight.svg');
}
},
watch: {
@ -280,7 +270,7 @@ export default {
if (
(myRange > rangeGap && compareDt.isAfter(defaultDt)) ||
defaultDt.format(this.myOptions.sendFormat) ===
compareDt.format(this.myOptions.sendFormat)
compareDt.format(this.myOptions.sendFormat)
) {
// if(this.cmCycleFlag){
this.setPageData({ isFind: true });
@ -310,7 +300,7 @@ export default {
if (
(myRange > rangeGap && defaultDt.isAfter(compareDt)) ||
defaultDt.format(this.myOptions.sendFormat) ===
compareDt.format(this.myOptions.sendFormat)
compareDt.format(this.myOptions.sendFormat)
) {
this.setPageData({ isFind: true });
} else {
@ -334,6 +324,7 @@ export default {
display: flex;
justify-content: space-around;
background-color: #edf4fc;
.tui-timepicker-column.tui-timepicker-colon {
color: #000 !important;
}

11
components/common/chartoptions/GaugeChart.js
View File

@ -2,15 +2,13 @@
export default function getGaugeChartOption({ title, min = 0, max = 160, unit = '%', isDarkMode = false, backgroundRadius = 97 }) {
const colorRanges = isDarkMode
? [
[0.375, '#49AA19'], // Dark Green
// [0.5, '#B8860B'], // Dark Yellow
[0.625, '#D89614'], // Dark Orange
[60 / 160, '#49AA19'], // Dark Green
[100 / 160, '#D89614'], // Dark Orange
[1, '#D32029'], // Dark Red
]
: [
[0.375, '#52C41A'], // Light Green
// [0.5, '#FFD700'], // Light Yellow
[0.625, '#FAAD14'], // Light Orange
[60 / 160, '#52C41A'], // Light Green
[100 / 160, '#FAAD14'], // Light Orange
[1, '#F5222D'], // Light Red
];
// Old color range
@ -56,6 +54,7 @@ export default function getGaugeChartOption({ title, min = 0, max = 160, unit =
endAngle: -45,
min: min,
max: max,
splitNumber: 8,
// progress: {
// show: true,
// width: 15,

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

@ -34,6 +34,8 @@ export default function getLineChartOption({
legend: {
// data: legendData,
icon: 'circle',
itemWidth: 15, // Width of the legend icon
itemHeight: 15,
top: '0%',
right: '5%',
orient: 'horizontal',

10
components/common/modal/ElecPowChrgPop.vue
View File

@ -17,20 +17,24 @@
{{ item.label }}
</label>
</v-col>
<v-col :cols="label ? item.textCols : ''">
<v-col :cols="label ? item.textCols : ''" class="py-0">
<!-- <v-col :cols="label ? 9 : ''"> -->
<!-- :value="textfield" -->
<v-text-field
readonly
v-model="selectValue"
append-icon="mdi-magnify"
class="v-input__custom"
@click="dialog = !dialog"
outlined
:hide-details="true"
:disabled="item.disabled || false"
:required="item.required || false"
></v-text-field>
>
<template v-slot:append>
<!-- Custom SVG icon -->
<v-icon>$icoSearch</v-icon>
</template>
</v-text-field>
</v-col>
<!-- <v-row justify="center"> -->

2
components/common/modal/ReadPlcPop.vue
View File

@ -1,5 +1,5 @@
<template>
<v-row class="search-box" align="center">
<v-row class="search-box" align="center" no-gutters>
<!-- <v-col v-if="label" cols="2"> -->
<v-col v-if="item.label" :cols="item.labelCols" class="py-0">
<label for="" class="search-box-label">

5
components/pages/ems/EccInfo/EccIaoTab.vue
View File

@ -380,7 +380,7 @@ const myDetail = [
label: '대상 유형',
disabled: false,
cols: 6,
class: 'pr-4',
class: 'pr-4 py-2',
list: 'emMapDivList',
valueNm: 'objKind',
itemText: 'commCdNm',
@ -395,7 +395,7 @@ const myDetail = [
type: 'ReadPlcPop',
label: '대상 항목',
valueNm: 'objId',
disabled: false,
disabled: true,
cols: 6,
class: 'pl-4 py-2',
required: true,
@ -482,7 +482,6 @@ const myDetail = [
disabledFg: 'objKind',
labelCols: 12,
textCols: 12,
iconShow: true,
},
{
type: 'InputText',

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

@ -21,9 +21,9 @@
</v-col>
</v-row>
<!-- Create the line between date picker and form -->
<v-row class="my-5" no-gutters>
<v-row class="mt-6 mb-7" no-gutters>
<v-col>
<div style="height: 1px; background-color: #ccc;"></div>
<div style="height: 1px; background-color: #0000000F;"></div>
</v-col>
</v-row>
<v-row class="search-box" align="center" no-gutters style="height: 44px;">
@ -43,7 +43,7 @@
<div
ref="gridParent"
class="w100"
style="height: calc((100vh - 600px) / 2);"
style="height: calc((100vh - 500px) / 2);"
>
<Grid
:ref="gridName"
@ -57,7 +57,7 @@
</div>
</v-col>
</v-row>
<v-row class="search-box" align="center" no-gutters style="height: 44px;">
<v-row class="search-box mt-2" align="center" no-gutters style="height: 44px;">
<v-col :cols="4">
<label for="" class="search-box-label">
<!-- <v-icon x-small color="primary" class="mr-1"
@ -77,7 +77,7 @@
<div
ref="chartParent"
class="h100 w100"
style="height: calc((100vh - 600px) / 2 - 30px);"
style="height: calc((100vh - 500px) / 2);"
>
<component
class="w100 h100"

11
pages/comm/auth/UserRoleMngPage.vue
View File

@ -947,17 +947,6 @@ const asgnRoleByUserColumns = [
];
const asgnMenuByUserColumns = [
{
header: '',
name: '',
align: 'center',
width: 50,
formatter: (props) => {
return `<label class="custom-radio">
<span class="radio-mark"></span>
</label>`;
}
},
{ header: '메뉴명', name: 'menuNm' }];
const myDetail = blocCdList => {

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

@ -1196,7 +1196,8 @@ export default {
show: false,
},
left: "22%",
radius: ["50%", "80%"], // Bigger inner and outer radius
bottom: "23",
radius: ["67%", "97%"], // Bigger inner and outer radius
center: ["60%", "50%"], // Shift chart slightly right to make room for legend
itemStyle: {
borderColor: "#fff", // Color of the gap
@ -1272,7 +1273,10 @@ export default {
top: "middle",
type: "scroll",
orient: "vertical",
left: "left",
left: "20",
icon: 'rect',
itemWidth: 15, // Width of the legend icon
itemHeight: 15,
textStyle: {
color: this.isDarkMode ? "#fff" : "#333333",
},

2
pages/ems/base/EnrgReadPlaceMngPage.vue
View File

@ -63,7 +63,7 @@
<v-tabs-items v-model="tab" style="height: calc(100% - 65px);" class="pt-6 py-2">
<v-tab-item v-for="(item, idx) in items" :key="item.id">
<component v-if="item.id == 'readPlcBaseInfoTab'" :is="'Form'" :parentPrgmId="myPrgmId"
:detailList="detailList" :bindingData="gridName"
:detailList="f" :bindingData="gridName"
@gridEditingFinish="gridEditingFinish" />
<ReadPlcAddInfoTab v-if="item.id == 'readPlcAddInfoTab'" :parentPrgmId="myPrgmId"
:innerTabGridInfo="{ tab, idx }" />

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

@ -835,7 +835,7 @@ const myDetail = [
labelCols: 12,
textCols: 12,
iconShow: true,
class: 'py-2 pr-4',
class: 'py-3 pr-4',
required: false,
placeholder: '시스템 자동입력',
},
@ -848,7 +848,7 @@ const myDetail = [
labelCols: 12,
textCols: 12,
iconShow: true,
class: 'py-2 pl-4',
class: 'py-3 pl-4',
required: true,
},
{
@ -860,7 +860,7 @@ const myDetail = [
labelCols: 12,
textCols: 12,
iconShow: true,
class: 'py-2 pr-4',
class: 'py-3 pr-4 mt-2',
list: 'ercKindList',
itemText: 'commCdNm',
itemValue: 'commCd',
@ -875,7 +875,7 @@ const myDetail = [
labelCols: 12,
textCols: 12,
iconShow: true,
class: 'py-2 pl-4',
class: 'py-3 pl-4 mt-2',
list: 'readObjList',
itemText: 'readObjNm',
itemValue: 'readObjId',
@ -890,7 +890,7 @@ const myDetail = [
labelCols: 12,
textCols: 12,
iconShow: true,
class: 'py-2 pr-4',
class: 'py-3 pr-4 mt-2',
list: 'chrgKindList',
itemText: 'commCdNm',
itemValue: 'commCd',
@ -905,7 +905,7 @@ const myDetail = [
labelCols: 12,
textCols: 12,
iconShow: true,
class: 'py-2 pl-4',
class: 'py-3 pl-4 mt-2',
},
{
type: 'InputText',
@ -916,7 +916,7 @@ const myDetail = [
labelCols: 12,
textCols: 12,
iconShow: true,
class: 'py-2 pr-4',
class: 'py-3 pr-4 mt-2',
},
{
@ -928,7 +928,7 @@ const myDetail = [
labelCols: 12,
textCols: 12,
iconShow: true,
class: 'py-2 pl-4',
class: 'py-3 pl-4 mt-2',
list: 'blocMstrList',
itemText: 'blocNm',
itemValue: 'blocId',
@ -944,7 +944,7 @@ const myDetail = [
textCols: 12,
iconShow: true,
// class: 'py-2',
class: 'pb-0 mb-0 pr-4',
class: 'pb-0 mb-0 pr-4 mt-2',
disableContent: true,
},
{
@ -956,7 +956,7 @@ const myDetail = [
labelCols: 12,
textCols: 12,
iconShow: true,
class: 'py-2 pl-4',
class: 'pb-0 mb-0 pl-4 mt-2',
},
{
type: 'InputText',
@ -981,7 +981,7 @@ const myDetail = [
disabled: false,
cols: 6,
iconShow: true,
class: 'py-2 pr-4',
class: 'py-3 pr-4 mt-2',
value: { '1': true, '0': false },
},
{
@ -991,7 +991,7 @@ const myDetail = [
disabled: false,
cols: 6,
iconShow: true,
class: 'py-2 pl-4',
class: 'py-3 pl-4 mt-2',
value: { '1': true, '0': false },
required: true,
},

22
pages/ems/base/PastRsltDataReadPage.vue
View File

@ -12,7 +12,7 @@
</v-col>
<v-col :cols="3">
<component :is="'EvtObjPop'" :parentPrgmId="myPrgmId" :item="evtObjPopItem"
customClass="select-large" />
class="no-gutters" customClass="select-large" />
</v-col>
<v-col :cols="3">
<!-- 대상일 -->
@ -29,17 +29,18 @@
</v-col>
</v-row>
<v-row ref="contents">
<v-col :cols="12" style="height: 100%" class="h100">
<v-card class="px-5 py-5 h100">
<div ref="gridParent" class="h100 px-5" style="height: 100%">
<v-col :cols="12" class="h100">
<v-card class="px-5 py-5">
<div ref="gridParent" class="px-5" style="height:calc(100% - 40px)">
<component ref="myGrid" :is="loadGrid ? 'Grid' : null" :gridName="gridName"
:parentPrgmId="myPrgmId" />
</div>
<div class="d-flex align-center justify-space-between">
<pagination id="pagination" :total-count="totalCount" :page-num="page" :limit="limit"
@loadData="changeGrid" />
</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-col>
</v-row>
</div>
@ -61,7 +62,7 @@ import BtnExcelDownload from '~/components/common/button/BtnExcelDownload';
import DateUtility from '~/plugins/dateUtility';
// import Search from "~/components/common/search";
import EvtObjPop from '~/components/common/modal/EvtObjPop';
import pagination from '~/components/Pagination';
import pagination from '~/components/common/Pagination';
let myTitle;
// const myPrgmId = "PRG0052";
@ -212,7 +213,7 @@ export default {
},
layoutInit() {
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) `;
},
async setFromDt() {
this.pageData.fromDt = Utility.setBeforetDate(
@ -220,7 +221,6 @@ export default {
this.pageData.toDt,
'YYYYMMDD',
);
// this.pageData.toDt = Utility.setAftertDate(this.pageData, this.pageData.fromDt, "YYYYMMDD");
},
gridInit() {
this.loadGrid = false;

69
pages/ems/base/ReadResultCloseMngPage.vue
View File

@ -100,6 +100,10 @@
:gridName="gridName"
/>
</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-col>
</v-row>
@ -117,6 +121,7 @@ import selectCodeList from "@/components/common/select/selectCodeList";
import SelectMttList from "@/components/common/select/SelectMttList";
import Datepicker from "~/components/common/Datepicker";
import BtnExcelDownload from "~/components/common/button/BtnExcelDownload";
import pagination from '~/components/common/Pagination';
let myTitle;
// const myPrgmId = "PRG0018";
@ -144,27 +149,18 @@ export default {
Datepicker,
Search,
Grid,
pagination,
},
data() {
return {
myPrgmId: myPrgmId,
gridName: "rowGrid",
loadGrid: false,
dataPathMock: {
rowGrid: {
column: [
{ header: "태그", name: "id", headerAlign: "left" },
{ header: "배율", name: "lable", headerAlign: "left" },
{ header: "설비비", name: "type", headerAlign: "left" },
{ header: "설비배분비율", name: "note", headerAlign: "left" },
{ header: "금일데이터", name: "note", headerAlign: "left" },
{ header: "최종마감시각", name: "date", headerAlign: "left" },
],
data: dataPathDataExample,
defaultRow: dataPathDataExample,
option: {},
},
},
itemsPerPage: 10,
itemsPerPageArray: [10, 20, 30],
limit: 20,
page: 1,
totalCount: 0,
};
},
computed: {
@ -190,7 +186,10 @@ export default {
},
watch: {
chkIsFind(val) {
if (val) this.search();
if (val) {
this.page = 1;
this.search();
}
},
chkBlocId() {
this.setPageData({ isFind: true });
@ -243,10 +242,6 @@ export default {
columnOptions: {
resizable: true,
},
pageOptions: {
useClient: true,
perPage: 13,
},
};
this.setGridOption({
gridKey: this.gridName,
@ -261,6 +256,8 @@ export default {
await this.getRowGridData();
},
async getRowGridData() {
this.loadGrid = false;
if (
this.pageData.blocMstrList.length > 0 &&
this.pageData.commCdList.length > 0 &&
@ -274,8 +271,25 @@ export default {
mttCd: this.pageData.commCd, // 검침대상유형
mttTp: this.pageData.readObjId, // 검침대상
readDt: this.pageData.fromDt, // 조회기간
limit: this.limit,
page: this.page,
offset: (this.page - 1) * this.limit, // MariaDB Query에서 직접 계산이 안됨
},
});
const res2 = await this.postApiReturn({
apiKey: 'selectReadResultCloseMngPageTotal',
resKey: 'cdKindPageTotal',
sendParam: {
blocId: this.pageData.blocMstrList[this.pageData.blocId].blocId, // 사업장
mttCd: this.pageData.commCd, // 검침대상유형
mttTp: this.pageData.readObjId, // 검침대상
readDt: this.pageData.fromDt, // 조회기간
},
});
this.totalCount = res2[0].totalcount;
this.setGridData({
gridKey: this.gridName,
value: res.map((item) => ({
@ -325,6 +339,12 @@ export default {
this.setPageData({ isFind: true });
}
},
changeGrid: async function (pageNum, limit) {
this.page = pageNum;
this.limit = limit;
this.search();
},
},
};
@ -431,13 +451,4 @@ const myColumns = [
},
},
];
import { getPathDataExample } from "@/const/const";
const dataPathDataExample = getPathDataExample({
id: "INCHEON.HVAC.EQP_HT_CH001.UT_CH101.CHI_AMP_1A_PV",
lable: "INCHEON 고온 냉동기 101호기 - 호로1",
type: "사용",
note: "-",
date: "2023-01-10 20:02:00",
});
</script>

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

@ -154,14 +154,15 @@
</v-row>
<v-row class="pa-1" style="height: 52%; width: 100%">
<v-card class="pa-1" style="height: 100%; width: 100%; overflow: hidden">
<div style="height: 25%">
<v-card-title class="d-flex align-center justify-space-between pa-5">
<div style="height: 15%">
<v-card-title class="d-flex align-center justify-space-between pl-3">
<span class="tit ft-size_20 ft-weight_600">가이드 알람정보</span>
</v-card-title>
</div>
<div
ref="gridParent01"
style="height: 75%; overflow: hidden; margin-top: 15px"
class="pl-3 mt-5"
style="height: 75%; overflow: hidden;"
>
<component
:ref="gridName01"
@ -177,12 +178,12 @@
<v-row style="height: 100%">
<v-col :cols="5" class="">
<v-card class="pa-1" style="height: 100%; width: 100%">
<div style="height: 25%">
<v-card-title class="d-flex align-center justify-space-between pa-5">
<div style="height: 15%">
<v-card-title class="d-flex align-center justify-space-between pl-3">
<span class="tit ft-size_20 ft-weight_600">설비 상세 정보</span>
</v-card-title>
</div>
<div ref="gridParent02" style="height: 75%">
<div ref="gridParent02" style="height: 75%" class="pl-3 mt-5">
<component
:ref="gridName02"
:is="loadGrid02 ? 'Grid' : null"

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

@ -47,13 +47,14 @@
<v-row ref="contents" style="overflow: auto">
<v-col>
<div v-for="(value, key, index) in contentData" :key="'key1_' + index">
<v-card-title class="d-flex align-center justify-space-between pa-3">
<span class="tit ft-size_20 ft-weight_600">{{ value.eqpmGrpNm }}</span>
</v-card-title>
<v-card style="background: none">
<v-card-title class="d-flex align-center justify-space-between pa-3">
<span class="tit ft-size_20 ft-weight_600">{{ value.eqpmGrpNm }}</span>
</v-card-title>
</v-card>
<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"
@ -125,8 +126,7 @@
</div>
</v-col>
</div>
</v-card>
</v-card>
</v-col>
</v-row>
</div>

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

@ -105,8 +105,7 @@
:gridName="gridName"
:parentPrgmId="myPrgmId"
/>
<div class="pagination-wrapper">
<div v-if="loadGrid && totalCount > 0" class="pagination-wrapper">
<pagination
id="pagination"
:total-count="totalCount"
@ -201,7 +200,7 @@ export default {
gridName: "grid01",
enrgUseMainIdxDesc: [],
itemsPerPageArray: [10, 20, 30],
itemsPerPageArray: [10, 20, 50],
limit: 10,
page: 1,
totalCount: 0,

2
store/modules/list.js
View File

@ -210,6 +210,8 @@ const INIT_URL_STATE = {
// prgmId: "TMP0013" 검침실적마감관리 ems/ReadResultCloseMngPage
selectReadResultCloseMng:
'ems/base/ReadResultCloseMngCtr/selectReadResultCloseMng', // 일일검침정보
selectReadResultCloseMngPageTotal:
'ems/base/ReadResultCloseMngCtr/selectReadResultCloseMngPageTotal', // 일일검침정보
saveReadResultCloseMngSP:
'ems/base/ReadResultCloseMngCtr/saveReadResultCloseMngSP', // 전월 or 일 마감
saveReadResultCloseMngSPMM: