Web/operation-system
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

电商交易-交易分析页面优化空数据时的默认展示

Browse Source
This commit is contained in:
郭永超 2025-07-02 11:44:04 +08:00
parent 26551e1d27
commit d14a0b6be2
1 changed files with 115 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

164
src/views/trade/dataBoard.vue
View File

@ -14,22 +14,14 @@
<div class="app-container-data-left-top"> <div class="app-container-data-left-top">
<div> <div>
<div class="title"> <div class="title">
<img <img class="title-image" src="../../assets/images/money.png" alt="" />
class="title-image"
src="../../assets/images/money.png"
alt=""
/>
<div>销售总额(元)</div> <div>销售总额(元)</div>
</div> </div>
<div class="number">{{ topLeftData.salesTotalAmount }}</div> <div class="number">{{ topLeftData.salesTotalAmount }}</div>
</div> </div>
<div> <div>
<div class="title"> <div class="title">
<img <img class="title-image" src="../../assets/images/order.png" alt="" />
class="title-image"
src="../../assets/images/order.png"
alt=""
/>
<div>订单总数(单)</div> <div>订单总数(单)</div>
</div> </div>
<div class="number">{{ topLeftData.orderTotalNum }}</div> <div class="number">{{ topLeftData.orderTotalNum }}</div>
@ -38,22 +30,14 @@
<div class="app-container-data-left-bottom"> <div class="app-container-data-left-bottom">
<div> <div>
<div class="title"> <div class="title">
<img <img class="title-image" src="../../assets/images/views.png" alt="" />
class="title-image"
src="../../assets/images/views.png"
alt=""
/>
<div>浏览量(次)</div> <div>浏览量(次)</div>
</div> </div>
<div class="number">{{ topLeftData.viewCount }}</div> <div class="number">{{ topLeftData.viewCount }}</div>
</div> </div>
<div> <div>
<div class="title"> <div class="title">
<img <img class="title-image" src="../../assets/images/money1.png" alt="" />
class="title-image"
src="../../assets/images/money1.png"
alt=""
/>
<div>成功退款金额(元)</div> <div>成功退款金额(元)</div>
</div> </div>
<div class="number">{{ topLeftData.refundSuccessAmout }}</div> <div class="number">{{ topLeftData.refundSuccessAmout }}</div>
@ -67,30 +51,32 @@
</div> </div>
<!-- 中间模块 --> <!-- 中间模块 -->
<div class="app-container-list" ref="middleRef"> <div class="app-container-list" ref="middleRef">
<div class="app-container-block" v-for="(item,index) in middleData" :key="index"> <div class="app-container-block" v-for="(item, index) in middleData" :key="index">
<div class="app-container-block-title">{{ item.title }} <div class="app-container-block-title">{{ item.title }}
<el-popover <el-popover title="" :content="item.toolTip" placement="left-start">
title=""
:content="item.toolTip"
placement="left-start"
>
<template #reference> <template #reference>
<el-icon color="#c5c5c5" style="float: right;"><QuestionFilled /></el-icon> <el-icon color="#c5c5c5" style="float: right;">
<QuestionFilled />
</el-icon>
</template> </template>
</el-popover> </el-popover>
</div> </div>
<div class="app-container-block-price"> <div class="app-container-block-price">
{{ item.valueStr??'--' }} {{ item.valueStr ?? '--' }}
<text style="font-size: 12px; color: #999999; margin-left: 5px"> <text style="font-size: 12px; color: #999999; margin-left: 5px">
{{ item.unit??'' }} {{ item.unit ?? '' }}
</text> </text>
</div> </div>
<div class="app-container-block-proportion"> <div class="app-container-block-proportion">
{{ item.ratioMethod }}： {{ item.ratioMethod }}：
<text :style="{'font-size': '12px',color: item.ratioStatus == '下降'?'red' : 'green'}"> <text :style="{ 'font-size': '12px', color: item.ratioStatus == '下降' ? 'red' : 'green' }">
<el-icon v-if="item.ratioStatus == '下降'"><CaretBottom /></el-icon> <el-icon v-if="item.ratioStatus == '下降'">
<el-icon v-else><CaretTop /></el-icon> <CaretBottom />
{{ item.ratioValue??'' }}% </el-icon>
<el-icon v-else>
<CaretTop />
</el-icon>
{{ item.ratioValue ?? '' }}%
</text> </text>
</div> </div>
</div> </div>
@ -100,22 +86,19 @@
<div class="bottom-box-item"> <div class="bottom-box-item">
<div class="bottom-box-item-title">商品销量</div> <div class="bottom-box-item-title">商品销量</div>
<div class="bottom-box-item-content" :style="{ height: tableViewportHeight + 'px' }"> <div class="bottom-box-item-content" :style="{ height: tableViewportHeight + 'px' }">
<tableComponent <tableComponent :table-data="tableData" :columns="columns" :show-border="false" :show-pagination="false"
:table-data="tableData" :loading="tableLoading">
:columns="columns"
:show-border="false"
:show-pagination="false"
:loading="tableLoading"
>
<!-- 自定义-排名图片 --> <!-- 自定义-排名图片 -->
<template #ranking="slotProps"> <template #ranking="slotProps">
<div class="table-cell-img-box" style="width: 40px;height: 40px;" v-if="slotProps.row.ranking == 1"> <div class="table-cell-img-box" style="width: 40px;height: 40px;" v-if="slotProps.row.ranking == 1">
<img :src="img1" class="table-cell-img" alt="" /> <img :src="img1" class="table-cell-img" alt="" />
</div> </div>
<div class="table-cell-img-box" style="width: 40px;height: 40px;" v-else-if="slotProps.row.ranking == 2"> <div class="table-cell-img-box" style="width: 40px;height: 40px;"
v-else-if="slotProps.row.ranking == 2">
<img :src="img2" class="table-cell-img" alt="" /> <img :src="img2" class="table-cell-img" alt="" />
</div> </div>
<div class="table-cell-img-box" style="width: 40px;height: 40px;" v-else-if="slotProps.row.ranking == 3"> <div class="table-cell-img-box" style="width: 40px;height: 40px;"
v-else-if="slotProps.row.ranking == 3">
<img :src="img3" class="table-cell-img" alt="" /> <img :src="img3" class="table-cell-img" alt="" />
</div> </div>
<div v-else>{{ slotProps.row.ranking }}</div> <div v-else>{{ slotProps.row.ranking }}</div>
@ -152,7 +135,9 @@
<div class="bottom-box-summary" style="line-height: 30px;margin: 0;"> <div class="bottom-box-summary" style="line-height: 30px;margin: 0;">
<div class="bottom-box-summary-item"> <div class="bottom-box-summary-item">
<img :src="alert" style="width: 30px;height: 30px;" alt="" /> <img :src="alert" style="width: 30px;height: 30px;" alt="" />
<div class="bottom-box-summary-title" style="display: inline-block;vertical-align: middle;margin-left: 8px;">预警商品</div> <div class="bottom-box-summary-title"
style="display: inline-block;vertical-align: middle;margin-left: 8px;">
预警商品</div>
</div> </div>
<div class="bottom-box-summary-item" style="width: 120px;flex: none;"> <div class="bottom-box-summary-item" style="width: 120px;flex: none;">
<div class="bottom-box-summary-title">退款订单量</div> <div class="bottom-box-summary-title">退款订单量</div>
@ -161,24 +146,30 @@
<div class="bottom-box-summary-title">退款金额</div> <div class="bottom-box-summary-title">退款金额</div>
</div> </div>
</div> </div>
<div ref="warningGoodsRef" style="overflow-y: auto; height: 150px;" :style="{ height: tableViewportHeight -150 + 'px' }"> <div ref="warningGoodsRef" style="overflow-y: auto; height: 150px;"
<div class="bottom-box-summary" style="line-height: 40px;margin: 0;" :style="{ height: tableViewportHeight - 150 + 'px' }">
v-for="(item, index) in afterSalesData.warningProductInfos" :key="index"> <div v-if="afterSalesData.warningProductInfos.length == 0" style="color: #909399; font-size: 14px; text-align: center; padding-top: 20px">
<div class="bottom-box-summary-item" style="display: flex;"> 暂无数据
<img :src="item.goodUrl" style="width: 40px;height: 40px;" alt="" /> </div>
<div class="bottom-box-summary-title text-ellipsis" style="flex: 1; vertical-align: top;color: #000;margin-left: 8px;" :title="item.goodName"> <template v-else>
{{ item.goodName }} <div class="bottom-box-summary" style="line-height: 40px;margin: 0;"
v-for="(item, index) in afterSalesData.warningProductInfos" :key="index">
<div class="bottom-box-summary-item" style="display: flex;">
<img :src="item.goodUrl" style="width: 40px;height: 40px;" alt="" />
<div class="bottom-box-summary-title text-ellipsis"
style="flex: 1; vertical-align: top;color: #000;margin-left: 8px;" :title="item.goodName">
{{ item.goodName }}
</div>
</div>
<div class="bottom-box-summary-item" style="width: 120px;flex: none;">
<div class="bottom-box-summary-title" style="color: #000;">{{ item.refundedOrders }}单</div>
</div>
<div class="bottom-box-summary-item" style="width: 120px;flex: none;">
<div class="bottom-box-summary-title" style="color: #000;">{{ item.refundAmount }}元</div>
</div> </div>
</div> </div>
<div class="bottom-box-summary-item" style="width: 120px;flex: none;"> </template>
<div class="bottom-box-summary-title" style="color: #000;">{{ item.refundedOrders }}单</div>
</div>
<div class="bottom-box-summary-item" style="width: 120px;flex: none;">
<div class="bottom-box-summary-title" style="color: #000;">{{ item.refundAmount }}元</div>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
@ -256,7 +247,7 @@ const option = {
extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5); text-align: left;', extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5); text-align: left;',
formatter: function (params) { formatter: function (params) {
let result = params[0].name + '<br>'; // x轴值（如"1月"） let result = params[0].name + '<br>'; // x轴值（如"1月"）
params.forEach((param,index) => { params.forEach((param, index) => {
// 获取系列颜色（param.color） // 获取系列颜色（param.color）
const colorDot = `<span style=" const colorDot = `<span style="
display:inline-block; display:inline-block;
@ -267,13 +258,13 @@ const option = {
background-color:${colorList[index]}"> background-color:${colorList[index]}">
</span>`; </span>`;
let unit = ""; let unit = "";
if(param.seriesName == '销售总额') { if (param.seriesName == '销售总额') {
unit = "元"; unit = "元";
} else if(param.seriesName == '订单总数') { } else if (param.seriesName == '订单总数') {
unit = "个"; unit = "个";
} else if(param.seriesName == '浏览量') { } else if (param.seriesName == '浏览量') {
unit = "人次"; unit = "人次";
} else if(param.seriesName == '成功退款金额') { } else if (param.seriesName == '成功退款金额') {
unit = "元"; unit = "元";
} }
result += `${colorDot} ${param.seriesName}: ${param.value} ${unit} <br>`; result += `${colorDot} ${param.seriesName}: ${param.value} ${unit} <br>`;
@ -639,7 +630,7 @@ function generateDateRange(type) {
let startDate = new Date(today); let startDate = new Date(today);
// 根据不同类型计算开始日期 // 根据不同类型计算开始日期
switch(type) { switch (type) {
case 1: // 周 case 1: // 周
startDate.setDate(today.getDate() - 6); // 7天包括今天 startDate.setDate(today.getDate() - 6); // 7天包括今天
break; break;
@ -777,7 +768,15 @@ const loadbottomLeftData = async () => {
} }
}; };
const afterSalesData = ref({}); const afterSalesData = ref({
totalAfterSalesOrders: 0, //售后订单总数
totalRefundAmount: 0, //售后退款金额
totalRefundOrders: 0, //售后订单总数
warningProductInfos: [
// 售后商品信息
// { goodUrl: tomato.value, goodName: "耿马西红柿", refundedOrders: "25单", refundAmount: '129元' },
],
});
// 加载数据-底部右侧模块 // 加载数据-底部右侧模块
const loadbottomRightData = async () => { const loadbottomRightData = async () => {
// console.log('右下角数据更新'); // console.log('右下角数据更新');
@ -829,7 +828,7 @@ const calculateTableHeight = () => {
tableViewportHeight.value = height < 300 ? 300 : height; tableViewportHeight.value = height < 300 ? 300 : height;
}; };
onMounted(async() => { onMounted(async () => {
initTopLeftData initTopLeftData
await initChart(); await initChart();
changeDateRadio(1); changeDateRadio(1);
@ -856,11 +855,13 @@ onBeforeUnmount(() => {
font-size: 18px; font-size: 18px;
color: #999999; color: #999999;
} }
.title-image { .title-image {
margin-right: 10px; margin-right: 10px;
width: 38px; width: 38px;
height: 38px; height: 38px;
} }
.number { .number {
margin-right: 100px; margin-right: 100px;
margin-top: 16px; margin-top: 16px;
@ -868,6 +869,7 @@ onBeforeUnmount(() => {
font-weight: bold; font-weight: bold;
color: #000000; color: #000000;
} }
.app-container-list { .app-container-list {
margin-top: 20px; margin-top: 20px;
display: flex; display: flex;
@ -875,66 +877,84 @@ onBeforeUnmount(() => {
justify-content: space-between; justify-content: space-between;
gap: 20px; gap: 20px;
} }
.app-container-title { .app-container-title {
margin-bottom: 20px; margin-bottom: 20px;
padding-right: 10px; padding-right: 10px;
font-size: 20px; font-size: 20px;
font-weight: bold; font-weight: bold;
} }
.app-container-data { .app-container-data {
border-radius: 10px; border-radius: 10px;
padding: 20px 10px 20px 20px; padding: 20px 10px 20px 20px;
width: 100%; width: 100%;
background-color: #fff; background-color: #fff;
.app-container-data-left { .app-container-data-left {
width: 500px; width: 500px;
.app-container-data-left-top { .app-container-data-left-top {
display: flex; display: flex;
} }
.app-container-data-left-bottom { .app-container-data-left-bottom {
margin-top: 40px; margin-top: 40px;
display: flex; display: flex;
} }
} }
.app-container-data-right { .app-container-data-right {
flex: 1; flex: 1;
} }
} }
.app-container-block { .app-container-block {
flex: 1; flex: 1;
background-color: #fff; background-color: #fff;
border-radius: 10px; border-radius: 10px;
padding: 10px 10px 10px 14px; padding: 10px 10px 10px 14px;
.app-container-block-title { .app-container-block-title {
font-size: 18px; font-size: 18px;
font-weight: bold; font-weight: bold;
} }
.app-container-block-price { .app-container-block-price {
font-size: 18px; font-size: 18px;
color: #42b983; color: #42b983;
font-weight: bold; font-weight: bold;
margin: 10px 0; margin: 10px 0;
} }
.app-container-block-proportion { .app-container-block-proportion {
font-size: 12px; font-size: 12px;
.el-icon { .el-icon {
vertical-align: text-top; vertical-align: text-top;
} }
} }
:deep(.el-popper.tooltip-box-item) { :deep(.el-popper.tooltip-box-item) {
max-width: 200px; /* 限制最大宽度 */ max-width: 200px;
word-break: break-word; /* 长单词或URL换行 */ /* 限制最大宽度 */
white-space: normal !important; /* 覆盖默认的 nowrap */ word-break: break-word;
/* 长单词或URL换行 */
white-space: normal !important;
/* 覆盖默认的 nowrap */
} }
.tooltip-box-item { .tooltip-box-item {
width: 200px !important; width: 200px !important;
} }
} }
.bottom-flex-box { .bottom-flex-box {
margin-top: 20px; margin-top: 20px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
gap: 20px; gap: 20px;
.bottom-box-item { .bottom-box-item {
flex: 1; flex: 1;
width: 50%; width: 50%;
@ -942,27 +962,33 @@ onBeforeUnmount(() => {
border-radius: 10px; border-radius: 10px;
padding: 20px 20px 0px 20px; padding: 20px 20px 0px 20px;
} }
.bottom-box-item-title { .bottom-box-item-title {
font-size: 18px; font-size: 18px;
font-weight: bold; font-weight: bold;
} }
.bottom-box-item-content { .bottom-box-item-content {
height: 300px; height: 300px;
min-height: 300px; min-height: 300px;
.bottom-box-summary { .bottom-box-summary {
display: flex; display: flex;
margin: 10px 0; margin: 10px 0;
gap: 20px; gap: 20px;
width: 100%; width: 100%;
.bottom-box-summary-item { .bottom-box-summary-item {
flex: 1; flex: 1;
min-width: 0; min-width: 0;
overflow: hidden; overflow: hidden;
.bottom-box-summary-title { .bottom-box-summary-title {
font-size: 16px; font-size: 16px;
color: #999; color: #999;
margin-bottom: 16px; margin-bottom: 16px;
} }
.bottom-box-summary-value { .bottom-box-summary-value {
font-size: 20px; font-size: 20px;
color: #000; color: #000;