long_IslandOcean/src/components/calendar/index.vue

<script setup>
import { ref, onMounted, nextTick } from "vue";
import { getEnergyCalendar } from "@/api/overview";
import moment from "moment";
// dom
const calendar = ref();
const calenderValue = ref(new Date());
// 时间参数
const calendarDate = ref(new Date());
const toggleClick = () => {};
const selectDate = (val) => {
  if (!calendar.value) return;
  calendar.value.selectDate(val);
  energyCalendar();
};
const dateValues = ref([
  { time: "01", EH: "10" },
  { time: "02", EH: "12" },
]);
//能耗日历
function energyCalendar() {
  let date = moment(calendarDate.value).format("YYYY-MM");
  let month = moment(calendarDate.value).format("MM");
  getEnergyCalendar({ date })
    .then((res) => {
      if (res.code == 200) {
        dateValues.value = res.data;
        getDateValue(date, month);
      } else {
        return false;
      }
    })
    .catch((err) => {
      console.log(err);
    });
}
function getDateValue(date, month) {
  let month1 = moment(calendarDate.value).format("MM");
  if (dateValues.value != undefined && month == month1) {
    const foundDate = dateValues.value.find((item) => item.time === date);
    if (foundDate) {
      return foundDate ? formatNumber(Number(foundDate.EH)) : "";
    }
  }
}
//保留两位小数点
function formatNumber(num) {
  if (typeof num === "number" && !isNaN(num)) {
    // 确认输入参数为有效的数字
    if (Number.isInteger(num)) {
      return num; // 若是整数不做操作
    } else {
      return Number.parseFloat(num).toFixed(2); // 若是小数转换为浮点数并保留两位小数
    }
  } else {
    throw new Error("Invalid input"); // 非法输入时抛出错误
  }
}
//初始化执行能耗日历
onMounted(() => {
  energyCalendar();
});
</script>

<template>
  <el-calendar ref="calendar" v-model="calendarDate" :row="5">
    <template #header="{ date }">
      <div>
        <img
          @click="selectDate('prev-year')"
          src="../../assets/images/overview/prevMonth.png"
          style="width: 1rem; height: 1rem; cursor: pointer"
        />
        <img
          @click="selectDate('prev-month')"
          src="../../assets/images/overview/prevYear.png"
          style="width: 1rem; height: 1rem; cursor: pointer"
        />

        <span @click="toggleClick" style="font-size: 13px">{{ date }}</span>
        <img
          @click="selectDate('next-month')"
          src="../../assets/images/overview/nextYear.png"
          style="width: 1rem; height: 1rem; cursor: pointer"
        />
        <img
          @click="selectDate('next-year')"
          src="../../assets/images/overview/nextMonth.png"
          style="width: 1rem; height: 1rem; cursor: pointer"
        />
      </div>
      <div class="returningToThisMonth" @click="selectDate('today')"></div>
    </template>
    <template #date-cell="{ data }">
      <p class="day">{{ data.day.split("-").slice(1)[1] }}</p>
      <p class="value">
        {{
          getDateValue(
            data.day.split("-").slice(1)[1],
            data.day.split("-").slice(1)[0]
          )
        }}
      </p>
    </template>
  </el-calendar>
</template>

<style scoped lang="less">
.el-calendar {
  font-size: 0.7rem;
  width: 100% !important;
  height: 100% !important;
  background-color: transparent !important;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
:deep(.el-calendar__header) {
  align-items: center;
  padding: 0 0.3rem;
  border-bottom: none;
  width: 100%;
  display: flex;
  justify-content: space-evenly;
}
:deep(.el-calendar__header > div:nth-child(-n + 1)) {
  // flex-grow: 1;
  // text-align: center;
  display: flex;
  justify-content: space-evenly;
  position: relative;
  left: 13%;
  width: 56%;
}
:deep(.el-calendar-day) {
  //display: none;
  width: 54px !important;
  padding: 3px !important;
  height: 25px !important;
  color: #b1fffa;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  // border:0.01px solid rgba(177, 255, 250, 0.2)
  //max-height:  1.8rem!important;
  @media only screen and (min-height: 1000px) {
    height: 30px !important;
  }
}
:deep(.el-calendar-day .day) {
  font-size: 13px;
  height: 60%;
  font-family: "D-DIN-Bold";
}
:deep(.el-calendar-day .value) {
  font-size: 10px;
  color: rgba(91, 250, 241, 1);
  height: 40%;
}
:deep(.el-calendar-table td) {
  background: url(../../assets/images/overview/thisMonth.png) no-repeat;
  background-size: 100% 100%;
}
:deep(.el-calendar-table thead th) {
  padding: 0;
  color: #ddfffd;
}
:deep(.el-calendar-table td) {
  border: none;
}
:deep(.el-calendar-table tr td:first-child) {
  border: none;
}
:deep(.el-calendar-table tr:first-child td) {
  border: none;
}
//鼠标悬停
:deep(.el-calendar-table :hover) {
  background: url(../../assets/images/overview/thisMonthAc.png) no-repeat;
  background-size: 100% 100%;
}
:deep(.el-calendar__body) {
  padding: 0 0.5rem;
  height: 79% !important;
}
//修改不是本月的字体颜色
:deep(.el-calendar-table__row) {
  .prev,
  .next {
    // 修改非本月
    .el-calendar-day {
      .day {
        font-size: 12px;
        color: rgba(177, 255, 250, 0.4);
      }
      .value {
        color: rgba(177, 255, 250, 0.4);
      }
    }
  }
}
//修改选中后的颜色
:deep(.el-calendar-table td.is-selected) {
  // .el-calendar-day {
  // p {
  // 选中日期颜色
  color: rgba(255, 251, 222, 1);
  // }
  // }
  background: url(../../assets/images/overview/thisMonthAc.png) no-repeat;
  background-size: 100% 100%;
  border: 0.5px dashed rgba(255, 255, 255, 0.3) !important;
  .el-calendar-day {
    .day {
      color: rgba(255, 251, 222, 1);
    }
    .value {
      color: rgba(1, 246, 139, 1);
    }
  }
}
.returningToThisMonth {
  width: 67px;
  height: 21px;
  background: url(../../assets/images/overview/returningToThisMonth.png)
    no-repeat;
  background-size: 100% 100%;
  position: relative;
  left: 9%;
  cursor: pointer;
}
</style>