更新工作台页面,优化交易数据展示,修复核销订单金额等数据展示错误,并调整相关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> <template>
<el-card> <el-card shadow="never" class="!border-none mb-5">
<el-form class="mb-[-16px]" :model="queryParams" label-width="80px"> <div class="flex justify-between items-center">
<el-col :span="6"> <span class="text-2xl">配送订单统计</span>
<el-form-item label="时间筛选"> <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="-" <el-date-picker v-model="date" type="daterange" value-format="YYYY-MM-DD" range-separator="-"
start-placeholder="开始时间" end-placeholder="结束时间" @change="deteToQuery" /> start-placeholder="开始时间" end-placeholder="结束时间" @change="deteToQuery" />
</el-form-item> </div>
</el-col> </div>
</el-form>
</el-card>
<el-card :key="date">
<template #header>
配送订单统计
</template>
<v-charts style="height: 350px" :option="sendOption" :autoresize="true" /> <v-charts style="height: 350px" :option="sendOption" :autoresize="true" />
</el-card> </el-card>
<el-card :key="date" shadow="never" class="mb-4">
<el-card :key="date"> <div class="text-2xl mb-4">订单统计</div>
<template #header>
配送订单统计
</template>
<sendData :query-params="queryParams" :key="date"></sendData> <sendData :query-params="queryParams" :key="date"></sendData>
</el-card> </el-card>
</template> </template>

View File

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

View File

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