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

This commit is contained in:
zmj 2024-06-20 17:31:40 +08:00
parent 7abec49805
commit 716a653d28
3 changed files with 55 additions and 85 deletions

View File

@ -1,30 +1,17 @@
<!-- 业绩统计 -->
<!-- 业绩统计 -->
<!-- 业绩统计 -->
<!-- 业绩统计 -->
<!-- 业绩统计 -->
<template>
<el-card>
<el-form class="mb-[-16px]" :model="queryParams" label-width="80px">
<el-col :span="6">
<el-form-item label="时间筛选">
<el-date-picker v-model="date" type="daterange" value-format="YYYY-MM-DD" range-separator="-"
start-placeholder="开始时间" end-placeholder="结束时间" @change="deteToQuery" />
</el-form-item>
</el-col>
</el-form>
</el-card>
<el-card :key="date">
<template #header>
配送订单统计
</template>
<el-card shadow="never" class="!border-none mb-5">
<div class="flex justify-between items-center">
<span class="text-2xl">配送订单统计</span>
<div class="flex items-center text-sm">
<span class="mr-4">时间筛选: </span>
<el-date-picker v-model="date" type="daterange" value-format="YYYY-MM-DD" range-separator="-"
start-placeholder="开始时间" end-placeholder="结束时间" @change="deteToQuery" />
</div>
</div>
<v-charts style="height: 350px" :option="sendOption" :autoresize="true" />
</el-card>
<el-card :key="date">
<template #header>
配送订单统计
</template>
<el-card :key="date" shadow="never" class="mb-4">
<div class="text-2xl mb-4">订单统计</div>
<sendData :query-params="queryParams" :key="date"></sendData>
</el-card>
</template>

View File

@ -1,7 +1,7 @@
<template>
<el-card>
<template #header>今日</template>
<el-row class="flex">
<el-card shadow="never" class="mb-4">
<span class="text-2xl">今日</span>
<el-row class="flex mt-4">
<div class="flex " style="flex:1" v-for="(item, index) in statisticLists" :key="index">
<div class="mr-2">
<img class="w-[50px] h-[50px] mr-2" :src="item.src" />
@ -13,14 +13,11 @@
</div>
</el-row>
</el-card>
<el-card>
<template #header>
<div class="flex justify-between">
<span>累计</span>
<el-date-picker v-model="month" type="month" placeholder="选择月份" @change="monthChange"
value-format="YYYY-MM" />
</div>
</template>
<el-card shadow="never" class="mb-4">
<div class="flex justify-between mb-4">
<span class="text-2xl">累计</span>
<el-date-picker v-model="month" type="month" placeholder="选择月份" @change="monthChange" value-format="YYYY-MM" />
</div>
<el-row class="flex">
<div class="flex " style="flex:1" v-for="(item, index) in statisticLists2" :key="index">
<div class="mr-2">
@ -34,11 +31,10 @@
</el-row>
</el-card>
<el-card v-loading="loading">
<template #header>
营业趋势
</template>
<v-charts style="height: 350px" :option="visitorOption" :autoresize="true" />
<el-card v-loading="loading" shadow="never">
<span class="text-2xl">营业趋势</span>
<v-charts style="height: 350px" class="mt-4" :option="visitorOption" :autoresize="true" />
</el-card>
</template>

View File

@ -1,51 +1,40 @@
<template>
<el-card>
<el-form class="mb-[-16px]" :model="queryParams" label-width="80px">
<el-col :span="6">
<el-form-item label="时间筛选">
<el-date-picker v-model="date" type="daterange" value-format="YYYY-MM-DD" range-separator="-"
start-placeholder="开始时间" end-placeholder="结束时间" @change="deteToQuery" />
</el-form-item>
</el-col>
</el-form>
</el-card>
<el-card :key="date">
<div class="flex flex-wrap">
<div class="w-1/5 flex mb-6" v-for="(item, index) in statisticLists.filter(item => item.row == 1)" :key="index">
<div class="mr-2">
<img class="w-[50px] h-[50px] mr-2" :src="item.src" />
</div>
<div>
<div class="text-info">{{ item.title }}</div>
<div class="text-6xl">{{ item.value() }}</div>
</div>
</div>
</div>
<div class="flex flex-wrap">
<div class="w-1/5 flex mb-6" v-for="(item, index) in statisticLists.filter(item => item.row != 1)" :key="index">
<div class="mr-2">
<img class="w-[50px] h-[50px] mr-2" :src="item.src" />
</div>
<div>
<div class="text-info ">{{ item.title }}</div>
<div class="text-6xl">{{ item.value() }}</div>
</div>
<el-card shadow="never" class=" !border-none">
<div class="flex justify-between items-center">
<span class="text-2xl">营业趋势</span>
<div class="flex items-center text-sm">
<span class="mr-4">时间筛选: </span>
<el-date-picker v-model="date" type="daterange" range-separator="" start-placeholder="开始日期"
end-placeholder="结束日期" unlink-panels @change="deteToQuery" />
</div>
</div>
</el-card>
<el-card :key="date" v-loading="!visitorOption.xAxis.data.length">
<template #header>
营业趋势
</template>
<div class="flex flex-wrap box-border mt-4">
<div class="box-border w-1/5" v-for="(item, index) in statisticLists" :key="index">
<el-card class="!border-none ml-4 mb-4 flex" :class="{ '!ml-0': index % 5 === 0 }" shadow="never">
<div class="flex">
<div class="mr-2">
<img class="w-[50px] h-[50px] mr-2" :src="item.src" />
</div>
<div>
<div class="text-info">{{ item.title }}</div>
<div class="text-6xl">{{ item.value() }}</div>
</div>
</div>
</el-card>
</div>
</div>
<el-card :key="date" v-loading="!visitorOption.xAxis.data.length" shadow="never" class="mb-4">
<span class="text-2xl mb-2">营业趋势</span>
<v-charts style="height: 350px" :option="visitorOption" :autoresize="true" />
</el-card>
<el-row :key="date">
<el-col :span="14">
<el-card class="h-[100%]">
<template #header>
交易数据
</template>
<el-table :data="formData.order_list">
<el-card class="h-[100%]" shadow="never">
<span class="text-2xl">交易数据</span>
<el-table :data="formData.order_list" class="mt-4">
<el-table-column label="头像" prop="build_area_text" show-overflow-tooltip>
<template #default="{ row }">
<el-image style="width: 50px; height: 50px" :src="row.avatar" />
@ -59,11 +48,9 @@
</el-card>
</el-col>
<el-col :span="10">
<el-card style="height: 100%;">
<template #header>
交易类型
</template>
<v-charts style="height:700px" :option="tradTypeOption" :autoresize="true" />
<el-card style="height: 100%;" shadow="never" class="ml-4">
<span class="text-2xl">交易类型</span>
<v-charts style="height:700px" class="mt-4" :option="tradTypeOption" :autoresize="true" />
</el-card>
</el-col>
</el-row>