2025.7.21 任务管理-监管地图功能（待完成）

feiyu02

2025-07-21 5be9679fb4288936b576cf3d1f1548af1c4151b8

 src/views/fysp/task/components/CompMonitorPlan.vue

@@ -1,6 +1,5 @@
<template>
  <el-calendar
    v-loading="dayTaskLoading"
    v-model="dateValue"
    :range="dateRange"
    @update:model-value="onDateChange"
@@ -22,15 +21,15 @@
          <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-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-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-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" />
@@ -53,11 +52,15 @@
  task: {
    type: Object,
    default: () => {}
  },
  dayTaskList: {
    type: Array,
    default: () => []
  }
});
const emit = defineEmits(['dateChange'])
const emit = defineEmits(['dateChange']);
// 选中日期
const dateValue = ref(new Date());
const dateValue = ref();
// 日历标题
const title = computed(() => {
  if (props.task) {
@@ -70,18 +73,27 @@
// 日历范围
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(() => [
  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');
  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');
  return (
    'calendar-day ' +
    (isDayEnable(day) ? 'calendar-day-enable' : 'calendar-day-disable')
  );
}
function getDay(day) {
  return day.split('-').splice(1, 2).join('-');
@@ -89,18 +101,32 @@

/********************** 任务数据 *********************************/

// 获取日任务统计信息
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));
}
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();
@@ -110,7 +136,7 @@
    return compMap.get(key).value;
  }
  const result = computed(() => {
    return dayTaskList.value.find((v) => {
    return props.dayTaskList.find((v) => {
      return dayjs(v.date).isSame(dayjs(day));
    });
  });
@@ -119,17 +145,17 @@
}

function onDateChange(e) {
  const day = dayjs(e).format('YYYY-MM-DD')
  const t = computeDayTask(day)
  console.log(t);
  
  emit('dateChange', t)
  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 };
  dayTaskList.value.forEach((e) => {
  props.dayTaskList.forEach((e) => {
    res.total += e.totalTaskNum;
    res.complete += e.completeTaskNum;
    res.changed += e.changedTaskNum;
@@ -138,15 +164,17 @@
});
/********************** 初始化 *********************************/

watch(
  () => props.task,
  (nV) => {
    if (nV.tguid) {
      fetchDayTasks(nV.tguid);      
    }
  },
  { immediate: true }
);
// watch(
//   () => props.task,
//   (nV) => {
//     if (nV && nV.tguid) {
//       fetchDayTasks();
//     }
//   },
//   { immediate: true }
// );

// defineExpose({ fetchDayTasks });
</script>
<style scoped>
.li-01 {
@@ -185,7 +213,7 @@
  border: 1px solid rgb(172, 165, 165);
  border-radius: 50%; */
  padding: 8px;
  height: var(--el-calendar-cell-width);
  /* min-height: var(--el-calendar-cell-width); */
}

.calendar-day-enable {