<template>
? <div class="byted-weektime" @mousedown="dian" @mousemove="yi" @mouseup="li">
? ? <div class="calendar">
? ? ? <table class="calendar-table" style="width:610px">
? ? ? ? <thead class="calendar-head">
? ? ? ? ? <tr>
? ? ? ? ? ? <th rowspan="6" class="week-td">星期/時間</th>
? ? ? ? ? ? <th colspan="24">00:00 - 12:00</th>
? ? ? ? ? ? <th colspan="24">12:00 - 24:00</th>
? ? ? ? ? </tr>
? ? ? ? ? <tr>
? ? ? ? ? ? <td colspan="2" v-for="(item, index) in tableHeader" :key="index">{{ item }}</td>
? ? ? ? ? </tr>
? ? ? ? </thead>
? ? ? ? <tbody id="tableBody">
? ? ? ? ? <div id="kuang"
? ? ? ? ? ? :style="{ width: kuangObj.width + 'px', height: kuangObj.height + 'px', top: kuangObj.top + 'px', left: kuangObj.left + 'px', bottom: kuangObj.bottom + 'px', right: kuangObj.right + 'px' }">
? ? ? ? ? </div>
? ? ? ? ? <tr>
? ? ? ? ? ? <td>星期一</td>
? ? ? ? ? ? <td @mousedown.prevent="handleMouseDown(i, 0)" @mouseup.prevent="handleMouseUp(i, 0)"
? ? ? ? ? ? ? class="calendar-atom-time" :class="item.class" v-for="(item, i) in rowUnit[0]" :key="i"></td>
? ? ? ? ? </tr>
? ? ? ? ? <tr>
? ? ? ? ? ? <td>星期二</td>
? ? ? ? ? ? <td @mousedown.prevent="handleMouseDown(i, 1)" @mouseup.prevent="handleMouseUp(i, 1)"
? ? ? ? ? ? ? class="calendar-atom-time" :class="item.class" v-for="(item, i) in rowUnit[1]" :key="i"></td>
? ? ? ? ? </tr>
? ? ? ? ? <tr>
? ? ? ? ? ? <td>星期三</td>
? ? ? ? ? ? <td @mousedown.prevent="handleMouseDown(i, 2)" @mouseup.prevent="handleMouseUp(i, 2)"
? ? ? ? ? ? ? class="calendar-atom-time" :class="item.class" v-for="(item, i) in rowUnit[2]" :key="i"></td>
? ? ? ? ? </tr>
? ? ? ? ? <tr>
? ? ? ? ? ? <td>星期四</td>
? ? ? ? ? ? <td @mousedown.prevent="handleMouseDown(i, 3)" @mouseup.prevent="handleMouseUp(i, 3)"
? ? ? ? ? ? ? class="calendar-atom-time" :class="item.class" v-for="(item, i) in rowUnit[3]" :key="i"></td>
? ? ? ? ? </tr>
? ? ? ? ? <tr>
? ? ? ? ? ? <td>星期五</td>
? ? ? ? ? ? <td @mousedown.prevent="handleMouseDown(i, 4)" @mouseup.prevent="handleMouseUp(i, 4)"
? ? ? ? ? ? ? class="calendar-atom-time" :class="item.class" v-for="(item, i) in rowUnit[4]" :key="i"></td>
? ? ? ? ? </tr>
? ? ? ? ? <tr>
? ? ? ? ? ? <td>星期六</td>
? ? ? ? ? ? <td @mousedown.prevent="handleMouseDown(i, 5)" @mouseup.prevent="handleMouseUp(i, 5)"
? ? ? ? ? ? ? class="calendar-atom-time" :class="item.class" v-for="(item, i) in rowUnit[5]" :key="i"></td>
? ? ? ? ? </tr>
? ? ? ? ? <tr>
? ? ? ? ? ? <td>星期日</td>
? ? ? ? ? ? <td @mousedown.prevent="handleMouseDown(i, 6)" @mouseup.prevent="handleMouseUp(i, 6)"
? ? ? ? ? ? ? class="calendar-atom-time" :class="item.class" v-for="(item, i) in rowUnit[6]" :key="i"></td>
? ? ? ? ? </tr>
? ? ? ? ? <tr>
? ? ? ? ? ? <td colspan="49" class="td-table-tip">
? ? ? ? ? ? ? <div class="clearfix">
? ? ? ? ? ? ? ? <span class="pull-left tip-text">請用鼠標(biāo)點選時間段</span>
? ? ? ? ? ? ? ? <a @click="clear" class="pull-right">清空</a>
? ? ? ? ? ? ? </div>
? ? ? ? ? ? </td>
? ? ? ? ? </tr>
? ? ? ? ? <tr style="text-align: center;">
? ? ? ? ? ? <td colspan="49" class="timeContent">
? ? ? ? ? ? ? 已選時間段
? ? ? ? ? ? ? <div v-for="(item, index) in timeStr" :key="index" v-show="item.length">
? ? ? ? ? ? ? ? <span>{{ weekDate[index + 1] }}:</span>
? ? ? ? ? ? ? ? <strong>
? ? ? ? ? ? ? ? ? <span>{{ item }}</span>
? ? ? ? ? ? ? ? </strong>
? ? ? ? ? ? ? </div>
? ? ? ? ? ? </td>
? ? ? ? ? </tr>
? ? ? ? </tbody>
? ? ? </table>
? ? </div>
? ? <!-- 鼠標(biāo)的畫框的效果 -->
? ? <div id="container" v-bind:style="{
? ? ? backgroundColor: back,
? ? ? height: h + 'px',
? ? ? width: w + 'px',
? ? ? position: 'absolute',
? ? ? left: left + 'px',
? ? ? top: top + 'px',
? ? ? opacity: 0.2,
? ? ? border: len + 'px dashed #000',
? ? ? zIndex: -1
? ? }"></div>
? </div>
</template>
<script>
export default {
? name: "timeSelect",
? data() {
? ? return {
? ? ? tableHeader: [
? ? ? ? "00",
? ? ? ? "01",
? ? ? ? "02",
? ? ? ? "03",
? ? ? ? "04",
? ? ? ? "05",
? ? ? ? "06",
? ? ? ? "07",
? ? ? ? "08",
? ? ? ? "09",
? ? ? ? "10",
? ? ? ? "11",
? ? ? ? "12",
? ? ? ? "13",
? ? ? ? "14",
? ? ? ? "15",
? ? ? ? "16",
? ? ? ? "17",
? ? ? ? "18",
? ? ? ? "19",
? ? ? ? "20",
? ? ? ? "21",
? ? ? ? "22",
? ? ? ? "23"
? ? ? ],
? ? ? weekDate: {
? ? ? ? "1": "星期一",
? ? ? ? "2": "星期二",
? ? ? ? "3": "星期三",
? ? ? ? "4": "星期四",
? ? ? ? "5": "星期五",
? ? ? ? "6": "星期六",
? ? ? ? "7": "星期日"
? ? ? },
? ? ? rowUnit: [], //每一個單元格
? ? ? timeContent: [], //選中的時間段原始數(shù)據(jù)
? ? ? timeSection: [], //時間段，可以返回給后臺的數(shù)據(jù)
? ? ? timeStr: [], //時間段，前端顯示的數(shù)據(jù)
? ? ? beginDay: 0,
? ? ? beginTime: 0,
? ? ? downEvent: false,
? ? ? kuangObj: {
? ? ? ? width: 0,
? ? ? ? height: 0,
? ? ? ? top: 0,
? ? ? ? left: 0,
? ? ? ? bottom: 0,
? ? ? ? right: 0,
? ? ? ? oldLeft: 0,
? ? ? ? oldTop: 0,
? ? ? ? flag: false
? ? ? },
? ? ? py: "",
? ? ? px: "",
? ? ? back: "#31676f",
? ? ? h: "",
? ? ? w: "",
? ? ? top: "",
? ? ? left: "",
? ? ? len: 0,
? ? ? list:''
? ? };
? },
? created() {
? ? this.init();
? },
? mounted() { },
? methods: {
? ? init() {
? ? ? for (let i = 0; i < 7; i++) {
? ? ? ? let arr = [];
? ? ? ? for (let j = 0; j < 48; j++) {
? ? ? ? ? arr.push({ class: null, timeData: j });
? ? ? ? }
? ? ? ? this.rowUnit.push(arr);
? ? ? ? this.timeContent.push({ arr: [] });
? ? ? ? this.timeSection.push([]);
? ? ? ? this.timeStr.push("");
? ? ? }
? ? },
? ? handleMouseDown(i, day) {
? ? ? this.downEvent = true; //按下時鼠標(biāo)不在范圍內(nèi)則不算
? ? ? this.beginDay = day;
? ? ? this.beginTime = i;
? ? },
? ? dian(event) {
? ? ? // console.log(event);
? ? ? this.px = event.pageX; //獲取x坐標(biāo)
? ? ? this.py = event.pageY;
? ? },
? ? yi(event) {
? ? ? if (this.px == "" || this.py == "") {
? ? ? ? return;
? ? ? }
? ? ? var px1 = this.px;
? ? ? var px2 = this.py;
? ? ? this.left = event.pageX;
? ? ? this.top = event.pageY;
? ? ? this.h = this.top - this.py;
? ? ? this.w = this.left - this.px;
? ? ? var hc = -this.h;
? ? ? var wc = -this.w;
? ? ? this.len = 1;
? ? ? this.back = "#31676f";
? ? ? if (this.h < 0 && this.w >= 0) {
? ? ? ? // console.log(1);
? ? ? ? this.h = hc;
? ? ? ? this.left = px1;
? ? ? } else if (this.h >= 0 && this.w < 0) {
? ? ? ? // console.log(2);
? ? ? ? this.w = wc;
? ? ? ? this.top = px2;
? ? ? } else if (this.h < 0 && this.w < 0) {
? ? ? ? // console.log(3);
? ? ? ? this.h = hc;
? ? ? ? this.w = wc;
? ? ? } else {
? ? ? ? // console.log(4);
? ? ? ? this.left = this.px;
? ? ? ? this.top = this.py;
? ? ? }
? ? ? if (this.w < 0) {
? ? ? ? this.w = 0 - this.w;
? ? ? }
? ? ? if (this.h < 0) {
? ? ? ? this.h = 0 - this.h;
? ? ? }
? ? },
? ? li() {
? ? ? this.px = "";
? ? ? this.py = "";
? ? ? this.h = "";
? ? ? this.w = "";
? ? ? this.top = "";
? ? ? this.left = "";
? ? ? this.len = 0;
? ? ? this.back = "";
? ? },
? ? handleMouseUp(i, day) {
? ? ? let _this = this;
? ? ? let begin = this.beginTime;
? ? ? let start = begin <= i ? begin : i; //x軸 起點
? ? ? let length = Math.abs(begin - i);
? ? ? let end = start + length; //x軸 終點
? ? ? let dayStart = this.beginDay <= day ? this.beginDay : day; //y軸 起點
? ? ? let dayLength = Math.abs(this.beginDay - day);
? ? ? let dayEnd = dayStart + dayLength; //y軸 終點
? ? ? //當(dāng)框選范圍內(nèi)所有塊都是選中狀態(tài)時,執(zhí)行反選
? ? ? function isAdd() {
? ? ? ? for (let x = dayStart; x < dayEnd + 1; x++) {
? ? ? ? ? for (let y = start; y < end + 1; y++) {
? ? ? ? ? ? if (_this.rowUnit[x][y].class == null) return true;
? ? ? ? ? }
? ? ? ? }
? ? ? ? return false;
? ? ? }
? ? ? //當(dāng)點擊事件是在table內(nèi)才觸發(fā)選取數(shù)據(jù)操作
? ? ? if (this.downEvent) {
? ? ? ? //選時間段
? ? ? ? if (isAdd()) {
? ? ? ? ? //沒選中的全都選上
? ? ? ? ? for (let x = dayStart; x < dayEnd + 1; x++) {
? ? ? ? ? ? for (let y = start; y < end + 1; y++) {
? ? ? ? ? ? ? if (this.rowUnit[x][y].class == null) {
? ? ? ? ? ? ? ? this.rowUnit[x][y].class = "ui-selected";
? ? ? ? ? ? ? ? this.timeContent[x].arr.push(this.rowUnit[x][y].timeData);
? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? }
? ? ? ? } else {
? ? ? ? ? //反選
? ? ? ? ? for (let x = dayStart; x < dayEnd + 1; x++) {
? ? ? ? ? ? for (let y = start; y < end + 1; y++) {
? ? ? ? ? ? ? if (this.rowUnit[x][y].class == "ui-selected") {
? ? ? ? ? ? ? ? this.rowUnit[x][y].class = null;
? ? ? ? ? ? ? ? var c = this.rowUnit[x][y].timeData;
? ? ? ? ? ? ? ? var kong = "";
? ? ? ? ? ? ? ? for (let i = 0; i < this.timeContent[x].arr.length; i++) {
? ? ? ? ? ? ? ? ? if (c == this.timeContent[x].arr[i]) {
? ? ? ? ? ? ? ? ? ? kong = i;
? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? this.timeContent[x].arr.splice(kong, 1);
? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? }
? ? ? ? }
? ? ? ? //過濾時間段,將臨近的時間段合并
? ? ? ? this.filterTime(dayStart, dayEnd);
? ? ? }
? ? ? this.downEvent = false;
? ? },
? ? filterTime(start, end) {
? ? ? //選中的x,y坐標(biāo)信息 x:0-47 ?y:0-6
? ? ? function sortCut(arr) {
? ? ? ? //提取連續(xù)的數(shù)字
? ? ? ? var result = [];
? ? ? ? arr.forEach(function (v, i) {
? ? ? ? ? var temp = result[result.length - 1];
? ? ? ? ? if (!i) {
? ? ? ? ? ? result.push([v]);
? ? ? ? ? } else if (v % 1 === 0 && v - temp[temp.length - 1] == 1) {
? ? ? ? ? ? temp.push(v);
? ? ? ? ? } else {
? ? ? ? ? ? result.push([v]);
? ? ? ? ? }
? ? ? ? });
? ? ? ? return result;
? ? ? }
? ? ? function toStr(num) {
? ? ? ? if (Number.isInteger(num)) {
? ? ? ? ? let str = num < 10 ? "0" + num : num.toString();
? ? ? ? ? return str + ":00";
? ? ? ? } else {
? ? ? ? ? let str =
? ? ? ? ? ? Math.floor(num) < 10
? ? ? ? ? ? ? ? "0" + Math.floor(num)
? ? ? ? ? ? ? : Math.floor(num).toString();
? ? ? ? ? return str + ":30";
? ? ? ? }
? ? ? }
? ? ? function timeToStr(arr) {
? ? ? ? //把數(shù)組轉(zhuǎn)成方便人看到字符串
? ? ? ? let str = "";
? ? ? ? arr.forEach((arr, index) => {
? ? ? ? ? let str1 = "";
? ? ? ? ? if (index == 0) {
? ? ? ? ? ? str1 = toStr(arr[0]) + "~" + toStr(arr[1]);
? ? ? ? ? } else {
? ? ? ? ? ? str1 = " , " + toStr(arr[0]) + "~" + toStr(arr[1]);
? ? ? ? ? }
? ? ? ? ? str += str1;
? ? ? ? });
? ? ? ? return str;
? ? ? }
? ? ? //排序,分割成
? ? ? for (let i = start; i < end + 1; i++) {
? ? ? ? let arr1 = sortCut(this.timeContent[i].arr.sort((a, b) => a - b));
? ? ? ? let arr2 = [];
? ? ? ? arr1.forEach(arr => {
? ? ? ? ? //轉(zhuǎn)成帶小數(shù)點的時間段,以及供前端顯示的字符串
? ? ? ? ? let arr3 = [];
? ? ? ? ? arr3.push(arr[0] / 2);
? ? ? ? ? arr3.push(arr[arr.length - 1] / 2 + 0.5);
? ? ? ? ? arr2.push(arr3);
? ? ? ? });
? ? ? ? this.timeStr[i] = timeToStr(arr2);
? ? ? ? this.timeSection[i] = arr2;
? ? ? }
? ? ? let list = []
? ? ? for (let i = 0; i < 7; i++) {
? ? ? ? let str = ''
? ? ? ? for (let j = 0; j < 48; j++) {
? ? ? ? ? str += '0'
? ? ? ? }
? ? ? ? list.push(str)
? ? ? }
? ? ? this.timeSection.forEach((item, index) => {
? ? ? ? let str=list[index].split('')
? ? ? ? item.forEach((itm, idx) => {
? ? ? ? ? for(let i=0;i<str.length;i++){
? ? ? ? ? ? if(i>=itm[0]*2&&i<itm[1]*2){
? ? ? ? ? ? ? str[i]=1
? ? ? ? ? ? }
? ? ? ? ? }
? ? ? ? })
? ? ? ? list[index]=str.join('')
? ? ? })
? ? ? this.list=list.join('')
? ? },
? ? clear() {
? ? ? this.rowUnit.forEach(item => {
? ? ? ? item.forEach(item1 => {
? ? ? ? ? item1.class = null;
? ? ? ? });
? ? ? });
? ? ? this.timeContent.forEach(item => {
? ? ? ? item.arr = [];
? ? ? });
? ? ? this.timeSection.forEach(item => {
? ? ? ? //賦值成空數(shù)組[]出問題
? ? ? ? item.length = 0;
? ? ? });
? ? ? //遍歷賦值成'',不管用
? ? ? this.timeStr.length = 0;
? ? ? for (let i = 0; i < 7; i++) {
? ? ? ? this.timeStr.push("");
? ? ? }
? ? ? //this.initState = true
? ? },
? }
};
</script>
<style scoped>
.byted-weektime .calendar {
? -webkit-user-select: none;
? position: relative;
? display: inline-block;
}
#tableBody {
? /* position: relative; */
}
/*.byted-weektime .calendar .schedule{background:#2F88FF;width:0;height:0;position:fixed;display:none;top:0;left:0;pointer-events:none;-webkit-transition:all 400ms ease;-moz-transition:all 400ms ease;-ms-transition:all 400ms ease;transition:all 400ms ease}*/
.byted-weektime .calendar .calendar-table {
? border-collapse: collapse;
? border-radius: 4px;
}
.byted-weektime .calendar .calendar-table tr .calendar-atom-time:hover {
? background: #ccc;
}
.byted-weektime .calendar .calendar-table tr .ui-selected {
? background: #2f88ff;
}
.byted-weektime .calendar .calendar-table tr .ui-selected:hover {
? background: #2f88ff;
}
.byted-weektime .calendar .calendar-table tr,
.byted-weektime .calendar .calendar-table td,
.byted-weektime .calendar .calendar-table th {
? border: 1px solid #ccc;
? font-size: 12px;
? text-align: center;
? background-color: #fff;
? color: #000;
? line-height: 1.8em;
? -webkit-transition: background 200ms ease;
? -moz-transition: background 200ms ease;
? -ms-transition: background 200ms ease;
? transition: background 200ms ease;
}
.byted-weektime .calendar .calendar-table tbody tr {
? height: 30px;
}
.byted-weektime .calendar .calendar-table tbody tr td:first-child {
? background: #f8f9fa;
}
.byted-weektime .calendar .calendar-table thead th,
.byted-weektime .calendar .calendar-table thead td {
? background: #f8f9fa;
}
.byted-weektime .calendar .calendar-table .td-table-tip {
? line-height: 2.4em;
? padding: 0 12px 0 19px;
? background: #fff !important;
}
.byted-weektime .calendar .calendar-table .td-table-tip .clearfix {
? display: flex;
? justify-content: space-between;
? height: 46px;
? line-height: 46px;
}
.byted-weektime .calendar .calendar-table .td-table-tip .pull-left {
? font-size: 14px;
? color: #333333;
}
.byted-weektime .week-td {
? width: 75px;
? padding: 20px 0;
}
.byted-weektime a {
? cursor: pointer;
? color: #2f88ff;
? font-size: 14px;
}
#kuang {
? position: absolute;
? background-color: blue;
? opacity: 0.3;
}
</style>
