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

update screen 32 vs 2

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

98
components/common/Calendar.vue
View File

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

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

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

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

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

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

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

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

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

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

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

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

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