5 changed files with 371 additions and 2 deletions
@ -0,0 +1,340 @@ |
|||||
|
<!--市场数据统计页面--> |
||||
|
<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> |
||||
Loading…
Reference in new issue