<template>
|
<div class="timeRangeSliderBox">
|
<canvas :id="mainId" :ref="mainId" width="700px" height="260px"
|
>抱歉,您的浏览器不支持canvas!请更换浏览器</canvas
|
>
|
<canvas
|
:id="`${mainId}Dummy`"
|
:ref="`${mainId}Dummy`"
|
width="700px"
|
height="260px"
|
@dblclick="handlerClick"
|
@mouseout="mouseout($event)"
|
@mousedown="mouseDown($event)"
|
@mousemove="mousemove($event)"
|
@mouseup="mouseup($event)"
|
>抱歉,您的浏览器不支持canvas!请更换浏览器</canvas
|
>
|
<div
|
class="popup-box"
|
:style="`top:${popPos.y + 10}px;left:${popPos.x - 70}px`"
|
v-if="isPopup"
|
>
|
<div>
|
<b>开始时间:</b>
|
<input
|
v-model="changeTime.startHour"
|
:min="0"
|
:max="changeTime.endHour"
|
type="number"
|
placeholder="时"
|
/>
|
<b>:</b>
|
<input v-model="changeTime.startMin" type="number" placeholder="分" />
|
</div>
|
<div>
|
<b>结束时间:</b>
|
<input
|
v-model="changeTime.endHour"
|
:min="changeTime.startHour"
|
:max="24"
|
type="number"
|
placeholder="时"
|
/>
|
<b>:</b>
|
<input v-model="changeTime.endMin" type="number" placeholder="分" />
|
</div>
|
<div style="margin-top: 5px">
|
<el-button @click="deleteRange">删除</el-button>
|
<el-button @click="cancalPop">取消</el-button>
|
<el-button @click="timeAck">确定</el-button>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
mounted() {
|
this.initMain();
|
this.initMainDummy();
|
},
|
data() {
|
return {
|
x: "",
|
y: "",
|
isMouseDown: false,
|
isCreate: false,
|
isResizeLeft: false,
|
isResizeRight: false,
|
actRange: "",
|
actGrid: "",
|
rangeArr: [],
|
gridArr: [],
|
currentPointX: "",
|
actRangeIndex: "",
|
noLimit: 0,
|
isPopup: false,
|
popPos: {
|
x: "",
|
y: "",
|
},
|
changeTime: {
|
startHour: "",
|
startMin: "",
|
endHour: "",
|
endMin: "",
|
},
|
rangeArrBackup: "",
|
styleClass: {
|
weekTextColor: "",
|
minutePerColor: "#cdcdcd",
|
minutePerTextColor: "#808080",
|
},
|
};
|
},
|
props: {
|
timeData: {
|
default: () => {},
|
type: Array,
|
},
|
mainId: {
|
type: String,
|
default: "",
|
},
|
itemId: {
|
type: String,
|
default: "",
|
},
|
itemName: {
|
type: String,
|
default: "",
|
},
|
edit: {
|
type: Boolean,
|
default: false,
|
},
|
},
|
watch: {
|
changeTime: {
|
handler(newVal, oldVal) {
|
if (newVal.startHour >= 24) {
|
newVal.startHour = 24;
|
newVal.startMin = 0;
|
}
|
|
if (newVal.endHour >= 24) {
|
newVal.endHour = 24;
|
newVal.endMin = 0;
|
}
|
|
if (newVal.startHour < 0) {
|
newVal.startHour = 0;
|
}
|
|
if (newVal.endHour < 0) {
|
newVal.endHour = newVal.startHour;
|
}
|
|
if (newVal.startMin > 60) {
|
newVal.startMin = 0;
|
}
|
if (newVal.startMin < 0) {
|
newVal.startMin = 60;
|
}
|
if (newVal.endMin > 60) {
|
newVal.endMin = 0;
|
}
|
if (newVal.endMin < 0) {
|
newVal.endMin = 0;
|
}
|
|
if (
|
parseInt(newVal.startHour) == parseInt(newVal.endHour) &&
|
parseInt(newVal.startMin) > parseInt(newVal.endMin)
|
) {
|
newVal.startMin = 0;
|
}
|
},
|
deep: true,
|
},
|
},
|
methods: {
|
timeAck() {
|
let rangeInfo = this.actRange.rangeInfo;
|
let perH = 600 / 24;
|
let perM = perH / 60;
|
|
let tempRangeInfo = this.rangeArr[rangeInfo.ownedIndex].rangeInfo;
|
tempRangeInfo.maxX =
|
this.changeTime.endHour * perH + this.changeTime.endMin * perM + 50.5;
|
tempRangeInfo.minX =
|
this.changeTime.startHour * perH +
|
this.changeTime.startMin * perM +
|
50.5;
|
tempRangeInfo.width = tempRangeInfo.maxX - tempRangeInfo.minX;
|
for (let i = 0; i < this.gridArr.length; i++) {
|
let num = 0;
|
for (let j = 0; j < this.rangeArr.length; j++) {
|
if (
|
this.gridArr[i].posIndex === this.rangeArr[j].rangeInfo.posIndex
|
) {
|
this.gridArr[i].rangeList.splice(
|
num,
|
1,
|
this.rangeArr[j].rangeInfo
|
);
|
num++;
|
}
|
}
|
}
|
this.cancalPop();
|
this.redraw(false);
|
this.export();
|
},
|
deleteRange() {
|
this.rangeArr.splice(this.actRangeIndex, 1);
|
for (let i = 0; i < this.rangeArr.length; i++) {
|
this.rangeArr[i].rangeInfo.ownedIndex = i;
|
}
|
for (let i = 0; i < this.gridArr.length; i++) {
|
let num = 0;
|
for (let j = 0; j < this.rangeArr.length; j++) {
|
if (
|
this.gridArr[i].posIndex === this.rangeArr[j].rangeInfo.posIndex
|
) {
|
this.gridArr[i].rangeList.splice(
|
num,
|
1,
|
this.rangeArr[j].rangeInfo
|
);
|
num++;
|
}
|
}
|
}
|
this.cancalPop();
|
this.redraw(false);
|
this.export();
|
},
|
getPopTime() {
|
let rangeInfo = this.actRange.rangeInfo;
|
if (!rangeInfo) {
|
return false;
|
}
|
let hourStart = parseInt((rangeInfo.minX - 50.5) / (600 / 24));
|
let minutetStart = Math.round(
|
((rangeInfo.minX - 50.5) % (600 / 24)) / (600 / 24 / 60)
|
);
|
let hourEnd = parseInt((rangeInfo.maxX - 50.5) / (600 / 24));
|
let minuteEnd = Math.round(
|
((rangeInfo.maxX - 50.5) % (600 / 24)) / (600 / 24 / 60)
|
);
|
minuteEnd = minuteEnd < 10 ? "0" + minuteEnd : minuteEnd;
|
this.changeTime.startHour = hourStart < 10 ? "0" + hourStart : hourStart;
|
this.changeTime.startMin = minutetStart === 60 ? "00" : minutetStart;
|
this.changeTime.endHour = hourEnd < 10 ? "0" + hourEnd : hourEnd;
|
this.changeTime.endMin = minuteEnd === 60 ? "00" : minuteEnd;
|
return true;
|
},
|
cancalPop() {
|
this.isPopup = false;
|
this.actRange = "";
|
this.actGrid = "";
|
this.actRangeIndex = "";
|
},
|
handlerClick() {
|
if (this.getPopTime()) {
|
this.isPopup = true;
|
this.popPos.x = Number(JSON.stringify(this.x));
|
this.popPos.y = Number(JSON.stringify(this.y >= 180 ? 170 : this.y));
|
}
|
},
|
mouseout(e) {
|
this.isMouseDown = false;
|
this.isCreate = false;
|
this.noLimit = 0;
|
},
|
mouseup(e) {
|
this.isMouseDown = false;
|
this.isCreate = false;
|
// this.actRange = ''
|
// this.actGrid = ''
|
// this.actRangeIndex = ''
|
this.noLimit = 0;
|
if (this.rangeArrBackup !== JSON.stringify(this.rangeArr)) {
|
this.rangeArrBackup = JSON.stringify(this.rangeArr);
|
this.export();
|
}
|
|
this.redraw(false);
|
},
|
mouseDown(e) {
|
this.isPopup = false;
|
this.isMouseDown = true;
|
this.currentPointX = e.offsetX;
|
this.noLimit++;
|
for (let i = 0; i < this.rangeArr.length; i++) {
|
let rangeItem = this.rangeArr[i].rangeInfo;
|
if (
|
this.x > rangeItem.minX &&
|
this.x < rangeItem.maxX &&
|
this.y > rangeItem.minY &&
|
this.y < rangeItem.maxY
|
) {
|
this.actRange = this.rangeArr[i];
|
this.actRangeIndex = i;
|
return;
|
}
|
}
|
for (let i = 0; i < this.gridArr.length; i++) {
|
if (
|
this.x > this.gridArr[i].minX &&
|
this.x < this.gridArr[i].maxX &&
|
this.y > this.gridArr[i].minY &&
|
this.y < this.gridArr[i].maxY
|
) {
|
this.actGrid = this.gridArr[i];
|
return;
|
}
|
}
|
},
|
mousemove(e) {
|
if (!this.edit) {
|
return;
|
}
|
|
if (this.isPopup) {
|
return;
|
}
|
// let canvas = document.getElementById(`${this.mainId}Dummy`);
|
let canvas = this.$refs[`${this.mainId}Dummy`];
|
let ctx = canvas.getContext("2d");
|
this.x = e.offsetX;
|
this.y = e.offsetY;
|
if (
|
this.actRange &&
|
this.isMouseDown &&
|
!this.isCreate &&
|
!this.isResizeLeft &&
|
!this.isResizeRight
|
) {
|
// console.log("move", this.actRange);
|
let diff = e.offsetX - this.currentPointX;
|
let tempMinxX = this.actRange.rangeInfo.minX + diff;
|
let limit = this.limit(this.actRange);
|
if (
|
tempMinxX <= limit.limitLeft ||
|
tempMinxX + this.actRange.rangeInfo.width >= limit.limitRight
|
) {
|
return;
|
}
|
this.actRange.rangeInfo.minX = tempMinxX;
|
this.actRange.rangeInfo.maxX =
|
tempMinxX + this.actRange.rangeInfo.width;
|
this.currentPointX = e.offsetX;
|
let tempRangeList =
|
this.gridArr[this.actRange.rangeInfo.posIndex].rangeList;
|
this.redraw();
|
// console.log("move-ed");
|
} else if (
|
this.actGrid &&
|
this.isMouseDown &&
|
!this.isResizeLeft &&
|
!this.isResizeRight
|
) {
|
// console.log("create");
|
if (this.isCreate) {
|
let limit = this.limit(this.actRange);
|
if (
|
this.actRange.rangeInfo.minX <= limit.limitLeft ||
|
this.actRange.rangeInfo.minX + this.actRange.rangeInfo.width >=
|
limit.limitRight
|
) {
|
return;
|
}
|
let tempX;
|
if (this.x < 50) {
|
tempX = 50;
|
} else if (this.x > 650) {
|
tempX = 650;
|
} else {
|
tempX = this.x;
|
}
|
let temp = tempX - this.currentPointX > 0 ? true : false;
|
let newWith = 0;
|
if (temp) {
|
newWith = tempX - this.currentPointX;
|
this.actRange.rangeInfo.maxX = tempX;
|
} else {
|
newWith = this.currentPointX - tempX;
|
this.actRange.rangeInfo.maxX = this.currentPointX;
|
this.actRange.rangeInfo.minX = tempX;
|
}
|
this.actRange.rangeInfo.width = newWith;
|
this.redraw();
|
return;
|
}
|
let tempRangeList = this.actGrid.rangeList;
|
if (tempRangeList) {
|
let rangeObj = {
|
end: "",
|
start: "",
|
rangeInfo: {
|
minX: this.currentPointX,
|
minY: this.actGrid.minY,
|
maxX: this.currentPointX + 10,
|
maxY: this.actGrid.maxY,
|
width: 10,
|
height: 14,
|
posIndex: this.actGrid.posIndex,
|
ownedIndex: 0,
|
},
|
};
|
let actRangeIndex = 0;
|
for (let i = 0; i < tempRangeList.length; i++) {
|
if (this.currentPointX > tempRangeList[i].minX) {
|
actRangeIndex++;
|
}
|
}
|
this.actRangeIndex = actRangeIndex;
|
this.rangeArr.splice(this.actRangeIndex, 0, rangeObj);
|
for (let i = 0; i < this.rangeArr.length; i++) {
|
this.rangeArr[i].rangeInfo.ownedIndex = i;
|
}
|
for (let i = 0; i < this.gridArr.length; i++) {
|
let num = 0;
|
for (let j = 0; j < this.rangeArr.length; j++) {
|
if (
|
this.gridArr[i].posIndex === this.rangeArr[j].rangeInfo.posIndex
|
) {
|
this.gridArr[i].rangeList.splice(
|
num,
|
1,
|
this.rangeArr[j].rangeInfo
|
);
|
num++;
|
}
|
}
|
}
|
this.actGrid.rangeList =
|
this.gridArr[this.actGrid.posIndex].rangeList;
|
this.actRange = this.rangeArr[this.actRangeIndex];
|
this.isCreate = true;
|
}
|
} else if (
|
this.isMouseDown &&
|
(this.isResizeLeft || this.isResizeRight) &&
|
this.actRange !== "" &&
|
this.actRangeIndex !== ""
|
) {
|
// console.log("resize");
|
let limit = this.limit(this.actRange);
|
if (
|
(this.actRange.rangeInfo.minX <= limit.limitLeft ||
|
this.actRange.rangeInfo.minX + this.actRange.rangeInfo.width >=
|
limit.limitRight) &&
|
this.noLimit > 5
|
) {
|
this.isResizeRight = false;
|
this.isResizeLeft = false;
|
this.actRange = "";
|
this.actRangeIndex = "";
|
return;
|
}
|
if (this.isResizeLeft) {
|
if (
|
this.x >
|
this.actRange.rangeInfo.width / 2 + this.actRange.rangeInfo.minX - 5
|
) {
|
return;
|
}
|
this.actRange.rangeInfo.minX = this.x < 50 ? 50 : this.x;
|
this.actRange.rangeInfo.width = this.actRange.rangeInfo.maxX - this.x;
|
this.noLimit++;
|
this.redraw();
|
return;
|
} else if (this.isResizeRight) {
|
if (
|
this.x <
|
this.actRange.rangeInfo.width / 2 + this.actRange.rangeInfo.minX + 5
|
) {
|
return;
|
}
|
this.actRange.rangeInfo.maxX = this.x > 650 ? 650 : this.x;
|
this.actRange.rangeInfo.width =
|
this.actRange.rangeInfo.maxX - this.actRange.rangeInfo.minX;
|
this.noLimit++;
|
this.redraw();
|
return;
|
}
|
} else {
|
for (let i = 0; i < this.rangeArr.length; i++) {
|
let rangeItem = this.rangeArr[i].rangeInfo;
|
if (
|
this.x > rangeItem.minX &&
|
this.x < rangeItem.minX + 6 &&
|
this.y > rangeItem.minY &&
|
this.y < rangeItem.maxY
|
) {
|
this.isResizeLeft = true;
|
document.documentElement.style.cursor = "col-resize";
|
this.actRange = this.rangeArr[i];
|
this.actRangeIndex = i;
|
return;
|
} else if (
|
this.x > rangeItem.maxX - 6 &&
|
this.x < rangeItem.maxX &&
|
this.y > rangeItem.minY &&
|
this.y < rangeItem.maxY
|
) {
|
this.isResizeRight = true;
|
document.documentElement.style.cursor = "col-resize";
|
this.actRange = this.rangeArr[i];
|
this.actRangeIndex = i;
|
return;
|
} else {
|
this.isResizeRight = false;
|
this.isResizeLeft = false;
|
this.actRange = "";
|
this.actRangeIndex = "";
|
document.documentElement.style.cursor = "default";
|
}
|
}
|
}
|
},
|
limit(rangeObj) {
|
let before = this.rangeArr[this.actRangeIndex - 1];
|
let behind = this.rangeArr[this.actRangeIndex + 1];
|
let obj = {
|
limitLeft: 50,
|
limitRight: 650,
|
};
|
if (before === undefined && behind === undefined) {
|
return obj;
|
}
|
if (before === undefined) {
|
obj.limitLeft = 50;
|
obj.limitRight =
|
behind.rangeInfo.posIndex === rangeObj.rangeInfo.posIndex
|
? behind.rangeInfo.minX
|
: 650;
|
return obj;
|
} else if (behind === undefined) {
|
obj.limitLeft =
|
before.rangeInfo.posIndex === rangeObj.rangeInfo.posIndex
|
? before.rangeInfo.maxX
|
: 50;
|
obj.limitRight = 650;
|
return obj;
|
}
|
if (
|
before.rangeInfo.posIndex === rangeObj.rangeInfo.posIndex &&
|
behind.rangeInfo.posIndex === rangeObj.rangeInfo.posIndex
|
) {
|
obj.limitLeft = before.rangeInfo.maxX;
|
obj.limitRight = behind.rangeInfo.minX;
|
} else if (
|
before.rangeInfo.posIndex !== rangeObj.rangeInfo.posIndex &&
|
behind.rangeInfo.posIndex === rangeObj.rangeInfo.posIndex
|
) {
|
obj.limitLeft = 50;
|
obj.limitRight = behind.rangeInfo.minX;
|
} else if (
|
before.rangeInfo.posIndex === rangeObj.rangeInfo.posIndex &&
|
behind.rangeInfo.posIndex !== rangeObj.rangeInfo.posIndex
|
) {
|
obj.limitLeft = before.rangeInfo.maxX;
|
obj.limitRight = 650;
|
} else {
|
obj.limitLeft = 50;
|
obj.limitRight = 650;
|
}
|
return obj;
|
},
|
weekString(n) {
|
let base = "星期";
|
switch (n) {
|
case 1:
|
return base + "一";
|
case 2:
|
return base + "二";
|
case 3:
|
return base + "三";
|
case 4:
|
return base + "四";
|
case 5:
|
return base + "五";
|
case 6:
|
return base + "六";
|
case 7:
|
return base + "日";
|
}
|
},
|
initMain() {
|
// let canvas = document.getElementById(`${this.mainId}`);
|
let canvas = this.$refs[`${this.mainId}`];
|
let ctx = canvas.getContext("2d");
|
ctx.font = "12px Arial";
|
let height = 260;
|
let width = canvas.offsetWidth;
|
let per = height / 7;
|
for (let i = 0; i < 7; i++) {
|
// let weekText = `星期${this.timeData[i].day}:`;
|
let weekText = this.weekString(this.timeData[i].day);
|
let mid = per * i + per / 2 + 6.5;
|
ctx.strokeStyle = this.styleClass.minutePerColor;
|
ctx.fillText(weekText, 10, mid);
|
let startX = 50.5;
|
let startY = mid - 10;
|
ctx.save();
|
ctx.strokeStyle = "#DCDFE6";
|
ctx.fillStyle = "#DCE9FF";
|
ctx.fillRect(startX, startY, 600, 14);
|
ctx.strokeRect(startX, startY, 600, 14);
|
ctx.restore();
|
let tempGrid = {
|
minX: startX,
|
minY: startY,
|
maxX: startX + 600,
|
maxY: startY + 14,
|
width: 600,
|
height: 14,
|
posIndex: i,
|
rangeList: [],
|
};
|
this.gridArr.push(tempGrid);
|
let timePer = 600 / 24;
|
for (let j = 0; j < 25; j++) {
|
let x = startX + timePer * j;
|
let y = startY;
|
let delVar = j % 2 === 0 ? 6.5 : 3.5;
|
ctx.save();
|
ctx.moveTo(x, y - delVar);
|
ctx.lineTo(x, y);
|
ctx.stroke();
|
ctx.font = "10px Arial";
|
ctx.fillStyle = this.styleClass.minutePerTextColor;
|
ctx.fillText(j, x - (j > 9 ? 4.5 : 2.5), y - 8.5);
|
ctx.restore();
|
}
|
}
|
},
|
initMainDummy() {
|
let canvas = document.getElementById(`${this.mainId}Dummy`);
|
let ctx = canvas.getContext("2d");
|
let height = 260;
|
let startX = 50.5;
|
let per = height / 7;
|
let hourPer = 600 / 24;
|
let minutePer = hourPer / 60;
|
for (let i = 0; i < this.timeData.length; i++) {
|
let mid = per * i + per / 2 + 6.5;
|
let startY = mid - 10;
|
let rang = this.timeData[i].time_range;
|
for (let j = 0; j < rang.length; j++) {
|
let start = rang[j].start.split(":");
|
let end = rang[j].end.split(":");
|
let startRange =
|
hourPer * Number(start[0]) + minutePer * Number(start[1]);
|
let endRange = hourPer * Number(end[0]) + minutePer * Number(end[1]);
|
let diffRange = Math.abs(endRange - startRange);
|
let rectStartX =
|
(startRange > endRange ? endRange : startRange) + 50.5;
|
ctx.fillStyle = "#6B9EFF";
|
ctx.fillRect(rectStartX, startY, diffRange, 14);
|
let rangeInfo = {
|
minX: rectStartX,
|
minY: startY,
|
maxX: rectStartX + diffRange,
|
maxY: startY + 14,
|
width: diffRange,
|
height: 14,
|
posIndex: i,
|
ownedIndex: this.rangeArr.length,
|
};
|
rang[j].rangeInfo = rangeInfo;
|
this.gridArr[i].rangeList.push(rangeInfo);
|
this.rangeArr.push(rang[j]);
|
}
|
}
|
this.rangeArrBackup = JSON.stringify(this.rangeArr);
|
},
|
redraw(onlyDraw = true) {
|
let canvas = document.getElementById(`${this.mainId}Dummy`);
|
let ctx = canvas.getContext("2d");
|
ctx.clearRect(0, 0, 700, 260);
|
if (onlyDraw) {
|
let rangeInfo = this.actRange.rangeInfo;
|
let hourStart = parseInt((rangeInfo.minX - 50) / (600 / 24));
|
let minutetStart = Math.round(
|
((rangeInfo.minX - 50) % (600 / 24)) / (600 / 24 / 60)
|
);
|
let hourEnd = parseInt((rangeInfo.maxX - 50) / (600 / 24));
|
let minuteEnd = Math.round(
|
((rangeInfo.maxX - 50) % (600 / 24)) / (600 / 24 / 60)
|
);
|
minuteEnd = minuteEnd < 10 ? "0" + minuteEnd : minuteEnd;
|
let textStart = `${hourStart < 10 ? "0" + hourStart : hourStart}:${
|
minutetStart === 60 ? "00" : minutetStart
|
}`;
|
let textEnd = `${hourEnd < 10 ? "0" + hourEnd : hourEnd}:${
|
minuteEnd === 60 ? "00" : minuteEnd
|
}`;
|
let startPointX = rangeInfo.minX - 14;
|
let startPointY = rangeInfo.maxY + 10;
|
let endPointX = rangeInfo.maxX - 13;
|
let endPointY = rangeInfo.maxY + 10;
|
ctx.fillStyle = "#303133";
|
ctx.fillText(textStart, startPointX, startPointY);
|
ctx.fillText(textEnd, endPointX, endPointY);
|
}
|
for (let i = 0; i < this.rangeArr.length; i++) {
|
ctx.fillStyle = "#6B9EFF";
|
ctx.fillRect(
|
this.rangeArr[i].rangeInfo.minX,
|
this.rangeArr[i].rangeInfo.minY,
|
this.rangeArr[i].rangeInfo.width,
|
this.rangeArr[i].rangeInfo.height
|
);
|
}
|
},
|
export() {
|
let timeRule = [];
|
for (let i = 0; i < 7; i++) {
|
timeRule.push({
|
day: i + 1,
|
time_range: (() => {
|
let range = [];
|
this.rangeArr.forEach((item) => {
|
if (item.rangeInfo.posIndex === i) {
|
let rangeInfo = item.rangeInfo;
|
let hourStart = parseInt((rangeInfo.minX - 50.5) / (600 / 24));
|
let minutetStart = Math.round(
|
((rangeInfo.minX - 50.5) % (600 / 24)) / (600 / 24 / 60)
|
);
|
let hourEnd = parseInt((rangeInfo.maxX - 50.5) / (600 / 24));
|
let minuteEnd = Math.round(
|
((rangeInfo.maxX - 50.5) % (600 / 24)) / (600 / 24 / 60)
|
);
|
hourStart = hourStart < 10 ? "0" + hourStart : hourStart;
|
minutetStart =
|
minutetStart < 10 ? "0" + minutetStart : minutetStart;
|
hourEnd = hourEnd < 10 ? "0" + hourEnd : hourEnd;
|
minuteEnd = minuteEnd < 10 ? "0" + minuteEnd : minuteEnd;
|
range.push({
|
start: hourStart + ":" + minutetStart,
|
end: hourEnd + ":" + minuteEnd,
|
});
|
}
|
});
|
return range;
|
})(),
|
});
|
}
|
|
let obj = {
|
id: this.itemId,
|
name: this.itemName,
|
timeRule: timeRule,
|
};
|
this.$emit("range-update", obj);
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss">
|
.timeRangeSliderBox {
|
width: 700px;
|
height: 260px;
|
text-align: left;
|
margin: 10px auto;
|
position: relative;
|
canvas {
|
position: absolute;
|
top: 0px;
|
left: 0px;
|
width: 700px;
|
height: 260px;
|
}
|
.popup-box {
|
width: 160px;
|
height: 80px;
|
background-color: rgba(0, 0, 0, 0.6);
|
border-radius: 5px;
|
position: relative;
|
padding: 5px;
|
box-sizing: border-box;
|
color: #fff;
|
input {
|
width: 33px;
|
}
|
div {
|
margin: 3px auto;
|
text-align: center;
|
}
|
button {
|
padding: 3px;
|
}
|
}
|
}
|
</style>
|
