soc_web/src/views/iot/dailycheck/Calendar.vue

<template>
  <div >
    <VCalender
      ref="calendar"
      :columns="layout.columns"
      :rows="layout.rows"
      :is-expanded="layout.isExpanded"
      :attributes="attrs"
      :min-date="startDate ? new Date(startDate) : new Date()"
      :max-date="endDate"
      v-model="selectedDate"
      @dayclick="onSelect"

    />
  </div>
</template>
<script>
import dayjs from "dayjs";

//日历组件
 import {Calendar as VCalender} from 'v-calendar';
export default {
  name: "Calendar",
   components:{VCalender},
  data() {

    return {
      selectedDate:this.defaultSelectedDate,
      layout: {
        columns: 1,
        rows: 1,
        isExpanded: true,
      },
      attrs: [
        {
          highlight: {
            start: {
              fillMode: "outline",
            },
            base: {
              color: "gray",
              fillMode: "light",
            },
            end: {
              fillMode: "outline",
            },
          },
          dates: { start: this.startDate?new Date(this.startDate):new Date(), end: this.endDate },
        },
        {
          highlight: {
            fillMode:'solid',
            color: "green",
            // style: {
            //   width: "16px",
            //   height: "3px",
            //   borderRadius: "0",
            // },
            contentClass: "italic",
          },
          dates: this.doDates,
        },
        {
          highlight: {
            fillMode:'solid',
            color: "red",
            // style: {
            //   width: "16px",
            //   height: "3px",
            //   borderRadius: "0",
            // },
            contentClass: "italic",
          },
          dates: this.unDoDates,
        },
        {
          highlight: {
            fillMode:'solid',
            color: "orange",
            // style: {
            //   width: "16px",
            //   height: "3px",
            //   borderRadius: "0",
            // },
            contentClass: "italic",
          },
          dates: this.halfDoDates,
        }
      ],
    };
  },
  props: {
    startDate: {
      isRequired: true,
    },
    endDate: {
      type:[Date,String],
      default: () => {
        return new Date();
      },
    },
    doDates: {
      isRequired: true,
      type: Array,
    },
    unDoDates: {
      isRequired: true,
      type: Array,
    },
    halfDoDates: {
      isRequired: true,
      type: Array,
    },
    defaultSelectedDate:{
      type:Object
    }
  },
  computed: {
    calendarWidth() {
      if (this.layout.columns === 0) {
        return "display:none";
      } else if (this.layout.columns === 1) {
        return "width:33.3%";
      } else if (this.layout.columns === 1) {
        return "width:66.6%";
      } else {
        return "";
      }
    },
  },
  watch: {
    startDate: {
      immediate: true,
      handler: function (v) {
        this.attrs[0].dates.start=v;
        this.setLayout(v);
      },
    },
    endDate: {
      immediate: true,
      handler: function (v) {
        console.log("456",v)
        this.attrs[0].dates.end=v;
      },
    },
    doDates: {
      immediate: true,
      handler: function (v) {
        this.attrs[1].dates=v;
      },
    },
    unDoDates: {
      immediate: true,
      handler: function (v) {
        this.attrs[2].dates=v;
      },
    },
    halfDoDates: {
      immediate: true,
      handler: function (v) {
        this.attrs[3].dates=v;
      },
    },
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      // this.setLayout();
      // const calendar = this.$refs.calendar;
      // setTimeout(() => {
      //   calendar.move({ month: 1, year: 1983 });
      // }, 3000);
      //calendar.move({ month: 1, year: 1983 });
      //this.setOps();
    },
    setLayout(startDate) {
      /*debugger
      console.log("qqqqq")
      if (startDate != null) {
        let diff = Math.ceil(
          dayjs(new Date()).diff(new Date(startDate), "months", true)
        );

        if (diff >= 2) {
          this.layout.columns = 2;
        } else {
          this.layout.columns = diff;
        }

        this.layout.rows = Math.ceil(diff / 2);
      }*/
    },
    onSelect(data){
      this.$emit("select",data.date)
    }
  },
};
</script>
<style scoped lang="scss"></style>