fix:项目初始化
This commit is contained in:
ouyangxiu
@@ -0,0 +1,338 @@
|
||||
<template>
|
||||
<div class="pf-warpper">
|
||||
<el-row class="table-form">
|
||||
<el-form :inline="true" :model="searchData" class="form-inline" size="mini">
|
||||
<el-form-item>
|
||||
<el-date-picker
|
||||
:default-time="['00:00:00', '23:59:59']"
|
||||
end-placeholder="结束日期"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
type="datetimerange"
|
||||
v-model="time"
|
||||
value-format="yyyy-MM-ddTHH:mm:ss+08:00"/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="onSearch()" icon="el-icon-search" plain type="primary" :disabled="loading">搜索</el-button>
|
||||
<el-button @click="refreshView" icon="el-icon-refresh" plain type="info" :disabled="loading">刷新</el-button>
|
||||
<el-button @click="changeChart()" icon="el-icon-refresh" plain type="info" :disabled="loading">图表转换</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col>
|
||||
<el-table :data="tableData" element-loading-text="拼命加载中" v-loading="loading" border highlight-current-row style="width: 100%">
|
||||
<el-table-column fixed="left" align="center" label="用户类型">
|
||||
<template slot-scope="scope">{{ scope.row.userType }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column fixed="left" align="center" label="总日活">
|
||||
<template slot-scope="scope">{{ scope.row.IsVipHaveCoin + scope.row.IsVipNotCoin + scope.row.NotVipHaveCoin + scope.row.NotVipNotCoin }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column fixed="left" align="center" label="VIP+金币">
|
||||
<template slot-scope="scope">{{ scope.row.IsVipHaveCoin }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" fixed="left" label="VIP">
|
||||
<template slot-scope="scope">{{ scope.row.IsVipNotCoin }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" fixed="left" label="金币">
|
||||
<template slot-scope="scope">{{ scope.row.NotVipHaveCoin }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" fixed="left" label="非VIP+非金币">
|
||||
<template slot-scope="scope">{{ scope.row.NotVipNotCoin }}</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div style="width: 100%;display: flex;margin-top: 20px;background: #fff;border-radius: 6px;padding: 20px 20px;">
|
||||
<div id="main" style="width:600px; height:600px;margin:0 auto"></div>
|
||||
<div id="main2" style="width:600px; height:600px;margin:0 auto"></div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!-- 分页 -->
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { analyzeDau } from '@/api/userAnalysis/index'
|
||||
import echarts from 'echarts'
|
||||
export default {
|
||||
name: 'ActiveDaily',
|
||||
data() {
|
||||
return {
|
||||
loading: false, // 列表加载状态
|
||||
time: [],
|
||||
// time: [moment(moment(new Date()).format('YYYY-MM-DDT00:00:00+08:00'))['_i'], moment(moment(new Date()).format('YYYY-MM-DDT23:59:59+08:00'))['_i']],
|
||||
searchData: {
|
||||
// 表单参数
|
||||
startTime: undefined, // 开始时间
|
||||
endTime: undefined // 结束时间
|
||||
},
|
||||
tableData: [],
|
||||
myChart: undefined,
|
||||
myChart2: undefined,
|
||||
axisyMax: 0
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
chartData1() {
|
||||
const data = [
|
||||
{
|
||||
value: this.tableData[0].NotVipHaveCoin,
|
||||
name: '金币',
|
||||
itemStyle: {
|
||||
color: '#FFD700'
|
||||
}
|
||||
},
|
||||
{
|
||||
value: this.tableData[0].IsVipNotCoin,
|
||||
name: 'VIP',
|
||||
itemStyle: {
|
||||
color: '#87CEFA'
|
||||
}
|
||||
},
|
||||
{
|
||||
value: this.tableData[0].IsVipHaveCoin,
|
||||
name: 'VIP+金币',
|
||||
itemStyle: {
|
||||
color: '#7FFFAA'
|
||||
}
|
||||
},
|
||||
{
|
||||
value: this.tableData[0].NotVipNotCoin,
|
||||
name: '非VIP+非金币',
|
||||
itemStyle: {
|
||||
color: '#FFB6C1'
|
||||
}
|
||||
}
|
||||
]
|
||||
return data
|
||||
},
|
||||
chartData2() {
|
||||
const data = [
|
||||
{
|
||||
value: this.tableData[1].NotVipHaveCoin,
|
||||
name: '金币',
|
||||
itemStyle: {
|
||||
color: '#FFD700'
|
||||
}
|
||||
},
|
||||
{
|
||||
value: this.tableData[1].IsVipNotCoin,
|
||||
name: 'VIP',
|
||||
itemStyle: {
|
||||
color: '#87CEFA'
|
||||
}
|
||||
},
|
||||
{
|
||||
value: this.tableData[1].IsVipHaveCoin,
|
||||
name: 'VIP+金币',
|
||||
itemStyle: {
|
||||
color: '#7FFFAA'
|
||||
}
|
||||
},
|
||||
{
|
||||
value: this.tableData[1].NotVipNotCoin,
|
||||
name: '非VIP+非金币',
|
||||
itemStyle: {
|
||||
color: '#FFB6C1'
|
||||
}
|
||||
}
|
||||
]
|
||||
return data
|
||||
}
|
||||
},
|
||||
|
||||
async mounted() {
|
||||
// await this.onSubmit()
|
||||
},
|
||||
methods: {
|
||||
// TODO:请求日活分析数据
|
||||
async onSubmit() {
|
||||
this.loading = true
|
||||
if (this.time) {
|
||||
this.searchData.startTime = this.time[0]
|
||||
this.searchData.endTime = this.time[1]
|
||||
} else {
|
||||
this.searchData.startTime = undefined
|
||||
this.searchData.endTime = undefined
|
||||
}
|
||||
const data = JSON.parse(JSON.stringify(this.searchData))
|
||||
await analyzeDau(data).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.tableData = [
|
||||
{
|
||||
userType: '老用户',
|
||||
IsVipHaveCoin: res.data.users.OldUsers.users.IsVipHaveCoin,
|
||||
IsVipNotCoin: res.data.users.OldUsers.users.IsVipNotCoin,
|
||||
NotVipHaveCoin: res.data.users.OldUsers.users.NotVipHaveCoin,
|
||||
NotVipNotCoin: res.data.users.OldUsers.users.NotVipNotCoin
|
||||
},
|
||||
{
|
||||
userType: '新用户',
|
||||
IsVipHaveCoin: res.data.users.NewUsers.users.IsVipHaveCoin,
|
||||
IsVipNotCoin: res.data.users.NewUsers.users.IsVipNotCoin,
|
||||
NotVipHaveCoin: res.data.users.NewUsers.users.NotVipHaveCoin,
|
||||
NotVipNotCoin: res.data.users.NewUsers.users.NotVipNotCoin
|
||||
},
|
||||
{
|
||||
userType: '总计',
|
||||
IsVipHaveCoin: res.data.users.OldUsers.users.IsVipHaveCoin + res.data.users.NewUsers.users.IsVipHaveCoin,
|
||||
IsVipNotCoin: res.data.users.OldUsers.users.IsVipNotCoin + res.data.users.NewUsers.users.IsVipNotCoin,
|
||||
NotVipHaveCoin: res.data.users.OldUsers.users.NotVipHaveCoin + res.data.users.NewUsers.users.NotVipHaveCoin,
|
||||
NotVipNotCoin: res.data.users.OldUsers.users.NotVipNotCoin + res.data.users.NewUsers.users.NotVipNotCoin
|
||||
}
|
||||
]
|
||||
this.axisyMax = Math.max(...Object.values(res.data.users.OldUsers.users), ...Object.values(res.data.users.NewUsers.users))
|
||||
if (this.myChart) {
|
||||
this.refreshData()
|
||||
} else {
|
||||
if (this.tableData.length) {
|
||||
this.initChart()
|
||||
}
|
||||
}
|
||||
} else {
|
||||
this.tableData = []
|
||||
this.$message.error('请求列表失败:' + res.tip)
|
||||
}
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
initChart() {
|
||||
// 旧
|
||||
this.myChart = echarts.init(document.getElementById('main'))
|
||||
// 指定图表的配置项和数据
|
||||
const option = this.createPieOption('老用户日活分析')
|
||||
option.series[0].data = this.chartData1
|
||||
this.myChart.setOption(option)
|
||||
// 新
|
||||
this.myChart2 = echarts.init(document.getElementById('main2'))
|
||||
// 指定图表的配置项和数据
|
||||
const option2 = this.createPieOption('新用户日活分析')
|
||||
option2.series[0].data = this.chartData2
|
||||
this.myChart2.setOption(option2)
|
||||
},
|
||||
changeChart() {
|
||||
let newOption
|
||||
const option = this.myChart.getOption()
|
||||
this.myChart.clear()
|
||||
if (option.series[0].type === 'bar') {
|
||||
newOption = this.createPieOption('老用户日活分析')
|
||||
} else if (option.series[0].type === 'pie') {
|
||||
newOption = this.createBarOption('老用户日活分析')
|
||||
}
|
||||
newOption.series[0].data = this.chartData1
|
||||
this.myChart.setOption(newOption)
|
||||
this.myChart.resize()
|
||||
//
|
||||
let newOption2
|
||||
const option2 = this.myChart2.getOption()
|
||||
this.myChart2.clear()
|
||||
if (option2.series[0].type === 'bar') {
|
||||
newOption2 = this.createPieOption('新用户日活分析')
|
||||
} else if (option.series[0].type === 'pie') {
|
||||
newOption2 = this.createBarOption('新用户日活分析')
|
||||
}
|
||||
newOption2.series[0].data = this.chartData2
|
||||
this.myChart2.setOption(newOption2)
|
||||
this.myChart2.resize()
|
||||
},
|
||||
createPieOption(title) {
|
||||
return {
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{b} : {c} ({d}%)'
|
||||
},
|
||||
title: {
|
||||
text: title,
|
||||
left: 'center'
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
left: 'left'
|
||||
},
|
||||
label: {
|
||||
color: '#778899'
|
||||
},
|
||||
color: ['#DCDCDC'],
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
radius: ['0%', '60%'],
|
||||
center: ['50%', '50%'],
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
createBarOption(title) {
|
||||
return {
|
||||
width: 500,
|
||||
height: 250,
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{b} : {c}'
|
||||
},
|
||||
minInterval: 1,
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['非VIP且有金币', '是VIP且没金币', '是VIP且有金币', '非VIP且没金币']
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: '人数',
|
||||
max: this.axisyMax
|
||||
},
|
||||
title: {
|
||||
text: title,
|
||||
left: 'center'
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
left: 'left'
|
||||
},
|
||||
label: {
|
||||
color: '#778899'
|
||||
},
|
||||
color: ['#DCDCDC'],
|
||||
series: [
|
||||
{
|
||||
type: 'bar',
|
||||
radius: '80%',
|
||||
label: {
|
||||
rotate: 'radial'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
refreshData() {
|
||||
const option = this.myChart.getOption()
|
||||
option.series[0].data = this.chartData1
|
||||
this.myChart.setOption(option)
|
||||
const option2 = this.myChart.getOption()
|
||||
option2.series[0].data = this.chartData2
|
||||
this.myChart2.setOption(option2)
|
||||
},
|
||||
|
||||
onSearch() {
|
||||
this.onSubmit()
|
||||
},
|
||||
|
||||
// 刷新
|
||||
refreshView() {
|
||||
this.onSubmit()
|
||||
},
|
||||
|
||||
// 清理搜索框
|
||||
onClear(key) {
|
||||
this.searchData[key] = undefined
|
||||
this.onSubmit()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,357 @@
|
||||
<template>
|
||||
<div class="pf-warpper">
|
||||
<el-row class="table-form">
|
||||
<el-form :inline="true" :model="searchData" class="form-inline" size="mini">
|
||||
<el-form-item>
|
||||
<el-date-picker
|
||||
:default-time="['00:00:00', '23:59:59']"
|
||||
end-placeholder="结束日期"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
type="datetimerange"
|
||||
v-model="time"
|
||||
value-format="yyyy-MM-ddTHH:mm:ss+08:00"/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="onSearch()" icon="el-icon-search" plain type="primary" :disabled="loading">搜索</el-button>
|
||||
<el-button @click="refreshView" icon="el-icon-refresh" plain type="info" :disabled="loading">刷新</el-button>
|
||||
<el-button @click="changeChart()" icon="el-icon-refresh" plain type="info" :disabled="loading">图表转换</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col>
|
||||
<el-table :data="tableData" element-loading-text="拼命加载中" v-loading="loading" border height="100" highlight-current-row style="width: 100%">
|
||||
<el-table-column align="center" v-for="(item, index) in columnData" :key="index" :prop="item.value ? item.value : item.name" :label="item.name"> </el-table-column>
|
||||
</el-table>
|
||||
<div style="width: 100%;display: flex;margin-top: 10px;background: #fff;border-radius: 6px;padding: 20px 0;">
|
||||
<div id="main" style="width:600px; height:600px;margin:0 auto"></div>
|
||||
<div id="main2" style="width:600px; height:600px;margin:0 auto"></div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { analyzeInterval } from '@/api/userAnalysis/index'
|
||||
import echarts from 'echarts'
|
||||
export default {
|
||||
name: 'ChargeInterval',
|
||||
data() {
|
||||
return {
|
||||
loading: false, // 列表加载状态
|
||||
// time: [moment(moment(new Date()).format('YYYY-MM-DDT00:00:00+08:00'))['_i'], moment(moment(new Date()).format('YYYY-MM-DDT23:59:59+08:00'))['_i']],
|
||||
time: [],
|
||||
// time: ['2023-08-01T00:00:00+08:00', '2023-08-10T23:59:59+08:00'],
|
||||
searchData: {
|
||||
// 表单参数
|
||||
startTime: undefined, // 开始时间
|
||||
endTime: undefined // 结束时间
|
||||
},
|
||||
tableData: [{}],
|
||||
resData: undefined,
|
||||
columnData: undefined,
|
||||
myChart2: undefined,
|
||||
|
||||
option1: {
|
||||
title: {
|
||||
text: '首充分析',
|
||||
left: 'center'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{b} : {c} ({d}%)'
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
left: 'left'
|
||||
},
|
||||
label: {
|
||||
color: '#778899'
|
||||
},
|
||||
color: ['#DCDCDC'],
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
radius: ['0%', '60%'],
|
||||
center: ['50%', '50%'],
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
option2: {
|
||||
width: 500,
|
||||
height: 250,
|
||||
title: {
|
||||
text: '首充分析',
|
||||
left: 'center'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{b} : {c}'
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
left: 'left'
|
||||
},
|
||||
label: {
|
||||
color: '#778899'
|
||||
},
|
||||
|
||||
minInterval: 1,
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: this.filtterchartXData
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: '人数'
|
||||
},
|
||||
|
||||
color: ['#DCDCDC'],
|
||||
series: [
|
||||
{
|
||||
type: 'bar',
|
||||
radius: '80%',
|
||||
label: {
|
||||
rotate: 'radial'
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
option3: {
|
||||
title: {
|
||||
text: '充值占比',
|
||||
left: 'center'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{b} : {c} ({d}%)'
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
left: 'left'
|
||||
},
|
||||
label: {
|
||||
color: '#778899'
|
||||
},
|
||||
color: ['#DCDCDC'],
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
radius: ['0%', '60%'],
|
||||
center: ['50%', '50%'],
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
option4: {
|
||||
width: 500,
|
||||
height: 250,
|
||||
title: {
|
||||
text: '充值占比',
|
||||
left: 'center'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{b} : {c}'
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
left: 'left'
|
||||
},
|
||||
label: {
|
||||
color: '#778899'
|
||||
},
|
||||
|
||||
minInterval: 1,
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['总新增人数', '总新增内的付费人数']
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: '人数'
|
||||
},
|
||||
|
||||
color: ['#DCDCDC'],
|
||||
series: [
|
||||
{
|
||||
type: 'bar',
|
||||
radius: '80%',
|
||||
label: {
|
||||
rotate: 'radial'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
chartData1() {
|
||||
const data = []
|
||||
const color = ['#7FFFAA', '#0000FF', '#1E90FF', '#7CFC00', '#FFD700', '#FFB6C1']
|
||||
this.resData.intervals.forEach((item, index) => {
|
||||
data.push({
|
||||
value: item.userCount,
|
||||
name: item.name,
|
||||
itemStyle: {
|
||||
color: color[index]
|
||||
}
|
||||
})
|
||||
})
|
||||
return data
|
||||
},
|
||||
chartData2() {
|
||||
const data = [
|
||||
{
|
||||
value: this.tableData[0].totalNewUser,
|
||||
name: '总新增人数',
|
||||
itemStyle: {
|
||||
color: '#7FFFAA'
|
||||
}
|
||||
},
|
||||
{
|
||||
value: this.tableData[0].totalPayCount,
|
||||
name: '总新增内的付费人数',
|
||||
itemStyle: {
|
||||
color: '#87CEFA'
|
||||
}
|
||||
}
|
||||
]
|
||||
return data
|
||||
}
|
||||
},
|
||||
async mounted() {
|
||||
// await this.onSubmit()
|
||||
},
|
||||
methods: {
|
||||
filtter(data) {
|
||||
const arr = []
|
||||
data.forEach(item => {
|
||||
arr.push(item.name)
|
||||
})
|
||||
console.log(arr)
|
||||
return arr
|
||||
},
|
||||
// TODO:请求首充区间分析数据
|
||||
async onSubmit() {
|
||||
this.loading = true
|
||||
if (this.time) {
|
||||
this.searchData.startTime = this.time[0]
|
||||
this.searchData.endTime = this.time[1]
|
||||
} else {
|
||||
this.searchData.startTime = undefined
|
||||
this.searchData.endTime = undefined
|
||||
}
|
||||
const data = JSON.parse(JSON.stringify(this.searchData))
|
||||
try {
|
||||
await analyzeInterval(data).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.loading = false
|
||||
this.columnData = []
|
||||
this.tableData = [{}]
|
||||
const arr = [{ name: '总新增人数', value: 'totalNewUser' }, { name: '总新增内的付费人数', value: 'totalPayCount' }]
|
||||
this.resData = res.data
|
||||
this.columnData = arr.concat(res.data.intervals)
|
||||
res.data.intervals.forEach(item => {
|
||||
if (!this.tableData[0]) {
|
||||
this.tableData.push({})
|
||||
}
|
||||
this.tableData[0][item.name] = item.userCount
|
||||
})
|
||||
this.tableData[0].totalNewUser = res.data.totalNewUser
|
||||
this.tableData[0].totalPayCount = res.data.totalPayCount
|
||||
|
||||
if (this.myChart2) {
|
||||
this.refreshData()
|
||||
} else {
|
||||
if (this.tableData.length) {
|
||||
this.initChart()
|
||||
}
|
||||
}
|
||||
} else {
|
||||
this.tableData = []
|
||||
this.$message.error('请求列表失败:' + res.tip)
|
||||
}
|
||||
})
|
||||
} catch (error) {
|
||||
this.$message.error('请求列表失败: 你可能需要先选择搜索日期！！！')
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
initChart(chartData) {
|
||||
this.myChart = echarts.init(document.getElementById('main'))
|
||||
this.myChart2 = echarts.init(document.getElementById('main2'))
|
||||
// 指定图表的配置项和数据
|
||||
const option = JSON.parse(JSON.stringify(this.option3))
|
||||
option.series[0].data = this.chartData2
|
||||
this.myChart.setOption(option)
|
||||
|
||||
const option2 = JSON.parse(JSON.stringify(this.option1))
|
||||
option2.series[0].data = this.chartData1
|
||||
this.myChart2.setOption(option2)
|
||||
},
|
||||
changeChart() {
|
||||
let newOption
|
||||
const option = this.myChart.getOption()
|
||||
this.myChart.clear()
|
||||
if (option.series[0].type === 'bar') {
|
||||
newOption = JSON.parse(JSON.stringify(this.option3))
|
||||
} else if (option.series[0].type === 'pie') {
|
||||
newOption = JSON.parse(JSON.stringify(this.option4))
|
||||
}
|
||||
newOption.series[0].data = this.chartData2
|
||||
this.myChart.setOption(newOption)
|
||||
this.myChart.resize()
|
||||
|
||||
let newOption2
|
||||
const option2 = this.myChart2.getOption()
|
||||
this.myChart2.clear()
|
||||
if (option2.series[0].type === 'bar') {
|
||||
newOption2 = JSON.parse(JSON.stringify(this.option1))
|
||||
} else if (option2.series[0].type === 'pie') {
|
||||
newOption2 = JSON.parse(JSON.stringify(this.option2))
|
||||
newOption2.xAxis.data = this.filtter(this.resData.intervals)
|
||||
}
|
||||
newOption2.series[0].data = this.chartData1
|
||||
this.myChart2.setOption(newOption2)
|
||||
this.myChart2.resize()
|
||||
},
|
||||
refreshData() {
|
||||
const option = this.myChart2.getOption()
|
||||
option.series[0].data = this.chartData1
|
||||
this.myChart2.setOption(option)
|
||||
},
|
||||
|
||||
async onSearch() {
|
||||
await this.onSubmit()
|
||||
},
|
||||
|
||||
// 刷新
|
||||
refreshView() {
|
||||
this.onSubmit()
|
||||
},
|
||||
|
||||
// 清理搜索框
|
||||
onClear(key) {
|
||||
this.searchData.param[key] = undefined
|
||||
this.onSubmit()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,53 @@
|
||||
<!--
|
||||
* @Author:
|
||||
* @Mail:
|
||||
* @Date: 2023-07-14 22:49:25
|
||||
* @LastEditTime: 2023-08-11 16:16:04
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @FilePath: /web-admin/src/views/userAnalysis/secondary/components/buyList.vue
|
||||
-->
|
||||
<template>
|
||||
<el-dialog :title="title" :visible.sync="Visible" width="90%" center class="ac-dialog" :close-on-click-modal="false" @close="close">
|
||||
<el-row>
|
||||
<el-col>
|
||||
<el-table :data="resdata" border height="70px" style="width: 100%" highlight-current-row>
|
||||
<el-table-column align="center" v-for="(item, index) in data.data" :key="index" :prop="item.name" :label="item.name"> </el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="Visible = false"> 取 消 </el-button>
|
||||
<el-button type="primary" @click="submit('ruleForm')"> 确 定 </el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'ChannelRuleList',
|
||||
props: ['data'],
|
||||
data() {
|
||||
return {
|
||||
Visible: true,
|
||||
title: '',
|
||||
resdata: [{}]
|
||||
}
|
||||
},
|
||||
|
||||
async mounted() {
|
||||
this.title = this.data.title
|
||||
await this.data.data.forEach((item, index) => {
|
||||
this.resdata[0][item.name] = item.size
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
// 提交按钮
|
||||
submit(formName) {
|
||||
this.$emit('close')
|
||||
},
|
||||
// 关闭编辑
|
||||
close() {
|
||||
this.$emit('close')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,288 @@
|
||||
<template>
|
||||
<div class="pf-warpper">
|
||||
<el-row class="table-form">
|
||||
<el-form :inline="true" :model="searchData" class="form-inline" size="mini">
|
||||
<el-form-item>
|
||||
<el-date-picker
|
||||
:default-time="['00:00:00', '23:59:59']"
|
||||
end-placeholder="结束日期"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
type="datetimerange"
|
||||
v-model="time"
|
||||
value-format="yyyy-MM-ddTHH:mm:ss+08:00"/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="onSearch()" icon="el-icon-search" plain type="primary" :disabled="loading">搜索</el-button>
|
||||
<el-button @click="refreshView" icon="el-icon-refresh" plain type="info" :disabled="loading">刷新</el-button>
|
||||
<!-- <el-button @click="changeChart()" icon="el-icon-refresh" plain type="info">图表转换</el-button> -->
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col>
|
||||
<el-table :data="tableData" element-loading-text="拼命加载中" v-loading="loading" border height="240" highlight-current-row style="width: 100%">
|
||||
<el-table-column fixed="left" align="center" label="卡片ID">
|
||||
<template slot-scope="scope">{{ scope.row.cardId }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="卡片名称">
|
||||
<template slot-scope="scope">{{ scope.row.cardName }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="购买人数">
|
||||
<template slot-scope="scope">{{ scope.row.buyCount }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="开通过VIP人数">
|
||||
<template slot-scope="scope">{{ scope.row.wasVipCount }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" fixed="right" label="操作" width="600">
|
||||
<template slot-scope="scope">
|
||||
<div class="option">
|
||||
<div v-for="(item, index) in scope.row.resultArray" :key="index">
|
||||
<el-button
|
||||
v-if="item.trackTypeValue.days != 0"
|
||||
@click="showMediaList(scope.row.cardName, item)"
|
||||
size="mini"
|
||||
type="primary">查看{{ scope.row.cardName }} {{ item.trackTypeValue.days }}天{{ item.trackTypeValue.showName }}期购买
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div id="main" style="width: 100%;height: 500px;display: flex;margin-top: 10px;background: #fff;border-radius: 6px;padding: 20px 20px;"></div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 分页 -->
|
||||
<BuyList :data="editData" v-if="buyListVisible" @close="closeEdit" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { analyzePurchase } from '@/api/userAnalysis/index'
|
||||
import BuyList from './components/buyList.vue'
|
||||
import echarts from 'echarts'
|
||||
|
||||
export default {
|
||||
name: 'Secondary',
|
||||
components: {
|
||||
BuyList
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
buyListVisible: false,
|
||||
editData: {
|
||||
title: '新增',
|
||||
data: {}
|
||||
},
|
||||
loading: false, // 列表加载状态
|
||||
// time: [moment(moment(new Date()).format('YYYY-MM-DDT00:00:00+08:00'))['_i'], moment(moment(new Date()).format('YYYY-MM-DDT23:59:59+08:00'))['_i']],
|
||||
time: [],
|
||||
searchData: {
|
||||
// 表单参数
|
||||
startTime: undefined, // 开始时间
|
||||
endTime: undefined, // 结束时间
|
||||
cardIds: undefined
|
||||
},
|
||||
tableData: [],
|
||||
myChart: undefined,
|
||||
|
||||
option1: {
|
||||
width: 800,
|
||||
height: 450,
|
||||
title: {
|
||||
text: '二次消费分析',
|
||||
left: 'center'
|
||||
},
|
||||
grid: {
|
||||
left: 'center',
|
||||
top: 'middle',
|
||||
containLabel: true
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
left: 'left'
|
||||
},
|
||||
label: {
|
||||
color: '#778899'
|
||||
},
|
||||
color: ['#0000FF', '#1E90FF', '#7CFC00', '#7FFF00', '#00FF7F', '#00FA9A', '#DAA520', '#FF8C00', '#FFA500', '#FFD700'],
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: []
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
xAxisData() {
|
||||
const data = []
|
||||
this.tableData.forEach(item => {
|
||||
data.push(item.cardName)
|
||||
})
|
||||
return data
|
||||
},
|
||||
chartData1() {
|
||||
const list = [
|
||||
{
|
||||
name: '购买量',
|
||||
type: 'bar',
|
||||
barGap: 0,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: this.filterData(this.tableData, 'buyCount')
|
||||
},
|
||||
{
|
||||
name: '曾为VIP数',
|
||||
type: 'bar',
|
||||
barGap: 0,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: this.filterData(this.tableData, 'wasVipCount')
|
||||
}
|
||||
]
|
||||
const data = []
|
||||
this.tableData.forEach(item => {
|
||||
item.resultArray.forEach(mItem => {
|
||||
mItem.dataArray.forEach(sItem => {
|
||||
const res = data.find(dataItem => {
|
||||
return dataItem.Nname === sItem.name + mItem.trackTypeValue.name
|
||||
})
|
||||
if (res) {
|
||||
res.data.push(sItem.size)
|
||||
} else {
|
||||
data.push({
|
||||
name: mItem.trackTypeValue.name + '内购买' + sItem.name,
|
||||
Nname: sItem.name + mItem.trackTypeValue.name,
|
||||
type: 'bar',
|
||||
barGap: 0,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [sItem.size]
|
||||
})
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
return list.concat(data)
|
||||
}
|
||||
},
|
||||
async mounted() {
|
||||
await this.onSearch();
|
||||
},
|
||||
methods: {
|
||||
filterData(data, key) {
|
||||
const arr = []
|
||||
data.forEach(item => {
|
||||
arr.push(item[key])
|
||||
})
|
||||
return arr
|
||||
},
|
||||
// TODO:请求金币售卖统计数据
|
||||
async onSubmit() {
|
||||
this.loading = true
|
||||
if (this.time) {
|
||||
this.searchData.startTime = this.time[0]
|
||||
this.searchData.endTime = this.time[1]
|
||||
} else {
|
||||
this.searchData.startTime = undefined
|
||||
this.searchData.endTime = undefined
|
||||
}
|
||||
|
||||
const data = JSON.parse(JSON.stringify(this.searchData))
|
||||
try {
|
||||
await analyzePurchase(data).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.tableData = res.data.cardResults
|
||||
if (this.myChart) {
|
||||
this.refreshData()
|
||||
} else {
|
||||
if (this.tableData.length) {
|
||||
this.initChart()
|
||||
}
|
||||
}
|
||||
} else {
|
||||
this.tableData = []
|
||||
this.$message.error('请求列表失败:' + res.tip)
|
||||
}
|
||||
this.loading = false
|
||||
})
|
||||
} catch (error) {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
|
||||
async onSearch() {
|
||||
await this.onSubmit()
|
||||
},
|
||||
initChart() {
|
||||
this.myChart = echarts.init(document.getElementById('main'))
|
||||
// 指定图表的配置项和数据
|
||||
const option = JSON.parse(JSON.stringify(this.option1))
|
||||
option.xAxis[0].data = this.xAxisData
|
||||
option.series = this.chartData1
|
||||
console.log(option,"option")
|
||||
this.myChart.setOption(option)
|
||||
console.log(this.myChart,"myChart")
|
||||
},
|
||||
|
||||
refreshData() {
|
||||
const option = this.myChart.getOption()
|
||||
option.xAxis[0].data = this.xAxisData
|
||||
option.series = this.chartData1
|
||||
this.myChart.setOption(option)
|
||||
},
|
||||
// 刷新
|
||||
refreshView() {
|
||||
this.onSubmit()
|
||||
},
|
||||
|
||||
// 清理搜索框
|
||||
onClear(key) {
|
||||
this.searchData.param[key] = undefined
|
||||
this.onSubmit()
|
||||
},
|
||||
|
||||
// 查看购买列表
|
||||
showMediaList(cardName, row) {
|
||||
const title = cardName + row.trackTypeValue.days + '天' + row.trackTypeValue.name + '购买'
|
||||
const data = row.dataArray
|
||||
this.editData = {
|
||||
title: title,
|
||||
data: data
|
||||
}
|
||||
this.buyListVisible = true
|
||||
},
|
||||
// 关闭编辑弹窗
|
||||
closeEdit() {
|
||||
this.editData = {
|
||||
title: '新增',
|
||||
data: {}
|
||||
}
|
||||
this.buyListVisible = false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.option {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
> div {
|
||||
margin: 0 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user