el-calendar日历组件

el-calendar日历组件

组件代码

<template>
    <el-calendar v-model="searchTime">
        <template slot="dateCell" slot-scope="{date, data}">
            <div @click="changeTime(date, data)">
                <div class="calendar-day">{{ data.day.split('-').slice(2).join('-') }}</div>
                <div v-for="(item, index) in calendarData" :key="index">
                    <div v-if="(item.months).indexOf(data.day.split('-').slice(1)[0]) != -1">
                        <div v-if="(item.days).indexOf(data.day.split('-').slice(2).join('-')) != -1">
                            <div class="is-selected"
                                :class="[item.status == 0 ? 'is-selected-select' : (item.status == 1 ? 'is-selected-warn' : 'is-selected-error')]">
                                {{ item.things }}
                            </div>
                        </div>
                        <div v-else></div>
                    </div>
                    <div v-else></div>
                </div>
            </div>
        </template>
    </el-calendar>
</template>

<script>
import operationBoard from '@/api/dashBoard/operationBoard/operationBoard.js'

export default {
  name: 'maintenanceCalendar',
  props: {
    //   calendarData: [
    //     { months: ['02'], days: ['01', '02'], things: '早', status: 0 },
    //     { months: ['02'], days: ['03', '04'], things: '休', status: 0 },
    //     { months: ['02'], days: ['05'], things: '早/中', status: 0 },
    //     { months: ['02'], days: ['06'], things: '中', status: 0 },
    //   ],
    calendarData: []
  },
  data() {
    return {
      searchTime: new Date()
    }
  },
  created() {

  },
  methods: {
    // 处理时间
    handleTime(s) {
      try {
        return s < 10 ? '0' + s : s
      } catch (error) {
        console.log('7->' + error)
      }
    },
    // 点击天数
    changeTime(date, data) {

    }
  },
  watch: {
    searchTime(newVal, oldVal) {
      var dayjs = this.dayjs
      if (newVal != '' && dayjs(newVal).format('YYYY-MM') != dayjs(oldVal).format('YYYY-MM')) {
        var month = dayjs(newVal).format('YYYY-MM-01')
        this.$emit('getMaintenancePlanCalendar', month)
      }
    }
  }
}
</script>

<style>
.tool_div {
    margin-top: -15px;
}

.el-calendar {
    background: none;
}

.el-calendar .el-calendar__header .el-calendar__title {
    color: #FFFFFF;
    font-size: medium;
}

.el-calendar-table thead th {
    color: #FFFFFF;
}

.el-calendar-table__row .current .calendar-day {
    text-align: center;
    color: #FFFFFF !important;
    /* line-height: 50px; */
    font-size: 16px;
    font-family: '思源黑体 CN Bold', '思源黑体 CN Regular', '思源黑体 CN';
    font-weight: 700;
    margin-top: 3px;
}

.el-calendar-table td.is-selected {
    cursor: pointer;
    background-color: #1A1A4F;
    color: #fff;
    border-radius: 10px;
}

.el-calendar-table:not(.is-range) td.next {
    /*隐藏下个月的日期*/
    visibility: hidden;
    display: none;
}

.el-calendar-table:not(.is-range) td.prev {
    /*隐藏上个月的日期*/
    visibility: hidden;
}

.is-selected {
    font-family: '思源黑体 CN Bold', '思源黑体 CN Regular', '思源黑体 CN';
    font-weight: 700;
    font-size: 12px;
    margin-top: 3px;
    text-decoration: none;
    text-align: center;
    /* color: rgb(104, 143, 235); */
}

.is-selected-select {
    color: rgb(104, 143, 235);
}

.is-selected-warn {
    color: rgb(26, 138, 39);
}

.is-selected-error {
    color: rgb(45, 25, 0);
}

.el-calendar-table tr td:first-child {
    border-left: none;
}

.el-calendar-table tr:first-child td {
    border-top: none;
}

.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;
}

.el-calendar-table .el-calendar-day {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 5px 0 5px 0;
    height: 7.14vh;
}

.el-calendar-table .current .el-calendar-day:hover {
    cursor: pointer;
    background-color: #1A1A4F;
    color: #fff;
    border-radius: 10px;
}

.el-calendar-table .prev .el-calendar-day:hover,
.el-calendar-table .next .el-calendar-day:hover {
    background-color: rgb(104, 143, 235);
}

.el-calendar-table .current .el-calendar-day:hover .calendar-day,
.el-calendar-table .current .el-calendar-day:hover .is-selected {
    color: #fff;
}
</style>

组件的使用

<template>
 <maintenanceCalendar @getMaintenancePlanCalendar="getMaintenancePlanCalendar" :calendarData="calendarData" />      
</template>

<script>
import maintenanceCalendar from '../../../../components/calendar/maintenanceCalendar.vue'

export default {
    data () {
        return {
            calendarData: [
                // {
                //     months: ['02'],
                //     days: ['01', '02'],
                //     things: '计划数 2',
                //     tooltip: '',
                //     status: 0,
                // },
                // {
                //     months: ['02'],
                //     days: ['02', '04'],
                //     things: '维护中 3',
                //     tooltip: '',
                //     status: 0,
                // },
                // {
                //     months: ['02'],
                //     days: ['05'],
                //     things: '完成数 1',
                //     tooltip: '',
                //     status: 0,
                // },
                // {
                //     months: ['02'],
                //     days: ['02'],
                //     things: '完成数 1',
                //     tooltip: '',
                //     status: 0,
                // }
            ],
        }
    },
    components: {
        maintenanceCalendar
    },
    props: {
       
    },
    watch: {
       
    },
    created () {

    },
    methods: {
        getMaintenancePlanCalendar (month) {
            new Promise((resolve, reject) => {
                operationBoard.getMaintenancePlanCalendar({ 'lineRange': this.lineCodeArr.lineRange, 'month': month }).then((val) => {
                    if (val.data != null) {
                        // 未开始 0 
                        // 维护中 1 
                        // 完成数 2 
                        // 计划数 3个加起来
                        if (val.data.length > 0) {
                            var arr = []
                            var planArr = []
                            val.data.forEach(item => {
                                var monthArr = []
                                var daysArr = []
                                var thingStr = ''

                                var timeArr = item.date.split('-')
                                monthArr.push(timeArr[1])
                                daysArr.push(timeArr[2])

                                if (item.state != 0) {
                                    if (item.state == 1) {
                                        thingStr = '维护中' + item.count
                                    } else if (item.state == 2) {
                                        thingStr = '完成' + item.count
                                    }
                                    var obj = {
                                        months: monthArr,
                                        days: daysArr,
                                        things: thingStr,
                                        tooltip: '',
                                        status: 1,
                                    }
                                    arr.push(obj)
                                }

                                var planCount = 0
                                var planObj = planArr.find(function (x) {
                                    if (x.date == item.date) {
                                        return x
                                    } else {
                                        return 0
                                    }
                                })

                                if (!planObj) {
                                    planCount = item.count
                                    var planObj = {
                                        date: item.date,
                                        count: planCount
                                    }
                                    planArr.push(planObj)
                                } else {
                                    planCount = planObj.count + item.count
                                    planArr.forEach(plan => {
                                        if (plan.date == item.date) {
                                            item.count = planCount
                                        }
                                    });
                                }
                            });

                            if (planArr.length > 0) {
                                planArr.forEach(item => {
                                    var monthArr = []
                                    var daysArr = []
                                    var thingStr = '计划' + item.count

                                    var timeArr = item.date.split('-')
                                    monthArr.push(timeArr[1])
                                    daysArr.push(timeArr[2])

                                    var obj = {
                                        months: monthArr,
                                        days: daysArr,
                                        things: thingStr,
                                        tooltip: '',
                                        status: 0,
                                    }
                                    arr.push(obj)
                                });
                            }
                            this.calendarData = arr
                        }

                    }
                })
                resolve('成功')
            }).then(result => {
              
            })
        },
    }
}
</script>