yudao
/
admin-vue3
mirror of https://gitee.com/yudaocode/yudao-ui-admin-vue3.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Vue3重构：公众号统计优化 TODO

pull/72/head
kinlon92 2023-03-28 18:23:58 +08:00
parent 969c83a8dc
commit 658150c1c8
3 changed files with 82 additions and 135 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
src/utils/dateUtils.ts
View File

@ -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
}

51
src/utils/formatTime.ts
View File

@ -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
}

87
src/views/mp/statistics/index.vue
View File

@ -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 {}
}