463 lines
10 KiB
Vue
463 lines
10 KiB
Vue
<template>
|
|
<view class="calendar">
|
|
<view class="box-main2-time">
|
|
<view @click="alarmByCodeClick(item)" :class="{'time-active': item.id == timeActive}"
|
|
v-for="item in timeList" :key="item.id">
|
|
{{item.title}}
|
|
</view>
|
|
</view>
|
|
<view class="calendar-main">
|
|
<view class="calendar-header">
|
|
<view @click="defaultMonthFn" class="calendar-header_left">今天</view>
|
|
<!-- <u-icon @click="prevYear" name="arrow-left-double" color="#A2A4AF" size="40"></u-icon>
|
|
<u-icon @click="prevMonth" name="arrow-left" color="#A2A4AF" size="40"></u-icon> -->
|
|
<text>{{ currentYear }}.{{ currentMonth + 1 }}</text>
|
|
<!-- <u-icon @click="nextMonth" name="arrow-right" color="#A2A4AF" size="40"></u-icon>
|
|
<u-icon @click="nextYear" name="arrow-right-double" color="#A2A4AF" size="40"></u-icon> -->
|
|
</view>
|
|
<view class="calendar-header1">
|
|
<view class="">
|
|
正常记录
|
|
</view>
|
|
<view class="">
|
|
无记录
|
|
</view>
|
|
</view>
|
|
<view class="calendar-weekdays">
|
|
<text v-for="day in weekdays" :key="day">{{ day }}</text>
|
|
</view>
|
|
<picker mode="date" :value="currentDate" fields="month" @change="bindDateChange">
|
|
<view class="month-select">
|
|
{{ convertToChinese(currentMonth + 1) }}月
|
|
</view>
|
|
</picker>
|
|
|
|
<view class="calendar-days">
|
|
<view v-for="day in daysInMonth" :key="day.date" class="calendar-day" @click="examineCalendarView(day)"
|
|
:class="day.duration ? 'calendar-day2' : 'calendar-day1'">
|
|
<view class="calendar-day_header" :class="{
|
|
'other-month': day.isOtherMonth,
|
|
'current-day': $dayjs(day.date).format('YYYY-MM-DD') == defaultDay,
|
|
}">
|
|
{{ day.day }}
|
|
</view>
|
|
<view class="calendar-text"
|
|
:class="{'calendar-text_color': day.duration, 'calendar-text_color1': day.isBeforeDay || day.isCurrentDay}">
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import dayjs from "dayjs";
|
|
|
|
export default {
|
|
name: "CalendarView",
|
|
props: {
|
|
defaultMonth: {
|
|
type: String,
|
|
default: () => dayjs().format("YYYY-MM")
|
|
},
|
|
ocrBuildLogAllList: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
currentDate: this.defaultMonth,
|
|
weekdays: ["日", "一", "二", "三", "四", "五", "六"],
|
|
dataList: [],
|
|
defaultType: 1,
|
|
defaultDay: dayjs().format("YYYY-MM-DD"),
|
|
timeActive: 2,
|
|
timeList: [{
|
|
id: 1,
|
|
title: "上月"
|
|
}, {
|
|
id: 2,
|
|
title: "本月"
|
|
}, {
|
|
id: 3,
|
|
title: "下月"
|
|
}],
|
|
};
|
|
},
|
|
computed: {
|
|
convertToChinese() {
|
|
const digitMap = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九'];
|
|
return (num) => {
|
|
const numList = num.toString().split('');
|
|
return numList.map((digit, index) => {
|
|
if(digit == 0) return;
|
|
if(numList.length > 1 && index == 0) {
|
|
return "十"
|
|
}
|
|
return digitMap[parseInt(digit)]
|
|
})
|
|
.join('');
|
|
}
|
|
},
|
|
dateTimeUp() {
|
|
return (dateTime) => {
|
|
return !dayjs(dateTime).isBefore(dayjs());
|
|
};
|
|
},
|
|
currentYear() {
|
|
return dayjs(this.currentDate).year();
|
|
},
|
|
currentMonth() {
|
|
return dayjs(this.currentDate).month();
|
|
},
|
|
daysInMonth() {
|
|
console.log(22222222222, this.currentDate);
|
|
const currentDayjs = dayjs(this.currentDate);
|
|
const startOfMonth = currentDayjs.startOf("month");
|
|
const endOfMonth = currentDayjs.endOf("month");
|
|
const startDay = startOfMonth.day();
|
|
const endDay = endOfMonth.day();
|
|
|
|
// 计算上个月需要显示的天数
|
|
const prevMonthDays = [];
|
|
for (let i = startDay - 1; i >= 0; i--) {
|
|
const date = startOfMonth.subtract(startDay - i, "day");
|
|
// console.log(date.date(),date.format('YYYY-MM-DD'));
|
|
prevMonthDays.unshift({
|
|
day: date.date(),
|
|
date: date.format("YYYY-MM-DD"),
|
|
isOtherMonth: true,
|
|
isCurrentDay: false,
|
|
isBeforeDay: false,
|
|
});
|
|
}
|
|
|
|
// 计算当前月的天数
|
|
const currentMonthDays = [];
|
|
for (let i = 0; i < endOfMonth.date(); i++) {
|
|
const date = startOfMonth.add(i, "day");
|
|
currentMonthDays.push({
|
|
day: date.date(),
|
|
date: date.format("YYYY-MM-DD"),
|
|
isOtherMonth: false,
|
|
isCurrentDay: date.isSame(dayjs(), "day"),
|
|
isBeforeDay: date.isBefore(dayjs(), "day"),
|
|
});
|
|
}
|
|
|
|
// 计算下个月需要显示的天数
|
|
const nextMonthDays = [];
|
|
for (let i = 1; i <= 6 - endDay; i++) {
|
|
const date = endOfMonth.add(i, "day");
|
|
nextMonthDays.push({
|
|
day: date.date(),
|
|
date: date.format("YYYY-MM-DD"),
|
|
isOtherMonth: true,
|
|
isCurrentDay: false,
|
|
isBeforeDay: false,
|
|
});
|
|
}
|
|
const resultList = [
|
|
...prevMonthDays,
|
|
...currentMonthDays,
|
|
...nextMonthDays,
|
|
];
|
|
return resultList.map((item) => {
|
|
const find = this.dataList.find((ele) => dayjs(ele.date).format("YYYY-MM-DD") == item.date);
|
|
if (find) {
|
|
return {
|
|
...item,
|
|
...find,
|
|
};
|
|
}
|
|
return {
|
|
...item,
|
|
};
|
|
});
|
|
},
|
|
},
|
|
methods: {
|
|
bindDateChange(e) {
|
|
this.currentDate = dayjs(e.detail.value).format("YYYY-MM-DD");
|
|
},
|
|
defaultMonthFn() {
|
|
this.currentDate = this.defaultMonth;
|
|
this.defaultDay = dayjs().format("YYYY-MM-DD");
|
|
},
|
|
alarmByCodeClick(row) {
|
|
this.timeActive = row.id;
|
|
if (this.timeActive == 1) {
|
|
this.prevMonth();
|
|
} else if (this.timeActive == 2) {
|
|
this.currentDate = this.defaultMonth;
|
|
} else {
|
|
this.nextMonth();
|
|
}
|
|
},
|
|
prevMonth() {
|
|
this.currentDate = this.$dayjs(this.currentDate)
|
|
.subtract(1, "month")
|
|
.format("YYYY-MM-DD");
|
|
},
|
|
nextMonth() {
|
|
this.currentDate = this.$dayjs(this.currentDate)
|
|
.add(1, "month")
|
|
.format("YYYY-MM-DD");
|
|
},
|
|
prevYear() {
|
|
this.currentDate = this.$dayjs(this.currentDate)
|
|
.subtract(1, "year")
|
|
.format("YYYY-MM-DD");
|
|
},
|
|
nextYear() {
|
|
this.currentDate = this.$dayjs(this.currentDate)
|
|
.add(1, "year")
|
|
.format("YYYY-MM-DD");
|
|
},
|
|
currentDay() {
|
|
this.currentDate = dayjs(this.defaultMonth).format("YYYY-MM");
|
|
},
|
|
examineCalendarView(row) {
|
|
if (this.dateTimeUp(row.date)) return
|
|
this.defaultDay = this.$dayjs(row.date).format('YYYY-MM-DD');
|
|
this.$emit("examineCalendarView", row);
|
|
},
|
|
},
|
|
watch: {
|
|
defaultMonth: {
|
|
// immediate: true,
|
|
handler(newVal) {
|
|
console.log(1111111, newVal);
|
|
this.currentDay();
|
|
},
|
|
},
|
|
ocrBuildLogAllList: {
|
|
handler(newVal) {
|
|
this.dataList = newVal;
|
|
},
|
|
deep: true,
|
|
immediate: true,
|
|
},
|
|
daysInMonth: {
|
|
handler(newVal) {
|
|
const find = this.daysInMonth.find(item => this.$dayjs(item.date).format('YYYY-MM-DD') == this
|
|
.defaultDay);
|
|
if (find) {
|
|
this.$emit("examineCalendarView", find);
|
|
}
|
|
},
|
|
deep: true,
|
|
// immediate: true,
|
|
}
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.month-select {
|
|
font-weight: 500;
|
|
font-size: 32rpx;
|
|
color: #A3A3A3;
|
|
position: relative;
|
|
width: max-content;
|
|
margin-bottom: 16rpx;
|
|
}
|
|
|
|
.month-select::after {
|
|
content: "";
|
|
width: 0;
|
|
height: 0;
|
|
border-right: 16rpx solid #A3A3A3;
|
|
border-top: 12rpx solid transparent;
|
|
border-bottom: 12rpx solid transparent;
|
|
position: absolute;
|
|
right: -26rpx;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
.calendar-header1 {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 26rpx;
|
|
color: #707070;
|
|
margin-top: 26rpx;
|
|
|
|
>view {
|
|
position: relative;
|
|
}
|
|
|
|
>view:last-child {
|
|
margin-left: 50rpx;
|
|
}
|
|
|
|
>view::after {
|
|
content: "";
|
|
width: 11rpx;
|
|
height: 11rpx;
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
left: -26rpx;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
>view:first-child::after {
|
|
background-color: #667ED6;
|
|
}
|
|
|
|
>view:last-child::after {
|
|
background-color: #FFAB03;
|
|
}
|
|
}
|
|
|
|
.calendar-main {
|
|
margin-top: 26rpx;
|
|
padding: 26rpx;
|
|
border-radius: 8rpx 8rpx 8rpx;
|
|
border: 3rpx solid #D9D9D9;
|
|
}
|
|
|
|
.box-main2-time {
|
|
display: flex;
|
|
padding-top: 26rpx;
|
|
|
|
>view {
|
|
width: 144rpx;
|
|
height: 60rpx;
|
|
background-color: #EFF3F7;
|
|
border-radius: 50rpx;
|
|
font-weight: 500;
|
|
font-size: 26rpx;
|
|
color: #1A1A1A;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-right: 26rpx;
|
|
}
|
|
|
|
.time-active {
|
|
background-image: url('@/static/bridgeCraneMonitor/index-bg2.png');
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
}
|
|
|
|
.calendar {
|
|
width: 100%;
|
|
background-color: #FFFFFF;
|
|
padding: 0 28rpx;
|
|
}
|
|
|
|
.calendar-header {
|
|
display: flex;
|
|
// justify-content: space-between;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding-top: 40rpx;
|
|
position: relative;
|
|
|
|
.calendar-header_left {
|
|
position: absolute;
|
|
left: 0;
|
|
font-size: 28rpx;
|
|
color: #667ED6;
|
|
}
|
|
|
|
>text {
|
|
font-weight: 500;
|
|
font-size: 28rpx;
|
|
color: #242424;
|
|
background-color: #EAEAEA;
|
|
border-radius: 25rpx;
|
|
padding: 4rpx 20rpx;
|
|
display: inline-block;
|
|
}
|
|
}
|
|
|
|
.calendar-weekdays {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
// margin-bottom: 10px;
|
|
|
|
>text {
|
|
flex: 1;
|
|
height: 110rpx;
|
|
font-size: 28rpx;
|
|
color: #4D4D4D;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
.calendar-days {
|
|
display: grid;
|
|
grid-template-columns: repeat(7, 1fr);
|
|
gap: 0px;
|
|
height: 580rpx;
|
|
grid-auto-rows: auto;
|
|
}
|
|
|
|
.calendar-day {
|
|
cursor: pointer;
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
|
|
.calendar-day_header {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 60rpx;
|
|
height: 60rpx;
|
|
border-radius: 50%;
|
|
// border: 2rpx solid #B90303;
|
|
font-size: 28rpx;
|
|
color: #191919;
|
|
}
|
|
|
|
.calendar-text {
|
|
font-size: 20rpx;
|
|
width: 11rpx;
|
|
height: 11rpx;
|
|
border-radius: 50%;
|
|
margin-top: 10rpx;
|
|
}
|
|
|
|
.calendar-text_color1 {
|
|
background-color: #FFAA00;
|
|
}
|
|
|
|
.calendar-text_color {
|
|
background-color: #667ED6;
|
|
}
|
|
|
|
.day-active {
|
|
// border: 2rpx solid #3D99FF;
|
|
color: #4D4D4D;
|
|
}
|
|
|
|
.other-month {
|
|
color: #A3A3A3;
|
|
// display: none;
|
|
}
|
|
|
|
.current-day {
|
|
border-color: transparent;
|
|
background-color: #667ED6;
|
|
color: white;
|
|
}
|
|
|
|
.day-forbidden {
|
|
border-color: transparent;
|
|
background: #F8F8F8;
|
|
color: #4D4D4D;
|
|
}
|
|
}
|
|
</style> |