在vue的methods里有下面这个方法。帮我优化一下。 setcanvasetandpf(i, j, ctx, cwidth, cheight, zi) {
ctx.beginPath()
//绘制长方框
var huihua = 0
var szi = i
if (zi == 0) {
} else {
szi = zi
}
//维修检测
this.drawroomstate(i, j, ctx, cwidth, cheight, szi, huihua)
//入住情况
for (var m = 0; m < this.setandpf.data.set.length; m++) {
var starttime = new Date(this.setandpf.data.set[m][13])
var endtime = new Date(this.setandpf.data.set[m][14])
var starttime1 = starttime.getFullYear() + "-" + (starttime.getMonth() + 1).toString().padStart(2, '0') + "-" + starttime.getDate().toString().padStart(2, '0')
var endtime1 = endtime.getFullYear() + "-" + (endtime.getMonth() + 1).toString().padStart(2, '0') + "-" + endtime.getDate().toString().padStart(2, '0')
var days = this.subdate(this.condate3[j], endtime1)
if (this.roomlist[szi].id == this.setandpf.data.set[m][2] && this.condate3[j] == starttime1) {
//开始时间在查询日期之间的入住信息 这里分为已完成，未完成2种情况
if (this.setandpf.data.set[m][18] == "1" && this.setandpf.data.set[m][12] != "0") {
huihua = 1
var cc = this.getsalescolor(this.setandpf.data.set[m][5])
ctx.fillStyle = "#f2f3f6" //this.hexToRgba(cc.Row[4], 0.1) //表示已退房
ctx.fillRect(j * cwidth, szi * cheight, cwidth * (days) - 1, cheight - 1); // 绘制矩形
this.drawracts2(ctx, j, szi, cwidth, cheight, days)
ctx.fillStyle = cc.Row[4]; //ota标识
ctx.fillRect(j * cwidth, szi * cheight, cwidth - 90, cheight - 1); // 绘制矩形
ctx.fillStyle = "black";//预定人
ctx.fillText(this.setandpf.data.set[m][3], j * cwidth + 15, szi * cheight + 15);
ctx.font = '12px Arial';//来源渠道
ctx.fillText(cc.Row[1], j * cwidth + 15, szi * cheight + 33);
this.roomstatus(j, szi, this.roomlist[szi].id, 'tui', days, this.roomstatudes.tui, this.setandpf.data.set[m][0])
}
else if (this.setandpf.data.set[m][18] == "0") {
const now = new Date(endtime);
const todayAt14 = now.getFullYear() + "-" + (now.getMonth() + 1).toString().padStart(2, '0') + "-" + now.getDate().toString().padStart(2, '0') + " 14:30:00"
const dateToCompare = this.formatedate1(new Date());
const todays = new Date()
const dbtodays = todays.getFullYear() + "-" + (todays.getMonth() + 1).toString().padStart(2, '0') + "-" + todays.getDate().toString().padStart(2, '0') + " 14:30:00"
if (this.condate3[j] == this.addDays(endtime1, -1) && dateToCompare > todayAt14) {
huihua = 1
var cc = this.getsalescolor(this.setandpf.data.set[m][5])
ctx.fillStyle = this.hexToRgba(cc.Row[4], 0.3) //表示已退房
ctx.fillRect(j * cwidth, szi * cheight, cwidth * (days) - 1, cheight - 1); // 绘制矩形
this.drawracts2(ctx, j, szi, cwidth, cheight, days)
ctx.fillStyle = cc.Row[4]; //ota标识
ctx.fillRect(j * cwidth, szi * cheight, cwidth - 90, cheight - 1); // 绘制矩形
ctx.fillStyle = "black";//预定人
ctx.fillText(this.setandpf.data.set[m][3], j * cwidth + 15, szi * cheight + 15);
ctx.font = '12px Arial';//来源渠道
ctx.fillText(cc.Row[1], j * cwidth + 15, szi * cheight + 33);
ctx.fillStyle = '#f56c6c';
ctx.fillRect(j * cwidth + (cwidth * (days - 1)) + 80, szi * cheight + 3, cwidth - 84, cheight - 35); // 绘制矩形
ctx.font = '12px Arial';
ctx.fillStyle = 'white';
ctx.fillText('超', j * cwidth + (cwidth * (days - 1)) + 82, szi * cheight + 15);
this.roomstatus(j, szi, this.roomlist[szi].id, 'set', days, this.roomstatudes.zhu, this.setandpf.data.set[m][0])
} else {
const now = new Date(endtime);
const todayAt14 = now.getFullYear() + "-" + (now.getMonth() + 1).toString().padStart(2, '0') + "-" + now.getDate().toString().padStart(2, '0') + " 14:30:00"
const dateToCompare = this.formatedate1(new Date());
huihua = 1
var cc = this.getsalescolor(this.setandpf.data.set[m][5])
ctx.fillStyle = this.hexToRgba(cc.Row[4], 0.3) //表示已退房
this.drawracts2(ctx, j, szi, cwidth, cheight, days)
ctx.fillRect(j * cwidth, szi * cheight, cwidth * (days) - 1, cheight - 1); // 绘制矩形
ctx.fillStyle = cc.Row[4]; //ota标识
ctx.fillRect(j * cwidth, szi * cheight, cwidth - 90, cheight - 1); // 绘制矩形
ctx.fillStyle = "black";//预定人
ctx.fillText(this.setandpf.data.set[m][3], j * cwidth + 15, szi * cheight + 15);
ctx.font = '12px Arial';//来源渠道
ctx.fillText(cc.Row[1], j * cwidth + 15, szi * cheight + 33);
if (dateToCompare > todayAt14) {
ctx.fillStyle = '#f2f3f6';
ctx.fillRect(j * cwidth + (cwidth * (days - 1)) + 80, szi * cheight + 3, cwidth - 84, cheight - 35); // 绘制矩形
ctx.font = '13px Arial';
ctx.fillStyle = 'red';
ctx.fillText('超', j * cwidth + (cwidth * (days - 1)) + 82, szi * cheight + 15);
}
else {
ctx.fillStyle = '#67c23a'; //住背景
ctx.fillRect(j * cwidth + (cwidth * (days - 1)) + 80, szi * cheight + 3, cwidth - 84, cheight - 35); // 绘制矩形
ctx.font = '13px Arial';
ctx.fillStyle = 'white'; //住
ctx.fillText('住', j * cwidth + (cwidth * (days - 1)) + 82, szi * cheight + 15);
}
this.roomstatus(j, szi, this.roomlist[szi].id, 'set', days, this.roomstatudes.zhu, this.setandpf.data.set[m][0])
}
}
else {
}
break;
}
else {
if (this.roomlist[szi].id == this.setandpf.data.set[m][2] && this.condate3[j] < endtime1 && this.condate3[j] > starttime1) {
huihua = 1
if (this.setandpf.data.set[m][18] == "1") {
this.roomstatus(j, i, this.roomlist[szi].id, 'set', days, this.roomstatudes.tui, this.setandpf.data.set[m][0])
} else {
if (this.condate3[0] > starttime1 && this.condate3[0] == this.condate3[j]) {
const now = new Date(endtime);
const todayAt13 = now.getFullYear() + "-" + (now.getMonth() + 1).toString().padStart(2, '0') + "-" + now.getDate().toString().padStart(2, '0') + " 14:30:00"
const todayAt14 = new Date(todayAt13)
const dateToCompare = new Date(this.formatedate1(new Date()).replace(' ', 'T'));
var cc = this.getsalescolor(this.setandpf.data.set[m][5])
ctx.fillStyle = this.hexToRgba(cc.Row[4], 0.3) //表示已退房
ctx.fillRect(j * cwidth, szi * cheight, cwidth * (days) - 1, cheight - 1); // 绘制矩形
this.drawracts2(ctx, j, szi, cwidth, cheight, days)
ctx.fillStyle = cc.Row[4]; //ota标识
ctx.fillRect(j * cwidth, szi * cheight, cwidth - 90, cheight - 1); // 绘制矩形
ctx.fillStyle = "black";//预定人
ctx.fillText(this.setandpf.data.set[m][3], j * cwidth + 15, szi * cheight + 15);
ctx.font = '12px Arial';//来源渠道
ctx.fillText(cc.Row[1], j * cwidth + 15, szi * cheight + 33);
if (dateToCompare > todayAt14) {
ctx.fillStyle = '#f2f3f6'; //住背景
ctx.fillRect(j * cwidth + (cwidth * (days - 1)) + 80, szi * cheight + 3, cwidth - 84, cheight - 35); // 绘制矩形
ctx.font = '12px Arial';
ctx.fillStyle = 'red'; //住
ctx.fillText('超', j * cwidth + (cwidth * (days - 1)) + 82, szi * cheight + 15);
}
else {
ctx.fillStyle = '#67c23a'; //住背景
ctx.fillRect(j * cwidth + (cwidth * (days - 1)) + 80, szi * cheight + 3, cwidth - 84, cheight - 35); // 绘制矩形
ctx.font = '12px Arial';
ctx.fillStyle = 'red'; //住
ctx.fillText('住', j * cwidth + (cwidth * (days - 1)) + 82, szi * cheight + 15);
}
this.roomstatus(j, szi, this.roomlist[szi].id, 'set', days, this.roomstatudes.zhu, this.setandpf.data.set[m][0])
} else {
this.roomstatus(j, szi, this.roomlist[szi].id, 'set', days, this.roomstatudes.zhu, this.setandpf.data.set[m][0])
}
}
break;
}
else {
huihua = 0
}
}
if (this.roomlist[szi].id == this.setandpf.data.set[m][2] && this.condate3[0] > starttime1 && this.condate3[j] < endtime1 && this.condate3[0] == this.condate3[j]) {
//入住时间小于查询开始日期
if (this.setandpf.data.set[m][18] == "1") {
huihua = 1
var cc = this.getsalescolor(this.setandpf.data.set[m][5])
ctx.fillStyle = "#f2f3f6" //半透明背景
ctx.fillRect(j * cwidth, szi * cheight, cwidth * (days) - 1, cheight - 1); // 绘制矩形
this.drawracts2(ctx, j, szi, cwidth, cheight, days)
ctx.fillStyle = cc.Row[4]; //ota标识
ctx.fillRect(j * cwidth, szi * cheight, cwidth - 90, cheight - 1); // 绘制矩形
ctx.fillStyle = "black";//预定人
ctx.fillText(this.setandpf.data.set[m][3], j * cwidth + 15, szi * cheight + 15);
ctx.font = '12px Arial';//来源渠道
ctx.fillText(cc.Row[1], j * cwidth + 15, szi * cheight + 33);
ctx.fillStyle = 'black'; //离
ctx.fillText('离', j * cwidth + (cwidth * (days - 1)) + 82, szi * cheight + 15);
this.roomstatus(j, szi, this.roomlist[szi].id, 'set', days, this.roomstatudes.tui, this.setandpf.data.set[m][0])
}
else {
const now = new Date(endtime);
const todayAt13 = now.getFullYear() + "-" + (now.getMonth() + 1).toString().padStart(2, '0') + "-" + now.getDate().toString().padStart(2, '0') + " 14:30:00"
const todayAt14 = new Date(todayAt13)
const dateToCompare = new Date(this.formatedate1(new Date()).replace(' ', 'T'));
huihua = 1
var days = this.subdate(this.condate3[j], endtime1)
var cc = this.getsalescolor(this.setandpf.data.set[m][5])
ctx.fillStyle = this.hexToRgba(cc.Row[4], 0.1) //半透明背景
ctx.fillRect(j * cwidth, szi * cheight, cwidth * (days) - 1, cheight - 1); // 绘制矩形
this.drawracts2(ctx, j, szi, cwidth, cheight, days)
ctx.fillStyle = cc.Row[4]; //ota标识
ctx.fillRect(j * cwidth, szi * cheight, cwidth - 90, cheight - 1); // 绘制矩形
ctx.fillStyle = "black";//预定人
ctx.fillText(this.setandpf.data.set[m][3], j * cwidth + 15, szi * cheight + 15);
ctx.font = '12px Arial';//来源渠道
ctx.fillText(cc.Row[1], j * cwidth + 15, szi * cheight + 33);
if (dateToCompare > todayAt14) {
ctx.fillStyle = '#f56c6c'; //住背景
ctx.fillRect(j * cwidth + (cwidth * (days - 1)) + 80, szi * cheight + 3, cwidth - 84, cheight - 35); // 绘制矩形
ctx.font = '12px Arial';
ctx.fillStyle = 'red'; //住
ctx.fillText('超', j * cwidth + (cwidth * (days - 1)) + 82, szi * cheight + 15);
}
else {
ctx.fillStyle = '#67c23a'; //住背景
ctx.fillRect(j * cwidth + (cwidth * (days - 1)) + 80, szi * cheight + 3, cwidth - 84, cheight - 35); // 绘制矩形
ctx.font = '12px Arial';
ctx.fillStyle = 'red'; //住
ctx.fillText('住', j * cwidth + (cwidth * (days - 1)) + 82, szi * cheight + 15);
}
this.roomstatus(j, szi, this.roomlist[szi].id, 'set', days, this.roomstatudes.zhu, this.setandpf.data.set[m][0])
}
break;
}
else {
if (this.roomlist[szi].id == this.setandpf.data.set[m][2] && this.condate3[j] < endtime1 && this.condate3[0] > starttime1) {
huihua = 1
this.roomstatus(j, szi, this.roomlist[szi].id, 'set', days, this.roomstatudes.zhu, this.setandpf.data.set[m][0])
}
else {
huihua = 0
}
}
}
//预定情况
for (var m = 0; m < this.setandpf.data.pf.length; m++) {
var starttime = new Date(this.setandpf.data.pf[m][10])
var endtime = new Date(this.setandpf.data.pf[m][11])
var starttime1 = starttime.getFullYear() + "-" + (starttime.getMonth() + 1).toString().padStart(2, '0') + "-" + starttime.getDate().toString().padStart(2, '0')
var endtime1 = endtime.getFullYear() + "-" + (endtime.getMonth() + 1).toString().padStart(2, '0') + "-" + endtime.getDate().toString().padStart(2, '0')
var days = this.subdate(this.condate3[j], endtime1)
if (this.roomlist[szi].id == this.setandpf.data.pf[m][15] && this.condate3[j] == this.setandpf.data.pf[m][10]) {
if (this.condate3[j] == this.setandpf.data.pf[m][10]) {
huihua = 1
var cc = this.getsalescolor(this.setandpf.data.pf[m][9])
ctx.fillStyle = this.hexToRgba(cc.Row[4], 0.1) //半透明背景
ctx.fillRect(j * cwidth, szi * cheight, cwidth * days - 1, cheight - 1); // 绘制矩形
ctx.fillStyle = cc.Row[4]; //ota标识
ctx.fillRect(j * cwidth, szi * cheight, cwidth - 90, cheight - 1); // 绘制矩形
ctx.fillStyle = "black";//预定人
ctx.fillText(this.setandpf.data.pf[m][2], j * cwidth + 15, szi * cheight + 15);
ctx.font = '12px Arial';//来源渠道
ctx.fillText(cc.Row[1], j * cwidth + 15, szi * cheight + 33);
ctx.fillStyle = '#e6a23c'; //住背景
ctx.fillRect(j * cwidth + (cwidth * (days - 1)) + 80, szi * cheight + 3, cwidth - 84, cheight - 35); // 绘制矩形
ctx.font = '12px Arial';
ctx.fillStyle = 'white'; //住
ctx.fillText('预', j * cwidth + (cwidth * (days - 1)) + 82, szi * cheight + 15);
this.drawracts2(ctx, j, szi, cwidth, cheight, days)
this.roomstatus(j, szi, this.roomlist[szi].id, 'pf', days, this.roomstatudes.yu, this.setandpf.data.pf[m][0])
}
break;
}
else {
if (this.roomlist[szi].id == this.setandpf.data.pf[m][15] && this.condate3[j] < endtime1 && this.condate3[j] > starttime1) {
this.roomstatus(j, szi, this.roomlist[szi].id, 'pf', days, this.roomstatudes.yu, this.setandpf.data.pf[m][0])
huihua = 1
}
}
}
if (huihua == 0) {
var newdate = new Date();
var mydate = newdate.getFullYear() + "-" + (newdate.getMonth() + 1).toString().padStart(2, '0') + "-" + newdate.getDate().toString().padStart(2, '0')
if (this.condate3[j] == mydate) {
//这里今天判断房间状态
if (this.roomlist[i].clean == 0) {
const img = new Image();
// 设置图片源
img.src = '/src/assets/dasao.png'; // 替换为你的图片路径
img.onload = function () {
ctx.drawImage(img, j * cwidth + 30, szi * cheight + 8, 25, 25)
ctx.font = '12px Arial'; // 设置字体样式
ctx.fillText('打扫', j * cwidth + 30, szi * cheight + 46);
}
ctx.strokeStyle = "#dcdfe6"
ctx.lineWidth = 1
ctx.fillStyle = '#303133'; // 设置文本颜色为黑色
ctx.font = '14px Arial'; // 设置字体样式
this.drawracts1(ctx, j, szi, cwidth, cheight)
}
else {
ctx.strokeStyle = "#dcdfe6"
ctx.lineWidth = 1
ctx.fillStyle = '#303133'; // 设置文本颜色为黑色
ctx.font = '14px Arial'; // 设置字体样式
//ctx.strokeRect(j * cwidth, szi * cheight, cwidth, cheight); // 绘制填充后的长方形
this.drawracts1(ctx, j, szi, cwidth, cheight)
this.roomstatus(j, szi, 0, 'kong', 0, this.roomstatudes.kong)
}
}
else {
ctx.strokeStyle = "#dcdfe6"
ctx.lineWidth = 1
ctx.fillStyle = '#303133'; // 设置文本颜色为黑色
ctx.font = '14px Arial'; // 设置字体样式
//ctx.strokeRect(j * cwidth, szi * cheight, cwidth, cheight); // 绘制填充后的长方形
this.drawracts1(ctx, j, szi, cwidth, cheight)
this.roomstatus(j, szi, 0, 'kong', 0, this.roomstatudes.kong)
}
}
ctx.stroke();
},
日期格式化函数
扫一扫
406
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
