自己写的日历
写的太过杂乱，仅供个人查阅
<template>
<div>
<div class="popout"></div>
<div id="lq_audits">
<div class="header">
<span>日志详情</span>
<span class="header_span el-icon-close" @click="$emit('isgraduateLogS',false)"></span>
</div>
<div style="overflow: auto;height: 668px;" v-if="isRender">
<div class="content">
<div class="grad_span">
<span
v-for="(item,index) in aWeekTime"
:key="index"
@click="above(index)"
:style="{background:item.background}"
>
<i>{{item.num}}</i>
<i style="float:right;padding-right:10px;color:#cccccc">{{item.week}}</i>
<div class="ss" v-if="item.state === 1" style="display:inline-block;color:#666">已提交</div>
<div class="ss" v-else style="display:inline-block;color:#dd1f1f">未提交</div>
</span>
<span
class="Log_calendar"
v-if="isClass"
style="margin-left: -4px;"
@click="isAllWeeks"
>
<i style="visibility: hidden;">{{date.num}}</i>
<!-- <i style="float:right;padding-right:10px;">{{date.week}}</i>
<div class="ss" style="display:inline-block">{{date.content}}</div>-->
<i></i>
</span>
<span class="Log_calendars" v-else style="margin-left: -4px;" @click="isAllWeeks">
<i style="visibility: hidden;">{{date.num}}</i>
<!-- <i style="float:right;padding-right:10px;">{{date.week}}</i>
<div class="ss" style="display:inline-block">{{date.content}}</div>-->
<i></i>
</span>
</div>
<div
v-if="isAllWeek"
style="border:1px solid #ccc;width: 633px;height: 600px;margin-top:-1px; position: absolute;background:#fff;z-index:999 "
>
<div class="grad_bottom" v-if="isRenders">
<div>
<div style="border-bottom:1px solid #ccc;padding-top:20px;padding-bottom:20px">
<span style="color:#666666">{{presentTime[0]}} 年 {{presentTime[1]}} 月</span>
<span class="grad_boult" style="float:right">
<!-- <i style="margin-right:20px"><<</i> -->
<i class="back_lastmonth" style="margin-right:20px" @click="changeTime(-1)"></i>
<i class="back_nextmonth" style="margin-right:20px" @click="changeTime(1)"></i>
<!-- <i>>></i> -->
</span>
</div>
<div style="display:flex;width:554px;height:36px;line-height:43px">
<span class="grad_week">一</span>
<span class="grad_week">二</span>
<span class="grad_week">三</span>
<span class="grad_week">四</span>
<span class="grad_week">五</span>
<span class="grad_week">六</span>
<span class="grad_week">日</span>
</div>
<div class="grad_span">
<span
v-for="(item,index) in OneMonth"
:key="index"
:style="{background:item.background}"
@click="clickDetails(index)"
>
<i style="color:#666666">{{item.releaseTime.split('-')[2]}}</i>
<div class="ss" v-if="item.state === 1" style="color:#666666">已提交</div>
<div class="ss" v-else :style="{color:'#dd1f1f'}">未提交</div>
</span>
</div>
</div>
</div>
</div>
<div style="margin-top:32px" v-if="latelyLog.length">
<div style="margin-bottom:0px;position: relative;">
<label
for
style="position: absolute;margin-right: 20px;top:4px"
v-if="latelyLog[0].summary"
>日志 :</label>
<span>
<span
style="line-height:2;font-family: MicrosoftYaHei;width: 704px;display: inline-block;padding-left: 55px;"
v-for="(item,index) in latelyLog"
:key="index"
>{{item.summary}}</span>
</span>
<!-- <span v-else style="line-height:2;font-family: MicrosoftYaHei;width: 704px;display: inline-block;padding-left: 55px;">暂未提交报告</span> -->
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "graduateLogS",
props: {
obj: {
type: Object,
required: true
}
},
data() {
return {
form: {
desc: ""
},
value: new Date(),
datas: [],
date: { num: "55", content: "∧" },
datess: [],
isAllWeek: false, // 显示日历
dateList: [], // 日期（七天）// 通过接口获取的
aWeekTime: [], // 一星期的时间
isRender: false, // 是否渲染
isRenders: false, // 是否渲染(一个月的)
presentTime: [], // 记录当前时间
OneMonth: [], // 一个月的所有时间
dateListOneMonth: [], // 日期（一个月）通过接口获取的
firstWeek: "", // 一号是星期几
isClass: true, // 切换图片
lastMonth: new Date(), // 上个月
nextMonth: new Date(), // 下个月
allList: [], // 一个月的所有日志
Index: "",
isclick: true, // 是否进入
latelyLog: [] // 距离最近的日志
};
},
computed: {},
created() {
// console.log(this.obj);
// console.log(this.dateFormat(new Date(1567319986042)))
this.allAWeek(); // 获取一个星期所有日期
// console.log(this.lastDay(this.presentTime.join('-')))
},
mounted() {
this.getHebdomadLog(); // 获取七天日志
this.handleClick();
},
watch: {},
methods: {
handleClick() {
var time = this.dateFormat(new Date());
time = time.split("-").slice(0, 2);
// time[1] = 11
this.presentTime = time; // 获取当前的年份和月份
this.lastMonth = time;
this.nextMonth = time;
this.AllMonth(); // 获取本月的全部日期
this.FirstWeek(); // 获取当月开始时间是星期几
this.OneMonthLog(); // 获取一个的日志详情
},
onSubmit() {},
// 显示全部日历
isAllWeeks() {
this.isClass = !this.isClass;
this.isRenders = false;
var time = this.dateFormat(new Date());
time = time.split("-").slice(0, 2);
// time[1] = 11
this.presentTime = time; // 获取当前的年份和月份
this.lastMonth = time;
this.nextMonth = time;
this.AllMonth(); // 获取本月的全部日期
this.FirstWeek(); // 获取当月开始时间是星期几
this.OneMonthLog(); // 获取一个的日志详情
this.isAllWeek = !this.isAllWeek;
// console.log(11)
},
// 获取七天日志详情
getHebdomadLog() {
this.$get(
"/sxsx/sxsxactivityreport/JournalTeacherDay",
{
id: this.obj.id,
studentId: this.obj.stuID // 学生id
},
res => {
// console.log(res);
this.dateList = Array.from(
new Set(
res.data.map(item => {
return item.releaseTime;
})
)
);
// console.log(this.dateList);
for (var i = 0; i < this.aWeekTime.length; i++) {
for (var s = 0; s < res.data.length; s++) {
if (this.aWeekTime[i].releaseTime == res.data[s].releaseTime) {
this.aWeekTime[i] = res.data[s];
this.aWeekTime[i].num = Number(
this.getWeek(i, new Date()).split("-")[2]
); // 上边显示的几号
switch (i) {
case 0:
this.aWeekTime[i].week = "一";
break;
case 1:
this.aWeekTime[i].week = "二";
break;
case 2:
this.aWeekTime[i].week = "三";
break;
case 3:
this.aWeekTime[i].week = "四";
break;
case 4:
this.aWeekTime[i].week = "五";
break;
case 5:
this.aWeekTime[i].week = "六";
break;
case 6:
this.aWeekTime[i].week = "日";
break;
}
}
}
}
// console.log(this.aWeekTime,this.dateFormat(new Date()))
// let num = this.aWeekTime.findIndex(
// item => item.releaseTime === this.dateFormat(new Date())
// );
// console.log(num, this.aWeekTime.slice(0, num),this.aWeekTime);
// 找到距离七天内距离当前时间最近的日志
let befor = Array.from(
new Set(
this.aWeekTime
.filter(item => item.state)
.map(item => item.releaseTime)
)
);
// console.log(befor)
for (var i = 0; i < befor.length; i++) {
befor[i] = new Date(befor[i]).getTime();
}
// befor.push(new Date().getTime())
// console.log(befor)
let time = this.dateFormat(new Date(befor.sort()[befor.length - 1])); // 对日期进行排序
// console.log(time)
// console.log(this.dateFormat(new Date(befor.sort()[befor.length-1])))
// console.log(res.data.filter(item => item.releaseTime == time))
this.latelyLog = res.data.filter(item => item.releaseTime == time); // 找到距离最近的日志
// console.log(this.latelyLog)
this.Index = this.aWeekTime.findIndex(
item => item.releaseTime == this.dateFormat(new Date())
);
this.aWeekTime[this.Index].background = "rgba(23,118,225,0.1)";
// console.log(this.aWeekTime);
this.isRender = true; // 现在渲染
},
err => {
this.$message.error(err.msg);
throw err;
}
);
},
// 转化日期格式
dateFormat(now) {
var year = now.getFullYear(); //取得4位数的年份
var month =
now.getMonth() + 1 < 10
? "0" + (now.getMonth() + 1)
: now.getMonth() + 1; //取得日期中的月份，其中0表示1月，11表示12月
var date = now.getDate() < 10 ? "0" + now.getDate() : now.getDate(); //返回日期月份中的天数（1到31）
return year + "-" + month + "-" + date;
},
// 获取本周所有日期的方法
getWeek(i, f) {
var now = new Date(f);
var firstDay = new Date(now - (now.getDay() - 1) * 86400000);
firstDay.setDate(firstDay.getDate() + i);
var mon =
Number(firstDay.getMonth()) + 1 < 10
? "0" + (Number(firstDay.getMonth()) + 1)
: Number(firstDay.getMonth()) + 1;
return (
now.getFullYear() +
"-" +
mon +
"-" +
(firstDay.getDate() < 10
? "0" + firstDay.getDate()
: firstDay.getDate())
);
},
// 获取一个星期的时间
allAWeek() {
// console.log(Number(this.getWeek(0, new Date()).split('-')[2]))
for (var i = 0; i < 7; i++) {
this.aWeekTime.push({
releaseTime: this.getWeek(i, new Date()),
num: Number(this.getWeek(i, new Date()).split("-")[2]) // 上边显示的几号
});
switch (i) {
case 0:
this.aWeekTime[i].week = "一";
break;
case 1:
this.aWeekTime[i].week = "二";
break;
case 2:
this.aWeekTime[i].week = "三";
break;
case 3:
this.aWeekTime[i].week = "四";
break;
case 4:
this.aWeekTime[i].week = "五";
break;
case 5:
this.aWeekTime[i].week = "六";
break;
case 6:
this.aWeekTime[i].week = "日";
break;
}
}
},
// // 获取本月的全部日期
AllMonth() {
// console.log(this.dateFormat(new Date(new Date().setDate(1))))
// new Date().setDate(1);
this.FirstWeek();
this.OneMonth = [];
if (this.firstWeek !== 1 && this.firstWeek !== "") {
// 前一个月的天数
var count = new Date(
this.lastDay(this.presentTime.join("-")).split("-")[0],
this.lastDay(this.presentTime.join("-")).split("-")[1],
0
).getDate();
for (var i = 0; i < this.firstWeek - 1; i++) {
this.OneMonth.push({
releaseTime: this.getWeek(
i,
this.lastDay(this.presentTime.join("-"))
),
num: this.getWeek(
i,
this.lastDay(this.presentTime.join("-"))
).split("-")[2],
background: "#f2f2f2"
});
}
// console.log(this.OneMonth);
}
// return
this.OneMonth.push({
// this.dateFormat(new Date(new Date().setDate(1))), 当月的第一天
releaseTime: this.dateFormat(
new Date(new Date(this.presentTime.join("-")).setDate(1))
),
num: 1
});
// 获取当月的天数
var count = new Date(
this.presentTime[0],
this.presentTime[1],
0
).getDate();
// a 表示当前星期几（this.getWeek需要传入，不然有问题）
var a = new Date(
this.dateFormat(
new Date(new Date(this.presentTime.join("-")).setDate(1))
)
).getDay();
// console.log(a,new Date(new Date(this.presentTime.join("-")).setDate(1)))
for (var i = 0; i < count - 1; i++) {
this.OneMonth.push({
releaseTime: this.getWeek(
a,
new Date(this.presentTime.join("-")).setDate(1)
), // 当月的第一天
num: i + 2
});
a++;
}
// console.log(this.OneMonth);
},
// 获取一个月的日志详情
OneMonthLog(oldTime) {
// console.log(this.dateFormat(new Date()));
this.$get(
"/sxsx/sxsxactivityreport/JournalTeacherWeek",
{
id: this.obj.id,
studentId: this.obj.stuID, // 学生id
week: oldTime ? oldTime : this.dateFormat(new Date()) // 指定月份（传入）
},
res => {
// console.log(res.data);
this.allList = res.data;
this.dateListOneMonth = Array.from(
new Set(
res.data.map(item => {
return item.releaseTime;
})
)
);
// console.log(this.dateListOneMonth);
// 找到与日期对应的
for (var i = 0; i < this.OneMonth.length; i++) {
for (var s = 0; s < res.data.length; s++) {
if (this.OneMonth[i].releaseTime == res.data[s].releaseTime) {
this.OneMonth[i] = res.data[s];
this.OneMonth[i].num = this.OneMonth[i - 1].num + 1; // 表示几号
}
}
}
// console.log(this.OneMonth);
// 给星期六天加背景色
for (var f = 0; f < this.OneMonth.length; f++) {
if (
new Date(this.OneMonth[f].releaseTime).getDay() === 0 ||
new Date(this.OneMonth[f].releaseTime).getDay() === 6
) {
this.OneMonth[f].background = "#f2f2f2";
}
}
// console.log(this.dateFormat(new Date()))
this.presentTime[2] = "01";
// 找到当前时间在数组中的索引
let num = res.data.findIndex(
item => item.releaseTime === this.dateFormat(new Date())
);
// console.log(num, res.data.slice(0, num));
// let befor = Array.from(
// new Set(
// res.data.filter(item => item.state).map(item => item.releaseTime)
// )
// );
// console.log(befor)
// for (var i = 0; i < befor.length; i++) {
// befor[i] = new Date(befor[i]).getTime();
// }
// // befor.push(new Date().getTime())
// console.log(befor)
// let time = this.dateFormat(new Date(befor.sort()[befor.length - 1])); // 对日期进行排序
// console.log(time)
// // console.log(this.dateFormat(new Date(befor.sort()[befor.length-1])))
// // console.log(res.data.filter(item => item.releaseTime == time))
// this.latelyLog = res.data.filter(item => item.releaseTime == time); // 找到距离最近的日志
// console.log(this.latelyLog)
// 选中后的颜色
if (this.isclick) {
var count = this.OneMonth.findIndex(
item => item.releaseTime == this.aWeekTime[this.Index].releaseTime
);
this.OneMonth[count].background = "rgba(23,118,225,0.1)";
}
this.isRenders = true;
},
err => {
this.$message.error(err.msg);
throw err;
}
);
},
// 获取当月的最后一天
getCurrentMonthLast() {
var date = new Date();
var currentMonth = date.getMonth();
var nextMonth = ++currentMonth;
var nextMonthFirstDay = new Date(date.getFullYear(), nextMonth, 1);
var oneDay = 1000 * 60 * 60 * 24;
return new Date(nextMonthFirstDay - oneDay);
},
// 获取上个月的最后一天
lastDay(time) {
var nowdays = new Date(time);
var year = nowdays.getFullYear();
var month = nowdays.getMonth();
if (month == 0) {
month = 12;
year = year - 1;
}
if (month < 10) {
month = "0" + month;
}
var firstDay = year + "-" + month + "-" + "01"; //上个月的第一天
var myDate = new Date(year, month, 0);
var lastDay = year + "-" + month + "-" + myDate.getDate(); //上个月的最后一天
return lastDay;
},
// 获取当月开始日期是星期几
FirstWeek() {
this.firstWeek = new Date(
this.dateFormat(
new Date(new Date(this.presentTime.join("-")).setDate(1))
)
).getDay();
switch (this.firstWeek) {
case 1:
this.firstWeek = 1;
break;
case 2:
this.firstWeek = 2;
break;
case 3:
this.firstWeek = 3;
break;
case 4:
this.firstWeek = 4;
break;
case 5:
this.firstWeek = 5;
break;
case 6:
this.firstWeek = 6;
break;
case 0:
this.firstWeek = 7;
break;
}
},
// 加减时间(月份)
changeTime(num) {
// 减
this.isclick = false;
if (num === -1) {
// console.log(this.lastMonth,this.nextMonth);
this.isRenders = false;
var d = new Date(this.lastMonth.join("-"));
d.setMonth(d.getMonth() + num);
// console.log(d.toLocaleString().split('/'));
this.lastMonth[0] = d.toLocaleString().split("/")[0];
this.lastMonth[1] =
Number(d.toLocaleString().split("/")[1]) < 10
? "0" + d.toLocaleString().split("/")[1]
: d.toLocaleString().split("/")[1];
this.lastMonth[2] = "01";
this.AllMonth(); // 获取本月的全部日期
this.FirstWeek(); // 获取当月开始时间是星期几
this.OneMonthLog(this.lastMonth.join("-")); // 获取一个的日志详情
// console.log(this.lastMonth.join("-"));
} else {
// 加
this.isRenders = false;
var d = new Date(this.lastMonth.join("-"));
d.setMonth(d.getMonth() + num);
// console.log(d.toLocaleString().split('/'));
this.lastMonth[0] = d.toLocaleString().split("/")[0];
this.lastMonth[1] =
Number(d.toLocaleString().split("/")[1]) < 10
? "0" + d.toLocaleString().split("/")[1]
: d.toLocaleString().split("/")[1];
this.lastMonth[2] = "01";
this.AllMonth(); // 获取本月的全部日期
this.FirstWeek(); // 获取当月开始时间是星期几
this.OneMonthLog(this.lastMonth.join("-")); // 获取一个的日志详情
// console.log(999);
}
},
// 点击上边的())
above(index) {
// console.log(this.aWeekTime[index],this.allList)
// console.log(this.aWeekTime.filter(item => item.releaseTime == this.aWeekTime[index].releaseTime))
this.latelyLog = this.aWeekTime.filter(
item => item.releaseTime == this.aWeekTime[index].releaseTime
);
// console.log(new Date(this.dateFormat(this.getCurrentMonthLast())).getTime());
// console.log(index, new Date(this.aWeekTime[index].releaseTime).getTime()>new Date(this.dateFormat(this.getCurrentMonthLast())).getTime());
// return;
let times = this.dateFormat(new Date()).split("-");
times.pop();
times[2] = "01";
// console.log(times.join('-'))
// this.presentTime.pop()
// console.log(this.presentTime.join('-'))
if (this.presentTime.join("-") !== times.join("-")) {
return;
}
this.isRender = false;
this.isRenders = false;
this.Index = index; // 记录当前点击的索引
this.presentTime[2] = "01";
let num = this.OneMonth.findIndex(
item => item.releaseTime == this.presentTime.join("-")
); // 找到月份开始的索引
// 循环的是一个月的日期
for (var f = num; f < this.OneMonth.length; f++) {
this.OneMonth[f].background = "";
if (
new Date(this.OneMonth[f].releaseTime).getDay() === 0 ||
new Date(this.OneMonth[f].releaseTime).getDay() === 6
) {
this.OneMonth[f].background = "#f2f2f2";
}
}
// 循环7天的日期
for (var i = 0; i < this.aWeekTime.length; i++) {
this.aWeekTime[i].background = "";
}
this.aWeekTime[index].background = "rgba(23,118,225,0.1)";
var count = this.OneMonth.findIndex(
item => item.releaseTime == this.aWeekTime[index].releaseTime
);
// 判断点击的是不是下个月的
// 当月最后一天< 点击之后的
if (
new Date(this.aWeekTime[index].releaseTime).getTime() >
new Date(this.dateFormat(this.getCurrentMonthLast())).getTime()
) {
this.isRender = true;
this.isRenders = true;
return;
}
this.OneMonth[count].background = "rgba(23,118,225,0.1)";
this.isRender = true;
this.isRenders = true;
},
// 点击某天查看日志详情
clickDetails(index) {
// console.log(this.OneMonth[index])
// this.OneMonth[index]
this.isRender = false;
this.presentTime[2] = "01";
let num = this.OneMonth.findIndex(
item => item.releaseTime == this.presentTime.join("-")
); // 找到月份开始的索引
// 循环的是一个月的日期
for (var f = 0; f < this.OneMonth.length; f++) {
if (f < num) {
this.OneMonth[f].background = "#f2f2f2";
} else {
this.OneMonth[f].background = "";
}
if (
new Date(this.OneMonth[f].releaseTime).getDay() === 0 ||
new Date(this.OneMonth[f].releaseTime).getDay() === 6
) {
this.OneMonth[f].background = "#f2f2f2";
}
}
var indexs = this.aWeekTime.findIndex(
item => item.releaseTime == this.OneMonth[index].releaseTime
);
if (indexs !== -1) {
// console.log(indexs)
for (var i = 0; i < this.aWeekTime.length; i++) {
this.aWeekTime[i].background = "";
}
this.aWeekTime[indexs].background = "rgba(23,118,225,0.1)";
}
this.OneMonth[index].background = "rgba(23,118,225,0.1)";
this.isRender = true;
if (this.OneMonth[index].state === 1) {
// console.log(1)
this.$emit("clickLoGs", {
isok: true,
TheDay: this.OneMonth[index], // 当天时间
allList: this.allList // 所有数据
});
}
}
},
components: {}
};
</script>
<style lang="scss" scoped>
.grad_boult i {
cursor: pointer;
}
.grad_week {
flex: 1;
color: #ccc;
}
i {
font-style: normal;
}
.grad_bottom {
width: 633px;
height: 524px;
padding-left: 40px;
padding-right: 39px;
box-sizing: border-box;
}
.grad_span {
height: 80px;
span {
padding-left: 9px;
display: inline-block;
width: 80px;
height: 80px;
border: solid 1px #e4e4e4;
box-sizing: border-box;
margin-right: -1px;
// margin-left: -4px;
position: relative;
cursor: pointer;
.ss {
display: inline-block;
position: absolute;
font-size: 12px;
bottom: 19px;
left: 22px;
}
}
}
.record_span {
color: #666666;
display: block;
padding-bottom: 18px;
}
#lq_audits /deep/ textarea {
width: 809px;
height: 496px;
resize: none;
}
.el-button--primary {
color: #fff;
background-color: #00bfb8;
border-color: #00bfb8;
}
.el-button--default:hover {
background: #fff;
color: #606266;
border-color: #dcdfe6;
}
#lq_audits /deep/ .el-form-item__content {
display: inline-block;
}
#lq_audits {
width: 910px;
// height: 710px;
height: 787px;
position: absolute;
background: #fff;
z-index: 999;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border-radius: 5px;
text-align: left;
box-sizing: border-box;
.header {
height: 42px;
border-radius: 5px 5px 0 0;
background-color: #00bfb8;
padding: 14px 20px;
box-sizing: border-box;
span {
font-size: 14px;
color: white;
}
.header_span {
cursor: pointer;
float: right;
}
}
.content {
width: 811px;
// height: 100%;
// margin-bottom: 50px;
padding-top: 30px;
padding-left: 50px;
font-size: 14px;
.content_top {
display: flex;
span {
display: inline-block;
}
}
.content_bottom {
span {
display: inline-block;
}
}
}
.footer {
padding-right: 50px;
// position: absolute;
text-align: right;
margin-top: 73px;
// text-align: right;
}
}
// 遮罩层
.popout {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
opacity: 0.5;
z-index: 99;
}
// 日历
.Log_calendar {
background: url("../../../assets/back_fold.png") no-repeat center;
}
.Log_calendars {
background: url("../../../assets/back_unfold.png") no-repeat center;
}
// 上个月
.back_lastmonth {
display: inline-block;
width: 8px;
height: 14px;
background: url("../../../assets/back_lastmonth.png") no-repeat center;
}
.back_nextmonth {
display: inline-block;
width: 8px;
height: 14px;
background: url("../../../assets/back_nextmonth.png") no-repeat center;
}
// 点击后变背景色
.classBack {
background: rgba(23, 118, 225, 0.1);
}
</style>
最后呈现的效果
