Compare commits
6 Commits
6d5bea10a4
...
master
| Author | SHA1 | Date | |
|---|---|---|---|
| 2e3fcadc14 | |||
| 30237639c7 | |||
| 301b3a2582 | |||
| b5f280b02f | |||
| 44124b6931 | |||
| f51dfda073 |
@@ -94,7 +94,8 @@ const mainRoutes = {
|
||||
{ path: '/reportList-lingshuFullYear', component: _import('modules/reportList/lingshuFullYear'), name: 'reportList-lingshuFullYear', meta: { title: '灵枢年度报表', isTab: true } },
|
||||
{ path: '/content-psychologicalForum', component: _import('modules/content/psychologicalForum'), name: 'content-psychologicalForum', meta: { title: '心理论坛', isTab: true } },
|
||||
{ path: '/statisticsBusiness-courseStatistics', component: _import('modules/statisticsBusiness/courseStatistics/index'), name: 'statisticsBusiness-courseStatistics', meta: { title: '课程统计', isTab: true } },
|
||||
{ path: '/statisticsBusiness-vipStatistics', component: _import('modules/statisticsBusiness/vipStatistics/index'), name: 'statisticsBusiness-vipStatistics', meta: { title: 'VIP统计', isTab: true } }
|
||||
{ path: '/statisticsBusiness-vipStatistics', component: _import('modules/statisticsBusiness/vipStatistics/index'), name: 'statisticsBusiness-vipStatistics', meta: { title: 'VIP统计', isTab: true } },
|
||||
{ path: '/statisticsBusiness-userStatistics', component: _import('modules/statisticsBusiness/userStatistics/index'), name: 'statisticsBusiness-userStatistics', meta: { title: '用户统计', isTab: true } },
|
||||
],
|
||||
beforeEnter (to, from, next) {
|
||||
let token = Vue.cookie.get('token')
|
||||
|
||||
@@ -61,7 +61,7 @@
|
||||
<!-- 弹窗, 新增 / 修改 -->
|
||||
<el-dialog :visible.sync="addOrUpdateVisible" :close-on-click-modal="false" :append-to-body="true" :title="titlesub"
|
||||
width="50%" @close="cancleClose">
|
||||
<el-form :inline="true" :model="addForm" ref="addFormRef" :rules="addFormRule">
|
||||
<el-form :inline="true" :model="addForm" ref="addFormRef" :rules="addFormRule" label-width="100px">
|
||||
<el-row type="flex" justify="center">
|
||||
<el-form-item label="姓名" prop="name">
|
||||
<el-input style="width:500px" v-model="addForm.name"></el-input>
|
||||
@@ -76,17 +76,39 @@
|
||||
</el-form-item>
|
||||
</el-row>
|
||||
<el-row type="flex" justify="center">
|
||||
<el-form-item label="url" prop="url" label-width="48px">
|
||||
<el-form-item label="关联用户" prop="tel">
|
||||
<el-autocomplete
|
||||
size="large"
|
||||
style="width: 500px;"
|
||||
v-model="addForm.tel"
|
||||
:debounce="500"
|
||||
:fetch-suggestions="loadAll"
|
||||
placeholder="请输入手机号/邮箱"
|
||||
@select="handleSelect"
|
||||
>
|
||||
<template #default="{ item }">
|
||||
<div class="custom-item">
|
||||
<span>{{ item.tel ? item.tel : item.email }}</span>
|
||||
<span style="color: gray; margin-left: 10px;" v-if="item.name"
|
||||
>({{ item.name }})</span
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
</el-autocomplete>
|
||||
</el-form-item>
|
||||
</el-row>
|
||||
<el-row type="flex" justify="center">
|
||||
<el-form-item label="url" prop="url">
|
||||
<el-input style="width:500px" v-model="addForm.url"></el-input>
|
||||
</el-form-item>
|
||||
</el-row>
|
||||
<el-row type="flex" justify="center">
|
||||
<el-form-item label="内容" prop="content" label-width="48px">
|
||||
<el-form-item label="内容" prop="content">
|
||||
<el-input style="width:500px" v-model="addForm.content" :rows="5" type="textarea"></el-input>
|
||||
</el-form-item>
|
||||
</el-row>
|
||||
<el-row type="flex" justify="center">
|
||||
<el-form-item label="地址" prop="cityId" label-width="48px">
|
||||
<el-form-item label="地址" prop="cityId">
|
||||
<el-select v-model="addForm.provId" placeholder="请选择省份" style="width:249px" @change="provinceChange">
|
||||
<el-option v-for="item in provinceEntity" :key="item.provId" :label="item.provName" :value="item.provId">
|
||||
</el-option>
|
||||
@@ -98,17 +120,19 @@
|
||||
</el-form-item>
|
||||
</el-row>
|
||||
<el-row type="flex" justify="center">
|
||||
<el-form-item label="图片" prop="img" label-width="48px">
|
||||
<el-form-item label="图片" prop="img">
|
||||
<div style="width: 500px;">
|
||||
<el-upload class="el-uploadfeng " ref="files"
|
||||
:class="{ uoloadSty: dataForm.showBtnDealImg, disUoloadSty: dataForm.noneBtnImg }"
|
||||
:action="baseUrl + '/oss/fileoss'" list-type="picture-card" :file-list="fileList"
|
||||
:on-success="handlePicSuccess" accept=".jpeg,.jpg,.gif,.png" :on-remove="handleRemove">
|
||||
<i class="el-icon-plus"></i>
|
||||
</el-upload>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-row>
|
||||
<el-row type="flex" justify="center">
|
||||
<el-form-item label="排序" label-width="48px">
|
||||
<el-form-item label="排序">
|
||||
<el-input style="width:500px" v-model="addForm.sort"></el-input>
|
||||
</el-form-item>
|
||||
</el-row>
|
||||
@@ -131,6 +155,7 @@
|
||||
cityEntity: [],
|
||||
provinceEntity: [], //省地址
|
||||
typeList: [], //类型列表
|
||||
userList: [], //用户列表
|
||||
booknameList: [],
|
||||
dataForm: {
|
||||
dictType: '', //分类
|
||||
@@ -145,6 +170,8 @@
|
||||
content: '',
|
||||
cityId: '',
|
||||
provId: '',
|
||||
userId: '', //关联用户id
|
||||
tel: '',
|
||||
sort: 0
|
||||
},
|
||||
editId: '',
|
||||
@@ -153,6 +180,10 @@
|
||||
required: true,
|
||||
message: "请选择分类"
|
||||
}],
|
||||
tel: [{
|
||||
required: true,
|
||||
message: "请选择关联用户"
|
||||
}],
|
||||
name: [{
|
||||
required: true,
|
||||
message: "请输入姓名"
|
||||
@@ -239,6 +270,33 @@
|
||||
this.dataListLoading = false
|
||||
})
|
||||
},
|
||||
loadAll(queryString, cb) {
|
||||
console.log('queryString', queryString);
|
||||
if (queryString == "") {
|
||||
return false;
|
||||
}
|
||||
this.$http({
|
||||
url: this.$http.adornUrl("/book/user/getUserList"),
|
||||
method: "post",
|
||||
data: this.$http.adornData({
|
||||
page: 1,
|
||||
limit: 20,
|
||||
key: queryString
|
||||
})
|
||||
}).then(({ data }) => {
|
||||
if (data && data.code === 0) {
|
||||
var arr = data.user.records;
|
||||
cb(arr);
|
||||
} else {
|
||||
cb([]);
|
||||
}
|
||||
});
|
||||
},
|
||||
handleSelect(data) {
|
||||
console.log("data at line 161:", data);
|
||||
this.addForm.userId = data.id;
|
||||
this.addForm.tel = data.tel ? data.tel : data.email;
|
||||
},
|
||||
provinceChange() {
|
||||
this.addForm.cityId = ''
|
||||
this.cityEntity = []
|
||||
@@ -281,6 +339,8 @@
|
||||
this.addForm.content = row.content
|
||||
this.addForm.typeId = row.type.toString()
|
||||
this.addForm.sort = row.sort
|
||||
this.addForm.tel = row.tel
|
||||
this.addForm.userId = row.userId ? row.userId : ''
|
||||
this.fileList = row.imgList
|
||||
for (var i = 0; i < this.provinceEntity.length; i++) {
|
||||
for (var j = 0; j < this.provinceEntity[i].cityList.length; j++) {
|
||||
@@ -311,6 +371,8 @@
|
||||
content: '',
|
||||
cityId: '',
|
||||
provId: '',
|
||||
userId: '',
|
||||
tel: '',
|
||||
sort: 0
|
||||
}
|
||||
this.fileList = []
|
||||
@@ -382,7 +444,9 @@
|
||||
"content": this.addForm.content,
|
||||
"type": this.addForm.typeId,
|
||||
"cityId": this.addForm.cityId,
|
||||
"sort": this.addForm.sort
|
||||
"sort": this.addForm.sort,
|
||||
"userId": this.addForm.userId,
|
||||
"tel": this.addForm.tel
|
||||
})
|
||||
}).then(({
|
||||
data
|
||||
|
||||
@@ -217,22 +217,13 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import '../styles/statistics-common.less';
|
||||
|
||||
.course-statistics-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: calc(100vh - 220px);
|
||||
|
||||
.table-container {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
.sb-page-height-with-table();
|
||||
}
|
||||
|
||||
.el-form .el-form-item {
|
||||
margin-bottom: 10px !important;
|
||||
}
|
||||
.sb-form-item-ten();
|
||||
|
||||
/deep/ .el-dialog__wrapper .el-dialog__body {
|
||||
padding-top: 0 !important;
|
||||
}
|
||||
.sb-dialog-body-no-top-padding();
|
||||
</style>
|
||||
|
||||
@@ -414,15 +414,10 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.course-statistics-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: calc(100vh - 220px);
|
||||
@import '../styles/statistics-common.less';
|
||||
|
||||
.table-container {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
.course-statistics-container {
|
||||
.sb-page-height-with-table();
|
||||
}
|
||||
|
||||
.dialog-header {
|
||||
@@ -438,11 +433,7 @@ export default {
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.el-form .el-form-item {
|
||||
margin-bottom: 10px !important;
|
||||
}
|
||||
.sb-form-item-ten();
|
||||
|
||||
/deep/ .el-dialog__wrapper .el-dialog__body {
|
||||
padding-top: 0 !important;
|
||||
}
|
||||
.sb-dialog-body-no-top-padding();
|
||||
</style>
|
||||
|
||||
@@ -31,8 +31,8 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.el-form .el-form-item {
|
||||
margin-bottom: 10px !important;
|
||||
}
|
||||
<style scoped lang="less">
|
||||
@import '../styles/statistics-common.less';
|
||||
|
||||
.sb-form-item-ten();
|
||||
</style>
|
||||
|
||||
@@ -177,18 +177,11 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import '../styles/statistics-common.less';
|
||||
|
||||
.course-label-statistics-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: calc(100vh - 220px);
|
||||
|
||||
.table-container {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
.sb-page-height-with-table();
|
||||
}
|
||||
|
||||
.el-form .el-form-item {
|
||||
margin-bottom: 10px !important;
|
||||
}
|
||||
.sb-form-item-ten();
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,153 @@
|
||||
.sb-form-item-zero() {
|
||||
.el-form-item {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.sb-form-item-ten() {
|
||||
.el-form .el-form-item {
|
||||
margin-bottom: 10px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.sb-table-compact() {
|
||||
/deep/ .el-table .cell,
|
||||
/deep/ .el-table th > .cell {
|
||||
padding-top: 4px;
|
||||
padding-bottom: 4px;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.sb-statistics-table-min() {
|
||||
/deep/ .statistics-table {
|
||||
min-height: 500px;
|
||||
}
|
||||
|
||||
/deep/ .statistics-table .el-table__body-wrapper,
|
||||
/deep/ .statistics-table .el-table__empty-block {
|
||||
min-height: 452px;
|
||||
}
|
||||
}
|
||||
|
||||
.sb-page-height-with-table() {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: calc(100vh - 220px);
|
||||
|
||||
.table-container {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.sb-dialog-body-no-top-padding() {
|
||||
/deep/ .el-dialog__wrapper .el-dialog__body {
|
||||
padding-top: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.sb-white-panel(@padding: 8px) {
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
padding: @padding;
|
||||
}
|
||||
|
||||
.sb-flex-column-fill() {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.sb-detail-header(@mb: 16px) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: @mb;
|
||||
}
|
||||
|
||||
.sb-title-16() {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.sb-summary-card-text() {
|
||||
.summary-card__label {
|
||||
margin-bottom: 8px;
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
.summary-card__value {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: #1f2d3d;
|
||||
}
|
||||
}
|
||||
|
||||
.sb-summary-section-flex(@gap: 12px) {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: @gap;
|
||||
}
|
||||
|
||||
.sb-summary-card-shell(
|
||||
@basis: 180px,
|
||||
@width: 180px,
|
||||
@minHeight: 180px,
|
||||
@padding: 16px,
|
||||
@bg: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%)
|
||||
) {
|
||||
display: flex;
|
||||
flex: 1 1 @basis;
|
||||
width: @width;
|
||||
flex-direction: column;
|
||||
min-height: @minHeight;
|
||||
padding: @padding;
|
||||
border: 1px solid #ebeef5;
|
||||
border-radius: 8px;
|
||||
background: @bg;
|
||||
box-shadow: 0 4px 12px rgba(31, 45, 61, 0.06);
|
||||
}
|
||||
|
||||
.sb-summary-card-two-columns(@basis: 280px, @width: 280px) {
|
||||
flex-basis: @basis;
|
||||
width: @width;
|
||||
}
|
||||
|
||||
.sb-summary-card-title(@mb: 14px) {
|
||||
margin-bottom: @mb;
|
||||
.sb-title-16();
|
||||
}
|
||||
|
||||
.sb-summary-card-body(@gap: 10px) {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
gap: @gap;
|
||||
}
|
||||
|
||||
.sb-summary-card-body-two-columns(@rowGap: 10px, @colGap: 30px) {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: @rowGap @colGap;
|
||||
}
|
||||
|
||||
.sb-summary-line(@gap: 12px) {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: @gap;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.sb-summary-line-label() {
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
.sb-summary-line-value() {
|
||||
font-weight: 700;
|
||||
color: #1f2d3d;
|
||||
text-align: right;
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
<template>
|
||||
<userStatisticsBase mode="null" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import userStatisticsBase from './userStatisticsBase'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
userStatisticsBase
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,14 @@
|
||||
<template>
|
||||
<userStatisticsBase mode="day" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import userStatisticsBase from './userStatisticsBase'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
userStatisticsBase
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,43 @@
|
||||
<template>
|
||||
<div class="mod-config">
|
||||
<el-tabs v-model="activeTab" type="card">
|
||||
<el-tab-pane label="当日" name="dayUser" />
|
||||
<el-tab-pane label="月度" name="monthUser" />
|
||||
<el-tab-pane label="年度" name="yearUser" />
|
||||
<el-tab-pane label="全部" name="allUser" />
|
||||
<el-tab-pane label="留存率" name="retainUser" />
|
||||
</el-tabs>
|
||||
<keep-alive>
|
||||
<component :is="activeTab" />
|
||||
</keep-alive>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import allUser from './allUser'
|
||||
import dayUser from './dayUser'
|
||||
import monthUser from './monthUser'
|
||||
import yearUser from './yearUser'
|
||||
import retainUser from './retainUser'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
dayUser,
|
||||
monthUser,
|
||||
yearUser,
|
||||
allUser,
|
||||
retainUser
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeTab: 'dayUser'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import '../styles/statistics-common.less';
|
||||
|
||||
.sb-form-item-ten();
|
||||
</style>
|
||||
@@ -0,0 +1,14 @@
|
||||
<template>
|
||||
<userStatisticsBase mode="month" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import userStatisticsBase from './userStatisticsBase'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
userStatisticsBase
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,230 @@
|
||||
<template>
|
||||
<div class="retain-statistics-container" v-loading="loading">
|
||||
<div class="query-section">
|
||||
<el-form :inline="true" @keyup.enter.native="getDataList">
|
||||
<el-form-item label="统计月份">
|
||||
<el-date-picker
|
||||
v-model="currentMonth"
|
||||
type="month"
|
||||
format="yyyy-MM"
|
||||
value-format="yyyy-MM"
|
||||
placeholder="请选择月份"
|
||||
size="small"
|
||||
popper-append-to-body
|
||||
:picker-options="pickerOptions"
|
||||
@change="getDataList"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" size="small" @click="getDataList">刷新</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button
|
||||
type="success"
|
||||
size="small"
|
||||
:loading="exportLoading"
|
||||
@click="exportData"
|
||||
>
|
||||
下载报表
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<div class="table-section">
|
||||
<div ref="tableContainer" class="table-container">
|
||||
<el-table
|
||||
:data="tableData"
|
||||
border
|
||||
:max-height="tableHeight"
|
||||
:header-cell-style="{ textAlign: 'center', padding: '6px 0' }"
|
||||
:cell-style="{ textAlign: 'center', padding: '6px 0' }"
|
||||
>
|
||||
<el-table-column prop="dayTime" label="日期" min-width="120" />
|
||||
<el-table-column prop="count" label="新增用户数" min-width="110" />
|
||||
<el-table-column prop="nextDay" label="次日留存用户数" min-width="130" />
|
||||
<el-table-column prop="nextRate" label="次日留存率" min-width="110" />
|
||||
<el-table-column prop="day7" label="7日留存用户数" min-width="120" />
|
||||
<el-table-column prop="rate7" label="7日留存率" min-width="100" />
|
||||
<el-table-column prop="day30" label="30日留存用户数" min-width="130" />
|
||||
<el-table-column prop="rate30" label="30日留存率" min-width="110" />
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import http from '@/utils/httpRequest'
|
||||
|
||||
function formatMonth(date) {
|
||||
const y = date.getFullYear()
|
||||
const m = `${date.getMonth() + 1}`.padStart(2, '0')
|
||||
return `${y}-${m}`
|
||||
}
|
||||
|
||||
function normalizeNumber(value) {
|
||||
if (value === null || value === undefined || value === '') return 0
|
||||
const num = Number(value)
|
||||
return Number.isNaN(num) ? 0 : num
|
||||
}
|
||||
|
||||
function formatRate(value) {
|
||||
if (value === null || value === undefined || value === '') return '0%'
|
||||
if (typeof value === 'string') {
|
||||
const text = value.trim()
|
||||
if (!text) return '0%'
|
||||
if (text.includes('%')) return text
|
||||
const num = Number(text)
|
||||
if (Number.isNaN(num)) return '0%'
|
||||
if (num <= 1) return `${(num * 100).toFixed(0)}%`
|
||||
return `${num.toFixed(0)}%`
|
||||
}
|
||||
const num = Number(value)
|
||||
if (Number.isNaN(num)) return '0%'
|
||||
if (num <= 1) return `${(num * 100).toFixed(0)}%`
|
||||
return `${num.toFixed(0)}%`
|
||||
}
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
exportLoading: false,
|
||||
currentMonth: '',
|
||||
tableData: [],
|
||||
tableHeight: 500,
|
||||
pickerOptions: {
|
||||
disabledDate(time) {
|
||||
const now = new Date()
|
||||
return time.getTime() > now.getTime()
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
activated() {
|
||||
if (!this.currentMonth) {
|
||||
this.currentMonth = formatMonth(new Date())
|
||||
}
|
||||
this.getDataList()
|
||||
this.$nextTick(() => {
|
||||
this.calculateTableHeight()
|
||||
})
|
||||
},
|
||||
mounted() {
|
||||
window.addEventListener('resize', this.handleResize)
|
||||
this.$nextTick(() => {
|
||||
this.calculateTableHeight()
|
||||
})
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.handleResize)
|
||||
},
|
||||
methods: {
|
||||
handleResize() {
|
||||
this.calculateTableHeight()
|
||||
},
|
||||
calculateTableHeight() {
|
||||
if (this.$refs.tableContainer) {
|
||||
this.tableHeight = this.$refs.tableContainer.offsetHeight || 500
|
||||
} else {
|
||||
this.tableHeight = 500
|
||||
}
|
||||
},
|
||||
normalizeRows(userList = []) {
|
||||
return userList.map((item) => ({
|
||||
dayTime: item.dayTime || '--',
|
||||
count: normalizeNumber(item.count),
|
||||
nextDay: normalizeNumber(item.nextDay),
|
||||
nextRate: formatRate(item.nextRate),
|
||||
day7: normalizeNumber(item['7Day']),
|
||||
rate7: formatRate(item['7Rate']),
|
||||
day30: normalizeNumber(item['30Day']),
|
||||
rate30: formatRate(item['30Rate'])
|
||||
}))
|
||||
},
|
||||
getDataList() {
|
||||
if (!this.currentMonth) {
|
||||
this.currentMonth = formatMonth(new Date())
|
||||
}
|
||||
this.loading = true
|
||||
http({
|
||||
url: http.adornUrl('/master/statisticsBusinessUser/getUserRegisterStayInfo'),
|
||||
method: 'post',
|
||||
data: http.adornData({
|
||||
date: this.currentMonth
|
||||
})
|
||||
}).then(({ data }) => {
|
||||
if (data && data.code === 0) {
|
||||
this.tableData = this.normalizeRows(data.userList || [])
|
||||
} else {
|
||||
this.tableData = []
|
||||
}
|
||||
}).finally(() => {
|
||||
this.loading = false
|
||||
this.$nextTick(() => {
|
||||
this.calculateTableHeight()
|
||||
})
|
||||
})
|
||||
},
|
||||
exportData() {
|
||||
if (!this.currentMonth) {
|
||||
this.currentMonth = formatMonth(new Date())
|
||||
}
|
||||
this.exportLoading = true
|
||||
http({
|
||||
url: http.adornUrl('/master/statisticsBusinessUser/exportUserRegisterStayInfo'),
|
||||
method: 'post',
|
||||
data: http.adornData({
|
||||
date: this.currentMonth
|
||||
}),
|
||||
responseType: 'blob'
|
||||
}).then((response) => {
|
||||
const blob = new Blob([response.data])
|
||||
const link = document.createElement('a')
|
||||
link.href = URL.createObjectURL(blob)
|
||||
link.download = `留存率统计报表-${this.currentMonth}.xlsx`
|
||||
link.click()
|
||||
URL.revokeObjectURL(link.href)
|
||||
}).catch(() => {
|
||||
this.$message.error('下载失败,请稍后重试')
|
||||
}).finally(() => {
|
||||
this.exportLoading = false
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import '../styles/statistics-common.less';
|
||||
|
||||
.retain-statistics-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: calc(100vh - 220px);
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.query-section,
|
||||
.table-section {
|
||||
.sb-white-panel(8px);
|
||||
}
|
||||
|
||||
.table-section {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.sb-form-item-zero();
|
||||
|
||||
.table-container {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.sb-table-compact();
|
||||
</style>
|
||||
@@ -0,0 +1,367 @@
|
||||
<template>
|
||||
<div class="user-statistics-page" v-loading="loading">
|
||||
<div v-if="mode !== 'null'" class="query-section">
|
||||
<el-form :inline="true" @keyup.enter.native="getDataList">
|
||||
<el-form-item :label="queryLabel">
|
||||
<el-date-picker
|
||||
v-model="currentDate"
|
||||
:type="pickerType"
|
||||
:format="displayFormat"
|
||||
:value-format="valueFormat"
|
||||
placeholder="请选择"
|
||||
size="small"
|
||||
popper-append-to-body
|
||||
:picker-options="pickerOptions"
|
||||
@change="handleQueryChange"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" size="small" @click="refreshData">刷新</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<div class="summary-section">
|
||||
<div class="summary-card">
|
||||
<div class="summary-card__label">{{ timePrefix }}登录人数</div>
|
||||
<div class="summary-card__value">{{ summary.loginCount }}</div>
|
||||
</div>
|
||||
<div class="summary-card">
|
||||
<div class="summary-card__label">{{ timePrefix }}注册人数</div>
|
||||
<div class="summary-card__value">{{ summary.createCount }}</div>
|
||||
</div>
|
||||
<div class="summary-card">
|
||||
<div class="summary-card__label">截止今日 近30天内活跃人数</div>
|
||||
<div class="summary-card__value">{{ summary.userCountFor30Day }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="table-section">
|
||||
<div class="table-header">
|
||||
<div class="table-title">用户统计明细({{ total }})</div>
|
||||
<el-button
|
||||
type="success"
|
||||
size="small"
|
||||
:loading="exportLoading"
|
||||
@click="exportData"
|
||||
>下载报表</el-button>
|
||||
</div>
|
||||
|
||||
<el-table
|
||||
:data="tableData"
|
||||
border
|
||||
:height="mode !== 'null' ? 470 : 520"
|
||||
:header-cell-style="{ textAlign: 'center', padding: '6px 0' }"
|
||||
:cell-style="{ textAlign: 'center', padding: '6px 0' }"
|
||||
>
|
||||
<el-table-column type="index" label="序号" width="70" :index="indexMethod" />
|
||||
<el-table-column prop="name" label="姓名" min-width="100" />
|
||||
<el-table-column prop="tel" label="电话" min-width="130" />
|
||||
<el-table-column prop="createTime" label="注册时间" min-width="120" />
|
||||
<el-table-column prop="loginCity" label="城市" min-width="100" />
|
||||
<el-table-column prop="come" label="注册来源" min-width="110" />
|
||||
<el-table-column prop="socialIdentity" label="社会身份" min-width="120" />
|
||||
<el-table-column prop="identity" label="app用户身份" min-width="120" />
|
||||
<el-table-column prop="jf" label="天医币" min-width="90" />
|
||||
<el-table-column prop="point" label="积分" min-width="90" />
|
||||
<el-table-column prop="beforVip" label="曾vip" min-width="100" />
|
||||
<el-table-column prop="nowVip" label="现vip" min-width="100" />
|
||||
<el-table-column prop="ubo" label="是否买过课程" min-width="110" />
|
||||
<el-table-column prop="ucbl" label="是否复购" min-width="90" />
|
||||
<el-table-column prop="ucerCount" label="课程证几张" min-width="100" />
|
||||
<el-table-column prop="loginTime" label="上次登录时间" min-width="160" />
|
||||
<el-table-column prop="loginMachine" label="设备" min-width="90" />
|
||||
<el-table-column prop="sex" label="性别" min-width="80" />
|
||||
<el-table-column prop="nowWatch" label="当日学习时长" min-width="110" />
|
||||
<el-table-column prop="watch7" label="近七天学习时间" min-width="120" />
|
||||
<el-table-column prop="totalWatch" label="总学习时长" min-width="100" />
|
||||
</el-table>
|
||||
<el-pagination
|
||||
:current-page="page"
|
||||
:page-size="limit"
|
||||
:total="total"
|
||||
layout="total, prev, pager, next, sizes"
|
||||
:page-sizes="[10, 20, 30, 50]"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
style="margin-top: 15px; text-align: right;"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import http from '@/utils/httpRequest'
|
||||
|
||||
function formatDate(date) {
|
||||
const y = date.getFullYear()
|
||||
const m = `${date.getMonth() + 1}`.padStart(2, '0')
|
||||
const d = `${date.getDate()}`.padStart(2, '0')
|
||||
return `${y}-${m}-${d}`
|
||||
}
|
||||
|
||||
function formatMonth(date) {
|
||||
const y = date.getFullYear()
|
||||
const m = `${date.getMonth() + 1}`.padStart(2, '0')
|
||||
return `${y}-${m}`
|
||||
}
|
||||
|
||||
function formatYear(date) {
|
||||
return `${date.getFullYear()}`
|
||||
}
|
||||
|
||||
function normalizeText(value) {
|
||||
if (value === null || value === undefined || value === '') {
|
||||
return '--'
|
||||
}
|
||||
const text = String(value).trim()
|
||||
return text || '--'
|
||||
}
|
||||
|
||||
function normalizeNumber(value) {
|
||||
if (value === null || value === undefined || value === '') {
|
||||
return 0
|
||||
}
|
||||
const num = Number(value)
|
||||
return Number.isNaN(num) ? 0 : num
|
||||
}
|
||||
|
||||
export default {
|
||||
props: {
|
||||
mode: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
exportLoading: false,
|
||||
currentDate: '',
|
||||
summary: {
|
||||
loginCount: 0,
|
||||
createCount: 0,
|
||||
userCountFor30Day: 0
|
||||
},
|
||||
tableData: [],
|
||||
page: 1,
|
||||
limit: 10,
|
||||
total: 0
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
queryLabel() {
|
||||
if (this.mode === 'day') return '统计日期'
|
||||
if (this.mode === 'month') return '统计月份'
|
||||
return '统计年份'
|
||||
},
|
||||
pickerType() {
|
||||
if (this.mode === 'day') return 'date'
|
||||
if (this.mode === 'month') return 'month'
|
||||
if (this.mode === 'year') return 'year'
|
||||
return ''
|
||||
},
|
||||
displayFormat() {
|
||||
if (this.mode === 'day') return 'yyyy-MM-dd'
|
||||
if (this.mode === 'month') return 'yyyy-MM'
|
||||
if (this.mode === 'year') return 'yyyy'
|
||||
return ''
|
||||
},
|
||||
valueFormat() {
|
||||
return this.displayFormat
|
||||
},
|
||||
timePrefix() {
|
||||
// if (this.mode === 'day') return '当日'
|
||||
// if (this.mode === 'month') return '当月'
|
||||
// if (this.mode === 'year') return '当年'
|
||||
return '当日'
|
||||
},
|
||||
pickerOptions() {
|
||||
return {
|
||||
disabledDate(time) {
|
||||
const now = new Date()
|
||||
return time.getTime() > now.getTime()
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
activated() {
|
||||
if (!this.currentDate) {
|
||||
this.currentDate = this.getDefaultDate()
|
||||
}
|
||||
this.getDataList()
|
||||
},
|
||||
methods: {
|
||||
indexMethod(index) {
|
||||
return (this.page - 1) * this.limit + index + 1
|
||||
},
|
||||
handleQueryChange() {
|
||||
this.page = 1
|
||||
this.getDataList()
|
||||
},
|
||||
refreshData() {
|
||||
this.page = 1
|
||||
this.getDataList()
|
||||
},
|
||||
handleSizeChange(val) {
|
||||
this.limit = val
|
||||
this.page = 1
|
||||
this.getDataList()
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
this.page = val
|
||||
this.getDataList()
|
||||
},
|
||||
getDefaultDate() {
|
||||
const now = new Date()
|
||||
if (this.mode === 'day') return formatDate(now)
|
||||
if (this.mode === 'month') return formatMonth(now)
|
||||
if (this.mode === 'year') return formatYear(now)
|
||||
return null
|
||||
},
|
||||
normalizeRows(userList = []) {
|
||||
return userList.map((item) => ({
|
||||
name: normalizeText(item.name),
|
||||
tel: normalizeText(item.tel),
|
||||
createTime: normalizeText(item.createTime),
|
||||
loginCity: normalizeText(item.loginCity),
|
||||
come: normalizeText(item.come),
|
||||
socialIdentity: normalizeText(item.socialIdentity),
|
||||
identity: normalizeText(item.identity),
|
||||
jf: normalizeNumber(item.jf),
|
||||
point: normalizeNumber(item.point),
|
||||
beforVip: normalizeText(item.beforVip),
|
||||
nowVip: normalizeText(item.nowVip),
|
||||
ubo: normalizeText(item.ubo),
|
||||
ucbl: normalizeText(item.ucbl),
|
||||
ucerCount: normalizeNumber(item.ucerCount),
|
||||
loginTime: normalizeText(item.loginTime),
|
||||
loginMachine: normalizeText(item.loginMachine),
|
||||
sex: normalizeText(item.sex),
|
||||
nowWatch: normalizeNumber(item.nowWatch),
|
||||
watch7: normalizeNumber(item['7Watch']),
|
||||
totalWatch: normalizeNumber(item.totalWatch)
|
||||
}))
|
||||
},
|
||||
getDataList() {
|
||||
if (!this.currentDate) {
|
||||
this.currentDate = this.getDefaultDate()
|
||||
}
|
||||
this.loading = true
|
||||
http({
|
||||
url: http.adornUrl('/master/statisticsBusinessUser/getUserStatistics'),
|
||||
method: 'post',
|
||||
data: http.adornData({
|
||||
date: this.currentDate,
|
||||
page: this.page,
|
||||
limit: this.limit
|
||||
})
|
||||
}).then(({ data }) => {
|
||||
if (data && data.code === 0) {
|
||||
this.summary = {
|
||||
loginCount: normalizeNumber(data.loginCount),
|
||||
createCount: normalizeNumber(data.createCount),
|
||||
userCountFor30Day: normalizeNumber(data.userCountFor30Day)
|
||||
}
|
||||
this.tableData = this.normalizeRows(data.userList || [])
|
||||
this.total = normalizeNumber(data.totalSize)
|
||||
} else {
|
||||
this.summary = { loginCount: 0, createCount: 0, userCountFor30Day: 0 }
|
||||
this.tableData = []
|
||||
this.total = 0
|
||||
}
|
||||
}).finally(() => {
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
exportData() {
|
||||
if (!this.currentDate) {
|
||||
this.currentDate = this.getDefaultDate()
|
||||
}
|
||||
this.exportLoading = true
|
||||
http({
|
||||
url: http.adornUrl('/master/statisticsBusinessUser/exportUserStatistics'),
|
||||
method: 'post',
|
||||
data: http.adornData({
|
||||
date: this.currentDate
|
||||
}),
|
||||
responseType: 'blob',
|
||||
timeout: 0
|
||||
}).then((response) => {
|
||||
const blob = new Blob([response.data])
|
||||
const link = document.createElement('a')
|
||||
link.href = URL.createObjectURL(blob)
|
||||
link.download = `用户统计报表-${this.currentDate || '全部'}.xlsx`
|
||||
link.click()
|
||||
URL.revokeObjectURL(link.href)
|
||||
}).catch(() => {
|
||||
this.$message.error('下载失败,请稍后重试')
|
||||
}).finally(() => {
|
||||
this.exportLoading = false
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import '../styles/statistics-common.less';
|
||||
|
||||
.sb-form-item-zero();
|
||||
.sb-table-compact();
|
||||
|
||||
.user-statistics-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.query-section,
|
||||
.summary-section,
|
||||
.table-section {
|
||||
.sb-white-panel(8px);
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.query-section {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.summary-section {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.summary-card {
|
||||
.sb-summary-card-shell(180px, auto, auto);
|
||||
min-width: 180px;
|
||||
}
|
||||
|
||||
.summary-card__label {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.table-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.table-title {
|
||||
.sb-title-16();
|
||||
}
|
||||
|
||||
.sb-summary-card-text();
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.summary-section {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.summary-card {
|
||||
min-width: 200px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,14 @@
|
||||
<template>
|
||||
<userStatisticsBase mode="year" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import userStatisticsBase from './userStatisticsBase'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
userStatisticsBase
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -43,6 +43,7 @@
|
||||
|
||||
<div ref="tableContainer" class="table-container">
|
||||
<el-table
|
||||
class="statistics-table"
|
||||
:data="dataList"
|
||||
border
|
||||
:header-cell-style="{ textAlign: 'center', padding: '6px 0' }"
|
||||
@@ -234,29 +235,21 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.el-form-item {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
@import '../styles/statistics-common.less';
|
||||
|
||||
/deep/ .el-table .cell,
|
||||
/deep/ .el-table th > .cell {
|
||||
padding-top: 4px;
|
||||
padding-bottom: 4px;
|
||||
line-height: 20px;
|
||||
}
|
||||
.sb-form-item-zero();
|
||||
.sb-table-compact();
|
||||
.sb-statistics-table-min();
|
||||
|
||||
.all-vip-statistics {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
height: calc(100vh - 220px);
|
||||
}
|
||||
|
||||
.summary-section,
|
||||
.detail-section {
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
padding: 8px;
|
||||
.sb-white-panel(8px);
|
||||
}
|
||||
|
||||
.summary-section {
|
||||
@@ -267,22 +260,16 @@ export default {
|
||||
|
||||
.summary-block__title {
|
||||
margin-bottom: 16px;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #303133;
|
||||
.sb-title-16();
|
||||
}
|
||||
|
||||
.summary-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
|
||||
gap: 12px;
|
||||
.sb-summary-section-flex(12px);
|
||||
}
|
||||
|
||||
.summary-card {
|
||||
padding: 16px;
|
||||
border: 1px solid #ebeef5;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 12px rgba(31, 45, 61, 0.06);
|
||||
.sb-summary-card-shell(120px, 120px, auto);
|
||||
min-width: 120px;
|
||||
}
|
||||
|
||||
.summary-card--expired {
|
||||
@@ -295,38 +282,23 @@ export default {
|
||||
|
||||
.summary-card__label {
|
||||
margin-bottom: 8px;
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
.summary-card__value {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: #1f2d3d;
|
||||
}
|
||||
|
||||
.detail-section {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
.sb-flex-column-fill();
|
||||
}
|
||||
|
||||
.detail-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 16px;
|
||||
.sb-detail-header(16px);
|
||||
}
|
||||
|
||||
.detail-title {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #303133;
|
||||
.sb-title-16();
|
||||
}
|
||||
|
||||
.sb-summary-card-text();
|
||||
|
||||
.table-container {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -27,6 +27,7 @@
|
||||
|
||||
<div ref="tableContainer" class="table-container">
|
||||
<el-table
|
||||
class="statistics-table"
|
||||
:data="dataList"
|
||||
border
|
||||
:header-cell-style="{ textAlign: 'center', padding: '6px 0' }"
|
||||
@@ -202,82 +203,61 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
/deep/ .el-table .cell,
|
||||
/deep/ .el-table th > .cell {
|
||||
padding-top: 4px;
|
||||
padding-bottom: 4px;
|
||||
line-height: 20px;
|
||||
}
|
||||
@import '../styles/statistics-common.less';
|
||||
|
||||
.sb-table-compact();
|
||||
.sb-statistics-table-min();
|
||||
|
||||
.vip-expires-statistics {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
height: calc(100vh - 220px);
|
||||
}
|
||||
|
||||
.summary-section,
|
||||
.detail-section {
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
padding: 8px;
|
||||
.sb-white-panel(8px);
|
||||
}
|
||||
|
||||
.detail-section {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
.sb-flex-column-fill();
|
||||
}
|
||||
|
||||
.section-title {
|
||||
margin-bottom: 16px;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #303133;
|
||||
.sb-title-16();
|
||||
}
|
||||
|
||||
.summary-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
|
||||
gap: 12px;
|
||||
.sb-summary-section-flex(12px);
|
||||
}
|
||||
|
||||
.summary-card {
|
||||
padding: 16px;
|
||||
border: 1px solid #ebeef5;
|
||||
border-radius: 8px;
|
||||
background: linear-gradient(180deg, #f7fbff 0%, #ffffff 100%);
|
||||
box-shadow: 0 4px 12px rgba(31, 45, 61, 0.06);
|
||||
.sb-summary-card-shell(
|
||||
120px,
|
||||
120px,
|
||||
auto,
|
||||
16px,
|
||||
linear-gradient(180deg, #f7fbff 0%, #ffffff 100%)
|
||||
);
|
||||
min-width: 120px;
|
||||
}
|
||||
|
||||
.summary-card__label {
|
||||
margin-bottom: 8px;
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
.summary-card__value {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: #1f2d3d;
|
||||
}
|
||||
|
||||
.detail-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 16px;
|
||||
.sb-detail-header(16px);
|
||||
}
|
||||
|
||||
.detail-title {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #303133;
|
||||
.sb-title-16();
|
||||
}
|
||||
|
||||
.sb-summary-card-text();
|
||||
|
||||
.table-container {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -41,8 +41,8 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.el-form .el-form-item {
|
||||
margin-bottom: 10px !important;
|
||||
}
|
||||
<style scoped lang="less">
|
||||
@import '../styles/statistics-common.less';
|
||||
|
||||
.sb-form-item-ten();
|
||||
</style>
|
||||
|
||||
@@ -61,6 +61,7 @@
|
||||
|
||||
<div ref="tableContainer" class="table-container">
|
||||
<el-table
|
||||
class="statistics-table"
|
||||
:data="dataList"
|
||||
border
|
||||
:header-cell-style="{ textAlign: 'center', padding: '6px 0' }"
|
||||
@@ -214,123 +215,85 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.el-form-item {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
@import '../styles/statistics-common.less';
|
||||
|
||||
/deep/ .el-table .cell,
|
||||
/deep/ .el-table th > .cell {
|
||||
padding-top: 4px;
|
||||
padding-bottom: 4px;
|
||||
line-height: 20px;
|
||||
}
|
||||
.sb-form-item-zero();
|
||||
.sb-table-compact();
|
||||
.sb-statistics-table-min();
|
||||
|
||||
.month-vip-statistics {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
height: calc(100vh - 220px);
|
||||
}
|
||||
|
||||
.query-section,
|
||||
.summary-section,
|
||||
.detail-section {
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
padding: 8px;
|
||||
.sb-white-panel(8px);
|
||||
}
|
||||
|
||||
.query-section {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.summary-section {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
.sb-summary-section-flex(12px);
|
||||
}
|
||||
|
||||
.summary-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1 1 260px;
|
||||
width: 260px;
|
||||
min-height: 190px;
|
||||
padding: 16px;
|
||||
border: 1px solid #ebeef5;
|
||||
border-radius: 8px;
|
||||
background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
|
||||
box-shadow: 0 4px 12px rgba(31, 45, 61, 0.06);
|
||||
.sb-summary-card-shell(180px, 180px, 190px);
|
||||
}
|
||||
|
||||
.summary-card--two-columns {
|
||||
flex-basis: 360px;
|
||||
width: 360px;
|
||||
.sb-summary-card-two-columns(280px, 280px);
|
||||
}
|
||||
|
||||
.summary-card__title {
|
||||
margin-bottom: 14px;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #303133;
|
||||
.sb-summary-card-title(14px);
|
||||
}
|
||||
|
||||
.summary-card__body {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
.sb-summary-card-body(10px);
|
||||
}
|
||||
|
||||
.summary-card--two-columns .summary-card__body {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 10px 30px;
|
||||
.sb-summary-card-body-two-columns(10px, 30px);
|
||||
}
|
||||
|
||||
.summary-line {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
line-height: 1.5;
|
||||
.sb-summary-line(12px);
|
||||
}
|
||||
|
||||
.summary-line__label {
|
||||
color: #606266;
|
||||
.sb-summary-line-label();
|
||||
}
|
||||
|
||||
.summary-line__value {
|
||||
font-weight: 700;
|
||||
color: #1f2d3d;
|
||||
text-align: right;
|
||||
.sb-summary-line-value();
|
||||
}
|
||||
|
||||
.detail-section {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
.sb-flex-column-fill();
|
||||
}
|
||||
|
||||
.detail-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 16px;
|
||||
.sb-detail-header(16px);
|
||||
}
|
||||
|
||||
.detail-title {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #303133;
|
||||
.sb-title-16();
|
||||
}
|
||||
|
||||
.table-container {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@media (max-width: 1680px) {
|
||||
.summary-card {
|
||||
flex-basis: 240px;
|
||||
width: 240px;
|
||||
flex-basis: 170px;
|
||||
width: 170px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -232,16 +232,10 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.el-form-item {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
@import '../styles/statistics-common.less';
|
||||
|
||||
/deep/ .el-table .cell,
|
||||
/deep/ .el-table th > .cell {
|
||||
padding-top: 4px;
|
||||
padding-bottom: 4px;
|
||||
line-height: 20px;
|
||||
}
|
||||
.sb-form-item-zero();
|
||||
.sb-table-compact();
|
||||
|
||||
.year-vip-statistics {
|
||||
display: flex;
|
||||
@@ -252,78 +246,53 @@ export default {
|
||||
.query-section,
|
||||
.summary-section,
|
||||
.table-section {
|
||||
padding: 8px;
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
.sb-white-panel(8px);
|
||||
}
|
||||
|
||||
.query-section {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.summary-section {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
.sb-summary-section-flex(12px);
|
||||
}
|
||||
|
||||
.summary-card {
|
||||
display: flex;
|
||||
flex: 1 1 260px;
|
||||
width: 260px;
|
||||
flex-direction: column;
|
||||
min-height: 180px;
|
||||
padding: 16px;
|
||||
border: 1px solid #ebeef5;
|
||||
border-radius: 8px;
|
||||
background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
|
||||
box-shadow: 0 4px 12px rgba(31, 45, 61, 0.06);
|
||||
.sb-summary-card-shell(180px, 180px, 180px);
|
||||
}
|
||||
|
||||
.summary-card--two-columns {
|
||||
flex-basis: 360px;
|
||||
width: 360px;
|
||||
.sb-summary-card-two-columns(280px, 280px);
|
||||
}
|
||||
|
||||
.summary-card__title {
|
||||
margin-bottom: 14px;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #303133;
|
||||
.sb-summary-card-title(14px);
|
||||
}
|
||||
|
||||
.summary-card__body {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
.sb-summary-card-body(10px);
|
||||
}
|
||||
|
||||
.summary-card--two-columns .summary-card__body {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 10px 30px;
|
||||
.sb-summary-card-body-two-columns(10px, 30px);
|
||||
}
|
||||
|
||||
.summary-line {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
line-height: 1.5;
|
||||
.sb-summary-line(12px);
|
||||
}
|
||||
|
||||
.summary-line__label {
|
||||
color: #606266;
|
||||
.sb-summary-line-label();
|
||||
}
|
||||
|
||||
.summary-line__value {
|
||||
font-weight: 700;
|
||||
color: #1f2d3d;
|
||||
text-align: right;
|
||||
.sb-summary-line-value();
|
||||
}
|
||||
|
||||
.table-title {
|
||||
margin-bottom: 12px;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #303133;
|
||||
.sb-title-16();
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
|
||||
@@ -27,7 +27,7 @@
|
||||
size="small"
|
||||
style="width: 100%;"
|
||||
v-model="dataForm.userKey"
|
||||
debounce="500"
|
||||
:debounce="500"
|
||||
:fetch-suggestions="loadAll"
|
||||
placeholder="请输入手机号/邮箱"
|
||||
@select="handleSelect"
|
||||
|
||||
Reference in New Issue
Block a user