style: stylelint

(cherry picked from commit 1a1b70a350)
This commit is contained in:
xingyu 2023-10-16 15:04:05 +08:00 committed by shizhong
parent 874793867e
commit d02f5570f5
6 changed files with 234 additions and 55 deletions

View File

@ -598,14 +598,17 @@ watch(
stroke: #e6a23c !important;
fill-opacity: 0.2 !important;
}
.highlight-return.djs-shape .djs-visual > :nth-child(2) {
fill: #e6a23c !important;
}
.highlight-return.djs-shape .djs-visual > path {
fill: #e6a23c !important;
fill-opacity: 0.2 !important;
stroke: #e6a23c !important;
}
.highlight-return.djs-connection > .djs-visual > path {
stroke: #e6a23c !important;
}
@ -619,14 +622,17 @@ watch(
stroke: #e6a23c !important;
fill-opacity: 0.2 !important;
}
:deep(.highlight-return.djs-shape .djs-visual > :nth-child(2)) {
fill: #e6a23c !important;
}
:deep(.highlight-return.djs-shape .djs-visual > path) {
fill: #e6a23c !important;
fill-opacity: 0.2 !important;
stroke: #e6a23c !important;
}
:deep(.highlight-return.djs-connection > .djs-visual > path) {
stroke: #e6a23c !important;
}

View File

@ -114,6 +114,7 @@ $prefix-cls: #{$elNamespace}-breadcrumb;
}
}
}
:deep(&__item):last-child {
.#{$prefix-cls}__inner {
display: flex;

View File

@ -6,7 +6,7 @@
<div class="flex items-center">
<div
class="h-[50px] w-[50px] flex items-center justify-center"
style="color: rgb(24, 144, 255); background-color: rgba(24, 144, 255, 0.1)"
style="color: rgb(24 144 255); background-color: rgb(24 144 255 / 10%)"
>
<Icon :size="23" icon="fa:user-times" />
</div>
@ -27,7 +27,7 @@
<div class="flex items-center">
<div
class="h-[50px] w-[50px] flex items-center justify-center"
style="color: rgb(162, 119, 255); background-color: rgba(162, 119, 255, 0.1)"
style="color: rgb(162 119 255); background-color: rgb(162 119 255 / 10%)"
>
<Icon :size="23" icon="fa:user-plus" />
</div>
@ -48,7 +48,7 @@
<div class="flex items-center">
<div
class="h-[50px] w-[50px] flex items-center justify-center"
style="color: rgb(162, 119, 255); background-color: rgba(162, 119, 255, 0.1)"
style="color: rgb(162 119 255); background-color: rgb(162 119 255 / 10%)"
>
<Icon :size="23" icon="fa:user-plus" />
</div>

View File

@ -44,20 +44,118 @@
</el-row>
<el-row :gutter="16" class="mb-4">
<el-col :md="18" :sm="24">
<!-- 会员概览 -->
<MemberFunnelCard />
<el-card shadow="never">
<template #header>
<div class="flex flex-row items-center justify-between">
<span>会员概览</span>
<!-- 查询条件 -->
<div class="my--2 flex flex-row items-center gap-2">
<el-radio-group v-model="shortcutDays" @change="handleDateTypeChange">
<el-radio-button :label="1">昨天</el-radio-button>
<el-radio-button :label="7">最近7天</el-radio-button>
<el-radio-button :label="30">最近30天</el-radio-button>
</el-radio-group>
<el-date-picker
v-model="queryParams.times"
value-format="YYYY-MM-DD HH:mm:ss"
type="daterange"
start-placeholder="开始日期"
end-placeholder="结束日期"
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
:shortcuts="shortcuts"
class="!w-240px"
@change="getMemberAnalyse"
/>
</div>
</div>
</template>
<div class="min-w-225 py-1.75" v-loading="analyseLoading">
<div class="relative h-24 flex">
<div class="h-full w-75% bg-blue-50 <lg:w-35% <xl:w-55%">
<div class="ml-15 h-full flex flex-col justify-center">
<div class="font-bold">
注册用户数量{{ analyseData?.comparison?.value?.userCount || 0 }}
</div>
<div class="mt-2 text-3.5">
环比增长率{{
calculateRelativeRate(
analyseData?.comparison?.value?.userCount,
analyseData?.comparison?.reference?.userCount
)
}}%
</div>
</div>
</div>
<div
class="trapezoid1 ml--38.5 mt-1.5 h-full w-77 flex flex-col items-center justify-center bg-blue-5 text-3.5 text-white"
>
<span class="text-6 font-bold">{{ analyseData?.visitorCount || 0 }}</span>
<span>访客</span>
</div>
</div>
<div class="relative h-24 flex">
<div class="h-full w-75% flex bg-cyan-50 <lg:w-35% <xl:w-55%">
<div class="ml-15 h-full flex flex-col justify-center">
<div class="font-bold">
活跃用户数量{{ analyseData?.comparison?.value?.activeUserCount || 0 }}
</div>
<div class="mt-2 text-3.5">
环比增长率{{
calculateRelativeRate(
analyseData?.comparison?.value?.activeUserCount,
analyseData?.comparison?.reference?.activeUserCount
)
}}%
</div>
</div>
</div>
<div
class="trapezoid2 ml--28 mt-1.7 h-25 w-56 flex flex-col items-center justify-center bg-cyan-5 text-3.5 text-white"
>
<span class="text-6 font-bold">{{ analyseData?.orderUserCount || 0 }}</span>
<span>下单</span>
</div>
</div>
<div class="relative h-24 flex">
<div class="w-75% flex bg-slate-50 <lg:w-35% <xl:w-55%">
<div class="ml-15 h-full flex flex-row gap-x-16">
<div class="flex flex-col justify-center">
<div class="font-bold">
充值用户数量{{ analyseData?.comparison?.value?.rechargeUserCount || 0 }}
</div>
<div class="mt-2 text-3.5">
环比增长率{{
calculateRelativeRate(
analyseData?.comparison?.value?.rechargeUserCount,
analyseData?.comparison?.reference?.rechargeUserCount
)
}}%
</div>
</div>
<div class="flex flex-col justify-center">
<div class="font-bold">客单价{{ fenToYuan(analyseData?.atv || 0) }}</div>
</div>
</div>
</div>
<div
class="trapezoid3 ml--18 mt-3.25 h-23 w-36 flex flex-col items-center justify-center bg-slate-5 text-3.5 text-white"
>
<span class="text-6 font-bold">{{ analyseData?.payUserCount || 0 }}</span>
<span>成交用户</span>
</div>
</div>
</div>
</el-card>
</el-col>
<el-col :md="6" :sm="24">
<!-- 会员终端 -->
<MemberTerminalCard />
<el-card shadow="never" header="会员终端" v-loading="loading">
<Echart :height="300" :options="terminalChartOptions" />
</el-card>
</el-col>
</el-row>
<el-row :gutter="16">
<el-col :md="18" :sm="24">
<el-card shadow="never">
<template #header>
<CardTitle title="会员地域分布" />
</template>
<el-card shadow="never" header="会员地域分布">
<el-row v-loading="loading">
<el-col :span="10">
<Echart :height="300" :options="areaChartOptions" />
@ -82,14 +180,14 @@
/>
<el-table-column
label="订单创建数量"
prop="orderCreateUserCount"
prop="orderCreateCount"
align="center"
min-width="135"
sortable
/>
<el-table-column
label="订单支付数量"
prop="orderPayUserCount"
prop="orderPayCount"
align="center"
min-width="135"
sortable
@ -108,10 +206,7 @@
</el-card>
</el-col>
<el-col :md="6" :sm="24">
<el-card shadow="never" v-loading="loading">
<template #header>
<CardTitle title="会员性别比例" />
</template>
<el-card shadow="never" header="会员性别比例" v-loading="loading">
<Echart :height="300" :options="sexChartOptions" />
</el-card>
</el-col>
@ -119,33 +214,62 @@
</div>
</template>
<script lang="ts" setup>
import * as MemberStatisticsApi from '@/api/mall/statistics/member'
import * as TradeMemberApi from '@/api/mall/statistics/member'
import TradeTrendValue from '../trade/components/TradeTrendValue.vue'
import { EChartsOption } from 'echarts'
import china from '@/assets/map/json/china.json'
import dayjs from 'dayjs'
import { fenToYuan } from '@/utils'
import * as DateUtil from '@/utils/formatTime'
import {
MemberAnalyseRespVO,
MemberAreaStatisticsRespVO,
MemberSexStatisticsRespVO,
MemberAnalyseReqVO,
MemberSummaryRespVO,
MemberTerminalStatisticsRespVO
} from '@/api/mall/statistics/member'
import { DICT_TYPE, DictDataType, getIntDictOptions } from '@/utils/dict'
import echarts from '@/plugins/echarts'
import { fenToYuanFormat } from '@/utils/formatter'
import MemberFunnelCard from './components/MemberFunnelCard.vue'
import MemberTerminalCard from './components/MemberTerminalCard.vue'
import { CardTitle } from '@/components/Card'
/** 会员统计 */
defineOptions({ name: 'MemberStatistics' })
const loading = ref(true) //
const analyseLoading = ref(true) //
const queryParams = reactive<MemberAnalyseReqVO>({ times: ['', ''] }) //
const shortcutDays = ref(7) // , 7
const summary = ref<MemberSummaryRespVO>() //
const analyseData = ref<MemberAnalyseRespVO>() //
const areaStatisticsList = shallowRef<MemberAreaStatisticsRespVO[]>() //
//
echarts?.registerMap('china', china as any)
echarts?.registerMap('china', china!)
/** 日期快捷选择 */
const shortcuts = [
{
text: '昨天',
value: () => DateUtil.getDayRange(new Date(), -1)
},
{
text: '最近7天',
value: () => DateUtil.getLast7Days()
},
{
text: '本月',
value: () => [dayjs().startOf('M'), dayjs().subtract(1, 'd')]
},
{
text: '最近30天',
value: () => DateUtil.getLast30Days()
},
{
text: '最近1年',
value: () => DateUtil.getLast1Year()
}
]
/** 会员终端统计图配置 */
const terminalChartOptions = reactive<EChartsOption>({
@ -207,8 +331,8 @@ const areaChartOptions = reactive<EChartsOption>({
formatter: (params: any) => {
return `${params?.data?.areaName || params?.name}<br/>
会员数量${params?.data?.userCount || 0}<br/>
订单创建数量${params?.data?.orderCreateUserCount || 0}<br/>
订单支付数量${params?.data?.orderPayUserCount || 0}<br/>
订单创建数量${params?.data?.orderCreateCount || 0}<br/>
订单支付数量${params?.data?.orderPayCount || 0}<br/>
订单支付金额${fenToYuan(params?.data?.orderPayPrice || 0)}`
}
},
@ -233,14 +357,37 @@ const areaChartOptions = reactive<EChartsOption>({
]
}) as EChartsOption
/** 计算环比 */
const calculateRelativeRate = (value?: number, reference?: number) => {
// 0
if (!reference) return 0
return ((100 * ((value || 0) - reference)) / reference).toFixed(0)
}
/** 设置时间范围 */
function setTimes() {
const beginDate = dayjs().subtract(shortcutDays.value, 'd')
const yesterday = dayjs().subtract(1, 'd')
queryParams.times = DateUtil.getDateRange(beginDate, yesterday)
}
/** 处理会员概览查询(日期单选按钮组选择后) */
const handleDateTypeChange = async () => {
//
setTimes()
//
await getMemberAnalyse()
}
/** 查询会员统计 */
const getMemberSummary = async () => {
summary.value = await MemberStatisticsApi.getMemberSummary()
summary.value = await TradeMemberApi.getMemberSummary()
}
/** 按照省份,查询会员统计列表 */
const getMemberAreaStatisticsList = async () => {
const list = await MemberStatisticsApi.getMemberAreaStatisticsList()
const list = await TradeMemberApi.getMemberAreaStatisticsList()
areaStatisticsList.value = list.map((item: MemberAreaStatisticsRespVO) => {
return {
...item,
@ -254,21 +401,20 @@ const getMemberAreaStatisticsList = async () => {
})
let min = 0
let max = 0
areaChartOptions.series![0].data = areaStatisticsList.value.map((item) => {
min = Math.min(min, item.orderPayUserCount || 0)
max = Math.max(max, item.orderPayUserCount || 0)
return { ...item, name: item.areaName, value: item.orderPayUserCount || 0 }
areaChartOptions.series[0].data = areaStatisticsList.value.map((item) => {
min = Math.min(min, item.orderPayCount)
max = Math.max(max, item.orderPayCount)
return { ...item, name: item.areaName, value: item.orderPayCount || 0 }
})
areaChartOptions.visualMap!['min'] = min
areaChartOptions.visualMap!['max'] = max
areaChartOptions.visualMap.min = min
areaChartOptions.visualMap.max = max
}
/** 按照性别,查询会员统计列表 */
const getMemberSexStatisticsList = async () => {
const list = await MemberStatisticsApi.getMemberSexStatisticsList()
const list = await TradeMemberApi.getMemberSexStatisticsList()
const dictDataList = getIntDictOptions(DICT_TYPE.SYSTEM_USER_SEX)
dictDataList.push({ label: '未知', value: null } as any)
sexChartOptions.series![0].data = dictDataList.map((dictData: DictDataType) => {
sexChartOptions.series[0].data = dictDataList.map((dictData: DictDataType) => {
const userCount = list.find((item: MemberSexStatisticsRespVO) => item.sex === dictData.value)
?.userCount
return {
@ -280,9 +426,8 @@ const getMemberSexStatisticsList = async () => {
/** 按照终端,查询会员统计列表 */
const getMemberTerminalStatisticsList = async () => {
const list = await MemberStatisticsApi.getMemberTerminalStatisticsList()
const list = await TradeMemberApi.getMemberTerminalStatisticsList()
const dictDataList = getIntDictOptions(DICT_TYPE.TERMINAL)
dictDataList.push({ label: '未知', value: null } as any)
terminalChartOptions.series![0].data = dictDataList.map((dictData: DictDataType) => {
const userCount = list.find(
(item: MemberTerminalStatisticsRespVO) => item.terminal === dictData.value
@ -294,6 +439,20 @@ const getMemberTerminalStatisticsList = async () => {
})
}
/** 查询会员概览数据列表 */
const getMemberAnalyse = async () => {
analyseLoading.value = true
const times = queryParams.times
// , ,
if (DateUtil.isSameDay(times[0], times[1])) {
//
times[0] = DateUtil.formatDate(dayjs(times[0]).subtract(1, 'd'))
}
//
analyseData.value = await TradeMemberApi.getMemberAnalyse({ times })
analyseLoading.value = false
}
/** 初始化 **/
onMounted(async () => {
loading.value = true
@ -301,7 +460,8 @@ onMounted(async () => {
getMemberSummary(),
getMemberTerminalStatisticsList(),
getMemberAreaStatisticsList(),
getMemberSexStatisticsList()
getMemberSexStatisticsList(),
handleDateTypeChange()
])
loading.value = false
})
@ -312,4 +472,16 @@ onMounted(async () => {
margin-bottom: 1rem;
}
}
.trapezoid1 {
transform: perspective(5em) rotateX(-11deg);
}
.trapezoid2 {
transform: perspective(7em) rotateX(-20deg);
}
.trapezoid3 {
transform: perspective(3em) rotateX(-13deg);
}
</style>

View File

@ -307,7 +307,7 @@ onMounted(async () => {
// 线
:deep(.el-timeline) {
margin: 10px 0px 0px 160px;
margin: 10px 0 0 160px;
.el-timeline-item__wrapper {
position: relative;
@ -328,27 +328,27 @@ onMounted(async () => {
background-color: #f7f8fa;
&::before {
content: '';
position: absolute;
top: 10px;
left: 13px;
border-width: 8px; /* 调整尖角大小 */
border-style: solid;
border-color: transparent #f7f8fa transparent transparent; /* 尖角颜色,左侧朝向 */
border-style: solid;
border-width: 8px; /* 调整尖角大小 */
content: '';
}
}
.dot-node-style {
width: 20px;
height: 20px;
position: absolute;
left: -5px;
display: flex;
width: 20px;
height: 20px;
font-size: 10px;
color: #fff;
border-radius: 50%;
justify-content: center;
align-items: center;
border-radius: 50%;
color: #fff;
font-size: 10px;
}
}
</style>

View File

@ -395,27 +395,27 @@ onMounted(async () => {
background-color: #f7f8fa;
&::before {
content: ''; /* 必须设置 content 属性 */
position: absolute;
top: 10px;
left: 13px; /* 将伪元素水平居中 */
border-width: 8px; /* 调整尖角大小 */
border-style: solid;
border-color: transparent #f7f8fa transparent transparent; /* 尖角颜色,左侧朝向 */
border-style: solid;
border-width: 8px; /* 调整尖角大小 */
content: ''; /* 必须设置 content 属性 */
}
}
.dot-node-style {
width: 20px;
height: 20px;
position: absolute;
left: -5px;
display: flex;
width: 20px;
height: 20px;
font-size: 10px;
color: #fff;
border-radius: 50%;
justify-content: center;
align-items: center;
border-radius: 50%;
color: #fff;
font-size: 10px;
}
}
</style>