更新工作台页面,优化交易数据展示,修复核销订单金额等数据展示错误,并调整相关API接口路径

This commit is contained in:
zmj 2024-06-13 15:49:13 +08:00
parent 657021e15a
commit 69da1cb54f
3 changed files with 153 additions and 3 deletions

View File

@ -1,6 +1,6 @@
NODE_ENV = 'development' NODE_ENV = 'development'
# Base API # Base API
VITE_APP_BASE_URL='https://multi-store.lihaink.cn' # VITE_APP_BASE_URL='https://multi-store.lihaink.cn'
# VITE_APP_BASE_URL='https://test-multi-store.lihaink.cn' VITE_APP_BASE_URL='https://test-multi-store.lihaink.cn'
# VITE_APP_BASE_URL='https://ceshi-logistics.lihaink.cn/' # VITE_APP_BASE_URL='https://ceshi-logistics.lihaink.cn/'

View File

@ -0,0 +1,151 @@
<template>
<el-card :key="date">
<template #header>今日</template>
<el-row>
<el-col :span="6" class="flex" v-for="(item, index) in statisticLists" :key="index">
<img class="w-[50px] h-[50px] mr-2" :src="item.src" />
<div>
<el-statistic :title="item.title" :value="item.value()" />
<p style="font-size: 11px;color: #FBCE6B;" v-if="item.footer">{{ item.footer }}</p>
</div>
</el-col>
</el-row>
</el-card>
<el-card :key="date">
<template #header>累计</template>
<el-row>
<el-col :span="6" class='flex' v-for="(item, index) in statisticLists" :key="index">
<img class="w-[50px] h-[50px] mr-2" :src="item.src" />
<div>
<el-statistic :title="item.title" :value="item.value()" />
<p style="font-size: 11px;color: #FBCE6B;" v-if="item.footer">{{ item.footer }}</p>
</div>
</el-col>
</el-row>
</el-card>
<el-card :key="date">
<template #header>
营业趋势
</template>
<v-charts style="height: 350px" :option="visitorOption" :autoresize="true" />
</el-card>
</template>
<script lang="ts" setup name="manageProjectLists">
import { ref, reactive } from "vue"
// import { apiTradStatisApi } from '@/api/statistics'
import vCharts from 'vue-echarts'
const date = ref([])
const queryParams = reactive({
start_time: "",
end_time: "",
})
const formData = ref({
order_amount: 0,
verify_amount: 0,
balance_amount: 0,
income_amount: 0,
cashier_amount: 0,
})
const statisticLists = reactive([
{
src: 'https://ceshi-engineering.lihaink.cn/uploads/files/20240604/20240604171701552002039.png',
title: "营业额",
value: () => {
return String(formData.value.verify_amount)
}
},
{
src: "https://ceshi-engineering.lihaink.cn/uploads/files/20240604/2024060417170150a511510.png",
title: "利润",
value: () => {
return String(formData.value.balance_amount)
}
},
{
src: 'https://ceshi-engineering.lihaink.cn/uploads/files/20240604/20240604171701594ff8897.png',
title: "成本",
value: () => {
return String(formData.value.income_amount)
}
},
{
src: 'https://ceshi-engineering.lihaink.cn/uploads/files/20240604/202406041717018a22e1161.png',
title: "保证金",
value: () => {
return String(formData.value.cashier_amount)
},
footer: "当保证金金额补缴齐后不再扣除"
},
])
const visitorOption = reactive({
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [82, 92, 91, 94, 129, 133, 130],
type: 'line',
smooth: true,
name: "营业额"
},
{
data: [15, 12, 14, 78, 96, 54, 85],
type: 'line',
smooth: true,
name: '利润'
},
{
data: [36, 52, 94, 76, 85, 24, 35],
type: 'line',
smooth: true,
name: '成本'
},
{
data: [63, 25, 36, 64, 33, 24, 15],
type: 'line',
smooth: true,
name: '保证金'
}
]
})
const getData = async () => {
// let res = await apiTradStatisApi(queryParams)
// formData.value = res
// visitorOption.xAxis.data = res.statistics.range
// visitorOption.series[0].data = res.statistics.data.order_amount
// visitorOption.series[1].data = res.statistics.data.user_number
// tradTypeOption.series[0].data = res.pay_type
}
const initPage = () => {
getData()
}
onMounted(() => {
initPage()
})
</script>

View File

@ -1,6 +1,5 @@
<template> <template>
<el-card> <el-card>
{{ formData.order_amount }}
<el-form class="mb-[-16px]" :model="queryParams" label-width="80px"> <el-form class="mb-[-16px]" :model="queryParams" label-width="80px">
<el-col :span="6"> <el-col :span="6">
<el-form-item label="时间筛选"> <el-form-item label="时间筛选">