<template>
|
<el-calendar
|
v-loading="dayTaskLoading"
|
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: () => {}
|
}
|
});
|
const emit = defineEmits(['dateChange'])
|
// 选中日期
|
const dateValue = ref(new Date());
|
// 日历标题
|
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('-');
|
}
|
|
/********************** 任务数据 *********************************/
|
|
// 获取日任务统计信息
|
const dayTaskLoading = ref(false);
|
const dayTaskList = ref([]);
|
function fetchDayTasks(topTaskId) {
|
dayTaskLoading.value = true;
|
taskApi
|
.fetchDayTasks(topTaskId)
|
.then((res) => {
|
dayTaskList.value = res;
|
})
|
.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 dayTaskList.value.find((v) => {
|
return dayjs(v.date).isSame(dayjs(day));
|
});
|
});
|
compMap.set(key, result);
|
return result.value;
|
}
|
|
function onDateChange(e) {
|
const day = dayjs(e).format('YYYY-MM-DD')
|
const t = computeDayTask(day)
|
console.log(t);
|
|
emit('dateChange', t)
|
}
|
|
// 总任务统计
|
const taskStatistic = computed(() => {
|
const res = { total: 0, complete: 0, changed: 0 };
|
dayTaskList.value.forEach((e) => {
|
res.total += e.totalTaskNum;
|
res.complete += e.completeTaskNum;
|
res.changed += e.changedTaskNum;
|
});
|
return res;
|
});
|
/********************** 初始化 *********************************/
|
|
watch(
|
() => props.task,
|
(nV) => {
|
if (nV.tguid) {
|
fetchDayTasks(nV.tguid);
|
}
|
},
|
{ immediate: true }
|
);
|
</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;
|
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>
|