integrated_traffic_vue/src/views/index/components/calendar.vue

<template>
  <div>
    <el-calendar v-model="value" class="mlr--18 border content">
      <template #date-cell="{ data: { day } }">
        <p class="calendar-data" @click="fnView(day)">
          <span v-for="(item, index) in dayTime" :key="index">
            <span v-if="day === item" class="budge" />
          </span>
          {{ day.split("-").slice(2).join() }}
        </p>
      </template>
    </el-calendar>
    <div class="mlr--18 border p-10 content">
      <div class="title">本日工作提醒</div>
      <div style="height: 42px">
        <div v-if="wjcNum > 0" class="text-red mb-10">
          需进行 {{ wjcNum }} 项隐患排查
        </div>
        <div class="text-green">已进行 {{ yjcNum }} 项隐患排查</div>
      </div>
    </div>
    <div class="mlr--18 border p-10 content">
      <div class="title">{{ currentDate }}日程安排</div>
      <ul>
        <li v-for="(item, index) in scheduleList" :key="index" class="line-1">
          {{ item.desc }}
        </li>
        <li v-if="scheduleList.length === 0">暂无工作安排</li>
      </ul>
    </div>
    <schedule-add
      v-model:visible="data.addOrEditDialog.visible"
      v-model:form="data.addOrEditDialog.form"
      :title="data.addOrEditDialog.title"
      :type="data.addOrEditDialog.type"
      @get-data="fnGetSchedule(data.addOrEditDialog.form.noteDate)"
    />
  </div>
</template>

<script setup>
import { nextTick, reactive, ref } from "vue";
import { getCalendar, getWorkReminder } from "@/request/index.js";
import dayjs from "dayjs";
import ScheduleAdd from "./schedule_add.vue";

const value = ref(new Date());
const dayTime = ref([]);
const wjcNum = ref(0);
const yjcNum = ref(0);
const currentDate = ref(dayjs().format("YYYY-MM-DD"));
const scheduleList = ref([]);
const data = reactive({
  addOrEditDialog: {
    visible: false,
    type: "",
    title: "",
    form: {
      SCHEDULE_ID: "",
      biaoti: "",
      neirong: "",
      noteDate: "",
    },
  },
});
const fnGetCalendar = async () => {
  const resData = await getCalendar();
  for (let i = 0; i < resData.varList.length; i++) {
    dayTime.value.push(resData.varList[i].date);
  }
};
const fnGetWorkReminder = async () => {
  const resData = await getWorkReminder();
  wjcNum.value = resData.wjcNum;
  yjcNum.value = resData.yjcNum;
};
const fnGetSchedule = async (CDATA, type = "") => {
  const resData = await getCalendar({ CDATA });
  if (type) {
    data.addOrEditDialog.visible = true;
    await nextTick();
    data.addOrEditDialog.title = CDATA + "号日程";
    if (resData.varList.length > 0) {
      data.addOrEditDialog.type = "edit";
      data.addOrEditDialog.form.SCHEDULE_ID = resData.varList[0].id;
      data.addOrEditDialog.form.biaoti = resData.varList[0].title;
      data.addOrEditDialog.form.neirong = resData.varList[0].desc;
      data.addOrEditDialog.form.noteDate = resData.varList[0].date;
    } else {
      data.addOrEditDialog.form.SCHEDULE_ID = Math.random();
      data.addOrEditDialog.form.noteDate = CDATA;
      data.addOrEditDialog.type = "add";
    }
  } else scheduleList.value = resData.varList;
};
fnGetCalendar();
fnGetWorkReminder();
fnGetSchedule(currentDate.value);
const fnView = (date) => {
  currentDate.value = date;
  if (dayjs().diff(dayjs(date), "day") > 0) {
    fnGetSchedule(date);
  } else {
    fnGetSchedule(date, "add");
    fnGetSchedule(date);
  }
};
</script>

<style scoped lang="scss">
.calendar-data {
  position: relative;

  .budge {
    width: 6px;
    height: 6px;
    background-color: #ff4d4f;
    border-radius: 50%;
    position: absolute;
    top: 5px;
    right: 5px;
  }
}

.title {
  font-weight: bold;
  padding-bottom: 10px;
}

.border {
  border-top: 1px solid #102b60;
}

.content {
  font-size: 14px;
}

ul {
  height: 106px;
  overflow: hidden;

  li {
    padding: 4px 0;
  }
}

:deep {
  .el-calendar-table .el-calendar-day {
    height: 40px;
    line-height: 40px;
    padding: 0;
    text-align: center;
  }

  .el-calendar__body {
    padding: 10px;
  }
}
</style>