|
|
@@ -0,0 +1,336 @@
|
|
|
+<template>
|
|
|
+ <div class="choose-schedule-time">
|
|
|
+ <div class="time-container" id="time-container">
|
|
|
+ <div class="container-header">
|
|
|
+ <div class="selectall">
|
|
|
+ <!--<input type="checkbox" id="selectAllid" @click="selectAllornot">-->
|
|
|
+ <label>拖动鼠标选择时间段（一格为0.5小时）</label>
|
|
|
+ </div>
|
|
|
+ <div class="toolar-tip">
|
|
|
+ <div class="tip-item"><span class="current"></span>投放</div>
|
|
|
+ <div class="tip-item"><span></span>不投放</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="container-content">
|
|
|
+ <div class="week-list">
|
|
|
+ <div class="week-name" v-for="(item, index) in weekName" :key="index">
|
|
|
+ {{ item }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="mainbox">
|
|
|
+ <div class="main-header">
|
|
|
+ <div
|
|
|
+ class="header-item"
|
|
|
+ v-for="(item, index) in timeName"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ {{ item }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="time-list">
|
|
|
+ <div
|
|
|
+ class="list-item"
|
|
|
+ :title="`0.5小时`"
|
|
|
+ v-for="(item, index) in timeList"
|
|
|
+ :class="{ selected: item == 1 }"
|
|
|
+ @click="setcurrent(item, index)"
|
|
|
+ :key="index"
|
|
|
+ ></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="select-box-dashed"
|
|
|
+ id="select-box-dashed"
|
|
|
+ :style="{
|
|
|
+ top: selectBox.top + 'px',
|
|
|
+ left: selectBox.left + 'px',
|
|
|
+ width: selectBox.width + 'px',
|
|
|
+ height: selectBox.height + 'px',
|
|
|
+ display: selectBox.display,
|
|
|
+ }"
|
|
|
+ ></div>
|
|
|
+ <div
|
|
|
+ class="time-container-mask"
|
|
|
+ id="time-container-mask"
|
|
|
+ @mousedown="mousedown"
|
|
|
+ ></div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ weekName: [
|
|
|
+ "星期一",
|
|
|
+ "星期二",
|
|
|
+ "星期三",
|
|
|
+ "星期四",
|
|
|
+ "星期五",
|
|
|
+ "星期六",
|
|
|
+ "星期日",
|
|
|
+ ],
|
|
|
+ timeName: ["00:00~06:00", "06:00~12:00", "12:00~18:00", "18:00~24:00"],
|
|
|
+ timeList: this.timeString.split(""),
|
|
|
+ selectBox: {
|
|
|
+ top: 0,
|
|
|
+ left: 0,
|
|
|
+ width: 0,
|
|
|
+ height: 0,
|
|
|
+ startx: 0,
|
|
|
+ starty: 0,
|
|
|
+ display: "none",
|
|
|
+ endx: 0,
|
|
|
+ endy: 0,
|
|
|
+ },
|
|
|
+ isSelect: true,
|
|
|
+ selectBoxDashed: null,
|
|
|
+ startX: null,
|
|
|
+ startY: null,
|
|
|
+ initx: null,
|
|
|
+ inity: null,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ props: {
|
|
|
+ // timeSetp: {
|
|
|
+ // type: Number,
|
|
|
+ // default() {
|
|
|
+ // return 0.5;
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ timeString: {
|
|
|
+ type: String,
|
|
|
+ default() {
|
|
|
+ let _timeArray = [];
|
|
|
+ for (let i = 0; i < (24 / 0.5) * 7; i++) {
|
|
|
+ _timeArray.push("0");
|
|
|
+ }
|
|
|
+ return _timeArray.join("");
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ model: {
|
|
|
+ prop: "timeString",
|
|
|
+ event: "triggertime",
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ timeString() {
|
|
|
+ this.timeList = this.timeString.split("");
|
|
|
+ },
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ clearBubble(e) {
|
|
|
+ if (e.stopPropagation) {
|
|
|
+ e.stopPropagation();
|
|
|
+ } else {
|
|
|
+ e.cancelBubble = true;
|
|
|
+ }
|
|
|
+ if (e.preventDefault) {
|
|
|
+ e.preventDefault();
|
|
|
+ } else {
|
|
|
+ e.returnValue = false;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mousedown(e) {
|
|
|
+ let fileDivs = document.getElementsByClassName("list-item");
|
|
|
+ // 清除事件冒泡、捕获
|
|
|
+ this.clearBubble(e);
|
|
|
+ // 设置选框的初始位置
|
|
|
+ this.startX = e.offsetX;
|
|
|
+ this.startY = e.offsetY;
|
|
|
+ this.selectBox.left = this.startX;
|
|
|
+ this.selectBox.top = this.startY;
|
|
|
+ let timeContainerMask = document.getElementById("time-container-mask");
|
|
|
+ timeContainerMask.addEventListener("mousemove", this.mousemove);
|
|
|
+ timeContainerMask.addEventListener("mouseup", this.mouseup);
|
|
|
+ },
|
|
|
+ mousemove(e) {
|
|
|
+ // 清除事件冒泡、捕获
|
|
|
+ this.clearBubble(e);
|
|
|
+ // 设置选框可见
|
|
|
+ this.selectBox.display = "block";
|
|
|
+ // 根据鼠标移动，设置选框的位置、宽高
|
|
|
+ this.initx = e.offsetX;
|
|
|
+ this.inity = e.offsetY;
|
|
|
+ // 暂存选框的位置及宽高，用于将 select-item 选中
|
|
|
+ let left = Math.min(this.initx, this.startX);
|
|
|
+ let top = Math.min(this.inity, this.startY);
|
|
|
+ let width = Math.abs(this.startX - this.initx);
|
|
|
+ let height = Math.abs(this.startY - this.inity);
|
|
|
+ this.selectBox.left = left;
|
|
|
+ this.selectBox.top = top;
|
|
|
+ this.selectBox.width = width;
|
|
|
+ this.selectBox.height = height;
|
|
|
+ let fileDivs = document.getElementsByClassName("list-item");
|
|
|
+ for (let i = 0; i < fileDivs.length; i++) {
|
|
|
+ let itemX_pos = fileDivs[i].offsetWidth + fileDivs[i].offsetLeft;
|
|
|
+ let itemY_pos = fileDivs[i].offsetHeight + fileDivs[i].offsetTop;
|
|
|
+ let condition1 = itemX_pos > left;
|
|
|
+ let condition2 = itemY_pos > top;
|
|
|
+ let condition3 = fileDivs[i].offsetLeft < left + width;
|
|
|
+ let condition4 = fileDivs[i].offsetTop < top + height;
|
|
|
+ if (condition1 && condition2 && condition3 && condition4) {
|
|
|
+ fileDivs[i].classList.add("temp-selected");
|
|
|
+ } else {
|
|
|
+ fileDivs[i].classList.remove("temp-selected");
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mouseup(e) {
|
|
|
+ document
|
|
|
+ .getElementById("time-container-mask")
|
|
|
+ .removeEventListener("mousemove", this.mousemove);
|
|
|
+ let selectDom = document.getElementsByClassName("temp-selected");
|
|
|
+ [].slice.call(selectDom).forEach((item) => {
|
|
|
+ if (item.classList.contains("selected")) {
|
|
|
+ item.classList.remove("selected");
|
|
|
+ } else {
|
|
|
+ item.classList.add("selected");
|
|
|
+ }
|
|
|
+ item.classList.remove("temp-selected");
|
|
|
+ });
|
|
|
+ this.selectBox.display = "none";
|
|
|
+ let fileDivs = document.getElementsByClassName("list-item");
|
|
|
+ for (let i = 0; i < fileDivs.length; i++) {
|
|
|
+ if (fileDivs[i].classList.contains("selected")) {
|
|
|
+ this.timeList[i] = "1";
|
|
|
+ } else {
|
|
|
+ this.timeList[i] = "0";
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.$emit("triggertime", this.timeList.join(""));
|
|
|
+ this.clearBubble(e);
|
|
|
+ },
|
|
|
+ setcurrent(item, index) {
|
|
|
+ if (item == 0) {
|
|
|
+ this.timeList.splice(index, 1, "1");
|
|
|
+ } else {
|
|
|
+ this.timeList.splice(index, 1, "0");
|
|
|
+ }
|
|
|
+ },
|
|
|
+ selectAllornot(e) {
|
|
|
+ this.timeList.forEach((item, index) => {
|
|
|
+ this.timeList.splice(index, 1, Number(e.target.checked));
|
|
|
+ });
|
|
|
+ this.$emit("triggertime", this.timeList.join(""));
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.choose-schedule-time {
|
|
|
+ position: relative;
|
|
|
+ .select-box-dashed {
|
|
|
+ position: absolute;
|
|
|
+ display: none;
|
|
|
+ width: 0px;
|
|
|
+ height: 0px;
|
|
|
+ padding: 0px;
|
|
|
+ margin: 0px;
|
|
|
+ border: 1px dashed #0099ff;
|
|
|
+ background-color: #c3d5ed;
|
|
|
+ opacity: 0.5;
|
|
|
+ filter: alpha(opacity=50);
|
|
|
+ font-size: 0px;
|
|
|
+ }
|
|
|
+ .time-container-mask {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .time-container {
|
|
|
+ position: relative;
|
|
|
+ width: calc(100% - 2px);
|
|
|
+ min-width: 780px;
|
|
|
+ overflow: hidden;
|
|
|
+ border: 1px solid #dcdfe6;
|
|
|
+ border-radius: 4px;
|
|
|
+ .container-header {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: nowrap;
|
|
|
+ justify-content: space-between;
|
|
|
+ font-size: 12px;
|
|
|
+ padding: 0 10px;
|
|
|
+ // .selectall {
|
|
|
+ // }
|
|
|
+ .toolar-tip {
|
|
|
+ .tip-item {
|
|
|
+ display: inline-block;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+ .tip-item span {
|
|
|
+ display: inline-block;
|
|
|
+ width: 20px;
|
|
|
+ height: 10px;
|
|
|
+ border: 1px solid #999;
|
|
|
+ margin-right: 3px;
|
|
|
+ }
|
|
|
+ .tip-item span.current {
|
|
|
+ background: #43a9ed;
|
|
|
+ border-color: #43a9ed;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .container-content {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: nowrap;
|
|
|
+ border-top: 1px solid #dcdfe6;
|
|
|
+
|
|
|
+ .week-list {
|
|
|
+ min-width: 50px;
|
|
|
+ width: calc(100% - 720px);
|
|
|
+ padding-top: 30px;
|
|
|
+ .week-name {
|
|
|
+ height: 24px;
|
|
|
+ line-height: 24px;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .mainbox {
|
|
|
+ width: 710px;
|
|
|
+ padding-left: 10px;
|
|
|
+ background-color: #eeeeee;
|
|
|
+
|
|
|
+ .time-list {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ .list-item {
|
|
|
+ height: 16px;
|
|
|
+ width: 10px;
|
|
|
+ border: 1px solid #999;
|
|
|
+ border-radius: 2px;
|
|
|
+ margin: 0 1px 7px;
|
|
|
+ cursor: pointer;
|
|
|
+ background-color: #fff;
|
|
|
+ }
|
|
|
+ .list-item:nth-of-type(12n) {
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+ .list-item.selected {
|
|
|
+ background-color: #0099ff;
|
|
|
+ border-color: #0099ff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .main-header {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: nowrap;
|
|
|
+ .header-item {
|
|
|
+ width: 175px;
|
|
|
+ line-height: 30px;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
|
|
+
|
