ybkq-app/src/views/base/statistics.vue

<template>
  <div style="height: 100%">
    <Loading v-show="LOADING"></Loading>
    <nav-bar />
    <head-info
      :nowYearMonth="value"
      @getLastMonth="getLastMonth"
      @getNextMonth="getNextMonth"
    />
    <statistics-num :nums="nums" />
    <van-divider :style="{ color: '#aaa', borderColor: '#aaa', margin: 0 }" />
    <div
      ref="calTop"
      class="scroll-style"
      style="overflow-y: auto"
      :style="calRelHeight"
    >
      <el-calendar v-model="value" :first-day-of-week="7">
        <!-- 判断是否属于本月 -->
        <template slot="dateCell" slot-scope="{ data }">
          <div
            class="table-head"
            @click="getPunchInfo(formatDay(data.day.split('-')[2]))"
          >
            {{ formatDay(data.day.split("-")[2]) }}
          </div>
          <div
            class="yc-style"
            v-for="(item, index) in statisticsData"
            :key="index"
          >
            <!-- 只显示当月打卡数据  ifNowMonth-->
            <template v-if="data.type === 'current-month'">
              <template v-if="item.day == formatDay(data.day.split('-')[2])">
                <div v-if="item.data.upWorkState === '1'" class="redDot"></div>
                <div
                  v-if="item.data.downWorkState === '1'"
                  class="blueDot"
                  :style="{ marginLeft: item.data.upWorkState ? '2px' : 0 }"
                ></div>
                <div
                  v-if="
                    item.data.upWorkState === '2' ||
                    item.data.downWorkState === '2'
                  "
                  class="orangeDot"
                  :style="{ marginLeft: item.data.downWorkState ? '2px' : 0 }"
                ></div>
              </template>
            </template>
          </div>
        </template>
      </el-calendar>
      <van-divider
        :style="{ color: '#aaa', borderColor: '#aaa', marginTop: 5 }"
      />
      <statistics-info :dkInfo="dkInfo" v-if="dkInfo.workDay === 1" />
      <van-row class="punch-img-style" v-else-if="dkInfo.workDay === 0">
        <van-row class="rest-style">今日休息</van-row>
        <van-row>
          <van-empty
            class="custom-image"
            :image="rest"
            description="好好休息哦~"
          />
        </van-row>
      </van-row>
      <template v-else>
        <van-empty
          class="custom-image"
          :image="empty"
          description="暂无任何打卡信息"
        />
      </template>
    </div>
    <van-tabbar v-model="active">
      <van-tabbar-item to="/punch" icon="location-o">打卡</van-tabbar-item>
      <van-tabbar-item icon="records">统计</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import navBar from "@/components/navBarPunch";
import headInfo from "@/components/headInfo";
import statisticsNum from "@/components/statisticsNum";
import statisticsInfo from "@/components/statisticsInfo";
import Loading from "@/components/loading";
import { mapState } from "vuex";
import { statistics, statisticsTop } from "@/api";
import { Notify } from "vant";
import { getYyMmDdTimeStamp } from "@/utils/date";
import rest from "@/assets/rest.png";
import empty from "@/assets/empty.png";
export default {
  name: "statistics",
  components: {
    navBar,
    headInfo,
    statisticsNum,
    statisticsInfo,
    Loading
  },
  data() {
    return {
      active: 1,
       // 图片路径
      empty: empty,
      rest: rest,
      // 滚动高度
      calHeight: "",
      value: new Date(),
      nums: {},
      // 统计数据
      statisticsData: [],
      // 打卡信息
      dkInfo: {},
    };
  },
  created() {
    this.getStatistics();
  },
  mounted() {
    document.querySelector(".scroll-style .el-calendar__header").remove();
    // 获取元素高度
    this.$nextTick(() => {
      this.calHeight = this.$refs.calTop.getBoundingClientRect().top;
    });
  },
  computed: {
    ...mapState(["LOADING"]),
    // 计算元素高度
    calRelHeight() {
      return `height: calc( 100vh - ${this.calHeight}px - 50px )`;
    },
    // 格式化时间
    formatDay() {
      return function (time) {
        if (time.substring(0, 1) === "0") {
          return time.substr(1);
        }
        return time;
      };
    },
  },
  methods: {
    // 统计
    getStatistics() {
      this.$store.commit("showLoading");
      let nowMonth = getYyMmDdTimeStamp(this.value);
      statistics(nowMonth).then((res) => {
        if (res.status === 10000) {
          this.statisticsData = res.data;
          this.getStatisticsTop(nowMonth);
          // 获取当前天的打卡信息
          this.getPunchInfo(this.value.getDate());
        } else {
          Notify({ type: "warning", message: res.message });
          this.$store.commit("hideLoading");
        }
      });
    },
    // 统计顶部数量
    getStatisticsTop(nowMonth) {
      statisticsTop(nowMonth).then((res) => {
        if (res.status === 10000) {
          this.nums = res.data[0] || { early: 0, lack: 0, late: 0 };
          this.$store.commit("hideLoading");
        } else {
          Notify({ type: "warning", message: res.message });
          this.$store.commit("hideLoading");
        }
      });
    },
    // 获取上一月
    getLastMonth() {
      this.value = new Date(this.value.setMonth(this.value.getMonth() - 1));
      this.getStatistics();
    },
    // 获取下一月
    getNextMonth() {
      this.value = new Date(this.value.setMonth(this.value.getMonth() + 1));
      this.getStatistics();
    },
    // 获取打卡信息
    getPunchInfo(time) {
      let res = this.statisticsData.find((item) => item.day == time);
      if(res) {
         this.dkInfo = res.data;
      } else {
        this.dkInfo = {}
      }
     
    },
  },
};
</script>

<style scoped lang="scss">
$width: 1.2vw;
$height: 0.6vh;
.punch-img-style {
  padding-bottom: 2vh;
}
.yc-style {
  display: flex;
  justify-content: center;
}
.redDot {
  width: $width;
  height: $height;
  border-radius: 50%;
  background: #932562;
}
.blueDot {
  width: $width;
  height: $height;
  border-radius: 50%;
  background: #0000ff;
}
.orangeDot {
  width: $width;
  height: $height;
  border-radius: 50%;
  background: #ff9900;
}
.rest-style {
  display: flex;
  justify-content: center;
  width: 100%;
  color: #aaa;
}
.table-head {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
/deep/ .el-calendar__body {
  padding: 0;
  table > thead > th {
    text-align: center;
  }
}
/deep/ .el-calendar-table tr:first-child td {
  border: none;
}
/deep/ .el-calendar-table td {
  border: none;
}
/deep/ .el-calendar-table .el-calendar-day {
  height: 6vh;
  /* width: 14.5vw; */
  padding: 1vh 2vw 0 2vw;
  /* padding: 0; */
}
/deep/ .el-calendar-table td.is-selected {
  background: #fff;
}
/deep/ .el-calendar-table .el-calendar-day:hover {
  background: transparent;
}
/deep/ .el-calendar-table td.is-selected .el-calendar-day .table-head {
  border-radius: 50%;
  background: #67a2ff;
  color: #fff;
}
/deep/ .el-calendar-table__row .prev {
  pointer-events: none;
}
/deep/ .el-calendar-table__row .next {
  pointer-events: none;
}
/deep/ .van-empty__image {
  width: 100%;
  height: 100%;
}
/deep/ .van-empty {
  padding: 0;
}
/deep/ .custom-image .van-empty__image img {
  width: 100%;
  height: 100%;
}
/deep/ .van-empty__description {
  color: #aaa;
}
</style>