组件代码
<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.dayjsif (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 = 0var planObj = planArr.find(function (x) {if (x.date == item.date) {return x} else {return 0}})if (!planObj) {planCount = item.countvar planObj = {date: item.date,count: planCount}planArr.push(planObj)} else {planCount = planObj.count + item.countplanArr.forEach(plan => {if (plan.date == item.date) {item.count = planCount}});}});if (planArr.length > 0) {planArr.forEach(item => {var monthArr = []var daysArr = []var thingStr = '计划' + item.countvar 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>
