kmt/src/pages/super/ComposeType.vue

<!-- 活动解析 -->
<template>
  <div>
    <!-- table 表格 -->
    <el-row :gutter="20" class="main-items">
      <el-col class="aside" :span="3" :offset="2" style="padding: 0 !important;">
        <div
          class="table-aside"
          v-for="(v, k) in ItemList"
          :key="k"
          :class="{active:k == modelindex}"
          @click="selectTitle(k)"
        >{{v.text}}</div>
      </el-col>
      <!--排班表-->
      <!-- {{NextOrNewMonthStatus.NextOrNewMonthStatus}} -->
      <el-col
        :span="17"
        class="main"
        v-if="modelindex == 0 && NextOrNewMonthStatus.NextOrNewMonthStatus == false"
      >
        <el-row :gutter="20">
          <!-- {{NextOrNewMonthStatus}} -->
          <el-col :span="8" :offset="2">
            <div class="selectBox">
              <div
                class="Ageclass"
                @click="choiceclass()"
                @mouseover="selectStyle()"
                @mouseout="outStyle()"
              >
                <span class="age-tip">{{selecttitlepag}}</span>
                <span :class="[gardeListDown ?'el-icon-caret-top':'el-icon-caret-bottom']"></span>
              </div>
              <div
                class="class-download"
                v-show="gardeListDown"
                @mouseover="selectStyle()"
                @mouseout="outStyle()"
              >
                <ul v-for="(item, k) in options" :key="k">
                  <li @click="selectTip(item)">{{item.label}}</li>
                </ul>
              </div>
            </div>
            <div class="selectBox">
              <div
                class="Ageclass"
                @click="choiceclass()"
                @mouseover="selectStyle1()"
                @mouseout="outStyle1()"
              >
                <span class="age-tip">{{selecttitleage}}</span>
                <span :class="[gardeListDownage ?'el-icon-caret-top':'el-icon-caret-bottom']"></span>
              </div>
              <div
                class="class-download"
                v-show="gardeListDownage"
                @mouseover="selectStyle1()"
                @mouseout="outStyle1()"
              >
                <ul v-for="(item, k) in grades" :key="k">
                  <li @click="selectTipage(item)">{{item.label}}</li>
                </ul>
              </div>
            </div>
          </el-col>
          <el-col :span="4" class="month">
            <span class="tiplog">{{currentDateStr }}排班情况</span>
            <!-- {{DutyTemplateListSTUS}} -->
          </el-col>
          <el-col :span="8" class="month">
            <div
              v-if="FindCalendarList.isNextMonth ==1"
              @click="shoeNextOrlastMOntlist(1)"
              class="NextMonthList"
            >
              查看下月排班情况
              <span class="el-icon-arrow-right"></span>
            </div>
            <div
              v-if="FindCalendarList.isNextMonth ==0"
              class="NextMonthList"
              style="width:300px;"
            >25号至月底前一天可查看老师下月排班</div>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="20" :offset="2">
            <!-- 日期 -->
            <div class="date">
              <div class="calendar-week">
                <div class="week-item" v-for="item of weekList" :key="item">
                  <span :class="[item == '六' || item == '日'?'grayRed':'']">{{item}}</span>
                </div>
              </div>
              <div
                class="calendar-inner"
                v-if="FindCalendarList.list && FindCalendarList.list.length >0"
              >
                <div
                  class="calendar-item"
                  v-for="(item, index) of calendarList"
                  :key="index"
                  :class="[item.disable ? 'disabled' : '']"
                >
                  <el-popover placement="top" width="500" trigger="click">
                    <div class="month-day">{{month}}月{{today}}日</div>
                    <el-table
                      :data="gridData"
                      :header-cell-style="{
                             'color': '#393939',
                                 'font-size': '14px'
                                            }"
                    >
                      <el-table-column width="150" label="日期" header-align="center" align="center">
                        <template slot-scope="scope">
                          <span
                            :class="[DaytimeFn(scope.row.arrangeDate) >0 ||timeFn(Nowyear+'-'+Nowmonth+'-' + D +scope.row.startInterval+':' + '00') >= -4 && DaytimeFn(scope.row.arrangeDate)>=0?'date-time-active':'']"
                          >{{scope.row.startInterval}}-{{scope.row.endInterval}}</span>
                        </template>
                      </el-table-column>
                      <el-table-column width="60" label="最少" header-align="center" align="center">
                        <template slot-scope="scope">
                          <span
                            :class="[DaytimeFn(scope.row.arrangeDate) >0 ||timeFn(Nowyear+'-'+Nowmonth+'-' + D +scope.row.startInterval+':' + '00') >= -4 && DaytimeFn(scope.row.arrangeDate)>=0?'date-time-active':'']"
                          >{{scope.row.miniNum}}</span>
                        </template>
                      </el-table-column>
                      <el-table-column width="60" label="饱和" header-align="center" align="center">
                        <template slot-scope="scope">
                          <span
                            :class="[DaytimeFn(scope.row.arrangeDate) >0 ||timeFn(Nowyear+'-'+Nowmonth+'-' + D +scope.row.startInterval+':' + '00') >= -4 && DaytimeFn(scope.row.arrangeDate)>=0?'date-time-active':'']"
                          >{{scope.row.maxNum}}</span>
                        </template>
                      </el-table-column>
                      <!-- {{NowHours}} -->
                      <el-table-column width="60" label="已选" header-align="center" align="center">
                        <template slot-scope="scope">
                          <span
                            :class="[DaytimeFn(scope.row.arrangeDate) >0 ||timeFn(Nowyear+'-'+Nowmonth+'-' + D +scope.row.startInterval+':' + '00') >= -4 && DaytimeFn(scope.row.arrangeDate)>=0?'date-time-active':'']"
                          >{{scope.row.haveNum}}</span>
                        </template>
                      </el-table-column>
                      <el-table-column
                        width="130"
                        property
                        label
                        header-align="center"
                        align="center"
                      >
                        <template slot-scope="scope">
                          <div
                            :class="[DaytimeFn(scope.row.arrangeDate) >0 ||timeFn(Nowyear+'-'+Nowmonth+'-' + D +scope.row.startInterval+':' + '00') >= -4 && DaytimeFn(scope.row.arrangeDate)>=0?'date-btn-active':'Buttonhole']"
                            @click="isShow(1,scope.row.id,timeFn(Nowyear+'-'+Nowmonth+'-' + D +scope.row.startInterval+':' + '00'),DaytimeFn(scope.row.arrangeDate))"
                          >排班</div>
                        </template>
                      </el-table-column>
                    </el-table>
                    <div
                      slot="reference"
                      @click="classSet(index,item.date,item.month,item.dateList.intervalList)"
                      :class="[item.pastDay ? 'psatchecked' : '']"
                      class="day-setting"
                    >
                      <!-- {{FindCalendarList}} -->
                      <div class="date-day">{{ item.date }}</div>
                      <div class="people" v-if="item.dateList && item.dateList.intervalList && item.dateList.isOpen ==0">
                        <div class="people-items">
                          <div style="color:#999999" class="people-items-text">不开放</div>
                        </div>
                      </div>
                      <div class="people" v-if="item.dateList && item.dateList.intervalList && item.dateList.isOpen ==1">
                        <div class="people-items">
                          <div class="people-items-num">{{item.dateList.miniNum}}</div>
                          <div class="people-items-text">最少</div>
                        </div>
                        <div class="people-items">
                          <div class="people-items-num">{{item.dateList.maxNum}}</div>
                          <div class="people-items-text">饱和</div>
                        </div>
                        <div class="people-items">
                          <div
                            class="people-items-num"
                            :class="[item.dateList.haveNum < item.dateList.miniNum?'num-red':'']"
                          >{{item.dateList.haveNum}}</div>
                          <div class="people-items-text">已选</div>
                        </div>
                      </div>
                    </div>
                  </el-popover>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-col>
      <!--排班设置-->
      <el-col :span="17" class="main" v-if="modelindex == 1">
        <el-row :gutter="20">
          <el-col :span="18" class="month" :offset="4">
            <span class="tiplog">{{currentDateStr }}排班设置</span>
            <div
              v-if="this.D <=24"
              class="model-btn-items-save model-grdeen"
              style="float:right; cursor: pointer;  "
              @click="saveOpenCloseDAys()"
            >保存</div>
            <div v-if="this.D >24" class="tiplogPb" style="float:right; cursor: pointer;  ">
              请在每月
              <span style="color:#52CC60;">24号</span>之前设置排班,当前时间已关闭！
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="20" :offset="2">
            <div class="date">
              <div class="calendar-week">
                <div class="week-item" v-for="item of weekList" :key="item">
                  <span :class="[item == '六' || item == '日'?'grayRed':'']">{{item}}</span>
                </div>
              </div>
              <div
                class="calendar-inner"
                v-if="DutyTemplateListInfo.dayList && DutyTemplateListInfo.dayList.length>0"
              >
                <div
                  class="calendar-item"
                  v-for="(item, index) of setCalendarList"
                  :key="index"
                  :class="[item.disable ? 'disabled' : '']"
                >
                  <el-popover placement="bottom" width="108" trigger="click">
                    <div class="date-set" v-if="!item.disable">
                      <div @click="UnOrWaitOpen(item,1,index)">待开放</div>
                      <div @click="UnOrWaitOpen(item,2,index)">不开放</div>
                    </div>
                    <div class="date-set" v-if="item.disable">当前时段不可操作！</div>
                    <div
                      slot="reference"
                      @click="settingClick(index)"
                      :class="[item.status ? 'checked' : '']"
                      class="day-setting"
                    >
                      <div class="date-day-set-num">{{ item.date }}</div>
                      <div>
                        <div class="date-day-set" v-if="item.dateList.isOpen == 1">待开放</div>
                        <div
                          class="date-day-set"
                          style="color:#FF6465"
                          v-if="item.dateList.isOpen == 0"
                        >不开放</div>
                      </div>
                    </div>
                  </el-popover>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-col>
      <!-- 下个月排班实施动态 -->
      <NextMonthList v-if="modelindex == 0 && NextOrNewMonthStatus.NextOrNewMonthStatus == true"></NextMonthList>
    </el-row>
    <!-- 添加移除老师弹框 -->
    <div class="showModel" @click="allShowModel(3)" v-if="isApporTeacher"></div>
    <div
      class="model min-widthScrol"
      style="width:40%; top:10%;min-width: 300px;"
      v-if="isApporTeacher"
    >
      <div class="model-text">
        <div class="model-text-head">
          <div class="teach-block">
            <div class="Daylog">
              <span>{{month}}月{{today}}日</span>
              <!-- {{FindHaveTeacherList}} -->
              <span>{{FindHaveTeacherList.arrangeDetail.startInterval}}-{{FindHaveTeacherList.arrangeDetail.endInterval}}</span>
            </div>
            <div class="Dayteach-Allot">
              <input
                type="text"
                placeholder="请输入老师名字"
                v-model="HaveTeacherList.teacherName"
                class="Dayinput-with-Allot"
              />
              <span @click="SearchFindHaveTeacher()" class="DaySeachIcon el-icon-search"></span>
            </div>
            <div>
              <span class="tr-slogn">最少:{{FindHaveTeacherList.arrangeDetail.miniNum}}</span>
              <span class="tr-slogn">已选:{{FindHaveTeacherList.arrangeDetail.haveNum}}</span>
              <span class="tr-slogn">饱和:{{FindHaveTeacherList.arrangeDetail.maxNum}}</span>
            </div>
          </div>
          <div>
            <img src="../../assets/img/del@2x.png" alt @click="allShowModel(3)" />
          </div>
        </div>
        <div>
          <div class="tr-set table-heads2">
            <div class="tr-secon1">老师</div>
            <div class="tr-secon1">科目</div>
            <div class="tr-secon1">出勤率</div>
            <div class="tr-secon1">在岗率</div>
            <div class="tr-secon1" style="width:30%;">当月已选时段</div>
          </div>
          <div class="abbTeachers" @click="showAddTeacherModel">
            <span class="addLogicon">+</span> 添加老师
          </div>
          <div
            class="scrollBox"
            v-if="FindHaveTeacherList.list && FindHaveTeacherList.list.length >0"
          >
            <div
              class="tr-set"
              :class="{BgcColor:index%2 !== 1}"
              v-for="(item, index) of FindHaveTeacherList.list"
              :key="index"
            >
              <div class="tr-secon">
                <img :src="BASE_URL + item.photo" alt class="table-img" v-if="item.photo" />
                <img src="../../assets/img/attt.png" alt v-if="item.photo ==''" class="table-img" />
              </div>
              <div class="tr-secon tr-sw200">{{item.teacherName}}</div>
              <div class="tr-secon tr-sw100">{{item.subject}}</div>
              <div class="tr-secon tr-sw100">{{item.attendanceRatio}}%</div>
              <div class="tr-secon tr-sw100">{{item.dutyRatio}}%</div>
              <div class="tr-secon tr-sw100" style="color:#7297FF">{{item.haveCount }}</div>
              <div v-if="item.isEdit==1" class="Buttonhole" @click="detailTeacherTeam(item)">移除</div>
              <div v-if="item.isEdit==0" class="NoButtonhole"></div>
            </div>
          </div>
          <div
            class="scrollBox"
            v-if="FindHaveTeacherList.list && FindHaveTeacherList.list.length <=0"
          >
            <div class="tr-set">暂无可移除老师！</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 添加老师弹框 -->
    <div class="showModel" @click="allShowModel(4)" v-if="AddTeacherModel"></div>
    <div class="model" style="width:40%; top:10%;" v-if="AddTeacherModel">
      <div class="model-text">
        <div class="model-text-head">
          <div class="selectTeacher">选择老师</div>
          <div class="teach-block1">
            <div class="Dayteach-Allot1">
              <input
                type="text"
                placeholder="请输入老师名字"
                v-model="NoHaveTeacherList.teacherName"
                class="Dayinput-with-Allot"
              />
              <span @click="SearchNoHaveTeacher()" class="DaySeachIcon el-icon-search"></span>
            </div>
            <div class="tiplogslogn">
              <span class="tr-slogn1">最少:{{FindNoHaveTeacherList.arrangeDetail.miniNum}}</span>
              <span class="tr-slogn1">饱和:{{FindNoHaveTeacherList.arrangeDetail.maxNum}}</span>
              <span class="tr-slogn1">已选:{{FindNoHaveTeacherList.arrangeDetail.haveNum}}</span>
            </div>
          </div>
          <div>
            <img src="../../assets/img/del@2x.png" alt @click="allShowModel(4)" />
          </div>
        </div>
        <div>
          <div class="tr-set table-heads3">
            <div class="tr-secon1">老师</div>
            <div class="tr-secon1">科目</div>
            <div class="tr-secon1">出勤率</div>
            <div class="tr-secon1">在岗率</div>
            <div class="tr-secon1" style="width:30%;">当月已选时段</div>
          </div>
          <div
            class="scrollBox"
            v-if="FindNoHaveTeacherList.list && FindNoHaveTeacherList.list.length >0"
          >
            <div
              class="tr-setMargin"
              :class="{BgcColor:index%2 !== 1}"
              v-for="(item, index) of FindNoHaveTeacherList.list"
              :key="index"
            >
              <div class="tr-secon">
                <img :src="BASE_URL + item.photo" alt class="table-img" v-if="item.photo" />
                <img src="../../assets/img/attt.png" alt v-if="item.photo ==''" class="table-img" />
              </div>
              <div class="tr-secon tr-sw100">{{item.teacherName}}</div>
              <div class="tr-secon tr-sw100">{{item.subject}}</div>
              <div class="tr-secon tr-sw100">{{item.attendanceRatio}}%</div>
              <div class="tr-secon tr-sw100">{{item.dutyRatio}}%</div>
              <div class="tr-secon tr-sw100" style="color:#7297FF">{{item.haveCount}}</div>
              <div class="Selectradius">
                <img
                  @click="DetetaiOrAddeacherTeam(item,2)"
                  v-if="teacherIds.indexOf(item.teacherId) == -1"
                  class="Littleicon"
                  src="../../assets/img/normal.png"
                />
                <img
                  @click="DetetaiOrAddeacherTeam(item,1)"
                  v-if="teacherIds.indexOf(item.teacherId) != -1"
                  class="Littleicon"
                  src="../../assets/img/correct -hint.png"
                />
              </div>
            </div>
          </div>
          <div
            class="scrollBox"
            v-if="FindNoHaveTeacherList.list && FindNoHaveTeacherList.list.length <=0"
          >
            <span>暂无可添加老师！</span>
          </div>
          <div class="btsnius">
            <div @click="GetAddArrangeByTeacherStatus()" class="yesBtn">确定</div>
            <div @click="allShowModel(4)" class="closeBtn">取消</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 移除弹框 -->
    <div class="showModel" @click="allShowModel(1)" v-if="hiddenModel"></div>
    <div class="model" style="width:30%; top:30%;" v-if="hiddenModel">
      <div class="model-text">
        <div class="model-text-items">
          <div>
            <img
              src="../../assets/img/del@2x.png"
              alt
              @click="allShowModel(1)"
              class="model-text-items-close"
            />
          </div>
          <div>是否确定将{{this.DetailteacherName}}老师移除？</div>
        </div>
        <div class="model-btn">
          <div class="model-btn-items main-gay" @click="DetetaiApplyOperate()">是</div>
          <div class="model-btn-items model-grdeen" @click="allShowModel(1)">否</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
import NextMonthList from "@/components/NextMonthList.vue";
import { IMG_BASE_URL, APPOR_BASE_URL } from "@/config";
import { Message } from "element-ui";
export default {
  components: { NextMonthList },
  name: "actvResolveLabel",
  props: {},
  data() {
    return {
      SettingDaysLocal: localStorage.getItem("SettingDaysLocal"), //本地缓存。开放关闭日期
      Nowyear: new Date().getFullYear(),
      D: new Date().getDate() + " ",
      Nowmonth: new Date().getMonth() + 1,
      NowHours: new Date().getHours(),
      isSelected: false,
      BASE_URL: IMG_BASE_URL,
      selMonth: "",
      ShowNextMonthList: false,
      hiddenModel: false,
      isPigai: false,
      isApporTeacher: false,
      gardeListDown: false,
      gardeListDownage: false,
      AddTeacherModel: false,
      modelindex: 0,
      selecttitlepag: "批改老师",
      selecttitleage: "语文",
      current: {}, // 当前时间
      weekList: ["一", "二", "三", "四", "五", "六", "日"],
      calendarList: [], // 排班列表
      setCalendarList: [], // 排班设置列表
      shareDate: new Date(), // 享元模式，用来做优化的
      month: "",
      today: "",
      teacherIds: [],
      detetaiTeacherid: [],
      DetailteacherName: "",
      gridData: [],
      SettingDays: [],
      setrefultList: [],
      filters: {
        actvNm: "",
        actvCrtUserId: "",
        actvType: "",
        actvSmallType: "",
        OptionsValue: 8,
        gradesValue: "语文",
        // 排序
        MaxtimeValue: "",
        oneMonth: "",
        pageNo: 1,
        pageSize: 10,
        count: 0,
        orderField: "",
        orderAD: ""
      },
      levelList: ["最少", "饱和", "已选"],
      ItemList: [
        {
          text: "排班表"
        },
        {
          text: "排班设置"
        }
      ],
      options: [
        {
          value: "0",
          label: "匹配知识点",
          str: "13"
        },
        {
          value: "1",
          label: "批改老师",
          str: "8"
        }
      ],
      grades: [
        {
          value: "0",
          label: "语文",
          str: "语文"
        },
        {
          value: "1",
          label: "数学",
          str: "数学"
        },
        {
          value: "2",
          label: "英语",
          str: "英语"
        }
      ],
      allotList: {
        pageNo: 1,
        pageSize: 10,
        count: 0,
        grade: "",
        subject: "",
        homeworkId: "",
        TeacherType: ""
      },
      HaveTeacherList: {
        Teacherid: "",
        teacherName: ""
      },
      NoHaveTeacherList: {
        teacherName: ""
      }
    };
  },
  created() {
    this.GetFindCalendarListInfo();
    this.GetDutyTemplateListInfo();
  },
  watch: {
    SaveSysTeacherDutyStatus(val, oldVal) {
      //保存排班设置成功的watch监听回调
      this.GetDutyTemplateListInfo();
    },
    DutyTemplateListSTUS(val, oldVal) {
      // debugger
      //排班列表请求成功的watch监听回调
      this.init();
    },
    DeleteArrangeByTeacher(val, oldVal) {
      // debugger
      //保存排班设置成功的watch监听回调
      this.GetFindCalendarListInfo();
    },
    AddArrangeByTeacherStatus(val, oldVal) {
      // debugger
      //保存排班设置成功的watch监听回调
      this.GetFindCalendarListInfo();
    },
    TeacherThisMonthDutyREfultInfo(val, oldVal) {
      var that = this;
      if (that.DutyTemplateListInfo && that.DutyTemplateListInfo.dayList) {
        for (let t = 0; t < that.DutyTemplateListInfo.dayList.length; t++) {
          if (that.DutyTemplateListInfo.dayList[t].isOpen == 0) {
            this.SettingDays.push(that.DutyTemplateListInfo.dayList[t].day);
          }
        }
      }
    },
    NextOrNewMonthStatus(val, oldVal) {
      // debugger
      //排班列表请求成功的watch监听回调
      this.GetFindCalendarListInfo();
    }
  },
  // ,'homeworkRecoveryList'
  computed: {
    ...mapGetters([
      "FindCalendarList",
      "FindCalendarList",
      "FindHaveTeacherList",
      "FindNoHaveTeacherList",
      "AddArrangeByTeacherStatus",
      "SaveSysTeacherDutyStatus",
      "DutyTemplateListInfo",
      "DutyTemplateListSTUS",
      "TeacherThisMonthDutyREfultInfo",
      "DeleteArrangeByTeacher",
      "NextOrNewMonthStatus"
    ]),
    // 显示当前时间
    currentDateStr() {
      let { year, month } = this.current;
      return `${this.pad(month + 1)}月`;
    }
  },
  methods: {
    ...mapActions(["setUser"]),
    // 表格头部样式
    tableheaderClassName({ row, rowIndex }) {
      return "table-head-th";
    },
    // 切换下月当月排班表
    shoeNextOrlastMOntlist(str) {
      if (str == 1) {
        this.$store.dispatch("NextOrNewMonthAction", {
          NextOrNewMonthStatus: true
        });
      }
    },
    //弹框
    isShow(str, id, timeFnd, DaytimeFn) {
      let _this = this;
      if (str == 1) {
        if ((timeFnd < -4 && DaytimeFn <= 0) || DaytimeFn < 0) {
          _this.isApporTeacher = true;
          this.HaveTeacherList.teacherName = "";
          this.HaveTeacherList.Teacherid = id;
          this.GetFindHaveTeacherListInfo();
        } else {
          Message.error("请提前4小时开始排班,当前时间已关闭不可操作!");
        }
      }
    },
    // 添加老师勾选数组
    async DetetaiOrAddeacherTeam(item, type) {
      if (type == 1) {
        const index = this.teacherIds.indexOf(item.teacherId);
        if (index > -1) {
          this.teacherIds.splice(index, 1);
        }
        //   item.dateList.isOpen = 1
        // this.$set(this.setCalendarList.dateList, Setindex, item);
      }
      if (type == 2) {
        const index = this.teacherIds.indexOf(item.teacherId);
        if (index == -1) {
          this.teacherIds.push(item.teacherId);
        }
        //   item.dateList.isOpen = 0
        // this.$set(this.setCalendarList.dateList, Setindex, item);
      }
    },
    showAddTeacherModel() {
      this.teacherIds = [];
      this.NoHaveTeacherList.teacherName = "";
      this.isApporTeacher = false;
      this.AddTeacherModel = true;
      this.GetFindNoHaveTeacherListInfo();
    },
    // 时段移除老师
    detailTeacherTeam(item) {
      this.DetailteacherName = item.teacherName;
      this.isApporTeacher = false;
      this.hiddenModel = true;
      this.detetaiTeacherid = item.teacherId;
    },
    DetetaiApplyOperate() {
      this.hiddenModel = false;
      this.$store.dispatch("GetDeleteArrangeByTeacher", {
        id: this.HaveTeacherList.Teacherid,
        teacherId: this.detetaiTeacherid
      });
    },
    //关闭弹框
    allShowModel(str) {
      let _this = this;
      if (str == 1) {
        _this.hiddenModel = false;
        _this.isApporTeacher = true;
      } else if (str == 2) {
        _this.isPigai = false;
      } else if (str == 3) {
        this.HaveTeacherList.teacherName = "";
        _this.isApporTeacher = false;
      } else if (str == 4) {
        this.teacherIds = [];
        _this.AddTeacherModel = false;
        _this.isApporTeacher = true;
      } else if (str == 5) {
        _this.NoAllotManagerModel = false;
      }
    },
    timeFn(d1) {
      //di作为一个变量传进来
      //如果时间格式是正确的，那下面这一步转化时间格式就可以不用了
      var dateBegin = new Date(d1.replace(/-/g, "/")); //将-转化为/，使用new Date
      var dateEnd = new Date(); //获取当前时间
      var dateDiff = dateEnd.getTime() - dateBegin.getTime(); //时间差的毫秒数
      var dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000)); //计算出相差天数
      var leave1 = dateDiff % (24 * 3600 * 1000); //计算天数后剩余的毫秒数
      var hours = Math.floor(leave1 / (3600 * 1000)); //计算出小时数
      //计算相差分钟数
      var leave2 = leave1 % (3600 * 1000); //计算小时数后剩余的毫秒数
      var minutes = Math.floor(leave2 / (60 * 1000)); //计算相差分钟数
      //计算相差秒数
      var leave3 = leave2 % (60 * 1000); //计算分钟数后剩余的毫秒数
      var seconds = Math.round(leave3 / 1000);
      return hours;
    },
    DaytimeFn(d1) {
      //di作为一个变量传进来
      //如果时间格式是正确的，那下面这一步转化时间格式就可以不用了
      var dateBegin = new Date(d1.replace(/-/g, "/")); //将-转化为/，使用new Date
      var dateEnd = new Date(); //获取当前时间
      var dateDiff = dateEnd.getTime() - dateBegin.getTime(); //时间差的毫秒数
      var dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000)); //计算出相差天数
      var leave1 = dateDiff % (24 * 3600 * 1000); //计算天数后剩余的毫秒数
      var hours = Math.floor(leave1 / (3600 * 1000)); //计算出小时数
      //计算相差分钟数
      var leave2 = leave1 % (3600 * 1000); //计算小时数后剩余的毫秒数
      var minutes = Math.floor(leave2 / (60 * 1000)); //计算相差分钟数
      //计算相差秒数
      var leave3 = leave2 % (60 * 1000); //计算分钟数后剩余的毫秒数
      var seconds = Math.round(leave3 / 1000);
      // return hours
      return dayDiff;
    },
    // 获取校区管理员排班表
    async GetFindCalendarListInfo() {
      this.$store.dispatch("GetFindCalendarList", {
        type: this.filters.OptionsValue,
        subject: this.filters.gradesValue,
        month: ""
      });
    },
    // 选中时段老师列表
    async GetFindHaveTeacherListInfo() {
      this.$store.dispatch("GetFindHaveTeacherList", {
        id: this.HaveTeacherList.Teacherid,
        teacherName: this.HaveTeacherList.teacherName
      });
    },
    // 未选时段老师列表(添加老师)
    async GetFindNoHaveTeacherListInfo() {
      this.$store.dispatch("GetFindNoHaveTeacherList", {
        id: this.HaveTeacherList.Teacherid,
        teacherName: this.NoHaveTeacherList.teacherName
      });
    },
    // 时段添加老师
    async GetAddArrangeByTeacherStatus() {
      // this.teacherIds = []
      this.AddTeacherModel = false;
      this.$store.dispatch("GetAddArrangeByTeacher", {
        id: this.HaveTeacherList.Teacherid,
        teacherIds: this.teacherIds
      });
    },
    // 保存排班设置
    async saveOpenCloseDAys() {
      this.$store.dispatch("GetSaveSysTeacherDuty", {
        days: this.SettingDays
      });
    },
    async UnOrWaitOpen(item, type, Setindex) {
      if (type == 1) {
        const index = this.SettingDays.indexOf(item.value);
        if (index > -1) {
          this.SettingDays.splice(index, 1);
        }
        item.dateList.isOpen = 1;
        this.$set(this.setCalendarList.dateList, Setindex, item);
      }
      if (type == 2) {
        const index = this.SettingDays.indexOf(item.value);
        if (index == -1) {
          this.SettingDays.push(item.value);
        }
        item.dateList.isOpen = 0;
        this.$set(this.setCalendarList.dateList, Setindex, item);
      }
    },
    // 排班设置返回接口
    async GetDutyTemplateListInfo() {
      this.SettingDays = [];
      this.$store.dispatch("GetDutyTemplateList", {});
    },
    SearchNoHaveTeacher() {
      this.GetFindNoHaveTeacherListInfo();
    },
    SearchFindHaveTeacher() {
      this.GetFindHaveTeacherListInfo();
    },
    selectStyle() {
      this.gardeListDown = true;
    },
    outStyle() {
      this.gardeListDown = false;
    },
    selectStyle1() {
      this.gardeListDownage = true;
    },
    outStyle1() {
      this.gardeListDownage = false;
    },
    selectTitle(k) {
      this.modelindex = k;
      if (k == 0) {
        if (this.Nowmonth !== this.current.month + 1) {
          this.prevMonth();
        }
        this.GetFindCalendarListInfo();
      }
      if (k == 1) {
        if (this.Nowmonth == this.current.month + 1) {
          this.nextMonth();
        }
        this.SettingDays = [];
        this.GetDutyTemplateListInfo();
      }
    },
    selectTip(item) {
      this.filters.OptionsValue = item.str;
      this.selecttitlepag = item.label;
      this.gardeListDown = false;
      this.GetFindCalendarListInfo();
    },
    selectTipage(item) {
      this.filters.gradesValue = item.str;
      this.selecttitleage = item.label;
      this.gardeListDownage = false;
      this.GetFindCalendarListInfo();
    },
    // 分页
    pageChange(val) {
      this.allotList.pageNo = val;
      this.TeacherAllot();
    },
    pageChange1(val) {
      this.filters.pageNo = val;
      this.HomeworkRecoveryList();
    },
    changeDateSlot(dateSlot) {
      if (dateSlot) {
        this.filters.startDate = dateSlot[0];
        this.filters.endDate = dateSlot[1];
      } else {
        this.filters.startDate = null;
        this.filters.endDate = null;
      }
    },
    actvTypeChange(typeList) {
      switch (typeList.length) {
        case 1:
          this.filters.actvType = typeList[0];
          this.filters.actvSmallType = null;
          break;
        case 2:
          this.filters.actvType = null;
          this.filters.actvSmallType = typeList[1];
          break;
        default:
          this.filters.actvType = null;
          this.filters.actvSmallType = null;
          break;
      }
    },
    handleSizeChange(val) {
      this.allotList.pageSize = val;
      this.TeacherAllot();
    },
    handleSizeChange1(val) {
      this.filters.pageSize = val;
      this.HomeworkRecoveryList();
    },
    // 排序
    sortChange(sort) {
      this.filters.orderField = sort.prop;
      this.filters.orderAD = sort.order != null ? sort.order : "";
      this.itemListReshow();
    },
    clearSearch() {
      this.filters.actvNm = null;
      this.filters.actvCrtUserId = null;
      this.filters.actvType = null;
      this.filters.actvSmallType = null;
      this.filtersActvType = [];
      this.createDateSlot = null;
    },
    // 日期处理
    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,
          status: false,
          pastDay: date < today && curMonth == month,
          value: this.stringify(year, curMonth, date)
        });
        // 排班设置
        setList.push({
          year: year,
          month: curMonth,
          date: date,
          status: false,
          disable: curMonth !== month,
          value: this.stringify(year, curMonth, date)
        });
        begin += oneDayMS;
      }
      var that = this;
      if (that.FindCalendarList && that.FindCalendarList.list) {
        for (let i = 0; i < list.length; i++) {
          if (!list[i].disable) {
            const dateValue = list[i].value;
            for (let t = 0; t < that.FindCalendarList.list.length; t++) {
              if (dateValue == that.FindCalendarList.list[t].arrangeDate) {
                list[i].dateList = that.FindCalendarList.list[t];
                console.log(list[i].dateList);
              }
            }
          } else {
            list[i].dateList = {};
          }
        }
      }
      if (that.DutyTemplateListInfo && that.DutyTemplateListInfo.dayList) {
        for (let i = 0; i < setList.length; i++) {
          if (!setList[i].disable) {
            const dateValue = setList[i].value;
            for (let t = 0; t < that.DutyTemplateListInfo.dayList.length; t++) {
              if (dateValue == that.DutyTemplateListInfo.dayList[t].day) {
                setList[i].dateList = that.DutyTemplateListInfo.dayList[t];
              }
            }
          } else {
            setList[i].dateList = {};
          }
        }
      }

      this.calendarList = list;
      this.setCalendarList = setList;
    },
    // 排班点击
    classSet(k, d, m, intervalList) {
      // console.log(k, d, m);
      this.month = m + 1;
      this.today = d;
      for (var i in this.calendarList) {
        this.calendarList[i].status = false;
      }
      this.calendarList[k].status = !this.calendarList[k].status;
      this.gridData = intervalList;
    },
    // 排班设置点击
    settingClick(k) {
      for (var i in this.setCalendarList) {
        this.setCalendarList[i].status = false;
      }
      this.setCalendarList[k].status = !this.setCalendarList[k].status;
    }
  },
  mounted() {
    // debugger
    sessionStorage.setItem("tabIndex", 5);
    this.$store.dispatch("NextOrNewMonthAction", {
      NextOrNewMonthStatus: false
    });
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.main {
  background-color: #fff;
  margin-top: 16px;
  padding: 0 !important;
  border: 1px solid #e1e1e1;
  min-height: 980px;
}

el-table {
  color: #999999;
  font-size: 18px;
}
.main-items {
  color: #393939;
  text-align: center;
  line-height: 80px;
}
.aside {
  background-color: #fff;
  margin-top: 16px;
  margin-right: 16px;
  padding: 0;
  min-height: 880px;
}
.selectBox {
  position: relative;
  float: left;
  display: inline-block;
  margin-top: 57px;
}
.Ageclass {
  display: inline-block;
  height: 40px;
  width: 160px;
  background-color: #f1f2f4;
  line-height: 40px;
  font-size: 16px;
  cursor: pointer;
}
.active {
  background-color: #52cc60 !important;
  color: #fff !important;
}
.table-aside {
  color: #666666;
  font-size: 18px;
  text-align: center;
  line-height: 60px;
  cursor: pointer;
}
el-table {
  color: #999999;
  font-size: 18px;
}

.input-with-select .el-input-group__prepend {
  background-color: #fff;
}

.showModel {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #000000;
  opacity: 0.2;
  overflow: hidden;
  z-index: 3000;
  color: #fff;
}
.model {
  z-index: 10000;
  width: 60%;
  height: auto;
  position: fixed;
  top: 15%;
  left: 30%;
  margin: auto;
  padding: 15px;
  background: #fff;
  border-radius: 10px;
  text-align: center;
}

.model-text {
  background: rgba(255, 255, 255, 1);
  border-radius: 10px;
}

.model-items-left {
  width: 100%;
  color: #393939;
  font-size: 24px;
}
.model-items-left-top {
  display: flex;
  justify-content: space-between;
}

.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;
}

.el-table .table-head-th {
  background-color: #f6f7fb;
  font-size: 16px !important;
  color: #393939;
}
.month {
  color: #393939;
  font-size: 30px;
  margin-top: 57px;
}
.model-manager {
  display: flex;
  justify-content: space-between;
  margin: 30px;
  color: #393939;
  font-size: 24px;
}
.allocation-items {
  width: 45%;
  display: inline-block;
  margin-right: 20px;
  margin-bottom: 30px;
}
.allocation {
  color: #52cc60;
  font-size: 20px;
  text-decoration: underline;
  cursor: pointer;
}
.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #52cc60 !important;
  color: #fff;
}
.pages {
  margin: 15px 0;
}
.age-tip {
  width: 80%;
  height: 40px;
  color: #747070;
  font-size: 12px;
}
.class-download {
  background-color: #fff;
  width: 160px;
  z-index: 999999;
  position: absolute;
  border: 1px solid #e0dddd;
  border-radius: 5px;
  top: 58px;
}
.class-download ul li {
  height: 40px;
  line-height: 40px;
  text-align: center;
  cursor: pointer;
  color: #b6b6b6;
}
.class-download ul li:hover {
  background-color: #52cc60;
  color: #ffff;
}
.date {
  margin-top: 68px;
}
.calendar-week {
  border: 1px solid #e5e5e5;
  text-align: center;
  border-right: none;
  display: flex;
}
.week-item {
  display: inline-block;
  background: #f9f9f9;
  width: 14.28%;
  border-right: 1px solid #e5e5e5;
}
.calendar-inner {
  border-left: 1px solid #e5e5e5;
}
.calendar-item {
  cursor: pointer;
  float: left;
  width: 14.28%;
  height: 130px;
  line-height: 130px;
  text-align: center;
  border-bottom: 1px solid #e5e5e5;
  border-right: 1px solid #e5e5e5;
  border-left: 1px solid #e5e5e5;
}
.day-setting {
  height: 130px;
  line-height: 130px;
}
.calendar-item.disabled {
  color: #fff;
}
.checked {
  background: #f6f7fb;
}
.psatchecked {
  color: rgba(0, 0, 0, 0.3);
  opacity: 0.5;
}
.date-day {
  font-size: 16px;
  line-height: 60px;
  color: #aaa;
}
.tr-setMargin {
  margin-top: 10px;
  height: 50px;
  line-height: 50px;
}
.BgcColor {
  background-color: #f7fbfc;
}
.people {
  display: flex;
  justify-content: space-around;
  font-size: 14px;
}
.people-items {
  display: inline-block;
  line-height: 70px;
  margin-top: 10px;
}
.people-items-num {
  line-height: 15px;
  padding: 3px 8px;
}
.people-items-text {
  line-height: 30px;
}
.num-red {
  background: rgba(255, 100, 101, 1);
  border-radius: 9px;
  color: #fff;
}
.month-day {
  margin: 10px 30px;
  color: #393939;
  font-size: 20px;
}
.date-set {
  text-align: center;
  width: 100%;
  cursor: pointer;
}
.date-set > div {
  height: 30px;
  line-height: 30px;
  /* width: 100%; */
  color: #393939;
  font-size: 16px;
  margin: 25px 0px;
  /* background-color: #52cc60; */
}
.date-set > div:hover {
  background-color: #52cc60;
  color: #fff;
  /* font-size: 25px; */
}
.date-day-set {
  line-height: 40px;
  color: #393939;
  font-size: 16px;
}
.date-day-set-num {
  font-size: 16px;
  line-height: 70px;
  color: #aaa;
}
.date-red {
  color: #ff6465;
}
.date-time-active {
  color: #e5e5e5;
}
.date-btn-active {
  background: rgba(114, 151, 255, 0.3);
  border: none;
  cursor: pointer;
  margin-top: 10px;
  width: 80px;
  height: 30px;
  line-height: 30px;
  border-radius: 15px;
  margin: 0 auto;
  color: #fff;
}
.abbTeachers {
  width: 100%;
  height: 40px;
  background-color: #f6f7fb;
  border-radius: 20px;
  text-align: left;
  line-height: 30px;
  font-size: 14px;
  padding: 0 20px;
  margin: 10px 0px;
  cursor: pointer;
}
.tiplogPb {
  font-size: 14px;
  color: #7b809d;
}
.addLogicon {
  font-size: 30px;
  color: #1989fa;
  margin: 0px 20px;
}
.btsnius {
  margin-top: 40px;
  width: 100%;
  height: 60px;
}
.yesBtn {
  margin-right: 30px;
  height: 40px;
  width: 100px;
  background-color: #52cc60;
  border-radius: 10px;
  color: #fff;
  line-height: 40px;
  text-align: center;
  display: inline-block;
  cursor: pointer;
}
.closeBtn {
  height: 40px;
  width: 100px;
  background-color: #fff;
  border-radius: 10px;
  color: #52cc60;
  line-height: 40px;
  text-align: center;
  display: inline-block;
  border: 1px solid #52cc60;
  cursor: pointer;
}
.grayRed {
  color: red;
}
.scrollBox {
  height: 400px;
  overflow: auto;
  padding: 0 15px;
}
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-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; /*滚动条的背景颜色*/
}
.Buttonhole {
  cursor: pointer;
  margin-top: 10px;
  width: 80px;
  height: 30px;
  line-height: 30px;
  border-radius: 15px;
  background-color: #7297ff;
  color: #fff;
  display: inline-block;
}
.NoButtonhole {
  cursor: pointer;
  margin-top: 10px;
  width: 80px;
  height: 30px;
  line-height: 30px;
  border-radius: 15px;
  color: #fff;
  display: inline-block;
}
.Selectradius {
  cursor: pointer;
  display: inline-block;
}
.table-img {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  /* margin-left: 14px; */
  cursor: pointer;
}
.Daylog {
  font-size: 16px;
  color: #7297ff;
  height: 40px;
  display: inline-block;
}
.model-text-head {
  padding: 0 !important;
  display: flex;
  color: #393939;
  font-size: 24px;
  justify-content: space-between;
}
.table-heads1 {
  margin-left: 150px !important;
  width: 350px;
  font-weight: 700;
  color: #393939 !important;
  font-size: 18px;
  text-align: center;
  display: flex;
  justify-content: space-around;
}
.table-heads2 {
  background-color: #fff;
  margin-left: 110px !important;
  width: 80%;
  font-weight: 700;
  color: #393939 !important;
  font-size: 18px;
  text-align: center;
  display: flex;
  justify-content: space-around;
}
.table-heads3 {
  background-color: #fff;
  margin-left: 160px !important;
  width: 70%;
  font-weight: 700;
  color: #393939 !important;
  font-size: 18px;
  text-align: center;
  display: flex;
  justify-content: space-around;
}
.table-heads1 > div {
  width: 30%;
}
.tr-secon1 {
  font-size: 12px;
  text-align: center;
  word-wrap: break-word;
  width: 18%;
  line-height: 50px;
}
.tr-secon {
  font-size: 12px;
  text-align: center;
  word-wrap: break-word;
  width: 60px;
  line-height: 20px;
  display: inline-block;
}

.tr-sw100 {
  height: 40px;
  line-height: 30px;
  width: 13%;
  text-align: center;
}
.tr-sw200 {
  width: 13%;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* padding:10px;
line-height:25px; */
}
.tiplog {
  height: 100px;
  width: 200px;
  padding: 15px;
  margin: 30px;
  font-size: 25px;
  font-weight: 700;
  margin: 0 auto;
}
.Buttonhole {
  cursor: pointer;
  margin-top: 10px;
  width: 80px;
  height: 30px;
  line-height: 30px;
  border-radius: 15px;
  background-color: #7297ff;
  color: #fff;
}
.table-img {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  /* margin-left: 14px; */
  cursor: pointer;
}
.teach-block {
  display: inline-block;
}
.teach-block1 {
  display: inline-block;
  width: 100%;
}
.min-widthScrol {
  min-width: 300px;
}
.Dayteach-Allot {
  display: inline-block;
  width: 200px;
  position: relative;
  height: 30px;
  top: 5px;
  right: -15%;
}
.Dayteach-Allot1 {
  display: inline-block;
  width: 40%;
  float: left;
  position: relative;
  height: 30px;
  top: 5px;
}
.DaySeachIcon {
  position: absolute;
  font-size: 20px;
  color: #b6b6b6;
  right: 5%;
  margin-top: 5px;
  cursor: pointer;
}
.Dayinput-with-Allot {
  border: #b6b6b6;
  border-radius: 20px;
  height: 30px;
  width: 200px;
  font-size: 8px;
  color: #b6b6b6;
  text-align: left;
  line-height: 30px;
  background: #f1f2f4;
  padding: 0 10px;
  float: right;
  outline: none !important;
  box-shadow: none;
}
.tiplogslogn {
  display: inline-block;
  float: right;
  margin-top: 10px;
  margin-right: 20px;
}
.tr-slogn {
  display: inline-block;
  margin-right: 30px;
  font-size: 12px;
  text-align: left;
  float: left;
  font-weight: 700;
}
.tr-slogn1 {
  display: inline-block;
  margin-right: 10px;
  font-size: 12px;
  text-align: left;
  float: left;
  font-weight: 700;
}
.selectTeacher {
  font-size: 12px;
  text-align: left;
  font-weight: 700;
  width: 160px;
  color: #7297ff;
  margin-top: 10px;
}
.model-grdeen {
  background-color: #52cc60;
  color: #fff;
}
.model-text-items-close {
  cursor: pointer;
  position: absolute;
  top: 10px;
  right: -5px;
}
.model-text-items {
  position: relative;
  color: #000000;
  font-size: 24px;
  text-align: center;
  padding: 40px 0 50px 0;
  margin: 0 33px;
}
.model-btn {
  display: flex;
  justify-content: space-around;
  margin-bottom: 44px;
  cursor: pointer;
}
.model-btn-items-save {
  margin-top: 30px;
  width: 120px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 18px;
  border-radius: 50px;
}
.model-btn-items {
  width: 154px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 18px;
  border-radius: 4px;
}
.main-gay {
  background: rgba(246, 247, 251, 1);
  color: #7e7e7e;
}
.Littleicon {
  height: 20px;
  width: 20px;
  position: relative;
  top: 0;
}
.NextMonthList {
  float: right;
  cursor: pointer;
  margin-top: 20px;
  width: 250px;
  height: 40px;
  border-radius: 20px;
  line-height: 40px;
  background-color: #e7f3ff;
  color: #7297ff;
  font-size: 12px;
}
.IconLeftclass {
  font-size: 35px;
  cursor: pointer;
  font-weight: 700;
}
</style>