10 changed files with 891 additions and 625 deletions
@ -1,15 +0,0 @@ |
|||||
|
|
||||
export default { |
|
||||
server: "http://medication.zeyan.wang", |
|
||||
appName: "要药提醒", |
|
||||
|
|
||||
|
|
||||
// #ifdef APP-PLUS
|
|
||||
version: plus.runtime.version, |
|
||||
varsionCode: plus.runtime.versionCode, |
|
||||
// #endif
|
|
||||
// #ifndef APP-PLUS
|
|
||||
version: '1.0.0', |
|
||||
// #endif
|
|
||||
} |
|
||||
|
|
||||
@ -1,340 +1,413 @@ |
|||||
<!--市场数据统计页面--> |
<!--市场数据统计页面--> |
||||
<template> |
<template> |
||||
<view class="main_box"> |
<view class="main_box"> |
||||
<!--自定义导航栏--> |
<!--自定义导航栏--> |
||||
<view class="navbar_section"> |
<view class="navbar_section"> |
||||
<view class="title">市场数据统计</view> |
<view class="filter-item"> |
||||
</view> |
<view class="label">统计时间：</view> |
||||
|
<picker mode="date" fields="month" :value="currentDate" @change="dateChange"> |
||||
<!-- 顶部筛选 --> |
<view class="picker-value">{{currentDate}}</view> |
||||
<view class="filter-section"> |
</picker> |
||||
<view class="filter-item"> |
</view> |
||||
<view class="label">统计时间：</view> |
</view> |
||||
<picker mode="date" fields="month" :value="currentDate" @change="dateChange"> |
|
||||
<view class="picker-value">{{currentDate}}</view> |
|
||||
</picker> |
<!-- 市场人员资源量统计 --> |
||||
</view> |
<view class="table-section"> |
||||
</view> |
<view class="table-title">市场人员资源量统计</view> |
||||
|
<view class="table-container"> |
||||
<!-- 市场人员资源量统计 --> |
<view class="table-header"> |
||||
<view class="table-section"> |
<view class="th th-person">人员</view> |
||||
<view class="table-title">市场人员资源量统计</view> |
<view class="th th-week">周数量</view> |
||||
<view class="table-container"> |
<view class="th th-month">月数量</view> |
||||
<view class="table-header"> |
<view class="th th-year">年数量</view> |
||||
<view class="th th-person">人员</view> |
</view> |
||||
<view class="th th-week">周数量</view> |
<view class="table-body"> |
||||
<view class="th th-month">月数量</view> |
<view class="table-row" v-for="(item, index) in staffData" :key="index"> |
||||
<view class="th th-year">年数量</view> |
<view class="td td-person">{{item.name}}</view> |
||||
</view> |
<view class="td td-week">{{item.weekCount}}</view> |
||||
<view class="table-body"> |
<view class="td td-month">{{item.monthCount}}</view> |
||||
<view class="table-row" v-for="(item, index) in staffData" :key="index"> |
<view class="td td-year">{{item.yearCount}}</view> |
||||
<view class="td td-person">{{item.name}}</view> |
</view> |
||||
<view class="td td-week">{{item.weekCount}}</view> |
</view> |
||||
<view class="td td-month">{{item.monthCount}}</view> |
</view> |
||||
<view class="td td-year">{{item.yearCount}}</view> |
</view> |
||||
</view> |
|
||||
</view> |
<!-- 校区人员资源渠道量 --> |
||||
</view> |
<view class="table-section"> |
||||
</view> |
<view class="table-title">{{currentMonth}}月 - 年度校区人员资源渠道量</view> |
||||
|
<view class="table-container"> |
||||
<!-- 校区人员资源渠道量 --> |
<view class="table-header"> |
||||
<view class="table-section"> |
<view class="th th-channel" style="width: 100px;">渠道</view> |
||||
<view class="table-title">{{currentMonth}}月 - 年度校区人员资源渠道量</view> |
<view class="th" v-for="(school, index) in schoolList" :key="index">{{school.name}}</view> |
||||
<view class="table-container"> |
<view class="th th-total">渠道合计</view> |
||||
<view class="table-header"> |
</view> |
||||
<view class="th th-channel" style="width: 100px;">渠道</view> |
<view class="table-body"> |
||||
<view class="th" v-for="(school, index) in schoolList" :key="index">{{school.name}}</view> |
<view class="table-row" v-for="(channel, index) in channelSchoolData" :key="index"> |
||||
<view class="th th-total">渠道合计</view> |
<view class="td td-channel" style="width: 100px;">{{channel.name}}</view> |
||||
</view> |
<view class="td" v-for="(school, sIndex) in schoolList" :key="sIndex"> |
||||
<view class="table-body"> |
{{channel.schools[school.id] || 0}} |
||||
<view class="table-row" v-for="(channel, index) in channelSchoolData" :key="index"> |
</view> |
||||
<view class="td td-channel" style="width: 100px;">{{channel.name}}</view> |
<view class="td td-total">{{channel.total}}</view> |
||||
<view class="td" v-for="(school, sIndex) in schoolList" :key="sIndex"> |
</view> |
||||
{{channel.schools[school.id] || 0}} |
</view> |
||||
</view> |
</view> |
||||
<view class="td td-total">{{channel.total}}</view> |
</view> |
||||
</view> |
|
||||
</view> |
<!-- 市场人员资源渠道统计 --> |
||||
</view> |
<view class="table-section"> |
||||
</view> |
<view class="table-title">{{currentMonth}}月 - 年度市场人员资源渠道统计</view> |
||||
|
<view class="table-container"> |
||||
<!-- 市场人员资源渠道统计 --> |
<view class="table-header"> |
||||
<view class="table-section"> |
<view class="th th-channel" style="width: 100px;">渠道</view> |
||||
<view class="table-title">{{currentMonth}}月 - 年度市场人员资源渠道统计</view> |
<view class="th" v-for="(staff, index) in marketStaffList" :key="index">市场{{staff.name}}</view> |
||||
<view class="table-container"> |
<view class="th th-total">资源合计</view> |
||||
<view class="table-header"> |
</view> |
||||
<view class="th th-channel" style="width: 100px;">渠道</view> |
<view class="table-body"> |
||||
<view class="th" v-for="(staff, index) in marketStaffList" :key="index">市场{{staff.name}}</view> |
<view class="table-row" v-for="(channel, index) in channelStaffData" :key="index"> |
||||
<view class="th th-total">资源合计</view> |
<view class="td td-channel" style="width: 100px;">{{channel.name}}</view> |
||||
</view> |
<view class="td" v-for="(staff, sIndex) in marketStaffList" :key="sIndex"> |
||||
<view class="table-body"> |
{{channel.staffs[staff.id] || 0}} |
||||
<view class="table-row" v-for="(channel, index) in channelStaffData" :key="index"> |
</view> |
||||
<view class="td td-channel" style="width: 100px;">{{channel.name}}</view> |
<view class="td td-total">{{channel.total}}</view> |
||||
<view class="td" v-for="(staff, sIndex) in marketStaffList" :key="sIndex"> |
</view> |
||||
{{channel.staffs[staff.id] || 0}} |
</view> |
||||
</view> |
</view> |
||||
<view class="td td-total">{{channel.total}}</view> |
</view> |
||||
</view> |
<!-- 底部导航--> |
||||
</view> |
<AQTabber /> |
||||
</view> |
</view> |
||||
</view> |
|
||||
</view> |
|
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
import apiRoute from '@/api/apiRoute.js'; |
import apiRoute from '@/api/apiRoute.js'; |
||||
|
import AQTabber from "@/components/AQ/AQTabber.vue" |
||||
export default { |
export default { |
||||
data() { |
components: { |
||||
return { |
AQTabber, |
||||
currentDate: this.formatDate(new Date()), |
}, |
||||
currentMonth: new Date().getMonth() + 1, |
data() { |
||||
// 市场人员资源量统计 |
return { |
||||
staffData: [ |
currentDate: this.formatDate(new Date()), |
||||
{ name: 'A', weekCount: 0, monthCount: 0, yearCount: 0 }, |
currentMonth: new Date().getMonth() + 1, |
||||
{ name: 'B', weekCount: 0, monthCount: 0, yearCount: 0 }, |
// 市场人员资源量统计 |
||||
{ name: 'C', weekCount: 0, monthCount: 0, yearCount: 0 }, |
staffData: [{ |
||||
{ name: 'D', weekCount: 0, monthCount: 0, yearCount: 0 }, |
name: 'A', |
||||
{ name: 'E', weekCount: 0, monthCount: 0, yearCount: 0 } |
weekCount: 0, |
||||
], |
monthCount: 0, |
||||
// 校区列表 |
yearCount: 0 |
||||
schoolList: [ |
}, |
||||
{ id: 1, name: '校区1' }, |
{ |
||||
{ id: 2, name: '校区2' }, |
name: 'B', |
||||
{ id: 3, name: '校区3' }, |
weekCount: 0, |
||||
{ id: 4, name: '校区4' }, |
monthCount: 0, |
||||
{ id: 5, name: '校区5' } |
yearCount: 0 |
||||
], |
}, |
||||
// 渠道列表 |
{ |
||||
channelList: [ |
name: 'C', |
||||
{ id: 1, name: '地推' }, |
weekCount: 0, |
||||
{ id: 2, name: '转介绍' }, |
monthCount: 0, |
||||
{ id: 3, name: '美团/大众' }, |
yearCount: 0 |
||||
{ id: 4, name: '抖音' }, |
}, |
||||
{ id: 5, name: '小红书' }, |
{ |
||||
{ id: 6, name: '其他' } |
name: 'D', |
||||
], |
weekCount: 0, |
||||
// 市场人员列表 |
monthCount: 0, |
||||
marketStaffList: [ |
yearCount: 0 |
||||
{ id: 'A', name: 'A' }, |
}, |
||||
{ id: 'B', name: 'B' }, |
{ |
||||
{ id: 'C', name: 'C' }, |
name: 'E', |
||||
{ id: 'D', name: 'D' } |
weekCount: 0, |
||||
], |
monthCount: 0, |
||||
// 校区渠道数据 |
yearCount: 0 |
||||
channelSchoolData: [], |
} |
||||
// 人员渠道数据 |
], |
||||
channelStaffData: [] |
// 校区列表 |
||||
} |
schoolList: [{ |
||||
}, |
id: 1, |
||||
onLoad() { |
name: '校区1' |
||||
this.initData(); |
}, |
||||
}, |
{ |
||||
methods: { |
id: 2, |
||||
// 格式化日期为 YYYY-MM |
name: '校区2' |
||||
formatDate(date) { |
}, |
||||
const year = date.getFullYear(); |
{ |
||||
const month = (date.getMonth() + 1).toString().padStart(2, '0'); |
id: 3, |
||||
return `${year}-${month}`; |
name: '校区3' |
||||
}, |
}, |
||||
|
{ |
||||
// 日期选择器变更 |
id: 4, |
||||
dateChange(e) { |
name: '校区4' |
||||
this.currentDate = e.detail.value; |
}, |
||||
const [year, month] = this.currentDate.split('-'); |
{ |
||||
this.currentMonth = parseInt(month); |
id: 5, |
||||
this.initData(); |
name: '校区5' |
||||
}, |
} |
||||
|
], |
||||
// 初始化数据 |
// 渠道列表 |
||||
initData() { |
channelList: [{ |
||||
// 模拟获取数据，实际项目中应该调用API |
id: 1, |
||||
this.getStaffStatistics(); |
name: '地推' |
||||
this.getChannelSchoolStatistics(); |
}, |
||||
this.getChannelStaffStatistics(); |
{ |
||||
}, |
id: 2, |
||||
|
name: '转介绍' |
||||
// 获取人员资源量统计 |
}, |
||||
getStaffStatistics() { |
{ |
||||
// 模拟数据，实际项目中应该调用API |
id: 3, |
||||
// 示例：apiRoute.getStaffStatistics({date: this.currentDate}).then(res => {}) |
name: '美团/大众' |
||||
|
}, |
||||
// 模拟随机数据 |
{ |
||||
this.staffData = this.staffData.map(staff => { |
id: 4, |
||||
const monthCount = Math.floor(Math.random() * 100); |
name: '抖音' |
||||
return { |
}, |
||||
...staff, |
{ |
||||
weekCount: Math.floor(Math.random() * 30), |
id: 5, |
||||
monthCount: monthCount, |
name: '小红书' |
||||
yearCount: monthCount + Math.floor(Math.random() * 200) |
}, |
||||
} |
{ |
||||
}); |
id: 6, |
||||
}, |
name: '其他' |
||||
|
} |
||||
// 获取校区渠道统计 |
], |
||||
getChannelSchoolStatistics() { |
// 市场人员列表 |
||||
// 模拟数据，实际项目中应该调用API |
marketStaffList: [{ |
||||
this.channelSchoolData = this.channelList.map(channel => { |
id: 'A', |
||||
const schools = {}; |
name: 'A' |
||||
let total = 0; |
}, |
||||
|
{ |
||||
this.schoolList.forEach(school => { |
id: 'B', |
||||
const count = Math.floor(Math.random() * 50); |
name: 'B' |
||||
schools[school.id] = count; |
}, |
||||
total += count; |
{ |
||||
}); |
id: 'C', |
||||
|
name: 'C' |
||||
return { |
}, |
||||
id: channel.id, |
{ |
||||
name: channel.name, |
id: 'D', |
||||
schools, |
name: 'D' |
||||
total |
} |
||||
} |
], |
||||
}); |
// 校区渠道数据 |
||||
}, |
channelSchoolData: [], |
||||
|
// 人员渠道数据 |
||||
// 获取人员渠道统计 |
channelStaffData: [] |
||||
getChannelStaffStatistics() { |
} |
||||
// 模拟数据，实际项目中应该调用API |
}, |
||||
this.channelStaffData = this.channelList.map(channel => { |
onLoad() { |
||||
const staffs = {}; |
this.initData(); |
||||
let total = 0; |
}, |
||||
|
methods: { |
||||
this.marketStaffList.forEach(staff => { |
// 格式化日期为 YYYY-MM |
||||
const count = Math.floor(Math.random() * 40); |
formatDate(date) { |
||||
staffs[staff.id] = count; |
const year = date.getFullYear(); |
||||
total += count; |
const month = (date.getMonth() + 1).toString().padStart(2, '0'); |
||||
}); |
return `${year}-${month}`; |
||||
|
}, |
||||
return { |
|
||||
id: channel.id, |
// 日期选择器变更 |
||||
name: channel.name, |
dateChange(e) { |
||||
staffs, |
this.currentDate = e.detail.value; |
||||
total |
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> |
</script> |
||||
|
|
||||
<style lang="scss" scoped> |
<style lang="scss" scoped> |
||||
.main_box { |
.main_box { |
||||
min-height: 100vh; |
min-height: 100vh; |
||||
background-color: #1a1a1a; |
background-color: #1a1a1a; |
||||
color: #ffffff; |
color: #ffffff; |
||||
padding-bottom: 30rpx; |
padding-bottom: 30rpx; |
||||
} |
} |
||||
|
|
||||
.navbar_section { |
.navbar_section { |
||||
background-color: #1a1a1a; |
background-color: #1a1a1a; |
||||
height: 88rpx; |
height: 88rpx; |
||||
display: flex; |
display: flex; |
||||
align-items: center; |
align-items: center; |
||||
justify-content: center; |
justify-content: center; |
||||
position: relative; |
position: relative; |
||||
|
|
||||
.title { |
.title { |
||||
font-size: 36rpx; |
font-size: 36rpx; |
||||
font-weight: bold; |
font-weight: bold; |
||||
} |
} |
||||
} |
} |
||||
|
|
||||
.filter-section { |
.filter-section { |
||||
padding: 20rpx; |
padding: 20rpx; |
||||
background-color: #222222; |
background-color: #222222; |
||||
margin: 20rpx; |
margin: 20rpx; |
||||
border-radius: 10rpx; |
border-radius: 10rpx; |
||||
|
|
||||
.filter-item { |
.filter-item { |
||||
display: flex; |
display: flex; |
||||
align-items: center; |
align-items: center; |
||||
|
|
||||
.label { |
.label { |
||||
font-size: 28rpx; |
font-size: 28rpx; |
||||
margin-right: 10rpx; |
margin-right: 10rpx; |
||||
} |
} |
||||
|
|
||||
.picker-value { |
.picker-value { |
||||
padding: 10rpx 20rpx; |
padding: 10rpx 20rpx; |
||||
background-color: #333333; |
background-color: #333333; |
||||
border-radius: 6rpx; |
border-radius: 6rpx; |
||||
font-size: 28rpx; |
font-size: 28rpx; |
||||
} |
} |
||||
} |
} |
||||
} |
} |
||||
|
|
||||
.table-section { |
.table-section { |
||||
margin: 30rpx 20rpx; |
margin: 30rpx 20rpx; |
||||
background-color: #222222; |
background-color: #222222; |
||||
border-radius: 10rpx; |
border-radius: 10rpx; |
||||
overflow: hidden; |
overflow: hidden; |
||||
|
|
||||
.table-title { |
.table-title { |
||||
font-size: 32rpx; |
font-size: 32rpx; |
||||
font-weight: bold; |
font-weight: bold; |
||||
padding: 20rpx; |
padding: 20rpx; |
||||
border-bottom: 1px solid #333333; |
border-bottom: 1px solid #333333; |
||||
} |
} |
||||
|
|
||||
.table-container { |
.table-container { |
||||
width: 100%; |
width: 100%; |
||||
overflow-x: auto; |
overflow-x: auto; |
||||
} |
} |
||||
|
|
||||
.table-header { |
.table-header { |
||||
display: flex; |
display: flex; |
||||
background-color: #333333; |
background-color: #333333; |
||||
|
|
||||
.th { |
.th { |
||||
padding: 15rpx 10rpx; |
padding: 15rpx 10rpx; |
||||
font-size: 26rpx; |
font-size: 26rpx; |
||||
text-align: center; |
text-align: center; |
||||
flex: 1; |
flex: 1; |
||||
min-width: 100rpx; |
min-width: 100rpx; |
||||
font-weight: bold; |
font-weight: bold; |
||||
} |
} |
||||
} |
} |
||||
|
|
||||
.table-body { |
.table-body { |
||||
.table-row { |
.table-row { |
||||
display: flex; |
display: flex; |
||||
border-bottom: 1px solid #333333; |
border-bottom: 1px solid #333333; |
||||
|
|
||||
&:last-child { |
&:last-child { |
||||
border-bottom: none; |
border-bottom: none; |
||||
} |
} |
||||
|
|
||||
.td { |
.td { |
||||
padding: 15rpx 10rpx; |
padding: 15rpx 10rpx; |
||||
font-size: 26rpx; |
font-size: 26rpx; |
||||
text-align: center; |
text-align: center; |
||||
flex: 1; |
flex: 1; |
||||
min-width: 100rpx; |
min-width: 100rpx; |
||||
} |
} |
||||
} |
} |
||||
} |
} |
||||
|
|
||||
.th-person, .td-person { |
.th-person, |
||||
min-width: 80rpx; |
.td-person { |
||||
flex: 0.8; |
min-width: 80rpx; |
||||
} |
flex: 0.8; |
||||
|
} |
||||
.th-week, .td-week, |
|
||||
.th-month, .td-month, |
.th-week, |
||||
.th-year, .td-year { |
.td-week, |
||||
flex: 1; |
.th-month, |
||||
} |
.td-month, |
||||
|
.th-year, |
||||
.th-channel, .td-channel { |
.td-year { |
||||
flex: 1.2; |
flex: 1; |
||||
text-align: left; |
} |
||||
padding-left: 20rpx; |
|
||||
} |
.th-channel, |
||||
|
.td-channel { |
||||
.th-total, .td-total { |
flex: 1.2; |
||||
flex: 1.2; |
text-align: left; |
||||
font-weight: bold; |
padding-left: 20rpx; |
||||
} |
} |
||||
} |
|
||||
</style> |
.th-total, |
||||
|
.td-total { |
||||
|
flex: 1.2; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue