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>