<template>
|
<div class="calenBox">
|
<el-calendar ref="calendar" v-model="leftValue">
|
<template #date-cell="{ data }">
|
<div :class="data.isSelected ? 'is-selected' : ''">
|
<div class="date-number">{{ data.day.slice(8, 10) }}</div>
|
<div class="events">
|
<div
|
v-for="(event, index) in getEvents(data.day)"
|
:key="index"
|
class="event-item"
|
:class="event.type"
|
@click="jumpcalendar(event, data.day)"
|
>
|
<div class="imgBox"><img :src="getEventIcon(event.type)" alt="" /> {{ event.name }}</div>
|
<span>{{ event.value }}</span>
|
</div>
|
</div>
|
</div>
|
</template>
|
</el-calendar>
|
</div>
|
</template>
|
|
<script setup>
|
import dayjs from 'dayjs';
|
import { jobEventBar, getCalen } from '@/api/home/index';
|
import { useRouter } from 'vue-router';
|
import ev1 from '@/assets/images/workbench/ev1.svg';
|
import ev2 from '@/assets/images/workbench/ev2.svg';
|
import { ElMessage } from 'element-plus';
|
const router = useRouter();
|
const events = ref({});
|
const params = ref({
|
end_date: undefined,
|
start_date: undefined,
|
});
|
const eventIcons = ref({
|
'work-order': ev1,
|
task: ev2,
|
});
|
const getEventIcon = type => {
|
return eventIcons.value[type] || eventIcons.value.default;
|
};
|
function getCurrentMonthRange() {
|
return {
|
start_date: dayjs().startOf('month').format('YYYY-MM-DD HH:mm:ss'),
|
end_date: dayjs().endOf('month').format('YYYY-MM-DD HH:mm:ss'),
|
};
|
}
|
const leftValue = ref(new Date());
|
watch(
|
() => leftValue.value,
|
(newV, oldV) => {
|
if (newV && oldV) {
|
const newDate = dayjs(newV);
|
params.value = {
|
start_date: newDate.startOf('month').format('YYYY-MM-DD HH:mm:ss'),
|
end_date: newDate.endOf('month').format('YYYY-MM-DD HH:mm:ss'),
|
};
|
getJobEventBar();
|
}
|
},
|
{ deep: true, immediate: true }
|
);
|
|
// 获取日期数字
|
const getDate = date => {
|
return date.getDate();
|
};
|
|
// 获取对应日期的事件
|
const getEvents = dateString => {
|
return events.value[dateString] || [];
|
};
|
const monthRange = getCurrentMonthRange();
|
params.value = monthRange;
|
|
const getJobEventBar = () => {
|
getCalen(params.value).then(res => {
|
if (res.data.code !== 0) return;
|
const a = res.data.data;
|
const filteredData = {};
|
for (let date in a) {
|
filteredData[date] = a[date].filter(item => item.type !== 'work-order');
|
}
|
events.value = filteredData;
|
// events.value = res.data.data
|
});
|
};
|
const jumpcalendar = (event, day) => {
|
if (event.name === '工单') {
|
router.push({
|
path: '/tickets/ticket',
|
query: {
|
day: day,
|
},
|
});
|
} else {
|
router.push({
|
path: '/job/jobstatistics',
|
query: {
|
day: day,
|
},
|
});
|
}
|
};
|
onMounted(() => {
|
getJobEventBar();
|
});
|
</script>
|
<style lang="scss">
|
.calenBox {
|
// height: 630px;
|
height: pxToVh(660);
|
// 隐藏按钮组中间按钮
|
.el-button-group > .el-button:not(:first-child):not(:last-child) {
|
display: none;
|
}
|
.date-number {
|
font-size: 13px !important;}
|
}
|
</style>
|
|
<style lang="scss" scoped>
|
.calenBox {
|
margin-top: 10px;
|
// height: 630px;
|
height: pxToVh(622);
|
border-radius: 10px;
|
overflow: hidden;
|
background-color: #fff;
|
|
::v-deep(.el-calendar) {
|
// height: 80%; // 日历填充容器
|
// 标题样式
|
.el-calendar__title {
|
font-weight: bold;
|
font-size: 14px;
|
color: #363636;
|
}
|
|
// 日历主体
|
// &__body {
|
// height: 98%; // 关键：继承父高度
|
|
// .el-calendar-table {
|
// height: 90% !important; // 百分比生效
|
// }
|
// }
|
.el-calendar-table .el-calendar-day {
|
|
height: pxToVh(91) !important;
|
}
|
|
// 选中日期样式
|
.el-calendar-table td.is-selected {
|
background-color: #f0f7ff;
|
border: 2px solid #409eff;
|
border-radius: 4px;
|
|
.date-number {
|
font-weight: bold;
|
color: #409eff;
|
}
|
}
|
}
|
|
.event-item {
|
font-size: 12px;
|
// padding: 2px;
|
text-align: center;
|
border-radius: 3px;
|
white-space: nowrap;
|
|
&.work-order {
|
font-weight: 400;
|
font-size: 12px;
|
color: #7b7b7b;
|
|
span {
|
font-weight: 600;
|
font-size: 14px;
|
color: #1c5cff;
|
margin-left: 2px;
|
}
|
}
|
|
&.task {
|
font-weight: 400;
|
font-size: 12px;
|
color: #7b7b7b;
|
|
span {
|
font-weight: 600;
|
font-size: 18px;
|
color: #029d36;
|
margin-left: 2px;
|
}
|
}
|
.imgBox {
|
font-size: 12px;}
|
}
|
}
|
</style>
|
