344 lines
8.6 KiB
Vue
344 lines
8.6 KiB
Vue
<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" scoped >
|
|
.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>
|