kmt/src/components/TeamworkScheduling.vue

<!-- 活动解析 -->
<template>
  <div>
    <!-- table 表格 -->
    <el-col :span="18" class="main">
      <el-row :gutter="20" class="main-header">
        <el-col :span="8" :offset="0">
          <div
            @click="handApor()"
            :class="{Apporvalactive:Activeindex == false,ApporStyles:true}"
          >批改老师</div>
          <div
            @click="AutoApor()"
            :class="{Apporvalactive:Activeindex == true,ApporStyles:true}"
          >匹配知识点老师</div>
        </el-col>
        <el-col :span="6">
          <div class="main-header-item" style="color:red;">
            小组实时在岗率:
            <span>{{FindTeamTeacherList.dutyRatio}}%</span>
          </div>
        </el-col>
        <el-col :span="4" :offset="0">
          <div @click="SelectgroupDetail()" class="NextMonthList">{{showSelectCodeWord}}</div>
        </el-col>
        <el-col :span="6">
          <div class="teach-block">
            <div class="Dayteach-Allot">
              <input
                type="text"
                placeholder="请输入老师名字"
                v-model="filters1.inputValue"
                class="Dayinput-with-Allot"
              />
              <span
                v-if="this.Activeindex == false"
                @click="SearchGetFindTeamTeacherListInfo()"
                class="DaySeachIcon el-icon-search"
              ></span>
              <span
                v-if="this.Activeindex == true"
                @click="SearchGetFindTeamTeacherListInfo()"
                class="DaySeachIcon el-icon-search"
              ></span>
            </div>
          </div>
        </el-col>
        <el-col :span="24">
          <div class="table">
            <div class="table-head">
              <div>头像</div>
              <div>姓名</div>
              <div>本月排班时段数</div>
              <div>出勤率</div>
              <div>科目</div>
            </div>
            <div class="tr" v-for="(v, k) of FindTeamTeacherList.list" :key="k">
              <div class="tr-first" :class="{BgcColor:k%2 !== 1}">
                <div>
                  <img :src="BASE_URL + v.photo" v-if="v.photo" alt class="table-img" />
                  <img v-if="!v.photo" src="../assets/img/attt.png" alt class="table-img" />
                </div>
                <div>{{v.teacherName}}</div>
                <div>{{v.haveCount}}</div>
                <div :class="{grayRed:v.attendanceRatio <80}">{{v.attendanceRatio}}%</div>
                <div>{{v.subject}}</div>
                <div class="tr-seconds">
                  <span
                    @click="groupDetail(v)"
                    style="cursor: pointer;"
                    class="tr-second-check"
                  >查看排班表</span>
                </div>
              </div>
            </div>
          </div>
          <!-- 分页显示 -->
          <el-pagination
            background
            @size-change="handleSizeChange1"
            @current-change="pageChange1"
            :page-sizes="[10]"
            layout="total, prev, pager, next"
            :total="parseInt(FindTeamTeacherList.totalElements)"
            :hide-on-single-page="true"
          ></el-pagination>
          <div style="clear:both;"></div>
        </el-col>
      </el-row>
    </el-col>
    <!-- </el-row> -->
    <div class="showModel" @click="updateIsShowCarouselPictureModal()" v-if="NoAllotManagerModel">
      <div class="modal-cancel" @click="updateIsShowCarouselPictureModal()">X</div>
      <div class="detailinfo">
        <el-col :span="24">
          <h1 class="tiplog">{{TeacherThisMonthDutyList.month}}月排班情况</h1>
          <div class="RatyMonth">
            当月出勤率
            <span
              style="color:#333333;font-size:16px;margin-left:10px;"
            >{{TeacherThisMonthDutyList.dutyRate}}%</span>
          </div>
          <div class="canlender" id="canlender">
            <div class="tablebox1">
              <el-row :gutter="24">
                <el-col :span="24" :offset="0">
                  <!-- 日期 -->
                  <div class="date">
                    <div class="calendar-week">
                      <div class="week-item" v-for="item of daynamearr" :key="item">
                        <span :class="[item == '六' || item == '日'?'grayRed':'']">{{item}}</span>
                      </div>
                    </div>
                    <div
                      class="calendar-inner"
                      v-if="TeacherThisMonthDutyList.dayList && TeacherThisMonthDutyList.dayList.length>0"
                    >
                      <div
                        v-for="(item, index) of calendarList"
                        :class="[item.pastDay ? 'psatchecked' : 'calendar-item']"
                        :key="index"
                      >
                        <div slot="reference" class="day-setting">
                          <div class="date-day">{{ item.date }}</div>
                          <div class="people" v-if="item.dateList && item.dateList.timeVoList">
                            <div class="people-items" v-show="item.dateList.isOpen ==1">
                              <div
                                :class="[item.pastDay ? 'Past-items-text' : 'people-items-text']"
                                v-for="(v, k) of item.dateList.timeVoList"
                                :key="k"
                              >
                                <span v-if="v.timeState ==1">{{v.startInterval}}-{{v.endInterval}}</span>
                                <span
                                  class="selectIng"
                                  v-if="v.timeState ==2 && !item.pastDay"
                                >{{v.startInterval}}-{{v.endInterval}}</span>
                                <span
                                  class="MuchselectIng"
                                  v-if="v.timeState ==2 && item.pastDay"
                                >{{v.startInterval}}-{{v.endInterval}}</span>
                                <span
                                  class="LostselectIng"
                                  v-if="v.timeState ==4"
                                >{{v.startInterval}}-{{v.endInterval}}</span>
                                <span
                                  class="MuchselectIng"
                                  v-if="v.timeState ==3"
                                >{{v.startInterval}}-{{v.endInterval}}</span>
                              </div>
                            </div>
                            <div
                              class="people-items"
                              style="color:#999999;backgroung-color:#F9F9F9"
                              v-show="item.dateList.isOpen ==0"
                            >
                              <div>不开放</div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-col>
      </div>
    </div>
    <!-- 筛选排班时段 -->
    <div class="showModel" v-if="SelectTeacherworkListModel">
      <div class="modal-cancel" @click="updateIsShowSelectWorkListModal()">X</div>
      <div class="detailinfo">
        <div
          class="Selcetmodel-btn-items model-grdeen"
          style="float:right"
          @click="saveOpenCloseDAys()"
        >确定</div>
        <el-col :span="24">
          <!-- <h1 class="tiplog">{{TeacherThisMonthDutyList.month}}月排班情况</h1> -->
          <div class="canlender" id="canlender">
            <div class="tablebox1">
              <el-row :gutter="24">
                <el-col :span="24" :offset="0">
                  <!-- 日期 -->
                  <div class="date">
                    <div class="calendar-week">
                      <div class="week-item" v-for="item of daynamearr" :key="item">
                        <span :class="[item == '六' || item == '日'?'grayRed':'']">{{item}}</span>
                      </div>
                    </div>
                    <div
                      class="calendar-inner"
                      v-if="FindArrangeTemplateIntervalList.list && FindArrangeTemplateIntervalList.list.length>0"
                    >
                      <div
                        v-for="(item, index) of setCalendarList"
                        :class="[item.pastDay ? 'psatchecked' : 'calendar-item']"
                        :key="index"
                      >
                        <div slot="reference" class="day-setting">
                          <div class="date-day">{{ item.date }}</div>
                          <div class="people" v-if="item.dateList && item.dateList.intervalList">
                            <div class="people-items" v-show="item.dateList.isOpen ==1">
                              <div
                                :class="[item.pastDay ? 'Past-items-text' : 'people-items-text']"
                                v-for="(v, k) of item.dateList.intervalList"
                                :key="k"
                              >
                                <a
                                  v-if="item.pastDay"
                                  href="javaScript:;"
                                  class="selectIngHovernomal"
                                >
                                  <span>{{v.startInterval}}-{{v.endInterval}}</span>
                                </a>
                                <a
                                  v-if="!item.pastDay"
                                  :class="[v.id == SelectSearchId  ? 'selectIngTimeCode' : '']"
                                  href="javaScript:;"
                                  @click="SelectActiveindex(v)"
                                  class="selectIngHover"
                                >
                                  <span>{{v.startInterval}}-{{v.endInterval}}</span>
                                </a>
                              </div>
                            </div>
                            <div
                              class="people-items"
                              style="color:#999999;backgroung-color:#F9F9F9"
                              v-show="item.dateList.isOpen ==0"
                            >
                              <div>不开放</div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-col>
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
import { IMG_BASE_URL } from "@/config";
export default {
  components: {},
  name: "actvResolveLabel",
  props: {},
  data() {
    return {
      daynamearr: ["一", "二", "三", "四", "五", "六", "日"],
      //本月的本期构成
      dayarr: [],
      managerId: "",
      year: new Date().getFullYear(),
      D: new Date().getDate() + " ",
      // month: new Date().getMonth() + 1,
      NewDay: "",
      SelectSearchId: "",
      showSelectCodeWord: "筛选时段",
      BASE_URL: IMG_BASE_URL,
      accessToken: localStorage.getItem("accessToken"),
      NoAllotManagerModel: false, //token
      SelectTeacherworkListModel: false,
      Activeindex: false,
      TEACHERTYPE: 8,
      current: {}, // 当前时间
      calendarList: [], // 排班列表
      setCalendarList: [], // 排班设置列表
      shareDate: new Date(), // 享元模式，用来做优化的
      month: "",
      today: "",
      filters1: {
        pageNo: 1,
        pageSize: 10,
        inputValue: ""
      },
      pictureIndex: 0
    };
  },
  created() {
    const managerId = this.$route.query.managerId;
    this.managerId = managerId;
  },
  watch: {
    TeacherThisMonthDutySucess(val, oldVal) {
      //保存排班设置成功的watch监听回调
      this.init();
    },
    FindArrangeTemplateIntervalListStatus(val, oldVal) {
      this.init();
    }
  },
  computed: {
    ...mapGetters([
      "TeacherThisMonthDutyList",
      "FindTeamTeacherList",
      "TeacherThisMonthDutySucess",
      "FindArrangeTemplateIntervalList",
      "FindArrangeTemplateIntervalListStatus"
    ])
  },
  methods: {
    ...mapActions(["setUser"]),
    // 获取校区管理员监控数据
    async InfoWatch() {},
    // 数据监控手动批改
    handApor() {
      this.Activeindex = false;
      this.filters1.pageNo = 1;
      this.filters1.inputValue = "";
      this.showSelectCodeWord = "筛选时段";
      this.SelectSearchId = "";
      this.TEACHERTYPE = 8;
      this.GetFindTeamTeacherListInfo();
    },
    // 数据监控匹配知识点老师
    AutoApor() {
      this.Activeindex = true;
      this.filters1.pageNo = 1;
      this.filters1.inputValue = "";
      this.showSelectCodeWord = "筛选时段";
      this.SelectSearchId = "";
      this.TEACHERTYPE = 13;
      this.GetFindTeamTeacherListInfo();
    },
    // 查询当月日历时间列表
    async GetFindArrangeTemplateIntervalListInfo() {
      this.$store.dispatch("GetFindArrangeTemplateIntervalList", {});
    },
    SearchGetFindTeamTeacherListInfo() {
      this.SelectSearchId = "";
      this.showSelectCodeWord = "筛选时段";
      this.GetFindTeamTeacherListInfo();
    },
    // 组内排班老师列表
    async GetFindTeamTeacherListInfo() {
      this.$store.dispatch("GetFindTeamTeacherList", {
        managerId: this.managerId,
        type: this.TEACHERTYPE,
        pageSize: this.filters1.pageSize,
        pageNo: this.filters1.pageNo,
        id: this.SelectSearchId,
        teacherName: this.filters1.inputValue
      });
    },
    handleSizeChange1(val) {
      this.filters1.pageSize = val;
      this.GetFindTeamTeacherListInfo();
    },
    pageChange1(val) {
      this.filters1.pageNo = val;
      this.GetFindTeamTeacherListInfo();
    },
    updateIsShowCarouselPictureModal() {
      this.NoAllotManagerModel = false;
    },
    updateIsShowSelectWorkListModal() {
      this.SelectTeacherworkListModel = false;
    },
    //老师排班详情
    groupDetail(str) {
      this.pictureIndex = 0;
      this.NoAllotManagerModel = true;
      this.$store.dispatch("GetTeacherThisMonthDutyList", {
        teacherId: str.teacherId
      });
      //  this.init();
    },
    //筛选时段
    SelectgroupDetail() {
      // this.pictureIndex = 0;
      this.SelectTeacherworkListModel = true;
      this.GetFindArrangeTemplateIntervalListInfo();
    },
    SelectActiveindex(v) {
      this.SelectSearchId = v.id;
      this.showSelectCodeWord =
        v.arrangeDate + "-" + v.startInterval + "-" + v.endInterval;
    },
    //确定提交所选中时段
    saveOpenCloseDAys() {
      this.SelectTeacherworkListModel = false;
      this.filters1.inputValue = "";
      this.GetFindTeamTeacherListInfo();
    },
    // 日期处理
    init() {
      // 初始化当前时间
      this.setCurrent();
      this.calendarCreator();
    },
    // 判断当前月有多少天
    getDaysByMonth(year, month) {
      return new Date(year, month + 1, 0).getDate();
    },
    getFirstDayByMonths(year, month) {
      return new Date(year, month, 1).getDay();
    },
    getLastDayByMonth(year, month) {
      return new Date(year, month + 1, 0).getDay();
    },
    // 对小于 10 的数字，前面补 0
    pad(str) {
      return str < 10 ? `0${str}` : str;
    },
    // 点击上一月
    prevMonth() {
      this.current.month--;
      // 因为 month的变化 会超出 0-11 的范围， 所以需要重新计算
      this.correctCurrent();
      // 生成新日期
      this.calendarCreator();
    },
    // 点击下一月
    nextMonth() {
      this.current.month++;
      // 因为 month的变化 会超出 0-11 的范围， 所以需要重新计算
      this.correctCurrent();
      // 生成新日期
      this.calendarCreator();
    },
    // 格式化时间，与主逻辑无关
    stringify(year, month, date) {
      let str = [year, this.pad(month + 1), this.pad(date)].join("-");
      return str;
    },
    // 设置或初始化 current
    setCurrent(d = new Date()) {
      let year = d.getFullYear();
      let month = d.getMonth();
      let date = d.getDate();
      this.current = {
        year,
        month,
        date
      };
    },
    // 修正 current
    correctCurrent() {
      let { year, month, date } = this.current;

      let maxDate = this.getDaysByMonth(year, month);
      // 预防其他月跳转到2月，2月最多只有29天，没有30-31
      date = Math.min(maxDate, date);

      let instance = new Date(year, month, date);
      this.setCurrent(instance);
    },
    // 生成日期
    calendarCreator() {
      // 一天有多少毫秒
      const oneDayMS = 24 * 60 * 60 * 1000;

      let list = [];
      let setList = [];
      let { year, month } = this.current;

      // 当前月份第一天是星期几, 0-6
      let firstDay = this.getFirstDayByMonths(year, month);
      // 填充多少天
      let prefixDaysLen = firstDay === 0 ? 6 : firstDay - 1;
      // 毫秒数
      let begin = new Date(year, month, 1).getTime() - oneDayMS * prefixDaysLen;

      // 当前月份最后一天是星期几, 0-6
      let lastDay = this.getLastDayByMonth(year, month);
      // 填充多少天， 和星期的排放顺序有关
      let suffixDaysLen = lastDay === 0 ? 0 : 7 - lastDay;
      // 毫秒数
      let end =
        new Date(year, month + 1, 0).getTime() + oneDayMS * suffixDaysLen;
      // 计算今天几号
      let today = new Date().getDate();
      // 饱和度
      // console.log(today)
      while (begin <= end) {
        // 享元模式，避免重复 new Date
        this.shareDate.setTime(begin);
        let year = this.shareDate.getFullYear();
        let curMonth = this.shareDate.getMonth();
        let date = this.shareDate.getDate();
        // console.log(FindCalendarList)
        //  ||  date < today
        // 排班
        list.push({
          year: year,
          month: curMonth,
          date: date,
          disable: curMonth !== month,
          pastDay: date < today && curMonth == month,
          status: false,
          value: this.stringify(year, curMonth, date)
        });
        // 排班设置
        setList.push({
          year: year,
          month: curMonth,
          date: date,
          status: false,
          disable: curMonth !== month,
          pastDay: date < today && curMonth == month,
          value: this.stringify(year, curMonth, date)
        });
        begin += oneDayMS;
      }
      var that = this;
      // debugger
      if (
        that.TeacherThisMonthDutyList.dayList &&
        that.TeacherThisMonthDutyList.dayList.length > 0
      ) {
        for (let i = 0; i < list.length; i++) {
          if (!list[i].disable) {
            const dateValue = list[i].date;
            // debugger
            for (
              let t = 0;
              t < that.TeacherThisMonthDutyList.dayList.length;
              t++
            ) {
              if (dateValue == that.TeacherThisMonthDutyList.dayList[t].day) {
                list[i].dateList = that.TeacherThisMonthDutyList.dayList[t];
              }
            }
          } else {
            list[i].dateList = {
              timeVoList: []
            };
          }
        }
      }
      if (
        that.FindArrangeTemplateIntervalList.list &&
        that.FindArrangeTemplateIntervalList.list.length > 0
      ) {
        for (let i = 0; i < setList.length; i++) {
          if (!setList[i].disable) {
            const dateValue = setList[i].value;
            for (
              let t = 0;
              t < that.FindArrangeTemplateIntervalList.list.length;
              t++
            ) {
              if (
                dateValue ==
                that.FindArrangeTemplateIntervalList.list[t].arrangeDate
              ) {
                setList[i].dateList =
                  that.FindArrangeTemplateIntervalList.list[t];
              }
            }
          } else {
            setList[i].dateList = {};
          }
        }
      }
      this.calendarList = list;
      this.setCalendarList = setList;
    }
  },
  mounted() {
    this.GetFindTeamTeacherListInfo();
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.showModel {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(5, 5, 5, 0.5);
  opacity: 1 !important;
  overflow: hidden !important;
  /* color: #fff; */
}
.modal-cancel {
  position: absolute;
  top: 20px;
  right: 40px;
  width: 50px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  background-color: rgba(66, 56, 56, 0.5);
  border-radius: 100px;
  font-size: 16;
  color: #eee;
  cursor: pointer;
}
.detailinfo {
  position: absolute;
  left: 10%;
  /* margin-left: 15%; */
  top: 10%;
  width: 70%;
  height: 800px;
  background: #fff;
  text-align: center;
  line-height: 50px;
  font-size: 16;
  overflow: auto;
  z-index: 9999;
  opacity: 1 !important;
  color: #000000;
  padding: 50px !important;
}
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
  width: 5px; /*滚动条宽度*/
  height: 15px; /*滚动条高度*/
}

/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.3);
  border-radius: 10px; /*滚动条的背景区域的圆角*/
  background-color: #fff; /*滚动条的背景颜色*/
}

/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
  border-radius: 10px; /*滚动条的圆角*/
  -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.3);
  background-color: #bcbaba; /*滚动条的背景颜色*/
}
.detailImg {
  background: #000000;
  position: absolute;
  left: 0;
  top: 20px;
  width: 600px;
  height: 700px;
  text-align: center;
  line-height: 50px;
  border-radius: 15px;
  font-size: 16;
  color: rgb(0, 0, 0);
  opacity: 1 !important;
  /* cursor: pointer; */
}
.detailword {
  background: #eee;
  position: absolute;
  right: 0;
  top: 20px;
  width: 600px;
  height: 700px;
  text-align: center;
  line-height: 50px;
  border-radius: 15px;
  font-size: 16;
  color: #000000;
  opacity: 1 !important;
  /* cursor: pointer; */
}
.detailImg img {
  width: 600px;
  height: 700px;
  border-radius: 15px;
}
.tipsesson {
  font-size: 18px;
  font-weight: 700;
  position: absolute;
  left: 10px;
  top: 20px;
}
.tipsessonWord {
  width: 100%;
  height: 400px;
  font-size: 14px;
  position: absolute;
  left: 10px;
  top: 50px;
  padding: 0 20px;
  line-height: 20px;
  text-align: left;
}
.BgcColor {
  background-color: #f7fbfc;
}
.managertip {
  font-size: 20px;
  font-weight: 700;
}
.timeAndteacher {
  height: 200px;
  position: absolute;
  right: 50px;
  bottom: 50px;
}
.nextPrveBtn {
  width: 400px;
  left: 50%;
  margin-left: -200px;
  height: 200px;
  position: absolute;
  bottom: 50px;
}
.timeset {
  color: #5de26c;
  font-size: 16px;
}
.Nextebtn {
  height: 100px;
  position: absolute;
  right: 50px;
  bottom: 50px;
}
.prvebtn {
  height: 100px;
  position: absolute;
  left: 50px;
  bottom: 50px;
}
.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #52cc60 !important;
  color: #fff;
}
html,
body {
  height: 100%;
  overflow: hidden;
}
ul {
  text-align: center;
  margin: 0 !important;
}
.aside {
  /* background-color: #fbfbfb; */
  margin-top: 16px;
  padding: 0;
  min-height: 880px;
}
.main {
  background-color: #fff;
  margin: 16px;
  padding: 0 !important;
  /* margin-left: 180px; */
  min-height: 980px;
}
.table-aside {
  color: #666666;
  font-size: 18px;
  text-align: center;
  line-height: 60px;
  cursor: pointer;
}
el-table {
  color: #999999;
  font-size: 18px;
}
.main-items {
  color: #393939;
  text-align: center;
  line-height: 80px;
}
.main-header-item {
  font-size: 16px;
}
.model-manager {
  display: flex;
  justify-content: space-between;
  margin: 30px;
  color: #393939;
  font-size: 24px;
}
.main-header-link {
  color: #52cc60;
  font-size: 18px;
  margin-left: 10px;
  cursor: pointer;
  text-decoration: underline;
}
.el-select {
  width: 100px;
  margin: 0 5px;
}
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}
.input-with-new {
  border: 1px solid #cccccc;
  border-radius: 15px;
  height: 30px;
  line-height: 30px;
  padding: 10px;
  font-size: 12px;
  color: #eeeeee;
  width: 180px;
}
.active {
  background-color: #52cc60;
  color: #fff;
}
.el-input__inner {
  height: 32px;
}

.table-img {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  margin-left: 14px;
  cursor: pointer;
}
.table {
  width: 94.5%;
  border-top: 1px solid #e5e5e5;
  margin: 0 43px;
}
.table-head {
  margin-right: 24%;
  color: #999999;
  font-size: 18px;
  text-align: center;
  display: flex;
  justify-content: space-around;
}
.table-heads {
  margin-left: 15%;
  width: 60%;
  color: #3ab548;
  font-size: 14px;
  text-align: center;
  display: flex;
  justify-content: space-around;
}
.table-heads > div {
  width: 13.528%;
}
.table-head > div {
  width: 13.528%;
}
.tr {
  width: 100%;
  color: #393939;
  text-align: center;
  /* font-weight: 700; */
  font-family: "PingFang-SC-Bold";
  font-size: 16px;
}
.tr-first {
  margin-right: 2%;
  display: flex;
  justify-content: space-around;
}
.tr-first > div {
  width: 14.528%;
}
.psatchecked {
  background-color: #f9f9f9;
  float: left;
  width: 14.28%;
  height: 250px;
  line-height: 130px;
  text-align: center;
  color: #aaaaaa;
  border: 10px solid #fff;
  padding: 4px;
  font-weight: 700;
  cursor: pointer;
  border-radius: 20px;
  /* gackgroudcolor: rgba(243, 10, 10, 0.007); */
}
.tr-s {
  display: flex;
  justify-content: space-around;
}
.tr-set {
  background-color: #fbfbfb;
  display: flex;
  justify-content: space-around;
  color: #393939;
  font-size: 12px;
  margin: 20px;
}
.tr-setNo {
  display: flex;
  justify-content: space-around;
  color: #000000f1;
  font-size: 16px;
  margin: 20px;
}
.tr-secon {
  font-size: 12px;
  text-align: center;
  word-wrap: break-word;
  width: 40px;
}
.tr-second {
  background-color: #fbfbfb;
  display: flex;
  color: #393939;
  font-size: 20px;
  word-wrap: break-word;
}
.tr-seconds {
  text-align: center;
  font-size: 14px;
  word-wrap: break-word;
  margin: 0 50px;
  /* height: 30px; */
}
.width40 {
  width: 60px;
}
.tr-sw180 {
  width: 230px;
  text-align: center;
}
.tr-secondsA {
  text-align: center;
  font-size: 14px;
  word-wrap: break-word;
  width: 200px;
}
.tr-w120 {
  width: 160px;
  text-align: left;
  display: inline-block;
  /*height: 80px;*/
  /*line-height: 80px;*/
}
.tr-second-check {
  color: #7297ff;
  font-size: 17px;
  text-decoration: underline;
}
.Online {
  display: inline-block;
}
.Onlinename {
  display: inline-block;
}
.tr-active {
  color: #3ab548;
}
.model {
  z-index: 10000;
  width: 60%;
  height: auto;
  position: fixed;
  top: 15%;
  left: 30%;
  margin: auto;
  background: #fff;
  border-radius: 10px;
  text-align: center;
}
.model-text {
  background: rgba(255, 255, 255, 1);
  border-radius: 10px;
}
.model-items-first {
  padding: 0 34px;
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.model-items-first-img {
  width: 68px;
  height: 68px;
  border-radius: 8px;
  position: relative;
  bottom: 20px;
}
.model-items-first-left {
  display: inline-block;
  color: #393939;
  font-size: 24px;
  margin-left: 14px;
  text-align: left;
}
.model-items-first-left-down {
  color: #7e7e7e;
  font-size: 18px;
}
.model-text-head {
  padding: 40px 50px;
  display: flex;
  color: #393939;
  font-size: 24px;
  justify-content: space-between;
}
.model-items-other {
  height: 60px;
  line-height: 60px;
  color: #393939;
  font-size: 20px;
  text-align: left;
  padding: 0 34px;
}
.model-active {
  background-color: #f6f7fb;
}
.model-active-last {
  border-radius: 0 0 30px 30px;
  background-color: #f6f7fb;
}
.model-items-left {
  width: 100%;
  color: #393939;
  font-size: 24px;
}
.buttonAppoval {
  display: inline-block;
}
.model-items-left-top {
  display: flex;
  justify-content: space-between;
}
.model-items {
  padding: 20px 0;
  display: flex;
  justify-content: space-between;
  display: inline-block;
  width: 100%;
}
.model-itemss {
  padding: 10px 0;
  display: flex;
  justify-content: space-between;
  display: inline-block;
}
.model-items-left-top-img {
  width: 68px;
  height: 68px;
  border-radius: 8px;
  position: relative;
  bottom: 25px;
}
.model-items-left-top-number {
  color: #7e7e7e;
  font-size: 18px;
  margin-left: 10px;
}

.today-time {
  color: #7e7e7e;
  font-size: 18px;
  margin: 0 20px;
}
.el-pagination {
  padding: 30px;
}
.no-homework {
  width: 16.5%;
  height: 328px;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 0px 14px 0px rgba(228, 228, 228, 1);
  border-radius: 10px;
  margin: auto;
  position: fixed;
  top: 27%;
  left: 41.75%;
  text-align: center;
  padding: 35px;
  z-index: 1000;
  display: none;
}
.no-homework > div {
  margin-bottom: 25px;
  font-size: 24px;
}
.no-homework > img {
  width: 226px;
  height: 203px;
}
.allocation-items {
  width: 45%;
  display: inline-block;
  margin-right: 20px;
  margin-bottom: 30px;
}
.ApporStyles {
  display: inline-block;
  width: 200px;
  height: 40px;
  line-height: 40px;
  background-color: #fff;
  border-radius: 20px;
  font-size: 16px;
  color: #7c819d;
  cursor: pointer;
}
.Apporvalactive {
  background-color: #52cc60;
  color: #fff;
}
.tiplog {
  height: 30px;
  width: 200px;
  /* margin: 10px; */
  font-size: 25px;
  font-weight: 700;
  text-align: left;
  /* margin: 0 auto; */
}
.RatyMonth {
  height: 20px;
  width: 200px;
  color: #999999;
  font-size: 16px;
  text-align: left;
  font-weight: 700;
  margin-bottom: 100px;
}
.canlender {
  width: 1200px;
  height: 400px;
  margin: 0 auto;
}
.Selcetmodel-btn-items {
  width: 154px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 18px;
  border-radius: 50px;
  z-index: 99999999999 !important;
  cursor: pointer !important;
}
.model-grdeen {
  background-color: #52cc60;
  color: #fff;
}
table {
  border-collapse: collapse;
  width: 100%;
}

table.bgtable thead tr th {
  height: 30px;
  text-align: center;
  cursor: pointer;
  color: #999999;
}
.menu_bgc {
  margin: 10px !important;
}
.grayRed {
  color: red;
}
table.bgtable tbody tr td {
  height: 100px;
  box-sizing: border-box;
  text-align: center;
  vertical-align: top;
  border: 20px solid #fff;
  padding: 4px;
  font-weight: 700;
  cursor: pointer;
  border-radius: 50px;
  background-color: #f6f7fb;
}
table.bgtable tbody tr td.gray {
  color: #fff;
  background: #ffff;
}
.number {
  color: #7297ff;
  width: 100%;
  height: 150px;
}
.grayBlue {
  color: #fff;
}
.number .numberItem {
  width: 100%;
  height: 30px;
}
.number .numberItem span {
  display: inline-block;
  width: 120px;
  height: 15px;
  /* background-color: #FF6465; */
  border-radius: 10px;
}
.date {
  margin-top: 68px;
}
.calendar-week {
  /* border: 1px solid #e5e5e5; */
  text-align: center;
  border-right: none;
  display: flex;
}
.week-item {
  display: inline-block;
  background: #ffff;
  width: 14.28%;
  /* border-right: 1px solid #e5e5e5; */
}
.calendar-inner {
  border-left: 1px solid #e5e5e5;
}
.calendar-item {
  float: left;
  width: 14.28%;
  height: 250px;
  line-height: 130px;
  text-align: center;
  background-color: #f6f7fb;
  border: 10px solid #fff;
  padding-bottom: 4px;
  font-weight: 700;
  cursor: pointer;
  border-radius: 20px;
  /* padding:15px; */
}
.timeGone {
  background-color: #f9f9f9;
}
.day-setting {
  /* height: 130px; */
  line-height: 130px;
}
.calendar-item.disabled {
  color: #ffff;
}
.checked {
  background: #f6f7fb;
}
.date-day {
  font-size: 16px;
  line-height: 60px;
  color: #aaa;
}
.people {
  width: 100%;
  display: flex;
  justify-content: space-around;
  font-size: 14px;
}
.people-items {
  width: 100%;
  display: inline-block;
  line-height: 70px;
  margin: 0 auto;
}
.people-items span {
  display: block;
  height: 30px;
  line-height: 30px;
  /* width: 100%; */
  text-align: center;
  font-size: 12px;
  border-radius: 10px;
  margin: 10px;
}
.people-items-num {
  line-height: 15px;
  padding: 3px 8px;
}
.people-items-text {
  width: 100%;
  line-height: 30px;
  font-size: 14px;
  color: #7297ff;
  font-weight: normal;
}
.Past-items-text {
  width: 100%;
  line-height: 30px;
  font-size: 14px;
  color: #aaaaaa;
  font-weight: normal;
}
.selectIng {
  display: block;
  background-color: #7297ff;
  color: #fff;
  height: 30px;
  line-height: 30px;
  width: 120px;
  font-size: 12px;
  border-radius: 10px;
  margin: 10px;
}
.selectIngHover {
  color: #999999;
  text-decoration: none;
}
.selectIngHovernomal {
  color: #999999;
  text-decoration: none;
}
.selectIngHover :hover {
  display: block;
  background-color: #7297ff;
  color: #fff;
  height: 30px;
  line-height: 30px;
  width: 120px;
  font-size: 12px;
  border-radius: 10px;
  margin: 10px;
}
.selectIngTimeCode {
  display: block;
  background-color: #7297ff;
  color: #fff;
  height: 30px;
  line-height: 30px;
  font-size: 12px;
  border-radius: 10px;
}
.MuchselectIng {
  display: block;
  background-color: #bbbbbb;
  color: #fff;
  height: 30px;
  line-height: 30px;
  width: 120px;
  font-size: 12px;
  border-radius: 10px;
  margin: 10px;
}
.LostselectIng {
  display: block;
  background-color: #ff6465;
  color: #fff;
  height: 30px;
  line-height: 30px;
  width: 120px;
  font-size: 12px;
  border-radius: 10px;
  margin: 10px;
}
.Dayinput-with-Allot {
  border: #b6b6b6;
  border-radius: 20px;
  height: 40px;
  width: 300px;
  font-size: 8px;
  color: #b6b6b6;
  text-align: left;
  line-height: 40px;
  background: #f1f2f4;
  padding: 0 10px;
  float: left;
  outline: none !important;
  box-shadow: none;
}
.Dayteach-Allot {
  width: 400px;
  position: relative;
  height: 40px;
  top: 15px;
}
.DaySeachIcon {
  position: absolute;
  font-size: 20px;
  color: #b6b6b6;
  right: 30%;
  margin-top: 10px;
  cursor: pointer;
}
.NextMonthList {
  float: right;
  cursor: pointer;
  margin-top: 20px;
  width: 250px;
  height: 40px;
  border-radius: 20px;
  line-height: 40px;
  background-color: #7297ff;
  color: #fff;
  font-size: 12px;
}
</style>