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

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

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

12
components/common/Datepicker.vue
View File

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

97
components/common/DatepickerTopView.vue
View File

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

53
components/common/PastRsltDatePicker.vue
View File

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

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

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

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

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

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

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

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

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

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

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

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

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