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

update screen 32 vs 2

Browse Source
This commit is contained in:
Nguyen Van Luan/(Nguyen Van Luan)/현장대리인/SK
2025-07-31 17:43:45 +09:00
parent 3c249aa476 f9643f46a0
commit e4074201e4
21 changed files with 607 additions and 1073 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
assets/scss/common.scss
View File

@ -434,7 +434,7 @@ a {
.v-application.#{$theme}-mode { .v-application.#{$theme}-mode {
min-width: 1000px; min-width: 1000px;
.head-logo{ .head-logo {
gap: 8px; gap: 8px;
} }
@ -485,6 +485,7 @@ a {
.container--fluid { .container--fluid {
background-color: map-deep-get($config, #{$theme}, "container-fluid"); background-color: map-deep-get($config, #{$theme}, "container-fluid");
.menu-container { .menu-container {
height:calc(100vh - 60px); height:calc(100vh - 60px);
overflow-y: auto; overflow-y: auto;
@ -951,15 +952,24 @@ a {
"v-calendar-weekday-backgroundColor" "v-calendar-weekday-backgroundColor"
); );
border-right: 1px solid map-deep-get($config, #{$theme}, "v-calendar-weekday-border-color"); border-right: 1px solid map-deep-get($config, #{$theme}, "v-calendar-weekday-border-color");
border-bottom: 1px solid map-deep-get($config, #{$theme}, "v-calendar-weekday-border-color");
border-top: 1px solid map-deep-get($config, #{$theme}, "v-calendar-weekday-border-color");
color: map-deep-get($config, #{$theme}, "v-calendar-weekday-color"); color: map-deep-get($config, #{$theme}, "v-calendar-weekday-color");
&:nth-of-type(1) { &:nth-of-type(1) {
color: map-deep-get($color, "week", "sun"); // color: map-deep-get($config,
// #{$theme},
// "v-calendar-is-sun"
// );
border-left: 1px solid map-deep-get($config, #{$theme}, "v-calendar-weekday-border-color");
} }
&:nth-of-type(7) { // &:nth-of-type(7) {
color: map-deep-get($color, "week", "sat"); // color: map-deep-get($config,
} // #{$theme},
// "v-calendar-is-sat"
// );
// }
} }
>.vc-day { >.vc-day {
@ -968,22 +978,33 @@ a {
.day-hldyNm, .day-hldyNm,
.day-label.is-holiday { .day-label.is-holiday {
color: map-deep-get($color, "week", "sun"); color: map-deep-get($config,
#{$theme},
"v-calendar-is-sun"
);
} }
&.weekday-1 { &.weekday-1 {
.day-label, .day-label,
.day-hldyNm { .day-hldyNm {
color: map-deep-get($color, "week", "sun"); color: map-deep-get($config,
#{$theme},
"v-calendar-is-sun"
);
} }
border-left: 1px solid map-deep-get($config, #{$theme}, "v-calendar-weekday-border-color");
} }
&.weekday-7 { &.weekday-7 {
.day-label, .day-label,
.day-hldyNm { .day-hldyNm {
color: map-deep-get($color, "week", "sat"); color: map-deep-get($config,
#{$theme},
"v-calendar-is-sat"
);
} }
} }
@ -1185,11 +1206,17 @@ a {
} }
th.tui-sun { th.tui-sun {
color: map-deep-get($color, "week", "sun"); color: map-deep-get($config,
#{$theme},
"v-calendar-is-sun"
);
} }
th.tui-sat { th.tui-sat {
color: map-deep-get($color, "week", "sat"); color: map-deep-get($config,
#{$theme},
"v-calendar-is-sat"
);
} }
} }
@ -1205,11 +1232,17 @@ a {
} }
td.tui-calendar-sun { td.tui-calendar-sun {
color: map-deep-get($color, "week", "sun"); color: map-deep-get($config,
#{$theme},
"v-calendar-is-sun"
);
} }
td.tui-calendar-sat { td.tui-calendar-sat {
color: map-deep-get($color, "week", "sat"); color: map-deep-get($config,
#{$theme},
"v-calendar-is-sat"
);
} }
} }
} }
@ -1323,6 +1356,7 @@ a {
color: #46c0ff; color: #46c0ff;
} }
} }
.v-btn { .v-btn {
background-color: transparent !important; background-color: transparent !important;
color: map-deep-get($config, #{$theme}, "btn-header-select-color") !important; color: map-deep-get($config, #{$theme}, "btn-header-select-color") !important;

63
assets/scss/common/grid.scss
View File

@ -109,6 +109,15 @@
); );
} }
.grid-toggle-section{
.tui-grid-rside-area{
.tui-grid-body-area {
height: auto !important;
}
}
}
.tui-grid { .tui-grid {
&-table { &-table {
border: 1px solid; border: 1px solid;
@ -134,11 +143,11 @@
} }
&-body-container{ &-body-container{
border-right: 1px solid; border-right: 0;
border-right-color: map-deep-get($config, // border-right-color: map-deep-get($config,
#{$theme}, // #{$theme},
"tui-grid-cell-borderColor" // "tui-grid-cell-borderColor"
); // );
width: auto !important; width: auto !important;
} }
@ -151,24 +160,27 @@
width: $scrollbar-width !important; width: $scrollbar-width !important;
height: $scrollbar-width !important; height: $scrollbar-width !important;
-webkit-appearance: initial; -webkit-appearance: initial;
background-color: map-deep-get($config, // background-color: map-deep-get($config,
#{$theme}, // #{$theme},
"scrollbar-track" // "tui-grid-cell-borderColor"
) !important; // ) !important;
background-color: rgba(0, 0, 0, 0) !important;
border-radius: 3px !important; border-radius: 3px !important;
} }
& ::-webkit-scrollbar-track { & ::-webkit-scrollbar-track {
background-color: map-deep-get($config, // background-color: map-deep-get($config,
#{$theme}, // #{$theme},
"scrollbar-track" // "tui-grid-cell-borderColor"
) !important; // ) !important;
background-color: rgba(0, 0, 0, 0) !important;
} }
& ::-webkit-scrollbar-thumb { & ::-webkit-scrollbar-thumb {
width: 50px !important; width: 50px !important;
height: 50px !important; height: 50px !important;
background-color: map-deep-get($config, #{$theme}, "scrollbar-thumb"); background-color: map-deep-get($config, #{$theme}, "scrollbar-thumb");
// background-color: rgba(0, 0, 0, 0);
border-radius: 3px; border-radius: 3px;
} }
@ -195,6 +207,7 @@
&-scrollbar-right-top { &-scrollbar-right-top {
background-color: rgba(0, 0, 0, 0); background-color: rgba(0, 0, 0, 0);
border: none; border: none;
display: none;
// background-color: map-deep-get( // background-color: map-deep-get(
// $config, // $config,
// #{$theme}, // #{$theme},
@ -221,12 +234,13 @@
width: $scrollbar-width !important; width: $scrollbar-width !important;
height: $scrollbar-width !important; height: $scrollbar-width !important;
// display: none !important; // display: none !important;
border-color: map-deep-get($config, #{$theme}, "scrollbar-track"); border-color: map-deep-get($config, #{$theme}, "cardBackground");
background-color: map-deep-get($config, #{$theme}, "scrollbar-track"); background-color: map-deep-get($config, #{$theme}, "cardBackground");
// border: none !important; // border: none !important;
// bottom: -1px; // bottom: -1px;
// right: -2px; // right: -2px;
box-sizing: border-box; box-sizing: border-box;
// display: none;
} }
&-scrollbar-frozen-border, &-scrollbar-frozen-border,
@ -236,13 +250,9 @@
border-color: transparent !important; border-color: transparent !important;
} }
// &-body-area { &-body-area,
// overflow: auto !important;
// }
&-container, &-container,
&-layer-state, &-layer-state,
&-body-area,
&-summary-area, &-summary-area,
&-cell { &-cell {
background-color: map-deep-get($config, background-color: map-deep-get($config,
@ -277,8 +287,8 @@
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
height: 11px; height: 8px;
width: 11px; width: 8px;
border-radius: 50%; border-radius: 50%;
background-color: map-deep-get($config, background-color: map-deep-get($config,
#{$theme}, #{$theme},
@ -315,8 +325,8 @@
&-header-area, &-header-area,
&-cell-header { &-cell-header {
// font-family: inherit; // font-family: inherit;
// font-style: Semi Bold;
font-weight: 600; font-weight: 600;
font-style: Semi Bold;
background-color: map-deep-get($config, background-color: map-deep-get($config,
#{$theme}, #{$theme},
"tui-grid-header-backgroundColor" "tui-grid-header-backgroundColor"
@ -333,8 +343,13 @@
} }
&-header-area { &-header-area {
background-color: none; // background-color: none;
border: none; border: none;
margin-right: 0 !important;
background-color: map-deep-get($config,
#{$theme},
"tui-grid-cell-backgroundColor"
);
} }
&-row-odd, &-row-odd,

12
assets/scss/common/input.scss
View File

@ -171,8 +171,8 @@
align-items: center; align-items: center;
cursor: pointer; cursor: pointer;
position: relative; position: relative;
padding-left: 28px; padding-left: 0;
margin: 10px; margin: 5px;
font-size: 16px; font-size: 16px;
} }
.custom-radio input[type="radio"] { .custom-radio input[type="radio"] {
@ -183,13 +183,13 @@
/* Custom radio appearance */ /* Custom radio appearance */
.radio-mark { .radio-mark {
position: absolute; position: absolute;
left: 0; left: -8px;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
height: 18px; height: 14px;
width: 18px; width: 14px;
// background-color: white; // background-color: white;
border: 2px solid #ccc; border: 1px solid #ccc;
border-radius: 50%; border-radius: 50%;
transition: all 0.2s ease; transition: all 0.2s ease;
} }

34
assets/scss/var.scss
View File

@ -32,8 +32,8 @@ $color: (
"black": ("0": #000, "black": ("0": #000,
"1": #111), "1": #111),
"white": ("0": #fff), "white": ("0": #fff),
"week": ("sun": #fb5a83, "week": ("sun": #FF4D4F,
"sat": #2d8cf6) "sat": #597EF7)
); );
$config: ( $config: (
@ -96,17 +96,19 @@ $config: (
v-input-disabled-backgroundColor:rgba(255, 255, 255, 0.08), v-input-disabled-backgroundColor:rgba(255, 255, 255, 0.08),
v-input-disabled-color: rgba(255, 255, 255, 0.5), v-input-disabled-color: rgba(255, 255, 255, 0.5),
v-select-label-color: rgba(255, 255, 255, 0.85), v-select-label-color: rgba(255, 255, 255, 0.85),
v-calendar-weekday-backgroundColor: #383f5d, v-calendar-weekday-backgroundColor: #FFFFFF0A,
v-calendar-weekday-color: #fff, v-calendar-weekday-color: #FFFFFFD9,
v-calendar-weekday-border-color: rgba(255, 255, 255, 0.1), v-calendar-weekday-border-color: #FFFFFF0F,
v-calendar-day-color: #fff, v-calendar-day-color: #FFFFFFD9,
v-calendar-day-in-not-month-color: rgba(255, 255, 255, 0.05), v-calendar-day-in-not-month-color: #FFFFFF14,
v-calendar-is-today-background-color: #2d4571, v-calendar-is-today-background-color: #0A224F,
v-calendar-is-sat: #263EA0,
v-calendar-is-sun:#A61D24,
tui-grid-title-color: #FFFFFFD9, tui-grid-title-color: #FFFFFFD9,
tui-grid-header-backgroundColor: #2a2b2d, tui-grid-header-backgroundColor: #2a2b2d,
tui-grid-header-color: #FFFFFFD9, tui-grid-header-color: #FFFFFFD9,
tui-grid-border-horziontal-color: #212224, tui-grid-border-horziontal-color: #212224,
tui-grid-border-vertical-color: #212224, tui-grid-border-vertical-color: #FFFFFF0F,
tui-grid-cell-backgroundColor: #212224, tui-grid-cell-backgroundColor: #212224,
tui-grid-cell-color: #fff, tui-grid-cell-color: #fff,
tui-grid-cell-insert-color: #13636c, tui-grid-cell-insert-color: #13636c,
@ -236,12 +238,14 @@ $config: (
v-input-disabled-backgroundColor: rgba(0, 0, 0, 0.04), v-input-disabled-backgroundColor: rgba(0, 0, 0, 0.04),
v-input-disabled-color: rgba(0, 0, 0, 0.25), v-input-disabled-color: rgba(0, 0, 0, 0.25),
v-select-label-color: rgba(0, 0, 0, 0.88), v-select-label-color: rgba(0, 0, 0, 0.88),
v-calendar-weekday-backgroundColor: #e0e0e0, v-calendar-weekday-backgroundColor: #00000005,
v-calendar-weekday-color: #111, v-calendar-weekday-color: #000000E0,
v-calendar-weekday-border-color: #d4d4d4, v-calendar-weekday-border-color: #0000000F,
v-calendar-day-color: #111, v-calendar-day-color: #000000E0,
v-calendar-day-in-not-month-color: #f8f8f8, v-calendar-day-in-not-month-color: #0000000A,
v-calendar-is-today-background-color: #e3eaf3, v-calendar-is-today-background-color: #E6F4FF,
v-calendar-is-sat: #597EF7,
v-calendar-is-sun:#FF4D4F,
tui-grid-title-color: #000000E0, tui-grid-title-color: #000000E0,
tui-grid-header-backgroundColor: #fafafa, //#e0e0e0, tui-grid-header-backgroundColor: #fafafa, //#e0e0e0,
tui-grid-header-color: rgba(0, 0, 0, 0.88), tui-grid-header-color: rgba(0, 0, 0, 0.88),

96
components/common/Calendar.vue
View File

@ -3,45 +3,28 @@
<div class="custom-vc-calender-title text-center" v-if="headerVisible"> <div class="custom-vc-calender-title text-center" v-if="headerVisible">
<span>{{ selectedYear }}년 {{ selectedMonth }}월</span> <span>{{ selectedYear }}년 {{ selectedMonth }}월</span>
</div> </div>
<vc-calendar <vc-calendar locale="ko-KR" ref="myCalendar" :attributes="calendarAttributes" class="custom-calendar">
ref="myCalendar"
:attributes="calendarAttributes"
class="custom-calendar"
>
<!-- disable-page-swipe <!-- disable-page-swipe
is-expanded --> is-expanded -->
<template v-slot:day-content="{ day, attributes }"> <template v-slot:day-content="{ day, attributes }">
<div class="plusButton" style="overflow:auto"> <div class="plusButton" style="overflow:auto">
<!-- <p class="plusButton mr-1" >+</p> --> <!-- <p class="plusButton mr-1" >+</p> -->
<span <span :class="['day-label', { 'is-holiday': hldyValues(day.day) }]"
:class="['day-label', { 'is-holiday': hldyValues(day.day) }]" @click="addPlan(day.year, day.month, day.day)">{{ day.day }}</span>
@click="addPlan(day.year, day.month, day.day)"
>{{ day.day }}</span
>
<span v-for="attr in attributes" :key="attr.key" class="day-hldyNm"> <span v-for="attr in attributes" :key="attr.key" class="day-hldyNm">
{{ attr.customData.title }} {{ attr.customData.title }}
</span> </span>
<div class=""> <div class="">
<p <p v-for="attr in attributes" :key="attr.key" :class="attr.customData.planColor"
v-for="attr in attributes" @click="updatePlan(attr.customData.planSeq)">
:key="attr.key"
:class="attr.customData.planColor"
@click="updatePlan(attr.customData.planSeq)"
>
{{ attr.customData.planTitle }} {{ attr.customData.planTitle }}
</p> </p>
</div> </div>
</div> </div>
</template> </template>
</vc-calendar> </vc-calendar>
<component <component ref="planPop" :is="'PlanPop'" v-show="false" :detailList="detailList" :label="planLabel"
ref="planPop" :parentPrgmId="parentPrgmId" />
:is="'PlanPop'"
v-show="false"
:detailList="detailList"
:label="planLabel"
:parentPrgmId="parentPrgmId"
/>
</div> </div>
</template> </template>
<script> <script>
@ -63,6 +46,10 @@ export default {
type: Boolean, type: Boolean,
default: true, default: true,
}, },
showTitle: {
type: Boolean,
default: false,
},
}, },
computed: { computed: {
...mapState({ ...mapState({
@ -166,15 +153,14 @@ export default {
this.$refs['planPop'].strtDt = ''; this.$refs['planPop'].strtDt = '';
this.$refs['planPop'].endDt = ''; this.$refs['planPop'].endDt = '';
this.$refs['planPop'].addPlanData = { this.$refs['planPop'].addPlanData = {
year : year, year: year,
month : month, month: month,
day : day day: day
} }
// BEGIN TEST UI
// this.$refs['planPop'].blocId = this.pageData.blocMstrList[ this.$refs['planPop'].blocId = this.pageData.blocMstrList[
// this.pageData.blocId this.pageData.blocId
// ].blocId; ].blocId;
// END TEST UI
this.$refs['planPop'].dialog = true; this.$refs['planPop'].dialog = true;
}, },
updatePlan(val) { updatePlan(val) {
@ -188,7 +174,7 @@ export default {
this.$refs['planPop'].dialog = true; this.$refs['planPop'].dialog = true;
}, },
}, },
mounted() {}, mounted() { },
}; };
const myDetail = []; const myDetail = [];
</script> </script>
@ -196,36 +182,44 @@ const myDetail = [];
<style lang="scss" scoped> <style lang="scss" scoped>
@import '@/assets/scss/var.scss'; @import '@/assets/scss/var.scss';
@import '@/assets/scss/mixin.scss'; @import '@/assets/scss/mixin.scss';
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 0px; width: 0px;
} }
::-webkit-scrollbar-track { ::-webkit-scrollbar-track {
display: none; display: none;
} }
.custom-vc-calender { .custom-vc-calender {
&-title { &-title {
margin-bottom: 20px; margin-bottom: 20px;
} }
} }
::v-deep { ::v-deep {
.custom-calendar.vc-container { .custom-calendar.vc-container {
width: 100%; width: 100%;
background-color: transparent; background-color: transparent;
border: 0; border: 0;
} }
.vc-header, .vc-header,
.vc-arrows-container { .vc-arrows-container {
display: none; display: none;
} }
.vc-weeks { .vc-weeks {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
align-items: center; align-items: center;
padding: 0; padding: 0;
> div {
>div {
flex: 1 0 calc(100% / 7); flex: 1 0 calc(100% / 7);
} }
} }
.vc-weekday { .vc-weekday {
display: flex; display: flex;
align-items: center; align-items: center;
@ -233,6 +227,7 @@ const myDetail = [];
height: 36px; height: 36px;
padding: 0; padding: 0;
} }
.vc-day { .vc-day {
height: 10.889vh; height: 10.889vh;
min-height: auto; min-height: auto;
@ -241,6 +236,7 @@ const myDetail = [];
font-size: 1rem; font-size: 1rem;
line-height: 1.235; line-height: 1.235;
} }
.day-hldyNm { .day-hldyNm {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -251,25 +247,27 @@ const myDetail = [];
font-size: 10pt; font-size: 10pt;
} }
> div { >div {
position: relative; position: relative;
height: 100%; height: 100%;
padding: 10px; padding: 10px;
border-radius: 0 !important; border-radius: 0 !important;
} }
} }
.vc-day.is-not-in-month { .vc-day.is-not-in-month {
* { * {
opacity: 1 !important; opacity: 1 !important;
} }
} }
.plusButton:hover > span:first-child {
.plusButton:hover>span:first-child {
font-weight: bolder; font-weight: bolder;
cursor: pointer; cursor: pointer;
} }
.red { .red {
//background-color: rgba(229,62,62,var(--bg-opacity)); background-color: #FF4D4F !important;
background-color: #e53e3e !important;
color: #fff; color: #fff;
border-radius: 0.125rem; border-radius: 0.125rem;
font-size: 0.75rem; font-size: 0.75rem;
@ -277,9 +275,9 @@ const myDetail = [];
text-align: left; text-align: left;
margin-bottom: 0.25rem; margin-bottom: 0.25rem;
} }
.blue { .blue {
//background-color: rgba(66,153,225,var(--bg-opacity)); background-color: #597EF7 !important;
background-color: #4299e1 !important;
color: #fff; color: #fff;
border-radius: 0.125rem; border-radius: 0.125rem;
font-size: 0.75rem; font-size: 0.75rem;
@ -287,9 +285,9 @@ const myDetail = [];
text-align: left; text-align: left;
margin-bottom: 0.25rem; margin-bottom: 0.25rem;
} }
.puple { .puple {
//background-color: rgba(102,126,234,var(--bg-opacity)); background-color: #9254DE !important;
background-color: #667eea !important;
color: #fff; color: #fff;
border-radius: 0.125rem; border-radius: 0.125rem;
font-size: 0.75rem; font-size: 0.75rem;
@ -297,9 +295,9 @@ const myDetail = [];
text-align: left; text-align: left;
margin-bottom: 0.25rem; margin-bottom: 0.25rem;
} }
.green { .green {
//background-color: rgba(56,178,172,var(--bg-opacity)); background-color: #73D13D !important;
background-color: #38b2ac !important;
color: #fff; color: #fff;
border-radius: 0.125rem; border-radius: 0.125rem;
font-size: 0.75rem; font-size: 0.75rem;
@ -308,9 +306,9 @@ const myDetail = [];
margin-bottom: 0.25rem; margin-bottom: 0.25rem;
width: 90%; width: 90%;
} }
.orange { .orange {
//background-color: rgba(237,137,54,var(--bg-opacity)); background-color: #FFA940 !important;
background-color: #ed8936 !important;
color: #fff; color: #fff;
border-radius: 0.125rem; border-radius: 0.125rem;
font-size: 0.75rem; font-size: 0.75rem;
@ -318,9 +316,9 @@ const myDetail = [];
text-align: left; text-align: left;
margin-bottom: 0.25rem; margin-bottom: 0.25rem;
} }
.pink { .pink {
//background-color: rgba(237,100,166,var(--bg-opacity)); background-color: #F759AB !important;
background-color: #ed64a6 !important;
color: #fff; color: #fff;
border-radius: 0.125rem; border-radius: 0.125rem;
font-size: 0.75rem; font-size: 0.75rem;
@ -328,8 +326,8 @@ const myDetail = [];
text-align: left; text-align: left;
margin-bottom: 0.25rem; margin-bottom: 0.25rem;
} }
.grey { .grey {
background-color: #6d6d6d;
color: #fff; color: #fff;
border-radius: 0.125rem; border-radius: 0.125rem;
font-size: 0.75rem; font-size: 0.75rem;

4
components/common/button/ActionButtons.vue
View File

@ -3,7 +3,7 @@
<!--<v-btn icon tile :ripple="false" @click="btnActionsFnc('addLeftToRight')"> <!--<v-btn icon tile :ripple="false" @click="btnActionsFnc('addLeftToRight')">
<v-icon>mdi-chevron-right</v-icon> <v-icon>mdi-chevron-right</v-icon>
</v-btn> --> </v-btn> -->
<a-button @click="btnActionsFnc('addLeftToRight')" type="primary" ghost icon="up" > <a-button @click="btnActionsFnc('removeRightToLeft')" type="primary" ghost icon="up" >
</a-button> </a-button>
<!--<v-btn <!--<v-btn
@ -15,7 +15,7 @@
> >
<v-icon>mdi-chevron-left</v-icon> <v-icon>mdi-chevron-left</v-icon>
</v-btn> --> </v-btn> -->
<a-button @click="btnActionsFnc('removeRightToLeft')" type="primary" ghost icon="down"> <a-button @click="btnActionsFnc('addLeftToRight')" type="primary" ghost icon="down">
</a-button> </a-button>
</div> </div>
</template> </template>

71
components/common/modal/EgrpPysclQtyPop.vue
View File

@ -22,6 +22,7 @@
<span class="custom-title-4">{{ option.modalTitle }}</span> <span class="custom-title-4">{{ option.modalTitle }}</span>
<a-button icon="close" type="text" @click="dialogOpenCloseEvent(dialog)"></a-button> <a-button icon="close" type="text" @click="dialogOpenCloseEvent(dialog)"></a-button>
</v-card-title> </v-card-title>
<div class="px-6 py-4 pt-0"> <div class="px-6 py-4 pt-0">
<v-row align="center"> <v-row align="center">
<v-col :cols="5"> <v-col :cols="5">
@ -58,24 +59,32 @@
</v-col> </v-col>
</v-row> </v-row>
</v-col> </v-col>
</v-row> <v-col :cols="12">
<div style="height: 50vh;">
</div> <div ref="modalGridParent" class="h100 py-4">
<div :style="'height: calc(50vh)'">
<div ref="modalGridParent" class="h100 px-6 py-4">
<component :is="loadGrid && dialog ? 'Grid' : null" :gridName="grid_01" <component :is="loadGrid && dialog ? 'Grid' : null" :gridName="grid_01"
:dataPath="searchParam.pyscModalData.egrpPysclQtyPop" :parentPrgmId="parentPrgmId" :dataPath="searchParam.pyscModalData.egrpPysclQtyPop" :parentPrgmId="parentPrgmId"
@getRowsData="getRowData" @dblClick="setUpdate($event)" /> @getRowsData="getRowData" @dblClick="setUpdate($event)" />
</div> </div>
</div> </div>
</v-col>
</v-row>
</div>
<!-- <div style="height: 50vh;">
<div ref="modalGridParent" class="h100 px-6 py-4">
<component :is="loadGrid && dialog ? 'Grid' : null" :gridName="grid_01"
:dataPath="searchParam.pyscModalData.egrpPysclQtyPop" :parentPrgmId="parentPrgmId"
@getRowsData="getRowData" @dblClick="setUpdate($event)" />
</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)" <a-button :ripple="false" @click="dialogOpenCloseEvent(dialog)" class="mr-2">닫기</a-button>
class="mr-2">닫기</a-button>
<a-button v-if="item.closeBtnFg || false" :ripple="false" type="danger" ghost danger <a-button v-if="item.closeBtnFg || false" :ripple="false" type="danger" ghost danger
@click="deleteBtnAction($event)" class="mr-2">삭제</a-button> @click="deleteBtnAction($event)" class="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>
</v-dialog> </v-dialog>
@ -147,23 +156,7 @@ export default {
return { return {
dialog: false, dialog: false,
loadGrid: true, loadGrid: false,
dataPathPopExample: {
"rowGrid": {
data: [
{
'calcProc': 'AVG_CNT2',
'argCnt': '2',
'calcDesc': '두개 변수에 대한 평균'
}
],
column: [
{ header: '계산코드', name: 'calcProc', width: 150 },
{ header: '아규먼트갯수', name: 'argCnt', align: 'center', width: 100 },
]
}
},
grid_01: 'grid_01', grid_01: 'grid_01',
myModalKey: 'egrpPysclQtyPop', myModalKey: 'egrpPysclQtyPop',
modalDataKey: 'pyscModalData', modalDataKey: 'pyscModalData',
@ -328,13 +321,6 @@ export default {
this.selectValueList01 = []; this.selectValueList01 = [];
this.selectValue01 = null; this.selectValue01 = null;
} }
// this.selectValueList01 = [
// { label: '냉동기고온', value: '냉동기고온' },
// { label: '냉동기저온', value: '냉동기저온' },
// { label: '공조기', value: '공조기' },
// { label: '보일러', value: '보일러' }
// ];
}, },
search() { search() {
this.getGridData(); this.getGridData();
@ -356,7 +342,7 @@ export default {
modalDataKey: this.modalDataKey, modalDataKey: this.modalDataKey,
value: Object.assign( value: Object.assign(
// Utility.defaultGridOption(this.$refs.modalGridParent.offsetHeight - 60, myOptions), // Utility.defaultGridOption(this.$refs.modalGridParent.offsetHeight - 60, myOptions),
// Utility.defaultGridOption(100, myOptions), Utility.defaultGridOption(400, myOptions),
myOptions, myOptions,
), ),
}); });
@ -414,6 +400,15 @@ export default {
} }
} }
// res = [
// {
// 'pysclQtyId' : 'PYSCL00001',
// 'pysclQtyCd' : 'AMP_1A',
// 'pysclQtyNm' : '회로1 전류A',
// 'pysclQtyTpNm' : 'TAG'
// }
// ]
this.setModalGridData({ this.setModalGridData({
modalKey: this.myModalKey, modalKey: this.myModalKey,
gridKey: this.grid_01, gridKey: this.grid_01,
@ -468,10 +463,10 @@ export default {
this.dialog = flag; this.dialog = flag;
}, },
async dialogOpenCloseEvent(val) { async dialogOpenCloseEvent(val) {
// await this.setSelectValueList01(); await this.setSelectValueList01();
// if (!this.myBindingData) { if (!this.myBindingData) {
// return alert('그리드를 먼저 선택해주세요.'); return alert('그리드를 먼저 선택해주세요.');
// } }
this.dialog = !val; this.dialog = !val;
}, },
deleteBtnAction(v) { deleteBtnAction(v) {

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

@ -5,7 +5,7 @@
<v-icon <v-icon
v-if="iconShow" v-if="iconShow"
small small
:class="['mr-1', required ? 'icon-orange' : 'icon-blue']" :class="['mr-1', item.required ? 'icon-orange' : 'icon-blue']"
>$icoBulletPoint</v-icon >$icoBulletPoint</v-icon
> >
{{ option.labelContent }} {{ option.labelContent }}

108
components/common/modal/PlanPop.vue
View File

@ -43,7 +43,10 @@
</v-col> </v-col>
<v-col :cols="6" class="py-0 pl-2"> <v-col :cols="6" class="py-0 pl-2">
<!-- <DatePicker v-model="strtDt" :parentPrgmId="parentPrgmId"/> --> <!-- <DatePicker v-model="strtDt" :parentPrgmId="parentPrgmId"/> -->
<div class="startpicker-container2"> <component :parentPrgmId="parentPrgmId" :is="'SelectBoxTime'" ref="SelectBox1"
:propsValue="selectTimeValue1" :itemList="selectTimeValueList1" :minInterval="selectBoxTimeItemList.minInterval ? selectBoxTimeItemList.minInterval : 1
" @update:propsValue="selectTimeValue1 = $event" />
<!-- <div class="startpicker-container2">
<v-text-field id="startpicker2" ref="startpicker2" v-model="strtDt" <v-text-field id="startpicker2" ref="startpicker2" v-model="strtDt"
:class="'v-input__custom'" :hide-details="true" readonly outlined> :class="'v-input__custom'" :hide-details="true" readonly outlined>
<template #append> <template #append>
@ -53,7 +56,7 @@
<div ref="startpicker-container2" id="startpicker-container2"></div> <div ref="startpicker-container2" id="startpicker-container2"></div>
</template> </template>
</v-text-field> </v-text-field>
</div> </div> -->
</v-col> </v-col>
<!-- <v-col :cols="2"> <!-- <v-col :cols="2">
<vue-numeric-input v-model="strtHh" :min="0" :max="23" controls-type="updown" <vue-numeric-input v-model="strtHh" :min="0" :max="23" controls-type="updown"
@ -91,17 +94,9 @@
</div> </div>
</v-col> </v-col>
<v-col :cols="6" class="pl-2"> <v-col :cols="6" class="pl-2">
<div class="startpicker-container3"> <component :parentPrgmId="parentPrgmId" :is="'SelectBoxTime'" ref="SelectBox2"
<v-text-field id="startpicker3" ref="startpicker3" v-model="endDt" :propsValue="selectTimeValue2" :itemList="selectTimeValueList2" :minInterval="selectBoxTimeItemList.minInterval ? selectBoxTimeItemList.minInterval : 1
:class="'v-input__custom'" :hide-details="true" readonly outlined> " @update:propsValue="selectTimeValue2 = $event" />
<template #append>
<v-icon size="20">$icoCalendar</v-icon>
</template>
<template #append-outer>
<div ref="startpicker-container3" id="startpicker-container3"></div>
</template>
</v-text-field>
</div>
</v-col> </v-col>
<!-- <v-col :cols="2"> <!-- <v-col :cols="2">
<vue-numeric-input v-model="endHh" :min="0" :max="23" controls-type="updown" <vue-numeric-input v-model="endHh" :min="0" :max="23" controls-type="updown"
@ -186,10 +181,11 @@
</div> </div>
</template> </template>
<v-card-actions class="justify-end"> <v-card-actions class="justify-end">
<a-button :ripple="false" @click="btnAction('save')" class="mr-2">저장</a-button> <a-button :ripple="false" @click="btnAction('close')" class="mr-2">닫기</a-button>
<a-button type="primary" :ripple="false" @click="btnAction('save')" class="mr-2">저장</a-button>
<a-button v-show="popUpAction === 'update'" type="danger" ghost danger :ripple="false" <a-button v-show="popUpAction === 'update'" type="danger" ghost danger :ripple="false"
@click="btnAction('delete')" class="mr-2">삭제</a-button> @click="btnAction('delete')">삭제</a-button>
<a-button :ripple="false" type="primary" @click="btnAction('close')" class="mr-2">닫기</a-button>
</v-card-actions> </v-card-actions>
</v-card> </v-card>
</v-dialog> </v-dialog>
@ -210,6 +206,7 @@ import DatePicker from '~/components/common/Datepicker';
import mixinGlobal from '@/mixin/global.js'; import mixinGlobal from '@/mixin/global.js';
import Utility from '~/plugins/utility'; import Utility from '~/plugins/utility';
import TuiDatepicker from 'tui-date-picker'; import TuiDatepicker from 'tui-date-picker';
import SelectBoxTime from "@/components/common/select/SelectBoxTime";
export default { export default {
mixins: [mixinGlobal], mixins: [mixinGlobal],
@ -237,6 +234,13 @@ export default {
type: String, type: String,
require: false, require: false,
}, },
selectBoxTimeItemList: {
type: Object,
require: false,
default: () => {
return {};
},
},
}, },
components: { components: {
InputText, InputText,
@ -250,6 +254,7 @@ export default {
Utility, Utility,
TuiDatepicker, TuiDatepicker,
VueNumericInput, VueNumericInput,
SelectBoxTime,
}, },
data() { data() {
return { return {
@ -272,7 +277,23 @@ export default {
planSeq: '', planSeq: '',
blocId: '', blocId: '',
addPlanData: { addPlanData: {
} },
selectTimeValue1:
this.selectBoxTimeItemList.selectTimeValue1 != undefined
? this.selectBoxTimeItemList.selectTimeValue1
: null, // selectBoxTime에 필요한 prop
selectTimeValueList1:
this.selectBoxTimeItemList.selectTimeValueList1 != undefined
? this.selectBoxTimeItemList.selectTimeValueList1
: [], // selectBoxTime에 필요한 prop
selectTimeValue2:
this.selectBoxTimeItemList.selectTimeValue2 != undefined
? this.selectBoxTimeItemList.selectTimeValue2
: null, // selectBoxTime에 필요한 prop
selectTimeValueList2:
this.selectBoxTimeItemList.selectTimeValueList2 != undefined
? this.selectBoxTimeItemList.selectTimeValueList2
: [], // selectBoxTime에 필요한 prop
}; };
}, },
computed: { computed: {
@ -310,7 +331,11 @@ export default {
} }
}, },
strtHh(val) { strtHh(val) {
// console.log('strtHh : ', val);
// const [hh, mm] = selectTimeValue1.split(':');
// console.log(`Hours: ${hh}, Minutes: ${mm}`);
console.log('strtHh : ', val);
this.checkStrtAndEndDateTime('start'); this.checkStrtAndEndDateTime('start');
}, },
endHh(val) { endHh(val) {
@ -323,6 +348,12 @@ export default {
endMm(val) { endMm(val) {
this.checkStrtAndEndDateTime('end'); this.checkStrtAndEndDateTime('end');
}, },
selectTimeValue1(val) {
this.setPageData({ selectTimeValue1: val });
},
selectTimeValue2(val) {
this.setPageData({ selectTimeValue2: val });
}
}, },
methods: { methods: {
...mapMutations({ ...mapMutations({
@ -505,10 +536,8 @@ export default {
let returnData = res[0]; let returnData = res[0];
this.strtDt = Utility.setFormatDate(returnData.strtDt, 'YYYY-MM-DD'); this.strtDt = Utility.setFormatDate(returnData.strtDt, 'YYYY-MM-DD');
this.endDt = Utility.setFormatDate(returnData.endDt, 'YYYY-MM-DD'); this.endDt = Utility.setFormatDate(returnData.endDt, 'YYYY-MM-DD');
this.strtHh = returnData.strtHh; this.selectTimeValue1 = returnData.strtHh+' : '+ returnData.strtMm;
this.strtMm = returnData.strtMm; this.selectTimeValue2 = returnData.endHh+' : '+ returnData.endMm;
this.endHh = returnData.endHh;
this.endMm = returnData.endMm;
this.planTitle = returnData.planTitle; this.planTitle = returnData.planTitle;
this.planCntn = returnData.planCntn; this.planCntn = returnData.planCntn;
this.planColor = returnData.planColor; this.planColor = returnData.planColor;
@ -525,10 +554,8 @@ export default {
if ( if (
this.strtDt === '' || this.strtDt === '' ||
this.endDt === '' || this.endDt === '' ||
this.strtHh === '' || this.selectTimeValue1 === '' ||
this.strtMm === '' || this.selectTimeValue2 === '' ||
this.endHh === '' ||
this.endMm === '' ||
this.planTitle === '' || this.planTitle === '' ||
this.planCntn === '' || this.planCntn === '' ||
this.planColor === '' this.planColor === ''
@ -542,10 +569,8 @@ export default {
if ( if (
this.strtDt == '' || this.strtDt == '' ||
this.endDt == '' || this.endDt == '' ||
this.strtHh == '' || this.selectTimeValue1 === '' ||
this.strtMm == '' || this.selectTimeValue2 === '' ||
this.endHh == '' ||
this.endMm == '' ||
this.planTitle == '' || this.planTitle == '' ||
this.planCntn == '' || this.planCntn == '' ||
this.planColor == '' this.planColor == ''
@ -565,13 +590,17 @@ export default {
//console.log(this); //console.log(this);
}, },
async insertDetail() { async insertDetail() {
const [strtHh, strtMm] = this.selectTimeValue1 ? this.selectTimeValue1.split(':') : '00:00'.split(':');
const [endHh, endMm] = this.selectTimeValue2 ? this.selectTimeValue2.split(':') : '01:00'.split(':');
var params = { var params = {
strtDt: this.strtDt, strtDt: this.strtDt,
endDt: this.endDt, endDt: this.endDt,
strtHh: this.strtHh.toString(), strtHh: strtHh.trim().toString(),
strtMm: this.strtMm.toString(), strtMm: strtMm.trim().toString(),
endHh: this.endHh.toString(), endHh: endHh.trim().toString(),
endMm: this.endMm.toString(), endMm: endMm.trim().toString(),
blocId: this.blocId, blocId: this.blocId,
planTitle: this.planTitle, planTitle: this.planTitle,
planCntn: this.planCntn, planCntn: this.planCntn,
@ -592,13 +621,16 @@ export default {
}); });
}, },
async updateDetail() { async updateDetail() {
const [strtHh, strtMm] = this.selectTimeValue1 ? this.selectTimeValue1.split(':') : '00:00'.split(':');
const [endHh, endMm] = this.selectTimeValue2 ? this.selectTimeValue2.split(':') : '01:00'.split(':');
var params = { var params = {
strtDt: this.strtDt.substr(0, 10), strtDt: this.strtDt.substr(0, 10),
endDt: this.endDt.substr(0, 10), endDt: this.endDt.substr(0, 10),
strtHh: this.strtHh.toString(), strtHh: strtHh.trim().toString(),
strtMm: this.strtMm.toString(), strtMm: strtMm.trim().toString(),
endHh: this.endHh.toString(), endHh: endHh.trim().toString(),
endMm: this.endMm.toString(), endMm: endMm.trim().toString(),
planTitle: this.planTitle, planTitle: this.planTitle,
planCntn: this.planCntn, planCntn: this.planCntn,
planColor: this.planColor, planColor: this.planColor,

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

@ -268,7 +268,7 @@ export default {
header: '', header: '',
name: '', name: '',
align: 'center', align: 'center',
width: 50, width: 20,
formatter: (props) => { formatter: (props) => {
return `<label class="custom-radio"> return `<label class="custom-radio">
<span class="radio-mark"></span> <span class="radio-mark"></span>
@ -278,10 +278,10 @@ export default {
{ {
header: '검침개소명', header: '검침개소명',
name: 'readPlcNm', name: 'readPlcNm',
width: 300, width: 500,
align: 'left', align: 'left',
}, },
{ header: '검침개소', name: 'name', align: 'center' }, { header: '검침개소', name: 'name', align: 'left', width: 200 },
], ],
}); });
}, },
@ -307,6 +307,9 @@ export default {
// console.log("treeData", res) // console.log("treeData", res)
let myOptionsTree = { let myOptionsTree = {
columnOptions: {
resizable: true,
},
treeColumnOptions: { treeColumnOptions: {
name: 'readPlcNm', name: 'readPlcNm',
}, },

4
components/common/select/SelectBoxTime.vue
View File

@ -22,11 +22,11 @@
outlined outlined
:menu-props="{ auto: true, offsetY: true }" :menu-props="{ auto: true, offsetY: true }"
:hide-details="true" :hide-details="true"
:class="'v-select__custom select-large'" :class="'v-select__custom'"
:disabled="disabled" :disabled="disabled"
:readonly="readonly" :readonly="readonly"
@click="setDatepickerHide" @click="setDatepickerHide"
style="width: 170px; border-radius: 6px !important" style="min-width: 170px;"
> >
<template v-slot:append> <template v-slot:append>
<a-icon <a-icon

25
components/pages/ems/ReadPlcInfo/ReadPlcTagRelTab.vue
View File

@ -6,12 +6,23 @@
:btnActionsFnc="btnActions" /> :btnActionsFnc="btnActions" />
</div> </div>
<div ref="gridParent" style="height: calc((100vh - 520px) /2);"> <div ref="gridParent" style="height: calc((100vh - 520px) /2);">
<Grid :ref="gridName" :gridName="gridName" :parentPrgmId="parentPrgmId" @getRowsData="getRowData" <Grid
:innerTabGridInfo="innerTabGridInfo" /> :ref="gridName"
:is="loadGrid ? 'Grid' : null"
:gridName="gridName"
:parentPrgmId="parentPrgmId"
@getRowsData="getRowData"
:innerTabGridInfo="innerTabGridInfo"
/>
</div> </div>
<div class="mt-3" ref="formParent" style="height: calc((100vh - 400px) /2);"> <div ref="formParent" style="height: calc((100vh - 400px) /2);">
<component :is="'Form'" :parentPrgmId="parentPrgmId" :bindingData="gridName" <component
:detailList="detailReadPlcTagList" @gridEditingFinish="gridEditingFinish" /> :is="'Form'"
:parentPrgmId="parentPrgmId"
:bindingData="gridName"
:detailList="detailReadPlcTagList"
@gridEditingFinish="gridEditingFinish"
/>
</div> </div>
</div> </div>
</template> </template>
@ -99,9 +110,9 @@ export default {
// bodyHeight: gridHeight, // bodyHeight: gridHeight,
// minBodyHeight: gridHeight, // minBodyHeight: gridHeight,
header: { header: {
height: 28, height: 37,
}, },
rowHeight: 29, rowHeight: 37,
minRowHeight: 29, minRowHeight: 29,
selectionUnit: 'row', selectionUnit: 'row',
editingEvent: 'click', editingEvent: 'click',

37
pages/comm/auth/MenuMngPage.vue
View File

@ -1,6 +1,7 @@
<template> <template>
<div class="l-layout"> <div class="l-layout">
<v-row ref="searchFilter"> <common-page-title />
<v-row ref="searchFilter" class="mt-2">
<v-col :cols="12"> <v-col :cols="12">
<v-card class="searchFilter"> <v-card class="searchFilter">
<v-row align="end" no-gutters> <v-row align="end" no-gutters>
@ -34,7 +35,7 @@
<div class="h100 px-4" style="height:calc(100% - 70px)"> <div class="h100 px-4" style="height:calc(100% - 70px)">
<div ref="treeGridParent" class="w100 h100"> <div ref="treeGridParent" class="w100 h100">
<component :ref="gridName + myPrgmId" :is="loadTree ? 'Grid' : null" :gridName="gridName" <component :ref="gridName + myPrgmId" :is="loadTree ? 'Grid' : null" :gridName="gridName"
:parentPrgmId="myPrgmId" @getRowsData="getRowData" :dataPath="dataPathExample" /> :parentPrgmId="myPrgmId" @getRowsData="getRowData" />
</div> </div>
</div> </div>
</v-card> </v-card>
@ -91,21 +92,9 @@ export default {
return { return {
myPrgmId: myPrgmId, myPrgmId: myPrgmId,
gridName: 'treeGrid', gridName: 'treeGrid',
loadTree: true, loadTree: false,
detailList: myDetail, detailList: myDetail,
addRowFg: false, addRowFg: false,
dataPathExample: {
"treeGrid": {
data: sampleData,
column: [
{ header: '메뉴명', name: 'menuNm' },
{ header: 'prgmId ', name: 'prgmId', hidden: true },
{ header: 'sysDivCd ', name: 'sysDivCd', hidden: true },
],
option: myOptions,
}
}
}; };
}, },
computed: { computed: {
@ -162,10 +151,17 @@ export default {
gridInit() { gridInit() {
const treeGridHeight = this.$refs.treeGridParent.offsetHeight - 30; const treeGridHeight = this.$refs.treeGridParent.offsetHeight - 30;
const myOptionsTree = { const myOptionsTree = {
columnOptions: {
resizable: true,
},
treeColumnOptions: { treeColumnOptions: {
name: 'menuNm', name: 'menuNm',
}, },
scrollX: false, scrollX: false,
header: {
height: 37,
},
rowHeight: 37,
}; };
this.setGridOption({ this.setGridOption({
gridKey: this.gridName, gridKey: this.gridName,
@ -178,6 +174,17 @@ export default {
this.setGridColumn({ this.setGridColumn({
gridKey: this.gridName, gridKey: this.gridName,
value: [ value: [
{
header: '',
name: '',
align: 'center',
width: 20,
formatter: (props) => {
return `<label class="custom-radio">
<span class="radio-mark"></span>
</label>`;
}
},
{ header: '메뉴명', name: 'menuNm' }, { header: '메뉴명', name: 'menuNm' },
{ header: 'prgmId ', name: 'prgmId', hidden: true }, { header: 'prgmId ', name: 'prgmId', hidden: true },
{ header: 'sysDivCd ', name: 'sysDivCd', hidden: true }, { header: 'sysDivCd ', name: 'sysDivCd', hidden: true },

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

@ -127,7 +127,7 @@
<!-- 역할수정 --> <!-- 역할수정 -->
<template v-else-if="item.id == 'AsgnRoleByUser'"> <template v-else-if="item.id == 'AsgnRoleByUser'">
<v-col :cols="12"> <v-col :cols="12" class="overflow-y-scroll grid-toggle-section">
<v-card-title <v-card-title
class="pa-0 custom-subtitle-tab" class="pa-0 custom-subtitle-tab"
style="min-height:36px;" style="min-height:36px;"

292
pages/comm/base/BatchMngPage.vue
View File

@ -1,7 +1,8 @@
<template> <template>
<div class="l-layout"> <div class="l-layout">
<!-- 조회조견 --> <!-- 조회조견 -->
<v-row ref="searchFilter"> <common-page-title />
<v-row ref="searchFilter" class="mt-2">
<v-col :cols="12"> <v-col :cols="12">
<v-card class="searchFilter"> <v-card class="searchFilter">
<v-row align="end" no-gutters> <v-row align="end" no-gutters>
@ -24,7 +25,7 @@
:customClass="'select-large'" :customClass="'select-large'"
/> />
</v-col> </v-col>
<v-col :cols="2.5"> <v-col :cols="2.5" class="pr-4">
<component <component
:is="'selectCodeList'" :is="'selectCodeList'"
:parentPrgmId="myPrgmId" :parentPrgmId="myPrgmId"
@ -34,7 +35,7 @@
:customClass="'select-large'" :customClass="'select-large'"
/> />
</v-col> </v-col>
<BtnSearch size="large" /> <BtnSearch size="large" class="mr-2" />
</v-row> </v-row>
</v-card> </v-card>
@ -57,7 +58,7 @@
<div class="px-4"> <div class="px-4">
<div ref="gridParent" class="h100 w100"> <div ref="gridParent" class="h100 w100">
<component :ref="gridName" :is="loadGrid ? 'Grid' : null" :parentPrgmId="myPrgmId" <component :ref="gridName" :is="loadGrid ? 'Grid' : null" :parentPrgmId="myPrgmId"
:gridName="gridName" @getRowsData="getRowData" :dataPath="dataPathExample" /> :gridName="gridName" @getRowsData="getRowData" />
</div> </div>
<!-- </v-card-actions> --> <!-- </v-card-actions> -->
</div> </div>
@ -77,7 +78,7 @@
</v-card-actions> </v-card-actions>
</v-card> </v-card>
</v-col> </v-col>
<v-dialog ref="popModal" v-model="dialog" width="700" overlay-color="#000" overlay-opacity="0.8" scrollable> <v-dialog ref="popModal" v-model="dialog" width="800" overlay-color="#000" overlay-opacity="0.8" scrollable>
<v-card style="height: 100%"> <v-card style="height: 100%">
<v-card-title class="v-card__title d-flex align-center justify-space-between"> <v-card-title class="v-card__title d-flex align-center justify-space-between">
<span class="custom-title-4">DB 프로시져 파라메터 설정</span> <span class="custom-title-4">DB 프로시져 파라메터 설정</span>
@ -91,7 +92,6 @@
<v-col cols="12" class="text-right"> </v-col> <v-col cols="12" class="text-right"> </v-col>
</v-row> </v-row>
</div> </div>
<v-divider></v-divider>
<v-card-text style="height: 300px;"> <v-card-text style="height: 300px;">
<div id="gridParent" class="mt-6" style="height:calc(100% - 36px);"> <div id="gridParent" class="mt-6" style="height:calc(100% - 36px);">
<div style="height:calc(100% - 36px);"> <div style="height:calc(100% - 36px);">
@ -101,7 +101,6 @@
</div> </div>
</div> </div>
</v-card-text> </v-card-text>
<v-divider></v-divider>
<v-card-actions> <v-card-actions>
<v-spacer></v-spacer> <v-spacer></v-spacer>
<v-btn color="primary" dark @click="setParamChangeData()">확인</v-btn> <v-btn color="primary" dark @click="setParamChangeData()">확인</v-btn>
@ -155,76 +154,16 @@ export default {
data() { data() {
return { return {
myPrgmId: myPrgmId, myPrgmId: myPrgmId,
loadGrid: true, loadGrid: false,
gridName: 'rowGrid', gridName: 'rowGrid',
dataPathExample: {
"rowGrid": {
data: [
{
"batchId": "BATCH001",
"batchNm": "일일 데이터 백업",
"batchExecTp": "자동 실행",
"batchDupExecFg": "N",
"useFg": "사용"
},
{
"batchId": "BATCH002",
"batchNm": "월간 리포트 생성",
"batchExecTp": "수동 실행",
"batchDupExecFg": "Y",
"useFg": "사용"
},
{
"batchId": "BATCH003",
"batchNm": "로그 정리 작업",
"batchExecTp": "자동 실행",
"batchDupExecFg": "N",
"useFg": "미사용"
},
{
"batchId": "BATCH004",
"batchNm": "사용자 통계 수집",
"batchExecTp": "예약 실행",
"batchDupExecFg": "Y",
"useFg": "사용"
},
{
"batchId": "BATCH005",
"batchNm": "서버 상태 점검",
"batchExecTp": "수동 실행",
"batchDupExecFg": "N",
"useFg": "미사용"
}
]
,
column: [
{ header: '배치ID', name: 'batchId', align: 'center', width: 100 },
{ header: '배치명', name: 'batchNm', minWidth: 200 },
{
header: '배치 실행 구분',
name: 'batchExecTp',
align: 'left',
minWidth: 190,
},
{ header: '배치 중복 여부', name: 'batchDupExecFg', hidden: true },
{
header: '사용여부',
name: 'useFg',
align: 'center',
width: 145,
},
],
}
},
// rowGridOrigin: [], // rowGridOrigin: [],
detailList: myDetail, detailList: myDetail,
// 파라메터 셋팅용 변수 // 파라메터 셋팅용 변수
dialog: false, dialog: false,
gridNameParam: 'paramGrid', gridNameParam: 'paramGrid',
paramLoadGrid: true, paramLoadGrid: false,
selectedGridNameParamRow: null, selectedGridNameParamRow: null,
}; };
}, },
@ -292,7 +231,7 @@ export default {
}), }),
init() { init() {
// this.layoutInit(); // this.layoutInit();
// this.gridInit(); this.gridInit();
this.gridParamInit(); this.gridParamInit();
}, },
// layoutInit() { // layoutInit() {
@ -309,6 +248,10 @@ export default {
columnOptions: { columnOptions: {
resizable: true, resizable: true,
}, },
header: {
height: 37,
},
rowHeight: 37,
}; };
this.setGridOption({ this.setGridOption({
gridKey: this.gridName, gridKey: this.gridName,
@ -384,7 +327,7 @@ export default {
}, },
async search() { async search() {
// console.log("search"); // console.log("search");
// await this.getRowGridData(); await this.getRowGridData();
await this.setPageData({ await this.setPageData({
isFind: false, isFind: false,
}); });
@ -629,20 +572,20 @@ export default {
gridKey: this.gridNameParam, gridKey: this.gridNameParam,
value: myOptions, value: myOptions,
}); });
// setTimeout(() => { }); setTimeout(() => { });
// let modeList = []; let modeList = [];
// const modeIn = { text: 'IN', value: 'IN' }; const modeIn = { text: 'IN', value: 'IN' };
// const modeOut = { text: 'OUT', value: 'OUT' }; const modeOut = { text: 'OUT', value: 'OUT' };
// modeList.push(modeIn); modeList.push(modeIn);
// modeList.push(modeOut); modeList.push(modeOut);
// let typeList = []; let typeList = [];
// const typeInt = { text: 'INT', value: 'int' }; const typeInt = { text: 'INT', value: 'int' };
// const typeStr = { text: 'STRING', value: 'str' }; const typeStr = { text: 'STRING', value: 'str' };
// const typeFunc = { text: 'FUNCTION', value: 'function' }; const typeFunc = { text: 'FUNCTION', value: 'function' };
// typeList.push(typeInt); typeList.push(typeInt);
// typeList.push(typeStr); typeList.push(typeStr);
// typeList.push(typeFunc); typeList.push(typeFunc);
const myColumns = [ const myColumns = [
{ header: 'ID', name: 'id', editor: 'text' }, { header: 'ID', name: 'id', editor: 'text' },
@ -664,27 +607,27 @@ export default {
header: 'Type', header: 'Type',
name: 'type', name: 'type',
align: 'center', align: 'center',
// formatter({ value }) { formatter({ value }) {
// let retVal = ''; let retVal = '';
// switch (value) { switch (value) {
// case 'int': case 'int':
// retVal = 'INT'; retVal = 'INT';
// break; break;
// case 'str': case 'str':
// retVal = 'STRING'; retVal = 'STRING';
// break; break;
// case 'function': case 'function':
// retVal = 'FUNCTION'; retVal = 'FUNCTION';
// break; break;
// } }
// return retVal; return retVal;
// }, },
// editor: { editor: {
// type: 'select', type: 'select',
// options: { options: {
// listItems: typeList, listItems: typeList,
// }, },
// }, },
}, },
{ header: '값', name: 'val', editor: 'text' }, { header: '값', name: 'val', editor: 'text' },
{ header: 'rowStat', name: 'rowStat', hidden: true }, { header: 'rowStat', name: 'rowStat', hidden: true },
@ -703,86 +646,49 @@ export default {
// /* this.pageData.paramStrData 처리 */ // /* this.pageData.paramStrData 처리 */
// // console.log("this.pageData.paramStrData : ", JSON.parse(this.pageData.paramStrData)); // // console.log("this.pageData.paramStrData : ", JSON.parse(this.pageData.paramStrData));
// let rowData = {}; let rowData = {};
// if ( if (
// this.pageData.paramStrData.startsWith('{') && this.pageData.paramStrData.startsWith('{') &&
// this.pageData.paramStrData.endsWith('}') this.pageData.paramStrData.endsWith('}')
// ) { ) {
// rowData = JSON.parse(this.pageData.paramStrData); rowData = JSON.parse(this.pageData.paramStrData);
// }
// var keys = Object.keys(rowData); //키를 가져옵니다. 이때, keys 는 반복가능한 객체가 됩니다.
// for (var i = 0; i < keys.length; i++) {
// var key = keys[i];
// res.push(rowData[key]);
// }
// const newRes = res.map(item => {
// const newObj = {
// ...item,
// rowStat: null,
// id: item.id || '',
// mode: item.mode || 'in',
// type: item.type || 'str',
// val: item.val || '',
// };
// return newObj;
// });
const newRes = [
{
"id": "VAR001",
"mode": "OUT",
"type": "int",
"val": "100",
"rowStat": "C"
},
{
"id": "VAR002",
"mode": "IN",
"type": "str",
"val": "Hello World",
"rowStat": "U"
},
{
"id": "FUNC001",
"mode": "out",
"type": "function",
"val": "calculateSum()",
"rowStat": "C"
},
{
"id": "VAR003",
"mode": "IN",
"type": "int",
"val": "42",
"rowStat": "D"
},
{
"id": "VAR004",
"mode": "OUT",
"type": "str",
"val": "Sample Text",
"rowStat": "C"
} }
]; var keys = Object.keys(rowData); //키를 가져옵니다. 이때, keys 는 반복가능한 객체가 됩니다.
for (var i = 0; i < keys.length; i++) {
var key = keys[i];
res.push(rowData[key]);
}
const newRes = res.map(item => {
const newObj = {
...item,
rowStat: null,
id: item.id || '',
mode: item.mode || 'in',
type: item.type || 'str',
val: item.val || '',
};
return newObj;
});
this.setGridData({ this.setGridData({
gridKey: this.gridNameParam, gridKey: this.gridNameParam,
value: newRes, value: newRes,
}); });
// this.$nextTick(() => { this.$nextTick(() => {
// if (newRes.length > 0) { if (newRes.length > 0) {
// try { try {
// this.$refs[this.gridNameParam].focus({ this.$refs[this.gridNameParam].focus({
// //rowKey: 0, //rowKey: 0,
// rowKey: 0, rowKey: 0,
// setScroll: true, setScroll: true,
// }); });
// } catch (error) { } catch (error) {
// console.log('error[nextTick grid] : ', error); console.log('error[nextTick grid] : ', error);
// } }
// } }
// }); });
this.paramLoadGrid = true; this.paramLoadGrid = true;
}, },
xlsDataBind(res) { xlsDataBind(res) {
@ -812,21 +718,21 @@ export default {
inputClick(event, item, valueNm) { inputClick(event, item, valueNm) {
if (valueNm == 'refVal1') { if (valueNm == 'refVal1') {
this.dialog = true; this.dialog = true;
// const rowIdxKey = this.$refs[this.gridName].gridInstance.invoke( const rowIdxKey = this.$refs[this.gridName].gridInstance.invoke(
// 'getFocusedCell', 'getFocusedCell',
// ).rowKey; ).rowKey;
// const selectRowData = this.$refs[this.gridName].gridInstance.invoke( const selectRowData = this.$refs[this.gridName].gridInstance.invoke(
// 'getRow', 'getRow',
// rowIdxKey, rowIdxKey,
// ); );
// if (selectRowData.batchExecTp == 'DP') { if (selectRowData.batchExecTp == 'DP') {
// // 여기에 팝업 레이어 띠우기 기능 추가 // 여기에 팝업 레이어 띠우기 기능 추가
// this.pageData.paramStrData = event.target.value; this.pageData.paramStrData = event.target.value;
// this.pageData.paramChangeDataTarget = event.target; this.pageData.paramChangeDataTarget = event.target;
// this.getRowParamData(); this.getRowParamData();
// this.dialog = true; this.dialog = true;
// } }
} }
}, },
setParamChangeData() { setParamChangeData() {

268
pages/comm/base/CalendarMngPage.vue
View File

@ -1,6 +1,7 @@
<template> <template>
<div class="l-layout"> <div class="l-layout">
<v-row ref="searchFilter"> <common-page-title />
<v-row ref="searchFilter" class="mt-2">
<v-col :cols="12"> <v-col :cols="12">
<v-card class="searchFilter"> <v-card class="searchFilter">
<v-row align="end" no-gutters> <v-row align="end" no-gutters>
@ -20,28 +21,29 @@
</v-col> </v-col>
</v-row> </v-row>
<v-row ref="contents" id="CalendarMngContent" class="mt-4"> <v-row ref="contents" id="CalendarMngContent" class="mt-4">
<v-col cols="12" lg="4" class="h100 pr-2"> <v-col cols="12" lg="4" class=" pr-2">
<v-card class="w100"> <v-card class="w100">
<v-card-title class="d-flex justify-space-between align-center"> <v-card-title class="d-flex justify-space-between align-center">
<span class="custom-title-4">캘린더 리스트</span> <span class="custom-title-4">캘린더 리스트</span>
<Buttons :parentPrgmId="myPrgmId" :bindingData="gridName" :btnActionsFnc="btnActions" /> <Buttons :parentPrgmId="myPrgmId" :bindingData="gridName" :btnActionsFnc="btnActions" />
</v-card-title> </v-card-title>
<v-card-actions class="pt-0 px-5 pb-5" :style="{ height: 'calc(100% - 72.56px)' }"> <v-card-actions class="pt-0 px-5 pb-5" :style="{ height: 'calc(100% - 10px)' }">
<div ref="gridParent" class="w100 h100"> <div ref="gridParent" class="w100 h100">
<component class="w100" :ref="gridName + myPrgmId" :is="loadGrid ? 'Grid' : null" <component class="w100" :ref="gridName + myPrgmId" :is="loadGrid ? 'Grid' : null"
:gridName="gridName" :parentPrgmId="myPrgmId" :editorGrid="true" :gridName="gridName" :parentPrgmId="myPrgmId" :editorGrid="true"
@getRowsData="getRowData" :dataPath="dataPathExample" /> @getRowsData="getRowData" />
</div> </div>
</v-card-actions> </v-card-actions>
</v-card> </v-card>
</v-col> </v-col>
<v-col cols="12" lg="8" class="h100 pl-3"> <v-col cols="12" lg="8" class=" pl-3">
<v-card> <v-card>
<v-card-title> <v-card-title>
<span class="custom-title-4">캘린더 미리보기</span> <span class="custom-title-4">캘린더 미리보기</span>
</v-card-title> </v-card-title>
<v-card-actions class="px-5 d-block" :style="{ height: 'calc(100% - 62px)' }"> <v-card-actions class="px-5 d-block" >
<Calendar :parentPrgmId="myPrgmId" :gridName="gridName" :headerVisible="false" /> <Calendar :parentPrgmId="myPrgmId" :gridName="gridName" :headerVisible="false"
:showTitle="false" />
</v-card-actions> </v-card-actions>
</v-card> </v-card>
</v-col> </v-col>
@ -94,81 +96,7 @@ export default {
return { return {
myPrgmId: myPrgmId, myPrgmId: myPrgmId,
gridName: 'rowGrid', gridName: 'rowGrid',
loadGrid: true, loadGrid: false,
dataPathExample: {
"rowGrid": {
data: [
{
"hldyFg": "평일",
"hldyNm": ""
},
{
"dt": "2025-07-23",
"dtNm": "수요일",
"dt": "2025-07-21",
"dtNm": "월요일",
"hldyFg": "평일",
"hldyNm": ""
},
{
"dt": "2025-07-22",
"dtNm": "화요일",
"hldyFg": "평일",
"hldyNm": ""
},
{
"dt": "2025-07-24",
"dtNm": "목요일",
"hldyFg": "평일",
"hldyNm": ""
},
{
"dt": "2025-07-25",
"dtNm": "금요일",
"hldyFg": "평일",
"hldyNm": ""
},
{
"dt": "2025-07-26",
"dtNm": "토요일",
"hldyFg": "주말",
"hldyNm": ""
},
{
"dt": "2025-07-27",
"dtNm": "일요일",
"hldyFg": "휴일",
"hldyNm": "정기휴일"
}
],
column: [
{
header: '일자',
name: 'dt',
align: 'center',
// formatter({ value }) {
// return value.split(' ')[0];
// },
},
{
header: '요일',
name: 'dtNm',
align: 'center',
// formatter({ value }) {
// return value + '요일';
// },
},
{
header: '구분',
name: 'hldyFg',
align: 'center',
essential: true,
},
{ header: '휴일명', name: 'hldyNm', editor: 'text' },
],
}
},
rowKey: null, rowKey: null,
edtingFinishFlag: 'Y', edtingFinishFlag: 'Y',
}; };
@ -241,16 +169,19 @@ export default {
await this.gridInit(); await this.gridInit();
}, },
async search() { async search() {
// await this.getRowGridData(); await this.getRowGridData();
}, },
async gridInit() { async gridInit() {
// const gridHeight = this.$refs.gridParent.offsetHeight - 30; const gridHeight = this.$refs.gridParent.offsetHeight - 30;
// this.setGridOption({ this.setGridOption({
// gridKey: this.gridName, gridKey: this.gridName,
// value: Object.assign(Utility.defaultGridOption(gridHeight), { value: Object.assign(Utility.defaultGridOption(gridHeight), {
// scrollX: false, scrollX: false, header: {
// }), height: 37,
// }); },
rowHeight: 37,
}),
});
// this.getRowGridData(); // this.getRowGridData();
}, },
@ -350,86 +281,86 @@ export default {
this.loadGrid = false; this.loadGrid = false;
// let res = await this.postApiReturn({ let res = await this.postApiReturn({
// apiKey: 'selectWorkCald', apiKey: 'selectWorkCald',
// resKey: 'workcaldData', resKey: 'workcaldData',
// sendParam: { sendParam: {
// blocId: this.pageData.blocMstrList[this.chkBlocCd].blocId, blocId: this.pageData.blocMstrList[this.chkBlocCd].blocId,
// yymm: this.chkFromDt, yymm: this.chkFromDt,
// comId: this.comId, comId: this.comId,
// }, },
// }); });
// let res2 = await this.postApiReturn({ let res2 = await this.postApiReturn({
// apiKey: 'selectWorkCaldDetl', apiKey: 'selectWorkCaldDetl',
// resKey: 'workcaldDetlData', resKey: 'workcaldDetlData',
// sendParam: { sendParam: {
// blocId: this.pageData.blocMstrList[this.chkBlocCd].blocId, blocId: this.pageData.blocMstrList[this.chkBlocCd].blocId,
// yymm: this.chkFromDt, yymm: this.chkFromDt,
// comId: this.comId, comId: this.comId,
// }, },
// }); });
// for (var i = 0; i < res2.length; i++) { for (var i = 0; i < res2.length; i++) {
// if ( if (
// !( !(
// res2[i].hldyNm == null || res2[i].hldyNm == null ||
// res2[i].hldyNm == '토요일' || res2[i].hldyNm == '토요일' ||
// res2[i].hldyNm == '일요일' res2[i].hldyNm == '일요일'
// ) )
// ) { ) {
// for (var j = i + 1; j < res2.length; j++) { for (var j = i + 1; j < res2.length; j++) {
// if (res2[i].hldyNm == res2[j].hldyNm) { if (res2[i].hldyNm == res2[j].hldyNm) {
// res2[i].hldyNm = ''; res2[i].hldyNm = '';
// } }
// } }
// } }
// } }
// res = res.map(item => { res = res.map(item => {
// const dt = this.$dayjs(item.dt.split(' ')[0]); // YYYY-MM-DD const dt = this.$dayjs(item.dt.split(' ')[0]); // YYYY-MM-DD
// const dtNm = dt.format('ddd'); // 요일 const dtNm = dt.format('ddd'); // 요일
// const newItem = { const newItem = {
// ...item, ...item,
// dtNm: dtNm, dtNm: dtNm,
// hldyNm: item.hldyNm ? item.hldyNm : '', hldyNm: item.hldyNm ? item.hldyNm : '',
// rowStat: null, rowStat: null,
// }; };
// return newItem; return newItem;
// }); });
// this.loadGrid = true; this.loadGrid = true;
// this.setPageData({ isFind: false }); this.setPageData({ isFind: false });
// this.setGridColumn({ this.setGridColumn({
// gridKey: this.gridName, gridKey: this.gridName,
// value: myColumns, value: myColumns,
// }); });
// this.setGridData({ this.setGridData({
// gridKey: this.gridName, gridKey: this.gridName,
// value: res, value: res,
// }); });
// this.setPageData({ planData: res2 }); this.setPageData({ planData: res2 });
// // 첫번째 row 선택상태 // 첫번째 row 선택상태
// this.$nextTick(() => { this.$nextTick(() => {
// this.$refs[this.gridName + this.myPrgmId].focus({ this.$refs[this.gridName + this.myPrgmId].focus({
// //rowKey: 0, //rowKey: 0,
// rowKey: rowKey:
// this.pageData.rowGridSelectKey == '' || this.pageData.rowGridSelectKey == '' ||
// this.pageData.rowGridSelectKey == null this.pageData.rowGridSelectKey == null
// ? 0 ? 0
// : this.pageData.rowGridSelectKey == : this.pageData.rowGridSelectKey ==
// this.$refs[this.gridName + this.myPrgmId].getData().length - 1 this.$refs[this.gridName + this.myPrgmId].getData().length - 1
// ? this.pageData.rowGridSelectKey ? this.pageData.rowGridSelectKey
// : 0, : 0,
// columnName: 'dt', columnName: 'dt',
// setScroll: true, setScroll: true,
// }); });
// this.setPageData({ isFind: false }); this.setPageData({ isFind: false });
// }); });
}, },
async getRowData(data, gridName) { async getRowData(data, gridName) {
this.setGridSelectData({ this.setGridSelectData({
@ -604,4 +535,17 @@ select.selectbox {
border-width: 0px; border-width: 0px;
// box-sizing: border-box; // box-sizing: border-box;
} }
::v-deep {
.custom-vc-calender {
.vc-header {
display: none;
}
.vc-weeks {
padding: 0;
}
}
}
</style> </style>

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

@ -25,7 +25,7 @@
:textCols="12" :searchOption="true" :customClass="'input-large'" :iconShow="true" /> :textCols="12" :searchOption="true" :customClass="'input-large'" :iconShow="true" />
</v-col> </v-col>
<BtnSearch @click="search" size="large" /> <BtnSearch @click="search" size="large" class="mr-2" />
</v-row> </v-row>
</v-card> </v-card>
@ -43,8 +43,7 @@
<div ref="gridParent" class="w100 h100"> <div ref="gridParent" class="w100 h100">
<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"
@sendSelectedRowStatInfo="getSelectedRowStatInfo" :selectedRowDataWatchFlag="true" @sendSelectedRowStatInfo="getSelectedRowStatInfo" :selectedRowDataWatchFlag="true" />
/>
</div> </div>
</div> </div>
</v-card> </v-card>
@ -308,12 +307,22 @@ export default {
const _this = this; const _this = this;
const myColumns = [ const myColumns = [
{
header: '',
name: '',
align: 'center',
formatter: (props) => {
return `<span class="custom-radio">
<span class="radio-mark"></span>
</span>`;
}
},
{ header: '회사 ID', name: 'comId', hidden: true }, { header: '회사 ID', name: 'comId', hidden: true },
{ {
header: '검침개소명', header: '검침개소명',
name: 'readPlcNm', name: 'readPlcNm',
align: 'left', align: 'left',
minWidth: 400, minWidth: 350,
}, },
{ {
header: '검침개소 ID', header: '검침개소 ID',
@ -493,7 +502,7 @@ export default {
if (this.tab == 2) { if (this.tab == 2) {
this.tab = 0; this.tab = 0;
} }
this.isImgTabDisabled = false; this.isImgTabDisabled = true;
} else { } else {
this.isImgTabDisabled = false; this.isImgTabDisabled = false;
} }

73
pages/ems/base/EqpmGrpPysclQtyMngPage.vue
View File

@ -31,7 +31,7 @@
</v-col> </v-col>
</v-row> </v-row>
<v-row ref="contents" class="mt-3"> <v-row ref="contents" class="mt-3">
<v-col :cols="5" class="h100 pr-2"> <v-col :cols="5" class="pr-2">
<v-card class="pb-5"> <v-card class="pb-5">
<v-card-title class="d-flex align-center justify-space-between pa-5"> <v-card-title class="d-flex align-center justify-space-between pa-5">
물리량 리스트 물리량 리스트
@ -50,7 +50,7 @@
</div> </div>
</v-card> </v-card>
</v-col> </v-col>
<v-col :cols="7" class="h100 pl-2"> <v-col :cols="7" class="pl-2">
<v-card class="pb-5 px-4"> <v-card class="pb-5 px-4">
<v-card-title class="px-0">물리량 상세</v-card-title> <v-card-title class="px-0">물리량 상세</v-card-title>
<v-row no-gutters> <v-row no-gutters>
@ -114,7 +114,7 @@
<component :is="'TextArea'" :parentPrgmId="myPrgmId" ref="TextArea" :item="calcDescItem" /> <component :is="'TextArea'" :parentPrgmId="myPrgmId" ref="TextArea" :item="calcDescItem" />
</v-col> </v-col>
</v-row> </v-row>
<v-row no-gutters v-show="argContentShowFlag"> <v-row no-gutters v-show="argContentShowFlag" align="end" >
<v-col :cols="12" class="py-2"> <v-col :cols="12" class="py-2">
<label for=""> <label for="">
<v-icon small <v-icon small
@ -122,13 +122,13 @@
계산Argument 계산Argument
</label> </label>
</v-col> </v-col>
<v-col :cols="6" class="py-2"> <v-col :cols="6" class="py-2 pr-4">
<InputText :parentPrgmId="myPrgmId" label="ARG갯수" valueNm="argCnt" :labelCols="12" <InputText :parentPrgmId="myPrgmId" label="ARG갯수" valueNm="argCnt" :labelCols="12"
:textCols="12" :iconShow="true" :required="requiredValueList[7]" :textCols="12" :iconShow="false" :required="requiredValueList[7]"
:disabled="disabledValueList[7]" :readonly="readOnlyValueList[7]" /> :disabled="disabledValueList[7]" :readonly="readOnlyValueList[7]" />
</v-col> </v-col>
<v-col :cols="4"> </v-col> <!-- <v-col :cols="4"> </v-col> -->
<v-col :cols="12" class="py-2" align="right"> <v-col :cols="6" class="py-2" align="right">
<a-button type="primary" @click="btnAction('add')" class="v-btn-add-text mr-1" icon="plus">추가</a-button> <a-button type="primary" @click="btnAction('add')" class="v-btn-add-text mr-1" icon="plus">추가</a-button>
<a-button type="danger" @click="btnAction('remove')" ghost danger icon="delete">삭제</a-button> <a-button type="danger" @click="btnAction('remove')" ghost danger icon="delete">삭제</a-button>
</v-col> </v-col>
@ -225,61 +225,6 @@ export default {
formatterSelectList02: [], formatterSelectList02: [],
loadGrid: false, loadGrid: false,
dataPathExample: {
"rowGrid": {
data: [
{
"pysclQtyId": "001",
"pysclQtyCd": "TEMP001",
"pysclQtyNm": "온도",
"pysclQtyTp": "실수"
},
{
"pysclQtyId": "002",
"pysclQtyCd": "PRESS001",
"pysclQtyNm": "압력",
"pysclQtyTp": "실수"
},
{
"pysclQtyId": "003",
"pysclQtyCd": "FLOW001",
"pysclQtyNm": "유량",
"pysclQtyTp": "정수"
},
{
"pysclQtyId": "004",
"pysclQtyCd": "HUMID001",
"pysclQtyNm": "습도",
"pysclQtyTp": "실수"
},
{
"pysclQtyId": "005",
"pysclQtyCd": "VOLT001",
"pysclQtyNm": "전압",
"pysclQtyTp": "실수"
}
]
,
column: [
{
header: '물리량 ID',
name: 'pysclQtyId',
width: 100,
align: 'center',
},
{ header: '물리량코드', name: 'pysclQtyCd', minWidth: 255 },
{ header: '물리량명', name: 'pysclQtyNm', width: 150 },
{
header: '물리량타입',
name: 'pysclQtyTp',
width: 80,
},
],
}
},
loadGrid2: false, loadGrid2: false,
detailList: myDetail, detailList: myDetail,
@ -954,6 +899,8 @@ export default {
height: 37, height: 37,
}, },
rowHeight: 'auto', rowHeight: 'auto',
scrollX: true,
scrollY: true,
}; };
this.setGridOption({ this.setGridOption({
@ -967,7 +914,7 @@ export default {
header: '물리량 ID', header: '물리량 ID',
name: 'pysclQtyId', name: 'pysclQtyId',
width: 100, width: 100,
align: 'center', align: 'left',
}, },
{ header: '설비그룹 ID', name: 'eqpmGrpId', hidden: true }, { header: '설비그룹 ID', name: 'eqpmGrpId', hidden: true },
{ header: 'argCnt', name: 'argCnt', hidden: true }, { header: 'argCnt', name: 'argCnt', hidden: true },

157
pages/ems/base/GdIdxMngPage.vue
View File

@ -119,109 +119,6 @@ export default {
selectValueList01: [], selectValueList01: [],
selectValue02: null, selectValue02: null,
selectValueList02: [], selectValueList02: [],
// pyscPopupValueChkList: 'pyscPopupValueChkList',
// pyscListChk: {
// pysclQtyId1 : null,
// pysclQtyId2 : null,
// pysclQtyId3 : null,
// pysclQtyId4 : null
// }
// dataPathExample: {
// "rowGrid": {
// data: [
// {
// gdIdxId: 'GD001',
// gdIdxNm: '온도 가이드',
// eqpmGrpId: 'EQ001',
// upTotMeth: 'AVG',
// careStndVal: 50,
// warnStndVal: 70,
// alrmMsg: '온도가 기준치를 초과했습니다.',
// },
// {
// gdIdxId: 'GD002',
// gdIdxNm: '습도 가이드',
// eqpmGrpId: 'EQ002',
// upTotMeth: 'MAX',
// careStndVal: 30,
// warnStndVal: 60,
// alrmMsg: '습도가 기준치를 초과했습니다.',
// },
// {
// gdIdxId: 'GD003',
// gdIdxNm: '압력 가이드',
// eqpmGrpId: 'EQ003',
// upTotMeth: 'SUM',
// careStndVal: 100,
// warnStndVal: 150,
// alrmMsg: '압력이 기준치를 초과했습니다.',
// }
// ],
// column: [
// {
// header: '가이드',
// name: 'gdIdxId',
// width: 100,
// align: 'center',
// },
// {
// header: '가이드명',
// name: 'gdIdxNm',
// width: 210,
// align: 'left',
// },
// {
// header: '설비그룹ID',
// name: 'eqpmGrpId',
// width: 100,
// align: 'center',
// // formatter({ value }) {
// // let retVal = '';
// // const newValue = _this.pageData.eqpmGrpList.filter(item => item.value == value);
// // if (newValue.length > 0) {
// // retVal = newValue[0].text;
// // }
// // return retVal;
// // },
// },
// {
// header: '상위집계방법',
// name: 'upTotMeth',
// width: 100,
// align: 'center',
// // formatter({ value }) {
// // let retVal = '';
// // const newValue = _this.pageData.upTotMethList.filter(item => item.commCd == value);
// // if (newValue.length > 0) {
// // retVal = newValue[0].commCdNm;
// // }
// // return retVal;
// // },
// },
// {
// header: '주의기준',
// name: 'careStndVal',
// width: 100,
// align: 'right',
// },
// {
// header: '경고기준',
// name: 'warnStndVal',
// width: 100,
// align: 'right',
// },
// {
// header: '알람메세지',
// name: 'alrmMsg',
// minWidth: 860,
// align: 'left',
// }
// ]
// }
// }
}; };
}, },
computed: { computed: {
@ -627,58 +524,6 @@ export default {
async getRowGridData() { async getRowGridData() {
this.loadGrid = false; this.loadGrid = false;
let res = []; let res = [];
// const newRes = [
// {
// comId: 'COM001',
// gdIdxId: 'GD001',
// gdIdxNm: '온도 가이드',
// eqpmGrpId: 'EQ001',
// upTotMeth: 'AVG',
// sortSeq: 1,
// pysclQtyId1: 'TEMP',
// pysclQtyId2: null,
// pysclQtyId3: null,
// pysclQtyId4: null,
// ctgr1: '환경',
// ctgr2: '내부',
// careStndVal: 50,
// warnStndVal: 70,
// gdMeth: '자동',
// useFg: '1',
// alrmMsg: '온도가 기준치를 초과했습니다.',
// calcProc: 'PROC001',
// calcDesc: '평균 계산',
// calcMeth: '(A+B)/2',
// unit: 'C',
// argCnt: 2,
// rowStat: null,
// },
// {
// comId: 'COM002',
// gdIdxId: 'GD002',
// gdIdxNm: '습도 가이드',
// eqpmGrpId: 'EQ002',
// upTotMeth: 'MAX',
// sortSeq: 2,
// pysclQtyId1: 'HUMID',
// pysclQtyId2: null,
// pysclQtyId3: null,
// pysclQtyId4: null,
// ctgr1: '환경',
// ctgr2: '외부',
// careStndVal: 30,
// warnStndVal: 60,
// gdMeth: '수동',
// useFg: '0',
// alrmMsg: '습도가 기준치를 초과했습니다.',
// calcProc: 'PROC002',
// calcDesc: '최대값 계산',
// calcMeth: 'MAX(A,B)',
// unit: '%',
// argCnt: 2,
// rowStat: null,
// },
// ];
res = await this.postApiReturn({ res = await this.postApiReturn({
apiKey: 'selectEqpmGdIdxDataList', apiKey: 'selectEqpmGdIdxDataList',
@ -1453,7 +1298,7 @@ const myDetail = [
class: 'pa-3', class: 'pa-3',
// required: true, // required: true,
openMode: 'ALL', openMode: 'ALL',
disabled: false, disabled: true,
eqpmKindId: '', eqpmKindId: '',
eqpmGrpId: '', eqpmGrpId: '',
closeBtnFg: true, closeBtnFg: true,

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

@ -1,6 +1,7 @@
<template> <template>
<div class="l-layout"> <div class="l-layout">
<v-row ref="searchFilter"> <common-page-title />
<v-row ref="searchFilter" class="mt-2">
<v-col :cols="12"> <v-col :cols="12">
<v-card class="searchFilter"> <v-card class="searchFilter">
<v-row align="center" no-gutters> <v-row align="center" no-gutters>
@ -555,7 +556,7 @@ export default {
header: { header: {
height: 37, height: 37,
}, },
rowHeight: 'auto', rowHeight: 37,
// pageOptions: { // pageOptions: {

239
pages/ems/effc/EnrgUsePlanPage.vue
View File

@ -6,7 +6,7 @@
<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">
<DatePicker :parentPrgmId="myPrgmId" :label="'조회연도'" /> <DatePicker :parentPrgmId="myPrgmId" :label="'조회연도'" customClass="datepicker-large"/>
</v-col> </v-col>
<v-col :cols="2.5"> <v-col :cols="2.5">
<component :is="'SelectBox'" ref="SelectBox1" :propsValue="selectValue01" :itemList="selectValueList01" <component :is="'SelectBox'" ref="SelectBox1" :propsValue="selectValue01" :itemList="selectValueList01"
@ -24,9 +24,9 @@
<BtnSearch size="large" @click="search" /> <BtnSearch size="large" @click="search" />
<!-- <v-col> <!-- <v-col>
</v-col> --> </v-col> -->
</v-row>
<component ref="EnrgUsePlanModiPop" :is="'EnrgUsePlanModiPop'" :label="'test'" :parentPrgmId="myPrgmId" <component ref="EnrgUsePlanModiPop" :is="'EnrgUsePlanModiPop'" :label="'test'" :parentPrgmId="myPrgmId"
@gridEditingFinish="gridEditingFinish" /> @gridEditingFinish="gridEditingFinish" />
</v-row>
</v-card> </v-card>
</v-col> </v-col>
</v-row> </v-row>
@ -44,8 +44,6 @@
</v-card> </v-card>
</v-col> </v-col>
</v-row> </v-row>
</div> </div>
</template> </template>
<script> <script>
@ -106,9 +104,6 @@ export default {
fromDt: new Date().getFullYear(), fromDt: new Date().getFullYear(),
rowKey: null, rowKey: null,
edtingFinishFlag: 'Y', edtingFinishFlag: 'Y',
dataPathMock: {
// "grid01": {}
},
// gridName: 'rowGrid', // gridName: 'rowGrid',
}; };
}, },
@ -166,12 +161,8 @@ export default {
defaultData: defaultData, defaultData: defaultData,
}); });
}, },
created() { }, created() {},
async mounted() { async mounted() {
// -------
// this.initTest();
// return;
// ========End test===========
await this.init(); await this.init();
this.initedFlag = true; this.initedFlag = true;
}, },
@ -184,122 +175,6 @@ export default {
getBlocMstrList: 'modules/search/getBlocMstrList', getBlocMstrList: 'modules/search/getBlocMstrList',
getAddInfoList: 'modules/search/getAddInfoList', getAddInfoList: 'modules/search/getAddInfoList',
}), }),
...mapMutations({
setPageData: 'setPageData',
}),
initTest() {
let _this = this;
// _this.setPageData({ popupDialogFg: true });
class MockCustumButton {
constructor(props) {
const { grid, rowKey, columnInfo } = props;
const value = columnInfo.renderer.options.value;
const elDiv = document.createElement('div');
elDiv.innerHTML = `<span>${value}</span>`;
$(elDiv).addClass('tui-grid-cell-content d-flex justify-space-between');
const el = document.createElement('button');
$(el).addClass('edit-btn blue--text');
el.innerText = 'Edit';
el.addEventListener('click', function (event) {
// console.log("------DEBUG----_this:", _this);
// _this.setPageData({ eqpmNm: selectedGridData[0]?.eqpmNm });
_this.setPageData({ popupDialogFg: true });
});
elDiv.appendChild(el);
this.elDiv = elDiv;
}
getElement() {
return this.elDiv;
}
}
const mockData = {
column: [
{ header: 'No', name: 'rowNum', align: 'center', width: 40 },
{ header: 'FAB', name: 'fab', align: 'left', width: 80 },
{ header: '설비 그룹', name: 'eqpmGrpNm', align: 'left', minWidth: 150 },
// {
// header: '설비명', name: 'eqpmNm', align: 'left', minWidth: 150,
// formatter: ({ value, row }) => {
// return `
// <div class="d-flex justify-space-between">
// <span>${value}</span>
// <button class="edit-btn blue--text" data-row='${JSON.stringify(row)}'>Edit</button
// </div>
// `;
// }
// },
{
header: '설비명',
name: 'eqpmNm',
width: 70,
align: 'left',
minWidth: 150,
renderer: {
type: MockCustumButton,
options: {
value: '계획수정',
},
},
},
{
header: '구분', name: 'gubun', align: 'left', width: 80,
formatter({ value }) {
let retVal = '';
if (value == '1RSLT') {
retVal = '전년실적';
} else if (value == '2PLAN') {
retVal = '계획';
} else {
retVal = value;
}
return retVal;
},
},
{ header: '1월', name: 'jan', align: 'right', width: 80 },
{ header: '2월', name: 'feb', align: 'right', width: 80 },
{ header: '3월', name: 'mar', align: 'right', width: 80 },
{ header: '4월', name: 'apr', align: 'right', width: 80 },
{ header: '5월', name: 'may', align: 'right', width: 80 },
{ header: '6월', name: 'jun', align: 'right', width: 80 },
{ header: '7월', name: 'jul', align: 'right', width: 80 },
{ header: '8월', name: 'aug', align: 'right', width: 80 },
{ header: '9월', name: 'sep', align: 'right', width: 80 },
{ header: '10월', name: 'oct', align: 'right', width: 80 },
{ header: '11월', name: 'nov', align: 'right', width: 80 },
{ header: '12월', name: 'dec', align: 'right', width: 80 }
],
data: dataPathDataExample,
defaultRow: dataPathDataExample,
option: {
columnOptions: {
resizable: true,
},
header: {
height: 65,
complexColumns: [
{
header: '2025 년',
name: 'yyyyCol',
childNames: [
'jan', 'feb', 'mar', 'apr', 'may', 'jun',
'jul', 'aug', 'sep', 'oct', 'nov', 'dec'
],
},
],
}
}
};
this.dataPathMock[this.gridName] = mockData;
this.$nextTick(() => {
this.loadGrid = true;
});
},
async init() { async init() {
await this.getFab(); await this.getFab();
await this.getEqpmKind(); await this.getEqpmKind();
@ -436,7 +311,7 @@ export default {
if (!this.disabled) { if (!this.disabled) {
// click 이벤트 // click 이벤트
el2.addEventListener('click', function (event) { this.el.addEventListener('click', function(event) {
let gridData = grid.store.data.rawData; let gridData = grid.store.data.rawData;
let rowNum = gridData[rowKey].rowNum; let rowNum = gridData[rowKey].rowNum;
let selectedGridData = gridData.filter(item => { let selectedGridData = gridData.filter(item => {
@ -600,7 +475,7 @@ export default {
let selectedGridData = gridData.filter(item => { let selectedGridData = gridData.filter(item => {
return item.rowNum == data.rowNum; return item.rowNum == data.rowNum;
}); });
await this.$nextTick(() => { }); await this.$nextTick(() => {});
this.setPageData({ this.setPageData({
rowGrid2SelectData: selectedGridData, rowGrid2SelectData: selectedGridData,
}); });
@ -942,110 +817,18 @@ const defaultData = {
}, },
}, },
}; };
const dataPathDataExample = [
{
rowNum: 1,
fab: 'B01',
eqpmGrpNm: '방송기술운',
eqpmNm: 'U/T_LT_CH101',
gubun: '전력량',
jan: 110000,
feb: 112000,
mar: 115000,
apr: 117000,
may: 120000,
jun: 118000,
jul: 119000,
aug: 121000,
sep: 122000,
oct: 123000,
nov: 124000,
dec: 125000
},
{
rowNum: 2,
fab: 'B02',
eqpmGrpNm: '방송기술운',
eqpmNm: 'U/T_LT_CH102',
gubun: '전력량',
jan: 81000,
feb: 82000,
mar: 83000,
apr: 84000,
may: 85000,
jun: 86000,
jul: 87000,
aug: 88000,
sep: 89000,
oct: 90000,
nov: 91000,
dec: 92000
},
{
rowNum: 3, fab: 'C01', eqpmGrpNm: '방송기술운', eqpmNm: 'U/T_LT_CH124', gubun: '수도량',
jan: 106178, feb: 104740, mar: 92283, apr: 116081, may: 98945, jun: 126579,
jul: 90690, aug: 124243, sep: 97524, oct: 84072, nov: 88160, dec: 118183
},
{
rowNum: 4, fab: 'B01', eqpmGrpNm: '방송기술운', eqpmNm: 'U/T_LT_CH103', gubun: '가스량',
jan: 80442, feb: 102867, mar: 114939, apr: 106335, may: 81743, jun: 83711,
jul: 86114, aug: 97432, sep: 84146, oct: 84775, nov: 117921, dec: 119417
},
{
rowNum: 5, fab: 'B01', eqpmGrpNm: '설비운영팀', eqpmNm: 'U/T_LT_CH156', gubun: '전력량',
jan: 90341, feb: 94072, mar: 122754, apr: 85471, may: 90813, jun: 116831,
jul: 90856, aug: 109437, sep: 94029, oct: 96075, nov: 127067, dec: 102503
},
{
rowNum: 6, fab: 'B03', eqpmGrpNm: '방송기술운', eqpmNm: 'U/T_LT_CH183', gubun: '가스량',
jan: 104163, feb: 107012, mar: 104631, apr: 83055, may: 106311, jun: 117306,
jul: 86434, aug: 117087, sep: 118414, oct: 91499, nov: 93829, dec: 94192
},
{
rowNum: 7, fab: 'C01', eqpmGrpNm: '전력관리부', eqpmNm: 'U/T_LT_CH158', gubun: '가스량',
jan: 84821, feb: 128234, mar: 116883, apr: 116718, may: 114738, jun: 88297,
jul: 93840, aug: 84700, sep: 98360, oct: 87021, nov: 113098, dec: 94734
},
{
rowNum: 8, fab: 'B02', eqpmGrpNm: '방송기술운', eqpmNm: 'U/T_LT_CH179', gubun: '가스량',
jan: 128714, feb: 88797, mar: 124808, apr: 109283, may: 113141, jun: 82873,
jul: 114993, aug: 129108, sep: 100885, oct: 125730, nov: 92127, dec: 122286
},
{
rowNum: 9, fab: 'C01', eqpmGrpNm: '전력관리부', eqpmNm: 'U/T_LT_CH191', gubun: '전력량',
jan: 107258, feb: 108424, mar: 113604, apr: 116648, may: 124149, jun: 129978,
jul: 112215, aug: 129602, sep: 93551, oct: 111272, nov: 89736, dec: 128423
},
{
rowNum: 10, fab: 'B02', eqpmGrpNm: '방송기술운', eqpmNm: 'U/T_LT_CH104', gubun: '전력량',
jan: 82089, feb: 102793, mar: 96784, apr: 85238, may: 86153, jun: 123849,
jul: 115095, aug: 129484, sep: 102109, oct: 80976, nov: 119841, dec: 106309
},
{
rowNum: 11, fab: 'C02', eqpmGrpNm: '전력관리부', eqpmNm: 'U/T_LT_CH139', gubun: '전력량',
jan: 128592, feb: 95647, mar: 85982, apr: 126824, may: 87928, jun: 128967,
jul: 94637, aug: 107530, sep: 122533, oct: 97546, nov: 112110, dec: 126250
},
{
rowNum: 12, fab: 'C01', eqpmGrpNm: '설비운영팀', eqpmNm: 'U/T_LT_CH109', gubun: '전력량',
jan: 106530, feb: 91716, mar: 111104, apr: 102663, may: 108912, jun: 91464,
jul: 121245, aug: 90785, sep: 120586, oct: 105718, nov: 96191, dec: 111513
}
];
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
// @import '@/assets/scss/common.scss';
@import '@/assets/scss/var.scss'; @import '@/assets/scss/var.scss';
@each $theme in dark, light { @each $theme in dark, light {
.v-application.#{$theme}-mode { .v-application.#{$theme}-mode {
.tui-grid { .tui-grid {
&-row-odd, &-row-odd,
&-row-even { &-row-even {
&:hover>.colrowspan { &:hover > .colrowspan {
background-color: map-deep-get($config, background-color: map-deep-get(
$config,
#{$theme}, #{$theme},
'tui-grid-cell-backgroundColor' 'tui-grid-cell-backgroundColor'
) !important; ) !important;
@ -1055,10 +838,10 @@ const dataPathDataExample = [
} }
} }
} }
&-cell { &-cell {
&.row-selected.colrowspan { &.row-selected.colrowspan {
background-color: map-deep-get($config, background-color: map-deep-get(
$config,
#{$theme}, #{$theme},
'tui-grid-cell-backgroundColor' 'tui-grid-cell-backgroundColor'
) !important; ) !important;