ZhiHuiJiaoWu_UniApp/pages/market/data/statistics.vue

<!--市场数据统计页面-->
<template>
  <view class="main_box">
    <!--自定义导航栏-->
    <view class="navbar_section">
      <view class="title">市场数据统计</view>
    </view>

    <!-- 顶部筛选 -->
    <view class="filter-section">
      <view class="filter-item">
        <view class="label">统计时间：</view>
        <picker mode="date" fields="month" :value="currentDate" @change="dateChange">
          <view class="picker-value">{{currentDate}}</view>
        </picker>
      </view>
    </view>

    <!-- 市场人员资源量统计 -->
    <view class="table-section">
      <view class="table-title">市场人员资源量统计</view>
      <view class="table-container">
        <view class="table-header">
          <view class="th th-person">人员</view>
          <view class="th th-week">周数量</view>
          <view class="th th-month">月数量</view>
          <view class="th th-year">年数量</view>
        </view>
        <view class="table-body">
          <view class="table-row" v-for="(item, index) in staffData" :key="index">
            <view class="td td-person">{{item.name}}</view>
            <view class="td td-week">{{item.weekCount}}</view>
            <view class="td td-month">{{item.monthCount}}</view>
            <view class="td td-year">{{item.yearCount}}</view>
          </view>
        </view>
      </view>
    </view>

    <!-- 校区人员资源渠道量 -->
    <view class="table-section">
      <view class="table-title">{{currentMonth}}月 - 年度校区人员资源渠道量</view>
      <view class="table-container">
        <view class="table-header">
          <view class="th th-channel" style="width: 100px;">渠道</view>
          <view class="th" v-for="(school, index) in schoolList" :key="index">{{school.name}}</view>
          <view class="th th-total">渠道合计</view>
        </view>
        <view class="table-body">
          <view class="table-row" v-for="(channel, index) in channelSchoolData" :key="index">
            <view class="td td-channel" style="width: 100px;">{{channel.name}}</view>
            <view class="td" v-for="(school, sIndex) in schoolList" :key="sIndex">
              {{channel.schools[school.id] || 0}}
            </view>
            <view class="td td-total">{{channel.total}}</view>
          </view>
        </view>
      </view>
    </view>

    <!-- 市场人员资源渠道统计 -->
    <view class="table-section">
      <view class="table-title">{{currentMonth}}月 - 年度市场人员资源渠道统计</view>
      <view class="table-container">
        <view class="table-header">
          <view class="th th-channel" style="width: 100px;">渠道</view>
          <view class="th" v-for="(staff, index) in marketStaffList" :key="index">市场{{staff.name}}</view>
          <view class="th th-total">资源合计</view>
        </view>
        <view class="table-body">
          <view class="table-row" v-for="(channel, index) in channelStaffData" :key="index">
            <view class="td td-channel" style="width: 100px;">{{channel.name}}</view>
            <view class="td" v-for="(staff, sIndex) in marketStaffList" :key="sIndex">
              {{channel.staffs[staff.id] || 0}}
            </view>
            <view class="td td-total">{{channel.total}}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import apiRoute from '@/api/apiRoute.js';

export default {
  data() {
    return {
      currentDate: this.formatDate(new Date()),
      currentMonth: new Date().getMonth() + 1,
      // 市场人员资源量统计
      staffData: [
        { name: 'A', weekCount: 0, monthCount: 0, yearCount: 0 },
        { name: 'B', weekCount: 0, monthCount: 0, yearCount: 0 },
        { name: 'C', weekCount: 0, monthCount: 0, yearCount: 0 },
        { name: 'D', weekCount: 0, monthCount: 0, yearCount: 0 },
        { name: 'E', weekCount: 0, monthCount: 0, yearCount: 0 }
      ],
      // 校区列表
      schoolList: [
        { id: 1, name: '校区1' },
        { id: 2, name: '校区2' },
        { id: 3, name: '校区3' },
        { id: 4, name: '校区4' },
        { id: 5, name: '校区5' }
      ],
      // 渠道列表
      channelList: [
        { id: 1, name: '地推' },
        { id: 2, name: '转介绍' },
        { id: 3, name: '美团/大众' },
        { id: 4, name: '抖音' },
        { id: 5, name: '小红书' },
        { id: 6, name: '其他' }
      ],
      // 市场人员列表
      marketStaffList: [
        { id: 'A', name: 'A' },
        { id: 'B', name: 'B' },
        { id: 'C', name: 'C' },
        { id: 'D', name: 'D' }
      ],
      // 校区渠道数据
      channelSchoolData: [],
      // 人员渠道数据
      channelStaffData: []
    }
  },
  onLoad() {
    this.initData();
  },
  methods: {
    // 格式化日期为 YYYY-MM
    formatDate(date) {
      const year = date.getFullYear();
      const month = (date.getMonth() + 1).toString().padStart(2, '0');
      return `${year}-${month}`;
    },
    
    // 日期选择器变更
    dateChange(e) {
      this.currentDate = e.detail.value;
      const [year, month] = this.currentDate.split('-');
      this.currentMonth = parseInt(month);
      this.initData();
    },
    
    // 初始化数据
    initData() {
      // 模拟获取数据，实际项目中应该调用API
      this.getStaffStatistics();
      this.getChannelSchoolStatistics();
      this.getChannelStaffStatistics();
    },
    
    // 获取人员资源量统计
    getStaffStatistics() {
      // 模拟数据，实际项目中应该调用API
      // 示例：apiRoute.getStaffStatistics({date: this.currentDate}).then(res => {})
      
      // 模拟随机数据
      this.staffData = this.staffData.map(staff => {
        const monthCount = Math.floor(Math.random() * 100);
        return {
          ...staff,
          weekCount: Math.floor(Math.random() * 30),
          monthCount: monthCount,
          yearCount: monthCount + Math.floor(Math.random() * 200)
        }
      });
    },
    
    // 获取校区渠道统计
    getChannelSchoolStatistics() {
      // 模拟数据，实际项目中应该调用API
      this.channelSchoolData = this.channelList.map(channel => {
        const schools = {};
        let total = 0;
        
        this.schoolList.forEach(school => {
          const count = Math.floor(Math.random() * 50);
          schools[school.id] = count;
          total += count;
        });
        
        return {
          id: channel.id,
          name: channel.name,
          schools,
          total
        }
      });
    },
    
    // 获取人员渠道统计
    getChannelStaffStatistics() {
      // 模拟数据，实际项目中应该调用API
      this.channelStaffData = this.channelList.map(channel => {
        const staffs = {};
        let total = 0;
        
        this.marketStaffList.forEach(staff => {
          const count = Math.floor(Math.random() * 40);
          staffs[staff.id] = count;
          total += count;
        });
        
        return {
          id: channel.id,
          name: channel.name,
          staffs,
          total
        }
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.main_box {
  min-height: 100vh;
  background-color: #1a1a1a;
  color: #ffffff;
  padding-bottom: 30rpx;
}

.navbar_section {
  background-color: #1a1a1a;
  height: 88rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  
  .title {
    font-size: 36rpx;
    font-weight: bold;
  }
}

.filter-section {
  padding: 20rpx;
  background-color: #222222;
  margin: 20rpx;
  border-radius: 10rpx;
  
  .filter-item {
    display: flex;
    align-items: center;
    
    .label {
      font-size: 28rpx;
      margin-right: 10rpx;
    }
    
    .picker-value {
      padding: 10rpx 20rpx;
      background-color: #333333;
      border-radius: 6rpx;
      font-size: 28rpx;
    }
  }
}

.table-section {
  margin: 30rpx 20rpx;
  background-color: #222222;
  border-radius: 10rpx;
  overflow: hidden;
  
  .table-title {
    font-size: 32rpx;
    font-weight: bold;
    padding: 20rpx;
    border-bottom: 1px solid #333333;
  }
  
  .table-container {
    width: 100%;
    overflow-x: auto;
  }
  
  .table-header {
    display: flex;
    background-color: #333333;
    
    .th {
      padding: 15rpx 10rpx;
      font-size: 26rpx;
      text-align: center;
      flex: 1;
      min-width: 100rpx;
      font-weight: bold;
    }
  }
  
  .table-body {
    .table-row {
      display: flex;
      border-bottom: 1px solid #333333;
      
      &:last-child {
        border-bottom: none;
      }
      
      .td {
        padding: 15rpx 10rpx;
        font-size: 26rpx;
        text-align: center;
        flex: 1;
        min-width: 100rpx;
      }
    }
  }
  
  .th-person, .td-person {
    min-width: 80rpx;
    flex: 0.8;
  }
  
  .th-week, .td-week,
  .th-month, .td-month,
  .th-year, .td-year {
    flex: 1;
  }
  
  .th-channel, .td-channel {
    flex: 1.2;
    text-align: left;
    padding-left: 20rpx;
  }
  
  .th-total, .td-total {
    flex: 1.2;
    font-weight: bold;
  }
}
</style>