|
@@ -2,35 +2,51 @@
|
|
|
<div class="app-container home">
|
|
|
<!-- 累积统计卡片行 -->
|
|
|
<el-row :gutter="20" class="panel-group">
|
|
|
- <el-col :xs="12" :sm="12" :lg="6">
|
|
|
+ <el-col :xs="12" :sm="12" :lg="4">
|
|
|
<div class="stat-card stat-card-blue">
|
|
|
- <div class="stat-card-title">累积洗衣件数</div>
|
|
|
+ <div class="stat-card-title">洗衣件数</div>
|
|
|
<div class="stat-card-value">
|
|
|
- <count-to :start-val="0" :end-val="statistics.dailyInFactoryCount" :duration="2600" />
|
|
|
+ <count-to :start-val="0" :end-val="statistics.clothCount" :duration="2600" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
- <el-col :xs="12" :sm="12" :lg="6">
|
|
|
+ <el-col :xs="12" :sm="12" :lg="4">
|
|
|
<div class="stat-card stat-card-green">
|
|
|
- <div class="stat-card-title">累积洗衣金额</div>
|
|
|
+ <div class="stat-card-title">洗衣金额</div>
|
|
|
<div class="stat-card-value">
|
|
|
- <count-to :start-val="0" :end-val="statistics.dailyInFactoryAmount" :duration="2600" prefix="¥" />
|
|
|
+ <count-to :start-val="0" :end-val="statistics.clothReceiveAmount" :duration="2600" prefix="¥" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
- <el-col :xs="12" :sm="12" :lg="6">
|
|
|
- <div class="stat-card stat-card-red">
|
|
|
- <div class="stat-card-title">累积撤衣件数</div>
|
|
|
+ <el-col :xs="12" :sm="12" :lg="4">
|
|
|
+ <div class="stat-card stat-card-purple">
|
|
|
+ <div class="stat-card-title">零售订单数</div>
|
|
|
<div class="stat-card-value">
|
|
|
- <count-to :start-val="0" :end-val="statistics.dailyRefundCount" :duration="2600" />
|
|
|
+ <count-to :start-val="0" :end-val="statistics.goodsOrderCount" :duration="2600" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
- <el-col :xs="12" :sm="12" :lg="6">
|
|
|
+ <el-col :xs="12" :sm="12" :lg="4">
|
|
|
<div class="stat-card stat-card-orange">
|
|
|
- <div class="stat-card-title">累积撤衣金额</div>
|
|
|
+ <div class="stat-card-title">零售金额</div>
|
|
|
<div class="stat-card-value">
|
|
|
- <count-to :start-val="0" :end-val="statistics.dailyRefundAmount" :duration="2600" prefix="¥" />
|
|
|
+ <count-to :start-val="0" :end-val="statistics.goodsReceiveAmount" :duration="2600" prefix="¥" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="12" :sm="12" :lg="4">
|
|
|
+ <div class="stat-card stat-card-red">
|
|
|
+ <div class="stat-card-title">充值笔数</div>
|
|
|
+ <div class="stat-card-value">
|
|
|
+ <count-to :start-val="0" :end-val="statistics.chargeCount" :duration="2600" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="12" :sm="12" :lg="4">
|
|
|
+ <div class="stat-card stat-card-cyan">
|
|
|
+ <div class="stat-card-title">充值金额</div>
|
|
|
+ <div class="stat-card-value">
|
|
|
+ <count-to :start-val="0" :end-val="statistics.chargeAmount" :duration="2600" prefix="¥" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-col>
|
|
@@ -53,47 +69,69 @@
|
|
|
</div>
|
|
|
<div class="chart-content-1">
|
|
|
<el-row :gutter="20" class="panel-group">
|
|
|
- <el-col :xs="12" :sm="12" :lg="6">
|
|
|
+ <el-col :xs="12" :sm="12" :lg="4">
|
|
|
<div class="card-panel">
|
|
|
<div class="card-panel-icon-wrapper icon-orders">
|
|
|
<svg-icon icon-class="form" class-name="card-panel-icon" />
|
|
|
</div>
|
|
|
<div class="card-panel-description">
|
|
|
<div class="card-panel-text">洗衣件数</div>
|
|
|
- <count-to :start-val="0" :end-val="factoryStatistics.dailyInFactoryCount" :duration="2600" class="card-panel-num" />
|
|
|
+ <count-to :start-val="0" :end-val="dayStatistics.clothCount" :duration="2600" class="card-panel-num" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
- <el-col :xs="12" :sm="12" :lg="6">
|
|
|
+ <el-col :xs="12" :sm="12" :lg="4">
|
|
|
<div class="card-panel">
|
|
|
<div class="card-panel-icon-wrapper icon-revenue">
|
|
|
<svg-icon icon-class="money" class-name="card-panel-icon" />
|
|
|
</div>
|
|
|
<div class="card-panel-description">
|
|
|
<div class="card-panel-text">洗衣金额</div>
|
|
|
- <count-to :start-val="0" :end-val="factoryStatistics.dailyInFactoryAmount" :duration="2600" class="card-panel-num" prefix="¥" />
|
|
|
+ <count-to :start-val="0" :end-val="dayStatistics.clothReceiveAmount" :duration="2600" class="card-panel-num" prefix="¥" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="12" :sm="12" :lg="4">
|
|
|
+ <div class="card-panel">
|
|
|
+ <div class="card-panel-icon-wrapper icon-goods">
|
|
|
+ <svg-icon icon-class="shopping" class-name="card-panel-icon" />
|
|
|
+ </div>
|
|
|
+ <div class="card-panel-description">
|
|
|
+ <div class="card-panel-text">零售订单数</div>
|
|
|
+ <count-to :start-val="0" :end-val="dayStatistics.goodsOrderCount" :duration="2600" class="card-panel-num" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
- <el-col :xs="12" :sm="12" :lg="6">
|
|
|
+ <el-col :xs="12" :sm="12" :lg="4">
|
|
|
<div class="card-panel">
|
|
|
- <div class="card-panel-icon-wrapper icon-cancel">
|
|
|
+ <div class="card-panel-icon-wrapper icon-goods-amount">
|
|
|
+ <svg-icon icon-class="money" class-name="card-panel-icon" />
|
|
|
+ </div>
|
|
|
+ <div class="card-panel-description">
|
|
|
+ <div class="card-panel-text">零售金额</div>
|
|
|
+ <count-to :start-val="0" :end-val="dayStatistics.goodsReceiveAmount" :duration="2600" class="card-panel-num" prefix="¥" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="12" :sm="12" :lg="4">
|
|
|
+ <div class="card-panel">
|
|
|
+ <div class="card-panel-icon-wrapper icon-charge">
|
|
|
<svg-icon icon-class="form" class-name="card-panel-icon" />
|
|
|
</div>
|
|
|
<div class="card-panel-description">
|
|
|
- <div class="card-panel-text">撤单件数</div>
|
|
|
- <count-to :start-val="0" :end-val="factoryStatistics.dailyRefundCount" :duration="2600" class="card-panel-num" />
|
|
|
+ <div class="card-panel-text">充值笔数</div>
|
|
|
+ <count-to :start-val="0" :end-val="dayStatistics.chargeCount" :duration="2600" class="card-panel-num" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
- <el-col :xs="12" :sm="12" :lg="6">
|
|
|
+ <el-col :xs="12" :sm="12" :lg="4">
|
|
|
<div class="card-panel">
|
|
|
- <div class="card-panel-icon-wrapper icon-cancel-amount">
|
|
|
+ <div class="card-panel-icon-wrapper icon-charge-amount">
|
|
|
<svg-icon icon-class="money" class-name="card-panel-icon" />
|
|
|
</div>
|
|
|
<div class="card-panel-description">
|
|
|
- <div class="card-panel-text">撤单金额</div>
|
|
|
- <count-to :start-val="0" :end-val="factoryStatistics.dailyRefundAmount" :duration="2600" class="card-panel-num" prefix="¥" />
|
|
|
+ <div class="card-panel-text">充值金额</div>
|
|
|
+ <count-to :start-val="0" :end-val="dayStatistics.chargeAmount" :duration="2600" class="card-panel-num" prefix="¥" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-col>
|
|
@@ -105,19 +143,27 @@
|
|
|
|
|
|
<!-- 交易图表展示 -->
|
|
|
<el-row :gutter="32" style="margin-top: 32px">
|
|
|
- <el-col :xs="24" :sm="24" :lg="12">
|
|
|
+ <el-col :xs="24" :sm="24" :lg="8">
|
|
|
+ <div class="chart-wrapper">
|
|
|
+ <div class="chart-title">洗衣交易趋势</div>
|
|
|
+ <div class="chart-content">
|
|
|
+ <amount-trend-chart :data="clothTrendData" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="24" :lg="8">
|
|
|
<div class="chart-wrapper">
|
|
|
- <div class="chart-title">交易金额趋势</div>
|
|
|
+ <div class="chart-title">零售交易趋势</div>
|
|
|
<div class="chart-content">
|
|
|
- <amount-trend-chart :data="amountTrendData" />
|
|
|
+ <amount-trend-chart :data="goodsTrendData" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
- <el-col :xs="24" :sm="24" :lg="12">
|
|
|
+ <el-col :xs="24" :sm="24" :lg="8">
|
|
|
<div class="chart-wrapper">
|
|
|
- <div class="chart-title">交易件数趋势</div>
|
|
|
+ <div class="chart-title">充值交易趋势</div>
|
|
|
<div class="chart-content">
|
|
|
- <count-trend-chart :data="countTrendData" />
|
|
|
+ <amount-trend-chart :data="chargeTrendData" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-col>
|
|
@@ -128,7 +174,7 @@
|
|
|
<el-col :xs="24" :sm="24" :lg="24">
|
|
|
<div class="chart-wrapper">
|
|
|
<div class="chart-header">
|
|
|
- <div class="chart-title">门店洗衣排行</div>
|
|
|
+ <div class="chart-title">门店营收排行</div>
|
|
|
<div class="chart-actions">
|
|
|
<el-radio-group v-model="rankingTimeRange" size="small" @change="handleRankingTimeRangeChange">
|
|
|
<el-radio-button label="week">近一周</el-radio-button>
|
|
@@ -141,19 +187,24 @@
|
|
|
<el-table :data="storeRankings" style="width: 100%" :show-header="true">
|
|
|
<el-table-column prop="index" type="index" label="排名" width="80" />
|
|
|
<el-table-column label="门店名称" align="center" prop="storeName" />
|
|
|
- <el-table-column label="入厂金额" align="center" prop="dailyInFactoryAmount">
|
|
|
+ <el-table-column label="洗衣件数" align="center" prop="clothCount" />
|
|
|
+ <el-table-column label="洗衣金额" align="center" prop="clothReceiveAmount">
|
|
|
<template slot-scope="scope">
|
|
|
- ¥{{ scope.row.dailyInFactoryAmount }}
|
|
|
+ ¥{{ scope.row.clothReceiveAmount }}
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column label="退单金额" align="center" prop="dailyRefundAmount">
|
|
|
+ <el-table-column label="零售单数" align="center" prop="goodsOrderCount" />
|
|
|
+ <el-table-column label="零售金额" align="center" prop="goodsReceiveAmount">
|
|
|
<template slot-scope="scope">
|
|
|
- ¥{{ scope.row.dailyRefundAmount }}
|
|
|
+ ¥{{ scope.row.goodsReceiveAmount }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="充值笔数" align="center" prop="chargeCount" />
|
|
|
+ <el-table-column label="充值金额" align="center" prop="chargeAmount">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ ¥{{ scope.row.dailyChargeAmount }}
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column label="入厂衣服数" align="center" prop="dailyInFactoryCount" />
|
|
|
- <el-table-column label="检查衣服数" align="center" prop="dailyCheckedCount" />
|
|
|
- <el-table-column label="出厂衣服数" align="center" prop="dailyOutFactoryCount" />
|
|
|
</el-table>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -164,76 +215,55 @@
|
|
|
|
|
|
<script>
|
|
|
import CountTo from 'vue-count-to'
|
|
|
-import { getTotalStatistics, listStatisticsByDate, listFactoryStatisticsByStore, factoryDashborad } from '@/api/settlement/statistics'
|
|
|
-import { getTimeoutClothing } from '@/api/statistics/reception'
|
|
|
+import {
|
|
|
+ platformDashborad, getplatformDayTrend, listplatformStatisticsByDate, listplatformStatisticsByStore
|
|
|
+} from '@/api/settlement/statistics'
|
|
|
import AmountTrendChart from './components/AmountTrendChart'
|
|
|
-import CountTrendChart from './components/CountTrendChart'
|
|
|
|
|
|
export default {
|
|
|
name: 'Index',
|
|
|
- dicts: ['sys_source_type'],
|
|
|
components: {
|
|
|
CountTo,
|
|
|
- AmountTrendChart,
|
|
|
- CountTrendChart
|
|
|
+ AmountTrendChart
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
version: "3.8.4",
|
|
|
- timeoutClothing: {},
|
|
|
- roleType: false,
|
|
|
statistics: {
|
|
|
- totalClothCount: 0,
|
|
|
- totalClothAmount: 0,
|
|
|
- totalCancelCount: 0,
|
|
|
- totalCancelAmount: 0
|
|
|
+ clothCount: 0,
|
|
|
+ clothReceiveAmount: 0,
|
|
|
+ goodsReceiveAmount: 0,
|
|
|
+ goodsOrderCount: 0,
|
|
|
+ chargeCount: 0,
|
|
|
+ chargeAmount: 0
|
|
|
},
|
|
|
- factoryStatistics: {
|
|
|
- dailyInFactoryCount: 0,
|
|
|
- dailyInFactoryAmount: 0,
|
|
|
- dailyRefundCount: 0,
|
|
|
- dailyRefundAmount: 0,
|
|
|
- dailyActualSettlementAmount: 0
|
|
|
+ dayStatistics: {
|
|
|
+ clothCount: 0,
|
|
|
+ clothReceiveAmount: 0,
|
|
|
+ goodsReceiveAmount: 0,
|
|
|
+ goodsOrderCount: 0,
|
|
|
+ chargeCount: 0,
|
|
|
+ chargeAmount: 0
|
|
|
},
|
|
|
revenueTimeRange: 'today',
|
|
|
rankingTimeRange: 'week',
|
|
|
- amountTrendData: [],
|
|
|
- countTrendData: [],
|
|
|
+ clothTrendData: [],
|
|
|
+ goodsTrendData: [],
|
|
|
+ chargeTrendData: [],
|
|
|
storeRankings: []
|
|
|
}
|
|
|
},
|
|
|
created() {
|
|
|
- // this.getroletype()
|
|
|
- // this.getTimeout()
|
|
|
this.getStatistics()
|
|
|
this.getFactoryStatisticsData()
|
|
|
this.getStoreRankings()
|
|
|
this.getTrendData()
|
|
|
},
|
|
|
methods: {
|
|
|
- getroletype() {
|
|
|
- let name = ''
|
|
|
- this.dict.type.sys_source_type.map(item => {
|
|
|
- if (item.value === this.$store.getters.user.userType) {
|
|
|
- name = item.label
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- goTarget(href) {
|
|
|
- window.open(href, "_blank");
|
|
|
- },
|
|
|
- getTimeout() {
|
|
|
- getTimeoutClothing(this.queryParams).then(response => {
|
|
|
- this.timeoutClothing = response.data;
|
|
|
- });
|
|
|
- },
|
|
|
- btn_goto(type) {
|
|
|
- this.$router.push({ path: '/query/overtimeOrders' })
|
|
|
- },
|
|
|
getStatistics() {
|
|
|
// 获取累积统计数据
|
|
|
- factoryDashborad({}).then(response => {
|
|
|
- this.statistics = response.data
|
|
|
+ platformDashborad({}).then(response => {
|
|
|
+ this.statistics = response.data.orderStats
|
|
|
})
|
|
|
},
|
|
|
handleRevenueTimeRangeChange() {
|
|
@@ -248,8 +278,10 @@ export default {
|
|
|
startDate: this.getStartDateByTimeRange(),
|
|
|
endDate: this.formatDate(new Date())
|
|
|
}
|
|
|
- getTotalStatistics(params).then(response => {
|
|
|
- this.factoryStatistics = response.data
|
|
|
+ getplatformDayTrend(params).then(response => {
|
|
|
+ if(response.data.orderTrend) {
|
|
|
+ this.dayStatistics = response.data.orderTrend
|
|
|
+ }
|
|
|
})
|
|
|
},
|
|
|
getStartDateByTimeRange() {
|
|
@@ -292,7 +324,7 @@ export default {
|
|
|
}
|
|
|
|
|
|
// 使用 listFactoryStatisticsByStore 方法获取门店排行数据
|
|
|
- listFactoryStatisticsByStore(params).then(response => {
|
|
|
+ listplatformStatisticsByStore(params).then(response => {
|
|
|
this.storeRankings = response.rows || []
|
|
|
})
|
|
|
},
|
|
@@ -308,22 +340,26 @@ export default {
|
|
|
}
|
|
|
|
|
|
// 获取趋势数据
|
|
|
- listStatisticsByDate(params).then(response => {
|
|
|
- const data = response.rows || []
|
|
|
+ listplatformStatisticsByDate(params).then(response => {
|
|
|
+ const data = response.data || []
|
|
|
|
|
|
- // 处理金额趋势数据
|
|
|
- this.amountTrendData = data.map(item => ({
|
|
|
- date: item.statisticsDate,
|
|
|
- value: item.dailyInFactoryAmount || 0
|
|
|
+ // 处理洗衣交易趋势数据
|
|
|
+ this.clothTrendData = data.map(item => ({
|
|
|
+ date: item.day,
|
|
|
+ value: item.clothOrderAmount || 0
|
|
|
}))
|
|
|
|
|
|
- // 处理件数趋势数据 - 确保格式正确
|
|
|
- this.countTrendData = {
|
|
|
- dates: data.map(item => item.statisticsDate || ''),
|
|
|
- inFactory: data.map(item => item.dailyInFactoryCount || 0),
|
|
|
- checked: data.map(item => item.dailyCheckedCount || 0),
|
|
|
- outFactory: data.map(item => item.dailyOutFactoryCount || 0)
|
|
|
- }
|
|
|
+ // 处理零售交易趋势数据
|
|
|
+ this.goodsTrendData = data.map(item => ({
|
|
|
+ date: item.day,
|
|
|
+ value: item.goodsReceiveAmount || 0
|
|
|
+ }))
|
|
|
+
|
|
|
+ // 处理充值交易趋势数据
|
|
|
+ this.chargeTrendData = data.map(item => ({
|
|
|
+ date: item.day,
|
|
|
+ value: item.chargeAmount || 0
|
|
|
+ }))
|
|
|
})
|
|
|
}
|
|
|
}
|
|
@@ -371,14 +407,22 @@ export default {
|
|
|
background: linear-gradient(135deg, #52c41a, #73d13d);
|
|
|
}
|
|
|
|
|
|
- .stat-card-red {
|
|
|
- background: linear-gradient(135deg, #f5222d, #ff4d4f);
|
|
|
+ .stat-card-purple {
|
|
|
+ background: linear-gradient(135deg, #722ed1, #9254de);
|
|
|
}
|
|
|
|
|
|
.stat-card-orange {
|
|
|
background: linear-gradient(135deg, #fa8c16, #ffa940);
|
|
|
}
|
|
|
|
|
|
+ .stat-card-red {
|
|
|
+ background: linear-gradient(135deg, #f5222d, #ff4d4f);
|
|
|
+ }
|
|
|
+
|
|
|
+ .stat-card-cyan {
|
|
|
+ background: linear-gradient(135deg, #13c2c2, #36cfc9);
|
|
|
+ }
|
|
|
+
|
|
|
.card-panel {
|
|
|
height: 108px;
|
|
|
cursor: pointer;
|
|
@@ -399,11 +443,17 @@ export default {
|
|
|
.icon-revenue {
|
|
|
background: #34bfa3;
|
|
|
}
|
|
|
- .icon-cancel {
|
|
|
- background: #f4516c;
|
|
|
+ .icon-goods {
|
|
|
+ background: #722ed1;
|
|
|
+ }
|
|
|
+ .icon-goods-amount {
|
|
|
+ background: #fa8c16;
|
|
|
+ }
|
|
|
+ .icon-charge {
|
|
|
+ background: #f5222d;
|
|
|
}
|
|
|
- .icon-cancel-amount {
|
|
|
- background: #ff9800;
|
|
|
+ .icon-charge-amount {
|
|
|
+ background: #13c2c2;
|
|
|
}
|
|
|
}
|
|
|
.card-panel-icon-wrapper {
|