Vue3重构：公众号统计优化 TODO
This commit is contained in:
kinlon92
parent
969c83a8dc
commit
658150c1c8
@ -1,79 +0,0 @@
|
||||
/**
|
||||
* 将毫秒，转换成时间字符串。例如说，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
|
||||
}
|
||||
@ -196,3 +196,54 @@ export const dateFormatter = (row, column, cellValue) => {
|
||||
}
|
||||
return formatDate(cellValue)
|
||||
}
|
||||
|
||||
/**
|
||||
* 设置起始日期，时间为00:00:00
|
||||
* @param param 传入日期
|
||||
* @returns 带时间00:00:00的日期
|
||||
*/
|
||||
export function beginOfDay(param: Date) {
|
||||
return new Date(param.getFullYear(), param.getMonth(), param.getDate(), 0, 0, 0, 0)
|
||||
}
|
||||
|
||||
/**
|
||||
* 设置结束日期，时间为23:59:59
|
||||
* @param param 传入日期
|
||||
* @returns 带时间23:59:59的日期
|
||||
*/
|
||||
export function endOfDay(param: Date) {
|
||||
return new Date(param.getFullYear(), param.getMonth(), param.getDate(), 23, 59, 59, 999)
|
||||
}
|
||||
|
||||
/**
|
||||
* 计算两个日期间隔天数
|
||||
* @param param1 日期1
|
||||
* @param param2 日期2
|
||||
*/
|
||||
export function betweenDay(param1: Date, param2: Date) {
|
||||
param1 = convertDate(param1)
|
||||
param2 = convertDate(param2)
|
||||
// 计算差值
|
||||
return Math.floor((param2.getTime() - param1.getTime()) / (24 * 3600 * 1000))
|
||||
}
|
||||
|
||||
/**
|
||||
* 日期计算
|
||||
* @param param1 日期
|
||||
* @param param2 添加的时间
|
||||
*/
|
||||
export function addTime(param1: Date, param2: number) {
|
||||
param1 = convertDate(param1)
|
||||
return new Date(param1.getTime() + param2)
|
||||
}
|
||||
|
||||
/**
|
||||
* 日期转换
|
||||
* @param param 日期
|
||||
*/
|
||||
export function convertDate(param: Date | string) {
|
||||
if (typeof param === 'string') {
|
||||
return new Date(param)
|
||||
}
|
||||
return param
|
||||
}
|
||||
|
||||
@ -6,9 +6,9 @@
|
||||
<el-select v-model="accountId" @change="getSummary">
|
||||
<el-option
|
||||
v-for="item in accountList"
|
||||
:key="parseInt(item.id)"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="parseInt(item.id)"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
@ -37,9 +37,7 @@
|
||||
<span>用户增减数据</span>
|
||||
</div>
|
||||
</template>
|
||||
<div class="el-table el-table--enable-row-hover el-table--medium">
|
||||
<div ref="userSummaryChartRef" style="height: 420px"></div>
|
||||
</div>
|
||||
<Echart :options="userSummaryOption" :height="420" />
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="12" class="card-box">
|
||||
@ -49,9 +47,7 @@
|
||||
<span>累计用户数据</span>
|
||||
</div>
|
||||
</template>
|
||||
<div class="el-table el-table--enable-row-hover el-table--medium">
|
||||
<div ref="userCumulateChartRef" style="height: 420px"></div>
|
||||
</div>
|
||||
<Echart :options="userCumulateOption" :height="420" />
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="12" class="card-box">
|
||||
@ -61,9 +57,7 @@
|
||||
<span>消息概况数据</span>
|
||||
</div>
|
||||
</template>
|
||||
<div class="el-table el-table--enable-row-hover el-table--medium">
|
||||
<div ref="upstreamMessageChartRef" style="height: 420px"></div>
|
||||
</div>
|
||||
<Echart :options="upstreamMessageOption" :height="420" />
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="12" class="card-box">
|
||||
@ -73,9 +67,7 @@
|
||||
<span>接口分析数据</span>
|
||||
</div>
|
||||
</template>
|
||||
<div class="el-table el-table--enable-row-hover el-table--medium">
|
||||
<div ref="interfaceSummaryChartRef" style="height: 420px"></div>
|
||||
</div>
|
||||
<Echart :options="interfaceSummaryOption" :height="420" />
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
@ -83,38 +75,28 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="MpStatistics">
|
||||
import * as echarts from 'echarts'
|
||||
import {
|
||||
getInterfaceSummary,
|
||||
getUpstreamMessage,
|
||||
getUserCumulate,
|
||||
getUserSummary
|
||||
} from '@/api/mp/statistics' // TODO 改成 StatisticsApi 整体引入
|
||||
import { addTime, beginOfDay, betweenDay, endOfDay } from '@/utils/dateUtils' // TODO 可以改到 formatTime 里
|
||||
import { formatDate } from '@/utils/formatTime'
|
||||
import * as StatisticsApi from '@/api/mp/statistics'
|
||||
import { formatDate, addTime, betweenDay, beginOfDay, endOfDay } from '@/utils/formatTime'
|
||||
import * as MpAccountApi from '@/api/mp/account'
|
||||
const message = useMessage() // 消息弹窗
|
||||
|
||||
// 默认时间 开始时间00:00:00 结束时间23:59:59
|
||||
const defaultTime = ref<[Date, Date]>([
|
||||
new Date(2000, 1, 1, 0, 0, 0),
|
||||
new Date(2000, 2, 1, 23, 59, 59)
|
||||
])
|
||||
// 默认开始时间是当前日期-7，结束时间是当前日期-1
|
||||
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 accountList = ref<MpAccountApi.AccountVO[]>([]) // 公众号账号列表
|
||||
|
||||
const userSummaryChartRef = ref()
|
||||
const userCumulateChartRef = ref()
|
||||
const upstreamMessageChartRef = ref()
|
||||
const interfaceSummaryChartRef = ref()
|
||||
// TODO 看看能不能用 https://kailong110120130.gitee.io/vue-element-plus-admin-doc/components/echart.html 组件
|
||||
const xAxisDate = ref([] as any[]) // X 轴的日期范围
|
||||
// 用户增减数据图表配置项
|
||||
const userSummaryOption = reactive({
|
||||
// 用户增减数据
|
||||
color: ['#67C23A', '#e5323e'],
|
||||
color: ['#67C23A', '#E5323E'],
|
||||
legend: {
|
||||
data: ['新增用户', '取消关注的用户']
|
||||
},
|
||||
@ -145,8 +127,8 @@ const userSummaryOption = reactive({
|
||||
}
|
||||
]
|
||||
})
|
||||
// 累计用户数据图表配置项
|
||||
const userCumulateOption = reactive({
|
||||
// 累计用户数据
|
||||
legend: {
|
||||
data: ['累计用户量']
|
||||
},
|
||||
@ -169,9 +151,9 @@ const userCumulateOption = reactive({
|
||||
}
|
||||
]
|
||||
})
|
||||
// 消息发送概况数据图表配置项
|
||||
const upstreamMessageOption = reactive({
|
||||
// 消息发送概况数据
|
||||
color: ['#67C23A', '#e5323e'],
|
||||
color: ['#67C23A', '#E5323E'],
|
||||
legend: {
|
||||
data: ['用户发送人数', '用户发送条数']
|
||||
},
|
||||
@ -203,9 +185,9 @@ const upstreamMessageOption = reactive({
|
||||
}
|
||||
]
|
||||
})
|
||||
// 接口分析况数据图表配置项
|
||||
const interfaceSummaryOption = reactive({
|
||||
// 接口分析况数据
|
||||
color: ['#67C23A', '#e5323e', '#E6A23C', '#409EFF'],
|
||||
color: ['#67C23A', '#E5323E', '#E6A23C', '#409EFF'],
|
||||
legend: {
|
||||
data: ['被动回复用户消息的次数', '失败次数', '最大耗时', '总耗时']
|
||||
},
|
||||
@ -260,7 +242,7 @@ const getAccountList = async () => {
|
||||
}
|
||||
}
|
||||
|
||||
// TODO 一些方法的注释补全下
|
||||
/** 加载数据 */
|
||||
const getSummary = () => {
|
||||
// 如果没有选中公众号账号，则进行提示。
|
||||
if (!accountId) {
|
||||
@ -272,30 +254,33 @@ const getSummary = () => {
|
||||
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({
|
||||
// 用户增减数据
|
||||
const data = await StatisticsApi.getUserSummary({
|
||||
accountId: accountId.value,
|
||||
date: [formatDate(dateRange.value[0]), formatDate(dateRange.value[1])]
|
||||
})
|
||||
// 横坐标
|
||||
userSummaryOption.xAxis.data = xAxisDate.value
|
||||
// 处理数据
|
||||
xAxisDate.value.forEach((date, index) => {
|
||||
@ -310,18 +295,15 @@ const initUserSummaryChart = async () => {
|
||||
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({
|
||||
const data = await StatisticsApi.getUserCumulate({
|
||||
accountId: accountId.value,
|
||||
date: [formatDate(dateRange.value[0]), formatDate(dateRange.value[1])]
|
||||
})
|
||||
@ -330,18 +312,16 @@ const initUserCumulateChart = async () => {
|
||||
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({
|
||||
const data = await StatisticsApi.getUpstreamMessage({
|
||||
accountId: accountId.value,
|
||||
date: [formatDate(dateRange.value[0]), formatDate(dateRange.value[1])]
|
||||
})
|
||||
@ -351,11 +331,9 @@ const initUpstreamMessageChart = async () => {
|
||||
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 = []
|
||||
@ -364,7 +342,7 @@ const interfaceSummaryChart = async () => {
|
||||
interfaceSummaryOption.series[3].data = []
|
||||
// 发起请求
|
||||
try {
|
||||
const data = await getInterfaceSummary({
|
||||
const data = await StatisticsApi.getInterfaceSummary({
|
||||
accountId: accountId.value,
|
||||
date: [formatDate(dateRange.value[0]), formatDate(dateRange.value[1])]
|
||||
})
|
||||
@ -376,9 +354,6 @@ const interfaceSummaryChart = async () => {
|
||||
interfaceSummaryOption.series[2].data[index] = item.maxTimeCost
|
||||
interfaceSummaryOption.series[3].data[index] = item.totalTimeCost
|
||||
})
|
||||
// 绘制图表
|
||||
const interfaceSummaryChart = echarts.init(interfaceSummaryChartRef.value)
|
||||
interfaceSummaryChart.setOption(interfaceSummaryOption)
|
||||
} catch {}
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user