<template>
|
<el-calendar
|
v-model="dateValue"
|
:range="dateRange"
|
@update:model-value="onDateChange"
|
>
|
<template #header="{ date }">
|
<span>{{ title }}</span>
|
<el-space>
|
<el-tag>总计：{{ taskStatistic.total }}</el-tag>
|
<el-tag>完成：{{ taskStatistic.complete }}</el-tag>
|
<el-tag>整改：{{ taskStatistic.changed }}</el-tag>
|
</el-space>
|
<!-- <span>{{ date }}</span> -->
|
</template>
|
<template #date-cell="{ data }">
|
<div :class="calendarDayClz(data.day)">
|
<div style="background-color: #f8f4f4">{{ getDay(data.day) }}</div>
|
<template v-if="computeDayTask(data.day)">
|
<!-- <el-divider></el-divider> -->
|
<el-row justify="space-between" class="m-t-16">
|
<el-space direction="vertical">
|
<el-text size="small">总计</el-text>
|
<el-text>{{ computeDayTask(data.day).totalTaskNum }}</el-text>
|
</el-space>
|
<el-space direction="vertical">
|
<el-text size="small">完成</el-text>
|
<el-text>{{ computeDayTask(data.day).completeTaskNum }}</el-text>
|
</el-space>
|
<el-space direction="vertical">
|
<el-text size="small">整改</el-text>
|
<el-text>{{ computeDayTask(data.day).changedTaskNum }}</el-text>
|
</el-space>
|
<!-- <el-statistic title="总计" :value="computeDayTask(data.day).totalTaskNum" />
|
<el-statistic title="完成" :value="computeDayTask(data.day).completeTaskNum" />
|
<el-statistic title="整改" :value="computeDayTask(data.day).changedTaskNum" /> -->
|
</el-row>
|
<!-- <div>任务总计：{{ computeDayTask(data.day).totalTaskNum }}</div>
|
<div>任务完成：{{ computeDayTask(data.day).completeTaskNum }}</div>
|
<div>任务整改：{{ computeDayTask(data.day).changedTaskNum }}</div> -->
|
</template>
|
</div>
|
</template>
|
</el-calendar>
|
</template>
|
<script setup>
|
import { ref, computed, onMounted, watch } from 'vue';
|
import taskApi from '@/api/fysp/taskApi';
|
import dayjs from 'dayjs';
|
|
const props = defineProps({
|
task: {
|
type: Object,
|
default: () => {}
|
},
|
dayTaskList: {
|
type: Array,
|
default: () => []
|
}
|
});
|
const emit = defineEmits(['dateChange']);
|
// 选中日期
|
const dateValue = ref();
|
// 日历标题
|
const title = computed(() => {
|
if (props.task) {
|
// return `${props.task.name}计划`;
|
return `巡查计划`;
|
} else {
|
return '';
|
}
|
});
|
// 日历范围
|
const startDay = computed(() => dayjs(props.task.starttime));
|
const endDay = computed(() => dayjs(props.task.endtime));
|
const dateRange = computed(() => [
|
startDay.value.toDate(),
|
endDay.value.toDate()
|
]);
|
// const dateRange = computed(() => [new Date(2024, 4, 27), new Date(2024, 5, 30)]);
|
|
// 日期是否在任务范围内
|
function isDayEnable(day) {
|
const _day = dayjs(day);
|
return (
|
_day.isSameOrAfter(startDay.value, 'day') &&
|
_day.isSameOrBefore(endDay.value, 'day')
|
);
|
}
|
|
/********************** 日期样式 *********************************/
|
function calendarDayClz(day) {
|
return (
|
'calendar-day ' +
|
(isDayEnable(day) ? 'calendar-day-enable' : 'calendar-day-disable')
|
);
|
}
|
function getDay(day) {
|
return day.split('-').splice(1, 2).join('-');
|
}
|
|
/********************** 任务数据 *********************************/
|
|
watch(
|
() => props.dayTaskList,
|
(nV, oV) => {
|
if (nV && dateValue.value) {
|
onDateChange(dateValue.value);
|
}
|
},
|
{ immediate: false }
|
);
|
|
// // 获取日任务统计信息
|
// const dayTaskLoading = ref(false);
|
// const dayTaskList = ref([]);
|
// function fetchDayTasks() {
|
// dayTaskLoading.value = true;
|
// return taskApi
|
// .fetchDayTasks(props.task.tguid)
|
// .then((res) => {
|
// dayTaskList.value = res;
|
// // 如果已选日期存在，在重新获取日任务统计信息后，再次触发点击事件
|
// if (dateValue.value) {
|
// onDateChange(dateValue.value);
|
// }
|
// })
|
// .finally(() => (dayTaskLoading.value = false));
|
// }
|
|
// 日任务数据展示
|
const compMap = new Map();
|
function computeDayTask(day) {
|
const key = props.task.tguid + day;
|
if (compMap.has(key)) {
|
return compMap.get(key).value;
|
}
|
const result = computed(() => {
|
return props.dayTaskList.find((v) => {
|
return dayjs(v.date).isSame(dayjs(day));
|
});
|
});
|
compMap.set(key, result);
|
return result.value;
|
}
|
|
function onDateChange(e) {
|
if (isDayEnable(e)) {
|
const day = dayjs(e).format('YYYY-MM-DD');
|
const t = computeDayTask(day);
|
emit('dateChange', t, day);
|
}
|
}
|
|
// 总任务统计
|
const taskStatistic = computed(() => {
|
const res = { total: 0, complete: 0, changed: 0 };
|
props.dayTaskList.forEach((e) => {
|
res.total += e.totalTaskNum;
|
res.complete += e.completeTaskNum;
|
res.changed += e.changedTaskNum;
|
});
|
return res;
|
});
|
/********************** 初始化 *********************************/
|
|
// watch(
|
// () => props.task,
|
// (nV) => {
|
// if (nV && nV.tguid) {
|
// fetchDayTasks();
|
// }
|
// },
|
// { immediate: true }
|
// );
|
|
// defineExpose({ fetchDayTasks });
|
</script>
|
<style scoped>
|
.li-01 {
|
width: 31px !important;
|
height: 31px;
|
background: #fff !important;
|
color: #001529 !important;
|
border: 1.5px solid #25de9d;
|
border-radius: 50%;
|
margin-left: 50%;
|
transform: translate(-15px);
|
line-height: 30px;
|
text-align: center;
|
font-size: 16px;
|
top: 5px;
|
}
|
|
::v-deep .el-calendar-table .el-calendar-day {
|
height: initial;
|
padding: initial;
|
}
|
|
::v-deep .el-calendar-table .el-calendar-day:hover {
|
background-color: transparent;
|
}
|
|
/* ::v-deep .el-calendar-table td.is-selected {
|
background-color: initial;
|
} */
|
|
.calendar-day {
|
/* text-align: center;
|
line-height: 30px;
|
width: 30px;
|
height: 30px;
|
border: 1px solid rgb(172, 165, 165);
|
border-radius: 50%; */
|
padding: 8px;
|
/* min-height: var(--el-calendar-cell-width); */
|
}
|
|
.calendar-day-enable {
|
}
|
|
.calendar-day-enable:hover {
|
background-color: var(--el-calendar-selected-bg-color);
|
}
|
|
.calendar-day-disable {
|
color: var(--el-text-color-disabled);
|
cursor: not-allowed;
|
}
|
|
/* ::v-deep .el-calendar-table tr td:first-child {
|
border-left: none !important;
|
} */
|
|
/* ::v-deep .el-calendar-table tr:first-child td {
|
border-top: none;
|
} */
|
|
/* ::v-deep .el-calendar-table td {
|
border-bottom: none;
|
border-right: none;
|
vertical-align: top;
|
-webkit-transition: background-color 0.2s ease;
|
transition: background-color 0.2s ease;
|
} */
|
|
::v-deep .el-calendar-table thead th {
|
padding: 12px 0;
|
color: #606266;
|
font-weight: normal;
|
background-color: #faeaea;
|
}
|
</style>
|
