chuangte/electripper-v2-ui
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

临时提交，未完成统计

Browse Source
This commit is contained in:
磷叶 2025-05-07 18:07:13 +08:00
parent a42d6643d8
commit b5de8ee027
6 changed files with 217 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/StatisticsCard/index.vue
View File

@ -23,7 +23,7 @@
</template>
<script>
import CountTo from 'vue-count-to'
import CountTo from 'vue-count-to';
export default {
name: 'StatisticsCard',
components: {
@ -201,7 +201,7 @@ export default {
z-index: 1;
i {
opacity: 0.15;
opacity: 0.25;
transition: all 0.3s ease;
}
}
@ -209,7 +209,7 @@ export default {
&:hover {
.icon-wrapper i {
opacity: 0.25;
opacity: 0.35;
transform: scale(1.2) rotate(10deg);
}
}

44
src/views/bst/index/AdminIndex.vue
View File

@ -13,22 +13,40 @@
</div>
</el-row>
<!-- 统计信息 -->
<admin-stat :stat="stat" :today-stat="todayStat" />
<!-- 设备统计信息 -->
<device-stat :stat="stat"/>
<el-row :gutter="gutter" style="margin-top:12px">
<el-row style="margin-bottom:12px">
<el-col :sm="24" :md="16">
<el-card header="每日流水统计" shadow="never">
<order-daily-stat style="width:100%"/>
</el-card>
<!-- 统计信息 -->
<admin-stat :stat="stat" :today-stat="todayStat" />
</el-col>
<el-col :sm="24" :md="8">
<order-stat :stat="stat"/>
<!-- 设备统计信息 -->
<device-stat :stat="stat"/>
</el-col>
</el-row>
<el-card class="mb10" shadow="never">
<el-tabs>
<el-tab-pane lazy label="每日流水">
<order-daily-stat style="width:100%"/>
</el-tab-pane>
<el-tab-pane lazy label="每周流水">
<order-daily-stat style="width:100%"/>
</el-tab-pane>
<el-tab-pane lazy label="每月流水">
<order-daily-stat style="width:100%"/>
</el-tab-pane>
</el-tabs>
</el-card>
<el-card class="mb10" shadow="never">
<el-tabs>
<el-tab-pane lazy label="每日提现">
<order-daily-stat style="width:100%"/>
</el-tab-pane>
</el-tabs>
</el-card>
</el-col>
<el-col :sm="24" :md="6">
<!-- 待办事项 -->
@ -43,14 +61,14 @@
<script>
import { getStat } from '@/api/dashboard/dashboard'
import { getLastDateStr } from '@/utils'
import { StatKeys } from '@/utils/enums'
import AdminStat from '@/views/bst/index/components/AdminStat'
import DeviceStat from '@/views/bst/index/components/DeviceStat'
import TodoList from '@/views/bst/index/components/TodoList'
import { getLastDateStr } from '@/utils'
import OrderDailyStat from '@/views/bst/index/components/OrderDailyStat'
import OrderRank from '@/views/bst/index/components/OrderRank'
import OrderStat from '@/views/bst/index/components/OrderStat'
import TodoList from '@/views/bst/index/components/TodoList'
export default {
name: 'AdminIndex',

55
src/views/bst/index/components/AdminStat.vue
View File

@ -21,6 +21,18 @@
sub-label="今日订单数量"
:sub-value="todayStat.order.count"
/>
<statistics-card
class="stat-card"
:value="stat.user.balance"
label="商户余额"
icon="el-icon-wallet"
start-color="#FA709A"
end-color="#FEE140"
sub-label="累计提现"
:sub-value="stat.withdraw.successAmount"
:show-value-change="false"
:precision="2"
/>
<statistics-card
class="stat-card"
:value="stat.device.count"
@ -39,19 +51,8 @@
icon="el-icon-map-location"
start-color="#FF6B95"
end-color="#FFA674"
sub-label="店铺数量"
:sub-value="0"
:show-value-change="false"
/>
<statistics-card
class="stat-card"
:value="stat.areaJoin.joinCount"
label="加盟商"
icon="el-icon-office-building"
start-color="#FFB199"
end-color="#FF0844"
sub-label="合伙人"
:sub-value="stat.areaJoin.partnerCount"
sub-label="运营商"
:sub-value="stat.userAgent.mchCount"
:show-value-change="false"
/>
<statistics-card
@ -64,34 +65,11 @@
sub-label="今日新增"
:sub-value="todayStat.userAgent.count"
/>
<statistics-card
class="stat-card"
:value="stat.userAgent.mchCount"
label="运营商"
icon="el-icon-s-custom"
start-color="#4FACFE"
end-color="#00F2FE"
sub-label="代理商"
:sub-value="stat.userAgent.agentCount"
:show-value-change="false"
/>
<statistics-card
class="stat-card"
:value="stat.user.balance"
label="商户余额"
icon="el-icon-wallet"
start-color="#FA709A"
end-color="#FEE140"
sub-label="累计提现"
:sub-value="stat.withdraw.successAmount"
:show-value-change="false"
:precision="2"
/>
</div>
</template>
<script>
import StatisticsCard from '@/components/StatisticsCard'
import StatisticsCard from '@/components/StatisticsCard';
export default {
name: 'Stat',
components: {
@ -120,9 +98,8 @@ export default {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 10px;
.stat-card {
flex: 0 1 calc(25% - 10px);
flex: 0 1 calc(33% - 10px);
}
}
</style>

10
src/views/bst/index/components/DeviceStat.vue
View File

@ -3,7 +3,7 @@
<el-col :span="24">
<el-card class="box-card" shadow="never">
<el-row :gutter="20">
<el-col :span="3" v-for="dict in dict.type.device_status" :key="dict.value">
<el-col :span="8" v-for="dict in dict.type.device_status" :key="dict.value">
<el-statistic
class="statistic"
group-separator=","
@ -17,7 +17,7 @@
</el-statistic>
</el-col>
<el-col :span="3" v-for="status in ['1', '0']" :key="`online-${status}`">
<el-col :span="8" v-for="status in ['1', '0']" :key="`online-${status}`">
<el-statistic
class="statistic"
group-separator=","
@ -100,3 +100,9 @@ export default {
}
}
</script>
<style lang="scss" scoped>
.statistic {
margin: 15px 0;
}
</style>

179
src/views/bst/index/components/OrderDailyStat.vue
View File

@ -104,19 +104,81 @@ export default {
const option = {
color: [
'#5B8FF9', // 柔和蓝 - 订单数量
'#61DDAA', // 柔和绿 - 订单金额
'#F6BD16', // 柔和黄 - 订单退款
'#6DC8EC', // 淡青 - 订单实收
'#9270CA', // 淡紫 - 分成金额
'#E8684A', // 柔和橙 - 分成退款
'#FF9D4D' // 柔和橙红 - 分成实收
{
type: 'linear',
x: 0, y: 0, x2: 0, y2: 1,
colorStops: [{
offset: 0, color: '#36D1DC'
}, {
offset: 1, color: '#5B86E5'
}]
},
{
type: 'linear',
x: 0, y: 0, x2: 0, y2: 1,
colorStops: [{
offset: 0, color: '#FF9966'
}, {
offset: 1, color: '#FF5E62'
}]
},
{
type: 'linear',
x: 0, y: 0, x2: 0, y2: 1,
colorStops: [{
offset: 0, color: '#834d9b'
}, {
offset: 1, color: '#d04ed6'
}]
},
{
type: 'linear',
x: 0, y: 0, x2: 0, y2: 1,
colorStops: [{
offset: 0, color: '#11998e'
}, {
offset: 1, color: '#38ef7d'
}]
},
{
type: 'linear',
x: 0, y: 0, x2: 0, y2: 1,
colorStops: [{
offset: 0, color: '#f46b45'
}, {
offset: 1, color: '#eea849'
}]
},
{
type: 'linear',
x: 0, y: 0, x2: 0, y2: 1,
colorStops: [{
offset: 0, color: '#8E2DE2'
}, {
offset: 1, color: '#4A00E0'
}]
},
{
type: 'linear',
x: 0, y: 0, x2: 0, y2: 1,
colorStops: [{
offset: 0, color: '#00b4db'
}, {
offset: 1, color: '#0083b0'
}]
}
],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
backgroundColor: 'rgba(255, 255, 255, 0.9)',
borderColor: '#ccc',
borderWidth: 1,
textStyle: {
color: '#333'
},
formatter: function(params) {
let result = params[0].axisValueLabel + '<br/>';
params.forEach(param => {
@ -135,6 +197,9 @@ export default {
legend: {
data: ['订单数量', '支付金额', '支付退款', '支付实收', '分成金额', '分成退款', '分成实收'],
top: 8,
textStyle: {
color: '#666'
},
selected: {
'订单数量': true,
'支付金额': false,
@ -158,6 +223,12 @@ export default {
axisLabel: {
interval: 'auto',
fontSize: 12,
color: '#666'
},
axisLine: {
lineStyle: {
color: '#ddd'
}
},
boundaryGap: true
},
@ -169,6 +240,17 @@ export default {
axisLabel: {
formatter: value => {
return value.toFixed(2) + ' 元'
},
color: '#666'
},
axisLine: {
lineStyle: {
color: '#ddd'
}
},
splitLine: {
lineStyle: {
color: '#eee'
}
}
},
@ -177,7 +259,16 @@ export default {
name: '订单数量',
position: 'right',
axisLabel: {
formatter: '{value}'
formatter: '{value}',
color: '#666'
},
axisLine: {
lineStyle: {
color: '#ddd'
}
},
splitLine: {
show: false
}
}
],
@ -188,9 +279,11 @@ export default {
yAxisIndex: 1,
data: orderCounts,
itemStyle: {
opacity: 0.6
opacity: 0.6,
borderRadius: [4, 4, 0, 0]
},
barWidth: '20%'
barWidth: '30%',
z: 1
},
{
name: '支付金额',
@ -199,9 +292,16 @@ export default {
data: orderAmounts,
smooth: true,
symbol: 'circle',
symbolSize: 5,
symbolSize: 6,
areaStyle: {
opacity: 0.1,
shadowColor: 'rgba(0,0,0,0.05)',
shadowBlur: 3
},
lineStyle: {
width: 2
width: 3,
shadowColor: 'rgba(0,0,0,0.1)',
shadowBlur: 5
}
},
{
@ -211,9 +311,16 @@ export default {
data: orderRefunds,
smooth: true,
symbol: 'circle',
symbolSize: 5,
symbolSize: 6,
areaStyle: {
opacity: 0.1,
shadowColor: 'rgba(0,0,0,0.05)',
shadowBlur: 3
},
lineStyle: {
width: 2
width: 3,
shadowColor: 'rgba(0,0,0,0.1)',
shadowBlur: 5
}
},
{
@ -223,9 +330,16 @@ export default {
data: orderNetAmounts,
smooth: true,
symbol: 'circle',
symbolSize: 6,
symbolSize: 7,
areaStyle: {
opacity: 0.1,
shadowColor: 'rgba(0,0,0,0.05)',
shadowBlur: 3
},
lineStyle: {
width: 2
width: 3,
shadowColor: 'rgba(0,0,0,0.1)',
shadowBlur: 5
}
},
{
@ -235,9 +349,16 @@ export default {
data: bonusAmounts,
smooth: true,
symbol: 'circle',
symbolSize: 5,
symbolSize: 6,
areaStyle: {
opacity: 0.1,
shadowColor: 'rgba(0,0,0,0.05)',
shadowBlur: 3
},
lineStyle: {
width: 2
width: 3,
shadowColor: 'rgba(0,0,0,0.1)',
shadowBlur: 5
}
},
{
@ -247,9 +368,16 @@ export default {
data: bonusRefunds,
smooth: true,
symbol: 'circle',
symbolSize: 5,
symbolSize: 6,
areaStyle: {
opacity: 0.1,
shadowColor: 'rgba(0,0,0,0.05)',
shadowBlur: 3
},
lineStyle: {
width: 2
width: 3,
shadowColor: 'rgba(0,0,0,0.1)',
shadowBlur: 5
}
},
{
@ -259,9 +387,16 @@ export default {
data: bonusNetAmounts,
smooth: true,
symbol: 'circle',
symbolSize: 6,
symbolSize: 7,
areaStyle: {
opacity: 0.1,
shadowColor: 'rgba(0,0,0,0.05)',
shadowBlur: 3
},
lineStyle: {
width: 2
width: 3,
shadowColor: 'rgba(0,0,0,0.1)',
shadowBlur: 5
}
}
]

4
src/views/bst/index/components/OrderRank.vue
View File

@ -29,7 +29,7 @@
<area-link :id="d.row.areaId" :text="d.row.areaName" size="mini"/>
</template>
</el-table-column>
<el-table-column label="金额" prop="actualAmount" align="center" sortable :sort-orders="orderSorts">
<el-table-column label="实收" prop="actualAmount" align="center" sortable :sort-orders="orderSorts">
<template slot-scope="d">{{d.row.actualAmount | fix2 | dv}}</template>
</el-table-column>
<el-table-column label="数量" prop="count" align="center" sortable :sort-orders="orderSorts">
@ -45,9 +45,9 @@
<script>
import { getOrderRank } from '@/api/dashboard/dashboardOrder'
import AreaLink from '@/components/Business/Area/AreaLink.vue'
import { getLastDateStr } from '@/utils'
import { DatePickerOptions } from '@/utils/constants'
import AreaLink from '@/components/Business/Area/AreaLink.vue'
// 默认排序字段
const defaultSort = {