<template>
<div>
<div class="meeting-table">
<ul class="tableTitle">
<!-- <li>会议室名称</li> -->
<li :key="item" v-for="(item, index) in weeekTitle">
<span>{{ item }}</span
><span>{{ "(" + weekDays[index] + ")" }}</span>
</li>
</ul>
<div class="h-16 bar">
<div class="vertical-bar m-r-10" />
<span style="font-weight:bold">全天</span>
</div>
<div class="inner-container">
<div class="room-content allday-meeting">
<!-- <div class="room-name">{{ item.name }}</div> -->
<div class="meeting-room-meetings">
<div
class='meeting-squre'
v-for="(meeting, key) in weekMeetingList"
:key="key"
>
<div v-if="meeting.length > 0">
<div
v-if="index < 4"
:key="index"
v-for="(meetingTime, index) in formatMeeting(meeting,4).alldayMeetings"
>
<div>
<el-popover placement="right" trigger="hover" width="303">
<p slot="reference" class="meeting-item">
<!-- {{ formatTime(meetingTime.startTime) }} -->
<!-- -{{
formatTime(meetingTime.endTime)
}} -->
{{ meetingTime.title }}
</p>
<!-- <div class="meeting-item-head">会议详情</div> -->
<div class="schedule-main">
<div class="schedule-item">
<span class="schedule-item__l">领导：</span>
<span class="schedule-item__r">{{
meetingTime.userName
}}</span>
</div>
<div class="schedule-item">
<span class="schedule-item__l">主题：</span>
<span class="schedule-item__r">{{
meetingTime.title
}}</span>
</div>
<div class="schedule-item">
<span class="schedule-item__l">地点：</span>
<span class="schedule-item__r">{{
meetingTime.address
}}</span>
</div>
<div class="schedule-item schedule-item-time">
<span class="schedule-item__l">时间：</span>
<div class="schedule-item__r">
<p>{{ meetingTime.startTime }}</p>
<p>{{ meetingTime.endTime }}</p>
</div>
</div>
<div class="schedule-item">
<div class="schedule-item__l">分类：</div>
<div class="schedule-item__r">
{{ meetingTime.scheduleClassify }}
</div>
</div>
<div class="schedule-item">
<div class="schedule-item__l">内容：</div>
<div class="schedule-item__r">
{{ meetingTime.content }}
</div>
</div>
</div>
<div class="schedule-normal-footer">
<div
class="schedule-normal-footer-detail"
@click="handleScheduleDetail(meetingTime)"
>
查看详情
</div>
</div>
</el-popover>
</div>
</div>
</div>
<el-popover placement="right" trigger="click" width="303">
<div slot="reference" v-show="formatMeeting(meeting,4).alldayCounts > 4" class="checkall"><span>+</span>{{formatMeeting(meeting,4).alldayCounts-4}}查看全部</div>
<div v-show="meeting.length > 0">
<div
v-if="index >3"
:key="index"
v-for="(meetingTime, index) in formatMeeting(meeting,4).alldayMeetings"
>
<div>
<el-popover placement="right" trigger="hover" width="303">
<p slot="reference" class="meeting-item">
<!-- {{ formatTime(meetingTime.startTime) }} -->
<!-- -{{
formatTime(meetingTime.endTime)
}} -->
{{ meetingTime.title }}
</p>
<!-- <div class="meeting-item-head">会议详情</div> -->
<div class="schedule-main">
<div class="schedule-item">
<span class="schedule-item__l">领导：</span>
<span class="schedule-item__r">{{
meetingTime.userName
}}</span>
</div>
<div class="schedule-item">
<span class="schedule-item__l">主题：</span>
<span class="schedule-item__r">{{
meetingTime.title
}}</span>
</div>
<div class="schedule-item">
<span class="schedule-item__l">地点：</span>
<span class="schedule-item__r">{{
meetingTime.address
}}</span>
</div>
<div class="schedule-item schedule-item-time">
<span class="schedule-item__l">时间：</span>
<div class="schedule-item__r">
<p>{{ meetingTime.startTime }}</p>
<p>{{ meetingTime.endTime }}</p>
</div>
</div>
<div class="schedule-item">
<div class="schedule-item__l">分类：</div>
<div class="schedule-item__r">
{{ meetingTime.scheduleClassify }}
</div>
</div>
<div class="schedule-item">
<div class="schedule-item__l">内容：</div>
<div class="schedule-item__r">
{{ meetingTime.content }}
</div>
</div>
</div>
<div class="schedule-normal-footer">
<div
class="schedule-normal-footer-detail"
@click="handleScheduleDetail(meetingTime)"
>
查看详情
</div>
</div>
</el-popover>
</div>
</div>
</div>
</el-popover>
</div>
</div>
</div>
</div>
<div class="h-16 bar">
<div class="vertical-bar m-r-10" />
<span>上午</span>
</div>
<div class="inner-container">
<div class="room-content">
<!-- <div class="room-name">{{ item.name }}</div> -->
<div class="meeting-room-meetings">
<div
:class="key+1===currentWeekDate && currentTime <= 12 && weekStart===startTime? 'meeting-squre active' :'meeting-squre' "
v-for="(meeting, key) in weekMeetingList"
:key="key"
>
<div v-if="meeting.length > 0">
<div
v-if="index < 4"
:key="index"
v-for="(meetingTime, index) in formatMeeting(meeting,1).morningMeetings"
>
<div v-show="momentTime(meetingTime.startTime) < 12">
<el-popover placement="right" trigger="hover" width="303">
<p slot="reference" class="meeting-item">
{{ formatTime(meetingTime.startTime) }}
<!-- -{{
formatTime(meetingTime.endTime)
}} -->
{{ meetingTime.title }}
</p>
<!-- <div class="meeting-item-head">会议详情</div> -->
<div class="schedule-main">
<div class="schedule-item">
<span class="schedule-item__l">领导：</span>
<span class="schedule-item__r">{{
meetingTime.userName
}}</span>
</div>
<div class="schedule-item">
<span class="schedule-item__l">主题：</span>
<span class="schedule-item__r">{{
meetingTime.title
}}</span>
</div>
<div class="schedule-item">
<span class="schedule-item__l">地点：</span>
<span class="schedule-item__r">{{
meetingTime.address
}}</span>
</div>
<div class="schedule-item schedule-item-time">
<span class="schedule-item__l">时间：</span>
<div class="schedule-item__r">
<p>{{ meetingTime.startTime }}</p>
<p>{{ meetingTime.endTime }}</p>
</div>
</div>
<div class="schedule-item">
<div class="schedule-item__l">分类：</div>
<div class="schedule-item__r">
{{ meetingTime.scheduleClassify }}
</div>
</div>
<div class="schedule-item">
<div class="schedule-item__l">内容：</div>
<div class="schedule-item__r">
{{ meetingTime.content }}
</div>
</div>
</div>
<div class="schedule-normal-footer">
<div
class="schedule-normal-footer-detail"
@click="handleScheduleDetail(meetingTime)"
>
查看详情
</div>
</div>
</el-popover>
</div>
</div>
</div>
<el-popover placement="right" trigger="click" width="303">
<div slot="reference" v-show="formatMeeting(meeting,1).morningCounts > 4" class="checkall"><span>+</span>{{formatMeeting(meeting,1).morningCounts-4}}查看全部</div>
<div v-show="meeting.length > 0">
<div
v-if="index >3"
:key="index"
v-for="(meetingTime, index) in formatMeeting(meeting,1).morningMeetings"
>
<div v-if="momentTime(meetingTime.startTime) < 12">
<el-popover placement="right" trigger="hover" width="303">
<p slot="reference" class="meeting-item">
{{ formatTime(meetingTime.startTime) }}
<!-- -{{
formatTime(meetingTime.endTime)
}} -->
{{ meetingTime.title }}
</p>
<!-- <div class="meeting-item-head">会议详情</div> -->
<div class="schedule-main">
<div class="schedule-item">
<span class="schedule-item__l">领导：</span>
<span class="schedule-item__r">{{
meetingTime.userName
}}</span>
</div>
<div class="schedule-item">
<span class="schedule-item__l">主题：</span>
<span class="schedule-item__r">{{
meetingTime.title
}}</span>
</div>
<div class="schedule-item">
<span class="schedule-item__l">地点：</span>
<span class="schedule-item__r">{{
meetingTime.address
}}</span>
</div>
<div class="schedule-item schedule-item-time">
<span class="schedule-item__l">时间：</span>
<div class="schedule-item__r">
<p>{{ meetingTime.startTime }}</p>
<p>{{ meetingTime.endTime }}</p>
</div>
</div>
<div class="schedule-item">
<div class="schedule-item__l">分类：</div>
<div class="schedule-item__r">
{{ meetingTime.scheduleClassify }}
</div>
</div>
<div class="schedule-item">
<div class="schedule-item__l">内容：</div>
<div class="schedule-item__r">
{{ meetingTime.content }}
</div>
</div>
</div>
<div class="schedule-normal-footer">
<div
class="schedule-normal-footer-detail"
@click="handleScheduleDetail(meetingTime)"
>
查看详情
</div>
</div>
</el-popover>
</div>
</div>
</div>
</el-popover>
</div>
</div>
</div>
</div>
<div class="h-16 bar">
<div class="vertical-bar m-r-10" />
<span>下午</span>
</div>
<div class="inner-container">
<div
class="room-content"
>
<div class="meeting-room-meetings">
<div
:class="key+1===currentWeekDate && currentTime <= 19 && currentTime >= 12 &&weekStart===startTime? 'meeting-squre active' :'meeting-squre' "
v-for="(meeting, key) in weekMeetingList"
:key="key"
>
<div v-if="meeting.length > 0">
<div
v-if="index < 4"
:key="index"
v-for="(meetingTime, index) in formatMeeting(meeting,2).afternoonMeetings"
>
<div v-if="(momentTime(meetingTime.startTime) >= 12 && momentTime(meetingTime.startTime) <= 19)||(momentTime(meetingTime.endTime) > 12 && momentTime(meetingTime.endTime) <= 19)||(momentTime(meetingTime.startTime) <= 12 && momentTime(meetingTime.endTime) >= 19)">
<el-popover placement="right" trigger="hover" width="303">
<p slot="reference" class="meeting-item">
{{ formatTime(meetingTime.startTime) }}
<!-- -{{
formatTime(meetingTime.endTime)
}} -->
{{ meetingTime.title }}
</p>
<!-- <div class="meeting-item-head">会议详情</div> -->
<div class="schedule-main">
<div class="schedule-item">
<span class="schedule-item__l">领导：</span>
<span class="schedule-item__r">{{
meetingTime.userName
}}</span>
</div>
<div class="schedule-item">
<span class="schedule-item__l">主题：</span>
<span class="schedule-item__r">{{
meetingTime.title
}}</span>
</div>
<div class="schedule-item">
<span class="schedule-item__l">地点：</span>
<span class="schedule-item__r">{{
meetingTime.address
}}</span>
</div>
<div class="schedule-item schedule-item-time">
<span class="schedule-item__l">时间：</span>
<div class="schedule-item__r">
<p>{{ meetingTime.startTime }}</p>
<p>{{ meetingTime.endTime }}</p>
</div>
</div>
<div class="schedule-item">
<div class="schedule-item__l">分类：</div>
<div class="schedule-item__r">
{{ meetingTime.scheduleClassify }}
</div>
</div>
<div class="schedule-item">
<div class="schedule-item__l">内容：</div>
<div class="schedule-item__r">
{{ meetingTime.content }}
</div>
</div>
</div>
<div class="schedule-normal-footer">
<div
class="schedule-normal-footer-detail"
@click="handleScheduleDetail(meetingTime)"
>
查看详情
</div>
</div>
</el-popover>
</div>
</div>
</div>
<el-popover placement="right" trigger="click" width="303">
<div slot="reference" v-show="formatMeeting(meeting,2).affternoonCounts > 4" class="checkall"><span>+</span>{{formatMeeting(meeting,2).affternoonCounts-4}}查看全部</div>
<div v-show="meeting.length > 0">
<div
v-if="index >3"
:key="index"
v-for="(meetingTime, index) in formatMeeting(meeting,2).afternoonMeetings"
>
<div v-if="(momentTime(meetingTime.startTime) >= 12 && momentTime(meetingTime.startTime) <= 19)||(momentTime(meetingTime.endTime) > 12 && momentTime(meetingTime.endTime) <= 19)||(momentTime(meetingTime.startTime) <= 12 && momentTime(meetingTime.endTime) >= 19)">
<el-popover placement="right" trigger="hover" width="303">
<p slot="reference" class="meeting-item">
{{ formatTime(meetingTime.startTime) }}
<!-- -{{
formatTime(meetingTime.endTime)
}} -->
{{ meetingTime.title }}
</p>
<!-- <div class="meeting-item-head">会议详情</div> -->
<div class="schedule-main">
<div class="schedule-item">
<span class="schedule-item__l">领导：</span>
<span class="schedule-item__r">{{
meetingTime.userName
}}</span>
</div>
<div class="schedule-item">
<span class="schedule-item__l">主题：</span>
<span class="schedule-item__r">{{
meetingTime.title
}}</span>
</div>
<div class="schedule-item">
<span class="schedule-item__l">地点：</span>
<span class="schedule-item__r">{{
meetingTime.address
}}</span>
</div>
<div class="schedule-item schedule-item-time">
<span class="schedule-item__l">时间：</span>
<div class="schedule-item__r">
<p>{{ meetingTime.startTime }}</p>
<p>{{ meetingTime.endTime }}</p>
</div>
</div>
<div class="schedule-item">
<div class="schedule-item__l">分类：</div>
<div class="schedule-item__r">
{{ meetingTime.scheduleClassify }}
</div>
</div>
<div class="schedule-item">
<div class="schedule-item__l">内容：</div>
<div class="schedule-item__r">
{{ meetingTime.content }}
</div>
</div>
</div>
<div class="schedule-normal-footer">
<div
class="schedule-normal-footer-detail"
@click="handleScheduleDetail(meetingTime)"
>
查看详情
</div>
</div>
</el-popover>
</div>
</div>
</div>
</el-popover>
</div>
</div>
</div>
</div>
<div class="h-16 bar">
<div class="vertical-bar m-r-10" />
<span>晚上</span>
</div>
<div class="inner-container">
<div
class="room-content"
>
<div class="meeting-room-meetings">
<div
:class="key+1===currentWeekDate && currentTime > 19 &&weekStart===startTime ? 'meeting-squre active' :'meeting-squre' "
v-for="(meeting, key) in weekMeetingList"
:key="key"
>
<div v-if="meeting.length > 0">
<div
v-if="index < 4"
:key="index"
v-for="(meetingTime, index) in formatMeeting(meeting,3).eveningMeetings"
>
<div v-if="(momentTime(meetingTime.startTime) >= 19 && momentTime(meetingTime.startTime) <= 23)||(momentTime(meetingTime.endTime) > 19 && momentTime(meetingTime.endTime) <= 23)||(momentTime(meetingTime.startTime) <= 19 && momentTime(meetingTime.endTime) >= 23)">
<el-popover placement="right" trigger="hover" width="303">
<p slot="reference" class="meeting-item">
{{ formatTime(meetingTime.startTime) }}
<!-- -{{
formatTime(meetingTime.endTime)
}} -->
{{ meetingTime.title }}
</p>
<!-- <div class="meeting-item-head">会议详情</div> -->
<div class="schedule-main">
<div class="schedule-item">
<span class="schedule-item__l">领导：</span>
<span class="schedule-item__r">{{
meetingTime.userName
}}</span>
</div>
<div class="schedule-item">
<span class="schedule-item__l">主题：</span>
<span class="schedule-item__r">{{
meetingTime.title
}}</span>
</div>
<div class="schedule-item">
<span class="schedule-item__l">地点：</span>
<span class="schedule-item__r">{{
meetingTime.address
}}</span>
</div>
<div class="schedule-item schedule-item-time">
<span class="schedule-item__l">时间：</span>
<div class="schedule-item__r">
<p>{{ meetingTime.startTime }}</p>
<p>{{ meetingTime.endTime }}</p>
</div>
</div>
<div class="schedule-item">
<div class="schedule-item__l">分类：</div>
<div class="schedule-item__r">
{{ meetingTime.scheduleClassify }}
</div>
</div>
<div class="schedule-item">
<div class="schedule-item__l">内容：</div>
<div class="schedule-item__r">
{{ meetingTime.content }}
</div>
</div>
</div>
<div class="schedule-normal-footer">
<div
class="schedule-normal-footer-detail"
@click="handleScheduleDetail(meetingTime)"
>
查看详情
</div>
</div>
</el-popover>
</div>
</div>
</div>
<el-popover placement="right" trigger="click" width="303">
<div slot="reference" v-show="formatMeeting(meeting,3).eveningCounts > 4" class="checkall"><span>+</span>{{formatMeeting(meeting,3).eveningCounts-4}}查看全部</div>
<div v-show="meeting.length > 0">
<div
v-if="index >3"
:key="index"
v-for="(meetingTime, index) in formatMeeting(meeting,3).eveningMeetings"
>
<div v-if="(momentTime(meetingTime.startTime) >= 19 && momentTime(meetingTime.startTime) <= 23)||(momentTime(meetingTime.endTime) > 19 && momentTime(meetingTime.endTime) <= 23)||(momentTime(meetingTime.startTime) <= 19 && momentTime(meetingTime.endTime) >= 23)">
<el-popover placement="right" trigger="hover" width="303">
<p slot="reference" class="meeting-item">
{{ formatTime(meetingTime.startTime) }}
<!-- -{{
formatTime(meetingTime.endTime)
}} -->
{{ meetingTime.title }}
</p>
<!-- <div class="meeting-item-head">会议详情</div> -->
<div class="schedule-main">
<div class="schedule-item">
<span class="schedule-item__l">领导：</span>
<span class="schedule-item__r">{{
meetingTime.userName
}}</span>
</div>
<div class="schedule-item">
<span class="schedule-item__l">主题：</span>
<span class="schedule-item__r">{{
meetingTime.title
}}</span>
</div>
<div class="schedule-item">
<span class="schedule-item__l">地点：</span>
<span class="schedule-item__r">{{
meetingTime.address
}}</span>
</div>
<div class="schedule-item schedule-item-time">
<span class="schedule-item__l">时间：</span>
<div class="schedule-item__r">
<p>{{ meetingTime.startTime }}</p>
<p>{{ meetingTime.endTime }}</p>
</div>
</div>
<div class="schedule-item">
<div class="schedule-item__l">分类：</div>
<div class="schedule-item__r">
{{ meetingTime.scheduleClassify }}
</div>
</div>
<div class="schedule-item">
<div class="schedule-item__l">内容：</div>
<div class="schedule-item__r">
{{ meetingTime.content }}
</div>
</div>
</div>
<div class="schedule-normal-footer">
<div
class="schedule-normal-footer-detail"
@click="handleScheduleDetail(meetingTime)"
>
查看详情
</div>
</div>
</el-popover>
</div>
</div>
</div>
</el-popover>
</div>
</div>
</div>
</div>
</div>
<create-schedule ref="newSchedule" :visible.sync="newSchedule_drawerVisible" :detailDisabled="true" :scheduleData="currentEvent" @resetForm="resetForm" @refresh="refresh" />
</div>
</template>
<script>
import _forEach from "lodash/forEach";
import moment from "moment";
import createSchedule from "./createSchedule";//日程详情
// import { mapActions, mapGetters } from "vuex";
// import { getMeetingById } from "../../../api2/meeting/api_meeting";
// // 引入新建/编辑会议抽屉组件
// import MeetingNewDrawer from "./MeetingNewDrawer";
// const STATUS_COLOR = ["#f67e7e", "#67c23a", "#c0c4cc", "#3788d8"];
export default {
props: ["weekMeetingList", "weekDays","startTime"],
//, "meetings", "params", "tableLoading"
components: {
createSchedule
},
data() {
return {
weekStart: "",
weekEnd: "",
// weekDays: [],
weeekTitle: [
"星期一",
"星期二",
"星期三",
"星期四",
"星期五",
"星期六",
"星期日",
],
currentWeekDate:'',
currentTime:'',
colomnTitle: [],
currentEvent:{},
newSchedule_drawerVisible:false,
};
},
mounted() {
// this.weekThis();
this.getcurrentDate();
},
methods: {
momentTime(val) {
return moment(val).get("hours");
},
dayThis(date, day) {
let dd = "";
if (!date) {
dd = new Date();
} else {
dd = new Date(date) || new Date();
dd.setDate(dd.getDate() + day);
}
let y = dd.getFullYear();
let m =
dd.getMonth() + 1 < 10 ? "0" + (dd.getMonth() + 1) : dd.getMonth() + 1;
let d = dd.getDate() < 10 ? "0" + dd.getDate() : dd.getDate();
return y + "-" + m + "-" + d;
// this.getMeetingList();
},
formatMeeting(meeting,type) {
let morningCounts = 0;
let affternoonCounts = 0;
let eveningCounts = 0;
let alldayCounts = 0;
let alldayMeetings = [];
let morningMeetings = [];
let afternoonMeetings = [];
let eveningMeetings = [];
if(type === 1) {
meeting.forEach((item,index)=>{
if(this.formatHour(item.startTime) < 12 && this.isSpaceDay(item.startTime,item.endTime).length < 2 && (this.formatHour(item.startTime) > 9 && this.formatHour(item.endTime) < 19)) {
morningCounts = morningCounts+1
morningMeetings.push(item)
}
})
return {morningCounts,morningMeetings}
}else if(type === 2){
meeting.forEach((item,index)=>{
if(((this.formatHour(item.startTime) >= 12 && this.formatHour(item.startTime) <= 19)||(this.formatHour(item.startTime) <= 12 && this.formatHour(item.endTime) >= 19)||(this.formatHour(item.endTime) > 12 && this.formatHour(item.endTime) <= 19))&& this.isSpaceDay(item.startTime,item.endTime).length < 2&& (this.formatHour(item.startTime) > 9 && this.formatHour(item.endTime) < 19)) {
affternoonCounts = affternoonCounts+1
afternoonMeetings.push(item)
}
})
return {affternoonCounts,afternoonMeetings}
}else if(type===3){
meeting.forEach((item,index)=>{
if(((this.formatHour(item.startTime) > 19 && this.formatHour(item.startTime) <= 23)||(this.formatHour(item.startTime) <= 19 && this.formatHour(item.endTime) >= 23)||(this.formatHour(item.endTime) > 19 && this.formatHour(item.endTime) <= 23))&& this.isSpaceDay(item.startTime,item.endTime).length < 2&& (this.formatHour(item.startTime) > 9 && this.formatHour(item.endTime) < 19)) {
eveningCounts = eveningCounts+1
eveningMeetings.push(item)
}
})
return {eveningCounts,eveningMeetings}
}else {
meeting.forEach((item,index)=>{
// console.log(this.diffTime(this.formatDate(item.startTime),this.formatDate(item.endTime)),'时间差')
// console.log(this.getAllDate(this.formatDate(item.startTime).split(' ')[0],this.formatDate(item.endTime).split(' ')[0]),'中间所有的日期')
if((this.isSpaceDay(item.startTime,item.endTime).length > 1)||(this.formatHour(item.startTime) <= 9&&this.formatHour(item.endTime) >= 19)) {
alldayCounts = alldayCounts+1
alldayMeetings.push(item)
}
})
console.log(alldayMeetings)
return {alldayCounts,alldayMeetings}
}
},
//判断日程是否跨天
isSpaceDay(start,end) {
return this.getAllDate(this.formatDate(start).split(' ')[0],this.formatDate(end).split(' ')[0])
},
formatHour(hour) {
hour = hour.replace(/-/g, "/");
return moment(hour).get("hours");
},
formatDate(time) {
return time.replace(/-/g, "/");
},
//计算时间差
diffTime(endDate, startDate) {
let new_date = new Date(startDate); //新建一个日期对象，默认现在的时间
let old_date = new Date(endDate); //设置过去的一个时间点，"yyyy-MM-dd HH:mm:ss"格式化日期
let difftime = (new_date - old_date) / 1000; //计算时间差,并把毫秒转换成秒
let days = parseInt(difftime / 86400); // 天 24*60*60*1000
let hours = parseInt(difftime / 3600) - 24 * days; // 小时 60*60 总小时数-过去的小时数=现在的小时数
let minutes = parseInt(difftime % 3600 / 60); // 分钟 -(day*24) 以60秒为一整份 取余 剩下秒数 秒数/60 就是分钟数
let seconds = parseInt(difftime % 60); // 以60秒为一整份 取余 剩下秒数
// console.log("时间差是: " + days + "天, " + hours + "小时, " + minutes + "分钟, " + seconds + "秒");
let getDays = parseFloat(days + hours / 24 + minutes / 24 / 60 + seconds / 24 / 60 / 60).toFixed(2);
let getHours = parseFloat(days * hours + minutes / 60 + seconds / 60 / 60).toFixed(2);
let getMinutes = parseFloat(days * 24 * 60 + hours * 60 + minutes + seconds / 60).toFixed(2);
// let getTime.push(getDays,getHours,getMinutes)
// console.log(getDays, getHours, getMinutes);
let getTime=[];
getTime.push({getDays:getDays,getHours:getHours,getMinutes:getMinutes})
return getTime;
},
// 中国标准时间format yyyy-mm-dd
getAllDate(start, end){
let dateArr = []
let startArr = start.split('/')
let endArr = end.split('/')
let db = new Date()
db.setUTCFullYear(startArr[0], startArr[1] - 1, startArr[2])
let de = new Date()
de.setUTCFullYear(endArr[0], endArr[1] - 1, endArr[2])
let unixDb = db.getTime()
let unixDe = de.getTime()
let stamp
const oneDay = 24 * 60 * 60 * 1000;
for (stamp = unixDb; stamp <= unixDe;) {
dateArr.push(format(new Date(parseInt(stamp))))
stamp = stamp + oneDay
}
function format(time) {
let ymd = ''
let mouth = (time.getMonth() + 1) >= 10 ? (time.getMonth() + 1) : ('0' + (time.getMonth() + 1))
let day = time.getDate() >= 10 ? time.getDate() : ('0' + time.getDate())
ymd += time.getFullYear() + '-' // 获取年份。
ymd += mouth + '-' // 获取月份。
ymd += day // 获取日。
return ymd // 返回日期。
}
return dateArr
},
// ...mapActions("meeting", ["selectMeeting"]),
// onCellClick(row, column, cell, event) {
// let meetingRoomName = row.name;
// let meetingRoomId = row.id;
// let colIndex = column.property.substr(column.property.length - 1, 1);
// // console.log(colIndex);
// let date = moment(this.params.start)
// .add(colIndex - 1, "days")
// .format("YYYY-MM-DD");
// let startTime = moment(date)
// .add(8, "hours")
// .format("YYYY-MM-DD HH:mm:ss");
// let endTime = moment(date)
// .add(9, "hours")
// .format("YYYY-MM-DD HH:mm:ss");
// // this.selectMeeting({
// // meetingRoomId, meetingRoomName,
// // attendees: {},
// // convenerId: this.id,
// // convenerName: this.realName,
// // hostId: this.id,
// // hostName: this.realName,
// // startBatchTime: [startTime],
// // endBatchTime: [endTime],
// // reminder: [],
// // });
// let obj = {
// meetingRoomId: row.id,
// meetingRoomName: row.name,
// startBatchTime: [startTime],
// endBatchTime: [endTime]
// };
// this.$refs.meeting_drawer.fn_open_drawer("", obj);
// },
// getStatusColor(meeting) {
// const STATUS_COLOR = ["#f67e7e", "#67c23a", "#c0c4cc", "#3788d8"];
// return STATUS_COLOR[meeting.status];
// },
// objectSpanMethod({ row, column, rowIndex, columnIndex }) {
// if (columnIndex === 0) {
// if (rowIndex % 2 === 0) {
// return {
// rowspan: 2,
// colspan: 1
// };
// } else {
// return {
// rowspan: 0,
// colspan: 0
// };
// }
// }
// },
// formatTime(time) {
// return moment(time).format("HH:mm");
// },
//获取当前周日期
dateParser(dateStr) {
2014 - 12 - 16;
const prefix = dateStr.replace(
/\-/g,
(m, offset) => ({ 4: "年", 7: "月" }[offset])
);
const suffix = { 7: "月" }[dateStr.length] || "日";
return prefix + suffix;
},
//当前周
//获取今天星期几
getcurrentDate() {
this.currentWeekDate = new Date().getDay()
this.currentTime = moment().hours()
this.weekStart = moment().isoWeekday(1).format("YYYY-MM-DD 00:00:00"); //本周一
},
resetForm() {
this.currentEvent = {}
},
handleScheduleDetail(meetingTime) {
// console.log(meetingTime)
this.currentEvent = meetingTime
this.newSchedule_drawerVisible = true
},
refresh() {},
getMeetingList() {
const query = {
startTime: this.weekStart,
endTime: this.weekEnd,
};
this.$emit("getMeetingList", query);
},
getWeekDay(dateString) {
dateString = dateString.replace(/-/g, "/");
const dateStringReg = /((^((1[8-9]\d{2})|([2-9]\d{3}))([-\/\._])(10|12|0?[13578])([-\/\._])(3[01]|[12][0-9]|0?[1-9])$)|(^((1[8-9]\d{2})|([2-9]\d{3}))([-\/\._])(11|0?[469])([-\/\._])(30|[12][0-9]|0?[1-9])$)|(^((1[8-9]\d{2})|([2-9]\d{3}))([-\/\._])(0?2)([-\/\._])(2[0-8]|1[0-9]|0?[1-9])$)|(^([2468][048]00)([-\/\._])(0?2)([-\/\._])(29)$)|(^([3579][26]00)([-\/\._])(0?2)([-\/\._])(29)$)|(^([1][89][0][48])([-\/\._])(0?2)([-\/\._])(29)$)|(^([2-9][0-9][0][48])([-\/\._])(0?2)([-\/\._])(29)$)|(^([1][89][2468][048])([-\/\._])(0?2)([-\/\._])(29)$)|(^([2-9][0-9][2468][048])([-\/\._])(0?2)([-\/\._])(29)$)|(^([1][89][13579][26])([-\/\._])(0?2)([-\/\._])(29)$)|(^([2-9][0-9][13579][26])([-\/\._])(0?2)([-\/\._])(29)$))/;
if (dateString.match(dateStringReg)) {
const presentDate = new Date(dateString);
const today = presentDate.getDay() !== 0 ? presentDate.getDay() : 7;
return Array.from(new Array(7), function (val, index) {
return formatDate(
new Date(
presentDate.getTime() - (today - index - 1) * 24 * 60 * 60 * 1000
)
);
});
} else {
throw new Error(
'dateString should be like "yyyy-mm-dd" or "yyyy/mm/dd"'
);
}
function formatDate(date) {
return dateFormat(
date.getFullYear() +
"-" +
(date.getMonth() + 1) +
"-" +
date.getDate(),
"YYYY-MM-DD"
);
}
function dateFormat(date, format = "YYYY-MM-DD") {
if (!date) return;
date = date.replace(/-/g, "/");
return moment(date).format(format);
}
},
formatTime(time) {
time = time.replace(/-/g, "/");
return time.split(" ")[1].split(":").splice(0, 2).join(":");
},
},
};
</script>
<style lang="scss" scoped>
// @import "gwssi-common-lib/src/styles/mixin.scss";
.title {
height: 74px;
color: #303133;
font-weight: bold;
font-size: 22px;
font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
line-height: 74px;
text-align: center;
position: relative;
.buttons {
position: absolute;
left: 0;
}
}
.el-table {
// margin-top: 10px !important;
/deep/ td {
padding: 0;
vertical-align: middle;
}
/deep/ th {
// @include fontSize(14);
font-weight: normal;
color: #333;
text-align: center;
&.gutter {
display: block !important;
}
}
/deep/ .el-table__row {
height: 66px;
&:hover td {
background: #fff;
}
td {
cursor: pointer;
}
td:hover {
background: #f5f7fa;
}
}
/deep/ .cell {
padding: 0;
white-space: nowrap;
}
/deep/ td:first-child .cell {
white-space: normal !important;
}
}
.vertical-bar {
width: 4px;
height: 24px;
float: left;
// font-weight: bold;
border-radius: 4px;
display: inline-block;
background-color: #1082f4;
}
.bar {
display: flex;
flex-direction: row;
align-items: center;
color: #1082f4;
font-size: 18px;
height: 50px;
background: #f7fbff;
}
.meeting-table {
overflow: auto;
// width: 100%;
.tableTitle {
height: 60px;
// line-height: 60px;
display: flex;
width: 100%;
justify-content: space-evenly;
border: 1px solid #add9fe;
background: #ecf5ff;
list-style-type: none;
// overflow-x: auto;
li {
// float: left;
display: inline-block;
height: 100%;
width: calc(100% / 7);
display: flex;
flex-wrap: wrap;
// flex-direction: column;
align-items: center;
justify-content: center;
// width: 212px;
border-right: 1px solid #add9fe;
text-align: center;
color: #409eff;
font-weight: bold;
&:first-child {
// width: 258px!important;
}
&:last-child {
border-right: none;
}
}
}
}
.room-content {
height: 230px;
border-bottom: 1px solid #e4e7ed;
border-left: 1px solid #e4e7ed;
&:first-child {
border-top: 1px solid #e4e7ed;
}
display: flex;
justify-content: space-evenly;
.room-name {
// width: 258px;
width: 12.5%;
height: 100%;
border-right: 1px solid #e4e7ed;
padding: 20px 0 0 20px;
}
.meeting-room-meetings {
flex: 1;
display: flex;
width: 100%;
height: 100%;
position: relative;
}
.allday-meeting {
height: auto!important;
}
.meeting-squre {
padding: 0 10px;
width: calc(100% / 7);
float: left;
display: inline-block;
// flex-direction: column;
vertical-align: top;
text-align: center;
border-right: 1px solid #eaeaea;
// padding: 12px 0 0 20px;
text-align: left;
position: relative;
// border-bottom: 1px solid #eaeaea;
&.active {
background: #FDF6EC!important;
cursor: pointer;
// color: #FFA940;
// border: 1px solid #FFD491;
}
}
}
.meeting-item {
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
margin-top: 5px;
height: 40px;
line-height: 40px;
color: #409eff;
font-size: 18px;
background: #ecf5ff;
border: 1px solid #b3d8ff;
border-radius: 4px;
cursor: pointer;
&:hover {
opacity: 0.8;
}
}
.meeting-item-head {
height: 40px;
line-height: 40px;
background: #ecf5ff;
padding-left: 20px;
color: #409eff;
font-size: 18px;
}
.meeting-item-body {
padding-left: 30px;
padding-bottom: 30px;
color: #303133;
div {
margin-top: 20px;
span {
&:first-child {
color: #606266;
display: inline-block;
margin-right: 20px;
}
}
}
}
.checkall {
width: 60%;
position: absolute;
left: 50%;
transform: translateX(-50%);
text-align: center;
margin-top: 5px;
height: 40px;
line-height: 40px;
color: #409eff;
font-size: 18px;
background: #ecf5ff;
border: 1px solid #b3d8ff;
cursor: pointer;
&:hover {
opacity: 0.8;
}
}
// .schedule-normal-footer-type {
// margin-left: 5px;
// }
.schedule-main {
padding: 20px 30px;
// font-size: 18px!important;
// .schedule-item {
// display: block;
// }
.schedule-item {
display: flex;
font-size: 18px;
.schedule-item__l {
text-align: left;
flex: 23px;
color: #606166;
}
.schedule-item__r {
color: #000000;
}
}
}
.schedule-normal-footer {
position: relative;
// padding-bottom: 20px;
.schedule-normal-footer-detail {
height: 40px;
width: 102px;
position: absolute;
right: -3px;
bottom: 20px;
background: #1081F3;
color: #fff;
border-radius: 4px 0 0 4px;
line-height: 40px;
text-align: center;
font-weight: 400;
font-family: Microsoft YaHei;
&::after {
content: '';
z-index: 999;
position: absolute;
right: 0;
bottom: -3px;
width: 3px;
height: 3px;
border-bottom: 3px solid transparent;
// border-right: 3px solid transparent;
border-left: 3px solid #005CB8;
}
}
}
html,
body {
overflow: auto;
}
</style>
数据处理
if(this.currentGridModel === 'timeGridWeek') {
let meetings = [];
// 星期
meetings = Array.from({ length: 7 }, () => []);
response.rows.forEach((meeting) => {
// let weekdayIdx = moment(this.formatDate(meeting.startTime)).isoWeekday() - 1;
let includeDays = this.getAllDate(this.formatDate(meeting.startTime.split(' ')[0]),this.formatDate(meeting.endTime.split(' ')[0]))
// console.log(includeDays,'当前会议所包含的日期')
includeDays.forEach((item,index)=>{
let weekdayIdx = moment(this.formatDate(item)).isoWeekday() - 1;
console.log(weekdayIdx,'当前是周几')
meetings[weekdayIdx].push(meeting);
})
// console.log(weekdayIdx,'weekdayIdx')
});
this.weekMeetingList = meetings
console.log(meetings,'所有会议')
// room.meetings = meetings;
// console.log(this.weekMeetingList,'周')
// this.label = meetings;
// });
}else if(this.currentGridModel === 'timeGridDay') {
let prevData = []
let nextData = []
response.rows.forEach((meeting) => {
if( this.isDuringDate(meeting.startTime,meeting.endTime,this.prevDay)) {
prevData.push(meeting)
}
if(this.isDuringDate(meeting.startTime,meeting.endTime,this.nextDay)) {
nextData.push(meeting)
}
});
this.dayMeetingList = [prevData,nextData]
}
} else {
if (response.message || response.msg) {
this.$message({
message: response.message || response.msg,
type: "warning",
});
}
}
})
.catch((error) => {
console.log(error);
});
效果图
4042
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
