[fix] 修改说明

This commit is contained in:
hhyykk 2024-07-18 11:41:56 +08:00
parent edf2a5f188
commit 713b2cba0c
2 changed files with 305 additions and 295 deletions

View File

@ -37,4 +37,14 @@
- [feat] 新增xxxx功能 - [feat] 新增xxxx功能
- [perf] 性能优化 - [perf] 性能优化
- [hotfix] 紧急修复bug - [hotfix] 紧急修复bug
3. 功能自行测试,通过后提交代码全部完成后提交PR 3. 功能自行测试,通过后提交代码全部完成后提交PR
### 快速开始
# 安装 pnpm提升依赖的安装速度
npm config set registry https://mirrors.huaweicloud.com/repository/npm/
npm install -g pnpm
# 安装依赖
pnpm install
# 启动服务
npm run dev

View File

@ -1,319 +1,319 @@
<template> <!--<template>-->
<el-row :class="prefixCls" :gutter="20" justify="space-between"> <!-- <el-row :class="prefixCls" :gutter="20" justify="space-between">-->
<el-col :lg="6" :md="12" :sm="12" :xl="6" :xs="24"> <!-- <el-col :lg="6" :md="12" :sm="12" :xl="6" :xs="24">-->
<el-card class="mb-20px" shadow="hover"> <!-- <el-card class="mb-20px" shadow="hover">-->
<el-skeleton :loading="loading" :rows="2" animated> <!-- <el-skeleton :loading="loading" :rows="2" animated>-->
<template #default> <!-- <template #default>-->
<div :class="`${prefixCls}__item flex justify-between`"> <!-- <div :class="`${prefixCls}__item flex justify-between`">-->
<div> <!-- <div>-->
<div <!-- <div-->
:class="`${prefixCls}__item--icon ${prefixCls}__item--peoples p-16px inline-block rounded-6px`" <!-- :class="`${prefixCls}__item&#45;&#45;icon ${prefixCls}__item&#45;&#45;peoples p-16px inline-block rounded-6px`"-->
> <!-- >-->
<Icon :size="40" icon="svg-icon:peoples" /> <!-- <Icon :size="40" icon="svg-icon:peoples" />-->
</div> <!-- </div>-->
</div> <!-- </div>-->
<div class="flex flex-col justify-between"> <!-- <div class="flex flex-col justify-between">-->
<div :class="`${prefixCls}__item--text text-16px text-gray-500 text-right`" <!-- <div :class="`${prefixCls}__item&#45;&#45;text text-16px text-gray-500 text-right`"-->
>{{ t('analysis.newUser') }} <!-- >{{ t('analysis.newUser') }}-->
</div> <!-- </div>-->
<CountTo <!-- <CountTo-->
:duration="2600" <!-- :duration="2600"-->
:end-val="102400" <!-- :end-val="102400"-->
:start-val="0" <!-- :start-val="0"-->
class="text-right text-20px font-700" <!-- class="text-right text-20px font-700"-->
/> <!-- />-->
</div> <!-- </div>-->
</div> <!-- </div>-->
</template> <!-- </template>-->
</el-skeleton> <!-- </el-skeleton>-->
</el-card> <!-- </el-card>-->
</el-col> <!-- </el-col>-->
<el-col :lg="6" :md="12" :sm="12" :xl="6" :xs="24"> <!-- <el-col :lg="6" :md="12" :sm="12" :xl="6" :xs="24">-->
<el-card class="mb-20px" shadow="hover"> <!-- <el-card class="mb-20px" shadow="hover">-->
<el-skeleton :loading="loading" :rows="2" animated> <!-- <el-skeleton :loading="loading" :rows="2" animated>-->
<template #default> <!-- <template #default>-->
<div :class="`${prefixCls}__item flex justify-between`"> <!-- <div :class="`${prefixCls}__item flex justify-between`">-->
<div> <!-- <div>-->
<div <!-- <div-->
:class="`${prefixCls}__item--icon ${prefixCls}__item--message p-16px inline-block rounded-6px`" <!-- :class="`${prefixCls}__item&#45;&#45;icon ${prefixCls}__item&#45;&#45;message p-16px inline-block rounded-6px`"-->
> <!-- >-->
<Icon :size="40" icon="svg-icon:message" /> <!-- <Icon :size="40" icon="svg-icon:message" />-->
</div> <!-- </div>-->
</div> <!-- </div>-->
<div class="flex flex-col justify-between"> <!-- <div class="flex flex-col justify-between">-->
<div :class="`${prefixCls}__item--text text-16px text-gray-500 text-right`" <!-- <div :class="`${prefixCls}__item&#45;&#45;text text-16px text-gray-500 text-right`"-->
>{{ t('analysis.unreadInformation') }} <!-- >{{ t('analysis.unreadInformation') }}-->
</div> <!-- </div>-->
<CountTo <!-- <CountTo-->
:duration="2600" <!-- :duration="2600"-->
:end-val="81212" <!-- :end-val="81212"-->
:start-val="0" <!-- :start-val="0"-->
class="text-right text-20px font-700" <!-- class="text-right text-20px font-700"-->
/> <!-- />-->
</div> <!-- </div>-->
</div> <!-- </div>-->
</template> <!-- </template>-->
</el-skeleton> <!-- </el-skeleton>-->
</el-card> <!-- </el-card>-->
</el-col> <!-- </el-col>-->
<el-col :lg="6" :md="12" :sm="12" :xl="6" :xs="24"> <!-- <el-col :lg="6" :md="12" :sm="12" :xl="6" :xs="24">-->
<el-card class="mb-20px" shadow="hover"> <!-- <el-card class="mb-20px" shadow="hover">-->
<el-skeleton :loading="loading" :rows="2" animated> <!-- <el-skeleton :loading="loading" :rows="2" animated>-->
<template #default> <!-- <template #default>-->
<div :class="`${prefixCls}__item flex justify-between`"> <!-- <div :class="`${prefixCls}__item flex justify-between`">-->
<div> <!-- <div>-->
<div <!-- <div-->
:class="`${prefixCls}__item--icon ${prefixCls}__item--money p-16px inline-block rounded-6px`" <!-- :class="`${prefixCls}__item&#45;&#45;icon ${prefixCls}__item&#45;&#45;money p-16px inline-block rounded-6px`"-->
> <!-- >-->
<Icon :size="40" icon="svg-icon:money" /> <!-- <Icon :size="40" icon="svg-icon:money" />-->
</div> <!-- </div>-->
</div> <!-- </div>-->
<div class="flex flex-col justify-between"> <!-- <div class="flex flex-col justify-between">-->
<div :class="`${prefixCls}__item--text text-16px text-gray-500 text-right`" <!-- <div :class="`${prefixCls}__item&#45;&#45;text text-16px text-gray-500 text-right`"-->
>{{ t('analysis.transactionAmount') }} <!-- >{{ t('analysis.transactionAmount') }}-->
</div> <!-- </div>-->
<CountTo <!-- <CountTo-->
:duration="2600" <!-- :duration="2600"-->
:end-val="9280" <!-- :end-val="9280"-->
:start-val="0" <!-- :start-val="0"-->
class="text-right text-20px font-700" <!-- class="text-right text-20px font-700"-->
/> <!-- />-->
</div> <!-- </div>-->
</div> <!-- </div>-->
</template> <!-- </template>-->
</el-skeleton> <!-- </el-skeleton>-->
</el-card> <!-- </el-card>-->
</el-col> <!-- </el-col>-->
<el-col :lg="6" :md="12" :sm="12" :xl="6" :xs="24"> <!-- <el-col :lg="6" :md="12" :sm="12" :xl="6" :xs="24">-->
<el-card class="mb-20px" shadow="hover"> <!-- <el-card class="mb-20px" shadow="hover">-->
<el-skeleton :loading="loading" :rows="2" animated> <!-- <el-skeleton :loading="loading" :rows="2" animated>-->
<template #default> <!-- <template #default>-->
<div :class="`${prefixCls}__item flex justify-between`"> <!-- <div :class="`${prefixCls}__item flex justify-between`">-->
<div> <!-- <div>-->
<div <!-- <div-->
:class="`${prefixCls}__item--icon ${prefixCls}__item--shopping p-16px inline-block rounded-6px`" <!-- :class="`${prefixCls}__item&#45;&#45;icon ${prefixCls}__item&#45;&#45;shopping p-16px inline-block rounded-6px`"-->
> <!-- >-->
<Icon :size="40" icon="svg-icon:shopping" /> <!-- <Icon :size="40" icon="svg-icon:shopping" />-->
</div> <!-- </div>-->
</div> <!-- </div>-->
<div class="flex flex-col justify-between"> <!-- <div class="flex flex-col justify-between">-->
<div :class="`${prefixCls}__item--text text-16px text-gray-500 text-right`" <!-- <div :class="`${prefixCls}__item&#45;&#45;text text-16px text-gray-500 text-right`"-->
>{{ t('analysis.totalShopping') }} <!-- >{{ t('analysis.totalShopping') }}-->
</div> <!-- </div>-->
<CountTo <!-- <CountTo-->
:duration="2600" <!-- :duration="2600"-->
:end-val="13600" <!-- :end-val="13600"-->
:start-val="0" <!-- :start-val="0"-->
class="text-right text-20px font-700" <!-- class="text-right text-20px font-700"-->
/> <!-- />-->
</div> <!-- </div>-->
</div> <!-- </div>-->
</template> <!-- </template>-->
</el-skeleton> <!-- </el-skeleton>-->
</el-card> <!-- </el-card>-->
</el-col> <!-- </el-col>-->
</el-row> <!-- </el-row>-->
<el-row :gutter="20" justify="space-between"> <!-- <el-row :gutter="20" justify="space-between">-->
<el-col :lg="10" :md="24" :sm="24" :xl="10" :xs="24"> <!-- <el-col :lg="10" :md="24" :sm="24" :xl="10" :xs="24">-->
<el-card class="mb-20px" shadow="hover"> <!-- <el-card class="mb-20px" shadow="hover">-->
<el-skeleton :loading="loading" animated> <!-- <el-skeleton :loading="loading" animated>-->
<Echart :height="300" :options="pieOptionsData" /> <!-- <Echart :height="300" :options="pieOptionsData" />-->
</el-skeleton> <!-- </el-skeleton>-->
</el-card> <!-- </el-card>-->
</el-col> <!-- </el-col>-->
<el-col :lg="14" :md="24" :sm="24" :xl="14" :xs="24"> <!-- <el-col :lg="14" :md="24" :sm="24" :xl="14" :xs="24">-->
<el-card class="mb-20px" shadow="hover"> <!-- <el-card class="mb-20px" shadow="hover">-->
<el-skeleton :loading="loading" animated> <!-- <el-skeleton :loading="loading" animated>-->
<Echart :height="300" :options="barOptionsData" /> <!-- <Echart :height="300" :options="barOptionsData" />-->
</el-skeleton> <!-- </el-skeleton>-->
</el-card> <!-- </el-card>-->
</el-col> <!-- </el-col>-->
<el-col :span="24"> <!-- <el-col :span="24">-->
<el-card class="mb-20px" shadow="hover"> <!-- <el-card class="mb-20px" shadow="hover">-->
<el-skeleton :loading="loading" :rows="4" animated> <!-- <el-skeleton :loading="loading" :rows="4" animated>-->
<Echart :height="350" :options="lineOptionsData" /> <!-- <Echart :height="350" :options="lineOptionsData" />-->
</el-skeleton> <!-- </el-skeleton>-->
</el-card> <!-- </el-card>-->
</el-col> <!-- </el-col>-->
</el-row> <!-- </el-row>-->
</template> <!--</template>-->
<script lang="ts" setup> <!--<script lang="ts" setup>-->
import { set } from 'lodash-es' <!--import { set } from 'lodash-es'-->
import { EChartsOption } from 'echarts' <!--import { EChartsOption } from 'echarts'-->
import { useDesign } from '@/hooks/web/useDesign' <!--import { useDesign } from '@/hooks/web/useDesign'-->
import type { AnalysisTotalTypes } from './types' <!--import type { AnalysisTotalTypes } from './types'-->
import { barOptions, lineOptions, pieOptions } from './echarts-data' <!--// import { barOptions, lineOptions, pieOptions } from './echarts-data'-->
defineOptions({ name: 'Home2' }) <!--defineOptions({ name: 'Home2' })-->
const { t } = useI18n() <!--const { t } = useI18n()-->
const loading = ref(true) <!--const loading = ref(true)-->
const { getPrefixCls } = useDesign() <!--const { getPrefixCls } = useDesign()-->
const prefixCls = getPrefixCls('panel') <!--const prefixCls = getPrefixCls('panel')-->
const pieOptionsData = reactive<EChartsOption>(pieOptions) as EChartsOption <!--const pieOptionsData = reactive<EChartsOption>(pieOptions) as EChartsOption-->
let totalState = reactive<AnalysisTotalTypes>({ <!--let totalState = reactive<AnalysisTotalTypes>({-->
users: 0, <!-- users: 0,-->
messages: 0, <!-- messages: 0,-->
moneys: 0, <!-- moneys: 0,-->
shoppings: 0 <!-- shoppings: 0-->
}) <!--})-->
const getCount = async () => { <!--const getCount = async () => {-->
const data = { <!-- const data = {-->
users: 102400, <!-- users: 102400,-->
messages: 81212, <!-- messages: 81212,-->
moneys: 9280, <!-- moneys: 9280,-->
shoppings: 13600 <!-- shoppings: 13600-->
} <!-- }-->
totalState = Object.assign(totalState, data) <!-- totalState = Object.assign(totalState, data)-->
} <!--}-->
// <!--// -->
const getUserAccessSource = async () => { <!--const getUserAccessSource = async () => {-->
const data = [ <!-- const data = [-->
{ value: 335, name: 'analysis.directAccess' }, <!-- { value: 335, name: 'analysis.directAccess' },-->
{ value: 310, name: 'analysis.mailMarketing' }, <!-- { value: 310, name: 'analysis.mailMarketing' },-->
{ value: 234, name: 'analysis.allianceAdvertising' }, <!-- { value: 234, name: 'analysis.allianceAdvertising' },-->
{ value: 135, name: 'analysis.videoAdvertising' }, <!-- { value: 135, name: 'analysis.videoAdvertising' },-->
{ value: 1548, name: 'analysis.searchEngines' } <!-- { value: 1548, name: 'analysis.searchEngines' }-->
] <!-- ]-->
set( <!-- set(-->
pieOptionsData, <!-- pieOptionsData,-->
'legend.data', <!-- 'legend.data',-->
data.map((v) => t(v.name)) <!-- data.map((v) => t(v.name))-->
) <!-- )-->
set(pieOptionsData, 'series.data', data) <!-- set(pieOptionsData, 'series.data', data)-->
} <!--}-->
const barOptionsData = reactive<EChartsOption>(barOptions) as EChartsOption <!--const barOptionsData = reactive<EChartsOption>(barOptions) as EChartsOption-->
// <!--// -->
const getWeeklyUserActivity = async () => { <!--const getWeeklyUserActivity = async () => {-->
const data = [ <!-- const data = [-->
{ value: 13253, name: 'analysis.monday' }, <!-- { value: 13253, name: 'analysis.monday' },-->
{ value: 34235, name: 'analysis.tuesday' }, <!-- { value: 34235, name: 'analysis.tuesday' },-->
{ value: 26321, name: 'analysis.wednesday' }, <!-- { value: 26321, name: 'analysis.wednesday' },-->
{ value: 12340, name: 'analysis.thursday' }, <!-- { value: 12340, name: 'analysis.thursday' },-->
{ value: 24643, name: 'analysis.friday' }, <!-- { value: 24643, name: 'analysis.friday' },-->
{ value: 1322, name: 'analysis.saturday' }, <!-- { value: 1322, name: 'analysis.saturday' },-->
{ value: 1324, name: 'analysis.sunday' } <!-- { value: 1324, name: 'analysis.sunday' }-->
] <!-- ]-->
set( <!-- set(-->
barOptionsData, <!-- barOptionsData,-->
'xAxis.data', <!-- 'xAxis.data',-->
data.map((v) => t(v.name)) <!-- data.map((v) => t(v.name))-->
) <!-- )-->
set(barOptionsData, 'series', [ <!-- set(barOptionsData, 'series', [-->
{ <!-- {-->
name: t('analysis.activeQuantity'), <!-- name: t('analysis.activeQuantity'),-->
data: data.map((v) => v.value), <!-- data: data.map((v) => v.value),-->
type: 'bar' <!-- type: 'bar'-->
} <!-- }-->
]) <!-- ])-->
} <!--}-->
const lineOptionsData = reactive<EChartsOption>(lineOptions) as EChartsOption <!--const lineOptionsData = reactive<EChartsOption>(lineOptions) as EChartsOption-->
// <!--// -->
const getMonthlySales = async () => { <!--const getMonthlySales = async () => {-->
const data = [ <!-- const data = [-->
{ estimate: 100, actual: 120, name: 'analysis.january' }, <!-- { estimate: 100, actual: 120, name: 'analysis.january' },-->
{ estimate: 120, actual: 82, name: 'analysis.february' }, <!-- { estimate: 120, actual: 82, name: 'analysis.february' },-->
{ estimate: 161, actual: 91, name: 'analysis.march' }, <!-- { estimate: 161, actual: 91, name: 'analysis.march' },-->
{ estimate: 134, actual: 154, name: 'analysis.april' }, <!-- { estimate: 134, actual: 154, name: 'analysis.april' },-->
{ estimate: 105, actual: 162, name: 'analysis.may' }, <!-- { estimate: 105, actual: 162, name: 'analysis.may' },-->
{ estimate: 160, actual: 140, name: 'analysis.june' }, <!-- { estimate: 160, actual: 140, name: 'analysis.june' },-->
{ estimate: 165, actual: 145, name: 'analysis.july' }, <!-- { estimate: 165, actual: 145, name: 'analysis.july' },-->
{ estimate: 114, actual: 250, name: 'analysis.august' }, <!-- { estimate: 114, actual: 250, name: 'analysis.august' },-->
{ estimate: 163, actual: 134, name: 'analysis.september' }, <!-- { estimate: 163, actual: 134, name: 'analysis.september' },-->
{ estimate: 185, actual: 56, name: 'analysis.october' }, <!-- { estimate: 185, actual: 56, name: 'analysis.october' },-->
{ estimate: 118, actual: 99, name: 'analysis.november' }, <!-- { estimate: 118, actual: 99, name: 'analysis.november' },-->
{ estimate: 123, actual: 123, name: 'analysis.december' } <!-- { estimate: 123, actual: 123, name: 'analysis.december' }-->
] <!-- ]-->
set( <!-- set(-->
lineOptionsData, <!-- lineOptionsData,-->
'xAxis.data', <!-- 'xAxis.data',-->
data.map((v) => t(v.name)) <!-- data.map((v) => t(v.name))-->
) <!-- )-->
set(lineOptionsData, 'series', [ <!-- set(lineOptionsData, 'series', [-->
{ <!-- {-->
name: t('analysis.estimate'), <!-- name: t('analysis.estimate'),-->
smooth: true, <!-- smooth: true,-->
type: 'line', <!-- type: 'line',-->
data: data.map((v) => v.estimate), <!-- data: data.map((v) => v.estimate),-->
animationDuration: 2800, <!-- animationDuration: 2800,-->
animationEasing: 'cubicInOut' <!-- animationEasing: 'cubicInOut'-->
}, <!-- },-->
{ <!-- {-->
name: t('analysis.actual'), <!-- name: t('analysis.actual'),-->
smooth: true, <!-- smooth: true,-->
type: 'line', <!-- type: 'line',-->
itemStyle: {}, <!-- itemStyle: {},-->
data: data.map((v) => v.actual), <!-- data: data.map((v) => v.actual),-->
animationDuration: 2800, <!-- animationDuration: 2800,-->
animationEasing: 'quadraticOut' <!-- animationEasing: 'quadraticOut'-->
} <!-- }-->
]) <!-- ])-->
} <!--}-->
const getAllApi = async () => { <!--const getAllApi = async () => {-->
await Promise.all([getCount(), getUserAccessSource(), getWeeklyUserActivity(), getMonthlySales()]) <!-- await Promise.all([getCount(), getUserAccessSource(), getWeeklyUserActivity(), getMonthlySales()])-->
loading.value = false <!-- loading.value = false-->
} <!--}-->
getAllApi() <!--getAllApi()-->
</script> <!--</script>-->
<style lang="scss" scoped> <!--<style lang="scss" scoped>-->
$prefix-cls: #{$namespace}-panel; <!--$prefix-cls: #{$namespace}-panel;-->
.#{$prefix-cls} { <!--.#{$prefix-cls} {-->
&__item { <!-- &__item {-->
&--peoples { <!-- &&#45;&#45;peoples {-->
color: #40c9c6; <!-- color: #40c9c6;-->
} <!-- }-->
&--message { <!-- &&#45;&#45;message {-->
color: #36a3f7; <!-- color: #36a3f7;-->
} <!-- }-->
&--money { <!-- &&#45;&#45;money {-->
color: #f4516c; <!-- color: #f4516c;-->
} <!-- }-->
&--shopping { <!-- &&#45;&#45;shopping {-->
color: #34bfa3; <!-- color: #34bfa3;-->
} <!-- }-->
&:hover { <!-- &:hover {-->
:deep(.#{$namespace}-icon) { <!-- :deep(.#{$namespace}-icon) {-->
color: #fff !important; <!-- color: #fff !important;-->
} <!-- }-->
.#{$prefix-cls}__item--icon { <!-- .#{$prefix-cls}__item&#45;&#45;icon {-->
transition: all 0.38s ease-out; <!-- transition: all 0.38s ease-out;-->
} <!-- }-->
.#{$prefix-cls}__item--peoples { <!-- .#{$prefix-cls}__item&#45;&#45;peoples {-->
background: #40c9c6; <!-- background: #40c9c6;-->
} <!-- }-->
.#{$prefix-cls}__item--message { <!-- .#{$prefix-cls}__item&#45;&#45;message {-->
background: #36a3f7; <!-- background: #36a3f7;-->
} <!-- }-->
.#{$prefix-cls}__item--money { <!-- .#{$prefix-cls}__item&#45;&#45;money {-->
background: #f4516c; <!-- background: #f4516c;-->
} <!-- }-->
.#{$prefix-cls}__item--shopping { <!-- .#{$prefix-cls}__item&#45;&#45;shopping {-->
background: #34bfa3; <!-- background: #34bfa3;-->
} <!-- }-->
} <!-- }-->
} <!-- }-->
} <!--}-->
</style> <!--</style>-->