!72 Vue3重构:公众号统计优化

Merge pull request !72 from kinlon92/dev
This commit is contained in:
芋道源码 2023-03-28 15:24:36 +00:00 committed by Gitee
commit 80b690b305
No known key found for this signature in database
GPG Key ID: 173E9B9CA92EEF8F
3 changed files with 82 additions and 135 deletions

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
}

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
}

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