sk_fems_ui commit
This commit is contained in:
unknown
343
components/widget/CaldWidget.vue
Normal file
343
components/widget/CaldWidget.vue
Normal file
@ -0,0 +1,343 @@
|
||||
<template>
|
||||
<div class="l-layout">
|
||||
<v-row ref="rowParent">
|
||||
<v-col :cols="12">
|
||||
<v-card class="pa-3 widget-card">
|
||||
<div class="d-flex align-center justify-space-between">
|
||||
<v-card-title class="pa-0"
|
||||
>캘린더
|
||||
<span class="pl-2"
|
||||
>{{ selectedYear }}년 {{ selectedMonth }}월</span
|
||||
></v-card-title
|
||||
>
|
||||
<v-card-subtitle class="mt-0 pa-0">
|
||||
<v-icon
|
||||
v-show="widgetPrgmId"
|
||||
class="mr-1"
|
||||
size="25"
|
||||
@click="btnAction('widgetCallPage')"
|
||||
>mdi-note-search</v-icon
|
||||
>
|
||||
<v-icon
|
||||
v-show="widgetPopFg"
|
||||
size="25"
|
||||
@click="btnAction('popWidget')"
|
||||
>mdi-plus-box-multiple</v-icon
|
||||
>
|
||||
</v-card-subtitle>
|
||||
</div>
|
||||
<div class="d-flex align-center justify-space-between mt-2">
|
||||
<div class="weekday redDay">일</div>
|
||||
<div class="weekday">월</div>
|
||||
<div class="weekday">화</div>
|
||||
<div class="weekday">수</div>
|
||||
<div class="weekday">목</div>
|
||||
<div class="weekday">금</div>
|
||||
<div class="weekday blueDay">토</div>
|
||||
</div>
|
||||
<div class="d-flex align-center justify-space-between">
|
||||
<div class="weekdayForm redDay"><span id="day0"></span></div>
|
||||
<div class="weekdayForm"><span id="day1"></span></div>
|
||||
<div class="weekdayForm"><span id="day2"></span></div>
|
||||
<div class="weekdayForm"><span id="day3"></span></div>
|
||||
<div class="weekdayForm"><span id="day4"></span></div>
|
||||
<div class="weekdayForm"><span id="day5"></span></div>
|
||||
<div class="weekdayForm blueDay"><span id="day6"></span></div>
|
||||
</div>
|
||||
<div class="d-flex align-center justify-space-between">
|
||||
<div class="weekdayForm redDay"><span id="day7"></span></div>
|
||||
<div class="weekdayForm"><span id="day8"></span></div>
|
||||
<div class="weekdayForm"><span id="day9"></span></div>
|
||||
<div class="weekdayForm"><span id="day10"></span></div>
|
||||
<div class="weekdayForm"><span id="day11"></span></div>
|
||||
<div class="weekdayForm"><span id="day12"></span></div>
|
||||
<div class="weekdayForm blueDay"><span id="day13"></span></div>
|
||||
</div>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapActions, mapMutations, mapState } from 'vuex'; // , mapActions
|
||||
import Vue from 'vue';
|
||||
import DateUtility from '~/plugins/dateUtility';
|
||||
import Utility from '~/plugins/utility';
|
||||
import Grid from '~/components/common/Grid';
|
||||
import Chart from '~/components/common/Chart';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
parentPrgmId: {
|
||||
type: String,
|
||||
require: true,
|
||||
},
|
||||
widgetId: {
|
||||
type: String,
|
||||
require: true,
|
||||
},
|
||||
widgetPrgmId: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
widgetPopFg: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
widgetReflashMm: {
|
||||
type: Number,
|
||||
require: true,
|
||||
},
|
||||
},
|
||||
components: {
|
||||
DateUtility,
|
||||
Grid,
|
||||
Chart,
|
||||
Utility,
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
searchParam(state) {
|
||||
return state.pageData[this.parentPrgmId];
|
||||
},
|
||||
isDarkMode: 'isDarkMode',
|
||||
}),
|
||||
},
|
||||
watch: {},
|
||||
beforeMounted() {},
|
||||
beforeCreate() {
|
||||
this.$store.commit('setWidgetPageData', {
|
||||
prgmId: this.$route.query.prgmId,
|
||||
caldWidget: { caldWidgetData },
|
||||
});
|
||||
},
|
||||
created() {
|
||||
this.search();
|
||||
this.timer = setInterval(this.search, this.widgetReflashMm);
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.clearTimeout(this.timer);
|
||||
},
|
||||
mounted() {},
|
||||
data() {
|
||||
return {
|
||||
pop: null,
|
||||
selectedYear: this.convertStringToDateFormat(new Date()).substr(0, 4),
|
||||
selectedMonth: this.convertStringToDateFormat(new Date()).substr(5, 2),
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
...mapMutations({
|
||||
setPageData: 'setPageData',
|
||||
setWidgetChartOption: 'setWidgetChartOption',
|
||||
openDashboardWidget: 'openDashboardWidget',
|
||||
}),
|
||||
...mapActions({
|
||||
postApi: 'modules/list/postApi',
|
||||
postApiReturn: 'modules/list/postApiReturn',
|
||||
}),
|
||||
convertStringToDateFormat(val) {
|
||||
var result = '';
|
||||
|
||||
result = Utility.setFormatDate(val, 'YYYY-MM-DD');
|
||||
|
||||
return result;
|
||||
},
|
||||
btnAction(action) {
|
||||
switch (action) {
|
||||
case 'popWidget':
|
||||
this.openDashboardWidget({
|
||||
prgmId: this.$route.query.prgmId,
|
||||
widgetId: this.widgetId,
|
||||
});
|
||||
break;
|
||||
case 'widgetCallPage':
|
||||
this.$parent.$parent.$parent.openWidgetPrgm(this.widgetId);
|
||||
break;
|
||||
}
|
||||
},
|
||||
async search() {
|
||||
const res = await this.postApiReturn({
|
||||
apiKey: 'selectWeekWorkCald',
|
||||
resKey: 'workcaldData',
|
||||
sendParam: {},
|
||||
});
|
||||
|
||||
const res2 = await this.postApiReturn({
|
||||
apiKey: 'selectWeekWorkCaldDetl',
|
||||
resKey: 'workcaldData',
|
||||
sendParam: {},
|
||||
});
|
||||
for (var i = 0; i < res.length; i++) {
|
||||
var hldyNm = res[i].hldyNm == null ? '' : res[i].hldyNm;
|
||||
eval(
|
||||
"document.getElementById('day" +
|
||||
i +
|
||||
"').innerHTML = res[" +
|
||||
i +
|
||||
"].day + ' ' +hldyNm",
|
||||
);
|
||||
if (res[i].hldyFg == '1') {
|
||||
eval(
|
||||
"document.getElementById('day" + i + "').className += ' redDay'",
|
||||
);
|
||||
}
|
||||
for (var j = 0; j < res2.length; j++) {
|
||||
if (res[i].day == res2[j].day && res2[j].planTitle != null) {
|
||||
var tmpHtml =
|
||||
"<p class ='" +
|
||||
res2[j].planColor +
|
||||
"Plan'>" +
|
||||
res2[j].planTitle +
|
||||
'</p>';
|
||||
if (i == 0) {
|
||||
document.getElementById('day0').innerHTML += tmpHtml;
|
||||
} else if (i == 1) {
|
||||
document.getElementById('day1').innerHTML += tmpHtml;
|
||||
} else if (i == 2) {
|
||||
document.getElementById('day2').innerHTML += tmpHtml;
|
||||
} else if (i == 3) {
|
||||
document.getElementById('day3').innerHTML += tmpHtml;
|
||||
} else if (i == 4) {
|
||||
document.getElementById('day4').innerHTML += tmpHtml;
|
||||
} else if (i == 5) {
|
||||
document.getElementById('day5').innerHTML += tmpHtml;
|
||||
} else if (i == 6) {
|
||||
document.getElementById('day6').innerHTML += tmpHtml;
|
||||
} else if (i == 7) {
|
||||
document.getElementById('day7').innerHTML += tmpHtml;
|
||||
} else if (i == 8) {
|
||||
document.getElementById('day8').innerHTML += tmpHtml;
|
||||
} else if (i == 9) {
|
||||
document.getElementById('day9').innerHTML += tmpHtml;
|
||||
} else if (i == 10) {
|
||||
document.getElementById('day10').innerHTML += tmpHtml;
|
||||
} else if (i == 11) {
|
||||
document.getElementById('day11').innerHTML += tmpHtml;
|
||||
} else if (i == 12) {
|
||||
document.getElementById('day12').innerHTML += tmpHtml;
|
||||
} else if (i == 13) {
|
||||
document.getElementById('day13').innerHTML += tmpHtml;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
const caldWidgetData = {};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.v-avatar {
|
||||
border-radius: 21px;
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
.v-virtual-scroll-wrapper {
|
||||
overflow-y: auto;
|
||||
max-height: 210px;
|
||||
}
|
||||
.weekday {
|
||||
background-color: #383f5d;
|
||||
border-right: 1px solid rgba(255, 255, 255, 0.1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 26px;
|
||||
width: 15%;
|
||||
padding: 0;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.weekdayForm {
|
||||
border-right: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
height: 7.6vh;
|
||||
min-height: 80px;
|
||||
box-sizing: border-box;
|
||||
width: 15%;
|
||||
overflow-y: auto;
|
||||
font-size: 14px;
|
||||
// padding-left: 3px;
|
||||
// padding-right: 6px;
|
||||
padding: 3px 4px;
|
||||
}
|
||||
.redDay {
|
||||
color: #fb5a83;
|
||||
border-left: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.blueDay {
|
||||
color: #2d8cf6;
|
||||
}
|
||||
|
||||
.redPlan {
|
||||
//background-color: rgba(229,62,62,var(--bg-opacity));
|
||||
background-color: #e53e3e !important;
|
||||
color: #fff;
|
||||
border-radius: 0.125rem;
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.25;
|
||||
text-align: left;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
.bluePlan {
|
||||
//background-color: rgba(66,153,225,var(--bg-opacity));
|
||||
background-color: #4299e1 !important;
|
||||
color: #fff;
|
||||
border-radius: 0.125rem;
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.25;
|
||||
text-align: left;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
.puplePlan {
|
||||
//background-color: rgba(102,126,234,var(--bg-opacity));
|
||||
background-color: #667eea !important;
|
||||
color: #fff;
|
||||
border-radius: 0.125rem;
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.25;
|
||||
text-align: left;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
.greenPlan {
|
||||
//background-color: rgba(56,178,172,var(--bg-opacity));
|
||||
background-color: #38b2ac !important;
|
||||
color: #fff;
|
||||
border-radius: 0.125rem;
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.25;
|
||||
text-align: left;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
.orangePlan {
|
||||
//background-color: rgba(237,137,54,var(--bg-opacity));
|
||||
background-color: #ed8936 !important;
|
||||
color: #fff;
|
||||
border-radius: 0.125rem;
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.25;
|
||||
text-align: left;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
.pinkPlan {
|
||||
//background-color: rgba(237,100,166,var(--bg-opacity));
|
||||
background-color: #ed64a6 !important;
|
||||
color: #fff;
|
||||
border-radius: 0.125rem;
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.25;
|
||||
text-align: left;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
.greyPlan {
|
||||
background-color: #6d6d6d;
|
||||
color: #fff;
|
||||
border-radius: 0.125rem;
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.25;
|
||||
text-align: left;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user