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-trungvq7-0729

Browse Source
This commit is contained in:
dev
2025-08-06 19:03:14 +09:00
parent 9155a2b55e 484d8879aa
commit 6db0ff96c0
26 changed files with 480 additions and 516 deletions
Download Patch File Download Diff File Expand all files Collapse all files

177
assets/scss/common.scss
View File

@ -611,48 +611,12 @@ a {
} }
} }
// .v-banner {
// &__wrapper {
// border-bottom-color: map-deep-get($config,
// #{$theme},
// "v-banner-border-color"
// ) !important;
// }
// }
.v-navigation-drawer__append { .v-navigation-drawer__append {
>p { >p {
color: map-deep-get($config, #{$theme}, "v-banner-border-color" ) !important; color: map-deep-get($config, #{$theme}, "v-banner-border-color" ) !important;
// @if $theme ==dark {
// color: rgba(255, 255, 255, 0.6);
// }
// @else {
// color: #999;
// }
} }
} }
// .v-footer {
// @if $theme ==light {
// background-color: #dfdfe5;
// color: #767d83;
// }
// }
// .bd {
// @if $theme ==dark {
// &-r-1 {
// border-right: 1px #373f45 solid;
// }
// }
// @else {
// &-r-1 {
// border-right: 1px #efefef solid;
// }
// }
// }
.border-bottom-1 { .border-bottom-1 {
border-bottom: 1px solid map-deep-get($config, #{$theme}, "border-color"); border-bottom: 1px solid map-deep-get($config, #{$theme}, "border-color");
} }
@ -809,114 +773,7 @@ a {
} }
} }
} }
// &>.v-treeview-node__root {
// &:before {
// background-color: map-deep-get($config, #{$theme}, "v-treeview-node-root-backgroundColor" );
// }
// &>.v-treeview-node__content {
// .v-treeview-node__label {
// color: map-deep-get($config, #{$theme}, "v-treeview-node-root-label-color");
// }
// }
// &:hover {
// &>.v-treeview-node__content {
// .v-treeview-node__label {
// color: map-deep-get($config,
// #{$theme},
// "v-treeview-node-root-label-active-color"
// );
// }
// .v-icon {
// color: map-deep-get($config,
// #{$theme},
// "v-treeview-node-root-icon-active-color"
// );
// }
// }
// }
// }
// &>.v-treeview-node__children {
// &>.v-treeview-node {
// &>.v-treeview-node__root {
// &:before {
// background-color: map-deep-get($config,
// #{$theme},
// "v-treeview-node-subroot-backgroundColor"
// );
// }
// &>.v-treeview-node__content {
// .v-treeview-node__label {
// color: map-deep-get($config, #{$theme}, "v-treeview-node-label-color" );
// }
// .v-icon {
// color: map-deep-get($config, #{$theme}, "v-treeview-icon-color" );
// }
// }
// &:not(.v-treeview-node--active):hover {
// &:before {
// background-color: map-deep-get($config,
// #{$theme},
// "v-treeview-leaf-active-backgroundColor"
// );
// }
// &>.v-treeview-node__content {
// .v-treeview-node__label {
// color: map-deep-get($config,
// #{$theme},
// "v-treeview-leaf-active-color"
// );
// }
// .v-icon {
// color: map-deep-get($config,
// #{$theme},
// "v-treeview-leaf-active-color"
// );
// }
// }
// }
// }
// &>.v-treeview-node__children {
// // background-color: map-deep-get($config,
// // #{$theme},
// // "v-treeview-leaf-subchildren-backgroundColor"
// // );
// }
// // &[aria-expanded="true"] {
// // & .v-treeview-node__root>.v-treeview-node__content {
// // .v-treeview-node__label {
// // color: map-deep-get($config,
// // #{$theme},
// // "v-treeview-node-label-children-color"
// // );
// // }
// // .v-icon {
// // color: map-deep-get($config,
// // #{$theme},
// // "v-treeview-icon-active-color"
// // );
// // }
// // }
// // }
// }
// }
} }
} }
@ -1265,19 +1122,40 @@ a {
); );
border: 1px solid map-deep-get($config, #{$theme}, "tui-datepicker-border-color"); border: 1px solid map-deep-get($config, #{$theme}, "tui-datepicker-border-color");
border-radius: 4px; border-radius: 4px;
padding: 4px;
&-item--active { &-item--active {
border-radius: 4px;
&:before { &:before {
opacity: 0; opacity: 0;
} }
.v-list-item__title { .v-list-item__title {
color: map-deep-get($config, color: map-deep-get($config, #{$theme}, "tui-datepicker-calendar-color");
#{$theme},
"tui-datepicker-calendar-color"
);
} }
} }
&.v-select-list{
>.v-list-item {
margin-bottom: 4px;
.anticon {
&.anticon-check {
display: none;
}
}
&[aria-selected="true"] {
border-radius: 8px;
background-color: map-deep-get($config, #{$theme}, "v-treeview-node-label-active-bg");
.anticon {
&.anticon-check {
display: block;
color: map-deep-get($config, #{$theme}, "v-icon-blue");
}
}
}
}
}
} }
.theme--white { .theme--white {
@ -1396,11 +1274,6 @@ a {
} }
} }
} }

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

@ -17,18 +17,6 @@
border: 0 !important; border: 0 !important;
} }
// &-body-container {
// width: 100% !important;
// }
// &-table {
// width: 100% !important;
// }
// &-lside-area .tui-grid-body-area {
// margin-right: -11px;
// }
&-lside-area .tui-grid-scrollbar-left-bottom { &-lside-area .tui-grid-scrollbar-left-bottom {
display: none; display: none;
} }
@ -163,48 +151,28 @@
&-body-container{ &-body-container{
border-right: 0; border-right: 0;
// border-right-color: map-deep-get($config, // position: relative;
// #{$theme},
// "tui-grid-cell-borderColor"
// );
width: auto !important; width: auto !important;
.tui-grid-table-container{
// width: 100% !important;
.tui-grid-table {
// width: 100% !important;
// table-layout: fixed;
// th, td {
// &:last-child{
// width: auto !important;
// }
// }
}
}
} }
&-container, &-summary-area,
&-summary-area { &-container {
font-family: Inter; font-family: Inter;
// color: #000000E0;
& ::-webkit-scrollbar {
width: $scrollbar-width !important;
height: $scrollbar-width !important;
-webkit-appearance: initial;
// background-color: map-deep-get($config,
// #{$theme},
// "tui-grid-cell-borderColor"
// ) !important;
background-color: rgba(0, 0, 0, 0) !important;
border-radius: 3px !important;
}
& ::-webkit-scrollbar-track {
// background-color: map-deep-get($config,
// #{$theme},
// "tui-grid-cell-borderColor"
// ) !important;
background-color: rgba(0, 0, 0, 0) !important;
}
& ::-webkit-scrollbar-thumb {
width: 50px !important;
height: 50px !important;
background-color: map-deep-get($config, #{$theme}, "scrollbar-thumb");
// background-color: rgba(0, 0, 0, 0);
border-radius: 3px;
}
.tui-grid-cell { .tui-grid-cell {
&.tui-grid-cell-summary { &.tui-grid-cell-summary {
color: map-deep-get($config, color: map-deep-get($config,
#{$theme}, #{$theme},
@ -214,6 +182,32 @@
} }
} }
&-body-area {
overflow: auto;
&::-webkit-scrollbar {
width: $scrollbar-width !important;
height: $scrollbar-width !important;
-webkit-appearance: initial;
background-color: rgba(0, 0, 0, 0) !important;
border-radius: 3px !important;
// border-right: 1px solid;
// border-right-color: map-deep-get($config, #{$theme}, "tui-grid-cell-borderColor");
}
&::-webkit-scrollbar-track {
background-color: rgba(0, 0, 0, 0) !important;
}
&::-webkit-scrollbar-thumb {
height: 50px !important;
background-color: map-deep-get($config, #{$theme}, "scrollbar-thumb");
border-radius: 3px;
// width: 50px !important;
// background-color: rgba(0, 0, 0, 0);
}
}
&-rside-area { &-rside-area {
background-color: map-deep-get($config, #{$theme}, "scrollbar-track"); background-color: map-deep-get($config, #{$theme}, "scrollbar-track");
} }
@ -252,13 +246,13 @@
&-scrollbar-right-bottom { &-scrollbar-right-bottom {
width: $scrollbar-width !important; width: $scrollbar-width !important;
height: $scrollbar-width !important; height: $scrollbar-width !important;
// display: none !important;
border-color: map-deep-get($config, #{$theme}, "cardBackground"); border-color: map-deep-get($config, #{$theme}, "cardBackground");
background-color: map-deep-get($config, #{$theme}, "cardBackground"); background-color: map-deep-get($config, #{$theme}, "cardBackground");
box-sizing: border-box;
// display: none !important;
// border: none !important; // border: none !important;
// bottom: -1px; // bottom: -1px;
// right: -2px; // right: -2px;
box-sizing: border-box;
// display: none; // display: none;
} }
@ -369,6 +363,10 @@
#{$theme}, #{$theme},
"tui-grid-cell-backgroundColor" "tui-grid-cell-backgroundColor"
); );
// width: 100% !important;
// .tui-grid-table {
// width: 100% !important;
// }
} }
&-row-odd, &-row-odd,

5
assets/scss/datepicker.scss
View File

@ -15,8 +15,9 @@
border-radius: 6px; border-radius: 6px;
border: solid 1px; border: solid 1px;
height: 32px; height: 32px;
// border-color: #424242; color: map-deep-get($config, #{$theme}, "v-input-fieldset-color") !important;
border-color: map-deep-get($config, #{$theme}, "tui-datepicker-border-color"); border-color: currentColor;
// border-color: map-deep-get($config, #{$theme}, "tui-datepicker-border-color");
&.datepicker-large { &.datepicker-large {
height: 40px; height: 40px;

7
assets/scss/var.scss
View File

@ -110,7 +110,7 @@ $config: (
tui-grid-border-horziontal-color: #212224, tui-grid-border-horziontal-color: #212224,
tui-grid-border-vertical-color: #FFFFFF0F, 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: #FFFFFFA6,
tui-grid-cell-insert-color: #13636c, tui-grid-cell-insert-color: #13636c,
tui-grid-cell-selected-color: #0A224F, tui-grid-cell-selected-color: #0A224F,
tui-grid-cell-modify-color: #13636c, tui-grid-cell-modify-color: #13636c,
@ -211,7 +211,6 @@ $config: (
router-tab-item-hover-color: #1677ff, router-tab-item-hover-color: #1677ff,
router-tab-slot-end-button-backgroundColor: #3f4d7d, router-tab-slot-end-button-backgroundColor: #3f4d7d,
v-btn-backgroundColor: #1677ff, v-btn-backgroundColor: #1677ff,
// v-btn-backgroundColor: #fff,
v-box: #FFFFFF, v-box: #FFFFFF,
v-banner-border-color: #ddd, v-banner-border-color: #ddd,
v-treeview-node-root-backgroundColor: #FFFFFF, v-treeview-node-root-backgroundColor: #FFFFFF,
@ -253,10 +252,10 @@ $config: (
tui-grid-border-vertical-color: rgba(0, 0, 0, 0.06), //#d4d4d4, tui-grid-border-vertical-color: rgba(0, 0, 0, 0.06), //#d4d4d4,
tui-grid-cell-backgroundColor: #fff, tui-grid-cell-backgroundColor: #fff,
tui-grid-cell-color: #000000E0, tui-grid-cell-color: #000000E0,
tui-grid-cell-insert-color: #13636c, tui-grid-cell-insert-color: #FFFBE6,
tui-grid-cell-selected-color: #E6F4FF, tui-grid-cell-selected-color: #E6F4FF,
tui-grid-cell-modify-color: #e6f5f7, tui-grid-cell-modify-color: #e6f5f7,
tui-grid-cell-removed-color: #fddde1, tui-grid-cell-removed-color: #FFF1F0,
tui-grid-cell-hover-backgroundColor: #f5f5f5, tui-grid-cell-hover-backgroundColor: #f5f5f5,
v-tabs-items-border-color: #0000000F, v-tabs-items-border-color: #0000000F,
v-tabs-backgroundColor: #ddd, v-tabs-backgroundColor: #ddd,

2
components/common/DatepickerTimeSelectBox.vue
View File

@ -52,6 +52,7 @@
selectBoxTimeItemList.minInterval ? selectBoxTimeItemList.minInterval : 1 selectBoxTimeItemList.minInterval ? selectBoxTimeItemList.minInterval : 1
" "
@update:propsValue="selectTimeValue1 = $event" @update:propsValue="selectTimeValue1 = $event"
customClass="select-large"
/> />
<!-- <div v-show="isRange" class="mx-3" :style="{ lineHeight: 0 }">~</div> --> <!-- <div v-show="isRange" class="mx-3" :style="{ lineHeight: 0 }">~</div> -->
@ -99,6 +100,7 @@
selectBoxTimeItemList.minInterval ? selectBoxTimeItemList.minInterval : 1 selectBoxTimeItemList.minInterval ? selectBoxTimeItemList.minInterval : 1
" "
@update:propsValue="selectTimeValue2 = $event" @update:propsValue="selectTimeValue2 = $event"
customClass="select-large"
/> />
</div> </div>
</v-col> </v-col>

20
components/common/Grid.vue
View File

@ -617,6 +617,7 @@ export default {
list.map(item => this.gridInstance.invoke('check', item)); list.map(item => this.gridInstance.invoke('check', item));
}, },
refreshLayout() { refreshLayout() {
// console.log("---------DEBUG---refreshLayout: ");
this.gridInstance.invoke('refreshLayout'); this.gridInstance.invoke('refreshLayout');
}, },
refreshGrid(){ refreshGrid(){
@ -626,10 +627,8 @@ export default {
// var containerEl = document.querySelector('.tui-grid-container') // var containerEl = document.querySelector('.tui-grid-container')
var parentEl = containerEl.parentElement; var parentEl = containerEl.parentElement;
// console.log("---------DEBUG---containerEl: ",containerEl);
// console.log('---------DEBUG---parentEl: ', parentEl)
// console.log("containerEl : ",containerEl);
// console.log('parentEl : ', parentEl)
// function refreshLayout(store, containerEl, parentEl) { // function refreshLayout(store, containerEl, parentEl) {
var dimension = store.dimension; var dimension = store.dimension;
var autoWidth = dimension.autoWidth, fitToParentHeight = dimension.fitToParentHeight; var autoWidth = dimension.autoWidth, fitToParentHeight = dimension.fitToParentHeight;
@ -654,25 +653,25 @@ export default {
// } // }
}, },
setOffsetTop(store, offsetTop) { setOffsetTop(store, offsetTop) {
// console.log("setOffsetTop"); // console.log("---------DEBUG---setOffsetTop: ");
store.dimension.offsetTop = offsetTop; store.dimension.offsetTop = offsetTop;
}, },
setWidth(_a, width, autoWidth) { setWidth(_a, width, autoWidth) {
// console.log("setWidth"); // console.log("---------DEBUG---setWidth: ");
var dimension = _a.dimension; var dimension = _a.dimension;
dimension.autoWidth = autoWidth; dimension.autoWidth = autoWidth;
dimension.width = width; dimension.width = width;
}, },
setHeaderHeight(store, height) { setHeaderHeight(store, height) {
// console.log("setHeaderHeight") // console.log("---------DEBUG---setHeaderHeight: ");
store.dimension.headerHeight = height; store.dimension.headerHeight = height;
}, },
setOffsetLeft(store, offsetLeft) { setOffsetLeft(store, offsetLeft) {
// console.log("setOffsetLeft") // console.log("---------DEBUG---setOffsetLeft: ");
store.dimension.offsetLeft = offsetLeft; store.dimension.offsetLeft = offsetLeft;
}, },
setHeight(_a,height){ setHeight(_a,height){
// console.log("setHeight"); // console.log("---------DEBUG---setHeight: ");
var dimension = _a.dimension; var dimension = _a.dimension;
var headerHeight = dimension.headerHeight, summaryHeight = dimension.summaryHeight, tableBorderWidth = dimension.tableBorderWidth; var headerHeight = dimension.headerHeight, summaryHeight = dimension.summaryHeight, tableBorderWidth = dimension.tableBorderWidth;
dimension.bodyHeight = height - headerHeight - summaryHeight - tableBorderWidth; dimension.bodyHeight = height - headerHeight - summaryHeight - tableBorderWidth;
@ -703,10 +702,11 @@ export default {
// resetData() { // resetData() {
// // console.log("resetData = ", this.tuigridProps.data); // // console.log("resetData = ", this.tuigridProps.data);
// this.$refs.tuigrid.invoke("resetData", this.tuigridProps.data); // this.$refs.tuigrid.invoke("resetData", this.tuigridProps.data);
// } // },
}, },
}; };
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
::v-deep .tui-grid-container { ::v-deep .tui-grid-container {
.tui-grid-content-area { .tui-grid-content-area {

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

@ -1,5 +1,7 @@
<template> <template>
<div class="d-flex flex-row justify-center align-center" style="gap: 12px"> <div class="d-flex justify-center align-center"
:class="directionBtn === 'vertically'?'flex-row':'flex-column'"
style="gap: 12px">
<a-button @click="btnActionsFnc('removeRightToLeft')" type="primary" ghost :icon="icons.remove" > <a-button @click="btnActionsFnc('removeRightToLeft')" type="primary" ghost :icon="icons.remove" >
</a-button> </a-button>
<a-button @click="btnActionsFnc('addLeftToRight')" type="primary" ghost :icon="icons.add"> <a-button @click="btnActionsFnc('addLeftToRight')" type="primary" ghost :icon="icons.add">

4
components/common/form/SelectBox.vue
View File

@ -17,7 +17,9 @@
:item-text="typeof item.list != 'string' ? 'text' : item.itemText" :item-text="typeof item.list != 'string' ? 'text' : item.itemText"
:item-value="typeof item.list != 'string' ? 'value' : item.itemValue" outlined :hide-details="true" :item-value="typeof item.list != 'string' ? 'value' : item.itemValue" outlined :hide-details="true"
class="v-select__custom" :disabled="item.disabled || false" :readonly="item.readonly || false" class="v-select__custom" :disabled="item.disabled || false" :readonly="item.readonly || false"
:required="item.required || false" @change="modifyValue($event, item.valueNm)" append-icon=""> :required="item.required || false" @change="modifyValue($event, item.valueNm)" append-icon=""
:menu-props="{ top: false, offsetY: true }"
>
<template v-slot:append> <template v-slot:append>
<!-- Custom SVG icon --> <!-- Custom SVG icon -->

15
components/common/modal/EqpmSelectPop.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<v-row class="search-box" align="center" no-gutters> <v-row class="search-box" align="center" no-gutters>
<v-col v-if="label" :cols="labelCols"> <v-col v-if="label" :cols="labelCols" class="mr-2">
<label for="" class="search-box-label"> <label for="" class="search-box-label">
<v-icon v-if="iconShow" small <v-icon v-if="iconShow" small
:class="['mr-1', required ? 'icon-orange' : 'icon-blue']">$icoBulletPoint</v-icon> :class="['mr-1', required ? 'icon-orange' : 'icon-blue']">$icoBulletPoint</v-icon>
@ -13,8 +13,8 @@
:disabled="disabled || false"><template v-slot:append> :disabled="disabled || false"><template v-slot:append>
<!-- Custom SVG icon --> <!-- Custom SVG icon -->
<v-icon>$icoSearch</v-icon> <v-icon>$icoSearch</v-icon>
</template>
</template></v-text-field> </v-text-field>
</v-col> </v-col>
<v-dialog ref="popModal" v-model="dialog" width="800" content-class="custom-dialog" scrollable> <v-dialog ref="popModal" v-model="dialog" width="800" content-class="custom-dialog" scrollable>
<v-card style="height: 100%;"> <v-card style="height: 100%;">
@ -32,13 +32,13 @@
:label="'설비그룹'" :disabled="eqpmGrpDisabled" @update:propsValue="selectValue01 = $event" :label="'설비그룹'" :disabled="eqpmGrpDisabled" @update:propsValue="selectValue01 = $event"
:labelCols="12" :textCols="12" :iconShow="true" /> :labelCols="12" :textCols="12" :iconShow="true" />
</v-col> </v-col>
<v-col :cols="3.5"> <v-col>
<!-- FAB --> <!-- FAB -->
<component :is="'SelectBoxMulti'" :propsValue="selectValue02" :itemList="selectValueList02" <component :is="'SelectBoxMulti'" :propsValue="selectValue02" :itemList="selectValueList02"
:label="'FAB'" :labelCols="12" :multiple="true" :disabled="fabDisabled" :label="'FAB'" :labelCols="12" :multiple="true" :disabled="fabDisabled"
@update:propsValue="selectValue02 = $event" :textCols="12" :iconShow="true" /> @update:propsValue="selectValue02 = $event" :textCols="12" :iconShow="true" />
</v-col> </v-col>
<v-col :cols="3.5"> <v-col >
<v-row> <v-row>
<v-col :cols="12" class="py-0"> <v-col :cols="12" class="py-0">
<label for="" class="search-box-label"> <label for="" class="search-box-label">
@ -122,6 +122,11 @@ export default {
require: false, require: false,
default: '전력 계약 정보', default: '전력 계약 정보',
}, },
placeholder: {
type: String,
require: false,
default: '',
},
valueNm: { valueNm: {
type: String, type: String,
require: false, require: false,

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

@ -9,7 +9,9 @@
<v-col :cols="label ? textCols : ''"> <v-col :cols="label ? textCols : ''">
<v-select v-model="selectValue" :items="searchParam[parentPrgmId].blocMstrList" <v-select v-model="selectValue" :items="searchParam[parentPrgmId].blocMstrList"
item-text="blocNm" item-value="idx" append-icon="" outlined item-text="blocNm" item-value="idx" append-icon="" outlined
:hide-details="true" :class="['v-select__custom', customClass]"> :hide-details="true" :class="['v-select__custom', customClass]"
:menu-props="{ top: false, offsetY: true }"
>
<template v-slot:append><v-icon>$icoChevronDown</v-icon></template> <template v-slot:append><v-icon>$icoChevronDown</v-icon></template>
</v-select> </v-select>
</v-col> </v-col>

10
components/common/select/SelectBox.vue
View File

@ -14,12 +14,14 @@
<v-col :cols="label ? textCols : ''"> <v-col :cols="label ? textCols : ''">
<v-select v-model="innerValue" :items="itemList" item-text="text" item-value="value" solo outlined <v-select v-model="innerValue" :items="itemList" item-text="text" item-value="value" solo outlined
:hide-details="true" append-icon="" :class="['v-select__custom', customClass]" :disabled="disabled" :hide-details="true" append-icon="" :class="['v-select__custom', customClass]" :disabled="disabled"
:readonly="readonly"><template v-slot:append> :readonly="readonly"
:menu-props="{ top: false, offsetY: true }"
>
<template v-slot:append>
<!-- Custom SVG icon --> <!-- Custom SVG icon -->
<v-icon>$icoChevronDown</v-icon> <v-icon>$icoChevronDown</v-icon>
</template>
</v-select>
</template></v-select>
<!-- @change="updateBlocCode($event)" --> <!-- @change="updateBlocCode($event)" -->
</v-col> </v-col>
</v-row> </v-row>

21
components/common/select/SelectBoxMulti.vue
View File

@ -24,9 +24,24 @@
:disabled="disabled" :disabled="disabled"
:readonly="readonly" :readonly="readonly"
append-icon="" append-icon=""
><template v-slot:append> :menu-props="{ top: false, offsetY: true }"
>
<template v-slot:append>
<v-icon>$icoChevronDown</v-icon> <v-icon>$icoChevronDown</v-icon>
</template></v-select> </template>
<template v-slot:item="{item, attrs, on, props}">
<v-list-item v-bind="attrs" v-on="on" >
<v-list-item-content>
<v-list-item-title class="d-flex justify-space-between">
{{item.text}}
<a-icon type="check" ></a-icon>
</v-list-item-title>
</v-list-item-content>
</v-list-item>
</template>
</v-select>
</v-col> </v-col>
</v-row> </v-row>
</template> </template>
@ -125,4 +140,4 @@ export default {
}; };
</script> </script>
<style></style> <style scoped lang="scss"></style>

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

@ -22,7 +22,7 @@
outlined outlined
:menu-props="{ auto: true, offsetY: true }" :menu-props="{ auto: true, offsetY: true }"
:hide-details="true" :hide-details="true"
:class="'v-select__custom'" :class="['v-select__custom', customClass]"
:disabled="disabled" :disabled="disabled"
:readonly="readonly" :readonly="readonly"
@click="setDatepickerHide" @click="setDatepickerHide"
@ -106,6 +106,10 @@ export default {
require: false, require: false,
default: 1, default: 1,
}, },
customClass: {
type: String,
require: false,
},
}, },
emits: ["update:propsValue"], emits: ["update:propsValue"],
data() { data() {

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

@ -11,7 +11,9 @@
<v-col :cols="label ? textCols : ''"> <v-col :cols="label ? textCols : ''">
<v-select v-model="selectValue" :items="searchParam[parentPrgmId][dataKey + 'List']" item-text="commCdNm" <v-select v-model="selectValue" :items="searchParam[parentPrgmId][dataKey + 'List']" item-text="commCdNm"
item-value="commCd" outlined :hide-details="true" append-icon="" item-value="commCd" outlined :hide-details="true" append-icon=""
:class="['v-select__custom', customClass]"> :class="['v-select__custom', customClass]"
:menu-props="{ top: false, offsetY: true }"
>
<template v-slot:append> <template v-slot:append>
<v-icon>$icoChevronDown</v-icon> <v-icon>$icoChevronDown</v-icon>
</template> </template>

2
components/pages/ems/DataSetInfo/DataSetTagRelTab.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div> <div>
<div class="d-flex justify-space-between align-center" style="min-height: 80px;"> <div class="d-flex justify-space-between align-center" style="min-height: 80px;">
<span class="txt custom-title-4-new">Data Set TAG 연결 정보</span> <span class="txt custom-subtitle-tab">Data Set TAG 연결 정보</span>
<Buttons :parentPrgmId="parentPrgmId" :bindingData="gridName" :detailList="detailDataSetTagList" <Buttons :parentPrgmId="parentPrgmId" :bindingData="gridName" :detailList="detailDataSetTagList"
:btnActionsFnc="btnActions" /> :btnActionsFnc="btnActions" />
</div> </div>

10
components/pages/ems/EqpmInfo/EqpmAddInfoTab.vue
View File

@ -8,7 +8,7 @@
:btnActionsFnc="btnActions" :btnActionsFnc="btnActions"
/> />
</div> </div>
<div ref="gridParent" style="height: calc(100vh - 520px);"> <div ref="gridParent" class="w100" style="height: calc(100vh - 520px);">
<Grid <Grid
:ref="gridName" :ref="gridName"
:is="loadGrid ? 'Grid' : null" :is="loadGrid ? 'Grid' : null"
@ -55,9 +55,9 @@ export default {
dataPathMock: { dataPathMock: {
'rowDetailGrid' : { 'rowDetailGrid' : {
column: [ column: [
{ header: '추가 정보', name: 'id', headerAlign: 'left' }, { header: '추가 정보', name: 'id', headerAlign: 'left', align: 'left', },
{ header: 'Data 구분', name: 'lable', headerAlign: 'left' }, { header: 'Data 구분', name: 'lable', headerAlign: 'left', align: 'left' },
{ header: '추가 정보 값', name: 'type', headerAlign: 'left' }, { header: '추가 정보 값', name: 'type', headerAlign: 'left', align: 'right' },
// { header: '비고', name: 'note', headerAlign: 'left' } // { header: '비고', name: 'note', headerAlign: 'left' }
], ],
data: dataPathDataExample, data: dataPathDataExample,
@ -296,7 +296,7 @@ export default {
{ {
header: '추가 정보 값', header: '추가 정보 값',
name: 'addInfoVal', name: 'addInfoVal',
align: 'center', align: 'left',
renderer: { renderer: {
type: CustomRenderer, type: CustomRenderer,
}, },

17
components/pages/ems/EqpmInfo/EqpmIaoTab.vue
View File

@ -8,7 +8,7 @@
:btnActionsFnc="btnActions" :btnActionsFnc="btnActions"
/> />
</div> </div>
<div ref="gridParent" style="height: calc(100vh - 800px);"> <div ref="gridParent" style="height: calc(100vh - 700px);">
<Grid <Grid
:ref="gridName" :ref="gridName"
:is="loadGrid ? 'Grid' : null" :is="loadGrid ? 'Grid' : null"
@ -18,7 +18,7 @@
:innerTabGridInfo="innerTabGridInfo" :innerTabGridInfo="innerTabGridInfo"
/> />
</div> </div>
<div style="min-height: calc(100vh - 900px);" class="mt-4"> <div style="height: 60vh;" class="mt-5">
<component <component
:is="'Form'" :is="'Form'"
:parentPrgmId="parentPrgmId" :parentPrgmId="parentPrgmId"
@ -114,7 +114,7 @@ export default {
this.detailList[2].class = 'py-3 d-none'; this.detailList[2].class = 'py-3 d-none';
this.detailList[3].class = 'py-3 pl-4 pt-1 d-none'; this.detailList[3].class = 'py-3 pl-4 pt-1 d-none';
this.detailList[4].class = 'py-3'; this.detailList[4].class = 'py-3 pl-4';
this.detailList[5].class = 'py-3 pl-4'; this.detailList[5].class = 'py-3 pl-4';
this.detailList[6].class = 'py-3 pl-4 pt-0'; this.detailList[6].class = 'py-3 pl-4 pt-0';
} else { } else {
@ -230,7 +230,7 @@ export default {
{ {
header: '대상 유형', header: '대상 유형',
name: 'objKind', name: 'objKind',
align: 'center', align: 'left',
formatter({ value }) { formatter({ value }) {
var retVal = ''; var retVal = '';
@ -261,7 +261,7 @@ export default {
{ {
header: '계산여부', header: '계산여부',
name: 'calcFg', name: 'calcFg',
align: 'center', align: 'left',
formatter({ value }) { formatter({ value }) {
value = value === true ? '1' : '0'; value = value === true ? '1' : '0';
const newValue = _this.pageData.useFgList.filter( const newValue = _this.pageData.useFgList.filter(
@ -612,3 +612,10 @@ const myEqpmIaoDetail = [
}, },
]; ];
</script> </script>
<style lang="scss" scoped >
::v-deep {
.tui-grid-layer-state {
top: 40px !important;
}
}
</style>

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

@ -20,6 +20,12 @@
</v-card> </v-card>
</v-col> </v-col>
</v-row> </v-row>
<!-- Create the line between date picker and form -->
<v-row class="my-5" no-gutters>
<v-col>
<div style="height: 1px; background-color: #ccc;"></div>
</v-col>
</v-row>
<v-row class="search-box" align="center" no-gutters style="height: 44px;"> <v-row class="search-box" align="center" no-gutters style="height: 44px;">
<v-col :cols="4"> <v-col :cols="4">
<label for="" class="search-box-label"> <label for="" class="search-box-label">

123
pages/comm/auth/MenuRoleMngPage.vue
View File

@ -5,22 +5,12 @@
<v-card class="searchFilter"> <v-card class="searchFilter">
<v-row algin="end" no-gutters> <v-row algin="end" no-gutters>
<v-col :cols="3"> <v-col :cols="3">
<InputText <InputText :parentPrgmId="myPrgmId" label="역할ID" valueNm="roleId" :searchOption="true"
:parentPrgmId="myPrgmId" customClass="input-large" />
label="역할ID"
valueNm="roleId"
:searchOption="true"
customClass="input-large"
/>
</v-col> </v-col>
<v-col :cols="3"> <v-col :cols="3">
<InputText <InputText :parentPrgmId="myPrgmId" label="역할명" valueNm="roleNm" :searchOption="true"
:parentPrgmId="myPrgmId" customClass="input-large" />
label="역할명"
valueNm="roleNm"
:searchOption="true"
customClass="input-large"
/>
</v-col> </v-col>
<v-col class="text-right d-flex justify-end align-end mr-3"> <v-col class="text-right d-flex justify-end align-end mr-3">
<BtnSearch size="large" /> <BtnSearch size="large" />
@ -31,80 +21,54 @@
</v-row> </v-row>
<v-row ref="contents"> <v-row ref="contents">
<v-col cols="12" lg="2" > <v-col cols="12" lg="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>
<div ref="gridParent" class="px-5" style="height: 60vh;"> <div ref="gridParent" class="px-5" style="height: 60vh;">
<component <component :is="loadGrid ? 'Grid' : null" :ref="gridName + myPrgmId" :gridName="gridName"
:is="loadGrid ? 'Grid' : null" :parentPrgmId="myPrgmId" @getRowsData="getRowData" />
:ref="gridName + myPrgmId"
:gridName="gridName"
:parentPrgmId="myPrgmId"
@getRowsData="getRowData"
/>
</div> </div>
</v-card> </v-card>
</v-col> </v-col>
<v-col cols="12" lg="10" > <v-col cols="12" lg="9">
<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-row <v-row align="center" no-gutters :style="{ height: 'calc(100% - 62px)' }" class="px-5">
align="center" <v-col class="h100" style="max-width: 400px;">
no-gutters <span class="body-1 font-weight-bold d-flex align-center"
:style="{ height: 'calc(100% - 62px)' }" :style="{ minHeight: '36px' }">[미배정]메뉴리스트</span>
class="px-5"
>
<v-col :cols="4" class="h100">
<span
class="body-1 font-weight-bold d-flex align-center"
:style="{ minHeight: '36px' }"
>[미배정]메뉴리스트</span
>
<div ref="treeGridParent" class="px-0 mt-2" style="height: 60vh;"> <div ref="treeGridParent" class="px-0 mt-2" style="height: 60vh;">
<!-- <div <!-- <div
ref="treeGridParent" ref="treeGridParent"
class="w100 h100" class="w100 h100"
> >
</div> --> </div> -->
<component <component :is="loadTreeGrid ? 'Grid' : null" :ref="gridName2 + myPrgmId"
:is="loadTreeGrid ? 'Grid' : null" :gridName="gridName2" :parentPrgmId="myPrgmId" @getRowsData="getUnAsgnRowData" />
:ref="gridName2 + myPrgmId"
:gridName="gridName2"
:parentPrgmId="myPrgmId"
@getRowsData="getUnAsgnRowData"
/>
</div> </div>
</v-col> </v-col>
<v-col :cols="1"> <!-- <v-col :cols="1.5">
<ActionButtons <ActionButtons :parentPrgmId="myPrgmId" :leftGridName="gridName2" :rightGridName="gridName3"
:parentPrgmId="myPrgmId" :btnActionsFnc="dualGridBtnActions" />
:leftGridName="gridName2" </v-col> -->
:rightGridName="gridName3" <div class="pr-2">
:btnActionsFnc="dualGridBtnActions" <ActionButtons :parentPrgmId="myPrgmId" :leftGridName="gridName2" :rightGridName="gridName3"
/> :btnActionsFnc="dualGridBtnActions" />
</v-col> </div>
<v-col :cols="7" class="h100"> <v-col :cols="7" class="h100">
<v-row <v-row justify="space-between" align="center" no-gutters class="px-5">
justify="space-between"
align="center"
no-gutters
class="px-5"
>
<v-col :cols="11"> <v-col :cols="11">
<span class="body-1 font-weight-bold" <span class="body-1 font-weight-bold d-flex align-center"
>[배정]메뉴별권한 리스트</span :style="{ minHeight: '36px' }">[배정]메뉴별권한 리스트</span>
> <!-- <span class="body-1 font-weight-bold">[배정]메뉴별권한 리스트</span> -->
</v-col> </v-col>
<v-col :cols="1" class="text-right"> <v-col :cols="1" class="text-right">
<Buttons <Buttons :parentPrgmId="myPrgmId" :bindingData="gridName3"
:parentPrgmId="myPrgmId" :btnActionsFnc="btnActions" />
:bindingData="gridName3"
:btnActionsFnc="btnActions"
/>
</v-col> </v-col>
</v-row> </v-row>
<div ref="treeGridParent2" class="px-0 mt-2" style="height: 60vh;"> <div ref="treeGridParent2" class="px-0 mt-2" style="height: 60vh;">
@ -113,14 +77,9 @@
class="w100 h100" class="w100 h100"
> >
</div> --> </div> -->
<component <component :is="loadTreeGrid2 ? 'Grid' : null" :ref="gridName3 + myPrgmId"
:is="loadTreeGrid2 ? 'Grid' : null" :gridName="gridName3" :parentPrgmId="myPrgmId" :editorGrid="true"
:ref="gridName3 + myPrgmId" @getRowsData="getAsgnRowData" />
:gridName="gridName3"
:parentPrgmId="myPrgmId"
:editorGrid="true"
@getRowsData="getAsgnRowData"
/>
</div> </div>
</v-col> </v-col>
</v-row> </v-row>
@ -286,8 +245,8 @@ export default {
async gridInit() { async gridInit() {
//---------------------gridOption 설정 시작---------------------------- //---------------------gridOption 설정 시작----------------------------
const gridHeight = this.$refs.gridParent.offsetHeight - 30; const gridHeight = this.$refs.gridParent.offsetHeight - 30;
const treeGridHeight = this.$refs.treeGridParent.offsetHeight - 30; const treeGridHeight = this.$refs.treeGridParent.offsetHeight - 50;
const treeGridHeight2 = this.$refs.treeGridParent2.offsetHeight - 30; const treeGridHeight2 = this.$refs.treeGridParent2.offsetHeight - 50;
// const gridHeight = this.$refs.contents.offsetHeight - 30; // const gridHeight = this.$refs.contents.offsetHeight - 30;
const myOptions = { const myOptions = {
@ -316,8 +275,10 @@ export default {
treeColumnOptions: { treeColumnOptions: {
name: 'menuNm', name: 'menuNm',
}, },
scrollX: false, rowHeight: 37,
// scrollY: false, minRowHeight: 37,
scrollX: true,
scrollY: true,
}; };
this.setGridOption({ this.setGridOption({
@ -347,6 +308,9 @@ export default {
const el = document.createElement('input'); const el = document.createElement('input');
const { grid, rowKey, columnInfo } = props; const { grid, rowKey, columnInfo } = props;
el.type = 'checkbox'; el.type = 'checkbox';
$(el).css('width', '16px');
$(el).css('height', '16px');
$(el).css('accent-color', '#1677FF');
el.value = props.value; el.value = props.value;
this.el = el; this.el = el;
@ -380,12 +344,12 @@ export default {
const _this = this; const _this = this;
const myColumns = [ const myColumns = [
{ header: '역할ID', name: 'roleId', align: 'center', minWidth: 70 }, { header: '역할ID', name: 'roleId', align: 'left', minWidth: 70,width:120 },
{ header: '역할명', name: 'roleNm', minWidth: 70 }, { header: '역할명', name: 'roleNm', minWidth: 70, align: 'left',width:120 },
{ {
header: '사용여부', header: '사용여부',
name: 'useFg', name: 'useFg',
align: 'center', align: 'left',
minWidth: 84, minWidth: 84,
formatter({ value }) { formatter({ value }) {
const newValue = _this.pageData.useFgList.filter( const newValue = _this.pageData.useFgList.filter(
@ -408,6 +372,7 @@ export default {
{ {
header: '메뉴명', header: '메뉴명',
name: 'menuNm', name: 'menuNm',
maxWidth: 120,
validation: { validation: {
dataType: 'string', dataType: 'string',
validatorFn: (value, row) => { validatorFn: (value, row) => {

83
pages/comm/base/PrgmMngPage.vue
View File

@ -7,28 +7,15 @@
<v-card class="searchFilter"> <v-card class="searchFilter">
<v-row align="end" no-gutters> <v-row align="end" no-gutters>
<v-col :cols="3"> <v-col :cols="3">
<component <component :is="'selectCodeList'" :parentPrgmId="myPrgmId" :label="'사용여부'"
:is="'selectCodeList'" :dataKey="'selectUseFg'" :sendParam="{ commGrpCd: 'CO_USEFG', useFg: '1' }"
:parentPrgmId="myPrgmId" :addAll="true" customClass="select-large" />
:label="'사용여부'"
:dataKey="'selectUseFg'"
:sendParam="{ commGrpCd: 'CO_USEFG', useFg: '1' }"
:addAll="true"
customClass="select-large"
/>
</v-col> </v-col>
<v-col :cols="3"> <v-col :cols="3">
<InputText <InputText :parentPrgmId="myPrgmId" label="프로그램명" valueNm="prgmNm" :searchOption="true"
:parentPrgmId="myPrgmId" :labelCols="12" :textCols="12" customClass="input-large" />
label="프로그램명"
valueNm="prgmNm"
:searchOption="true"
:labelCols="12"
:textCols="12"
customClass="input-large"
/>
</v-col> </v-col>
<v-col :cols="5" class="text-right"> <v-col :cols="6" class="text-right">
<BtnSearch size="large" /> <BtnSearch size="large" />
</v-col> </v-col>
</v-row> </v-row>
@ -39,28 +26,19 @@
<v-row ref="contents"> <v-row ref="contents">
<!-- 프로그램 리스트 --> <!-- 프로그램 리스트 -->
<v-col :cols="5"> <v-col :cols="5">
<v-card class="pb-5"> <v-card class="pa-5">
<div class="d-flex align-center justify-space-between pa-5"> <div class="d-flex align-center justify-space-between">
<v-card-title class="pa-0">프로그램 리스트</v-card-title> <v-card-title class="pa-0">프로그램 리스트</v-card-title>
<div> <div>
<Buttons <Buttons :parentPrgmId="myPrgmId" :bindingData="gridName" :detailList="detailList"
:parentPrgmId="myPrgmId" :btnActionsFnc="btnActions" />
:bindingData="gridName"
:detailList="detailList"
:btnActionsFnc="btnActions"
/>
</div> </div>
</div> </div>
<div ref="gridParent" style="height: 60vh"> <div ref="gridParent" class="pt-5" style="height: 60vh">
<!-- <div ref="gridParent" class="px-5 h100"> <!-- <div ref="gridParent" class="px-5 h100">
</div> --> </div> -->
<component <component :ref="gridName" :is="loadGrid ? 'Grid' : null" :parentPrgmId="myPrgmId"
:ref="gridName" :gridName="gridName" @getRowsData="getRowData" />
:is="loadGrid ? 'Grid' : null"
:parentPrgmId="myPrgmId"
:gridName="gridName"
@getRowsData="getRowData"
/>
</div> </div>
</v-card> </v-card>
</v-col> </v-col>
@ -71,13 +49,8 @@
<v-card-title class="pa-0">프로그램 상세</v-card-title> <v-card-title class="pa-0">프로그램 상세</v-card-title>
</div> </div>
<div class="px-5" style="min-height:calc(100% - 76px)"> <div class="px-5" style="min-height:calc(100% - 76px)">
<component <component :is="'Form'" :parentPrgmId="myPrgmId" :bindingData="gridName"
:is="'Form'" :detailList="detailList" @gridEditingFinish="gridEditingFinish" />
:parentPrgmId="myPrgmId"
:bindingData="gridName"
:detailList="detailList"
@gridEditingFinish="gridEditingFinish"
/>
<!-- <div class="w100"> <!-- <div class="w100">
</div> --> </div> -->
</div> </div>
@ -139,8 +112,6 @@ export default {
{ header: '타임', name: 'field3', align: 'left' }, { header: '타임', name: 'field3', align: 'left' },
{ header: '사용여부', name: 'field4', align: 'left' } { header: '사용여부', name: 'field4', align: 'left' }
], ],
data: dataPathDataExample,
defaultRow: dataPathDataExample,
option: { option: {
scrollY: false, scrollY: false,
scrollX: false, scrollX: false,
@ -487,7 +458,7 @@ const myDetail = [
valueNm: 'prgmTpCd', valueNm: 'prgmTpCd',
essential: true, essential: true,
cols: 6, cols: 6,
class: 'py-2', class: 'py-2 pt-5',
list: [ list: [
{ text: '프로그램', value: '1' }, { text: '프로그램', value: '1' },
{ text: '팝업', value: '2' }, { text: '팝업', value: '2' },
@ -502,10 +473,11 @@ const myDetail = [
essential: true, essential: true,
disabled: false, disabled: false,
cols: 6, cols: 6,
class: 'py-2', class: 'py-2 pt-13',
value: { '1': true, '0': false }, value: { '1': true, '0': false },
required: true, required: true,
textCols: 12, textCols: 12,
labelCols:12,
iconShow: true iconShow: true
}, },
{ {
@ -514,7 +486,7 @@ const myDetail = [
valueNm: 'url', valueNm: 'url',
disabled: false, disabled: false,
cols: 12, cols: 12,
class: 'py-2', class: 'py-2 pt-4',
required: true, required: true,
textCols: 12, textCols: 12,
iconShow: true iconShow: true
@ -525,7 +497,7 @@ const myDetail = [
valueNm: 'regUserNo', valueNm: 'regUserNo',
disabled: true, disabled: true,
cols: 6, cols: 6,
class: 'py-2', class: 'py-2 pt-5',
placeholder: '시스템 자동입력', placeholder: '시스템 자동입력',
textCols: 12, textCols: 12,
iconShow: true iconShow: true
@ -536,7 +508,7 @@ const myDetail = [
valueNm: 'regDttm', valueNm: 'regDttm',
disabled: true, disabled: true,
cols: 6, cols: 6,
class: 'py-2', class: 'py-2 pt-5',
placeholder: '시스템 자동입력', placeholder: '시스템 자동입력',
textCols: 12, textCols: 12,
iconShow: true iconShow: true
@ -547,7 +519,7 @@ const myDetail = [
valueNm: 'procUserNo', valueNm: 'procUserNo',
disabled: true, disabled: true,
cols: 6, cols: 6,
class: 'py-2', class: 'py-2 pt-5',
placeholder: '시스템 자동입력', placeholder: '시스템 자동입력',
textCols: 12, textCols: 12,
iconShow: true iconShow: true
@ -558,19 +530,10 @@ const myDetail = [
valueNm: 'procDttm', valueNm: 'procDttm',
disabled: true, disabled: true,
cols: 6, cols: 6,
class: 'py-2', class: 'py-2 pt-5',
placeholder: '시스템 자동입력', placeholder: '시스템 자동입력',
textCols: 12, textCols: 12,
iconShow: true iconShow: true
}, },
]; ];
import { getPathDataExample } from '@/const/const'
const dataPathDataExample = getPathDataExample({
field1: 'PRG0001',
field2: '대시보드',
field3: '프로그램',
field4: '사용'
});
</script> </script>

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

@ -803,7 +803,7 @@ export default {
header: "NO", header: "NO",
name: "rowNum", name: "rowNum",
width: 70, width: 70,
align: "center", align: "right",
// hidden: true, // hidden: true,
}, },
{ {

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

@ -167,7 +167,7 @@ export default {
header: '설비종류ID', header: '설비종류ID',
name: 'eqpmKindId', name: 'eqpmKindId',
width: gridWidth * 0.5, width: gridWidth * 0.5,
align: 'center', align: 'left',
}, },
{ {
header: '설비종류명', header: '설비종류명',

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

@ -382,7 +382,7 @@ export default {
header: '사용 여부', header: '사용 여부',
name: 'useFg', name: 'useFg',
width: 100, width: 100,
align: 'center', align: 'left',
formatter({ value }) { formatter({ value }) {
const newValue = _this.pageData.useFgList.filter( const newValue = _this.pageData.useFgList.filter(
item => item.commCd == value, item => item.commCd == value,

4
pages/ems/effc/DataSetMngPage.vue
View File

@ -27,7 +27,7 @@
</v-col> </v-col>
<v-col class="text-right d-flex align-end align-self-end justify-end"> <v-col class="text-right d-flex align-end align-self-end justify-end">
<a-button @click="jamoviClickEvent('view')" type="primary" :ripple="false" class="mr-1" <a-button @click="jamoviClickEvent('view')" type="primary" :ripple="false" class="mr-1"
depressed size="large">Jamovi</a-button> depressed size="large">JAMOVI</a-button>
<BtnSearch @click="search" size="large" /> <BtnSearch @click="search" size="large" />
</v-col> </v-col>
</v-row> </v-row>
@ -283,7 +283,7 @@ export default {
{ {
header: '모델링 DataSet ID', header: '모델링 DataSet ID',
name: 'dataSetId', name: 'dataSetId',
align: 'center', align: 'left',
width: 180, width: 180,
}, },
{ {

30
pages/ems/effc/EnrgReptMngPage.vue
View File

@ -21,22 +21,21 @@
:itemList="selectValueList03" :label="'FAB'" :multiple="fabMultiple" :itemList="selectValueList03" :label="'FAB'" :multiple="fabMultiple"
@update:propsValue="selectValue03 = $event" :labelCols="12" :textCols="12" customClass="select-large" /> @update:propsValue="selectValue03 = $event" :labelCols="12" :textCols="12" customClass="select-large" />
</v-col> </v-col>
</v-row>
<v-row align="center" no-gutters>
<v-col :cols="3"> <v-col :cols="3">
<!-- 효율지표 --> <!-- 효율지표 -->
<component ref="effcIdxSelect" :is="'SelectBoxMulti'" :propsValue="selectValue04" <component ref="effcIdxSelect" :is="'SelectBoxMulti'" :propsValue="selectValue04"
:itemList="selectValueList04" :label="'효율지표'" :multiple="effcIdxMultiple" :itemList="selectValueList04" :label="'효율지표'" :multiple="effcIdxMultiple"
@update:propsValue="selectValue04 = $event" :labelCols="12" :textCols="12" customClass="select-large" /> @update:propsValue="selectValue04 = $event" :labelCols="12" :textCols="12" customClass="select-large" />
</v-col> </v-col>
</v-row>
<v-row align="center" no-gutters>
<v-col :cols="3"> <v-col :cols="3">
<!-- 대상일 --> <!-- 대상일 -->
<component :is="'Datepicker'" :parentPrgmId="myPrgmId" :label="'대상일'" :labelCols="3" customClass="datepicker-large" /> <component :is="'Datepicker'" :parentPrgmId="myPrgmId" :label="'대상일'" :labelCols="3" customClass="datepicker-large" />
</v-col> </v-col>
<v-col :cols="6" class="text-right d-flex align-end justify-end align-self-end"> <v-col :cols="6.5" class="text-right d-flex align-end justify-end align-self-end">
<!-- 조회버튼 --> <!-- 조회버튼 -->
<a-button type="primary" class="d-inline-flex-1 mr-1" size="large" @click="createExcel()">엑셀</a-button> <a-button icon="file-excel" class="d-inline-flex-1 mr-1" size="large" @click="createExcel()">엑셀</a-button>
<BtnSearch @click="search" size="large" /> <BtnSearch @click="search" size="large" />
</v-col> </v-col>
</v-row> </v-row>
@ -62,15 +61,23 @@
<v-col :cols="3"> <v-col :cols="3">
<v-card-title class="pa-0">설비별 효율지표 Trend</v-card-title> <v-card-title class="pa-0">설비별 효율지표 Trend</v-card-title>
</v-col> </v-col>
<!-- <v-col :cols="5"></v-col> -->
<v-col :cols="4" class="d-flex justify-space-end" > <v-col :cols="4" class="d-flex justify-space-end" >
<component class="text-right mr-2" ref="EqpmSelectPop" :is="'EqpmSelectPop'" :label="''" :labelCols="1" <component
:textCols="12" :valueNm="'eqpmId'" :parentPrgmId="myPrgmId" :eqpmGrpDisabled="true" class="text-right mr-2"
:fabDisabled="true" :isMulti="true" /> ref="EqpmSelectPop"
label=""
placeholder="설비..."
is="EqpmSelectPop"
valueNm="eqpmId"
:textCols="12"
:parentPrgmId="myPrgmId"
:eqpmGrpDisabled="true"
:fabDisabled="true"
:iconShow="false"
:isMulti="true"
/>
<a-button @click="getEqpmData()" type="primary" >조회</a-button> <a-button @click="getEqpmData()" type="primary" >조회</a-button>
</v-col> </v-col>
<!-- <v-col :cols="1">
</v-col> -->
</v-row> </v-row>
</div> </div>
<div ref="chartParent" style="height: 100%"> <div ref="chartParent" style="height: 100%">
@ -316,6 +323,7 @@ export default {
legend: { legend: {
icon: 'circle', icon: 'circle',
top: 'top', top: 'top',
size: '8'
}, },
grid: { grid: {
top: '10%', top: '10%',

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

@ -104,7 +104,6 @@
:is="loadGrid ? 'Grid' : null" :is="loadGrid ? 'Grid' : null"
:gridName="gridName" :gridName="gridName"
:parentPrgmId="myPrgmId" :parentPrgmId="myPrgmId"
@dblClick="gridDoubleClickEvent"
/> />
<!-- <!--
<component <component
@ -143,7 +142,6 @@ import SelectBox from "@/components/common/select/SelectBox";
import SelectCmCycle from "@/components/common/select/SelectCmCycle"; import SelectCmCycle from "@/components/common/select/SelectCmCycle";
import DatePicker from "@/components/common/Datepicker"; import DatePicker from "@/components/common/Datepicker";
import Grid from "~/components/common/Grid"; import Grid from "~/components/common/Grid";
import PageTitle from "@/components/common/PageTitle";
let myTitle; let myTitle;
let myPrgmId; let myPrgmId;
@ -170,7 +168,6 @@ export default {
SelectCmCycle, SelectCmCycle,
DatePicker, DatePicker,
Grid, Grid,
PageTitle,
}, },
data() { data() {
return { return {
@ -204,6 +201,7 @@ export default {
computed: { computed: {
...mapState({ ...mapState({
pageData: (state) => state.pageData[myPrgmId], pageData: (state) => state.pageData[myPrgmId],
isDarkMode: "isDarkMode",
}), }),
fromDt() { fromDt() {
return this.pageData.fromDt; return this.pageData.fromDt;
@ -237,6 +235,16 @@ export default {
await this.search(); await this.search();
} }
}, },
isDarkMode(newVal) {
// Switch mode for 10 tooltips
for (let i = 0; i < 10; i++) {
const tooltipEl = document.getElementById(`tooltipElement_${i}`);
if (tooltipEl) {
tooltipEl.classList.remove("light-mode", "dark-mode");
tooltipEl.classList.add(newVal ? "dark-mode" : "light-mode");
}
}
},
}, },
async beforeCreate() { async beforeCreate() {
myPrgmId = this.$route.query.prgmId; myPrgmId = this.$route.query.prgmId;
@ -357,13 +365,79 @@ export default {
gridInit() { gridInit() {
const gridHeight = this.$refs.gridParent.offsetHeight - 30; const gridHeight = this.$refs.gridParent.offsetHeight - 30;
const _this = this; const _this = this;
// Define custom button
class CustomButton {
constructor(props,pageData) {
const { grid, rowKey, columnInfo } = props;
const gridData = grid.store.data.rawData;
const value = gridData[rowKey][columnInfo.name];
const onClickCallback = columnInfo.renderer.options.onClick;
this.disabled = columnInfo.renderer.options.disabled || false;
const elDiv = document.createElement('div');
elDiv.innerHTML = `<span>${value}</span>`;
$(elDiv).addClass('tui-grid-cell-content d-flex justify-space-between');
const el2 = document.createElement('button');
$(el2).addClass('edit-btn blue--text');
el2.innerText = '보기';
elDiv.appendChild(el2);
this.el = elDiv;
if (!this.disabled && typeof onClickCallback === 'function') {
// click 이벤트
this.el.addEventListener('click', function(event) {
onClickCallback(rowKey);
});
}
}
getElement() {
return this.el;
}
getValue() {
// return this.el.value;
}
mounted() {
// this.el.focus();
}
}
var columnList = [ var columnList = [
{ header: "NO", name: "no", align: "right", width: 80 }, { header: "NO", name: "no", align: "right", width: 80 },
{ header: "fabId", name: "fabId", hidden: true }, { header: "fabId", name: "fabId", hidden: true },
{ header: "FAB", name: "fabNm", align: "left" }, { header: "FAB", name: "fabNm", align: "left" },
{ header: "eqpmGrpId", name: "eqpmGrpId", hidden: true }, { header: "eqpmGrpId", name: "eqpmGrpId", hidden: true },
{ header: "설비그룹", name: "eqpmGrpNm", align: "left", width: 200 }, { header: "설비그룹", name: "eqpmGrpNm", align: "left", width: 200,
// Render custom button to switch page instead of double click on row
renderer: {
type: CustomButton,
options: {
value: '보기',
onClick: (rowKey) => {
const gridInstance = this.$refs[this.gridName].gridInstance;
const eventRowData = gridInstance.invoke("getRow", rowKey);
const data = {
cmCycle: this.pageData.cmCycle,
fromDt: this.pageData.fromDt,
fabId: this.selectValue01,
eqpmKindId: this.selectValue02,
eqpmGrpId: this.selectValue03,
eqpmId: eventRowData.eqpmId,
};
const key = "tick_" + Math.random();
this.$router.push({
name: "ems-effc-EnrgUseEqpmDetlMntrPage",
query: {
prgmId: "PRG0082",
},
params: {
...data,
key: key,
},
});
}
}
}
},
{ header: "eqpmId", name: "eqpmId", hidden: true }, { header: "eqpmId", name: "eqpmId", hidden: true },
{ header: "설비명", name: "eqpmNm", align: "left", width: 200 }, { header: "설비명", name: "eqpmNm", align: "left", width: 200 },
{ {
@ -472,6 +546,10 @@ export default {
}, },
], ],
}, },
pageOptions: {
useClient: true,
perPage: 3,
}
}; };
this.setGridOption({ this.setGridOption({
@ -693,6 +771,7 @@ function numberFormatter({ value }) {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
::v-deep {
@for $i from 0 through 9 { @for $i from 0 through 9 {
#gridParent > * { #gridParent > * {
// .tui-grid-content-area{ // .tui-grid-content-area{
@ -715,18 +794,46 @@ function numberFormatter({ value }) {
display: block; display: block;
position: absolute; position: absolute;
min-width: 100%; min-width: 100%;
bottom: 30px; bottom: 40px;
z-index: 1000000000; z-index: 1000000000;
align: "center"; align: "center";
color: #f2f2f2; color: #f2f2f2;
background-color: #7f7f7f; background-color: #000000d9;
// width : 77px; // width : 77px;
width: 200%; width: 200%;
left: -50%; left: -50%;
border-radius: 3px; border-radius: 4px;
padding: 6px 0px;
word-break: keep-all; word-break: keep-all;
white-space: pre-wrap; white-space: pre-wrap;
// Light mode
&.light-mode {
background-color: #000000d9;
} }
// Dark mode
&.dark-mode {
background-color: #424242;
}
&::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -6px;
border-width: 6px;
border-style: solid;
}
&.light-mode::after {
border-color: #000000d9 transparent transparent transparent;
}
&.dark-mode::after {
border-color: #424242 transparent transparent transparent;
}
}
.tui-grid-rside-area { .tui-grid-rside-area {
display: none; display: none;
overflow: visible; overflow: visible;
@ -742,4 +849,5 @@ function numberFormatter({ value }) {
overflow-y: visible; overflow-y: visible;
} }
} }
}
</style> </style>