zhjwxt/uniapp/pages/market/data/statistics.vue

<!--市场数据统计页面-->
<template>
  <view class="main_box" :class="{'has-safe-area': hasSafeArea}">
    <!--自定义导航栏-->
    <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.campus_name}}</view>
          <view class="th th-total">渠道合计</view>
        </view>
        <view class="table-body">
          <view class="table-row" v-for="(channel, index) in channelList" :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[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 staffData" :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 channelList" :key="index">
            <view class="td td-channel" style="width: 100px;">{{channel.name}}</view>
            <view class="td" v-for="(staff, sIndex) in staffData" :key="sIndex">
              {{staff['channel'][channel.value] || 0}}
            </view>
            <view class="td td-total">{{channel.total}}</view>
          </view>
        </view>
      </view>
    </view>
    		<AQTabber />
  </view>
</template>

<script>
import apiRoute from '@/api/apiRoute.js';
import AQTabber from "@/components/AQ/AQTabber.vue"

export default {
  		components: {
			AQTabber,
		},
  data() {
    return {
      currentDate: this.formatDate(new Date()),
      currentMonth: new Date().getMonth() + 1,
      // 市场人员资源量统计
      staffData: [],
      // 校区列表
      schoolList: [],
      // 是否有安全区域
      hasSafeArea: false,
      // 渠道列表
      channelList: [],
      // 市场人员列表
      marketStaffList: [
        { id: 'A', name: 'A' },
        { id: 'B', name: 'B' },
        { id: 'C', name: 'C' },
        { id: 'D', name: 'D' }
      ],
      // 校区渠道数据
      channelSchoolData: [],
      // 人员渠道数据
      channelStaffData: []
    }
  },
  onLoad() {
    this.initData();
    this.checkSafeArea();
  },
  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();
    },
    
    // 初始化数据
    async initData() {
      // 模拟获取数据，实际项目中应该调用API
      await this.getStaffStatistics();
      // await this.getChannelSchoolStatistics();
      // this.getChannelStaffStatistics();
    },
    
    // 获取人员资源量统计
    async getStaffStatistics() {
      // 模拟数据，实际项目中应该调用API
      let res = await apiRoute.getStaffStatistics({date: this.currentDate})
	  
	  console.log(res.data.staffData,"================");
      this.staffData = res.data.staffData
	  this.schoolList = res.data.schoolList
	  this.channelList = res.data.channelList
	  
    },
    
    // 获取校区渠道统计
    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
        }
      });
    },
    
    // 检测设备是否有安全区域
    checkSafeArea() {
      try {
        const systemInfo = uni.getSystemInfoSync();
        // 检测是否为iPhone X及以上机型或其他有安全区域的设备
        if (systemInfo.safeAreaInsets && systemInfo.safeAreaInsets.bottom > 0) {
          this.hasSafeArea = true;
        }
      } catch (e) {
        console.error('获取系统信息失败', e);
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.main_box {
  min-height: 100vh;
  background-color: #1a1a1a;
  color: #ffffff;
  padding-bottom: 150rpx; /* 增加底部内边距，防止内容被底部导航栏遮挡 */
}

/* 适配有安全区域的设备（如iPhone X及以上机型） */
.has-safe-area {
  padding-bottom: calc(150rpx + constant(safe-area-inset-bottom)); /* iOS 11.0-11.2 */
  padding-bottom: calc(150rpx + env(safe-area-inset-bottom)); /* iOS 11.2+ */
}

.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>