'保安项目提交'
This commit is contained in:
esacpe
248
src/components/ZbCalendar/Calendar.vue
Normal file
248
src/components/ZbCalendar/Calendar.vue
Normal file
@ -0,0 +1,248 @@
|
||||
<template>
|
||||
<!-- 日历组件 -->
|
||||
<div class="calender">
|
||||
<div class="date-header">
|
||||
<!-- 切换日期按钮 -->
|
||||
<div class="btn-month">
|
||||
<div>
|
||||
<!-- <button @click="handleYear(-1)"><<</button> -->
|
||||
<el-button size="small" @click="handlePrev">
|
||||
<ArrowLeftBold style="width: 12px; height: 12px" />
|
||||
</el-button>
|
||||
</div>
|
||||
<div class="show-date">{{ year }}年{{ month }}月</div>
|
||||
<div>
|
||||
<el-button size="small" @click="handleNext">
|
||||
<ArrowRightBold style="width: 12px; height: 12px" />
|
||||
</el-button>
|
||||
<!-- <button @click="handleYear(1)">>></button> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="date-content">
|
||||
<div class="week-header">
|
||||
<div
|
||||
v-for="item in [
|
||||
'周日',
|
||||
'周一',
|
||||
'周二',
|
||||
'周三',
|
||||
'周四',
|
||||
'周五',
|
||||
'周六'
|
||||
]"
|
||||
:key="item"
|
||||
>
|
||||
{{ item }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="week-day">
|
||||
<div v-for="item in 42" :key="item + 'day'">
|
||||
<!-- 当月 -->
|
||||
<div
|
||||
:class="getDay(item - beginDay()) ? 'active' : ''"
|
||||
v-if="item - beginDay() > 0 && item - beginDay() <= prevDays(0)"
|
||||
@click="chack(item - beginDay())"
|
||||
>
|
||||
<span class="day">{{ item - beginDay() }}日</span>
|
||||
<div
|
||||
class="btn_day"
|
||||
v-for="(c, i) in data.filter(
|
||||
(evn) => evn.day * 1 == item - beginDay()
|
||||
)"
|
||||
:key="c * i"
|
||||
>
|
||||
<div class="tit" :style="{ backgroundColor: c.color }">
|
||||
{{ c.title }}
|
||||
</div>
|
||||
<div class="time">{{ c.time }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 上月 -->
|
||||
<div
|
||||
class="other-day"
|
||||
v-else-if="item - beginDay() <= 0"
|
||||
@click="handlePrev"
|
||||
>
|
||||
<span class="day">{{ item - beginDay() + prevDays(1) }}日</span>
|
||||
</div>
|
||||
<!-- 下月 -->
|
||||
<div class="other-day" v-else @click="handleNext">
|
||||
<span class="day">{{ item - beginDay() - prevDays(0) }}日</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, defineProps, watch, defineEmits } from "vue";
|
||||
const emit = defineEmits(["calClick"]);
|
||||
const props = defineProps({
|
||||
//数据
|
||||
list: Array
|
||||
});
|
||||
watch(
|
||||
() => props.list,
|
||||
() => {
|
||||
data.value = [...props.list];
|
||||
},
|
||||
{ deep: true }
|
||||
);
|
||||
const arr = ref([1]);
|
||||
const active = ref(null);
|
||||
const year = ref(null);
|
||||
const month = ref(null);
|
||||
const day = ref(null);
|
||||
const curDate = ref(null);
|
||||
const nextDay = ref(null);
|
||||
const data = ref([]);
|
||||
|
||||
function getInitDate() {
|
||||
const date = new Date();
|
||||
year.value = date.getFullYear();
|
||||
month.value = date.getUTCMonth() + 1;
|
||||
day.value = date.getDate();
|
||||
curDate.value = `${year.value}-${month.value}-${day.value}`;
|
||||
}
|
||||
// 獲取當天日期
|
||||
function getDay(e) {
|
||||
const date = new Date();
|
||||
const dqTime =
|
||||
date.getFullYear() + "-" + (date.getMonth() + 1) + date.getDate();
|
||||
return dqTime === year.value + "-" + month.value + e;
|
||||
}
|
||||
//获取1号开始位置
|
||||
function beginDay() {
|
||||
return new Date(year.value, month.value - 1, 1).getDay();
|
||||
}
|
||||
// 获取某月天数
|
||||
function prevDays(e) {
|
||||
return new Date(year.value, month.value - e, 0).getDate();
|
||||
}
|
||||
function handlePrev() {
|
||||
active.value = null;
|
||||
data.value = [];
|
||||
if (month.value == 1) {
|
||||
month.value = 12;
|
||||
year.value--;
|
||||
} else {
|
||||
month.value--;
|
||||
}
|
||||
emit("calClick", year.value + "-" + month.value);
|
||||
}
|
||||
function handleNext() {
|
||||
active.value = null;
|
||||
data.value = [];
|
||||
if (month.value == 12) {
|
||||
month.value = 1;
|
||||
year.value++;
|
||||
} else {
|
||||
month.value++;
|
||||
}
|
||||
emit("calClick", year.value + "-" + month.value);
|
||||
}
|
||||
function handleYear(e) {
|
||||
active.value = null;
|
||||
year.value += e;
|
||||
}
|
||||
function chack(e) {}
|
||||
|
||||
onMounted(() => {
|
||||
getInitDate();
|
||||
data.value = props.list;
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.calender {
|
||||
height: calc(100% - 80px);
|
||||
// overflow-y: scroll;
|
||||
.date-header {
|
||||
padding: 12px 0;
|
||||
}
|
||||
.btn-month {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.show-date {
|
||||
font-size: 18px;
|
||||
margin: 0 24px;
|
||||
}
|
||||
}
|
||||
.date-content {
|
||||
.week-header {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
> div {
|
||||
width: 13%;
|
||||
text-align: center;
|
||||
padding: 10px 0;
|
||||
border-left: 1px solid #266ff8;
|
||||
border-top: 1px solid #266ff8;
|
||||
}
|
||||
> div:nth-child(7) {
|
||||
border-right: 1px solid #266ff8;
|
||||
}
|
||||
}
|
||||
.week-day {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
> div:nth-child(7n) {
|
||||
border-right: 1px solid #266ff8;
|
||||
}
|
||||
> div:nth-child(36),
|
||||
> div:nth-child(37),
|
||||
> div:nth-child(38),
|
||||
> div:nth-child(39),
|
||||
> div:nth-child(40),
|
||||
> div:nth-child(41),
|
||||
> div:nth-child(42) {
|
||||
border-bottom: 1px solid #266ff8;
|
||||
}
|
||||
> div {
|
||||
border-left: 1px solid #266ff8;
|
||||
border-top: 1px solid #266ff8;
|
||||
width: 13%;
|
||||
min-height: 10vh;
|
||||
.btn_day {
|
||||
text-align: center;
|
||||
.tit {
|
||||
font-size: 16px;
|
||||
margin: 0 50px;
|
||||
line-height: 2em;
|
||||
padding: 0 16px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.time {
|
||||
line-height: 2em;
|
||||
}
|
||||
}
|
||||
}
|
||||
.other-day,
|
||||
.other-day {
|
||||
color: #858585;
|
||||
// height: 11vh;
|
||||
}
|
||||
.day {
|
||||
display: block;
|
||||
padding: 4px;
|
||||
text-align: right;
|
||||
}
|
||||
.active {
|
||||
position: relative;
|
||||
}
|
||||
.active::after {
|
||||
content: "当天";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: rgb(63, 128, 248);
|
||||
padding: 4px;
|
||||
border-radius: 0 0 8px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
114
src/components/ZbCalendar/index.vue
Normal file
114
src/components/ZbCalendar/index.vue
Normal file
@ -0,0 +1,114 @@
|
||||
<!-- 全县值班 -->
|
||||
<template>
|
||||
<div class="calendar">
|
||||
<div class="card" ref="cal" @date-click="handleDateClick"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, nextTick, defineEmits, onMounted, watch } from "vue";
|
||||
import { Calendar } from "@fullcalendar/core";
|
||||
import dayGridPlugin from "@fullcalendar/daygrid";
|
||||
import timeGridPlugin from "@fullcalendar/timegrid";
|
||||
import listPlugin from "@fullcalendar/list";
|
||||
import interactionPlugin from "@fullcalendar/interaction";
|
||||
const emit = defineEmits(["calClick"]);
|
||||
const props = defineProps({
|
||||
//数据
|
||||
list: Array,
|
||||
//是否可点击日程
|
||||
isClick: Boolean
|
||||
});
|
||||
const Tcalendar = ref(null);
|
||||
function initCalendar() {
|
||||
Tcalendar.value = new Calendar(cal.value, {
|
||||
// timeZone: 'UTC',
|
||||
plugins: [dayGridPlugin, timeGridPlugin, listPlugin, interactionPlugin],
|
||||
initialView: "dayGridMonth",
|
||||
headerToolbar: {
|
||||
left: "todayCustom",
|
||||
center: "title",
|
||||
right: "prevMonthCustom,nextMonthCustom"
|
||||
},
|
||||
//自定义按钮
|
||||
customButtons:{
|
||||
prevMonthCustom:{
|
||||
text:'上月',
|
||||
click:function(){
|
||||
Tcalendar.value.prev()
|
||||
Tcalendar.value.render();
|
||||
}
|
||||
},
|
||||
nextMonthCustom:{
|
||||
text:'下月',
|
||||
click:function(){
|
||||
Tcalendar.value.next()
|
||||
Tcalendar.value.render();
|
||||
}
|
||||
},
|
||||
todayCustom:{
|
||||
text:'今天',
|
||||
click:function(){
|
||||
Tcalendar.value.today()
|
||||
Tcalendar.value.render();
|
||||
}
|
||||
}
|
||||
},
|
||||
locale: "zh-cn",
|
||||
weekNumbers: true, //是否显示一年第几周
|
||||
selectable: props.isClick, //是否可点击日程 || 日期
|
||||
dayMaxEvents: true, // 是否可显示弹窗
|
||||
events: props.list,
|
||||
displayEventTime: true, // 是否显示时间
|
||||
eventClick: function (info) {
|
||||
emit("calClick", info.event._def.extendedProps.myData);
|
||||
}
|
||||
});
|
||||
Tcalendar.value.render();
|
||||
}
|
||||
watch(
|
||||
() => props.list,
|
||||
() => {
|
||||
initCalendar()
|
||||
},{deep:true}
|
||||
);
|
||||
const data = ref({});
|
||||
const cal = ref(null);
|
||||
onMounted(() => {
|
||||
initCalendar();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.calendar {
|
||||
height: calc(100% - 60px);
|
||||
.card {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
::v-deep .el-dialog__body,::v-deep.fc-toolbar-title {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
::v-deep .fc-h-event .fc-event-title-container {
|
||||
text-align: center;
|
||||
}
|
||||
::v-deep .fc-theme-standard .fc-scrollgrid {
|
||||
border: 1px solid #295ead;
|
||||
}
|
||||
::v-deep .fc-theme-standard td,
|
||||
::v-deep .fc-theme-standard th {
|
||||
border: 0 none;
|
||||
}
|
||||
::v-deep .fc-theme-standard td {
|
||||
border-right: 1px solid #295ead;
|
||||
}
|
||||
::v-deep .fc-theme-standard th {
|
||||
background: #0b4372;
|
||||
padding: 3px 0;
|
||||
}
|
||||
::v-deep .fc-scrollgrid-sync-table tr:nth-child(even) {
|
||||
background: #062555;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user