Compare commits
1 Commits
dev-luannv
...
dev-manhph
| Author | SHA1 | Date | |
|---|---|---|---|
| 8bfcebdd10 |
Binary file not shown.
|
Before Width: | Height: | Size: 1.5 KiB |
@ -1,5 +1,17 @@
|
|||||||
// router-tab (header)
|
// router-tab (header)
|
||||||
|
@import "./var.scss";
|
||||||
@import "./mixin.scss";
|
@import "./mixin.scss";
|
||||||
|
@import "./common/fonts.scss";
|
||||||
|
@import "./common/text.scss";
|
||||||
|
@import "./common/input.scss";
|
||||||
|
@import "./common/button.scss";
|
||||||
|
@import "./common/grid.scss";
|
||||||
|
@import "./common/card.scss";
|
||||||
|
@import "./common/tabs.scss";
|
||||||
|
@import "./common/numericInput.scss";
|
||||||
|
@import "./common/pagination.scss";
|
||||||
|
@import "./common/editor.scss";
|
||||||
|
|
||||||
|
|
||||||
html,
|
html,
|
||||||
body {
|
body {
|
||||||
@ -219,18 +231,12 @@ a {
|
|||||||
.v-application.#{$theme}-mode {
|
.v-application.#{$theme}-mode {
|
||||||
min-width: 1000px;
|
min-width: 1000px;
|
||||||
|
|
||||||
.ant-checkbox-wrapper.ant-checkbox-wraBapper-disabled,
|
.ant-checkbox-wrapper.ant-checkbox-wrapper-disabled,
|
||||||
.ant-checkbox-disabled .ant-checkbox-input
|
.ant-checkbox-disabled .ant-checkbox-input
|
||||||
{
|
{
|
||||||
cursor: default !important;
|
cursor: default !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ant-checkbox-disabled .ant-checkbox-inner
|
|
||||||
{
|
|
||||||
background-color: map-deep-get($config, #{$theme}, "ant-checkbox-disabled-bg") !important;
|
|
||||||
border: map-deep-get($config, #{$theme}, "ant-checkbox-disabled-border") !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.v-list-item__title {
|
.v-list-item__title {
|
||||||
font-family: var(--desktop-normal-font-family, "Inter-Regular", sans-serif) !important;
|
font-family: var(--desktop-normal-font-family, "Inter-Regular", sans-serif) !important;
|
||||||
}
|
}
|
||||||
@ -323,6 +329,74 @@ a {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.router-tab {
|
||||||
|
.router-tab__header {
|
||||||
|
background-color: map-deep-get($config, #{$theme}, "router-header");
|
||||||
|
border-color: map-deep-get($config, #{$theme}, "router-header");
|
||||||
|
height: 46px;
|
||||||
|
z-index: 7;
|
||||||
|
max-width: calc(100vw - 290px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.router-tab__container {
|
||||||
|
background-color: map-deep-get($config, #{$theme}, "router-container");
|
||||||
|
}
|
||||||
|
|
||||||
|
.router-tab__item {
|
||||||
|
background-color: map-deep-get($config, #{$theme}, "router-tab-item");
|
||||||
|
border-color: map-deep-get($config, #{$theme}, "router-tab-item");
|
||||||
|
color: map-deep-get($config, #{$theme}, "router-tab-item-color");
|
||||||
|
|
||||||
|
&:not(.is-active) {
|
||||||
|
&:hover {
|
||||||
|
&>span {
|
||||||
|
color: map-deep-get($config,
|
||||||
|
#{$theme},
|
||||||
|
"router-tab-item-hover-color"
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.v-icon {
|
||||||
|
color: map-deep-get($config, #{$theme}, "router-tab-item-icon-color");
|
||||||
|
}
|
||||||
|
|
||||||
|
&.is-active {
|
||||||
|
background-color: map-deep-get($config,
|
||||||
|
#{$theme},
|
||||||
|
"router-tab-item-active"
|
||||||
|
);
|
||||||
|
border-color: map-deep-get($config,
|
||||||
|
#{$theme},
|
||||||
|
"router-tab-item-active-color"
|
||||||
|
) !important;
|
||||||
|
color: map-deep-get($config,
|
||||||
|
#{$theme},
|
||||||
|
"router-tab-item-active-color"
|
||||||
|
);
|
||||||
|
|
||||||
|
.v-icon {
|
||||||
|
color: map-deep-get($config,
|
||||||
|
#{$theme},
|
||||||
|
"router-tab-item-icon-active-color"
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.router-tab__slot-end {
|
||||||
|
.v-btn {
|
||||||
|
background-color: map-deep-get($config,
|
||||||
|
#{$theme},
|
||||||
|
"router-tab-slot-end-button-backgroundColor"
|
||||||
|
);
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.border-bottom-1 {
|
.border-bottom-1 {
|
||||||
border-bottom: 1px solid map-deep-get($config, #{$theme}, "border-color");
|
border-bottom: 1px solid map-deep-get($config, #{$theme}, "border-color");
|
||||||
}
|
}
|
||||||
|
|||||||
@ -10,14 +10,6 @@
|
|||||||
&-container {
|
&-container {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
|
|
||||||
.tui-select-box-input {
|
|
||||||
p {
|
|
||||||
font-size: 14px;
|
|
||||||
font-family: inherit
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&-content-area {
|
&-content-area {
|
||||||
@ -31,7 +23,6 @@
|
|||||||
|
|
||||||
&-no-scroll-y {
|
&-no-scroll-y {
|
||||||
.tui-grid-rside-area {
|
.tui-grid-rside-area {
|
||||||
|
|
||||||
.tui-grid-header-area,
|
.tui-grid-header-area,
|
||||||
.tui-grid-summary-area {
|
.tui-grid-summary-area {
|
||||||
margin-right: 0 !important;
|
margin-right: 0 !important;
|
||||||
@ -98,111 +89,14 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.tui-grid-cell {
|
.tui-grid-cell {
|
||||||
input[type=checkbox] {
|
&:last-child {
|
||||||
margin-top: 8px;
|
input[type=checkbox] {
|
||||||
appearance: none;
|
margin-top: 8px;
|
||||||
-webkit-appearance: none;
|
|
||||||
width: 16px;
|
|
||||||
height: 16px;
|
|
||||||
border: 1px solid;
|
|
||||||
border-radius: 2px;
|
|
||||||
cursor: pointer;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
&:checked {
|
|
||||||
&::after {
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
left: 5px;
|
|
||||||
top: 1px;
|
|
||||||
width: 5px;
|
|
||||||
height: 9px;
|
|
||||||
border: solid;
|
|
||||||
border-width: 0 2px 2px 0;
|
|
||||||
transform: rotate(45deg);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.tui-grid-layer-editing {
|
|
||||||
input[type=checkbox] {
|
|
||||||
margin-top: 8px;
|
|
||||||
appearance: none;
|
|
||||||
-webkit-appearance: none;
|
|
||||||
width: 16px;
|
|
||||||
height: 16px;
|
|
||||||
border: 1px solid;
|
|
||||||
border-radius: 2px;
|
|
||||||
cursor: pointer;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
&:checked {
|
|
||||||
&::after {
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
left: 5px;
|
|
||||||
top: 1px;
|
|
||||||
width: 5px;
|
|
||||||
height: 9px;
|
|
||||||
border: solid;
|
|
||||||
border-width: 0 2px 2px 0;
|
|
||||||
transform: rotate(45deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.tui-grid-editor-select-box-layer {
|
|
||||||
min-width: 116px !important;
|
|
||||||
|
|
||||||
.tui-select-box-input {
|
|
||||||
border-radius: 6px;
|
|
||||||
|
|
||||||
.tui-select-box-icon {
|
|
||||||
width: 14px;
|
|
||||||
height: 14px;
|
|
||||||
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-size: contain;
|
|
||||||
margin-top: -20px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.tui-select-box-dropdown {
|
|
||||||
margin-top: 1px;
|
|
||||||
border-radius: 4px;
|
|
||||||
padding: 4px;
|
|
||||||
box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
|
|
||||||
|
|
||||||
|
|
||||||
.tui-select-box-item {
|
|
||||||
font-size: 14px;
|
|
||||||
margin-bottom: 4px;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
&:before {
|
|
||||||
bottom: 0;
|
|
||||||
content: '';
|
|
||||||
left: 0;
|
|
||||||
opacity: 0;
|
|
||||||
pointer-events: none;
|
|
||||||
position: absolute;
|
|
||||||
right: 0;
|
|
||||||
top: 0
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
&::before {
|
|
||||||
opacity: 0.04
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.treeGrid {
|
.treeGrid {
|
||||||
.tui-grid {
|
.tui-grid {
|
||||||
&-header-area {
|
&-header-area {
|
||||||
@ -267,35 +161,6 @@
|
|||||||
#{$theme},
|
#{$theme},
|
||||||
"tui-grid-cell-borderStyle-darkmode"
|
"tui-grid-cell-borderStyle-darkmode"
|
||||||
);
|
);
|
||||||
|
|
||||||
input[type=checkbox] {
|
|
||||||
border-color: map-deep-get($config,
|
|
||||||
#{$theme},
|
|
||||||
"ant-checkbox-border"
|
|
||||||
);
|
|
||||||
background: map-deep-get($config,
|
|
||||||
#{$theme},
|
|
||||||
"ant-checkbox-bg"
|
|
||||||
);
|
|
||||||
|
|
||||||
&:checked {
|
|
||||||
background-color: map-deep-get($config,
|
|
||||||
#{$theme},
|
|
||||||
"ant-btn-primary-bg"
|
|
||||||
);
|
|
||||||
border-color: map-deep-get($config,
|
|
||||||
#{$theme},
|
|
||||||
"ant-btn-primary-bg"
|
|
||||||
);
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
border-color: map-deep-get($config,
|
|
||||||
#{$theme},
|
|
||||||
"ant-checkbox-bg"
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -502,15 +367,6 @@
|
|||||||
// "tui-grid-cell-insert-color"
|
// "tui-grid-cell-insert-color"
|
||||||
// );
|
// );
|
||||||
}
|
}
|
||||||
|
|
||||||
span {
|
|
||||||
&.custom-link {
|
|
||||||
color: map-deep-get($config,
|
|
||||||
#{$theme},
|
|
||||||
"router-tab-item-active-color"
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -697,7 +553,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&-tree-button-expand {
|
&-tree-button-expand {
|
||||||
z-index: 7;
|
z-index: 9999;
|
||||||
|
|
||||||
.tui-grid-btn-tree {
|
.tui-grid-btn-tree {
|
||||||
i {
|
i {
|
||||||
@ -717,7 +573,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&-tree-button-collapse {
|
&-tree-button-collapse {
|
||||||
z-index: 7;
|
z-index: 9999;
|
||||||
|
|
||||||
.tui-grid-btn-tree {
|
.tui-grid-btn-tree {
|
||||||
i {
|
i {
|
||||||
@ -746,185 +602,6 @@
|
|||||||
&-frozen-border {
|
&-frozen-border {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-layer-editing {
|
|
||||||
input[type=checkbox] {
|
|
||||||
border-color: map-deep-get($config,
|
|
||||||
#{$theme},
|
|
||||||
"ant-checkbox-border"
|
|
||||||
);
|
|
||||||
background: map-deep-get($config,
|
|
||||||
#{$theme},
|
|
||||||
"ant-checkbox-bg"
|
|
||||||
);
|
|
||||||
|
|
||||||
&:checked {
|
|
||||||
background-color: map-deep-get($config,
|
|
||||||
#{$theme},
|
|
||||||
"ant-btn-primary-bg"
|
|
||||||
);
|
|
||||||
border-color: map-deep-get($config,
|
|
||||||
#{$theme},
|
|
||||||
"ant-btn-primary-bg"
|
|
||||||
);
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
border-color: map-deep-get($config,
|
|
||||||
#{$theme},
|
|
||||||
"ant-checkbox-bg"
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
select {
|
|
||||||
&.selectbox {
|
|
||||||
background: map-deep-get($config,
|
|
||||||
#{$theme},
|
|
||||||
"tui-grid-cell-backgroundColor"
|
|
||||||
);
|
|
||||||
border-color:map-deep-get($config,
|
|
||||||
#{$theme},
|
|
||||||
"v-input-fieldset-color"
|
|
||||||
);
|
|
||||||
color: map-deep-get($config,
|
|
||||||
#{$theme},
|
|
||||||
"tui-grid-cell-color"
|
|
||||||
);
|
|
||||||
|
|
||||||
.calendarOption {
|
|
||||||
background: map-deep-get($config,
|
|
||||||
#{$theme},
|
|
||||||
"tui-grid-cell-backgroundColor"
|
|
||||||
);
|
|
||||||
border-color:map-deep-get($config,
|
|
||||||
#{$theme},
|
|
||||||
"v-input-fieldset-color"
|
|
||||||
);
|
|
||||||
color: map-deep-get($config,
|
|
||||||
#{$theme},
|
|
||||||
"tui-grid-cell-color"
|
|
||||||
);
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background: #d9d9d9;
|
|
||||||
color: map-deep-get($config,
|
|
||||||
#{$theme},
|
|
||||||
"tui-grid-cell-color"
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:checked {
|
|
||||||
background: #E6F4FF;
|
|
||||||
color: map-deep-get($config,
|
|
||||||
#{$theme},
|
|
||||||
"tui-grid-cell-color"
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.tui-grid-editor-select-box-layer {
|
|
||||||
|
|
||||||
.tui-select-box-input {
|
|
||||||
background: map-deep-get($config,
|
|
||||||
#{$theme},
|
|
||||||
"tui-grid-cell-backgroundColor"
|
|
||||||
);
|
|
||||||
border-color:map-deep-get($config,
|
|
||||||
#{$theme},
|
|
||||||
"v-input-fieldset-color"
|
|
||||||
);
|
|
||||||
color: map-deep-get($config,
|
|
||||||
#{$theme},
|
|
||||||
"tui-grid-cell-color"
|
|
||||||
);
|
|
||||||
|
|
||||||
.tui-select-box-icon {
|
|
||||||
|
|
||||||
@if $theme ==dark {
|
|
||||||
background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2217%22%20height%3D%2216%22%20viewBox%3D%220%200%2017%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20fill%3D%22rgba(255%2C%20255%2C%20255%2C%200.45)%22%20d%3D%22M1.90728%203.65546L8.20371%2012.3358C8.43228%2012.6501%208.90014%2012.6501%209.12692%2012.3358L15.4251%203.65546C15.4406%203.63411%2015.4499%203.60889%2015.452%203.58259C15.454%203.55628%2015.4487%203.52993%2015.4367%203.50644C15.4247%203.48296%2015.4064%203.46326%2015.3839%203.44954C15.3613%203.43581%2015.3354%203.42859%2015.3091%203.42868H13.9698C13.8787%203.42868%2013.793%203.47332%2013.7394%203.54653L8.66621%2010.5394L3.593%203.54653C3.53942%203.47332%203.45371%203.42868%203.36264%203.42868H2.02335C1.90728%203.42868%201.83943%203.56082%201.90728%203.65546Z%22/%3E%3C/svg%3E");
|
|
||||||
}
|
|
||||||
|
|
||||||
@else {
|
|
||||||
background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2217%22%20height%3D%2216%22%20viewBox%3D%220%200%2017%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20fill%3D%22rgba(0%2C%200%2C%200%2C%200.45)%22%20d%3D%22M1.90728%203.65546L8.20371%2012.3358C8.43228%2012.6501%208.90014%2012.6501%209.12692%2012.3358L15.4251%203.65546C15.4406%203.63411%2015.4499%203.60889%2015.452%203.58259C15.454%203.55628%2015.4487%203.52993%2015.4367%203.50644C15.4247%203.48296%2015.4064%203.46326%2015.3839%203.44954C15.3613%203.43581%2015.3354%203.42859%2015.3091%203.42868H13.9698C13.8787%203.42868%2013.793%203.47332%2013.7394%203.54653L8.66621%2010.5394L3.593%203.54653C3.53942%203.47332%203.45371%203.42868%203.36264%203.42868H2.02335C1.90728%203.42868%201.83943%203.56082%201.90728%203.65546Z%22/%3E%3C/svg%3E");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.tui-select-box-dropdown {
|
|
||||||
background-color: map-deep-get($config,
|
|
||||||
#{$theme},
|
|
||||||
"tui-datepicker-backgroundColor"
|
|
||||||
);
|
|
||||||
border: 1px solid map-deep-get($config, #{$theme}, "tui-datepicker-border-color");
|
|
||||||
color: map-deep-get($config, #{$theme}, "tui-datepicker-calendar-color");
|
|
||||||
|
|
||||||
.tui-select-box-item {
|
|
||||||
|
|
||||||
color: map-deep-get($config, #{$theme}, "tui-datepicker-calendar-color");
|
|
||||||
|
|
||||||
&:before {
|
|
||||||
opacity: map-deep-get($config,
|
|
||||||
#{$theme},
|
|
||||||
"selected-bg-opacity"
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.tui-select-box-highlight {
|
|
||||||
background: none !important;
|
|
||||||
|
|
||||||
&:before {
|
|
||||||
background: map-deep-get($config,
|
|
||||||
#{$theme},
|
|
||||||
"tui-grid-cell-color"
|
|
||||||
);
|
|
||||||
opacity: map-deep-get($config,
|
|
||||||
#{$theme},
|
|
||||||
"highlighted-bg-opacity"
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.tui-select-box-selected {
|
|
||||||
background: map-deep-get($config,
|
|
||||||
#{$theme},
|
|
||||||
"v-treeview-node-label-active-bg"
|
|
||||||
);
|
|
||||||
color: map-deep-get($config,
|
|
||||||
#{$theme},
|
|
||||||
"tui-grid-cell-color"
|
|
||||||
);
|
|
||||||
|
|
||||||
&:before {
|
|
||||||
// opacity: map-deep-get($config,
|
|
||||||
// #{$theme},
|
|
||||||
// "selected-bg-opacity"
|
|
||||||
// );
|
|
||||||
background: map-deep-get($config,
|
|
||||||
#{$theme},
|
|
||||||
"ant-btn-primary-bg"
|
|
||||||
) !important;
|
|
||||||
|
|
||||||
|
|
||||||
opacity: map-deep-get($config,
|
|
||||||
#{$theme},
|
|
||||||
"selected-bg-opacity"
|
|
||||||
) !important;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
[class*="tui-grid-tree-wrapper"] {
|
[class*="tui-grid-tree-wrapper"] {
|
||||||
|
|||||||
@ -266,13 +266,6 @@ input[type="checkbox"] {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.ant-checkbox-wrapper-disabled {
|
|
||||||
.ant-checkbox-inner {
|
|
||||||
&.ant-checkbox-inner::after {
|
|
||||||
border-color: map-deep-get($config, #{$theme}, "ant-checkbox-disabled-color") !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.v-input-popup__custom {
|
.v-input-popup__custom {
|
||||||
.v-input__slot {
|
.v-input__slot {
|
||||||
|
|||||||
@ -10,25 +10,13 @@
|
|||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ant-pagination-disabled {
|
|
||||||
color: map-deep-get($config, #{$theme}, "paging-disable") !important;;
|
|
||||||
cursor: not-allowed !important;
|
|
||||||
pointer-events: none; /* disables hover and click */
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ant-pagination-disabled:hover {
|
|
||||||
color: map-deep-get($config, #{$theme}, "paging-disable") !important;;
|
|
||||||
background-color: transparent !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ant-pagination-item,
|
.ant-pagination-item,
|
||||||
.ant-pagination-prev,
|
.ant-pagination-prev,
|
||||||
.ant-pagination-next {
|
.ant-pagination-next {
|
||||||
// border: none !important;
|
// border: none !important;
|
||||||
// box-shadow: none !important;
|
// box-shadow: none !important;
|
||||||
background-color: map-deep-get($config, #{$theme}, "paging-background") !important;
|
background-color: map-deep-get($config, #{$theme}, "paging-background") !important;
|
||||||
color: map-deep-get($config, #{$theme}, "paging-text");
|
color: map-deep-get($config, #{$theme}, "paging-text") !important;
|
||||||
border: none;
|
border: none;
|
||||||
|
|
||||||
.ant-pagination-item-link {
|
.ant-pagination-item-link {
|
||||||
|
|||||||
@ -1,27 +1,18 @@
|
|||||||
.loading-container {
|
.loading {
|
||||||
|
z-index: 99;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 50%;
|
||||||
left: 0;
|
left: 50%;
|
||||||
width: 100vw;
|
width: 100%;
|
||||||
height: 100vh;
|
height: 100%;
|
||||||
display: flex;
|
transform: translate(-50%, -50%);
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
z-index: 9999;
|
|
||||||
background-color: rgba(0, 0, 0, 0.4);
|
background-color: rgba(0, 0, 0, 0.4);
|
||||||
//box-shadow: rgba(68, 67, 67, 0.9) 0 0 0 9999px;
|
//box-shadow: rgba(68, 67, 67, 0.9) 0 0 0 9999px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.loading-img {
|
.v-spinner {
|
||||||
width: 64px;
|
top: 50%;
|
||||||
height: 64px;
|
left: 50%;
|
||||||
animation: spin 3s linear infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes spin {
|
|
||||||
100% {
|
|
||||||
transform: rotate(360deg);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
::v-deep {
|
::v-deep {
|
||||||
@ -191,7 +182,6 @@
|
|||||||
height: calc(100vh - 110px);
|
height: calc(100vh - 110px);
|
||||||
max-height: calc(100vh - 115px);
|
max-height: calc(100vh - 115px);
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
background-color: transparent !important;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.router-tab__slot-end {
|
.router-tab__slot-end {
|
||||||
@ -446,70 +436,6 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.router-tab {
|
|
||||||
.router-tab__header {
|
|
||||||
background-color: map-deep-get($config, #{$theme}, "router-header");
|
|
||||||
border-color: map-deep-get($config, #{$theme}, "router-header");
|
|
||||||
height: 46px;
|
|
||||||
z-index: 7;
|
|
||||||
max-width: calc(100vw - 290px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.router-tab__item {
|
|
||||||
background-color: map-deep-get($config, #{$theme}, "router-tab-item");
|
|
||||||
border-color: map-deep-get($config, #{$theme}, "router-tab-item");
|
|
||||||
color: map-deep-get($config, #{$theme}, "router-tab-item-color");
|
|
||||||
|
|
||||||
&:not(.is-active) {
|
|
||||||
&:hover {
|
|
||||||
&>span {
|
|
||||||
color: map-deep-get($config,
|
|
||||||
#{$theme},
|
|
||||||
"router-tab-item-hover-color"
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.v-icon {
|
|
||||||
color: map-deep-get($config, #{$theme}, "router-tab-item-icon-color");
|
|
||||||
}
|
|
||||||
|
|
||||||
&.is-active {
|
|
||||||
background-color: map-deep-get($config,
|
|
||||||
#{$theme},
|
|
||||||
"router-tab-item-active"
|
|
||||||
);
|
|
||||||
border-color: map-deep-get($config,
|
|
||||||
#{$theme},
|
|
||||||
"router-tab-item-active-color"
|
|
||||||
) !important;
|
|
||||||
color: map-deep-get($config,
|
|
||||||
#{$theme},
|
|
||||||
"router-tab-item-active-color"
|
|
||||||
);
|
|
||||||
|
|
||||||
.v-icon {
|
|
||||||
color: map-deep-get($config,
|
|
||||||
#{$theme},
|
|
||||||
"router-tab-item-icon-active-color"
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.router-tab__slot-end {
|
|
||||||
.v-btn {
|
|
||||||
background-color: map-deep-get($config,
|
|
||||||
#{$theme},
|
|
||||||
"router-tab-slot-end-button-backgroundColor"
|
|
||||||
);
|
|
||||||
box-shadow: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,3 +1,10 @@
|
|||||||
|
// @import './var.scss';
|
||||||
|
// @import './functions.scss';
|
||||||
|
// @import './mixin.scss';
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// @each $theme in dark, light{
|
// @each $theme in dark, light{
|
||||||
// @include theme($theme);
|
// @include theme($theme);
|
||||||
// .v-application.#{$theme}-mode{
|
// .v-application.#{$theme}-mode{
|
||||||
|
|||||||
@ -184,13 +184,7 @@ $config: (
|
|||||||
ant-btn-popup-border: #424242,
|
ant-btn-popup-border: #424242,
|
||||||
paging-background: #212224,
|
paging-background: #212224,
|
||||||
paging-text: #FFFFFFD9,
|
paging-text: #FFFFFFD9,
|
||||||
paging-disable: #FFFFFF40,
|
|
||||||
icon-datepicker-color: #FFFFFF73,
|
icon-datepicker-color: #FFFFFF73,
|
||||||
selected-bg-opacity: 0.32,
|
|
||||||
highlighted-bg-opacity: 0.08,
|
|
||||||
ant-checkbox-disabled-bg: #FFFFFF14,
|
|
||||||
ant-checkbox-disabled-border: #424242,
|
|
||||||
ant-checkbox-disabled-color: #FFFFFF40,
|
|
||||||
),
|
),
|
||||||
light: (w-g5: $--color-gray_555,
|
light: (w-g5: $--color-gray_555,
|
||||||
g5-w: $--color-white,
|
g5-w: $--color-white,
|
||||||
@ -338,12 +332,6 @@ $config: (
|
|||||||
ant-btn-popup-border: #D9D9D9,
|
ant-btn-popup-border: #D9D9D9,
|
||||||
paging-background: #FFFFFF,
|
paging-background: #FFFFFF,
|
||||||
paging-text: #000000E0,
|
paging-text: #000000E0,
|
||||||
paging-disable: #00000040,
|
|
||||||
icon-datepicker-color: #00000073,
|
icon-datepicker-color: #00000073,
|
||||||
selected-bg-opacity: 0.16,
|
|
||||||
highlighted-bg-opacity: 0.04,
|
|
||||||
ant-checkbox-disabled-bg: #0000000A,
|
|
||||||
ant-checkbox-disabled-border: #D9D9D9,
|
|
||||||
ant-checkbox-disabled-color: #00000040,
|
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
@ -112,6 +112,7 @@ export default {
|
|||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
@import '@/assets/scss/var.scss';
|
||||||
@each $theme in dark, light {
|
@each $theme in dark, light {
|
||||||
.v-application.#{$theme}-mode {
|
.v-application.#{$theme}-mode {
|
||||||
.mdi-account {
|
.mdi-account {
|
||||||
|
|||||||
@ -180,6 +180,8 @@ const myDetail = [];
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
@import '@/assets/scss/var.scss';
|
||||||
|
@import '@/assets/scss/mixin.scss';
|
||||||
|
|
||||||
::-webkit-scrollbar {
|
::-webkit-scrollbar {
|
||||||
width: 0px;
|
width: 0px;
|
||||||
|
|||||||
@ -431,6 +431,8 @@ export default {
|
|||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
// @import "@/assets/scss/datepicker.scss";
|
||||||
|
|
||||||
::v-deep {
|
::v-deep {
|
||||||
.tui-timepicker-row {
|
.tui-timepicker-row {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|||||||
@ -539,6 +539,7 @@ export default {
|
|||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
@import "@/assets/scss/datepicker.scss";
|
||||||
|
|
||||||
::v-deep {
|
::v-deep {
|
||||||
.tui-timepicker-row {
|
.tui-timepicker-row {
|
||||||
|
|||||||
@ -405,6 +405,8 @@ export default {
|
|||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
@import "@/assets/scss/datepicker.scss";
|
||||||
|
|
||||||
::v-deep {
|
::v-deep {
|
||||||
.tui-timepicker-row {
|
.tui-timepicker-row {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|||||||
@ -355,6 +355,8 @@ export default {
|
|||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
@import "@/assets/scss/datepicker.scss";
|
||||||
|
|
||||||
::v-deep {
|
::v-deep {
|
||||||
.tui-timepicker-row {
|
.tui-timepicker-row {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|||||||
@ -160,6 +160,7 @@ export default {
|
|||||||
},
|
},
|
||||||
created() { },
|
created() { },
|
||||||
async mounted() {
|
async mounted() {
|
||||||
|
// console.log(this.dataPath);
|
||||||
if (this.gridName) {
|
if (this.gridName) {
|
||||||
this.gridInstance = this.$refs['tuigrid' + this.gridName];
|
this.gridInstance = this.$refs['tuigrid' + this.gridName];
|
||||||
|
|
||||||
@ -173,8 +174,9 @@ export default {
|
|||||||
this.gridScrollTop = e.target.scrollTop;
|
this.gridScrollTop = e.target.scrollTop;
|
||||||
this.gridScrollLeft = e.target.scrollLeft;
|
this.gridScrollLeft = e.target.scrollLeft;
|
||||||
});
|
});
|
||||||
|
if (this.scrollBody.scrollHeight > this.scrollBody.clientHeight) {
|
||||||
if (!(this.scrollBody.scrollHeight > this.scrollBody.clientHeight)) {
|
this.gridInstance.$el.getElementsByClassName('tui-grid-content-area')[0].classList.remove('tui-grid-no-scroll-y');
|
||||||
|
} else {
|
||||||
this.gridInstance.$el.getElementsByClassName('tui-grid-content-area')[0].classList.add('tui-grid-no-scroll-y');
|
this.gridInstance.$el.getElementsByClassName('tui-grid-content-area')[0].classList.add('tui-grid-no-scroll-y');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -271,9 +273,12 @@ export default {
|
|||||||
});
|
});
|
||||||
},
|
},
|
||||||
focusChangeEvt(e) {
|
focusChangeEvt(e) {
|
||||||
|
// console.log('focusChangeEvt1...')
|
||||||
if (this.preventFocusChangeEvent(e)) {
|
if (this.preventFocusChangeEvent(e)) {
|
||||||
|
// console.log('prevent focusChangeEvt')
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
// console.log('focusChangeEvt2...')
|
||||||
// cell 선택시 row 선택 method
|
// cell 선택시 row 선택 method
|
||||||
if (e.rowKey > -1) {
|
if (e.rowKey > -1) {
|
||||||
this.$emit(
|
this.$emit(
|
||||||
@ -288,6 +293,7 @@ export default {
|
|||||||
this.sendSelectedRowData(e.rowKey);
|
this.sendSelectedRowData(e.rowKey);
|
||||||
},
|
},
|
||||||
startEditing(e) {
|
startEditing(e) {
|
||||||
|
// console.log('startEditing1...')
|
||||||
if (this.preventFocusChangeEvent(e)) {
|
if (this.preventFocusChangeEvent(e)) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
@ -297,6 +303,7 @@ export default {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// console.log('startEditing2...')
|
||||||
if (this.editorGrid && e.rowKey >= 0) {
|
if (this.editorGrid && e.rowKey >= 0) {
|
||||||
this.editorStartKey = e.rowKey;
|
this.editorStartKey = e.rowKey;
|
||||||
this.gridInstance.invoke('startEditing', e.rowKey, e.columnName, 'row-modify');
|
this.gridInstance.invoke('startEditing', e.rowKey, e.columnName, 'row-modify');
|
||||||
@ -310,6 +317,7 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
async editingFinish(e) {
|
async editingFinish(e) {
|
||||||
|
// console.log("Editing END E::", e);
|
||||||
// editor 간 이동시 수정되는 문제 수정
|
// editor 간 이동시 수정되는 문제 수정
|
||||||
// e.rowEditingFg: grid의 한 row를 한번에 수정할 시 각각의 cell 마다 click 이벤트가 발생하지 않아 this.editorStartKey값이 제대로 입력 되지 않는 경우를 대비하여 만든 Fg
|
// e.rowEditingFg: grid의 한 row를 한번에 수정할 시 각각의 cell 마다 click 이벤트가 발생하지 않아 this.editorStartKey값이 제대로 입력 되지 않는 경우를 대비하여 만든 Fg
|
||||||
if (this.editorGrid) {
|
if (this.editorGrid) {
|
||||||
@ -332,6 +340,7 @@ export default {
|
|||||||
rowKey: rowIdxKey,
|
rowKey: rowIdxKey,
|
||||||
};
|
};
|
||||||
const isBaseRow = this.isBaseDataRow(rowIdxKey);
|
const isBaseRow = this.isBaseDataRow(rowIdxKey);
|
||||||
|
// console.log("END E::", rowIdxKey, e);
|
||||||
const rowStat = this.gridInstance.invoke('getRow', rowIdxKey).rowStat;
|
const rowStat = this.gridInstance.invoke('getRow', rowIdxKey).rowStat;
|
||||||
if (rowStat == 'D') {
|
if (rowStat == 'D') {
|
||||||
this.gridInstance.invoke(
|
this.gridInstance.invoke(
|
||||||
@ -512,7 +521,10 @@ export default {
|
|||||||
return item.rowKey == data.rowKey;
|
return item.rowKey == data.rowKey;
|
||||||
});
|
});
|
||||||
let count = 0;
|
let count = 0;
|
||||||
|
// console.log("dataKeyArr", dataKeyArr);
|
||||||
|
// console.log("selectedRowData", selectedRowData);
|
||||||
for (let i = 0; i < dataKeyArr.length; i++) {
|
for (let i = 0; i < dataKeyArr.length; i++) {
|
||||||
|
// console.log(dataKeyArr[i], selectedRowData[dataKeyArr[i]], rowData[dataKeyArr[i]]);
|
||||||
if (selectedRowData[dataKeyArr[i]] == rowData[dataKeyArr[i]]) {
|
if (selectedRowData[dataKeyArr[i]] == rowData[dataKeyArr[i]]) {
|
||||||
count++;
|
count++;
|
||||||
}
|
}
|
||||||
@ -582,6 +594,7 @@ export default {
|
|||||||
delete item.rowKey;
|
delete item.rowKey;
|
||||||
return item;
|
return item;
|
||||||
});
|
});
|
||||||
|
// console.log("dataArr::", dataArr, saveTargetRows);
|
||||||
return dataArr;
|
return dataArr;
|
||||||
},
|
},
|
||||||
getData() {
|
getData() {
|
||||||
@ -594,6 +607,7 @@ export default {
|
|||||||
return this.gridInstance.invoke('getCheckedRowKeys');
|
return this.gridInstance.invoke('getCheckedRowKeys');
|
||||||
},
|
},
|
||||||
setCheck(list) {
|
setCheck(list) {
|
||||||
|
// console.log("setCheck:: ", list);
|
||||||
list.map(item => this.gridInstance.invoke('check', item));
|
list.map(item => this.gridInstance.invoke('check', item));
|
||||||
},
|
},
|
||||||
refreshLayout() {
|
refreshLayout() {
|
||||||
@ -603,11 +617,14 @@ export default {
|
|||||||
// this.gridInstance.invoke('refreshLayout');
|
// this.gridInstance.invoke('refreshLayout');
|
||||||
},
|
},
|
||||||
refreshGrid() {
|
refreshGrid() {
|
||||||
|
// console.log("refreshLayout",this.$refs['tuigrid' + this.gridName])
|
||||||
var store = this.$refs['tuigrid' + this.gridName].gridInstance.store;
|
var store = this.$refs['tuigrid' + this.gridName].gridInstance.store;
|
||||||
var containerEl = this.$refs['tuigrid' + this.gridName].$el;
|
var containerEl = this.$refs['tuigrid' + this.gridName].$el;
|
||||||
// var containerEl = document.querySelector('.tui-grid-container')
|
// var containerEl = document.querySelector('.tui-grid-container')
|
||||||
var parentEl = containerEl.parentElement;
|
var parentEl = containerEl.parentElement;
|
||||||
|
|
||||||
|
// console.log("---------DEBUG---containerEl: ",containerEl);
|
||||||
|
// console.log('---------DEBUG---parentEl: ', parentEl)
|
||||||
// function refreshLayout(store, containerEl, parentEl) {
|
// function refreshLayout(store, containerEl, parentEl) {
|
||||||
var dimension = store.dimension;
|
var dimension = store.dimension;
|
||||||
var autoWidth = dimension.autoWidth, fitToParentHeight = dimension.fitToParentHeight;
|
var autoWidth = dimension.autoWidth, fitToParentHeight = dimension.fitToParentHeight;
|
||||||
@ -620,6 +637,11 @@ export default {
|
|||||||
this.setWidth(store, clientWidth, autoWidth);
|
this.setWidth(store, clientWidth, autoWidth);
|
||||||
// store.dimension.autoWidth = autoWidth;
|
// store.dimension.autoWidth = autoWidth;
|
||||||
// store.dimension.width = clientWidth;
|
// store.dimension.width = clientWidth;
|
||||||
|
// console.log("###",getComputedStyle(parentEl));
|
||||||
|
// console.log("fitToParentHeight : ",fitToParentHeight);
|
||||||
|
// console.log("parentEl : ",parentEl)
|
||||||
|
// console.log("parentEl.clientHeight" , parentEl.clientHeight)
|
||||||
|
// console.log("clientHeight : ",clientHeight);
|
||||||
if (parentEl && parentEl.clientHeight !== clientHeight) {
|
if (parentEl && parentEl.clientHeight !== clientHeight) {
|
||||||
var _b = getComputedStyle(parentEl), paddingTop = _b.paddingTop, paddingBottom = _b.paddingBottom;
|
var _b = getComputedStyle(parentEl), paddingTop = _b.paddingTop, paddingBottom = _b.paddingBottom;
|
||||||
this.setHeight(store, parentEl.clientHeight - (parseFloat(paddingTop) + parseFloat(paddingBottom)));
|
this.setHeight(store, parentEl.clientHeight - (parseFloat(paddingTop) + parseFloat(paddingBottom)));
|
||||||
@ -627,20 +649,25 @@ export default {
|
|||||||
// }
|
// }
|
||||||
},
|
},
|
||||||
setOffsetTop(store, offsetTop) {
|
setOffsetTop(store, offsetTop) {
|
||||||
|
// console.log("---------DEBUG---setOffsetTop: ");
|
||||||
store.dimension.offsetTop = offsetTop;
|
store.dimension.offsetTop = offsetTop;
|
||||||
},
|
},
|
||||||
setWidth(_a, width, autoWidth) {
|
setWidth(_a, width, autoWidth) {
|
||||||
|
// console.log("---------DEBUG---setWidth: ");
|
||||||
var dimension = _a.dimension;
|
var dimension = _a.dimension;
|
||||||
dimension.autoWidth = autoWidth;
|
dimension.autoWidth = autoWidth;
|
||||||
dimension.width = width;
|
dimension.width = width;
|
||||||
},
|
},
|
||||||
setHeaderHeight(store, height) {
|
setHeaderHeight(store, height) {
|
||||||
|
// console.log("---------DEBUG---setHeaderHeight: ");
|
||||||
store.dimension.headerHeight = height;
|
store.dimension.headerHeight = height;
|
||||||
},
|
},
|
||||||
setOffsetLeft(store, offsetLeft) {
|
setOffsetLeft(store, offsetLeft) {
|
||||||
|
// console.log("---------DEBUG---setOffsetLeft: ");
|
||||||
store.dimension.offsetLeft = offsetLeft;
|
store.dimension.offsetLeft = offsetLeft;
|
||||||
},
|
},
|
||||||
setHeight(_a, height) {
|
setHeight(_a, height) {
|
||||||
|
// console.log("---------DEBUG---setHeight: ");
|
||||||
var dimension = _a.dimension;
|
var dimension = _a.dimension;
|
||||||
var headerHeight = dimension.headerHeight, summaryHeight = dimension.summaryHeight, tableBorderWidth = dimension.tableBorderWidth;
|
var headerHeight = dimension.headerHeight, summaryHeight = dimension.summaryHeight, tableBorderWidth = dimension.tableBorderWidth;
|
||||||
dimension.bodyHeight = height - headerHeight - summaryHeight - tableBorderWidth;
|
dimension.bodyHeight = height - headerHeight - summaryHeight - tableBorderWidth;
|
||||||
@ -669,6 +696,7 @@ export default {
|
|||||||
});
|
});
|
||||||
},
|
},
|
||||||
// resetData() {
|
// resetData() {
|
||||||
|
// // console.log("resetData = ", this.tuigridProps.data);
|
||||||
// this.$refs.tuigrid.invoke("resetData", this.tuigridProps.data);
|
// this.$refs.tuigrid.invoke("resetData", this.tuigridProps.data);
|
||||||
// },
|
// },
|
||||||
},
|
},
|
||||||
|
|||||||
@ -317,6 +317,8 @@ export default {
|
|||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
@import "@/assets/scss/datepicker.scss";
|
||||||
|
|
||||||
::v-deep {
|
::v-deep {
|
||||||
.tui-timepicker-row {
|
.tui-timepicker-row {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|||||||
@ -13,7 +13,6 @@ export default {
|
|||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
mode: null,
|
mode: null,
|
||||||
// isLoading: false
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
@ -29,10 +28,11 @@ export default {
|
|||||||
setThemeChange: 'setThemeChange',
|
setThemeChange: 'setThemeChange',
|
||||||
}),
|
}),
|
||||||
themeChange() {
|
themeChange() {
|
||||||
// this.isLoading = true;
|
|
||||||
this.mode = !this.mode;
|
this.mode = !this.mode;
|
||||||
this.$vuetify.theme.isDark = this.mode;
|
this.$vuetify.theme.isDark = this.mode;
|
||||||
this.setThemeChange(this.mode);
|
this.setThemeChange(this.mode);
|
||||||
|
// console.log(this.mode)
|
||||||
|
// console.log(this.$vuetify.theme.isDark)
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|||||||
@ -1,6 +1,5 @@
|
|||||||
// Gauge chart options
|
// Gauge chart options
|
||||||
export default function getGaugeChartOption({ title, min = 0, max = 160, unit = '%', isDarkMode = false, backgroundRadius = 97,
|
export default function getGaugeChartOption({ title, min = 0, max = 160, unit = '%', isDarkMode = false, backgroundRadius = 97 }) {
|
||||||
value = 0 }) {
|
|
||||||
const colorRanges = isDarkMode
|
const colorRanges = isDarkMode
|
||||||
? [
|
? [
|
||||||
[60 / 160, '#49AA19'], // Dark Green
|
[60 / 160, '#49AA19'], // Dark Green
|
||||||
@ -25,9 +24,6 @@ export default function getGaugeChartOption({ title, min = 0, max = 160, unit =
|
|||||||
// [0.8, "#f7931e"],
|
// [0.8, "#f7931e"],
|
||||||
// [1.0, "#ed1c24"],
|
// [1.0, "#ed1c24"],
|
||||||
// ];
|
// ];
|
||||||
|
|
||||||
const valueLength = String(value).length;
|
|
||||||
const dynamicFontSize = valueLength >= 4 ? 21 : 30;
|
|
||||||
return {
|
return {
|
||||||
grid: {
|
grid: {
|
||||||
// top: '-10%',
|
// top: '-10%',
|
||||||
@ -113,7 +109,7 @@ export default function getGaugeChartOption({ title, min = 0, max = 160, unit =
|
|||||||
valueAnimation: true,
|
valueAnimation: true,
|
||||||
fontWeight: 500, // or "normal", "lighter", "bolder", or a number like 600
|
fontWeight: 500, // or "normal", "lighter", "bolder", or a number like 600
|
||||||
fontFamily: "Oxanium, sans-serif", // or any custom font
|
fontFamily: "Oxanium, sans-serif", // or any custom font
|
||||||
fontSize: dynamicFontSize,
|
fontSize: 30,
|
||||||
lineHeight: 25,
|
lineHeight: 25,
|
||||||
offsetCenter: [0, "60%"],
|
offsetCenter: [0, "60%"],
|
||||||
color: isDarkMode ? "#fff" : "#333333",
|
color: isDarkMode ? "#fff" : "#333333",
|
||||||
@ -134,7 +130,7 @@ export default function getGaugeChartOption({ title, min = 0, max = 160, unit =
|
|||||||
},
|
},
|
||||||
data: [
|
data: [
|
||||||
{
|
{
|
||||||
value: value,
|
value: 16,
|
||||||
name: "에너지사용효율", // "Energy Usage Efficiency"
|
name: "에너지사용효율", // "Energy Usage Efficiency"
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
|
|||||||
@ -683,6 +683,7 @@ const myColumns = [
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
@import '@/assets/scss/var.scss';
|
||||||
@each $theme in dark, light {
|
@each $theme in dark, light {
|
||||||
.v-application.#{$theme}-mode {
|
.v-application.#{$theme}-mode {
|
||||||
.tui-grid {
|
.tui-grid {
|
||||||
|
|||||||
@ -408,6 +408,7 @@ var eqpmDetlPop = {
|
|||||||
// 전력량 요금(원/kWh)
|
// 전력량 요금(원/kWh)
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
// @import '@/assets/scss/common/grid.scss';
|
||||||
.tui-grid-scrollbar-left-bottom {
|
.tui-grid-scrollbar-left-bottom {
|
||||||
display: none !important;
|
display: none !important;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -329,6 +329,7 @@ var gdIdxDetPop = {
|
|||||||
// 전력량 요금(원/kWh)
|
// 전력량 요금(원/kWh)
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
// @import '@/assets/scss/common/grid.scss';
|
||||||
.tui-grid-scrollbar-left-bottom {
|
.tui-grid-scrollbar-left-bottom {
|
||||||
display: none !important;
|
display: none !important;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -8,22 +8,12 @@
|
|||||||
</label>
|
</label>
|
||||||
</v-col>
|
</v-col>
|
||||||
<v-col :cols="option.textCols" class="py-0">
|
<v-col :cols="option.textCols" class="py-0">
|
||||||
<v-text-field
|
<v-text-field readonly append-icon="" :class="['v-select__custom', customClass]" outlined :hide-details="true"
|
||||||
readonly
|
v-model="selectValue" @keyup.enter="typeEnterKey" @click="dialogOpenCloseEvent(dialog)" style="padding: 0;"
|
||||||
v-model="selectValue"
|
:required="item.required || false"><template v-slot:append>
|
||||||
append-icon="mdi-magnify"
|
<!-- Custom SVG icon -->
|
||||||
:class="['v-select__custom', customClass]"
|
<v-icon>$icoSearch</v-icon>
|
||||||
@click="dialogOpenCloseEvent(dialog)"
|
</template></v-text-field>
|
||||||
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-col>
|
||||||
|
|
||||||
<v-dialog v-model="dialog" scrollable width="1000px">
|
<v-dialog v-model="dialog" scrollable width="1000px">
|
||||||
|
|||||||
@ -68,6 +68,18 @@ export default {
|
|||||||
loadGrid: false,
|
loadGrid: false,
|
||||||
gridName: 'rowDataSetTagRelGrid',
|
gridName: 'rowDataSetTagRelGrid',
|
||||||
detailDataSetTagList: myDataSetTagDetail,
|
detailDataSetTagList: myDataSetTagDetail,
|
||||||
|
dataPathMock: {
|
||||||
|
"rowDataSetTagRelGrid": {
|
||||||
|
column: [
|
||||||
|
{ header: 'TAG ID', name: 'id', headerAlign: 'left' },
|
||||||
|
{ header: 'TAG 명', name: 'name', headerAlign: 'left' },
|
||||||
|
{ header: '모델 Data 구분', name: 'type', headerAlign: 'left' }
|
||||||
|
],
|
||||||
|
data: dataPathDataExample,
|
||||||
|
defaultRow: dataPathDataExample,
|
||||||
|
option: {}
|
||||||
|
}
|
||||||
|
},
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
|||||||
@ -112,10 +112,10 @@ export default {
|
|||||||
bodyHeight: gridHeight,
|
bodyHeight: gridHeight,
|
||||||
minBodyHeight: gridHeight,
|
minBodyHeight: gridHeight,
|
||||||
header: {
|
header: {
|
||||||
height: 37,
|
height: 28,
|
||||||
},
|
},
|
||||||
rowHeight: 37,
|
rowHeight: 29,
|
||||||
minRowHeight: 37,
|
minRowHeight: 29,
|
||||||
selectionUnit: 'row',
|
selectionUnit: 'row',
|
||||||
editingEvent: 'click',
|
editingEvent: 'click',
|
||||||
};
|
};
|
||||||
|
|||||||
@ -270,14 +270,12 @@ export default {
|
|||||||
async getRowData(data, gridName) {
|
async getRowData(data, gridName) {
|
||||||
if (data.rowStat === 'I') {
|
if (data.rowStat === 'I') {
|
||||||
this.detailList[0].disabled = false;
|
this.detailList[0].disabled = false;
|
||||||
this.detailList[1].disabled = false;
|
|
||||||
this.detailList[2].disabled = false;
|
this.detailList[2].disabled = false;
|
||||||
this.detailList[3].disabled = false;
|
this.detailList[3].disabled = false;
|
||||||
this.detailList[4].disabled = false;
|
this.detailList[4].disabled = false;
|
||||||
this.detailList[5].disabled = false;
|
this.detailList[5].disabled = false;
|
||||||
} else {
|
} else {
|
||||||
this.detailList[0].disabled = true;
|
this.detailList[0].disabled = true;
|
||||||
this.detailList[1].disabled = true;
|
|
||||||
this.detailList[2].disabled = true;
|
this.detailList[2].disabled = true;
|
||||||
this.detailList[3].disabled = true;
|
this.detailList[3].disabled = true;
|
||||||
this.detailList[4].disabled = true;
|
this.detailList[4].disabled = true;
|
||||||
@ -296,7 +294,6 @@ export default {
|
|||||||
case 'add':
|
case 'add':
|
||||||
this.$refs[this.gridName].addRow();
|
this.$refs[this.gridName].addRow();
|
||||||
this.detailList[0].disabled = false;
|
this.detailList[0].disabled = false;
|
||||||
this.detailList[1].disabled = false;
|
|
||||||
this.detailList[2].disabled = false;
|
this.detailList[2].disabled = false;
|
||||||
this.detailList[3].disabled = false;
|
this.detailList[3].disabled = false;
|
||||||
this.detailList[4].disabled = false;
|
this.detailList[4].disabled = false;
|
||||||
@ -379,6 +376,7 @@ const myDetail = [
|
|||||||
{
|
{
|
||||||
type: 'SelectBox',
|
type: 'SelectBox',
|
||||||
label: '대상 유형',
|
label: '대상 유형',
|
||||||
|
disabled: false,
|
||||||
cols: 6,
|
cols: 6,
|
||||||
class: 'pr-4 py-2 mt-1',
|
class: 'pr-4 py-2 mt-1',
|
||||||
list: 'emMapDivList',
|
list: 'emMapDivList',
|
||||||
@ -394,7 +392,6 @@ const myDetail = [
|
|||||||
{
|
{
|
||||||
type: 'ReadPlcPop',
|
type: 'ReadPlcPop',
|
||||||
label: '대상 항목',
|
label: '대상 항목',
|
||||||
modalTitle:'대상 항목',
|
|
||||||
valueNm: 'objId',
|
valueNm: 'objId',
|
||||||
disabled: true,
|
disabled: true,
|
||||||
cols: 6,
|
cols: 6,
|
||||||
@ -403,7 +400,8 @@ const myDetail = [
|
|||||||
bindNm: 'objNm',
|
bindNm: 'objNm',
|
||||||
labelCols: 12,
|
labelCols: 12,
|
||||||
textCols: 12,
|
textCols: 12,
|
||||||
disableContent: true,
|
iconShow: true,
|
||||||
|
noText: true,
|
||||||
iconShow: true,
|
iconShow: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@ -482,7 +480,6 @@ const myDetail = [
|
|||||||
disabledFg: 'objKind',
|
disabledFg: 'objKind',
|
||||||
labelCols: 12,
|
labelCols: 12,
|
||||||
textCols: 12,
|
textCols: 12,
|
||||||
iconShow: true,
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: 'InputText',
|
type: 'InputText',
|
||||||
|
|||||||
@ -205,8 +205,8 @@ export default {
|
|||||||
header: {
|
header: {
|
||||||
height: 38,
|
height: 38,
|
||||||
},
|
},
|
||||||
rowHeight: 37,
|
rowHeight: 29,
|
||||||
minRowHeight: 37,
|
minRowHeight: 29,
|
||||||
selectionUnit: 'row',
|
selectionUnit: 'row',
|
||||||
editingEvent: 'click',
|
editingEvent: 'click',
|
||||||
};
|
};
|
||||||
@ -383,15 +383,5 @@ function numberFormatter({ value }) {
|
|||||||
.tab-datepicker {
|
.tab-datepicker {
|
||||||
width: 64% !important;
|
width: 64% !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tui-grid-layer-state {
|
|
||||||
top: 40px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tui-grid-layer-selection,
|
|
||||||
.tui-grid-cell-content-editor{
|
|
||||||
height: 36px !important;
|
|
||||||
// border: none;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
@ -149,14 +149,160 @@
|
|||||||
<v-icon size="20" class="ml-2" v-if="closable" @click.stop="onCloseTab(to)">mdi-close</v-icon>
|
<v-icon size="20" class="ml-2" v-if="closable" @click.stop="onCloseTab(to)">mdi-close</v-icon>
|
||||||
</template>
|
</template>
|
||||||
<template #end v-if="false">
|
<template #end v-if="false">
|
||||||
|
<v-menu offset-y>
|
||||||
|
<template v-slot:activator="{ on, attrs }">
|
||||||
|
<!-- <v-btn :ripple="false" tile class="btn-close" v-bind="attrs" v-on="on">
|
||||||
|
<span class="body-2">닫기</span>
|
||||||
|
<v-icon size="20">mdi-chevron-down</v-icon>
|
||||||
|
</v-btn> -->
|
||||||
|
<a-button style="width: 80px; height: 36px" class="btn-close">
|
||||||
|
<span class="body-2">닫기</span>
|
||||||
|
<v-icon size="20">mdi-chevron-down</v-icon></a-button>
|
||||||
|
</template>
|
||||||
|
<v-list class="py-2 btn-close-menu-list" >
|
||||||
|
<v-list-item class="px-2">
|
||||||
|
<v-list-item-title @click="delAllTabsData()" class="body-2">전체 닫기</v-list-item-title>
|
||||||
|
</v-list-item>
|
||||||
|
<v-list-item class="px-2">
|
||||||
|
<v-list-item-title @click="deleteSblingsTab()" class="body-2">나머지 닫기</v-list-item-title>
|
||||||
|
</v-list-item>
|
||||||
|
</v-list>
|
||||||
|
</v-menu>
|
||||||
|
<v-menu offset-y>
|
||||||
|
<template v-slot:activator="{ on, attrs }">
|
||||||
|
<!-- <v-btn
|
||||||
|
:ripple="false"
|
||||||
|
tile
|
||||||
|
class="btn-close"
|
||||||
|
v-bind="attrs"
|
||||||
|
v-on="on"
|
||||||
|
style="width: 100px"
|
||||||
|
>
|
||||||
|
<span class="body-2">즐겨찾기</span>
|
||||||
|
<v-icon size="20">mdi-chevron-down</v-icon>
|
||||||
|
</v-btn> -->
|
||||||
|
<a-button style="width: 100px; height: 36px" class="btn-close">
|
||||||
|
<span class="body-2">즐겨찾기</span>
|
||||||
|
<v-icon size="20">mdi-chevron-down</v-icon></a-button>
|
||||||
|
</template>
|
||||||
|
<v-list v-if="myMenuList.length > 0" class="py-2 btn-close-menu-list" >
|
||||||
|
<v-list-item v-for="item in myMenuList" :key="item.menuId" class="px-2" style="cursor: pointer">
|
||||||
|
<v-list-item-title @click="moveToMyMenu(item.url, item.menuId, item.prgmId)" class="body-2">{{
|
||||||
|
item.menuNm
|
||||||
|
}}</v-list-item-title>
|
||||||
|
</v-list-item>
|
||||||
|
</v-list>
|
||||||
|
</v-menu>
|
||||||
|
<a-button id="refresh" :style="{
|
||||||
|
padding: '0',
|
||||||
|
width: '36px',
|
||||||
|
height: '36px',
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
borderRadius: '4px', // square corners
|
||||||
|
}" type="text" @click="removeBookMark" v-if="bookmarkBtn == 1">
|
||||||
|
<span class="material-icons" style="font-size: 17px; vertical-align: middle">star</span>
|
||||||
|
</a-button>
|
||||||
|
<a-button id="refresh" :style="{
|
||||||
|
padding: '0',
|
||||||
|
width: '36px',
|
||||||
|
height: '36px',
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
borderRadius: '4px', // square corners
|
||||||
|
}" type="text" @click="addBookMark" v-if="bookmarkBtn == 0">
|
||||||
|
<span class="material-icons" style="font-size: 17px; vertical-align: middle">star_border</span>
|
||||||
|
</a-button>
|
||||||
|
<v-btn style="
|
||||||
|
background-color: white;
|
||||||
|
color: #fff;
|
||||||
|
border: 0.2px solid rgb(217, 217, 217);
|
||||||
|
" id="refresh" icon tile :ripple="false" @click="refreshTab()">
|
||||||
|
<v-icon style="color: rgba(0, 0, 0, 0.54)">mdi-refresh</v-icon>
|
||||||
|
</v-btn>
|
||||||
|
<v-btn style="
|
||||||
|
background-color: white;
|
||||||
|
color: #fff;
|
||||||
|
border: 0.2px solid rgb(217, 217, 217);
|
||||||
|
" icon tile :ripple="false" @click="toggle()">
|
||||||
|
<v-icon style="color: rgba(0, 0, 0, 0.54)" v-if="!fullscreen">mdi-arrow-expand-all</v-icon>
|
||||||
|
<v-icon style="color: rgba(0, 0, 0, 0.54)" v-else>mdi-arrow-collapse-all</v-icon>
|
||||||
|
</v-btn>
|
||||||
|
<!-- <v-btn
|
||||||
|
icon
|
||||||
|
tile
|
||||||
|
:ripple="false"
|
||||||
|
@click="removeBookMark()"
|
||||||
|
v-if="bookmarkBtn == 1"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="material-icons"
|
||||||
|
style="font-size: 17px; vertical-align: middle"
|
||||||
|
>star</span
|
||||||
|
>
|
||||||
|
</v-btn> -->
|
||||||
|
<!-- <v-btn
|
||||||
|
icon
|
||||||
|
tile
|
||||||
|
:ripple="false"
|
||||||
|
@click="addBookMark()"
|
||||||
|
v-if="bookmarkBtn == 0"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="material-icons"
|
||||||
|
style="font-size: 17px; vertical-align: middle"
|
||||||
|
>star_border</span
|
||||||
|
>
|
||||||
|
</v-btn> -->
|
||||||
|
<!-- <a-button
|
||||||
|
id="refresh"
|
||||||
|
:style="{
|
||||||
|
padding: '0',
|
||||||
|
width: '36px',
|
||||||
|
height: '36px',
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
borderRadius: '4px', // square corners
|
||||||
|
}"
|
||||||
|
type="text"
|
||||||
|
@click="refreshTab"
|
||||||
|
>
|
||||||
|
<v-icon >mdi-refresh</v-icon>
|
||||||
|
</a-button> -->
|
||||||
|
<!-- <a-button id="refresh" type="text" @click="setDrawer" class="icon-button">
|
||||||
|
<i class="mdi mdi-crop-free" style="font-size: 20px"></i>
|
||||||
|
</a-button>
|
||||||
|
<a-button type="text" @click="setDrawer" class="icon-button">
|
||||||
|
<i class="mdi mdi-crop-free" style="font-size: 20px"></i>
|
||||||
|
</a-button> -->
|
||||||
|
<!-- <a-button
|
||||||
|
:style="{
|
||||||
|
padding: '0',
|
||||||
|
width: '36px',
|
||||||
|
height: '36px',
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
borderRadius: '4px', // square corners
|
||||||
|
}"
|
||||||
|
type="text"
|
||||||
|
@click="toggle"
|
||||||
|
>
|
||||||
|
<v-icon v-if="!fullscreen">mdi-arrow-expand-all</v-icon>
|
||||||
|
<v-icon v-else>mdi-arrow-collapse-all</v-icon>
|
||||||
|
</a-button> -->
|
||||||
</template>
|
</template>
|
||||||
</router-tab>
|
</router-tab>
|
||||||
</v-col>
|
</v-col>
|
||||||
</v-row>
|
</v-row>
|
||||||
</v-container>
|
</v-container>
|
||||||
<div v-if="loadingStackCnt > 0" class="loading-container">
|
<div v-if="loadingStackCnt > 0" class="loading-container">
|
||||||
<!-- <Fade-loader color="#717577" /> -->
|
<div class="loading">
|
||||||
<img class="loading-img" src="@/assets/images/loading.png" alt="Loading..." />
|
<Fade-loader />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</v-main>
|
</v-main>
|
||||||
</fullscreen>
|
</fullscreen>
|
||||||
@ -700,4 +846,5 @@ export default {
|
|||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@import '@/assets/scss/layout.scss';
|
@import '@/assets/scss/layout.scss';
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -58,9 +58,9 @@ module.exports = {
|
|||||||
|
|
||||||
// Modules: https://go.nuxtjs.dev/config-modules
|
// Modules: https://go.nuxtjs.dev/config-modules
|
||||||
modules: ['@nuxtjs/axios', '@nuxtjs/dayjs', '@nuxtjs/style-resources' ],
|
modules: ['@nuxtjs/axios', '@nuxtjs/dayjs', '@nuxtjs/style-resources' ],
|
||||||
// styleResources: {
|
styleResources: {
|
||||||
// scss: ['./assets/scss/*.scss'],
|
scss: ['./assets/scss/*.scss'],
|
||||||
// },
|
},
|
||||||
proxy: {
|
proxy: {
|
||||||
"/api/": {
|
"/api/": {
|
||||||
target: "http://0.0.0.0:9999/",
|
target: "http://0.0.0.0:9999/",
|
||||||
|
|||||||
@ -505,10 +505,3 @@ const myDetail = [
|
|||||||
},
|
},
|
||||||
];
|
];
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
|
||||||
::v-deep{
|
|
||||||
.tui-grid-layer-state{
|
|
||||||
top: 40px !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1086,10 +1086,3 @@ function sha512(str) {
|
|||||||
.digest('hex');
|
.digest('hex');
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
|
||||||
::v-deep{
|
|
||||||
.tui-grid-layer-state{
|
|
||||||
top: 40px !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -442,10 +442,3 @@ const myDetail = [
|
|||||||
},
|
},
|
||||||
];
|
];
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
|
||||||
::v-deep{
|
|
||||||
.tui-grid-layer-state{
|
|
||||||
top: 40px !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -41,7 +41,7 @@
|
|||||||
<v-card-title>
|
<v-card-title>
|
||||||
<span class="custom-title-4">캘린더 미리보기</span>
|
<span class="custom-title-4">캘린더 미리보기</span>
|
||||||
</v-card-title>
|
</v-card-title>
|
||||||
<v-card-actions class="px-5 d-block">
|
<v-card-actions class="px-5 d-block" >
|
||||||
<Calendar :parentPrgmId="myPrgmId" :gridName="gridName" :headerVisible="false"
|
<Calendar :parentPrgmId="myPrgmId" :gridName="gridName" :headerVisible="false"
|
||||||
:showTitle="false" />
|
:showTitle="false" />
|
||||||
</v-card-actions>
|
</v-card-actions>
|
||||||
@ -261,18 +261,18 @@ export default {
|
|||||||
formatter({ value }) {
|
formatter({ value }) {
|
||||||
return value == 1 ? '휴일' : '평일';
|
return value == 1 ? '휴일' : '평일';
|
||||||
},
|
},
|
||||||
// editor: {
|
|
||||||
// type: CustomSelectBoxEditor,
|
|
||||||
// },
|
|
||||||
editor: {
|
editor: {
|
||||||
type: 'select',
|
type: CustomSelectBoxEditor,
|
||||||
options: {
|
|
||||||
listItems: [
|
|
||||||
{ text: '휴일', value: '1' },
|
|
||||||
{ text: '평일', value: '0' },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
|
// editor: {
|
||||||
|
// type: 'select',
|
||||||
|
// options: {
|
||||||
|
// listItems: [
|
||||||
|
// { text: '휴일', value: '1' },
|
||||||
|
// { text: '평일', value: '0' },
|
||||||
|
// ],
|
||||||
|
// },
|
||||||
|
// },
|
||||||
},
|
},
|
||||||
{ header: '휴일명', name: 'hldyNm', editor: 'text' },
|
{ header: '휴일명', name: 'hldyNm', editor: 'text' },
|
||||||
];
|
];
|
||||||
@ -470,76 +470,71 @@ const defaultData = {
|
|||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
.selectbox:focus {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calendarOption {
|
||||||
|
box-sizing: border-box;
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
select.selectbox {
|
||||||
|
box-sizing: border-box;
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
/* 높이 초기화 */
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
line-height: normal;
|
||||||
|
/* line-height 초기화 */
|
||||||
|
font-family: inherit;
|
||||||
|
/* 폰트 상속 */
|
||||||
|
border: 0;
|
||||||
|
// opacity: 0; /* 숨기기 */
|
||||||
|
// filter:alpha(opacity=0); /* IE8 숨기기 */
|
||||||
|
// -webkit-appearance: none; /* 네이티브 외형 감추기 */
|
||||||
|
// -moz-appearance: none;
|
||||||
|
// appearance: none;
|
||||||
|
opacity: 1;
|
||||||
|
/* 숨기기 */
|
||||||
|
filter: alpha(opacity=1);
|
||||||
|
/* IE8 숨기기 */
|
||||||
|
-webkit-appearance: auto;
|
||||||
|
/* 네이티브 외형 감추기 */
|
||||||
|
-moz-appearance: auto;
|
||||||
|
appearance: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-grid-layer-editing {
|
||||||
|
position: absolute;
|
||||||
|
background: #fff;
|
||||||
|
// background-image: initial;
|
||||||
|
// background-position-x: initial;
|
||||||
|
// background-position-y: initial;
|
||||||
|
// background-size: initial;
|
||||||
|
// background-repeat-x: initial;
|
||||||
|
// background-repeat-y: initial;
|
||||||
|
// background-attachment: initial;
|
||||||
|
// background-origin: initial;
|
||||||
|
// background-clip: initial;
|
||||||
|
// background-color: rgb(255, 255, 255);
|
||||||
|
// z-index: 15;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
/* border-style: solid; */
|
||||||
|
/* border-width: 1px; */
|
||||||
|
white-space: nowrap;
|
||||||
|
border-width: 0px;
|
||||||
|
// box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
::v-deep {
|
::v-deep {
|
||||||
.selectbox:focus {
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.calendarOption {
|
|
||||||
box-sizing: border-box;
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
border: 1px solid;
|
|
||||||
border-radius: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
select.selectbox {
|
|
||||||
box-sizing: border-box;
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
/* 높이 초기화 */
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
line-height: normal;
|
|
||||||
/* line-height 초기화 */
|
|
||||||
font-family: inherit;
|
|
||||||
/* 폰트 상속 */
|
|
||||||
border: 0;
|
|
||||||
// opacity: 0; /* 숨기기 */
|
|
||||||
// filter:alpha(opacity=0); /* IE8 숨기기 */
|
|
||||||
// -webkit-appearance: none; /* 네이티브 외형 감추기 */
|
|
||||||
// -moz-appearance: none;
|
|
||||||
// appearance: none;
|
|
||||||
opacity: 1;
|
|
||||||
/* 숨기기 */
|
|
||||||
filter: alpha(opacity=1);
|
|
||||||
/* IE8 숨기기 */
|
|
||||||
-webkit-appearance: auto;
|
|
||||||
/* 네이티브 외형 감추기 */
|
|
||||||
-moz-appearance: auto;
|
|
||||||
appearance: auto;
|
|
||||||
border: 1px solid;
|
|
||||||
border-radius: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tui-grid-layer-editing {
|
|
||||||
position: absolute;
|
|
||||||
background: #fff;
|
|
||||||
// background-image: initial;
|
|
||||||
// background-position-x: initial;
|
|
||||||
// background-position-y: initial;
|
|
||||||
// background-size: initial;
|
|
||||||
// background-repeat-x: initial;
|
|
||||||
// background-repeat-y: initial;
|
|
||||||
// background-attachment: initial;
|
|
||||||
// background-origin: initial;
|
|
||||||
// background-clip: initial;
|
|
||||||
// background-color: rgb(255, 255, 255);
|
|
||||||
// z-index: 15;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
/* border-style: solid; */
|
|
||||||
/* border-width: 1px; */
|
|
||||||
white-space: nowrap;
|
|
||||||
border-width: 0px;
|
|
||||||
// box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.custom-vc-calender {
|
.custom-vc-calender {
|
||||||
.vc-header {
|
.vc-header {
|
||||||
display: none;
|
display: none;
|
||||||
|
|||||||
@ -509,7 +509,7 @@ export default {
|
|||||||
this.loadGrid = false;
|
this.loadGrid = false;
|
||||||
|
|
||||||
const res = await this.postApiReturn({
|
const res = await this.postApiReturn({
|
||||||
apiKey: 'selectPostPage',
|
apiKey: 'selectPostData',
|
||||||
resKey: 'postPage',
|
resKey: 'postPage',
|
||||||
sendParam: params,
|
sendParam: params,
|
||||||
});
|
});
|
||||||
|
|||||||
@ -522,10 +522,3 @@ const myDetail = [
|
|||||||
},
|
},
|
||||||
];
|
];
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
|
||||||
::v-deep{
|
|
||||||
.tui-grid-layer-state{
|
|
||||||
top: 40px !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|||||||
@ -626,3 +626,6 @@ const myDetail = [
|
|||||||
},
|
},
|
||||||
];
|
];
|
||||||
</script>
|
</script>
|
||||||
|
<style lang="scss">
|
||||||
|
@import '@/assets/scss/common.scss';
|
||||||
|
</style>
|
||||||
|
|||||||
@ -635,15 +635,15 @@ export default {
|
|||||||
this.setChart04Data(chart04Dat);
|
this.setChart04Data(chart04Dat);
|
||||||
|
|
||||||
let chartOption2 = getLineChartOption({
|
let chartOption2 = getLineChartOption({
|
||||||
xAxisData: this.$store.state.pageData[myPrgmId][this.chart_02].xAxis.data,
|
xAxisData: this.$store.state.pageData[myPrgmId][this.chart_02].xAxisData,
|
||||||
seriesData: this.$store.state.pageData[myPrgmId][this.chart_02].series,
|
seriesData: this.$store.state.pageData[myPrgmId][this.chart_02].seriesData,
|
||||||
isDarkMode: this.isDarkMode,
|
isDarkMode: this.isDarkMode,
|
||||||
});
|
});
|
||||||
this.$store.state.pageData[myPrgmId][this.chart_02] = chartOption2
|
this.$store.state.pageData[myPrgmId][this.chart_02] = chartOption2
|
||||||
|
|
||||||
let chartOption5 = getLineChartOption({
|
let chartOption5 = getLineChartOption({
|
||||||
xAxisData: this.$store.state.pageData[myPrgmId][this.chart_05].xAxis.data,
|
xAxisData: this.$store.state.pageData[myPrgmId][this.chart_05].xAxisData,
|
||||||
seriesData: this.$store.state.pageData[myPrgmId][this.chart_05].series,
|
seriesData: this.$store.state.pageData[myPrgmId][this.chart_05].seriesData,
|
||||||
isDarkMode: this.isDarkMode,
|
isDarkMode: this.isDarkMode,
|
||||||
});
|
});
|
||||||
this.$store.state.pageData[myPrgmId][this.chart_05] = chartOption5
|
this.$store.state.pageData[myPrgmId][this.chart_05] = chartOption5
|
||||||
@ -754,7 +754,7 @@ export default {
|
|||||||
changeGrid: async function (pageNum, limit) {
|
changeGrid: async function (pageNum, limit) {
|
||||||
this.page = pageNum;
|
this.page = pageNum;
|
||||||
this.limit = limit;
|
this.limit = limit;
|
||||||
await this.getGridData(true);
|
await this.getGridData();
|
||||||
},
|
},
|
||||||
async search() {
|
async search() {
|
||||||
await new Promise((resolve) => setTimeout(resolve, 1500));
|
await new Promise((resolve) => setTimeout(resolve, 1500));
|
||||||
@ -766,7 +766,7 @@ export default {
|
|||||||
await this.getTodayEfficiencyStatus();
|
await this.getTodayEfficiencyStatus();
|
||||||
await this.getTodayNgTopTen();
|
await this.getTodayNgTopTen();
|
||||||
await this.getCompareEqpmTGdChart();
|
await this.getCompareEqpmTGdChart();
|
||||||
await this.getGridData(false);
|
await this.getGridData();
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
async gridInit() {
|
async gridInit() {
|
||||||
@ -944,13 +944,8 @@ export default {
|
|||||||
this.loadGrid = true;
|
this.loadGrid = true;
|
||||||
// this.getGridData();
|
// this.getGridData();
|
||||||
},
|
},
|
||||||
async getGridData(isPaging) {
|
async getGridData() {
|
||||||
|
this.loadGrid = false;
|
||||||
// Do not hide grid when trigger paging function
|
|
||||||
if (!isPaging) {
|
|
||||||
this.loadGrid = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Get total records of grid
|
// Get total records of grid
|
||||||
const totalRes = await this.postApiReturn({
|
const totalRes = await this.postApiReturn({
|
||||||
apiKey: "selectIssueGdIdxDataPageTotal",
|
apiKey: "selectIssueGdIdxDataPageTotal",
|
||||||
@ -1386,9 +1381,6 @@ export default {
|
|||||||
textStyle: {
|
textStyle: {
|
||||||
color: this.isDarkMode ? "#fff" : "#333333",
|
color: this.isDarkMode ? "#fff" : "#333333",
|
||||||
},
|
},
|
||||||
itemStyle: {
|
|
||||||
borderWidth: 0
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
series: seriesData,
|
series: seriesData,
|
||||||
};
|
};
|
||||||
|
|||||||
@ -1029,10 +1029,3 @@ const myDetail = [
|
|||||||
},
|
},
|
||||||
];
|
];
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
|
||||||
::v-deep{
|
|
||||||
.tui-grid-layer-state{
|
|
||||||
top: 40px !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1005,10 +1005,3 @@ const dataPathDataExample = getPathDataExample({
|
|||||||
field2: '2222',
|
field2: '2222',
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
|
||||||
::v-deep{
|
|
||||||
.tui-grid-layer-state{
|
|
||||||
top: 40px !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -41,7 +41,7 @@
|
|||||||
<div class="h100 px-4" style="height:calc(100% - 70px)">
|
<div class="h100 px-4" style="height:calc(100% - 70px)">
|
||||||
<div ref="gridParent" style="height: 26%">
|
<div ref="gridParent" style="height: 26%">
|
||||||
<component :ref="gridName" :is="loadGrid ? 'Grid' : null" :gridName="gridName"
|
<component :ref="gridName" :is="loadGrid ? 'Grid' : null" :gridName="gridName"
|
||||||
:parentPrgmId="myPrgmId" @getRowsData="getRowData" />
|
:parentPrgmId="myPrgmId" @getRowsData="getRowData" :dataPath="dataPathExample" />
|
||||||
</div>
|
</div>
|
||||||
<div class="d-flex py-4 mt-4">
|
<div class="d-flex py-4 mt-4">
|
||||||
<component :is="'Form'" :parentPrgmId="myPrgmId" :detailList="detailList"
|
<component :is="'Form'" :parentPrgmId="myPrgmId" :detailList="detailList"
|
||||||
|
|||||||
@ -210,6 +210,62 @@ export default {
|
|||||||
selectValueList02: [],
|
selectValueList02: [],
|
||||||
selectValue03: null,
|
selectValue03: null,
|
||||||
selectValueList03: [],
|
selectValueList03: [],
|
||||||
|
// dataPathExample: {
|
||||||
|
// "rowGrid": {
|
||||||
|
// data: [
|
||||||
|
|
||||||
|
// {
|
||||||
|
// eqpmId: 'EQ001',
|
||||||
|
// originEqpmId: 'ORIG001',
|
||||||
|
// eqpmNm: '냉각기 A',
|
||||||
|
// careStndVal: 75,
|
||||||
|
// warnStndVal: 90,
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// eqpmId: 'EQ002',
|
||||||
|
// originEqpmId: 'ORIG002',
|
||||||
|
// eqpmNm: '펌프 B',
|
||||||
|
// careStndVal: 60,
|
||||||
|
// warnStndVal: 80,
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// eqpmId: 'EQ003',
|
||||||
|
// originEqpmId: 'ORIG003',
|
||||||
|
// eqpmNm: '모터 C',
|
||||||
|
// careStndVal: 50,
|
||||||
|
// warnStndVal: 70,
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// eqpmId: 'EQ004',
|
||||||
|
// originEqpmId: 'ORIG004',
|
||||||
|
// eqpmNm: '밸브 D',
|
||||||
|
// careStndVal: 65,
|
||||||
|
// warnStndVal: 85,
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// eqpmId: 'EQ005',
|
||||||
|
// originEqpmId: 'ORIG005',
|
||||||
|
// eqpmNm: '컨트롤러 E',
|
||||||
|
// careStndVal: 55,
|
||||||
|
// warnStndVal: 75,
|
||||||
|
// },
|
||||||
|
|
||||||
|
// ],
|
||||||
|
// column: [
|
||||||
|
// { header: '설비', name: 'eqpmId', align: 'left' },
|
||||||
|
// {
|
||||||
|
// header: 'origin설비',
|
||||||
|
// name: 'originEqpmId',
|
||||||
|
// align: 'center',
|
||||||
|
// hidden: true,
|
||||||
|
// },
|
||||||
|
// { header: '설비명', name: 'eqpmNm', align: 'left' },
|
||||||
|
// { header: '주의기준', name: 'careStndVal', align: 'right' },
|
||||||
|
// { header: '심각기준', name: 'warnStndVal', align: 'right' },
|
||||||
|
// ]
|
||||||
|
|
||||||
|
// }
|
||||||
|
// }
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
|||||||
@ -12,7 +12,7 @@
|
|||||||
</v-col>
|
</v-col>
|
||||||
<v-col :cols="3">
|
<v-col :cols="3">
|
||||||
<component :is="'EvtObjPop'" :parentPrgmId="myPrgmId" :item="evtObjPopItem"
|
<component :is="'EvtObjPop'" :parentPrgmId="myPrgmId" :item="evtObjPopItem"
|
||||||
class="no-gutters" customClass="select-large" />
|
class="no-gutters" customClass="select-large pa-0" />
|
||||||
</v-col>
|
</v-col>
|
||||||
<v-col :cols="3">
|
<v-col :cols="3">
|
||||||
<!-- 대상일 -->
|
<!-- 대상일 -->
|
||||||
|
|||||||
@ -855,6 +855,7 @@ const myDetail = [
|
|||||||
];
|
];
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
@import '@/assets/scss/common.scss';
|
||||||
::v-deep {
|
::v-deep {
|
||||||
.tui-grid-layer-state {
|
.tui-grid-layer-state {
|
||||||
top: 40px !important;
|
top: 40px !important;
|
||||||
|
|||||||
@ -452,10 +452,3 @@ const myColumns = [
|
|||||||
},
|
},
|
||||||
];
|
];
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
|
||||||
::v-deep{
|
|
||||||
.tui-grid-layer-state{
|
|
||||||
top: 40px !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -61,23 +61,16 @@
|
|||||||
</v-row>
|
</v-row>
|
||||||
<v-row ref="contents" class="pt-3">
|
<v-row ref="contents" class="pt-3">
|
||||||
<v-col :cols="12" style="height: 100%">
|
<v-col :cols="12" style="height: 100%">
|
||||||
<v-card class="pb-3">
|
<v-card class="pb-5">
|
||||||
<div class="d-flex align-center justify-space-between pa-4">
|
<div class="d-flex align-center justify-space-between pa-4">
|
||||||
<v-card-title class="pa-0">설비별 현황 리스트</v-card-title>
|
<v-card-title class="pa-0">설비별 현황 리스트</v-card-title>
|
||||||
</div>
|
</div>
|
||||||
<div class="px-4" style="height:calc(100% - 120px)">
|
<div class="px-4" style="height:calc(100% - 76px)">
|
||||||
<div ref="gridParent" class="w100 h100 enrg-effc">
|
<div ref="gridParent" class="w100 h100">
|
||||||
<component :ref="gridName" :is="loadGrid ? 'Grid' : null" :gridName="gridName"
|
<component :ref="gridName" :is="loadGrid ? 'Grid' : null" :gridName="gridName"
|
||||||
:parentPrgmId="myPrgmId" :columnClickEventFlag="true" @columnClick="columnClick" />
|
:parentPrgmId="myPrgmId" :columnClickEventFlag="true" @columnClick="columnClick" />
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="d-flex align-center justify-center pa-5 pb-0" v-if="loadGrid && totalCount > 0">
|
|
||||||
<pagination id="pagination" :total-count="totalCount" :page-num="page" :limit="limit"
|
|
||||||
@loadData="changeGrid" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</v-card>
|
</v-card>
|
||||||
</v-col>
|
</v-col>
|
||||||
</v-row>
|
</v-row>
|
||||||
@ -99,7 +92,6 @@ import Datepicker from '~/components/common/Datepicker';
|
|||||||
import EqpmSelectPop from '~/components/common/modal/EqpmSelectPop';
|
import EqpmSelectPop from '~/components/common/modal/EqpmSelectPop';
|
||||||
import EnrgEffcEqpmDetailPop from '~/components/common/modal/EnrgEffcEqpmDetailPop';
|
import EnrgEffcEqpmDetailPop from '~/components/common/modal/EnrgEffcEqpmDetailPop';
|
||||||
import EnrgEffcGdIdxDetPop from '~/components/common/modal/EnrgEffcGdIdxDetPop';
|
import EnrgEffcGdIdxDetPop from '~/components/common/modal/EnrgEffcGdIdxDetPop';
|
||||||
import pagination from '~/components/common/Pagination';
|
|
||||||
|
|
||||||
let myTitle;
|
let myTitle;
|
||||||
let myPrgmId;
|
let myPrgmId;
|
||||||
@ -132,7 +124,6 @@ export default {
|
|||||||
EnrgEffcEqpmDetailPop,
|
EnrgEffcEqpmDetailPop,
|
||||||
EqpmSelectPop,
|
EqpmSelectPop,
|
||||||
EnrgEffcGdIdxDetPop,
|
EnrgEffcGdIdxDetPop,
|
||||||
pagination
|
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
@ -158,12 +149,7 @@ export default {
|
|||||||
eqpmGrpFlag: false,
|
eqpmGrpFlag: false,
|
||||||
eqpmGdIdxFlag: false,
|
eqpmGdIdxFlag: false,
|
||||||
fabFlag: false,
|
fabFlag: false,
|
||||||
itemsPerPage: 10,
|
|
||||||
itemsPerPageArray: [10, 20, 30],
|
|
||||||
limit: 20,
|
|
||||||
page: 1,
|
|
||||||
routeData: {},
|
routeData: {},
|
||||||
totalCount: 0,
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
@ -391,7 +377,6 @@ export default {
|
|||||||
resKey: 'eqpmKindCodeLists',
|
resKey: 'eqpmKindCodeLists',
|
||||||
sendParam: {},
|
sendParam: {},
|
||||||
});
|
});
|
||||||
|
|
||||||
if (res.length > 0) {
|
if (res.length > 0) {
|
||||||
this.selectValueList01 = await res.map(item => {
|
this.selectValueList01 = await res.map(item => {
|
||||||
return {
|
return {
|
||||||
@ -589,39 +574,6 @@ export default {
|
|||||||
});
|
});
|
||||||
|
|
||||||
const _this = this;
|
const _this = this;
|
||||||
class CustomButton {
|
|
||||||
constructor(props) {
|
|
||||||
const { grid, rowKey, columnInfo } = props;
|
|
||||||
|
|
||||||
const gridData = grid.store.data.rawData;
|
|
||||||
const value = gridData[rowKey][columnInfo.name];
|
|
||||||
|
|
||||||
this.disabled = columnInfo.renderer.options.disabled || false;
|
|
||||||
const elDiv = document.createElement('div');
|
|
||||||
if (value != null) {
|
|
||||||
elDiv.innerHTML = `<span>${value}</span>`;
|
|
||||||
$(elDiv).addClass('tui-grid-cell-content d-flex justify-space-between');
|
|
||||||
const el2 = document.createElement('button');
|
|
||||||
$(el2).addClass('edit-btn blue--text');
|
|
||||||
el2.innerText = '보기';
|
|
||||||
elDiv.appendChild(el2);
|
|
||||||
} else {
|
|
||||||
elDiv.innerHTML = `<span></span>`;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.el = elDiv;
|
|
||||||
|
|
||||||
}
|
|
||||||
getElement() {
|
|
||||||
return this.el;
|
|
||||||
}
|
|
||||||
getValue() {
|
|
||||||
// return this.el.value;
|
|
||||||
}
|
|
||||||
mounted() {
|
|
||||||
// this.el.focus();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
const myColumns = [
|
const myColumns = [
|
||||||
{
|
{
|
||||||
header: 'FAB',
|
header: 'FAB',
|
||||||
@ -666,13 +618,7 @@ export default {
|
|||||||
{
|
{
|
||||||
header: '가이드명',
|
header: '가이드명',
|
||||||
name: 'gdIdxNm',
|
name: 'gdIdxNm',
|
||||||
width: 250,
|
width: 200,
|
||||||
renderer: {
|
|
||||||
type: CustomButton,
|
|
||||||
options: {
|
|
||||||
value: "보기",
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
header: '주의',
|
header: '주의',
|
||||||
@ -707,12 +653,6 @@ export default {
|
|||||||
name: 'ngCnt',
|
name: 'ngCnt',
|
||||||
align: 'right',
|
align: 'right',
|
||||||
width: 80,
|
width: 80,
|
||||||
renderer: {
|
|
||||||
type: CustomButton,
|
|
||||||
options: {
|
|
||||||
value: "보기",
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
@ -740,29 +680,9 @@ export default {
|
|||||||
fabId: this.selectValue02,
|
fabId: this.selectValue02,
|
||||||
eqpmKindId: this.selectValue01,
|
eqpmKindId: this.selectValue01,
|
||||||
okFg: this.selectValue06,
|
okFg: this.selectValue06,
|
||||||
limit: this.limit,
|
|
||||||
page: this.page,
|
|
||||||
offset: (this.page - 1) * this.limit, // MariaDB Query에서 직접 계산이 안됨
|
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
const res2 = await this.postApiReturn({
|
|
||||||
apiKey: 'selectEnrgEffcEqpmDetlMntrPageTotal',
|
|
||||||
resKey: 'eqpmDetlDataPageTotal',
|
|
||||||
sendParam: {
|
|
||||||
eqpmId: this.selectValue04.eqpmId,
|
|
||||||
eqpmGrpId: this.selectValue03,
|
|
||||||
fromDt: this.pageData.fromDt,
|
|
||||||
toDt: this.pageData.toDt,
|
|
||||||
gdIdxId: this.selectValue05,
|
|
||||||
fabId: this.selectValue02,
|
|
||||||
eqpmKindId: this.selectValue01,
|
|
||||||
okFg: this.selectValue06,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
this.totalCount = res2[0]?.totalcount;
|
|
||||||
|
|
||||||
this.setGridData({
|
this.setGridData({
|
||||||
gridKey: this.gridName,
|
gridKey: this.gridName,
|
||||||
value: res,
|
value: res,
|
||||||
@ -802,12 +722,6 @@ export default {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
changeGrid: async function (pageNum, limit) {
|
|
||||||
this.page = pageNum;
|
|
||||||
this.limit = limit;
|
|
||||||
|
|
||||||
this.search();
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@ -411,3 +411,15 @@ const defaultData = {
|
|||||||
fromDt: Utility.setFormatDate(new Date(), "YYYYMMDD"), // 조회 시작일
|
fromDt: Utility.setFormatDate(new Date(), "YYYYMMDD"), // 조회 시작일
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
// @import "@/assets/scss/common.scss";
|
||||||
|
|
||||||
|
// .echarts::v-deep > div > canvas:hover {
|
||||||
|
// cursor: pointer;
|
||||||
|
// }
|
||||||
|
// ::v-deep{
|
||||||
|
// .echarts:hover > div:nth-child(1){
|
||||||
|
// cursor:pointer !important;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
</style>
|
||||||
|
|||||||
@ -854,6 +854,8 @@ const defaultData = {
|
|||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
// @import '@/assets/scss/common.scss';
|
||||||
|
@import '@/assets/scss/var.scss';
|
||||||
@each $theme in dark, light {
|
@each $theme in dark, light {
|
||||||
.v-application.#{$theme}-mode {
|
.v-application.#{$theme}-mode {
|
||||||
.tui-grid {
|
.tui-grid {
|
||||||
|
|||||||
@ -442,7 +442,7 @@ export default {
|
|||||||
|
|
||||||
chartOption = getGaugeChartOption({
|
chartOption = getGaugeChartOption({
|
||||||
title: chartKey,
|
title: chartKey,
|
||||||
value: currentChartData["effcRt"],
|
value: 75,
|
||||||
isDarkMode: this.isDarkMode,
|
isDarkMode: this.isDarkMode,
|
||||||
backgroundRadius: 89,
|
backgroundRadius: 89,
|
||||||
});
|
});
|
||||||
|
|||||||
@ -282,13 +282,13 @@ export default {
|
|||||||
changeGrid: async function (pageNum, limit) {
|
changeGrid: async function (pageNum, limit) {
|
||||||
this.page = pageNum;
|
this.page = pageNum;
|
||||||
this.limit = limit;
|
this.limit = limit;
|
||||||
this.getGridData(true);
|
this.search();
|
||||||
},
|
},
|
||||||
async init() {
|
async init() {
|
||||||
await this.getSelectValueList();
|
await this.getSelectValueList();
|
||||||
await this.setQueryParams();
|
await this.setQueryParams();
|
||||||
this.gridInit();
|
this.gridInit();
|
||||||
await this.getGridData(false);
|
await this.getGridData();
|
||||||
|
|
||||||
this.initedFlag = true;
|
this.initedFlag = true;
|
||||||
},
|
},
|
||||||
@ -588,10 +588,8 @@ export default {
|
|||||||
value: columnList,
|
value: columnList,
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
async getGridData(isPaging) {
|
async getGridData() {
|
||||||
if(!isPaging) {
|
this.loadGrid = false;
|
||||||
this.loadGrid = false;
|
|
||||||
}
|
|
||||||
this.enrgUseMainIdxDesc = [];
|
this.enrgUseMainIdxDesc = [];
|
||||||
var apiKey = null;
|
var apiKey = null;
|
||||||
var apiKey2 = null;
|
var apiKey2 = null;
|
||||||
@ -613,34 +611,20 @@ export default {
|
|||||||
apiKey = "selectMonthlyEnrgUseMainIdx";
|
apiKey = "selectMonthlyEnrgUseMainIdx";
|
||||||
apiKey2 = "selectMonthlyEnrgUseMainIdxPageTotal";
|
apiKey2 = "selectMonthlyEnrgUseMainIdxPageTotal";
|
||||||
}
|
}
|
||||||
|
var res = await this.postApiReturn({
|
||||||
|
apiKey: apiKey,
|
||||||
|
resKey: "eqpmIndMntrData",
|
||||||
|
sendParam: params,
|
||||||
|
});
|
||||||
|
|
||||||
|
var res2 = await this.postApiReturn({
|
||||||
var [res, res2] = await Promise.all([
|
apiKey: apiKey2,
|
||||||
this.postApiReturn({
|
resKey: "eqpmIndMntrPageTotal",
|
||||||
apiKey: apiKey,
|
sendParam: params,
|
||||||
resKey: "eqpmIndMntrData",
|
});
|
||||||
sendParam: params,
|
|
||||||
}),
|
|
||||||
this.postApiReturn({
|
|
||||||
apiKey: apiKey2,
|
|
||||||
resKey: "eqpmIndMntrPageTotal",
|
|
||||||
sendParam: params,
|
|
||||||
}),
|
|
||||||
]);
|
|
||||||
|
|
||||||
// var res = await this.postApiReturn({
|
|
||||||
// apiKey: apiKey,
|
|
||||||
// resKey: "eqpmIndMntrData",
|
|
||||||
// sendParam: params,
|
|
||||||
// });
|
|
||||||
|
|
||||||
// var res2 = await this.postApiReturn({
|
|
||||||
// apiKey: apiKey2,
|
|
||||||
// resKey: "eqpmIndMntrPageTotal",
|
|
||||||
// sendParam: params,
|
|
||||||
// });
|
|
||||||
|
|
||||||
this.totalCount = res2[0].totalcount;
|
this.totalCount = res2[0].totalcount;
|
||||||
|
|
||||||
this.enrgUseMainIdxDesc = await this.postApiReturn({
|
this.enrgUseMainIdxDesc = await this.postApiReturn({
|
||||||
apiKey: "selectEnrgUseMainIdxDesc",
|
apiKey: "selectEnrgUseMainIdxDesc",
|
||||||
resKey: "eqpmIndMntrData",
|
resKey: "eqpmIndMntrData",
|
||||||
@ -656,16 +640,18 @@ export default {
|
|||||||
no: i + 1,
|
no: i + 1,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
this.setGridData({
|
this.setGridData({
|
||||||
gridKey: this.gridName,
|
gridKey: this.gridName,
|
||||||
value: newRes,
|
value: newRes,
|
||||||
});
|
});
|
||||||
|
|
||||||
this.loadGrid = true;
|
this.loadGrid = true;
|
||||||
|
|
||||||
this.makeTooltip();
|
this.makeTooltip();
|
||||||
},
|
},
|
||||||
async search() {
|
async search() {
|
||||||
await this.getGridData(false);
|
await this.getGridData();
|
||||||
},
|
},
|
||||||
async makeTooltip() {
|
async makeTooltip() {
|
||||||
var gdIdxList = [
|
var gdIdxList = [
|
||||||
|
|||||||
@ -153,7 +153,7 @@
|
|||||||
<v-card class="pb-5 px-2">
|
<v-card class="pb-5 px-2">
|
||||||
<div class="d-flex align-center justify-space-between">
|
<div class="d-flex align-center justify-space-between">
|
||||||
<v-card-title class="d-flex align-center justify-space-between pa-5">{{
|
<v-card-title class="d-flex align-center justify-space-between pa-5">{{
|
||||||
'TAG를 선택해주세요'
|
"ICHEON.HVAC.EQP_HT_CH004.UT_HT_CH201.CHI_AMP_1A_PV"
|
||||||
}}</v-card-title>
|
}}</v-card-title>
|
||||||
</div>
|
</div>
|
||||||
<div :ref="'chartParent' + 0" style="height: 100%; overflow: visible">
|
<div :ref="'chartParent' + 0" style="height: 100%; overflow: visible">
|
||||||
@ -1214,6 +1214,7 @@ const defaultData = {
|
|||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
@import "@/assets/scss/var.scss";
|
||||||
|
|
||||||
::v-deep {
|
::v-deep {
|
||||||
.datepicker-container {
|
.datepicker-container {
|
||||||
|
|||||||
@ -200,6 +200,8 @@ export default {
|
|||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
@import '@/assets/scss/var.scss';
|
||||||
|
@import '@/assets/scss/mixin.scss';
|
||||||
|
|
||||||
::v-deep {
|
::v-deep {
|
||||||
.v-avatar {
|
.v-avatar {
|
||||||
|
|||||||
@ -514,7 +514,7 @@ const INIT_URL_STATE = {
|
|||||||
|
|
||||||
// prgmId: "PRG0003" 공지사항
|
// prgmId: "PRG0003" 공지사항
|
||||||
selectPostList: 'comm/base/NoticeMngCtr/selectPostList',
|
selectPostList: 'comm/base/NoticeMngCtr/selectPostList',
|
||||||
selectPostPage: 'comm/base/NoticeMngCtr/selectPostPage',
|
selectPostData: 'comm/base/NoticeMngCtr/selectPostData',
|
||||||
selectPostPageTotal: 'comm/base/NoticeMngCtr/selectPostPageTotal',
|
selectPostPageTotal: 'comm/base/NoticeMngCtr/selectPostPageTotal',
|
||||||
deletePostList: 'comm/base/NoticeMngCtr/deletePost',
|
deletePostList: 'comm/base/NoticeMngCtr/deletePost',
|
||||||
|
|
||||||
@ -947,8 +947,6 @@ const INIT_URL_STATE = {
|
|||||||
//prgmId : PRG0084 설비별 운전가이드
|
//prgmId : PRG0084 설비별 운전가이드
|
||||||
selectEqpmCodeList: 'ems/effc/EnrgEffcEqpmDetlMntrCtr/selectEqpmCodeList',
|
selectEqpmCodeList: 'ems/effc/EnrgEffcEqpmDetlMntrCtr/selectEqpmCodeList',
|
||||||
selectEnrgEffcEqpmDetlMntr:'ems/effc/EnrgEffcEqpmDetlMntrCtr/selectEnrgEffcEqpmDetlMntr',
|
selectEnrgEffcEqpmDetlMntr:'ems/effc/EnrgEffcEqpmDetlMntrCtr/selectEnrgEffcEqpmDetlMntr',
|
||||||
selectEnrgEffcEqpmDetlMntrPageTotal:
|
|
||||||
'ems/effc/EnrgEffcEqpmDetlMntrCtr/selectEnrgEffcEqpmDetlMntrPageTotal', // 일일검침정보
|
|
||||||
selectEqpmDetailPop: 'ems/effc/EnrgEffcEqpmDetlMntrCtr/selectEqpmDetailPop',
|
selectEqpmDetailPop: 'ems/effc/EnrgEffcEqpmDetlMntrCtr/selectEqpmDetailPop',
|
||||||
selectEnrgEffcGdIdxDetPop : 'ems/effc/EnrgEffcEqpmDetlMntrCtr/selectEnrgEffcGdIdxDetPop',
|
selectEnrgEffcGdIdxDetPop : 'ems/effc/EnrgEffcEqpmDetlMntrCtr/selectEnrgEffcGdIdxDetPop',
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user