FE-V2-PC/src/views/comprehensive/personnel/patrolRecord/index.vue

<template>
  <div class="app-container patrolRecord">
    <div class="patrolRecordPage" v-show="pageType === 1">
      <div class="left-page-max-big-box">
        <el-tree
          style="margin-right:10px;"
          :data="deptOptions"
          :props="defaultProps"
          icon-class=""
          node-key="id"
          :highlight-current="true"
          default-expand-all
          :expand-on-click-node="false"
          :filter-node-method="filterNode"
          ref="tree"
          @node-click="handleNodeClick"
        />
      </div>
      <p class="center-border-p"></p>
      <div class="right-page-max-big-box">
        <div class="top-button-max-box">
          <div class="yearMonthButtonBox">
            <p @click="yearMonthSwitchButton(1)" :class="yearMonthType===1?'left-button-one':'left-button-tow'">月度</p>
            <p @click="yearMonthSwitchButton(2)" :class="yearMonthType===2?'right-button-one':'right-button-tow'">年度</p>
          </div>
          <div class="year-month-data-button-box">
            <p class="year-month-subtract-button" @click="subtractDate"><</p>
            <p class="year-month-text-p" v-show="yearMonthType===1">{{yearMonthData.year}}-{{yearMonthData.month}}</p>
            <p class="year-month-text-p" v-show="yearMonthType===2">{{yearMonthData.year}}</p>
            <p class="year-month-add-button" @click="addDate">></p>
          </div>
          <p class="return-year-month-button inquire-button-one" v-show="yearMonthType===1" @click="returnPresent">回到本月</p>
        </div>
        <div class="month-max-big-box scrollbar-box" v-if="yearMonthType === 1">
          <div class="month-week-box">
            <p class="for-week-box" v-for="item of weekList" :key="item.key">{{ item.value }}</p>
          </div>
          <div class="month-big-box">
            <div v-for="(year,index) in yearDate" v-if="year.year == yearMonthData.year && year.month == yearMonthData.month">
              <div class="for-month-max-big-box" v-for="(item,index) in year.list" :key="item.key">
                <p class="for-month-top-big-box" :class="item.disable?'for-month-top-big-box-color':''">{{item.date}}</p>
                <div class="for-month-bottom-big-box" :class="item.noSignedInCount>0?'red-backgroud-color':''"
                     v-if="!item.disable&&item.signInCount>0" @click.stop="goPage('info',item)">
                  <div class="for-month-bottom-left-min-box">
                    <p>已签到人员：{{item.signInCount}}</p>
                    <p>未签到人员：{{item.noSignedInCount}}</p>
                  </div>
                  <div class="for-month-bottom-right-min-box el-icon-arrow-right"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="year-max-big-box scrollbar-box" v-if="yearMonthType === 2">
          <div class="for-year-max-big-box" v-for="(year,index) in yearDate" :key="year.key" v-if="year.year == yearMonthData.year">
            <p class="year-name-p">{{year.month==1?'一月':(year.month===2?'二月':(year.month===3?'三月':(year.month===4?'四月':(
              year.month===5?'五月':(year.month===6?'六月':(year.month===7?'七月':(year.month===8?'八月':(year.month===9?'九月':(
              year.month===10?'十月':(year.month===11?'十一月':(year.month===12?'十二月':'')))))))))))}}</p>
            <div class="year-week-box">
              <p class="for-week-box" v-for="item of weekList" :key="item.key">{{ item.value }}</p>
            </div>
            <div class="year-big-box">
              <div class="for-year-big-box" v-for="(item,index) in year.list" :key="item.key">
                <p class="for-year-top-big-box" :class="item.disable?'for-year-top-big-box-color':''">{{item.date}}</p>
                <div class="for-year-bottom-big-box" :class="!item.disable&&item.noSignedInCount>0?'red-backgroud-color':''" v-if="item.signInCount>0&&!item.disable" @click.stop="goPage('info',item)">{{item.noSignedInCount>0?item.noSignedInCount:item.signInCount}}人</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <info-page v-if="pageType === 2" :propsData="propsData"></info-page>
  </div>
</template>

<script>
  import { getListYmd } from '@/api/laboratory/patrolRecord'
  import { getTreeList} from '@/api/evacuation3_2/index'
  import { treeselect } from "@/api/system/user_teacher";
  import infoPage from "./infoPage.vue";
  export default {
    name: 'index',
    components: {
      infoPage
    },
    data() {
      return {
        //页面状态切换
        pageType:1,
        //树状结构
        treeList:[],
        deptOptions:[],
        defaultProps: {
          children: "children",
          label: "label"
        },
        checkTreeId:null,
        //年月状态切换 1.月度  2.年度
        yearMonthType:1,
        //全选按钮状态
        allButtonType:false,
        //年月数据切换
        yearMonthData:{
          presentYear:null,
          presentMonth:null,
          presentDate:null,
          year:null,
          month:null,
        },
        //计算用日期
        shareDate: new Date(),
        newKey:0,
        weekList: [
          {
            key:"1",
            value:"周一",
          },
          {
            key:"2",
            value:"周二",
          },
          {
            key:"3",
            value:"周三",
          },
          {
            key:"4",
            value:"周四",
          },
          {
            key:"5",
            value:"周五",
          },
          {
            key:"6",
            value:"周六",
          },
          {
            key:"7",
            value:"周日",
          },
        ],
        //年日历
        yearDate:[],
        //月日历
        monthDate:[],
        //已勾选数据
        checkList:[],
        //子页面传参数据
        propsData:{},
      }
    },
    created() {
      this.getTreeselect();
    },
    mounted() {
    },
    methods: {
      /**************************************************/
      //查询值班记录列表
      getListYmd(){
        let self = this;
        let obj = {
          deptId:this.checkTreeId,
          // beginTime:this.yearDate[0].list[0].value,
          beginTime:"",
          // endTime:this.yearDate[this.yearDate.length-1].list[this.yearDate[this.yearDate.length-1].list.length-1].value,
          endTime:"",
        };
        if(this.yearMonthType == 1){
          for(let i=0;i<self.yearDate.length;i++){
            if(self.yearDate[i].year == self.yearMonthData.year &&
              self.yearDate[i].month == self.yearMonthData.month){
              obj.beginTime = self.yearDate[i].list[0].value;
              obj.endTime = self.yearDate[i].list[self.yearDate[i].list.length-1].value;
            }
          }
        }else if(this.yearMonthType == 2){
          let list = [];
          for(let i=0;i<self.yearDate.length;i++){
            if(self.yearDate[i].year == self.yearMonthData.year){
              list.push(self.yearDate[i]);
            }
          }
          obj.beginTime = list[0].list[0].value;
          obj.endTime = list[list.length-1].list[list[list.length-1].list.length-1].value;
        }
        getListYmd(obj).then(response => {
          for(let o=0;o<self.yearDate.length;o++){
            for(let x=0;x<self.yearDate[o].list.length;x++){
              let signInCount = 0;
              let noSignedInCount = 0;
              for(let i=0;i<response.data.length;i++){
                if(self.yearDate[o].list[x].value == response.data[i].dutyTime){
                  signInCount = response.data[i].signInCount
                  noSignedInCount = response.data[i].noSignedInCount
                }
              }
              self.yearDate[o].list[x].signInCount = signInCount
              self.yearDate[o].list[x].noSignedInCount = noSignedInCount
            }
          }


          // for(let i=0;i<response.data.length;i++){
          //   let year = parseInt(response.data[i].dutyTime.split('-')[0]);
          //   let month = parseInt(response.data[i].dutyTime.split('-')[1]);
          //   for(let o=0;o<self.yearDate.length;o++){
          //     if(self.yearDate[o].year == year && self.yearDate[o].month == month){
          //       for(let x=0;x<self.yearDate[o].list.length;x++){
          //         if(self.yearDate[o].list[x].value == response.data[i].dutyTime){
          //           self.yearDate[o].list[x].signInCount = response.data[i].signInCount
          //           self.yearDate[o].list[x].noSignedInCount = response.data[i].noSignedInCount
          //         }
          //       }
          //     }
          //   }
          // }
        });
      },
      //时间初始化
      initializationDate(){
        let myDate = new Date();
        let obj = {
          presentYear:myDate.getFullYear(),
          presentMonth:myDate.getMonth()+1,
          presentDate:parseInt(this.stringify(myDate.getFullYear(),myDate.getMonth(), myDate.getDate()).replace(/-/g,"")),
          year:myDate.getFullYear(),
          month:myDate.getMonth()+1,
        };
        this.$set(this,'yearMonthData',obj);
        this.$set(this,'yearDate',[]);
        this.$set(this,'checkList',[]);
        if(this.generateDate()){
          //后端数据回填
          this.getListYmd();
        }
      },
      /** 查询部门下拉树结构 */
      getTreeselect() {
        let self = this;
        treeselect({}).then(response => {
          this.deptOptions = response.data;
          this.$nextTick(function(){
            if(response.data[0]){
              self.$refs.tree.setCurrentKey(response.data[0].id);
              self.$set(self,'checkTreeId',response.data[0].id);
              self.initializationDate();
            }
          })
        });
      },
      // 筛选节点
      filterNode(value, data) {
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
      },
      // 节点单击事件
      handleNodeClick(data) {
        if(data.id != this.checkTreeId){
          console.log('123')
          this.$set(this,'checkTreeId',data.id);
          this.initializationDate();
        }
      },
      //页面切换
      goPage(type,item){
        if(type == 'index'){
          this.$set(this,'pageType',1)
        }else if(type=='info'){
          let obj = {
            checkTreeId:this.checkTreeId,
            time:item.value,
          }
          this.$set(this,'propsData',obj)
          this.$set(this,'pageType',2)
        }
      },
      //返回当前时间
      returnPresent(){
        this.$set(this.yearMonthData,'year',this.yearMonthData.presentYear);
        this.$set(this.yearMonthData,'month',this.yearMonthData.presentMonth);
        this.getListYmd();
      },
      //年或月增加
      addDate(){
        if(this.yearMonthType == 1){
          if(this.yearMonthData.month<12){
            this.yearMonthData.month++
          }else{
            if(this.yearMonthData.year>=this.yearMonthData.presentYear+1){
              return
            }
            this.yearMonthData.year++
            this.$set(this.yearMonthData,'month',1);
          }
        }else if(this.yearMonthType == 2){
          if(this.yearMonthData.year>=this.yearMonthData.presentYear+1){
            return
          }
          this.yearMonthData.year++
        }
        this.getListYmd();
      },
      //年或月减少
      subtractDate(){
        if(this.yearMonthType == 1){
          if(this.yearMonthData.month>1){
            this.yearMonthData.month--
          }else{
            if(this.yearMonthData.year==this.yearMonthData.presentYear){
              return
            }
            this.yearMonthData.year--
            this.$set(this.yearMonthData,'month',12);
          }
        }else if(this.yearMonthType == 2){
          if(this.yearMonthData.year==this.yearMonthData.presentYear){
            return
          }
          this.yearMonthData.year--
        }
        this.getListYmd();
      },
      //年月展示切换按钮
      yearMonthSwitchButton(type){
        if(this.yearMonthType != type){
          this.$set(this,'yearMonthType',type);
        }
        this.getListYmd();
      },
      // 生成日历
      generateDate() {
        let self = this;
        let myDate = new Date();
        let year = myDate.getFullYear();
        let newTimeList = [];
        self.newKey = 0;
        for(let o=0;o<2;o++){
          for(let i=0;i<12;i++){
            self.newKey++
            newTimeList.push(self.setCurrentYearMonth(year,i))
          }
          year++
        }
        this.$set(this,'yearDate',newTimeList);
        return true;
      },
      // 设置日历显示的日期（年-月）
      setCurrentYearMonth(year,month) {
        let showYearMonth = {
          year,
          month,
        };
        return this.createCalendar(showYearMonth);
      },
      // 创建当前月对应日历的日期数据
      createCalendar(showYearMonth) {
        const oneDayMS = 24 * 60 * 60 * 1000;
        let { year, month } = showYearMonth;
        let obj = {
          key:this.newKey,
          time:year+'-'+(month+1),
          year:year,
          month:month+1,
          list:[],
        }
        let firstDay = this.getFirstDayByMonths(year, month);
        let prefixDaysLen = firstDay === 0 ? 6 : firstDay - 1;
        let begin = new Date(year, month, 1).getTime() - oneDayMS * prefixDaysLen;
        let lastDay = this.getLastDayByMonth(year, month);
        let suffixDaysLen = lastDay === 0 ? 0 : 7 - lastDay;
        let end = new Date(year, month + 1, 0).getTime() + oneDayMS * suffixDaysLen;
        while (begin <= end) {
          this.shareDate.setTime(begin);
          let year = this.shareDate.getFullYear();
          let curMonth = this.shareDate.getMonth();
          let date = this.shareDate.getDate();
          let time = this.stringify(year, curMonth, date).replace(/-/g,"");
          obj.list.push({
            year: year,
            month: curMonth + 1,
            date: date,
            weeks:this.calculationWeeks(year, curMonth, date),
            value: this.stringify(year, curMonth, date),
            key:this.newKey+''+time,
            time:time,
            disable: curMonth !== month,
            checkType:false,
            signInCount:0,
            noSignedInCount:0,
          });
          begin += oneDayMS;
        }
        return obj;
      },
      //计算当前是周几
      calculationWeeks(year, curMonth, date){
        let now = new Date(this.stringify(year, curMonth, date));
        let day = now.getDay();
        let weeks = new Array(
          "7",
          "1",
          "2",
          "3",
          "4",
          "5",
          "6"
        );
        return weeks[day];
      },
      // 格式化时间
      stringify(year, month, date) {
        return [year, this.pad(month + 1), this.pad(date)].join("-");
      },
      // 对小于 10 的数字，前面补 0
      pad(str) {
        return str < 10 ? `0${str}` : str;
      },
      // 当前月的第一天是星期几
      getFirstDayByMonths(year, month) {
        return new Date(year, month, 1).getDay();
      },
      // 当前月的最后一天是星期几
      getLastDayByMonth(year, month) {
        return new Date(year, month + 1, 0).getDay();
      },
    }
  }
</script>

<style scoped lang="scss">
.patrolRecord{
  display: flex;
  flex-direction: column;
  font-weight:500;
  *{
    margin:0;
    padding:0;
  }
  .patrolRecordPage{
    flex:1;
    display: flex;
    overflow: hidden;
    .left-page-max-big-box{
      width:250px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      padding:36px 0 36px 10px;
      .tree-box {
        flex: 1;
        .terr-max-box:nth-child(1){
          margin:0;
        }
        .terr-max-box {
          margin-top: 20px;
          .max-name-box {
            display: flex;
            margin-right: 20px;
            margin-bottom: 10px;
            color: #D8D8D8;
            font-size: 20px;
            .max-name {
              flex: 1;
              margin-right: 19px;
              color: #333;
              font-size: 16px;
              line-height: 16px;
              margin-top: 3px;
              cursor: pointer;
              overflow: hidden;
            }
          }
          .terr-big-box {
            margin-left: 30px;
            .big-name-box {
              cursor: pointer;
              height: 40px;
              line-height: 40px;
              display: flex;
              font-size: 16px;
              color: #333;
              img {
                width: 16px;
                height: 16px;
                margin-top: 12px;
                margin-right: 4px;
              }
              .name-p {
                flex: 1;
                overflow: hidden;
              }
            }
            .terr-min-box {
              margin-left: 30px;
              .min-name {
                cursor: pointer;
                height: 40px;
                line-height: 40px;
                display: flex;
                font-size: 16px;
                color: #333;
                overflow: hidden;
              }
            }
          }
          .check-color {
            color: #0183FA !important;
          }
        }
      }
      .tree-null-p {
        text-align: center;
        line-height: 100px;
        flex: 1;
        color: #999;
      }
    }
    .center-border-p{
      border-right:1px dashed #A2A2A2;
      margin:36px 35px 36px 0;
    }
    .right-page-max-big-box{
      flex:1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      .top-button-max-box{
        height:87px;
        padding:21px 0 26px 0;
        display: flex;
        border-bottom:1px solid #E0E0E0;
        font-size:14px;
        .yearMonthButtonBox{
          width:200px;
          height:40px;
          display: flex;
          p{
            text-align: center;
            line-height:38px;
            width:100px;
            cursor: pointer;
          }
          p:nth-child(1){
            border-top-left-radius: 4px;
            border-bottom-left-radius: 4px;
          }
          p:nth-child(2){
            border-top-right-radius: 4px;
            border-bottom-right-radius: 4px;
          }
          .left-button-one{
            background: #0183FA;
            border:1px solid #0183FA;
            color:#fff;
          }
          .left-button-tow{
            color:#333333;
            border:1px solid #E0E0E0;
            border-right:none;
          }
          .right-button-one{
            background: #0183FA;
            border:1px solid #0183FA;
            color:#fff;
          }
          .right-button-tow{
            color:#333333;
            border:1px solid #E0E0E0;
            border-left:none;
          }
        }
        .year-month-data-button-box{
          display: flex;
          margin:0 33px 0 39px;
          p{
            line-height:38px;
            text-align: center;
          }
          .year-month-subtract-button{
            border:1px solid #E0E0E0;
            border-top-left-radius: 4px;
            border-bottom-left-radius: 4px;
            width:38px;
            cursor: pointer;
          }
          .year-month-text-p{
            border-top:1px solid #E0E0E0;
            border-bottom:1px solid #E0E0E0;
            width:150px;
          }
          .year-month-add-button{
            border:1px solid #E0E0E0;
            border-top-right-radius: 4px;
            border-bottom-right-radius: 4px;
            width:38px;
            cursor: pointer;
          }
        }
        .return-year-month-button{
          width:100px;
          height:40px;
          line-height:38px;
        }
        .flex-p{
          flex:1;
        }
        .all-button{
          width:80px;
          height:40px;
          margin-right:8px;
          line-height:38px;
        }
        .add-button{
          width:80px;
          height:40px;
          margin-right:23px;
          line-height:38px;
        }
      }
      .month-max-big-box{
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        flex:1;
        padding:10px 0 30px;
        .month-week-box{
          display: flex;
          overflow: hidden;
          font-size:0;
          .for-week-box{
            font-size:14px;
            width:180px;
            text-align: center;
            line-height:60px;
            border-bottom:1px solid #E0E0E0;
          }
        }
        .month-big-box{
          border-left:1px solid #E0E0E0;
          font-size:0;
          .for-month-max-big-box{
            overflow: hidden;
            font-size:16px;
            width:180px;
            height:110px;
            display: inline-block;
            border-right:1px solid #E0E0E0;
            border-bottom:1px solid #E0E0E0;
            position: relative;
            .for-month-top-big-box{
              width:180px;
              height:50px;
              line-height:50px;
              text-align: center;
              font-size:16px;
              color:#333;
            }
            .for-month-top-big-box-color{
              color:#E0E0E0;
            }
            .for-month-bottom-big-box{
              height:60px;
              background: rgba(1,131,250,0.2);
              color:#0183FA;
              display: flex;
              cursor: pointer;
              .for-month-bottom-left-min-box{
                flex: 1;
                font-size:14px;
                padding:10px 0 0 10px;
                p{
                  line-height:20px;
                }
              }
              .for-month-bottom-right-min-box{
                width:24px;
                text-align: center;
                line-height:60px;
                font-size:12px;
                font-weight:900;
              }
            }
          }
        }
      }
      .year-max-big-box{
        flex:1;
        padding:30px 0;
        .for-year-max-big-box{
          vertical-align:top;
          width:596px;
          display: inline-block;
          margin:0 42px 40px 0;
          overflow: hidden;
          .year-name-p{
            text-align: center;
            font-size:16px;
            background: #CCE6FE;
            color:#0183FA;
            line-height:40px;
            border-top-left-radius:4px;
            border-top-right-radius:4px;
          }
          .year-week-box{
            overflow: hidden;
            font-size:0;
            background: rgba(224,224,224,0.2);
            .for-week-box{
              width:85px;
              line-height:40px;
              text-align: center;
              display: inline-block;
              font-size:12px;
            }
          }
          .year-big-box{
            border-top:1px solid #E0E0E0;
            border-left:1px solid #E0E0E0;
            overflow: hidden;
            font-size:0;
            .for-year-big-box{
              display: inline-block;
              overflow: hidden;
              width:85px;
              height:60px;
              border-right:1px solid #E0E0E0;
              border-bottom:1px solid #E0E0E0;
              position: relative;
              .for-year-top-big-box{
                flex:1;
                font-size:12px;
                color:#333;
                line-height:30px;
                text-align: center;
              }
              .for-year-top-big-box-color{
                color:#E0E0E0;
              }
              .for-year-bottom-big-box{
                line-height:30px;
                font-size:14px;
                text-align: center;
                background: #CCE6FE;
                color:#0183FA;
                cursor: pointer;
              }
            }
          }
        }
      }
      .red-backgroud-color{
        background: rgba(255,0,0,0.2)!important;
        color:#FF0000!important;
      }
    }
  }
}
</style>
<style lang="scss">
  .patrolRecord{
    .el-tree-node__label{
      font-size:16px;
    }
    .el-tree-node__content{
      height:30px;
      line-height: 30px;
    }
    .el-tree-node__expand-icon{
      color:#333;
      font-size:16px;
      padding:0;
      margin-right:3px;
    }
    .el-tree-node__expand-icon.is-leaf{
      color: transparent;
    }
    .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content{
      background-color:#ffffff;
      color:#0183FA;
    }
  }
</style>