<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)">
|
<img :src="getEventIcon(event.type)" alt="" />
|
{{ event.name }}<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
|
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;
|
}
|
}
|
</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: 78px !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;
|
|
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: 14px;
|
color: #029d36;
|
margin-left: 2px;
|
}
|
}
|
}
|
}
|
</style>
|
