yizhizan-h5/pages/recruitmentData/dataCenter.vue

<template>
  <view class="page">
    <nav-bar title="招聘数据中心"></nav-bar>

    <!-- Filter Section -->
    <view class="filter-section">
      <view class="filter-buttons">
        <!-- <view class="filter-btn" @click="selectDateRange">
          <text class="filter-text">2025.07.30-08.06</text>
          <u-icon name="arrow-down" color="#016BF6" size="16"></u-icon>
        </view> -->
        <!-- <view class="filter-btn" @click="selectPosition">
          <text class="filter-text">亚马逊运营总监</text>
          <u-icon name="arrow-down" color="#016BF6" size="16"></u-icon>
        </view> -->
        <picker @change="changeDate" :value="weekIndex" :range="weekList" :range-key="'name'">
          <view class="filter-btn">
            <text class="filter-text">{{ weekList.length ? weekList[weekIndex].name : '/' }}</text>
            <u-icon name="arrow-down" color="#016BF6" size="16"></u-icon>
          </view>
        </picker>
        <picker @change="changeZw" :value="zwIndex" :range="zwList" :range-key="'name'">
          <view class="filter-btn">
            <text class="filter-text">{{ zwList.length ? zwList[zwIndex].name : '/' }}</text>
            <u-icon name="arrow-down" color="#016BF6" size="16"></u-icon>
          </view>
        </picker>
      </view>
    </view>

    <!-- Content Section -->
    <view class="content-section">
      <!-- Recruitment Progress Card -->
      <view class="card-header">
        <text class="hearder-title">招聘进展</text>
      </view>

      <!-- New Card -->
      <view class="data-card">
        <view class="card-header">
          <view class="card-title">
            <view class="card-icon-wrapper">
              <image src="/static/images/eye.svg" class="card-icon" mode="aspectFit"></image>
            </view>
            <text>查看</text>
          </view>
        </view>
        <view class="card-content">
          <view class="data-row">
            <view class="data-item">
              <text class="data-label">我看过</text>
              <view class="data-value-wrapper">
                <text class="data-value">{{ dataStatics.iSaw }}</text>
                <text class="data-unit">人</text>
              </view>
            </view>
            <view class="data-item">
              <text class="data-label">看过我</text>
              <view class="data-value-wrapper">
                <text class="data-value">{{ dataStatics.sawMe }}</text>
                <text class="data-unit">人</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <view class="data-card">
        <view class="card-header">
          <view class="card-title">
            <view class="card-icon-wrapper">
              <image src="/static/images/goutong.svg" class="card-icon" mode="aspectFit"></image>
            </view>
            <text>沟通</text>
          </view>
        </view>
        <view class="card-content">
          <view class="data-row">
            <view class="data-item">
              <text class="data-label">我沟通</text>
              <view class="data-value-wrapper">
                <text class="data-value">{{ dataStatics.iCommunicated }}</text>
                <text class="data-unit">人</text>
              </view>
            </view>
            <view class="data-item">
              <text class="data-label">求职者</text>
              <view class="data-value-wrapper">
                <text class="data-value">{{ dataStatics.candidateCommunicated }}</text>
                <text class="data-unit">人</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <view class="data-card">
        <view class="card-header">
          <view class="card-title">
            <view class="card-icon-wrapper">
              <image src="/static/images/lianxi.svg" class="card-icon" mode="aspectFit"></image>
            </view>
            <text>获取简历联系方式</text>
          </view>
        </view>
        <view class="card-content">
          <view class="data-row">
            <view class="data-item">
              <text class="data-label">合计</text>
              <view class="data-value-wrapper">
                <text class="data-value">{{ dataStatics.receivedResumes + dataStatics.exchangedContact }}</text>
                <text class="data-unit">人</text>
              </view>
            </view>
            <view class="data-item">
              <text class="data-label">获取简历</text>
              <view class="data-value-wrapper">
                <text class="data-value">{{ dataStatics.receivedResumes }}</text>
                <text class="data-unit">人</text>
              </view>
            </view>
            <view class="data-item">
              <text class="data-label">交换电话/微信</text>
              <view class="data-value-wrapper">
                <text class="data-value">{{ dataStatics.exchangedContact }}</text>
                <text class="data-unit">人</text>
              </view>
            </view>
            <!-- <view class="data-item">
               <text class="data-label">交换微信</text>
               <view class="data-value-wrapper">
                 <text class="data-value">2120</text>
                 <text class="data-unit">人</text>
               </view>
             </view> -->
          </view>
        </view>
      </view>

      <view class="data-card">
        <view class="card-header">
          <view class="card-title">
            <view class="card-icon-wrapper">
              <image src="/static/images/huoqu.svg" class="card-icon" mode="aspectFit"></image>
            </view>
            <text>获取简历联系方式</text>
          </view>
        </view>
        <view class="card-content">
          <view class="data-row">
            <view class="data-item">
              <text class="data-label">邀约面试</text>
              <view class="data-value-wrapper">
                <text class="data-value">{{ dataStatics.acceptedInterview }}</text>
                <text class="data-unit">人</text>
              </view>
            </view>
            <view class="data-item">
              <text class="data-label">接受面试</text>
              <view class="data-value-wrapper">
                <text class="data-value">{{ dataStatics.acceptedInterview }}</text>
                <text class="data-unit">人</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import navBar from "@/components/nav-bar/index.vue";
import { getPrevious8Weeks } from './dateFormate'
export default {
  components: {
    navBar
  },
  data() {
    return {
      zwList: [],
      zwIndex: 0,
      weekList: [],
      weekIndex: 0,
      dataStatics: {}
    }
  },
  onLoad() {
    this.getZwList()
    this.weekList = []
    getPrevious8Weeks(new Date()).forEach(it => {
      // this.weekList.push([
      //   it[0],it[1],it.join('~')
      // ]),
      this.weekList.push({
        start: it[0],
        end: it[1],
        name: it.join('~')
      })
    })
  },
  methods: {
    changeDate(e) {
      this.weekIndex = e.detail.value;
      this.getDataStatics()
    },
    getZwList() {
      this.$Request.getT("/app/postPush/getMyPostPush").then(res => {
        res.data.records.forEach(item => {
          this.zwList.push({
            name: item.ruleClassifyName,
            id: item.postPushId
          })
        })
        this.getDataStatics()
      })
    },
    changeZw(e) {
      this.zwIndex = e.detail.value;
      this.getDataStatics()
    },
    getDataStatics() {
      let [startDate, endDate] = this.weekList[this.weekIndex].name.split('~');
      let data = {
        postPushId: this.zwList[this.zwIndex].id,
        // todayStart:this.formatDateRange(new Date(),new Date())[0],
        // todayEnd:this.formatDateRange(new Date(),new Date())[1],
        todayStart: `${startDate} 00:00:00`,
        todayEnd: `${endDate} 23:59:59`,
      }
      this.$Request.getT("/app/user/userYesterdayData", data).then(res => {
        this.dataStatics = res.data;
      })
    },
    formatDateRange(startDate, endDate) {
      // 格式化日期为 YYYY-MM-DD 格式
      const formatDate = (date) => {
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, '0');
        const day = String(date.getDate()).padStart(2, '0');
        return `${year}-${month}-${day}`;
      };

      // 创建开始日期的 00:00:00
      const startDateTime = `${formatDate(startDate)} 00:00:00`;

      // 创建结束日期的 23:59:59
      const endDateTime = `${formatDate(endDate)} 23:59:59`;

      return [startDateTime, endDateTime];
    },
    goBack() {
      uni.navigateBack()
    },
    goToCommunicationRecords() {
      uni.navigateTo({
        url: '/pages/recruitmentData/communicationRecords'
      })
    },
    selectDateRange() {
      console.log('选择日期范围')
    },
    selectPosition() {
      console.log('选择职位')
    }
  }
}
</script>

<style lang="scss" scoped>
.page {
  background: linear-gradient(180.00deg, rgba(255, 102, 0, 1), rgba(255, 102, 0, 0) 100%);
  background-size: 100% 35%;
  background-position: center top;
  background-repeat: no-repeat;
  min-height: 100vh;
}

/* Filter Section */
.filter-section {
  padding: 0rpx 32rpx 32rpx 32rpx;
}

.filter-buttons {
  display: flex;
  gap: 20rpx;
}

.filter-btn {
  flex: 1;
  padding: 16rpx 20rpx;
  background: rgba(255, 255, 255, 1);
  border-radius: 12rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12rpx;
}

.filter-text {
  color: rgba(1, 107, 246, 1);
  font-family: DM Sans;
  font-size: 24rpx;
  font-weight: 400;
  line-height: 32rpx;
  letter-spacing: -0.5px;
  text-align: center;
}

/* Content Section */
.content-section {
  margin: 0 32rpx 32rpx 32rpx;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 1);
  border-radius: 12rpx;
  border: 0.5px solid rgba(227, 231, 236, 1);
  padding: 32rpx 20rpx;
}

.data-card {
  background: rgba(255, 255, 255, 1);
  border-radius: 12rpx;
  padding: 24rpx;
  border: 0.5px solid rgba(227, 231, 236, 1);
  margin-top: 24rpx;
}

.hearder-title {
  color: rgba(23, 23, 37, 1);
  font-family: DM Sans;
  font-size: 28rpx;
  font-weight: 400;
  line-height: 44rpx;
  letter-spacing: 0.5%;
  text-align: left;
}

.card-title {
  display: flex;
  align-items: center;
  gap: 12rpx;
}

.card-icon-wrapper {
  width: 32rpx;
  height: 32rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-icon {
  width: 32rpx;
  height: 32rpx;
}

.card-title text {
  color: rgba(102, 102, 102, 1);
  font-family: DM Sans;
  font-size: 24rpx;
  font-weight: 400;
  line-height: 32rpx;
  letter-spacing: 0%;
  text-align: left;
}

.card-content {
  margin-top: 12rpx;
}

.data-row {
  display: flex;
  gap: 24rpx;
}

.data-item {
  //    flex: 1;
  //    display: flex;
  //    flex-direction: column;
  //    align-items: flex-start;
}

.data-label {
  color: rgba(102, 102, 102, 1);
  font-family: DM Sans;
  font-size: 24rpx;
  font-weight: 400;
  line-height: 32rpx;
  letter-spacing: 0%;
  text-align: left;
  margin-bottom: 12rpx;
}

.data-value-wrapper {
  display: flex;
  align-items: baseline;
  gap: 4rpx;
}

.data-value {
  color: rgba(51, 51, 51, 1);
  font-family: DM Sans;
  font-size: 40rpx;
  font-weight: 400;
  line-height: 52rpx;
  letter-spacing: 0%;
  text-align: left;
}

.data-unit {
  color: rgba(153, 153, 153, 1);
  font-family: DM Sans;
  font-size: 24rpx;
  font-weight: 400;
  line-height: 32rpx;
}
</style>