Vue3重构：公众号统计
This commit is contained in:
zhangjinlong
parent
1a4311309d
commit
51344a5967
79
src/utils/dateUtils.ts
Normal file
79
src/utils/dateUtils.ts
Normal file
@ -0,0 +1,79 @@
|
|||||||
|
/**
|
||||||
|
* 将毫秒，转换成时间字符串。例如说，xx 分钟
|
||||||
|
*
|
||||||
|
* @param ms 毫秒
|
||||||
|
* @returns {string} 字符串
|
||||||
|
*/
|
||||||
|
export function getDate(ms) {
|
||||||
|
const day = Math.floor(ms / (24 * 60 * 60 * 1000))
|
||||||
|
const hour = Math.floor(ms / (60 * 60 * 1000) - day * 24)
|
||||||
|
const minute = Math.floor(ms / (60 * 1000) - day * 24 * 60 - hour * 60)
|
||||||
|
const second = Math.floor(ms / 1000 - day * 24 * 60 * 60 - hour * 60 * 60 - minute * 60)
|
||||||
|
if (day > 0) {
|
||||||
|
return day + '天' + hour + '小时' + minute + '分钟'
|
||||||
|
}
|
||||||
|
if (hour > 0) {
|
||||||
|
return hour + '小时' + minute + '分钟'
|
||||||
|
}
|
||||||
|
if (minute > 0) {
|
||||||
|
return minute + '分钟'
|
||||||
|
}
|
||||||
|
if (second > 0) {
|
||||||
|
return second + '秒'
|
||||||
|
} else {
|
||||||
|
return 0 + '秒'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export function beginOfDay(date) {
|
||||||
|
return new Date(date.getFullYear(), date.getMonth(), date.getDate())
|
||||||
|
}
|
||||||
|
|
||||||
|
export function endOfDay(date) {
|
||||||
|
return new Date(date.getFullYear(), date.getMonth(), date.getDate(), 23, 59, 59, 999)
|
||||||
|
}
|
||||||
|
|
||||||
|
export function betweenDay(date1, date2) {
|
||||||
|
date1 = convertDate(date1)
|
||||||
|
date2 = convertDate(date2)
|
||||||
|
// 计算差值
|
||||||
|
return Math.floor((date2.getTime() - date1.getTime()) / (24 * 3600 * 1000))
|
||||||
|
}
|
||||||
|
|
||||||
|
export function formatDate(date, fmt) {
|
||||||
|
date = convertDate(date)
|
||||||
|
const o = {
|
||||||
|
'M+': date.getMonth() + 1, //月份
|
||||||
|
'd+': date.getDate(), //日
|
||||||
|
'H+': date.getHours(), //小时
|
||||||
|
'm+': date.getMinutes(), //分
|
||||||
|
's+': date.getSeconds(), //秒
|
||||||
|
'q+': Math.floor((date.getMonth() + 3) / 3), //季度
|
||||||
|
S: date.getMilliseconds() //毫秒
|
||||||
|
}
|
||||||
|
if (/(y+)/.test(fmt)) {
|
||||||
|
// 年份
|
||||||
|
fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
|
||||||
|
}
|
||||||
|
for (const k in o) {
|
||||||
|
if (new RegExp('(' + k + ')').test(fmt)) {
|
||||||
|
fmt = fmt.replace(
|
||||||
|
RegExp.$1,
|
||||||
|
RegExp.$1.length === 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length)
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return fmt
|
||||||
|
}
|
||||||
|
|
||||||
|
export function addTime(date, time) {
|
||||||
|
date = convertDate(date)
|
||||||
|
return new Date(date.getTime() + time)
|
||||||
|
}
|
||||||
|
|
||||||
|
export function convertDate(date) {
|
||||||
|
if (typeof date === 'string') {
|
||||||
|
return new Date(date)
|
||||||
|
}
|
||||||
|
return date
|
||||||
|
}
|
||||||
@ -1,3 +1,405 @@
|
|||||||
<template>
|
<template>
|
||||||
<span>开发中</span>
|
<!-- 搜索工作栏 -->
|
||||||
|
<content-wrap>
|
||||||
|
<el-form ref="queryForm" class="-mb-15px" :inline="true" label-width="68px">
|
||||||
|
<el-form-item label="公众号" prop="accountId">
|
||||||
|
<el-select v-model="accountId" @change="getSummary">
|
||||||
|
<el-option
|
||||||
|
v-for="item in accounts"
|
||||||
|
:key="parseInt(item.id)"
|
||||||
|
:label="item.name"
|
||||||
|
:value="parseInt(item.id)"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="时间范围" prop="dateRange">
|
||||||
|
<el-date-picker
|
||||||
|
v-model="dateRange"
|
||||||
|
style="width: 260px"
|
||||||
|
type="daterange"
|
||||||
|
range-separator="-"
|
||||||
|
start-placeholder="开始日期"
|
||||||
|
end-placeholder="结束日期"
|
||||||
|
:default-time="defaultTime"
|
||||||
|
@change="getSummary"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</content-wrap>
|
||||||
|
|
||||||
|
<!-- 图表 -->
|
||||||
|
<content-wrap>
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="12" class="card-box">
|
||||||
|
<el-card>
|
||||||
|
<template #header>
|
||||||
|
<div>
|
||||||
|
<span>用户增减数据</span>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
<div class="el-table el-table--enable-row-hover el-table--medium">
|
||||||
|
<div ref="userSummaryChartRef" style="height: 420px"></div>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12" class="card-box">
|
||||||
|
<el-card>
|
||||||
|
<template #header>
|
||||||
|
<div>
|
||||||
|
<span>累计用户数据</span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<div class="el-table el-table--enable-row-hover el-table--medium">
|
||||||
|
<div ref="userCumulateChartRef" style="height: 420px"></div>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12" class="card-box">
|
||||||
|
<el-card>
|
||||||
|
<template #header>
|
||||||
|
<div>
|
||||||
|
<span>消息概况数据</span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<div class="el-table el-table--enable-row-hover el-table--medium">
|
||||||
|
<div ref="upstreamMessageChartRef" style="height: 420px"></div>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12" class="card-box">
|
||||||
|
<el-card>
|
||||||
|
<template #header>
|
||||||
|
<div>
|
||||||
|
<span>接口分析数据</span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<div class="el-table el-table--enable-row-hover el-table--medium">
|
||||||
|
<div ref="interfaceSummaryChartRef" style="height: 420px"></div>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</content-wrap>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts" name="MpStatistics">
|
||||||
|
// 引入基本模板
|
||||||
|
import * as echarts from 'echarts'
|
||||||
|
import {
|
||||||
|
getInterfaceSummary,
|
||||||
|
getUpstreamMessage,
|
||||||
|
getUserCumulate,
|
||||||
|
getUserSummary
|
||||||
|
} from '@/api/mp/statistics'
|
||||||
|
import { addTime, beginOfDay, betweenDay, endOfDay, formatDate } from '@/utils/dateUtils'
|
||||||
|
import { getSimpleAccountList } from '@/api/mp/account'
|
||||||
|
|
||||||
|
const message = useMessage() // 消息弹窗
|
||||||
|
|
||||||
|
const defaultTime = ref<[Date, Date]>([
|
||||||
|
new Date(2000, 1, 1, 0, 0, 0),
|
||||||
|
new Date(2000, 2, 1, 23, 59, 59)
|
||||||
|
])
|
||||||
|
const dateRange = ref([
|
||||||
|
beginOfDay(new Date(new Date().getTime() - 3600 * 1000 * 24 * 7)),
|
||||||
|
endOfDay(new Date(new Date().getTime() - 3600 * 1000 * 24))
|
||||||
|
]) // -1 天
|
||||||
|
const accountId = ref()
|
||||||
|
const accounts = ref([
|
||||||
|
{
|
||||||
|
id: '0',
|
||||||
|
name: ''
|
||||||
|
}
|
||||||
|
])
|
||||||
|
|
||||||
|
const userSummaryChartRef = ref()
|
||||||
|
const userCumulateChartRef = ref()
|
||||||
|
const upstreamMessageChartRef = ref()
|
||||||
|
const interfaceSummaryChartRef = ref()
|
||||||
|
|
||||||
|
const xAxisDate = ref([] as any[]) // X 轴的日期范围
|
||||||
|
const userSummaryOption = reactive({
|
||||||
|
// 用户增减数据
|
||||||
|
color: ['#67C23A', '#e5323e'],
|
||||||
|
legend: {
|
||||||
|
data: ['新增用户', '取消关注的用户']
|
||||||
|
},
|
||||||
|
tooltip: {},
|
||||||
|
xAxis: {
|
||||||
|
data: [] as any[] // X 轴的日期范围
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
minInterval: 1
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '新增用户',
|
||||||
|
type: 'bar',
|
||||||
|
label: {
|
||||||
|
show: true
|
||||||
|
},
|
||||||
|
barGap: 0,
|
||||||
|
data: [] as any[] // 新增用户的数据
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '取消关注的用户',
|
||||||
|
type: 'bar',
|
||||||
|
label: {
|
||||||
|
show: true
|
||||||
|
},
|
||||||
|
data: [] as any[] // 取消关注的用户的数据
|
||||||
|
}
|
||||||
|
]
|
||||||
|
})
|
||||||
|
const userCumulateOption = reactive({
|
||||||
|
// 累计用户数据
|
||||||
|
legend: {
|
||||||
|
data: ['累计用户量']
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
data: [] as any[]
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
minInterval: 1
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '累计用户量',
|
||||||
|
data: [] as any[], // 累计用户量的数据
|
||||||
|
type: 'line',
|
||||||
|
smooth: true,
|
||||||
|
label: {
|
||||||
|
show: true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
})
|
||||||
|
const upstreamMessageOption = reactive({
|
||||||
|
// 消息发送概况数据
|
||||||
|
color: ['#67C23A', '#e5323e'],
|
||||||
|
legend: {
|
||||||
|
data: ['用户发送人数', '用户发送条数']
|
||||||
|
},
|
||||||
|
tooltip: {},
|
||||||
|
xAxis: {
|
||||||
|
data: [] as any[] // X 轴的日期范围
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
minInterval: 1
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '用户发送人数',
|
||||||
|
type: 'line',
|
||||||
|
smooth: true,
|
||||||
|
label: {
|
||||||
|
show: true
|
||||||
|
},
|
||||||
|
data: [] as any[] // 用户发送人数的数据
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '用户发送条数',
|
||||||
|
type: 'line',
|
||||||
|
smooth: true,
|
||||||
|
label: {
|
||||||
|
show: true
|
||||||
|
},
|
||||||
|
data: [] as any[] // 用户发送条数的数据
|
||||||
|
}
|
||||||
|
]
|
||||||
|
})
|
||||||
|
const interfaceSummaryOption = reactive({
|
||||||
|
// 接口分析况数据
|
||||||
|
color: ['#67C23A', '#e5323e', '#E6A23C', '#409EFF'],
|
||||||
|
legend: {
|
||||||
|
data: ['被动回复用户消息的次数', '失败次数', '最大耗时', '总耗时']
|
||||||
|
},
|
||||||
|
tooltip: {},
|
||||||
|
xAxis: {
|
||||||
|
data: [] as any[] // X 轴的日期范围
|
||||||
|
},
|
||||||
|
yAxis: {},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '被动回复用户消息的次数',
|
||||||
|
type: 'bar',
|
||||||
|
label: {
|
||||||
|
show: true
|
||||||
|
},
|
||||||
|
barGap: 0,
|
||||||
|
data: [] as any[] // 被动回复用户消息的次数的数据
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '失败次数',
|
||||||
|
type: 'bar',
|
||||||
|
label: {
|
||||||
|
show: true
|
||||||
|
},
|
||||||
|
data: [] as any[] // 失败次数的数据
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '最大耗时',
|
||||||
|
type: 'bar',
|
||||||
|
label: {
|
||||||
|
show: true
|
||||||
|
},
|
||||||
|
data: [] as any[] // 最大耗时的数据
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '总耗时',
|
||||||
|
type: 'bar',
|
||||||
|
label: {
|
||||||
|
show: true
|
||||||
|
},
|
||||||
|
data: [] as any[] // 总耗时的数据
|
||||||
|
}
|
||||||
|
]
|
||||||
|
})
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
// 获取公众号下拉列表
|
||||||
|
await getAccountList()
|
||||||
|
// 加载数据
|
||||||
|
getSummary()
|
||||||
|
})
|
||||||
|
const getAccountList = async () => {
|
||||||
|
const data = await getSimpleAccountList()
|
||||||
|
accounts.value = data
|
||||||
|
// 默认选中第一个
|
||||||
|
if (accounts.value.length > 0) {
|
||||||
|
accountId.value = accounts.value[0].id
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const getSummary = () => {
|
||||||
|
// 如果没有选中公众号账号，则进行提示。
|
||||||
|
if (!accountId) {
|
||||||
|
message.error('未选中公众号，无法统计数据')
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
// 必须选择 7 天内，因为公众号有时间跨度限制为 7
|
||||||
|
if (betweenDay(dateRange.value[0], dateRange.value[1]) >= 7) {
|
||||||
|
message.error('时间间隔 7 天以内，请重新选择')
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
xAxisDate.value = []
|
||||||
|
const days = betweenDay(dateRange.value[0], dateRange.value[1]) // 相差天数
|
||||||
|
for (let i = 0; i <= days; i++) {
|
||||||
|
xAxisDate.value.push(
|
||||||
|
formatDate(addTime(dateRange.value[0], 3600 * 1000 * 24 * i), 'yyyy-MM-dd')
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 初始化图表
|
||||||
|
initUserSummaryChart()
|
||||||
|
initUserCumulateChart()
|
||||||
|
initUpstreamMessageChart()
|
||||||
|
interfaceSummaryChart()
|
||||||
|
}
|
||||||
|
const initUserSummaryChart = async () => {
|
||||||
|
userSummaryOption.xAxis.data = []
|
||||||
|
userSummaryOption.series[0].data = []
|
||||||
|
userSummaryOption.series[1].data = []
|
||||||
|
try {
|
||||||
|
const data = await getUserSummary({
|
||||||
|
accountId: accountId.value,
|
||||||
|
date: [
|
||||||
|
formatDate(dateRange.value[0], 'yyyy-MM-dd HH:mm:ss'),
|
||||||
|
formatDate(dateRange.value[1], 'yyyy-MM-dd HH:mm:ss')
|
||||||
|
]
|
||||||
|
})
|
||||||
|
|
||||||
|
userSummaryOption.xAxis.data = xAxisDate.value
|
||||||
|
// 处理数据
|
||||||
|
xAxisDate.value.forEach((date, index) => {
|
||||||
|
data.forEach((item) => {
|
||||||
|
// 匹配日期
|
||||||
|
const refDate = formatDate(new Date(item.refDate), 'yyyy-MM-dd')
|
||||||
|
if (refDate.indexOf(date) === -1) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
// 设置数据到对应的位置
|
||||||
|
userSummaryOption.series[0].data[index] = item.newUser
|
||||||
|
userSummaryOption.series[1].data[index] = item.cancelUser
|
||||||
|
})
|
||||||
|
})
|
||||||
|
// 绘制图表
|
||||||
|
const userSummaryChart = echarts.init(userSummaryChartRef.value)
|
||||||
|
userSummaryChart.setOption(userSummaryOption)
|
||||||
|
} catch {}
|
||||||
|
}
|
||||||
|
const initUserCumulateChart = async () => {
|
||||||
|
userCumulateOption.xAxis.data = []
|
||||||
|
userCumulateOption.series[0].data = []
|
||||||
|
// 发起请求
|
||||||
|
try {
|
||||||
|
const data = await getUserCumulate({
|
||||||
|
accountId: accountId.value,
|
||||||
|
date: [
|
||||||
|
formatDate(dateRange.value[0], 'yyyy-MM-dd HH:mm:ss'),
|
||||||
|
formatDate(dateRange.value[1], 'yyyy-MM-dd HH:mm:ss')
|
||||||
|
]
|
||||||
|
})
|
||||||
|
userCumulateOption.xAxis.data = xAxisDate.value
|
||||||
|
// 处理数据
|
||||||
|
data.forEach((item, index) => {
|
||||||
|
userCumulateOption.series[0].data[index] = item.cumulateUser
|
||||||
|
})
|
||||||
|
// 绘制图表
|
||||||
|
const userCumulateChart = echarts.init(userCumulateChartRef.value)
|
||||||
|
userCumulateChart.setOption(userCumulateOption)
|
||||||
|
} catch {}
|
||||||
|
}
|
||||||
|
const initUpstreamMessageChart = async () => {
|
||||||
|
upstreamMessageOption.xAxis.data = []
|
||||||
|
upstreamMessageOption.series[0].data = []
|
||||||
|
upstreamMessageOption.series[1].data = []
|
||||||
|
// 发起请求
|
||||||
|
try {
|
||||||
|
const data = await getUpstreamMessage({
|
||||||
|
accountId: accountId.value,
|
||||||
|
date: [
|
||||||
|
formatDate(dateRange.value[0], 'yyyy-MM-dd HH:mm:ss'),
|
||||||
|
formatDate(dateRange.value[1], 'yyyy-MM-dd HH:mm:ss')
|
||||||
|
]
|
||||||
|
})
|
||||||
|
upstreamMessageOption.xAxis.data = xAxisDate.value
|
||||||
|
// 处理数据
|
||||||
|
data.forEach((item, index) => {
|
||||||
|
upstreamMessageOption.series[0].data[index] = item.messageUser
|
||||||
|
upstreamMessageOption.series[1].data[index] = item.messageCount
|
||||||
|
})
|
||||||
|
// 绘制图表
|
||||||
|
const upstreamMessageChart = echarts.init(upstreamMessageChartRef.value)
|
||||||
|
upstreamMessageChart.setOption(upstreamMessageOption)
|
||||||
|
} catch {}
|
||||||
|
}
|
||||||
|
const interfaceSummaryChart = async () => {
|
||||||
|
interfaceSummaryOption.xAxis.data = []
|
||||||
|
interfaceSummaryOption.series[0].data = []
|
||||||
|
interfaceSummaryOption.series[1].data = []
|
||||||
|
interfaceSummaryOption.series[2].data = []
|
||||||
|
interfaceSummaryOption.series[3].data = []
|
||||||
|
// 发起请求
|
||||||
|
try {
|
||||||
|
const data = await getInterfaceSummary({
|
||||||
|
accountId: accountId.value,
|
||||||
|
date: [
|
||||||
|
formatDate(dateRange.value[0], 'yyyy-MM-dd HH:mm:ss'),
|
||||||
|
formatDate(dateRange.value[1], 'yyyy-MM-dd HH:mm:ss')
|
||||||
|
]
|
||||||
|
})
|
||||||
|
interfaceSummaryOption.xAxis.data = xAxisDate.value
|
||||||
|
// 处理数据
|
||||||
|
data.forEach((item, index) => {
|
||||||
|
interfaceSummaryOption.series[0].data[index] = item.callbackCount
|
||||||
|
interfaceSummaryOption.series[1].data[index] = item.failCount
|
||||||
|
interfaceSummaryOption.series[2].data[index] = item.maxTimeCost
|
||||||
|
interfaceSummaryOption.series[3].data[index] = item.totalTimeCost
|
||||||
|
})
|
||||||
|
// 绘制图表
|
||||||
|
const interfaceSummaryChart = echarts.init(interfaceSummaryChartRef.value)
|
||||||
|
interfaceSummaryChart.setOption(interfaceSummaryOption)
|
||||||
|
} catch {}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user