yizhizan-h5/pages/recruitmentData/dataCenter.vue

<template>
  <view class="page">
    <!-- Custom Navbar -->
    <!-- <view class="custom-navbar" :style="{ paddingTop: statusBarHeight + 'px' }">
      <view class="navbar-content">
        <view class="navbar-left" @click="goBack">
          <u-icon name="arrow-leftward" color="white" size="36"></u-icon>
        </view>
        <view class="navbar-title">招聘数据中心</view>
        <view class="navbar-right"></view>
      </view>
    </view> -->

    <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 {
      statusBarHeight: 0,
      zwList:[],
      zwIndex:0,
      weekList:[],
      weekIndex:0,
      dataStatics:{}
    }
  },
  onLoad() {
    const systemInfo = uni.getSystemInfoSync()
    this.statusBarHeight = systemInfo.statusBarHeight || 0;
    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 data = {
		  	postPushId:this.zwList[this.zwIndex].id,
		  	todayStart:this.formatDateRange(new Date(),new Date())[0],
		  	todayEnd:this.formatDateRange(new Date(),new Date())[1],
		  }
		  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;
}

/* Custom Navbar */
.custom-navbar {
  position: fixed;
  top: 80rpx;
  left: 0;
  right: 0;
  z-index: 1000;
}

.navbar-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
}

.navbar-left {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.navbar-title {
  color: rgba(255, 255, 255, 1);
  font-family: DM Sans;
  font-size: 30rpx;
  font-weight: 700;
  line-height: 52rpx;
  letter-spacing: 0.5%;
  text-align: center;
}

.navbar-right {
  width: 44px;
}

/* 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>