dev-dungtv-fix-grid #16
1
.gitignore
vendored
1
.gitignore
vendored
@ -88,3 +88,4 @@ sw.*
|
||||
|
||||
# Vim swap files
|
||||
*.swp
|
||||
.history
|
||||
|
||||
20
assets/css/Oxanium.css
Normal file
20
assets/css/Oxanium.css
Normal file
@ -0,0 +1,20 @@
|
||||
@font-face {
|
||||
font-family: 'Oxanium';
|
||||
font-weight: 700;
|
||||
src: local('Oxanium Bold'),
|
||||
url('../font/Oxanium/Oxanium-Bold.ttf') format('truetype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Oxanium';
|
||||
font-weight: 500;
|
||||
src: local('Oxanium Medium'),
|
||||
url('../font/Oxanium/Oxanium-Medium.ttf') format('truetype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Oxanium';
|
||||
font-weight: 300;
|
||||
src: local('Oxanium Light'),
|
||||
url('../font/Oxanium/Oxanium-Light.ttf') format('truetype');
|
||||
}
|
||||
BIN
assets/font/Oxanium/Oxanium-Bold.ttf
Normal file
BIN
assets/font/Oxanium/Oxanium-Bold.ttf
Normal file
Binary file not shown.
BIN
assets/font/Oxanium/Oxanium-ExtraBold.ttf
Normal file
BIN
assets/font/Oxanium/Oxanium-ExtraBold.ttf
Normal file
Binary file not shown.
BIN
assets/font/Oxanium/Oxanium-ExtraLight.ttf
Normal file
BIN
assets/font/Oxanium/Oxanium-ExtraLight.ttf
Normal file
Binary file not shown.
BIN
assets/font/Oxanium/Oxanium-Light.ttf
Normal file
BIN
assets/font/Oxanium/Oxanium-Light.ttf
Normal file
Binary file not shown.
BIN
assets/font/Oxanium/Oxanium-Medium.ttf
Normal file
BIN
assets/font/Oxanium/Oxanium-Medium.ttf
Normal file
Binary file not shown.
BIN
assets/font/Oxanium/Oxanium-Regular.ttf
Normal file
BIN
assets/font/Oxanium/Oxanium-Regular.ttf
Normal file
Binary file not shown.
BIN
assets/font/Oxanium/Oxanium-SemiBold.ttf
Normal file
BIN
assets/font/Oxanium/Oxanium-SemiBold.ttf
Normal file
Binary file not shown.
BIN
assets/images/arrow_datepicker.png
Normal file
BIN
assets/images/arrow_datepicker.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 177 B |
BIN
assets/images/arrow_datepicker_dm.png
Normal file
BIN
assets/images/arrow_datepicker_dm.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 183 B |
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 3.8 KiB |
BIN
assets/images/logo_dm_rm.png
Normal file
BIN
assets/images/logo_dm_rm.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 3.8 KiB |
5
assets/images/logo_lm.svg
Normal file
5
assets/images/logo_lm.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 7.7 KiB |
BIN
assets/images/logo_lm_rm.png
Normal file
BIN
assets/images/logo_lm_rm.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
File diff suppressed because it is too large
Load Diff
BIN
assets/scss/common.zip
Normal file
BIN
assets/scss/common.zip
Normal file
Binary file not shown.
@ -1,40 +1,54 @@
|
||||
.v-btn {
|
||||
background-color: #144985;
|
||||
background-color: #1677ff;
|
||||
|
||||
&:not(.v-btn--round) {
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
&-radius {
|
||||
&__20 {
|
||||
border-radius: 20px !important;
|
||||
}
|
||||
|
||||
&__50per {
|
||||
border-radius: 50% !important;
|
||||
}
|
||||
}
|
||||
|
||||
&__full {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&__round {
|
||||
min-width: 100px !important;
|
||||
padding: 8px 25px !important;
|
||||
border-radius: 20px !important;
|
||||
}
|
||||
|
||||
&__excel {
|
||||
background-color: #47535c !important;
|
||||
}
|
||||
|
||||
&-bg {
|
||||
&__transparent {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
&__blue {
|
||||
background-color: $--color-primary__blue;
|
||||
}
|
||||
|
||||
&__white-blue {
|
||||
background-color: $--color-white;
|
||||
color: $--color-primary__blue;
|
||||
}
|
||||
}
|
||||
|
||||
&__transparent {
|
||||
border: 0;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
&.v-btn--icon.v-btn--tile {
|
||||
border-radius: 4px;
|
||||
}
|
||||
@ -42,16 +56,18 @@
|
||||
|
||||
@each $theme in dark, light {
|
||||
@include theme($theme);
|
||||
|
||||
.v-application.#{$theme}-mode {
|
||||
.v-btn-bg__w-g5 {
|
||||
background-color: $--theme-color-w-g5;
|
||||
|
||||
i {
|
||||
color: $--theme-color-g5-w;
|
||||
}
|
||||
}
|
||||
|
||||
.v-btn {
|
||||
background-color: map-deep-get(
|
||||
$config,
|
||||
background-color: map-deep-get($config,
|
||||
#{$theme},
|
||||
"v-btn-backgroundColor"
|
||||
);
|
||||
@ -59,8 +75,7 @@
|
||||
|
||||
&.v-btn--disabled {
|
||||
opacity: 0.4;
|
||||
background-color: map-deep-get(
|
||||
$config,
|
||||
background-color: map-deep-get($config,
|
||||
#{$theme},
|
||||
"v-btn-backgroundColor"
|
||||
) !important;
|
||||
@ -71,5 +86,100 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.basic-button {
|
||||
color: map-deep-get($config, #{$theme}, "basic-button-color");
|
||||
background: map-deep-get($config, #{$theme}, "basic-button-background");
|
||||
}
|
||||
|
||||
.searchFilter{
|
||||
.search-button {
|
||||
height: 40px;
|
||||
color: map-deep-get($config, #{$theme}, "search-btn-color");
|
||||
}
|
||||
}
|
||||
|
||||
.v-dialog {
|
||||
.ant-btn-icon-only {
|
||||
color: map-deep-get(
|
||||
$config,
|
||||
#{$theme},
|
||||
"icon-color"
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.ant-btn {
|
||||
|
||||
&.ant-btn-outlined {
|
||||
color:map-deep-get($config, #{$theme}, "ant-btn-default-color");
|
||||
border:1px solid map-deep-get($config, #{$theme}, "ant-btn-default-border-outlined");
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&.ant-btn-primary {
|
||||
background: map-deep-get($config, #{$theme}, "ant-btn-primary-bg");
|
||||
border-color:map-deep-get($config, #{$theme}, "ant-btn-primary-bg");
|
||||
color:map-deep-get($config, #{$theme}, "ant-btn-primary-color");
|
||||
&.ant-btn-background-ghost{
|
||||
color:map-deep-get($config, #{$theme}, "ant-btn-primary-bg");
|
||||
}
|
||||
}
|
||||
|
||||
&.ant-btn-default {
|
||||
background:map-deep-get($config, #{$theme}, "ant-btn-default-bg");
|
||||
color:map-deep-get($config, #{$theme}, "ant-btn-default-color");
|
||||
}
|
||||
|
||||
&.ant-btn-danger {
|
||||
&.ant-btn-background-ghost {
|
||||
color:map-deep-get($config, #{$theme}, "ant-btn-danger-color");
|
||||
border-color:map-deep-get($config, #{$theme}, "ant-btn-danger-border");
|
||||
background: map-deep-get($config, #{$theme}, "ant-btn-danger-bg") !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.expand-btn {
|
||||
.v-icon {
|
||||
color: map-deep-get($config, #{$theme}, "basic-button-color");
|
||||
svg {
|
||||
fill: map-deep-get($config, #{$theme}, "basic-button-color");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.v-application {
|
||||
.ant-btn {
|
||||
border-radius: 6px;
|
||||
&.ant-btn-lg {
|
||||
border-radius: 8px;
|
||||
}
|
||||
&.ant-btn-default {
|
||||
border:none !important
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.v-dialog {
|
||||
.ant-btn-icon-only {
|
||||
border: none;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background:none;
|
||||
}
|
||||
}
|
||||
.ant-btn {
|
||||
&.expand-btn {
|
||||
.v-icon {
|
||||
span {
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -3,13 +3,43 @@
|
||||
}
|
||||
|
||||
@each $theme in dark, light {
|
||||
|
||||
// @include theme($theme);
|
||||
.v-application.#{$theme}-mode {
|
||||
.v-card {
|
||||
color: map-deep-get($config, #{$theme}, "card-default-color");
|
||||
background-color: map-deep-get($config, #{$theme}, "cardBackground");
|
||||
|
||||
.v-card__subtitle {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: map-deep-get($config, #{$theme}, "card-subtitle");
|
||||
}
|
||||
|
||||
.v-card__title {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
line-height: 28px;
|
||||
color: map-deep-get($config, #{$theme}, "card-title-color") !important;
|
||||
}
|
||||
|
||||
.card-text-info {
|
||||
font-family: "Oxanium", sans-serif;
|
||||
font-weight: 500;
|
||||
font-size: 24px;
|
||||
line-height: 24px;
|
||||
letter-spacing: 0;
|
||||
color: map-deep-get($config, #{$theme}, "card-text-info-color");
|
||||
}
|
||||
|
||||
.card-text-title {
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
letter-spacing: 0;
|
||||
color: map-deep-get($config, #{$theme}, "card-text-title-color");
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -11,9 +11,10 @@
|
||||
width: 100%;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
&-content-area {
|
||||
width: 100%;
|
||||
border: 0;
|
||||
border: 0 !important;
|
||||
}
|
||||
|
||||
// &-body-container {
|
||||
@ -33,6 +34,7 @@
|
||||
}
|
||||
|
||||
&-rside-area {
|
||||
|
||||
.tui-grid-header-area,
|
||||
.tui-grid-summary-area {
|
||||
margin-right: $scrollbar-width;
|
||||
@ -40,27 +42,41 @@
|
||||
}
|
||||
|
||||
&-border-line-top,
|
||||
&-border-line-bottom,
|
||||
&-border-line-right {
|
||||
&-border-line-bottom {
|
||||
border: 0 !important;
|
||||
}
|
||||
|
||||
&-cell {
|
||||
border-width: 1px !important;
|
||||
}
|
||||
|
||||
&-cell-header {
|
||||
border-top: 0;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
&-cell-header,
|
||||
&-cell-content,
|
||||
&-cell.tui-grid-cell-summary {
|
||||
font-family: "Spoqa Han Sans Neo";
|
||||
// font-family: "Spoqa Han Sans Neo";
|
||||
font-size: 0.875rem;
|
||||
font-weight: 400;
|
||||
line-height: 1.25rem;
|
||||
letter-spacing: 0.0178571429em;
|
||||
}
|
||||
|
||||
&-cell-content {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.tui-grid-table{
|
||||
.tui-grid-cell-header,
|
||||
.tui-grid-cell-has-input .tui-grid-cell-content {
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.treeGrid {
|
||||
.tui-grid {
|
||||
&-header-area {
|
||||
@ -73,22 +89,69 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tui-grid-scrollbar-right-top {
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
@each $theme in dark, light {
|
||||
@include theme($theme);
|
||||
|
||||
.v-application.#{$theme}-mode {
|
||||
.grid-title {
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
letter-spacing: 0;
|
||||
color: map-deep-get($config,
|
||||
#{$theme},
|
||||
"tui-grid-title-color"
|
||||
);
|
||||
}
|
||||
|
||||
.tui-grid {
|
||||
&-table {
|
||||
border: 1px solid;
|
||||
border-color: map-deep-get($config,
|
||||
#{$theme},
|
||||
"scrollbar-track"
|
||||
);
|
||||
|
||||
.tui-grid-cell {
|
||||
border-color: map-deep-get($config,
|
||||
#{$theme},
|
||||
"tui-grid-cell-borderColor-darkmode"
|
||||
);
|
||||
border-style: map-deep-get($config,
|
||||
#{$theme},
|
||||
"tui-grid-cell-borderStyle-darkmode"
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
&-border-line-right{
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&-body-container{
|
||||
border-right: 1px solid;
|
||||
border-right-color: map-deep-get($config,
|
||||
#{$theme},
|
||||
"tui-grid-cell-borderColor"
|
||||
);
|
||||
width: auto !important;
|
||||
}
|
||||
|
||||
&-container,
|
||||
&-summary-area {
|
||||
font-family: Inter;
|
||||
// color: #000000E0;
|
||||
|
||||
& ::-webkit-scrollbar {
|
||||
width: $scrollbar-width !important;
|
||||
height: $scrollbar-width !important;
|
||||
-webkit-appearance: initial;
|
||||
background-color: map-deep-get(
|
||||
$config,
|
||||
background-color: map-deep-get($config,
|
||||
#{$theme},
|
||||
"scrollbar-track"
|
||||
) !important;
|
||||
@ -96,8 +159,7 @@
|
||||
}
|
||||
|
||||
& ::-webkit-scrollbar-track {
|
||||
background-color: map-deep-get(
|
||||
$config,
|
||||
background-color: map-deep-get($config,
|
||||
#{$theme},
|
||||
"scrollbar-track"
|
||||
) !important;
|
||||
@ -109,6 +171,16 @@
|
||||
background-color: map-deep-get($config, #{$theme}, "scrollbar-thumb");
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.tui-grid-cell {
|
||||
|
||||
&.tui-grid-cell-summary {
|
||||
color: map-deep-get($config,
|
||||
#{$theme},
|
||||
"tui-grid-cell-color"
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-rside-area {
|
||||
@ -121,26 +193,28 @@
|
||||
}
|
||||
|
||||
&-scrollbar-right-top {
|
||||
background-color: map-deep-get(
|
||||
$config,
|
||||
#{$theme},
|
||||
"tui-grid-header-backgroundColor"
|
||||
);
|
||||
border-left-color: map-deep-get(
|
||||
$config,
|
||||
#{$theme},
|
||||
"tui-grid-border-horziontal-color"
|
||||
);
|
||||
border-right-color: map-deep-get(
|
||||
$config,
|
||||
#{$theme},
|
||||
"tui-grid-border-horziontal-color"
|
||||
);
|
||||
border-bottom-color: map-deep-get(
|
||||
$config,
|
||||
#{$theme},
|
||||
"tui-grid-border-vertical-color"
|
||||
);
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
border: none;
|
||||
// background-color: map-deep-get(
|
||||
// $config,
|
||||
// #{$theme},
|
||||
// "tui-grid-header-backgroundColor"
|
||||
// );
|
||||
// border-left-color: map-deep-get(
|
||||
// $config,
|
||||
// #{$theme},
|
||||
// "tui-grid-border-horziontal-color"
|
||||
// );
|
||||
// border-right-color: map-deep-get(
|
||||
// $config,
|
||||
// #{$theme},
|
||||
// "tui-grid-border-horziontal-color"
|
||||
// );
|
||||
// border-bottom-color: map-deep-get(
|
||||
// $config,
|
||||
// #{$theme},
|
||||
// "tui-grid-border-vertical-color"
|
||||
// );
|
||||
}
|
||||
|
||||
&-scrollbar-right-bottom {
|
||||
@ -162,25 +236,63 @@
|
||||
border-color: transparent !important;
|
||||
}
|
||||
|
||||
&-body-area {
|
||||
overflow: auto !important;
|
||||
}
|
||||
// &-body-area {
|
||||
// overflow: auto !important;
|
||||
// }
|
||||
|
||||
&-container,
|
||||
&-layer-state,
|
||||
&-body-area,
|
||||
&-summary-area,
|
||||
&-cell {
|
||||
background-color: map-deep-get(
|
||||
$config,
|
||||
background-color: map-deep-get($config,
|
||||
#{$theme},
|
||||
"tui-grid-cell-backgroundColor"
|
||||
);
|
||||
border-color: map-deep-get(
|
||||
$config,
|
||||
border-color: map-deep-get($config,
|
||||
#{$theme},
|
||||
"tui-grid-border-vertical-color"
|
||||
);
|
||||
|
||||
&-current-row{
|
||||
td {
|
||||
.custom-radio {
|
||||
.radio-mark{
|
||||
border-color: #1677ff;
|
||||
background-color: #fff;
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
height: 11px;
|
||||
width: 11px;
|
||||
border-radius: 50%;
|
||||
background-color: #1677ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-cell {
|
||||
&:last-child {
|
||||
padding-right: 1px;
|
||||
border-right: 1px solid ;
|
||||
border-right-color: map-deep-get($config,
|
||||
#{$theme},
|
||||
"tui-grid-cell-borderColor"
|
||||
);
|
||||
.tui-grid-cell-content {
|
||||
border-right: 1px solid ;
|
||||
border-right-color: map-deep-get($config,
|
||||
#{$theme},
|
||||
"tui-grid-cell-borderColor"
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-cell-summary {
|
||||
@ -189,17 +301,27 @@
|
||||
|
||||
&-header-area,
|
||||
&-cell-header {
|
||||
background-color: map-deep-get(
|
||||
$config,
|
||||
// font-family: inherit;
|
||||
font-weight: 600;
|
||||
font-style: Semi Bold;
|
||||
background-color: map-deep-get($config,
|
||||
#{$theme},
|
||||
"tui-grid-header-backgroundColor"
|
||||
);
|
||||
border-color: map-deep-get(
|
||||
$config,
|
||||
border-color: map-deep-get($config,
|
||||
#{$theme},
|
||||
"tui-grid-border-vertical-color"
|
||||
);
|
||||
color: map-deep-get($config, #{$theme}, "activate");
|
||||
color: map-deep-get($config,
|
||||
#{$theme},
|
||||
"tui-grid-header-color"
|
||||
);
|
||||
|
||||
}
|
||||
|
||||
&-header-area {
|
||||
background-color: none;
|
||||
border: none;
|
||||
}
|
||||
|
||||
&-row-odd,
|
||||
@ -210,8 +332,7 @@
|
||||
|
||||
&:hover {
|
||||
>.tui-grid-cell {
|
||||
background-color: map-deep-get(
|
||||
$config,
|
||||
background-color: map-deep-get($config,
|
||||
#{$theme},
|
||||
"tui-grid-cell-hover-backgroundColor"
|
||||
);
|
||||
@ -221,33 +342,33 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&-cell {
|
||||
&.row-insert {
|
||||
background-color: map-deep-get(
|
||||
$config,
|
||||
background-color: map-deep-get($config,
|
||||
#{$theme},
|
||||
"tui-grid-cell-insert-color"
|
||||
);
|
||||
}
|
||||
|
||||
&.row-modify {
|
||||
background-color: map-deep-get(
|
||||
$config,
|
||||
background-color: map-deep-get($config,
|
||||
#{$theme},
|
||||
"tui-grid-cell-modify-color"
|
||||
);
|
||||
}
|
||||
|
||||
&.row-removed {
|
||||
background-color: map-deep-get(
|
||||
$config,
|
||||
background-color: map-deep-get($config,
|
||||
#{$theme},
|
||||
"tui-grid-cell-removed-color"
|
||||
);
|
||||
}
|
||||
|
||||
&.row-disabled {
|
||||
color: map-deep-get(
|
||||
$config,
|
||||
color: map-deep-get($config,
|
||||
#{$theme},
|
||||
"tui-grid-cell-disabled-color"
|
||||
);
|
||||
@ -256,9 +377,9 @@
|
||||
color: map-deep-get($config, #{$theme}, "tui-grid-cell-disabled-color");
|
||||
}
|
||||
}
|
||||
|
||||
&.row-selected {
|
||||
background-color: map-deep-get(
|
||||
$config,
|
||||
background-color: map-deep-get($config,
|
||||
#{$theme},
|
||||
"tui-grid-cell-selected-color"
|
||||
);
|
||||
@ -284,8 +405,7 @@
|
||||
align-items: center;
|
||||
position: relative;
|
||||
|
||||
.tui-grid-tree-depth
|
||||
{
|
||||
.tui-grid-tree-depth {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
position: relative;
|
||||
@ -303,6 +423,7 @@
|
||||
margin-right: 6px;
|
||||
top: 0;
|
||||
left: 0 !important;
|
||||
|
||||
i {
|
||||
margin-top: 0;
|
||||
}
|
||||
@ -311,15 +432,19 @@
|
||||
&-tree-icon {
|
||||
margin-top: 0;
|
||||
top: 0;
|
||||
|
||||
i {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-left: 0;
|
||||
background-repeat: no-repeat;
|
||||
background-position: 0 0;
|
||||
|
||||
@if $theme ==dark {
|
||||
background-image: url("data:image/svg+xml,%3Csvg id='ico_tree_item' xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cdefs%3E%3Cstyle%3E .cls-1, .cls-4 %7B fill: none; %7D .cls-1 %7B stroke: %23fff; opacity: 0.3; %7D .cls-2 %7B fill: %23fff; %7D .cls-3 %7B stroke: none; %7D %3C/style%3E%3C/defs%3E%3Cg id='사각형_703' data-name='사각형 703' class='cls-1'%3E%3Crect class='cls-3' width='16' height='16' rx='3'/%3E%3Crect class='cls-4' x='0.5' y='0.5' width='15' height='15' rx='2.5'/%3E%3C/g%3E%3Crect id='사각형_1384' data-name='사각형 1384' class='cls-2' width='8' height='1' rx='0.5' transform='translate(4 4.5)'/%3E%3Crect id='사각형_1386' data-name='사각형 1386' class='cls-2' width='8' height='1' rx='0.5' transform='translate(4 7.5)'/%3E%3Crect id='사각형_1387' data-name='사각형 1387' class='cls-2' width='8' height='1' rx='0.5' transform='translate(4 10.5)'/%3E%3C/svg%3E%0A");
|
||||
} @else {
|
||||
}
|
||||
|
||||
@else {
|
||||
background-image: url("data:image/svg+xml,%3Csvg id='ico_tree_item' xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cdefs%3E%3Cstyle%3E .cls-2%7Bfill:%23a4aac3%7D %3C/style%3E%3C/defs%3E%3Cg id='사각형_703' data-name='사각형 703' style='stroke:%23a4aac3;fill:none'%3E%3Crect width='16' height='16' rx='3' style='stroke:none'/%3E%3Crect x='.5' y='.5' width='15' height='15' rx='2.5' style='fill:none'/%3E%3C/g%3E%3Crect id='사각형_1384' data-name='사각형 1384' class='cls-2' width='8' height='1' rx='.5' transform='translate(4 4.5)'/%3E%3Crect id='사각형_1386' data-name='사각형 1386' class='cls-2' width='8' height='1' rx='.5' transform='translate(4 7.5)'/%3E%3Crect id='사각형_1387' data-name='사각형 1387' class='cls-2' width='8' height='1' rx='.5' transform='translate(4 10.5)'/%3E%3C/svg%3E%0A");
|
||||
}
|
||||
}
|
||||
@ -331,10 +456,13 @@
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background-position: 0 0;
|
||||
|
||||
@if $theme ==dark {
|
||||
background-image: url("data:image/svg+xml,%3Csvg id='btn_tree_item_close' xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %230d0f17; stroke: %23fff; opacity: 0.3; %7D .cls-2 %7B fill: %23fff; %7D .cls-3 %7B stroke: none; %7D .cls-4 %7B fill: none; %7D %3C/style%3E%3C/defs%3E%3Cg id='사각형_703' data-name='사각형 703' class='cls-1'%3E%3Crect class='cls-3' width='16' height='16' rx='3'/%3E%3Crect class='cls-4' x='0.5' y='0.5' width='15' height='15' rx='2.5'/%3E%3C/g%3E%3Crect id='사각형_1384' data-name='사각형 1384' class='cls-2' width='8' height='2' rx='1' transform='translate(4 7)'/%3E%3C/svg%3E%0A");
|
||||
} @else {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cg data-name='사각형 703' style='fill:%23f1f3f9;stroke:%23a4aac3'%3E%3Crect width='16' height='16' rx='3' style='stroke:none'/%3E%3Crect x='.5' y='.5' width='15' height='15' rx='2.5' style='fill:none'/%3E%3C/g%3E%3Crect data-name='사각형 1384' width='8' height='2' rx='1' transform='translate(4 7)' style='fill:%23a4aac3'/%3E%3C/svg%3E ");
|
||||
background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Crect%20width%3D%2216%22%20height%3D%2216%22%20rx%3D%224%22%20fill%3D%22%23212224%22/%3E%3Crect%20x%3D%220.5%22%20y%3D%220.5%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%223.5%22%20stroke%3D%22white%22%20stroke-opacity%3D%220.06%22/%3E%3Cpath%20d%3D%22M12.5998%208H2.99979%22%20stroke%3D%22white%22%20stroke-opacity%3D%220.85%22/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
@else {
|
||||
background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Crect%20width%3D%2216%22%20height%3D%2216%22%20rx%3D%224%22%20fill%3D%22white%22/%3E%3Crect%20x%3D%220.5%22%20y%3D%220.5%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%223.5%22%20stroke%3D%22black%22%20stroke-opacity%3D%220.06%22/%3E%3Cpath%20d%3D%22M12.5997%208H2.99973%22%20stroke%3D%22black%22%20stroke-opacity%3D%220.88%22/%3E%3C/svg%3E");
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -346,10 +474,13 @@
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background-position: 0 0;
|
||||
|
||||
@if $theme ==dark {
|
||||
background-image: url("data:image/svg+xml,%3Csvg id='btn_tree_item_open' xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cdefs%3E%3Cstyle%3E .cls-2%7Bfill:%23fff%7D %3C/style%3E%3C/defs%3E%3Cg id='사각형_703' data-name='사각형 703' style='fill:%230d0f17;stroke:%23fff;opacity:.3'%3E%3Crect width='16' height='16' rx='3' style='stroke:none'/%3E%3Crect x='.5' y='.5' width='15' height='15' rx='2.5' style='fill:none'/%3E%3C/g%3E%3Crect id='사각형_1384' data-name='사각형 1384' class='cls-2' width='8' height='2' rx='1' transform='translate(4 7)'/%3E%3Crect id='사각형_1385' data-name='사각형 1385' class='cls-2' width='2' height='8' rx='1' transform='translate(7 4)'/%3E%3C/svg%3E%0A");
|
||||
} @else {
|
||||
background-image: url("data:image/svg+xml,%3Csvg id='btn_tree_item_open' xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cdefs%3E%3Cstyle%3E .cls-2%7Bfill:%23a4aac3%7D %3C/style%3E%3C/defs%3E%3Cg id='사각형_703' data-name='사각형 703' style='fill:%23f1f3f9;stroke:%23a4aac3'%3E%3Crect width='16' height='16' rx='3' style='stroke:none'/%3E%3Crect x='.5' y='.5' width='15' height='15' rx='2.5' style='fill:none'/%3E%3C/g%3E%3Crect id='사각형_1384' data-name='사각형 1384' class='cls-2' width='8' height='2' rx='1' transform='translate(4 7)'/%3E%3Crect id='사각형_1385' data-name='사각형 1385' class='cls-2' width='2' height='8' rx='1' transform='translate(7 4)'/%3E%3C/svg%3E ");
|
||||
background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Crect%20width%3D%2216%22%20height%3D%2216%22%20rx%3D%224%22%20fill%3D%22%23212224%22/%3E%3Crect%20x%3D%220.5%22%20y%3D%220.5%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%223.5%22%20stroke%3D%22white%22%20stroke-opacity%3D%220.06%22/%3E%3Cpath%20d%3D%22M7.7998%203.00073V12.6007%22%20stroke%3D%22white%22%20stroke-opacity%3D%220.85%22/%3E%3Cpath%20d%3D%22M12.5999%207.80078L2.99985%207.80078%22%20stroke%3D%22white%22%20stroke-opacity%3D%220.85%22/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
@else {
|
||||
background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Crect%20width%3D%2216%22%20height%3D%2216%22%20rx%3D%224%22%20fill%3D%22white%22/%3E%3Crect%20x%3D%220.5%22%20y%3D%220.5%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%223.5%22%20stroke%3D%22black%22%20stroke-opacity%3D%220.06%22/%3E%3Cpath%20d%3D%22M7.7998%203.00073V12.6007%22%20stroke%3D%22black%22%20stroke-opacity%3D%220.88%22/%3E%3Cpath%20d%3D%22M12.5997%207.80078L2.99973%207.80078%22%20stroke%3D%22black%22%20stroke-opacity%3D%220.88%22/%3E%3C/svg%3E");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,40 +1,88 @@
|
||||
.v-select__custom {
|
||||
&.v-text-field.v-text-field--solo:not(.v-text-field--solo-flat)
|
||||
> .v-input__control
|
||||
> .v-input__slot {
|
||||
padding: 0.125rem;
|
||||
|
||||
&.v-text-field.v-text-field--solo:not(.v-text-field--solo-flat)>.v-input__control>.v-input__slot {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&.v-text-field.v-text-field--solo .v-input__control {
|
||||
min-height: 36px;
|
||||
height: 36px;
|
||||
min-height: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
&.v-input input {
|
||||
min-height: 36px;
|
||||
height: 36px;
|
||||
min-height: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.v-input--selection-controls {
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.v-input__slot {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
height: 36px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
&.v-text-field .v-input__control {
|
||||
border-color: #d9d9d9;
|
||||
}
|
||||
|
||||
&.select-large {
|
||||
|
||||
.v-input__slot,
|
||||
.v-input__control {
|
||||
height: 40px !important;
|
||||
// border: solid 1px #D9D9D9;
|
||||
border-radius: 8px !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
legend {
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.v-select-list {
|
||||
padding: 0 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.v-input__custom {
|
||||
.v-input__slot {
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.v-input__slot {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&.input-large {
|
||||
border-radius: 8px !important;
|
||||
|
||||
input {
|
||||
max-height: 40px;
|
||||
height: 40px;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
&.v-text-field .v-input__control {
|
||||
border-color: #d9d9d9;
|
||||
}
|
||||
|
||||
&.surface-name {
|
||||
fieldset {
|
||||
max-width: 345px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.v-text-field .v-input__append-inner,
|
||||
@ -45,19 +93,20 @@
|
||||
|
||||
|
||||
.v-select__widget {
|
||||
&.v-text-field.v-text-field--solo:not(.v-text-field--solo-flat)
|
||||
> .v-input__control
|
||||
> .v-input__slot {
|
||||
&.v-text-field.v-text-field--solo:not(.v-text-field--solo-flat)>.v-input__control>.v-input__slot {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&.v-text-field.v-text-field--solo .v-input__control {
|
||||
min-height: 30px !important;
|
||||
height: 30px !important;
|
||||
}
|
||||
|
||||
&.v-input input {
|
||||
min-height: 30px !important;
|
||||
height: 30px !important;
|
||||
}
|
||||
|
||||
&.v-text-field--outlined>.v-input__control>.v-input__slot {
|
||||
align-items: stretch;
|
||||
min-height: 30px;
|
||||
@ -67,6 +116,7 @@
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.v-input__slot {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
@ -79,12 +129,14 @@
|
||||
width: 110px;
|
||||
height: 30px;
|
||||
flex: 0 0 auto;
|
||||
|
||||
&.v-text-field.v-text-field--solo .v-input__control {
|
||||
min-height: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.v-text-field>.v-input__control>.v-input__slot:after,
|
||||
.v-text-field>.v-input__control>.v-input__slot:before {
|
||||
display: none;
|
||||
@ -93,6 +145,7 @@
|
||||
.v-input__slot {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.v-input {
|
||||
margin-top: 0 !important;
|
||||
padding-top: 0 !important;
|
||||
@ -104,25 +157,127 @@
|
||||
}
|
||||
}
|
||||
|
||||
.v-main {
|
||||
|
||||
.ant-input,
|
||||
.ant-input-affix-wrapper>input,
|
||||
.ant-select-selection {
|
||||
border-radius: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.custom-radio {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
padding-left: 28px;
|
||||
margin: 10px;
|
||||
font-size: 16px;
|
||||
}
|
||||
.custom-radio input[type="radio"] {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
/* Custom radio appearance */
|
||||
.radio-mark {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
background-color: white;
|
||||
border: 2px solid #ccc;
|
||||
border-radius: 50%;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
/* Show selected state */
|
||||
.custom-radio input[type="radio"]:checked~.radio-mark {
|
||||
border-color: #1677ff;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.custom-radio input[type="radio"]:checked~.radio-mark::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
height: 11px;
|
||||
width: 11px;
|
||||
border-radius: 50%;
|
||||
background-color: #1677ff;
|
||||
}
|
||||
|
||||
/* Light mode: use Vuetify default */
|
||||
.checkbox-light .v-icon {
|
||||
color: #D9D9D9 !important;
|
||||
}
|
||||
|
||||
/* Dark mode: override tick color to black */
|
||||
.checkbox-dark .v-icon {
|
||||
color: #424242 !important;
|
||||
}
|
||||
|
||||
@each $theme in dark, light {
|
||||
@include theme($theme);
|
||||
|
||||
.v-application.#{$theme}-mode {
|
||||
|
||||
.v-input-popup__custom {
|
||||
.v-input__slot {
|
||||
padding-left: 12px;
|
||||
padding-right: 12px;
|
||||
border: 1px solid map-deep-get($config,
|
||||
#{$theme},
|
||||
"v-input-popup-password-border"
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.v-textarea {
|
||||
.v-input__slot{
|
||||
border: map-deep-get($config,
|
||||
#{$theme},
|
||||
"v-input-textarea-border"
|
||||
);
|
||||
fieldset {
|
||||
background-color: map-deep-get($config,
|
||||
#{$theme},
|
||||
"v-input-textarea-bg"
|
||||
);
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.v-input {
|
||||
border-radius: 4px;
|
||||
border-radius: 6px;
|
||||
border-color: #d9d9d9;
|
||||
color: map-deep-get($config,
|
||||
#{$theme},
|
||||
"v-input-backgroundColor"
|
||||
);
|
||||
|
||||
|
||||
|
||||
|
||||
&:not(.v-input--radio-group, .v-input--checkbox) {
|
||||
.v-input__slot {
|
||||
background-color: map-deep-get(
|
||||
$config,
|
||||
background-color: map-deep-get($config,
|
||||
#{$theme},
|
||||
"v-input-backgroundColor"
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.v-input__slot {
|
||||
fieldset {
|
||||
color: map-deep-get(
|
||||
$config,
|
||||
color: map-deep-get($config,
|
||||
#{$theme},
|
||||
"v-input-fieldset-color"
|
||||
) !important;
|
||||
@ -130,8 +285,7 @@
|
||||
|
||||
&:hover {
|
||||
fieldset {
|
||||
color: map-deep-get(
|
||||
$config,
|
||||
color: map-deep-get($config,
|
||||
#{$theme},
|
||||
"v-input-fieldset-hover-color"
|
||||
) !important;
|
||||
@ -144,15 +298,14 @@
|
||||
}
|
||||
|
||||
&--is-readonly {
|
||||
border-color: map-deep-get(
|
||||
$config,
|
||||
border-color: map-deep-get($config,
|
||||
#{$theme},
|
||||
"v-input-readonly-border-color"
|
||||
);
|
||||
|
||||
&:not(.v-input--radio-group, .v-input--checkbox) {
|
||||
.v-input__slot {
|
||||
background-color: map-deep-get(
|
||||
$config,
|
||||
background-color: map-deep-get($config,
|
||||
#{$theme},
|
||||
"v-input-readonly-backgroundColor"
|
||||
) !important;
|
||||
@ -161,20 +314,20 @@
|
||||
}
|
||||
|
||||
&--is-disabled {
|
||||
border-color: map-deep-get(
|
||||
$config,
|
||||
border-color: map-deep-get($config,
|
||||
#{$theme},
|
||||
"v-input-readonly-border-color"
|
||||
);
|
||||
|
||||
&:not(.v-input--radio-group, .v-input--checkbox) {
|
||||
.v-input__slot {
|
||||
background-color: map-deep-get(
|
||||
$config,
|
||||
background-color: map-deep-get($config,
|
||||
#{$theme},
|
||||
"v-input-disabled-backgroundColor"
|
||||
) !important;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
color: map-deep-get($config, #{$theme}, "v-input-disabled-color");
|
||||
}
|
||||
@ -184,22 +337,23 @@
|
||||
.v-select {
|
||||
.v-label {
|
||||
color: map-deep-get($config, #{$theme}, "v-select-label-color");
|
||||
position: static !important;
|
||||
}
|
||||
|
||||
&.v-input--is-disabled {
|
||||
.v-label {
|
||||
color: map-deep-get($config, #{$theme}, "v-input-disabled-color");
|
||||
}
|
||||
|
||||
.v-icon.v-icon--disabled {
|
||||
color: map-deep-get(
|
||||
$config,
|
||||
color: map-deep-get($config,
|
||||
#{$theme},
|
||||
"v-input-disabled-color"
|
||||
) !important;
|
||||
}
|
||||
|
||||
.v-select__selection--disabled {
|
||||
color: map-deep-get(
|
||||
$config,
|
||||
color: map-deep-get($config,
|
||||
#{$theme},
|
||||
"v-input-disabled-color"
|
||||
) !important;
|
||||
@ -211,6 +365,7 @@
|
||||
.v-label {
|
||||
color: map-deep-get($config, #{$theme}, "non-activate");
|
||||
}
|
||||
|
||||
&.v-item--active {
|
||||
.v-label {
|
||||
color: map-deep-get($config, #{$theme}, "activate");
|
||||
@ -243,7 +398,9 @@
|
||||
.v-icon {
|
||||
@if $theme ==dark {
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
} @else {
|
||||
}
|
||||
|
||||
@else {
|
||||
color: #aaaaaa;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,20 +1,20 @@
|
||||
// .v-tabs {
|
||||
// height: 38px;
|
||||
// flex: 0;
|
||||
// & + .v-tabs-items {
|
||||
// height: calc(100% - 38px) !important;
|
||||
// width: 100%;
|
||||
// background-color: transparent !important;
|
||||
// }
|
||||
// &-bar {
|
||||
// height: 38px;
|
||||
// background-color: transparent !important;
|
||||
// border-bottom: 1px solid $--color-hover_d;
|
||||
// }
|
||||
// .v-tab {
|
||||
// margin: 0 !important;
|
||||
// }
|
||||
// }
|
||||
.v-tabs {
|
||||
|
||||
.v-tab {
|
||||
padding: 16px 0;
|
||||
font-size: 14px;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
transform: translateY(1px);
|
||||
letter-spacing: 0;
|
||||
|
||||
+.v-tab {
|
||||
margin-left: 32px;
|
||||
}
|
||||
|
||||
min-width:auto;
|
||||
}
|
||||
}
|
||||
|
||||
@each $theme in dark, light {
|
||||
.v-application.#{$theme}-mode {
|
||||
@ -22,67 +22,112 @@
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
|
||||
.v-tabs-bar{
|
||||
background-color: rgba(0, 0, 0, 0)
|
||||
}
|
||||
|
||||
.v-slide-group__content {
|
||||
border-bottom: 1px solid map-deep-get($config,
|
||||
#{$theme},
|
||||
"v-tabs-items-border-color"
|
||||
);
|
||||
}
|
||||
|
||||
.v-slide-group__wrapper {
|
||||
background-color: map-deep-get($config,
|
||||
#{$theme},
|
||||
"card-default-backgroundColor"
|
||||
);
|
||||
overflow: visible !important;
|
||||
contain: initial !important;
|
||||
}
|
||||
|
||||
.v-tab {
|
||||
border: 1px solid transparent;
|
||||
border-radius: 6px 6px 0 0;
|
||||
border-bottom-color: map-deep-get(
|
||||
$config,
|
||||
#{$theme},
|
||||
"v-tabs-active-border-color"
|
||||
);
|
||||
background-color: map-deep-get(
|
||||
$config,
|
||||
#{$theme},
|
||||
"v-tabs-backgroundColor"
|
||||
);
|
||||
padding: 16px 0;
|
||||
font-size: 14px;
|
||||
// border-radius: 6px 6px 0 0;
|
||||
// border-bottom-color: map-deep-get(
|
||||
// $config,
|
||||
// #{$theme},
|
||||
// "v-tabs-active-border-color"
|
||||
// );
|
||||
// background-color: map-deep-get(
|
||||
// $config,
|
||||
// #{$theme},
|
||||
// "v-tabs-backgroundColor"
|
||||
// );
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
transform: translateY(1px);
|
||||
letter-spacing: 0;
|
||||
+ .v-tab {
|
||||
margin-left: 4px;
|
||||
margin-left: 32px;
|
||||
}
|
||||
&::before {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: map-deep-get(
|
||||
$config,
|
||||
#{$theme},
|
||||
"v-tabs-hover-color"
|
||||
) !important;
|
||||
}
|
||||
|
||||
&:not(.v-tab--active){
|
||||
color: map-deep-get($config, #{$theme}, "router-tab-item-color") !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.v-tab--active {
|
||||
border-top-color: map-deep-get(
|
||||
$config,
|
||||
#{$theme},
|
||||
"v-tabs-active-border-color"
|
||||
);
|
||||
border-right-color: map-deep-get(
|
||||
$config,
|
||||
#{$theme},
|
||||
"v-tabs-active-border-color"
|
||||
);
|
||||
border-left-color: map-deep-get(
|
||||
$config,
|
||||
#{$theme},
|
||||
"v-tabs-active-border-color"
|
||||
);
|
||||
border-bottom-color: map-deep-get(
|
||||
$config,
|
||||
#{$theme},
|
||||
"v-tabs-active-backgroundColor"
|
||||
);
|
||||
// border-top-color: map-deep-get(
|
||||
// $config,
|
||||
// #{$theme},
|
||||
// "v-tabs-active-border-color"
|
||||
// );
|
||||
// border-right-color: map-deep-get(
|
||||
// $config,
|
||||
// #{$theme},
|
||||
// "v-tabs-active-border-color"
|
||||
// );
|
||||
// border-left-color: map-deep-get(
|
||||
// $config,
|
||||
// #{$theme},
|
||||
// "v-tabs-active-border-color"
|
||||
// );
|
||||
// border-bottom-color: map-deep-get(
|
||||
// $config,
|
||||
// #{$theme},
|
||||
// "v-tabs-active-backgroundColor"
|
||||
// );
|
||||
background-color: map-deep-get(
|
||||
$config,
|
||||
#{$theme},
|
||||
"v-tabs-active-backgroundColor"
|
||||
);
|
||||
}
|
||||
|
||||
.v-tabs-slider {
|
||||
border-bottom: 1px solid;
|
||||
border-bottom-color: map-deep-get($config,
|
||||
#{$theme},
|
||||
"v-tabs-active-border-color"
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.v-tabs-items {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
border-top: 1px
|
||||
solid
|
||||
map-deep-get($config, #{$theme}, "v-tabs-active-border-color");
|
||||
background-color: map-deep-get($config,
|
||||
#{$theme},
|
||||
"card-default-backgroundColor"
|
||||
);
|
||||
// border-top: 1px
|
||||
// solid
|
||||
// map-deep-get($config, #{$theme}, "v-tabs-active-border-color");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
.txt {
|
||||
&__bar {
|
||||
display: flex;
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
@ -11,6 +12,7 @@
|
||||
position: relative;
|
||||
top: 3px;
|
||||
}
|
||||
|
||||
&.log {
|
||||
&:before {
|
||||
background-color: $--color-primary__green;
|
||||
@ -44,15 +46,29 @@
|
||||
}
|
||||
|
||||
.custom-title-4 {
|
||||
font-size: 1.125rem !important;
|
||||
font-size: 1.25rem !important;
|
||||
font-weight: 700 !important;
|
||||
line-height: 1.25 !important;
|
||||
}
|
||||
|
||||
.custom-title-4-new {
|
||||
font-size: 1.25rem !important;
|
||||
font-weight: 600 !important;
|
||||
line-height: 1.25 !important;
|
||||
}
|
||||
|
||||
.custom-title-6 {
|
||||
font-size: 1.0rem !important;
|
||||
font-weight: 700 !important;
|
||||
line-height: 1.25 !important;
|
||||
}
|
||||
|
||||
.custom-title-7 {
|
||||
font-size: 0.875rem !important;
|
||||
font-weight: 400 !important;
|
||||
line-height: 22px !important;
|
||||
}
|
||||
|
||||
.custom-title-8 {
|
||||
font-size: 0.75rem !important;
|
||||
font-weight: 700 !important;
|
||||
@ -66,15 +82,15 @@
|
||||
|
||||
.custom-text-2 {
|
||||
opacity: 0.6;
|
||||
font-family: SpoqaHanSansNeo;
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
font-style: normal;
|
||||
line-height: 2.17;
|
||||
letter-spacing: normal;
|
||||
text-align: right;
|
||||
color: #fff;
|
||||
// font-weight: normal;
|
||||
// font-stretch: normal;
|
||||
// font-style: normal;
|
||||
// letter-spacing: normal;
|
||||
// text-align: right;
|
||||
// color: #fff;
|
||||
// font-family: SpoqaHanSansNeo;
|
||||
}
|
||||
|
||||
.text-color--white-0 {
|
||||
@ -94,5 +110,32 @@
|
||||
.text-color--sub {
|
||||
color: map-deep-get($config, #{$theme}, "text-subcolor");
|
||||
}
|
||||
|
||||
.h1-title {
|
||||
font-weight: 600;
|
||||
font-size: 24px;
|
||||
line-height: 32px;
|
||||
letter-spacing: 0;
|
||||
color: map-deep-get($config, #{$theme}, "h1-title");
|
||||
}
|
||||
|
||||
|
||||
.custom-subtitle-tab {
|
||||
font-size: 1.25rem !important;
|
||||
font-weight: 600 !important;
|
||||
line-height: 1.25 !important;
|
||||
color: map-deep-get($config, #{$theme}, "subtitle-tab");
|
||||
}
|
||||
|
||||
.v-dialog {
|
||||
.custom-title-4 {
|
||||
font-size: 16px !important;
|
||||
font-weight: 600 !important;
|
||||
color: map-deep-get($config, #{$theme}, "card-title-color");
|
||||
line-height: 24px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
77
assets/scss/datepicker.scss
Normal file
77
assets/scss/datepicker.scss
Normal file
@ -0,0 +1,77 @@
|
||||
@each $theme in dark, light {
|
||||
|
||||
// @include theme($theme);
|
||||
.v-application.#{$theme}-mode {
|
||||
|
||||
.search-box-label {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.datepicker-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
border-radius: 6px;
|
||||
border: solid 1px;
|
||||
height: 40px;
|
||||
// border-color: #424242;
|
||||
border-color: map-deep-get($config, #{$theme}, "tui-datepicker-border-color");
|
||||
|
||||
|
||||
.v-input {
|
||||
|
||||
// ----------------------
|
||||
&.v-input--is-readonly {
|
||||
border-color: rgba(0, 0, 0, 0);
|
||||
flex-grow: 1;
|
||||
|
||||
&:not(.v-input--radio-group) {
|
||||
&:not(.v-input--checkbox) {
|
||||
::v-deep {
|
||||
.v-input__slot {
|
||||
background-color: rgba(0, 0, 0, 0) !important;
|
||||
|
||||
fieldset {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// -------------------
|
||||
.v-input__append-outer {
|
||||
margin-top: 0;
|
||||
margin-left: 0;
|
||||
|
||||
#startpicker-container,
|
||||
#endpicker-container {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 36px;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.v-input__custom {
|
||||
flex: 0 0 auto;
|
||||
|
||||
&.half {
|
||||
width: calc(50% - 20px);
|
||||
}
|
||||
|
||||
&.large {
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
&.datepicker-timeselect {
|
||||
border: solid 1px map-deep-get($config, #{$theme}, "tui-datepicker-border-color") !important;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -8,7 +8,7 @@ $--color-gray_C: #cccccc !important;
|
||||
$--color-gray_9: #95a0a9 !important;
|
||||
$--color-gray_7: #767d83 !important;
|
||||
$--color-gray_999: #999 !important;
|
||||
$--color-gray_555: #555 !important;
|
||||
$--color-gray_555: #555;
|
||||
$--color-gray_aaa: #aaa !important;
|
||||
$--color-hover_d: #47535c !important;
|
||||
$--color-hover_l: #f0f5fc !important;
|
||||
@ -25,96 +25,99 @@ $--theme-color-g7-g9: "";
|
||||
$--theme-color-g9-g7: "";
|
||||
|
||||
$scrollbar-width: 11px; // 스크롤 바
|
||||
$column-spacer: 20px; // 검색 영역 열 간격
|
||||
$column-spacer: 16px; // 검색 영역 열 간격
|
||||
$row-spacer: 14px; // 검색 영역 행 간격
|
||||
|
||||
$color: (
|
||||
"black": (
|
||||
"0": #000,
|
||||
"1": #111
|
||||
),
|
||||
"white": (
|
||||
"0": #fff
|
||||
),
|
||||
"week": (
|
||||
"sun": #fb5a83,
|
||||
"sat": #2d8cf6
|
||||
)
|
||||
"black": ("0": #000,
|
||||
"1": #111),
|
||||
"white": ("0": #fff),
|
||||
"week": ("sun": #fb5a83,
|
||||
"sat": #2d8cf6)
|
||||
);
|
||||
|
||||
$config: (
|
||||
dark: (
|
||||
w-g5: $--color-white,
|
||||
dark: (w-g5: $--color-white,
|
||||
g5-w: $--color-gray_555,
|
||||
gc-g9: $--color-gray_C,
|
||||
g5-gc: $--color-gray_555,
|
||||
g7-g9: $--color-gray_7,
|
||||
g9-g7: $--color-gray_9,
|
||||
pageBackground: #23272b,
|
||||
cardBackground: #242940,
|
||||
cardBackground: #212224,
|
||||
hover: #47535c,
|
||||
btnClose: #24282c,
|
||||
scrollbar-track: #2f334a,
|
||||
scrollbar-thumb: #575b72,
|
||||
card-default-color: #fff,
|
||||
card-default-color: #FFFFFFA6,
|
||||
card-title-color: #FFFFFFD9, // #111,
|
||||
card-subtitle: rgba(255, 255, 255, 0.6),
|
||||
card-text-info-color: #1668DC,
|
||||
card-text-title-color: #FFFFFFA6,
|
||||
activate: #fff,
|
||||
non-activate: rgba(255, 255, 255, 0.6),
|
||||
text-subcolor: rgba(255, 255, 255, 0.6),
|
||||
border-color: rgba(255, 255, 255, 0.1),
|
||||
router-header: #1d2133,
|
||||
router-tab-item: #2d3355,
|
||||
router-tab-item-active: #18579e,
|
||||
router-tab-item-color: #fff,
|
||||
router-tab-item-active-color: #fff,
|
||||
router-tab-item-icon-color: rgba(255, 255, 255, 0.5),
|
||||
router-tab-item-icon-active-color: #fff,
|
||||
router-tab-item-hover-color: #3896ff,
|
||||
router-header: #212224,
|
||||
router-container: #141415,
|
||||
container-fluid: #141415,
|
||||
router-tab-item: transparent,
|
||||
router-tab-item-active: transparent,
|
||||
router-tab-item-color: #FFFFFFD9,
|
||||
router-tab-item-active-color: #1668DC,
|
||||
router-tab-item-icon-color: #FFFFFFD9,
|
||||
router-tab-item-icon-active-color: #1668DC,
|
||||
router-tab-item-hover-color: #1668DC,
|
||||
router-tab-slot-end-button-backgroundColor: #144985,
|
||||
v-btn-backgroundColor: #144985,
|
||||
v-box: #383f5d,
|
||||
v-box: #212224,
|
||||
v-banner-border-color: rgba(255, 255, 255, 0.1),
|
||||
v-treeview-node-root-backgroundColor: #18579e,
|
||||
v-treeview-node-root-label-color: #fff,
|
||||
v-treeview-node-root-label-active-color: #fff,
|
||||
v-treeview-node-root-icon-color: #fff,
|
||||
v-treeview-node-root-icon-active-color: #fff,
|
||||
v-treeview-node-subroot-backgroundColor: #2d3355,
|
||||
v-treeview-node-root-backgroundColor: #212224,
|
||||
v-treeview-node-root-label-color: #FFFFFFD9,
|
||||
v-treeview-node-root-label-active-color: #FFFFFFD9,
|
||||
v-treeview-node-root-icon-color: #FFFFFFD9,
|
||||
v-treeview-node-root-icon-active-color: #FFFFFFD9,
|
||||
// v-treeview-node-subroot-backgroundColor: #FFFFFF0A,
|
||||
v-treeview-node-subroot-backgroundColor: transparent,
|
||||
v-treeview-node-label-color: rgba(255, 255, 255, 0.6),
|
||||
v-treeview-node-label-active-color: #fff,
|
||||
v-treeview-node-label-active-color: #1668DC,
|
||||
v-treeview-leaf-active-backgroundColor: rgba(45, 51, 85, 0.5),
|
||||
v-treeview-leaf-active-color: #3896ff,
|
||||
v-treeview-icon-color: rgba(255, 255, 255, 0.6),
|
||||
v-treeview-icon-active-color: #fff,
|
||||
v-input-backgroundColor: rgba(13, 15, 23, 0.3),
|
||||
v-input-fieldset-color: rgba(255, 255, 255, 0.32),
|
||||
v-treeview-node-label-children-color: #fff,
|
||||
v-input-backgroundColor: transparent,
|
||||
v-input-color: rgba(255, 255, 255, 0.25),
|
||||
v-input-fieldset-color: #424242,
|
||||
v-input-fieldset-hover-color: rgba(255, 255, 255, 1),
|
||||
v-input-icon-color: #fff,
|
||||
v-input-readonly-border-color: rgba(255, 255, 255, 0.3),
|
||||
v-input-readonly-backgroundColor: rgba(57, 64, 94, 0.3),
|
||||
v-input-disabled-backgroundColor: rgba(57, 64, 94, 0.3),
|
||||
v-input-disabled-color: rgba(255, 255, 255, 0.2),
|
||||
v-select-label-color: #fff,
|
||||
v-input-readonly-border-color:#424242,
|
||||
v-input-readonly-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-select-label-color: rgba(255, 255, 255, 0.85),
|
||||
v-calendar-weekday-backgroundColor: #383f5d,
|
||||
v-calendar-weekday-color: #fff,
|
||||
v-calendar-weekday-border-color: rgba(255, 255, 255, 0.1),
|
||||
v-calendar-day-color: #fff,
|
||||
v-calendar-day-in-not-month-color: rgba(255, 255, 255, 0.05),
|
||||
v-calendar-is-today-background-color: #2d4571,
|
||||
tui-grid-header-backgroundColor: #383f5d,
|
||||
tui-grid-border-horziontal-color: #383f5d,
|
||||
tui-grid-border-vertical-color: rgba(255, 255, 255, 0.1),
|
||||
tui-grid-cell-backgroundColor: #242940,
|
||||
tui-grid-title-color: #FFFFFFD9,
|
||||
tui-grid-header-backgroundColor: #2a2b2d,
|
||||
tui-grid-header-color: #FFFFFFD9,
|
||||
tui-grid-border-horziontal-color: #212224,
|
||||
tui-grid-border-vertical-color: #212224,
|
||||
tui-grid-cell-backgroundColor: #212224,
|
||||
tui-grid-cell-color: #fff,
|
||||
tui-grid-cell-insert-color: #13636c,
|
||||
tui-grid-cell-selected-color: #1a4e87,
|
||||
tui-grid-cell-selected-color: #0A224F,
|
||||
tui-grid-cell-modify-color: #13636c,
|
||||
tui-grid-cell-removed-color: #f6637b,
|
||||
tui-grid-cell-disabled-color: rgb(170, 170, 170),
|
||||
tui-grid-cell-hover-backgroundColor: #31375b,
|
||||
v-tabs-items-border-color: rgba(255, 255, 255, 0.7),
|
||||
tui-grid-cell-hover-backgroundColor: #2d4571,
|
||||
v-tabs-items-border-color: #FFFFFF0F,
|
||||
v-tabs-backgroundColor: rgba(57, 64, 94, 0.5),
|
||||
v-tabs-active-backgroundColor: #242940,
|
||||
v-tabs-active-backgroundColor: transparent,
|
||||
v-tabs-active-border-color: rgba(255, 255, 255, 0.7),
|
||||
v-dialog-card-text-color: #fff,
|
||||
tui-datepicker-backgroundColor: #0d0f17,
|
||||
@ -122,11 +125,55 @@ $config: (
|
||||
tui-datepicker-selectable-hover-color: #2d3355,
|
||||
tui-datepicker-selected-color: #1a4e87,
|
||||
tui-datepicker-calendar-color: #fff,
|
||||
tui-editor-contents-color: #111,
|
||||
admin-menu-expanded-list-backgroundColor: #144985
|
||||
tui-editor-contents-color: rgba(0, 0, 0, 0.88),
|
||||
tui-grid-cell-borderStyle: solid,
|
||||
tui-grid-cell-borderColor: #FFFFFF0f,
|
||||
admin-menu-expanded-list-backgroundColor: #144985,
|
||||
h1-title: #1668DC,
|
||||
v-btn-save: transparent,
|
||||
v-btn-add-text: #212224,
|
||||
header-backgroud: #131629,
|
||||
v-btn-header-background: #212224,
|
||||
v-btn-header-border: #424242,
|
||||
v-btn-header-text: #fff,
|
||||
v-icon-orange:#D87A16,
|
||||
v-icon-blue:#1668DC,
|
||||
v-btn-excel-dowload-title: #FFFFFFD9,
|
||||
v-btn-excel-dowload-bg: #00000026,
|
||||
basic-button-color: #FFFFFFD9,
|
||||
basic-button-background: #212224,
|
||||
search-btn-color: #212224,
|
||||
card-default-backgroundColor: rgba(155, 155, 155, 0),
|
||||
v-icon-chevron-down: rgba(255, 255, 255, 0.45),
|
||||
v-icon-search: rgba(255, 255, 255, 0.45),
|
||||
icon-color: rgba(255, 255, 255, 0.45),
|
||||
menu-bg-color:rgba(33, 34, 36, 1),
|
||||
arow-line-btn-bg-color: #111A2C,
|
||||
arow-line-color: #1668DC,
|
||||
search-btn-background: #1668DC,
|
||||
v-btn-color-default: #FFFFFFD9,
|
||||
v-btn-bg-default: #FFFFFF2E,
|
||||
v-input-popup-password-border: #424242,
|
||||
v-input-textarea-border: #424242,
|
||||
v-input-textarea-bg: #212224,
|
||||
v-input-textarea-color: #FFFFFFD9,
|
||||
v-treeview-node-label-active-bg: #111A2C,
|
||||
v-treeview-node-label-active-border: #1668DC,
|
||||
v-treeview-leaf-subchildren-backgroundColor: #2a2b2d,
|
||||
ant-btn-primary-bg: #1668DC,
|
||||
ant-btn-primary-color: #212224,
|
||||
ant-btn-danger-bg:#D32029,
|
||||
ant-btn-danger-border:#D32029,
|
||||
ant-btn-danger-color:#212224,
|
||||
ant-btn-default-border:#FFFFFF2E,
|
||||
ant-btn-default-bg:#FFFFFF2E,
|
||||
ant-btn-default-color:#FFFFFFD9,
|
||||
ant-btn-default-border-outlined:#424242,
|
||||
btn-header-select-bg: #1F1F1F,
|
||||
btn-header-select-color:#FFFFFFD9,
|
||||
subtitle-tab: #FFFFFFA6,
|
||||
),
|
||||
light: (
|
||||
w-g5: $--color-gray_555,
|
||||
light: (w-g5: $--color-gray_555,
|
||||
g5-w: $--color-white,
|
||||
gc-g9: $--color-gray_999,
|
||||
g5-gc: $--color-gray_C,
|
||||
@ -137,67 +184,79 @@ $config: (
|
||||
cardBackground: #fefefe,
|
||||
hover: #f0f5fc,
|
||||
btnClose: #f1f0f8,
|
||||
scrollbar-track: #e9e9e9,
|
||||
scrollbar-track: rgba(0, 0, 0, 0), // #e9e9e9,
|
||||
scrollbar-thumb: #bbbbbb,
|
||||
card-default-color: #111,
|
||||
card-subtitle: #555,
|
||||
card-default-color: #00000073, // #111,
|
||||
card-subtitle: #1677ff,
|
||||
card-text-info-color: #1677FF,
|
||||
card-text-title-color: #00000073,
|
||||
card-title-color: #000000E0, // #111,
|
||||
activate: #111,
|
||||
non-activate: #555,
|
||||
text-subcolor: #999,
|
||||
border-color: #ddd,
|
||||
router-header: #fff,
|
||||
router-tab-item: #e1e7f3,
|
||||
router-tab-item-active: #4777d9,
|
||||
router-tab-item-color: #111,
|
||||
router-tab-item-active-color: #fff,
|
||||
router-tab-item-icon-color: #838aa6,
|
||||
router-tab-item-icon-active-color: #fff,
|
||||
router-tab-item-hover-color: #366dbe,
|
||||
router-container: #f8f8f8,
|
||||
container-fluid: #f8f8f8,
|
||||
router-tab-item: #fff,
|
||||
router-tab-item-active: #fff,
|
||||
router-tab-item-color: #000000E0,
|
||||
router-tab-item-active-color: #1677ff,
|
||||
router-tab-item-icon-color: #000000E0,
|
||||
router-tab-item-icon-active-color: #1677ff,
|
||||
router-tab-item-hover-color: #1677ff,
|
||||
router-tab-slot-end-button-backgroundColor: #3f4d7d,
|
||||
v-btn-backgroundColor: #4777d9,
|
||||
v-box: #f0f3fa,
|
||||
v-btn-backgroundColor: #1677ff,
|
||||
// v-btn-backgroundColor: #fff,
|
||||
v-box: #FFFFFF,
|
||||
v-banner-border-color: #ddd,
|
||||
v-treeview-node-root-backgroundColor: #4777d9,
|
||||
v-treeview-node-root-label-color: #111,
|
||||
v-treeview-node-root-label-active-color: #fff,
|
||||
v-treeview-node-root-icon-color: #555,
|
||||
v-treeview-node-root-icon-active-color: #fff,
|
||||
v-treeview-node-subroot-backgroundColor: #e1e7f3,
|
||||
v-treeview-node-root-backgroundColor: #FFFFFF,
|
||||
v-treeview-node-root-label-color: #000000E0,
|
||||
v-treeview-node-root-label-active-color: #000000E0,
|
||||
v-treeview-node-root-icon-color: #000000E0,
|
||||
v-treeview-node-root-icon-active-color: #000000E0,
|
||||
// v-treeview-node-subroot-backgroundColor: #00000005,
|
||||
v-treeview-node-subroot-backgroundColor: transparent,
|
||||
v-treeview-node-label-color: #555,
|
||||
v-treeview-node-label-active-color: #111,
|
||||
v-treeview-node-label-active-color: #002C8C,
|
||||
v-treeview-node-label-children-color: #616885,
|
||||
v-treeview-leaf-active-backgroundColor: #edf1f7,
|
||||
v-treeview-leaf-active-color: #366dbe,
|
||||
v-treeview-icon-color: #a4aac3,
|
||||
v-treeview-icon-active-color: #616885,
|
||||
v-input-backgroundColor: #ffffff,
|
||||
v-input-fieldset-color: #b4b8c9,
|
||||
v-input-fieldset-hover-color: #b4b8c9,
|
||||
v-input-icon-color: #555,
|
||||
v-input-readonly-border-color: #b4b8c9,
|
||||
v-input-readonly-backgroundColor: #f5f5f5,
|
||||
v-input-disabled-backgroundColor: #eee,
|
||||
v-input-disabled-color: #bbb,
|
||||
v-select-label-color: #111,
|
||||
v-input-color: rgba(0, 0, 0, 0.25),
|
||||
v-input-fieldset-color: #d9d9d9,
|
||||
v-input-fieldset-hover-color: #1890ff,
|
||||
v-input-icon-color: #d9d9d9,
|
||||
v-input-readonly-border-color: #424242,
|
||||
v-input-readonly-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-select-label-color: rgba(0, 0, 0, 0.88),
|
||||
v-calendar-weekday-backgroundColor: #e0e0e0,
|
||||
v-calendar-weekday-color: #111,
|
||||
v-calendar-weekday-border-color: #d4d4d4,
|
||||
v-calendar-day-color: #111,
|
||||
v-calendar-day-in-not-month-color: #f8f8f8,
|
||||
v-calendar-is-today-background-color: #e3eaf3,
|
||||
tui-grid-header-backgroundColor: #e0e0e0,
|
||||
tui-grid-title-color: #000000E0,
|
||||
tui-grid-header-backgroundColor: #fafafa, //#e0e0e0,
|
||||
tui-grid-header-color: rgba(0, 0, 0, 0.88),
|
||||
tui-grid-border-horziontal-color: #e0e0e0,
|
||||
tui-grid-border-vertical-color: #d4d4d4,
|
||||
tui-grid-border-vertical-color: rgba(0, 0, 0, 0.06), //#d4d4d4,
|
||||
tui-grid-cell-backgroundColor: #fff,
|
||||
tui-grid-cell-color: #555,
|
||||
tui-grid-cell-color: #000000E0,
|
||||
tui-grid-cell-insert-color: #13636c,
|
||||
tui-grid-cell-selected-color: #ecf2fa,
|
||||
tui-grid-cell-selected-color: #E6F4FF,
|
||||
tui-grid-cell-modify-color: #e6f5f7,
|
||||
tui-grid-cell-removed-color: #fddde1,
|
||||
tui-grid-cell-hover-backgroundColor: #f5f5f5,
|
||||
v-tabs-items-border-color: #989db1,
|
||||
v-tabs-items-border-color: #0000000F,
|
||||
v-tabs-backgroundColor: #ddd,
|
||||
v-tabs-active-backgroundColor: #fff,
|
||||
v-tabs-active-border-color: #989db1,
|
||||
v-tabs-active-backgroundColor: rgba(0, 0, 0, 0), // #fff,
|
||||
v-tabs-active-border-color: #1677FF,
|
||||
v-tabs-hover-color: #1677FF,
|
||||
v-dialog-card-text-color: #111,
|
||||
tui-datepicker-backgroundColor: #fff,
|
||||
tui-datepicker-border-color: #b4b8c9,
|
||||
@ -205,6 +264,49 @@ $config: (
|
||||
tui-datepicker-selected-color: #4777d9,
|
||||
tui-datepicker-calendar-color: #111,
|
||||
tui-editor-contents-color: #111,
|
||||
admin-menu-expanded-list-backgroundColor: #3f4d7d
|
||||
)
|
||||
tui-grid-cell-borderStyle: solid,
|
||||
tui-grid-cell-borderColor: #0000000F,
|
||||
admin-menu-expanded-list-backgroundColor: #3f4d7d,
|
||||
h1-title: #002C8C,
|
||||
header-backgroud: #F0F5FF,
|
||||
v-btn-header-background: #FFF,
|
||||
v-btn-header-border: #D9D9D9,
|
||||
v-btn-header-text: #000000,
|
||||
v-icon-orange:#FA8C16,
|
||||
v-icon-blue:#1677FF,
|
||||
v-btn-excel-dowload-title: #000000E0,
|
||||
v-btn-excel-dowload-bg: #00000026,
|
||||
basic-button-color: #000000E0,
|
||||
basic-button-background: #FFFFFF,
|
||||
search-btn-color: #ffffff,
|
||||
card-default-backgroundColor: rgba(155, 155, 155, 0),
|
||||
v-icon-chevron-down:rgba(0, 0, 0, 0.45),
|
||||
v-icon-search:rgba(0, 0, 0, 0.45),
|
||||
icon-color: rgba(0, 0, 0, 0.45),
|
||||
menu-bg-color: #fff,
|
||||
arow-line-btn-bg-color: #E6F4FF,
|
||||
arow-line-color: #1677FF,
|
||||
search-btn-background: #1677FF,
|
||||
v-btn-bg-default: #00000026,
|
||||
v-btn-color-default: #000000E0,
|
||||
v-input-popup-password-border: #D9D9D9,
|
||||
v-input-textarea-border: #D9D9D9,
|
||||
v-input-textarea-bg: #FFFFFF,
|
||||
v-input-textarea-color: #000000E0,
|
||||
v-treeview-node-label-active-bg: #E6F4FF,
|
||||
v-treeview-node-label-active-border: #1677FF,
|
||||
v-treeview-leaf-subchildren-backgroundColor: #fafafa,
|
||||
ant-btn-primary-bg: #1677FF,
|
||||
ant-btn-primary-color: #FFF,
|
||||
ant-btn-danger-bg:#FFF,
|
||||
ant-btn-danger-border:#F5222D,
|
||||
ant-btn-danger-color:#F5222D,
|
||||
ant-btn-default-border:#00000026,
|
||||
ant-btn-default-bg:#00000026,
|
||||
ant-btn-default-color:#000000E0,
|
||||
ant-btn-default-border-outlined:#D9D9D9,
|
||||
btn-header-select-color:#1F1F1F,
|
||||
btn-header-select-bg:#FFFFFF,
|
||||
subtitle-tab: #000000A6,
|
||||
),
|
||||
);
|
||||
BIN
assets/scss/var.zip
Normal file
BIN
assets/scss/var.zip
Normal file
Binary file not shown.
@ -21,8 +21,8 @@ $material-light: (
|
||||
$treeview-node-padding: 10px;
|
||||
$treeview-node-height: 40px;
|
||||
|
||||
$banner-start-padding: 10px;
|
||||
$banner-end-padding: 10px;
|
||||
$banner-start-padding: 0px;
|
||||
$banner-end-padding: 0px;
|
||||
$banner-y-padding: 12px;
|
||||
|
||||
$card-border-radius: 10px;
|
||||
@ -33,12 +33,12 @@ $card-subtitle-padding: 20px;
|
||||
|
||||
$timeline-dot-small-size: 10px;
|
||||
|
||||
$data-table-regular-row-height: 36px;
|
||||
$data-table-regular-row-height: 32px;
|
||||
|
||||
$input-font-size: 14px;
|
||||
$input-max-height: 36px;
|
||||
$text-field-filled-full-width-outlined-slot-min-height: 36px;
|
||||
$text-field-solo-control-min-height: 36px;
|
||||
$input-max-height: 32px;
|
||||
$text-field-filled-full-width-outlined-slot-min-height: 32px;
|
||||
$text-field-solo-control-min-height: 32px;
|
||||
$text-field-line-height: 1.285;
|
||||
$text-field-enclosed-prepend-append-margin-top: 0;
|
||||
$text-field-enclosed-details-padding: 0 8px;
|
||||
@ -50,7 +50,7 @@ $tabs-item-padding: 12px;
|
||||
|
||||
$list-border-radius: 4px;
|
||||
$list-padding: 0;
|
||||
$list-item-min-height: 36px;
|
||||
$list-item-min-height: 32px;
|
||||
$list-item-padding: 0;
|
||||
$list-item-title-font-size: 0.875rem; // 14px;
|
||||
$list-item-content-padding: 10px 7px;
|
||||
@ -170,7 +170,7 @@ export default {
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
<style lang="scss" scoped>
|
||||
.btn-pager {
|
||||
margin: 4px;
|
||||
input {
|
||||
@ -200,9 +200,9 @@ export default {
|
||||
// .grey--text {
|
||||
// margin-left: 16px;
|
||||
// }
|
||||
.mr-4 {
|
||||
margin-left: 14px;
|
||||
}
|
||||
// .mr-4 {
|
||||
// margin-left: 14px;
|
||||
// }
|
||||
.v-btn__content {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
@ -1,19 +1,23 @@
|
||||
<template>
|
||||
<v-menu offset-y nudge-bottom="8" :left="true">
|
||||
<v-menu offset-y nudge-bottom="8" :right="true">
|
||||
<template v-slot:activator="{ on, attrs }">
|
||||
<v-btn
|
||||
v-bind="attrs"
|
||||
v-on="on"
|
||||
depressed
|
||||
:ripple="false"
|
||||
:class="{ miniVariant }"
|
||||
:style="btnStyle"
|
||||
icon
|
||||
fab
|
||||
small
|
||||
>
|
||||
<v-icon size="32" :class="{ 'mr-2': !miniVariant }"
|
||||
<!-- depressed
|
||||
:ripple="false" -->
|
||||
<!-- :style="btnStyle" -->
|
||||
|
||||
<v-icon size="32" color="#fff"
|
||||
>$icoAdminMenu</v-icon
|
||||
>
|
||||
<span class="body-1 mr-1">{{ userNm }}</span>
|
||||
<v-icon>mdi-chevron-down</v-icon>
|
||||
<!-- <span class="body-1 mr-1">{{ userNm }}</span> -->
|
||||
<!-- <v-icon>mdi-chevron-down</v-icon> -->
|
||||
</v-btn>
|
||||
<!-- <AlertPopup
|
||||
ref="alertPop"
|
||||
@ -23,7 +27,7 @@
|
||||
/> -->
|
||||
</template>
|
||||
|
||||
<v-list class="pa-2">
|
||||
<v-list class="pa-2 btn-close-menu-list" >
|
||||
<!-- <v-list-item class="mb-1">-->
|
||||
<!-- <div class="d-flex align-center">-->
|
||||
<!-- <v-avatar class="mr-1" size="20">-->
|
||||
@ -155,12 +159,15 @@ export default {
|
||||
min-width: auto !important;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 20px !important;
|
||||
margin-bottom: 12px;
|
||||
padding: 0 !important;
|
||||
// margin-bottom: 12px;
|
||||
|
||||
&,
|
||||
&:before {
|
||||
background-color: transparent !important;
|
||||
// background-color: transparent !important;
|
||||
}
|
||||
&.v-btn--fab{
|
||||
height: auto;
|
||||
}
|
||||
|
||||
::v-deep {
|
||||
|
||||
@ -170,9 +170,11 @@ export default {
|
||||
month : month,
|
||||
day : day
|
||||
}
|
||||
this.$refs['planPop'].blocId = this.pageData.blocMstrList[
|
||||
this.pageData.blocId
|
||||
].blocId;
|
||||
// BEGIN TEST UI
|
||||
// this.$refs['planPop'].blocId = this.pageData.blocMstrList[
|
||||
// this.pageData.blocId
|
||||
// ].blocId;
|
||||
// END TEST UI
|
||||
this.$refs['planPop'].dialog = true;
|
||||
},
|
||||
updatePlan(val) {
|
||||
|
||||
@ -59,7 +59,6 @@ export default {
|
||||
computed: {
|
||||
...mapState({
|
||||
isDarkMode: 'isDarkMode',
|
||||
|
||||
chartOption(state) {
|
||||
var dark_Col = [
|
||||
'#01AE6A',
|
||||
@ -352,21 +351,25 @@ export default {
|
||||
tmpChrtOp.color = light_Col;
|
||||
}
|
||||
}
|
||||
// console.log('ops11:',tmpChrtOp)
|
||||
return tmpChrtOp;
|
||||
},
|
||||
}),
|
||||
},
|
||||
created() {
|
||||
// console.log('wd data:',this.widgetData)
|
||||
},
|
||||
methods: {
|
||||
onClick(event, instance, ECharts) {
|
||||
console.log('onClick : ', event);
|
||||
// console.log('onClick : ', event);
|
||||
this.$emit('click', event);
|
||||
},
|
||||
onDblClick(event, instance, ECharts) {
|
||||
console.log('onDblClick : ', event);
|
||||
// console.log('onDblClick : ', event);
|
||||
this.$emit('dblclick', event);
|
||||
},
|
||||
onRightClick(event, instance, ECharts) {
|
||||
console.log('onRightClick : ', event);
|
||||
// console.log('onRightClick : ', event);
|
||||
this.$emit('rclick', event);
|
||||
},
|
||||
onLegendSelect(params) {
|
||||
|
||||
@ -2,20 +2,24 @@
|
||||
<v-row class="search-box" align="center" no-gutters>
|
||||
<v-col v-if="label" :cols="labelCols">
|
||||
<label for="" class="search-box-label">
|
||||
<v-icon x-small :color="required ? '#fb8200' : 'primary'" class="mr-1"
|
||||
>mdi-record-circle</v-icon
|
||||
<v-icon
|
||||
v-if="iconShow"
|
||||
small
|
||||
:class="['mr-1', required ? 'icon-orange' : 'icon-blue']"
|
||||
>$icoBulletPoint</v-icon
|
||||
>
|
||||
{{ label }}
|
||||
</label>
|
||||
</v-col>
|
||||
<v-col :cols="label ? textCols : ''">
|
||||
|
||||
<v-checkbox
|
||||
v-model="chkValue"
|
||||
:disabled="disabledFlag"
|
||||
:readonly="readonly || false"
|
||||
:required="required || false"
|
||||
:false-value="false"
|
||||
:color="isDarkMode ? '#fff' : '#4777d9'"
|
||||
:color="isDarkMode ? '#fff' : '#1890ff'"
|
||||
@change="modifyValue"
|
||||
></v-checkbox>
|
||||
</v-col>
|
||||
@ -23,7 +27,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapMutations } from 'vuex';
|
||||
import { mapState, mapMutations } from "vuex";
|
||||
export default {
|
||||
props: {
|
||||
parentPrgmId: {
|
||||
@ -63,6 +67,11 @@ export default {
|
||||
require: false,
|
||||
default: 7,
|
||||
},
|
||||
iconShow: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: true
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@ -74,7 +83,7 @@ export default {
|
||||
|
||||
computed: {
|
||||
...mapState({
|
||||
searchParam: state => state.pageData,
|
||||
searchParam: (state) => state.pageData,
|
||||
myBindingDara(state) {
|
||||
return state.pageData[this.parentPrgmId][this.valueNm];
|
||||
},
|
||||
@ -92,7 +101,7 @@ export default {
|
||||
this.chkValue = this.searchParam[this.parentPrgmId][this.valueNm];
|
||||
},
|
||||
methods: {
|
||||
...mapMutations({ setPageData: 'setPageData' }),
|
||||
...mapMutations({ setPageData: "setPageData" }),
|
||||
modifyValue(e) {
|
||||
return this.setPageData({ [this.valueNm]: e });
|
||||
},
|
||||
|
||||
@ -17,7 +17,6 @@
|
||||
:false-value="false"
|
||||
:color="isDarkMode ? '#fff' : '#4777d9'"
|
||||
@change="modifyValue"
|
||||
|
||||
></v-checkbox>
|
||||
</v-col>
|
||||
<v-col v-if="location == 'rear'" :cols="labelCols">
|
||||
@ -32,7 +31,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapMutations } from 'vuex';
|
||||
import { mapState, mapMutations } from "vuex";
|
||||
export default {
|
||||
props: {
|
||||
parentPrgmId: {
|
||||
@ -80,12 +79,12 @@ export default {
|
||||
location: {
|
||||
type: String,
|
||||
require: false,
|
||||
default: 'front'
|
||||
default: "front",
|
||||
},
|
||||
disabledCheckOption: {
|
||||
type: String,
|
||||
require: false
|
||||
}
|
||||
require: false,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@ -97,7 +96,7 @@ export default {
|
||||
|
||||
computed: {
|
||||
...mapState({
|
||||
searchParam: state => state.pageData,
|
||||
searchParam: (state) => state.pageData,
|
||||
myBindingData(state) {
|
||||
return state.pageData[this.parentPrgmId][this.valueNm];
|
||||
},
|
||||
@ -105,8 +104,7 @@ export default {
|
||||
if (state.pageData[this.parentPrgmId][this.disabledCheckOption] != undefined) {
|
||||
return state.pageData[this.parentPrgmId][this.disabledCheckOption];
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
}),
|
||||
},
|
||||
watch: {
|
||||
@ -118,25 +116,24 @@ export default {
|
||||
},
|
||||
bindingDisabledCheckOption(val) {
|
||||
this.disabledFlag = val;
|
||||
}
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.chkValue = this.searchParam[this.parentPrgmId][this.valueNm];
|
||||
if (this.searchParam[this.parentPrgmId][this.disabledCheckOption] != undefined) {
|
||||
this.disabledFlag = this.searchParam[this.parentPrgmId][this.disabledCheckOption]
|
||||
this.disabledFlag = this.searchParam[this.parentPrgmId][this.disabledCheckOption];
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapMutations({ setPageData: 'setPageData' }),
|
||||
...mapMutations({ setPageData: "setPageData" }),
|
||||
modifyValue(e) {
|
||||
if (this.disabledFlag == true && e.target != undefined) {
|
||||
alert('기간이 한 시간 이내일 경우만 선택할 수 있습니다.')
|
||||
alert("기간이 한 시간 이내일 경우만 선택할 수 있습니다.");
|
||||
} else {
|
||||
if (e.target == undefined) {
|
||||
return this.setPageData({ [this.valueNm]: e });
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
84
components/common/ColumnChart.vue
Normal file
84
components/common/ColumnChart.vue
Normal file
@ -0,0 +1,84 @@
|
||||
<template>
|
||||
<v-chart class="chart" :option="option" autoresize style="width: 400px; height: 300px;" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { use } from 'echarts/core';
|
||||
import { CanvasRenderer } from 'echarts/renderers';
|
||||
import { PieChart } from 'echarts/charts';
|
||||
import {
|
||||
TitleComponent,
|
||||
TooltipComponent,
|
||||
LegendComponent,
|
||||
} from 'echarts/components';
|
||||
import VChart, { THEME_KEY } from 'vue-echarts';
|
||||
import { ref } from 'vue';
|
||||
|
||||
import { defineComponent } from '@vue/composition-api';
|
||||
|
||||
|
||||
use([
|
||||
CanvasRenderer,
|
||||
PieChart,
|
||||
TitleComponent,
|
||||
TooltipComponent,
|
||||
LegendComponent,
|
||||
]);
|
||||
|
||||
export default defineComponent({
|
||||
name: 'ColumnChart',
|
||||
components: {
|
||||
VChart,
|
||||
},
|
||||
provide: {
|
||||
[THEME_KEY]: 'dark',
|
||||
},
|
||||
setup() {
|
||||
const option = ref({
|
||||
title: {
|
||||
text: 'Traffic Sources',
|
||||
left: 'center',
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{a} <br/>{b} : {c} ({d}%)',
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
left: 'left',
|
||||
data: ['Direct', 'Email', 'Ad Networks', 'Video Ads', 'Search Engines'],
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'Traffic Sources',
|
||||
type: 'pie',
|
||||
radius: '55%',
|
||||
center: ['50%', '60%'],
|
||||
data: [
|
||||
{ value: 335, name: 'Direct' },
|
||||
{ value: 310, name: 'Email' },
|
||||
{ value: 234, name: 'Ad Networks' },
|
||||
{ value: 135, name: 'Video Ads' },
|
||||
{ value: 1548, name: 'Search Engines' },
|
||||
],
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)',
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
return { option };
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.chart {
|
||||
height: 100vh;
|
||||
}
|
||||
</style>
|
||||
@ -2,9 +2,9 @@
|
||||
<v-row class="search-box" align="center" no-gutters>
|
||||
<v-col v-if="label" :cols="labelCols">
|
||||
<label for="" class="search-box-label">
|
||||
<v-icon x-small :color="required ? '#fb8200' : 'primary'" class="mr-1"
|
||||
>mdi-record-circle</v-icon
|
||||
>
|
||||
<v-icon v-if="iconShow" small color="primary"
|
||||
:class="['mr-1', required ? 'icon-orange' : 'icon-blue']"
|
||||
>$icoBulletPoint</v-icon>
|
||||
{{ label }}
|
||||
</label>
|
||||
</v-col>
|
||||
@ -20,13 +20,15 @@
|
||||
outlined
|
||||
>
|
||||
<template #append >
|
||||
<v-icon size="20">$icoCalendar</v-icon>
|
||||
<v-icon size="20" v-show="!isRange">$icoCalendar</v-icon>
|
||||
</template>
|
||||
<template #append-outer>
|
||||
<div ref="startpicker-container" id="startpicker-container"></div>
|
||||
</template>
|
||||
</v-text-field>
|
||||
<div v-show="isRange" class="mx-3" :style="{ lineHeight: 0 }">~</div>
|
||||
<div v-if="isRange" class="mx-3" :style="{ lineHeight: 0 }">
|
||||
<img :src="arrowIcon" alt="">
|
||||
</div>
|
||||
<v-text-field
|
||||
v-show="isRange"
|
||||
id="endpicker"
|
||||
@ -70,18 +72,23 @@ export default {
|
||||
labelCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 4,
|
||||
default: 12,
|
||||
},
|
||||
textCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 8,
|
||||
default: 12,
|
||||
},
|
||||
required: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: false,
|
||||
},
|
||||
iconShow: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: true,
|
||||
},
|
||||
isRangeOption:{
|
||||
type:Boolean,
|
||||
require:false,
|
||||
@ -103,6 +110,7 @@ export default {
|
||||
searchParam(state) {
|
||||
return state.pageData[this.parentPrgmId];
|
||||
},
|
||||
isDarkMode: "isDarkMode",
|
||||
}),
|
||||
myCmCycle() {
|
||||
return this.searchParam.cmCycle;
|
||||
@ -194,6 +202,12 @@ export default {
|
||||
this.defaultRange === 'no limite'
|
||||
);
|
||||
},
|
||||
arrowIcon() {
|
||||
if(this.isDarkMode){
|
||||
return require('@/assets/images/arrow_datepicker_dm.png');
|
||||
}
|
||||
return require('@/assets/images/arrow_datepicker.png');
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
myCmCycle() {
|
||||
@ -259,8 +273,10 @@ export default {
|
||||
},
|
||||
mounted() {
|
||||
const startContainer = document.getElementById('startpicker-container');
|
||||
// const startContainer = document.getElementById('datepicker-container');
|
||||
const startTarget = document.getElementById('startpicker');
|
||||
const endContainer = document.getElementById('endpicker-container');
|
||||
// const endContainer = document.getElementById('datepicker-container');
|
||||
const endTarget = document.getElementById('endpicker');
|
||||
|
||||
// datepicker 생성
|
||||
@ -304,6 +320,10 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
...mapMutations({ setPageData: 'setPageData' }),
|
||||
onOpenDatepicker() {
|
||||
this.startDatepickerInstance.open();
|
||||
this.endDatepickerInstance.open();
|
||||
},
|
||||
getStartDt() {
|
||||
const dt = this.startDatepickerInstance.getDate();
|
||||
this.setPageData({
|
||||
@ -401,34 +421,8 @@ export default {
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.datepicker-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
@import "@/assets/scss/datepicker.scss";
|
||||
|
||||
.v-input {
|
||||
.v-input__append-outer {
|
||||
margin-top: 0;
|
||||
margin-left: 0;
|
||||
|
||||
#startpicker-container,
|
||||
#endpicker-container {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 36px;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.v-input__custom {
|
||||
flex: 0 0 auto;
|
||||
&.half {
|
||||
width: calc(50% - 20px);
|
||||
}
|
||||
}
|
||||
::v-deep {
|
||||
.tui-timepicker-row {
|
||||
display: flex;
|
||||
|
||||
@ -2,8 +2,11 @@
|
||||
<v-row class="search-box" align="center" no-gutters>
|
||||
<v-col v-if="label" :cols="labelCols">
|
||||
<label for="" class="search-box-label">
|
||||
<v-icon x-small :color="required ? '#fb8200' : 'primary'" class="mr-1"
|
||||
>mdi-record-circle</v-icon
|
||||
<v-icon
|
||||
v-if="iconShow"
|
||||
small
|
||||
:class="['mr-1', required ? 'icon-orange' : 'icon-blue']"
|
||||
>$icoBulletPoint</v-icon
|
||||
>
|
||||
{{ label }}
|
||||
</label>
|
||||
@ -14,41 +17,72 @@
|
||||
id="startpicker"
|
||||
ref="startpicker"
|
||||
v-model="fromDtValue"
|
||||
:class="(isRange && !selectBoxTimeItemList.selectTimeValue1) ? 'v-input__custom half' : 'v-input__custom'"
|
||||
:class="
|
||||
isRange && !selectBoxTimeItemList.selectTimeValue1
|
||||
? 'v-input__custom half large datepicker-timeselect'
|
||||
: 'v-input__custom large datepicker-timeselect'
|
||||
"
|
||||
style="border-radius: 8px; width: 170px"
|
||||
:hide-details="true"
|
||||
readonly
|
||||
outlined
|
||||
>
|
||||
<template #append>
|
||||
<!-- dark theme border #424242 -->
|
||||
<!-- <template #append>
|
||||
<v-icon size="20">$icoCalendar</v-icon>
|
||||
</template> -->
|
||||
<template v-slot:append>
|
||||
<a-icon class="v-icon" type="calendar" style="width: 14px; height: 14px" />
|
||||
</template>
|
||||
|
||||
<template #append-outer>
|
||||
<div ref="startpicker-container" id="startpicker-container"></div>
|
||||
</template>
|
||||
</v-text-field>
|
||||
|
||||
<component
|
||||
class="mx-2"
|
||||
v-if="selectBoxTimeItemList.selectTimeValue1"
|
||||
:parentPrgmId="parentPrgmId"
|
||||
:is="'SelectBoxTime'"
|
||||
ref="SelectBox1"
|
||||
:propsValue="selectTimeValue1"
|
||||
:itemList="selectTimeValueList1"
|
||||
:minInterval="selectBoxTimeItemList.minInterval ? selectBoxTimeItemList.minInterval : 1"
|
||||
:minInterval="
|
||||
selectBoxTimeItemList.minInterval ? selectBoxTimeItemList.minInterval : 1
|
||||
"
|
||||
@update:propsValue="selectTimeValue1 = $event"
|
||||
/>
|
||||
<div v-show="isRange" class="mx-3" :style="{ lineHeight: 0 }">~</div>
|
||||
<!-- <div v-show="isRange" class="mx-3" :style="{ lineHeight: 0 }">~</div> -->
|
||||
|
||||
<a-icon
|
||||
v-show="isRange"
|
||||
type="arrow-right"
|
||||
class="mx-3 v-icon"
|
||||
style="width: 14px; height: 40px; line-height: 0"
|
||||
/>
|
||||
|
||||
<v-text-field
|
||||
class="mx-2"
|
||||
v-show="isRange"
|
||||
id="endpicker"
|
||||
ref="endpicker"
|
||||
v-model="toDtValue"
|
||||
:class="(isRange && !selectBoxTimeItemList.selectTimeValue2) ? 'v-input__custom half' : 'v-input__custom'"
|
||||
:class="
|
||||
isRange && !selectBoxTimeItemList.selectTimeValue2
|
||||
? 'v-input__custom half large datepicker-timeselect'
|
||||
: 'v-input__custom large datepicker-timeselect'
|
||||
"
|
||||
style="border-radius: 8px; width: 170px"
|
||||
:hide-details="true"
|
||||
readonly
|
||||
outlined
|
||||
>
|
||||
<template #append>
|
||||
<!-- <template #append>
|
||||
<v-icon size="20">$icoCalendar</v-icon>
|
||||
</template> -->
|
||||
<template v-slot:append>
|
||||
<a-icon class="v-icon" type="calendar" style="width: 14px; height: 14px" />
|
||||
</template>
|
||||
<template #append-outer>
|
||||
<div ref="endpicker-container" id="endpicker-container"></div>
|
||||
@ -61,7 +95,9 @@
|
||||
ref="SelectBox2"
|
||||
:propsValue="selectTimeValue2"
|
||||
:itemList="selectTimeValueList2"
|
||||
:minInterval="selectBoxTimeItemList.minInterval ? selectBoxTimeItemList.minInterval : 1"
|
||||
:minInterval="
|
||||
selectBoxTimeItemList.minInterval ? selectBoxTimeItemList.minInterval : 1
|
||||
"
|
||||
@update:propsValue="selectTimeValue2 = $event"
|
||||
/>
|
||||
</div>
|
||||
@ -69,11 +105,11 @@
|
||||
</v-row>
|
||||
</template>
|
||||
<script>
|
||||
import { mapState, mapMutations } from 'vuex';
|
||||
import TuiDatepicker from 'tui-date-picker';
|
||||
import Utility from '~/plugins/utility';
|
||||
import SelectBoxTime from '@/components/common/select/SelectBoxTime';
|
||||
import DateUtility from '~/plugins/dateUtility'
|
||||
import { mapState, mapMutations } from "vuex";
|
||||
import TuiDatepicker from "tui-date-picker";
|
||||
import Utility from "~/plugins/utility";
|
||||
import SelectBoxTime from "@/components/common/select/SelectBoxTime";
|
||||
import DateUtility from "~/plugins/dateUtility";
|
||||
export default {
|
||||
props: {
|
||||
parentPrgmId: {
|
||||
@ -99,6 +135,11 @@ export default {
|
||||
require: false,
|
||||
default: 8,
|
||||
},
|
||||
iconShow: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: false,
|
||||
},
|
||||
required: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
@ -107,29 +148,28 @@ export default {
|
||||
isRangeOption: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: true
|
||||
default: true,
|
||||
},
|
||||
selectBoxTimeItemList: {
|
||||
type: Object,
|
||||
require: false,
|
||||
default: () => {
|
||||
return {};
|
||||
}
|
||||
},
|
||||
},
|
||||
selectFromDtUntilTodayFg: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: false
|
||||
default: false,
|
||||
},
|
||||
selectToDtUntilTodayFg: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: false
|
||||
default: false,
|
||||
},
|
||||
|
||||
},
|
||||
components: {
|
||||
SelectBoxTime
|
||||
SelectBoxTime,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@ -141,10 +181,22 @@ export default {
|
||||
fromDtOldVal: null,
|
||||
toDtOldVal: null,
|
||||
cmCycleFlag: false,
|
||||
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
|
||||
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: {
|
||||
@ -159,39 +211,39 @@ export default {
|
||||
myOptions() {
|
||||
let returnObj = {};
|
||||
switch (this.myCmCycle) {
|
||||
case 'CYC_YEAR':
|
||||
case "CYC_YEAR":
|
||||
returnObj = {
|
||||
type: 'year',
|
||||
viewFormat: 'YYYY',
|
||||
pickerFormat: 'YYYY',
|
||||
sendFormat: 'YYYY',
|
||||
type: "year",
|
||||
viewFormat: "YYYY",
|
||||
pickerFormat: "YYYY",
|
||||
sendFormat: "YYYY",
|
||||
};
|
||||
break;
|
||||
|
||||
case 'CYC_MONTH':
|
||||
case "CYC_MONTH":
|
||||
returnObj = {
|
||||
type: 'month',
|
||||
viewFormat: 'YYYY-MM',
|
||||
pickerFormat: 'YYYY-MM',
|
||||
sendFormat: 'YYYYMM',
|
||||
type: "month",
|
||||
viewFormat: "YYYY-MM",
|
||||
pickerFormat: "YYYY-MM",
|
||||
sendFormat: "YYYYMM",
|
||||
};
|
||||
break;
|
||||
|
||||
case 'CYC_DAY':
|
||||
case "CYC_DAY":
|
||||
returnObj = {
|
||||
type: 'date',
|
||||
viewFormat: 'YYYY-MM-DD',
|
||||
pickerFormat: 'yyyy-MM-dd',
|
||||
sendFormat: 'YYYYMMDD',
|
||||
type: "date",
|
||||
viewFormat: "YYYY-MM-DD",
|
||||
pickerFormat: "yyyy-MM-dd",
|
||||
sendFormat: "YYYYMMDD",
|
||||
};
|
||||
break;
|
||||
|
||||
case 'CYC_HOUR':
|
||||
case "CYC_HOUR":
|
||||
returnObj = {
|
||||
type: 'date',
|
||||
viewFormat: 'YYYY-MM-DD' + (this.timePicker ? ' HH:mm:ss' : ''),
|
||||
pickerFormat: 'yyyy-MM-dd' + (this.timePicker ? ' HH:mm A' : ''),
|
||||
sendFormat: this.timePicker ? 'YYYY-MM-DD HH:mm:ss' : 'YYYYMMDD',
|
||||
type: "date",
|
||||
viewFormat: "YYYY-MM-DD" + (this.timePicker ? " HH:mm:ss" : ""),
|
||||
pickerFormat: "yyyy-MM-dd" + (this.timePicker ? " HH:mm A" : ""),
|
||||
sendFormat: this.timePicker ? "YYYY-MM-DD HH:mm:ss" : "YYYYMMDD",
|
||||
};
|
||||
// returnObj = { type: "day", format: "YYYY-MM-DD HH:mm:ss" };
|
||||
break;
|
||||
@ -207,13 +259,13 @@ export default {
|
||||
fromDtValue(val) {
|
||||
let selectVal = Utility.setFormatDate(
|
||||
this.searchParam.fromDt,
|
||||
this.myOptions.viewFormat,
|
||||
this.myOptions.viewFormat
|
||||
);
|
||||
if (this.selectFromDtUntilTodayFg) {
|
||||
let today = Utility.setFormatDate(new Date(), "YYYY-MM-DD");
|
||||
let dayDiff = DateUtility.diff(selectVal,today,'days');
|
||||
let dayDiff = DateUtility.diff(selectVal, today, "days");
|
||||
if (dayDiff < 0) {
|
||||
alert('오늘 날짜까지 검색이 가능합니다.');
|
||||
alert("오늘 날짜까지 검색이 가능합니다.");
|
||||
selectVal = today;
|
||||
if (this.fromDtOldVal == today) {
|
||||
this.toDtValueChkRang(selectVal);
|
||||
@ -234,20 +286,19 @@ export default {
|
||||
toDtValue() {
|
||||
let selectVal = Utility.setFormatDate(
|
||||
this.searchParam.toDt,
|
||||
this.myOptions.viewFormat,
|
||||
this.myOptions.viewFormat
|
||||
);
|
||||
if (this.selectToDtUntilTodayFg) {
|
||||
let today = Utility.setFormatDate(new Date(), "YYYY-MM-DD");
|
||||
let dayDiff = DateUtility.diff(selectVal,today,'days');
|
||||
let dayDiff = DateUtility.diff(selectVal, today, "days");
|
||||
if (dayDiff < 0) {
|
||||
alert('오늘 날짜까지 검색이 가능합니다.');
|
||||
alert("오늘 날짜까지 검색이 가능합니다.");
|
||||
selectVal = today;
|
||||
if (this.toDtOldVal == today) {
|
||||
this.fromDtValueChkRang(selectVal);
|
||||
this.endDatepickerInstance.setDate(new Date(selectVal));
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
if (this.toDtOldVal == null) {
|
||||
this.toDtOldVal = selectVal;
|
||||
@ -266,7 +317,7 @@ export default {
|
||||
isRange() {
|
||||
return (
|
||||
(this.defaultRange !== null && this.defaultRange > 0 && this.isRangeOption) ||
|
||||
this.defaultRange === 'no limite'
|
||||
this.defaultRange === "no limite"
|
||||
);
|
||||
},
|
||||
},
|
||||
@ -291,15 +342,15 @@ export default {
|
||||
fromDtValue(newVal, oldVal) {
|
||||
if (
|
||||
this.isRange &&
|
||||
this.defaultRange !== 'no limite' &&
|
||||
newVal !== 'Invalid Date' &&
|
||||
this.defaultRange !== "no limite" &&
|
||||
newVal !== "Invalid Date" &&
|
||||
newVal !== oldVal
|
||||
) {
|
||||
this.toDtValueChkRang(newVal);
|
||||
this.startDatepickerInstance.setDate(new Date(newVal));
|
||||
this.fromDtOldVal = newVal;
|
||||
this.setSelectTimeValue1(this.selectTimeValue2, 'check');
|
||||
this.setSelectTimeValue2(this.selectTimeValue1, 'check');
|
||||
this.setSelectTimeValue1(this.selectTimeValue2, "check");
|
||||
this.setSelectTimeValue2(this.selectTimeValue1, "check");
|
||||
} else {
|
||||
this.setPageData({ isFind: true });
|
||||
}
|
||||
@ -307,36 +358,36 @@ export default {
|
||||
toDtValue(newVal, oldVal) {
|
||||
if (
|
||||
this.isRange &&
|
||||
this.defaultRange !== 'no limite' &&
|
||||
newVal !== 'Invalid Date' &&
|
||||
this.defaultRange !== "no limite" &&
|
||||
newVal !== "Invalid Date" &&
|
||||
newVal !== oldVal
|
||||
) {
|
||||
this.fromDtValueChkRang(newVal);
|
||||
this.endDatepickerInstance.setDate(new Date(newVal));
|
||||
this.toDtOldVal = newVal;
|
||||
this.setSelectTimeValue1(this.selectTimeValue2, 'check');
|
||||
this.setSelectTimeValue2(this.selectTimeValue1, 'check');
|
||||
this.setSelectTimeValue1(this.selectTimeValue2, "check");
|
||||
this.setSelectTimeValue2(this.selectTimeValue1, "check");
|
||||
}
|
||||
},
|
||||
},
|
||||
created() {
|
||||
if (this.timePicker) {
|
||||
this.setPageData({
|
||||
fromDt: Utility.setFormatDate(this.today, 'YYYY-MM-DD') + ' 00:00:00',
|
||||
toDt: Utility.setFormatDate(this.today, 'YYYY-MM-DD') + ' 23:59:59',
|
||||
fromDt: Utility.setFormatDate(this.today, "YYYY-MM-DD") + " 00:00:00",
|
||||
toDt: Utility.setFormatDate(this.today, "YYYY-MM-DD") + " 23:59:59",
|
||||
});
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
const startContainer = document.getElementById('startpicker-container');
|
||||
const startTarget = document.getElementById('startpicker');
|
||||
const endContainer = document.getElementById('endpicker-container');
|
||||
const endTarget = document.getElementById('endpicker');
|
||||
const startContainer = document.getElementById("startpicker-container");
|
||||
const startTarget = document.getElementById("startpicker");
|
||||
const endContainer = document.getElementById("endpicker-container");
|
||||
const endTarget = document.getElementById("endpicker");
|
||||
|
||||
// datepicker 생성
|
||||
this.startDatepickerInstance = new TuiDatepicker(startContainer, {
|
||||
date: this.today,
|
||||
language: 'ko',
|
||||
language: "ko",
|
||||
type: this.myOptions.type, // "date", // type: date || month || year
|
||||
input: {
|
||||
element: startTarget,
|
||||
@ -350,7 +401,7 @@ export default {
|
||||
// datepicker 생성
|
||||
this.endDatepickerInstance = new TuiDatepicker(endContainer, {
|
||||
date: this.today,
|
||||
language: 'ko',
|
||||
language: "ko",
|
||||
type: this.myOptions.type, // "date", // type: date || month || year
|
||||
input: {
|
||||
element: endTarget,
|
||||
@ -368,12 +419,12 @@ export default {
|
||||
// datepicker 초기값 생성 끝
|
||||
|
||||
// datepicker 변경시 이벤트 추가
|
||||
this.startDatepickerInstance.on('change', () => this.getStartDt());
|
||||
this.endDatepickerInstance.on('change', () => this.getEndDt());
|
||||
this.startDatepickerInstance.on("change", () => this.getStartDt());
|
||||
this.endDatepickerInstance.on("change", () => this.getEndDt());
|
||||
// datepicker 이벤트는 mount 될때 추가 해주어야 한다.
|
||||
},
|
||||
methods: {
|
||||
...mapMutations({ setPageData: 'setPageData' }),
|
||||
...mapMutations({ setPageData: "setPageData" }),
|
||||
getStartDt() {
|
||||
const dt = this.startDatepickerInstance.getDate();
|
||||
this.setPageData({
|
||||
@ -389,10 +440,7 @@ export default {
|
||||
fromDtValueChkRang(newDt) {
|
||||
const defaultDt = this.$dayjs(this.fromDtValue);
|
||||
const compareDt = this.$dayjs(newDt);
|
||||
const newDefault = Utility.setNewDefaultRange(
|
||||
this.myCmCycle,
|
||||
this.defaultRange,
|
||||
);
|
||||
const newDefault = Utility.setNewDefaultRange(this.myCmCycle, this.defaultRange);
|
||||
const myRange = newDefault.range;
|
||||
const rangeKey = newDefault.key;
|
||||
const rangeGap = compareDt.diff(defaultDt, rangeKey);
|
||||
@ -411,7 +459,7 @@ export default {
|
||||
fromDt: Utility.setBeforetDate(
|
||||
this.searchParam,
|
||||
compareDt,
|
||||
this.myOptions.sendFormat,
|
||||
this.myOptions.sendFormat
|
||||
),
|
||||
});
|
||||
}
|
||||
@ -419,10 +467,7 @@ export default {
|
||||
toDtValueChkRang(newDt) {
|
||||
const defaultDt = this.$dayjs(this.toDtValue);
|
||||
const compareDt = this.$dayjs(newDt);
|
||||
const newDefault = Utility.setNewDefaultRange(
|
||||
this.myCmCycle,
|
||||
this.defaultRange,
|
||||
);
|
||||
const newDefault = Utility.setNewDefaultRange(this.myCmCycle, this.defaultRange);
|
||||
const myRange = newDefault.range;
|
||||
const rangeKey = newDefault.key;
|
||||
const rangeGap = defaultDt.diff(compareDt, rangeKey);
|
||||
@ -438,80 +483,62 @@ export default {
|
||||
toDt: Utility.setAftertDate(
|
||||
this.searchParam,
|
||||
compareDt,
|
||||
this.myOptions.sendFormat,
|
||||
this.myOptions.sendFormat
|
||||
),
|
||||
});
|
||||
}
|
||||
},
|
||||
setSelectTimeValue2(val, type='default'){
|
||||
setSelectTimeValue2(val, type = "default") {
|
||||
this.setPageData({ selectTimeValue1: val });
|
||||
let toDt = this.toDtOldVal;
|
||||
let fromDt = this.fromDtOldVal;
|
||||
let dayDiff = DateUtility.diff(fromDt,toDt,'days');
|
||||
let selectTimeValueList2 = this.selectTimeValueList2.map(item => {
|
||||
let dayDiff = DateUtility.diff(fromDt, toDt, "days");
|
||||
let selectTimeValueList2 = this.selectTimeValueList2.map((item) => {
|
||||
return item.value;
|
||||
});
|
||||
if(dayDiff <= 0 && selectTimeValueList2.indexOf(this.selectTimeValue2) < selectTimeValueList2.indexOf(val)){
|
||||
if (
|
||||
dayDiff <= 0 &&
|
||||
selectTimeValueList2.indexOf(this.selectTimeValue2) <
|
||||
selectTimeValueList2.indexOf(val)
|
||||
) {
|
||||
// this.selectTimeValue2 = selectTimeValueList2[selectTimeValueList2.indexOf(val)];
|
||||
this.selectTimeValue2 = val;
|
||||
this.setPageData({ selectTimeValue2: val });
|
||||
} else {
|
||||
if(type=='default'){
|
||||
if (type == "default") {
|
||||
this.setPageData({ isFind: true });
|
||||
}
|
||||
}
|
||||
},
|
||||
setSelectTimeValue1(val, type='default'){
|
||||
setSelectTimeValue1(val, type = "default") {
|
||||
this.setPageData({ selectTimeValue2: val });
|
||||
let toDt = this.toDtOldVal;
|
||||
let fromDt = this.fromDtOldVal;
|
||||
let dayDiff = DateUtility.diff(fromDt,toDt,'days');
|
||||
let selectTimeValueList2 = this.selectTimeValueList2.map(item => {
|
||||
let dayDiff = DateUtility.diff(fromDt, toDt, "days");
|
||||
let selectTimeValueList2 = this.selectTimeValueList2.map((item) => {
|
||||
return item.value;
|
||||
});
|
||||
if(dayDiff <= 0 && selectTimeValueList2.indexOf(val) < selectTimeValueList2.indexOf(this.selectTimeValue1)){
|
||||
if (
|
||||
dayDiff <= 0 &&
|
||||
selectTimeValueList2.indexOf(val) <
|
||||
selectTimeValueList2.indexOf(this.selectTimeValue1)
|
||||
) {
|
||||
// this.selectTimeValue1 = selectTimeValueList2[selectTimeValueList2.indexOf(val)];
|
||||
this.selectTimeValue1 = val;
|
||||
// this.selectTimeValue1 = this.selectTimeValueList2[selectTimeValueList2.indexOf(val) + 1]
|
||||
this.setPageData({ selectTimeValue1: val });
|
||||
} else {
|
||||
if(type=='default'){
|
||||
if (type == "default") {
|
||||
this.setPageData({ isFind: true });
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.datepicker-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
@import "@/assets/scss/datepicker.scss";
|
||||
|
||||
.v-input {
|
||||
.v-input__append-outer {
|
||||
margin-top: 0;
|
||||
margin-left: 0;
|
||||
|
||||
#startpicker-container,
|
||||
#endpicker-container {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 36px;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.v-input__custom {
|
||||
flex: 0 0 auto;
|
||||
&.half {
|
||||
width: calc(50% - 20px);
|
||||
}
|
||||
}
|
||||
::v-deep {
|
||||
.tui-timepicker-row {
|
||||
display: flex;
|
||||
|
||||
@ -2,9 +2,15 @@
|
||||
<v-row class="search-box" align="center" no-gutters>
|
||||
<v-col v-if="label" :cols="labelCols">
|
||||
<label for="" class="search-box-label">
|
||||
<v-icon x-small :color="required ? '#fb8200' : 'primary'" class="mr-1"
|
||||
<!-- <v-icon x-small :color="required ? '#fb8200' : 'primary'" class="mr-1"
|
||||
>mdi-record-circle</v-icon
|
||||
> -->
|
||||
<v-icon
|
||||
small
|
||||
:class="['mr-1', required ? 'icon-orange' : 'icon-blue']"
|
||||
>
|
||||
$icoBulletPoint
|
||||
</v-icon>
|
||||
{{ label }}
|
||||
</label>
|
||||
</v-col>
|
||||
@ -20,13 +26,16 @@
|
||||
outlined
|
||||
>
|
||||
<template #append >
|
||||
<v-icon size="20">$icoCalendar</v-icon>
|
||||
<v-icon size="20" v-show="!isRange">$icoCalendar</v-icon>
|
||||
</template>
|
||||
<template #append-outer>
|
||||
<div ref="startpicker-container" id="startpicker-container"></div>
|
||||
</template>
|
||||
</v-text-field>
|
||||
<div v-show="isRange" class="mx-3" :style="{ lineHeight: 0 }">~</div>
|
||||
<!-- <div v-show="isRange" class="mx-3" :style="{ lineHeight: 0 }">~</div> -->
|
||||
<div v-show="isRange" class="mx-3" :style="{ lineHeight: 0 }">
|
||||
<img :src="arrowIcon" alt="">
|
||||
</div>
|
||||
<v-text-field
|
||||
v-show="isRange"
|
||||
id="endpicker"
|
||||
@ -104,6 +113,7 @@ export default {
|
||||
return state.pageData[this.parentPrgmId];
|
||||
},
|
||||
}),
|
||||
isDarkMode: "isDarkMode",
|
||||
myCmCycle() {
|
||||
return this.searchParam.cmCycle;
|
||||
},
|
||||
@ -194,6 +204,12 @@ export default {
|
||||
this.defaultRange === 'no limite'
|
||||
);
|
||||
},
|
||||
arrowIcon() {
|
||||
if(this.isDarkMode){
|
||||
return require('@/assets/images/arrow_datepicker_dm.png');
|
||||
}
|
||||
return require('@/assets/images/arrow_datepicker.png');
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
myCmCycle() {
|
||||
@ -401,34 +417,8 @@ export default {
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.datepicker-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
@import "@/assets/scss/datepicker.scss";
|
||||
|
||||
.v-input {
|
||||
.v-input__append-outer {
|
||||
margin-top: 0;
|
||||
margin-left: 0;
|
||||
|
||||
#startpicker-container,
|
||||
#endpicker-container {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: -260px;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.v-input__custom {
|
||||
flex: 0 0 auto;
|
||||
&.half {
|
||||
width: calc(50% - 20px);
|
||||
}
|
||||
}
|
||||
::v-deep {
|
||||
.tui-timepicker-row {
|
||||
display: flex;
|
||||
|
||||
@ -355,34 +355,8 @@ export default {
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.datepicker-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
@import "@/assets/scss/datepicker.scss";
|
||||
|
||||
.v-input {
|
||||
.v-input__append-outer {
|
||||
margin-top: 0;
|
||||
margin-left: 0;
|
||||
|
||||
#startpicker-container,
|
||||
#endpicker-container {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 36px;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.v-input__custom {
|
||||
flex: 0 0 auto;
|
||||
&.half {
|
||||
width: calc(50% - 20px);
|
||||
}
|
||||
}
|
||||
::v-deep {
|
||||
.tui-timepicker-row {
|
||||
display: flex;
|
||||
|
||||
@ -107,13 +107,16 @@ export default {
|
||||
},
|
||||
chkGridOptions() {
|
||||
const options = {
|
||||
// bodyHeight: 'fitToContent',
|
||||
scrollX: false,
|
||||
scrollY: false,
|
||||
...this.gridData.option,
|
||||
useIcon: false,
|
||||
};
|
||||
options.treeColumnOptions = {
|
||||
useIcon: false,
|
||||
...options.treeColumnOptions,
|
||||
};
|
||||
|
||||
return options;
|
||||
},
|
||||
defaultRow() {
|
||||
@ -160,7 +163,7 @@ export default {
|
||||
},
|
||||
created() {},
|
||||
async mounted() {
|
||||
// console.log(this.dataPath);
|
||||
// console.log('--------------DEBUG----gridData: ', this.gridData);
|
||||
if (this.gridName) {
|
||||
this.gridInstance = this.$refs['tuigrid' + this.gridName];
|
||||
|
||||
@ -663,6 +666,8 @@ export default {
|
||||
store.dimension.offsetLeft = offsetLeft;
|
||||
},
|
||||
setHeight(_a,height){
|
||||
return; // setting auto height
|
||||
|
||||
// console.log("setHeight");
|
||||
var dimension = _a.dimension;
|
||||
var headerHeight = dimension.headerHeight, summaryHeight = dimension.summaryHeight, tableBorderWidth = dimension.tableBorderWidth;
|
||||
@ -700,6 +705,11 @@ export default {
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
::v-deep .tui-grid-container {
|
||||
|
||||
// .tui-grid-body-area {
|
||||
// overflow: hidden !important;
|
||||
// }
|
||||
|
||||
.tui-grid-content-area {
|
||||
.tui-grid-cell-content {
|
||||
input[type='number'] {
|
||||
|
||||
47
components/common/MockChart.vue
Normal file
47
components/common/MockChart.vue
Normal file
@ -0,0 +1,47 @@
|
||||
<template>
|
||||
<client-only>
|
||||
<VChart
|
||||
:option="chartOption"
|
||||
ref="chart"
|
||||
style="width:400px; height:300px;"
|
||||
/>
|
||||
</client-only>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import Echarts from 'vue-echarts';
|
||||
// import 'echarts'
|
||||
|
||||
export default {
|
||||
// name: 'Vchart',
|
||||
// components: {
|
||||
// 'v-charts': Echarts,
|
||||
// },
|
||||
data() {
|
||||
return {
|
||||
chartOption: {
|
||||
series: [
|
||||
{
|
||||
type: 'gauge',
|
||||
progress: {
|
||||
show:true
|
||||
},
|
||||
detail: {
|
||||
valueAnimation: true,
|
||||
formatter: '{value}%'
|
||||
},
|
||||
data:[{
|
||||
value: 65,
|
||||
name: 'Progress'
|
||||
}]
|
||||
}
|
||||
]
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
console.log('test chart:')
|
||||
},
|
||||
|
||||
};
|
||||
</script>
|
||||
27
components/common/PageTitle.vue
Normal file
27
components/common/PageTitle.vue
Normal file
@ -0,0 +1,27 @@
|
||||
<template>
|
||||
<h1 class="h1-title">
|
||||
<v-avatar size="12" :style="{ backgroundColor: 'currentColor' }"></v-avatar>
|
||||
{{ text ? text : menuNm}}
|
||||
</h1>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex';
|
||||
|
||||
export default {
|
||||
name: "PageTitle",
|
||||
props: {
|
||||
text: {
|
||||
type: String,
|
||||
required: false,
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
menuNm: state => state.activeMenuInfo.menuNm,
|
||||
}),
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
@ -313,34 +313,8 @@ export default {
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.datepicker-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
@import "@/assets/scss/datepicker.scss";
|
||||
|
||||
.v-input {
|
||||
.v-input__append-outer {
|
||||
margin-top: 0;
|
||||
margin-left: 0;
|
||||
|
||||
#startpicker-container,
|
||||
#endpicker-container {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 36px;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.v-input__custom {
|
||||
flex: 0 0 auto;
|
||||
&.half {
|
||||
width: calc(50% - 20px);
|
||||
}
|
||||
}
|
||||
::v-deep {
|
||||
.tui-timepicker-row {
|
||||
display: flex;
|
||||
|
||||
@ -1,9 +1,11 @@
|
||||
<template>
|
||||
<v-switch
|
||||
class="theme-switch"
|
||||
v-model="mode"
|
||||
@change="themeChange"
|
||||
></v-switch>
|
||||
<a-button
|
||||
class="btn-header"
|
||||
:color="mode ? 'dark' : 'light'"
|
||||
@click="themeChange"
|
||||
icon="bulb"
|
||||
>
|
||||
</a-button>
|
||||
</template>
|
||||
<script>
|
||||
import { mapState, mapMutations } from 'vuex';
|
||||
@ -26,8 +28,11 @@ export default {
|
||||
setThemeChange: 'setThemeChange',
|
||||
}),
|
||||
themeChange() {
|
||||
this.mode = !this.mode;
|
||||
this.$vuetify.theme.isDark = this.mode;
|
||||
this.setThemeChange(this.mode);
|
||||
console.log(this.mode)
|
||||
console.log(this.$vuetify.theme.isDark)
|
||||
},
|
||||
},
|
||||
};
|
||||
@ -41,6 +46,7 @@ export default {
|
||||
.v-input__control,
|
||||
.v-input__slot {
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0) !important;
|
||||
}
|
||||
.v-input--selection-controls__input {
|
||||
width: 100%;
|
||||
@ -68,20 +74,23 @@ export default {
|
||||
background-color: #f2f2f2;
|
||||
top: 2px;
|
||||
left: 0;
|
||||
background-image: url(../../assets/images/icon/ico-theme-light.png);
|
||||
// background-image: url(../../assets/images/icon/ico-theme-light.png);
|
||||
content: "light";
|
||||
background-size: 18px 18px;
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
}
|
||||
|
||||
&.v-input--is-label-active {
|
||||
::v-deep {
|
||||
.v-input--switch__track {
|
||||
background-color: #383f5d;
|
||||
}
|
||||
.v-input--switch__thumb {
|
||||
transform: translate(38px, 0);
|
||||
background-image: url(../../assets/images/icon/ico-theme-dark.png);
|
||||
// transform: translate(38px, 0);
|
||||
// background-image: url(../../assets/images/icon/ico-theme-dark.png);
|
||||
content: 'dark';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,9 +1,12 @@
|
||||
<template>
|
||||
<div class="d-flex flex-column justify-center align-center">
|
||||
<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-btn>
|
||||
<v-btn
|
||||
</v-btn> -->
|
||||
<a-button @click="btnActionsFnc('addLeftToRight')" type="primary" ghost icon="right" >
|
||||
</a-button>
|
||||
|
||||
<!--<v-btn
|
||||
icon
|
||||
tile
|
||||
:ripple="false"
|
||||
@ -11,7 +14,9 @@
|
||||
@click="btnActionsFnc('removeRightToLeft')"
|
||||
>
|
||||
<v-icon>mdi-chevron-left</v-icon>
|
||||
</v-btn>
|
||||
</v-btn> -->
|
||||
<a-button class="mt-2" @click="btnActionsFnc('removeRightToLeft')" type="primary" ghost icon="left">
|
||||
</a-button>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
@ -1,6 +1,11 @@
|
||||
<template>
|
||||
<v-btn :ripple="false" @click="btnActionsFnc('add')">추가</v-btn>
|
||||
<!-- <v-btn :ripple="false" @click="btnActionsFnc('add')">추가</v-btn> -->
|
||||
<a-button type="primary" @click="btnActionsFnc('add')" class="v-btn-add-text" icon="plus">
|
||||
추가
|
||||
</a-button>
|
||||
</template>
|
||||
<style>
|
||||
</style>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
|
||||
@ -1,5 +1,14 @@
|
||||
<template>
|
||||
<v-btn :ripple="false" @click="downloadExcelFile">액셀</v-btn>
|
||||
<!--<v-btn :ripple="false" @click="downloadExcelFile">액셀</v-btn>-->
|
||||
<a-button
|
||||
@click="downloadExcelFile"
|
||||
v-bind="$attrs"
|
||||
type="default"
|
||||
class="btn-default"
|
||||
icon="file-excel"
|
||||
:size="size"
|
||||
>액셀</a-button>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -33,6 +42,11 @@ export default {
|
||||
require: false,
|
||||
default: null,
|
||||
},
|
||||
size: {
|
||||
type: String,
|
||||
require: false,
|
||||
default: "default", // small, middle, large
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@ -134,3 +148,5 @@ export default {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
</style>
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
<template>
|
||||
<div id="btnExeclUpload">
|
||||
<v-btn class="v-btn__round v-btn__excel" @click="uploadExcelFile">
|
||||
<!-- <v-btn class="v-btn__round v-btn__excel" @click="uploadExcelFile">
|
||||
<v-icon>mdi-file-excel</v-icon>
|
||||
엑셀 로드
|
||||
</v-btn>
|
||||
</v-btn> -->
|
||||
<a-button class="v-btn__round v-btn__excel" type="default" @click="uploadExcelFile">엑셀 로드</a-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<v-btn :ripple="false" @click="btnActionsFnc('remove')">삭제</v-btn>
|
||||
<!--<v-btn :ripple="false" @click="btnActionsFnc('remove')">삭제</v-btn>-->
|
||||
<a-button type="danger" @click="btnActionsFnc('remove')" ghost danger icon="delete">삭제</a-button>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
|
||||
@ -1,5 +1,14 @@
|
||||
<template>
|
||||
<v-btn :ripple="false" @click="btnActionsFnc('save')">저장</v-btn>
|
||||
<!--<v-btn :ripple="false" @click="btnActionsFnc('save')">저장</v-btn>-->
|
||||
<!-- style="color: #1890ff; border-color: #1890ff" -->
|
||||
<a-button
|
||||
type="default"
|
||||
class="btn-default"
|
||||
@click="btnActionsFnc('save')"
|
||||
icon="save"
|
||||
>
|
||||
저장</a-button
|
||||
>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
|
||||
@ -1,10 +1,18 @@
|
||||
<template>
|
||||
<v-btn :ripple="false" @click="getSearch('prev')">조회</v-btn>
|
||||
<a-button icon="search" type="primary" @click="getSearch('prev')" class="search-button" :size="size">조회</a-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapMutations } from 'vuex';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
size: {
|
||||
type: String,
|
||||
require: false,
|
||||
default: "middle", // small, middle, large
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapMutations({ setPageData: 'setPageData' }),
|
||||
getSearch() {
|
||||
@ -14,4 +22,6 @@ export default {
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss" scoped></style>
|
||||
<style scoped lang="scss">
|
||||
|
||||
</style>
|
||||
@ -1,5 +1,7 @@
|
||||
<template>
|
||||
<v-btn :ripple="false" @click="setTotal()">전체</v-btn>
|
||||
<!-- <v-btn :ripple="false" @click="setTotal()">전체</v-btn> -->
|
||||
<a-button type="default" @click="setTotal()">전체</a-button>
|
||||
|
||||
</template>
|
||||
<script>
|
||||
import { mapMutations } from 'vuex';
|
||||
|
||||
@ -1,22 +1,22 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="d-flex" style="gap:8px">
|
||||
<component
|
||||
:is="buttonAuth.add ? 'BtnAddRow' : null"
|
||||
:btnActionsFnc="btnActionsFnc"
|
||||
/>
|
||||
<component
|
||||
:is="buttonAuth.remove ? 'BtnRemoveRow' : null"
|
||||
:btnActionsFnc="btnActionsFnc"
|
||||
/>
|
||||
<component
|
||||
:is="buttonAuth.save ? 'BtnSave' : null"
|
||||
:btnActionsFnc="btnActionsFnc"
|
||||
/>
|
||||
<component
|
||||
:is="buttonAuth.excel ? 'BtnExcelDownload' : null"
|
||||
:parentPrgmId="parentPrgmId"
|
||||
:gridName="bindingData"
|
||||
/>
|
||||
<component
|
||||
:is="buttonAuth.save ? 'BtnSave' : null"
|
||||
:btnActionsFnc="btnActionsFnc"
|
||||
/>
|
||||
<component
|
||||
:is="buttonAuth.remove ? 'BtnRemoveRow' : null"
|
||||
:btnActionsFnc="btnActionsFnc"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
34
components/common/card/AntCard.vue
Normal file
34
components/common/card/AntCard.vue
Normal file
@ -0,0 +1,34 @@
|
||||
<template>
|
||||
<div class="custom-card">
|
||||
<a-card
|
||||
:class="['themed-card', cardClass]"
|
||||
:title="title"
|
||||
bordered
|
||||
ref="cardRef"
|
||||
@click="$emit('click')"
|
||||
>
|
||||
<slot />
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'AntCard',
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
cardClass: {
|
||||
type: [String, Array, Object],
|
||||
default: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.custom-card {
|
||||
border-top: 4px solid #1890ff;
|
||||
border-radius: 4px;
|
||||
}
|
||||
</style>
|
||||
143
components/common/chartoptions/GaugeChart.js
Normal file
143
components/common/chartoptions/GaugeChart.js
Normal file
@ -0,0 +1,143 @@
|
||||
// Gauge chart options
|
||||
export default function getGaugeChartOption({ title, min = 0, max = 160, unit = '%', isDarkMode = false, backgroundRadius = 97 }) {
|
||||
const colorRanges = isDarkMode
|
||||
? [
|
||||
[0.375, '#49AA19'], // Dark Green
|
||||
// [0.5, '#B8860B'], // Dark Yellow
|
||||
[0.625, '#D89614'], // Dark Orange
|
||||
[1, '#D32029'], // Dark Red
|
||||
]
|
||||
: [
|
||||
[0.375, '#52C41A'], // Light Green
|
||||
// [0.5, '#FFD700'], // Light Yellow
|
||||
[0.625, '#FAAD14'], // Light Orange
|
||||
[1, '#F5222D'], // Light Red
|
||||
];
|
||||
// Old color range
|
||||
// const gaugeColors = [
|
||||
// [0, "#ed1c24"],
|
||||
// [0.6, "#ed1c24"],
|
||||
// [0.8, "#f7931e"],
|
||||
// [1.0, "#009245"],
|
||||
// ];
|
||||
// const gaugeColors2 = [
|
||||
// [0, "#009245"],
|
||||
// [0.6, "#009245"],
|
||||
// [0.8, "#f7931e"],
|
||||
// [1.0, "#ed1c24"],
|
||||
// ];
|
||||
return {
|
||||
grid: {
|
||||
// top: '-10%',
|
||||
bottom: 0,
|
||||
},
|
||||
title: {},
|
||||
graphic: [
|
||||
{
|
||||
type: "circle",
|
||||
left: "center",
|
||||
top: "center",
|
||||
shape: {
|
||||
r: backgroundRadius, // radius of the background circle
|
||||
},
|
||||
style: {
|
||||
fill: isDarkMode ? "#141415" : "#F5F5F5", // Light grey color
|
||||
opacity: 0.3, // Semi-transparent
|
||||
},
|
||||
z: 0, // make sure it's behind the gauge
|
||||
},
|
||||
],
|
||||
|
||||
series: [
|
||||
{
|
||||
type: "gauge",
|
||||
radius: "90%",
|
||||
startAngle: 225,
|
||||
endAngle: -45,
|
||||
min: min,
|
||||
max: max,
|
||||
// progress: {
|
||||
// show: true,
|
||||
// width: 15,
|
||||
// },
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
width: 12,
|
||||
// color: [
|
||||
// [0.375, "#3CB371"], // Green (0–60)
|
||||
// [0.5, "#FFD700"], // Yellow (60–80)
|
||||
// [0.625, "#FFA500"], // Orange (80–100)
|
||||
// [1, "#FF4500"], // Red (100–160)
|
||||
// ],
|
||||
color: colorRanges
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
distance: -12,
|
||||
length: 5,
|
||||
lineStyle: {
|
||||
color: "#000000",
|
||||
width: 1,
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
distance: -12,
|
||||
length: 8,
|
||||
lineStyle: {
|
||||
color: "#000000",
|
||||
width: 2,
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: isDarkMode ? "#fff" : "#333333",
|
||||
distance: 23,
|
||||
fontSize: 9,
|
||||
},
|
||||
pointer: {
|
||||
show: true,
|
||||
length: "70%",
|
||||
width: 6,
|
||||
itemStyle: {
|
||||
color: "#FA8C16", // Set your desired pointer color here
|
||||
},
|
||||
},
|
||||
title: {
|
||||
show: false,
|
||||
offsetCenter: [0, "40%"],
|
||||
fontSize: 18,
|
||||
},
|
||||
detail: {
|
||||
valueAnimation: true,
|
||||
fontWeight: 500, // or "normal", "lighter", "bolder", or a number like 600
|
||||
fontFamily: "Oxanium, sans-serif", // or any custom font
|
||||
fontSize: 30,
|
||||
lineHeight: 25,
|
||||
offsetCenter: [0, "60%"],
|
||||
color: isDarkMode ? "#fff" : "#333333",
|
||||
formatter: function (value) {
|
||||
return `{valueStyle|${value}}\n{percentStyle|${unit}}`;
|
||||
},
|
||||
rich: {
|
||||
// valueStyle: {
|
||||
// fontSize: 25,
|
||||
// fontWeight: "bold",
|
||||
// },
|
||||
percentStyle: {
|
||||
fontSize: 10,
|
||||
color: isDarkMode ? "#fff" : "#333333",
|
||||
// fontWeight: "normal",
|
||||
},
|
||||
},
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: 16,
|
||||
name: "에너지사용효율", // "Energy Usage Efficiency"
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
78
components/common/chartoptions/LineChart.js
Normal file
78
components/common/chartoptions/LineChart.js
Normal file
@ -0,0 +1,78 @@
|
||||
|
||||
export default function getLineChartOption({
|
||||
xAxisData = [],
|
||||
seriesData = [],
|
||||
// legendData = [],
|
||||
isDarkMode = false,
|
||||
}) {
|
||||
|
||||
// const defaultColors = isDarkMode
|
||||
// ? ['#D32029', '#31B47B', '#D89614'] : ['#F5222D', '#31B47B', '#FAAD14'];
|
||||
|
||||
const defaultColors = isDarkMode
|
||||
? ['#31B47B', '#D89614', '#D32029'] : ['#31B47B', '#FAAD14', '#F5222D'];
|
||||
|
||||
const styledSeries = seriesData.map((item, index) => {
|
||||
const color = item.color || defaultColors[index % defaultColors.length];
|
||||
return {
|
||||
...item,
|
||||
itemStyle: {
|
||||
color,
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
return {
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '5%',
|
||||
top: '25%',
|
||||
containLabel: true,
|
||||
},
|
||||
|
||||
legend: {
|
||||
// data: legendData,
|
||||
icon: 'circle',
|
||||
top: '0%',
|
||||
right: '5%',
|
||||
orient: 'horizontal',
|
||||
textStyle: {
|
||||
color: isDarkMode ? '#676A7B' : '#676A7B',
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
data: xAxisData,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: isDarkMode ? '#AAAAAA' : '#333333',
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: isDarkMode ? '#676A7B' : '#676A7B',
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
position: 'left',
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: isDarkMode ? '#AAAAAA' : '#333333',
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: isDarkMode ? '#676A7B' : '#676A7B',
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: isDarkMode ? '#444444' : '#EEEEEE',
|
||||
},
|
||||
},
|
||||
},
|
||||
series: styledSeries,
|
||||
};
|
||||
}
|
||||
119
components/common/checkbox/CheckBox.vue
Normal file
119
components/common/checkbox/CheckBox.vue
Normal file
@ -0,0 +1,119 @@
|
||||
<template>
|
||||
<v-row class="search-box" no-gutters>
|
||||
<v-col v-if="label" :cols="labelCols">
|
||||
<label for="" class="search-box-label">
|
||||
<v-icon
|
||||
v-if="iconShow"
|
||||
small
|
||||
:class="['mr-1', required ? 'icon-orange' : 'icon-blue']"
|
||||
>$icoBulletPoint</v-icon
|
||||
>
|
||||
{{ label }}
|
||||
</label>
|
||||
</v-col>
|
||||
<v-col :cols="label ? textCols : ''">
|
||||
<!-- <v-checkbox
|
||||
v-model="chkValue"
|
||||
:disabled="disabledFlag"
|
||||
:readonly="readonly || false"
|
||||
:required="required || false"
|
||||
:false-value="false"
|
||||
:color="isDarkMode ? '#fff' : '#4777d9'"
|
||||
@change="modifyValue"
|
||||
></v-checkbox> -->
|
||||
<a-checkbox
|
||||
v-model:checked="chkValue"
|
||||
:disabled="disabledFlag"
|
||||
:readonly="readonly || false"
|
||||
:required="required || false"
|
||||
@change="modifyValue"
|
||||
>
|
||||
</a-checkbox>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapMutations } from "vuex";
|
||||
export default {
|
||||
props: {
|
||||
parentPrgmId: {
|
||||
type: String,
|
||||
require: true,
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
require: true,
|
||||
},
|
||||
isDarkMode: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: false,
|
||||
},
|
||||
required: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: false,
|
||||
},
|
||||
readonly: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: false,
|
||||
},
|
||||
valueNm: {
|
||||
type: String,
|
||||
require: true,
|
||||
},
|
||||
labelCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 4,
|
||||
},
|
||||
textCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 7,
|
||||
},
|
||||
iconShow: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: true
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chkValue: false,
|
||||
testData: false,
|
||||
disabledFlag: false,
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
...mapState({
|
||||
searchParam: (state) => state.pageData,
|
||||
myBindingDara(state) {
|
||||
return state.pageData[this.parentPrgmId][this.valueNm];
|
||||
},
|
||||
}),
|
||||
},
|
||||
watch: {
|
||||
myBindingDara: {
|
||||
deep: true,
|
||||
handler(val) {
|
||||
this.chkValue = val;
|
||||
},
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.chkValue = this.searchParam[this.parentPrgmId][this.valueNm];
|
||||
},
|
||||
methods: {
|
||||
...mapMutations({ setPageData: "setPageData" }),
|
||||
modifyValue(e) {
|
||||
return this.setPageData({ [this.valueNm]: e });
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
146
components/common/checkbox/CheckBoxLabelChange.vue
Normal file
146
components/common/checkbox/CheckBoxLabelChange.vue
Normal file
@ -0,0 +1,146 @@
|
||||
<template>
|
||||
<v-row class="search-box" align="center" no-gutters>
|
||||
<v-col v-if="location == 'front'" :cols="labelCols">
|
||||
<label for="" class="search-box-label">
|
||||
<v-icon v-if="icon" x-small :color="required ? '#fb8200' : 'primary'" class="mr-1"
|
||||
>mdi-record-circle</v-icon
|
||||
>
|
||||
{{ label }}
|
||||
</label>
|
||||
</v-col>
|
||||
<v-col :cols="textCols" @click="modifyValue">
|
||||
<v-checkbox
|
||||
v-model="chkValue"
|
||||
:disabled="disabledFlag"
|
||||
:readonly="readonly || false"
|
||||
:required="required || false"
|
||||
:false-value="false"
|
||||
@change="modifyValue"
|
||||
:class="isDarkMode ? 'checkbox-dark' : 'checkbox-light'"
|
||||
></v-checkbox>
|
||||
</v-col>
|
||||
<v-col
|
||||
style="margin-left: 5px; margin-top: 5px"
|
||||
v-if="location == 'rear'"
|
||||
:cols="labelCols"
|
||||
>
|
||||
<label for="" class="search-box-label">
|
||||
<v-icon v-if="icon" x-small :color="required ? '#fb8200' : 'primary'" class="mr-1"
|
||||
>mdi-record-circle</v-icon
|
||||
>
|
||||
{{ label }}
|
||||
</label>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapMutations } from "vuex";
|
||||
export default {
|
||||
props: {
|
||||
parentPrgmId: {
|
||||
type: String,
|
||||
require: true,
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
require: false,
|
||||
},
|
||||
isDarkMode: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: false,
|
||||
},
|
||||
required: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: false,
|
||||
},
|
||||
readonly: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: false,
|
||||
},
|
||||
valueNm: {
|
||||
type: String,
|
||||
require: true,
|
||||
},
|
||||
labelCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 4,
|
||||
},
|
||||
textCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 7,
|
||||
},
|
||||
icon: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: true,
|
||||
},
|
||||
location: {
|
||||
type: String,
|
||||
require: false,
|
||||
default: "front",
|
||||
},
|
||||
disabledCheckOption: {
|
||||
type: String,
|
||||
require: false,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chkValue: false,
|
||||
testData: false,
|
||||
disabledFlag: false,
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
...mapState({
|
||||
searchParam: (state) => state.pageData,
|
||||
myBindingData(state) {
|
||||
return state.pageData[this.parentPrgmId][this.valueNm];
|
||||
},
|
||||
bindingDisabledCheckOption(state) {
|
||||
if (state.pageData[this.parentPrgmId][this.disabledCheckOption] != undefined) {
|
||||
return state.pageData[this.parentPrgmId][this.disabledCheckOption];
|
||||
}
|
||||
},
|
||||
}),
|
||||
},
|
||||
watch: {
|
||||
myBindingData: {
|
||||
deep: true,
|
||||
handler(val) {
|
||||
this.chkValue = val;
|
||||
},
|
||||
},
|
||||
bindingDisabledCheckOption(val) {
|
||||
this.disabledFlag = val;
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.chkValue = this.searchParam[this.parentPrgmId][this.valueNm];
|
||||
if (this.searchParam[this.parentPrgmId][this.disabledCheckOption] != undefined) {
|
||||
this.disabledFlag = this.searchParam[this.parentPrgmId][this.disabledCheckOption];
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapMutations({ setPageData: "setPageData" }),
|
||||
modifyValue(e) {
|
||||
if (this.disabledFlag == true && e.target != undefined) {
|
||||
alert("기간이 한 시간 이내일 경우만 선택할 수 있습니다.");
|
||||
} else {
|
||||
if (e.target == undefined) {
|
||||
return this.setPageData({ [this.valueNm]: e });
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
@ -1,12 +1,12 @@
|
||||
<template>
|
||||
<v-row class="search-box" align="center" no-gutters>
|
||||
<v-row class="search-box" align="center" >
|
||||
<v-col v-if="item.label" cols="4" >
|
||||
<label for="" class="search-box-label">
|
||||
<v-icon
|
||||
x-small
|
||||
:color="item.required ? '#fb8200' : 'primary'"
|
||||
class="mr-1"
|
||||
>mdi-record-circle</v-icon
|
||||
v-if="item.iconShow"
|
||||
small
|
||||
:class="['mr-1', item.required ? 'icon-orange' : 'icon-blue']"
|
||||
>$icoBulletPoint</v-icon
|
||||
>
|
||||
{{ item.label }}
|
||||
</label>
|
||||
@ -14,12 +14,11 @@
|
||||
<v-col :cols="item.label ? 7 : ''" >
|
||||
<v-checkbox
|
||||
v-model="chkValue"
|
||||
style= "height: 36px; align-items: center;"
|
||||
:disabled="disabledFlag"
|
||||
:readonly="item.readonly || false"
|
||||
:required="item.required || false"
|
||||
:false-value="false"
|
||||
:color="isDarkMode ? '#fff' : '#4777d9'"
|
||||
:color="isDarkMode ? '#fff' : '#1890ff'"
|
||||
@change="modifyValue"
|
||||
></v-checkbox>
|
||||
</v-col>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<v-row no-gutters>
|
||||
<v-row class="form-row">
|
||||
<template v-for="(item, index) in detailList">
|
||||
<v-col
|
||||
v-if="!item.showValue"
|
||||
@ -44,6 +44,7 @@ import EgrpPysclQtyPop from '../modal/EgrpPysclQtyPop';
|
||||
import EqpmCalcPop from '../modal/EqpmCalcPop';
|
||||
import EqpmBaseInfoPop from '../modal/EqpmBaseInfoPop';
|
||||
import InputTextReg from './InputTextReg';
|
||||
import CustomInput from '../../form/CustomInput.vue';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
@ -87,7 +88,8 @@ export default {
|
||||
EgrpPysclQtyPop,
|
||||
EqpmCalcPop,
|
||||
EqpmBaseInfoPop,
|
||||
InputTextReg
|
||||
InputTextReg,
|
||||
CustomInput
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
|
||||
@ -1,18 +1,22 @@
|
||||
<template>
|
||||
<v-row class="search-box" align="center" no-gutters>
|
||||
<v-col v-if="item.label" :cols="item.cols == 12 ? 2 : 4">
|
||||
<v-row class="search-box" align="center">
|
||||
<v-col v-if="item.label"
|
||||
:cols="item.labelCols !== undefined ? item.labelCols : item.cols == 12 ? 2 : 4"
|
||||
class="py-0"
|
||||
>
|
||||
<label for="" class="search-box-label">
|
||||
<v-icon
|
||||
x-small
|
||||
:color="item.required ? '#fb8200' : 'primary'"
|
||||
class="mr-1"
|
||||
>mdi-record-circle</v-icon
|
||||
v-if="item.iconShow"
|
||||
small
|
||||
:class="['mr-1', item.required ? 'icon-orange' : 'icon-blue']"
|
||||
>$icoBulletPoint</v-icon
|
||||
>
|
||||
{{ item.label }}
|
||||
<span v-if="item.essential">*</span>
|
||||
</label>
|
||||
</v-col>
|
||||
<v-col :cols="item.label ? 7 : ''">
|
||||
<v-col v-if="!item.hideText"
|
||||
:cols="item.textCols !== undefined ? item.textCols : item.label ? 8 : ''" class="py-0">
|
||||
<!-- v-model="InputValue" -->
|
||||
<v-text-field
|
||||
v-model="textValue"
|
||||
|
||||
@ -1,56 +1,39 @@
|
||||
<template>
|
||||
<v-row v-if="!item.showValue" class="search-box" align="center" no-gutters>
|
||||
<v-row v-if="!item.showValue" class="search-box" align="center">
|
||||
<v-col
|
||||
v-if="item.label"
|
||||
:cols="item.labelCols !== undefined ? item.labelCols : item.cols == 12 ? 2 : 4"
|
||||
:style="item.padding ? 'padding-left:10px' : ''"
|
||||
class="py-0"
|
||||
>
|
||||
<label for="" class="search-box-label">
|
||||
<v-icon
|
||||
x-small
|
||||
:color="item.required ? '#fb8200' : 'primary'"
|
||||
class="mr-1"
|
||||
>mdi-record-circle</v-icon
|
||||
v-if="item.iconShow"
|
||||
small
|
||||
:class="['mr-1', item.required ? 'icon-orange' : 'icon-blue']"
|
||||
>$icoBulletPoint</v-icon
|
||||
>
|
||||
{{ item.label }}
|
||||
<span v-if="item.essential">*</span>
|
||||
</label>
|
||||
</v-col>
|
||||
<v-col
|
||||
v-if="!item.hideText"
|
||||
:cols="item.textCols !== undefined ? item.textCols : item.label ? 7 : ''"
|
||||
>
|
||||
<v-text-field
|
||||
v-model="InputValue"
|
||||
class="v-input__custom"
|
||||
outlined
|
||||
:type="item.inputType || 'text'"
|
||||
:min="item.min || ''"
|
||||
:max="item.max || ''"
|
||||
:onkeyup="item.onkeyup || ''"
|
||||
:onkeydown="item.onkeydown || ''"
|
||||
:hide-details="true"
|
||||
:disabled="
|
||||
item.disabled ||
|
||||
<v-col class="py-0" v-if="!item.hideText" :cols="item.textCols !== undefined ? item.textCols : item.label ? 8 : ''" :style="item.noText ? 'padding-top:0px' : ''">
|
||||
<v-text-field v-model="InputValue" class="v-input__custom" outlined :type="item.inputType || 'text'"
|
||||
:min="item.min || ''" :max="item.max || ''" :onkeyup="item.onkeyup || ''"
|
||||
:onkeydown="item.onkeydown || ''" :hide-details="true" :disabled="item.disabled ||
|
||||
(item.elseDisabled &&
|
||||
myBindingData &&
|
||||
item.elseDisabled !== myBindingData.rowStat) ||
|
||||
disabledCondition ||
|
||||
false
|
||||
"
|
||||
:readonly="
|
||||
item.readonly ||
|
||||
" :readonly="item.readonly ||
|
||||
(item.elseReadonly &&
|
||||
myBindingData &&
|
||||
item.elseReadonly !== myBindingData.rowStat) ||
|
||||
readonlyCondition ||
|
||||
false
|
||||
"
|
||||
:required="item.required || false"
|
||||
:placeholder="item.placeholder"
|
||||
@input="modifyValue($event, item.valueNm)"
|
||||
@click="onClick($event, item, item.valueNm)"
|
||||
></v-text-field>
|
||||
" :required="item.required || false" :placeholder="item.placeholder" @input="modifyValue($event, item.valueNm)"
|
||||
@click="onClick($event, item, item.valueNm)"></v-text-field>
|
||||
</v-col>
|
||||
<v-col v-if="item.lengthCheckFlag" :cols="1" text-align="center">
|
||||
<label for="" class="search-box-label px-1">
|
||||
|
||||
@ -1,28 +1,22 @@
|
||||
<template>
|
||||
<v-row class="search-box" align="center" no-gutters>
|
||||
<v-col v-if="item.label" :cols="item.labelCols">
|
||||
<v-row class="search-box" align="center" >
|
||||
<v-col v-if="item.label" :cols="item.labelCols" class="py-0">
|
||||
<label for="" class="search-box-label">
|
||||
<v-icon v-if="item.iconShow" x-small :color="item.required ? '#fb8200' : 'primary'" class="mr-1"
|
||||
>mdi-record-circle</v-icon
|
||||
<v-icon
|
||||
v-if="item.iconShow"
|
||||
small
|
||||
:color="item.required ? '#fb8200' : 'primary'"
|
||||
:class="['mr-1', item.required ? 'icon-orange' : 'icon-blue']"
|
||||
>
|
||||
$icoBulletPoint
|
||||
</v-icon>
|
||||
{{ item.label }}
|
||||
</label>
|
||||
</v-col>
|
||||
<v-col :cols="item.label ? item.textCols : ''">
|
||||
<v-text-field
|
||||
ref="formRef"
|
||||
:value="InputValue"
|
||||
class="v-input__custom"
|
||||
:disabled="item.disabled"
|
||||
:readonly="item.readonly"
|
||||
outlined
|
||||
:hide-details="true"
|
||||
@keyup.enter="search"
|
||||
@keydown="keydownEvent"
|
||||
@keyup="keyupEvent"
|
||||
@input="inputEvent($event, item.valueNm)"
|
||||
:placeholder="item.placeholder"
|
||||
></v-text-field>
|
||||
<v-col :cols="item.label ? item.textCols : ''" class="py-0">
|
||||
<v-text-field ref="formRef" :value="InputValue" class="v-input__custom" :disabled="item.disabled"
|
||||
:readonly="item.readonly" outlined :hide-details="true" @keyup.enter="search" @keydown="keydownEvent"
|
||||
@keyup="keyupEvent" @input="inputEvent($event, item.valueNm)" :placeholder="item.placeholder"></v-text-field>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
@ -1,35 +1,31 @@
|
||||
<template>
|
||||
<v-row class="search-box" align="center" no-gutters>
|
||||
<v-col
|
||||
v-if="item.label"
|
||||
cols="4"
|
||||
:style="item.padding ? 'padding-left:10px' : ''"
|
||||
>
|
||||
<v-row class="search-box" align="center">
|
||||
<v-col v-if="item.label" :cols="item.label ? (item.textCols ? item.textCols : 4) : ''"
|
||||
:style="item.padding ? 'padding-left:10px' : ''" class="py-0">
|
||||
<label for="" class="search-box-label">
|
||||
<v-icon
|
||||
x-small
|
||||
:color="item.required ? '#fb8200' : 'primary'"
|
||||
class="mr-1"
|
||||
>mdi-record-circle</v-icon
|
||||
v-if="item.iconShow"
|
||||
small
|
||||
:class="['mr-1', item.required ? 'icon-orange' : 'icon-blue']"
|
||||
>$icoBulletPoint</v-icon
|
||||
>
|
||||
{{ item.label }}
|
||||
</label>
|
||||
</v-col>
|
||||
<v-col :cols="item.label ? (item.textCols ? item.textCols : 7) : ''">
|
||||
<v-select
|
||||
v-model="selectValue"
|
||||
:items="typeof item.list != 'string' ? item.list : myListData"
|
||||
<v-col :cols="item.label ? (item.textCols ? item.textCols : 8) : ''" class="py-0">
|
||||
<v-select v-model="selectValue" :items="typeof item.list != 'string' ? item.list : myListData"
|
||||
:item-text="typeof item.list != 'string' ? 'text' : item.itemText"
|
||||
:item-value="typeof item.list != 'string' ? 'value' : item.itemValue"
|
||||
outlined
|
||||
:hide-details="true"
|
||||
append-icon="mdi-chevron-down"
|
||||
class="v-select__custom"
|
||||
:disabled="item.disabled || false"
|
||||
:readonly="item.readonly || false"
|
||||
:required="item.required || false"
|
||||
@change="modifyValue($event, item.valueNm)"
|
||||
></v-select>
|
||||
: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"
|
||||
:required="item.required || false" @change="modifyValue($event, item.valueNm)" append-icon="">
|
||||
|
||||
<template v-slot:append>
|
||||
<!-- Custom SVG icon -->
|
||||
<v-icon>$icoChevronDown</v-icon>
|
||||
|
||||
|
||||
</template>
|
||||
</v-select>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
@ -60,6 +56,7 @@ export default {
|
||||
computed: {
|
||||
...mapState({
|
||||
myListData(state) {
|
||||
try{
|
||||
let list = [...state.pageData[this.parentPrgmId][this.item.list]];
|
||||
list.forEach((item, idx) => {
|
||||
if (item.commCdNm && item.commCdNm == '전체') {
|
||||
@ -75,6 +72,9 @@ export default {
|
||||
}
|
||||
});
|
||||
return list;
|
||||
}catch(err) {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
myBindingData(state) {
|
||||
if (!this.bindingData) {
|
||||
|
||||
@ -4,13 +4,13 @@
|
||||
v-if="item.label"
|
||||
:cols="item.cols == 12 ? 2 : 4"
|
||||
:style="item.padding ? 'padding-left:10px' : ''"
|
||||
class="py-0"
|
||||
>
|
||||
<label for="" class="search-box-label">
|
||||
<v-icon
|
||||
x-small
|
||||
:color="item.required ? '#fb8200' : 'primary'"
|
||||
class="mr-1"
|
||||
>mdi-record-circle</v-icon
|
||||
small
|
||||
:class="['mr-1', item.required ? 'icon-orange' : 'icon-blue']"
|
||||
>$icoBulletPoint</v-icon
|
||||
>
|
||||
{{ item.label }}
|
||||
<span v-if="item.essential">*</span>
|
||||
@ -41,6 +41,7 @@
|
||||
:required="item.required || false"
|
||||
:maxlength="item.maxlength"
|
||||
@input="modifyValue($event, item.valueNm)"
|
||||
outlined
|
||||
></v-textarea>
|
||||
</v-col>
|
||||
<v-col v-if="item.lengthCheckFlag" :cols="1" text-align="center">
|
||||
|
||||
@ -1,9 +1,12 @@
|
||||
<template>
|
||||
<v-row class="search-box" align="center" no-gutters>
|
||||
<v-row class="search-box" align="end" no-gutters>
|
||||
<v-col v-if="label" :cols="labelCols">
|
||||
<label for="" class="search-box-label">
|
||||
<v-icon v-if="iconShow" x-small :color="required ? '#fb8200' : 'primary'" class="mr-1"
|
||||
>mdi-record-circle</v-icon
|
||||
<v-icon
|
||||
v-if="iconShow"
|
||||
small
|
||||
:class="['mr-1', required ? 'icon-orange' : 'icon-blue']"
|
||||
>$icoBulletPoint</v-icon
|
||||
>
|
||||
{{ label }}
|
||||
</label>
|
||||
@ -12,6 +15,7 @@
|
||||
<v-text-field
|
||||
v-model="InputValue"
|
||||
class="v-input__custom"
|
||||
:class="customClass"
|
||||
:disabled="disabled"
|
||||
:readonly="readonly"
|
||||
outlined
|
||||
@ -21,6 +25,9 @@
|
||||
@keyup="keyupEvent"
|
||||
:placeholder="placeholder"
|
||||
></v-text-field>
|
||||
<!-- <a-input v-model:value="InputValue" class="v-input__custom" :disabled="disabled" :readonly="readonly"
|
||||
:placeholder="placeholder" @pressEnter="search" @keydown="keydownEvent" @keyup="keyupEvent" :size="size" /> -->
|
||||
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
@ -58,12 +65,12 @@ export default {
|
||||
labelCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 4,
|
||||
default: 12,
|
||||
},
|
||||
textCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 7,
|
||||
default: 12,
|
||||
},
|
||||
searchOption: {
|
||||
type: Boolean,
|
||||
@ -87,6 +94,15 @@ export default {
|
||||
placeholder: {
|
||||
type: String,
|
||||
require: false
|
||||
},
|
||||
size: {
|
||||
type: String,
|
||||
require: false,
|
||||
default: "middle",
|
||||
},
|
||||
customClass: {
|
||||
type: String,
|
||||
require: false,
|
||||
}
|
||||
},
|
||||
data() {
|
||||
|
||||
@ -2,8 +2,11 @@
|
||||
<v-row class="search-box" align="center" no-gutters>
|
||||
<v-col v-if="label" :cols="labelCols">
|
||||
<label for="" class="search-box-label">
|
||||
<v-icon v-if="iconShow" x-small :color="required ? '#fb8200' : 'primary'" class="mr-1"
|
||||
>mdi-record-circle</v-icon
|
||||
<v-icon
|
||||
v-if="iconShow"
|
||||
small
|
||||
:class="['mr-1', required ? 'icon-orange' : 'icon-blue']"
|
||||
>$icoBulletPoint</v-icon
|
||||
>
|
||||
{{ label }}
|
||||
</label>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<v-row class="search-box" align="center" no-gutters>
|
||||
<v-col v-if="item.label" :cols="item.cols == 12 ? 2 : 4">
|
||||
<v-col v-if="item.label" :cols="item.labelCols !== undefined ? item.labelCols : item.cols == 12 ? 2 : 4">
|
||||
<label for="" class="search-box-label">
|
||||
<v-icon
|
||||
x-small
|
||||
@ -28,10 +28,14 @@
|
||||
></v-text-field>
|
||||
</template>
|
||||
<template v-else>
|
||||
<v-btn :ripple="false" @click="dialog = !dialog">
|
||||
<!-- <v-icon>mdi-content-save</v-icon> -->
|
||||
<!-- <v-btn :ripple="false" @click="dialog = !dialog">
|
||||
<span>비밀번호 {{ isPassword }}</span>
|
||||
</v-btn>
|
||||
</v-btn> -->
|
||||
<a-button :ripple="false" @click="dialog = !dialog" class="ant-btn-outlined">
|
||||
<!-- <v-icon>mdi-content-save</v-icon> -->
|
||||
비밀번호 {{ isPassword }}
|
||||
</a-button>
|
||||
</template>
|
||||
</v-col>
|
||||
|
||||
@ -48,7 +52,7 @@
|
||||
</label>
|
||||
<v-text-field
|
||||
v-model.trim="firstPswd"
|
||||
class="v-input__custom"
|
||||
class="v-input-popup__custom"
|
||||
type="password"
|
||||
:readonly="!isFocused"
|
||||
@focus="isFocused = true"
|
||||
@ -61,7 +65,7 @@
|
||||
</label>
|
||||
<v-text-field
|
||||
v-model.trim="secondPswd"
|
||||
class="v-input__custom"
|
||||
class="v-input-popup__custom"
|
||||
type="password"
|
||||
:readonly="!isFocused"
|
||||
@focus="isFocused = true"
|
||||
@ -72,8 +76,15 @@
|
||||
<v-divider></v-divider>
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn color="primary" dark @click="setUpdate()">확인</v-btn>
|
||||
<v-btn color="primary" dark @click="close()">닫기</v-btn>
|
||||
<!-- <v-btn color="primary" dark @click="setUpdate()">확인</v-btn> -->
|
||||
<div>
|
||||
<a-button @click="close()" class="btn-default">삭제</a-button>
|
||||
<a-button type="primary" @click="setUpdate()" class="v-btn-add-text">
|
||||
확인
|
||||
</a-button>
|
||||
</div>
|
||||
<!-- <v-btn color="primary" dark @click="close()">닫기</v-btn> -->
|
||||
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
@ -135,8 +146,10 @@ export default {
|
||||
} else {
|
||||
return '';
|
||||
}
|
||||
console.log(value)
|
||||
},
|
||||
set(value) {
|
||||
console.log(value)
|
||||
return value;
|
||||
},
|
||||
},
|
||||
|
||||
@ -1,119 +1,82 @@
|
||||
<template>
|
||||
<v-row class="search-box" align="center" no-gutters>
|
||||
<v-col :cols="option.labelCols">
|
||||
<v-row class="search-box" align="center">
|
||||
<v-col :cols="option.labelCols" class="py-0">
|
||||
<label for="" class="search-box-label">
|
||||
<v-icon
|
||||
x-small
|
||||
:color="item.required ? '#fb8200' : 'primary'"
|
||||
class="mr-1"
|
||||
>mdi-record-circle</v-icon
|
||||
>
|
||||
<v-icon v-if="item.iconShow" small
|
||||
:class="['mr-1', item.required ? 'icon-orange' : 'icon-blue']">$icoBulletPoint</v-icon>
|
||||
{{ option.labelContent }}
|
||||
</label>
|
||||
</v-col>
|
||||
<v-col :cols="option.textCols">
|
||||
<v-text-field
|
||||
:readonly="item.readonly || false"
|
||||
v-model="selectValue"
|
||||
append-icon="mdi-magnify"
|
||||
class="v-input__custom"
|
||||
@click="dialogOpenCloseEvent(dialog)"
|
||||
outlined
|
||||
:hide-details="true"
|
||||
:required="item.required || false"
|
||||
:disabled="item.disabled || false"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
<v-col :cols="option.textCols" class="py-0">
|
||||
<v-text-field :readonly="item.readonly || false" v-model="selectValue" append-icon=""
|
||||
class="v-input__custom" @click="dialogOpenCloseEvent(dialog)" outlined :hide-details="true"
|
||||
:required="item.required || false" :disabled="item.disabled || false"><template v-slot:append>
|
||||
<!-- Custom SVG icon -->
|
||||
<v-icon>$icoSearch</v-icon>
|
||||
|
||||
<v-dialog v-model="dialog" scrollable width="540px">
|
||||
</template></v-text-field>
|
||||
</v-col>
|
||||
<v-dialog v-model="dialog" scrollable width="800px">
|
||||
<v-card style="height: 100%">
|
||||
<v-card-title class="pa-5 d-flex align-center justify-space-between">
|
||||
<v-card-title class="px-6 py-4 d-flex align-center justify-space-between">
|
||||
<span class="custom-title-4">{{ option.modalTitle }}</span>
|
||||
<v-btn
|
||||
icon
|
||||
tile
|
||||
:ripple="false"
|
||||
@click="dialogOpenCloseEvent(dialog)"
|
||||
>
|
||||
<v-icon>mdi-close</v-icon>
|
||||
</v-btn>
|
||||
<a-button icon="close" type="text" @click="dialogOpenCloseEvent(dialog)"></a-button>
|
||||
</v-card-title>
|
||||
<div class="pa-5">
|
||||
<v-row align="center" no-gutters>
|
||||
<v-col :cols="12">
|
||||
<component
|
||||
:is="'SelectBox'"
|
||||
ref="SelectBox1"
|
||||
:labelCols="2"
|
||||
:textCols="6"
|
||||
:disabled="option.eqpmGrpDisableFlag"
|
||||
:propsValue="selectValue01"
|
||||
:itemList="selectValueList01"
|
||||
:label="'설비그룹'"
|
||||
@update:propsValue="selectValue01 = $event"
|
||||
:readonly="
|
||||
item.selectBoxReadonly != undefined
|
||||
<div class="px-6 py-4 pt-0">
|
||||
<v-row align="center">
|
||||
<v-col :cols="5">
|
||||
<component :is="'SelectBox'" ref="SelectBox1" :labelCols="12" :textCols="12"
|
||||
:disabled="option.eqpmGrpDisableFlag" :propsValue="selectValue01" :iconShow="true"
|
||||
:itemList="selectValueList01" :label="'설비그룹'"
|
||||
@update:propsValue="selectValue01 = $event" :readonly="item.selectBoxReadonly != undefined
|
||||
? item.selectBoxReadonly
|
||||
: false
|
||||
"
|
||||
/>
|
||||
" />
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-col :cols="7">
|
||||
<v-row align="center" no-gutters>
|
||||
<v-col :cols="2">
|
||||
<v-col :cols="12">
|
||||
<label for="" class="search-box-label">
|
||||
<v-icon x-small color="primary" class="mr-1"
|
||||
>mdi-record-circle</v-icon
|
||||
>
|
||||
<v-icon small :class="['mr-1 icon-blue']">$icoBulletPoint</v-icon>
|
||||
물리량명
|
||||
</label>
|
||||
</v-col>
|
||||
<v-col :cols="6">
|
||||
<v-text-field
|
||||
append-icon="mdi-magnify"
|
||||
class="v-input__custom"
|
||||
outlined
|
||||
:hide-details="true"
|
||||
v-model="searchWord"
|
||||
@keyup.enter="search"
|
||||
></v-text-field>
|
||||
<v-col :cols="9">
|
||||
<v-text-field append-icon="" class="v-input__custom" outlined :hide-details="true"
|
||||
v-model="searchWord" @keyup.enter="search"><template v-slot:append>
|
||||
<!-- Custom SVG icon -->
|
||||
<v-icon>$icoSearch</v-icon>
|
||||
|
||||
</template></v-text-field>
|
||||
</v-col>
|
||||
<v-spacer></v-spacer>
|
||||
<v-col cols="4" class="text-right">
|
||||
<v-btn :ripple="false" @click="search()">
|
||||
조회
|
||||
</v-btn>
|
||||
<v-col cols="3" class="text-right">
|
||||
<a-button icon="search" type="primary" @click="search()"
|
||||
class="search-button">조회</a-button>
|
||||
<!-- <v-btn :ripple="false" @click="initSearch()">
|
||||
초기화
|
||||
</v-btn> -->
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
</div>
|
||||
<v-divider></v-divider>
|
||||
<div :style="'height: 429px;'">
|
||||
<!-- <div :style="{ height: 'calc(100% - 213px)' }"> -->
|
||||
<div ref="modalGridParent" class="h100 w100">
|
||||
<component
|
||||
:is="loadGrid && dialog ? 'Grid' : null"
|
||||
:gridName="grid_01"
|
||||
:dataPath="searchParam.pyscModalData.egrpPysclQtyPop"
|
||||
:parentPrgmId="parentPrgmId"
|
||||
@getRowsData="getRowData"
|
||||
@dblClick="setUpdate($event)"
|
||||
/>
|
||||
|
||||
<div :style="'height: calc(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="pa-5 d-flex align-center justify-center">
|
||||
<v-btn :ripple="false" @click="setUpdate($event)">확인</v-btn>
|
||||
<v-btn :ripple="false" @click="dialogOpenCloseEvent(dialog)"
|
||||
>닫기</v-btn
|
||||
>
|
||||
<v-btn
|
||||
v-if="item.closeBtnFg || false"
|
||||
:ripple="false"
|
||||
@click="deleteBtnAction($event)"
|
||||
>삭제</v-btn
|
||||
>
|
||||
<v-card-actions class="px-6 py-4 d-flex align-center justify-end">
|
||||
|
||||
<a-button :ripple="false" @click="dialogOpenCloseEvent(dialog)"
|
||||
class="mr-2">닫기</a-button>
|
||||
<a-button v-if="item.closeBtnFg || false" :ripple="false" type="danger" ghost danger
|
||||
@click="deleteBtnAction($event)" class="mr-2">삭제</a-button>
|
||||
<a-button :ripple="false" type="primary" @click="setUpdate($event)" >확인</a-button>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
@ -185,7 +148,23 @@ export default {
|
||||
return {
|
||||
dialog: false,
|
||||
|
||||
loadGrid: false,
|
||||
loadGrid: true,
|
||||
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',
|
||||
myModalKey: 'egrpPysclQtyPop',
|
||||
modalDataKey: 'pyscModalData',
|
||||
@ -350,6 +329,13 @@ export default {
|
||||
this.selectValueList01 = [];
|
||||
this.selectValue01 = null;
|
||||
}
|
||||
|
||||
// this.selectValueList01 = [
|
||||
// { label: '냉동기고온', value: '냉동기고온' },
|
||||
// { label: '냉동기저온', value: '냉동기저온' },
|
||||
// { label: '공조기', value: '공조기' },
|
||||
// { label: '보일러', value: '보일러' }
|
||||
// ];
|
||||
},
|
||||
search() {
|
||||
this.getGridData();
|
||||
@ -359,6 +345,7 @@ export default {
|
||||
this.getGridData();
|
||||
},
|
||||
gridInit() {
|
||||
// const gridHeight = this.$refs.gridParent.offsetHeight - 30;
|
||||
const myOptions = {
|
||||
columnOptions: {
|
||||
resizable: true,
|
||||
@ -370,7 +357,7 @@ export default {
|
||||
modalDataKey: this.modalDataKey,
|
||||
value: Object.assign(
|
||||
// Utility.defaultGridOption(this.$refs.modalGridParent.offsetHeight - 60, myOptions),
|
||||
Utility.defaultGridOption(400, myOptions),
|
||||
// Utility.defaultGridOption(100, myOptions),
|
||||
myOptions,
|
||||
),
|
||||
});
|
||||
@ -428,15 +415,6 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
// res = [
|
||||
// {
|
||||
// 'pysclQtyId' : 'PYSCL00001',
|
||||
// 'pysclQtyCd' : 'AMP_1A',
|
||||
// 'pysclQtyNm' : '회로1 전류A',
|
||||
// 'pysclQtyTpNm' : 'TAG'
|
||||
|
||||
// }
|
||||
// ]
|
||||
this.setModalGridData({
|
||||
modalKey: this.myModalKey,
|
||||
gridKey: this.grid_01,
|
||||
@ -491,10 +469,10 @@ export default {
|
||||
this.dialog = flag;
|
||||
},
|
||||
async dialogOpenCloseEvent(val) {
|
||||
await this.setSelectValueList01();
|
||||
if (!this.myBindingData) {
|
||||
return alert('그리드를 먼저 선택해주세요.');
|
||||
}
|
||||
// await this.setSelectValueList01();
|
||||
// if (!this.myBindingData) {
|
||||
// return alert('그리드를 먼저 선택해주세요.');
|
||||
// }
|
||||
this.dialog = !val;
|
||||
},
|
||||
deleteBtnAction(v) {
|
||||
@ -562,33 +540,12 @@ var egrpPysclQtyPop = {
|
||||
}
|
||||
}
|
||||
|
||||
.tui-grid-cell.tui-grid-cell-has-tree
|
||||
.tui-grid-tree-extra-content
|
||||
+ .tui-grid-cell-content:before {
|
||||
.tui-grid-cell.tui-grid-cell-has-tree .tui-grid-tree-extra-content+.tui-grid-cell-content:before {
|
||||
content: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@each $theme in dark, light {
|
||||
.v-application.#{$theme}-mode {
|
||||
.v-dialog {
|
||||
.v-card {
|
||||
&__title {
|
||||
color: map-deep-get($color, 'white', '0');
|
||||
@if $theme == dark {
|
||||
background-color: #2d3355;
|
||||
.v-btn {
|
||||
background-color: #2d3355;
|
||||
}
|
||||
} @else {
|
||||
background-color: #3f4d7d;
|
||||
.v-btn {
|
||||
background-color: #3f4d7d;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-btn-icon-only {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<v-row class="search-box" align="center" no-gutters>
|
||||
<!-- <v-col v-if="label" cols="2"> -->
|
||||
<v-col v-if="label" :cols="labelCols">
|
||||
<label for="" class="search-box-label">
|
||||
<v-col v-if="label" :cols="item.labelCols">
|
||||
<!-- <label for="" class="search-box-label">
|
||||
<v-icon
|
||||
x-small
|
||||
:color="item.required ? '#fb8200' : 'primary'"
|
||||
@ -10,9 +10,14 @@
|
||||
>mdi-record-circle</v-icon
|
||||
>
|
||||
{{ item.label }}
|
||||
</label> -->
|
||||
<label for="" class="search-box-label">
|
||||
<v-icon v-if="item.iconShow" small
|
||||
:class="['mr-1', item.required ? 'icon-orange' : 'icon-blue']">$icoBulletPoint</v-icon>
|
||||
{{ item.label }}
|
||||
</label>
|
||||
</v-col>
|
||||
<v-col :cols="label ? textCols : ''">
|
||||
<v-col :cols="label ? item.textCols : ''">
|
||||
<!-- <v-col :cols="label ? 9 : ''"> -->
|
||||
<!-- :value="textfield" -->
|
||||
<v-text-field
|
||||
@ -644,8 +649,7 @@ const myColumns = [
|
||||
// 전력량 요금(원/kWh)
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
// @import '@/assets/scss/common.scss';
|
||||
<style lang="scss" scoped>
|
||||
@import '@/assets/scss/var.scss';
|
||||
@each $theme in dark, light {
|
||||
.v-application.#{$theme}-mode {
|
||||
|
||||
@ -27,18 +27,15 @@
|
||||
</v-col> -->
|
||||
|
||||
<!-- <v-row justify="center"> -->
|
||||
<v-dialog
|
||||
ref="popModal"
|
||||
v-model="dialog"
|
||||
width="1400"
|
||||
overlay-color="#000"
|
||||
overlay-opacity="0.8"
|
||||
scrollable
|
||||
>
|
||||
<v-dialog ref="popModal" v-model="dialog" width="1200" overlay-color="#000" overlay-opacity="0.8" scrollable>
|
||||
<!-- <template v-slot:activator="{ on, attrs }">
|
||||
<v-btn color="primary" dark v-bind="attrs" v-on="on">공정/설비</v-btn>
|
||||
</template> -->
|
||||
<v-card style="height: 100%">
|
||||
<v-card-title class="px-5 py-4 d-flex align-center justify-space-between">
|
||||
<span class="custom-title-4">가이드 알람이력</span>
|
||||
<a-button icon="close" type="text" @click="closePop()"></a-button>
|
||||
</v-card-title>
|
||||
<!-- <v-card-title
|
||||
class="v-card__title d-flex align-center justify-space-between"
|
||||
>
|
||||
@ -50,7 +47,7 @@
|
||||
<!-- <v-card-actions> -->
|
||||
<div class="pa-5">
|
||||
<!-- <v-text-field label="위치정보 선택"></v-text-field> -->
|
||||
<v-row align="center" no-gutters>
|
||||
<!-- <v-row align="center" no-gutters>
|
||||
<v-col :cols="4">
|
||||
<div class="d-flex align-center justify-space-between pb-5">
|
||||
<v-card-title class="pa-0">가이드 알람이력</v-card-title>
|
||||
@ -61,91 +58,52 @@
|
||||
<v-icon>mdi-close</v-icon>
|
||||
</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-row> -->
|
||||
<v-row align="center" no-gutters>
|
||||
<v-col :cols="1">
|
||||
<v-col :cols="12">
|
||||
<label for="" class="search-box-label">
|
||||
<v-icon
|
||||
x-small
|
||||
:color="'primary'"
|
||||
class="mr-1"
|
||||
>mdi-record-circle</v-icon
|
||||
>
|
||||
<v-icon small :class="['mr-1', 'icon-blue']">$icoBulletPoint</v-icon>
|
||||
설비
|
||||
</label>
|
||||
</v-col>
|
||||
<v-col :cols="2">
|
||||
<v-text-field
|
||||
v-if="dialog"
|
||||
v-model="InputValue['eqpmId']"
|
||||
class="v-input__custom"
|
||||
:readonly="true"
|
||||
outlined
|
||||
:hide-details="true"
|
||||
>
|
||||
<v-col :cols="6" class="pr-2 py-0">
|
||||
<v-text-field v-if="dialog" v-model="InputValue['eqpmId']" class="v-input__custom"
|
||||
:readonly="true" outlined :hide-details="true">
|
||||
</v-text-field>
|
||||
</v-col>
|
||||
<v-col :cols="3">
|
||||
<v-text-field
|
||||
v-if="dialog"
|
||||
v-model="InputValue['eqpmNm']"
|
||||
class="v-input__custom"
|
||||
:readonly="true"
|
||||
outlined
|
||||
:hide-details="true"
|
||||
>
|
||||
<v-col :cols="6" class="pl-2 py-0">
|
||||
<v-text-field v-if="dialog" v-model="InputValue['eqpmNm']" class="v-input__custom"
|
||||
:readonly="true" outlined :hide-details="true">
|
||||
</v-text-field>
|
||||
</v-col>
|
||||
<v-col :cols="6">
|
||||
</v-col>
|
||||
<v-col :cols="1">
|
||||
</v-row>
|
||||
<v-row align="center" no-gutters class="mt-4">
|
||||
<v-col :cols="12">
|
||||
<label for="" class="search-box-label">
|
||||
<v-icon
|
||||
x-small
|
||||
:color="'primary'"
|
||||
class="mr-1"
|
||||
>mdi-record-circle</v-icon
|
||||
>
|
||||
<v-icon small :class="['mr-1', 'icon-blue']">$icoBulletPoint</v-icon>
|
||||
가이드지표
|
||||
</label>
|
||||
</v-col>
|
||||
<v-col :cols="2">
|
||||
<v-text-field
|
||||
v-if="dialog"
|
||||
v-model="InputValue['gdIdxId']"
|
||||
class="v-input__custom"
|
||||
:readonly="true"
|
||||
outlined
|
||||
:hide-details="true"
|
||||
>
|
||||
<v-col :cols="6" class="pr-2 py-0">
|
||||
<v-text-field v-if="dialog" v-model="InputValue['gdIdxId']" class="v-input__custom"
|
||||
:readonly="true" outlined :hide-details="true">
|
||||
</v-text-field>
|
||||
</v-col>
|
||||
<v-col :cols="3">
|
||||
<v-text-field
|
||||
v-if="dialog"
|
||||
v-model="InputValue['gdIdxNm']"
|
||||
class="v-input__custom"
|
||||
:readonly="true"
|
||||
outlined
|
||||
:hide-details="true"
|
||||
>
|
||||
<v-col :cols="6" class="pl-2 py-0">
|
||||
<v-text-field v-if="dialog" v-model="InputValue['gdIdxNm']" class="v-input__custom"
|
||||
:readonly="true" outlined :hide-details="true">
|
||||
</v-text-field>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
<v-divider></v-divider>
|
||||
<div class="d-flex align-center justify-space-between pa-4">
|
||||
<v-card-title class="pa-0 custom-title-4">◇ 설비 가이드 정보</v-card-title>
|
||||
<v-card-title class="py-0 px-2 custom-title-4">설비 가이드 정보</v-card-title>
|
||||
</div>
|
||||
<div class="px-5" style="height:calc(100% - 76px)">
|
||||
<div ref="modalGridParent" class="w100 h100">
|
||||
<component
|
||||
:ref="gridName"
|
||||
:is="loadGrid? 'Grid' : null"
|
||||
:dataPath="searchParam.modalData.eqpmDetlPop"
|
||||
:gridName="gridName"
|
||||
:parentPrgmId="parentPrgmId"
|
||||
/>
|
||||
<component :ref="gridName" :is="loadGrid ? 'Grid' : null"
|
||||
:dataPath="searchParam.modalData.eqpmDetlPop" :gridName="gridName"
|
||||
:parentPrgmId="parentPrgmId" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div id="gridParent" ref="gridParent" style="height: 500px">
|
||||
@ -161,10 +119,9 @@
|
||||
/>
|
||||
</div> -->
|
||||
|
||||
<v-divider></v-divider>
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn color="primary" dark @click="closePop()">확인</v-btn>
|
||||
<a-button color="primary" type="primary" @click="closePop()">확인</a-button>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
@ -323,7 +280,11 @@ export default {
|
||||
resizable: true,
|
||||
minWidth: 100
|
||||
},
|
||||
setScroll: true,
|
||||
// setScroll: true,
|
||||
header: {
|
||||
height: 37,
|
||||
},
|
||||
rowHeight: 'auto',
|
||||
};
|
||||
|
||||
|
||||
@ -394,7 +355,7 @@ export default {
|
||||
});
|
||||
|
||||
|
||||
// this.getRowGridData();
|
||||
this.getRowGridData();
|
||||
},
|
||||
async getRowGridData() {
|
||||
this.loadGrid = false;
|
||||
@ -417,6 +378,7 @@ export default {
|
||||
}
|
||||
);
|
||||
|
||||
|
||||
this.setModalGridData({
|
||||
modalKey: this.myModalKey,
|
||||
gridKey: this.gridName,
|
||||
@ -441,12 +403,9 @@ var eqpmDetlPop ={
|
||||
|
||||
// 전력량 요금(원/kWh)
|
||||
</script>
|
||||
<style lang="scss">
|
||||
<style lang="scss" scoped>
|
||||
// @import '@/assets/scss/common/grid.scss';
|
||||
.tui-grid-scrollbar-left-bottom {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
115
components/common/modal/EnrgEffcEqpmDetailPop_bk.vue
Normal file
115
components/common/modal/EnrgEffcEqpmDetailPop_bk.vue
Normal file
@ -0,0 +1,115 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- Detail Modal -->
|
||||
<a-modal v-model="showDetailModal" title="가이드 알람이력" width="1200px" :footer="null"
|
||||
:style="{ borderRadius: '8px', overflow: 'hidden' }" :bodyStyle="{ paddingTop: '0px' }">
|
||||
<!-- Top Input Fields -->
|
||||
<a-row :gutter="8" align="middle" style="margin-bottom: 16px;">
|
||||
<!-- Label on the left -->
|
||||
<a-col :span="24" style="text-align: left;">
|
||||
<div style="line-height: 32px;">설비</div>
|
||||
</a-col>
|
||||
|
||||
<!-- Two inputs on the right -->
|
||||
<a-col :span="12">
|
||||
<a-input value="설비명" :style="{ borderRadius: '6px', height: '34px' }" disabled />
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-input value="가이드지표" :style="{ borderRadius: '6px', height: '34px' }" disabled />
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row :gutter="8" align="middle" style="margin-bottom: 16px;">
|
||||
<!-- Label on the left -->
|
||||
<a-col :span="24" style="text-align: left;">
|
||||
<div style="line-height: 32px;">가이드지표</div>
|
||||
</a-col>
|
||||
|
||||
<!-- Two inputs on the right -->
|
||||
<a-col :span="12">
|
||||
<a-input value="설비명" :style="{ borderRadius: '6px', height: '34px' }" disabled />
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-input value="가이드지표" :style="{ borderRadius: '6px', height: '34px' }" disabled />
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-divider />
|
||||
<!-- Table -->
|
||||
<h3 style=" margin-bottom: 16px">설비 가이드 정보</h3>
|
||||
<a-table :columns="modalTableColumns" :dataSource="modalTableData" rowKey="No" size="small" bordered
|
||||
:pagination="false" />
|
||||
|
||||
<!-- Footer Buttons -->
|
||||
<div style="text-align: right; margin-top: 16px;">
|
||||
<a-button @click="showDetailModal = false">닫기</a-button>
|
||||
<a-button type="primary" style="margin-left: 8px; color:#fff" @click="confirmModal">확인</a-button>
|
||||
</div>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
showDetailModal: false,
|
||||
selectedRecord: null,
|
||||
modalTableColumns: [
|
||||
{ title: 'No.', dataIndex: 'No', key: 'No', align: 'center' },
|
||||
{ title: '발생일', dataIndex: '발생일', key: '발생일' },
|
||||
{ title: '발생시간대', dataIndex: '발생시간대', key: '발생시간대' },
|
||||
{ title: '가이드지표명', dataIndex: '가이드지표명', key: '가이드지표명' },
|
||||
{ title: '주의', dataIndex: '주의', key: '주의' },
|
||||
{ title: '경고', dataIndex: '경고', key: '경고' },
|
||||
{ title: '가이드값', dataIndex: '가이드값', key: '가이드값' },
|
||||
{ title: '알랑내용', dataIndex: '알랑내용', key: '알랑내용' },
|
||||
],
|
||||
modalTableData: [
|
||||
{
|
||||
No: 1,
|
||||
발생일: '2025-06-01',
|
||||
발생시간대: '02-03',
|
||||
가이드지표명: '냉수 출구 온도 평균 편차',
|
||||
주의: 3,
|
||||
경고: 2,
|
||||
가이드값: -1.23,
|
||||
알랑내용: '[심각]냉수3과 온도차가 7.72°C로 낮음(평균 15.44*C 대비 7.72°C 낮음) - UT_HT_CH1C',
|
||||
},
|
||||
{
|
||||
No: 2,
|
||||
발생일: '2025-06-02',
|
||||
발생시간대: '02-03',
|
||||
가이드지표명: '냉수 출구 온도 평균 편차',
|
||||
주의: 2,
|
||||
경고: 1,
|
||||
가이드값: -1.45,
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleNgCntClick(record) {
|
||||
this.selectedRecord = record;
|
||||
this.showDetailModal = true;
|
||||
},
|
||||
confirmModal() {
|
||||
this.showDetailModal = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
.ant-modal-header {
|
||||
border-bottom: none;
|
||||
border-radius: 8px 8px 0 0;
|
||||
}
|
||||
|
||||
.ant-modal-content {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.ant-modal-title,
|
||||
h3 {
|
||||
font-weight: 600
|
||||
}
|
||||
</style>
|
||||
@ -27,14 +27,7 @@
|
||||
</v-col> -->
|
||||
|
||||
<!-- <v-row justify="center"> -->
|
||||
<v-dialog
|
||||
ref="popModal"
|
||||
v-model="dialog"
|
||||
width="1400"
|
||||
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>
|
||||
<!-- <template v-slot:activator="{ on, attrs }">
|
||||
<v-btn color="primary" dark v-bind="attrs" v-on="on">공정/설비</v-btn>
|
||||
</template> -->
|
||||
@ -48,9 +41,12 @@
|
||||
</v-btn>
|
||||
</v-card-title> -->
|
||||
<!-- <v-card-actions> -->
|
||||
<div class="pa-5">
|
||||
<!-- <v-text-field label="위치정보 선택"></v-text-field> -->
|
||||
<v-row align="center" no-gutters>
|
||||
<v-card-title class="pa-5 d-flex align-center justify-space-between">
|
||||
<span class="custom-title-4">가이드 정보</span>
|
||||
<a-button icon="close" type="text" @click="closePop()"></a-button>
|
||||
</v-card-title>
|
||||
<!-- <v-row align="center" no-gutters>
|
||||
<v-col :cols="4">
|
||||
<div class="d-flex align-center justify-space-between pb-5">
|
||||
<v-card-title class="pa-0">가이드 정보</v-card-title>
|
||||
@ -61,204 +57,88 @@
|
||||
<v-icon>mdi-close</v-icon>
|
||||
</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-row> -->
|
||||
<div class="px-5 pb-3">
|
||||
<v-row align="center" no-gutters>
|
||||
<v-col :cols="2">
|
||||
<v-col :cols="12">
|
||||
<label for="" class="search-box-label">
|
||||
<v-icon
|
||||
x-small
|
||||
:color="'primary'"
|
||||
class="mr-1"
|
||||
>mdi-record-circle</v-icon
|
||||
>
|
||||
<v-icon small :class="['mr-1', 'icon-blue']">$icoBulletPoint</v-icon>
|
||||
가이드지표
|
||||
</label>
|
||||
</v-col>
|
||||
<v-col :cols="3">
|
||||
<v-text-field
|
||||
v-if="dialog"
|
||||
v-model="InputValue['gdIdxId']"
|
||||
class="v-input__custom"
|
||||
:readonly="true"
|
||||
outlined
|
||||
:hide-details="true"
|
||||
>
|
||||
<v-col :cols="6" class="pr-2">
|
||||
<v-text-field v-if="dialog" v-model="InputValue['gdIdxId']" class="v-input__custom" :readonly="true"
|
||||
outlined :hide-details="true">
|
||||
</v-text-field>
|
||||
</v-col>
|
||||
<v-col :cols="3">
|
||||
<v-text-field
|
||||
v-if="dialog"
|
||||
v-model="InputValue['gdIdxNm']"
|
||||
class="v-input__custom"
|
||||
:readonly="true"
|
||||
outlined
|
||||
:hide-details="true"
|
||||
>
|
||||
<v-col :cols="6" class="pl-2">
|
||||
<v-text-field v-if="dialog" v-model="InputValue['gdIdxNm']" class="v-input__custom" :readonly="true"
|
||||
outlined :hide-details="true">
|
||||
</v-text-field>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-divider class="mt-5 mb-2"></v-divider>
|
||||
</div>
|
||||
<v-divider></v-divider>
|
||||
<div class="d-flex align-center justify-space-between pa-4">
|
||||
<v-card-title class="pa-0 custom-title-4">가이드 정보</v-card-title>
|
||||
</div>
|
||||
<div class="px-5">
|
||||
<v-row>
|
||||
<v-col :cols="6" class="py-2">
|
||||
<InputText
|
||||
id="gdIdx_InputText"
|
||||
:parentPrgmId="parentPrgmId"
|
||||
label="계산코드"
|
||||
valueNm="calcProc"
|
||||
:iconShow="true"
|
||||
:readonly="true"
|
||||
:labelCols="4"
|
||||
:textCols="6"
|
||||
/>
|
||||
|
||||
<div class="px-5 pb-4">
|
||||
<v-row align="center">
|
||||
<v-col :cols="6" class="py-2 pr-2">
|
||||
<InputText id="gdIdx_InputText" :parentPrgmId="parentPrgmId" label="계산코드" valueNm="calcProc"
|
||||
:iconShow="true" :readonly="true" :labelCols="12" :textCols="12" />
|
||||
</v-col>
|
||||
<v-col :cols="6">
|
||||
</v-col>
|
||||
<v-col :cols="12" class="py-2">
|
||||
<InputText
|
||||
id="gdIdx_InputText"
|
||||
:parentPrgmId="parentPrgmId"
|
||||
label="계산설명"
|
||||
valueNm="calcDesc"
|
||||
:iconShow="true"
|
||||
:labelCols="2"
|
||||
:textCols="9"
|
||||
:readonly="true"
|
||||
/>
|
||||
<InputText id="gdIdx_InputText" :parentPrgmId="parentPrgmId" label="계산설명" valueNm="calcDesc"
|
||||
:iconShow="true" :labelCols="12" :textCols="12" :readonly="true" />
|
||||
</v-col>
|
||||
<v-col :cols="6" class="py-2">
|
||||
<InputText
|
||||
id="gdIdx_InputText"
|
||||
:parentPrgmId="parentPrgmId"
|
||||
label="물리량1"
|
||||
valueNm="pysclQtyId1"
|
||||
:iconShow="true"
|
||||
:readonly="true"
|
||||
:labelCols="4"
|
||||
:textCols="6"
|
||||
/>
|
||||
<v-col :cols="6" class="py-2 pr-2">
|
||||
<InputText id="gdIdx_InputText" :parentPrgmId="parentPrgmId" label="물리량1" valueNm="pysclQtyId1"
|
||||
:iconShow="true" :readonly="true" :labelCols="12" :textCols="12" />
|
||||
</v-col>
|
||||
<v-col :cols="6" class="py-2">
|
||||
<InputText
|
||||
id="gdIdx_InputText"
|
||||
:parentPrgmId="parentPrgmId"
|
||||
label="물리량2"
|
||||
valueNm="pysclQtyId2"
|
||||
:iconShow="true"
|
||||
:readonly="true"
|
||||
:labelCols="4"
|
||||
:textCols="6"
|
||||
/>
|
||||
<v-col :cols="6" class="py-2 pl-2">
|
||||
<InputText id="gdIdx_InputText" :parentPrgmId="parentPrgmId" label="물리량2" valueNm="pysclQtyId2"
|
||||
:iconShow="true" :readonly="true" :labelCols="12" :textCols="12" />
|
||||
</v-col>
|
||||
<v-col :cols="6" class="py-2">
|
||||
<InputText
|
||||
id="gdIdx_InputText"
|
||||
:parentPrgmId="parentPrgmId"
|
||||
label="물리량3"
|
||||
valueNm="pysclQtyId3"
|
||||
:iconShow="true"
|
||||
:readonly="true"
|
||||
:labelCols="4"
|
||||
:textCols="6"
|
||||
/>
|
||||
<v-col :cols="6" class="py-2 pr-2">
|
||||
<InputText id="gdIdx_InputText" :parentPrgmId="parentPrgmId" label="물리량3" valueNm="pysclQtyId3"
|
||||
:iconShow="true" :readonly="true" :labelCols="12" :textCols="12" />
|
||||
</v-col>
|
||||
<v-col :cols="6" class="py-2">
|
||||
<InputText
|
||||
id="gdIdx_InputText"
|
||||
:parentPrgmId="parentPrgmId"
|
||||
label="물리량4"
|
||||
valueNm="pysclQtyId4"
|
||||
:iconShow="true"
|
||||
:readonly="true"
|
||||
:labelCols="4"
|
||||
:textCols="6"
|
||||
/>
|
||||
<v-col :cols="6" class="py-2 pl-2">
|
||||
<InputText id="gdIdx_InputText" :parentPrgmId="parentPrgmId" label="물리량4" valueNm="pysclQtyId4"
|
||||
:iconShow="true" :readonly="true" :labelCols="12" :textCols="12" />
|
||||
</v-col>
|
||||
<v-col :cols="6" class="py-2">
|
||||
<InputText
|
||||
id="gdIdx_InputText"
|
||||
:parentPrgmId="parentPrgmId"
|
||||
label="카테고리1"
|
||||
valueNm="ctgr1"
|
||||
:iconShow="true"
|
||||
:readonly="true"
|
||||
:labelCols="4"
|
||||
:textCols="6"
|
||||
/>
|
||||
<v-col :cols="6" class="py-2 pr-2">
|
||||
<InputText id="gdIdx_InputText" :parentPrgmId="parentPrgmId" label="카테고리1" valueNm="ctgr1"
|
||||
:iconShow="true" :readonly="true" :labelCols="12" :textCols="12" />
|
||||
</v-col>
|
||||
<v-col :cols="6" class="py-2">
|
||||
<InputText
|
||||
id="gdIdx_InputText"
|
||||
:parentPrgmId="parentPrgmId"
|
||||
label="카테고리2"
|
||||
valueNm="ctgr2"
|
||||
:iconShow="true"
|
||||
:readonly="true"
|
||||
:labelCols="4"
|
||||
:textCols="6"
|
||||
/>
|
||||
<v-col :cols="6" class="py-2 pl-2">
|
||||
<InputText id="gdIdx_InputText" :parentPrgmId="parentPrgmId" label="카테고리2" valueNm="ctgr2"
|
||||
:iconShow="true" :readonly="true" :labelCols="12" :textCols="12" />
|
||||
</v-col>
|
||||
<v-col :cols="6" class="py-2">
|
||||
<InputText
|
||||
id="gdIdx_InputText"
|
||||
:parentPrgmId="parentPrgmId"
|
||||
label="주의기준값"
|
||||
valueNm="careStndVal"
|
||||
:iconShow="true"
|
||||
:readonly="true"
|
||||
:labelCols="4"
|
||||
:textCols="6"
|
||||
/>
|
||||
<v-col :cols="6" class="py-2 pr-2">
|
||||
<InputText id="gdIdx_InputText" :parentPrgmId="parentPrgmId" label="주의기준값" valueNm="careStndVal"
|
||||
:iconShow="true" :readonly="true" :labelCols="12" :textCols="12" />
|
||||
</v-col>
|
||||
<v-col :cols="6">
|
||||
</v-col>
|
||||
<v-col :cols="6" class="py-2">
|
||||
<InputText
|
||||
id="gdIdx_InputText"
|
||||
:parentPrgmId="parentPrgmId"
|
||||
label="경고기준값"
|
||||
valueNm="warnStndVal"
|
||||
:iconShow="true"
|
||||
:readonly="true"
|
||||
:labelCols="4"
|
||||
:textCols="6"
|
||||
/>
|
||||
<v-col :cols="6" class="py-2 pr-2">
|
||||
<InputText id="gdIdx_InputText" :parentPrgmId="parentPrgmId" label="경고기준값" valueNm="warnStndVal"
|
||||
:iconShow="true" :readonly="true" :labelCols="12" :textCols="12" />
|
||||
</v-col>
|
||||
<v-col :cols="12" class="py-2">
|
||||
<InputText
|
||||
id="gdIdx_InputText"
|
||||
:parentPrgmId="parentPrgmId"
|
||||
label="알람메세지"
|
||||
valueNm="alrmMsg"
|
||||
:iconShow="true"
|
||||
:labelCols="2"
|
||||
:textCols="9"
|
||||
:readonly="true"
|
||||
/>
|
||||
<InputText id="gdIdx_InputText" :parentPrgmId="parentPrgmId" label="알람메세지" valueNm="alrmMsg"
|
||||
:iconShow="true" :labelCols="12" :textCols="12" :readonly="true" />
|
||||
</v-col>
|
||||
<v-col :cols="12" class="py-2">
|
||||
<InputText
|
||||
id="gdIdx_InputText"
|
||||
:parentPrgmId="parentPrgmId"
|
||||
label="가이드방법"
|
||||
valueNm="gdMeth"
|
||||
:iconShow="true"
|
||||
:labelCols="2"
|
||||
:textCols="9"
|
||||
:readonly="true"
|
||||
/>
|
||||
<InputText id="gdIdx_InputText" :parentPrgmId="parentPrgmId" label="가이드방법" valueNm="gdMeth"
|
||||
:iconShow="true" :labelCols="12" :textCols="12" :readonly="true" />
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
<div style="height:20px;"></div>
|
||||
<v-divider></v-divider>
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn color="primary" dark @click="closePop()">확인</v-btn>
|
||||
<a-button color="primary" type="primary" @click="closePop()">확인</a-button>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
@ -402,13 +282,13 @@ export default {
|
||||
}),
|
||||
init() {
|
||||
|
||||
// this.gridInit();
|
||||
this.gridInit();
|
||||
},
|
||||
closePop() {
|
||||
this.popCheck = false;
|
||||
},
|
||||
search() {
|
||||
// this.getData();
|
||||
this.getData();
|
||||
},
|
||||
async getData() {
|
||||
var res = await this.postApiReturn({
|
||||
@ -453,11 +333,12 @@ var gdIdxDetPop ={
|
||||
.tui-grid-scrollbar-left-bottom {
|
||||
display: none !important;
|
||||
}
|
||||
#gdIdx_InputText::v-deep .v-input__custom{
|
||||
margin-left:-60px;
|
||||
}
|
||||
.v-input__custom{
|
||||
margin-left:-60px;
|
||||
}
|
||||
|
||||
// #gdIdx_InputText::v-deep .v-input__custom {
|
||||
// margin-left: -60px;
|
||||
// }
|
||||
|
||||
// .v-input__custom {
|
||||
// margin-left: -60px;
|
||||
// }
|
||||
</style>
|
||||
220
components/common/modal/EnrgEffcGdIdxDetPop_bk.vue
Normal file
220
components/common/modal/EnrgEffcGdIdxDetPop_bk.vue
Normal file
@ -0,0 +1,220 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- Detail Modal -->
|
||||
<a-modal v-model="showDetailModal" title="가이드 정보" width="800px" :footer="null"
|
||||
:style="{ borderRadius: '8px', overflow: 'hidden' }" :bodyStyle="{ paddingTop: '0px' }">
|
||||
<!-- Top Input Fields -->
|
||||
<a-row :gutter="8" align="middle" style="margin-bottom: 8px;">
|
||||
<!-- Label on the left -->
|
||||
<a-col :span="24" style="text-align: left;">
|
||||
<div style="line-height: 32px;">가이드지표</div>
|
||||
</a-col>
|
||||
|
||||
<!-- Two inputs on the right -->
|
||||
<a-col :span="12">
|
||||
<a-input value="GD00111" :style="{ borderRadius: '6px', height: '34px' }" disabled />
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-input value="냉각수 온도차 평균 편차" :style="{ borderRadius: '6px', height: '34px' }" disabled />
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-divider />
|
||||
|
||||
<a-row :gutter="8" align="middle" style="margin-bottom: 8px;">
|
||||
<!-- Label on the left -->
|
||||
<a-col :span="24" style="text-align: left;">
|
||||
<div style="line-height: 32px;">계산코드</div>
|
||||
</a-col>
|
||||
|
||||
<!-- Two inputs on the right -->
|
||||
<a-col :span="12">
|
||||
<a-input value="BEF_AVG_DEV_GT" :style="{ borderRadius: '6px', height: '34px' }" disabled />
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row :gutter="8" align="middle" style="margin-bottom: 8px;">
|
||||
<!-- Label on the left -->
|
||||
<a-col :span="24" style="text-align: left;">
|
||||
<div style="line-height: 32px;">계산설명</div>
|
||||
</a-col>
|
||||
|
||||
<!-- Two inputs on the right -->
|
||||
<a-col :span="24">
|
||||
<a-input value="냉각수 온도차" :style="{ borderRadius: '6px', height: '34px' }" disabled />
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row :gutter="8" align="middle" style="margin-bottom: 8px;">
|
||||
<!-- Label on the left -->
|
||||
<a-col :span="12">
|
||||
<a-row>
|
||||
<a-col :span="24" style="text-align: left;">
|
||||
<div style="line-height: 32px;">물리랑1</div>
|
||||
</a-col>
|
||||
|
||||
<!-- Two inputs on the right -->
|
||||
<a-col :span="24">
|
||||
<a-input value="냉각수 온도차" :style="{ borderRadius: '6px', height: '34px' }" disabled />
|
||||
</a-col>
|
||||
|
||||
</a-row>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-row>
|
||||
<a-col :span="24" style="text-align: left;">
|
||||
<div style="line-height: 32px;">물리랑2</div>
|
||||
</a-col>
|
||||
|
||||
<!-- Two inputs on the right -->
|
||||
<a-col :span="24">
|
||||
<a-input value="" :style="{ borderRadius: '6px', height: '34px' }" disabled />
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row :gutter="8" align="middle" style="margin-bottom: 8px;">
|
||||
<!-- Label on the left -->
|
||||
<a-col :span="12">
|
||||
<a-row>
|
||||
<a-col :span="24" style="text-align: left;">
|
||||
<div style="line-height: 32px;">물리랑3</div>
|
||||
</a-col>
|
||||
|
||||
<!-- Two inputs on the right -->
|
||||
<a-col :span="24">
|
||||
<a-input value="냉각수 온도차" :style="{ borderRadius: '6px', height: '34px' }" disabled />
|
||||
</a-col>
|
||||
|
||||
</a-row>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-row>
|
||||
<a-col :span="24" style="text-align: left;">
|
||||
<div style="line-height: 32px;">물리랑4</div>
|
||||
</a-col>
|
||||
|
||||
<!-- Two inputs on the right -->
|
||||
<a-col :span="24">
|
||||
<a-input value="" :style="{ borderRadius: '6px', height: '34px' }" disabled />
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
|
||||
<a-row :gutter="8" align="middle" style="margin-bottom: 8px;">
|
||||
<!-- Label on the left -->
|
||||
<a-col :span="12">
|
||||
<a-row>
|
||||
<a-col :span="24" style="text-align: left;">
|
||||
<div style="line-height: 32px;">카테고리1</div>
|
||||
</a-col>
|
||||
|
||||
<!-- Two inputs on the right -->
|
||||
<a-col :span="24">
|
||||
<a-input value="냉각수 온도차" :style="{ borderRadius: '6px', height: '34px' }" disabled />
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-row>
|
||||
<a-col :span="24" style="text-align: left;">
|
||||
<div style="line-height: 32px;">카테고리2</div>
|
||||
</a-col>
|
||||
|
||||
<!-- Two inputs on the right -->
|
||||
<a-col :span="24">
|
||||
<a-input value="" :style="{ borderRadius: '6px', height: '34px' }" disabled />
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row :gutter="8" align="middle" style="margin-bottom: 8px;">
|
||||
<!-- Label on the left -->
|
||||
<a-col :span="24" style="text-align: left;">
|
||||
<div style="line-height: 32px;">주의기준간</div>
|
||||
</a-col>
|
||||
|
||||
<!-- Two inputs on the right -->
|
||||
<a-col :span="12">
|
||||
<a-input value="3" :style="{ borderRadius: '6px', height: '34px' }" disabled />
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row :gutter="8" align="middle" style="margin-bottom: 8px;">
|
||||
<!-- Label on the left -->
|
||||
<a-col :span="24" style="text-align: left;">
|
||||
<div style="line-height: 32px;">경고기준값</div>
|
||||
</a-col>
|
||||
|
||||
<!-- Two inputs on the right -->
|
||||
<a-col :span="12">
|
||||
<a-input value="5" :style="{ borderRadius: '6px', height: '34px' }" disabled />
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row :gutter="8" align="middle" style="margin-bottom: 8px;">
|
||||
<!-- Label on the left -->
|
||||
<a-col :span="24" style="text-align: left;">
|
||||
<div style="line-height: 32px;">열람메세지</div>
|
||||
</a-col>
|
||||
|
||||
<!-- Two inputs on the right -->
|
||||
<a-col :span="24">
|
||||
<a-input value="냉각수 온도차가 @V1C로 낮음(청균@AVG 대비 @RSLTC 낮음]-@EOPM" :style="{ borderRadius: '6px', height: '34px' }"
|
||||
disabled />
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row :gutter="8" align="middle" style="margin-bottom: 8px;">
|
||||
<!-- Label on the left -->
|
||||
<a-col :span="24" style="text-align: left;">
|
||||
<div style="line-height: 32px;">가이드방법</div>
|
||||
</a-col>
|
||||
|
||||
<!-- Two inputs on the right -->
|
||||
<a-col :span="24">
|
||||
<a-input value="대비 @RSLTC 낮음]-@EOPM" :style="{ borderRadius: '6px', height: '34px' }" disabled />
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
|
||||
<!-- Footer Buttons -->
|
||||
<div style="text-align: right; margin-top: 16px;">
|
||||
<a-button @click="showDetailModal = false">닫기</a-button>
|
||||
<a-button type="primary" style="margin-left: 8px; color:#fff" @click="confirmModal">확인</a-button>
|
||||
</div>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
showDetailModal: false,
|
||||
selectedRecord: null
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleGdIdxNmClick(record) {
|
||||
this.selectedRecord = record;
|
||||
this.showDetailModal = true;
|
||||
},
|
||||
confirmModal() {
|
||||
this.showDetailModal = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
.ant-modal-header {
|
||||
border-bottom: none;
|
||||
border-radius: 8px 8px 0 0;
|
||||
}
|
||||
|
||||
.ant-modal-content {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.ant-modal-title,
|
||||
h3 {
|
||||
font-weight: 600
|
||||
}
|
||||
</style>
|
||||
@ -9,10 +9,15 @@
|
||||
scrollable
|
||||
>
|
||||
<v-card style="height: 100%">
|
||||
<v-card-title class="pa-5 pb-0 d-flex align-center justify-space-between">
|
||||
<span class="custom-title-4">사용량 계획</span>
|
||||
<v-icon @click="closePop()">mdi-close</v-icon>
|
||||
</v-card-title>
|
||||
|
||||
<div class="pa-5">
|
||||
<!-- <v-text-field label="위치정보 선택"></v-text-field> -->
|
||||
<v-row align="center" no-gutters>
|
||||
<v-col :cols="4">
|
||||
<v-col :cols="4.5">
|
||||
<InputText
|
||||
:parentPrgmId="parentPrgmId"
|
||||
:label="'설비명'"
|
||||
@ -20,18 +25,43 @@
|
||||
:readonly="true"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col :cols="2">
|
||||
</v-row>
|
||||
<v-row align="end" no-gutters class="mt-4 d-flex justify-center">
|
||||
<v-col :cols="5.5" class="mr-2">
|
||||
<component
|
||||
:is="'SelectBox'"
|
||||
ref="SelectBox1"
|
||||
:labelCols='12'
|
||||
:textCols='12'
|
||||
:propsValue="selectValue01"
|
||||
:itemList="selectValueList01"
|
||||
:label="'대상월'"
|
||||
@update:propsValue="selectValue01 = $event"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col :cols="3">
|
||||
</v-col>
|
||||
<v-col :cols="3" class="text-right">
|
||||
<v-btn icon tile :ripple="false" @click="closePop()">
|
||||
<v-icon>mdi-close</v-icon>
|
||||
</v-btn>
|
||||
<v-col :cols="5.5" class="mr-2">
|
||||
<component
|
||||
:is="'SelectBox'"
|
||||
ref="SelectBox2"
|
||||
:labelCols='12'
|
||||
:textCols='12'
|
||||
:propsValue="selectValue02"
|
||||
:itemList="selectValueList02"
|
||||
:label="'전년대비절감율'"
|
||||
@update:propsValue="selectValue02 = $event"
|
||||
/>
|
||||
</v-col>
|
||||
<a-button color="primary" dark @click="search()" icon="clock-circle" >
|
||||
<!-- <template #icon>
|
||||
<ClockCircleOutlined />
|
||||
</template> -->
|
||||
적용
|
||||
</a-button>
|
||||
<!-- <v-col :cols="2" class="text-right">
|
||||
</v-col> -->
|
||||
</v-row>
|
||||
</div>
|
||||
<v-divider></v-divider>
|
||||
<!-- <v-divider></v-divider> -->
|
||||
|
||||
<!-- <div id="chartParent" ref="chartParent" style="height: 100px"> -->
|
||||
<div :style="'height: calc(50vh)'">
|
||||
@ -50,37 +80,8 @@
|
||||
:ref="chartName"
|
||||
/>
|
||||
</div>
|
||||
<v-divider></v-divider>
|
||||
<div style="height: 20%; margin: auto; width: 90%; display: flex; align-items: center;">
|
||||
<v-row align="center" no-gutters class="pa-5 d-flex align-center justify-center;">
|
||||
<v-col :cols="5">
|
||||
<component
|
||||
:is="'SelectBox'"
|
||||
ref="SelectBox1"
|
||||
:labelCols='3'
|
||||
:textCols='6'
|
||||
:propsValue="selectValue01"
|
||||
:itemList="selectValueList01"
|
||||
:label="'대상월'"
|
||||
@update:propsValue="selectValue01 = $event"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col :cols="5">
|
||||
<component
|
||||
:is="'SelectBox'"
|
||||
ref="SelectBox2"
|
||||
:labelCols='5'
|
||||
:textCols='6'
|
||||
:propsValue="selectValue02"
|
||||
:itemList="selectValueList02"
|
||||
:label="'전년대비절감율'"
|
||||
@update:propsValue="selectValue02 = $event"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col :cols="2" class="text-right">
|
||||
<v-btn color="primary" dark @click="search()">적용</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<!-- <v-divider></v-divider> -->
|
||||
<!-- <div style="height: 20%; margin: auto; width: 90%; display: flex; align-items: center;"> -->
|
||||
<!-- <div style="height: 70%; width:10%; float: left; border: 1px solid blue; background-color: #A2A2A2">
|
||||
설정
|
||||
</div>
|
||||
@ -97,8 +98,6 @@
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div> -->
|
||||
|
||||
|
||||
<!-- <v-row align="center" no-gutters>
|
||||
<v-row
|
||||
:cols="12"
|
||||
@ -115,7 +114,7 @@
|
||||
<v-btn color="primary" dark @click="setChart()">적용</v-btn>
|
||||
</v-col>
|
||||
</v-row> -->
|
||||
</div>
|
||||
<!-- </div> -->
|
||||
</div>
|
||||
|
||||
<!-- <div id="gridParent" ref="gridParent" style="height: 500px">
|
||||
@ -132,9 +131,9 @@
|
||||
</div> -->
|
||||
|
||||
<v-divider></v-divider>
|
||||
<v-card-actions class="pa-5 d-flex align-center justify-center">
|
||||
<v-btn color="primary" dark @click="setUpdate()">확정</v-btn>
|
||||
<v-btn color="primary" dark @click="closePop()">취소</v-btn>
|
||||
<v-card-actions class="pa-5 d-flex align-center justify-end">
|
||||
<a-button color="primary" type="default" class="mr-2" dark @click="closePop()">취소</a-button>
|
||||
<a-button color="primary" type="primary" dark @click="setUpdate()">확정</a-button>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
@ -196,7 +195,7 @@ export default {
|
||||
selectCodeList,
|
||||
InputText,
|
||||
Chart,
|
||||
SelectBox
|
||||
SelectBox,
|
||||
// Tree
|
||||
},
|
||||
data() {
|
||||
@ -318,6 +317,9 @@ export default {
|
||||
// });
|
||||
// }
|
||||
},
|
||||
mounted(){
|
||||
// this.initTest(); return;
|
||||
},
|
||||
methods: {
|
||||
...mapMutations({
|
||||
setPageData: 'setPageData',
|
||||
@ -329,6 +331,7 @@ export default {
|
||||
...mapActions({
|
||||
postApiReturn: 'modules/list/postApiReturn',
|
||||
}),
|
||||
|
||||
init() {
|
||||
this.setChart();
|
||||
},
|
||||
@ -406,6 +409,74 @@ export default {
|
||||
this.nowSeriesData = [];
|
||||
this.nowModalChartData = [];
|
||||
},
|
||||
async initTestChart(){
|
||||
this.loadChart = false;
|
||||
let xAxisData = [];
|
||||
let seriesData = [];
|
||||
let data = [];
|
||||
let targetMonthList = [];
|
||||
let _this = this;
|
||||
|
||||
const dataItemLine = []; // { gubun: '2PLAN' };
|
||||
const dataItemBar = []; //{ gubun: '1PLAN' };
|
||||
|
||||
const getRanNum = (n) => Math.floor(Math.random()*n + 1);
|
||||
|
||||
for(var i=1; i<=12; i++){
|
||||
let qty = 'qty' + i.toString().padStart(2, '0');
|
||||
targetMonthList.push(qty);
|
||||
xAxisData.push(i);
|
||||
dataItemLine.push(getRanNum(100));
|
||||
dataItemBar.push(getRanNum(100));
|
||||
}
|
||||
data = [
|
||||
{gubun: '1PLAN'}, {gubun: '2PLAN'},
|
||||
];
|
||||
|
||||
seriesData = data.map(item => ({
|
||||
name: item.gubun == '2PLAN' ? '계획' : '전년실적',
|
||||
type: item.gubun == '2PLAN' ? 'line' : 'bar',
|
||||
data: item.gubun == '2PLAN' ? dataItemLine : dataItemBar
|
||||
}));
|
||||
this.nowSeriesData = seriesData;
|
||||
let option = {
|
||||
grid: {
|
||||
top: "3%",
|
||||
},
|
||||
xAxis:{
|
||||
type: 'category',
|
||||
data: xAxisData
|
||||
},
|
||||
yAxis:{
|
||||
type:'value',
|
||||
nameLocation : 'middle',
|
||||
nameGap :45
|
||||
},
|
||||
legend: {
|
||||
icon: 'circle',
|
||||
},
|
||||
series: seriesData,
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
await this.$nextTick(() => { });
|
||||
|
||||
this.setModalChartOption({
|
||||
prgmId: this.$route.query.prgmId,
|
||||
chartKey: this.chartName,
|
||||
modalId: this.modalId,
|
||||
modalDataKey: this.modalDataKey,
|
||||
value: option,
|
||||
});
|
||||
this.loadChart = true;
|
||||
// this.$nextTick(() => {
|
||||
// })
|
||||
},
|
||||
async setChart(){
|
||||
this.loadChart = false;
|
||||
let xAxisData = [];
|
||||
|
||||
@ -1,115 +1,80 @@
|
||||
<template>
|
||||
<v-row class="search-box" align="center" no-gutters>
|
||||
<v-col :cols="option.labelCols">
|
||||
<v-row class="search-box" align="center">
|
||||
<v-col :cols="option.labelCols" class="py-0">
|
||||
<label for="" class="search-box-label">
|
||||
<v-icon
|
||||
x-small
|
||||
:color="item.required ? '#fb8200' : 'primary'"
|
||||
class="mr-1"
|
||||
>mdi-record-circle</v-icon
|
||||
>
|
||||
<v-icon v-if="item.iconShow" small
|
||||
:class="['mr-1', item.required ? 'icon-orange' : 'icon-blue']">$icoBulletPoint</v-icon>
|
||||
{{ option.labelContent }}
|
||||
</label>
|
||||
</v-col>
|
||||
<v-col :cols="option.textCols">
|
||||
<v-text-field
|
||||
readonly
|
||||
v-model="selectValue"
|
||||
append-icon="mdi-magnify"
|
||||
class="v-input__custom"
|
||||
@click="dialogOpenCloseEvent(dialog)"
|
||||
outlined
|
||||
:hide-details="true"
|
||||
:required="item.required || false"
|
||||
:disabled="item.disabled || false"
|
||||
></v-text-field>
|
||||
<v-col :cols="option.textCols" class="py-0">
|
||||
<v-text-field readonly v-model="selectValue" append-icon="" class="v-input__custom"
|
||||
@click="dialogOpenCloseEvent(dialog)" outlined :hide-details="true" :required="item.required || false"
|
||||
:disabled="item.disabled || false"><template v-slot:append>
|
||||
<!-- Custom SVG icon -->
|
||||
<v-icon>$icoSearch</v-icon>
|
||||
|
||||
</template></v-text-field>
|
||||
</v-col>
|
||||
|
||||
<v-dialog v-model="dialog" scrollable width="540px">
|
||||
<v-dialog v-model="dialog" scrollable width="800px">
|
||||
<v-card style="height: 100%">
|
||||
<v-card-title class="pa-5 d-flex align-center justify-space-between">
|
||||
<v-card-title class="px-6 py-4 d-flex align-center justify-space-between">
|
||||
<span class="custom-title-4">{{ option.modalTitle }}</span>
|
||||
<v-btn
|
||||
icon
|
||||
tile
|
||||
:ripple="false"
|
||||
@click="dialogOpenCloseEvent(dialog)"
|
||||
>
|
||||
<v-icon>mdi-close</v-icon>
|
||||
</v-btn>
|
||||
<a-button icon="close" type="text" @click="dialogOpenCloseEvent(dialog)"></a-button>
|
||||
</v-card-title>
|
||||
<div class="pa-5">
|
||||
<v-row align="center" no-gutters>
|
||||
<v-col :cols="12">
|
||||
<component
|
||||
:is="'SelectBox'"
|
||||
ref="SelectBox1"
|
||||
:labelCols="2"
|
||||
:textCols="6"
|
||||
:propsValue="selectValue01"
|
||||
:itemList="selectValueList01"
|
||||
:label="'설비그룹'"
|
||||
@update:propsValue="selectValue01 = $event"
|
||||
:readonly="
|
||||
item.openMode == undefined
|
||||
<div class="pa-6 pt-0">
|
||||
<v-row align="center">
|
||||
<v-col :cols="5">
|
||||
<component :is="'SelectBox'" ref="SelectBox1" :labelCols="12" :textCols="12"
|
||||
:iconShow="true" :propsValue="selectValue01" :itemList="selectValueList01"
|
||||
:label="'설비그룹'" @update:propsValue="selectValue01 = $event" :readonly="item.openMode == undefined
|
||||
? openMode
|
||||
: item.openMode == 'ALL'
|
||||
? false
|
||||
: true
|
||||
"
|
||||
/>
|
||||
" />
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-col :cols="7">
|
||||
<v-row align="center" no-gutters>
|
||||
<v-col :cols="2">
|
||||
<v-col :cols="12">
|
||||
<label for="" class="search-box-label">
|
||||
<v-icon x-small color="primary" class="mr-1"
|
||||
>mdi-record-circle</v-icon
|
||||
>
|
||||
설비명
|
||||
<v-icon small :class="['mr-1 icon-blue']">$icoBulletPoint</v-icon>
|
||||
물리량명
|
||||
</label>
|
||||
</v-col>
|
||||
<v-col :cols="6">
|
||||
<v-text-field
|
||||
append-icon="mdi-magnify"
|
||||
class="v-input__custom"
|
||||
outlined
|
||||
:hide-details="true"
|
||||
v-model="searchWord"
|
||||
@keyup.enter="search"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
<v-col :cols="9"> <v-text-field append-icon="" class="v-input__custom" outlined
|
||||
:hide-details="true" v-model="searchWord" @keyup.enter="search"><template
|
||||
v-slot:append>
|
||||
<!-- Custom SVG icon -->
|
||||
<v-icon>$icoSearch</v-icon>
|
||||
|
||||
|
||||
</template></v-text-field></v-col>
|
||||
<v-spacer></v-spacer>
|
||||
<v-col cols="4" class="text-right">
|
||||
<v-btn :ripple="false" @click="search()">
|
||||
조회
|
||||
</v-btn>
|
||||
<!-- <v-btn :ripple="false" @click="initSearch()">
|
||||
초기화
|
||||
</v-btn> -->
|
||||
<v-col cols="3" class="text-right">
|
||||
<a-button icon="search" type="primary" @click="search()"
|
||||
class="search-button">조회</a-button>
|
||||
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
</div>
|
||||
<v-divider></v-divider>
|
||||
<!-- <div :style="'height: calc(50vh)'"> -->
|
||||
<div :style="'height: 429px;'">
|
||||
<!-- <div :style="{ height: 'calc(100% - 213px)' }"> -->
|
||||
<div ref="modalGridParent" class="h100 py-3">
|
||||
<component
|
||||
:is="loadGrid && dialog ? 'Grid' : null"
|
||||
:gridName="gridName"
|
||||
<div ref="modalGridParent" class="h100 px-6 py-4">
|
||||
<component :is="loadGrid && dialog ? 'Grid' : null" :gridName="gridName"
|
||||
:dataPath="searchParam.modalDataEqpmBaseInfoPop.eqpmBaseInfoPop"
|
||||
:parentPrgmId="parentPrgmId"
|
||||
@getRowsData="getRowData"
|
||||
@dblClick="setUpdate($event)"
|
||||
/>
|
||||
:parentPrgmId="parentPrgmId" @getRowsData="getRowData" @dblClick="setUpdate($event)" />
|
||||
</div>
|
||||
</div>
|
||||
<v-card-actions class="pa-5 d-flex align-center justify-center">
|
||||
<v-btn :ripple="false" @click="setUpdate($event)">확인</v-btn>
|
||||
<v-btn :ripple="false" @click="dialogOpenCloseEvent(dialog)"
|
||||
>닫기</v-btn
|
||||
>
|
||||
<v-card-actions class="px-6 py-4 d-flex align-center justify-end">
|
||||
<a-button :ripple="false" @click="dialogOpenCloseEvent(dialog)" class="mr-2">닫기</a-button>
|
||||
<a-button :ripple="false" type="primary" @click="setUpdate($event)">확인</a-button>
|
||||
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
@ -166,6 +131,11 @@ export default {
|
||||
require: false,
|
||||
default: true, // 'ALL'도 있음
|
||||
},
|
||||
iconShow: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: true,
|
||||
},
|
||||
// bindingFlag:{
|
||||
// type:Boolean,
|
||||
// require: false,
|
||||
@ -181,7 +151,7 @@ export default {
|
||||
return {
|
||||
dialog: false,
|
||||
|
||||
loadGrid: false,
|
||||
loadGrid: true,
|
||||
gridName: 'gridEqpmBaseInfoPop',
|
||||
myModalKey: 'eqpmBaseInfoPop',
|
||||
modalDataKey: 'modalDataEqpmBaseInfoPop',
|
||||
@ -323,6 +293,7 @@ export default {
|
||||
this.selectValueList01 = [];
|
||||
this.selectValue01 = null;
|
||||
}
|
||||
|
||||
},
|
||||
search() {
|
||||
this.getGridData();
|
||||
@ -482,33 +453,29 @@ var eqpmBaseInfoPop = {
|
||||
}
|
||||
}
|
||||
|
||||
.tui-grid-cell.tui-grid-cell-has-tree
|
||||
.tui-grid-tree-extra-content
|
||||
+ .tui-grid-cell-content:before {
|
||||
.tui-grid-cell.tui-grid-cell-has-tree .tui-grid-tree-extra-content+.tui-grid-cell-content:before {
|
||||
content: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@each $theme in dark, light {
|
||||
.v-application.#{$theme}-mode {
|
||||
.v-dialog {
|
||||
.v-card {
|
||||
&__title {
|
||||
color: map-deep-get($color, 'white', '0');
|
||||
@if $theme == dark {
|
||||
background-color: #2d3355;
|
||||
.v-btn {
|
||||
background-color: #2d3355;
|
||||
}
|
||||
} @else {
|
||||
background-color: #3f4d7d;
|
||||
.v-btn {
|
||||
background-color: #3f4d7d;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// .v-application.#{$theme}-mode {
|
||||
// .v-dialog {
|
||||
// .v-card {
|
||||
// &__title {
|
||||
|
||||
|
||||
// @if $theme ==dark {
|
||||
// background-color: #2d3355;
|
||||
|
||||
// .v-btn {
|
||||
// background-color: #2d3355;
|
||||
// }
|
||||
// }
|
||||
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,96 +1,74 @@
|
||||
<template>
|
||||
<v-row class="search-box" align="center" no-gutters>
|
||||
<v-col :cols="option.labelCols">
|
||||
<v-col :cols="option.labelCols" class="py-0">
|
||||
<label for="" class="search-box-label">
|
||||
<v-icon
|
||||
x-small
|
||||
:color="item.required ? '#fb8200' : 'primary'"
|
||||
class="mr-1"
|
||||
>mdi-record-circle</v-icon
|
||||
v-if="iconShow"
|
||||
small
|
||||
:class="['mr-1', required ? 'icon-orange' : 'icon-blue']"
|
||||
>$icoBulletPoint</v-icon
|
||||
>
|
||||
{{ option.labelContent }}
|
||||
</label>
|
||||
</v-col>
|
||||
<v-col :cols="option.textCols">
|
||||
<v-text-field
|
||||
:readonly="item.readonly || false"
|
||||
v-model="selectValue"
|
||||
append-icon="mdi-magnify"
|
||||
class="v-input__custom"
|
||||
@click="dialogOpenCloseEvent(dialog)"
|
||||
outlined
|
||||
:hide-details="true"
|
||||
:required="item.required || false"
|
||||
:disabled="item.disabled || false"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
<v-text-field :readonly="item.readonly || false" v-model="selectValue" append-icon=""
|
||||
class="v-input__custom" @click="dialogOpenCloseEvent(dialog)" outlined :hide-details="true"
|
||||
:required="item.required || false" :disabled="item.disabled || false"><template v-slot:append>
|
||||
<!-- Custom SVG icon -->
|
||||
<v-icon>$icoSearch</v-icon>
|
||||
|
||||
<v-dialog v-model="dialog" scrollable width="540px">
|
||||
|
||||
</template></v-text-field>
|
||||
</v-col>
|
||||
<v-dialog v-model="dialog" scrollable width="800px">
|
||||
<v-card style="height: 100%">
|
||||
<v-card-title class="pa-5 d-flex align-center justify-space-between">
|
||||
<v-card-title class="px-6 py-4 d-flex align-center justify-space-between">
|
||||
<span class="custom-title-4">{{ option.modalTitle }}</span>
|
||||
<v-btn
|
||||
icon
|
||||
tile
|
||||
:ripple="false"
|
||||
@click="dialogOpenCloseEvent(dialog)"
|
||||
>
|
||||
<v-icon>mdi-close</v-icon>
|
||||
</v-btn>
|
||||
<a-button icon="close" type="text" @click="dialogOpenCloseEvent(dialog)"></a-button>
|
||||
|
||||
</v-card-title>
|
||||
<div class="pa-5">
|
||||
<v-row align="center" no-gutters>
|
||||
<v-col :cols="2">
|
||||
<div class="pa-6 pt-0">
|
||||
<v-row align="center">
|
||||
<v-col :cols="12" class="py-0">
|
||||
<label for="" class="search-box-label">
|
||||
<v-icon x-small color="primary" class="mr-1"
|
||||
>mdi-record-circle</v-icon
|
||||
>
|
||||
<v-icon small :class="['mr-1 icon-blue']">$icoBulletPoint</v-icon>
|
||||
계산설명
|
||||
</label>
|
||||
</v-col>
|
||||
<v-col :cols="6">
|
||||
<v-text-field
|
||||
append-icon="mdi-magnify"
|
||||
class="v-input__custom"
|
||||
outlined
|
||||
:hide-details="true"
|
||||
v-model="searchWord"
|
||||
@keyup.enter="search"
|
||||
></v-text-field>
|
||||
<v-col :cols="11" class="pr-8 py-0" >
|
||||
<v-text-field append-icon="" class="v-input__custom" outlined
|
||||
:hide-details="true" v-model="searchWord" @keyup.enter="search"><template v-slot:append>
|
||||
<!-- Custom SVG icon -->
|
||||
<v-icon>$icoSearch</v-icon>
|
||||
|
||||
|
||||
</template></v-text-field>
|
||||
</v-col>
|
||||
<v-spacer></v-spacer>
|
||||
<v-col cols="4" class="text-right">
|
||||
<v-btn :ripple="false" @click="search()">
|
||||
조회
|
||||
</v-btn>
|
||||
<v-col cols="1" class="py-0" style="display: flex; justify-content: flex-end;">
|
||||
<a-button icon="search" type="primary" @click="search()" class="search-button">조회</a-button>
|
||||
<!-- <v-btn :ripple="false" @click="initSearch()">
|
||||
초기화
|
||||
</v-btn> -->
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
<v-divider></v-divider>
|
||||
<!-- <v-divider></v-divider> -->
|
||||
<div :style="'height: calc(50vh)'">
|
||||
<!-- <div :style="{ height: 'calc(100% - 213px)' }"> -->
|
||||
<div ref="modalGridParent" class="h100 py-3">
|
||||
<component
|
||||
:is="loadGrid && dialog ? 'Grid' : null"
|
||||
:gridName="grid_01"
|
||||
:dataPath="searchParam.modalData2.eqpmCalcPop"
|
||||
:parentPrgmId="parentPrgmId"
|
||||
@getRowsData="getRowData"
|
||||
@dblClick="setUpdate($event)"
|
||||
/>
|
||||
<div ref="modalGridParent" class="h100 px-6 py-4">
|
||||
<component :is="loadGrid && dialog ? 'Grid' : null" :gridName="grid_01"
|
||||
:dataPath="searchParam.modalData2.eqpmCalcPop" :parentPrgmId="parentPrgmId"
|
||||
@getRowsData="getRowData" @dblClick="setUpdate($event)" />
|
||||
</div>
|
||||
</div>
|
||||
<v-card-actions class="pa-5 d-flex align-center justify-center">
|
||||
<v-btn :ripple="false" @click="setUpdate($event)">확인</v-btn>
|
||||
<v-btn :ripple="false" @click="dialogOpenCloseEvent(dialog)"
|
||||
>닫기</v-btn
|
||||
>
|
||||
<v-card-actions class="pa-5 d-flex align-center justify-end">
|
||||
<a-button :ripple="false" @click="dialogOpenCloseEvent(dialog)" class="mr-2">닫기</a-button>
|
||||
<a-button :ripple="false" type="primary" @click="setUpdate($event)" >확인</a-button>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
@ -141,7 +119,17 @@ export default {
|
||||
openMode: {
|
||||
type: String,
|
||||
require: false,
|
||||
}
|
||||
},
|
||||
required: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: false,
|
||||
},
|
||||
iconShow:{
|
||||
type:Boolean,
|
||||
require:false,
|
||||
default:true
|
||||
},
|
||||
// bindingFlag:{
|
||||
// type:Boolean,
|
||||
// require: false,
|
||||
@ -156,7 +144,23 @@ export default {
|
||||
return {
|
||||
dialog: false,
|
||||
|
||||
loadGrid: false,
|
||||
loadGrid: true,
|
||||
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',
|
||||
myModalKey: 'eqpmCalcPop',
|
||||
modalDataKey: 'modalData2',
|
||||
@ -282,7 +286,7 @@ export default {
|
||||
modalDataKey: this.modalDataKey,
|
||||
value: Object.assign(
|
||||
// Utility.defaultGridOption(this.$refs.modalGridParent.offsetHeight - 60, myOptions),
|
||||
Utility.defaultGridOption(400, myOptions),
|
||||
// Utility.defaultGridOption(400, myOptions),
|
||||
myOptions,
|
||||
),
|
||||
});
|
||||
@ -294,7 +298,6 @@ export default {
|
||||
value: [
|
||||
{ header: '계산코드', name: 'calcProc', width: 150 },
|
||||
{ header: '아규먼트갯수', name: 'argCnt', align: 'center', width: 100 },
|
||||
// { header: '계산설명', name : 'calcDesc', width: 286},
|
||||
{ header: '계산설명', name: 'calcDesc', align: 'left' },
|
||||
],
|
||||
});
|
||||
@ -317,14 +320,6 @@ export default {
|
||||
res = newRes;
|
||||
}
|
||||
|
||||
// const res = [
|
||||
// {
|
||||
// 'calcProc' : 'AVG_CNT2',
|
||||
// 'argCnt' : '2',
|
||||
// 'calcDesc' : '두개 변수에 대한 평균'
|
||||
|
||||
// }
|
||||
// ]
|
||||
this.setModalGridData({
|
||||
modalKey: this.myModalKey,
|
||||
gridKey: this.grid_01,
|
||||
@ -403,33 +398,10 @@ var eqpmCalcPop = {
|
||||
}
|
||||
}
|
||||
|
||||
.tui-grid-cell.tui-grid-cell-has-tree
|
||||
.tui-grid-tree-extra-content
|
||||
+ .tui-grid-cell-content:before {
|
||||
.tui-grid-cell.tui-grid-cell-has-tree .tui-grid-tree-extra-content+.tui-grid-cell-content:before {
|
||||
content: none !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@each $theme in dark, light {
|
||||
.v-application.#{$theme}-mode {
|
||||
.v-dialog {
|
||||
.v-card {
|
||||
&__title {
|
||||
color: map-deep-get($color, 'white', '0');
|
||||
@if $theme == dark {
|
||||
background-color: #2d3355;
|
||||
.v-btn {
|
||||
background-color: #2d3355;
|
||||
}
|
||||
} @else {
|
||||
background-color: #3f4d7d;
|
||||
.v-btn {
|
||||
background-color: #3f4d7d;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,123 +1,97 @@
|
||||
<template>
|
||||
<v-row class="search-box" align="center" no-gutters>
|
||||
<v-col :cols="labelCols">
|
||||
<v-col v-if="label" :cols="labelCols">
|
||||
<label for="" class="search-box-label">
|
||||
<v-icon v-if="iconShow"
|
||||
x-small
|
||||
:color="required ? '#fb8200' : 'primary'"
|
||||
class="mr-1"
|
||||
>mdi-record-circle</v-icon
|
||||
>
|
||||
<v-icon v-if="iconShow" small
|
||||
:class="['mr-1', required ? 'icon-orange' : 'icon-blue']">$icoBulletPoint</v-icon>
|
||||
{{ label }}
|
||||
</label>
|
||||
</v-col>
|
||||
<v-col :cols="textCols">
|
||||
<v-text-field
|
||||
readonly
|
||||
v-model="selectValue"
|
||||
append-icon="mdi-magnify"
|
||||
class="v-input__custom"
|
||||
@click="dialogOpenCloseEvent(dialog)"
|
||||
outlined
|
||||
:hide-details="true"
|
||||
:required="required || false"
|
||||
:disabled="disabled || false"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
<v-text-field readonly append-icon="" :class="['v-input__custom', customClass]"
|
||||
@click="dialogOpenCloseEvent(dialog)" outlined :hide-details="true" :required="required || false"
|
||||
:disabled="disabled || false"><template v-slot:append>
|
||||
<!-- Custom SVG icon -->
|
||||
<v-icon>$icoSearch</v-icon>
|
||||
|
||||
<v-dialog
|
||||
ref="popModal"
|
||||
v-model="dialog"
|
||||
width="1400"
|
||||
overlay-color="#000"
|
||||
overlay-opacity="0.8"
|
||||
scrollable
|
||||
>
|
||||
</template></v-text-field>
|
||||
</v-col>
|
||||
<v-dialog ref="popModal" v-model="dialog" width="800" overlay-color="#000" overlay-opacity="0.8" scrollable>
|
||||
<v-card style="height: 100%">
|
||||
<v-divider></v-divider>
|
||||
<div class="d-flex align-center justify-space-between pa-4">
|
||||
<v-card-title class="pa-0 custom-title-4">◇ 설비 선택</v-card-title>
|
||||
</div>
|
||||
<div class="pa-5">
|
||||
<v-row align="center" no-gutters>
|
||||
<v-col :cols="3">
|
||||
<v-card-title class="px-5 py-4 d-flex align-center justify-space-between">
|
||||
<span class="custom-title-4">설비 선택</span>
|
||||
<a-button icon="close" type="text" @click="dialogOpenCloseEvent(dialog)"></a-button>
|
||||
</v-card-title>
|
||||
<div class="pa-2 pt-0">
|
||||
<v-card class="searchFilter">
|
||||
<v-row align="end">
|
||||
<v-col :cols="3.5">
|
||||
<!-- 설비그룹 -->
|
||||
<component
|
||||
:is="'SelectBox'"
|
||||
:propsValue="selectValue01"
|
||||
:itemList="selectValueList01"
|
||||
:label="'설비그룹'"
|
||||
:disabled="eqpmGrpDisabled"
|
||||
@update:propsValue="selectValue01 = $event"
|
||||
/>
|
||||
<component :is="'SelectBox'" :propsValue="selectValue01" :itemList="selectValueList01"
|
||||
:label="'설비그룹'" :disabled="eqpmGrpDisabled"
|
||||
@update:propsValue="selectValue01 = $event" :labelCols="12" :textCols="12"
|
||||
:iconShow="true" />
|
||||
</v-col>
|
||||
<v-col :cols="6" style="padding:0px 10px;">
|
||||
<v-col :cols="3.5">
|
||||
<!-- FAB -->
|
||||
<component
|
||||
:is="'SelectBoxMulti'"
|
||||
:propsValue="selectValue02"
|
||||
:itemList="selectValueList02"
|
||||
:label="'FAB'"
|
||||
:labelCols="2"
|
||||
:multiple="true"
|
||||
:disabled="fabDisabled"
|
||||
@update:propsValue="selectValue02 = $event"
|
||||
/>
|
||||
<component :is="'SelectBoxMulti'" :propsValue="selectValue02"
|
||||
:itemList="selectValueList02" :label="'FAB'" :labelCols="12" :multiple="true"
|
||||
:disabled="fabDisabled" @update:propsValue="selectValue02 = $event" :textCols="12"
|
||||
:iconShow="true" />
|
||||
</v-col>
|
||||
<v-col :cols="3.5">
|
||||
<v-row>
|
||||
<v-col :cols="12" class="py-0">
|
||||
<label for="" class="search-box-label">
|
||||
<v-icon small :class="['mr-1', 'icon-blue']">$icoBulletPoint</v-icon>
|
||||
설비명
|
||||
</label>
|
||||
</v-col>
|
||||
<v-col :cols="12" class="pt-0">
|
||||
<v-text-field append-icon="" class="v-input__custom" outlined
|
||||
:hide-details="true" v-model="searchWord" @keyup.enter="search"><template
|
||||
v-slot:append>
|
||||
<!-- Custom SVG icon -->
|
||||
<v-icon>$icoSearch</v-icon>
|
||||
|
||||
</template></v-text-field>
|
||||
</v-col>
|
||||
|
||||
<v-spacer></v-spacer>
|
||||
<v-col cols="3" class="text-right">
|
||||
<v-btn :ripple="false" @click="search()">
|
||||
조회
|
||||
</v-btn>
|
||||
<!-- <v-btn :ripple="false" @click="initSearch()">
|
||||
초기화
|
||||
</v-btn> -->
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row align="center" no-gutters style="margin-top: 14px;">
|
||||
</v-col>
|
||||
<a-button icon="search" type="primary" @click="search()" class="search-button">조회</a-button>
|
||||
|
||||
|
||||
</v-row>
|
||||
</v-card>
|
||||
|
||||
<!-- <v-row align="center" no-gutters style="margin-top: 14px;">
|
||||
<v-col :cols="1">
|
||||
<label for="" class="search-box-label">
|
||||
<v-icon x-small color="primary" class="mr-1"
|
||||
>mdi-record-circle</v-icon
|
||||
>
|
||||
<v-icon x-small color="primary" class="mr-1">mdi-record-circle</v-icon>
|
||||
설비명
|
||||
</label>
|
||||
</v-col>
|
||||
<v-col :cols="3">
|
||||
<v-text-field
|
||||
append-icon="mdi-magnify"
|
||||
class="v-input__custom"
|
||||
outlined
|
||||
:hide-details="true"
|
||||
v-model="searchWord"
|
||||
@keyup.enter="search"
|
||||
></v-text-field>
|
||||
<v-text-field append-icon="mdi-magnify" class="v-input__custom" outlined
|
||||
:hide-details="true" v-model="searchWord" @keyup.enter="search"></v-text-field>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-row> -->
|
||||
</div>
|
||||
<div class="px-5" style="height:429px;">
|
||||
<div ref="modalGridParent" class="w100 h100">
|
||||
<component
|
||||
:ref="gridName"
|
||||
:is="loadGrid? 'Grid' : null"
|
||||
:dataPath="searchParam.eqpmSelectPopData.eqpmSelectPop"
|
||||
:gridName="gridName"
|
||||
:parentPrgmId="parentPrgmId"
|
||||
@getRowsData="getRowData"
|
||||
|
||||
/>
|
||||
<component :ref="gridName" :is="loadGrid ? 'Grid' : null"
|
||||
:dataPath="searchParam.eqpmSelectPopData.eqpmSelectPop" :gridName="gridName"
|
||||
:parentPrgmId="parentPrgmId" @getRowsData="getRowData" />
|
||||
</div>
|
||||
</div>
|
||||
<v-divider></v-divider>
|
||||
<v-card-actions class="pa-5 d-flex align-center justify-center">
|
||||
<v-btn :ripple="false" @click="setUpdate($event)">확인</v-btn>
|
||||
<v-btn :ripple="false" @click="dialogOpenCloseEvent(dialog)"
|
||||
>닫기</v-btn
|
||||
>
|
||||
<v-card-actions class="px-6 py-4 d-flex align-center justify-end">
|
||||
<a-button :ripple="false" @click="dialogOpenCloseEvent(dialog)" class="mr-2">닫기</a-button>
|
||||
<a-button :ripple="false" type="primary" @click="setUpdate($event)">확인</a-button>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
@ -200,6 +174,11 @@ export default {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: false
|
||||
},
|
||||
customClass: {
|
||||
type: String,
|
||||
require: false,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
components: {
|
||||
@ -217,7 +196,7 @@ export default {
|
||||
modalDataKey: 'eqpmSelectPopData',
|
||||
myModalKey: 'eqpmSelectPop',
|
||||
gridName: 'eqpmSelectGrid',
|
||||
loadGrid: false,
|
||||
loadGrid: true,
|
||||
setGrid: false,
|
||||
popCheck: false,
|
||||
dialog: false,
|
||||
@ -405,12 +384,15 @@ export default {
|
||||
columnOptions: {
|
||||
resizable: true,
|
||||
},
|
||||
header: {
|
||||
height: 'auto',
|
||||
},
|
||||
// rowHeaders:[{ type: 'checkbox' }],
|
||||
// rowHeight:'auto'
|
||||
rowHeight: 'auto',
|
||||
};
|
||||
if (this.isMulti) {
|
||||
myOptions['rowHeaders'] = [{type : 'checkbox'}];
|
||||
myOptions['rowHeight'] = 'auto';
|
||||
// myOptions['rowHeaders'] = [{ type: 'checkbox' }];
|
||||
// myOptions['rowHeight'] = 'auto';
|
||||
}
|
||||
|
||||
|
||||
@ -495,7 +477,33 @@ export default {
|
||||
// totDttmTime : Utility.setFormatDate(item.totDttm, 'HH') + "~" + dayjs(item.totDttm).add(1,'h').format('HH')
|
||||
// }
|
||||
// );
|
||||
|
||||
// const res =
|
||||
// [
|
||||
// {
|
||||
// "fabId": "FAB001",
|
||||
// "fabNm": "Gumi FAB",
|
||||
// "eqpmId": "EQ001",
|
||||
// "eqpmNm": "Etcher A12",
|
||||
// "eccId": "ECC001",
|
||||
// "eccNm": "Etch Control Center"
|
||||
// },
|
||||
// {
|
||||
// "fabId": "FAB002",
|
||||
// "fabNm": "Pyeongtaek FAB",
|
||||
// "eqpmId": "EQ002",
|
||||
// "eqpmNm": "Deposition B34",
|
||||
// "eccId": "ECC002",
|
||||
// "eccNm": "Deposition Control Center"
|
||||
// },
|
||||
// {
|
||||
// "fabId": "FAB003",
|
||||
// "fabNm": "Hwaseong FAB",
|
||||
// "eqpmId": "EQ003",
|
||||
// "eqpmNm": "CMP C56",
|
||||
// "eccId": "ECC003",
|
||||
// "eccNm": "CMP Control Center"
|
||||
// }
|
||||
// ];
|
||||
this.setModalGridData({
|
||||
modalKey: this.myModalKey,
|
||||
gridKey: this.gridName,
|
||||
|
||||
375
components/common/modal/EqpmSelectPop_bk.vue
Normal file
375
components/common/modal/EqpmSelectPop_bk.vue
Normal file
@ -0,0 +1,375 @@
|
||||
<template>
|
||||
<v-row class="search-box" align="center" no-gutters>
|
||||
<v-col :cols="labelCols">
|
||||
<label for="" class="search-box-label">
|
||||
{{ label }}
|
||||
</label>
|
||||
</v-col>
|
||||
<v-col :cols="textCols">
|
||||
<!-- <a-input :size="size" @click="showDetailModal = true" class="custom-input" suffix-icon placeholder="Search..." v-model="selectValue">
|
||||
<template #suffix>
|
||||
<a-icon type="search" />
|
||||
</template>
|
||||
</a-input> -->
|
||||
|
||||
<!-- append-icon="search" -->
|
||||
<v-text-field
|
||||
readonly
|
||||
v-model="selectValue"
|
||||
class="v-input__custom"
|
||||
@click="showDetailModal = true"
|
||||
outlined
|
||||
:hide-details="true"
|
||||
:required="required || false"
|
||||
>
|
||||
<!-- :disabled="disabled || false" -->
|
||||
<template #append >
|
||||
<a-icon type="search" />
|
||||
</template>
|
||||
</v-text-field>
|
||||
|
||||
</v-col>
|
||||
<a-modal v-model="showDetailModal" title="가이드 알람이력" class="text-left" width="800px" :footer="null"
|
||||
:style="{ borderRadius: '8px', overflow: 'hidden' }" :bodyStyle="{ paddingTop: '0px' }">
|
||||
<!-- Top Input Fields -->
|
||||
<v-row :gutters="32" align="end" style="margin-bottom: 16px;">
|
||||
<!-- Label on the left -->
|
||||
|
||||
<!-- Two inputs on the right -->
|
||||
<v-col :cols="3">
|
||||
<component :is="'SelectBox'" :label="'실비그룹'" :labelCols="12" :textCols="12"
|
||||
:propsValue="eqpmGrpSelected" :itemList="eqpmGrpList"
|
||||
@update:propsValue="eqpmGrpSelected = $event" :disabled="disabled" :iconShow="false" />
|
||||
</v-col>
|
||||
|
||||
<v-col :cols="4" style="text-align: left;">
|
||||
<component :is="'SelectBox'" :label="'FAB'" :labelCols="12" :textCols="12"
|
||||
:propsValue="localFabSelected" :itemList="fabList"
|
||||
@update:propsValue="localFabSelected = $event" :disabled="disabled" :iconShow="false" />
|
||||
</v-col>
|
||||
<v-col :cols="5" >
|
||||
<v-row>
|
||||
<v-col :cols="12" style="text-align: left;">
|
||||
<div>실비명</div>
|
||||
</v-col>
|
||||
|
||||
<v-col :cols="8">
|
||||
<a-input class="custom-input" suffix-icon placeholder="Search..."
|
||||
:style="{ borderRadius: '6px', }" >
|
||||
<template #suffix>
|
||||
<a-icon type="search" />
|
||||
</template>
|
||||
|
||||
</a-input>
|
||||
</v-col>
|
||||
<v-col :cols="3" class="text-right">
|
||||
<!-- 조회버튼 -->
|
||||
<BtnSearch @click="searchFab()" />
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-col>
|
||||
|
||||
|
||||
</v-row>
|
||||
<a-divider />
|
||||
<!-- Table -->
|
||||
<a-table :columns="columns" :dataSource="filteredData" rowKey="id" :rowSelection="rowSelection" bordered />
|
||||
|
||||
<!-- Footer Buttons -->
|
||||
<div style="text-align: right; margin-top: 16px;">
|
||||
<a-button @click="showDetailModal = false">닫기</a-button>
|
||||
<a-button type="primary" style="margin-left: 8px; color:#fff"
|
||||
@click="showDetailModal = false">확인</a-button>
|
||||
</div>
|
||||
</a-modal>
|
||||
</v-row>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapMutations, mapActions } from 'vuex';
|
||||
import Grid from '~/components/common/Grid';
|
||||
import Utility from '~/plugins/utility';
|
||||
import selectCodeList from '@/components/common/select/selectCodeList';
|
||||
import InputText from '~/components/common/input/InputText';
|
||||
import dateUtility from '~/plugins/dateUtility';
|
||||
import SelectBox from '@/components/common/select/SelectBox';
|
||||
import SelectBoxMulti from '@/components/common/select/SelectBoxMulti';
|
||||
import BtnSearch from '~/components/common/button/BtnSearch';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
parentPrgmId: {
|
||||
type: String,
|
||||
require: true,
|
||||
default: '비교대상 최대(20개)',
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
require: false,
|
||||
default: '전력 계약 정보',
|
||||
},
|
||||
valueNm: {
|
||||
type: String,
|
||||
require: false,
|
||||
default: '',
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
require: false,
|
||||
default: '전력 계약 목록',
|
||||
},
|
||||
labelCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 12,
|
||||
},
|
||||
textCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 12,
|
||||
},
|
||||
item: {
|
||||
type: Object,
|
||||
require: true,
|
||||
},
|
||||
bindingData: {
|
||||
type: String,
|
||||
require: false,
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
required: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: false
|
||||
},
|
||||
fabDisabled: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: false
|
||||
},
|
||||
eqpmGrpDisabled: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: false
|
||||
},
|
||||
iconShow: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: true
|
||||
},
|
||||
isMulti: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: false
|
||||
},
|
||||
fabSelected: {
|
||||
type: String, // or Array, depending on your data
|
||||
required: false
|
||||
},
|
||||
eqpmGrpSelected: {
|
||||
type: String, // or Array, depending on your data
|
||||
required: false
|
||||
},
|
||||
size: {
|
||||
type: String,
|
||||
require: false,
|
||||
default: "middle",
|
||||
}
|
||||
|
||||
},
|
||||
components: {
|
||||
Grid,
|
||||
selectCodeList,
|
||||
dateUtility,
|
||||
InputText,
|
||||
SelectBox,
|
||||
SelectBoxMulti,
|
||||
BtnSearch
|
||||
// Tree
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
labelPrepend: true,
|
||||
modalDataKey: 'eqpmSelectPopData',
|
||||
myModalKey: 'eqpmSelectPop',
|
||||
gridName: 'eqpmSelectGrid',
|
||||
loadGrid: false,
|
||||
setGrid: false,
|
||||
popCheck: false,
|
||||
dialog: false,
|
||||
activeRowData: {},
|
||||
checkedRowDataList: [],
|
||||
|
||||
localFabSelected: this.fabSelected,
|
||||
localEqpmGrpSelected: this.eqpmGrpSelected,
|
||||
|
||||
fabList: [],
|
||||
eqpmGrpList: [],
|
||||
searchWord: '',
|
||||
activeRowData: {},
|
||||
textFieldData: '',
|
||||
selectRow: {},
|
||||
showDetailModal: false,
|
||||
columns: [
|
||||
{
|
||||
title: 'FAB',
|
||||
dataIndex: 'fab',
|
||||
key: 'fab',
|
||||
},
|
||||
{
|
||||
title: '설비ID',
|
||||
dataIndex: 'equipmentId',
|
||||
key: 'equipmentId',
|
||||
},
|
||||
{
|
||||
title: '설비명',
|
||||
dataIndex: 'equipmentName',
|
||||
key: 'equipmentName',
|
||||
},
|
||||
],
|
||||
// Table data
|
||||
data: [
|
||||
{
|
||||
id: 1,
|
||||
fab: 'FAB001',
|
||||
equipmentId: 'EQ001',
|
||||
equipmentName: '냉각기 A',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
fab: 'FAB002',
|
||||
equipmentId: 'EQ002',
|
||||
equipmentName: '펌프 B',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
fab: 'FAB003',
|
||||
equipmentId: 'EQ003',
|
||||
equipmentName: '히터 C',
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
fab: 'FAB001',
|
||||
equipmentId: 'EQ004',
|
||||
equipmentName: '냉각기 D',
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
fab: 'FAB002',
|
||||
equipmentId: 'EQ005',
|
||||
equipmentName: '펌프 E',
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
fab: 'FAB003',
|
||||
equipmentId: 'EQ006',
|
||||
equipmentName: '히터 F',
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
fab: 'FAB001',
|
||||
equipmentId: 'EQ007',
|
||||
equipmentName: '냉각기 G',
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
fab: 'FAB002',
|
||||
equipmentId: 'EQ008',
|
||||
equipmentName: '펌프 H',
|
||||
},
|
||||
],
|
||||
filteredData: [],
|
||||
// Row selection config
|
||||
rowSelection: {
|
||||
onChange: (selectedRowKeys, selectedRows) => {
|
||||
console.log('Selected Row Keys:', selectedRowKeys);
|
||||
console.log('Selected Rows:', selectedRows);
|
||||
},
|
||||
}
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
|
||||
fabSelected(newVal) {
|
||||
this.localFabSelected = newVal;
|
||||
},
|
||||
eqpmGrpSelected(newVal) {
|
||||
this.localEqpmGrpSelected = newVal;
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
beforeCreate() {
|
||||
this.$store.commit('setPageData', {
|
||||
eqpmSelectPopData: { eqpmSelectPop },
|
||||
});
|
||||
},
|
||||
async created() {
|
||||
await this.getFab();
|
||||
await this.getEqpmGrp();
|
||||
this.init();
|
||||
},
|
||||
methods: {
|
||||
// ...mapMutations({
|
||||
// setPageData: 'setPageData',
|
||||
// setModalGridData: 'setModalGridData',
|
||||
// setModalGridColumn: 'setModalGridColumn',
|
||||
// setModalGridOption: 'setModalGridOption',
|
||||
// }),
|
||||
// ...mapActions({
|
||||
// postApiReturn: 'modules/list/postApiReturn',
|
||||
// }),
|
||||
init() {
|
||||
this.filteredData = this.data;
|
||||
// this.activeRowData = {};
|
||||
// this.gridInit();
|
||||
},
|
||||
// search() {
|
||||
// this.getRowGridData();
|
||||
// },
|
||||
searchFab() {
|
||||
console.log('tttttttttttt')
|
||||
// this.filteredData = this.data.filter(item => {
|
||||
// const matchGrp = this.eqpmGrpSelected ? item.group === this.eqpmGrpSelected : true;
|
||||
// const matchFab = this.localFabSelected ? item.fab === this.localFabSelected : true;
|
||||
// return matchGrp && matchFab;
|
||||
// });
|
||||
},
|
||||
async getFab() {
|
||||
|
||||
this.fabList = [
|
||||
{ label: 'FAB001', value: 'FAB001' },
|
||||
{ label: 'FAB002', value: 'FAB002' },
|
||||
{ label: 'FAB003', value: 'FAB003' },
|
||||
];
|
||||
|
||||
// this.fabSelected = 'FAB001';
|
||||
|
||||
},
|
||||
async getEqpmGrp() {
|
||||
this.eqpmGrpList = [
|
||||
{ label: 'EQ 1', value: 'EQ001' },
|
||||
{ label: 'EQ 2', value: 'EQ002' },
|
||||
{ label: 'EQ 3', value: 'EQ003' },
|
||||
];
|
||||
|
||||
// this.eqpmGrpSelected = 'EQ001';
|
||||
|
||||
},
|
||||
|
||||
|
||||
},
|
||||
};
|
||||
var eqpmSelectPop = {
|
||||
eqpmSelectGrid: {
|
||||
data: [],
|
||||
column: [],
|
||||
option: {}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
@ -1,95 +1,66 @@
|
||||
<template>
|
||||
<v-row class="search-box" align="center" no-gutters>
|
||||
<v-col :cols="option.labelCols">
|
||||
<v-row class="search-box" align="center">
|
||||
<v-col :cols="option.labelCols" class="py-0">
|
||||
<label for="" class="search-box-label">
|
||||
<v-icon
|
||||
x-small
|
||||
:color="item.required ? '#fb8200' : 'primary'"
|
||||
class="mr-1"
|
||||
>mdi-record-circle</v-icon
|
||||
>
|
||||
<v-icon v-if="item.iconShow" small
|
||||
:class="['mr-1', item.required ? 'icon-orange' : 'icon-blue']">$icoBulletPoint</v-icon>
|
||||
{{ option.labelContent }}
|
||||
</label>
|
||||
</v-col>
|
||||
<v-col :cols="option.textCols">
|
||||
<v-text-field
|
||||
readonly
|
||||
v-model="selectValue"
|
||||
append-icon="mdi-magnify"
|
||||
class="v-input__custom"
|
||||
@click="dialogOpenCloseEvent(dialog)"
|
||||
outlined
|
||||
:hide-details="true"
|
||||
:required="item.required || false"
|
||||
:disabled="item.disabled || false"
|
||||
></v-text-field>
|
||||
<v-col :cols="option.textCols" class="py-0">
|
||||
<v-text-field readonly append-icon="" class="v-input__custom" outlined :hide-details="true"
|
||||
v-model="searchWord" @keyup.enter="typeEnterKey" @click="dialogOpenCloseEvent(dialog)"
|
||||
:required="item.required || false"><template v-slot:append>
|
||||
<!-- Custom SVG icon -->
|
||||
<v-icon>$icoSearch</v-icon>
|
||||
|
||||
|
||||
</template></v-text-field>
|
||||
</v-col>
|
||||
|
||||
<v-dialog v-model="dialog" scrollable width="1000px">
|
||||
<v-card style="height: 100%">
|
||||
<v-card-title class="pa-5 d-flex align-center justify-space-between">
|
||||
<span class="custom-title-4">{{ option.modalTitle }}</span>
|
||||
<v-btn
|
||||
icon
|
||||
tile
|
||||
:ripple="false"
|
||||
@click="dialogOpenCloseEvent(dialog)"
|
||||
>
|
||||
<v-icon>mdi-close</v-icon>
|
||||
</v-btn>
|
||||
<v-icon @click="dialogOpenCloseEvent(dialog)">mdi-close</v-icon>
|
||||
</v-card-title>
|
||||
<div class="pa-5">
|
||||
<v-row align="center" no-gutters>
|
||||
<v-col :cols="2">
|
||||
<v-row align="end" class="px-5 pb-3" no-gutters>
|
||||
<v-col :cols="2.5" class="mr-2">
|
||||
<v-row>
|
||||
<v-col :cols="12" class="py-0">
|
||||
<label for="" class="search-box-label">
|
||||
<v-icon x-small color="primary" class="mr-1"
|
||||
>mdi-record-circle</v-icon
|
||||
>
|
||||
<!-- <v-icon small
|
||||
:class="['mr-1', item.required ? 'icon-orange' : 'icon-blue']"
|
||||
>$icoBulletPoint</v-icon> -->
|
||||
검색
|
||||
</label>
|
||||
</v-col>
|
||||
<v-col :cols="6">
|
||||
<v-text-field
|
||||
append-icon="mdi-magnify"
|
||||
class="v-input__custom"
|
||||
outlined
|
||||
:hide-details="true"
|
||||
v-model="searchWord"
|
||||
@keyup.enter="search"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
<v-spacer></v-spacer>
|
||||
<v-col cols="4" class="text-right">
|
||||
<v-btn :ripple="false" @click="search()">
|
||||
조회
|
||||
</v-btn>
|
||||
<!-- <v-btn :ripple="false" @click="initSearch()">
|
||||
초기화
|
||||
</v-btn> -->
|
||||
<v-col :cols="11" class="py-0 pr-3">
|
||||
<v-text-field append-icon="mdi-magnify" class="v-input__custom" outlined
|
||||
:hide-details="true" v-model="searchWord" @keyup.enter="search"></v-text-field>
|
||||
</v-col>
|
||||
<a-button icon="search" :ripple="false" type="primary" @click="search()"
|
||||
class="search-button">조회</a-button>
|
||||
</v-row>
|
||||
</v-col>
|
||||
|
||||
|
||||
</v-row>
|
||||
</div>
|
||||
<v-divider></v-divider>
|
||||
<!-- <div :style="'height: calc(65vh)'"> -->
|
||||
<div :style="'height: 600px'">
|
||||
<div :style="'height: 600px'" class="px-5">
|
||||
<!-- <div :style="{ height: 'calc(100% - 213px)' }"> -->
|
||||
<div ref="modalGridParent" class="h100 py-3">
|
||||
<component
|
||||
:is="loadGrid && dialog ? 'Grid' : null"
|
||||
:gridName="grid_01"
|
||||
:dataPath="searchParam.modalData2.evtObjPop"
|
||||
:parentPrgmId="parentPrgmId"
|
||||
@getRowsData="getRowData"
|
||||
@dblClick="setUpdate($event)"
|
||||
/>
|
||||
<!-- :is="loadGrid && dialog ? 'Grid' : null" -->
|
||||
<component :is="loadGrid && dialog ? 'Grid' : null" :gridName="grid_01"
|
||||
:dataPath="searchParam.modalData2.evtObjPop" :parentPrgmId="parentPrgmId"
|
||||
@getRowsData="getRowData" @dblClick="setUpdate($event)" />
|
||||
</div>
|
||||
</div>
|
||||
<v-card-actions class="pa-5 d-flex align-center justify-center">
|
||||
<v-btn :ripple="false" @click="setUpdate('init')">초기화</v-btn>
|
||||
<v-btn :ripple="false" @click="setUpdate($event)">확인</v-btn>
|
||||
<v-btn :ripple="false" @click="dialogOpenCloseEvent(dialog)"
|
||||
>닫기</v-btn
|
||||
>
|
||||
<v-card-actions class="pa-5 d-flex align-center justify-end">
|
||||
<a-button type="default" class="mr-2" :ripple="false"
|
||||
@click="dialogOpenCloseEvent(dialog)">닫기</a-button>
|
||||
<a-button type="primary" class="mr-2" :ripple="false" @click="setUpdate('init')">초기화</a-button>
|
||||
<a-button type="primary" :ripple="false" @click="setUpdate($event)">확인</a-button>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
@ -139,7 +110,11 @@ export default {
|
||||
bindingData: {
|
||||
type: String,
|
||||
require: false,
|
||||
}
|
||||
},
|
||||
customClass: {
|
||||
type: String,
|
||||
require: false,
|
||||
},
|
||||
// bindingFlag:{
|
||||
// type:Boolean,
|
||||
// require: false,
|
||||
@ -278,6 +253,9 @@ export default {
|
||||
columnOptions: {
|
||||
resizable: true,
|
||||
},
|
||||
header: {
|
||||
height: 38,
|
||||
},
|
||||
};
|
||||
this.setModalGridOption({
|
||||
modalKey: this.myModalKey,
|
||||
@ -404,33 +382,8 @@ var evtObjPop = {
|
||||
}
|
||||
}
|
||||
|
||||
.tui-grid-cell.tui-grid-cell-has-tree
|
||||
.tui-grid-tree-extra-content
|
||||
+ .tui-grid-cell-content:before {
|
||||
.tui-grid-cell.tui-grid-cell-has-tree .tui-grid-tree-extra-content+.tui-grid-cell-content:before {
|
||||
content: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@each $theme in dark, light {
|
||||
.v-application.#{$theme}-mode {
|
||||
.v-dialog {
|
||||
.v-card {
|
||||
&__title {
|
||||
color: map-deep-get($color, 'white', '0');
|
||||
@if $theme == dark {
|
||||
background-color: #2d3355;
|
||||
.v-btn {
|
||||
background-color: #2d3355;
|
||||
}
|
||||
} @else {
|
||||
background-color: #3f4d7d;
|
||||
.v-btn {
|
||||
background-color: #3f4d7d;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,26 +1,32 @@
|
||||
<template>
|
||||
<v-row class="search-box " align="center" no-gutters >
|
||||
<v-col :cols="option.labelCols">
|
||||
<v-col :cols="option.labelCols" class="py-0">
|
||||
<label for="" class="search-box-label">
|
||||
<v-icon
|
||||
x-small
|
||||
v-if="iconShow"
|
||||
small
|
||||
:color="item.required ? '#fb8200' : 'primary'"
|
||||
class="mr-1"
|
||||
>mdi-record-circle</v-icon
|
||||
:class="['mr-1', item.required ? 'icon-orange' : 'icon-blue']"
|
||||
>$icoBulletPoint</v-icon
|
||||
>
|
||||
{{ option.labelContent }}
|
||||
</label>
|
||||
</v-col>
|
||||
<v-col :cols="option.textCols">
|
||||
<!-- append-icon="mdi-magnify" -->
|
||||
<v-text-field
|
||||
readonly
|
||||
v-model="selectValue"
|
||||
append-icon="mdi-magnify"
|
||||
class="v-input__custom"
|
||||
@click="dialogOpenCloseEvent(dialog)"
|
||||
outlined
|
||||
:hide-details="true"
|
||||
></v-text-field>
|
||||
>
|
||||
<template v-slot:append>
|
||||
<!-- Custom SVG icon -->
|
||||
<v-icon>$icoSearch</v-icon>
|
||||
</template>
|
||||
</v-text-field>
|
||||
</v-col>
|
||||
|
||||
<v-dialog v-model="dialog" scrollable width="700px">
|
||||
@ -137,6 +143,11 @@ export default {
|
||||
type: String,
|
||||
require: false,
|
||||
},
|
||||
iconShow: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: true
|
||||
},
|
||||
},
|
||||
components: {
|
||||
Grid,
|
||||
@ -146,7 +157,7 @@ export default {
|
||||
return {
|
||||
dialog: false,
|
||||
|
||||
loadGrid: false,
|
||||
loadGrid: true,
|
||||
grid_01: 'grid_01',
|
||||
myModalKey: 'FtnPlcFormPop',
|
||||
modalDataKey: 'modalData3',
|
||||
@ -285,26 +296,47 @@ export default {
|
||||
});
|
||||
},
|
||||
async getGridData() {
|
||||
this.loadGrid = false;
|
||||
// this.loadGrid = false;
|
||||
|
||||
const res = await this.postApiReturn({
|
||||
apiKey: 'selectEccBaseInfo',
|
||||
resKey: 'eccBaseInfoData',
|
||||
sendParam: {
|
||||
blocId: this.myBindingData.blocId,
|
||||
eqpmYn: '0',
|
||||
search: this.searchWord,
|
||||
},
|
||||
});
|
||||
// const res = await this.postApiReturn({
|
||||
// apiKey: 'selectEccBaseInfo',
|
||||
// resKey: 'eccBaseInfoData',
|
||||
// sendParam: {
|
||||
// blocId: this.myBindingData.blocId,
|
||||
// eqpmYn: '0',
|
||||
// search: this.searchWord,
|
||||
// },
|
||||
// });
|
||||
|
||||
const setTreeData = await this.setTree({
|
||||
gridKey: this.gridNameTree,
|
||||
treeKey: 'ECC_ID',
|
||||
value: res.map(item => ({
|
||||
// const setTreeData = await this.setTree({
|
||||
// gridKey: this.gridNameTree,
|
||||
// treeKey: 'ECC_ID',
|
||||
// value: res.map(item => ({
|
||||
// ...item,
|
||||
// eccNm: item.eccNm,
|
||||
// })),
|
||||
// });
|
||||
|
||||
//mockdata eccNm
|
||||
|
||||
|
||||
let res = [
|
||||
{ ECC_ID: 'ECC001', eccNm: '서울 본사', iconShow: false, align: 'center' },
|
||||
{ ECC_ID: 'ECC002', eccNm: '부산 지사', useIcon: false, align: 'center' },
|
||||
{ ECC_ID: 'ECC003', eccNm: '대구 센터', useIcon: false, align: 'center' },
|
||||
{ ECC_ID: 'ECC004', eccNm: '광주 사무소' , useIcon: false, align: 'center'},
|
||||
{ ECC_ID: 'ECC005', eccNm: '인천 물류창고' , useIcon: false, align: 'center'},
|
||||
];
|
||||
|
||||
|
||||
const setTreeData = {
|
||||
ROOT: res.map(item => ({
|
||||
...item,
|
||||
eccNm: item.eccNm,
|
||||
})),
|
||||
});
|
||||
}))
|
||||
};
|
||||
|
||||
console.log(res);
|
||||
|
||||
this.setModalGridData({
|
||||
modalKey: this.myModalKey,
|
||||
|
||||
@ -1,268 +1,195 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- <v-btn :ripple="false" @click="dialog = !dialog">경고창</v-btn> -->
|
||||
<v-dialog
|
||||
v-model="dialog"
|
||||
width="700"
|
||||
overlay-color="#000"
|
||||
overlay-opacity="0.8"
|
||||
>
|
||||
<v-dialog v-model="dialog" width="800" overlay-color="#000" overlay-opacity="0.8">
|
||||
<v-card>
|
||||
<v-toolbar
|
||||
<v-card-title class="px-6 py-4 d-flex align-center justify-space-between">
|
||||
<span class="custom-title-4">{{ label }}</span>
|
||||
<a-button icon="close" type="text" @click="dialog = !dialog"></a-button>
|
||||
</v-card-title>
|
||||
<!-- <v-toolbar
|
||||
:color="isDarkMode ? '#2d3355' : '#3f4d7d'"
|
||||
class="py-4 pr-3 pl-5"
|
||||
height="auto"
|
||||
>
|
||||
<v-toolbar-title>{{ label }}</v-toolbar-title>
|
||||
<!-- <v-btn
|
||||
icon
|
||||
tile
|
||||
small
|
||||
:ripple="false"
|
||||
@click="dialog = !dialog"
|
||||
:style="{ backgroundColor: isDarkMode ? '#2d3355' : '#3f4d7d' }"
|
||||
>
|
||||
<v-icon>mdi-close</v-icon>
|
||||
</v-btn> -->
|
||||
</v-toolbar>
|
||||
</v-toolbar> -->
|
||||
<!-- <v-card-title>
|
||||
일정 상세 내용
|
||||
</v-card-title> -->
|
||||
<!-- <template v-for="(item, index) in detailList"> -->
|
||||
<template>
|
||||
<div style="padding : 20px">
|
||||
<div class="pa-6 pt-0">
|
||||
<v-row no-gutters class="mb-4">
|
||||
<v-col :cols="12">
|
||||
<v-row>
|
||||
<v-col :cols="3">
|
||||
<v-row class="search-box" align="center" no-gutters>
|
||||
<label class="search-box-label">
|
||||
<v-icon x-small color="#fb8200" class="mr-1"
|
||||
>mdi-record-circle</v-icon
|
||||
>
|
||||
<v-icon small :class="['mr-1', 'icon-orange']">$icoBulletPoint</v-icon>
|
||||
일정 시작
|
||||
</label>
|
||||
</v-row>
|
||||
</v-col>
|
||||
<v-col :cols="4">
|
||||
<v-col :cols="6" class="py-0 pr-2">
|
||||
<!-- <DatePicker v-model="strtDt" :parentPrgmId="parentPrgmId"/> -->
|
||||
<div class="startpicker-container2">
|
||||
<v-text-field
|
||||
id="startpicker2"
|
||||
ref="startpicker2"
|
||||
v-model="strtDt"
|
||||
:class="'v-input__custom'"
|
||||
:hide-details="true"
|
||||
readonly
|
||||
outlined
|
||||
>
|
||||
<v-text-field id="startpicker2" ref="startpicker2" v-model="strtDt"
|
||||
:class="'v-input__custom'" :hide-details="true" readonly outlined>
|
||||
<template #append>
|
||||
<v-icon size="20">$icoCalendar</v-icon>
|
||||
</template>
|
||||
<template #append-outer>
|
||||
<div
|
||||
ref="startpicker-container2"
|
||||
id="startpicker-container2"
|
||||
></div>
|
||||
<div ref="startpicker-container2" id="startpicker-container2"></div>
|
||||
</template>
|
||||
</v-text-field>
|
||||
</div>
|
||||
</v-col>
|
||||
<v-col :cols="2">
|
||||
<vue-numeric-input
|
||||
v-model="strtHh"
|
||||
:min="0"
|
||||
:max="23"
|
||||
controls-type="updown"
|
||||
class="v-input__slot"
|
||||
width="100%"
|
||||
align="center"
|
||||
>
|
||||
<v-col :cols="6" class="py-0 pl-2">
|
||||
<!-- <DatePicker v-model="strtDt" :parentPrgmId="parentPrgmId"/> -->
|
||||
<div class="startpicker-container2">
|
||||
<v-text-field id="startpicker2" ref="startpicker2" v-model="strtDt"
|
||||
:class="'v-input__custom'" :hide-details="true" readonly outlined>
|
||||
<template #append>
|
||||
<v-icon size="20">$icoCalendar</v-icon>
|
||||
</template>
|
||||
<template #append-outer>
|
||||
<div ref="startpicker-container2" id="startpicker-container2"></div>
|
||||
</template>
|
||||
</v-text-field>
|
||||
</div>
|
||||
</v-col>
|
||||
<!-- <v-col :cols="2">
|
||||
<vue-numeric-input v-model="strtHh" :min="0" :max="23" controls-type="updown"
|
||||
class="v-input__slot" width="100%" align="center">
|
||||
</vue-numeric-input>
|
||||
</v-col>
|
||||
<v-col :cols="1" style="text-align: center;">
|
||||
:
|
||||
</v-col>
|
||||
<v-col :cols="2">
|
||||
<vue-numeric-input
|
||||
v-model="strtMm"
|
||||
:min="0"
|
||||
:max="59"
|
||||
controls-type="updown"
|
||||
class="v-input__slot"
|
||||
width="100%"
|
||||
align="center"
|
||||
>
|
||||
<vue-numeric-input v-model="strtMm" :min="0" :max="59" controls-type="updown"
|
||||
class="v-input__slot" width="100%" align="center">
|
||||
</vue-numeric-input>
|
||||
</v-col>
|
||||
</v-col> -->
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-col :cols="3">
|
||||
<v-row class="search-box" align="center" no-gutters>
|
||||
<v-row no-gutters class="mb-4">
|
||||
<v-col :cols="12">
|
||||
<label class="search-box-label">
|
||||
<v-icon x-small color="#fb8200" class="mr-1"
|
||||
>mdi-record-circle</v-icon
|
||||
>
|
||||
<v-icon small :class="['mr-1', 'icon-orange']">$icoBulletPoint</v-icon>
|
||||
일정 종료
|
||||
</label>
|
||||
</v-row>
|
||||
</v-col>
|
||||
<v-col :cols="4">
|
||||
<v-col :cols="6" class="pr-2">
|
||||
<!-- <DatePicker v-model="endDt" :parentPrgmId="parentPrgmId"/> -->
|
||||
<div class="startpicker-container3">
|
||||
<v-text-field
|
||||
id="startpicker3"
|
||||
ref="startpicker3"
|
||||
v-model="endDt"
|
||||
:class="'v-input__custom'"
|
||||
:hide-details="true"
|
||||
readonly
|
||||
outlined
|
||||
>
|
||||
<v-text-field id="startpicker3" ref="startpicker3" v-model="endDt"
|
||||
:class="'v-input__custom'" :hide-details="true" readonly outlined>
|
||||
<template #append>
|
||||
<v-icon size="20">$icoCalendar</v-icon>
|
||||
</template>
|
||||
<template #append-outer>
|
||||
<div
|
||||
ref="startpicker-container3"
|
||||
id="startpicker-container3"
|
||||
></div>
|
||||
<div ref="startpicker-container3" id="startpicker-container3"></div>
|
||||
</template>
|
||||
</v-text-field>
|
||||
</div>
|
||||
</v-col>
|
||||
<v-col :cols="2">
|
||||
<vue-numeric-input
|
||||
v-model="endHh"
|
||||
:min="0"
|
||||
:max="23"
|
||||
controls-type="updown"
|
||||
class="v-input__slot"
|
||||
width="100%"
|
||||
align="center"
|
||||
>
|
||||
<v-col :cols="6" class="pl-2">
|
||||
<div class="startpicker-container3">
|
||||
<v-text-field id="startpicker3" ref="startpicker3" v-model="endDt"
|
||||
:class="'v-input__custom'" :hide-details="true" readonly outlined>
|
||||
<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 :cols="2">
|
||||
<vue-numeric-input v-model="endHh" :min="0" :max="23" controls-type="updown"
|
||||
class="v-input__slot" width="100%" align="center">
|
||||
</vue-numeric-input>
|
||||
</v-col>
|
||||
<v-col :cols="1" style="text-align: center;">
|
||||
:
|
||||
</v-col>
|
||||
<v-col :cols="2">
|
||||
<vue-numeric-input
|
||||
v-model="endMm"
|
||||
:min="0"
|
||||
:max="59"
|
||||
controls-type="updown"
|
||||
class="v-input__slot"
|
||||
width="100%"
|
||||
align="center"
|
||||
>
|
||||
<vue-numeric-input v-model="endMm" :min="0" :max="59" controls-type="updown"
|
||||
class="v-input__slot" width="100%" align="center">
|
||||
</vue-numeric-input>
|
||||
</v-col>
|
||||
</v-col> -->
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-col :cols="3">
|
||||
<v-row class="search-box" align="center" no-gutters>
|
||||
<v-row no-gutters class="mb-4">
|
||||
<v-col :cols="12">
|
||||
<label class="search-box-label">
|
||||
<v-icon x-small color="#fb8200" class="mr-1"
|
||||
>mdi-record-circle</v-icon
|
||||
>
|
||||
<v-icon small :class="['mr-1', 'icon-orange']">$icoBulletPoint</v-icon>
|
||||
일정 제목
|
||||
</label>
|
||||
</v-row>
|
||||
</v-col>
|
||||
<v-col :cols="9">
|
||||
<v-text-field
|
||||
v-model="planTitle"
|
||||
class="v-input__custom"
|
||||
outlined
|
||||
:hide-details="true"
|
||||
></v-text-field>
|
||||
<v-col :cols="12" class="py-0">
|
||||
<v-text-field v-model="planTitle" class="v-input__custom" outlined
|
||||
:hide-details="true"></v-text-field>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-col :cols="3">
|
||||
<v-row class="search-box" align="center" no-gutters>
|
||||
<v-row no-gutters class="mb-4">
|
||||
<v-col :cols="12">
|
||||
<label class="search-box-label">
|
||||
<v-icon x-small color="#fb8200" class="mr-1"
|
||||
>mdi-record-circle</v-icon
|
||||
>
|
||||
<v-icon small :class="['mr-1', 'icon-orange']">$icoBulletPoint</v-icon>
|
||||
일정 상세 내용
|
||||
</label>
|
||||
</v-row>
|
||||
</v-col>
|
||||
<v-col :cols="9">
|
||||
<v-textarea
|
||||
v-model="planCntn"
|
||||
class="v-input__custom"
|
||||
outlined
|
||||
:hide-details="true"
|
||||
:maxlength="1000"
|
||||
></v-textarea>
|
||||
<v-col :cols="12" class="py-0">
|
||||
<v-textarea v-model="planCntn" class="v-input__custom" outlined :hide-details="true"
|
||||
:maxlength="1000"></v-textarea>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-col :cols="3">
|
||||
<v-row class="search-box" align="center" no-gutters>
|
||||
<v-icon x-small color="#fb8200" class="mr-1"
|
||||
>mdi-record-circle</v-icon
|
||||
>
|
||||
<v-row no-gutters class="mb-4">
|
||||
<v-col :cols="12">
|
||||
<label class="search-box-label">
|
||||
<v-icon small :class="['mr-1', 'icon-orange']">$icoBulletPoint</v-icon>
|
||||
표시 색상
|
||||
</v-row>
|
||||
</label>
|
||||
|
||||
</v-col>
|
||||
<v-col :cols="1">
|
||||
<div
|
||||
id="redDiv"
|
||||
class="colPk redBg"
|
||||
@click="colorClick('red')"
|
||||
></div>
|
||||
</v-col>
|
||||
<v-col :cols="1">
|
||||
<div
|
||||
id="blueDiv"
|
||||
class="colPk blueBg"
|
||||
@click="colorClick('blue')"
|
||||
></div>
|
||||
</v-col>
|
||||
<v-col :cols="1">
|
||||
<div
|
||||
id="pupleDiv"
|
||||
class="colPk pupleBg"
|
||||
@click="colorClick('puple')"
|
||||
></div>
|
||||
</v-col>
|
||||
<v-col :cols="1">
|
||||
<div
|
||||
id="greenDiv"
|
||||
class="colPk greenBg"
|
||||
@click="colorClick('green')"
|
||||
></div>
|
||||
</v-col>
|
||||
<v-col :cols="1">
|
||||
<div
|
||||
id="orangeDiv"
|
||||
class="colPk orangeBg"
|
||||
@click="colorClick('orange')"
|
||||
></div>
|
||||
</v-col>
|
||||
<v-col :cols="1">
|
||||
<div
|
||||
id="pinkDiv"
|
||||
class="colPk pinkBg"
|
||||
@click="colorClick('pink')"
|
||||
></div>
|
||||
<v-col :cols="6">
|
||||
<div class="d-flex calendar-color" style="gap:16px">
|
||||
|
||||
<div id="redDiv" class="colPk redBg" @click="colorClick('red')">
|
||||
<div class="inner-color"></div>
|
||||
</div>
|
||||
|
||||
<div id="blueDiv" class="colPk blueBg" @click="colorClick('blue')">
|
||||
<div class="inner-color"></div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="pupleDiv" class="colPk pupleBg" @click="colorClick('puple')">
|
||||
<div class="inner-color"></div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="greenDiv" class="colPk greenBg" @click="colorClick('green')">
|
||||
<div class="inner-color"></div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="orangeDiv" class="colPk orangeBg" @click="colorClick('orange')">
|
||||
<div class="inner-color"></div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="pinkDiv" class="colPk pinkBg" @click="colorClick('pink')">
|
||||
<div class="inner-color"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-col>
|
||||
</div>
|
||||
</template>
|
||||
<v-card-actions class="justify-end">
|
||||
<v-btn :ripple="false" @click="btnAction('save')">저장</v-btn>
|
||||
<v-btn
|
||||
v-show="popUpAction === 'update'"
|
||||
:ripple="false"
|
||||
@click="btnAction('delete')"
|
||||
>삭제</v-btn
|
||||
>
|
||||
<v-btn :ripple="false" @click="btnAction('close')">닫기</v-btn>
|
||||
<a-button :ripple="false" @click="btnAction('save')" class="mr-2">저장</a-button>
|
||||
<a-button v-show="popUpAction === 'update'" type="danger" ghost danger :ripple="false"
|
||||
@click="btnAction('delete')" class="mr-2">삭제</a-button>
|
||||
<a-button :ripple="false" type="primary" @click="btnAction('close')" class="mr-2">닫기</a-button>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
@ -786,46 +713,80 @@ export default {
|
||||
.v-card__actions {
|
||||
padding-bottom: 30px !important;
|
||||
}
|
||||
|
||||
.inner-color {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.colPk {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
text-align: center;
|
||||
border-radius: 5px 5px;
|
||||
border-radius: 6px 6px;
|
||||
cursor: pointer;
|
||||
padding: 4px
|
||||
}
|
||||
|
||||
.colPkSelect {
|
||||
border: 2px solid;
|
||||
border: 1px solid #00000073;
|
||||
}
|
||||
.redBg {
|
||||
|
||||
.redBg .inner-color {
|
||||
background-color: rgba(229, 62, 62, var(--bg-opacity));
|
||||
background-color: #e53e3e;
|
||||
background-color: #FF4D4F;
|
||||
}
|
||||
.blueBg {
|
||||
|
||||
.blueBg .inner-color {
|
||||
background-color: rgba(66, 153, 225, var(--bg-opacity));
|
||||
background-color: #4299e1;
|
||||
background-color: #597EF7;
|
||||
}
|
||||
.pupleBg {
|
||||
|
||||
.pupleBg .inner-color {
|
||||
background-color: rgba(102, 126, 234, var(--bg-opacity));
|
||||
background-color: #667eea;
|
||||
background-color: #9254DE;
|
||||
}
|
||||
.greenBg {
|
||||
|
||||
.greenBg .inner-color {
|
||||
background-color: rgba(56, 178, 172, var(--bg-opacity));
|
||||
background-color: #38b2ac;
|
||||
background-color: #73D13D;
|
||||
}
|
||||
.orangeBg {
|
||||
|
||||
.orangeBg .inner-color {
|
||||
background-color: rgba(237, 137, 54, var(--bg-opacity));
|
||||
background-color: #ed8936;
|
||||
background-color: #FFA940;
|
||||
}
|
||||
.pinkBg {
|
||||
|
||||
.pinkBg .inner-color {
|
||||
background-color: rgba(237, 100, 166, var(--bg-opacity));
|
||||
background-color: #ed64a6;
|
||||
background-color: #F759AB;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.v-input__custom {
|
||||
|
||||
|
||||
&.half {
|
||||
width: calc(50% - 20px);
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep {
|
||||
.tui-timepicker-row {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
background-color: #edf4fc;
|
||||
|
||||
.tui-timepicker-column.tui-timepicker-colon {
|
||||
color: #000 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.startpicker-container2 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
|
||||
.v-input {
|
||||
@ -844,10 +805,8 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.startpicker-container3 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
|
||||
.v-input {
|
||||
@ -865,21 +824,5 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.v-input__custom {
|
||||
flex: 0 0 auto;
|
||||
&.half {
|
||||
width: calc(50% - 20px);
|
||||
}
|
||||
}
|
||||
::v-deep {
|
||||
.tui-timepicker-row {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
background-color: #edf4fc;
|
||||
.tui-timepicker-column.tui-timepicker-colon {
|
||||
color: #000 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,86 +1,60 @@
|
||||
<template>
|
||||
<v-row class="search-box" align="center" no-gutters>
|
||||
<v-row class="search-box" align="center">
|
||||
<!-- <v-col v-if="label" cols="2"> -->
|
||||
<v-col v-if="label" :cols="labelCols">
|
||||
<v-col v-if="item.label" :cols="item.labelCols" class="py-0">
|
||||
<label for="" class="search-box-label">
|
||||
<v-icon
|
||||
x-small
|
||||
:color="item.required ? '#fb8200' : 'primary'"
|
||||
class="mr-1"
|
||||
>mdi-record-circle</v-icon
|
||||
>
|
||||
<v-icon v-if="item.iconShow" small
|
||||
:class="['mr-1', item.required ? 'icon-orange' : 'icon-blue']">$icoBulletPoint</v-icon>
|
||||
{{ item.label }}
|
||||
</label>
|
||||
</v-col>
|
||||
<v-col :cols="label ? textCols : ''">
|
||||
<v-col :cols="item.label ? item.textCols : ''" class="py-0">
|
||||
<!-- <v-col :cols="label ? 9 : ''"> -->
|
||||
<!-- :value="textfield" -->
|
||||
<v-text-field
|
||||
readonly
|
||||
v-model="selectValue"
|
||||
append-icon="mdi-magnify"
|
||||
class="v-input__custom"
|
||||
@click="dialog = !dialog"
|
||||
outlined
|
||||
:hide-details="true"
|
||||
:disabled="item.disabled || false"
|
||||
:required="item.required || false"
|
||||
></v-text-field>
|
||||
<v-text-field readonly v-model="selectValue" append-icon="" class="v-input__custom"
|
||||
@click="dialog = !dialog" outlined :hide-details="true" :disabled="item.disabled || false"
|
||||
:required="item.required || false"><template v-slot:append>
|
||||
<!-- Custom SVG icon -->
|
||||
<v-icon>$icoSearch</v-icon>
|
||||
|
||||
|
||||
</template></v-text-field>
|
||||
</v-col>
|
||||
|
||||
<!-- <v-row justify="center"> -->
|
||||
<v-dialog
|
||||
ref="popModal"
|
||||
v-model="dialog"
|
||||
width="600"
|
||||
overlay-color="#000"
|
||||
overlay-opacity="0.8"
|
||||
scrollable
|
||||
>
|
||||
<v-dialog v-model="dialog" width="800px" scrollable>
|
||||
<!-- <template v-slot:activator="{ on, attrs }">
|
||||
<v-btn color="primary" dark v-bind="attrs" v-on="on">공정/설비</v-btn>
|
||||
</template> -->
|
||||
<v-card style="height: 100%">
|
||||
<v-card-title
|
||||
class="v-card__title d-flex align-center justify-space-between"
|
||||
>
|
||||
<v-card-title class="px-6 py-4 d-flex align-center justify-space-between">
|
||||
<span class="custom-title-4">{{ item.label }}</span>
|
||||
<v-btn icon tile :ripple="false" @click="dialog = !dialog">
|
||||
<v-icon>mdi-close</v-icon>
|
||||
</v-btn>
|
||||
<a-button icon="close" type="text" @click="dialog = false"></a-button>
|
||||
</v-card-title>
|
||||
<!-- <v-card-actions> -->
|
||||
<div class="pa-5">
|
||||
<div class="pa-6 pt-0">
|
||||
<!-- <v-text-field label="위치정보 선택"></v-text-field> -->
|
||||
<v-row align="center" no-gutters>
|
||||
<v-col v-if="label" cols="3">
|
||||
<v-row align="center">
|
||||
<v-col v-if="label" cols="12" class="py-0">
|
||||
<label for="" class="search-box-label">
|
||||
<v-icon x-small color="primary" class="mr-1"
|
||||
>mdi-record-circle</v-icon
|
||||
>
|
||||
<v-icon small :class="['mr-1', 'icon-blue']">$icoBulletPoint</v-icon>
|
||||
{{ item.label }}
|
||||
</label>
|
||||
</v-col>
|
||||
<v-col :cols="label ? 6 : ''">
|
||||
<v-col :cols="label ? 8 : ''" class="py-0">
|
||||
<!-- :value="textfield" -->
|
||||
<v-text-field
|
||||
append-icon="mdi-magnify"
|
||||
class="v-input__custom"
|
||||
outlined
|
||||
:hide-details="true"
|
||||
v-model="searchWord"
|
||||
@keyup.enter="typeEnterKey"
|
||||
></v-text-field>
|
||||
<v-text-field append-icon="" class="v-input__custom" outlined :hide-details="true"
|
||||
v-model="searchWord" @keyup.enter="typeEnterKey"><template v-slot:append>
|
||||
<!-- Custom SVG icon -->
|
||||
<v-icon>$icoSearch</v-icon>
|
||||
|
||||
|
||||
</template></v-text-field>
|
||||
</v-col>
|
||||
<v-spacer></v-spacer>
|
||||
<v-col cols="3" class="text-right">
|
||||
<v-btn :ripple="false" icon tile @click="btnTreeExpand()">
|
||||
<!-- {{ treeExpand }} -->
|
||||
<v-icon
|
||||
size="30"
|
||||
v-text="treeExpandAll ? 'mdi-chevron-up' : 'mdi-chevron-down'"
|
||||
></v-icon>
|
||||
</v-btn>
|
||||
<!-- <v-spacer></v-spacer> -->
|
||||
<v-col cols="2" class="text-right">
|
||||
<a-button icon="search" type="primary" @click="search()" class="search-button">조회</a-button>
|
||||
|
||||
<!-- <v-btn color="primary" dark>펼치기</v-btn> -->
|
||||
<!-- <v-btn color="primary" dark>접기</v-btn> -->
|
||||
<!-- <v-btn :ripple="false">초기화</v-btn> -->
|
||||
@ -88,6 +62,10 @@
|
||||
<v-btn v-if="!searchParam.isMulti" :ripple="false" @click="search()">검색</v-btn> -->
|
||||
<!-- as-is 롤 봐도 초기화가 하는 기능을 모르겠음.. -->
|
||||
</v-col>
|
||||
<v-col cols="2" class="text-right"><a-button class="expand-btn" :ripple="false" @click="btnTreeExpand()">
|
||||
<v-icon small>$icoExpandAlt</v-icon>
|
||||
Expand All
|
||||
</a-button></v-col>
|
||||
</v-row>
|
||||
|
||||
<!-- <v-btn color="primary" dark @click="btnTreeExpand()">{{
|
||||
@ -98,45 +76,23 @@
|
||||
<!-- <v-btn color="primary" dark>초기화</v-btn> -->
|
||||
<!-- as-is 롤 봐도 초기화가 하는 기능을 모르겠음.. -->
|
||||
</div>
|
||||
<!-- </v-card-actions> -->
|
||||
<v-divider></v-divider>
|
||||
|
||||
<v-card-text>
|
||||
<div ref="treeGridParent" style="height: 500px">
|
||||
<component
|
||||
:ref="'treeGrid' + parentPrgmId"
|
||||
:is="loadGrid && dialog ? 'Grid' : null"
|
||||
:gridName="gridNameTree"
|
||||
:dataPath="searchParam.modalData.selectReadObjListTree"
|
||||
:parentPrgmId="parentPrgmId"
|
||||
:bindingData="bindingData"
|
||||
@getRowsData="getRowData"
|
||||
@dblClick="setUpdate()"
|
||||
/>
|
||||
<div ref="treeGridParent" style="height: 450px">
|
||||
<component :ref="'treeGrid' + parentPrgmId" :is="loadGrid && dialog ? 'Grid' : null"
|
||||
:gridName="gridNameTree" :dataPath="searchParam.modalData.selectReadObjListTree"
|
||||
:parentPrgmId="parentPrgmId" :bindingData="bindingData" @getRowsData="getRowData"
|
||||
@dblClick="setUpdate()" />
|
||||
</div>
|
||||
<!-- <component
|
||||
:is="ftnPlcListTreeData.length > 0 ? 'Tree' : null"
|
||||
:tree-data="ftnPlcListTreeData"
|
||||
/> -->
|
||||
</v-card-text>
|
||||
<v-divider></v-divider>
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn color="primary" dark @click="setUpdate()">확인</v-btn>
|
||||
<v-btn color="primary" dark @click="dialog = false">닫기</v-btn>
|
||||
<!-- <v-btn
|
||||
color="green darken-1"
|
||||
text
|
||||
@click="dialog = false"
|
||||
>
|
||||
Disagree
|
||||
</v-btn>
|
||||
<v-btn
|
||||
color="green darken-1"
|
||||
text
|
||||
@click="dialog = false"
|
||||
>
|
||||
Agree
|
||||
</v-btn> -->
|
||||
|
||||
<v-card-actions class="px-6 py-4 d-flex align-center justify-end">
|
||||
<a-button :ripple="false" @click="dialog = false" class="mr-2">닫기</a-button>
|
||||
<a-button :ripple="false" type="primary" @click="setUpdate($event)">확인</a-button>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
@ -308,10 +264,21 @@ export default {
|
||||
gridKey: this.gridNameTree,
|
||||
modalDataKey: this.modalDataKey,
|
||||
value: [
|
||||
{
|
||||
header: '',
|
||||
name: '',
|
||||
align: 'center',
|
||||
width: 50,
|
||||
formatter: (props) => {
|
||||
return `<label class="custom-radio">
|
||||
<span class="radio-mark"></span>
|
||||
</label>`;
|
||||
}
|
||||
},
|
||||
{
|
||||
header: '검침개소명',
|
||||
name: 'readPlcNm',
|
||||
width: 370,
|
||||
width: 300,
|
||||
align: 'left',
|
||||
},
|
||||
{ header: '검침개소', name: 'name', align: 'center' },
|
||||
@ -343,6 +310,10 @@ export default {
|
||||
treeColumnOptions: {
|
||||
name: 'readPlcNm',
|
||||
},
|
||||
header: {
|
||||
height: 37,
|
||||
},
|
||||
rowHeight: 'auto',
|
||||
};
|
||||
if (this.searchParam.isMulti) {
|
||||
myOptionsTree['rowHeaders'] = [{ type: 'checkbox' }];
|
||||
@ -381,6 +352,8 @@ export default {
|
||||
})),
|
||||
});
|
||||
// this.treeData = setTreeData;
|
||||
|
||||
|
||||
this.setModalGridData({
|
||||
modalKey: this.myModalKey,
|
||||
gridKey: this.gridNameTree,
|
||||
@ -520,33 +493,9 @@ const selectReadObjListTree = {
|
||||
}
|
||||
}
|
||||
|
||||
.tui-grid-cell.tui-grid-cell-has-tree
|
||||
.tui-grid-tree-extra-content
|
||||
+ .tui-grid-cell-content:before {
|
||||
.tui-grid-cell.tui-grid-cell-has-tree .tui-grid-tree-extra-content+.tui-grid-cell-content:before {
|
||||
content: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@each $theme in dark, light {
|
||||
.v-application.#{$theme}-mode {
|
||||
.v-dialog {
|
||||
.v-card {
|
||||
&__title {
|
||||
color: map-deep-get($color, 'white', '0');
|
||||
@if $theme == dark {
|
||||
background-color: #2d3355;
|
||||
.v-btn {
|
||||
background-color: #2d3355;
|
||||
}
|
||||
} @else {
|
||||
background-color: #3f4d7d;
|
||||
.v-btn {
|
||||
background-color: #3f4d7d;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -52,8 +52,8 @@
|
||||
<v-row align="center">
|
||||
<v-col :cols="3" style="width: 100%">
|
||||
<label for="" class="search-box-label">
|
||||
<v-icon x-small :color="'primary'" class="mr-1"
|
||||
>mdi-record-circle</v-icon
|
||||
<v-icon small :color="'primary'" class="mr-1 icon-blue"
|
||||
>$icoBulletPoint</v-icon
|
||||
>
|
||||
TAG명
|
||||
</label>
|
||||
@ -69,12 +69,7 @@
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
<v-col :cols="1" style="width: 100%" class="text-right">
|
||||
<v-btn
|
||||
icon
|
||||
tile
|
||||
:ripple="false"
|
||||
@click="dialogOpenCloseEvent(dialog)"
|
||||
>
|
||||
<v-btn icon tile :ripple="false" @click="dialogOpenCloseEvent(dialog)">
|
||||
<v-icon>mdi-close</v-icon>
|
||||
</v-btn>
|
||||
</v-col>
|
||||
@ -93,10 +88,7 @@
|
||||
<div :style="'height: 550px'" ref="modalGridDiv">
|
||||
<!-- <div :style="'height: 50vh'" ref="modalGridDiv"> -->
|
||||
<!-- <div :style="'height: calc(50%)'"> -->
|
||||
<div
|
||||
class="d-flex align-center justify-space-between pa-4"
|
||||
style="height: 10%"
|
||||
>
|
||||
<div class="d-flex align-center justify-space-between pa-4" style="height: 10%">
|
||||
<v-card-title class="pa-0 custom-title-4">TAG 리스트</v-card-title>
|
||||
</div>
|
||||
<!-- <div id="chartParent" ref="chartParent" :style="'height: 80%'"> -->
|
||||
@ -115,9 +107,7 @@
|
||||
<v-divider></v-divider>
|
||||
<v-card-actions class="pa-5 d-flex align-center justify-center">
|
||||
<v-btn color="primary" dark @click="setUpdate()">확인</v-btn>
|
||||
<v-btn color="primary" dark @click="dialogOpenCloseEvent(dialog)"
|
||||
>취소</v-btn
|
||||
>
|
||||
<v-btn color="primary" dark @click="dialogOpenCloseEvent(dialog)">취소</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
@ -125,35 +115,35 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapMutations, mapActions } from 'vuex';
|
||||
import Grid from '~/components/common/Grid';
|
||||
import Utility from '~/plugins/utility';
|
||||
import selectCodeList from '@/components/common/select/selectCodeList';
|
||||
import InputText from '~/components/common/input/InputText';
|
||||
import Chart from '~/components/common/Chart';
|
||||
import SelectBox from '@/components/common/select/SelectBox';
|
||||
import { mapState, mapMutations, mapActions } from "vuex";
|
||||
import Grid from "~/components/common/Grid";
|
||||
import Utility from "~/plugins/utility";
|
||||
import selectCodeList from "@/components/common/select/selectCodeList";
|
||||
import InputText from "~/components/common/input/InputText";
|
||||
import Chart from "~/components/common/Chart";
|
||||
import SelectBox from "@/components/common/select/SelectBox";
|
||||
|
||||
export default {
|
||||
props: {
|
||||
parentPrgmId: {
|
||||
type: String,
|
||||
require: true,
|
||||
default: '비교대상 최대(20개)',
|
||||
default: "비교대상 최대(20개)",
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
require: false,
|
||||
default: '전력 계약 정보',
|
||||
default: "전력 계약 정보",
|
||||
},
|
||||
valueNm: {
|
||||
type: String,
|
||||
require: false,
|
||||
default: '',
|
||||
default: "",
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
require: false,
|
||||
default: '전력 계약 목록',
|
||||
default: "전력 계약 목록",
|
||||
},
|
||||
labelCols: {
|
||||
type: Number,
|
||||
@ -185,9 +175,9 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
labelPrepend: true,
|
||||
gridName: 'grid_01',
|
||||
myModalKey: 'tagTrndPop',
|
||||
modalDataKey: 'tagTrndPopModalData',
|
||||
gridName: "grid_01",
|
||||
myModalKey: "tagTrndPop",
|
||||
modalDataKey: "tagTrndPopModalData",
|
||||
// gridName: 'rowElecContGrid',
|
||||
loadChart: false,
|
||||
// selectedTargetMonth: 'all',
|
||||
@ -198,11 +188,11 @@ export default {
|
||||
selectValueList02: [],
|
||||
selectValue03: null,
|
||||
selectValueList03: [],
|
||||
searchWord: '',
|
||||
searchWord: "",
|
||||
loadGrid: false,
|
||||
initFlag: false,
|
||||
selectedData: {},
|
||||
totalSelectedTags: '',
|
||||
totalSelectedTags: "",
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
@ -214,18 +204,16 @@ export default {
|
||||
myBindingData(state) {
|
||||
//return state.pageData[this.parentPrgmId]["rowGridSelectData"];
|
||||
if (!this.bindingData) {
|
||||
return state.pageData[this.parentPrgmId]['rowGridSelectData'];
|
||||
return state.pageData[this.parentPrgmId]["rowGridSelectData"];
|
||||
} else {
|
||||
return state.pageData[this.parentPrgmId][this.bindingData][
|
||||
'rowGridSelectData'
|
||||
];
|
||||
return state.pageData[this.parentPrgmId][this.bindingData]["rowGridSelectData"];
|
||||
}
|
||||
},
|
||||
// chkTotalSelectedTags(state) {
|
||||
// return state.pageData[this.parentPrgmId]['totalSelectedTags'];
|
||||
// }
|
||||
chkTotalSelectedTags(state) {
|
||||
return this.searchParam['totalSelectedTags'];
|
||||
return this.searchParam["totalSelectedTags"];
|
||||
},
|
||||
}),
|
||||
chkDialog() {
|
||||
@ -280,14 +268,14 @@ export default {
|
||||
},
|
||||
|
||||
beforeCreate() {
|
||||
this.$store.commit('setPageData', {
|
||||
this.$store.commit("setPageData", {
|
||||
tagTrndPopModalData: { tagTrndPop },
|
||||
});
|
||||
},
|
||||
async created() {
|
||||
await this.setSelectValueList01();
|
||||
await this.setSelectValueList02();
|
||||
await this.setSelectValueList03();
|
||||
// await this.setSelectValueList01();
|
||||
// await this.setSelectValueList02();
|
||||
// await this.setSelectValueList03();
|
||||
this.init();
|
||||
// if(this.searchParam.isMulti == true){
|
||||
// this.setPageData({
|
||||
@ -301,13 +289,13 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
...mapMutations({
|
||||
setPageData: 'setPageData',
|
||||
setModalGridData: 'setModalGridData',
|
||||
setModalGridColumn: 'setModalGridColumn',
|
||||
setModalGridOption: 'setModalGridOption',
|
||||
setPageData: "setPageData",
|
||||
setModalGridData: "setModalGridData",
|
||||
setModalGridColumn: "setModalGridColumn",
|
||||
setModalGridOption: "setModalGridOption",
|
||||
}),
|
||||
...mapActions({
|
||||
postApiReturn: 'modules/list/postApiReturn',
|
||||
postApiReturn: "modules/list/postApiReturn",
|
||||
}),
|
||||
async init() {
|
||||
// this.setChart();
|
||||
@ -317,8 +305,8 @@ export default {
|
||||
},
|
||||
async setSelectValueList01() {
|
||||
let res = await this.postApiReturn({
|
||||
apiKey: 'selectEqpmKindCodeList',
|
||||
resKey: 'eqpmKindCodeLists',
|
||||
apiKey: "selectEqpmKindCodeList",
|
||||
resKey: "eqpmKindCodeLists",
|
||||
sendParam: {},
|
||||
});
|
||||
|
||||
@ -328,7 +316,7 @@ export default {
|
||||
// });
|
||||
|
||||
if (res.length > 0) {
|
||||
this.selectValueList01 = await res.map(item => {
|
||||
this.selectValueList01 = await res.map((item) => {
|
||||
return {
|
||||
text: item.eqpmKindNm,
|
||||
value: item.eqpmKindId,
|
||||
@ -345,12 +333,12 @@ export default {
|
||||
},
|
||||
async setSelectValueList02() {
|
||||
let res = await this.postApiReturn({
|
||||
apiKey: 'selectEqpmGrpCodeList',
|
||||
resKey: 'eqpmGrpCodeLists',
|
||||
apiKey: "selectEqpmGrpCodeList",
|
||||
resKey: "eqpmGrpCodeLists",
|
||||
sendParam: { eqpmKindId: this.selectValue01 },
|
||||
});
|
||||
if (res.length > 0) {
|
||||
this.selectValueList02 = await res.map(item => {
|
||||
this.selectValueList02 = await res.map((item) => {
|
||||
return {
|
||||
text: item.eqpmGrpNm,
|
||||
value: item.eqpmGrpId,
|
||||
@ -368,14 +356,14 @@ export default {
|
||||
},
|
||||
async setSelectValueList03() {
|
||||
var res = await this.postApiReturn({
|
||||
apiKey: 'selectEqpmBaseInfo',
|
||||
resKey: 'eqpmBaseInfoData',
|
||||
apiKey: "selectEqpmBaseInfo",
|
||||
resKey: "eqpmBaseInfoData",
|
||||
sendParam: {
|
||||
eqpmGrpId: this.selectValue02,
|
||||
},
|
||||
});
|
||||
if (res.length > 0) {
|
||||
this.selectValueList03 = await res.map(item => {
|
||||
this.selectValueList03 = await res.map((item) => {
|
||||
return {
|
||||
text: item.eqpmNm,
|
||||
value: item.eqpmId,
|
||||
@ -385,12 +373,12 @@ export default {
|
||||
};
|
||||
});
|
||||
this.selectValueList03.unshift({
|
||||
text: '전체',
|
||||
value: 'all',
|
||||
text: "전체",
|
||||
value: "all",
|
||||
});
|
||||
// 설비 그룹을 변경하여 설비를 다시 조회하였지만 이전에 조회한 값이 '전체'일 경우
|
||||
// watch에서 값 변화를 인지 못하기 때문에 여기서 조회 시킨다.
|
||||
if (this.selectValue03 == 'all' && this.initFlag) {
|
||||
if (this.selectValue03 == "all" && this.initFlag) {
|
||||
this.search();
|
||||
}
|
||||
this.selectValue03 = this.selectValueList03[0].value;
|
||||
@ -404,17 +392,17 @@ export default {
|
||||
if (this.selectedData.tagId != undefined) {
|
||||
let res = this.chkDuplicateTagId(this.selectedData.tagId);
|
||||
if (res) {
|
||||
alert('TAG가 중복 됩니다.');
|
||||
alert("TAG가 중복 됩니다.");
|
||||
} else {
|
||||
if (this.selectedData.tagId != undefined) {
|
||||
}
|
||||
this.dialog = false;
|
||||
for (var key in this.searchParam['rowGrid']['defaultRow']) {
|
||||
for (var key in this.searchParam["rowGrid"]["defaultRow"]) {
|
||||
let dt = {
|
||||
columnName: key,
|
||||
value: this.selectedData[key],
|
||||
};
|
||||
this.$emit('gridEditingFinish', dt);
|
||||
this.$emit("gridEditingFinish", dt);
|
||||
this.setPageData({ rowGridSelectData: this.selectedData });
|
||||
}
|
||||
// this.$emit('gridEditingFinish', dt);
|
||||
@ -433,15 +421,15 @@ export default {
|
||||
this.setPageData({ tagList: tagList });
|
||||
}
|
||||
} else {
|
||||
alert('TAG를 선택해주세요.');
|
||||
alert("TAG를 선택해주세요.");
|
||||
}
|
||||
},
|
||||
dialogOpenCloseEvent(val) {
|
||||
this.searchWord = '';
|
||||
this.searchWord = "";
|
||||
if (val) {
|
||||
this.dialog = !val;
|
||||
} else {
|
||||
this.$emit('closePopEvent');
|
||||
this.$emit("closePopEvent");
|
||||
}
|
||||
},
|
||||
async search() {
|
||||
@ -453,6 +441,9 @@ export default {
|
||||
columnOptions: {
|
||||
resizable: true,
|
||||
},
|
||||
header: {
|
||||
height: 38,
|
||||
},
|
||||
};
|
||||
this.setModalGridOption({
|
||||
modalKey: this.myModalKey,
|
||||
@ -461,24 +452,24 @@ export default {
|
||||
value: Object.assign(
|
||||
// Utility.defaultGridOption(this.$refs.modalGridParent.offsetHeight - 60, myOptions),
|
||||
Utility.defaultGridOption(460, myOptions),
|
||||
myOptions,
|
||||
myOptions
|
||||
),
|
||||
});
|
||||
const _this = this;
|
||||
const myColumns = [
|
||||
// { header: '가이드ID', name: 'gdIdxId', align: 'center', hidden: true},
|
||||
{ header: '설비그룹', name: 'eqpmGrpNm', align: 'center', width: 130 },
|
||||
{ header: "설비그룹", name: "eqpmGrpNm", align: "left", width: 130 },
|
||||
{
|
||||
header: '설비그룹 ID',
|
||||
name: 'eqpmGrpId',
|
||||
align: 'center',
|
||||
header: "설비그룹 ID",
|
||||
name: "eqpmGrpId",
|
||||
align: "center",
|
||||
hidden: true,
|
||||
},
|
||||
{ header: '설비ID', name: 'eqpmId', align: 'left', width: 130 },
|
||||
{ header: '설비명', name: 'eqpmNm', align: 'left', width: 130 },
|
||||
{ header: 'TAG ID', name: 'tagId', align: 'left', width: 470 },
|
||||
{ header: 'TAG 명', name: 'tagNm', align: 'left' },
|
||||
{ header: 'rowStat', name: 'rowStat', align: 'center', hidden: true },
|
||||
{ header: "설비ID", name: "eqpmId", align: "left", width: 130 },
|
||||
{ header: "설비명", name: "eqpmNm", align: "left", width: 130 },
|
||||
{ header: "TAG ID", name: "tagId", align: "left", width: 470 },
|
||||
{ header: "TAG 명", name: "tagNm", align: "left" },
|
||||
{ header: "rowStat", name: "rowStat", align: "center", hidden: true },
|
||||
];
|
||||
this.setModalGridColumn({
|
||||
modalKey: this.myModalKey,
|
||||
@ -486,6 +477,7 @@ export default {
|
||||
modalDataKey: this.modalDataKey,
|
||||
value: myColumns,
|
||||
});
|
||||
|
||||
this.loadGrid = true;
|
||||
},
|
||||
async setGridData() {
|
||||
@ -495,16 +487,44 @@ export default {
|
||||
eqpmId: this.selectValue03,
|
||||
searchWord: this.searchWord,
|
||||
};
|
||||
let res = [];
|
||||
res = await this.postApiReturn({
|
||||
apiKey: 'selectTagAndEqpmList',
|
||||
resKey: 'tagTrndDatas',
|
||||
sendParam: searchParam,
|
||||
});
|
||||
let res = [
|
||||
{
|
||||
eqpmGrpNm: "냉각 시스템",
|
||||
eqpmGrpId: "GRP001",
|
||||
eqpmId: "EQ001",
|
||||
eqpmNm: "냉각기 A",
|
||||
tagId: "TAG001-001",
|
||||
tagNm: "냉각 온도 센서",
|
||||
rowStat: "I",
|
||||
},
|
||||
{
|
||||
eqpmGrpNm: "전력 시스템",
|
||||
eqpmGrpId: "GRP002",
|
||||
eqpmId: "EQ002",
|
||||
eqpmNm: "변압기 B",
|
||||
tagId: "TAG002-002",
|
||||
tagNm: "전류 센서",
|
||||
rowStat: "U",
|
||||
},
|
||||
{
|
||||
eqpmGrpNm: "공기압 시스템",
|
||||
eqpmGrpId: "GRP003",
|
||||
eqpmId: "EQ003",
|
||||
eqpmNm: "압축기 C",
|
||||
tagId: "TAG003-003",
|
||||
tagNm: "압력 센서",
|
||||
rowStat: "D",
|
||||
},
|
||||
];
|
||||
// res = await this.postApiReturn({
|
||||
// apiKey: "selectTagAndEqpmList",
|
||||
// resKey: "tagTrndDatas",
|
||||
// sendParam: searchParam,
|
||||
// });
|
||||
let newRes = [];
|
||||
if (this.searchParam['tagList'].length > 0) {
|
||||
newRes = res.filter(item => {
|
||||
return !this.searchParam['tagList'].includes(item.tagId);
|
||||
if (this.searchParam["tagList"].length > 0) {
|
||||
newRes = res.filter((item) => {
|
||||
return !this.searchParam["tagList"].includes(item.tagId);
|
||||
});
|
||||
res = newRes;
|
||||
}
|
||||
|
||||
138
components/common/radiobutton/RadioCmCycle.vue
Normal file
138
components/common/radiobutton/RadioCmCycle.vue
Normal file
@ -0,0 +1,138 @@
|
||||
<template>
|
||||
<v-row class="search-box" align="center" no-gutters>
|
||||
<v-col v-if="label" :cols="labelCols">
|
||||
<label for="" class="search-box-label">
|
||||
<v-icon x-small color="primary" class="mr-1">mdi-record-circle</v-icon>
|
||||
{{ label }}
|
||||
</label>
|
||||
</v-col>
|
||||
<v-col :cols="label ? 'auto' : ''">
|
||||
<v-radio-group
|
||||
v-model="selected"
|
||||
required:rules="radioRules"
|
||||
row
|
||||
dense
|
||||
:hide-details="true"
|
||||
>
|
||||
<v-radio
|
||||
label="월별"
|
||||
value="CYC_YEAR"
|
||||
:ripple="false"
|
||||
:color="isDarkMode ? '#1b74d7' : '#4777d9'"
|
||||
on-icon="mdi-record-circle"
|
||||
></v-radio>
|
||||
<v-radio
|
||||
label="일별"
|
||||
value="CYC_MONTH"
|
||||
:ripple="false"
|
||||
:color="isDarkMode ? '#1b74d7' : '#4777d9'"
|
||||
on-icon="mdi-record-circle"
|
||||
></v-radio>
|
||||
<v-radio
|
||||
label="시간별"
|
||||
value="CYC_DAY"
|
||||
:ripple="false"
|
||||
:color="isDarkMode ? '#1b74d7' : '#4777d9'"
|
||||
on-icon="mdi-record-circle"
|
||||
></v-radio>
|
||||
</v-radio-group>
|
||||
<!-- @change="updateBlocCode($event)" -->
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapMutations, mapActions } from 'vuex';
|
||||
import Utility from '~/plugins/utility';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
parentPrgmId: {
|
||||
type: String,
|
||||
require: true,
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
require: false,
|
||||
default: '주기',
|
||||
},
|
||||
labelCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 4,
|
||||
},
|
||||
textCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 7,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
labelPrepend: true,
|
||||
// selected:"CYC_DAY"
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
searchParam: state => state.pageData,
|
||||
isDarkMode: 'isDarkMode',
|
||||
}),
|
||||
selected: {
|
||||
get() {
|
||||
return this.searchParam[this.parentPrgmId].cmCycle;
|
||||
},
|
||||
set(value) {
|
||||
this.setDefaultDate(value);
|
||||
return this.setPageData({ cmCycle: value });
|
||||
},
|
||||
},
|
||||
},
|
||||
watch: {},
|
||||
created() {
|
||||
// this.setDefaultDate(this.searchParam[this.parentPrgmId].cmCycle);
|
||||
},
|
||||
async mounted() {},
|
||||
methods: {
|
||||
...mapMutations({ setPageData: 'setPageData' }),
|
||||
...mapActions({}),
|
||||
setDefaultDate(value) {
|
||||
// console.log("주기에 따른 오늘 기준 기본 날짜 세팅");
|
||||
const today = Utility.setFormatDate('today', 'YYYY-MM-DD');
|
||||
let srartDate = '';
|
||||
let endDate = '';
|
||||
// console.log(value);
|
||||
switch (value) {
|
||||
case 'CYC_YEAR':
|
||||
// endDate = today;
|
||||
srartDate = Utility.setFormatDate(today, 'YYYY');
|
||||
break;
|
||||
|
||||
case 'CYC_MONTH':
|
||||
// endDate = today;
|
||||
srartDate = Utility.setFormatDate(today, 'YYYY-MM');
|
||||
// endDate = today;
|
||||
// srartDate = Utility.setBeforetDate(
|
||||
// this.searchParam[this.parentPrgmId],
|
||||
// endDate,
|
||||
// "YYYYMMDD"
|
||||
// );
|
||||
break;
|
||||
|
||||
case 'CYC_DAY':
|
||||
// endDate = today;
|
||||
srartDate = today;
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
this.setPageData({ fromDt: srartDate });
|
||||
// console.log(this.searchParam[this.parentPrgmId].cmCycle);
|
||||
// console.log(this.searchParam[this.parentPrgmId].dateRange);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
113
components/common/radiobutton/RadioStandard.vue
Normal file
113
components/common/radiobutton/RadioStandard.vue
Normal file
@ -0,0 +1,113 @@
|
||||
<template>
|
||||
<v-row class="search-box" align="center" no-gutters>
|
||||
<v-col v-if="label" :cols="labelCols">
|
||||
<label for="" class="search-box-label">
|
||||
<v-icon x-small color="primary" class="mr-1">mdi-record-circle</v-icon>
|
||||
{{ label }}
|
||||
</label>
|
||||
</v-col>
|
||||
<v-col :cols="label ? textCols : ''">
|
||||
<v-radio-group
|
||||
v-model="selected"
|
||||
required:rules="radioRules"
|
||||
row
|
||||
hide-details
|
||||
dense
|
||||
>
|
||||
<v-radio
|
||||
label="태그"
|
||||
value="tag"
|
||||
:ripple="false"
|
||||
:color="isDarkMode ? '#1b74d7' : '#4777d9'"
|
||||
on-icon="mdi-record-circle"
|
||||
></v-radio>
|
||||
<v-radio
|
||||
label="검침개소"
|
||||
value="readPlc"
|
||||
:ripple="false"
|
||||
:color="isDarkMode ? '#1b74d7' : '#4777d9'"
|
||||
on-icon="mdi-record-circle"
|
||||
></v-radio>
|
||||
<v-radio
|
||||
label="공정"
|
||||
value="ecc"
|
||||
:ripple="false"
|
||||
:color="isDarkMode ? '#1b74d7' : '#4777d9'"
|
||||
on-icon="mdi-record-circle"
|
||||
></v-radio>
|
||||
<v-radio
|
||||
label="설비"
|
||||
value="eqpm"
|
||||
:ripple="false"
|
||||
:color="isDarkMode ? '#1b74d7' : '#4777d9'"
|
||||
on-icon="mdi-record-circle"
|
||||
></v-radio>
|
||||
</v-radio-group>
|
||||
<!-- @change="updateBlocCode($event)" -->
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapMutations, mapActions } from 'vuex';
|
||||
import Utility from '~/plugins/utility';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
parentPrgmId: {
|
||||
type: String,
|
||||
require: true,
|
||||
},
|
||||
labelCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 4,
|
||||
},
|
||||
textCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 7,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
label: '기준',
|
||||
labelPrepend: true,
|
||||
// selected:"CYC_DAY"
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
isDarkMode: 'isDarkMode',
|
||||
searchParam: state => state.pageData,
|
||||
}),
|
||||
selected: {
|
||||
get() {
|
||||
return this.searchParam[this.parentPrgmId].rdbStandard;
|
||||
},
|
||||
set(value) {
|
||||
return this.setPageData({ rdbStandard: value });
|
||||
},
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
selected(value) {
|
||||
// 주기에 따른 오늘 기준 기본 날짜 세팅
|
||||
this.setDefaultDate(value);
|
||||
},
|
||||
},
|
||||
created() {
|
||||
// this.setDefaultDate(this.searchParam[this.parentPrgmId].cmCycle);
|
||||
},
|
||||
async mounted() {},
|
||||
methods: {
|
||||
...mapMutations({ setPageData: 'setPageData' }),
|
||||
...mapActions({}),
|
||||
setDefaultDate(value) {
|
||||
this.setPageData({ rdbStandard: value });
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
99
components/common/radiobutton/RadioUseCost.vue
Normal file
99
components/common/radiobutton/RadioUseCost.vue
Normal file
@ -0,0 +1,99 @@
|
||||
<template>
|
||||
<v-row class="search-box" align="center" no-gutters>
|
||||
<v-col v-if="label" :cols="labelCols">
|
||||
<label for="" class="search-box-label">
|
||||
<v-icon x-small color="primary" class="mr-1">mdi-record-circle</v-icon>
|
||||
{{ label }}
|
||||
</label>
|
||||
</v-col>
|
||||
<v-col :cols="label ? textCols : ''">
|
||||
<v-radio-group
|
||||
v-model="selected"
|
||||
required:rules="radioRules"
|
||||
row
|
||||
hide-details
|
||||
dense
|
||||
>
|
||||
<v-radio
|
||||
label="사용량"
|
||||
value="use"
|
||||
:ripple="false"
|
||||
:color="isDarkMode ? '#1b74d7' : '#4777d9'"
|
||||
on-icon="mdi-record-circle"
|
||||
></v-radio>
|
||||
<v-radio
|
||||
label="비용"
|
||||
value="cost"
|
||||
:ripple="false"
|
||||
:color="isDarkMode ? '#1b74d7' : '#4777d9'"
|
||||
on-icon="mdi-record-circle"
|
||||
></v-radio>
|
||||
</v-radio-group>
|
||||
<!-- @change="updateBlocCode($event)" -->
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapMutations, mapActions } from 'vuex';
|
||||
import Utility from '~/plugins/utility';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
parentPrgmId: {
|
||||
type: String,
|
||||
require: true,
|
||||
},
|
||||
labelCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 4,
|
||||
},
|
||||
textCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 7,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
label: '구분',
|
||||
labelPrepend: true,
|
||||
// selected:"CYC_DAY"
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
isDarkMode: 'isDarkMode',
|
||||
searchParam: state => state.pageData,
|
||||
}),
|
||||
selected: {
|
||||
get() {
|
||||
return this.searchParam[this.parentPrgmId].rdbUseCost;
|
||||
},
|
||||
set(value) {
|
||||
return this.setPageData({ rdbUseCost: value });
|
||||
},
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
selected(value) {
|
||||
// 주기에 따른 오늘 기준 기본 날짜 세팅
|
||||
this.setDefaultDate(value);
|
||||
},
|
||||
},
|
||||
created() {
|
||||
// this.setDefaultDate(this.searchParam[this.parentPrgmId].cmCycle);
|
||||
},
|
||||
async mounted() {},
|
||||
methods: {
|
||||
...mapMutations({ setPageData: 'setPageData' }),
|
||||
...mapActions({}),
|
||||
setDefaultDate(value) {
|
||||
this.setPageData({ rdbUseCost: value });
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
97
components/common/radiobutton/RadioView.vue
Normal file
97
components/common/radiobutton/RadioView.vue
Normal file
@ -0,0 +1,97 @@
|
||||
<template>
|
||||
<v-row class="search-box" align="center" no-gutters>
|
||||
<v-col v-if="label" :cols="labelCols">
|
||||
<label for="" class="search-box-label">
|
||||
{{ label }}
|
||||
</label>
|
||||
</v-col>
|
||||
<v-col :cols="label ? textCols : ''">
|
||||
<v-radio-group
|
||||
v-model="selectedView"
|
||||
required:rules="radioRules"
|
||||
row
|
||||
dense
|
||||
:hide-details="true"
|
||||
>
|
||||
<v-radio
|
||||
label="전체"
|
||||
value="viewAll"
|
||||
:ripple="false"
|
||||
:color="isDarkMode ? '#1b74d7' : '#4777d9'"
|
||||
on-icon="mdi-record-circle"
|
||||
></v-radio>
|
||||
<v-radio
|
||||
label="차트"
|
||||
value="viewChart"
|
||||
:ripple="false"
|
||||
:color="isDarkMode ? '#1b74d7' : '#4777d9'"
|
||||
on-icon="mdi-record-circle"
|
||||
></v-radio>
|
||||
<v-radio
|
||||
label="그리드"
|
||||
value="viewGrid"
|
||||
:ripple="false"
|
||||
:color="isDarkMode ? '#1b74d7' : '#4777d9'"
|
||||
on-icon="mdi-record-circle"
|
||||
></v-radio>
|
||||
</v-radio-group>
|
||||
<!-- @change="updateBlocCode($event)" -->
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapMutations, mapActions } from 'vuex';
|
||||
import Utility from '~/plugins/utility';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
parentPrgmId: {
|
||||
type: String,
|
||||
require: true,
|
||||
},
|
||||
labelCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 4,
|
||||
},
|
||||
textCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 8,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
label: '',
|
||||
labelPrepend: true,
|
||||
// selected:"CYC_DAY"
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
searchParam: state => state.pageData,
|
||||
isDarkMode: 'isDarkMode',
|
||||
}),
|
||||
selectedView: {
|
||||
get() {
|
||||
return this.searchParam[this.parentPrgmId].viewCheck;
|
||||
},
|
||||
set(value) {
|
||||
return this.setPageData({ viewCheck: value });
|
||||
},
|
||||
},
|
||||
},
|
||||
watch: {},
|
||||
created() {
|
||||
// this.setDefaultDate(this.searchParam[this.parentPrgmId].cmCycle);
|
||||
},
|
||||
async mounted() {},
|
||||
methods: {
|
||||
...mapMutations({ setPageData: 'setPageData' }),
|
||||
...mapActions({}),
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
@ -7,7 +7,12 @@
|
||||
>
|
||||
<v-col v-if="item.label" :cols="labelCol">
|
||||
<label for="" class="search-box-label">
|
||||
<v-icon x-small color="primary" class="mr-1">mdi-record-circle</v-icon>
|
||||
<v-icon
|
||||
small
|
||||
:class="['mr-1', item.required ? 'icon-orange' : 'icon-blue']"
|
||||
>$icoBulletPoint</v-icon
|
||||
>
|
||||
<!-- <v-icon x-small color="primary" class="mr-1">mdi-record-circle</v-icon> -->
|
||||
{{ item.label }}
|
||||
</label>
|
||||
</v-col>
|
||||
|
||||
@ -3,8 +3,12 @@
|
||||
<v-col v-if="label" :cols="labelCols">
|
||||
<label for="" class="search-box-label">
|
||||
<!-- <v-icon x-small :color="'#fb8200'" class="mr-1" -->
|
||||
<v-icon x-small :color="'#4777d9'" class="mr-1"
|
||||
>mdi-record-circle</v-icon
|
||||
<v-icon
|
||||
v-if="iconShow"
|
||||
small
|
||||
:color="'#4777d9'"
|
||||
:class="['mr-1', required ? 'icon-orange' : 'icon-blue']"
|
||||
>$icoBulletPoint</v-icon
|
||||
>
|
||||
{{ label }}
|
||||
</label>
|
||||
@ -18,7 +22,7 @@
|
||||
solo
|
||||
outlined
|
||||
append-icon="mdi-chevron-down"
|
||||
class="v-select__custom"
|
||||
:class="['v-select__custom', customClass]"
|
||||
></v-select>
|
||||
</v-col>
|
||||
</v-row>
|
||||
@ -61,12 +65,21 @@ export default {
|
||||
textCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 7,
|
||||
default: 12,
|
||||
},
|
||||
labelCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 4,
|
||||
default: 12,
|
||||
},
|
||||
iconShow: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: true
|
||||
},
|
||||
customClass: {
|
||||
type: String,
|
||||
require: false,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
|
||||
@ -2,22 +2,16 @@
|
||||
<v-row class="search-box" align="center" no-gutters>
|
||||
<v-col v-if="label" :cols="labelCols">
|
||||
<label for="" class="search-box-label">
|
||||
<v-icon x-small color="primary" class="mr-1">mdi-record-circle</v-icon>
|
||||
<v-icon v-if="iconShow" small :class="['mr-1', required ? 'icon-orange' : 'icon-blue']">$icoBulletPoint</v-icon>
|
||||
{{ label }}
|
||||
</label>
|
||||
</v-col>
|
||||
<v-col :cols="label ? textCols : ''">
|
||||
<v-select
|
||||
v-model="selectValue"
|
||||
:items="searchParam[parentPrgmId].blocMstrList"
|
||||
label="사업장을 선택하세요"
|
||||
item-text="blocNm"
|
||||
item-value="idx"
|
||||
solo
|
||||
append-icon="mdi-chevron-down"
|
||||
class="v-select__custom"
|
||||
outlined
|
||||
></v-select>
|
||||
<v-select v-model="selectValue" :items="searchParam[parentPrgmId].blocMstrList"
|
||||
item-text="blocNm" item-value="idx" append-icon="" outlined
|
||||
:hide-details="true" :class="['v-select__custom', customClass]">
|
||||
<template v-slot:append><v-icon>$icoChevronDown</v-icon></template>
|
||||
</v-select>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
@ -56,6 +50,21 @@ export default {
|
||||
require: false,
|
||||
default: 4,
|
||||
},
|
||||
required: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: false
|
||||
},
|
||||
iconShow: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: true,
|
||||
},
|
||||
customClass: {
|
||||
type: String,
|
||||
require: false,
|
||||
default: null,
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
@ -2,26 +2,24 @@
|
||||
<v-row class="search-box" align="center" no-gutters>
|
||||
<v-col v-if="label" :cols="labelCols">
|
||||
<label for="" class="search-box-label">
|
||||
<v-icon v-if="iconShow" x-small
|
||||
:color="required ? '#fb8200' : 'primary'"
|
||||
class="mr-1">mdi-record-circle</v-icon>
|
||||
<v-icon
|
||||
v-if="iconShow"
|
||||
small
|
||||
:class="['mr-1', required ? 'icon-orange' : 'icon-blue']"
|
||||
>$icoBulletPoint</v-icon
|
||||
>
|
||||
{{ label }}
|
||||
</label>
|
||||
</v-col>
|
||||
<v-col :cols="label ? textCols : ''">
|
||||
<v-select
|
||||
v-model="innerValue"
|
||||
:items="itemList"
|
||||
item-text="text"
|
||||
item-value="value"
|
||||
solo
|
||||
outlined
|
||||
:hide-details="true"
|
||||
append-icon="mdi-chevron-down"
|
||||
class="v-select__custom"
|
||||
:disabled="disabled"
|
||||
:readonly="readonly"
|
||||
></v-select>
|
||||
<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"
|
||||
:readonly="readonly"><template v-slot:append>
|
||||
<!-- Custom SVG icon -->
|
||||
<v-icon>$icoChevronDown</v-icon>
|
||||
|
||||
|
||||
</template></v-select>
|
||||
<!-- @change="updateBlocCode($event)" -->
|
||||
</v-col>
|
||||
</v-row>
|
||||
@ -44,12 +42,12 @@ export default {
|
||||
textCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 8,
|
||||
default: 12,
|
||||
},
|
||||
labelCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 4,
|
||||
default: 12,
|
||||
},
|
||||
itemList: {
|
||||
type: Array,
|
||||
@ -81,6 +79,10 @@ export default {
|
||||
require: false,
|
||||
default: false
|
||||
},
|
||||
customClass: {
|
||||
type: String,
|
||||
require: false,
|
||||
},
|
||||
},
|
||||
emits: ['update:propsValue'],
|
||||
data() {
|
||||
|
||||
@ -2,9 +2,12 @@
|
||||
<v-row class="search-box" align="center" no-gutters>
|
||||
<v-col v-if="label" :cols="labelCols">
|
||||
<label for="" class="search-box-label">
|
||||
<v-icon v-if="iconShow" x-small
|
||||
:color="required ? '#fb8200' : 'primary'"
|
||||
class="mr-1">mdi-record-circle</v-icon>
|
||||
<v-icon
|
||||
v-if="iconShow"
|
||||
small
|
||||
:class="['mr-1', required ? 'icon-orange' : 'icon-blue']"
|
||||
>$icoBulletPoint</v-icon
|
||||
>
|
||||
{{ label }}
|
||||
</label>
|
||||
</v-col>
|
||||
@ -14,16 +17,16 @@
|
||||
:items="itemList"
|
||||
item-text="text"
|
||||
item-value="value"
|
||||
solo
|
||||
outlined
|
||||
:multiple="multiple"
|
||||
:hide-details="true"
|
||||
append-icon="mdi-chevron-down"
|
||||
class="v-select__custom"
|
||||
:class="['v-select__custom', customClass]"
|
||||
:disabled="disabled"
|
||||
:readonly="readonly"
|
||||
></v-select>
|
||||
<!-- @change="updateBlocCode($event)" -->
|
||||
append-icon=""
|
||||
><template v-slot:append>
|
||||
<v-icon>$icoChevronDown</v-icon>
|
||||
</template></v-select>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
@ -87,6 +90,10 @@ export default {
|
||||
require:false,
|
||||
default:false
|
||||
},
|
||||
customClass: {
|
||||
type: String,
|
||||
require: false,
|
||||
},
|
||||
},
|
||||
emits: ['update:propsValue'],
|
||||
data() {
|
||||
|
||||
@ -2,9 +2,13 @@
|
||||
<v-row class="search-box" align="center" no-gutters>
|
||||
<v-col v-if="label" :cols="labelCols">
|
||||
<label for="" class="search-box-label">
|
||||
<v-icon v-if="iconShow" x-small
|
||||
<v-icon
|
||||
v-if="iconShow"
|
||||
x-small
|
||||
:color="required ? '#fb8200' : 'primary'"
|
||||
class="mr-1">mdi-record-circle</v-icon>
|
||||
class="mr-1"
|
||||
>mdi-record-circle</v-icon
|
||||
>
|
||||
{{ label }}
|
||||
</label>
|
||||
</v-col>
|
||||
@ -18,20 +22,30 @@
|
||||
outlined
|
||||
:menu-props="{ auto: true, offsetY: true }"
|
||||
:hide-details="true"
|
||||
append-icon="mdi-chevron-down"
|
||||
:class="'v-select__custom'"
|
||||
:class="'v-select__custom select-large'"
|
||||
:disabled="disabled"
|
||||
:readonly="readonly"
|
||||
@click="setDatepickerHide"
|
||||
></v-select>
|
||||
style="width: 170px; border-radius: 6px !important"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<a-icon
|
||||
class="v-icon"
|
||||
type="clock-circle"
|
||||
style="width: 14px; height: 14px; color: #00000073"
|
||||
/>
|
||||
</template>
|
||||
</v-select>
|
||||
<!-- @change="updateBlocCode($event)" -->
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapMutations, mapActions } from 'vuex';
|
||||
import { mapState, mapMutations, mapActions } from "vuex";
|
||||
|
||||
export default {
|
||||
components: {},
|
||||
props: {
|
||||
parentPrgmId: {
|
||||
type: String,
|
||||
@ -70,36 +84,36 @@ export default {
|
||||
required: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default:false
|
||||
default: false,
|
||||
},
|
||||
iconShow: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default:true
|
||||
default: true,
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default:false
|
||||
default: false,
|
||||
},
|
||||
readonly: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default:false
|
||||
default: false,
|
||||
},
|
||||
minInterval: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default:1
|
||||
}
|
||||
default: 1,
|
||||
},
|
||||
emits: ['update:propsValue'],
|
||||
},
|
||||
emits: ["update:propsValue"],
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
searchParam: state => state.pageData,
|
||||
searchParam: (state) => state.pageData,
|
||||
}),
|
||||
timeInnerValue: {
|
||||
get() {
|
||||
@ -107,9 +121,9 @@ export default {
|
||||
},
|
||||
set(value) {
|
||||
// console.log('value[setValue] : ', value)
|
||||
this.$emit('update:propsValue', value);
|
||||
this.$emit("update:propsValue", value);
|
||||
},
|
||||
},
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getTimeList();
|
||||
@ -118,20 +132,18 @@ export default {
|
||||
// console.log('propsValue : ', this.propsValue);
|
||||
},
|
||||
methods: {
|
||||
...mapMutations({ setPageData: 'setPageData' }),
|
||||
...mapMutations({ setPageData: "setPageData" }),
|
||||
...mapActions({}),
|
||||
getTimeList() {
|
||||
for (var i = 0; i < 24; i++) {
|
||||
let hour = i.toString().padStart(2, '0');
|
||||
let hour = i.toString().padStart(2, "0");
|
||||
for (var j = 0; j < 60; j++) {
|
||||
if (j % this.minInterval === 0) {
|
||||
let min = j.toString().padStart(2, '0');
|
||||
this.itemList.push(
|
||||
{
|
||||
'text' : hour + ' : ' + min,
|
||||
'value': hour + ' : ' + min
|
||||
}
|
||||
)
|
||||
let min = j.toString().padStart(2, "0");
|
||||
this.itemList.push({
|
||||
text: hour + " : " + min,
|
||||
value: hour + " : " + min,
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -141,15 +153,14 @@ export default {
|
||||
// datepicker 선택 중 시간 selectBox를 고를 경우 datepicker를 hidden 시키는 기능
|
||||
if (document.querySelector("#startpicker-container > div") != undefined) {
|
||||
let datepicker1 = document.querySelector("#startpicker-container > div");
|
||||
datepicker1.classList.add('tui-hidden');
|
||||
datepicker1.classList.add("tui-hidden");
|
||||
}
|
||||
if (document.querySelector("#endpicker-container > div") != undefined) {
|
||||
let datepicker2 = document.querySelector("#endpicker-container > div");
|
||||
datepicker2.classList.add('tui-hidden');
|
||||
}
|
||||
|
||||
datepicker2.classList.add("tui-hidden");
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
@ -2,7 +2,12 @@
|
||||
<v-row class="search-box" align="center" no-gutters>
|
||||
<v-col v-if="label" :cols="labelCols">
|
||||
<label for="" class="search-box-label">
|
||||
<v-icon x-small color="primary" class="mr-1">mdi-record-circle</v-icon>
|
||||
<v-icon
|
||||
v-if="iconShow"
|
||||
small
|
||||
:class="['mr-1', required ? 'icon-orange' : 'icon-blue']"
|
||||
>$icoBulletPoint</v-icon
|
||||
>
|
||||
{{ label }}
|
||||
</label>
|
||||
</v-col>
|
||||
@ -17,7 +22,7 @@
|
||||
outlined
|
||||
:hide-details="true"
|
||||
append-icon="mdi-chevron-down"
|
||||
class="v-select__custom"
|
||||
:class="['v-select__custom', customClass]"
|
||||
></v-select>
|
||||
<!-- @change="updateBlocCode($event)" -->
|
||||
</v-col>
|
||||
@ -25,8 +30,8 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapMutations, mapActions } from 'vuex';
|
||||
import Utility from '~/plugins/utility';
|
||||
import { mapState, mapMutations, mapActions } from "vuex";
|
||||
import Utility from "~/plugins/utility";
|
||||
|
||||
export default {
|
||||
props: {
|
||||
@ -51,8 +56,22 @@ export default {
|
||||
label: {
|
||||
type: String,
|
||||
require: false,
|
||||
default: '주기'
|
||||
}
|
||||
default: "주기",
|
||||
},
|
||||
iconShow: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: true,
|
||||
},
|
||||
required: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: false,
|
||||
},
|
||||
customClass: {
|
||||
type: String,
|
||||
require: false,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@ -62,7 +81,7 @@ export default {
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
searchParam: state => state.pageData,
|
||||
searchParam: (state) => state.pageData,
|
||||
}),
|
||||
selectValue: {
|
||||
get() {
|
||||
@ -84,46 +103,46 @@ export default {
|
||||
},
|
||||
async mounted() {},
|
||||
methods: {
|
||||
...mapMutations({ setPageData: 'setPageData' }),
|
||||
...mapMutations({ setPageData: "setPageData" }),
|
||||
...mapActions({}),
|
||||
setDefaultDate(value) {
|
||||
// console.log("주기에 따른 오늘 기준 기본 날짜 세팅");
|
||||
if (this.searchParam[this.parentPrgmId].dateInitedFlag) {
|
||||
return;
|
||||
}
|
||||
const today = Utility.setFormatDate('today', 'YYYYMMDD');
|
||||
let srartDate = '';
|
||||
let endDate = '';
|
||||
const today = Utility.setFormatDate("today", "YYYYMMDD");
|
||||
let srartDate = "";
|
||||
let endDate = "";
|
||||
// console.log(value);
|
||||
switch (value) {
|
||||
case 'CYC_YEAR':
|
||||
endDate = Utility.setFormatDate(today, 'YYYY');
|
||||
case "CYC_YEAR":
|
||||
endDate = Utility.setFormatDate(today, "YYYY");
|
||||
srartDate = Utility.setBeforetDate(
|
||||
this.searchParam[this.parentPrgmId],
|
||||
endDate,
|
||||
'YYYY',
|
||||
"YYYY"
|
||||
);
|
||||
break;
|
||||
|
||||
case 'CYC_MONTH':
|
||||
endDate = Utility.setFormatDate(today, 'YYYYMM');
|
||||
case "CYC_MONTH":
|
||||
endDate = Utility.setFormatDate(today, "YYYYMM");
|
||||
srartDate = Utility.setBeforetDate(
|
||||
this.searchParam[this.parentPrgmId],
|
||||
endDate,
|
||||
'YYYYMM',
|
||||
"YYYYMM"
|
||||
);
|
||||
break;
|
||||
|
||||
case 'CYC_DAY':
|
||||
case "CYC_DAY":
|
||||
endDate = today;
|
||||
srartDate = Utility.setBeforetDate(
|
||||
this.searchParam[this.parentPrgmId],
|
||||
endDate,
|
||||
'YYYYMMDD',
|
||||
"YYYYMMDD"
|
||||
);
|
||||
break;
|
||||
|
||||
case 'CYC_HOUR':
|
||||
case "CYC_HOUR":
|
||||
endDate = today;
|
||||
srartDate = today;
|
||||
break;
|
||||
@ -134,10 +153,10 @@ export default {
|
||||
if (
|
||||
this.pickerMode == undefined ||
|
||||
this.pickerMode == null ||
|
||||
this.pickerMode == ''
|
||||
this.pickerMode == ""
|
||||
) {
|
||||
this.setPageData({ fromDt: srartDate, toDt: endDate });
|
||||
} else if (this.pickerMode == 'single') {
|
||||
} else if (this.pickerMode == "single") {
|
||||
this.setPageData({ fromDt: endDate, toDt: srartDate });
|
||||
} else {
|
||||
this.setPageData({ fromDt: srartDate, toDt: endDate });
|
||||
|
||||
@ -2,7 +2,9 @@
|
||||
<v-row class="search-box" align="center" no-gutters>
|
||||
<v-col v-if="label" :cols="labelCols">
|
||||
<label for="" class="search-box-label">
|
||||
<v-icon x-small color="primary" class="mr-1">mdi-record-circle</v-icon>
|
||||
<v-icon v-if="iconShow" small color="primary"
|
||||
:class="['mr-1', required ? 'icon-orange' : 'icon-blue']"
|
||||
>$icoBulletPoint</v-icon>
|
||||
{{ label }}
|
||||
</label>
|
||||
</v-col>
|
||||
@ -15,7 +17,7 @@
|
||||
solo
|
||||
outlined
|
||||
append-icon="mdi-chevron-down"
|
||||
class="v-select__custom"
|
||||
:class="['v-select__custom', customClass]"
|
||||
></v-select>
|
||||
</v-col>
|
||||
</v-row>
|
||||
@ -65,6 +67,20 @@ export default {
|
||||
require: false,
|
||||
default: 4,
|
||||
},
|
||||
required: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: false
|
||||
},
|
||||
iconShow: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: true,
|
||||
},
|
||||
customClass: {
|
||||
type: String,
|
||||
require: false,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
|
||||
@ -1,8 +1,17 @@
|
||||
<template>
|
||||
<v-row class="search-box" align="center" no-gutters>
|
||||
<v-col v-if="label" :cols="labelCols">
|
||||
<!-- <label for="" class="search-box-label">
|
||||
<v-icon v-if="iconShow" small color="primary" class="mr-1">mdi-record-circle</v-icon>
|
||||
{{ label }}
|
||||
</label> -->
|
||||
<label for="" class="search-box-label">
|
||||
<v-icon small color="primary" class="mr-1">mdi-record-circle</v-icon>
|
||||
<v-icon
|
||||
v-if="iconShow"
|
||||
small
|
||||
:class="['mr-1', required ? 'icon-orange' : 'icon-blue']"
|
||||
>$icoBulletPoint</v-icon
|
||||
>
|
||||
{{ label }}
|
||||
</label>
|
||||
</v-col>
|
||||
@ -14,7 +23,7 @@
|
||||
item-value="mttCd"
|
||||
solo
|
||||
append-icon="mdi-chevron-down"
|
||||
class="v-select__custom"
|
||||
:class="['v-select__custom', customClass]"
|
||||
outlined
|
||||
hide-details
|
||||
></v-select>
|
||||
@ -24,7 +33,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapMutations, mapActions } from 'vuex';
|
||||
import { mapState, mapMutations, mapActions } from "vuex";
|
||||
export default {
|
||||
props: {
|
||||
parentPrgmId: {
|
||||
@ -67,6 +76,20 @@ export default {
|
||||
require: false,
|
||||
default: 4,
|
||||
},
|
||||
iconShow: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: true,
|
||||
},
|
||||
customClass: {
|
||||
type: String,
|
||||
require: false,
|
||||
},
|
||||
required: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: false
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@ -76,10 +99,10 @@ export default {
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
searchParam: state => state.pageData,
|
||||
searchParam: (state) => state.pageData,
|
||||
}),
|
||||
mySendMttParam() {
|
||||
return this.searchParam[this.parentPrgmId]['sendMttParam'];
|
||||
return this.searchParam[this.parentPrgmId]["sendMttParam"];
|
||||
},
|
||||
selectValue: {
|
||||
get() {
|
||||
@ -94,23 +117,23 @@ export default {
|
||||
mySendMttParam() {
|
||||
this.getMttList({
|
||||
dataKey: this.dataKey,
|
||||
params: this.searchParam[this.parentPrgmId]['sendMttParam'],
|
||||
params: this.searchParam[this.parentPrgmId]["sendMttParam"],
|
||||
});
|
||||
// this.selectValue(this.searchParam[this.parentPrgmId].mttCdList[0].mttCd);
|
||||
},
|
||||
},
|
||||
created() {
|
||||
if (this.searchParam[this.parentPrgmId]['sendMttParam'].mttTp!=""){
|
||||
if (this.searchParam[this.parentPrgmId]["sendMttParam"].mttTp != "") {
|
||||
this.getMttList({
|
||||
dataKey: this.dataKey,
|
||||
params: this.searchParam[this.parentPrgmId]['sendMttParam'],
|
||||
params: this.searchParam[this.parentPrgmId]["sendMttParam"],
|
||||
});
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapMutations({ setPageData: 'setPageData' }),
|
||||
...mapMutations({ setPageData: "setPageData" }),
|
||||
...mapActions({
|
||||
getMttList: 'modules/search/getMttList',
|
||||
getMttList: "modules/search/getMttList",
|
||||
}),
|
||||
},
|
||||
};
|
||||
|
||||
@ -2,7 +2,12 @@
|
||||
<v-row class="search-box" align="center" no-gutters>
|
||||
<v-col v-if="label" :cols="labelCols">
|
||||
<label for="" class="search-box-label">
|
||||
<v-icon x-small color="primary" class="mr-1">mdi-record-circle</v-icon>
|
||||
<v-icon
|
||||
v-if="iconShow"
|
||||
small
|
||||
:class="['mr-1', required ? 'icon-orange' : 'icon-blue']"
|
||||
>$icoBulletPoint</v-icon
|
||||
>
|
||||
{{ label }}
|
||||
</label>
|
||||
</v-col>
|
||||
@ -14,9 +19,11 @@
|
||||
item-value="readObjId"
|
||||
solo
|
||||
outlined
|
||||
append-icon="mdi-chevron-down"
|
||||
class="v-select__custom"
|
||||
></v-select>
|
||||
append-icon=""
|
||||
:class="['v-select__custom', customClass]"
|
||||
><template v-slot:append>
|
||||
<v-icon>$icoChevronDown</v-icon>
|
||||
</template></v-select>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
@ -65,6 +72,21 @@ export default {
|
||||
require: false,
|
||||
default: 4,
|
||||
},
|
||||
required: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: false
|
||||
},
|
||||
iconShow: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: true,
|
||||
},
|
||||
customClass: {
|
||||
type: String,
|
||||
require: false,
|
||||
default: null,
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
|
||||
@ -146,5 +146,3 @@ export default {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
|
||||
@ -2,7 +2,12 @@
|
||||
<v-row class="search-box" align="center" no-gutters>
|
||||
<v-col v-if="label" :cols="labelCols">
|
||||
<label for="" class="search-box-label">
|
||||
<v-icon x-small color="primary" class="mr-1">mdi-record-circle</v-icon>
|
||||
<v-icon
|
||||
v-if="iconShow"
|
||||
small
|
||||
:class="['mr-1', required ? 'icon-orange' : 'icon-blue']"
|
||||
>$icoBulletPoint</v-icon
|
||||
>
|
||||
{{ label }}
|
||||
</label>
|
||||
</v-col>
|
||||
@ -13,9 +18,12 @@
|
||||
item-text="commCdNm"
|
||||
item-value="commCd"
|
||||
solo
|
||||
append-icon="mdi-chevron-down"
|
||||
class="v-select__custom"
|
||||
></v-select>
|
||||
outlined
|
||||
append-icon=""
|
||||
:class="['v-select__custom', customClass]"
|
||||
><template v-slot:append>
|
||||
<v-icon>$icoChevronDown</v-icon>
|
||||
</template></v-select>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
@ -47,6 +55,16 @@ export default {
|
||||
require: false,
|
||||
default: 4,
|
||||
},
|
||||
iconShow: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: true,
|
||||
},
|
||||
customClass: {
|
||||
type: String,
|
||||
require: false,
|
||||
default: null,
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user