You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
343 lines
9.0 KiB
343 lines
9.0 KiB
<!--市场数据统计页面-->
|
|
<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>
|
|
|