|
@@ -1,6 +1,21 @@
|
|
|
<template>
|
|
<template>
|
|
|
<div>
|
|
<div>
|
|
|
- <el-form inline>
|
|
|
|
|
|
|
+ <el-row :gutter="16" class="summary-row">
|
|
|
|
|
+ <el-col :span="6">
|
|
|
|
|
+ <el-statistic title="今日收款总额" :value="summary.total_amount" prefix="¥" :precision="2" />
|
|
|
|
|
+ </el-col>
|
|
|
|
|
+ <el-col :span="6">
|
|
|
|
|
+ <el-statistic title="现金收款" :value="summary.cash_amount" prefix="¥" :precision="2" />
|
|
|
|
|
+ </el-col>
|
|
|
|
|
+ <el-col :span="6">
|
|
|
|
|
+ <el-statistic title="免密放行" :value="summary.free_amount" prefix="¥" :precision="2" />
|
|
|
|
|
+ </el-col>
|
|
|
|
|
+ <el-col :span="6">
|
|
|
|
|
+ <el-statistic title="收款笔数" :value="summary.total_count" />
|
|
|
|
|
+ </el-col>
|
|
|
|
|
+ </el-row>
|
|
|
|
|
+
|
|
|
|
|
+ <el-form inline style="margin-top:16px">
|
|
|
<el-form-item :label="$t.value.LicensePlateNo">
|
|
<el-form-item :label="$t.value.LicensePlateNo">
|
|
|
<el-input v-model="queryForm.plate_number" :placeholder="$t.value.carPlateInput" clearable />
|
|
<el-input v-model="queryForm.plate_number" :placeholder="$t.value.carPlateInput" clearable />
|
|
|
</el-form-item>
|
|
</el-form-item>
|
|
@@ -61,14 +76,21 @@
|
|
|
|
|
|
|
|
<script setup>
|
|
<script setup>
|
|
|
import { ref, reactive, onMounted } from 'vue'
|
|
import { ref, reactive, onMounted } from 'vue'
|
|
|
-import { getPaymentList } from '@/api/payment'
|
|
|
|
|
|
|
+import { getPaymentList, getTodaySummary } from '@/api/payment'
|
|
|
|
|
|
|
|
const queryForm = reactive({ plate_number: '', payment_method: '', page: 1, page_size: 10, start_date: '', end_date: '' })
|
|
const queryForm = reactive({ plate_number: '', payment_method: '', page: 1, page_size: 10, start_date: '', end_date: '' })
|
|
|
const dateRange = ref([])
|
|
const dateRange = ref([])
|
|
|
const list = ref([])
|
|
const list = ref([])
|
|
|
const total = ref(0)
|
|
const total = ref(0)
|
|
|
|
|
+const summary = reactive({ total_amount: 0, cash_amount: 0, free_amount: 0, total_count: 0 })
|
|
|
|
|
|
|
|
-onMounted(() => fetchList())
|
|
|
|
|
|
|
+onMounted(() => { fetchList(); fetchSummary() })
|
|
|
|
|
+
|
|
|
|
|
+function fetchSummary() {
|
|
|
|
|
+ getTodaySummary().then(res => {
|
|
|
|
|
+ if (res.code === 0) Object.assign(summary, res.data)
|
|
|
|
|
+ })
|
|
|
|
|
+}
|
|
|
|
|
|
|
|
function fetchList() {
|
|
function fetchList() {
|
|
|
if (dateRange.value && dateRange.value.length === 2) {
|
|
if (dateRange.value && dateRange.value.length === 2) {
|
|
@@ -94,3 +116,8 @@ function resetQuery() {
|
|
|
fetchList()
|
|
fetchList()
|
|
|
}
|
|
}
|
|
|
</script>
|
|
</script>
|
|
|
|
|
+
|
|
|
|
|
+<style scoped>
|
|
|
|
|
+.summary-row { margin-bottom: 16px; }
|
|
|
|
|
+.summary-row .el-statistic { background: #f5f7fa; padding: 16px; border-radius: 8px; }
|
|
|
|
|
+</style>
|